/*
 * PairRail v2 workspace: the signed-in app shell (#app-shell), sign-in (#auth-screen), the
 * sign-in handoff, and the workspace modals and dialogs. Loads after /styles.css (v1) and
 * tokens.css + components.css.
 *
 * app.js (~12k lines) renders the workspace with v1 class names, so this file does not
 * rewrite markup. It works in two layers:
 *   1. Inside the scopes below, the v1 custom properties are remapped to v2 tokens. Most v1
 *      rules then pick up v2 neutrals, Geist and JetBrains Mono with no further change.
 *      --signal (v1 teal, used for kickers, rings, dots and CTAs alike) maps to ink, so
 *      green is opt-in: only .button-signal / .button-signal-sm (the primary action) are Rail Green.
 *      v1's filled-ink .button-dark has no v2 equivalent and renders as a secondary button.
 *   2. Explicit rules for the v1 pieces with hard-coded dark surfaces or teal: the sidebar,
 *      topbar session, readiness hero, sign-in aside, buttons, inputs, modals, notices.
 * Light mode only. The workspace has no dark surface except code panels.
 */

/* -- 1. Token remap -- */
:is(#app-shell, #auth-screen, #workspace-handoff, .modal, .feedback-dialog) {
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-secondary);
  --paper: var(--color-subtle);
  --paper-light: var(--color-canvas);
  --panel: var(--color-canvas);
  --line: var(--color-border);
  --muted: var(--color-ink-muted);
  --brand-mint: var(--color-ink);
  --signal: var(--color-ink);
  --signal-soft: var(--color-sunken);
  --signal-deep: var(--color-ink-secondary);
  --amber: var(--color-warning-text);
  --coral: var(--color-error-text);
  --blue: var(--color-ink-secondary);
  --shadow: var(--shadow-card);
  --display: var(--font-sans);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --serif: var(--font-sans);
  --radius: var(--radius-control);
  --radius-lg: var(--radius-card);
  --text-body: var(--type-note-size);
  --leading-body: 1.5;
  font-family: var(--font-sans);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
body:has(#app-shell:not([hidden])),
body:has(#auth-screen:not([hidden])) { background: var(--color-canvas); }

/* -- Generated: v1 workspace text under 13px raised to the v2 caption size (13px). --
 * Source: every /styles.css rule below 13px whose classes app.js or the app shell renders.
 * Regenerate with design/stitch-v2/tools/ws_font_floor.py if styles.css changes. */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .account-form label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .account-meta,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .action-list li::before,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .agent-secret-banner code,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .agentic-suggest-credits,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .approval-badge,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .approval-card p,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .audit-list code,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .audit-list p,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .audit-list time,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .auth-aside > p,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .auth-card label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .auth-divider,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .badge-tag,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .brand-lockup em,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .button-outline-sm,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .button-signal-sm,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .capability-card span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-ai-prompt-label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-ai-target-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-commit-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-ingest-file-name,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-ingest-label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-ingest-preview .sandbox-output,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-operation-footnote,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .catalog-preview-json,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .code-block,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .decision,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .dimension > div,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .dimension small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .endpoint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .entitlement-banner-note,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .entitlement-lock,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .evidence-list small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .evidence-list time,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .feedback-file-label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .feedback-form-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .feedback-form-status,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .field-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .gateway-form label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .gateway-live-callout code,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .gateway-origin-proxy-code,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .gateway-rails-head-actions .endpoint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .gateway-verified-badge pre,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .impact small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .insights-grid span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .insights-subhead,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .kicker,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .method-diffs,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .metric-grid small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .metric-grid span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .modal-card label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item-index,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-user-email,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nonbinding,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .offer-card-select,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .offer-draft-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .offer-foot,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .offer-review-note,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .offer-top,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-breakdown h4,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-breakdown li,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-event-list article,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-obs-note,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-protocol-stat small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-protocol-stat span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-stat span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-storage-card small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-storage-card span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .operator-user-row,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-activity p,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-activity time,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-empty-meta,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-issue span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-offer .component-list li,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-offer .component-list strong,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-offer .offer-chip,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-offer span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .panel-head > span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .popular-ribbon,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .preview-banner span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .price-total small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .price-total span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .proof-line span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .proof-stack b,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .proof-status,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .proto-test-btn,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .protocol-modal-endpoint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .readiness-col h5,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .readiness-col li span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .sandbox-method-note,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .score-ring span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .sidebar-foot small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .sidebar-foot strong,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .sidebar-public-btn,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .state,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .summary-meta,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .summary-stats span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .table-list article,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .terminal pre,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .terminal-head strong,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .topbar-session .nav-user-email,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .topbar-session .nav-user-name,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-card small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-card-head,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-note,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-preview,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-preview select,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .usage-quota-preview-label,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-card-lifecycle,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-chip,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-conflicts article p,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-conflicts-title,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-diff-panel ul,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-meta-disclosure,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-meta-primary,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-meta-row span,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-meta-row strong,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-select-hint,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-selected-badge,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-timeline,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .view-toggle-btn,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .workbench-form label { font-size: 13px; }
@media (max-width: 1050px) {
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item .entitlement-lock,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item-index,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item-label::after { font-size: 13px; }
}
@media (max-width: 760px) {
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item-index,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-item-label::after,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .topbar-logout { font-size: 13px; }
}


/* -- Generated: v1 teal, navy and slate literals in workspace rules mapped to v2 neutrals. --
 * Backgrounds → sunken, borders → hairline, text → ink / ink-muted, glows removed.
 * Regenerate with design/stitch-v2/tools/ws_color_map.py if styles.css changes. */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .overview-get-started { background: var(--color-sunken); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .version-meta-primary::before { background: var(--color-sunken); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .calculation .empty-state { color: var(--color-ink-muted); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .decision { color: var(--color-ink); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .price-total small,
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .price-total span { color: var(--color-ink-muted); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .policy-reasons p { color: var(--color-ink-muted); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .nav-user-email { color: var(--color-ink-muted); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .upgrade-compare-col { background: transparent; border-color: var(--color-border); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .upgrade-compare-col.is-pro { background: var(--color-sunken); border-color: var(--color-border); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .upgrade-compare-col h4 { color: var(--color-ink); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .upgrade-compare-col ul { color: var(--color-ink-secondary); }
/* Segmented chips (billing interval, operator checkout currency): the chosen one is a
 * raised chip with ink text in both themes, like the theme toggle. The old rule painted it
 * --ink with fixed white text, which is white on white once dark mode lightens --ink. */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-toggle { background: var(--color-sunken); border-color: var(--color-border); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-btn { color: var(--color-ink-muted); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-btn.is-active {
  background: var(--color-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-chip), 0 0 0 1px var(--color-border);
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-btn.is-active .pricing-interval-save { color: var(--color-live-text); }
/* Dark workspace: raised and sunken are the same grey, so the chosen chip steps up to the
 * strong border tone to stay visible against its track. */
:root[data-theme="dark"] :is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-btn.is-active { background: var(--color-border-strong); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .pricing-interval-btn:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }


/* Eyebrows: mono, muted, never green. */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .kicker {
  color: var(--color-ink-muted);
  font: var(--type-eyebrow-weight) var(--type-eyebrow-size) / var(--type-eyebrow-leading) var(--font-mono);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(h1, h2, h3, h4) {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
#app-shell :focus-visible,
#auth-screen :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* -- 2. Sidebar: light, hairline, ink -- */
#app-shell .sidebar {
  background: var(--color-subtle);
  color: var(--color-ink);
  border-right: var(--hairline);
  box-shadow: none;
}
#app-shell .sidebar-brand { color: var(--color-ink); }
#app-shell .sidebar nav { margin-top: var(--space-7); gap: 2px; }
#app-shell .nav-item {
  min-height: 40px;
  border-radius: var(--radius-control);
  color: var(--color-ink-secondary);
  font-size: var(--type-small-size);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-ui) var(--motion-ease-out), color var(--motion-ui) var(--motion-ease-out);
}
#app-shell .nav-item-index { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; }
#app-shell .nav-item.active {
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-border);
}
#app-shell .nav-item.active .nav-item-index { color: var(--color-ink); }
#app-shell .nav-item:active { background: var(--color-sunken); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .nav-item:not(.active):hover { background: var(--color-sunken); color: var(--color-ink); }
}
#app-shell .nav-item .entitlement-lock {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-secondary);
}
#app-shell .sidebar-foot { border-top: var(--hairline); }
#app-shell .sidebar-foot strong { color: var(--color-ink); font-size: 14px; font-weight: 500; }
#app-shell .sidebar-foot small { color: var(--color-ink-muted); font-size: 13px; letter-spacing: 0; }
#app-shell .status-dot { background: var(--color-ink); box-shadow: 0 0 0 3px var(--color-sunken); }
#app-shell .sidebar-public-btn {
  min-height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--type-small-size);
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .sidebar-public-btn:hover { background: var(--color-sunken); border-color: var(--color-ink-muted); color: var(--color-ink); }
}

/* Icon rail (761–1050px) and bottom tab bar (≤760px) keep v1's layout, v2 surface. */
@media (max-width: 1050px) {
  #app-shell .nav-item-label::after { font-size: 12px; font-weight: 500; }
}
@media (max-width: 760px) {
  #app-shell .sidebar {
    border-right: 0;
    border-top: var(--hairline);
    background: var(--color-frost);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: none;
  }
  #app-shell .nav-item { min-height: 48px; }
  #app-shell .nav-item.active { background: var(--color-sunken); box-shadow: none; color: var(--color-ink); }
}

/* -- Topbar: title left, quiet meta + session right; no dark pill -- */
#app-shell .topbar { border-bottom: var(--hairline); }
#app-shell .topbar h1,
#app-shell .topbar h2 {
  font: var(--type-h3-weight) 28px / 1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
#app-shell .topbar-meta { background: transparent; border: 0; padding: 0; }
#app-shell .version-chip,
#app-shell .endpoint,
#app-shell .nonbinding {
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-secondary);
  font: 500 var(--type-caption-size) / 18px var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
}
#app-shell .topbar-meta .version-chip { border: var(--hairline); padding: 4px 10px; color: var(--color-ink-secondary); }
#app-shell .plan-pill,
#app-shell .topbar-meta .plan-pill,
#app-shell .topbar-meta .plan-pill-operator {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: none;
  font: 500 var(--type-caption-size) / 18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
#app-shell .topbar-session {
  background: transparent;
  color: var(--color-ink);
  box-shadow: none;
  padding: 0;
}
#app-shell .topbar-session .nav-user-name { color: var(--color-ink); font-size: 14px; font-weight: 500; }
#app-shell .topbar-session .nav-user-email { color: var(--color-ink-muted); font-size: 13px; }
#app-shell .topbar-session .nav-avatar { border-color: var(--color-border); }
#app-shell .topbar-user { border-radius: var(--radius-control); }
#app-shell .icon-button,
#app-shell .topbar-session .icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
}
#app-shell .topbar-logout,
#app-shell .topbar-session .topbar-logout {
  min-height: 40px;
  color: var(--color-ink) !important;
  border-color: var(--color-border-strong) !important;
  background: var(--color-canvas) !important;
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .icon-button:hover,
  #app-shell .topbar-session .icon-button:hover { background: var(--color-sunken); border-color: var(--color-ink-muted); }
  #app-shell .topbar-logout:hover { background: var(--color-sunken) !important; border-color: var(--color-ink-muted) !important; color: var(--color-ink) !important; }
  #app-shell .topbar-user:hover { background: var(--color-sunken); }
}

/* Toast and banners */
.notice#global-notice {
  border: var(--hairline);
  border-left: 3px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  font: 400 var(--type-small-size) / 22px var(--font-sans);
}
.notice#global-notice.error { border-left-color: var(--color-error-text); }
/* Idle sign-out warning: same card as the notice, with its button. */
.notice.idle-warning {
  display: grid;
  gap: 10px;
  justify-items: start;
  border: var(--hairline);
  border-left: 3px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  font: 400 var(--type-small-size) / 22px var(--font-sans);
}
.notice.idle-warning p { margin: 0; }
.notice.idle-warning[hidden] { display: none; }
#app-shell .entitlement-banner {
  border: var(--hairline);
  border-radius: var(--radius-control);
  background: var(--color-subtle);
  color: var(--color-ink-secondary);
}

