/* Proof-request tool — "Duplo" design pass.
   Goals: big, calm, plain, non-scary, for non-technical funeral staff.
   Warm golden-hour neutrals, large type, generous space, few hard edges.

   Reworked 2026-09-24 (the role-pages review): one page title per page,
   sections as h2 with a count, dashboard rows laid out as name + status,
   then the sentence, then the small print, and every page fitting a phone
   with no sideways scroll. */

:root {
  --bg: #f7f3ec;          /* warm ivory */
  --panel: #ffffff;
  --ink: #2a251f;         /* warm near-black */
  --ink-soft: #6a6156;    /* warm gray: 5.3:1 on the ivory, 6:1 on white */
  --line: #e7e0d4;        /* soft warm border */
  --accent: #9a6a2f;      /* golden-hour bronze */
  --accent-strong: #7f561f;
  --accent-ink: #ffffff;
  --accent-wash: #f3ead9; /* pale accent fill */
  --warn-bg: #fbf0d8;
  --warn-ink: #7a5312;
  --warn-line: #e6c98a;
  --error-bg: #f8e3df;
  --error-ink: #9a3121;
  --ok-bg: #e6f0e2;
  --ok-ink: #3d6b34;
  --wait-bg: #ddeaf6;
  --wait-ink: #1f4e79;
  --muted: #b7ac9c;       /* decorative only: rules, placeholders, never text that carries meaning */
  --field: #fdfbf7;       /* a box to type in, and the cards built like one */
  --field-off: #f2ede4;   /* a box that can't be typed in; a plain button under the pointer */
  --ghost-hover: #ecdfc2;
  --danger: #9a3121;      /* the fill of a button that deletes; its words are --danger-ink */
  --danger-hover: #7d281a;
  --danger-ink: #ffffff;
  --wait-line: #b9d1ea;
  --wait-wash: #eef4fb;
  --off-bg: #e9e5de;
  --error-wash: #fdf4f1;  /* behind an overdue row */
  --alert-wash: #fff7f6;  /* behind the drafts block */
  --on-accent: rgba(255, 255, 255, .25);  /* a count sitting on an accent fill */
  --backdrop: rgba(30, 24, 16, .4);
  --shadow: 0 2px 10px rgba(60, 45, 25, .07);
  --shadow-lift: 0 4px 20px rgba(60, 45, 25, .10);
  --radius: 16px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

/* Dark mode (the header's button; kept on the account, auth.Users.set_theme).
   The same names with dark values, so no rule below knows which one is on: a
   colour written straight into a rule is what made the first dark mode
   unreadable (removed 2026-07-16). run_tests.py measures every pair of words
   and background below in both palettes and fails under 4.5:1.
   Screen only: paper is always the light palette.
   In the dark the accent is a light gold, so the words on an accent fill
   (--accent-ink) are dark, and --accent-strong is lighter still, not darker. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;   /* the browser's own parts: date picker, dropdown lists, scrollbars */
    --bg: #171411;
    --panel: #221e19;
    --ink: #efe9df;
    --ink-soft: #b8ad9e;
    --line: #453e34;
    --accent: #d6a456;
    --accent-strong: #ecc283;
    --accent-ink: #1f1608;
    --accent-wash: #3a2d18;
    --warn-bg: #3e3013;
    --warn-ink: #f1cb7e;
    --warn-line: #7a6024;
    --error-bg: #47211c;
    --error-ink: #f6a79b;
    --ok-bg: #20361f;
    --ok-ink: #a3d897;
    --wait-bg: #1c3148;
    --wait-ink: #a3ccf2;
    --muted: #6f6558;
    --field: #15120f;
    --field-off: #2e2922;
    --ghost-hover: #4a3a20;
    --danger: #b83f32;
    --danger-hover: #a23428;
    --danger-ink: #ffffff;
    --wait-line: #35577a;
    --wait-wash: #172739;
    --off-bg: #37322b;
    --error-wash: #2c1b18;
    --alert-wash: #2a1917;
    --on-accent: rgba(0, 0, 0, .16);
    --backdrop: rgba(0, 0, 0, .6);
    --shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-lift: 0 4px 20px rgba(0, 0, 0, .5);
  }
  :root[data-theme="dark"] .brand .logo-light { display: none; }
  :root[data-theme="dark"] .brand .logo-dark { display: block; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 18px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* A long address or file name wraps instead of pushing past its box (the
     2026-10-01 sweep: an email in a sentence overflowed on a phone). */
  overflow-wrap: break-word;
}

a { color: var(--accent-strong); }

/* Keyboard users see where they are, on every kind of control. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible, .tab:focus-visible,
.entry:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* First thing on the page for a keyboard or screen-reader user; invisible otherwise. */
.skip {
  position: absolute; left: -9999px; top: 10px; z-index: 100;
  background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: var(--shadow-lift); text-decoration: none; font-weight: 600;
}
.skip:focus { left: 10px; }

/* ---- header ---- */
.topbar {
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
  padding: 10px 22px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 56px; width: auto; display: block; }
