/*! ===========================================================================
 *  Forge UI System — forge.css
 *  One stylesheet for the whole Forge (by Hepha) frontend.
 *
 *  Layers (this file, in order): tokens → base → components → utilities.
 *  Tokens mirror the canonical "Forge by Hepha" system
 *  (rfq_demo/src/styles/tokens.css), extended with a TWO-FOLD BRAND:
 *    • PRIMARY = Hepha (orange #f5a623, CONSTANT) — the logo + the one primary
 *      call-to-action per view. The brand "pop", used sparingly.
 *    • ACCENT  = the CUSTOMER color (per-tenant; Teldor = indigo #3b3f8c) — the
 *      broad interactive accent (links, active/selected/focus, tabs, progress,
 *      info, provenance highlight, customer chrome).
 *  See the BRAND block in TOKENS and docs/ui-ux-system-plan.md §3.2.
 *
 *  CONVENTION — read before adding CSS:
 *   • Author against SEMANTIC or COMPONENT tokens only. Never a raw value
 *     (hex/px) or a --c-* / --hepha-* / --teldor-* primitive in a component rule.
 *   • Components use BEM: .block, .block__element, .block--modifier.
 *   • State comes from attributes (aria-*, data-*), not magic classes.
 *   • Utilities are a thin escape hatch for frequently re-tuned props only.
 *   • Cascade @layers keep specificity predictable (utilities > components >
 *     base). Nothing here needs !important except .u-hidden.
 * ========================================================================= */

/* ===========================================================================
   FONTS — self-hosted (CSP-clean). Google Fonts is blocked by the app CSP
   (style-src/script-src 'self'), so the intended type is shipped as local
   woff2 in assets/fonts/. font-display:swap → text paints immediately in the
   system fallback (the --font-* stacks), then swaps to Inter / JetBrains Mono.
   These are intentionally OUTSIDE @layer (@font-face is not a layered rule).
   ========================================================================= */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }

@layer tokens, base, components, utilities;

/* ===========================================================================
   TOKENS
   ========================================================================= */
