/* ============================================================================
   portal.css - the student portal and the pages around the exam.

   The palette, the two faces and the shadow language are taken from the exam
   stylesheets rather than chosen again, so the portal and the papers read as
   one product. Fraunces for display, Public Sans for everything else, navy
   #0A2240 as the ink and the gold #B9922E reserved for one thing only: a
   result that passed. Nothing decorative is ever gold, so gold always means
   something.
   ========================================================================== */

:root{
  --ink:#0A2240;
  --ink-soft:#33507A;
  --blue:#1467B3;
  --blue-deep:#0E4E8C;
  --sky:#EAF3FC;
  --sky-line:#CFE1F4;
  --paper:#FBFCFE;
  --card:#FFFFFF;
  --line:#DCE6F2;
  --gold:#B9922E;
  --gold-soft:#F4EBD3;
  --green:#1E7F4F;
  --green-soft:#E7F4EC;
  --red:#B3372E;
  --red-soft:#FBEBE9;
  --radius:14px;
  --shadow:0 10px 30px rgba(10,34,64,.08);
  --shadow-sm:0 2px 10px rgba(10,34,64,.06);
  --shadow-lg:0 22px 60px rgba(10,34,64,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--blue)}
.serif{font-family:'Fraunces',Georgia,serif}

/* ------------------------------------------------------------------ nav */
.pnav{background:var(--ink); color:#fff; flex:0 0 auto}
.pnav__in{
  max-width:1080px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:22px;
}
.pnav__brand{display:flex; align-items:center}
.pnav__brand img{height:26px; width:auto; display:block}
.pnav__links{margin-left:8px; display:flex; gap:18px}
.pnav__links a{color:#C7DCF3; text-decoration:none; font-size:14.5px; font-weight:600}
.pnav__links a:hover{color:#fff}
.pnav__who{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px; color:#C7DCF3}
.pnav__who span{font-weight:600; color:#fff}
.pnav__out{
  color:#C7DCF3; text-decoration:none; font-size:13.5px; font-weight:600;
  border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:6px 13px;
  margin-left:auto;
}
.pnav__who .pnav__out{margin-left:0}
.pnav__out:hover{background:rgba(255,255,255,.12); color:#fff}
.pnav--min .pnav__in{padding:10px 22px}

/* ---------------------------------------------------------------- footer */
.pfoot{margin-top:auto; border-top:1px solid var(--line); background:#fff; flex:0 0 auto}
.pfoot__in{max-width:1080px; margin:0 auto; padding:22px; color:var(--ink-soft); font-size:13px}
.pfoot__fine{margin-top:6px; font-size:12px; color:#7C90AC; max-width:70ch}

/* ============================================================ auth pages */
.auth__wrap{
  flex:1 1 auto; display:flex; align-items:flex-start; justify-content:center;
  padding:42px 22px 70px;
  background:radial-gradient(900px 420px at 50% -14%, var(--sky), transparent 62%), var(--paper);
}
.auth__card{
  width:100%; max-width:620px; background:var(--card);
  border:1px solid #E2E9F2; border-radius:20px; padding:36px 38px;
  box-shadow:var(--shadow-lg);
}
.auth__kicker{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
}
.auth__h{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(25px,3.4vw,33px); line-height:1.16; margin:9px 0 10px;
  letter-spacing:-.01em;
}
.auth__h em{font-style:italic; color:var(--blue-deep)}
.auth__lede{color:var(--ink-soft); font-size:15.5px; line-height:1.6; max-width:52ch}

.auth__tabs{display:flex; gap:0; margin:26px 0 24px; border-bottom:1px solid var(--line)}
.auth__tab{
  padding:11px 2px; margin-right:26px; text-decoration:none;
  font-size:14.5px; font-weight:700; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.auth__tab.is-on{color:var(--ink); border-bottom-color:var(--blue)}

.auth__form{display:flex; flex-direction:column; gap:16px}
.auth__alert{
  background:var(--red-soft); border:1px solid #F0CFCB; color:#8A2A23;
  border-radius:10px; padding:11px 14px; font-size:14px; font-weight:600;
}
.auth__swap{font-size:14px; color:var(--ink-soft)}
.auth__fine{font-size:12.5px; color:#7C90AC; line-height:1.6}

/* ---------------------------------------------------------------- fields */
.fld{display:flex; flex-direction:column; gap:6px}
.fld__row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fld__l{font-size:13px; font-weight:700; color:var(--ink)}
.fld__l i{font-style:normal; font-weight:400; color:#8FA3BD; margin-left:5px; font-size:12px}
.fld__i{
  font-family:'Public Sans',sans-serif; font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; width:100%; transition:border-color .15s, box-shadow .15s;
}
.fld__i:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,103,179,.14)}
.fld__hint{font-size:12px; color:#8FA3BD}
.fld__err{font-size:12.5px; color:var(--red); font-weight:600}
.fld__group{
  margin-top:8px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.fld__group i{
  display:block; font-style:normal; font-weight:400; letter-spacing:0;
  text-transform:none; color:#8FA3BD; font-size:12.5px; margin-top:3px;
}

/* --------------------------------------------------------------- buttons */
.btn-solid{
  font-family:'Public Sans',sans-serif; font-size:16px; font-weight:600;
  background:linear-gradient(180deg,#2E86D8,#1467B3); color:#fff;
  border:none; border-radius:12px; padding:15px 28px; cursor:pointer;
  box-shadow:0 10px 26px rgba(20,103,179,.34), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(20,103,179,.44)}
.btn-solid:focus-visible{outline:3px solid #6FB4EE; outline-offset:3px}
.btn-gold{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Public Sans',sans-serif; font-size:16px; font-weight:800;
  background:linear-gradient(135deg,#F5DC8E,#E9C567); color:#20180A;
  border:none; border-radius:13px; padding:15px 28px; cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(185,146,46,.36);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(185,146,46,.46)}
.btn-quiet{
  display:inline-block; font-family:'Public Sans',sans-serif; font-size:14.5px;
  font-weight:600; background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:11px; padding:12px 22px;
  cursor:pointer; text-decoration:none;
}
.btn-quiet:hover{border-color:#A9C8E8}

@media (max-width:640px){
  .auth__card{padding:24px 20px}
  .fld__row{grid-template-columns:1fr}
  .pnav__links{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ========================================================== portal screens
   One card, because the portal answers one question: what do I do next.
   The card's edge colour carries the state, so the answer is legible before
   a word is read - navy for the offer, amber mid-sitting, green passed,
   red short of the line. */
.pmain{flex:1 1 auto; padding:42px 22px 70px}
.pmain__in{max-width:760px; margin:0 auto}
.pkick{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
}
.ph1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em;
  font-size:clamp(27px,3.6vw,36px); line-height:1.14; margin:8px 0 26px;
}

.card{
  background:var(--card); border:1px solid #E2E9F2; border-radius:20px;
  padding:32px 34px; box-shadow:var(--shadow-lg);
  border-top:4px solid var(--blue);
}
.card--warn{border-top-color:var(--gold)}
.card--pass{border-top-color:var(--green)}
.card--fail{border-top-color:var(--red)}
.card__k{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.card--warn .card__k{color:#8A6D1F}
.card--pass .card__k{color:var(--green)}
.card--fail .card__k{color:var(--red)}
.card__h{
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(21px,2.7vw,27px); line-height:1.2; margin:8px 0 14px;
}
.card__p{color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:62ch}
.card__p--tight{
  margin-top:18px; padding:14px 16px; background:var(--sky);
  border-left:3px solid var(--blue); border-radius:0 10px 10px 0; font-size:14.5px;
}
.card__p + .card__p{margin-top:12px}
.card__cta{margin-top:26px}

/* The rules, stated before they commit rather than discovered afterwards. */
.rules{list-style:none; margin:22px 0 0; display:flex; flex-direction:column; gap:11px}
.rules li{
  position:relative; padding-left:26px; font-size:15px; line-height:1.6;
  color:var(--ink-soft);
}
.rules li::before{
  content:""; position:absolute; left:6px; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.rules b{color:var(--ink)}

/* ------------------------------------------------------------- the scores */
.scores{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0 22px}
.score{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; text-align:center;
}
.score b{
  display:block; font-family:'Fraunces',Georgia,serif; font-size:38px;
  font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.score span{
  display:block; margin-top:5px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.score i{display:block; margin-top:7px; font-style:normal; font-size:13px; font-weight:600; color:var(--red)}
.score.is-at{background:var(--green-soft); border-color:#BFE3CD}
.score.is-at b{color:var(--green)}
.score.is-at i{color:var(--green)}

@media (max-width:640px){
  .card{padding:22px 18px}
  .scores{grid-template-columns:1fr}
  .pmain{padding:26px 16px 50px}
}

/* ------------------------------------------------- the commitment questions
   Radio buttons drawn as pickable rows rather than bare dots, because the
   answer is a choice between four real positions and each one needs room to
   be read. The whole row is the target, so it works with a thumb. */
.chx{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.chx legend{margin-bottom:4px; padding:0}
.chx__o{
  display:flex; align-items:center; gap:11px;
  border:1.5px solid var(--line); border-radius:11px; padding:11px 14px;
  cursor:pointer; font-size:14.5px; color:var(--ink);
  transition:border-color .15s, background .15s;
}
.chx__o:hover{border-color:#A9C8E8; background:#F7FBFF}
.chx__o input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--sky-line); background:#fff; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.chx__o input:checked{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 4px var(--blue);
}
.chx__o:has(input:checked){border-color:var(--blue); background:var(--sky)}
.chx__o:focus-within{outline:3px solid rgba(20,103,179,.25); outline-offset:1px}

/* The logo on the navy bar. The file is a dark wordmark, so on navy it needs
   the light one; height alone is not enough because the source is wide and
   was being squeezed by the flex row. */
.pnav__brand img{height:26px; width:auto; max-width:none; flex:none; object-fit:contain}