/* Signal Analyst app components (PRD 0054, task 2.0).
   Link AFTER the token entry point:
     <link rel="stylesheet" href="/design-system/styles.css">
     <link rel="stylesheet" href="/design-system/app.css">
   Ported from design/self-serve-onboarding-2026-09/hifi/assets/hifi.css: only the components the
   public pages and the setup/sign-in flow need. Every class is prefixed "sa-" so pages can adopt
   it without colliding with their existing page-local styles. Breakpoint: 760px. */

/* ---------- foundations ---------- */
.sa-page { margin: 0; min-height: 100vh; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
.sa-page *, .sa-page *::before, .sa-page *::after { box-sizing: border-box; }
.sa-page :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.sa-wrap { width: min(calc(100% - var(--gutter) - var(--gutter)), var(--container-app)); margin: 0 auto; }
.sa-narrow { max-width: 640px; }
.sa-stack { display: grid; gap: var(--space-4); }
.sa-stack-lg { display: grid; gap: var(--space-8); }
.sa-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(28px, 5vw, var(--text-display-md)); line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--text-heading); text-wrap: balance; }
.sa-lede { margin: 0; max-width: 60ch; font-size: var(--text-lead); line-height: var(--lh-relaxed); color: var(--text-body); }
.sa-muted { color: var(--text-muted); }

/* Skip link: first focusable element on every page (WCAG 2.4.1). */
.sa-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink-900); color: var(--white); font-weight: var(--fw-semibold); text-decoration: none; }
.sa-skip:focus { top: 12px; }

/* ---------- buttons and links (one .sa-btn-primary per view) ---------- */
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--radius-pill); font: var(--fw-semibold) 15px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.sa-btn-primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-button); }
.sa-btn-primary:hover { background: var(--green-600); }
.sa-btn-secondary { background: transparent; color: var(--accent); border-color: var(--border-hairline); }
.sa-btn-secondary:hover { border-color: var(--accent); }
.sa-btn-danger { background: var(--status-error); color: var(--white); }
/* Google sign-in, dark variant (Google branding allows it); reads as the primary action on auth pages. */
.sa-btn-google { width: 100%; background: var(--ink-900); color: var(--white); border-color: var(--ink-900); box-shadow: var(--shadow-button); }
.sa-btn-google:hover { background: #000; }
.sa-btn-google .sa-g { width: 18px; height: 18px; flex: none; }
.sa-btn-block { width: 100%; }
/* Only native disabled is styled: it blocks mouse and keyboard activation. Show the reason as visible
   text next to the button (hint text), rather than using aria-disabled, which CSS cannot enforce. */
.sa-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sa-link { color: var(--accent); font-weight: var(--fw-semibold); text-decoration: none; }
.sa-link:hover { text-decoration: underline; }
/* Standalone links get a >= 24px target (WCAG 2.5.8). :where() keeps specificity at zero so any
   component rule (e.g. 44px nav links) wins. */
:where(.sa-page) :where(div, section, header, footer, nav, li, td, dd, form, span, label, p) > a:where(:not(.sa-btn, .sa-skip, .sa-logo)) { display: inline-flex; align-items: center; min-height: 24px; }
@media (hover: hover) { .sa-btn { transition: transform var(--dur-hover) var(--ease-signal), background var(--dur-hover); } .sa-btn-primary:hover, .sa-btn-google:hover { transform: translateY(var(--lift-button)); } }

/* ---------- forms: labels above, errors next to the field ---------- */
.sa-field { display: grid; gap: 6px; }
.sa-label { font-weight: var(--fw-semibold); color: var(--text-heading); font-size: 14.5px; }
.sa-hint { font-size: var(--text-caption); color: var(--text-muted); }
.sa-input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid #cfd8d2; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-heading); font: 400 16px var(--font-body); }
.sa-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--green-050); }
.sa-input[aria-invalid="true"] { border-color: var(--status-error); }
.sa-field-error { display: flex; gap: 6px; color: var(--status-error); font-size: 13.5px; font-weight: var(--fw-medium); }
.sa-field-error::before { content: "⚠"; }
.sa-choice { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 12px 14px; border: 1.5px solid #cfd8d2; border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer; }
.sa-choice input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.sa-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--green-050); }
.sa-or { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.sa-or::before, .sa-or::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }

/* ---------- page-level alert: only when there's something to say (role="alert" for errors) ---------- */
.sa-alert { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid; border-radius: var(--radius-md); font-size: var(--text-body-sm); }
.sa-alert strong { color: var(--text-heading); }
.sa-alert-error { background: var(--status-error-bg); border-color: rgba(180, 64, 44, .3); }
.sa-alert-warn { background: var(--status-warn-bg); border-color: rgba(176, 120, 20, .3); }
.sa-alert-ok { background: var(--status-success-bg); border-color: var(--border-hairline); }
.sa-alert-info { background: var(--surface-card); border-color: var(--border-hairline); }

