/*
 * PairRail workspace design system (DESIGN.md v3.4, docs/design/WORKSPACE_UI_AUDIT_2026-10-12.md).
 * Loads after workspace.css. Three surface layers (page, card, raised), four status colors
 * (live, needs setup, warning, blocked), one filled accent reserved for the primary action,
 * an app type scale and the shared patterns: page lead, status summary, status grid, meters,
 * readiness hero, timeline, approval tiers, empty states and skeletons.
 * Dark reuses the marketing v3.2 depth values so cards lift off the page.
 */

/* -- 1. Tokens -- */
:is(#app-shell, .modal, .feedback-dialog) {
  --ws-page: #f6f6f7;
  --ws-card: #ffffff;
  /* Muted text one step darker than the marketing value so it holds 4.5:1 on the gray page and on tints. */
  --color-ink-muted: #63636c;
  --ws-raised: #ffffff;
  --ws-inset: #f1f1f3;
  --ws-hover: #f4f4f5;
  --ws-border: #e4e4e7;
  --ws-border-strong: #d4d4d8;
  --ws-shadow-raised: 0 1px 2px rgb(10 10 10 / 0.04), 0 12px 32px -18px rgb(10 10 10 / 0.18);
  --ws-shadow-pop: 0 0 0 1px rgb(10 10 10 / 0.06), 0 16px 36px -12px rgb(10 10 10 / 0.24);

  --ws-live: var(--color-live-solid);
  --ws-setup: #71717a;
  --ws-warn: var(--color-approval-solid);
  --ws-blocked: var(--color-blocked-solid);
  --ws-live-text: var(--color-live-text);
  --ws-warn-text: var(--color-approval-text);
  --ws-blocked-text: var(--color-blocked-text);
  --ws-accent: var(--color-live-solid);
  --ws-accent-hover: var(--color-rail-hover);
  --ws-on-accent: #ffffff;

  --ws-title: 600 24px / 30px var(--font-sans);
  --ws-section: 600 17px / 24px var(--font-sans);
  --ws-row: 600 15px / 22px var(--font-sans);
  --ws-body: 400 15px / 22px var(--font-sans);
  --ws-meta: 400 13px / 18px var(--font-sans);
  --ws-number: 600 28px / 32px var(--font-sans);
  --ws-code: 400 13px / 18px var(--font-mono);

  --ws-pad: 20px;
  --ws-gap: 16px;
  --ws-section-gap: 32px;
  --ws-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ws-fast: 140ms;
  --ws-med: 200ms;
}
:root[data-theme="dark"] :is(#app-shell, .modal, .feedback-dialog) {
  --ws-page: #0b0b0c;
  --ws-card: #141416;
  --ws-raised: #1c1c20;
  --ws-inset: #101012;
  --ws-hover: #1c1c20;
  --ws-border: #28282d;
  --ws-border-strong: #37373e;
  --ws-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 36px -20px rgb(0 0 0 / 0.7);
  --ws-shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.06), 0 18px 40px -12px rgb(0 0 0 / 0.75);
  --ws-setup: #9d9da6;
  --ws-accent-hover: #4dbb8c;
  --ws-on-accent: #0b0b0c;
  /* Marketing v3.2 depth inside the workspace: cards, fields and text lift off the page. */
  --color-canvas: var(--ws-card);
  --color-subtle: #19191c;
  --color-sunken: #1c1c20;
  --color-raised: var(--ws-raised);
  --color-field: #202024;
  --color-ink: #f0f0f2;
  --color-ink-secondary: #c9c9cf;
  --color-ink-muted: #9d9da6;
  --color-border: var(--ws-border);
  --color-border-strong: var(--ws-border-strong);
  --color-input-border: #74747d;
  --color-live-text: #74d3a4;     --color-live-tint: #10291d;     --color-live-border: #23573c;
  --color-approval-text: #f6c26e; --color-approval-tint: #2c200c; --color-approval-border: #6a4a17;
  --color-agent-text: #9dbcf7;    --color-agent-tint: #12203c;    --color-agent-border: #2c4a85;
  --color-blocked-text: #f6a197;  --color-blocked-tint: #331513;  --color-blocked-border: #6e2722;
  --color-audit-text: #c3b4f6;
  --hairline: 1px solid var(--color-border);
  --focus-ring: 2px solid var(--color-ink);
  --color-pill-text: var(--color-ink);
  --color-warning-text: var(--color-approval-text); --color-warning-bg: var(--color-approval-tint); --color-error-text: var(--color-blocked-text);
  --color-rail-soft: var(--color-live-tint); --color-rail-soft-border: var(--color-live-border);
  --ink: var(--color-ink); --ink-soft: var(--color-ink-secondary); --muted: var(--color-ink-muted);
  --line: var(--color-border); --paper-light: var(--ws-card); --panel: var(--ws-card);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) :is(#app-shell, .modal, .feedback-dialog) { color-scheme: dark; }
}

