/* MedicomSkills — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=DM+Mono:wght@400;500&display=swap');

:root{
  --bone:#F3F2EC; --ink:#16242E; --ink2:#55606E; --line:#E1DED5; --card:#FCFBF7;
  --teal:#1F6B6E; --teal-deep:#134B4D; --teal-tint:#E0ECEA;
  --clay:#BE6155; --clay-tint:#F2DDD8; --sage:#5E7F5C;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Zen Kaku Gothic New',system-ui,-apple-system,sans-serif;background:var(--bone);
  color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.mono{font-family:'DM Mono',ui-monospace,monospace}

/* brand mark */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:18px;color:var(--ink)}
.brand-mark{width:26px;height:26px;border-radius:8px;background:var(--teal);position:relative;flex:0 0 auto}
.brand-mark::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:2px;background:#fff;
  box-shadow:-4px 0 0 #fff, 4px 0 0 #fff; border-radius:2px}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;
  border-bottom:1px solid var(--line);background:var(--card)}
.topbar-right{display:flex;align-items:center;gap:12px}
.who{font-size:14px;color:var(--ink2);font-weight:600}

/* buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--teal);color:#fff;
  font-weight:700;font-size:14px;border:1px solid var(--teal);cursor:pointer;transition:.15s}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn.ghost{background:transparent;color:var(--teal-deep);border-color:var(--line)}
.btn.ghost:hover{background:var(--bone)}
.btn.big{padding:14px 26px;font-size:16px;border-radius:12px}

/* hero */
.hero{max-width:760px;margin:0 auto;padding:72px 24px;text-align:center}
.hero h1{font-size:44px;line-height:1.1;font-weight:900;margin:12px 0 18px;letter-spacing:-.01em}
.hero .lede{font-size:18px;color:var(--ink2);max-width:560px;margin:0 auto 30px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ekg{display:block;width:200px;height:44px;margin:44px auto 0;opacity:.9}

/* auth pages */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:30px 28px;box-shadow:0 12px 40px rgba(22,36,46,.06)}
.auth-card .brand{margin-bottom:18px}
.auth-card h1{font-size:24px;font-weight:900;margin:0 0 4px}
.auth-card .sub{color:var(--ink2);font-size:14px;margin:0 0 22px}
label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:14px}
label .hint{font-weight:400;color:var(--ink2);opacity:.8}
/* Text-entry fields only. Checkboxes and radios are excluded deliberately:
   width:100% on a checkbox makes Chrome stretch the control to the full width
   of its container and centre the little box inside it, which then squeezes the
   label text beside it down to a one-character column. */
input:not([type=checkbox]):not([type=radio]){
  display:block;width:100%;margin-top:6px;padding:11px 13px;font-size:15px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit}
input:not([type=checkbox]):not([type=radio]):focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
input[type=checkbox],input[type=radio]{width:auto;margin-top:0;accent-color:var(--teal)}
.auth-card .btn{width:100%;margin-top:6px;padding:12px}
.switch{text-align:center;font-size:13.5px;color:var(--ink2);margin:18px 0 0}

