/* ar-intake styles. Plain CSS, no build step.

   Sections, in order: tokens (colours, spacing, type) -> base -> page shell (skip link, sidebar, main) ->
   buttons -> forms -> tables -> layout helpers -> shared components (page header, tabs, stepper, empty state,
   status badge, attention list, action bar, monogram, messages, person picker) -> pages (collections, collection
   workspace and track, people, agreements, import and review, history, database, documents).

   The shared components are rendered by the macros in templates/_macros.html; use those rather than writing
   the markup by hand, and don't add one-off styles (or style="...") to a page: add a helper here instead.
   Behaviour (tabs, clickable rows, busy buttons, the person picker) is in static/app.js, "Shared components". */

[hidden] { display: none !important; }

/* --- tokens ------------------------------------------------------------------------------------------ */
:root {
  /* colours (dark versions below) */
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1d1d1f; --muted: #6b6b70; --line: #e4e2dc; --line-strong: #cfccc4;
  --hover: #efede8;
  --accent: #3a5bd9; --accent-hover: #2f4cc0; --accent-ink: #ffffff; --accent-bg: #eaeefc;
  --ok: #1f7a4d; --ok-bg: #e7f5ee; --warn: #9a5b00; --warn-bg: #fff4de;
  --err: #b3261e; --err-bg: #fdecea; --claude: #7a4dd8; --claude-bg: #f3edff;
  --focus: #3a5bd9; --focus-halo: rgba(58, 91, 217, .22);
  --radius: 10px; --radius-sm: 7px;
  /* spacing scale: use these for margins, padding and gaps */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* type scale */
  --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 18px; --text-lg: 22px; --text-xl: 26px;
  --sidebar: 220px;
  --main-pad: 28px;  /* main's top padding; the sticky page header pulls itself up into it */
  --main-pad-bottom: 80px;  /* main's bottom padding; the sticky action bar pushes itself down into it */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a; --panel: #212125; --ink: #ececef; --muted: #a0a0a8; --line: #34343a; --line-strong: #4a4a52;
    --hover: #2b2b30;
    --accent: #7b93ff; --accent-hover: #9aadff; --accent-ink: #0d0d10; --accent-bg: #232a45;
    --ok: #5fd197; --ok-bg: #173226; --warn: #f0b55a; --warn-bg: #3a2c12;
    --err: #ff8a80; --err-bg: #3a1a18; --claude: #b89cff; --claude-bg: #2a2240;
    --focus: #9fb1ff; --focus-halo: rgba(123, 147, 255, .3);
  }
}

/* --- base -------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: var(--text-base)/1.5 -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); display: flex; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--text-xl); line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: var(--text-md); margin: 28px 0 10px; }
h3 { font-size: var(--text-base); margin: 0 0 8px; }
summary { cursor: pointer; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-sm); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
/* Keyboard focus: a visible ring on everything focusable (mouse clicks don't show it). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible, summary:focus-visible { border-radius: 4px; }
/* Hidden on screen, still read by screen readers (also a tab's own heading once JS shows one tab at a time). */
.visually-hidden, .tabs.tabs-js .tab-heading { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- page shell (base.html) -------------------------------------------------------------------------- */
/* Skip link: the first thing Tab reaches; jumps past the sidebar to <main id="content">. */
.skip-link { position: absolute; left: var(--space-2); top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4); border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: var(--space-2); text-decoration: none; }

/* Sidebar: the everyday pages first, then a folded "Tools" group (<details class="nav-tools">), then who's
   signed in and the version. The active section's link has .active and aria-current="page" (base.html works
   out the section; a view can set it with nav=...). */
