/* ============================================================================
   crit — review chrome.
   Light mode is the default (D-040); dark sits behind a per-device toggle
   (top right). The dark ground exists so the white ICB sheets read true; light
   is the mode the room asked for. In BOTH modes nothing here may
   restyle, tint, shadow or filter a frame's own artwork: the frame wrapper,
   the image and the mark layer are identical whichever palette is on.
   Every colour is a token on :root; [data-theme="light"] swaps the tokens and
   nothing else.
   Laptop only: fixed 1280px minimum width, no responsive work, no vh units
   (every height is a literal pixel value or measured in JS).
   ========================================================================= */

:root {
  --fg:            #fafafa;
  --fg-secondary:  #a3a3a3;
  --fg-muted:      #737373;
  --bg:            #0a0a0a;
  --bg-card:       #141414;
  --bg-elevated:   #1a1a1a;
  --bg-hover:      #222222;
  --bg-pad:        #101010;   /* the note pad ground, a step below the card */
  --bg-sunken:     #121212;   /* frozen / read-only notes, thread heads */
  --bg-chip:       #191919;
  --border:        #262626;
  --border-subtle: #1f1f1f;
  --border-hover:  #363636;
  --gold:          #c9b896;
  --gold-hover:    #d8c9a8;
  --gold-ink:      #12100c;   /* text on a gold fill */
  --lavender:      #a78bfa;

  /* semantic text colours */
  --ok:    #6ee7a8;
  --warn:  #e8b465;
  --bad:   #f08c8c;
  /* rating fills are the same pastel in both modes; their ink is fixed dark */
  --ok-fill:   #6ee7a8;  --ok-ink:   #06210f;
  --warn-fill: #e8b465;  --warn-ink: #241704;
  --bad-fill:  #f08c8c;  --bad-ink:  #2a0d0d;

  /* tinted borders / grounds for chips and status pills */
  --tint-lavender-border: #2d2540;
  --tint-gold-border:     #3a3428;
  --tint-gold-bg:         #17150f;
  --tint-ok-border:       #1d3a29;
  --tint-warn-border:     #3a2f1c;
  --tint-bad-border:      #3d2626;

  /* the four content pillars: only the pillar dots, tags and the pillar roots
     of the hierarchy diagram use these. Restrained, distinct in hue, and
     neither the gold nor the lavender. */
  --pillar-1: #6db9b3;
  --pillar-2: #d68aa6;
  --pillar-3: #a7b56f;
  --pillar-4: #7c9fd6;

  --topbar-bg:    rgba(10, 10, 10, 0.94);
  --scrim:        rgba(4, 4, 4, 0.86);
  --shadow-frame: 0 10px 40px rgba(0, 0, 0, .5);
  --shadow-pop:   0 12px 40px rgba(0, 0, 0, .6);
  --frame-outline: 0 solid transparent;  /* light mode draws a hairline round the sheet */

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --topbar-h: 52px;

  color-scheme: dark;
}

/* Light mode. Tokens only — no selector below this block knows which mode is on.
   The ground is a neutral grey, not warm: a warm ground would tint the eye's
   reading of the near-white sheets, which is exactly what must not happen. */
:root[data-theme="light"] {
  --fg:            #161616;
  --fg-secondary:  #4b4b4b;
  --fg-muted:      #737373;
  --bg:            #e6e6e4;
  --bg-card:       #f3f3f1;
  --bg-elevated:   #fbfbfa;
  --bg-hover:      #e9e9e6;
  --bg-pad:        #ededea;
  --bg-sunken:     #ebebe8;
  --bg-chip:       #e6e6e3;
  --border:        #cfcfcb;
  --border-subtle: #dededb;
  --border-hover:  #b8b8b3;
  --gold:          #86703f;
  --gold-hover:    #6f5c33;
  --gold-ink:      #ffffff;
  --lavender:      #6247c9;

  --ok:    #1d7345;
  --warn:  #9a5a0c;
  --bad:   #b33636;

  --tint-lavender-border: #d3cbf1;
  --tint-gold-border:     #d6c9a8;
  --tint-gold-bg:         #f4efe2;
  --tint-ok-border:       #b9e0c9;
  --tint-warn-border:     #efd6b0;
  --tint-bad-border:      #efc1c1;

  --pillar-1: #237a73;
  --pillar-2: #b0446c;
  --pillar-3: #667a22;
  --pillar-4: #3459a8;

  --topbar-bg:    rgba(230, 230, 228, 0.94);
  --scrim:        rgba(30, 30, 28, 0.55);
  --shadow-frame: 0 10px 34px rgba(0, 0, 0, .18);
  --shadow-pop:   0 12px 40px rgba(0, 0, 0, .2);
  --frame-outline: 1px solid #c9c9c5;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 1280px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 10px; }
a { color: var(--lavender); }

.label,
.meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

.mono { font-family: var(--mono); }

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

.btn {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border-hover); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-elevated); color: var(--fg-secondary); border-color: var(--border); }

.btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); font-weight: 600; }
.btn-primary:hover { background: var(--gold-hover); color: var(--gold-ink); border-color: var(--gold-hover); }
.btn-primary:disabled:hover { background: var(--gold); color: var(--gold-ink); }

.btn-quiet { background: transparent; }
.btn-danger { color: var(--bad); }

.btn-sm { padding: 3px 8px; font-size: 0.75rem; }

.btn[aria-pressed="true"] {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
  font-weight: 600;
}

/* Mark mode. One button, in the viewer, a pencil. Off: gold outline, so it is
   findable without being loud. On: gold fill. */
.btn-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  color: var(--gold);
  background: transparent;
  border: 1.5px solid var(--gold);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.btn-mark:hover { background: var(--tint-gold-bg); }
.btn-mark[aria-pressed="true"] {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}
.btn-mark svg { display: block; }

/* Light / dark toggle, top right. Shows the mode you would switch TO. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  color: var(--fg-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-hover); }
.theme-toggle svg { display: block; }
.theme-toggle .ico-moon { display: none; }
.theme-toggle[aria-pressed="true"] .ico-sun { display: none; }
.theme-toggle[aria-pressed="true"] .ico-moon { display: block; }

/* ------------------------------------------------------------- identity gate */

.gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate[hidden] { display: none; }

.gate-panel {
  width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 24px;
}
.gate-panel h1 { font-size: 1.5rem; margin: 6px 0 12px; }
.gate-note { color: var(--fg-secondary); font-size: 0.8125rem; }
.gate-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin: 16px 0 6px;
}
.gate-error { color: var(--bad); font-size: 0.8125rem; margin: 8px 0 0; }
.gate-actions { display: flex; gap: 8px; margin-top: 18px; }

input[type="text"],
textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  resize: vertical;
}
input[type="text"]:focus,
textarea:focus { outline: none; border-color: var(--gold); }
textarea { line-height: 1.5; min-height: 68px; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; }
.brand { font-family: var(--mono); font-size: 0.8125rem; color: var(--fg-secondary); }
.brand-sep { color: var(--fg-muted); }
.brand-crit { font-weight: 600; letter-spacing: -0.02em; color: var(--gold); }
.topbar-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }

/* Fixed-width slot, sized for "synced · 59 min ago" (19 mono glyphs plus their
   letter-spacing), right-aligned so the text hugs the toggle and the actor chip
   never moves when the bucket changes. The absolute time lives in the title. */
.sync {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: calc(19ch + 19 * 0.05em);
  text-align: right;
  white-space: nowrap;
}
.sync.is-bad { color: var(--bad); }

.actor-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.8125rem;
  cursor: pointer;
}
.actor-chip:hover { border-color: var(--border-hover); }
.actor-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-muted); }

/* --------------------------------------------------------------- view shell */

.view { padding: 22px 24px 96px; }
.view[hidden] { display: none; }

.wrap { max-width: 1560px; margin: 0 auto; }

/* ------------------------------------------------------------- package pads */

.package {
  max-width: 1560px;
  margin: 0 auto 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px 18px;
}
.package-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.package-head h2 { font-size: 1.125rem; }
.package-sub { color: var(--fg-secondary); font-size: 0.8125rem; max-width: 760px; }