/* alerts */
.alert{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px;font-weight:600}
.alert.error{background:var(--clay-tint);color:#8f3a2f}
.alert.success{background:var(--teal-tint);color:var(--teal-deep)}

/* dashboard */
.page{max-width:900px;margin:0 auto;padding:30px 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.welcome h1{font-size:28px;font-weight:900;margin:6px 0 8px}
.welcome .sub{color:var(--ink2);font-size:15px;max-width:560px;margin:0 0 24px}
.placeholder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ph{border:1px dashed var(--line);border-radius:12px;padding:16px;background:var(--bone)}
.ph strong{display:block;font-size:15px}
.ph span{font-size:12px;color:var(--ink2);font-family:'DM Mono',monospace}

@media(max-width:560px){
  .hero h1{font-size:32px}
  .placeholder-grid{grid-template-columns:1fr}
}


/* ================= the encounter block pages =====================
   Objective, Assessment, Plan and Notes. These were four pages that had
   each grown their own copy of the same card styles — three identical
   blocks and one page with none — so they drifted apart and none of them
   matched the interview page a student had just come from.

   Defined once here. Any block page gets the treatment by using the
   class names, and a change lands on all four. */

.blockhead{display:flex;gap:18px;align-items:flex-start;margin:8px 0 22px}
.blockhead .bh-ic{flex:0 0 auto;width:54px;height:54px;border-radius:15px;background:var(--teal-tint);
                  color:var(--teal-deep);display:grid;place-items:center}
.blockhead .bh-ic svg{width:27px;height:27px}
.blockhead .bh-txt{flex:1;min-width:0}
.blockhead .bh-kicker{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
                      text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.blockhead h1{font-size:27px;font-weight:900;letter-spacing:-.01em;margin:0 0 8px;line-height:1.2}
.blockhead p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0;max-width:70ch}

/* The SOAP letter, named the same way it is on the dashboard and the
   landing page, so a student meets one vocabulary rather than three. */
.blockhead .bh-letter{position:absolute;font-size:0;width:0;height:0;overflow:hidden}
.bh-badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
          background:var(--teal-deep);color:#fff;font-size:14px;font-weight:900;margin-right:9px;
          vertical-align:-4px}

/* ---- how do you want to do this ---- */
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.modecard{display:block;text-align:left;border:1px solid var(--line);border-radius:16px;
          padding:22px 24px;background:var(--card);cursor:pointer;font-family:inherit;
          position:relative;overflow:hidden;
          transition:border-color .15s, transform .15s, box-shadow .15s}
.modecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
                  background:var(--teal);opacity:0;transition:opacity .15s}
.modecard:hover{border-color:var(--teal);transform:translateY(-1px);
                box-shadow:0 10px 26px rgba(22,36,46,.08)}
.modecard:hover::before{opacity:1}
.mc-title{display:block;font-weight:900;font-size:17.5px;line-height:1.3;margin-bottom:8px;
          color:var(--ink)}
.mc-sub{display:block;color:var(--ink2);font-size:13.5px;line-height:1.6}
.modecard .mc-rule{display:block;width:38px;height:2px;background:var(--teal);border-radius:2px;
                   margin:0 0 10px}

/* The work area, so a long form does not run edge to edge. */
.blockpanel{background:var(--card);border:1px solid var(--line);border-radius:16px;
            padding:22px 24px;margin-top:18px}
.blockpanel h2{font-size:17px;font-weight:800;margin:0 0 12px}

@media(max-width:640px){
  .mode-cards{grid-template-columns:1fr}
  .blockhead{gap:14px}
  .blockhead .bh-ic{width:44px;height:44px;border-radius:12px}
  .blockhead .bh-ic svg{width:22px;height:22px}
  .blockhead h1{font-size:22px}
}



/* ============================================================
   SHARED PAGE VOCABULARY

   These rules used to be copied into the <style> block of every page
   that needed them, and copies drift: .wrap had eight different
   definitions across twelve pages, .lede five across six. Nothing
   looked broken, which is the problem — divergence only shows up the
   day two pages are meant to match and do not.

   A page that genuinely needs a different value overrides it below, in
   its own <style>, as a one-line delta. What is here is only what the
   pages already agreed on.

   Deliberately class-only. Lifting a bare h1, table, th, td or textarea
   would opt in every page that uses the element and never asked for the
   styling — which is how the checkbox bug happened.
   ============================================================ */
