/* ============================================================================
   CROFT · convivial.css
   The Digital Convivialism house style, themed ELECTRIC TRIAD (Croft's palette).
   Ported from the canonical kit — source of truth: design/croft-base.css and
   the catalogs design/croft-kit-vol1.html + vol2.html (see also the
   convivial-design-system repo). The kit is FIXED across projects: structure,
   type, shape, elevation, motion. The ONLY per-project layer is the COLOR
   SCHEME block below.

   File shape: fixed tokens → color scheme → base elements → utilities →
   kit components (as the app's class API) → Croft app tier (shell, record,
   lists, board, chat — Croft-only compositions, built from kit treatments).
   Plain CSS, no build step, served by Propshaft. A generalist reads it
   top to bottom.
   ============================================================================ */

:root {
  /* ---------- TYPE (fixed) ---------- */
  --display: "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --sans:    "Avenir Next", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* code / data / IDs only */

  /* ---------- SHAPE & SPACE (fixed) ---------- */
  --r-card: 16px;   /* OUTER containers only */
  --r-in:   0px;    /* INNER elements are hard-edged — treatment B */
  --bd:     2px;    /* card border weight */
  --off:    5px;    /* offset-shadow distance */
  --grid:   22px;   /* dotted-grid pitch */
}

/* ============================================================================
   ▼▼▼  COLOR SCHEME — THE ONLY PER-PROJECT BLOCK  ▼▼▼  scheme: ELECTRIC TRIAD
   Dual-fill. Brand accents constant; the fill swap changes only the eight
   surface/ink tokens (dark = ink cards on black, light = paper cards on
   black). Ground stays pure black in both modes. `--on-*` = text/icon color
   placed ON that fill.
   ============================================================================ */
:root {
  /* brand accents — CONSTANT across modes (cobalt · magenta · gold · teal) */
  --accent:    #2E6BFF;   /* primary — actions, focus, key data */
  --accent-2:  #E0157A;   /* secondary — magenta */
  --accent-3:  #F5B400;   /* highlight — gold */
  --accent-4:  #12C7B0;   /* fourth — teal */
  --on-accent:    #FFFFFF;
  --on-accent-2:  #FFFFFF;
  --on-accent-3:  #2A1E00;
  --on-accent-4:  #04231F;

  /* the black ground + text that sits directly on it — LIGHT in both modes */
  --ground:  #000000;   /* the desk — pure black, never warmed */
  --paper:   #EEF1F5;   /* page-level text on the black ground */
  --dot:     rgba(238,241,245,.11);   /* dotted grid on the black ground */

  /* Croft extension: soft/faint on-ground text + hairline, constant like
     --paper (the ground never changes, so neither does what sits on it). */
  --paper-2: #AEB6C0;
  --paper-3: #7A828C;
  --line-ground: rgba(238,241,245,.13);

  /* surfaces — dark fill (default): ink cards on black */
  --card:    #101216;   /* component surface */
  --card-2:  #171A20;   /* nested surface: inputs, insets, chips */
  --card-3:  #20242C;   /* hover / tertiary */
  --track:   #0A0B0E;   /* meter & toggle track */

  /* ink (text + borders on cards) — dark fill */
  --ink:     #EEF1F5;   /* primary text + card borders + default offset shadow */
  --ink-2:   #9AA3AE;   /* muted text */
  --ink-3:   #646C77;   /* faint text */
  --line:    rgba(238,241,245,.11);  /* hairlines */
  --rule:    #282D34;                /* stronger rules / dividers */

  /* semantic status */
  --good:   var(--accent-4);
  --warn:   var(--accent-3);
  --danger: #FF4438;
  --info:   var(--accent);
  --on-danger: #1A0000;

  /* focus ring */
  --focus:  var(--accent);
  --focus-tint: rgba(46,107,255,.24);
}
@media (prefers-color-scheme: light) {
  :root {
    /* light fill: paper cards on the same black ground */
    --card:    #EEF1F5;
    --card-2:  #E4E8EE;
    --card-3:  #D8DEE6;
    --track:   #DDE2E9;
    --ink:     #101216;
    --ink-2:   #525A64;
    --ink-3:   #828A94;
    --line:    rgba(16,18,22,.12);
    --rule:    #CBD2DB;
  }
}
/* Explicit toggle (data-theme) wins over the OS preference in both directions.
   Only the fill tokens are restated; ground + accents are constant. */
:root[data-theme="dark"] {
  --card: #101216; --card-2: #171A20; --card-3: #20242C; --track: #0A0B0E;
  --ink: #EEF1F5; --ink-2: #9AA3AE; --ink-3: #646C77;
  --line: rgba(238,241,245,.11); --rule: #282D34;
}
:root[data-theme="light"] {
  --card: #EEF1F5; --card-2: #E4E8EE; --card-3: #D8DEE6; --track: #DDE2E9;
  --ink: #101216; --ink-2: #525A64; --ink-3: #828A94;
  --line: rgba(16,18,22,.12); --rule: #CBD2DB;
}
/* ============================================================================
   ▲▲▲  END COLOR SCHEME  ▲▲▲
   ============================================================================ */

/* ============================================================
   BASE — the ground, and classless elements on it
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0) 0 0 / var(--grid) var(--grid),
    var(--ground);
  color: var(--paper);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Headings speak display — the house voice. Section-level headings are set
   per component; bare headings stay display-bold, not uppercase (uppercase is
   for stamped labels and section heads, not running titles). */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; margin: 0; color: inherit; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p, ul, ol, blockquote, pre, table, figure, dl { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

strong { font-weight: 700; }
small { font-size: 12px; color: var(--paper-2); }

blockquote { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--paper-2); }

hr { border: 0; border-top: 1px solid var(--line-ground); margin: 26px 0; }

code, kbd, samp { font-family: var(--mono); font-size: .9em; }
code { background: var(--card-2); color: var(--ink); padding: 2px 6px; border-radius: var(--r-in); }
pre { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--r-in); padding: 14px 16px; overflow-x: auto; line-height: 1.7; }
pre code { background: none; padding: 0; }

