/* =========================================================================
   AtlasClaw — Design System
   Atlas Claw brand: navy surfaces, bronze accent, Space Grotesk / Inter.
   Brand tokens + fonts come from atlas-claw-brand.css (imported first in
   assets/app.js). The :root block below maps this stylesheet's internal
   semantic variables onto those --ac-* tokens.
   ========================================================================= */

/* -- Reset & base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
.staging-banner {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--ac-target, #e8a317);
  color: #0b1620;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  line-height: 1.3;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-0);
  background: var(--navy-0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11', 'tnum' 1, 'zero' 1;
}
.canvas, .canvas__body, .canvas__header, .chat__scroll, .chat__thread,
.chat__empty, .composer, .composer__inner { min-width: 0; max-width: 100%; }
.chat__empty-title, .chat__empty-lede, .canvas__lede,
.card__title, .card__desc, .msg__body, .form__hint { overflow-wrap: anywhere; }
.canvas__title, .wiki-hero__title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
::selection { background: var(--ac-mark-soft); color: var(--ac-ink); }

/* Skip link. Without it a keyboard user tabbed all thirteen rail links before
   reaching the page they had just navigated to — on every navigation. Offscreen
   until focused rather than display:none, so it stays in the tab order. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ac-void);
  color: var(--ac-bone);
  border: 1px solid var(--bronze);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
  transition: top 140ms var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* Restore visible focus for keyboard / screen-reader users.
   Mouse-click :focus stays clean (no ring); :focus-visible only triggers for keyboard. */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
.chat__suggestion:focus-visible,
.btn:focus-visible,
.card--link:focus-visible,
.sidebar__nav-link:focus-visible,
.model-option:focus-within {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible,
.composer__field:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(194, 135, 62,0.25);
  border-radius: var(--radius-sm);
}

/* -- Tokens ---------------------------------------------------------------- */

:root {
  /* Surfaces — default is the dark command-deck ramp; light theme overrides
     in atlas-claw-brand.css re-point these at the bone ramp. Variable names
     are vestigial (kept to avoid sweeping component-level renames), but they
     now resolve to slate/graphite (dark) and bone/ice (light). */
  --navy-0:  var(--ac-void);          /* page background */
  --navy-1:  var(--ac-slate);         /* sidebar, primary surface */
  --navy-2:  var(--ac-slate-panel);   /* raised surfaces */
  --navy-3:  var(--ac-slate-line);    /* borders */
  --navy-4:  var(--ac-slate-line-2);  /* hover borders */

  /* Text — bone → muted on dark */
  --paper-0: var(--ac-bone);
  --paper-1: var(--ac-bone-dim);
  --paper-2: var(--ac-muted);

  /* Mark (rebel-orange) — the only hot color; signature for buttons, the
     mark, focus rings, active selection. Legacy name --bronze* preserved. */
  --bronze:        var(--ac-mark);
  --bronze-bright: var(--ac-mark-bright);
  --bronze-dim:    var(--ac-mark-deep);
  --bronze-tint:   rgba(229, 128, 47, 0.12);

  /* Live / active / success — was amber/jade/scanner, now console green.
     Variable names kept for backwards-compat; semantic role (thinking,
     tool calls, pending tasks, online state) maps to --ac-success. */
  --amber:       var(--ac-success);
  --amber-dim:   var(--ac-vector-deep);
  --amber-tint:  rgba(101, 189, 122, 0.12);
  /* --amber drawn as text. Resolves per theme (see the accent ink tier in
     atlas-claw-brand.css) — the raw green is 2.1:1 on the bone ramp. */
  --amber-ink:   var(--ac-success-ink);

  /* Danger */
  --rust:        var(--ac-danger);
  --rust-tint:   var(--ac-danger-tint);
  --rust-ink:    var(--ac-danger-ink);

  /* Type */
  --font-display:   var(--ac-font-display);
  --font-decorator: var(--ac-font-decorator);
  --font-ui:        var(--ac-font-ui);
  --font-mono:      var(--ac-font-mono);

  /* Radii — HUD geometry, minimal radius. The first three are the original
     scale; xl/2xl/pill/circle were added to cover values the component layer
     was already using as literals (6px alone appeared 28 times). Tokenising
     what exists rather than re-cornering the UI: no visual change, but the
     scale is now closed, so new work has a token to reach for instead of a
     fresh number. Steps: 2 · 3 · 4 · 6 · 8. */
  --radius-sm:     2px;
  --radius:        3px;
  --radius-lg:     4px;
  --radius-xl:     6px;    /* panels, filter chips, stat tiles */
  --radius-2xl:    8px;    /* cards, drop zones, dialogs */
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* Spacing — 4px base grid. Same rationale as the radii: these describe the
     spacing the layout already uses. Prefer them over bare px in new rules. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Type scale. app.css still carries 25 distinct font sizes including
     half-pixel values (13.5, 12.5, 11.5, …); this is the scale they should
     collapse onto. Applied to new work — a sweep of the existing component
     layer needs a visual pass, so the strays are deliberately left standing
     rather than rounded blind. */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;   /* body default for UI chrome */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;   /* .canvas__title */
  --text-4xl:  40px;

  /* Geometry */
  --sidebar-w: 240px;
  --chat-max:  720px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* -- Numeric & monospace ergonomics --------------------------------------- */

.tnum, code, kbd, .mono { font-feature-settings: 'tnum' 1, 'zero' 1; }
code, kbd, .mono { font-family: var(--font-mono); }
.smallcaps {
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--paper-2);
}

/* =========================================================================
   Layout — persistent left sidebar + main canvas
   ========================================================================= */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* -- Sidebar --------------------------------------------------------------- */

.sidebar {
  /* Asymmetric dark sidebar: hard-overrides the surface + text tokens with
     the dark ramp regardless of light/dark theme on the canvas. Every
     child rule using --navy-* or --paper-* in this scope inherits dark via
     CSS variable cascade — no per-rule rewrites needed. This is the
     "light canvas + moody sidebar" pattern (Linear, Notion). */
  --navy-0: var(--ac-void);
  --navy-1: var(--ac-slate);
  --navy-2: var(--ac-slate-panel);
  --navy-3: var(--ac-slate-line);
  --navy-4: var(--ac-slate-line-2);
  --paper-0: var(--ac-bone);
  --paper-1: var(--ac-bone-dim);
  --paper-2: var(--ac-muted);

  background: var(--navy-1);
  /* The dark ramp above only rebinds --navy-*/--paper-*; it does not set a
     text colour, so any child without an explicit `color` inherited the
     canvas ink and rendered near-black on navy (.sidebar__tenant-name was
     #0E1418 on #213040 — 1.38:1). Anchor the scope to the light ramp so the
     default is legible and children only override to go dimmer. */
  color: var(--paper-0);
  border-right: 1px solid var(--navy-3);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* The rail is taller than a short viewport once every nav section is in it
     (926px of content against a 739px window). Without this, the overflow
     painted *outside* the navy panel on the light canvas and the account
     block could only be reached by scrolling the page. Clip here; the middle
     scrolls in .sidebar__scroll so brand and footer stay pinned. */
  overflow: hidden;
}

/* Scrolling middle of the rail: brand above it, account block below it, both
   fixed. min-height:0 is required — without it a flex child refuses to shrink
   below its content and the overflow escapes again. */
.sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 18px 24px 22px;
  border-bottom: 1px solid var(--navy-3);
}
.sidebar__brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  color: inherit;
}
.sidebar__new-thread {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--paper-1);
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.sidebar__new-thread svg { width: 15px; height: 15px; opacity: 0.85; }
.sidebar__new-thread:hover { color: var(--bronze); background: var(--navy-2); }
.sidebar__new-thread:hover svg { opacity: 1; }
.sidebar__claw {
  width: 26px;
  height: 26px;
  color: var(--ac-mark);
  flex-shrink: 0;
}
.sidebar__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper-0);
}
.sidebar__wordmark-claw { color: var(--ac-mark); }

.sidebar__section {
  padding: 18px 14px 6px;
}
.sidebar__section-label {
  padding: 0 8px 8px;
}

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar__nav-item { position: relative; }
.sidebar__nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--paper-1);
  font-size: 13.5px;
  font-weight: 450;
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.sidebar__nav-link:hover {
  color: var(--paper-0);
  background: var(--navy-2);
}
.sidebar__nav-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar__nav-link[aria-current="page"] {
  color: var(--paper-0);
  background: transparent;
  font-weight: 600;
}
.sidebar__nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--ac-accent);
  border-radius: 0;
}
.sidebar__nav-link[aria-current="page"] svg {
  opacity: 1;
  color: var(--ac-accent);
}

/* Compact model picker living in the sidebar Configure section. Reads as the
   active model + a discoverable affordance to switch — clicking opens Settings
   where the actual picker lives. */
.sidebar__model-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.sidebar__model-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ac-info);
  box-shadow: 0 0 4px rgba(79, 181, 229, 0.65);
  animation: ac-holo-flicker 2.2s linear infinite;
  flex-shrink: 0;
}
.sidebar__model-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__model-link svg.sidebar__model-caret {
  width: 10px;
  height: 10px;
  color: var(--paper-2);
  flex-shrink: 0;
  opacity: 0.85;
  stroke-width: 1.5;
}
.sidebar__model-link:hover .sidebar__model-caret { color: var(--paper-0); }

.sidebar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--paper-2);
  letter-spacing: 0.04em;
}
.sidebar__count::before { content: '['; color: var(--ac-steel); margin-right: 1px; }
.sidebar__count::after  { content: ']'; color: var(--ac-steel); margin-left: 1px; }

/* Long status badges ("under development") don't fit beside the label in a
   240px rail — drop them to their own line, aligned under the label text. */
.sidebar__nav-link:has(.sidebar__count--block) { flex-wrap: wrap; }
.sidebar__count--block {
  flex-basis: 100%;
  margin-left: 27px; /* icon (16px) + gap (11px) */
  margin-top: 1px;
  font-size: 9.5px;
}

/* Chats section — dense, scrollable thread list with search, time grouping, and per-row menu */
.sidebar__section--threads {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.sidebar__search {
  padding: 0 14px 8px;
}
.sidebar__search-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--navy-3);
  border-radius: 0;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--paper-0);
  transition: border-color 100ms linear;
}
.sidebar__search-input::placeholder { color: var(--paper-2); }
.sidebar__search-input:focus {
  outline: 0;
  border-color: var(--bronze);
}
.sidebar__search-empty {
  padding: 12px 22px;
  font-size: 12.5px;
}
.sidebar__threads-wrap {
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-height: 0;
}
.sidebar__threads-wrap::-webkit-scrollbar { width: 4px; }
.sidebar__threads-wrap::-webkit-scrollbar-thumb { background: var(--navy-3); border-radius: 2px; }
.sidebar__threads-wrap::-webkit-scrollbar-thumb:hover { background: var(--navy-4); }
.sidebar__thread-group {
  margin-bottom: 6px;
}
.sidebar__thread-group .sidebar__section-label {
  padding: 8px 22px 4px;
}
.sidebar__threads {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar__thread-row {
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar__thread-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  padding-right: 28px;
  font-size: 13px;
  font-weight: 400;
}
.sidebar__thread-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sidebar__threads-empty {
  padding: 12px 22px;
  font-size: 12.5px;
}

/* Hover menu — `…` button revealed on row hover/focus, opens a popup */
.sidebar__thread-menu {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.sidebar__thread-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--paper-2);
  opacity: 0;
  transition: opacity 120ms var(--ease-out), background 120ms var(--ease-out);
}
.sidebar__thread-row:hover .sidebar__thread-menu-btn,
.sidebar__thread-menu-btn:focus-visible,
.sidebar__thread-menu-btn[aria-expanded="true"] {
  opacity: 1;
}
.sidebar__thread-menu-btn:hover {
  background: var(--navy-3);
  color: var(--paper-0);
}
.sidebar__thread-pop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 130px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 50;
}
.sidebar__thread-pop.open { display: block; }
.sidebar__thread-pop form { margin: 0; }
.sidebar__thread-pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--paper-1);
  border-radius: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sidebar__thread-pop-item:hover {
  background: var(--navy-3);
  color: var(--paper-0);
}
.sidebar__thread-pop-item--danger { color: var(--rust-ink); }
.sidebar__thread-pop-item--danger:hover { background: var(--rust-tint); color: var(--rust-ink); }

/* Archived chats footer link */
.sidebar__archived-link {
  display: block;
  padding: 10px 22px 14px;
  font-size: 12px;
  color: var(--paper-2);
  text-decoration: none;
}
.sidebar__archived-link:hover { color: var(--paper-0); }
.sidebar__archived-link[aria-current="page"] { color: var(--bronze); }

.sidebar__footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--navy-3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar__tenant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.sidebar__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze-dim), var(--navy-3));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper-0);
}
.sidebar__tenant-name { font-size: 13px; line-height: 1.2; }
.sidebar__tenant-title { font-size: 11.5px; color: var(--paper-1); margin-top: 2px; line-height: 1.2; }
.sidebar__tenant-department { font-size: 11px; color: var(--paper-2); margin-top: 1px; line-height: 1.2; }
.sidebar__tenant-role { font-size: 10.5px; color: var(--paper-2); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.sidebar__signout {
  align-self: flex-start;
  font-size: 11.5px;
  color: var(--paper-2);
  text-decoration: none;
  padding: 4px 0;
  opacity: .7;
  transition: opacity 120ms ease;
}
.sidebar__signout:hover, .sidebar__signout:focus { opacity: 1; text-decoration: underline; }
.sidebar__badge {
  margin-left: auto;
  background: var(--bronze-dim);
  color: var(--paper-0);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.sidebar__cost-chip {
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--navy-3);
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sidebar__cost-chip-label { font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); letter-spacing: 0; }
.sidebar__cost-chip-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper-0);
}

/* -- Main canvas ----------------------------------------------------------- */

.canvas {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

/* -- Brand strip (command bar) -------------------------------------------- */
/* 32px command bar across the top of the workspace: insignia + name on the
   left, tagline center-flexible, status readout right. Theme-aware — a
   heavy dark bar on a light surface reads as a flag stripe, so in light
   mode the bar is a softer steel-grey, and in dark mode it sits as a
   raised plate above the page surface. */
.brand-strip {
  height: 32px;
  background: var(--navy-2);
  color: var(--paper-0);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--navy-3);
  position: relative;
}
.brand-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 181, 229, 0.04) 50%,
    transparent 100%
  );
}
.brand-strip__sigil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 1;
}
.brand-strip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ac-mark);
  flex-shrink: 0;
}
.brand-strip__wordmark {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--paper-0);
  text-transform: none;
}
/* Build identity. `margin-left: auto` here absorbs the free space, so this and
   the status block sit together at the right edge — .brand-strip__status keeps
   its own auto margin but there is nothing left for it to push against. */
.brand-strip__version {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  z-index: 1;
  flex-shrink: 0;
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 120ms ease;
}
.brand-strip__version:hover,
.brand-strip__version:focus-visible {
  opacity: 1;
  color: var(--paper-0);
}
/* The SHA is reference detail, not something to read on every page load —
   dimmed next to the word, and dropped entirely on narrow viewports where the
   strip has no room for it. */
.brand-strip__version-sha {
  opacity: 0.6;
  font-size: 10px;
}
@media (max-width: 720px) {
  .brand-strip__version-sha { display: none; }
}

.brand-strip__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--paper-2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  flex-shrink: 0;
  z-index: 1;
}
.brand-strip__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-vector);
  box-shadow: 0 0 5px rgba(101, 189, 122, 0.45);
  animation: ac-online-pulse 2.4s ease-in-out infinite;
}
@keyframes ac-online-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.canvas__header {
  padding: 22px 36px 8px;
  display: flex;
  justify-content: space-between;
  /* flex-start, not baseline: the title block is two or three lines tall and
     the action cluster is one, so baseline alignment parked the buttons in the
     middle of the lede paragraph instead of on the title's line. */
  align-items: flex-start;
  gap: 24px;
}
.canvas__header--tight { padding-bottom: 0; }
.canvas__crumbs {
  font-size: 12px;
  /* Not --paper-2 (#6E7785): at 12px uppercase with 0.12em tracking that
     measured 4.12:1 on --ac-bone, under the 4.5:1 AA floor for small text.
     --ac-muted-paper is the same hue two steps darker — 4.75:1. */
  color: var(--ac-muted-paper);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.canvas__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
  color: var(--paper-0);
  /* Sentence case, not uppercase. Four different h1 treatments had drifted
     across the app; this is the one rule. It also stops the search results
     page shouting the user's own query back at them — /wiki/search?q=atlas
     rendered the heading as "ATLAS". Titles carry their own capitalisation
     and their own trailing period in the markup. */
  text-transform: none;
}
.canvas__title em {
  font-style: normal;
  font-weight: 500;
  /* One accent. This was --ac-info-ink (blue), which put a blue word in the
     headline of Settings, Skills, Inbox and Memory while every button, active
     nav marker and focus ring on those same pages was terra-cotta — the blue
     appeared once per page and nothing else supported it. --ac-mark-ink is the
     mark colour tuned for AA on the light ramp (4.70:1). */
  color: var(--ac-mark-ink);
}
.canvas__lede {
  margin: 8px 0 0;
  color: var(--paper-1);
  font-size: 14px;
  max-width: 60ch;
}

.canvas__body {
  flex: 1;
  padding: 26px 36px 36px;
}
.canvas__body--chat {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* =========================================================================
   Chat surface
   ========================================================================= */

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.chat__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 36px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-3) transparent;
}
.chat__scroll::-webkit-scrollbar { width: 8px; }
.chat__scroll::-webkit-scrollbar-thumb { background: var(--navy-3); border-radius: 4px; }
.chat__scroll::-webkit-scrollbar-track { background: transparent; }

