/* Dispatch. One hand-written file, no build step: tokens, then the console.
   The marketing site lives at the bottom under .site. */

/* Vendored latin subsets. No runtime CDN request; /static/fonts only. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Neutrals: warm, six background steps, three ink levels, three line weights. */
  --ds-paper: #faf9f7;
  --ds-canvas: #f4f2ef;
  --ds-surface: #ffffff;
  --ds-inset: #f7f5f2;
  --ds-hover: #f2f0ec;
  --ds-hover-2: #e9e6e1;

  --ds-ink: #1a1917;
  --ds-ink-2: #5c5952;
  --ds-ink-3: #77736a;

  --ds-line-soft: #f0eee9;
  --ds-line: #e4e1db;
  --ds-line-strong: #d3cfc7;

  --ds-accent: #0b6e4f;
  --ds-accent-hover: #095b41;
  --ds-accent-ink: #ffffff;
  --ds-accent-tint: #e8f2ed;
  --ds-accent-line: #b9d8cc;

  /* Semantic pairs: solid text on its own tint, both AA on paper. */
  --ds-ok: #0b6e4f;
  --ds-ok-tint: #e8f2ed;
  --ds-ok-line: #b9d8cc;
  --ds-warn: #9a6700;
  --ds-warn-tint: #fdf6e3;
  --ds-warn-line: #e8d08a;
  --ds-danger: #b02525;
  --ds-danger-tint: #fbebeb;
  --ds-danger-line: #edbfbf;
  --ds-info: #1d5fb0;
  --ds-info-tint: #e9f0fa;
  --ds-info-line: #b9cfea;
  --ds-stale: #4a5568;
  --ds-stale-tint: #eef0f3;
  --ds-stale-line: #c8ced6;

  --ds-focus-ring: var(--ds-accent);

  --ds-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ds-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ds-text-2xs: 0.6875rem;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.8125rem;
  --ds-text-base: 0.9375rem;
  --ds-text-md: 1.0625rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: 1.5rem;
  --ds-text-2xl: 2rem;
  --ds-text-3xl: 2.75rem;
  --ds-text-4xl: 4rem;
  --ds-text-5xl: 5rem;

  --ds-1: 0.25rem;
  --ds-2: 0.5rem;
  --ds-3: 0.75rem;
  --ds-4: 1rem;
  --ds-5: 1.5rem;
  --ds-6: 2rem;
  --ds-7: 3rem;
  --ds-8: 4rem;
  --ds-9: 7rem;

  --ds-w-console: 68rem;
  --ds-w-prose: 42rem;
  --ds-w-site: 72rem;

  --ds-r-xs: 3px;
  --ds-r-sm: 5px;
  --ds-r-md: 8px;
  --ds-r-lg: 12px;
  --ds-r-pill: 999px;

  /* Elevation is a ring first, a shadow second. */
  --ds-shadow-hairline: 0 0 0 1px var(--ds-line);
  --ds-shadow-btn: 0 0 0 1px var(--ds-line-strong), 0 1px 2px rgba(26, 25, 23, 0.05);
  --ds-shadow-card: 0 0 0 1px var(--ds-line), 0 1px 2px rgba(26, 25, 23, 0.04);
  --ds-shadow-raised: 0 0 0 1px var(--ds-line), 0 2px 4px rgba(26, 25, 23, 0.05),
    0 8px 16px rgba(26, 25, 23, 0.04);
  --ds-shadow-overlay: 0 0 0 1px var(--ds-line), 0 12px 32px rgba(26, 25, 23, 0.1);
  --ds-shadow-field: inset 0 1px 2px rgba(26, 25, 23, 0.06);
  --ds-focus: 0 0 0 2px var(--ds-paper), 0 0 0 4px var(--ds-focus-ring);

  --ds-dur-fast: 100ms;
  --ds-dur: 150ms;
  --ds-dur-slow: 260ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);

  --ds-header-h: 3.25rem;

  color-scheme: light;
}

/* Dark theme. Light is the default in every browser: only the header toggle
   stamps data-theme, so the operating system never picks for you. Nothing
   below redefines a rule, only the tokens the rules already read. Every solid
   clears 4.5:1 on all four grounds and on its own tint. */

:root[data-theme="dark"] {
  --ds-paper: #12110f;
  --ds-canvas: #1a1917;
  --ds-surface: #201f1c;
  --ds-inset: #171614;
  --ds-hover: #282621;
  --ds-hover-2: #33302a;

  --ds-ink: #f4f2ee;
  --ds-ink-2: #bcb7ad;
  --ds-ink-3: #98938a;

  --ds-line-soft: #26241f;
  --ds-line: #35322c;
  --ds-line-strong: #4a463e;

  --ds-accent: #5cc79a;
  --ds-accent-hover: #7ad6b0;
  --ds-accent-ink: #0d1a14;
  --ds-accent-tint: #14291f;
  --ds-accent-line: #2f5c47;

  --ds-ok: #5cc79a;
  --ds-ok-tint: #14291f;
  --ds-ok-line: #2f5c47;
  --ds-warn: #e3ad4a;
  --ds-warn-tint: #2b2213;
  --ds-warn-line: #5c4820;
  --ds-danger: #f08d84;
  --ds-danger-tint: #2e1a19;
  --ds-danger-line: #5f312d;
  --ds-info: #84b6f0;
  --ds-info-tint: #16222f;
  --ds-info-line: #2f4d6b;
  --ds-stale: #a8b1bf;
  --ds-stale-tint: #1e2126;
  --ds-stale-line: #3d444f;

  /* Shadows on a dark ground come from black, not from the warm ink. */
  --ds-shadow-btn: 0 0 0 1px var(--ds-line-strong), 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-card: 0 0 0 1px var(--ds-line), 0 1px 2px rgba(0, 0, 0, 0.35);
  --ds-shadow-raised: 0 0 0 1px var(--ds-line), 0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.35);
  --ds-shadow-overlay: 0 0 0 1px var(--ds-line), 0 12px 32px rgba(0, 0, 0, 0.55);
  --ds-shadow-field: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-base);
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Headings step down hard and stop early. */

