/* Fuel Scenario Lab v0.1
   Fonts: drop IBM Plex Sans woff2 files into /fonts to match incidence.world;
   until then the system stack is used. */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --page: #F5F6F3;
  --panel: #FFFFFF;
  --ink: #1A1D21;
  --ink-2: #4B5158;
  --muted: #7A8087;
  --line: #D9DCD6;
  --line-2: #EAECE7;
  --supply: #1F5C7A;
  --supply-2: #CFE0E9;
  --short: #C2410C;
  --short-2: #F6DFD2;
  --locked: #9AA0A6;
  --z-green: #2E7D32;
  --z-yellow: #B8921A;
  --z-orange: #D9760F;
  --z-red: #B3261E;
  --soft: #DDE7D4;
  --focus: #1F5C7A;
  --radius: 4px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); line-height: 1.45; font-variant-numeric: tabular-nums; }
h1 { font-size: 1.55rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 0.4rem; }
h3 { font-size: 0.95rem; font-weight: 600; margin: 0.8rem 0 0.3rem; }
p { margin: 0.3rem 0; }
a { color: var(--supply); }
button, input, select, textarea { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: 0.4rem 0.8rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; z-index: 10; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* header */
.top { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; padding: 1.2rem 1.5rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.tagline { color: var(--ink-2); max-width: 62ch; margin-top: 0.3rem; }
.meta { color: var(--muted); font-size: 0.85rem; text-align: right; white-space: nowrap; }
.decks { display: flex; gap: 0.2rem; padding: 0 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line); align-items: center; }
.deck-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 0.7rem 0.9rem; cursor: pointer; color: var(--ink-2); }
.deck-tab.is-active { color: var(--ink); border-bottom-color: var(--supply); font-weight: 600; }
.deck-link { margin-left: auto; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.deck-link:hover { color: var(--supply); }

/* layout */
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; min-height: 70vh; }
.rail { background: var(--panel); border-right: 1px solid var(--line); padding: 1rem 1.1rem 2rem; }
.rail-block { padding: 0.6rem 0 0.9rem; border-bottom: 1px solid var(--line-2); }
.rail-block h2 { font-size: 0.85rem; margin: 0.2rem 0 0.2rem; color: var(--ink-2); font-weight: 600; }
.stage { padding: 1rem 1.6rem 3rem; min-width: 0; }
.deck.is-hidden { display: none; }
.hint { color: var(--muted); font-size: 0.85rem; }

/* fields */
.field { display: block; margin: 0.4rem 0; }
.field > span { display: block; font-size: 0.8rem; color: var(--ink-2); margin-bottom: 0.15rem; }
.field input[type=text], .field input[type=date], .field select, .field input[type=number] { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.field.inline { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0; }
.field.inline > span { margin: 0; }
.field.inline select { width: auto; }
.preset-thesis { font-size: 0.83rem; color: var(--ink-2); }

/* sliders */
.slider { padding: 0.55rem 0 0.5rem; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.slider-head label { font-size: 0.86rem; }
.slider-val { font-weight: 600; white-space: nowrap; }
.slider-val.is-override { color: var(--short); }
.slider input[type=range] { width: 100%; margin: 0.35rem 0 0; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; background: var(--line-2); outline-offset: 4px; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--supply); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--supply); cursor: pointer; }
.slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--supply); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--supply); cursor: pointer; }
.slider input[type=range].is-policy::-webkit-slider-thumb { background: var(--ink-2); box-shadow: 0 0 0 1px var(--ink-2); }
.slider input[type=range].is-policy::-moz-range-thumb { background: var(--ink-2); box-shadow: 0 0 0 1px var(--ink-2); }
.slider-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }
.slider details { font-size: 0.8rem; color: var(--ink-2); margin-top: 0.2rem; }
.slider summary { cursor: pointer; color: var(--muted); }
.slider details p { margin: 0.25rem 0; }
.override { margin-top: 0.4rem; padding: 0.5rem; background: var(--short-2); border-left: 3px solid var(--short); font-size: 0.8rem; }
.override textarea { width: 100%; min-height: 3rem; margin-top: 0.3rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); }
.override .missing { color: var(--short); font-weight: 600; }
.group-title { font-size: 0.85rem; color: var(--ink-2); font-weight: 600; margin: 0.8rem 0 0; }
.default-mark { font-size: 0.72rem; color: var(--muted); font-weight: 400; }

/* events */
.event { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px dotted var(--line-2); font-size: 0.85rem; }
.event input[type=date] { padding: 0.15rem 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.8rem; }
.event .effect { grid-column: 2 / span 2; font-size: 0.75rem; color: var(--muted); }
.locked-item { font-size: 0.82rem; padding: 0.3rem 0; color: var(--ink-2); }
.locked-item b { color: var(--locked); font-weight: 600; }
.locked-item small { display: block; color: var(--muted); font-size: 0.75rem; }

/* backcast */
.backcast { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 0.86rem; }
.backcast .verdict { font-weight: 600; }
.backcast.pass .verdict { color: var(--z-green); }
.backcast.fail .verdict { color: var(--short); }
.backcast .chk { color: var(--ink-2); }
.backcast .chk.bad { color: var(--short); }
.backcast .sugg { width: 100%; color: var(--ink-2); }