/* ---------- badges ---------- */
.sa-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: var(--radius-pill); font: var(--fw-semibold) 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sa-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sa-badge-ok { color: var(--status-success); background: var(--status-success-bg); }
.sa-badge-active { color: var(--status-active); background: var(--status-active-bg); }
.sa-badge-warn { color: var(--status-warn); background: var(--status-warn-bg); }
.sa-badge-error { color: var(--status-error); background: var(--status-error-bg); }
.sa-badge-neutral { color: var(--status-neutral); background: var(--status-neutral-bg); }

/* ---------- copy field, checklist, progress ---------- */
.sa-copyfield { display: flex; gap: 8px; align-items: stretch; }
.sa-copyfield code { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 14px; border: 1.5px solid #cfd8d2; border-radius: var(--radius-sm); background: #f4f6f3; color: var(--text-heading); font: 500 14px var(--font-mono); white-space: nowrap; overflow-x: auto; }
.sa-checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.sa-check { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border-hairline); }
.sa-check:first-child { border-top: 0; }
.sa-tick { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #c6cfc9; border-radius: 50%; font-size: 13px; font-weight: var(--fw-bold); color: transparent; }
.sa-tick-done { background: var(--accent); border-color: var(--accent); color: var(--white); }
.sa-tick-busy { background: var(--status-active-bg); border-color: var(--lime-500); color: var(--lime-ink); }
.sa-tick-failed { border-color: var(--status-error); color: var(--status-error); }
.sa-progress { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--status-neutral-bg); }
.sa-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---------- logo ---------- */
.sa-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text-heading); font: var(--fw-extrabold) 19px/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.sa-logo svg { width: 26px; height: 26px; color: var(--accent); }

/* ---------- disclosure menus and sheets (never role="menu") ---------- */
.sa-disclosure { position: relative; }
.sa-menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-heading); font: var(--fw-semibold) 14.5px var(--font-body); cursor: pointer; }
.sa-panel { position: absolute; z-index: 40; min-width: 240px; padding: 8px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-card-hover); }
.sa-panel a, .sa-panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text-heading); font: var(--fw-medium) 15px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.sa-panel a:hover { background: var(--green-050); }
.sa-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-content: start; gap: 4px; padding: 16px; background: var(--surface-card); }
.sa-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); }
.sa-sheet a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: 10px; color: var(--text-heading); font-weight: var(--fw-medium); text-decoration: none; }
.sa-sheet a[aria-current="page"] { background: var(--green-050); font-weight: var(--fw-bold); box-shadow: inset 3px 0 0 var(--accent); }
.sa-page [hidden] { display: none !important; }

/* ---------- PUBLIC shell ---------- */
.sa-pub-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border-hairline); background: rgba(239, 239, 239, .92); backdrop-filter: blur(8px); }
.sa-pub-header .sa-wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.sa-pub-nav { display: flex; flex: 1; gap: 4px; }
.sa-pub-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--text-heading); font-weight: var(--fw-medium); text-decoration: none; }
.sa-pub-nav a[aria-current="page"] { font-weight: var(--fw-bold); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
/* Phone menu: the header nav collapses into a no-script disclosure at 760px and below. */
.sa-pub-menu { display: none; position: relative; }
.sa-pub-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; font-weight: var(--fw-medium); color: var(--text-heading); }
.sa-pub-menu summary::-webkit-details-marker { display: none; }
.sa-pub-menu summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sa-pub-menu nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; display: grid; padding: 6px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: 14px; box-shadow: 0 12px 32px rgba(16,28,38,.12); }
.sa-pub-menu nav a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--text-heading); text-decoration: none; }
.sa-pub-menu nav a:hover { background: var(--surface-page); }
.sa-pub-actions { display: flex; align-items: center; gap: 8px; }
.sa-pub-menu { display: none; }
.sa-pub-footer { margin-top: var(--space-16); padding: var(--space-10) 0; border-top: 1px solid var(--border-hairline); font-size: var(--text-body-sm); }
.sa-pub-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sa-pub-footer a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-body); text-decoration: none; }