h1 {
  margin: 0 0 var(--ds-4);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  margin: 0 0 var(--ds-2);
  font-size: var(--ds-text-md);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h3 {
  margin: 0 0 var(--ds-2);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 var(--ds-3);
}

a {
  color: var(--ds-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--ds-dur) var(--ds-ease);
}

a:hover {
  color: var(--ds-accent-hover);
}

/* Focus is its own token, never a border. */

:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
  border-radius: var(--ds-r-xs);
}

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

/* Money, counts, and timestamps line up in columns. */

.num,
.money,
.mono,
.chip {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
}

.eyebrow {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

.muted {
  color: var(--ds-ink-3);
}

.warning,
.error {
  color: var(--ds-danger);
}

.notice {
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
}

/* Shell */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ds-surface);
  box-shadow: inset 0 -1px 0 var(--ds-line);
}

.nav {
  max-width: var(--ds-w-console);
  min-height: var(--ds-header-h);
  margin: 0 auto;
  padding: 0 var(--ds-4);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 var(--ds-5);
}

.nav__group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 var(--ds-4);
}

.nav__group--end {
  margin-left: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  padding: var(--ds-2) 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--ds-dur) var(--ds-ease),
    border-color var(--ds-dur) var(--ds-ease);
}

.nav a:hover {
  color: var(--ds-ink);
}

.nav a[aria-current="page"] {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-accent);
}

/* The wordmark outranks `.nav a`, which would otherwise shrink it to the
   13px link size and flatten its tracking. */

.brand,
.nav .brand {
  display: inline-flex;
  align-items: center;
  margin-right: var(--ds-2);
  padding: 0;
  border-bottom: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nav .brand:hover {
  color: var(--ds-accent);
}

/* Theme toggle: a quiet icon button, never a filled console control. */

.theme-toggle {
  align-self: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
  background: transparent;
  color: var(--ds-ink-3);
  box-shadow: none;
}

.theme-toggle:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
}

.theme-toggle svg {
  flex: none;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Dev routes are never mistaken for console routes. */

.dev-strip {
  background: var(--ds-warn-tint);
  box-shadow: inset 0 -1px 0 var(--ds-warn-line);
}

.dev-strip .nav {
  min-height: 2rem;
  gap: 0 var(--ds-4);
}

.dev-strip a {
  color: var(--ds-warn);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--ds-1) 0;
}

.dev-strip a:hover,
.dev-strip a[aria-current="page"] {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-warn);
}

.page {
  max-width: var(--ds-w-console);
  margin: 0 auto;
  padding: var(--ds-6) var(--ds-4) var(--ds-8);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-3) var(--ds-4);
  margin: 0 0 var(--ds-5);
}

.page-header h1 {
  margin: 0;
}

.page-header__sub {
  margin: var(--ds-1) 0 0;
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
  line-height: 1.4;
}

.page-header__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-2);
}

/* Chips: tint background, solid text, no border. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-canvas);
  color: var(--ds-ink-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  vertical-align: middle;
}

.chip--ok {
  background: var(--ds-ok-tint);
  color: var(--ds-ok);
}

.chip--warn {
  background: var(--ds-warn-tint);
  color: var(--ds-warn);
}

.chip--danger {
  background: var(--ds-danger-tint);
  color: var(--ds-danger);
}

.chip--info {
  background: var(--ds-info-tint);
  color: var(--ds-info);
}

.chip--stale {
  background: var(--ds-stale-tint);
  color: var(--ds-stale);
}

.chip--outline {
  background: var(--ds-surface);
  box-shadow: 0 0 0 1px var(--ds-line-strong);
  color: var(--ds-ink-2);
}

.chip--ok-outline {
  background: var(--ds-surface);
  box-shadow: 0 0 0 1px var(--ds-ok-line);
  color: var(--ds-ok);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* A chip carrying a bare value names it; the name reads under the value. */

.chip__label {
  opacity: 0.62;
  font-weight: 500;
}

.chip__count {
  margin-left: 0.15em;
  padding-left: 0.45em;
  box-shadow: inset 1px 0 0 currentColor;
  opacity: 0.62;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-1) var(--ds-2);
}

.chip--hollow .chip__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Nav counts: the same chip, muted to ink-3 when there is nothing waiting. */

.chip[data-count] {
  background: var(--ds-info-tint);
  color: var(--ds-info);
  min-width: 22px;
  justify-content: center;
  padding: 0 6px;
}

.chip[data-count].is-zero {
  background: transparent;
  color: var(--ds-ink-3);
}

/* Controls are raised: ring plus an outer shadow. */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-2);
  min-height: 34px;
  padding: var(--ds-2) var(--ds-4);
  border: 0;
  border-radius: var(--ds-r-sm);
  background: var(--ds-accent);
  color: var(--ds-accent-ink);
  box-shadow: var(--ds-shadow-btn);
  font-family: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-dur) var(--ds-ease),
    color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease),
    opacity var(--ds-dur) var(--ds-ease);
}

