/* JumpBrief, Sky design. Phone first. Light and dark are each designed, not one inverted. */

@font-face {
  font-family: Overpass;
  src: url("../fonts/overpass-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #EDF2F5; --plate: #FFFFFF; --ink: #0B1A26; --ink2: #394957; --rule: #BFCCD6;
  --rip: #D0136F; --line: #9E0050; --sock: #F2600C; --plane: #FFFFFF;
  --go: #167447; --caution: #D69A00; --caution-edge: #8A6200; --stop: #C0262D; --stop-fill: #C0262D;
  --glyph-on: #FFFFFF; --caution-glyph: #0B1A26;
  --cloud: #FBFCFD; --cloud-edge: #475868; --storm: #8E9BA7; --storm-edge: #475868; --turf: #C9D2B3; --turf-edge: #8E9A78;
  --rain: #4F6A80; --fog: #F4F7F9; --track: rgba(11, 26, 38, .14);
  --primary: #9E0050; --on-primary: #FFFFFF;
  --edge: #738390; --pressed: rgba(11, 26, 38, .12); --sel: #C9DFEF; --halo: #F2F6F9; --tint: #DCE5EB;
  --col-bg: rgba(255, 255, 255, .84); --col-edge: rgba(11, 26, 38, .16);
  /* The map's overlays sit on imagery, not on the page, so the dark themes leave these alone. */
  --map-magenta: #E0187A; --map-white: #FFFFFF; --map-ink: #0B1A26; --map-tee: #F2600C; --map-bg: #3A4A3A;
  --press: 110ms;
  --icon-stroke: 2px; --icon-s: 14px; --icon-m: 18px; --icon-l: 26px;

  /* The type scale. Nothing goes under --fs-min. */
  --fs-answer: 27px;
  --fs-title: 23px;
  --fs-dz: 21px;
  --fs-big: 20px;
  --fs-sheet: 18px;
  --fs-step: 17px;
  --fs-section: 16px;
  --fs-body: 15px;
  --fs-dense: 14.5px;
  --fs-sentence: 14px;
  --fs-pill: 13.5px;
  --fs-fine: 13px;
  --fs-caption: 12.5px;
  --fs-small: 12px;
  --fs-rail: 11.5px;
  --fs-min: 11px;

  --gutter: 16px;
  --tabs-h: 56px;
  color-scheme: light;
}

/* Dark is for the screen only: print keeps the light tokens whatever the theme. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #17161D; --plate: #24222C; --ink: #EFEBF3; --ink2: #BDB6C8; --rule: #4A4658;
    --rip: #F0629F; --line: #F27BAF; --sock: #FF8040; --plane: #D9D3E2;
    --go: #3DBE7C; --caution: #E7AC33; --caution-edge: #E7AC33; --stop: #F0645C; --stop-fill: #EF5A52;
    --glyph-on: #17161D; --caution-glyph: #17161D;
    --cloud: #3E4459; --cloud-edge: #8A84A0; --storm: #2C3142; --storm-edge: #8A84A0; --turf: #222820; --turf-edge: #3E4A39;
    --rain: #9AA6C4; --fog: #2E3240; --track: rgba(239, 235, 243, .16);
    --primary: #A50F55; --on-primary: #FFFFFF; --primary-edge: #F0629F;
    --edge: #7D7690; --pressed: rgba(239, 235, 243, .16); --sel: #3D3752; --halo: #1B1E2E; --tint: #2B2934;
    --col-bg: rgba(23, 22, 29, .86); --col-edge: rgba(239, 235, 243, .16);
    color-scheme: dark;
  }
}

@media screen {
  :root[data-theme="dark"] {
    --page: #17161D; --plate: #24222C; --ink: #EFEBF3; --ink2: #BDB6C8; --rule: #4A4658;
    --rip: #F0629F; --line: #F27BAF; --sock: #FF8040; --plane: #D9D3E2;
    --go: #3DBE7C; --caution: #E7AC33; --caution-edge: #E7AC33; --stop: #F0645C; --stop-fill: #EF5A52;
    --glyph-on: #17161D; --caution-glyph: #17161D;
    --cloud: #3E4459; --cloud-edge: #8A84A0; --storm: #2C3142; --storm-edge: #8A84A0; --turf: #222820; --turf-edge: #3E4A39;
    --rain: #9AA6C4; --fog: #2E3240; --track: rgba(239, 235, 243, .16);
    --primary: #A50F55; --on-primary: #FFFFFF; --primary-edge: #F0629F;
    --edge: #7D7690; --pressed: rgba(239, 235, 243, .16); --sel: #3D3752; --halo: #1B1E2E; --tint: #2B2934;
    --col-bg: rgba(23, 22, 29, .86); --col-edge: rgba(239, 235, 243, .16);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: Overpass, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 700; }
small { font-size: var(--fs-fine); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* iOS Safari zooms the page into a field set under 16 px when it takes focus. */
input, select, textarea { font-size: max(16px, 1em); }
button { cursor: pointer; transition: background-color var(--press) ease, box-shadow var(--press) ease; }
button:active:not(:disabled) { background-image: linear-gradient(var(--pressed), var(--pressed)); }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#sheetTitle:focus { outline: none; }
.icon { width: var(--icon-m); height: var(--icon-m); flex: none; vertical-align: -3px; }
.fine, .fineprint { font-size: var(--fs-fine); line-height: 1.45; color: var(--ink2); }
.muted { color: var(--ink2); }
.error { color: var(--stop); }

/* ---------- shell ---------- */

.top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 0 12px;
}
.dz-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 44px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: var(--fs-dz);
  font-weight: 700;
  letter-spacing: -.01em;
}
.dz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-btn .caret { flex: none; width: var(--icon-s); height: var(--icon-s); stroke: var(--ink); fill: none; stroke-width: var(--icon-stroke); }
.fresh { flex: none; display: flex; align-items: center; font-size: var(--fs-sentence); color: var(--ink2); white-space: nowrap; }
.beta { margin-right: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 5px; font-size: var(--fs-min); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.refresh { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; }
.refresh svg { width: var(--icon-m); height: var(--icon-m); stroke: var(--ink); fill: none; stroke-width: var(--icon-stroke); }
.refresh.spin svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Never hidden, so a screen reader hears its text change; with nothing shown it takes no space. */
.status-line { flex: none; margin: 0 var(--gutter); font-size: var(--fs-sentence); line-height: 1.4; }
.status-line p { margin-top: 2px; }
.status-line small { color: var(--ink2); }

#screens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.screen { padding-bottom: 20px; }

.tabs {
  flex: none;
  /* Straight after the header in the page, so on desktop Tab reaches them after its buttons; phones draw them last. */
  order: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--rule);
  background: var(--page);
}
.tabs button { position: relative; border: 0; background: none; font-size: var(--fs-body); color: var(--ink2); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 2px 2px; background: var(--ink); }

@media (max-height: 700px) {
  .top { padding-top: calc(2px + env(safe-area-inset-top)); }
}

/* ---------- components ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--plate);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary-edge, var(--primary)); }
.btn.quiet { border-color: transparent; background: none; }
.btn:disabled { opacity: .5; }

/* The chip and the dotted link are drawn small; ::after gives each its own 44 px target. z-index
   keeps that target above the sibling it reaches over. */
