/* Burn Window. The ground after a prescribed burn: ash, char, ochre grass, an ember
   that is only ever text, and the green that comes back. Flat paper surfaces with
   hairline rules and 4px corners; headlines at weight 400, tightened as they grow. */
@import url("fonts/fonts.css");

:root {
  --ash: #eeede7;          /* canvas */
  --paper: #f8f7f3;        /* cards sit lighter than the ground */
  --paper-2: #e5e4dd;      /* secondary fill */
  --cinder: #d4d2c8;       /* hairlines */
  --smoke: #6a6c62;        /* secondary text */
  --smoke-2: #9a9b92;      /* tertiary text */
  --char: #1d1f1a;         /* ink and the primary action */
  --on-char: #f3f2ec;
  --ember: #c2470f;        /* accent text, the live dot. Never a fill. */
  --regrowth: #3c7749;     /* inside the prescription */
  --regrowth-bg: #e0eadc;
  --ochre: #a8741a;        /* thin margin */
  --ochre-bg: #f1e6cd;
  --rust: #a13a27;         /* outside */
  --rust-bg: #f1dcd5;
  --shadow: 0 1px 0 rgba(29, 31, 26, .04), 0 18px 48px -24px rgba(29, 31, 26, .28);
  --ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --prose: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ash: #141612; --paper: #1c1f1a; --paper-2: #262a23; --cinder: #33372f;
    --smoke: #a3a59b; --smoke-2: #75786e; --char: #ecebe4; --on-char: #161813;
    --ember: #f08a4b; --regrowth: #85bb88; --regrowth-bg: #1f3022; --ochre: #dcab55;
    --ochre-bg: #33291a; --rust: #e57a63; --rust-bg: #3a221c;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 48px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ash: #141612; --paper: #1c1f1a; --paper-2: #262a23; --cinder: #33372f;
  --smoke: #a3a59b; --smoke-2: #75786e; --char: #ecebe4; --on-char: #161813;
  --ember: #f08a4b; --regrowth: #85bb88; --regrowth-bg: #1f3022; --ochre: #dcab55;
  --ochre-bg: #33291a; --rust: #e57a63; --rust-bg: #3a221c;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 48px -24px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ash); color: var(--char);
  font: 400 16px/1.5 var(--ui); font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}
::selection { background: #f4c9a6; color: #1d1f1a; }
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 560px) { .wrap { padding-inline: 16px; } }

