/* Austin Energy market analysis — shared shell.
   Direction: engineering plot on cool vellum. Page chrome stays quiet; all
   saturation is spent inside the dark instrument panels. */

:root {
  --paper:        #EDEFF1;
  --paper-2:      #E3E7EA;
  --ink:          #111820;
  --ink-2:        #3C4956;
  --ink-3:        #6B7885;
  --rule:         #C6CDD3;
  --rule-soft:    #D7DCE0;
  --signal:       #C2452E;
  --panel:        #0C1116;
  --panel-2:      #161E26;
  --panel-ink:    #C3CED8;
  --panel-ink-2:  #74838F;

  --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "SF Mono", ui-monospace, Menlo, "IBM Plex Mono", monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--ink);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--signal); }

.masthead nav { display: flex; gap: 1.4rem; }

.masthead nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- layout ---------- */

main { padding: 0 var(--gutter) 6rem; }

.band { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.band:last-child { border-bottom: 0; }
.band--tight { padding-block: clamp(1.1rem, 2vw, 1.6rem); }
/* a band that hands straight off to the next one: no closing rule, no closing padding */
.band--runon { padding-bottom: 0; border-bottom: 0; }
.band--runon + .band { padding-top: 0; }
/* a rule ABOVE, to separate the whole-record charts from the single-day instrument */
.band--rule { border-top: 1px solid var(--rule); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.band--rule + .band--rule { border-top: 0; padding-top: 0; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
  text-transform: uppercase;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.standfirst {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0;
}

.note {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- instrument panel ---------- */

.panel {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: 2px;
  padding: 1.4rem clamp(1rem, 2vw, 1.75rem) 1.6rem;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.panel-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #EDF2F6;
  margin: 0;
}

.panel-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--panel-ink-2);
}

/* ---------- year selector ---------- */

.years { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.years button {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--panel-ink-2);
  background: transparent;
  border: 1px solid #27323C;
  border-radius: 2px;
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.years button:hover { color: #EDF2F6; border-color: #46555F; }
.years button[aria-pressed="true"] {
  color: var(--panel);
  background: var(--panel-ink);
  border-color: var(--panel-ink);
}
.years button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- the year canvas (signature) ---------- */

.canvas-wrap { position: relative; }

#yearCanvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: var(--panel-2);
}

.canvas-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: var(--panel-ink-2);
  margin-top: 0.5rem;
}

.canvas-yaxis {
  position: absolute;
  left: -2.4rem;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--panel-ink-2);
}

.legend { display: flex; align-items: center; gap: 0.6rem; }
.legend-ramp { width: 140px; height: 8px; border-radius: 1px; }
.legend-label { font-family: var(--mono); font-size: 0.66rem; color: var(--panel-ink-2); }

.readout {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #EDF2F6;
  min-height: 1.2em;
  margin-top: 0.6rem;
}
.readout span { color: var(--panel-ink-2); }

/* ---------- method steps ---------- */

.steps { display: grid; gap: 0; margin-top: 2rem; }

.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }

.step-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.08em;
  padding-top: 0.25rem;
}

.step-body { max-width: var(--measure); }
.step-body p { margin: 0.4rem 0 0; }

.src {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- tables ---------- */

.tbl-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.78rem;
}

table.data th {
  text-align: right;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.66rem;
  padding: 0 0.7rem 0.5rem;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
table.data th:first-child, table.data td:first-child { text-align: left; padding-left: 0; }
table.data td {
  text-align: right;
  padding: 0.42rem 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.data tr:last-child td { border-bottom: 1px solid var(--ink); }
table.data td.pos { color: var(--signal); }

/* ---------- chart grid ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
}

.month-cell { }
.month-cell .month-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--panel-ink-2);
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
}
.month-cell svg { display: block; width: 100%; height: auto; }

figure { margin: 0; }
figcaption { margin-top: 0.7rem; }

svg text { font-family: var(--mono); }

/* ---------- limits ---------- */

.limits { display: grid; gap: 1.1rem; max-width: 74ch; }

.limit {
  border-left: 2px solid var(--signal);
  padding-left: 1rem;
}
.limit h3 { margin-bottom: 0.2rem; }
.limit p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

/* ---------- dashboard: day picker ---------- */

.daybar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.daypick { display: flex; align-items: stretch; gap: 0; }

.daypick button {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0 0.75rem;
  transition: background 120ms, color 120ms;
}
.daypick button:hover { background: var(--ink); color: var(--paper); }

.daypick input[type="date"] {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-inline: 0;
  padding: 0.45rem 0.7rem;
}
.daypick input[type="date"]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* light-page variant of the pill buttons */
#presets button {
  color: var(--ink-3);
  border-color: var(--rule);
  background: transparent;
}
#presets button:hover { color: var(--ink); border-color: var(--ink-3); }
#presets button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* Terse notes as a list rather than a paragraph: these are reference items looked up one
   at a time, not prose read start to finish. */
.keylist {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  max-width: 74ch;
}
.keylist li {
  position: relative;
  padding-left: 0.9rem;
  margin-bottom: 0.22rem;
  line-height: 1.5;
}
.keylist li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-3);
}

