/* Knowledge Studio. Hand-written, like tools/accounting-dashboard — no build
   step, no framework, no third-party script. The palette comes from
   /tokens.css, which the server reads out of brand/artifact-brand/, so this
   tool cannot drift from the site's colours.

   Density is the brief: this is read on a desktop, screen-shared, with a
   physician who has twenty minutes. Twenty-five queue rows without scrolling,
   a typical block visible without scrolling, and no decoration that costs a
   line of text. */

/* brand/artifact-brand/tokens.css already owns --ink, --bg, --card, --line,
   --band, --accent-ink, --good and the button pair, in BOTH themes, under
   :root:not([data-theme="light"]). Redefining those here silently loses to
   that selector's higher specificity — which is how every line of body text
   in this tool once rendered warm-white on warm-white. So: use its names,
   and add only what it does not have. The studio then follows the system
   theme for free, which matters on a screen-shared laptop that is not yours. */
:root {
  --dim: var(--ink-3);
  --sel: var(--chip-terra);

  --s-approved: var(--good);
  --s-stale: var(--accent-ink);
  --s-draft: var(--aff-muted-gold-ink);
  --s-blocked: var(--aff-dusty-blue-ink);
  --s-retired: var(--aff-warm-stone);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Matching the selector tokens.css uses, so these win in dark mode for the
   same reason its own overrides do. The -ink variants are tuned for dark text
   on a light ground and go muddy on charcoal; the glow variants are the pair
   meant for the other direction. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-draft: var(--aff-muted-gold);
    --s-blocked: #7FA9BC;
  }
}
:root[data-theme="dark"] {
  --s-draft: var(--aff-muted-gold);
  --s-blocked: #7FA9BC;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column;
}

/* --- bar ---------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 14px; height: 44px; flex: 0 0 44px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.brand { font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.modes { display: flex; gap: 2px; }
.modes button {
  font: inherit; border: 1px solid transparent; background: none; color: var(--dim);
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.modes button.on { color: var(--ink); border-color: var(--line); background: var(--card); }
.spacer { margin-left: auto; }
.who { display: flex; align-items: center; gap: 6px; }
.who label { color: var(--dim); }
.who select, .qhead input, .note-row input, #edit-heading {
  font: inherit; font-family: var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
}
/* These two sit on a raised panel, so they invert. */
.note-row input, #edit-heading { background: var(--bg); }
.ghost {
  font: inherit; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--dim); cursor: pointer;
}
.ghost.wide { width: auto; border-radius: 999px; padding: 3px 11px; }
.ghost.wide[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); }

/* --- layout ------------------------------------------------------------- */
/* The queue width is a variable so the splitter can move it, and so a width
   someone chose survives a reload. The default is the design target: a queue
   wide enough for a rendering id without truncation. */
main {
  --queue-w: 300px;
  flex: 1; display: grid;
  grid-template-columns: var(--queue-w) 6px minmax(0, 1fr);
  min-height: 0;
}
main > section { min-height: 0; overflow: auto; }
/* The queue keeps the cream ground; the panel you actually work in is
   raised onto --card. "White" here is the brand's warm white, not #fff — the
   palette has no pure white, and --card is the token that also stays correct
   in dark mode, where a raised surface has to get LIGHTER than its
   surroundings rather than whiter. */
.queue { background: var(--bg); display: flex; flex-direction: column; }
.item { background: var(--card); }

/* The divider is also the border — one element doing both, so nothing shifts
   by a pixel when you grab it. */
.splitter {
  background: var(--line); cursor: col-resize; position: relative;
  border: none; padding: 0; touch-action: none;
}
.splitter::after {                      /* a bigger hit area than the 6px seam */
  content: ''; position: absolute; inset: 0 -4px; 
}
.splitter:hover, .splitter:focus-visible, .splitter.dragging { background: var(--accent-ink); outline: none; }
body.resizing { cursor: col-resize; user-select: none; }
.item { padding: 20px 28px 40px; }

/* --- queue -------------------------------------------------------------- */
/* Search and the status key together at the top: both narrow the list, so
   they belong in one block above it rather than one above and one below. */