/* -- Surfaces -- */
#app-shell :is(.score-card, .proof-card, .panel, .offer-card, .version-card, .workbench, .approval-card, .empty-panel) {
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  box-shadow: none;
}
#app-shell .view { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  #app-shell .view.active { animation: pr-ws-view-in 160ms var(--motion-ease-out) both; }
}
@keyframes pr-ws-view-in { from { opacity: 0; } }

/* Readiness hero: light, the score is the one large number. */
#app-shell .score-card {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-border);
}
#app-shell .score-ring {
  background: radial-gradient(circle, var(--color-canvas) 62%, transparent 63%),
    conic-gradient(var(--color-ink) var(--score), var(--color-sunken) 0);
}
#app-shell .score-ring strong { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
#app-shell .score-ring span { color: var(--color-ink-muted); font-size: 13px; }
#app-shell .score-card h3 { font-family: var(--font-sans); font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; color: var(--color-ink); }
#app-shell .score-card p { color: var(--color-ink-secondary); }

/* Section intros: app scale, not marketing scale. */
#app-shell .section-intro h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; }

/* Body copy: 15px minimum for dense app text; 16px for paragraphs. */
#app-shell .view p:not(.kicker) { font-size: max(15px, 1em); }

/* -- Buttons: v1 classes, v2 looks -- */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm) {
  min-height: var(--control-height-app);
  padding: 0 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: 500 var(--type-small-size) / 20px var(--font-sans);
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--motion-ui) var(--motion-ease-out), border-color var(--motion-ui) var(--motion-ease-out), transform var(--motion-ui) var(--motion-ease-out);
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button-signal, .button-signal-sm) {
  border-color: transparent;
  background: var(--color-rail);
  color: var(--color-on-rail);
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .button-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink-secondary);
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm):hover { transform: none; }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm):active { transform: scale(0.97); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm):disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-outline-sm):not(.button-signal):not(.button-ghost):not(:disabled):hover { background: var(--color-sunken); border-color: var(--color-ink-muted); }
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button-signal, .button-signal-sm):not(:disabled):hover { background: var(--color-rail-hover); }
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) .button-ghost:not(:disabled):hover { color: var(--color-ink); background: var(--color-sunken); }
}

/* -- Inputs -- */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  box-shadow: none;
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--color-ink);
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-ink); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) label { color: var(--color-ink); font-size: var(--type-small-size); }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) .form-error { color: var(--color-error-text); }

/* -- Code panels: the workspace's only dark surfaces -- */
#app-shell :is(pre.code-block, .terminal) {
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-code-bg);
  color: var(--color-dark-text);
  font-family: var(--font-mono);
}

/* -- Modals and dialogs -- */
.modal .modal-backdrop { background: var(--color-overlay); }
.modal .modal-card,
dialog.feedback-dialog {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 20px 40px -12px rgba(0, 0, 0, 0.22);
}
dialog.feedback-dialog::backdrop { background: var(--color-overlay); }
.modal .modal-card h3,
dialog.feedback-dialog h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); font-weight: 600; }
.modal .modal-copy,
dialog.feedback-dialog .feedback-form-hint { color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
@media (prefers-reduced-motion: no-preference) {
  .modal:not([hidden]) .modal-card { animation: pr-ws-modal-in 200ms var(--motion-ease-out); }
  dialog.feedback-dialog[open] { animation: pr-ws-modal-in 200ms var(--motion-ease-out); }
}
@keyframes pr-ws-modal-in { from { opacity: 0; transform: scale(0.97); } }

/* -- Sign-in -- */
#auth-screen { background: var(--color-canvas); }
#auth-screen .auth-card h1,
#auth-screen .auth-card h2 {
  font: var(--type-h1-weight) var(--type-h1-size) / var(--type-h1-leading) var(--font-sans);
  letter-spacing: var(--type-h1-tracking);
  color: var(--color-ink);
}
#auth-screen .auth-card h1 span,
#auth-screen .auth-card h2 span { color: inherit; }
#auth-screen .auth-copy { color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
#auth-screen .oauth-btn { min-height: var(--control-height-marketing); font-size: var(--type-button-size); }
#auth-screen .auth-divider { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--type-caption-size); }
#auth-screen .auth-divider::before,
#auth-screen .auth-divider::after { background: var(--color-border); }
#auth-screen .auth-email-otp label { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--type-small-size); }
#auth-screen .auth-otp-hint { color: var(--color-ink-muted); font-size: var(--type-small-size); }

