/* ==========================================================================
   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 */
/* ⚠️ THE CONTINUE BAR IS A SIBLING OF `.jzj-wrap`, NOT A CHILD OF IT, so it inherited none
   of the column's `max-width: 560px; margin: 0 auto`. Measured on staging at a real 1440x900:
   the question column was 512px wide at x=464 while this button rendered **1400px wide at
   x=20** — 2.7x the width of everything it belongs to, spanning nearly the whole viewport.
   That single unconstrained rule is what read as "the layout is not good" on desktop.
   Mobile was never affected and is not changed here: at 375px the bar is 375px wide, so a
   560px cap is a no-op below the breakpoint (measured before and after). */
.jzj-qc {
    position: sticky;
    bottom: 0;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    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); }
/* The returning-candidate door. Quieter than the two signup CTAs above it - it is the
   minority path - but a real 44px-tall target, not fine print: it is the ONLY way back in
   for an existing account, and it sits below a form whose heading says "Create an account". */
.jzj-au-login { font-size: 14px; color: var(--jzj-t3); margin-top: 20px; }
.jzj-au-login a {
    color: var(--jzj-brand);
    font-weight: 500;
    text-decoration: underline;
    display: inline-block;
    padding: 12px 8px;
    min-height: 44px;
}
.jzj-au-login a:hover { color: var(--jzj-accent); }
.jzj-au-login a:focus-visible { outline: 3px solid var(--jzj-brand); outline-offset: 2px; }

.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; }
/* Item 5 (2026-08-23): the match card is now a wrapper holding the anchor plus an actions row.
   The bottom border moved from the anchor to the wrapper — left on the anchor it would have drawn
   a line BETWEEN a job and its own buttons. */
.jzj-d-jobw { border-bottom: 1px solid var(--jzj-sf); }
.jzj-d-jobw:last-of-type { border: 0; }
.jzj-d-job { display: block; padding: 11px 0 6px; cursor: pointer; text-decoration: none; color: inherit; }
/* Aligned with the reason and meta lines (41px) so the actions read as part of the card, not as a
   new column. Wraps rather than shrinking: at 320px two buttons still need to stay tappable. */
.jzj-d-job-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 11px 41px; }
.jzj-d-job-act { font-size: 10px; font-weight: 600; padding: 6px 12px; border-radius: 7px; text-decoration: none;
                 background: var(--jzj-sf); color: var(--jzj-t2); border: 1px solid transparent;
                 /* 28px tall: below the 44px AAA target, but this is a dense secondary list on a
                    surface whose primary action is the card itself. Matches the existing chip
                    scale rather than inventing a third size. */
                 line-height: 1.4; }
.jzj-d-job-act:hover { border-color: var(--jzj-sf2, #e5e7eb); color: var(--jzj-ink); }
.jzj-d-job-act--p { background: linear-gradient(135deg, #AB2379, #D0003A); color: #fff; }
.jzj-d-job-act--p:hover { color: #fff; box-shadow: 0 2px 8px rgba(208, 0, 58, 0.3); }
.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; }
/* A3 (founder ruling 2026-08-23): the line a card shows INSTEAD of a score it may not publish.
   Deliberately NOT styled as a band chip — a band is a verdict and this is the absence of one.
   Same size and indent as the reason line above so it reads as explanation, not as a warning. */
.jzj-d-job-g { display: block; font-size: 10px; color: var(--jzj-t2); line-height: 1.4; padding-left: 41px; margin-bottom: 4px; font-style: italic; }
.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; }

/* Matching-in-flight loader (founder ask 2026-08-20): three brand dots breathing in sequence
   while the bounded self-refresh works. The refresh script HIDES these when it gives up —
   a loader must never outlive the retry it decorates. [hidden] wins over display:inline-flex
   explicitly, because a display value on the element defeats the hidden attribute's default. */
.jzj-d-matching { display: flex; align-items: flex-start; gap: 8px; }
.jzj-d-mdots { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding-top: 5px; }
.jzj-d-mdots[hidden] { display: none; }
.jzj-d-mdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--jzj-brand); animation: jzj-mdot 1.2s ease-in-out infinite; }
.jzj-d-mdots i:nth-child(2) { animation-delay: 0.15s; }
.jzj-d-mdots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes jzj-mdot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

.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, .jzj-d-mdots i { 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; }
}

/* --------------------------------------------------------------------------
   The wizard screens on a wide viewport — g1-g5 and the s6 gap questions
   -------------------------------------------------------------------------- */

/* These two screens are the only ones that pair `.jzj-wrap` with a `.jzj-qc` continue bar,
   and they were built mobile-first and never given a desktop pass. At 1440x900 the result
   measured as a 512px question column stranded in the middle of the canvas with a 1400px
   button beneath it and ~340px of empty page below that — correct on a phone, unfinished on
   a laptop. Binding the two halves into one card gives the content an edge to sit against,
   which is what the width fix alone does not supply.

   ⚠️ SCOPED WITH A `--wiz` MODIFIER ON PURPOSE. `.jzj-wrap` is shared by six journey screens
   (entry, auth, reveal, return, gaps, guided); styling the bare class would redesign four
   screens nobody asked about. The modifier is a container class only — it touches no question,
   chip, sub-question or placeholder, so the 2026-08-04 verbatim-transcription pin
   (GuidedJourneyTest) is untouched in both directions. ⛔ Do NOT reach for `.jzj-chip` here:
   that test extracts chips with the literal regex `class="jzj-chip"[^>]*>`, so appending any
   second class to a chip makes the extractor miss it and the suite goes red.

   Appended at end-of-file deliberately: `.jzj-wrap--wiz` and `.jzj-wrap` have equal
   specificity (0,1,0), so these rules win on source order alone. Moving them above the
   earlier `@media (min-width: 768px)` block silently disables them. */
@media (min-width: 768px) {

    .jzj-wrap--wiz {
        max-width: 600px;
        margin-top: 32px;
        padding: 36px 32px 4px;
        background: var(--jzj-surface);
        border: 1px solid var(--jzj-bd);
        border-bottom: none;
        border-radius: 16px 16px 0 0;
    }

    /* ⚠️ STAYS STICKY — an earlier draft of this rule set `position: static` on the reasoning
       that a sticky footer would detach from the card on a short page. That reasoning is wrong,
       and measuring the TALLEST step is what showed it: sticky only offsets an element once its
       natural position would fall past the threshold, so on a short page it renders exactly
       where static would (measured: identical box at 1440x900). On 768x700 at g5 — 19 chips —
       `static` put Continue at y=691 against a 700px fold, i.e. the last step's only action was
       below the fold on any short laptop. Sticky pins it instead. The solid surface background
       and side borders below make it read as the card's own action footer riding up. */
    .jzj-qc--wiz {
        max-width: 600px;
        margin-bottom: 56px;
        padding: 4px 32px 32px;
        background: var(--jzj-surface);
        border: 1px solid var(--jzj-bd);
        border-top: none;
        border-radius: 0 0 16px 16px;
    }

    /* The progress strip stays full-bleed (it reads as the bottom edge of the header band),
       but its dots line up with the card rather than with the viewport. `max()` keeps the
       mobile-sized gutter on viewports narrower than the card; if a browser does not support
       it the declaration is dropped and the pre-existing 20px padding stands. */
    .jzj-pbar {
        padding-left:  max(20px, calc((100% - 600px) / 2));
        padding-right: max(20px, calc((100% - 600px) / 2));
    }
}