/* ---------- dashboard: the scrub ribbon ---------- */

.ribbon-wrap { margin-top: 0.9rem; }
#ribbon { width: 100%; height: auto; display: block; cursor: pointer; touch-action: none; }
.ribbon-note {
  margin: 0.3rem 0 0;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3);
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  min-height: 1.05rem;                 /* reserve the line so the page cannot jump */
}
.ribbon-cue { color: var(--signal); }
.ribbon-note b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- dashboard: stat strip ---------- */

.statstrip {
  display: grid;
  /* five entries now: the clock plus the four figures it describes. The clock takes a
     wider track so a pinned/of-96 note never wraps under the time. */
  grid-template-columns: minmax(150px, 1.3fr) minmax(105px, 0.85fr) repeat(4, minmax(112px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  /* the strip IS the readout — sticking it keeps the interval labelled while the
     breakdown beside it scrolls */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
}
@media (max-width: 720px) {
  .statstrip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); position: static; }
}

.stat {
  padding: 0.6rem 0.9rem 0.65rem 0;
  border-left: 1px solid var(--rule-soft);
  padding-left: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.stat:first-child { border-left: 0; padding-left: 0; }

.stat-k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-u { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); }

.stat--clock .stat-v {
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat--day .stat-v { color: var(--ink); white-space: nowrap; }
/* entries with neither caption nor unit: drop the empty lines so the value centres */
.stat-k:empty, .stat-u:empty { display: none; }
.stat--clock { justify-content: center; }

/* ---------- dashboard: interval breakdown table ---------- */

/* The readout sits between the chart and a long table; keeping it stuck to the top of
   the viewport means the interval you are reading stays labelled while you scroll. */
.readout.sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  padding: 0.5rem 0 0.4rem;
  margin-top: 0;
  border-bottom: 1px solid #27323C;
}
.readout .pin { color: #C9A227; }

/* ---------- dashboard: table ---------- */

/* chart left, breakdown right. Below 1080px the table's eight columns cannot survive a
   half-width column, so the pane collapses to one and the table takes the full measure. */
.splitpane {
  display: grid;
  /* Both tracks are pure length ranges — no `auto`, no min-content. A content-sized track
     would be re-measured on every hover, and since the plant list changes interval to
     interval the boundary (and so the chart) would drift as the cursor moved. */
  grid-template-columns: minmax(420px, 760px) minmax(560px, 580px);
  justify-content: start;
  gap: 1.6rem 2rem;
  align-items: start;
  margin-top: 1rem;
}
/* NOT sticky: the chart and the map together exceed the viewport, and a sticky element
   taller than its container pins in place with its lower half permanently unreachable.
   The stat strip above still sticks, so the interval stays labelled either way. */
.splitpane-chart { position: static; }
#mapChart { margin-top: 1.4rem; }
.submap-note { margin-top: 0.45rem; font-size: 0.64rem; max-width: 58ch; }
.splitpane-chart .keylist { max-width: 58ch; font-size: 0.66rem; }
/* the table can no longer be squeezed — its columns are fixed — so side-by-side needs
   560 + 420 + gap + gutters, which runs out just under 1090px */
@media (max-width: 1120px) {
  .splitpane { grid-template-columns: minmax(0, 1fr); }
  /* stacked, both would otherwise stretch back to the full page width — the table's
     slack all lands in the plant column as dead space */
  .splitpane-chart { position: static; max-width: 700px; }
  #intervalTable { max-width: 580px; }
}

#intervalTable { min-height: 2rem; }
/* the footnote is prose: unclamped, its max-content is one long line, which would size the
   grid track instead of the table and hand the chart nothing */
#intervalTable > .note { max-width: 64ch; }
.tbl-placeholder {
  margin: 0; padding: 2.5rem 0 0;
  max-width: 44ch;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.7;
  color: var(--ink-3);
}

table.itbl {
  width: 100%;
  /* Auto layout re-measures every cell on each redraw, so the columns resized as the
     numbers under the cursor changed and the whole table shuddered. Fixed layout takes its
     widths from the colgroup instead, which does not depend on the data. The three numeric
     widths below are measured maxima ($9,999.99, −$9,999.99, a 112px bar plus its label);
     Plant takes the remainder. */
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--panel-ink);
}

