/* metaBOX tools - design tokens.
   Dark values are declared twice on purpose: the media query follows the OS,
   the [data-theme] scope follows the in-page toggle, and the toggle wins both
   ways. Colours come from a validated palette; status hues are fixed and are
   always paired with an icon and a text label, never used on their own. */
:root {
  color-scheme: light;

  --surface-0: #f4f3f0;
  --surface-1: #fcfcfb;
  --surface-2: #f0efec;
  --surface-sunken: #e8e7e3;
  --border: #d9d8d3;
  --border-strong: #b9b8b2;

  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #7a7974;

  --accent: #be2b26;
  --accent-soft: #f8d7d5;
  --accent-ink: #8a1d19;

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(11 11 11 / 6%), 0 4px 12px rgb(11 11 11 / 4%);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- header ---------- */

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 12px 16px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
/* The brand is the way back to the other tools, so it is a link - but it is
   still the page's heading, and a heading does not want a link's underline. */
a.brand { color: inherit; text-decoration: none; }
a.brand:hover .mode-name { color: var(--accent); }
.brand-mark {
  width: 138px;
  height: auto;
  flex: none;
  display: block;
}
/* Which of the tools this is. The name of the suite is the h1 above it, so
   this is the line that actually tells you where you are. */
.brand-text .mode-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.brand-text .tagline {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ---------- the front door ---------- */

/* Three tools, side by side where there is room and stacked where there is
   not. Each is one target: the whole card is the link, not a button inside it. */
.tool-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tool-card > a {
  display: grid;
  gap: 14px;
  align-content: start;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.tool-card > a:hover,
.tool-card > a:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgb(11 11 11 / 8%);
  transform: translateY(-2px);
}
.tool-art {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: 10px;
}
.tool-art img { display: block; width: 100%; height: auto; }
.tool-text { display: grid; gap: 6px; }
.tool-text strong { font-size: 1.12rem; }
.tool-text span { font-size: 0.86rem; color: var(--text-secondary); }
.home-note { margin-top: 20px; }
.home-note b { color: var(--text-primary); font-weight: 650; }

/* Nothing is sticky on a page this short, and the header has no controls in
   it to keep within reach. */
.home-page .masthead { position: static; }

/* ---------- controls ---------- */

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.segmented button,
.segmented a {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 11px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.segmented button + button,
.segmented a + a { border-left: 1px solid var(--border-strong); }
/* The mode switch is links rather than buttons, so it navigates without
   JavaScript and middle-clicks into a new tab like any other link. */
.segmented button[aria-pressed="true"],
.segmented a[aria-current="page"] {
  background: var(--text-primary);
  color: var(--surface-1);
  font-weight: 600;
}
.segmented a:hover:not([aria-current="page"]) { color: var(--text-primary); }

.control-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

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

/* One rhythm throughout: the gap under the masthead, between sections and
   between result cards is the same 12px.

   main.wrap, not main: the element carries class="wrap", and .wrap's own
   padding outranks a bare element selector whatever the order, so this rule
   never applied - the first panel sat flush against the masthead and the page
   ended without a foot. Matching .wrap's specificity makes it apply, and the
   16px at the sides is .wrap's, repeated here because the shorthand sets all
   four. */
main.wrap { padding: 12px 16px 64px; }

section + section { margin-top: 12px; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head p { color: var(--text-secondary); font-size: 0.85rem; }
/* Hard right of the heading row. */
.section-head .section-actions { margin-left: auto; }

/* ---------- the form ---------- */

/* The actions sit to the right of the fields rather than under them: the row
   of inputs is short and the panel is wide, so a line of its own was mostly
   empty space. flex-end lines the buttons up with the inputs, not with the
   labels above them. */
form.finder { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
/* A fieldset's min-inline-size is min-content by default, which would stop it
   shrinking and push the actions off the end instead of letting them wrap. */
form.finder > fieldset { flex: 0 1 auto; min-inline-size: 0; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; font-weight: 650; font-size: 0.95rem; margin-bottom: 8px; }

.dims { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.field { display: flex; flex-direction: column; min-width: 0; }
/* The class rule above outranks the browser's own [hidden], so a field
   that is switched off has to be told again. */
.field[hidden] { display: none; }
.field input[type="number"], .field select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
}
.field.dim { width: 108px; }
.field.clearance { width: 150px; }
.times { padding-bottom: 9px; color: var(--text-muted); font-size: 0.9rem; }

.filter-legend { margin-bottom: 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.87rem; }
/* A class rule outranks the UA's own [hidden], so both need saying. */
.check[hidden] { display: none; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

/* Hard right of the panel. The group is right-aligned, so when the copy
   button answers on itself and its label shortens, only its own left edge
   moves - Reset stays where the cursor left it. */
.form-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-inline-start: auto;
}

button.btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
button.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.btn:hover { filter: brightness(0.97); }

.hint { font-size: 0.8rem; color: var(--text-muted); }

/* A file input dressed as a button - Open project, Picture - so it sits in a
   row of buttons as one of them. The label is what is clicked; the input is
   kept over it, unseen, for the keyboard and for the tests. */
.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
}
.button-row .file-button { flex: 1; padding: 6px 0; }
.file-button:hover { border-color: var(--accent); color: var(--accent); }
.file-button input[type="file"] {
  position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 0;
}
.file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}
.stat { background: var(--surface-1); padding: 12px 14px; }
.stat dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.stat dd {
  margin: 2px 0 0;
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat dd small { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); }

/* ---------- result cards ---------- */

.results { display: grid; gap: 12px; margin-top: 12px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 18px;
  align-items: start;
}
.card.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* The name comes first in the markup so the card reads in a sensible order;
   the visuals are placed back into the left column here. The render sits
   BESIDE the drawing, not above it: the render is wide and flat and the
   drawing is tall, so stacking them cost the card the height of both for no
   gain. Side by side, the card is a third shorter. */
.card > .card-visual {
  grid-column: 1; grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.card > .card-body { grid-column: 2; grid-row: 1; }

.card-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }

.thumb { display: block; height: auto; flex: none; object-fit: contain; }
.thumb-card { width: 67px; max-height: 50px; }
.thumb-row { width: 66px; max-height: 51px; }
.case-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head h3 { font-size: 1.02rem; }
.card-body { min-width: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.badge .glyph { font-size: 0.8rem; line-height: 1; }
.badge.fits .dot { background: var(--good); }
.badge.near .dot { background: var(--warning); }
.badge.no .dot { background: var(--critical); }
.badge.best-badge { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.badge.best-badge .dot { background: var(--accent); }
.badge.unverified { border-style: dashed; }
/* Measured here rather than published: a real figure, but ours, not PLASTON's. */

/* to-scale drawing */
.drawing svg { width: 100%; height: auto; display: block; }
.cavity { fill: var(--surface-sunken); stroke: var(--border-strong); }
.dim-label { fill: var(--text-muted); font-family: var(--sans); font-weight: 650; }
.item { fill: var(--accent); fill-opacity: 0.85; stroke: var(--accent-ink); }
/* Under the figures rather than under the drawing: in the narrow visual
   column these four phrases wrapped to four lines. */
.drawing-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.drawing-legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.swatch.cavity-swatch { background: var(--surface-sunken); border: 1px solid var(--border-strong); }
.swatch.item-swatch { background: var(--accent); border: 1px solid var(--accent-ink); }

/* figures */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px 14px;
  margin-top: 10px;
}
.specs div { min-width: 0; }
.specs dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.specs dd { margin: 1px 0 0; font-variant-numeric: tabular-nums; font-size: 0.88rem; }

.meter {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}
.meter-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  min-width: 4px;
}
.meter-label { font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.card-actions .hint { margin-left: auto; }

.variants { margin-top: 10px; font-size: 0.8rem; color: var(--text-secondary); }
.variants ul { margin: 4px 0 0; padding-left: 18px; }
.variants code { font-family: var(--mono); font-size: 0.95em; color: var(--text-primary); }

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--surface-1);
}

details.more { margin-top: 14px; }
details.more > summary {
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 0;
}
details.more > summary:hover { color: var(--text-primary); }

.minor-list { display: grid; gap: 8px; margin-top: 8px; }
.minor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: 0.87rem;
}
.minor strong { font-weight: 650; }
.minor .reason { color: var(--text-secondary); }
.minor .spacer { margin-left: auto; }

/* ---------- stack planner ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  background: var(--surface-2);
  font-size: 0.85rem;
}
.chip button {
  appearance: none;
  border: 0;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.chip button:hover { background: var(--critical); color: #fff; }

/* Figures down the left, elevations to the right of them. Stretch rather than
   start, so the drawing's cell is as tall as the figures beside it and the
   pile below can stand on its floor. */
.stack-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.stack-figures { min-width: 0; }
/* No overflow:hidden here any more: the drawing scales to the column instead
   of being cropped by it. The cap matters now that this is the wide column:
   the SVG has a fixed aspect, so letting it fill 700px would make it 900px
   tall - the opposite of what moving it here was for. */
.stack-view {
  display: grid; gap: 6px; min-width: 0; max-width: 360px;
  /* The pile stands on the floor of its cell and grows upwards as cases are
     added, instead of hanging from the top and pushing the panel taller from
     the middle. */
  align-content: end;
}

/* One under the other. The figures have a column of their own beside the
   elevations, and a value with its note reads better on a line of its own
   than squeezed two or four to a row. */
.stack-layout .stats { grid-template-columns: minmax(0, 1fr); }

/* Both elevations in one SVG with a viewBox in millimetres: they share a
   scale, and the drawing takes the width of the column rather than needing
   the column to be a particular size. */
.stack-views svg { display: block; width: 100%; height: auto; }
.stack-slab-svg { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.stack-slab-label { fill: var(--accent-ink); font-weight: 600; }

.link-row { display: inline-flex; flex-wrap: wrap; gap: 0 2px; align-items: baseline; }
.strong-link { font-weight: 700; }
.warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.83rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--warning);
  padding: 6px 0 6px 10px;
  margin-top: 12px;
}

