/* Applicant pages. Loaded after base.css. */

/* Frame */
body{display:flex;flex-direction:column;min-block-size:100vh}
.apply{flex:1;padding-block:var(--space-6) var(--space-8);background:var(--surface-tint)}
.apply__inner{display:grid;gap:var(--space-5);max-inline-size:46rem}
.apply__card{min-inline-size:0;padding:clamp(1.25rem,4vw,2.5rem);border:.125rem solid var(--navy);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-paper)}
.apply__eyebrow{margin-block-end:var(--space-1);color:var(--action);font-size:var(--size-small);font-weight:var(--weight-label)}
.apply__card h1{font-size:var(--size-h2)}
.apply__card form{margin:0}
.apply__card form+p{margin-block-start:var(--space-4)}

/* Progress */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:0;padding:0;counter-reset:step;list-style:none}
.steps li{display:flex;flex-direction:column;gap:var(--space-1);padding-block-start:var(--space-2);border-block-start:.3125rem solid var(--lilac);color:var(--text-soft);font-size:var(--size-small);line-height:1.4;counter-increment:step}
.steps li::before{content:counter(step);font-weight:var(--weight-title)}
.steps .done{border-block-start-color:var(--purple-deep)}
.steps [aria-current]{border-block-start-color:var(--navy);color:var(--navy);font-weight:var(--weight-title)}
/* On phones the bars stay equal and only the current step's name shows, on its own line below them. */
@media (max-width:36rem){
  .steps{position:relative;padding-block-end:1.5rem}
  .steps li span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .steps [aria-current] span{inset-block-end:0;inset-inline-start:0;inline-size:auto;block-size:auto;clip-path:none}
}

/* Messages from the server */
.apply__card .error,.apply__card .notice{margin-block:0 var(--space-5);padding:var(--space-3) var(--space-4);border-inline-start:.375rem solid var(--navy);border-radius:var(--radius-small);background:var(--teal-pale);color:var(--navy)}
.apply__card .error{border-inline-start-color:var(--danger);background:var(--danger-pale);color:var(--danger)}

/* Fields. Sign-in, password and submission pages use bare labels, so they share these rules. */
.apply__card form>label:not(.field){display:block;margin-block-end:var(--space-5);font-weight:var(--weight-label)}
.apply__card form>label:not(.field) input{margin-block-start:var(--space-1)}
.apply__row{display:grid;gap:0 var(--space-4)}
@media (min-width:30rem){.apply__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.otp{font-size:1.75rem!important;font-weight:var(--weight-title);letter-spacing:.35em;text-align:center!important}
#problem_statement{min-block-size:18rem}
.field>p{margin-block:0 var(--space-2)}

/* Radio cards. The radio stays visible, so the choice still reads without colour. */
.choices{min-inline-size:0;margin:0 0 var(--space-5);padding:0;border:0}
.choices legend{padding:0}
.choices__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--space-2)}
@media (min-width:36rem){.choices__list--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:22rem){.choices__list--4{grid-template-columns:minmax(0,1fr)}}
.choice{display:flex;align-items:center;gap:var(--space-2);min-block-size:3rem;padding:var(--space-2) var(--space-3);border:.125rem solid var(--line-strong);border-radius:var(--radius-small);cursor:pointer;font-weight:var(--weight-label);line-height:1.4}
.choice:has(:checked),.pick:has(:checked){border-color:var(--navy);background:var(--surface-tint)}
.choice:has(:focus-visible),.pick:has(:focus-visible){outline:.1875rem solid var(--focus);outline-offset:.125rem}
.choice input,.pick input{flex:none;inline-size:1.125rem;block-size:1.125rem;margin:0;accent-color:var(--purple-deep)}
.choices--invalid .choice,.choices--invalid .pick{border-color:var(--danger)}