.qhead { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.qhead input { width: 100%; }
.filter-state { font-size: 11px; color: var(--dim); margin-top: 5px; }
#queue { list-style: none; margin: 0; padding: 4px 0; flex: 1; outline: none; overflow: auto; }
#queue .group {
  padding: 10px 12px 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--dim);
}
#queue li.row {
  display: grid; grid-template-columns: 6px 1fr auto; gap: 8px; align-items: baseline;
  padding: 4px 12px; cursor: pointer; border-left: 2px solid transparent;
}
#queue li.row:hover { background: var(--band); }
#queue li.row.cur { background: var(--sel); border-left-color: var(--accent-ink); }
#queue li.row.done { opacity: .45; }
#queue .dot { font-size: 11px; line-height: 1; align-self: center; cursor: help; }
#queue .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
#queue .name.prose { font-family: var(--sans); font-size: 12.5px; }
#queue .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
#queue-foot { padding: 8px 12px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 11px; }
.legend { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.legend .key {
  font: inherit; font-size: 11px; color: var(--dim); white-space: nowrap; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 1px 7px 1px 4px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.legend .key:hover { border-color: var(--line); }
.legend .key.on { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
.legend .num {
  font-size: 9px; opacity: .5; min-width: 6px; font-variant-numeric: tabular-nums;
}
.legend .n { font-variant-numeric: tabular-nums; opacity: .7; }
.linky {
  font: inherit; font-size: 11px; background: none; border: none; padding: 0;
  color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* --- item --------------------------------------------------------------- */
.empty { padding: 60px 28px; color: var(--dim); }
#item-title { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 0 0 16px; }
#item-title.mono { font-family: var(--mono); font-size: 15px; font-weight: 500; }
#item-title .up { color: var(--dim); font-weight: 400; }
#item-title .sep { color: var(--ink-4); padding: 0 7px; font-weight: 400; }
#item-title a { color: inherit; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 22px; }
.chip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--dim); margin-bottom: 6px;
}
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.claim { border-left: 2px solid var(--line); padding-left: 12px; margin-bottom: 20px; }
.claim p { margin: 0; font-style: italic; font-size: 14px; max-width: 72ch; }
.use { color: var(--dim); max-width: 72ch; margin: -6px 0 18px; }

/* Collapsible sections. A small arrow before the label, nothing else. */
details.sec { margin: 0 0 16px; }
details.sec > summary { cursor: pointer; list-style: none; user-select: none; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before {
  content: '▸'; display: inline-block; width: 14px; font-size: 11px; color: var(--dim);
}
details.sec[open] > summary::before { content: '▾'; }
details.sec details.sec { margin: 10px 0 0 12px; }
.version-text { white-space: pre-wrap; font: inherit; margin: 4px 0 10px; color: var(--ink-2); }

#reading { margin-bottom: 20px; }
#reading h2 { font-size: 17px; margin: 0 0 10px; font-weight: 600; }
#reading p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; max-width: 62ch; }
#reading ul, #reading ol { max-width: 62ch; font-size: 15px; }

/* Chain lists in the main column. */
ul.list { list-style: none; margin: 0; padding: 0; max-width: 78ch; }
ul.list > li { padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
ul.list > li:last-child { border-bottom: none; }
ul.list blockquote { margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--line); }
.finding { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.when { font-variant-numeric: tabular-nums; color: var(--dim); }

dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0 0 20px; max-width: 86ch; font-size: 12.5px; }
dl.facts dt { color: var(--dim); }
dl.facts dd { margin: 0; }
dl.facts a { color: var(--accent-ink); }

/* Source appraisal, rendered from markdown. */
.md { max-width: 72ch; font-size: 13.5px; line-height: 1.6; }
.md h3 { font-size: 15px; margin: 18px 0 6px; }
.md h4, .md h5, .md h6 { font-size: 13.5px; margin: 14px 0 4px; }
.md p, .md ul, .md ol { margin: 0 0 10px; }
.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 12.5px; }
.md th, .md td { border: 1px solid var(--line-soft); padding: 4px 8px; text-align: left; vertical-align: top; }
.md code, ul.list code { font-family: var(--mono); font-size: .9em; }
.md pre { font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 8px 10px; border-radius: 4px; white-space: pre-wrap; }
.md blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--dim); }
.md a { color: var(--accent-ink); }

/* Links between tabs look like text with an underline on hover. */
.go {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-ink); text-align: left;
}
.go.mono { font-family: var(--mono); font-size: 11.5px; }
.go:hover { text-decoration: underline; text-underline-offset: 2px; }
a.out { color: var(--dim); text-decoration: none; margin-left: 4px; }