/* Two logos in the page, one shown: black on the light header, white on the dark. */
.brand .logo-dark { display: none; }
.draft-tag {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: var(--warn-bg); color: var(--warn-ink); font-weight: 600;
}
/* The way to reach GHI, at the foot of every page. */
.site-foot { max-width: 1000px; margin: 28px auto 20px; padding: 0 22px; color: var(--ink-soft); font-size: 14px; }
.site-foot a { color: var(--accent-strong); }
/* A finished draft that only waits on maintenance's files is calm, not red. */
.draft-banner.calm { background: var(--ok-bg, #e8f3ea); color: var(--ok-ink, #1f5a2d); border-color: transparent; }
/* Delete this draft: still a button, no longer the brightest thing on a request that's fine. */
.btn.danger-text { color: var(--error-ink); }
/* The sandbox's moved clock (ghi_core.clock.pretending); never shown live. */
.clock-tag {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: var(--warn-bg); color: var(--warn-ink); font-weight: 600;
}
.topbar nav { margin-left: auto; display: flex; gap: 4px 18px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.topbar nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; padding: 6px 0; }
.topbar nav a:hover { color: var(--accent-strong); }
.topbar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
/* Sign out is a POST (a link could be fired by any page); it looks like the links beside it. */
.topbar nav form.signout { margin: 0; }
.topbar nav form.signout button, .topbar nav button.theme-toggle { background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.topbar nav form.signout button:hover, .topbar nav button.theme-toggle:hover { color: var(--accent-strong); }
.topbar nav button.theme-toggle:disabled { cursor: progress; }
.topbar .who { color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.topbar .who .role { color: var(--muted); }

/* The order's family name and contract, at the top of each page of an order. */
.order-title { margin: 2px 0 16px; }
.order-title .order-name { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.order-title .order-contract { font-size: 18px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* ---- layout ----
   Widened 2026-08-18 (Hayden: too much blank margin on real monitors). */
main { max-width: 1000px; margin: 28px auto 80px; padding: 0 22px; }
main.wide { max-width: 1400px; }

h1 { font-family: var(--serif); font-size: 32px; line-height: 1.2; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 20px; margin: 30px 0 12px; }
/* The step's own title, under the family name that heads every page of an order. */
h2.step-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0 0 6px; }
.sub { color: var(--ink-soft); margin: 0 0 22px; font-size: 16px; }

/* The page's title and its buttons on one line; the buttons drop under it on a phone. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 16px; }
.page-head h1 { margin: 0; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* A section of a dashboard: a serif heading with its count, then rows. */
h2.section {
  font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.25;
  margin: 34px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
h2.section:first-child { margin-top: 0; }
h2.section .count, .chip .count, .tab .count {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1; color: var(--accent-strong);
  background: var(--accent-wash); border-radius: 999px; padding: 4px 9px;
}
.chip.on .count { background: var(--on-accent); color: var(--accent-ink); }
h2.section + .sub { margin-top: -4px; margin-bottom: 12px; }
.empty {
  color: var(--ink-soft); font-size: 15.5px; padding: 12px 18px; margin: 0 0 8px;
  border: 1px dashed var(--line); border-radius: 12px;
}

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); margin-bottom: 22px;
}

/* ---- forms ---- */
label { display: block; font-weight: 600; margin: 20px 0 7px; font-size: 17px; }
label:first-child { margin-top: 0; }
label .hint { font-weight: 400; color: var(--ink-soft); font-size: 15px; }
/* type=search is the dashboards' Find box: left out, it was the browser's own
   box, which in dark mode is a grey slab with small grey words. */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email],
input[type=search], select, textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 18px; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; min-height: 52px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash);
}
input[readonly], select[disabled], textarea[readonly], input[disabled] {
  background: var(--field-off); color: var(--ink-soft); cursor: not-allowed;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
/* `hidden` must win over a layout rule like .row { display:flex }. */
[hidden] { display: none !important; }

.row { display: flex; gap: 20px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 200px; }

/* big yes/no + choice buttons */
.choice-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.choice {
  flex: 1; min-width: 130px; margin: 0; display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 56px; text-align: center; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--field); cursor: pointer; font-weight: 600; font-size: 17px;
}
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong); }
/* keyboard focus ring survives the visually-hidden radio */
.choice:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
/* Step 2's picture choices (W-18): the urn outline in the page's lines,
   old engraving muted, new engraving in the accent, so both themes read. */
.choice.pic { flex-direction: column; gap: 8px; padding: 14px 12px; }
.urn-pic { width: 96px; height: 80px; display: block; }
.urn-pic .body { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.urn-pic .old { fill: var(--ink-soft); opacity: .55; }
.urn-pic .new { fill: var(--accent); }
/* Maintenance's four measurements: two a row, one a row on a phone. */
.measure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.measure-grid label { margin-top: 0; }

.check { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; }
.check input { margin-top: 4px; width: 22px; height: 22px; flex: 0 0 auto; }
.check label { margin: 0; font-weight: 500; }

/* Photo / rubbing collection request: two checkboxes on one baseline. */
.needs-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.needs-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.needs-row input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }

.forgot-links { display: flex; gap: 18px; }

/* Delete-draft confirmation dialog. */
.confirm-modal {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px; max-width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-lift); color: var(--ink); background: var(--panel);
}
.confirm-modal::backdrop { background: var(--backdrop); }

/* Admin-only tools block on the review page. */
.admin-panel { border-left: 4px solid var(--accent); }
.admin-panel h3 { font-size: 17px; margin: 22px 0 8px; color: var(--accent-strong); }
.admin-panel details { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }
.admin-panel summary { cursor: pointer; font-weight: 600; font-size: 17px; }

/* ---- buttons ---- */
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 12px; border: 1.5px solid transparent;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--accent-strong); }
/* Secondary/ghost carry a real fill (2026-08-18): transparent buttons vanished
   into the page background -- "Download order form" was invisible. */
.btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--muted); box-shadow: var(--shadow); }
.btn.secondary:hover { background: var(--field-off); border-color: var(--ink-soft); }
.btn.ghost { background: var(--accent-wash); color: var(--accent-strong); border-color: var(--accent); }
.btn.ghost:hover { background: var(--ghost-hover); }
.btn.small { padding: 8px 16px; font-size: 15px; }
.btn.danger { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }

/* breadcrumb + a compact change-record table (change requests) */
.crumb { margin: 0 0 14px; font-size: 15px; }
.lines-table { border-collapse: collapse; width: 100%; }
.lines-table th, .lines-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines-table th { color: var(--ink-soft); font-weight: 600; font-size: 14px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; align-items: center; justify-content: center; }
.actions .spacer { flex: 1; }

/* ---- progress rail ---- */
.progress { margin-bottom: 26px; }
.progress .track { display: flex; gap: 8px; margin-bottom: 12px; }
.progress .seg { flex: 1; height: 8px; border-radius: 6px; background: var(--line); }
.progress .seg.done { background: var(--accent); }
.progress .seg.here { background: var(--accent); opacity: .55; }
.progress .steplinks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.progress .steplinks a { color: var(--ink-soft); text-decoration: none; }
.progress .steplinks a:hover { color: var(--accent-strong); text-decoration: underline; }
.progress .steplinks .here { color: var(--ink); font-weight: 700; }
.progress .whereami { font-size: 15px; color: var(--ink-soft); margin-bottom: 6px; }

/* ---- flashes & notices ---- */
.flashes { margin-bottom: 20px; }
.flash, .notice { padding: 15px 18px; border-radius: 12px; margin-bottom: 12px; font-size: 17px; }
.flash-success, .notice.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash-warn, .notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.flash-error, .notice.error { background: var(--error-bg); color: var(--error-ink); }
.notice.info { background: var(--accent-wash); color: var(--accent-strong); }
.notice strong { font-weight: 700; }

/* checklist of what's blocking submit */
.checklist { list-style: none; margin: 10px 0 0; padding: 0; }
.checklist li { padding: 9px 0 9px 30px; position: relative; font-size: 16px; }
.checklist li::before { content: "○"; position: absolute; left: 4px; color: var(--error-ink); font-weight: 700; }

/* ---- dashboard rows (no dense tables) ----
   One request per card: the name with its status beside it, then the one
   sentence that says whose move it is, then the small print (contract,
   advisor, and any flag riding on the urn). The status is the only strong
   colour on the row; the flags are quiet. */
