/* ==========================================================================
   APC Excellence Mentoring - candidate portal.

   Standalone, like admin.css and for the same reason: it shares the brand and
   the two families, and nothing else. It does not load site.css (an editorial
   type scale a form does not want) and it does not load admin.css (a dense
   staff screen, tuned for reading tables all day).

   What a candidate sees here is three screens and about twenty fields, most
   of them read on a phone in the ten minutes after paying. So: one column,
   generous line height, controls big enough to hit with a thumb, and no
   density anywhere.

   Gold obeys the same rule it does everywhere in this project - an accent,
   never a fill, and --gold-dk at text sizes because --gold is 2.7:1 on white.
   ========================================================================== */

:root{
  --navy-950:#061C3F; --navy-900:#09295C; --navy-800:#0B2A5B; --navy-700:#0E3572;
  --gold:#C89A2A; --gold-lt:#E0B44A; --gold-dk:#7A5E10;
  --ink:#12213A; --slate:#5A6B85; --pale:#C9D3E4;

  --bg:#FAFAF8;
  --surf:#FFFFFF;
  --line:rgba(9,41,92,.12);
  --line-soft:rgba(9,41,92,.07);
  --shadow:0 1px 2px rgba(9,41,92,.05),0 10px 26px -18px rgba(9,41,92,.28);

  --txt:#12213A;
  --txt-2:#5A6B85;
  --txt-3:#66758E;
  --accent:#7A5E10;
  /* Gold at display sizes only, and never --gold itself, which is 2.7:1 here.
     The same value admin.css uses, for the same reason and on the same
     ground - the glance row's figures are the only thing on this side big
     enough to take it. */
  --accent-lg:#9A7616;

  --live:#0F7A55; --live-tint:rgba(15,122,85,.09); --live-line:rgba(15,122,85,.3);
  --wait:#8A6A12; --wait-tint:rgba(200,154,42,.12); --wait-line:rgba(200,154,42,.45);
  --danger:#B3261E; --danger-tint:rgba(179,38,30,.07); --danger-line:rgba(179,38,30,.28);

  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --radius:14px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- the rail -----------------------------------------------------------
     Its own tokens rather than the brand ones directly, as admin.css does it:
     the sidebar is the only dark region on this side now, so everything it
     needs is stated once here and nothing in the content area can disturb it. */
  --sb-bg:#061C3F;
  --sb-bg-2:#03102A;
  --sb-line:rgba(201,211,228,.12);
  --sb-txt:#C9D3E4;
  --sb-txt-2:#8FA2BE;
  --sb-txt-hi:#FAFAF8;
  --sb-w:252px;
  --tb-h:72px;
}

*,*::before,*::after{box-sizing:border-box}

.prt-body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

a{color:var(--navy-700)}
a:hover{color:var(--navy-900)}

/* !important, unusually, because this class exists to beat whatever else
   applies. The hidden username inputs on the password screens carry it, and a
   form rule further down gave them their full width back - invisible, but a
   390px-wide absolute box that made every screen with one scroll sideways on a
   phone. A utility that can be overridden by specificity is not a utility. */
.sr{position:absolute !important;width:1px !important;height:1px !important;
    margin:-1px !important;padding:0 !important;overflow:hidden !important;
    clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;
      padding:10px 16px;z-index:50}
.skip:focus{left:8px;top:8px}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;
}

/* ---------- the bar ------------------------------------------------------ */

.prt-bar{
  background:var(--navy-950);color:#E7ECF5;
  border-bottom:1px solid rgba(201,211,228,.14);
}
.prt-bar-in{
  max-width:960px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:16px;
}
.prt-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.prt-mark img{height:26px;width:auto;display:block}
.prt-mark span{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lt);padding-left:10px;border-left:1px solid rgba(201,211,228,.22);
}
.prt-who{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px}
.prt-who b{font-weight:600;color:#fff}
.prt-out{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:8px 2px;
  color:#C9D3E4;font:inherit;font-size:13px;cursor:pointer;
}
.prt-out:hover{color:#fff}


/* ==========================================================================
   The rail, the shell and the top bar - Axis only

   The panel's chrome, at this side's scale. The candidate portal outgrew its
   row of pills when the course arrived behind it: five destinations, several
   of them screens somebody opens every day, is more than a pill row carries.

   Everything here is prefixed .prt-sb / .prt-tb and nothing above it changed,
   because the mentor area renders into .prt-bar and .prt-nav and should keep
   doing so - two links do not need a rail.
   ========================================================================== */

.prt-sb{
  position:fixed;inset:0 auto 0 0;z-index:60;width:var(--sb-w);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg-2));
  color:var(--sb-txt);
}
/* The gold hairline down the full height, echoing the site's seam. */
.prt-sb::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(200,154,42,.6),rgba(200,154,42,.08) 60%);
}

.prt-sb-top{
  flex:0 0 auto;min-height:var(--tb-h);display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 18px;
  border-bottom:1px solid var(--sb-line);
}
.prt-sb-brand{display:flex;align-items:center;gap:11px;min-width:0;
              color:var(--sb-txt-hi);text-decoration:none}
/* Height-driven: the lockup is 1754x517, so the width follows and the
   intrinsic attributes still reserve the right box before it loads. */
.prt-sb-brand img{display:block;height:24px;width:auto;max-width:none}
.prt-sb-brand i{
  flex:0 0 auto;font:700 9px/1 var(--sans);font-style:normal;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(200,154,42,.42);border-radius:999px;padding:5px 8px;
}
.prt-sb-x{
  display:none;width:38px;height:38px;place-items:center;padding:0;
  background:transparent;border:1px solid var(--sb-line);border-radius:10px;
  color:var(--sb-txt);cursor:pointer;
}
.prt-sb-x:hover{border-color:var(--gold);color:var(--gold-lt)}

.prt-sb-nav{flex:1 1 auto;overflow-y:auto;padding:16px 12px 8px;
            scrollbar-width:thin;scrollbar-color:rgba(201,211,228,.2) transparent}
.prt-sb-nav::-webkit-scrollbar{width:6px}
.prt-sb-nav::-webkit-scrollbar-thumb{background:rgba(201,211,228,.18);border-radius:6px}
.prt-sb-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* The rule above sets display, and a display of anything beats the hidden
   attribute's own display:none - so without this the course sub-list, which
   is hidden outside the course, was drawn on every screen in Axis. The
   attribute is the right way to carry that state (it hides the links from
   assistive technology too, which display:none via a class would also do but
   a class would not survive somebody reading the markup and assuming the
   attribute worked). */
.prt-sb-nav ul[hidden]{display:none}

/* The group heading, which is also the link to the Account page.

   Small caps at the rail's quietest weight, because it is a label first: it
   has to separate the four settings below it from the three product links
   above without competing with either. The cog earns its place by being the
   only thing saying this is pressable - underlining it, or giving it the
   links' own size, would make it a fourth item in the group it is heading. */
.prt-sb-grp{
  display:flex;align-items:center;gap:7px;margin:18px 0 6px;padding:6px 12px;
  border-radius:8px;text-decoration:none;
  font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb-txt);opacity:.62;transition:opacity .2s,color .2s,background .2s;
}
.prt-sb-grp .ic{flex:0 0 auto;opacity:.75}
.prt-sb-grp:hover{opacity:1;color:var(--sb-txt-hi);background:rgba(255,255,255,.05)}
.prt-sb-grp[aria-current="page"]{opacity:1;color:var(--gold)}
.prt-sb-grp:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;opacity:1}
/* The first group has no heading, so nothing should push it down. */
.prt-sb-nav > ul:first-child{margin-top:0}

/* A section that folds, built on <details>.

   The whole row is the control. It used to be a link with a chevron button
   stuck on the right, so pressing Your course went to the dashboard when what
   somebody wanted was to see what was inside - and the first child *is* the
   dashboard, so the link was a second route to a screen one row below it.

   summary carries the rail's own link styling rather than anything new, so a
   folding row and a plain row are the same object to look at. The marker is
   removed twice over: list-style for the standards-compliant path, and the
   -webkit pseudo-element for Safari, which ignores the first. */
.prt-sb-det{margin:0}
.prt-sb-nav summary{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:44px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--sb-txt);
  list-style:none;cursor:pointer;
  transition:background .2s,color .2s;
}
.prt-sb-nav summary::-webkit-details-marker{display:none}
.prt-sb-nav summary:hover{background:rgba(255,255,255,.05);color:var(--sb-txt-hi)}
.prt-sb-nav summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.prt-sb-nav summary .ic{flex:0 0 auto;opacity:.8;transition:opacity .2s,color .2s,transform .2s var(--ease)}
.prt-sb-nav summary:hover .ic{opacity:1;color:var(--gold-lt)}
/* The chevron, last in the row and pushed to the end. It points down when the
   section is shut and up when it is open - where the list will go, rather than
   where it is. */
.prt-sb-nav summary .ic:last-child{margin-left:auto;opacity:.65;transform:rotate(180deg)}
.prt-sb-det[open] > summary .ic:last-child{transform:none}

/* Inside this section, whether or not it is folded open. The same gradient and
   gold rail every other current row in the rail uses - when the list is shut
   this is the only thing left to answer "where am I", and when it is open the
   child that is the page answers it more precisely underneath. */
.prt-sb-nav summary[data-section-open]{
  background:linear-gradient(90deg,rgba(200,154,42,.18),rgba(200,154,42,0));
  color:var(--sb-txt-hi);
}
.prt-sb-nav summary[data-section-open] .ic:first-child{color:var(--gold);opacity:1}
.prt-sb-nav summary[data-section-open]::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold);
}

/* §5.3's seven sections.

   Indented to sit under the parent's label. No connector line down the left -
   there was one, and against the rail's own gradient it read as a stray rule
   across the sidebar rather than as anything joining the group together. The
   indent and the smaller, quieter type do that job without drawing anything. */
.prt-sb-nav .prt-sb-sub{margin:2px 0 6px;padding:0 0 0 34px;gap:0}
.prt-sb-nav .prt-sb-sub a{
  min-height:34px;padding:6px 12px;gap:0;
  font-size:13px;font-weight:600;color:var(--sb-txt-2);
}
.prt-sb-nav .prt-sb-sub a:hover{color:var(--sb-txt-hi);background:rgba(255,255,255,.05)}
/* The current section, at the sub-list's own weight: gold text, no block and
   no rail. A child shouting as loudly as a top-level item makes the rail look
   like it has two current pages. */
.prt-sb-nav .prt-sb-sub a[aria-current="page"]{
  background:none;color:var(--gold-lt);font-weight:700;
}
.prt-sb-nav .prt-sb-sub a[aria-current="page"]::before{content:none}

.prt-sb-nav ul a{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:44px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--sb-txt);text-decoration:none;
  transition:background .2s,color .2s;
}
.prt-sb-nav ul .ic{flex:0 0 auto;opacity:.8;transition:opacity .2s,color .2s}
.prt-sb-nav ul a:hover{background:rgba(255,255,255,.05);color:var(--sb-txt-hi)}
.prt-sb-nav ul a:hover .ic{opacity:1;color:var(--gold-lt)}
/* The current screen: a gold rail on the left, the same device the public nav
   uses for its underline rather than a second visual idea. */
.prt-sb-nav ul a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(200,154,42,.18),rgba(200,154,42,0));
  color:var(--sb-txt-hi);
}
.prt-sb-nav ul a[aria-current="page"] .ic{color:var(--gold);opacity:1}

/* §5.4's unread count. Pushed to the far end of the link rather than sitting
   beside the label, so the numbers line up down the rail whatever the labels
   do. Gold on navy is the same pairing the current-screen rail uses - this is
   the other thing worth looking at in here. */
.prt-sb-count{
  margin-left:auto;flex:0 0 auto;min-width:20px;padding:2px 6px;
  border-radius:999px;background:var(--gold);color:#10233F;
  font:700 11px/1.5 var(--sans);font-style:normal;text-align:center;
}

.prt-sb-nav ul a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold);
}
.prt-sb-nav ul a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* The foot carries the account, which on this side is one person looking at
   their own - so a name and a way out, not the panel's dropdown. */
.prt-sb-foot{flex:0 0 auto;padding:14px;border-top:1px solid var(--sb-line);
             margin-top:auto}
/* An <a> to the Account page now, rather than a label. Padded and rounded so
   it has a hit area of its own, with the bottom gap kept as margin - as
   padding it made the hover state a block that ran into the Sign out button. */
.prt-sb-who{display:flex;align-items:center;gap:11px;min-width:0;
            margin:0 0 12px;padding:6px 4px;border-radius:10px;
            text-decoration:none;color:inherit;transition:background .2s}
a.prt-sb-who:hover{background:rgba(255,255,255,.05)}
a.prt-sb-who:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.prt-sb-av{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,var(--gold),var(--gold-dk));color:var(--navy-950);
  font:800 13px/1 var(--sans);
}
.prt-sb-who > span:not(.prt-sb-av){min-width:0;display:grid;line-height:1.2}
.prt-sb-who b{font-size:13.5px;font-weight:700;color:var(--sb-txt-hi);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prt-sb-who i{font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.12em;
              text-transform:uppercase;color:var(--gold);margin-top:4px}
.prt-sb-out{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;padding:10px 12px;cursor:pointer;
  background:transparent;border:1px solid var(--sb-line);border-radius:10px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--sb-txt);
  transition:background .2s,border-color .2s,color .2s;
}
.prt-sb-out:hover{background:rgba(255,255,255,.05);border-color:var(--gold);
                  color:var(--sb-txt-hi)}