/* one ask takes the full width, two sit side by side */
.asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-top: 16px; }
.ask {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px 16px 14px;
}
.ask-general { margin-top: 16px; }
.ask h3 { font-size: 0.9375rem; margin-bottom: 6px; }
.ask-body { color: var(--fg-secondary); font-size: 0.8125rem; }
.ask-question {
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 8px 0 0;
}

/* ------------------------------------------- groupings: the hierarchy diagram */

/* The diagram IS the grouping control. One column per root of the active axis
   (form factor or pillar), a thin tree of family nodes beneath each, and the
   asset / frame counts under every family. Markup comes from hierarchy.js;
   the roots and the toggle pair share data-act="grouping" with app.js. */
.hier {
  max-width: 1560px;
  margin: 0 auto 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px 16px;
}
.hier-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.hier-head-left { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.hier-totals { font-size: 0.875rem; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.hier-axis { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.seg { display: inline-flex; gap: 4px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.seg .btn { border-color: transparent; background: transparent; }
.seg .btn[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }

/* two rows: roots (row 1, one shared height) and their branches (row 2).
   Column count is data-derived, so the template is set inline by hierarchy.js. */
.hier-tree { position: relative; display: grid; grid-auto-rows: auto; column-gap: 24px; align-items: stretch; }
.hier-tree > .hier-root { grid-row: 1; }
.hier-tree > .hier-branch { grid-row: 2; min-width: 0; }

/* a root: the group it names, its axis as an eyebrow, its totals beneath.
   --pillar is set inline by hierarchy.js on pillar roots only. */
.hier-root {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pillar, var(--border-hover));
  border-radius: 7px;
  padding: 9px 12px 9px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hier-root:hover { background: var(--bg-hover); border-color: var(--border-hover); border-left-color: var(--pillar, var(--gold)); }
.hier-root-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pillar, var(--fg-muted));
}
.hier-root-name { display: block; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; margin-top: 1px; }
.hier-root-totals {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.hier-root.is-muted { background: transparent; border-style: dashed; border-left-style: solid; }
.hier-root.is-muted .hier-root-name { color: var(--fg-secondary); font-weight: 500; }

/* the branch: family nodes hang off a trunk drawn per node, so the line ends at
   the last tick and never runs past it */
.hier-branch { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0 16px; padding-left: 18px; }
.hier-node {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 9px 6px 27px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hier-node:hover { background: var(--bg-hover); border-color: var(--border-subtle); }
.hier-node::before { content: ''; position: absolute; left: -18px; top: 15px; width: 14px; height: 1px; background: var(--border-hover); }
.hier-node::after  { content: ''; position: absolute; left: -19px; top: -7px; bottom: 0; width: 1px; background: var(--border-hover); }
.hier-node:first-child::after { top: -11px; }
.hier-node:last-child::after  { bottom: calc(100% - 15px); }

.hier-dot {
  position: absolute;
  left: 10px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pillar);
  border: 1.5px solid var(--pillar);
}
.hier-dot.is-none { background: transparent; border-color: var(--fg-muted); }
.hier-node-main { display: block; line-height: 1.4; }
.hier-no { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-muted); margin-right: 6px; }
.hier-title { font-size: 0.8125rem; font-weight: 500; }
.hier-node.is-quiet .hier-title { color: var(--fg-secondary); font-weight: 400; }
.hier-tag {
  display: inline-block;
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  vertical-align: 1px;
}
.hier-count {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* the other axis, as a legend row: small roots that regroup and scroll */
.hier-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 16px;
}
.hier-legend .label { margin-right: 4px; }
.hier-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px 3px 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hier-key:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--border-hover); }
.hier-key .hier-dot { position: static; }
.hier-key .hier-tag { margin-left: 0; }
.hier.is-enter .hier-key { animation: crit-fade-in 240ms ease-out 120ms both; }

/* the one-line glossary under the tree, the terms in teaching order */
.hier-gloss {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--fg-muted);
}
.hier-gloss .label { margin-right: 7px; color: var(--fg-secondary); }

/* Regroup motion. Cards and family nodes FLIP by slug (hierarchy.js sets the
   inverse transform, this transition carries them home); the old roots fade
   out as ghosts over the new ones fading in; group heads fade in. Only the
   user's grouping action adds these classes, never a poll. */