table.itbl th {
  text-align: right;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--panel-ink-2);
  padding: 0.4rem 0.4rem 0.3rem;
  border-bottom: 1px solid #27323C;
  white-space: nowrap;
  /* stick directly beneath the strip, whose height JS publishes as --striph */
  position: sticky;
  top: var(--striph, 64px);
  background: var(--panel);
  z-index: 1;
}
table.itbl th:first-child, table.itbl td:first-child { text-align: left; padding-left: 0; }
table.itbl th.l, table.itbl td.l { text-align: left; }

table.itbl td {
  text-align: right;
  padding: 0.22rem 0.4rem;
  border-bottom: 1px solid #161E26;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

table.itbl tr.zone td {
  padding-top: 0.55rem;
  border-bottom: 1px solid #27323C;
  color: #EDF2F6;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
table.itbl tr.off td { color: #55636E; }
/* held but not scheduled: present so it can be found, recessive so it cannot be mistaken
   for a plant that ran */
table.itbl tr.idle td { color: var(--ink-3); font-style: italic; }
.panel--flat table.itbl tr.idle td.name { color: var(--ink-3); }
.capbar.idle { background: transparent; border: 1px dashed var(--rule); }
.capbar.idle .capbar-gen { font-style: normal; letter-spacing: 0.02em; }
table.itbl td .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: middle;
}
table.itbl .glyph { vertical-align: -2px; margin-right: 0.4rem; }
table.itbl td.name { color: #EDF2F6; }
table.itbl tr.off td.name { color: #7C8A95; }
/* capacity bar: length = AE capacity, fill = current output */
table.itbl td.barcell { padding-right: 1.5rem; }
.col-bar   { width: 155px; }   /* BAR_PX 112 + the capacity label's 34px overhang */
.col-node  { width: 82px; }    /* "$9,999.99†" is 64px + 12.8px padding */
.col-basis { width: 92px; }    /* "−$9,999.99" is 64px + 22.4px padding */
/* longest plant today renders at 210px including the glyph and the column holds 230+,
   but ellipsis rather than collide with the bar if a longer name ever appears */
table.itbl td.name { overflow: hidden; text-overflow: ellipsis; }

.capbar {
  position: relative;
  height: 14px;
  background: #1B242C;
  border-radius: 2px;
  min-width: 46px;
}
.capbar-fill { height: 100%; border-radius: 2px 0 0 2px; opacity: 0.85; }
.capbar-gen, .capbar-cap {
  position: absolute; top: 0; line-height: 14px;
  font-size: 0.62rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
.capbar-gen.in  { left: 5px; color: #0C1116; font-weight: 600; }
.capbar-gen.out { color: var(--panel-ink); }
.capbar-cap { right: -34px; color: var(--panel-ink-2); }
tr.off .capbar-fill { opacity: 0.35; }

/* capacity that is OUT: diagonal stripes filling from the right of the bar. Warm and
   high-contrast against the dark track so an outage reads instantly, without competing
   with the fuel colour that shows actual output. */
.capbar-out {
  position: absolute; right: 0; top: 0; height: 100%;
  border-radius: 0 2px 2px 0;
  border-left: 1px solid rgba(217,132,62,0.55);
  background: repeating-linear-gradient(
    45deg,
    rgba(217,132,62,0.62) 0 2.5px,
    rgba(217,132,62,0.10) 2.5px 5.5px);
}

/* footnote marks explain themselves on hover rather than sending you to a legend */
table.itbl abbr.mk {
  text-decoration: none;
  cursor: help;
  color: var(--panel-ink-2);
  border-bottom: 1px dotted var(--panel-ink-2);
  margin-left: 1px;
}

/* contribution to the weighted average: bar ranks it, number states it */
/* Highlight for the row(s) behind the mark under the cursor. The basis cell carries an
   inline background, which would win over any class-level background — so the row rule is
   drawn with inset shadows, which composite on top of it instead of competing. */
table.itbl tr.hl td {
  box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink);
}
table.itbl tr.hl td.name { font-weight: 700; color: var(--ink); }
table.itbl tr.hl td:first-child { box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink), inset 2px 0 0 var(--ink); }
table.itbl tr.hl td:last-child  { box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink), inset -2px 0 0 var(--ink); }

table.itbl td.basis {
  min-width: 84px;
  padding-left: 0.7rem; padding-right: 0.7rem;
  font-weight: 600;
  border-bottom-color: transparent;
}
/* inline colour chips in the footnote, so the tint is explained where it is used */
.lg {
  display: inline-block; width: 0.85em; height: 0.85em;
  vertical-align: -0.05em; border-radius: 2px; margin: 0 0.15em 0 0.35em;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
table.itbl td.contrib .cbar {
  display: inline-block; width: 46px; height: 7px; vertical-align: middle;
  background: #1B242C; border-radius: 1px; margin-right: 0.45rem;
}
table.itbl td.contrib .cbar-fill { height: 100%; border-radius: 1px; opacity: 0.9; }
table.itbl td.contrib span { font-variant-numeric: tabular-nums; }
tr.off td.contrib .cbar-fill { opacity: 0.35; }

table.itbl tfoot td {
  border-top: 1px solid #27323C; border-bottom: 0;
  padding-top: 0.5rem; color: #EDF2F6;
}

/* ---------- dashboard: chart keys ---------- */

.legend-keys { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

.legend-keys .key {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--panel-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.legend-keys .key i {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  display: inline-block;
}

/* ---------- flat panel: chart sits on the page, not in a dark box ---------- */
/* The dashboard reads as one object when the picker, the stat strip and the chart all
   share a background. Everything below re-inks the panel's contents for the light ground. */

.panel--flat {
  background: transparent;
  color: var(--ink);
  padding: 0;
  /* no rule and no top padding: the strip's own top border is the boundary */
  padding-top: 0.55rem;
}
.panel--flat .panel-title { color: var(--ink); }
.panel--flat .panel-sub,
.panel--flat .legend-keys .key { color: var(--ink-3); }
.panel--flat .readout { color: var(--ink); }
.panel--flat .legend-keys { margin: 0 0 0.7rem; }
.panel--flat .legend-keys .key { color: var(--ink-3); }
.panel--flat .keylist { margin-top: 1rem; }
.panel--flat .readout span { color: var(--ink-3); }
.panel--flat .readout.sticky {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.panel--flat .readout .pin { color: #9A6B14; }

.panel--flat table.itbl { color: var(--ink-2); }
.panel--flat table.itbl th {
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.panel--flat table.itbl td { border-bottom: 1px solid var(--rule-soft); }
.panel--flat table.itbl tr.zone td {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.panel--flat table.itbl td.name { color: var(--ink); }
.panel--flat table.itbl tfoot td {
  border-top: 1px solid var(--ink);
  color: var(--ink);
}
.panel--flat table.itbl abbr.mk {
  color: var(--ink-3);
  border-bottom-color: var(--ink-3);
}

.panel--flat .capbar { background: var(--paper-2); }
.panel--flat .capbar-gen.in { color: var(--paper); }
.panel--flat .capbar-gen.out { color: var(--ink-2); }
.panel--flat .capbar-cap { color: var(--ink-3); }
.panel--flat .capbar-out b { color: #4A2E08; text-shadow: none; }
.panel--flat td.contrib .cbar { background: var(--paper-2); }

/* stat entries that double as the chart key carry a colour swatch */
.stat-k .sw {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 0.4rem; vertical-align: -1px;
}
/* the basis swatch is the shaded band, so it is drawn at the band's own opacity */
.stat-k .sw.faint { opacity: 0.28; box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset; }
.stat--key .stat-u { color: var(--ink-3); }

/* the strip sits inside the chart block now, so it gets the panel's rhythm */
.panel--flat .statstrip { margin-bottom: 0; }
.panel-title--tight {
  margin: 0 0 0.45rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* bar length is set in pixels by the script; keep the cell from stretching it */
.panel--flat table.itbl td.barcell { width: 1%; white-space: nowrap; padding-right: 1.5rem; }

/* ---------- tooltip ---------- */

.tip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  padding: 0.5rem 0.65rem;
  background: #161E26;
  color: #EDF2F6;
  border: 1px solid #3A4854;
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.tip.show { opacity: 1; visibility: visible; }

/* OUT label sits in the striped band */
.capbar-out b {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.56rem; letter-spacing: 0.09em; font-weight: 700;
  color: #1A1206;
  text-shadow: 0 0 2px rgba(240,200,150,0.85);
}

/* ---------- footer ---------- */

.foot {
  padding: 1.6rem var(--gutter) 3rem;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- home cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }

.card {
  border-top: 1px solid var(--ink);
  padding: 1.3rem 1.5rem 1.6rem 0;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card + .card { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.card:hover h3 { color: var(--signal); }
.card p { font-size: 0.95rem; color: var(--ink-2); margin: 0.3rem 0 0; }
.card .card-state {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

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

@media (max-width: 640px) {
  body { font-size: 16px; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .card + .card { padding-left: 0; border-left: 0; }
  .canvas-yaxis { display: none; }
}