/* ─────────────────────────────────────────────────────────────────────────────
   REFRESH LAYER — reversible.

   The firm workspace rebuilt at the density of the Haria CRM: 14px text, a 21px
   page title, 9px table rows, cards with a header band, rounded pills, stat
   figures, tabular numerals. Information first, one screenful at a time.

   TraceLaw's colours are kept: warm bone canvas, sand hairlines, the navy
   sidebar, gold as the single accent. The serif is kept for page and card titles
   only; everything else is IBM Plex Sans.

   Earlier passes of this file went the other way — an editorial document with a
   52px serif masthead and no card chrome. That was the wrong read, so it is gone
   rather than layered over and this file says one thing.

   TO REVERT: delete the two lines marked `refresh layer` — one in
   templates/base.html, one in templates/_fonts.html. Nothing else depends on it.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Barlow out, IBM Plex Sans in. Barlow is a slightly condensed grotesque drawn
     for signage; at 13px in a dense table its counters close up. Plex was drawn
     for interfaces and technical documents, and it is already the face of the
     client questionnaire, so both halves of the product speak in one voice. The
     licensed names stay first so an @font-face for DIN Next is the only change
     needed later. */
  --font-sans: "DIN Next", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* The whole scale comes down. app.css reads these tokens everywhere, so this
     is what actually changes the density of every screen. */
  --fs-display: 28px; --fs-h1: 21px; --fs-h2: 15px; --fs-h3: 14px; --fs-h4: 13px;
  --fs-lede: 15px;
  --fs-body: 14px; --fs-small: 13px; --fs-caption: 11px;

  /* Tightened to match. The small end is untouched — it is already right. */
  --s5: 16px; --s6: 22px; --s7: 28px; --s8: 36px; --s9: 56px;

  --r: 10px; --r-lg: 12px;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 650;

  /* Two neutrals the base palette was missing: a hairline softer than sand for
     dividing rows inside a card, and the faint tint a table header sits on. */
  --line-soft: color-mix(in srgb, var(--sand) 45%, var(--white));
  --tint: color-mix(in srgb, var(--paper) 70%, var(--white));
}

body { font-size: var(--fs-body); font-weight: var(--weight-body); letter-spacing: -0.003em; }

/* Numbers line up column to column. */
.nums, .date, td, th, .nav-count, .tally { font-variant-numeric: tabular-nums; }

/* ── Type ────────────────────────────────────────────────────────────────────
   The serif is a title face now, not a body face: page titles and card headers
   only. app.css set cells and helper text at 300 to compensate for Barlow being
   dark at 400; on Plex that reads as disabled. */
h1 { font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }
h2, h3, h4 { font-weight: var(--weight-strong); letter-spacing: -.01em; }
td, .note, .help, .small, .q-help, .q-meta, .sub, .meta,
input, select, textarea, .deflist dd { font-weight: var(--weight-body); }
th, .strong, .who-name { font-weight: var(--weight-medium); }

/* A label above a block of content: small, tracked, uppercase. */
.section-label, thead th {
  font-size: var(--fs-caption); font-weight: var(--weight-strong);
  letter-spacing: .07em; text-transform: uppercase; color: var(--umber);
}

/* ── Page frame ──────────────────────────────────────────────────────────────
   Wide and shallow. The old 96px of bottom padding put the end of every page a
   scroll below the content that ended it. */
.container { max-width: 1500px; padding: 22px 22px 48px; margin: 0; }

.page-head {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-bottom: var(--s5); padding-bottom: 0; border-bottom: none;
}
.page-head h1 { margin: 0; font-size: var(--fs-h1); }
.page-head .sub {
  flex-basis: 100%; margin: 0;
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--umber);
}
.page-head .sub code { font-size: 12px; }

.lead { font-size: var(--fs-lede); margin: 0 0 var(--s5); max-width: 78ch; }

/* ── Cards ───────────────────────────────────────────────────────────────────
   A panel is a card: white on bone, hairline border, a header band carrying the
   title and whatever belongs beside it. */
.panel {
  background: var(--white); border: 1px solid var(--sand);
  border-radius: var(--r); padding: 0; margin: 0 0 var(--s4);
  overflow: hidden;
}
.panel > .panel-head,
.panel > h2:first-child {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0; padding: 11px var(--s5);
  border-bottom: 1px solid var(--line-soft); border-top: none;
  background: var(--tint);
}
.panel > .panel-head h2, .panel > h2:first-child { font-size: var(--fs-h2); margin: 0; }
.panel > .panel-head > .status,
.panel > .panel-head > .tally,
.panel > .panel-head > p:last-child { margin-left: auto; }

/* Everything that is not the header gets the body padding. */
.panel > *:not(.panel-head):not(h2:first-child) { margin: 0; padding: 0 var(--s5); }
.panel > *:not(.panel-head):not(h2:first-child):first-child { padding-top: var(--s5); }
.panel > *:not(.panel-head):not(h2:first-child):last-child { padding-bottom: var(--s5); }
.panel > .panel-head + * { padding-top: var(--s5); }

/* The spacing rule has to carry the same :not() chain as the reset above it, or
   it loses on specificity and every child in the card welds to the next — which
   is exactly what happened to the headings inside "Link and delivery". */
.panel > * + *:not(.panel-head):not(h2:first-child) { margin-top: var(--s4); }
.panel > * + h3:not(.panel-head), .panel > * + h4:not(.panel-head) { margin-top: var(--s6); }
.panel > h3 + *, .panel > h4 + * { margin-top: var(--s3); }
.panel h3 { font-size: var(--fs-h3); }

/* Panels that are a single form or prompt keep a comfortable measure. */
.panel-narrow { max-width: 420px; }
.panel-form   { max-width: 560px; }
.panel-wide   { max-width: 720px; }
.panel-read   { max-width: 900px; }
.panel-prompt { max-width: 520px; }
.panel-quiet  { background: var(--paper); }

/* A section heading not wrapped in a card — the overview's "Needs your
   attention" — is a label, not a headline. */
.container > h2 {
  font-family: var(--font-sans); font-size: var(--fs-caption);
  font-weight: var(--weight-strong); letter-spacing: .09em; text-transform: uppercase;
  color: var(--umber); margin: var(--s6) 0 var(--s3);
}

/* ── Controls ────────────────────────────────────────────────────────────────*/
.btn, button, input, select, textarea { border-radius: 7px; }
.btn, button {
  min-height: 32px; padding: 0 12px;
  font-size: var(--fs-small); font-weight: var(--weight-medium); letter-spacing: 0;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease),
              color 120ms var(--ease);
}
.btn-compact, button.btn-compact { min-height: 28px; padding: 0 10px; font-size: 12px; }
@media (pointer: coarse) { .btn, button { min-height: 40px; } }

.btn:not(.btn-secondary):not(.btn-quiet):not(.btn-destructive),
button:not(.btn-secondary):not(.btn-quiet):not(.btn-destructive):not(.icon-btn):not(.control-group__go):not(.switch):not(.qrow__handle):not(.toast__close):not(.chip-email__signin):not(.chip-email__x):not(.sendmodal__close) {
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
}
.btn:not(.btn-secondary):not(.btn-quiet):not(.btn-destructive):hover,
button:not(.btn-secondary):not(.btn-quiet):not(.btn-destructive):not(.icon-btn):not(.control-group__go):not(.switch):not(.qrow__handle):not(.toast__close):not(.chip-email__signin):not(.chip-email__x):not(.sendmodal__close):hover {
  background: #1b2550; border-color: #1b2550;
}
.btn-secondary { border-color: var(--sand); background: var(--white); }
.btn-secondary:hover { background: var(--paper); border-color: var(--umber); }
.btn-quiet:hover { background: var(--paper); }

