/* Applicant portal: the UESD Records register layout (app.css) with the Nkabom brand (nkabom.css). */
.portal-top{margin-bottom:28px}
.portal-top .who{gap:12px;flex-wrap:wrap}
.portal-top .who b{color:var(--fg)}
.student.narrow{max-width:520px}
.student.wide{max-width:860px}
.stepper[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.stepper[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.card h2:focus{outline:none}
.grid.one{grid-template-columns:1fr}
.nav.center{justify-content:center;flex-wrap:wrap}
.nav.wrap-nav{flex-wrap:wrap}
.nav .btn.primary{min-width:140px}
@media (max-width:420px){.nav{flex-direction:column-reverse}.nav .btn{width:100%}.nav>span:empty{display:none}}
.seg button{text-align:left;line-height:1.25}
.seg button:hover:not([aria-pressed="true"]),.chip:hover:not([aria-pressed="true"]){border-color:var(--accent)}
select:disabled{opacity:.6;cursor:not-allowed}
.field>label{line-height:1.3}

/* inline messages */
.form-err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 14px;font-weight:600;margin:0 0 18px}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.below{text-align:center;color:var(--muted);margin-top:16px}
.applying{margin:0 0 10px;font-size:14px;color:var(--muted)}
.applying b{color:var(--accent)}

/* welcome choices */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media (max-width:560px){.choices{grid-template-columns:1fr}}
.choice{display:flex;gap:14px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px;cursor:pointer;min-height:96px}
.choice:hover,.choice:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.choice svg{width:40px;height:40px;flex:none;padding:8px;border-radius:10px;background:var(--accent-soft);fill:var(--accent)}
.choice:hover svg{background:var(--surface)}
.choice>span{display:flex;flex-direction:column;gap:2px}
.choice b{font-size:17px;font-family:var(--f-display)}
.choice>span>span{color:var(--muted);font-size:14px}
.past-note{display:flex;gap:12px;align-items:flex-start;background:var(--ochre-soft);border-radius:8px;padding:12px 14px;font-size:14px}
.past-note svg{width:22px;height:22px;flex:none;fill:var(--ochre);margin-top:1px}
.past-note.slim{margin-bottom:18px}

/* password field with a show button */
.pwbox{position:relative}
.pwbox input{padding-right:72px}
.pwshow{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--sunk);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted)}
.codebox{font-size:22px;letter-spacing:.3em;max-width:220px}

/* photo */
.photo-pick{display:flex;gap:18px;align-items:center;background:var(--sunk);border-radius:var(--r);padding:16px;margin-bottom:20px;flex-wrap:wrap}
.photo-pick .hint{margin:8px 0 0}
.photo-frame{width:96px;height:112px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame svg{width:44px;height:44px;fill:var(--line)}
.photo-pick label.btn{display:inline-flex;align-items:center}
.photo-pick label.btn:has(+ input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.done-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.done-head svg,.done-card>svg{width:44px;height:44px;flex:none;border-radius:50%;padding:9px;background:var(--ok-soft);fill:var(--ok)}
.done-card>svg{width:60px;height:60px;padding:12px;margin-bottom:10px}
.done-card .lede{max-width:52ch;margin-inline:auto}

/* signed-in tabs */
.portal-tabs{margin-bottom:18px}
.courses{display:flex;flex-direction:column;gap:12px}
.course{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.course h3{font-size:18px;line-height:1.3}
.course .meta{margin:4px 0 0;color:var(--muted);font-size:14px}
.course .sum{margin:8px 0;font-size:15px}
.course a{font-size:14px}
.course .blocked{margin:10px 0 0;background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 10px;font-size:13px}
.course-act{flex:none}
@media (max-width:560px){.course{flex-direction:column}.course-act,.course-act .btn{width:100%}}
.appcard{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.appcard:first-of-type{border-top:0;margin-top:0;padding-top:0}
.appcard h3{font-size:18px}
.appcard h3 .meta{color:var(--muted);font-weight:400;font-size:15px}
.appcard .about{font-size:14px}
.timeline{list-style:none;margin:14px 0 0;padding:0 0 0 30px;position:relative}
.timeline::before{content:'';position:absolute;left:10px;top:6px;bottom:10px;width:2px;background:var(--line)}
.timeline li{position:relative;padding-bottom:16px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.timeline li.done::before{background:var(--accent);border-color:var(--accent)}
.timeline li.done.muted::before{background:var(--muted);border-color:var(--muted)}
.timeline li.cur::before{background:var(--ochre);border-color:var(--ochre);box-shadow:0 0 0 4px var(--ochre-soft)}
.timeline li b{display:block}
.timeline li p{margin:4px 0 0;color:var(--muted);font-size:14px}
.timeline .code{font-size:16px;letter-spacing:.12em;padding:3px 10px}
.timeline a.btn{margin-top:4px}
.psec{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.psec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.psec h3{font-size:14px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:14px}
@media (max-width:560px){
  .portal-top{padding-block:14px 12px;margin-bottom:18px}
  .portal-top .crest-img{width:34px;height:34px}
  .portal-top .brand{flex-wrap:nowrap}
  .portal-top .brand>div{border:0;padding:0}
  .portal-top .brand h1{font-size:18px}
  .portal-top .brand p .long{display:none}
  .portal-top .who{width:100%;justify-content:space-between}
  .portal-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
  .portal-tabs button{padding:10px 4px;font-size:14px;text-align:center}
}
.portal-tabs .ts{display:none}
@media (max-width:560px){
  .portal-tabs .tl{display:none}.portal-tabs .ts{display:inline}
  .portal-top .who{flex-wrap:nowrap;font-size:13px}
  .portal-top .who>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .portal-top .who .btn{flex:none}
}
.idstrip{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;background:var(--accent-soft);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px;color:var(--muted)}
.idstrip b{color:var(--fg)}
.idstrip b.mono{color:var(--accent);letter-spacing:.04em}
.gate{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;background:var(--ochre-soft);border:1px solid var(--ochre);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.gate>div{display:flex;flex-direction:column;gap:2px}
.gate span{color:var(--muted);font-size:14px}
@media (max-width:560px){.gate .btn{width:100%}}
.verify-box{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--warn-soft);border-radius:var(--r);padding:12px 14px;margin-bottom:16px}
.verify-box>.vb-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.verify-box>.vb-text span{font-size:14px;color:var(--muted)}
.verify-box .hint{flex-basis:100%;margin:0}
.verify-box .idrow{display:flex;gap:8px;align-items:center}
.verify-box .err{flex-basis:100%}
.codebox.sm{font-size:18px;max-width:150px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.stepper[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.stepper[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.pagehead{margin-bottom:18px}
.pagehead h1{font-size:28px;margin:0 0 4px}
.pagehead p{margin:0}

.course-thumb{flex:none;width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--sunk);border:1px solid var(--line)}
.course-thumb.ph{display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft)}
.course-main{flex:1;min-width:0}
@media (max-width:560px){.course{flex-direction:column}.course-thumb{width:100%;height:150px}}