/* ============================================================================
   Nottaker — components.css   ("Slate & Ember" v2)
   ----------------------------------------------------------------------------
   ALL shared components + the print primitives + the app-shell layout.
   References ONLY var(--token) from tokens.css. NO raw hex; NO off-scale px for
   spacing/radius. See DESIGN.md §16.1a / §16.7. A reviewer can grep this file
   for `#` (hex) or stray numeric `px` and find every violation.

   Sections:
     1.  Print primitives  (.kicker / .kicker-rule / .rule / .fig-ref / .caption)
     2.  Masthead
     3.  App shell layout  (sidebar + main)
     4.  Navigation
     5.  Buttons
     6.  Inputs / labels / selects / textareas
     7.  Cards / figure-head
     8.  Data table (library)
     9.  Tags
     10. Status badges
     11. Backlinks panel
     12. Modal / overlay  (the ONLY shadow)
     13. Toast
     14. Spinner
     15. Wikilinks / tag-links (rendered markdown inline)
     16. Misc (placeholder, empty state, dividers)
   ============================================================================ */

/* ============================================================================
   1. PRINT PRIMITIVES  (§16.1a — the signature; reusable helper classes)
   ============================================================================ */

/* Kicker label — wide-tracked uppercase mono. The connective tissue. */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--text-muted);
  line-height: var(--text-sm-lh);
  font-variant-numeric: tabular-nums;
}
/* Accent separators inside a kicker (·, /). */
.kicker .sep {
  color: var(--accent);
  margin: 0 var(--space-1);
}

/* Kicker rule — the short spot-ink tick (32px x 2px accent) above a heading. */
.kicker-rule {
  display: block;
  width: var(--rule-kicker-width);
  height: var(--rule-kicker-height);
  background-color: var(--rule-kicker-color);
  border: 0;
  margin: 0 0 var(--space-3) 0;
}

/* Hairline rule — 1px solid border, a first-class layout device. */
.rule {
  border: 0;
  border-top: var(--rule-hairline) solid var(--border);
  margin: var(--space-5) 0;
}
/* Double rule — 1px / gap / 1px for masthead foot or major breaks (sparingly). */
.rule--double {
  border: 0;
  border-top: var(--rule-hairline) solid var(--border);
  border-bottom: var(--rule-hairline) solid var(--border);
  height: 3px; /* the 3px gap between the two 1px rules (§16.1a) */
  margin: var(--space-5) 0;
}

/* Figure reference — "FIG. 042" in accent mono, uppercase, tracked. */
.fig-ref {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-fig);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Caption — beneath a figure/table/image. */
.caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caption);
  color: var(--text-muted);
  line-height: var(--text-xs-lh);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
}

/* ============================================================================
   2. MASTHEAD  (§16.7 — nameplate: 2px text-primary rule above a 1px border rule)
   ============================================================================ */
.masthead {
  border-top: var(--rule-masthead) solid var(--text-primary);
  border-bottom: var(--rule-hairline) solid var(--border);
  padding: var(--space-4) 0 var(--space-3) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.masthead__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.masthead__kicker {
  /* uses .kicker */
}
.masthead__wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}
/* The accent terminal dot of the wordmark (spot ink). */
.masthead__dot {
  color: var(--accent);
}
.masthead__meta {
  /* right-aligned masthead meta in kickers — uses .kicker */
  text-align: right;
  white-space: nowrap;
}

/* ============================================================================
   3. APP SHELL LAYOUT  (sidebar + main; mobile-first single column)
   ============================================================================ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Desktop: fixed-ish left sidebar + flexible content. */
.app__body {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  gap: var(--space-7);
  padding: var(--space-7); /* desktop page gutter (§16.3); mobile drops to space-5 below */
}

.app__sidebar {
  flex: 0 0 auto;
  width: 220px;
}

.app__main {
  flex: 1 1 auto;
  min-width: 0; /* allow the table/content to shrink instead of overflow */
}

/* App-level top bar holding the masthead, constrained to content width. */
.app__header {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-7) 0 var(--space-7);
}

/* ============================================================================
   4. NAVIGATION  (§16.7 — quiet left sidebar; mono kicker section dividers;
      active item = text-primary + 2px accent left-edge + accent-subtle bg)
   ============================================================================ */
.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav__divider {
  /* mono kicker section divider (CAPTURE / LIBRARY) — uses .kicker */
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text-secondary);
  border-left: var(--rule-masthead) solid transparent; /* reserves the edge slot */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.nav__item:hover {
  background-color: var(--surface-2);
  color: var(--text-primary);
  text-decoration: none;
}
.nav__item.is-active {
  color: var(--text-primary);
  background-color: var(--accent-subtle);
  border-left-color: var(--accent);
}
.nav__item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Optional tabular figure count on the right (mono). */
.nav__count {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nav__item.is-active .nav__count {
  color: var(--accent);
}
/* Disabled nav item (e.g. Scan = PASS 2). */
.nav__item.is-disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.nav__item.is-disabled .nav__count {
  color: var(--text-disabled);
}
.nav__badge {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-disabled);
}