/* -- 2. Shell -- */
body:has(#app-shell:not([hidden])) { background: var(--ws-page); }
:root[data-theme="dark"] body:has(#app-shell:not([hidden])) { background: #0b0b0c; }
#app-shell { background: var(--ws-page); }
#app-shell .main { background: var(--ws-page); }
#app-shell .view { padding-top: 24px; }
#app-shell .view > * + * { margin-top: var(--ws-gap); }
#app-shell .view > .ws-page-lead + .ws-summary { margin-top: 12px; }

/* Sidebar: card surface beside a gray page in light; L0 beside L1 cards in dark. */
#app-shell .sidebar { background: var(--ws-card); border-right: 1px solid var(--ws-border); }
:root[data-theme="dark"] #app-shell .sidebar { background: #0b0b0c; }
#app-shell .nav-item {
  min-height: 40px;
  padding: 9px 12px;
  color: var(--color-ink-secondary);
  transition: background-color var(--ws-fast) var(--ws-ease), color var(--ws-fast) var(--ws-ease), transform var(--ws-fast) var(--ws-ease);
}
#app-shell .nav-item:active { transform: scale(0.98); }
#app-shell .nav-item.active {
  background: var(--color-live-tint);
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--color-live-border);
}
#app-shell .nav-item.active .nav-item-label { color: var(--color-ink); }
#app-shell .nav-item.active .nav-item-index { color: var(--color-live-text); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .nav-item:not(.active):hover { background: var(--ws-hover); color: var(--color-ink); }
}
#app-shell .nav-item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
/* Pending badge (Governance: approvals waiting). Amber means a person must decide. */
#app-shell .ws-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-approval-tint);
  box-shadow: inset 0 0 0 1px var(--color-approval-border);
  color: var(--color-approval-text);
  font: 600 12px / 20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#app-shell .nav-item .entitlement-lock + .ws-nav-badge { margin-left: 6px; }
#app-shell .sidebar-foot .status-dot { background: var(--ws-live); box-shadow: 0 0 0 3px var(--color-live-tint); }

/* Topbar: compact, the page title is the one heading. */
#app-shell .topbar { min-height: 76px; padding: 14px 0; gap: 16px; }
#app-shell .topbar h1 { font: var(--ws-title); letter-spacing: -0.02em; margin-top: 2px; }
#app-shell .topbar .kicker {
  font: 500 13px / 18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}
#app-shell #refresh-button { display: inline-grid; place-items: center; font-size: 0; }
#app-shell #refresh-button svg { width: 16px; height: 16px; }
#app-shell #refresh-button.is-refreshing svg { animation: ws-spin 900ms linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* -- 3. Primitives -- */
#app-shell :is(.panel, .score-card, .proof-card, .offer-card, .version-card, .workbench, .approval-card, .empty-panel, .calculation) {
  background: var(--ws-card);
  border-color: var(--ws-border);
}
#app-shell .panel { padding: var(--ws-pad); }
#app-shell .panel-head { align-items: center; padding-bottom: 14px; gap: 12px; flex-wrap: wrap; }
#app-shell .panel-head-actions { display: flex; align-items: center; gap: 8px; }
#app-shell .panel-head > div { min-width: 0; }
#app-shell .panel-head h3,
#app-shell .ws-section-title { margin: 0; font: var(--ws-section); letter-spacing: -0.01em; color: var(--color-ink); overflow-wrap: anywhere; }
/* Eyebrows carry nothing the heading does not; the heading speaks for itself. */
#app-shell :is(.panel-head, .section-intro, .catalog-ai-head, .gateway-verified-badge-head) .kicker:not(#current-version-kicker) { display: none; }
#app-shell .panel-head > span,
#app-shell .panel-head .endpoint {
  font: 500 13px / 18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-muted);
}
#app-shell .panel-head .endpoint { padding: 3px 10px; }
#app-shell .view p:not(.kicker) { font-size: 15px; }

/* Buttons: hover, focus, press. The filled accent is the page's primary action only. */
#app-shell :is(.button, .button-signal-sm, .button-outline-sm, .icon-button, .link-button) {
  transition: background-color var(--ws-fast) var(--ws-ease), border-color var(--ws-fast) var(--ws-ease), color var(--ws-fast) var(--ws-ease), transform var(--ws-fast) var(--ws-ease), box-shadow var(--ws-fast) var(--ws-ease);
}
#app-shell :is(.button, .button-signal-sm, .button-outline-sm, .icon-button):not(:disabled):active { transform: scale(0.98); }
#app-shell :is(.button, .button-signal-sm, .button-outline-sm, .icon-button, a, summary, [tabindex="0"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
#app-shell .button-dark { background: var(--ws-card); color: var(--color-ink); border: 1px solid var(--color-border-strong); }
#app-shell .button-quiet { background: transparent; border-color: transparent; color: var(--color-ink-secondary); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .button-dark:not(:disabled):hover { background: var(--ws-hover); border-color: var(--color-ink-muted); }
  #app-shell .button-quiet:not(:disabled):hover { background: var(--ws-hover); color: var(--color-ink); }
}
/* Secondary green buttons in panels become outlined; .ws-primary keeps the fill. */
#app-shell :is(.button-signal, .button-signal-sm):not(.ws-primary) {
  background: var(--ws-card);
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
}
@media (hover: hover) and (pointer: fine) {
  #app-shell :is(.button-signal, .button-signal-sm):not(.ws-primary):not(:disabled):hover { background: var(--ws-hover); border-color: var(--color-ink-muted); }
}
#app-shell .ws-primary,
#app-shell .ws-primary:is(.button, .button-signal, .button-signal-sm, .button-outline-sm, .button-dark) {
  background: var(--ws-accent);
  border: 1px solid transparent;
  color: var(--ws-on-accent);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-primary:not(:disabled):hover { background: var(--ws-accent-hover); border-color: transparent; color: var(--ws-on-accent); }
}
#app-shell .button-danger { background: var(--ws-card); border: 1px solid var(--color-blocked-border); color: var(--color-blocked-text); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .button-danger:not(:disabled):hover { background: var(--color-blocked-tint); }
}
#app-shell .button-signal span,
#app-shell .button span[aria-hidden] { transition: transform var(--ws-fast) var(--ws-ease); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .button-signal:hover > span:last-child:not(:only-child) { transform: translateX(2px); }
}