.prt-sb-scrim{position:fixed;inset:0;z-index:55;background:rgba(6,28,63,.5);
              -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ---------- the shell and the bar above the content ---------------------- */

.prt-shell{margin-left:var(--sb-w);min-height:100vh;min-height:100dvh;
           display:flex;flex-direction:column}

.prt-tb{
  position:sticky;top:0;z-index:40;flex:0 0 auto;
  min-height:var(--tb-h);display:flex;align-items:center;gap:14px;
  /* No inline padding of its own: the measure below is capped and centred, and
     the bar has to sit on the same one or the title floats off the left edge
     of the cards it belongs to. .prt-tb-head carries it instead. */
  padding:12px 0;
  background:rgba(250,250,248,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.prt-tb-menu{
  display:none;width:42px;height:42px;place-items:center;flex:0 0 auto;padding:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  color:var(--txt);cursor:pointer;
}
.prt-tb-menu:hover{border-color:var(--gold);color:var(--accent)}
/* The same 960 / 20px measure as .prt-main, so the heading starts exactly
   where the cards under it do. */
.prt-tb-head{min-width:0;flex:1 1 auto;width:100%;max-width:960px;
             margin:0 auto;padding-inline:20px}
.prt-tb-eyebrow{
  margin:0;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
/* Not uppercased, unlike the panel's. The headings on this side are sentences
   somebody is meant to read - "Hello, Florence." - and shouting one at a
   candidate is not the same screen at all. */
.prt-tb-head h1{
  margin:7px 0 0;font-family:var(--display);font-weight:400;letter-spacing:.01em;
  line-height:1.05;font-size:clamp(19px,2.1vw,25px);color:var(--navy-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.prt-shell .prt-main{flex:1 1 auto;width:100%;padding-top:22px}

/* What is left of the old .prt-hd once the heading moved into the bar. */
.prt-lede{margin:0 0 20px;font-size:15px;color:var(--txt-2);max-width:70ch}

/* --------------------------------------------------------------------------
   1080px: the rail leaves the flow and becomes an off-canvas panel, the way
   the panel's does at the same width and with the same script behind it.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .prt-sb{transform:translateX(-100%);transition:transform .32s var(--ease);
          box-shadow:0 0 60px rgba(6,28,63,.45)}
  .prt-sb[data-open]{transform:none}
  .prt-sb-x{display:grid}
  .prt-shell{margin-left:0}
  /* The bar gives up the centred measure once the menu button is in it: a
     button then a title is its own shape and has nothing to line up with. */
  .prt-tb-menu{display:grid;margin-left:clamp(16px,3vw,20px)}
  .prt-tb-head{margin-left:0;padding-inline:0}
  /* [hidden] until portal.js opens the rail, so it costs nothing at rest and
     nothing at all on a wide screen. */
  .prt-sb-scrim[hidden]{display:none}
}
@media (min-width:1081px){
  .prt-sb-scrim{display:none}
}

/* ---------- the page ----------------------------------------------------- */

.prt-main{max-width:960px;margin:0 auto;padding:26px 20px 64px}

.prt-nav{display:flex;gap:6px;margin:0 0 22px;flex-wrap:wrap}
.prt-nav a{
  display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--txt-2);border:1px solid transparent;
}
.prt-nav a:hover{background:rgba(9,41,92,.05);color:var(--txt)}
.prt-nav a[aria-current]{background:var(--surf);border-color:var(--line);color:var(--navy-800);
                         box-shadow:var(--shadow)}

.prt-hd{margin:0 0 20px}
.prt-eyebrow{
  margin:0 0 4px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.prt-hd h1{
  margin:0;font-family:var(--display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(28px,5vw,38px);line-height:1.1;color:var(--navy-900);
}
.prt-hd p{margin:8px 0 0;color:var(--txt-2);max-width:62ch}

/* ---------- flash and errors --------------------------------------------- */

.flash,.prt-err{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:13px 16px;
  border-radius:12px;font-size:14px;line-height:1.55;
}
.flash{background:var(--live-tint);border:1px solid var(--live-line);color:#0B5A3F}
.prt-err{background:var(--danger-tint);border:1px solid var(--danger-line);color:#8A1D17}
.flash .ic,.prt-err .ic{flex:0 0 auto;margin-top:1px}
.prt-err ul{margin:4px 0 0;padding-left:18px}

/* ---------- the status banner -------------------------------------------- */

.prt-state{
  border-radius:var(--radius);padding:22px 24px;margin:0 0 22px;
  border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow);
}
.prt-state h2{
  margin:0;font-size:19px;line-height:1.3;display:flex;align-items:center;gap:11px;
  font-weight:700;letter-spacing:-.01em;
}
.prt-state p{margin:9px 0 0;color:var(--txt-2);max-width:70ch}
.prt-dot{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}

.prt-state.is-checking{background:var(--wait-tint);border-color:var(--wait-line)}
.prt-state.is-checking h2{color:#6B4E0E}
.prt-state.is-checking p{color:#7A5C1B}
.prt-state.is-checking .prt-dot{background:var(--gold);color:#071F45}

.prt-state.is-confirmed{background:var(--live-tint);border-color:var(--live-line)}
.prt-state.is-confirmed h2{color:#0B5A3F}
.prt-state.is-confirmed p{color:#2F6B41}
.prt-state.is-confirmed .prt-dot{background:var(--live);color:#fff}

.prt-state.is-cancelled,.prt-state.is-unknown{background:var(--danger-tint);border-color:var(--danger-line)}
.prt-state.is-cancelled h2,.prt-state.is-unknown h2{color:#8A1D17}
.prt-state.is-cancelled p,.prt-state.is-unknown p{color:#7A2B25}
.prt-state.is-cancelled .prt-dot,.prt-state.is-unknown .prt-dot{background:var(--danger);color:#fff}

/* --------------------------------------------------------------------------
   The glance row - the figures at the top of the dashboard.

   The panel's stat tile, taken at the candidate's scale. What is borrowed is
   the shape: a chip of an icon, a display-face figure, a caption in small
   caps, and the gold hairline that draws itself across the top on hover.

   What is deliberately not borrowed is the panel's density. Three tiles at
   most rather than four, a shorter numeral, no sparkline under them, and
   every tile a link - a member of staff reading a count is doing their
   morning triage, where a candidate reading a percentage is asking a question
   whose answer is another screen.

   auto-fit rather than a fixed column count, because the row is built from
   whatever happens to be true today: it has to lay out one tile as readily as
   three, and it drops to a single column on a phone without being asked.
   -------------------------------------------------------------------------- */

.prt-tiles{
  display:grid;gap:12px;margin:0 0 20px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}

.prt-tile{
  position:relative;overflow:hidden;display:block;padding:17px 18px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s;
}
.prt-tile::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),rgba(200,154,42,0));
  transition:width .5s var(--ease);
}
.prt-tile:hover{
  border-color:var(--wait-line);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(9,41,92,.05),0 18px 34px -20px rgba(9,41,92,.4);
}
.prt-tile:hover::before{width:100%}

.prt-tile-ic{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:rgba(200,154,42,.13);border:1px solid rgba(200,154,42,.3);color:var(--accent);
}
.prt-tile.live .prt-tile-ic{
  background:var(--live-tint);border-color:var(--live-line);color:var(--live);
}

/* The figure. Anton, as every display number in this project is, and clamped
   short enough that a tile reading "Tomorrow" keeps it on one line beside one
   reading "42%" - this row mixes dates and percentages by design. */
.prt-tile-n{
  display:block;margin-top:15px;font-family:var(--display);font-weight:400;
  font-size:clamp(25px,3.2vw,31px);line-height:1;letter-spacing:.01em;color:var(--txt);
}
.prt-tile.gold .prt-tile-n{color:var(--accent-lg)}
.prt-tile.live .prt-tile-n{color:var(--live)}

.prt-tile-l{
  display:block;margin-top:8px;font:700 11px/1.3 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt);
}
.prt-tile-note{display:block;margin-top:6px;font-size:12.5px;color:var(--txt-2)}

/* The tile laid along its length instead of down its height, in the two
   places the stacked version wastes the room it is given:

   - a row of one, which is a real state (a course with sessions on it but
     nothing written up yet). Stretched the width of the page it is a number
     in a corner with acres of nothing beside it.
   - a phone, where three stacked tiles are most of the first screen and
     "Coming up" never gets seen.

   Explicit grid placement rather than auto-flow: the icon spans all three
   rows, and left to place itself the note would drop underneath it into the
   first column. */
.prt-tile:only-child{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;
  align-items:start;padding:16px 18px;
}
.prt-tile:only-child .prt-tile-ic{grid-column:1;grid-row:1 / span 3;align-self:center}
.prt-tile:only-child .prt-tile-n{grid-column:2;grid-row:1;margin-top:0}
.prt-tile:only-child .prt-tile-l{grid-column:2;grid-row:2;margin-top:4px}
.prt-tile:only-child .prt-tile-note{grid-column:2;grid-row:3;margin-top:3px}

@media (max-width:520px){
  .prt-tiles{gap:10px}
  .prt-tile{
    display:grid;grid-template-columns:auto 1fr;column-gap:13px;
    align-items:start;padding:15px 16px;
  }
  .prt-tile-ic{grid-column:1;grid-row:1 / span 3;align-self:center}
  .prt-tile-n{grid-column:2;grid-row:1;margin-top:0;font-size:25px}
  .prt-tile-l{grid-column:2;grid-row:2;margin-top:4px}
  .prt-tile-note{grid-column:2;grid-row:3;margin-top:3px}
}

/* --------------------------------------------------------------------------
   Card headers, and the chip on the end of one
   -------------------------------------------------------------------------- */

/* The panel's two-part header at this side's scale: the title, the line
   saying what the card is for, and one thing on the right - a chip carrying a
   state, or the link to the screen the card is a summary of.

   Cards with nothing to put on the right still use it, so the rule under the
   heading falls in the same place from one card to the next. That is the
   whole reason the dashboard's cards read as a set now and did not before,
   when each one opened with a bare h2 at its own spacing.

   .prt-card > h2 is untouched above: the other portal screens still use it
   and there was no reason to make them all move at once. */
.prt-card-hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:15px;margin-bottom:16px;border-bottom:1px solid var(--line-soft);
}
.prt-card-hd h2{
  margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
}
.prt-card-hd p{margin:4px 0 0;font-size:13px;color:var(--txt-2)}

.prt-tag{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;text-decoration:none;
  color:var(--txt-2);background:rgba(9,41,92,.04);border:1px solid var(--line);
}
a.prt-tag:hover{color:var(--accent);background:var(--wait-tint);border-color:var(--wait-line)}
.prt-tag .ic{opacity:.7}
.prt-tag.done{color:var(--live);background:var(--live-tint);border-color:var(--live-line)}
.prt-tag.wait{color:var(--accent);background:var(--wait-tint);border-color:var(--wait-line)}

/* Narrow enough and the chip has nowhere to sit beside a two-line heading, so
   it goes under it rather than squeezing the title into four words a line. */
@media (max-width:520px){
  .prt-card-hd{flex-direction:column;gap:9px}
}

/* --------------------------------------------------------------------------
   A person, named - the panel's feed row, for the one card that is not a
   figure. An initial in a disc is what makes a mentor read as somebody rather
   than as another labelled value.
   -------------------------------------------------------------------------- */

.prt-person{display:flex;align-items:center;gap:13px}
.prt-av{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy-800);color:#fff;font-weight:700;font-size:15px;line-height:1;
}
.prt-person-nm{margin:0;font-size:15px;font-weight:700;color:var(--navy-900)}
.prt-person-sub{margin:2px 0 0;font-size:13.5px;color:var(--txt-2)}

/* ---------- cards -------------------------------------------------------- */

.prt-card{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;margin:0 0 20px;
}
.prt-card > h2{
  margin:0 0 4px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
}
.prt-card > h2 + p{margin:0 0 16px;color:var(--txt-2);font-size:14px}

.prt-grid{display:grid;gap:0;margin:0}
.prt-grid > div{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.prt-grid > div:last-child{border-bottom:0;padding-bottom:0}
.prt-grid dt,.prt-grid .k{color:var(--txt-2);font-size:14px}
.prt-grid dd,.prt-grid .v{margin:0;font-weight:600;text-align:right;font-size:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}

/* ---------- profile completeness ----------------------------------------- */

.prt-meter{height:7px;border-radius:99px;background:rgba(9,41,92,.09);overflow:hidden;margin:14px 0 8px}
.prt-meter i{display:block;height:100%;background:var(--gold);border-radius:99px}
.prt-meter-txt{font-size:13px;color:var(--txt-2)}

/* ---------- forms -------------------------------------------------------- */

.fld{display:block;margin:0 0 16px}
.fld-lbl{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px;color:var(--txt)}
.fld-in{position:relative;display:block}
.fld-in .ic{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--txt-3);pointer-events:none;
}
.fld-in:has(.ic) input{padding-left:40px}

/* `time` was missing from this list, so every time field in the portal drew as
   the browser's own unstyled control - a bare pill beside a full-width date box
   in the same row. It went unnoticed because nothing here asked for a time until
   the mentor calendar did. */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],
input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--txt);background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;
}
/* The native pickers' own buttons, which inherit none of the above: without
   this they are a blue-grey system glyph on a navy-and-gold form. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;transition:opacity .15s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* Safari and iOS pad the field from inside rather than honouring the box, and
   a date and a time in one row come out different heights. */
input[type=date],input[type=time]{min-height:48px;appearance:none;-webkit-appearance:none}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value{text-align:left}
textarea{resize:vertical;min-height:110px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
       background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
input:focus,select:focus,textarea:focus{
  border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(14,53,114,.12);outline:none;
}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
.fld-err{display:block;margin-top:6px;font-size:13px;color:var(--danger)}
.fld-hint{display:block;margin-top:6px;font-size:13px;color:var(--txt-3)}

.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.fld-2{grid-template-columns:1fr}}

fieldset{border:0;margin:0 0 6px;padding:0}
legend{
  padding:0;margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
fieldset + fieldset{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-soft)}

.peek{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;color:var(--txt-3);cursor:pointer;line-height:0;
}
.peek:hover{color:var(--txt)}

.chk{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--txt-2);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--navy-800)}

/* ---------- buttons ------------------------------------------------------ */

.btn,.btn-go{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:14.5px;font-weight:700;line-height:1;cursor:pointer;
  border-radius:11px;padding:14px 22px;border:1px solid transparent;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-go{background:var(--gold);color:#071F45;width:100%}
.btn-go:hover{background:var(--gold-lt)}
.btn{background:#fff;border-color:var(--line);color:var(--navy-800)}
.btn:hover{background:rgba(9,41,92,.04)}
.btn.primary{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn.primary:hover{background:var(--navy-700)}
[data-busy]{opacity:.72;pointer-events:none}

.prt-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* --------------------------------------------------------------------------
   The caseload list, on the mentor's side of this sheet.

   A card each would be right for three candidates and unreadable at fifteen,
   so it is rows inside one card. The whole row is the link rather than the
   name alone: this is read on a phone, and a thumb aiming at fourteen
   characters of text is a thumb that misses.
   -------------------------------------------------------------------------- */
.prt-list{list-style:none;margin:0;padding:0}
.prt-list li + li{border-top:1px solid var(--line-soft)}
.prt-list a{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px 0;text-decoration:none;color:inherit;flex-wrap:wrap;
}
.prt-list a:hover .prt-list-nm{color:var(--accent);text-decoration:underline}
.prt-list-who{min-width:0}
.prt-list-nm{display:block;font-weight:700;font-size:15px;color:var(--navy-900)}
.prt-list-sub{display:block;margin-top:2px;font-size:13px;color:var(--txt-2)}

/* Small enough to sit at the end of a row, and the same three states the
   panel uses so a mentor and an administrator describing the same candidate
   on the phone are using the same word. */
.prt-chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;
  padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
}
.prt-chip.live{color:var(--live);background:var(--live-tint);border:1px solid var(--live-line)}
.prt-chip.wait{color:var(--wait);background:var(--wait-tint);border:1px solid var(--wait-line)}

.prt-back{margin:-6px 0 18px;font-size:14px}
.prt-back a{color:var(--txt-2);text-decoration:none}
.prt-back a:hover{color:var(--accent);text-decoration:underline}

/* A candidate's own words, set apart from the labelled rows around them
   because they are the one thing on that screen nobody wrote a field for. */
.prt-said{
  white-space:normal;line-height:1.65;color:var(--txt);
  padding:14px 16px;border-left:3px solid var(--gold);
  background:rgba(200,154,42,.06);border-radius:0 var(--radius) var(--radius) 0;
}

/* ---------- the sign-in screen ------------------------------------------- */

.prt-body.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 20px;background:
    radial-gradient(1100px 460px at 50% -10%,rgba(200,154,42,.1),transparent 60%),
    var(--navy-950);
}
.auth-card{
  width:100%;max-width:430px;background:var(--surf);border-radius:18px;
  padding:34px 32px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.auth-mark{display:flex;align-items:center;gap:10px;margin:0 0 26px;text-decoration:none}
.auth-mark img{height:30px;width:auto;filter:brightness(0) saturate(100%)}
.auth-mark span{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:700;padding-left:10px;border-left:1px solid var(--line);
}
.auth-card h1{
  margin:0;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1;
  color:var(--navy-900);
}
.auth-sub{margin:8px 0 22px;color:var(--txt-2);font-size:14px}
.auth-foot{
  margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--txt-3);line-height:1.6;
}
.auth-note{
  margin:0 0 18px;padding:12px 15px;border-radius:11px;font-size:14px;
  background:var(--live-tint);border:1px solid var(--live-line);color:#0B5A3F;
}

/* ---------- the calendar -------------------------------------------------

   One row per entry: when on the left, what on the right, stacking to one
   column on a phone. A finished session is dimmed rather than hidden - "what
   did I miss" is as real a question as "what is next" - and the one running
   now is the only row that gets a colour, because it is the only row anybody
   opening the portal mid-evening is looking for.
   ------------------------------------------------------------------------- */

.prt-cal{list-style:none;margin:0;padding:0}
.prt-cal > li{
  display:grid;grid-template-columns:150px 1fr;gap:6px 18px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.prt-cal > li:last-child{border-bottom:0;padding-bottom:0}
.prt-cal--brief > li:first-child{padding-top:0}

.prt-cal-when b{display:block;font-size:14px;font-weight:700;color:var(--navy-900)}
.prt-cal-when em{
  display:inline-block;margin-top:4px;font-style:normal;font-size:11.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);
}

.prt-cal-what > b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}

.prt-cal-type{
  display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--line-soft);border:1px solid var(--line);color:var(--txt-2);
}
/* One rule per type, so a type added to config/programme.php needs one line
   here and nothing else. */
.prt-cal-type--ws{background:rgba(200,154,42,.12);border-color:var(--wait-line);color:var(--wait)}
.prt-cal-type--mand{background:rgba(9,41,92,.07);border-color:var(--line);color:var(--navy-800)}
.prt-cal-type--core{background:rgba(15,122,85,.09);border-color:var(--live-line);color:var(--live)}
.prt-cal-type--opt{background:rgba(90,107,133,.1);border-color:var(--line);color:var(--slate)}
.prt-cal-type--oto{background:rgba(122,94,16,.1);border-color:var(--wait-line);color:var(--accent)}
.prt-cal-type--ms{background:rgba(11,42,91,.9);border-color:var(--navy-900);color:#fff}
.prt-cal-type--off{background:transparent;border-style:dashed;color:var(--txt-3)}

.prt-cal-clock{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.prt-cal-clock li{font-size:13px;color:var(--txt-2)}
.prt-cal-clock i{font-style:normal;font-weight:700;color:var(--txt-3);margin-right:5px}

.prt-cal-hours{display:inline-block;margin-top:8px;font-size:13px;color:var(--txt-3)}
.prt-cal-notes{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--txt-2)}

/* Dimmed, not hidden. */
.prt-cal > li.is-past{opacity:.55}

.prt-cal > li.is-live{
  background:var(--live-tint);border-radius:11px;
  padding-left:14px;padding-right:14px;margin:0 -14px;border-bottom-color:transparent;
}
.prt-cal > li.is-live .prt-cal-when em{color:var(--live)}

@media (max-width:620px){
  .prt-cal > li{grid-template-columns:1fr;gap:4px}
  .prt-cal > li.is-live{margin:0;padding-left:12px;padding-right:12px}
}

/* ---------- the library --------------------------------------------------

   A list of links, each one saying where it goes. The host is printed under
   the title rather than left to a hover: a candidate following a link from
   behind their own password should know whether it leads to rics.org or to
   somebody's file share before they click it.
   ------------------------------------------------------------------------- */

.prt-lib{list-style:none;margin:0;padding:0}
.prt-lib > li{position:relative;border-bottom:1px solid var(--line-soft)}
.prt-lib > li:last-child{border-bottom:0}

.prt-lib a{
  display:block;padding:13px 0;text-decoration:none;color:inherit;
  border-radius:9px;transition:background .14s var(--ease);
}
.prt-lib a:hover,.prt-lib a:focus-visible{background:var(--line-soft)}
.prt-lib a:hover b,.prt-lib a:focus-visible b{color:var(--accent)}

.prt-lib b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.prt-lib span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--txt-2)}
.prt-lib i{
  display:inline-block;margin-top:6px;font-style:normal;font-size:12.5px;
  font-weight:600;color:var(--txt-3);
}

.prt-lib-tag{
  position:absolute;top:15px;right:0;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(200,154,42,.12);border:1px solid var(--wait-line);color:var(--wait);
}

.prt-note{
  margin:14px 0 0;padding:11px 14px;border-radius:11px;font-size:13px;line-height:1.6;
  background:var(--line-soft);border:1px solid var(--line);color:var(--txt-2);
}

@media (max-width:620px){
  /* Below the title rather than beside it, where it would crowd the text. */
  .prt-lib-tag{position:static;display:inline-block;margin:0 0 10px}
}

/* ---------- print -------------------------------------------------------- */

@media print{
  .prt-bar,.prt-nav,.prt-acts,.skip{display:none}
  .prt-card,.prt-state{box-shadow:none;break-inside:avoid}
  /* A candidate printing their calendar wants all of it, the past included. */
  .prt-cal > li{break-inside:avoid;opacity:1}
}

/* ==========================================================================
   Locked candidate information - §5.2 / §31.1
   ========================================================================== */

/* A confirmed field reads as a value, not a disabled input: a greyed-out box
   invites clicking and then does nothing, which is the worst of both. */
.fld-locked .fld-in{display:flex;align-items:center;gap:8px;min-height:38px}
/* .fld-in .ic is absolutely positioned - it is the leading icon inside a text
   input. The lock is not that: it sits after the value, in normal flow, or it
   lands on top of the first two characters. */
.fld-locked .fld-in .ic{position:static;transform:none;color:inherit;pointer-events:auto}
.fld-val{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--txt);word-break:break-word}

/* The compact lock. §31.1: one icon, the same everywhere, and the word
   "Locked" never printed beside it - the tooltip carries the sentence. */
.fld-lock{flex:0 0 auto;display:inline-grid;place-items:center;width:22px;height:22px;
          border-radius:5px;color:var(--txt-3);cursor:help}
.fld-lock:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.prt-confirm{margin-top:18px}
.prt-confirm h2{font-size:16px;font-weight:700;margin-bottom:7px}
.prt-confirm p{font-size:13.5px;color:var(--txt-2);max-width:62ch;margin-bottom:12px}

/* ==========================================================================
   My Course - §5.3
   ========================================================================== */

/* The portal had no .notice - the admin panel did, and the course screen
   borrowed the class before it existed here, which left the icon stranded on
   its own line. Same shape as the panel's, in this side's palette. */
.notice{display:flex;gap:11px;margin-top:16px;padding:14px 16px;border-radius:10px;
        background:rgba(9,41,92,.04);border:1px solid var(--line-soft)}
.notice > div{display:grid;gap:5px;font-size:13.5px;color:var(--txt-2);min-width:0}
.notice b{font-weight:700;color:var(--txt)}
.notice .ic{flex:0 0 auto;margin-top:2px;color:var(--txt-3)}
.notice a{color:var(--accent);font-weight:600}

/* §5.3 on the tab bar: restrained weight, adequate contrast, visible keyboard
   focus, practical targets, all tabs on one line at desktop width, and
   horizontal scrolling rather than wrapping when there is not room. */
.crs-tabs{display:flex;gap:2px;margin-bottom:18px;overflow-x:auto;
          scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crs-tabs::-webkit-scrollbar{display:none}
/* 0 10px rather than 0 16px, and the gap tightened with it, because §5.3's
   seventh tab arrived and seven at the old spacing ran ~90px past the content
   column at desktop width. The strip scrolls, so nothing broke - but the last
   tab sat off the edge with no affordance saying so, which is the same as
   having no seventh tab. The 44px target §5.3 asks for is untouched: that is
   the height, and none of this changes it. */
.crs-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
            padding:0 10px;border-radius:9px;font-size:13.5px;font-weight:600;
            color:var(--txt-2);text-decoration:none;white-space:nowrap;
            border:1px solid transparent}
.crs-tabs a:hover{color:var(--txt);background:rgba(9,41,92,.04)}
.crs-tabs a[aria-current="page"]{color:var(--accent);background:#fff;
                                 border-color:var(--line);font-weight:700}
.crs-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The strip is drawn at every width again.

   It was hidden above 1081px on the grounds that the rail listed the same
   seven sections and drawing both was the same navigation twice. That was
   true, and it stopped being the right trade the moment the rail could not
   hold them: with the sections drawn the nav needs 642px and an ordinary
   1440x768 laptop gives it 565, so the rail was hiding Notifications in order
   to show a navigation the strip was already providing. A row of tabs over the
   content costs no rail height at all.

   The two are not duplicates now, because they answer different questions. The
   strip moves you between sections of the course you are already in. The
   rail's folded list takes you straight into one from somewhere else, which the
   strip cannot do because it is not on those screens. */

.crs-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
        margin-bottom:16px}
/* h3 as well as h2: a card that lists several things gives each one a heading,
   and those are children of the card's own heading rather than its siblings.
   They look identical because they are the same kind of label - the level is
   there for the outline, not for a size difference. */
.crs-hd h2,.crs-hd h3{font-size:17px;font-weight:700;margin:0 0 3px}
.crs-hd p{margin:0;font-size:13.5px;color:var(--txt-2)}

.crs-cta{display:block;margin-top:7px}

/* A closing aside inside a card - the sentence after the thing, in the card's
   quietest voice. The course overview was one of six screens using it and no
   longer does; the case study, the write-up, the mock and the assessment
   still do, which is why this stays. */
.crs-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
          font-size:13px;color:var(--txt-3)}

/* The five sections of §17, as the way into them.

   This replaces .crs-sections, which drew the same five as a numbered list of
   prose inside the card above. That list said nothing the tab strip did not
   already say, in four times the vertical space, and the page it made was the
   one somebody described as overcrowded: two cards, seven tabs and five
   paragraphs, all naming the same five things.

   Two columns rather than one, because these are peers a candidate picks
   between rather than steps read in order - and because five stacked rows of
   title-plus-blurb is exactly the wall of grey that was there before. The
   order still reads left-to-right, top-to-bottom, and the number on each card
   carries it for anybody who needs it said. */
/* ==========================================================================
   The course dashboard
   ========================================================================== */

/* The focus bar and its countdown share one band, so the deadline sits with
   the work rather than in a panel at the other end of the screen. */
/* The focus keeps the width.
   
   The countdown sat beside it as two blocks in a row, which needed ~335px of a
   1440px band and left the banner - the thing somebody is actually here to
   read - about 570. Stacked, the same two dates need 232px and the banner
   takes everything else. Nothing was dropped to do it; the dates just stopped
   being laid out sideways for no reason. */
.crs-focus-wrap{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:14px;
                align-items:stretch;margin:0 0 16px}
.crs-cd{display:grid;gap:14px;align-content:center;padding:18px 20px;
        background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
        box-shadow:var(--shadow)}
/* A hairline between the two, so they read as two dates rather than one
   paragraph of figures. */
.crs-cd > div + div{padding-top:14px;border-top:1px solid var(--line-soft)}
.crs-cd-n{margin:0;font:800 23px/1 var(--sans);color:var(--navy-900);font-variant-numeric:tabular-nums}
.crs-cd-n span{margin-left:4px;font-size:12px;font-weight:600;color:var(--txt-3)}
.crs-cd-l{margin:7px 0 0;font:700 10.5px/1.3 var(--sans);letter-spacing:.1em;
          text-transform:uppercase;color:var(--accent)}
.crs-cd-d{margin:3px 0 0;font-size:11.5px;color:var(--txt-3)}

/* The glance row. Four figures the brief defines separately - never one
   composite, which is the number §35.3 rules out. */
.crs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.crs-stat{display:flex;align-items:center;gap:14px;padding:15px 16px;min-width:0;
          background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
          box-shadow:var(--shadow);text-decoration:none;color:inherit;
          transition:border-color .18s,transform .18s var(--ease)}
.crs-stat:hover{border-color:var(--accent);transform:translateY(-1px)}
.crs-stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.crs-ring{flex:0 0 auto;width:50px;height:50px;display:block}
.crs-ring circle{fill:none;stroke-width:6}
.crs-ring .t{stroke:rgba(9,41,92,.09)}
.crs-ring .b{stroke-linecap:round;stroke:var(--accent);transition:stroke-dashoffset 1s var(--ease)}
.crs-ring .b.green{stroke:var(--live)}
.crs-ring text{font:800 13px/1 var(--sans);fill:var(--txt)}
/* Nothing to draw a ring for yet - a nought ring reads as failure where it is
   only a section nobody has begun. */
.crs-ring.is-none{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
                  background:rgba(9,41,92,.05);color:var(--txt-3)}

.crs-stat-tx{min-width:0;display:block}
.crs-stat-k{display:block;font:700 10px/1 var(--sans);letter-spacing:.13em;
            text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.crs-stat-v{display:block;font:800 18px/1.15 var(--sans);color:var(--txt);
            font-variant-numeric:tabular-nums}
.crs-stat-v i{margin-left:5px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--txt-2)}
.crs-stat-s{display:block;margin-top:5px;font-size:12px;color:var(--txt-2)}

.crs-tag{display:inline-block;padding:2px 8px;border-radius:999px;
         font:700 11px/1.5 var(--sans)}
.crs-tag.is-stop{background:var(--danger-tint);color:var(--danger)}
.crs-tag.is-wait{background:var(--wait-tint);color:var(--wait)}

/* Four views of one course. */
.crs-views{display:flex;gap:3px;margin:0 0 16px;overflow-x:auto;
           scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crs-views::-webkit-scrollbar{display:none}
.crs-view{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;
          padding:0 15px;border-radius:10px;border:1px solid transparent;background:transparent;
          font:600 13.5px/1 var(--sans);color:var(--txt-2);cursor:pointer;white-space:nowrap}
.crs-view:hover{background:rgba(9,41,92,.04);color:var(--txt)}
.crs-view[aria-selected="true"]{background:var(--surf);border-color:var(--line);
                                color:var(--navy-900);font-weight:700;box-shadow:var(--shadow)}
.crs-view:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crs-view .n{padding:3px 6px;border-radius:999px;background:rgba(9,41,92,.07);
             font:700 11px/1 var(--sans);color:var(--txt-2);font-variant-numeric:tabular-nums}
.crs-view[aria-selected="true"] .n{background:var(--wait-tint);color:var(--wait)}

/* The competency matrix - §18's set with §35's state on each. */
.crs-filters{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 14px}
.crs-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;
          border:1px solid var(--line);border-radius:999px;background:var(--surf);
          font:600 12.5px/1 var(--sans);color:var(--txt-2);cursor:pointer}
.crs-chip:hover:not(:disabled){border-color:var(--accent);color:var(--txt)}
.crs-chip[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.crs-chip:disabled{opacity:.45;cursor:default}
.crs-chip b{font-weight:800;opacity:.75;font-variant-numeric:tabular-nums}
.crs-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.crs-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:9px}
.crs-cmp{display:grid;gap:7px;text-align:left;padding:11px 12px 11px 13px;cursor:pointer;
         background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--txt-3);
         border-radius:10px;font-family:var(--sans);
         transition:transform .16s var(--ease),box-shadow .16s,border-color .16s}
