/* whizply.css — the design system for every signed-in page.
 *
 * SOURCE OF TRUTH: the brand theme ("Whizply — Homepage v3"). Every colour, radius, shadow and
 * type choice below is lifted from it; the few tokens the theme did not need (warning/danger
 * tints, a second surface, a stronger border) are derived from its palette, not invented.
 *
 * Load order on a page:  fonts.css  ->  whizply.css  ->  (home.css on the marketing page only)
 * Nothing in here depends on the legacy app.css/components.css/shell.css, which only the
 * untouched login/signup pages still load.
 *
 * Sections:  1 tokens   2 base   3 type   4 shell   5 page layout   6 controls   7 surfaces
 *            8 feedback 9 overlays 10 domain blocks 11 utilities 12 responsive 13 motion
 */

/* ── 1 tokens ──────────────────────────────────────────────────────────────── */
/* PALETTES (2026-10-14). Two colour themes, each light and dark:
     Violet  the default: white cards on a faint cool wash, navy ink, slate secondary text and a
             Stripe-like purple for fills, buttons and focus (the `:root` and dark blocks below).
     Warm    the original cream and orange, kept as a choice: `html[data-palette="warm"]`, set
             before first paint by theme-boot.js from Settings → Appearance ("Colour theme").
   Components use these tokens only, never a literal colour, so a palette is just a set of
   values. Measured contrast (WCAG 2.x), Violet light / dark:
     ink on surface, page, surface-2, accent-soft    15.5 14.7 14.5 13.7  /  14.8 16.0 13.6 11.7
     sub (subtitles, secondary) on the same           9.5 9.0 8.9 8.4      /  10.2 11.0 9.4 8.1
     muted (meta, placeholders) on the same           6.3 6.0 5.9 5.6      /  7.6 8.2 7.0 6.1
     accent-deep (links, accent text), same three     6.8 6.4 6.3          /  8.0 8.6 7.3
     accent-ink on accent-soft (chips, selected)      6.7                  /  8.1
     button label on --btn / on its hover             4.7 / 5.9            /  4.7 / 5.3
     UI: accent on surface / page (focus ring, icons) 4.7 / 4.5            /  5.6 / 6.1
     UI: switch off track on surface / page           3.5 / 3.3            /  4.2 / 4.5
     UI: checkbox edge (--muted) on surface           6.3                  /  7.6
   (2026-10-15) --sub and --muted were darkened, from 7.8 / 5.2:1 on white, because subtitles
   read as too light; the hierarchy holds: ink 15.5, sub 9.5, muted 6.3.
     ok, warn, bad, info inks on their tints          5.5 5.3 5.5 7.5      /  8.5 8.8 7.9 8.4
   Lines are boundaries, not information: --line 1.2:1, a field's 1.5px edge 1.4:1 and a line
   button's 1px edge 1.8:1 in light (1.3, 1.6 and 2.3:1 in dark); the label, or the field's own
   label, says what it is, as in the Warm palette. */
:root {
  color-scheme: light;
  --bg: #F6F9FC;
  --bg-deep: #EDF1F7;
  --surface: #FFFFFF;
  --surface-2: #F4F7FB;
  --glass: rgba(255, 255, 255, .78);
  --ink: #0A2540;
  --navy: #0A2540;
  --sub: #364759;
  --muted: #506176;
  /* Text ON --accent-soft: a step darker than --accent-deep, so a selected chip reads crisply. */
  --accent-ink: #4535D9;
  --line: #E3E8EE;
  --line-strong: #D3DBE5;
  /* A line button's 1px edge (about 2:1 on white): --line-strong held a 1.5px border, and at
     1px it went soft. The label carries the button; this keeps the edge crisp. */
  --line-control: #B5C0CD;
  /* A switch's off track: 3:1 against white and the page (WCAG 1.4.11); --line-strong was 1.5:1. */
  --switch-off: #7D8A9C;
  --dash: #A8A3FF;
  --accent: #635BFF;
  --accent-deep: #4F3BE6;   /* text accent: 6.3:1+ on every light surface */
  --accent-soft: #EEF0FF;
  --accent-ring: #D8DAFF;
  --btn: #635BFF;
  --btn-hover: #5249F0;
  --btn-ink: #FFFFFF;
  --hl: #DCDDFF;
  --ok: #E6F2E8;
  --ok-ink: #2F6B44;
  --warn: #FCF0D7;
  --warn-ink: #8A5A00;
  --bad: #FCE5E1;
  --bad-ink: #B42318;
  --info: #E9EEF8;
  --info-ink: #2F4B7C;
  --scrim: rgba(10, 37, 64, .45);
  --btn-accent: #635BFF; --btn-accent-ink: #FFFFFF; --btn-accent-hover: #5249F0;
  --btn-danger-hover: #F9D3CD;
  /* The brand mark (shell.js `brandMark`): the W's gradient and its spark. */
  --brand-1: #8A84FF; --brand-2: #4F3BE6; --brand-spark: #635BFF;
  /* Hero art only (the sign-in panel's orb): the one place a gradient is allowed, Stripe-style. */
  --hero-orb: radial-gradient(circle at 24% 56%, rgba(99, 91, 255, .55), transparent 46%),
    radial-gradient(circle at 44% 80%, rgba(255, 92, 170, .45), transparent 40%),
    radial-gradient(circle at 64% 62%, rgba(255, 168, 82, .42), transparent 38%);

  /* BANDS (2026-10-15, colour v2). Contrast-matched section colours, so a page is not white with
     one accent: each band is a background with its OWN near-black (or white) text, a subtext in a
     deep tone of the band's hue, an accent-text (link) colour, a UI accent, a surface for cards on
     it, a line and a chip pair. The band classes in section 7b (`.wz-band--violet|navy|mint`,
     `.wz-card--tint|mint|navy`, `.wz-prompt--violet|mint|navy`, `.wz-empty--tint`,
     `.wz-page-head--band`) map these onto --ink, --sub, --accent… so every component inside one
     takes the band's colours by itself. Names are by role in Violet; the Warm palette holds its
     own equivalents under the same names (violet → apricot, navy → espresso, mint → rose).
       violet  a soft violet band: lavender ground, near-black violet ink, deep violet subtext
       navy    the deep band: navy ground, white ink, soft violet subtext, a lightened accent; a
               local dark theme (its buttons are white with violet text, as on stripe.com)
       mint    the support tint (2026-10-15: a cool sky periwinkle, no longer green, which sat
               outside the violet/navy family): pale sky ground, near-black blue ink, deep blue
               subtext. The name stays, so every use (the homepage market, the job drawer's key
               facts, `.wz-card--mint`, mint prompts) changed with the values
       --wash-hero  a soft gradient for a hero (the marketing pages' top); --wash-band the
               page-head band's gentler glow, over --band-violet-bg
     Measured contrast (WCAG 2.x). Text 4.5:1 and UI 3:1 are the floors; every subtext is 6.2+.
                         ink  sub  link | UI accent  button | ink/sub on a card | chip text
       Violet light  violet 15.6 8.4 6.5 | 4.0  4.0          | 18.2 / 9.9        | 6.8
                     navy   15.5 9.6 8.2 | 5.3  15.5 (white) | 12.9 / 8.0        | 9.0
                     mint   14.0 7.4 6.3 | 4.2  3.9          | 16.9 / 8.9        | 6.9
       Violet dark   violet 15.2 10.1 9.7| 6.4  3.5          | 13.3 / 8.9        | 9.2
                     navy   18.3 11.6 10.1| 6.4 18.3 (white) | 15.7 / 9.9        | 9.5
                     mint   13.7 9.1 8.3 | 6.0  3.2          | 12.0 / 8.0        | 8.3
       Warm light    apricot 14.7 7.2 5.5| 3.5  4.0          | 17.7 / 8.6        | 5.8
                     espresso 16.0 11.2 9.5| 7.2 16.0 (white)| 13.5 / 9.4        | 9.2
                     rose   14.9 8.0 6.2 | 4.4  4.0          | 17.9 / 9.6        | 6.5
       Warm dark     apricot 13.7 9.3 7.5| 5.5  5.5          | 12.0 / 8.1        | 7.8
                     espresso 18.4 12.6 10.4| 7.1 18.4 (white)| 15.9 / 10.9      | 10.1
                     rose   15.3 9.7 8.7 | 5.8  6.2          | 13.4 / 8.5        | 9.7
     The washes, at their most tinted point: hero (Violet light / dark, Warm light / dark) ink
     11.5 / 12.0 / 14.0 / 10.9, sub 7.1 / 8.2 / 7.0 / 7.0, accent button 3.5 / 3.1 / 3.8 / 4.7;
     the page-head band sub 7.3 / 8.7 / 6.4 / 7.3, button 3.5 / 3.0 / 3.6 / 4.4; the navy band's
     glow sub 7.0+ and accent 3.9+ (its buttons are white). The washes' second glow is sky blue
     now (it was mint), with the band.
     Headings (--ink-heading, --band-*-heading), on page / card / hero wash / own band:
       Violet light 10.8 / 11.4 / 9.1 / violet 9.8, mint 9.8      dark 11.6 / 10.8 / 10.7 / 11.3, 10.6
       Warm light    8.7 /  9.7 / 8.2 / apricot 8.1, rose 8.8     dark 12.5 / 11.5 / 11.3 / 10.2, 11.3
       navy band: white, 15.5+. A mint-band bar (accent on its chip track) is 3.7:1 or more. */
  --band-violet-bg: #EEEBFF; --band-violet-ink: #120F38; --band-violet-sub: #3F3887; --band-violet-link: #4535D9;
  --band-violet-accent: #635BFF; --band-violet-surface: #FFFFFF; --band-violet-line: #DCD7FF;
  --band-violet-chip: #DFDBFF; --band-violet-chip-ink: #3A2BC2;
  --band-navy-bg: #0A2540; --band-navy-ink: #FFFFFF; --band-navy-sub: #C9C6FF; --band-navy-link: #B9B5FF;
  --band-navy-accent: #8F89FF; --band-navy-surface: #13325A; --band-navy-line: #26476F;
  --band-navy-chip: #262E6E; --band-navy-chip-ink: #DAD8FF;
  --band-navy-btn: #FFFFFF; --band-navy-btn-hover: #EEEBFF; --band-navy-btn-ink: #3A2BC2;
  --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(99, 91, 255, .26), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(127, 158, 255, .14), transparent 70%);
  /* The navy band's status tints: a dark band in every mode, so one set serves all four. */
  --band-navy-ok: #11392F; --band-navy-ok-ink: #8FE0B2; --band-navy-warn: #3A2E12; --band-navy-warn-ink: #F1C76E;
  --band-navy-bad: #43202B; --band-navy-bad-ink: #F7A9AC; --band-navy-info: #18305A; --band-navy-info-ink: #A9C4F5;
  --band-mint-bg: #DFEAFF; --band-mint-ink: #0A1B3F; --band-mint-sub: #294884; --band-mint-link: #2347C4;
  --band-mint-accent: #3A60EE; --band-mint-surface: #FFFFFF; --band-mint-line: #C4D7FA;
  --band-mint-chip: #CBDDFD; --band-mint-chip-ink: #1C3CA3;
  /* HEADINGS (2026-10-15). Page and section titles (H1, H2) are set in a deep indigo, not the
     navy body ink, so a heading reads as a heading at a glance; each band has its own (white on
     navy). Card titles (H3) keep --ink. All 8:1 or more on their grounds (section 1 table). */
  --ink-heading: #3020A0;
  --band-violet-heading: #3020A0; --band-navy-heading: #FFFFFF; --band-mint-heading: #1C2B8C;
  --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(99, 91, 255, .16), transparent 70%),
    radial-gradient(50% 70% at 95% 5%, rgba(58, 96, 238, .10), transparent 70%),
    linear-gradient(180deg, #F4F2FF, rgba(244, 242, 255, 0));
  --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(99, 91, 255, .12), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(58, 96, 238, .09), transparent 70%);

  /* The mascot (shell.js `brandMark`, the marketing pages' header and footer): the hero robot's
     head as a mark beside the wordmark. Its shell stays light in every theme, as the robot's does. */
  --bot-shell: #FFFFFF; --bot-edge: #8A84FF; --bot-visor: #17134A; --bot-face: #FFFFFF; --bot-accent: #635BFF;

  /* Company logo tiles (the marketing pages): always a light tile, because logos are drawn for
     light grounds, with an edge and a soft lift so a white tile reads on a white card. Companies
     with no logo get a monogram in one of six brand-like tints (ink on tint 5.4:1 or more). */
  --logo-tile: #FFFFFF; --logo-ink: #0A2540;
  --logo-edge: rgba(10, 37, 64, .12); --logo-lift: 0 1px 2px rgba(10, 37, 64, .1);
  --mono-0-bg: #E4E1FF; --mono-0-ink: #3A2BC2; --mono-1-bg: #DCE8FF; --mono-1-ink: #1E3A8A;
  --mono-2-bg: #D5F2E3; --mono-2-ink: #1D5A35; --mono-3-bg: #F6DDF0; --mono-3-ink: #85205F;
  --mono-4-bg: #FFEDBF; --mono-4-ink: #6B4700; --mono-5-bg: #D3F0F5; --mono-5-ink: #135E6B;

  --shadow-sm: 0 1px 2px rgba(10, 37, 64, .06);
  --shadow: 0 14px 30px -18px rgba(50, 50, 93, .32);
  --shadow-lg: 0 36px 70px -36px rgba(50, 50, 93, .45);
  /* Floating UI anchored to a control (menus, listboxes, the activity panel): a contact shadow
     plus a short ambient one. --shadow-lg is a dialog's elevation and read as heavy on a menu. */
  --shadow-pop: 0 1px 2px rgba(10, 37, 64, .08), 0 12px 32px -12px rgba(50, 50, 93, .32);
  /* The segmented control's selected thumb, and a switch's knob. */
  --shadow-thumb: 0 1px 3px rgba(10, 37, 64, .14);
  --shadow-knob: 0 1px 3px rgba(10, 37, 64, .28);
  /* Hover wash for quiet rows and buttons. --surface-2 vanished on white cards and on the
     sidebar glass; a thin accent wash reads on every surface, in both themes. */
  --tint: color-mix(in srgb, var(--accent-soft) 62%, transparent);
  /* Skeleton placeholders: a tint that works on the page and on a white card alike. */
  --sk-base: rgba(10, 37, 64, .06);
  --sk-shine: rgba(255, 255, 255, .6);

  --r-xs: 6px;        /* focus outlines, inline code, tiny inline buttons */
  --r-sm: 10px;
  --r-md: 12px;       /* fields, search boxes, list rows, nav items */
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --pill: 999px;      /* chips, tags, filter pills, toggles, round icon buttons — never a button */

  /* BUTTONS (2026-10-14, design-system pass). Crisp corners, not pills; a 1px border; three
     heights on one 4px padding rhythm. Every real button takes these — `.wz-btn` and anything
     a page builds by hand — while chips, tags, filter pills and round icon buttons stay pills. */
  --r-btn: 10px;
  --r-btn-sm: calc(var(--r-btn) - 2px);   /* the 34px button: the same corner, optically */
  --btn-h-sm: 34px; --btn-h: 42px; --btn-h-lg: 48px;
  --btn-px-sm: 12px; --btn-px: 16px; --btn-px-lg: 20px;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* ONE FAMILY (2026-10-14, design-system pass). Titles, numbers and body text are all Plus
     Jakarta Sans; the serif display faces are gone from the app. The two old names stay, pointed
     at the sans, so every rule written against them follows instead of reaching for a serif. */
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;   /* code and nothing else */

  /* TYPE SCALE (2026-10-14). One step per role instead of the 22 ad-hoc sizes the pages had grown
     (12, 12.5, 13, 13.5, 14, 14.5 … within a single screen). Captions never go below 11.5px. */
  --fs-2xs: 11.5px;   /* micro labels: uppercase in menus and rings, counters, badges */
  --fs-xs: 12.5px;    /* captions, meta, eyebrows */
  --fs-sm: 13.5px;    /* small text, labels, chips, hints, small buttons */
  --fs-md: 14.5px;    /* dense UI text: lists, menus, table cells, buttons, tile titles */
  --fs-base: 15px;    /* body */
  --fs-lead: 16px;    /* emphasised body, H3 */
  --fs-lg: 18px;      /* a heading inside prose */
  --fs-xl: 22px;      /* H2 */
  --fs-2xl: 26px;

  /* TYPE ROLES (2026-10-14, design-system pass). Every piece of text on every page takes one of
     these, and a role keeps its size, weight, tracking and leading wherever it appears. Five
     weights and no in-betweens: 400 body, 500 quiet UI, 600 labels and buttons, 700 titles,
     800 the page title.

       role                size                weight  tracking  leading  e.g.
       H1  page title      --fs-h1  30 → 26     800    -.022em    1.15    .wz-title, .au-title
       H2  section title   --fs-h2  22 → 20     700    -.016em    1.25    .wz-h2, .wz-shelf__title,
                                                                          dialog and drawer titles
       H3  card title      --fs-h3  16          700    -.01em     1.35    .wz-h3, .wz-card__title,
                                                                          .wz-prompt__title, job titles
       H4  tile title      --fs-md  14.5        700     0         1.35    course / company / report tiles
       body                --fs-base 15 → 14.5  400     0         1.55    body.wz, .wz-prose
       small               --fs-sm  13.5        400     0         1.5     .wz-small, meta lines, hints
       caption             --fs-xs  12.5        400     0         1.45    .wz-xs, timestamps, counts
       label               --fs-sm  13.5        600     0         1.4     .wz-label, chips, tags
       eyebrow             --fs-xs  12.5 CAPS   700    .08em      1.3     .wz-eyebrow, .wz-dsec__title,
                                                                          table heads (--fs-2xs in menus)
       number              any size             700    -.02em             .wz-num, rings, stat values;
                                                                          tabular figures
     (30 → 26: desktop → phone.) */
  --fs-h1: clamp(26px, 1.25vw + 13px, 30px);
  --fs-h2: 22px;
  --fs-h2-sm: 20px;   /* H2 on a phone, or in a narrow column */
  --fs-h3: var(--fs-lead);
  --fs-display: clamp(34px, 3.4vw, 50px);   /* a marketing headline: the sign-in panel */
  --fw-h1: 800; --fw-h2: 700; --fw-h3: 700;
  --lh-h1: 1.15; --lh-h2: 1.25; --lh-h3: 1.35;
  --ls-h1: -.022em; --ls-h2: -.016em; --ls-h3: -.01em; --ls-display: -.03em;
  --ls-caps: .08em;   /* every uppercase label */
  --ls-num: -.02em;   /* big figures */

  /* SPACING (2026-10-14). A 4px scale. The named steps set the rhythm BETWEEN blocks, so every
     page spaces its sections the same way; inside components the scale is used as-is. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px;
  --head-gap: var(--space-6);      /* page title block -> first section */
  --section-gap: var(--space-7);   /* between a page's top-level sections */
  --block-gap: var(--space-4);     /* between cards in a column or grid */

  /* MOTION (2026-10-14). Three durations and four curves for the whole app, so motion reads as
     one system: feedback in --dur-1, small surfaces in --dur-2, large surfaces in --dur-3, and
     nothing past ~400ms except a loading shimmer. Distances are tokens too: reduced motion
     (section 13) zeroes them, which turns every movement into a plain fade. app/components.js
     reads these for the animations it starts, so JS and CSS move on the same curve. */
  --dur-1: 120ms;   /* hover tints, presses, toggles */
  --dur-2: 200ms;   /* menus, toasts, tabs, chips, exits */
  --dur-3: 320ms;   /* dialogs, drawers, the page entrance, value reveals */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* entrances: a quick start, a soft landing */
  --ease-in: cubic-bezier(.55, 0, 1, .45);        /* exits: get out of the way, never linger */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* on-screen moves between two states */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* a hint of overshoot, for small toggles only */
  --rise: 8px;        /* content entrance */
  --nudge: 4px;       /* popovers and toasts */
  --lift: -2px;       /* an interactive card on hover */
  --press: .98;       /* a button while pressed */
  --press-icon: .92;  /* a small round icon button while pressed */
  --pop: .96;         /* the scale dialogs and menus grow from */
  /* MOTION v2 (2026-10-15). Scroll reveals, page transitions and the marketing pages' idle
     motion. A reveal is the one entrance allowed past ~400ms: a block arriving from below the
     fold travels further than a menu, so it takes a little longer, and blocks arriving together
     follow one another --stagger apart. The idle loops (the homepage hero only) are long and
     small on purpose; they stop off screen and are off under reduced motion. */
  --dur-reveal: 440ms;  /* a block rising into view as it is scrolled to */
  --stagger: 45ms;      /* between blocks (cards, rows, lines) arriving together */
  --reveal-rise: 14px;  /* how far a revealed block travels */
  --dur-float: 6.4s;    /* the hero robot's idle float, one breath */
  --dur-drift: 26s;     /* the hero's background light, one slow drift */
  --dur-pulse: 2.4s;    /* a working indicator's slow pulse (an empty state while matches are ranked) */
  /* The original pair, kept so page CSS written against it moves on the same curve. */
  --ease: var(--ease-out);
  --dur: var(--dur-2);

  --sidebar-w: 264px;
  --content-max: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1220; --bg-deep: #080D19; --surface: #111A2E; --surface-2: #16213A;
    --glass: rgba(17, 26, 46, .82); --ink: #E8EDF7; --navy: #E8EDF7; --sub: #BCC7D9;
    --muted: #A0ADC2; --accent-ink: #C3C0FF; --line: #222D47; --line-strong: #2E3B59; --line-control: #45557A; --dash: #5A57B0; --switch-off: #6F7D96;
    --accent: #8A84FF; --accent-deep: #ABA6FF; --accent-soft: #24285A; --accent-ring: #363B80;
    --btn: #635BFF; --btn-hover: #5A52F5; --btn-ink: #FFFFFF; --hl: #33377A;
    --ok: #133126; --ok-ink: #8FD9AE; --warn: #352A10; --warn-ink: #F1C76E;
    --bad: #3B1A21; --bad-ink: #F7A3A6; --info: #172748; --info-ink: #A9C4F5;
    --scrim: rgba(2, 6, 18, .6);
    --shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
    --shadow-lg: 0 36px 70px -36px rgba(0, 0, 0, .7);
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .72);
    --sk-base: rgba(200, 214, 255, .06); --sk-shine: rgba(200, 214, 255, .08);
    --btn-accent: #635BFF; --btn-accent-ink: #FFFFFF; --btn-accent-hover: #5A52F5; --btn-danger-hover: #4A2029;
    --brand-1: #A9A4FF; --brand-2: #7A73FF; --brand-spark: #8A84FF;
    --hero-orb: radial-gradient(circle at 24% 56%, rgba(99, 91, 255, .42), transparent 46%),
      radial-gradient(circle at 44% 80%, rgba(255, 92, 170, .26), transparent 40%),
      radial-gradient(circle at 64% 62%, rgba(255, 168, 82, .2), transparent 38%);
    --band-violet-bg: #1B1847; --band-violet-ink: #F5F4FF; --band-violet-sub: #C9C5F7; --band-violet-link: #C3C0FF;
    --band-violet-accent: #9A94FF; --band-violet-surface: #25215A; --band-violet-line: #342F75;
    --band-violet-chip: #302B72; --band-violet-chip-ink: #DEDCFF;
    --band-navy-bg: #08142B; --band-navy-ink: #FFFFFF; --band-navy-sub: #CBC8FF; --band-navy-link: #BDB9FF;
    --band-navy-accent: #918BFF; --band-navy-surface: #12233F; --band-navy-line: #22365C;
    --band-navy-chip: #262C6E; --band-navy-chip-ink: #DEDCFF;
    --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(99, 91, 255, .24), transparent 70%),
      radial-gradient(45% 60% at 100% 100%, rgba(127, 158, 255, .12), transparent 70%);
    --band-mint-bg: #13244B; --band-mint-ink: #EEF3FF; --band-mint-sub: #B5C8F2; --band-mint-link: #A6BFFF;
    --band-mint-accent: #7F9EFF; --band-mint-surface: #1A2D5C; --band-mint-line: #28407A;
    --band-mint-chip: #213A73; --band-mint-chip-ink: #D4E0FF;
    --ink-heading: #CBC6FF; --band-violet-heading: #D4D0FF; --band-mint-heading: #C9D7FF;
    --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(99, 91, 255, .18), transparent 70%),
      radial-gradient(50% 70% at 95% 5%, rgba(127, 158, 255, .09), transparent 70%),
      linear-gradient(180deg, #121433, rgba(18, 20, 51, 0));
    --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(99, 91, 255, .14), transparent 70%),
      radial-gradient(50% 120% at 100% 100%, rgba(127, 158, 255, .09), transparent 70%);
    --bot-shell: #F1F0FF; --bot-edge: #A9A4FF; --bot-visor: #100D33; --bot-face: #FFFFFF; --bot-accent: #8A84FF;
    --logo-edge: rgba(255, 255, 255, .16); --logo-lift: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220; --bg-deep: #080D19; --surface: #111A2E; --surface-2: #16213A;
  --glass: rgba(17, 26, 46, .82); --ink: #E8EDF7; --navy: #E8EDF7; --sub: #BCC7D9;
  --muted: #A0ADC2; --accent-ink: #C3C0FF; --line: #222D47; --line-strong: #2E3B59; --line-control: #45557A; --dash: #5A57B0; --switch-off: #6F7D96;
  --accent: #8A84FF; --accent-deep: #ABA6FF; --accent-soft: #24285A; --accent-ring: #363B80;
  --btn: #635BFF; --btn-hover: #5A52F5; --btn-ink: #FFFFFF; --hl: #33377A;
  --ok: #133126; --ok-ink: #8FD9AE; --warn: #352A10; --warn-ink: #F1C76E;
  --bad: #3B1A21; --bad-ink: #F7A3A6; --info: #172748; --info-ink: #A9C4F5;
  --scrim: rgba(2, 6, 18, .6);
  --shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 36px 70px -36px rgba(0, 0, 0, .7);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .72);
  --sk-base: rgba(200, 214, 255, .06); --sk-shine: rgba(200, 214, 255, .08);
  --btn-accent: #635BFF; --btn-accent-ink: #FFFFFF; --btn-accent-hover: #5A52F5; --btn-danger-hover: #4A2029;
  --brand-1: #A9A4FF; --brand-2: #7A73FF; --brand-spark: #8A84FF;
  --hero-orb: radial-gradient(circle at 24% 56%, rgba(99, 91, 255, .42), transparent 46%),
    radial-gradient(circle at 44% 80%, rgba(255, 92, 170, .26), transparent 40%),
    radial-gradient(circle at 64% 62%, rgba(255, 168, 82, .2), transparent 38%);
  --band-violet-bg: #1B1847; --band-violet-ink: #F5F4FF; --band-violet-sub: #C9C5F7; --band-violet-link: #C3C0FF;
  --band-violet-accent: #9A94FF; --band-violet-surface: #25215A; --band-violet-line: #342F75;
  --band-violet-chip: #302B72; --band-violet-chip-ink: #DEDCFF;
  --band-navy-bg: #08142B; --band-navy-ink: #FFFFFF; --band-navy-sub: #CBC8FF; --band-navy-link: #BDB9FF;
  --band-navy-accent: #918BFF; --band-navy-surface: #12233F; --band-navy-line: #22365C;
  --band-navy-chip: #262C6E; --band-navy-chip-ink: #DEDCFF;
  --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(99, 91, 255, .24), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(127, 158, 255, .12), transparent 70%);
  --band-mint-bg: #13244B; --band-mint-ink: #EEF3FF; --band-mint-sub: #B5C8F2; --band-mint-link: #A6BFFF;
  --band-mint-accent: #7F9EFF; --band-mint-surface: #1A2D5C; --band-mint-line: #28407A;
  --band-mint-chip: #213A73; --band-mint-chip-ink: #D4E0FF;
  --ink-heading: #CBC6FF; --band-violet-heading: #D4D0FF; --band-mint-heading: #C9D7FF;
  --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(99, 91, 255, .18), transparent 70%),
    radial-gradient(50% 70% at 95% 5%, rgba(127, 158, 255, .09), transparent 70%),
    linear-gradient(180deg, #121433, rgba(18, 20, 51, 0));
  --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(99, 91, 255, .14), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(127, 158, 255, .09), transparent 70%);
  --bot-shell: #F1F0FF; --bot-edge: #A9A4FF; --bot-visor: #100D33; --bot-face: #FFFFFF; --bot-accent: #8A84FF;
  --logo-edge: rgba(255, 255, 255, .16); --logo-lift: 0 1px 2px rgba(0, 0, 0, .4);
}

