/* Plotter — Operate-mode design system.
 *
 * Dark chrome, deliberately: the stock is a product decision (white paper with
 * a black or blue pen, or black paper with a white pen), so the sheet renders in
 * its real colour and the chrome has to sit neutrally around both. A light UI
 * would fight a black page; dark holds either.
 *
 * One family, fixed rem scale, restrained colour. Amber accent because it can
 * never be mistaken for a pen colour. */

:root {
  --bg: #0e1013;
  --surface: #16191e;
  --raised: #1c2027;
  --line: #262b33;
  --line-strong: #333a45;

  --ink: #eceef2;
  --ink-2: #a2abba;
  --ink-3: #6f7987;

  --accent: #f2b23c;
  --accent-ink: #1a1405;
  --accent-dim: #6a4f16;
  --danger: #f0808f;

  --r-sm: 6px;
  --r: 9px;
  --r-lg: 14px;

  --t: 170ms cubic-bezier(.2,.7,.3,1);
  --panel-w: 348px;
  --topbar-h: 56px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
  accent-color: var(--accent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--accent); color: var(--accent-ink); }

/* The `hidden` attribute sets `display: none` at the lowest possible precedence,
   so any class rule that sets `display` silently defeats it — which is every
   flex row in this file. Cheaper to make the attribute win once than to remember
   it at each call site. */
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--surface);
}
::-webkit-scrollbar-track { background: transparent; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: relative; z-index: 20;
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.mark {
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--accent);
  /* A plotted mark: two pen strokes crossing. */
  mask: repeating-linear-gradient(48deg, #000 0 2px, transparent 2px 4px);
  -webkit-mask: repeating-linear-gradient(48deg, #000 0 2px, transparent 2px 4px);
}
.wordmark {
  font-size: 14px; font-weight: 620; letter-spacing: -0.015em;
}

.topbar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* -------------------------------------------------------------- step rail */

.steps { display: flex; align-items: center; gap: 2px; min-width: 0; }
body.is-start .steps,
body[data-mode="advanced"] .steps { display: none; }

.step {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 13px; border-radius: 99px;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.step:hover:not(:disabled) { color: var(--ink-2); background: var(--raised); }
.step[aria-current="true"] { color: var(--ink); background: var(--raised); }
.step:disabled { opacity: .38; cursor: default; }

.step .n {
  width: 19px; height: 19px; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  background: var(--line); color: var(--ink-3);
  transition: background var(--t), color var(--t);
}
.step[aria-current="true"] .n { background: var(--accent); color: var(--accent-ink); }
.step.done .n { background: var(--accent-dim); color: var(--accent); }

/* ------------------------------------------------------------------ layout */

main {
  display: flex;
  height: calc(100% - var(--topbar-h));
  min-height: 0;
}

.stage {
  position: relative; flex: 1; min-width: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #191d24 0%, var(--bg) 62%);
}

#view {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; touch-action: none;
  cursor: grab;
}
#view:active { cursor: grabbing; }
body[data-tool="outline"] #view { cursor: crosshair; }
body[data-tool="mask"] #view,
body[data-tool="erase"] #view { cursor: crosshair; }
#view.near-divider { cursor: ew-resize; }
body.is-start #view { display: none; }

/* ------------------------------------------------------------------- empty */

.empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
body:not(.is-start) .empty { display: none; }

.empty-card {
  max-width: 30rem; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(28px, 6vw, 52px) clamp(20px, 5vw, 44px);
  background: #14171bcc;
  transition: border-color var(--t), background var(--t);
}
body.dragging .empty-card { border-color: var(--accent); background: #1b1a14cc; }

.empty-card h1 {
  margin: 0 0 10px; font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 620; letter-spacing: -0.022em; line-height: 1.2;
  text-wrap: balance;
}
.empty-card p { margin: 0 auto 22px; max-width: 34ch; color: var(--ink-2); }
.empty-card .micro { margin: 14px 0 0; }

.micro { font-size: 12px; color: var(--ink-3); }

/* --------------------------------------------------------------------- hud */

.hud {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 6;
}
.hud-tools {
  display: flex; gap: 3px; padding: 4px;
  background: #14171bf2; border: 1px solid var(--line);
  border-radius: 99px;
  box-shadow: 0 8px 26px -8px #000c;
  backdrop-filter: blur(10px);
}
.tool {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border: 0; border-radius: 99px;
  background: none; color: var(--ink-2); font: inherit; font-size: 13px;
  cursor: pointer; transition: background var(--t), color var(--t);
}
.tool:hover { color: var(--ink); background: var(--raised); }
.tool[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 550; }
/* The wand runs rather than arms, so it needs a working state instead of a
   pressed one. */
.tool[aria-busy="true"] { color: var(--ink); background: var(--raised); }

.tool[aria-busy="true"] .icon { animation: tool-pulse .9s ease-in-out infinite; }
@keyframes tool-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .tool[aria-busy="true"] .icon { animation: none; opacity: .5; }
}
.tool .icon { width: 16px; height: 16px; }

/* The step's primary action, and the answer to "what do I do here". It is a
   labelled button in the pane rather than an icon in the tool bar because it is
   an action among modes: there is nothing to be in the middle of. */
.primary-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 16px; margin: 0 0 10px;
  font: inherit; font-weight: 550; font-size: 15px;
  color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 10px; cursor: pointer;
}
.primary-action:hover { filter: brightness(1.06); }
.primary-action .icon { width: 17px; height: 17px; }
.primary-action[aria-busy="true"] { opacity: .7; cursor: progress; }
.primary-action[aria-busy="true"] .icon { animation: tool-pulse .9s ease-in-out infinite; }
.primary-action:disabled { opacity: .45; cursor: default; }
/* The sparkle reads as a mark rather than an outline, so it is filled where
   every other icon in the set is stroked. */
.icon .filled, #i-sparkle path { fill: currentColor; stroke: none; }

/* ----------------------------------------------------------------- working
 * An indeterminate bar rather than a spinner over the content: the previous
 * drawing stays readable and comparable while the next one is computed, which
 * is the whole point of looking at it. */

.working {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  z-index: 8; pointer-events: none;
  overflow: hidden;
  opacity: 0; transition: opacity 120ms linear;
}
.working.on { opacity: 1; }
.working::after {
  content: ''; position: absolute; inset: 0;
  width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep-bar 900ms cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sweep-bar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .working::after {
    width: 100%; animation: none;
    background: var(--accent-dim);
  }
}

/* --------------------------------------------------------------- statusbar */

.statusbar {
  /* Top-left, not bottom-left: the tool bar owns the bottom centre and the two
     collided, clipping the message that explains what just went wrong. */
  position: absolute; left: 12px; top: 12px; margin: 0;
  max-width: min(48ch, calc(100% - 24px));
  padding: 5px 10px; border-radius: var(--r-sm);
  background: #0d0f12e6; border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
  pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity var(--t);
}
.statusbar.on { opacity: 1; }
.statusbar.err { color: var(--danger); border-color: #48282e; white-space: normal; }

/* ------------------------------------------------------------------- panel */

.panel {
  width: var(--panel-w); flex: none;
  background: var(--surface);
  border-left: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
body.is-start .panel { display: none; }

body[data-mode="guided"] [data-view="advanced"],
body[data-mode="advanced"] [data-view="guided"] { display: none; }

.guided { display: flex; flex-direction: column; min-height: 100%; }

.pane { padding: 20px 18px; border-bottom: 1px solid var(--line); }
.guided .pane { display: none; }
/* Panes key on the source as well as the step: a map has three steps and a
   photo has four, and a pane shared by both carries both names. Two do — the
   sheet-and-pen pane on Style and the Result pane — which is why a step can put
   more than one pane on screen, in document order. The shared pane is written
   above the per-source ones so the sheet is always the first thing on Style. */
body[data-source="photo"][data-step="0"] .pane[data-pane~="photo:0"],
body[data-source="photo"][data-step="1"] .pane[data-pane~="photo:1"],
body[data-source="photo"][data-step="2"] .pane[data-pane~="photo:2"],
body[data-source="photo"][data-step="3"] .pane[data-pane~="photo:3"],
body[data-source="map"][data-step="0"] .pane[data-pane~="map:0"],
body[data-source="map"][data-step="1"] .pane[data-pane~="map:1"],
body[data-source="map"][data-step="2"] .pane[data-pane~="map:2"],
body[data-source="mountain"][data-step="0"] .pane[data-pane~="mountain:0"],
body[data-source="mountain"][data-step="1"] .pane[data-pane~="mountain:1"],
body[data-source="mountain"][data-step="2"] .pane[data-pane~="mountain:2"],
body[data-source="blueprint"][data-step="0"] .pane[data-pane~="blueprint:0"],
body[data-source="blueprint"][data-step="1"] .pane[data-pane~="blueprint:1"],
body[data-source="blueprint"][data-step="2"] .pane[data-pane~="blueprint:2"] { display: block; }

.pane h2 {
  margin: 0 0 7px; font-size: 16px; font-weight: 600;
  letter-spacing: -0.017em;
}
.advanced .pane h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .085em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 13px;
}
.lede { margin: 0 0 18px; color: var(--ink-2); font-size: 13px; }

section.hide { display: none !important; }

/* ------------------------------------------------------------------ fields */

.field { display: block; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 7px;
  font-size: 12px; color: var(--ink-2);
}
output {
  font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink); font-weight: 500;
}
.hint { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: none; cursor: grab;
}
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 99px; background: var(--line-strong);
}
input[type=range]::-moz-range-track {
  height: 3px; border-radius: 99px; background: var(--line-strong);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -6px;
  border-radius: 99px; background: var(--ink); border: 0;
  box-shadow: 0 1px 3px #0009;
  transition: background var(--t), transform var(--t);
}
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 99px;
  background: var(--ink); box-shadow: 0 1px 3px #0009;
}
input[type=range]:hover::-webkit-slider-thumb { background: var(--accent); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); background: var(--accent); }
input[type=range]:hover::-moz-range-thumb { background: var(--accent); }

