/* The intake module's visual identity (designs/intake-ui-parity.md UP1/UP2):
   the perception-intake prototype's index.css, ported with every rule scoped
   under .intake so the shell and the other sections are untouched. The :root
   token block became .intake tokens; body became the .intake container. Fonts are self-hosted latin
   subsets in /fonts (CSP stays 'self'). Class vocabulary is the prototype's
   own -- the React port renders the same names, so this file stays a near-
   verbatim port rather than a reinterpretation. The theme is PINNED to the
   OG dark palette (see the token block) — no prefers-color-scheme flip. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/archivo-800.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
}

/* the shell caps its content column at 1100px (.wrap) — right for the
   record pages, wasteful for the intake board's eleven columns. While the
   intake module is mounted, the wrap releases the cap and the page fills
   the window (per Lewis, Aug 31); every other section keeps the cap. */
.wrap:has(.intake) { max-width: none; }

/* the container itself: what the prototype's body provided */
.intake {
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-weight: 450;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  border-radius: 12px;
  padding: 0 16px 24px;
  margin-top: 4px;
}
/* Perception Intake — app styles. Carries the same visual identity as the
   design docs: Archivo / IBM Plex, and the OD/OA/OR accent colors. ONE
   deliberate theme (UP1 amended): the OG dark palette, pinned. The module
   used to flip on prefers-color-scheme while the shell pinned color-scheme
   light — browser auto-darkening then produced half-inverted, unreadable
   rows (white card, pale ink). Deterministic tokens + color-scheme: dark on
   the subtree end that class of bug. */
