/* Styling follows the YourCA design system (YourCA repo, docs/design-system.md,
   web/public/_shared/tokens.css and projects-app/projects-app.css :root).
   Warm cream ground, white cards that sit on it with a ring and shadow, an ochre
   accent for the thing you press, one typeface, light mode only.
   Token values are copied as-is. Change them there first, then here.
   SHARED FILE: YourHyd keeps a byte-identical copy of this file (and of
   plan-kit.js, fonts/ and brand/). Change it in YourFire first, then copy it
   across with YourHyd's scripts/sync-shared.sh. */

@font-face {
  font-family: "Overused Grotesk";
  src: url("/static/fonts/OverusedGrotesk-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --t-sans: "Overused Grotesk", ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI",
            "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Colour */
  --bg:        oklch(0.985 0.008 80);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.972 0.010 80);
  --ink:       oklch(0.21 0.013 55);
  --ink-2:     oklch(0.42 0.011 55);
  --ink-3:     oklch(0.52 0.010 55);
  --ink-4:     oklch(0.74 0.007 55);
  --line:      oklch(0.92 0.008 80);
  --line-2:    oklch(0.87 0.010 80);
  --ground:    oklch(0.975 0.003 80);
  --ground-2:  oklch(0.952 0.004 80);
  --ground-3:  oklch(0.940 0.005 80);

  --accent:       oklch(0.60 0.13 72);
  --accent-2:     oklch(0.94 0.05 72);
  --accent-wash:  color-mix(in oklab, var(--accent) 7%, var(--surface));
  --accent-ink:   oklch(0.38 0.10 72);
  --accent-hover: oklch(0.63 0.13 72);
  --accent-deep:  oklch(0.50 0.13 72);

  --ok:     oklch(0.47 0.10 165);
  --warn:   oklch(0.52 0.13 60);
  --danger: oklch(0.47 0.18 25);
  --sev-ok-bg:     oklch(0.95 0.04 165);
  --sev-warn-bg:   oklch(0.96 0.04 70);
  --sev-danger-bg: oklch(0.96 0.03 25);

  /* Radius and elevation */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;
  --ring:     0 0 0 0.5px oklch(0.20 0.012 60 / 0.07);
  --shadow-1: var(--ring), 0 1px 2px oklch(0.20 0.012 60 / 0.07);
  --shadow-2: var(--ring), 0 1px 2px oklch(0.20 0.012 60 / 0.06),
              0 8px 20px oklch(0.20 0.012 60 / 0.05);
  --shadow-3: var(--ring), 0 3px 6px oklch(0.20 0.012 60 / 0.07),
              0 20px 50px oklch(0.20 0.012 60 / 0.12);
  --hair: oklch(0.20 0.012 60 / 0.09);
  --row-veil: oklch(0.20 0.012 60 / 0.035);
  --scrim: oklch(0.20 0.012 60 / 0.34);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Type: seven sizes and no others */
  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  13.5px;
  --t-md:  15px;
  --t-lg:  19px;
  --t-xl:  22px;
  --t-2xl: 28px;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    600;
  --lh-solid: 1;
  --lh-tight: 1.25;
  --lh-body:  1.5;
  --track-tight: -0.02em;
  --track-snug:  -0.005em;
  --track-open:   0.005em;
  --track-caps:   0.06em;
  --word-space:   0.08em;

  /* Spacing (4pt with half-steps) */
  --space-0: 2px;  --space-1: 4px;  --space-1h: 6px; --space-2: 8px;
  --space-2h: 10px; --space-3: 12px; --space-3h: 14px; --space-4: 16px;
  --space-4h: 18px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Controls */
  --btn-sm: 30px;
  --btn:    36px;
  --btn-lg: 44px;
  --row:    44px;
  --tap:    44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --lift: -2px;

  --nav-w: 216px;

  /* Sign-in, copied from YourCA's sign-in screen (YourCA web/app/globals.css)
     so the two products' doors match: its field ground, refusal ground, focus
     halo and its sizes. */
  --surface-field:  oklch(0.995 0.005 80);
  --danger-surface: oklch(0.955 0.032 25);
  --focus-halo:     oklch(0.60 0.13 72 / 0.18);
  --t-brand:     clamp(44px, 8vw, 68px);
  --track-code:  0.12em;
  --auth-w:      560px;
  --auth-body-w: 360px;
  --otp-h:       60px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--t-sans);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--track-snug);
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { word-spacing: var(--word-space); }
a { color: var(--accent-ink); text-decoration: none; font-weight: var(--w-medium); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ── The desk: side nav on the grey ground, work on a cream panel ─────────── */

.desk { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; gap: var(--space-2); padding: var(--space-2); }

/* The side nav, after YourCA's side rail: the lockup, the firm, the work in the
   order a job is done (jobs, a new job, then the open job's steps), and the
   firm's settings and the account held down at the foot. Rows are pills; the
   one you are on is --ground-3 with its glyph in ochre. */
.nav {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2);
  position: sticky; top: var(--space-2); height: calc(100vh - var(--space-4)); overflow-y: auto;
}
.brand { font-size: var(--t-xl); padding: var(--space-1) var(--space-2h) var(--space-4); align-self: flex-start; }
.brand:hover { text-decoration: none; }
.nav-firm {
  margin: calc(-1 * var(--space-2)) var(--space-2h) var(--space-3); font-size: var(--t-xs); font-weight: var(--w-medium);
  color: var(--ink-2); line-height: var(--lh-tight); overflow-wrap: anywhere;
}
.nav-link {
  display: flex; align-items: center; gap: var(--space-2h); height: var(--btn); flex: none;
  padding: 0 var(--space-3); border-radius: var(--r-pill);
  color: var(--ink-3); font-weight: var(--w-medium); white-space: nowrap;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.nav-link:hover { background: var(--ground-2); color: var(--ink); text-decoration: none; }
.nav-link.on { background: var(--ground-3); color: var(--ink); }
.nav-link.on svg { color: var(--accent); }
.nav-link svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav-link.off { color: var(--ink-4); cursor: default; }
.nav-link.off:hover { background: none; color: var(--ink-4); }

.nav-job { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.nav-job[hidden] { display: none; }
.nav-job-name {
  padding: 0 var(--space-3) var(--space-1); font-size: var(--t-2xs); font-weight: var(--w-medium);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav-steps .n {
  width: var(--space-4h); height: var(--space-4h); flex: none; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: var(--t-2xs); font-weight: var(--w-bold); background: var(--ground-3); color: var(--ink-3);
}
.nav-steps .on .n { background: var(--accent-deep); color: var(--surface); }
.nav-steps .done .n { background: var(--sev-ok-bg); color: var(--ok); }
.nav-steps .on.nav-link { background: var(--ground-3); color: var(--ink); }

.nav-sep { height: 1px; margin: auto var(--space-2) var(--space-1); flex: none; }
.nav-foot { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--t-xs); color: var(--ink-3); }
.nav-foot[hidden] { display: none; }
.nav-foot.account { display: grid; gap: var(--space-2h); justify-items: start; }
.account-who { display: grid; gap: var(--space-0); min-width: 0; }
.account-who strong { color: var(--ink); font-weight: var(--w-medium); }
.account-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--nav-w) - var(--space-6)); }

/* The (i) mark beside a heading and the short explainer it opens, after YourCA's
   section explainers: what it is, and what is worth knowing, in a few lines. */
.info-mark {
  width: var(--space-5); height: var(--space-5); padding: 0; border: 0; border-radius: var(--r-pill); flex: none;
  display: inline-grid; place-items: center; vertical-align: middle; margin-left: var(--space-1h);
  background: none; color: var(--ink-3);
}
.info-mark:hover, .info-mark[aria-expanded=true] { background: var(--ground-3); color: var(--ink); border: 0; }
.info-mark svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.5; }
.explain {
  position: absolute; z-index: 20; width: calc(var(--space-7) * 7); max-width: calc(100vw - var(--space-6));
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: var(--space-4) var(--space-4h); display: grid; gap: var(--space-2);
  font-size: var(--t-sm); font-weight: var(--w-regular); letter-spacing: var(--track-snug); color: var(--ink-2); text-transform: none;
}
.explain h3 { margin: 0; font-size: var(--t-md); font-weight: var(--w-bold); color: var(--ink); line-height: var(--lh-tight); }
.explain p { margin: 0; }
.explain ul { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1h); }
.explain .meta { margin-top: var(--space-1); }

.panel {
  background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  min-width: 0; display: flex; flex-direction: column;
}
main { width: 100%; padding: var(--space-6) var(--space-6) var(--space-7); }

