/* ==========================================================================
   Chat Assembler — Komunidad, light professional.

   Tokens from the live properties, not invented. Both sites ship a light and a
   dark set; this uses the light one:
     --ink #17262b   --muted #6b7a84   --line #e7eef0   --bot-bg #eef7f6
     --brand #1d969e --brand-dark #1d968e
   The dark set (--bg #05121c, --surface #0d2231) is kept for the masthead only,
   so the header reads as a different surface from the work area.

   Accent is #1d969e, not the #2dd4bf used on their dark pages: mint on white
   fails contrast for text and small controls.

   No icon font, no emoji, no decorative glyphs. State is carried by weight,
   rule, colour and a 2px accent bar. Every affordance is a word.
   ========================================================================== */

html {
  /* Stops iOS Safari inflating type when the phone is turned to landscape. */
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; background: #f4f7f8; }
.asm {
  /* A phone must never scroll sideways. The shell clips (see overflow below)
     rather than growing past the screen and dragging the page with it. */
  max-width: 100%;

  /* light working surfaces */
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #fafcfc;
  --surface-3: #eef4f5;
  --sunk: #eef2f4;

  /* dark masthead only */
  --head: #0b1e2c;
  --head-ink: #e8f2ef;
  --head-ink-2: #93a8b1;
  --head-line: #1d3442;

  /* ink */
  --ink: #17262b;
  --ink-2: #41545c;
  --ink-3: #6b7a84;
  --ink-4: #93a3ab;

  /* rules */
  --line: #e2eaec;
  --line-2: #edf2f3;
  --line-3: #cfdade;

  /* brand */
  --accent: #1d969e;
  --accent-2: #17787f;
  --accent-ink: #135c62;
  --accent-soft: #eaf6f7;
  --accent-line: #a9d9dd;

  /* semantic */
  --warn: #8a5a06;
  --warn-soft: #fdf5e6;
  --warn-line: #ecd9ac;
  --err: #b4322f;
  --err-soft: #fdefee;
  --err-line: #f0c9c6;
  --ok: #1c7a52;
  --ok-soft: #eaf6f0;
  --ok-line: #b3ddc8;

  /* One typeface throughout. Poppins is self-hosted (css/fonts.css) — no
     request to fonts.googleapis.com, so the type does not depend on a third
     party being reachable.

     --f-mono is a role, not a typeface: the eyebrows, counters and coordinates
     that used a monospace face now use Poppins with tabular figures, which
     keeps digits column-aligned without a second family on the page. */
  --f-sans: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r: 7px;
  --r-lg: 10px;
  --r-pill: 26px;

  --shadow: 0 1px 2px rgba(23, 38, 43, .05), 0 1px 3px rgba(23, 38, 43, .05);
  --shadow-lg: 0 2px 4px rgba(23, 38, 43, .06), 0 12px 28px rgba(23, 38, 43, .08);

  font-family: var(--f-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Arrival. The landing page covers itself in this page's background colour
   before navigating, so what the eye sees across the two documents is one
   continuous move: the water rises, the surface holds, the app resolves onto
   it. Unconditional rather than only-when-handed-off — it costs a third of a
   second on a direct visit and needs no state to be passed between pages. */
.asm { animation: asm-arrive .34s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes asm-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .asm { animation: none; }
}

.asm *, .asm *::before, .asm *::after { box-sizing: border-box; }
.asm ::selection { background: var(--accent-soft); color: var(--accent-ink); }
.asm :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ==========================================================================
   Masthead — deliberately a different surface from everything below it
   ========================================================================== */

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  height: 56px;
  background: var(--head);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, transparent 22%);
}

.bar .logo { height: 20px; width: auto; display: block; }

/* The mark is the way back to the landing page. Reset the .bar a rules below
   so it reads as a logo, not as another nav word. */
.bar .home { display: block; padding: 0; border-bottom: 0; opacity: 1; }
.bar .home:hover { border-bottom-color: transparent; opacity: .78; }

.bar .div { width: 1px; height: 17px; background: var(--head-line); }

.bar .eyebrow { color: var(--head-ink-2); }

.bar .sp { margin-left: auto; display: flex; align-items: center; gap: 20px; }

.bar .meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--head-ink-2);
  font-variant-numeric: tabular-nums;
}
.bar .meta b { color: var(--head-ink); font-weight: 500; }