.chat__thread {
  max-width: var(--chat-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat__empty {
  max-width: var(--chat-max);
  margin: 80px auto 0;
  text-align: left;
}
.chat__empty--bare { margin: 0; padding: 0; height: 0; }

/* Centered empty new-chat state — ChatGPT convention. */
.chat--empty {
  justify-content: center;
  align-items: center;
  padding: 0 36px;
}
.chat__centered {
  width: 100%;
  max-width: var(--chat-max);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Pull slightly above optical center so the composer sits at the eye-line. */
  margin-bottom: 10vh;
}
/* Optimistic user-message bubble lands here on submit (composer-attach#prepareSend);
   hidden in the pristine centered state, surfaces when the first prompt is sent. */
.chat__centered-thread {
  margin-bottom: 18px;
  max-height: 50vh;
  overflow-y: auto;
}
.chat__centered-greeting {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 120, 'SOFT' 40;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 20px;
  color: var(--paper-0);
}
.chat__starter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.chat__starter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--paper-1);
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.chat__starter-chip:hover {
  color: var(--paper-0);
  border-color: var(--navy-4);
  background: var(--navy-2);
}
.chat__starter-chip:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
.chat__empty-claw {
  width: 56px;
  height: 56px;
  color: var(--bronze);
  opacity: 0.7;
  margin-bottom: 22px;
}
.chat__empty-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: 'opsz' 120, 'SOFT' 40;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--paper-0);
}
.chat__empty-title em {
  font-style: italic;
  color: var(--bronze);
  font-weight: 400;
}
.chat__empty-lede {
  margin: 18px 0 32px;
  color: var(--paper-1);
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.6;
}

.chat__suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 600px;
}
.chat__suggestion {
  text-align: left;
  padding: 14px 16px;
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  color: var(--paper-1);
  font-size: 13.5px;
  line-height: 1.4;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
  position: relative;
}
.chat__suggestion::after {
  content: '→';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--paper-2);
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.chat__suggestion:hover {
  border-color: var(--bronze-dim);
  color: var(--paper-0);
  background: var(--navy-2);
}
.chat__suggestion:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
  color: var(--bronze);
}

/* -- Welcome surface ------------------------------------------------------- */

.canvas__body--welcome { overflow-y: auto; }
.welcome {
  max-width: var(--chat-max);
  margin: 0 auto;
  padding: 96px 16px 80px;
}
.welcome__primary {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 64px;
}
/* Sandgrain signature: small 3-band color ornament. Lifted directly from
   the reference posters' top-left affordance. Says "this is a designed
   surface, not a UI" with five lines of HTML and ten of CSS. */
.welcome__ornament {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}
.welcome__ornament-band {
  display: block;
  width: 32px;
  height: 6px;
}
.welcome__ornament-band--ink   { background: var(--paper-0); }
.welcome__ornament-band--peach { background: var(--ac-mark-soft); }
.welcome__ornament-band--terra { background: var(--ac-mark); }

.welcome__greeting {
  margin: 0 0 26px;
  display: block;
}
/* Top tier — heavy humanist sans, mixed-case (not uppercase). Carries
   the structural weight like "A New Hope" in the Sandgrouse poster
   reference. Tight tracking + tight leading. */
.welcome__greeting-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper-0);
  text-transform: none;
}
/* Bottom tier — lighter weight of the same family in the accent color.
   No italic, no serif — mid-century-modern uses weight + color contrast
   instead of italic typeface contrast. Matches the "Star Wars /"
   treatment in the reference. */
.welcome__greeting-name {
  display: block;
  font-family: var(--font-decorator);
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ac-mark);
  margin-top: 0;
}
.welcome__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
}
.welcome__chip {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--paper-0);
  border-radius: 0;
  color: var(--paper-0);
  font-size: 13px;
  line-height: 1.3;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  transition: background 100ms linear, color 100ms linear;
}
.welcome__chip:hover {
  background: var(--paper-0);
  color: var(--ac-surface-raised);
}
.welcome__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) {
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__suggestions { grid-template-columns: 1fr; }
}
.welcome__panel {
  /* Poster-flat plate: solid raised surface with a single color block at
     the top edge in the panel's role color. Reads as a WPA recruitment
     poster — pure flat color, no chrome, the stripe identifies the role. */
  --ac-edge: var(--ac-brand);
  position: relative;
  background: var(--ac-surface-raised);
  border-radius: 0;
  border-top: 4px solid var(--ac-edge);
  padding: 22px 18px 16px;
  min-width: 0;
}
.welcome__panel--skills        { --ac-edge: var(--ac-brand); }
.welcome__panel--tasks         { --ac-edge: var(--ac-brand); }
.welcome__panel--notifications { --ac-edge: var(--ac-brand); }
.welcome__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.welcome__panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--paper-0);
  margin: 0;
  text-transform: none;
}
.welcome__panel-link {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ac-mark);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  transition: color 100ms linear;
}
.welcome__panel-link:hover { color: var(--ac-accent); }
.welcome__panel-empty {
  color: var(--paper-2);
  font-size: 13px;
  margin: 4px 0 0;
}
.welcome__list { list-style: none; padding: 0; margin: 0; }
.welcome__list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--navy-3);
}
.welcome__list-item:last-child { border-bottom: 0; }
.welcome__list-item--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.welcome__list-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.welcome__list-title {
  display: block;
  font-size: 13.5px;
  color: var(--paper-0);
  line-height: 1.3;
}
.welcome__list-sub {
  display: block;
  font-size: 12px;
  color: var(--paper-2);
  margin-top: 3px;
  line-height: 1.4;
}
.welcome__list-btn:hover .welcome__list-title { color: var(--ac-accent); }

/* Skill row: small status dot in front of the name.
   Enabled = jade (--ac-success). Disabled = muted. */
.welcome__skill-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.welcome__skill-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--ac-success);
}
.welcome__skill-row--off .welcome__skill-dot { background: var(--paper-2); }
.welcome__skill-row--off .welcome__list-title { color: var(--paper-2); }
.welcome__list-item--unread .welcome__list-title { color: var(--bronze-bright); font-weight: 500; }
.welcome__pill {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--paper-2);
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.welcome__pill--done    { color: var(--paper-0); background: var(--navy-3); }
.welcome__pill--failed  { color: #ffb4a8; background: rgba(255,90,70,.12); border-color: rgba(255,90,70,.25); }
.welcome__pill--pending { color: var(--bronze); border-color: var(--bronze-dim); }
.welcome__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
  margin-top: 6px;
}

/* -- Messages -------------------------------------------------------------- */

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: msg-in 350ms var(--ease-out) backwards;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--paper-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.msg__meta-time { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.msg__body {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--navy-3);
  background: var(--navy-1);
  font-size: 14.5px;
  line-height: 1.65;
}
.msg__body p { margin: 0 0 0.8em; }
.msg__body p:last-child { margin-bottom: 0; }
.msg__body code {
  font-size: 0.92em;
  background: var(--navy-2);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--navy-3);
}

.msg--user .msg__body {
  background: var(--navy-2);
  border-color: var(--navy-3);
}
.msg--agent .msg__body {
  background: var(--navy-2);
  border-color: var(--navy-3);
  border-left: 2px solid var(--bronze);
  /* Agent output renders in mono — the machine voice reads distinct from UI text. */
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.msg--agent .msg__meta { color: var(--bronze); }

.msg--tool .msg__body {
  background: var(--amber-tint);
  border-color: var(--amber-dim);
  border-left: 2px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--paper-1);
}
.msg--tool .msg__meta { color: var(--amber-ink); }
.msg--tool .msg__tool-name { color: var(--amber-ink); font-weight: 600; }

.msg__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.msg__dot--pulse {
  animation: pulse 1.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* -- Thinking indicator --------------------------------------------------- */

.chat__thinking {
  max-width: var(--chat-max);
  margin: 8px auto 0;
  padding: 0 0 4px;
  display: none;
}
.chat__thinking.htmx-request,
.htmx-request .chat__thinking { display: block; }

.chat__thinking-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--amber-tint);
  border: 1px solid rgba(101, 189, 122, 0.30);   /* vector green @ 30% */
  color: var(--amber-ink);
  font-size: 12.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chat__thinking-ellipsis { display: inline-flex; gap: 3px; }
.chat__thinking-ellipsis i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber); display: inline-block;
  animation: think-dot 1.2s var(--ease-in-out) infinite;
}
.chat__thinking-ellipsis i:nth-child(2) { animation-delay: 0.15s; }
.chat__thinking-ellipsis i:nth-child(3) { animation-delay: 0.30s; }
@keyframes think-dot { 0%, 60%, 100% { opacity: 0.2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* -- Pending action card (confirmation UX) -------------------------------- */

.pending {
  border: 1px solid var(--amber-dim);
  background: var(--amber-tint);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}
.pending__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--amber-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pending__title { font-family: var(--font-display); font-size: 16px; color: var(--paper-0); margin: 0; font-weight: 500; }
.pending__detail { font-family: var(--font-mono); font-size: 12.5px; color: var(--paper-1); line-height: 1.6; }
.pending__dd { display: inline; margin: 0; }
.pending__detail dt { color: var(--paper-2); display: inline-block; min-width: 70px; }
.pending__actions { display: flex; gap: 8px; padding-top: 6px; }

/* -- Composer -------------------------------------------------------------- */

.composer {
  border-top: 1px solid var(--navy-3);
  background: linear-gradient(to bottom, rgba(11, 13, 17, 0), var(--navy-0) 60%);
  padding: 16px 36px 22px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
/* Used on welcome + empty new-chat — composer sits in-flow, not stuck at viewport bottom. */
.composer--centered {
  border-top: 0;
  background: transparent;
  position: static;
  padding: 0;
}
.composer__inner {
  max-width: var(--chat-max);
  margin: 0 auto;
  background: var(--navy-2);
  border: 1.5px solid var(--paper-0);
  border-radius: 0;
  transition: border-color 100ms linear;
}
.composer__inner:focus-within {
  border-color: var(--ac-mark);
}
.composer__field {
  width: 100%;
  padding: 14px 18px 4px;
  font-size: 14.5px;
  line-height: 1.55;
  resize: none;
  min-height: 24px;
  max-height: 240px;
  font-family: var(--font-ui);
}
.composer__field::placeholder { color: var(--paper-2); }
.composer__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 10px 14px;
}
.composer__model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-1);
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.composer__model:hover {
  color: var(--paper-0);
  border-color: var(--navy-4);
  background: var(--navy-1);
}
.composer__model-name { line-height: 1; }
.composer__model-caret {
  color: var(--paper-2);
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.composer__model:hover .composer__model-caret { color: var(--paper-0); }
.composer__model-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-info);                       /* hologram blue */
  box-shadow: 0 0 4px rgba(79, 181, 229, 0.65);
  animation: ac-holo-flicker 2.2s linear infinite;
}
/* Hologram flicker — quick low-amplitude jitter, not a slow pulse. */
@keyframes ac-holo-flicker {
  0%, 18%, 22%, 32%, 36%, 78%, 100% { opacity: 1; }
  20%, 34%, 80%                     { opacity: 0.55; }
  60%                               { opacity: 0.8; }
}
.composer__hint { font-size: 11px; color: var(--paper-2); margin-left: auto; }
.composer__hint kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--navy-3);
  border-radius: 3px;
  background: var(--navy-2);
  color: var(--paper-1);
}

/* ---- Composer attachments --------------------------------------------- */
.composer__file-input { display: none; }
.composer__attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  color: var(--paper-1);
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.composer__attach:hover { color: var(--paper-0); border-color: var(--navy-4); background: var(--navy-2); }
.composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 0;
}
.composer__chips:empty { padding: 0; }
.composer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 9px;
  font-size: 12px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: 999px;
  max-width: 260px;
}
.composer__chip--pending { opacity: 0.6; font-style: italic; padding: 3px 10px; }
.composer__chip-label {
  color: var(--paper-1);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer__chip-label:hover { color: var(--paper-0); }
.composer__chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--paper-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.composer__chip-close:hover { background: var(--navy-3); color: var(--paper-0); }
.composer__chip-error {
  display: block;
  padding: 4px 14px 0;
  font-size: 11.5px;
  color: var(--rust);
}
.composer__count { font-size: 11px; color: var(--paper-2); font-family: var(--font-mono); }
.composer__drop {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 17, 0.85);
  border: 2px dashed var(--bronze-dim);
  border-radius: var(--radius-lg);
  color: var(--paper-0);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 20;
  pointer-events: none;
}
.composer__drop--active { display: flex; }
.composer__inner { position: relative; }

/* Attachment chips inside rendered chat messages (server-side rendered list). */
.msg__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.msg__attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: 999px;
  color: var(--paper-1);
  text-decoration: none;
  max-width: 320px;
}
.msg__attachment:hover { color: var(--paper-0); border-color: var(--navy-4); }
.msg__attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__attachment-thumb {
  display: block;
  max-width: 240px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--navy-3);
  margin-top: 8px;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
/* The fill is --ac-mark-paper rather than --ac-mark so the ink clears AA
   (4.90:1 vs 4.17:1) on both ramps, and :hover deepens rather than lifts so
   it still clears in the hover state (6.90:1). Matches the wiki surface's
   primary button, which already worked this way. */
.btn--primary {
  background: var(--ac-mark-paper);
  color: var(--ac-on-mark);
  border-color: var(--ac-mark-deep);
}
.btn--primary:hover { background: var(--ac-mark-deep); }
.btn--ghost {
  color: var(--paper-1);
  border-color: var(--navy-3);
  background: transparent;
}
.btn--ghost:hover { color: var(--paper-0); border-color: var(--navy-4); background: var(--navy-2); }
.btn--danger {
  color: var(--rust);
  border-color: rgba(199, 93, 74, 0.4);
  background: var(--rust-tint);
}
.btn--danger:hover { color: var(--paper-0); border-color: var(--rust); background: rgba(199, 93, 74, 0.16); }
.btn--sm { padding: 5px 10px; font-size: 12px; }

/* Flash messages */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid var(--navy-3);
  background: var(--navy-2);
  color: var(--paper-1);
}
.alert--warning { border-color: rgba(194, 135, 62, 0.4); background: rgba(194, 135, 62, 0.08); }
.alert--danger  { border-color: rgba(199, 93, 74, 0.4);  background: rgba(199, 93, 74, 0.08);  color: var(--paper-0); }
.alert--success { border-color: rgba(120, 170, 120, 0.4); background: rgba(120, 170, 120, 0.08); }
/* Symfony flash bags label failures 'error'; the component was only ever
   given a 'danger' modifier, so admin flashes fell through to the base style. */
.alert--error { border-color: rgba(199, 93, 74, 0.4); background: rgba(199, 93, 74, 0.08); color: var(--paper-0); }

/* Today's journal card on Memory page */
.journal-card {
  border: 1px solid var(--navy-3);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius-sm);
  background: var(--navy-1);
  padding: 18px 20px;
}
.journal-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.journal-card__eyebrow {
  color: var(--bronze);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.journal-card__sub {
  font-size: 12.5px;
  color: var(--paper-2);
  max-width: 56ch;
  line-height: 1.5;
}
.journal-card__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-1);
}
.journal-card__body p { margin: 0 0 0.6em; }
.journal-card__body strong { color: var(--paper-0); }
.journal-card__body ul { margin: 0 0 0.6em; padding-left: 1.4em; }
.journal-card__sources {
  margin-top: 12px;
  font-size: 12px;
  color: var(--paper-2);
}
.journal-card__sources summary { cursor: pointer; }
.journal-card__sources ul { margin: 6px 0 0; padding-left: 1.2em; }
.journal-card__sources a { color: var(--paper-1); }
.journal-card__sources a:hover { color: var(--bronze); }

/* Memory daily cards get the same prose styling as the journal card body */
.memory-card--daily .memory-card__body p { margin: 0 0 0.6em; }
.memory-card--daily .memory-card__body strong { color: var(--paper-0); }
.memory-card--daily .memory-card__body ul { margin: 0 0 0.6em; padding-left: 1.4em; }

/* Sidebar unread pill (Inbox) */
.sidebar__pill {
  margin-left: auto;
  background: var(--ac-mark-paper);
  color: var(--ac-on-mark);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  min-width: 18px;
  text-align: center;
}

/* Inbox list */
.inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inbox-row {
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.inbox-row--unread { border-left: 3px solid var(--bronze); }
.inbox-row__head { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--paper-2); margin-bottom: 6px; }
.inbox-row__source { letter-spacing: 0.08em; }
.inbox-row__when { font-family: var(--font-mono); }
.inbox-row__subject { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--paper-0); }
.inbox-row__body { font-size: 13.5px; line-height: 1.55; color: var(--paper-1); }
.inbox-row__body p { margin: 0 0 0.5em; }
.inbox-row__body p:last-child { margin-bottom: 0; }
.inbox-row__body a { color: var(--bronze); }
/* Send button — chamfered slab. Two diagonal corner cuts (top-right and
   bottom-left) read as an X-wing console key, not a chat bubble. */
.btn--send {
  background: var(--ac-accent);
  color: #fff;
  width: 36px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 0;
  transition: background 100ms linear;
}
.btn--send:hover { background: var(--ac-accent-hover); }
.btn--send:active { background: var(--ac-accent-deep); }
.btn--send svg { width: 14px; height: 14px; }

/* Theme segmented control (Settings → Appearance) */
.theme-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--navy-0);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
}
.theme-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--paper-1);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.theme-seg__btn:hover { color: var(--paper-0); }
.theme-seg__btn[aria-pressed="true"] {
  background: var(--navy-2);
  color: var(--paper-0);
  box-shadow: inset 0 0 0 1px var(--navy-4);
}
.theme-seg__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy-4);
  transition: background 160ms var(--ease-out);
}
.theme-seg__btn[aria-pressed="true"] .theme-seg__dot { background: var(--bronze); }