.banner {
  margin: auto var(--space-3) var(--space-3); padding: var(--space-2h) var(--space-4);
  background: var(--sev-warn-bg); color: var(--warn); border-radius: var(--r-md);
  font-size: var(--t-xs); font-weight: var(--w-medium);
}

/* ── Type ─────────────────────────────────────────────────────────────────── */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
h1 { font-size: var(--t-xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); margin: 0 0 var(--space-1); }
h2 { font-size: var(--t-md); font-weight: var(--w-bold); line-height: var(--lh-tight); margin: 0; }
.sub { color: var(--ink-3); margin: 0; }
.eyebrow { font-size: var(--t-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-medium); }
.meta { color: var(--ink-3); font-size: var(--t-xs); letter-spacing: var(--track-open); }

/* ── Presses ──────────────────────────────────────────────────────────────── */

button, .btn {
  font: inherit; font-weight: var(--w-medium); letter-spacing: var(--track-snug);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1h);
  height: var(--btn); padding: 0 var(--space-4); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease);
}
button:hover, .btn:hover { border-color: var(--ink-4); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--surface); }
button.primary:hover, .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
button.sm, .btn.sm { height: var(--btn-sm); padding: 0 var(--space-3); font-size: var(--t-xs); }
button:disabled { opacity: 0.5; cursor: default; }
.btn svg, button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--space-5); }

/* ── Register (jobs list) ─────────────────────────────────────────────────── */

.register { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.register th {
  text-align: left; font-size: var(--t-2xs); font-weight: var(--w-medium); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--ink-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hair);
}
.register td { padding: 0 var(--space-4); height: var(--row); border-bottom: 1px solid var(--hair); vertical-align: middle; }
.register tr:last-child td { border-bottom: none; }
.register tbody tr { cursor: pointer; transition: background 0.14s var(--ease); }
.register tbody tr:hover { background: var(--row-veil); }
.register .name { font-weight: var(--w-medium); color: var(--ink); }
.register .num { text-align: right; }
.register .muted { color: var(--ink-3); }

.empty { text-align: center; padding: var(--space-7) var(--space-5); color: var(--ink-3); }
.empty h2 { color: var(--ink); margin-bottom: var(--space-1); }
.empty .btn { margin-top: var(--space-4); }

/* ── Chips ────────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2);
  border-radius: var(--r-pill); font-size: var(--t-2xs); font-weight: var(--w-medium);
  letter-spacing: var(--track-open); background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.chip.accent { background: var(--accent-2); color: var(--accent-ink); }
.chip.ok { background: var(--sev-ok-bg); color: var(--ok); }
.chip.warn { background: var(--sev-warn-bg); color: var(--warn); }
.chip.danger { background: var(--sev-danger-bg); color: var(--danger); }

/* ── Upload ───────────────────────────────────────────────────────────────── */

.fields { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
label.field { display: grid; gap: var(--space-1h); font-size: var(--t-xs); color: var(--ink-2); font-weight: var(--w-medium); }
input[type=text], input[type=date], select {
  font: inherit; font-size: var(--t-sm); height: var(--btn); padding: 0 var(--space-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
input[type=text]:focus, input[type=date]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }

.drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.drop {
  border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--space-5) var(--space-4);
  text-align: center; background: var(--surface-2); cursor: pointer; min-height: 148px;
  display: grid; place-content: center; gap: var(--space-1);
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.drop:hover { border-color: var(--ink-4); }
.drop.over { border-color: var(--accent); background: var(--accent-wash); }
.drop.filled { border-style: solid; border-color: var(--ok); background: var(--sev-ok-bg); }
.drop strong { font-weight: var(--w-bold); font-size: var(--t-md); }
.drop .hint { color: var(--ink-3); font-size: var(--t-xs); }
.drop .file { font-size: var(--t-xs); word-break: break-all; color: var(--ok); font-weight: var(--w-medium); }
.drop input { display: none; }

.actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.notice { margin-top: var(--space-4); padding: var(--space-2h) var(--space-4); border-radius: var(--r-md); font-size: var(--t-sm); }
.notice.error { background: var(--sev-danger-bg); color: var(--danger); }
.notice.status { background: var(--surface-2); color: var(--ink-2); }
.notice:empty { display: none; }
.notice.warn { background: var(--sev-warn-bg); color: var(--warn); }

/* ── Steps ──────────────────────────────────────────────────────────────── */

.steps { list-style: none; display: flex; gap: var(--space-1); padding: 0; margin: 0 0 var(--space-5); flex-wrap: wrap; }
.steps li > a, .steps li > span {
  display: inline-flex; align-items: center; gap: var(--space-1h); height: var(--btn-sm);
  padding: 0 var(--space-3) 0 var(--space-1); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-3); text-decoration: none;
}
.steps .n {
  width: calc(var(--space-5) - var(--space-0)); height: calc(var(--space-5) - var(--space-0)); border-radius: var(--r-pill); display: inline-grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3); font-size: var(--t-2xs);
}
.steps li.on > span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.steps li.on .n { background: var(--accent-deep); color: var(--surface); }
.steps li.done .n { background: var(--sev-ok-bg); color: var(--ok); }
.steps li > a:hover { background: var(--ground-2); color: var(--ink); }

.plan-card { margin-top: var(--space-4); padding: var(--space-4); }
.plan-card .preview { background: var(--surface); display: grid; place-items: center; cursor: zoom-in; }
.plan-card .preview img { max-width: 100%; display: block; }

/* ── Sheets ───────────────────────────────────────────────────────────────── */

.step-note { margin: 0; padding: var(--space-2h) var(--space-3h); border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent-ink); font-weight: var(--w-medium); }
.step-note.done { background: var(--sev-ok-bg); color: var(--ok); }

.rcp-card { display: grid; grid-template-columns: minmax(calc(var(--space-7) * 6), calc(var(--space-7) * 11)) 1fr; gap: var(--space-5); align-items: start; }
.rcp-card .preview {
  aspect-ratio: 1.414; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--ring);
  display: grid; place-items: center; overflow: hidden; cursor: zoom-in;
}
.rcp-card .preview img { max-width: 100%; max-height: 100%; display: block; }
.rcp-body { display: grid; gap: var(--space-2h); align-content: start; }
.rcp-title { font-size: var(--t-lg); letter-spacing: var(--track-tight); }
.rcp-title span { display: block; font-size: var(--t-md); font-weight: var(--w-medium); color: var(--ink-2); letter-spacing: var(--track-snug); margin-top: var(--space-1); }
.actions.start { justify-content: flex-start; }

.group-head { display: flex; align-items: center; gap: var(--space-2h); margin: var(--space-6) 0 var(--space-3); }
.tools { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
input.search {
  font: inherit; font-size: var(--t-sm); height: var(--btn); width: 260px; padding: 0 var(--space-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
input.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }

.sheet-list td { height: calc(var(--row) + var(--space-3)); }
.sheet-list .c-thumb { width: calc(var(--space-7) * 1.5 + var(--space-4)); padding-right: 0; }
.sheet-list .c-thumb img {
  width: calc(var(--space-7) * 1.5); height: var(--space-7); object-fit: contain; display: block;
  background: var(--surface); border-radius: var(--r-xs); box-shadow: var(--ring);
}
.sheet-list .c-title { color: var(--ink-2); }
.sheet-list .c-act { text-align: right; white-space: nowrap; }
.sheet-list .c-act button { opacity: 0; transition: opacity 0.14s var(--ease); }
.sheet-list tr:hover .c-act button, .sheet-list tr:focus-within .c-act button { opacity: 1; }
.register tbody tr.chosen { background: var(--accent-wash); }
.register tbody tr.static { cursor: default; }
.register tbody tr.static:hover { background: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lightbox { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 10; cursor: zoom-out; padding: var(--space-6); }
.lightbox img { max-width: 100%; max-height: 100%; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-3); }

/* ── Design ───────────────────────────────────────────────────────────────── */

.design-empty { display: grid; gap: var(--space-3); }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.tile { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--space-4); display: grid; gap: var(--space-1); }
.tile-n { font-size: var(--t-2xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: var(--lh-solid); }
.design-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); align-items: start; }
.card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.card-head h2 { margin-right: auto; }
.previews { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
button.preview {
  height: auto; padding: var(--space-2); border-radius: var(--r-md); display: grid; gap: var(--space-2);
  justify-items: start; background: var(--surface-2); border: 1px solid var(--line); cursor: zoom-in; white-space: normal;
}
button.preview img { width: 100%; aspect-ratio: 1.414; object-fit: contain; background: var(--surface); border-radius: var(--r-xs); box-shadow: var(--ring); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: calc(var(--space-7) * 7); overflow: auto; }
.checks li { display: grid; gap: var(--space-0); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); border-left: 3px solid var(--line-2); background: var(--surface-2); }
.checks li.bad { border-left-color: var(--danger); background: var(--sev-danger-bg); }
.checks li.warn { border-left-color: var(--warn); background: var(--sev-warn-bg); }
.checks li.okay { border-left-color: var(--ok); background: var(--sev-ok-bg); }
.card-foot { margin-top: var(--space-3); }
.drawings { margin-bottom: var(--space-3); }
.drawings button.preview { justify-items: stretch; }