.toolbar { gap: var(--s2); margin-bottom: var(--s4); }
.toolbar:has(+ .toolbar-note) { margin-bottom: var(--s2); }
.toolbar-note { margin-bottom: var(--s4); max-width: 78ch; }

/* ── Forms ───────────────────────────────────────────────────────────────────*/
.field label, label {
  font-size: 12px; font-weight: var(--weight-strong); color: var(--umber);
  margin-bottom: 3px;
}
input, select, textarea {
  min-height: 34px; font-size: var(--fs-small);
  border-color: color-mix(in srgb, var(--sand) 75%, var(--ink) 10%);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 19, 52, .07);
}
.help { margin-top: 3px; font-size: 11.5px; }

/* ── Tables ──────────────────────────────────────────────────────────────────
   The core component, at CRM density: 13px rows, 9px of vertical padding, a
   faint band under the labels, hairlines between rows and none under the last.

   app.css makes `thead th` sticky, which forces an opaque fill on it — but the
   wrap only ever scrolls sideways, so nothing was ever sticking. Cells there
   also carry their own background and bottom border, so a row hover set on `tr`
   sits behind an opaque `td` and never appears; both are answered on the cell. */
.table-wrap { border: none; border-radius: 0; background: transparent; overflow-x: auto; }
table { font-size: var(--fs-small); }
thead th {
  position: static; background: var(--tint);
  padding: 9px 12px; border-bottom: 1px solid var(--sand);
}
tbody td, tbody th {
  background: transparent; padding: 9px 12px; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small); font-weight: var(--weight-body); color: var(--ink);
}
tbody th[scope="row"] { font-weight: var(--weight-medium); }
tbody tr { transition: background-color 120ms var(--ease); }
tbody tr:hover td, tbody tr:hover th { background: var(--tint); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

/* A table that is a card's whole body runs edge to edge inside it. */
.panel > .table-wrap { padding: 0; }
.panel > .table-wrap thead th:first-child,
.panel > .table-wrap tbody td:first-child,
.panel > .table-wrap tbody th:first-child { padding-left: var(--s5); }
.panel > .table-wrap thead th:last-child,
.panel > .table-wrap tbody td:last-child,
.panel > .table-wrap tbody th:last-child { padding-right: var(--s5); }

/* ── Pills ───────────────────────────────────────────────────────────────────
   A status is a pill, not a dot and a word. It reads at a glance down a column
   of thirty rows, which a 6px dot does not. */
.status, .confidence {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 13%, var(--white));
  color: color-mix(in srgb, var(--tone) 78%, var(--ink));
  font-size: var(--fs-caption); font-weight: var(--weight-strong);
  line-height: 1.55; white-space: nowrap; letter-spacing: .01em;
}
.status::before { display: none; }
/* The confidence values arrive lowercase from the model. */
.confidence { text-transform: capitalize; }
.col-status { width: 1%; white-space: nowrap; }

/* ── Key/value ───────────────────────────────────────────────────────────────*/
.deflist {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 7px 12px; font-size: var(--fs-small); margin: 0;
}
.deflist dt { color: var(--umber); font-weight: var(--weight-medium); font-size: var(--fs-small); }
.deflist dd { margin: 0; color: var(--ink); word-break: break-word; }

/* ── Stat figures ────────────────────────────────────────────────────────────
   What a run cost and covered, as numbers you can read from across the desk. */

/* ── Cards on the overview ───────────────────────────────────────────────────*/
.matter-card {
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
  transition: border-color 120ms var(--ease);
}
.matter-card:hover { border-color: var(--umber); }
.matter-card h3 { font-size: var(--fs-h3); }
.matter-card .meta { font-size: 11.5px; color: var(--umber); margin-bottom: 6px; }
.matter-card .plain { font-size: var(--fs-small); margin-bottom: 4px; }
.matter-card .obligation { font-size: 11.5px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────────
   Same navy, same order. The links become rounded tiles inset from the edge,
   which is what stops a navy column reading as one undifferentiated slab. */
.sidebar { padding: 14px 10px 0; }
.sidebar .wordmark { padding: 4px 8px 16px; }
.nav-label {
  font-size: 10px; font-weight: var(--weight-strong); letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-500); padding: 6px 10px; margin: 0;
}
.sidebar nav ul + .nav-label { margin-top: 10px; }
.sidebar nav a {
  min-height: 34px; padding: 6px 10px; margin-bottom: 1px;
  border-radius: 8px; border-left: none;
  font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--ink-100);
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); }
.sidebar nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .13); color: var(--white); border-left: none;
  box-shadow: inset 2px 0 0 var(--gold);
}
.nav-count { min-width: 20px; padding: 1px 6px; border-radius: 999px;
             font-size: 11px; font-weight: var(--weight-strong); }
.sidebar .sidebar-foot { padding: 10px; border-top-color: rgba(197, 206, 221, .14); }
.sidebar .sidebar-foot .who { border-radius: 8px; padding: 6px; }
.avatar { border-radius: 8px; font-weight: var(--weight-strong); font-size: 11px; }
.who-name { font-size: var(--fs-small); }
.who-role { font-size: 11px; }

/* The way out: a bordered, rounded control rather than a bare glyph, so it reads
   as a button before you hover it. */
.icon-btn {
  border-radius: 8px; border-color: rgba(197, 206, 221, .28);
  background: rgba(197, 206, 221, .06);
}
.icon-btn:hover { border-color: rgba(197, 206, 221, .45); }
.icon-btn svg { width: 17px; height: 17px; }

/* ── Small print ─────────────────────────────────────────────────────────────*/
.note, .help, .tally, .meta, .q-meta { font-size: var(--fs-small); }
.q-internal { font-size: 12.5px; border-radius: 8px; }
code, .link-box, pre { font-family: var(--font-mono); }
code { background: var(--paper); border: 1px solid var(--line-soft);
       border-radius: 5px; padding: 1px 5px; font-size: 12px; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Focus ───────────────────────────────────────────────────────────────────*/
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* ── A table that is the whole page ──────────────────────────────────────────
   The list screens put a bare .table-wrap straight into the page. Every other
   block of content on bone sits in a card, so these do too — otherwise the one
   table on the screen is the only thing without an edge. */
.container > .table-wrap {
  background: var(--white); border: 1px solid var(--sand);
  border-radius: var(--r); overflow: hidden; margin-bottom: var(--s4);
}
.container > .table-wrap thead th:first-child,
.container > .table-wrap tbody td:first-child,
.container > .table-wrap tbody th:first-child { padding-left: var(--s5); }
.container > .table-wrap thead th:last-child,
.container > .table-wrap tbody td:last-child,
.container > .table-wrap tbody th:last-child { padding-right: var(--s5); }

/* ═════════════════════════════════════════════════════════════════════════════
   RICHNESS — the parts of the reference that are not density

   Density made the screens compact but not *rich*. What the Haria CRM actually
   has that this did not: a brand masthead with real depth, figures big enough to
   read across a desk, icons on every nav item, colour-coded bars, and two
   columns of cards instead of one tall stack.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Nav icons ───────────────────────────────────────────────────────────────
   Decorative — the link's own text is the accessible name. */
.nav-ico { width: 17px; height: 17px; flex: none; opacity: .75; }
.sidebar nav a[aria-current="page"] .nav-ico { opacity: 1; }

/* ── Section labels ──────────────────────────────────────────────────────────
   A band of tiles needs a word over it saying what it counts. */
.section-title {
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--weight-strong);
  letter-spacing: .09em; text-transform: uppercase; color: var(--umber);
  margin: var(--s6) 0 10px;
}
.section-title:first-child { margin-top: 0; }

