/* ==========================================================================
   CANDIDATE JOURNEY
   Screens s2, g1-g5, s5, s6. Loaded only by resources/views/layouts/journey.blade.php.

   Every selector is namespaced `jzj-`, with one deliberate exception: the box-sizing reset
   below, which is scoped INSIDE .jzj-body so it cannot reach any shared component. Per the
   File Ownership Law this file targets no shared component class, and no other stylesheet
   may target `jzj-`. The build annex records why: a `.sc` dashboard modifier once collided
   with a homepage `.sc` card carrying padding:22px and inflated a 7px dot to 51px.

   Roboto only (CLAUDE.md design override). Brand magenta leads, crimson is an accent.
   The wizard gradient #5B8FFF is feature-specific to Smart Apply and must not appear.
   Mobile first: 375px is the design width, 768px and desktop are progressive widenings.
   ========================================================================== */

.jzj-body {
    --jzj-brand:      #AB2379;
    --jzj-brand-mid:  #B51151;
    --jzj-accent:     #D0003A;
    --jzj-navy:       #1A1A2E;

    --jzj-ink:        #1A1A2E;
    --jzj-ink-2:      #4F4F63;  /* >= 7:1 on white  */
    --jzj-ink-3:      #5F5F70;  /* >= 5:1 on white  */

    --jzj-line:       #E4E4EC;
    --jzj-surface:    #FFFFFF;
    --jzj-canvas:     #FAFAFC;
    --jzj-tint:       rgba(171, 35, 121, 0.06);

    margin: 0;
    padding: 0;
    background: var(--jzj-canvas);
    color: var(--jzj-ink);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.jzj-body, .jzj-body *, .jzj-body *::before, .jzj-body *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Header — back affordance and wordmark only. No navigation, by design (L9).
   -------------------------------------------------------------------------- */

.jzj-hdr {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 12px;
    background: var(--jzj-surface);
    border-bottom: 1px solid var(--jzj-line);
}

.jzj-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                 /* WCAG 2.2 AA target size */
    height: 44px;
    flex: 0 0 auto;
    border-radius: 10px;
    color: var(--jzj-ink);
    text-decoration: none;
}

.jzj-back svg { width: 24px; height: 24px; }
.jzj-back:hover { background: var(--jzj-tint); }

.jzj-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
    text-decoration: none;
    color: var(--jzj-ink);
}

.jzj-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--jzj-brand), var(--jzj-accent));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.jzj-brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   Screen body
   -------------------------------------------------------------------------- */

/* THE JOURNEY SHELL'S FULL-HEIGHT CHAIN.
   ⚠️ NOT `min-height: 100dvh` on the inner layout: `.jzj-main` is a SIBLING of the always-
   rendered `.jzj-hdr` (56px) and, on mobile, of the in-flow sticky `.jzj-tab` (another 56px),
   so a viewport-tall main makes the DOCUMENT 100dvh + 56px and every dashboard scrolls a
   little for no reason. Same shape as the master shell instead: the shell is one viewport
   tall, and the region between header and tab bar absorbs whatever is left. */
.jzj-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.jzj-main { display: flex; flex-direction: column; flex: 1 0 auto; }

.jzj-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.jzj-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--jzj-ink);
}

.jzj-sub {
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--jzj-ink-2);
}

/* --------------------------------------------------------------------------
   The three ways in
   -------------------------------------------------------------------------- */

.jzj-form { display: block; }

/* A fieldset is the correct grouping for a radio set, but its default border/padding/margin
   would show. Reset here rather than fighting it at the .jzj-opts level. */
.jzj-opts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Visible to screen readers, not on screen — the heading already carries the question. */
.jzj-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ⚠️ NOTHING IS PRE-SELECTED. There is deliberately no "recommended" variant here: a
   highlighted first option reads as already chosen, and then picking a different one felt to
   the founder like correcting a mistake rather than making a choice. Every option starts
   equal; the only emphasis is the one the visitor creates. */
.jzj-opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 44px;
    padding: 16px 44px 16px 16px;   /* right padding reserves the tick's column */
    border: 1px solid var(--jzj-line);
    border-radius: 14px;
    background: var(--jzj-surface);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.jzj-opt:hover { border-color: var(--jzj-brand); }

/* The radio itself is the accessibility anchor — keyboard, screen readers and form
   submission all rely on it — so it is hidden visually and never with display:none. */