/* ---------- type ---------- */
.display { font-weight: 400; font-size: clamp(36px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.h1 { font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
.h2 { font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.h3 { font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
.prose { font-family: var(--prose); font-size: 20px; line-height: 1.45; color: var(--char); max-width: 62ch; margin: 0; }
.prose-sm { font-family: var(--prose); font-size: 17.5px; line-height: 1.5; max-width: 66ch; margin: 0; }
.meta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--smoke); }
.mono { font-family: var(--mono); }
.muted { color: var(--smoke); }
.small { font-size: 14px; }
.ember { color: var(--ember); }

/* ---------- top bar ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in oklab, var(--ash) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--cinder) 70%, transparent); }
.top-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--char); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--smoke); font-size: 15px; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.nav a:hover { color: var(--char); text-decoration: none; background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--char); background: var(--paper); box-shadow: inset 0 0 0 1px var(--cinder); }
.spacer { flex: 1; }
.burn-pick { display: flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  .top-in { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 10px 16px; }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .burn-pick select { max-width: 52vw !important; }
}

/* ---------- controls ---------- */
.btn { font: 400 15px/1 var(--ui); border-radius: 4px; padding: 11px 16px; border: 1px solid transparent; cursor: pointer;
  background: var(--char); color: var(--on-char); transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { background: color-mix(in oklab, var(--char) 86%, var(--ember)); }
.btn.light { background: var(--paper-2); color: var(--char); }
.btn.light:hover { background: var(--cinder); }
.btn.ghost { background: transparent; color: var(--smoke); padding: 8px 10px; }
.btn.ghost:hover { color: var(--char); background: var(--paper-2); }
.btn.sm { font-size: 14px; padding: 8px 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label { display: block; font-size: 14px; color: var(--smoke); margin-bottom: 6px; }
input[type="text"], input[type="search"], input[type="number"], select {
  font: 400 16px/1.2 var(--ui); color: var(--char); background: var(--paper); border: 1px solid var(--cinder);
  border-radius: 4px; padding: 10px 12px; width: 100%; min-width: 0; transition: border-color .15s var(--ease); }
input:focus, select:focus { border-color: var(--char); outline: none; }
input[type="number"] { font-family: var(--mono); font-size: 15px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.unit { font-family: var(--mono); font-size: 12px; color: var(--smoke-2); margin-left: 4px; }

/* ---------- surfaces ---------- */
.card { background: var(--paper); border: 1px solid color-mix(in oklab, var(--char) 7%, transparent); border-radius: 4px; padding: 24px; min-width: 0; }
.card.lift { box-shadow: var(--shadow); }
.section { padding-block: 56px 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.rule { height: 1px; background: var(--cinder); border: 0; margin: 20px 0; }

/* status words, never colour alone */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.pill.go { color: var(--regrowth); background: var(--regrowth-bg); }
.pill.thin { color: var(--ochre); background: var(--ochre-bg); }
.pill.no { color: var(--rust); background: var(--rust-bg); }
.pill.wait { color: var(--smoke); background: var(--paper-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.live { display: inline-flex; align-items: center; gap: 8px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ember) 50%, transparent); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ember) 45%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- hero ---------- */
.hero { padding-block: 56px 28px; display: grid; gap: 18px; }
.hero .meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- the playback window (signature) ---------- */
.window { background: var(--paper); border: 1px solid color-mix(in oklab, var(--char) 8%, transparent); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--cinder); background: color-mix(in oklab, var(--paper) 70%, var(--ash)); }
.window-bar .dots { display: flex; gap: 6px; }
.window-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--cinder); display: block; }
.window-bar .title { font-family: var(--mono); font-size: 12px; color: var(--smoke); flex: 1; text-align: center; letter-spacing: .02em; }
.strip-scroll { overflow-x: auto; position: relative; }
.strip { display: grid; position: relative; min-width: max-content; padding: 14px 16px 18px; }
.strip .lbl { font-size: 13px; color: var(--smoke); padding: 8px 16px 8px 0; white-space: nowrap; position: sticky; left: 0; background: var(--paper); z-index: 2; }
.strip .hr { font-family: var(--mono); font-size: 12px; color: var(--smoke); text-align: center; padding: 4px 0 10px; }
.cell { margin: 3px; min-width: 62px; height: 38px; border-radius: 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px;
  background: var(--paper-2); color: transparent; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.cell.on { color: var(--char); }
.cell.on.in { background: var(--regrowth-bg); color: var(--regrowth); }
.cell.on.thin { background: var(--ochre-bg); color: var(--ochre); }
.cell.on.out { background: var(--rust-bg); color: var(--rust); }
.cell.on.none { background: transparent; color: var(--smoke-2); box-shadow: inset 0 0 0 1px var(--cinder); }
.cell .s { display: block; font-size: 10px; opacity: .8; line-height: 1; margin-top: 2px; }
.verdict-cell { margin: 8px 3px 0; height: 8px; border-radius: 2px; background: var(--paper-2); transition: background .4s var(--ease); }
.verdict-cell.on.yes { background: var(--regrowth); }
.verdict-cell.on.no { background: color-mix(in oklab, var(--rust) 55%, var(--paper-2)); }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ember); left: 0; opacity: 0; pointer-events: none;
  transition: transform .14s linear, opacity .3s var(--ease); z-index: 3; }
.playhead::after { content: ""; position: absolute; top: 6px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ember); }
.band { position: absolute; height: 3px; bottom: 6px; background: var(--regrowth); border-radius: 2px; transform-origin: left; transform: scaleX(0);
  transition: transform .9s var(--ease); z-index: 1; }
.band.on { transform: scaleX(1); }
.window-foot { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--cinder); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--smoke); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- week ---------- */
.week { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.day { background: var(--paper); border: 1px solid color-mix(in oklab, var(--char) 7%, transparent); border-radius: 4px; padding: 14px; display: grid; gap: 10px;
  text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.day:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.day .dname { font-size: 15px; }
.day .ticks { display: flex; gap: 3px; height: 18px; align-items: end; }
.day .pill { justify-self: start; }
.day .ticks i { flex: 1; border-radius: 2px; background: var(--paper-2); height: 40%; }
.day .ticks i.in { background: color-mix(in oklab, var(--regrowth) 65%, var(--paper)); height: 100%; }
.day .ticks i.out { background: color-mix(in oklab, var(--rust) 50%, var(--paper-2)); height: 55%; }
.day .src { font-family: var(--mono); font-size: 11px; color: var(--smoke-2); }
.skeleton { background: linear-gradient(90deg, var(--paper-2), var(--paper), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: 4px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- lists ---------- */
.list { display: grid; }
.list-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--cinder); }
.list-row:first-child { border-top: 0; }
@media (max-width: 620px) { .list-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- season ---------- */
.season { display: grid; gap: 10px; }
.period { display: grid; grid-template-columns: 120px 1fr 120px; gap: 14px; align-items: center; }
.period .bar { height: 30px; background: var(--paper-2); border-radius: 4px; overflow: hidden; position: relative; }
.period .bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in oklab, var(--regrowth) 70%, var(--paper)); width: 0; transition: width 1s var(--ease); border-radius: 4px; }
.period.top .bar i { background: var(--regrowth); }
.period .pct { font-family: var(--mono); font-size: 14px; }
@media (max-width: 560px) { .period { grid-template-columns: 90px 1fr 70px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 400 14px/1 var(--ui); padding: 8px 10px; border-radius: 4px; border: 1px solid var(--cinder); background: var(--paper); color: var(--char); cursor: pointer; }
.chip:hover { border-color: var(--char); }
.chip[aria-pressed="true"] { background: var(--char); color: var(--on-char); border-color: var(--char); }

/* ---------- units grid ---------- */
.table-scroll { overflow-x: auto; }
table.grid { border-collapse: separate; border-spacing: 4px; min-width: 640px; width: 100%; }
table.grid th { font-weight: 400; font-size: 13px; color: var(--smoke); text-align: left; padding: 4px 6px; white-space: nowrap; }
table.grid th .mono { display: block; font-size: 11px; color: var(--smoke-2); }
table.grid td { padding: 0; }
table.grid td.u { padding-right: 10px; white-space: nowrap; font-size: 15px; }
.g { display: grid; place-items: center; height: 44px; border-radius: 4px; font-family: var(--mono); font-size: 13px; background: var(--paper-2); color: var(--smoke-2); }
.g.in { background: var(--regrowth-bg); color: var(--regrowth); }
.g.thin { background: var(--ochre-bg); color: var(--ochre); }
.g.no { background: var(--rust-bg); color: var(--rust); }

/* ---------- prescription ---------- */
.fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 14px; }
.fieldset legend { font-size: 18px; font-weight: 500; margin-bottom: 10px; padding: 0; }
.aqi-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.aqi-scale button { display: flex; align-items: center; gap: 10px; text-align: left; font: 400 14px/1.3 var(--ui); padding: 10px 12px; border-radius: 4px;
  background: var(--paper); color: var(--char); border: 1px solid var(--cinder); cursor: pointer; }
.aqi-scale button:hover { border-color: var(--char); }
.aqi-scale button[aria-pressed="true"] { border-color: var(--char); box-shadow: inset 0 0 0 1px var(--char); }
.aqi-scale .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.aqi-scale b { font-family: var(--mono); font-weight: 400; font-size: 13px; white-space: nowrap; }
.note { font-size: 14px; color: var(--smoke); margin: 0; max-width: 70ch; }

/* ---------- search ---------- */
.search-row { display: flex; gap: 8px; }
.results { display: grid; gap: 8px; margin-top: 12px; }
.result { padding: 12px 14px; border: 1px solid var(--cinder); border-radius: 4px; background: var(--paper); display: grid; gap: 8px; }
.result .units { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- toast, modal, setup ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0;
  background: var(--char); color: var(--on-char); padding: 10px 16px; border-radius: 4px; font-size: 14px; z-index: 60;
  transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed; inset: 0; background: color-mix(in oklab, var(--char) 45%, transparent); display: grid; place-items: center; padding: 16px; z-index: 70; overflow-y: auto; }
.modal-box { background: var(--paper); border-radius: 8px; max-width: 620px; width: 100%; padding: 28px; box-shadow: var(--shadow); }
.modal-box ul { padding-left: 20px; display: grid; gap: 8px; margin: 14px 0; }
.steps { display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.step .n { font-family: var(--mono); font-size: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cinder); color: var(--smoke); }
.step.done .n { background: var(--char); color: var(--on-char); border-color: var(--char); }

footer.foot { padding-block: 64px 40px; color: var(--smoke); font-size: 14px; }
footer.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { footer.foot .cols { grid-template-columns: 1fr; } }

/* entrance */
.rise { animation: rise .6s var(--ease) both; }
/* Motion only, never transparency: a page caught mid-animation must still read. */
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .top, .hero-actions, footer.foot, .btn { display: none !important; }
  body { background: #fff; }
}

/* A 7-day "keep" is a reason to hold a date, not a window: outlined, never filled. */
.pill.keep { color: var(--regrowth); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--regrowth) 55%, transparent); }
.g.keep { background: transparent; color: var(--regrowth); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--regrowth) 45%, transparent); }
.day .ticks i.in { background: color-mix(in oklab, var(--regrowth) 65%, var(--paper)); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }
a.btn:hover { text-decoration: none; }