.entry {
  display: block; padding: 14px 18px 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
}
a.entry:hover { box-shadow: var(--shadow-lift); border-color: var(--muted); }
.entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.entry .who-name { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.entry .whose-move { margin-top: 4px; font-size: 16px; color: var(--ink); }
.entry .meta {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  font-size: 14px; color: var(--ink-soft);
}
.entry .meta .num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.entry .entry-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* A quiet flag on a row: a fact about the urn, not its status. */
.badge {
  display: inline-block; font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 1px 9px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); white-space: nowrap;
}
.badge.hold { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.badge.wait { border-color: var(--wait-line); background: var(--wait-wash); color: var(--wait-ink); }

.pill { font-size: 13.5px; padding: 4px 12px; border-radius: 20px; background: var(--accent-wash); color: var(--accent-strong); white-space: nowrap; font-weight: 600; line-height: 1.5; }
.pill.saved { background: var(--warn-bg); color: var(--warn-ink); }
.pill.signed { background: var(--ok-bg); color: var(--ok-ink); }
/* ---- progress-column flow palette (Hayden 2026-08-18) ----
   Color carries MEANING, and colorblind-friendliness comes from pairing hue
   with LIGHTNESS and weight, not hue alone:
     alert = saturated red, white text     -> broken/unstarted, fix it (draft)
     act   = saturated yellow, black text  -> the FSA must act now (proofed)
     hold  = pale amber, dark text         -> a pending question (collection,
                                              changes, cancellation, revision)
     wait  = pale blue, dark text          -> waiting on GHI (submitted)
     done  = pale green, dark text         -> approved and onward
     off   = gray                          -> cancelled
   No two of these share both hue-family and lightness. */
.pill.alert { background: #e5484d; color: #fff; font-weight: 700; }
.pill.act   { background: #f5c518; color: #3c3106; font-weight: 700; }
.pill.hold  { background: var(--warn-bg); color: var(--warn-ink); }
.pill.wait  { background: var(--wait-bg); color: var(--wait-ink); }
.pill.done  { background: var(--ok-bg); color: var(--ok-ink); }
.pill.off   { background: var(--off-bg); color: var(--ink-soft); }
.notice.alert { background: #e5484d; color: #fff; }
.notice.alert strong { color: #fff; }
.notice.alert .checklist { color: #fff; }

/* sent-proof reminders on the dashboard: one mark from day three; from day
   seven the row says "Overdue" rather than turning red, so red means only a
   change request (W-9) */
.entry.awaiting-due, .entry.awaiting-overdue { border-left: 5px solid var(--warn-ink); }
.overdue { color: var(--error-ink); font-weight: 700; }
/* Dennis's collection queue rows */
.entry.photo-req { border-left: 5px solid var(--accent); }

/* ---- line builder (reworked 2026-08-18) ----
   Each row: a vertical control rail (drag grip, up, down, remove) beside the
   content, so ordering controls stop eating a whole header row. The type bar
   is a 4-column grid -- three quick buttons + the "Other types…" dropdown --
   so all four controls are always the same size at any window width. */
.lines-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 28px; align-items: start; }
.preview-col { position: sticky; top: 20px; }
@media (max-width: 900px) {
  .lines-layout { grid-template-columns: minmax(0, 1fr); }
  .preview-col { position: static; order: -1; }
}

.line-row {
  display: flex; gap: 8px; align-items: stretch;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 14px; background: var(--field);
}
/* Control rail on the RIGHT (2026-08-18): remove on top, then up/down; square
   42px buttons matching the type-bar height, 8px apart -- the same gap as
   between the type controls. No drag handle: the arrows ARE the reordering. */
.line-rail { display: flex; flex-direction: column; gap: 8px; }
.line-main { flex: 1; min-width: 0; }

.type-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.type-bar .qt, .type-bar .type-select {
  box-sizing: border-box; width: 100%; height: 42px; min-height: 42px; padding: 0 10px;
  border: 1.5px solid var(--accent); border-radius: 12px; background: transparent;
  color: var(--accent-strong); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.type-bar .qt:hover, .type-bar .type-select:hover { background: var(--accent-wash); }
.type-bar .qt-active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.type-bar select.type-select.qt-active { background: var(--accent); color: var(--accent-ink); }

.iconbtn { border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; width: 42px; height: 42px; font-size: 17px; cursor: pointer; color: var(--ink-soft); }
.iconbtn:hover { border-color: var(--accent); color: var(--accent-strong); }
.remove-line { color: var(--error-ink); }

@media (max-width: 640px) {
  .type-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tri-state status selector -- same look and justification as the type bar
   (2026-08-18): three equal segments, accent-outlined, active fills. */
.tristate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; max-width: none; border: none; }
.tristate label { display: flex; align-items: center; justify-content: center; height: 42px; margin: 0;
  border: 1.5px solid var(--accent); border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--accent-strong); background: transparent; }
.tristate label:hover { background: var(--accent-wash); }
.tristate input { position: absolute; opacity: 0; }
.tristate label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.tristate label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-wash); }

.line-extra { margin-top: 10px; }

/* preview */
.preview { background: var(--panel); border: 1.5px dashed var(--line); border-radius: 14px; padding: 20px 22px; font-family: var(--serif); text-align: center; line-height: 2.1; font-size: 19px; }
.preview .muted { color: var(--ink-soft); }
/* The tag on a preview line carries meaning, so it reads. */
.preview .tag { font-family: -apple-system, sans-serif; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); display: block; }
/* Each line: its word on the left, the words centred, an empty column on the
   right so the centring holds. What GHI cuts has a bar and a wash; what's
   already on the urn, or kept for later, is plain grey (Hayden 2026-10-01). */
.preview .pline:not(.pline-warn) { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center;
  column-gap: 8px; margin: 3px 0; padding: 0 8px; line-height: 1.9; border-left: 4px solid transparent; border-radius: 8px; }
.preview .pline .ptext { grid-column: 2; overflow-wrap: anywhere; }
.preview .pline:not(.pline-warn) .tag { text-align: left; line-height: 1.3; }
.preview .pline.is-engrave { background: var(--accent-wash); border-left-color: var(--accent); }
.preview .pline.is-engrave .tag { color: var(--accent-strong); font-weight: 700; }
.preview .pline.is-existing, .preview .pline.is-future { color: var(--ink-soft); }
.preview .pline.is-future .ptext { font-style: italic; }
/* A line's file, under the line it belongs to (W-22). */
.preview .pline-file { font-family: -apple-system, sans-serif; font-size: 13px; text-align: center;
  margin: -1px 0 5px; overflow-wrap: anywhere; color: var(--ink-soft); }
@media (max-width: 480px) {
  .preview .pline:not(.pline-warn) { grid-template-columns: minmax(0, 1fr); padding: 2px 8px; }
  .preview .pline .ptext { grid-column: 1; }
}

/* a typeless row would be dropped on save -- preview and row must both shout */
.preview .pline-warn { color: var(--error-ink); }
.preview .tag-warn { color: var(--error-ink); }
.type-bar.type-missing { outline: 2.5px solid var(--error-ink); outline-offset: 3px; border-radius: 8px; }

/* file upload */
.dropzone { border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; background: var(--field); }
.dropzone .btn { margin-top: 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.thumb { width: 96px; text-align: center; font-size: 12px; color: var(--ink-soft); }
.thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.thumb .doc { width: 96px; height: 96px; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--panel); }
.thumb .name { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb a.rm { color: var(--error-ink); font-size: 12px; }

/* review */
.review dl { display: grid; grid-template-columns: 220px 1fr; gap: 8px 18px; margin: 0; }
.review dt { color: var(--ink-soft); }
.review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }

/* The filed history, admin-only: a plain list, one event per line. */
.history { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--ink-soft); }
.history li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; }
.history li:last-child { border-bottom: 0; }
.history .when { flex: 0 0 11em; font-variant-numeric: tabular-nums; }
.history .what { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.history .who { flex: 0 0 auto; }

@media print { .topbar, .actions, .progress, .no-print, .skip { display: none !important; } }

/* The proof on the order page (PRV-V1): the current version's design pages
   shown large; several pages mean the family chooses one. */
.proof-designs { display: flex; flex-wrap: wrap; gap: 14px; }
.proof-designs a { display: block; }
/* At a glance, not full size: a design fits on the page, and a click opens
   it full size in a new tab (Hayden 2026-10-01: one filled a large monitor). */
.proof-designs img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: min(420px, 55vh);
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.proof-versions { margin: 0; padding-left: 20px; line-height: 1.8; }
.proof-versions .hint { color: var(--ink-soft); font-size: 15px; }
.proof-option { margin: 0; flex: 1 1 280px; max-width: 100%; }
.proof-option figcaption { margin-bottom: 6px; }
.proof-option .option-wording { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }

/* Dashboards (ROLE_PAGES_DESIGN): drafts set apart at the top, a whose-move
   sentence on every row, status and advisor filters as chips, Mark's tabs. */
.drafts-block {
  border: 2px dashed #e5484d; border-radius: var(--radius);
  padding: 14px 16px 6px; margin: 0 0 26px; background: var(--alert-wash);
}
.drafts-block h2.section { margin-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.filters .filters-label { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-right: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--ink);
  font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.ghi { border-color: var(--accent); color: var(--accent-strong); }
.tabs { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 2px solid var(--line); }
.tab {
  padding: 10px 18px; text-decoration: none; color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600;
}
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
/* W-7: Team's advisor filter is a second, lighter tab strip under Mine/Team. */
.tabs.sub { margin: -8px 0 14px; border-bottom-width: 1px; flex-wrap: wrap; }
.tabs.sub .tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-weight: 500; font-size: 14px; margin-bottom: -1px; }
.hint { color: var(--ink-soft); font-size: 15px; }
.filters-hint { margin: -4px 0 14px; }
/* GHI's dashboard: a strip of its groups with counts, to jump to one. */
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.dash-group { margin-top: 8px; }
.dash-group.ghi-move h2.section { color: var(--accent-strong); }
.group-divider {
  margin: 40px 0 0; padding-top: 18px; border-top: 2px solid var(--line);
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}

/* The order page: what happens next, then the tracker, like package tracking. */
.next-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin: 10px 0 14px; box-shadow: var(--shadow);
}
.next-box.mine { border: 2px solid var(--accent); }
.next-box .next-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.next-box h2 { margin: 10px 0 4px; font-size: 18px; }
.next-box p { margin: 0 0 12px; }
.tracker { list-style: none; margin: 0 0 22px; padding: 0 0 0 18px; border-left: 3px solid var(--line); }
.tracker li { position: relative; padding: 4px 0 8px 10px; min-width: 0; }
/* An email address in a tracker line ("Proof v01 sent to …") must break on a phone (the judge, round two). */
.tracker li strong, .tracker li .hint { overflow-wrap: anywhere; }
.tracker li::before {
  content: ""; position: absolute; left: -26px; top: 11px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--muted);
}
.tracker li.current::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.tracker li.current strong { color: var(--accent-strong); }
.tracker .hint { color: var(--ink-soft); font-size: 15px; margin-left: 6px; }
.draft-banner {
  background: #e5484d; color: #fff; border-radius: 12px; padding: 10px 16px;
  margin: 0 0 14px; font-size: 17px;
}