.crs-cmp:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.crs-cmp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crs-cmp[aria-expanded="true"]{border-color:var(--navy-900);box-shadow:0 0 0 2px rgba(9,41,92,.1)}
/* The stripe is §35.4's outcome, not the percentage - 50% is "nobody has
   looked at it" and 60% is "sent back", and those want opposite colours. */
.crs-cmp.is-ok{border-left-color:var(--live)}
.crs-cmp.is-wait{border-left-color:var(--accent)}
.crs-cmp.is-stop{border-left-color:var(--danger)}
.crs-cmp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.crs-cmp-n{font-size:12.8px;font-weight:700;color:var(--txt);line-height:1.35}
.crs-cmp-l{flex:0 0 auto;padding:4px 5px;border-radius:5px;background:rgba(9,41,92,.06);
           font:800 10px/1 var(--sans);color:var(--txt-2)}
.crs-cmp-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crs-cmp-g{font:600 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3)}
.crs-cmp-p{font:800 12px/1 var(--sans);color:var(--navy-800);font-variant-numeric:tabular-nums}

/* One competency opened: §35.3's formula as the milestones it is made of. */
.crs-cmp-d{grid-column:1/-1;margin:2px 0 6px;padding:16px 18px;
           background:var(--bg);border:1px solid var(--line);border-radius:12px}
.crs-cmp-d h3{margin:0 0 3px;font-size:15px;font-weight:700;color:var(--navy-900)}
.crs-cmp-sub{margin:0 0 14px;font-size:12.5px;color:var(--txt-2)}
.crs-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crs-steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;
              gap:10px;font-size:13px;color:var(--txt-2)}
.crs-steps li.is-done{color:var(--txt)}
.crs-step-b{display:grid;place-items:center;width:19px;height:19px;border-radius:6px;
            border:1.5px solid var(--line);background:var(--surf);color:#fff}
.crs-steps li.is-done .crs-step-b{background:var(--live);border-color:var(--live)}
.crs-step-p{font:700 12px/1 var(--sans);color:var(--txt-3);font-variant-numeric:tabular-nums}
.crs-steps li.is-done .crs-step-p{color:var(--live)}
.crs-formula{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
             font-size:12px;color:var(--txt-3)}

/* §6.3's ten readiness areas, one line each. */
.crs-areas{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
/* 146px on the word, because "Requires improvement" is the longest of
   §6.3's five and wrapping it made every other row a different height. */
.crs-areas li{display:grid;grid-template-columns:minmax(0,1fr) 120px 146px;align-items:center;gap:12px}
.crs-areas b{font-size:13px;font-weight:600;color:var(--txt)}
.crs-track{display:flex;gap:3px}
.crs-track i{flex:1 1 0;height:7px;border-radius:2px;background:rgba(9,41,92,.09)}
.crs-track i.on{background:var(--accent)}
.crs-track i.on.hi{background:var(--live)}
.crs-area-w{font:700 12px/1 var(--sans);color:var(--txt-2);text-align:right}
.crs-area-w.is-none{font-weight:600;color:var(--txt-3)}

/* The intake as a timeline. */
.crs-tl{list-style:none;margin:16px 0 0;padding:0 0 0 22px;position:relative;display:grid}
.crs-tl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--line)}
.crs-tl li{position:relative;padding:11px 0 11px 6px;border-bottom:1px solid var(--line-soft)}
.crs-tl li:last-child{border-bottom:0}
.crs-tl li::before{content:"";position:absolute;left:-22px;top:17px;width:11px;height:11px;
                   border-radius:50%;background:var(--surf);border:2.5px solid var(--txt-3)}
