/* crew-extra.css — what the live site needs that Dolf's approved pages don't show (3.2).
   crew.css stays exactly as he delivered it; this file only ADDS, in the same tokens and style:
   things the static pages did with inline style attributes (which the CSP blocks as attributes),
   the screens he didn't draw (review, errors, dialogs, Stuck?), and the question types his
   pages didn't need (consent, file, text areas, Listen and Memory from older forms). */

/* the sprite: the design had style="position:absolute" on it — an attribute the CSP blocks */
body > svg:first-child { position: absolute; }
[hidden] { display: none !important; }
.loading { min-height: 50vh; }

/* .page-head[style*="text-align:left"] in crew.css matches the attribute text; el() writes the CSSOM form */
.page-head.left { text-align: left; }
.page-head.left .timg { margin: 0; }
.page-head .ico-above { margin: 0 auto 22px; }
.page-head.left .ico-above { margin: 0 0 22px; }
.page-head .ctx-tag { margin-bottom: 18px; }
.page-head .sec-intro { margin-top: 18px; display: grid; gap: 10px; }
.page-head .sec-intro p { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 60ch; }

/* a title Dolf has not drawn yet: the words, in the lettering's colours (blue, last word red) */
.ttext { margin: 0 auto; max-width: 900px; font: 800 clamp(34px, 6vw, 64px)/1.02 var(--font); letter-spacing: -.01em; text-transform: uppercase;
  filter: drop-shadow(0 10px 18px rgba(31,91,255,.18)) drop-shadow(0 14px 26px rgba(248,0,88,.12)); }