.tok {
  font-family: var(--mono); font-size: .88em; padding: 1px 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--aff-muted-gold) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--aff-muted-gold) 45%, transparent);
  white-space: nowrap;
}
.tok.pending { background: color-mix(in srgb, var(--aff-dusty-blue) 18%, transparent); border-color: var(--s-blocked); color: var(--ink); }

/* Quoted words: another content item's, shown in place and linked to it. */
.quote-ref, .go.quote-ref {
  display: inline; color: inherit; line-height: inherit; text-align: inherit; padding: 0 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--f-content) 12%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--f-content) 70%, transparent);
}
.go.quote-ref:hover { text-decoration: none; background: color-mix(in srgb, var(--f-content) 22%, transparent); }
.quote-ref.unplaced { box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--f-content) 70%, transparent); outline-offset: -1px; }
.quote-ref.broken { font-family: var(--mono); font-size: .88em; background: color-mix(in srgb, var(--s-blocked) 18%, transparent); box-shadow: none; }
.edit-hint { max-width: 62ch; margin: 6px 0 0; font-size: 12.5px; color: var(--dim); }
.edit-hint code { font-family: var(--mono); font-size: 11.5px; }

#edit-heading { width: 100%; max-width: 62ch; margin-bottom: 8px; font-weight: 600; }
#edit-body {
  width: 100%; max-width: 62ch; min-height: 240px; font: inherit; font-size: 15px; line-height: 1.62;
  padding: 10px 12px; border: 1px solid var(--accent-ink); border-radius: 5px;
  background: var(--bg); color: var(--ink); resize: vertical;
}

.diff {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; margin: 0;
  white-space: pre-wrap; max-width: 78ch;
  border: 1px solid var(--line-soft); border-radius: 5px; padding: 10px 12px; background: var(--bg);
}
.diff .add { color: var(--good); }
.diff .del { color: var(--accent-ink); text-decoration: line-through; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.actions button {
  font: inherit; padding: 6px 14px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
}
.actions button:hover { border-color: var(--ink-3); }
.actions button.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.actions button.primary:hover { background: var(--btn-bg-hover); }
.actions button:disabled { opacity: .45; cursor: not-allowed; }
.actions kbd, dialog kbd {
  font-family: var(--mono); font-size: .85em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; background: var(--bg);
}
.note-row { margin-top: 10px; }
.note-row input { width: 100%; max-width: 62ch; }

/* --- chain lines -------------------------------------------------------- */
.where { font-family: var(--mono); font-size: 11.5px; }
.declared { color: var(--s-draft); }
.contested-note { color: var(--s-stale); font-style: italic; }
.empty-note { color: var(--dim); font-style: italic; }

/* --- toast / dialog ----------------------------------------------------- */
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--btn-bg); color: var(--btn-ink);
  padding: 8px 16px; border-radius: 6px; font-size: 12.5px; z-index: 20;
}
.toast .u { color: var(--aff-warm-stone); margin-left: 10px; }
dialog { border: 1px solid var(--line); border-radius: 8px; padding: 22px 26px; background: var(--card); color: var(--ink); max-width: 520px; }
dialog::backdrop { background: rgba(43, 39, 36, 0.5); }
dialog h2 { margin: 0 0 14px; font-size: 15px; }
dialog table { border-collapse: collapse; width: 100%; }
dialog td { padding: 4px 10px 4px 0; vertical-align: top; }
dialog button { font: inherit; margin-top: 14px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); cursor: pointer; }