/* The Warm palette (Settings → Appearance → Colour theme), light then dark: the original cream
   and orange, value for value. Every token a Violet block sets has a Warm value here, so no
   Violet colour leaks through in either mode. Specificity does the layering: these selectors
   (0,1,1 and 0,2,1) sit one element above the Violet ones (0,1,0 and 0,2,0).
   (2026-10-15) Secondary text darkened here too. --sub on surface, page, surface-2, accent-soft:
   light 8.9 8.0 8.4 7.2 (was 6.1 5.5 5.8 4.9), dark 9.3 10.1 8.7 7.8 (was 7.6 8.2 7.1 6.4);
   --muted: light 6.6 5.9 6.3 5.3 (was 5.6 5.0 5.3 4.5), dark 6.4 7.0 6.0 5.4 (was 5.2 5.7 4.9 4.4).
   A token Violet's dark blocks set and these do not (the logo edge) is palette-neutral on
   purpose: the Violet dark selector outranks the Warm light one, so it carries into Warm dark. */
html[data-palette="warm"] {
  --bg: #FDF1E8; --bg-deep: #FBE3D3; --surface: #FFFFFF; --surface-2: #FFF8F3;
  --glass: rgba(255, 255, 255, .72); --ink: #1F1611; --navy: #1B2338; --sub: #56473F;
  --muted: #6A5A50; --accent-ink: #A33A14; --line: #F2DCCC; --line-strong: #E8C8B3; --line-control: #D2B5A2; --switch-off: #9C8676;
  --dash: #F3A27F; --accent: #EC5A23; --accent-deep: #B43E15; --accent-soft: #FDE2D3; --accent-ring: #FBD0BA;
  --btn: #2A1913; --btn-hover: #3A251C; --btn-ink: #FFFFFF; --hl: #FFE1C4;
  --ok: #E6F2E8; --ok-ink: #2F6B44; --warn: #FCF0D7; --warn-ink: #8A5A00;
  --bad: #FCE5E1; --bad-ink: #B42318; --info: #E9EEF8; --info-ink: #2F4B7C;
  --scrim: rgba(31, 22, 17, .42);
  --btn-accent: #C9461A; --btn-accent-ink: #FFFFFF; --btn-accent-hover: #B53D15; --btn-danger-hover: #F9D3CD;
  --brand-1: #FF8A3D; --brand-2: #E4471A; --brand-spark: #EC5A23;
  --hero-orb: radial-gradient(circle at 30% 30%, var(--bg-deep), transparent 70%);
  --band-violet-bg: #FFE6D6; --band-violet-ink: #2A120A; --band-violet-sub: #7A3A1E; --band-violet-link: #A33A14;
  --band-violet-accent: #D4501D; --band-violet-surface: #FFFFFF; --band-violet-line: #F8CDB5;
  --band-violet-chip: #FCD3BC; --band-violet-chip-ink: #8E3210;
  --band-navy-bg: #2A1913; --band-navy-ink: #FFF8F3; --band-navy-sub: #F7C9B0; --band-navy-link: #FFB08C;
  --band-navy-accent: #FF8A55; --band-navy-surface: #3B261C; --band-navy-line: #553A2C;
  --band-navy-chip: #4C2B1D; --band-navy-chip-ink: #FFD3BD;
  --band-navy-btn: #FFFFFF; --band-navy-btn-hover: #FFE6D6; --band-navy-btn-ink: #A33A14;
  --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(236, 90, 35, .24), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(255, 92, 170, .10), transparent 70%);
  --band-mint-bg: #FCE4ED; --band-mint-ink: #2A0E18; --band-mint-sub: #782843; --band-mint-link: #9F224C;
  --band-mint-accent: #C0365E; --band-mint-surface: #FFFFFF; --band-mint-line: #F3C6D5;
  --band-mint-chip: #F7D0DE; --band-mint-chip-ink: #8A1C42;
  --ink-heading: #7A2A0E; --band-violet-heading: #7A2A0E; --band-mint-heading: #78173A;
  --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(236, 90, 35, .14), transparent 70%),
    radial-gradient(50% 70% at 95% 5%, rgba(255, 92, 170, .10), transparent 70%),
    linear-gradient(180deg, #FFF4EC, rgba(255, 244, 236, 0));
  --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(236, 90, 35, .10), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(255, 92, 170, .08), transparent 70%);
  --bot-shell: #FFFFFF; --bot-edge: #F3A27F; --bot-visor: #2A1913; --bot-face: #FFFFFF; --bot-accent: #EC5A23;
  --mono-0-bg: #FDE2D3; --mono-0-ink: #A33A14;
  --shadow-sm: 0 1px 2px rgba(120, 50, 20, .06);
  --shadow: 0 14px 30px -18px rgba(120, 50, 20, .35);
  --shadow-lg: 0 36px 70px -36px rgba(120, 50, 20, .45);
  --shadow-pop: 0 1px 2px rgba(120, 50, 20, .08), 0 12px 32px -12px rgba(120, 50, 20, .32);
  --shadow-thumb: 0 1px 3px rgba(120, 50, 20, .14);
  --shadow-knob: 0 1px 3px rgba(31, 22, 17, .28);
  --sk-base: rgba(120, 50, 20, .07); --sk-shine: rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) {
  html[data-palette="warm"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1A120E; --bg-deep: #23170F; --surface: #261A13; --surface-2: #2D1F17;
    --glass: rgba(38, 26, 19, .8); --ink: #F7ECE4; --navy: #F7ECE4; --sub: #D0BCAF;
    --muted: #B09B8E; --accent-ink: #FF9A6E; --line: #3B2A20; --line-strong: #4D372A; --line-control: #654F42; --dash: #8A4A30; --switch-off: #86705F;
    --accent: #F47A47; --accent-deep: #FF9A6E; --accent-soft: #3E2418; --accent-ring: #5A3121;
    --btn: #F47A47; --btn-hover: #FF8C5C; --btn-ink: #1A120E; --hl: #4D3420;
    --ok: #1F3326; --ok-ink: #9FD3AE; --warn: #3A2C12; --warn-ink: #F1C76E;
    --bad: #3D1C18; --bad-ink: #F4A39A; --info: #1E2738; --info-ink: #A9C1EC;
    --scrim: rgba(0, 0, 0, .55);
    --shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
    --shadow-lg: 0 36px 70px -36px rgba(0, 0, 0, .7);
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .72);
    --sk-base: rgba(255, 236, 228, .06); --sk-shine: rgba(255, 236, 228, .08);
    --btn-accent: #F47A47; --btn-accent-ink: #1A120E; --btn-accent-hover: #FF8C5C; --btn-danger-hover: #4B231E;
    --brand-1: #FF8A3D; --brand-2: #E4471A; --brand-spark: #EC5A23;
    --hero-orb: radial-gradient(circle at 30% 30%, var(--bg-deep), transparent 70%);
    --band-violet-bg: #3A2015; --band-violet-ink: #FFF2E9; --band-violet-sub: #F3C1A6; --band-violet-link: #FF9F75;
    --band-violet-accent: #F47A47; --band-violet-surface: #472919; --band-violet-line: #5C3524;
    --band-violet-chip: #573021; --band-violet-chip-ink: #FFCBB1;
    --band-navy-bg: #130C09; --band-navy-ink: #FFF8F3; --band-navy-sub: #F5C7AF; --band-navy-link: #FFA97F;
    --band-navy-accent: #F47A47; --band-navy-surface: #2A1A12; --band-navy-line: #3E2A1F;
    --band-navy-chip: #3F2417; --band-navy-chip-ink: #FFD0B8;
    --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(244, 122, 71, .20), transparent 70%),
      radial-gradient(45% 60% at 100% 100%, rgba(255, 92, 170, .08), transparent 70%);
    --band-mint-bg: #2E1522; --band-mint-ink: #FFF0F5; --band-mint-sub: #EDB6C8; --band-mint-link: #FF9DBC;
    --band-mint-accent: #EE6B95; --band-mint-surface: #3D1E2C; --band-mint-line: #572B3D;
    --band-mint-chip: #4C2336; --band-mint-chip-ink: #FFD1E0;
    --ink-heading: #FFC9AE; --band-violet-heading: #FFC9AE; --band-mint-heading: #FFC4D6;
    --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(244, 122, 71, .18), transparent 70%),
      radial-gradient(50% 70% at 95% 5%, rgba(255, 92, 170, .08), transparent 70%),
      linear-gradient(180deg, #22160F, rgba(34, 22, 15, 0));
    --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(244, 122, 71, .14), transparent 70%),
      radial-gradient(50% 120% at 100% 100%, rgba(255, 92, 170, .06), transparent 70%);
    --bot-shell: #FFF4EC; --bot-edge: #F47A47; --bot-visor: #1A100B; --bot-face: #FFFFFF; --bot-accent: #F47A47;
  }
}
html[data-palette="warm"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #1A120E; --bg-deep: #23170F; --surface: #261A13; --surface-2: #2D1F17;
  --glass: rgba(38, 26, 19, .8); --ink: #F7ECE4; --navy: #F7ECE4; --sub: #D0BCAF;
  --muted: #B09B8E; --accent-ink: #FF9A6E; --line: #3B2A20; --line-strong: #4D372A; --line-control: #654F42; --dash: #8A4A30; --switch-off: #86705F;
  --accent: #F47A47; --accent-deep: #FF9A6E; --accent-soft: #3E2418; --accent-ring: #5A3121;
  --btn: #F47A47; --btn-hover: #FF8C5C; --btn-ink: #1A120E; --hl: #4D3420;
  --ok: #1F3326; --ok-ink: #9FD3AE; --warn: #3A2C12; --warn-ink: #F1C76E;
  --bad: #3D1C18; --bad-ink: #F4A39A; --info: #1E2738; --info-ink: #A9C1EC;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 36px 70px -36px rgba(0, 0, 0, .7);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .72);
  --sk-base: rgba(255, 236, 228, .06); --sk-shine: rgba(255, 236, 228, .08);
  --btn-accent: #F47A47; --btn-accent-ink: #1A120E; --btn-accent-hover: #FF8C5C; --btn-danger-hover: #4B231E;
  --brand-1: #FF8A3D; --brand-2: #E4471A; --brand-spark: #EC5A23;
  --hero-orb: radial-gradient(circle at 30% 30%, var(--bg-deep), transparent 70%);
  --band-violet-bg: #3A2015; --band-violet-ink: #FFF2E9; --band-violet-sub: #F3C1A6; --band-violet-link: #FF9F75;
  --band-violet-accent: #F47A47; --band-violet-surface: #472919; --band-violet-line: #5C3524;
  --band-violet-chip: #573021; --band-violet-chip-ink: #FFCBB1;
  --band-navy-bg: #130C09; --band-navy-ink: #FFF8F3; --band-navy-sub: #F5C7AF; --band-navy-link: #FFA97F;
  --band-navy-accent: #F47A47; --band-navy-surface: #2A1A12; --band-navy-line: #3E2A1F;
  --band-navy-chip: #3F2417; --band-navy-chip-ink: #FFD0B8;
  --band-navy-wash: radial-gradient(70% 90% at 50% 0%, rgba(244, 122, 71, .20), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(255, 92, 170, .08), transparent 70%);
  --band-mint-bg: #2E1522; --band-mint-ink: #FFF0F5; --band-mint-sub: #EDB6C8; --band-mint-link: #FF9DBC;
  --band-mint-accent: #EE6B95; --band-mint-surface: #3D1E2C; --band-mint-line: #572B3D;
  --band-mint-chip: #4C2336; --band-mint-chip-ink: #FFD1E0;
  --ink-heading: #FFC9AE; --band-violet-heading: #FFC9AE; --band-mint-heading: #FFC4D6;
  --wash-hero: radial-gradient(60% 80% at 10% 0%, rgba(244, 122, 71, .18), transparent 70%),
    radial-gradient(50% 70% at 95% 5%, rgba(255, 92, 170, .08), transparent 70%),
    linear-gradient(180deg, #22160F, rgba(34, 22, 15, 0));
  --wash-band: radial-gradient(70% 140% at 0% 0%, rgba(244, 122, 71, .14), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(255, 92, 170, .06), transparent 70%);
  --bot-shell: #FFF4EC; --bot-edge: #F47A47; --bot-visor: #1A100B; --bot-face: #FFFFFF; --bot-accent: #F47A47;
}

/* ── 2 base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.wz {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}
/* Headings break into even lines; paragraphs avoid a lone last word. Both are progressive:
   browsers without support simply wrap as before. The LONGHAND on purpose: the `text-wrap`
   shorthand also sets `text-wrap-mode: wrap`, and from these selectors (`.wz li` is 0-1-1) it
   beat a component's own `white-space: nowrap` (a chip row, a truncated title). The style
   longhand leaves the wrap mode alone, so `nowrap` always wins. */
.wz h1, .wz h2, .wz h3, .wz-title, .wz-h2, .wz-h3, .wz-card__title { text-wrap-style: balance; }
.wz p, .wz li, .wz dd { text-wrap-style: pretty; }
.wz-num, .wz-ring__value, .wz-segmented__count { font-variant-numeric: lining-nums tabular-nums; }
[hidden] { display: none !important; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--hl); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.wz-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wz-skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--btn); color: var(--btn-ink); padding: 10px var(--btn-px); border-radius: var(--r-btn);
  font-weight: 600; transition: top var(--dur-2) var(--ease-out);
}
.wz-skip:focus { top: 12px; text-decoration: none; }