.intake {
  /* "only" also shields this dark island from browser auto-darkening;
     the bare declaration first for browsers without "only" (PR #93) */
  color-scheme: dark;
  color-scheme: only dark;
  --ground: #0c121d;
  --surface: #141c2a;
  --surface-2: #1a2434;
  --ink: #e8edf6;
  --muted: #98a3b8;
  --faint: #6e7a8e;
  --line: #26314a;
  --line-strong: #33405c;
  --accent: #7ca2ed;
  --accent-ink: #9dbaf3;
  --od: #5c97fa;
  --oa: #dda152;
  --or: #4cbba2;
  --admin: #b589e4;
  --danger: #e8776f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  --radius: 12px;
}
.intake {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-weight: 450;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* --- top bar --- */
.intake .topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 36px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.intake .brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.intake .brand .mark {
  font-size: 18px;
}
.intake .brand .name {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.intake .brand .tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.intake .topbar .spacer {
  flex: 1;
}
/* --- role switcher --- */
.intake .roleswitch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intake .roleswitch label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.intake .roleswitch select {
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}
.intake .badge {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.intake .badge.admin {
  color: var(--admin);
  background: color-mix(in srgb, var(--admin) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--admin) 32%, transparent);
}
.intake .badge.submitter {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
/* --- layout --- */
.intake .main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 36px) 80px;
}
/* Data-dense views (dashboard, teams) use more of the screen, still with margins. */
.intake .main.wide {
  max-width: 1400px;
}
.intake .page-head h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.intake .page-head p {
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 62ch;
}
/* the scope selector (MD12-c): quiet, but always on the board — the org-wide
   view has to be reachable from where the reader already is */
.intake .scope-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}
.intake .scope-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* the Domain column reads as a label, not as data to scan past */
.intake .domain-cell {
  font-weight: 600;
  white-space: nowrap;
}
.intake .groom-card-domain {
  font-weight: 700;
  color: var(--accent-ink);
}
/* the all-domains board's own board/groom toggle */
.intake .intake-allbar {
  margin: 0 0 16px;
}
/* --- stat strip --- */
.intake .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.intake .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  box-shadow: var(--shadow);
}
.intake .stat .k {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.intake .stat .v {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.intake .stat .sub {
  font-size: 12.5px;
  color: var(--muted);
}
/* --- cards --- */
.intake .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.intake .card .card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.intake .card .card-head h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}
.intake .card .card-head .count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--faint);
  margin-left: auto;
}
.intake .card .card-body {
  padding: 18px;
}
/* --- empty state --- */
.intake .empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--muted);
}
.intake .empty .big {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
}
.intake .empty .phase {
  display: inline-block;
  margin-top: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px;
  padding: 4px 12px;
}
/* --- tables --- */
.intake .table-wrap {
  overflow-x: auto;
}
.intake table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
.intake th,
.intake td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.intake th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.intake tbody tr:last-child td {
  border-bottom: none;
}
.intake .market {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
/* sortable headers */
.intake .th-sort {
  font: inherit;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.intake .th-sort:hover {
  color: var(--ink);
}
.intake .th-sort.active {
  color: var(--accent-ink);
}
.intake .th-arrow {
  font-size: 9px;
  opacity: 0.7;
}
.intake .th-sort:not(.active) .th-arrow {
  opacity: 0.35;
}
/* shared / groomed cells */
.intake .shared-yes {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--or);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--or) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  white-space: nowrap;
}
.intake .cell-dash {
  color: var(--faint);
}
.intake .groomed-yes {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
}
.intake .groomed-no {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--oa);
}
/* delivery-chain progress (dashboard cell) */
.intake .dc-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}
.intake .dc-bar {
  width: 46px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  flex: none;
}
.intake .dc-fill {
  height: 100%;
  background: var(--or);
  border-radius: 999px;
}
.intake .dc-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
}
/* delivery-chain (drawer) */
.intake .delivery-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.intake .delivery-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.intake .delivery-fill {
  height: 100%;
  background: var(--or);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.intake .delivery-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.intake .delivery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.intake .delivery-list li {
  font-size: 13.5px;
  color: var(--muted);
}
.intake .delivery-list li.on {
  color: var(--ink);
}
.intake .delivery-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.intake .delivery-list input {
  accent-color: var(--or);
}
.intake .dl-mark {
  font-family: "IBM Plex Mono", monospace;
  color: var(--or);
}
/* --- RAG health --- */
.intake .health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.intake .health-dot.green { background: var(--or); }
.intake .health-dot.amber { background: var(--oa); }
.intake .health-dot.red { background: var(--danger); }
.intake .health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}
.intake .health-badge.green { color: var(--or); }
.intake .health-badge.amber { color: var(--oa); }
.intake .health-badge.red { color: var(--danger); }
/* rollup RAG bar */
.intake .rag {
  display: inline-flex;
  gap: 4px;
}
.intake .rag-seg {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
}
.intake .rag-seg.red { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.intake .rag-seg.amber { color: var(--oa); background: color-mix(in srgb, var(--oa) 15%, transparent); }
.intake .rag-seg.green { color: var(--or); background: color-mix(in srgb, var(--or) 15%, transparent); }
.intake .rag-seg.unset { color: var(--faint); background: var(--surface-2); }
.intake .rollup-total td {
  border-top: 2px solid var(--line-strong);
  background: var(--surface-2);
}
/* --- audit log --- */
.intake td.mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.intake .audit-kind {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.intake .audit-kind.new { color: var(--or); border-color: color-mix(in srgb, var(--or) 35%, transparent); }
.intake .audit-kind.tracking { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.intake .audit-kind.delivery { color: var(--or); }
.intake .audit-kind.curation { color: var(--oa); border-color: color-mix(in srgb, var(--oa) 35%, transparent); }
.intake .audit-kind.stakeholder { color: var(--od); border-color: color-mix(in srgb, var(--od) 35%, transparent); }
.intake .audit-kind.comment { color: var(--admin); border-color: color-mix(in srgb, var(--admin) 35%, transparent); }
.intake .audit-val {
  font-size: 13px;
  color: var(--muted);
}
.intake .audit-val b {
  color: var(--ink);
}
/* --- misc --- */
.intake .loading,
.intake .error {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}
.intake .error {
  color: var(--danger);
}
.intake details.diag {
  margin-top: 24px;
}
.intake details.diag summary {
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.04em;
}
.intake details.diag[open] summary {
  margin-bottom: 12px;
}
/* --- top nav --- */
.intake .topnav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.intake .navbtn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.intake .navbtn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.intake .navbtn.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
/* the bar's ONE call to action (per Lewis, Sep 6): + New capability is where
   actual input happens, so it reads as a filled button while About/Dashboard
   stay quiet text. Active state deepens rather than falling back to the
   ghost treatment, so it never looks "switched off" while you're on it. */
.intake .navbtn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.intake .navbtn.primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  border-color: color-mix(in srgb, var(--accent) 85%, #000);
  color: #fff;
}
.intake .navbtn.primary.active {
  background: color-mix(in srgb, var(--accent) 78%, #000);
  border-color: color-mix(in srgb, var(--accent) 78%, #000);
  color: #fff;
}
/* nav dropdown (Reports) */
.intake .nav-menu {
  position: relative;
}
.intake .nav-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intake .nav-dropdown button {
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.intake .nav-dropdown button:hover {
  background: var(--surface-2);
}
.intake .nav-dropdown button.on {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* --- buttons --- */
.intake .btn {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.intake .btn {
  color: #0c121d;
}
.intake .btn:hover {
  filter: brightness(1.05);
}
.intake .btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.intake .btn.small {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 8px;
}
.intake .btn.ghost {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--line-strong);
}
/* --- feature row tags --- */
/* The BASE carries a neutral chip (MD11-g). Only od/oa/or had colours, so
   every one of the other area ids across the six later domains rendered as
   bare text. The three perception colours still override below — the
   prototype's identity is kept, it just is not the only case any more.
   Long ids (CAPABILITY-PRIORITIZATION, DIAGNOSTICS-TELEMETRY) are capped so
   one chip cannot blow out the Area column. */
.intake .area-chip {
  display: inline-block;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 26%, transparent);
}
.intake .area-chip.od {
  color: var(--od);
  background: color-mix(in srgb, var(--od) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--od) 30%, transparent);
}
.intake .area-chip.oa {
  color: var(--oa);
  background: color-mix(in srgb, var(--oa) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oa) 30%, transparent);
}
.intake .area-chip.or {
  color: var(--or);
  background: color-mix(in srgb, var(--or) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
.intake .feat-name {
  font-weight: 500;
}
.intake .feat-tags {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}
.intake .tinytag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.intake .tinytag.shared {
  color: var(--or);
  border-color: color-mix(in srgb, var(--or) 35%, transparent);
}
.intake .tinytag.ml {
  color: var(--admin);
  border-color: color-mix(in srgb, var(--admin) 35%, transparent);
}
.intake .tinytag.archived {
  color: var(--faint);
  border-color: var(--line-strong);
}
.intake .tinytag.epic {
  color: var(--od);
  border-color: color-mix(in srgb, var(--od) 35%, transparent);
}
.intake .tinytag.committed {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* --- priority score --- */
.intake .score-strip {
  grid-column: 1 / -1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.intake .score-big {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
}
.intake .score-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.intake .score-meta b {
  color: var(--accent-ink);
}
/* hover-help affordance */
.intake th[title],
.intake .stat[title],
.intake .f-check[title],
.intake .score-strip[title],
.intake .drawer-section h3[title] {
  cursor: help;
}
/* QH5 (intake-queue-help.md): a dotted underline on the label, so the
   reader can see the hover is there before trying it */
.intake th[title] .th-sort,
.intake .stat[title] .k,
.intake .f-check[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.intake .committed-pill {
  color: var(--accent-ink);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.intake .score-cell {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--ink);
}
.intake .check-inline {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.intake .check-inline input {
  accent-color: var(--accent);
}
/* --- form --- */
.intake .form-wrap {
  max-width: 640px;
}
.intake .link-back {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.intake .link-back:hover {
  color: var(--ink);
}
.intake .form-wrap h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.intake .form-intro,
.intake .dedup-intro {
  color: var(--muted);
  margin: 0 0 24px;
}
.intake .section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  margin: 0 0 20px;
}
.intake .section legend {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 0 8px;
  color: var(--ink);
}
.intake .section-blurb {
  color: var(--faint);
  font-size: 13px;
  margin: 0 0 16px;
}
.intake .field {
  margin-bottom: 16px;
}
.intake .field > label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
}
.intake .req-star {
  color: var(--oa);
  margin-left: 3px;
}
.intake .field select,
.intake .field input[type="text"],
.intake .field input[type="date"],
.intake .field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}
.intake .field textarea {
  resize: vertical;
}
.intake .field.has-error select,
.intake .field.has-error input,
.intake .field.has-error textarea {
  border-color: var(--danger);
}
.intake .field-help {
  font-size: 12px;
  color: var(--faint);
  margin-top: 4px;
}
/* --- clickable help --- */
.intake .help-btn {
  margin-left: 7px;
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.intake .help-btn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.intake .help-btn.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.intake .help-box {
  margin: 6px 0 8px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.intake .help-box p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.intake .help-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.intake .help-link,
.intake .link-inline {
  font-size: 12.5px;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
}
.intake .help-link:hover {
  text-decoration: underline;
}
.intake .link-inline {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  color: var(--accent-ink);
}
.intake .link-inline:hover {
  text-decoration: underline;
}
.intake .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.intake .check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  cursor: pointer;
}
.intake .check.on {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-ink);
}
.intake .check input {
  accent-color: var(--accent);
}
.intake .form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.intake .form-err {
  color: var(--danger);
  font-size: 13px;
}
/* --- dedup / similar step --- */
.intake .cand-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.intake .cand {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 15px 17px;
}
.intake .cand-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.intake .cand-name {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.intake .cand-score {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--faint);
}
.intake .cand-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}
.intake .cand-desc {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}
.intake .cand-actions {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}
.intake .dedup-foot {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
/* --- filters --- */
.intake .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.intake .f-search,
.intake .f-select {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.intake .f-search {
  flex: 1;
  min-width: 160px;
}
.intake .f-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}
.intake .f-check input {
  accent-color: var(--accent);
}
.intake .f-clear {
  font: inherit;
  font-size: 13px;
  background: none;
  border: none;
  color: var(--accent-ink);
  cursor: pointer;
}
.intake .f-clear:hover {
  text-decoration: underline;
}
/* --- view toggle --- */
.intake .view-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  margin-left: auto;
}
.intake .view-toggle button {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: none;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.intake .view-toggle button.on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
}
.intake .card-head .btn.small {
  margin-left: 10px;
}
.intake .export-menu {
  position: relative;
  margin-left: 10px;
}
.intake .export-menu .btn.small {
  margin-left: 0;
}
.intake .export-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intake .export-dropdown-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 4px 8px 6px;
}
.intake .export-dropdown button {
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.intake .export-dropdown button:hover {
  background: var(--surface-2);
}
.intake .row-click {
  cursor: pointer;
}
.intake .row-click:hover td {
  background: var(--surface-2);
}
/* the open effort's row (intake-drawer-stepping.md DS5) */
.intake .row-open td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.intake .row-open td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
/* --- roadmap --- */
/* One row of phase lanes; scroll horizontally when the viewport is too narrow
   to show them all (never wraps). The wider dashboard column (.main.wide) means
   all lanes fit without scrolling on a normal screen. */
.intake .roadmap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 12px;
  overflow-x: auto;
  align-items: start;
}
.intake .lane {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 120px;
}
.intake .lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.intake .lane-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--faint);
}
.intake .lane-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intake .lane-empty {
  color: var(--faint);
  text-align: center;
  padding: 10px;
}
.intake .rmcard {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  width: 100%;
}
.intake .rmcard:hover {
  border-color: var(--line-strong);
}
.intake .rmcard-top {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.intake .rmcard-name {
  font-weight: 500;
  font-size: 13.5px;
}
.intake .rmcard-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.intake .rmcard-dates {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--accent-ink);
  margin-top: 4px;
}
/* grooming actions in the drawer */
.intake .groom-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.intake .groom-hint {
  font-size: 12px;
  color: var(--faint);
}
.intake .btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.intake .btn.danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  filter: none;
}
/* --- detail drawer --- */
.intake .drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 26, 0.42);
  display: flex;
  justify-content: flex-end;
  z-index: 50;
}
.intake .drawer {
  width: min(560px, 94vw);
  max-width: 100vw;
  background: var(--ground);
  height: 100%;
  overflow-y: auto;
  padding: 26px 26px 60px;
  position: relative;
  border-left: 1px solid var(--line-strong);
}
.intake .drawer-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  z-index: 2;
}
.intake .drawer-resize::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.12s ease;
}
.intake .drawer-resize:hover::after {
  background: var(--accent);
}
.intake .drawer-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
}
/* Previous / Next through the queue (intake-drawer-stepping.md DS3): a slim
   bar at the top, clear of the ✕ */