/* -- Sign-in handoff overlay -- */
#workspace-handoff { background: var(--color-frost); color: var(--color-ink); }
#workspace-handoff .workspace-handoff-card {
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  box-shadow: var(--shadow-card);
}
#workspace-handoff .workspace-handoff-spinner { border-color: var(--color-border); border-top-color: var(--color-ink); }
#workspace-handoff h2 { font: 600 var(--type-h3-size) / var(--type-h3-leading) var(--font-sans); }
#workspace-handoff p { color: var(--color-ink-secondary); }

/* -- Touch and motion -- */
@media (pointer: coarse) {
  #app-shell :is(.button, .button-signal-sm, .button-outline-sm, .icon-button, .nav-item, .sidebar-public-btn) { min-height: 44px; }
  #app-shell .icon-button { width: 44px; }
}
#app-shell :is(button, a, [role="tab"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm, .nav-item) { transition: none; }
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm):active { transform: none; }
}

/* -- Per-view fixes: v1 tints built from --signal or hard-coded teal -- */
#app-shell .catalog-ai-panel { background: var(--color-subtle); border-color: var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); gap: var(--space-3); }
#app-shell .catalog-ai-head h4 { font-size: 18px; font-weight: 600; }
#app-shell .catalog-ai-lead { font-size: var(--type-small-size); color: var(--color-ink-secondary); }
#app-shell .catalog-ai-target-hint { background: var(--color-canvas); border-color: var(--color-border); color: var(--color-ink-secondary); }
#app-shell .badge-tag {
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-secondary);
  font: 500 var(--type-caption-size) / 18px var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Pricing lab: the calculation is a light result panel, not a dark band. */
#app-shell .workbench { border-radius: var(--radius-card); }
#app-shell :is(.workbench-form, .gateway-form) { background: var(--color-subtle); }
#app-shell .calculation { background: var(--color-canvas); color: var(--color-ink); border-left: var(--hairline); }
#app-shell .calculation .empty-state { font: 400 var(--type-note-size) / var(--type-note-leading) var(--font-sans); color: var(--color-ink-muted); }
#app-shell .price-total { border-bottom: var(--hairline); }
#app-shell .price-total small,
#app-shell .price-total span { font: 500 var(--type-eyebrow-size) / var(--type-eyebrow-leading) var(--font-mono); letter-spacing: var(--type-eyebrow-tracking); }
#app-shell .price-total strong { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
#app-shell .price-lines div { color: var(--color-ink-secondary); font-size: var(--type-small-size); border-bottom: var(--hairline); font-variant-numeric: tabular-nums; }
#app-shell .policy-reasons { border-left: 2px solid var(--color-ink); background: var(--color-subtle); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
#app-shell .policy-reasons p { color: var(--color-ink-secondary); font-size: var(--type-small-size); }
/* Decision pill: neutral when in policy; the human-approval state is the one green status. */
#app-shell .decision {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: 500 var(--type-badge-size) / 18px var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
}
#app-shell .decision-approval-required {
  border-color: var(--color-rail-soft-border);
  background: var(--color-rail-soft);
  color: var(--color-rail);
}
#app-shell .approval-badge { color: var(--color-rail); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }

/* Gateway */
#app-shell .gateway-live-callout { border-color: var(--color-border); background: var(--color-subtle); border-radius: var(--radius-card); }
:is(#access-requests-panel, #gateway-rails-panel, .gateway-rail-card).is-spotlight { outline-color: var(--color-ink); }

/* Code surface: the terminal stays dark; no fake window dots. */
#app-shell .terminal { background: var(--color-code-bg); border-color: var(--color-code-bg); color: var(--color-dark-text); }
#app-shell .terminal-head { border-bottom-color: var(--color-dark-hairline); }
#app-shell .terminal-head span { display: none; }
#app-shell .terminal-head strong { margin-left: 0; color: var(--color-dark-muted); font: 500 var(--type-eyebrow-size) / var(--type-eyebrow-leading) var(--font-mono); letter-spacing: var(--type-eyebrow-tracking); }
#app-shell .terminal pre { font: var(--type-code-size) / 22px var(--font-mono); }

/* Form labels: sentence case, medium, ink (v1 used 11px uppercase muted). */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.auth-card, .workbench-form, .gateway-form, .onboard-form, .modal-card, .account-form, .team-invite-form, .settlement-config-form) label {
  gap: 6px;
  color: var(--color-ink);
  font: 500 var(--type-small-size) / 20px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select) {
  min-height: var(--control-height-app);
  padding: 8px 12px;
}
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) textarea { padding: 10px 12px; }
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(input, select, textarea):focus { box-shadow: none; }
#auth-screen :is(input:not([type="checkbox"]):not([type="radio"])) { min-height: var(--control-height-marketing); }

/* Status pills (.state): base shape. Tones live in the semantic color v3 block at the end. */
#app-shell .state {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-secondary);
  font: 500 var(--type-caption-size) / 1 var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

/* Webhook sample JSON: code surface. */
#app-shell .stack-webhook-sample { border-radius: var(--radius-control); background: var(--color-code-bg); color: var(--color-dark-text); font: var(--type-code-size) / 22px var(--font-mono); }

/* Subscription status: "Active" is the neutral ink pill (Ready-style), not green. */
#app-shell .billing-subscription-status-badge { font: 500 var(--type-caption-size) / 18px var(--font-mono); letter-spacing: 0.02em; text-transform: none; }
#app-shell .status-badge-active { background: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-ink) !important; }
#app-shell :is(.status-badge-warning, .status-badge-restricted) { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; border-color: transparent !important; }
#app-shell .status-badge-cancelled { background: var(--color-blocked-tint) !important; color: var(--color-error-text) !important; border-color: transparent !important; }


/* Brand: the v2 lockup (mark + Geist wordmark), as in <pr-nav>. The icon rail shows the mark only. */
#app-shell .sidebar-brand.pr-logo { padding: 0 var(--space-3); gap: var(--logo-gap); }
@media (max-width: 1050px) {
  #app-shell .sidebar-brand.pr-logo { justify-content: center; padding: 0; }
  #app-shell .sidebar-brand .pr-logo__word { display: none; }
}
#auth-screen .auth-card .pr-logo { margin-bottom: var(--space-4); }

/* Topbar never wraps its buttons' labels. */
#app-shell .topbar :is(.button, .button-outline-sm, .topbar-logout) { white-space: nowrap; }

/* Gateway rail cards: the primary (MCP) card is outlined in ink, not tinted; rows wrap on phones. */
#app-shell .gateway-rail-card.is-primary-rail,
#app-shell .gateway-rail-card.is-primary-rail:last-child { border: 1px solid var(--color-ink); background: var(--color-canvas); border-radius: var(--radius-card); }
#app-shell .gateway-rail-card { grid-template-columns: minmax(0, 1fr) auto; }
#app-shell .gateway-rail-card > div { min-width: 0; }
#app-shell .gateway-rail-card code { overflow-wrap: anywhere; }
#app-shell #gateway-verified-badge-img { max-width: 100%; height: auto; }
@media (max-width: 760px) {
  #app-shell .gateway-rail-card { grid-template-columns: minmax(0, 1fr); }
  #app-shell .gateway-rail-meta { justify-items: start; }
}
/* Long inbound URLs and settlement fields stay inside their card. */
#app-shell :is(.settlement-config-form, .stack-connect) { min-width: 0; }
#app-shell #settlement-inbound-url { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  #app-shell .sidebar-brand.pr-logo { display: none; }
}

