/* One visual language for every page this server renders — the application
   shell and the four standalone pages (sign-in, invitation, pending approval,
   terminal authorization) alike. There is one stylesheet, one set of tokens,
   and one component vocabulary; a page that needs a button uses `.button`.

   The system is deliberately small:

     Surfaces   page → surface → surface-soft. One hairline border, one shadow.
     Radius     6 inline · 8 control · 10 container · pill.
     Spacing    multiples of 4.
     Type       11 micro · 12 secondary · 13 body · 14 section · 26 page.
     Color      brand = interactive and active only. accent = the second data
                series only. positive/warning/danger = state only, and never
                hue alone — always beside a word.

   Both themes carry the same token names, so no component ever branches on
   theme. The dark block is stated twice, once for the explicit toggle and once
   for the system preference; keep the two identical. */

:root {
  color-scheme: light;

  --page: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --ink: #14161a;
  --ink-2: #535964;
  --ink-3: #858c98;
  --line: #e5e7eb;
  --line-strong: #d4d8de;

  --brand: #286fd1;
  --brand-soft: #eaf2ff;
  --brand-ink: #ffffff;
  --accent: #d96a33;
  --positive: #15803d;
  --positive-soft: #eaf8ef;
  --warning: #b45309;
  --warning-soft: #fff5df;
  --danger: #c2413b;
  --danger-soft: #fff0ef;
  --danger-ink: #ffffff;

  --sidebar: #ffffff;
  --sidebar-ink: #18181b;
  --sidebar-muted: #71717a;
  --avatar: #313641;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-body: 13px;
  --text-heading: 14px;
  --text-page: 26px;

  --control-height: 36px;
  --radius-sm: 6px;
  --control-radius: 8px;
  --radius: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101216;
  --surface: #171a1f;
  --surface-soft: #1c2026;
  --ink: #f4f5f7;
  --ink-2: #b3b8c2;
  --ink-3: #7d8490;
  --line: #292e36;
  --line-strong: #363c46;
  --brand: #62a0f4;
  --brand-soft: #172d4d;
  --brand-ink: #101216;
  --accent: #e9824f;
  --positive: #57c77a;
  --positive-soft: #142c1e;
  --warning: #f2b95f;
  --warning-soft: #332611;
  --danger: #f18179;
  --danger-soft: #341918;
  --danger-ink: #101216;
  --sidebar: #171a1f;
  --sidebar-ink: #f4f5f7;
  --sidebar-muted: #8f96a3;
  --avatar: #2a2f38;
  --shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #101216;
    --surface: #171a1f;
    --surface-soft: #1c2026;
    --ink: #f4f5f7;
    --ink-2: #b3b8c2;
    --ink-3: #7d8490;
    --line: #292e36;
    --line-strong: #363c46;
    --brand: #62a0f4;
    --brand-soft: #172d4d;
    --brand-ink: #101216;
    --accent: #e9824f;
    --positive: #57c77a;
    --positive-soft: #142c1e;
    --warning: #f2b95f;
    --warning-soft: #332611;
    --danger: #f18179;
    --danger-soft: #341918;
    --danger-ink: #101216;
    --sidebar: #171a1f;
    --sidebar-ink: #f4f5f7;
    --sidebar-muted: #8f96a3;
    --avatar: #2a2f38;
    --shadow: 0 1px 2px rgba(0, 0, 0, .22);
  }
}

/* ---------- element defaults ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--page); }
body { margin: 0; color: var(--ink); background: var(--page); font: var(--text-body)/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; font-weight: 400; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3 { font-weight: 650; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mono, code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 32%, transparent); outline-offset: 2px; }
.htmx-request { opacity: .68; transition: opacity 160ms ease; }

/* ---------- shared primitives ---------- */

/* Every enclosed rectangle in the product is this: hairline, radius, surface. */
.panel, .metric-card, .overlap-card, .auth-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}

/* The one action. Default is the quiet variant; `primary` and `danger` are the
   only escalations, and a page gets at most one primary. */
.button {
  width: fit-content; min-height: var(--control-height);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--control-radius);
  color: var(--ink-2); background: var(--surface); cursor: pointer;
  font-size: var(--text-sm); font-weight: 650; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.button:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.button.primary { color: var(--brand-ink); border-color: var(--brand); background: var(--brand); }
.button.primary:hover { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 82%, #000); background: color-mix(in srgb, var(--brand) 88%, #000); }
.button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--surface); }
.button.danger:hover { color: var(--danger-ink); border-color: var(--danger); background: var(--danger); }
.button.compact { min-height: 28px; padding: 0 10px; }
.button.block { width: 100%; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button:disabled:hover { color: var(--ink-2); border-color: var(--line-strong); background: var(--surface); }

/* One form control geometry, everywhere. */
input, select, textarea, .compact-select {
  min-height: var(--control-height); padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--control-radius);
  color: var(--ink); background: var(--surface);
}
select { max-width: 300px; padding-right: 28px; }
textarea { min-height: 0; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
/* A checkbox is not a field: it keeps its intrinsic box and never stretches,
   whatever the layout rules around it say about inputs. */
input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); }
.compact-select { min-width: 90px; min-height: 28px; padding: 3px 24px 3px 8px; font-size: var(--text-sm); }

/* Micro-label: the uppercase 11px used for column heads, field groups and
   section kickers. Stated once so they never drift apart. */