select {
  width: 100%; padding: 8px 10px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 13px;
}

.check {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 14px; font-size: 13px; color: var(--ink);
  cursor: pointer; user-select: none;
}
.check input { width: 15px; height: 15px; margin: 0; flex: none; }

/* ------------------------------------------------------------------ chips */

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 6px 11px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--raised);
  color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
  display: inline-flex; align-items: center; gap: 7px;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 550;
}
.chip .dot {
  width: 11px; height: 11px; border-radius: 99px; flex: none;
  border: 1px solid #0006;
  background: linear-gradient(135deg, var(--paper) 0 50%, var(--pen) 50% 100%);
}
/* Two pens, so the chip shows both inks over the paper: paper, pale, dark. */
.chip .dot-2 {
  background: linear-gradient(135deg,
    var(--paper) 0 34%, var(--pen2) 34% 67%, var(--pen) 67% 100%);
}

/* A colour chip is the swatch, with no name beside it. Naming a colour costs a
   word and a read to say less than the square already does, and the row of them
   is then scannable as colour rather than as text. The name survives as the
   accessible name and the tooltip, so nothing is lost where it is needed. */
.chip-swatch {
  padding: 0; gap: 0;
  width: 34px; height: 34px; border-radius: 10px;
  /* The swatch supplies its own edge; the chip's would double it. */
  border: 0;
}
.chip-swatch[aria-checked="true"] {
  background: none;
  /* A ring rather than a fill: the fill IS the option here, so the usual
     selected-chip treatment would paint over the thing being chosen. Two rings,
     the inner one the panel's own colour, so the marker reads against a dark
     swatch and a white one alike. */
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.chip-swatch:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-3); }
.chip-swatch[aria-checked="true"]:hover {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.chip-swatch .dot {
  width: 100%; height: 100%; border-radius: inherit;
  /* Keeps a white-on-white swatch from vanishing into the panel. */
  border: 1px solid #0000001f;
}
/* Swatches sit in a row of their own, so they get room the text chips do not. */
#stocks { gap: 9px; padding-top: 2px; }

/* ---------------------------------------------------------------- legend */

.legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: 12px; color: var(--ink-2);
}
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.swatch.keep { background: transparent; border: 1.5px solid var(--ink-2); }
.swatch.drop { background: #e84a6099; }
.legend .swatch:not(:first-child) { margin-left: 6px; }

/* ---------------------------------------------------------------- presets */

.presets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  margin-bottom: 18px;
}
.preset {
  position: relative; padding: 0; overflow: hidden; line-height: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--raised); cursor: pointer;
  transition: border-color var(--t), transform var(--t);
}
.preset canvas { width: 100%; display: block; }
.preset:hover { border-color: var(--ink-3); }
.preset[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.preset .cap {
  position: absolute; inset: auto 0 0 0;
  padding: 5px 7px 6px; text-align: left;
  /* A strip, not a tall gradient: the gradient was covering the third of the
     thumbnail that shows how the shading actually reads. */
  background: #0b0d10e6;
  border-top: 1px solid #ffffff14;
  line-height: 1.2;
}
.preset .cap b { display: block; font-size: 11.5px; font-weight: 600; color: #fff; }
.preset .cap span { font-size: 10.5px; color: #ffffffa6; font-variant-numeric: tabular-nums; }

.skel {
  aspect-ratio: 4 / 3; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--raised);
  position: relative; overflow: hidden;
}
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff0f, transparent);
  animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ---------------------------------------------------------------- readout */

.readout { margin: 0 0 16px; }
.readout div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.readout div:last-child { border-bottom: 0; }
.readout dt { color: var(--ink-2); }
.readout dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.readout .hero dd { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- buttons */

button { font: inherit; cursor: pointer; }

.primary, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 520;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}
.primary:hover:not(:disabled) { background: #f7c057; }
.ghost { background: var(--raised); color: var(--ink-2); border-color: var(--line-strong); }
.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); }
.ghost[aria-pressed="true"] { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }
.primary:disabled, .ghost:disabled { opacity: .42; cursor: default; }
.wide { width: 100%; }
.lg { padding: 12px 20px; font-size: 14px; }
.sm { padding: 7px 11px; font-size: 12.5px; }
.row { display: flex; gap: 6px; margin-bottom: 12px; }
.row > * { flex: 1; }