.family.is-flip,
.hier-node.is-flip { transition: transform 480ms cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.group-head.is-enter { animation: crit-fade-in 200ms ease-out both; }
.hier.is-enter .hier-root { animation: crit-fade-in 240ms ease-out 120ms both; }
.hier.is-enter .hier-node::before,
.hier.is-enter .hier-node::after { animation: crit-fade-in 240ms ease-out 200ms both; }
.hier-ghost { position: absolute; margin: 0; pointer-events: none; }
.hier.is-enter .hier-ghost { animation: crit-fade-out 160ms ease-in both; }

@keyframes crit-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes crit-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .family.is-flip,
  .hier-node.is-flip { transition: none; }
  .group-head.is-enter,
  .hier.is-enter .hier-root,
  .hier.is-enter .hier-node::before,
  .hier.is-enter .hier-node::after,
  .hier.is-enter .hier-key,
  .hier.is-enter .hier-ghost { animation: none; }
}

.group-head {
  max-width: 1560px;
  margin: 26px auto 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.group-head h2 { font-size: 0.9375rem; color: var(--fg-secondary); font-weight: 500; }

/* -------------------------------------------------------------- family card */

.families { max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.family {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.family.is-anchor { border-color: var(--gold); }

.family-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
/* the catalogue number, #N. Empty (but still 40px wide, so titles align) for
   the two families that are not catalogue types. */
.family-no {
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--fg-muted);
  flex: 0 0 auto;
  padding-top: 1px;
  min-width: 40px;
  font-variant-numeric: tabular-nums;
}
.family-id { flex: 1; min-width: 0; }
.family-id h2 { font-size: 1.0625rem; }
.family-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.family-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.chip {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
}
.chip-pillar { color: var(--lavender); border-color: var(--tint-lavender-border); }
.chip-new { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.chip-ref { color: var(--gold); border-color: var(--tint-gold-border); }
.chip-current { color: var(--gold); border-color: var(--tint-gold-border); background: var(--tint-gold-bg); }
.chip-retired { color: var(--bad); border-color: var(--tint-bad-border); }

.counts { display: flex; gap: 10px; align-items: center; }
.count { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg-muted); }
.count b { font-weight: 500; color: var(--fg-secondary); }
.count.is-draft b { color: var(--warn); }
.count.is-submitted b { color: var(--lavender); }
.count.is-responded b { color: var(--ok); }

/* thumbnails */

.family-body { padding: 16px 20px; }

.strip { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }

.thumb {
  position: relative;
  flex: 0 0 auto;
  width: 106px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.thumb img {
  display: block;
  width: 106px;
  height: 132px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #fff;
}
.thumb:hover img { border-color: var(--gold); }
.thumb.is-retired img { opacity: .42; }
.thumb-cap {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--fg-muted);
  width: 106px;
  overflow-wrap: anywhere;
}
/* Never overlaid on the artwork: a badge sitting on the sheet hides exactly the
   kind of detail the strip exists to show. Labels go under the frame. */
.thumb-flag {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  width: 106px;
}

/* a set is shown as a fanned stack */
.stack {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 152px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.stack img {
  position: absolute;
  top: 8px;
  left: 13px;
  width: 106px;
  height: 132px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #fff;
  transform-origin: 50% 100%;
}
.stack img:nth-child(1) { transform: rotate(-7deg) translateX(-6px); filter: brightness(.72); }
.stack img:nth-child(2) { transform: rotate(-3.5deg) translateX(-3px); filter: brightness(.86); }
.stack img:nth-child(3) { transform: rotate(0deg); }
.stack:hover img:nth-child(3) { border-color: var(--gold); }
.stack-cap {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--fg-muted);
}

/* profile-grid tiles: 1:1 centre crops, three wide */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 432px;
}
.tiles button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.tiles img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: #fff;
}
.tiles button:hover img { outline: 2px solid var(--gold); outline-offset: -2px; }
.tiles-empty { color: var(--fg-muted); font-size: 0.8125rem; }

.family-empty { color: var(--fg-muted); font-size: 0.8125rem; }

/* ------------------------------------------------------------------- rating */