/* Account / logout block at the foot of the sidebar. */
.nav__account {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav__email {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  word-break: break-all;
}

/* ============================================================================
   5. BUTTONS  (§16.7 — radius-sm; space-3 vertical / space-4 horizontal)
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--rule-hairline) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.btn:hover {
  text-decoration: none;
}

/* Primary — the ONLY solid-accent element on a screen (one per screen). */
.btn--primary {
  background-color: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.btn--primary:active {
  background-color: var(--accent-press);
  border-color: var(--accent-press);
}

/* Secondary — transparent with a strong border. */
.btn--secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background-color: var(--surface-2);
  color: var(--text-primary);
}

/* Ghost — no border, low emphasis. */
.btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn--ghost:hover {
  background-color: var(--surface-2);
  color: var(--text-primary);
}

/* Destructive — danger text/border on transparent. */
.btn--destructive {
  background-color: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn--destructive:hover {
  background-color: var(--surface-2);
  color: var(--danger);
}
/* Filled danger — ONLY for the final confirm of a destructive action. */
.btn--destructive-filled {
  background-color: var(--danger);
  color: var(--on-accent);
  border-color: var(--danger);
}
.btn--destructive-filled:hover {
  background-color: var(--danger);
  filter: brightness(1.08); /* token-derived hover; no new color introduced */
}

/* Disabled (any variant). */
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  color: var(--text-disabled);
  background-color: transparent;
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

/* Size modifiers. */
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
}
.btn--block {
  width: 100%;
}
/* Touch-sized — opts a button into the 44px target at every width (the base .btn
   is content-height on desktop, floored to 44px only on mobile). Use for the
   primary capture-flow actions — scan + audio — that stay finger-friendly on
   desktop too; one modifier instead of per-button min-height clones. */
.btn--touch {
  min-height: var(--touch-min);
}

/* ============================================================================
   6. INPUTS / LABELS / SELECTS / TEXTAREAS  (§16.7)
   ============================================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field + .field {
  margin-top: var(--space-4);
}

/* Kicker-style label — uppercase mono, +0.10em, text-secondary. */
.label {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

.input,
.textarea,
.select {
  width: 100%;
  background-color: var(--surface-2);
  color: var(--text-primary);
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--border-strong);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

/* Monospace input variant (timestamps, slugs, the editor source field). */
.input--mono,
.textarea--mono,
/* Date inputs are a data context — mono + tabular figures (§16.1a). Applies
   wherever a date field uses the shared .input (editor / scan / capture). */
.input[type="date"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.select {
  /* Native select; keep it simple, token-styled. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-6);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* Inline helper / error text under a field. */
.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--text-xs-lh);
}
.field__hint--error {
  color: var(--danger);
}

/* A horizontal cluster of controls (toolbar / filter bar). */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.toolbar--between {
  justify-content: space-between;
}

/* Autocomplete dropdown (shared by editor [[ and # popovers, project select).
   A true floating overlay -> the overlay shadow token is permitted. */
.autocomplete {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background-color: var(--surface-3);
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-1);
}
.autocomplete__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.autocomplete__item:hover,
.autocomplete__item.is-active {
  background-color: var(--surface-2);
  color: var(--text-primary);
}
.autocomplete__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   7. CARDS / FIGURE-HEAD  (§16.7 — surface-1, 1px border, radius-md; NO shadow)
   ============================================================================ */
.card {
  background-color: var(--surface-1);
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
/* Interactive card hover (note rows that link out). */
.card--interactive {
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}
.card--interactive:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
}
/* Card padding variants (DESIGN.md §16.7). Default .card = space-5. Use these —
   never an off-tier value — when a card's context calls for tighter or roomier
   padding: --compact (review cards, playback/record frames, dense strips) and
   --focus (a single focused surface, e.g. the login card). */
.card--compact { padding: var(--space-4); }
.card--focus { padding: var(--space-7); }

/* Figure head — FIG. NNN (left) + tabular date/time (right) on one row. */
.figure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.figure-head__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.figure-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}
.figure-context {
  /* mono kicker context line under a title — uses .kicker */
  margin-top: var(--space-1);
}

/* Page-level section header: kicker-rule + kicker + serif heading. */
.section-head {
  margin-bottom: var(--space-5);
}
.section-head__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--space-1) 0 0 0;
}

/* ============================================================================
   8. DATA TABLE (library)  (§16.7 — hairline row rules, no zebra; mono cells)
   ============================================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  font-size: var(--kicker-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border-strong);
  white-space: nowrap;
}
.data-table tbody td {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border);
  vertical-align: top;
}
.data-table tbody tr {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.data-table tbody tr:hover {
  background-color: var(--surface-1);
}
/* Numeric columns right-aligned (the BEM modifier the views emit; base __td
   already sets tabular-nums). A count is NOT a date — use this, not --date. */
.data-table__td--num {
  text-align: right;
  white-space: nowrap;
}
/* The header label aligns with its column — must out-specify `.data-table thead
   th { text-align:left }` (0,1,2). */
.data-table thead th.data-table__th--num {
  text-align: right;
}
/* The "Ref" column shows FIG. NNN in accent. */
.data-table .col-ref {
  color: var(--accent);
  letter-spacing: var(--tracking-fig);
  white-space: nowrap;
}
/* Title cell reads in the sans/serif voice for scannability. */
.data-table .col-title {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
.data-table .col-snippet {
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.data-table .col-date {
  white-space: nowrap;
  color: var(--text-muted);
}

/* ============================================================================
   9. TAGS  (§16.7 — outlined uppercase mono; project tag uses accent)
   ============================================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: transparent;
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  transition: border-color var(--transition-fast),
              color var(--transition-fast);
}
a.tag:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
}
/* Project tag = accent text + accent border (spot ink). */
.tag--project {
  color: var(--accent);
  border-color: var(--accent);
}
a.tag--project:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}
/* A row/cluster of tags. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================================================
   10. STATUS BADGES  (§16.7 — semantic color AS TEXT on tinted bg; never color alone)
   The single badge owner is .status-badge (§18). The former generic .badge family
   was a byte-identical duplicate emitted by no view — removed (one source of truth).
   ============================================================================ */

/* ============================================================================
   11. BACKLINKS PANEL  (§16.7 — "LINKED FROM" kicker + hairline rows)
   ============================================================================ */
.backlinks {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline) solid var(--border);
}
.backlinks__kicker {
  /* uses .kicker — "LINKED FROM" */
  margin-bottom: var(--space-3);
}
.backlinks__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.backlinks__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--rule-hairline) solid var(--border);
  text-decoration: none;
  color: var(--text-secondary);
}
.backlinks__row:first-child {
  border-top: 0;
}
.backlinks__row:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.backlinks__ref {
  /* uses .fig-ref styling via class fig-ref on the element */
  flex: 0 0 auto;
}
.backlinks__title {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.backlinks__snippet {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ============================================================================
   12. MODAL / OVERLAY  (§16.5 — the ONLY place the overlay shadow is allowed)
   ============================================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  /* dim backdrop — tokenized scrim (see --scrim in tokens.css) */
  background-color: var(--scrim);
}
.modal {
  width: 100%;
  max-width: 420px;
  background-color: var(--surface-2);
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay); /* permitted: true floating overlay */
  padding: var(--space-5);
}
.modal__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
}
.modal__body {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  margin: 0 0 var(--space-5) 0;
  max-width: none;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  /* Actions sit a content gap below the preceding block. This collapses with the
     space-5 bottom margin .modal__body / .modal__form already carry, so those
     modals keep their space-5 gap unchanged. In the suggest modal the
     consent/cap/error blocks carry margin-bottom: 0, so this gives the buttons a
     space-4 gap that mirrors the consent box's space-4 top margin and matches
     the modal's space-4 interior rhythm. */
  margin-top: var(--space-4);
}

