/* ============================================================
   CYBERPATH — styles
   Hybrid: Hack The Box energy (dark, neon-green, terminal)
           with INE structure (cards, clear hierarchy, calm).
   System fonts only (no network fetch → no CLS, tiny payload).
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities, print;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; }
  ul { list-style: none; padding: 0; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  /* These are focused only programmatically (tabindex="-1", not keyboard-tabbable) to
     move screen-reader position — so they need NO visible ring. Suppressing it avoids
     an ugly box drawn around the plan title / step legend after Generate. */
  .step__legend:focus, #result-heading:focus { outline: none; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* type — self-contained system stacks (no external font requests).
       Arabic is routed to --font-display (system Arabic); the mono stack is Latin. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, "Courier New", monospace;

    /* fluid scale */
    --step--1: clamp(.83rem, .8rem + .15vw, .9rem);
    --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
    --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.3rem + .8vw, 1.9rem);
    --step-3:  clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
    --step-4:  clamp(2.3rem, 1.7rem + 3vw, 4.2rem);

    /* space */
    --sp-1: .35rem; --sp-2: .6rem; --sp-3: 1rem; --sp-4: 1.5rem;
    --sp-5: 2.25rem; --sp-6: 3.5rem; --sp-7: 5rem;

    --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px;
    --maxw: 1120px;
    --section-space: clamp(var(--sp-5), 6vw, var(--sp-7));
    --transition: 180ms cubic-bezier(.2,.7,.3,1);

    /* Monochrome stroke-icon data URIs (masked, tinted via background) */
    --i-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
    --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");

    color-scheme: dark;
  }

  /* DARK (default) — "HTB tone in Vercel/Linear structure": near-black canvas,
     hairline borders, lime accent, blueprint grid, six hue-separated category badges. */
  :root, :root[data-theme="dark"] {
    --bg: #0a0b0d;             /* near-black canvas */
    --bg-grid: rgba(138,240,74,.035);   /* faint green-tinted blueprint grid */
    --surface: #101216;        /* cards, table, inputs */
    --surface-2: #16191e;      /* hovered rows / dropdowns / elevated */
    --surface-3: #1e2228;
    --elevated: #16191e;
    --sunken: #060708;         /* code wells */
    --border: #23262c;         /* default hairline */
    --border-strong: #2f333b;
    --border-green: color-mix(in srgb, #8af04a 22%, transparent);  /* green row dividers */
    --text: #e9ebee;
    --text-hi: #c9ced6;        /* mono names — slightly cooler than body */
    --muted: #9aa0aa;          /* ~7:1 on --bg */
    --faint: #7d848f;          /* labels; ~5.0:1 on --bg — AA headroom on surface-2 too */
    --idx: #5c626c;            /* decorative 01..07 indices */
    --accent: #8af04a;         /* lime — the one identity colour */
    --accent-hover: #74d63a;   /* darker on hover for lime fills */
    --accent-press: #63bb30;
    --accent-ink: #0a0b0d;     /* text on accent fills (~9:1) */
    --accent-soft: rgba(138,240,74,.10);
    --accent-glow: rgba(138,240,74,.22);   /* focus glow */
    --accent-2: #6cb6ff;       /* links + info ONLY */
    --link: #6cb6ff;
    --accent-2-soft: rgba(108,182,255,.10);
    --ok: #34d371;
    --warn: #f59e0b;
    --focus: #8af04a;
    --grad: linear-gradient(90deg, var(--accent), var(--accent));

    /* Cost ladder: free=ok, low=neutral, mid=warn, high=danger. */
    --tier-free: #34d371; --tier-low: #9aa0aa; --tier-mid: #f59e0b; --tier-high: #ff7b72;

    /* Six category badge colours — {border, text, subtle-bg}, tuned for near-black.
       Badge-green is emerald, hue-separated from the lime accent so it never reads
       as an interactive element. */
    --badge-red-bd: #7f2a2a;    --badge-red-tx: #f8a3a3;    --badge-red-bg: rgba(239,68,68,.10);
    --badge-green-bd: #2f7a3f;  --badge-green-tx: #8ff0ab;  --badge-green-bg: rgba(52,211,113,.10);
    --badge-blue-bd: #2a5a8f;   --badge-blue-tx: #95c5fb;   --badge-blue-bg: rgba(59,130,246,.10);
    --badge-indigo-bd: #403f9c; --badge-indigo-tx: #b0b4fc; --badge-indigo-bg: rgba(99,102,241,.11);
    --badge-amber-bd: #8a6220;  --badge-amber-tx: #f6cf6a;  --badge-amber-bg: rgba(245,158,11,.11);
    --badge-neutral-bd: #3a3f47;--badge-neutral-tx: #c2c8d0;--badge-neutral-bg: rgba(160,170,185,.08);

    /* Neutral elevation — NO colour in shadows (borders carry structure). */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 4px 14px -6px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 40px -18px rgba(0,0,0,.66);
  }

  /* LIGHT — same structure, light values; badges re-tuned for near-white. */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f7f9; --bg-grid: rgba(47,107,0,.06);
    --surface: #ffffff; --surface-2: #eef1f4; --surface-3: #e2e7ec;
    --elevated: #eef1f4; --sunken: #e8ecf0;
    --border: #dce2e8; --border-strong: #c1cad3;
    --border-green: color-mix(in srgb, #2f6b00 22%, transparent);
    --text: #0e141b; --text-hi: #0e141b; --muted: #4f5a66; --faint: #5c6772; --idx: #94a0ab;
    --accent: #2f6b00; --accent-hover: #276000; --accent-press: #1f4d00; --accent-ink: #ffffff;
    --accent-soft: rgba(47,107,0,.10); --accent-glow: rgba(47,107,0,.28);
    --accent-2: #0a5fd0; --link: #0a5fd0; --accent-2-soft: rgba(10,95,208,.09);
    --ok: #1a7f37; --warn: #8a5a00; --focus: #0a5fd0;
    --grad: linear-gradient(90deg, var(--accent), var(--accent));
    --tier-free: #1a7f37; --tier-low: #4f5a66; --tier-mid: #8a5a00; --tier-high: #b42318;
    --badge-red-bd: #e0b4b4; --badge-red-tx: #b42318; --badge-red-bg: rgba(239,68,68,.10);
    --badge-green-bd: #a8d8b4; --badge-green-tx: #14722e; --badge-green-bg: rgba(52,160,88,.12);
    --badge-blue-bd: #aecbf0; --badge-blue-tx: #0a5fd0; --badge-blue-bg: rgba(10,95,208,.09);
    --badge-indigo-bd: #c0c2f0; --badge-indigo-tx: #4a45c8; --badge-indigo-bg: rgba(99,102,241,.10);
    --badge-amber-bd: #e6cf9a; --badge-amber-tx: #8a5a00; --badge-amber-bg: rgba(180,120,0,.12);
    --badge-neutral-bd: #c9d0d8; --badge-neutral-tx: #4f5a66; --badge-neutral-bg: rgba(80,90,100,.06);
    --shadow-sm: 0 1px 2px rgba(16,22,29,.06);
    --shadow: 0 6px 20px -10px rgba(16,22,29,.15);
    --shadow-lg: 0 20px 48px -20px rgba(16,22,29,.2);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --bg: #f5f7f9; --bg-grid: rgba(47,107,0,.06);
      --surface: #ffffff; --surface-2: #eef1f4; --surface-3: #e2e7ec;
      --elevated: #eef1f4; --sunken: #e8ecf0;
      --border: #dce2e8; --border-strong: #c1cad3;
      --border-green: color-mix(in srgb, #2f6b00 22%, transparent);
      --text: #0e141b; --text-hi: #0e141b; --muted: #4f5a66; --faint: #5c6772; --idx: #94a0ab;
      --accent: #2f6b00; --accent-hover: #276000; --accent-press: #1f4d00; --accent-ink: #ffffff;
      --accent-soft: rgba(47,107,0,.10); --accent-glow: rgba(47,107,0,.28);
      --accent-2: #0a5fd0; --link: #0a5fd0; --accent-2-soft: rgba(10,95,208,.09);
      --ok: #1a7f37; --warn: #8a5a00; --focus: #0a5fd0;
      --grad: linear-gradient(90deg, var(--accent), var(--accent));
      --tier-free: #1a7f37; --tier-low: #4f5a66; --tier-mid: #8a5a00; --tier-high: #b42318;
      --badge-red-bd: #e0b4b4; --badge-red-tx: #b42318; --badge-red-bg: rgba(239,68,68,.10);
      --badge-green-bd: #a8d8b4; --badge-green-tx: #14722e; --badge-green-bg: rgba(52,160,88,.12);
      --badge-blue-bd: #aecbf0; --badge-blue-tx: #0a5fd0; --badge-blue-bg: rgba(10,95,208,.09);
      --badge-indigo-bd: #c0c2f0; --badge-indigo-tx: #4a45c8; --badge-indigo-bg: rgba(99,102,241,.10);
      --badge-amber-bd: #e6cf9a; --badge-amber-tx: #8a5a00; --badge-amber-bg: rgba(180,120,0,.12);
      --badge-neutral-bd: #c9d0d8; --badge-neutral-tx: #4f5a66; --badge-neutral-bg: rgba(80,90,100,.06);
      --shadow-sm: 0 1px 2px rgba(16,22,29,.06);
      --shadow: 0 6px 20px -10px rgba(16,22,29,.15);
      --shadow-lg: 0 20px 48px -20px rgba(16,22,29,.2);
    }
  }
}