/* ── Stat tiles ──────────────────────────────────────────────────────────────
   The number first. A tile that links somewhere is a link, so the whole tile is
   the target rather than a word inside it. */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: var(--s5);
}
.stat {
  display: block; padding: 14px 16px; color: inherit; text-decoration: none;
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--r);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
a.stat:hover { border-color: var(--umber); text-decoration: none;
               box-shadow: 0 1px 3px rgba(10, 19, 52, .07); }
.stat .label {
  font-size: var(--fs-caption); font-weight: var(--weight-strong);
  letter-spacing: .07em; text-transform: uppercase; color: var(--umber);
}
.stat .value {
  font-size: 26px; font-weight: var(--weight-strong); letter-spacing: -.025em;
  margin-top: 3px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat .foot { font-size: 12px; color: var(--umber); margin-top: 2px; }
.stat .foot a { color: var(--umber); }
.stat.accent { border-left: 3px solid var(--status-active); }
.stat.warn   { border-left: 3px solid var(--status-attention); }
.stat.warn .value { color: var(--status-attention); }
.stat.is-zero .value { color: var(--ink-300); }

/* ── The masthead ────────────────────────────────────────────────────────────
   One page opens on the brand ground: who it is and where it stands, in a band
   with actual depth, instead of a line of text over a flat panel. */
.masthead {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr) auto;
  gap: 22px; align-items: center;
  padding: 18px 20px; margin-bottom: var(--s4); border-radius: 14px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(243, 206, 73, .20), transparent 62%),
    linear-gradient(180deg, #16204a, var(--ink));
  color: #e6eafb;
}
@media (max-width: 1080px) { .masthead { grid-template-columns: 1fr; gap: 16px; } }

.masthead-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.monogram {
  width: 50px; height: 50px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 16px; font-weight: var(--weight-strong); letter-spacing: .02em;
}
.masthead h1 {
  margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.masthead-meta {
  font-size: 12.5px; color: #a3b0d0; margin-top: 3px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.masthead-meta a { color: #cfd8f2; text-decoration: underline; text-underline-offset: 2px; }
.sep-dot { width: 3px; height: 3px; border-radius: 50%; background: #5a688d; display: inline-block; }
.masthead-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.masthead .status {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.masthead .status.tone-attention { background: rgba(243, 206, 73, .20); border-color: rgba(243, 206, 73, .38); color: var(--gold); }

.masthead-figure { min-width: 0; }
.money-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8b98bd;
}
.money-figure {
  font-size: 28px; font-weight: var(--weight-strong); letter-spacing: -.025em; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0 9px;
}
.money-figure .of { font-size: 17px; font-weight: 400; color: #8b98bd; margin-left: 3px; }

/* One bar, one colour per state, used by the bar and the legend below it. */
.alloc-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden;
             background: rgba(255, 255, 255, .12); }
.alloc-seg { display: block; height: 100%;
             animation: alloc-grow .5s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes alloc-grow { from { width: 0 !important; } }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
                font-size: 11.5px; color: #a3b0d0; }
.alloc-key { display: inline-flex; align-items: center; gap: 6px; }
.alloc-key b { color: #fff; font-weight: 600; }
.alloc-key i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.seg-done { background: var(--gold); }
.seg-open { background: rgba(255, 255, 255, .22); }

.masthead-actions { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 1080px) { .masthead-actions { flex-direction: row; flex-wrap: wrap; } }
.masthead-actions .btn,
.masthead-actions button {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: #eaeefb; white-space: nowrap;
}
.masthead-actions .btn:hover,
.masthead-actions button:hover { background: rgba(255, 255, 255, .2); color: #fff;
                                 border-color: rgba(255, 255, 255, .3); }

/* ── Two columns ─────────────────────────────────────────────────────────────
   Cards side by side. One tall stack is what made every page feel like the same
   page scrolled to a different place. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
        gap: var(--s4); align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }
.cols > * > .panel:last-child { margin-bottom: 0; }

/* ── A second line inside a table cell ───────────────────────────────────────*/
.cell-meta { display: block; font-size: 11.5px; color: var(--umber); margin-top: 1px; }
.r { text-align: right; font-variant-numeric: tabular-nums; }

/* A link in a card's header, sitting opposite the title. */
.panel > .panel-head .head-link { margin-left: auto; font-size: 12.5px; }

/* ── Page header bar ─────────────────────────────────────────────────────────
   The title had nothing under it and nothing around it, so it hung in the air
   over the first thing on the page. It gets a band of its own, bled to the
   edges of the content area, which is the job the topbar does in the reference. */
.page-head {
  background: var(--white); border-bottom: 1px solid var(--sand);
  margin: -22px -22px var(--s5); padding: 14px 22px;
  align-items: center;
}
.page-head h1 { font-size: 19px; }
.page-head .sub { flex-basis: auto; }
/* The masthead is its own header, so a page carrying one starts flush. */
.masthead { margin-top: -6px; }

/* A section label sits on the band it labels rather than floating above it. */
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--sand) 70%, transparent);
}

/* ── Detail lists ────────────────────────────────────────────────────────────
   A label column set as a share of a 1200px card puts the value half a screen
   from its name. The pair stays together. */
.panel .deflist { grid-template-columns: 150px minmax(0, 1fr); max-width: 680px; }

/* ── Page actions ────────────────────────────────────────────────────────────
   What you can do on a page belongs on its title line. Stacked above the
   content they pushed the actual work down the screen and read as a floating
   row of buttons belonging to nothing. */
.page-head .actions {
  margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
}
.page-head .actions form { margin: 0; }
.page-head .actions .btn, .page-head .actions button { min-height: 32px; }
.page-head + .toolbar-note { margin-top: calc(var(--s5) * -1 + 2px); margin-bottom: var(--s4); }

/* ── Attached, not floating ──────────────────────────────────────────────────
   A lone sentence between two blocks belongs to neither of them. Explanatory
   lines sit inside the header band, under the title they explain. */
.page-head .toolbar-note, .page-head .sub-note {
  flex-basis: 100%; margin: 2px 0 0; font-size: var(--fs-small); color: var(--umber);
  max-width: 88ch;
}
.masthead-note {
  margin: 8px 0 0; font-size: 12.5px; color: #a3b0d0; max-width: 70ch;
}
/* The note takes the whole second line of the band, under the title rather than
   under the buttons. */
.page-head .sub-note, .page-head .toolbar-note { order: 3; margin-right: auto; }

/* A note with `flex-basis: 100%` can still shrink onto the first line, which is
   what stopped the actions being pushed to the right edge. Not allowed to
   shrink, it takes a line of its own and the auto margin works again. */
.page-head .sub-note, .page-head .toolbar-note { flex: 0 0 100%; }

/* Search where the action is, not in a card built around one field. */
.search-inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.search-inline input { min-height: 32px; width: 200px; font-size: var(--fs-small); }

/* The column already holds the measure; a second cap inside it only opened a
   gap on the right of the box. */

/* `flex: 0 0 100%` was not enough to put the note on its own line, because its
   own `max-width` capped the used size at 686px — small enough to sit beside the
   title and the buttons, which is why the actions never reached the right edge.
   A zero-height break item ordered between them forces the line, and the note
   keeps its measure. */
.page-head:has(.sub-note)::after,
.page-head:has(.toolbar-note)::after {
  content: ""; flex: 0 0 100%; height: 0; order: 2; margin: 0;
}

/* A search field styles itself in WebKit — the inner border and the oversized
   radius were the browser's, not ours. */
.search-inline input[type="search"] {
  appearance: none; -webkit-appearance: none; border-radius: 7px;
}
.search-inline input[type="search"]::-webkit-search-decoration,
.search-inline input[type="search"]::-webkit-search-cancel-button { appearance: none; }

/* With the explainer lines gone the header is one row again. */
.page-head { min-height: 46px; }

/* The card's child-spacing rule put 16px between consecutive workflow rows — so
   the rail was drawn correctly, row by row, and the gaps were between the rows
   themselves. app.css already zeroed this; its rule lost on specificity. */

/* ── Attached controls ───────────────────────────────────────────────────────
   A field beside a text-link button read as two unrelated things floating in
   the header. The field and its submit share one border, one radius and one
   height, so the pair reads as the single control it is — and the submit is a
   quiet surface inside the group rather than a link pretending to be a button. */
.control-group {
  display: flex; align-items: stretch; margin: 0; height: 32px;
  border: 1px solid var(--sand); border-radius: 7px; background: var(--white);
  overflow: hidden; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.control-group:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 19, 52, .07); }

.control-group input,
.control-group select {
  border: none; background: transparent; min-height: 0; height: 100%;
  border-radius: 0; padding: 0 10px; font-size: var(--fs-small); color: var(--ink);
}
.control-group input:focus, .control-group select:focus { box-shadow: none; border: none; outline: none; }
.control-group input { width: 190px; }
.control-group input::placeholder { color: var(--ink-300); }

/* The native chevron is the browser's, and it does not match anything else
   here. Drawn as a background mark instead, with room kept for it. */
.control-group select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px; width: 190px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23605847' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
}