/* =========================================================================
   Cards — Skills, Memory, Activity, Settings
   (Layout grids use Bootstrap 5 .row / .col-* — see base.html.twig.)
   ========================================================================= */

.card {
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.card--link { cursor: pointer; display: block; color: inherit; }
.card--link:hover { border-color: var(--navy-4); background: var(--navy-2); }
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 40;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--paper-0);
}
.card__sub {
  font-size: 12px;
  color: var(--paper-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
}
.card__desc { color: var(--paper-1); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.card__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--paper-2);
  font-family: var(--font-mono);
  margin-top: auto;
}
.card__meta-item {
  padding: 2px 7px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: 3px;
}

.skill-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.skill-card__index {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
}
.skill-card__roles {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  margin: 0 0 12px;
}
.skill-card__roles span { color: var(--bronze); }

/* -- Stat tiles ----------------------------------------------------------- */

.stat {
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.eyebrow,
.stat__label {
  font-size: 11px;
  color: var(--paper-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  font-size: 28px;
  line-height: 1;
  color: var(--paper-0);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.stat__value--mono {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
}
.stat__delta { font-size: 12px; color: var(--paper-2); margin: 6px 0 0; font-family: var(--font-mono); }

/* Row of stat tiles — admin dashboards and count summaries. */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.stat-row .stat { min-width: 8.5rem; flex: 0 1 auto; }
.stat--sm { padding: var(--space-3) var(--space-4); }
.stat--sm .stat__value { font-size: var(--text-2xl); }

/* A stat tile that is also a filter link. aria-current marks the active one,
   so the selected state is announced rather than being colour-only. */
a.stat { display: block; color: inherit; transition: border-color 180ms var(--ease-out); }
a.stat:hover { border-color: var(--navy-4); }
a.stat[aria-current="true"] { border-color: var(--bronze); box-shadow: inset 0 0 0 1px var(--bronze); }

/* Section blocks. app.css defines no global h1–h6 rules, so unclassed headings
   inside .canvas__body fall to UA defaults; these give admin and wiki listing
   pages a heading that matches the rest of the type ramp. */
.section { margin-bottom: var(--space-8); }
.canvas__body--narrow { max-width: 48rem; }

/* Two Bootstrap-shaped utilities the grid build does not ship. Templates use
   them next to .row/.col-*, but bootstrap-grid.min.css carries only the grid
   plus the display/flex/order/spacing utilities — sizing (.h-100) and gap
   (.gap-*) live in the full bundle, which we deliberately don't load. Values
   match Bootstrap's (100%, 0.5rem) so the markup reads as one vocabulary.
   Add siblings only when a template actually needs one. */
.h-100 { height: 100%; }
.gap-2 { gap: var(--space-2); }

/* =========================================================================
   Bare notice pages (base_bare.html.twig)
   Sign-out, and the landings the wiki-bot confirmation emails link to. One
   centred card, no chrome. Replaces four near-identical <style> blocks that
   each defined their own CTA button.
   ========================================================================= */
.bare {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-8) var(--space-5);
  background: var(--navy-0);
}
.notice { max-width: 32rem; text-align: center; }
.notice__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-5);
  color: var(--bronze);
}
.notice__icon--muted { color: var(--paper-2); opacity: 0.7; }
.notice__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  color: var(--paper-0);
}
.notice__body {
  color: var(--paper-2);
  margin: 0 0 var(--space-6);
  line-height: 1.55;
}
.notice__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.notice__slug {
  display: inline-block;
  padding: 1px var(--space-2);
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--paper-0);
}
/* Plain reading list — identity facts, credentials, memories. */
.list-plain { margin: 0; padding-left: 1.2em; line-height: 1.8; color: var(--paper-1); }
.list-plain li + li { margin-top: 2px; }
.section__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--paper-0);
  margin: var(--space-5) 0 var(--space-2);
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--paper-0);
  margin: 0 0 var(--space-3);
}
.stat__delta--up { color: var(--bronze); }
.stat__delta--down { color: var(--rust); }

/* =========================================================================
   Tables — for activity log
   ========================================================================= */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--navy-3); white-space: nowrap; }
.table th {
  font-weight: 500;
  font-size: 11px;
  color: var(--paper-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--navy-1);
}
.table tbody tr { transition: background 150ms var(--ease-out); }
.table tbody tr:hover { background: var(--navy-1); }
.table td.tnum { font-family: var(--font-mono); }
.table td.dim  { color: var(--paper-2); }
.table th.ta-r, .table td.ta-r { text-align: right; }
.table tr.va-top td { vertical-align: top; }
/* Long free-text cells opt out of the table's default nowrap. */
.table td.wrap { white-space: normal; min-width: 18rem; }

/* Coverage bars inside the admin wiki-coverage table (admin_wiki_coverage).
   The wiki landing page used to carry these; they now live only here, in the
   admin (navy) palette rather than the wiki paper one. */
.table td.cov-cell { width: 34%; min-width: 12rem; }
.cov-bar {
  height: 8px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: 4px;
  overflow: hidden;
}
.cov-bar span {
  display: block;
  height: 100%;
  background: var(--bronze);
  border-radius: 4px;
  transition: width 360ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .cov-bar span { transition: none; }
}
.cov-note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--paper-2);
  white-space: normal;
  max-width: 32ch;
}
.cov-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--navy-4);
  border-radius: 3px;
  padding: 0 3px;
  cursor: help;
}
.cov-foot { margin-top: var(--space-4); max-width: 72ch; font-size: 12.5px; line-height: 1.6; }

/* Expandable snapshot inside the error-report table. */
.report-snapshot summary { cursor: pointer; }
.report-snapshot__body { margin-top: var(--space-2); max-width: 60ch; }
.report-snapshot__body p { margin: 0 0 var(--space-2); }
.report-snapshot__pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-xl);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--paper-1);
}
.report-snapshot__meta { font-size: var(--text-sm); color: var(--paper-2); }

/* Key/value variant — a two-column detail table rather than a grid of records.
   Row headers sit in the left column, so the uppercase column-header treatment
   is dropped and the min-width is released. */
.table--keyvalue { min-width: 0; }
.table--keyvalue th[scope="row"] {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-base);
  color: var(--paper-2);
  width: 1%;
  padding-left: 0;
}
.table--keyvalue tbody tr:hover { background: transparent; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
  letter-spacing: 0.02em;
}
.tag--bronze { color: var(--bronze); background: var(--bronze-tint); }
/* Status variants. The admin intake table previously carried its own inline
   palette (#B4432B / #2E7D52 / #8A6D1F / #4A5568) — a fourth set of status
   colours, theme-blind and untested for contrast. These route through the ink
   tier instead, so they resolve per theme and clear AA on both ramps. */
.tag--danger  { color: var(--rust-ink);          background: var(--rust-tint); }
.tag--success { color: var(--ac-success-ink);    background: var(--amber-tint); }
.tag--warn    { color: var(--ac-warning-ink);    background: rgba(255, 182, 39, 0.10); }
.tag--muted   { color: var(--paper-2);           background: transparent; }
.tag--amber { color: var(--amber-ink); background: var(--amber-tint); }
.tag--rust { color: var(--rust); background: var(--rust-tint); }
.tag--neutral { color: var(--paper-1); border-color: var(--navy-4); background: var(--navy-2); }

/* =========================================================================
   Tabs (Settings)
   ========================================================================= */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--navy-3);
  margin-bottom: 24px;
}
.tab {
  padding: 11px 18px;
  font-size: 13px;
  color: var(--paper-1);
  font-family: var(--font-ui);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.tab:hover { color: var(--paper-0); }
.tab--active { color: var(--bronze); border-bottom-color: var(--bronze); }

/* =========================================================================
   Forms — Settings page
   ========================================================================= */

.form { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.form__section { background: var(--navy-1); border: 1px solid var(--navy-3); border-radius: var(--radius); padding: 22px 24px; }
.form__legend {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--paper-0);
}
.form__hint {
  font-size: 12.5px;
  color: var(--paper-1);
  margin: 0 0 18px;
  /* Inside .form__actions the hint sits beside the button, not above the next
     row, so the bottom margin would push the row out of alignment. */
  max-width: 55ch;
  line-height: 1.55;
}
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form__row + .form__row { margin-top: 18px; }
.form__label {
  font-size: 12px;
  color: var(--paper-1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.form__input, .form__select, .form__textarea {
  background: var(--navy-0);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.form__textarea { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; min-height: 220px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  border-color: var(--bronze-dim);
  box-shadow: 0 0 0 3px rgba(194, 135, 62,0.08);
}
.form__actions .form__hint { margin: 0; }
.form__row-hint { font-size: 11.5px; color: var(--paper-2); margin-top: 2px; font-family: var(--font-mono); }
.form__actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.form__actions--start { justify-content: flex-start; align-items: center; }
/* Side-by-side rows. Wraps to a single column below ~12rem per field, so the
   admin forms stop needing per-label inline flex declarations. */
.form__grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.form__grid > .form__row { flex: 1 1 12rem; margin-top: 0; }
.form__grid > .form__row--narrow { flex: 0 0 8rem; }
.form__grid + .form__grid, .form__grid + .form__row { margin-top: 18px; }
/* Short-field override for inputs that aren't prose (emoji, timezone). */
.form__textarea--short { min-height: 160px; }

/* Model picker — rich radio cards */
.model-grid { display: grid; gap: 8px; }
.model-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--navy-0);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
  position: relative;
}
.model-option:hover { border-color: var(--navy-4); background: var(--navy-2); }
.model-option input { position: absolute; opacity: 0; pointer-events: none; }
.model-option__radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-4);
  display: grid;
  place-items: center;
  transition: border-color 180ms var(--ease-out);
}
.model-option__radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  transform: scale(0);
  transition: transform 180ms var(--ease-out);
}
.model-option input:checked ~ .model-option__radio { border-color: var(--bronze); }
.model-option input:checked ~ .model-option__radio::after { transform: scale(1); }
.model-option:has(input:checked) { border-color: var(--bronze-dim); background: var(--bronze-tint); }
.model-option__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--paper-0);
  display: block;
}
.model-option__id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  margin-top: 2px;
  display: block;
}
.model-option__meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-1);
  text-align: right;
}
.model-option__meta div { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.model-option__meta-label { color: var(--paper-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }

/* =========================================================================
   Guide — long-form instructional pages inside Configure (e.g. /settings/connect).
   Reuses .form__section as the card so it sits flush with the rest of Settings;
   everything below is prose furniture the form styles don't cover. Text is a
   touch larger than form copy because these pages get read, not scanned.
   ========================================================================= */

.guide { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.guide__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper-1);
  margin: 0 0 12px;
}
.guide__body:last-child { margin-bottom: 0; }
.guide__body strong { color: var(--paper-0); font-weight: 600; }
.guide a { color: var(--bronze); text-decoration: underline; text-underline-offset: 2px; }
.guide a:hover { color: var(--bronze-bright); }

/* Status banner — mirrors the wiki callout's shape without its paper palette. */
.guide__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--navy-3);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--navy-1);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-1);
}
.guide__note strong { color: var(--paper-0); }
.guide__note-icon { font-size: 11px; line-height: 1.7; flex: none; }
.guide__note--ok   { border-left-color: var(--ac-success-ink); }
.guide__note--ok   .guide__note-icon { color: var(--ac-success-ink); }
.guide__note--warn { border-left-color: var(--ac-warning-ink); }
.guide__note--warn .guide__note-icon { color: var(--ac-warning-ink); }

/* Numbered steps — counter in a ring so the sequence survives a long step. */
.guide__steps { list-style: none; margin: 0; padding: 0; counter-reset: guide-step; }
.guide__steps > li {
  counter-increment: guide-step;
  position: relative;
  padding: 0 0 22px 42px;
}
.guide__steps > li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bronze-dim);
  color: var(--bronze);
  background: var(--bronze-tint);
  font-family: var(--font-mono);
  font-size: 12px;
  display: grid;
  place-items: center;
}
/* Rail connecting the steps; stops at the last one. */
.guide__steps > li::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--navy-3);
}
.guide__steps > li:last-child { padding-bottom: 0; }
.guide__steps > li:last-child::after { display: none; }
.guide__steps h3 {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper-0);
  margin: 3px 0 6px;
}
.guide__steps p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--paper-1);
  margin: 0 0 10px;
}
.guide__steps p:last-child { margin-bottom: 0; }
.guide__steps strong { color: var(--paper-0); font-weight: 600; }
.guide__steps code, .guide__pairs code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--navy-0);
  border: 1px solid var(--navy-3);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Copyable block — prose to paste, or a URL. */
.guide__snippet {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--navy-0);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin: 0 0 10px;
}
.guide__snippet p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-1);
}
.guide__snippet--mono code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--paper-0);
  background: none;
  border: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
.guide__copy {
  flex: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--navy-3);
  border-radius: 3px;
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.guide__copy:hover { color: var(--paper-0); border-color: var(--navy-4); }
.guide__copy.is-copied { color: var(--ac-success-ink); border-color: var(--ac-success-ink); }

/* Prerequisite / capability lists — bulletless, one idea per row. */
.guide__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide__checklist > li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-1);
}
.guide__checklist > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
}
.guide__checklist--plain > li::before { background: var(--paper-2); }
.guide__checklist strong { color: var(--paper-0); font-weight: 600; }

/* Two-column label/value rows for the fields a user actually types. */
.guide__pairs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.guide__pairs > li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-1);
  padding: 7px 10px;
  background: var(--navy-0);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius-sm);
}
.guide__pairs > li > span:first-child {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-0);
}

.guide__faq { margin: 0; }
.guide__faq dt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper-0);
  margin: 0 0 5px;
}
.guide__faq dd {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-1);
}
.guide__faq dd:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .guide__pairs > li { grid-template-columns: 1fr; gap: 2px; }
  .guide__snippet { flex-direction: column; }
  .guide__copy { margin-left: 0; }
}

/* =========================================================================
   Memory cards
   ========================================================================= */

.memory-card {
  background: var(--navy-1);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
}
.memory-card__kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  align-self: start;
  margin-top: 2px;
}
.memory-card__kind--core { color: var(--bronze); background: var(--bronze-tint); }
.memory-card__kind--daily { color: var(--amber-ink); background: var(--amber-tint); }
.memory-card__kind--reflection { color: var(--paper-1); background: var(--navy-2); }
.memory-card__body { font-size: 14px; line-height: 1.55; color: var(--paper-0); }
.memory-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--paper-2); white-space: nowrap; }

/* =========================================================================
   Page-load stagger animation
   ========================================================================= */

.stagger > * { animation: fade-up 500ms var(--ease-out) backwards; }
.stagger > *:nth-child(1) { animation-delay:  60ms; }
.stagger > *:nth-child(2) { animation-delay: 120ms; }
.stagger > *:nth-child(3) { animation-delay: 180ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 300ms; }
.stagger > *:nth-child(6) { animation-delay: 360ms; }
.stagger > *:nth-child(7) { animation-delay: 420ms; }
.stagger > *:nth-child(8) { animation-delay: 480ms; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Subtle ambient background
   ========================================================================= */

/* Schematic dot grid — the blueprint reading. Replaces the warm radial wash.
   1px dots at 28px intervals, very low opacity, with a faint hologram-blue
   wash in the upper-right and a vector-green sweep in the lower-left for
   chromatic depth. Reads as a tactical screen, not a sunset. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 92% 6%, rgba(79, 181, 229, 0.07), transparent 38%),
    radial-gradient(circle at 8%  94%, rgba(101, 189, 122, 0.05), transparent 42%),
    radial-gradient(circle, rgba(91, 102, 113, 0.10) 1px, transparent 1.2px);
  background-size: auto, auto, 28px 28px;
  background-position: 0 0, 0 0, 0 0;
}
html[data-theme="light"] body::before,
html[data-theme="system"] body::before {
  background-image:
    radial-gradient(circle at 92% 6%, rgba(79, 181, 229, 0.10), transparent 38%),
    radial-gradient(circle at 8%  94%, rgba(101, 189, 122, 0.07), transparent 42%),
    radial-gradient(circle, rgba(91, 102, 113, 0.10) 1px, transparent 1.2px);
}
.app { position: relative; z-index: 1; }

/* =========================================================================
   Responsive — three tiers
   ========================================================================= */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--navy-4);
  background: transparent;
  color: var(--paper-0);
  z-index: 2;
  flex-shrink: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.sidebar-backdrop {
  display: none;
}

/* Tablet + phone: off-canvas sidebar behind a hamburger. The old 64px icon
   rail left no way to read labels and ate width that titles then syllable-wrapped. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 420;
    width: min(var(--sidebar-w), 92vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    box-shadow: none;
  }
  .app.is-nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  }
  .app.is-nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 410;
    background: rgba(8, 12, 18, 0.55);
  }
  body.is-nav-open { overflow: hidden; }
  .canvas__header, .canvas__body, .chat__scroll, .composer { padding-left: 20px; padding-right: 20px; }
  .chat__thread          { max-width: 100%; }
  .chat__empty           { margin-top: 40px; }
  .canvas__header-actions { flex-wrap: wrap; flex-shrink: 1; }
  .wiki-surface .canvas__header { flex-wrap: wrap; }
  .wiki-surface--dashboard .wiki-hero__row { flex-wrap: wrap; }
  .wiki-surface--dashboard .wiki-hero__actions { flex-wrap: wrap; flex-shrink: 1; }
}

/* Phone: tighten everything, type drops a step. Grids handled by Bootstrap. */
@media (max-width: 600px) {
  .canvas__header, .canvas__body, .chat__scroll, .composer { padding-left: 14px; padding-right: 14px; }
  .canvas__header        { padding-top: 16px; }
  .canvas__title         { font-size: 24px; }
  .chat__empty-title     { font-size: 30px; }
  .chat__empty-lede      { font-size: 14px; }
  .chat__empty           { margin-top: 24px; }
  .chat__empty-lede,
  .canvas__lede          { max-width: 100%; }
  .chat__suggestions     { max-width: 100%; width: 100%; }
  .chat__suggestion      { padding: 12px 14px; }
  .form, .form__hint     { max-width: 100%; }
  .form__section         { padding: 16px; }
  .composer              { padding-bottom: 14px; }
  .composer__hint        { display: none; }
  .table th, .table td   { padding: 9px 10px; font-size: 12px; }

  /* Memory cards: stack kind chip above body */
  .memory-card { grid-template-columns: 1fr; gap: 10px; }
  .memory-card__meta { white-space: normal; }

  /* Model picker meta: stack below name on phones */
  .model-option { grid-template-columns: auto 1fr; }
  .model-option__meta { grid-column: 2; padding-top: 6px; flex-wrap: wrap; gap: 10px; }
}