nav.side { width: var(--sidebar); flex: none; background: var(--panel); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
nav.side .brand { font-weight: 700; font-size: 17px; margin: 0 10px 18px; }
nav.side .brand span { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
nav.side a { color: var(--ink); padding: 8px 10px; border-radius: 8px; }
nav.side a:hover { background: var(--bg); text-decoration: none; }
nav.side a.active { background: var(--accent); color: var(--accent-ink); }
nav.side .nav-main { display: flex; flex-direction: column; gap: 2px; }
nav.side .spacer { flex: 1; min-height: var(--space-4); }
nav.side details.nav-tools { border-top: 1px solid var(--line); padding-top: var(--space-2); }
nav.side details.nav-tools > summary { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: var(--text-sm); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
nav.side details.nav-tools > summary:hover { background: var(--bg); color: var(--ink); }
nav.side details.nav-tools .nav-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
nav.side details.nav-tools .nav-sub a { font-size: 14px; }
nav.side .who { padding: 8px 10px; }
/* overflow-anchor: none - the sticky header gets shorter once scrolled (.stuck); with scroll anchoring the browser
   would scroll back up by that much, un-sticking it again, so a slow scroll (trackpad) could never leave the top. */
main { flex: 1; min-width: 0; overflow-y: auto; overflow-anchor: none; padding: var(--main-pad) 36px var(--main-pad-bottom); }
main:focus { outline: none; }
.page { max-width: 1100px; margin: 0 auto; }
@media (max-width: 1100px) {
  :root { --sidebar: 196px; --main-pad: 24px; --main-pad-bottom: 72px; }
  main { padding: var(--main-pad) 24px var(--main-pad-bottom); }
}

/* A <details> with its own arrow instead of the browser's marker (the Tools group, agreement term groups):
   ::after on the right for the sidebar, ::before on the left for the term groups. */
details.nav-tools > summary, details.term-group > summary { list-style: none; }
details.nav-tools > summary::-webkit-details-marker, details.term-group > summary::-webkit-details-marker { display: none; }
details.nav-tools > summary::after, details.term-group > summary::before { content: "\25B8"; font-size: 11px; transition: transform .15s; }
details.nav-tools[open] > summary::after, details.term-group[open] > summary::before { transform: rotate(90deg); }

/* --- buttons -----------------------------------------------------------------------------------------
   One hierarchy, use it in this order of weight:
     .btn.primary   the one main action of a page or section (at most one per screen area)
     .btn           default / secondary actions
     .btn.quiet     low-emphasis actions (Cancel, Back, "Show more"); looks like a link with a hover area
     .btn.link      a button that looks exactly like a link (inline in text; same as the older button.link)
     .btn.danger    destructive (Delete, Discard); add .primary for a filled red button in a confirm step
   Sizes: .btn.small, .btn.big. A submitted form's button gets .is-loading from app.js.
   Order: the primary action first, then Cancel/Back as .quiet. In a page header the primary sits last (right). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); padding: 7px 14px; border-radius: 8px; font: inherit; font-weight: 500; line-height: 1.4; cursor: pointer; text-align: center; }
.btn:hover { text-decoration: none; background: var(--hover); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--accent); }
.btn.quiet:hover { background: var(--hover); }
.btn.link, button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; display: inline; }
.btn.link:hover { background: none; }
.btn.danger { color: var(--err); }
.btn.danger.primary { background: var(--err); border-color: var(--err); color: var(--panel); }
.btn.small { padding: 3px 10px; font-size: var(--text-sm); }
.btn.big { padding: 11px 22px; font-size: 16px; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Busy: set by app.js on the button that submitted a form (spinner before the label; clicks ignored). */
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
/* A row of buttons (and filter fields): wraps on narrow windows. .flush: no margin (inside a field). */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.actions.flush { margin: 0; }
.actions form { margin: 0; }

/* --- forms -------------------------------------------------------------------------------------------
   A field (macro input_field, or by hand):
     <label class="field [has-error]">
       <span class="label">Email <b class="req" title="required">*</b></span>
       <input name="email" value="..." [aria-invalid="true"]>
       <span class="hint">Notices are sent here</span>        (optional)
       <span class="err">This is required</span>             (only with an error)
     </label>
   Lay several out with .grid (auto columns) or .form-stack (one column; .wide for long values).
   A field without a visible label (in a table, a search box) gets aria-label. */
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 9px; max-width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px var(--focus-halo); }
label.field { display: flex; flex-direction: column; gap: 3px; }
label.field .label { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
label.field input, label.field select, label.field textarea { width: 100%; }
label.field .actions input { width: auto; }
.req { color: var(--err); font-weight: 700; }
.hint { font-size: var(--text-xs); color: var(--muted); }
label.field.has-error .label { color: var(--err); }
.has-error input, .has-error select, .has-error textarea, input.has-error, select.has-error { border-color: var(--err); background: var(--err-bg); }
.err { font-size: var(--text-xs); color: var(--err); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.grid > .span-2 { grid-column: span 2; }  /* a field with more in it (the review's producer picker) */
label.inline.use-existing { align-items: flex-start; margin-bottom: var(--space-3); }
label.inline.use-existing input { margin-top: 4px; }
.form-stack { display: grid; gap: var(--space-3); max-width: 560px; }
.form-stack.wide { max-width: 760px; }
/* Text boxes in a row of .actions: .input-wide for a search box, .input-grow to take the rest of the row. */
.input-wide { min-width: min(260px, 100%); flex: 1 1 260px; }
.input-grow { flex: 1; min-width: min(300px, 100%); }
.inline { display: inline-flex; align-items: center; gap: 6px; }
/* Radio buttons / checkboxes side by side (.choice-stack: one per line); .checks: a wrapping group of checkboxes. */
.choice { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.choice label { display: inline-flex; gap: 6px; align-items: center; }
.choice-stack { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* Under a "Same as ..." choice: what the files would add to that saved entry, and the details they'd replace. */
.choice .match-details { flex-basis: 100%; display: grid; gap: 4px; margin: -4px 0 4px 24px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.from-claude input, input.from-claude { border-color: var(--claude); background: var(--claude-bg); }

/* --- tables ------------------------------------------------------------------------------------------
   Plain <table> is styled by default. Variants:
     table.compact          tighter rows, smaller text (long lists, side panels)
     <tr data-href="url">   the whole row opens url (app.js); keep a real link to the same place in the row
                            (usually the title) so keyboard users reach it first
     .table-scroll / .table-wrap   a box that scrolls sideways for wide tables (wrap every table that can
                            get wide, so the page itself never scrolls sideways)
     th.col-narrow / .col-share / .col-wide   fixed column widths (a checkbox, a %, a label) */
/* No overflow: hidden (it would cut off a name list or a pop-up in a cell): the corner cells are rounded instead. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table > :first-child > tr:first-child > :first-child, table > tr:first-child > :first-child { border-top-left-radius: var(--radius); }
table > :first-child > tr:first-child > :last-child, table > tr:first-child > :last-child { border-top-right-radius: var(--radius); }
table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--bg); }
tr:last-child td { border-bottom: 0; }
td input, td select { width: 100%; }
table.compact th, table.compact td { padding: 5px 8px; font-size: var(--text-sm); }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: var(--hover); }
td.middle, tr.middle td { vertical-align: middle; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll, .table-wrap { overflow-x: auto; max-width: 100%; }
.col-narrow { width: 90px; }
.col-share { width: 150px; }
.col-wide { width: 230px; }

/* --- layout helpers ---------------------------------------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.card.skipped { opacity: .5; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-title { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.narrow-card { max-width: 420px; margin: 40px auto; }
/* A heading further down a card or form (not the first thing in it). */
.subhead { margin-top: var(--space-4); }
h2.subhead { font-size: var(--text-base); margin-bottom: var(--space-2); }
.spacer-flex { flex: 1; }
.nowrap { white-space: nowrap; }
.keep-lines { white-space: pre-line; }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
details.more { margin-top: 10px; }
details.more summary { color: var(--accent); font-size: var(--text-sm); }
details.more .grid { margin-top: 10px; }
/* A split row's x (review.html, collection.html): take the writer out; "<name> removed - Undo" shows in its place. */
.row-x { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.row-x:hover, .row-x:focus-visible { color: var(--err); border-color: var(--err); }
.removed-note td { color: var(--muted); font-size: var(--text-sm); }
.total { font-weight: 600; }
.total.bad { color: var(--err); }
.total.good { color: var(--ok); }
.log { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-sm); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-height: 160px; white-space: pre-wrap; }
.spinner { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .btn.is-loading::before { animation-duration: 2.4s; }
}
.gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.gallery img { max-width: 180px; max-height: 180px; display: block; }
.gallery figcaption { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
audio { width: 260px; max-width: 100%; height: 32px; }
/* Facts: a row of small labelled values (<dl class="facts"><div><dt>..</dt><dd>..</dd></div>...);
   .cols lays them out in columns (a person's saved details). */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); }
.facts.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.facts dt { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.link-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.link-list li { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }

/* --- shared components ------------------------------------------------------------------------------- */

/* Page header (macro page_header): breadcrumbs, title (+ optional monogram), subtitle, and the page's primary
   action on the right. Every page starts with one.
     <header class="page-header">
       <nav class="crumbs" aria-label="Breadcrumb"><ol><li><a href>Collections</a></li><li aria-current="page">X</li></ol></nav>
       <div class="page-header-main">[monogram] <div class="page-header-text"><h1>X</h1><p class="subtitle">..</p></div>
         <div class="page-header-actions">..</div></div>
     </header> */
.page-header { margin: 0 0 var(--space-5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-sm); color: var(--muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--space-1); }
.crumbs [aria-current] { color: var(--muted); }
.page-header-main { display: flex; align-items: flex-start; gap: var(--space-4); }
.page-header-text { flex: 1; min-width: 0; }
.page-header h1 { margin: 0; overflow-wrap: anywhere; }
.page-header .subtitle { margin: var(--space-1) 0 0; color: var(--muted); }
.page-header .subtitle .badges { margin-left: var(--space-1); }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: none; max-width: 50%; }
.page-header-actions form { margin: 0; }
/* .sticky keeps the header at the top while a long page (the collection workspace) scrolls. It pulls itself up
   into main's top padding, so it sticks at the very top with no strip of page scrolling by above it (the same
   look while not stuck). Once the page has scrolled, app.js adds .stuck and the header gets compact: no
   breadcrumbs, a smaller title and monogram, the subtitle's details (.subtitle-detail) hidden but its badges
   kept, and only the primary action. The page under it must not move when it gets shorter, so app.js sets
   --stuck-gap to the height it lost and that is kept as space below it (no jump, nothing to scroll back). */
.page-header.sticky { position: sticky; top: calc(-1 * var(--main-pad)); z-index: 5; background: var(--bg); margin-top: calc(-1 * var(--main-pad)); padding: calc(var(--main-pad) + var(--space-3)) 0 var(--space-3); border-bottom: 1px solid var(--line); }
.flash + .page-header.sticky, .import-saved + .page-header.sticky { margin-top: -14px; }
.page-header.sticky.stuck .crumbs, .page-header.sticky.stuck .subtitle-detail,
.page-header.sticky.stuck .page-header-actions > :not(.primary) { display: none; }
.page-header.sticky.stuck { padding-top: var(--space-4); margin-bottom: calc(var(--space-5) + var(--stuck-gap, 0px)); }
.page-header.sticky.stuck .page-header-main { align-items: center; }
.page-header.sticky.stuck h1 { font-size: var(--text-lg); }
.page-header.sticky.stuck .subtitle { margin: 0; }
.page-header.sticky.stuck .subtitle .badges { margin-left: 0; }
.page-header.sticky.stuck .monogram.lg { width: 40px; height: 40px; border-radius: 9px; font-size: 15px; }
.page-header.sticky.stuck .page-header-actions { max-width: 40%; }

/* Section heading with links or buttons on the right (.row-head is the older name of the same thing).
   .flush: no space above (the first thing in a card or box). */
.section-head, .row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.section-head { margin-top: 28px; }
.section-head h2 { margin: 0; }
.section-head.flush, .card > .section-head:first-child { margin-top: 0; }
/* A heading with badges and something on the right (the review's person cards): badges beside the heading. */
.row-head > h3 + .badges { margin-right: auto; }
.row-head > h3 { margin: 0; }

/* Tabs (macros tabs + tab_panel): a row of in-page links over panels. Without JS every panel shows, one after
   another, with its own heading. With JS (app.js adds .tabs-js) one panel shows at a time, the URL hash picks
   it (a link to any id inside a panel opens that panel) and Left/Right/Home/End move between tabs.
   A .tab-list of plain links (no data-tabs) is a set of filters, e.g. the agreements list. */
.tab-list { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 var(--space-5); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active, .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs:not(.tabs-js) .tab-panel + .tab-panel { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.tab-heading { margin-top: 0; }
.tab-panel:focus { outline: none; }
.tab-panel > .tab-heading + h2, .tab-panel > .tab-heading + .section-head, .tab-panel > .tab-heading + .card { margin-top: 0; }

/* Stepper (macro stepper): where the user is in a flow, e.g. Choose -> Import -> Review -> Save.
   Each .step is .done, .current (with aria-current="step") or upcoming (no class). */
.stepper { list-style: none; display: flex; align-items: center; margin: 0 0 var(--space-5); padding: 0; }
.step { display: flex; align-items: center; gap: var(--space-2); flex: 1; color: var(--muted); font-size: var(--text-sm); }
.step:first-child { flex: none; }
.step + .step::before { content: ""; flex: 1; height: 2px; min-width: var(--space-4); background: var(--line); margin: 0 var(--space-2); }
.step-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; flex: none; background: var(--panel); }
.step.done { color: var(--ink); }
.step.done .step-dot { background: var(--ok); border-color: var(--ok); color: var(--panel); }
.step.done + .step::before { background: var(--ok); }
.step.current { color: var(--ink); font-weight: 600; }
.step.current .step-dot { border-color: var(--accent); color: var(--accent); }
.step-label { white-space: nowrap; }

/* Empty state (macro empty_state): a list or page with nothing in it yet - a title, one sentence, one action
   (+ at most one secondary). .compact for inside a card or a tab. Every list has one. */
.empty-state { text-align: center; padding: var(--space-6) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel); margin: var(--space-4) 0; }
.empty-state .empty-title { margin: 0 0 6px; font-size: var(--text-md); }
.empty-state p { color: var(--muted); margin: 0 auto var(--space-4); max-width: 52ch; }
.empty-state .actions { justify-content: center; margin: 0; }
.empty-state.compact { padding: var(--space-4); }
.empty-state.compact .empty-title { font-size: var(--text-base); }

/* Status badge (macro status_badge; agreement_badge for an agreement): one small coloured label per state.
   Kinds: draft, none, neutral (grey) | sent, info (blue) | signed, agreed, ok (green) |
   proposed, attention, stale, warn (amber) | error, err (red) | claude (purple). */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; border-radius: 99px; font-size: var(--text-xs); font-weight: 600; line-height: 21px; white-space: nowrap; background: var(--hover); color: var(--muted); vertical-align: middle; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge.sent, .badge.info { background: var(--accent-bg); color: var(--accent); }
.badge.signed, .badge.agreed, .badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.proposed, .badge.attention, .badge.stale, .badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.error, .badge.err { background: var(--err-bg); color: var(--err); }
.badge.claude { background: var(--claude-bg); color: var(--claude); }
/* A number beside a heading or tab: <span class="count">3</span> (.warn when it is things to fix). */
.count { display: inline-block; font-size: var(--text-xs); font-weight: 600; background: var(--hover); color: var(--muted); border-radius: 99px; padding: 0 7px; line-height: 19px; vertical-align: middle; }
.count.warn { background: var(--warn-bg); color: var(--warn); }
.badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); vertical-align: middle; }

/* Attention list (macro attention_list): things to do, each with a coloured mark (or a monogram), a line of
   text that links to where it's done, optional details/badges below, and at most one action button. */
.attention-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.attention-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.attention-list > li:last-child { border-bottom: 0; }
.attention-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex: none; }
.attention-mark.err { background: var(--err); }
.attention-mark.info { background: var(--accent); }
.attention-mark.ok { background: var(--ok); }
.attention-mark.claude { background: var(--claude); }
.attention-body { flex: 1; min-width: 0; }
.attention-text { font-weight: 600; overflow-wrap: anywhere; }
.attention-meta { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
.attention-meta a { white-space: nowrap; }
.attention-action { flex: none; }
.attention-action form { margin: 0; }

/* Action bar (macro action_bar): Save/Cancel for a long form, stuck to the bottom of the window. Primary
   action first (left), then Cancel as a quiet button; .action-note pushes a hint to the right. main is the
   scroller and a sticky box stops short of its padding, so the bar pushes itself down into main's bottom padding
   (else the page would scroll by underneath it). */
.action-bar { position: sticky; bottom: calc(-1 * var(--main-pad-bottom)); z-index: 5; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; background: var(--bg); padding: var(--space-3) 0; border-top: 1px solid var(--line); margin-top: var(--space-5); }
.action-bar .action-note { margin-left: auto; font-size: var(--text-sm); color: var(--muted); }

/* Monogram (macro monogram): initials on a colour worked out from the name (the same name always gets the
   same colour). Stands in for artwork on collections and tracks; .round for people. Sizes .sm, (default), .lg. */
.monogram { --hue: 220; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 9px; background: hsl(var(--hue) 60% 90%); color: hsl(var(--hue) 45% 28%); font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1; user-select: none; vertical-align: middle; }
.monogram.sm { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
.monogram.lg { width: 56px; height: 56px; border-radius: 12px; font-size: 20px; }
.monogram.round { border-radius: 50%; }
@media (prefers-color-scheme: dark) {
  .monogram { background: hsl(var(--hue) 28% 27%); color: hsl(var(--hue) 75% 86%); }
}
/* A name with its monogram in a list: <span class="with-mono">{{ monogram(x, 'sm') }} <a>x</a></span> */
.with-mono { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Messages. .flash is the message after an action (base.html): .ok "Saved ...", .error "Couldn't ...: ...
   Try ...". .notice is a standing note on a page (amber; .ok green). */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--err-bg); color: var(--err); }
/* A file saved with no app to open it (base.html "saved-file"): where it is, then Show in folder / Download. */
.flash.saved-file p { margin: 0 0 var(--space-2); }
.notice { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: 8px; margin: 10px 0; }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice-list { margin: 6px 0 0; }
.notice-choice { margin-top: 6px; }

/* Person picker (macro person_picker, or <select data-person-picker>): app.js replaces it with one box - type a
   name, pick from the list below it, or "Add ... as someone new" (.combo-new). The list floats over the page
   (position: fixed, placed by app.js under the box, or above it near the bottom of the window), so no table or
   scrolling area around a box can cut it off. */
.picker-filter { display: block; width: 100%; margin-bottom: var(--space-1); }
.choice .picker-filter { display: inline-block; width: auto; margin: 0; }
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-list { position: fixed; z-index: 30; margin: 0; padding: var(--space-1) 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.combo-list li { padding: 6px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-2); }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--hover); }
.combo-list .combo-group { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.combo-list .combo-new { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line); }
.combo-list .combo-empty { color: var(--muted); cursor: default; }
.combo-note { display: block; margin-top: 2px; }
.combo-note:empty { display: none; }
.field-stack { display: flex; flex-direction: column; gap: var(--space-1); }
.records textarea { width: 100%; min-width: 14rem; }

/* --- pages: collections list (collections.html), Home, people list ------------------------------------ */
.row-actions { white-space: nowrap; text-align: right; }
td .reasons { display: inline-block; margin-top: 2px; }

/* --- pages: track board (board.html) and "Where it's up to" (track.html) -------------------------------
   One column per stage, side by side while they fit, wrapping onto more rows in a narrow window. */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); align-items: start; }
.board-col { background: var(--hover); border-radius: var(--radius); padding: var(--space-3); min-width: 0; }
.board-col > h2 { font-size: var(--text-base); margin: 0; }
.board-help { margin: 2px 0 var(--space-2); }
.board-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); display: grid; gap: 3px; overflow-wrap: anywhere; }
.board-title { color: var(--ink); }
.board-move { margin-top: var(--space-1); }
.board-move select { flex: 1 1 auto; min-width: 0; }
.progress-card > .small .badge { margin-right: var(--space-1); }