.bar a {
  font-size: 12px;
  font-weight: 500;
  color: var(--head-ink-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.bar a:hover { color: #fff; border-bottom-color: var(--accent); }

/* ==========================================================================
   Body / split
   ========================================================================== */

.body { flex: 1; display: flex; min-height: 0; background: var(--bg); }

.asm { --chat-w: 50%; }

.chatrail {
  width: var(--chat-w);
  min-width: 340px;
  max-width: calc(100% - 380px);
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
}

.chathead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.chathead__hint {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--ink-4);
  margin-left: auto;
  text-align: right;
}

/* -- resizer ------------------------------------------------------------- */

.resizer {
  width: 11px;
  flex: 0 0 11px;
  cursor: col-resize;
  background: var(--bg);
  border: 0;
  padding: 0;
  position: relative;
  transition: background .12s ease;
}
.resizer::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: var(--line-3);
  transition: background .12s ease, height .12s ease;
}
.resizer:hover::before,
.resizer:focus-visible::before { background: var(--accent); height: 48px; }
.resizer[data-dragging="true"]::before { background: var(--accent); height: 80px; }

.asm[data-resizing="true"] { cursor: col-resize; user-select: none; }
/* The GL canvas and the SVG map both capture pointer moves; muting them keeps
   the drag with the splitter instead of panning the map. */
.asm[data-resizing="true"] .mapsvg,
.asm[data-resizing="true"] .mapgl { pointer-events: none; }

.work {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  border-left: 1px solid var(--line);
  /* The panel's width is set by the splitter, not the viewport, so its
     internal breakpoints have to key off the panel — a media query would fire
     at the wrong moment every time the split is dragged. */
  container-type: inline-size;
  container-name: work;
}

/* ==========================================================================
   Workflow rail — chevrons, left to right, inside the right panel only

   Arrow shape comes from clip-path, so there are no borders to clip: state is
   carried by fill alone. Each chevron overlaps its neighbour by the notch
   width, which is what makes the row read as one continuous flow rather than
   five buttons that happen to sit together.
   ========================================================================== */

.rail {
  --notch: 13px;
  display: flex;
  padding: 9px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.st {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  border: 0;
  background: var(--surface-3);
  /* Both notches eat into the box, so the text has to be inset past them or
     it runs under the arrow point. */
  padding: 7px calc(var(--notch) + 4px) 7px calc(var(--notch) + 12px);
  /* Overlap by the notch less 2px, so a 2px diagonal of the rail's own
     background shows between chevrons. Without it, five same-coloured
     chevrons read as one flat bar. */
  margin-left: calc(var(--notch) * -1 + 2px);
  cursor: pointer;
  position: relative;
  font: inherit;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .12s, color .12s;
  clip-path: polygon(
    0 0, calc(100% - var(--notch)) 0, 100% 50%,
    calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%
  );
}
/* First chevron is flat-backed, last is flat-fronted — the row has a start
   and an end, not a stream of arrows pointing off both edges. */
.st:first-child {
  margin-left: 0;
  padding-left: 13px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
.st:last-child {
  padding-right: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%);
}
/* Later chevrons paint over earlier ones, so the active one must come forward
   or its left notch is buried under its predecessor. */
.st { z-index: 1; }
.st.on { z-index: 3; }
.st:hover { z-index: 2; }

.st:not(.locked):hover { background: var(--line-2); color: var(--ink); }

.st .num {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-4);
  flex-shrink: 0;
}
.st .lab {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The hint is prose — it belongs in the panel heading and the title attribute,
   not repeated five times across a narrow rail. */
.st .hint { display: none; }

.st.done { background: var(--ok-soft); }
.st.done .num,
.st.done .lab { color: var(--ok); }

.st.on { background: var(--accent); }
.st.on .num { color: rgba(255, 255, 255, .72); }
.st.on .lab { color: #fff; font-weight: 600; }

/* Locked: reachable by click (it routes you to the blocking step) but plainly
   not yet yours. The rule is stated in the title attribute. */
.st.locked { background: var(--surface-2); }
.st.locked .num { color: var(--line-3); }
.st.locked .lab { color: var(--ink-4); font-weight: 400; }

/* ==========================================================================
   Gate — the advance control at the foot of every step but the last
   ========================================================================== */

.gate {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* .stage is a flex column, so auto pins the gate to the foot of the panel on
     short steps. Sticky keeps it in view on long ones — in a gated workflow
     the thing that says why you cannot advance should never be scrolled off. */
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-4);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 -6px 14px -8px rgba(23, 38, 43, .18);
}
.gate[data-ready="true"] { border-left-color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }

.gatemsg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gatemsg .gt { font-size: 12px; font-weight: 300; color: var(--ink-2); }
.gate[data-ready="true"] .eyebrow { color: var(--ok); }

.cont {
  margin-left: auto;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 17px;
  border: 0;
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.cont:hover:not(:disabled) { background: var(--accent-2); }
.cont:disabled { background: var(--surface-3); color: var(--ink-4); cursor: not-allowed; }

/* ==========================================================================
   Transcript
   ========================================================================== */

.log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.log::-webkit-scrollbar { width: 10px; }
.log::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 5px; border: 3px solid var(--surface); }
.log::-webkit-scrollbar-track { background: transparent; }

.msg { max-width: 100%; line-height: 1.62; font-size: 13.5px; }

.msg.u {
  align-self: flex-end;
  max-width: 86%;
  background: var(--head);
  color: var(--head-ink);
  padding: 9px 13px;
  border-radius: var(--r) var(--r) 2px var(--r);
}

.msg.a {
  align-self: stretch;
  border-left: 2px solid var(--accent-line);
  padding-left: 14px;
  color: var(--ink-2);
}
.msg.a strong { color: var(--ink); font-weight: 600; }

.msg.sys {
  align-self: stretch;
  font-size: 12px;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r);
  padding: 9px 12px;
}

.msg p { margin: 0 0 .6em; }
.msg p:last-child { margin-bottom: 0; }

.delta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }

.dchip {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  white-space: nowrap;
}
.dchip.sg { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.dchip.rk { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.dchip.rm { background: var(--err-soft); color: var(--err); border-color: var(--err-line); }
.dchip.no { background: var(--sunk); color: var(--ink-4); border-color: var(--line-3); text-decoration: line-through; }

.uv {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r);
  padding: 8px 11px;
}
.uv b {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 3px;
}

.typing { display: inline-flex; gap: 5px; align-items: center; height: 1.5em; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: apulse 1.05s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }
@keyframes apulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .55; } }

/* -- turn meter ---------------------------------------------------------- */

.turnmeter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--surface-2);
}
.turnmeter b { color: var(--ink-2); font-weight: 500; }
.turnmeter .pips { display: flex; gap: 3px; margin-left: auto; }
.turnmeter .pip { width: 11px; height: 3px; background: var(--line-3); border-radius: 1px; }
.turnmeter .pip[data-spent="true"] { background: var(--accent); }
.turnmeter[data-state="warning"] { background: var(--warn-soft); color: var(--warn); }
.turnmeter[data-state="warning"] b { color: var(--warn); }
.turnmeter[data-state="warning"] .pip[data-spent="true"] { background: var(--warn); }
.turnmeter[data-state="exhausted"] { background: var(--err-soft); color: var(--err); }
.turnmeter[data-state="exhausted"] b { color: var(--err); }
.turnmeter[data-state="exhausted"] .pip[data-spent="true"] { background: var(--err); }