/* Very narrow: composer model badge shrinks to dot-only */
@media (max-width: 380px) {
  .composer__model       { padding: 4px 6px; font-size: 0; }
  .composer__model::after { content: attr(data-short); font-size: 11px; }
  .composer__model-dot   { margin-right: 4px; }
}

/* ============================================================
   Wiki                                                        
   ============================================================ */

.canvas__header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.wiki-owner { color: var(--paper-2); font-size: 10px; }

/* Page body */
.wiki-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wiki-page-body { max-width: 900px; }
.wiki-ingest__radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Show the keyboard-focus ring on the visible label when its radio is focused */
.wiki-ingest__radio:focus-visible + .wiki-ingest__tabs .wiki-ingest__tab[for="ingest-mode-paste"],
.wiki-ingest__radio:focus-visible ~ .wiki-ingest__tabs .wiki-ingest__tab {
  outline: 2px solid transparent;
}
#ingest-mode-paste:focus-visible ~ .wiki-ingest__tabs label[for="ingest-mode-paste"],
#ingest-mode-file:focus-visible  ~ .wiki-ingest__tabs label[for="ingest-mode-file"],
#ingest-mode-url:focus-visible   ~ .wiki-ingest__tabs label[for="ingest-mode-url"] {
  outline: 2px solid var(--bronze-bright);
  outline-offset: 2px;
}
/* The active tab is the one whose radio is checked */
#ingest-mode-paste:checked ~ .wiki-ingest__tabs label[for="ingest-mode-paste"],
#ingest-mode-file:checked  ~ .wiki-ingest__tabs label[for="ingest-mode-file"],
#ingest-mode-url:checked   ~ .wiki-ingest__tabs label[for="ingest-mode-url"] {
  background: var(--bronze-bright);
  color: #0d0d0d;
  font-weight: 500;
}

/* All panels hidden by default; show whichever matches the checked radio */
.wiki-ingest__panel { display: none; flex-direction: column; gap: 16px; }
#ingest-mode-paste:checked ~ .wiki-ingest__panel--paste,
#ingest-mode-file:checked  ~ .wiki-ingest__panel--file,
#ingest-mode-url:checked   ~ .wiki-ingest__panel--url { display: flex; }
.wiki-ingest__fileinput { margin-top: 12px; }

.muted { color: var(--paper-2); }

.wiki-search-form { display: inline-flex; gap: 8px; align-items: center; }

/* --- Personal wiki: hover-save on assistant messages ------------------- */
.msg--agent { position: relative; }
.msg--agent .wiki-save-hover {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-2);
  background: rgba(15, 22, 38, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, border-color 120ms ease;
}
.msg--agent:hover .wiki-save-hover,
.msg--agent:focus-within .wiki-save-hover,
.msg--agent .wiki-save-hover:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.msg--agent .wiki-save-hover:hover { color: var(--bronze); border-color: var(--bronze-dim); }
.msg--agent .wiki-save-hover svg { width: 13px; height: 13px; }
.wiki-save-hover__label { text-transform: uppercase; }

/* ---- Report-an-error affordance (per agent message) ---------------------- */
.msg__report { margin-top: 8px; }
.msg__report-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--paper-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.msg--agent:hover .msg__report-flag,
.msg--agent:focus-within .msg__report-flag { opacity: 1; }
.msg__report-flag:hover,
.msg__report-flag[aria-expanded="true"] {
  opacity: 1;
  color: var(--amber, var(--bronze));
  border-color: var(--bronze-dim);
  background: rgba(15, 22, 38, 0.6);
}
.msg__report-flag svg { flex: none; }

.msg__report-form {
  margin-top: 8px;
  padding: 12px;
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 22, 38, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.msg__report-form[hidden] { display: none; }
.msg__report-heading { font-size: 12px; color: var(--paper-2); }
.msg__report-select,
.msg__report-comment {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--paper-0);
  background: var(--navy-1, rgba(0,0,0,0.25));
  border: 1px solid var(--navy-4, rgba(255,255,255,0.12));
  border-radius: 6px;
}
.msg__report-comment { resize: vertical; min-height: 2.4em; }
.msg__report-actions { display: flex; gap: 8px; align-items: center; }
.msg__report--done { margin-top: 8px; }
.msg__report-thanks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bronze);
}
.msg__report-thanks svg { flex: none; }

/* ---- Report-an-error affordance (wiki surfaces) --------------------------
   Same markup as the chat variant above (templates/partials/_error_report),
   restyled against the warm-light .wiki-surface tokens instead of the chat
   navy. Unlike chat's hover-revealed flag this one stays visible — a reader
   who spots a bad page has no message to hover over to find it. */
.wiki-report { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--w-line, rgba(255,255,255,0.08)); }
.wiki-report-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--w-font-ui, inherit);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--w-muted, var(--paper-2));
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.wiki-report-flag:hover,
.wiki-report-flag[aria-expanded="true"] {
  color: var(--w-mark-deep, var(--bronze));
  border-color: var(--w-line, var(--bronze-dim));
  background: var(--w-mark-soft, transparent);
}
.wiki-report-flag svg { flex: none; }

.wiki-report-form {
  margin-top: 10px;
  padding: 14px;
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--w-bg-raised, rgba(15, 22, 38, 0.55));
  border: 1px solid var(--w-line, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.wiki-report-form[hidden] { display: none; }
.wiki-report-heading { font-size: 12px; color: var(--w-ink-soft, var(--paper-2)); }
.wiki-report-select,
.wiki-report-comment {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--w-ink, var(--paper-0));
  background: var(--w-bg, rgba(0,0,0,0.25));
  border: 1px solid var(--w-line, rgba(255,255,255,0.12));
  border-radius: 6px;
}
.wiki-report-comment { resize: vertical; min-height: 2.6em; }
.wiki-report-actions { display: flex; gap: 8px; align-items: center; }
.wiki-report--done { margin-top: 24px; padding-top: 18px; }
.wiki-report-thanks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--w-mark-deep, var(--bronze));
}
.wiki-report-thanks svg { flex: none; }

/* --- Save dialog ------------------------------------------------------- */
.wiki-save-dialog {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
}
.wiki-save-dialog__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.wiki-save-dialog__panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.wiki-save-dialog__title { font-size: 16px; margin: 0 0 6px; color: var(--paper-0); letter-spacing: 0.02em; }
.wiki-save-dialog__lede { font-size: 13px; color: var(--paper-2); margin: 0 0 16px; line-height: 1.5; }
.wiki-save-dialog__panel .wiki-form__label { display: block; margin-bottom: 12px; }
.wiki-save-dialog__panel .wiki-form__label > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper-2); margin-bottom: 4px; }
.wiki-save-dialog__panel .wiki-form__input { width: 100%; }
.wiki-save-dialog__error {
  margin: 6px 0 12px;
  padding: 8px 10px;
  font-size: 13px;
  color: #ffb3a4;
  background: rgba(199,93,74,0.12);
  border: 1px solid rgba(199,93,74,0.32);
  border-radius: 6px;
}
.wiki-save-dialog__panel .wiki-form__actions { display: flex; gap: 8px; margin-top: 14px; }

/* --- Save toast -------------------------------------------------------- */
.wiki-save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 180;
  min-width: 320px; max-width: 420px;
  padding: 12px 14px 10px;
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  animation: wiki-toast-in 220ms cubic-bezier(.2,.9,.3,1.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@keyframes wiki-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wiki-save-toast--fade { opacity: 0; transition: opacity 380ms ease; }
.wiki-save-toast--expired { opacity: 0.65; }
.wiki-save-toast--error { border-color: rgba(199,93,74,0.4); }
.wiki-save-toast__row { display: flex; align-items: center; gap: 10px; }
.wiki-save-toast__layer {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bronze);
  background: var(--bronze-tint);
  border: 1px solid rgba(229,128,47,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.wiki-save-toast__text { font-size: 13px; color: var(--paper-0); flex: 1; line-height: 1.4; }
.wiki-save-toast__actions { display: flex; gap: 10px; padding-top: 2px; }
.wiki-save-toast__link {
  font-size: 12px;
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px dotted rgba(229,128,47,0.4);
}
.wiki-save-toast__link:hover { color: var(--bronze-bright); border-bottom-style: solid; }
.wiki-save-toast__undo {
  font-size: 12px;
  color: var(--paper-2);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.wiki-save-toast__undo:hover { color: var(--paper-0); border-color: rgba(255,255,255,0.28); }
.wiki-save-toast__progress { height: 2px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.wiki-save-toast__progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-bright));
  width: 100%;
  transition: width 80ms linear;
}

/* ============================================================================
   Wiki light reading surface
   ----------------------------------------------------------------------------
   Scoped to `.wiki-surface` only. The wrapper sits inside <main class="canvas">
   in each wiki template, so the dashboard's dark chrome stays for chat while
   the wiki gets a paper-toned reading room.
   ========================================================================== */
.wiki-surface {
  /* min-width: 0 prevents flex/grid blowout: .wiki-surface sits as a flex
     child of .canvas (display: flex column) — without this its min-content
     can push its parent grid track wider than 1fr, overflowing the viewport
     and tucking content under the sticky sidebar. */
  min-width: 0;
  overflow-x: clip;
  /* The --w-* names stay as the wiki's local vocabulary, but every one of them
     now aliases a brand token rather than carrying its own hex. Re-skinning the
     wiki means editing atlas-claw-brand.css, not this block. The paper ramp
     itself (warm pale stone, low saturation high value — parchment cream and
     warm brown were both rejected) lives there as --ac-paper-*. */
  --w-bg:        var(--ac-paper);
  --w-bg-raised: var(--ac-paper-raised);
  --w-bg-sunk:   var(--ac-paper-sunk);
  --w-line:      var(--ac-paper-line);
  --w-line-soft: var(--ac-paper-line-soft);
  --w-ink:       var(--ac-paper-ink);
  --w-ink-soft:  var(--ac-paper-ink-soft);
  --w-muted:     var(--ac-muted);
  --w-mark:      var(--ac-mark-paper);   /* terra-cotta dialled for AA on paper */
  --w-mark-deep: var(--ac-mark-deep);
  --w-mark-soft: rgba(176, 82, 26, 0.10);
  /* Primary CTA / button colour for the wiki design. Aliased to the terra-cotta
     mark today; named separately so the button hue can diverge later without a
     find-and-replace. */
  --w-btn:       var(--w-mark);
  --w-btn-deep:  var(--w-mark-deep);
  --w-btn-ink:   var(--ac-on-mark);
  /* Status colours use the light-ramp ink tier. The wiki previously carried its
     own set (#2A85B5 / #3F8D52 / #B07A0E) which sat at 3.4–3.9:1 on paper —
     better than the dark-ramp accents but still short of AA for body text. */
  --w-info:      var(--ac-paper-info);
  --w-success:   var(--ac-paper-success);
  --w-attn:      var(--ac-paper-warning);
  --w-danger:    var(--ac-danger);

  --w-font-body: var(--ac-font-reading);
  --w-font-ui:   var(--ac-font-ui);
  --w-font-mono: var(--ac-font-mono);

  background: var(--w-bg);
  color: var(--w-ink);
  font-family: var(--w-font-ui);
  /* The canvas wrapping <main> bleeds dark behind us; pull a min-height so the
     paper surface fills the visible area even on short pages. */
  min-height: calc(100vh - 60px);
  padding: 6px 0 64px;
}

/* Re-skin the canvas header inside the wiki surface (replaces the dark chrome). */
.wiki-surface .canvas__header {
  display: flex;
  justify-content: space-between;
  /* Was flex-end, which hung the action cluster off the *bottom* of the title
     block — on Categories, Activity and the personal wiki the lede runs two or
     three lines, so the buttons floated ~80px below the heading they belong to.
     flex-start puts them on the title's line, the same as the app canvas. */
  align-items: flex-start;
  gap: 24px;
  margin: 12px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--w-line);
}
.wiki-surface .canvas__crumbs {
  font-family: var(--w-font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  /* Not --w-muted (#6E7785): 3.94:1 on --ac-paper at 12px, under the AA floor
     for small text. See --ac-muted-paper. Other --w-muted text at this size
     has the same problem and wants a token audit — this fixes the breadcrumb,
     which is on every wiki screen, not the whole ramp. */
  color: var(--ac-muted-paper);
  text-transform: none;
  margin-bottom: 4px;
}
.wiki-surface .canvas__crumbs a { color: var(--w-muted); text-decoration: none; border-bottom: 1px dotted transparent; }
.wiki-surface .canvas__crumbs a:hover { color: var(--w-ink); border-bottom-color: var(--w-line); }
.wiki-surface .canvas__crumbs code { font-family: var(--w-font-mono); font-size: 11px; color: var(--w-muted); background: transparent; }
.wiki-surface .canvas__title {
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  margin: 0;
}
.wiki-surface .canvas__title em { font-style: normal; color: var(--w-mark); font-weight: 600; }
.wiki-surface .canvas__lede {
  font-family: var(--w-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--w-ink-soft);
  margin: 8px 0 0;
  max-width: 62ch;
}
/* Match the header's 36px side gutter (the header only overrides padding-bottom,
   so it keeps the base canvas's 36px). Earlier this was `padding: 0`, which left
   every wiki page that drops content straight into .canvas__body (changeset
   review, personal ingest, edit, history, search, …) flush against the sidebar
   and misaligned under its own title. Grid pages (page/index reading + landing)
   simply inset to the same gutter, which lines them up with the header too. */
.wiki-surface .canvas__body { padding: 0 36px; }
@media (max-width: 980px) { .wiki-surface .canvas__body { padding: 0 20px; } }
@media (max-width: 720px) { .wiki-surface .canvas__body { padding: 0 14px; } }

/* Buttons inside the wiki surface — light, friendly, the same shape language as the rest of the app. */
.wiki-surface .btn { font-family: var(--w-font-ui); }
.wiki-surface .btn--primary {
  background: var(--w-mark);
  color: var(--ac-on-mark);
  border: 1px solid var(--w-mark-deep);
}
.wiki-surface .btn--primary:hover { background: var(--w-mark-deep); }
.wiki-surface .btn--ghost {
  background: transparent;
  color: var(--w-ink-soft);
  border: 1px solid var(--w-line);
}
.wiki-surface .btn--ghost:hover { color: var(--w-ink); border-color: var(--w-ink-soft); background: var(--w-bg-raised); }

.wiki-surface .muted { color: var(--w-muted); font-family: var(--w-font-body); }
.wiki-surface .smallcaps { color: var(--w-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--w-font-ui); }
.wiki-surface .alert { font-family: var(--w-font-ui); border-radius: 4px; padding: 10px 12px; margin: 8px 0 12px; }
.wiki-surface .alert--success { background: rgba(63, 141, 82, 0.10); border: 1px solid rgba(63, 141, 82, 0.30); color: #1f4a2b; }
.wiki-surface .alert--warning { background: rgba(176, 122, 14, 0.12); border: 1px solid rgba(176, 122, 14, 0.32); color: #6a4905; }

/* ---------------- Landing page composition ---------------- */
.wiki-surface .wiki-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 1024px) { .wiki-surface .wiki-landing { grid-template-columns: 1fr; } }

.wiki-surface .wiki-landing__main { min-width: 0; }
.wiki-surface .wiki-landing__rail { min-width: 0; }

.wiki-surface .wiki-rail {
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.wiki-surface .wiki-rail__title {
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin: 0 0 10px;
}
.wiki-surface .wiki-rail__list { list-style: none; padding: 0; margin: 0; }
.wiki-surface .wiki-rail__list li { padding: 6px 0; border-bottom: 1px solid var(--w-line-soft); }
.wiki-surface .wiki-rail__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wiki-surface .wiki-rail__list a { color: var(--w-ink); text-decoration: none; font-size: 14px; line-height: 1.35; display: block; }
.wiki-surface .wiki-rail__list a:hover { color: var(--w-mark); }
.wiki-surface .wiki-rail__meta { color: var(--w-muted); font-size: 11px; margin-top: 2px; font-family: var(--w-font-ui); }

/* ---------------- Group sections (entity / theory of change / outcomes…) ---------------- */
.wiki-surface .wiki-group { margin: 0 0 36px; }
.wiki-surface .wiki-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--w-line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.wiki-surface .wiki-group__title {
  font-family: var(--w-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin: 0;
}
.wiki-surface .wiki-group__count { color: var(--w-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.wiki-surface .wiki-group__blurb {
  font-family: var(--w-font-body);
  font-size: 14px;
  color: var(--w-ink-soft);
  margin: 0 0 10px;
  max-width: 64ch;
  line-height: 1.5;
}

/* ---------------- List rows: title + summary + soft date ---------------- */
.wiki-surface .wiki-list-pages { list-style: none; padding: 0; margin: 0; }
.wiki-surface .wiki-list-pages__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface .wiki-list-pages__row:last-child { border-bottom: 0; }
.wiki-surface .wiki-list-pages__title {
  font-family: var(--w-font-ui);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--w-ink);
  text-decoration: none;
  line-height: 1.3;
}
.wiki-surface .wiki-list-pages__title:hover { color: var(--w-mark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wiki-surface .wiki-list-pages__summary {
  grid-column: 1;
  font-family: var(--w-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--w-ink-soft);
  margin: 2px 0 0;
  max-width: 70ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wiki-surface .wiki-list-pages__meta {
  grid-row: 1;
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--w-muted);
  font-size: 12px;
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-updated { font-family: var(--w-font-ui); font-variant-numeric: tabular-nums; }

/* status badges — used sparingly on the wiki surface (seed/draft only, live is implied). */
.wiki-surface .wiki-status {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-status--seed  { color: var(--w-attn); }
.wiki-surface .wiki-status--draft { color: var(--w-muted); }
.wiki-surface .wiki-status--live  { display: none; }
.wiki-surface .wiki-slug { font-family: var(--w-font-mono); font-size: 11px; color: var(--w-muted); background: transparent; }

/* ---------------- Page show: reading column + TOC rail ---------------- */
.wiki-surface .wiki-reading {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 40px;
  align-items: flex-start;
}
@media (max-width: 1080px) {
  .wiki-surface .wiki-reading { grid-template-columns: 1fr; }
  .wiki-surface .wiki-reading__rail { display: none; }
}

.wiki-surface .wiki-reading__rail {
  position: sticky;
  top: 24px;
  font-family: var(--w-font-ui);
  font-size: 13px;
  color: var(--w-ink-soft);
  border-left: 1px solid var(--w-line);
  padding-left: 16px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
}
.wiki-surface .wiki-reading__rail-title {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.wiki-surface .wiki-toc { list-style: none; padding: 0; margin: 0 0 20px; }
.wiki-surface .wiki-toc li { padding: 3px 0; line-height: 1.35; }
.wiki-surface .wiki-toc li.is-h3 { padding-left: 14px; font-size: 12.5px; }
.wiki-surface .wiki-toc a { color: var(--w-ink-soft); text-decoration: none; border-left: 2px solid transparent; padding-left: 8px; margin-left: -8px; display: block; }
.wiki-surface .wiki-toc a:hover { color: var(--w-ink); }
.wiki-surface .wiki-toc a.is-active { color: var(--w-mark); border-left-color: var(--w-mark); }

.wiki-surface .wiki-reading__main { min-width: 0; }

/* Provenance strip — who/what/when, just under the title. */
.wiki-surface .wiki-provenance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 12px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--w-line-soft);
  color: var(--w-muted);
  font-size: 12.5px;
  font-family: var(--w-font-ui);
  flex-wrap: wrap;
}
.wiki-surface .wiki-provenance__sigil {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--w-mark-soft);
  color: var(--w-mark-deep);
  font-size: 11px;
  font-weight: 600;
}
.wiki-surface .wiki-provenance__rel { color: var(--w-ink-soft); }
.wiki-surface .wiki-provenance__rel strong { color: var(--w-ink); font-weight: 600; }
.wiki-surface .wiki-provenance__copy {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--w-line);
  border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--w-font-mono);
  font-size: 11px;
  color: var(--w-muted);
  cursor: pointer;
}
.wiki-surface .wiki-provenance__copy:hover { color: var(--w-ink); border-color: var(--w-ink-soft); }
.wiki-surface .wiki-provenance__copy.is-copied { color: var(--w-success); border-color: var(--w-success); }

/* Top-of-page summary lead — frontmatter.summary made first-class. */
.wiki-surface .wiki-page-summary {
  font-family: var(--w-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--w-ink-soft);
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--w-mark);
  background: var(--w-bg-raised);
}

/* "Compiled from" — the source document(s) behind a page, top of the article. */
.wiki-surface .wiki-source-callout {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--w-mark);
  border-radius: 4px;
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-source-callout__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface .wiki-source-callout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.wiki-surface .wiki-source-callout__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wiki-surface .wiki-source-callout__kind {
  flex: none;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--w-mark-soft);
  color: var(--w-mark-deep);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wiki-surface .wiki-source-callout__body {
  flex: 1 1 240px;
  min-width: 0;
  display: block;
}
.wiki-surface .wiki-source-callout__link {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--w-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--w-mark);
  overflow-wrap: anywhere;
}
.wiki-surface .wiki-source-callout__link:hover { color: var(--w-mark-deep); }
.wiki-surface .wiki-source-callout__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--w-muted);
  overflow-wrap: anywhere;
}
.wiki-surface .wiki-source-callout__external {
  flex: none;
  align-self: center;
  font-size: 12px;
  color: var(--w-mark-deep);
  white-space: nowrap;
}
/* Getting to the actual document is the reason this callout exists, so the
   file action is a button rather than the bare text link used for the
   secondary "Original ↗" (which points at a live URL, not the retained file). */
.wiki-surface .wiki-source-callout__external--file {
  font-family: var(--w-font-ui);
  font-weight: 600;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--w-mark);
  border-radius: 3px;
  transition: background-color 120ms ease, color 120ms ease;
}
.wiki-surface .wiki-source-callout__external--file:hover,
.wiki-surface .wiki-source-callout__external--file:focus-visible {
  background: var(--w-mark);
  color: var(--w-btn-ink);
}

