/* Swarm design tokens — the Evidence Bundle world. OKLCH only.
   Light is default (the 9am office); dark is the 8pm lift lobby.
   Materials, not greys: manila board, paper, blue-black ink, pink tape, gold seal.
   Do not add a value here that DESIGN.md does not document. */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* --- brand: gold is the exhibit seal and the primary action, nothing else --- */
  --gold: oklch(78% 0.15 78);
  --gold-ink: oklch(50% 0.13 78);        /* gold as text on paper */
  --gold-hover: oklch(83% 0.15 78);      /* seal under the hand */
  --gold-quiet: oklch(78% 0.15 78 / 0.14);
  --on-gold: oklch(22% 0.015 265);
  --focus: oklch(50% 0.13 78);

  /* --- tape: the barrister's tie. Structural marker, never decoration --- */
  --tape: oklch(66% 0.16 15);
  --tape-quiet: oklch(66% 0.16 15 / 0.12);
  /* Ink on a tape fill. It was a literal oklch(99% 0 0) until M6 first used the
     tape sticker — a pure neutral, which this system does not have (the No
     Neutral Grey Rule), and a colour check_contrast.py had never seen. */
  --on-tape: oklch(22% 0.015 265);

  /* --- annotation ink --- */
  --ink-blue: oklch(45% 0.15 265);

  /* --- ground and ink: LIGHT (default) --- */
  --canvas: oklch(91% 0.024 85);         /* manila folder board */
  --surface: oklch(98.5% 0.005 85);      /* the page, sitting on the board */
  --sunken: oklch(86% 0.030 85);         /* divider / tab stock */
  --text: oklch(22% 0.015 265);          /* blue-black ink, never neutral black */
  --body: oklch(30% 0.012 265);
  --muted: oklch(46% 0.010 265);
  --faint: oklch(45% 0.010 265);
  --hairline: oklch(78% 0.020 85);
  --solid-cta: oklch(22% 0.015 265);
  --solid-cta-ink: oklch(98.5% 0.005 85);

  /* --- status: colour is the third signal, after label and mark --- */
  --ok: oklch(45% 0.13 150);
  --attention: oklch(46% 0.13 70);
  --risk: oklch(48% 0.19 25);
  --neutral: var(--muted);

  /* --- depth: paper offset, not blur. Shadow only for what truly floats --- */
  --shadow-panel: 0 18px 44px oklch(22% 0.015 265 / 0.16);
  --shadow-cta: none;

  /* --- type: two faces. Public Sans is civic-document; Courier is the
         transcript. Courier carries evidence because court records are set
         in it — world-native, not a decorative mono. --- */
  --font-ui: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'Courier Prime', Courier, monospace;

  --t-11: 0.6875rem; --t-12: 0.75rem;  --t-13: 0.8125rem; --t-14: 0.875rem;
  --t-16: 1rem;      --t-18: 1.125rem; --t-20: 1.25rem;   --t-24: 1.5rem;
  --t-28: 1.75rem;   --t-32: 2rem;     --t-40: 2.5rem;    --t-48: 3rem;

  /* --- space: 4 8 16 24 32 48 72. Document margins are regular --- */
  --s-0: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px;
  --s-4: 32px; --s-5: 48px; --s-6: 72px;

  /* --- shape: the document is square, the label is round.
         Stock is cut: 2px is the whole vocabulary for buttons, cards, inputs and
         panels, and a tab rounds its top corners only. What sits ON the stock is a
         different object — a round adhesive label — and it is fully rounded. See
         D053 and DESIGN.md § Shapes. There is no radius between 3px and a pill:
         an 8px corner is the bug this rule exists to catch. --- */
  --r-xs: 1px; --r-sm: 2px; --r-md: 3px; --r-tab: 3px 3px 0 0;
  --r-pill: 999px;
  /* The left rail's selected item: a divider tab turned on its side, rounding the
     two corners away from the page so the tab and the page read as one piece. */
  --r-spine: 3px 0 0 3px;

  --e: cubic-bezier(0.2, 0, 0, 1);
  --d-state: 100ms; --d-move: 180ms; --d-panel: 280ms;
}