/* -- 4. Status: dot + word, never color alone -- */
.ws-dot {
  --dot: var(--ws-setup);
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}
.ws-dot[data-status="live"] { --dot: var(--ws-live); }
.ws-dot[data-status="setup"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ws-setup); }
.ws-dot[data-status="warn"] { --dot: var(--ws-warn); box-shadow: 0 0 0 3px var(--color-approval-tint); }
.ws-dot[data-status="blocked"] { --dot: var(--ws-blocked); border-radius: 2px; }
.ws-dot[data-status="locked"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ws-setup); border-radius: 2px; }
.ws-status-word { font: 500 13px / 18px var(--font-sans); color: var(--color-ink-muted); }
.ws-status-word[data-status="live"] { color: var(--ws-live-text); }
.ws-status-word[data-status="warn"] { color: var(--ws-warn-text); }
.ws-status-word[data-status="blocked"] { color: var(--ws-blocked-text); }

/* -- 5. Page lead (one header per page) and status summary -- */
#app-shell .ws-page-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
#app-shell .ws-page-lead > p { margin: 0; max-width: 72ch; color: var(--color-ink-secondary); font: var(--ws-body); }
#app-shell .ws-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#app-shell .ws-page-actions:empty { display: none; }
#app-shell .ws-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  border: 1px solid var(--ws-border);
  border-radius: var(--radius-card);
  background: var(--ws-card);
  overflow: hidden;
}
#app-shell .ws-summary:empty { display: none; }
#app-shell .ws-summary > div {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 14px 16px;
  box-shadow: -1px 0 0 var(--ws-border), 0 -1px 0 var(--ws-border);
}
#app-shell .ws-summary dt { margin: 0; color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-summary dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  color: var(--color-ink);
  font: 600 15px / 22px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
#app-shell .ws-summary dd > span:not(.ws-dot) { min-width: 0; overflow-wrap: anywhere; }
#app-shell .ws-summary dd a,
#app-shell .ws-summary dd button.link-button { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); }
#app-shell .ws-summary dd code.ws-slug { min-width: 0; overflow-wrap: anywhere; font: 500 14px / 22px var(--font-mono, ui-monospace, monospace); }
#app-shell .ws-summary dd button.ws-slug-copy { font: var(--ws-meta); color: var(--color-ink-muted); }

/* -- 6. Overview: readiness hero -- */
#app-shell .ws-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border: 1px solid var(--ws-border);
  border-radius: var(--radius-card);
  background: var(--ws-raised);
  box-shadow: var(--ws-shadow-raised);
  overflow: hidden;
}
#app-shell .ws-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; }
#app-shell .ws-ring {
  --ring: var(--ws-setup);
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
}
#app-shell .ws-ring[data-band="live"] { --ring: var(--ws-live); }
#app-shell .ws-ring[data-band="warn"] { --ring: var(--ws-warn); }
#app-shell .ws-ring[data-band="blocked"] { --ring: var(--ws-blocked); }
#app-shell .ws-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#app-shell .ws-ring-track { fill: none; stroke: var(--ws-inset); stroke-width: 10; }
:root[data-theme="dark"] #app-shell .ws-ring-track { stroke: #26262b; }
#app-shell .ws-ring-value {
  fill: none;
  stroke: var(--ring);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-c, 314.16);
  stroke-dashoffset: var(--ring-offset, 314.16);
  transition: stroke-dashoffset 700ms var(--ws-ease), stroke 240ms var(--ws-ease);
}
#app-shell .ws-ring-label { position: relative; display: grid; justify-items: center; line-height: 1; }
#app-shell .ws-ring-label strong { font: 600 36px / 1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
#app-shell .ws-ring-label span { margin-top: 4px; color: var(--color-ink-muted); font: 500 12px / 1 var(--font-sans); }
#app-shell .ws-hero-copy { display: grid; gap: 8px; min-width: 0; }
#app-shell .ws-hero-band { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-ink-secondary); font: 500 13px / 18px var(--font-sans); }
#app-shell .ws-hero-copy h2 { margin: 0; font: 600 22px / 28px var(--font-sans); letter-spacing: -0.02em; color: var(--color-ink); overflow-wrap: anywhere; text-wrap: balance; }
#app-shell .ws-hero-copy p#readiness-summary { margin: 0; color: var(--color-ink-secondary); font: var(--ws-body); max-width: 60ch; }
#app-shell .ws-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
#app-shell .ws-hero-actions:empty { display: none; }

/* Open items: the next action, beside the score. */
#app-shell .ws-open-items { display: grid; align-content: start; gap: 4px; padding: 20px; border-left: 1px solid var(--ws-border); background: var(--ws-card); min-width: 0; }
#app-shell .ws-open-items-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
#app-shell .ws-open-items-head h3 { margin: 0; font: var(--ws-row); color: var(--color-ink); }
#app-shell .ws-count {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--ws-inset);
  color: var(--color-ink-secondary);
  font: 600 13px / 20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#app-shell .ws-count[data-status="warn"] { background: var(--color-approval-tint); color: var(--color-approval-text); box-shadow: inset 0 0 0 1px var(--color-approval-border); }
#app-shell .ws-count[data-status="live"] { background: var(--color-live-tint); color: var(--color-live-text); box-shadow: inset 0 0 0 1px var(--color-live-border); }
#app-shell .ws-open-items ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#app-shell .ws-open-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 8px 8px 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ws-fast) var(--ws-ease), transform var(--ws-fast) var(--ws-ease);
}
#app-shell .ws-open-item:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-open-item:hover { background: var(--ws-hover); }
  #app-shell .ws-open-item:hover .ws-chevron { transform: translateX(2px); color: var(--color-ink); }
}
#app-shell .ws-open-item strong { font: 500 14px / 20px var(--font-sans); color: var(--color-ink); overflow-wrap: anywhere; }
#app-shell .ws-open-item small { grid-column: 2; color: var(--color-ink-muted); font: var(--ws-meta); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
#app-shell .ws-open-item .ws-dot { grid-row: 1; }
#app-shell .ws-open-item .ws-where { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; color: var(--color-ink-muted); font: var(--ws-meta); white-space: nowrap; }
#app-shell .ws-chevron { width: 14px; height: 14px; color: var(--color-ink-muted); transition: transform var(--ws-fast) var(--ws-ease), color var(--ws-fast) var(--ws-ease); }
#app-shell .ws-open-more { padding: 6px 6px 0; color: var(--color-ink-muted); font: var(--ws-meta); }