.control-group__ico {
  width: 15px; height: 15px; flex: none; align-self: center; margin-left: 10px;
  fill: none; stroke: var(--ink-300); stroke-width: 1.8; stroke-linecap: round;
}
.control-group__ico + input { padding-left: 7px; }

.control-group__go {
  flex: none; min-height: 0; height: 100%; padding: 0 12px; border: none;
  border-left: 1px solid var(--sand); border-radius: 0;
  background: var(--tint); color: var(--umber);
  font-size: 12px; font-weight: var(--weight-strong); letter-spacing: .02em;
  cursor: pointer;
}
.control-group__go:hover { background: var(--paper); color: var(--ink); }
.control-group__go:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ── Notices ─────────────────────────────────────────────────────────────────
   A caveat about the thing under it: an icon, a tinted ground and a coloured
   edge in the tone of what it is warning about. It spans its card rather than
   sitting as a narrow grey slab in the corner of one. */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
  border-left: 3px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 7%, var(--white));
  font-size: var(--fs-small); color: var(--ink);
}
.notice p { margin: 0; max-width: 92ch; line-height: 1.55; }
.notice .strong { font-weight: var(--weight-strong); }
.notice__ico {
  width: 16px; height: 16px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--tone); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.notice-attention { --tone: var(--status-attention); }
.notice-critical  { --tone: var(--status-critical); }
.notice-active    { --tone: var(--status-active); }

/* The credential footnote closes the card; it is an aside, not a notice. */
.panel > .note-last {
  padding-top: var(--s4); margin-top: var(--s4);
  border-top: 1px solid var(--line-soft); color: var(--umber); max-width: 92ch;
}

/* ── Question builder (configure, base-template versions) ───────────────────
   Linear-style list: one line per question, actions on hover, the editor opens in
   place under its row. Parts are groups with a sticky jump bar above them. */
.partbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 var(--s4); padding: 8px 0;
  background: var(--bone);
}
.partbar a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--white); text-decoration: none; font-size: var(--fs-small);
  transition: border-color .12s;
}
.partbar a:hover { border-color: var(--sand); }
.partbar__code { font-weight: var(--weight-strong); color: var(--ink); }
.partbar__count { color: var(--umber); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); }
.partbar__hint { margin-left: auto; font-size: var(--fs-caption); color: var(--umber); }

.qpart { scroll-margin-top: 52px; padding-bottom: 6px; }
.qpart h2 { display: flex; align-items: baseline; gap: 10px; }
.qpart__code {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 5px; background: var(--ink); color: var(--white);
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--weight-strong);
}
/* Beats the generic panel spacing chain, which is built for prose, not a list. */
.qbuilder .panel.qpart > .panel-head + * { padding-top: 10px; }
.qbuilder .panel.qpart > .qpart__intro,
.qbuilder .panel.qpart > .qlist,
.qbuilder .panel.qpart > .qadd { margin-top: 6px; }
.qpart__intro { font-size: var(--fs-small); color: var(--umber); }
.qpart__intro summary { cursor: pointer; width: fit-content; min-height: 0; font-size: var(--fs-caption); }
.qpart__intro summary:hover { color: var(--ink); }
.qpart__intro p { margin: 6px 0 4px; max-width: 80ch; line-height: 1.55; }

/* Rows */
.qrow { position: relative; border-radius: 6px; scroll-margin-top: 60px; }
.qrow__line {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 6px 0 2px; border-radius: 6px;
}
.qrow__line:hover, .qrow.is-editing > .qrow__line { background: var(--tint); }
.qrow + .qrow > .qrow__line { box-shadow: inset 0 1px 0 var(--line-soft); }
.qrow + .qrow > .qrow__line:hover { box-shadow: none; }

.qrow__handle {
  flex: none; display: grid; place-items: center; width: 16px; height: 24px; padding: 0; min-height: 0;
  background: none; border: 0; color: var(--sand); cursor: grab; opacity: 0; transition: opacity .12s;
}
.qrow__handle svg { width: 8px; height: 13px; fill: currentColor; }
.qrow__handle:hover { background: none; color: var(--umber); }
.qrow__line:hover .qrow__handle, .qrow__handle:focus-visible { opacity: 1; }

.qrow__text {
  flex: 1; min-width: 0; padding: 8px 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink); font-size: var(--fs-body); text-decoration: none;
}
a.qrow__text { cursor: text; }
a.qrow__text:hover { color: var(--ink); text-decoration: none; }
.qrow.is-editing > .qrow__line .qrow__text { white-space: normal; }

.qrow__chips { flex: none; display: flex; align-items: center; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
  border: 1px solid var(--line-soft); background: var(--white);
  font-size: var(--fs-caption); color: var(--umber); white-space: nowrap;
}
.chip-kind { min-width: 70px; justify-content: center; }
.chip-if { color: var(--status-active); border-color: color-mix(in srgb, var(--status-active) 25%, transparent);
           background: color-mix(in srgb, var(--status-active) 6%, var(--white)); }
.chip-off { color: var(--status-critical); }

.qrow.is-off > .qrow__line .qrow__text { color: var(--umber); text-decoration: line-through;
                                         text-decoration-color: var(--sand); }
.qrow.is-off > .qrow__line .qrow__chips { opacity: .5; }
.qrow.is-dragging { opacity: .35; }
.qrow.is-saved > .qrow__line { animation: qsaved .9s ease-out; }
@keyframes qsaved { from { background: color-mix(in srgb, var(--gold) 35%, var(--white)); } }

.qrow__followups { margin-left: 30px; padding-left: 10px; border-left: 1px solid var(--sand); }

/* Switch */
.switch {
  flex: none; position: relative; width: 26px; height: 16px; padding: 0; min-height: 0;
  border: 0; border-radius: 999px; background: var(--sand); color: inherit; cursor: pointer;
  transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(10,19,52,.2);
  transition: transform .15s;
}
.switch:hover { background: color-mix(in srgb, var(--sand) 80%, var(--ink)); }
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--status-active) 85%, var(--white)); }
.switch[aria-checked="true"]:hover { background: color-mix(in srgb, var(--status-active) 85%, var(--ink)); }
.switch[aria-checked="true"]::after { transform: translateX(10px); }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Inline editor */
.qeditor {
  margin: 2px 0 8px 24px; padding: 14px 16px 12px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(10,19,52,.04), 0 6px 18px rgba(10,19,52,.06);
}
.qeditor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.qeditor__grid .field { margin: 0; }
.qeditor__wide { grid-column: 1 / -1; }
.qeditor__wide:first-child textarea { font-size: var(--fs-body); }
.qeditor textarea { min-height: 0; resize: vertical; }
.qeditor .field-checkbox { align-self: end; }
.qeditor__bar { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px;
                border-top: 1px solid var(--line-soft); }