/* Keyboard-shortcuts help list (the "?" overlay, §step 9). Key chips reuse the
   outlined-mono .tag primitive; rows are hairline-free, just spaced. */
.kbd-help {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kbd-help__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.kbd-help__keys {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: 7rem;
}
.kbd-help__then {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ============================================================================
   SESSION BANNER  (persistent; sticky top of the app shell)
   ----------------------------------------------------------------------------
   Raised when the 30-min idle session is expiring (warning) or has ended
   (expired). Sits in-flow at the top of .app and is position:sticky so it stays
   visible while scrolling. Elevation = border + surface step (no shadow on a
   non-floating element). Meaning carries as a TEXT kicker, never color alone;
   the left rule (warning/danger) is supplementary. No second solid-accent btn.
   ============================================================================ */
.session-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-2);
  border-bottom: var(--rule-hairline) solid var(--border);
  border-left: var(--rule-masthead) solid var(--accent);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}
.session-banner--warning { border-left-color: var(--warning); }
.session-banner--expired { border-left-color: var(--danger); }
.session-banner__kicker { color: var(--text-muted); flex: 0 0 auto; }
.session-banner__msg { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   13. TOAST  (transient; fixed host bottom-right; overlay shadow permitted)
   ============================================================================ */
.toast-host {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
  pointer-events: none; /* host transparent to clicks; toasts re-enable */
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--surface-3);
  border: var(--rule-hairline) solid var(--border-strong);
  border-left: var(--rule-masthead) solid var(--text-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay); /* permitted: floating overlay */
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
/* Left-edge accent encodes type alongside (never color alone — the message text
   carries meaning; the edge is a quiet reinforcement). */
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
.toast--danger  { border-left-color: var(--danger); }
.toast--info    { border-left-color: var(--info); }
.toast__msg {
  flex: 1 1 auto;
}
.toast__close {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.toast__close:hover {
  color: var(--text-primary);
}
.toast--leaving {
  opacity: 0;
  transform: translateY(var(--space-2));
}

/* ============================================================================
   14. SPINNER  (§16.9 — small accent ring; the ONLY radius-full control)
   ============================================================================ */
.spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spinner__ring {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  border: var(--rule-masthead) solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: nottaker-spin 0.8s linear infinite;
}
.spinner--lg .spinner__ring {
  width: var(--space-6);
  height: var(--space-6);
}
@keyframes nottaker-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* Replace the spin with a static, still-legible affordance. */
  .spinner__ring {
    animation: none;
    border-top-color: var(--accent);
  }
}

/* ============================================================================
   15. WIKILINKS / TAG-LINKS  (rendered markdown inline — markdown.js classes)
      Resolved wikilink = accent link. Ghost = muted + dashed underline.
   ============================================================================ */
.wikilink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--rule-hairline) solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.wikilink:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
  text-decoration: none;
}
/* Ghost (unresolved) — quiet, with a dashed underline cueing "not yet a note". */
.wikilink--ghost {
  color: var(--text-muted);
  border-bottom: var(--rule-hairline) dashed var(--border-strong);
}
.wikilink--ghost:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--text-secondary);
}

/* Inline #tag link voice is owned solely by .tag-link in editor.css (0.9em,
   covering both .md-rendered .tag-link and bare .tag-link) — no duplicate here. */

/* ============================================================================
   16. MISC — placeholders, empty states, action-item readout, transcription
   ============================================================================ */
.view-placeholder {
  padding: var(--space-7) 0;
  text-align: center;
  color: var(--text-muted);
}
.view-placeholder__msg {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center; /* center each line as a block — the global p{max-width:70ch}
                          is font-relative, so without this the mono/serif/sans lines
                          resolve to different widths and their centered text drifts
                          off a shared axis. */
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  border: var(--rule-hairline) dashed var(--border);
  border-radius: var(--radius-md);
}
/* Empty-state title is .empty-state__message (the JS-emitted line, below). The
   former .empty-state__title was a dead duplicate of it — removed. */
/* (The mono left-rule readout treatment lives on .md-rendered blockquote in
   editor.css; the former unused .transcription primitive is removed.) */

/* Action items — hairline-ruled header + index-numbered accent rows. */
.action-items {
  /* space-6 group->group rhythm, matching the sibling .note-section blocks. (The
     .note-section.action-items wrapper already renders space-6 via source order;
     this keeps the standalone rule from contradicting it.) */
  margin-top: var(--space-6);
}
/* The live action-item rules (.action-items__header / .action-items__list /
   .action-item / .action-item__index / .action-item__text — what note.js emits)
   are in §18 below. The former parallel .action-items__head/__item/__index set
   matched no emitted DOM — removed. */

/* Rendered-markdown body container — keep prose readable (~70ch). */
.prose {
  max-width: var(--prose-max);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}
.prose > * + * {
  margin-top: var(--space-4);
}
.prose h1,
.prose h2,
.prose h3 {
  margin-top: var(--space-6);
}
.prose ul,
.prose ol {
  padding-left: var(--space-5);
}
/* Task-list checkboxes from markdown task lists. */
.prose .task-list-item {
  list-style: none;
}
.prose img {
  border-radius: var(--radius-md);
  border: var(--rule-hairline) solid var(--border);
}

/* A two-column detail split (note detail / editor): main + aside. */
.split {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}
.split__main {
  flex: 1 1 auto;
  min-width: 0;
}
.split__aside {
  flex: 0 0 280px;
}

/* Metadata definition list (note detail aside). */
.meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.meta-list dt {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.meta-list dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   17. VIEW-LEVEL COMPOSITION  (classes emitted by library.js / note.js / scan.js)
   ----------------------------------------------------------------------------
   The view modules render a BEM-style markup (.view-header, .controls,
   .data-table__*, .note-*, .tag-index, .backlink-row, …). These are the page
   compositions built ON TOP of the primitives above. Tokens only; the data
   table reuses the .data-table base look (hairline rows, mono cells).
   ============================================================================ */

/* --- View header: kicker-rule + kicker + serif title, optional actions ---- */
.view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.view-header__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.view-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}
.view-header__title-hash {
  color: var(--accent);
  margin-right: var(--space-1);
}
.view-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* --- View explainer: the one shared intro-lede primitive (§16.13). The single
   orienting sentence under a view's header rule. Used identically by capture /
   intelligence / context / meetings — top 0 (the .rule owns the gap above),
   space-5 below; SANS (mono is data/labels only, §16.1). Per-view classes may
   add position only; never re-pick this margin/measure. ---------------------- */