.reference { margin-top: var(--space-6); padding: 0; }
.reference > summary {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  cursor: pointer; list-style: none; border-radius: var(--r-lg);
}
.reference > summary::-webkit-details-marker { display: none; }
.reference > summary:hover { background: var(--surface-2); }
.ref-title { font-weight: var(--w-medium); }
.ref-open { margin-left: auto; color: var(--accent-ink); font-weight: var(--w-medium); }
.reference[open] .ref-open { visibility: hidden; }
.reference[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.ref-body { padding: var(--space-5); }
.ref-body > .group-head:first-of-type { margin-top: var(--space-5); }
.reference .rcp-card { box-shadow: var(--ring); }
.rerun { margin-top: var(--space-3); }
.rerun .notice { margin-top: 0; }

/* ── Layout editor ─────────────────────────────────────────────────────────── */

/* The plan takes the full width with the side cards under it in a row of
   columns (MD, 4 Nov); full window keeps the side column (the rules at the
   end of this file). */
.layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-7) * 7); gap: var(--space-3); align-items: start; }
.layout-grid:not(.full) { grid-template-columns: 1fr; }
.layout-grid:not(.full) .plan-wrap { position: static; }
/* The plan fills the window below the toolbar; drag the corner to make it
   taller or shorter (MD, 4 Nov). The page scrolls on to the cards. */
.layout-grid:not(.full) .plan-stage { height: calc(100vh - var(--space-7) * 4); min-height: calc(var(--space-7) * 7); resize: vertical; overflow: hidden; }
.layout-grid:not(.full) .plan-svg { height: 100%; min-height: 0; }
.layout-grid:not(.full) .side { grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-7) * 7), 1fr)); }
.plan-wrap { padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); position: sticky; top: var(--space-4); }
.plan-tools { display: flex; align-items: center; gap: var(--space-1h); flex-wrap: wrap; row-gap: var(--space-1); }
.plan-tools select { height: var(--btn-sm); font-size: var(--t-xs); padding: 0 var(--space-2); }
.scale-tools { display: inline-flex; align-items: center; gap: var(--space-1h); margin-left: auto; }
.calib-row { display: inline-flex; align-items: center; gap: var(--space-1h); }
.calib-row:empty { display: none; }
.calib-row input[type=text] { height: var(--btn-sm); font-size: var(--t-xs); width: calc(var(--space-7) * 3); }
/* The layout legend, over the plan's top right: each kind with its symbol
   and count, a checkbox to show it, + to add one. Its hint line is the
   row's tooltip. Toggled from the toolbar. */
.plan-legend-box {
  position: absolute; top: var(--space-3); right: var(--space-3); width: calc(var(--space-7) * 5.5); max-height: calc(100% - var(--space-5)); overflow: auto;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--space-2h) var(--space-3);
  display: grid; gap: var(--space-1h);
}
.plan-legend-box[hidden] { display: none; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan-legend-box .legend li { gap: var(--space-1h); padding: 0; }
.plan-legend-box .lg-pick .meta { display: none; }
.plan-legend-box .lg-name { font-size: var(--t-xs); }
.plan-legend-box .lg-rooms { margin-top: var(--space-1); font-size: var(--t-xs); }
.plan-tools .push { margin-left: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-sep { width: 1px; align-self: stretch; margin: var(--space-1) var(--space-1h); background: var(--line); }
.switch { display: inline-flex; align-items: center; gap: var(--space-1h); margin-left: var(--space-2); font-size: var(--t-sm); color: var(--ink-2); }
/* The canvas height here is the most the page gives the plan; the screen's
   Fit sets the height the plan's own shape needs, down to the minimum. */
.plan-svg {
  width: 100%; height: calc(100vh - var(--space-7) * 4); min-height: calc(var(--space-7) * 7); display: block;
  background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--ring); touch-action: none; cursor: grab; user-select: none;
}
.notice.stale-run { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); }
.plan-svg:active { cursor: grabbing; }
.plan-svg .underlay { opacity: 0.42; }
.plan-svg .room { fill: none; stroke: var(--ink-4); stroke-width: 0.06; stroke-dasharray: 0.25 0.18; }
.plan-svg .room.ex { stroke: var(--line-2); }
.plan-svg .dev { cursor: move; }
.plan-svg .dev.locked { cursor: default; }
.plan-svg .dev.dim { opacity: 0.18; }
.plan-svg .run { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.plan-svg .run line { stroke-linecap: round; }
.plan-svg .faded { opacity: 0.18; }
.plan-svg .iso rect { fill: var(--surface); }
.plan-svg .ztag rect { fill: var(--surface); }
.plan-svg .ztag text { font-weight: var(--w-medium); }
.plan-svg .fip { cursor: move; }
.plan-svg .fip rect { fill: var(--surface); }
.plan-svg .fip text { font-weight: var(--w-medium); }
.plan-svg .fip.sel rect { stroke: var(--accent-deep); }
.plan-svg .halo { fill: none; stroke: var(--accent); stroke-width: 0.08; }
.plan-svg .dev.bad .halo { stroke: var(--danger); fill: var(--sev-danger-bg); fill-opacity: 0.7; }
.plan-svg .dim line { stroke: var(--accent-ink); }
.plan-svg .ghost circle { fill: none; stroke: var(--ink-3); }
.plan-svg .ghost line { stroke: var(--ink); }
.plan-svg .ghost polygon { fill: var(--ink); stroke: none; }
.plan-svg .tag { fill: var(--ink); font-weight: var(--w-bold); }
.plan-svg .dim.wall line { stroke-dasharray: 0.3 0.15; }
.plan-svg .dim text { fill: var(--accent-ink); font-weight: var(--w-medium); letter-spacing: 0; }
.plan-svg .dim text.halo-t { fill: none; stroke: var(--surface); stroke-width: var(--space-1); stroke-linejoin: round; }
.plan-svg .dim.bad text.halo-t { fill: none; }
.plan-svg .dim.bad line { stroke: var(--danger); }
.plan-svg .dim.bad text { fill: var(--danger); }

/* Live dimensions on the device in hand: to walls, the next device of its
   type and the nearest device of another type. Red where a rule fouls. */
.plan-stage { position: relative; }
.plan-svg .ldim line, .plan-svg .ldim .end { stroke: var(--accent-ink); fill: var(--accent-ink); }
.plan-svg .ldim.wall line:first-child { stroke-dasharray: 0.3 0.15; }
.plan-svg .ldim.other line, .plan-svg .ldim.other .end { stroke: var(--ink-3); fill: var(--ink-3); }
.plan-svg .ldim .pill { fill: var(--surface); stroke: var(--line-2); stroke-width: inherit; }
.plan-svg .ldim text { fill: var(--accent-ink); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; stroke: none; letter-spacing: 0; }
.plan-svg .ldim.other text { fill: var(--ink-2); font-weight: var(--w-medium); }
.plan-svg .ldim.bad line, .plan-svg .ldim.bad .end { stroke: var(--danger); fill: var(--danger); }
.plan-svg .ldim.bad .pill { fill: var(--danger); stroke: var(--danger); }
.plan-svg .ldim.bad text { fill: var(--surface); }
.plan-svg .ldim { pointer-events: none; }
.plan-svg .dev.held { cursor: grabbing; }
.drag-read {
  position: absolute; left: var(--space-3); top: var(--space-3); max-width: calc(var(--space-7) * 7);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--space-2h) var(--space-3);
  font-size: var(--t-sm); pointer-events: none;
}
.dr-head { display: flex; align-items: center; gap: var(--space-2); }
.drag-read ul { list-style: none; margin: var(--space-1h) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.drag-read li { display: grid; color: var(--danger); font-weight: var(--w-medium); }
.drag-read li .meta { color: var(--ink-3); font-weight: var(--w-regular); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-only { display: none; }

.side { display: grid; gap: var(--space-3); }
.side-card { padding: var(--space-4); }
.side-card .card-head { margin-bottom: var(--space-3); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-0); }
.legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto var(--btn-sm); align-items: center; gap: var(--space-2); padding: var(--space-0) var(--space-1); border-radius: var(--r-sm); }
.legend li.on { background: var(--accent-wash); }
.legend li.off .lg-pick { opacity: 0.45; }
.lg-pick { height: auto; border: 0; background: none; padding: var(--space-1) 0; display: flex; gap: var(--space-2); align-items: center; text-align: left; white-space: normal; justify-content: flex-start; }
.lg-pick:hover { background: none; }
.lg-pick > span { display: grid; }
.lg-pick .meta { line-height: var(--lh-tight); }
.lg-name { font-weight: var(--w-medium); font-size: var(--t-sm); }
.lg-pick .lg-ico { width: var(--space-4h); height: var(--space-4h); flex: none; stroke: none; }
.lg-n { font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
.lg-add { width: var(--btn-sm); padding: 0; }
.runs-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
.facts.rc dd { text-align: right; font-variant-numeric: tabular-nums; }
.facts.rc .tot { border-top: 1px solid var(--line); padding-top: var(--space-1h); color: var(--ink); font-weight: var(--w-medium); }
.rc-h { font-size: var(--t-sm); margin: 0 0 var(--space-1h); }
.lg-rooms { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font-size: var(--t-sm); color: var(--ink-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1h) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--t-sm); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }
.bad-t { color: var(--danger); font-weight: var(--w-medium); }
.side .checks { max-height: calc(var(--space-7) * 6); }
.layout-grid:not(.full) .side .checks { max-height: none; }
.side-card .card-head .card-toggle { margin-left: auto; }
.side-card.folded > :not(.card-head) { display: none; }
.layout-grid:not(.full) .side { align-items: start; }
.side-card.folded .card-head { margin-bottom: 0; }
.checks li.go { cursor: pointer; }
.checks li.go:hover { box-shadow: var(--ring); }

