/* SpecSprout 1.31 shared design system.
   Foundations are shared by public pages, the workspace and supplier handoffs.
   The workspace adapter below bridges existing components without changing their
   behavior. State colors describe evidence or health, never a card's position. */
:root {
  --ss-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-canvas: #fbfaf5;
  --ss-surface: #ffffff;
  --ss-soft: #f2f2ec;
  --ss-ink: #111827;
  --ss-navy: #1b2232;
  --ss-muted: #5b6472;
  --ss-subtle: #69717e;
  --ss-border: #d9dcd9;
  --ss-border-strong: #9fa6ad;
  --ss-yellow: #f7df56;
  --ss-yellow-hover: #efd23b;
  --ss-focus: #365b87;
  --ss-success: #256344;
  --ss-success-bg: #edf6ef;
  --ss-warning: #775600;
  --ss-warning-bg: #fff8df;
  --ss-danger: #a13232;
  --ss-danger-bg: #fff0ee;
  --ss-info: #395775;
  --ss-info-bg: #edf2f6;
  --ss-radius: 16px;
  --ss-radius-sm: 12px;
  --ss-shadow: 0 3px 12px rgb(17 24 39 / 4%);
  --ss-space-1: 8px;
  --ss-space-2: 16px;
  --ss-space-3: 24px;
  --ss-space-4: 32px;
  --ss-space-6: 48px;
  /* Existing component aliases. Keep one palette rather than parallel themes. */
  --paper: var(--ss-canvas); --paper-2: var(--ss-surface);
  --panel: var(--ss-surface); --panel-soft: var(--ss-soft); --soft: var(--ss-soft);
  --ink: var(--ss-ink); --text: var(--ss-ink);
  --muted: var(--ss-muted); --muted-2: var(--ss-subtle);
  --line: var(--ss-border); --line-strong: var(--ss-border-strong);
  --nav: var(--ss-navy); --nav-soft: #293243;
  --field-bg: var(--ss-surface); --selection-bg: var(--ss-soft); --selection-line: var(--ss-ink);
  --cobalt: var(--ss-ink); --cobalt-dark: var(--ss-navy); --lemon: var(--ss-yellow);
  --green: var(--ss-success); --green-bg: var(--ss-success-bg);
  --blue: var(--ss-info); --blue-bg: var(--ss-info-bg);
  --purple: var(--ss-info); --purple-bg: var(--ss-info-bg);
  --amber: var(--ss-warning); --amber-bg: var(--ss-warning-bg);
  --red: var(--ss-danger); --red-bg: var(--ss-danger-bg);
  --shadow: var(--ss-shadow); --shadow-sm: var(--ss-shadow); --shadow-float: 0 12px 36px rgb(17 24 39 / 10%);
  --radius: var(--ss-radius); --radius-sm: var(--ss-radius-sm);
  --ux-bg: var(--ss-canvas); --ux-card: var(--ss-surface); --ux-ink: var(--ss-ink); --ux-muted: var(--ss-muted); --ux-line: var(--ss-border);
  --sprout-card: var(--ss-surface); --sprout-ink: var(--ss-ink); --sprout-muted: var(--ss-muted); --sprout-line: var(--ss-border);
  --sprout-blue: var(--ss-ink); --sprout-yellow: var(--ss-yellow); --sprout-yellow-soft: var(--ss-warning-bg);
  --sprout-purple: var(--ss-info); --sprout-purple-soft: var(--ss-info-bg);
  --sprout-green: var(--ss-success); --sprout-green-soft: var(--ss-success-bg);
  --sprout-pink: var(--ss-danger); --sprout-blue-soft: var(--ss-info-bg);
  --sprout-shadow: var(--ss-shadow); --sprout-shadow-soft: var(--ss-shadow);
  --sprout-sidebar-width: 248px; --sprout-focus: 0 0 0 3px var(--ss-focus);
  color-scheme: light;
}
html[data-theme="dark"] {
  --ss-canvas: #111722; --ss-surface: #1b2330; --ss-soft: #242e3b;
  --ss-ink: #f5f5ef; --ss-muted: #b9c1cd; --ss-subtle: #a6b0bf;
  --ss-border: #394554; --ss-border-strong: #657180; --ss-focus: #a8c9ef;
  --ss-success: #a1dbb6; --ss-success-bg: #203a2b;
  --ss-warning: #f1d984; --ss-warning-bg: #3b3420;
  --ss-danger: #ffb9b2; --ss-danger-bg: #412b30;
  --ss-info: #b6cbe1; --ss-info-bg: #28394b;
  --ss-shadow: 0 3px 12px rgb(0 0 0 / 12%);
  --paper: var(--ss-canvas); --paper-2: var(--ss-surface); --panel: var(--ss-surface);
  --soft: var(--ss-soft); --panel-soft: var(--ss-soft); --field-bg: var(--ss-surface);
  --ink: var(--ss-ink); --text: var(--ss-ink); --muted: var(--ss-muted); --muted-2: var(--ss-subtle);
  --line: var(--ss-border); --line-strong: var(--ss-border-strong);
  --green: var(--ss-success); --green-bg: var(--ss-success-bg);
  --blue: var(--ss-info); --blue-bg: var(--ss-info-bg); --purple: var(--ss-info); --purple-bg: var(--ss-info-bg);
  --amber: var(--ss-warning); --amber-bg: var(--ss-warning-bg); --red: var(--ss-danger); --red-bg: var(--ss-danger-bg);
  --selection-bg: var(--ss-soft); --selection-line: var(--ss-ink);
  --ux-bg: var(--ss-canvas); --ux-card: var(--ss-surface); --ux-ink: var(--ss-ink); --ux-muted: var(--ss-muted); --ux-line: var(--ss-border);
  --sprout-card: var(--ss-surface); --sprout-ink: var(--ss-ink); --sprout-muted: var(--ss-muted); --sprout-line: var(--ss-border);
  color-scheme: dark;
}
html { font-family: var(--ss-font); scroll-padding-top: 88px; }
body { font-family: var(--ss-font); font-size: 16px; line-height: 1.55; background: var(--ss-canvas); color: var(--ss-ink); }
body::before { display: none; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--ss-font); line-height: 1.2; letter-spacing: -.025em; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; }
html body.app-page .mobile-menu-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 640px) {
  html body.app-page .continue-work { flex-direction: column; align-items: stretch; gap: 20px; }
  html body.app-page .continue-work > div { width: 100%; }
  html body.app-page .continue-work > .btn { align-self: flex-start; }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 3px; }
.btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--ss-border-strong); border-radius: 10px; font-size: 14px; font-weight: 650; line-height: 1.35; background: var(--ss-surface); color: var(--ss-ink); box-shadow: none; text-decoration: none; }
.btn:hover, .btn:active { transform: none; box-shadow: none; background: var(--ss-soft); }
.btn.primary { background: var(--ss-yellow); border-color: var(--ss-yellow); color: #111827; box-shadow: none; }
.btn.primary:hover { background: var(--ss-yellow-hover); border-color: var(--ss-yellow-hover); color: #111827; }
.btn.secondary { background: var(--ss-surface); border-color: var(--ss-border-strong); color: var(--ss-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ss-ink); }
.btn.large { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.btn.compact { min-height: 40px; font-size: 13px; padding: 8px 12px; }
.btn:disabled { cursor: not-allowed; opacity: .6; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { min-height: 44px; font-size: 16px; line-height: 1.5; border: 1px solid var(--ss-border-strong); color: var(--ss-ink); background: var(--ss-surface); border-radius: 10px; box-shadow: none; }
input:focus, select:focus, textarea:focus { border-color: var(--ss-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-focus) 15%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ss-navy); }
.ss-surface { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 24px; }
.ss-muted { color: var(--ss-muted); }
.ss-stack { display: grid; gap: 24px; }
.ss-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Workspace adapter. These rules deliberately win over the old page themes. */
html body.app-page, html body.app-page .main, html body.app-page .dashboard-shell .main { background: var(--ss-canvas); color: var(--ss-ink); }
html body.app-page .app-shell { grid-template-columns: var(--sprout-sidebar-width) minmax(0, 1fr); }
html body.app-page .main { padding: 24px clamp(24px, 3vw, 56px) 64px; max-width: 1600px; }
html body.app-page :is(.sidebar, .dashboard-shell .sidebar) { width: var(--sprout-sidebar-width); background: var(--ss-navy); color: #fff; border-right: 1px solid #293243; padding: 24px 16px; gap: 16px; box-shadow: none; }
html body.app-page .sidebar :is(.sidebar-section-label, .local-note, .legal-links) { color: #bec7d3 !important; font-size: 13px; letter-spacing: 0; line-height: 1.5; }
html body.app-page .sidebar-section-label { text-transform: none; padding: 0 12px 4px; font-weight: 500; }
html body.app-page :is(.sidebar::before, .sidebar::after, .sidebar-doodle, .welcome-doodle, .welcome-underline, .build-cta-doodle, .hand-arrow, .dashboard-hero::before, .studio-board, .hero-card::after, .project-card::before, .build-cta::before, .decision-context::before, .intake-layout > .card:first-child::before, .brief.document::before, .access-shell::before, .access-shell::after, .access-card::before) { display: none; }
html body.app-page .sidebar-brand { min-height: 60px; padding: 0 0 16px; }
html body.app-page .sidebar-brand .brand-logo { width: 204px !important; height: auto !important; max-height: none !important; aspect-ratio: 1400 / 340; object-fit: contain !important; padding: 8px 10px; background: #fbfaf5; border-radius: 10px !important; filter: none !important; }
html body.app-page .sidebar :is(.sidebar-primary-nav, .project-nav) { gap: 4px !important; }
html body.app-page .sidebar .nav-item { color: #e4e8ee; min-height: 44px; font-size: 14px; font-weight: 550; line-height: 1.4; padding: 11px 12px; border-radius: 10px; border: 0; transform: none; box-shadow: none; }
html body.app-page .sidebar .nav-item:hover { background: #293243; color: #fff; transform: none; }
html body.app-page .sidebar .nav-item.active { background: #fbfaf5; color: #111827; box-shadow: none; font-weight: 650; }
html body.app-page .sidebar .nav-item::after { display: none; }
html body.app-page .sidebar :is(.sidebar-account-block, .sidebar-project-block) { border-color: #3b4352; }
html body.app-page .sidebar .project-chip { background: #242d3e; border: 1px solid #3b4352; box-shadow: none; padding: 12px; }
html body.app-page .sidebar .project-chip::before { display: none; }
html body.app-page .sidebar :is(.project-chip strong, .project-chip-label) { color: #e4e8ee; font-size: 13px; padding: 0; }
html body.app-page .sidebar-user { border: 1px solid #3b4352; background: #242d3e; min-height: 64px; box-shadow: none; }
html body.app-page .sidebar-user > span { background: #414c60; color: #fff; }
html body.app-page .sidebar-user > b { font-size: 14px; }
html body.app-page .sidebar-user > small { font-size: 13px; color: #bec7d3; }
html body.app-page .sidebar-cloud-note { background: transparent; border: 0; color: #d8dee7; box-shadow: none; padding: 8px 12px; font-size: 13px; min-height: 40px; }
html body.app-page .nav-icon { display: grid; width: 20px; height: 20px; flex-basis: 20px; }
html body.app-page .nav-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
html body.app-page .sidebar :is(button, a):focus-visible { outline: 3px solid var(--ss-yellow); outline-offset: 2px; box-shadow: none; }
html body.app-page .app-utility-bar { height: auto; min-height: 64px; margin: -8px 0 32px; padding: 8px 0 16px; gap: 16px; border-color: var(--ss-border); background: var(--ss-canvas); box-shadow: none; }
html body.app-page .app-utility-search { height: 44px; width: min(480px, 46vw); border-color: var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-muted); box-shadow: none; padding: 0 12px; }
html body.app-page .utility-search-text { display: block; font-size: 14px; }
html body.app-page .app-utility-search kbd { font-size: 13px; background: var(--ss-soft); border-color: var(--ss-border); color: var(--ss-muted); box-shadow: none; }
html body.app-page :is(.utility-icon, .mobile-menu-button) { min-width: 44px; width: 44px; height: 44px; border-color: var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-ink); box-shadow: none; transform: none; }
html body.app-page .profile-chip { min-height: 44px; color: var(--ss-ink); }
html body.app-page .profile-chip > span { background: var(--ss-navy); color: #fff; width: 36px; height: 36px; font-size: 14px; font-weight: 600; }
html body.app-page .profile-chip > b { font-size: 14px; font-weight: 600; }
html body.app-page .cloud-status-chip { font-size: 13px; box-shadow: none; color: var(--ss-muted); border-color: var(--ss-border); background: var(--ss-surface); }
html body.app-page :is(.topbar, .sprout-welcome) { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; margin: 0 0 32px; }
html body.app-page .sprout-welcome { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
html body.app-page :is(.topbar h1, .sprout-welcome h1) { font-family: var(--ss-font); font-size: clamp(28px, 2.5vw, 36px); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
html body.app-page :is(.topbar p, .sprout-welcome p) { font-family: var(--ss-font); font-style: normal; color: var(--ss-muted); font-size: 16px; line-height: 1.55; margin-top: 8px; }
html body.app-page .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ss-muted); }
html body.app-page .status-pill { position: relative; top: auto; right: auto; background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-muted); box-shadow: none; font-size: 13px; white-space: normal; }
html body.app-page :is(.breadcrumbs, .breadcrumbs button) { font-size: 13px; color: var(--ss-muted); }
html body.app-page .breadcrumbs { white-space: normal; flex-wrap: wrap; line-height: 1.6; }
html body.app-page :is(.card, .recent-card, .side-card, .sprout-metric, .stage-card, .count-card, .project-card, .build-cta, .hero-card, .requirement-group, .req-group, .decision-lane, .decision-columns > section, .product-card, .supplier-card, .team-workspace-card, .plan-card) { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 16px; box-shadow: none; color: var(--ss-ink); }
html body.app-page :is(.card, .side-card, .recent-card, .build-cta) { padding: 24px; }
html body.app-page :is(.sprout-metric, .project-card, .product-card, .team-workspace-card):hover { transform: none; box-shadow: none; }
html body.app-page .sprout-dashboard { max-width: 1440px; }
html body.app-page .sprout-dashboard-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
html body.app-page :is(.sprout-main-column, .sprout-side-column) { gap: 24px; min-width: 0; }
html body.app-page .sprout-metrics { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
html body.app-page .sprout-metric { display: block; min-height: 128px; padding: 20px; }
html body.app-page .sprout-metric::after { display: none; }
html body.app-page .sprout-metric .metric-icon { display: none; }
html body.app-page .sprout-metric span { font-size: 14px; font-weight: 500; color: var(--ss-muted); margin: 0 0 8px; }
html body.app-page .sprout-metric strong { font-size: 30px; font-weight: 650; line-height: 1.2; }
html body.app-page .sprout-metric small { display: block; background: transparent; padding: 0; margin-top: 8px; font-size: 13px; font-weight: 400; color: var(--ss-muted); border-radius: 0; white-space: normal; }
html body.app-page .build-cta { min-height: 0; display: block; }
html body.app-page .build-cta h2 { font-size: 24px; font-weight: 650; margin: 4px 0 8px; }
html body.app-page .build-cta p { font-size: 16px; color: var(--ss-muted); max-width: 68ch; }
html body.app-page .build-cta .btn.primary { width: auto; min-width: 0; margin-top: 20px; box-shadow: none; background: var(--ss-yellow); border-color: var(--ss-yellow); color: #111827; }
html body.app-page .cta-benefits { display: none; }
html body.app-page :is(.side-card h2, .recent-head h2) { font-size: 20px; font-weight: 650; }
html body.app-page :is(.side-card-title, .recent-head) { gap: 16px; }
html body.app-page .recent-head { padding-bottom: 20px; }
html body.app-page .recent-head p { margin-top: 4px; font-size: 14px; color: var(--ss-muted); }
html body.app-page :is(.recent-search, .project-search) { display: flex; height: 44px; min-width: 0; border: 1px solid var(--ss-border-strong); background: var(--ss-surface); border-radius: 10px; box-shadow: none; }
html body.app-page :is(.recent-search, .project-search) input { font-size: 14px; min-height: 0; }
html body.app-page .text-link { font-size: 14px; color: var(--ss-ink); font-weight: 600; min-height: 44px; padding: 8px 0; text-underline-offset: 3px; }
html body.app-page .text-link:hover { text-decoration: underline; }
html body.app-page .recent-brief-row { grid-template-columns: minmax(140px, 1fr) auto minmax(84px, .25fr) auto 44px; gap: 16px; padding: 16px 0; cursor: default; border-radius: 0; border-color: var(--ss-border); }
html body.app-page .recent-brief-row:hover { background: var(--ss-soft); transform: none; box-shadow: none; }
html body.app-page .brief-thumb { width: 36px; height: 40px; background: var(--ss-soft); color: var(--ss-muted); border-radius: 8px; }
html body.app-page .brief-thumb svg { fill: none; stroke: currentColor; stroke-width: 1.8; width: 22px; height: 22px; }
html body.app-page .brief-row-name { min-width: 0; }
html body.app-page .brief-row-name strong { font-size: 14px; font-weight: 650; white-space: normal; overflow-wrap: anywhere; }
html body.app-page .brief-row-name span { font-size: 13px; color: var(--ss-muted); white-space: normal; }
html body.app-page :is(.brief-category, .brief-status) { font-size: 13px; font-weight: 500; padding: 5px 8px; background: var(--ss-soft); color: var(--ss-muted); }
html body.app-page .brief-progress { display: grid; min-width: 84px; grid-template-columns: minmax(32px, 1fr) auto; }
html body.app-page .brief-progress strong { font-size: 13px; font-weight: 500; }
html body.app-page :is(.mini-progress, .progress, .usage-track, .checklist-progress) { background: var(--ss-border); }
html body.app-page :is(.mini-progress i, .progress i, .usage-track i, .checklist-progress i) { background: var(--ss-ink); }
html body.app-page .recent-brief-row time { font-size: 13px; color: var(--ss-muted); }
html body.app-page .row-arrow { color: var(--ss-muted); }
html body.app-page :is(.row-delete, .row-menu, .brief-overflow) { min-width: 40px; min-height: 40px; font-size: 18px; color: var(--ss-muted); background: transparent; border: 0; border-radius: 8px; }
html body.app-page .quick-action { min-height: 48px; padding: 12px; border: 1px solid var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-ink); box-shadow: none; transform: none; }
html body.app-page .quick-action b { font-size: 14px; font-weight: 550; }
html body.app-page .quick-action > span { background: transparent; }
html body.app-page .quick-action svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
html body.app-page .quick-action:hover { background: var(--ss-soft); transform: none; }
html body.app-page .tip-card { background: var(--ss-surface); }
html body.app-page .tip-note { background: var(--ss-soft); border-color: var(--ss-border); color: var(--ss-muted); }
html body.app-page :is(.sprout-empty, .project-search-empty, .empty-state) { background: var(--ss-surface); color: var(--ss-muted); border-color: var(--ss-border); border-radius: 12px; }
html body.app-page .sprout-empty { display: block; padding: 24px 0 8px; min-height: 0; text-align: left; }
html body.app-page .sprout-empty > div { width: auto; height: auto; margin: 0; }
html body.app-page .sprout-empty > div:first-child:has(svg) { display: none; }
html body.app-page .sprout-empty h3 { font-size: 20px; }
html body.app-page .sprout-empty p { font-size: 16px; margin: 8px 0 20px; }
html body.app-page .empty-actions { justify-content: flex-start !important; gap: 12px; }
html body.app-page :is(.stage-card, .count-card) { border-top: 1px solid var(--ss-border); padding: 16px; }
html body.app-page .count-card::before { display: none; }
html body.app-page :is(.stage-label, .gate-mini, .count-card > span) { font-size: 13px; color: var(--ss-muted); }
html body.app-page .hero-copy p { font-size: 16px; }
html body.app-page :is(.intake-aside, .editor-aside, .project-meta, .guidance, .source-card, .example-block, .dropzone, .lane-head, .req-group-title, .recommendation, .next-action, .workflow-title, .resolution-card, .cloud-overview article, .privacy-overview article, .privacy-control-grid article, .account-section, .email-pref-toggle, .plan-policy, .billing-status-grid article, .plan-price-row, .plan-price-options > div, .plan-usage-grid article, .product-revision-badge) { background: var(--ss-soft); border-color: var(--ss-border); box-shadow: none; color: var(--ss-ink); }
html body.app-page .dropzone { border: 1px dashed var(--ss-border-strong); border-radius: 12px; padding: 24px; }
html body.app-page .dropzone:hover { background: var(--ss-surface); border-color: var(--ss-focus); }
html body.app-page .dropzone small { font-size: 13px; color: var(--ss-muted); }
html body.app-page .feature-list b { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border-color: var(--ss-border) !important; box-shadow: none; }
html body.app-page :is(.drop-icon, .empty-icon) { background: var(--ss-soft) !important; color: var(--ss-ink) !important; box-shadow: none; border-color: var(--ss-border) !important; }
html body.app-page :is(.state, .badge, .status-pill, .tag) { font-size: 13px; line-height: 1.4; }
html body.app-page .state.confirmed, html body.app-page .brief-status.ready { background: var(--ss-success-bg); color: var(--ss-success); }
html body.app-page :is(.state.partial, .state.inferred) { background: var(--ss-warning-bg); color: var(--ss-warning); }
html body.app-page .state.missing { background: var(--ss-danger-bg); color: var(--ss-danger); }
html body.app-page .state.deferred { background: var(--ss-info-bg); color: var(--ss-info); }
html body.app-page :is(.warning, .gate-panel, .billing-access-banner) { background: var(--ss-warning-bg); border-color: color-mix(in srgb, var(--ss-warning) 28%, var(--ss-border)); color: var(--ss-warning); box-shadow: none; }
html body.app-page :is(.error, .error-inline, .danger-zone) { background: var(--ss-danger-bg); border-color: color-mix(in srgb, var(--ss-danger) 28%, var(--ss-border)); color: var(--ss-danger); }
html body.app-page .success-panel { background: var(--ss-success-bg); color: var(--ss-success); border-color: color-mix(in srgb, var(--ss-success) 28%, var(--ss-border)); }
html body.app-page .notice { background: var(--ss-soft); color: var(--ss-muted); border-color: var(--ss-border); }
html body.app-page :is(.choice.selected, .resolution-card:has(input:checked), .role-choice.selected) { background: var(--ss-soft); border-color: var(--ss-ink); box-shadow: 0 0 0 1px var(--ss-ink); }
html body.app-page :is(.btn, .btn.primary, .btn.secondary, .btn.ghost) { box-shadow: none; transform: none; }
html body.app-page .btn.primary { background: var(--ss-yellow); border-color: var(--ss-yellow); color: #111827; }
html body.app-page .btn.primary:hover { background: var(--ss-yellow-hover); border-color: var(--ss-yellow-hover); color: #111827; }
html body.app-page .btn.secondary { background: var(--ss-surface); border-color: var(--ss-border-strong); color: var(--ss-ink); }
html body.app-page .btn.ghost { background: transparent; border-color: var(--ss-border); color: var(--ss-ink); }
html body.app-page :is(.helper, .small, .modal-copy, .modal-kicker, .cloud-overview small, .privacy-overview small, .privacy-control-grid small, .privacy-list-row small, .privacy-list-row > span, .privacy-meta-inline span, .privacy-table span, .privacy-table b, .privacy-legal-note, .account-section small, .email-pref-toggle small, .supplier-card small, .command-item small, .command-footer, .file-row span, .feature-list small, .analyze-progress small, .loading small) { font-size: 13px; line-height: 1.55; color: var(--ss-muted); }
html body.app-page :is(label, .field-title, .choice strong, .resolution-card b, .decision-row h3, .req-title, .file-row strong) { font-size: 14px; line-height: 1.5; }
html body.app-page :is(.requirement-row p, .decision-row p, .source-card p, .brief-section li, .brief-section dd, .brief-section dt, .document-head p, .guidance > p) { font-size: 14px; line-height: 1.6; color: var(--ss-muted); }
html body.app-page .brief.document { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; box-shadow: var(--ss-shadow); padding: 40px; }
html body.app-page .brief-section h3 { font-size: 20px; }
html body.app-page .document-head h2 { font-size: 28px; }
html body.app-page .score-ring { filter: none; box-shadow: none; }
html body.app-page :is(.score-ring::after, .score-dot::after) { background: var(--ss-surface); border-color: var(--ss-border); }
html body.app-page :is(.score-ring, .score-dot) { border-color: var(--ss-border); background: conic-gradient(var(--ss-ink) calc(var(--score) * 1%), var(--ss-border) 0); }
html body.app-page :is(.brief-toolbar, .brief-scorebar, .filterbar, .sticky-actions) { background: var(--ss-surface); border: 1px solid var(--ss-border); box-shadow: none; }
html body.app-page .segmented { background: var(--ss-soft); border: 1px solid var(--ss-border); box-shadow: none; flex-wrap: wrap; }
html body.app-page .segmented button { min-height: 40px; font-size: 14px; color: var(--ss-muted); }
html body.app-page .segmented button.active { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow); }
html body.app-page :is(.auth-shell, .access-shell, .boot-screen) { background: var(--ss-canvas); }
html body.app-page :is(.auth-card, .access-card) { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 16px; box-shadow: var(--ss-shadow); width: min(560px, 100%); padding: 32px; gap: 24px; }
html body.app-page :is(.auth-card h1, .access-card h1) { font-family: var(--ss-font); font-size: 32px; line-height: 1.2; font-weight: 650; }
html body.app-page .auth-brand :is(p, small) { color: var(--ss-muted); }
html body.app-page .auth-consent { background: var(--ss-soft); border-color: var(--ss-border); }
html body.app-page .auth-consent span { font-size: 13px; color: var(--ss-muted); }
html body.app-page .auth-card .legal-links { font-size: 13px; line-height: 1.6; display: flex; flex-wrap: wrap; color: var(--ss-muted); }
html body.app-page .boot-screen::before { display: none; }
html body.app-page .support-feedback-widget { position: static; grid-column: 2; justify-self: end; margin: 16px 32px 16px auto; padding: 8px 12px; min-height: 40px; border: 1px solid var(--ss-border); border-radius: 10px; background: var(--ss-surface); color: var(--ss-muted); box-shadow: none; font-size: 13px; }
html body.app-page .ux-modal { border-radius: 16px; background: var(--ss-surface); color: var(--ss-ink); border-color: var(--ss-border); }
html body.app-page .ux-modal h2 { font-family: var(--ss-font); font-size: 24px; line-height: 1.25; }
html body.app-page .ux-modal-close { width: 44px; height: 44px; background: var(--ss-soft); color: var(--ss-muted); }
html body.app-page .ux-modal h2 { padding-right: 48px; }
html body.app-page .ux-modal :is(.onboard-choice, .role-choice, .onboard-rules article, .learning-points > div, .first-success-next, .command-item:hover) { background: var(--ss-soft); border-color: var(--ss-border); color: var(--ss-ink); }
html body.app-page :is(.onboard-choice > span, .onboard-rules b, .team-avatar, .team-workspace-icon) { background: var(--ss-soft); color: var(--ss-ink); }
html body.app-page :is(.toast, .tour-coachmark) { background: #1b2232; color: #fff; box-shadow: 0 8px 28px rgb(0 0 0 / 16%); border-color: #3b4352; font-size: 14px; }
html body.app-page .toast-action { min-height: 40px; font-size: 14px; background: #fbfaf5; color: #111827; }

/* The dashboard uses one clear continuation and compact, keyboard-safe rows. */
html body.app-page .continue-work { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
html body.app-page .continue-work > div { min-width: 0; }
html body.app-page .continue-work h2 { font-size: 24px; margin: 8px 0; font-weight: 650; overflow-wrap: anywhere; }
html body.app-page .continue-work p { margin: 0; max-width: 70ch; color: var(--ss-muted); font-size: 16px; }
html body.app-page .continue-work > .btn { flex-shrink: 0; }
html body.app-page .brief-open { appearance: none; display: flex; align-items: center; gap: 12px; padding: 4px; min-width: 0; min-height: 48px; text-align: left; border: 0; border-radius: 8px; color: var(--ss-ink); background: transparent; }
html body.app-page .brief-open:hover strong { text-decoration: underline; text-underline-offset: 3px; }
html body.app-page .brief-thumb { flex: 0 0 36px; }
html body.app-page .brief-row-menu { position: relative; align-self: center; }
/* Keep an expanded action menu above the following row's stacking context. */
html body.app-page .recent-brief-row:has(.brief-row-menu[open]) { position: relative; z-index: 40; content-visibility: visible; }
html body.app-page .brief-row-menu > summary { display: grid; place-items: center; list-style: none; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; color: var(--ss-muted); }
html body.app-page .brief-row-menu > summary::-webkit-details-marker { display: none; }
html body.app-page .brief-row-menu > summary:hover { background: var(--ss-soft); }
html body.app-page .brief-row-menu > summary:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; }
html body.app-page .brief-row-menu[open] > div { position: absolute; z-index: 30; top: 48px; right: 0; min-width: 180px; padding: 8px; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 12px; box-shadow: var(--shadow-float); }
html body.app-page .brief-row-menu button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; background: transparent; border: 0; border-radius: 8px; color: var(--ss-danger); font-size: 14px; }
html body.app-page .brief-row-menu button:hover { background: var(--ss-danger-bg); }
html body.app-page :is(.dashboard-secondary, .library-tools) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 24px 0 0; }
html body.app-page .dashboard-secondary :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ss-muted); font-size: 14px; text-underline-offset: 3px; }
html body.app-page .project-search-empty { padding: 24px 8px; text-align: center; }
html body.app-page .project-search-empty :is(strong, span) { color: var(--ss-muted); font-size: 14px; }
html body.app-page .auth-brand strong { font-size: 20px; }
html body.app-page .auth-brand span { font-size: 13px; }
html body.app-page :is(.auth-copy p, .auth-form label, .auth-foot, .auth-tabs button, .auth-forgot, .dev-link-note) { font-size: 14px; color: var(--ss-muted); }
html body.app-page .auth-tabs { background: var(--ss-soft); }
html body.app-page .auth-tabs button { min-height: 44px; }
html body.app-page .auth-tabs button.active { color: var(--ss-ink); background: var(--ss-surface); }
html body.app-page .password-reveal { justify-self: start; margin-top: 4px; }
html body.app-page :is(.account-summary, .cloud-settings, .app-announcement, .preference-cloud-card) { background: var(--ss-soft); border-color: var(--ss-border); color: var(--ss-ink); }
html body.app-page .account-summary > span { background: var(--ss-navy); color: #fff; }
html body.app-page :is(.account-summary small, .provider-badges i, .session-row small, .session-row > span, .cloud-settings small, .cloud-row small, .privacy-subnav button, .email-stat span, .email-status, .product-summary-grid small, .product-card small) { font-size: 13px; line-height: 1.5; }
html body.app-page :is(.session-row strong, .account-summary strong, .account-section h3, .account-section label, .cloud-row strong, .cloud-section-head strong) { font-size: 14px; line-height: 1.5; }
html body.app-page :is(table, .privacy-table) { font-size: 14px; }
html body.app-page .provider-badges i { background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-muted); }
html[data-theme="dark"] body.app-page :is(.card, .topbar, .recent-card, .side-card, .build-cta, .stage-card, .count-card, .filterbar, .brief.document, .decision-intro, .access-card, .source-card, .guidance, .choice, .resolution-card) { background: var(--ss-surface) !important; border-color: var(--ss-border) !important; color: var(--ss-ink); }

/* Route-based account areas. A settings page has no modal positioning or trap. */
.settings-page { width: 100%; max-width: 1280px; margin: 0 auto; }
.settings-header { margin-bottom: 32px; }
.settings-header h1 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 8px; font-weight: 650; }
.settings-header p { color: var(--ss-muted); font-size: 16px; max-width: 68ch; }
.settings-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 32px; align-items: start; }
.settings-nav { display: grid; gap: 4px; position: sticky; top: 24px; }
.settings-nav :is(a, button) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; text-decoration: none; color: var(--ss-muted); border: 0; border-radius: 10px; background: transparent; font-size: 14px; line-height: 1.5; font-weight: 550; text-align: left; }
.settings-nav :is(a, button):hover { background: var(--ss-soft); color: var(--ss-ink); }
.settings-nav :is([aria-current="page"], .active) { background: var(--ss-surface); color: var(--ss-ink); box-shadow: inset 0 0 0 1px var(--ss-border); }
.settings-content { min-width: 0; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 16px; padding: 32px; font-size: 16px; }
.settings-content > :is(.ux-modal, .modal-content) { position: static; width: 100%; max-width: none; max-height: none; min-height: 0; overflow: visible; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.settings-content :is(h1, h2) { font-family: var(--ss-font); font-size: 28px; font-weight: 650; padding-right: 0; margin-top: 0; }
.settings-content h3 { font-size: 20px; font-weight: 600; }
.settings-content .modal-kicker { font-size: 13px; color: var(--ss-muted); }
.settings-content .modal-copy { font-size: 16px; max-width: 72ch; margin: 8px 0 24px; }
.settings-content :is(.ux-modal-close, [data-close-dialog]) { display: none; }
.settings-content .modal-actions { position: static; margin: 24px 0 0; padding: 24px 0 0; background: transparent; border-top: 1px solid var(--ss-border); justify-content: flex-start; }
.settings-content .modal-form { margin-top: 24px; gap: 24px; }
.settings-content :is(.account-grid, .account-actions-grid) { gap: 16px; }
.settings-content :is(.billing-status-grid, .plan-usage-grid, .cloud-overview, .privacy-overview) { gap: 16px; }
.settings-content :is(.plan-grid, .plan-price-options) { gap: 16px; }
.settings-content .plan-card { padding: 24px; gap: 16px; }
.settings-content .plan-card.current { outline: 2px solid var(--ss-ink); outline-offset: 0; }
.settings-content :is(.billing-title-row, .privacy-title-row) { flex-wrap: wrap; }
.settings-content :is(.account-billing-card, .account-security-card, .account-privacy-card, .account-cloud-card, .account-email-card, .account-support-card) { border-radius: 12px; background: var(--ss-soft); padding: 16px; box-shadow: none; transform: none; }
.settings-content :is(.billing-orb, .privacy-orb, .security-orb, .terms-orb, .email-orb, .cloud-orb) { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border-color: var(--ss-border) !important; }
.settings-content :is(.privacy-section, .account-section, .cloud-section, .privacy-list-row, .privacy-control-grid, .privacy-meta-inline, .privacy-meta-grid, .privacy-table, .security-event, .email-pref-toggle) { border-color: var(--ss-border); }
.settings-content :is(.privacy-section, .privacy-meta-grid, .privacy-table) { background: var(--ss-surface); }
.settings-content :is(input, select, textarea) { max-width: 100%; }
.settings-content :is(.cloud-list, .security-events, .billing-history, .privacy-list) { overflow-wrap: anywhere; }

@media (max-width: 1440px) {
  html body.app-page .sprout-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  html body.app-page .sprout-side-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.app-page .recent-brief-row { grid-template-columns: minmax(140px, 1fr) auto 100px auto 44px; }
}
@media (max-width: 1100px) {
  html body.app-page .sprout-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.app-page .recent-brief-row { grid-template-columns: minmax(140px, 1fr) auto 84px 44px; }
  html body.app-page .recent-brief-row :is(time, .row-arrow) { display: none; }
  html body.app-page .brief-category { display: inline-flex; }
  html body.app-page .brief-status { display: inline-flex; }
  .settings-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .settings-content { padding: 24px; }
}
@media (max-width: 900px) {
  html body.app-page .app-shell { display: block; }
  html body.app-page :is(.main, .dashboard-shell .main) { padding: 8px 24px 48px !important; }
  html body.app-page :is(.sidebar, .dashboard-shell .sidebar) { width: min(288px, calc(100vw - 32px)) !important; padding: 24px 16px; }
  html body.app-page .sidebar-brand .brand-logo { width: 204px !important; max-height: none !important; }
  html body.app-page .sidebar .nav-item span:last-child { display: block; }
  html body.app-page .sidebar-close { width: 44px; height: 44px; flex-shrink: 0; background: transparent; }
  html body.app-page .sidebar-topline { gap: 8px; align-items: center; }
  html body.app-page .sidebar-brand { min-height: 44px; padding-bottom: 8px; }
  html body.app-page .app-utility-bar { margin: -8px -24px 32px; padding: 12px 24px; min-height: 72px; height: auto; gap: 12px; background: var(--ss-canvas); backdrop-filter: none; }
  html body.app-page .app-utility-search { flex: 1; width: auto; }
  html body.app-page .utility-actions { gap: 8px; }
  html body.app-page .cloud-status-chip { display: none; }
  html body.app-page .support-feedback-widget { display: block; position: static; margin: 0 24px 24px auto; }
  .settings-nav { top: 88px; }
}
@media (max-width: 680px) {
  html body.app-page :is(.main, .dashboard-shell .main) { padding: 8px 16px 40px !important; }
  html body.app-page .app-utility-bar { margin: -8px -16px 24px; padding: 12px 16px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  html body.app-page .app-utility-search { width: 100%; min-width: 0; }
  html body.app-page .app-utility-search kbd { display: none; }
  html body.app-page .utility-search-text { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html body.app-page .utility-actions { gap: 4px; }
  html body.app-page .utility-actions > .utility-icon { display: none; }
  html body.app-page .profile-chip { grid-template-columns: 36px; padding: 4px; }
  html body.app-page .profile-chip :is(b, i) { display: none; }
  html body.app-page .sprout-welcome { display: block; margin-bottom: 24px; }
  html body.app-page .sprout-welcome > .btn { margin-top: 20px; }
  html body.app-page .sprout-welcome > .status-pill { margin-top: 16px; display: inline-flex; }
  html body.app-page :is(.topbar h1, .sprout-welcome h1) { font-size: 28px; }
  html body.app-page .sprout-dashboard-grid { gap: 16px; }
  html body.app-page :is(.sprout-main-column, .sprout-side-column) { gap: 16px; }
  html body.app-page .sprout-side-column { grid-template-columns: minmax(0, 1fr); }
  html body.app-page .sprout-metrics { gap: 12px; grid-template-columns: 1fr; }
  html body.app-page .sprout-metric { min-height: 0; padding: 16px; }
  html body.app-page .sprout-metric strong { font-size: 28px; }
  html body.app-page :is(.card, .side-card, .recent-card, .build-cta) { padding: 20px; }
  html body.app-page .build-cta h2 { font-size: 22px; }
  html body.app-page .build-cta .btn.primary { width: 100%; }
  html body.app-page .recent-head { display: grid; }
  html body.app-page .recent-tools { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; }
  html body.app-page .recent-search { display: flex; flex: 1 1 160px; }
  html body.app-page .recent-brief-row { grid-template-columns: minmax(0, 1fr) 100px 44px; row-gap: 12px; padding: 16px 0; align-items: center; }
  html body.app-page .brief-thumb { display: none; }
  html body.app-page .brief-open { grid-column: 1 / 3; grid-row: 1; }
  html body.app-page .recent-brief-row :is(.row-delete, .row-menu, .brief-overflow, .brief-row-menu) { grid-column: 3; grid-row: 1; }
  html body.app-page .brief-status { display: inline-flex; grid-column: 1; grid-row: 2; justify-self: start; }
  html body.app-page .brief-progress { display: grid; grid-column: 2 / 4; grid-row: 2; min-width: 88px; }
  html body.app-page .brief-category { display: inline-flex; grid-column: 1; grid-row: 2; justify-self: start; }
  html body.app-page .recent-brief-row time { display: block; grid-column: 1 / -1; grid-row: 3; }
  html body.app-page .brief.document { padding: 24px 16px; }
  html body.app-page :is(.auth-shell, .access-shell) { padding: 24px 16px; }
  html body.app-page :is(.auth-card, .access-card) { padding: 24px; }
  html body.app-page :is(.auth-card h1, .access-card h1) { font-size: 28px; }
  html body.app-page .resolution-cards { grid-template-columns: minmax(0, 1fr); }
  html body.app-page :is(.privacy-list-row, .privacy-table article, .privacy-table article:has(> span:nth-child(2):last-child), .terms-rule-table article) { grid-template-columns: minmax(0, 1fr) !important; }
  html body.app-page :is(.privacy-control-grid, .privacy-meta-grid, .privacy-meta-inline, .privacy-overview, .cloud-overview, .billing-status-grid, .plan-usage-grid) { grid-template-columns: minmax(0, 1fr); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .settings-nav { display: flex; position: static; gap: 4px; overflow-x: auto; padding: 2px 2px 8px; border-bottom: 1px solid var(--ss-border); }
  .settings-nav :is(a, button) { flex: 0 0 auto; white-space: nowrap; }
  .settings-content { padding: 24px 20px; }
  .settings-content :is(h1, h2) { font-size: 24px; }
  .settings-content .modal-form, .settings-content .plan-grid, .settings-content .plan-price-options { grid-template-columns: minmax(0, 1fr); }
  .settings-content .modal-actions > .btn { flex: 1 1 160px; }
}
@media (max-width: 359px) {
  html body.app-page .sprout-metrics { grid-template-columns: minmax(0, 1fr); }
  html body.app-page .sprout-metric { min-height: 0; }
  html body.app-page :is(.card, .side-card, .recent-card, .build-cta) { padding: 16px; }
  html body.app-page .app-utility-bar { gap: 8px; }
  .settings-content { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .btn, .ss-surface, .settings-content { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight !important; }
}
@media print {
  html body.app-page { background: #fff; color: #111827; }
  html body.app-page :is(.support-feedback-widget, .app-utility-bar, .settings-nav) { display: none !important; }
  html body.app-page .main { padding: 0 !important; max-width: none; }
  html body.app-page .brief.document { padding: 0; background: #fff; color: #111827; border: 0; box-shadow: none; }
}

/* Final integration: neutral page headings and shared handoff surfaces. */
html body.app-page .topbar::before { display: none; }
html body.app-page :is(.sidebar, .dashboard-shell .sidebar) { background-image: none !important; }
html body.app-page :is(.recent-search, .project-search) input { border: 0; background: transparent; width: 100%; padding: 8px 12px; box-shadow: none; }
body:is(.supplier-portal-page, .shared-brief-page) { background: var(--ss-canvas); color: var(--ss-ink); }
body:is(.supplier-portal-page, .shared-brief-page) :is(label, .small, small) { font-size: 14px; line-height: 1.55; }
body:is(.supplier-portal-page, .shared-brief-page) .btn { box-shadow: none; transform: none; }
body:is(.supplier-portal-page, .shared-brief-page) .btn.primary { background: var(--ss-yellow); color: #111827; border-color: var(--ss-yellow); box-shadow: none; }
body.supplier-portal-page :is(.portal-card, .portal-meta, .portal-success) { box-shadow: none; border-color: var(--ss-border); border-radius: var(--ss-radius); }
body.supplier-portal-page .portal-meta { background: var(--ss-soft); }
body.supplier-portal-page .portal-success { background: var(--ss-success-bg); }
body.supplier-portal-page .supplier-portal-header { background: var(--ss-canvas); }
body.supplier-portal-page .supplier-portal-header span { font-size: 14px; font-weight: 550; }
body.shared-brief-page .shared-brief-text { background: var(--ss-soft); }
@media(max-width:640px) {
 html body.app-page .continue-work { align-items: stretch; gap: 20px; }
 body.supplier-portal-page .supplier-portal-header { flex-wrap: wrap; gap: 8px 16px; }
}

html body.app-page .rfq-requirement :is(small, em) { font-size: 14px; line-height: 1.55; }
html body.app-page .rfq-requirement strong { font-size: 16px; line-height: 1.45; }