.view-explainer {
  margin: 0 0 var(--space-5) 0;
  max-width: var(--prose-max);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* --- Filter / search controls (library) ---------------------------------- */
.controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.controls__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
/* The search field is the elastic one; the selects are content-sized. */
.controls__field:first-child {
  flex: 1 1 240px;
}
.controls__search {
  width: 100%;
}
.controls__select {
  min-width: 0;
}
/* Field/section label — the canonical kicker-style label (DESIGN §16.7): mono
   caps, +0.10em (tracking-label, NOT the kicker's 0.15em), text-secondary. Made
   self-contained so it owns the tracking even when emitted as `field-label kicker`
   (later source order beats .kicker's 0.15em) — ONE label voice across every view
   (library / intel / context / editor / scan / capture / modals). */
.field-label {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
/* Active-tag chip cluster. */
.controls__tagchip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.controls__tagchip:empty {
  display: none;
}
.controls__tagchip-label {
  /* uses .kicker */
}
/* Management actions (e.g. the ghost "Rename project" button) sit at the end of
   the filter row, baseline-aligned with the selects via the controls flex-end. */
.controls__field--actions {
  justify-content: flex-end;
}
.controls__rename {
  white-space: nowrap;
}
/* Keep the disabled rename button hoverable so its explanatory title tooltip
   ("No projects to rename yet") can surface. It is still disabled, so the
   re-enabled pointer events carry no click affordance. */
.controls__rename[disabled] {
  pointer-events: auto;
  cursor: not-allowed;
}

/* Stacked field block inside the rename modal (reuses .controls__field rows). */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-5) 0;
}
.modal__form .select,
.modal__form .input {
  width: 100%;
}

/* --- Results count caption + region -------------------------------------- */
.results-count {
  margin: var(--space-5) 0 var(--space-3) 0;
}
.results {
  min-width: 0;
}

/* --- Loading state (inline spinner + LOADING kicker) --------------------- */
.loading-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) 0;
  justify-content: center;
  color: var(--text-muted);
}
.loading-state__label {
  /* uses .kicker */
}

/* --- Empty-state subclasses (the JS uses __kicker/__message/__sub) -------- */
.empty-state__kicker {
  margin-bottom: var(--space-3);
}
.empty-state__message {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  color: var(--text-secondary);
  margin: 0 0 var(--space-2) 0;
}
.empty-state__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0; /* last line — let the box's bottom padding own the spacing (symmetric with the top) */
}

/* Empty-state TIER 2 — the inline hint (DESIGN.md §16.7). For in-list / in-flow
   "nothing here yet" placeholders that don't warrant the full boxed .empty-state:
   sans, muted, text-sm. Per-view classes add only margin/position. */
.empty-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* --- DATA TABLE composition (the BEM names library.js actually emits) -----
   These mirror the .data-table base above but match the JS class hooks. */
.data-table__head-row th,
.data-table__th {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border-strong);
  white-space: nowrap;
}
.data-table__th--date {
  white-space: nowrap;
}
.data-table__row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.data-table__row:hover {
  background-color: var(--surface-1);
}
.data-table__row:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}
.data-table__td {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.data-table__td--ref {
  white-space: nowrap;
}
.data-table__td--title {
  /* the title reads in the sans voice for scannability */
}
.data-table__title-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.data-table__title-link:hover {
  color: var(--accent);
  text-decoration: none;
}
.data-table__td--project {
  color: var(--text-secondary);
}
.data-table__td--date {
  white-space: nowrap;
  color: var(--text-muted);
}
.data-table__td--snippet {
  font-family: var(--font-sans);
  color: var(--text-muted);
}

/* --- Source tag: small mono caps label (text, never color alone) --------- */
.source-tag {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.source-tag--scan {
  color: var(--text-secondary);
}

/* --- Tag chip subclasses (the # prefix, the filter-chip remove button) ---- */
.tag__hash {
  color: var(--accent);
  margin-right: 0.1em;
}
.tag--clickable {
  /* uses .tag — a real anchor; hover handled by a.tag:hover */
}
.tag--filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.tag__remove:hover {
  color: var(--danger);
}

/* ============================================================================
   18. NOTE DETAIL  (note.js — figure head, title, context, actions, sections)
   ============================================================================ */
.note-detail {
  min-width: 0;
}
/* Note-detail outer head: a column stack of the shared .view-header__lead block
   (fig-head + serif .view-header__title + meta) over the .note-actions toolbar.
   Note-specific layout (actions stack below as a wrapping toolbar); the lead +
   title themselves are the shared primitives (§16.13). */
.note-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Figure head: FIG. NNN (left) + date (right). */
.fig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* "Related" inline label + meta (§16.3 space-3) — matches the other label/meta
     header rows (.action-items__header, .suggest-queue__header, .home__section-head). */
  gap: var(--space-3);
}
.fig-head__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Note title uses the shared .view-header__title primitive (§16.13). */
.note-context {
  /* mono kicker context line — uses .kicker */
}
.note-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Status badge (text label on a tinted bg; never color alone). */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--accent-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}
.status-badge--confirmed { color: var(--success); }
.status-badge--draft { color: var(--text-muted); }
.status-badge--image_only { color: var(--info); }
.status-badge--audio_only { color: var(--info); } /* pre-distill, matches image_only */
.status-badge--transcribe_failed { color: var(--danger); }

/* Generic detail section (tags / metadata / action items / backlinks). */
.note-section {
  margin-top: var(--space-6);
}
.note-section > .kicker {
  display: block;
  margin-bottom: var(--space-3);
}

/* Metadata grid (note.js emits .meta-grid > .meta-row > dt/dd). */
.meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.meta-row {
  display: contents;
}
.meta-row__label {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.meta-row__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* Action-item rows (note.js: .action-item > __index/__text). The .action-items
   section wrapper + header are styled in §16 above. */
.action-items__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.action-items__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.action-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--rule-hairline) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.action-item:last-child {
  border-bottom: 0;
}
.action-item__index {
  flex: 0 0 auto;
}
.action-item__text {
  min-width: 0;
}