/* ── 3 type ────────────────────────────────────────────────────────────────── */
/* The roles of section 1 (TYPE ROLES). Each class here IS a role; a page that needs a role's
   look on its own element uses the same tokens, never a literal size or weight. */
/* H1 and H2 take the heading ink (section 1, HEADINGS): a deep indigo, the band's own on a band. */
.wz-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  color: var(--ink-heading, var(--ink));
}
/* An accent phrase in a title is coloured, not slanted: the family ships no italic, and a
   slanted copy of the upright reads as a rendering fault. Large text, so 3:1 holds. */
.wz-title em { font-style: normal; color: var(--accent); }
.wz-h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--ink-heading, var(--ink));
}
.wz-h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.wz-eyebrow {
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent-deep);
}
.wz-sub { color: var(--sub); }
.wz-small { font-size: var(--fs-sm); line-height: 1.5; color: var(--sub); }
.wz-xs { font-size: var(--fs-xs); line-height: 1.45; color: var(--sub); }
/* Figures: the sans at 700, tabular, so a column of scores lines up and a stat counting up
   from 0 never jitters. */
.wz-num {
  font-family: var(--font-sans); font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--ls-num);
}
.wz-num--lg { font-size: var(--fs-lg); }
.wz-strong { font-weight: 700; color: var(--ink); }
.wz-pre { white-space: pre-wrap; word-break: break-word; }
.wz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wz-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── 4 shell ───────────────────────────────────────────────────────────────── */
.wz-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
/* SIDEBAR (2026-10-15, v2). On the page's own ground, not a separate white card: the panel is
   clear, set apart from the content by spacing and one soft edge (a hairline that fades out at
   both ends). On a phone it is the off-canvas drawer, on a surface of its own (section 12). On a
   wide screen it folds to an icon rail (`.is-nav-collapsed`, shell.js, remembered per browser as
   `wz.nav.collapsed`): the labels step back into tooltips, the group names into hairlines. */
.wz-sidebar {
  position: sticky; top: 0; height: 100vh;
  padding: 16px 0 16px 16px;
  z-index: 30;
}
.wz-sidebar__panel {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: transparent;
  overflow: hidden;
}
.wz-sidebar__panel::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(transparent, var(--line-strong) 14%, var(--line-strong) 86%, transparent);
}
.wz-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 14px;
  color: var(--navy); text-decoration: none;
}
.wz-brand:hover { text-decoration: none; }
.wz-brand__mark { width: 34px; height: 31px; flex-shrink: 0; }
.wz-brand__word { font-weight: 800; font-size: var(--fs-xl); letter-spacing: -.03em; color: var(--navy); }

/* The mascot mark (2026-10-15): the hero robot's head (shell.js `brandMark`, and the same SVG in
   the marketing pages' header and footer), always beside the wordmark. Its parts take the
   --bot-* tokens, so it follows Violet, Warm and dark. When its link is hovered or focused the
   antenna sways and the eyes blink, once, inside --dur-3 (320ms); reduced motion keeps it still. */
.wz-bot { display: block; flex-shrink: 0; overflow: visible; }
.wz-bot__head { fill: var(--bot-shell); stroke: var(--bot-edge); stroke-width: 1.6; }
.wz-bot__visor { fill: var(--bot-visor); }
.wz-bot__ear, .wz-bot__ball { fill: var(--bot-accent); }
.wz-bot__stalk { fill: none; stroke: var(--bot-edge); stroke-width: 2.2; stroke-linecap: round; }
.wz-bot__face { fill: none; stroke: var(--bot-face); stroke-linecap: round; }
.wz-bot__eye { stroke-width: 2.2; transform-box: fill-box; transform-origin: 50% 70%; }
.wz-bot__smile { stroke-width: 1.9; }
.wz-bot__ant { transform-box: fill-box; transform-origin: 50% 100%; }
a:is(:hover, :focus-visible) > .wz-bot .wz-bot__ant { animation: wz-bot-ant var(--dur-3) var(--ease-out); }
a:is(:hover, :focus-visible) > .wz-bot .wz-bot__eye { animation: wz-bot-blink var(--dur-3) var(--ease-in-out); }
@keyframes wz-bot-ant { 30% { transform: rotate(-18deg); } 70% { transform: rotate(12deg); } }
@keyframes wz-bot-blink { 40%, 60% { transform: scaleY(.15); } }
@media (prefers-reduced-motion: reduce) { .wz-bot__ant, .wz-bot__eye { animation: none !important; } }

.wz-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-1) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
/* NAV (2026-10-15, v2). One size for every item, 15px at 600 in navy ink, so the list reads at a
   glance; the group labels ("Find work", "Get ready", …) are small capitals at 700 in the heading
   ink, a step apart. Hover: a soft pill fades and grows in behind the item and its icon steps
   toward the accent; a press gives a little. The current page sits on the soft violet band with
   an accent bar at its edge. Every colour is a token, so the nav follows Violet, Warm and dark
   (group labels 10.8:1 on the page, item text 14.7+, the active icon and bar 3.5+). */
.wz-nav__group {
  margin: var(--space-5) var(--space-3) var(--space-2); font-size: var(--fs-xs); font-weight: 700;
  line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-heading, var(--band-violet-sub));
}
.wz-nav__item {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-3);
  min-height: 42px; padding: 9px var(--space-3);
  border-radius: var(--r-md);
  color: var(--ink); font-weight: 600; font-size: var(--fs-base);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.wz-nav__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--band-violet-bg) 88%, transparent);
  opacity: 0; transform: scale(.94);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.wz-nav__item .wz-icon {
  color: var(--sub);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.wz-nav__item:hover { color: var(--band-violet-ink); text-decoration: none; }
.wz-nav__item:hover::after { opacity: 1; transform: none; }
.wz-nav__item:hover .wz-icon { color: var(--band-violet-accent); transform: translateX(calc(var(--nudge) / 2)); }
.wz-nav__item:active { transform: scale(var(--press)); }
/* Inside the item, so the scrolling list never clips the ring. */
.wz-nav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.wz-nav__item[aria-current="page"] { background: var(--band-violet-bg); color: var(--band-violet-ink); font-weight: 700; }
.wz-nav__item[aria-current="page"] .wz-icon { color: var(--band-violet-accent); }
.wz-nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: var(--pill); background: var(--band-violet-accent);
}
.wz-nav__badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--pill);
  background: var(--btn-accent); color: var(--btn-accent-ink); font-size: var(--fs-2xs); font-weight: 700;
  display: inline-grid; place-items: center;
}
/* Learn AI (2026-10-15): the featured item. A soft violet-to-mint card, a twinkling sparkle, a light
   sweeping across now and then, and a "Free" badge. Tokens only, so it follows Violet, Warm and dark. */
.wz-nav__item--featured {
  margin: var(--space-2) 0 var(--space-1); overflow: hidden; color: var(--band-violet-ink); font-weight: 700;
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 18%, var(--surface)),
                                      color-mix(in srgb, var(--band-mint-accent) 14%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.wz-nav__item--featured .wz-icon { color: var(--accent); animation: wz-twinkle 3.2s var(--ease-in-out) infinite; }
.wz-nav__item--featured::after {
  opacity: 1; transform: none; z-index: 0; background: linear-gradient(100deg, transparent 30%,
    color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 70%);
  translate: -120% 0; animation: wz-sweep 5.5s var(--ease-in-out) 1.2s infinite;
}
.wz-nav__item--featured > * { position: relative; z-index: 1; }
.wz-nav__item--featured .wz-nav__badge { background: var(--accent); color: var(--btn-accent-ink); }
.wz-nav__item--featured:hover, .wz-nav__item--featured:focus-visible {
  color: var(--band-violet-ink);
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 28%, var(--surface)),
                                      color-mix(in srgb, var(--band-mint-accent) 20%, var(--surface)));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.wz-nav__item--featured:hover .wz-icon { color: var(--accent-deep); }
@keyframes wz-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.22) rotate(14deg); } 60% { transform: scale(.96) rotate(-6deg); } }
@keyframes wz-sweep { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
/* The top bar's Learn AI: the one filled gradient button there, with the same sparkle. */
.wz-btn.wz-learnai {
  --b-bg: transparent; --b-ink: var(--btn-accent-ink); --b-bg-hover: transparent; position: relative; overflow: hidden;
  /* the BUTTON tokens, not --accent: --btn-accent is what each theme pairs with --btn-accent-ink at
     4.5:1+ (dark --accent is a light violet, which white text cannot sit on) */
  background: linear-gradient(115deg, var(--btn-accent), color-mix(in srgb, var(--btn-accent-hover) 90%, var(--band-mint-accent)));
  color: var(--btn-accent-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-accent) 35%, transparent);
}
/* hover keeps the gradient (the base `.wz-btn:hover` would swap in --b-bg-hover and hide the label
   on the page): the theme's own hover shade, a lift, a stronger glow */
.wz-btn.wz-learnai:hover, .wz-btn.wz-learnai:focus-visible {
  background: linear-gradient(115deg, var(--btn-accent-hover), color-mix(in srgb, var(--btn-accent-hover) 90%, var(--band-mint-accent)));
  color: var(--btn-accent-ink); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--btn-accent) 45%, transparent);
}
.wz-btn.wz-learnai .wz-icon { animation: wz-twinkle 3.2s var(--ease-in-out) infinite; }
.wz-learnai__tag { font-size: var(--fs-2xs); font-weight: 700; padding: 1px 7px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 26%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .wz-nav__item--featured .wz-icon, .wz-nav__item--featured::after, .wz-btn.wz-learnai .wz-icon { animation: none; }
}
.wz-sidebar__foot { padding: 12px; border-top: 1px solid var(--line); }
/* Mentor mode (shell.js, app/mode.js): the foot's switch between the job-search app and the
   mentor pages ("Mentor dashboard" on the violet band, "Back to job search" quiet), and the
   "Mentors" tag beside the wordmark while the mode is on. */