.jzj-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* Selection state is CSS-only, so it works with scripting blocked. */
.jzj-opt:has(.jzj-radio:checked) {
    border-color: var(--jzj-brand);
    background: var(--jzj-tint);
    box-shadow: 0 2px 10px rgba(171, 35, 121, 0.10);
}

/* :has() is widely supported but not universally. Without it the tick and the border still
   work via the sibling rules below, which need no parent selector. */
.jzj-tick {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--jzj-line);
    border-radius: 50%;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.jzj-radio:checked ~ .jzj-tick {
    border-color: var(--jzj-brand);
    background: var(--jzj-brand);
    box-shadow: inset 0 0 0 3px var(--jzj-surface);
}

.jzj-radio:focus-visible ~ .jzj-tick { outline: 3px solid var(--jzj-brand); outline-offset: 2px; }

/* The explicit step the founder asked for: choosing no longer navigates. */
.jzj-continue {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    padding: 15px 24px;
    border: 2px solid var(--jzj-ink);
    border-radius: 100px;
    background: var(--jzj-ink);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.jzj-continue:hover:not(:disabled) { background: #FFFFFF; color: var(--jzj-ink); }

.jzj-continue:disabled {
    background: var(--jzj-line);
    border-color: var(--jzj-line);
    color: var(--jzj-ink-3);
    cursor: not-allowed;
}

/* Shown only when a submit arrives with nothing selected — the no-JavaScript path. */
.jzj-note {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--jzj-tint);
    color: var(--jzj-ink);
    font-size: 14px;
}

.jzj-opt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: var(--jzj-tint);
    color: var(--jzj-brand);
}

.jzj-opt-icon svg { width: 20px; height: 20px; }

.jzj-opt-icon--world { background: rgba(181, 17, 81, 0.07); color: var(--jzj-brand-mid); }
.jzj-opt-icon--fresh { background: rgba(208, 0, 58, 0.07);  color: var(--jzj-accent); }

.jzj-opt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.jzj-opt-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--jzj-ink);
}

.jzj-opt-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--jzj-ink-2);
}

.jzj-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--jzj-ink-3);
}

.jzj-foot a {
    color: var(--jzj-brand);
    text-decoration: underline;
}

/* ==========================================================================
   GUIDED FLOW g1-g5 + AUTH s4 + VALUE REVEAL s5
   Values TRANSCRIBED from candidate-journey-prototype-v1.html (styles at lines
   93-117 chips/progress/inputs, 223-237 auth card, 239-275 value reveal). Names are
   jzj- prefixed per the File Ownership Law; values are the prototype's own.
   Prototype tokens carried over: --sf #F0EEF6, --sf2 #E6E3F0, --bd #E2DFED,
   --bd2 #D0CDE0, --t2 #625880, --t3 #938CA8, green #1AA55A, amber #D4940E,
   brand gradient 135deg #AB2379 -> #B51151 -> #D0003A.
   ========================================================================== */

.jzj-body {
    --jzj-grad: linear-gradient(135deg, #AB2379 0%, #B51151 50%, #D0003A 100%);
    --jzj-sf:  #F0EEF6;
    --jzj-sf2: #E6E3F0;
    --jzj-bd:  #E2DFED;
    --jzj-bd2: #D0CDE0;
    --jzj-t2:  #625880;
    --jzj-t3:  #938CA8;
    --jzj-gr:  #1AA55A;
    --jzj-grb: rgba(26, 165, 90, 0.07);
    --jzj-am:  #D4940E;
    --jzj-amb: rgba(212, 148, 14, 0.07);
}

/* Header title for wizard screens — prototype .ht */
.jzj-ht { font-size: 15px; font-weight: 700; color: var(--jzj-navy); }

/* Progress bar — prototype .pbar/.pd */
.jzj-pbar {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    background: var(--jzj-surface);
    border-bottom: 1px solid var(--jzj-bd);
}
.jzj-pd { flex: 1; height: 4px; border-radius: 2px; background: var(--jzj-sf2); transition: background 0.4s; }
.jzj-pd--dn { background: var(--jzj-grad); }
.jzj-pd--ac { background: var(--jzj-brand-mid); opacity: 0.5; }

/* Question typography — prototype .q-h/.q-s/.q-sub */
.jzj-q-h  { font-size: 22px; font-weight: 700; color: var(--jzj-navy); line-height: 1.25; margin-bottom: 8px; }
.jzj-q-s  { font-size: 13px; color: var(--jzj-t3); line-height: 1.5; margin-bottom: 20px; }
.jzj-q-sub { font-size: 16px; font-weight: 700; color: var(--jzj-navy); margin: 26px 0 8px; }

/* Chips — prototype .chip-g/.chip */
.jzj-chip-g { display: flex; flex-wrap: wrap; gap: 8px; }
.jzj-chip {
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--jzj-t2);
    background: var(--jzj-surface);
    border: 1.5px solid var(--jzj-bd);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    font-family: inherit;
}
.jzj-chip:hover { border-color: var(--jzj-bd2); }
.jzj-chip:active { transform: scale(0.97); }
.jzj-chip--sel {
    border-color: var(--jzj-brand-mid);
    color: var(--jzj-brand-mid);
    background: rgba(181, 17, 81, 0.05);
    font-weight: 700;
}
.jzj-chip:focus-visible { outline: 3px solid var(--jzj-brand); outline-offset: 2px; }

