/* The application pages: the 3+4 design San chose on 2026-10-13.
   From 3: fields grouped in tinted panels with a coloured top rule, the
   segment bar with the site's geometric marks, 2px inputs, errors on a pale
   red ground with a "!" mark. From 4: single choices as large tiles, blue
   when chosen with a yellow corner. Colours come from tokens.css; the
   three below are tints of them used only here. */

.apply{--wash:#EFEDE7;--mute:#D9D6CE;--redtint:#FCEBEA;
  max-width:640px;margin:0 auto;padding:18px 16px 0}
/* The rules below set display on buttons and cards; hidden must still hide them. */
.apply [hidden]{display:none!important}
/* Scrolling to the form or a field stops below the fixed site navigation. */
.apply-form,.apply .f,.apply .slot{scroll-margin-top:calc(var(--navtop) + 12px)}

/* buttons */
.apply .btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;padding:10px 18px;border:3px solid var(--blue);background:var(--blue);color:#fff;
  font:inherit;font-weight:900;font-size:16px;cursor:pointer;text-align:center;line-height:1.3}
.apply .btn small{font-weight:500;font-size:11.5px;opacity:.9}
.apply .btn:active{background:var(--blue-dk);border-color:var(--blue-dk)}
.apply .btn:disabled{background:var(--mute);border-color:var(--mute);color:var(--dim);cursor:not-allowed}
.apply .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.apply .btn.ghost:disabled{background:transparent;border-color:var(--mute);color:var(--mute)}
.apply .btn.danger{background:var(--red-dk);border-color:var(--red-dk)}
.apply .link{background:none;border:0;padding:4px 0;font:inherit;font-size:14px;font-weight:700;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.plansum{display:flex;justify-content:space-between;align-items:center;border:3px solid var(--ink);background:#fff;padding:10px 12px;margin:0}
.plansum b{font-family:var(--geo)}
.apply :focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* cards: resume, moved, done, resume lookup */
.apply-card{border:3px solid var(--ink);background:#fff;padding:22px 18px;display:grid;gap:14px;margin-bottom:28px}
.apply-card h1{font-size:24px;font-weight:900;line-height:1.35}
.apply-card .card-actions{display:flex;gap:10px;flex-wrap:wrap}
.apply-card.unsaveable{border-color:var(--red-dk)}
.apply-card .confirm{border-top:3px solid var(--ink);padding-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.apply-card .confirm p{flex-basis:100%;font-weight:700}
.alert{border:2px solid var(--red-dk);border-left-width:8px;background:var(--redtint);padding:8px 12px;font-weight:700;color:var(--red-dk)}

/* head: save state, segments, sub-steps */
.apply-head{display:grid;gap:10px;margin-bottom:16px}
.saved{min-height:20px;font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:6px;justify-self:end}
.saved:not(:empty)::before{content:"";width:8px;height:8px;background:var(--mute)}
.saved.ok::before{background:var(--blue)}
.saved.err{color:var(--red-dk);font-weight:700}
.saved.err::before{background:var(--red-dk)}
.segs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0;margin:0}
.seg{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 6px;padding:7px 6px;border:2px solid var(--ink);background:#fff;
  font-size:12.5px;line-height:1.25;color:var(--dim)}
.seg b{font-weight:700}
.seg .mark{width:12px;height:12px;flex:none;background:var(--blue)}
.seg:nth-child(2) .mark{background:var(--yellow);border-radius:50%}
.seg:nth-child(3) .mark{background:var(--red);border-radius:0 12px 0 0}
.seg.done{color:var(--ink)}
.seg.cur{background:var(--ink);color:#fff}
.seg .ticks{grid-column:1/-1;display:flex;gap:3px}
.seg .sub{flex:1;width:auto;height:10px}
.seg.cur .sub{background:#555}
.seg.cur .sub.on{background:var(--blue)}
.seg.cur .sub.cur{background:var(--yellow)}
.sub{width:30px;height:12px;padding:0;border:0;background:var(--mute);cursor:pointer;position:relative}
.sub::after{content:"";position:absolute;inset:-16px -2px}  /* 44px touch target around a small bar */
.sub.on{background:var(--blue)}
.sub.cur{background:var(--yellow)}
.sub:disabled{cursor:default}
.step-count{font-size:12.5px;font-weight:700;color:var(--dim);letter-spacing:.04em}
.step-title{font-size:26px;font-weight:900;line-height:1.3}

/* steps and groups */
/* A step is a <section>: base.css gives every section the site's band spacing
   (44px, 70px on wide screens) and a rule beneath, which opened gaps above and
   below the groups and doubled the line over the bottom buttons. */
.step{display:grid;gap:14px;padding:0;border-bottom:0}
.grp{border:0;margin:0;min-width:0;background:var(--wash);border-top:4px solid var(--blue);padding:12px 12px 16px;
  display:grid;gap:16px}
.grp:nth-of-type(even){border-top-color:var(--yellow)}
.grp-h{float:left;width:100%;font-size:12.5px;font-weight:900;letter-spacing:.08em;color:var(--dim);padding:0;margin-bottom:-4px}
.grp-h+*{clear:both}
.f{display:grid;gap:6px;min-width:0}
.f:has(> .unit){grid-template-columns:1fr auto;align-items:center;column-gap:8px}
.f:has(> .unit) > :not(input):not(.unit){grid-column:1/-1}
.unit{font-weight:700}
.idhint{width:100%;max-width:320px;height:auto;border:2px solid var(--ink);background:#fff}
.lbl{font-size:14.5px;font-weight:700}
.hint{font-size:12.5px;color:var(--dim);line-height:1.5}
.apply input[type=text],.apply input[type=tel],.apply input[type=email],.apply input[type=search],.apply select{
  width:100%;min-height:48px;padding:8px 12px;border:2px solid var(--ink);border-radius:0;background:#fff;
  font:inherit;font-size:17px;color:var(--ink);-webkit-appearance:none;appearance:none}
.apply select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.apply input::placeholder{color:var(--dim)}
/* banks: the box narrows a list right under it (form.js) */
.combo{position:relative}
.apply .combo input{padding-right:36px;background:#fff linear-gradient(45deg,transparent 50%,var(--ink) 50%) no-repeat calc(100% - 20px) 50%/6px 6px,
  #fff linear-gradient(135deg,var(--ink) 50%,transparent 50%) no-repeat calc(100% - 14px) 50%/6px 6px}
.apply .combo input[aria-expanded=true]{border-color:var(--blue)}
.combo-list{position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:6;list-style:none;margin:0;padding:0;
  max-height:min(300px,45vh);overflow-y:auto;background:#fff;border:2px solid var(--blue);border-top-width:1px}
.combo-item{padding:11px 12px;font-size:16px;cursor:pointer;border-bottom:1px solid var(--wash)}
.combo-item:hover,.combo-item.active{background:var(--wash)}
.combo-item[aria-selected=true]{font-weight:700}
.combo-note{padding:11px 12px;font-size:13.5px;color:var(--dim)}
.date{display:flex;align-items:center;gap:6px}
.date input{width:64px!important;text-align:center;font-family:var(--geo)}
.date span{font-weight:700}

/* tiles: single choices (design 4) */
.tiles,.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plans{grid-template-columns:1fr 1fr}
.tile{position:relative;display:flex}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;
  padding:8px 6px;border:3px solid var(--ink);background:#fff;font-weight:700;font-size:15px;line-height:1.3;cursor:pointer}
.plans .tile span{min-height:72px;font-size:17px;font-family:var(--geo)}
.tile input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff;position:relative}
.tile input:checked+span::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;background:var(--yellow)}
.tile input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}

/* checkbox */
.check{display:flex;gap:10px;align-items:flex-start;font-weight:700;cursor:pointer;min-height:44px;padding-top:8px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check i{width:26px;height:26px;flex:none;border:3px solid var(--ink);background:#fff;position:relative}
.check input:checked+i{background:var(--blue);border-color:var(--blue)}
.check input:checked+i::after{content:"";position:absolute;left:6px;top:1px;width:8px;height:14px;
  border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.check input:focus-visible+i{outline:3px solid var(--red);outline-offset:2px}

/* errors (design 3) */
.msg{display:none;align-items:flex-start;gap:6px;font-size:13.5px;font-weight:700;color:var(--red-dk);line-height:1.5}
.msg:not(:empty){display:flex}
.msg:not(:empty)::before{content:"!";flex:none;width:18px;height:18px;margin-top:1px;background:var(--red-dk);color:#fff;
  font-family:var(--geo);font-size:12px;display:flex;align-items:center;justify-content:center}
.msg a{color:var(--blue);text-decoration:underline}
.f.bad input[type=text],.f.bad input[type=tel],.f.bad input[type=email],.f.bad select{border-color:var(--red-dk);background-color:var(--redtint)}
.f.bad .tile span{border-color:var(--red-dk)}

/* notices, documents */
.notice,.doc{border:2px solid var(--ink);background:#fff;padding:10px 12px;font-size:14px}
.notice summary,.doc summary{cursor:pointer;font-weight:700}
.doc-text{margin-top:8px;font-size:13.5px;color:var(--dim);max-height:40vh;overflow:auto}
.docs{display:grid;gap:8px}

/* upload slots */
.slots{display:grid;gap:10px}
.slots>.slot{border:3px solid var(--ink);background:#fff;padding:12px;display:grid;gap:8px}
.slot-h{font-weight:900}
.slot-state{font-size:13.5px;color:var(--dim)}
/* A single file's row already says it is uploaded; the line stays for the review page to read. */
.slot:not([data-multiple]) .files:has(.file.done)+.slot-state{display:none}
.slot.bad{border-color:var(--red-dk)}
.slot .pick{justify-self:start;min-height:44px;font-size:15px}
.secthead{display:flex;align-items:center;gap:8px;font-weight:900;margin:6px 0 0}
.secthead i{width:12px;height:12px;background:var(--blue)}
.secthead.y i{background:var(--yellow)}
.slotlist{border:3px solid var(--ink);background:#fff;display:grid}
.slotlist.bonus{background:#FCF0C2}
.slotlist .slot{border:0;border-top:1px solid var(--mute);padding:0;background:transparent}
.slotlist .slot:first-child{border-top:0}
.slotlist .slot.bad{box-shadow:inset 4px 0 0 var(--red-dk)}
.slotlist .slot .msg{margin:0 12px}
.slotrow{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:48px;padding:10px 12px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.slotbody{padding:0 12px 12px;display:grid;gap:8px}
.chip{flex:none;font-size:12px;font-weight:700;border:2px solid var(--ink);padding:0 6px;background:#fff}
.chip.b{background:var(--blue);border-color:var(--blue);color:#fff}
.foldbtn{justify-self:start}
.foldbtn small{margin-left:6px;font-weight:500}
.files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.file{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;border:2px solid var(--ink);padding:6px;background:var(--paper)}
.file .thumb{width:52px;height:52px;background:repeating-linear-gradient(135deg,var(--wash) 0 6px,var(--mute) 6px 8px);overflow:hidden;display:flex}
.file .thumb img{width:100%;height:100%;object-fit:cover}
.file-body{display:grid;gap:3px;min-width:0}
.file-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-state{font-size:12.5px;color:var(--dim)}
.file .bar{height:5px;background:var(--mute);display:block}
.file .bar i{display:block;height:100%;width:0;background:var(--blue)}
.file.done .bar{display:none}
.file.done .file-state{color:var(--blue);font-weight:700}
.file.error{border-color:var(--red-dk)}
.file.error .file-state{color:var(--red-dk);font-weight:700}
.file.replacing{opacity:.45}
.file-actions{display:flex;gap:10px}

/* review */
.review{display:grid;gap:12px}
.rv{background:var(--wash);border-top:4px solid var(--blue);padding:10px 12px}
.rv:nth-child(even){border-top-color:var(--yellow)}
.rh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.rh b{font-size:16px}
.rv dl{display:grid;grid-template-columns:minmax(6em,auto) 1fr;gap:4px 14px;font-size:14px}
.rv dt{color:var(--dim)}
.rv dd{font-weight:500;overflow-wrap:anywhere;margin:0}

/* problems after a refused submission */
.problems{border:3px solid var(--red-dk);background:#fff;padding:12px 14px;margin:16px 0;display:grid;gap:8px}
.problems-h{font-size:16px}
.problems ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.problems li a{font-weight:700;color:var(--blue)}
.problems li.done{text-decoration:line-through;color:var(--dim)}

/* footer: always within thumb's reach */
.apply-foot{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;margin:20px -16px 0;padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:3px solid var(--ink)}
.apply-foot #btn-next{flex:1}

/* review status page (status page spec 5): mockup G, a colour block over the four-part ruler,
   and H4's round stamp on approval. Not-approved, withdrawn and refused stay grey, never red (tokens.css). */
.apply.status{max-width:560px}
.status-card{border:3px solid var(--ink);background:#fff;margin-bottom:28px;padding:0}  /* padding: base.css pads every section */
.status-hero{position:relative;overflow:hidden;min-height:220px;padding:20px 18px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:4px;border-bottom:3px solid var(--ink)}
.status-hero h1{position:relative;font-size:34px;font-weight:900;line-height:1.2;padding-right:56px}  /* clear of the corner mark */
.status-hero p,.status-case{position:relative;font-size:14px}
.status-mark{position:absolute}
.status-hero.query{min-height:150px;background:var(--blue);color:#fff}
.status-hero.query h1{font-size:28px}
.query .status-mark{right:18px;top:18px;width:56px;height:56px;background:var(--yellow)}
.status-hero.wait{background:var(--yellow)}
.wait .status-mark{right:-36px;top:-36px;width:170px;height:170px;background:var(--blue)}
/* Past the blue edges by 2px, so no blue fringe shows where the two squares would share an edge. */
.wait .status-mark::after{content:"";position:absolute;left:-2px;bottom:-2px;width:88px;height:88px;background:var(--yellow)}
.status-hero.ok{background:var(--blue);color:#fff}
.status-hero.closed{background:#E4E1D9}
.closed .status-mark{right:22px;top:22px;width:100px;height:100px;border:3px solid var(--ink)}
.closed .status-case{color:var(--dim)}
.status-stamp{position:absolute;right:20px;top:16px;color:var(--yellow);transform:rotate(-12deg)}
.status-stamp text{font-family:var(--geo);font-weight:700}
.status-stamp .word{font-family:var(--sans);font-weight:900}
.status-body{padding:20px 18px;display:grid;gap:16px}
.ruler{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ruler li{display:flex;flex-direction:column;gap:5px}
.ruler li::before{content:"";height:18px;border:3px solid var(--ink)}
.ruler b{font-size:13px;font-weight:700}
.ruler small{min-height:1.2em;font-family:var(--geo);font-weight:700;font-size:12px;color:var(--dim)}
.ruler .done::before{background:var(--blue);border-color:var(--blue)}
.ruler .mark::before{background:var(--blue)}
.ruler .now::before{background:var(--yellow)}
.ruler .grey::before{background:var(--dim);border-color:var(--dim)}
.ruler .end::before{background:var(--ink)}
.ruler .now b,.ruler .mark b,.ruler .end b{font-weight:900}
.ruler .off b{color:var(--dim)}
.status-next{border:3px solid var(--ink);padding:14px;display:grid;gap:8px}
.status-next .k{font-size:13px;font-weight:900;color:var(--dim)}
.status-next .t{font-size:20px;font-weight:900}
.status-actions{display:grid;gap:10px}
.status-contact{border-top:3px solid var(--ink);padding-top:14px;font-size:14px}
.status-body a:not(.btn){color:var(--blue);text-decoration:underline}

/* thank-you page */
.done .done-mark{width:44px;height:44px;background:var(--blue);position:relative}
.done .done-mark::after{content:"";position:absolute;left:14px;top:5px;width:12px;height:24px;
  border-right:5px solid #fff;border-bottom:5px solid #fff;transform:rotate(45deg)}
.case{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.case dt{color:var(--dim)}
.case dd{margin:0;font-weight:700}
#case-number{font-size:22px;letter-spacing:.04em}
.done a,.resume-form .hint a{color:var(--blue);text-decoration:underline}

@media (min-width:768px){
  .apply{padding-top:32px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .apply-foot{margin:24px 0 0;padding:12px 0;border-top:3px solid var(--ink)}
}
@media (prefers-reduced-motion:reduce){.apply *{transition:none!important;scroll-behavior:auto!important}}

/* The confirmation dialog (dialogs spec 3.1, mockup part 3 option 4): a centred card with the picture
   about to go, so the applicant deletes the right one. Outside .apply: ask.js puts it at the end of body. */
.ask{margin:auto;border:3px solid var(--ink);padding:0;width:min(360px,calc(100vw - 32px));background:#fff;color:var(--ink);font-family:var(--sans)}
.ask::backdrop{background:rgba(20,20,20,.55)}
.ask [hidden]{display:none}  /* .ask-image sets display; a hidden one must still hide */
.ask-box{display:grid;gap:12px;padding:16px}
.ask-image{border:2px solid var(--ink);height:160px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#EFEDE7 0 6px,#D9D6CE 6px 8px);overflow:hidden}
.ask-image img{width:100%;height:100%;object-fit:contain;background:#fff}
.ask-file{background:#fff;border:2px solid var(--ink);padding:6px 10px;font-weight:700;max-width:90%;overflow-wrap:anywhere}
.ask-title{font-size:17px;font-weight:900;margin:0;overflow-wrap:anywhere}
.ask-detail{margin:0;color:var(--dim)}
.ask-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ask-acts button{min-height:44px;border:3px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-weight:900;font-size:15px}
.ask-acts .ask-yes{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.slot-error{color:var(--red-dk);font-weight:700;background:var(--redtint,#FCEBEA);padding:6px 8px;margin:0}