.rating { display: inline-flex; align-items: center; gap: 6px; }
.rating .btn-sm { min-width: 54px; text-align: center; }
.rating .btn[aria-pressed="true"][data-rating="keep"]  { background: var(--ok-fill);   border-color: var(--ok-fill);   color: var(--ok-ink); }
.rating .btn[aria-pressed="true"][data-rating="revise"]{ background: var(--warn-fill); border-color: var(--warn-fill); color: var(--warn-ink); }
.rating .btn[aria-pressed="true"][data-rating="drop"]  { background: var(--bad-fill);  border-color: var(--bad-fill);  color: var(--bad-ink); }
.rating-others { display: inline-flex; gap: 6px; margin-left: 4px; }
.rating-other {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---------------------------------------------------------------- note pads */

.pad {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-pad);
  padding: 14px 20px 16px;
}
.pad.pad-inline { border-top: 0; background: transparent; padding: 12px 0 0; }
/* beside the frame: the card provides the border, the pad just fills it */
.pad.pad-side { border-top: 0; background: transparent; padding: 14px 16px 16px; }
.pad-side .pad-head { flex-wrap: wrap; row-gap: 8px; }
.pad-side textarea { min-height: 96px; }

.pad-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pad-head .label { flex: 1; min-width: 0; }

.notes { display: flex; flex-direction: column; gap: 10px; }

.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--author, var(--fg-muted));
  border-radius: 6px;
  background: var(--bg-elevated);
  padding: 10px 12px;
}
.note.is-active { border-color: var(--gold); border-left-color: var(--author, var(--gold)); }
.note.is-readonly { background: var(--bg-sunken); }
.note.is-frozen { background: var(--bg-sunken); border-style: solid; }

.note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.note-author {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--author, var(--fg-secondary));
  text-transform: uppercase;
}
.note-when { font-family: var(--mono); font-size: 0.6875rem; color: var(--fg-muted); }
.note-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.note-body { white-space: pre-wrap; font-size: 0.875rem; color: var(--fg); overflow-wrap: anywhere; }
.note-body.is-empty { color: var(--fg-muted); font-style: italic; }

.marks-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mark-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-secondary);
  background: var(--bg-chip);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px 2px 8px;
  cursor: pointer;
}
.mark-chip.is-selected { border-color: var(--gold); color: var(--fg); }
.mark-chip .x {
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px 4px;
}
.mark-chip .x:hover { color: var(--bad); }

.pad-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pad-foot .note-hint { color: var(--fg-muted); font-size: 0.75rem; }

.autosave {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-muted);
}
.autosave.is-saving { color: var(--warn); }
.autosave.is-saved { color: var(--ok); }
.autosave.is-error { color: var(--bad); }

/* ------------------------------------------------------------------- thread */

.thread { max-width: 1560px; margin: 26px auto 0; }
.thread-label { margin: 0 0 10px; }
.thread-tabs { display: flex; gap: 6px; padding: 12px 16px 0; }