/* --- Backlinks (note.js emits .backlinks__header / __rows + .backlink-row) - */
.backlinks__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.backlinks__header .kicker-rule {
  margin-bottom: 0;
}
.backlinks__empty {
  color: var(--text-muted);
}
.backlinks__rows {
  display: flex;
  flex-direction: column;
}
.backlink-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--rule-hairline) solid var(--border);
  text-decoration: none;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast);
}
.backlink-row:first-child {
  border-top: 0;
}
.backlink-row:hover {
  background-color: var(--surface-1);
  text-decoration: none;
}
.backlink-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.backlink-row__title {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.backlink-row:hover .backlink-row__title {
  color: var(--accent);
}
.backlink-row__snippet {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: var(--prose-max);
}

/* ============================================================================
   19. TAG INDEX  (note.js #/tags — hairline-ruled rows: name + tabular count)
   ============================================================================ */
.tag-index {
  min-width: 0;
}
.tag-index__list {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-hairline) solid var(--border);
}
.tag-index__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border-bottom: var(--rule-hairline) solid var(--border);
  text-decoration: none;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tag-index__row:hover {
  background-color: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
}
.tag-index__name {
  /* Typography (mono / tracking / uppercase) comes from the wrapped .tag chip;
     this only overrides the rest-state color. */
  color: var(--text-primary);
}
/* The index renders the name as the shared .tag chip so a tag looks identical
   everywhere (outlined uppercase mono). The chip is non-interactive inside the
   already-clickable row, so neutralize its own hover (the row owns the hover). */
.tag-index__row .tag {
  pointer-events: none;
}
.tag-index__row:hover .tag {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.tag-index__count {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tag-index__row:hover .tag-index__count {
  color: var(--accent);
}
/* Orphan-tag footer: a quiet row beneath the list noting zero-note tags left by
   edited/deleted notes, with a ghost "Clear unused" prune action. */
.tag-index__unused {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule-hairline) solid var(--border);
}
.tag-index__unused-note {
  margin: 0;
}

/* ============================================================================
   20. MOBILE BOTTOM TAB BAR + MASTHEAD MENU  (the mobile nav pattern)
   ----------------------------------------------------------------------------
   Desktop keeps the left sidebar (.app__sidebar). On mobile the primary nav
   becomes a fixed BOTTOM TAB BAR (.bottom-nav) — thumb-reachable, >=44px,
   accent active state, a hairline top rule (a surface step, no shadow). The
   account email + Logout live behind a compact masthead MENU button that opens
   a small popover (.masthead-menu). Both are hidden on desktop (display:none in
   the default cascade) and revealed only inside the <768px media query.
   ============================================================================ */
.bottom-nav {
  display: none; /* desktop: hidden — sidebar is the nav */
}
.masthead__menu {
  display: none; /* desktop: hidden — account lives in the sidebar foot */
}

/* ============================================================================
   21. CONTEXT DOCUMENT  (context.js #/context — settings-style editor)
   ----------------------------------------------------------------------------
   Reuses the shared view chrome (.view-header), the editor's mono source look
   (.textarea--mono), and the hairline-ruled-row pattern (like backlinks / the
   tag index) for version history. Tokens only; no raw hex / off-scale px.
   ============================================================================ */
.view--context {
  max-width: var(--content-max);
}
/* Explainer line beneath the header rule uses the shared .view-explainer (§16.13). */
/* Mono, tabular metadata readout (updated · size · encrypted). */
.context__meta {
  margin: 0 0 var(--space-4) 0;
}

/* Cache warning banner — semantic --warning as TEXT (never color alone). A left
   rule + tinted surface step carries the emphasis, not a fill. */
.context__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  background-color: var(--surface-1);
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-sm);
}
.context__banner[hidden] {
  display: none;
}
.context__banner--warning {
  border-left: var(--rule-masthead) solid var(--warning);
}
.context__banner-kicker {
  color: var(--warning);
}
.context__banner-msg {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* The document field: kicker label + help caption + the large mono textarea. */
.context__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.context__field-help {
  margin: 0;
}
.context__textarea {
  width: 100%;
  min-height: 60vh;
  resize: vertical;
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

/* Version history: a collapsible section under a "VERSION HISTORY" kicker. */
.context__history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-top: var(--rule-hairline) solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}
.context__history-toggle:hover {
  color: var(--text-primary);
}
.context__history-toggle:hover .kicker {
  color: var(--text-primary);
}
/* Chevron tick — a small CSS triangle in the muted ink; rotates when open. */
.context__history-chevron {
  width: 0;
  height: 0;
  border-left: var(--space-1) solid transparent;
  border-right: var(--space-1) solid transparent;
  border-top: var(--space-2) solid var(--text-muted);
  transition: transform var(--transition-fast);
}
.context__history--open .context__history-chevron {
  transform: rotate(180deg);
}
.context__history-body[hidden] {
  display: none;
}
.context__history-list {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-hairline) solid var(--border);
}
/* Each snapshot row: tabular date + size on the left, ghost Restore on the right
   (hairline-ruled, like backlinks / the tag index). */