.wz-modeswitch {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; margin: 0 0 var(--space-2);
  padding: 8px var(--space-3); border: 1px solid var(--band-violet-line); border-radius: var(--r-md);
  background: var(--band-violet-bg); color: var(--band-violet-ink); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-modeswitch .wz-icon { flex-shrink: 0; color: var(--band-violet-accent); }
.wz-modeswitch:hover { background: var(--band-violet-chip); }
.wz-modeswitch:active { transform: scale(var(--press)); }
.wz-modeswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wz-modeswitch--back { border-color: var(--line); background: transparent; color: var(--ink); }
.wz-modeswitch--back .wz-icon { color: var(--sub); }
.wz-modeswitch--back:hover { background: var(--tint); }
.wz-brand__mode {
  align-self: center; padding: 2px 8px; border-radius: var(--pill); background: var(--band-violet-chip);
  color: var(--band-violet-chip-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.wz-sidebar .wz-sidebar__close { display: none; margin-right: 12px; }
/* Fold to an icon rail and back (wide screens; shell.js). Its chevron points the way it goes. */
.wz-sidebar__collapse {
  display: flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; margin: 0 0 var(--space-2);
  padding: 0; border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--sub); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-sidebar__collapse:hover { background: var(--tint); color: var(--ink); }
.wz-sidebar__collapse:active { transform: scale(var(--press)); }
.wz-sidebar__collapse:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.wz-sidebar__collapse .wz-icon { transition: transform var(--dur-3) var(--ease-spring); }
.wz-sidebar__collapse:hover .wz-icon { transform: translateX(calc(var(--nudge) / -2)); }
.is-nav-collapsed .wz-sidebar__collapse .wz-icon { transform: rotate(180deg); }
.is-nav-collapsed .wz-sidebar__collapse:hover .wz-icon { transform: rotate(180deg) translateX(calc(var(--nudge) / -2)); }
.wz-app--studio .wz-sidebar__collapse { display: none; }
.wz-app--studio .wz-sidebar__panel { border: 1px solid var(--line); border-left: 0; box-shadow: var(--shadow-lg); }
.wz-app--studio .wz-sidebar__panel::after { display: none; }
/* The rail's tooltip (shell.js `railTips`): the label of the control under the pointer or focus. */
.wz-navtip {
  position: fixed; z-index: 160; transform: translateY(-50%); pointer-events: auto;
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; white-space: nowrap;
  box-shadow: var(--shadow-pop); animation: wz-tip-in var(--dur-2) var(--ease-out);
}
@keyframes wz-tip-in { from { opacity: 0; translate: calc(var(--nudge) * -1) 0; } }
@media (min-width: 1081px) {
  .wz-app.is-nav-collapsed { --sidebar-w: 84px; }
  .is-nav-collapsed .wz-brand { justify-content: center; padding: 18px 0 14px; }
  /* Labels leave the screen, never the accessibility tree: each control keeps its name. */
  .is-nav-collapsed :is(.wz-brand__word, .wz-brand__mode, .wz-nav__item > span, .wz-usercard__meta, .wz-modeswitch > span) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .is-nav-collapsed .wz-nav__group { height: 1px; margin: var(--space-3); overflow: hidden; color: transparent; background: var(--line); }
  .is-nav-collapsed .wz-nav__item, .is-nav-collapsed .wz-sidebar__collapse, .is-nav-collapsed .wz-modeswitch { justify-content: center; padding-inline: 0; }
  .is-nav-collapsed .wz-nav__item:hover .wz-icon { transform: none; }
  .is-nav-collapsed .wz-sidebar__foot { padding: var(--space-3) var(--space-2); }
  .is-nav-collapsed .wz-usercard { flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; }
}
@media (max-width: 1080px) { .wz-sidebar__collapse { display: none; } }
@media (prefers-reduced-motion: reduce) { .wz-navtip { animation: none; } }
.wz-usercard {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r); border: 0; background: transparent; text-align: left;
  transition: background-color var(--dur-1) var(--ease-out);
}
.wz-usercard:hover { background: var(--tint); }
.wz-usercard__meta { min-width: 0; flex: 1; }
.wz-usercard__name { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.wz-usercard__plan { font-size: var(--fs-xs); color: var(--sub); }

/* SIDEBAR v3 (the owner, 2026-10-17: "change the theme of the sidebar, a contrasting colour from
   the right side; make the icons more colourful", then twice "lighter, still too dark"). A soft
   lavender panel set apart from the white page, dark indigo ink, and each item's icon on its own
   solid pastel tile (`--hue-*`, shell.js NAV_HUES) with a dark glyph. Its own tokens, set per theme
   and palette below: dark mode keeps a deep indigo panel with white ink, Warm a soft peach. Text on
   the panel is 7:1+, the glyphs on their tiles 7:1+. These rules come after v2's and override it. */
:root {
  --side-top: #F1F0FF; --side-bottom: #E6E4FF;
  --side-ink: #1F1B5E; --side-sub: #47438C; --side-muted: #5F5BA6;
  --side-line: rgb(31 27 94 / .10); --side-hover: rgb(255 255 255 / .7); --side-active: #FFFFFF;
  --side-focus: #4A41CF; --side-disc: #FFFFFF; --side-shadow: 0 14px 34px -22px rgb(74 65 207 / .45);
  --side-icon-ink: #1E1A5C;
  --hue-violet: #B4A6FF; --hue-blue: #93C4FF; --hue-teal: #83E3D4; --hue-amber: #FFD56E; --hue-indigo: #B6C0FF;
  --hue-rose: #FFAAB8; --hue-orange: #FFBD87; --hue-mint: #8FEBC1; --hue-sky: #98DDFF; --hue-pink: #FFAADD;
  --hue-lime: #CBEF85; --hue-slate: #D8DDE8;
}
:root[data-theme="dark"] {
  --side-top: #1B1846; --side-bottom: #26215F; --side-ink: #F5F3FF; --side-sub: #D6D2FF; --side-muted: #B6B1F0;
  --side-line: rgb(255 255 255 / .12); --side-hover: rgb(255 255 255 / .08); --side-active: rgb(255 255 255 / .16);
  --side-focus: #FFFFFF; --side-disc: rgb(255 255 255 / .14); --side-shadow: 0 18px 44px -20px rgb(0 0 0 / .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --side-top: #1B1846; --side-bottom: #26215F; --side-ink: #F5F3FF; --side-sub: #D6D2FF; --side-muted: #B6B1F0;
    --side-line: rgb(255 255 255 / .12); --side-hover: rgb(255 255 255 / .08); --side-active: rgb(255 255 255 / .16);
    --side-focus: #FFFFFF; --side-disc: rgb(255 255 255 / .14); --side-shadow: 0 18px 44px -20px rgb(0 0 0 / .7);
  }
}
/* Warm keeps its own family: a soft peach panel. */
html[data-palette="warm"] { --side-top: #FFF3EA; --side-bottom: #FFE6D7; --side-ink: #3A1D0F; --side-sub: #6E412B;
  --side-muted: #8A5A42; --side-line: rgb(58 29 15 / .10); --side-focus: #C2541F; --side-shadow: 0 14px 34px -22px rgb(194 84 31 / .4); }

.wz-sidebar__panel {
  background: linear-gradient(180deg, var(--side-top), var(--side-bottom));
  border-radius: var(--r-lg); box-shadow: var(--side-shadow); color: var(--side-ink);
}
.wz-sidebar__panel::after { display: none; }
.wz-sidebar .wz-brand, .wz-sidebar .wz-brand__word { color: var(--side-ink); }
/* the W symbol alone at the top */
.wz-sidebar .wz-brand { padding: 18px 20px 12px; }
.wz-brand__w { display: block; width: 36px; height: 27px; object-fit: contain; flex-shrink: 0; }
/* the folded rail shows the robot alone */
@media (min-width: 1081px) { .is-nav-collapsed .wz-brand__w { display: none; } }
.wz-sidebar .wz-brand__mode { color: var(--side-sub); }
.wz-sidebar .wz-nav { scrollbar-color: var(--side-line) transparent; }
.wz-sidebar .wz-nav__group { color: var(--side-muted); }
.wz-sidebar .wz-nav__item { color: var(--side-ink); }
.wz-sidebar .wz-nav__item::after { background: var(--side-hover); }
.wz-sidebar .wz-nav__item:hover { color: var(--side-ink); }
.wz-sidebar .wz-nav__item:focus-visible { outline-color: var(--side-focus); }
.wz-sidebar .wz-nav__item[aria-current="page"] { background: var(--side-active); color: var(--side-ink);
  box-shadow: 0 6px 16px -10px rgb(31 27 94 / .35); }
.wz-sidebar .wz-nav__item[aria-current="page"]::before { background: var(--side-focus); }
/* the icon tile: the item's hue on a tint of itself */
.wz-nav__ic {
  --hue: var(--hue-violet);
  display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 9px; font-style: normal;
  /* a solid pastel tile with a dark glyph: colourful at a glance */
  background: var(--hue); box-shadow: 0 2px 6px -3px rgb(31 27 94 / .3);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.wz-sidebar .wz-nav__ic .wz-icon, .wz-sidebar .wz-nav__item:hover .wz-nav__ic .wz-icon,
.wz-sidebar .wz-nav__item[aria-current="page"] .wz-nav__ic .wz-icon { color: var(--side-icon-ink); transform: none; }
.wz-sidebar .wz-nav__item:hover .wz-nav__ic { transform: translateX(calc(var(--nudge) / 2)) scale(1.05); }
.wz-sidebar .wz-nav__item[aria-current="page"] .wz-nav__ic { box-shadow: 0 0 0 2px var(--side-focus), 0 2px 6px -2px rgb(0 0 0 / .2); }
.wz-nav__ic[data-hue="violet"] { --hue: var(--hue-violet); } .wz-nav__ic[data-hue="blue"] { --hue: var(--hue-blue); }
.wz-nav__ic[data-hue="teal"] { --hue: var(--hue-teal); } .wz-nav__ic[data-hue="amber"] { --hue: var(--hue-amber); }
.wz-nav__ic[data-hue="indigo"] { --hue: var(--hue-indigo); } .wz-nav__ic[data-hue="rose"] { --hue: var(--hue-rose); }
.wz-nav__ic[data-hue="orange"] { --hue: var(--hue-orange); } .wz-nav__ic[data-hue="mint"] { --hue: var(--hue-mint); }
.wz-nav__ic[data-hue="sky"] { --hue: var(--hue-sky); } .wz-nav__ic[data-hue="pink"] { --hue: var(--hue-pink); }
.wz-nav__ic[data-hue="lime"] { --hue: var(--hue-lime); } .wz-nav__ic[data-hue="slate"] { --hue: var(--hue-slate); }
/* Learn AI on the panel: a brighter violet-to-mint card, its own sparkle */
.wz-sidebar .wz-nav__item--featured {
  color: var(--side-ink);
  background: linear-gradient(115deg, color-mix(in srgb, var(--hue-violet) 34%, transparent), color-mix(in srgb, var(--hue-mint) 24%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue-violet) 55%, transparent);
}
.wz-sidebar .wz-nav__item--featured:hover, .wz-sidebar .wz-nav__item--featured:focus-visible {
  color: var(--side-ink);
  background: linear-gradient(115deg, color-mix(in srgb, var(--hue-violet) 46%, transparent), color-mix(in srgb, var(--hue-mint) 32%, transparent));
}
.wz-sidebar .wz-nav__item--featured::after {
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
}
/* the foot: the account, the mode switch, the collapse control */
.wz-sidebar .wz-sidebar__foot { border-top-color: var(--side-line); }
.wz-sidebar .wz-usercard:hover { background: var(--side-hover); }
.wz-sidebar .wz-usercard__name { color: var(--side-ink); }
.wz-sidebar .wz-usercard__plan { color: var(--side-sub); }
.wz-sidebar .wz-modeswitch { border-color: var(--side-line); background: var(--side-hover); color: var(--side-ink); }
.wz-sidebar .wz-modeswitch .wz-icon { color: var(--hue-violet); }
.wz-sidebar .wz-modeswitch:hover { background: var(--side-active); }
.wz-sidebar .wz-modeswitch:focus-visible, .wz-sidebar .wz-sidebar__collapse:focus-visible { outline-color: var(--side-focus); }
.wz-sidebar .wz-sidebar__collapse { color: var(--side-sub); }
.wz-sidebar .wz-sidebar__collapse:hover { background: var(--side-hover); color: var(--side-ink); }
.wz-sidebar .wz-sidebar__close { color: var(--side-ink); }
.is-nav-collapsed .wz-sidebar .wz-nav__group { background: var(--side-line); }

.wz-main { min-width: 0; display: flex; flex-direction: column; }
.wz-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 32px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.wz-topbar .wz-topbar__menu { display: none; }
.wz-topbar__crumb { font-size: var(--fs-sm); color: var(--sub); font-weight: 500; min-width: 0; }
.wz-topbar__crumb strong { color: var(--ink); font-weight: 600; }
.wz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wz-scrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: 25;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out);
}

/* ── 5 page layout ─────────────────────────────────────────────────────────── */
.wz-page {
  width: 100%; max-width: calc(var(--content-max) + 64px);
  margin: 0 auto; padding: 4px 32px 64px;
  outline: none;
}
.wz-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 6px 0 var(--head-gap);
}
.wz-page-head__text { min-width: 0; max-width: 72ch; }
.wz-page-head__text .wz-eyebrow { margin-bottom: var(--space-2); }
/* SUBTITLES (2026-10-14): the line under a page, section, shelf, card or drawer title is set in
   --sub at 500, a step larger than small text, so it reads as part of the heading, not as a
   faint caption. */
.wz-page-head__sub { margin-top: var(--space-2); color: var(--sub); font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; }
.wz-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wz-section { margin-top: var(--section-gap); }
.wz-section:first-child { margin-top: 0; }
.wz-section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-4);
}
.wz-section__head p { margin-top: var(--space-1); font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--sub); }
/* Top-level blocks of a page, spaced on the section rhythm without per-page margins. */
.wz-flow > * + * { margin-top: var(--flow-gap, var(--section-gap)); }
.wz-stack { display: flex; flex-direction: column; gap: var(--gap, 14px); }
.wz-row { display: flex; align-items: center; gap: var(--gap, 10px); flex-wrap: wrap; }
.wz-row--between { justify-content: space-between; }
.wz-row--nowrap { flex-wrap: nowrap; }
.wz-grid { display: grid; gap: var(--gap, var(--block-gap)); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.wz-split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }
.wz-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-sticky { position: sticky; top: 80px; }

/* ── 6 controls ────────────────────────────────────────────────────────────── */
/* Buttons (2026-10-14, design-system pass): crisp corners (--r-btn), a 1px border, no shadow,
   three heights — 34 / 42 / 48 — on one padding rhythm, 12 / 16 / 20 (a quiet button, having
   no fill to pad, sits 4px tighter). Each state reads on its own: hover changes the fill (and
   a line button's edge), press scales a touch, and focus is the global 2px ring, which follows
   the corner. Height, padding and corner are custom properties, so a variant never needs to
   know the size it is drawn at. */
.wz-btn {
  --b-bg: var(--btn); --b-ink: var(--btn-ink); --b-line: transparent;
  --b-h: var(--btn-h); --b-px: var(--btn-px); --b-r: var(--r-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--b-h); padding: 0 var(--b-px);
  border: 1px solid var(--b-line); border-radius: var(--b-r);
  background: var(--b-bg); color: var(--b-ink); box-shadow: none;
  font-weight: 600; font-size: var(--fs-md); line-height: 1.2; letter-spacing: 0; white-space: nowrap;
  text-decoration: none; cursor: pointer; position: relative;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.wz-btn:hover { text-decoration: none; background: var(--b-bg-hover, var(--btn-hover)); border-color: var(--b-line-hover, var(--b-line)); }
.wz-btn:active { transform: scale(var(--press)); }
.wz-btn[disabled], .wz-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
/* Tokens, not per-theme selectors: a `[data-theme=dark]` override never applied under the
   default "match my system" dark mode, leaving white text on light orange (about 2:1). */
.wz-btn--accent { --b-bg: var(--btn-accent); --b-ink: var(--btn-accent-ink); --b-bg-hover: var(--btn-accent-hover); }
.wz-btn--ghost { --b-bg: transparent; --b-ink: var(--ink); --b-line: var(--ink); --b-bg-hover: var(--tint); }
.wz-btn--soft { --b-bg: var(--accent-soft); --b-ink: var(--accent-ink); --b-bg-hover: var(--accent-ring); }
.wz-btn--quiet { --b-bg: transparent; --b-ink: var(--ink); --b-bg-hover: var(--tint); padding: 0 calc(var(--b-px) - 4px); }
.wz-btn--line {
  --b-bg: var(--surface); --b-ink: var(--ink); --b-line: var(--line-control);
  --b-bg-hover: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); --b-line-hover: var(--dash);
}
.wz-btn--danger { --b-bg: var(--bad); --b-ink: var(--bad-ink); --b-bg-hover: var(--btn-danger-hover); }
.wz-btn--sm { --b-h: var(--btn-h-sm); --b-px: var(--btn-px-sm); --b-r: var(--r-btn-sm); font-size: var(--fs-sm); gap: 6px; }
.wz-btn--lg { --b-h: var(--btn-h-lg); --b-px: var(--btn-px-lg); font-size: var(--fs-lead); }
.wz-btn--block { width: 100%; }
.wz-btn.is-busy { color: transparent !important; pointer-events: none; }
.wz-btn.is-busy > :not(.wz-spinner) { visibility: hidden; }
.wz-btn.is-busy > .wz-spinner { position: absolute; inset: 0; margin: auto; color: var(--b-ink); }

/* Button motion (2026-10-15, motion v2). A filled button catches a soft light as the pointer
   arrives: one sweep per hover, a transform on a pseudo-element the button clips (`overflow:
   clip` never clips the focus outline). Outline, soft and quiet buttons only change their fill.
   A trailing arrow steps toward where it goes (an external link's arrow up and out of its box);
   a menu's chevron stays. Fine pointers only, and off under reduced motion. */
.wz-btn:not(.wz-btn--ghost, .wz-btn--soft, .wz-btn--quiet, .wz-btn--line, .wz-btn--danger) { overflow: clip; }
.wz-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--b-ink) 24%, transparent) 50%, transparent 70%);
  opacity: 0; transform: translateX(-110%);
}
.wz-btn > .wz-icon:last-child:not(:first-child) { transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wz-btn:not(.wz-btn--ghost, .wz-btn--soft, .wz-btn--quiet, .wz-btn--line, .wz-btn--danger, [disabled], .is-busy):hover::after {
    opacity: 1; transform: translateX(110%);
    transition: transform calc(var(--dur-reveal) * 1.4) var(--ease-in-out), opacity var(--dur-1) var(--ease-out);
  }
  .wz-btn:hover > .wz-icon:last-child:not(:first-child) { transform: translateX(var(--nudge)); }
  .wz-btn:hover > .wz-icon:last-child:not(:first-child):has(path[d="M15 4h5v5"]) {
    transform: translate(calc(var(--nudge) * .6), calc(var(--nudge) * -.6));
  }
  .wz-btn[aria-haspopup]:hover > .wz-icon:last-child { transform: none; }
}

/* A toggle that just turned on (components.js marks it: a Save, a bookmark, any pressed toggle,
   only when pressed — never on first render): its fill grows from the centre and its icon pops,
   once. A copy control shows a check that pops in for a moment (`flashCopied`). */
.wz-just-on { position: relative; isolation: isolate; }
.wz-iconbtn[aria-pressed="true"].wz-just-on { background-color: transparent; }
.wz-btn.wz-just-on { --b-bg: transparent; }
.wz-just-on::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--accent-soft); animation: wz-fill-grow var(--dur-3) var(--ease-out) both;
}
.wz-just-on > .wz-icon, .wz-copied__check { animation: wz-icon-pop var(--dur-3) var(--ease-spring) both; }
@keyframes wz-fill-grow { from { opacity: 0; transform: scale(.25); } 40% { opacity: 1; } }
@keyframes wz-icon-pop { from { transform: scale(.55); } }

.wz-iconbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--pill);
  border: 1px solid transparent; background: transparent; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-iconbtn:hover { background: var(--tint); border-color: var(--line); }
.wz-iconbtn:active { transform: scale(var(--press-icon)); }
.wz-iconbtn--sm { width: 32px; height: 32px; }
.wz-iconbtn--line { background: var(--surface); border-color: var(--line); }
.wz-iconbtn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }

.wz-link { color: var(--accent-deep); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.wz-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.wz-link--quiet { color: var(--sub); font-weight: 500; }

/* form fields */
.wz-field { display: grid; gap: 6px; min-width: 0; }
.wz-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink); }
.wz-label .wz-req { color: var(--accent-deep); margin-left: 2px; }
.wz-label .wz-opt { color: var(--muted); font-weight: 500; margin-left: 6px; font-size: var(--fs-xs); }
.wz-hint { font-size: var(--fs-xs); color: var(--sub); line-height: 1.45; }
.wz-field__error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: var(--fs-xs); font-weight: 600; color: var(--bad-ink); line-height: 1.4;
}
.wz-input, .wz-select, .wz-textarea {
  width: 100%; min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-md); line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wz-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.wz-input::placeholder, .wz-textarea::placeholder { color: var(--muted); }
.wz-input:hover, .wz-select:hover, .wz-textarea:hover { border-color: var(--dash); }
.wz-input:focus, .wz-select:focus, .wz-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.wz-input[aria-invalid="true"], .wz-select[aria-invalid="true"], .wz-textarea[aria-invalid="true"] {
  border-color: var(--bad-ink);
}
.wz-input:disabled, .wz-select:disabled, .wz-textarea:disabled { opacity: .6; cursor: not-allowed; }
.wz-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.wz-select--sm, .wz-input--sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-sm); }
.wz-counter { font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.wz-counter.is-over { color: var(--bad-ink); font-weight: 600; }

/* A field's corner, not a pill: a search box can hold a real button (/evaluate's "Search"),
   and a square-cornered button inside a pill reads as two shapes fighting. */
.wz-search {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 5px 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wz-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.wz-search .wz-icon { color: var(--sub); }
.wz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 4px; font-size: var(--fs-md); }
.wz-search input::placeholder { color: var(--muted); }

.wz-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-md); line-height: 1.45; }
.wz-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-deep); flex-shrink: 0; cursor: pointer; }
/* Drawn boxes, so a change of state can animate (a native box only snaps). The border is --muted
   because an unticked box must read at 3:1 on its surface. Forced-colours mode keeps the native
   control: its system colours would be lost on a drawing. */