/* Verify-flag banner at the top of pages that have any flagged content. */
.wiki-surface .wiki-flag-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 18px;
  background: rgba(176, 122, 14, 0.10);
  border: 1px solid rgba(176, 122, 14, 0.30);
  border-radius: 4px;
  font-family: var(--w-font-ui);
  font-size: 13px;
  color: #6a4905;
}
.wiki-surface .wiki-flag-banner__count {
  font-weight: 600;
  color: var(--w-attn);
}
.wiki-surface .wiki-flag-banner__jump {
  margin-left: auto;
  color: var(--w-attn);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
  padding: 0;
}

/* ---------------- The article itself: serif body, real reading ---------------- */
.wiki-surface .wiki-article {
  font-family: var(--w-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--w-ink);
}
.wiki-surface .wiki-article h1 {
  font-family: var(--w-font-ui);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--w-line);
  color: var(--w-ink);
}
.wiki-surface .wiki-article h2 {
  font-family: var(--w-font-ui);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 32px 0 12px;
  color: var(--w-ink);
}
.wiki-surface .wiki-article h3 {
  font-family: var(--w-font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 24px 0 8px;
  color: var(--w-ink);
}
.wiki-surface .wiki-article h4, .wiki-surface .wiki-article h5, .wiki-surface .wiki-article h6 {
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 14px;
  margin: 18px 0 6px;
  color: var(--w-ink);
}
.wiki-surface .wiki-article p { margin: 0 0 16px; }
.wiki-surface .wiki-article ul, .wiki-surface .wiki-article ol { margin: 0 0 18px; padding-left: 26px; }
.wiki-surface .wiki-article li { margin: 4px 0; }
.wiki-surface .wiki-article blockquote {
  margin: 18px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--w-line);
  color: var(--w-ink-soft);
  font-style: italic;
}
.wiki-surface .wiki-article hr { border: 0; border-top: 1px solid var(--w-line); margin: 28px 0; }
.wiki-surface .wiki-article a:not(.wiki-link) { color: var(--w-info); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wiki-surface .wiki-article a:not(.wiki-link):hover { color: var(--w-mark); }
.wiki-surface .wiki-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-family: var(--w-font-ui);
  font-size: 14px;
}
.wiki-surface .wiki-article th, .wiki-surface .wiki-article td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--w-line);
  vertical-align: top;
}
.wiki-surface .wiki-article th { background: var(--w-bg-sunk); font-weight: 600; color: var(--w-ink); }
.wiki-surface .wiki-article pre {
  background: #FAF6EC;
  border: 1px solid var(--w-line);
  border-radius: 4px;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--w-font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--w-ink);
  margin: 18px 0;
}
.wiki-surface .wiki-article p code, .wiki-surface .wiki-article li code, .wiki-surface .wiki-article td code {
  font-family: var(--w-font-mono);
  font-size: 0.9em;
  background: rgba(14, 20, 24, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Wiki-link (light-theme override of the dark defaults). */
.wiki-surface .wiki-link {
  color: var(--w-mark);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 82, 26, 0.35);
  transition: border-color 120ms ease, color 120ms ease;
}
.wiki-surface .wiki-link:hover { color: var(--w-mark-deep); border-bottom-color: var(--w-mark-deep); }
.wiki-surface .wiki-link--red { color: var(--w-danger); border-bottom-style: dashed; border-bottom-color: rgba(182, 42, 28, 0.4); }
.wiki-surface .wiki-link--red:hover { color: #7e1812; border-bottom-color: #7e1812; }

/* Verify-flag inline pills, restyled for paper. */
.wiki-surface .wiki-flag {
  display: inline-block;
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.4);
  vertical-align: baseline;
}
.wiki-surface .wiki-flag--verify        { color: var(--w-danger); background: rgba(182, 42, 28, 0.06); }
.wiki-surface .wiki-flag--quote-needed  { color: var(--w-attn);   background: rgba(176, 122, 14, 0.10); }
.wiki-surface .wiki-flag--confirm       { color: var(--w-info);   background: rgba(42, 133, 181, 0.08); }
.wiki-surface .wiki-flag--fill          { color: var(--w-success);background: rgba(63, 141, 82, 0.08); }

/* Backlinks — richer than before, with subtle ranking treatment. */
.wiki-surface .wiki-backlinks {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--w-line);
}
.wiki-surface .wiki-backlinks__title {
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin: 0 0 10px;
}
.wiki-surface .wiki-backlinks ul { list-style: none; padding: 0; margin: 0; }
.wiki-surface .wiki-backlinks li { padding: 5px 0; border-bottom: 1px solid var(--w-line-soft); font-family: var(--w-font-ui); font-size: 14px; }
.wiki-surface .wiki-backlinks li:last-child { border-bottom: 0; }
/* Backlinks are the strongest navigation on a page, so they have to read as
   links at rest — inheriting --w-ink with no underline made them pixel-
   identical to body text and nobody clicked them. Matches .wiki-link. */
.wiki-surface .wiki-backlinks a {
  color: var(--w-mark);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 82, 26, 0.35);
  transition: border-color 120ms ease, color 120ms ease;
}
.wiki-surface .wiki-backlinks a:hover,
.wiki-surface .wiki-backlinks a:focus-visible { color: var(--w-mark-deep); border-bottom-color: var(--w-mark-deep); }
.wiki-surface .wiki-backlinks__count { color: var(--w-muted); font-size: 12px; }

/* Section blocks + admin panels on the show route. The `wiki-attachments`
   name is historical — page attachments were removed; the rules now dress the
   revision diff panel and the rename/delete forms that borrowed them. */
.wiki-surface .wiki-attachments,
.wiki-surface .wiki-danger {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--w-line);
}
/* Collapsed by default (native <details>), so the destructive controls stop
   competing with the article for attention. */
.wiki-surface .wiki-danger__summary {
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.wiki-surface .wiki-danger__summary::-webkit-details-marker { display: none; }
.wiki-surface .wiki-danger__summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 120ms ease;
}
.wiki-surface .wiki-danger[open] > .wiki-danger__summary::before { transform: rotate(90deg); }
.wiki-surface .wiki-danger__summary:hover { color: var(--w-ink); }
.wiki-surface .wiki-danger__summary:focus-visible { outline: 2px solid var(--w-mark); outline-offset: 3px; }
.wiki-surface .wiki-danger[open] > .wiki-danger__summary { margin-bottom: 10px; }

/* Page status. Sits under the title and again in the Details rail — one
   vocabulary, rendered by partials/_wiki_status.html.twig. */