.qeditor__code { margin-left: auto; font-size: var(--fs-caption); color: var(--umber); }
.qeditor kbd { margin-left: 4px; font: inherit; font-size: var(--fs-caption); opacity: .6; }
.qeditor [data-delete].is-armed { background: var(--status-critical); color: var(--white); }
@media (max-width: 720px) {
  .qeditor__grid { grid-template-columns: 1fr; }
  .qrow__chips .chip:not(.chip-kind) { display: none; }
}

/* Add row */
.qadd { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 20px; border-radius: 6px; }
.qadd:focus-within { background: var(--tint); }
.qadd__plus { width: 26px; text-align: center; color: var(--umber); font-size: 16px; }
.qadd input {
  flex: 1; min-height: 36px; padding: 0; border: 0; background: none; box-shadow: none;
  font-size: var(--fs-body);
}
.qadd input:focus { outline: none; box-shadow: none; }
.qadd input::placeholder { color: var(--umber); opacity: .7; }

/* ── Workflow stepper ────────────────────────────────────────────────────────
   One row per step: a mark on a continuous rail, what the step is and what
   happened, and the action at the far right. Exactly one step, the current one,
   carries a primary button. */
.panel > .flow { padding: 4px var(--s5) 10px; }
.flow { list-style: none; margin: 0; }
.flow__step {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 12px 0;
}
.flow__step + .flow__step { border-top: 1px solid var(--line-soft); }
/* The rail: runs between marks, green through finished steps. */
.flow__step::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--line-soft);
}
.flow__step:first-child::before { top: 50%; }
.flow__step:last-child::before { bottom: 50%; }
.flow__step.is-done::before { background: color-mix(in srgb, var(--status-active) 45%, var(--white)); }

.flow__mark {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--sand); background: var(--white);
  font-size: var(--fs-caption); font-weight: var(--weight-strong); color: var(--umber);
  font-variant-numeric: tabular-nums;
}
.flow__step.is-done .flow__mark {
  border-color: var(--status-active); background: var(--status-active); color: transparent;
}
.flow__step.is-done .flow__mark::after { content: "✓"; position: absolute; color: var(--white); font-size: 12px; }
.flow__step.is-now .flow__mark {
  border-color: var(--ink); background: var(--ink); color: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent);
}
.flow__step.is-skipped .flow__mark { border-style: dashed; }

.flow__name { margin: 0; font-size: var(--fs-body); color: var(--ink); font-weight: var(--weight-medium); }
.flow__note { margin: 2px 0 0; font-size: var(--fs-small); color: var(--umber);
              display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow__step.is-later .flow__name, .flow__step.is-skipped .flow__name { color: var(--umber); font-weight: var(--weight-body); }
.flow__step.is-now { }
.flow__step.is-now .flow__name { font-weight: var(--weight-strong); }
.flow__step.is-skipped .flow__note::after { content: "· Skipped"; }

.flow__act { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.flow__act form { margin: 0; }
.flow__act .btn, .flow__act button { min-width: 128px; justify-content: center; text-align: center; }
.flow__act .btn-quiet { min-width: 0; }
.flow__step.is-later .flow__act .btn-secondary,
.flow__step.is-later .flow__act button.btn-secondary { border-color: var(--line-soft); color: var(--umber); }
@media (max-width: 720px) {
  .flow__step { grid-template-columns: 24px minmax(0, 1fr); }
  .flow__act { grid-column: 2; justify-content: flex-start; }
}

/* Inline question editor: question and guidance full width, then a compact row. */
.qeditor__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qeditor select { min-height: 34px; }
.qeditor .field-checkbox label { font-size: var(--fs-small); font-weight: var(--weight-body); }
.qeditor .field-checkbox input { width: 15px; height: 15px; }
.qeditor textarea { min-height: 52px; }
.qeditor__checks { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.qeditor__checks .field { margin: 0; }
.qeditor .field label { margin-bottom: 4px; }
.qeditor .field textarea, .qeditor .field select, .qeditor .field input:not([type=checkbox]) { max-width: none; width: 100%; }

/* ── Client page ─────────────────────────────────────────────────────────────
   Work on the left, the client's properties on the right. */
.client-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.client-side { display: grid; gap: var(--s5); }
@media (max-width: 1000px) { .client-layout { grid-template-columns: 1fr; } }

.panel > .worklist { padding: 4px 8px 8px; }
.worklist { list-style: none; margin: 0; }
.worklist__row + .worklist__row { border-top: 1px solid var(--line-soft); }
.worklist__link {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none;
}
.worklist__link:hover { background: var(--tint); color: var(--ink); }
.worklist__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.worklist__title { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worklist__meta { font-size: var(--fs-small); color: var(--umber); }
.worklist__go { color: var(--sand); font-size: 18px; line-height: 1; transition: transform .12s, color .12s; }
.worklist__link:hover .worklist__go { color: var(--ink); transform: translateX(2px); }

.panel > .props { padding: 6px var(--s5) var(--s5); }
.props { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; margin: 0; font-size: var(--fs-small); }
.props dt { color: var(--umber); }
.props dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.props__add { color: var(--umber); text-decoration: none; opacity: .75; }
.props__add:hover { color: var(--ink); opacity: 1; text-decoration: underline; }
.props__add::before { content: "+ "; }
.client-notes { font-size: var(--fs-small); line-height: 1.55; margin: 0; }
.client-side .panel-head .btn-quiet { margin-left: auto; padding: 0; min-height: 0; }

/* ── Form sheet ──────────────────────────────────────────────────────────────
   A form in sections: what the section is for on the left, its fields in a grid
   on the right, and the save bar pinned to the bottom so it is always in reach. */
.formsheet {
  max-width: 1040px; background: var(--white);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
}
.formsheet > .errorlist { margin: var(--s5) var(--s5) 0; }
.formsheet__section {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6);
  padding: var(--s6) var(--s6);
}
.formsheet__section + .formsheet__section { border-top: 1px solid var(--line-soft); }
.formsheet__intro h2 { margin: 0 0 4px; font-size: var(--fs-h2); }
.formsheet__intro p { margin: 0; font-size: var(--fs-small); color: var(--umber); line-height: 1.5; max-width: 34ch; }
.formsheet__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-content: start; }
.formsheet__fields .field { margin: 0; max-width: none; }
.formsheet__fields .field-wide { grid-column: 1 / -1; }
.formsheet__fields :is(input:not([type=checkbox]), select, textarea) { width: 100%; max-width: none; }
.formsheet .req { color: var(--status-critical); }
.formsheet__fact { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                   min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-soft);
                   border-radius: 7px; background: var(--tint); font-size: var(--fs-body); }
.formsheet__muted { color: var(--umber); font-size: var(--fs-small); }
.formsheet__fact a { margin-left: auto; font-size: var(--fs-small); }
.formsheet__bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px var(--s6) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(6px);
}
@media (max-width: 820px) {
  .formsheet__section { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5); }
  .formsheet__fields { grid-template-columns: 1fr; }
}

/* ── Overview ────────────────────────────────────────────────────────────────
   One strip of figures that each open their list, then the work: what needs a
   person, with the button for the next step, and everything else. */