.crs-tl li.is-done::before{background:var(--live);border-color:var(--live)}
.crs-tl li.is-missed::before{background:var(--surf);border-color:var(--danger)}
.crs-tl li.is-now::before{background:var(--accent);border-color:var(--accent);
                          box-shadow:0 0 0 4px var(--wait-tint)}
/* The two dates that end the programme are not sessions, and should not read
   as one more evening's teaching. */
.crs-tl li.is-milestone::before{border-radius:3px;transform:rotate(45deg);
                                background:var(--navy-900);border-color:var(--navy-900)}
.crs-tl li.is-milestone .crs-tl-t{color:var(--navy-900);font-weight:700}
.crs-tl-d{margin:0;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.crs-tl-t{margin:4px 0 0;font-size:13.5px;font-weight:600;color:var(--txt)}
.crs-tl-m{margin:2px 0 0;font-size:12.5px;color:var(--txt-2)}

.crs-panel-p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--txt-2)}

/* The next few sessions, as a date block and a title rather than a list of
   run-together strings. */
.crs-sess{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.crs-sess li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:start}
.crs-sess-d{text-align:center;border-radius:8px;background:rgba(9,41,92,.05);padding:5px 2px}
.crs-sess-d b{display:block;font:800 14px/1 var(--sans);color:var(--navy-900);font-variant-numeric:tabular-nums}
.crs-sess-d span{display:block;margin-top:3px;font:700 9.5px/1 var(--sans);letter-spacing:.09em;
                 text-transform:uppercase;color:var(--txt-3)}
.crs-sess-t{display:block;font-size:13px;font-weight:600;color:var(--txt);line-height:1.35}
.crs-sess-m{display:block;margin-top:2px;font-size:12px;color:var(--txt-2)}

@media (max-width:1100px){
  .crs-focus-wrap{grid-template-columns:minmax(0,1fr)}
  /* Under the banner rather than beside it, so the two dates go back to a row
     and the card does not become a tall narrow column of its own. */
  .crs-cd{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;align-items:center}
  .crs-cd > div + div{padding-top:0;border-top:0}
  .crs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .crs-stats{grid-template-columns:minmax(0,1fr)}
  .crs-cd{flex-wrap:wrap;gap:18px 26px}
  .crs-areas li{grid-template-columns:minmax(0,1fr) auto}
  .crs-areas .crs-track{grid-column:1/-1;order:3}
}

/* ==========================================================================
   The course dashboard - the working view
   ========================================================================== */

/* Two columns at desktop: the five sections on the left, and on the right the
   things that are true about this course but are nobody's section - the dates,
   the last review, the next session. One column below 1180px, where a 300px
   side column would squeeze the section cards into two lines of title. */
.crs-cols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;align-items:start}

/* The one thing to do next.
   
   Given the screen's opening position, which used to belong to the programme
   name and the intake - a fact somebody learns once and then reads every day
   for a year. This is the question they actually arrive with.
   
   Navy rather than a tinted notice: every other coloured band in the portal
   means something has happened *to* you - a payment cleared, a field is wrong.
   This one is something to do, and it should not look like either. */
.crs-next{
  display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:20px 22px;
  border-radius:var(--radius);text-decoration:none;
  background:linear-gradient(115deg,var(--navy-900),var(--navy-950));
  color:#fff;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(9,41,92,.06),0 14px 32px -20px rgba(9,41,92,.5);
  transition:transform .18s,box-shadow .18s;
}
a.crs-next:hover{transform:translateY(-1px);box-shadow:0 18px 38px -20px rgba(9,41,92,.6)}
a.crs-next:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.crs-next-tx{flex:1 1 auto;min-width:0;display:block}
/* The eyebrow says why this is the thing, which is most of what makes it
   believable - "Your mentor has replied" is a reason, "Next task" is a label. */
.crs-next-tx em{
  display:block;margin-bottom:5px;font:700 10.5px/1 var(--sans);font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.crs-next-tx b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.crs-next-tx > span{display:block;font-size:13.5px;line-height:1.55;color:rgba(231,236,245,.8);max-width:68ch}

.crs-next-go{
  flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  transition:background .18s,transform .18s;
}
a.crs-next:hover .crs-next-go{background:var(--gold);color:var(--navy-950);transform:translateX(2px)}

/* Work the mentor is waiting on, against work that is merely next. The eyebrow
   carries the difference in words; this carries it at a glance, and only for
   the one state where somebody else has stopped. */
.crs-next.is-returned{background:linear-gradient(115deg,#6E2018,var(--navy-950))}
.crs-next.is-returned .crs-next-tx em{color:#F0B7B1}
/* Nothing outstanding. Flat, quiet and not a link, because there is nowhere
   for it to go - a card you can press that does nothing is worse than a card
   you cannot. */
.crs-next.is-clear{
  background:var(--surf);border-color:var(--line);box-shadow:var(--shadow);color:var(--txt);
}
.crs-next.is-clear .crs-next-tx em{color:var(--live)}
.crs-next.is-clear .crs-next-tx > span{color:var(--txt-2)}

/* The side panels. Lighter than .prt-card on purpose - they are reference,
   not the body of the screen, and three full cards down the right would
   out-shout the five things somebody came here to do. */
.crs-panel{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 12px;box-shadow:var(--shadow);
}
.crs-panel h2{
  margin:0 0 12px;font:700 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);
}
.crs-panel-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;
}
.crs-panel-go:hover{text-decoration:underline}

.crs-dates{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.crs-dates li{display:grid;gap:2px}
.crs-dates b{font-size:13px;font-weight:700;color:var(--txt)}
.crs-dates span{font-size:14px;color:var(--txt);font-variant-numeric:tabular-nums}
.crs-dates em{font:600 12px/1 var(--sans);font-style:normal;color:var(--wait)}

.crs-fb-on{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--txt)}
.crs-fb-out{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--accent)}
.crs-fb-when{margin:0;font-size:12px;color:var(--txt-3)}

.crs-next-ttl{margin:0 0 4px;font-size:13.5px;font-weight:700;color:var(--txt);line-height:1.4}
.crs-next-when{margin:0;font-size:13px;color:var(--txt-2)}

/* Which course, which intake. The answer to a question somebody asks once. */
.crs-enrol{margin:14px 2px 0;font-size:12px;color:var(--txt-3)}

@media (max-width:1180px){
  .crs-cols{grid-template-columns:minmax(0,1fr)}
  /* Side by side rather than stacked once it drops below the sections: three
     short panels in a column is a lot of scrolling for reference material. */
  .crs-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start}
  .crs-enrol{grid-column:1/-1}
}
@media (max-width:620px){
  .crs-next{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  .crs-next-tx b{font-size:17px}
}

.crs-grid-hd{margin:26px 0 3px;font-size:16.5px;font-weight:700;
             letter-spacing:-.01em;color:var(--navy-900)}
.crs-grid-sub{margin:0 0 14px;font-size:14px;color:var(--txt-2)}

/* One column, not two.
   
   It was two while the grid had the whole content width. Beside a 296px side
   column the left half is about 700px, and two cards in that made "Summary of
   Experience" wrap to two lines with its percentage crushed against the edge.
   One column at 700px gives every row its title, its state and its bar on one
   line each, which is what makes the five scannable - and a list of five tasks
   is what this is now, rather than a menu of five places. */
.crs-grid{list-style:none;margin:0 0 20px;padding:0;
          display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* The fifth of five, alone on the last row, stretched full width looks like a
   different kind of thing. Left in its column instead. */
.crs-grid > li{display:flex;min-width:0}

.crs-sec{flex:1 1 auto;display:flex;align-items:flex-start;gap:13px;
         padding:16px 15px;min-width:0;
         background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
         box-shadow:var(--shadow);text-decoration:none;color:inherit;
         transition:border-color .18s,box-shadow .18s,transform .18s}
/* Lifts rather than tints: the cards sit on the same near-white the page uses,
   so a background change at this size reads as a selected state. */
a.crs-sec:hover{border-color:var(--accent);transform:translateY(-1px);
                box-shadow:0 6px 18px rgba(9,41,92,.09)}
a.crs-sec:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.crs-sec-ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
            border-radius:10px;background:rgba(9,41,92,.055);color:var(--accent)}
a.crs-sec:hover .crs-sec-ic{background:var(--accent);color:#fff}

.crs-sec-tx{flex:1 1 auto;min-width:0;display:block}
/* Flex so the percentage can sit at the right end of the title's row. The
   title still wraps; the figure never does, and never gets squeezed. */
.crs-sec-tx b{display:flex;align-items:baseline;gap:0;
              font-size:14.5px;font-weight:700;color:var(--txt);
              margin-bottom:3px;line-height:1.3}
.crs-sec-tx b em{
  margin-left:auto;flex:0 0 auto;font-style:normal;
  font-size:13px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
/* The step number, said once and quietly. A grid column reserved for it would
   be 5% of the card's width spent on something nobody navigates by. */
.crs-sec-tx b i{display:inline-block;margin-right:7px;font-style:normal;
                font-size:11px;font-weight:700;color:var(--txt-3);
                font-variant-numeric:tabular-nums}
.crs-sec-tx > span{display:block;font-size:13px;line-height:1.5;color:var(--txt-2)}

/* Where somebody has got to, once the activities are open. This takes the row
   the blurb had - the blurb is the sentence you read once, and the state is
   the line you read every time you open the screen. */
.crs-sec-st{display:block;font-size:13px;font-weight:600;line-height:1.5;color:var(--txt-2)}
/* Finished, running, and your turn. 'idle' keeps the default grey: a section
   nobody has started is not a problem, and colouring it would make four of the
   five shout on a candidate's first day. */
.crs-sec-st.is-done{color:var(--live)}
.crs-sec-st.is-live{color:var(--accent)}
.crs-sec-st.is-todo{color:var(--wait)}

.crs-sec-sub{display:block;margin-top:3px;font-size:12px;color:var(--txt-3)}

/* §35.3's calculated figure, drawn. The number is in the aria-label and the
   line above, so this is a picture of a fact rather than the only place it is
   stated - which is why it is a span with role="img" and not a <progress>.

   Only the three sections the brief defines a percentage for have one. CPD is
   hours against an annual reference and the mock is a count of bookings, and
   giving either a bar would draw a finish line nobody set. */
.crs-bar{display:block;height:4px;margin-top:8px;border-radius:999px;
         background:rgba(9,41,92,.09);overflow:hidden}
.crs-bar > span{display:block;height:100%;border-radius:999px;
                background:var(--accent);transition:width .3s var(--ease)}
.crs-sec-st.is-done ~ .crs-bar > span{background:var(--live)}

.crs-sec-go{flex:0 0 auto;display:grid;place-items:center;margin-top:8px;
            color:var(--txt-3);transition:color .18s,transform .18s}
a.crs-sec:hover .crs-sec-go{color:var(--accent);transform:translateX(2px)}

/* Shut, but still legible. Greying the text out would punish somebody for a
   state the notice above has already explained and offered the fix for - so
   only the affordances go: no lift, no arrow, a padlock instead. */
.crs-sec.is-shut{background:transparent;box-shadow:none;border-style:dashed;
                 border-color:var(--line-soft)}
.crs-sec.is-shut .crs-sec-ic{background:rgba(9,41,92,.035);color:var(--txt-3)}

@media (max-width:760px){
  .crs-grid{grid-template-columns:1fr}
  .crs-grid-hd{margin-top:20px}
}

/* ==========================================================================
   Account - the four settings screens, with their current state
   ========================================================================== */

/* Rows, not the course's card grid. Those five are peers somebody picks
   between; these four are a list somebody scans once looking for anything out
   of place - and a scan wants the statuses stacked in one column you can run
   an eye down, which two columns would break. */
.acc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}

.acc-row{display:flex;align-items:center;gap:14px;padding:16px 18px;min-width:0;
         background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
         box-shadow:var(--shadow);text-decoration:none;color:inherit;
         transition:border-color .18s,box-shadow .18s}
.acc-row:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(9,41,92,.09)}
.acc-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.acc-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
        border-radius:11px;background:rgba(9,41,92,.055);color:var(--accent);
        transition:background .18s,color .18s}
.acc-row:hover .acc-ic{background:var(--accent);color:#fff}

.acc-tx{flex:1 1 auto;min-width:0;display:block}
.acc-tx b{display:block;font-size:14.5px;font-weight:700;color:var(--txt);margin-bottom:2px}
.acc-tx > span{display:block;font-size:13px;line-height:1.5;color:var(--txt-2);max-width:56ch}

/* The status, and the reason the page exists. A pill rather than plain text:
   four of them down the right edge have to be findable as a column at a
   glance, which is the whole job - "Off" noticed in two seconds is worth more
   than any of the prose beside it. */
.acc-st{flex:0 0 auto;padding:4px 11px;border-radius:999px;
        font-size:12px;font-weight:700;white-space:nowrap;
        background:rgba(9,41,92,.05);color:var(--txt-2);
        border:1px solid transparent}
/* On, and nothing to do about it. */
.acc-st.is-on{background:var(--live-tint);color:var(--live);border-color:var(--live-line)}
/* Something of theirs is waiting - unread notices, a profile complete but not
   confirmed. Gold, which in this project means "your turn" rather than "wrong". */
.acc-st.is-todo{background:var(--wait-tint);color:var(--wait);border-color:var(--wait-line)}
/* Actually wrong, and in practice unreachable from inside the portal - the
   gate does not let an account past with the emailed password. Here because
   the row states a fact, and a fact that can only be reported one way is not
   being checked. */
.acc-st.is-warn{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line)}

.acc-go{flex:0 0 auto;display:grid;place-items:center;color:var(--txt-3);
        transition:color .18s,transform .18s}
.acc-row:hover .acc-go{color:var(--accent);transform:translateX(2px)}

.acc-note{margin:18px 2px 0;font-size:13px;line-height:1.6;color:var(--txt-3);max-width:70ch}

/* On a phone the four things on a row do not fit on a line. The icon and the
   title stay together, the status drops under the text rather than squeezing
   the title to nothing, and the chevron goes - the whole row is the target and
   at this width nothing else on screen looks like it. */
@media (max-width:620px){
  .acc-row{flex-wrap:wrap;gap:12px;padding:15px 16px}
  .acc-tx{flex:1 1 100%;order:2}
  .acc-st{order:3}
  .acc-go{display:none}
}

/* ==========================================================================
   Competencies - §18
   ========================================================================== */

/* A read-only list of what somebody is assessed on. No controls on the
   mandatory eleven, because §18.2's "non-removable" means there is nothing to
   press, and a disabled checkbox invites pressing it. */
.cmp-grp{margin:18px 0 8px;font:700 11px/1 var(--body);letter-spacing:.14em;
         text-transform:uppercase;color:var(--txt-3)}
.cmp-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
          background:var(--line-soft);border:1px solid var(--line-soft);border-radius:9px;
          overflow:hidden}