@layer tokens {
  :root {
    /* ── Primitives — raw values; NEVER referenced directly in components ── */
    --c-white:    #ffffff;
    --c-canvas:   #fafafa;
    --c-ink-900:  #0b0b0f;
    --c-ink-500:  #5a5a66;
    --c-slate-600:#475569;
    --c-hairline: #e8e8ec;
    --hepha-orange:  #f5a623;   /* Hepha brand — CONSTANT across all customers */
    --teldor-indigo: #3b3f8c;   /* Teldor — the default customer accent        */
    --c-red-600:  #c23b3b;      /* severity: high   */
    --c-amber-600:#d48a2b;      /* severity: medium */
    --c-olive-600:#7a8a4d;      /* severity: low    */
    --c-green-700:#2e7d5b;      /* success */
    --c-amber-700:#d97706;      /* warning */
    --c-green-600:#2f9e44;      /* status green */
    --c-red-700:  #b91c1c;      /* error  */

    /* ── Neutrals (semantic) ── */
    --color-canvas:         var(--c-canvas);   /* app background        */
    --color-surface:        var(--c-white);    /* cards, panels, modals */
    --color-text-primary:   var(--c-ink-900);
    --color-text-secondary: var(--c-ink-500);
    --color-text-mono:      var(--c-slate-600);
    --color-hairline:       var(--c-hairline);
    --color-border:         var(--c-hairline);

    /* ══════════════════════════════════════════════════════════════════════
       TWO-FOLD BRAND  (docs/ui-ux-system-plan.md §3.2)
         PRIMARY = Hepha (constant): logo + the ONE primary CTA per view.
         ACCENT  = the CUSTOMER color (per-tenant): the broad interactive accent.
       Neutrals stay dominant (~60–70%). Status colors are independent of brand.
       Every shade derives from ONE hex via color-mix(), so a customer sets just
       --color-accent (+ --color-on-accent). Contrast: text on PRIMARY is dark
       (white fails WCAG on orange); text on ACCENT is white.
       ══════════════════════════════════════════════════════════════════════ */

    /* PRIMARY — Hepha (constant) */
    --color-primary:        var(--hepha-orange);
    --color-primary-hover:  color-mix(in srgb, var(--color-primary) 90%, black);
    --color-primary-soft:   color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-tint:   color-mix(in srgb, var(--color-primary) 20%, transparent);
    --color-primary-border: color-mix(in srgb, var(--color-primary) 55%, transparent);
    --color-on-primary:     var(--c-ink-900);        /* dark text on orange (a11y) */
    --color-brand:          var(--color-primary);    /* alias for logo contexts    */

    /* ACCENT — the customer color. PER TENANT, override ONLY these two: */
    --color-accent:         var(--teldor-indigo);
    --color-on-accent:      var(--c-white);
    /* …everything below derives automatically: */
    --color-accent-hover:   color-mix(in srgb, var(--color-accent) 88%, black);
    --color-accent-soft:    color-mix(in srgb, var(--color-accent) 8%, transparent);
    --color-accent-tint:    color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-accent-border:  color-mix(in srgb, var(--color-accent) 50%, transparent);

    /* SIGNAL — alias used by demo-derived components; ALWAYS = customer ACCENT,
       so those components re-flavor per tenant with zero changes. */
    --color-signal:         var(--color-accent);
    --color-signal-hover:   var(--color-accent-hover);
    --color-signal-soft:    var(--color-accent-soft);
    --color-signal-tint:    var(--color-accent-tint);
    --color-signal-border:  var(--color-accent-border);
    --color-on-signal:      var(--color-on-accent);

    /* ── Status / feedback — INDEPENDENT of brand. Always pair with an icon +
          text (never color alone, WCAG 1.4.1). Hepha orange is distinguished
          from warning amber by hue + the filled-button/logo context + icon. ── */
    --color-success: var(--c-green-700);
    --color-warning: var(--c-amber-700);
    --color-error:   var(--c-red-700);
    --color-info:    var(--color-accent);
    --color-feedback-success: var(--color-success);
    --color-feedback-warning: var(--color-warning);
    --color-feedback-error:   var(--color-error);
    --color-feedback-info:    var(--color-info);
    --color-success-soft: color-mix(in srgb, var(--color-success) 10%, transparent);
    --color-warning-soft: color-mix(in srgb, var(--color-warning) 10%, transparent);
    --color-error-soft:   color-mix(in srgb, var(--color-error) 10%, transparent);
    /* demo-name aliases (forward-compat for Phase-2 component port) */
    --color-status-amber: var(--color-warning);
    --color-status-green: var(--color-success);
    --color-status-red:   var(--color-error);
    --color-mono:         var(--color-text-mono);

    /* ── Severity (data classification, e.g. extraction confidence) ── */
    --color-severity-high:   var(--c-red-600);
    --color-severity-medium: var(--c-amber-600);
    --color-severity-low:    var(--c-olive-600);
    --color-severity-high-soft:   color-mix(in srgb, var(--c-red-600) 8%, transparent);
    --color-severity-medium-soft: color-mix(in srgb, var(--c-amber-600) 8%, transparent);
    --color-severity-low-soft:    color-mix(in srgb, var(--c-olive-600) 8%, transparent);

    --color-scrim: rgba(11, 11, 15, 0.32);   /* modal backdrop */

    /* ── Spacing scale (4px base) ── */
    --space-0:  0;
    --space-1:  0.25rem;   /*  4 */
    --space-2:  0.5rem;    /*  8 */
    --space-3:  0.75rem;   /* 12 */
    --space-4:  1rem;      /* 16 */
    --space-5:  1.25rem;   /* 20 */
    --space-6:  1.5rem;    /* 24 */
    --space-8:  2rem;      /* 32 */
    --space-10: 2.5rem;    /* 40 */
    --space-12: 3rem;      /* 48 */
    --space-16: 4rem;      /* 64 */

    /* ── Typography ── */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
    --font-size-xs:  0.75rem;    /* 12 */
    --font-size-sm:  0.8125rem;  /* 13 */
    --font-size-md:  0.875rem;   /* 14 — body default */
    --font-size-lg:  1rem;       /* 16 */
    --font-size-xl:  1.25rem;    /* 20 */
    --font-size-2xl: 1.5rem;     /* 24 */
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --tracking-tight: -0.01em;
    --tracking-wide:   0.04em;

    /* ── Radius ── */
    --radius-sm:     6px;
    --radius-button: 8px;
    --radius-card:   12px;
    --radius-modal:  16px;
    --radius-pill:   999px;

    /* ── Shadow & focus (focus ring = the customer ACCENT) ── */
    --shadow-raised:     0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-pop:        0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-accent) 38%, transparent);

    /* ── Z-index ladder (names match purpose, not the integer) ── */
    --z-base:          0;
    --z-dropdown:      30;
    --z-drawer:        40;
    --z-modal:         50;
    --z-modal-stacked: 60;
    --z-toast:         70;

    /* ── Motion ── */
    --duration-transition:    180ms;
    --duration-tooltip-delay: 300ms;
    --ease-default: cubic-bezier(0, 0, 0.2, 1);

    /* ── Modal widths (4-tier) ── */
    --modal-width-sm: 480px;
    --modal-width-md: 520px;
    --modal-width-lg: 560px;
    --modal-width-xl: 640px;

    /* ── Layout ── */
    --layout-max:    1100px;
    --header-height: 56px;
  }

  /* ── Per-customer theming ────────────────────────────────────────────────
     PRIMARY (Hepha) is constant. A customer overrides ONLY the accent inputs
     below; every accent shade re-derives via color-mix. Drive it by setting
     <html data-customer="…"> (forge.js reads customer_id from /api/auth/me).
     :root defaults to Teldor, so the app is correct even with no attribute.

     Adding a customer is one block — keep --color-on-accent at AA contrast:
       [data-customer="acme"] {
         --color-accent:    #0b7285;
         --color-on-accent: #ffffff;
       }
     ──────────────────────────────────────────────────────────────────────── */

  /* ── Dark theme ──────────────────────────────────────────────────────────
     Re-points ONLY token values — NO component rule changes (by design: every
     component reads semantics). Two triggers:
       • [data-theme="dark"]                  — explicit user choice (forge.js
         toggle, persisted in localStorage; an inline <head> snippet applies it
         pre-paint to avoid FOUC).
       • prefers-color-scheme: dark           — the OS setting, UNLESS the user
         forced light ([data-theme="light"] wins it back).
     PRIMARY (Hepha orange) stays constant. The ACCENT is lightened (+ dark
     on-accent) so links/active/focus AND the .btn--accent fill both pass AA on
     dark. Status colors are lightened so badge text keeps ≥4.5:1 on dark
     surfaces. Per-customer dark accents would be a future
     [data-customer][data-theme="dark"] block (Teldor-only today).
     ──────────────────────────────────────────────────────────────────────── */
  [data-theme="dark"] {
    --color-canvas: #0d0d10; --color-surface: #17171c;
    --color-text-primary: #f4f4f6; --color-text-secondary: #a6a6b2; --color-text-mono: #9aa3b4;
    --color-hairline: rgba(255, 255, 255, 0.12); --color-border: rgba(255, 255, 255, 0.14);
    --color-scrim: rgba(0, 0, 0, 0.6);
    --color-accent: #9aa0e8; --color-on-accent: #0d0d10;
    --color-success: #46c08a; --color-warning: #e0a648; --color-error: #e8707b;
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.7);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-canvas: #0d0d10; --color-surface: #17171c;
      --color-text-primary: #f4f4f6; --color-text-secondary: #a6a6b2; --color-text-mono: #9aa3b4;
      --color-hairline: rgba(255, 255, 255, 0.12); --color-border: rgba(255, 255, 255, 0.14);
      --color-scrim: rgba(0, 0, 0, 0.6);
      --color-accent: #9aa0e8; --color-on-accent: #0d0d10;
      --color-success: #46c08a; --color-warning: #e0a648; --color-error: #e8707b;
      --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55);
      --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.7);
    }
  }
}