.statstrip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--s5); background: var(--white);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
}
.statstrip__item {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 18px;
  color: var(--ink); text-decoration: none; transition: background .12s;
}
.statstrip__item + .statstrip__item { border-left: 1px solid var(--line-soft); }
.statstrip__item:hover { background: var(--tint); color: var(--ink); }
.statstrip__value { font-size: 24px; font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.statstrip__label { font-size: var(--fs-small); color: var(--umber); }
.statstrip__item.is-hot { box-shadow: inset 3px 0 0 var(--gold); }
.statstrip__item.is-hot .statstrip__value { color: #9a6b12; }
@media (max-width: 720px) {
  .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statstrip__item:nth-child(3) { border-left: 0; }
  .statstrip__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

.overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 1100px) { .overview { grid-template-columns: 1fr; } }
.worklist__link--static:hover { background: none; }
.worklist__link--static .worklist__title { color: var(--ink); text-decoration: none; }
.worklist__link--static .worklist__title:hover { text-decoration: underline; }
.worklist__link--static .btn { flex: none; }
.worklist__link--static .worklist__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worklist--compact .worklist__link { padding: 8px 10px; }
.monogram-sm { width: 32px; height: 32px; flex: none; border-radius: 8px; font-size: 11px;
               display: grid; place-items: center; background: var(--ink); color: var(--white);
               font-weight: var(--weight-strong); }

/* ── Research ────────────────────────────────────────────────────────────────
   The run in one line, the summary as prose, findings grouped by the topic a
   reviewer thinks in, and the sources beside them with third parties flagged. */
.runtabs { display: flex; gap: 4px; margin-bottom: var(--s3); flex-wrap: wrap; }
.runtabs a { padding: 5px 10px; border-radius: 6px; font-size: var(--fs-small); color: var(--umber); text-decoration: none; }
.runtabs a span { font-size: var(--fs-caption); opacity: .8; margin-left: 4px; }
.runtabs a:hover { background: var(--white); color: var(--ink); }
.runtabs a[aria-current] { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line-soft); }

.runline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: var(--s5);
           font-size: var(--fs-small); color: var(--umber); }
.runline b { color: var(--ink); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.runline__warn, .runline__warn b { color: #9a6b12; }

.research { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.research__main { display: grid; gap: var(--s5); min-width: 0; }
.research__side { position: sticky; top: var(--s4); }
@media (max-width: 1100px) { .research { grid-template-columns: 1fr; } .research__side { position: static; } }

.research__prose { max-width: 76ch; }
.research__prose p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.research__prose p:last-child { margin-bottom: 0; }

.findbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Search field with its icon inside and the shortcut hint at the end. */
.searchbox {
  display: inline-flex; align-items: center; gap: 6px; width: 230px; height: 30px; margin: 0; padding: 0 8px;
  border: 1px solid var(--line-soft); border-radius: 7px; background: var(--white);
  font-weight: var(--weight-body); cursor: text; transition: border-color .12s, box-shadow .12s;
}
.searchbox:hover { border-color: var(--sand); }
.searchbox:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.searchbox svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--umber); stroke-width: 1.6; stroke-linecap: round; }
.searchbox input, .searchbox input:focus {
  flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
  background: none; font-size: var(--fs-small);
}
.searchbox input::-webkit-search-cancel-button { appearance: none; }
.searchbox kbd { font: 500 11px var(--font-sans); color: var(--umber); padding: 0 5px; line-height: 17px;
                 border: 1px solid var(--line-soft); border-radius: 4px; }
.searchbox:focus-within kbd { display: none; }

/* A checkbox that reads as a filter chip: off is outlined, on is filled. */
.togglechip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 10px;
  border: 1px solid var(--line-soft); border-radius: 7px; background: var(--white); cursor: pointer; user-select: none;
  font-size: var(--fs-small); font-weight: var(--weight-body); color: var(--umber); white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.togglechip input { position: absolute; opacity: 0; pointer-events: none; }
.togglechip:hover { border-color: var(--sand); color: var(--ink); }
.togglechip__n { min-width: 18px; padding: 0 5px; border-radius: 4px; text-align: center; font-size: 11px; line-height: 17px;
                 background: color-mix(in srgb, var(--status-attention) 14%, var(--white)); color: #9a6b12; font-weight: var(--weight-strong); }
.togglechip:has(input:checked) { background: color-mix(in srgb, var(--status-attention) 10%, var(--white));
                                 border-color: color-mix(in srgb, var(--status-attention) 45%, transparent); color: #7a520a; }
.togglechip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn__ico { width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.7;
            stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
@media (max-width: 720px) { .findbar { flex-wrap: wrap; margin-left: 0; } .searchbox { width: 100%; } }

.findtoc { display: flex; flex-wrap: wrap; gap: 4px; }
.findtoc a { padding: 2px 8px; border: 1px solid var(--line-soft); border-radius: 5px; font-size: var(--fs-caption);
             color: var(--ink); text-decoration: none; }
.findtoc a:hover { border-color: var(--sand); }
.findtoc a span { color: var(--umber); margin-left: 2px; }

.findgroup { scroll-margin-top: var(--s4); }
.findgroup .findgroup__name { margin: 0 0 4px; font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--weight-strong);
                   letter-spacing: .06em; text-transform: uppercase; color: var(--umber); }
.findgroup__name span { color: var(--sand); margin-left: 4px; }
.findings { list-style: none; margin: 0; padding: 0; }
.finding { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.finding.is-flagged { box-shadow: inset 2px 0 0 var(--status-attention); padding-left: 12px; }
.finding__topic { margin: 0 0 2px; font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--ink); }
.finding__fact { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); max-width: 90ch; }
.finding__src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 5px 0 0;
                font-size: var(--fs-caption); color: var(--umber); }
.finding__src a { color: var(--umber); }
.finding__src a:hover { color: var(--ink); }
/* A reviewer's correction: the fact stays readable but is plainly out of play. */
.finding.is-disputed { box-shadow: inset 2px 0 0 var(--status-critical); padding-left: 12px; }
.finding.is-disputed .finding__fact { color: var(--umber); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--status-critical) 55%, transparent); }
.finding__dispute { margin: 6px 0 0; font-size: var(--fs-small); color: var(--ink); max-width: 90ch; }
.finding__dispute p { margin: 0 0 3px; }
.finding__dispute a { color: var(--umber); word-break: break-all; }
.finding__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
               font-size: var(--fs-caption); color: var(--umber); }
.finding__by form { margin: 0; }
.finding__flag { margin-top: 4px; font-size: var(--fs-caption); color: var(--umber); }
.finding__flag summary { cursor: pointer; width: fit-content; min-height: 0; }
.finding__flag summary:hover { color: var(--ink); }
.finding__flag form { display: grid; gap: 6px; max-width: 520px; margin-top: 6px; }
.finding__flag textarea { min-height: 0; }
.finding__flag button { justify-self: start; }
.finding__reasons { display: flex; gap: 14px; margin: 0; padding: 0; border: 0; }
.finding__reasons label { display: inline-flex; align-items: center; gap: 5px; margin: 0;
                          font-size: var(--fs-small); font-weight: var(--weight-body); color: var(--ink); }
.finding__reasons input { min-height: 0; }
.chip-attention { color: #9a6b12; border-color: color-mix(in srgb, var(--status-attention) 35%, transparent);
                  background: color-mix(in srgb, var(--status-attention) 8%, var(--white)); }
.chip-critical { color: var(--status-critical); border-color: color-mix(in srgb, var(--status-critical) 30%, transparent); }

.panel > .sources { padding: 4px var(--s4) var(--s4); }
.sources { list-style: none; margin: 0; }
.sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 8px 0;
              border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.sources li:first-child { border-top: 0; }
.sources a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources a:hover { text-decoration: underline; }
.sources__meta { grid-column: 1; font-size: var(--fs-caption); color: var(--umber); }
.sources li.is-third .sources__meta b { color: #9a6b12; font-weight: var(--weight-strong); }
.sources__count { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 22px; text-align: center;
                  font-size: var(--fs-caption); color: var(--umber); background: var(--tint); border-radius: 5px; padding: 2px 6px; }

.research__raw { font-size: var(--fs-small); color: var(--umber); }
.research__raw summary { cursor: pointer; width: fit-content; min-height: 0; }
.research__raw pre { max-height: 360px; overflow: auto; white-space: pre-wrap; font-size: 12px;
                     background: var(--white); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px; }
.findgroup + .findgroup { margin-top: var(--s5); }
.gaps { padding: 14px 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--status-attention) 7%, var(--white));
        border: 1px solid color-mix(in srgb, var(--status-attention) 28%, transparent); border-left: 3px solid var(--status-attention); }