/* The one upload box (PR-U2, static/upload.js). */
.upload-box {
  border: 2px dashed var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--field); text-align: left;
}
.upload-box.compact { padding: 8px 10px; }
.upload-box[data-enhanced] .upload-native { display: none; }
.upload-box.dragging { border-color: var(--accent); background: var(--accent-wash); }
.upload-box[data-paste]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload-box .upload-hint { color: var(--ink-soft); font-size: 15px; }
.upload-box .thumbs:empty { display: none; }
.thumb button.rm {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 10px 12px; cursor: pointer;
  color: var(--error-ink); font: inherit; font-size: 14px; min-height: 44px;
}
.thumb button.rm:hover { border-color: var(--error-ink); }

/* Accounts: one row per person, tools beside it on a wide screen, under it on a phone. */
.account { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.account .who-name { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.account-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.account-tools form { margin: 0; display: flex; gap: 8px; align-items: center; }
.account-tools input[type=email] { width: 22em; max-width: 100%; min-height: 42px; padding: 8px 12px; font-size: 16px; }
.account-tools select { width: auto; min-height: 42px; padding: 8px 12px; font-size: 16px; }

/* ---- phones ---- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 0 16px; margin-top: 18px; }
  h1 { font-size: 27px; }
  h2.section { font-size: 21px; margin-top: 28px; }
  .order-title .order-name { font-size: 28px; }
  .brand img { height: 44px; }
  .topbar { padding: 10px 16px; gap: 8px 16px; }
  .topbar nav { margin-left: 0; width: 100%; gap: 2px 14px; font-size: 15px; }
  .panel { padding: 18px; }
  .btn { padding: 12px 18px; font-size: 16px; }
  .entry { padding: 12px 14px 11px; }
  .entry .who-name { font-size: 19px; }
  .entry .whose-move { font-size: 15px; }
  .review dl { grid-template-columns: 1fr; gap: 2px 0; }
  .review dt { margin-top: 10px; }
  /* Filter chips scroll sideways in one line rather than stacking into a wall. */
  .filters { flex-wrap: wrap; }
  .tabs { overflow-x: auto; overflow-y: hidden; }
  .tab { padding: 10px 14px; white-space: nowrap; }
  .actions { justify-content: stretch; }
  .actions .btn { flex: 1 1 auto; }
  .account-tools input[type=email] { width: 100%; }
  /* On a phone the address gets the whole row and Save goes under it, so the
     address can be read and the button stays one line (the 2026-10-01 sweep). */
  .account-tools form.email-form { flex-wrap: wrap; width: 100%; }
  .account-tools .btn { white-space: nowrap; }
  /* GHI's strip is one line that scrolls sideways, not a wall of chips above
     the first list (the 2026-10-01 sweep). */
  .summary { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .summary .chip { white-space: nowrap; flex: 0 0 auto; }
}

/* ---- role review, 2026-09-26 ---- */
/* The one box every question uses (static/site.js). */
/* A question may put an address on its own line (a newline in data-confirm),
   and a long address wraps rather than breaking the box (Hayden 2026-10-01). */
#ghi-dialog .dlg-msg { font-size: 18px; margin: 0 0 16px; white-space: pre-line; overflow-wrap: break-word; }
#ghi-dialog .dlg-extra:empty { display: none; }
#ghi-dialog .dlg-extra { margin-bottom: 14px; }
#ghi-dialog .dlg-extra input { width: 100%; }
#ghi-dialog .dlg-error { margin: 0 0 14px; }
#ghi-dialog .dlg-actions { margin: 0; justify-content: flex-start; }
/* "Remove" is a real target for a thumb, and says what it does. */
.thumb button.rm, .thumb .rm {
  display: inline-block; min-height: 32px; padding: 6px 8px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--error-ink); font-size: 13px; text-decoration: none; cursor: pointer;
}
.thumb form { margin: 0; }
.thumb .added-by { display: block; font-size: 12px; }
.upload-refused { color: var(--error-ink); font-size: 15px; margin: 10px 0 0; }
.collection-list { list-style: none; padding: 0; margin: 0 0 14px; }
.collection-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  color: var(--ink-soft); font-size: 15px; padding: 4px 0; }
/* Maintenance's attach page: where the urn is, and what's still wanted. */
.attach-where .where { font-size: 18px; margin: 0 0 10px; }
.attach-where h2 { margin: 14px 0 6px; font-size: 18px; }
.wanted { margin: 0; padding-left: 20px; }
.wanted li { margin: 6px 0; }
.wanted-note { color: var(--ink); font-size: 16px; margin-top: 2px; }
@media (max-width: 640px) {
  .thumb button.rm, .thumb .rm { min-height: 44px; padding: 10px 12px; font-size: 15px; }
}