.chip {
  position: relative;
  z-index: 1;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--plate);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
}
.chip::after { content: ""; position: absolute; inset: -12px -4px; }

.more {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-pill);
  color: var(--ink2);
  text-align: left;
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.more::after { content: ""; position: absolute; inset: -9px -6px; }
.more[aria-expanded="true"] { color: var(--ink); text-decoration-style: solid; }

.seg { display: inline-flex; flex: none; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
.seg button { min-width: 48px; min-height: 44px; padding: 0 11px; border: 0; background: none; font-size: var(--fs-dense); }
.seg button + button { border-left: 1px solid var(--edge); }
.seg button[aria-pressed="true"] { background-color: var(--sel); font-weight: 800; }

.stepper { display: inline-flex; flex: none; align-items: center; border: 1px solid var(--edge); border-radius: 10px; background: var(--plate); }
.stepper button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; font-size: var(--fs-big); font-weight: 600; }
.stepper output { min-width: 78px; text-align: center; font-size: var(--fs-section); font-weight: 800; }
.stepper output small { margin-left: 3px; font-size: var(--fs-fine); font-weight: 600; color: var(--ink2); }

.acc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 6px var(--gutter);
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--fs-section);
  font-weight: 800;
}
.acc-head small { grid-column: 1; display: block; margin-top: 2px; font-size: var(--fs-fine); font-weight: 500; color: var(--ink2); }
.acc-head svg { grid-column: 2; grid-row: 1 / span 2; width: 11px; height: 11px; stroke: var(--ink); fill: none; stroke-width: 2; transition: transform .2s ease; }
.acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-head[aria-expanded="true"] small { display: none; }
.acc-body { padding-bottom: 6px; }

/* ---------- sheet and toast ---------- */

.sheet-back { position: fixed; inset: 0; z-index: 20; background: rgba(11, 26, 38, .4); }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  max-height: 88vh;
  max-height: 88dvh;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  background: var(--page);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 2px var(--gutter); }
.sheet-head h2 { font-size: var(--fs-sheet); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) 24px; }

.toast {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 608px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--page);
  font-size: var(--fs-sentence);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.toast.show { opacity: 1; }

/* ---------- status glyphs ---------- */

.glyph { display: inline-block; flex: none; vertical-align: -3px; }
.glyph .go { fill: var(--go); }
.glyph .ring { fill: none; stroke: var(--glyph-on); stroke-width: var(--icon-stroke); }
.glyph .ca { fill: var(--caution); stroke: var(--caution-edge); stroke-width: 1; }
.glyph .ca-mark { fill: var(--caution-glyph); }
.glyph .na { fill: var(--page); stroke: var(--stop); stroke-width: var(--icon-stroke); }
.glyph .na-bar { fill: var(--stop); }
.glyph .ng { fill: var(--stop-fill); }
.glyph .ng-x { stroke: var(--glyph-on); stroke-width: var(--icon-stroke); stroke-linecap: round; }
.glyph .un { fill: none; stroke: var(--ink2); stroke-width: 1.5; stroke-dasharray: 3 2; }
.glyph .nt { fill: none; stroke: var(--ink2); stroke-width: 1.5; }
.glyph .nt-moon { fill: var(--ink2); }

/* ---------- hour board ---------- */

.board {
  position: relative;
  margin: 2px 12px 0;
  border-radius: 8px;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.board .events { position: relative; height: 22px; }
.board .label { position: absolute; top: 0; font-size: var(--fs-small); font-weight: 700; line-height: 16px; white-space: nowrap; transform: translateX(-50%); }
.board .bracket { position: absolute; bottom: 2px; height: 6px; border: 2px solid var(--ink); border-bottom: 0; }
.board .bracket.cut-l { border-left: 0; }
.board .bracket.cut-r { border-right: 0; }
.board .pointer { position: absolute; bottom: 1px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--ink); transform: translateX(-50%); }
.board .now-tick { position: absolute; bottom: 0; width: 1.5px; height: 9px; background: var(--ink); }
.board .bracket.past { border-color: var(--edge); }
.board .pointer.past { border-top-color: var(--edge); }
.board .label.past { color: var(--ink2); }
/* minmax(0, 1fr): the cells share the width whatever their count, and never push it wider. */
.board .cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.board .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 0 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  container-type: inline-size;
}
.board .hour { height: 18px; font-size: var(--fs-caption); font-weight: 500; line-height: 18px; }
.board .glyph { width: var(--icon-l); max-width: 100%; height: auto; }
.board .gust { height: 18px; margin-top: 3px; font-size: var(--fs-fine); font-weight: 700; line-height: 18px; }
.board .cell.past .hour, .board .cell.past .gust { color: var(--ink2); font-weight: 400; }
/* Grey keeps each shape's contrast with the page while it reads as gone. */
.board .cell.past .glyph { filter: grayscale(1); }
.board .cell.sel { background: var(--plate); border-color: var(--ink); }
.board .cell.sel .hour { font-weight: 800; }
.board.compact .gust { display: none; }
/* Long days narrow the cells (the queries read a cell's content box). At 19 px or less the numbers
   take the smallest size, which fits two digits in every cell up to about 20 cells on a phone. At
   14 px or less (a polar day's 24) only every other hour keeps its numbers, and the selected one,
   whose neighbours give way to it. */
@container (max-width: 19px) {
  .board .hour, .board .gust { font-size: var(--fs-min); }
}
@container (max-width: 14px) {
  .board .cell:nth-child(even) :is(.hour, .gust),
  .board .cell.sel + .cell :is(.hour, .gust),
  .board .cell:has(+ .cell.sel) :is(.hour, .gust) { visibility: hidden; }
  .board .cell.sel :is(.hour, .gust) { visibility: visible; }
}

/* ---------- today ---------- */

.since { margin: 8px var(--gutter) 0; }
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 12px;
  border: 0;
  border-radius: 14px;
  background: var(--tint);
  font-size: var(--fs-pill);
  font-weight: 600;
}
/* 44 px tall around the pill: .since's top margin and .answer's top padding keep those 8 px rows
   free of the DZ button above and the day line below. */
.pill::after { content: ""; position: absolute; inset: -8px -4px; }
.pill .caret { width: 10px; height: 10px; stroke: var(--ink); fill: none; stroke-width: 2; transition: transform .2s ease; }
.pill[aria-expanded="true"] .caret { transform: rotate(180deg); }
.pill[aria-disabled="true"] { cursor: default; }
.pill[aria-disabled="true"] .caret { display: none; }
.since-text { max-width: 34em; margin: 8px 0 2px; font-size: var(--fs-sentence); line-height: 1.45; color: var(--ink2); }

.answer { padding: 16px var(--gutter) 0; }
.ans-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.day-btn, .other {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sentence);
}
/* Drawn 24 px tall to keep the row tight. The day line's target takes the 8 px under the pill's and
   the 12 px row gap, which an other-day button wrapped below it leaves free; the other-day target
   reaches 20 px down over the answer, which takes no taps. */