.cmp-list li{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#fff}
.cmp-nm{flex:1 1 auto;min-width:0;font-size:14px;color:var(--txt)}
.cmp-lvl{flex:0 0 auto;font:600 11px/1 var(--body);letter-spacing:.06em;
         color:var(--txt-3);white-space:nowrap}

/* The two real questions on the screen, marked out as choices rather than as
   more of the list above them. */
.cmp-choice{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px}
.cmp-choice legend{padding:0 6px;font:700 11px/1 var(--body);letter-spacing:.14em;
                   text-transform:uppercase;color:var(--accent)}
.cmp-opts{display:grid;gap:8px;margin-top:14px}
.cmp-opt{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
         border:1px solid var(--line-soft);border-radius:9px;background:#fff}
/* display:flex above beats the hidden attribute's own display:none, so the
   script that hides whichever branch member was taken as Core would disable
   the row and leave it on the screen. A browser test caught exactly that. */
.cmp-opt[hidden]{display:none}
.cmp-opt:hover{border-color:var(--line);background:rgba(9,41,92,.02)}
.cmp-opt:has(input:checked){border-color:var(--accent);background:rgba(200,154,42,.06)}
.cmp-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cmp-opt input{flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent);margin:0}
.cmp-choice .cmp-opt + .cmp-opt{margin-top:8px}

/* ==========================================================================
   CPD reflection, as multiple choice - §20, portal/cpd-reflect.blade.php and
   portal/cpd-entry.blade.php. Modelled on .cmp-opt/.cmp-choice above, the
   competencies screen's own "pick one of these" card, with a lettered badge
   added since a reflection question can run to four options rather than two.
   ========================================================================== */

.mcq-choice{display:grid;gap:9px;margin-top:14px}
.mcq-opt{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
         border:1px solid var(--line-soft);border-radius:11px;background:#fff;
         transition:border-color .15s,background .15s}
.mcq-opt:hover{border-color:var(--line);background:rgba(9,41,92,.02)}
.mcq-opt:has(input:checked){border-color:var(--accent);background:rgba(200,154,42,.06)}
.mcq-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.mcq-opt input{flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent);margin:0}
.mcq-letter{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
            border-radius:50%;background:var(--line-soft);font:700 12px/1 var(--body);
            color:var(--txt-2);transition:background .15s,color .15s}