/* -- Review fixes -- */
/* Section intros read as subheads under the topbar title. */
#app-shell .section-intro h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); }
/* Gateway: the terminal is the view's one dark panel; the embed snippet is a light code block. */
#app-shell .gateway-verified-badge pre { background: var(--color-sunken); color: var(--color-ink); border: var(--hairline); border-radius: var(--radius-control); }
/* Sign-in: once the code step opens, "Verify and continue" is the one green button. */
#auth-screen:has(#auth-otp-step:not([hidden])) [data-oauth="google"] { background: var(--color-canvas); color: var(--color-ink); border-color: var(--color-border-strong); }
#auth-screen .auth-card .pr-logo { margin-bottom: var(--space-7); }
/* Overview empty state: the third option is a text link, not a third button. */
#app-shell #overview-empty-extract { min-height: 0; padding: 0; border: 0; background: none; color: var(--color-ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
/* Connector saves sit at content width, not full-width bars. */
#app-shell .stack-connect-form > .button-outline-sm { justify-self: start; width: auto; }
/* Phones: a solid tab bar with no index numbers so six tabs fit; the row fades at the edge to show it scrolls. */
@media (max-width: 760px) {
  #app-shell .sidebar { background: var(--color-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Section icons above the short labels, as in a native tab bar. */
  #app-shell .nav-item { min-width: 64px; flex-direction: column; justify-content: center; gap: 4px; }
  #app-shell .nav-item-index { display: block; width: 18px; height: 18px; }
  #app-shell .sidebar nav { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #app-shell .topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
  #app-shell #workspace-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #app-shell .topbar-actions { flex: none; }
  #app-shell .topbar h1,
#app-shell .topbar h2 { font-size: 22px; }
}

/* -- Technical audit fixes -- */
/* Labels inside green buttons inherit the button's white (v1 .gateway-live-callout strong set ink). */
:is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button-signal, .button-signal-sm) :is(strong, span) { color: inherit; }
/* Dialogs share the ink focus ring. */
.modal :focus-visible,
dialog.feedback-dialog :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* Code: the terminal (and the inspector's raw JSON) are the dark surfaces; other snippets are light code blocks. */
.modal pre.code-block { background: var(--color-code-bg); color: var(--color-dark-text); border: 0; border-radius: var(--radius-control); font-family: var(--font-mono); }
#app-shell pre.gateway-origin-proxy-code { background: var(--color-sunken); color: var(--color-ink); border: var(--hairline); border-radius: var(--radius-control); font: var(--type-code-size) / 22px var(--font-mono); }
/* Sign-in fields at the marketing height. */
#auth-screen .auth-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])) { min-height: var(--control-height-marketing); }
/* The MCP rail card's copy button gets the ink outline: primary in the list, without a second green. */
#app-shell .is-primary-copy { border-color: var(--color-ink); }
/* Touch: 44px for every control, including inputs, view toggles, disclosures and dialog buttons. */
@media (pointer: coarse) {
  :is(#app-shell, #auth-screen, .modal, .feedback-dialog) :is(.button, .button-signal-sm, .button-outline-sm, .view-toggle-btn, .sandbox-view-toggle button, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, summary, .version-card footer button, .modal-close) { min-height: 44px; }
  .modal .modal-close { min-width: 44px; }
  #app-shell .topbar-session .topbar-logout { min-height: 44px; }
}

/* -- Integrations view (ui/integrations.js) -- */
.integrations-intro { max-width: 46rem; margin-bottom: var(--space-6); }
.integrations-intro h2 { margin: 4px 0 6px; font-size: var(--type-h3-size); line-height: var(--type-h3-leading); }
.integrations-intro .panel-copy { margin: 0; }
.integrations-group { margin: var(--space-6) 0 var(--space-3); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--type-caption-size); font-weight: 400; letter-spacing: 0; }
.integrations-group:first-of-type { margin-top: 0; }
.integrations-group-copy { margin: -4px 0 var(--space-3); color: var(--color-ink-muted); font-size: var(--type-small-size); }
.integrations-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.integration-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--color-canvas); }
.integration-card[data-tone="active"] { border-color: var(--color-border-strong); }
.integration-card[data-connector="orb"], .integration-card[data-connector="metronome"], .integration-card[data-connector="paddle"] { border-style: dashed; background: transparent; }
.integration-card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.integration-card h3 { margin: 0; font-size: 16px; font-weight: 600; }
.integration-job { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-small-size); line-height: 1.5; }
.integration-pill { padding: 0 8px; border: var(--hairline); border-radius: var(--radius-pill); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; line-height: 22px; white-space: nowrap; }
.integration-pill[data-tone="active"] { border-color: var(--color-live-border); background: var(--color-live-tint); color: var(--color-live-text); }
.integration-pill[data-tone="connected"] { border-color: var(--color-live-border); color: var(--color-live-text); }
.integration-pill[data-tone="warn"] { border-color: var(--color-approval-border); background: var(--color-approval-tint); color: var(--color-approval-text); }
.integration-pill[data-tone="requested"] { border-color: var(--color-agent-border); color: var(--color-agent-text); }
.integration-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; padding-top: var(--space-3); border-top: var(--hairline); }
.integration-stats dt { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; }
.integration-stats dd { margin: 2px 0 0; font-size: var(--type-small-size); }
.integration-stats dd.is-bad { color: var(--color-error-text); }
.integration-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.integrations-detail { margin-top: var(--space-5); }
.integrations-detail:focus { outline: none; }
.integrations-detail h3:focus { outline: none; }
.integrations-banner { margin-bottom: var(--space-4); }
.integrations-error { padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); }
.integrations-error p { margin: 0 0 var(--space-3); color: var(--color-error-text); }
#integrations-status.is-error, #webhook-test-result.is-error { color: var(--color-error-text); }
.event-checkboxes { display: grid; gap: 8px; margin: var(--space-3) 0; padding: 0; border: 0; }
.event-checkboxes legend { margin-bottom: 6px; font-weight: 500; }
#view-integrations .event-checkboxes label, :is(#view-integrations, #agent-access-panel, #offer-edit-modal) label.checkbox-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
#view-integrations .event-checkboxes input, :is(#view-integrations, #agent-access-panel, #offer-edit-modal) label.checkbox-row input { flex: none; width: auto; min-height: 0; margin: 0; }
.event-checkboxes code { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; }
/* Protocol toggles (Governance): recent calls or plan lock beside each protocol. */
.protocol-toggle-meta { color: var(--color-ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.secret-reveal { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-subtle); }
.secret-reveal p { margin: 0; }
.secret-reveal-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.secret-reveal .mono-input { flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); font-size: 13px; }
.secret-reveal > .button { justify-self: start; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.delivery-table { width: 100%; border-collapse: collapse; font-size: var(--type-small-size); }
.delivery-table th { padding: 8px 10px; border-bottom: var(--hairline); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-align: left; }
.delivery-table td { padding: 10px; border-bottom: var(--hairline); vertical-align: top; }
.delivery-table td code { font-family: var(--font-mono); font-size: 12px; }
.delivery-table td small { display: block; margin-top: 2px; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
.delivery-table td:last-child { text-align: right; }
.delivery-chip { display: inline-block; padding: 0 8px; border: var(--hairline); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; line-height: 22px; }
.delivery-chip[data-tone="ok"] { border-color: var(--color-live-border); background: var(--color-live-tint); color: var(--color-live-text); }
.delivery-chip[data-tone="bad"] { border-color: var(--color-blocked-border); background: var(--color-blocked-tint); color: var(--color-blocked-text); }
@media (max-width: 640px) {
  .integration-stats { grid-template-columns: 1fr; }
  .delivery-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .delivery-table, .delivery-table tbody, .delivery-table tr, .delivery-table td { display: block; width: 100%; }
  .delivery-table tr { padding: var(--space-3) 0; border-bottom: var(--hairline); }
  .delivery-table td { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-2); padding: 4px 0; border: 0; text-align: left; }
  .delivery-table td::before { content: attr(data-label); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 12px; }
  .delivery-table td:last-child { text-align: left; }
  .delivery-table td > .delivery-chip, .delivery-table td > .button { justify-self: start; }
  .delivery-table td:last-child::before { content: none; }
  .delivery-table td:last-child { grid-template-columns: 1fr; }
}

/* -- Semantic color v3 (DESIGN.md): sidebar, section icons, status pills, meters, activity -- */
:root {
  --nav-icon-overview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 11a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M8 11l2.5-3.5'/%3E%3Cpath d='M2.5 13.5h11'/%3E%3C/svg%3E");
  --nav-icon-catalog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2l6 3-6 3-6-3z'/%3E%3Cpath d='M2 8l6 3 6-3'/%3E%3Cpath d='M2 11l6 3 6-3'/%3E%3C/svg%3E");
  /* Lucide FlaskConical and FileText (lucide-static 0.460.0, ISC). Their 24-unit viewBox takes stroke 2.4 to draw the same 1.6px line as the 16-unit icons. */
  --nav-icon-pricing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
  --nav-icon-quotes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  --nav-icon-gateway: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Ccircle cx='3' cy='3.5' r='1.25'/%3E%3Ccircle cx='13' cy='3.5' r='1.25'/%3E%3Ccircle cx='8' cy='13.5' r='1.25'/%3E%3Cpath d='M4 4.4l2.5 2.3M12 4.4L9.5 6.7M8 10v2.2'/%3E%3C/svg%3E");
  --nav-icon-governance: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75l5 2v4c0 3.2-2.2 5.4-5 6.5-2.8-1.1-5-3.3-5-6.5v-4z'/%3E%3Cpath d='M5.75 8l1.6 1.6 3-3'/%3E%3C/svg%3E");
  --nav-icon-integrations: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.75v3M10 1.75v3'/%3E%3Cpath d='M4 4.75h8v2.5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 11.25v3'/%3E%3C/svg%3E");
  --nav-icon-audit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5h6l2.5 2.5v8.5H4z'/%3E%3Cpath d='M6.25 8.25l1.5 1.5 2.5-3'/%3E%3C/svg%3E");
  --nav-icon-subscription: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.75h9v12.5l-1.5-1-1.5 1-1.5-1-1.5 1-1.5-1-1.5 1z'/%3E%3Cpath d='M6 5.5h4M6 8.5h4'/%3E%3C/svg%3E");
  --nav-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5h2.25M7.75 4.5H14M2 11.5h6.25M11.75 11.5H14'/%3E%3Ccircle cx='6' cy='4.5' r='1.75'/%3E%3Ccircle cx='10' cy='11.5' r='1.75'/%3E%3C/svg%3E");
  --nav-icon-operator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 8.5h3l1.75-4 3 8 1.75-4h3'/%3E%3C/svg%3E");
}
#app-shell .nav-item { position: relative; }
/* Section icons replace the 01–09 numbers; tinted only where the section owns a meaning. */
#app-shell .nav-item-index {
  width: 16px;
  height: 16px;
  flex: none;
  overflow: hidden;
  color: var(--nav-tint, var(--color-ink-muted));
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}
#app-shell .nav-item[data-view="overview"] { --nav-icon: var(--nav-icon-overview); }
#app-shell .nav-item[data-view="catalog"] { --nav-icon: var(--nav-icon-catalog); }
#app-shell .nav-item[data-view="pricing"] { --nav-icon: var(--nav-icon-pricing); }
#app-shell .nav-item[data-view="gateway"] { --nav-icon: var(--nav-icon-gateway); --nav-tint: var(--color-agent-text); }
#app-shell .nav-item[data-view="quotes"] { --nav-icon: var(--nav-icon-quotes); }
#app-shell .nav-item[data-view="governance"] { --nav-icon: var(--nav-icon-governance); --nav-tint: var(--color-approval-text); }
#app-shell .nav-item[data-view="integrations"] { --nav-icon: var(--nav-icon-integrations); --nav-tint: var(--color-live-text); }
#app-shell .nav-item[data-view="audit"] { --nav-icon: var(--nav-icon-audit); --nav-tint: var(--color-audit-text); }
#app-shell .nav-item[data-view="subscription"] { --nav-icon: var(--nav-icon-subscription); }
#app-shell .nav-item[data-view="settings"] { --nav-icon: var(--nav-icon-settings); }
#app-shell .nav-item[data-view="operator"] { --nav-icon: var(--nav-icon-operator); }
#app-shell .nav-item.active .nav-item-index { color: var(--nav-tint, var(--color-ink)); }
/* Active section: a 3px Rail Green bar on the inside edge (the sidebar's one strong accent). */
#app-shell .nav-item.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-live-solid);
}
@media (max-width: 900px) {
  #app-shell .nav-item.active::before { top: auto; bottom: 0; left: 14px; right: 14px; width: auto; height: 3px; border-radius: 2px 2px 0 0; }
}