/* The guides inside the tool (RR-31). */
.help-menu { flex-wrap: wrap; }
.help-doc { max-width: 860px; line-height: 1.6; }
.help-doc h2 { margin-top: 28px; font-size: 22px; }
.help-doc h3 { margin-top: 22px; font-size: 19px; }
.help-doc p, .help-doc li { font-size: 17px; }
.help-doc ul, .help-doc ol { padding-left: 24px; }
.help-doc li { margin: 4px 0; }
.help-doc code { background: var(--accent-wash); padding: 1px 5px; border-radius: 5px; font-size: 15px; overflow-wrap: anywhere; }
.help-doc .tbc { color: var(--ink-soft); }
.help-doc hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.help-table { overflow-x: auto; margin: 12px 0 18px; }
.help-table table { border-collapse: collapse; width: 100%; font-size: 16px; }
.help-table th, .help-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.help-table th { background: var(--accent-wash); }
@media print { .help-doc { max-width: none; border: 0; box-shadow: none; } }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0; }
.check-row input { margin-top: 4px; }
.check-row .check-hint { display: block; font-size: 14px; }
.badge.new { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 12px; vertical-align: middle; }
.since-note .badge { margin: 0 2px; }
/* Maintenance's lists (RR-14 to RR-16). */
.walk-heading { font-size: 16px; color: var(--ink-soft); margin: 18px 0 6px; text-transform: none; }
.card-note { font-size: 16px; color: var(--ink); margin: 6px 0 2px; }
.blocked-note { font-size: 15px; color: var(--warn-ink); background: var(--warn-bg); border-radius: 8px; padding: 4px 8px; margin: 6px 0 2px; display: inline-block; }
.where-line { font-size: 15px; color: var(--ink); margin-top: 4px; }
.misfiled-tag { display: block; font-size: 12px; color: var(--error-ink); font-weight: 600; }
/* Anything stuck (RR-20). */
.badge.stuck { border-color: var(--error-ink); background: var(--error-bg); color: var(--error-ink); }
/* Accounts (RR-22, RR-23). */
.account-state { margin-top: 4px; }
.account-off .who-name { color: var(--ink-soft); }
.off-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.off-form .off-label { font-size: 14px; font-weight: 400; margin: 0; }
.off-form select { width: auto; }
.account-log { list-style: none; padding: 0; margin: 0; }
.account-log li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }

/* ---- Batch D: volume (the 2026-10-02 sweep, docs/role_review/SWEEP_BUILD.md) ----
   D4 (S-10): an account is one line; its controls open under it from Manage. */