/* --- library mode ----------------------------------------------------- */
:root { --variant: var(--aff-dusty-blue-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --variant: #7FA9BC; } }
:root[data-theme="dark"] { --variant: #7FA9BC; }
.variant-row { color: var(--variant); }
.para { position: relative; }
.para .pn { float: left; margin: 3px 8px 0 0; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.variants { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 10px; }
.variant-link { font: inherit; font-size: 12px; color: var(--variant); background: none; border: 0; padding: 0; cursor: pointer; }
.variant-link[aria-expanded="true"] { font-weight: 600; }
.variant-text { border-left: 2px solid var(--variant); padding: 4px 0 4px 12px; margin: 0 0 12px; }
.variant-text p { margin: 0 0 6px; }

/* Source appraisal and findings, written in the Sources tab. Same controls as
   the claim and content editor. */
#item-body button[data-act], #item-body #ns-lookup, #item-body #ns-create {
  font: inherit; padding: 6px 14px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
}
#item-body button[data-act]:hover { border-color: var(--ink-3); }
#item-body button.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
#item-body button.primary:hover { background: var(--btn-bg-hover); }
#item-body button.linky[data-act] { padding: 0; border: 0; background: none; color: var(--accent-ink); }
.appraisal-edit, .finding-form textarea, .finding-form input, #ns-input, #ns-id, #ns-supports, #ns-type,
.other-source input:not([type=file]), .other-source select {
  width: 100%; max-width: 72ch; font: inherit; font-size: 14px; line-height: 1.55;
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--bg); color: var(--ink); box-sizing: border-box;
}
.appraisal-edit { min-height: 480px; font-family: var(--mono); font-size: 13px; resize: vertical; border-color: var(--accent-ink); }
.finding-form { display: grid; gap: 6px; max-width: 72ch; margin: 6px 0; }
.finding-form textarea { min-height: 64px; resize: vertical; }

/* A content location in a claim: the library tree, biggest level first. */
.go.place { text-align: left; line-height: 1.5; }
.go.place .up { color: var(--dim); }
.go.place .sep { color: var(--ink-4); padding: 0 6px; }
.go.place .here { color: var(--ink); }

.nav-arrows { display: flex; gap: 4px; }

/* A finding Claude suggested, waiting for Paolo to approve, reword or drop. */
li.suggested { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.abstract p { margin: 0 0 8px; }

/* Header labels never wrap; on a narrow window the bar scrolls instead. */
.modes button, .who label { white-space: nowrap; }
.bar { overflow-x: auto; }

/* Chapters fold in the Content tab. */
/* The library outline: chapter, then its sections, then its content, each a
   step further in, so what sits under what reads at a glance. */
#queue .group.chapter {
  cursor: pointer; color: var(--ink); text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-top: 1px solid var(--line-soft);
}
#queue .group.chapter:first-child { border-top: 0; }
#queue .group.chapter.open { background: var(--band); }
#queue .group.chapter:hover { background: var(--card); }
#queue .group.chapter .caret { display: inline-block; width: 1.1em; color: var(--dim); }
#queue .group.section {
  padding: 8px 12px 3px 30px; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-style: italic; color: var(--dim);
}
#queue li.row.nested { padding-left: 38px; }

/* Top-level sections of a record read as distinct blocks: a hairline above
   each, the label in ink, and the open contents set in behind a thin left
   edge, so a section's text never runs into the next heading. No boxes, and
   nested sections (audit trails) keep the quiet style. */
#item-body > details.sec { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
#item-body > details.sec:first-child { border-top: none; padding-top: 0; }
#item-body > details.sec > summary.label {
  color: var(--ink); font-weight: 600; font-size: 11px; letter-spacing: .1em; margin: 0; padding: 2px 0;
}
#item-body > details.sec > summary.label:hover { color: var(--accent-ink); }
#item-body > details.sec > summary::before { color: var(--ink-3); }
#item-body > details.sec[open] > .sec-body {
  margin: 10px 0 2px 6px; padding-left: 14px; border-left: 2px solid var(--line);
}