/* -- composer ------------------------------------------------------------ */

.compose {
  border-top: 1px solid var(--line);
  padding: 11px 18px 14px;
  background: var(--surface);
}

.sugg { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }

.seed {
  font: inherit;
  font-size: 11.5px;
  border: 1px solid var(--line-3);
  background: var(--surface);
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  transition: border-color .12s, color .12s, background .12s;
}
.seed:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

.compose textarea {
  width: 100%;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  padding: 9px 11px;
  font: inherit;
  font-size: 12.5px;
  resize: none;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
.compose textarea::placeholder { color: var(--ink-4); }
.compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.compose textarea:disabled { background: var(--sunk); color: var(--ink-4); cursor: not-allowed; }

.send {
  margin-top: 8px;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 9px;
  border-radius: var(--r);
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s;
}
.send:hover:not(:disabled) { background: var(--accent-2); }
.send:disabled { background: var(--line-3); color: #fff; cursor: default; }

/* ==========================================================================
   Work panel
   ========================================================================== */

.stage { flex: 1; overflow-y: auto; padding: 18px 20px 26px; display: flex; flex-direction: column; }

/* The stage scrolls; nothing inside it is ever compressed to make the content
   fit. Without this, a step whose content is taller than the panel is a column
   flex container with a height deficit, and every child has the default
   `flex-shrink: 1` — so the deficit gets taken out of the children instead of
   producing a scrollbar.

   Most children survive that anyway, because `min-height: auto` floors a flex
   item at its content height. The exception is the one that matters: **that
   floor is 0 for a scroll container**, and any child with a non-visible
   `overflow` is one. So a single stage child with `overflow-x: auto` silently
   volunteers to absorb the entire deficit — which is how the segmented control
   on step 2 ended up 8px tall with 45px of content inside it, its label sliced
   in half and its "Recommended" note nowhere. */
.stage > * { flex-shrink: 0; }

.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 5px; border: 3px solid var(--bg); }

.h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.15;
  color: var(--ink);
}
.sub {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 300;
  margin: 0 0 16px;
  max-width: 78ch;
  line-height: 1.55;
}

.sec { margin-bottom: 18px; }
.sech {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.sech h3 {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sech .n {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-4);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font: inherit;
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 5px;
  border: 1px solid var(--line-3);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
.chip.on .mono { opacity: .85; }

select.ind, input.txt {
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  min-width: 240px;
}
select.ind:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* -- map ----------------------------------------------------------------- */

/* Map left, the sites it produced right. minmax(0,…) on the first track stops
   the GL canvas from forcing the grid wider than the panel.

   The two columns are always the same height, and the map decides what that
   height is. Its aspect-ratio gives it a natural height at any width, and
   `stretch` matches the site column to it.

   For that to hold, the site column must not be able to grow the row — five
   sites and fifty have to produce the same box. So its content sits in an
   absolutely-positioned layer: the column itself has no intrinsic height, it
   only ever takes the height the map set. A fixed pixel height on the row
   would also equalise them, but it letterboxes the map at wide splits and
   crops it at narrow ones. */
.mapcols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(238px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.sitecol {
  position: relative;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* The layer that actually holds the header and the list. inset:0 pins it to
   whatever height the grid handed the column. */
.sitecol > .inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sitecolh {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.sitecolh .n { margin-left: auto; font-size: 11px; color: var(--ink-2); }

/* Takes the height the header leaves and scrolls inside it, so twenty sites
   never stretch the column past the map. */
.sitescroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.sitescroll::-webkit-scrollbar { width: 8px; }
.sitescroll::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; border: 2px solid var(--surface); }

/* Below this both columns are too narrow to be useful — stack them. Once
   stacked there is no row to share, so the site column gets its own height and
   its content leaves the absolute layer. */
@container work (max-width: 660px) {
  .mapcols { grid-template-columns: 1fr; }
  .sitecol { height: 290px; }
}

/* Control on the left, its explanation on the right, on one line. A flex row
   let the aside sit flush against the select and then wrap underneath it; an
   explicit two-track grid keeps the gutter whatever the text does. */
.row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 8px 20px;
  align-items: center;
}
.aside {
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-3);
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
@container work (max-width: 560px) {
  .row { grid-template-columns: 1fr; }
  .aside { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Option grid — multi-select cells that fill the row
   ========================================================================== */

.optgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 7px;
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 44px;   /* comfortable tap target on a phone */
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.opt:hover { border-color: var(--ink-4); }
.opt.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.opt .tick {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--line-3);
  border-radius: 3px;
  background: var(--surface);
  position: relative;
}
.opt.on .tick { background: var(--accent); border-color: var(--accent); }
.opt.on .tick::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}

.opt .ot { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt .ot .t { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
/* The formal wording behind the plain question — present but subordinate, so
   nobody has to hover a chip to find out what they actually selected. */
.opt .ot .d {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--ink-4);
  line-height: 1.35;
}
.opt.on .ot .d { color: var(--accent-ink); opacity: .8; }

.mapwrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* The bar, the hit list and the footnote are fixed; the map itself absorbs
   whatever height is left. */
.mapbar, .hits, .mapfoot { flex-shrink: 0; }
.mapbar {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
/* aspect-ratio, not a pixel height: the map is then correctly proportioned at
   every split position, and its computed height is what sets the row.
   2:1 is the plate-carree raster's true ratio, so it fills its box exactly —
   no letterboxing, and the click-to-coordinate maths needs no correction. GL
   is happy at any ratio; 16:10 just reads better than a 2:1 strip. */
.mapsvg {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #e9eff1;
  cursor: crosshair;
  touch-action: none;
}
.mapgl {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--sunk);
}
/* A floor on the height has to go on the wrapper, never on the element that
   carries aspect-ratio: there, min-height back-propagates into a min-WIDTH
   (190px tall at 2:1 demands 380px wide) and pushes the whole page into
   horizontal overflow on a phone. */
.mapwrap { min-height: 210px; }

.mapfoot {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--ink-4);
  padding: 6px 10px;
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}

.mapbar input {
  flex: 1;
  min-width: 0;
  margin-left: auto;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  padding: 6px 10px;
  font: inherit;
  font-size: 11.5px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
}
.mapbar input::placeholder { color: var(--ink-4); }
.mapbar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.hits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 10px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line-2);
}
.hits:empty { display: none; }

.hit {
  font: inherit;
  font-size: 11.5px;
  border: 1px solid var(--accent-line);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  cursor: pointer;
  color: var(--accent-ink);
}
.hit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hit .cc { font-family: var(--f-mono); font-size: 9.5px; opacity: .7; margin-left: 5px; }

/* Mapbox chrome, aligned to the light theme */
.mapgl .mapboxgl-ctrl-group { border: 1px solid var(--line-3); box-shadow: none; }
.mapgl .mapboxgl-ctrl-attrib { background: rgba(255, 255, 255, .82); font-size: 10px; }
.mapgl .mapboxgl-popup-content {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  padding: 9px 11px;
}
.mapgl .mapboxgl-popup-tip { border-top-color: var(--surface); }

/* Site pin — a marker, not an icon font or emoji. */
.pin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(29, 150, 158, .22), 0 1px 3px rgba(23, 38, 43, .3);
  cursor: pointer;
}
.pin[data-active="true"] { background: var(--warn); box-shadow: 0 0 0 4px rgba(138, 90, 6, .22); }