/* ── Rooms screen ──────────────────────────────────────────────────────────── */

/* The rooms toolbar carries the tools and the two overlay switches; the hint
   for the tool in hand goes on a row of its own under them. */
.rooms-tools .tool-row { flex: 1 1 100%; display: flex; align-items: center; gap: var(--space-2h); min-height: var(--btn-sm); }
.rooms-tools .tool-row .seg { margin-left: 0; flex: none; }
.rooms-tools #tool-note { min-height: var(--space-4h); }
.seg { display: inline-flex; gap: 0; margin-left: var(--space-2); }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; }
.seg button:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.seg button.on, .plan-tools > button.on, .scale-tools button.on { background: var(--accent-2); border-color: var(--accent); color: var(--accent-ink); position: relative; }
.rooms-svg .underlay { opacity: 0.5; }
/* Work area step: the sheet outside the work greyed back, the line in the accent. */
.area-svg .wa-room { fill: none; stroke: var(--ink-4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.area-svg .wa-room.in { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent-deep); }
.area-svg .wa-mask { fill: var(--ground-3); fill-opacity: 0.78; pointer-events: none; }
.area-svg .wa-edge { fill: none; stroke: var(--accent-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.area-svg .wa-edge.draft { stroke-dasharray: 6 4; }
.area-svg .wa-pt { fill: var(--surface); stroke: var(--accent-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.area-svg .wa-pt.close { fill: var(--accent-2); }
.rooms-svg.drawing { cursor: crosshair; }
.rooms-svg .rm { cursor: pointer; }
.rooms-svg .rm.new { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent-deep); }
.rooms-svg .rm.unnamed { fill: var(--warn); fill-opacity: 0.12; stroke: var(--warn); }
.rooms-svg .rm.openp { fill: var(--ok); fill-opacity: 0.08; stroke: var(--ok); }
.rooms-svg .rm.ex { fill: var(--ink-4); fill-opacity: 0.18; stroke: var(--ink-3); }
.rooms-svg .rm.sel { fill-opacity: 0.3; stroke: var(--accent-ink); }
.rooms-svg .rm:hover { fill-opacity: 0.24; }
.rooms-svg .oos { fill: url(#oos-hatch); stroke: var(--ink-3); cursor: pointer; }
.rooms-svg .hatch-line { stroke: var(--ink-4); stroke-width: 1; }
.rooms-svg .cand { fill: var(--surface); fill-opacity: 0.01; stroke: var(--ink-3); cursor: pointer; }
.rooms-svg .rlab { fill: var(--ink); font-weight: var(--w-medium); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 0.25em; stroke-linejoin: round; pointer-events: none; }
.rooms-svg .rlab .rsub { fill: var(--ink-2); font-weight: var(--w-regular); }
.rooms-svg .door { fill: var(--surface); stroke: var(--accent-ink); stroke-width: 1; cursor: pointer; vector-effect: non-scaling-stroke; }
.rooms-svg .door.assumed { stroke: var(--warn); stroke-dasharray: 2 1.5; }
.rooms-svg .door.sel { fill: var(--accent-2); }
.rooms-svg .draft { fill: none; stroke: var(--accent-deep); }
.rooms-svg .draft-pt { fill: var(--accent-deep); }
.rooms-svg .draft-room { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent-deep); pointer-events: none; }
/* Reshaping the selected room: square corner handles (the picked one filled,
   the one in hand washed), a "+" at the middle of each edge that adds a
   corner, and the dashed guide or ring showing what a dragged corner
   snapped to. Strokes stay one width at any zoom. */
.rooms-svg .rm.held { stroke: var(--accent-deep); }
.rooms-svg .vtx { fill: var(--surface); stroke: var(--accent-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: move; }
.rooms-svg .vtx:hover, .rooms-svg .vtx.held { fill: var(--accent-2); stroke: var(--accent-deep); }
.rooms-svg .vtx.on { fill: var(--accent); stroke: var(--accent-deep); }
.rooms-svg .mid { cursor: pointer; }
.rooms-svg .mid circle { fill: var(--surface); stroke: var(--ink-4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rooms-svg .mid path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rooms-svg .mid:hover circle { stroke: var(--accent-deep); fill: var(--accent-2); }
.rooms-svg .mid:hover path { stroke: var(--accent-ink); }
.rooms-svg .snap { fill: none; stroke: var(--accent-deep); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rooms-svg .snap-pt { fill: none; stroke: var(--accent-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
/* The chooser for a room drawn over one already there: one button per
   answer, each with a line under its name saying what it does. */
.room-pick { width: calc(var(--space-7) * 7); }
.room-pick p { margin: 0; }
.rp-choices { display: grid; gap: var(--space-1h); }
.rp-choices button { height: auto; min-height: var(--btn-sm); padding: var(--space-1h) var(--space-3); display: grid; justify-content: start; justify-items: start; text-align: left; line-height: var(--lh-tight); white-space: normal; min-width: 0; }
.rp-choices button .meta { font-weight: var(--w-regular); }
.rp-choices button.primary .meta { color: var(--accent-2); }
/* Works overlay: rooms by class, the changed floor washed, out of scope
   hatched, removed walls dashed red (demolition), added walls solid ink. */
.rooms-svg .rm.sc-new { fill: var(--accent); fill-opacity: 0.26; stroke: var(--accent-deep); }
.rooms-svg .rm.sc-modified { fill: var(--warn); fill-opacity: 0.12; stroke: var(--warn); }
.rooms-svg .rm.sc-unchanged { fill: var(--ink-4); fill-opacity: 0.06; stroke: var(--ink-4); }
.rooms-svg .rm.sc-out_of_scope { fill: url(#oos-hatch); stroke: var(--ink-3); }
.rooms-svg .rm.sc-unknown { fill: var(--surface); fill-opacity: 0.01; stroke: var(--ink-4); }
.rooms-svg .rm.sc-new.sel, .rooms-svg .rm.sc-modified.sel, .rooms-svg .rm.sc-unchanged.sel { fill-opacity: 0.4; }
.rooms-svg .sc-reg { pointer-events: none; }
.rooms-svg .sc-reg.changed { fill: var(--warn); fill-opacity: 0.07; stroke: none; }
.rooms-svg .sc-reg.oos { fill: url(#oos-hatch); stroke: none; }
.rooms-svg .sc-wall { fill: none; stroke-linecap: butt; pointer-events: none; }
.rooms-svg .sc-wall.rem { stroke: var(--danger); }
.rooms-svg .sc-wall.add { stroke: var(--ink); }
/* Marked areas: a dashed, hatched outline; the drawn one in accent until it
   is given a class; a small × on the selected one. */
.rooms-svg .hatch-in { stroke: var(--accent); stroke-width: 1; }
.rooms-svg .area { cursor: pointer; }
.rooms-svg .area.out_of_scope { fill: url(#oos-hatch); stroke: var(--ink-2); }
.rooms-svg .area.in_scope { fill: url(#in-hatch); stroke: var(--accent-deep); }
.rooms-svg .area.sel { stroke: var(--accent-ink); }
.rooms-svg .area.draft-area { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent-deep); pointer-events: none; }
.rooms-svg .area-del { cursor: pointer; }
.rooms-svg .area-del circle { fill: var(--surface); stroke: var(--ink-3); }
.rooms-svg .area-del path { fill: none; stroke: var(--ink); }
.rooms-svg .area-del:hover circle { stroke: var(--danger); }
.rooms-svg .area-del:hover path { stroke: var(--danger); }
.area-pick {
  position: absolute; left: var(--space-3); top: var(--space-3); width: calc(var(--space-7) * 5);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--space-3);
  display: grid; gap: var(--space-2);
}
.area-pick[hidden] { display: none; }
.ap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.area-pick input { width: 100%; height: var(--btn-sm); font-size: var(--t-xs); }
.plan-legend .sw.area-in { background: repeating-linear-gradient(-45deg, var(--surface) 0 2px, var(--accent) 2px 3px); border: 1px dashed var(--accent-deep); }
.plan-legend .sw.area-out { background: repeating-linear-gradient(45deg, var(--surface) 0 2px, var(--ink-4) 2px 3px); border: 1px dashed var(--ink-2); }
/* Setout overlay, faint under the rooms. */
.rooms-svg #g-setout { pointer-events: none; }
.rooms-svg .so-line { fill: none; stroke: var(--ink-3); stroke-opacity: 0.6; }
.rooms-svg .so-line.light { stroke: var(--ink-4); stroke-opacity: 0.5; }
.rooms-svg .so-court { fill: none; stroke: var(--ok); stroke-opacity: 0.7; }
.rooms-svg .so-col { fill: var(--ink-3); fill-opacity: 0.7; }
.rooms-svg .so-light { fill: var(--ink-4); }
/* The rooms legend: one row under the plan, so nothing sits over the drawing. */
.plan-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding: 0 var(--space-1);
  font-size: var(--t-xs); color: var(--ink-2); min-height: var(--space-4h);
}
.plan-legend[hidden] { display: none; }
.plan-legend .lgd { display: inline-flex; align-items: center; gap: var(--space-1h); white-space: nowrap; }
.plan-legend .sw { width: var(--space-3h); height: var(--space-2h); border-radius: var(--r-xs); border: 1px solid var(--ink-4); box-sizing: border-box; flex: none; }
.plan-legend .sw.sc-new { background: color-mix(in oklab, var(--accent) 30%, var(--surface)); border-color: var(--accent-deep); }
.plan-legend .sw.sc-modified { background: color-mix(in oklab, var(--warn) 16%, var(--surface)); border-color: var(--warn); }
.plan-legend .sw.sc-unchanged { background: color-mix(in oklab, var(--ink-4) 10%, var(--surface)); border-color: var(--ink-4); }
.plan-legend .sw.sc-out_of_scope { background: repeating-linear-gradient(45deg, var(--surface) 0 2px, var(--ink-4) 2px 3px); border-color: var(--ink-3); }
.plan-legend .sw.ln { height: 0; border-radius: 0; border: 0; border-top: 2px solid var(--ink); }
.plan-legend .sw.ln.rem { border-top-style: dashed; border-top-color: var(--danger); }
.plan-legend .sw.ln.so { border-top-width: 1px; border-top-style: dashed; border-top-color: var(--ink-3); }
.plan-legend .lgd-n { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.plan-legend .lgd-note { color: var(--ink-3); }
.works { margin-bottom: var(--space-3); }
.works .field { margin-bottom: var(--space-2); }
.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--t-xs); color: var(--ink-2); }
.evidence li { padding-left: var(--space-3); position: relative; }
.evidence li::before { content: ""; position: absolute; left: 0; top: var(--space-2); width: var(--space-1h); height: var(--space-1h); border-radius: var(--r-pill); background: var(--accent); }
.side .field { margin-bottom: var(--space-3); }
.side .field input, .side .field select { width: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.checks-row { display: flex; flex-wrap: wrap; gap: var(--space-1h) var(--space-3); margin-bottom: var(--space-3); font-size: var(--t-sm); color: var(--ink-2); }
.checks-row label { display: inline-flex; gap: var(--space-1h); align-items: center; }
.warn-t { color: var(--warn); }
.danger-t { color: var(--danger); }
.ok-t { color: var(--ok); }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-0); max-height: calc(var(--space-7) * 8); overflow: auto; }
.room-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding: var(--space-1h) var(--space-2); border-radius: var(--r-sm); cursor: pointer; }
.room-list li:hover { background: var(--surface-2); }
.room-list li.on { background: var(--accent-wash); }
.rl-name { font-weight: var(--w-medium); }
.room-list .meta { grid-column: 1; }
.rl-flags { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.stale { margin: 0 0 var(--space-3); }

/* ── Tablet and phone ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .nav { flex-direction: row; align-items: center; padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .nav { position: static; height: auto; overflow: visible; }
  .brand { padding: 0 var(--space-3) 0 0; font-size: var(--t-lg); }
  .nav-firm, .nav-job, .nav-sep { display: none; }
  .nav-foot { display: none; }
  .nav-foot.account { display: flex; margin: 0 0 0 auto; padding: 0; }
  .account-who { display: none; }
  .panel { border-radius: 0; }
  main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .fields, .drops { grid-template-columns: 1fr; }
  .register .hide-sm { display: none; }
  .rcp-card { grid-template-columns: 1fr; padding: var(--space-4); }
  .sheet-list .c-thumb { width: calc(var(--space-7) + var(--space-4)); }
  .sheet-list .c-thumb img { width: calc(var(--space-7) + var(--space-2)); height: calc(var(--space-6) + var(--space-2)); }
  .register td, .register th { padding-left: var(--space-2h); padding-right: var(--space-2h); }
  input.search { width: 100%; }
  .sheet-list .c-act button { opacity: 1; }
  input[type=text], select { font-size: 16px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .design-grid, .previews { grid-template-columns: 1fr; }
  .page-head .actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---------- Design basis card ---------- */
.basis { margin-top: var(--space-5); }
.basis > .meta { margin: 0 0 var(--space-4); }
.basis-top { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.basis-top label { display: flex; flex-direction: column; gap: var(--space-1h); font-size: var(--t-xs); color: var(--ink-3); min-width: 220px; }
.basis-table { box-shadow: none; border: 1px solid var(--line); }
.basis-table td { vertical-align: middle; }
.basis-table select { width: 100%; }
.basis-table tr.off td { color: var(--ink-4); }
.sys-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sys-q { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.sys-q .seg { margin-left: 0; }
.sys-q .name { color: var(--ink); font-weight: var(--w-medium); }
.sys-q.off .name { color: var(--ink-3); }
.sys-ed { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.sys-ed select { max-width: calc(var(--space-7) * 4); }
.basis-sum { display: flex; gap: var(--space-2); flex-wrap: wrap; border-top: 0; }
.basis-rfis { margin: var(--space-2) 0 0; padding-left: var(--space-4h); font-size: var(--t-sm); color: var(--ink-2); }
.basis-rfis li + li { margin-top: var(--space-1); }
.basis-table .checks-row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin: 0; }
.basis-table .checks-row input { flex: none; }
.existing { margin-top: var(--space-5); }
.existing > .meta { margin: 0 0 var(--space-4); }
.ex-form { display: grid; grid-template-columns: 1fr 120px auto; gap: var(--space-3); align-items: end; }
.ex-form .drop { min-height: 0; padding: var(--space-4); }
.existing .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ---------- Documents card (phase 5) ---------- */
/* Documents step: pick a document on the left, read or edit it on the right. */
.docs-grid { display: grid; grid-template-columns: calc(var(--space-7) * 6) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-0); }
.doc-pick { width: 100%; height: auto; border: 0; background: none; padding: var(--space-2) var(--space-2); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); text-align: left; white-space: normal; }
.doc-pick > span { display: grid; }
.doc-pick .name { font-weight: var(--w-medium); color: var(--ink); }
.doc-pick:hover { background: var(--ground-2); }
.doc-pick.on { background: var(--accent-wash); }
.doc-steps { display: grid; gap: var(--space-4); }
.doc-group { display: grid; gap: var(--space-2); }
.doc-group + .doc-group { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.doc-group-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); }
.num-dot { display: inline-grid; place-items: center; width: var(--space-4h); height: var(--space-4h); border-radius: var(--r-pill); background: var(--accent-2); color: var(--accent-ink); font-size: var(--t-2xs); font-weight: var(--w-bold); }
.sign-form { display: grid; gap: var(--space-4); }
.sign-party { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.sign-party h3 { margin: 0 0 var(--space-1); font-size: var(--t-md); font-weight: var(--w-medium); color: var(--ink); }
.sign-party > .meta { margin: 0 0 var(--space-3); }
.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.sign-grid input { width: 100%; }
.sig-field { grid-column: 1 / -1; display: grid; gap: var(--space-1h); font-size: var(--t-xs); color: var(--ink-2); font-weight: var(--w-medium); }
.sig-pad { position: relative; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.sig-pad canvas { display: block; width: 100%; height: calc(var(--space-7) * 2.5); touch-action: none; cursor: crosshair; }
.sig-pad .sig-hint { position: absolute; left: var(--space-3); bottom: var(--space-2); color: var(--ink-4); font-size: var(--t-xs); font-weight: var(--w-regular); pointer-events: none; }
.sig-pad.has { border-style: solid; background: var(--surface); }
.sig-pad.has .sig-hint { display: none; }
.sig-tools { display: flex; gap: var(--space-2); }
.other-docs td.num .btn { margin-left: auto; }
.doc-viewer .card-head { align-items: flex-start; }
.doc-pages { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--ground-2); border-radius: var(--r-sm); max-height: calc(100vh - var(--space-7) * 4); overflow: auto; }
.doc-pages img { width: 100%; display: block; background: var(--surface); box-shadow: var(--shadow-1); }
.doc-edit { max-height: calc(100vh - var(--space-7) * 5); overflow: auto; }
.doc-edit .c-edit { min-width: calc(var(--space-7) * 4); }
.doc-edit textarea { width: 100%; font: inherit; font-size: var(--t-sm); color: var(--ink); padding: var(--space-1) var(--space-2); border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface); resize: vertical; }
.doc-edit textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
.doc-viewer .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Issue step. */
.ready-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.ready-line .chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ready-line a.chip { text-decoration: none; }
.previews.three { grid-template-columns: repeat(3, 1fr); }
.docs { margin-top: var(--space-5); }
.fer-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: var(--space-4); }
.fer-ref { font-weight: var(--w-medium); color: var(--ink); margin: var(--space-0) 0; }
.doc-files { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.doc-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2h) var(--space-3h); border: 1px solid var(--line); border-radius: var(--r-sm); }
.doc-file .name { font-weight: var(--w-medium); color: var(--ink); }
.doc-tabs { margin: 0 0 var(--space-3); }
.doc-table { box-shadow: none; border: 1px solid var(--line); }
.doc-table td { height: auto; padding-top: var(--space-2h); padding-bottom: var(--space-2h); vertical-align: top; font-size: var(--t-sm); line-height: var(--lh-tight); }
.doc-table .c-text { color: var(--ink-2); max-width: calc(var(--space-7) * 9); }
.doc-table .c-where { color: var(--ink-2); max-width: calc(var(--space-7) * 6); }
.doc-table td.name { white-space: nowrap; }
.doc-table .c-act-t { color: var(--ink); margin-top: var(--space-1); }
.doc-body { max-height: calc(var(--space-7) * 10); overflow: auto; }
.doc-body .checks { max-height: none; margin-bottom: var(--space-4); }
.doc-body .checks li { grid-template-columns: 1fr auto; align-items: start; }
.doc-sub { margin: var(--space-2) 0 var(--space-2); }
.fer-replace { margin-top: var(--space-4); }
.fer-replace summary { cursor: pointer; }
.fer-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.fer-form .drop { min-height: 0; padding: var(--space-4); }
@media (max-width: 1100px) { .doc-files { grid-template-columns: 1fr; } .docs-grid { grid-template-columns: calc(var(--space-7) * 5) minmax(0, 1fr); } }

/* ---------- Issue and export, firm template, data handling (phase 6) ---------- */
.issue { display: grid; gap: var(--space-4); }
.issue .tiles { margin: 0; }
.issue .card { margin: 0; }
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.sum-grid .tile { align-content: start; }
.sum-grid .chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sum-grid a.chip { text-decoration: none; }
.issue .doc-files { margin-bottom: 0; }
.sheet-tile { justify-items: stretch; }
.sheet-cap { display: grid; gap: var(--space-0); padding: 0 var(--space-1); text-align: left; }
.sheet-cap .name { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink); text-align: left; }
.rev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rev-grid > div > .eyebrow { margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.rev-grid .arch-form { margin-top: 0; }
.rev-table th { height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pick-table { box-shadow: none; border: 1px solid var(--line); }
.pick-table tbody + tbody tr.group-row td { border-top: 1px solid var(--line-2); }
.pick-table tr.group-row td { height: auto; padding-top: var(--space-3); padding-bottom: var(--space-2); background: var(--surface-2); }
.pick-table tr.item-row { cursor: pointer; }
.pick-table tr.item-row:hover td { background: var(--row-veil); }
.pick-table tr.item-row td { height: var(--row); font-size: var(--t-sm); }
.pick-table tr.item-row.off td.name, .pick-table tr.item-row.off td.muted { color: var(--ink-4); }
.pick-table td.pick { width: var(--space-6); padding-right: 0; }
.pick-table td.ref { white-space: nowrap; width: 1%; }
.pick-table td.fmt { text-align: right; width: 1%; white-space: nowrap; }
.pick-table select { height: var(--btn-sm); font-size: var(--t-xs); min-width: calc(var(--space-7) * 3); }
.pick-table input[type=checkbox] { width: var(--space-4); height: var(--space-4); accent-color: var(--accent-deep); margin: 0; vertical-align: middle; }
.pick-table .combine { font-size: var(--t-xs); color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--space-1h); cursor: pointer; }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.pack-files a.name { color: var(--ink); text-decoration: none; }
.pack-files a.name:hover { color: var(--accent); }
.rev-table { box-shadow: none; border: 1px solid var(--line); margin-bottom: var(--space-3); }
.rev-table td { height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); font-size: var(--t-sm); }
.issue-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-2); }
.pack-files { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }

.arch-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.arch-form .drop { min-height: 0; padding: var(--space-4); }
.arch-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); align-items: start; }
.arch-result .name { font-weight: var(--w-medium); color: var(--ink); }
.arch-overlay { padding: 0; height: auto; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.arch-overlay img { display: block; width: 100%; height: auto; }
.arch-sum { margin: var(--space-2) 0; }
.arch-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-1); font-size: var(--t-sm); }
.arch-list .chip { margin-right: var(--space-1); }
.checks li.accepted { border-left-color: var(--ink-4); background: var(--surface-2); color: var(--ink-2); }
/* Information on the Checks card (an assumption, an RFI): neutral, not a warning. */
.checks li.info { border-left-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); }
.chk-info { margin-top: var(--space-3); }
.chk-info summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-1) 0; font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink-2); }
.chk-info summary:hover { color: var(--ink); }
.chk-info[open] summary { margin-bottom: var(--space-2); }
button.link { height: auto; padding: 0; border: 0; background: none; border-radius: 0; color: var(--accent-ink); font-size: var(--t-xs); justify-self: start; text-decoration: underline; }
button.link:hover { color: var(--accent-deep); }
.acc-form { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-1h); margin-top: var(--space-1); }
.acc-form input { height: var(--btn-sm); font-size: var(--t-xs); }
.acc-why { display: block; }
.firm { display: grid; gap: var(--space-4); }
.firm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.logo-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hair); }
.logo-row .name { font-weight: var(--w-medium); }
.logo-box { width: calc(var(--space-7) * 3); height: calc(var(--space-7) * 1.5); border: 1px dashed var(--line-2); border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; }
.layer-table { box-shadow: none; border: 1px solid var(--line); margin: var(--space-3) 0; }
.layer-table input { width: 100%; height: var(--btn-sm); }
.data-jobs .register { box-shadow: none; border: 1px solid var(--line); margin: var(--space-3) 0; }
.data-jobs .register td { height: var(--row); }
@media (max-width: 1180px) {
  .rev-grid { grid-template-columns: 1fr; }
  .sum-grid { grid-template-columns: repeat(2, 1fr); }
  .firm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Layout screen, full window: plan and side legend fill the browser window
   over the nav and page header. Comes last so it wins over the tablet rules. */
body.layout-full { overflow: hidden; }
.layout-grid.full {
  position: fixed; inset: 0; z-index: 20; margin: 0; padding: var(--space-3);
  background: var(--ground); grid-template-columns: minmax(0, 1fr) calc(var(--space-7) * 7);
  align-items: stretch; height: 100vh;
}
.layout-grid.full .plan-wrap { position: static; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.layout-grid.full .plan-stage { min-height: 0; }
.layout-grid.full .plan-svg { height: 100%; min-height: 0; }
.layout-grid.full .side { grid-template-columns: 1fr; align-content: start; overflow-y: auto; min-height: 0; }
.layout-grid.full .side .checks { max-height: none; }
.layout-grid.full .fw-only { display: inline-flex; }
@media (max-width: 1180px) {
  .layout-grid.full { grid-template-columns: minmax(0, 1fr) calc(var(--space-7) * 6); }
}
@media (max-width: 1100px) {
  .doc-pick { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .doc-pick .meta { white-space: nowrap; }
}

/* ---------- UI review round 1 (4 Nov) ---------- */
/* Native ticks and radios take the accent, not the OS blue. */
input[type=checkbox], input[type=radio] { accent-color: var(--accent-deep); }
.fields.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields .span-2 { grid-column: span 2; }
.fields .span-4 { grid-column: 1 / -1; }
.mono { font-variant-numeric: tabular-nums; font-weight: var(--w-medium); white-space: nowrap; }
.register td.name .meta { font-weight: var(--w-regular); margin-top: var(--space-0); }

/* Job details on the Sheets step: four facts in one row, edit on demand. */
.details-card .card-head { margin-bottom: var(--space-2); }
.details-card .card-head .eyebrow { margin-right: auto; }
.details-solo { margin-bottom: var(--space-4); }
.details-card .fields { margin-bottom: 0; }
.details-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin: 0; }
.facts dt { font-size: var(--t-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-medium); }
.facts dd { margin: var(--space-1) 0 0; font-weight: var(--w-medium); overflow-wrap: anywhere; }

/* Delete sits at the foot of the page, away from Next. */
.page-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
button.danger-ghost { color: var(--danger); }
button.danger-ghost:hover { border-color: var(--danger); background: var(--sev-danger-bg); }

/* Standards: the edition column has one header, so every row is one line. */
/* One grid for the whole list (rows are subgrids), so the answer, edition and
   older-edition picks sit in the same three columns on every row. */
.sys-list { display: grid; grid-template-columns: minmax(calc(var(--space-7) * 4), 1fr) auto auto auto minmax(calc(var(--space-7) * 3), auto); column-gap: var(--space-4); }
.sys-head, .sys-list .sys-q { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.sys-list .sys-q > *, .sys-head > * { justify-self: start; }
.sys-list .sys-ed:not(.meta) { display: contents; }
.sys-list .sys-ed.meta { grid-column: 3 / -1; max-width: calc(var(--space-7) * 6); }
.sys-head span:last-child { grid-column: 4 / -1; }
.sys-to { color: var(--ink); white-space: nowrap; }
.sys-list li[data-opt] .seg { grid-column: 2 / 4; }
.sys-list li[data-opt] .sys-ed.meta { grid-column: 4 / -1; }
.sys-head {  gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-medium); }
.sys-ed > span.meta { display: none; }
.sys-ed select { height: var(--btn-sm); font-size: var(--t-xs); }
.sys-list .seg { margin-left: 0; }
.sys-q { min-height: calc(var(--row) + var(--space-3)); }
.ex-form .field input { width: 100%; min-width: 0; }

@media (max-width: 1180px) {
  :root { --nav-w: calc(var(--space-7) * 3.75); }
  main { padding: var(--space-5) var(--space-5) var(--space-6); }
  .rcp-card { grid-template-columns: calc(var(--space-7) * 6) minmax(0, 1fr); }
  .sys-list { column-gap: var(--space-3); grid-template-columns: minmax(calc(var(--space-7) * 2.5), 1fr) auto auto auto auto; }
  .sys-list .sys-ed select { max-width: calc(var(--space-7) * 2.25); }
  /* Five columns at tablet: the hall answers take the full width, their note under them. */
  .sys-list li[data-opt] .seg { grid-column: 2 / -1; }
  .sys-list li[data-opt] .sys-ed.meta { grid-column: 2 / -1; grid-row: 2; max-width: none; }
}
.nowrap { white-space: nowrap; }
/* The Documents list shares .side with the layout legend. At tablet width
   the legend's two-up grid squeezed the list into half its column. */
@media (max-width: 1180px) { .docs-grid > .side { grid-template-columns: minmax(0, 1fr); } }

/* RCP card: a sheet-sized thumbnail, not half the page, and a note that fits
   its words instead of stretching across the card. */
.rcp-card { grid-template-columns: calc(var(--space-7) * 7.5) minmax(0, 1fr); padding: var(--space-4) var(--space-5); }
.rcp-card .step-note { justify-self: start; width: fit-content; max-width: 100%; }
.rcp-body { display: grid; gap: var(--space-2); align-content: start; }
.rcp-body > * { margin: 0; }

/* The RCP card's right side: job details on top, the RCP under a rule. */
.rcp-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.rcp-side > #details { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.rcp-side .fields.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.rcp-side .fields .span-2, .rcp-side .fields .span-4 { grid-column: 1 / -1; }
@media (min-width: 1181px) {
  .rcp-side { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); }
  .rcp-side > #details { padding: 0 var(--space-5) 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 1180px) {
  .rcp-card { grid-template-columns: calc(var(--space-7) * 6) minmax(0, 1fr); }
  .details-card .card-head .meta { display: none; }
}
.facts .wide { grid-column: 1 / -1; }
.rcp-side .field input, .rcp-side .field select { width: 100%; min-width: 0; }


/* ── Plan screens: the plan fits the window (MD, 5 Nov) ──────────────────────
   Work area, Rooms and Layout. The page doesn't scroll: the header sits on
   top, the plan fills the rest down to a small pad at the foot, and the
   side panel on the right scrolls on its own. A wheel over the plan only
   moves the plan, and nothing hides below it. The panel folds to a rail. */
body.plan-screen .desk { height: 100vh; min-height: 0; }
body.plan-screen .panel { min-height: 0; overflow: hidden; }
body.plan-screen main {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-3);
}
body.plan-screen .page-head { flex: none; margin-bottom: var(--space-3); }
body.plan-screen .page-head h1 { margin: 0; }
body.plan-screen main > .notice { flex: none; }
body.plan-screen .layout-grid:not(.full) {
  flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr);
}
body.plan-screen .layout-grid.full { grid-template-columns: minmax(0, 1fr); }
body.plan-screen .layout-grid:not(.full) .plan-wrap { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
body.plan-screen .layout-grid:not(.full) .plan-stage { height: auto; min-height: 0; resize: none; }
body.plan-screen .layout-grid .plan-svg { height: 100%; min-height: 0; }
body.plan-screen .layout-grid .side .checks { max-height: none; }

/* The side panel floats in the plan's top right corner (MD, 5 Nov): a rail
   of icons, one per section, and the open section's card beside it, only
   as tall as it needs. The plan keeps the full width; Fit frames it clear
   of the panel. Pick the open icon again and only the rail stays. */
.side-rail { display: none; }
body.plan-screen .plan-stage > .side {
  position: absolute; z-index: 4; top: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  display: flex; align-items: flex-start; gap: 0; padding: 0; overflow: visible;
  pointer-events: none;
}
body.plan-screen .plan-stage > .side > * { pointer-events: auto; }
body.plan-screen .side-body {
  display: grid; gap: var(--space-2); align-content: start; width: calc(var(--space-7) * 6.5 + var(--space-4));
  max-height: calc(100% + var(--space-4)); overflow-y: auto; overscroll-behavior: contain;
  /* Room for the cards' shadow, which the scroll box would otherwise clip. */
  padding: var(--space-2); margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1);
}
body.plan-screen .side-body { grid-template-columns: minmax(0, 1fr); }
/* Cards never push past the panel: fields and rows shrink to fit it. */
body.plan-screen .side-body > .side-card { box-shadow: var(--shadow-2); min-width: 0; }
body.plan-screen .side-body :is(.two, .actions) > * { min-width: 0; }
body.plan-screen .side-body :is(input:not([type=checkbox]):not([type=radio]), select) { min-width: 0; width: 100%; }
body.plan-screen .side-body > .side-card[data-sec]:not(.sec-on) { display: none; }
body.plan-screen .side-folded .side-body { display: none; }
/* Folded, the panel still shows a section while the pointer rests on its
   icon, and the picked room or device so a pick is never out of sight. */