.day-btn::after, .other::after { content: ""; position: absolute; inset: 0 -8px -20px; }
.day-btn::after { inset: -8px -8px -12px; }
.day-btn { color: var(--ink2); }
.day-btn .caret { flex: none; width: 10px; height: 10px; stroke: var(--ink2); fill: none; stroke-width: 2; }
.other > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other b { font-weight: 700; }
.other .glyph { width: var(--icon-s); height: var(--icon-s); }
.chev { flex: none; width: 8px; height: 12px; margin-left: 2px; stroke: var(--ink); fill: none; stroke-width: 2; }
.ans { margin-top: 2px; font-size: var(--fs-answer); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.next { margin-top: 6px; font-size: var(--fs-body); line-height: 1.38; }
.next b { font-weight: 800; }
.why { margin-top: 3px; font-size: var(--fs-body); line-height: 1.38; }

.verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 6px 0 0;
  padding: 8px var(--gutter);
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: var(--fs-body);
  line-height: 1.35;
  text-align: left;
}
.verdict .glyph { width: var(--icon-m); height: var(--icon-m); margin-top: 1px; }
.verdict .v-glyph { display: contents; }
.verdict .v-text { flex: 1; min-width: 0; }
.verdict b { font-weight: 800; }
.verdict .chev { margin-top: 4px; }

/* ---------- the sky ---------- */