button:hover,
.btn:hover {
  background: var(--ds-accent-hover);
  color: var(--ds-accent-ink);
}

button.secondary,
.btn--secondary {
  background: var(--ds-surface);
  color: var(--ds-ink);
}

button.secondary:hover,
.btn--secondary:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
}

button.danger,
.btn--danger {
  background: var(--ds-surface);
  color: var(--ds-danger);
  box-shadow: 0 0 0 1px var(--ds-danger-line), 0 1px 2px rgba(26, 25, 23, 0.05);
}

button.danger:hover,
.btn--danger:hover {
  background: var(--ds-danger-tint);
  color: var(--ds-danger);
}

button.ghost,
.btn--ghost {
  background: transparent;
  color: var(--ds-ink-2);
  box-shadow: none;
}

button.ghost:hover,
.btn--ghost:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* An in-flight htmx request owns its target: dimmed, unclickable, and the
   button that fired it spinning until the swap lands. */

[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--ds-dur) var(--ds-ease);
}

button.htmx-request,
form.htmx-request button[type="submit"]:not([formaction]) {
  pointer-events: none;
}

button.htmx-request::after,
form.htmx-request button[type="submit"]:not([formaction])::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Fields are inset. */

form {
  margin: 0;
}

label {
  display: block;
  margin-bottom: var(--ds-1);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: var(--ds-text-base);
  line-height: 1.45;
  color: var(--ds-ink);
  background: var(--ds-inset);
  border: 0;
  border-radius: var(--ds-r-sm);
  padding: var(--ds-2) var(--ds-3);
  box-shadow: var(--ds-shadow-field), 0 0 0 1px var(--ds-line);
  transition: background-color var(--ds-dur) var(--ds-ease),
    box-shadow var(--ds-dur) var(--ds-ease);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  max-width: 30rem;
}

textarea {
  display: block;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  background: var(--ds-surface);
  box-shadow: var(--ds-focus);
}

input[readonly],
textarea[readonly] {
  color: var(--ds-ink-2);
}

label.check {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
}

label.check input {
  width: auto;
  margin: 0;
}

.field-hint {
  margin: var(--ds-1) 0 0;
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
}

/* A submit under its fields needs air; one packed into a control row does not. */

form > button {
  margin-top: var(--ds-3);
}

.card-actions form > button,
.card-actions > button {
  margin-top: 0;
}

/* Tables */

.table-wrap {
  background: var(--ds-surface);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
  overflow-x: auto;
  margin: 0 0 var(--ds-4);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

/* Sticky against .table-wrap's own scrollport, so top is 0, not the header height. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ds-surface);
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-align: left;
  padding: var(--ds-3);
  box-shadow: inset 0 -1px 0 var(--ds-line);
}

tbody th {
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

td,
tbody th {
  padding: var(--ds-3);
  vertical-align: top;
  box-shadow: inset 0 -1px 0 var(--ds-line-soft);
}

tbody tr:last-child td,
tbody tr:last-child th {
  box-shadow: none;
}

tbody tr {
  transition: background-color 200ms var(--ds-ease);
}

tbody tr:hover {
  background: var(--ds-hover);
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cards. State is a 3px left rail in the tone color, never a tinted body. */

.card,
.conversation-group,
.decision-card,
.release-card,
.lead-card,
.paste-form,
.action-panel,
.sim-panel {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface);
  border-radius: var(--ds-r-md);
  padding: var(--ds-4);
  margin: 0 0 var(--ds-4);
  box-shadow: var(--ds-shadow-card);
}

.decision-card::before,
.release-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ds-accent);
}

.decision-card.resolved::before,
.release-card.resolved::before {
  background: var(--ds-line-strong);
}

/* A resolved card settles out of the foreground instead of blinking into a
   different card: the swap starts at the live look and fades to the muted one. */

.decision-card.resolved,
.release-card.resolved {
  background: var(--ds-canvas);
  color: var(--ds-ink-2);
  opacity: 0.7;
  animation: card-resolve var(--ds-dur-slow) var(--ds-ease-out);
}

@keyframes card-resolve {
  from {
    opacity: 1;
    background: var(--ds-surface);
  }
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2);
  margin-top: var(--ds-3);
}

.decision-card form,
.action-panel form,
.paste-form form {
  margin: var(--ds-3) 0 0;
}

.banner {
  background: var(--ds-warn-tint);
  border-radius: var(--ds-r-md);
  padding: var(--ds-3) var(--ds-4);
  margin: 0 0 var(--ds-4);
  box-shadow: 0 0 0 1px var(--ds-warn-line);
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-1) var(--ds-4);
  margin: var(--ds-3) 0;
  font-size: var(--ds-text-sm);
}

dt {
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
  font-weight: 500;
}

dd {
  margin: 0;
}

/* SMS bubbles. Tail corner on the sender's side. */

.thread {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-1);
  margin: var(--ds-3) 0;
  padding: var(--ds-4);
  background: var(--ds-canvas);
  border-radius: var(--ds-r-md);
}

/* Consecutive messages from one author sit tight; a new speaker gets air. */

.msg--start {
  margin-top: var(--ds-1);
}

.thread > .msg--start:first-child {
  margin-top: 0;
}