.ttext .tt-b { background: linear-gradient(180deg, #8FF0FF 0%, #3FC7FF 40%, #1F5BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttext .tt-r { background: linear-gradient(180deg, #FF6E9C 0%, #F80058 55%, #B8003F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-head.left .ttext, .role-head .ttext { margin: 0; }

/* the role page side card: the icon beside the title, the line under the button */
.side-title { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.apply-btn { margin-top: 22px; }
.side-sub { margin-top: 12px; text-align: center; }
.empty-jobs { grid-column: 1 / -1; text-align: center; }
.empty-jobs p { color: var(--ink-2); margin: 8px 0 0; }

/* How it works: the two boxes */
.how-box { display: flex; gap: 18px; align-items: flex-start; }
.how-box p { margin: 6px 0 0; color: var(--ink-2); }

/* status page */
.status-panel { margin-top: 26px; display: grid; gap: 24px; }
.status-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.status-role { display: flex; gap: 14px; align-items: center; }
.done-panel { display: grid; gap: 22px; }
.done-panel .outro p { margin: 0; }

/* ---- the application form ---------------------------------------------------- */
.field .opt-word { font-weight: 500; color: var(--muted); }
.field .qbig { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.4; }
textarea.input { padding: 14px 16px; min-height: 120px; line-height: 1.5; resize: vertical; }
.input.invalid, .has-error .input { box-shadow: 0 0 0 2px #C8004A inset, 0 0 0 5px rgba(200,0,74,.1); }
.field-error, .form-error { margin: 0; font-size: 14px; font-weight: 600; color: #A3123F; }
.field-error:empty, .form-error:empty { display: none; }
.form-error { margin-top: 16px; }
.has-error .lab, .has-error > label { color: #A3123F; }
.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.nopaste-hit { box-shadow: 0 0 0 2px #C8004A inset !important; }
.hint.count { text-align: right; }
.hint.pick { margin-top: -2px; }
.radios.rating span { min-width: 52px; justify-content: center; }
.f-statement .stmt { margin: 0; color: var(--ink-2); }
.qpic { margin: 4px 0; aspect-ratio: auto; } .qpic img { max-height: 360px; object-fit: contain; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* consent: a big tick box in the design's blue */
.consent { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-weight: 500 !important; font-size: 15px !important; color: var(--ink-2); line-height: 1.5; }
.consent { position: relative; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; pointer-events: none; }
.consent .tick { flex: 0 0 28px; height: 28px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1.5px rgba(31,91,255,.42) inset; display: grid; place-items: center; transition: all .3s var(--ease); }
.consent input:checked + .tick { background: var(--blue); box-shadow: 0 8px 18px -8px rgba(31,91,255,.8); }
.consent input:checked + .tick::after { content: ""; width: 12px; height: 7px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.consent input:focus-visible + .tick { outline: 2px solid var(--blue); outline-offset: 3px; }
.consent-box { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(14,30,58,.07); }

/* file */
.filepick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filepick .filename { font-size: 15px; color: var(--ink-2); }

/* statement pages: the in-section progress, a red edge on a statement still to answer */
.stmt-prog { margin-top: 22px; }
form.statements { margin-top: 22px; display: grid; gap: 14px; }
.likert-page { display: grid; gap: 14px; }
.statement { border: 0; margin: 0; }
.statement.missing { box-shadow: 0 0 0 2px #C8004A, 0 0 24px 2px rgba(200,0,74,.25); }

/* one timed question on its own */
.solo { display: grid; gap: 22px; }
.solo .form-actions, .t2-q .form-actions { margin-top: 0; }
.eyebrow-s { font-weight: 700; color: var(--blue-deep); }
.lock-note { color: var(--muted); }
.timer .bar { transition: stroke-dashoffset .25s linear; }
.timer.low b { color: #C8004A; }

/* review and send */
.review { display: grid; gap: 26px; }
.rev-group h3 { margin: 0 0 12px; }
.rev-list { display: grid; gap: 0; margin: 0; }
.rev-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 6px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(14,30,58,.07); }
.rev-row:last-child { border-bottom: 0; }
.rev-row dt { color: var(--muted); font-size: 15px; }
.rev-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rev-row.bad dt { color: #A3123F; }
.rev-problem { color: #A3123F; }
.rev-edit { border: 0; background: #E9F0FF; color: var(--blue-deep); font: 700 13px/1 var(--font); min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; }
.rev-row.bad .rev-edit { background: #FDE6EE; color: #A3123F; }
.rev-lock { white-space: nowrap; }
.warn-note { background: var(--warn-soft); color: var(--warn); }

/* Test 2 */
.t2-intro, .t2-q { display: grid; gap: 22px; }
.t2-facts div { padding-bottom: 10px; }
.t2-prose { margin: 0; }
.t2-q .progress { margin-top: 0; }

/* ---- dialogs and "Stuck?" ------------------------------------------------------ */
.dlg-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(240,244,255,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: enter .4s var(--ease); overflow-y: auto; }
.dlg { width: min(520px, 100%); display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dlg p { margin: 0; color: var(--ink-2); }
.dlg .form-actions { margin-top: 8px; }
.dlg-head { display: flex; gap: 14px; align-items: center; }
.dot-ok { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--blue); flex: none; }
.dot-ok svg { width: 20px; height: 20px; }
.btn-danger { background: linear-gradient(180deg, #E8336C, #C8004A 60%, #A3123F) !important; }
.helpshot { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(14,30,58,.08); max-height: 180px; }
.helpshot img { width: 100%; display: block; }
.helpshot span { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15,30,61,.7); padding: 4px 10px; border-radius: 999px; }
.helpfab { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--font); color: var(--blue-deep); background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1.5px rgba(31,91,255,.3) inset, 0 14px 30px -14px var(--glow-blue), 0 10px 26px -16px var(--glow-pink); transition: transform .3s var(--ease); }
.helpfab img { width: 34px; height: 34px; }
.helpfab:hover { transform: translateY(-2px); }
.helpfab:disabled { opacity: .5; }

/* ---- Listen and Memory (older forms; markup from render.mjs) ----------------------- */
.legacy { display: flex; flex-direction: column; gap: 12px; }
.legacy .qz-label { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.legacy .qz-help { margin: 0; font-size: 14px; color: var(--muted); }
.legacy .qz-error { display: none; }
.qz-player { display: flex; flex-direction: column; gap: 14px; }
.qz-player audio { display: none; }
.qz-player video { width: 100%; border-radius: 18px; background: #000; max-height: 360px; pointer-events: none; }
.qz-listenbar { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1.5px rgba(31,91,255,.2) inset; }
.qz-play { flex: none; width: 72px; height: 72px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; font: 800 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #3567F5, #1F5BFF 45%, #1946CF); box-shadow: 0 12px 24px -10px var(--glow-blue); }
.qz-play:disabled { opacity: .5; } .playing .qz-play:disabled { opacity: 1; }
.qz-playicon { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.playing .qz-playicon { width: 14px; height: 14px; border: 0; border-radius: 3px; background: #fff; margin: 0; }
.qz-listenmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qz-progress { height: 8px; border-radius: 999px; background: rgba(31,91,255,.12); overflow: hidden; }
.qz-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #16B8CC, #1F5BFF); transition: width .25s linear; }
.qz-listenrow { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qz-plays { font-weight: 700; color: var(--blue-deep); }
.qz-canthear { align-self: flex-start; border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--font); text-decoration: underline; cursor: pointer; padding: 4px 0; }
.qz-game { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.mg-head { text-align: center; } .mg-status { font-size: 18px; font-weight: 700; } .mg-sub { font-size: 15px; color: var(--muted); margin-top: 4px; min-height: 20px; }
.mg-grid { display: grid; gap: 12px; width: min(100%, 360px); aspect-ratio: 1; }
.mg-cell { aspect-ratio: 1; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px rgba(31,91,255,.18) inset; transition: all .12s ease; cursor: pointer; }
.mg-cell:disabled { cursor: default; }
.mg-cell.lit { background: linear-gradient(135deg, #16B8CC, #1F5BFF); box-shadow: 0 0 24px rgba(31,91,255,.5); }
.mg-cell.hit { background: #19A974; } .mg-cell.miss { background: #E8336C; }
.mg-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mg-rounds { display: flex; gap: 8px; } .mg-rounds i { width: 12px; height: 12px; border-radius: 50%; background: rgba(31,91,255,.15); }
.mg-rounds i.ok { background: #19A974; } .mg-rounds i.bad { background: #E8336C; } .mg-rounds i.now { background: var(--blue); }
.mg-start { min-width: 180px; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 700 16px/1 var(--font); background: linear-gradient(180deg, #3567F5, #1F5BFF 45%, #1946CF); }

@media (max-width: 880px) {
  .rev-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rev-row dd { grid-column: 1 / 2; }
  .rev-row .rev-edit, .rev-row .rev-lock { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .helpfab { right: 12px; bottom: 12px; }
}
.test-top .small { display: block; }
.t2-more summary { cursor: pointer; font-weight: 700; color: var(--blue-deep); font-size: 15px; }
.t2-more .prose { margin-top: 14px; gap: 12px; }
.t2-more .prose p { font-size: 15px; }
.listblock { display: grid; gap: 10px; }
button.qpic { display: block; width: 100%; padding: 6px; border: 0; cursor: zoom-in; font: inherit; }
button.qpic img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 16px; }
.lb-ov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; cursor: zoom-out; background: rgba(240,244,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: enter .3s var(--ease); }
.lb-ov img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(31,91,255,.55); }
.lb-x { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer; font-size: 18px; color: var(--blue-deep); background: #fff; box-shadow: 0 0 0 1.5px rgba(31,91,255,.3) inset; }
.lb-hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--muted); }
/* the confirm dialog render.mjs opens ("Can't hear the clip?") — widgets.mjs markup in the new style */
.mdl-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(240,244,255,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mdl { width: min(480px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 26px; background: var(--glass-strong); box-shadow: 0 0 0 1px rgba(120,180,255,.5), 0 30px 60px -30px rgba(31,91,255,.5); }
.mdl h2 { margin: 0; font-size: 22px; font-weight: 800; } .mdl p { margin: 0; color: var(--ink-2); }
.mdl-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.mdl-btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px/1 var(--font); }
.mdl-btn.primary { color: #fff; background: linear-gradient(180deg, #3567F5, #1F5BFF 45%, #1946CF); }
.mdl-btn.danger { color: #fff; background: linear-gradient(180deg, #E8336C, #C8004A 60%, #A3123F); }
.mdl-btn.ghost { color: var(--blue-deep); background: #fff; box-shadow: 0 0 0 1.5px rgba(31,91,255,.42) inset; }

/* 3.2 fixes from the first phone run (Reaghan, 29 Oct) ----------------------------------------- */
/* the site is light by design: ask browsers not to force their own dark mode over it */
:root { color-scheme: only light; }
/* every question in its own bordered card, so one ends where the next begins */
.qform > .field { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: 0 0 0 1.5px rgba(31,91,255,.18), 0 10px 24px -18px rgba(31,91,255,.45); }
.qform > .field.has-error { box-shadow: 0 0 0 2px #C8004A, 0 10px 24px -18px rgba(200,0,74,.45); }
@media (max-width: 880px) { .qform > .field { padding: 14px; } }
/* Phones: the glowing edges (.rim) repaint every frame — a spinning conic border plus a blurred glow on each
   card. Six of them on a statement page is more than a phone's GPU paints in time, so whatever sits below
   (Back / Next) stayed blank until the page was scrolled. On phones the edges stay, standing still. */
@media (max-width: 880px), (pointer: coarse) {
  .rim::before, .rim::after { animation: none !important; }
  .rim::after { filter: blur(10px); }
  .job .pic img { animation: none; }
}
.form-actions { position: relative; z-index: 2; }
/* "Stuck?" never covers Next: room at the bottom of the page for it, and a solid button (no blur layer) */
body:has(.helpfab) .shell { padding-bottom: 96px; }
.helpfab { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
@media (max-width: 880px) {
  .helpfab { right: 12px; bottom: 12px; min-height: 44px; padding: 0 14px 0 6px; font-size: 14px; }
  .helpfab img { width: 30px; height: 30px; }
}
.helpfab { transition: bottom .25s var(--ease), transform .3s var(--ease); }
/* a long answer in a dropdown must never make the form wider than the phone (it was cut off on the right) */
.form .field { min-width: 0; }
.form select.input, .form .input { width: 100%; max-width: 100%; min-width: 0; }
select.input { text-overflow: ellipsis; }
@media (max-width: 880px) { .form { grid-template-columns: minmax(0, 1fr); } }
.radios.rating { flex-wrap: nowrap; }
.radios.rating label { flex: 1 1 0; min-width: 0; }
.radios.rating span { width: 100%; min-width: 0; padding: 0; justify-content: center; }

/* long section names: a title with no lettering never runs off the phone, and many steps fold to bars */
.ttext { font-size: clamp(24px, 7.2vw, 64px); max-width: 100%; overflow-wrap: break-word; }
@media (max-width: 880px) {
  .steps { gap: 5px; }
  .steps li { min-width: 0; font-size: 12px; }
  .steps li:not(.now) { font-size: 0; gap: 0; }  /* only the current step is named; the others are their bars */
  .steps li.now { flex: 2.4; }
}
/* the timed-question card: nothing in it may push it wider than the screen */
.solo, .t2-q, .t2-intro { grid-template-columns: minmax(0, 1fr); }
.solo > *, .t2-q > *, .t2-intro > * { min-width: 0; }
.test-top > div:first-child { min-width: 0; flex: 1 1 180px; }
.shell { overflow-x: clip; }