/* ---------- BASE ---------- */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    color: var(--text);
    /* Blueprint grid: 1px lines on a 32px cell, faint + green-tinted, plus one soft
       accent glow at the top-right. If the grid is the first thing you notice it's too
       strong — alpha stays ≤ .05. */
    background:
      radial-gradient(1100px 560px at 88% -12%, var(--accent-soft), transparent 62%),
      linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / 32px 32px,
      var(--bg);
    /* scroll (not fixed): a fixed multi-layer background repaints the whole viewport every
       scroll frame; the repeating grid tiles seamlessly and reads identically when scrolled. */
    background-attachment: scroll;
  }
  @media (max-width: 640px) {
    body { --bg-grid: rgba(138,240,74,.022); background-size: auto, 28px 28px, 28px 28px, auto; }
    :root[data-theme="light"] body, :root:not([data-theme="dark"]) body { --bg-grid: rgba(47,107,0,.04); }
  }
  /* Defensive wrap: injected plan content can carry long tokens/URLs. */
  .phase, .cert, .cert__name, .callout, .stat__num, .res-list, .phase__list li, .plan-head__title {
    min-width: 0; overflow-wrap: anywhere;
  }
  html { scroll-padding-top: var(--sp-3); }   /* small offset; header no longer sticky */
  h1,h2,h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
  .ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.18em; }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }
  a { color: var(--accent-2); text-underline-offset: 3px; }
  a:hover { text-decoration: underline; }
  strong { color: var(--text); font-weight: 700; }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  .skip-link {
    position: absolute; left: var(--sp-3); top: var(--sp-3);
    transform: translateY(-160%); transition: transform var(--transition);
    background: var(--accent); color: var(--accent-ink);
    padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 700; z-index: 100;
  }
  .skip-link:focus { transform: translateY(0); }
  .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Baseline focus ring: solid 2px accent outline, WCAG 2.2 focus-appearance-safe on
     every surface + over the grid. :where() = 0 specificity, so component-specific
     focus styles still win where defined. */
  :where(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
  }
}