/* "Other" reveal — prototype .other-wrap */
.jzj-other { margin-top: 12px; display: none; }
.jzj-other--show { display: block; }

/* Inputs — prototype .inp/.inp-lbl/.inp-row/.inp-2 */
.jzj-inp {
    width: 100%;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1.5px solid var(--jzj-bd);
    font-size: 14px;
    font-family: inherit;
    color: var(--jzj-ink);
    outline: 0;
    min-height: 48px;
    background: var(--jzj-surface);
    transition: border-color 0.2s;
}
.jzj-inp:focus { border-color: var(--jzj-brand-mid); }
.jzj-inp::placeholder { color: var(--jzj-t3); }
.jzj-inp-lbl { font-size: 12px; font-weight: 700; color: var(--jzj-navy); margin-bottom: 6px; display: block; }
.jzj-inp-row { margin-bottom: 14px; }
.jzj-inp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Autosave indicator — prototype .asv. Shown only after a REAL write. */
.jzj-asv {
    font-size: 11px;
    color: var(--jzj-t3);
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}
.jzj-asv--on { display: flex; }
.jzj-asv::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--jzj-gr);
    animation: jzj-glow-pulse 2.5s ease-in-out infinite;   /* prototype glowPulse, line 69 */
}

@keyframes jzj-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Sticky continue bar — prototype .qc */
.jzj-qc {
    position: sticky;
    bottom: 0;
    padding: 16px 20px 24px;
    background: linear-gradient(0deg, var(--jzj-canvas) 80%, transparent);
}

/* Wizard screens — hidden until active (prototype .scr/.on, without the slide) */
.jzj-step { display: none; }
.jzj-step--on { display: block; }

/* Secondary button — prototype .bs */
.jzj-btn-s {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 24px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--jzj-bd2);
    font-family: inherit;
    min-height: 48px;
    background: var(--jzj-surface);
    color: var(--jzj-navy);
    transition: border-color 0.2s;
}
.jzj-btn-s:hover { border-color: var(--jzj-t3); }

/* --------------------------------------------------------------------------
   s4 AUTH — prototype .au-card family
   -------------------------------------------------------------------------- */

.jzj-au-wrap { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
.jzj-au-card {
    background: var(--jzj-surface);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    border: 1px solid var(--jzj-bd);
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}
.jzj-au-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(171, 35, 121, 0.06);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.jzj-au-t { font-size: 20px; font-weight: 700; color: var(--jzj-navy); margin-bottom: 6px; }
.jzj-au-s { font-size: 14px; color: var(--jzj-t2); line-height: 1.6; margin-bottom: 24px; }
.jzj-au-g {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--jzj-navy);
    background: var(--jzj-surface);
    border: 1.5px solid var(--jzj-bd2);
    cursor: pointer;
    min-height: 52px;
    margin-bottom: 10px;
    font-family: inherit;
    text-decoration: none;
    transition: border-color 0.2s;
}
.jzj-au-g:hover { border-color: var(--jzj-t3); }
.jzj-au-div { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 11px; color: var(--jzj-t3); }
.jzj-au-div::before, .jzj-au-div::after { content: ""; flex: 1; height: 1px; background: var(--jzj-bd); }
.jzj-au-legal { font-size: 11px; color: var(--jzj-t3); margin-top: 16px; line-height: 1.5; }

/* The consent ticks (founder ruling 2026-08-07: the tick lives on the signup surface,
   below the signup options). Left-aligned inside the centred card so the wording reads
   as a statement being agreed to, not decoration. accent-color paints the tick in brand. */