.context__history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--rule-hairline) solid var(--border);
}
.context__history-row-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
  flex-wrap: wrap;
}
.context__history-date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.context__history-size {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.context__history-restore {
  flex: 0 0 auto;
}

/* Context link inside the mobile masthead account menu (hidden on desktop with
   the rest of .masthead__menu). Styled to read like a quiet ghost menu item. */
.masthead__menu-link {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.masthead__menu-link:hover {
  background-color: var(--surface-2);
  color: var(--text-primary);
  text-decoration: none;
}
.masthead__menu-link.is-active {
  color: var(--accent);
}

/* ============================================================================
   SUGGEST CONTEXT UPDATES  (context.js — LLM assist: picker modal + queue)
   Human-in-the-loop: a SECONDARY trigger, a consent-forward picker, and a
   review queue whose only write target is the editable document textarea.
   Tokens only — no raw color/spacing.
   ============================================================================ */

/* --- Wide modal variant for the picker (more room than the 420px confirm). - */
.modal--wide {
  max-width: 560px;
}

/* --- Segmented scope toggle: Recent | Pick notes (mono caps, hairline box). */
.segmented {
  display: inline-flex;
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.segmented__btn {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background-color: transparent;
  border: 0;
  border-right: var(--rule-hairline) solid var(--border);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.segmented__btn:last-child {
  border-right: 0;
}
.segmented__btn:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}
.segmented__btn.is-active {
  background-color: var(--accent-subtle);
  color: var(--accent);
}
/* Inset ring (§16.6): the shared segmented primitive owns its focus state so the
   parent .segmented{overflow:hidden} can't clip an outset ring. Used by capture /
   intel / context / editor toggles alike. */
.segmented__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

/* --- Quick date-range chips (Last 7 / 30 / 90 days). --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  background-color: transparent;
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.chip:hover {
  background-color: var(--surface-3);
  color: var(--text-primary);
}
.chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--accent-subtle);
}

/* --- Picker panes --- */
.suggest-pick__pane {
  margin-bottom: var(--space-4);
}
.suggest-pick__pane > .field-label {
  display: block;
  margin-bottom: var(--space-2);
}
.suggest-pick__sub {
  margin-bottom: var(--space-4);
}

/* Pick-notes checklist: scrollable hairline-ruled rows of multiselect notes. */
.suggest-checklist {
  display: flex;
  flex-direction: column;
  max-height: 30vh;
  overflow: auto;
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-sm);
}
.suggest-checklist__empty {
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.suggest-checklist__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule-hairline) solid var(--border);
  cursor: pointer;
}
.suggest-checklist__row:last-child {
  border-bottom: 0;
}
.suggest-checklist__row:hover {
  background-color: var(--surface-3);
}
.suggest-checklist__cb {
  flex: 0 0 auto;
  accent-color: var(--accent);
  align-self: center;
}
.suggest-checklist__ref {
  flex: 0 0 auto;
}
.suggest-checklist__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-checklist__date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Resolved preview list (what WILL be sent). */
.suggest-pick__count {
  margin: var(--space-3) 0 var(--space-2) 0;
  color: var(--text-secondary);
}
.suggest-pick__preview {
  max-height: 24vh;
  overflow: auto;
}
.suggest-pick__preview-empty {
  margin: 0;
}
.suggest-pick__list {
  display: flex;
  flex-direction: column;
  border-top: var(--rule-hairline) solid var(--border);
}
.suggest-pick__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--rule-hairline) solid var(--border);
}
.suggest-pick__item-ref {
  flex: 0 0 auto;
}
.suggest-pick__item-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-pick__item-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Consent primitive (.consent) — the SINGLE shared AI-disclosure treatment used
   everywhere text is sent to Gemini (capture transcript/audio, intelligence
   analyze/ask, context suggest). Prominent, plain language, NOT buried: a left
   accent rule + raised surface step carries emphasis as text, never color alone.
   In a flex-gap parent (the capture panes) the top margin is overridden to 0 so
   the parent gap owns the rhythm — see capture.css. (DESIGN.md §16.7.) */
.consent {
  margin: var(--space-4) 0 0 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-1);
  border: var(--rule-hairline) solid var(--border);
  border-left: var(--rule-masthead) solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}
/* Intel/suggest populate the consent text dynamically — never render an empty box. */
.consent:empty { display: none; }
/* The plain-language disclosure microcopy directly under the .consent box —
   SHARED across every AI-run view (capture transcript/audio, intel analyze/ask)
   so the consent->caption->button rhythm is identical everywhere. One rule = one
   rhythm: space-2 above (tight to the consent box, which carries margin-bottom:0)
   and space-4 below (the gap before the run button). Replaces the per-view
   .capture__privacy / .intel__privacy, which had drifted (8/16 vs the flex-pane's
   32/32). The capture run-region is wrapped (.capture__run) so the pane flex-gap
   can't inflate these margins. */
.consent-note {
  margin: var(--space-2) 0 var(--space-4) 0;
  color: var(--text-muted);
}
/* In the suggest modal the consent box follows the preview list (no bottom margin),
   so the bare primitive's space-4 top margin lands it 8px short of the space-5
   (24px) distinct-group gap the capture + intel run-regions use. Bring it on-rhythm. */
.modal .consent {
  margin-top: var(--space-5);
}
.suggest-pick__cap {
  margin: var(--space-2) 0 0 0;
  color: var(--warning);
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
}
.suggest-pick__cap[hidden] {
  display: none;
}

/* In-modal error row (failed analyze): message + a manual Try again. */
.suggest-pick__error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-1);
  border: var(--rule-hairline) solid var(--border);
  border-left: var(--rule-masthead) solid var(--danger);
  border-radius: var(--radius-sm);
}
.suggest-pick__error[hidden] {
  display: none;
}
.suggest-pick__error-msg {
  color: var(--danger);
  font-size: var(--text-sm);
}

/* ============================================================================
   SUGGEST REVIEW QUEUE  (hairline-ruled cards in the Context view body)
   ============================================================================ */
.suggest-queue {
  margin: var(--space-5) 0 var(--space-6) 0;
}
.suggest-queue[hidden] {
  display: none;
}
.suggest-queue:focus {
  outline: none; /* programmatic focus target only; no visible ring needed */
}
.suggest-queue__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.suggest-queue__lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Persistent finalize reminder — emphasized as text + a left accent rule. */
.suggest-queue__reminder {
  margin: var(--space-3) 0 0 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--accent-subtle);
  border-left: var(--rule-masthead) solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}
.suggest-queue__provenance {
  margin: var(--space-3) 0 0 0;
}
.suggest-queue__truncated {
  margin: var(--space-2) 0 0 0;
  padding: var(--space-2) var(--space-3);
  color: var(--warning);
  font-size: var(--text-xs);
  border-left: var(--rule-masthead) solid var(--warning);
}
.suggest-queue__done {
  margin: var(--space-4) 0 0 0;
}
.suggest-queue__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Each review card: hairline rule box, raised surface. */
.suggest-card {
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-1);
  padding: var(--space-4);
}
.suggest-card.is-accepted {
  border-color: var(--success);
}
.suggest-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
/* Op badge — reuses .status-badge; tint per op via the value class. */
.suggest-card__badge--insert { color: var(--info); }
.suggest-card__badge--replace { color: var(--warning); }
.suggest-card__badge--rewrite { color: var(--warning); }

/* Anchor-fit badge — whether Accept will place cleanly or fall back to append.
   Reuses .status-badge (mono caps; meaning carried by the label, never color). */
.suggest-card__fit--ok { color: var(--success); }
.suggest-card__fit--warn { color: var(--warning); }

/* Summary row — the human "what/why" (sans; mono is data/labels only). */
.suggest-card__summary { margin-bottom: var(--space-3); }
.suggest-card__summary-label {
  display: block;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.suggest-card__summary-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--text-secondary);
}