/* -- 7. Status grid: name plus state; detail in the tooltip or the linked page -- */
#app-shell .ws-status-groups { display: grid; gap: 16px; }
#app-shell .ws-status-group h4 { margin: 0 0 8px; color: var(--color-ink-muted); font: 500 13px / 18px var(--font-sans); }
#app-shell .ws-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
#app-shell .ws-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ws-border);
  border-radius: var(--radius-control);
  background: var(--ws-card);
  color: var(--color-ink);
  font: 500 14px / 20px var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ws-fast) var(--ws-ease), border-color var(--ws-fast) var(--ws-ease), transform var(--ws-fast) var(--ws-ease);
}
#app-shell .ws-status-item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-status-item:hover { background: var(--ws-hover); border-color: var(--color-border-strong); }
}
#app-shell .ws-status-item .ws-status-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#app-shell .ws-status-item .ws-status-word { white-space: nowrap; }

/* Tooltip: one shared bubble fixed on <body>, so cards never clip it. */
.ws-tip {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--color-ink, #0a0a0a);
  color: var(--color-canvas, #fff);
  font: 400 13px / 18px var(--font-sans);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transform-origin: var(--tip-origin, center bottom);
  transition: opacity 125ms cubic-bezier(0.23, 1, 0.32, 1), transform 125ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ws-tip[data-instant] { transition-duration: 0ms; }
:root[data-theme="dark"] .ws-tip { background: #f0f0f2; color: #0b0b0c; }
.ws-tip[data-open] { opacity: 1; transform: none; }

/* -- 8. Meters: used against plan limit -- */
#app-shell .ws-meters { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
#app-shell .ws-meter {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 2fr) minmax(96px, auto);
  gap: 4px 16px;
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ws-border);
}
#app-shell .ws-meter:last-child { border-bottom: 0; }
#app-shell .ws-meter-label { min-width: 0; color: var(--color-ink); font: 500 14px / 20px var(--font-sans); overflow-wrap: anywhere; }
#app-shell .ws-meter-track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--ws-inset); overflow: hidden; }
:root[data-theme="dark"] #app-shell .ws-meter-track { background: #26262b; }
#app-shell .ws-meter-fill { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: inherit; background: var(--ws-live); transition: background-color 240ms var(--ws-ease); }
#app-shell .ws-meter[data-tone="warn"] .ws-meter-fill { background: var(--ws-warn); }
#app-shell .ws-meter[data-tone="blocked"] .ws-meter-fill { background: var(--ws-blocked); }
#app-shell .ws-meter-value { color: var(--color-ink); font: 600 14px / 20px var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#app-shell .ws-meter-detail { grid-column: 2 / -1; color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-meter[data-tone="warn"] .ws-meter-detail { color: var(--ws-warn-text); }
#app-shell .ws-meter[data-tone="blocked"] .ws-meter-detail { color: var(--ws-blocked-text); }
#app-shell .ws-meter-plain { grid-column: 2 / -1; color: var(--color-ink-secondary); font: var(--ws-meta); }
#app-shell .ws-meter-counts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ws-border); color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-meter-counts strong { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- 9. Lists, tables and rows -- */
#app-shell .ws-table { width: 100%; border-collapse: collapse; font: var(--ws-body); }
#app-shell .ws-table th { padding: 8px 12px; border-bottom: 1px solid var(--ws-border); color: var(--color-ink-muted); font: 500 13px / 18px var(--font-sans); text-align: left; white-space: nowrap; }
#app-shell .ws-table td { padding: 10px 12px; border-bottom: 1px solid var(--ws-border); vertical-align: middle; min-width: 0; }
#app-shell .ws-table tr:last-child td { border-bottom: 0; }
#app-shell .ws-table td.ws-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
#app-shell .ws-table th.ws-num { text-align: right; }
#app-shell .ws-table code, #app-shell .ws-id { font: var(--ws-code); color: var(--color-ink-secondary); overflow-wrap: anywhere; }
#app-shell .ws-table tbody tr { transition: background-color var(--ws-fast) var(--ws-ease); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-table tbody tr:hover { background: var(--ws-hover); }
}
#app-shell .ws-table-wrap { overflow-x: auto; margin: 0 calc(var(--ws-pad) * -1); padding: 0 var(--ws-pad); }
#app-shell .ws-table-foot { margin-top: 10px; color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 13px / 18px var(--font-sans); color: var(--color-ink-secondary); }