/* ----------------------------------------------------------------- pager */

.pager {
  margin-top: auto; position: sticky; bottom: 0;
  display: flex; gap: 8px; padding: 14px 18px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(#16191e00, var(--surface) 34%);
  border-top: 1px solid var(--line);
}
.pager .primary { flex: 1; }
.pager .ghost { flex: 1; }
.pager .primary[hidden], .pager .ghost[hidden] { display: none; }

/* ------------------------------------------------------------------- more */

.more { margin-bottom: 16px; }
.more summary {
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  padding: 7px 0; list-style: none; display: flex; align-items: center; gap: 7px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: ''; width: 5px; height: 5px; flex: none;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t);
}
.more[open] summary::before { transform: rotate(45deg); }
.more summary:hover { color: var(--ink); }
.more > .field:first-of-type { margin-top: 10px; }

/* -------------------------------------------------------------- responsive
 * Mobile first in behaviour: below 860px the panel becomes a bottom sheet and
 * the canvas keeps the majority of the viewport, because the photo is the thing
 * being judged. */

@media (max-width: 860px) {
  :root { --topbar-h: 52px; }

  .topbar { padding: 0 8px 0 12px; gap: 8px; }
  .label-wide { display: none; }
  .topbar-end .ghost { padding: 8px; }

  /* The rail collapses to dots plus the current label. */
  .steps { gap: 0; margin-left: auto; }
  .step { padding: 6px 5px; }
  .step .t { display: none; }
  .step[aria-current="true"] .t { display: inline; }

  main { flex-direction: column; }

  .stage { flex: 1 1 auto; min-height: 0; }

  .panel {
    width: 100%; flex: 0 0 auto;
    max-height: 52dvh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -14px 34px -18px #000c;
  }

  .pane { padding: 16px 15px; }
  .presets { grid-template-columns: 1fr 1fr 1fr; }
  .hud { bottom: 12px; }
  .hud-tools { padding: 3px; }
  .tool { padding: 9px 11px; }
  /* Icon-only would leave five unlabelled glyphs and no way to learn which is
     which. Labelling the selected one names it as you tap through, and only
     costs the width of one word. */
  .tool .t { display: none; }
  .tool[aria-pressed="true"] .t { display: inline; }
  .statusbar { left: 8px; right: 8px; top: 8px; max-width: none; }
}