/* Tables read like a datasheet: display caps heads, hairline rules, no zebra. */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--paper-2); padding-bottom: 8px; }
th, td { text-align: left; vertical-align: middle; padding: 11px 12px; border-bottom: 1px solid var(--line-ground); }
thead th { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3); border-bottom: 2px solid var(--rule); }

/* Forms — labels are stamped display caps; controls sit on nested surface. */
label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-2); }
input, textarea, select {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--card-2); border: var(--bd) solid var(--rule); border-radius: var(--r-in);
  padding: 11px 13px; width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-tint); }
textarea { resize: vertical; min-height: 82px; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="file"] { background: none; border: 0; padding: 0; color: var(--paper-2); font-size: 12.5px; }
/* The native picker button wears the kit's stamped-caps control voice, not the
   OS default — every other control on the ground is styled, so this is too. */
input[type="file"]::file-selector-button {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--card-2); border: var(--bd) solid var(--rule); border-radius: var(--r-in);
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
  transition: border-color .14s, color .14s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--focus); color: var(--paper); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--focus-tint); }
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   UTILITIES — type voices, offset shadows, layout
   ============================================================ */
.display { font-family: var(--display); }
.label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-2); }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--paper-2); }
.eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-3); }

/* The tape label — the stamped facet marker, rotated like a strip of tape. */
.tape { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent-3); color: var(--on-accent-3); padding: 6px 12px; transform: rotate(-3deg); box-shadow: 2px 2px 0 rgba(0,0,0,.6); display: inline-block; }

/* Offset-shadow helpers — elevation is a hard colored edge, never a blur. */
.off        { box-shadow: var(--off) var(--off) 0 var(--ink); }
.off-accent   { box-shadow: var(--off) var(--off) 0 var(--accent); }
.off-accent-2 { box-shadow: var(--off) var(--off) 0 var(--accent-2); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-l { display: flex; flex-direction: column; gap: 28px; }
.stack-xs { display: flex; flex-direction: column; gap: 7px; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prose { max-width: 65ch; }

.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 1.5em; height: 1.5em; }
.icon--dots { fill: currentColor; stroke: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -4rem; left: 14px; z-index: 100; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; transition: top .12s ease; }
.skip-link:focus { top: 14px; }

[hidden] { display: none !important; }

/* ============================================================
   BUTTONS — display caps; primary presses down on click
   ============================================================ */
button, input[type="submit"], input[type="button"], input[type="reset"], .button {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto;
  border: var(--bd) solid transparent; border-radius: var(--r-in); padding: 11px 20px;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  background: var(--accent); color: var(--on-accent); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s, border-color .14s, color .14s, background .14s;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .button:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--ink); color: var(--on-accent); }
button:active, input[type="submit"]:active, .button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
button:disabled, input[type="submit"]:disabled, .button[aria-disabled="true"] { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }
button .icon, .button .icon { width: 16px; height: 16px; }

.button--quiet { background: var(--card-2); color: var(--ink); border-color: var(--rule); box-shadow: none; }
.button--quiet:hover { background: var(--card-2); color: var(--accent-2); border-color: var(--accent-2); transform: none; box-shadow: none; }
.button--quiet:active { transform: none; box-shadow: none; }

.button--ghost { background: transparent; color: var(--paper-2); border-color: transparent; box-shadow: none; padding-inline: 8px; }
.button--ghost:hover { background: transparent; color: var(--paper); transform: none; box-shadow: none; }
.button--ghost:active { transform: none; box-shadow: none; }

.button--sm, .card__move-form button { padding: 8px 14px; font-size: 11px; }

.iconbtn { width: 40px; height: 40px; padding: 0; border: var(--bd) solid var(--rule); background: var(--card-2); color: var(--ink-2); display: grid; place-items: center; box-shadow: none; }
.iconbtn:hover { color: var(--accent-2); border-color: var(--accent-2); transform: none; box-shadow: none; }
.iconbtn .icon { width: 18px; height: 18px; }

/* ============================================================
   FORMS — field scaffolding
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.hint, .field__hint { font-size: 12px; color: var(--paper-3); }
.field-error, .field__error { font-size: 12px; color: var(--danger); font-weight: 700; flex-basis: 100%; margin: 0; }
.form-page { max-width: 34rem; }
.form-page p { margin-block: 14px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 14px; border-top: 1px solid var(--line-ground); }
.inline-form { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   STATUS — pills, badges, mentions, chips
   ============================================================ */
/* .badge is Croft's status pill — the kit's .pill, stamped display caps. */
.badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-in); background: var(--card-2); color: var(--ink-2); border: 1px solid var(--rule); }
.badge--good, .badge--resolved, .badge--done, .badge--won, .badge--final { background: var(--good); color: var(--on-accent-4); border-color: var(--good); }
.badge--warn, .badge--open, .badge--overdue, .badge--doing, .badge--paused { background: var(--warn); color: var(--on-accent-3); border-color: var(--warn); }
.badge--crit { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.badge--archived, .badge--lost { background: var(--card-2); color: var(--ink-3); border-color: var(--rule); }

/* An actor mention — a reference, so it takes the link accent (kit §13). */
.mention { font-family: var(--mono); font-weight: 700; font-size: .95em; color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card-2); border: 1px solid var(--rule); font-size: 13px; color: var(--ink); }

/* Reference to another record — the link accent plus a mono id. */
.ref-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-weight: 600; }
.ref-chip:hover { text-decoration: underline; }
.ref-chip .icon { color: var(--paper-3); width: 1em; height: 1em; }
.ref-chip .ref-id { color: var(--paper-3); font-family: var(--mono); font-size: .85em; font-weight: 400; }

/* ============================================================
   FEEDBACK — alerts (flash), toasts, dialog
   ============================================================ */
/* Flash wears the kit alert: bordered in the severity color, icon to match. */
.flash { display: flex; gap: 13px; padding: 14px 16px; border: var(--bd) solid var(--rule); align-items: flex-start; width: 100%; background: var(--card); color: var(--ink); }
.flash--notice, .flash--good { border-color: var(--good); }
.flash--warn { border-color: var(--warn); }
.flash--alert, .flash--crit { border-color: var(--danger); }
.flash__body { flex: 1; font-size: 13.5px; }
.flash__dismiss { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; box-shadow: none; }
.flash__dismiss:hover { transform: none; box-shadow: none; color: var(--ink); }
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }

.toasts { position: fixed; z-index: 80; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 24rem); }
.toast { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--card-2); border: var(--bd) solid var(--rule); padding: 12px 14px; box-shadow: var(--off) var(--off) 0 var(--accent-2); animation: toast-in .16s ease; }
.toast__body { font-size: 13.5px; flex: 1; }
.toast__dismiss { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 16px; padding: 0 6px; box-shadow: none; }
.toast__dismiss:hover { transform: none; box-shadow: none; color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } }

/* Modal: native <dialog>, carded, raised on a cobalt edge. */
dialog { border: var(--bd) solid var(--ink); border-radius: var(--r-card); padding: 0; width: min(92vw, 420px); background: var(--card); color: var(--ink); box-shadow: 8px 8px 0 var(--accent); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog__header { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 22px 22px 0; }
.dialog__title { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.dialog__body { padding: 14px 22px; }
.dialog__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 22px 22px; }

/* Dropdown menu: native <details>. */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 214px; display: flex; flex-direction: column; background: var(--card-2); color: var(--ink); border: var(--bd) solid var(--rule); padding: 6px; box-shadow: 6px 6px 0 rgba(0,0,0,.6); }
.menu__list--right { left: auto; right: 0; }
.menu__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: none; box-shadow: none; }
.menu__item:hover { background: var(--card-3); transform: none; box-shadow: none; color: var(--ink); }
.menu__item .icon { color: var(--ink-2); }
.menu__item:hover .icon { color: var(--accent-2); }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger); }
.menu__sep { height: 1px; background: var(--rule); margin: 5px 6px; }

/* ============================================================
   LOADING
   ============================================================ */
.spinner { display: inline-block; width: 1.15em; height: 1.15em; border-radius: 50%; border: 3px solid var(--card-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button[aria-busy="true"], .button[aria-busy="true"] { color: transparent; pointer-events: none; position: relative; }
button[aria-busy="true"]::after, .button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.45); border-top-color: var(--on-accent); border-radius: 50%; animation: spin .8s linear infinite; }
.skeleton { color: transparent; background: linear-gradient(90deg, var(--card-2) 25%, var(--card-3) 50%, var(--card-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.turbo-progress-bar { height: 2px; background: var(--accent); }

/* ============================================================
   EMPTY STATE — honest, stamped, never a dead end
   ============================================================ */
.empty { text-align: center; padding: 30px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--paper-2); }
.empty::before { content: "◆"; width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid var(--rule); background: var(--card-2); color: var(--accent-2); font-size: 22px; }
.empty h4 { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; margin: 0; color: var(--paper); }
.empty p { margin: 0; font-size: 13.5px; max-width: 40ch; }

/* ============================================================
   CROFT APP SHELL — on-ground sidebar (mockup: croft-record-page)
   ============================================================ */
/* A viewport-height frame: the sidebar stays the height of the view (its footer
   pinned to the bottom of the screen, not the bottom of a long page) and only
   the content pane scrolls — the same height the sidebar has when it floats.
   The frame spans the full window (never centered): the scroll pane must reach
   the right window edge so its scrollbar sits there, not mid-screen; the
   reading measure is capped inside the pane (.app__page) instead. */
.app { --sidebar-w: 214px; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "sidebar content"; height: 100vh; }
.app__sidebar { grid-area: sidebar; border-right: 1px solid var(--line-ground); display: flex; flex-direction: column; gap: 22px; padding: 26px 18px; overflow-y: auto; min-width: 0; min-height: 0; }

/* Sidebar head: brand + the collapse control on one line. */
.app__sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app__collapse { padding: 6px; margin: -6px; color: var(--paper-3); }
.app__collapse:hover { color: var(--paper); }
.app__collapse .icon { width: 16px; height: 16px; transition: transform .16s; }
.sb-collapsed .app__collapse .icon { transform: rotate(180deg); }

/* Brand: the bug block + wordmark. */
.app__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.app__brand .app__bug { width: 34px; height: 34px; flex: none; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--paper); font-family: var(--display); font-weight: 700; font-size: 16px; }
.app__brand-mark { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1.1; color: var(--paper); }
.app__brand small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-3); }

/* Nav: uppercase display rows on the ground. */
.app__nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; }
.app__nav a { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; padding: 7px 11px; display: flex; align-items: center; gap: 8px; transition: color .14s, background .14s, box-shadow .14s; }
.app__nav a:hover { color: var(--paper); background: var(--card); }
.app__nav a[aria-current] { color: var(--accent); background: var(--card); box-shadow: inset 3px 0 0 var(--accent); }
.app__nav a[aria-current="true"] { color: var(--paper); background: none; box-shadow: inset 3px 0 0 var(--accent); }
.app__nav a .icon { color: var(--paper-3); width: 15px; height: 15px; }
.app__nav a:hover .icon { color: var(--paper-2); }
.app__nav a[aria-current] .icon { color: var(--accent); }
.app__nav-heading { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-3); padding: 14px 11px 4px; }
.app__nav a.app__nav-sub { padding-left: 22px; font-size: 11px; }
.app__nav a.app__nav-quiet { color: var(--paper-3); font-weight: 500; }
.app__nav a.is-unread { color: var(--paper); font-weight: 700; }
.app__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-inline-start: auto; flex: none; }

/* The docs tree (ADR 0030): native <details> disclosure, indent per level. */
.app__tree > summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.app__tree > summary::-webkit-details-marker { display: none; }
.app__tree > summary::before { content: "\25B8"; width: 12px; flex: none; text-align: center; font-size: 9px; color: var(--paper-3); }
.app__tree[open] > summary::before { content: "\25BE"; }
/* Marker (12px) + link pad (10px) puts a parent's text at 22px — flush
   with a leaf's default app__nav-sub pad; each level indents 12px more. */
.app__tree > summary a.app__nav-sub { flex: 1 1 auto; padding-left: 10px; }
.app__tree-kids { padding-inline-start: 12px; }