.wiki-surface .wiki-status {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.wiki-surface .wiki-toc .wiki-status { margin-top: 0; vertical-align: baseline; }
.wiki-surface .wiki-status--caution { color: var(--w-attn); }
.wiki-surface .wiki-status--ok      { color: var(--w-success); }
.wiki-surface .wiki-status--neutral { color: var(--w-muted); }
.wiki-surface .wiki-status-note {
  margin: 6px 0 0;
  font-family: var(--w-font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--w-ink-soft);
  font-weight: 400;
}
/* The author's own words, kept distinct from our gloss of the keyword. */
.wiki-surface .wiki-status-note--author {
  color: var(--w-muted);
  font-style: italic;
  border-left: 2px solid var(--w-line);
  padding-left: 8px;
}

/* Visible entry point for the command palette (which also answers `/`). */
.wiki-surface .wiki-searchbtn { display: inline-flex; align-items: center; gap: 6px; }
.wiki-surface .wiki-searchbtn__key {
  font-family: var(--w-font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid var(--w-line);
  border-radius: 3px;
  color: var(--w-muted);
  background: var(--w-bg-sunk);
}
.wiki-surface .wiki-attachments__title {
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin: 0 0 10px;
}
.wiki-surface .wiki-attachments__upload {
  display: flex; gap: 8px; margin-top: 8px; align-items: center;
  padding: 10px 12px; background: var(--w-bg-raised); border: 1px dashed var(--w-line); border-radius: 4px;
}
.wiki-surface .wiki-danger { border-top-color: rgba(182, 42, 28, 0.20); }

/* ---------------- Editor: split-pane + toolbar ---------------- */
.wiki-surface .wiki-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--w-line);
  border-radius: 6px;
  background: var(--w-bg-raised);
}
@media (max-width: 900px) { .wiki-surface .wiki-editor { grid-template-columns: 1fr; } }
.wiki-surface .wiki-editor__pane { display: flex; flex-direction: column; min-width: 0; }
.wiki-surface .wiki-editor__pane + .wiki-surface .wiki-editor__pane,
.wiki-surface .wiki-editor__pane--preview { border-left: 1px solid var(--w-line); }
@media (max-width: 900px) {
  .wiki-surface .wiki-editor__pane--preview { border-left: 0; border-top: 1px solid var(--w-line); }
}
.wiki-surface .wiki-editor__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--w-bg-sunk);
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface .wiki-editor__toolbar {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.wiki-surface .wiki-editor__tool {
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--w-font-ui);
  font-size: 12px;
  color: var(--w-ink-soft);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.wiki-surface .wiki-editor__tool:hover { background: var(--w-bg-raised); border-color: var(--w-line); color: var(--w-ink); }
.wiki-surface .wiki-editor__tool[data-active="true"] { background: var(--w-mark-soft); color: var(--w-mark-deep); }
.wiki-surface .wiki-editor__textarea {
  flex: 1; min-height: 460px;
  border: 0; outline: none; resize: vertical;
  background: var(--w-bg-raised);
  padding: 16px 18px;
  font-family: var(--w-font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--w-ink);
  width: 100%;
}
.wiki-surface .wiki-editor__preview {
  flex: 1; min-height: 460px;
  padding: 16px 18px;
  background: var(--w-bg);
  overflow-y: auto;
  font-family: var(--w-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--w-ink);
}
.wiki-surface .wiki-editor__preview .wiki-link { color: var(--w-mark); }
.wiki-surface .wiki-editor__preview .wiki-flag { font-family: var(--w-font-ui); }
.wiki-surface .wiki-editor__placeholder { color: var(--w-muted); font-style: italic; }
.wiki-surface .wiki-editor__pane--source { position: relative; }

/* Autocomplete dropdown for [[ */
.wiki-surface .wiki-autocomplete {
  position: absolute;
  z-index: 50;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(20, 16, 8, 0.08);
  min-width: 240px;
  max-width: 380px;
  max-height: 260px;
  overflow-y: auto;
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-autocomplete__item {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--w-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.wiki-surface .wiki-autocomplete__item code { font-family: var(--w-font-mono); font-size: 11px; color: var(--w-muted); }
.wiki-surface .wiki-autocomplete__item[data-active="true"],
.wiki-surface .wiki-autocomplete__item:hover { background: var(--w-mark-soft); color: var(--w-mark-deep); }
.wiki-surface .wiki-autocomplete__item[data-active="true"] code { color: var(--w-mark-deep); }
.wiki-surface .wiki-autocomplete__empty { padding: 10px 12px; font-size: 13px; color: var(--w-muted); font-style: italic; }

/* Form inputs inside the wiki surface */
.wiki-surface .wiki-form { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.wiki-surface .wiki-form__label { display: flex; flex-direction: column; gap: 4px; }
.wiki-surface .wiki-form__label > span:first-child {
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface .wiki-form__input, .wiki-surface .wiki-form__textarea {
  font-family: var(--w-font-ui);
  font-size: 14px;
  color: var(--w-ink);
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wiki-surface .wiki-form__input:focus, .wiki-surface .wiki-form__textarea:focus { border-color: var(--w-mark); box-shadow: 0 0 0 2px rgba(176, 82, 26, 0.12); }
.wiki-surface .wiki-form__textarea--mono, .wiki-surface .wiki-form__input--mono { font-family: var(--w-font-mono); font-size: 13px; }
.wiki-surface .wiki-form__actions { display: flex; gap: 10px; margin-top: 6px; }
.wiki-surface .wiki-form__hint { color: var(--w-muted); font-size: 12px; margin: 6px 0 0; font-family: var(--w-font-body); }
.wiki-surface .wiki-form__hint code { background: rgba(14, 20, 24, 0.06); padding: 1px 5px; border-radius: 3px; font-family: var(--w-font-mono); }

/* ---------------- Search find/ask toggle ---------------- */
.wiki-surface .wiki-searchbar {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--w-line);
  border-radius: 6px;
  background: var(--w-bg-raised);
  overflow: hidden;
  max-width: 720px;
}
.wiki-surface .wiki-searchbar__input {
  flex: 1; min-width: 0;
  border: 0; outline: none;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--w-font-ui);
  font-size: 15px;
  color: var(--w-ink);
}
.wiki-surface .wiki-searchbar__submit { border: 0; background: var(--w-mark); color: var(--ac-on-mark); padding: 0 18px; font-family: var(--w-font-ui); font-size: 13px; cursor: pointer; }
.wiki-surface .wiki-searchbar__submit:hover { background: var(--w-mark-deep); }

/* ---------------- Hover-card link preview ---------------- */
.wiki-link-preview {
  position: absolute;
  z-index: 220;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  background: var(--ac-paper-raised);
  border: 1px solid var(--ac-paper-line);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(20, 16, 8, 0.12);
  font-family: var(--ac-font-ui);
  color: var(--ac-paper-ink);
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.wiki-link-preview.is-open { opacity: 1; transform: translateY(0); }
.wiki-link-preview__type { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-muted); margin-bottom: 4px; }
.wiki-link-preview__title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.wiki-link-preview__summary { font-family: var(--ac-font-reading); font-size: 13.5px; line-height: 1.5; color: var(--ac-paper-ink-soft); margin: 0; }
.wiki-link-preview__missing { font-style: italic; color: var(--ac-danger); font-size: 13px; }

/* ---------------- Command palette overlay ---------------- */
.wiki-palette {
  position: fixed; inset: 0; z-index: 240;
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 80px;
  background: rgba(14, 20, 24, 0.42);
}
.wiki-palette.is-open { display: flex; }
.wiki-palette__panel {
  width: min(520px, calc(100vw - 32px));
  background: var(--ac-paper-raised);
  border: 1px solid var(--ac-paper-line);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(20, 16, 8, 0.2);
  overflow: hidden;
  font-family: var(--ac-font-ui);
}
.wiki-palette__input {
  width: 100%;
  border: 0; outline: none;
  background: var(--ac-paper-raised);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ac-paper-ink);
  border-bottom: 1px solid var(--ac-paper-line);
}
.wiki-palette__list { list-style: none; padding: 4px 0; margin: 0; max-height: 360px; overflow-y: auto; }
.wiki-palette__item {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ac-paper-ink);
}
.wiki-palette__item code { font-family: var(--ac-font-mono); font-size: 11px; color: var(--ac-muted); }
.wiki-palette__item[data-active="true"] { background: rgba(176, 82, 26, 0.10); color: var(--ac-mark-deep); }
.wiki-palette__item[data-active="true"] code { color: var(--ac-mark-deep); }
.wiki-palette__empty { padding: 14px 16px; color: var(--ac-muted); font-style: italic; font-size: 13px; }

/* ---------------- History timeline ---------------- */
.wiki-surface .wiki-history { list-style: none; padding: 0; margin: 0; max-width: 800px; }
.wiki-surface .wiki-history__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--w-line-soft);
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-history__when { font-family: var(--w-font-mono); font-size: 12px; color: var(--w-muted); white-space: nowrap; }
.wiki-surface .wiki-history__who { color: var(--w-ink); font-size: 13px; }
.wiki-surface .wiki-history__who .smallcaps { display: block; color: var(--w-muted); margin-top: 2px; }
.wiki-surface .wiki-history__summary { color: var(--w-ink); font-size: 14px; margin-top: 2px; }
.wiki-surface .wiki-history__summary a { color: var(--w-ink); text-decoration: none; border-bottom: 1px dotted var(--w-line); }
.wiki-surface .wiki-history__summary a:hover { color: var(--w-mark); border-bottom-color: var(--w-mark); }

/* ---------------- Upload activity feed ---------------- */
.wiki-surface .wiki-uploads__count { display: block; margin: 0 0 12px; }
.wiki-surface .wiki-uploads { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.wiki-surface .wiki-uploads__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--w-line-soft);
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-uploads__row:last-child { border-bottom: 0; }
.wiki-surface .wiki-uploads__when {
  font-family: var(--w-font-mono);
  font-size: 12px;
  color: var(--w-muted);
  white-space: nowrap;
  padding-top: 2px;
}
.wiki-surface .wiki-uploads__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wiki-surface .wiki-uploads__kind {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--w-mark);
  background: var(--w-mark-soft, rgba(176, 82, 26, 0.10));
  border: 1px solid var(--w-line);
  border-radius: 3px;
  padding: 2px 6px;
  line-height: 1.4;
}
.wiki-surface .wiki-uploads__title { color: var(--w-ink); font-size: 14px; font-weight: 500; }
.wiki-surface .wiki-uploads__descriptor { color: var(--w-ink-soft); font-size: 13px; margin-top: 3px; }
.wiki-surface .wiki-uploads__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--w-muted);
  margin-top: 5px;
}
.wiki-surface .wiki-uploads__meta code { font-family: var(--w-font-mono); font-size: 11px; color: var(--w-muted); background: transparent; }
.wiki-surface .wiki-uploads__sep { color: var(--w-line); }
.wiki-surface .wiki-uploads__origin { color: var(--w-ink-soft); word-break: break-all; }
.wiki-surface a.wiki-uploads__origin { text-decoration: none; border-bottom: 1px dotted var(--w-line); }
.wiki-surface a.wiki-uploads__origin:hover { color: var(--w-mark); border-bottom-color: var(--w-mark); }
.wiki-surface a.wiki-uploads__title { text-decoration: none; border-bottom: 1px solid var(--w-line); }
.wiki-surface a.wiki-uploads__title:hover { color: var(--w-mark); border-bottom-color: var(--w-mark); }
.wiki-surface .wiki-uploads__pages {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  margin-top: 6px;
}
.wiki-surface .wiki-uploads__pages .smallcaps { color: var(--w-muted); font-size: 10px; }
.wiki-surface .wiki-uploads__pages a { color: var(--w-ink); text-decoration: none; border-bottom: 1px dotted var(--w-line); }
.wiki-surface .wiki-uploads__pages a:hover { color: var(--w-mark); border-bottom-color: var(--w-mark); }
.wiki-surface .wiki-uploads__who { font-size: 12px; color: var(--w-ink); margin-top: 6px; }
.wiki-surface .wiki-uploads__who .smallcaps { font-size: 10px; margin-left: 4px; }
@media (max-width: 720px) {
  .wiki-surface .wiki-uploads__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------- Side-by-side diff ---------------- */
.wiki-surface .wiki-diff {
  width: 100%;
  border: 1px solid var(--w-line);
  border-collapse: collapse;
  font-family: var(--w-font-mono);
  font-size: 12.5px;
  background: var(--w-bg-raised);
}
.wiki-surface .wiki-diff th {
  text-align: left;
  padding: 8px 10px;
  background: var(--w-bg-sunk);
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface .wiki-diff td {
  padding: 4px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--w-line-soft);
  word-break: break-word;
  color: var(--w-ink);
}
.wiki-surface .wiki-diff__row--added   td:nth-child(2) { background: rgba(63, 141, 82, 0.10); }
.wiki-surface .wiki-diff__row--removed td:nth-child(1) { background: rgba(182, 42, 28, 0.08); }
.wiki-surface .wiki-diff__row--changed td               { background: rgba(176, 122, 14, 0.08); }
.wiki-surface .wiki-diff__row--same    td               { color: var(--w-muted); }

/* ---------------- Changeset review ---------------- */
.wiki-surface .wiki-review { max-width: 880px; }
.wiki-surface .wiki-review__status { flex-shrink: 0; }

/* status badge palette (review states beyond seed/draft/live) */
.wiki-surface .wiki-status--pending,
.wiki-surface .wiki-status--review   { color: var(--w-attn); }
.wiki-surface .wiki-status--approved,
.wiki-surface .wiki-status--applied  { color: var(--w-success); }
.wiki-surface .wiki-status--rejected { color: var(--w-danger); }
.wiki-surface .wiki-status--create,
.wiki-surface .wiki-status--update   { color: var(--w-muted); }

/* provenance strip: who / when / source / page count */
.wiki-surface .wiki-review__provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 0 0 24px;
  padding: 12px 16px;
  max-width: 880px;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
}
.wiki-surface .wiki-review__provenance > div { display: flex; flex-direction: column; gap: 2px; }
.wiki-surface .wiki-review__provenance dt {
  font-family: var(--w-font-ui);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface .wiki-review__provenance dd {
  margin: 0; font-family: var(--w-font-ui); font-size: 13px; color: var(--w-ink);
}
.wiki-surface .wiki-review__provenance code { font-family: var(--w-font-mono); font-size: 12px; color: var(--w-ink-soft); }

/* document descriptor + per-page metadata blocks */
.wiki-surface .wiki-review__fieldset {
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--w-bg-raised);
}
.wiki-surface .wiki-review__fieldset legend {
  font-family: var(--w-font-ui);
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; color: var(--w-muted); padding: 0 6px;
}
.wiki-surface .wiki-review__grid { display: flex; gap: 14px; flex-wrap: wrap; }
.wiki-surface .wiki-review__grid + .wiki-review__grid { margin-top: 12px; }
.wiki-surface .wiki-review__grid > label { flex: 1; min-width: 13rem; display: flex; flex-direction: column; gap: 5px; }
.wiki-surface .wiki-review__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.wiki-surface .wiki-review__relations { margin: 0; padding-left: 1.15em; }
.wiki-surface .wiki-review__relations li { margin: 2px 0; }
.wiki-surface .wiki-review__grid > label > span:first-child,
.wiki-surface .wiki-review__field > span:first-child {
  font-family: var(--w-font-ui);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-muted);
}
.wiki-surface .wiki-review__fieldset .wiki-form__input { width: 100%; }

/* per-page card */
.wiki-surface .wiki-review__item {
  border: 1px solid var(--w-line);
  border-radius: 6px;
  background: var(--w-bg-raised);
  padding: 18px;
  margin: 0 0 20px;
}
.wiki-surface .wiki-review__item-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface .wiki-review__item-title { font-family: var(--w-font-ui); font-size: 15px; font-weight: 600; color: var(--w-ink); line-height: 1.35; }
.wiki-surface .wiki-review__item-badges { display: inline-flex; gap: 8px; flex-shrink: 0; }
.wiki-surface .wiki-review__action-tag {
  font-family: var(--w-font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--w-mark-deep); background: var(--w-mark-soft); padding: 1px 7px; border-radius: 3px;
}

/* disclosures */
.wiki-surface .wiki-review details { margin: 10px 0; }
.wiki-surface .wiki-review summary {
  cursor: pointer; font-family: var(--w-font-ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--w-ink-soft); padding: 4px 0;
}
.wiki-surface .wiki-review summary:hover { color: var(--w-mark); }
.wiki-surface .wiki-review details > .wiki-rendered,
.wiki-surface .wiki-review details > pre { margin-top: 10px; }
.wiki-surface .wiki-review details > pre {
  background: var(--w-bg-sunk); border: 1px solid var(--w-line); border-radius: 4px;
  padding: 10px 12px; overflow-x: auto; font-family: var(--w-font-mono); font-size: 12px; color: var(--w-ink-soft);
}

/* The body diff / proposed body render markdown into .wiki-rendered. Their
   fenced blocks (the ```diff diff, any code in the body) become <pre><code>,
   which defaults to `white-space: pre` — long diff lines then run off the right
   edge instead of wrapping inside the 880px column. Wrap them, keeping the
   diff's leading +/-/space and indentation via pre-wrap, and break overlong
   unbreakable tokens (long slug links) rather than overflow. */
.wiki-surface .wiki-review .wiki-rendered pre {
  background: var(--w-bg-sunk); border: 1px solid var(--w-line); border-radius: 4px;
  padding: 10px 12px; margin: 0;
  font-family: var(--w-font-mono); font-size: 12px; line-height: 1.6; color: var(--w-ink-soft);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.wiki-surface .wiki-review .wiki-rendered pre code {
  white-space: inherit; font-family: inherit; font-size: inherit;
  background: none; padding: 0; border: 0;
}
/* Long inline links in the proposed-body prose (full slug paths) shouldn't
   overflow either. */
.wiki-surface .wiki-review .wiki-rendered { overflow-wrap: anywhere; }

/* decision: segmented radio control, no pre-selected default */
.wiki-surface .wiki-review__decide {
  display: inline-flex; margin-top: 16px;
  border: 1px solid var(--w-line); border-radius: 6px; overflow: hidden;
}
.wiki-surface .wiki-review__decide label {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px; font-family: var(--w-font-ui); font-size: 13.5px; color: var(--w-ink-soft);
  cursor: pointer; border-right: 1px solid var(--w-line); user-select: none;
  transition: background-color 100ms ease, color 100ms ease;
}
.wiki-surface .wiki-review__decide label:last-child { border-right: 0; }
.wiki-surface .wiki-review__decide label:hover { background: var(--w-bg-sunk); }
.wiki-surface .wiki-review__decide input { accent-color: var(--w-mark); margin: 0; }
.wiki-surface .wiki-review__decide label:has(input:checked) { background: var(--w-mark-soft); color: var(--w-mark-deep); font-weight: 600; }

/* notes + save */
.wiki-surface .wiki-review__notes { display: flex; flex-direction: column; gap: 6px; margin: 26px 0 0; max-width: 880px; }
/* Beats the display:flex above; the UA [hidden] rule alone loses on specificity. */
.wiki-surface .wiki-review__notes[hidden] { display: none; }
.wiki-surface .wiki-review__notes > label,
.wiki-surface .wiki-review__danger form > label { font-family: var(--w-font-ui); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-muted); }
.wiki-surface .wiki-review__notes > label .wiki-form__hint,
.wiki-surface .wiki-review__danger form > label .wiki-form__hint { display: inline; margin: 0; }
.wiki-surface .wiki-review__notes textarea,
.wiki-surface .wiki-review__danger textarea {
  font-family: var(--w-font-ui); font-size: 14px; color: var(--w-ink);
  background: var(--w-bg-raised); border: 1px solid var(--w-line); border-radius: 4px;
  padding: 10px; min-height: 76px; resize: vertical; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wiki-surface .wiki-review__notes textarea:focus,
.wiki-surface .wiki-review__danger textarea:focus { border-color: var(--w-mark); box-shadow: 0 0 0 2px rgba(176, 82, 26, 0.12); outline: none; }
.wiki-surface .wiki-review__save { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wiki-surface .wiki-review__save .wiki-form__hint { flex: 1 0 100%; }

/* danger zone — whole-changeset reject. A collapsed disclosure: it's a shortcut,
   not a decision the reviewer needs to weigh on every visit. Selectors carry the
   extra `.wiki-review` so they outrank the generic details/summary rules above. */
.wiki-surface .wiki-review details.wiki-review__danger {
  margin: 30px 0 0; padding: 12px 16px; max-width: 880px;
  border: 1px solid rgba(182, 42, 28, 0.28); border-radius: 6px; background: rgba(182, 42, 28, 0.045);
}
.wiki-surface .wiki-review .wiki-review__danger > summary {
  font-size: 13.5px; font-weight: 600; color: var(--w-danger); padding: 0;
}
.wiki-surface .wiki-review .wiki-review__danger > summary:hover { color: var(--w-danger); text-decoration: underline; }
.wiki-surface .wiki-review__danger .wiki-form__hint { margin: 10px 0 0; max-width: 60ch; }
.wiki-surface .wiki-review__danger form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: 16px; max-width: 620px;
}
.wiki-surface .wiki-review__danger .wiki-form__input,
.wiki-surface .wiki-review__danger textarea { width: 100%; }
.wiki-surface .wiki-review__danger button { margin-top: 8px; }
.wiki-surface .btn--danger { background: transparent; color: var(--w-danger); border: 1px solid rgba(182, 42, 28, 0.45); }
.wiki-surface .btn--danger:hover { background: var(--w-danger); color: var(--ac-on-mark); border-color: var(--w-danger); }

.wiki-surface .wiki-review__index { margin-top: 40px; }

@media (max-width: 720px) {
  .wiki-surface .wiki-review__decide { display: flex; flex-direction: column; width: 100%; }
  .wiki-surface .wiki-review__decide label { border-right: 0; border-bottom: 1px solid var(--w-line); }
  .wiki-surface .wiki-review__decide label:last-child { border-bottom: 0; }
}

/* ---------------- Personal-tier band ---------------- */
.wiki-surface--personal {
  --w-bg:        var(--ac-paper-alt);
  --w-bg-raised: var(--ac-paper-alt-raised);
  --w-bg-sunk:   var(--ac-paper-alt-sunk);
}
.wiki-surface--personal .canvas__title em { color: var(--w-mark-deep); }
.wiki-surface--personal .wiki-tenant-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 18px;
  background: var(--w-mark-soft);
  border: 1px solid rgba(176, 82, 26, 0.16);
  border-radius: 999px;
  font-family: var(--w-font-ui);
  font-size: 12px;
  color: var(--w-mark-deep);
  width: max-content;
}
.wiki-surface--personal .wiki-tenant-band__dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--w-mark); display: inline-block;
}

/* Code block placeholder used in empty states / stubs */
.wiki-surface .wiki-empty {
  font-family: var(--w-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--w-ink-soft);
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 32px 28px;
  max-width: 60ch;
  margin: 8px auto;
  text-align: center;
}
.wiki-surface .wiki-empty h2 { font-family: var(--w-font-ui); font-size: 18px; color: var(--w-ink); margin: 0 0 8px; }
.wiki-surface .wiki-empty code { font-family: var(--w-font-mono); font-size: 13px; background: rgba(14, 20, 24, 0.06); padding: 1px 6px; border-radius: 3px; }