/* ---------- SETUP shell (enclosed flow) ---------- */
.sa-setup-header { border-bottom: 1px solid var(--border-hairline); background: var(--surface-card); }
.sa-setup-header .sa-wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.sa-who { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--text-muted); font-size: 14px; }
.sa-who .sa-link { display: inline-flex; align-items: center; min-height: 44px; }
.sa-stepper { display: flex; flex: 1; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sa-stepper li { display: flex; align-items: center; gap: 8px; color: var(--ink-400); font-size: 14px; }
.sa-stepper li + li::before { content: ""; width: 28px; height: 2px; margin-right: 6px; background: #d5dcd7; }
.sa-step-n { width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid #c6cfc9; border-radius: 50%; font: var(--fw-bold) 12px var(--font-mono); }
.sa-stepper a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-weight: var(--fw-semibold); text-decoration: none; }
.sa-stepper li > span { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sa-stepper .sa-step-done .sa-step-n { background: var(--accent); border-color: var(--accent); color: var(--white); }
.sa-stepper [aria-current="step"] { color: var(--text-heading); font-weight: var(--fw-bold); }
.sa-stepper [aria-current="step"] .sa-step-n { background: var(--lime-500); border-color: var(--lime-500); color: var(--lime-ink); }
.sa-setup-header .sa-stepper-mobile { display: none; gap: 8px; padding: 10px 0 12px; }
.sa-stepper-mobile p { margin: 0; font-size: 14px; }
.sa-setup-header #account-disclosure { display: none; }
.sa-setup-header #account-panel-email { display: block; padding: 8px 12px; overflow-wrap: anywhere; }
.sa-setup-header .sa-who { position: relative; }
.sa-stepper-mobile .sa-progress { height: 6px; }
.sa-setup-main { padding: var(--space-12) 0 var(--space-16); }
.sa-setup-footer { padding: 18px 0; border-top: 1px solid var(--border-hairline); font-size: 14px; }
.sa-setup-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.sa-setup-footer a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-body); text-decoration: none; }
.sa-setup-footer .sa-addr { margin-left: auto; color: var(--text-muted); }

/* ---------- OPERATIONS shell (internal operator pages) ---------- */
.sa-ops-header { border-bottom: 1px solid var(--border-hairline); background: var(--surface-card); }
.sa-ops-header .sa-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 68px; padding-block: var(--space-2); }
.sa-ops-tag { font: var(--fw-semibold) var(--text-caption)/1 var(--font-mono); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--accent); }
.sa-ops-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
.sa-ops-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-radius: 10px; color: var(--text-heading); font-weight: var(--fw-medium); text-decoration: none; }
.sa-ops-nav a:hover { background: var(--green-050); }
.sa-ops-nav a[aria-current] { font-weight: var(--fw-bold); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
.sa-ops-main { padding-block: var(--space-10) var(--space-16); min-width: 0; }
.sa-eyebrow { margin: 0; font: var(--fw-semibold) var(--text-eyebrow)/1.2 var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.sa-card { padding: var(--space-6); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-card); min-width: 0; }
/* Wide tables scroll inside their own container, never the page. */
.sa-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-card); }
.sa-table { width: 100%; border-collapse: collapse; }
.sa-table th, .sa-table td { padding: var(--space-4); border-bottom: 1px solid var(--border-hairline); text-align: left; vertical-align: top; }
.sa-table th { font: var(--fw-semibold) 11px var(--font-mono); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--text-muted); }

/* ---------- short message pages (Slack flow): heading, explanation, next steps; no inline styles ---------- */
.sa-notice { display: grid; gap: var(--space-4); max-width: 640px; padding-block: var(--space-16); }
.sa-notice fieldset { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.sa-notice legend { margin-bottom: var(--space-2); padding: 0; font-weight: var(--fw-semibold); color: var(--text-heading); }
.sa-notice code { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .92em; }
.sa-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- narrow screens: nothing needed for the task is hidden ---------- */
@media (max-width: 760px) {
  .sa-wrap { width: calc(100% - 32px); }
  .sa-pub-nav { display: none; }
  .sa-pub-menu { display: inline-flex; }
  .sa-pub-header .sa-wrap { gap: 8px; min-height: 64px; }
  .sa-pub-footer nav, .sa-setup-footer nav { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sa-pub-footer a, .sa-setup-footer a { min-height: 44px; }
  .sa-setup-footer .sa-addr { margin-left: 0; }
  .sa-stepper { display: none; }
  .sa-setup-header .sa-stepper-mobile { display: grid; }
  .sa-who .sa-who-email { display: none; }
  .sa-setup-header #logout-button { display: none; }
  .sa-setup-header #account-disclosure { display: inline-flex; }
  .sa-setup-main { padding: var(--space-8) 0 var(--space-10); }
  .sa-ops-nav { flex-basis: 100%; margin-left: calc(-1 * var(--space-3)); }
  .sa-ops-main { padding-block: var(--space-8) var(--space-10); }
  .sa-card { padding: var(--space-4); }
  .sa-copyfield { flex-direction: column; }
  .sa-copyfield .sa-btn { width: 100%; }
  .sa-notice { padding-block: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) { .sa-btn { transition: none; } }