@media (max-width: 420px) {
  .presets { grid-template-columns: 1fr 1fr; }
  .panel { max-height: 56dvh; }
}

/* Wide monitors: let the panel breathe rather than stretching the canvas alone. */
@media (min-width: 1500px) {
  :root { --panel-w: 392px; }
  .pane { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}


/* ---------------------------------------------------------------- sources */
/* Segmented control: two mutually exclusive things to plot, shown as one
   object rather than two buttons, because picking one un-picks the other. */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #00000030;
}

.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.seg button:hover { color: var(--ink); }

.seg button[aria-checked="true"] {
  background: var(--raised);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.seg .icon { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .seg button span { display: none; }
  .seg button { padding: 6px 8px; }
}

/* ---------------------------------------------------- empty-state choices */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
  text-align: left;
}

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

.choice {
  display: grid;
  gap: 4px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}

.choice:hover {
  border-color: var(--accent);
  background: #ffffff12;
  transform: translateY(-1px);
}

.choice .icon {
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
  color: var(--accent);
}

.choice b { font-size: 15px; font-weight: 650; }
.choice span { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.choice em {
  color: var(--ink-3);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.4;
}

/* ------------------------------------------------------------ place search */
.search { display: flex; gap: 8px; margin: 0 0 8px; }

.search input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #00000038;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.search input:focus {
  border-color: var(--accent);
  outline: none;
}

