/* WeatherIQ components, v2 — ElaraHive system (../DESIGN.md).
   Phone grid at 390: margins 16 / 374 · first column 16–60 · text column 76 · centre 195 · last column 330–374.
   No glows, gradients, glass, stat rows, numbered steps or icon-on-top cards. Radius 0 everywhere. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--topbar-h); background: var(--page); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  font: var(--w-regular) var(--t-body)/var(--lh-body) var(--ff); color: var(--ink); background: var(--page);
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--cyan); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { display: block; }
p { margin: 0; overflow-wrap: anywhere; }
.s, .src, .mono, td, th { overflow-wrap: anywhere; }

/* Wordmark: ink word, closed IQ pair in the house gold (flat, like "Elara Hive") */
.mark { font-weight: var(--w-heavy); letter-spacing: 0; white-space: nowrap; }
.mark > span { color: var(--gold-ink); }

/* Shell and grid */
.shell { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 var(--margin); }
.app { min-height: 100vh; min-height: 100dvh; background: var(--app); }
.stack > * + * { margin-top: var(--g2); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--g3); }
.cols > * { min-width: 0; }
@media (min-width: 1024px) {
  :root { --margin: 32px; }
  .cols.phi { grid-template-columns: minmax(0, var(--phi-fr)) minmax(0, 1fr); }
  .cols.halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* A column that opens with a label starts it on the row padding, level with the first row's text. */
  .shell > .cols > * > .label:first-child { margin-top: var(--g1); }
}

/* Top bar: title on the margin, actions end on the margin */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--app); border-bottom: 1px solid var(--line); }
.topbar .bar { display: flex; align-items: center; min-height: 56px; padding-top: env(safe-area-inset-top, 0px); }
.topbar .title { flex: 1 1 auto; min-width: 0; font-size: var(--t-title); line-height: var(--lh-title); }
.topbar .title small { display: block; font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-medium); color: var(--ink-2); }
.iconbtn {
  flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; padding: 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.gold { background: var(--gold); color: var(--on-gold); }

/* Rows — the Calls-list grammar */
.list { border-top: 1px solid var(--line); }
#colA > .list:first-child, #colB > .list:first-child { border-top: 0; }
.row {
  display: grid; grid-template-columns: var(--col-first) minmax(0, 1fr) auto; column-gap: var(--col-gap);
  align-items: center; min-height: 60px; padding: var(--g1) 0; border-bottom: 1px solid var(--line);
}
.row.top { align-items: start; }
.sq {
  width: var(--col-first); height: var(--col-first); display: grid; place-items: center;
  background: var(--tile); border: 1px solid var(--line); color: var(--ink);
  font-size: var(--t-small); font-weight: var(--w-heavy);
}
.sq svg { width: 20px; height: 20px; }
.sq.cyan { border-color: var(--cyan); color: var(--cyan); }
.sq.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.sq.red { background: var(--red); border-color: var(--red); color: var(--on-red); }
.sq.green { background: var(--green); border-color: var(--green); color: var(--on-green); }
.txt { min-width: 0; }
.txt b, .txt .t { display: block; font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-bold); }
.txt .s { display: block; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.txt .src { display: block; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.act { display: flex; align-items: center; justify-content: flex-end; }
.act .iconbtn { color: var(--ink-2); }

/* Section labels (FAVOURITES / RECENT style) */
.label {
  margin: var(--g3) 0 var(--g1); font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-heavy);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cyan);
}
.label.first { margin-top: var(--g2); }
.lede { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); max-width: var(--measure); }
.small { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.mono { font-family: var(--ff-mono); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.h1 { margin: 0; font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: var(--w-heavy); }
.h2 { margin: 0; font-size: var(--t-title); line-height: var(--lh-title); font-weight: var(--w-heavy); }
.h-display { margin: 0; font-size: var(--t-display-s); line-height: var(--lh-display-s); font-weight: var(--w-heavy); }
.gold-t { color: var(--gold-ink); }
.red-t { color: var(--red-ink); }
.green-t { color: var(--green-ink); }
.mt1 { margin-top: var(--g1); } .mt2 { margin-top: var(--g2); } .mt3 { margin-top: var(--g3); }

/* Tags (BUILT TODAY / PROPOSED style) */
.tag {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--cyan);
  font-family: var(--ff-mono); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan);
  white-space: nowrap;
}
.tag.green { border-color: var(--green-ink); color: var(--green-ink); }
.tag.gold { border-color: var(--gold-ink); color: var(--gold-ink); }