.wz-check input[type="checkbox"], .wz-check input[type="radio"], .ob-dream__row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--muted); border-radius: 5px; background: var(--surface);
  /* The same beat as a switch: the fill on --dur-2, the tick and the knob on the spring, and a
     press that gives a little, like an icon button's. */
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.wz-check input[type="checkbox"]:active:not(:disabled), .wz-check input[type="radio"]:active:not(:disabled),
.ob-dream__row:active input[type="checkbox"] { transform: scale(var(--press-icon)); }
.wz-check input[type="radio"] { border-radius: 50%; }
.wz-check input[type="checkbox"]::before, .ob-dream__row input[type="checkbox"]::before {
  content: ""; width: 10px; height: 5px; margin-top: -2px;
  border: solid var(--btn-accent-ink); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-2) var(--ease-spring);
}
.wz-check input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--btn-accent);
  transform: scale(0); transition: transform var(--dur-2) var(--ease-spring);
}
.wz-check:hover input:not(:disabled), .ob-dream__row:hover input[type="checkbox"] { border-color: var(--accent-deep); }
.wz-check input[type="checkbox"]:checked, .ob-dream__row input[type="checkbox"]:checked {
  background: var(--btn-accent); border-color: var(--btn-accent);
}
.wz-check input[type="checkbox"]:checked::before, .ob-dream__row input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.wz-check input[type="radio"]:checked { border-color: var(--btn-accent); }
.wz-check input[type="radio"]:checked::before { transform: scale(1); }
.wz-check input:disabled { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) {
  .wz-check input[type="checkbox"], .wz-check input[type="radio"], .ob-dream__row input[type="checkbox"] {
    appearance: auto; -webkit-appearance: auto;
  }
}
.wz-check--card {
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.wz-check--card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.wz-switch {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer;
}
.wz-switch__track {
  width: 42px; height: 24px; border-radius: var(--pill); background: var(--switch-off);
  position: relative; flex-shrink: 0; transition: background-color var(--dur-2) var(--ease-out);
}
.wz-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob);
  transition: transform var(--dur-2) var(--ease-spring), width var(--dur-1) var(--ease-out);
}
.wz-switch:active .wz-switch__track { transform: scale(var(--press)); }
.wz-switch__track { transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.wz-switch:hover .wz-switch__track { background: color-mix(in srgb, var(--switch-off) 80%, var(--ink)); }
.wz-switch[aria-checked="true"] .wz-switch__track { background: var(--accent-deep); }
.wz-switch[aria-checked="true"]:hover .wz-switch__track { background: color-mix(in srgb, var(--accent-deep) 88%, var(--ink)); }
.wz-switch[aria-checked="true"] .wz-switch__track::after { transform: translateX(18px); }
/* While pressed, the knob stretches toward where it is about to go. */
.wz-switch:active .wz-switch__track::after { width: 22px; }
.wz-switch[aria-checked="true"]:active .wz-switch__track::after { transform: translateX(14px); }
/* The ring goes round the track, not round the whole row and its label. */
.wz-switch:focus-visible { outline: none; }
.wz-switch:focus-visible .wz-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--pill);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-chip:hover { border-color: var(--dash); }
.wz-chip:active { transform: scale(var(--press)); }
/* chipGroup marks the check it adds on a change (never on first render), so only that one pops. */
.wz-chip__check { animation: wz-check-pop var(--dur-2) var(--ease-spring) both; }
.wz-chip[aria-pressed="true"], .wz-chip[aria-checked="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
}
.wz-chip .wz-icon { color: currentColor; }
.wz-chip--sm { min-height: 30px; padding: 4px 11px; font-size: var(--fs-xs); }
/* the fields picker: label · open roles · a dot when the person's own evidence suggests it */
.wz-chip__meta { font-size: var(--fs-xs); font-weight: 500; color: var(--sub); }
.wz-chip[aria-pressed="true"] .wz-chip__meta { color: inherit; opacity: .8; }
.wz-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.wz-field-note:empty { display: none; }

.wz-segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  position: relative; isolation: isolate;
}
.wz-segmented::-webkit-scrollbar { display: none; }
.wz-segmented__btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--sub); font-weight: 600; font-size: var(--fs-md);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wz-segmented__btn:hover { color: var(--ink); }
/* A page's tabs (`segmented({tabs: true})`: "Salaries | Interviews", "Recommended | Saved") are
   titles, so every tab's name is in the ink, not just the selected one's (2026-10-17: the owner
   read an unselected "Interviews" in --sub as too light). The white thumb marks the selection and
   a hover takes the accent. A group of option buttons keeps the quieter unselected tone. */
.wz-segmented__btn[role="tab"] { color: var(--ink); }
.wz-segmented__btn[role="tab"]:not([aria-selected="true"]):hover { color: var(--accent-deep); }
/* With every name in the ink, the selected tab's icon takes the accent: a cue beside the thumb,
   which is faint on the dark track. */
.wz-segmented__btn[role="tab"][aria-selected="true"] > .wz-icon { color: var(--accent-deep); }
.wz-segmented__btn[aria-selected="true"], .wz-segmented__btn[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-thumb);
}
/* The sliding indicator. components.js sizes and places it under the selected button (and keeps
   it there through resizes and count changes); until it has, the button's own background shows,
   so the control never depends on the script having measured. The first placement does not
   slide: `is-ready` arrives a frame later. */
.wz-segmented__thumb {
  position: absolute; top: 0; left: 0; z-index: -1; width: 0; height: 0;
  border-radius: var(--pill); background: var(--surface); box-shadow: var(--shadow-thumb);
  pointer-events: none; opacity: 0;
}
.wz-segmented.has-thumb .wz-segmented__thumb { opacity: 1; }
.wz-segmented.is-ready .wz-segmented__thumb {
  transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out);
}
.wz-segmented.has-thumb .wz-segmented__btn[aria-selected="true"],
.wz-segmented.has-thumb .wz-segmented__btn[aria-pressed="true"] { background: transparent; box-shadow: none; }
.wz-segmented__count {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--pill);
  background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700;
  display: inline-grid; place-items: center;
}

/* tag input */
.wz-taginput {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 44px; padding: 6px 8px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  cursor: text;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wz-taginput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.wz-taginput input { flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent; padding: 6px; font-size: var(--fs-md); }
.wz-taginput__tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 11px; border-radius: var(--pill);
  background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600;
}
.wz-taginput__tag button {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; color: inherit; padding: 0;
}
.wz-taginput__tag button:hover { background: var(--accent-ring); }

/* combobox listbox */
.wz-combo { position: relative; }
.wz-listbox {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: 6px;
  transform-origin: top center; animation: wz-pop-in var(--dur-2) var(--ease-out);
}
.wz-option {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-md);
  transition: background-color var(--dur-1) var(--ease-out);
}
.wz-option:hover { background: var(--tint); }
/* The keyboard's option (aria-activedescendant): focus stays in the input, so this IS the focus
   indicator and must be unmistakable. */
.wz-option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.wz-option__meta { font-size: var(--fs-xs); color: var(--sub); }
.wz-listbox__empty { padding: 10px 12px; font-size: var(--fs-sm); color: var(--sub); }
/* The form type-ahead (app/suggest-input.js) on the same listbox: a flag before the label, the
   typed part of a label in bold (never a highlighter yellow), and a select-style box with the
   chosen flag (or a search glass) at its start and a chevron at its end. */
.wz-option__main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wz-option__label { min-width: 0; overflow-wrap: anywhere; }
.wz-option__lead { flex-shrink: 0; width: 1.5em; text-align: center; font-size: 1.15em; line-height: 1; }
.wz-option__hit { background: none; color: inherit; font-weight: 700; padding: 0; }
.wz-suggest__field { position: relative; }
.wz-suggest__field .wz-input { padding-left: 42px; padding-right: 38px; }
.wz-suggest__lead, .wz-suggest__chev {
  position: absolute; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center;
  pointer-events: none; color: var(--muted);
}
.wz-suggest__lead { left: 14px; width: 20px; height: 20px; }
.wz-suggest__lead.is-flag { font-size: 18px; line-height: 1; color: inherit; }
.wz-suggest__chev { right: 14px; }

/* ── 7 surfaces ────────────────────────────────────────────────────────────── */
.wz-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.wz-card--lift { box-shadow: var(--shadow); }
.wz-card--glass { background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* .wz-card--tint, --accent, --mint and --navy are bands: section 7b. */
.wz-card--pad { padding: 24px 28px; }
.wz-card--flush { padding: 0; overflow: hidden; }
.wz-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.wz-card__head > div { min-width: 0; }
.wz-card__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--ink); }
.wz-card__sub { font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--sub); margin-top: 2px; }
.wz-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
/* Interactive cards only: a link card, or `.wz-card--interactive` on a card a script makes
   clickable. A static card never lifts, because movement on hover promises a click. The lift is
   for real pointers: on touch, a tapped card would stay "lifted" after the finger is gone. */
a.wz-card { color: inherit; text-decoration: none; display: block; }
a.wz-card, .wz-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.wz-card:hover, .wz-card--interactive:hover {
    box-shadow: var(--shadow-sm), var(--shadow); border-color: var(--accent-ring); transform: translateY(var(--lift));
  }
}
a.wz-card:active, .wz-card--interactive:active { transform: none; box-shadow: var(--shadow-sm); transition-duration: var(--dur-1); }

.wz-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--surface-2); color: var(--sub); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; max-width: 100%;
  /* Wraps: a fit-check requirement or an 80-character JD skill must not run off a phone. */
  white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.wz-tag--accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.wz-tag--ok { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.wz-tag--warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.wz-tag--bad { background: var(--bad); color: var(--bad-ink); border-color: transparent; }
.wz-tag--info { background: var(--info); color: var(--info-ink); border-color: transparent; }
.wz-tag--solid { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.wz-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.wz-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: 600; padding: 6px 14px; border-radius: var(--pill);
}
.wz-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block; }

.wz-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--av, 44px); height: var(--av, 44px); border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-weight: 700; font-size: calc(var(--av, 44px) * .36); letter-spacing: .02em;
}
.wz-avatar--round { border-radius: 50%; }

.wz-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-stat__label { font-size: var(--fs-sm); font-weight: 600; color: var(--sub); display: flex; align-items: center; gap: 6px; }
.wz-stat__value {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: var(--ls-num); color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.wz-stat__hint { font-size: var(--fs-xs); color: var(--sub); }

.wz-list { display: flex; flex-direction: column; }
.wz-list__item {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--line);
}
.wz-list__item:first-child { border-top: 0; padding-top: 0; }
.wz-list__item:last-child { padding-bottom: 0; }
.wz-list__main { flex: 1; min-width: 0; }

.wz-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: var(--fs-md); }
.wz-dl dt { color: var(--sub); font-weight: 500; }
.wz-dl dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.wz-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.wz-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.wz-table th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--sub); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap;
}
.wz-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wz-table tr:last-child td { border-bottom: 0; }

/* ── 8 feedback ────────────────────────────────────────────────────────────── */
.wz-spinner {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 2.5px solid currentColor; border-right-color: transparent; opacity: .85;
  animation: wz-spin .8s linear infinite;
}
.wz-spinner--lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes wz-spin { to { transform: rotate(360deg); } }

/* A tinted block with a highlight sweeping across it, then a rest. The sweep is a transformed
   pseudo-element (composited: no repaint per frame) and, with the spinners, the only looping
   motion in the app. The block itself appears after a beat, so a fast response never flashes a
   placeholder at all. Reduced motion keeps the block and drops the sweep. */
.wz-sk {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-sm); background: var(--sk-base);
  animation: wz-fade-in var(--dur-2) var(--ease-out) 150ms both;
}
.wz-sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--sk-shine) 50%, transparent);
  transform: translateX(-100%); animation: wz-shimmer 1.8s var(--ease-in-out) infinite;
}
.wz-sk--line { height: 12px; }
.wz-sk--title { height: 20px; width: 60%; }
.wz-sk--card { height: 140px; border-radius: var(--r-lg); }
.wz-sk--row { height: 96px; border-radius: var(--r-lg); }
@keyframes wz-shimmer { 0% { transform: translateX(-100%); } 65%, 100% { transform: translateX(100%); } }

.wz-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 20px; gap: 10px;
}
.wz-empty__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 4px;
  position: relative; animation: wz-empty-in var(--dur-3) var(--ease-spring) both;
}
/* The illustration moves once as it arrives — the disc settles, the glyph tips upright, a halo
   breathes out — and then holds still. */
.wz-empty__icon > .wz-icon { animation: wz-empty-icon var(--dur-3) var(--ease-out) 60ms both; }
.wz-empty__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: wz-halo var(--dur-3) var(--ease-out) 80ms both;
}
/* H3, as a prompt card's title is: an empty state is the same invitation in a different frame. */
.wz-empty__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--ink); }
.wz-empty__body { max-width: 52ch; color: var(--sub); font-size: var(--fs-md); }
.wz-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.wz-empty--bad .wz-empty__icon { background: var(--bad); color: var(--bad-ink); }
.wz-empty--compact { padding: 22px 12px; }
/* Whizply working on it (components.js `empty({pending})`, the sparkles state: matches being
   ranked). A loading indicator, like the spinners: after its arrival a ring breathes out of the
   disc and the glyph glints, slowly, transform and opacity only. Reduced motion: still. */
.wz-empty--pending .wz-empty__icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0;
  animation: wz-pending-ring var(--dur-pulse) var(--ease-out) var(--dur-3) infinite;
}
.wz-empty--pending .wz-empty__icon > .wz-icon {
  animation: wz-empty-icon var(--dur-3) var(--ease-out) 60ms both, wz-pending-glint var(--dur-pulse) var(--ease-in-out) var(--dur-3) infinite;
}
@keyframes wz-pending-ring { from { opacity: .8; transform: scale(1); } 75%, to { opacity: 0; transform: scale(1.5); } }
@keyframes wz-pending-glint { 0%, 100% { transform: scale(1) rotate(0deg); } 45% { transform: scale(.88) rotate(-8deg); } }

.wz-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r); border: 1px solid transparent;
  background: var(--info); color: var(--info-ink); font-size: var(--fs-md); line-height: 1.5;
}
.wz-alert > .wz-icon { margin-top: 1px; }
.wz-alert__body { flex: 1; min-width: 0; }
.wz-alert__title { font-weight: 700; margin-bottom: 2px; }
.wz-alert__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wz-alert--ok { background: var(--ok); color: var(--ok-ink); }
.wz-alert--warn { background: var(--warn); color: var(--warn-ink); }
.wz-alert--bad { background: var(--bad); color: var(--bad-ink); }
.wz-alert--accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ring); }

.wz-progress { height: 8px; border-radius: var(--pill); background: var(--accent-soft); overflow: hidden; }
.wz-progress__fill { height: 100%; border-radius: inherit; background: var(--accent); width: var(--v, 0%); transition: width var(--dur-3) var(--ease-out); }
.wz-progress--ok .wz-progress__fill { background: var(--ok-ink); }
.wz-progress--sub { background: var(--surface-2); }
.wz-progress--sub .wz-progress__fill { background: var(--line-strong); }

.wz-ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.wz-ring svg { transform: rotate(-90deg); display: block; }
.wz-ring__track { stroke: var(--accent-soft); }
.wz-ring__fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--dur-3) var(--ease-out); }
.wz-ring--ok .wz-ring__fill { stroke: var(--ok-ink); }
.wz-ring--ok .wz-ring__track { stroke: var(--ok); }
.wz-ring--na .wz-ring__track { stroke: var(--surface-2); }
.wz-ring__label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.wz-ring__value { font-family: var(--font-sans); font-weight: 700; font-size: calc(var(--ring, 64px) * .3); letter-spacing: var(--ls-num); color: var(--ink); }
.wz-ring__value small { font-size: .5em; margin-left: 1px; }
.wz-ring__cap { display: block; font-size: var(--fs-2xs); font-weight: 700; color: var(--sub); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-top: 3px; font-family: var(--font-sans); }

/* toasts (ui.js builds .atlas-toast*; restyled here for the theme) */
.atlas-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px));
}
.atlas-toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 16px; border-radius: var(--r);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); box-shadow: var(--shadow-lg);
  font-size: var(--fs-md); line-height: 1.45;
}
/* ui.js adds these. Entering is a class (removed when done), not a base animation: a toast moved
   into or out of an open dialog would otherwise replay its entrance. */
.atlas-toast.is-entering { animation: wz-toast-in var(--dur-3) var(--ease-out) both; }
.atlas-toast.is-leaving { animation: wz-toast-out var(--dur-2) var(--ease-in) both; pointer-events: none; }
.atlas-toast--success { border-left-color: var(--ok-ink); }
.atlas-toast--error { border-left-color: var(--bad-ink); }
.atlas-toast__msg { flex: 1; min-width: 0; }
/* a toast with controls under its message (ui.js `toast({extra})`) */
.atlas-toast__body { flex: 1; min-width: 0; display: grid; gap: 10px; }
.atlas-toast__close {
  border: 0; background: transparent; color: var(--sub); font-size: var(--fs-lg); line-height: 1;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.atlas-toast__close:hover { background: var(--tint); color: var(--ink); }
@keyframes wz-toast-in { from { opacity: 0; transform: translateY(calc(var(--nudge) * 3)) scale(var(--pop)); } }
@keyframes wz-toast-out { to { opacity: 0; transform: translateX(calc(var(--nudge) * 4)) scale(var(--pop)); } }
.atlas-spinner { display: grid; place-items: center; padding: 24px; }
.atlas-spinner__ring {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--accent); border-right-color: transparent;
  animation: wz-spin .8s linear infinite;
}

/* ── 9 overlays ────────────────────────────────────────────────────────────── */
.wz-dialog {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  max-width: min(var(--dlg-w, 560px), calc(100vw - 32px)); width: 100%;
  max-height: calc(100dvh - 48px);
  /* The panel scrolls itself; visible here so its shadow is not cut off at the dialog box and its
     entrance never flashes a scrollbar. */
  overflow: visible;
}
.wz-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* The PANEL animates, not the <dialog>: a transformed dialog would re-anchor the fixed-position
   menus and toasts placed inside it for the length of the animation. */
.wz-dialog[open]::backdrop { animation: wz-fade-in var(--dur-2) var(--ease-out); }
.wz-dialog[open] > .wz-dialog__panel { animation: wz-dialog-in var(--dur-3) var(--ease-out); }
.wz-dialog__panel {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100dvh - 48px);
}
.wz-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 4px; }
/* H2, as a drawer's title is (`openDrawer` sets `.wz-h2`): an overlay's title is the heading of
   what it opens. */
.wz-dialog__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--ink-heading, var(--ink));
}
.wz-dialog__body { padding: 12px 24px 8px; overflow-y: auto; color: var(--sub); font-size: var(--fs-md); }
.wz-dialog__body .wz-field { color: var(--ink); }
.wz-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 16px 24px 22px; }
@keyframes wz-dialog-in { from { opacity: 0; transform: translateY(var(--rise)) scale(var(--pop)); } }
@keyframes wz-dialog-out { to { opacity: 0; transform: scale(var(--pop)); } }