/* Status pills (.state, version and plan chips): Draft gray, Published green, Approval amber,
   Blocked red, Sandbox blue outline. Every tone carries an icon and its word. */
#app-shell .state,
#app-shell :is(.version-chip, .plan-pill, .endpoint)[data-tone] {
  --pill-text: var(--color-ink-secondary); --pill-tint: var(--color-canvas); --pill-border: var(--color-border); --pill-icon: none;
  border-color: var(--pill-border);
  background: var(--pill-tint);
  color: var(--pill-text);
  transition: background-color 240ms var(--motion-ease-out), border-color 240ms var(--motion-ease-out), color 240ms var(--motion-ease-out);
}
#app-shell .state { gap: 6px; }
#app-shell :is(.state, .version-chip[data-tone], .plan-pill[data-tone], .endpoint[data-tone])::before {
  content: "";
  display: var(--pill-icon-display, none);
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--pill-icon) center / contain no-repeat;
  mask: var(--pill-icon) center / contain no-repeat;
}
#app-shell :is(.version-chip, .plan-pill, .endpoint)[data-tone] { display: inline-flex; align-items: center; gap: 6px; }
#app-shell :is(.state-draft, .state-superseded, :is(.version-chip, .plan-pill, .endpoint)[data-tone="draft"]) { --pill-text: var(--color-ink-secondary); --pill-tint: var(--color-sunken); --pill-border: var(--color-border); --pill-icon: var(--icon-draft); --pill-icon-display: block; }
#app-shell :is(.state-published, .state-active, .state-approved, .state-claimed, .state-executed, .state-delivered, .state-connected, .state-live, :is(.version-chip, .plan-pill, .endpoint)[data-tone="live"]) { --pill-text: var(--color-live-text); --pill-tint: var(--color-live-tint); --pill-border: var(--color-live-border); --pill-icon: var(--icon-live); --pill-icon-display: block; }
#app-shell :is(.state-approval-required, .state-pending, .state-awaiting-claim, .state-polling, .state-awaiting-poll, .state-needs-review, :is(.version-chip, .plan-pill, .endpoint)[data-tone="approval"]) { --pill-text: var(--color-approval-text); --pill-tint: var(--color-approval-tint); --pill-border: var(--color-approval-border); --pill-icon: var(--icon-approval); --pill-icon-display: block; }
#app-shell :is(.state-rejected, .state-denied, .state-archived, .state-revoked, .state-blocked, .state-failed, .state-expired, .state-unpublished, :is(.version-chip, .plan-pill, .endpoint)[data-tone="blocked"]) { --pill-text: var(--color-blocked-text); --pill-tint: var(--color-blocked-tint); --pill-border: var(--color-blocked-border); --pill-icon: var(--icon-blocked); --pill-icon-display: block; }
#app-shell :is(.state-sandbox, .state-indicative, :is(.version-chip, .plan-pill, .endpoint)[data-tone="agent"]) { --pill-text: var(--color-agent-text); --pill-tint: transparent; --pill-border: var(--color-agent-solid); --pill-icon: var(--icon-agent); --pill-icon-display: block; }
#app-shell :is(.version-chip, .plan-pill, .endpoint)[data-tone="audit"] { --pill-text: var(--color-audit-text); --pill-tint: var(--color-audit-tint); --pill-border: var(--color-audit-border); --pill-icon: var(--icon-audit); --pill-icon-display: block; }
#app-shell :is(.version-chip, .plan-pill, .endpoint)[data-tone="neutral"] { --pill-icon-display: none; }