/* Two zones: the switcher stays put; the active tool's panel scrolls alone. */
.app__switcher { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--line-ground); padding-bottom: 8px; }
.app__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.app__nav-footer { margin-top: auto; border-top: 1px solid var(--line-ground); }

/* Operator footer: who's here + the scheme chip. */
.app__operator { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-ground); display: flex; flex-direction: column; gap: 3px; }
.app__operator .who { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--paper); }
.app__operator .role { font-family: var(--mono); font-size: 10px; color: var(--paper-3); }
.app__operator form { margin-top: 8px; }

/* No persistent top bar. The crumb and any page actions float at the top of the
   content, sticky over the scroll with a soft fade, so the view stays on the
   record itself. */
.app__content { grid-area: content; min-width: 0; min-height: 0; overflow: auto; padding: 0 clamp(16px,3vw,42px) 100px; }
/* The reading column: same measure the old centered frame gave the content,
   now capped inside the full-width scroll pane. */
.app__page { max-width: calc(1500px - var(--sidebar-w, 214px)); margin: 0 auto; }
.page-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; row-gap: 8px; flex-wrap: wrap;
  padding: 18px 0 14px; margin-bottom: 10px; background: linear-gradient(var(--ground) 62%, transparent); }
.page-head:empty { display: none; }
.page-head__spacer { flex: 1; }
@media (max-width: 860px) { .topbar-search input { width: 10ch; } }

.crumb { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; color: var(--paper-3); min-width: 0; flex-wrap: wrap; }
.crumb a { color: var(--paper-2); text-decoration: none; }
.crumb a:hover { color: var(--paper); }
.crumb .icon { color: var(--paper-3); width: 1em; height: 1em; flex: none; }
.crumb .here { color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-search { display: flex; align-items: center; gap: 8px; background: var(--card-2); border: var(--bd) solid var(--rule); border-radius: var(--r-in); padding: 0 10px; }
.topbar-search input { border: 0; background: transparent; width: 16ch; padding: 7px 0; box-shadow: none; font-size: 13px; }
.topbar-search input:focus { outline: none; box-shadow: none; }
.topbar-search .icon { color: var(--ink-3); }
/* The dedicated search page reuses the box, but as a full-width hero: the
   input fills the column and the submit rides the right edge, instead of the
   topbar's fixed 16ch. */
.topbar-search--page { padding: 2px 12px; }
.topbar-search--page input { flex: 1 1 auto; width: auto; padding: 11px 0; font-size: 14px; }

/* Collapse to focus. The sidebar leaves the grid, the content reclaims the
   width, and a hover on the left-edge peek zone (or the sidebar itself) floats
   it back as an overlay — pure CSS, so nothing gets stuck. Tap toggles .sb-peek
   for touch. */
.app__peek-zone { display: none; }
.sb-collapsed .app { grid-template-columns: 0 1fr; }
.sb-collapsed .app__sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w, 214px); z-index: 60;
  background: var(--ground); border-right: 1px solid var(--rule);
  transform: translateX(-100%); transition: transform .16s ease;
  box-shadow: 10px 0 30px rgba(0,0,0,.45);
}
.sb-collapsed .app__peek-zone { display: block; position: fixed; inset: 0 auto 0 0; width: 16px; z-index: 55; cursor: pointer; }
.sb-collapsed .app__peek-zone:hover ~ .app__sidebar,
.sb-collapsed .app__reopen:hover ~ .app__sidebar,
.sb-collapsed .app__sidebar:hover,
.sb-collapsed.sb-peek .app__sidebar { transform: none; }

/* The way back in: a visible arrow tab riding the left edge, mid-height —
   click reopens the sidebar (overlay toggle on touch). It sits ABOVE the
   floated sidebar so the hover reveal never swallows the click; hovering it
   floats the sidebar out like the zone does. */
.app__reopen { display: none; position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 65;
  width: 22px; height: 46px; padding: 0; place-items: center;
  background: var(--card-2); color: var(--paper-2);
  border: var(--bd) solid var(--rule); border-left: 0; border-radius: 0 var(--r-in) var(--r-in) 0; box-shadow: none; }
.sb-collapsed .app__reopen { display: grid; }
.app__reopen:hover, .app__reopen:active { background: var(--card-2); color: var(--accent); border-color: var(--accent); transform: translateY(-50%); box-shadow: none; }
.app__reopen .icon { width: 14px; height: 14px; }

/* Narrow: single column, the sidebar always overlays; the peek zone is the way
   in (tap it), same mechanism as a collapsed desktop. */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "content"; }
  .app__sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 260px); z-index: 60; background: var(--ground); transform: translateX(-100%); transition: transform .16s ease; border-right: 1px solid var(--rule); box-shadow: 10px 0 30px rgba(0,0,0,.45); }
  .app__peek-zone { display: block; position: fixed; inset: 0 auto 0 0; width: 18px; z-index: 55; cursor: pointer; }
  .app__reopen { display: grid; }
  .app__peek-zone:hover ~ .app__sidebar, .app__reopen:hover ~ .app__sidebar, .app__sidebar:hover, .sb-peek .app__sidebar { transform: none; }
  .sb-peek::before { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); }
}

/* Settings — one quiet gear, bottom-right, opening a popover. Everything global
   (theme, export) lives here instead of in a persistent top bar. */
.settings { position: fixed; right: 16px; bottom: 16px; z-index: 70; }
.settings__gear { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: var(--card-2); color: var(--paper-2); border: var(--bd) solid var(--rule); border-radius: 50%; box-shadow: none; }
.settings__gear:hover { background: var(--card-2); color: var(--accent); border-color: var(--accent); transform: none; box-shadow: none; }
.settings__gear .icon { width: 18px; height: 18px; }
.settings__panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 254px; max-height: 72vh; overflow-y: auto;
  display: none; flex-direction: column; padding: 8px;
  background: var(--card); color: var(--ink); border: var(--bd) solid var(--rule); border-radius: var(--r-card); box-shadow: 6px 6px 0 var(--accent-2); }