/* -- site list ----------------------------------------------------------- */

.sitelist { display: flex; flex-direction: column; gap: 5px; }

/* Two rows in a narrow column: identity on top, coordinates and actions
   beneath. A single flex row would crush the name field. */
.site {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 8px;
  background: var(--surface);
}
.site:hover { border-color: var(--line-3); }
.site.on { border-color: var(--accent); background: var(--accent-soft); }

.site .idx {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-4);
  grid-row: 1;
}
.site input.nm { grid-column: 2 / span 2; grid-row: 1; }
.site .co { grid-column: 2; grid-row: 2; }
.site .acts { grid-column: 3; grid-row: 2; display: flex; gap: 9px; }

.site input.nm {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 6px;
  font: inherit;
  font-weight: 500;
  font-size: 12.5px;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--ink);
}
.site input.nm:hover { border-color: var(--line); background: var(--surface-2); }
.site input.nm:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.site .co {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
}
.site .act {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
  font: inherit;
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 1px 0;
  white-space: nowrap;
}
.site .act:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.site .act.del:hover { color: var(--err); border-bottom-color: var(--err); }

/* -- fork cards ---------------------------------------------------------- */

.fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 11px; }

.fk {
  border: 1px solid var(--line-3);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .14s, box-shadow .14s;
}
.fk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.fk:hover { border-color: var(--ink-4); box-shadow: var(--shadow-lg); }
.fk.lead { border-color: var(--accent-line); }
.fk.lead::before { background: var(--accent); }
.fk.lead:hover { border-color: var(--accent); }

.fk .kicker { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.fk.lead .kicker { color: var(--accent); }
.fk .hd { font-size: 15px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); }
.fk .by { font-size: 12px; font-weight: 300; color: var(--ink-3); line-height: 1.6; }
.fk .go {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  padding-top: 6px;
}

/* -- templates + picks --------------------------------------------------- */

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }

.tpl {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .14s, box-shadow .14s;
}
.tpl:hover { border-color: var(--line-3); box-shadow: var(--shadow); }
.tpl.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.tpl .n { font-weight: 500; font-size: 12.5px; color: var(--ink); padding-right: 78px; }
.tpl .b { font-size: 11.5px; font-weight: 300; color: var(--ink-3); line-height: 1.55; }
.tpl .f { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); margin-top: auto; padding-top: 4px; }
.tpl .f b { color: var(--ink-2); font-weight: 500; }

.badge {
  position: absolute;
  top: 13px; right: 14px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 3px;
}
.tpl.on .badge { background: #fff; }

.pick {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 5px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color .14s, background .14s;
}
.pick:hover { border-color: var(--line-3); }
.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.pick.rust.on { border-color: var(--warn-line); background: var(--warn-soft); }

.pick .box {
  width: 15px; height: 15px;
  border-radius: 3px;
  border: 1px solid var(--line-3);
  background: var(--surface);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
}
.pick.on .box { background: var(--accent); border-color: var(--accent); }
.pick.on .box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
.pick.rust.on .box { background: var(--warn); border-color: var(--warn); }

.pick .t { font-weight: 500; font-size: 12.5px; color: var(--ink); display: block; }
.pick .d { font-size: 11.5px; font-weight: 300; color: var(--ink-3); line-height: 1.5; margin-top: 2px; display: block; }
.pick .r { margin-left: auto; text-align: right; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); white-space: nowrap; padding-left: 10px; }

.modbar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 11px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.modbar b { color: var(--ink); font-weight: 500; }

.linkbtn {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent-line);
  color: var(--accent-ink);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  padding: 1px 0;
}
.linkbtn:hover { border-bottom-color: var(--accent); }

/* -- stats --------------------------------------------------------------- */

.stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.stat > div { background: var(--surface); padding: 11px 13px; }
.stat .v {
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat .l { font-size: 10.5px; font-weight: 300; color: var(--ink-4); margin-top: 4px; line-height: 1.4; }
.stat .v.sg { color: var(--accent); }
.stat .v.am { color: var(--warn); }
.stat .v.rk { color: var(--ok); }

.tlist { display: flex; flex-wrap: wrap; gap: 5px; }
.tpill {
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-3);
  color: var(--ink-3);
}
.tpill.fed { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.tpill.rsk { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.note {
  padding: 10px 13px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-4);
  border-radius: var(--r);
  background: var(--surface);
}
.note b { color: var(--ink); font-weight: 500; }

/* -- theme cards --------------------------------------------------------- */

.thg { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 9px; }

.thc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .14s, box-shadow .14s;
}
.thc:hover { border-color: var(--line-3); box-shadow: var(--shadow); }
.thc.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.thc .hd { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line-2); }
.thc.on .hd { background: var(--accent-soft); }
.thc .nm { font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 9px; letter-spacing: -.02em; }
.thc .who { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.thc .by { padding: 9px 12px 11px; font-size: 11.5px; font-weight: 300; color: var(--ink-3); line-height: 1.6; }

.empty { color: var(--ink-4); font-size: 11.5px; font-weight: 300; padding: 12px 4px; line-height: 1.5; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Segmented control

   One object, not a row of loose buttons: mutually exclusive choices read as a
   single control. Used for the tracking mode, the climate-risk switch and the
   pillar tabs — same interaction, same widget, three places.
   ========================================================================== */

/* No `overflow-x: auto` here, and that is deliberate rather than an omission.
   CSS has no way to scroll one axis and overflow the other: setting overflow-x
   forces overflow-y to match, so this box became a scroll container in both
   directions. Two consequences, both bugs — it clipped its own labels instead of
   growing for them, and as a scroll container it lost its automatic minimum
   height, which let the stage's flex layout crush it (see `.stage > *`).

   Nothing is lost. The labels wrap inside their own segment now, so two or three
   choices fit any width down to a phone without a horizontal scrollbar that was
   also hidden — `scrollbar-width: none` on a scroller people were expected to
   scroll. */
.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 16px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.sgb {
  /* Basis 0 so the segments share the row equally regardless of label length —
     a segmented control whose halves are different widths reads as two buttons
     that happen to touch. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  align-items: flex-start;
  padding: 7px 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
  text-align: left;
  /* Wraps rather than nowrap: with basis 0 a long label had nowhere to go, so
     it ran past its own segment and under the next one. */
  white-space: normal;
  transition: background .12s, color .12s, box-shadow .12s;
}
.sgb:hover { color: var(--ink); }
.sgb.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow), inset 0 -2px 0 var(--accent);
}

.sgb .sgt { font-size: 12.5px; font-weight: 500; }
.sgb.on .sgt { font-weight: 600; }
.sgb .sgn { font-size: 10px; font-weight: 300; color: var(--ink-4); letter-spacing: .01em; }
.sgb.on .sgn { color: var(--accent-ink); }

.chips--pad { padding-top: 2px; }