.intake .drawer-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px 40px 6px 0;
}
.intake .step-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.intake .step-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.intake .step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.intake .step-pos {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  min-width: 64px;
  text-align: center;
}
.intake .drawer-head {
  margin-bottom: 8px;
}
.intake .drawer-head h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 8px 0 4px;
}
.intake .drawer-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.intake .drawer-section {
  margin-top: 22px;
}
.intake .drawer-section h3 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.intake .section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0 0 6px;
  margin: 0 0 10px;
  cursor: pointer;
  text-align: left;
}
.intake .section-toggle:hover {
  color: var(--ink);
}
.intake .section-chevron {
  font-size: 9px;
  width: 10px;
  color: var(--muted);
}
.intake .kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.intake .kv.wide {
  grid-column: 1 / -1;
}
.intake .kv-k {
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 2px;
}
.intake .kv-v {
  font-size: 14px;
  color: var(--ink);
}
/* a section's one-line purpose (QH6): readable, quieter than the values */
.intake .section-lead {
  font-size: 13px;
  color: var(--muted);
  margin: -2px 0 12px;
  max-width: 80ch;
}
.intake .kv-note {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--faint);
  font-style: italic;
}
/* FR5: each +1 a card — badge, team, note, stamp */
.intake .plus-one-reach { margin: 0 0 6px; font-size: 14px; color: var(--ink); font-weight: 600; }
.intake .plus-one-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.intake .plus-one-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  padding: 10px 12px;
}
.intake .plus-one-head { display: flex; align-items: center; gap: 8px; }
.intake .plus-one-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.intake .plus-one-team { font-size: 14px; }
.intake .plus-one-withdraw { margin-left: auto; }
.intake .plus-one-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); }
.intake .plus-one-stamp { margin: 4px 0 0; font-size: 12px; color: var(--faint); }
.intake .plus-one-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
/* --- discussion --- */
.intake .comments {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intake .comments li {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
}
.intake .c-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.intake .c-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--faint);
}
.intake .c-body {
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 3px;
  white-space: pre-wrap;
}
.intake .comment-compose textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.intake .compose-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.intake .notify-label {
  font-size: 12px;
  color: var(--faint);
  margin-left: auto;
}
.intake .notify-btn {
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 10px;
}
.intake .notify-btn:hover {
  border-color: var(--accent);
}
/* admin tracking editor */
.intake .track-edit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.intake .track-edit label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.intake .track-edit label.wide {
  grid-column: 1 / -1;
}
.intake .track-edit select,
.intake .track-edit input,
.intake .track-edit textarea {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.intake .track-edit .btn {
  grid-column: 1 / -1;
  justify-self: start;
}
/* audit history */
.intake .history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intake .history li {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
.intake .h-field {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--accent-ink);
  letter-spacing: 0.04em;
}
.intake .h-change {
  font-size: 13.5px;
}
.intake .h-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--faint);
}
/* --- manage teams --- */
.intake .add-team {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.intake .add-team input {
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}
.intake .add-team input:first-child {
  flex: 1;
  min-width: 220px;
}
.intake .cell-edit {
  font: inherit;
  font-size: 13.5px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  width: 100%;
}
.intake .cell-edit:hover {
  border-color: var(--line);
}
.intake .cell-edit:focus {
  border-color: var(--line-strong);
  background: var(--surface-2);
  outline: none;
}
.intake .row-retired {
  opacity: 0.5;
}
/* --- about page --- */
.intake .about {
  max-width: 760px;
}
.intake .about-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.intake .about-tab {
  font: inherit;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.intake .about-tab:hover {
  color: var(--ink);
}
.intake .about-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
/* management-tool capability blocks */
.intake .cap-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.intake .cap-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.intake .cap-block h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
}
.intake .cap-what {
  margin: 0 0 8px;
  font-size: 14.5px;
}
.intake .cap-why {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.intake .cap-why-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-right: 6px;
}
.intake .about-h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.intake .about-lead {
  color: var(--muted);
  margin-bottom: 16px;
}
.intake .about-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.intake .about-job {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow);
}
.intake .about-job h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin: 9px 0 6px;
}
.intake .about-job p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.intake .about-note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 18px 0;
}
.intake .about-note p {
  margin: 0 0 12px;
}
/* the shared story's lifecycle (AB6): four numbered stages, read in order */
.intake .about-lifecycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.intake .about-stage {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.intake .about-stage h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--accent-ink);
}
.intake .about-stage p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
/* AB7 — the carve-out reads as a caveat, not as another stage: two of the
   seven domains do not run the pipeline described above it */