body.plan-screen .side-folded .side.peeking .side-body,
body.plan-screen .side-folded .side-body:has(> .side-card:not([data-sec]):not([hidden])) { display: grid; }
.rail-btn.peek { background: var(--surface-2); color: var(--ink); }
body.plan-screen .side-rail {
  display: flex; flex-direction: column; gap: var(--space-0); flex: none;
  padding: var(--space-1); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2);
}
.rail-btn {
  position: relative; flex-direction: column; gap: var(--space-0); width: var(--btn-lg); height: auto;
  padding: var(--space-1h) 0; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-3);
}
.rail-btn svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn span { font-size: var(--t-2xs); font-weight: var(--w-medium); letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-btn:hover { background: var(--surface-2); color: var(--ink); }
.rail-btn.on { background: var(--accent-wash); color: var(--accent-ink); }
.rail-n {
  position: absolute; top: 0; right: 0; min-width: var(--space-4); height: var(--space-4);
  padding: 0 var(--space-1); border-radius: var(--r-pill); background: var(--danger); color: var(--surface);
  font-size: var(--t-2xs); font-weight: var(--w-bold); line-height: var(--space-4); font-variant-numeric: tabular-nums;
}
/* The legend reads as a list in the panel. */
body.plan-screen .side .plan-legend { display: grid; gap: var(--space-1h); padding: 0; }
body.plan-screen .side .lg-rooms { margin-top: var(--space-3); }
@media (max-width: 1180px) {
  body.plan-screen main { padding: var(--space-4) var(--space-4) var(--space-3); }
  body.plan-screen .side-body { width: calc(var(--space-7) * 6 + var(--space-4)); }
}

/* The hint for the tool in hand and the check status float over the plan's
   bottom left, so they take no row of their own. Gone when there's nothing
   to say. */
.plan-hint {
  position: absolute; left: var(--space-3); bottom: var(--space-3); max-width: calc(100% - var(--space-6));
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-1h) var(--space-3); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-2);
  font-size: var(--t-xs); color: var(--ink-2); letter-spacing: var(--track-open);
}
.plan-hint > :empty { display: none; }
.plan-hint:not(:has(> :not(:empty))) { display: none; }
.plan-hint #check-note:not(:empty)::before { content: "·"; margin-right: var(--space-2); color: var(--ink-4); }
.plan-hint #tool-note:empty + #check-note::before { content: none; }
.plan-hint .bad-t { color: var(--danger); }

