/* CAE aviation quiz — styles for quiz.html. Colours, type and motion come from tokens.css.

   SIZING SYSTEM
   No quiz screen may scroll, on a portrait kiosk or a landscape laptop. Every size is therefore
   clamp(min px, fluid, max px) where the fluid part is vmin (scales with the smaller viewport side) or
   min(vmin, vh) for vertical rhythm (so stacked bands still fit on short landscape screens).
   --pad-x is the shared horizontal padding of every band; --band-gap the vertical rhythm inside a band. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --pad-x:clamp(20px,5.3vmin,96px);
  --band-gap:clamp(12px,min(4vmin,2.6vh),72px);
  --hairline-dark:var(--hairline) solid var(--alpha-dark-45);
}
[hidden]{display:none!important}
html,body{height:100%;background:var(--color-surface);color:var(--color-dark-blue);font-family:var(--font-family);-webkit-font-smoothing:antialiased}
a{color:var(--color-bright-blue);text-decoration:none}a:hover{color:var(--color-dark-blue)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input::placeholder{color:var(--alpha-dark-45)}
:focus-visible{outline:2px solid var(--color-bright-blue);outline-offset:2px}
.band-top :focus-visible,.band-dark :focus-visible,.band-bottom :focus-visible,.q-close:focus-visible{outline-color:var(--color-lime)}

.quiz-app{position:fixed;inset:0;background:var(--color-surface);overflow:hidden;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* ---------- × close ---------- */
.q-close{position:absolute;z-index:10;top:clamp(18px,min(5vmin,3.6vh),96px);right:0;width:clamp(52px,6.4vmin,112px);height:clamp(48px,6vmin,104px);background:var(--color-dark-blue);color:var(--color-white);border-radius:clamp(6px,.8vmin,12px) 0 0 clamp(6px,.8vmin,12px);display:grid;place-items:center;transition:background var(--dur-fast)}
.q-close:hover{background:var(--color-press)}
.q-close span{grid-area:1/1;width:48%;height:1.5px;background:var(--color-white);transform:rotate(45deg)}
.q-close span+span{transform:rotate(-45deg)}

/* ---------- Bands (coloured blocks) ---------- */
.band{padding-left:var(--pad-x);padding-right:var(--pad-x)}
.band-top{background:var(--color-bright-blue);color:var(--color-white);padding-top:clamp(18px,min(5vmin,3.6vh),110px);padding-bottom:clamp(16px,min(4.5vmin,3vh),80px);display:flex;flex-direction:column;gap:var(--band-gap)}
.band-q{gap:clamp(10px,min(3.4vmin,2vh),60px)}
.band-bottom{background:var(--color-bright-blue);color:var(--color-white);padding-top:clamp(28px,6vmin,110px);padding-bottom:clamp(28px,5vmin,90px);display:flex;flex-direction:column;gap:clamp(24px,4.5vmin,80px)}
.band-dark{background:var(--color-dark-blue);color:var(--color-white);padding-top:clamp(12px,min(4vmin,2.4vh),72px);padding-bottom:clamp(12px,min(4vmin,2.4vh),72px);display:flex;gap:clamp(12px,3vmin,52px);align-items:center;flex-wrap:wrap}
.band-feedback{margin-top:auto;justify-content:space-between;min-height:clamp(68px,min(13vmin,9vh),230px)}
.push-right{margin-left:auto}
.stack{display:flex;flex-direction:column;gap:clamp(8px,1.6vmin,28px);max-width:1600px}
.row{display:flex;gap:clamp(16px,3vmin,48px);align-items:center;flex-wrap:wrap}

/* ---------- Logo + photo ---------- */
.logo{height:clamp(28px,min(5vmin,3.6vh),72px);width:auto;align-self:flex-start;display:block}
.logo-lg{height:clamp(28px,min(6vmin,4vh),84px)}
.logo-sm{height:clamp(26px,min(4.6vmin,3.4vh),68px);align-self:center}
.hero-photo{flex:1;position:relative;min-height:80px;background:var(--color-tint)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}