/* ---------- FINGERPRINT: blueprint-grid / terminal design language ---------- */
@layer components {
  /* Rainbow hairline pinned to the viewport bottom (decorative; below focus rings). */
  .rainbow-rule {
    position: fixed; inset-inline: 0; inset-block-end: 0; block-size: 3px; z-index: 40;
    pointer-events: none;
    background: linear-gradient(90deg, #ff5b5b, #ffb648, #8af04a, #43c6ff, #7b7bff, #c86bff);
  }

  /* Uppercase mono eyebrow with a square bullet (▪ THE STACK). */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .75ch;
    font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600;
    text-transform: uppercase; letter-spacing: .18em; color: var(--accent);
  }
  .eyebrow::before { content: "▪"; color: var(--accent); }

  /* Colored category badge / tag. */
  .badge {
    display: inline-flex; align-items: center; gap: .5ch; white-space: nowrap;
    padding: 3px 9px; border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700; line-height: 1.4;
    text-transform: uppercase; letter-spacing: .06em; border: 1px solid;
    font-variant-numeric: tabular-nums;
  }
  .badge--red    { color: var(--badge-red-tx);    border-color: var(--badge-red-bd);    background: var(--badge-red-bg); }
  .badge--green  { color: var(--badge-green-tx);  border-color: var(--badge-green-bd);  background: var(--badge-green-bg); }
  .badge--blue   { color: var(--badge-blue-tx);   border-color: var(--badge-blue-bd);   background: var(--badge-blue-bg); }
  .badge--indigo { color: var(--badge-indigo-tx); border-color: var(--badge-indigo-bd); background: var(--badge-indigo-bg); }
  .badge--amber  { color: var(--badge-amber-tx);  border-color: var(--badge-amber-bd);  background: var(--badge-amber-bg); }
  .badge--neutral{ color: var(--badge-neutral-tx);border-color: var(--badge-neutral-bd);background: var(--badge-neutral-bg); }

  /* Signature module: the numbered "stack" table. */
  .stack { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .stack__row {
    display: grid; grid-template-columns: 3ch 1fr auto; gap: var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--border-green);
    text-decoration: none; color: inherit; transition: background var(--transition);
  }
  .stack__row:first-child { border-block-start: 0; }
  a.stack__row:hover { background: var(--elevated); }
  a.stack__row:hover .stack__name { color: var(--accent); }
  .stack__idx { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--idx); font-variant-numeric: tabular-nums; }
  .stack__main { min-width: 0; }
  .stack__name { display: block; font-family: var(--font-mono); font-weight: 700; font-size: var(--step-0); color: var(--text-hi); line-height: 1.25; overflow-wrap: anywhere; }
  .stack__desc { display: block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }

  /* Price pill: old → new (before/after). */
  .pricepill {
    display: inline-flex; align-items: center; gap: 1ch; font-family: var(--font-mono);
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    padding: .5rem 1rem; background: var(--surface);
  }
  .pricepill__old { color: var(--tier-high); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tier-high) 60%, transparent); font-size: var(--step--1); }
  .pricepill__arrow { color: var(--faint); }
  /* Physical arrow glyphs must point along the reading direction in RTL. */
  [dir="rtl"] .pricepill__arrow { display: inline-block; transform: scaleX(-1); }
  .pricepill__new { color: var(--accent); font-weight: 700; font-size: var(--step-0); }

  /* System-spec corner badge (■ STATIC · OFFLINE · NO ACCOUNT). */
  .syschip { display: inline-flex; align-items: center; gap: .6ch; font-family: var(--font-mono); font-size: var(--step--1); color: var(--faint); letter-spacing: .02em; }
  .syschip::before { content: "■"; color: var(--accent); font-size: .8em; }

  /* Milestone celebration toast (peak-end reward). Reduced-motion-safe. */
  .celebrate {
    position: fixed; inset-block-end: calc(3px + var(--sp-3)); inset-inline: 0; margin-inline: auto;
    width: max-content; max-width: calc(100vw - 2 * var(--sp-3)); z-index: 60;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: .7rem .8rem .7rem 1rem; border-radius: var(--radius-pill);
    background: var(--surface-2); border: 1px solid var(--accent);
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-glow);
    opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease;
  }
  .celebrate.is-on { opacity: 1; transform: none; }
  .celebrate__badge {
    display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem;
    border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-mono); font-weight: 800; font-size: var(--step--1); font-variant-numeric: tabular-nums;
  }
  .celebrate__msg { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text); }
  .celebrate__x {
    display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-pill);
    background: transparent; border: 0; color: var(--faint); cursor: pointer; font-size: .8rem;
  }
  .celebrate__x:hover { color: var(--text); background: var(--surface-3); }
  @media (prefers-reduced-motion: reduce) {
    .celebrate { transition: none; transform: none; }
  }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  /* No chrome bar: brand + controls sit transparently at the true left/right edges of the
     page (not inset to the content column) and scroll with the page — blended, not a bar. */
  .site-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    background: transparent; border: 0;
    padding-block: var(--sp-4) var(--sp-2);
    padding-inline: clamp(var(--sp-3), 2.5vw, var(--sp-5));
  }
  main { display: block; }
  section { padding-inline: var(--sp-4); }
  .hero__inner, .wizard__inner, .result__inner, .static-ref__inner {
    max-width: var(--maxw); margin-inline: auto;
  }
  .site-footer {
    max-width: var(--maxw); margin: var(--sp-6) auto 0; padding: var(--sp-5) var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border); color: var(--muted); font-size: var(--step--1);
  }
  .site-footer__meta { margin-top: var(--sp-2); color: var(--faint); }
  .credit { margin-top: var(--sp-4); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
  .credit__by { color: var(--faint); font-size: var(--step--1); }
  .credit__link {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    font-family: var(--font-mono); font-weight: 700; color: var(--text);
    padding: .4rem .8rem; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface); transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
  }
  .credit__link:hover, .credit__link:focus-visible {
    color: var(--accent); border-color: var(--accent); text-decoration: none;
  }
  .credit__mark { color: var(--accent); }
  .credit__arrow { color: var(--accent-2); font-size: .85em; }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* Brand — understated terminal wordmark that blends into the mono design. */
  .brand { display: inline-flex; align-items: center; gap: .5ch; text-decoration: none; font-family: var(--font-mono); font-weight: 700; direction: ltr; }
  .brand__mark { color: var(--accent); font-size: 1.05em; }
  .brand__name { letter-spacing: .04em; font-size: .95rem; color: var(--text-hi); }
  .brand__accent { color: var(--accent); }
  .brand:hover .brand__name { color: var(--text); }
  /* Minimal, borderless controls that blend into the canvas; light up on interaction. */
  .theme-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .7rem; min-height: 44px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent; color: var(--muted);
    font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em;
    transition: var(--transition);
  }
  .theme-toggle:hover { color: var(--accent); background: var(--accent-soft); }
  .theme-toggle__icon { font-size: 1.15em; color: var(--faint); transition: color var(--transition); }
  .theme-toggle:hover .theme-toggle__icon { color: var(--accent); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .7rem 1.25rem; border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-weight: 700; letter-spacing: .01em;
    text-decoration: none; border: 1px solid transparent;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
  }
  .btn:hover { text-decoration: none; }
  .btn:active { transform: translateY(1px); }
  .btn--lg { min-height: 52px; padding: .9rem 1.6rem; font-size: var(--step-0); }
  .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
  .btn--ghost:hover { border-color: var(--accent); }
  .btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }

  /* HERO */
  .hero {
    display: grid; gap: var(--sp-6); align-items: center;
    max-width: var(--maxw); margin-inline: auto;
    padding-block: var(--section-space);
  }
  .hero__inner { max-width: 640px; }
  .hero > * { min-width: 0; }          /* grid children may shrink; terminal <pre> can't widen the page */
  .hero__lede { overflow-wrap: anywhere; }
  .hero__eyebrow { margin-bottom: var(--sp-3); }
  .hero__title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; letter-spacing: -.035em; }
  .hero__lede { margin-top: var(--sp-3); color: var(--muted); font-size: var(--step-1); max-width: 52ch; }
  .hero__pricepill { margin-top: var(--sp-4); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
  .hero__syschip { margin-top: var(--sp-4); }
  .hero__stats {
    display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5);
    padding-top: var(--sp-4); border-top: 1px solid var(--border);
  }
  .hero__stats li { display: flex; flex-direction: column; }
  .hero__stats strong { font-size: var(--step-2); color: var(--text); font-family: var(--font-mono); }
  .hero__stats li:first-child strong { color: var(--accent); }  /* one green accent, not three */
  .hero__stats span { color: var(--muted); font-size: var(--step--1); }

  /* Hero aside — the numbered tracks stack table (signature module). */
  .hero__aside { position: relative; align-self: start; }
  .hero__aside .eyebrow { margin-bottom: var(--sp-3); }
  .hero__aside::before {
    content: ""; position: absolute; z-index: -1; inset: 6% -6% 26% -6%;
    border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent);
    pointer-events: none;   /* the gradient self-feathers; no blur() — keeps the LCP region cheap to raster */
  }
  .hero__aside .stack { box-shadow: var(--shadow); }

  /* Terminal card (still used by the build-sequence loader) */
  .hero__terminal { position: relative; }
  .hero__terminal::before {
    content: ""; position: absolute; z-index: -1; inset: -14% 0 30%;
    border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent);
    pointer-events: none;
  }
  .term {
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: color-mix(in oklab, var(--surface) 92%, black); box-shadow: var(--shadow);
    overflow: hidden; font-family: var(--font-mono);
  }
  .term__bar { display: flex; gap: .5rem; padding: .75rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .term__bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--border-strong); }
  .term__bar span:first-child { background: #ff5f56; }
  .term__bar span:nth-child(2) { background: #ffbd2e; }
  .term__bar span:nth-child(3) { background: var(--accent); }
  .term__body { margin: 0; padding: var(--sp-4); font-size: .9rem; line-height: 1.65; overflow-x: auto; color: var(--text); }
  .c-mut { color: var(--muted); } .c-acc { color: var(--accent); }
  .c-dim { color: var(--faint); } .c-ok { color: var(--ok); }

  @media (min-width: 900px) {
    .hero { grid-template-columns: 1.1fr .9fr; }
  }

  /* WIZARD */
  .wizard { scroll-margin-top: var(--sp-4); padding-block: var(--section-space); }
  .wizard__inner {
    max-width: 780px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: clamp(var(--sp-4), 4vw, var(--sp-6));
    box-shadow: var(--shadow);
  }
  .wizard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .wizard__heading { font-size: var(--step-2); }
  .wizard__lean {
    margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--step--1);
    color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 999px;
    padding: .45rem .85rem; display: inline-flex; gap: .5rem; align-items: center;
    background: color-mix(in oklab, var(--accent) 6%, transparent);
  }
  .wizard__lean strong { color: var(--accent); }
  .wizard__lean-pct { color: var(--accent-2); }
  .wizard__lean-k::before { content: "◆ "; color: var(--accent); }
  .wizard__progress-text { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--1); }
  .progress { height: 8px; border-radius: 999px; background: var(--surface-3); margin: var(--sp-3) 0 var(--sp-5); overflow: hidden; }
  .progress__bar { height: 100%; width: 16%; background: var(--grad); border-radius: inherit; transition: width var(--transition); }

  fieldset { border: 0; padding: 0; }
  .step__legend { font-size: var(--step-2); font-weight: 800; padding: 0; }
  .step__help { color: var(--muted); margin: var(--sp-2) 0 var(--sp-4); }

  .options { display: grid; gap: var(--sp-2); }
  .option {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-strong);
    border-radius: var(--radius); background: var(--surface-2);
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer; min-height: 44px;
  }
  .option:hover { border-color: var(--accent); }
  .option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .option input { flex: 0 0 auto; margin-top: .25rem; width: 20px; height: 20px; accent-color: var(--accent); }
  .option__body { display: flex; flex-direction: column; gap: .1rem; }
  .option__label { font-weight: 700; }
  .option__desc { color: var(--muted); font-size: var(--step--1); }

  .wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); }
  .wizard__nav .btn--primary { margin-inline-start: auto; }
  .wizard__hint { min-height: 1.4em; margin-top: var(--sp-3); color: var(--tier-high); font-size: var(--step--1); font-weight: 600; }

  /* RESULT / PLAN */
  .result { scroll-margin-top: var(--sp-4); padding-block: var(--section-space); }
  .result__inner { max-width: 900px; }
  .plan-head {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: clamp(var(--sp-4), 4vw, var(--sp-6)); box-shadow: var(--shadow);
  }
  .plan-head__eyebrow { font-family: var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: var(--step--1); }
  .plan-head__title { font-size: var(--step-3); margin-top: var(--sp-2); }
  .plan-head__sub { color: var(--muted); margin-top: var(--sp-3); font-size: var(--step-1); max-width: 60ch; }
  .plan-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
  .chip {
    display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono);
    font-size: var(--step--1); padding: .4rem .75rem; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  }
  .chip strong { color: var(--text); }

  .plan-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; }

  .plan-summary {
    display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: var(--sp-5); container-type: inline-size;   /* size the lead number to the tile, not the viewport */
  }
  .stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-4);
  }
  .stat__num { font-family: var(--font-mono); font-size: var(--step-1); color: var(--accent); font-weight: 800; overflow-wrap: normal; }
  .stat__label { color: var(--muted); font-size: var(--step--1); margin-top: .2rem; }

  /* Timeline of phases — a real roadmap: a spine with tier-coloured nodes. */
  .timeline { display: grid; gap: var(--sp-4); position: relative; padding-inline-start: 34px; }
  .timeline::before {
    content: ""; position: absolute; inset-block: 14px; inset-inline-start: 9px; width: 2px;
    background: var(--border-strong); opacity: .6;
  }
  .phase {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4); overflow: visible;
  }
  .phase::before {  /* node dot sitting on the spine */
    content: ""; position: absolute; top: calc(var(--sp-4) + 4px); inset-inline-start: -31px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--bg);
  }
  .phase[data-tier="foundation"]::before { border-color: var(--accent-2); }
  .phase[data-tier="certification"]::before { border-color: var(--warn); }
  .phase[data-tier="career"]::before { border-color: var(--ok); }
  .phase__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); justify-content: space-between; }
  .phase__idx { font-family: var(--font-mono); color: var(--faint); font-size: var(--step--1); }
  .phase__name { font-size: var(--step-1); }
  .phase__dur { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); background: var(--accent-soft); padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
  .phase__badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono); color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: .15rem .55rem; }
  .phase__focus { color: var(--muted); margin: var(--sp-3) 0; }
  .phase__grid { display: grid; gap: var(--sp-4); }
  @media (min-width: 640px) { .phase__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
  .phase__block h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: var(--sp-2); font-weight: 700; }
  .phase__list li { display: flex; gap: .5rem; padding: .2rem 0; font-size: .95rem; }
  .phase__list li::before { content: "▹"; color: var(--accent); flex: 0 0 auto; }
  .res-list li { padding: .25rem 0; }
  .res-list a { font-weight: 600; }
  .res-list li { flex-wrap: wrap; }
  .res-list .res-note { color: var(--muted); font-size: var(--step--1); flex-basis: 100%; padding-inline-start: 1rem; margin-top: .1rem; }

  /* Certification badges */
  .certs-box { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border-strong); }
  .cert-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
  .cert {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface-2);
  }
  .cert__name { font-weight: 700; }
  .cert__name a { color: var(--text); }
  .tier {
    font-family: var(--font-mono); font-weight: 800; font-size: .8rem;
    padding: .2rem .55rem; border-radius: 6px; margin-inline-start: auto; white-space: nowrap;
    border: 1px solid color-mix(in oklab, currentColor 42%, transparent);
    background: color-mix(in oklab, currentColor 14%, transparent);
  }
  .tier[data-tier="free"] { color: var(--tier-free); }
  .tier[data-tier="low"]  { color: var(--tier-low); }
  .tier[data-tier="mid"]  { color: var(--tier-mid); }
  .tier[data-tier="high"] { color: var(--tier-high); }
  .cert__lvl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-family: var(--font-mono); }
  .cert__price { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
  .cert__price + .tier { margin-inline-start: var(--sp-2); }

  .callout {
    border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--accent-2);
    background: var(--accent-2-soft); border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; font-size: .95rem;
  }
  .callout--ok   { border-inline-start-color: var(--ok);   background: color-mix(in oklab, var(--ok) 10%, transparent); }
  .callout--warn { border-inline-start-color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, transparent); }

  /* Static reference / no-JS */
  .static-ref { padding-block: var(--section-space); }
  .faq-section { padding-block: var(--section-space); }
  .static-note { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--sp-4); font-family: var(--font-mono); }
  .static-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: var(--sp-4); }
  .static-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
  .static-card h3 { margin-bottom: var(--sp-2); }
  .static-card p { color: var(--muted); font-size: .95rem; margin-top: var(--sp-2); }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  [hidden] { display: none !important; }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .step-enter { animation: fade-up 320ms cubic-bezier(.2,.7,.3,1); }
  /* Phases animate TRANSFORM ONLY (never opacity) so content is never invisible —
     even mid-animation, off-screen render, or if the animation never plays. */
  .phase { animation: phase-rise 380ms cubic-bezier(.2,.7,.3,1) backwards; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes phase-rise { from { transform: translateY(12px); } to { transform: none; } }
  /* Staggered reveal so the roadmap builds like a path, not a pop. */
  .timeline .phase:nth-child(1) { animation-delay: 40ms; }
  .timeline .phase:nth-child(2) { animation-delay: 100ms; }
  .timeline .phase:nth-child(3) { animation-delay: 160ms; }
  .timeline .phase:nth-child(4) { animation-delay: 220ms; }
  .timeline .phase:nth-child(5) { animation-delay: 280ms; }
  .timeline .phase:nth-child(n+6) { animation-delay: 340ms; }
  .option:hover { transform: translateY(-1px); }

  /* Plan reveal choreography (PRISM #3) — safe: resting state is fully visible. */
  .result:not([hidden]) .plan-head { animation: plan-rise 460ms cubic-bezier(.2,.7,.3,1) backwards; }
  .result:not([hidden]) .callout--match { animation: plan-rise 460ms cubic-bezier(.2,.7,.3,1) 80ms backwards; }
  @keyframes plan-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Confidence bars grow in; transform-only so text is never hidden (PRISM #1). */
  .callout--match .match__fill { animation: match-grow 620ms cubic-bezier(.2,.7,.3,1) backwards; }
  .match__bars li:nth-child(2) .match__fill { animation-delay: 90ms; }
  .match__bars li:nth-child(3) .match__fill { animation-delay: 170ms; }
  @keyframes match-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* Blinking terminal caret (PRISM #4) + primary CTA arrow nudge (PRISM #5). */
  .term__cursor { animation: term-blink 1.1s steps(1) infinite; }
  @keyframes term-blink { 50% { opacity: 0; } }
  .btn--primary span[aria-hidden] { transition: transform var(--transition); }
  .btn--primary:hover span[aria-hidden] { transform: translateX(3px); }
}

/* ---------- SECOND-PASS POLISH (MUSE × PRISM) ---------- */
@layer components {
  /* The generated plan is the payoff — give its head a gradient hairline + bloom. */
  .plan-head { position: relative; isolation: isolate;
    background: radial-gradient(120% 140% at 100% 0, var(--accent-soft), transparent 55%), var(--surface); }
  .plan-head::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    padding: 1px; background: var(--border-strong); opacity: .8;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }

  /* Stat tiles: subtle top rail; feature the headline metric. */
  .stat { position: relative; transition: border-color var(--transition), transform var(--transition); }
  .stat::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
    border-radius: var(--radius) var(--radius) 0 0; background: var(--border-strong); opacity: .6; }
  .stat:hover { border-color: var(--border-strong); }
  .plan-summary > .stat--lead { grid-column: span 2; }
  .plan-summary > .stat--lead::before { background: var(--accent); opacity: 1; height: 3px; }
  /* text-wrap:balance is deliberately omitted — on mixed Arabic+digit content it reorders
     the bidi run. Direction stays natural (RTL in AR): the range is LTR-isolated in JS. */
  .plan-summary > .stat--lead .stat__num { font-size: clamp(1.7rem, 8cqi, 2.4rem); line-height: 1.05; }
  /* Non-lead tiles are narrow; keep "~500 ساعة" on one line inside the box by scaling the
     number down a touch and never wrapping between digits and their Arabic unit word. */
  .plan-summary > .stat:not(.stat--lead) .stat__num { font-size: clamp(1.05rem, .9rem + .55vw, 1.35rem); white-space: nowrap; }
  @media (max-width: 460px) { .plan-summary > .stat--lead { grid-column: auto; } }

  /* Timeline colour key. */
  .tier-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3);
    font-size: var(--step--1); color: var(--muted); font-family: var(--font-mono); }
  .tier-legend li { display: inline-flex; align-items: center; gap: .45rem; }
  .tier-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--accent); }
  .tier-legend li[data-tier="foundation"]::before { border-color: var(--accent-2); }
  .tier-legend li[data-tier="certification"]::before { border-color: var(--warn); }
  .tier-legend li[data-tier="career"]::before { border-color: var(--ok); }

  /* Timeline spine: start at the first node, fade the tail so the road "continues". */
  .timeline::before {
    inset-block-start: calc(var(--sp-4) + 11px); inset-block-end: 0;
    opacity: .55;
    -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent);
  }
  .phase::before { transition: box-shadow var(--transition), transform var(--transition); }
  .phase:hover::before { transform: scale(1.15); box-shadow: 0 0 0 4px var(--bg), 0 0 12px -2px currentColor; }
  :root[data-theme="light"] .timeline::before { opacity: .7; }

  /* Certification ladder → an actual numbered, climbable ladder. */
  .cert-list--ladder { counter-reset: rung; position: relative; padding-inline-start: 30px; }
  .cert-list--ladder::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 10px;
    width: 2px; background: var(--border-strong); opacity: .6; }
  .cert-list--ladder > .cert { counter-increment: rung; position: relative; }
  .cert-list--ladder > .cert::before { content: counter(rung); position: absolute; inset-inline-start: -28px;
    width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--font-mono);
    font-size: .7rem; font-weight: 800; color: var(--accent-ink); background: var(--accent);
    border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); }

  /* Cert rows: hover + a visible external-link cue (nulled in print). */
  .cert { transition: border-color var(--transition), background var(--transition); }
  .cert:hover { border-color: var(--accent); background: var(--surface-3); }
  .cert__name a[href^="http"]::after, .res-list a[href^="http"]::after { content: " ↗"; color: var(--accent-2); font-size: .85em; }

  /* Option cards: clearer selected + hover affordance (esp. light theme). */
  .option { transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }
  .option:hover { box-shadow: none; }
  .option:has(input:checked) { box-shadow: inset 3px 0 0 0 var(--accent); }

  /* Progress bar → an 8-step stepper. */
  .progress { position: relative; }
  .progress::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--bg) calc(12.5% - 1px) 12.5%); }
  .progress__bar { }

  /* Callouts: icon slot so three in a row are scannable; study variant breaks the blue. */
  .callout { padding-inline-start: calc(var(--sp-4) + 1.4rem); }
  .callout::before { content: "i"; position: absolute; inset-inline-start: var(--sp-3); inset-block-start: calc(var(--sp-3) + .05rem);
    font-family: var(--font-mono); font-style: italic; color: var(--accent-2); font-weight: 800; }
  .callout { position: relative; }
  .callout--ok::before { content: "✓"; color: var(--ok); font-style: normal; }
  .callout--warn::before { content: "!"; color: var(--warn); font-style: normal; }
  .callout--study { border-inline-start-color: var(--accent); background: var(--accent-soft); }
  .callout--study::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; background: var(--accent);
    -webkit-mask: var(--i-edit) center/contain no-repeat; mask: var(--i-edit) center/contain no-repeat; }

  /* Chips: hover + semantic tint on the answer summary. */
  .chip { transition: border-color var(--transition); }
  .chip:hover { border-color: var(--border-strong); }
}

