/* JOBZY portal (D-113, D-115, D-118). On top of web/style.css (A0 tokens, Inter, base controls).
   D-118: the portal's palette lives in these variables; a measured palette replaces them in one commit. */
:root {
  /* Palette measured for JOBZY (research 2026-10-07, WCAG computed): one accent, 8.17:1 on bg, 7.64:1 on surface.
     The accent only marks the panel's one primary CTA, links, the 2 px focus ring, the active step and progress. */
  --jz-bg: #0B0B0C;
  --jz-surface: #141416;
  --jz-border: var(--border);
  --jz-text: #ECECEE;
  --jz-muted: rgb(236 236 238 / 65%);    /* also rejections and «no answer yet»: grey, never red */
  --jz-accent: #5EB3C4;
  --jz-accent-hover: color-mix(in srgb, var(--jz-accent) 93%, white);  /* +7 % lightness */
  --jz-on-accent: #0B0B0C;               /* text on the accent: always dark, never white */
  --jz-chip: color-mix(in srgb, var(--jz-accent) 14%, var(--jz-surface));
  --jz-done: #3FB27F;
  --jz-warn: var(--warn);
  --jz-error: var(--err);                /* blocking errors only */
  --jz-slide: 200ms;                     /* D-118: soft slide, ease-out */
  /* web/style.css reads the A0 names: point them at the portal palette. */
  --bg: var(--jz-bg);
  --surface: var(--jz-surface);
  --text: var(--jz-text);
  --accent: var(--jz-accent);
  --on-accent: var(--jz-on-accent);
  --ok: var(--jz-done);
}
body { background: var(--jz-bg); color: var(--jz-text); }
main { max-width: none; margin: 0; padding: 0; }

/* Top bar: brand (back to welcome), the five steps, the language. No menu. */
.portal-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--jz-border); background: var(--jz-bg); }
.portal-bar .brand { flex: none; }
.portal-bar select { flex: none; width: auto; min-width: 64px; margin-left: auto; }
.steps { display: flex; flex: 1; gap: var(--space-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.steps li { flex: 1; min-width: 0; margin: 0; }
.steps button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1); width: 100%;
  min-height: var(--control-h); padding: 0 var(--space-2); border: 1px solid var(--jz-border); border-radius: 999px;
  background: transparent; color: var(--jz-muted); font-size: var(--text-xs); white-space: nowrap; }
.steps button .n { font-weight: 700; }
.steps button .label { overflow: hidden; text-overflow: ellipsis; }
.steps [data-state="done"] button { color: var(--jz-done); border-color: color-mix(in srgb, var(--jz-done) 40%, var(--jz-border)); }
.steps [data-state="current"] button { color: var(--jz-on-accent); background: var(--jz-accent); border-color: var(--jz-accent); }
.steps [data-shown="1"] button { outline: 2px solid var(--jz-text); outline-offset: 1px; }
.steps button:disabled { opacity: .45; cursor: default; }
@media (max-width: 560px) { .steps button .label { display: none; } }  /* phones: numbers; the panel says its name */

/* Panels: full width, side by side; the track slides to the one shown. */
.viewport { overflow-x: clip; touch-action: pan-y; }  /* clip, not hidden: focus and scroll-into-view cannot shift it */
.track { display: flex; width: 100%; transition: transform var(--jz-slide) ease-out; will-change: transform; }
.slide { flex: 0 0 100%; min-width: 0; min-height: calc(100dvh - 58px); }
.slide-inner { max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
@media (prefers-reduced-motion: reduce) { .track { transition: none; } }

.status { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); }
.status:empty { display: none; }
.status[data-kind="error"] { color: var(--jz-error); }
.entry { text-align: center; padding-top: var(--space-8); }
.entry h1 { font-size: var(--text-2xl); letter-spacing: -.02em; }
.entry .hero-lead { margin: var(--space-3) 0 var(--space-6); color: var(--jz-muted); font-size: var(--text-lg); }
.entry .narrow-form { max-width: 360px; margin: 0 auto; text-align: left; }
.big { min-height: 56px; padding: 0 var(--space-7); font-size: var(--text-lg); border-radius: 999px; }
.eyebrow { color: var(--jz-muted); }
.stack > * + * { margin-top: var(--space-4); }
.portal-card { margin: 0; padding: var(--space-5); border: 1px solid var(--jz-border); border-radius: var(--radius-lg); background: var(--jz-surface); }
.portal-card h2, .portal-card h3 { margin: 0 0 var(--space-2); }
.phrase { overflow-wrap: anywhere; }
.fit p { margin: var(--space-1) 0; }
.back { display: inline-block; margin-bottom: var(--space-3); }
.tone { color: var(--jz-muted); font-style: italic; }

/* The interview: chips instead of form controls. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: var(--space-2); }
.chip { position: relative; display: inline-flex; margin: 0; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: 999px; }
.chip input:checked + span { color: var(--jz-text); background: var(--jz-chip); border-color: var(--jz-accent); }
.chip input:checked + span::before { content: "✓ "; }
.chip input:focus-visible + span { outline: 2px solid var(--jz-accent); outline-offset: 2px; }
.chips.column { flex-direction: column; }
.chips.column .chip span { width: 100%; }

/* Lists inside panels 2 and 3. */
.answers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-3); margin: 0; }
.answers dd { margin: 0; overflow-wrap: anywhere; }
.cv-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; margin: 0; padding: var(--space-3);
  background: var(--jz-bg); border: 1px solid var(--jz-border); border-radius: var(--radius-sm); font-size: var(--text-xs); }  /* PW2 */
.job-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--jz-border); }
.block-list h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); color: var(--jz-muted); text-transform: uppercase; }
@media (max-width: 480px) { .answers { grid-template-columns: minmax(0, 1fr); } .answers dd { padding-bottom: var(--space-2); } }
.primary:hover:not(:disabled), .button-link.primary:hover { background: var(--jz-accent-hover); border-color: var(--jz-accent-hover); }
:focus-visible { outline: 2px solid var(--jz-accent); outline-offset: 2px; }
a { color: var(--jz-accent); }
.button-link.primary { color: var(--jz-on-accent); }