.thread__day {
  align-self: center;
  margin: var(--ds-3) 0 var(--ds-1);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

.thread__day:first-child {
  margin-top: 0;
}

.msg {
  max-width: 30rem;
  margin: 0;
  padding: var(--ds-2) var(--ds-3);
  font-size: var(--ds-text-base);
  line-height: 1.45;
  border-radius: 14px;
}

.msg p {
  margin: 0;
  /* The digest notification is multi-line; collapsing it makes it unreadable. */
  white-space: pre-line;
}

.msg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-1) var(--ds-2);
  margin: 0 0 2px;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.04em;
  color: var(--ds-ink-3);
}

.msg--in {
  align-self: flex-start;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-hairline);
  border-radius: 14px 14px 14px 14px;
}

.msg--out {
  align-self: flex-end;
  background: var(--ds-accent-tint);
  box-shadow: 0 0 0 1px var(--ds-accent-line);
  border-radius: 14px 14px 14px 14px;
}

/* The tail corner belongs to the message that closes a group. */

.msg--in.msg--end {
  border-bottom-left-radius: 4px;
}

.msg--out.msg--end {
  border-bottom-right-radius: 4px;
}

/* A canceled draft is dead, not sent. It stays in the record so the thread
   still reads in order, dimmed and dashed so it can never be mistaken for a
   message a homeowner got. */

.msg--dead {
  opacity: 0.7;
}

.msg--out.msg--dead {
  background: var(--ds-stale-tint);
  box-shadow: none;
  outline: 1px dashed var(--ds-stale-line);
  outline-offset: -1px;
}

.msg--in.msg--dead {
  box-shadow: none;
  outline: 1px dashed var(--ds-stale-line);
  outline-offset: -1px;
}

.msg--sys {
  align-self: center;
  max-width: 26rem;
  background: transparent;
  box-shadow: 0 0 0 1px var(--ds-line);
  border-radius: var(--ds-r-pill);
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
  text-align: center;
}

/* Queue. One conversation per group: a header that stays put while you read,
   the thread in its canvas well, then the draft as a bounded approval unit. */

.conversation-group {
  overflow: visible;
  padding: 0;
}

.qgroup__head {
  position: sticky;
  top: var(--ds-header-h);
  z-index: 2;
  background: var(--ds-surface);
  padding: var(--ds-4) var(--ds-4) var(--ds-3);
  border-radius: var(--ds-r-md) var(--ds-r-md) 0 0;
  box-shadow: inset 0 -1px 0 var(--ds-line-soft);
}

.qgroup__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-2);
  margin: 0 0 var(--ds-2);
}

.qgroup__title a {
  color: var(--ds-ink);
  text-decoration: none;
}

.qgroup__title a:hover {
  color: var(--ds-accent);
}

.qgroup__objections {
  margin: var(--ds-2) 0 0;
  font-size: var(--ds-text-sm);
}

.qgroup__body {
  padding: 0 var(--ds-4) var(--ds-4);
}

.qgroup__body .thread {
  margin-top: 0;
}

.qgroup__body .decision-card {
  margin: var(--ds-3) 0 0;
}

.decision-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2) var(--ds-3);
  margin: 0 0 var(--ds-2);
}

.decision-card__reason {
  margin: 0 0 var(--ds-2);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

/* The draft reads in the same type as the bubble it becomes. */

textarea.draft {
  max-width: 34rem;
  font-size: var(--ds-text-base);
  line-height: 1.45;
}

.counter {
  margin: var(--ds-1) 0 0;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.04em;
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

.counter--warn {
  color: var(--ds-warn);
}

.counter--danger {
  color: var(--ds-danger);
}

/* Keyboard. The card in focus carries an accent ring so j and k have somewhere
   visible to land, and the sheet is a panel you dismiss, not a modal. */

.decision-card:focus,
.decision-card:focus-visible {
  outline: none;
}

.decision-card.is-focused {
  box-shadow: 0 0 0 2px var(--ds-accent-line), var(--ds-shadow-raised);
}

.queue-hint {
  margin: 0 0 var(--ds-4);
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: var(--ds-r-xs);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-btn);
  color: var(--ds-ink-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  line-height: 1.5;
}

.shortcuts {
  position: fixed;
  right: var(--ds-4);
  bottom: var(--ds-4);
  z-index: 50;
  width: min(20rem, calc(100vw - 2rem));
  padding: var(--ds-4);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-overlay);
  animation: toast-in var(--ds-dur-slow) var(--ds-ease-out) both;
}

.shortcuts[hidden] {
  display: none;
}

.shortcuts dl {
  align-items: center;
  margin: var(--ds-3) 0;
}

.shortcuts dt {
  display: flex;
  gap: var(--ds-1);
}

.shortcuts dd {
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

/* An edit is visible before you press the button, not after. */

button.is-edited {
  box-shadow: 0 0 0 1px var(--ds-warn), 0 0 0 3px var(--ds-warn-tint);
}

/* Rejecting is deliberate: the reason and its button live behind a disclosure. */

.reject,
.danger-zone {
  margin: var(--ds-3) 0 0;
}

.reject summary,
.danger-zone summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  width: fit-content;
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--ds-dur) var(--ds-ease);
}

.reject summary::-webkit-details-marker,
.danger-zone summary::-webkit-details-marker {
  display: none;
}

.reject summary::before,
.danger-zone summary::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: currentColor;
  transition: transform var(--ds-dur) var(--ds-ease);
}

.reject[open] summary::before,
.danger-zone[open] summary::before {
  transform: rotate(90deg) translateX(-2px);
}

.reject summary:hover,
.reject[open] summary,
.danger-zone summary:hover,
.danger-zone[open] summary {
  color: var(--ds-danger);
}

.reject label,
.danger-zone label {
  margin-top: var(--ds-3);
}

.reject button,
.danger-zone button {
  margin-top: var(--ds-3);
}

/* Releases, grouped by what an approver can do: copy it, wait for it, or
   deal with it. The gate result is the card's own state, in the gate's tone. */

.release-group {
  margin: 0 0 var(--ds-6);
}

.release-group__head {
  margin: 0 0 var(--ds-3);
}

.release-group__head h2 {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  margin: 0;
}

.release-group__head p {
  margin: var(--ds-1) 0 0;
  font-size: var(--ds-text-sm);
}

.release-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2) var(--ds-3);
  margin: 0 0 var(--ds-3);
}

.release-card__to {
  margin: 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

.release-card--allow::before {
  background: var(--ds-ok);
}

.release-card--hold::before {
  background: var(--ds-warn);
}

.release-card--refuse::before {
  background: var(--ds-danger);
}

.release-card--invalidate::before {
  background: var(--ds-stale);
}

/* Copied is a state of this card, not of the send: the rail stays until the
   card leaves the page. */

.release-card.is-copied::before {
  background: var(--ds-info);
}

/* Invalidate is dead, not blocked: a dashed hairline and a dimmed body, never
   the danger red that says "this could still clear". */

.release-card--invalidate {
  opacity: 0.7;
  box-shadow: none;
  outline: 1px dashed var(--ds-stale-line);
  outline-offset: -1px;
  animation: card-resolve var(--ds-dur-slow) var(--ds-ease-out);
}

.gate-chip svg {
  flex: none;
}

.hold-countdown {
  margin: var(--ds-2) 0 0;
  color: var(--ds-warn);
  font-size: var(--ds-text-sm);
  font-weight: 500;
}

/* Leads. The duplicate is the whole story of the card, so it leads it. */

.lead-card--duplicate::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ds-danger);
}

.banner--danger {
  background: var(--ds-danger-tint);
  box-shadow: 0 0 0 1px var(--ds-danger-line);
}

.banner p:last-child {
  margin-bottom: 0;
}

.banner__link {
  margin: var(--ds-1) 0 0;
  font-size: var(--ds-text-sm);
}

.lead-card__objections {
  margin: var(--ds-3) 0 0;
  font-size: var(--ds-text-sm);
}

.lead-card__label {
  margin: var(--ds-4) 0 var(--ds-1);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-xs);
  font-weight: 500;
}

/* What the rep actually typed, character for character. */

.raw-intake {
  margin: 0 0 var(--ds-3);
  padding: var(--ds-2) var(--ds-3);
  background: var(--ds-inset);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-shadow-hairline);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
  color: var(--ds-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Transcript. The header is context; the handoff is a standing condition. */

.detail-meta {
  margin: 0 0 var(--ds-4);
}

.outcome-note {
  margin: 0 0 var(--ds-4);
}

/* A human owns this thread. The card stays in view while you read it. */

.handoff {
  position: sticky;
  top: var(--ds-header-h);
  z-index: 2;
  background: var(--ds-warn-tint);
  border-radius: var(--ds-r-md);
  padding: var(--ds-3) var(--ds-4);
  margin: 0 0 var(--ds-3);
  box-shadow: 0 0 0 1px var(--ds-warn-line);
}

.handoff .eyebrow {
  color: var(--ds-warn);
}

.handoff__summary {
  margin: var(--ds-2) 0 0;
  font-weight: 500;
}

.handoff__note {
  margin: 0 0 var(--ds-3);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
}

.handoff form > button {
  margin-top: 0;
}

/* One outcome at a time: the segmented picker reveals the form that fits. */

.action-panel h2:not(:first-child) {
  margin-top: var(--ds-5);
}

.outcome {
  position: relative;
}

.outcome__pick {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0 0 var(--ds-3);
  background: var(--ds-canvas);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-shadow-hairline);
}

.segmented label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  padding: 0 var(--ds-4);
  border-radius: var(--ds-r-xs);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--ds-dur) var(--ds-ease),
    color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.segmented label:hover {
  color: var(--ds-ink);
}

#outcome-won:checked ~ .segmented label[for="outcome-won"],
#outcome-lost:checked ~ .segmented label[for="outcome-lost"] {
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-btn);
}

#outcome-won:focus-visible ~ .segmented label[for="outcome-won"],
#outcome-lost:focus-visible ~ .segmented label[for="outcome-lost"] {
  box-shadow: var(--ds-focus);
}

.outcome__form {
  display: none;
}

#outcome-won:checked ~ .outcome__form--won,
#outcome-lost:checked ~ .outcome__form--lost {
  display: block;
}

/* Filters */

.state-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-2);
  margin: 0 0 var(--ds-4);
}

.state-filter a {
  text-decoration: none;
  border-radius: var(--ds-r-pill);
}

.state-filter .chip {
  cursor: pointer;
  transition: box-shadow var(--ds-dur) var(--ds-ease),
    opacity var(--ds-dur) var(--ds-ease);
}

.state-filter .chip.is-empty {
  opacity: 0.5;
}

.state-filter a:hover .chip {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--ds-line-strong);
}

.state-filter a.current .chip {
  opacity: 1;
  box-shadow: 0 0 0 1px currentColor;
}

/* Conversations. The name is the column; everything else supports it. */

.table--conversations td {
  vertical-align: middle;
}

.row-name {
  display: block;
  color: var(--ds-ink);
  font-weight: 500;
  text-decoration: none;
}

.row-name:hover {
  color: var(--ds-accent);
}

.row-sub {
  display: block;
  margin-top: 1px;
  color: var(--ds-ink-3);
  font-size: var(--ds-text-xs);
}