.gaps h2 { margin: 0; font-size: var(--fs-h2); }
.gaps h2 span { font-family: var(--font-sans); font-size: var(--fs-caption); color: #9a6b12; margin-left: 4px; }
.gaps__lede { margin: 2px 0 8px; font-size: var(--fs-small); color: var(--umber); }
.gaps ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-body); line-height: 1.55; }

/* ── Toasts ──────────────────────────────────────────────────────────────────
   Flash messages float over the page instead of sitting above the header, so
   nothing shifts when one appears. */
.toasts { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 50;
          display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); margin: 0; padding: 0; list-style: none; }
.toast {
  --tone: var(--status-active);
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 14px;
  background: var(--white); border: 1px solid var(--line-soft); border-left: 3px solid var(--tone);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(10, 19, 52, .12);
  font-size: var(--fs-small); color: var(--ink); line-height: 1.45;
  animation: toast-in .2s ease-out; transition: opacity .3s, transform .3s;
}
.toast span { flex: 1; }
.toast.error { --tone: var(--status-critical); }
.toast.warning { --tone: var(--status-attention); }
.toast.info { --tone: var(--status-settled); }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); }
.toast__close, .toast__close:hover {
  flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 5px;
  background: none; color: var(--umber); font-size: 16px; line-height: 1; cursor: pointer;
}
.toast__close:hover { background: var(--tint); color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ── Responses (final review) ────────────────────────────────────────────────
   What needs a lawyer first, then every answer: question left, answer right.
   Answers to single-choice questions are chips coloured by meaning. */
.statstrip__value small { font-size: 14px; font-weight: var(--weight-body); color: var(--umber); margin-left: 1px; }

.ans { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px;
       font-size: var(--fs-small); font-weight: var(--weight-medium); white-space: nowrap;
       border: 1px solid transparent; }
.ans-yes { color: var(--status-active); background: color-mix(in srgb, var(--status-active) 9%, var(--white));
           border-color: color-mix(in srgb, var(--status-active) 22%, transparent); }
.ans-no, .ans-partial { color: #8a5a06; background: color-mix(in srgb, var(--status-attention) 12%, var(--white));
          border-color: color-mix(in srgb, var(--status-attention) 35%, transparent); }
.ans-unknown { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 7%, var(--white));
               border-color: color-mix(in srgb, var(--status-critical) 25%, transparent); }
.ans-na, .ans-other { color: var(--umber); background: var(--tint); border-color: var(--line-soft); }
.ans-empty { color: var(--umber); border: 1px dashed var(--sand); background: none; font-weight: var(--weight-body); }

.review__label { margin: var(--s4) 0 6px; font-family: var(--font-sans); font-size: var(--fs-caption);
                 letter-spacing: .06em; text-transform: uppercase; color: var(--umber); }
.panel > .review__label:first-of-type { margin-top: 6px; }
.panel > .review__label, .panel > .replies, .panel > .jumplist { padding-left: var(--s5); padding-right: var(--s5); }
.panel > .jumplist:last-child, .panel > .replies:last-child { padding-bottom: var(--s5); }

.replies { list-style: none; margin: 0; display: grid; gap: 10px; }
.reply { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--white); }
.reply__q { display: block; font-weight: var(--weight-medium); color: var(--ink); text-decoration: none; }
.reply__q:hover { text-decoration: underline; }
.reply__answer { margin: 4px 0 10px; font-size: var(--fs-small); color: var(--umber); display: flex; gap: 6px; align-items: center; }
.reply__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reply__pair > div { padding: 10px 12px; border-radius: 6px; background: var(--tint); font-size: var(--fs-small); line-height: 1.55; }
.reply__pair p { margin: 2px 0 0; }
.reply__theirs { background: color-mix(in srgb, var(--status-active) 6%, var(--white)) !important;
                 box-shadow: inset 2px 0 0 var(--status-active); }
.reply__who { font-size: var(--fs-caption); font-weight: var(--weight-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--umber); }
.reply__rationale { margin-top: 8px; font-size: var(--fs-small); color: var(--umber); }
.reply__rationale summary { cursor: pointer; width: fit-content; min-height: 0; }
.reply__rationale summary span { margin-left: 4px; font-size: var(--fs-caption); padding: 0 5px; border-radius: 4px; background: var(--tint); }
.reply__rationale p { margin: 6px 0 0; max-width: 90ch; }
@media (max-width: 820px) { .reply__pair { grid-template-columns: 1fr; } }

.jumplist { list-style: none; margin: 0; }
.jumplist li { border-top: 1px solid var(--line-soft); }
.jumplist li:first-child { border-top: 0; }
.jumplist a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.jumplist a:hover { text-decoration: underline; }
.jumplist .ans { flex: none; min-width: 84px; justify-content: center; }

/* Answer rows */
.panel > .answers { padding: 4px var(--s5) var(--s4); }
.ansrow { scroll-margin-top: 60px; }
.ansrow:target > .ansrow__line { animation: qsaved 1.6s ease-out; }
.answers > .ansrow + .ansrow, .ansrow__followups > .ansrow + .ansrow { border-top: 1px solid var(--line-soft); }
.ansrow__line { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; padding: 11px 6px; border-radius: 6px; }
.ansrow__line.is-wide { grid-template-columns: 1fr; gap: 8px; }
.ansrow__q { margin: 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.ansrow.is-info > .ansrow__q { padding: 10px 6px; color: var(--umber); font-size: var(--fs-small); font-style: italic; }
.ansrow__a { min-width: 0; }
.ansrow__prose { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); max-width: 72ch; }
.ansrow__reply { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: var(--fs-small); line-height: 1.55;
                 background: color-mix(in srgb, var(--status-active) 6%, var(--white)); box-shadow: inset 2px 0 0 var(--status-active); }
.ansrow__reply p { margin: 2px 0 0; }
/* Follow-ups indent their question, not their answer, so every answer in a part
   starts on the same vertical line however deep the nesting goes. */
.ansrow__followups { margin: 0 0 6px; }
.ansrow__followups .ansrow__q { padding-left: 16px; box-shadow: inset 2px 0 0 var(--sand); }
.ansrow__followups .ansrow__followups .ansrow__q { padding-left: 32px; box-shadow: inset 2px 0 0 var(--sand), inset 18px 0 0 var(--white), inset 20px 0 0 var(--sand); }
.ansrow__followups .ansrow__line.is-wide .ansrow__a { padding-left: 16px; }
@media (max-width: 820px) { .ansrow__line { grid-template-columns: 1fr; gap: 6px; } }

.anstable { font-size: var(--fs-small); }
.anstable th[scope=row] { font-weight: var(--weight-medium); min-width: 180px; }
.anstable td, .anstable th { vertical-align: top; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 10px; margin: 0; padding: 12px 14px;
        border: 1px solid var(--line-soft); border-radius: 8px; font-size: var(--fs-small); }
.card dt { color: var(--umber); }
.card dd { margin: 0; color: var(--ink); }