/* ---------------- Connect-via-ChatGPT help page ---------------- */
.wiki-surface .wiki-connect { max-width: 820px; }
.wiki-surface .wiki-callout {
  display: flex;
  gap: 12px;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--w-info);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 4px 0 28px;
  font-family: var(--w-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w-ink-soft);
}
.wiki-surface .wiki-callout--warn { border-left-color: var(--w-mark); background: var(--w-mark-soft); }
.wiki-surface .wiki-callout__icon { font-size: 16px; line-height: 1.5; flex: none; }
.wiki-surface .wiki-callout strong { color: var(--w-ink); font-family: var(--w-font-ui); }
.wiki-surface .wiki-callout p { margin: 0 0 6px; }
.wiki-surface .wiki-callout p:last-child { margin-bottom: 0; }
.wiki-surface .wiki-fields {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 22px;
  font-family: var(--w-font-ui);
  font-size: 13.5px;
}
.wiki-surface .wiki-fields th, .wiki-surface .wiki-fields td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--w-line);
  vertical-align: top;
}
.wiki-surface .wiki-fields th { background: var(--w-bg-sunk); font-weight: 600; color: var(--w-ink); white-space: nowrap; }
.wiki-surface .wiki-fields code {
  font-family: var(--w-font-mono);
  font-size: 12.5px;
  background: rgba(14, 20, 24, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ---------------- Ingest tabs inside the paper surface ----------------
   Tab switcher driven by three hidden radio buttons named `mode`. The radio
   value posts as the form's mode field, and CSS sibling selectors show the
   matching panel. No JS dependency. */
.wiki-surface .wiki-ingest { max-width: 920px; display: flex; flex-direction: column; gap: 16px; }
.wiki-surface .wiki-ingest__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--w-line);
}
.wiki-surface .wiki-ingest__tab {
  padding: 8px 16px;
  font-family: var(--w-font-ui);
  font-size: 13px;
  color: var(--w-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wiki-surface .wiki-ingest__tab:hover { color: var(--w-ink); }
.wiki-surface #ingest-mode-paste:checked ~ .wiki-ingest__tabs label[for="ingest-mode-paste"],
.wiki-surface #ingest-mode-file:checked  ~ .wiki-ingest__tabs label[for="ingest-mode-file"],
.wiki-surface #ingest-mode-url:checked   ~ .wiki-ingest__tabs label[for="ingest-mode-url"] {
  color: var(--w-mark-deep);
  border-bottom-color: var(--w-mark);
  font-weight: 600;
}
.wiki-surface .wiki-ingest__filedrop {
  border: 1px dashed var(--w-line);
  background: var(--w-bg-raised);
  padding: 28px 24px;
  text-align: center;
  border-radius: 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
.wiki-surface .wiki-ingest__filedrop:hover { border-color: var(--w-mark); background: var(--w-bg); }
.wiki-surface .wiki-ingest__filedrop-label { font-family: var(--w-font-ui); font-size: 14px; color: var(--w-ink); display: block; margin-bottom: 4px; }
.wiki-surface .wiki-form__hint--warn { color: var(--w-mark); }

/* ---- Dashboard AI source intake (wiki-dropzone) ---------------------------
   Prominent, full-width intake under the hero: file / paste / url tabs. Reuses
   the .wiki-ingest tab + .wiki-ingest__filedrop styling; this block makes the
   file drop taller and centred and adds the drag-over + processing states. */
.wiki-intake { margin: 0 0 28px; }
.wiki-intake__input { display: none; }
.wiki-intake__form.is-busy { opacity: 0.9; }
.wiki-surface--dashboard .wiki-intake__drop,
.wiki-surface--intake .wiki-intake__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 24px;
  cursor: pointer;
}
.wiki-surface--dashboard .wiki-intake__drop.is-over,
.wiki-surface--intake .wiki-intake__drop.is-over {
  border-color: var(--w-mark);
  background: var(--w-bg);
}
.wiki-intake__icon { font-size: 24px; line-height: 1; color: var(--w-mark); }
.wiki-intake__title { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.wiki-intake__hint { max-width: 580px; margin: 0; }
.wiki-intake__actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.wiki-intake__busy { font-size: 14px; color: var(--w-ink); }

/* Optional-context field + chosen-file feedback (shared intake refinements) */
.wiki-form__optional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
/* Sits directly under the source widget now that the filing chips are gone —
   the rule keeps it reading as a separate step rather than a fourth panel. */
.wiki-intake__context { margin-top: 4px; border-top: 1px solid var(--w-line); padding-top: 18px; }
.wiki-intake__prompt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* The chosen filename only shows once a file is picked (JS adds .has-file). */
.wiki-intake__chosen { display: none; }
.wiki-surface--dashboard .wiki-intake__drop.has-file,
.wiki-surface--intake .wiki-intake__drop.has-file {
  border-style: solid;
  border-color: var(--w-mark);
  background: var(--w-bg);
}
.wiki-surface--dashboard .wiki-intake__drop.has-file .wiki-intake__chosen,
.wiki-surface--intake .wiki-intake__drop.has-file .wiki-intake__chosen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--w-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--w-ink);
  word-break: break-all;
}
.wiki-surface--dashboard .wiki-intake__drop.has-file .wiki-intake__chosen::before,
.wiki-surface--intake .wiki-intake__drop.has-file .wiki-intake__chosen::before {
  content: "✓";
  color: var(--w-mark);
  font-weight: 700;
}

/* Primary CTA — a real, rounded, filled button using the wiki button colour.
   Echoes the search button's solid look but with friendlier rounding. */
.wiki-surface .wiki-intake__submit {
  background: var(--w-btn);
  color: var(--w-btn-ink);
  border: 1px solid var(--w-btn-deep);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(143, 63, 17, 0.20);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.wiki-surface .wiki-intake__submit:hover {
  background: var(--w-btn-deep);
  box-shadow: 0 2px 6px rgba(143, 63, 17, 0.26);
}
.wiki-surface .wiki-intake__submit:disabled {
  opacity: 0.65;
  cursor: default;
  box-shadow: none;
}

/* ---- Add-to-wiki page (wiki-surface--intake) ------------------------------
   Dedicated contribution page reached from the wiki index "Add to wiki" button
   (WikiUploadController::intakeLanding). Reuses the .wiki-intake / .wiki-ingest
   form wholesale; this block styles only the page chrome: back link, header,
   the optional-details disclosure, and the "recently added" resubmit guard. */
/* The surface stays full-bleed so the paper spans the canvas like every other
   wiki page (--dashboard, page show). The 880px reading measure lives on an
   inner shell — capping the surface itself would shrink the paper to a narrow
   column floating in the dark canvas. */
.wiki-surface--intake { padding: 0; }
.wiki-intake-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 36px 64px;
}
@media (max-width: 900px) { .wiki-intake-shell { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 560px) { .wiki-intake-shell { padding-left: 14px; padding-right: 14px; } }

.wiki-add__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--w-font-ui); font-size: 13px; color: var(--w-muted);
  text-decoration: none; padding: 6px 2px; border-radius: 6px;
  transition: color 140ms ease;
}
.wiki-add__back:hover { color: var(--w-mark); }
.wiki-add__back svg { width: 15px; height: 15px; }

.wiki-add__head { margin: 16px 0 26px; }
.wiki-add__title {
  font-family: var(--w-font-body); font-weight: 600;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0; color: var(--w-ink); text-wrap: balance;
}
.wiki-add__title em { font-style: normal; color: var(--w-mark); }

/* ---- Async intake status page (intake-card) ------------------------------- */
.wiki-surface .intake-card {
  max-width: 640px;
  border: 1px solid var(--w-line);
  background: var(--w-bg-raised);
  border-radius: 12px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
}

/* Source chip */
.intake-card__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 13px 6px 11px;
  background: var(--w-bg-sunk);
  border: 1px solid var(--w-line);
  border-radius: 999px;
  margin-bottom: 22px;
}
.intake-card__source-icon { flex: none; width: 16px; height: 16px; color: var(--w-mark); }
.intake-card__filename {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--w-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Head: indicator + headline */
.intake-card__head { display: flex; align-items: flex-start; gap: 14px; }
.intake-card__headline { font-size: 17px; font-weight: 600; color: var(--w-ink); line-height: 1.35; }
.intake-card__sub { margin: 7px 0 0; font-size: 14px; color: var(--w-ink-soft); line-height: 1.5; max-width: 60ch; }

/* Spinner */
.intake-spinner {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2.5px solid var(--w-mark-soft);
  border-top-color: var(--w-mark);
  animation: intake-spin 0.8s linear infinite;
}
@keyframes intake-spin { to { transform: rotate(360deg); } }

/* Status badges */
.intake-badge {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
}
.intake-badge svg { width: 16px; height: 16px; }
.intake-badge--ok    { background: rgba(63, 141, 82, 0.14); color: var(--w-success); }
.intake-badge--err   { background: rgba(176, 82, 26, 0.14); color: var(--w-mark-deep); }
.intake-badge--muted { background: var(--w-bg-sunk); color: var(--w-muted); }

/* Step tracker */
.intake-steps { display: flex; list-style: none; margin: 26px 0 0; padding: 0; }
.intake-steps__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--w-muted);
  text-align: center;
}
.intake-steps__step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--w-line);
}
.intake-steps__step:first-child::before { display: none; }
.intake-steps__dot {
  position: relative;
  z-index: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--w-bg-raised);
  border: 2px solid var(--w-line);
}
.intake-steps__step.is-done .intake-steps__dot { background: var(--w-mark); border-color: var(--w-mark); }
.intake-steps__step.is-done::before { background: var(--w-mark); }
.intake-steps__step.is-done .intake-steps__label { color: var(--w-ink-soft); }
.intake-steps__step.is-active .intake-steps__dot {
  background: var(--w-mark);
  border-color: var(--w-mark);
  animation: intake-step-pulse 1.4s ease-in-out infinite;
}
.intake-steps__step.is-active .intake-steps__label { color: var(--w-ink); font-weight: 600; }
@keyframes intake-step-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--w-mark-soft); }
  50%      { box-shadow: 0 0 0 6px var(--w-mark-soft); }
}

.intake-card__actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.intake-card__error {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--w-bg-sunk);
  border: 1px solid var(--w-line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--w-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================================
   Wiki homepage dashboard
   ----------------------------------------------------------------------------
   The wiki index is the front door — it needs to sell the project. Five blocks:
   hero (search + value-prop), KPI strip, coverage panel + spotlight rail,
   recent + value prop, then the browse-by-category grid. Scoped tightly to
   `.wiki-surface--dashboard` so other wiki pages (page show, edit, history) are
   unaffected.
   ========================================================================== */

/* Dashboard sections sit as direct children of .wiki-surface (not inside
   .canvas__header/.canvas__body), so they don't inherit the 36px gutter the
   older wiki pages get. Pad the dashboard scope itself to give the sidebar
   edge some breathing room and match the canvas convention elsewhere. */
.wiki-surface--dashboard {
  padding-left: 36px;
  padding-right: 36px;
}
@media (max-width: 980px) {
  .wiki-surface--dashboard { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 720px) {
  .wiki-surface--dashboard { padding-left: 14px; padding-right: 14px; }
}

.wiki-surface--dashboard .wiki-hero {
  margin: 8px 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--w-line);
}
.wiki-surface--dashboard .wiki-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.wiki-surface--dashboard .wiki-hero__lead { min-width: 0; max-width: 760px; }
.wiki-surface--dashboard .wiki-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--w-font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--w-muted);
  margin-bottom: 10px;
}
.wiki-surface--dashboard .wiki-hero__badge {
  color: var(--w-mark);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.wiki-surface--dashboard .wiki-hero__sep { opacity: 0.4; }
.wiki-surface--dashboard .wiki-hero__hint { font-family: var(--w-font-mono); font-size: 11px; }
.wiki-surface--dashboard .wiki-hero__hint code {
  font-family: var(--w-font-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(14, 20, 24, 0.06);
  border-radius: 3px;
}
.wiki-surface--dashboard .wiki-hero__title {
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--w-ink);
  margin: 0 0 14px;
}
.wiki-surface--dashboard .wiki-hero__title em {
  font-style: normal;
  color: var(--w-mark);
  font-weight: 600;
}
.wiki-surface--dashboard .wiki-hero__lede {
  font-family: var(--w-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--w-ink-soft);
  margin: 0;
  max-width: 64ch;
}
.wiki-surface--dashboard .wiki-hero__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.wiki-surface--dashboard .wiki-hero__import { display: inline-block; }

.wiki-surface--dashboard .wiki-hero__search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 4px 4px 4px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wiki-surface--dashboard .wiki-hero__search:focus-within {
  border-color: var(--w-mark);
  box-shadow: 0 0 0 3px var(--w-mark-soft);
}
.wiki-surface--dashboard .wiki-hero__search-icon {
  width: 18px;
  height: 18px;
  color: var(--w-muted);
  flex-shrink: 0;
}
.wiki-surface--dashboard .wiki-hero__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--w-font-ui);
  font-size: 15px;
  color: var(--w-ink);
  padding: 12px 12px;
  min-width: 0;
}
.wiki-surface--dashboard .wiki-hero__search-input::placeholder { color: var(--w-muted); }
.wiki-surface--dashboard .wiki-hero__search-btn {
  background: var(--w-mark);
  color: var(--ac-on-mark);
  border: 1px solid var(--w-mark-deep);
  font-family: var(--w-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 160ms ease;
}
.wiki-surface--dashboard .wiki-hero__search-btn:hover { background: var(--w-mark-deep); }

.wiki-surface--dashboard .wiki-hero__suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--w-font-ui);
  font-size: 12.5px;
}
.wiki-surface--dashboard .wiki-hero__suggest-label {
  color: var(--w-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-right: 2px;
}
.wiki-surface--dashboard .wiki-hero__suggest a {
  color: var(--w-ink-soft);
  text-decoration: none;
  padding: 3px 9px;
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 999px;
  transition: color 140ms ease, border-color 140ms ease;
}
.wiki-surface--dashboard .wiki-hero__suggest a:hover {
  color: var(--w-mark);
  border-color: var(--w-mark);
}
/* Shown in place of the chips while no page links to another. Deliberately not
   pill-shaped: it is prose about an empty state, not something to click. */
.wiki-surface--dashboard .wiki-hero__suggest-empty {
  color: var(--w-muted);
  font-style: italic;
}

/* ---------------- KPI strip ---------------- */
.wiki-surface--dashboard .wiki-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 1180px) {
  .wiki-surface--dashboard .wiki-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wiki-surface--dashboard .wiki-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wiki-surface--dashboard .wiki-kpi {
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 16px 18px 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
/* Cards rendered as <a> (they link to the detail behind the count). */
.wiki-surface--dashboard a.wiki-kpi {
  transition: border-color .15s ease, transform .15s ease;
}
.wiki-surface--dashboard a.wiki-kpi:hover {
  border-color: var(--w-mark);
  transform: translateY(-1px);
}
.wiki-surface--dashboard a.wiki-kpi:focus-visible {
  outline: 2px solid var(--w-mark);
  outline-offset: 2px;
}
.wiki-surface--dashboard .wiki-kpi__label {
  font-family: var(--w-font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wiki-surface--dashboard .wiki-kpi__value {
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--w-ink);
  font-variant-numeric: tabular-nums;
}
.wiki-surface--dashboard .wiki-kpi__delta {
  font-family: var(--w-font-ui);
  font-size: 12px;
  color: var(--w-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.wiki-surface--dashboard .wiki-kpi__delta--up { color: var(--w-success); }
.wiki-surface--dashboard .wiki-kpi__delta--down { color: var(--w-danger); }
.wiki-surface--dashboard .wiki-kpi__delta a { color: var(--w-mark); text-decoration: none; font-weight: 500; }
.wiki-surface--dashboard .wiki-kpi__delta a:hover { text-decoration: underline; text-underline-offset: 2px; }
.wiki-surface--dashboard .wiki-kpi__arrow { font-size: 9px; line-height: 1; }
.wiki-surface--dashboard .wiki-kpi--cta {
  background: linear-gradient(180deg, var(--w-bg-raised), var(--w-mark-soft));
  border-color: rgba(176, 82, 26, 0.30);
}

/* ---------------- Dash row (coverage + spotlight | recent + why) ---------------- */
.wiki-surface--dashboard .wiki-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 28px;
  align-items: flex-start;
}
.wiki-surface--dashboard .wiki-dash--2col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
  .wiki-surface--dashboard .wiki-dash,
  .wiki-surface--dashboard .wiki-dash--2col { grid-template-columns: 1fr; }
}

.wiki-surface--dashboard .wiki-panel {
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 20px 22px 18px;
}
.wiki-surface--dashboard .wiki-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--w-line);
}
.wiki-surface--dashboard .wiki-panel__head--bare {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 18px;
}
.wiki-surface--dashboard .wiki-panel__title {
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin: 0;
}
.wiki-surface--dashboard .wiki-panel__sub {
  font-family: var(--w-font-ui);
  font-size: 12px;
  color: var(--w-muted);
}
.wiki-surface--dashboard .wiki-panel__more {
  font-family: var(--w-font-ui);
  font-size: 12px;
  color: var(--w-mark);
  text-decoration: none;
}
.wiki-surface--dashboard .wiki-panel__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Knowledge map (family → category sitemap) ---------------- */
.wiki-surface--dashboard .wiki-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 28px;
}
@media (max-width: 1080px) {
  .wiki-surface--dashboard .wiki-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}
