/*
  engen review UI — styles (trimmed from demo/static/style.css).

  Aesthetic carried over: a drafting sheet for the list screens (ruled
  borders, small-caps labels, monospace for every value that came out of the
  database) and a dark instrument palette for the review workspace, where the
  white drawing is the brightest thing on screen. One accent orange used only
  for selection; red dashed for a gap; amber for a finding; a low-opacity green
  outline for a reviewed element, subdued so the drawing keeps shouting about
  what needs attention, not what is done. Restraint on purpose: this is a
  measuring instrument.

  New classes (not in the demo):
    .topbar, .topbar__*        one persistent top bar: brand, context crumbs, status chip, nav, user menu
    .usermenu                  <details> user menu (name, role, change password, sign out)
    .shell / .rail / .centre / .side   three-column workspace grid; body.mode-list hides rail + side
    .page, .page__*            list-screen page (heading + body)
    .stage, .stage__*          the drawing area: #sheet-toolbar, #sheet-canvas, legend, notice
    .chip, .chip--<status>     diagram/set/run/user status chips (uploaded, processing, in_review, approved, …)
    .mark, .mark--<kind>       inline provenance markers: gap, llm, proposed, user, ai, review, reviewed, warn, fail
    .basis, .basis--<basis>    basis + confidence text next to every bank match / doc mapping
    .fcode                     rule code chip of a processing finding; .fcode--resolved
    .gaps, .gaps__btn          derived-gap counters that double as filters; .gaps__btn--review is the unreviewed count
    .rprog, .rprog__*          "n of m reviewed · k gaps" over a thin bar, above the element list
    .sr-only                   clipped text for screen readers only (#review-live, the panel's live region)
    .erow-row, .erow__tick     one list row: the selecting button plus its sibling mark-reviewed tick
    .erow, .erow--gap, .erow--finding, .erow--reviewed, .is-selected   element list rows (three categories distinct)
    .inspector, .inspector__*  the element drawer inside the right panel
    .placement, .correction, .reference, .proposal, .diff   inspector rows
    .finding, .finding--<severity>, .finding--resolved     processing finding rows
    .run, .run--<status>       run history rows (Re-scan tab)
    .approve, .approve__progress   the approve bar at the bottom of the panel, with the review-progress sentence
    .inspector__review         the mark-reviewed line at the top of the inspector
    .ditem, .ditem--unconfirmed, .ditem--unmapped, .mapping   docs review items
    .bankpicker, .bankpicker__item   searchable picker (bank, elements, merge target)
    .drop, .progress, .progress__row   create-project drop zones and per-file progress
    .callout, .callout--<kind> info / warn / secret notices (temporary password)
    .table, .form, .field, .btn, .filters, .checks   generic controls
    svg .hotspot, .hotspot--gap, .hotspot--finding, .hotspot--reviewed, .hotspot--selected, .overlay-badge, .terminal-marker   overlay on the sheet
*/