/* ---------- RECOMMENDER + PATH NETWORK ---------- */
@layer components {
  /* "We matched you to X" banner + confidence bars */
  .callout--match { border-inline-start-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
  .callout--match::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; background: var(--accent);
    -webkit-mask: var(--i-target) center/contain no-repeat; mask: var(--i-target) center/contain no-repeat; }
  .match__pct { color: var(--accent); font-family: var(--font-mono); }
  .match__bars { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .4rem; max-width: 380px; }
  .match__bars li { display: grid; grid-template-columns: 5.5rem 1fr 2.6rem; align-items: center; gap: .5rem; font-size: var(--step--1); font-family: var(--font-mono); }
  .match__track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
  .match__fill { display: block; height: 100%; background: var(--grad); }
  .match__val { text-align: end; color: var(--muted); }

  /* "Builds on" prerequisite line in each phase */
  .phase__prereq { color: var(--muted); font-size: var(--step--1); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
  .phase__prereq span { color: var(--accent-2); }

  /* Path-network map: a rail with tier-coloured nodes, branch stubs and milestones */
  .pathnet { margin-block: var(--sp-4) var(--sp-5); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .pathnet__spine { list-style: none; margin: 0; padding-inline-start: 26px; display: grid; gap: var(--sp-3); position: relative; }
  .pathnet__spine::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 8px; width: 2px; background: var(--border-strong); opacity: .7; }
  .pathnet__node { position: relative; display: grid; gap: .2rem; min-width: 0; }
  .pathnet__node[data-tier="foundation"] { --node: var(--accent-2); }
  .pathnet__node[data-tier="core"] { --node: var(--accent); }
  .pathnet__node[data-tier="specialization"] { --node: color-mix(in oklab, var(--accent) 45%, var(--accent-2)); }
  .pathnet__node[data-tier="certification"] { --node: var(--warn); }
  .pathnet__node[data-tier="career"] { --node: var(--ok); }
  .pathnet__node--ms { --node: var(--ok); }
  .pathnet__dot { position: absolute; inset-inline-start: -26px; inset-block-start: .2em; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--node); box-shadow: 0 0 0 4px var(--bg); }
  .pathnet__node--ms .pathnet__dot { border-radius: 3px; transform: rotate(45deg); }
  .pathnet__idx { font: 700 var(--step--1)/1 var(--font-mono); color: var(--faint); }
  .pathnet__name { font-weight: 700; overflow-wrap: anywhere; }
  .pathnet__tier { justify-self: start; font: 700 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--node); padding: .15rem .5rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--node) 45%, transparent); background: color-mix(in oklab, var(--node) 12%, transparent); margin-top: .15rem; }
  .pathnet__branches { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; padding: 0; list-style: none; }
  .pathnet__branches li { font: 600 var(--step--1)/1 var(--font-mono); color: var(--muted); padding: .25rem .55rem; border-radius: 999px; border: 1px dashed color-mix(in oklab, var(--node) 55%, var(--border-strong)); background: color-mix(in oklab, var(--node) 8%, transparent); }
  .pathnet__branches li::before { content: "↳ "; color: var(--node); }
  .pathnet__ms-blurb { color: var(--muted); font-size: var(--step--1); }

  /* Cross-track bridges */
  .bridges { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--sp-3); }
  .bridge { background: var(--surface); border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--accent-2); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
  .bridge__to { display: block; font-weight: 700; font-family: var(--font-mono); }
  .bridge__to span { color: var(--accent-2); }
  .bridge__why { display: block; color: var(--muted); font-size: var(--step--1); margin-top: .25rem; }
}