/* Note card (the Elara note pattern) */
/* Bordered boxes: 1 px border + (grid - 1 px) padding, so inner content sits on the 8 px grid (e.g. 32 and 358 at 390). */
.note { padding: calc(var(--g2) - 1px); background: var(--tile); border: 1px solid var(--line); }
.note .head { display: flex; align-items: center; justify-content: space-between; gap: var(--g1); margin-bottom: var(--g1); }
.note .who { font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-heavy); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cyan); }
.note p { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink); max-width: var(--measure); }
.note p + p { margin-top: var(--g1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g1); min-height: var(--tap); padding: 0 var(--g2);
  border: 1px solid var(--line-strong); background: var(--tile); color: var(--ink); font-size: var(--t-body); font-weight: var(--w-medium);
  cursor: pointer; text-decoration: none; text-align: center; border-radius: 0;
}
.btn svg { width: 18px; height: 18px; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: var(--w-bold); }
.btn.red { background: var(--red); border-color: var(--red); color: var(--on-red); font-weight: var(--w-bold); }
.btn.green { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: var(--w-bold); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); row-gap: var(--g1); }
.pair .btn { min-height: var(--btn-pair); width: 100%; }

/* Equal segments and tile grids */
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border: 1px solid var(--line-strong); }
.seg button { min-height: var(--tap); padding: 0 var(--g1); border: 0; border-right: 1px solid var(--line-strong); background: var(--tile); color: var(--ink-2); font-size: var(--t-small); font-weight: var(--w-bold); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.tiles { display: grid; gap: var(--g1); }
.tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.t5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { min-width: 0; padding: calc(var(--g1) - 1px); background: var(--tile); border: 1px solid var(--line); text-align: center; }
.tile svg { width: 20px; height: 20px; margin: var(--g-half) auto; color: var(--ink-2); }
.tile .d { font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-heavy); }
.tile .v { font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-heavy); }
.tile .k { font-size: var(--t-small); line-height: var(--lh-label); color: var(--ink-2); }
.tile[data-flag="wind"] { border-color: var(--gold); }
.tile[data-flag="wind"] .k.g { color: var(--gold-ink); font-weight: var(--w-bold); }
.tile[data-flag="storm"] { border-color: var(--red); }
.tile[data-flag="storm"] .k.g { color: var(--red-ink); font-weight: var(--w-bold); }

/* Severe-weather clock: four equal ticks, symmetric about the centre */
.ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g1); margin-top: var(--g2); }
.tick { min-width: 0; padding: calc(var(--g1) - 1px) calc(var(--g1) - 1px) calc(var(--g1) - 4px); background: var(--tile); border: 1px solid var(--line); border-bottom-width: 4px; }
.tick b { display: block; font-family: var(--ff-mono); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-medium); }
.tick span { display: block; margin-top: var(--g-half); font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-bold); }
.tick[data-level="clear"] { border-bottom-color: var(--green); }
.tick[data-level="60"], .tick[data-level="30"] { border-bottom-color: var(--gold); }
.tick[data-level="5"], .tick[data-level="now"] { border-bottom-color: var(--red); }
.tick[data-active="true"][data-level="60"], .tick[data-active="true"][data-level="30"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.tick[data-active="true"][data-level="5"], .tick[data-active="true"][data-level="now"] { background: var(--red); border-color: var(--red); color: var(--on-red); }
.tick[data-active="true"] b { color: inherit; }

/* Risk chips 1-5: green -> gold -> red; outline then solid. Number always shown. */
.risk { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); color: var(--ink-2); font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-heavy); white-space: nowrap; }
.r1 { border-color: var(--green-ink); color: var(--green-ink); }
.r2 { border-color: var(--green); background: var(--green); color: var(--on-green); }
.r3 { border-color: var(--gold-ink); color: var(--gold-ink); }
.r4 { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.r5 { border-color: var(--red); background: var(--red); color: var(--on-red); }
.heat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; margin-top: var(--g1); }
.heat i { display: block; height: 16px; background: var(--tile-raised); }
.heat i[data-l="1"] { background: var(--green-dim); } .heat i[data-l="2"] { background: var(--green); }
.heat i[data-l="3"] { background: var(--gold-dim); } .heat i[data-l="4"] { background: var(--gold); } .heat i[data-l="5"] { background: var(--red); }
.heatlab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; font-family: var(--ff-mono); font-size: 10px; line-height: 16px; color: var(--ink-2); text-align: center; }