.mcq-opt:has(input:checked) .mcq-letter{background:var(--accent);color:#fff}
.mcq-opt-text{flex:1 1 auto;font-size:14.5px;color:var(--txt)}

/* The verdict against a question already answered - portal/cpd-entry.blade.php
   and the mentor's read-out, both through partials/cpd-answer.blade.php. */
.mcq-ans{display:flex;align-items:center;gap:10px;margin:8px 0;padding:12px 14px;
         border-radius:11px;border:1px solid var(--line-soft);background:#fff;
         font-size:14.5px;color:var(--txt)}
.mcq-ans .ic{flex:0 0 auto}
.mcq-ans.is-right{border-color:var(--live-line);background:var(--live-tint);color:#0B5A3F}
.mcq-ans.is-right .ic{color:var(--live)}
.mcq-ans.is-wrong{border-color:var(--danger-line);background:var(--danger-tint);color:#8A1D17}
.mcq-ans.is-wrong .ic{color:var(--danger)}
.mcq-ans-pick{font-weight:700}
.mcq-ans-note{margin:0 0 4px;font-size:13.5px;color:var(--txt-2)}
.mcq-ans-desc{margin:0 0 4px;padding-left:10px;border-left:2px solid var(--line);
              font-size:13.5px;line-height:1.6;color:var(--txt-2)}

/* ==========================================================================
   Write-ups and word counts - §18.5 / §18.6
   ========================================================================== */

.crumb-back{margin:-6px 0 14px;font-size:13px}
.crumb-back a{color:var(--accent);font-weight:600}

/* The running total, shown continuously rather than on save. */
.wc-card{position:sticky;top:12px;z-index:2}
.wc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wc-lbl{margin:0 0 3px;font:700 11px/1 var(--body);letter-spacing:.13em;
        text-transform:uppercase;color:var(--txt-3)}
.wc-fig{margin:0;display:flex;align-items:baseline;gap:7px}
.wc-fig b{font-size:26px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.wc-fig span{font-size:13px;color:var(--txt-2)}

/* §18.6: the state is never colour alone - the element always carries the
   word too, and these only tint the badge it sits in. */
.wc-state{margin:0;padding:5px 11px;border-radius:999px;font:600 12px/1.4 var(--body)}
.wc-state[data-wc-state="normal"]{background:rgba(31,107,78,.10);color:#1B5E45}
.wc-state[data-wc-state="approaching"]{background:rgba(200,154,42,.16);color:#7A5E10}
.wc-state[data-wc-state="over"]{background:rgba(163,59,38,.12);color:#8E3522}

.wu-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.wu-hd h2{margin:0;font-size:16px;font-weight:700}
.wu-count{margin:0;font-size:12.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.wu-count b{color:var(--txt-2);font-weight:700}
.wu-prompt{margin:5px 0 14px;font-size:13.5px;color:var(--txt-2);max-width:64ch}

.wu-saved{font-size:12.5px;color:var(--txt-3)}

/* A submitted write-up, read back. Wraps and keeps the candidate's line
   breaks: it is prose somebody wrote, not a field value. */
.wu-read{font-size:14.5px;line-height:1.75;color:var(--txt);white-space:normal;
         margin:0 0 18px;max-width:74ch}

/* §18.6's second confirmation. The tick is inside the notice rather than
   below it, so the wording it agrees to is what it sits next to. */
.wc-over{margin-top:0}
.wc-ack{display:flex;align-items:flex-start;gap:10px;margin-top:11px;
        padding-top:11px;border-top:1px solid var(--line-soft);cursor:pointer}
.wc-ack input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--accent)}
.wc-ack span{font-size:13px;color:var(--txt)}

/* An admin's or a mentor's own checklist for one candidate's Case Study -
   portal/case-study.blade.php. Each item is a .wc-ack row, so a checklist of
   three reads as three of the same divided rows §18.6's single acknowledgement
   already uses rather than a shape of its own. */
.cl-items{list-style:none;margin:0;padding:0}
.cl-items li{margin:0}

/* The two totals side by side on the workspace, stacking on a phone. */
.wc-pair{display:grid;gap:12px;margin-top:18px}
.wc-pair .wc-row{padding:13px 15px;border:1px solid var(--line-soft);border-radius:10px}
.cmp-lnk{color:var(--txt);text-decoration:none;font-weight:600}
.cmp-lnk:hover{color:var(--accent);text-decoration:underline}
.cmp-words{flex:0 0 auto;font-size:12px;color:var(--txt-3);white-space:nowrap}
@media (min-width:620px){.wc-pair{grid-template-columns:1fr 1fr}}

/* The calculated percentage, wherever it appears on the candidate's side.
   Same shape as the panel's, in this side's palette. Nothing accepts one. */
.rv-pct{flex:0 0 auto;padding:4px 10px;border-radius:999px;
        font:700 12px/1 var(--body);font-variant-numeric:tabular-nums}
.rv-pct[data-rv-state="idle"]{background:rgba(9,41,92,.05);color:var(--txt-3)}
.rv-pct[data-rv-state="live"]{background:rgba(200,154,42,.16);color:#7A5E10}
.rv-pct[data-rv-state="done"]{background:rgba(31,107,78,.12);color:#1B5E45}

/* The milestone breakdown - §35.6 wants the working shown, not just a figure. */
.pg-bar{height:7px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin:10px 0 14px}
.pg-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.pg-parts{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pg-parts li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--txt-2)}
.pg-parts .ic{flex:0 0 auto;color:var(--txt-3)}
.pg-parts li[data-earned="1"]{color:var(--txt)}
.pg-parts li[data-earned="1"] .ic{color:#1B5E45}
.pg-pts{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--txt-3);font-size:12.5px}
.fb-item{padding:13px 0;border-bottom:1px solid var(--line-soft)}
.fb-item:last-child{border-bottom:0}
.fb-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.fb-hd b{font-size:14px}
.fb-hd span{font-size:12.5px;color:var(--txt-3)}
.fb-body{font-size:14px;line-height:1.7;color:var(--txt-2);max-width:70ch}
.fb-dl{margin:10px 0 0;font-size:13px}

/* File inputs - §19's two uploads.
   A native file control inside .fld-in reads as unfinished next to the rest of
   the form: the browser's own button keeps its platform styling whatever the
   wrapper does. Styling the button part directly is the only way to make it
   look like it belongs, and it degrades to the native control where the
   pseudo-element is not supported. */
.fld-in input[type=file]{width:100%;padding:9px 0;font:inherit;font-size:13.5px;
                         color:var(--txt-2);background:transparent;border:0}
.fld-in input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 14px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;
  color:var(--txt);background:rgba(9,41,92,.05);
  border:1px solid var(--line);
}
.fld-in input[type=file]::file-selector-button:hover{
  background:rgba(9,41,92,.09);border-color:var(--line-firm,var(--line));
}
.fld-in:has(input[type=file]){padding:0 13px}

/* Textareas inside .fld-in - the CPD reflection and anywhere else a field
   wrapper holds one. The wrapper was built round a single-line input. */
.fld-in textarea{width:100%;min-height:96px;padding:11px 0;font:inherit;
                 font-size:14.5px;line-height:1.6;color:var(--txt);
                 background:transparent;border:0;outline:0;resize:vertical}
.fld-in:has(textarea){min-height:0;padding:2px 13px}

/* §6's two positions, side by side - the declaration and the recommendation.
   Stacked on a phone, because side-by-side at 380px is two columns of two
   words each. */
.as-pair{display:grid;gap:12px;margin:16px 0}
.as-side{padding:13px 15px;border:1px solid var(--line-soft);border-radius:10px}
.as-val{margin:3px 0 0;font-size:15px;font-weight:600;color:var(--txt)}
@media (min-width:620px){.as-pair{grid-template-columns:1fr 1fr}}

/* Two-step sign-in. The QR code sits on its own white square whatever card is
   behind it, because a scanner needs the contrast and the quiet zone. The
   recovery codes are two columns even on a phone: ten characters fit, and a
   list of eight that has to be scrolled is one somebody copies half of. */
.tf-qr{display:inline-block;margin:4px 0 14px;padding:10px;background:#fff;
       border:1px solid var(--line);border-radius:10px;line-height:0}
.tf-qr svg{display:block;width:192px;height:192px}
.tf-key{margin:4px 0 0;font-size:15px;letter-spacing:.08em;color:var(--txt);word-break:break-word}
.tf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;
          margin:14px 0 0;padding:0;list-style:none}
.tf-codes li{padding:9px 10px;border:1px dashed var(--line);border-radius:8px;text-align:center;
             font-size:14.5px;letter-spacing:.04em;color:var(--txt)}
.tf-cancel{margin-top:10px}
.tf-cancel .btn{width:100%;justify-content:center}

/* ---------- §5.4's notification centre ----------------------------------- */

.prt-notices{list-style:none;margin:18px 0 0;padding:0}
.prt-notices li + li{margin-top:8px}
/* The whole row is the link: a title with a target the width of the words is
   a target somebody misses on a phone. */
.prt-notices a{
  display:block;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surf);
  text-decoration:none;color:inherit;transition:border-color .2s,background .2s;
}
.prt-notices a:hover{border-color:var(--gold);background:rgba(200,154,42,.06)}
.prt-notices b{display:block;font-size:15px;font-weight:700;color:var(--txt)}
.prt-notices span{display:block;margin-top:3px;font-size:14px;color:var(--txt-2)}
.prt-notices time{display:block;margin-top:6px;font-size:12.5px;color:var(--txt-3)}
/* Unread says so in a word as well as in weight - never by colour alone. */
.prt-notices .is-unread a{border-color:var(--gold)}
.prt-notice-new{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;
  background:var(--gold);color:#10233F;
  font:700 10.5px/1.6 var(--sans);font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:1px;
}

/* ---------- the payment schedule (docs/payments.md) ---------------------- */

/* A list rather than a table. Four columns of two words each is a table that
   has to scroll sideways on a phone, and the amount is the one thing on the row
   that must never wrap away from its label - so the row wraps and the figure
   stays with the name it belongs to. */
.prt-pay{list-style:none;margin:18px 0 0;padding:0;counter-reset:none}
.prt-pay li{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line-soft);
}
.prt-pay li:first-child{border-top:0}
.prt-pay-who{flex:1 1 200px;min-width:0}
.prt-pay-nm{display:block;font-weight:700;font-size:15px;color:var(--navy-900)}
.prt-pay-sub{display:block;margin-top:2px;font-size:13px;color:var(--txt-2)}
.prt-pay-amt{
  flex:0 0 auto;font:700 16px/1.2 var(--sans);color:var(--txt);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* The one still to pay earns the gold rail - the same device the rail uses for
   the current section, rather than a second idea for the same job. */
.prt-pay li.is-next{
  box-shadow:inset 3px 0 0 var(--gold);padding-left:13px;
  background:rgba(200,154,42,.05);border-radius:0 8px 8px 0;
}
.prt-pay li.is-paid .prt-pay-amt{color:var(--txt-2)}

/* A chip with no state named. The two modifiers cover paid and waiting; an
   instalment nobody has done anything to yet is neither, and it was rendering
   as bare text. */
.prt-chip{color:var(--txt-2);background:rgba(9,41,92,.05);border:1px solid var(--line)}

/* ---------- the mentor calendar (docs/mentor-calendar.md) ---------------- */

.mcal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.mcal-move{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mcal-move .btn{min-height:38px;padding:8px 12px}
/* One icon, two directions. A second glyph for "later" would be a second thing
   to keep in step with the first. The shared icon points right, so it is the
   *back* arrow that turns - which is the way round it was not, at first. */
.mcal-back .ic{transform:rotate(180deg)}
.mcal-label{margin:0;font-size:17px;font-weight:700;color:var(--navy-900);white-space:nowrap}
.mcal-views{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(9,41,92,.06)}
.mcal-views a{
  padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--txt-2);text-decoration:none;transition:background .2s,color .2s;
}
.mcal-views a:hover{color:var(--navy-900)}
.mcal-views a[aria-current]{background:var(--surf);color:var(--navy-900);box-shadow:var(--shadow)}
.mcal-zone{margin-top:14px}

/* The grid itself. One gutter column for the clock, seven for the week. */
.mcal-card{overflow:hidden}
.mcal{--mcal-gutter:52px;--mcal-hours:13;min-width:680px}
.mcal-head,.mcal-allday{display:grid;grid-template-columns:var(--mcal-gutter) repeat(7,1fr);gap:0}
.mcal-gutter{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
             color:var(--txt-3);padding:6px 8px 6px 0;text-align:right}
.mcal-dayhd{
  padding:8px 6px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-3);border-left:1px solid var(--line-soft);
}
.mcal-dayhd b{display:block;margin-top:2px;font-size:18px;letter-spacing:0;
              text-transform:none;color:var(--navy-900)}
.mcal-dayhd.is-today{color:var(--accent)}
.mcal-dayhd.is-today b{color:var(--accent)}

.mcal-allday{border-top:1px solid var(--line-soft);padding-bottom:6px}
.mcal-band{display:flex;flex-direction:column;gap:3px;padding:6px 4px;
           border-left:1px solid var(--line-soft);min-width:0}

.mcal-body{display:grid;grid-template-columns:var(--mcal-gutter) 1fr;
           border-top:1px solid var(--line-soft)}
/* The clock labels sit at the top of the line they name, so 09:00 is level with
   where a nine o'clock block begins. */
.mcal-hours{display:grid;grid-template-rows:repeat(var(--mcal-hours),1fr);
            font-size:11px;color:var(--txt-3);text-align:right}
.mcal-hours span{padding:0 8px 0 0;transform:translateY(-6px)}
.mcal-cols{display:grid;grid-template-columns:repeat(7,1fr);height:calc(var(--mcal-hours) * 44px)}
.mcal-col{
  position:relative;border-left:1px solid var(--line-soft);min-width:0;
  /* The hour lines, as decoration rather than thirteen empty elements a column. */
  background-image:repeating-linear-gradient(
    to bottom, var(--line-soft) 0 1px, transparent 1px calc(100% / var(--mcal-hours))
  );
  background-size:100% calc(100% / var(--mcal-hours));
}
.mcal-col.is-today{background-color:rgba(200,154,42,.05)}
.mcal-col.is-past{background-color:rgba(9,41,92,.02)}

.mcal-ev{
  position:absolute;overflow:hidden;padding:4px 6px;border-radius:7px;
  font-size:11.5px;line-height:1.35;
  border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow);
}
.mcal-ev b{display:block;font-weight:700;color:var(--navy-900);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcal-ev i{display:block;font-style:normal;color:var(--txt-2);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcal-ev.is-live{outline:2px solid var(--gold);outline-offset:-2px}

/* One colour per kind of thing, taken from the session-type palette the portal
   and the public schedule already use - so a Core Competency is the same colour
   on a mentor's week as on a candidate's list. */
.mcal-t-core,.mcal-chip.mcal-t-core{border-left:3px solid #2E6FB7}
.mcal-t-mand,.mcal-chip.mcal-t-mand{border-left:3px solid #7A4FB5}
.mcal-t-ws,.mcal-chip.mcal-t-ws{border-left:3px solid #1E8A6E}
.mcal-t-opt,.mcal-chip.mcal-t-opt{border-left:3px solid #4E8FA8}
.mcal-t-oto,.mcal-chip.mcal-t-oto{border-left:3px solid var(--gold);background:rgba(200,154,42,.09)}
.mcal-t-ms,.mcal-chip.mcal-t-ms{border-left:3px solid #C0544A}
.mcal-t-off,.mcal-chip.mcal-t-off{border-left:3px solid var(--txt-3);background:rgba(9,41,92,.04)}
/* An offered time nobody has taken: drawn as available rather than as a
   commitment, because that is what it is. */
.mcal-t-open{border-left:3px solid var(--live);background:rgba(15,122,85,.07);border-style:dashed}

.mcal-chip{
  display:block;padding:3px 7px;border-radius:5px;font-size:11px;font-style:normal;
  font-weight:600;color:var(--txt);background:var(--surf);border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mcal-chip-t{color:var(--txt-3);font-weight:700;margin-right:3px}

/* The month sheet. */
.mcal-month{min-width:680px}
.mcal-month-hd{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.mcal-month-hd span{padding:6px 8px;font-size:11px;font-weight:700;letter-spacing:.06em;
                    text-transform:uppercase;color:var(--txt-3)}
.mcal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);
                 border-top:1px solid var(--line-soft)}
.mcal-cell{
  display:flex;flex-direction:column;gap:3px;min-height:104px;padding:6px;
  border-left:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);min-width:0;
}
.mcal-cell:nth-child(7n+1){border-left:0}
.mcal-cell.is-other{background:rgba(9,41,92,.02)}
.mcal-cell.is-other .mcal-cell-d{color:var(--txt-3)}
.mcal-cell.is-today{background:rgba(200,154,42,.06)}
.mcal-cell-d{align-self:flex-start;min-width:24px;padding:1px 5px;border-radius:6px;
             font-size:12.5px;font-weight:700;color:var(--navy-900);text-decoration:none}
.mcal-cell-d:hover{background:rgba(9,41,92,.07)}
.mcal-cell.is-today .mcal-cell-d{background:var(--gold);color:#10233F}
.mcal-more{font-size:11px;font-weight:700;color:var(--accent);text-decoration:none}
.mcal-more:hover{text-decoration:underline}

/* Both grids scroll sideways below their minimum rather than reflowing into
   something unreadable - and the agenda, which needs no minimum at all, is one
   press away for anybody on a phone. */
@media (max-width:860px){
  .mcal-card{overflow-x:auto}
  .mcal-label{white-space:normal}
}

/* The agenda. */
.mcal-agenda{list-style:none;margin:18px 0 0;padding:0}
.mcal-agenda > li + li{margin-top:22px}
.mcal-agenda h3{
  margin:0 0 8px;font-size:14px;font-weight:700;color:var(--navy-900);
  padding-bottom:6px;border-bottom:1px solid var(--line-soft);
}
.mcal-agenda h3.is-today{color:var(--accent)}
.mcal-agenda h3 em{
  margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--gold);color:#10233F;
  font:700 10.5px/1.6 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;
}
.mcal-agenda ul{list-style:none;margin:0;padding:0}
.mcal-agenda ul li{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.mcal-agenda ul li:last-child{border-bottom:0}
.mcal-agenda ul li.is-live{box-shadow:inset 3px 0 0 var(--gold);padding-left:13px}
.mcal-a-when{flex:0 0 72px;font-size:13px;font-weight:700;color:var(--navy-900);
             font-variant-numeric:tabular-nums}
.mcal-a-when i{display:block;font-style:normal;font-weight:400;color:var(--txt-3)}
.mcal-a-what{flex:1 1 200px;min-width:0}
.mcal-a-what b{display:block;font-size:15px;font-weight:700;color:var(--navy-900)}
.mcal-a-what > span{display:block;margin-top:2px;font-size:13px;color:var(--txt-2)}

.mcal-do{margin-top:8px}
.mcal-do summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--accent)}
.mcal-do-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.mcal-do-row input{min-height:36px;padding:7px 10px;border:1px solid var(--line);
                   border-radius:8px;background:var(--surf);font:inherit;font-size:13px;
                   color:var(--txt);min-width:0}
.mcal-do-row input[type=text]{flex:1 1 200px}
.mcal-do-row input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,154,42,.16)}
.mcal-do-row .btn{min-height:36px;padding:7px 12px;font-size:13px}

/* The two writes under the calendar, side by side where there is room. */
.mcal-forms{display:grid;gap:var(--gap,18px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Date, from and to belong on one line - they are one thought. 110px is what
   lets all three sit together inside a form that is itself half a wide screen;
   at 130 the "to" dropped to a row of its own and the form read as five
   questions instead of three. */
.mcal-row{display:flex;flex-wrap:wrap;gap:12px}
.mcal-row .fld{flex:1 1 110px;min-width:0;margin:0}

/* ---------- the mentor area (docs/mentor-area.md) ----------------------- */

/* The rail's group heading is a label on this side, not a link: there is no
   account screen here for it to open. It must not offer a hover state it cannot
   honour. */
p.prt-sb-grp{cursor:default}
p.prt-sb-grp:hover{opacity:.62;color:var(--sb-txt);background:transparent}

/* Two cards side by side where there is room for them - what is next, and what
   has been sent in. They are the two halves of "what needs me", and reading one
   under the other on a wide screen wastes the width the rail left. */
.mnt-grid{display:grid;gap:var(--gap,18px);grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
          margin:0 0 var(--gap,18px);
          /* Each card is as tall as what is in it. Stretched, a card saying
             "nothing waiting on you" grows to match the list beside it and
             reads as a panel that failed to load. */
          align-items:start}

.mnt-next{list-style:none;margin:16px 0 0;padding:0}
.mnt-next li{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--line-soft);
}
.mnt-next li:first-child{border-top:0;padding-top:0}
/* Whatever is happening now earns the gold rail - the same device the calendar
   and the rail itself use, rather than a third idea for the same job. */
.mnt-next li.is-live{box-shadow:inset 3px 0 0 var(--gold);padding-left:13px}
.mnt-next-when{flex:0 0 84px;font-size:13px;font-variant-numeric:tabular-nums}
.mnt-next-when b{display:block;font-weight:700;color:var(--navy-900)}
.mnt-next-when i{display:block;font-style:normal;color:var(--txt-3)}
.mnt-next-what{flex:1 1 180px;min-width:0}
.mnt-next-what b{display:block;font-size:15px;font-weight:700;color:var(--navy-900)}
.mnt-next-what span{display:block;margin-top:2px;font-size:13px;color:var(--txt-2)}

/* The one form on a candidate's page, folded away: reading is what somebody
   came here for, and a form standing open under every candidate is one that
   gets filled in by accident. */
.mnt-do{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mnt-do summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--accent)}
.mnt-do form{margin-top:14px}
/* A list row that is not a link - the waiting list on a candidate's page names
   what is sitting with the practice, and there is nowhere for a mentor to press.
   Without this it keeps the anchor's layout and loses its own. */
.prt-list li > .prt-list-who{padding:14px 0}
.prt-list li:has(> .prt-list-who){display:flex;align-items:center;gap:14px;
                                  justify-content:space-between;flex-wrap:wrap}

/* ---------- the calendar's composer ------------------------------------- */

/* The free hours under the entries. Invisible until pointed at: a grid drawn
   with eighty-four visible boxes is a grid nobody can read the appointments in,
   and the affordance is only needed at the moment somebody reaches for it. */
.mcal-slot{
  position:absolute;left:0;width:100%;display:block;border-radius:6px;
  background:transparent;transition:background .15s;
}
.mcal-col:not(.is-past) .mcal-slot:hover{background:rgba(200,154,42,.16);cursor:copy}
.mcal-slot:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* The entries sit over the free hours, so a press on a booking is a press on
   the booking. */
.mcal-ev{z-index:1}
/* What a drag is sizing. Same colour as the hover, so the two read as one
   gesture rather than two features. */
.mcal-drag{
  position:absolute;left:0;width:100%;z-index:2;pointer-events:none;
  border-radius:7px;background:rgba(200,154,42,.3);border:1px dashed var(--gold);
}

.mcal-compose{scroll-margin-top:90px}
.mcal-modes{display:flex;gap:2px;margin:0 0 16px;padding:3px;border-radius:999px;
            background:rgba(9,41,92,.06);align-self:flex-start;width:fit-content}
.mcal-modes a{
  display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--txt-2);text-decoration:none;
  transition:background .2s,color .2s;
}
.mcal-modes a:hover{color:var(--navy-900)}
.mcal-modes a[aria-current]{background:var(--surf);color:var(--navy-900);box-shadow:var(--shadow)}
.mcal-chosen{
  margin:0 0 16px;padding:10px 14px;border-radius:10px;font-size:14px;color:var(--txt-2);
  background:rgba(200,154,42,.09);border:1px solid var(--line-gold,rgba(200,154,42,.3));
}
.mcal-chosen b{color:var(--navy-900);font-variant-numeric:tabular-nums}

.mcal-undo{margin:-6px 0 16px}
.mcal-undo .btn{min-height:38px;padding:8px 14px;font-size:13.5px}

/* An hour set aside for a one-to-one rather than a mock. The gold of a
   one-to-one with the dash of an offer, so it reads as both at a glance. */
.mcal-t-open-oto{border-left:3px dashed var(--gold);background:rgba(200,154,42,.08);border-style:dashed}

/* The pattern form: a sentence about when somebody is free, as fields. */
.mcal-pattern fieldset{border:0;margin:0 0 16px;padding:0}
.mcal-pattern legend{padding:0}
.mcal-kinds,.mcal-days{display:flex;flex-wrap:wrap;gap:8px 18px}
.mcal-kinds .chk,.mcal-days .chk{margin:0}
/* The weekdays read as a row of switches rather than a list of questions. */
.mcal-days .chk{
  padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surf);
  font-size:13px;transition:border-color .2s,background .2s;
}
.mcal-days .chk:has(input:checked){border-color:var(--gold);background:rgba(200,154,42,.1)}
.mcal-days .chk:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* What the pattern adds up to, beside the button rather than under a heading:
   it is a footnote to the press, not a section. */
.mcal-count{margin:0;font-size:13.5px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.mcal-count:empty{display:none}

/* The confirm dialog. Native <dialog>, so the backdrop, the focus trap and
   Escape are the browser's own. */
.mcal-dialog{
  width:min(440px,calc(100vw - 32px));padding:24px;border:0;border-radius:var(--radius);
  background:var(--surf);color:var(--txt);box-shadow:0 24px 60px rgba(9,25,54,.28);
}
.mcal-dialog::backdrop{background:rgba(9,25,54,.45)}
.mcal-dialog h3{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--navy-900)}
.mcal-dialog p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--txt-2)}
.mcal-dialog-note{font-size:13px !important;color:var(--txt-3) !important}
.mcal-dialog-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.mcal-do-row select{min-height:36px;padding:7px 10px;border:1px solid var(--line);
                    border-radius:8px;background:var(--surf);font:inherit;font-size:13px;
                    color:var(--txt);min-width:0}

/* --------------------------------------------------------------------------
   Session recordings - docs/session-media.md.

   Two screens on one sheet: the mentor's upload list, and the candidate's
   player. They share `.smd-*` for the row because it is the same row seen from
   two sides, which is the judgement this stylesheet already makes about the
   rail.
   -------------------------------------------------------------------------- */

.smd-sessions{display:grid;gap:10px;margin-top:4px}
.smd-sessions > li{border:1px solid var(--line);border-radius:12px;background:var(--surf);
                   overflow:hidden}
.smd-sessions summary{cursor:pointer;padding:14px 16px;list-style:none}
.smd-sessions summary::-webkit-details-marker{display:none}
.smd-sessions summary:hover{background:rgba(9,41,92,.03)}
.smd-sessions details[open] > summary{border-bottom:1px solid var(--line-soft)}
.smd-sum{display:grid;gap:3px;line-height:1.35}
.smd-sum b{font-size:14.5px;color:var(--txt);font-weight:700}
.smd-sum i{font-style:normal;font-size:12.5px;color:var(--txt-3)}

.smd-list{display:grid;gap:12px;padding:14px 16px}
.smd-item{padding:12px;border:1px solid var(--line);border-radius:11px}
.smd-item.is-waiting{box-shadow:inset 3px 0 0 var(--gold);background:var(--wait-tint)}
.smd-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.smd-thumb{flex:0 0 auto;width:104px;height:59px;display:grid;place-items:center;overflow:hidden;
           border-radius:8px;background:rgba(9,41,92,.05);border:1px solid var(--line);
           color:var(--txt-3)}
.smd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.smd-what{display:grid;gap:2px;min-width:0;flex:1 1 200px;line-height:1.35}
.smd-what b{font-size:14.5px;color:var(--txt);font-weight:700}
.smd-what i{font-style:normal;font-size:12.5px;color:var(--txt-3)}
.smd-state{font-weight:600;color:var(--txt-2)}
.smd-state.is-bad{color:var(--danger)}
/* Compact, because these sit inside a row rather than at the foot of a form. */
.smd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.smd-acts .btn{padding:9px 14px;font-size:13px}
.smd-form{padding:0 16px 16px}

/* --------------------------------------------------------------------------
   The player.

   `aspect-ratio` on the wrapper rather than a height on the video: a 16:9 box
   that is reserved before the file loads is a page that does not jump when it
   does. Black behind it, because the letterboxing on a 4:3 recording of
   somebody's screen share has to be *something*, and grey reads as a broken
   image.
   -------------------------------------------------------------------------- */

.prt-vid{margin-top:14px;border-radius:12px;overflow:hidden;background:#000;
         border:1px solid var(--line);aspect-ratio:16/9}
.prt-vid video{display:block;width:100%;height:100%;background:#000}
.prt-vid-meta{margin-top:9px;font-size:12.5px;color:var(--txt-3)}

/* The calendar's link through to a session that has something on it. Only
   drawn where there is - see portal/calendar.blade.php. */
.prt-cal-rec{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
             font-size:13px;font-weight:700;color:var(--navy-700)}
.prt-cal-rec:hover{text-decoration:underline}
.prt-cal-rec .ic{opacity:.8}

/* The joining link, sized down from the full-width form button it shares its
   class with - this sits inline in a calendar row, not under a form. */
.prt-cal-join{margin-top:9px;padding:9px 16px;font-size:13px}

@media (max-width:640px){
  .smd-thumb{width:100%;height:auto;aspect-ratio:16/9}
}

/* --------------------------------------------------------------------------
   Reviews, on the mentor's side of this sheet.

   Rows of the same list the caseload uses, with somebody's initial at the
   front and the state at the back: who it is about is the first thing a mentor
   scans for, and what kind of review it is the second. Gold is kept for what has
   waited longest, and everything else is deliberately quiet so that it stands
   out.
   -------------------------------------------------------------------------- */
.prt-chip.muted{color:var(--txt-2);background:rgba(9,41,92,.05);border:1px solid var(--line-soft)}

.prt-list.rvq a{flex-wrap:nowrap;align-items:flex-start}
.prt-list.rvq .prt-list-who{flex:1 1 auto}
.rvq-av{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff;
  font:700 14px/1 var(--sans);margin-top:1px;
}
.rvq-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;flex:0 0 auto}
.rvq-ex{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--txt);
}

.rvq-n,.rvq-count{
  display:inline-block;font-style:normal;padding:1px 7px;border-radius:999px;
  font:800 11.5px/1.6 var(--sans);background:rgba(9,41,92,.07);color:var(--txt-2);
}
.rvq-n{margin-left:8px}
.rvq-count{margin-left:8px;vertical-align:2px}
.rvq-n.is-hot,.rvq-count.is-hot{background:var(--gold);color:#10233F}

.rvq-clear{text-align:center;padding:40px 24px}
.rvq-clear p{max-width:46ch;margin-inline:auto}
.rvq-clear-ic{
  display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--live-tint);color:var(--live);border:1px solid var(--live-line);margin-bottom:12px;
}

.rvq-cand h2 a{color:inherit;text-decoration:none}
.rvq-cand h2 a:hover{color:var(--accent);text-decoration:underline}
.rvq-hot{color:var(--accent);font-weight:700}
.rvq-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);
}
.rvq-facts dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:700}
.rvq-facts dd{margin:4px 0 0;font-weight:700;color:var(--navy-900);font-size:15px}
.rvq-facts dd i{font-style:normal;font-weight:500;color:var(--txt-2)}