.sky { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.sky .pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sky stop { transition: stop-color .45s ease; }
.sky .fz { transition: transform .45s ease; }
.sky .fz line { stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 6 4; opacity: .8; }
.sky .fz text { font-size: var(--fs-small); font-weight: 700; fill: var(--ink); }
.sky .fz .fz-h { font-size: var(--fs-min); font-weight: 600; }
/* The expanded column's flags would cover it; the line stays. */
.sky.xpd .fz.under-flag text { visibility: hidden; }
.sky .jl { font-size: var(--fs-min); font-weight: 800; fill: var(--ink); }
.sky .pl-body, .sky .pl-tail { fill: var(--plane); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.sky .pl-wing { fill: var(--plane); stroke: var(--ink); stroke-width: 1.1; }
.sky .pl-strut, .sky .pl-prop { stroke: var(--ink); stroke-width: 1.1; }
.sky .pl-door { fill: var(--rip); stroke: var(--ink); stroke-width: .8; }
.sky .path-ff, .sky .path-cp { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; }
.sky .path-cp { opacity: .75; }
.sky .cp-rip { fill: var(--rip); }
.sky .cp-white { fill: #FFFFFF; }
.sky .cp-sock { fill: var(--sock); }
.sky .cp-edge { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.sky .cp-line { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .8; }
.sky .cp-riser { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.sky .cp-body { fill: var(--ink); }
.sky .cp-limb { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.sky .t-target { fill: var(--sock); stroke: var(--ink); stroke-width: 1; }
.sky .turf { fill: var(--turf); }
.sky .turf-edge { stroke: var(--turf-edge); stroke-width: 1.5; }
.sky .mast { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.sky .pivot { fill: var(--ink); }
.sky .sock { transition: transform .45s ease; }
.sky .sock .b0 { fill: var(--sock); }
.sky .sock .b1 { fill: #FFFFFF; }
.sky .sock .edge { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.sky .sock.gust .edge { stroke-dasharray: 3 2.5; opacity: .9; }
.sky .compass { font-size: var(--fs-min); font-weight: 700; fill: var(--ink); }
.sky .tape-track { fill: var(--track); }
.sky .tape-mean { fill: var(--sock); stroke: var(--ink); stroke-width: 1; }
.sky .tape-gust { fill: var(--sock); fill-opacity: .3; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.sky .tape-lim { stroke: var(--ink); stroke-width: 2.4; }
.sky .tape-lim-t { font-size: var(--fs-small); font-weight: 800; fill: var(--ink); }
.sky .clouds .c-edge { fill: var(--cloud-edge); }
.sky .clouds .c-solid { fill: var(--cloud); }
.sky .clouds .s-edge { fill: var(--storm-edge); }
.sky .clouds .s-fill { fill: var(--storm); }
.sky .clouds .c-maybe { fill: url(#maybeDots); }
.sky .clouds .dot { fill: var(--cloud-edge); }
.sky .clouds .est { fill: none; stroke: var(--cloud-edge); stroke-width: 2; stroke-dasharray: 6 4; }
.sky .clouds .tops { fill: none; stroke: var(--cloud-edge); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sky .clouds .fog { fill: var(--fog); opacity: .9; }
.sky .clouds .rain line { stroke: var(--rain); stroke-width: 1.2; opacity: .6; stroke-linecap: round; }
.sky .clouds .bolt { fill: var(--caution); stroke: var(--ink); stroke-width: .8; }
/* Sentences in the sky; the halo keeps them legible over cloud and rain. */
.sky .leader { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .7; }
.heads { position: absolute; inset: 0; pointer-events: none; }
.hl { position: absolute; width: max-content; font-size: var(--fs-sentence); line-height: 1.3; font-weight: 600; color: var(--ink); text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo), 0 0 6px var(--halo); pointer-events: auto; cursor: pointer; }
.hl .glyph { width: var(--icon-s); height: var(--icon-s); margin-right: 5px; vertical-align: -2px; }
.hl b { font-size: var(--fs-sheet); font-weight: 800; letter-spacing: -.01em; }
.hl.info { font-weight: 500; }
/* Invisible buttons over the drawing; their size and stacking come from the picture. */
.hits { position: absolute; inset: 0; z-index: 0; }
.hit { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; }
.hit:focus-visible { outline-offset: -3px; }
/* The wind column: drawn in the picture, with a transparent button over it that takes the tap. */
.sky .col text { font-size: var(--fs-min); font-weight: 600; fill: var(--ink); }
.sky .col .c-alt, .sky .col .x-alt, .sky .col .x-spd { font-weight: 500; }
.sky .col .tag, .sky .col .c-spd, .sky .col .x-spd .n { font-weight: 800; }
.sky .col .x-alt { fill: var(--ink2); }
.sky .col .x-alt.tag { fill: var(--line); }
/* Above the model's highest level the values are held, not forecast. */
.sky .col .wc-row.above text { font-style: italic; }
.sky .col .arr { transition: transform .45s ease; }
.sky .col .arr path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sky .col .notch { fill: var(--rip); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.sky .col .notch[data-kind="fz"] { fill: var(--plate); }
.sky .col .x-bg { fill: var(--col-bg); stroke: var(--col-edge); stroke-width: 1; }
.sky .col .x-flag path { fill: var(--line); }
.sky .col .x-flag text { font-weight: 700; fill: var(--glyph-on); }
/* --edge cannot reach 3:1 against the sky's lighter blues, so the chip's border takes --ink2. */
.sky .wc-chip rect { fill: var(--plate); stroke: var(--ink2); stroke-width: 1; }
.sky .wc-chip text { font-weight: 700; }
.sky .col-c, .sky .col-x, #leaders, .hl { transition: opacity .18s ease, visibility .18s; }
/* The first draw after a rebuild puts each part in place instead of gliding it from where it was made. */
.sky .pic.placing, .sky .pic.placing * { transition: none; }
.sky .col-x, .sky.xpd .col-c, .sky.xpd #leaders, .sky.xpd .hl:not(.ground-line), .sky.xpd.foot-low .hl.ground-line { opacity: 0; visibility: hidden; }
.sky.xpd .col-x { opacity: 1; visibility: visible; }
.wcol { position: absolute; z-index: 5; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; }
.wcol:focus-visible { outline-offset: 1px; }
.allwinds { position: absolute; z-index: 6; height: 44px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--ink); font-size: var(--fs-min); font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.allwinds[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.b-cap { display: flex; align-items: center; gap: 10px; min-height: 22px; margin: 10px 14px 0; font-size: var(--fs-caption); color: var(--ink2); }
.b-cap .cap-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a narrow phone the hint takes a second line rather than lose its last words. */
.hint { position: relative; z-index: 1; flex: 0 1 auto; min-width: 0; min-height: 22px; margin-right: auto; padding: 3px 9px 2px; border: 0; border-radius: 11px; background: var(--ink); color: var(--page); font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; text-align: left; text-wrap: pretty; }
/* 6 px up stays inside the caption row's smallest top margin, so the verdict keeps its own 44. */
.hint::after { content: ""; position: absolute; inset: -6px -4px -16px; }
.b-cap .chip { color: var(--ink); }
/* z-index 1: the target reaches down over the board's top row, which would otherwise take those pixels back. */
.keybtn { position: relative; z-index: 1; height: 22px; padding: 0 2px; border: 0; background: none; font-size: var(--fs-fine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.keybtn::after { content: ""; position: absolute; inset: -12px; }

@media (max-height: 700px) {
  .answer { padding-top: 10px; }
  .b-cap { margin-top: 6px; }
  .since { display: none; }
}

/* ---------- sheets on Today ---------- */

.sheet-body h3 { margin: 16px 0 4px; font-size: var(--fs-section); font-weight: 800; }
.sheet-body .big { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 4px; font-size: var(--fs-step); line-height: 1.35; font-weight: 600; }
.sheet-body .big .glyph { width: var(--icon-m); height: var(--icon-m); margin-top: 2px; }
.sheet-body .big b { font-weight: 800; }
.hazards { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.hazards b { font-weight: 700; }
.hazards p, .hz-none { font-size: var(--fs-dense); line-height: 1.45; color: var(--ink2); }
.hz-none b { color: var(--ink); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 0; font-size: var(--fs-dense); }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; text-align: right; font-weight: 700; }
.kv dd small { display: block; font-weight: 500; color: var(--ink2); }
.kv.hour-meta { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sheet-body .line { margin: 8px 0 0; font-size: var(--fs-dense); line-height: 1.45; }
.sheet-body .note { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink2); }
.sheet-body .warn { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: var(--fs-dense); line-height: 1.45; }
.sheet-body .warn .glyph { width: var(--icon-m); height: var(--icon-m); }
.sheet-body .plan-btn { width: 100%; margin-top: 16px; }
.kv.marks dt { color: var(--ink); font-weight: 700; }
.kv.marks dd { text-align: left; font-weight: 500; color: var(--ink2); }
.layers { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-dense); line-height: 1.45; color: var(--ink2); }
.layers b { font-weight: 700; color: var(--ink); }
.gauge { display: block; width: 100%; max-width: 360px; height: auto; margin: 12px 0 4px; overflow: visible; }
.gauge text { font-size: var(--fs-min); font-weight: 600; fill: var(--ink2); }
.gauge .tr { fill: var(--track); }
.gauge .mn { fill: var(--sock); stroke: var(--ink); stroke-width: 1; }
.gauge .gs { fill: var(--sock); fill-opacity: .3; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.gauge .lm { stroke: var(--ink); stroke-width: 2.4; }
.gauge .lt { font-weight: 800; fill: var(--ink); }
.gauge .tk { stroke: var(--ink2); stroke-width: 1; }
.cats { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-dense); }
.cats li { display: grid; grid-template-columns: 1fr auto 7.5em; gap: 10px; align-items: baseline; }
.cats .cat { color: var(--ink2); }
.cats .max { font-weight: 700; text-align: right; }
.cats .rate { color: var(--ink2); }
.cats .none { grid-column: 2 / -1; font-weight: 500; color: var(--ink2); }
.cats .mine .cat, .cats .mine .rate { color: var(--ink); font-weight: 700; }
.field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-dense); }
.field > span { flex: 1 1 8em; font-weight: 700; }
.field small { display: block; margin-top: 2px; font-weight: 500; font-size: var(--fs-small); line-height: 1.4; color: var(--ink2); }
.keylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-dense); font-weight: 700; }
.keylist li { display: flex; align-items: center; gap: 8px; }
.keylist .glyph { width: var(--icon-m); height: var(--icon-m); vertical-align: 0; }
/* The column's short form as the sky draws it (.sky .col): the same size, weights, ink and chip. */
.key-col { display: inline-grid; justify-items: end; gap: 3px; margin: 12px 0 0; font-size: var(--fs-min); line-height: 14px; color: var(--ink); }
.kc-row { display: flex; align-items: center; }
.kc-alt { min-width: 2.4em; text-align: right; font-weight: 500; }
.kc-alt.tag, .kc-spd { font-weight: 800; }
.kc-t { min-width: 2em; margin-left: 2.5px; text-align: right; font-weight: 600; }
.kc-arr { width: 10px; height: 10px; margin: 0 -0.3px 0 0.7px; overflow: visible; }
.kc-arr path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.key-chip { margin-top: 2px; padding: 0 5px; border: 1px solid var(--ink2); border-radius: 6px; background: var(--plate); font-weight: 700; white-space: nowrap; }
pre.share { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--plate); font: inherit; font-size: var(--fs-small); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-body .actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet-body .actions .btn { flex: 1; }
.days { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.day-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  text-align: left;
}
.day-row .glyph { grid-row: 1 / span 2; width: var(--icon-m); height: var(--icon-m); }
.day-row .day-name { font-size: var(--fs-fine); color: var(--ink2); }
.day-row .day-answer { font-size: var(--fs-body); font-weight: 700; }
.day-row[aria-current="true"] { border-color: var(--ink); background-color: var(--plate); }

/* ---------- winds sheet ---------- */

.seg.views { display: flex; width: 100%; margin: 4px 0 6px; }
.seg.views button { flex: 1 1 0; }
.wt-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
/* The mockup's table (src.html L283-294): heights left, the rest right, no rules between rows. */
table.aloft { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: var(--fs-body); }
table.aloft th { padding: 8px 4px 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink2); text-align: right; }
table.aloft td { padding: 7px 4px; text-align: right; white-space: nowrap; }
table.aloft th:first-child { text-align: left; }
table.aloft tbody th { padding: 7px 4px; font-size: var(--fs-body); color: var(--ink); }
table.aloft tr.mark th, table.aloft tr.mark td { font-weight: 800; }
table.aloft .tag { margin-left: 2px; font-size: var(--fs-small); font-weight: 700; color: var(--line); }
table.aloft tr.above :is(th, td) { font-style: italic; }
table.aloft tr.fz td { height: 18px; padding: 0; font-size: var(--fs-small); font-weight: 700; text-align: left; background: linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1.3px no-repeat; }
table.aloft tr.fz td span { padding-right: 6px; background: var(--page); }
table.aloft td.cl { font-size: var(--fs-fine); color: var(--ink2); text-align: left; white-space: normal; }
table.aloft .nt { display: block; }
table.aloft .shear { font-weight: 700; color: var(--ink); }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--cloud-edge); border-radius: 6px; background: var(--cloud); }
.sw.maybe { border-style: dashed; background: radial-gradient(circle, var(--cloud-edge) 0 1.1px, transparent 1.3px) 0 0 / 4px 4px; }
.wg { position: relative; margin-top: 8px; }
/* Positioned so the night hours' .sr labels are laid out inside the scroll box; otherwise they widen the sheet. */
.wg-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
/* Columns 2 px apart and rows touching, so an hour reads as one strip and is one 44 px wide target. */
table.windgram { border-collapse: separate; border-spacing: 2px 0; font-size: var(--fs-small); }
table.windgram th { font-weight: 600; color: var(--ink2); white-space: nowrap; }
table.windgram tbody th, table.windgram th.corner { position: sticky; left: 0; z-index: 1; padding: 0 6px 0 0; background: var(--page); text-align: right; }
table.windgram thead th { padding: 0 0 2px; vertical-align: bottom; }
table.windgram thead th.night { height: 46px; font-weight: 500; vertical-align: middle; }
table.windgram thead button { width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; font-size: var(--fs-caption); font-weight: 700; color: var(--ink); }
table.windgram thead button[aria-pressed="true"] { border-color: var(--ink); background-color: var(--plate); font-weight: 800; }
table.windgram td { width: 44px; min-width: 44px; height: 30px; padding: 0; border: solid transparent; border-width: 0 2px; font-weight: 700; text-align: center; white-space: nowrap; }
table.windgram td[data-action] { cursor: pointer; }
table.windgram td.sel { border-color: var(--ink); }
table.windgram tr:last-child td.sel { border-bottom-width: 2px; }
.wg-a { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; overflow: visible; }
.wg-a path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wg-tip { position: absolute; z-index: 3; padding: 5px 8px; background: var(--ink); color: var(--page); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; pointer-events: none; }
.wg-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; font-size: var(--fs-small); color: var(--ink2); }
.wg-legend > span:first-child { flex-basis: 100%; }
.wg-legend .lg { display: inline-flex; flex-direction: column; }
.wg-legend i { display: block; width: 26px; height: 10px; margin-bottom: 2px; border: 1px solid var(--edge); }
.cmp-load { margin-top: 12px; }
.cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 8px; }
table.compare { border-collapse: collapse; font-size: var(--fs-dense); white-space: nowrap; }
table.compare th, table.compare td { padding: 7px 10px 7px 0; text-align: right; }
table.compare thead th { font-size: var(--fs-caption); font-weight: 600; color: var(--ink2); }
table.compare tbody th { position: sticky; left: 0; background: var(--page); font-weight: 600; text-align: left; }
table.compare thead th:first-child { text-align: left; }
table.compare td b { font-weight: 800; }
table.compare td.ag { text-align: left; }
.agree { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.agree .glyph { width: var(--icon-s); height: var(--icon-s); }

/* ---------- plan ---------- */

/* The mockup's Plan (src.html L314-391). */
.p-head { padding: 12px 8px 6px; }
.p-head .sub { margin: 0 8px 4px; font-size: var(--fs-pill); color: var(--ink2); }
.p-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.p-stepper > button { height: 48px; padding: 0; border: 0; border-radius: 10px; background: none; }
.p-stepper .st-prev svg, .p-stepper .st-next svg { width: 10px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.p-stepper [aria-disabled="true"] { cursor: default; }
.p-stepper [aria-disabled="true"] svg { opacity: .3; }
.st-now { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; font-size: var(--fs-section); }
.st-now .t { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.01em; }
.st-now .glyph { width: var(--icon-m); height: var(--icon-m); vertical-align: 0; }
.st-now .w { font-weight: 700; }
.st-now .car { width: 10px; height: 10px; stroke: var(--ink); fill: none; stroke-width: 2; transition: transform .2s ease; }
.st-now[aria-expanded="true"] .car { transform: rotate(180deg); }
.pboard-wrap { padding: 0 0 4px; }

/* The Plan map (mockup L327-351). */
.pmap { position: relative; height: 340px; overflow: hidden; margin-top: 6px; background: var(--map-bg); }
.pmap-stage { position: absolute; inset: 0; }
.pmap-canvas { position: absolute; inset: 0; background: var(--map-bg); }
/* Leaflet's panes reach z-index 1000; isolated, they never paint over the sheet. */
.leaflet-container { isolation: isolate; }
.pmap-canvas path.mk-mag { stroke: var(--map-magenta); }
.pmap-canvas path.mk-white { stroke: var(--map-white); }
.pmap-canvas path.mk-ink { stroke: var(--map-ink); }
.pmap-canvas path.m-pt { stroke: var(--map-ink); fill: var(--map-white); }
.m-tee svg { display: block; width: 26px; height: 26px; }
.m-tee .mk-tee, .map-key .mk-tee { fill: var(--map-tee); stroke: var(--map-ink); stroke-width: 1.2; }
.m-tick svg, .m-chev svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-tick line { stroke: var(--map-ink); stroke-width: 2.5; }
.m-chev path { fill: var(--map-magenta); stroke: var(--map-white); stroke-width: 1; }
.m-plate, .pin-edit span { position: absolute; left: 0; top: 0; padding: 1px 6px; border-radius: 4px; background: var(--map-white); color: var(--map-ink); font-size: var(--fs-caption); font-weight: 700; line-height: 18px; white-space: nowrap; transform: translate(-50%, calc(-50% + var(--dy, 0px))); }
.pm-plate { padding: 2px 6px; border-radius: 4px; background: var(--map-white); color: var(--map-ink); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.pm-credit { position: absolute; left: 8px; top: 8px; z-index: 1; font-size: var(--fs-min); font-weight: 600; }
.pm-credit a { position: relative; color: inherit; }
/* The plate is small; this gives its link a 44 px target from the top of the map down. */
.pm-credit a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 44px; }
.m-target svg, .edit-target svg { display: block; width: 40px; height: 40px; filter: drop-shadow(0 0 1px var(--map-ink)); }
.m-target circle, .edit-target circle { fill: none; stroke: var(--map-white); stroke-width: 2.5; }
.m-target circle:last-child, .edit-target circle:last-child { fill: var(--map-white); }
/* Edit DZ's handles: each marker is a 44 px touch target around its mark. */
.edit-target, .edit-handle { display: grid; place-items: center; }
.edit-handle .warrow { box-sizing: content-box; width: 18px; height: 18px; padding: 6px; border: 2px solid var(--map-ink); border-radius: 50%; background: var(--map-white); color: var(--map-ink); }
.edit-handle-jr .warrow { border-color: var(--map-white); background: var(--map-magenta); color: var(--map-white); }
.pmap-canvas path.ed-stub { stroke: var(--map-tee); }
.pm-scale { position: absolute; left: 12px; bottom: 16px; z-index: 1; height: 3px; background: var(--map-white); pointer-events: none; }
.pm-scale i { position: absolute; left: 0; right: 0; top: .8px; height: 1.4px; background: var(--map-ink); }
.pm-scale span { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); }
.pm-north { position: absolute; right: 11px; top: 39px; z-index: 1; width: 26px; height: 26px; pointer-events: none; }
.pm-north circle { fill: var(--map-white); }
.pm-north path { fill: var(--map-ink); }
.pm-north text { font-size: 12px; font-weight: 800; fill: var(--map-ink); }
.pm-full { position: absolute; right: 8px; bottom: 8px; z-index: 1; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--map-white); color: var(--map-ink); font-size: var(--fs-dense); font-weight: 700; }
#map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.map-mode { display: flex; justify-content: center; padding: 8px var(--gutter) 0; }

.map-full { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: var(--page); }
.mf-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 4px var(--gutter); }
.mf-head h2 { min-width: 0; font-size: var(--fs-sheet); font-weight: 800; }
.mf-head h2:focus { outline: none; }
.mf-slot { position: relative; flex: 1 1 auto; min-height: 220px; background: var(--map-bg); }
/* Edit DZ's credit plate; Leaflet's zoom buttons take the top left. */
.map-full .pm-credit { left: auto; right: 8px; }
.mf-tools { display: flex; flex: none; flex-wrap: wrap; gap: 8px; padding: 10px var(--gutter) 0; }
.mf-key { flex: none; margin: 4px var(--gutter) 0; }
.mf-key > summary { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 800; cursor: pointer; }
.mf-key .kv { margin: 8px 0 4px; }
.map-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.map-key li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-fine); }
.mk-swatch { flex: none; width: 32px; height: 16px; border-radius: 3px; fill: none; }
.mk-swatch rect { fill: var(--map-bg); }
.mk-swatch .mk-mag { stroke: var(--map-magenta); }
.mk-swatch .mk-white { stroke: var(--map-white); }
.mk-swatch .mk-ink { stroke: var(--map-ink); }
.mf-credit { flex: none; margin: 2px var(--gutter) 6px; font-size: var(--fs-min); color: var(--ink2); }
.mf-credit a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }

/* Edit DZ: the map with its sheet pinned under it. Only the sheet's body scrolls, so Save and Cancel stay on screen. */
.map-full.editing .mf-slot { min-height: 160px; }
.edit-sheet { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; max-height: min(46%, 380px); border-top: 1px solid var(--rule); background: var(--page); }
.es-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 12px; }
.es-actions { display: flex; flex: none; gap: 10px; padding: 8px var(--gutter); border-top: 1px solid var(--rule); }
.es-actions .btn { flex: 1; height: 48px; }
.edit-side { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.edit-side > span { display: block; font-size: var(--fs-dense); font-weight: 700; }
.edit-side .seg { display: flex; margin-top: 6px; }
.edit-side .seg button { flex: 1 1 0; }
.edit-check { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--rule); font-size: var(--fs-dense); font-weight: 700; }
.edit-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
#editMore > summary { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 800; cursor: pointer; }
.es-more { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
/* A phone on its side has no height for a map over a sheet, so it gets the wide layout. */
@media (min-width: 960px), (orientation: landscape) and (max-height: 500px) {
  .map-full.editing { display: grid; grid-template-columns: minmax(0, 1fr) min(380px, 48%); grid-template-rows: auto auto minmax(0, 1fr); }
  .map-full.editing .mf-head { grid-column: 1 / -1; }
  .map-full.editing .mf-slot { grid-area: 2 / 1 / 4 / 2; }
  .map-full.editing .mf-tools { grid-area: 2 / 2; padding-bottom: 10px; border-left: 1px solid var(--rule); }
  .map-full.editing .edit-sheet { grid-area: 3 / 2; max-height: none; border-left: 1px solid var(--rule); }
}

.adjust { padding: 10px var(--gutter); border-bottom: 1px solid var(--rule); background: var(--plate); }
.adjust > p { margin: 0; font-size: var(--fs-pill); color: var(--ink2); }
.adjust > #adjustLock { margin-top: 8px; color: var(--ink); }
.adj-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#adjustNote { padding: 8px var(--gutter) 0; }

.brief-wrap { position: relative; margin-top: 14px; }
.brief-wrap > .muted { padding: 0 var(--gutter); }
.brief { position: relative; margin: 0; padding: 0 var(--gutter) 0 0; list-style: none; }
.brief li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 10px; padding-bottom: 24px; }
.brief-wrap .strip { position: absolute; left: 64px; top: 8px; bottom: 26px; width: 8px; border-radius: 4px; }
.brief-wrap .strip-line { position: absolute; left: 67px; top: 8px; bottom: 26px; width: 2px; background: var(--ink); }
.rail { position: relative; }
/* 20 px from the rail's right edge leaves Spanish "Aterrizaje" a pixel inside the screen's left edge. */
.rail .alt { position: absolute; right: 20px; top: 0; font-size: var(--fs-body); font-weight: 800; text-align: right; white-space: nowrap; }
.rail .alt small { display: block; font-size: var(--fs-rail); font-weight: 600; color: var(--ink2); }
.rail .mark { position: absolute; right: 2px; top: 1px; width: 16px; height: 18px; }
.rail .mark .m-exit, .rail .mark .m-open { fill: var(--rip); stroke: var(--ink); stroke-width: 1.2; }
.rail .mark .m-pattern { fill: var(--plate); stroke: var(--ink); stroke-width: 2; }
.rail .mark .m-land { fill: var(--sock); stroke: var(--ink); stroke-width: 1; }
.step h3 { font-size: var(--fs-step); line-height: 1.25; font-weight: 800; }
.step p { margin: 4px 0 0; font-size: var(--fs-dense); line-height: 1.4; }
.step .key { font-size: var(--fs-body); }
.step .key b { font-weight: 800; }
.step .more { margin-top: 4px; }
.det { margin-top: 2px; }
.det .btn { margin-top: 8px; }
.step .warn, .p-row .warn { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: var(--fs-dense); font-weight: 600; line-height: 1.4; }
.step .warn .glyph, .p-row .warn .glyph { width: 15px; height: 15px; margin-top: 2px; }
li[data-step="reference"] .warn { margin-top: 0; }

.tee-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tee-switch button { display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: transparent; text-align: left; }
.tee-switch button[aria-pressed="true"] { border-color: var(--ink); background-color: var(--sel); }
.tee-switch button[aria-pressed="true"] b { font-weight: 800; }
.tee-switch button:disabled { opacity: .5; border-style: dashed; }
.tee-switch svg { flex: none; width: var(--icon-l); height: var(--icon-l); }
.tee-switch .tee { fill: var(--sock); stroke: var(--ink); stroke-width: 1.2; }
.tee-switch b { display: block; font-size: var(--fs-body); font-weight: 700; }
.tee-switch span span { font-size: var(--fs-fine); color: var(--ink2); }
#noSetup { margin-top: 8px; }
#noSetup .btn { margin-top: 8px; }
.linkbtn { height: 44px; padding: 0; border: 0; background: none; font-size: var(--fs-dense); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.p-actions { display: flex; gap: 10px; padding: 4px var(--gutter) 0; }
.p-actions .btn { flex: 1; height: 50px; }
.p-actions .btn.primary { flex: 1.3; }

.p-row { margin: 14px var(--gutter) 0; border-top: 1px solid var(--rule); }
.p-row + .p-row { margin-top: 0; }
.p-row > summary { display: flex; align-items: center; min-height: 52px; font-size: var(--fs-section); font-weight: 800; cursor: pointer; }
.p-row:last-of-type { border-bottom: 1px solid var(--rule); }
.row-body { padding-bottom: 12px; }
.row-body h3 { margin: 14px 0 2px; font-size: var(--fs-body); font-weight: 800; }
.row-body .fine { margin-top: 6px; }
:is(.p-row, .edit-sheet) .inp { display: inline-flex; align-items: center; gap: 6px; }
:is(.p-row, .edit-sheet) .inp em { font-style: normal; font-size: var(--fs-fine); color: var(--ink2); }
.p-row input[type="number"], .p-row select, .edit-sheet input[type="number"] { min-height: 44px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--plate); }
:is(.p-row, .edit-sheet) input[type="number"] { width: 6.5em; }
.p-row select { max-width: 100%; }
.p-row .field.range { flex-direction: column; align-items: stretch; }
.p-row .field.range > span { flex: none; }
.p-row input[type="range"] { width: 100%; height: 44px; margin: 0; }
.p-row output { margin-left: 4px; font-weight: 800; }
.pilot-out { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: var(--fs-dense); line-height: 1.4; }
.pilot-out .glyph { width: 15px; height: 15px; margin-top: 2px; }
.groups { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.group-row .g-num { width: 1.4em; font-weight: 800; }
.group-row select { flex: 1 1 9em; min-width: 0; }
.group-row .g-size { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-fine); color: var(--ink2); }
.group-row .g-size input { width: 4.5em; }
.group-row .g-btns { display: inline-flex; margin-left: auto; }
.group-row .icon-btn svg { stroke: var(--ink); fill: none; stroke-width: var(--icon-stroke); }
.group-row .icon-btn:disabled svg { opacity: .3; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sep-gs { margin-top: 12px; font-size: var(--fs-dense); }
table.sep { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: var(--fs-dense); }
table.sep th, table.sep td { padding: 6px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.sep thead th { font-size: var(--fs-caption); font-weight: 600; color: var(--ink2); }
table.sep tbody th { font-weight: 600; }
table.sep th small { display: block; margin-top: 2px; font-weight: 500; color: var(--ink2); }
table.sep .pair { font-weight: 800; }
table.sep td.secs, table.sep thead th:last-child { padding-left: 12px; text-align: right; white-space: nowrap; }
.disclaimer { margin: 14px var(--gutter) 0; }

/* ---------- you ---------- */

/* The mockup's You (src.html L393-414). */
.you h1 { padding: 14px var(--gutter) 2px; font-size: var(--fs-title); font-weight: 800; }
.you .lead { margin: 0 var(--gutter) 10px; font-size: var(--fs-sentence); line-height: 1.4; color: var(--ink2); }
.acc { border-top: 1px solid var(--rule); }
.acc:last-child { border-bottom: 1px solid var(--rule); }
.you .acc-body { padding: 0 var(--gutter) 14px; }
.you .acc-body h3 { margin: 18px 0 2px; font-size: var(--fs-body); font-weight: 800; }
.you .acc-body > .fine { margin-top: 8px; }
.you .field > span:not(:first-child) { flex: none; }
.you .val { font-weight: 600; }
.you :is(input[type="number"], input[type="text"], input[type="password"], select) { min-height: 44px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--plate); }
.you :is(input[type="text"], input[type="password"]) { flex: 1 1 12em; min-width: 0; }
.you select { max-width: 100%; }
.you .inp { display: inline-flex; align-items: center; gap: 6px; }
.you .inp input { width: 5em; }
.you .inp em { font-style: normal; font-size: var(--fs-fine); color: var(--ink2); }
/* One width for every stepper, whatever its unit, so the three line up. */
.st-val { display: inline-flex; align-items: baseline; justify-content: center; width: 92px; }
.you .stepper input { width: 3.2em; padding: 0; border: 0; background: none; text-align: center; font-size: var(--fs-section); font-weight: 800; appearance: textfield; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.st-val small { margin-left: 2px; font-size: var(--fs-fine); font-weight: 600; color: var(--ink2); }
.you .wl { font-size: var(--fs-body); font-weight: 800; }
.you .ext { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.rules { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.rules:empty { display: none; }
/* The fields wrap on a narrow phone; Remove stays at the end of its rule. */
.rule-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-dense); }
.rule-fields { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.rule-part { display: inline-flex; align-items: center; gap: 6px; }
.you .rule-row .inp input { width: 4.5em; }
.dz-list { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.dz-list li { display: flex; align-items: center; gap: 4px; }
.dz-pick { flex: 1; min-width: 0; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; text-align: left; }
.dz-pick b, .dz-pick small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-pick small { color: var(--ink2); }
.you .about { margin-top: 14px; font-size: var(--fs-dense); line-height: 1.45; }
.you .plain { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-dense); line-height: 1.45; }
.you .plain li + li { margin-top: 4px; }
/* The credits' links sit in their sentences: padding gives each a 44 px tall target, and the
   negative margin keeps it from spacing out the lines. The credits sit far enough apart that one
   link's target does not reach into the next. */
.you .plain a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.you .credits li + li { margin-top: 26px; }

/* ---------- first run and states ---------- */

.first-run { padding: 14px var(--gutter) 0; }
.first-run h1 { font-size: var(--fs-title); font-weight: 800; line-height: 1.2; }
.fr-picker { margin-top: 12px; }
.fr-disclaimer { margin-top: 16px; }
/* Where Today or Plan would draw a forecast: what is missing, and at most one thing to do. */
.state { padding: 24px var(--gutter) 0; }
.state-msg { max-width: 30em; font-size: var(--fs-big); font-weight: 700; line-height: 1.3; }
.state .fine { margin-top: 6px; overflow-wrap: anywhere; }
.state .btn { margin-top: 16px; }

/* ---------- dropzone picker ---------- */

/* A bottom sheet like #sheet on phones and a dialog from 960 px; only its body scrolls. */
.dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 640px;
  height: 88vh;
  height: 88dvh;
  max-height: none;
  margin: 0 auto;
  padding: 0 0 env(safe-area-inset-bottom);
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 16px 16px 0 0;
  background: var(--page);
  color: var(--ink);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: rgba(11, 26, 38, .4); }
.dialog .dlg { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.dialog .sheet-head { flex: none; }
.dlg-body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
.dialog .dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) 16px; }
@media (min-width: 960px) {
  .dialog { inset: 0; width: min(600px, calc(100vw - 48px)); height: min(84vh, 720px); margin: auto; border: 1px solid var(--rule); border-radius: 16px; }
}
.dlg-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 10px; background: var(--plate); }
.search .icon { color: var(--ink2); }
.search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.results { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.results-head { padding: 10px 8px 2px; font-size: var(--fs-fine); font-weight: 700; color: var(--ink2); }
.results li.muted, .results li.error, .results li.near-hint { padding: 8px; font-size: var(--fs-dense); line-height: 1.45; }
.results li.near-hint { color: var(--ink2); }
.result { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 8px; overflow: hidden; border: 0; border-radius: 10px; background: none; text-align: left; }
.result:hover { background-color: var(--tint); }
.result .r-main { display: flex; flex: 1 1 auto; flex-direction: column; width: 0; min-width: 0; }
.result b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.result .dist { flex: none; margin-left: 6px; font-size: var(--fs-fine); font-style: normal; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.result .tags, .dz-pop .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag-soft { padding: 0 5px; border: 1px solid var(--edge); font-size: var(--fs-min); font-style: normal; font-weight: 700; color: var(--ink2); }
.dz-map { height: min(52vh, 460px); overflow: hidden; background: var(--map-bg); }
/* Leaflet's popup is white in both themes, so its contents take the map's fixed colours. */
.dz-pop { display: grid; gap: 4px; min-width: 170px; font-family: inherit; color: var(--map-ink); }
.dz-pop small { color: #394957; }
.dz-pop .tag-soft { border-color: #394957; color: #394957; }
.dz-pop .btn { border-color: var(--map-ink); background: var(--map-white); color: var(--map-ink); }
.leaflet-container { font-family: inherit; }

/* ---------- desktop ---------- */

/* Today's side panel (mockup L420-446) shows only on desktop. */
.side { display: none; }
.side-head { display: flex; flex: none; align-items: center; gap: 4px; min-height: 52px; padding: 4px 8px 0 0; }
.side-head h2 { flex: 1; min-width: 0; font-size: var(--fs-sheet); line-height: 1.25; }
.side-head h2:focus { outline: none; }
.side-tog { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; }
.side-tog svg { width: 9px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.2; transition: transform .2s ease; }
.side.shut .side-tog svg { transform: rotate(180deg); }
.side-back { flex: none; height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-size: var(--fs-pill); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.side-body { flex: 1 1 auto; min-height: 0; }
.side.shut :is(.side-body, h2, .side-back) { display: none; }

@media (min-width: 960px) {
  /* The tabs join the header bar. Its middle column is as wide as the tabs, so a long DZ name ends before them. */
  :root { --tabs-w: 300px; }
  body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .top { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--tabs-w) minmax(0, 1fr); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--rule); }
  .top .dz-btn { justify-self: start; max-width: 100%; }
  .top .fresh { grid-column: 3; justify-self: end; }
  .tabs { grid-area: 1 / 1; justify-self: center; width: var(--tabs-w); height: auto; padding: 0; border-top: 0; background: none; }
  .tabs button[aria-selected="true"]::before { top: auto; bottom: 0; border-radius: 2px 2px 0 0; }
  .status-line { grid-row: 2; }
  /* A size container, so Plan's map can take the screen's height. */
  #screens { grid-row: 3; container-type: size; }
  .toast { bottom: 24px; }

  /* Today: the answer and the board, the sky as tall as the screen, and the side panel. The outer
     columns narrow towards 960 px, where they still leave the sky 340 px. */
  #screen-today { height: 100%; padding-bottom: 0; }
  /* min-content, not auto: auto rows stop at their min-height once the sky, spanning the 1fr row
     at the screen's height, has taken the free space, and a two-line verdict or hint runs over the next row. */
  #screen-today:has(> .sky) { display: grid; grid-template-columns: clamp(300px, 29.1vw, 372px) minmax(0, 1fr) auto; grid-template-rows: repeat(5, min-content) 1fr; }
  #screen-today > :is(.since, .answer, .verdict, .b-cap, .board) { grid-column: 1; }
  /* Short phones drop the since line; the left column has the room for it. */
  #screen-today > .since { grid-row: 1; display: block; }
  #screen-today > .answer { grid-row: 2; }
  #screen-today > .verdict { grid-row: 3; }
  #screen-today > .b-cap { grid-row: 4; margin-top: 18px; }
  #screen-today > .b-cap .cap-text { white-space: normal; }
  #screen-today > .board { grid-row: 5; }
  #screen-today > .sky { grid-area: 1 / 2 / -1 / 3; }
  /* At least a 320 px phone's width, so a sheet that fits a phone fits here. */
  #screen-today > .side { grid-area: 1 / 3 / -1 / 4; display: flex; flex-direction: column; width: clamp(320px, 26.6vw, 340px); min-height: 0; border-left: 1px solid var(--rule); background: var(--page); }
  #screen-today > .side.shut { width: 44px; }

  /* Plan: the map left, held in view, and the briefing right, as the Jump tab was. */
  .plan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); grid-template-rows: repeat(7, auto) 1fr; grid-template-areas: "map head" "map board" "map adjust" "map brief" "map actions" "map sep" "map jump" "map disc"; column-gap: 24px; padding: 16px 24px 0; }
  .plan > .p-head { grid-area: head; padding-top: 0; }
  .plan > #planBoardWrap { grid-area: board; }
  .plan > #planMap { grid-area: map; position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; height: calc(100cqh - 32px); }
  .plan > #adjust { grid-area: adjust; }
  .plan > #planBrief { grid-area: brief; }
  .plan > #planActions { grid-area: actions; }
  .plan > #sepRow { grid-area: sep; }
  .plan > #jumpRow { grid-area: jump; }
  .plan > #planDisclaimer { grid-area: disc; }
  #planMap .pmap { flex: 1 1 auto; height: auto; min-height: 0; margin-top: 0; }

  .you, .first-run, .state { max-width: 640px; margin: 0 auto; }
}

/* ---------- preferences ---------- */

@media (forced-colors: active) {
  .tabs button[aria-selected="true"]::before { background: CanvasText; }
  .seg button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

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

/* Print keeps what the screen shows, whole, without what is there to press. A button that carries
   the content (the DZ name, the verdict, the plan's hour) stays, without its caret. */
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body { display: block; height: auto; overflow: visible; }
  #screens { overflow: visible; container-type: normal; }
  /* One column at any paper width. The sky and the map are drawn at their printed size (.printing). */
  #screen-today:has(> .sky), .plan { display: block; height: auto; }
  .sky { margin-inline: auto; }
  #board { break-inside: avoid; }
  #screen-today > .side { display: block; width: auto; border-left: 0; }
  .side-head { padding-inline: var(--gutter); }
  .side.shut :is(.side-body, h2) { display: block; }
  .side-body { overflow: visible; }
  .plan > #planMap { position: static; height: auto; }
  .p-stepper { grid-template-columns: minmax(0, 1fr); }
  :is(.tabs, .refresh, .caret, .chev, .car, .acc-head svg, .hint, .b-cap .chip, .keybtn, .allwinds, .side-tog, .side-back, .seg, .btn, .more, .linkbtn, .pm-full, .map-mode, .st-prev, .st-next, .icon-btn, .stepper button, .leaflet-control-container, #sheetRoot, .toast) { display: none !important; }
}

/* From beforeprint to afterprint, so the sky and the map are drawn at their printed size before the
   page is laid out for paper, where no script runs. js/ui/sky.js draws the sky at its own size. */
.printing #planMap .pmap { flex: none; width: 640px; height: 480px; margin-inline: auto; }