/* ZONE application experience: shared visual treatment for applicants and reviewers.
   Functional control, validation, reduced-motion and forced-colour rules live in recruit.css. */
:root {
  --bg: #0e1220; --panel: #171d2e; --panel-alt: #20283c; --text: #f5f6ff;
  --muted: #b9c3da; --quiet: #a6b1cc; --line: #333e58; --control-line: #7b88a5;
  --accent: #c3b3ff; --accent-solid: #6543cb; --accent-soft: #2c2547; --surface: #12192a;
  --radius: 12px; --wrap: 1480px; --gutter: clamp(20px,4vw,56px);
}
body.light-theme {
  --bg: #f4f3f8; --panel: #fff; --panel-alt: #eeedf5; --text: #20263c;
  --muted: #525e75; --quiet: #5f6980; --line: #d9dce7; --control-line: #808aa1;
  --accent: #5833b0; --accent-solid: #6543cb; --accent-soft: #f1edff; --surface: #f8f9fc;
}
main { background: radial-gradient(ellipse at 5% 0%,#584d862a,transparent 50%),radial-gradient(ellipse at 100% 25%,#30516c24,transparent 45%),var(--bg); }
.light-theme main { background: radial-gradient(ellipse at 0% 0%,#e9e2fc80,transparent 55%),radial-gradient(ellipse at 100% 20%,#fce9da55,transparent 45%),var(--bg); }
.button { padding: 12px 20px; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .005em; text-transform: none; }
.button-primary { border-color: #9475f0; background: var(--accent-solid); color: #fff; box-shadow: inset 0 1px #ffffff25,0 6px 18px #45308730; }
.button-primary:hover:enabled,.intro a.button-primary:hover { background: #5332b6; }
.progress__track li,.progress__track > span { height: 4px; border-radius: 3px; }
.progress__track .is-current { background: var(--accent); }
.step--current .step__marker { background: var(--accent-solid); border-color: var(--accent-solid); }
.input,.check-row,.review-card,.content-card,.trial-card,.demo-note,.game-detail { background: var(--surface); }
.input { min-height: 50px; }
.check-row:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check-row input { accent-color: var(--accent-solid); }
.check-row { padding: 16px; }
.demo-note { padding: 18px 20px; }
.field__label { font-size: 15px; }
.field__hint { line-height: 1.65; }
.review-card .section-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* A scanner needs a white quiet zone independent of the page theme. */
.mfa-setup { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; min-width: 0; }
.mfa-qr { width: 368px; max-width: 100%; padding: 24px; background: #fff; color: #000; color-scheme: only light; forced-color-adjust: none; border-radius: 12px; }
.mfa-qr__image { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #fff; filter: none; mix-blend-mode: normal; color-scheme: only light; image-rendering: pixelated; border-radius: 0; }
.mfa-manual { min-width: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mfa-manual summary { cursor: pointer; font-weight: 700; padding-block: 8px; }
.mfa-manual summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.mfa-manual ol { margin: 16px 0; padding-left: 22px; font-size: 14px; line-height: 1.7; }
.mfa-manual li + li { margin-top: 8px; }
.mfa-manual__key { display: block; margin-top: 10px; padding: 16px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--panel); color: var(--text); font: 600 17px/1.8 ui-monospace,Consolas,monospace; letter-spacing: .06em; overflow-wrap: anywhere; user-select: text; }
@media print { .mfa-setup { display: none !important; } }

/* Welcome: one landscape, live text and an immediate route to the chooser. */
.entry { grid-template-columns: minmax(0,1fr) 330px; grid-template-areas: "intro intro" "chooser guide" "returning returning"; grid-template-rows: auto; gap: 32px; padding-block: 20px 72px; }
.intro { min-width: 0; padding: clamp(30px,4vw,58px); min-height: 450px; border: 1px solid #6d7dac65; border-radius: 24px; color: #fff; background: linear-gradient(90deg,#101a3bf5 0%,#15234cdb 38%,#1727463d 67%,#17274600),url("../assets/zone-community-horizon.webp") center 58% / cover; box-shadow: 0 22px 60px #080e251f; }
.intro__copy { max-width: 640px; }
.intro .eyebrow { color: #e0ccff; }
.intro h1 { margin-top: 20px; font-size: clamp(42px,4.8vw,72px); line-height: 1.06; font-weight: 900; letter-spacing: -.055em; text-transform: none; }
.intro h1 strong { color: #dccdff; }
.intro h1::after { display: none; }
.hero-tagline { margin-top: 22px; font-weight: 700; font-size: clamp(16px,1.35vw,20px); }
.lede { margin-top: 10px; color: #e0e6f7; max-width: 43ch; font-size: 15px; line-height: 1.75; }
.intro__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 26px; }
.intro .returning-shortcut { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin: 0; color: #fff; font-size: 13px; }
.intro .returning-shortcut svg { width: 18px; height: 18px; color: #e0ccff; }
.intro__signature { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #e0e5f2; margin-top: 32px; }
.chooser { min-width: 0; padding: 32px; border-radius: 22px; background: var(--panel); box-shadow: 0 12px 40px #080e2509; scroll-margin-top: 100px; }
.chooser__head h2 { font-size: clamp(24px,2vw,30px); letter-spacing: -.025em; margin-top: 12px; }
.chooser__head .eyebrow { color: var(--accent); font-size: 10px; margin: 0; }
.progress { max-width: none; margin-top: 24px; }
.path-group { margin-top: 28px; }
.path-group__label { font-size: 11px; margin-bottom: 14px; }
.path-card { grid-template-columns: 42px minmax(0,1fr) 20px; gap: 16px; padding: 19px; border-radius: 14px; background: var(--surface); transition: background .15s,border-color .15s,box-shadow .15s; }
.path-card__icon { width: 42px; height: 42px; color: var(--accent); background: var(--accent-soft); }
.path-card__body { gap: 6px; }
.path-card__tag { justify-self: start; padding: 2px 8px; border-radius: 5px; background: var(--panel-alt); }
.path-card:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.path-card:has(input:checked) .path-card__icon { color: var(--accent); background: var(--panel); }
.path-card:has(input:checked) .path-card__check { border-color: var(--accent); }
.application-notice { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11px; }
.entry-guide { grid-area: guide; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.entry-guide .eyebrow { font-size: 9px; color: var(--accent); gap: 8px; }
.entry-guide .eyebrow::before { width: 18px; }
.entry-guide h2 { margin-top: 16px; font-size: 25px; letter-spacing: -.025em; }
.entry-guide__intro { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.expect { max-width: none; padding-top: 24px; margin-top: 24px; gap: 22px; }
.expect strong { display: block; margin-bottom: 4px; }
.expect svg { color: var(--accent); }
.entry-guide__next { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.entry-guide__next h3 { font-size: 16px; }
.entry-guide__next ol { list-style: none; counter-reset: journey; padding: 0; margin: 20px 0 0; display: grid; gap: 20px; }
.entry-guide__next li { position: relative; padding-left: 36px; counter-increment: journey; font-size: 12px; }
.entry-guide__next li::before { content: counter(journey); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 11px; font-weight: 700; }
.entry-guide__next strong,.entry-guide__next span { display: block; }
.entry-guide__next span { color: var(--muted); margin-top: 4px; }
.entry-guide__help { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; font-weight: 700; margin-top: 24px; }
.entry-guide__help svg { width: 16px; height: 16px; }
.returning { grid-template-columns: 42px 1fr auto; align-items: center; gap: 20px; padding: 28px 32px; border-radius: 20px; background: var(--panel); max-width: none; }
.returning__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.returning .button { grid-column: 3; }

/* The artwork frames the journey; form fields stay on opaque, calm surfaces. */
.flow { grid-template-columns: 260px minmax(0,1fr); gap: 32px; padding-block: 24px 72px; }
.flow__side { gap: 20px; }
.flow__art { height: 154px; padding: 20px; display: flex; align-items: flex-end; border: 1px solid #6d7dac65; border-radius: 18px; background: linear-gradient(0deg,#101a3bee,#17274620),url("../assets/zone-community-horizon.webp") 80% 60% / cover; }
.flow__art span { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.flow__art strong { color: #dccdff; }
.flow__brand { font-size: 28px; }
.flow__side > .eyebrow { color: var(--accent); font-size: 10px; }
.flow__path { border-left-color: var(--accent); }
.flow__panel { --panel-pad: clamp(24px,3vw,40px); padding: var(--panel-pad); border-radius: 22px; background: var(--panel); box-shadow: 0 16px 48px #080e2510; }
.flow__masthead { position: relative; isolation: isolate; padding: 28px var(--panel-pad); margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) 24px; border-bottom: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--surface); overflow: hidden; }
.flow__masthead::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 40%; background: url("../assets/zone-community-horizon.webp") 80% 56% / cover; opacity: .17; mask-image: linear-gradient(90deg,transparent,#000); }
.flow__masthead .eyebrow { font-size: 10px; color: var(--accent); margin-bottom: 12px; }
.flow__title { font-size: clamp(28px,2.7vw,40px); letter-spacing: -.035em; }
.flow__intro { font-size: 14px; max-width: 62ch; line-height: 1.7; }
.flow__progress { margin: 0 0 24px; }
.flow__form { margin-top: 26px; }
.flow__session-note { font-size: 11px; }
.flow__help { line-height: 1.6; }

/* Review desk: restrained colour, recognisable sections and clear status hierarchy. */
.flow.flow--reviewer { max-width: 1600px; grid-template-columns: 218px minmax(0,1fr); gap: 28px; }
.flow--reviewer .flow__panel { --panel-pad: clamp(22px,2.4vw,34px); padding: var(--panel-pad); }
.flow--reviewer .flow__art { height: 126px; }
.flow--reviewer .flow__art span { font-size: 20px; }
.flow--reviewer .flow__brand { font-size: 26px; }
.reviewer-nav__item { display: flex; align-items: center; gap: 10px; }
.reviewer-nav__item svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--quiet); }
.reviewer-nav__item[aria-current=page] { border-color: var(--line); border-left-color: var(--accent); background: var(--accent-soft); }
.reviewer-nav__item[aria-current=page] svg { color: var(--accent); }
.reviewer-stat { min-height: 116px; position: relative; padding: 18px; border-radius: 14px; background: var(--surface); }
.reviewer-stat__icon { position: absolute; right: 14px; bottom: 18px; width: 28px; height: 28px; color: var(--accent); opacity: .8; }
.reviewer-stat[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 3px var(--accent); background: var(--accent-soft); }
.reviewer-stat strong { font-size: 32px; }
.reviewer-filters { background: var(--surface); border-radius: 14px; }
.reviewer-queue { border-radius: 14px; background: var(--panel); }
.reviewer-row { min-height: 100px; }
.reviewer-avatar { border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.reviewer-badge { border-radius: 20px; padding: 5px 10px; background: var(--surface); }
.reviewer-badge--new { background: #28798a15; }
.reviewer-badge--success { background: #40926b18; }
.reviewer-open.button { font-size: 12px; min-height: 44px; }
.reviewer-record-bar .link-button { display: flex; gap: 8px; }
.reviewer-record-bar .link-button svg { width: 16px; height: 16px; }
.reviewer-decision { border-top-color: var(--accent); border-radius: 16px; background: var(--surface); }
.reviewer-kicker { color: var(--accent); }
.reviewer-checks { padding-block: 16px; border-block: 1px solid var(--line); }
.reviewer-notes { background: var(--surface); border-radius: 14px; }
.reviewer-detail .review-card { background: var(--surface); border-radius: 16px; }

@media (max-width: 1200px) {
  .entry { grid-template-columns: minmax(0,1fr) 285px; gap: 24px; }
  .entry-guide { padding: 22px; }
  .chooser { padding: 26px; }
  .flow.flow--reviewer { grid-template-columns: 180px minmax(0,1fr); gap: 22px; }
  .reviewer-stat__icon { width: 22px; height: 22px; right: 12px; }
}
@media (max-width: 820px) {
  .entry { grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "chooser" "guide" "returning"; gap: 24px; padding-block: 16px 40px; }
  .intro { min-height: 430px; padding: 30px; background-position: 66% center; background-image: linear-gradient(90deg,#101a3bf5,#15234cce 60%,#17274655),url("../assets/zone-community-horizon.webp"); }
  .intro h1 { font-size: clamp(38px,6.5vw,56px); }
  .intro__copy { max-width: 510px; }
  .entry-guide { padding: 26px; }
  .expect { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .expect li { display: block; }
  .expect svg { margin-bottom: 12px; }
  .entry-guide__next ol { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .chooser { padding: 26px; }
  .returning { grid-template-columns: 42px 1fr; padding: 24px; }
  .returning .button { grid-column: 1/-1; }
  .flow { padding-block: 20px 40px; }
  .flow__panel { --panel-pad: 24px; padding: var(--panel-pad); }
  .flow__masthead { padding-block: 24px; }
  .flow__bar { position: static; margin: 28px 0 0; padding: 20px 0 0; }
  .flow__session-note { margin-top: 24px; }
  .flow__path { padding: 12px 16px; }
  .flow.flow--reviewer { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .flow--reviewer .flow__panel { --panel-pad: 22px; padding: var(--panel-pad); }
  .reviewer-nav__item { justify-content: center; flex-wrap: wrap; }
  .reviewer-nav__security .reviewer-nav__item { flex-wrap: nowrap; }
}
@media (max-width: 540px) {
  :root { --gutter: 16px; }
  .intro { min-height: 0; padding: 28px 24px 180px; border-radius: 20px; background-position: 73% bottom; background-size: auto 100%; background-image: linear-gradient(180deg,#101a3bfa 0%,#15234cee 48%,#17274600 85%),url("../assets/zone-community-horizon.webp"); }
  .intro h1 { font-size: clamp(34px,8.9vw,46px); }
  .intro .eyebrow { font-size: 9px; letter-spacing: .1em; gap: 8px; }
  .intro .eyebrow::before { width: 18px; }
  .hero-tagline { font-size: 16px; }
  .lede { font-size: 14px; line-height: 1.7; }
  .intro__actions { gap: 10px 16px; margin-top: 22px; }
  .intro__signature { margin-top: 20px; font-size: 9px; letter-spacing: .1em; }
  .chooser { padding: 24px 18px; border-radius: 20px; }
  .chooser__head h2 { font-size: 25px; }
  .chooser__head .eyebrow { font-size: 9px; }
  .path-card { grid-template-columns: 34px minmax(0,1fr) 18px; gap: 10px; padding: 16px 12px; }
  .path-card__icon { width: 34px; height: 34px; }
  .path-card__title { font-size: 15px; }
  .path-card__summary { font-size: 13px; }
  .expect,.entry-guide__next ol { grid-template-columns: minmax(0,1fr); }
  .expect li { display: flex; }
  .expect svg { margin: 0; }
  .returning { gap: 16px; padding: 24px 20px; }
  .flow__panel,.flow--reviewer .flow__panel { --panel-pad: 18px; padding: var(--panel-pad); }
  .flow__title,.flow--reviewer .flow__title { font-size: 28px; }
  .reviewer-nav { gap: 6px; }
  .reviewer-nav__item { gap: 6px; padding: 9px 6px; font-size: 11px; }
  .reviewer-nav__item svg { flex-basis: 16px; width: 16px; height: 16px; }
  .reviewer-stat { min-height: 98px; padding: 14px; }
  .reviewer-stat strong { font-size: 28px; }
  .reviewer-stat__label { font-size: 11px; }
  .reviewer-toolbar { gap: 12px; }
  .reviewer-toolbar .button { align-self: flex-start; }
  .reviewer-filters { padding: 14px; }
  .reviewer-decision { padding: 20px 16px; }
}
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .intro { padding-inline: 20px; }
  .intro h1 { font-size: 33px; }
  .chooser { padding-inline: 16px; }
  .flow__panel,.flow--reviewer .flow__panel { --panel-pad: 14px; }
  .reviewer-open.button { font-size: 11px; padding-inline: 8px; }
}
@media (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  .flow.flow--reviewer { grid-template-columns: minmax(0,1fr); }
}
@media (forced-colors: active) {
  .intro,.flow__art { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .intro :is(h1 strong,.eyebrow,.lede,.returning-shortcut,.intro__signature),.flow__art :is(span,strong) { color: CanvasText; }
  .flow__masthead::before { display: none; }
  .reviewer-stat[aria-pressed=true],.reviewer-nav__item[aria-current=page] { outline: 2px solid Highlight; }
  .path-card:has(input:checked) .path-card__check { border-color: Highlight; }
}
@media print {
  .intro,.flow__masthead { background: #fff; color: #000; }
  .flow__masthead::before,.flow__art { display: none; }
}