/* Settings that moved off the toolbar into the side panel. */
.side .scale-tools { margin-left: 0; display: flex; gap: var(--space-2); }
.side .scale-tools select { flex: 1 1 auto; min-width: 0; height: var(--btn-sm); font-size: var(--t-xs); }
.set-card .seg { margin-left: 0; display: flex; }
.set-card .seg button { flex: 1 1 0; min-width: 0; white-space: normal; height: auto; min-height: var(--btn-sm); padding-top: var(--space-1); padding-bottom: var(--space-1); line-height: var(--lh-tight); }
.plan-tools .push { flex: 1 1 auto; }
body.plan-screen .plan-tools .switch { margin-left: var(--space-1); white-space: nowrap; }
@media (max-width: 1180px) {
  body.plan-screen .plan-tools button.sm { padding: 0 var(--space-2h); }
  body.plan-screen .plan-tools { gap: var(--space-1); }
}

/* Rooms step, Ceilings section: rooms shaded by the void over the ceiling. */
.rooms-svg .rm.cv-ok { fill: var(--ok); fill-opacity: 0.10; stroke: var(--ok); }
.rooms-svg .rm.cv-deep { fill: var(--warn); fill-opacity: 0.22; stroke: var(--warn); }
.rooms-svg .rm.cv-none { fill: var(--surface); fill-opacity: 0.01; stroke: var(--ink-4); stroke-dasharray: 4 3; }
.rooms-svg .rm.cv-open { fill: var(--ink-4); fill-opacity: 0.05; stroke: var(--ink-4); }
.rooms-svg .rm.cv-ok.sel, .rooms-svg .rm.cv-deep.sel { fill-opacity: 0.34; }
/* ── Shared with YourHyd and YourCA (MD, 5 Nov) ──────────────────────────── */