.wz-drawer {
  border: 0; padding: 0; margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
  width: min(var(--drawer-w, 720px), 100vw); max-width: 100vw;
  background: transparent; color: var(--ink);
  overflow: hidden;   /* the panel slides in from inside its own box: no scrollbar flash */
}
.wz-drawer::backdrop { background: var(--scrim); }
.wz-drawer[open]::backdrop { animation: wz-fade-in var(--dur-3) var(--ease-out); }
.wz-drawer[open] > .wz-drawer__panel { animation: wz-drawer-in var(--dur-3) var(--ease-out); }
.wz-drawer__panel {
  position: relative;
  height: 100%; background: var(--surface); border-left: 1px solid var(--line);
  border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.wz-drawer__head {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px 24px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.wz-drawer__head > :first-child { flex: 1; min-width: 0; }
.wz-drawer__head .wz-h2 + .wz-small { margin-top: 2px; font-size: var(--fs-md); font-weight: 500; color: var(--sub); }
.wz-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; overscroll-behavior: contain; }
.wz-drawer__foot {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface);
}
@keyframes wz-drawer-in { from { opacity: 0; transform: translateX(calc(var(--rise) * 6)); } }
@keyframes wz-drawer-out { to { opacity: 0; transform: translateX(calc(var(--rise) * 4)); } }

/* Closing. components.js closes the modal FIRST — focus is back on the control that opened it at
   once — then keeps the closed, inert element on screen for one short exit before removing it.
   These rules hold it where the modal was, with a stand-in for the backdrop. */
.wz-dialog.is-leaving, .wz-drawer.is-leaving {
  display: block; position: fixed; inset: 0; z-index: 140; pointer-events: none;
}
.wz-dialog.is-leaving { margin: auto; height: fit-content; }
.wz-drawer.is-leaving { margin: 0 0 0 auto; }
.wz-dialog.is-leaving::before, .wz-drawer.is-leaving::before {
  content: ""; position: fixed; inset: 0; background: var(--scrim);
  animation: wz-fade-out var(--dur-2) var(--ease-in) both;
}
.wz-dialog.is-leaving::before { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wz-dialog.is-leaving > .wz-dialog__panel { animation: wz-dialog-out var(--dur-2) var(--ease-in) both; }
.wz-drawer.is-leaving > .wz-drawer__panel { animation: wz-drawer-out var(--dur-2) var(--ease-in) both; }

.wz-menu {
  position: fixed; z-index: 150; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: 6px;
  /* components.js points the origin at the trigger and flips the nudge when the menu opens
     upward, so the menu grows out of the button that opened it. */
  transform-origin: var(--wz-origin, top right);
  animation: wz-pop-in var(--dur-2) var(--ease-out);
}
.wz-menu.is-leaving { animation: wz-pop-out var(--dur-1) var(--ease-in) both; pointer-events: none; }
.wz-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink); font-size: var(--fs-md); font-weight: 500; text-align: left; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
.wz-menu__item .wz-icon { color: var(--sub); }
.wz-menu__item:hover { background: var(--tint); text-decoration: none; }
/* Keyboard focus was a background change alone — a near-white wash on white, all but invisible. */
.wz-menu__item:focus-visible { background: var(--tint); text-decoration: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.wz-menu__item[aria-checked="true"] { color: var(--accent-deep); font-weight: 600; }
.wz-menu__item[aria-checked="true"] .wz-icon { color: var(--accent); }
.wz-menu__item--danger { color: var(--bad-ink); }
.wz-menu__item--danger .wz-icon { color: var(--bad-ink); }
.wz-menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
.wz-menu__label { padding: 8px 12px 4px; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }

/* ── 10 domain blocks ──────────────────────────────────────────────────────── */
/* job card */
.wz-job {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 18px 16px 20px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wz-job:hover { box-shadow: var(--shadow); border-color: var(--accent-ring); }
.wz-job.is-applied { background: var(--surface-2); }
.wz-job__title {
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--ink);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.wz-job__title:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
/* The heading around the title button sets no type of its own, as `.wz-track__title` does: the
   browser's 1.17em h3 gave every card a first line ~5px taller than its title. */
.wz-job h3 { font-size: inherit; line-height: var(--lh-h3); }
.wz-job__company { font-size: var(--fs-md); font-weight: 600; color: var(--sub); margin-top: 2px; }
.wz-job__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: var(--fs-sm); color: var(--sub); }
.wz-job__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wz-job__meta .wz-icon { color: var(--muted); }
.wz-job__reason {
  margin-top: 10px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}
.wz-job__reason .wz-icon { color: var(--accent); margin-top: 2px; }
.wz-job__tags { margin-top: 12px; }
.wz-job__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wz-job__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wz-job--compact { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px 16px; gap: 12px; }
.wz-job--compact .wz-avatar { --av: 40px; }
/* In a shelf beside course and company tiles, a compact card's title is a tile title (H4). */
.wz-job--compact .wz-job__title { font-size: var(--fs-md); letter-spacing: 0; }

/* applications: the stage pipeline and the tracker card (pages/applications.js). A stage is a
   count over its name — read at a glance — and the filter for the list (pressed = only it). */
.wz-pipeline { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wz-pipeline__stage {
  display: grid; justify-items: start; align-content: start; gap: 2px; flex: 1 1 96px; max-width: 190px; padding: var(--space-3) var(--space-4);
  border: 1.5px solid transparent; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--ink); text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-pipeline__stage:hover { border-color: var(--dash); }
.wz-pipeline__stage:active { transform: scale(var(--press)); }
.wz-pipeline__stage[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wz-pipeline__n { font-size: var(--fs-xl); line-height: 1.1; }
.wz-pipeline__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--sub); }
.wz-pipeline__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--muted)); }
.wz-pipeline__stage--info { --dot: var(--info-ink); }
.wz-pipeline__stage--accent { --dot: var(--accent); }
.wz-pipeline__stage--ok { --dot: var(--ok-ink); }
.wz-pipeline__stage--bad { --dot: var(--bad-ink); }
.wz-pipeline__stage--warn { --dot: var(--warn-ink); }
.wz-pipeline__stage[aria-pressed="true"] .wz-pipeline__label { color: var(--accent-ink); }

.wz-track { padding: var(--space-5) var(--space-5) var(--space-4); }
.wz-track__top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.wz-track__main { min-width: 0; }
.wz-track__title { margin: 0; min-width: 0; font-size: inherit; }
.wz-track__status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.wz-track__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-left: 60px; }
.wz-track__history { margin-top: var(--space-4); padding-left: 60px; }
@media (max-width: 560px) {
  .wz-track { padding: var(--space-4); }
  .wz-track__top { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
  .wz-track__top > .wz-avatar { --av: 40px; }
  .wz-track__status { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wz-track__actions, .wz-track__history { padding-left: 0; }
}

/* evaluate: a report as a shelf card (pages/evaluate.js). Its grade is the cover, tinted by the
   grade's tone, with the score on it; the whole card is the button that opens the report. */
.wz-report {
  display: flex; flex-direction: column; gap: var(--space-3); width: 100%; min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-align: left;
}
.wz-report:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }   /* inside the shelf row's padding */
.wz-report__cover {
  --tone-bg: var(--surface-2); --tone-ink: var(--sub);
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r);
  background: linear-gradient(140deg, var(--tone-bg), color-mix(in srgb, var(--tone-ink) 16%, var(--tone-bg)));
  color: var(--tone-ink);
}
.wz-report--ok .wz-report__cover { --tone-bg: var(--ok); --tone-ink: var(--ok-ink); }
.wz-report--info .wz-report__cover { --tone-bg: var(--info); --tone-ink: var(--info-ink); }
.wz-report--warn .wz-report__cover { --tone-bg: var(--warn); --tone-ink: var(--warn-ink); }
.wz-report--bad .wz-report__cover { --tone-bg: var(--bad); --tone-ink: var(--bad-ink); }
.wz-report__grade { font-family: var(--font-sans); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: var(--ls-display); }
.wz-report__score {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; box-shadow: var(--shadow-sm);
}
.wz-report__body { display: grid; gap: 3px; min-width: 0; padding: 0 var(--space-1); }
.wz-report__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em); font-size: var(--fs-md); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
}
.wz-report__company { overflow: hidden; font-size: var(--fs-xs); color: var(--sub); text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .wz-report:hover .wz-report__title { color: var(--accent-deep); } }

/* detail sections inside drawers */
.wz-dsec + .wz-dsec { margin-top: var(--space-6); }
.wz-dsec__title {
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--sub); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.wz-jd { font-size: var(--fs-md); line-height: 1.7; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wz-jd.is-collapsed { max-height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }

/* stepper */
.wz-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; margin: 0 0 28px; }
.wz-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wz-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 20px; left: calc(50% + 28px); right: calc(-50% + 28px);
  border-top: 1.5px dashed var(--dash);
}
.wz-steps__dot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--sub);
  position: relative; z-index: 1; font-weight: 700; font-size: var(--fs-md);
}
.wz-steps li[aria-current="step"] .wz-steps__dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.wz-steps li.is-done .wz-steps__dot { background: var(--btn-accent); border-color: var(--btn-accent); color: var(--btn-accent-ink); }
.wz-steps__label { font-size: var(--fs-sm); font-weight: 600; color: var(--sub); }
.wz-steps li[aria-current="step"] .wz-steps__label { color: var(--ink); }

/* dropzone */
.wz-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 32px 20px; min-height: 200px;
  border: 1.5px dashed var(--dash); border-radius: var(--r-lg); background: var(--surface-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer;
}
.wz-drop:hover, .wz-drop.is-over { background: var(--accent-soft); border-color: var(--accent); }
.wz-drop:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }
.wz-drop__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.wz-drop__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--ink); }

/* timeline */
.wz-timeline { list-style: none; display: flex; flex-direction: column; gap: 0; }
.wz-timeline li { position: relative; padding: 0 0 14px 24px; }
.wz-timeline li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.wz-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; border-left: 1.5px dashed var(--dash); }
.wz-timeline__label { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.wz-timeline__at { font-size: var(--fs-xs); color: var(--sub); }
.wz-timeline__note { font-size: var(--fs-sm); color: var(--sub); margin-top: 2px; }

/* pagination */
.wz-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.wz-pager__btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wz-pager__btn:hover:not([disabled]) { border-color: var(--dash); }
.wz-pager__btn:active:not([disabled]) { transform: scale(var(--press-icon)); }
.wz-pager__btn[aria-current="page"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.wz-pager__btn[disabled] { opacity: .45; cursor: not-allowed; }
.wz-pager__gap { color: var(--muted); padding: 0 4px; }

/* resource tiles (learning) */
.wz-res { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.wz-res:first-child { border-top: 0; padding-top: 0; }
.wz-res__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.wz-res__title { font-weight: 600; font-size: var(--fs-md); color: var(--ink); overflow-wrap: anywhere; }
.wz-res__title:hover { color: var(--accent-deep); }
.wz-res__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: var(--fs-xs); color: var(--sub); }

/* bars (insights) */
.wz-bars { display: flex; flex-direction: column; gap: 12px; }
.wz-bar { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: var(--fs-md); }
.wz-bar__label { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-bar__track { height: 10px; border-radius: var(--pill); background: var(--accent-soft); overflow: hidden; }
.wz-bar__fill { height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }
.wz-bar__val { text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }

/* diff (tailoring) */
.wz-diff { display: grid; gap: 8px; }
.wz-diff__line { padding: 10px 12px; border-radius: 10px; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }
.wz-diff__line--before { background: var(--bad); color: var(--ink); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad-ink) 55%, transparent); }
.wz-diff__line--after { background: var(--ok); color: var(--ink); }
.wz-diff__line--same { background: var(--surface-2); color: var(--ink); }
.wz-diff__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--sub); }

/* prose (markdown) */
.wz-prose { font-size: var(--fs-base); line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.wz-prose > * + * { margin-top: 12px; }
/* Headings inside prose sit one step under the page's own: a report's h1 is an H2. */
.wz-prose h1, .wz-prose h2, .wz-prose h3, .wz-prose h4 { line-height: 1.3; margin-top: 22px; font-weight: 700; letter-spacing: var(--ls-h3); }
.wz-prose h1 { font-family: var(--font-sans); font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
.wz-prose h2 { font-size: var(--fs-lg); }
.wz-prose h3 { font-size: var(--fs-lead); }
.wz-prose ul, .wz-prose ol { padding-left: 22px; }
.wz-prose li + li { margin-top: 4px; }
.wz-prose blockquote { margin: 0; padding: 8px 14px; border-left: 3px solid var(--accent-ring); color: var(--sub); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.wz-prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.wz-prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 12px; overflow-x: auto; }
.wz-prose pre code { background: none; padding: 0; }
.wz-prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); display: block; overflow-x: auto; }
.wz-prose th, .wz-prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.wz-prose th { background: var(--surface-2); }
.wz-prose hr { margin: 18px 0; }

/* assistant */
.wz-chat { display: flex; flex-direction: column; height: 100%; }
.wz-chat__log { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.wz-chat__msg { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }
.wz-chat__msg p + p { margin-top: 8px; }
.wz-chat__msg .wz-prose { font-size: var(--fs-md); line-height: 1.6; }
.wz-chat__msg .wz-prose > * + * { margin-top: 8px; }
.wz-chat__msg .wz-prose h2, .wz-chat__msg .wz-prose h3, .wz-chat__msg .wz-prose h4 { font-size: var(--fs-base); margin-top: 12px; }
.wz-chat__msg--me { align-self: flex-end; background: var(--btn); color: var(--btn-ink); border-bottom-right-radius: 6px; }
.wz-chat__msg--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.wz-chat__cites { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wz-chat__cite { display: block; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }
.wz-chat__cite:hover { border-color: var(--accent-ring); text-decoration: none; }
.wz-chat__form { border-top: 1px solid var(--line); padding: 14px 20px 18px; display: grid; gap: 8px; }
.wz-chat__quick { display: flex; flex-wrap: wrap; gap: 6px; }

/* misc */
.wz-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--sub); }
.wz-kv strong { color: var(--ink); font-weight: 600; }
.wz-divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.wz-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block; }
.wz-feature { display: flex; gap: 14px; align-items: flex-start; }
.wz-feature__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.wz-checklist { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.wz-checklist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out); }
.wz-checklist li:hover { background: var(--tint); }
.wz-checklist__mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--dash); color: var(--accent); flex-shrink: 0; }
.wz-checklist li.is-done .wz-checklist__mark { background: var(--ok); border: 0; color: var(--ok-ink); }
.wz-checklist li.is-done .wz-checklist__text { color: var(--sub); }
.wz-checklist__text { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-md); }
.wz-checklist__text small { display: block; font-weight: 500; color: var(--sub); font-size: var(--fs-xs); }
.wz-subnav { display: flex; flex-direction: column; gap: 2px; }
.wz-subnav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md);
  color: var(--ink); font-weight: 500; font-size: var(--fs-md); text-decoration: none;
  /* The selection cross-fades from the old item to the new one instead of jumping. */
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.wz-subnav a:hover { background: var(--tint); text-decoration: none; }
.wz-subnav a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.wz-subnav a .wz-icon { color: var(--sub); transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
.wz-subnav a:hover .wz-icon { color: var(--accent); transform: translateX(calc(var(--nudge) / 2)); }
.wz-subnav a[aria-current="true"] .wz-icon { color: var(--accent); }

/* Shelves and course cards (components.js `shelf`, `courseCard`). A shelf is a titled row that
   scroll-snaps sideways (and swipes on a phone); `--per` is how many cards fit across. The
   row's padding leaves room for the card lift and its shadow, which a scroller would clip. */
.wz-shelf { margin: 0 0 var(--space-8); }
.wz-shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.wz-shelf__titles { min-width: 0; }
.wz-shelf__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--ink-heading, var(--ink)); }
.wz-shelf__sub { margin: 2px 0 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--sub); }
.wz-shelf__nav { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.wz-shelf__all {
  margin-right: var(--space-1); padding: 4px 2px; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.wz-shelf__all:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.wz-shelf__nav .wz-iconbtn:disabled { opacity: .38; cursor: default; transform: none; }
.wz-shelf__row {
  --per: 5;
  display: grid; grid-auto-flow: column; gap: var(--space-4);
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--space-4)) / var(--per));
  margin: 0 -4px; padding: 4px 4px 12px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  scrollbar-width: none;
}
.wz-shelf__row::-webkit-scrollbar { display: none; }
.wz-shelf__item { display: flex; min-width: 0; scroll-snap-align: start; }
.wz-shelf.is-expanded .wz-shelf__row {
  grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); overflow: visible;
}
/* Sized by the shelf's OWN width, so one shelf fits a page or a dashboard column alike. */
.wz-shelf { container-type: inline-size; }
@container (max-width: 1080px) { .wz-shelf__row { --per: 4; } }
@container (max-width: 820px) { .wz-shelf__row { --per: 3; } }
@container (max-width: 560px) {
  .wz-shelf__row { --per: 1.75; gap: var(--space-3); grid-auto-columns: calc((100% - .75 * var(--space-3)) / 1.75); }
  .wz-shelf__title { font-size: var(--fs-h2-sm); }
}
@media (max-width: 640px) { .wz-shelf { margin-bottom: var(--space-7); } }
/* A touch screen swipes; the arrows are for a mouse. */
@media (hover: none) and (pointer: coarse) { .wz-shelf__nav .wz-iconbtn { display: none; } }
/* In a card that has its own title: no margin, just the arrows above the row. */
.wz-shelf--bare { margin: 0; }
.wz-shelf--bare .wz-shelf__head { justify-content: flex-end; margin: calc(var(--space-2) * -1) 0 var(--space-2); }
.wz-shelf--bare .wz-shelf__head:not(:has(.wz-iconbtn:not([hidden]))) { display: none; }

/* The cover is generated art, seeded by the resource (components.js `coverArt`): two soft colour
   fields over a gradient, plus one shape — circle, rounded square or capsule, filled or a ring — in
   the provider's palette (`--h1..3`), mixed into the surface so it reads in both themes. It is
   static, so reduced motion has nothing to stop. No initials: the provider's name sits in a corner.
   Every piece of TEXT on a cover (badges, that name) is on a 92%-surface pill, so its contrast holds
   over ANY art: at worst 0.92 surface + 0.08 black/white under the text, still 5:1+ for --ok-ink
   and 11:1+ for --ink, in light and dark. */