/* Findings as cards: each fact sits on its own raised tile, a hairline apart. */
ul.list.cards { display: grid; gap: 8px; max-width: 78ch; }
ul.list.cards > li {
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
ul.list.cards > li:last-child { border-bottom: 1px solid var(--line); }
ul.list.cards > li.suggested { border-left: 3px solid var(--line-strong); padding-left: 12px; }
ul.list.cards > li .finding { margin-top: 0; font-size: 13.5px; }
.finding-more { margin-top: 6px; }
.finding-form .counter { font-size: 11px; text-align: right; }

/* How a finding bears on the claim in view: a word and a coloured left edge.
   Opposing findings sort first. */
.badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.stance-badge {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.stance-badge.supports { color: var(--good); }
.stance-badge.contradicts { color: var(--accent-ink); }
.stance-badge.qualifies { color: var(--s-blocked); }
.stance-badge.background { color: var(--dim); }
ul.list.cards > li.stance-supports { border-left: 3px solid var(--good); }
ul.list.cards > li.stance-contradicts { border-left: 3px solid var(--accent-ink); }
ul.list.cards > li.stance-qualifies { border-left: 3px solid var(--s-blocked); }
.discard { font-size: 11px; color: var(--dim) !important; }
.discard:hover { color: var(--accent-ink) !important; }
/* The finding's text keeps the link colour; the line under it says where it
   came from, in the suggestion colour when Claude suggested it. */
ul.list.cards .finding .go { text-align: left; }
.from .go { color: inherit; }

/* Link a source to a claim, and approve a suggested link with a stance. */
.link-source { margin-top: 10px; }
.link-pop { margin-top: 6px; max-width: 72ch; }
.link-pop .link-q, .merge-pop .merge-q { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--bg); color: var(--ink); }
.link-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; }
.link-results li { border-bottom: 1px solid var(--line-soft); }
.link-results button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 6px 9px; cursor: pointer; font-size: 12.5px; }
.link-results button:hover { background: var(--card); }
.approve-as { display: inline-flex; gap: 4px; }
.more-findings { margin: 8px 0 4px; }
#item-body .approve-as button.as { padding: 1px 8px; font-size: 11px; border-radius: 999px; }
#item-body .approve-as button.as.picked { border-color: var(--ink-3); font-weight: 600; }

/* External / Internal filter for sources, styled like the status keys. */
.origin { display: inline-flex; gap: 2px; margin-right: 6px; }
.origin .key { font: inherit; font-size: 11.5px; border: 1px solid transparent; background: none; color: var(--dim); padding: 1px 8px; border-radius: 999px; cursor: pointer; }
.origin .key:hover { border-color: var(--line); }
.origin .key.on { color: var(--ink); border-color: var(--line-strong); background: var(--card); }

/* The console's read-only Studio (served at /studio/ by services/backlog):
   nothing that writes is drawn, and the sign-in covers the page until done. */
body.readonly #actions, body.readonly #editor, body.readonly #note-row,
body.readonly [data-act], body.readonly .research-verify,
body.readonly [data-mode="agenda"], body.readonly #reviewer { display: none !important; }
.who .snap { color: var(--dim); }
/* A change on its way to the repo: the header counts them, and the button that
   sent one waits with it. */
.who .snap.busy { color: var(--ink); }
.who .snap.busy::before { content: '●'; margin-right: 6px; animation: saving-pulse 1.2s ease-in-out infinite; }
@keyframes saving-pulse { 50% { opacity: 0.25; } }
button.busy { opacity: 0.55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .who .snap.busy::before { animation: none; } }
.who span { white-space: nowrap; }
.signin { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg); }
.signin[hidden] { display: none; }
.signin > div { text-align: center; display: grid; gap: 12px; justify-items: center; }