.nav-label, .data-table th, .scope label, .billing-summary small,
.overlap-card footer > strong, .recovery-terms dt, .dependency-map article span,
.dependency-map article small, .checkpoint > span, .brand-lockup small,
.auth-kicker {
  color: var(--ink-3); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Status pill. The dot carries the hue, the word carries the meaning. */
.state-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-2); background: var(--surface-soft);
  font-size: var(--text-xs); font-weight: 650; text-transform: capitalize; white-space: nowrap;
}
.state-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.state-chip.active i, .state-chip.documented i, .state-chip.agreed i,
.state-chip.ready i, .state-chip.satisfied i, .state-chip.completed i { background: var(--positive); }
.state-chip.negotiating i, .state-chip.checkpoint_required i, .state-chip.recovering i, .state-chip.pending i { background: var(--warning); }
.state-chip.executing i, .state-chip.exclusive i { background: var(--brand); }
.state-chip.shared i { background: var(--positive); }
.state-chip.expired i, .state-chip.attention i, .state-chip.failed i, .state-chip.rejected i { background: var(--danger); }

/* Inline path chips. Paths are the product's nouns; they always look like this. */
.path-stack { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.path-stack code {
  padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2); background: var(--surface-soft);
  font-size: var(--text-xs); word-break: break-all;
}

/* Live dot: one green, one halo. */
.presence i, .sync-state i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 16%, transparent);
}

/* Square-ish identity tile, at the two sizes the product uses. */
.work-avatar, .agent-avatar, .avatar-fallback, .identity img, .protocol-symbol, .commitment-order {
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--control-radius); font-weight: 650;
}

/* ---------- application shell ---------- */

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; padding: 20px 12px 16px; color: var(--sidebar-ink); background: var(--sidebar); border-right: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-lockup > span:last-child { display: grid; }
.brand-lockup strong { font-size: var(--text-heading); letter-spacing: -.02em; }
.brand-lockup small { margin-top: 1px; color: var(--sidebar-muted); }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--control-radius); color: var(--brand-ink); background: var(--brand); }
.brand-mark svg { width: 20px; height: 20px; stroke-width: 2.2; }

.primary-nav { flex: 1; overflow-y: auto; }
.nav-label { margin: 20px 8px 4px; }
.nav-label:first-child { margin-top: 0; }
.nav-item { display: flex; align-items: center; min-height: 36px; gap: 10px; margin: 2px 0; padding: 8px 8px; border-radius: var(--control-radius); color: var(--sidebar-muted); text-decoration: none; font-size: var(--text-body); font-weight: 520; transition: color 120ms ease, background 120ms ease; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover, .nav-item.active { color: var(--sidebar-ink); background: var(--page); }
.nav-item.active svg { color: var(--brand); }
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-pill); color: var(--ink-3); background: var(--page); font-size: var(--text-xs); font-weight: 650; text-align: center; }
.nav-count.attention { color: var(--warning); background: var(--warning-soft); }
.sidebar-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.presence { display: flex; align-items: center; gap: 8px; margin: 0 8px 12px; color: var(--sidebar-muted); font-size: var(--text-sm); }
.identity { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--control-radius); text-decoration: none; }
.identity:hover { background: var(--page); }
.identity img, .avatar-fallback { width: 32px; height: 32px; object-fit: cover; }
.avatar-fallback { color: #fff; background: var(--avatar); text-transform: uppercase; }
.identity > span:last-child { min-width: 0; display: grid; }
.identity strong { overflow: hidden; font-size: var(--text-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.identity small { color: var(--sidebar-muted); font-size: var(--text-xs); text-transform: capitalize; }
.signout-link { width: 100%; min-height: 36px; border: 0; background: transparent; cursor: pointer; font-weight: 520; }

.app-frame { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); }
.scope { display: flex; align-items: center; gap: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sync-state { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--text-sm); }
.icon-button { width: var(--control-height); height: var(--control-height); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--control-radius); color: var(--ink-2); background: var(--surface); cursor: pointer; }
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-button svg { width: 18px; height: 18px; }
.menu-button { display: none; }

.workspace { width: min(1320px, 100%); margin: 0 auto; padding: 32px 32px 64px; }
.page-head { margin-bottom: 20px; }
.page-title { min-width: 0; }
.page-head h1 { margin: 0; font-size: var(--text-page); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.page-description { max-width: 720px; margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-body); }

/* ---------- overview ---------- */

.status-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 20px; border: 1px solid color-mix(in srgb, var(--positive) 22%, var(--line)); border-radius: var(--radius); background: var(--positive-soft); }
.status-banner.notice { border-color: color-mix(in srgb, var(--warning) 24%, var(--line)); background: var(--warning-soft); }
.status-banner.attention { border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); background: var(--danger-soft); }
.status-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--positive); font-weight: 700; }
.notice .status-icon { background: var(--warning); }
.attention .status-icon { background: var(--danger); }
.status-banner h2 { margin: 0; font-size: var(--text-heading); letter-spacing: -.01em; }
.status-banner p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.status-banner > .button { margin-left: auto; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric-card { padding: 16px 20px; }
.metric-card p { margin: 0 0 4px; color: var(--ink-2); font-size: var(--text-sm); }
.metric-card strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.metric-card small { display: block; margin-top: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.metric-card.warn strong { color: var(--danger); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: 16px; }
.panel { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: var(--text-heading); }
.panel-head p { margin: 4px 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.panel-head a { color: var(--brand); font-size: var(--text-sm); font-weight: 650; text-decoration: none; }

.legend { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--text-xs); }
.legend i { width: 7px; height: 7px; margin-left: 4px; border-radius: 2px; }
.opened { background: var(--brand); }
.landed { background: var(--accent); }
.activity-chart { height: 224px; display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 10px); padding: 28px 20px 32px; }
.chart-day { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line); }
.chart-day::before { content: ""; position: absolute; inset: 25% 0 auto; border-top: 1px dashed var(--line); }
.chart-day .bar { position: relative; z-index: 1; width: 34%; max-width: 10px; min-height: 3px; border-radius: 3px 3px 0 0; }
.chart-day small { position: absolute; top: calc(100% + 8px); left: 50%; color: var(--ink-3); font-size: var(--text-xs); transform: translateX(-50%); }

.work-list { padding: 4px 0; }
.work-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.work-row:last-child { border-bottom: 0; }
.work-avatar { width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); font-size: var(--text-xs); }
.work-avatar img { width: 100%; height: 100%; object-fit: cover; }
.work-row strong { display: block; overflow: hidden; font-size: var(--text-body); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.work-row p { margin: 2px 0 0; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.lease { color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }

/* ---------- tables ---------- */

.content-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.content-toolbar form { display: flex; align-items: center; gap: 8px; }
.content-toolbar label, .content-toolbar > span { color: var(--ink-3); font-size: var(--text-sm); }
.toolbar-forms { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.toolbar-forms select { max-width: 340px; }
.check { display: flex; align-items: center; gap: 6px; margin-left: 4px; }

.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 920px; border-collapse: collapse; text-align: left; }
.data-table th { padding: 12px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.data-table td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--text-body); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-soft); }
.data-table td > strong { display: block; max-width: 240px; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.data-table td > small { display: block; max-width: 270px; margin-top: 4px; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.plan-table td { vertical-align: middle; }

.lease-track { display: block; width: 76px; height: 3px; margin-top: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.lease-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.overlap-note { color: var(--danger) !important; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .button + .button { margin-left: 4px; }

/* ---------- overlaps ---------- */

.overlap-list { display: grid; gap: 12px; }
.overlap-card { overflow: hidden; }
.overlap-card.mutual { border-left: 3px solid var(--danger); }
.overlap-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.overlap-card > header > span:last-child { color: var(--ink-3); font-size: var(--text-xs); font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; }
.overlap-sides { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); align-items: center; }
.overlap-sides section { min-width: 0; padding: 20px; }
.overlap-sides p { margin: 0 0 4px; color: var(--ink-3); font-size: var(--text-sm); }
.overlap-sides h2 { margin: 0 0 8px; font-size: var(--text-heading); letter-spacing: -.015em; }
.overlap-sides code { color: var(--ink-2); font-size: var(--text-xs); }
.overlap-symbol { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--danger); background: var(--danger-soft); }
.overlap-card footer { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.overlap-card footer > strong { display: block; margin-bottom: 8px; }

/* ---------- empty states ---------- */

.empty-state { display: grid; place-items: center; padding: 32px 20px; text-align: center; }
.empty-state.large { min-height: 320px; }
.empty-state > span { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; color: var(--positive); background: var(--positive-soft); font-weight: 700; }
.empty-state h2 { margin: 0; font-size: var(--text-heading); }
.empty-state p { max-width: 420px; margin: 4px 0 0; color: var(--ink-3); font-size: var(--text-sm); }

/* ---------- coordination protocol ---------- */

.coordination-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 16px; align-items: start; }
.negotiation-detail, .negotiation-side { overflow: hidden; }
.protocol-resource { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.protocol-symbol { flex: none; width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); }
.protocol-resource strong { display: block; margin-bottom: 8px; }
.protocol-resource .path-stack { align-items: center; margin-top: 4px; color: var(--ink-3); font-size: var(--text-xs); }
.protocol-section { padding: 20px; border-bottom: 1px solid var(--line); }
.protocol-section:last-child { border-bottom: 0; }
.protocol-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.protocol-section h3, .negotiation-side h3 { margin: 0; font-size: var(--text-heading); }
.protocol-section > header span { color: var(--ink-3); font-size: var(--text-xs); }
.protocol-section > p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--text-sm); }

.dependency-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 12px 0; }
.dependency-map article { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.dependency-map article strong, .dependency-map article p { display: block; margin: 4px 0; font-size: var(--text-sm); }

.commitment-list { margin: 0; padding: 0; list-style: none; }
.commitment-list > li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.commitment-order { width: 24px; height: 24px; color: var(--brand); background: var(--brand-soft); border-radius: 50%; }
.commitment-list .path-stack { margin-top: 8px; }
.commitment-list small { display: block; margin-top: 4px; color: var(--ink-3); }
.checkpoint { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-soft); }
.checkpoint > strong { font-size: var(--text-sm); }
.checkpoint > small { margin: 0; color: var(--ink-3); }
/* A checkpoint that came and went is the one thing on this page somebody has
   to act on, so it does not look like the ones still pending. The status word
   is already rendered beside it — the hue is never carrying this alone. */
.checkpoint.missed { background: var(--danger-soft); }
.checkpoint.missed > small { color: var(--danger); font-weight: 650; }
.checkpoint.reached > small { color: var(--positive); }
.protocol-head-state { display: flex; align-items: center; gap: 8px; }
/* Stated urgency is the requester's own claim, not a system judgement, so it
   reads as a neutral label unless it is the one that changes someone's mind. */
.state-chip.priority-high i, .state-chip.priority-urgent i { background: var(--danger); }
.state-chip.priority-normal i, .state-chip.priority-medium i { background: var(--warning); }
.state-chip.priority-low i { background: var(--ink-3); }
.success-criteria { margin: 8px 0 0; padding-left: 16px; color: var(--ink-2); font-size: var(--text-sm); }
.success-criteria li { margin-top: 2px; }

.recovery-terms dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.recovery-terms dl > div { padding: 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.recovery-terms dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); }

.protocol-events article { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.event-mark { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--brand); }
.protocol-events strong { font-size: var(--text-sm); }
.protocol-events p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.protocol-events time { color: var(--ink-3); font-size: var(--text-xs); }

.negotiation-side > section { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.negotiation-side > section:last-child { border-bottom: 0; }
.negotiation-side p, .negotiation-side li { color: var(--ink-2); font-size: var(--text-sm); }
.negotiation-side ul { padding-left: 16px; }
.participant { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 0; }
.agent-avatar { width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); font-size: var(--text-sm); }
.participant strong, .participant small { display: block; }
.participant strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.participant small, .participant > span:last-child { color: var(--ink-3); font-size: var(--text-xs); }
.definition-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--ink-3); font-size: var(--text-sm); }
.definition-row strong { color: var(--ink); font-weight: 650; }

.protocol-empty { min-height: 380px; display: grid; place-items: center; align-content: center; padding: 40px; text-align: center; }
.protocol-empty h2 { margin: 12px 0 4px; font-size: var(--text-heading); }
.protocol-empty p { max-width: 600px; margin: 0; color: var(--ink-2); }
.protocol-empty pre { max-width: 100%; margin: 20px 0 0; padding: 12px; overflow-x: auto; color: var(--ink-2); background: var(--surface-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); text-align: left; }

/* ---------- forms ---------- */

.inline-form, .panel-actions, .form-actions, .check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.inline-form, .panel-actions { padding: 16px 20px; }
.inline-form input { flex: 1 1 240px; max-width: 420px; }
.inline-form select { flex: 0 0 auto; min-width: 130px; }
.form-panel { overflow: hidden; }
.form-panel form { display: grid; gap: 16px; padding: 20px; }
.form-panel label, .override-form label, .field label { display: grid; gap: 6px; color: var(--ink-2); font-size: var(--text-body); font-weight: 650; }
.form-panel input:not([type="checkbox"]), .form-panel select, .form-panel textarea,
.override-form select, .override-form textarea, .override-form input { width: 100%; }
/* Paths and provider options are monospace in the tables and the path chips;
   they are monospace in the fields that produce them too. */
.form-panel textarea { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: var(--text-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-actions { justify-content: flex-end; }
.form-actions > span { margin-right: auto; color: var(--ink-2); font-size: var(--text-sm); font-weight: 400; }
.check-row { padding: 0; }
.check-row label, .checkbox-field { display: flex !important; align-items: center; gap: 8px !important; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.override-form { display: grid; gap: 8px; margin: 12px 0; }
.section-gap { margin-top: 16px; }
.table-panel > .panel-actions { justify-content: flex-end; border-top: 1px solid var(--line); }
.panel-note { margin: 0; padding: 0 20px 16px; color: var(--ink-3); font-size: var(--text-sm); }
.form-error { color: var(--danger); }

/* A secret shown exactly once. Monospace, selectable, and visually a receipt
   rather than a field — there is nothing here to edit. */
.one-time-secret {
  margin: 0 20px 16px; padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--positive) 25%, var(--line));
  background: var(--positive-soft); color: var(--ink);
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: var(--text-sm); overflow-wrap: anywhere;
}

/* ---------- billing ---------- */

.billing-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.billing-summary article { display: grid; gap: 4px; padding: 16px 20px; background: var(--surface); }
.billing-summary strong { font-size: var(--text-heading); font-weight: 650; }
.billing-plan { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border-top: 1px solid var(--line); }
.billing-plan strong { display: block; font-size: var(--text-heading); font-weight: 650; }
.billing-plan p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.billing-plan .button { flex: none; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; }

/* ---------- standalone pages ---------- */

/* Sign-in, invitation, pending approval and terminal authorization are served
   as static assets outside the shell. They are the same product, so they use
   the same tokens and the same components — one card on the page surface, the
   sidebar's brand lockup at the top, `.button` for every action. */

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(420px, 100%); padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand strong { font-size: var(--text-heading); font-weight: 650; letter-spacing: -.02em; }
.auth-brand > :last-child { margin-left: auto; }
.auth-badge { padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-3); font-size: var(--text-xs); font-weight: 650; }
.auth-intro { margin-bottom: 24px; }
.auth-kicker { margin: 0 0 8px; }
.auth-intro h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.auth-intro > p:last-child { margin: 8px 0 0; color: var(--ink-2); }
.auth-body > * + * { margin-top: 16px; }
.auth-body form { display: grid; gap: 16px; }
.auth-note { margin: 8px 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.auth-intro code, .auth-note code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-2); font-size: .92em; }

/* Feedback keeps the state colors honest: a bordered strip, never hue alone. */
.auth-message { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface-soft); font-size: var(--text-sm); }
.auth-message.error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.auth-message.done { border-color: color-mix(in srgb, var(--positive) 30%, var(--line)); background: var(--positive-soft); color: var(--positive); }

.field { display: grid; gap: 6px; }
.field .help { margin: 0; color: var(--ink-3); font-size: var(--text-sm); font-weight: 400; }
.field input, .field select { width: 100%; }
.org-field select { font-size: 16px; font-weight: 650; padding: 10px 12px; border: 2px solid var(--brand); border-radius: var(--radius-sm); }
.code-input { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 18px; letter-spacing: .18em; text-align: center; }

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--text-xs); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.token-access > summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 650; cursor: pointer; list-style: none; }
.token-access > summary::-webkit-details-marker { display: none; }
.token-access > summary::before { content: ""; flex: none; width: 0; height: 0; border: 4px solid transparent; border-left-color: currentColor; transition: transform 120ms ease; }
.token-access[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.token-access > summary:hover { color: var(--brand); }
.token-access form { display: grid; gap: 12px; padding-top: 8px; }

.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-xs); }
.auth-footer svg { flex: none; width: 14px; height: 14px; }

/* ---------- responsive ---------- */

@media (max-width: 1050px) {
  .dashboard-grid, .coordination-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .form-grid, .billing-summary { grid-template-columns: 1fr; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: 260px; transform: translateX(-102%); box-shadow: 20px 0 60px rgba(0,0,0,.25); transition: transform 180ms ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .menu-button { display: grid; }
  .topbar { padding: 0 16px; }
  .scope label, .sync-state { display: none; }
  .scope select { max-width: 48vw; }
  .workspace { padding: 24px 16px 48px; }
  .status-banner { align-items: flex-start; flex-wrap: wrap; }
  .status-banner > .button { width: auto; margin: 4px 0 0 48px; }
  .overlap-sides { grid-template-columns: 1fr; }
  .overlap-symbol { margin: -8px 20px; transform: rotate(90deg); }
  .recovery-terms dl { grid-template-columns: 1fr; }
  .billing-plan { flex-direction: column; align-items: flex-start; }
  .auth-card { padding: 24px; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { padding: 16px; }
  .activity-chart { height: 190px; padding-inline: 12px; }
  .legend { display: none; }
  .content-toolbar { align-items: flex-start; flex-direction: column; }
  .content-toolbar form { width: 100%; flex-wrap: wrap; }
  .content-toolbar select { flex: 1; }
  .toolbar-forms { width: 100%; align-items: stretch; flex-direction: column; }
  .toolbar-forms select { max-width: none; }
  .inline-form { align-items: stretch; }
  .inline-form input, .inline-form select, .inline-form .button { width: 100%; max-width: none; }
}

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

/* ---------- landing page ---------- */

/* Public, and the only page here a stranger sees before signing in. Same
   tokens, same components: the transcript blocks are the product's own
   monospace, and the one primary button is the same `.button.primary` the
   application uses. */

.landing { --measure: 68ch; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1080px, 100%); margin: 0 auto; padding: 20px 24px; }
.landing-nav .auth-brand { margin: 0; }
.landing main { width: min(1080px, 100%); margin: 0 auto; padding: 0 24px 64px; }

.landing-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--line); }
.landing-hero h1 { max-width: 20ch; margin: 8px 0 0; font-size: clamp(32px, 5.5vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.landing-lede { max-width: var(--measure); margin: 20px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.landing-lede strong { color: var(--ink); font-weight: 650; }
.landing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.landing-install { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface-soft); color: var(--ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.landing-note { max-width: var(--measure); margin: 28px 0 0; color: var(--ink-3); font-size: var(--text-body); }

.landing-section { padding: 48px 0; border-bottom: 1px solid var(--line); }
.landing-section h2 { max-width: 30ch; margin: 8px 0 0; text-wrap: balance; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.landing-section h2 em { font-style: normal; color: var(--brand); }
.landing-body { max-width: var(--measure); margin: 20px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.landing-body code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-2); font-size: .9em; }

/* The transcript blocks carry the whole argument, so they are a component
   rather than a styled <pre>: bordered like every other container here, and
   labelled, because an unlabelled wall of monospace gets skipped.

   Two shapes, one component. A <figure> when the label is just a label, and a
   <details> when the transcript is folded away under it — the narration carries
   the argument, and a reader who wants to check it rather than take it on trust
   opens the record underneath the sentence that describes it. Closed by
   default, because a page that opens with four screens of agent dialogue is one
   nobody finishes. */
.transcript, .transcript-detail { margin: 24px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.transcript-detail { margin-top: 20px; }
.transcript-label, .transcript-detail > summary { margin: 0; padding: 10px 16px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.transcript-label, .transcript-detail[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.transcript-detail > summary:hover { color: var(--ink-2); background: var(--surface-soft); }
.transcript pre, .transcript-detail pre { margin: 0; padding: 16px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.65; }
.transcript code, .transcript-detail code { color: var(--ink-2); }
.transcript b, .transcript-detail b { color: var(--ink); font-weight: 650; }
.transcript em, .transcript-detail em { color: var(--brand); font-style: normal; }

/* A caret that turns, rather than the platform triangle, so the control looks
   like the rest of the page in every browser. */
.transcript-detail > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.transcript-detail > summary::-webkit-details-marker { display: none; }
.transcript-detail > summary::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 140ms ease;
}
.transcript-detail[open] > summary::before { transform: rotate(45deg); }

/* Two by two, not three and an orphan: the rules are a set and read as one
   when the grid does not strand the last of them on its own row — so an odd
   last card spans the pair rather than sitting half-width beside nothing. They
   are numbered because they are stated as rules, and a rule with a number on it
   is easier to argue with. */
.landing-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: rule; }
.landing-rules > li { position: relative; padding: 20px 20px 20px 56px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); counter-increment: rule; }
.landing-rules > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.landing-rules > li::before { content: counter(rule); position: absolute; top: 20px; left: 20px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: var(--text-xs); font-weight: 700; }

/* The hero carries one example beside the argument, and a soft wash of the
   brand colour behind both. The wash is the only decoration on the page. It is
   painted on the page itself so it has no edges, and it is drawn from the same
   tokens so that it follows the theme rather than fighting it. */
.landing-hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
body.landing:has(.landing-hero-split) {
  background:
    radial-gradient(900px 520px at 78% 180px, color-mix(in srgb, var(--brand-soft) 85%, transparent), transparent 70%),
    radial-gradient(600px 400px at 8% -60px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--page);
  background-repeat: no-repeat;
}
.landing-hero-copy { min-width: 0; }
.landing-lede-quiet { color: var(--ink-3); font-size: 16px; }

/* Examples are drawn as a terminal, never as a transcript. A transcript is
   something an agent actually wrote in a recorded run; an example is ours, and
   the two must not be confused by anyone skimming. Every terminal says
   "Example" in its bar. */
.terminal { min-width: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -12px rgba(15, 23, 42, .18); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.terminal-dots { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); box-shadow: 13px 0 0 var(--line-strong), 26px 0 0 var(--line-strong); margin-right: 26px; }
.terminal pre { margin: 0; padding: 16px 18px; overflow-x: auto; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; }
.t-prompt { color: var(--ink-3); user-select: none; }
.t-cmd { color: var(--ink); font-weight: 600; }
.t-out { color: var(--ink-2); }
.t-dim { color: var(--ink-3); }
.t-warn { color: var(--warning); font-weight: 700; }
.t-note { color: var(--brand); font-weight: 700; }
.t-ok { color: var(--positive); font-weight: 700; }

.landing-section { scroll-margin-top: 56px; }
.landing-section-last { border-bottom: 0; }

/* The layers are four of a kind, so they sit on one row where there is room
   for one, and fold two by two and then one by one where there is not. */
.landing-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; }
.layer-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: border-color 140ms ease, transform 140ms ease; }
.layer-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.layer-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.layer-card p { flex: 1; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.layer-card code { align-self: flex-start; max-width: 100%; padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.layer-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); }
.layer-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layer-card-new { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 55%, var(--surface)), var(--surface) 60%); }
.layer-tag { padding: 2px 7px; border-radius: var(--radius-pill); color: var(--brand-ink); background: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Rules beside an example: the argument on the left, what it looks like on
   the right. The rules stack in one column here, because two narrow columns
   beside a terminal would be three. */
.landing-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.landing-rules-single { grid-template-columns: 1fr; }
.landing-split .terminal { position: sticky; top: 72px; margin-top: 28px; }

@media (max-width: 960px) {
  .landing-hero-split { grid-template-columns: 1fr; gap: 32px; }
  .landing-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-split { grid-template-columns: 1fr; }
  .landing-split .terminal { position: static; margin-top: 0; }
}

@media (max-width: 640px) {
  .landing-layers { grid-template-columns: 1fr; }
  .landing-rules { grid-template-columns: 1fr; }
  .landing-hero { padding: 32px 0 36px; }
  .landing-section { padding: 36px 0; }
  .landing-install { width: 100%; }
}

/* The chart. Three rows on one grid, because the claim being made is about
   overlap: the negotiation bar sits underneath two bars that do not stop for
   it. Spans are set with a style attribute — computed geometry is the one
   thing the CSP permits inline, and a Gantt is nothing but computed geometry.

   No time axis. That run was left idle overnight in the middle of it, and a
   chart with real durations on it would be describing the operator. */
.gantt { margin: 28px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.gantt-grid { display: grid; grid-template-columns: 132px repeat(12, 1fr); align-items: center; gap: 8px 0; }
.gantt-label { grid-column: 1; padding-right: 12px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-align: right; font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; }
.gantt-bar {
  min-width: 0; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--brand-ink); background: var(--brand);
  font-size: var(--text-xs); font-weight: 650; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform-origin: left center; animation: gantt-grow 420ms ease-out both;
}
/* Parked is the whole argument in one bar: written, held, and not blocking
   anybody — so it is drawn as an outline rather than as absence. */
.gantt-parked { color: var(--ink-3); background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--line) 5px, var(--line) 6px); border: 1px dashed var(--line-strong); font-weight: 500; }
.gantt-talk { color: var(--ink); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); }
.gantt-land { background: var(--positive); color: #fff; }
.gantt-axis { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.gantt figcaption { margin-top: 16px; color: var(--ink-3); font-size: var(--text-sm); }

@keyframes gantt-grow { from { transform: scaleX(.02); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 720px) {
  /* The bars stop meaning anything below the width where their spans are
     legible, so the labels go above and each row becomes a full-width band. */
  .gantt-grid { grid-template-columns: 1fr; }
  .gantt-grid > * { grid-column: 1 !important; }
  .gantt-label { padding: 8px 0 0; text-align: left; }
  .gantt-axis { display: none; }
}

/* Section navigation. The landing page argues in order, and this is the order
   made visible — and skippable, for the reader who already knows the argument
   and wants the evidence. */
.section-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* On a phone eight pills would wrap into a wall that sticks over half the
   screen, so they become one row that scrolls sideways. */
@media (max-width: 640px) {
  .section-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 10px 24px; }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { flex: none; white-space: nowrap; }
}
.section-nav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-sm); font-weight: 650; text-decoration: none; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
.section-nav a:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.landing-section { scroll-margin-top: 24px; }

/* The case study is a document rather than a pitch, so it opens by saying what
   it is and what came of it before anybody has to read a transcript. */
.case-head { border-bottom: 0; padding-bottom: 24px; }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin: 32px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.case-facts > div { padding: 14px 16px; background: var(--surface); }
.case-facts dt { color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.case-facts dd { margin: 4px 0 0; color: var(--ink); font-size: var(--text-body); line-height: 1.5; }

/* The hero is two paragraphs of continuous prose rather than a stack of
   assertions, so the second is set a shade quieter than the first: one voice
   carrying on, not a second claim starting. */
.landing-lede-quiet { margin-top: 16px; font-size: 15px; color: var(--ink-3); }

/* Open questions sit above the agreement they came from, because the agreement
   is not waiting for them and the human is the only one who can tell. */
/* Its own panel, above the negotiation grid rather than inside one negotiation:
   the queue spans every negotiation in view, and nesting it in one of them both
   hid it whenever none was selected and invited answers addressed to the wrong
   negotiation. Tinted because it is the one part of this page asking for
   something rather than reporting. */
.protocol-questions { padding: 16px 20px; margin-bottom: 16px; background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.question small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The record of what was asked and decided, after the queue has let it go. An
   answered question used to render nowhere, so there was no way to reach one
   to correct it — which is most of why a wrong answer stayed wrong. */
.question-record { display: grid; gap: 10px; }
.question-past { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.question-past > strong { display: block; font-size: var(--text-body); font-weight: 650; }
.question-past.answered { border-left: 2px solid var(--positive); }
.reply { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line); }
.reply p { margin: 0; color: var(--ink-1); font-size: var(--text-sm); line-height: 1.55; }
/* An answer that has been corrected stays legible but stops being the answer. */
.reply:not(:last-of-type) p { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.reply.superseded-by { border-left-color: var(--positive); }
.question-past .override-form { margin: 10px 0 0; }
.button.subtle { background: transparent; border-color: var(--line); color: var(--ink-2); }
.button.subtle:hover { color: var(--ink-1); border-color: var(--ink-3); }
.question small a:hover { color: var(--ink-1); }
.protocol-questions > strong { display: block; margin-bottom: 12px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.question { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); border-radius: var(--radius-sm); background: var(--surface); }
.question + .question { margin-top: 10px; }
.question > div > strong { display: block; font-size: var(--text-body); font-weight: 650; }
.question small { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--text-xs); font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; }
.question p { margin: 8px 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
/* The default is the reassurance: nothing is blocked while this sits here. */
.question-assume { color: var(--ink-3) !important; }
.question-assume em { font-style: normal; font-weight: 650; color: var(--ink-2); }
.question .override-form { margin: 0; }

/* The ladder, shown on the record: a question is with the agents until one of
   them says it is not theirs. Only the deferred ones reach the queue above. */
.rung { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--ink-3); font-size: var(--text-xs); }
.rung.deferred { background: var(--warning-soft); color: var(--ink-2); }
.question-deferred { margin: 6px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
/* An agent resolution must never read like a person's ruling. */
.reply .by-agent { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; color: var(--ink-2); }

/* Answering settles a question; asking back does not. Two actions, side by
   side, because a person who needs to understand before ruling had only the
   answer box — and what they typed there became the ruling. */
.question-actions { display: grid; gap: 10px; }
@media (min-width: 720px) { .question-actions { grid-template-columns: 1fr 1fr; align-items: start; } }
.clarifications { display: grid; gap: 8px; margin: 10px 0; }
.clarification { padding: 8px 12px; border-left: 2px solid var(--line-strong); background: var(--surface-soft); border-radius: var(--radius-sm); }
.clarification p { margin: 0 0 4px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.clarification p:last-child { margin-bottom: 0; }
.clarification small { color: var(--ink-3); font-size: var(--text-xs); }

.lock-holder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0; }
.lock-holder + .lock-holder { border-top: 1px solid var(--line); }
.lock-holder .button { margin-left: auto; }

.section-title { margin: 28px 0 4px; font-size: 18px; }

/* The board. Four columns of cards, a thread beside them when one is open, and
   a strip of questions above: the person-facing group always open, the
   agent-facing one folded to a count. */
.board-questions { margin-bottom: 12px; }
/* Only when something is actually waiting on a person. This was
   :first-of-type, which matched both panels — one is a section, the other a
   details — so both wore the attention border with nothing waiting. */
.board-questions.waiting { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--warning), var(--shadow); }
/* Agents that stopped watching: a person can act on it, so it is marked the same way. */
.board-questions.attention { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--warning), var(--shadow); }
.board-questions.agents summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 20px; cursor: pointer; font-size: var(--text-heading); }
.board-questions.agents summary .nav-count { margin-left: 0; }
.board-questions.agents summary small { flex-basis: 100%; color: var(--ink-3); font-size: var(--text-sm); font-weight: 400; }
.board-questions.agents[open] summary { border-bottom: 1px solid var(--line); }
.board-question-list { display: grid; }
.board-question { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.board-question:last-child { border-bottom: 0; }
.board-question.for-you { background: var(--warning-soft); }
.board-question strong { font-size: var(--text-body); }
.board-question small { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--text-xs); }
.board-question small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.board-question p { margin: 6px 0 0; font-size: var(--text-sm); }
.board-none { padding-top: 16px; }
.board-scope-note { margin: 0 0 12px; }
.board-contested-link { color: var(--brand); font-size: var(--text-sm); font-weight: 650; text-decoration: none; white-space: nowrap; }

.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.board-grid.with-thread { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 1.3fr); }
.board-column .panel-head { padding: 12px 14px; }
.board-column .panel-head .nav-count { margin-left: 0; }
.board-card { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.board-card:last-child { border-bottom: 0; }
.board-card.lapsed { border-left: 2px solid var(--danger); }
.board-card > strong, .board-card-title { color: var(--ink); font-size: var(--text-body); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.board-card-title:hover { color: var(--brand); }
.board-card small { color: var(--ink-3); font-size: var(--text-xs); overflow-wrap: anywhere; }
.board-card .path-stack { max-width: none; }
.board-card .state-chip { justify-self: start; }
.board-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--ink-3); font-size: var(--text-xs); }
.board-card-foot .lease-track { margin-top: 0; }
.board-card-foot a.state-chip { text-decoration: none; }
.board-failure, .board-outcome { margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.board-failure { padding-left: 8px; border-left: 2px solid var(--danger); }
.board-thread .panel-head { align-items: start; }
.board-thread-body { display: grid; max-height: 70vh; overflow-y: auto; }
.board-post { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.board-post:last-child { border-bottom: 0; }
.board-post small { color: var(--ink-3); font-size: var(--text-xs); }
.board-post p { margin: 4px 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.board-post.superseded p { color: var(--ink-3); text-decoration: line-through; }

@media (max-width: 1280px) {
  .board-grid, .board-grid.with-thread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-thread { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .board-grid, .board-grid.with-thread { grid-template-columns: minmax(0, 1fr); }
  .content-toolbar:has(.board-contested-link) { flex-wrap: wrap; }
}
.state-chip.succeeded i, .state-chip.done i { background: var(--positive); }
.state-chip.taken i { background: var(--brand); }
.state-chip.open i { background: var(--warning); }

/* The watercooler page, and the board's glimpse of it. */
.workspace:has(.cooler-layout), .workspace:has(.board-grid) { width: min(1680px, 100%); }
.cooler-layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(260px, 340px); gap: 12px; align-items: start; }
.cooler-layout.with-thread { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) minmax(320px, 480px); }
.cooler-rooms { display: grid; }
.cooler-rooms .panel-head { padding: 12px 14px; }
.cooler-rooms .panel-head .nav-count { margin-left: 0; }
.cooler-room { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cooler-room:last-child { border-bottom: 0; }
.cooler-room:hover { background: var(--surface-soft); }
.cooler-room.active { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.cooler-room.archived { opacity: .6; }
.cooler-room strong { font-size: var(--text-body); font-weight: 650; }
.cooler-room small { color: var(--ink-3); font-size: var(--text-xs); }
.cooler-topic { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cooler-main .panel-head { flex-wrap: wrap; }
.cooler-feed { display: grid; }
.cooler-thread { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cooler-thread:last-child { border-bottom: 0; }
.cooler-thread:hover { background: var(--surface-soft); }
.cooler-thread strong { display: block; font-size: var(--text-body); font-weight: 650; overflow-wrap: anywhere; }
.cooler-thread p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: var(--ink-2); font-size: var(--text-sm); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.cooler-thread small { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--text-xs); }
.cooler-feed.compact .cooler-thread p { -webkit-line-clamp: 1; }
.cooler-body { white-space: pre-wrap; }
.kind-chip { display: inline-block; justify-self: start; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; text-transform: lowercase; }
.kind-chip.ask, .kind-chip.answer { border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); background: var(--warning-soft); }
.kind-chip.need, .kind-chip.offer, .kind-chip.update { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); }
.kind-chip.note { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.kind-chip.status { border-color: color-mix(in srgb, var(--positive) 40%, var(--line)); background: var(--positive-soft); }
.cooler-side { display: grid; gap: 12px; align-content: start; }
.cooler-side .board-thread-body { max-height: 75vh; }
.cooler-member { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cooler-member:last-child { border-bottom: 0; }
.cooler-member.absent { opacity: .65; }
.cooler-member strong { display: block; font-size: var(--text-sm); overflow-wrap: anywhere; }
.cooler-member small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.cooler-status { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.presence-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--line); }
.presence-dot.on { background: var(--positive); }
.cooler-note { display: grid; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cooler-note:last-child { border-bottom: 0; }
.cooler-note:hover { background: var(--surface-soft); }
.cooler-note p { margin: 0; font-size: var(--text-sm); }
.cooler-note small { color: var(--ink-3); font-size: var(--text-xs); }
.cooler-note .path-stack { max-width: none; }
.board-recent { margin-bottom: 12px; }
@media (max-width: 1280px) {
  .cooler-layout, .cooler-layout.with-thread { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); }
  .cooler-side { grid-column: 1 / -1; }
  .cooler-layout.with-thread .cooler-side { order: -1; }
}
@media (max-width: 760px) {
  .cooler-layout, .cooler-layout.with-thread { grid-template-columns: minmax(0, 1fr); }
  .cooler-rooms { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cooler-rooms .panel-head { grid-column: 1 / -1; }
}

/* A long question body reads as three lines until asked for in full. */
.clamp > summary { display: block; cursor: pointer; list-style: none; }
.clamp > summary::-webkit-details-marker { display: none; }
.clamp > summary p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.clamp[open] > summary p { display: block; -webkit-line-clamp: unset; }
.clamp-more { color: var(--brand); font-size: var(--text-xs); font-weight: 650; }
.clamp[open] .clamp-more::before { content: "Show less"; }
.clamp[open] .clamp-more { font-size: 0; }
.clamp[open] .clamp-more::before { font-size: var(--text-xs); }

/* Paths on a card are a list, not a column of boxes. */
.board-card .path-stack, .cooler-note .path-stack { gap: 2px 6px; }
.board-card .path-stack code, .cooler-note .path-stack code { padding: 1px 5px; border-color: transparent; background: var(--surface-soft); }

/* Rounded panels clip their highlighted rows, so the active room's bar
   follows the corner instead of cutting across it. */
.cooler-rooms, .cooler-main, .board-column, .board-recent { overflow: hidden; }
.cooler-room.active { box-shadow: inset 3px 0 0 var(--brand); }
.cooler-thread + .cooler-thread, .cooler-room + .cooler-room { border-top: 0; }