/* Track cards */
.picks{display:grid;grid-auto-rows:1fr;gap:var(--space-3);margin-block-start:var(--space-2)}
@media (min-width:36rem){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pick{display:flex;flex-direction:column;overflow:hidden;border:.125rem solid var(--line-strong);border-radius:var(--radius);cursor:pointer}
.pick__art{display:flex;justify-content:center;align-items:flex-end;block-size:7.5rem;padding:var(--space-3) var(--space-3) 0}
.pick--individuals .pick__art{background:var(--yellow)}
.pick--government .pick__art{background:var(--teal)}
.pick__art img{inline-size:100%;block-size:100%;object-fit:contain;object-position:bottom}
.pick__body{display:flex;gap:var(--space-2);padding:var(--space-3);font-size:var(--size-small);line-height:1.7}
.pick__body input{margin-block-start:.2rem}
.pick__body strong{display:block;font-size:var(--size-body);font-weight:var(--weight-title)}

/* Problem statement */
.apply__rule{margin-block:0 var(--space-3);padding:var(--space-3) var(--space-4);border-inline-start:.375rem solid var(--navy);border-radius:var(--radius-small);background:var(--yellow);color:var(--navy);font-weight:var(--weight-title)}

/* Submission */
.apply__card .notice strong{display:block}
.apply__facts{display:grid;margin:var(--space-4) 0 var(--space-5);border-block-start:.0625rem solid var(--line)}
.apply__facts div{display:grid;gap:var(--space-1);padding-block:var(--space-3);border-block-end:.0625rem solid var(--line)}
@media (min-width:36rem){.apply__facts div{grid-template-columns:11rem minmax(0,1fr);gap:var(--space-4)}}
.apply__facts dt{color:var(--text-soft);font-size:var(--size-small)}
.apply__facts dd{min-inline-size:0;margin:0;font-weight:var(--weight-label);overflow-wrap:anywhere}
.apply__facts a{display:inline-block;text-align:start}
.apply__card summary{padding-block:var(--space-2);cursor:pointer;font-weight:var(--weight-label)}
.apply__card details p{margin-block-start:var(--space-2);overflow-wrap:anywhere}
.apply__card details dt{margin-block-start:var(--space-3);font-weight:var(--weight-label)}
.apply__card details dd{margin:var(--space-1) 0 0;overflow-wrap:anywhere}

/* Buttons. Plain buttons are the page action; existing markup relies on these. */
.apply__card button,.apply__card .button-link{display:inline-flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:3rem;padding:var(--space-2) var(--space-5);border:.125rem solid var(--action);border-radius:var(--radius);background:var(--action);color:var(--white);cursor:pointer;font:inherit;font-weight:var(--weight-title);line-height:1.4;text-align:center;text-decoration:none}
.apply__card button:hover,.apply__card .button-link:hover{border-color:var(--action-hover);background:var(--action-hover);color:var(--white)}
.apply__card button.secondary{background:var(--surface);color:var(--action)}
.apply__card button.secondary:hover{background:var(--surface-tint);color:var(--action)}
.apply__card button.link{display:inline;inline-size:auto;min-block-size:0;padding:0;border:0;background:none;color:var(--action);font-weight:var(--weight-body);text-align:start;text-decoration:underline;text-underline-offset:.2em}
.apply__card button.link:hover{background:none;color:var(--action-hover)}
.apply__after{margin-block:var(--space-4) 0;text-align:center}
.apply__aside{display:grid;gap:var(--space-2);margin-block-start:var(--space-5);padding-block-start:var(--space-5);border-block-start:.0625rem solid var(--line)}
.apply__aside p{margin:0}
.apply__links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-block-start:var(--space-5);font-size:var(--size-small)}
.apply__actions{display:grid;gap:var(--space-3);margin-block-start:var(--space-5)}
@media (min-width:30rem){.apply__actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Closed applications. Social cards follow the homepage's; icon colours live here because the page allows no inline styles. */
.socials{display:grid;gap:var(--space-3);margin:var(--space-5) 0 0;padding:0;list-style:none}
@media (min-width:40rem){.socials{grid-template-columns:repeat(3,minmax(0,1fr))}}
.social{display:block;block-size:100%;padding:var(--space-5);border:.125rem solid var(--navy);border-radius:var(--radius-small);background:var(--surface);box-shadow:var(--shadow-paper);color:var(--navy);text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s}
.social:hover{transform:translate(-2px,-2px);box-shadow:.5rem .5625rem 0 var(--purple-deep);color:var(--navy)}
.social:focus-visible{outline:.1875rem solid var(--focus);outline-offset:.125rem}
.social__icon{display:flex;align-items:center;justify-content:center;inline-size:3.25rem;block-size:3.25rem;margin:0 auto var(--space-4);border-radius:.75rem}
.social__icon--instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social__icon--facebook{background:#1877f2}
.social__icon--tiktok{background:#111}
.social__name{display:block;font-size:1.125rem;font-weight:var(--weight-title)}
.social__handle{display:block;color:var(--purple-deep);font-size:var(--size-small);overflow-wrap:anywhere}
/* Code resend cooldown (3 minutes). The server enforces it; applicant pages run no script, so CSS
   reveals the resend button when the wait ends and, where supported, ticks the clock down. */
@property --code-wait{syntax:'<integer>';inherits:false;initial-value:0}
.code-resend{display:grid}
.code-resend>*{grid-area:1/1;margin:0}
.code-resend__wait{color:var(--purple-deep);font-size:var(--size-small)}
.code-resend[class*="code-wait--"] .code-resend__form{visibility:hidden;animation:code-resend-show 0s linear var(--code-wait-left) forwards}
.code-resend[class*="code-wait--"] .code-resend__wait{animation:code-resend-hide 0s linear var(--code-wait-left) forwards}
@keyframes code-resend-show{to{visibility:visible}}
@keyframes code-resend-hide{to{visibility:hidden}}
@keyframes code-resend-count{from{--code-wait:180}to{--code-wait:0}}
@supports (width:mod(1px,1px)){
.code-resend__clock{font-size:0}
.code-resend__clock::after{font-size:var(--size-small);font-variant-numeric:tabular-nums;counter-reset:code-m max(0,calc((var(--code-wait) - 30) / 60)) code-s mod(var(--code-wait),60);content:counter(code-m) ":" counter(code-s,decimal-leading-zero);animation:code-resend-count 180s linear var(--code-wait-elapsed) forwards}
}
.code-wait--5{--code-wait-left:5s;--code-wait-elapsed:-175s}
.code-wait--10{--code-wait-left:10s;--code-wait-elapsed:-170s}
.code-wait--15{--code-wait-left:15s;--code-wait-elapsed:-165s}
.code-wait--20{--code-wait-left:20s;--code-wait-elapsed:-160s}
.code-wait--25{--code-wait-left:25s;--code-wait-elapsed:-155s}
.code-wait--30{--code-wait-left:30s;--code-wait-elapsed:-150s}
.code-wait--35{--code-wait-left:35s;--code-wait-elapsed:-145s}
.code-wait--40{--code-wait-left:40s;--code-wait-elapsed:-140s}
.code-wait--45{--code-wait-left:45s;--code-wait-elapsed:-135s}
.code-wait--50{--code-wait-left:50s;--code-wait-elapsed:-130s}
.code-wait--55{--code-wait-left:55s;--code-wait-elapsed:-125s}
.code-wait--60{--code-wait-left:60s;--code-wait-elapsed:-120s}
.code-wait--65{--code-wait-left:65s;--code-wait-elapsed:-115s}
.code-wait--70{--code-wait-left:70s;--code-wait-elapsed:-110s}
.code-wait--75{--code-wait-left:75s;--code-wait-elapsed:-105s}
.code-wait--80{--code-wait-left:80s;--code-wait-elapsed:-100s}
.code-wait--85{--code-wait-left:85s;--code-wait-elapsed:-95s}
.code-wait--90{--code-wait-left:90s;--code-wait-elapsed:-90s}
.code-wait--95{--code-wait-left:95s;--code-wait-elapsed:-85s}
.code-wait--100{--code-wait-left:100s;--code-wait-elapsed:-80s}
.code-wait--105{--code-wait-left:105s;--code-wait-elapsed:-75s}
.code-wait--110{--code-wait-left:110s;--code-wait-elapsed:-70s}
.code-wait--115{--code-wait-left:115s;--code-wait-elapsed:-65s}
.code-wait--120{--code-wait-left:120s;--code-wait-elapsed:-60s}
.code-wait--125{--code-wait-left:125s;--code-wait-elapsed:-55s}
.code-wait--130{--code-wait-left:130s;--code-wait-elapsed:-50s}
.code-wait--135{--code-wait-left:135s;--code-wait-elapsed:-45s}
.code-wait--140{--code-wait-left:140s;--code-wait-elapsed:-40s}
.code-wait--145{--code-wait-left:145s;--code-wait-elapsed:-35s}
.code-wait--150{--code-wait-left:150s;--code-wait-elapsed:-30s}
.code-wait--155{--code-wait-left:155s;--code-wait-elapsed:-25s}
.code-wait--160{--code-wait-left:160s;--code-wait-elapsed:-20s}
.code-wait--165{--code-wait-left:165s;--code-wait-elapsed:-15s}
.code-wait--170{--code-wait-left:170s;--code-wait-elapsed:-10s}
.code-wait--175{--code-wait-left:175s;--code-wait-elapsed:-5s}
.code-wait--180{--code-wait-left:180s;--code-wait-elapsed:-0s}