/* The fuel shock model, ported from the scenario artifact onto the Freedom Preservation Project.
   Everything is scoped under .fuel-model: the model styles bare elements (button, table, figure,
   h2, a) and those would otherwise reach the shared site header and footer. The palette is the
   Don't Trust the Pig dark set, which the model was built in. */
.page-fuel-model{color-scheme:dark}

.fuel-model{
  --ink:#0b1220; --ink-2:#121c30; --ink-3:#18233a;
  --line:#24304c; --paper:#f3f5fa; --paper-dim:#9aa6bf;
  --gold:#e8b04c; --fuel:#3987e5; --cpi:#d95926; --warn:#e06c6c;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,Consolas,monospace;
  background:var(--ink);color:var(--paper);font:400 16px/1.6 var(--sans);
}
.fuel-model *{box-sizing:border-box}
.fuel-model .wrap{max-width:60rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:2.5rem 4rem}
.fuel-model .eyebrow{font:500 .7rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .6rem}
.fuel-model h1{font:700 clamp(1.9rem,4.4vw,2.9rem)/1.1 var(--serif);margin:0 0 .8rem;text-wrap:balance;color:var(--paper)}
.fuel-model .lede{font-size:1.06rem;color:var(--paper-dim);max-width:62ch;margin:0 0 1.2rem}
.fuel-model .asof{font:400 .82rem/1.5 var(--mono);color:var(--paper-dim);border-left:2px solid var(--line);
  padding-left:.85rem;margin:0 0 2rem;max-width:58ch}
.fuel-model .asof b{color:var(--paper);font-weight:500}
.fuel-model h2{font:600 1.25rem/1.2 var(--serif);margin:0 0 .25rem;color:var(--paper)}
.fuel-model .sub{font-size:.9rem;color:var(--paper-dim);margin:0 0 1rem}

.fuel-model .panel{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem}
.fuel-model .presets{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem;align-items:center}
.fuel-model button{font-family:var(--sans);cursor:pointer}
.fuel-model button.preset{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-size:.85rem;font-weight:600}
.fuel-model button.preset:hover{border-color:var(--gold)}
.fuel-model button.preset[aria-pressed="true"]{background:var(--gold);color:#101722;border-color:var(--gold)}
.fuel-model button.reset{margin-left:auto;background:transparent;color:var(--paper-dim);border:1px dashed var(--line);
  border-radius:999px;padding:.5rem 1rem;font-size:.82rem;font-weight:600}
.fuel-model button.reset:hover{color:var(--gold);border-color:var(--gold)}
.fuel-model button:focus-visible,.fuel-model input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.fuel-model .ctrl{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:baseline;margin-bottom:1.1rem}
.fuel-model .ctrl:last-child{margin-bottom:0}
.fuel-model .ctrl label{font-weight:600;font-size:.95rem}
.fuel-model .ctrl .val{font:500 1rem var(--mono);color:var(--gold);font-variant-numeric:tabular-nums}
.fuel-model .ctrl .hint{grid-column:1/-1;font-size:.82rem;color:var(--paper-dim);margin:0}
.fuel-model .ctrl input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--gold);margin:.3rem 0 0}
.fuel-model .seg{grid-column:1/-1;display:flex;gap:.4rem;margin-top:.35rem}
.fuel-model .seg button{flex:1;background:transparent;color:var(--paper-dim);border:1px solid var(--line);
  border-radius:8px;padding:.45rem .3rem;font-size:.85rem;font-weight:600;min-width:0}
.fuel-model .seg button[aria-pressed="true"]{background:var(--ink-3);color:var(--paper);border-color:var(--gold)}

.fuel-model .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin-bottom:1.5rem}
.fuel-model .tile{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1.1rem;min-width:0}
.fuel-model .tile .cap{font:500 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 .45rem}
.fuel-model .tile .big{font:700 2.1rem/1 var(--serif);font-variant-numeric:tabular-nums;margin:0}
.fuel-model .tile .rng{font:400 .82rem/1.45 var(--mono);color:var(--paper-dim);margin:.4rem 0 0;font-variant-numeric:tabular-nums}
.fuel-model .tile.fuel .big{color:var(--fuel)}
.fuel-model .tile.cpi .big{color:var(--cpi)}
.fuel-model .tile.worth .big{color:var(--gold)}

.fuel-model figure{margin:0 0 1.5rem}
.fuel-model .ttl{font:600 .95rem var(--sans);color:var(--paper);margin:0 0 .5rem}
.fuel-model figcaption{font-size:.86rem;color:var(--paper-dim);margin:.5rem 0 0}
.fuel-model .chartbox{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:1rem .75rem .5rem;overflow-x:auto}
.fuel-model svg{display:block;width:100%;height:auto;max-width:100%}

.fuel-model .flyrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;margin:2rem 0 0}
.fuel-model .flyrow button{background:var(--ink-2);color:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1rem;font-size:.92rem;font-weight:600;text-align:left;display:flex;
  justify-content:space-between;align-items:center;gap:.6rem;min-width:0}
.fuel-model .flyrow button:hover{border-color:var(--gold)}
.fuel-model .flyrow button[aria-expanded="true"]{border-color:var(--gold);background:var(--ink-3)}
.fuel-model .flyrow button .chev{color:var(--gold);font-family:var(--mono);flex:0 0 auto}
.fuel-model .fly{background:var(--ink-2);border:1px solid var(--gold);border-radius:12px;padding:1.25rem;margin-top:.7rem}
.fuel-model .fly h3{font:600 1.05rem var(--serif);margin:0 0 .6rem;color:var(--paper)}
.fuel-model .fly p{margin:0 0 .8rem}
.fuel-model .fly p:last-child{margin-bottom:0}
.fuel-model table{border-collapse:collapse;width:100%;font-size:.88rem;margin:.5rem 0 1rem}
.fuel-model th,.fuel-model td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.fuel-model th{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim)}
.fuel-model td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fuel-model .limit{border-left:3px solid var(--warn);padding:.2rem 0 .2rem .9rem;color:var(--paper-dim);font-size:.92rem}
.fuel-model a{color:var(--gold)}
.fuel-model .src{font-size:.84rem;color:var(--paper-dim)}
.fuel-model [hidden]{display:none!important}

/* Sends the reader on: the reel points here, this points at the record. */
.fuel-model .onward{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.5rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.fuel-model .onward a{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.65rem 1.2rem;font-size:.9rem;font-weight:600;text-decoration:none}
.fuel-model .onward a:hover{border-color:var(--gold)}
.fuel-model .onward a.lead{background:var(--gold);color:#101722;border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){.fuel-model *{transition:none!important;animation:none!important}}

/* Shown whenever the chosen disruption exceeds the share of world supply the model's own
   limitations note describes as reliable. Beside the result, never behind an accordion. */
.fuel-model .range-warn{margin:0 0 14px;padding:12px 14px;border-left:3px solid #f0b429;
  background:rgba(240,180,41,.09);border-radius:0 6px 6px 0;font-size:.95rem;line-height:1.5}
.fuel-model .range-warn strong{color:#f0b429}