:root[data-theme="dark"] {
  --gold: oklch(82% 0.16 78);
  --gold-ink: oklch(82% 0.16 78);
  --gold-hover: oklch(87% 0.15 78);
  --focus: oklch(82% 0.16 78);
  --tape: oklch(72% 0.15 15);
  --on-tape: oklch(22% 0.015 265);
  --ink-blue: oklch(72% 0.12 265);

  --canvas: oklch(19% 0.020 265);
  --surface: oklch(24% 0.018 265);
  --sunken: oklch(15% 0.020 265);
  --text: oklch(94% 0.008 85);
  --body: oklch(87% 0.008 85);
  --muted: oklch(70% 0.008 265);
  --faint: oklch(68% 0.008 265);
  --hairline: oklch(34% 0.018 265);
  --solid-cta: oklch(94% 0.008 85);
  --solid-cta-ink: oklch(19% 0.020 265);

  --ok: oklch(74% 0.13 150);
  --attention: oklch(79% 0.13 70);
  --risk: oklch(68% 0.17 25);

  --shadow-panel: 0 18px 44px oklch(8% 0.02 265 / 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: var(--t-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; }
h1 { font-size: var(--t-40); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-24); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--t-18); font-weight: 700; line-height: 1.3; }
h4 { font-family: var(--font-ui); font-size: var(--t-16); font-weight: 700; color: var(--text); margin: 0; }

/* The bundle's marginal annotation: Courier, uppercase, tracked. */
.sw-label {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

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

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sw-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- components --- */

.sw-button {
  font-family: var(--font-ui);
  font-size: var(--t-14);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 var(--s-2);
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-state) var(--e), border-color var(--d-state) var(--e);
}
.sw-button--primary { background: var(--gold); color: var(--on-gold); }
.sw-button--primary:hover { background: var(--gold-hover); }
.sw-button--solid { background: var(--solid-cta); color: var(--solid-cta-ink); }
.sw-button--secondary { background: transparent; color: var(--text); border-color: var(--hairline); }
.sw-button--secondary:hover { background: var(--sunken); }
.sw-button--ghost { background: transparent; color: var(--muted); font-weight: 400; }
.sw-button--ghost:hover { color: var(--text); }
.sw-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Paper on board: a page is lighter than its folder and carries a hairline.
   No shadow — the tonal step is the depth. */
.sw-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}

/* A panel is the other thing that truly floats — a modal, a command palette. Shadow,
   no border: one edge signal, not two. A hairline plus a 44px blur is the generated-UI
   tell Impeccable flags, and this system already separates surfaces by tone. */
.sw-panel {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
}

/* The exhibit sticker. Small, square, and it carries a reference, never a mood. */
.sw-sticker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--on-gold);
}
.sw-sticker--tape { background: var(--tape); color: var(--on-tape); }

.sw-chip {
  display: inline-flex; align-items: center; gap: var(--s-0);
  font-size: var(--t-12); font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--body);
  border: 1px solid var(--hairline);
}
.sw-chip--selected { background: var(--gold-quiet); border-color: var(--gold-ink); color: var(--text); }

/* A chip that carries a fact about an item — its priority, its kind, that it is
   blocked. Mark, then label, then colour (the Status rule), so it survives
   greyscale and a colour-blind reader. It is a chip and never a sticker: a
   sticker carries a REFERENCE, and gold is the seal (the Seal Rule). */
.sw-facet {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--t-11); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--muted);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.sw-facet__mark { font-weight: 700; }
.sw-facet--risk      { color: var(--risk);      border-color: var(--risk); }
.sw-facet--attention { color: var(--attention); border-color: var(--attention); }
.sw-facet--ok        { color: var(--ok);        border-color: var(--ok); }
.sw-facet--note      { color: var(--ink-blue);  border-color: var(--ink-blue); }

/* Status carries a mark and a label; colour is the third channel. */
.sw-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; }
.sw-status__mark { font-family: var(--font-mono); font-size: var(--t-12); font-weight: 700; }
.sw-status--ok { color: var(--ok); }
.sw-status--attention { color: var(--attention); }
.sw-status--risk { color: var(--risk); }
.sw-status--neutral { color: var(--muted); }

/* THE SIGNATURE COMPONENT.
   The sentence from the source that caused a work item, set in Courier because
   that is what a transcript is set in, on divider stock, with its exhibit
   reference. It appears wherever an inference is shown. It is how the product
   proves it did not invent anything. No side rule: the tonal step is the edge. */
.sw-exhibit {
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  margin: var(--s-2) 0;
}
.sw-exhibit__quote {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.75;
  color: var(--text);
  margin: var(--s-1) 0 0;
}
.sw-exhibit__ref {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.sw-empty { text-align: center; padding: var(--s-5) var(--s-3); color: var(--muted); }

.sw-skeleton {
  background: var(--sunken);
  border-radius: var(--r-xs);
  animation: sw-pulse 1.4s ease-in-out infinite;
}
@keyframes sw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}