:root {
  --bg: #0d1117;
  --panel: #141b24;
  --edge: #22303f;
  --ink: #dde6f0;
  --dim: #8fa3b8;
  --accent: #4fc3f7;
  --accent-ink: #06121b;
  --warn: #ffb74d;
  --bad: #ef5350;
  --ok: #66bb6a;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a default of `display: none`, so ANY class
   that sets display beats it and the "hidden" element keeps rendering. Two in
   this file did: `.drawhint` is grid and `.row` is flex, so the draw hint sat
   over the map after a box was drawn and the overlay toggles appeared before
   there was anything to toggle. Stated once, globally, rather than remembered
   at each call site. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* A flex column, rather than `calc(100% - 64px)` on the content.
   The magic number was the header's height on the day it was written; the
   header is 101 px once the strapline wraps, and the map then hung 37 px off
   the bottom of the window with the top bar scrolled out of view. Let the
   browser measure it. */
body { display: flex; flex-direction: column; }
.topbar, .help { flex: none; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--edge);
  background: var(--panel);
}
.brand { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.brand img { flex: none; }
.topbar h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 7px; border-radius: 3px; vertical-align: 3px; font-weight: 700;
}

.help {
  padding: 16px 20px; border-bottom: 1px solid var(--edge);
  background: #101720; color: var(--dim); font-size: 14px;
}
.help p { margin: 0 0 10px; max-width: 78ch; }
.help p:last-child { margin-bottom: 0; }
.help strong, .help b { color: var(--ink); }

.wrap { display: flex; flex: 1; min-height: 0; }

.panel {
  width: 340px; flex: none; overflow-y: auto; min-height: 0;
  border-right: 1px solid var(--edge); background: var(--panel);
  padding: 4px 0 24px;
}
.step { padding: 16px 18px; border-bottom: 1px solid var(--edge); }
.step:last-child { border-bottom: 0; }
.step h2 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--dim); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.n {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--edge); color: var(--ink);
  font-size: 11px; font-weight: 700;
}

.row { display: flex; gap: 8px; align-items: center; }
.row.two { gap: 10px; margin-top: 8px; }
.row.two label { flex: 1; font-size: 12px; color: var(--dim); }
.row.two input, .row.two select { width: 100%; margin-top: 3px; }
.row + .row { margin-top: 8px; }

input[type=text], input[type=date], select {
  background: #0b1017; border: 1px solid var(--edge); color: var(--ink);
  border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 13.5px;
  min-width: 0;
}
input[type=text] { flex: 1; }
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input[type=range] { flex: 1; accent-color: var(--accent); }

button {
  background: var(--edge); border: 1px solid transparent; color: var(--ink);
  border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 13.5px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #2c3d50; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary {
  width: 100%; background: var(--accent); color: var(--accent-ink); font-weight: 650;
  padding: 10px;
}
button.primary:hover:not(:disabled) { background: #6fd0fa; }
button.ghost { background: transparent; border-color: var(--edge); }
button.wide { width: 100%; margin-top: 10px; }
button.link {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-size: inherit; text-decoration: underline; cursor: pointer;
}

.hint { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); }
.aoi {
  margin: 8px 0 0; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); word-break: break-all;
}
.date {
  margin: 10px 0 0; font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.err {
  margin: 10px 0 0; font-size: 13px; color: var(--bad);
  background: #2a1416; border: 1px solid #58252a; border-radius: 6px; padding: 9px 11px;
}

.prog { margin-top: 12px; }
.bar { height: 4px; background: var(--edge); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.prog p { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); }

.toggles { margin-top: 10px; gap: 14px; font-size: 13px; color: var(--dim); }
.toggles label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.out { margin-top: 12px; font-size: 13px; }
.out dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; }
.out dt { color: var(--dim); }
.out dd { margin: 0; font-variant-numeric: tabular-nums; }
.out .note { color: var(--dim); font-size: 12.5px; margin: 0 0 8px; }
.out .verdict {
  border-radius: 6px; padding: 9px 11px; margin: 0 0 8px; font-size: 12.5px;
  border: 1px solid var(--edge); background: #101720;
}
.out .verdict.good { border-color: #2c5c30; background: #12200f; color: #cfe8c9; }
.box-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--edge); cursor: pointer;
  width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0; color: inherit; font: inherit; text-align: left;
}
.box-row:hover { background: none; }
.box-row:hover { color: var(--accent); }
.box-row b { font-weight: 600; }
.box-row span { color: var(--dim); font-variant-numeric: tabular-nums; }

.mapwrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #0b1017; }
.leaflet-container { background: #0b1017; font: inherit; }
.leaflet-bottom { bottom: 84px; }

.legend {
  position: absolute; left: 12px; bottom: 96px; z-index: 500;
  background: rgba(13, 17, 23, 0.9); border: 1px solid var(--edge);
  border-radius: 7px; padding: 9px 11px; font-size: 11.5px; color: var(--dim);
  backdrop-filter: blur(4px); max-width: 250px;
}
.legend .ramp { height: 9px; border-radius: 2px; margin: 5px 0 4px; }
.legend .ends { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.legend b { color: var(--ink); font-weight: 600; }

.scale {
  position: absolute; right: 12px; bottom: 96px; z-index: 500; margin: 0;
  background: rgba(13, 17, 23, 0.9); border: 1px solid var(--edge);
  border-radius: 7px; padding: 6px 10px; font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.tlbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 500;
  display: flex; align-items: center; gap: 8px;
  background: rgba(13, 17, 23, 0.92); border: 1px solid var(--edge);
  border-radius: 10px; padding: 8px 10px 10px;
}
.tlbar .tlmain { flex: 1; min-width: 0; }
.tlbar .date { margin: 0; font-size: 16px; }
.tlbar .hint { margin: 3px 0 0; }
.tlbar input[type=range] { width: 100%; margin-top: 4px; }
.tlbar button.icon { padding: 7px 10px; font-size: 16px; line-height: 1; }
.out .lede {
  margin: 0 0 8px; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.out .lede .dim { font-weight: 400; color: var(--dim); font-size: 13px; }
details.why { margin-top: 8px; }
details.why > summary {
  cursor: pointer; font-size: 12px; color: var(--dim); list-style: none;
}
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: "Fit details  "; }

.drawhint {
  position: absolute; inset: 0; z-index: 450; display: grid; place-items: center;
  pointer-events: none;
}
.drawhint span {
  background: rgba(13, 17, 23, 0.88); border: 1px solid var(--edge);
  padding: 9px 15px; border-radius: 999px; font-size: 13px; color: var(--dim);
}

@media (max-width: 860px) {
  /* `flex: none` on BOTH, not just the map.
     The base rule is `flex: 1; min-height: 0`, which in a column body means
     flex-basis 0 and no floor — so .wrap was sized to whatever space was left
     over (411 px) while its two children needed 1,006, and they simply
     overflowed it. Stacked panels have to size from their content and let the
     document scroll. */
  .wrap { flex: none; flex-direction: column; height: auto; min-height: 0; }
  .panel { width: auto; border-right: 0; border-bottom: 1px solid var(--edge); }
  /* `flex: none` because the base rule is `flex: 1`, and in a column flex
     container that resolves flex-basis from the CONTENT, not from `height`.
     The map ignored its 65vh, landed on the 380px floor, and then overflowed
     the viewport once steps 3 and 4 appeared below it. */
  .mapwrap { flex: none; height: 65vh; min-height: 380px; position: relative; }
  .legend, .scale { bottom: 100px; }
}