/* -- 10. Audit timeline -- */
#app-shell .ws-timeline { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
#app-shell .ws-day > h3 { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 6px 0; background: var(--ws-page); color: var(--color-ink-muted); font: 600 13px / 18px var(--font-sans); }
#app-shell .ws-day ol { position: relative; display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ws-border); border-radius: var(--radius-card); background: var(--ws-card); }
#app-shell .ws-event {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: start;
  padding: 12px 16px;
}
#app-shell .ws-event + .ws-event { border-top: 1px solid var(--ws-border); }
#app-shell .ws-event-icon {
  --tone: var(--color-ink-secondary);
  --tint: var(--ws-inset);
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--tone);
}
#app-shell .ws-event-icon svg { width: 15px; height: 15px; }
#app-shell .ws-event[data-kind="catalog"] .ws-event-icon { --tone: var(--color-live-text); --tint: var(--color-live-tint); }
#app-shell .ws-event[data-kind="agent"] .ws-event-icon { --tone: var(--color-agent-text); --tint: var(--color-agent-tint); }
#app-shell .ws-event[data-kind="approval"] .ws-event-icon { --tone: var(--color-approval-text); --tint: var(--color-approval-tint); }
#app-shell .ws-event[data-kind="key"] .ws-event-icon { --tone: var(--color-audit-text); --tint: var(--color-audit-tint); }
#app-shell .ws-event[data-kind="blocked"] .ws-event-icon { --tone: var(--color-blocked-text); --tint: var(--color-blocked-tint); }
#app-shell .ws-event strong { font: var(--ws-row); color: var(--color-ink); overflow-wrap: anywhere; }
#app-shell .ws-event p { grid-column: 2; margin: 0; color: var(--color-ink-muted); font: var(--ws-meta) !important; overflow-wrap: anywhere; }
#app-shell .ws-event time { grid-column: 3; grid-row: 1; color: var(--color-ink-muted); font: var(--ws-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -- 11. Governance: approvals and tiers -- */
#app-shell .ws-approvals { display: grid; gap: 0; border: 1px solid var(--ws-border); border-radius: var(--radius-card); background: var(--ws-card); overflow: hidden; }
#app-shell .ws-approval {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: center;
  padding: 14px 16px;
}
#app-shell .ws-approval + .ws-approval { border-top: 1px solid var(--ws-border); }
#app-shell .ws-approval-amount { font: 600 18px / 24px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
#app-shell .ws-approval-amount small { display: block; color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-approval-body { display: grid; gap: 4px; min-width: 0; }
#app-shell .ws-approval-body strong { font: 500 14px / 20px var(--font-sans); color: var(--color-ink); overflow-wrap: anywhere; }
#app-shell .ws-approval-body span { color: var(--color-ink-muted); font: var(--ws-meta); overflow-wrap: anywhere; }
#app-shell .ws-approval-actions { display: flex; gap: 8px; }
#app-shell .ws-approval-actions .button { min-height: 36px; }
#app-shell .ws-approve { color: var(--color-live-text) !important; border-color: var(--color-live-border) !important; }
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-approve:not(:disabled):hover { background: var(--color-live-tint) !important; }
}
#app-shell .ws-approval-details { grid-column: 1 / -1; margin-top: 4px; }
#app-shell .ws-approval-details > summary { width: fit-content; cursor: pointer; color: var(--color-ink-secondary); font: var(--ws-meta); }
#app-shell .ws-approval-details[open] > summary { margin-bottom: 10px; }
#app-shell .ws-approval-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; padding: 12px 0 2px; border-top: 1px solid var(--ws-border); }
#app-shell .ws-approval-group { min-width: 0; }
#app-shell .ws-approval-group h4 { margin: 0 0 6px; color: var(--color-ink-muted); font: 500 11px / 16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
#app-shell .ws-approval-group dl { display: grid; gap: 4px; margin: 0; }
#app-shell .ws-approval-group dl > div { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: 8px; }
#app-shell .ws-approval-group dt { color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .ws-approval-group dd { margin: 0; color: var(--color-ink); font: var(--ws-meta); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#app-shell .ws-approval-group .ws-approval-note { margin: 0 0 6px; color: var(--color-ink-muted); font: var(--ws-meta) !important; }
#app-shell .ws-approvals-more { padding: 10px 16px; border-top: 1px solid var(--ws-border); color: var(--color-ink-muted); font: var(--ws-meta); }

#app-shell .ws-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 16px; padding: 0; list-style: none; border: 1px solid var(--ws-border); border-radius: var(--radius-card); overflow: hidden; }
#app-shell .ws-tier { --tone: var(--ws-live); display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--ws-card); box-shadow: inset 0 3px 0 var(--tone); min-width: 0; }
#app-shell .ws-tier + .ws-tier { border-left: 1px solid var(--ws-border); }
#app-shell .ws-tier[data-tier="manager"] { --tone: var(--ws-warn); }
/* Executive is still a person deciding (amber), set apart by a heavier bar and a tinted cell. */
#app-shell .ws-tier[data-tier="above"] { --tone: var(--ws-warn); background: var(--color-approval-tint); box-shadow: inset 0 6px 0 var(--tone); padding-top: 17px; }
#app-shell .ws-tier[data-tier="above"] .ws-dot { box-shadow: 0 0 0 3px var(--color-approval-tint), 0 0 0 4.5px var(--ws-warn); }
#app-shell .ws-tier-name { display: flex; align-items: center; gap: 8px; font: var(--ws-row); color: var(--color-ink); }
#app-shell .ws-tier-range { font: 600 18px / 24px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-ink); overflow-wrap: anywhere; }
#app-shell .ws-tier-who { color: var(--color-ink-muted); font: var(--ws-meta); }