.account > .account-manage, .account > .account-line { flex: 1 1 100%; min-width: 0; }
.account-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.account-line .account-state { margin-top: 0; flex: 1 1 18em; }
.account-line .manage, .account-line > .meta:last-child { margin-left: auto; }
.account-line .you { font-family: var(--sans, inherit); font-size: 14px; font-weight: 400; color: var(--ink-soft); }
summary.account-line { cursor: pointer; list-style: none; }
summary.account-line::-webkit-details-marker { display: none; }
.account-manage[open] > summary .manage { background: var(--field-off); }
.account-manage > .account-tools { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* D3 (S-4): the advisor filter as a dropdown past eight advisors. */
.advisor-pick select { width: auto; max-width: 100%; min-height: 42px; padding: 8px 12px; font-size: 16px; }
/* D1, D2: "Show all 34" and "Show older" under a folded list (static/fold.js). */
.fold-more { margin: 2px 0 12px; }
/* Find, at the top (RR-33). */
.find-bar { display: flex; gap: 8px; margin: 0 0 14px; max-width: 560px; }
.find-bar input { flex: 1 1 auto; min-width: 0; }
.find-bar .btn { flex: 0 0 auto; }
/* A compact header on phones and short screens (RR-34): the page gets the room. */
@media (max-width: 640px) {
  .topbar { padding: 6px 12px; gap: 4px 12px; }
  .brand img { height: 34px; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; gap: 0 14px; font-size: 15px; scrollbar-width: none; }
  .topbar nav a, .topbar nav form.signout button, .topbar .who { white-space: nowrap; }
  .topbar .who { font-size: 14px; }
  main { margin-top: 12px; }
}
@media (max-height: 520px) {
  .topbar { padding: 4px 16px; }
  .brand img { height: 30px; }
  main { margin-top: 10px; }
}
/* A file reported as another family's (the maintenance re-check). */
.thumb.misfiled img, .thumb.misfiled .doc { opacity: .45; outline: 3px solid var(--error-ink); outline-offset: -3px; }
.thumb.misfiled .name { text-decoration: line-through; }
/* Phones: the name gives way so Sign out fits (the maintenance re-check). */
@media (max-width: 640px) {
  .topbar .who { display: none; }
  .topbar nav { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
}

/* ---- Batch E: layout (the 2026-10-02 sweep, docs/role_review/SWEEP_BUILD.md) ---- */

/* E14 (Q67): on a phone the header is one line. The links fold behind Menu;
   the dark-mode button and Sign out stay on the line, where they fit. Only
   once theme.js has marked the page (data-menu): with no script the links
   show, wrapped, as before. */
.menu-toggle { display: none; }
.nav-more { display: contents; }
@media (max-width: 640px) {
  :root[data-menu] .topbar { position: relative; flex-wrap: nowrap; }
  :root[data-menu] .topbar nav { margin-left: auto; width: auto; flex-wrap: nowrap; gap: 0 14px; }
  :root[data-menu] .menu-toggle {
    display: inline-block; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
    background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px;
    padding: 5px 12px; min-height: 38px; cursor: pointer; white-space: nowrap;
  }
  :root[data-menu] .topbar.menu-open .menu-toggle { border-color: var(--accent); background: var(--accent-wash); }
  :root[data-menu] .nav-more { display: none; }
  :root[data-menu] .topbar.menu-open .nav-more {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 4px); right: 12px; z-index: 30;
    min-width: 200px; padding: 6px 0; background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow-lift);
  }
  :root[data-menu] .topbar.menu-open .nav-more a { padding: 11px 18px; min-height: 44px; }
  :root[data-menu] .topbar.menu-open .nav-more a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent); }
}

/* E4 (L-3): on a phone a table of three columns or more is a block per row:
   the first cell bold, the second under it, the rest named by their heading
   (helpdoc.py writes the "stacks" mark and each cell's heading). */
@media (max-width: 640px) {
  .help-table.stacks { overflow-x: visible; }
  .help-table.stacks thead { display: none; }
  .help-table.stacks table, .help-table.stacks tbody, .help-table.stacks tr, .help-table.stacks td { display: block; width: auto; }
  .help-table.stacks tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
  .help-table.stacks td { border: 0; padding: 2px 0; }
  .help-table.stacks td:first-child { font-weight: 700; }
  .help-table.stacks td:nth-child(n+3)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-soft); }
  .help-table.stacks td:empty { display: none; }
}

/* E5 (L-4): Location, a cancellation's reason and GHI's notes are two lines
   that grow with what's typed (site.js where field-sizing isn't known). */
textarea.grow { min-height: calc(3em + 29px); field-sizing: content; resize: none; overflow: hidden; }

/* E6 (S-7, L-19): a change request's two tables share their column widths,
   and a long value (a double contract number) breaks instead of pushing the
   page sideways. GHI's apply page too. */
.lines-table { table-layout: fixed; }
.lines-table th, .lines-table td { overflow-wrap: break-word; }
.lines-table th:first-child, .lines-table td:first-child { width: 30%; }
.lines-table.apply-table th:first-child, .lines-table.apply-table td:first-child { width: 6.5em; }
/* Apply or Decline, one above the other (W-30). */
.apply-choice label { display: block; font-weight: 400; margin: 0; white-space: nowrap; }
.lines-table.apply-table input[type=text] { min-width: 0; }

/* E7 (S-8): the preview's line drops its empty right-hand column, and a long
   name shrinks to fit its line (site.js) rather than breaking mid-word. */
.preview .pline:not(.pline-warn) { grid-template-columns: 76px minmax(0, 1fr); }
.preview .pline .ptext { overflow-wrap: normal; word-break: normal; }
.preview .pline .ptext.squeezed { white-space: nowrap; }
@media (max-width: 480px) {
  .preview .pline:not(.pline-warn) { grid-template-columns: minmax(0, 1fr); }
}
/* (S-9) The line-kind buttons wrap instead of cutting their words, and an
   urn's two faces stack below about 1100 pixels. */