@media (max-width:640px){
  .prt-list.rvq a{flex-wrap:wrap}
  /* Beside the avatar rather than under it: without a basis of its own a long
     subtitle makes the text block wider than the room left and it wraps. */
  .prt-list.rvq .prt-list-who{flex:1 1 calc(100% - 56px);min-width:0}
  .rvq-tags{justify-content:flex-start;margin-left:52px}
}

/* --------------------------------------------------------------------------
   The register, on the mentor's side of this sheet.

   Pills rather than the panel's grid of radio buttons: this is filled in on a
   phone in a car park after a session, and a thumb has to be able to hit
   "Late" without hitting "Absent". The radio itself is visually hidden and the
   pill is its label, so it is still a real radio group to a keyboard and a
   screen reader - the checked state is drawn from the input, not from script.
   The two states that earn the milestone are green when chosen and the rest
   navy, so what a mark is worth is visible at the moment it is made.
   -------------------------------------------------------------------------- */
.rg-row{padding:16px 0}
.rg-row + .rg-row{border-top:1px solid var(--line-soft)}
.rg-who b{display:block;font-size:15px;color:var(--navy-900)}
.rg-who span{display:block;margin-top:2px;font-size:12.5px;color:var(--txt-2)}
.rg-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rg-opt{position:relative;display:inline-flex}
.rg-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.rg-opt span{
  display:inline-flex;align-items:center;min-height:40px;padding:0 15px;
  border:1px solid var(--line);border-radius:999px;background:var(--surf);
  font-size:13.5px;font-weight:600;color:var(--txt-2);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.rg-opt:hover span{border-color:var(--wait-line);color:var(--navy-900)}
.rg-opt input:checked + span{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.rg-opt.is-yes input:checked + span{background:var(--live);border-color:var(--live)}
.rg-opt.is-clear input:checked + span{background:rgba(9,41,92,.07);border-color:var(--line);color:var(--txt-2)}
.rg-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.rg-all{flex:0 0 auto}
.rg-save{
  position:sticky;bottom:0;z-index:5;margin:0 -1px;padding:14px 0 16px;
  background:linear-gradient(to top,var(--bg,#FAF9F6) 70%,rgba(250,249,246,0));
}
.rvq-q{margin:12px 0 4px;font-size:12.5px;font-weight:700;color:var(--txt-3)}

/* --------------------------------------------------------------------------
   A booked mock interview, on the mentor's side of this sheet: who and when
   across the top, and the actions folded or spread under it. One block per
   interview rather than a row in a list, because each carries its own form.
   -------------------------------------------------------------------------- */
.mk-item{padding:16px 0}
.mk-item + .mk-item{border-top:1px solid var(--line-soft)}
.mk-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mk-hd .prt-list-who{flex:1 1 200px}
.mk-form{margin-top:14px}
.mk-form .fld{margin-bottom:10px}

/* --------------------------------------------------------------------------
   The mentor's logbook - private session notes.

   An entry is a small article, not a row: it carries prose, and prose wants
   room. What was agreed is set apart under it because it is the one part with
   something to do, and goes gold when its date has come. The add form folds
   away unless the mentor is already in the middle of writing, so a logbook
   opened to read is not a page that opens on a form.
   -------------------------------------------------------------------------- */
.lg-add > summary{
  display:grid;gap:2px;cursor:pointer;list-style:none;padding:2px 0;
}
.lg-add > summary::-webkit-details-marker{display:none}
.lg-add-t{font-weight:700;font-size:16px;color:var(--navy-900)}
.lg-add-t::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;
  border-radius:50%;background:var(--wait-tint);color:var(--accent);font-weight:800;line-height:1}
.lg-add[open] .lg-add-t::before{content:"\2212"}
.lg-add-s{font-size:13px;color:var(--txt-2);padding-left:31px}
.lg-add > form{margin-top:16px}

.lg-entry{padding:18px 0}
.lg-entry + .lg-entry{border-top:1px solid var(--line-soft)}
.lg-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lg-when{font-size:13px;color:var(--txt-2)}
.lg-topic{margin:8px 0 0;font-size:16px;color:var(--navy-900)}
.lg-body{margin-top:8px;line-height:1.7;color:var(--txt);max-width:72ch}
.lg-acts{display:flex;gap:16px;align-items:center;margin-top:12px}
.lg-acts form{margin:0}
.lg-link{
  background:none;border:0;padding:0;font:600 13px/1 var(--sans);color:var(--accent);
  cursor:pointer;text-decoration:none;
}
.lg-link:hover{text-decoration:underline}
.lg-danger{color:var(--danger)}

.lg-fu{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 0;
}
.lg-fu + .lg-fu{border-top:1px solid var(--line-soft)}
.lg-fu-t{display:grid;gap:2px;min-width:0;flex:1 1 220px}
.lg-fu-t a{text-decoration:none;color:var(--navy-900)}
.lg-fu-t i{font-style:normal;font-size:12.5px;color:var(--txt-2)}
.lg-fu form{margin:0}
.lg-fu.is-inline{
  margin-top:12px;padding:11px 14px;border:1px solid var(--line-soft);border-radius:10px;
  background:rgba(9,41,92,.025);
}
.lg-fu.is-due{border-color:var(--wait-line);background:var(--wait-tint)}
.lg-fu.is-due .lg-fu-t i{color:var(--accent);font-weight:700}
.lg-fu.is-done .lg-fu-t span{text-decoration:line-through;color:var(--txt-3)}

/* A candidate has asked for a different time - on the mentor's agenda, where the move
   form is, and on the candidate's own list, where the request is made. */
.mcal-ask{
  display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 12px;
  border:1px solid var(--wait-line);border-radius:9px;background:var(--wait-tint);
  font-size:13px;color:var(--txt);
}
.mcal-ask .ic{flex:0 0 auto;margin-top:2px;color:var(--accent)}
.mtg-ask{flex:1 0 100%;margin-top:6px}
.mtg-ask summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent)}
.mtg-ask form{margin-top:10px}

/* --------------------------------------------------------------------------
   Who is free on a day. A bar across the working day per mentor, with the same
   information written beside it: the bar is quick to read and the words are
   what does not depend on telling two colours apart. Free is the track, and an
   offered mock time and a commitment sit over it.
   -------------------------------------------------------------------------- */
.tm-jump input{width:auto}
.tm-hours{
  list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
}
.tm-hours li{
  display:grid;justify-items:center;gap:1px;padding:8px 4px;border-radius:9px;
  background:var(--live-tint);border:1px solid var(--live-line);
}
.tm-hours b{font:700 18px/1.1 var(--sans);color:var(--live)}
.tm-hours span{font-size:11.5px;color:var(--txt-2)}
.tm-hours li.is-none{background:rgba(9,41,92,.04);border-color:var(--line-soft)}
.tm-hours li.is-none b{color:var(--txt-3)}
.tm-hours li.is-most{background:var(--live);border-color:var(--live)}
.tm-hours li.is-most b,.tm-hours li.is-most span{color:#fff}

.tm-key{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 4px 0 12px;vertical-align:-1px}
.tm-key:first-child{margin-left:0}
.tm-key-free{background:var(--live-tint);border:1px solid var(--live-line)}
.tm-key-offered{background:var(--live);}
.tm-key-busy{background:var(--navy-800)}

.tm-row{padding:14px 0}
.tm-row + .tm-row{border-top:1px solid var(--line-soft)}
.tm-who b{font-size:15px;color:var(--navy-900)}
.tm-who i{margin-left:8px;font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--wait-tint);color:var(--accent);font-style:normal}
.tm-bar{position:relative;height:16px;margin:9px 0 7px;border-radius:5px;background:rgba(9,41,92,.06);overflow:hidden}
.tm-seg{position:absolute;top:0;bottom:0;display:block}
.tm-free{background:var(--live-tint);box-shadow:inset 0 0 0 1px var(--live-line)}
.tm-offered{background:var(--live)}
.tm-busy{background:var(--navy-800)}
.tm-text{margin:0;font-size:13px;color:var(--txt)}
.tm-dim{color:var(--txt-2)}
.tm-axis{position:relative;height:18px;margin-top:6px;font-size:11px;color:var(--txt-3)}
.tm-axis span{position:absolute;transform:translateX(-50%)}

/* Newer / Older - the notification lists (partials/pager). */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.pager-pos{font-size:13px;color:var(--txt-3)}
.pager-btn{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line, #d7dbe2);
  border-radius:10px;font-size:14px;color:var(--txt);text-decoration:none;background:transparent}
a.pager-btn:hover{border-color:var(--txt-3)}
.pager-btn.is-off{color:var(--txt-3);opacity:.55}

/* A folded workspace's total, before the chevron (mentor rail, section 31.5). The
   chevron alone is pushed to the end; with a count in the row as well, two auto
   margins would split the space and strand the badge mid-row. */
.prt-sb-nav summary .prt-sb-count{margin-left:auto}
.prt-sb-nav summary .prt-sb-count + .ic:last-child{margin-left:8px}

.smd-views{margin-top:4px}
.smd-views summary{cursor:pointer}
.smd-views ul{margin:4px 0 0;padding-left:16px}

.smd-usage.is-high{color:var(--wait)}
/* --------------------------------------------------------------------------
   The notification centre, redrawn - candidate and mentor.

   A row says what *sort* of thing it is before it says what it is: a tile with
   an icon in the colour of its kind, and the kind's name beside the time. Unread
   is a bar down the edge, a weight and the word "New" - never colour alone. The
   day is a heading, so "Today" is where to start reading. The tones are the
   sheet's own three (green, gold, navy); what a kind *is* is always the word.
   -------------------------------------------------------------------------- */
.nt-count{
  display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;vertical-align:3px;
  background:var(--gold);color:#10233F;font:800 11.5px/1.7 var(--sans);letter-spacing:.04em;
}

/* The filter row draws its own rule, so the header's would double it - or, with
   no filters, leave a divider over nothing. */
.nt-head .prt-card-hd{padding-bottom:0;margin-bottom:0;border-bottom:0}
.nt-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.nt-filters a{
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surf);font-size:13.5px;font-weight:600;
  color:var(--txt-2);text-decoration:none;transition:border-color .15s,background .15s,color .15s;
}
.nt-filters a:hover{border-color:var(--wait-line);color:var(--navy-900)}
.nt-filters a[aria-current="page"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.nt-filters em{
  font:700 11px/1 var(--sans);font-style:normal;padding:3px 7px;border-radius:999px;
  background:rgba(9,41,92,.08);color:var(--txt-2);
}
.nt-filters a[aria-current="page"] em{background:rgba(255,255,255,.18);color:#fff}

.nt-group{margin:0 0 20px}
.nt-day{
  display:flex;align-items:center;gap:8px;margin:22px 4px 10px;
  font:800 11.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);
}
.nt-day::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.nt-day span{order:2;font-weight:700;letter-spacing:0;color:var(--txt-3)}
.nt-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}

.nt{
  --tone:var(--navy-800);--tint:rgba(11,42,91,.08);
  position:relative;display:flex;align-items:stretch;
  border:1px solid var(--line);border-radius:14px;background:var(--surf);
  box-shadow:var(--shadow);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.nt.nt-live{--tone:var(--live);--tint:var(--live-tint)}
.nt.nt-gold{--tone:var(--accent);--tint:var(--wait-tint)}
.nt:hover{border-color:var(--wait-line);transform:translateY(-1px)}

/* Unread: a bar down the edge, and a warmer ground. */
.nt.is-unread{background:linear-gradient(90deg,rgba(200,154,42,.07),rgba(200,154,42,0) 60%),var(--surf);border-color:var(--wait-line)}
.nt.is-unread::before{
  content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--gold);
}

.nt-main{
  flex:1 1 auto;min-width:0;display:flex;gap:14px;padding:16px 16px 16px 20px;
  text-decoration:none;color:inherit;border-radius:14px;
}
.nt-ic{
  flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:var(--tint);color:var(--tone);
}
.nt-body{flex:1 1 auto;min-width:0;display:grid;gap:3px;align-content:start}
.nt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.nt-kind{font:800 10.5px/1 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--tone)}
.nt-top .prt-notice-new{margin:0}
.nt-top time{margin-left:auto;color:var(--txt-3);white-space:nowrap}
.nt-title{font-size:15.5px;line-height:1.35;color:var(--navy-900)}
.nt:not(.is-unread) .nt-title{font-weight:600;color:var(--txt)}
.nt-text{font-size:14px;line-height:1.55;color:var(--txt-2);max-width:68ch}
.nt-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:700;color:var(--accent);
}
.nt-go .ic{transition:transform .2s var(--ease)}
.nt-main:hover .nt-go .ic{transform:translateX(3px)}
.nt-main:hover .nt-title{text-decoration:underline;text-decoration-color:var(--wait-line);text-underline-offset:3px}
.nt-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.nt-mark{flex:0 0 auto;display:flex;align-items:flex-start;padding:12px 12px 0 0}
.nt-mark button{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--surf);color:var(--txt-3);
  transition:background .15s,color .15s,border-color .15s;
}
.nt-mark button:hover{background:var(--live-tint);border-color:var(--live-line);color:var(--live)}
.nt-mark button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.nt-empty{text-align:center;padding:44px 24px}
.nt-empty > h2{margin:0 0 6px}
.prt-card.nt-empty > h2 + p,.nt-empty p{max-width:44ch;margin:0 auto}
.nt-empty p + p{margin-top:10px}
.nt-empty-ic{
  display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;margin-bottom:12px;
  background:var(--wait-tint);color:var(--accent);border:1px solid var(--wait-line);
}
.nt-empty-ic.is-clear{background:var(--live-tint);color:var(--live);border-color:var(--live-line)}

@media (max-width:560px){
  .nt-main{gap:12px;padding:14px 10px 14px 16px}
  .nt-ic{width:38px;height:38px}
  .nt-top time{margin-left:0;flex:1 0 100%}
  .nt-mark{padding:10px 10px 0 0}
}

/* --------------------------------------------------------------------------
   Mock interview and services - portal/mock.blade.php.

   One card per service at the top, so what the package includes is visible
   before it is spent rather than only after. Below it, everything a
   candidate does not need right now is folded: move, cancel, the history,
   and each paid service's request form - three forms open at once was the
   screen's whole problem.
   -------------------------------------------------------------------------- */

.svc-grid{
  display:grid;gap:12px;margin:0 0 20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.svc-card{
  position:relative;display:flex;flex-direction:column;padding:17px 18px 15px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.svc-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--live);opacity:.75;
}
.svc-card.is-spent::before{background:var(--gold)}
.svc-card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.svc-card-hd h2{margin:0;font-size:15px;font-weight:700;line-height:1.35;color:var(--navy-900)}

.svc-dots{list-style:none;display:flex;gap:5px;margin:14px 0 0;padding:0}
.svc-dots li{flex:1 1 0;max-width:46px;height:6px;border-radius:999px;background:var(--live-tint);
             border:1px solid var(--live-line)}
.svc-dots li.is-used{background:var(--txt-3);border-color:var(--txt-3);opacity:.45}
.svc-fig{margin:8px 0 0;font-size:12.5px;color:var(--txt-2)}