/* ---------- v3: progress, tweaks, hiring, FAQ, polish, mobile ---------- */
@layer components {
  /* Per-phase completion + progress bar */
  .phase__meta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
  .phase__check-label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); cursor: pointer; min-height: 32px; }
  .phase__check { width: 20px; height: 20px; accent-color: var(--accent); }
  .phase:has(.phase__check:checked) { border-color: color-mix(in oklab, var(--ok) 45%, var(--border)); }
  .phase:has(.phase__check:checked) .phase__name { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ok) 60%, transparent); }
  .plan-progress { margin: 0 0 var(--sp-5); }
  .plan-progress__track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
  .plan-progress__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width var(--transition); }
  .plan-progress__text { margin-top: .5rem; color: var(--muted); font-size: var(--step--1); font-family: var(--font-mono); }

  /* Regenerate-with-tweaks toolbar */
  .tweaks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
  .tweaks__lead { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
  .tweak { display: inline-flex; align-items: center; gap: .5rem; position: relative; }
  .tweak__k { font-size: var(--step--1); color: var(--muted); }
  /* Custom-themed dropdown: strip the native chrome and draw our own chevron. */
  .select-styled, .tweak select {
    appearance: none; -webkit-appearance: none;
    min-height: 40px; padding: .4rem 2rem .4rem .7rem;
    border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--surface-2); color: var(--text);
    font-family: var(--font-mono); font-size: var(--step--1); cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .tweak select::-ms-expand { display: none; }
  .tweak::after {
    content: "▾"; position: absolute; inset-inline-end: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--accent); pointer-events: none; font-size: .8rem;
  }
  .tweak select:hover { border-color: var(--accent); }
  .tweak select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
  .tweak select option { background: var(--surface); color: var(--text); }

  /* Community & getting hired */
  .hiring { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--sp-3); }
  .hiring__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
  .hiring__col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: var(--sp-2); }

  /* FAQ (details/summary) */
  .faq { max-width: var(--maxw); margin: var(--sp-6) auto 0; }
  .faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-top: var(--sp-2); overflow: hidden; }
  .faq__item summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; min-height: 44px; }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after { content: "+"; color: var(--accent); font-family: var(--font-mono); font-size: 1.3em; }
  .faq__item[open] summary::after { content: "−"; }
  .faq__item summary:hover { color: var(--accent); }
  .faq__item p { padding: 0 var(--sp-4) var(--sp-4); color: var(--muted); }

  /* Match banner: style the label column, crown the winner (PRISM #1). */
  .match__bars { min-width: 0; }
  .match__label { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .match__bars li:first-child .match__label { color: var(--text); font-weight: 700; }
  .match__bars li:first-child .match__val { color: var(--accent); font-weight: 700; }
  .match__fill { transform-origin: left center; }
  .match__bars li:not(:first-child) .match__fill { background: color-mix(in oklab, var(--accent-2) 55%, var(--surface-3)); box-shadow: none; }

  /* Section headers/dividers in the generated plan (PRISM #2). */
  .result__inner > h2 { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
  .result__inner > h2::before { content: ""; flex: 0 0 auto; width: .5rem; height: 1.05em; border-radius: 3px; background: var(--grad); }

  /* Pathnet node hover (PRISM #6). */
  .pathnet__node { transition: transform var(--transition); }
  .pathnet__node:hover { transform: translateX(2px); }
  .pathnet__dot { transition: box-shadow var(--transition); }
  .pathnet__node:hover .pathnet__dot { box-shadow: 0 0 0 4px var(--bg), 0 0 10px -1px var(--node); }

  /* Terminal caret (PRISM #4). */
  .term__cursor { display: inline-block; width: .55ch; height: 1.05em; vertical-align: text-bottom; background: var(--accent); border-radius: 1px; }

  /* Light-theme specialisation chip contrast (PRISM B2). */
  :root[data-theme="light"] .pathnet__node[data-tier="specialization"] .pathnet__tier { color: color-mix(in oklab, var(--node) 65%, var(--text)); }
}

/* Mobile experience polish */
@media (max-width: 640px) {
  .tweak select, .option input { font-size: 16px; }         /* stop iOS zoom-on-focus */
  .plan-actions .btn { flex: 1 1 auto; justify-content: center; }  /* full-width, easy-tap actions */
  .wizard__nav .btn { flex: 1 1 auto; justify-content: center; }
  .tweaks { flex-direction: column; align-items: stretch; }
  .tweak { justify-content: space-between; }
  .tweak select { flex: 1 1 auto; }
  .phase__top { flex-direction: column; }
  .phase__meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .hero__terminal { display: none; }                        /* free vertical space; it's decorative */
  .match__bars li { grid-template-columns: 4.5rem 1fr 2.4rem; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .option:hover { transform: none; }                        /* no hover-lift jitter on touch */
}

/* ---------- v4: build loader, neural network, theme cross-fade ---------- */
@layer components {
  /* "Building your roadmap" loader */
  .build-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    padding: var(--sp-4); background: color-mix(in oklab, var(--bg) 90%, black); opacity: 0; transition: opacity .25s ease; }
  .build-overlay.is-on { opacity: 1; }
  .build-term { width: min(560px, 92vw); border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: color-mix(in oklab, var(--surface) 94%, black); box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-mono); }
  .build-log { margin: 0; padding: var(--sp-4); font-size: .9rem; line-height: 1.9; color: var(--accent);
    min-height: 9em; white-space: pre-wrap; }
  .build-progress { height: 3px; background: var(--surface-3); }
  .build-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s linear; }

  /* Neural-network styling for the path map (nodes = neurons, spine = synapse) */
  .pathnet { background: radial-gradient(120% 80% at 100% 0, color-mix(in oklab, var(--link) 8%, transparent), transparent 60%), var(--surface); }
  .pathnet__dot {
    width: 16px; height: 16px; inset-inline-start: -27px;
    background: radial-gradient(circle at 38% 34%, color-mix(in oklab, var(--node) 92%, white), var(--node) 45%, color-mix(in oklab, var(--node) 35%, var(--surface)));
    border: 2px solid var(--node);
    box-shadow: 0 0 0 4px var(--bg), 0 0 10px -1px color-mix(in oklab, var(--node) 60%, transparent);
  }
  .pathnet__spine::before {
    background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--link) 70%, transparent) 22%, transparent 42%, color-mix(in oklab, var(--accent) 70%, transparent) 62%, transparent 82%);
    background-size: 100% 220%; opacity: .6;
  }
  .pathnet__branches li { position: relative; }

  /* Theme cross-fade: only while switching (added by JS), never a standing perf cost. */
  .theme-switching *, .theme-switching *::before, .theme-switching *::after {
    transition: background-color .34s ease, border-color .34s ease, color .34s ease, fill .34s ease !important;
  }
  /* View-Transition crossfade tuning (Chromium) */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Signal travelling down the synapse + gentle neuron pulse */
  .pathnet__spine::before { animation: pn-synapse 3.4s linear infinite; }
  @keyframes pn-synapse { from { background-position: 0 -110%; } to { background-position: 0 110%; } }
  .pathnet__node:not(.pathnet__node--ms) .pathnet__dot { animation: pn-neuron 2.6s ease-in-out infinite; }
  .pathnet__node:nth-child(2n) .pathnet__dot { animation-delay: .7s; }
  .pathnet__node:nth-child(3n) .pathnet__dot { animation-delay: 1.3s; }
  @keyframes pn-neuron {
    0%,100% { box-shadow: 0 0 0 4px var(--bg), 0 0 8px -2px color-mix(in oklab, var(--node) 55%, transparent); }
    50%     { box-shadow: 0 0 0 4px var(--bg), 0 0 17px 0 color-mix(in oklab, var(--node) 78%, transparent); }
  }
}