/* The sliding switcher, after YourCA's section switch: a grey track with the
   chosen option as a white pill. Every one-of-several pick uses it, in
   YourFire and YourHyd alike. */
.seg {
  display: inline-flex; align-items: center; gap: var(--space-0); padding: var(--space-0);
  background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.seg button, .seg button:first-child, .seg button:last-child {
  margin-left: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3);
  box-shadow: none; transition: background 0.14s var(--ease), color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.seg button.sm { height: calc(var(--btn-sm) - var(--space-1)); }
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button.on {
  background: var(--surface); color: var(--ink); border: 0; box-shadow: var(--shadow-1); cursor: default;
}
.seg button:disabled { color: var(--ink-4); }
.set-card .seg button { height: auto; min-height: calc(var(--btn-sm) - var(--space-1)); }

/* Icon buttons: undo, redo and zoom. */
button.icon { width: var(--btn-sm); padding: 0; display: inline-grid; place-items: center; }
button.icon svg { width: var(--space-3h); height: var(--space-3h); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Zoom sits on the plan's bottom right, as in YourHyd's viewer. */
.pv-zoom {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 3;
  display: grid; gap: var(--space-0); padding: var(--space-0);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.pv-zoom button.icon { border: 0; background: none; border-radius: var(--r-sm); color: var(--ink-2); }
.pv-zoom button.icon:hover { background: var(--surface-2); color: var(--ink); }

/* One-line page head: the step's name and its one primary action. */
body.plan-screen .plan-head { align-items: center; flex-wrap: nowrap; min-height: var(--btn); margin-bottom: var(--space-3); }
.plan-head h1 { font-size: var(--t-xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); margin: 0; white-space: nowrap; }
.plan-head .actions { display: flex; align-items: center; gap: var(--space-2); }
.btn-pair { display: inline-flex; gap: var(--space-1); }

/* Ceilings section: one row per room, CH in the row, a tick to confirm. */
.ceil-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-0); max-height: calc(var(--space-7) * 8); overflow: auto; }
.ceil-list li { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-7) + var(--space-5)) var(--btn-sm); gap: var(--space-2); align-items: center; padding: var(--space-1h) var(--space-2); border-radius: var(--r-sm); cursor: pointer; }
.ceil-list li:hover { background: var(--surface-2); }
.ceil-list li.on { background: var(--accent-wash); }
.ceil-list .cl-name { display: grid; min-width: 0; }
.ceil-list .cl-name .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ceil-list input.cl-ch { width: 100%; padding-inline: var(--space-2); text-align: right; font-variant-numeric: tabular-nums; }
.ceil-list .cl-ok { width: var(--btn-sm); height: var(--btn-sm); padding: 0; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-4); cursor: pointer; }
.ceil-list .cl-ok svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ceil-list .cl-ok[aria-pressed="true"] { background: var(--sev-ok-bg); border-color: var(--ok); color: var(--ok); }
.ceil-list .cl-ok:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The architect set's issue and a newer set (Sheets step). */
.set-tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.set-tools .seg { margin-left: 0; }
#revision > .notice { margin: 0 0 var(--space-3); }
.notice.ok { background: var(--sev-ok-bg); color: var(--ok); }
.rev-card { margin-bottom: var(--space-4); }
.rev-card .card-head { margin-bottom: var(--space-3); }
.rev-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: start; }
.rev-body:not(:has(.rev-overlay)) { grid-template-columns: 1fr; }
.rev-overlay { all: unset; cursor: zoom-in; display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--ring); }
.rev-overlay img { display: block; width: 100%; }
.rev-side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.rev-sum { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.rev-rooms { box-shadow: var(--ring); }
.rev-clash { display: grid; gap: var(--space-1h); }
.rev-clash .check { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--t-sm); }
.rev-stage { display: flex; align-items: center; gap: var(--space-2); }
.rev-stage .seg { margin-left: 0; }
.rev-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ---------- Long run wait (app.js taskWait) ----------
   YourCA's loading ring, the flame where YCA sits, over the work area while
   a design, issue, compare or download runs on the server. One title, one
   line, a quiet clock. The nav stays in view. */
.task-wait {
  position: fixed; inset: 0 0 0 calc(var(--nav-w) + var(--space-2)); z-index: 30;
  display: grid; place-items: center; padding: var(--space-6);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(2px);
  animation: task-in 240ms ease-out both;
}
.task-wait.out { opacity: 0; transition: opacity 180ms ease-out; }
.task-wait-card { display: grid; justify-items: center; gap: var(--space-2); text-align: center; max-width: calc(var(--space-7) * 9); }
.task-wait .task-ring { margin-bottom: var(--space-3); }
.task-wait h2 { margin: 0; font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: var(--track-tight); color: var(--ink); }
.task-wait p { margin: 0; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.task-clock { margin-top: var(--space-1); font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@keyframes task-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .task-wait { animation: none; } }
.layout-full .task-wait { inset: 0; }