.type-bar { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
@media (max-width: 1100px) {
  .row.faces { flex-direction: column; }
  .row.faces > div { width: 100%; min-width: 0 !important; }
}
@media (max-width: 640px) {
  .type-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* G-3, W-25: options as columns on the Engraving step, one per option, side
   by side where they fit and stacked on a phone. The previews give way to
   the columns, and each column's two faces stack inside it. */
.option-cols.on { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.option-cols.on .lines-layout { display: block; }
.option-cols.on .preview-col, .option-cols.on .face-previews { display: none; }
.option-cols.on .row.faces { flex-direction: column; }
.option-cols.on .row.faces > div { width: 100%; min-width: 0 !important; }
.option-col .option-comment { margin-top: 12px; }
.options-ask #option-count-row { margin-top: 10px; }
.options-ask #option-count-row select { max-width: 120px; }

/* E8 (L-10; Q40): on a phone a tracker step's date and name go on their own
   line under its title; past eight steps the middle folds (site.js). */
@media (max-width: 640px) {
  .tracker .hint { display: block; margin-left: 0; }
}
.tracker li.tracker-more::before { display: none; }
.tracker li.tracker-more { padding: 2px 0 10px 10px; }

/* E9 (L-9): proof options sit in a grid of equal columns, captions, pictures
   and wordings each on one line across a row of them. */
.proof-designs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; align-items: start; }
.proof-option { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; flex: none; }
.proof-option > a { align-self: start; }
.proof-option .option-wording { margin: 0 0 12px; }

/* E11 (S-13): a file's name wraps (up to four lines) instead of being cut
   at about 12 characters, so two photos taken seconds apart can be told
   apart by the end of the name. */
.thumb .name {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
}

/* E13 (Q67): a row sentence's date and "(9 days)" stay on one line (orders.status_sentence). */
.held { white-space: nowrap; }

/* E12, the small ones. */
/* L-11: rows of fields are spaced like the fields within them. */
.row + .row { margin-top: 20px; }
/* L-11: two fields stay level when one label wraps. */
.row.line-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; }
.row.line-up > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.row.line-up > div > label { align-self: end; }
/* A field keeps its own height when a neighbour's opens a box under it
   (# of people's More), instead of stretching to the taller row. */
.row.line-up > div > :not(label) { align-self: start; }
/* L-11: Existing engraving's questions have no browser-grey box. */
fieldset.q-group { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
fieldset.q-group legend { padding: 0; }
/* L-11: the step names don't leave Review alone on a line. */
@media (max-width: 640px) {
  .progress .steplinks { gap: 2px 12px; font-size: 14px; }
}
/* L-12: space under the page's button row; no empty spacer on a phone. */
#submit-area .actions { margin-bottom: 28px; }
@media (max-width: 640px) { .actions .spacer { display: none; } }
/* L-17: Help is the narrow page, centred. */
main.help-page { max-width: 920px; }
main.help-page .help-doc { max-width: none; }
/* L-18: no rule over a fold that is the first thing in its panel; an
   address breaks at its "@" or a dot; one line per version at desk width. */
.admin-panel > details:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.address { overflow-wrap: normal; }
.notice.version-row { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px 16px; font-size: 16px; }
.notice.version-row .hint { font-size: 14px; }
/* L-20: Change advisor and Email the advisor on one row, level with the list. */
.advisor-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.advisor-tools form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1 1 320px; margin: 0; }
.advisor-tools select { flex: 1 1 200px; width: auto; }
/* L-21: one size of tick box (22px), and links a thumb can hit. */
:where(input[type="checkbox"]) { width: 22px; height: 22px; accent-color: var(--accent); }
.progress .steplinks a, .progress .steplinks .here { display: inline-block; padding: 8px 0; }
.proof-versions a { display: inline-block; padding: 8px 0; }

/* The eye on a password box (the webforms review, W-1; password_eye.js). */
.pw-box { position: relative; display: block; }
.pw-box input { padding-right: 48px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  cursor: pointer; font-size: 20px; line-height: 1; padding: 6px; color: inherit; opacity: .55; }
.pw-eye.on, .pw-eye:hover, .pw-eye:focus-visible { opacity: 1; }

/* W-40 (2026-10-22): a file marked for removal keeps its name to one line,
   cut with an ellipsis (the full name is the title, and the list view),
   under the one red tag. The E11 wrap above is for the files that stay. */
.thumb.misfiled .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* W-62, G-8 (2026-10-22): Help's contents list and search box. */
.help-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.help-tools label { margin: 0; }
.help-tools input[type=search] { flex: 1 1 240px; max-width: 420px; }
.help-contents { margin: 0 0 20px; }
.help-contents ol { margin: 6px 0 0; padding-left: 22px; }
.help-contents li { margin: 3px 0; font-size: 16px; }
.help-contents li.lvl4 { margin-left: 18px; font-size: 15px; }
.help-hits { list-style: none; padding: 0; margin: 0 0 20px; }
.help-hits li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.help-hits .where { color: var(--ink-soft); font-size: 14px; margin-left: 6px; }
.help-hits .snippet { color: var(--ink-soft); font-size: 15px; margin-top: 2px; }
.help-hits mark { background: var(--accent-wash); color: inherit; padding: 0 1px; }
.help-doc h2, .help-doc h3, .help-doc h4 { scroll-margin-top: 80px; }