/* ---------- v6: network graph, collapsible tweaks ---------- */
@layer components {
  /* Path network as a wrapping neuron web with SVG synapse edges */
  .pnetx { position: relative; margin-block: var(--sp-4) var(--sp-5); padding: var(--sp-4); overflow: hidden;
    background: radial-gradient(130% 90% at 100% 0, color-mix(in oklab, var(--link) 9%, transparent), transparent 60%), var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); }
  .pnetx__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  .pnetx-edge { fill: none; stroke: color-mix(in oklab, var(--accent) 45%, transparent); stroke-width: 1.5; }
  .pnetx-edge--web { stroke: color-mix(in oklab, var(--link) 32%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
  .pnetx__nodes { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-start; margin: 0; padding: 0; list-style: none; }
  .pnetx__node { --node: var(--accent); display: inline-flex; align-items: center; gap: .55rem; max-width: 15rem;
    padding: .45rem .8rem; border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklab, var(--node) 42%, var(--border-strong));
    background: color-mix(in oklab, var(--node) 10%, var(--surface-2)); }
  .pnetx__node[data-tier="foundation"] { --node: var(--accent-2); }
  .pnetx__node[data-tier="core"] { --node: var(--accent); }
  .pnetx__node[data-tier="specialization"] { --node: color-mix(in oklab, var(--accent) 45%, var(--accent-2)); }
  .pnetx__node[data-tier="certification"] { --node: var(--warn); }
  .pnetx__node[data-tier="career"] { --node: var(--ok); }
  .pnetx__node--ms { --node: var(--ok); border-style: dashed; }
  .pnetx__node--branch { opacity: .92; }
  .pnetx__dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 38% 34%, color-mix(in oklab, var(--node) 92%, white), var(--node) 50%, color-mix(in oklab, var(--node) 30%, var(--surface)));
    box-shadow: 0 0 0 3px var(--surface), 0 0 10px -1px color-mix(in oklab, var(--node) 60%, transparent); }
  .pnetx__body { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
  .pnetx__idx { font: 700 .6rem/1 var(--font-mono); color: var(--faint); }
  .pnetx__name { font-weight: 600; font-size: var(--step--1); overflow-wrap: anywhere; }
  .pnetx__tier { font: 700 .58rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--node); }
  .pnetx__node--ms .pnetx__name { color: var(--ok); display: inline-flex; align-items: center; gap: .3rem; }

  /* Collapsible "Adjust your plan" toggle */
  .tweaks-wrap { margin: 0 0 var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
  .tweaks-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 46px;
    padding: var(--sp-3) var(--sp-4); font-family: var(--font-mono); font-weight: 700; color: var(--text); }
  .tweaks-summary::-webkit-details-marker { display: none; }
  .tweaks-summary::after { content: "▾"; margin-inline-start: auto; color: var(--accent); transition: transform var(--transition); }
  .tweaks-wrap[open] .tweaks-summary::after { transform: rotate(180deg); }
  .tweaks-summary:hover { color: var(--accent); }
  .tweaks-wrap .tweaks { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }

  /* Cert price can carry USD + IQD — let it wrap rather than overflow */
  .cert__price { white-space: normal; text-align: end; }
}