.intake .about-exception {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn, #d98324);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 18px 0;
}
.intake .about-exception h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
.intake .about-exception p {
  margin: 0 0 8px;
}
.intake .about-exception-who {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0 !important;
}
.intake .about-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.intake .ref-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.intake .ref-card:hover {
  border-color: var(--accent);
}
.intake .ref-label {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent-ink);
}
.intake .ref-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
.intake .about-cta {
  margin-top: 30px;
}
/* phase: original-requested vs admin roadmap */
.intake .phase-req {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 2px;
}
.intake .track-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  color: var(--faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* who-am-I chip (UP3): replaces the prototype's Acting-as switcher — Hermes
   identity is real, so this only states it */
.intake .whoami {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--surface-2);
}
.intake .whoami-role { color: var(--admin); font-weight: 600; }

/* ── WS3 screens re-skinned for the dark island (Lewis, Aug 31) ──
   CaptureForm, Groom, and the board table keep their hermes-era classnames,
   which styles.css paints for the LIGHT shell — inside .intake those rules
   made a white table with pale ink (the unreadable-rows bug) and light form
   fields on dark ground. These higher-specificity overrides re-home them on
   the OG tokens; styles.css is untouched (release surface indifferent). */

.intake .intake-board { background: var(--surface); }
/* the shell paints .card-head with a light gradient (styles.css section
   cards) — inside the island the head sits on the card's own surface */