/* Usage meters: green below 80%, amber from 80%, red at 100%. The fraction is always printed. */
#app-shell .usage-quota-bar { background: var(--color-sunken); }
#app-shell .usage-quota-bar > span { background: var(--color-live-solid); transition: width 320ms var(--motion-ease-out), background-color 240ms var(--motion-ease-out); }
#app-shell .usage-quota-card.is-warn .usage-quota-bar > span { background: var(--color-approval-solid); }
#app-shell .usage-quota-card.is-danger .usage-quota-bar > span { background: var(--color-blocked-solid); }
#app-shell .usage-quota-card :is(small) { display: inline-flex; align-items: center; gap: 6px; }
#app-shell .usage-quota-card.is-warn small { color: var(--color-approval-text); }
#app-shell .usage-quota-card.is-danger small { color: var(--color-blocked-text); }
#app-shell .usage-quota-card:is(.is-warn, .is-danger) small::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--icon-approval) center / contain no-repeat; mask: var(--icon-approval) center / contain no-repeat; }
#app-shell .usage-quota-card.is-danger small::before { -webkit-mask-image: var(--icon-blocked); mask-image: var(--icon-blocked); }

/* Overview activity: real daily counts (metrics.activity14d) as sparklines. */
#app-shell .activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
#app-shell .activity-stat { display: grid; gap: 6px; padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-control); background: var(--color-canvas); color: var(--spark, var(--color-ink)); }
#app-shell .activity-stat[data-role="agent"] { --spark: var(--color-agent-solid); --spark-text: var(--color-agent-text); }
#app-shell .activity-stat[data-role="approval"] { --spark: var(--color-approval-solid); --spark-text: var(--color-approval-text); }
#app-shell .activity-stat[data-role="audit"] { --spark: var(--color-audit-solid); --spark-text: var(--color-audit-text); }
#app-shell .activity-stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-ink-secondary); font-size: var(--type-small-size); }
#app-shell .activity-stat-head .pr-icon { color: var(--spark-text); --pr-icon: var(--icon-agent); }
#app-shell .activity-stat[data-role="approval"] .pr-icon { --pr-icon: var(--icon-approval); }
#app-shell .activity-stat[data-role="audit"] .pr-icon { --pr-icon: var(--icon-audit); }
#app-shell .activity-stat strong { color: var(--color-ink); font: 600 24px / 1.1 var(--font-sans); font-variant-numeric: tabular-nums; }
#app-shell .activity-stat svg { display: block; width: 100%; height: 36px; overflow: visible; }
#app-shell .activity-stat small { color: var(--color-ink-muted); font: 400 12px / 1.4 var(--font-mono); }
#app-shell .activity-empty { margin: 0; color: var(--color-ink-muted); }
@media (prefers-reduced-motion: reduce) {
  #app-shell .state,
  #app-shell :is(.version-chip, .plan-pill, .endpoint)[data-tone],
  #app-shell .usage-quota-bar > span { transition: none; }
}

/* v1 cards that hard-code light surfaces: route them through tokens so dark mode holds AA. */
#app-shell :is(.insights-grid article, .stack-connector-card, .billing-subscription-card) {
  border-color: var(--color-border);
  background: var(--color-raised);
  color: var(--color-ink);
}
#app-shell :is(.insights-grid article, .stack-connector-card, .billing-subscription-card) strong { color: var(--color-ink); }
#app-shell :is(.insights-grid article, .billing-subscription-card) span,
#app-shell :is(.insights-grid article, .stack-connector-card, .billing-subscription-card) small,
#app-shell .stack-connector-card span { color: var(--color-ink-muted); }
#app-shell .stack-connector-card em { color: var(--color-ink-secondary); }
#app-shell .stack-connector-card:is([data-status="connected"], [data-status="ready"]) em { color: var(--color-live-text); }
#app-shell .stack-connector-card[data-status="waitlisted"] em { color: var(--color-agent-text); }

/* Stress-test fixes (long org names, four-digit counts, 390px). */
#app-shell .topbar-meta .version-chip { white-space: nowrap; flex-shrink: 0; }
#app-shell .topbar > div:first-child { min-width: 0; }
#app-shell .usage-quota-card-head { min-width: 0; flex-wrap: wrap; column-gap: var(--space-2); }
#app-shell .usage-quota-card-head > span { min-width: 0; }
#app-shell .usage-quota-card-head strong { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  #app-shell .topbar { flex-direction: column; align-items: stretch; }
  #app-shell .topbar-actions { flex-wrap: wrap; justify-content: space-between; }
}

/* -- Dark theme: v1 surfaces that hard-code light backgrounds (DESIGN.md v3.1 "Theme"); the cards above are already tokenized -- */
:root[data-theme="dark"] #app-shell :is(
  .method-option,
  .operator-stat,
  .operator-storage-card,
  .operator-breakdown
) {
  background: var(--color-raised);
  border-color: var(--color-border);
  color: var(--color-ink-secondary);
}
:root[data-theme="dark"] #app-shell .version-card footer button {
  background: var(--color-canvas);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
:root[data-theme="dark"] #app-shell .version-conflicts {
  background: var(--color-approval-tint);
  border-color: var(--color-approval-border);
  color: var(--color-approval-text);
}

/* -- Machine access: the two key types (internal vs buyer-agent) -- */
#app-shell .key-types {
  margin-top: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-subtle);
}
#app-shell .key-types > summary {
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  font-weight: 600;
  cursor: pointer;
}
#app-shell .key-types > summary:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
#app-shell .key-types-grid {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4);
}
@media (min-width: 900px) {
  #app-shell .key-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
#app-shell .key-type { padding-top: var(--space-3); border-top: var(--hairline); }
#app-shell .key-type h4 { margin: 0; color: var(--color-ink); font-size: var(--type-body-size, 15px); font-weight: 600; }
#app-shell .key-type .key-type-for { margin: var(--space-1) 0 var(--space-3); color: var(--color-ink-secondary); }
#app-shell .key-type ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); }
#app-shell .key-type li { color: var(--color-ink-secondary); text-wrap: pretty; overflow-wrap: anywhere; }
#app-shell .key-types-shared {
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-3) 0 var(--space-4);
  border-top: var(--hairline);
  color: var(--color-ink-secondary);
  text-wrap: pretty;
}
#app-shell .agent-key-group + .agent-key-group { margin-top: var(--space-5); }
#app-shell .agent-key-group > h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-note-size);
  font-weight: 600;
}
#app-shell .agent-key-group > h4 span {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
#app-shell .agent-key-empty { margin: var(--space-1) 0 0; color: var(--color-ink-muted); }
#app-shell .agent-key-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
#app-shell .agent-key-attention {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-approval-border);
  border-radius: var(--radius-card);
  background: var(--color-approval-tint);
}
#app-shell .agent-key-attention p { margin: 0; color: var(--color-ink); text-wrap: pretty; }
#app-shell .agent-key-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
#app-shell .agent-key-tools label { display: grid; gap: var(--space-1); flex: 1 1 200px; min-width: 0; }
#app-shell .agent-key-tools label:last-child { flex: 0 1 220px; }
#app-shell .agent-key-revoked-toggle { margin-top: var(--space-4); }
#app-shell .agent-key-group .agent-credentials-list { margin-top: var(--space-2); }
#app-shell .agent-credentials-list article > div:first-child { min-width: 0; }
#app-shell .agent-credentials-list strong { overflow-wrap: anywhere; }
#app-shell .agent-key-groups { margin-top: var(--space-5); }
#app-shell .key-types + .offer-draft-toolbar { margin-top: var(--space-4); }
/* Narrow screens: key and request actions go under the text so names never wrap letter by letter. */
@media (max-width: 640px) {
  #app-shell :is(.agent-credentials-list, .access-requests-list) article { grid-template-columns: minmax(0, 1fr); }
}