.jzj-au-consent { margin-top: 18px; text-align: left; }
.jzj-au-tick { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.jzj-au-tick input[type="checkbox"] {
    width: 18px; height: 18px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: var(--jzj-brand);
    cursor: pointer;
}
.jzj-au-tick label { font-size: 13px; line-height: 1.5; color: var(--jzj-ink); margin: 0; cursor: pointer; font-weight: 500; }
.jzj-au-links { font-size: 12px; color: var(--jzj-t3); margin: 0 0 12px 28px; line-height: 1.5; }
.jzj-au-links a { color: var(--jzj-brand); text-decoration: underline; }
.jzj-au-err { font-size: 12px; color: var(--jzj-accent); margin: 0 0 12px 28px; line-height: 1.5; font-weight: 500; }
.jzj-au-err[hidden] { display: none; }

/* --------------------------------------------------------------------------
   s5 VALUE REVEAL — prototype .rvc/.ri/.eblock families
   -------------------------------------------------------------------------- */

.jzj-rvc { background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.jzj-rvc-h { background: var(--jzj-grad); padding: 18px 20px; color: #fff; }
.jzj-rvc-ht { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.jzj-rvc-hs { font-size: 11px; opacity: 0.78; }
.jzj-rvc-prog { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.jzj-rvc-pbar { flex: 1; height: 5px; background: rgba(255,255,255,0.22); border-radius: 3px; overflow: hidden; }
.jzj-rvc-pfill { height: 100%; background: #fff; border-radius: 3px; transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.jzj-rvc-ptx { font-size: 10px; font-weight: 700; opacity: 0.9; white-space: nowrap; }
.jzj-rvc-b { padding: 6px 0; }

.jzj-ri { border-bottom: 1px solid var(--jzj-sf); }
.jzj-ri:last-child { border: 0; }
.jzj-ri-head { display: flex; align-items: center; gap: 11px; padding: 13px 18px; cursor: pointer; transition: background 0.15s; }
.jzj-ri-head:hover { background: var(--jzj-sf); }
.jzj-ri-d { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.jzj-ri-d--f, .jzj-ri-d--done { background: var(--jzj-gr); }
.jzj-ri-d--g { background: var(--jzj-am); }
.jzj-ri-tx { flex: 1; min-width: 0; }
.jzj-ri-n { font-size: 13px; font-weight: 500; color: var(--jzj-ink); }
.jzj-ri-sub { font-size: 11px; color: var(--jzj-t3); margin-top: 2px; }
.jzj-ri-tg { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 8px; flex-shrink: 0; }
.jzj-ri-tg--f, .jzj-ri-tg--done { background: var(--jzj-grb); color: var(--jzj-gr); }
.jzj-ri-tg--g { background: var(--jzj-amb); color: var(--jzj-am); }
.jzj-ri-tg--o { background: var(--jzj-sf); color: var(--jzj-t3); }
.jzj-ri-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--jzj-t3); transition: transform 0.25s; }
.jzj-ri--open .jzj-ri-chev { transform: rotate(90deg); }
.jzj-ri-panel { display: none; padding: 4px 18px 18px; background: var(--jzj-sf); border-top: 1px solid var(--jzj-bd); }
.jzj-ri--open .jzj-ri-panel { display: block; }
.jzj-ri-note {
    font-size: 11px;
    color: var(--jzj-t2);
    line-height: 1.5;
    margin: 12px 0 14px;
    padding: 10px 12px;
    background: var(--jzj-surface);
    border-radius: 6px;
    border-left: 2px solid var(--jzj-brand-mid);
}
.jzj-eblock { background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 10px; padding: 14px; margin-bottom: 10px; position: relative; }
.jzj-eblock-n { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--jzj-brand-mid); margin-bottom: 11px; }
.jzj-eblock-rm { position: absolute; top: 11px; right: 12px; font-size: 11px; color: var(--jzj-t3); cursor: pointer; background: none; border: 0; font-family: inherit; }
.jzj-eblock-rm:hover { color: var(--jzj-brand-mid); }
.jzj-add-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1.5px dashed var(--jzj-bd2);
    background: 0;
    color: var(--jzj-brand-mid);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
    transition: border-color 0.2s, background 0.2s;
}
.jzj-add-more:hover { border-color: var(--jzj-brand-mid); background: rgba(171, 35, 121, 0.03); }
.jzj-ri-save { margin-top: 12px; display: flex; gap: 8px; }
.jzj-ri-save .jzj-continue, .jzj-ri-save .jzj-btn-s { min-height: 44px; font-size: 13px; padding: 12px 18px; margin-top: 0; }

/* Guided-arrival banner — prototype #s5g */
.jzj-s5g {
    background: rgba(171, 35, 121, 0.04);
    border: 1px solid rgba(171, 35, 121, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.jzj-s5g-t { font-size: 13px; font-weight: 700; color: var(--jzj-navy); margin-bottom: 4px; }
.jzj-s5g-s { font-size: 12px; color: var(--jzj-t2); line-height: 1.5; }

/* Consent block — transcribed from Start Fresh's approved consent section */
.jzj-consent { background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.jzj-consent-title { font-size: 13px; font-weight: 700; color: var(--jzj-navy); margin-bottom: 10px; }
.jzj-consent-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.jzj-consent-item input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #B51151; }
.jzj-consent-item label { font-size: 12px; color: var(--jzj-t2); line-height: 1.5; cursor: pointer; }
.jzj-consent-item label strong { color: var(--jzj-ink); }

@media (prefers-reduced-motion: reduce) {
    .jzj-chip, .jzj-pd, .jzj-ri-chev, .jzj-rvc-pfill { transition: none; }
    .jzj-chip:active { transform: none; }
    .jzj-asv::before { animation: none; }
}

/* ==========================================================================
   s8 DASHBOARD — prototype .d-* family (lines 277-413), .tab (409-413) and the
   s11 option cards .ao-opt (405-408). Transcribed values, jzj-d-* names.
   body.desk/body.phone become media queries at 900px.
   ========================================================================== */

.jzj-d-hdr-tag { font-size: 9px; color: var(--jzj-t3); margin-left: 6px; margin-right: auto; }
.jzj-d-av {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--jzj-grad);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
    margin-bottom: 9px; position: relative; flex-shrink: 0;
}
.jzj-d-av::after {
    content: ""; position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--jzj-gr); border: 2px solid var(--jzj-surface);
}
.jzj-d-av--sm { width: 28px; height: 28px; font-size: 10px; margin-bottom: 0; }
.jzj-d-av--sm::after { display: none; }

/* ⚠️ `min-height: 100%` resolved to NOTHING here: a percentage height needs an ancestor with a
   resolved height, and neither html nor body set one — so on a short page the sidebar stopped
   at its last nav item. It grows into the space `.jzj-main` claims now, rather than declaring a
   viewport height of its own, which would double-count the header (see `.jzj-main` above). */
.jzj-d-layout { display: flex; flex: 1 0 auto; }
.jzj-d-side {
    width: 210px; background: var(--jzj-surface); border-right: 1px solid var(--jzj-bd);
    padding: 20px 0; flex-shrink: 0; overflow-y: auto; display: none;
}
.jzj-d-prof { padding: 0 16px 16px; border-bottom: 1px solid var(--jzj-bd); margin-bottom: 14px; }
.jzj-d-name { font-size: 13px; font-weight: 700; color: var(--jzj-navy); }
.jzj-d-role { font-size: 11px; color: var(--jzj-t3); margin-top: 2px; }
.jzj-d-score {
    display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 7px 10px;
    background: rgba(171, 35, 121, 0.05); border-radius: 6px;
    font-size: 10px; font-weight: 500; color: var(--jzj-brand-mid);
}
.jzj-d-score-bar { flex: 1; height: 4px; background: var(--jzj-sf2); border-radius: 2px; overflow: hidden; }
.jzj-d-score-fill { height: 100%; background: var(--jzj-grad); border-radius: 2px; }
.jzj-d-grp { padding: 0 10px; margin-bottom: 6px; }
.jzj-d-grp-l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jzj-t3); padding: 7px 9px 5px; }
.jzj-d-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px;
    font-size: 12px; color: var(--jzj-t2); font-weight: 500; cursor: pointer;
    text-decoration: none; transition: all 0.15s;
}
.jzj-d-item:hover { background: var(--jzj-sf); color: var(--jzj-ink); }
.jzj-d-item--on { background: rgba(171, 35, 121, 0.05); color: var(--jzj-brand-mid); font-weight: 700; }
.jzj-d-badge { margin-left: auto; font-size: 9px; font-weight: 700; background: var(--jzj-brand-mid); color: #fff; padding: 2px 6px; border-radius: 9px; }

.jzj-d-main { flex: 1; padding: 20px; overflow-y: auto; min-width: 0; }

.jzj-d-hero {
    background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 14px;
    padding: 22px 22px 18px; margin-bottom: 14px; position: relative; overflow: hidden;
}
.jzj-d-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--jzj-grad); }
.jzj-d-greet { font-size: 12px; color: var(--jzj-t3); margin-bottom: 4px; }
.jzj-d-title { font-size: 19px; font-weight: 700; color: var(--jzj-navy); letter-spacing: -0.03em; margin-bottom: 6px; line-height: 1.25; }
.jzj-d-sub { font-size: 13px; color: var(--jzj-t2); line-height: 1.55; margin-bottom: 16px; }
/* The single next action, inside the sub-line. Underlined text rather than a button: the
   prototype's own second sentence is prose, and this screen's CTA family is already spoken for
   (the card actions are the S87 underlined-link treatment). */