/* ---------- tutorial ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 80; background: transparent; }
.tour-spot { position: fixed; z-index: 81; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ember), 0 0 0 9999px color-mix(in oklab, #121410 58%, transparent);
  transition: top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), height .35s var(--ease), opacity .25s var(--ease); }
.tour-spot.none { opacity: 0; box-shadow: 0 0 0 9999px color-mix(in oklab, #121410 58%, transparent); }
.tour-card { position: fixed; z-index: 82; width: min(400px, calc(100vw - 24px)); background: var(--paper); color: var(--char);
  border-radius: 8px; padding: 20px 20px 16px; box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--char) 8%, transparent);
  display: grid; gap: 10px; transition: top .35s var(--ease), left .35s var(--ease), opacity .2s var(--ease); outline: none; }
.tour-card.moving { opacity: .55; }
.tour-card .h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.tour-card .prose-sm { font-size: 16.5px; color: var(--char); }
.tour-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ember); }
.tour-meta .mono { color: var(--smoke); }
.tour-progress { height: 2px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.tour-progress i { display: block; height: 100%; width: 0; background: var(--ember); transition: width .35s var(--ease); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
@media (max-width: 639px) {
  .tour-card { top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px !important; }
}

/* Terms: the panel keeps its size and scrolls inside, opening at the top. */
.modal:has(.terms-box) { overflow: hidden; }
.terms-box { padding: 0; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 32px)); }
.terms-box .modal-scroll { overflow-y: auto; padding: 28px 28px 8px; overscroll-behavior: contain; }
.terms-box .modal-foot { justify-content: flex-end; padding: 14px 28px 20px; border-top: 1px solid var(--cinder); }