/* Sign-in messages: errors read as errors, confirmations as confirmations; both sit in the form column. */
#auth-screen #auth-error {
  max-width: 440px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-blocked-border);
  border-radius: var(--radius-control);
  background: var(--color-blocked-tint);
  color: var(--color-blocked-text);
  font-size: var(--type-small-size);
}
#auth-screen #auth-error.auth-notice {
  border-color: var(--color-live-border);
  background: var(--color-live-tint);
  color: var(--color-live-text);
}

/* Catalog copilot: mode switch, request box, and proposed changes with before → after lines. */
#app-shell .copilot-box { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
#app-shell .copilot-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#app-shell .copilot-box textarea,
#app-shell .copilot-box input[type="url"] { width: 100%; }
#app-shell .copilot-box > .button { justify-self: start; }
#app-shell .copilot-option { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-card); background: var(--color-canvas); }
#app-shell .copilot-option + .copilot-option { margin-top: var(--space-3); }
#app-shell .copilot-option h5 { margin: 0; font-size: 15px; }
#app-shell .copilot-option > .button { justify-self: start; }
#app-shell .copilot-changes { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); font-variant-numeric: tabular-nums; }
#app-shell .copilot-quote { color: var(--color-ink-muted); font-size: 13px; }
#app-shell .copilot-rejected { margin: 0; color: var(--color-warning-text); font-size: 13px; }
#app-shell ul.copilot-rejected { padding-left: var(--space-5); }
#app-shell .copilot-risk { margin: 0; color: var(--color-ink-secondary); font-size: 13px; }
#app-shell .copilot-question { margin: 0; }
#app-shell .copilot-suggestions { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: 13px; }
#app-shell .copilot-suggestions p { margin: 0; }
#app-shell .copilot-suggestions ul { margin: 0; padding-left: var(--space-2); list-style: none; display: grid; gap: var(--space-2); }
#app-shell .copilot-flag { font-weight: 600; }

/* -- Settings: notifications, export, danger zone, deletion banner -- */
#app-shell #view-settings { display: none; gap: var(--space-5); }
#app-shell #view-settings.active { display: grid; }
#app-shell .settings-toggles { display: grid; gap: var(--space-3); margin: 0; }
#app-shell .settings-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-top: var(--hairline);
  cursor: pointer;
}
#app-shell .settings-toggle:first-child { border-top: 0; }
#app-shell .settings-toggle input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-rail); }
#app-shell .settings-toggle span { display: grid; gap: 2px; min-width: 0; }
#app-shell .settings-toggle small { color: var(--color-ink-muted); font-size: var(--type-caption-size); }
#app-shell .settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
#app-shell .settings-danger { border-color: var(--color-blocked-border); }
#app-shell .settings-danger-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-top: var(--hairline);
}
#app-shell .settings-danger-row:first-child { border-top: 0; padding-top: 0; }
#app-shell .settings-danger-row > div { flex: 1 1 280px; min-width: 0; }
#app-shell .settings-danger-row p { margin: var(--space-1) 0 0; color: var(--color-ink-secondary); }
#view-settings .status-message.is-error, #settings-confirm-status.is-error { color: var(--color-error-text); }

/* Same scope as the console's base button rule, so the danger fill wins. */
:is(#app-shell, .feedback-dialog) .button.button-danger {
  background: var(--color-blocked-solid);
  border-color: var(--color-blocked-solid);
  color: var(--color-blocked-on);
}
:is(#app-shell, .feedback-dialog) .button.button-danger:hover:not(:disabled) { filter: brightness(0.92); }
:is(#app-shell, .feedback-dialog) .button.button-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.settings-dialog .settings-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.settings-dialog .settings-warning {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-approval-border);
  border-radius: var(--radius-control);
  background: var(--color-approval-tint);
  color: var(--color-approval-text);
}
.settings-dialog label { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.settings-dialog input[type="text"] { font-family: var(--font-mono); }
.settings-dialog .settings-code-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.settings-dialog .settings-code-row label { flex: 1 1 160px; margin-top: 0; }

#app-shell .deletion-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-blocked-border);
  border-radius: var(--radius-control);
  background: var(--color-blocked-tint);
  color: var(--color-blocked-text);
}
#app-shell .deletion-banner[hidden] { display: none; }
#app-shell .deletion-banner p { margin: 0; flex: 1 1 260px; }


/* -- Dark mode: legacy surfaces that hard-coded light backgrounds (unreadable light-on-light) -- */
:is(#app-shell, .modal) :is(.summary-card, .summary-stats > div, .readiness-panel, .version-diff-panel, .method-value-panel, .protocol-modal-endpoint, .agentic-suggest-banner.is-exhausted) {
  background: var(--color-subtle);
  border-color: var(--color-border);
  color: var(--color-ink);
}
:is(#app-shell, .modal) .readiness-col li { background: var(--color-canvas); border-color: var(--color-border); color: var(--color-ink); }
:is(#app-shell, .modal) .view-toggle { background: var(--color-sunken); }
:is(#app-shell, .modal) .view-toggle-btn.active { background: var(--color-canvas); color: var(--color-ink); }
:is(#app-shell, .modal) .account-avatar { background: var(--color-sunken); color: var(--color-ink); }
:is(#app-shell, .modal) :is(.form-error, .status-message.error) {
  background: var(--color-blocked-tint);
  border-color: var(--color-blocked-border);
  color: var(--color-blocked-text);
}
:is(#app-shell, .modal) .summary-alert { background: var(--color-approval-tint); border-color: var(--color-approval-border); color: var(--color-approval-text); }
/* Ops protocol cards sit inside the event list, whose row rule removed their padding. */
#app-shell .operator-event-list article.operator-protocol-stat {
  display: block;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-subtle);
}
#app-shell .operator-event-list article.operator-protocol-stat strong { color: var(--color-ink); font-family: var(--font-mono); font-size: 14px; }
#app-shell .operator-event-list article.operator-protocol-stat :is(span, small) { display: block; color: var(--color-ink-secondary); text-align: left; }
/* Readiness dimension bars: a quiet track and an ink fill in both themes (dark had a light track). */
#app-shell .dimension i { background: var(--color-sunken); }
#app-shell .dimension i b { background: var(--color-ink); }

/* -- Sign-in, one column (13 Oct 2026) --
 * A single quiet column in the middle of the canvas: lockup, one heading, the providers stacked
 * at equal weight, email under a hairline "or", then the switch between signing in and starting
 * free. No green until the code step, where "Verify and continue" is the one filled button. */
#auth-screen {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-9) var(--space-4);
}
#auth-screen .auth-card {
  width: min(100%, 360px);
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#auth-screen .auth-card .pr-logo { align-self: center; margin: 0 0 var(--space-6); }
#auth-screen .auth-card h1 {
  margin: 0;
  text-align: center;
  font: var(--type-h2-weight) var(--type-h2-size) / var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#auth-screen .auth-copy {
  max-width: none;
  margin: var(--space-2) 0 0;
  text-align: center;
  text-wrap: pretty;
}
#auth-screen .oauth-stack { max-width: none; margin: var(--space-6) 0 0; gap: var(--space-2); }
#auth-screen .auth-card .oauth-stack .button,
#auth-screen .auth-card .auth-email-otp .button { margin-top: 0; }
#auth-screen .auth-divider { max-width: none; margin: var(--space-4) 0; text-transform: none; letter-spacing: 0; }
#auth-screen .auth-email-otp { max-width: none; margin: 0; gap: var(--space-2); }
#auth-screen .auth-email-otp label { gap: var(--space-2); }
#auth-screen .auth-otp-step { padding-top: var(--space-2); }
#auth-screen .auth-email-otp .oauth-btn-block { min-height: var(--control-height-marketing); font-size: var(--type-button-size); }
#auth-screen .auth-email-otp .button-ghost { justify-self: center; width: auto; padding-left: var(--space-3); }
#auth-screen #auth-error { max-width: none; margin-top: var(--space-3); }
#auth-screen .auth-switch {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: var(--hairline);
  text-align: center;
  color: var(--color-ink-secondary);
  font-size: var(--type-small-size);
}
#auth-screen .auth-switch a { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#auth-screen[data-auth-mode="checkout"] .auth-switch { display: none; }
#auth-screen .auth-card .auth-back {
  align-self: center;
  width: auto;
  min-height: 0;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--type-small-size);
}