@media (max-width: 620px) {
  .wiki-surface--dashboard .wiki-map { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.wiki-surface--dashboard .wiki-map__family { min-width: 0; }
.wiki-surface--dashboard .wiki-map__family-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--w-mark-deep);
}
.wiki-surface--dashboard .wiki-map__family-count {
  font-family: var(--w-font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}
.wiki-surface--dashboard .wiki-map__family-q {
  margin: 0 0 8px;
  font-family: var(--w-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--w-muted);
}
.wiki-surface--dashboard .wiki-map__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wiki-surface--dashboard .wiki-map__cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--w-ink);
  font-family: var(--w-font-ui);
  font-size: 13.5px;
  line-height: 1.35;
}
.wiki-surface--dashboard .wiki-map__cat:hover,
.wiki-surface--dashboard .wiki-map__cat:focus-visible {
  background: var(--w-mark-soft);
  color: var(--w-mark-deep);
}
.wiki-surface--dashboard .wiki-map__cat:hover .wiki-map__cat-label { text-decoration: underline; text-underline-offset: 2px; }
.wiki-surface--dashboard .wiki-map__cat-label { min-width: 0; overflow-wrap: anywhere; }
.wiki-surface--dashboard .wiki-map__cat-count {
  flex: none;
  font-family: var(--w-font-mono);
  font-size: 11.5px;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}
/* An empty category stays visible and clickable — the gap is the signal —
   but recedes so a scan reads the populated shelves first. */
.wiki-surface--dashboard .wiki-map__cat--empty { color: var(--w-muted); }
.wiki-surface--dashboard .wiki-map__cat--empty .wiki-map__cat-count { opacity: 0.55; }
.wiki-surface--dashboard .wiki-map__empty {
  font-family: var(--w-font-body);
  font-size: 13px;
  color: var(--w-muted);
  margin: 0;
}

/* ---------------- Spotlight rail ---------------- */
.wiki-surface--dashboard .wiki-spotlight {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wiki-surface--dashboard .wiki-feature {
  background: linear-gradient(180deg, var(--ac-paper-raised) 0%, #F4EEDF 100%);
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--w-mark);
  border-radius: 6px;
  padding: 18px 20px 16px;
}
.wiki-surface--dashboard .wiki-feature__eyebrow {
  font-family: var(--w-font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--w-mark);
  margin-bottom: 8px;
}
.wiki-surface--dashboard .wiki-feature__title {
  font-family: var(--w-font-body);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.wiki-surface--dashboard .wiki-feature__title a {
  color: var(--w-ink);
  text-decoration: none;
}
.wiki-surface--dashboard .wiki-feature__title a:hover {
  color: var(--w-mark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiki-surface--dashboard .wiki-feature__summary {
  font-family: var(--w-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--w-ink-soft);
  margin: 0 0 10px;
}
.wiki-surface--dashboard .wiki-feature__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  color: var(--w-muted);
}
.wiki-surface--dashboard .wiki-feature__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--w-muted);
  opacity: 0.7;
}

.wiki-surface--dashboard .wiki-trending {
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 18px 20px 16px;
}
.wiki-surface--dashboard .wiki-trending__title {
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin: 0 0 2px;
}
.wiki-surface--dashboard .wiki-trending__sub {
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  color: var(--w-muted);
  margin: 0 0 12px;
  opacity: 0.85;
}
.wiki-surface--dashboard .wiki-trending__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: trend;
}
.wiki-surface--dashboard .wiki-trending__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface--dashboard .wiki-trending__list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.wiki-surface--dashboard .wiki-trending__rank {
  font-family: var(--w-font-mono);
  font-size: 11px;
  color: var(--w-muted);
  letter-spacing: 0.04em;
}
.wiki-surface--dashboard .wiki-trending__link {
  font-family: var(--w-font-ui);
  font-size: 13.5px;
  color: var(--w-ink);
  text-decoration: none;
  line-height: 1.35;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiki-surface--dashboard .wiki-trending__link:hover { color: var(--w-mark); }
.wiki-surface--dashboard .wiki-trending__hits {
  font-family: var(--w-font-mono);
  font-size: 11.5px;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Recently changed ---------------- */
.wiki-surface--dashboard .wiki-recent {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wiki-surface--dashboard .wiki-recent li {
  padding: 10px 0;
  border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface--dashboard .wiki-recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.wiki-surface--dashboard .wiki-recent__title {
  font-family: var(--w-font-ui);
  font-size: 14px;
  line-height: 1.35;
}
.wiki-surface--dashboard .wiki-recent__title a {
  color: var(--w-ink);
  text-decoration: none;
  font-weight: 500;
}
.wiki-surface--dashboard .wiki-recent__title a:hover { color: var(--w-mark); text-decoration: underline; text-underline-offset: 3px; }
.wiki-surface--dashboard .wiki-recent__meta {
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  color: var(--w-muted);
  margin-top: 2px;
}

/* ---------------- "Other ways in" panel ---------------- */
.wiki-surface--dashboard .wiki-panel__link {
  /* block, not inline-block: the panel holds two sibling anchors with no
     separator between them, so inline flow ran them into one string —
     "Email documents to the wiki →Connect an assistant to the wiki →". */
  display: block;
  margin-top: 16px;
  font-family: var(--w-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--w-mark);
  text-decoration: none;
}
.wiki-surface--dashboard .wiki-panel__link:hover { color: var(--w-mark-deep); }

/* ---------------- Browse by category grid ---------------- */
.wiki-surface--dashboard .wiki-categories { margin-top: 8px; }
.wiki-surface--dashboard .wiki-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.wiki-surface--dashboard .wiki-cat {
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wiki-surface--dashboard .wiki-cat:hover {
  border-color: var(--w-ink-soft);
  box-shadow: 0 1px 0 var(--w-line);
}
.wiki-surface--dashboard .wiki-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--w-line-soft);
  padding-bottom: 8px;
}
.wiki-surface--dashboard .wiki-cat__title {
  font-family: var(--w-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin: 0;
}
.wiki-surface--dashboard .wiki-cat__count {
  font-family: var(--w-font-mono);
  font-size: 12px;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}
.wiki-surface--dashboard .wiki-cat__blurb {
  font-family: var(--w-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--w-ink-soft);
  margin: 0;
}
.wiki-surface--dashboard .wiki-cat__pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wiki-surface--dashboard .wiki-cat__pages a {
  font-family: var(--w-font-ui);
  font-size: 13.5px;
  color: var(--w-ink);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiki-surface--dashboard .wiki-cat__pages a:hover {
  color: var(--w-mark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiki-surface--dashboard .wiki-cat__more {
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  color: var(--w-muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Category sitemap (/wiki/categories) — the authoritative taxonomy view.

   Deliberately a list, not the dashboard's card grid: the dashboard grid is a
   *content* view answering "what's in the wiki", where cards of page links
   work. This is a *reference* view answering "what categories exist and what
   does each mean", which is read top-to-bottom and wants the descriptions to
   line up in one scannable column.
   --------------------------------------------------------------------------- */
.wiki-surface .wiki-cats__section { margin-bottom: 34px; }

.wiki-surface .wiki-cats__head {
  border-bottom: 1px solid var(--w-line);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.wiki-surface .wiki-cats__title {
  font-family: var(--w-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin: 0 0 4px;
}
.wiki-surface .wiki-cats__sub {
  font-family: var(--w-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w-muted);
  margin: 0;
  max-width: 62ch;
}

/* Family group inside the content-type section — a lighter heading than the
   section head above it, so the hierarchy reads family < section. */
.wiki-surface .wiki-cats__family { margin-top: 22px; }
.wiki-surface .wiki-cats__family-title {
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-mark);
  margin: 0 0 3px;
}
.wiki-surface .wiki-cats__family-sub {
  font-family: var(--w-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--w-muted);
  margin: 0 0 6px;
  max-width: 62ch;
}
.wiki-surface .wiki-cats__empty {
  font-family: var(--w-font-body);
  font-size: 13px;
  color: var(--w-muted);
  margin: 12px 0 0;
}

.wiki-surface .wiki-cats__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wiki-surface .wiki-cats__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface .wiki-cats__row:last-child { border-bottom: 0; }

.wiki-surface .wiki-cats__main { min-width: 0; }
.wiki-surface .wiki-cats__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.wiki-surface .wiki-cats__name {
  font-family: var(--w-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--w-ink);
  text-decoration: none;
}
.wiki-surface a.wiki-cats__name:hover {
  color: var(--w-mark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiki-surface .wiki-cats__slug {
  font-family: var(--w-font-mono);
  font-size: 11.5px;
  color: var(--w-muted);
}
.wiki-surface .wiki-cats__tag {
  font-family: var(--w-font-ui);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-muted);
  border: 1px solid var(--w-line);
  border-radius: 3px;
  padding: 1px 6px;
  text-decoration: none;
}
.wiki-surface a.wiki-cats__tag:hover { color: var(--w-mark); border-color: var(--w-ink-soft); }
.wiki-surface .wiki-cats__tag--warn { color: var(--ac-mark-paper); border-color: var(--ac-mark-paper); }

.wiki-surface .wiki-cats__blurb {
  font-family: var(--w-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w-ink-soft);
  margin: 0;
  max-width: 72ch;
}
/* An undescribed category is a gap worth seeing, not blank space to skip. */
.wiki-surface .wiki-cats__blurb--missing {
  color: var(--w-muted);
  font-style: italic;
}

/* The constraints half of a category: what an entity page is expected to
   record, and which pages a relation may join. Deliberately quieter than the
   description — you read the prose to decide where a page belongs and glance
   at this to confirm. */
.wiki-surface .wiki-cats__shape {
  font-family: var(--w-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--w-muted);
  margin: 4px 0 0;
  max-width: 72ch;
}
.wiki-surface .wiki-cats__shape code {
  font-family: inherit;
  color: var(--w-ink-soft);
  border-bottom: 1px dotted var(--w-line);
}
.wiki-surface .wiki-cats__shape-type {
  font-family: var(--w-font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin-left: 3px;
}

.wiki-surface .wiki-cats__side {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.wiki-surface .wiki-cats__count {
  font-family: var(--w-font-mono);
  font-size: 12px;
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
}
.wiki-surface .wiki-cats__edit {
  font-family: var(--w-font-ui);
  font-size: 12.5px;
  color: var(--w-mark);
  text-decoration: none;
}
.wiki-surface .wiki-cats__edit:hover { text-decoration: underline; text-underline-offset: 3px; }

.wiki-surface .wiki-cats__note {
  font-family: var(--w-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w-muted);
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--w-line);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 0 0 26px;
  max-width: 78ch;
}
.wiki-surface .wiki-cats__note--warn { border-left-color: var(--ac-mark-paper); color: var(--w-ink-soft); }
.wiki-surface .wiki-cats__empty {
  font-family: var(--w-font-body);
  font-size: 13px;
  color: var(--w-muted);
  padding: 14px 0;
  margin: 0;
}

/* ---- one category's pages (/wiki/categories/{facet}/{slug}) ---- */
.wiki-surface .wiki-cats__meta {
  font-family: var(--w-font-mono);
  font-size: 12px;
  color: var(--w-muted);
  margin-bottom: 10px;
}
.wiki-surface .wiki-cats__pages { list-style: none; padding: 0; margin: 0; }
.wiki-surface .wiki-cats__page {
  padding: 14px 0;
  border-bottom: 1px solid var(--w-line-soft);
}
.wiki-surface .wiki-cats__page:last-child { border-bottom: 0; }
.wiki-surface .wiki-cats__page-link {
  font-family: var(--w-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--w-ink);
  text-decoration: none;
}
.wiki-surface .wiki-cats__page-link:hover {
  color: var(--w-mark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiki-surface .wiki-cats__page-summary {
  font-family: var(--w-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w-ink-soft);
  margin: 4px 0 6px;
  max-width: 76ch;
}
.wiki-surface .wiki-cats__page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- add / edit form ---- */
.wiki-surface .wiki-cat-form { max-width: 640px; }
.wiki-surface .wiki-cat-form__field { margin-bottom: 22px; }
.wiki-surface .wiki-cat-form__label {
  display: block;
  font-family: var(--w-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin-bottom: 6px;
}
.wiki-surface .wiki-cat-form__input {
  width: 100%;
  font-family: var(--w-font-ui);
  font-size: 14px;
  color: var(--w-ink);
  background: var(--w-bg-raised);
  border: 1px solid var(--w-line);
  border-radius: 4px;
  padding: 9px 11px;
}
.wiki-surface .wiki-cat-form__input:focus {
  outline: none;
  border-color: var(--w-ink-soft);
  box-shadow: 0 0 0 3px var(--w-line-soft);
}
.wiki-surface .wiki-cat-form__input--mono { font-family: var(--w-font-mono); font-size: 13px; }
.wiki-surface .wiki-cat-form__input--area { line-height: 1.5; resize: vertical; }

.wiki-surface .wiki-cat-form__static {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--w-font-ui);
  font-size: 14px;
  color: var(--w-ink-soft);
  padding: 9px 0;
}
.wiki-surface .wiki-cat-form__static--mono { font-family: var(--w-font-mono); font-size: 13px; }
.wiki-surface .wiki-cat-form__fixed {
  font-family: var(--w-font-ui);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-muted);
  border: 1px solid var(--w-line);
  border-radius: 3px;
  padding: 1px 6px;
}
.wiki-surface .wiki-cat-form__help {
  font-family: var(--w-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--w-muted);
  margin: 6px 0 0;
}
.wiki-surface .wiki-cat-form__help code {
  font-family: var(--w-font-mono);
  font-size: 11.5px;
  color: var(--w-ink-soft);
}
/* The list of slugs a domain/range field will accept — reference material to
   scan, not a sentence to read, so it gets the mono treatment and wraps. */
.wiki-surface .wiki-cat-form__help--mono {
  font-family: var(--w-font-mono);
  font-size: 11px;
  line-height: 1.7;
  word-break: break-word;
}
.wiki-surface .wiki-cat-form__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 28px;
}
.wiki-surface .wiki-cat-form__trail {
  font-family: var(--w-font-body);
  font-size: 12px;
  color: var(--w-muted);
  margin: 16px 0 0;
}
/* ==========================================================================
   Classes introduced when the templates were swept for inline styles and
   hardcoded hexes. Every colour here goes through the --w-* wiki tokens (or
   --ac-* outside .wiki-surface), so re-skinning stays a brand-file edit.

   The literals these replaced were not wrong values — .wiki-surface is paper
   in both themes on purpose — they just bypassed the token layer.
   ========================================================================== */

/* Page-detail rail (wiki/page.html.twig). Was an inline font-family plus
   per-<li> colour literals. */
.wiki-surface .wiki-toc--details {
  font-family: var(--w-font-ui);
}
.wiki-surface .wiki-toc--details li {
  padding: 3px 0;
  color: var(--w-ink-soft);
  overflow-wrap: break-word;
  word-break: break-word;
}
.wiki-surface .wiki-toc--details strong { color: var(--w-ink); }

/* Rename / soft-delete forms inside the collapsed "Page actions" details.
   These were borrowing .wiki-attachments__upload and then overriding three of
   its properties inline. */
.wiki-surface .wiki-danger__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid var(--w-line);
  border-radius: var(--radius-xl);
}
.wiki-surface .wiki-danger__form--destructive { border-color: var(--w-danger); }
.wiki-surface .wiki-danger__label {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--w-ink-soft);
}
.wiki-surface .wiki-danger__input { max-width: 340px; }
.wiki-surface .wiki-danger__btn { color: var(--w-danger); }

/* Shared action row for the wiki's empty / not-found states. */
.wiki-surface .wiki-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

/* "Nothing changed yet" — replaced a block of fabricated recent-activity rows. */
.wiki-surface .wiki-recent__empty {
  font-size: 13px;
  margin: 4px 0 0;
}

/* Result-count / hint line on the search page (was margin-top:18px, three times). */
.wiki-surface .wiki-search__note { margin-top: 18px; }

/* Personal-wiki source provenance. */
.wiki-surface .wiki-personal__source-line {
  font-family: var(--w-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w-ink-soft);
  margin: 0;
}
.wiki-surface .wiki-personal__source-when { color: var(--w-muted); }
.wiki-surface .wiki-personal__tag { color: var(--w-mark); }

/* Field wrapper used by wiki/_editor.html.twig, replacing an inline-styled
   <div> that was copied into three authoring templates. */
.wiki-surface .wiki-form__field-label {
  font-family: var(--w-font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  margin-bottom: 6px;
}

/* A hint sitting inline in a sentence rather than as a standalone caption —
   the base .wiki-form__hint uppercases and letter-spaces, which reads wrong
   mid-label. Was patched inline four times on the changeset screen. */
.wiki-surface .wiki-form__hint--plain {
  text-transform: none;
  letter-spacing: 0;
}

/* Dashboard "Other ways in" panel — what survived of the About Atlas Wiki
   marketing block. */
.wiki-surface--dashboard .wiki-panel--ways { background: var(--w-bg); }

/* Collapsed "advanced" group on the authoring forms — currently the YAML
   front-matter box, which used to sit between Title and Body as a peer field. */
.wiki-surface .wiki-form__advanced {
  border: 1px solid var(--w-line);
  border-radius: var(--radius-xl);
  padding: 10px 14px;
}
.wiki-surface .wiki-form__advanced > summary {
  font-family: var(--w-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
  cursor: pointer;
}
.wiki-surface .wiki-form__advanced > summary:hover { color: var(--w-ink); }
.wiki-surface .wiki-form__advanced > summary:focus-visible {
  outline: 2px solid var(--w-mark);
  outline-offset: 3px;
}
.wiki-surface .wiki-form__advanced[open] > summary { margin-bottom: 12px; }

/* Radio row in the shared .form system — introduced when skills/form.html.twig
   was rebuilt off its inline styles. */
.form__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-base);
  color: var(--paper-1);
  line-height: 1.5;
  padding: 6px 0;
  cursor: pointer;
}
.form__choice input { margin-top: 3px; flex: none; }
.form__choice strong { color: var(--paper-0); font-weight: 600; }

/* Centered "nothing here yet" card (partials/_empty_card.html.twig). */
.card--empty { text-align: center; padding: 56px 24px; }
.card--empty .card__title { margin-bottom: 6px; }
.card--empty .card__desc { max-width: 50ch; margin: 0 auto; }