.jzj-d-sub-a { color: var(--jzj-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.jzj-d-sub-a:hover { color: #AB2379; }

.jzj-d-prog { display: flex; align-items: center; margin-bottom: 16px; flex-wrap: wrap; row-gap: 8px; }
.jzj-dp-s { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 500; white-space: nowrap; }
.jzj-dp-s--dn { color: var(--jzj-gr); }
.jzj-dp-s--ac { color: var(--jzj-brand-mid); font-weight: 700; }
.jzj-dp-s--fu { color: var(--jzj-t3); }
.jzj-dp-dot {
    width: 19px; height: 19px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; flex-shrink: 0; border: 2px solid;
}
.jzj-dp-s--dn .jzj-dp-dot { background: var(--jzj-gr); border-color: var(--jzj-gr); color: #fff; }
.jzj-dp-s--ac .jzj-dp-dot { background: var(--jzj-surface); border-color: var(--jzj-brand-mid); color: var(--jzj-brand-mid); }
.jzj-dp-s--fu .jzj-dp-dot { background: var(--jzj-sf); border-color: var(--jzj-bd2); color: var(--jzj-t3); }
.jzj-dp-ln { width: 11px; height: 2px; margin: 0 2px; border-radius: 1px; flex-shrink: 0; }
.jzj-dp-ln--dn { background: var(--jzj-gr); }
.jzj-dp-ln--pn { background: var(--jzj-bd); }

.jzj-d-ctas { display: flex; gap: 9px; flex-wrap: wrap; }
.jzj-d-cta { width: auto; min-height: 44px; font-size: 13px; padding: 12px 20px; margin-top: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.jzj-d-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
.jzj-d-st { background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 14px; padding: 14px 15px; position: relative; overflow: hidden; }
.jzj-d-st::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
.jzj-d-st--a::after { background: var(--jzj-brand-mid); }
.jzj-d-st--b::after { background: var(--jzj-gr); }
.jzj-d-st--c::after { background: #3B6FD4; }
.jzj-d-st--d::after { background: var(--jzj-am); }
.jzj-d-st-l { font-size: 9px; color: var(--jzj-t3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 5px; }
.jzj-d-st-r { display: flex; align-items: baseline; gap: 4px; }
.jzj-d-st-v { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.jzj-d-st--a .jzj-d-st-v { color: var(--jzj-brand-mid); }
.jzj-d-st--b .jzj-d-st-v { color: var(--jzj-gr); }
.jzj-d-st--c .jzj-d-st-v { color: #3B6FD4; }
.jzj-d-st--d .jzj-d-st-v { color: var(--jzj-am); }
.jzj-d-st-u { font-size: 10px; color: var(--jzj-t3); }
.jzj-d-st-b { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 7px; margin-left: auto; }
.jzj-d-st-b--g { background: var(--jzj-grb); color: var(--jzj-gr); }
.jzj-d-st-b--a { background: var(--jzj-amb); color: var(--jzj-am); }
.jzj-d-live::before {
    content: ""; position: absolute; top: 9px; right: 9px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--jzj-gr);
    animation: jzj-glow-pulse 2.5s ease-in-out infinite;
}

.jzj-d-2col { display: grid; grid-template-columns: 1fr; gap: 12px; }
.jzj-d-card { background: var(--jzj-surface); border: 1px solid var(--jzj-bd); border-radius: 14px; padding: 17px 19px; margin-bottom: 12px; }
.jzj-d-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jzj-d-ct { font-size: 13px; font-weight: 700; color: var(--jzj-navy); }
.jzj-d-cl { font-size: 11px; font-weight: 500; color: var(--jzj-brand-mid); cursor: pointer; text-decoration: none; }
.jzj-d-active { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--jzj-gr); font-weight: 500; }
.jzj-d-ld { width: 6px; height: 6px; border-radius: 50%; background: var(--jzj-gr); flex-shrink: 0; animation: jzj-glow-pulse 2.5s ease-in-out infinite; }

.jzj-d-as { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--jzj-sf); text-decoration: none; color: inherit; }
.jzj-d-as:last-of-type { border: 0; }
.jzj-d-as-i { width: 33px; height: 33px; border-radius: 6px; flex-shrink: 0; }
.jzj-a-r { background: rgba(171, 35, 121, 0.06); }
.jzj-a-c { background: rgba(59, 111, 212, 0.06); }
.jzj-a-w { background: var(--jzj-grb); }
.jzj-a-i { background: var(--jzj-amb); }
.jzj-d-as-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jzj-d-as-n { font-size: 12px; font-weight: 500; color: var(--jzj-ink); }
.jzj-d-as-m { font-size: 10px; color: var(--jzj-t3); margin-top: 2px; }
.jzj-d-as-b { font-size: 8px; font-weight: 700; padding: 3px 7px; border-radius: 7px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.jzj-b-live { background: var(--jzj-grb); color: var(--jzj-gr); }
.jzj-b-new { background: rgba(171, 35, 121, 0.05); color: var(--jzj-brand-mid); }
.jzj-b-rdy { background: rgba(59, 111, 212, 0.06); color: #3B6FD4; }
.jzj-d-ws { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; color: var(--jzj-gr); margin-top: 3px; }

.jzj-d-nudge {
    background: rgba(171, 35, 121, 0.05); border: 1px solid rgba(171, 35, 121, 0.1);
    border-radius: 10px; padding: 12px 14px; margin-top: 11px;
    display: flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none;
}
.jzj-d-nudge-i { width: 26px; height: 26px; border-radius: 7px; background: var(--jzj-grad); flex-shrink: 0; }
.jzj-d-nudge-t { font-size: 11px; font-weight: 500; color: var(--jzj-brand-mid); flex: 1; }
.jzj-d-nudge-a { color: var(--jzj-brand-mid); font-weight: 700; font-size: 11px; }

.jzj-d-jh { margin-bottom: 4px; }
.jzj-d-jh-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.jzj-d-jt { font-size: 13px; font-weight: 700; color: var(--jzj-navy); }
.jzj-d-jsub { font-size: 10px; color: var(--jzj-t3); margin-top: 3px; line-height: 1.4; display: flex; align-items: center; gap: 5px; }
.jzj-d-job { display: block; padding: 11px 0; border-bottom: 1px solid var(--jzj-sf); cursor: pointer; text-decoration: none; color: inherit; }
.jzj-d-job:last-of-type { border: 0; }
.jzj-d-job-t { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.jzj-d-job-l { width: 32px; height: 32px; border-radius: 6px; background: var(--jzj-sf); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--jzj-t3); flex-shrink: 0; }
.jzj-d-job-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jzj-d-job-n { font-size: 12px; font-weight: 500; color: var(--jzj-ink); }
.jzj-d-job-c { font-size: 10px; color: var(--jzj-t3); margin-top: 1px; }
.jzj-d-job-m { font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 7px; flex-shrink: 0; }
.jzj-d-job-m--s { background: var(--jzj-grb); color: var(--jzj-gr); }
.jzj-d-job-m--g { background: var(--jzj-amb); color: var(--jzj-am); }
/* The dashboard used to carry only two bands, so a 28% match rendered as "Good". It now reads
   the four-band vocabulary from config/jobmatch.php, exactly like the search cards — these two
   are the missing lower bands. Never-hide-a-low-score stands (DECISIONS 2026-07-28): a weak
   match is SHOWN, and shown as weak. */
.jzj-d-job-m--f { background: var(--jzj-amb); color: var(--jzj-am); }
.jzj-d-job-m--w { background: #fee2e2; color: #b91c1c; }
.jzj-d-job-r { display: block; font-size: 10px; color: var(--jzj-t2); line-height: 1.4; padding-left: 41px; margin-bottom: 4px; }
.jzj-d-job-mt { display: flex; align-items: center; gap: 10px; padding-left: 41px; font-size: 9px; color: var(--jzj-t3); flex-wrap: wrap; }
.jzj-fdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.jzj-fdot--g { background: var(--jzj-gr); }
.jzj-fdot--a { background: var(--jzj-am); }
.jzj-d-showing { text-align: center; padding-top: 10px; font-size: 10px; font-weight: 500; color: var(--jzj-t3); }
.jzj-d-empty { font-size: 12px; color: var(--jzj-t3); padding: 8px 0; margin: 0; }

.jzj-d-app { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--jzj-sf); }
.jzj-d-app:last-of-type { border: 0; }
.jzj-d-app-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jzj-t3); flex-shrink: 0; }
.jzj-d-app-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jzj-d-app-n { font-size: 11px; font-weight: 500; color: var(--jzj-ink); }
.jzj-d-app-d { font-size: 10px; color: var(--jzj-t3); margin-top: 1px; }
.jzj-d-app-s { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--jzj-t3); flex-shrink: 0; }

.jzj-d-ai { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--jzj-sf); }
.jzj-d-ai:last-of-type { border: 0; }
.jzj-d-ai-w { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.jzj-d-ai-d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.jzj-d-ai-d--lv { background: var(--jzj-gr); box-shadow: 0 0 6px rgba(26, 165, 90, 0.4); animation: jzj-glow-pulse 2s infinite; }
.jzj-d-ai-d--dn { background: var(--jzj-brand-mid); }
.jzj-d-ai-ln { width: 1px; flex: 1; background: var(--jzj-sf2); margin-top: 4px; min-height: 11px; }
.jzj-d-ai-t { font-size: 11px; color: var(--jzj-t2); line-height: 1.45; }
.jzj-d-ai-t strong { color: var(--jzj-ink); font-weight: 500; }
.jzj-d-ai-tm { font-size: 9px; color: var(--jzj-t3); margin-top: 2px; }
.jzj-d-ai-a { font-size: 10px; font-weight: 500; color: var(--jzj-brand-mid); cursor: pointer; margin-top: 3px; display: inline-block; text-decoration: none; }

/* Mobile tab bar — prototype .tab */
.jzj-tab {
    display: flex; border-top: 1px solid var(--jzj-bd); background: var(--jzj-surface);
    padding: 6px 0 20px; min-height: 56px; position: sticky; bottom: 0;
}
.jzj-tab-i {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 9px; font-weight: 500; color: var(--jzj-t3); text-decoration: none; padding: 4px;
}
.jzj-tab-i--on { color: var(--jzj-brand-mid); }

/* s11 return — prototype .ao-opt + the check block */
.jzj-ret-check {
    width: 56px; height: 56px; border-radius: 14px; background: var(--jzj-grb);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.jzj-ret-opts { max-width: 400px; margin: 0 auto; width: 100%; }
.jzj-ao-opt {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px;
    border: 1.5px solid var(--jzj-bd); cursor: pointer; min-height: 52px;
    background: var(--jzj-surface); margin-bottom: 8px; text-decoration: none; color: inherit;
    transition: border-color 0.2s; text-align: left;
}
.jzj-ao-opt:hover { border-color: var(--jzj-brand-mid); }
.jzj-ao-i { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.jzj-ao-tx { font-size: 13px; font-weight: 500; color: var(--jzj-ink); }

/* Desktop — prototype body.desk rules */
@media (min-width: 900px) {
    .jzj-d-side { display: block; }
    /* ⚠️ DEPARTURE FROM THE PROTOTYPE, founder-requested 2026-08-08 after seeing it on a real
       screen: the prototype specifies `body.desk .d-main{max-width:1000px}` (line 298), which on
       a 1920px display left the dashboard in a narrow column with a large empty band to its
       right — "dashboard is not coming on full screen". Widened rather than uncapped: an
       unbounded content column stretches the two-column card grid to unreadable line lengths on
       ultra-wide monitors. Everything else about the shell stays prototype-exact. */
    .jzj-d-main { max-width: 1600px; padding: 22px 24px; }
    .jzj-d-stats { grid-template-columns: repeat(4, 1fr); }
    .jzj-d-2col { grid-template-columns: 1.02fr 0.98fr; gap: 14px; align-items: start; }
    .jzj-tab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jzj-d-live::before, .jzj-d-ld, .jzj-d-ai-d--lv { animation: none; }
}

/* --------------------------------------------------------------------------
   Focus — keyboard users get an unmistakable ring. Never remove without replacing.
   -------------------------------------------------------------------------- */

.jzj-back:focus-visible,
.jzj-brand:focus-visible,
.jzj-continue:focus-visible,
.jzj-foot a:focus-visible {
    outline: 3px solid var(--jzj-brand);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Wider viewports
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .jzj-hdr  { padding: 10px 24px; }
    .jzj-wrap { padding: 44px 24px 64px; }
    .jzj-title { font-size: 30px; }
    .jzj-sub   { font-size: 16px; margin-bottom: 28px; }
    .jzj-opt   { padding: 18px; gap: 16px; }
    .jzj-opt-title { font-size: 16px; }
    .jzj-opt-desc  { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .jzj-opt,
    .jzj-tick,
    .jzj-continue { transition: none; }
}