:root {
  --ink:        #16171a;
  --ink-2:      #3d4148;
  --ink-3:      #6c7079;
  --ink-4:      #9aa0a8;
  --vellum:     #f4f2ec;
  --paper:      #fbfaf7;
  --rule:       #d6d2c6;
  --rule-soft:  #e6e3d9;
  --accent:     #b4530a;
  --accent-dim: #f0e0d0;

  --sev-critical: #a11d1d;
  --sev-major:    #b4740a;
  --sev-minor:    #6c7079;
  --sev-info:     #4a6b8a;

  --gap:      #c8323a;   /* red: drawn, not identified */
  --finding:  #c98a12;   /* amber: matched, something disagrees */
  --llm:      #5b3ea8;   /* violet: a proposal from the model */
  --ok:       #2e7d4f;

  --font-sans: "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;
  --tight: 0.72rem;

  /* workspace (dark) */
  --ws-bg: #0f1012;
  --ws-bg-2: #15171a;
  --ws-bg-3: #1c1f23;
  --ws-line: #2a2e34;
  --ws-orange: #ff6a00;
  --ws-orange-dim: rgb(255 106 0 / 0.14);
  --ws-slate: #8996a9;
  --ws-text: #f2f2f0;
  --ws-red: #e5484d;
  --ws-amber: #f5a623;
  --ws-green: #3fb950;
  --ws-violet: #a78bfa;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--vellum);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
code { font-family: var(--font-mono); font-size: 0.9em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }
/* For a live region only a screen reader reads: clipped rather than hidden, because display:none and
   visibility:hidden take the node out of the accessibility tree and silence it. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.link { font: inherit; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------- top bar ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 52px;
  padding: 0 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topbar__brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.topbar__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  color: #fff; background: var(--accent); text-decoration: none; font-weight: 700; font-size: 12px;
}
.topbar__name { font-weight: 600; letter-spacing: 0.02em; }
.topbar__context { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; padding-left: 0.8rem; border-left: 1px solid var(--rule); font-size: var(--tight); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__context a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.topbar__context a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.topbar__sep { color: var(--ink-4); }
.topbar__current { color: var(--ink); background: var(--accent-dim); padding: 0.1rem 0.4rem; border-radius: 2px; }
.topbar__middle { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.topbar__nav { display: flex; gap: 0.2rem; }
.topbar__nav a { padding: 0.3rem 0.6rem; border-radius: 3px; color: var(--ink-2); text-decoration: none; font-size: 0.85rem; }
.topbar__nav a:hover { background: var(--accent-dim); }
.topbar__nav a.active { color: var(--accent); font-weight: 600; }

.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 3px; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--accent-dim); }
.usermenu__avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #7a3505); color: #fff; font-size: 10px; font-weight: 700; }
.usermenu__name { font-size: 0.85rem; }
.usermenu__role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); padding: 0.05rem 0.3rem; border-radius: 2px; }
.usermenu__pop { position: absolute; right: 0; top: 110%; z-index: 30; min-width: 14rem; display: grid; gap: 0.3rem; padding: 0.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 6px 22px rgb(0 0 0 / 0.16); }
.usermenu__email { font-family: var(--font-mono); font-size: var(--tight); color: var(--ink-3); }
.usermenu__pop a, .usermenu__pop button { font: inherit; font-size: 0.85rem; text-align: left; color: var(--ink); background: none; border: none; padding: 0.25rem 0; cursor: pointer; text-decoration: none; }
.usermenu__pop a:hover, .usermenu__pop button:hover { color: var(--accent); }

.fixture-flag {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.1rem 0.4rem; border: 1px dashed var(--accent); border-radius: 2px; color: var(--accent);
}

/* ---------- chips and marks ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.chip--uploaded::before, .chip--queued::before { background: var(--ink-4); }
.chip--processing::before, .chip--running::before { background: var(--finding); }
.chip--in_review::before { background: var(--accent); }
.chip--approved::before, .chip--succeeded::before, .chip--processed::before, .chip--active::before { background: var(--ok); }
.chip--failed::before, .chip--disabled::before, .chip--cancelled::before, .chip--rejected::before { background: var(--gap); }
.chip--proposed::before { background: var(--llm); }
.chip--empty::before { background: transparent; border: 1px dashed var(--ink-4); }
.chip--inline { margin-left: 0.3rem; }

.mark {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.35rem; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; border: 1px solid var(--rule); color: var(--ink-3);
}
.mark--gap { color: var(--gap); border-color: var(--gap); border-style: dashed; font-style: italic; }
.mark--llm { color: var(--llm); border-color: var(--llm); }
.mark--proposed { color: var(--llm); border-color: var(--llm); border-style: dashed; }
.mark--user { color: var(--ok); border-color: var(--ok); }
.mark--ai { color: var(--ink-3); border-style: dotted; }
.mark--review, .mark--warn { color: var(--finding); border-color: var(--finding); }
/* Reviewed carries the tick and the word: the colour is the third cue, never the only one (WCAG 1.4.1). */
.mark--reviewed { color: var(--ok); border-color: var(--ok); }
.mark--fail { color: var(--gap); border-color: var(--gap); }

.basis { font-size: var(--tight); color: var(--ink-3); }
.basis--llm_proposed { color: var(--llm); }
.basis--user, .basis--explicit_in_text { color: var(--ink-2); }
.basis--fallback_now { color: var(--finding); }

.who { font-weight: 600; }
.who--system { font-style: italic; font-weight: 400; color: var(--ink-3); }

.sev {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.05rem 0.3rem; border-radius: 2px; color: #fff; white-space: nowrap;
}
.sev--critical { background: var(--sev-critical); }
.sev--major { background: var(--sev-major); }
.sev--minor { background: var(--sev-minor); }
.sev--info { background: var(--sev-info); }

.fcode {
  display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.35rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
}
.fcode--resolved { text-decoration: line-through; color: var(--ink-4); }

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

.shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.centre { min-width: 0; min-height: 0; overflow: auto; }
.rail, .side { min-height: 0; overflow: auto; }

/* ---------- list screens ---------- */

.page { max-width: 1120px; margin: 0 auto; padding: 1.1rem 1.2rem 3rem; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.page__head h1 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.page__head-right { display: flex; gap: 0.5rem; align-items: center; }
.page__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }

.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.55rem 1rem; border-bottom: 1px solid var(--rule); }
.panel__head h2 { margin: 0; font-size: var(--tight); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.panel__head-right { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.panel__body { padding: 0; }

.row {
  display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: none;
  border-bottom: 1px solid var(--rule-soft); padding: 0.55rem 1rem; text-decoration: none;
}
a.row { cursor: pointer; }
.row:last-child { border-bottom: none; }
a.row:hover { background: var(--accent-dim); }
.row--nested { padding-left: 2.2rem; background: color-mix(in srgb, var(--vellum) 60%, transparent); }
.row--tools { padding-left: 2.2rem; grid-template-columns: 1fr; }
.row--empty { grid-template-columns: 1fr; color: var(--ink-3); font-style: italic; }
.row--static { cursor: default; }
.row--pending { border-left: 3px solid var(--llm); }
.row__id { font-family: var(--font-mono); font-size: var(--tight); color: var(--ink-3); }
.row__name { font-size: 0.92rem; min-width: 0; }
.row__sub { display: block; font-size: var(--tight); color: var(--ink-3); }
.row__note { font-family: var(--font-mono); font-size: var(--tight); color: var(--ink-3); text-align: right; white-space: nowrap; }
.row--log .row__id { white-space: nowrap; }
.log__action { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.log__link { font-size: var(--tight); }
.bank__name { font-weight: 600; }
.bank__class { font-family: var(--font-mono); font-size: var(--tight); color: var(--ink-3); }

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th { text-align: left; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 0.5rem 1rem; border-bottom: 1px solid var(--rule); }
.table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.table tr.is-disabled td { color: var(--ink-4); }
.table__actions { white-space: nowrap; text-align: right; }
.table__actions .btn { margin-left: 0.3rem; }
.table__extra td { background: var(--vellum); }

.btn {
  display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: none;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 0.35rem 0.7rem;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn--primary:hover:not(:disabled) { color: #fff; background: #8f4208; }
.btn--danger:hover:not(:disabled) { color: var(--gap); border-color: var(--gap); }
.btn--small { font-size: 0.74rem; padding: 0.22rem 0.5rem; }
.btn--tiny { font-size: 0.66rem; padding: 0.1rem 0.4rem; }

.form { display: grid; gap: 0.8rem; padding: 1rem; }
.form--narrow { max-width: 26rem; }
.form--inline { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.form__actions { display: flex; gap: 0.6rem; align-items: center; }
.field { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.field__label { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.field__hint { font-size: var(--tight); color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 0.4rem 0.55rem; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; }
.inline-form input, .inline-form select { width: auto; font-size: 0.8rem; padding: 0.25rem 0.45rem; }
.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; padding: 0.7rem 1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
.filters .field { min-width: 12rem; }
.picker { display: grid; gap: 0.25rem; max-height: 12rem; overflow: auto; padding: 0.4rem 0.6rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
.picker__item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
.checks { display: grid; gap: 0.3rem; margin: 0.6rem 0; }
.checks__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }

.callout { padding: 0.7rem 1rem; border: 1px solid var(--rule); border-left-width: 3px; border-radius: 3px; background: var(--paper); font-size: 0.88rem; }
.callout--warn { border-left-color: var(--finding); }
.callout--info { border-left-color: var(--sev-info); }
.callout--secret { border-left-color: var(--accent); margin: 0 1rem 1rem; }
.secret { display: flex; gap: 0.6rem; align-items: center; margin: 0.4rem 0; }
.secret__value { font-size: 1rem; padding: 0.3rem 0.6rem; background: var(--vellum); border: 1px dashed var(--accent); border-radius: 3px; user-select: all; }

.drop { border: 1px dashed var(--rule); border-radius: 3px; padding: 0.8rem 1rem; background: var(--vellum); display: grid; gap: 0.4rem; }
.drop.is-over { border-color: var(--accent); background: var(--accent-dim); }
.drop__title { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.drop__hint { font-size: var(--tight); color: var(--ink-3); }
.drop__actions { font-size: var(--tight); color: var(--ink-3); display: flex; align-items: center; gap: 0.5rem; }
.drop__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.85rem; }
.drop__list li { display: flex; gap: 0.4rem; align-items: center; }

.progress { display: grid; gap: 0.3rem; padding: 0 1rem 1rem; }
.progress:empty { display: none; }
.progress__row { display: grid; grid-template-columns: minmax(0, 1fr) 10rem minmax(0, 1fr); gap: 0.8rem; align-items: center; font-size: 0.82rem; padding: 0.3rem 0; border-bottom: 1px solid var(--rule-soft); }
.progress__row.is-active .progress__label { color: var(--accent); }
.progress__row.is-done .progress__status { color: var(--ok); }
.progress__row.is-failed .progress__status { color: var(--gap); }
.progress__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress__bar { display: block; height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.progress__fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s ease; }
.progress__status { font-family: var(--font-mono); font-size: var(--tight); color: var(--ink-3); }
.progress__done { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.6rem; }

.docmeta { font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }

.bankpicker { margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--accent); border-radius: 3px; background: var(--paper); display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--ink); }
.bankpicker__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.bankpicker__results { display: grid; gap: 0.15rem; max-height: 14rem; overflow: auto; }
.bankpicker__item { font: inherit; font-size: 0.82rem; text-align: left; color: var(--ink); background: none; border: none; border-bottom: 1px solid var(--rule-soft); padding: 0.3rem 0.2rem; cursor: pointer; }
.bankpicker__item:hover { background: var(--accent-dim); }

/* ---------- workspace ---------- */

body.mode-workspace { background: var(--ws-bg); background-image: none; color: var(--ws-text); }
body.mode-workspace .topbar { background: var(--ws-bg-2); border-color: var(--ws-line); color: var(--ws-text); }
body.mode-workspace .topbar__context a, body.mode-workspace .topbar__nav a { color: var(--ws-slate); }
body.mode-workspace .topbar__current { color: var(--ws-text); background: var(--ws-orange-dim); }
body.mode-workspace .topbar__context { border-color: var(--ws-line); }
body.mode-workspace .usermenu summary:hover, body.mode-workspace .topbar__nav a:hover { background: var(--ws-bg-3); }
body.mode-workspace .usermenu__pop { background: var(--ws-bg-2); border-color: var(--ws-line); }
body.mode-workspace .usermenu__pop a, body.mode-workspace .usermenu__pop button { color: var(--ws-text); }
body.mode-workspace .usermenu__role { color: var(--ws-slate); border-color: var(--ws-line); }
body.mode-workspace .chip { background: var(--ws-bg-3); border-color: var(--ws-line); color: var(--ws-slate); }
body.mode-workspace .fcode { background: var(--ws-bg-3); border-color: var(--ws-line); color: var(--ws-text); }
body.mode-workspace .muted { color: var(--ws-slate); }
body.mode-workspace .btn { background: var(--ws-bg-3); border-color: var(--ws-line); color: var(--ws-text); }
body.mode-workspace .btn--primary { background: var(--ws-orange); border-color: var(--ws-orange); color: #0a0a0a; }
body.mode-workspace .btn--primary:hover:not(:disabled) { background: #e05f00; color: #0a0a0a; }
body.mode-workspace input, body.mode-workspace select, body.mode-workspace textarea { background: var(--ws-bg-3); color: var(--ws-text); border-color: var(--ws-line); }
body.mode-workspace .bankpicker { background: var(--ws-bg-2); color: var(--ws-text); border-color: var(--ws-orange); }
body.mode-workspace .bankpicker__item { color: var(--ws-text); border-color: var(--ws-line); }
body.mode-workspace .bankpicker__item:hover { background: var(--ws-orange-dim); }
body.mode-workspace .callout { background: var(--ws-bg-3); border-color: var(--ws-line); color: var(--ws-text); }
body.mode-workspace .callout--info { border-left-color: var(--ws-slate); }
body.mode-workspace .row { color: var(--ws-text); border-color: var(--ws-line); }
body.mode-workspace a.row:hover { background: var(--ws-bg-3); }
body.mode-workspace .row__sub, body.mode-workspace .row__id, body.mode-workspace .row__note { color: var(--ws-slate); }
body.mode-workspace .field__label { color: var(--ws-slate); }
body.mode-workspace .field__hint { color: var(--ws-slate); }
body.mode-workspace .mark { border-color: var(--ws-line); color: var(--ws-slate); }
body.mode-workspace .mark--gap { color: var(--ws-red); border-color: var(--ws-red); }
body.mode-workspace .mark--llm, body.mode-workspace .mark--proposed { color: var(--ws-violet); border-color: var(--ws-violet); }
body.mode-workspace .mark--user { color: var(--ws-green); border-color: var(--ws-green); }
body.mode-workspace .mark--review, body.mode-workspace .mark--warn { color: var(--ws-amber); border-color: var(--ws-amber); }
body.mode-workspace .mark--reviewed { color: var(--ws-green); border-color: var(--ws-green); }
body.mode-workspace .mark--fail { color: var(--ws-red); border-color: var(--ws-red); }
body.mode-workspace .basis { color: var(--ws-slate); }
body.mode-workspace .basis--llm_proposed { color: var(--ws-violet); }
body.mode-workspace .basis--user, body.mode-workspace .basis--explicit_in_text { color: var(--ws-text); }
body.mode-workspace .basis--fallback_now { color: var(--ws-amber); }
body.mode-workspace .link { color: var(--ws-orange); }
body.mode-workspace .tip { background: var(--ws-bg-2); border-color: var(--ws-line); color: var(--ws-text); }
body.mode-workspace .tip__grid dt { color: var(--ws-slate); }

.rail { width: 250px; padding: 0.6rem 0; border-right: 1px solid var(--ws-line); background: var(--ws-bg-2); font-size: 0.82rem; }
.rail__section { padding: 0.5rem 0.9rem 0.25rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ws-slate); }
.rail__diagram { padding: 0.3rem 0.9rem 0.5rem; display: grid; gap: 0.25rem; }
.rail__diagram-name { display: flex; align-items: center; gap: 0.4rem; color: var(--ws-text); text-decoration: none; overflow: hidden; }
.rail__diagram-name .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.rail__diagram-name:hover { color: var(--ws-orange); }
.rail__sheets { display: grid; gap: 0.15rem; padding: 0.15rem 0.9rem; }
.rail__sheet { display: flex; justify-content: space-between; align-items: center; font: inherit; font-size: 0.8rem; color: var(--ws-text); background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 0.3rem 0.5rem; cursor: pointer; text-align: left; }
.rail__sheet:hover { border-color: var(--ws-line); }
.rail__sheet.is-active { color: var(--ws-orange); border-color: rgb(255 106 0 / 0.4); background: var(--ws-orange-dim); }
.rail__sheet-no { font-family: var(--font-mono); }
.rail__sheet-count { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ws-slate); }
.rail__note { display: block; padding: 0.2rem 0.9rem; font-size: 0.7rem; color: var(--ws-slate); }
.rail__link { display: block; padding: 0.6rem 0.9rem; font-size: 0.78rem; color: var(--ws-orange); }
.rail .mark { margin-left: 0; }

.stage { height: 100%; display: flex; flex-direction: column; min-height: 0; background: #141414; }
.stage__toolbar { flex: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; border-bottom: 1px solid var(--ws-line); background: var(--ws-bg-2); font-size: 11px; color: var(--ws-slate); }
.sheet-toolbar__identity { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.sheet-toolbar__designation { color: var(--ws-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-toolbar__status { white-space: nowrap; }
.sheet-toolbar__controls { display: flex; gap: 6px; align-items: center; }
.sheet-toolbar__controls button { padding: 3px 9px; color: var(--ws-slate); border: 1px solid var(--ws-line); border-radius: 5px; background: var(--ws-bg-3); font: inherit; font-size: 11px; cursor: pointer; }
.sheet-toolbar__controls button:hover:not(:disabled) { color: var(--ws-text); }
.sheet-toolbar__controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.sheet-toolbar__zoom { font-family: var(--font-mono); min-width: 3.2em; text-align: right; }
.stage__body { position: relative; flex: 1; min-height: 0; }
.stage__canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.stage__canvas > svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 10px 40px rgb(0 0 0 / 0.6); cursor: grab; }
.stage__canvas > svg:active { cursor: grabbing; }
.stage__empty { color: var(--ws-slate); font-size: 0.85rem; max-width: 40ch; text-align: center; }
.stage__legend { position: absolute; left: 16px; bottom: 16px; z-index: 5; padding: 8px 12px; border: 1px solid var(--ws-line); border-radius: 6px; background: rgb(21 23 26 / 0.94); font-size: 11px; color: var(--ws-slate); display: grid; gap: 4px; }
.stage__legend-row { display: flex; align-items: center; gap: 8px; }
.stage__dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.stage__dot--selected { background: var(--ws-orange); }
.stage__dot--gap { border: 1.5px dashed var(--ws-red); }
.stage__dot--finding { border: 1.5px dashed var(--ws-amber); }
.stage__notice { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 0.4rem 0.8rem; border: 1px solid var(--ws-line); border-radius: 4px; background: var(--ws-bg-2); font-size: 0.78rem; color: var(--ws-slate); }

/* overlay on the sheet */
svg .hotspot { fill: transparent; stroke: none; cursor: pointer; }
svg .hotspot--gap { stroke: var(--ws-red); stroke-width: 1.6; stroke-dasharray: 6 4; fill: rgb(229 72 77 / 0.08); }
svg .hotspot--finding { stroke: var(--ws-amber); stroke-width: 1.4; stroke-dasharray: 6 4; fill: rgb(245 166 35 / 0.08); }
/* Reviewed: subdued on purpose — the list chip already says "reviewed" in text,
   so this outline only needs to be findable, not loud, next to gap/finding. */
svg .hotspot--reviewed { stroke: rgb(63 185 80 / 0.35); stroke-width: 1; stroke-dasharray: none; fill: none; }
/* A device's terminals (D-88): findable, never loud, never clickable (the layer beneath the hotspots). */
svg .terminal-marker { fill: none; stroke: rgb(120 130 150 / 0.55); stroke-width: 0.8; stroke-dasharray: 2 2; }
svg .hotspot:hover { fill: rgb(255 106 0 / 0.12); }
svg .hotspot--selected { stroke: var(--ws-orange); stroke-width: 2.4; stroke-dasharray: none; fill: rgb(255 106 0 / 0.18); }
/* Manual mapping (sheet-view.js modes). While picking, hotspots let clicks through to the
   drawing; the presentation attribute pointer-events="all" loses to this rule. */
.sheet-canvas--picking svg .hotspot { pointer-events: none; }
.sheet-canvas--picking svg, .sheet-canvas--drawing svg { cursor: crosshair; }
svg .pick-outline { fill: rgb(255 106 0 / 0.10); stroke: var(--ws-orange); stroke-width: 1.6; }
svg .draft-rect { fill: rgb(255 106 0 / 0.08); stroke: var(--ws-orange); stroke-width: 1.6; stroke-dasharray: 5 3; }
.sheet-toolbar__mode[aria-pressed="true"] { background: var(--ws-orange); color: var(--ws-bg); }
svg .overlay-badge__dot { fill: var(--ws-orange); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
svg .overlay-badge__text { fill: #fff; font-family: Arial, sans-serif; font-weight: 700; }

.side { width: clamp(360px, 30vw, 470px); border-left: 1px solid var(--ws-line); background: var(--ws-bg-2); display: flex; flex-direction: column; }
#sheet-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
#sheet-panel:empty { display: none; }
.tabs { display: flex; flex: none; border-bottom: 1px solid var(--ws-line); }
.tab { flex: 1; padding: 11px 0; color: var(--ws-slate); border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.tab.active { color: var(--ws-text); border-color: var(--ws-orange); }
.tab .count { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 10px; background: var(--ws-bg-3); font-size: 10px; }
.pane { flex: 1; min-height: 0; overflow-y: auto; }
.panel-section { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 12px 14px 6px; color: var(--ws-slate); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.panel-pad { padding: 8px 14px; display: grid; gap: 0.5rem; }
.toolbar-row { display: flex; gap: 8px; padding: 10px 14px 4px; }
.toolbar-row .search { flex: 1; }
.toolbar-row select { width: auto; font-size: 11px; padding: 0.3rem; }
.search input { font-size: 12px; padding: 7px 10px; }

.gaps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 0; font-size: 11px; }
.gaps__label { font-style: italic; color: var(--ws-slate); font-family: var(--font-mono); font-size: 10px; }
.gaps__btn { font: inherit; font-size: 11px; color: var(--ws-red); background: transparent; border: 1px dashed rgb(229 72 77 / 0.6); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.gaps__btn strong { font-family: var(--font-mono); }
.gaps__btn.is-active { background: rgb(229 72 77 / 0.15); border-style: solid; }
/* Not a gap but a person's own progress: solid slate, so the three red dashed counters stay apart. */
.gaps__btn--review { color: var(--ws-slate); border: 1px solid var(--ws-line); }
.gaps__btn--review.is-active { color: var(--ws-text); background: var(--ws-bg-3); }

.rprog { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0; }
.rprog__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--ws-bg-3); overflow: hidden; }
.rprog__fill { display: block; height: 100%; background: var(--ws-green); }
.rprog__text { font-size: 10.5px; color: var(--ws-slate); font-family: var(--font-mono); white-space: nowrap; }

.elist { display: flex; flex-direction: column; }
.elist__group { padding: 8px 14px 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ws-slate); border-top: 1px solid var(--ws-line); }
/* The tick is a sibling of the row button, not a child (no button inside a button), so the row is a
   two-part flex line and the rule below it belongs to the wrapper. */
.erow-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--ws-line); }
.erow-row:hover { background: var(--ws-bg-3); }
.erow__tick { flex: none; width: 34px; font: inherit; font-size: 13px; line-height: 1; color: var(--ws-slate); background: transparent; border: 0; border-left: 1px solid var(--ws-line); cursor: pointer; }
.erow__tick:hover { color: var(--ws-green); background: rgb(63 185 80 / 0.1); }
.erow__tick.is-on { color: var(--ws-green); }
.erow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; flex: 1; min-width: 0; padding: 9px 14px; color: var(--ws-text); border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.erow.is-selected { background: var(--ws-orange-dim); box-shadow: inset 2px 0 0 var(--ws-orange); }
.erow__swatch { width: 8px; height: 8px; margin-top: 5px; border-radius: 2px; background: rgb(137 150 169 / 0.4); }
.erow--gap .erow__swatch { background: transparent; border: 1.5px dashed var(--ws-red); }
.erow--finding:not(.erow--gap) .erow__swatch { background: transparent; border: 1.5px dashed var(--ws-amber); }
.erow--reviewed:not(.erow--gap):not(.erow--finding) .erow__swatch { background: var(--ws-green); }
.erow.is-selected .erow__swatch { background: var(--ws-orange); border: none; }
.erow__main { display: grid; gap: 2px; min-width: 0; }
.erow__tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.erow__class { font-weight: 400; color: var(--ws-slate); font-size: 11px; }
.erow__diagram { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-slate); }
.erow__type { font-weight: 400; color: var(--ws-slate); font-size: 11px; }
.erow__bank { font-size: 10.5px; color: var(--ws-slate); }
.erow__bank--gap { color: var(--ws-red); font-style: italic; }
.erow__bank--llm { color: var(--ws-violet); }
.erow__gaps { font-family: var(--font-mono); font-size: 10px; font-style: italic; color: var(--ws-red); }
.erow__meta { display: grid; gap: 3px; justify-items: end; font-size: 10px; color: var(--ws-slate); }
.erow__findings { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.erow .mark { margin-left: 0; justify-self: start; }

.inspector { position: absolute; inset: 42px 0 0 0; z-index: 8; overflow-y: auto; background: var(--ws-bg-2); border-top: 2px solid var(--ws-orange); padding: 10px 14px 24px; font-size: 12px; }
.inspector__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.inspector__tag { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.inspector__class { color: var(--ws-slate); }
.inspector__sub { font-size: 10px; color: var(--ws-slate); margin: 2px 0 8px; }
.inspector__block { padding: 8px 0; border-top: 1px solid var(--ws-line); display: grid; gap: 4px; }
.inspector__block--gap { border-left: 2px dashed var(--ws-red); padding-left: 8px; }
.inspector__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-slate); }
.inspector__review { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 11px; color: var(--ws-slate); }
.inspector__review .mark { margin-left: 0; }
.inspector__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inspector__actions .inspector__label { width: 100%; }
.inspector .callout { padding: 0.4rem 0.6rem; font-size: 11px; }
/* Change-log rows inside the drawer: one column, small, no left id gutter. */
.inspector .row--log { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.35rem 0; font-size: 11px; }
.inspector .row--log .row__id { font-size: 10px; }
.inspector .row--log .row__note { text-align: left; white-space: normal; font-size: 10px; }
.placement { font: inherit; font-size: 11px; text-align: left; color: var(--ws-text); background: transparent; border: 1px solid var(--ws-line); border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.placement:hover { border-color: var(--ws-orange); }
.placement__badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ws-orange); color: #0a0a0a; font-size: 10px; font-weight: 700; }
.diff { font-size: 11px; }
.correction { font-size: 11px; padding: 3px 0; }
.correction--retracted { text-decoration: line-through; color: var(--ws-slate); }
.proposal { font-size: 11px; padding: 4px 6px; border: 1px dashed var(--ws-violet); border-radius: 4px; color: var(--ws-text); }
.reference { padding: 5px 0; border-bottom: 1px dotted var(--ws-line); font-size: 11px; }
.reference--unconfirmed { border-left: 2px dashed var(--ws-amber); padding-left: 6px; }
.reference__date { font-family: var(--font-mono); font-size: 10px; color: var(--ws-slate); }
.reference__text { margin: 2px 0; }
.reference__meta { font-size: 10px; color: var(--ws-slate); }

.findings__subheading { padding: 8px 14px 4px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-slate); border-top: 1px solid var(--ws-line); }
/* The two categories on this tab must not read as one list: a processing
   finding is a rule that fired (amber rule), a derived gap is the engine
   noticing absent data (dashed rule, italic). */
.findings__subheading--finding { border-top-color: var(--finding); color: var(--ws-text); }
.findings__subheading--derived { font-style: italic; font-weight: 500; border-top-style: dashed; }
.finding { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; align-items: baseline; padding: 8px 14px; border-bottom: 1px solid var(--ws-line); font-size: 11.5px; }
.finding__msg { grid-column: 1 / -1; }
.finding__targets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; }
.finding--resolved { opacity: 0.6; }
.finding .mark { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
.inspector .finding { padding: 4px 0; border: none; }

.run { padding: 8px 14px; border-bottom: 1px solid var(--ws-line); font-size: 11px; display: grid; gap: 3px; }
.run--failed { border-left: 2px solid var(--ws-red); }
.run--running, .run--queued { border-left: 2px solid var(--ws-amber); }
.run__instructions { color: var(--ws-text); }
.run__stats { color: var(--ws-slate); font-size: 10px; }
.runs .elist__group { border-top: none; }

.approve { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ws-line); background: var(--ws-bg-3); font-size: 11px; color: var(--ws-slate); }
.approve__note { min-width: 0; }
.approve .mark { display: block; margin: 2px 0 0; }
.approve__progress { display: block; margin-top: 2px; }
.approve__progress--open { color: var(--ws-amber); }
/* Armed by the soft gate: unfinished work costs one deliberate extra click, not a second dialog. */
.approve .btn.is-armed { background: var(--ws-amber); border-color: var(--ws-amber); color: #0a0a0a; }

/* ---------- docs review (list mode) ---------- */

.ditem { padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule-soft); display: grid; gap: 0.35rem; font-size: 0.88rem; }
.ditem--unmapped { border-left: 3px dashed var(--gap); }
.ditem--unconfirmed { border-left: 3px solid var(--finding); }
.ditem--unconfirmed.ditem--unmapped { border-left: 3px double var(--gap); }
.ditem__head { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.ditem__date { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ditem__text { line-height: 1.5; }
.ditem__mappings { display: grid; gap: 0.2rem; font-size: var(--tight); }
.mapping { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ditem__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ditem .proposal { border-color: var(--llm); color: var(--ink); font-size: var(--tight); }
.ditem .mark { margin-left: 0; }

/* ---------- hover tip ---------- */

.tip { position: fixed; z-index: 40; max-width: 22rem; background: var(--paper); border: 1px solid var(--ink-3); border-radius: 3px; box-shadow: 0 6px 22px rgb(0 0 0 / 0.16); font-size: var(--tight); pointer-events: none; overflow: hidden; }
.tip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); }
.tip__tag { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; }
.tip__badge { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.35rem; border-radius: 2px; color: #fff; background: var(--ink-3); }
.tip__badge--gap { background: var(--gap); }
.tip__grid { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; margin: 0; padding: 0.45rem 0.6rem; }
.tip__grid dt { color: var(--ink-3); }
.tip__grid dd { margin: 0; font-family: var(--font-mono); word-break: break-word; }
.tip__note { padding: 0.35rem 0.6rem; border-top: 1px solid var(--rule-soft); font-style: italic; color: var(--ink-2); }
.inspector .tip__grid { padding: 0; }

/* ---------- banner ---------- */

.banner { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 0.8rem; max-width: min(46rem, 92vw); padding: 0.6rem 0.9rem; background: var(--paper); color: var(--ink); border: 1px solid var(--sev-critical); border-left-width: 3px; border-radius: 3px; font-size: var(--tight); box-shadow: 0 6px 22px rgb(0 0 0 / 0.16); }
.banner--info { border-color: var(--ok); }
.banner__msg { font-family: var(--font-mono); }
.banner button { font: inherit; font-family: var(--font-mono); color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0.2rem 0.6rem; cursor: pointer; white-space: nowrap; }
.banner button:hover { border-color: var(--accent); background: var(--accent-dim); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .rail { width: 200px; }
  .side { width: 340px; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 55vh) minmax(320px, 1fr); overflow: auto; }
  .rail, .side { width: auto; border: 0; }
  .side { border-top: 1px solid var(--ws-line); }
  .topbar__nav, .usermenu__name { display: none; }
  .row { grid-template-columns: 5rem 1fr; }
  .row__note { grid-column: 2; text-align: left; white-space: normal; }
  .stage__legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* Manual mapping in the inspector (review.js). */
.attr-table { display: grid; gap: 0.3rem; }
.attr-row { display: grid; grid-template-columns: minmax(5rem, auto) auto 1fr auto auto; gap: 0.35rem; align-items: center; }
.attr-row--new { grid-template-columns: 7rem 1fr auto; margin-top: 0.4rem; }
.attr-row.attr-row--new .field__hint { grid-column: 1 / -1; color: var(--ws-red); }
.attr-row input { min-width: 0; }
.placement-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.learn-offer .form__actions { margin-top: 0.4rem; }

.inspector__runnerup { margin: 0 0 8px; font-size: 11px; color: var(--ws-slate); border-left: 2px dotted var(--ws-orange); padding-left: 8px; font-style: italic; }
.mark--uncertain { border: 1px dashed var(--ws-orange); padding: 0 4px; font-style: normal; }
.rating-row { display: flex; justify-content: space-between; gap: 8px; }
.symbol__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.symbol__he { color: var(--ws-slate); }
.symbol__function { font-size: 12px; margin: 2px 0; }
.symbol__evidence { font-size: 11px; }
.rating-row__name { color: var(--ws-slate); }

/* ======================================================================
   Documents and the diagram (docs/design/2026-10-02-document-affiliation.md).
   .kind, .mention*, .lens, .hotspot--doc, .doc-badge are used from step 2 on.
   ====================================================================== */


:root {
  --doc: #2f6f9f;      /* a link between a document and the drawing (list screens) */
  --ws-doc: #58a6ff;   /* the same, in the dark workspace */
}

/* ---------- kind chip ---------- */
.kind {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.05rem 0.35rem; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); background: var(--vellum); white-space: nowrap;
}
body.mode-workspace .kind { background: var(--ws-bg-3); border-color: var(--ws-line); color: var(--ws-text); }

/* ---------- mention highlight ---------- */
.mention { background: color-mix(in srgb, var(--doc) 14%, transparent); border-bottom: 2px solid var(--doc); padding: 0 0.12em; font-family: var(--font-mono); font-size: 0.92em; }
.mention--open { border-bottom-style: dashed; border-bottom-color: var(--gap); background: color-mix(in srgb, var(--gap) 10%, transparent); }
.mention--llm { border-bottom-style: dotted; border-bottom-color: var(--llm); background: color-mix(in srgb, var(--llm) 10%, transparent); font-family: inherit; font-size: inherit; }
.scan-note { font-style: italic; opacity: 0.75; }
body.mode-workspace .mention { background: rgb(88 166 255 / 0.16); border-bottom-color: var(--ws-doc); }
body.mode-workspace .mention--llm { background: rgb(167 139 250 / 0.16); border-bottom-color: var(--ws-violet); }

/* ---------- project documents (library) ---------- */
.page--wide { max-width: 1240px; }
.doclib td { vertical-align: top; }
.doclib__name { font-size: 0.92rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.doclib__name:hover { color: var(--accent); }
.doclib__sub { display: block; font-size: var(--tight); color: var(--ink-3); margin-top: 0.1rem; }
.doclib__num { font-family: var(--font-mono); font-size: var(--tight); white-space: nowrap; }
.doclib__err { display: block; font-size: var(--tight); color: var(--gap); margin-top: 0.1rem; }
.attn { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.attn .mark { margin-left: 0; white-space: nowrap; }
.doclib th:nth-child(2) { width: 36%; }
.doclib th:nth-child(6) { width: 15%; }
.attn__ok { font-size: var(--tight); color: var(--ok); }
.uploadbar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; padding: 0.7rem 1rem; border: 1px dashed var(--rule); border-radius: 3px; background: var(--vellum); font-size: 0.85rem; }
.uploadbar select { width: auto; font-size: 0.8rem; padding: 0.25rem 0.45rem; }
.summary { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: 0.85rem; color: var(--ink-2); }
.summary strong { font-family: var(--font-mono); }

/* ---------- document page ---------- */
.docgrid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
.doclinks { position: sticky; top: 0.6rem; display: grid; gap: 1rem; }
.dlink { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.85rem; text-decoration: none; color: var(--ink); }
.dlink:last-child { border-bottom: none; }
a.dlink:hover { background: var(--accent-dim); }
.dlink__tag { font-family: var(--font-mono); font-weight: 600; }
.dlink__go { font-family: var(--font-mono); font-size: var(--tight); color: var(--accent); white-space: nowrap; }
.dlink__sub { grid-column: 1 / -1; font-size: var(--tight); color: var(--ink-3); }
.dlink--open { border-left: 3px dashed var(--gap); }
.dlink__actions { grid-column: 1 / -1; display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; }
.mapping a { font-family: var(--font-mono); }
.mapping__where { color: var(--ink-3); }
.ditem__text[dir="rtl"], .tl__text[dir="rtl"], .reference__text[dir="rtl"] { text-align: right; }

/* ---------- hover card: the element's documents ---------- */
.tip--timeline { max-width: 27rem; width: 27rem; }
.tip__section { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0.6rem 0.2rem; border-top: 1px solid var(--rule-soft); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tip__foot { padding: 0.35rem 0.6rem; border-top: 1px solid var(--rule-soft); font-size: 10px; color: var(--ink-3); }
.tl { list-style: none; margin: 0; padding: 0.15rem 0.6rem 0.5rem; display: grid; gap: 0.45rem; }
.tl__more { font-style: italic; color: var(--ink-3); font-size: 10.5px; }
.tl__entry { display: grid; gap: 0.12rem; padding-left: 0.55rem; border-left: 2px solid var(--rule); }
.tl__entry--review { border-left: 2px dotted var(--llm); }
.tl__entry--unconfirmed { border-left: 2px dashed var(--finding); }
.tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.tl__meta .mark { margin-left: 0; font-size: 9.5px; }
.tl__date { color: var(--ink); font-weight: 600; }
.tl__text { font-size: 11.5px; line-height: 1.4; }
.tl__year { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 0.2rem; }
body.mode-workspace .tip__section, body.mode-workspace .tip__foot { border-color: var(--ws-line); color: var(--ws-slate); }
body.mode-workspace .tip__head { border-color: var(--ws-line); }
body.mode-workspace .tl__more, body.mode-workspace .tl__meta, body.mode-workspace .tl__year { color: var(--ws-slate); }
body.mode-workspace .tl__date { color: var(--ws-text); }
body.mode-workspace .tl__entry { border-left-color: var(--ws-line); }
body.mode-workspace .tl__entry--review { border-left-color: var(--ws-violet); }
body.mode-workspace .tl__entry--unconfirmed { border-left-color: var(--ws-amber); }

/* ---------- inspector: document history ---------- */
.tlfilter { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.tlfilter button { font: inherit; font-size: 10.5px; color: var(--ws-slate); background: transparent; border: 1px solid var(--ws-line); border-radius: 10px; padding: 1px 8px; cursor: pointer; }
.tlfilter button.is-active { color: var(--ws-text); background: var(--ws-bg-3); border-color: var(--ws-slate); }
.inspector .tl { padding: 0; gap: 0.6rem; }
.inspector .tl__text { font-size: 12px; }
.inspector .tl__actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.inspector .tl__meta a { color: var(--ws-orange); }

/* ---------- element rows: document count ---------- */
.erow__docs { font-family: var(--font-mono); font-size: 10px; color: var(--ws-doc); white-space: nowrap; }

/* ---------- workspace: document lens ---------- */
.lens { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--ws-line); background: rgb(88 166 255 / 0.08); font-size: 11.5px; color: var(--ws-text); }
.lens__name { font-family: var(--font-mono); color: var(--ws-doc); }
.lens a { color: var(--ws-orange); }
.lens .btn { white-space: nowrap; flex: none; }
.stage__dot--doc { border: 1.5px solid var(--ws-doc); }
svg .hotspot--doc { stroke: var(--ws-doc); stroke-width: 1.8; fill: rgb(88 166 255 / 0.10); }
svg .hotspot--hover { fill: rgb(255 106 0 / 0.14); stroke: var(--ws-orange); stroke-width: 1.2; }
svg .doc-badge__dot { fill: var(--ws-doc); stroke: #fff; stroke-width: 1; }
svg .doc-badge__text { fill: #0a0a0a; font-family: Arial, sans-serif; font-weight: 700; font-size: 10px; text-anchor: middle; }
.sheet-toolbar__controls button[aria-pressed="true"] { color: #0a0a0a; background: var(--ws-doc); border-color: var(--ws-doc); }

/* project documents (M1): additions */
/* step 1 has no kind column: the attention column is the 5th, the actions the 6th */
.doclib th:nth-child(5) { width: 15%; }
.doclib th:nth-child(6) { width: auto; }
.doclib__scroll { overflow-x: auto; }
.doclib__toggle { margin-bottom: 0.4rem; }
.doclib__upload { display: grid; gap: 0.4rem; }
.doclib__upload .progress { padding: 0; }
.uploadbar.is-over { border-color: var(--accent); background: var(--accent-dim); }
.uploadbar__target { display: inline-flex; align-items: center; gap: 0.4rem; }

/* document page, hover card, inspector (M2-M4): additions */
/* M2/M4 */
@media (max-width: 900px) {
  .docgrid { grid-template-columns: minmax(0, 1fr); }
  .doclinks { position: static; }
}
.dlink__sub .mark { margin-left: 0.4rem; }
.mapping .btn { font-family: inherit; }
.inspector__history .tl { margin-top: 0.3rem; }
.inspector__history .tl__meta .basis { font-size: inherit; }
/* M3 */
.tip__docs-status { padding: 0.15rem 0.6rem 0.5rem; font-size: 11px; font-style: italic; color: var(--ink-3); }
.tip .tl__file { word-break: break-all; }
.tip .tl__text { overflow-wrap: anywhere; }
body.mode-workspace .tip__docs-status { color: var(--ws-slate); }

/* step 2: lens, library */
/* M5: a selected element stays orange under the lens (hotspot--doc is declared after hotspot--selected) */
svg .hotspot--doc.hotspot--selected { stroke: var(--ws-orange); stroke-width: 2.4; fill: rgb(255 106 0 / 0.18); }
.lens__text { min-width: 0; overflow-wrap: anywhere; }
.lens__actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.lens .mark { margin-left: 0; }
.lens .btn { color: var(--ws-text); text-decoration: none; }
.erow__lens { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ws-doc); }
.rail__sheet-lens { color: var(--ws-doc); }
/* M1: the kind column is the 3rd, so the attention column is the 6th and the actions the 7th */
.kindcell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.kindcell__basis { font-size: var(--tight); color: var(--ink-3); }
.doclib th:nth-child(2) { width: 30%; }
.doclib th:nth-child(3) { width: 12%; }
.doclib th:nth-child(5) { width: auto; }
.doclib th:nth-child(6) { width: 15%; }
.doclib th:nth-child(7) { width: auto; }

/* step 2: document page, hover, inspector */
.dockind { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.3rem; }
.dockind select { width: auto; font-size: 0.8rem; padding: 0.15rem 0.35rem; }
.dlink--open .dlink__tag { unicode-bidi: isolate; }
.dlink--open .dlink__actions .btn { font-family: var(--font-mono); }
.ditem__mappings .mark--gap { margin-left: 0; margin-right: 0.4rem; }
.tl__text bdi.mention, .ditem__text bdi.mention { unicode-bidi: isolate; }
.tl__meta .kind { font-size: 9px; }