@media (prefers-reduced-motion: no-preference) {
  .pnetx__node:not(.pnetx__node--ms) .pnetx__dot { animation: pn-neuron 2.6s ease-in-out infinite; }
  .pnetx__node:nth-child(2n) .pnetx__dot { animation-delay: .6s; }
  .pnetx__node:nth-child(3n) .pnetx__dot { animation-delay: 1.2s; }
}

/* ---------- v5: i18n (glitch toggle, RTL) ---------- */
@layer components {
  .header-controls { display: flex; align-items: center; gap: var(--sp-2); }
  /* Below ~360px the brand + two labelled toggles overflow. Drop to icon-only toggles
     (aria-labels keep them accessible; icons stay a 44px tap target). */
  @media (max-width: 360px) {
    .header-controls .theme-toggle__label { display: none; }
    .header-controls .theme-toggle { min-width: 44px; justify-content: center; gap: 0; padding-inline: .6rem; }
  }

  /* "Hacker" language-switch glitch */
  .lang-glitch { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden;
    background: color-mix(in oklab, var(--bg) 88%, black); opacity: 0; transition: opacity .12s ease; }
  .lang-glitch.is-on { opacity: 1; }
  .lang-glitch__rain { position: absolute; inset: 0; margin: 0; padding: var(--sp-3); white-space: pre; overflow: hidden;
    font-family: var(--font-mono); font-size: .95rem; line-height: 1.2; color: var(--accent); opacity: .28; user-select: none; }
  .lang-glitch__label { position: relative; font-family: var(--font-mono); font-weight: 800; letter-spacing: .14em;
    font-size: clamp(2.2rem, 11vw, 5rem); color: var(--accent); text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 60%, transparent); }

  /* RTL: keep code / data / latin runs left-to-right for readability.
     NOTE: .phase__dur is intentionally NOT here — its interleaved "10 أسبوع · ~2 أشهر"
     only orders correctly in the natural RTL flow; forcing ltr scrambles it. */
  [dir="rtl"] .term__body, [dir="rtl"] .build-log, [dir="rtl"] .pathnet__idx,
  [dir="rtl"] .cert__price, [dir="rtl"] .match__bars li,
  [dir="rtl"] .hero__stats strong, [dir="rtl"] .lang-glitch__rain { direction: ltr; }
  /* .stat__num stays natural RTL so it aligns to the start (right) under its Arabic label and
     single-digit ranges don't flip; the numeric run itself is LTR-isolated in JS (lri/fmtTotal). */
  [dir="rtl"] .hero__stats li, [dir="rtl"] .stat, [dir="rtl"] .stat__num, [dir="rtl"] .cert__lvl { text-align: start; }
  [dir="rtl"] .hero__stats strong { text-align: right; }
  [dir="rtl"] .tweak select { background-position: left .7rem center; }

  /* Arabic polish: Latin letter-spacing (tracking, +/-) breaks Arabic's connected letters —
     neutralise it on text elements; give Arabic headings more line-height for the taller
     glyphs/diacritics so nothing clips. (Brand stays LTR/Latin, so it keeps its tracking.) */
  [dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .btn, [dir="rtl"] .syschip,
  [dir="rtl"] .hero__title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
  [dir="rtl"] .step__legend, [dir="rtl"] .plan-head__title, [dir="rtl"] .plan-head__eyebrow,
  [dir="rtl"] .stack__name, [dir="rtl"] .option__label, [dir="rtl"] .chip, [dir="rtl"] .theme-toggle {
    letter-spacing: normal;
  }
  [dir="rtl"] .hero__title { line-height: 1.28; }
  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .plan-head__title, [dir="rtl"] .step__legend { line-height: 1.32; }
  [dir="rtl"] .hero__lede, [dir="rtl"] .step__help, [dir="rtl"] .faq p, [dir="rtl"] .site-footer { line-height: 1.85; }

  /* Arabic renders poorly in the Latin monospace stack (it has no Arabic glyphs, so it
     falls back with monospace-ish spacing). Route Arabic UI text to the sans stack, which
     carries Noto Sans Arabic. Code / data / number runs stay mono (they're LTR anyway). */
  [dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .btn, [dir="rtl"] .pricepill,
  [dir="rtl"] .stack__name, [dir="rtl"] .stack__desc, [dir="rtl"] .chip, [dir="rtl"] .syschip,
  [dir="rtl"] .theme-toggle, [dir="rtl"] .plan-head__eyebrow, [dir="rtl"] .wizard__lean,
  [dir="rtl"] .wizard__progress-text, [dir="rtl"] .plan-progress__text, [dir="rtl"] .celebrate__msg,
  [dir="rtl"] .tweak__k, [dir="rtl"] .plan-progress__text, [dir="rtl"] .cert__lvl {
    font-family: var(--font-sans);
  }

/* ---------- PRINT (this is the "download as PDF" path) ---------- */
@layer print {
  @media print {
    @page { margin: 14mm; }
    /* Kill animations/transitions in print: the phase fade-up uses `backwards` fill,
       which would otherwise freeze phases at opacity:0 and blank whole pages. Also
       drop the programmatic focus ring so it doesn't render into the PDF. */
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .phase, .step-enter { opacity: 1 !important; transform: none !important; }
    :focus, :focus-visible { outline: none !important; }
    :root { --bg:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#fff;
            --text:#000; --muted:#333; --faint:#555; --border:#bbb; --border-strong:#999;
            --accent:#1a5c00; --accent-2:#0b3ea8; --accent-soft:#eef7e0; --grad:#1a5c00; }
    body { background: #fff !important; color: #000; font-size: 11pt; }
    .site-header, .hero, .wizard, .site-footer, .static-ref, .plan-actions,
    .skip-link, .theme-toggle, #hero, .faq-section { display: none !important; }
    .timeline::before, .phase::before, .plan-head::before,
    .cert-list--ladder::before, .tier-legend { display: none !important; }
    .cert-list--ladder > .cert::before { display: none !important; }
    .cert-list--ladder { padding-inline-start: 0; }
    .res-list a[href^="http"]::after { content: none !important; }
    main, section { padding: 0; }
    .timeline { padding-inline-start: 0; }
    .result__inner { max-width: none; }
    .plan-head, .stat, .cert, .callout { box-shadow: none !important; border: 1px solid #ccc; break-inside: avoid; }
    /* Keep each "subject" whole: never split a phase, its blocks, the summary,
       the ladder or a callout across two pages. */
    .phase { box-shadow: none !important; border: 1px solid #ccc; }
    .phase, .phase__top, .phase__grid, .phase__block, .certs-box, .cert,
    .plan-summary, .cert-list, .cert-list--ladder, .plan-head { break-inside: avoid; page-break-inside: avoid; }
    /* Never strand a heading at the bottom of a page, away from its content. */
    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
    .phase__dur { border: 1px solid var(--accent); }
    a { color: #000; text-decoration: underline; }
    /* Only expand URLs for certification links — resource lists would be too noisy. */
    .cert__name a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: var(--faint); word-break: break-all; }
    .grad { -webkit-text-fill-color: currentColor; color: var(--accent) !important; }

    /* Compaction: keep every phase whole AND fit ~two per page (less white space). */
    .result__inner { font-size: 10pt; line-height: 1.4; }
    .plan-head { padding: 12pt 14pt; }
    .plan-head__title { font-size: 19pt; }
    .plan-head__sub { font-size: 9.5pt; margin-top: 5pt; }
    .plan-meta { margin-top: 7pt; gap: 5pt; }
    .plan-summary { gap: 8pt; margin-bottom: 10pt; }
    .stat { padding: 9pt 10pt; }
    .stat__num { font-size: 15pt; }
    .plan-summary > .stat--lead .stat__num { font-size: 19pt; }
    .callout { margin: 7pt 0; padding: 7pt 10pt 7pt 24pt; font-size: 9pt; }
    h2 { font-size: 13.5pt; margin-top: 10pt !important; margin-bottom: 3pt; }
    .step__help { font-size: 9pt; }
    .timeline { gap: 9pt; }
    .phase { padding: 9pt 11pt; }
    .phase__name { font-size: 12pt; }
    .phase__idx, .phase__badge { font-size: 7.5pt; }
    .phase__dur { font-size: 8pt; padding: 2pt 6pt; }
    .phase__focus { margin: 4pt 0; font-size: 9pt; }
    .phase__grid { gap: 10pt; margin-top: 3pt; }
    .phase__block h4 { margin-bottom: 2pt; font-size: 7.5pt; }
    .phase__list li { padding: .5pt 0; font-size: 9pt; }
    .res-note { font-size: 7.5pt; }
    .certs-box { margin-top: 5pt; padding-top: 5pt; }
    .cert { padding: 4pt 7pt; }
    .cert-list { gap: 4pt; }

    /* Network graph: keep chips, drop the SVG edges/glow in print. */
    .pnetx { background: #fff; border: 1px solid #ccc; break-inside: avoid; }
    .pnetx__edges { display: none !important; }
    .pnetx__node { break-inside: avoid; box-shadow: none !important; }
    /* Path network + bridges: readable, unsplit, no decorative rails. */
    .pathnet { background: #fff; border: 1px solid #ccc; padding: 8pt; break-inside: avoid; }
    .pathnet__spine { padding-inline-start: 0; }
    .pathnet__spine::before, .pathnet__dot { display: none !important; }
    .pathnet__node { break-inside: avoid; page-break-inside: avoid; }
    .pathnet__tier, .pathnet__branches li { border: 1px solid #999; background: #fff; color: #000; }
    .bridges { break-inside: avoid; }
    .bridge { break-inside: avoid; }
    .match__bars { display: none !important; }   /* decorative bars add nothing to print */
    .callout--match { break-inside: avoid; }
    /* Interactive-only controls never belong in the PDF. */
    .tweaks, .phase__check-label { display: none !important; }
    .plan-progress { break-inside: avoid; }
    .hiring, .hiring__col { break-inside: avoid; }
    /* Clean section headers + a branded cover line (PRISM #2/#7). */
    .result__inner > h2 { border-top: 0; padding-top: 0; }
    .result__inner > h2::before { display: none; }
    .result__inner::before {
      content: "CYBERPATH — personalised cybersecurity roadmap";
      display: block; font-family: var(--font-mono); font-size: 8pt; letter-spacing: .12em;
      text-transform: uppercase; color: var(--faint);
      border-bottom: 1px solid #ccc; padding-bottom: 4pt; margin-bottom: 8pt;
    }

    /* Watermark — repeats on every printed page (fixed elements paint per page). */
    .print-watermark {
      display: flex !important; position: fixed; inset: 0; z-index: 1000;
      align-items: center; justify-content: center; pointer-events: none;
      font-family: var(--font-mono); font-weight: 800; text-transform: uppercase;
      letter-spacing: .14em; white-space: nowrap; font-size: 78pt; line-height: 1;
      color: rgba(26, 92, 0, .07);
    }
    .print-watermark span { transform: rotate(-32deg); }
    .print-watermark small { display: block; font-size: .28em; letter-spacing: .3em; text-align: center; margin-top: .4em; color: rgba(11, 62, 168, .09); }
  }
}
/* Watermark is print-only. */
.print-watermark { display: none; }