/* ---------- Type ---------- */
.t-hero{font-weight:var(--weight-light);font-size:clamp(44px,9vmin,160px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.t-h2{font-weight:var(--weight-light);font-size:clamp(26px,min(7.4vmin,5vh),132px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.t-h3{font-weight:var(--weight-light);font-size:clamp(22px,min(6vmin,3.4vh),112px);line-height:1.05;letter-spacing:-.01em}
.t-body{font-size:clamp(14px,min(3vmin,2vh),50px);line-height:1.25;max-width:26em;text-wrap:pretty}
.t-small{font-size:clamp(15px,2.4vmin,40px);line-height:1.3}
.t-question{font-weight:var(--weight-light);font-size:clamp(19px,min(5vmin,3.4vh),92px);line-height:1.12;letter-spacing:-.01em;text-wrap:pretty}
.t-feedback{font-size:clamp(14px,min(2.8vmin,2vh),48px);line-height:1.25;flex:1;min-width:12em;text-wrap:pretty}

/* ---------- Buttons + links ---------- */
.btn{border-radius:var(--radius-pill);font-size:clamp(16px,min(3vmin,2.1vh),50px);padding:0 clamp(26px,4vmin,68px);min-height:clamp(46px,min(7.6vmin,5.2vh),128px);transition:background var(--dur-fast),color var(--dur-fast)}
.btn-white{background:var(--color-white);color:var(--color-dark-blue);font-size:clamp(20px,3.2vmin,52px);padding:0 clamp(28px,4.4vmin,76px);min-height:clamp(56px,8vmin,136px)}
.btn-white:hover,.btn-white:active{background:var(--color-dark-blue);color:var(--color-white)}
.btn-blue{background:var(--color-bright-blue);color:var(--color-white)}
.btn-blue:hover{background:var(--color-press)}
.btn-blue:disabled{background:var(--alpha-white-18);color:var(--alpha-white-70);cursor:default}
.link{font-size:clamp(15px,min(2.6vmin,1.9vh),44px);color:var(--color-white);text-decoration:underline;text-underline-offset:.25em;padding:12px 0;min-height:var(--tap-min);display:inline-flex;align-items:center}
.link:hover{color:var(--color-lime)}
.link-plain{text-decoration:none}

/* ---------- Contact form ---------- */
.form{flex:1;display:flex;flex-direction:column;padding:clamp(12px,min(5vmin,2.6vh),90px) var(--pad-x);gap:clamp(8px,min(3vmin,1.8vh),52px);min-height:0;max-width:1400px;width:100%}
.field{display:flex;flex-direction:column;gap:clamp(4px,min(1vmin,.6vh),16px);font-size:clamp(13px,min(2.2vmin,1.6vh),36px)}
.field input{font:inherit;font-size:clamp(17px,min(3.4vmin,2.4vh),56px);font-weight:var(--weight-light);color:var(--color-dark-blue);background:var(--color-white);border:0;border-bottom:var(--hairline-dark);padding:0 clamp(16px,2.4vmin,40px);min-height:clamp(44px,min(8vmin,5.4vh),136px);outline:none;border-radius:0;width:100%}
.field input:focus{border-bottom-color:var(--color-bright-blue)}
.field input[aria-invalid="true"]{border-bottom:2px solid var(--color-error)}
.field .error{color:var(--color-error);font-size:clamp(12px,min(2vmin,1.4vh),32px);min-height:1.3em;line-height:1.3}
.field .error:empty{display:none}
/* Consent: native checkbox, visually replaced by .consent-box */
.consent{display:flex;align-items:flex-start;gap:clamp(14px,2.2vmin,36px);text-align:left;padding:clamp(2px,min(1vmin,.6vh),16px) 0;min-height:var(--tap-min);cursor:pointer;position:relative}
.consent input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.consent-box{flex:none;width:clamp(30px,min(4.6vmin,3.2vh),76px);height:clamp(30px,min(4.6vmin,3.2vh),76px);border:1.5px solid var(--color-bright-blue);border-radius:var(--radius-round);color:var(--color-white);display:grid;place-items:center;font-size:clamp(18px,2.6vmin,44px);transition:background var(--dur-fast)}
.consent input:checked+.consent-box{background:var(--color-bright-blue)}
.consent input:checked+.consent-box::after{content:"✓"}
.consent input:focus-visible+.consent-box{outline:2px solid var(--color-bright-blue);outline-offset:2px}
.consent-text{font-size:clamp(13px,min(2.2vmin,1.6vh),36px);line-height:1.35;max-width:36em}

/* ---------- Question ---------- */
.progress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(6px,.8vmin,12px);max-width:1400px;margin-right:clamp(40px,4vmin,80px)}
.progress div{height:clamp(4px,.7vmin,12px);background:var(--alpha-white-30);transition:background var(--dur-base)}
.progress div.current{background:var(--alpha-white-70)}
.progress div.done{background:var(--color-white)}
.options{flex:1;min-height:0;display:flex;flex-direction:column}
.option{flex:1 1 0;display:flex;align-items:center;gap:clamp(14px,3vmin,52px);text-align:left;min-height:clamp(48px,min(11vmin,7vh),190px);max-height:clamp(96px,min(16vmin,14vh),260px);padding:clamp(4px,min(2.2vmin,1.2vh),40px) var(--pad-x);color:var(--color-dark-blue);border-bottom:var(--hairline-dark);transition:background var(--dur-fast),opacity var(--dur-base)}
.option:not(:disabled):hover{background:var(--color-white)}
.option:disabled{cursor:default}
.option.is-correct{background:var(--color-lime)}
.option.is-wrong{background:var(--color-error)}
.option.is-dim{opacity:.4}
.option-letter{flex:none;width:clamp(34px,min(6.4vmin,4.6vh),108px);height:clamp(34px,min(6.4vmin,4.6vh),108px);display:grid;place-items:center;border:1.5px solid currentColor;border-radius:var(--radius-round);font-size:clamp(16px,min(3vmin,2.1vh),50px);font-weight:var(--weight-light)}
.option-text{flex:1;font-size:clamp(16px,min(3.6vmin,2.6vh),62px);line-height:1.15}
.option-mark{flex:none;font-size:clamp(14px,2.2vmin,38px)}

/* ---------- Results ---------- */
.score-row{display:flex;align-items:flex-end;gap:clamp(24px,5vmin,100px);flex-wrap:wrap}
.t-score{font-weight:var(--weight-light);font-size:clamp(64px,min(18vmin,13vh),320px);line-height:.85;letter-spacing:-.04em}
.t-score-total{font-size:.4em;letter-spacing:0}
.score-msg{gap:clamp(8px,1.6vmin,28px);padding-bottom:clamp(6px,1.4vmin,24px);flex:1;min-width:14em}
.score-msg .t-h2{font-size:clamp(24px,min(6.4vmin,4.4vh),116px);text-wrap:balance}
.score-msg .t-body{font-size:clamp(14px,min(2.8vmin,1.9vh),48px);max-width:26em}
/* Answer summary: fills the space between the score band and the footer, no scrolling */
.summary{flex:1;min-height:0;display:flex;flex-direction:column;color:var(--color-dark-blue)}
.summary .board-head{padding:clamp(10px,min(3vmin,1.8vh),60px) var(--pad-x) clamp(6px,min(2vmin,1.2vh),36px);color:var(--color-bright-blue)}
.summary .board{flex:1;min-height:0;display:flex;flex-direction:column;border-top:var(--hairline-dark)}
.summary .board-row{flex:1 1 0;min-height:0;display:grid;grid-template-columns:clamp(40px,7vmin,120px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2.4vmin,40px);padding:clamp(3px,min(1.2vmin,.6vh),24px) var(--pad-x);border-bottom:var(--hairline-dark);overflow:hidden}
.summary .board-row .rank{font-size:clamp(15px,min(3vmin,2vh),52px);font-weight:var(--weight-light)}
.summary .board-row .q{display:flex;flex-direction:column;gap:clamp(1px,.4vmin,6px);min-width:0}
.summary .board-row .q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;display:block}
.summary .board-row .q-text{font-size:clamp(11px,min(1.8vmin,1.25vh),30px);color:var(--color-text-muted)}
.summary .board-row .q-ans{font-size:clamp(14px,min(2.6vmin,1.8vh),46px)}
.summary .board-row .res{display:inline-flex;align-items:center;gap:clamp(8px,1.4vmin,22px);font-size:clamp(13px,min(2.4vmin,1.6vh),42px);white-space:nowrap;justify-self:end}
.summary .board-row .res i{width:clamp(12px,min(2.2vmin,1.5vh),36px);height:clamp(12px,min(2.2vmin,1.5vh),36px);border-radius:var(--radius-round);display:inline-block}
.summary .board-row .res.ok i{background:var(--color-lime)}.summary .board-row .res.miss i{background:var(--color-error)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}