.wz-course {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
}
a.wz-course:hover { text-decoration: none; }
a.wz-course:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wz-course__cover {
  --h1: 24; --h2: 54; --h3: 4;
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: var(--r);
  background:
    radial-gradient(62% 88% at var(--x1, 20%) var(--y1, 20%), color-mix(in srgb, hsl(var(--h2) 80% 60%) 46%, var(--surface)), transparent 72%),
    radial-gradient(58% 80% at var(--x2, 80%) var(--y2, 85%), color-mix(in srgb, hsl(var(--h3) 78% 56%) 44%, var(--surface)), transparent 70%),
    linear-gradient(var(--a, 140deg), color-mix(in srgb, hsl(var(--h1) 72% 62%) 30%, var(--surface)), color-mix(in srgb, hsl(calc(var(--h1) + 16) 70% 50%) 52%, var(--surface)));
}
.wz-course__cover::before {
  content: ""; position: absolute; z-index: -1; left: var(--sx, 60%); top: var(--sy, 45%);
  width: var(--sw, 40%); aspect-ratio: var(--sr, 1); border-radius: var(--br, 50%);
  border: var(--ring, 0px) solid color-mix(in srgb, hsl(var(--h2) 85% 72%) 62%, var(--surface));
  background: color-mix(in srgb, color-mix(in srgb, hsl(var(--h3) 85% 70%) 58%, var(--surface)) var(--fill, 45%), transparent);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); pointer-events: none;
}
.wz-course__brand {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 58px); padding: 4px 10px;
  border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm);
}
.wz-course__brand::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  vertical-align: 1px; background: color-mix(in srgb, hsl(var(--h1) 72% 46%) 85%, var(--ink));
}
.wz-course__fmt {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.wz-course__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.wz-course__badge {
  padding: 3px 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.4; box-shadow: var(--shadow-sm);
}
.wz-course__badge--free { color: var(--ok-ink); }
.wz-course__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 var(--space-1); }
.wz-course__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em); font-size: var(--fs-md); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
  transition: color var(--dur-1) var(--ease-out);
}
.wz-course__provider { overflow: hidden; font-size: var(--fs-xs); color: var(--sub); text-overflow: ellipsis; white-space: nowrap; }
/* One line: a narrow card cuts it short rather than wrapping a "·" onto a line of its own. */
.wz-course__meta { display: block; min-height: 1.5em; overflow: hidden; font-size: var(--fs-xs); color: var(--sub); text-overflow: ellipsis; white-space: nowrap; }
.wz-course__meta > span + span::before { content: "·"; margin: 0 6px; color: var(--muted); }
.wz-course__star { color: var(--warn-ink); }
.wz-course__cover::before { transition: transform var(--dur-reveal) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.wz-course:hover .wz-course__title { color: var(--accent-deep); }
  /* The cover's shape turns and grows a touch under the pointer: the card is alive, not a slab. */
  a.wz-course:hover .wz-course__cover::before { transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 10deg)) scale(1.08); }
}
.wz-course--sk { box-shadow: none; }
.wz-course--sk .wz-course__cover { background: var(--sk-base); }
.wz-course--sk .wz-course__cover::before { display: none; }
.wz-course--sk .wz-course__body { gap: 8px; padding-top: 2px; }

/* Feature prompts, disclosures and notes (components.js `promptCard`, `disclosure`, `noteLine`).
   A prompt is the Spotify "Create your first playlist" card — a bold title, one short line, one
   button — on a soft fill with no border: an invitation, not a container. `.wz-prompts` lays a few
   side by side. The disclosure is the quiet "How this works" line that opens in place; the note
   is the one-line privacy / cost / honesty remark that must stay on screen. */
.wz-prompts {
  display: grid; gap: var(--block-gap); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.wz-prompt {
  container-type: inline-size; min-width: 0; padding: var(--space-5);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.wz-prompt__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); height: 100%; }
/* Across a wide page: icon, words, button in one row, so a lone prompt is not a near-empty slab. */
@container (min-width: 600px) {
  .wz-prompt__inner { flex-direction: row; align-items: center; gap: var(--space-4); }
  .wz-prompt__text { flex: 1; }
  .wz-prompt__inner > .wz-prompt__actions { margin-top: 0; flex-shrink: 0; }
}
.wz-prompt--accent { background: var(--accent-soft); box-shadow: none; }
.wz-prompt--plain { padding: 0; background: transparent; box-shadow: none; }
.wz-prompt__icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink);
}
.wz-prompt--accent .wz-prompt__icon { background: var(--surface); }
.wz-prompt__text { display: grid; gap: var(--space-1); min-width: 0; }
.wz-prompt__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--ink); }
.wz-prompt__body { max-width: 56ch; font-size: var(--fs-md); line-height: 1.5; color: var(--sub); }
.wz-prompt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }

.wz-how { min-width: 0; }
.wz-how__summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 2px 0;
  list-style: none; cursor: pointer; border-radius: var(--r-xs);
  color: var(--sub); font-size: var(--fs-sm); font-weight: 600;
  transition: color var(--dur-1) var(--ease-out);
}
.wz-how__summary::-webkit-details-marker { display: none; }
.wz-how__summary::marker { content: ""; }
.wz-how__summary:hover { color: var(--ink); }
.wz-how__summary > .wz-icon:first-child { color: var(--accent); }
.wz-how__chev { color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.wz-how[open] > .wz-how__summary .wz-how__chev { transform: rotate(180deg); }
.wz-how__body { max-width: 72ch; padding: var(--space-2) 0 var(--space-1) 24px; font-size: var(--fs-md); line-height: 1.55; color: var(--sub); }
.wz-how[open] > .wz-how__body { animation: wz-fade-in var(--dur-2) var(--ease-out) both; }
.wz-how__body > * + * { margin-top: var(--space-2); }
.wz-how__list { display: grid; gap: var(--space-2); padding-left: 18px; }
.wz-how__list--steps { padding-left: 0; list-style: none; counter-reset: wz-how; }
.wz-how__list--steps > li { position: relative; padding-left: 32px; counter-increment: wz-how; }
.wz-how__list--steps > li::before {
  content: counter(wz-how); position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700;
}

.wz-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--sub); }
.wz-note > .wz-icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.wz-note > span { min-width: 0; overflow-wrap: anywhere; }

/* Every shelf item is a containing block. An absolutely positioned descendant — any `.sr-only`
   label inside a card — is clipped by an overflow ancestor only when that ancestor is in its
   containing-block chain; without this, a card that is not itself positioned let those labels
   escape the scrolling row and widened the whole document (2,900px on /insights). */
.wz-shelf__item { position: relative; }

/* `.wz-section__head--lg` (sectionHead `size: 'lg'`) once lifted a section's title to the shelf's
   type. Every H2 has that type now (section 3), so the modifier is kept for its callers and needs
   no rule of its own. */

/* ===== logo tiles, shared (logos.js): a self-hosted logo, or a monogram when there is none =====
   The home page (home.css sizes them per context) and the app's mentor cards.
   Always a light tile, in dark mode too: logos are drawn for light backgrounds. Logos show in
   full brand colour all the time. The tile has an edge and a soft lift (--logo-edge,
   --logo-lift), so a white tile still reads on a white card or a light band. A monogram takes
   one of six brand-like tints (--mono-0..5, ink on tint 5.4:1 or more). The size is the
   context's (--lg); the image's width/height attributes match it. */
.lg-tile { --lg: 40px; position: relative; flex-shrink: 0; display: grid; place-items: center; width: var(--lg); height: var(--lg); border-radius: var(--r-sm); overflow: hidden; background: var(--logo-tile); color: var(--logo-ink); box-shadow: var(--logo-lift); }
.lg-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--logo-edge); pointer-events: none; }
.lg-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lg-mono { font-family: var(--font-sans); font-weight: 800; font-size: calc(var(--lg) * .36); line-height: 1; letter-spacing: -.02em; }
.lg-tile--m0 { background: var(--mono-0-bg); color: var(--mono-0-ink); }
.lg-tile--m1 { background: var(--mono-1-bg); color: var(--mono-1-ink); }
.lg-tile--m2 { background: var(--mono-2-bg); color: var(--mono-2-ink); }
.lg-tile--m3 { background: var(--mono-3-bg); color: var(--mono-3-ink); }
.lg-tile--m4 { background: var(--mono-4-bg); color: var(--mono-4-ink); }
.lg-tile--m5 { background: var(--mono-5-bg); color: var(--mono-5-ink); }

/* ===== a mentor's company (app/mentor-company.js): the Learn from mentors and Find a mentor cards =====
   The current company's own logo tile, "Senior PM at Google" with a small "Verified" mark, and the
   companies they worked at before ("Ex-Microsoft, Flipkart +2"). Each name is a quiet text button
   that filters the search to mentors from it. Tokens only, so every theme follows. */
.wz-co { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.wz-co .lg-tile { --lg: 36px; border-radius: var(--r-sm); }
.wz-co__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.wz-co__now { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--sub); overflow-wrap: anywhere; }
.wz-co__role { font-weight: 600; color: var(--ink); }
.wz-co__past { margin: 0; font-size: var(--fs-xs); line-height: 1.45; font-weight: 600; color: var(--sub); overflow-wrap: anywhere; }
.wz-co__past > .wz-icon { margin-right: 4px; vertical-align: -2px; color: var(--sub); }
/* The names as quiet text buttons: the reset first, then the weights (more specific, so the
   reset's `font: inherit` never wins over them). */
.wz-co button {
  display: inline; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.wz-co .wz-co__name { font-weight: 800; color: var(--ink); }
.wz-co .wz-co__now .wz-co__name { font-size: var(--fs-md); }
.wz-co .wz-co__past .wz-co__name { font-weight: 700; }
.wz-co .wz-co__more { margin-left: 2px; font-weight: 700; color: var(--accent-deep); }
.wz-co button:hover { color: var(--accent-deep); text-decoration-color: currentColor; }
.wz-co button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wz-co__ok {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px 1px 5px; border-radius: var(--pill);
  background: var(--ok); color: var(--ok-ink); font-size: var(--fs-2xs); font-weight: 800; line-height: 1.5; vertical-align: 1px; white-space: nowrap;
}
.wz-co__ok .wz-icon { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .wz-co button { transition: none; } }

/* ── 7b bands and tinted surfaces ──────────────────────────────────────────── */
/* Bands (2026-10-15, colour v2; the pairs are section 1's BANDS). A band REMAPS the base tokens
   for everything inside it (ink, sub, accent, surfaces, lines, chips), so any component placed
   in one takes the band's colours with no rule of its own: near-black text (white on navy),
   subtext in a deep tone of the band's hue, links and chips matched to it, white cards. Buttons
   keep the brand accent; on navy they turn white with violet text. Where to reach for which:
     .wz-band--violet | --navy | --mint        a full-width section (its padding is the page's)
     .wz-card--tint (violet) | --mint | --navy  a tinted card; .wz-card--accent is the violet one
     promptCard({tone: 'violet' | 'mint' | 'navy'})   ('accent' is the violet one, as before)
     empty({tone: 'tint'})                      an empty state on its own violet panel
     pageHead({band: 'violet' | 'mint' | 'navy'})     the page title on a band (a page's hero) */
.wz-band--violet, .wz-card--tint, .wz-card--accent, .wz-prompt--accent, .wz-prompt--violet,
.wz-empty--tint, .wz-page-head--violet {
  --ink: var(--band-violet-ink); --navy: var(--band-violet-ink); --ink-heading: var(--band-violet-heading);
  --sub: var(--band-violet-sub); --muted: var(--band-violet-sub);
  --accent: var(--band-violet-accent); --accent-deep: var(--band-violet-link);
  --accent-soft: var(--band-violet-chip); --accent-ink: var(--band-violet-chip-ink); --accent-ring: var(--band-violet-line);
  --surface: var(--band-violet-surface); --surface-2: var(--band-violet-bg);
  --line: var(--band-violet-line); --line-strong: var(--band-violet-line);
  --tint: color-mix(in srgb, var(--band-violet-chip) 62%, transparent);
  background-color: var(--band-violet-bg); color: var(--ink);
}
.wz-band--mint, .wz-card--mint, .wz-prompt--mint, .wz-page-head--mint {
  --ink: var(--band-mint-ink); --navy: var(--band-mint-ink); --ink-heading: var(--band-mint-heading);
  --sub: var(--band-mint-sub); --muted: var(--band-mint-sub);
  --accent: var(--band-mint-accent); --accent-deep: var(--band-mint-link);
  --accent-soft: var(--band-mint-chip); --accent-ink: var(--band-mint-chip-ink); --accent-ring: var(--band-mint-line);
  --surface: var(--band-mint-surface); --surface-2: var(--band-mint-bg);
  --line: var(--band-mint-line); --line-strong: var(--band-mint-line);
  --tint: color-mix(in srgb, var(--band-mint-chip) 62%, transparent);
  background-color: var(--band-mint-bg); color: var(--ink);
}
/* Navy is a local dark theme, in light mode too: every token a component reads is remapped. */
.wz-band--navy, .wz-card--navy, .wz-prompt--navy, .wz-page-head--navy {
  color-scheme: dark;
  --bg: var(--band-navy-bg); --surface: var(--band-navy-surface);
  --surface-2: color-mix(in srgb, var(--band-navy-surface) 55%, var(--band-navy-bg));
  --glass: color-mix(in srgb, var(--band-navy-surface) 82%, transparent);
  --ink: var(--band-navy-ink); --navy: var(--band-navy-ink); --ink-heading: var(--band-navy-heading);
  --sub: var(--band-navy-sub); --muted: var(--band-navy-sub);
  --accent: var(--band-navy-accent); --accent-deep: var(--band-navy-link);
  --accent-soft: var(--band-navy-chip); --accent-ink: var(--band-navy-chip-ink); --accent-ring: var(--band-navy-line);
  --line: var(--band-navy-line); --line-strong: var(--band-navy-line);
  --line-control: color-mix(in srgb, var(--band-navy-accent) 45%, var(--band-navy-bg));
  --dash: color-mix(in srgb, var(--band-navy-accent) 55%, var(--band-navy-bg));
  --hl: var(--band-navy-chip);
  --btn: var(--band-navy-btn); --btn-hover: var(--band-navy-btn-hover); --btn-ink: var(--band-navy-btn-ink);
  --btn-accent: var(--band-navy-btn); --btn-accent-hover: var(--band-navy-btn-hover); --btn-accent-ink: var(--band-navy-btn-ink);
  --ok: var(--band-navy-ok); --ok-ink: var(--band-navy-ok-ink); --warn: var(--band-navy-warn); --warn-ink: var(--band-navy-warn-ink);
  --bad: var(--band-navy-bad); --bad-ink: var(--band-navy-bad-ink); --info: var(--band-navy-info); --info-ink: var(--band-navy-info-ink);
  --tint: color-mix(in srgb, var(--band-navy-chip) 62%, transparent);
  --sk-base: color-mix(in srgb, var(--band-navy-ink) 8%, transparent);
  background-color: var(--band-navy-bg); color: var(--ink);
}
.wz-band--navy { background-image: var(--band-navy-wash); }
/* Tinted cards and prompts are fills, not frames: no edge, no drop. */
.wz-card--tint, .wz-card--accent, .wz-card--mint, .wz-card--navy { border-color: transparent; box-shadow: none; }
.wz-prompt--violet, .wz-prompt--mint, .wz-prompt--navy { box-shadow: none; }
:is(.wz-prompt--accent, .wz-prompt--violet, .wz-prompt--mint, .wz-prompt--navy) .wz-prompt__icon { background: var(--surface); color: var(--accent-deep); }
/* An empty state on its own panel: the icon disc turns white so it stands off the tint. */
.wz-empty--tint { border-radius: var(--r-lg); padding: var(--space-8) var(--space-5); }
.wz-empty--tint.wz-empty--compact { padding: var(--space-6) var(--space-4); }
.wz-empty--tint .wz-empty__icon { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
/* The page title on a band: a rounded panel with a soft glow, the page's hero. */
.wz-page-head--band {
  position: relative; isolation: isolate; align-items: center;
  padding: var(--space-6) var(--space-7); border-radius: var(--r-xl);
  background-image: var(--wash-band);
}
.wz-page-head--navy { background-image: var(--band-navy-wash); }
@media (max-width: 760px) {
  .wz-page-head--band { padding: var(--space-5); border-radius: var(--r-lg); }
}

/* ── 11 utilities ──────────────────────────────────────────────────────────── */
.wz-mt-0 { margin-top: 0 !important; }
.wz-mt-4 { margin-top: 4px; } .wz-mt-8 { margin-top: 8px; } .wz-mt-12 { margin-top: 12px; }
.wz-mt-16 { margin-top: 16px; } .wz-mt-20 { margin-top: 20px; } .wz-mt-24 { margin-top: 24px; }
.wz-mb-8 { margin-bottom: 8px; } .wz-mb-12 { margin-bottom: 12px; } .wz-mb-16 { margin-bottom: 16px; }
.wz-ml-auto { margin-left: auto; }
.wz-grow { flex: 1; min-width: 0; }
.wz-center { text-align: center; }
.wz-nowrap { white-space: nowrap; }
.wz-accent { color: var(--accent-deep); }
.wz-ok-text { color: var(--ok-ink); }
.wz-bad-text { color: var(--bad-ink); }
.wz-warn-text { color: var(--warn-ink); }
.wz-w-full { width: 100%; }

/* ── 12 responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wz-split { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
}
@media (max-width: 1080px) {
  .wz-app { grid-template-columns: minmax(0, 1fr); }
  .wz-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); padding: 0;
    transform: translateX(-104%); transition: transform var(--dur-3) var(--ease-out);
  }
  .wz-sidebar__panel {
    border-radius: 0 var(--r-lg) var(--r-lg) 0; border: 0;
    background: linear-gradient(180deg, var(--side-top), var(--side-bottom)); box-shadow: var(--shadow-lg);
  }
  .wz-sidebar__panel::after { display: none; }
  .wz-sidebar .wz-sidebar__close { display: inline-grid; }
  .wz-app.is-nav-open .wz-sidebar { transform: none; }
  .wz-app.is-nav-open .wz-scrim { opacity: 1; pointer-events: auto; }
  .wz-topbar { padding: 10px 20px; }
  .wz-topbar .wz-topbar__menu { display: inline-grid; }
  .wz-page { padding: 4px 20px 56px; }
  .wz-split, .wz-split--even { grid-template-columns: minmax(0, 1fr); }
  .wz-sticky { position: static; }
}
@media (max-width: 760px) {
  :root { --head-gap: var(--space-5); --section-gap: var(--space-6); --fs-h2: var(--fs-h2-sm); }
  body.wz { font-size: var(--fs-md); }
  /* A label may wrap on a phone; the block padding keeps two lines off the edges. */
  .wz-btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 6px; }
  .wz-topbar { padding: 8px 12px; min-height: 56px; }
  .wz-topbar__crumb { display: none; }
  .wz-page { padding: 4px 16px 48px; }
  .wz-page-head { align-items: flex-start; }
  .wz-page-head__actions { width: 100%; }
  .wz-grid { grid-template-columns: minmax(0, 1fr); }
  .wz-grid--keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-card { padding: 16px; border-radius: 18px; }
  .wz-card--pad { padding: 18px; }
  .wz-job { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 12px; }
  .wz-job .wz-avatar { --av: 40px; }
  .wz-job__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .wz-steps { --n: 1 !important; grid-template-columns: repeat(var(--steps-n, 5), minmax(0, 1fr)); }
  .wz-steps li::after { display: none; }
  .wz-steps__label { display: none; }
  .wz-bar { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 52px; gap: 8px; }
  .wz-drawer__panel { border-radius: 0; }
  .wz-drawer__body { padding: 16px 16px 24px; }
  .wz-drawer__head { padding: 14px 14px 12px 16px; }
  .wz-drawer__foot { padding: 12px 16px; }
  .wz-dialog__head { padding: 18px 18px 4px; }
  .wz-dialog__body { padding: 10px 18px 6px; }
  .wz-dialog__foot { padding: 14px 18px 18px; }
  .wz-dialog__foot .wz-btn { flex: 1; }
  .wz-table-wrap--stack { border: 0; background: transparent; }
  .wz-table--stack thead { display: none; }
  .wz-table--stack tr { display: block; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 10px; padding: 6px 0; }
  .wz-table--stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 8px 14px; }
  .wz-table--stack td::before { content: attr(data-label); font-weight: 600; color: var(--sub); }
  .atlas-toasts { right: 16px; left: 16px; bottom: 16px; width: auto; }
}