/* -- 12. Empty states and skeletons -- */
#app-shell .ws-empty {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 16px;
  border: 1px dashed var(--ws-border-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink-secondary);
  font: var(--ws-body);
}
#app-shell .ws-empty strong { color: var(--color-ink); font: var(--ws-row); }
#app-shell .ws-empty p { margin: 0; color: var(--color-ink-muted); font: var(--ws-meta) !important; }
#app-shell .ws-empty-action { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 600 14px / 20px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  #app-shell .ws-empty-action:hover { text-decoration-color: currentColor; }
}
.ws-skel { display: grid; gap: 10px; }
.ws-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ws-inset, #f1f1f3) 0%, var(--ws-hover, #f4f4f5) 40%, var(--ws-inset, #f1f1f3) 80%);
  background-size: 300% 100%;
  animation: ws-shimmer 1.4s ease-in-out infinite;
}
:root[data-theme="dark"] .ws-skel-line { background-image: linear-gradient(90deg, #1c1c20 0%, #26262b 40%, #1c1c20 80%); }
.ws-skel-line:nth-child(2) { width: 82%; }
.ws-skel-line:nth-child(3) { width: 64%; }
.ws-skel-block { height: 44px; border-radius: var(--radius-control); }
@keyframes ws-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* Before the first overview arrives, the hero and summaries show skeletons, not blank cards. */
#app-shell[data-loading] .ws-hero .ws-ring-label strong,
#app-shell[data-loading] .ws-hero h2,
#app-shell[data-loading] .ws-hero #readiness-summary { color: transparent; border-radius: 6px; background: var(--ws-inset); }
#app-shell[data-loading] .ws-hero h2 { min-height: 28px; width: 70%; }
#app-shell[data-loading] .ws-hero #readiness-summary { min-height: 22px; width: 90%; }

/* -- 13. Per-page -- */
/* Overview */
/* Setup checklist: one row per step, read from workspace data. */
#app-shell .ws-setup-steps { display: grid; margin: 0; padding: 0; list-style: none; }
#app-shell .ws-setup-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ws-border); }
#app-shell .ws-setup-step:first-child { border-top: 0; padding-top: 4px; }
#app-shell .ws-setup-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ws-border-strong); color: var(--color-ink-muted); font: 600 12px / 1 var(--font-mono); }
#app-shell .ws-setup-step[aria-current="step"] .ws-setup-mark { box-shadow: inset 0 0 0 1.5px var(--color-ink); color: var(--color-ink); }
#app-shell .ws-setup-step[data-done="true"] .ws-setup-mark { background: var(--color-live-solid); box-shadow: none; color: var(--color-live-on); }
#app-shell .ws-setup-copy strong { display: block; color: var(--color-ink); font: var(--ws-row); }
#app-shell .ws-setup-step[data-done="true"] .ws-setup-copy strong { color: var(--color-ink-secondary); }
#app-shell .ws-setup-copy p { margin: 2px 0 0; color: var(--color-ink-muted); font: var(--ws-meta) !important; }
#app-shell .ws-setup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
#app-shell .ws-setup-done { color: var(--color-live-text); font: var(--ws-meta); }
#app-shell .ws-setup-foot { margin: 10px 0 0; color: var(--color-ink-muted); font: var(--ws-meta) !important; }
#app-shell .overview-empty-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
#app-shell .overview-empty-endpoint code { min-width: 0; overflow-wrap: anywhere; color: var(--color-ink-secondary); font: var(--ws-code); }
#app-shell .offer-example-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--color-approval-tint); color: var(--color-ink); font: 500 12px / 18px var(--font-sans); font-style: normal; }
@media (max-width: 640px) {
  #app-shell .ws-setup-step { grid-template-columns: 24px minmax(0, 1fr); }
  #app-shell .ws-setup-actions { grid-column: 2; justify-content: flex-start; }
}
#app-shell #overview-populated { display: grid; gap: var(--ws-gap); }
#app-shell #overview-populated[hidden] { display: none; }
#app-shell #overview-populated > * { margin: 0; }
#app-shell #overview-capabilities .capabilities-note { margin: 14px 0 0; color: var(--color-ink-muted); font: var(--ws-meta) !important; }
#app-shell .insights-detail-row .activity-row,
#app-shell .insights-detail-row .issue-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--ws-border); }
#app-shell .insights-detail-row .activity-row:last-child,
#app-shell .insights-detail-row .issue-row:last-child { border-bottom: 0; }
#app-shell .insights-detail-row .activity-row strong { font: var(--ws-code); color: var(--color-ink); }
#app-shell .insights-detail-row .activity-row span,
#app-shell .insights-detail-row .issue-row span { color: var(--color-ink-muted); font: var(--ws-meta); }
#app-shell .insights-subhead { margin: 16px 0 6px; color: var(--color-ink-muted); font: 500 13px / 18px var(--font-sans) !important; text-transform: none; letter-spacing: 0; }
#app-shell .insights-grid article strong { font: var(--ws-number); }
#app-shell .dimension > div { font: 500 14px / 20px var(--font-sans); }
#app-shell .dimension i { height: 6px; background: var(--ws-inset); }
#app-shell .dimension i b { background: var(--color-ink-secondary); }

/* Commercial truth: version list beside the selected version, not a third-width card. */
#app-shell .version-layout { gap: var(--ws-gap); }

/* Agent gateway: rails as a dense list; the request console follows the page theme. */
#app-shell article.terminal { background: var(--ws-card); border: 1px solid var(--ws-border); color: var(--color-ink); }
#app-shell .terminal-head { border-bottom: 1px solid var(--ws-border); }
#app-shell .terminal-head span { display: none; }
#app-shell .terminal-head strong { color: var(--color-ink-secondary); font: 500 13px / 18px var(--font-sans); text-transform: none; letter-spacing: 0; }
#app-shell article.terminal pre { color: var(--color-ink-secondary); background: transparent; font: var(--ws-code); }

/* Governance quote ledger rows no longer collide. */
#app-shell #quote-list .ws-table td:nth-child(2) { max-width: 320px; }

/* Integrations: connection cards with a clear connected / not connected state. */
#app-shell .integration-card { border-color: var(--ws-border); background: var(--ws-card); transition: border-color var(--ws-fast) var(--ws-ease), box-shadow var(--ws-fast) var(--ws-ease); }
#app-shell .integration-card[data-ws-connected="true"] { border-color: var(--color-live-border); }
#app-shell .integration-card .ws-conn { display: inline-flex; align-items: center; gap: 6px; font: 500 13px / 18px var(--font-sans); color: var(--color-ink-muted); }
#app-shell .integration-card[data-ws-connected="true"] .ws-conn { color: var(--ws-live-text); }

/* Settings: the danger action is outlined until confirmed. */
#app-shell .settings-danger { border-color: var(--color-blocked-border); }
#app-shell .settings-danger :is(.button-danger, .button-signal) { background: var(--ws-card); color: var(--color-blocked-text); border: 1px solid var(--color-blocked-border); }

/* Toast sits below the topbar so it never covers Log out. */
.notice#global-notice { top: 88px; }

/* -- 14. Motion: tabs, drawers, view changes -- */
@media (prefers-reduced-motion: no-preference) {
  /* Switching pages happens many times a day: a short fade, no movement. */
  #app-shell .view.active { animation: ws-fade-in 140ms var(--ws-ease) both; }
  /* Tab panels (Summary / Detail, recipe tabs) fade in when they swap. */
  #app-shell :is(.catalog-preview-body, .protocol-modal-body, .gateway-origin-proxy) > :not([hidden]):not(summary) { animation: ws-fade-in 150ms var(--ws-ease) both; }
  #app-shell details[open] > :not(summary) { animation: ws-drawer-in var(--ws-med) var(--ws-ease) both; }
  #app-shell .integrations-detail:not([hidden]) { animation: ws-drawer-in 220ms var(--ws-ease) both; }
  .feedback-dialog[open] { animation: ws-pop-in 180ms var(--ws-ease) both; }
}
@keyframes ws-fade-in { from { opacity: 0; } }
@keyframes ws-drawer-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ws-pop-in { from { opacity: 0; transform: scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  #app-shell *, #app-shell *::before, #app-shell *::after, .ws-tip, .feedback-dialog {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ws-skel-line { animation: none; }
  #app-shell .ws-ring-value { transition: none; }
}

/* -- 15. Responsive -- */
@media (max-width: 1100px) {
  #app-shell .ws-hero { grid-template-columns: 1fr; }
  #app-shell .ws-open-items { border-left: 0; border-top: 1px solid var(--ws-border); }
}
@media (max-width: 1050px) {
  #app-shell .ws-nav-badge { position: absolute; top: 4px; right: 10px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; }
}
@media (max-width: 760px) {
  #app-shell .nav-item.active { background: var(--color-live-tint); box-shadow: inset 0 0 0 1px var(--color-live-border); }
  #app-shell .ws-nav-badge { top: 2px; right: 4px; }
  #app-shell .topbar { min-height: 0; }
  #app-shell .topbar h1 { font-size: 20px; line-height: 26px; }
  #app-shell .topbar-session .topbar-user { display: none; }
  #app-shell .view { padding-top: 16px; }
}
@media (max-width: 640px) {
  :is(#app-shell, .modal, .feedback-dialog) { --ws-pad: 16px; }
  #app-shell .ws-hero-main { grid-template-columns: 1fr; justify-items: start; gap: 16px; padding: 18px 16px; }
  #app-shell .ws-ring { width: 96px; height: 96px; }
  #app-shell .ws-ring-label strong { font-size: 30px; }
  #app-shell .ws-hero-main { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  #app-shell .ws-hero-copy h2 { font-size: 18px; line-height: 24px; }
  #app-shell .ws-hero-actions { grid-column: 1 / -1; }
  #app-shell .ws-hero-actions .button { flex: 1 1 auto; }
  #app-shell .ws-open-items { padding: 14px 12px; }
  #app-shell .ws-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-shell .ws-meter { grid-template-columns: minmax(0, 1fr) auto; }
  #app-shell .ws-meter-track { grid-column: 1 / -1; grid-row: 2; }
  #app-shell .ws-meter-detail, #app-shell .ws-meter-plain { grid-column: 1 / -1; }
  #app-shell .ws-status-grid { grid-template-columns: 1fr; gap: 6px; }
  #app-shell .ws-approval { grid-template-columns: minmax(0, 1fr) auto; }
  #app-shell .ws-approval-body { grid-column: 1 / -1; grid-row: 2; }
  #app-shell .ws-approval-actions { grid-column: 1 / -1; }
  #app-shell .ws-approval-actions .button { flex: 1; }
  #app-shell .ws-tiers { grid-template-columns: 1fr; }
  #app-shell .ws-tier + .ws-tier { border-left: 0; border-top: 1px solid var(--ws-border); }
  #app-shell .ws-event { grid-template-columns: 28px minmax(0, 1fr); padding: 12px; }
  #app-shell .ws-event time { grid-column: 2; grid-row: auto; }
  #app-shell .ws-table thead { display: none; }
  #app-shell .ws-table, #app-shell .ws-table tbody, #app-shell .ws-table tr, #app-shell .ws-table td { display: block; width: 100%; }
  #app-shell .ws-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--ws-border); }
  #app-shell .ws-table td { padding: 0; border: 0; }
  #app-shell .ws-table td.ws-num { text-align: right; }
}
@media (max-width: 380px) {
  #app-shell .ws-summary { grid-template-columns: 1fr; }
}

/* -- 16. Small shared pieces -- */
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#app-shell .ws-btn-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.22);
  font: 600 12px / 20px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
#app-shell .button-outline-sm .ws-btn-count { background: var(--color-approval-tint); color: var(--color-approval-text); }
:root[data-theme="dark"] #app-shell .ws-primary .ws-btn-count { background: rgb(11 11 12 / 0.2); }
/* Jump targets (open items, status grid, empty-state links) flash a soft ring on arrival. */
#app-shell .is-spotlight { outline: 2px solid var(--color-ink-muted); outline-offset: 4px; border-radius: var(--radius-card); transition: outline-color 1.2s var(--ws-ease); }
#app-shell .link-button { padding: 0; border: 0; background: none; color: var(--color-ink-secondary); font: 500 14px / 20px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  #app-shell .link-button:hover { color: var(--color-ink); text-decoration-color: currentColor; }
}

/* Overview offers: sentence-case labels instead of mono caps. */
#app-shell .overview-offer > div > span,
#app-shell .overview-offer footer span { font: 500 13px / 18px var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--color-ink-muted); }
#app-shell .overview-offer footer span:first-child { overflow-wrap: anywhere; }
#app-shell .overview-offer { border-radius: var(--radius-control); background: var(--ws-card); }

/* Commercial truth: labels read as words, not mono caps. */
#app-shell #current-version-kicker { display: block; margin: 0 0 2px; font: 500 13px / 18px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); }
#app-shell .offer-card :is(.offer-top, .offer-foot) { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; }
#app-shell .offer-price { display: grid; gap: 2px; margin-top: 14px; font: 600 15px / 22px var(--font-sans); color: var(--color-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#app-shell .offer-price small, #app-shell .offer-price-empty { font: 500 13px / 18px var(--font-sans); color: var(--color-ink-muted); }
#app-shell .version-card > div strong { font: 500 12px / 16px var(--font-sans); letter-spacing: 0; text-transform: capitalize; }
#app-shell .dimension i { height: 4px; }
#app-shell .dimension i b { background: var(--color-ink-muted); }

/* Integrations pill: word plus dot, sans. */
#app-shell .integration-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font: 500 12px / 24px var(--font-sans); }
/* Team rows and profile: tokenized surfaces, full width. */
#app-shell .team-member-row { background: var(--ws-card); border-color: var(--ws-border); color: var(--color-ink); }
#app-shell .team-member-row.is-pending { background: var(--ws-inset); }
#app-shell .account-panel { max-width: none; }
#app-shell .account-panel :is(.account-form, .account-identity, .account-foot) { max-width: 560px; }

/* Summary / Detail toggles read as one segmented control. */
#app-shell .sandbox-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-control); background: var(--ws-inset); border: 1px solid var(--ws-border); }
#app-shell .sandbox-view-toggle button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--color-ink-secondary); font: 500 13px / 18px var(--font-sans); cursor: pointer; transition: background-color var(--ws-fast) var(--ws-ease), color var(--ws-fast) var(--ws-ease); }
#app-shell .sandbox-view-toggle button.active,
#app-shell .sandbox-view-toggle button[aria-selected="true"] { background: var(--ws-card); color: var(--color-ink); box-shadow: var(--shadow-chip); }
@media (hover: hover) and (pointer: fine) {
  #app-shell .sandbox-view-toggle button:not(.active):hover { color: var(--color-ink); }
}

/* Skip link: first stop for keyboard users, visible only on focus. */
#app-shell .ws-skip { position: fixed; top: 8px; left: 8px; z-index: 70; padding: 8px 12px; border-radius: var(--radius-control); background: var(--color-ink); color: var(--ws-card); font: 600 14px / 20px var(--font-sans); transform: translateY(-160%); }
#app-shell .ws-skip:focus-visible { transform: none; outline-offset: 2px; }
#app-shell .main:focus { outline: none; }

/* -- 17. Long content (stress pass: long seller names, long emails, 50 offers, 320px) -- */
#app-shell .main { overflow-wrap: break-word; }
#app-shell .view > *,
#app-shell :is(.version-layout, .two-column, .workbench, .gateway-grid, .catalog-ingest-grid, .account-panel, .settings-panel, .key-types-grid) > * { min-width: 0; }
#app-shell .version-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
#app-shell :is(#account-display-name, #account-email, #settings-notify-intro, .team-member-row strong, .team-member-row span, .nav-user-name, .nav-user-email, .overview-offer strong, .offer-card h4, .offer-card strong, .version-card p, .ws-approval-body strong, .ws-ledger-offer, .approval-card h4) { overflow-wrap: anywhere; }
#app-shell .team-member-row { flex-wrap: wrap; }
#app-shell .team-member-row > div:first-child { min-width: 0; flex: 1 1 220px; }
#app-shell .team-member-actions { flex-shrink: 0; }
#app-shell .gateway-live-callout,
#app-shell .gateway-live-actions,
#app-shell .overview-paused-banner,
#app-shell .overview-paused-actions { flex-wrap: wrap; min-width: 0; }
#app-shell .topbar-meta { flex-wrap: wrap; min-width: 0; }
@media (max-width: 420px) {
  #app-shell .topbar-meta .version-chip { white-space: normal; flex-shrink: 1; }
  #app-shell .topbar-actions { gap: 6px; }
}
#app-shell .evidence-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
#app-shell .evidence-list article > div { min-width: 0; }
#app-shell .evidence-list small { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  #app-shell .evidence-list article { grid-template-columns: auto minmax(0, 1fr); }
  #app-shell .evidence-list article > time { grid-column: 2; }
  #app-shell .gateway-live-callout { grid-template-columns: minmax(0, 1fr); }
  #app-shell .gateway-live-actions { justify-content: flex-start; }
  #app-shell .gateway-live-actions .button { white-space: normal; }
}
@media (max-width: 640px) {
  #app-shell .gateway-live-actions { flex-shrink: 1; max-width: 100%; }
}
#app-shell .overview-get-started .kicker { display: none; }
#app-shell .overview-get-started { background: var(--ws-raised); box-shadow: var(--ws-shadow-raised); }

/* Toast: hairline card, the state carried by the text color, no side accent. */
.notice#global-notice { border-left: var(--hairline); }
.notice#global-notice.error { border-color: var(--color-blocked-border); color: var(--color-blocked-text); }

/* Pricing lab: the decision pill carries meaning (amber: a person approves; green: indicative; red: denied). */
#app-shell .decision { display: inline-flex; align-items: center; gap: 6px; font: 500 13px / 20px var(--font-sans); letter-spacing: 0; text-transform: none; }
#app-shell .decision-approval-required { background: var(--color-approval-tint); border-color: var(--color-approval-border); color: var(--color-approval-text); }
#app-shell :is(.decision-indicative, .decision-approved) { background: var(--color-live-tint); border-color: var(--color-live-border); color: var(--color-live-text); }
#app-shell :is(.decision-denied, .decision-blocked) { background: var(--color-blocked-tint); border-color: var(--color-blocked-border); color: var(--color-blocked-text); }
/* A field pair whose fields are all hidden for this offer takes no space. */
#app-shell .form-pair:not(:has(> :not([hidden]))) { display: none; }