/* Admin screens.
   Built on the site stylesheet so the two never drift apart in colour or type.
   Only what the staff screens add lives here. Light, like the rest of it. */

body.adm{background:var(--tint-b);min-height:100vh;display:flex;flex-direction:column}
.awrap{width:min(1280px,100% - 40px);margin-inline:auto}
.amain{flex:1;padding-block:26px 60px}

/* ---- top bar ---- */
.abar{background:var(--blue-xd);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 14px rgba(14,35,51,.18)}
/* The agent portal and the student screens use .atop rather than .abar, and
   only ever set its colour - so neither header was laid out at all. Both get
   the same shape here; a portal bar is not a different kind of object from a
   staff bar, it is the same bar in another colour. */
.abar .awrap, .atop .awrap{display:flex;align-items:center;gap:26px;
  min-height:58px;flex-wrap:wrap}
.atop{position:sticky;top:0;z-index:50;color:#fff;
  box-shadow:0 2px 14px rgba(14,35,51,.18)}
.atop .anav{flex:1}
.atop .ame{display:flex;align-items:center;gap:12px;margin-left:auto;color:#fff}
.atop .ame .small{opacity:.85}
.abrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.01em}
.abrand b{font-weight:500;opacity:.8}
.abar .brand-mark{width:28px;height:28px;border-radius:9px;background:var(--green);
  display:grid;place-items:center;flex:none}
.anav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.anav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;font-weight:700;
  padding:8px 14px;border-radius:9px}