/* --- pages: collection workspace (collection.html) and track page (track.html) ------------------------
   The workspace is <div class="tabs workspace" data-tabs data-workspace> under a sticky page header; app.js sets
   --sticky-offset (the header's height) so a #link lands below the header, and --flash-offset so a message
   moved next to it after a save stays in view. */
.workspace [id] { scroll-margin-top: calc(var(--sticky-offset, 0px) + var(--flash-offset, 0px) + var(--space-3)); }
.workspace .flash { scroll-margin-top: calc(var(--sticky-offset, 0px) + var(--space-3)); }
.workspace .card-form { margin-top: var(--space-3); }
.workspace .section-head h2 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.workspace tr.done td:first-child { text-decoration: line-through; color: var(--muted); }
.workspace td.action-cell { width: 130px; }
.workspace .split-table label.field { gap: 2px; }
.track-block { margin-bottom: var(--space-5); }
.track-block h3 { margin-bottom: var(--space-2); }
.audio-table td.nowrap { white-space: nowrap; }
.track-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.track-notes { white-space: pre-line; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.collection-wide { margin-top: var(--space-5); border-left: 3px solid var(--accent); }
.collection-wide .facts { margin-bottom: var(--space-2); }

/* --- pages: People & companies (people.html, person.html) -------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
dl.contact { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
dl.contact dt { color: var(--muted); font-size: var(--text-sm); }
dl.contact dd { margin: 0; overflow-wrap: anywhere; }
dl.contact .btn { margin-left: var(--space-2); }
.contact-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.contact-name .name { font-weight: 600; }

/* --- downloads and samples: the Files tab's tick boxes (form="pick"), sample forms (_samples.html) ------ */
.download-bar { margin-bottom: var(--space-4); }
.download-bar p { margin: 0 0 var(--space-2); }
.col-tick { width: 32px; }
.pick-track { display: inline-flex; margin-right: var(--space-1); }
.pick-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-1); }
.pick-list li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.add-sample { margin: var(--space-3) 0 var(--space-5); }