/* Add a source: a paper, or a web page, document or PDF. */
.kinds { display: flex; gap: 2px; }
.kinds button {
  font: inherit; border: 1px solid var(--line); background: none; color: var(--dim);
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.kinds button.on { color: var(--ink); background: var(--card); border-color: var(--ink-3); }

/* A revisit flag: the reviewer's own doubt, kept in view until cleared. */
.revisit { border-left: 3px solid var(--s-draft); padding: 6px 12px; margin: 10px 0; background: var(--card); }
.revisit p { margin: 4px 0; }
.claim-appraisal { min-height: 140px; font-family: var(--sans); font-size: 14px; }

/* An internal source’s note: one free box. */
.note-edit { min-height: 90px; font-family: var(--sans); font-size: 14px; }
.merge-pop { flex-basis: 100%; margin-top: 6px; max-width: 72ch; }

/* Content flagged as likely written by Claude. */
.by-claude { display: inline-block; min-width: 1.2em; text-align: center; border-radius: 3px; background: var(--warn, #b5651d); color: #fff; font-size: 10px; font-weight: 600; }
.by-claude-note { border-left: 3px solid var(--warn, #b5651d); padding: 6px 10px; margin: 0 0 12px; background: color-mix(in srgb, var(--warn, #b5651d) 10%, transparent); }

/* Claims linked to content: the claim's words first, its status and id below. */
.link-claims { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; }
.link-claim { border: 1px solid var(--line-soft); border-left: 3px solid var(--accent-ink); border-radius: 4px; padding: 6px 9px; background: var(--card); position: relative; }
.link-claim.retired { opacity: .55; border-left-color: var(--dim); }
.link-claim .assertion { display: block; font-size: 13px; line-height: 1.4; }
.link-claim .meta { display: block; margin-top: 3px; font-size: 11px; color: var(--dim); }
.link-claim .discard { position: absolute; top: 4px; right: 6px; }
.links-list .unit-label { display: block; font-style: italic; }

/* Record families along the chain, one hue each, from the bands on the
   "Seven words, one chain" page: evidence (source, finding), claim, content,
   and what is published (piece, slot, placement). Used only as a label tint,
   a section edge and a tab underline, never for text, so statuses keep their
   own colours. */
:root {
  --f-evidence: var(--aff-dusty-blue);
  --f-claim: var(--aff-deep-terracotta);
  --f-content: var(--aff-muted-gold-ink);
  --f-output: var(--aff-soft-sage);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --f-evidence: #7FA9BC; --f-claim: var(--aff-terracotta-glow); --f-content: var(--aff-muted-gold); --f-output: var(--aff-soft-sage-glow); } }
:root[data-theme="dark"] { --f-evidence: #7FA9BC; --f-claim: var(--aff-terracotta-glow); --f-content: var(--aff-muted-gold); --f-output: var(--aff-soft-sage-glow); }

.tt { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; vertical-align: 1px; color: var(--ink);
  background: color-mix(in srgb, var(--fam, var(--dim)) 18%, transparent); box-shadow: inset 2px 0 0 var(--fam, var(--dim)); }
.tt-evidence { --fam: var(--f-evidence); }
.tt-claim { --fam: var(--f-claim); }
.tt-content { --fam: var(--f-content); }
.tt-output { --fam: var(--f-output); }

details.sec[data-family] > summary { box-shadow: inset 3px 0 0 var(--fam); padding-left: 9px; }
details.sec[data-family="evidence"] { --fam: var(--f-evidence); }
details.sec[data-family="claim"] { --fam: var(--f-claim); }
details.sec[data-family="content"] { --fam: var(--f-content); }
details.sec[data-family="output"] { --fam: var(--f-output); }

button[data-mode][data-family] { box-shadow: inset 0 -2px 0 transparent; }
button[data-mode][data-family].on { box-shadow: inset 0 -2px 0 var(--fam); }
button[data-mode][data-family="evidence"] { --fam: var(--f-evidence); }
button[data-mode][data-family="claim"] { --fam: var(--f-claim); }
button[data-mode][data-family="content"] { --fam: var(--f-content); }
button[data-mode][data-family="output"] { --fam: var(--f-output); }

/* Linked claims and the claim family share the edge colour. */
.link-claim { border-left-color: var(--f-claim); }

.revisit-mark { background: var(--s-stale); }

/* Pieces: the picture first, then what it shows and at which sizes. */
.piece-figure { margin: 0 0 16px; }
.piece-figure img { display: block; width: auto; height: auto; max-width: min(100%, 420px); max-height: 420px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.piece-figure figcaption { margin-top: 6px; font-size: 12.5px; }
.slot-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-pick { font: inherit; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--dim); cursor: pointer; }
.slot-pick.on { color: var(--ink); background: var(--card); border-color: var(--ink-3); box-shadow: inset 0 -2px 0 var(--f-output); }
.piece-parts li { margin-bottom: 12px; }
.piece-parts .part-text { margin: 0 0 4px; max-width: 62ch; }
.piece-row { display: flex; gap: 12px; align-items: flex-start; }
.go.thumb-link { flex: none; }
.piece-img.thumb { display: block; width: 96px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }

/* A source page: the header line, the figure check's mark on each finding,
   and the source appraisal's edit form. */
.source-head { margin: 0 0 14px; font-size: 13px; color: var(--dim); }
.source-head a, .source-head .linky { color: var(--accent-ink); }
.vmark { font-weight: 600; }
.vmark.found, .vmark.rounded, .vmark.derived { color: var(--s-approved); }
.vmark.weak { color: var(--s-draft); }
.vmark.missing { color: var(--s-stale); }
.appraisal-form { display: grid; gap: 6px; max-width: 72ch; margin: 6px 0; }
.appraisal-form textarea { min-height: 52px; resize: vertical; }
.appraisal-form .label { margin-top: 6px; }