.anav a:hover{background:rgba(255,255,255,.12);color:#fff}
.anav a.on{background:rgba(255,255,255,.17);color:#fff}
.aout{display:flex;align-items:center;gap:12px}
.aout .who{font-size:13.5px;color:rgba(255,255,255,.8);font-weight:700}
.abar .btn.b-out{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.abar .btn.b-out:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.afoot{border-top:1px solid var(--rule);background:var(--surface);padding-block:18px}
.afoot p{font-size:13px;color:var(--ink-3)}

/* ---- page furniture ---- */
.ahead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.ahead h1{font-size:clamp(1.5rem,3vw,2rem)}
.sub{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--blue);text-decoration:none;font-weight:700}
.flash{background:var(--green-l);border:1px solid #bde3b5;border-left:4px solid var(--green);
  border-radius:12px;padding:13px 17px;margin-bottom:20px;font-size:14.5px;color:var(--ink-2)}
.err-box{background:#fdecea;border:1px solid #f3c2bd;border-left:4px solid #c0392b;
  border-radius:12px;padding:13px 17px;margin-bottom:18px;font-size:14.5px;color:#7d2a20}
.empty{background:var(--surface);border:1px dashed var(--rule);border-radius:var(--r-lg);
  padding:52px 30px;text-align:center}
.empty h3{font-size:1.2rem}
.empty p{color:var(--ink-2);font-size:15px;margin-top:9px;max-width:52ch;margin-inline:auto}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}
.quote{border-left:3px solid var(--rule);padding-left:12px;font-style:italic;margin-top:8px}

/* ---- status pills and tags ---- */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-decoration:none}
.pill b{color:var(--ink);margin-left:4px}
.pill:hover{border-color:var(--blue);color:var(--blue)}
.pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.on b{color:#fff}

.tag{display:inline-block;font-size:12px;font-weight:800;border-radius:7px;padding:4px 10px;
  white-space:nowrap}
.tag.big{font-size:14px;padding:8px 16px}
.s-new{background:var(--amber-l);color:var(--amber)}
.s-contacted{background:var(--blue-l);color:var(--blue-d)}
.s-booked{background:var(--violet-l);color:var(--violet)}
.s-in_progress{background:var(--blue-l);color:var(--blue-d)}
.s-enrolled{background:var(--green-l);color:var(--green-d)}
.s-closed{background:var(--rule-2);color:var(--ink-3)}

/* ---- search ---- */
.search{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.search input{flex:1;min-width:220px;border:1.5px solid var(--rule);border-radius:12px;
  padding:12px 16px;font-family:var(--fb);font-size:15px;background:var(--surface);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}

/* ---- tables ---- */
.tablewrap{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-family:var(--fb);font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  padding:13px 16px;background:var(--rule-2);border-bottom:1px solid var(--rule)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--rule-2);font-size:14.5px;
  vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--blue-ll)}
.tbl tr.isnew td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.tbl tr.gone td{opacity:.55}
.tbl a{color:var(--blue);text-decoration:none}
.tbl a:hover{text-decoration:underline}
.ref{font-family:var(--fd);font-weight:800;white-space:nowrap}
.tbl code{font-size:12.5px;background:var(--rule-2);padding:2px 6px;border-radius:5px}

/* ---- detail ---- */
.dcols{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:20px;align-items:start}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--sh);margin-bottom:18px}
.card h3{font-size:1.05rem;margin-bottom:14px}
.card hr{border:none;border-top:1px solid var(--rule);margin:18px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14.5px}
.kv dt{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.kv dd{color:var(--ink)}
.kv a{color:var(--blue);text-decoration:none;font-weight:700}
.wa-sm{font-size:12.5px;background:#25D366;color:#0b2e18 !important;border-radius:6px;
  padding:3px 8px;font-weight:800;text-decoration:none}
.msg{margin-top:18px;background:var(--rule-2);border-radius:12px;padding:15px 17px;font-size:14.5px}
.msg p{margin-top:7px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
.notes{list-style:none;padding:0;display:grid;gap:14px}
.notes li{border-left:3px solid var(--blue);padding-left:14px}
.nmeta{font-size:12px;font-weight:800;color:var(--ink-3)}
.notes p{font-size:14.5px;color:var(--ink-2);margin-top:4px;line-height:1.6;white-space:pre-wrap}
.noteform{margin-top:18px;display:grid;gap:10px}

/* ---- forms ---- */
.card label,.lbox label{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.card input,.card select,.card textarea,.lbox input{width:100%;border:1.5px solid var(--rule);
  border-radius:12px;padding:12px 15px;font-family:var(--fb);font-size:15px;
  background:var(--surface);color:var(--ink)}
.card textarea{resize:vertical;line-height:1.55}
.card input:focus,.card select:focus,.card textarea:focus,.lbox input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.card .btn{margin-top:12px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.btn.b-red{background:#c0392b;color:#fff;border-color:#c0392b}
.btn.b-red:hover{background:#a33124;border-color:#a33124}
.erase{border-top:none}

/* ---- login ---- */
.login{display:grid;place-items:center;min-height:78vh;padding-block:30px}
.lbox{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:40px 38px;width:min(430px,100%);box-shadow:var(--sh-lg)}
.lbox h1{font-size:1.6rem;margin-top:16px}
.lbox .sub{margin-bottom:22px}
.lbox .brand-mark.big{width:44px;height:44px;border-radius:13px;background:var(--green);
  display:grid;place-items:center}
.lbox .fine{font-size:12.5px;color:var(--ink-3);margin-top:20px;line-height:1.55}

@media(max-width:900px){
  .dcols{grid-template-columns:1fr}
  .awrap{width:min(1280px,100% - 28px)}
  .tbl th,.tbl td{padding:11px 12px;font-size:13.5px}
}
.s-reviewing{background:var(--blue-l);color:var(--blue-d)}
.s-spoken{background:var(--violet-l);color:var(--violet)}
.s-agreement{background:var(--amber-l);color:var(--amber)}
.s-active{background:var(--green-l);color:var(--green-d)}
.s-declined{background:var(--rule-2);color:var(--ink-3)}
input.bad{border-color:#c0392b !important;box-shadow:0 0 0 3px #fdecea}
.err-box p + p{margin-top:4px}

/* Agents and candidates ---------------------------------------------------- */
.gform .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.gform label{display:block;font-weight:600;font-size:14px}
.gform input,.gform select,.gform textarea{width:100%;margin-top:5px;font-weight:400}
.consentbox{background:#f4f8fc;border:1px solid #d7e4ef;border-radius:10px;padding:14px;margin:14px 0}
.consentbox .ck{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin-bottom:10px}
.consentbox .ck:last-child{margin-bottom:0}
.consentbox .ck input[type="checkbox"]{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.codeline code{display:block;background:#0e2333;color:#fff;padding:11px 13px;border-radius:8px;
  font-size:14px;word-break:break-all}
.crumb{margin:0 0 6px}
.tag.s-submitted{background:#e6f0fb;color:#14508f}
.tag.s-registered{background:#e4f6ea;color:#1c6b38}
.tag.s-lapsed{background:#eceff2;color:#5a6b7a}
.tag.s-active{background:#e4f6ea;color:#1c6b38}
.tag.s-suspended{background:#fdf1e3;color:#8a5212}
.tag.s-terminated{background:#fdecea;color:#8f2019}
tr.muted td{opacity:.62}
details.card summary{cursor:pointer;font-size:16px;padding:2px 0}
.ck.ovr{display:flex;gap:10px;align-items:flex-start;background:#fdf6e8;border:1px solid #edd9b4;
  border-radius:9px;padding:12px;margin:0 0 14px;font-size:14px}
.ck.ovr input[type="checkbox"]{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.inlineform{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
details.inlineform{display:block}
details.inlineform>summary{list-style:none;cursor:pointer;display:inline-flex}
details.inlineform>summary::-webkit-details-marker{display:none}
details.inlineform[open]{display:block;margin-bottom:8px}
.tbl td.acts{vertical-align:top}
.tbl tr.resetrow td{border-top:0;padding-top:0}
.resetform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.resetform input[name=password]{flex:1 1 18rem;max-width:26rem;width:auto}
.resetform p{flex:1 1 100%;margin:2px 0 0;max-width:46rem}
.tbl td.acts .small{white-space:normal}
.inlineform input{width:auto}
.inv .invhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.inv .invhead h2{margin:0 0 4px;font-size:18px}
.invtotal{font-size:26px;font-weight:700;color:#14508f;white-space:nowrap}
.invacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid #edf1f5}
details.mini summary{cursor:pointer;font-size:14px;color:#14508f}
.ok{color:#1c6b38;font-weight:600}
.tag.s-raised{background:#fdf1e3;color:#8a5212}
.tag.s-approved{background:#e6f0fb;color:#14508f}
.tag.s-paid{background:#e4f6ea;color:#1c6b38}
.tag.s-rejected{background:#fdecea;color:#8f2019}
.tag.s-role-admin{background:#fdecea;color:#8f2019}
.tag.s-role-head_counsellor{background:#e6f0fb;color:#14508f}
.tag.s-role-counsellor{background:#eceff2;color:#41525f}
.photocell{min-width:120px}
.thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid #dde6ee;display:block}
.linkbtn{background:none;border:0;color:#14508f;text-decoration:underline;cursor:pointer;
  font-size:13px;padding:4px 0}
.photocell input[type="file"]{font-size:12px;max-width:150px}
.noticebody{white-space:pre-wrap;margin:6px 0 0;font-size:15px;line-height:1.55}
.card.retired{opacity:.62}
.notemuted{background:#f4f8fc;border:1px solid #d7e4ef;border-radius:10px;padding:12px 14px;
  font-size:14px;color:#41525f;margin:0 0 18px}
.anav .badge{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;
  border-radius:9px;background:#c0392b;color:#fff;font-size:12px;font-weight:700;
  text-align:center;line-height:18px}
.msg.unseen{border-left:4px solid #c0392b}
.receipt{background:#f4f8fc;border:1px solid #d7e4ef;border-radius:9px;padding:10px 12px;
  font-size:13.5px;margin:12px 0 0;color:#41525f}
.threadrow{border-left:3px solid #dde6ee;padding:6px 0 6px 12px;margin:10px 0}

/* --- Applications and testimonials ------------------------------------- */
/* Filter chips. A count on each, so somebody can see at a glance where the
   work is piling up without clicking through every stage. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  border:1.5px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:8px 14px;text-decoration:none;min-height:38px}
.chip b{font-weight:800;color:var(--ink-3)}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.on b{color:#fff}

.searchbar{display:flex;gap:10px;margin-bottom:16px}
.searchbar input{flex:1;font:inherit;font-size:15px;padding:11px 14px;
  border:1.5px solid var(--rule);border-radius:11px;background:var(--surface);color:var(--ink)}

/* Stage pills. Deliberately not a traffic-light scheme - a conditional offer
   is not a warning, and a withdrawal is not a failure. Only a refused visa and
   a withdrawal are tinted at all, because those are the two that need chasing. */
.pill{display:inline-block;font-size:12.5px;font-weight:800;border-radius:999px;
  padding:5px 12px;background:var(--blue-ll);color:var(--blue-d);white-space:nowrap}
.pill.s-draft,.pill.t-not_asked{background:#eef2f6;color:#52708a}
.pill.s-unconditional,.pill.s-visa_granted,.pill.s-enrolled,.pill.s-arrived,
.pill.t-received,.pill.t-published{background:var(--green-l);color:var(--green-d)}
.pill.s-visa_refused,.pill.s-withdrawn,.pill.t-declined{background:#fdecec;color:#9d2626}

/* The journey, shown as a row. The current stage is filled in; the rest are
   outlines, so it reads as a path rather than as a score. */
.steps{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.step{font-size:12px;font-weight:700;border:1.5px solid var(--rule);border-radius:999px;
  padding:6px 12px;color:var(--ink-3);background:var(--surface)}
.step.now{background:var(--blue);border-color:var(--blue);color:#fff}

.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pfgrid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:760px){.pfgrid,.pfgrid5{grid-template-columns:1fr}}
.pfgrid label,.pfgrid5 label{display:block;font-size:13px;font-weight:700;color:var(--ink-2)}
.pfgrid input,.pfgrid select,.pfgrid5 input,.pfgrid textarea{width:100%;font:inherit;font-size:15px;
  margin-top:5px;padding:10px 12px;border:1.5px solid var(--rule);border-radius:10px;
  background:var(--surface);color:var(--ink)}

.consentbox{background:var(--blue-ll);border:1.5px solid var(--rule);
  border-radius:12px;padding:14px 16px}
.consentbox p{margin:0 0 6px}
.consentbox p:last-child{margin-bottom:0}

/* Where people came from: a bar you can read at a glance, rather than a chart
   library for one screen. */
.bar{display:inline-block;height:10px;border-radius:99px;background:var(--blue);
  vertical-align:middle;margin-right:8px;min-width:2px;max-width:200px}
.tbl tfoot th{border-top:2px solid var(--rule);font-weight:800}
.pill.d-new{background:#eef2f6;color:#52708a}
.pill.d-accepted{background:var(--green-l);color:var(--green-d)}
.pill.d-rejected{background:#fdecec;color:#9d2626}

/* The agent's link and their QR code, side by side on a wide screen and
   stacked on a narrow one. The square sits on white whatever the card does,
   because a QR code on a tint is a QR code that sometimes will not scan. */
.linkcard{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
.linkcard .qrcard{text-align:center;width:max-content;max-width:230px}
.linkcard .qrcard .btn{width:100%;justify-content:center}
.linkcard .qrbox{display:inline-block;background:#fff;padding:10px;
  border:1px solid #e3eaf1;border-radius:10px;margin-bottom:10px}
.linkcard .qrbox svg{display:block}
.linkcard .qrcard p{margin:8px 0 0}
@media (max-width:760px){.linkcard{grid-template-columns:1fr}}

/* The submission confirmation. A page somebody prints or forwards to a
   family, so it is plain, large enough to read, and drops its buttons when
   it goes to paper. */
.subnote{max-width:720px}
.subhead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.subhead h1{margin:0 0 4px}
.subtick{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#e4f6ea;
  color:#1c6b38;font-size:25px;line-height:46px;text-align:center;font-weight:700}
.subnote .lead{font-size:17px;margin:16px 0 4px}
.subgrid{display:grid;grid-template-columns:minmax(10rem,auto) 1fr;gap:8px 18px;margin:18px 0 0}
.subgrid dt{color:#5a6b7a;font-size:14px}
.subgrid dd{margin:0}
.subnote .warn{background:#fdf0e3;border:1px solid #f0cfa4;border-radius:8px;padding:11px 13px}
@media print{.no-print{display:none}.subnote{max-width:none;border:0;box-shadow:none}}

/* The hidden attribute means hidden, whatever display the element was given.
   Without this a grid or a flex row keeps its display and ignores it, which
   is how the English band boxes stayed on screen for a pre-sessional course
   that has no bands. One rule, so it cannot happen again on another panel. */
[hidden]{display:none !important}

/* Why we hold a record somebody did not fill in a form to create. Set apart
   because it is the part of the screen a regulator would ask about. */
.basisbox{background:#f3f7fb;border:1px solid #dde7f0;border-radius:10px;padding:14px 15px}

/* Somebody we told we would come back to. It is on the list screen rather
   than only on the record, because a promise nobody can see is a promise
   nobody keeps. */
.waiting{display:block;margin-top:5px;max-width:19rem;line-height:1.35}

/* Staff bonuses. One block per enrolment, because the unit of thought is
   "this student enrolled, who gets what" rather than a flat list of payments. */
.bonusrow{border:1px solid #e3eaf1;border-radius:11px;padding:14px 15px;margin-top:14px}
.bonusrow.isreversed{border-color:#f0c4c4;background:#fdf5f5}
.bonushead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.inlineform{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.inlineform label{display:flex;gap:6px;align-items:center;font-size:14px;color:#5a6b7a}
.inlineform input{padding:7px 9px}
.sharetbl{margin:12px 0 0;background:#f7fafd}
.splitform{margin-top:12px;border-top:1px dashed #dde7f0;padding-top:12px}
.splitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:9px}
.splitone{display:flex;align-items:center;gap:8px;background:#f3f7fb;
  border:1px solid #dde7f0;border-radius:9px;padding:7px 10px;font-size:14px}
.splitone span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.splitone input[type=checkbox]{width:17px;height:17px;flex:0 0 17px}
.warn-box{background:#fdf6e6;border:1px solid #efd9a6;border-radius:10px;
  padding:12px 14px;margin:14px 0}
.warn-box p{margin:0}
.bad{color:#9c2c2c;font-weight:600}

/* Which release is actually running. There was no way to tell from inside the
   system, which is how a laptop ends up on one build while everybody assumes
   it is on another. */
.ver{margin-top:4px;font-size:12px;opacity:.75}

/* A student's video testimonial. Kept apart from the written one on the
   screen, because they are consented to separately and a counsellor should
   never be able to tick one while looking at the other. */
.vidbox{margin-top:16px;padding-top:14px;border-top:1px dashed #dde7f0}
.vidbox h4{margin:0 0 8px;font-size:14px}
.vidbox video{width:100%;max-width:380px;border-radius:10px;background:#0e2333;
  display:block;margin-bottom:8px}

/* ---------------------------------------------------------------------------
   The timeline: education rows, work rows, and the gaps between them.
   Release 46.
   --------------------------------------------------------------------------- */

/* A + button that opens a form, with no JavaScript. <details> does it, and a
   form that works with scripting switched off is a form that still works when
   somebody's office network eats a script. */
.adder{margin-top:14px}
.adder summary{cursor:pointer;list-style:none}
.adder summary::-webkit-details-marker{display:none}
.adder summary::marker{content:""}
.adder[open] summary{margin-bottom:4px}

.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

.b-xs{padding:5px 11px;font-size:.8rem;min-height:30px}
.b-ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.b-ghost:hover{background:#fff;color:var(--ink)}

/* A date somebody has not given us. Not an error - plenty of rows are typed
   from a certificate that has a year on it and nothing else - but it has to be
   visible, because a missing date is a hole in the gap calculation. */
.warnpill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;
  border-radius:999px;background:#fdf0d8;color:#8a5a10;white-space:nowrap}

.warnbox{background:#fdf4e8;border:1px solid #e8c89a;border-radius:10px;
  padding:12px 15px;margin-bottom:14px}
.warnbox p{margin:0;font-size:.92rem}
.warnline{color:#8a5a10;font-weight:600;font-size:.92rem}
.okline{color:#1a6b45;font-weight:600}

/* What was recorded before this screen existed. Visibly set apart, because it
   is not part of the timeline and nobody should read it as though it were. */
.oldnote{background:#f4f4f1;border-left:3px solid var(--rule);border-radius:0 8px 8px 0;
  padding:11px 15px;margin-top:14px}
.oldnote p{margin:0 0 .4em}
.oldnote p:last-child{margin:0}

/* The one-line answer against a gap. Sits inside a table cell, so it has to
   stay on one row and still be usable on a phone. */
.gapform{display:flex;gap:8px;align-items:center;margin:0}
.gapform input[name=reason]{flex:1 1 220px;min-width:0}

/* A checkbox and its words, on one line, with the box where a thumb can hit it.
   The page's label rule stacks a label's text above its control, which is right
   for a text box and wrong for a tick - it left the box floating on its own
   above the sentence it belonged to. */
label.tick{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;
  font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink)}
label.tick input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0}
label.tick span{font-weight:500}

/* ---- where we are, and your own notes ----------------------------------
   The board Unni asked for: open a home screen and see where things stand
   without clicking every menu to find out. Bright, like the rest of it. A
   number that wants attention is amber; a zero is good news and is never
   coloured, so a clean board really does look clean. */
.ovh{font-size:1.02rem;margin:0 0 10px;letter-spacing:.01em}
.ovh .muted{font-weight:500;font-size:.82rem;margin-left:8px}
/* The site stylesheet gives a bare <section> generous padding, which is right
   on a marketing page and leaves a hole on an admin screen. */
section.ov,section.notes{padding:0}
.ov{margin-bottom:22px}
.ovgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.ovcard{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.ovcard h3{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.ovcard h3 a{color:var(--ink-3);text-decoration:none}
.ovcard h3 a:hover{color:var(--blue)}
.ovcard ul{list-style:none;margin:0;padding:0}
.ovcard li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 0;
  border-top:1px solid var(--rule-2);font-size:.93rem}
.ovcard li:first-child{border-top:none}
.ovcard li a{color:var(--ink);text-decoration:none;flex:1 1 auto;min-width:0}
.ovcard li a:hover{color:var(--blue);text-decoration:underline}
.ovcard li span{flex:1 1 auto;min-width:0}
.ovcard li b{font-variant-numeric:tabular-nums;font-size:1.06rem;font-weight:800}
.ovcard li em{flex-basis:100%;font-style:normal;font-size:.82rem;color:var(--ink-3)}
.ovcard li.warn b{color:var(--amber)}
.ovcard li.warn{background:var(--amber-l);margin-inline:-16px;padding-inline:16px;
  border-radius:6px}

.notes{margin-bottom:24px}
.noteadd{display:flex;gap:8px;margin:0 0 10px}
.noteadd input{flex:1;min-width:0}
.notelist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.notelist li{background:var(--amber-l);border:1px solid var(--rule);border-radius:10px}
.notelist li form{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px}
.notelist li.done{background:var(--surface);border-color:var(--rule)}
.notelist li.done .noteBody{text-decoration:line-through;color:var(--ink-3)}
.noteBody{flex:1;font-size:.94rem}
.noteWhen{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.noteTick,.noteBin{background:none;border:none;cursor:pointer;font-size:1.05rem;
  line-height:1;padding:3px 5px;color:var(--ink-3)}
.noteTick:hover{color:#1a6b45}
.noteBin:hover{color:#a22}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* Putting right a link code that matched nobody. Sits inside the enquiry's
   detail list, so it has to stay narrow and still be usable on a phone. */
.creditfix{display:flex;gap:8px;align-items:center;margin:8px 0 4px}
.creditfix select{flex:1;min-width:0}

/* Changing what a note says, without deleting it and typing it again.
   Folded away until it is wanted, so the list still reads as a list. */
.notelist li form.noterow{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px}
.noteedit{padding:0 12px 10px 38px}
.noteedit summary{font-size:.78rem;color:var(--ink-3);cursor:pointer;
  list-style:none;display:inline-block;padding:2px 0}
.noteedit summary::-webkit-details-marker{display:none}
.noteedit summary:hover{color:var(--blue);text-decoration:underline}
.noteedit[open] summary{margin-bottom:6px}
.noteedit textarea{width:100%;font:inherit;padding:8px 10px;border-radius:8px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.noteedit button{margin-top:6px}

/* The enquiry list is no longer the page title, so its heading needs to look
   like a section heading rather than nothing at all. */
.listh{font-size:1.25rem;margin:0}

/* Correcting a row without retyping it. The panel is folded away inside the
   table cell, so the table still reads as a table until somebody wants to
   change something - and then it opens wide enough to work in. */
.rowacts{white-space:nowrap;vertical-align:top}
.rowedit{display:inline-block;margin-bottom:6px}
.rowedit summary{list-style:none;cursor:pointer;display:inline-flex}
.rowedit summary::-webkit-details-marker{display:none}
.rowedit[open]{display:block;position:relative;white-space:normal;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:14px;margin:6px 0 10px;min-width:min(520px,78vw)}
.rowedit[open] summary{margin-bottom:10px}

/* The student's own screen uses the same folded-away edit panel. Their rows
   are a list rather than a table, so it sits under the row instead of in a
   cell. */
.rowlist .rowacts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rowlist .rowedit[open]{width:100%;min-width:0;text-align:left}
.rowlist .rowedit[open] label{display:block;margin-bottom:8px}

/* An agent's query about an invoice, and the office's answer to it. */
.qrow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--rule)}
.qrow form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.s-open{background:var(--amber-l);color:var(--amber)}
.s-resolved{background:var(--green-l);color:var(--green)}
.s-declined{background:var(--rule-2);color:var(--ink-3)}

/* Release 56: a candidate whose agent is not approved yet must say so,
   rather than showing a dash that reads as "nobody introduced them". */
td .warn{color:#9a5b12;font-weight:700}

/* Release 57: where the student actually is, under the claim status. */
.stagenow{margin-top:5px;font-weight:700;color:var(--blue)}

/* Release 57 - the agent board, same markup as the portal. */
.board h2{margin:0 0 6px}
.board .guide{margin:0 0 14px;color:var(--ink-3);font-size:14px}
.pipeline{display:flex;flex-wrap:wrap;gap:10px}
.pcell{flex:1 1 150px;min-width:150px;background:#f3f7fa;border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.pcell b{display:block;font-size:26px;line-height:1.1}
.pcell span{display:block;font-size:13px;font-weight:700;color:var(--ink-2)}
.pcell .pnames{margin-top:6px;font-size:12px;color:var(--ink-3);line-height:1.45}
.pcell.pnone{border-style:dashed}
.needs{list-style:none;margin:0;padding:0}
.needs li{padding:10px 0;border-top:1px solid var(--rule)}
.needs li:first-child{border-top:0}
.needs li.warn a{color:#9a5b12}
.mgrid{display:flex;flex-wrap:wrap;gap:16px}
.mgrid>div{flex:1 1 140px}
.mgrid b{display:block;font-size:22px;line-height:1.15}
.mgrid span{display:block;font-size:13px;color:var(--ink-3)}
.activity{list-style:none;margin:0;padding:0}
.activity li{padding:7px 0;border-top:1px solid var(--rule);font-size:14px}
.activity li:first-child{border-top:0}

/* ---------------------------------------------------------------------------
   Forms you can actually use on a phone. Release 61.

   Unni, after an agent said so: "on agents login banner sees more than writing
   spaces so mindul of giving enough space for typing and looks good and
   professional."

   He was right, and measuring it showed why. The login boxes use .loginbox,
   which never picked up the input styling that .card has - so the fields were
   about 30px tall with almost no padding, while the explanatory text above
   and below them took up as much room as the form itself.

   Three things here:

   1. .loginbox finally gets the same field styling as everything else.
   2. Nothing you tap is under 44px, which is Apple's own minimum and about
      the width of an adult fingertip.
   3. Fields are 16px on small screens. Under 16px, iOS zooms the page in when
      you tap a field, and that lurch is a large part of what makes a site
      feel amateur on a phone. It is not a detail.
   --------------------------------------------------------------------------- */

.loginbox input,.loginbox select,.loginbox textarea{
  width:100%;border:1.5px solid var(--rule);border-radius:12px;
  padding:13px 15px;font-family:var(--fb);font-size:15px;
  background:var(--surface);color:var(--ink);min-height:48px}
.loginbox input:focus,.loginbox select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.loginbox label{display:block;font-weight:700;font-size:14px;color:var(--ink);
  text-transform:none;letter-spacing:0}
.loginbox label + label{margin-top:16px}
/* Space between the reading and the typing. Without it the eye cannot tell
   where the explanation stops and the form starts. */
.loginbox form{margin-top:20px}
.loginbox .sub{margin-bottom:4px}
.loginbox .btn{min-height:50px}

/* Nothing tappable below 44px, anywhere. */
.btn{min-height:44px}
.btn.b-sm{min-height:40px}

@media (max-width:820px){
  input,select,textarea,
  .card input,.card select,.card textarea,
  .loginbox input,.loginbox select,.loginbox textarea,
  .gform input,.gform select,.gform textarea{font-size:16px}
  .loginbox{padding:22px 20px}
}

/* Release 61. A message that reports a failure must not look like a success.
   The apply journey flashed "choose a password of at least 12 characters"
   into the same green box used for "Saved", so somebody read it as
   confirmation, could not sign in afterwards, and had no way to know why. */
.flash.flash-bad{background:#fdeceb;border-color:#f3c3bf;border-left-color:#c0392b;
  color:#8c2a1f}

/* ---------------------------------------------- the bar on a phone
   Release 62. Measured on a 360px phone, the sticky header was taking 197px
   of 780 - a quarter of the screen, permanently, on every screen a student
   or an agent uses. It happened because the bar was laid out for a desktop
   and simply allowed to wrap: brand on one line, each nav item on its own,
   name and Sign out on a third.

   Below 700px it becomes two tight rows - who you are and the way out on
   top, where to go underneath - and the name is dropped, because somebody
   signed in on their own phone does not need to be told whose account it
   is. Tap targets stay at 44px; this is about height, not about making
   things small enough to miss. */
@media (max-width:700px){
  .abar .awrap, .atop .awrap{gap:8px 10px;min-height:0;padding-block:8px;
    align-items:center}
  .abrand{font-size:15px;gap:8px;order:1;margin-right:auto}
  .atop .ame, .aout{order:2;gap:8px;margin-left:0}
  .atop .ame .small, .aout .who{display:none}
  /* .atop .anav{flex:1} is more specific than .anav, so this has to be
     written the same way or the nav never gets its own row. */
  .atop .anav, .abar .anav{order:3;flex:1 0 100%;gap:2px;overflow-x:auto;
    flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .anav::-webkit-scrollbar{display:none}
  /* The office bar has nine items and they will not fit on a phone, so the
     row scrolls. A row that scrolls with no sign that it scrolls is a row
     whose last three items do not exist, so it fades at the edge. */
  .atop .anav, .abar .anav{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .atop .anav{padding-right:12px}
  .abrand b, .abrand .muted{display:none}       /* "your account" - they know */
  /* 44px, not 38. The first attempt at this traded tap size for height and
     the browser walk caught it: every nav item, the wordmark and Sign out
     came out at 25-41px. Two rows of 44 is still half what the wrapped
     desktop bar was costing, and nothing has to be aimed at. */
  .anav a{font-size:14px;padding:0 12px;white-space:nowrap;
    display:inline-flex;align-items:center;min-height:44px}
  .atop .btn.b-sm, .abar .btn.b-sm, .atop .btn, .abar .btn{
    min-height:44px;padding:9px 16px}
  .abrand{min-height:44px;align-items:center}
}

/* --------------------------------- things you press, on a phone
   Release 62. Found by the browser walk, not by eye: filter pills at 32px,
   small buttons at 41px, the links on a board row at 24px, and a "Forgotten
   your password?" sitting on its own line at 16px. All fine with a mouse.
   All a nuisance with a thumb, on exactly the screens our agents use most.

   44px is the figure the accessibility guidance gives and it is not
   arbitrary - it is roughly the pad of an adult thumb. Links inside a
   sentence are deliberately left alone: making those 44px tall would wreck
   the sentence, and the guidance exempts them for that reason. */
@media (max-width:700px){
  .btn, .btn.b-sm{min-height:44px;padding:10px 16px}
  .pills{gap:10px}
  .pills .pill{min-height:44px;display:inline-flex;align-items:center;
    padding:0 16px}
  .chips a, .chips .pill{min-height:44px;display:inline-flex;
    align-items:center}
  /* a card title that is a link is a link, however heading-like it looks */
  .ovcard h3{min-height:44px;display:flex;align-items:center;margin:0 0 4px}
  .ovcard h3 a{display:flex;align-items:center;min-height:44px}
  /* a board row is the target, not the four words inside it */
  .ov ul li{min-height:44px}
  .ov ul li > a, .ov ul li > span:first-child{display:flex;align-items:center;
    align-self:stretch;min-height:44px}
  /* a link alone on its line is a button in everything but appearance */
  .loginbox p.small > a:only-child{display:inline-flex;align-items:center;
    min-height:44px}
  .noteadd{gap:10px}
  .noteadd input{min-height:44px}
  .noteTick, .noteBin{min-width:44px;min-height:44px}
}

/* --------------------------------- the office, on a phone (Release 65)
   Until Release 65 the browser walk never reached the office screens: a new
   office account is sent to "set your password" first, and the walk only
   ever measured that page. Once it got in, it found these, all fine with a
   mouse and all too small for a thumb. */
@media (max-width:700px){
  a.pill, .pill[href]{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .crumb a, .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .linkbtn{min-height:44px;padding:0 6px}
  td a.ref, td > a:only-child{display:inline-flex;align-items:center;min-height:44px}
  .listh + p.small a, p.small > a.showall{display:inline-flex;align-items:center;min-height:44px}
}