/* --- collection page: Who's on it and "Add someone" (collection.html) ------------------------------------ */
.add-person { margin: var(--space-3) 0 var(--space-5); }
.add-person-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; }
.add-person-row .field-stack { flex: 1 1 300px; }
.add-person-row .col-role { flex: 0 1 13rem; }
.add-person-row > .btn { margin-bottom: 2px; }

/* --- import review: rows of person boxes (Artists, Who else worked on it) ----------------------------- */
.person-rows .rows-table { width: 100%; border: 0; margin: 0; }
.person-rows .rows-table td { border: 0; padding: 0 var(--space-2) var(--space-2) 0; vertical-align: top; }
.person-rows .rows-table td.col-role { width: 13rem; }
.person-rows .actions { margin-top: 0; }

/* --- track page: collaborators (_collaborators.html) ------------------------------------------------- */
.collab-figure { margin: 0 0 var(--space-3); overflow-x: auto; }
.collab-map { width: 100%; min-width: 620px; height: auto; max-height: 600px; display: block; }
.collab-line { stroke: var(--line-strong); stroke-width: 1.5; }
.collab-line.inherited { stroke-dasharray: 5 4; }
.collab-line.link { stroke: var(--muted); stroke-width: 1; }
.collab-node { stroke: var(--panel); stroke-width: 2; }
.collab-map a:hover .collab-node, .collab-map a:focus .collab-node { stroke: var(--ink); }
.collab-label { fill: var(--ink); font-size: 13px; }
.collab-label.small { font-size: 11px; fill: var(--muted); }
.collab-centre { fill: var(--accent); }
.collab-centre-label { fill: var(--accent-ink); font-size: 12px; font-weight: 600; }
.collab-writing { fill: #7c5cd6; background: #7c5cd6; }
.collab-production { fill: #2f6fe0; background: #2f6fe0; }
.collab-engineering { fill: #12968a; background: #12968a; }
.collab-performance { fill: #d9822b; background: #d9822b; }
.collab-business { fill: #6b7280; background: #6b7280; }
.collab-other { fill: #a3a3a3; background: #a3a3a3; }
.collab-company { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; background: var(--panel); }
.collab-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--muted); }
.collab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.collab-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.collab-key.square { border-radius: 2px; border: 1.5px solid var(--muted); }
.collab-key-line { display: inline-block; width: 22px; border-top: 2px solid var(--line-strong); }
.collab-key-line.inherited { border-top-style: dashed; }
.collab-credit { white-space: nowrap; }
.collab-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.collab-form h3 { margin: 0 0 var(--space-2); }
.inline-form { display: inline; margin-left: 4px; }
.ask-answer { font-size: 1.05em; white-space: pre-wrap; margin: 0 0 8px; }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; }

/* --- pages: producer agreements (contract_pick / contract_form / contract_preview / contract_view) ---- */
/* "Describe a change for Claude": a wording change word by word (removed struck through, new underlined). */
.wording-diff del, del.wording-diff { color: var(--err); background: var(--err-bg); text-decoration: line-through; }
.wording-diff ins { color: var(--ok); background: var(--ok-bg); text-decoration: underline; }
/* Producer step: the collection's producer as a card with their saved details (.facts.cols). */
.producer-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.producer-head h2 { margin: 0 0 var(--space-1); }
.choose-producer > summary { margin: var(--space-5) 0 var(--space-2); }
.choose-producer > summary h2 { display: inline; margin: 0; }
.add-producer { margin-top: var(--space-4); }
/* Terms form: the summary line, the "Still needed" list kept in view, and folding groups with their progress. */
.form-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.needed-list { position: sticky; top: 0; z-index: 4; box-shadow: 0 1px 0 var(--line); }
.needed-list a { margin-right: 10px; white-space: nowrap; }
.group { margin-bottom: 16px; }
details.term-group > summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
details.term-group > summary::before { color: var(--muted); }
details.term-group > summary h3 { margin: 0; }
details.term-group[open] > summary { margin-bottom: var(--space-2); }
details.filled-fold > summary { margin: var(--space-2) 0; }
.cfield { display: grid; grid-template-columns: 260px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); align-items: start; }
.cfield:last-child { border-bottom: 0; }
.cfield .name { font-size: 14px; }
.cfield.hidden { display: none; }
.cfield input[type=text], .cfield select { width: 100%; }
@media (max-width: 1100px) {
  .cfield { grid-template-columns: 220px 1fr; }
}
.records td { padding: 4px; }
/* Out of date: the before/after tables. */
.changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; color: var(--ink); }
.changes caption { text-align: left; font-weight: 600; font-size: var(--text-sm); padding: 0 0 var(--space-1); color: var(--warn); }
/* View: the status card; the document with a contents list beside it (above it on narrow windows). */
.agreement-status .stepper { margin-bottom: var(--space-3); }
.agreement-status p { margin: var(--space-2) 0; }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.doc-contents { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; font-size: var(--text-sm); padding: var(--space-3) 0; }
.doc-contents h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 var(--space-2); }
.doc-contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-contents a { display: block; padding: 2px var(--space-2); border-radius: 6px; color: var(--ink); }
.doc-contents a:hover { background: var(--hover); text-decoration: none; }
@media (max-width: 1150px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-contents { position: static; max-height: none; }
  .doc-contents ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* --- pages: import and review --------------------------------------------------------------------------
   import_choose.html, import_working.html, review.html, _import.html (stepper + progress), _import_saved.html
   (the "what was saved" summary on a collection page), and the review fields' provenance (macro provenance). */

/* Choose */
.folder-picked { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.import-q { margin-top: var(--space-5); }
.import-go { margin-top: var(--space-5); }
.waiting-reviews .attention-action.actions { margin: 0; flex-wrap: nowrap; }

/* Progress (macro import_progress): stage + count, a bar, the list of stages, unreadable files, the problem box
   and the raw log folded under "Details". */
.import-progress { margin-top: var(--space-4); }
.progress-stage { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.import-progress progress { width: 100%; height: 10px; accent-color: var(--accent); }
.progress-stages { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0; margin: var(--space-2) 0 var(--space-3); }
.progress-stages li::before { content: "\25CB"; margin-right: 6px; }
.progress-stages li.done { color: var(--ok); }
.progress-stages li.done::before { content: "\2713"; }
.progress-stages li.current { color: var(--ink); font-weight: 600; }
.progress-stages li.current::before { content: "\25CF"; color: var(--accent); }
.import-progress .notice ul, .import-progress .flash ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.import-progress .flash p { margin: 0; }
.progress-details .log { min-height: 0; max-height: 280px; overflow: auto; margin-top: var(--space-2); }

/* Review: the "Needs your attention" box, then the form */
/* The review's six steps (review.html): labels may wrap; on a narrow window only the current step's label shows
   (the others keep their numbered dot, and their name for screen readers). */
.review-steps .step-label { white-space: normal; line-height: 1.25; }
@media (max-width: 760px) {
  .review-steps .step:not(.current) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Check & save: what saving will write, one card per step, each with "Change". */
.review-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.review-summary .card { margin: 0; }
.review-summary .facts { flex-direction: column; margin-bottom: 0; }
/* A People card's Person / Company and "Company they work at" (review.html kind_and_work). */
.card-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .card-extra { grid-template-columns: minmax(0, 1fr); } }
.review-intro { max-width: 90ch; }
.review-attention { margin: var(--space-4) 0 var(--space-5); }
.review-attention:focus { outline: none; }
.review-attention .notice.ok { margin: 0; }
.attention-intro { margin: 0 0 var(--space-2); }
.review-attention.has-errors .attention-intro:first-of-type { color: var(--err); }
.alias-choice { margin-bottom: var(--space-2); }
.review-more-title { margin-top: var(--space-6); }
details.review-fold[open] > summary { margin-bottom: var(--space-3); }
details.review-fold .card { margin: var(--space-3) 0 0; }

/* Provenance under a review value: a quiet mark (From your files / Typed by you / Empty / Needed), or the
   visible "Check: from Claude" badge. The details (file, page, quote) are hidden but still read by screen
   readers; they pop up on hover of the (i), show under the field while it (or anything in its row) has focus
   - all without JS - and all show with "Show where values came from" (.show-sources on the form, app.js).
   app.js adds .edited once a value is changed. */
.prov { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--text-xs); color: var(--muted); position: relative; }
.prov.needed { color: var(--warn); }
.prov.typed .prov-mark, .prov-edited { color: var(--accent); }
.prov-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-strong); font: italic 700 10px/1 Georgia, serif; cursor: help; }
.prov-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prov-info:hover + .prov-detail { top: calc(100% + 4px); left: 0; z-index: 20; width: max-content; max-width: 340px; height: auto; overflow: visible; clip: auto; white-space: normal; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
[data-prov-field]:focus-within .prov-detail, .show-sources .prov-detail, .prov-detail.shown { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; flex-basis: 100%; overflow-wrap: anywhere; box-shadow: none; border: 0; padding: 0; background: none; color: inherit; }
.prov.claude .prov-detail { color: var(--claude); }
.edited .prov > :not(.prov-edited):not(.prov-detail) { display: none; }
.from-claude.edited input, input.from-claude.edited { border-color: var(--line-strong); background: var(--panel); }

/* The summary shown once on a collection page after its import is saved */
.import-saved { margin-bottom: var(--space-5); }
.import-saved .stepper { margin-bottom: var(--space-4); }

/* --- pages: History & undo (history.html) ------------------------------------------------------------ */
.history-entry { border-left: 3px solid var(--line); padding: 6px 12px; margin: 10px 0; }
.history-entry.added { border-color: var(--ok); }
.history-entry.changed { border-color: var(--accent); }
.history-entry.removed { border-color: var(--err); }
/* .diff: one line per field ("Share %: 40 -> 50"): the old value a quiet grey chip, the new one a green chip
   (no strike-through: a struck "0" reads as a theta); internal fields (paths, hashes, keys) fold into
   details.technical below it. */
.diff { font-size: var(--text-sm); overflow-wrap: anywhere; }
.diff > div { margin: 2px 0; }
.diff .old, .diff .new { padding: 0 5px; border-radius: 5px; }
.diff .old { background: var(--hover); color: var(--muted); }
.diff .new { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.diff-arrow { color: var(--muted); }
.history-entry > .muted.flush { margin: 0; }
/* details.technical: a quiet "Technical details" fold for what only matters to whoever fixes things (History's
   internal fields; the error behind a file that couldn't be read - macro plain_problem). */
details.technical { margin-top: 4px; }
details.technical summary { color: var(--muted); font-size: var(--text-xs); }
details.technical .diff, details.technical code { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-xs); color: var(--muted); }
details.technical code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
details.technical .diff .old, details.technical .diff .new { background: none; font-weight: 400; color: inherit; padding: 0; }

/* --- pages: Database (data_*.html) and Settings ------------------------------------------------------- */
.data-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
table.data td, table.data th { white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
table.record th { width: 200px; text-align: left; vertical-align: top; }
pre.cell { white-space: pre-wrap; margin: 0; max-height: 320px; overflow: auto; font-size: var(--text-xs); }
textarea.sql { width: 100%; font-family: Consolas, Menlo, monospace; font-size: var(--text-sm); }
.temp-password { font-size: 1.3em; margin: 10px 0; }

/* --- forms that ask before adding someone, keep typing after a conflict, and fold what's empty ------------- */
/* "Same as <saved person>?" under a typed name (macro same_as_choice); a form shown again after someone else's
   change (macro conflict_notice); a person form's optional section (details.form-section); the collection
   page's per-person detail groups (h4.detail-group); the agreement's "Standard terms" fold; Home's search. */
.same-as { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.same-as.has-error { border-color: var(--err); }
.same-as.has-error input { background: none; }
.notice.conflict a { margin-left: var(--space-1); }
details.form-section > summary h2 { display: inline; margin: 0; font-size: var(--text-lg); }
details.form-section[open] > summary { margin-bottom: var(--space-3); }
h4.detail-group { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); color: var(--muted); font-weight: 600; }
details.standard-fold > summary { margin: var(--space-2) 0; }
.home-search { margin-bottom: var(--space-4); }

/* --- documents (split sheet, agreement) --------------------------------------------------------------- */
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 36px; overflow-wrap: anywhere; }
.doc table { margin: 10px 0; }
.doc blockquote { margin: 0 0 16px; padding: 10px 14px; background: var(--warn-bg); color: var(--warn); border-radius: 8px; }
.doc h2[id] { scroll-margin-top: var(--space-4); }
@media (max-width: 1100px) {
  .doc { padding: 20px 22px; }
}