/* ---------- catalogue ---------- */

.silhouettes {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 2px 4px;
  border-bottom: 1px solid var(--border);
}
.silhouette { display: grid; justify-items: center; gap: 6px; flex: none; }
.silhouette-shape {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 3px 3px 2px 2px;
  position: relative;
}
.silhouette-shape::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 3px;
  border-top: 1px solid var(--accent);
  opacity: 0.6;
}
.silhouette-label { font-size: 0.7rem; color: var(--text-secondary); text-align: center; white-space: nowrap; }
.silhouette-label b { display: block; color: var(--text-primary); font-size: 0.74rem; font-weight: 650; }

.table-scroll { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
caption { text-align: left; color: var(--text-secondary); font-size: 0.82rem; padding-bottom: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
thead th {
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--text-secondary);
  font-weight: 650;
  border-bottom-color: var(--border-strong);
}
tbody th { font-weight: 650; }

/* The action column stays put while the rest of the table scrolls, so the
   button is never half cut off at the panel edge. */
th:last-child, td.actions-cell {
  position: sticky;
  right: 0;
  background: var(--surface-1);
  box-shadow: -8px 0 8px -8px rgb(11 11 11 / 18%);
}
tbody tr:hover td.actions-cell { background: var(--surface-2); }
td.actions-cell { padding-left: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }
th button.sort {
  appearance: none; background: none; border: 0; padding: 0; font: inherit;
  color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center;
}
th[aria-sort] button.sort { color: var(--text-primary); }
td code { font-family: var(--mono); font-size: 0.95em; }

.noscript-note { padding: 24px 16px; }

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

/* ---------- the help guide ---------- */

/* Every tool carries one: a button in the masthead and a panel of steps that
   opens over the page. The panel is a popover, which is markup rather than
   script - the button opens it, Escape and a click outside shut it, and the
   browser puts it in the top layer, over a stage that fills the window and a
   masthead that is sticky. assets/help.js covers only what markup cannot:
   a browser that does not know the attribute, and a link straight to the
   guide. */

.help-btn {
  appearance: none;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.help-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.help-btn .help-glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

/* display:none in the base rule, so a browser without popover support shows
   nothing rather than the whole guide spilled down the page; the two rules
   below turn it back on, and are deliberately not one selector list - an
   unknown :popover-open would throw the class away with it. */
.help-guide {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 60;
  width: min(680px, calc(100vw - 32px));
  max-height: min(80dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 12px 48px rgb(11 11 11 / 24%);
}
.help-guide:popover-open { display: block; }
.help-guide.is-open { display: block; }
.help-guide::backdrop { background: rgb(11 11 11 / 38%); }

/* Sticky, so the close button is still there eight steps down. */
.help-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.help-head h2 { font-size: 1.05rem; }
.help-head .help-kicker {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.help-close {
  appearance: none;
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.help-close:hover { background: var(--critical); border-color: var(--critical); color: #fff; }

.help-body { display: grid; gap: 12px; padding: 14px 18px 4px; }
.help-body h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.help-body b { color: var(--text-primary); font-weight: 650; }
.help-lede { color: var(--text-secondary); font-size: 0.9rem; }

/* Numbered by CSS rather than by the list marker: the number wants to be a
   disc beside the step, and a marker cannot be one. */
.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: help-step;
}
.help-steps > li {
  counter-increment: help-step;
  position: relative;
  padding-left: 34px;
  font-size: 0.87rem;
  color: var(--text-secondary);
}
.help-steps > li::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.help-notes {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.help-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 18px 18px;
}
.help-foot .hint { margin-right: auto; max-width: 42ch; }

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .card { grid-template-columns: 1fr; }
  .card > .card-visual, .card > .card-body { grid-column: 1; grid-row: auto; }
  .stack-layout { grid-template-columns: 1fr; }
  .masthead { position: static; }
  /* The fields take the whole line again, so the thirds below are thirds of it
     and the actions drop underneath. */
  form.finder > fieldset { flex: 1 1 100%; }
  .field.dim { width: calc(33.333% - 7px); }
  /* The guide takes the window, all but a thumb's width at the sides. */
  .help-guide { width: calc(100vw - 20px); max-height: 86dvh; }
  .help-btn { align-self: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .meter-fill { transition: width 180ms ease-out; }
}