.intake .card .card-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.intake .intake-board th { color: var(--faint); }
.intake .intake-board th,
.intake .intake-board td { border-bottom: 1px solid var(--line); }
.intake .intake-board tbody tr:hover td { background: var(--surface-2); }

.intake .intake-tab { color: var(--muted); }
.intake .intake-tab:hover { color: var(--ink); }
.intake .intake-tab.selected { color: var(--accent-ink); border-bottom-color: var(--accent); }
.intake .intake-tab .intake-tab-sub { color: var(--faint); }
.intake .intake-tab.locked .intake-tab-sub { color: var(--danger); }
.intake .intake-tabs { border-bottom-color: var(--line); }

.intake .area-note {
  background: rgba(232, 119, 111, 0.08);
  border-left-color: var(--danger);
  color: var(--muted);
}

.intake .capture-field > span,
.intake .capture-field > label > span { color: var(--muted); }
.intake .capture-field select,
.intake .capture-field input,
.intake .capture-field textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
.intake .capture-check {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
.intake .capture-check.on {
  background: rgba(124, 162, 237, 0.16);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.intake .capture-ml { border-color: var(--line); border-left-color: var(--accent); }
.intake .capture-submit,
.intake .capture-candidate button { background: var(--accent); color: #0c121d; }
.intake .capture-notdup {
  background: var(--surface);
  color: var(--accent-ink);
  border-color: var(--line-strong);
}
.intake .capture-error {
  color: #ffb4ac;
  border-left-color: var(--danger);
  background: rgba(232, 119, 111, 0.12);
}
.intake .capture-notice {
  color: #8fe3b0;
  border-left-color: #2f9e63;
  background: rgba(47, 158, 99, 0.14);
}
.intake .capture-similar {
  background: var(--surface-2);
  border-color: var(--line);
  border-left-color: var(--accent);
}
.intake .capture-candidate { background: var(--surface); border-color: var(--line); }
.intake .capture-candidate-meta { color: var(--faint); }
.intake .capture-candidate-desc { color: var(--muted); }
.intake .capture-loading { color: var(--muted); }

.intake .groom-lane { background: var(--surface-2); border-color: var(--line); }
.intake .groom-lane-head { border-bottom-color: var(--line); }
.intake .groom-lane-head span { color: var(--faint); }
.intake .groom-card { background: var(--surface); border-color: var(--line); }
.intake .groom-card:hover { border-color: var(--accent); }
.intake .groom-card span { color: var(--muted); }
/* IG11 / DS5: the open effort's card on the Board view, like .row-open */
.intake .groom-card.card-open {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
/* IG9: what a card lacks, in the not-recorded red */
.intake .groom-card .gap-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.intake .groom-card .gap-chip {
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.intake .groom-editor {
  background: var(--surface);
  border-color: var(--line);
  border-left-color: var(--accent);
}
/* IG8: the editor lives in the effort's drawer, which is its frame — no
   card-in-a-card (the drawer is [data-intake-drawer]; Copilot on #151) */
.intake [data-intake-drawer] .groom-editor {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.intake [data-intake-drawer] .intake-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.intake [data-intake-drawer] .intake-drawer-head h3 {
  font-family: "Archivo", sans-serif;
  font-size: 20px;
  margin: 0 0 8px;
}
.intake [data-intake-drawer] .intake-drawer-head button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
/* QH8: the How to groom steps, numbered */
.intake .concept-body ol { margin: 0 0 8px; padding-left: 20px; color: var(--ink); }
.intake .concept-body ol li { margin: 4px 0; }
.intake .groom-score {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
}
.intake .intake-drawer-head button { color: var(--muted); }

/* ── "View as submitter" preview (UP11) ── */
/* the admin's chip is the switcher: keep the chip look on the trigger and
   hang the menu off the right edge */
.intake .whoami-menu .navbtn {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--surface-2);
  font-weight: 500;
}
.intake .whoami-menu .navbtn.active {
  border-color: var(--oa);
  color: var(--oa);
  background: transparent;
}
.intake .whoami-menu .nav-dropdown {
  left: auto;
  right: 0;
}
/* the persistent strip while previewing — amber, never alarming-red */
.intake .preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 4px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--oa);
  background: color-mix(in srgb, var(--oa) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--oa) 45%, transparent);
  border-radius: 9px;
}
.intake .preview-banner button {
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* ── the drawer's edit affordance + charter link (UP12/IDM9) ── */
.intake .drawer-edit {
  margin: 0 0 0 auto;
  align-self: flex-start;
  font-size: 13px;
  padding: 6px 14px;
}
.intake .drawer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intake .charter-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.intake .charter-link-row .cell-edit { flex: 1; max-width: 480px; }
.intake .charter-link-row a { color: var(--accent-ink); word-break: break-all; }

/* the queue's routing cell (intake-unified-form.md UF6) in the honest-states
   vocabulary: red = nobody owns it yet (not recorded), orange = the
   requester's suggestion awaiting groom (unconfirmed), plain = routed */
.intake .owner-cell.unowned { color: var(--danger); font-weight: 600; }
.intake .owner-cell.suggested { color: var(--warn, #d98324); }

/* pick-or-add pickers (intake-unified-form.md UF15/UF16) */
.intake .picker-menu {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  max-height: 240px; overflow-y: auto; padding: 4px;
}
.intake .picker-option { text-align: left; padding: 6px 10px; border-radius: 5px; background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); }
.intake .picker-option:hover { background: var(--surface-2); }
.intake .picker-add { color: var(--accent-ink); font-weight: 600; }
.intake .picker-sub { color: var(--faint); font-size: 12px; }
.intake .picker-group {
  padding: 6px 10px 2px; color: var(--faint); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.intake .picker-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.intake .picker-picked { display: flex; align-items: center; gap: 10px; }
.intake .picker-chip {
  display: inline-block; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--asi-blue, #009FDA); background: var(--accent-soft); color: var(--accent-ink);
}
/* the form's field hints (intake-form-help.md FH4): quiet, under the input */
.intake .capture-hint { font-size: 12.5px; line-height: 1.4; color: var(--faint); }
/* the ⓘ panel (help-layer.md HL2) on intake's dark island (FH7) — styles.css
   paints it with the light theme's tokens */
.intake .page-head .concept { margin: -14px 0 24px; }
/* the queue's three ⓘ (intake-queue-help.md QH4): one quiet row under the
   intro, each opening in place */
.intake .page-head .queue-concepts {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px;
  margin: -16px 0 22px;
}
.intake .page-head .queue-concepts .concept { margin: 0; }
.intake .concept > summary { color: var(--muted); }
.intake .concept > summary:hover,
.intake .concept[open] > summary { color: var(--ink); background: var(--surface-2); }
.intake .concept-i { color: var(--accent); }
.intake .concept-body { background: var(--surface); border-color: var(--line); border-left-color: var(--accent); }
.intake .concept-body ul { margin: 0 0 8px; padding: 0; list-style: none; color: var(--ink); }
.intake .concept-body li { margin: 3px 0; }
.intake .concept-more { color: var(--accent-ink); }
/* a field's own note (owners, a missing point of contact): note-sized, not
   body-sized, so the red reads as a flag rather than a headline */
.intake .owners-note { font-size: 13px; margin: 2px 0 0; }
/* the honest-states red for a slot nobody filled (UF16/UF17) */
.intake .not-recorded { color: var(--danger); font-weight: 600; }
/* FR1: the +1 form under Need it too? */
.intake .plus-one-form { display: grid; gap: 10px; max-width: 420px; }