/* The student's account. Same bones as the other two, a different colour so a
   screenshot is never mistaken for a staff screen, and larger text because
   this is the one screen read by people who are not using it every day. */
.stu .atop{background:#0e2333}
.stu .abrand .alogo{background:#14508f}
.stu .amain{max-width:760px}
.stu .card{font-size:15.5px}
.stu .card h2{font-size:18px;margin-top:0}
.stu .loginbox{max-width:430px;margin:48px auto;background:#fff;border:1px solid #dde6ee;
  border-radius:14px;padding:30px}
.stu .loginbox h1{margin:0 0 4px;font-size:24px}
.sdl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:12px 0 0;font-size:15px}
.sdl dt{font-weight:600;color:#41525f}
.sdl dd{margin:0}
.stu .afoot{margin-top:40px;padding:18px 0;border-top:1px solid #e3eaf1}
.stu .anav a.on{background:#14508f;color:#fff}
.stu .anav .badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;
  background:#fff;color:#14508f;font-size:12px;font-weight:700;text-align:center}
.msgrow{border-bottom:1px solid #edf1f5;padding:14px 0}
.msgrow:last-child{border-bottom:0}
.msgrow.unseen{border-left:4px solid #14508f;padding-left:12px}

/* 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}

/* What the student is on RIGHT NOW, in words, under the tick box. A checkbox
   alone does not tell somebody what they have agreed to - it tells them what
   is in a box, which is not the same thing when the subject is consent. */
.nowsay{margin-top:12px;background:#f3f7fb;border:1px solid #dde7f0;
  border-radius:9px;padding:11px 13px;font-size:14px;line-height:1.55}
.nowsay.isyes{background:#e4f6ea;border-color:#bfe4cb}

/* The student's own application form and the summary above it. The admin
   stylesheet is not loaded on these screens, so the few shared shapes are
   repeated here rather than pulled in - a student screen loading the staff
   stylesheet is a door nobody should have to think about. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14.5px;margin:6px 0 0}
.kv dt{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#5a6f80;align-self:center}
.kv dd{margin:0}
.gform .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap: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}

/* ---------------------------------------------------------------------------
   The student's own history: qualifications, jobs, and the months between.
   Release 46.
   --------------------------------------------------------------------------- */

.adder{margin-top:14px}
.adder summary{cursor:pointer;list-style:none}
.adder summary::-webkit-details-marker{display:none}
.adder summary::marker{content:""}

/* One entry per line, with its Remove button pushed to the end. Deliberately
   a list rather than a table: a student is reading this on a phone, and a
   table of seven columns on a phone is a horizontal scroll nobody finds. */
.rowlist{list-style:none;padding:0;margin:0 0 4px}
.rowlist li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.rowlist li:last-child{border-bottom:0}
.rowlist form{margin:0;flex:none}

.warnline{color:#8a5a10;font-weight:600;font-size:.93rem}

label.tick{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;
  font-weight:500;text-transform:none;letter-spacing:0}
label.tick input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0}

/* Release 60 - the staged application. */
.applist{margin:0;padding-left:20px;line-height:1.7}
.applist li{margin-bottom:10px}
.applysteps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.applysteps li{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--rule);border-radius:99px;padding:6px 13px}
.applysteps li b{display:grid;place-items:center;width:21px;height:21px;border-radius:99px;background:var(--rule);color:var(--ink-3);font-size:12px}
.applysteps li.done{color:var(--green-d)}
.applysteps li.done b{background:var(--green);color:#fff}
.applysteps li.now{color:var(--ink);border-color:var(--blue)}
.applysteps li.now b{background:var(--blue);color:#fff}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.55}
.tick input{margin-top:3px;flex:0 0 auto}
.declare{margin-top:14px;background:var(--amber-l);border-left:3px solid var(--amber);border-radius:0 10px 10px 0;padding:13px 15px}
.docs{list-style:none;margin:0;padding:0}
.docs li{padding:8px 0;border-top:1px solid var(--rule)}
.docs li:first-child{border-top:0}

/* Release 60. The apply screens ask questions in sentences, not in field
   labels: "Everything about your application goes here" shouted in capitals
   reads as an instruction barked at somebody who is already nervous. The
   card rule above uppercases every label; these put it back. */
.card .gform label,.gform label{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700;color:var(--ink)}
.card .gform label .small,.gform label .small{font-weight:400;text-transform:none;letter-spacing:0}
.card label.tick,label.tick{text-transform:none;letter-spacing:0;font-weight:400;font-size:14.5px;color:var(--ink)}

/* Release 61: the apply journey is mostly used on a phone, so its fields get
   the same treatment as the logins - 48px tall, 16px text on small screens so
   iOS does not zoom, and real space between the question and the box. */
.gform input,.gform select,.gform textarea{min-height:48px;padding:13px 15px;
  border:1.5px solid var(--rule);border-radius:12px;background:var(--surface);
  color:var(--ink);font-family:var(--fb);font-size:15px}
.gform textarea{min-height:110px;line-height:1.55}
.gform input:focus,.gform select:focus,.gform textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.gform label{margin-bottom:14px}
.tick input[type=checkbox]{width:22px;height:22px;min-height:22px}
@media (max-width:820px){
  .gform input,.gform select,.gform textarea{font-size:16px}
}

/* ------------------------------------------------- the way forward
   Release 62. A student with an application open was shown a report and no
   button. The four stages, where they are in them, and the one thing to
   press. Numbers rather than ticks for what is still to come, because a
   tick on an undone thing reads as a claim we have not earned. */
.jcard{border-left:4px solid #2563eb}
.jlist{list-style:none;margin:14px 0 18px;padding:0}
.jlist li{display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid #e8eef6}
.jlist li:last-child{border-bottom:0}
.jmark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:#e8eef6;color:#5b6b80}
.jlist .jdone .jmark{background:#16a34a;color:#fff}
.jlist .jnow .jmark{background:#2563eb;color:#fff}
.jlabel{flex:1 1 auto;font-weight:600}
.jlist .jwait .jlabel{font-weight:500;color:#5b6b80}
.jlist .jnow .jlabel{color:#13315c}
@media (max-width:620px){
  .jlist li{gap:10px;padding:11px 0}
  .jcard .btn{width:100%;justify-content:center}
}

/* ------------------------------------------- Release 65: upload first
   The journey starts with documents now, so the upload has to look like the
   obvious thing to do on a phone: one big target, many files at once. */
.upbox{border:2px dashed #9cc3ea;border-radius:16px;padding:18px;background:#f4f9ff;margin-top:14px}
.upbtn{display:block;cursor:pointer}
.upbtn span{display:block;font-weight:800;font-size:16px;margin-bottom:8px;color:var(--ink)}
.upbtn input[type=file]{width:100%;min-height:52px;padding:10px;border:1px solid #c9dcf0;
  border-radius:12px;background:#fff;font-size:15px}
.checklist{list-style:none;margin:8px 0 6px;padding:0}
.checklist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.checklist li:last-child{border-bottom:0}
.checklist li > span:nth-child(2){flex:1}
.checklist .ck{flex:0 0 28px;height:28px;border-radius:99px;display:grid;place-items:center;
  font-weight:800;background:#eef2f6;color:#6b7c8f}
.checklist li.ok .ck{background:var(--green);color:#fff}
.checklist li.todo .ck{background:#fff4e0;color:#b45309;border:1.5px solid #f5b453}
.checklist li.ok{color:var(--green-d)}
.docs li{display:block}
.docedit{margin-top:6px}
.docedit summary{cursor:pointer;color:var(--blue-d,#1f5f99);font-size:14px;font-weight:700;min-height:36px;display:inline-flex;align-items:center}
.also{border:0;padding:0;margin:10px 0}
.also .tick{margin:4px 0}
.finishbox{margin-top:22px;padding-top:16px;border-top:2px solid var(--rule)}
.cvfound{background:#effaf3;border:1.5px solid #9fdcb4;border-radius:16px;padding:16px;margin-top:16px}
.cvfound h2{margin-top:0}
.cvrow{border:1px solid #cfe9d8;border-radius:12px;background:#fff;padding:12px;margin:12px 0}
.cvrow .keep{font-weight:800}
.tag{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:800;padding:2px 8px;
  border-radius:99px;background:#e3f4ea;color:var(--green-d)}

/* The tools. Unni: a different colour, to make the student want to press it.
   Warm amber, which nothing else on these screens uses, with a gentle pulse
   until it has been pressed - and no pulse at all for anybody who has asked
   their device for less motion. */
.golinks{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 18px}
.golink{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:12px 22px;
  border-radius:999px;background:linear-gradient(135deg,#ffc35a,#ff8a1f);color:#3a1d00;
  font-weight:800;font-size:15.5px;text-decoration:none;
  box-shadow:0 6px 18px rgba(255,138,31,.38);animation:nudge 2.4s ease-in-out infinite}
.golink.alt{background:linear-gradient(135deg,#7fe0c2,#22b38a);color:#04281d;box-shadow:0 6px 18px rgba(34,179,138,.32)}
.golink:hover{transform:translateY(-1px);filter:saturate(1.1)}
.golink.seen{animation:none}
.golink.seen::after{content:"\2713";margin-left:4px}
@keyframes nudge{0%,100%{box-shadow:0 6px 18px rgba(255,138,31,.38)}50%{box-shadow:0 6px 26px rgba(255,138,31,.7)}}
@media (prefers-reduced-motion:reduce){.golink{animation:none}}
.gate{font-weight:700}
.gate input:disabled + span{color:var(--ink-3)}
.gatehint{display:none;margin:4px 0 0 30px}
.sources{border:0;padding:0;margin:0}
.sources .tick{margin:8px 0}
.howother{display:block;margin:6px 0 0 30px}
.applysteps li a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:7px}
@media (max-width:700px){
  /* The step pills became links back to finished steps in Release 65, and
     the walk measured them at 22px on a phone. */
  .applysteps li{min-height:44px;padding:0 13px;flex:0 0 auto;white-space:nowrap}
  .applysteps li a{min-height:44px}
  /* One row that scrolls sideways, not five rows a student scrolls past
     before reaching the upload. The step they are on is scrolled into view. */
  .applysteps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin-inline:-4px;padding:2px 4px 4px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .applysteps::-webkit-scrollbar{display:none}
}
@media (max-width:620px){
  .golink{width:100%;justify-content:center}
  .checklist li{font-size:14.5px}
}

/* ----------------------------------------- Release 66: show me how */
.showme{float:right;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 14px;margin:-4px 0 8px 12px;border-radius:999px;border:1.5px solid #f5b453;
  background:#fff7e8;color:#7a3e00;font-weight:800;font-size:14px;cursor:pointer}
.showme span{display:grid;place-items:center;width:22px;height:22px;border-radius:99px;
  background:#ff8a1f;color:#fff;font-size:13px}
.tour-ring{position:absolute;z-index:900;border-radius:12px;pointer-events:auto;
  box-shadow:0 0 0 4px #ffb547,0 0 0 9999px rgba(14,35,51,.55);transition:all .25s ease}
.tour-tip{position:absolute;z-index:901;background:#fff;color:var(--ink);border-radius:14px;
  padding:14px 16px;box-shadow:0 10px 30px rgba(14,35,51,.35);font-size:15px;line-height:1.5}
.tour-tip .tt{margin:0 0 10px}
.tour-tip .tr{display:flex;align-items:center;gap:8px}
.tour-tip .tn{flex:1;font-size:13px;color:var(--ink-3)}
.tour-tip button{min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid var(--rule);
  background:#fff;font-weight:700;cursor:pointer}
.tour-tip .tx{background:#1f6fb8;border-color:#1f6fb8;color:#fff}
.tour-tip .tc{font-size:22px;padding:0;width:44px}
.stuck{position:fixed;right:16px;bottom:16px;z-index:800;max-width:360px;background:#fff;
  border:1.5px solid #f5b453;border-radius:16px;padding:14px 16px 12px;
  box-shadow:0 10px 30px rgba(14,35,51,.25)}
.stuck p{margin:0 30px 10px 0}
.stuck .sa{display:flex;flex-wrap:wrap;gap:8px}
.stuck .sx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;
  font-size:24px;cursor:pointer;color:var(--ink-3)}
@media (max-width:620px){
  .stuck{left:12px;right:12px;bottom:12px;max-width:none}
  .showme{float:none;margin:0 0 12px}
}
@media (prefers-reduced-motion:reduce){.tour-ring{transition:none}}