.search input::-webkit-search-cancel-button { filter: invert(0.7); }

.search button { padding: 10px 13px; }

/* Geocoders return several plausible answers for one query, and which of them
   was meant is the user's call, not ours. Only shown when there is more than
   one, so the common case stays a single field and a single press. */
.results {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}

.results button {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff06;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.results button:hover { border-color: var(--accent); color: var(--ink); }
.results button[aria-checked="true"] { color: var(--ink); border-color: var(--accent); }
.results button b { display: block; font-weight: 620; font-size: 13px; }

.zoomrow { display: flex; align-items: center; gap: 8px; }
.zoomrow input[type="range"] { flex: 1; min-width: 0; }

.credit { color: var(--ink-3); }

/* The tool bar is the photo's: outline, brush, erase all act on a mask, and a
   map has none. Panning a map is a drag, not a mode. */
body[data-source="map"] .hud { display: none; }

/* --------------------------------------------------------- poster fields */
.field input.text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #00000038;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.field input.text:focus { border-color: var(--accent); outline: none; }

/* The three text lines only exist when there is a block to put them in. */
body:not(.poster-on) #poster-fields,
body:not(.poster-on) #relief-fields,
body:not(.poster-on) #blueprint-fields { display: none; }

/* ------------------------------------------------------------------ peaks */

/* Eighteen names in a list is a reading task, and the names are not the thing
   being chosen — the shape is. Each card draws the peak's own contours, so the
   picker is scanned as eighteen small drawings with labels rather than as a
   menu. The height came off the card with the same reasoning: it is a fact about
   the mountain, not a way to tell two of them apart by eye, and it is on the
   finished sheet anyway. */
#subjects,
.peaks {
  display: grid; gap: 8px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.peak {
  display: grid; gap: 0; text-align: left; padding: 0; overflow: hidden;
  border-radius: var(--r-sm); cursor: pointer;
  background: var(--raised); border: 1px solid var(--line-strong);
  color: var(--ink-2); font: inherit;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.peak:hover { color: var(--ink); border-color: var(--ink-3); }
.peak[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.peak canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border-bottom: 1px solid var(--line);
}
.peak[aria-checked="true"] canvas { border-bottom-color: #0002; }
.peak .name { padding: 6px 8px 7px; display: grid; gap: 1px; }
.peak b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.peak span { font-size: 10.5px; opacity: .75; line-height: 1.25; }
.peak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A map card carries its own title block, drawn into the sheet, and an overlaid
   caption lands squarely on top of it. Photo thumbnails are landscape with
   nothing at the bottom edge worth reading, so they keep the overlay; a poster
   sets its caption underneath instead. */
#map-styles .preset { line-height: normal; }

#map-styles .preset .cap {
  position: static;
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 6px 8px 7px;
}

#map-styles .preset .cap b { color: var(--ink); }
#map-styles .preset .cap span { color: var(--ink-2); }

/* Attribution links. Underlined rather than merely coloured, because the whole
   point is that the licence is reachable — a credit line the eye reads as flat
   grey text is not obviously clickable. */
.credit a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}

.credit a:hover,
.credit a:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

/* The turntable's reset. Full width and quiet: it is a way back rather than a
   thing to do, and it must not compete with the pager's Next. */
#view-reset {
  width: 100%; margin: 2px 0 10px; font-size: 12.5px; padding: 8px 10px;
}

/* ------------------------------------------------------------------ views */

/* One row per cell on the sheet, each a small set of direction chips. A grid of
   six buttons per cell would be a wall; the cell's own index and its current
   direction are what the reader needs, so the row leads with the index. */
.views { display: grid; gap: 6px; margin-bottom: 10px; }
.view-row { display: flex; align-items: center; gap: 6px; }
.view-row > b {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  width: 14px; text-align: right; flex: none;
}
.view-row .chips { flex: 1; gap: 4px; }
.view-row .chip { padding: 4px 7px; font-size: 11px; }

/* The layout chips carry a diagram rather than a word: the arrangement is the
   thing being chosen, and "2 stacked" is slower to read than a picture of it. */
#bp-layout .chip { display: flex; align-items: center; gap: 6px; }
#bp-layout .lay {
  display: grid; gap: 1.5px; width: 15px; height: 15px; flex: none;
}
#bp-layout .lay i { background: currentColor; opacity: .55; border-radius: 1px; }
#bp-layout .chip[aria-checked="true"] .lay i { opacity: 1; }