.internal > summary { display: flex; align-items: baseline; gap: 10px; padding: 14px var(--s5); cursor: pointer; list-style: none; min-height: 0; }
.internal > summary::-webkit-details-marker { display: none; }
.internal > summary::before { content: "▸"; color: var(--umber); transition: transform .15s; }
.internal[open] > summary::before { transform: rotate(90deg); }
.internal__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--ink); }
.internal > .note, .internal > .internal__checks { padding: 0 var(--s5); }
.internal__checks { list-style: none; margin: 0 0 var(--s5); }
.internal__checks li { padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.internal__checks p { margin: 4px 0 0; }
.internal__q { margin-left: 8px; color: var(--ink); }

/* ── Conflicts with research ─────────────────────────────────────────────── */
.statstrip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .statstrip--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.statstrip__item.is-alarm { box-shadow: inset 3px 0 0 var(--status-critical); }
.statstrip__item.is-alarm .statstrip__value { color: var(--status-critical); }

.review__run { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.review__run .tally { white-space: nowrap; }
.reply--conflict { border-color: color-mix(in srgb, var(--status-critical) 28%, transparent); box-shadow: inset 3px 0 0 var(--status-critical); }
.reply--flag { border-color: color-mix(in srgb, var(--status-attention) 40%, transparent); box-shadow: inset 3px 0 0 var(--status-attention); }
.reply--flag.is-decided { opacity: .7; box-shadow: none; }
.conflict__basis { margin: 0 0 6px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); max-width: 100ch; }
.conflict__basis .reply__who { margin-right: 6px; }
.conflict__src { margin: 0 0 10px; font-size: var(--fs-caption); color: var(--umber); }
.conflict__src a { color: var(--umber); }
.conflict__noreply { margin: 4px 0 0; font-size: var(--fs-small); color: var(--status-critical); }
.conflict__none { padding: 0 var(--s5) var(--s3); }
.conflict__tag { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: 5px;
                 font-size: var(--fs-caption); font-weight: var(--weight-strong); text-decoration: none;
                 color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, var(--white));
                 border: 1px solid color-mix(in srgb, var(--status-critical) 30%, transparent); }
.conflict__tag--flag { color: #8a5a06; background: color-mix(in srgb, var(--status-attention) 12%, var(--white));
                       border-color: color-mix(in srgb, var(--status-attention) 40%, transparent); }
.ansrow__a > .conflict__tag:first-child { margin-left: 0; }
.flag__head { display: flex; align-items: baseline; gap: 8px; }
.flag__quote { margin: 8px 0; padding: 6px 12px; border-left: 2px solid var(--sand); color: var(--ink); font-style: italic; font-size: var(--fs-small); }
.flag__actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.flag__actions form { margin: 0; }
.sev { flex: none; padding: 1px 7px; border-radius: 4px; font-size: var(--fs-caption); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: .04em; }
.sev-high { color: var(--white); background: var(--status-critical); }
.sev-medium { color: #8a5a06; background: color-mix(in srgb, var(--status-attention) 18%, var(--white)); }
.sev-low { color: var(--umber); background: var(--tint); }

/* Role chosen from cards that say what each one grants. */
.rolecards { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rolecards legend { margin-bottom: 6px; }
.rolecard { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; cursor: pointer;
            border: 1px solid var(--line-soft); border-radius: 8px; background: var(--white); font-weight: var(--weight-body);
            transition: border-color .12s, background .12s; }
.rolecard:hover { border-color: var(--sand); }
.rolecard:has(input:checked) { border-color: var(--ink); background: var(--tint); box-shadow: inset 0 0 0 1px var(--ink); }
.rolecard:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.rolecard input { margin-top: 3px; accent-color: var(--ink); }
.rolecard__body { display: grid; gap: 2px; }
.rolecard__name { font-weight: var(--weight-medium); color: var(--ink); }
.rolecard__what { font-size: var(--fs-small); color: var(--umber); }
.rolecard input[type=radio] { flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 3px 0 0; box-shadow: none; }
.rolecards .rolecard { display: flex; margin: 0; }

/* Per-user permission checklist. */
.permtable { width: 100%; font-size: var(--fs-small); border-collapse: collapse; }
.permtable th, .permtable td { padding: 8px 10px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.permtable thead th { border-top: 0; font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--umber); font-weight: var(--weight-strong); }
.permtable th[scope=row] { font-weight: var(--weight-body); }
.permtable th[scope=row] label { margin: 0; font-weight: var(--weight-body); color: var(--ink); cursor: pointer; }
.permtable__def { width: 110px; text-align: center !important; color: var(--umber); }
.permtable__me { width: 170px; }
.permtable__me input { width: 16px; height: 16px; min-height: 0; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--ink); }
.permtable__exc { font-size: var(--fs-caption); font-weight: var(--weight-strong); color: #8a5a06; padding: 1px 6px; border-radius: 4px;
                  background: color-mix(in srgb, var(--status-attention) 14%, var(--white)); }
.permtable tr.is-exception th[scope=row] label { font-weight: var(--weight-medium); }
.exc { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 4px; font-size: var(--fs-caption); white-space: nowrap; }
.exc-plus { color: var(--status-active); background: color-mix(in srgb, var(--status-active) 9%, var(--white)); }
.exc-minus { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 7%, var(--white)); }
.inline-form { display: inline; margin: 0; }

/* Model settings. */
.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: var(--s4); font-size: var(--fs-small); color: var(--ink); }
.keyline__item { display: inline-flex; align-items: center; gap: 6px; }
.keyline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-critical); }
.keyline__dot.is-ok { background: var(--status-active); }
.shipped { margin-top: 6px; font-size: var(--fs-small); color: var(--umber); }
.shipped summary { cursor: pointer; width: fit-content; min-height: 0; }
.shipped pre { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 12px; margin-top: 6px;
               padding: 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--white); }
.formsheet textarea { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; }

/* ── Send modal and CC/BCC chips ─────────────────────────────────────────── */
.sendmodal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line-soft);
             border-radius: var(--r-lg); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px rgba(10,19,52,.25); }
.sendmodal::backdrop { background: rgba(10, 19, 52, .45); }
.sendmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.sendmodal__head h2 { margin: 0; font-size: var(--fs-h2); }
.sendmodal__close, .sendmodal__close:hover { width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--umber); font-size: 20px; }
.sendmodal__close:hover { background: var(--tint); color: var(--ink); }
.sendmodal__warn { margin: 12px 22px 0; padding: 8px 12px; border-radius: 6px; font-size: var(--fs-small);
                   background: color-mix(in srgb, var(--status-attention) 12%, var(--white)); }
.sendmodal .sendform { padding: 16px 22px 18px; }
.sendform .field { margin: 0 0 14px; max-width: none; }
.sendform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sendform__note { margin: 4px 0 0; }
.sendform__bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.sendform :is(input:not([type=hidden]):not([type=checkbox]), select) { width: 100%; }
.sendpanel { max-width: 640px; }
@media (max-width: 560px) { .sendform__grid { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 5px 8px;
         border: 1px solid var(--sand); border-radius: 7px; background: var(--white); cursor: text; }
.chips:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.chips__list { display: contents; }
.chips input, .chips input:focus { flex: 1; min-width: 180px; width: auto !important; min-height: 28px; padding: 0 4px; border: 0; outline: 0; box-shadow: none; background: none; }
.chip-email { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px;
              background: var(--tint); border: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--ink); }
.chip-email.is-invalid { border-color: var(--status-critical); color: var(--status-critical); }
.chip-email__signin, .chip-email__signin:hover { height: 22px; min-height: 0; padding: 0 8px; border-radius: 5px; font-size: var(--fs-caption);
                     font-weight: var(--weight-medium); border: 1px solid var(--line-soft); background: var(--white); color: var(--umber); cursor: pointer; }
.chip-email__signin[aria-pressed="true"] { background: color-mix(in srgb, var(--status-active) 12%, var(--white));
                     border-color: color-mix(in srgb, var(--status-active) 35%, transparent); color: var(--status-active); }
.chip-email__x, .chip-email__x:hover { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 5px;
                     background: none; color: var(--umber); font-size: 16px; line-height: 1; cursor: pointer; }
.chip-email__x:hover { background: var(--white); color: var(--ink); }