/* ---------- placeholders and refused input ---------- */
.banner { border: 1px solid color-mix(in oklab, var(--ochre) 55%, transparent); background: var(--ochre-bg); border-radius: 4px;
  padding: 16px 18px; margin: 24px 0; max-width: 820px; }
.field-err { color: var(--rust); font-size: 13px; line-height: 1.35; margin: 6px 0 0; }
.field-err:empty { display: none; }
input[aria-invalid="true"] { border-color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }

/* ---------- nothing wider than a phone ---------- */
.step { grid-template-columns: 34px minmax(0, 1fr); }
.search-row input { min-width: 0; flex: 1 1 auto; }
.search-row .btn { flex: none; }
.grid-2 > *, .grid-3 > *, .field-grid > * { min-width: 0; }
@media (max-width: 420px) { .nav { gap: 2px; } .nav a { padding: 6px 4px; font-size: 14px; } }

/* ---------- your dates: each date at its stage ---------- */
.date-list { display: grid; gap: 16px; }
.date-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.date-head > :first-child { min-width: 150px; }
.date-head .btn { margin-left: auto; }
.date-block { border-top: 1px solid var(--cinder); padding-top: 20px; }
.date-block .hero { padding-bottom: 20px; }
.rail { display: inline-flex; gap: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.rail span { padding: 4px 9px; border-radius: 4px; border: 1px solid var(--cinder); color: var(--smoke); white-space: nowrap; }
.rail span.done { border-color: transparent; text-decoration: line-through; text-decoration-color: var(--cinder); }
.rail span.on { color: var(--char); border-color: var(--char); background: var(--paper); }
.rail span.next { border-style: dashed; }
.date-list > * { min-width: 0; }