/* headline */
.headline { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.2rem; margin-top: 1rem; align-items: stretch; }
.bars { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; }
.bar-row { margin: 0.5rem 0 0.9rem; }
.bar-row .bar-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }
.bar-row .bar-label b { font-weight: 600; }
.bar { position: relative; height: 22px; background: var(--short-2); border-radius: 3px; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--supply); }
.bar .fill.today { background: var(--supply-2); }
.bar .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.bar-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.dial { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; display: flex; flex-direction: column; justify-content: center; }
.dial .big { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.dial .big.bad { color: var(--short); }
.dial .big.good { color: var(--z-green); }
.dial .lbl { font-size: 0.85rem; color: var(--ink-2); }
.dial .sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.4rem; }

/* horizons */
.horizons { display: flex; gap: 0.3rem; margin-top: 1rem; flex-wrap: wrap; }
.hz { flex: 1 1 100px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; cursor: pointer; }
.hz.is-active { border-color: var(--supply); box-shadow: inset 0 0 0 1px var(--supply); }
.hz .hz-l { font-size: 0.8rem; color: var(--ink-2); }
.hz .hz-v { font-size: 1.25rem; font-weight: 600; }
.hz .hz-c { font-size: 0.7rem; color: var(--muted); }
.conf { display: inline-block; padding: 0 0.3rem; border-radius: 3px; background: var(--line-2); font-size: 0.7rem; color: var(--ink-2); }

/* chart */
.chart-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.8rem 0.4rem; margin-top: 0.8rem; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 1.2rem; font-size: 0.78rem; color: var(--ink-2); flex-wrap: wrap; padding: 0.2rem 0.2rem 0; }
.legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 0.35rem; }
.legend .lg-95 { background: var(--supply); }
.legend .lg-msk { background: none; height: 0; border-top: 2px dashed var(--supply); }
.legend .lg-92 { background: var(--locked); }
.legend .lg-step { background: var(--z-red); }
.legend .lg-anchor { background: var(--soft); height: 10px; }
.span-all { grid-column: 1 / -1; }
.boot-error { padding: 1rem; color: var(--short); }

/* readings & indices */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.readings, .indices { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; font-size: 0.88rem; }
.readings p { margin: 0.35rem 0; }
.readings .who { color: var(--ink-2); font-weight: 600; }
.meter { margin: 0.5rem 0 0.8rem; }
.meter .m-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-2); }
.meter .m-track { position: relative; height: 8px; background: var(--line-2); border-radius: 4px; margin-top: 0.25rem; }
.meter .m-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-2); }
.meter .m-fill { position: absolute; top: 0; bottom: 0; background: var(--short); border-radius: 4px; }
.meter .m-fill.opt { background: var(--supply); }
.meter .m-fill.eff { background: var(--ink-2); }
.meter small { color: var(--muted); font-size: 0.75rem; }

/* regions */
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.region { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; border-top-width: 4px; }
.region .r-name { font-size: 0.78rem; color: var(--ink-2); min-height: 2.2em; }
.region .r-val { font-size: 1.3rem; font-weight: 600; }
.region .r-step { font-size: 0.75rem; color: var(--muted); }
.zone-green { border-top-color: var(--z-green); }
.zone-yellow { border-top-color: var(--z-yellow); }
.zone-orange { border-top-color: var(--z-orange); }
.zone-red { border-top-color: var(--z-red); }

/* tables */
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; background: var(--panel); }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { color: var(--ink-2); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
td.num, th.num { text-align: right; }
tr.total td { font-weight: 600; border-top: 1px solid var(--line); }
tr.check td { color: var(--muted); font-size: 0.78rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); max-height: 70vh; }
.registry input[type=number] { width: 4.2rem; padding: 0.15rem 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); }
.registry select { padding: 0.15rem 0.2rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.8rem; }
.badge { display: inline-block; padding: 0 0.35rem; border-radius: 3px; font-size: 0.7rem; background: var(--line-2); color: var(--ink-2); margin-left: 0.3rem; }
.badge.prov { background: #FFF1D6; color: #8A5A00; }
.badge.tier-A { background: #DDEBDD; color: var(--z-green); }
.badge.tier-B { background: var(--line-2); }
.badge.tier-C { background: var(--short-2); color: var(--short); }
.badge.no { background: var(--line-2); color: var(--muted); }
.note-cell { max-width: 28ch; color: var(--muted); font-size: 0.75rem; }
.report { margin: 0.6rem 0; font-size: 0.82rem; }
.report .ok { color: var(--z-green); }
.report .warn { color: #8A5A00; }
.report .error { color: var(--short); }
.report ul { margin: 0.3rem 0; padding-left: 1.2rem; max-height: 14rem; overflow: auto; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0; }
.btn { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; text-decoration: none; color: var(--ink); font-size: 0.85rem; }
.btn:hover { border-color: var(--supply); }
.btn.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.btn.file { position: relative; }
.toast { font-size: 0.82rem; color: var(--z-green); }
.meta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.meta-form .wide { grid-column: 1 / -1; }
.json { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem; font-size: 0.78rem; overflow: auto; max-height: 24rem; font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }

/* passport stub: the one bold element */
.stub { margin-top: 2rem; background: var(--panel); border: 1px solid var(--ink); border-radius: 6px; padding: 0.7rem 1rem; font-size: 0.8rem; position: relative; color: var(--ink-2); }
.stub::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 0; border-top: 1px dashed var(--ink); }
.stub b { color: var(--ink); }
.stub .stub-row { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.stub .warn { color: var(--short); font-weight: 600; }

/* decomposition & ledger */
.decomp-bar { display: inline-block; height: 8px; vertical-align: middle; background: var(--supply); }
.decomp-bar.neg { background: var(--short); }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .headline { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { flex-direction: column; align-items: flex-start; }
  .meta { text-align: left; white-space: normal; }
  .meta-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .bar .fill { transition: width 220ms ease; }
}