.submit-entry {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.submit-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.status-pill {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  color: var(--fg-secondary);
}
.status-pill.is-pending { color: var(--warn); border-color: var(--tint-warn-border); }
.status-pill.is-picked_up { color: var(--lavender); border-color: var(--tint-lavender-border); }
.status-pill.is-responded { color: var(--ok); border-color: var(--tint-ok-border); }
.status-pill.is-declined { color: var(--bad); border-color: var(--tint-bad-border); }
.submit-entry-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.response {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 14px;
  background: var(--bg-pad);
  font-size: 0.8125rem;
  color: var(--fg-secondary);
}
.response b { color: var(--ok); font-weight: 500; }
/* a written reply keeps its line breaks: it is an answer, not a change note */
.response-body { white-space: pre-wrap; color: var(--fg); margin-top: 6px; }

/* ----------------------------------------------------------------- lightbox */

.lb-head {
  max-width: 1560px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lb-title { flex: 1; min-width: 0; }
.lb-title h1 { font-size: 1.25rem; }
.lb-title .meta { margin-top: 3px; }
.lb-nav { display: flex; gap: 6px; align-items: center; }

/* Two-granularity navigation: assets top right, slides in the stage bar. The
   count is a fixed-width mono pair so the arrows never shuffle between frames. */
.nav-ctl { display: inline-flex; align-items: center; gap: 4px; }
.btn-mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 6px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-count .nav-n { font-weight: 500; font-size: 0.75rem; color: var(--fg-secondary); }
.nav-count .label { font-size: 0.625rem; }
.stage-bar .slide-nav { margin-left: 6px; }

select {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  max-width: 420px;
}
select:focus { outline: none; border-color: var(--gold); }

.panes {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 24px;
  align-items: start;
}

/* right column: the live pad. The mockup is a modal now, not a column. */
.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.stage {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stage-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stage-bar > .label { flex: 0 0 auto; }

/* The frame and its tool rail share a row. The rail hugs the frame's right
   edge, top-aligned, OUTSIDE #frame-wrap, and sizeStage() takes its measured
   width and this gap off the width budget, so it can never overlay the sheet. */
.stage-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.stage-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rail-item { position: relative; display: block; }
.stage-rail .btn-mark { width: 36px; height: 36px; }
.btn-phone[aria-pressed="true"] {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}
/* Hover-only label pill, to the RIGHT of its button, into the stage's spare
   width, so it never sits over the sheet. aria-hidden: the button's title
   carries the same words for AT, so the pill is never duplicated text. */
.rail-label {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: var(--shadow-pop);
}
.btn-mark:hover + .rail-label,
.btn-mark:focus-visible + .rail-label { display: block; }

/* The frame wrapper IS the image box: the img fills it exactly, so
   getBoundingClientRect() on .mark-layer is the frame's rendered rectangle and
   mark fractions normalise against the artwork, never the viewport. */
.frame-wrap {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: var(--shadow-frame);
  /* outline, never border: a border would change the wrapper's content box
     and with it the rectangle every mark fraction normalises against. */
  outline: var(--frame-outline);
}
.frame-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  /* No filter, no tint, no blend mode. The artwork is the thing being judged. */
}
.mark-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mark-layer.is-marking {
  pointer-events: auto;
  cursor: crosshair;
}

.mark {
  position: absolute;
  pointer-events: none;
  border: 2px solid var(--author, var(--gold));
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.mark.is-clickable { pointer-events: auto; cursor: pointer; }
.mark.is-hl { box-shadow: 0 0 0 3px rgba(201, 184, 150, .55), inset 0 0 0 1px rgba(0,0,0,.4); }
.mark.is-selected { border-style: dashed; box-shadow: 0 0 0 3px rgba(201, 184, 150, .8); }
/* The number sits INSIDE the top-left corner. Outside it would clip off the
   frame for any mark drawn at the very edge, which is exactly where a crop
   complaint tends to land. */
.mark-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  padding: 3px 5px;
  background: var(--author, var(--gold));
  color: #0a0a0a;
  border-radius: 0 0 3px 0;
  font-weight: 500;
}
.mark-pin {
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .55);
}
.mark-pin .mark-num { position: static; transform: none; border-radius: 3px; }

.mark-draft {
  position: absolute;
  border: 2px dashed var(--gold);
  background: rgba(201, 184, 150, .12);
  pointer-events: none;
}

/* the "Interface simulated" line, now rendered by the modal */
.mockup-note { color: var(--fg-muted); font-size: 0.75rem; text-align: center; max-width: 340px; }

/* ------------------------------------------------------------------- panels */

.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.panel {
  width: 720px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px 20px;
}
.panel h2 { font-size: 1.125rem; margin-bottom: 4px; }
.panel-sub { color: var(--fg-secondary); font-size: 0.8125rem; }
.panel-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.panel-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--author, var(--fg-muted));
  border-radius: 6px;
  background: var(--bg-elevated);
  padding: 10px 12px;
}
.panel-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.panel-row-body { font-size: 0.8125rem; color: var(--fg-secondary); overflow-wrap: anywhere; }
.panel-warn {
  margin-top: 7px;
  font-size: 0.75rem;
  color: var(--warn);
  font-family: var(--mono);
}
.panel-actions { display: flex; gap: 10px; margin-top: 20px; }
.panel-empty { color: var(--fg-muted); font-size: 0.8125rem; }

/* -------------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  max-width: 620px;
}
.toast[hidden] { display: none; }
.toast.is-bad { border-color: var(--tint-bad-border); color: var(--bad); }

/* ------------------------------------------------------------------ helpers */

.hint {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }