/* Callboard — the rules that are CALLBOARD'S OWN, and nothing else.
   The Switchyard design system is static/switchyard.css, vendored verbatim
   from docs/design_handoff/_ds/ and loaded BEFORE this file; anything here
   overrides it, so keep it to what the design system does not supply.
   ONE PALETTE: the handoff names slate-100 behind every page and one set of
   colours over it, so there is no dark variant here. Mobile-first: every rule
   below reads on a phone; the @media blocks at the end widen it for a desk. */
:root {
  --surface: #FFFFFF; --page: #F1F5F9; --steel: #1E293B; --ballast: #64748B;
  --signal-green: #059669; --signal-amber: #D97706; --signal-red: #DC2626;
  --rail-blue: #2563EB; --sleeper: #0F172A; --rule: #E2E8F0;
  --warn-bg: #FFFBEB; --bad-bg: #FEF2F2;
  --pre-bg: #0F172A; --pre-ink: #E2E8F0;
  --bar-ink: #CBD5E1; --bar-muted: #94A3B8; --bar-rule: #334155;
  /* the design system's masked wordmark, pointed at the asset we serve */
  --brand-mark-url: url("/static/brands/train-track.svg");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Inter and JetBrains Mono come from the design system's own tokens; a font
   stack here would shadow them on every screen. */
/* The LEADING here is the design system's own body leading (1.5), not a
   number of Callboard's: this shorthand loads after `body { line-height: 1.5 }`
   and shadows it, so every element that inherits its leading — a button, a
   header link, an eyebrow, the closing band's sub-headline — was drawn 3%
   looser than the handoff's. On a control that is its SIZE: the front page's
   buttons stood 41.52px and 50.40px tall where the prototype's are 40.80px
   and 49.60px (homebuttons_test.go reads the drawn box, which neither
   document declares). The design system's own copy classes still say 1.55
   where they want it (.landing-flow-body, .pcard-desc), and that is theirs. */
body { margin: 0; background: var(--page); color: var(--steel); font: 16px/1.5 var(--font-sans); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--rail-blue); }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { overflow-wrap: anywhere; }
pre { background: var(--pre-bg); color: var(--pre-ink); padding: 1rem; border-radius: 8px; overflow-x: auto; max-width: 100%; }
h1, h2, h3 { color: var(--steel); line-height: 1.25; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
input, select, textarea, button { font: inherit; max-width: 100%; }

/* ---- The phone drawer, keyboard-reachable -----------------------------
   The design system's drawer is the same checkbox Callboard's always was, but
   it hides the checkbox with display:none — which takes it out of the tab
   order and leaves the burger openable by pointer only. Callboard's nav has
   worked without a script AND without a mouse since REQ-0005, so the checkbox
   goes back in the tree, visually hidden, and the burger says when it has
   focus. Everything else about the drawer is the design system's. */
@media (max-width: 768px) {
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--rail-blue); outline-offset: 2px; }
}

/* The workspace picker (PRD #437): the active workspace, on every page. */
.org-picker { display: flex; align-items: center; gap: 0.5rem; color: var(--bar-ink); font-size: 0.85rem; min-width: 0; }
.org-picker:empty { display: none; }
.org-picker strong { color: #fff; }
.org-picker .org-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-picker .org-switch { display: flex; align-items: center; gap: 0.4rem; margin: 0; flex-wrap: wrap; }
.org-picker select { font: inherit; padding: 0.3rem 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--bar-rule); background: #1E293B; color: #fff; max-width: 60vw; }
.org-picker .org-problem { color: #FECACA; }


/* ---- Page pieces ------------------------------------------------------
   The admin screens are composed from the design system's own classes: .card,
   .btn and its variants, .data-table, .alert, .form-group, .status-badge (by
   way of chips.templ), .pr-pill, .dash-section, .section-title and the rest.
   What follows is only what those leave out. adminclasses_test.go holds the
   line from both sides: an admin view may emit no class neither stylesheet
   defines, and this file may keep no class nothing emits. */
p.lede { font-size: 1.05rem; color: var(--ballast); margin: 0 0 1rem; }
section { margin-top: 2rem; }
section h2 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.muted { color: var(--ballast); font-size: 0.9rem; }
/* The design system's .card is a bare surface; the handoff pads each one
   where it is used. This is that padding, and the rhythm inside it. */
.card-pad { padding: 1rem 1.1rem; min-width: 0; }
.card-pad > * + *, .dash-section > * + * { margin-top: 0.75rem; }
.card-pad + .card-pad { margin-top: 1rem; }
.card-pad .section-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.alert { overflow-wrap: anywhere; }
.alert .pr-pill { margin-left: 0.3rem; }
/* A link cannot be [disabled]; this is the design system's disabled button
   for the one that is only marked so (the sign-in link on an install without
   a sign-in). */
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.status dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin: 0; }
.status dt { color: var(--ballast); }
.status dd { margin: 0; }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.dot.ok { background: var(--signal-green); }
.dot.bad { background: var(--signal-red); }
.dot.warn { background: var(--signal-amber); }

/* ---- Forms ------------------------------------------------------------
   A labelled field is the design system's .form-group. The element rules
   below dress the controls that sit outside one: the inline forms (.keybar,
   .review-form, .pull, .repoint) and the workspace picker. */
label { display: block; }
input:not([type="checkbox"]), select, textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--steel); min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rail-blue); outline-offset: 1px; }
.form-narrow { max-width: 100%; }
.keybar { display: grid; grid-template-columns: 1fr; gap: 0.4rem; align-items: end; }
.keybar label { color: var(--ballast); font-size: 0.85rem; }
.review-form { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.review-form > * + * { margin-top: 0; }
.review-form .section-title { margin: 0; }
.review-form label { color: var(--ballast); font-size: 0.9rem; }
.review-form button { justify-self: start; }
.review-form.merge { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
form.repoint { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
form.repoint select { width: auto; min-height: 0; padding: 0.3rem 0.4rem; }
form.pull { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
form.pull > input { flex: 1 1 14rem; }
label.check { display: flex; align-items: center; gap: 0.4rem; color: var(--ballast); font-size: 0.95rem; }
label.check input { width: 1.1rem; height: 1.1rem; }
.door-ways { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.door-ways > .card-pad { margin-top: 0; }

/* ---- Lists and tables --------------------------------------------------
   Every table is the design system's .data-table; these are the row states
   and the two list layouts it has no class for. */
ul.branch-list { list-style: none; padding: 0; }
ul.branch-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
ul.branch-list li:last-child { border-bottom: 0; }
.branch-id { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; }
.branch-id code { overflow-wrap: anywhere; }
.branch-id .muted { font-size: 0.8rem; }
.branch-meta { font-size: 0.85rem; }
.branch-meta code { font-size: 0.85rem; }
/* The branch review screen (PRD #780), the handoff's §6: the diff and its
   cards in the main column, the Review and After-merge cards in a rail. One
   column on a phone — the rail is where the ACTIONS are, so it follows the
   diff rather than preceding it. */
.branch-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.branch-main { min-width: 0; }
.branch-main > * + * { margin-top: 0.75rem; }
.branch-rail { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.branch-crumb { color: var(--ballast); font-size: 0.85rem; }
.branch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.branch-name { font-size: 1.35rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
/* Who took part, as a plain list of people rather than a table: it is read,
   never sorted or compared. */
.review-participants { list-style: none; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; }
/* The rail's controls are full-width stacks whatever the viewport does: the
   rail is 280px, and the inline three-column form the wider breakpoint gives
   .review-form would put a button in a column narrower than its own label. */
.branch-rail .review-form { grid-template-columns: minmax(0, 1fr); }
.branch-rail .review-form button { grid-column: auto; justify-self: stretch; }
.review-form.verdict { margin-top: 0.75rem; }
.review-form.override { margin-top: 0.75rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; }

.cost { margin-top: 1.25rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.cost > * + * { margin-top: 0.5rem; }
.cost-table td { font-variant-numeric: tabular-nums; }
.cost-table td.over { color: var(--signal-amber); font-weight: 600; }
/* The lint panel (PRD #789), laid out as the cost panel above it is: the two
   sit between the diff and the merge control and read as one column. The
   token cell is monospaced by .data-table's own code rule; what is added here
   is that a long detail wraps rather than widening the card. */
.lint { margin-top: 1.25rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.lint > * + * { margin-top: 0.5rem; }
.lint-table td { overflow-wrap: anywhere; }
.data-table tr.role-never td { background: var(--bad-bg); }
.data-table tr.role-stale td { background: var(--warn-bg); }
.data-table tr.revoked td { color: var(--ballast); }
.issued-key { border: 1px solid var(--signal-amber); border-radius: var(--radius); padding: 0.9rem 1.1rem; background: var(--warn-bg); }
.issued-key code { display: block; margin: 0.4rem 0; padding: 0.5rem 0.6rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow-wrap: anywhere; user-select: all; }


/* ---- The agents board and one agent's detail -------------------------- */
.base-line .status-badge { margin-right: 0.4rem; }
.base-line { padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--page); border: 1px solid var(--rule); font-size: 0.95rem; }
.agents-board { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.agents-board > .dash-section { margin: 0; }
.agent-card { border-radius: 12px; padding: 0.85rem 0.95rem; text-decoration: none; color: inherit; gap: 0; }
.agent-card:hover { text-decoration: none; }
.agent-card .pcard-top { margin-bottom: 0.6rem; }
.agent-card .pcard-logo { width: 2.75rem; height: 2.75rem; border-radius: 11px; background: transparent; }
.role-plate { display: block; width: 100%; height: 100%; border-radius: 11px; }
.agent-card-chips { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.agent-card-slug { margin: 0; font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; color: var(--steel); overflow-wrap: anywhere; }
.agent-card-summary { margin: 0.45rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--steel); }
.agent-card-models { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0; }
.trait-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0; }
.agent-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid #f1f5f9; font-size: 0.74rem; color: var(--ballast); }
.agent-card-foot-line { font-family: var(--font-mono); overflow-wrap: anywhere; }
.agent-card-live { white-space: nowrap; font-variant-numeric: tabular-nums; }
.agent-card.state-behind { border-left: 3px solid var(--signal-amber); }
.agent-card.state-unbound, .agent-card.state-missing { border-left: 3px solid var(--signal-red); }
.agent-card.state-diverged { border-left: 3px solid var(--rail-blue); }
.agent-title { font-size: 1.5rem; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
dl.facts dt { color: var(--ballast); }
dl.facts dd { margin: 0; min-width: 0; }
ul.variants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
ul.variants li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
ul.manifest { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem; }
ul.manifest li { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; font-family: var(--font-mono); }
ul.manifest li a { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; min-width: 0; color: inherit; text-decoration: none; }
ul.manifest li a:hover, ul.manifest li a:focus-visible { text-decoration: underline; }
.manifest-index { color: var(--ballast); font-variant-numeric: tabular-nums; min-width: 1.1rem; }
ul.manifest strong { color: var(--rail-blue); }

/* ---- One agent's detail: hero, channel toggle, component cards, rail --- */
.agent-detail { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.agent-hero { display: flex; align-items: flex-start; gap: 0.9rem; min-width: 0; }
.agent-hero-plate { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 13px; overflow: hidden; }
.agent-hero-plate .role-plate { border-radius: 13px; }
.agent-hero-text { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.agent-hero-text > * { margin: 0; }
.agent-hero-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.9rem; }
.resolve-through { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.resolve-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ballast); }
.resolve-note { flex: 1 1 14rem; font-size: 0.85rem; }
.agent-bindings { margin: 0; }
.component-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0.8rem 0.9rem; min-width: 0; scroll-margin-top: 4.5rem; }
.component-card + .component-card { margin-top: 0.75rem; }
.component-head { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.component-index { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: var(--ballast); }
.component-ref { font-weight: 600; overflow-wrap: anywhere; }
.component-version { color: var(--rail-blue); font-variant-numeric: tabular-nums; }
/* PRD #792: who signed this component, beside its identity. `unsigned` takes
   .muted as well, so an absence reads as one. */
.component-author { font-size: 0.8rem; font-weight: 600; color: var(--rail-blue); }
.component-why { margin-left: auto; font-size: 0.8rem; text-align: right; }
.component-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0.75rem; margin-top: 0.7rem; }
.component-pane { min-width: 0; }
.pane-eyebrow { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ballast); }
.pane-source, .pane-rendered { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.76rem; line-height: 1.55; max-height: 24rem; overflow: auto; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); }
.pane-source { background: var(--page); color: var(--ballast); }
.pane-rendered { background: var(--surface); border: 1px solid var(--rule); color: var(--steel); }
.var-pill { display: inline; font-family: var(--font-mono); background: #eff6ff; color: #1e40af; border-radius: 4px; padding: 0.05rem 0.25rem; }
.var-pill-unrendered { background: #fef2f2; color: #b91c1c; }
.unbound-role { border-left: 3px solid var(--signal-amber); }
.rail-figure { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; font-size: 0.85rem; }
.budget-figure { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-meter { height: 8px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.budget-fill { display: block; height: 100%; background: var(--signal-green); }
.budget-fill-over { background: var(--signal-amber); }
.var-list, .session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; }
.var-row, .session-list > li { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.var-value { overflow-wrap: anywhere; }
.var-source { margin-left: auto; white-space: nowrap; }
.var-row-unrendered .var-value { color: var(--signal-red); }

/* ---- Wider than a phone ---------------------------------------------- */
@media (min-width: 720px) {
  .keybar { grid-template-columns: minmax(0, 1fr) auto; }
  .keybar label { grid-column: 1 / -1; }
  .review-form { grid-template-columns: auto 1fr auto; gap: 0.6rem 0.8rem; align-items: center; }
  .review-form .section-title, .review-form p.muted { grid-column: 1 / -1; }
  .review-form button { grid-column: 3; }
  .review-form input { min-width: 0; }
  .form-narrow { max-width: 460px; }
  .door-ways { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .org-picker select { max-width: 18rem; }
  /* The handoff's §6 grid: the diff column and a 280px rail. Below this the
     two stack, which is the same rule every other rail here follows. */
  .branch-review { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ==== The logged-out front page (home.templ) — the handoff's "receipt" layout
   The bands, the header and the copy blocks are the design system's own
   .landing-* classes. What follows is only what those classes do not supply:
   the hero's two columns, the receipt panel, the MCP block's two columns, and
   the undoing of two generic Callboard rules above (section, pre) that would
   otherwise reach into the landing bands. ============================ */
.landing-top section, .landing-main section { margin-top: 0; }
/* ...and the bottom margin `section h2` gives every other heading. In a
   landing band the gap under the heading is .landing-section-sub's own
   margin-top, so the handoff's heading has none of its own (its reset is
   `* { margin: 0 }`) and ours was 0.6rem taller than the prototype in all
   five bands. homefidelity_test.go is where that was read. */
.landing-top section h2, .landing-main section h2 { margin: 0; }
.home-brand { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.home-brand-crumb { font-weight: 400; opacity: 0.7; }
.home-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 2.5rem; align-items: center; }
.home-hero-grid > * { min-width: 0; }
/* The Resolution band's left column (home_sections.templ). The design system's
   .landing-ai-inner grid gives the track a 0 minimum; this is the grid ITEM
   agreeing to it, so a long word in the lede shrinks with its column on a
   phone instead of pushing the dark band sideways — the same belt
   .home-hero-grid > * and .home-mcp > * wear. */
.landing-ai-lede { min-width: 0; }
/* The buttons are the design system's own. Its ghost button is drawn for a
   dark band; the closing band is light, so it is given a visible edge. */
.landing-top .btn:hover, .landing-final .btn:hover { text-decoration: none; }
.landing-final .btn-ghost { background: transparent; border: 1px solid #cbd5e1; }
.landing-final .btn-ghost:hover { background: #f1f5f9; }
/* The hero headline's split-flap board (home.templ heroBoard, home.js). It is
   decoration beside the real h1: hidden until home.js has sized it and marked
   it live, so a browser without the script shows the h1 and no empty box. */
.home-flap { display: none; }
.home-flap.is-live { display: block; max-width: 100%; margin: 0 0 1.4rem; }
/* The receipt panel. */
.receipt { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.receipt-eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0; }
.receipt-eyebrow-next { margin-top: 0.4rem; }
.receipt-example { font-weight: 600; color: var(--signal-green-bright); border: 1px solid currentColor; border-radius: 999px; padding: 0 0.5rem; }
.receipt-pre { margin: 0; padding: 0; background: none; border-radius: 0; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; color: #e2e8f0; white-space: pre-wrap; overflow-wrap: anywhere; }
.receipt-rows { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 0.8rem; color: #e2e8f0; }
.receipt-session { display: flex; flex-wrap: wrap; gap: 0 0.75rem; padding: 0.2rem 0; color: rgba(255, 255, 255, 0.6); }
.receipt-strong { color: #fff; }
.receipt-channel-pair { margin-left: auto; white-space: nowrap; }
.receipt-channel { color: var(--signal-green-bright); margin-left: 0.4rem; }
.receipt-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.3rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.receipt-kind { color: rgba(255, 255, 255, 0.55); }
.receipt-ref { overflow-wrap: anywhere; }
.receipt-version { color: #fff; font-weight: 700; }
.receipt-caption { margin: 0.2rem 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
/* The MCP surface: copy left, the tool block right; the block scrolls inside
   itself on a phone instead of widening the page. */
.home-mcp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 2rem; align-items: start; }
.home-mcp > * { min-width: 0; }
/* The handoff writes these four inline on the block itself
   (Callboard.dc.html, the MCP surface section) and leaves its margin to the
   design system's own .dispatch-snippet, so this rule does too. */
.home-mcp .dispatch-snippet { font-size: 0.82rem; padding: 1rem 1.1rem; line-height: 1.6; border-radius: 6px; }
/* A phone: the header's brand and its two actions take a row each. */
@media (max-width: 640px) {
  .landing-header-inner { flex-wrap: wrap; }
  .landing-hero { padding: 2rem 0 3rem; }
}

/* ---- Trait chips (PRD #777) -------------------------------------------
   The status chips are the design system's (.status-badge and its colours);
   the trait chip is the one chip it does not supply. Values are the handoff's,
   verbatim. */
.trait-chip { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; background: #f1f5f9; color: #475569; border-radius: 4px; padding: 0.05rem 0.35rem; white-space: nowrap; }

/* ==== PRD #777 crit:ebb4b8f0c5f9 — the nav's org switcher and account menu ====
   Both are the design system's own <details> controls (.nav-org, .nav-account);
   these rules cover only what it leaves out: the switcher's menu, a sign-out
   that is a form button rather than a link, a focus ring on the summaries, and
   menus that sit in the flow of the phone drawer instead of floating over it. */
.nav-org-menu { min-width: 220px; }
.nav-org > summary:focus-visible, .nav-account > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-account-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-header-name { overflow-wrap: anywhere; }
.nav-account-signout { margin: 0; }
button.nav-account-item { width: 100%; text-align: left; background: none; border: 0; border-radius: 0; cursor: pointer; font: inherit; font-size: 0.85rem; }
@media (max-width: 768px) {
  .nav-drawer .nav-org > summary { max-width: none; }
  .nav-drawer .nav-account-menu { position: static; margin-top: 0.4rem; box-shadow: none; min-width: 0; }
  .nav-drawer .nav-account-item { padding: 0.8rem 1rem; }
}

/* ==== PRD #777 crit:c48ef0fa08d3 — the toast host ============================
   The host and the toasts are the design system's (.toast-host, .toast,
   .toast-success, .toast-info): fixed bottom-right, already styled. What it
   leaves out is the entry — a toast slides up as it appears — and that motion
   is dropped for a reader who asked for less of it; the toast still appears
   and still leaves after 3.6 seconds (static/toast.js). */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.toast { animation: toast-in 0.2s ease-out; }
.toast-message { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; transition: none; }
}

/* ==== PRD #779 — the Versions, Snippets and Variables screens ===============
   The design system has no diff component, and the handoff names the diff's
   colours exactly (§5: removed #fef2f2/#991b1b, added #f0fdf4/#166534, empty
   split cell #f8fafc), so these are Callboard's own rules — the only new CSS
   these three screens need. Everything else they draw is .admin-shell,
   .admin-rail, .card, .data-table and .status-badge out of the vendored
   stylesheet. */

/* The rail's right-aligned production edition. */
.admin-rail-link { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.rail-version { color: var(--ballast); font-variant-numeric: tabular-nums; font-size: 0.74rem; }

/* The component header: kind chip, mono ref, pointer chips. */
.component-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.3rem; }
.component-ref { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }

/* A ledger row, and the selected one the diff is drawn from (#eff6ff). */
.ledger-row:hover { background: #f8fafc; }
.ledger-row-selected { background: #eff6ff; }

/* The diff card. Both renderings are in the document and the radio pair the
   card opens with chooses between them with no script and no request: every
   rule below reaches from an input to a FOLLOWING SIBLING, which is why the
   two inputs are children of .diff-card and not of .diff-head. The labels sit
   in the head, where the handoff draws them, and are reached through it. */
.diff-card { margin-top: 1.25rem; position: relative; }
.diff-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.diff-toggle { display: flex; align-items: center; gap: 0.3rem; }
.diff-pick { position: absolute; width: 1px; height: 1px; opacity: 0; }
#diff-unified:focus-visible ~ .diff-head label[for="diff-unified"],
#diff-split:focus-visible ~ .diff-head label[for="diff-split"] { outline: 2px solid var(--rail-blue); outline-offset: 2px; }
#diff-unified:checked ~ .diff-head label[for="diff-unified"],
#diff-split:checked ~ .diff-head label[for="diff-split"] { background: var(--rail-blue); border-color: var(--rail-blue); color: #fff; }

.diff-unified, .diff-split { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; overflow-x: auto; }
.diff-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 0.1rem 0; }
.diff-no { color: var(--ballast); text-align: right; padding-right: 0.6rem; font-variant-numeric: tabular-nums; }
.diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-added { background: #f0fdf4; color: #166534; }
.diff-removed { background: #fef2f2; color: #991b1b; }
.diff-equal { color: var(--steel); }
.diff-empty { background: #f8fafc; }

.diff-split-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; color: var(--ballast); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.diff-split-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.diff-cell { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 0.1rem 0; min-width: 0; }

/* The toggle: unified by default, side by side when its radio is checked. The
   two inputs are siblings of both panes, so ~ reaches them without a script. */
.diff-split { display: none; }
#diff-split:checked ~ .diff-unified { display: none; }
#diff-split:checked ~ .diff-split { display: block; }

.diff-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; background: #f8fafc; border-top: 1px solid var(--rule); margin: 0.75rem -1rem -1rem; padding: 0.7rem 1rem; }
.diff-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.diff-actions .repoint { margin: 0; }

/* The snippets table's "applies when" pill, in the handoff's four colours. */
.applies { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; border-radius: 4px; padding: 0.05rem 0.4rem; white-space: nowrap; }
.applies-org { background: #dbeafe; color: #1e40af; }
.applies-trait { background: #f1f5f9; color: #475569; }
.applies-referenced { background: #ede9fe; color: #6d28d9; }
.applies-unattached { background: #fef3c7; color: #92400e; }

/* The namespace filter's segmented buttons, and the numeric columns the
   handoff right-aligns. */
.ns-filter { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* §7 draws the two edition columns apart, because they answer two different
   questions about one row: which edition this snippet IS resolving, and which
   one is being tried on one rig. Neither is a count, so neither is aligned to
   the right-hand edge the counts share. */
.snip-prod { font-weight: 700; }
.snip-canary { color: var(--ballast); }

/* The variables table's source chip and marker column. The "used in" cell is
   the handoff's wrapping ROW of refs: a column would make the one cell this
   screen exists for the tallest in every row it fills. */
.var-marker { font-family: var(--font-mono); color: var(--rail-blue); font-weight: 600; }
.var-used { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.8rem; }
/* §8's Rules card: four bullets as a spaced column at the handoff's own size,
   because four rules with nothing between them read as one paragraph. */
.var-rules { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column;
  gap: 0.35rem; font-size: 0.84rem; line-height: 1.6; color: var(--steel); }

/* The refusals card is §8's two-track grid, one row per refused shape: the
   shape as a red pill in a fixed first track, its reason beside it in the
   second, over a hairline that keeps four of them from running together. */
.var-refused { display: grid; }
.var-refused-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid #f1f5f9;
  font-size: 0.82rem;
}
.var-refused-marker {
  font-family: var(--font-mono);
  color: #b91c1c;
  background: #fef2f2;
  border-radius: 3px;
  padding: 0 0.3rem;
  align-self: start;
  justify-self: start;
}
.var-refused-why { line-height: 1.5; color: var(--steel); }

/* ---- The Sessions screen (PRD #781, the handoff's §9): two wide tables and
   the figures beside their headings. The tables themselves are the design
   system's .data-table inside a .card, which already scrolls sideways on a
   phone; these are the cells the handoff styles inline. */
.sessions-note { font-size: 0.78rem; color: var(--ballast); }
.session-manifest { font-size: 0.76rem; color: var(--ballast); white-space: nowrap; }
.session-outcome { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; min-width: 0; }
.session-summary { font-size: 0.82rem; color: var(--steel); overflow-wrap: anywhere; }

/* ---- The Overview (PRD #781, the handoff's §2). The tiles, the grid and the
   .dash-attn / .dash-act rows are the design system's; these are the parts the
   handoff styles inline on top of them. */
.dash-attn-card { background: linear-gradient(180deg, #fffbeb, #fff); }
.dash-attn-card .section-title { font-weight: 800; }

/* The Channels card: a line per channel over a hairline, then the overlay
   list in mono — kind, ref, and the move production → canary. */
.dash-chans { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-chan {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}
.dash-chan:last-child { padding-bottom: 0; border-bottom: 0; }
.dash-chan-note { font-size: 0.85rem; color: var(--steel); }
.dash-overlays { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.25rem; }
.dash-overlay {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--steel);
  text-decoration: none;
}
.dash-overlay-kind { color: var(--ballast); min-width: 4.5rem; }
.dash-overlay-from { color: var(--ballast); }
.dash-overlay-to { font-weight: 700; }

/* Recent activity: the glyph beside two stacked lines. .dash-act is the design
   system's block row, so the flex goes on a child rather than overriding it. */
.dash-act-row { display: flex; gap: 0.65rem; align-items: flex-start; }
.dash-act-glyph { flex: 0 0 auto; margin-top: 0.15rem; }
.dash-act-body { min-width: 0; }

/* Live now: the role's plate, the agent, role · rig, and the running chip
   pushed to the end of the row. */
.dash-live {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
}
.dash-live:last-of-type { border-bottom: 0; }
.dash-live-plate { width: 26px; height: 26px; flex: 0 0 auto; }
.dash-live-plate .role-plate { border-radius: 7px; }
.dash-live-agent { font-size: 0.82rem; color: var(--steel); }
.dash-live-meta { font-size: 0.78rem; color: var(--ballast); min-width: 0; overflow-wrap: anywhere; }
.dash-live-chip { margin-left: auto; }