.row-when {
  color: var(--ds-ink-2);
  white-space: nowrap;
}

/* Empty states. A glyph, one sentence, and a way out where there is one.
   An empty queue is work finished, so it gets the accent check, not a shrug. */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--ds-2);
  padding: var(--ds-7) var(--ds-4);
  text-align: center;
  color: var(--ds-ink-3);
}

.empty__icon {
  display: inline-flex;
  color: var(--ds-ink-3);
}

.empty__text {
  max-width: 32rem;
  margin: 0;
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
}

.empty .btn {
  margin-top: var(--ds-2);
}

.empty--good .empty__icon {
  padding: var(--ds-2);
  border-radius: var(--ds-r-pill);
  background: var(--ds-ok-tint);
  color: var(--ds-ok);
}

.empty--good .empty__text {
  color: var(--ds-ink);
  font-weight: 500;
}

/* Inside a card the empty state is a note, not a landing pad. */

.qgroup__body .empty,
.sim-panel .empty,
.action-panel .empty {
  padding: var(--ds-4) var(--ds-3);
}

/* Flash: one fixed toast stack, dismissed by click or after five seconds. */

.toasts {
  position: fixed;
  right: var(--ds-4);
  bottom: var(--ds-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--ds-2);
  width: min(24rem, calc(100vw - 2rem));
}

.toast {
  padding: var(--ds-3) var(--ds-4);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-overlay);
  font-size: var(--ds-text-sm);
  line-height: 1.45;
  cursor: pointer;
  animation: toast-in var(--ds-dur-slow) var(--ds-ease-out) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* Pages */

.login-page,
.error-page {
  max-width: var(--ds-w-prose);
}

/* Error pages: the code is a display numeral in a line weight, so the page
   reads as a wrong turn rather than a failure, and both routes home are here. */

.error-page {
  padding: var(--ds-7) 0;
}

.error-page__code {
  margin: 0 0 var(--ds-2);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-4xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ds-line-strong);
  font-variant-numeric: tabular-nums;
}

.error-page p {
  color: var(--ds-ink-2);
}

.error-page .card-actions {
  margin-top: var(--ds-5);
}

.login-page form {
  margin: var(--ds-4) 0 0;
}

.login-page button {
  margin-top: var(--ds-3);
}

/* Weekly report. Three numerals carry the week; the rest is a table. */

.stat-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--ds-4);
  margin: 0 0 var(--ds-5);
  padding: 0;
}

.stat-tile {
  background: var(--ds-surface);
  border-radius: var(--ds-r-md);
  padding: var(--ds-4);
  box-shadow: var(--ds-shadow-card);
}

.stat-tile__num {
  display: block;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-tile__label {
  display: block;
  margin-top: var(--ds-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

.stat-tile__note {
  display: block;
  margin-top: var(--ds-2);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  line-height: 1.4;
}

/* The baseline is a comparison, so it reads as one: this week, the pace it is
   measured against, and which way that points. */

.baseline__rows {
  list-style: none;
  display: grid;
  gap: var(--ds-2);
  margin: var(--ds-3) 0;
  padding: 0;
}

.baseline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-1) var(--ds-3);
}

.baseline__metric {
  min-width: 8rem;
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
}

.baseline__now {
  font-size: var(--ds-text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.baseline__pace {
  color: var(--ds-ink-3);
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
}

.baseline .notice {
  margin: 0;
}

/* Digest: a mono block in a card that says what it is and hands you the text. */

.digest-card {
  background: var(--ds-surface);
  border-radius: var(--ds-r-md);
  padding: var(--ds-4);
  margin: 0 0 var(--ds-4);
  box-shadow: var(--ds-shadow-card);
}

.digest-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2) var(--ds-3);
  margin: 0 0 var(--ds-3);
}

.digest-card__head .eyebrow {
  margin: 0;
}

.digest-card__head button {
  margin-left: auto;
}

.digest {
  margin: 0;
  padding: var(--ds-3);
  background: var(--ds-inset);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-shadow-hairline);
  color: var(--ds-ink-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Dev simulator (T17). The clock is the thing you read most, so it is a
   labeled toolbar in mono, not a sentence. */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-3) var(--ds-5);
}

.toolbar__field {
  display: grid;
  gap: 2px;
}

.toolbar__label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

.toolbar__value {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
}

.toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-2);
  margin-left: auto;
}

/* Roles are one control with one selection, so they read as one. */

.segmented--roles {
  flex-wrap: wrap;
  max-width: 100%;
  margin-bottom: var(--ds-4);
}

.segmented__item {
  display: grid;
  gap: 1px;
  padding: var(--ds-1) var(--ds-3);
  border-radius: var(--ds-r-xs);
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--ds-dur) var(--ds-ease),
    color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.segmented__item:hover {
  background: var(--ds-hover);
  color: var(--ds-ink);
}

.segmented__item.is-current {
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-btn);
}

.segmented__sub {
  font-size: var(--ds-text-2xs);
  font-weight: 400;
  color: var(--ds-ink-3);
}

/* Dev outbox: notification bodies (the digest) carry their own line breaks. */

.outbox-body {
  white-space: pre-line;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
}

/* Narrow screens. The nav stacks, so the header has no fixed height any more:
   everything that pinned itself under it goes static rather than covering the
   thing you scrolled to. */