.wrap{max-width:820px;margin:0 auto;padding:22px 18px 90px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--bone);border:1px solid var(--line);color:var(--ink2)}
.tag.ok{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}
.tag.warn{background:var(--clay-tint);border-color:var(--clay);color:#8f3a2f}
.fld{display:flex;flex-direction:column;gap:4px}
.fld > span{font-size:12px;font-weight:700;color:var(--ink2)}
.fld input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.fld select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.grow{flex:1;min-width:240px}
.btnrow{display:flex;gap:10px;align-items:center;margin-top:12px}
.notice{background:var(--teal-tint);border:1px solid var(--teal);color:var(--teal-deep);padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:600}
/* A notice long enough to be a paragraph, and one that carries a
   warning. text-align:start and border-inline-start rather than left,
   so the rule stays on the side the language begins from instead of
   trailing the text in Arabic. */
.notice{text-align:start}
.notice p{margin:0;font-weight:400}
.notice p + p{margin-top:.5em}
.notice a{color:var(--teal-deep);text-decoration:underline}
.notice.long{font-size:15px;font-weight:400;line-height:1.6;padding:16px 20px;
  border-inline-start-width:3px}
.notice.warn{background:var(--clay-tint);border-color:var(--clay);color:var(--ink)}
.notice.warn a{color:var(--clay)}
.muted{color:var(--ink2)}
.qblock{margin:16px 0}
.qblock label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.qblock .hint{font-weight:400;color:var(--ink2);font-size:13px}
.vignette{background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:16px 18px;white-space:pre-wrap;font-size:14px;line-height:1.5;margin:14px 0}
.report{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;white-space:pre-wrap;font-size:14px;line-height:1.55;margin-top:16px}
.visit{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px;background:var(--card);cursor:pointer;font-family:inherit;font-size:14px}
.visit:hover{border-color:var(--teal)}
.casebtn{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.casebtn span{display:block;font-weight:400;font-size:12.5px;color:var(--ink2);margin-top:2px}
.casebtn:hover{border-color:var(--teal)}
.doorcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.pos{font-weight:900;font-size:12px;color:var(--teal-deep);background:var(--teal-tint);border-radius:20px;padding:3px 11px}



/* ============================================================
   THE REPORT

   Shared by every block that marks a student. The old panel was one
   <pre> of plain text: complete, correct, and read by nobody past the
   first screen. These rules exist to make the five sections findable
   at a glance and to give the mark somewhere to land.

   Restrained on purpose. This page tells people they fell short; a
   surface that is pleased with itself while doing that reads badly.
   Colour carries meaning here and nothing else — teal for what worked,
   clay for what did not, and no third accent for decoration.
   ============================================================ */
.rp{display:grid;gap:14px;margin-top:18px}
.rp-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}

/* section headers ------------------------------------------------ */
.rp-head{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
.rp-ic{width:22px;height:22px;flex:0 0 22px;margin-top:2px;color:var(--teal)}
.rp-head h2{font-size:17px;font-weight:900;margin:0;letter-spacing:-.01em}
.rp-sub{color:var(--ink2);font-size:13px;margin:3px 0 0;max-width:64ch;line-height:1.5}

/* the mark ------------------------------------------------------- */
.rp-gradecard{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.rp-grade{position:relative;width:132px;height:132px;flex:0 0 132px}
.rp-dial{width:132px;height:132px;transform:rotate(-90deg)}
.rp-track{fill:none;stroke:var(--line);stroke-width:9}
.rp-fill{fill:none;stroke:var(--teal);stroke-width:9;stroke-linecap:round}
.band-fair .rp-fill{stroke:#B08A3E}
.band-work .rp-fill{stroke:var(--clay)}
.rp-dialnum{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.rp-dialnum strong{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1}
.rp-dialnum span{font-size:11px;color:var(--ink2)}
.rp-gradetext{flex:1;min-width:250px}
.rp-gradetext h1{font-size:23px;font-weight:900;margin:0 0 5px;letter-spacing:-.02em}
.rp-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.rp-chip{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--bone);color:var(--ink2)}
.rp-chip.ok{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}
.rp-chip.near{background:#F6EEDC;border-color:#D9BE84;color:#7A5A1E}
.rp-chip.miss{background:var(--clay-tint);border-color:var(--clay);color:#8F3A2F}

.rp-headline{background:var(--bone)}
.rp-headline p{margin:0;font-size:15.5px;line-height:1.6;max-width:70ch}

/* where the points went ------------------------------------------ */
.rp-lost .rp-ic{color:var(--clay)}
.rp-deds{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.rp-ded{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:11px 14px;background:var(--card)}
.rp-dedname{min-width:0}
.rp-dedlabel{display:block;font-weight:800;font-size:14px}
.rp-dedwhich{display:block;font-size:12px;color:var(--ink2);margin-top:2px;line-height:1.45}
.rp-dedpts{font-family:ui-monospace,Menlo,monospace;font-size:16px;font-weight:800;
  color:#8F3A2F;white-space:nowrap}

/* a point made, well or badly ------------------------------------ */
.rp-point{padding:13px 0 0;border-top:1px solid var(--line);margin-top:13px}
.rp-point:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rp-point h3{display:flex;gap:9px;align-items:baseline;font-size:15.5px;font-weight:800;
  margin:0 0 6px;letter-spacing:-.01em}
.rp-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;font-size:11.5px;font-weight:800;
  background:var(--bone);border:1px solid var(--line);color:var(--ink2)}
.rp-point.good .rp-num{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}
.rp-point.work .rp-num{background:var(--clay-tint);border-color:var(--clay);color:#8F3A2F}
.rp-point p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink);max-width:70ch}
.rp-crits{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rp-crit{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:6px;background:var(--bone);
  border:1px solid var(--line);color:var(--ink2)}

/* the checklist -------------------------------------------------- */
.rp-practice{background:var(--teal-tint);border-color:var(--teal)}
.rp-practice .rp-ic{color:var(--teal-deep)}
.rp-practice .rp-sub{color:var(--teal-deep);opacity:.85}
.rp-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rp-check li{display:flex;gap:11px;align-items:flex-start;background:var(--card);
  border:1px solid var(--teal);border-radius:10px;padding:11px 13px}
.rp-check input{margin:2px 0 0;flex:0 0 auto;width:17px;height:17px;accent-color:var(--teal-deep)}
.rp-check label{font-size:14px;font-weight:600;line-height:1.5;cursor:pointer;margin:0}
.rp-check li.done{opacity:.5}
.rp-check li.done label{text-decoration:line-through}

/* everything, for whoever wants it ------------------------------- */
.rp-walk{padding:0}
.rp-walk summary{display:flex;gap:11px;align-items:center;padding:15px 20px;
  cursor:pointer;font-weight:800;font-size:14.5px;list-style:none}
.rp-walk summary::-webkit-details-marker{display:none}
.rp-walk summary::after{content:'+';margin-left:auto;font-size:19px;font-weight:800;color:var(--ink2)}
.rp-walk[open] summary::after{content:'\2212'}
.rp-walk summary:hover{background:var(--bone)}
.rp-walkbody{padding:0 20px 18px;border-top:1px solid var(--line)}
.rp-walkbody p{font-size:14.5px;line-height:1.65;max-width:70ch;color:var(--ink)}
.rp-raw{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.6;margin:0}

@media (max-width:560px){
  .rp-card{padding:15px 15px}
  .rp-gradecard{gap:15px}
  .rp-grade,.rp-dial{width:106px;height:106px;flex-basis:106px}
  .rp-dialnum strong{font-size:25px}
  .rp-gradetext h1{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .rp-fill{transition:none !important}
}


/* ============================================================
   THE APP BAR

   Nine signed-in pages already carried a .topbar; each had grown a
   different set of links and the dashboard had none at all, so the
   only dependable route anywhere was back to the dashboard. These
   rules dress one shared bar, defined in includes/appnav.php.
   ============================================================ */
.appbar{gap:18px;flex-wrap:wrap;position:relative}
.appnav{display:flex;gap:2px;flex:1;flex-wrap:wrap;min-width:0}
.appnav a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  font-size:13.5px;font-weight:700;color:var(--ink2);text-decoration:none;white-space:nowrap}
.appnav a:hover{background:var(--bone);color:var(--ink)}
.appnav a.on{background:var(--teal-tint);color:var(--teal-deep)}
.navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--clay);color:#fff;font-size:10.5px;font-weight:800}
.appburger{display:none;background:none;border:0;font-size:20px;cursor:pointer;
  color:var(--ink2);padding:4px 8px;line-height:1}
.appdrop{display:none;border-bottom:1px solid var(--line);background:var(--card);padding:6px 18px 12px}
.appdrop.open{display:block}
.appdrop a{display:block;padding:10px 2px;font-size:14.5px;font-weight:700;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.appdrop a:last-child{border-bottom:0}

/* Below this the links do not fit beside the name, so they fold into
   the burger rather than wrapping into a second ragged row. */
@media (max-width:900px){
  .appnav{display:none}
  .appburger{display:block}
  .appbar .who{display:none}
  .appbar .topbar-right .btn{display:none}
}


/* ============================================================
   THE CASE PICKER

   Shared by every chooser. Restrained: the cases themselves are the
   content, and a filter bar that competes with them defeats its own
   purpose.
   ============================================================ */
.cp-bar{margin:0 0 10px}
.cp-search{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.cp-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.cp-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.cp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cp-chip:hover{border-color:var(--teal);color:var(--teal-deep)}
.cp-chip.on{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}
.cp-chip small{font-family:ui-monospace,Menlo,monospace;font-size:11px;opacity:.7;font-weight:800}
.cp-sec{margin:0 0 18px}
.cp-sec:last-child{margin-bottom:0}
.cp-h{display:flex;align-items:baseline;gap:9px;margin:0 0 8px;padding-bottom:5px;
  border-bottom:1px solid var(--line)}
.cp-h span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cp-h small{font-size:11px;color:var(--ink2);opacity:.75;margin-left:auto}
.cp-none{color:var(--ink2);font-size:14px;padding:18px 0;margin:0}


/* ============================================================
   THE PATIENT LIST

   Cards rather than a run of full-width buttons. Everything a student
   weighs before choosing — who, what brought them in, which system,
   first visit or review — is on the face of the card, so the choice is
   made by looking rather than by reading sixty door signs.

   The system tint is the only colour that carries meaning here. It is
   deliberately pale: this is a page somebody scans, and a grid of
   saturated cards is harder to scan than a grid of quiet ones.
   ============================================================ */
.cl{margin-top:18px}
.cl-filter{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:18px}
.cl-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cl-searchwrap{position:relative;flex:1;min-width:240px}
.cl-mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink2)}
.cl-search{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.cl-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.cl-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cl-count{font-size:13px;color:var(--ink2)}
.cl-count .n{font-weight:800;color:var(--ink)}
.cl-sort{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink2);margin:0;font-weight:400}
.cl-sortsel{padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.cl-chips{display:flex;gap:8px;flex-wrap:wrap}
.cl-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.cl-chip:hover{border-color:var(--teal)}
.cl-chip.on{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.cl-chip small{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;opacity:.65;font-weight:700}

.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.cl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:border-color .15s, box-shadow .15s}
.cl-card:hover{border-color:var(--teal);box-shadow:0 6px 20px rgba(22,36,46,.06)}
.cl-name{font-size:16px;font-weight:800;letter-spacing:-.01em;padding:15px 17px 0}
.cl-body{display:flex;gap:12px;align-items:flex-start;padding:13px 17px 0;flex:1}
.cl-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--bone);color:var(--ink2)}
.cl-ic svg{width:21px;height:21px}
.cl-sub{font-size:14.5px;font-weight:700;line-height:1.4;padding-top:2px}
.cl-tags{display:flex;gap:7px;flex-wrap:wrap;padding:13px 17px 15px}
.cl-tag{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:8px;
  background:var(--bone);border:1px solid var(--line);color:var(--ink2)}
.cl-go{border-top:1px solid var(--line);padding:12px 17px}
/* The page's own button, wearing the card's clothes — the handler that
   starts a case is untouched. */
.cl-go .casebtn,.cl-go .coldbtn,.cl-go .visit{display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--teal-deep)}
.cl-go .casebtn:hover,.cl-go .coldbtn:hover,.cl-go .visit:hover{color:var(--teal)}
.cl-go .casebtn span,.cl-go .coldbtn span,.cl-go .visit span{margin-left:auto;font-weight:700}
.cl-empty,.cl-none{color:var(--ink2);font-size:14px;padding:26px 0;margin:0}

/* System tints. Pale on purpose. */
.s-cv{background:#F6E4E1;color:#9C4A3D}
.s-resp{background:#E2ECEA;color:#1F6B6E}
.s-gi{background:#E7EEDF;color:#4F6E42}
.s-neuro{background:#E6E6F1;color:#5A5A86}
.s-msk{background:#EFE9E0;color:#7A6A50}
.s-endo{background:#EDE5F0;color:#6F5480}
.s-gu{background:#E2ECF2;color:#3D6480}
.s-og{background:#F3E4EC;color:#8A4A68}
.s-derm{background:#F2EAE0;color:#8A6A45}
.s-psy{background:#F3E6EA;color:#8A4A5C}
.s-haem{background:#F6E2E2;color:#93413F}
.s-ent{background:#E4EEEF;color:#3F6E72}
.s-gen{background:var(--bone);color:var(--ink2)}
.cl-tag.k-fu{background:#F6EEDC;border-color:#D9BE84;color:#7A5A1E}
.cl-tag.k-new{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-deep)}

@media (max-width:560px){
  .cl-grid{grid-template-columns:1fr}
  .cl-meta{width:100%;justify-content:space-between}
}


/* ============================================================
   THE BIG CHOICE

   The mode chooser, given the room it deserves. It is the first thing
   on these pages and it decides everything after it, so it is the
   largest thing on them.

   Two accents, and only two: teal for the written path, navy for the
   spoken one. The pair is not decoration — it is how a student
   remembers which side of the page they were last on. A third would
   make it a palette and stop meaning anything.
   ============================================================ */
.mode2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;margin:22px 0 0}
.mode2.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.mc2{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:26px 26px 24px;transition:border-color .15s, box-shadow .15s}
.mc2:hover{border-color:var(--teal);box-shadow:0 8px 28px rgba(22,36,46,.07)}
.mc2.a-navy:hover{border-color:#1B3A6B}
.mc2-head{display:flex;gap:18px;align-items:center;margin-bottom:20px}
/* Circles, not rounded squares. The square tile is the block header's
   mark, at the top of the page; repeating it inside every card made the
   two read as the same kind of thing when one is a heading and the other
   is a choice. */
.mc2-ic{flex:0 0 62px;width:62px;height:62px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--teal-tint);color:var(--teal-deep)}
.mc2.a-navy .mc2-ic{background:#E6EBF3;color:#1B3A6B}
.mc2-ic svg{width:30px;height:30px}
.mc2-title h2{font-size:22px;font-weight:900;letter-spacing:-.02em;margin:0 0 9px}
.mc2-rule{display:block;width:34px;height:3px;border-radius:2px;background:var(--teal)}
.mc2.a-navy .mc2-rule{background:#1B3A6B}
/* One idea per line. A paragraph at this size reads as decoration and
   gets skipped, which is the opposite of what a choice page needs. */
.mc2-lines{flex:1}
.mc2-lines p{margin:0 0 5px;font-size:15px;line-height:1.55;color:var(--ink)}
.mc2-lines p:last-child{margin-bottom:0}
.mc2-note{display:flex;gap:13px;align-items:flex-start;background:var(--teal-tint);
  border-radius:13px;padding:15px 17px;margin:20px 0 0}
.mc2.a-navy .mc2-note{background:#EDF1F7}
.mc2-nic{flex:0 0 22px;width:22px;height:22px;color:var(--teal-deep);margin-top:1px}
.mc2.a-navy .mc2-nic{color:#1B3A6B}
.mc2-nic svg{width:22px;height:22px}
.mc2-note p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
/* One line of short claims, separated by middots — "New case every time
   · No repetition · Build confidence". Reads at a glance where a
   sentence has to be read. Wraps to two lines rather than being clipped. */
.mc2-note.terse{align-items:center;padding:12px 16px}
.mc2-note.terse p{font-size:13px;font-weight:600}
.mc2-go{margin-top:20px}
/* The page's own button, wearing the card's clothes. The handler that
   was already bound to it is untouched. */
.mc2-go .modecard,.mc2-go button,.mc2-go .btn{display:flex;align-items:center;justify-content:center;
  gap:10px;width:100%;padding:15px 20px;border-radius:12px;border:0;cursor:pointer;
  background:var(--teal-deep);color:#fff;font-family:inherit;font-size:15.5px;font-weight:800;
  text-align:center;transition:background .15s}
.mc2-go .modecard:hover,.mc2-go button:hover,.mc2-go .btn:hover{background:var(--teal)}
.mc2.a-navy .mc2-go .modecard,.mc2.a-navy .mc2-go button,.mc2.a-navy .mc2-go .btn{background:#1B3A6B}
.mc2.a-navy .mc2-go .modecard:hover,.mc2.a-navy .mc2-go button:hover{background:#27508F}
/* Whatever the caller put inside its button — a span, a rule, a
   subtitle from the old design — collapses to the label. */
.mc2-go .mc-rule,.mc2-go .mc-sub{display:none}
.mc2-go .mc-title{display:inline;font-size:inherit;font-weight:inherit;color:inherit}

.modefoot{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;
  background:var(--bone);border:1px solid var(--line);border-radius:18px;
  padding:6px 0;margin:20px 0 0}
.mf-item{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-left:1px solid var(--line)}
.mf-item:first-child{border-left:0}
.mf-ic{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--teal-tint);color:var(--teal-deep)}
.mf-ic svg{width:18px;height:18px}
.mf-item strong{display:block;font-size:14px;font-weight:800;margin-bottom:3px}
.mf-item p{margin:0;font-size:13px;line-height:1.55;color:var(--ink2)}
.modeseal{display:flex;gap:8px;align-items:center;justify-content:center;
  margin:20px 0 0;font-size:13px;color:var(--ink2)}
.modeseal span{width:15px;height:15px;display:inline-flex}
.modeseal svg{width:15px;height:15px}

@media (max-width:760px){
  .mf-item{border-left:0;border-top:1px solid var(--line);padding:15px 20px}
  .mf-item:first-child{border-top:0}
  .mc2{padding:22px 20px 20px}
  .mc2-ic{flex-basis:52px;width:52px;height:52px}
  .mc2-ic svg{width:25px;height:25px}
  .mc2-title h2{font-size:19px}
}


/* ============================================================
   THE SECTION BACKDROP

   A photograph behind the page, named after the page, shown as drawn.

   An earlier version put a white scrim between the image and the text,
   so that any photograph would stay readable. These images are composed
   with clear space where the text goes, so a scrim would wash out the
   part that was drawn on purpose. Full opacity, nothing over it.

   That moves the readability burden onto the picture. The cards are the
   safety net: they are fully opaque, not translucent, so a card that
   happens to land on a busy part of a photograph is still a card. That
   is the one place this design does not rely on the image behaving.
   ============================================================ */
.secbg{position:fixed;inset:0;z-index:-1;background-size:cover;background-repeat:no-repeat;
  pointer-events:none}

/* THE READING COLUMN.

   The photograph stays visible down both sides; the middle, where the
   text is, sits on something solid. That is the whole ask, and it is
   better than the alternatives: a scrim dulls the whole picture, and
   per-card backgrounds leave headings and paragraphs stranded on
   whatever the photograph happens to be doing behind them.

   It is the page's OWN content wrapper that gets the background, not a
   separate centred panel. A panel would need its width guessed, and
   these pages run from 680px to 1180px — the guess would be wrong on
   most of them and would drift the moment one changed. The wrapper is
   already exactly as wide as the content it holds.

   Bone rather than card, so that cards sitting on it still read as
   cards. min-height keeps the column running to the bottom of the
   window on a short page, so it never looks like a floating slab. */
body.hasbg .wrap,
body.hasbg .stage,
body.hasbg .page{
  background:var(--bone);
  min-height:100vh;
  padding-left:34px;
  padding-right:34px;
  box-shadow:0 0 0 1px rgba(225,222,213,.8), 0 0 50px rgba(22,36,46,.13);
}
@media (max-width:900px){
  body.hasbg .wrap,
  body.hasbg .stage,
  body.hasbg .page{padding-left:18px;padding-right:18px}
}

/* Solid, not frosted. Translucency was compensating for a scrim that is
   no longer there, and over a real photograph it costs legibility for
   nothing. */
body.hasbg .cl-filter,
body.hasbg .cl-card,
body.hasbg .mc2,
body.hasbg .modefoot,
body.hasbg .locbox,
body.hasbg .msg,
body.hasbg .panel{background:var(--card)}
body.hasbg .topbar,
body.hasbg .appbar{background:var(--card)}
/* The header text sits directly on the photograph, in the space the
   photograph left for it, so it needs nothing added. */

/* WHERE THE COMPOSITION CANNOT SURVIVE THE CROP.

   background-size:cover fills the window, so the crop follows the
   window's aspect ratio, not the image's. An image drawn at 16:9 with
   clear space in the middle loses about a tenth of its width on a 16:10
   laptop — fine — a quarter at 4:3, and most of it in portrait. Text
   laid out for the wide crop then lands on the busy part, and the whole
   point of composing clear space is gone.

   Two conditions, because they are two different problems. A narrow
   window is a small screen. A portrait window is any screen turned
   sideways, including a large tablet where width alone would not catch
   it. Either one and the photograph goes; the page falls back to the
   plain background it has always had and every word stays where it was.

   Not a fade — a fade at that size is a muddy photograph AND unreadable
   text. Off is the honest state. */
@media (max-width: 760px){ .secbg{display:none} }
@media (max-aspect-ratio: 1/1){ .secbg{display:none} }
/* And a short window, which width and aspect both miss. A phone turned
   sideways is 844 wide and 390 tall: wide enough to pass the first rule
   and landscape enough to pass the second, while cropping a fifth off
   the top and bottom of the image. */
@media (max-height: 520px){ .secbg{display:none} }

/* Decoration, and it goes when decoration is unwelcome. */
@media (prefers-reduced-transparency: reduce){ .secbg{display:none} }
@media (prefers-contrast: more){ .secbg{display:none} }
@media print{ .secbg{display:none} }


/* ============================================================
   THE STATION BRIEF, INSIDE THE STATION

   What the candidate was told to do, kept within reach while they do
   it. Set apart from the interface because it is the examiner speaking,
   not the app — the same treatment the brief gets on the sitting page.
   ============================================================ */
.osce-brief{max-width:1180px;margin:0 auto 14px;padding:0 20px}
.osce-brief summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal-deep);padding:9px 0}
.osce-brief summary::-webkit-details-marker{display:none}
.osce-brief summary::before{content:'\25B8';font-size:10px}
.osce-brief[open] summary::before{content:'\25BE'}
.osce-brief__b{white-space:pre-wrap;font-size:14.5px;line-height:1.6;color:var(--ink);
  max-width:70ch;background:var(--teal-tint);border:1px solid var(--teal);border-left-width:3px;
  border-radius:12px;padding:14px 16px}
.osce-brief__m{font-size:12px;color:var(--ink2);margin-top:7px}
@media print{ .osce-brief{display:none} }

/* STYLES_V16_END */

/* ---------------- account page ---------------- */
/* Figures shown large and bare, with the word underneath. No
   percentages anywhere on this page — see the note at the top of
   account.php for why that is a decision and not an omission. */
.acct-figs{display:flex;flex-wrap:wrap;gap:34px;margin:0 0 20px}
.acct-figs>div{display:flex;flex-direction:column}
.acct-figs b{font-family:'DM Mono',ui-monospace,monospace;font-size:2rem;line-height:1.1;
  color:var(--teal-deep);font-weight:500;font-variant-numeric:tabular-nums}
.acct-figs span{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

.acct-h3{font-size:1rem;margin:26px 0 6px}
.acct-note{font-size:.9rem;margin:0 0 14px}
.acct-list{margin:0;padding-inline-start:1.1rem}

/* Three counts per function, colour-coded and side by side, so the
   shape of somebody's coverage reads at a glance without a bar chart
   implying a precision the numbers do not have. */
.acct-crits{display:grid;gap:8px}
.acct-crit{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.acct-critname{font-weight:600}
.acct-critnums{display:flex;gap:10px;align-items:baseline;
  font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.acct-cov{color:var(--sage);font-weight:600}
.acct-par{color:var(--clay)}
.acct-mis{color:var(--ink2)}
.acct-of{color:var(--ink2);font-size:.85rem}
.acct-key{display:flex;gap:16px;font-size:.85rem;margin:10px 0 0}

.acct-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:0}
.acct-dl dt{color:var(--ink2);font-size:.9rem}
.acct-dl dd{margin:0;font-weight:600}

.acct-cancel{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}
/* When the details block is the only thing in its panel there is
   nothing above for the rule to separate it from, and a line floating
   over a lone item reads as a rendering fault. */
.blockpanel > .acct-cancel:first-child{border-top:0;margin-top:0;padding-top:0}
.acct-cancel>summary{cursor:pointer;font-weight:600;color:var(--teal-deep)}
.acct-cancelbody{padding-top:12px;max-width:62ch}
.acct-q{margin:18px 0 8px}
.acct-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}
.acct-radio span{display:flex;flex-direction:column;gap:2px}
.acct-radio .muted{font-size:.9rem}
.acct-lang{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acct-erase{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:14px}
.acct-erase label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--ink2)}
.btn.danger{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.danger:hover{background:#a55146;border-color:#a55146}
.co-panel{max-width:620px}
.co-panel .acct-dl{margin-bottom:18px}