/* Scope line on a risk data set — where the data exists at all. */
.opt .ot .scope {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.opt.on .ot .scope { color: var(--accent-ink); }

/* A scope line that is a sentence rather than a label. "PH ONLY" reads fine in
   letter-spaced caps; "RESERVES THE TAB. NO DATA UNTIL A SOURCE IS WIRED." is
   three lines of shouting, and it is the one line on that card someone has to
   actually read before ticking it. */
.opt .ot .scope--say {
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

/* ==========================================================================
   Configuration summary — step 5
   ========================================================================== */

.cfglist {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.cfg {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 13px;
  border-bottom: 1px solid var(--line-2);
}
.cfg:last-child { border-bottom: 0; }
.cfg:nth-child(even) { background: var(--surface-2); }

.cfl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cfv { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
/* An unset line is stated as unset rather than left blank — a blank row reads
   as "nothing to do here". */
.cfg[data-set="false"] .cfv { color: var(--ink-4); font-style: italic; }

.cfe {
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ink-4);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.cfe:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* -- current look -------------------------------------------------------- */

.lookrow {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lookmini {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sunk);
}
.lookmini.empty2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  font-size: 11px;
  color: var(--ink-4);
  border-style: dashed;
}
.lookmeta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lookname { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.lookby { font-size: 11.5px; font-weight: 300; color: var(--ink-3); line-height: 1.55; }
.cont.slim { margin: 6px 0 0; padding: 8px 15px; font-size: 11px; }

@container work (max-width: 620px) {
  .lookrow { grid-template-columns: 1fr; }
  .cfg { grid-template-columns: 1fr auto; }
  .cfl { grid-column: 1 / -1; }
}

/* ==========================================================================
   Launch panel — the last thing on step 5
   ========================================================================== */

.launch {
  margin-top: auto;
  padding: 18px 20px 20px;
  border: 1px solid var(--ok-line);
  border-radius: var(--r-lg);
  background: var(--ok-soft);
  box-shadow: var(--shadow);
}

.lhead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 15px; }
.lhead .eyebrow { color: var(--ok); }
.lh {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--ink);
}
.lby {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}

.lgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lfield { display: flex; flex-direction: column; gap: 4px; }
.llab {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lin {
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.lin::placeholder { color: var(--ink-4); }
.lin:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lhint { font-size: 10.5px; font-weight: 300; color: var(--ink-4); }

.lnote { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }
.lnote:empty { display: none; }
.lnote[data-state="err"] { color: var(--err); font-weight: 500; }
.lnote[data-state="ok"] { color: var(--ok); font-weight: 500; }

.launch .cont { margin-top: 14px; width: 100%; min-height: 46px; }

@container work (max-width: 560px) {
  .launch { padding: 14px; }
  .lgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Modal — the template gallery
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 44, .5);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  margin: auto;
  width: min(1000px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.modal__title {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
}
.modal__x {
  margin-left: auto;
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
}
.modal__x:hover { border-color: var(--ink-4); color: var(--ink); }

.modal__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 258px) minmax(0, 1fr);
}

.tmlist {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-2);
}
.tmlist::-webkit-scrollbar { width: 8px; }
.tmlist::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; border: 2px solid var(--surface-2); }

.tmi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  min-height: 52px;
}
.tmi:hover { background: var(--surface); border-color: var(--line); }
.tmi.on { background: var(--surface); border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.tmlist:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Thumbnail: the full-size wireframe scaled down, so the row and the preview
   are literally the same drawing. A separate simplified thumbnail would be a
   second thing to keep in step. */
.tmthumb {
  position: relative;
  width: 74px;
  height: 47px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--line-3);
  border-radius: 4px;
  background: var(--surface);
}
.tmthumb__in {
  position: absolute;
  top: 0;
  left: 0;
  width: 264px;
  height: 168px;
  transform: scale(0.28);
  transform-origin: top left;
  pointer-events: none;
}
.tmthumb .mk { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.tmi.on .tmthumb { border-color: var(--accent); }

.tmt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tmn { font-size: 13px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.tmcur {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  padding: 1px 5px;
}
/* Planned, not available. Stated on the row, on the preview and on the commit
   button — three places, because a disabled button on its own reads as a bug. */
.tmsoon {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: 3px;
  padding: 1px 5px;
}
.tmi.soon .tmn { color: var(--ink-2); }
.tmtag.soon { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }

/* .mk.mk--soon, not .mk--soon: the base .mk rule sets display:flex and is
   declared later in the file, so a single class would lose the tie-break and
   the label would sit left-aligned instead of centred. */
.mk.mk--soon {
  display: grid;
  place-items: center;
  border-style: dashed;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(23, 38, 43, .035) 7px 14px),
    var(--mk-bg);
}
.mk-soon {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* The thumbnail is drawn at 264px and scaled to 0.28, so its type has to be
   sized for the pre-scale canvas or it comes out unreadable. */
.mk--thumb .mk-soon { font-size: 30px; letter-spacing: .12em; }

.tmw {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmview { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
/* The list is what makes the dialog tall, so the preview takes the slack
   instead of leaving a void under the description. */
.tmstage {
  flex: 1;
  min-height: 230px;
  display: grid;
  padding: 18px;
  background:
    linear-gradient(0deg, var(--surface-3), var(--surface-3)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(23, 38, 43, .03) 6px 12px);
  border-bottom: 1px solid var(--line);
}
.tmfacts { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.tmh { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.028em; color: var(--ink); }
.tmb { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--ink-3); max-width: 62ch; }
.tmmeta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tmtag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

.modal__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.modal__hint { font-size: 11px; font-weight: 300; color: var(--ink-4); flex: 1; min-width: 160px; }

/* ==========================================================================
   Layout wireframes

   Built from the template's own layout/mode/accent, so a preview cannot drift
   away from what it claims to show. Deliberately abstract — it communicates the
   shape of the app, and abstract blocks cannot promise a feature that is not
   there the way a fake screenshot would.
   ========================================================================== */

/* height:100% so the wireframe fills the stage; min-height keeps it legible
   when the stage is short (the mini preview overrides both). */
.mk {
  height: 100%;
  min-height: 210px;
  --mk-bg: #f4f7f8;
  --mk-surface: #ffffff;
  --mk-line: #dfe8ea;
  --mk-ink: #c2cfd4;
  --mk-ink-2: #dce6e8;

  display: flex;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  background: var(--mk-bg);
  border: 1px solid var(--mk-line);
  overflow: hidden;
}
.mk[data-mode="dark"] {
  --mk-bg: #0d1b24;
  --mk-surface: #162833;
  --mk-line: #24404f;
  --mk-ink: #3c5a6b;
  --mk-ink-2: #223c4a;
}

/* The mini preview on the summary card: same wireframe, quarter scale. */
.mk--mini { height: 112px; min-height: 0; padding: 4px; gap: 3px; border: 0; border-radius: 0; }

.mk > * { min-width: 0; }
.mk-col { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.mk-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.mk-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; }

/* sidebar / icon rail */
.mk-side {
  width: 25%;
  max-width: 78px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 6px;
  border-radius: 5px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}
.mk-nl { height: 6px; border-radius: 3px; background: var(--mk-ink-2); }
.mk-nl:first-child { background: var(--mk-accent); width: 62%; }

.mk-rail {
  width: 26px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: 5px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}
.mk-ri { height: 14px; border-radius: 4px; background: var(--mk-ink-2); }
.mk-ri:first-child { background: var(--mk-accent); }

/* top bar */
.mk-top {
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}
.mk-pill { height: 6px; width: 30px; border-radius: 3px; background: var(--mk-ink-2); }
.mk-pill:first-child { background: var(--mk-accent); width: 40px; }
.mk-top--tabs { gap: 9px; }
.mk-tab { height: 6px; width: 34px; border-radius: 3px; background: var(--mk-ink-2); }
.mk-tab:first-child {
  background: var(--mk-accent);
  box-shadow: 0 7px 0 -5px var(--mk-accent);
}

/* content blocks */
.mk-tiles { display: flex; gap: 5px; flex-shrink: 0; }
.mk-tile {
  flex: 1;
  min-height: 42px;
  border-radius: 5px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-top: 2px solid var(--mk-accent);
}
.mk-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 5px; }
.mk-grid .mk-tile { min-height: 0; }

.mk-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.mk-row {
  height: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}

/* map-first */
.mk-map {
  flex: 1.5;
  border-radius: 5px;
  border: 1px solid var(--mk-line);
  background:
    radial-gradient(circle at 34% 42%, var(--mk-accent) 0 4.5px, transparent 4.5px),
    radial-gradient(circle at 58% 63%, var(--mk-accent) 0 4.5px, transparent 4.5px),
    radial-gradient(circle at 72% 34%, var(--mk-accent) 0 4.5px, transparent 4.5px),
    radial-gradient(circle at 46% 74%, var(--mk-ink) 0 3px, transparent 3px),
    repeating-linear-gradient(0deg, var(--mk-ink-2) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, var(--mk-ink-2) 0 1px, transparent 1px 18px),
    var(--mk-surface);
}
.mk-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* document with an outline */
.mk-doc { flex: 1; display: flex; gap: 5px; min-height: 0; }
.mk-outline { width: 30%; max-width: 92px; display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
.mk-ol { height: 5px; border-radius: 3px; background: var(--mk-ink-2); }
.mk-ol:first-child { background: var(--mk-accent); width: 70%; }
.mk-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  border-radius: 5px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}
.mk-line { height: 4px; border-radius: 2px; background: var(--mk-ink-2); }
.mk-line:first-child { background: var(--mk-accent); width: 46%; height: 6px; }
.mk-line:nth-child(5) { width: 72%; }
.mk-line:last-child { width: 58%; }

/* phone */
.mk--bottom { justify-content: center; }
.mk-phone {
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: 12px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
}
.mk-phone > .mk-top { height: 16px; border: 0; background: var(--mk-bg); }
.mk-phone > .mk-body { gap: 5px; }
.mk-card {
  flex: 1;
  border-radius: 5px;
  background: var(--mk-bg);
  border: 1px solid var(--mk-line);
  border-left: 2px solid var(--mk-accent);
}
.mk-bottom {
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 5px;
  background: var(--mk-bg);
  border: 1px solid var(--mk-line);
}
.mk-bi { width: 12px; height: 7px; border-radius: 3px; background: var(--mk-ink-2); }
.mk-bi:first-child { background: var(--mk-accent); }

/* ==========================================================================
   Pane tabs — phone and tablet only

   On a narrow screen the split view is a losing proposition: two 160px columns
   are worse than one usable one. Below the breakpoint only one panel is
   mounted and this bar switches between them, which is also why the switch
   lives in the DOM on every screen — it costs one hidden element and saves a
   second template.
   ========================================================================== */

.panetabs { display: none; }

.ptab {
  flex: 1 1 0;
  min-height: 48px;
  border: 0;
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.ptab[aria-selected="true"] {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 2px 0 var(--accent);
}

/* Something changed in the panel you are not looking at. Cleared when you
   open it — otherwise a turn that quietly rewrites the setup is invisible. */
.ptab .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity .16s;
}
.asm[data-work-dirty="true"] .ptab[data-pane="work"] .dot { opacity: 1; }

/* ==========================================================================
   Phone and tablet
   ========================================================================== */

@media (max-width: 900px) {
  .asm {
    /* dvh, not vh: on mobile Safari and Chrome vh is the *largest* viewport, so
       100vh puts the composer behind the browser's own toolbar. */
    height: 100dvh;
    font-size: 14px;
  }

  .bar { height: 52px; padding: 0 12px; gap: 10px; }
  .bar .logo { height: 17px; }
  /* The library counters and the section eyebrow are the first things to go —
     neither is why anyone opened the page on a phone. */
  .bar .eyebrow, .bar .div, .bar .meta { display: none; }
  .bar .sp { gap: 14px; }

  .body { min-height: 0; }
  .resizer { display: none; }

  /* One pane at a time. display:none rather than visibility so the hidden
     pane's scroll position and any GL canvas survive the switch. */
  .chatrail {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    border-right: 0;
  }
  .work { border-left: 0; }
  .asm[data-pane="chat"] .work,
  .asm[data-pane="work"] .chatrail { display: none; }

  .panetabs {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    /* Clears the iPhone home bar. Zero on everything else. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--surface);
  }

  .chathead { padding: 8px 14px; }
  .chathead__hint { display: none; }
  .log { padding: 13px 14px 6px; gap: 12px; }
  .msg.u { max-width: 92%; }
  .turnmeter { padding: 6px 14px; }
  .turnmeter .pip { width: 8px; }
  .compose { padding: 9px 14px 11px; }
  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  .compose textarea { font-size: 16px; padding: 10px; }
  .send { min-height: 46px; padding: 12px; }
  .seed { font-size: 12px; padding: 8px 13px; }

  .rail { padding: 7px 10px; gap: 0; scroll-snap-type: x proximity; }
  .st { min-width: 138px; flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }

  .stage { padding: 14px 12px 18px; }
  .h2 { font-size: 18px; }
  /* min-width:auto on a flex item is what lets a wide child stretch the
     column past the viewport; the panes must be free to shrink. */
  .work, .chatrail { min-width: 0; }
  .sub { font-size: 12px; margin-bottom: 13px; }

  /* Touch targets. A 28px-high pill is a coin toss with a thumb. */
  .chip { min-height: 38px; padding: 8px 13px; font-size: 12.5px; }
  .pick { padding: 11px 12px; }
  .act { min-height: 30px; }
  .site .acts { gap: 14px; }
  .hit { min-height: 34px; display: inline-flex; align-items: center; }

  .gate { padding: 10px 12px; gap: 10px; }
  .gate .cont {
    min-height: 46px;
    width: 100%;
    margin-left: 0;
    /* nowrap here would make this label the page's minimum width. */
    white-space: normal;
  }
  .gatemsg { width: 100%; }

  /* A tablet still has room for two or three cells; only a phone does not.
     auto-fit with a 240px floor resolves to 1 column at 390px and 3 at 820
     without a second breakpoint. */
  .stat { grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); }
  .optgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* The gallery stacks: preview on top, the list a horizontal strip beneath.
     A 258px list column beside a preview leaves neither enough room. */
  /* Height from the content, not the screen: a full-height panel left a void
     between the description and the thumbnail strip. */
  .modal__panel { width: 100%; max-height: 100dvh; border-radius: 0; }
  .modal__body { grid-template-columns: 1fr; grid-template-rows: minmax(0, auto) auto; }
  .tmview { order: 1; }
  .tmlist {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 1px solid var(--line);
    scroll-snap-type: x proximity;
  }
  .tmi { flex: 0 0 auto; width: 206px; scroll-snap-align: start; }
  /* On a phone the preview must not eat the screen: fixed height, so the
     description and the thumbnail strip both stay visible without scrolling. */
  .tmstage { flex: 0 0 auto; padding: 12px; min-height: 0; }
  .mk { height: 196px; min-height: 0; }
  .tmthumb .mk { height: 100%; }
  .modal__foot .cont { flex: 1; min-height: 46px; }
  .seg { margin-bottom: 13px; }
  .sgb { padding: 8px 12px; min-height: 44px; }
}

/* Phones proper — the two-column stat grid and the wide select stop paying. */
@media (max-width: 560px) {
  .stat { grid-template-columns: 1fr 1fr; }
  .fork, .thg, .optgrid { grid-template-columns: 1fr; }
  select.ind, input.txt { min-width: 0; width: 100%; font-size: 16px; }
  .mapbar { flex-wrap: wrap; }
  .mapbar .eyebrow { width: 100%; }
  .mapbar input { margin-left: 0; font-size: 16px; }
  .tgrid { grid-template-columns: 1fr; }
  .modbar { font-size: 11px; }
}

/* A pointer that cannot hover should not reserve hover styling, and a coarse
   pointer needs the rail to be swipeable rather than precise. */
@media (hover: none) {
  .st:not(.locked):hover { background: var(--surface-3); }
  .st.done:not(.locked):hover { background: var(--ok-soft); }
  .rail { -webkit-overflow-scrolling: touch; }
}

/* Landscape phone: vertical space is the scarce resource. */
@media (max-width: 900px) and (max-height: 480px) {
  .bar { height: 44px; }
  .chathead, .turnmeter { display: none; }
  .mapsvg, .mapgl { min-height: 0; max-height: 46dvh; }
  .sitecol { height: 220px; }
}

/* ==========================================================================
   Step 3 — what is left of the CRA panel

   The scores, the component bars and the band scale moved to the platform with
   the data they described; this page no longer draws a number. What stays is
   the warming pathway, which is configuration — it scales the climate component
   and so changes the figures the platform is built with — and the pill a
   not-yet-wired domain wears.
   ========================================================================== */

.craseg { margin-bottom: 14px; }
.navnote + .craseg { margin-top: 16px; }
.craseg .eyebrow { display: block; margin-bottom: 5px; }

.crapill {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunk);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- financial exposure: the figures, not the result ---------------------- */

/* One collapsible row per site. A disclosure, not a link: it opens a form
   rather than going anywhere, and the state on the right is the thing a reader
   scans for — which of my sites still needs figures. */
.crafins { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.crafins .navpick__h { margin-bottom: 4px; }

.crafin {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.crafin__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.crafin__toggle:hover { background: var(--surface-2); }
.crafin__site {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crafin__state {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.crafin__state[data-state="empty"] { background: var(--sunk); color: var(--ink-4); }
.crafin__state[data-state="part"]  { background: #fdf5e6; color: #8a5a06; }
.crafin__state[data-state="ready"] { background: var(--accent-soft); color: var(--accent-ink); }

.crafin__body { padding: 0 13px 13px; border-top: 1px solid var(--line-2); }
.crafin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .crafin__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The Risk Navigator — step 3

   Two levels of tabs (domain, then mode) over one set of pickers. Both tab
   rows reuse `.seg` / `.sgb`, because they are the same interaction as the
   tracking-mode switch and the pillar tabs — a third bespoke tab style would
   make the page look assembled from parts.

   The pickers below them are chips rather than a third row of segments: a
   segmented control means "one of these", and sites are "any number of
   these". Same rounded vocabulary, different affordance.
   ========================================================================== */

.navlede {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-3);
}

.navbody { margin-top: 14px; }

.navmode__b {
  margin: 10px 0 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-3);
}

.navsrc {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink-4);
}
p.navsrc { margin: 10px 0 0; }

/* --- a domain with no source yet ------------------------------------------
   Deliberately quiet. It is a placeholder, and dressing a placeholder up as a
   feature is how a customer ends up believing they bought one. */
.navplan {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--sunk);
}
.navplan__h { display: flex; align-items: center; gap: 12px; }
.navplan__h h4 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.navplan__b {
  margin: 8px 0 12px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-3);
}

.navpick { margin-bottom: 12px; }
.navpick__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.navpick__h .eyebrow { flex: 1 1 auto; }

.navcap {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.navchips { display: flex; flex-wrap: wrap; gap: 6px; }

.navchip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.navchip:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.navchip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 500;
}
.navchip:disabled { cursor: not-allowed; opacity: .55; }
/* An out-of-coverage site is shown, not hidden: someone who placed a pin in
   Cambodia should see why it is absent from the comparison. */
.navchip.off { background: var(--sunk); color: var(--ink-4); }
.navchip__t { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navchip__x {
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.navnote {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-4);
}

@media (max-width: 760px) {
  .navchip__t { max-width: 130px; }
}

/* What this view becomes once the platform exists. The builder shows no data,
   so the one thing it owes the reader is a plain sentence about where the data
   will be. */
.navout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 13px;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--accent-soft);
}
.navout__k {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.navout__v { font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 760px) {
  .navout { flex-direction: column; gap: 4px; }
}