.settings.is-open .settings__panel { display: flex; }
.settings__group { display: flex; flex-direction: column; gap: 1px; padding: 6px 2px; }
.settings__group + .settings__group { border-top: 1px solid var(--rule); margin-top: 4px; }
.settings__label { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 2px 8px 7px; }
.settings__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 8px; font-size: 13px; color: var(--ink); }
.settings__item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; font-size: 13px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-in); }
.settings__item:hover { background: var(--card-2); color: var(--ink); }
.settings__item .icon { width: 14px; height: 14px; color: var(--ink-3); }
.settings__hint { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-3); }

/* Unauthenticated shell — a doorway: one card on the ground. */
.auth-shell { width: 100%; max-width: 26rem; margin: 12vh auto 0; padding: 22px; background: var(--card); color: var(--ink); border: var(--bd) solid var(--ink); border-radius: var(--r-card); box-shadow: 8px 8px 0 var(--accent); }
.auth-shell h1 { margin-bottom: 22px; color: var(--ink); text-transform: uppercase; font-size: 19px; letter-spacing: .01em; }
.auth-shell label { color: var(--ink-2); }

/* Theme toggle — icon of the mode you'll switch TO. */
.theme-toggle { padding: 0; line-height: 0; flex: none; }
.theme-toggle .icon { width: 17px; height: 17px; vertical-align: middle; }
.theme-toggle .i-sun, .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: inline-block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: inline-block; }

/* ============================================================
   LIST VIEWS — toolbar with tape label, datasheet rows
   ============================================================ */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 22px; flex-wrap: wrap; }
.list-toolbar h1 { font-size: clamp(24px, 3vw, 30px); text-transform: uppercase; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 12px; }
.list-toolbar h2 { font-size: 16px; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.list-toolbar h2 .eyebrow { margin-inline-start: 8px; }
.list-toolbar__actions { display: flex; align-items: center; gap: 8px; }
h1 > .icon { color: var(--accent-3); }

.view-toggle { display: flex; gap: 2px; }
.view-toggle a { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; padding: 6px 10px; border: 1px solid transparent; }
.view-toggle a:hover { color: var(--paper); border-color: var(--rule); }
.view-toggle .is-current { color: var(--accent); border-color: var(--accent); }

.filter-panel { display: flex; align-items: center; gap: 8px; }
/* One Filter or Sort button, Airtable-shaped: a quiet display-cap button
   that opens a floating panel of the closed vocabulary. Active reads as
   the accent; the panel floats like the page menu (same ink border +
   offset shadow), with a stamped label + select per condition. */
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: var(--bd) solid var(--rule); border-radius: var(--r-in); padding: 8px 14px;
  background: var(--card-2); color: var(--ink); }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary .icon { width: 14px; height: 14px; color: var(--ink-3); }
.pop > summary:hover, .pop[open] > summary { color: var(--accent-2); border-color: var(--accent-2); }
.pop > summary:hover .icon, .pop[open] > summary .icon { color: var(--accent-2); }
.pop--active > summary { color: var(--accent); border-color: var(--accent); }
.pop--active > summary .icon { color: var(--accent); }
.pop__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px;
  background: var(--card); border: var(--bd) solid var(--ink); border-radius: var(--r-card);
  padding: 14px; box-shadow: var(--off) var(--off) 0 var(--ink);
  display: flex; flex-direction: column; gap: 10px; }
.pop__row { display: flex; align-items: center; gap: 8px; }
.pop__row label { flex: none; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pop__row select { flex: 1 1 auto; min-width: 0; padding: 7px 8px; font-size: 12.5px; }
.pop__clear { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; align-self: flex-start; margin-top: 2px; }
.pop__clear:hover { color: var(--ink); }
.list-section + .list-section { margin-top: 22px; }

/* Section headers inside tables — stamped colgroup rows. */
tbody th[scope="colgroup"] { font-family: var(--display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-2); text-align: left; padding-top: 22px; border-bottom: 1px solid var(--rule); }

.records { display: flex; flex-direction: column; }
.record-row { display: flex; align-items: center; gap: 13px; padding: 12px 8px; text-decoration: none; color: var(--paper); border-bottom: 1px solid var(--line-ground); transition: background .12s, box-shadow .12s; }
.record-row:last-child { border-bottom: 0; }
.record-row:hover { background: var(--card); box-shadow: inset 3px 0 0 var(--accent); color: var(--paper); }
.record-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.record-row__icon { color: var(--paper-3); flex: none; }
.record-row:hover .record-row__icon { color: var(--accent); }
.record-row__main { flex: 1 1 auto; min-width: 0; }
.record-row__title { display: block; font-family: var(--display); font-weight: 600; letter-spacing: .02em; color: var(--paper); font-size: 13.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row__sub { display: block; color: var(--paper-3); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row__meta { display: flex; align-items: center; gap: 22px; flex: none; }
.record-row__meta .num { font-family: var(--mono); font-size: 11px; color: var(--paper-2); font-variant-numeric: tabular-nums; text-align: right; }
.record-row__chevron { color: var(--paper-3); flex: none; opacity: 0; transition: opacity .12s; }
.record-row:hover .record-row__chevron, .record-row:focus-visible .record-row__chevron { opacity: 1; color: var(--accent); }
@media (max-width: 40rem) { .record-row__meta .num { display: none; } }

/* ============================================================
   RECORD PAGE — the atom of the UI (mockup: croft-record-page)
   ============================================================ */
/* Two altitudes: the record is the figure — lifted onto a surface — while
   context (files, an open thread) sits in the rail, and the conversation
   below is the same surface chat uses. */
/* Columns stretch (no align-items: start) so the rail spans the full page
   height — that travel is what lets the sticky thread panel follow the
   scroll. Cards inside the rail keep their natural heights. */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; max-width: 1120px; }
.rec-primary { min-width: 0; }
@media (max-width: 62rem) { .rec-grid { grid-template-columns: 1fr; } }

/* The record surface: a card fill + border lifts it off the black ground, the
   way the mockup's .spec does — no loud shadow, the luminance step is the lift. */
.record { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: clamp(20px, 2.6vw, 32px); }
.record__head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.record__avatar { flex: none; width: 44px; height: 44px; border-radius: var(--r-in); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ground); }
.record__avatar .icon { width: 21px; height: 21px; }
.record__headmain { flex: 1 1 auto; min-width: 0; }
.record__status { flex: none; }
/* The search palette: one dialog over any page, kit container treatment,
   the same search everyone else gets — just closer to hand. */
.palette { margin: 8vh auto 0; padding: 0; width: min(620px, calc(100vw - 32px)); background: transparent; border: 0; }
.palette::backdrop { background: rgba(0, 0, 0, .62); }
.palette__box { background: var(--card); color: var(--ink); border: var(--bd) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--off) var(--off) 0 var(--accent); overflow: hidden; }
.palette__field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.palette__field input { flex: 1; background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--ink); font-size: 15px; }
.palette__field input:focus { outline: none; }
.palette__results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.palette__hint { margin: 0; padding: 14px 10px 16px; font-size: 12.5px; color: var(--ink-3); }
.palette__group { padding: 6px 0; }
.palette__label { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 6px 10px; }
.palette__row { display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: var(--r-in); color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.palette__row .icon { flex: none; align-self: center; color: var(--ink-3); }
.palette__row .palette__title { color: var(--ink); }
.palette__row:hover { background: var(--card-2); color: var(--ink); }
a.palette__row:hover .icon { color: var(--accent); }

/* Mark-all-seen: a quiet inline text control, not a topbar shout. */
.mark-seen { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--paper-3); border: 0; box-shadow: none; padding: 0; margin-inline-start: 10px; font-size: 10.5px; letter-spacing: .1em; }
.mark-seen:hover { background: transparent; color: var(--accent); transform: none; box-shadow: none; }
.mark-seen .icon { width: 13px; height: 13px; }