/* Butterfly comparison: origin grows left, destination grows right, mirrored on the centre */
.fly { border-top: 1px solid var(--line); }
.fly .head, .fly .pairrow { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-gap) minmax(0, 1fr); align-items: center; }
.fly .head { padding: var(--g1) 0; font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-heavy); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.fly .head > .l { text-align: right; }
.fly .item { padding: var(--g1) 0; border-bottom: 1px solid var(--line); }
.fly .name { display: flex; align-items: center; justify-content: center; gap: var(--g1); font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-bold); }
.fly .name svg { width: 16px; height: 16px; color: var(--ink-2); }
.fly .half { display: flex; align-items: center; gap: var(--g1); min-width: 0; }
.fly .half.l { flex-direction: row-reverse; }
.fly .meter { flex: 1 1 auto; height: 8px; background: var(--tile-raised); display: flex; }
.fly .half.l .meter { justify-content: flex-end; }
.fly .meter i { display: block; height: 100%; background: var(--cyan); }
.fly .num { flex: none; min-width: 5ch; font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-heavy); }
.fly .half.l .num { text-align: right; }
.fly .half.r .num { text-align: left; }

/* Switch (44 x 44 hit area, 44 x 24 track) */
.switch { position: relative; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: transparent; cursor: pointer; }
.switch::before { content: ""; position: absolute; left: 0; top: 10px; width: 44px; height: 24px; background: var(--tile-raised); border: 1px solid var(--line-strong); }
.switch::after { content: ""; position: absolute; left: 4px; top: 14px; width: 16px; height: 16px; background: var(--ink-2); transition: transform .16s; }
.switch[aria-checked="true"]::before { background: var(--gold); border-color: var(--gold); }
.switch[aria-checked="true"]::after { background: var(--on-gold); transform: translateX(20px); }

/* Ledger (summary without a stat row) */
.ledger { border-top: 1px solid var(--line); }
.ledger div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--g2); align-items: baseline; padding: var(--g-1half) 0; border-bottom: 1px solid var(--line); }
.ledger dt, .ledger .k { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.ledger dd, .ledger .v { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); font-weight: var(--w-heavy); text-align: right; }
.ledger .v small { display: block; font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-regular); color: var(--ink-2); }