/* -- Start free: showcase panel (13 Oct 2026, v3) --
 * Only on the Start free face, at 1024px and wider: the form on the left, a soft panel on the
 * right. Four steps, each a large drawn illustration with its title and caption, centred as one
 * group with the dots. One palette: neutral surfaces plus Rail Green as the only accent.
 * Steps crossfade (400ms ease-out, 0.98 to 1). Steps 1 and 3 play once each time they show;
 * step 4's quotes travel in a loop; step 2 is still. The active dot fills over the step; when
 * that fill finishes the next step shows (auth-showcase.js).
 * Everything pauses on hover, focus within or a hidden tab; reduced motion shows static steps. */
.auth-showcase { display: none; }
@media (min-width: 1024px) {
  #auth-screen[data-auth-mode="signup"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    place-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
  }
  #auth-screen[data-auth-mode="signup"] .auth-card { align-self: center; justify-self: center; }
  #auth-screen[data-auth-mode="signup"] .auth-showcase {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    min-height: calc(100dvh - 2 * var(--space-4));
    /* No top padding: the group centres in the space above the facts row, so the gap above it
       matches the gap below it. */
    padding: 0 var(--space-6) var(--space-5);
    border: var(--hairline);
    border-radius: var(--radius-card);
    background: var(--color-subtle);
  }
}

.auth-showcase {
  /* One step above the panel's secondary text, still below the ink of titles. */
  --sc-text: color-mix(in srgb, var(--color-ink) 72%, var(--color-ink-secondary));
  --sc-step: 6500ms;
  --sc-ease: var(--motion-ease-out);
  --sc-accent: var(--color-rail);
  --sc-accent-soft: var(--color-rail-soft);
}
/* The illustration, caption and dots as one centred group above the facts row. */
.sc-group { display: grid; justify-items: center; align-content: center; gap: var(--space-6); width: 100%; }
.sc-slides { display: grid; width: min(100%, 640px); }
.sc-slide {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  opacity: 0;
  transform: scale(0.98);
  visibility: hidden;
  transition: opacity 400ms var(--sc-ease), transform 400ms var(--sc-ease), visibility 0s linear 400ms;
}
.sc-slide.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity 400ms var(--sc-ease), transform 400ms var(--sc-ease); }

/* Illustrations */
.sc-art { display: block; width: 100%; height: auto; aspect-ratio: 520 / 320; overflow: visible; }
.sc-art text { font-family: var(--font-sans); }
.sc-block > rect:first-child { fill: var(--color-canvas); stroke: var(--color-border); stroke-width: 1; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.06)); }
.sc-bar, .sc-track { fill: var(--color-sunken); }
.sc-rule { stroke: var(--color-border); stroke-width: 1; }
.sc-big { fill: var(--color-ink); font-size: 22px; font-weight: 600; }
.sc-mid { fill: var(--sc-text); font-size: 18px; font-weight: 500; }
.sc-note { fill: var(--sc-text); font-size: 16px; font-weight: 500; }
.sc-total { fill: var(--color-ink); font-family: var(--font-mono) !important; font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-total--sm { font-size: 26px; }
/* Green text uses the text-strength green so it passes AA on both themes; shapes keep Rail Green. */
.sc-ok { fill: var(--color-live-text); font-size: 17px; font-weight: 600; }
.sc-badge circle { fill: var(--sc-accent); }
.sc-check-mark { fill: none; stroke: var(--color-canvas); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-wire { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; }
.sc-flow, .sc-wire-hi { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linecap: round; }
.sc-flow { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sc-wire-hi { stroke-dasharray: 0.06 1; stroke-dashoffset: -0.94; stroke-width: 3.5; }
.sc-tag rect, .sc-tile rect { fill: var(--color-canvas); stroke: var(--color-border-strong); stroke-width: 1; }
.sc-tag text { fill: var(--color-ink); font-family: var(--font-mono) !important; font-size: 17px; font-weight: 600; }
.sc-tile text { fill: var(--color-ink); font-size: 17px; font-weight: 600; }
.sc-fill { fill: var(--sc-accent); transform-box: fill-box; transform-origin: left center; }
.sc-limit { stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; }
.sc-head-bg { fill: var(--color-sunken); stroke: var(--color-border-strong); stroke-width: 1; }
.sc-head { fill: var(--color-ink-secondary); }
.sc-shoulders { fill: none; stroke: var(--color-ink-secondary); stroke-width: 2.5; stroke-linecap: round; }
.sc-approve { transform-box: fill-box; transform-origin: left center; }

/* Caption */
.sc-caption { max-width: 500px; text-align: center; }
.sc-caption h2 { margin: 0; color: var(--color-ink); font: 600 28px / 36px var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.sc-caption p { margin: var(--space-2) 0 0; color: var(--sc-text); font-size: 17px; line-height: 27px; text-wrap: balance; }

/* Dots: fixed in place. The active one fills over the step; a finished fill fades out. */
.sc-dots { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.sc-dot { position: relative; width: 32px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 400ms var(--sc-ease); }
.sc-dot[aria-current="true"] { width: 56px; }
.sc-dot::before,
.sc-dot-fill { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.sc-dot::before { content: ""; background: var(--color-border-strong); transition: background-color 300ms var(--sc-ease); }
.sc-dot[aria-current="true"]::before { background: var(--color-ink-muted); }
.sc-dot-fill { background: var(--color-ink); transform-origin: left center; opacity: 0; transition: opacity 300ms var(--sc-ease); }
.sc-dot[aria-current="true"] .sc-dot-fill { opacity: 1; animation: sc-progress var(--sc-step) linear both; }
.sc-dot:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sc-dot:not([aria-current="true"]):hover::before { background: var(--color-ink-muted); }
}
/* Pause / Play: hidden until it has keyboard focus, then shown beside the dots. */
.sc-toggle {
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: 500 13px / 26px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  clip-path: inset(50%);
  opacity: 0;
}
.sc-toggle:focus-visible { clip-path: none; opacity: 1; outline: var(--focus-ring); outline-offset: 2px; }

/* Facts row */
.sc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: space-evenly;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: var(--hairline);
  list-style: none;
}
.sc-facts li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  text-wrap: balance;
}
.sc-facts svg { width: 24px; height: 24px; fill: none; stroke: var(--sc-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Runs on the active step and on the leaving one until its fade ends. `backwards` holds the first
 * frame through each stagger delay; without it the finished state shows, then jumps back. */
@media (prefers-reduced-motion: no-preference) {
  .sc-slide:is(.is-active, .is-leaving) .sc-flow { animation: sc-draw 1.4s var(--sc-ease) calc(var(--i, 0) * 140ms) backwards; }
  .sc-slide:is(.is-active, .is-leaving) .sc-wire-hi { animation: sc-travel 2.6s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i, 0) * 260ms) infinite backwards; }
  .sc-slide:is(.is-active, .is-leaving) .sc-fill { animation: sc-fill 1.8s var(--sc-ease) backwards; }
  /* The approval lands once the bar is past the limit, and stays. */
  .sc-slide:is(.is-active, .is-leaving) .sc-approve { animation: sc-approve 360ms var(--sc-ease) 1.7s backwards; }
  .auth-showcase[data-paused] :is(.sc-flow, .sc-wire-hi, .sc-fill, .sc-approve),
  .auth-showcase[data-paused] .sc-dot[aria-current="true"] .sc-dot-fill { animation-play-state: paused; }
}
@keyframes sc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-travel {
  0% { stroke-dashoffset: 0.06; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -0.94; opacity: 0; }
}
@keyframes sc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-approve { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* Reduced motion: static steps. No scale, no loops, no autoplay; the active dot is full. */
@media (prefers-reduced-motion: reduce) {
  .sc-slide, .sc-slide.is-active { transform: none; }
  .sc-slide { transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .sc-slide.is-active { transition: opacity 200ms linear; }
  .sc-dot[aria-current="true"] .sc-dot-fill { animation: none; transform: none; }
  .sc-dot { transition: none; }
  .sc-flow { stroke-dashoffset: 0; }
  .sc-wire-hi { display: none; }
}