/* ===========================================================================
   BASE — element defaults
   ========================================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }   /* systematic reset (layered → components still set their own padding) */

  html { font-size: 16px; -webkit-text-size-adjust: 100%; }

  body {
    min-height: 100vh;
    background: var(--color-canvas);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* One consistent, visible keyboard-focus treatment everywhere (WCAG 2.4.7) */
  :focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }
  :focus:not(:focus-visible) { outline: none; }

  a { color: var(--color-accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

  img { display: block; max-width: 100%; }
  /* Icons (every <svg> here comes from Forge.icon) sit inline on the text
     baseline next to labels; inside flex parents (badges, buttons, the header)
     flex layout takes over, so inline-block is harmless there. */
  svg { display: inline-block; vertical-align: -0.15em; max-width: 100%; }

  /* Declarative icon target — Forge.hydrateIcons() fills <span data-icon> with
     an SVG (server-sent static markup; JS-built markup calls Forge.icon). */
  [data-icon] { display: inline-flex; align-items: center; }

  ::selection { background: var(--color-accent-tint); }

  /* Honor reduced-motion preferences globally (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ===========================================================================
   UTILITIES — thin escape hatch (prefer components). Top layer so a utility
   can intentionally override a component property when needed.
   ========================================================================= */
@layer utilities {
  .u-hidden { display: none !important; }
  .u-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .u-mono        { font-family: var(--font-mono); }
  .u-text-muted  { color: var(--color-text-secondary); }
  .u-text-center { text-align: center; }
  .u-nowrap      { white-space: nowrap; }
  .u-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-flex        { display: flex; }
  .u-flex-col    { display: flex; flex-direction: column; }
  .u-items-center{ align-items: center; }
  .u-justify-between { justify-content: space-between; }
  .u-gap-1 { gap: var(--space-1); } .u-gap-2 { gap: var(--space-2); } .u-gap-3 { gap: var(--space-3); }
  .u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); }
  .u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); }
}