@media (max-width: 48rem) {
  .site-header {
    position: static;
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-1) 0;
    padding: var(--ds-2) var(--ds-3);
  }

  .nav__group,
  .nav__group--end {
    margin-left: 0;
    gap: 0 var(--ds-4);
  }

  .dev-strip .nav {
    flex-direction: row;
  }

  .page {
    padding: var(--ds-5) var(--ds-3) var(--ds-7);
  }

  .qgroup__head,
  .handoff {
    position: static;
  }

  .card,
  .conversation-group,
  .decision-card,
  .release-card,
  .lead-card,
  .paste-form,
  .action-panel,
  .sim-panel {
    padding: var(--ds-3);
  }

  .conversation-group {
    padding: 0;
  }

  .qgroup__head {
    padding: var(--ds-3);
  }

  .qgroup__body {
    padding: 0 var(--ds-3) var(--ds-3);
  }

  .thread {
    padding: var(--ds-3);
  }

  .msg {
    max-width: 90%;
  }

  /* The columns keep their widths and the wrap does the scrolling. */
  .table--conversations {
    min-width: 34rem;
  }

  .segmented {
    flex-wrap: wrap;
  }

  .toasts {
    left: var(--ds-3);
    right: var(--ds-3);
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Marketing site at /. Scoped to .site so nothing here reaches the console.
   Same tokens, wider rhythm, square buttons.
   --------------------------------------------------------------------------- */

.site {
  background: var(--ds-surface);
}

.site-wrap {
  max-width: var(--ds-w-site);
  margin: 0 auto;
  padding: 0 var(--ds-5);
}

.site-section {
  padding: var(--ds-9) 0;
  background: var(--ds-surface);
}

.site-section--paper {
  background: var(--ds-paper);
}

.site-section--dark {
  background: var(--ds-ink);
  color: var(--ds-line-soft);
}

.site-section--dark .eyebrow,
.site-section--dark .site-note {
  color: var(--ds-line-strong);
}

.site-section--dark .site-body {
  color: var(--ds-line);
}

/* Nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 var(--ds-line);
}

.site-nav__inner {
  max-width: var(--ds-w-site);
  margin: 0 auto;
  padding: var(--ds-3) var(--ds-5);
  display: flex;
  align-items: center;
  gap: var(--ds-5);
}

.site-nav__links,
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-5);
}

.site-nav__actions {
  margin-left: auto;
}

.site-nav a {
  color: var(--ds-ink-2);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ds-ink);
}

.site-nav .brand {
  color: var(--ds-ink);
  font-size: var(--ds-text-lg);
}

@media (max-width: 46rem) {
  .site-nav__links {
    display: none;
  }
}

/* Type */

.site h1 {
  margin: var(--ds-4) 0 var(--ds-5);
  font-family: var(--ds-font-display);
  font-size: clamp(2.75rem, 7vw, var(--ds-text-4xl));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Inherited by the two clause spans, so neither leaves one word alone. */
  text-wrap: balance;
}

.site h1 span {
  display: block;
}

.tone-win {
  color: var(--ds-accent);
}

.tone-cost {
  color: var(--ds-ink-3);
}

.site-h2 {
  max-width: 24ch;
  margin: var(--ds-4) 0 var(--ds-5);
  font-family: var(--ds-font-display);
  font-size: clamp(1.75rem, 4vw, var(--ds-text-2xl));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.site-lede,
.site-body {
  max-width: var(--ds-w-prose);
  font-size: var(--ds-text-md);
  line-height: 1.7;
  color: var(--ds-ink-2);
}

.site-note {
  margin: var(--ds-5) 0 0;
  max-width: var(--ds-w-prose);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-3);
}

.site-link {
  font-size: var(--ds-text-sm);
  font-weight: 500;
  text-decoration: none;
}

.site-link:hover {
  text-decoration: underline;
}

.site-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-5);
  margin: var(--ds-6) 0 0;
}

/* Marketing buttons are square and taller than the console's. */

.site .btn {
  min-height: 44px;
  border-radius: 0;
  padding: var(--ds-3) var(--ds-5);
}

.site .btn--dark {
  background: var(--ds-ink);
  color: var(--ds-paper);
  box-shadow: none;
}

.site .btn--dark:hover {
  background: var(--ds-accent);
  color: var(--ds-accent-ink);
}

/* Hero */

.site-hero {
  padding-top: var(--ds-8);
}

.site-hero__grid {
  display: grid;
  gap: var(--ds-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .site-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--ds-7);
  }
}

.site-artifact__note {
  margin: var(--ds-6) 0 0;
}

/* Hero artifact: two overlapping cards, drawn in CSS, no screenshot. */

.site-artifact {
  position: relative;
  margin: 0;
  padding: 0 0 var(--ds-7) var(--ds-6);
}

.artifact {
  background: var(--ds-surface);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-4);
}

.artifact--approval {
  box-shadow: var(--ds-shadow-raised);
  transform: rotate(-1deg) translate(var(--ds-4), calc(-1 * var(--ds-4)));
}

.artifact--thread {
  position: relative;
  z-index: 1;
  max-width: 22rem;
  margin: calc(-1 * var(--ds-6)) 0 0 calc(-1 * var(--ds-6));
  box-shadow: var(--ds-shadow-overlay);
}

@media (max-width: 60rem) {
  .site-artifact {
    padding-left: 0;
  }

  .artifact--approval,
  .artifact--thread {
    transform: none;
    margin-left: 0;
  }
}

.artifact__strip {
  margin: 0 0 var(--ds-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

.artifact__draft {
  margin: 0 0 var(--ds-3);
  padding: var(--ds-2) var(--ds-3);
  background: var(--ds-inset);
  border-radius: var(--ds-r-sm);
  font-size: var(--ds-text-base);
  line-height: 1.45;
}

.artifact__gates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-1);
  margin: 0 0 var(--ds-3);
}