.svc-next{
  margin-top:auto;padding-top:13px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:6px 12px;
}
.svc-card .svc-next{margin-top:14px;border-top:1px solid var(--line-soft)}
.svc-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--txt-2)}
.svc-state b{color:var(--txt)}
.svc-state.live{color:var(--live);font-weight:600}
.svc-state.wait{color:var(--wait);font-weight:600}
.svc-next a{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.svc-next a:hover{text-decoration:underline}
.svc-next a::after{content:" \2192"}

.svc-hint{margin:14px 0 0;font-size:13.5px;color:var(--txt-2)}
.svc-hint a{color:var(--accent);font-weight:600}

/* The booking itself, as a ticket: the date is the thing a candidate is
   looking for, so it is the biggest thing on the card. */
.svc-ticket{
  display:flex;align-items:center;gap:16px;margin-top:16px;padding:14px;
  border:1px solid var(--live-line);background:var(--live-tint);border-radius:12px;
}
.svc-date{
  flex:0 0 auto;width:64px;display:grid;justify-items:center;padding:7px 0 8px;
  background:var(--surf);border:1px solid var(--line);border-radius:10px;
}
.svc-date span{font:700 10.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.svc-date b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;color:var(--navy-900)}
.svc-ticket-body{display:grid;gap:1px;min-width:0;font-size:14px;color:var(--txt-2)}
.svc-ticket-body b{font-size:15px;color:var(--txt)}

/* A fold: a summary row that reads as a quiet button. */
.svc-folds{display:grid;gap:8px;margin-top:14px}
.svc-fold{border:1px solid var(--line);border-radius:10px;background:var(--surf)}
.svc-fold > summary{
  display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--navy-800);border-radius:10px;
}
.svc-fold > summary::-webkit-details-marker{display:none}
.svc-fold > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--txt-3);
  border-bottom:2px solid var(--txt-3);transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.svc-fold[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.svc-fold > summary:hover{background:rgba(9,41,92,.03)}
.svc-fold > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svc-fold > form,.svc-fold > .cmp-list{margin:0 14px 14px}
.svc-fold > form{padding-top:4px}
.svc-history{margin-top:18px}

/* Times grouped under their day, rather than the date repeated on every row. */
.svc-days{display:grid;gap:16px;margin-top:16px}
.svc-day{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start}
.svc-day-hd{display:grid;padding-top:8px}
.svc-day-hd b{font-size:14px;color:var(--txt)}
.svc-day-hd span{font-size:12.5px;color:var(--txt-2)}
.svc-times{display:flex;flex-wrap:wrap;gap:8px}
.svc-times form{margin:0}
.svc-time{
  display:grid;justify-items:start;gap:1px;min-width:132px;min-height:44px;padding:9px 13px;
  font:inherit;text-align:left;cursor:pointer;background:var(--surf);color:var(--txt);
  border:1px solid var(--line);border-radius:10px;transition:border-color .15s,background .15s;
}
.svc-time b{font-size:14.5px;font-weight:700;color:var(--navy-900)}
.svc-time span{font-size:12px;color:var(--txt-2)}
.svc-time em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
             text-transform:uppercase;color:var(--accent);margin-top:3px}
.svc-time:hover{border-color:var(--navy-800);background:rgba(9,41,92,.03)}
.svc-time:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.svc-empty{
  display:grid;justify-items:center;gap:4px;margin-top:16px;padding:26px 16px;text-align:center;
  border:1px dashed var(--line);border-radius:12px;color:var(--txt-3);
}
.svc-empty b{color:var(--txt);font-size:14.5px}
.svc-empty span{font-size:13px;color:var(--txt-2);max-width:42ch}

/* §21, said in one line rather than as a panel the size of a form. */
.svc-nopay{
  display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;
  border-radius:10px;background:rgba(9,41,92,.04);font-size:13px;color:var(--txt-2);
}
.svc-nopay .ic{flex:0 0 auto;margin-top:2px;color:var(--navy-700)}
.svc-nopay b{color:var(--txt)}

.svc-offers{display:grid;gap:10px;margin-top:16px}
.svc-offer{border:1px solid var(--line);border-radius:12px;background:var(--surf);
           transition:border-color .15s,box-shadow .15s}
.svc-offer[open]{border-color:var(--navy-800);box-shadow:0 0 0 3px rgba(9,41,92,.06)}
.svc-offer > summary{
  display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none;
}
.svc-offer > summary::-webkit-details-marker{display:none}
.svc-offer > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.svc-offer-nm{flex:1 1 auto;display:grid;min-width:0}
.svc-offer-nm b{font-size:14.5px;color:var(--navy-900)}
.svc-offer-nm span{font-size:12.5px;color:var(--txt-2)}
.svc-price{flex:0 0 auto;font-weight:800;font-size:17px;color:var(--txt);white-space:nowrap}
.svc-price small{font-size:11.5px;font-weight:700;color:var(--txt-2);letter-spacing:.04em}
.svc-offer-go{
  flex:0 0 auto;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:700;
  background:var(--navy-800);color:#fff;
}
.svc-offer[open] .svc-offer-go{background:transparent;color:var(--txt-2);border:1px solid var(--line)}
.svc-offer[open] .svc-offer-go::before{content:"Close ";}
.svc-offer[open] .svc-offer-go{font-size:0}
.svc-offer[open] .svc-offer-go::before{font-size:13px}
.svc-offer > form{padding:2px 16px 16px;border-top:1px solid var(--line-soft)}
.svc-offer > form .fld{margin-top:14px}
.svc-offer .prt-acts{margin-top:16px}

.svc-reqs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.svc-req{padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.svc-req-hd{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px}
.svc-req-nm{display:grid;min-width:0;flex:1 1 220px}
.svc-req-nm b{font-size:14.5px;color:var(--navy-900)}
.svc-req-nm span{font-size:12.5px;color:var(--txt-2)}
.svc-req-said{margin:8px 0 0;font-size:13px;color:var(--txt-2)}
.svc-req-note{
  display:grid;gap:3px;margin-top:10px;padding:10px 12px;font-size:13px;color:var(--txt-2);
  border-left:3px solid var(--line);background:rgba(9,41,92,.03);border-radius:0 9px 9px 0;
}
.svc-req-note b{color:var(--txt)}
.svc-req-note.is-ask{border-left-color:var(--gold);background:var(--wait-tint)}
.svc-req-note a{color:var(--accent);font-weight:700}
.svc-req-next{margin:10px 0 0;font-size:12.5px;color:var(--txt-3)}
.svc-req-next:empty{display:none}

@media (max-width:640px){
  .svc-day{grid-template-columns:1fr;gap:6px}
  .svc-day-hd{padding-top:0;display:flex;gap:8px;align-items:baseline}
  .svc-times form{flex:1 1 calc(50% - 4px);min-width:0}
  .svc-time{width:100%;min-width:0}
  .svc-offer > summary{flex-wrap:wrap;gap:8px 12px}
  .svc-offer-nm{flex-basis:100%}
  .svc-offer-go{margin-left:auto}
  .svc-ticket{align-items:flex-start}
  .fld-2{grid-template-columns:1fr}
}

/* A recorded CPD entry's certificate, at the end of its row on the CPD
   screen - portal/cpd.blade.php. */
.cpd-cert{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;
}
.cpd-cert:hover{text-decoration:underline}
.cpd-cert span{color:inherit;font-size:inherit}

/* The write-up's draft row: Save draft and what to draw on to the left, and
   Submit for review on the right once there is a draft to submit. */
.wu-acts{align-items:center}
.wu-to-submit{margin-left:auto}
.wu-acts + .wu-saved{margin:10px 0 0}
.wu-saved:empty{display:none}
#submit-review{scroll-margin-top:calc(var(--tb-h) + 16px)}
@media (max-width:640px){
  .wu-acts .btn{flex:1 1 auto}
  .wu-to-submit{margin-left:0;flex-basis:100%}
}

/* --------------------------------------------------------------------------
   Session Recordings and Additional Learning - portal/recordings,
   portal/recording, portal/learning and portal/reader.

   A search box and a row of toggle chips above a grid of cards, shared by
   the gallery and the shelf, so the two pages filter the same way.
   -------------------------------------------------------------------------- */

.gal-bar,.lib-filters{
  display:grid;gap:12px;margin:0 0 18px;padding:14px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.gal-bar{grid-template-columns:minmax(220px,1fr) auto;align-items:center}
.gal-search{position:relative;display:block}
.gal-search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--txt-3);pointer-events:none}
.gal-search input{
  width:100%;min-height:44px;padding:0 14px 0 40px;font:inherit;font-size:14.5px;color:var(--txt);
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
}
.gal-search input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surf)}
.gal-chips{display:flex;flex-wrap:wrap;gap:6px}
.gal-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--txt-2);
  background:var(--surf);border:1px solid var(--line);border-radius:999px;transition:background .15s,color .15s,border-color .15s;
}
.gal-chip em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--txt-3)}
.gal-chip:hover{border-color:var(--navy-700);color:var(--navy-800)}
.gal-chip[aria-pressed="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.gal-chip[aria-pressed="true"] em{color:var(--pale)}
.gal-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-note{margin:18px 0 0;font-size:12.5px;color:var(--txt-3);max-width:70ch}

/* ---- the recordings gallery -------------------------------------------- */

.rec-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
          grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rec-grid li[hidden]{display:none}
.rec-card{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.rec-card:hover{transform:translateY(-2px);border-color:var(--wait-line);
                box-shadow:0 2px 4px rgba(9,41,92,.05),0 18px 34px -20px rgba(9,41,92,.4)}
.rec-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.rec-thumb{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-950) 70%);
}
.rec-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;display:grid;place-items:center;padding-left:3px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy-800);box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .25s var(--ease),background .2s;
}
.rec-card:hover .rec-play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold-lt)}
.rec-dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;
         font:700 11.5px/1.5 var(--sans);color:#fff;background:rgba(3,16,42,.78)}
.rec-seen{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;
          padding:2px 8px;border-radius:999px;font:800 10.5px/1.6 var(--sans);letter-spacing:.04em;
          text-transform:uppercase;color:var(--live);background:rgba(255,255,255,.92)}
.rec-body{display:grid;gap:3px;padding:13px 15px 15px}
.rec-title{font-size:15px;line-height:1.35;color:var(--navy-900)}
.rec-session{font-size:13px;color:var(--txt-2)}
.rec-meta{font-size:12px;color:var(--txt-3)}

/* ---- watching one ------------------------------------------------------- */

.rec-watch{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.rec-main{min-width:0}
.rec-player{
  position:relative;overflow:hidden;margin:0 0 16px;background:#000;
  border-radius:var(--radius);box-shadow:var(--shadow);user-select:none;-webkit-user-select:none;
}
.rec-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.rec-player:fullscreen{border-radius:0;display:flex;align-items:center}
.rec-player:fullscreen video{height:100%;aspect-ratio:auto}
.rec-mark{
  position:absolute;z-index:2;pointer-events:none;white-space:nowrap;
  font:600 13px/1 var(--sans);color:rgba(255,255,255,.28);text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:left 2s var(--ease),top 2s var(--ease);
}
.rec-full{
  position:absolute;z-index:3;right:10px;top:10px;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:9px;cursor:pointer;color:#fff;background:rgba(3,16,42,.55);
  opacity:0;transition:opacity .2s;
}
.rec-player:hover .rec-full,.rec-full:focus-visible{opacity:1}
.rec-info h2{margin:0 0 4px;font-size:18px;color:var(--navy-900)}
.rec-info p{margin:0;font-size:13.5px;color:var(--txt-2)}
.rec-info a{color:var(--accent);font-weight:600}

.rec-files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.rec-files a{display:flex;align-items:center;gap:12px;padding:11px 13px;text-decoration:none;color:inherit;
             border:1px solid var(--line);border-radius:10px}
.rec-files a:hover{border-color:var(--navy-700)}
.rec-file-ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
             background:rgba(200,154,42,.13);color:var(--accent)}
.rec-file-nm{flex:1 1 auto;display:grid;min-width:0}
.rec-file-nm b{font-size:14px;color:var(--navy-900)}
.rec-file-nm i{font-style:normal;font-size:12px;color:var(--txt-3)}
.rec-files em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--accent)}

.rec-side{position:sticky;top:calc(var(--tb-h) + 16px)}
.rec-side h2{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.rec-side ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rec-side a{display:grid;grid-template-columns:128px 1fr;gap:10px;text-decoration:none;color:inherit;
            padding:6px;border-radius:10px}
.rec-side a:hover{background:rgba(9,41,92,.04)}
.rec-thumb-sm{border-radius:8px}
.rec-thumb-sm .rec-play{width:30px;height:30px}
.rec-thumb-sm .rec-dur{right:4px;bottom:4px;font-size:10.5px;padding:1px 5px}
.rec-side-txt{display:grid;align-content:start;gap:2px;min-width:0}
.rec-side-txt b{font-size:13px;line-height:1.3;color:var(--navy-900);
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-side-txt span{font-size:12px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-side-txt i{font-style:normal;font-size:11px;font-weight:800;color:var(--live)}

/* ---- the reader --------------------------------------------------------- */

.rdr{user-select:none;-webkit-user-select:none}
.rdr-bar{
  position:sticky;top:var(--tb-h);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:10px 14px;background:var(--surf);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.rdr-pages{font-size:13px;font-weight:700;color:var(--txt-2)}
.rdr-zoom{display:flex;align-items:center;gap:6px}
.rdr-zoom button{min-width:36px;height:36px;padding:0 10px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
                 color:var(--navy-800);background:var(--surf);border:1px solid var(--line);border-radius:9px}
.rdr-zoom button:hover{border-color:var(--navy-700)}
.rdr-zoom .rdr-fit{font-size:12.5px}
.rdr-zoom span{min-width:48px;text-align:center;font-size:12.5px;font-weight:700;color:var(--txt-2)}
.rdr-pages-wrap{display:grid;justify-items:center;gap:16px;overflow-x:auto;padding:4px 0 8px}
.rdr-page{background:#fff;box-shadow:0 1px 3px rgba(9,41,92,.12),0 12px 28px -16px rgba(9,41,92,.35);max-width:none}
.rdr-page canvas{display:block}
.rdr-fail{display:grid;justify-items:center;gap:4px;padding:40px 16px;text-align:center;color:var(--txt-3)}
.rdr-fail b{color:var(--txt)}
.rdr-fail[hidden]{display:none}
@media print{.rdr,.rec-player{display:none !important}}

/* ---- the shelf ---------------------------------------------------------- */

.lib-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.lib-select{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--txt-2)}
.lib-select select{min-height:38px;padding:0 32px 0 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--txt);
                   background:var(--surf);border:1px solid var(--line);border-radius:10px;max-width:280px}
.lib-count{margin:0;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--txt-3)}
.lib-count span{font-weight:800;color:var(--txt)}
.lib-clear{padding:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent);cursor:pointer}
.lib-clear:hover{text-decoration:underline}

.lib-shelf{list-style:none;margin:0;padding:0;display:grid;gap:18px;
           grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.lib-shelf li[hidden]{display:none}
.lib-book{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.lib-book:hover{transform:translateY(-3px);border-color:var(--wait-line);
                box-shadow:0 2px 4px rgba(9,41,92,.05),0 20px 36px -20px rgba(9,41,92,.45)}
.lib-book:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The cover: a book's front, with a spine down its left edge, coloured by
   the section it is shelved under. */
.lib-cover{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  min-height:150px;padding:16px 16px 16px 26px;color:#fff;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
}
.lib-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
                   background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.08));}
.lib-cover::after{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.lib-cover--submission{background:linear-gradient(150deg,#9A7616,#5C460C)}
.lib-cover--sessions{background:linear-gradient(150deg,#14805C,#0A4A35)}
.lib-cover--practice{background:linear-gradient(150deg,#6B3F8F,#3B2152)}
.lib-fmt{position:absolute;right:12px;top:12px;padding:2px 8px;border-radius:6px;
         font:800 10.5px/1.6 var(--sans);letter-spacing:.06em;color:var(--navy-900);background:rgba(255,255,255,.9)}
.lib-cover-section{font:700 10.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.lib-cover-title{font-size:16px;line-height:1.3;
                 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib-body{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;padding:13px 15px 14px}
.lib-desc{font-size:13px;line-height:1.5;color:var(--txt-2);
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lib-tags{display:flex;flex-wrap:wrap;gap:5px}
.lib-tags span{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
               color:var(--navy-800);background:rgba(9,41,92,.06)}
.lib-tags .is-cohort{color:var(--wait);background:var(--wait-tint)}
.lib-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
          padding-top:10px;border-top:1px solid var(--line-soft)}
.lib-foot i{font-style:normal;font-size:11.5px;color:var(--txt-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-foot em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--accent);white-space:nowrap}

@media (max-width:980px){
  .rec-watch{grid-template-columns:1fr}
  .rec-side{position:static}
}
@media (max-width:640px){
  .gal-bar{grid-template-columns:1fr}
  .rec-grid{grid-template-columns:1fr}
  .lib-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lib-cover{min-height:120px;padding:12px 12px 12px 22px}
  .lib-cover-title{font-size:14px}
  .lib-select{flex-wrap:wrap}
  .lib-select select{max-width:100%}
  .rdr-bar{flex-wrap:wrap}
}
.svc-empty[hidden]{display:none}
@media (max-width:640px){.rec-mark{font-size:10.5px}}
/* The gallery's bar carries the competency dropdown too, so it stacks the
   way the shelf's does: search on its own row, the dropdown and the chips
   under it. */
.gal-bar{grid-template-columns:1fr}