/* Tables */
/* position: relative makes the scroller the containing block, so absolutely positioned .sr labels are clipped with it. */
.scrollx { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: var(--lh-small); }
.table th, .table td { padding: var(--g-1half) var(--g1); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { font-weight: var(--w-heavy); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; border-top: 1px solid var(--line); }
.table .num { text-align: right; white-space: nowrap; }
.table th svg { width: 16px; height: 16px; color: var(--ink-2); margin: 0 auto; }
.table td .risk { min-width: 44px; justify-content: center; }
@media (max-width: 719px) {
  .table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.cards, .table.cards tbody { display: block; }
  .table.cards tr { display: block; padding: var(--g1) 0; border-bottom: 1px solid var(--line); }
  .table.cards td { display: flex; justify-content: space-between; gap: var(--g2); padding: var(--g-half) 0; border: 0; text-align: right; }
  .table.cards td::before { content: attr(data-label); color: var(--ink-2); text-align: left; }
}

/* Stepper: the non-drag alternative for every slider (WCAG 2.5.7) */
.control { padding: var(--g-1half) 0; border-bottom: 1px solid var(--line); }
.control .lab { display: flex; justify-content: space-between; gap: var(--g1); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.control .lab b { color: var(--ink); font-weight: var(--w-bold); }
.control input[type="range"] { width: 100%; height: var(--tap); margin: 0; accent-color: var(--gold); }
.stepper { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); }
.stepper button { width: var(--tap); height: var(--tap); border: 1px solid var(--line-strong); background: var(--tile); color: var(--ink); font-size: var(--t-title); cursor: pointer; }
.stepper input { min-width: 0; height: var(--tap); border: 1px solid var(--line-strong); border-left: 0; border-right: 0; background: var(--app); color: var(--ink); text-align: center; font-weight: var(--w-bold); }
.field { display: block; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); font-weight: var(--w-bold); }
.input, select.input { display: block; width: 100%; min-height: var(--tap); margin-top: var(--g-half); padding: 0 var(--g-1half); border: 1px solid var(--line-strong); background: var(--app); color: var(--ink); font-size: var(--t-body); border-radius: 0; }
.formgrid { display: grid; gap: var(--g2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .formgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Price */
.price { font-size: var(--t-display); line-height: var(--lh-display); font-weight: var(--w-heavy); color: var(--gold-ink); }
.price small { display: block; font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-medium); color: var(--ink-2); }

/* Charts */
.chart { width: 100%; height: auto; }
.chart text { font-family: var(--ff-mono); font-size: 11px; fill: var(--ink-2); }
.chart .axis { stroke: var(--line); }
.chart .bar-idx { fill: var(--tile-raised); stroke: var(--line); }
.chart .bar-paid { fill: var(--gold); }
.chart .line-a { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .line-e { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 2 4; }

/* Map */
.map svg { width: 100%; height: auto; background: var(--app); border: 1px solid var(--line); }
.map .land { fill: var(--tile); stroke: var(--line); stroke-width: .8; }
.map .land.focus { fill: var(--tile-raised); }
.map .pin { cursor: pointer; }
.map .hit { fill: transparent; }
.map .core { stroke: var(--app); stroke-width: 2; }
.map .f0 { fill: var(--line-strong); } .map .f1 { fill: var(--green-ink); } .map .f2 { fill: var(--green); }
.map .f3 { fill: var(--gold-dim); } .map .f4 { fill: var(--gold); } .map .f5 { fill: var(--red); }
.map text { font-family: var(--ff); font-size: 11px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--app); stroke-width: 3px; }
.map .pin:focus-visible .core { stroke: var(--cyan); stroke-width: 3; }

/* Phone tab bar (Chat / Calls / Rooms / Library grammar); becomes a top segment at 760+ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--app); border-top: 1px solid var(--line);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--g-half); min-height: var(--tabbar-h);
  border: 0; background: transparent; color: var(--ink-2); font-size: var(--t-small); line-height: var(--lh-label); font-weight: var(--w-medium); cursor: pointer;
}
.tabbar button svg { width: 20px; height: 20px; }
.tabbar button[aria-selected="true"] { color: var(--gold-ink); font-weight: var(--w-bold); }
.pad-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--g3) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 760px) {
  .tabbar { position: static; border: 1px solid var(--line-strong); padding: 0; margin-top: var(--g1); }
  .tabbar button { flex-direction: row; min-height: var(--tap); gap: var(--g1); border-right: 1px solid var(--line-strong); }
  .tabbar button:last-child { border-right: 0; }
  .tabbar button[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
  .pad-tabbar { padding-bottom: var(--g6); }
}

/* Sources */
.sources { margin-top: var(--g4); padding-top: var(--g2); border-top: 1px solid var(--line); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.sources:empty { display: none; }
.sources ul { margin: var(--g1) 0 0; padding-left: 0; list-style: none; }
.sources li + li { margin-top: var(--g-half); }
.sources a { color: var(--ink-2); }

/* Take cover: the incoming-call grammar — centred square, mirrored action pair */
.takeover { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--app); }
/* 576 keeps the pair on the 8 px grid: two 280 px buttons either side of the 16 px gap. */
.takeover .shell { max-width: calc(576px + 2 * var(--margin)); }
.takeover .hero { padding: calc(env(safe-area-inset-top, 0px) + var(--g4)) 0 var(--g3); text-align: center; }
.takeover .hero .sq { width: 96px; height: 96px; margin: var(--g2) auto; background: var(--red); border-color: var(--red); color: var(--on-red); }
.takeover .hero .sq svg { width: 44px; height: 44px; }
.takeover .hero .lede { margin-left: auto; margin-right: auto; }
.takeover .foot { margin-top: auto; padding: var(--g2) 0 calc(env(safe-area-inset-bottom, 0px) + var(--g2)); }

/* Admin console */
.console { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--page); }
.console > main { background: var(--app); min-height: 100vh; min-height: 100dvh; }
.console > * { min-width: 0; }
.side { position: sticky; top: 0; z-index: 30; background: var(--page); border-bottom: 1px solid var(--line); }
.side .bar { display: flex; align-items: center; min-height: 56px; padding: 0 var(--margin); }
.side .title { flex: 1 1 auto; min-width: 0; font-size: var(--t-title); line-height: var(--lh-title); }
.side .title small { display: block; font-size: var(--t-small); line-height: var(--lh-label); color: var(--ink-2); font-weight: var(--w-medium); }
.side nav { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 0 var(--margin); scrollbar-width: none; }
.side nav::-webkit-scrollbar { display: none; }
.side nav a { display: flex; align-items: center; gap: var(--g1); min-height: var(--tap); padding: 0 var(--g-1half); color: var(--ink-2); text-decoration: none; font-size: var(--t-small); font-weight: var(--w-bold); border-bottom: 2px solid transparent; }
.side nav a[aria-current="page"] { color: var(--gold-ink); border-bottom-color: var(--gold); }
.side nav svg { width: 18px; height: 18px; }
.side .foot { display: none; }
@media (min-width: 1024px) {
  .console { grid-template-columns: 256px minmax(0, 1fr); }
  .side { height: 100vh; height: 100dvh; display: flex; flex-direction: column; border-bottom: 0; }
  .console > main { border-left: 1px solid var(--line); }
  .side .bar { min-height: 72px; }
  .side nav { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding: 0 var(--g2); }
  .side nav a { border-bottom: 0; border-left: 2px solid transparent; padding-left: var(--g2); }
  .side nav a[aria-current="page"] { border-left-color: var(--gold); background: var(--tile); }
  .side .foot { display: block; margin-top: auto; padding: var(--g3) var(--g4); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
}
.head12 { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--g2); flex-wrap: wrap; padding: var(--g3) 0 var(--g2); }
.head12 > div { min-width: 0; }
.head12 .field { flex: 0 1 360px; min-width: 0; max-width: 100%; }
select.input { max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g3); }
.grid12 > * { grid-column: span 12; min-width: 0; }
@media (min-width: 1024px) {
  .grid12 > .s8 { grid-column: span 8; } .grid12 > .s6 { grid-column: span 6; }
  .grid12 > .s4 { grid-column: span 4; } .grid12 > .s3 { grid-column: span 3; }
}
.panel { padding: calc(var(--g2) - 1px); background: var(--tile); border: 1px solid var(--line); min-width: 0; }
.panel > .label:first-child { margin-top: 0; }
.perils { display: grid; gap: var(--g2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .perils { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .perils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.peril { display: flex; flex-direction: column; padding: calc(var(--g2) - 1px); background: var(--tile); border: 1px solid var(--line); min-width: 0; }
.peril .months { margin-top: auto; padding-top: var(--g1); }
.peril .months .heat { margin-top: 0; }
/* Two title lines are reserved, so every card in a row starts its value on the same line. */
.peril .top { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: var(--g1); align-items: center; min-height: calc(2 * var(--lh-small)); }
.peril .top svg { width: 20px; height: 20px; color: var(--ink-2); }
.peril .top b { font-size: var(--t-small); line-height: var(--lh-small); }
.peril .val { margin-top: var(--g1); font-size: var(--t-title); line-height: var(--lh-title); font-weight: var(--w-heavy); }
.peril .val small { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink-2); }
.peril p { margin-top: var(--g-half); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.view { display: none; }
.view[data-on="true"] { display: block; }
.drawer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .tick, .tile, .sq, .panel, .peril, .note, .risk { border: 1px solid CanvasText; }
  .heat i, .fly .meter i, .switch::before, .switch::after { forced-color-adjust: none; }
}
@media print {
  .topbar, .side, .tabbar, .noprint { display: none !important; }
  .view { display: block !important; }
}

/* In-text links that are the only way to a view keep a 24 px target (WCAG 2.5.8). */
a.tap24 { display: inline-block; min-height: 24px; line-height: 24px; }