.artifact__actions {
  display: flex;
  gap: var(--ds-2);
}

.artifact__actions .btn {
  min-height: 34px;
  padding: var(--ds-2) var(--ds-4);
  font-size: var(--ds-text-sm);
}

.artifact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2);
  margin: 0;
  font-size: var(--ds-text-sm);
}

.artifact__name {
  font-weight: 600;
}

.artifact__meta {
  color: var(--ds-ink-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-variant-numeric: tabular-nums;
}

.artifact .thread {
  margin-bottom: 0;
}

.artifact .msg {
  max-width: 15rem;
  font-size: var(--ds-text-sm);
}

/* Stats */

.site-stats {
  list-style: none;
  display: grid;
  gap: var(--ds-6);
  margin: var(--ds-7) 0 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .site-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-stat__num {
  display: block;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-5xl);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.site-stat__label {
  display: block;
  margin-top: var(--ds-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

/* Steps */

.site-steps {
  list-style: none;
  display: grid;
  gap: var(--ds-6);
  margin: var(--ds-7) 0 0;
  padding: 0;
}

@media (min-width: 56rem) {
  .site-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-7) var(--ds-6);
  }
}

.site-step__num {
  display: block;
  margin-bottom: var(--ds-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-2xs);
  letter-spacing: 0.2em;
  color: var(--ds-ink-3);
}

.site-steps h3 {
  margin: 0 0 var(--ds-2);
  font-size: var(--ds-text-md);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.site-steps p {
  margin: 0;
  max-width: 34ch;
  color: var(--ds-ink-2);
  line-height: 1.65;
}

/* Gates */

.site-gates {
  list-style: none;
  display: grid;
  gap: var(--ds-4);
  margin: var(--ds-6) 0 0;
  padding: 0;
  max-width: var(--ds-w-prose);
}

.site-gates li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-3);
}

.site-gates svg {
  flex: none;
  margin-top: 2px;
  color: var(--ds-ok-line);
}

.site-gates p {
  margin: 0;
  line-height: 1.6;
  color: var(--ds-line);
}

.site-gates strong {
  color: var(--ds-surface);
  font-weight: 600;
}

/* Status cards */

.site-cards {
  list-style: none;
  display: grid;
  gap: var(--ds-4);
  margin: var(--ds-7) 0 0;
  padding: 0;
}

@media (min-width: 56rem) {
  .site-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-cards .card {
  margin: 0;
  padding: var(--ds-5);
}

.site-cards h3 {
  font-size: var(--ds-text-md);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.site-cards p {
  margin: 0;
  color: var(--ds-ink-2);
  line-height: 1.65;
}

/* Footer */

.site-footer {
  background: var(--ds-ink);
  color: var(--ds-line-strong);
  padding: var(--ds-7) 0 var(--ds-5);
}

.site-footer__grid {
  display: grid;
  gap: var(--ds-6);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-footer ul {
  list-style: none;
  margin: var(--ds-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ds-2);
  font-size: var(--ds-text-sm);
}

.site-footer a {
  color: var(--ds-line-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ds-surface);
  text-decoration: underline;
}

.site-footer__note {
  margin: var(--ds-3) 0 0;
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-3);
}

.site-footer__bar {
  margin-top: var(--ds-6);
  padding-top: var(--ds-4);
  font-size: var(--ds-text-xs);
}

.site-footer__bar p {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--ds-4);
}

@media (max-width: 48rem) {
  .site-section {
    padding: var(--ds-8) 0;
  }
}

/* ---------------------------------------------------------------------------
   Print. The weekly report and the digest get read on paper and pasted into
   texts, so the chrome goes and the ink lands on white however the screen was
   themed. Components still read tokens; only the tokens change.
   --------------------------------------------------------------------------- */

@media print {
  :root,
  :root[data-theme="dark"] {
    --ds-paper: #ffffff;
    --ds-canvas: #ffffff;
    --ds-surface: #ffffff;
    --ds-inset: #ffffff;
    --ds-hover: #ffffff;
    --ds-ink: #000000;
    --ds-ink-2: #333333;
    --ds-ink-3: #555555;
    --ds-line-soft: #dddddd;
    --ds-line: #bbbbbb;
    --ds-line-strong: #888888;
    color-scheme: light;
  }

  @page {
    margin: 16mm;
  }

  .site-header,
  .dev-strip,
  .toasts,
  .theme-toggle,
  .card-actions,
  .shortcuts,
  .digest-card__head button {
    display: none;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .stat-tile,
  .table-wrap,
  .digest,
  .card {
    box-shadow: none;
    outline: 1px solid var(--ds-line);
    outline-offset: -1px;
  }

  .digest-card {
    box-shadow: none;
    padding: 0;
  }

  .stat-tile,
  .baseline__row,
  tr {
    break-inside: avoid;
  }

  /* Nothing scrolls on paper. */
  .table-wrap {
    overflow: visible;
  }
}

/* Setup and worklist forms keep the same reading order on phones. */
.ops-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ops-grid label { min-width: 0; }
.ops-connection { border-top: 1px solid var(--border, #ddd); padding: 1rem 0; overflow-wrap: anywhere; }
.ops-layout form, #recaps form, #people form { margin-top: 1rem; }
.ops-layout input, .ops-layout select, .ops-grid input { max-width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .ops-layout, .ops-grid { grid-template-columns: minmax(0, 1fr); } }