/* ===========================================================================
   COMPONENTS — appended next (Task #2): buttons (primary = Hepha, accent/ghost
   = customer), forms, cards, tables, badges, match-quality badge, dimension
   rows, chips, tabs, modal, toast, banner, tooltip, empty/skeleton, app header.
   Each is a BEM block authored strictly against the tokens above.
   ========================================================================= */
@layer components {

  /* ── Buttons ─────────────────────────────────────────────────────────────
     Variant colors are set via component-scoped --_bg/--_fg/--_bd so the base
     rule never repeats. PRIMARY = Hepha (the one hero CTA). ACCENT = customer. */
  .btn {
    --_bg: var(--color-surface); --_fg: var(--color-text-primary); --_bd: var(--color-border);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold);
    line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--_bd); border-radius: var(--radius-button);
    background: var(--_bg); color: var(--_fg);
    transition: background var(--duration-transition) var(--ease-default),
                border-color var(--duration-transition) var(--ease-default),
                transform var(--duration-transition) var(--ease-default);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
  .btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
  .btn--block { width: 100%; }
  .btn--primary { --_bg: var(--color-primary); --_fg: var(--color-on-primary); --_bd: transparent; box-shadow: var(--shadow-raised); }
  .btn--primary:hover { --_bg: var(--color-primary-hover); }
  .btn--accent { --_bg: var(--color-accent); --_fg: var(--color-on-accent); --_bd: transparent; }
  .btn--accent:hover { --_bg: var(--color-accent-hover); }
  .btn--secondary:hover { --_bg: var(--color-canvas); --_bd: var(--color-text-secondary); }
  .btn--ghost { --_bg: transparent; --_fg: var(--color-text-secondary); --_bd: transparent; }
  .btn--ghost:hover { --_bg: var(--color-accent-soft); --_fg: var(--color-accent); }
  .btn--danger { --_fg: var(--color-error); --_bd: color-mix(in srgb, var(--color-error) 40%, transparent); }
  .btn--danger:hover { --_bg: var(--color-error-soft); }

  /* ── Forms ─────────────────────────────────────────────────────────────── */
  .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
  .field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
  .input, .textarea, .select {
    width: 100%; font: inherit; font-size: var(--font-size-md); color: var(--color-text-primary);
    background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-button);
    padding: var(--space-3);
    transition: border-color var(--duration-transition) var(--ease-default), background var(--duration-transition) var(--ease-default);
  }
  .input::placeholder, .textarea::placeholder { color: var(--color-text-secondary); }
  .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); }
  .textarea { min-height: 7.5rem; resize: vertical; line-height: var(--line-height-normal); }
  .select { appearance: none; cursor: pointer; }
  .field__hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
  .field__error { font-size: var(--font-size-sm); color: var(--color-error); display: flex; gap: var(--space-1); align-items: center; }

  /* ── Card ──────────────────────────────────────────────────────────────── */
  .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); overflow: hidden; }
  .card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-hairline); }
  .card__body { padding: var(--space-5); }
  .card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-hairline); }

  /* ── Table ─────────────────────────────────────────────────────────────── */
  .table-wrap { overflow-x: auto; }
  .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-md); }
  .table th { text-align: left; padding: var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border); white-space: nowrap; }
  .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-hairline); vertical-align: middle; }
  .table tr:last-child td { border-bottom: 0; }
  .table--hover tbody tr:hover td { background: var(--color-canvas); }
  .table__num { text-align: right; font-family: var(--font-mono); }

  /* ── Badge / pill (color derives one tint from --_c) ───────────────────── */
  .badge { --_c: var(--color-text-secondary);
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
    color: var(--_c); background: color-mix(in srgb, var(--_c) 12%, transparent); }
  .badge--primary { --_c: var(--color-primary); }
  .badge--accent  { --_c: var(--color-accent); }
  .badge--success { --_c: var(--color-success); }
  .badge--warning { --_c: var(--color-warning); }
  .badge--error   { --_c: var(--color-error); }

  /* ── Match-quality badge (feedback #4) — icon + word + color (3 channels) ─ */
  .quality { --_c: var(--color-text-secondary);
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    color: var(--_c); background: color-mix(in srgb, var(--_c) 12%, transparent); }
  .quality__icon { width: 1em; height: 1em; flex-shrink: 0; }
  .quality--exact   { --_c: var(--color-success); }
  .quality--good    { --_c: var(--color-accent); }
  .quality--partial { --_c: var(--color-warning); }
  .quality--none    { --_c: var(--color-text-secondary); }
  .legend { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
  .legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }

  /* ── Requirement / spec chips ──────────────────────────────────────────── */
  .chip { display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-text-secondary); white-space: nowrap; }
  .chip--key { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
  /* requirements-met states (the #1 replacement for raw scores) */
  .chip--met     { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: var(--color-success-soft); }
  .chip--approx  { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: var(--color-warning-soft); }
  .chip--missing { color: var(--color-error);   border-color: color-mix(in srgb, var(--color-error) 35%, transparent); background: var(--color-error-soft); }
  /* provenance affordance — a chip whose source is viewable (feedback #3) */
  .chip--sourced { cursor: pointer; border-style: dashed; }
  .chip--sourced:hover, .chip--sourced[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

  /* ── Dimension score row (feedback #2) ─────────────────────────────────── */
  .dim { display: flex; align-items: center; gap: var(--space-2); }
  .dim__label { display: inline-flex; align-items: center; gap: var(--space-1); width: 7.5rem; flex-shrink: 0;
    font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: capitalize; }
  .dim__track { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--color-hairline); overflow: hidden; }
  .dim__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); transition: width .5s var(--ease-default); }
  .dim__val { width: 2.25rem; text-align: right; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono); color: var(--color-text-primary); }

  /* ── Tabs ──────────────────────────────────────────────────────────────── */
  .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
  .tab { appearance: none; background: none; border: none; cursor: pointer; font: inherit;
    font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--duration-transition) var(--ease-default), border-color var(--duration-transition) var(--ease-default); }
  .tab:hover { color: var(--color-text-primary); }
  .tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

  /* ── Tooltip (accessible; toggled via [data-show]) + jargon term ───────── */
  .tip { position: relative; display: inline-flex; }
  .tip__btn { appearance: none; border: none; background: none; cursor: help; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; min-width: 1rem; border-radius: var(--radius-pill);
    color: var(--color-text-secondary); font-size: var(--font-size-xs); }
  .tip__btn:hover { color: var(--color-accent); }
  .tip__bubble { position: fixed; top: 0; left: 0;   /* JS sets top/left on show (forge.js TIP) */
    z-index: var(--z-toast); width: max-content; max-width: 16rem;
    background: var(--color-text-primary); color: var(--color-surface);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal);
    text-transform: none; letter-spacing: 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
    opacity: 0; visibility: hidden; transition: opacity var(--duration-transition) var(--ease-default); }
  .tip__bubble[data-show="true"] { opacity: 1; visibility: visible; }
  .term { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

  /* ── Banner (inline, contextual error/info) ────────────────────────────── */
  .banner { --_c: var(--color-info);
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-button);
    background: color-mix(in srgb, var(--_c) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
    color: var(--color-text-primary); font-size: var(--font-size-md); }
  .banner--warning { --_c: var(--color-warning); }
  .banner--error { --_c: var(--color-error); }
  .banner--success { --_c: var(--color-success); }
  .banner__icon { color: var(--_c); flex-shrink: 0; width: 1.1em; height: 1.1em; margin-top: .1em; }
  .banner__body { flex: 1; }
  .banner__actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); }

  /* ── Toast (passive success/info only; errors use .banner) ─────────────── */
  .toast-region { position: fixed; bottom: var(--space-5); right: var(--space-5);
    z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
  .toast { --_c: var(--color-accent); pointer-events: auto; min-width: 16rem; max-width: 24rem;
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-button); background: var(--color-surface);
    border: 1px solid var(--color-border); border-left: 3px solid var(--_c);
    box-shadow: var(--shadow-pop); font-size: var(--font-size-md); color: var(--color-text-primary);
    animation: forge-toast-in var(--duration-transition) var(--ease-default); }
  .toast--success { --_c: var(--color-success); }
  .toast--warning { --_c: var(--color-warning); }
  @keyframes forge-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* ── Modal / overlay ───────────────────────────────────────────────────── */
  .overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-scrim);
    backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
    padding: var(--space-8) var(--space-4); overflow-y: auto; }
  .modal { background: var(--color-surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-pop);
    width: 100%; max-width: var(--modal-width-sm); overflow: hidden; }
  .modal--md { max-width: var(--modal-width-md); } .modal--lg { max-width: var(--modal-width-lg); } .modal--xl { max-width: var(--modal-width-xl); }
  .modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-5); border-bottom: 1px solid var(--color-hairline); }
  .modal__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
  .modal__body { padding: var(--space-5); }
  .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-hairline); }
  .modal__close { appearance: none; border: none; background: none; cursor: pointer; color: var(--color-text-secondary);
    width: 2rem; height: 2rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; }
  .modal__close:hover { background: var(--color-canvas); color: var(--color-text-primary); }

  /* ── Empty / skeleton / spinner ────────────────────────────────────────── */
  .empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-secondary); }
  .empty__icon { color: var(--color-text-secondary); opacity: .6; margin: 0 auto var(--space-3); width: 2.5rem; height: 2.5rem; }
  .empty__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); }
  .empty__text { font-size: var(--font-size-md); }
  .empty__action { margin-top: var(--space-4); }
  .skeleton { position: relative; overflow: hidden; background: var(--color-hairline); border-radius: var(--radius-sm); }
  .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 60%, transparent), transparent);
    animation: forge-shimmer 1.2s infinite; }
  @keyframes forge-shimmer { to { transform: translateX(100%); } }
  .spinner { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill);
    border: 2px solid var(--color-hairline); border-top-color: var(--color-accent); animation: forge-spin .8s linear infinite; }
  @keyframes forge-spin { to { transform: rotate(360deg); } }

  /* ── App header (rendered by <forge-header> in forge.js) ───────────────── */
  .app-header { position: sticky; top: 0; z-index: var(--z-drawer);
    display: flex; align-items: center; gap: var(--space-4); height: var(--header-height);
    padding: 0 var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-hairline); }
  .app-header__brand { display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--color-text-primary); font-weight: var(--font-weight-bold); text-decoration: none; }
  .app-header__logo { height: 1.5rem; width: auto; color: var(--color-brand); }  /* Hepha orange via currentColor */
  .app-header__product { font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
  .app-header__sep { width: 1px; height: 1.25rem; background: var(--color-hairline); }
  .app-header__context { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
  .app-header__nav { display: flex; gap: var(--space-1); }
  .app-header__link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-button);
    color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); text-decoration: none; }
  .app-header__link:hover { color: var(--color-text-primary); background: var(--color-canvas); }
  .app-header__link[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-soft); }
  .app-header__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
  .app-header__theme { padding: var(--space-2); color: var(--color-text-secondary); }
  .app-header__theme svg { width: 1.15rem; height: 1.15rem; }

  /* ── Page layout (shared across pages) ─────────────────────────────────── */
  .page { max-width: var(--layout-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); }
  .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; }
  /* Title block flexes so a right-aligned stat/action stays top-right instead of
     wrapping below when the description is long. (basis 0 → no wrap; min-width 0 → text wraps) */
  .page-head > :first-child { flex: 1 1 0; min-width: 0; }
  .page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
  .page-sub { color: var(--color-text-secondary); margin-top: var(--space-1); }
  .section-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  .stack { display: flex; flex-direction: column; gap: var(--space-3); }

  /* ── Stat card + simple grids ──────────────────────────────────────────── */
  .stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); }
  .stat__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  .stat__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-1); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  @media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

  /* ── Drop zone (uploads) ───────────────────────────────────────────────── */
  .drop { display: block; border: 2px dashed var(--color-border); border-radius: var(--radius-card); padding: var(--space-10) var(--space-6); text-align: center; cursor: pointer; transition: border-color var(--duration-transition) var(--ease-default), background var(--duration-transition) var(--ease-default); }
  .drop:hover { border-color: var(--color-accent); }   /* hover = border only (no bg flash) */
  .drop[data-drag="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
  .drop__title { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
  .drop__sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
}