/* The page menu: config and lifecycle live behind one quiet "···"
   disclosure — never as loose buttons on the main UI. */
.page-menu { position: relative; }
.page-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-in); color: var(--paper-3); }
.page-menu summary::-webkit-details-marker { display: none; }
.page-menu summary:hover, .page-menu[open] summary { background: var(--card-3); color: var(--ink); }
.page-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 180px; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: var(--bd) solid var(--ink); border-radius: var(--r-card); padding: 8px; box-shadow: var(--off) var(--off) 0 var(--ink); }
.page-menu__panel form.button_to { display: contents; }
.page-menu__item { justify-content: flex-start; width: 100%; background: transparent; color: var(--ink-2); border: 0; box-shadow: none; padding: 8px 9px; font-size: 11px; letter-spacing: .08em; }
.page-menu__item:hover { background: var(--card-2); color: var(--ink); transform: none; box-shadow: none; }
.page-menu__item:active { transform: none; box-shadow: none; }
.page-menu__item .icon { width: 14px; height: 14px; color: var(--ink-3); }
.record__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.record__id { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.record__title { font-family: var(--display); font-weight: 700; font-size: clamp(23px, 3vw, 30px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0; color: var(--ink); }
.record__body { font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 65ch; }
.record__body p { margin: 0 0 14px; }
.record__body p:last-child { margin-bottom: 0; }
.record hr { border-top: 1px solid var(--rule); margin: 22px 0; }
.rec-primary .timeline { margin-top: 34px; }

/* The record page's board section: the records that reference this one,
   in their own board columns — a project's task kanban at the foot of the
   notes. A sibling of the timeline below it, so the two share the rhythm. */
.record-board { margin-top: 34px; }
.record-board__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.record-board__head .section-title { margin: 0; }
.record-board .board { padding-bottom: 4px; }
.record-board__empty { margin: 0; font-size: 13.5px; color: var(--ink-3); max-width: 65ch; }

/* Properties — the fieldgrid: stamped labels, hairline-ruled value rows. */
.props { display: grid; grid-template-columns: 130px 1fr; gap: 2px 16px; align-items: stretch; margin: 0; max-width: 60ch; }
.props dt { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.props dt .icon { color: var(--ink-3); width: 1em; height: 1em; }
.props dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); min-height: 1.55em; font-size: 13.5px; }
.props dt:last-of-type, .props dd:last-of-type { border-bottom: 0; }
.props .val-empty { color: var(--ink-3); }
.props .val-num { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 700; }
@media (max-width: 40rem) { .props { grid-template-columns: 1fr; gap: 0; } .props dt { border-bottom: 0; padding-bottom: 0; } }

.ledger-rule { border: 0; border-top: 2px solid var(--rule); margin: 44px 0 28px; }
.section-title { font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--accent-3); display: flex; align-items: baseline; gap: 8px; margin: 0 0 22px; }
.section-title .count { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: 0; }

/* ============================================================
   TIMELINE — quiet activity lines + deliberate comments (kit §13)
   ============================================================ */
.feed { max-width: 72ch; display: flex; flex-direction: column; gap: 20px; }
.feed .activity { display: flex; gap: 9px; font-size: 13px; color: var(--paper-2); align-items: baseline; }
.feed .activity .actor { color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
/* Time reads inline after the line, the same position it holds on a
   message card — the two feed voices differ in weight, not in layout. */
.feed .activity time { color: var(--paper-3); white-space: nowrap; font-family: var(--mono); font-size: 10.5px; }

/* A comment — the kit .cmt: header, text, stamped caps actions. */
.comment { max-width: 100%; }
.comment .comment-meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.comment .actor { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--paper); }
.comment .to { color: var(--paper-3); font-size: 12px; }
.comment time { font-family: var(--mono); font-size: 10px; color: var(--paper-3); }
.comment p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--paper); }
.comment .actions { display: flex; gap: 14px; margin-top: 6px; align-items: center; }
.comment .actions button, .comment .actions .button--ghost, .comment .actions a { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-3); text-decoration: none; padding: 0; background: transparent; border: 0; box-shadow: none; }
.comment .actions button:hover, .comment .actions .button--ghost:hover, .comment .actions a:hover { color: var(--accent-2); transform: none; box-shadow: none; background: transparent; }
/* Unbroken runs (long words, URLs, ids) wrap instead of escaping the card. */
.comment p, .msg__body p { overflow-wrap: anywhere; }
.comment-tombstone { font-size: 13px; color: var(--paper-3); font-style: italic; }
.comment-edit { font-family: var(--mono); font-size: 10px; color: var(--paper-3); }