/* Diff preview — read-only before/after of the literal apply text. */
.suggest-card__diff {
  margin: 0;
  padding: var(--space-3);
  background-color: var(--bg);
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.suggest-card__diff-ctx { color: var(--text-muted); }
.diff-ins { color: var(--success); }
.diff-del { color: var(--danger); text-decoration: line-through; }

.suggest-card__section,
.suggest-card__confidence {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.suggest-card__section-label,
.suggest-card__conf-label {
  color: var(--text-muted);
}
.suggest-card__section-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.suggest-card__confidence {
  margin-left: auto;
}
.suggest-card__conf-value {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-label);
}
.suggest-card__confidence--high .suggest-card__conf-value { color: var(--success); }
.suggest-card__confidence--med .suggest-card__conf-value,
.suggest-card__confidence--medium .suggest-card__conf-value { color: var(--text-secondary); }
.suggest-card__confidence--low .suggest-card__conf-value { color: var(--warning); }

/* Proposed text region. */
.suggest-card__proposed {
  margin-bottom: var(--space-3);
}
.suggest-card__proposed-label,
.suggest-card__evidence-label {
  display: block;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.suggest-card__text {
  margin: 0;
  padding: var(--space-3);
  background-color: var(--bg);
  border: var(--rule-hairline) solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.suggest-card__text[hidden],
.suggest-card__edit[hidden] {
  display: none;
}
.suggest-card__edit {
  width: 100%;
  min-height: 6em;
  resize: vertical;
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
}

/* Evidence — source note link + snippet. */
.suggest-card__evidence {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background-color: var(--surface-2);
  border-radius: var(--radius-sm);
}
.suggest-card__evidence-link {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  letter-spacing: var(--tracking-fig);
  color: var(--accent);
  text-decoration: none;
}
a.suggest-card__evidence-link:hover {
  text-decoration: underline;
}
.suggest-card__evidence-snippet {
  margin: var(--space-2) 0 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* Card actions row. */
.suggest-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.suggest-card__status {
  color: var(--success);
  margin-left: var(--space-2);
}
.suggest-card__status[hidden] {
  display: none;
}

/* ============================================================================
   RESPONSIVE  (§16.8 — single column < 768px; primary nav = bottom tab bar)
   ============================================================================ */
@media (max-width: 767.98px) {
  /* --- Shell: single column; gutters space-5; leave room for the bottom bar. */
  .app__body {
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    /* Clear the fixed bottom tab bar (its height ≈ touch-min + 2*space-2) plus
       the iOS home-indicator safe area, so content never hides behind it. */
    padding-bottom: calc(var(--touch-min) + var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
  .app__header {
    padding: var(--space-4) var(--space-5) 0 var(--space-5);
  }

  /* The desktop sidebar is replaced by the bottom tab bar on mobile. */
  .app__sidebar {
    display: none;
  }

  /* --- Masthead compaction: smaller wordmark; meta hidden (room is tight). */
  .masthead {
    align-items: center;
    gap: var(--space-3);
  }
  .masthead__wordmark {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-lh);
  }
  .masthead__kicker {
    font-size: var(--kicker-size);
  }
  .masthead__meta {
    display: none; /* REV · YEAR meta collapses on phones */
  }

  /* --- Masthead account menu (compact button + popover) ------------------- */
  .masthead__menu {
    display: block;
    position: relative;
    flex: 0 0 auto;
  }
  .masthead__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    background: transparent;
    border: var(--rule-hairline) solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .masthead__menu-btn:hover {
    background-color: var(--surface-2);
    color: var(--text-primary);
  }
  /* Three-bar glyph drawn with borders (token-derived; not arbitrary spacing). */
  .masthead__menu-icon {
    display: block;
    width: var(--space-4);
    height: 0;
    border-top: var(--rule-masthead) solid currentColor;
    position: relative;
  }
  .masthead__menu-icon::before,
  .masthead__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: var(--space-4);
    border-top: var(--rule-masthead) solid currentColor;
  }
  .masthead__menu-icon::before { top: calc(-1 * var(--space-2) + 1px); }
  .masthead__menu-icon::after  { top: calc(var(--space-2) - 1px); }

  .masthead__menu-popover {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 200;
    min-width: 200px;
    max-width: calc(100vw - var(--space-7));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--surface-3);
    border: var(--rule-hairline) solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay); /* permitted: true floating overlay */
  }
  .masthead__menu-popover[hidden] {
    display: none;
  }
  .masthead__menu-popover .nav__email {
    display: block;
  }

  /* --- BOTTOM TAB BAR ----------------------------------------------------- */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background-color: var(--surface-1);
    /* Hairline TOP rule + surface step instead of a drop shadow (§16.5). */
    border-top: var(--rule-hairline) solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--touch-min);
    padding: var(--space-2) var(--space-1);
    color: var(--text-secondary);
    text-decoration: none;
    /* Reserve a 2px top edge so the active tab can ink it without reflow. */
    border-top: var(--rule-masthead) solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }
  .bottom-nav__item:hover {
    color: var(--text-primary);
    text-decoration: none;
  }
  .bottom-nav__label {
    font-family: var(--font-mono);
    font-size: var(--kicker-size);
    font-weight: var(--kicker-weight);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .bottom-nav__count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  /* Active tab: accent text + accent top-edge + accent-subtle wash (§16.7). */
  .bottom-nav__item.is-active {
    color: var(--accent);
    background-color: var(--accent-subtle);
    border-top-color: var(--accent);
  }
  .bottom-nav__item.is-active .bottom-nav__count {
    color: var(--accent);
  }
  .bottom-nav__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  /* --- View header: stack the title over its actions; actions full-width. */
  .view-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }
  .view-header__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-lh);
  }
  .view-header__actions {
    width: 100%;
  }
  .view-header__actions .btn {
    flex: 1 1 auto;
  }

  /* --- Filter controls stack full-width; every control fills the row. */
  .controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .controls__field,
  .controls__field:first-child {
    flex: 1 1 auto;
    width: 100%;
  }
  /* The ghost rename button fills the row like the other stacked controls and
     keeps a 44px tap target via the shared .btn sizing. */
  .controls__rename {
    width: 100%;
  }

  /* --- LIBRARY: the data table restacks into full-width tap rows. The header
     row is hidden; each <tr> becomes a card-like block (FIG ref + serif title +
     mono kicker line PROJECT · SOURCE · DATE + snippet). CSS-only restack. */
  .view--library .data-table,
  .view--tag .data-table {
    border-collapse: collapse;
    display: block;
  }
  .view--library .data-table thead,
  .view--tag .data-table thead {
    /* Visually hidden but kept for screen-reader column semantics. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .view--library .data-table tbody,
  .view--tag .data-table tbody {
    display: block;
  }
  .view--library .data-table__row,
  .view--tag .data-table__row {
    display: block;
    padding: var(--space-4) var(--space-1);
    border-bottom: var(--rule-hairline) solid var(--border);
  }
  .view--library .data-table__td,
  .view--tag .data-table__td {
    display: block;
    border-bottom: 0;
    padding: 0;
  }
  /* Ref + title stack as the row head. */
  .view--library .data-table__td--ref,
  .view--tag .data-table__td--ref {
    margin-bottom: var(--space-1);
  }
  .view--library .data-table__td--title,
  .view--tag .data-table__td--title {
    margin-bottom: var(--space-1);
  }
  .view--library .data-table__title-link,
  .view--tag .data-table__title-link {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: var(--text-lg-lh);
    font-weight: var(--weight-semibold);
  }
  /* Compose PROJECT · SOURCE · DATE onto one mono kicker line. The three cells
     flow inline with accent middots between them (added via ::before). */
  .view--library .data-table__td--project,
  .view--library .data-table__td--source,
  .view--library .data-table__td--date,
  .view--tag .data-table__td--project,
  .view--tag .data-table__td--source,
  .view--tag .data-table__td--date {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--kicker-size);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .view--library .data-table__td--source::before,
  .view--library .data-table__td--date::before,
  .view--tag .data-table__td--source::before,
  .view--tag .data-table__td--date::before {
    content: " · ";
    color: var(--accent);
  }
  /* The kicker line as a whole gets a little breathing room above the snippet. */
  .view--library .data-table__td--date,
  .view--tag .data-table__td--date {
    /* trailing element of the kicker line */
  }
  .view--library .data-table__td--snippet,
  .view--tag .data-table__td--snippet {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  /* --- Note detail: actions wrap and each stays >=44px (title scales down via
     the shared .view-header__title mobile rule above). */
  .note-actions {
    gap: var(--space-2);
  }
  .note-actions .btn {
    flex: 1 1 calc(50% - var(--space-2));
    min-height: var(--touch-min);
  }

  /* Detail splits stack on mobile. */
  .split {
    flex-direction: column;
  }
  .split__aside {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Touch targets: every button clears 44px. */
  .btn {
    min-height: var(--touch-min);
  }

  /* Modal fits the viewport; full-width within the inset overlay padding. */
  .overlay {
    padding: var(--space-4);
    align-items: flex-end; /* sheet-style: rises from the bottom, thumb-near */
  }
  .modal {
    max-width: none;
  }

  /* Autocomplete dropdowns never exceed the viewport width. */
  .autocomplete,
  .ns-autocomplete {
    max-width: calc(100vw - var(--space-6));
  }

  /* Toasts span the bottom on small screens (above the bottom bar). */
  .toast-host {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--touch-min) + var(--space-5) + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }

  /* Context editor: shorter writing surface on phones (mirrors the editor). */
  .context__textarea {
    min-height: 50vh;
  }

  /* A connected segmented strip wraps unevenly on phones (orphaned segments on
     their own full-width row). Lay it out as an even 2-col grid of self-bordered
     buttons so 4-/5-segment controls wrap cleanly and 2-segment ones fill a row;
     each is a comfortable touch target (§16.8 / DESIGN_AUDIT D2). */
  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    width: 100%;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .segmented__btn {
    border: var(--rule-hairline) solid var(--border-strong);
    border-radius: var(--radius-sm);
    text-align: center;
    min-height: var(--touch-min);
  }
  .segmented__btn.is-active { border-color: var(--accent); }
  .suggest-checklist__row {
    min-height: var(--touch-min);
    align-items: center;
  }
  /* Confidence drops below the section on narrow heads instead of pushing right. */
  .suggest-card__confidence {
    margin-left: 0;
  }
  /* Card action buttons already clear 44px via the global .btn rule; let them
     wrap and stretch comfortably. */
  .suggest-card__actions .btn {
    flex: 1 1 auto;
  }
}

/* ============================================================================
   RESPONSIVE — ROADMAP Phase 3/4 views reuse the library note table, so they
   need the same <768px table->card restack (the original rules are scoped to
   .view--library / .view--tag). Plus the meetings list table fits via fixed
   layout. A separate media block (CSS allows multiple); tokens only.
   ============================================================================ */
@media (max-width: 767.98px) {
  .view--home .data-table,
  .view--meeting .data-table { border-collapse: collapse; display: block; }
  .view--home .data-table thead,
  .view--meeting .data-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .view--home .data-table tbody,
  .view--meeting .data-table tbody { display: block; }
  .view--home .data-table__row,
  .view--meeting .data-table__row {
    display: block; padding: var(--space-4) var(--space-1);
    border-bottom: var(--rule-hairline) solid var(--border);
  }
  .view--home .data-table__td,
  .view--meeting .data-table__td { display: block; border-bottom: 0; padding: 0; }
  .view--home .data-table__td--ref,
  .view--meeting .data-table__td--ref,
  .view--home .data-table__td--title,
  .view--meeting .data-table__td--title { margin-bottom: var(--space-1); }
  .view--home .data-table__title-link,
  .view--meeting .data-table__title-link {
    font-family: var(--font-serif); font-size: var(--text-lg);
    line-height: var(--text-lg-lh); font-weight: var(--weight-semibold);
  }
  .view--home .data-table__td--project,
  .view--home .data-table__td--source,
  .view--home .data-table__td--date,
  .view--meeting .data-table__td--project,
  .view--meeting .data-table__td--source,
  .view--meeting .data-table__td--date {
    display: inline; font-family: var(--font-mono); font-size: var(--kicker-size);
    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
  }
  .view--home .data-table__td--source::before,
  .view--home .data-table__td--date::before,
  .view--meeting .data-table__td--source::before,
  .view--meeting .data-table__td--date::before { content: " · "; color: var(--accent); }
  .view--home .data-table__td--snippet,
  .view--meeting .data-table__td--snippet {
    margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted);
  }

  /* Meetings list table (custom 3-col): fixed layout so the name wraps + it fits. */
  .view--meetings .meetings__table { width: 100%; table-layout: fixed; }
  .view--meetings .data-table__td--title { white-space: normal; word-break: break-word; }
}