/* ── 13 motion ─────────────────────────────────────────────────────────────── */
/* The motion layer (2026-10-14). Tokens live in section 1 and each component's transitions sit
   with the component; this section holds the shared keyframes, the page-level effects and the
   reduced-motion rules. The bar is Linear / Stripe: motion explains a change of state, it is
   never decoration, it is over in ~400ms, and nothing loops except a loading indicator.

   Who moves what:
   - CSS alone: hover / press / focus feedback, switches, checkboxes, chips, the tabs' sliding
     thumb (placed by components.js), menus and listboxes growing from their trigger, dialog and
     drawer entrances, the skeleton shimmer, the empty-state illustration.
   - components.js, with Web Animations started before first paint (so nothing flashes, and
     nothing is hidden unless script is there to reveal it): the page entrance — the first real
     content of a page rises in once, staggered over at most four steps — content fading in
     where a skeleton stood, rings / bars / progress filling to their value once, and stat
     numbers counting up from 0 when they come into view.
   - JS-timed exits (dialogs, drawers, menus, toasts): focus moves first, then the exit plays on
     an inert element. An exit never delays where focus lands. */

@keyframes wz-fade-in { from { opacity: 0; } }
@keyframes wz-fade-out { to { opacity: 0; } }
@keyframes wz-rise { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } }
@keyframes wz-pop-in { from { opacity: 0; transform: translateY(var(--wz-shift, calc(var(--nudge) * -1))) scale(var(--pop)); } }
@keyframes wz-pop-out { to { opacity: 0; transform: scale(var(--pop)); } }
@keyframes wz-check-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes wz-empty-in { from { opacity: 0; transform: scale(.84); } }
@keyframes wz-empty-icon { from { opacity: 0; transform: translateY(var(--nudge)) rotate(-12deg); } }
@keyframes wz-halo {
  from { opacity: .9; box-shadow: 0 0 0 0 var(--halo, var(--accent-ring)); }
  to { opacity: 0; box-shadow: 0 0 0 14px var(--halo, var(--accent-ring)); }
}
@keyframes wz-breathe { 50% { opacity: .35; } }
.wz-empty--bad .wz-empty__icon { --halo: var(--bad); }

/* For page modules adding content after the entrance that should arrive the same way. */
.wz-rise { animation: wz-rise var(--dur-3) var(--ease-out) both; }
.wz-fade { animation: wz-fade-in var(--dur-2) var(--ease-out) both; }

/* The static boot spinner waits a beat: most pages render before it would show, and a spinner
   flashing on every navigation reads as slowness. */
.wz-boot > .wz-spinner { animation: wz-spin .8s linear infinite, wz-fade-in var(--dur-2) var(--ease-out) .4s both; }

/* The top bar picks up a hairline once content scrolls under it (scroll-driven, no script;
   browsers without scroll timelines simply keep the flat bar). */
@supports (animation-timeline: scroll()) {
  .wz-topbar { animation: wz-topbar-edge linear both; animation-timeline: scroll(root block); animation-range: 0 48px; }
  @keyframes wz-topbar-edge { to { box-shadow: 0 1px 0 var(--line); } }
}

@media (prefers-reduced-motion: reduce) {
  /* Every distance and scale goes neutral, so what is left of any movement is a fade… */
  :root { --rise: 0px; --nudge: 0px; --lift: 0px; --press: 1; --press-icon: 1; --pop: 1; --reveal-rise: 0px; }
  /* …and anything not designed for this — page CSS included — finishes at once. */
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  /* Loading indicators are the one exception: they still say "working", without moving. */
  .wz-spinner, .atlas-spinner__ring { animation: wz-breathe 1.6s ease-in-out infinite !important; }
  .wz-sk::after { display: none; }
  /* The scroll-linked hairline is position, not motion: keep it whole. */
  .wz-topbar { animation-duration: auto !important; }
}

/* Motion v2 (2026-10-15), the script half's additions: SCROLL REVEALS. The blocks a page is
   built from (page-title bands, cards, prompts, shelves and their cards, job cards, list rows,
   stage tiles) rise --reveal-rise and fade in over --dur-reveal the first time they are scrolled
   to, blocks arriving together --stagger apart (components.js `pageMotion`, ui.js `whenSeen`).
   No class hides anything: a paused Web Animation holds the first frame, so without script, or
   if the observer fails, every block is simply there. Opacity and `translate` only, so nothing
   shifts the layout; focus moving into a waiting block, or printing, shows it at once. Also from
   script: chips spring when toggled, a toggle that turns on fills from the centre, a copy control
   confirms with a check, figures count up (stats, scores, a bar's value, the counts in a page
   title's line under it — never a link — and big tabular figures a page sets itself, each holding
   its final width while it counts) and any `--v` bar fills. */

/* ── 14 page transitions ───────────────────────────────────────────────────── */
/* Cross-document view transitions (2026-10-15). Going from one page to another, the sidebar, the
   top bar and the marketing pages' header (home.css) stay put while the content cross-fades and
   the new page rises a few pixels. Opt-in only under `prefers-reduced-motion: no-preference`; a
   browser without cross-document view transitions ignores all of it and simply loads the page.
   How the frame stays put. An app page draws its frame from script, a beat AFTER the browser
   takes the new page's picture, so the incoming frame is never part of the transition. The old
   sidebar and top bar therefore HOLD, opaque, over the incoming page until the transition ends,
   and the new frame is drawn beneath them; shell.js marks the page `.wz-vt-in` meanwhile, which
   keeps the new frame and title unnamed (a named element drawn mid-transition is not painted at
   all until it ends). The hold is only for an app page arriving (`:has(#app)`): going to a
   marketing or sign-in page, the frame simply fades with the rest.
   The page title is named too, so that a title present on both pictures would morph; shell.js
   takes its name off once it is scrolled away, and every name off while a dialog is open, so
   nothing sweeps in from outside the screen. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.wz-sidebar { view-transition-name: wz-sidebar; }
.wz-topbar { view-transition-name: wz-topbar; }
.wz-page > .wz-page-head:first-child .wz-title { view-transition-name: wz-title; }
html.wz-vt-in :is(.wz-sidebar, .wz-topbar, .wz-title) { view-transition-name: none; }
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: wz-vt-out var(--dur-2) var(--ease-in) both; }
::view-transition-new(root) { animation: wz-vt-in var(--dur-3) var(--ease-out) both; }
/* The title: each copy at its own size (no stretching between two lengths of text), the old one
   fading out as the new one rises in. */
::view-transition-old(wz-title), ::view-transition-new(wz-title) { width: auto; height: auto; }
::view-transition-old(wz-title) { animation: wz-vt-out var(--dur-2) var(--ease-in) both; }
::view-transition-new(wz-title) { animation: wz-vt-in var(--dur-3) var(--ease-out) both; }
/* Arriving at an app page, the old sidebar and top bar hold over it, opaque on the page's ground
   (as on the page), until the transition ends and that page's own frame, drawn beneath them, takes
   over. Phones: only the top bar (the sidebar is off canvas there, and an open one closes with the
   rest). Going anywhere else (a marketing or sign-in page), the frame fades with the rest. The
   condition sits on the old image itself: Chrome mispaints a `:has()` on the group. */
:root:has(#app)::view-transition-old(wz-topbar):only-child {
  background-color: var(--bg); animation: wz-vt-hold var(--dur-reveal) linear both;
}
@media (min-width: 1081px) {
  :root:has(#app)::view-transition-old(wz-sidebar):only-child {
    background-color: var(--bg); animation: wz-vt-hold var(--dur-reveal) linear both;
  }
}
@keyframes wz-vt-out { to { opacity: 0; } }
@keyframes wz-vt-in { from { opacity: 0; transform: translateY(calc(var(--rise) * .75)); } }
@keyframes wz-vt-hold { from, to { opacity: 1; } }

/* boot placeholder (static HTML, before the module runs) and fieldset reset */
.wz-boot { min-height: 100vh; display: grid; place-items: center; color: var(--accent); }
fieldset.wz-card { min-width: 0; }

/* collapsible filter panel: always open on desktop, a toggle on phones */
.wz-filters__toggle { display: none; }
@media (max-width: 760px) {
  .wz-filters__toggle { display: inline-flex; }
  .wz-filters:not(.is-open) .wz-filters__body { display: none; }
  .wz-filters .wz-filters__body .wz-row > div { width: 100% !important; flex: 1 1 100% !important; }
}

/* onboarding: the dream-companies checklist (pages/onboarding.js) */
.ob-dream__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-top: 0; border-radius: var(--r-sm); cursor: pointer; }
.ob-dream__row:hover { background: var(--tint); }
.ob-dream__row input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.ob-dream__row .wz-list__main { display: grid; gap: 2px; }
/* the step's buttons: on a phone, Back on its own line, then Skip … Continue across the width */
@media (max-width: 560px) {
  .ob-nav__go { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .ob-nav__go > .wz-btn:last-child { flex: 1 1 auto; max-width: 260px; margin-left: auto; }
  .ob-nav > span:first-child:empty { display: none; }
}

/* background tasks in the top bar (app/runs.js) */
.wz-activity__wrap { position: relative; }
.wz-activity { gap: 8px; }
.wz-activity__icon { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-ink, #2F6B44); }
.wz-activity.is-live .wz-activity__icon { background: var(--accent); animation: wzpulse 1.6s ease-in-out infinite; }
@keyframes wzpulse { 50% { opacity: .35; } }
.wz-activity__count { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.wz-activity__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(360px, 90vw);
  padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-pop); display: grid; gap: 10px;
  transform-origin: top right; animation: wz-pop-in var(--dur-2) var(--ease-out);
}
.wz-activity__title { font-size: var(--fs-2xs); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sub); }
.wz-activity__list { list-style: none; display: grid; gap: 8px; }
.wz-activity__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.wz-activity__state { display: grid; place-items: center; height: 20px; color: var(--sub); }
.wz-activity__item.is-done .wz-activity__state { color: var(--ok-ink, #2F6B44); }
.wz-activity__item.is-failed .wz-activity__state { color: var(--bad-ink, #B42318); }
.wz-activity__main { display: grid; min-width: 0; }
.wz-activity__label { font-size: var(--fs-md); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wz-activity.is-live .wz-activity__icon { animation: none; } }

/* ── nudges (app/nudges.js) ───────────────────────────────────────────────────────────────────
   The once-per-sign-in "Finish your profile" stepper and the action cards on Home. Tokens only. */
.wz-dialog--nudge .wz-dialog__panel { overflow: hidden; }
.wz-dialog--nudge .wz-dialog__panel::before {             /* a soft wash behind the title */
  content: ""; position: absolute; inset: 0 0 auto; height: 170px; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent),
                                       color-mix(in srgb, var(--band-mint-accent) 10%, transparent) 70%, transparent);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);   /* fades out, no edge */
}
.wz-dialog--nudge .wz-dialog__head, .wz-dialog--nudge .wz-dialog__body { position: relative; }
.wz-nq { display: grid; gap: 14px; padding-bottom: 14px; color: var(--ink); }
.wz-nq__progress { display: flex; align-items: center; gap: 12px; }
.wz-nq__bar { flex: 1; height: 8px; border-radius: var(--pill); background: var(--surface-2, var(--line)); overflow: hidden; }
.wz-nq__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--band-mint-accent));
  transition: width var(--dur-3) var(--ease-out); }
.wz-nq__count { font-size: var(--fs-xs); font-weight: 700; color: var(--sub); white-space: nowrap; }
.wz-nq__head { display: flex; gap: 14px; align-items: flex-start; animation: wz-nq-in var(--dur-3) var(--ease-out) both; }
.wz-nq__ic { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.wz-nq__kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-deep); letter-spacing: .02em; }
.wz-nq__q { font-size: var(--fs-lg, 19px); font-weight: 750; line-height: 1.25; color: var(--ink-heading, var(--ink)); margin: 2px 0 4px; }
.wz-nq__why { color: var(--sub); font-size: var(--fs-sm); }
.wz-nq__control { animation: wz-nq-in var(--dur-3) var(--ease-out) 40ms both; }
.wz-nq__pay { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; }
.wz-nq__error { min-height: 1.2em; color: var(--bad-ink, #B42318); font-size: var(--fs-sm); font-weight: 600; }
.wz-nq__error:empty { min-height: 0; }
.wz-nq__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.wz-nq__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.wz-nq__done { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 12px 0 4px; }
.wz-nq__done-ic { color: var(--ok-ink, #2F6B44); animation: wz-nq-pop 420ms var(--ease-out) both; }
@keyframes wz-nq-in { from { opacity: 0; translate: 0 6px; } }
@keyframes wz-nq-pop { from { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } }
@media (max-width: 520px) {
  .wz-nq__pay { grid-template-columns: 1fr 1fr; } .wz-nq__pay select { grid-column: 1 / -1; }
  /* a phone: the actions on one row, "Not now" under them across the width */
  .wz-nq__foot { flex-direction: column-reverse; align-items: stretch; }
  .wz-nq__actions { margin-left: 0; justify-content: flex-end; }
}

.wz-nudges { margin: 0 0 var(--space-6, 24px); }
.wz-nudges__list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); list-style: none; margin: 0; padding: 0; }
.wz-nudge {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 16px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  animation: wz-nq-in var(--dur-3) var(--ease-out) both;
}
.wz-nudge--action { border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%); }
.wz-nudge__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-deep); }
.wz-nudge--tip .wz-nudge__ic { background: color-mix(in srgb, var(--band-mint-accent) 16%, var(--surface)); color: var(--band-mint-accent); }
.wz-nudge__text { min-width: 0; padding-right: 26px; }
.wz-nudge__title { font-size: var(--fs-md); font-weight: 750; line-height: 1.3; color: var(--ink-heading, var(--ink)); }
.wz-nudge__body { margin-top: 3px; color: var(--sub); font-size: var(--fs-sm); line-height: 1.45; }
.wz-nudge__actions { grid-column: 2; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wz-nudge__actions .wz-iconbtn { position: absolute; top: 8px; right: 8px; }
.wz-nudge--compact { box-shadow: none; }
.wz-dialog--nudge .wz-nudges__list { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .wz-nq__head, .wz-nq__control, .wz-nq__done-ic, .wz-nudge { animation: none; }
  .wz-nq__fill { transition: none; }
}

/* ── What we've learned (app/learned-ui.js) ───────────────────────────────── */
/* A mint band (`.wz-card--mint` remaps the tokens) holding white rows: the leaning as a tinted
   pill (mint for "you lean towards", amber for "you tend to skip"), its one-line reason under it,
   Keep and Remove beside it. The conflict prompt sits on top on its own white surface. Settings
   shows the full panel; /jobs a compact card with the strongest few. Tokens only. */
.wz-learned { display: grid; gap: var(--space-4); padding: var(--space-5); }
.wz-learned__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.wz-learned__head > div { flex: 1; min-width: 0; }
.wz-learned__icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm);
}
.wz-learned__title { margin: 0; font-size: var(--fs-lead); font-weight: 800; line-height: 1.3; color: var(--ink-heading, var(--ink)); }
.wz-learned__sub { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--sub); }
.wz-learned__manage { flex-shrink: 0; align-self: center; font-size: var(--fs-sm); font-weight: 700; }
.wz-learned__body { display: grid; gap: var(--space-4); }
.wz-learned__groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.wz-learned__group { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.wz-learned__group-title { margin: 0; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .01em; color: var(--ink-heading, var(--ink)); }
.wz-learned__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.wz-learned__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm);
}
.wz-learned__main { display: grid; gap: 4px; min-width: 0; }
.wz-learned__chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wz-learned__chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 12px;
  border-radius: var(--pill); font-size: var(--fs-sm); font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere;
}
.wz-learned__item--like .wz-learned__chip { background: var(--ok); color: var(--ok-ink); }
.wz-learned__item--skip .wz-learned__chip { background: var(--warn); color: var(--warn-ink); }
.wz-learned__reason { margin: 0; font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; color: var(--ink); }
.wz-learned__hold { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--sub); }
.wz-learned__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.wz-learned__empty { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--sub); }
.wz-learned__prompt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface);
  box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent);
}
.wz-learned__prompt-icon { display: inline-grid; place-items: center; color: var(--accent-deep); }
.wz-learned__prompt-text { flex: 1 1 260px; margin: 0; font-size: var(--fs-base); font-weight: 650; line-height: 1.45; color: var(--ink); }
.wz-learned__prompt-actions { display: flex; gap: 6px; }
.wz-learned--compact { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
.wz-learned--compact .wz-learned__icon { width: 32px; height: 32px; }
.wz-learned--compact .wz-learned__prompt { padding: var(--space-2) var(--space-3); }
.wz-learned__pillrows { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.wz-learned__pillrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); min-width: 0; }
.wz-learned__pillrow-title { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-heading, var(--ink)); }
.wz-learned__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wz-learned__pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 10px; border-radius: var(--pill);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.35;
}
.wz-learned__pill--like { background: var(--ok); color: var(--ok-ink); }
.wz-learned__pill--skip { background: var(--warn); color: var(--warn-ink); }
.wz-learned__pill .wz-iconbtn { width: 24px; height: 24px; min-width: 24px; color: inherit; background: transparent; }
@media (max-width: 560px) {
  .wz-learned { padding: var(--space-4); }
  .wz-learned__item { grid-template-columns: minmax(0, 1fr); }
  .wz-learned__actions { justify-content: flex-start; }
}