/* Replies nest one level under their root. */
.replies { margin-top: 14px; padding-left: 15px; border-left: 2px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.replies:empty { display: none; }

/* The record page's timeline is the same conversation surface chat uses —
   message cards, day dividers, quiet activity lines — one look everywhere. */
.timeline .feed { max-width: none; gap: 13px; }
.timeline .feed > .activity { color: var(--paper-3); }
.timeline .feed > .activity .actor { color: var(--paper-2); }

/* Rail: context that recedes — files — as quiet side cards. */
.rec-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.railcard { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; }
.railcard .filelist, .railcard .attach-form { max-width: none; }
.railcard .attach-form { flex-wrap: wrap; margin-top: 0; }
.railcard .filelist + .attach-form { margin-top: 12px; }

/* Composer — comment on this record. */
.composer { max-width: 72ch; margin-top: 28px; }
.composer label { display: block; margin-bottom: 8px; }
.composer .composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 8px; }

/* ============================================================
   FILES — attachment rows (kit §11)
   ============================================================ */
.filelist { max-width: 72ch; display: flex; flex-direction: column; gap: 8px; }
.fitem { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; background: var(--card-2); color: var(--ink); border: 1px solid var(--rule); padding: 9px 11px; }
.fitem .fico { width: 30px; height: 30px; display: grid; place-items: center; background: var(--card-3); color: var(--accent-3); }
.fitem .fico .icon { width: 15px; height: 15px; }
.fitem .fn a { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--ink); }
.fitem .fsz { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

/* Link edges on the record page (#13) — same species of rail row as a file:
   the far record's facet icon and title, the raw edge kind in mono beside it,
   the arrow pointing the way the edge does. */
.linkgroup + .linkgroup { margin-top: 14px; }
.linkgroup__title { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.linklist { display: flex; flex-direction: column; gap: 8px; }
.litem { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; background: var(--card-2); color: var(--ink); border: 1px solid var(--rule); padding: 9px 11px; }
.litem .lico { width: 30px; height: 30px; display: grid; place-items: center; background: var(--card-3); color: var(--accent-3); }
.litem .lico .icon { width: 15px; height: 15px; }
.litem .ln, .litem .ln a { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--ink); }
.litem .lkind { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

/* The add-link picker: the + Link button at rest; opened, one search box
   over the FTS index with pick rows beneath (entity_links#new). */
.add-link { display: block; }
.linkgroup + .add-link { margin-top: 12px; }
.add-link__form { display: flex; gap: 8px; }
.add-link__form input { flex: 1 1 auto; min-width: 0; }
.add-link .linklist { margin-top: 10px; }
.add-link__none { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }
.add-link__cancel { display: inline-block; margin-top: 10px; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.add-link__cancel:hover { color: var(--ink); }
.attach-form { max-width: 72ch; display: flex; align-items: center; gap: 11px; margin-top: 11px; }

/* ============================================================
   BOARD — the kit kanban (§10); a Croft view of the same records
   ============================================================ */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.board__col { flex: 0 0 246px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.board__col-head { display: flex; align-items: center; justify-content: space-between; }
.board__col-head h2, .board__col-head .board__col-name { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.board__col-head .num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.board__cards { display: flex; flex-direction: column; gap: 10px; min-height: 46px; }
.board__divider { flex: 0 0 2px; align-self: stretch; background: var(--rule); }
.board__col--closed { opacity: .72; }

/* The board card — a click target at rest, raised on magenta when hovered,
   armed on cobalt while held for dragging (board_drag). */
.card { background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-in); padding: 11px; display: flex; flex-direction: column; gap: 9px; transition: transform .1s, box-shadow .1s, border-color .14s; cursor: pointer; }
a.card { text-decoration: none; }
.board .card { user-select: none; }
.card:hover { border-color: var(--accent-2); box-shadow: 3px 3px 0 var(--accent-2); transform: translate(-1px,-1px); }
.card--dragging, .card--dragging:hover { cursor: grabbing; border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent); transform: translate(-2px,-2px); }
.card__title, a.card__title { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink); font-weight: 400; text-decoration: none; }
.card a { text-decoration: none; }
.card__facts { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 0; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
/* The no-drag fallback stays out of the way until the card is engaged —
   hover or keyboard focus reveals it; open, it stays. */
.card__move { visibility: hidden; }
.card:hover .card__move, .card:focus-within .card__move, .card__move[open] { visibility: visible; }
.card__move summary { font-size: 11px; color: var(--ink-3); cursor: pointer; font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card__move-form { display: flex; gap: 6px; margin-top: 6px; }

/* ============================================================
   CHAT — bubbles on the ground, honest attribution (kit §13,
   minus mine-vs-theirs: every message names its author)
   ============================================================ */
/* Stretched columns for the same reason as .rec-grid: the thread column
   spans the page so the sticky panel inside it rides the scroll. */
.chat-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 60rem) { .chat-page--threaded { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); } }
.thread-col { min-width: 0; }

.chat { display: flex; flex-direction: column; gap: 13px; }
.chat__head { position: relative; border-bottom: var(--bd) solid var(--line-ground); padding-bottom: 14px; margin-bottom: 8px; }
.chat__head .page-menu { position: absolute; top: 0; right: 0; }
/* On the black ground the summary hover uses ground-tier fills. */
.chat__head .page-menu summary:hover, .chat__head .page-menu[open] summary { background: var(--card); color: var(--paper); }
.chat__head h1 { text-transform: uppercase; font-size: 24px; }
.chat__topic { margin: 8px 0 0; color: var(--paper-2); font-size: 12.5px; }
.chat__members { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat__older { text-align: center; margin: 0; }

/* Day dividers appear wherever a feed day-groups: chat, record pages, Pulse. */
.day-div { text-align: center; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3); display: flex; align-items: center; gap: 14px; }
.day-div::before, .day-div::after { content: ""; flex: 1; border-top: 1px solid var(--line-ground); }

.chat .feed { max-width: none; gap: 13px; }
/* A message is its own container, wearing the kit's standard treatment
   (--bd ink border, --r-card corners, --off offset shadow) on cobalt —
   the thread panel wears the same on magenta. The thread handle is a
   quiet icon in the top corner, not a caption. */
.msg { display: flex; flex-direction: column; align-self: flex-start; width: fit-content; min-width: 18rem; max-width: 84%; background: var(--card-2); color: var(--ink); border: var(--bd) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--off) var(--off) 0 var(--accent); }
.msg .comment-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 14px 0; }
.msg .actor { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); }
.msg .to { color: var(--ink-3); font-size: 12px; }
.msg time { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.msg__body { padding: 3px 14px 11px; }
.msg__body p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.msg__thread { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); text-decoration: none; }
.msg__thread .icon { width: 14px; height: 14px; }
.msg__thread .msg__replies { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.msg__thread:hover { color: var(--accent); }

.thread-panel { background: var(--card); color: var(--ink); border: var(--bd) solid var(--ink); border-radius: var(--r-card); padding: 16px; position: sticky; top: 22px; box-shadow: var(--off) var(--off) 0 var(--accent-2); }
.thread-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.thread-panel__head .section-title { margin: 0; }
.thread-panel .composer { margin-top: 14px; }
.thread-panel .comment .actor, .thread-panel .comment p, .thread-panel .comment .to { color: var(--ink); }
.thread-panel .comment time, .thread-panel .comment .to { color: var(--ink-3); }
.thread-panel .comment .actions .button--ghost, .thread-panel .comment .actions a { color: var(--ink-3); }

/* Chat composer: one compact row that grows as you type — no toolbar
   (markdown and keyboard shortcuts still format), the send arrow inline.
   The editor caps at a few lines and scrolls past that. */
.composer--chat { margin-top: 8px; max-width: none; display: flex; gap: 8px; align-items: flex-end; }
.composer--chat textarea { resize: none; }
/* Overflow lives on the CONTENT, never the editor host — the @-prompt
   menu is absolutely positioned inside the host, and an overflow there
   clips the menu into invisibility. */
.composer--chat lexxy-editor { --lexxy-editor-rows: 1lh; min-width: 0; }
.composer--chat lexxy-editor .lexxy-editor__content { max-height: 9lh; overflow-y: auto; }

/* The @-prompt menu wears the kit container treatment; lexxy's own rules
   are :where()-scoped, so these win. Wide enough to read a record title. */
.lexxy-prompt-menu { background: var(--card); border: var(--bd) solid var(--ink); border-radius: var(--r-in); box-shadow: 3px 3px 0 var(--accent); max-inline-size: min(46ch, calc(100% - var(--lexxy-prompt-offset-x))); }
.composer--chat .composer-actions { margin-top: 0; flex: none; }
.composer-send { padding: 0; width: 36px; height: 36px; box-shadow: 3px 3px 0 var(--ink); }
.composer-send:hover { box-shadow: 4px 4px 0 var(--ink); }
.composer-send .icon { width: 16px; height: 16px; }

/* ============================================================
   IN-PLACE EDITING — every field swaps display ↔ one-field form
   ============================================================ */
turbo-frame { display: contents; }
.field-edit { position: relative; }
.field-edit--live { cursor: pointer; }
.field-edit__value { min-width: 0; }
.field-edit__link { color: var(--paper-3); line-height: 0; text-decoration: none; opacity: 0; transition: opacity .12s; }
.field-edit__link .icon { width: 1em; height: 1em; vertical-align: -.1em; }
.field-edit:hover .field-edit__link, .field-edit__link:focus-visible { opacity: 1; }
.field-edit__link:hover { color: var(--accent); }
.field-edit--body { display: block; }
.field-edit--body .field-edit__value { display: block; }
h1.field-edit .field-edit__link .icon, .record__title .field-edit__link .icon { width: .55em; height: .55em; }

.field-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-form input, .field-form select, .field-form textarea { margin: 0; width: auto; flex: 1 1 12ch; }
/* The title keeps its size while editing so nothing on the page jumps. */
.field-form--title { margin: 0 0 22px; }
.field-form--title input { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; width: 100%; flex-basis: 100%; }
.field-form--title, .field-form--body { align-items: stretch; flex-direction: column; }
.field-form--body textarea, .field-form--body lexxy-editor { width: 100%; font-size: 15px; line-height: 1.65; }

/* ============================================================
   LEXXY (rich text) — wears the house tokens; gem CSS untouched
   ============================================================ */
:root {
  --lexxy-color-canvas: var(--card-2);
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--ink-2);
  --lexxy-color-link: var(--accent);
  --lexxy-color-ink: var(--ink);
  --lexxy-color-ink-medium: var(--ink-2);
  --lexxy-color-ink-light: var(--ink-3);
  --lexxy-color-ink-lighter: var(--rule);
  --lexxy-color-ink-lightest: var(--card-3);
  --lexxy-color-ink-inverted: var(--card);
  --lexxy-color-code-bg: var(--card-3);
  --lexxy-color-selected: var(--card-3);
  --lexxy-color-selected-hover: var(--rule);
  --lexxy-font-base: var(--sans);
  --lexxy-font-mono: var(--mono);
  --lexxy-radius: var(--r-in);
  --lexxy-focus-ring-color: var(--focus);
  --lexxy-shadow: 0 0 0 1px var(--rule);
}
lexxy-editor { width: 100%; font-size: 15px; line-height: 1.65; }
.field-form--body lexxy-editor { min-height: 8lh; }

/* The editor's own toolbar buttons are the gem's — undo the app button voice. */
lexxy-editor button, lexxy-toolbar button {
  font-family: var(--sans); font-size: inherit; letter-spacing: 0; text-transform: none;
  background: transparent; color: var(--ink-2); border: 0; border-radius: var(--r-in);
  padding: 6px; box-shadow: none;
}
lexxy-editor button:hover, lexxy-toolbar button:hover { transform: none; box-shadow: none; background: var(--card-3); color: var(--ink); }
lexxy-editor button:active, lexxy-toolbar button:active { transform: none; box-shadow: none; }