/**
 * SCH CIS — reusable page SHELL: identity card + module dock + quiet sub-nav +
 * panel primitives (buttons, light-band tables, readable pills, verdict bar,
 * coach preview rows). Translated 1:1 from docs/mockups/sch-fa-portal-redesign-v1.html
 * (the design contract). Scoped under .sch-shell so any CIS page can opt in and
 * inherit the dock/sub-nav without redefining them. Rendered by SCH_CIS_Chrome.
 *
 * INVARIANT: exactly ONE filled pill exists at a time — the active module tab
 * (.sch-mod[aria-selected="true"]). Sub-tabs (.sch-sub) are never filled.
 */
.sch-shell{
  --teal:#227F77; --teal-lt:#5dcaa5; --navy:#122B46; --yellow:#F1C40F;
  --ink:var(--l-ink,#122B46); --ink-60:var(--l-ink-60,rgba(18,43,70,.62)); --ink-40:var(--l-ink-40,rgba(18,43,70,.42)); --ink-25:var(--l-ink-25,rgba(18,43,70,.25));
  --sheet:#FFFFFF; --band:#EEF2F3; --hair:rgba(18,43,70,.10); --hair-2:rgba(18,43,70,.06);
  --shadow-card:0 1px 2px rgba(18,43,70,.04), 0 12px 32px -12px rgba(18,43,70,.16);
  --r:14px; --r-sm:10px;
  background:var(--sheet); border:1px solid var(--hair); border-radius:var(--r);
  box-shadow:var(--shadow-card); overflow:hidden;
  font-family:'Rajdhani',system-ui,sans-serif; color:var(--ink);
}
.sch-shell *{box-sizing:border-box}
.sch-shell::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-lt) 55%,var(--yellow) 100%);
}

/* Identity bar */
.sch-shell .sch-identity{display:flex;align-items:center;gap:16px;padding:20px 24px 18px}
.sch-shell .sch-id-chip{
  width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(93,202,165,.14);border:1px solid rgba(34,127,119,.18);color:var(--teal);
}
.sch-shell .sch-id-chip svg{width:24px;height:24px}
.sch-shell .sch-id-text{min-width:0}
.sch-shell .sch-id-text h1{margin:0;font-size:23px;font-weight:700;letter-spacing:.005em;line-height:1.15;color:var(--ink)}
.sch-shell .sch-id-text p{margin:2px 0 0;font-size:14.5px;font-weight:500;color:var(--ink-60);letter-spacing:.05em;text-transform:uppercase}
.sch-shell .sch-id-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.sch-shell .sch-user-chip{
  display:flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:999px;
  background:rgba(93,202,165,.10);border:1px solid rgba(34,127,119,.16);
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.sch-shell .sch-user-chip .sch-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-lt);flex:none}

/* Module dock — SIGNATURE ELEMENT (welded to the identity card, merges into the panel) */
.sch-shell .sch-dock{
  display:flex;gap:2px;padding:8px 14px 0;background:var(--navy);
  overflow-x:auto;
}
/* THE SCROLLBAR USED TO BE HIDDEN OUTRIGHT here and on .sch-subnav
   (scrollbar-width:none + ::-webkit-scrollbar{display:none}), so on a narrow
   window the overflowing modules were unreachable: no bar, no arrows, nothing
   but a swipe. Now a slim bar in the band's own colours, plus the edge arrows
   the chrome script adds. See the .sch-freeze-wrap block below for why the
   standard properties sit behind @supports. */
.sch-shell .sch-dock::-webkit-scrollbar{height:6px}
.sch-shell .sch-dock::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.sch-shell .sch-dock::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:6px}
.sch-shell .sch-dock::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.44)}
.sch-shell .sch-mod{
  position:relative;flex:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;color:rgba(255,255,255,.66);
  padding:13px 20px 14px;display:flex;align-items:center;gap:9px;
  border-radius:10px 10px 0 0;transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.sch-shell .sch-mod svg{width:18px;height:18px;opacity:.75}
.sch-shell .sch-mod:hover{background:rgba(255,255,255,.08);color:#fff}
.sch-shell .sch-mod[aria-selected="true"]{
  background:var(--sheet);color:var(--navy);font-weight:700;
}
/* v2.1: the ACTIVE tab carries NO teal — no top bar, no icon tint. White tab
   merging into the sheet, navy text, navy icon. */
.sch-shell .sch-mod[aria-selected="true"] svg{opacity:1;color:currentColor}
.sch-shell .sch-mod:focus-visible{outline:2px solid var(--teal-lt);outline-offset:-3px}

/* Panel head */
.sch-shell .sch-shpanel{padding:26px 28px 30px;background:var(--sheet)}
.sch-shell .sch-shpanel-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.sch-shell .sch-shpanel-head h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.sch-shell .sch-shpanel-head p{margin:5px 0 0;font-size:15.5px;color:var(--ink-60);max-width:62ch;font-weight:500}
.sch-shell .sch-head-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* Quiet sub navigation — never a pill fill */
/* ── THE STRAY SCROLLBAR IN THE SUB-TAB ROW ──────────────────────────────────
   A grey rounded thumb was drawn at the right-hand edge of this strip. It was a
   VERTICAL scrollbar, and the CSS never asked for one.

   Two things combined. `overflow-x:auto` was declared alone, and per CSS
   Overflow a `visible` value on the other axis computes to `auto` when its
   partner is not visible — so overflow-y silently became `auto` and this strip
   became a scroll container in BOTH directions. Then `.sch-sub` carried
   `margin-bottom:-1px`, to pull its 3px active underline over this element's 1px
   hairline: the button's MARGIN box is 34px, which sizes the strip, but its
   BORDER box is 35px, so one pixel hung below the padding box. Measured:
   clientHeight 34, scrollHeight 35, scrollableY true, and a 16px scrollbar
   gutter reserved on the right. Nothing overflowed horizontally at all —
   clientWidth 666, scrollWidth 666 — so the bar on show was not even the one
   the rules below are styling.

   THE FIX IS THE OVERHANG, NOT THE BAR. Hiding it with `overflow-y:hidden`
   would clip that pixel, and that pixel is the bottom of the active tab's
   underline. Instead the hairline moves INSIDE the padding box as an inset
   shadow and the negative margin goes: the button's margin box is then its
   border box, the strip's content height is 35, scrollHeight equals
   clientHeight, and nothing is clipped or moved. The strip's own height and the
   painted result are identical to before — proved by measurement, not by eye. */
.sch-shell .sch-subnav{
  display:flex;gap:30px;margin:22px 0 0;
  box-shadow:inset 0 -1px 0 var(--hair);
  overflow-x:auto;
}
.sch-shell .sch-subnav::-webkit-scrollbar{height:6px}
.sch-shell .sch-subnav::-webkit-scrollbar-track{background:rgba(18,43,70,.05)}
.sch-shell .sch-subnav::-webkit-scrollbar-thumb{background:rgba(18,43,70,.26);border-radius:6px}
.sch-shell .sch-subnav::-webkit-scrollbar-thumb:hover{background:rgba(18,43,70,.42)}
@supports not selector(::-webkit-scrollbar){
  .sch-shell .sch-dock{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) rgba(255,255,255,.06)}
  .sch-shell .sch-subnav{scrollbar-width:thin;scrollbar-color:rgba(18,43,70,.26) rgba(18,43,70,.05)}
}
.sch-shell .sch-sub{
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);padding:2px 2px 14px;white-space:nowrap;
  /* NO NEGATIVE MARGIN — see the .sch-subnav block above. The underline still
     lands on the hairline because the hairline is now inset inside the strip's
     padding box rather than being a border below it. */
  border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.sch-shell .sch-sub:hover{color:var(--ink)}
.sch-shell .sch-sub[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--teal)}
.sch-shell .sch-sub:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Buttons */
.sch-shell .sch-sbtn{
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;border-radius:9px;
  padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;border:1px solid transparent;text-decoration:none;
}
.sch-shell .sch-sbtn:active{transform:translateY(1px)}
.sch-shell .sch-sbtn svg{width:17px;height:17px}
.sch-shell .sch-sbtn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 16px -8px rgba(34,127,119,.9)}
.sch-shell .sch-sbtn-primary:hover{background:#1c6e67}
.sch-shell .sch-sbtn-ghost{background:#fff;color:var(--navy);border-color:var(--ink-25)}
.sch-shell .sch-sbtn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.sch-shell .sch-sbtn-quiet{background:transparent;color:var(--ink-60);border-color:transparent;padding:8px 10px}
.sch-shell .sch-sbtn-quiet:hover{color:var(--teal)}
.sch-shell .sch-sbtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sch-shell .sch-sbtn[disabled]{opacity:.55;cursor:default}

/* Tables — DESIGN CONTRACT v2: navy header band (shared --l-thead tokens), hairline row borders, last column right-aligned. */
.sch-shell table.sch-t{width:100%;border-collapse:collapse}
.sch-shell table.sch-t thead th{
  background:var(--l-thead-bg,#122B46);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l-thead-ink,rgba(255,255,255,.92));text-align:left;padding:12px 16px;
  border-top:1px solid var(--l-thead-line,rgba(255,255,255,.16));border-bottom:1px solid var(--l-thead-line,rgba(255,255,255,.16));
}
.sch-shell table.sch-t thead th:first-child{border-radius:8px 0 0 0}
.sch-shell table.sch-t thead th:last-child{border-radius:0 8px 0 0;text-align:right}
.sch-shell table.sch-t tbody td:last-child{text-align:right}
.sch-shell table.sch-t tbody td{padding:13px 14px;border-bottom:1px solid var(--hair-2);font-size:15px;font-weight:600;color:var(--ink)}
.sch-shell table.sch-t tbody tr:last-child td{border-bottom:0}
.sch-shell table.sch-t .sch-num{font-variant-numeric:tabular-nums}
.sch-shell .sch-date{font-weight:500;color:var(--ink-60);font-variant-numeric:tabular-nums}
.sch-shell .sch-dash{color:var(--ink-25)}
.sch-shell .sch-note{font-weight:500;color:var(--ink-60)}

/* Readable match/status pill — light teal tint, dark teal text, ✓ glyph (never solid-teal-black) */
.sch-shell .sch-pill{
  display:inline-flex;align-items:center;gap:6px;background:rgba(93,202,165,.16);
  border:1px solid rgba(34,127,119,.28);color:#12665F;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
}
.sch-shell .sch-pill svg{width:13px;height:13px}
.sch-shell .sch-pill--muted{background:var(--band);border-color:var(--hair);color:var(--ink-40)}
.sch-shell .sch-pill--warn{background:rgba(192,57,43,.10);border-color:rgba(192,57,43,.28);color:#9b2d22}

/* ── IMPORT PANEL ── */
.sch-shell .sch-tools{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media(max-width:860px){.sch-shell .sch-tools{grid-template-columns:1fr}}
.sch-shell .sch-tool{border:1px solid var(--hair);border-radius:var(--r-sm);padding:20px 20px 18px;background:#FCFDFD;display:flex;flex-direction:column}
.sch-shell .sch-tool .sch-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.sch-shell .sch-tool h3{margin:0;font-size:19px;font-weight:700;color:var(--ink)}
.sch-shell .sch-tool p{margin:6px 0 16px;font-size:14.5px;color:var(--ink-60);font-weight:500}
.sch-shell .sch-tool .sch-tool-row{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Verdict bar */
.sch-shell .sch-verdict{margin-top:26px;display:flex;align-items:center;gap:0;flex-wrap:wrap;border:1px solid var(--hair);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.sch-shell .sch-v-stat{padding:16px 24px;border-right:1px solid var(--hair-2);min-width:132px}
.sch-shell .sch-v-stat .n{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sch-shell .sch-v-stat .l{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);margin-top:5px}
.sch-shell .sch-v-stat.create .n{background:linear-gradient(92deg,var(--teal),var(--teal-lt));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sch-shell .sch-v-stat.zero .n{color:var(--ink-25)}
.sch-shell .sch-v-note{padding:16px 24px;font-size:14px;font-weight:600;color:var(--ink-60);display:flex;align-items:center;gap:9px}
.sch-shell .sch-v-note svg{width:17px;height:17px;color:var(--teal)}
.sch-shell .sch-v-cta{margin-left:auto;padding:14px 18px}

/* Coach preview row */
.sch-shell .sch-tool-rows{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.sch-shell .sch-coachrow{border:1px solid var(--hair);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.sch-shell .sch-coachrow.is-create{border-color:rgba(34,127,119,.30);box-shadow:0 10px 26px -18px rgba(34,127,119,.55)}
.sch-shell .sch-coachrow.is-create .sch-c-head{background:linear-gradient(180deg,rgba(93,202,165,.09),rgba(93,202,165,0))}
.sch-shell .sch-c-head{display:flex;align-items:center;gap:14px;padding:16px 18px;flex-wrap:wrap}
.sch-shell .sch-status{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 11px;border-radius:6px;flex:none}
.sch-shell .sch-status.create{background:var(--teal);color:#fff}
.sch-shell .sch-status.skip{background:#fff;color:var(--ink-40);border:1px solid var(--ink-25)}
.sch-shell .sch-status.error{background:#9b2d22;color:#fff}
.sch-shell .sch-c-name{font-size:21px;font-weight:700;letter-spacing:-.005em;line-height:1.1;color:var(--ink)}
.sch-shell .sch-c-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-60);background:var(--band);border:1px solid var(--hair-2);border-radius:6px;padding:4px 9px}
.sch-shell .sch-c-reason{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--ink-40);display:flex;align-items:center;gap:7px;text-align:right}
.sch-shell .sch-c-meta{display:flex;gap:26px;flex-wrap:wrap;padding:0 18px 14px 18px;font-size:14px;font-weight:500;color:var(--ink-60)}
.sch-shell .sch-c-meta b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sch-shell .sch-licwrap{padding:0 18px 18px}
.sch-shell .sch-lic-cap{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);margin:0 0 8px}
.sch-shell .sch-credits{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.sch-shell .sch-c-errs{margin:0 18px 14px;padding-left:18px;color:#9b2d22;font-size:13.5px;font-weight:600}

/* Skipped group — collapsed by default */
.sch-shell .sch-skipped{border:1px dashed var(--ink-25);border-radius:var(--r-sm);background:#FAFBFB}
.sch-shell .sch-sk-head{width:100%;display:flex;align-items:center;gap:12px;padding:15px 18px;background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink-60);text-align:left}
.sch-shell .sch-sk-head:hover{color:var(--ink)}
.sch-shell .sch-sk-head .sch-chev{margin-left:auto;transition:transform .2s ease}
.sch-shell .sch-sk-head[aria-expanded="true"] .sch-chev{transform:rotate(180deg)}
.sch-shell .sch-sk-head svg{width:18px;height:18px;flex:none}
.sch-shell .sch-sk-body{display:none;padding:0 12px 12px}
.sch-shell .sch-sk-body.open{display:flex;flex-direction:column;gap:10px}
.sch-shell .sch-skipped .sch-coachrow{background:#fff}

.sch-shell .sch-placeholder{margin-top:26px;padding:56px 24px;text-align:center;border:1px dashed var(--ink-25);border-radius:var(--r-sm);color:var(--ink-40);font-size:15px;font-weight:600}
.sch-shell .sch-backlink{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--teal);text-decoration:none;margin-bottom:14px}
.sch-shell .sch-backlink:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.sch-shell *{transition:none!important;animation:none!important}}
@media (max-width:560px){
  .sch-shell .sch-identity{flex-wrap:wrap}
  .sch-shell .sch-id-right{margin-left:0;width:100%}
  .sch-shell .sch-shpanel{padding:20px 16px 24px}
}

/* v2 RULE — 26px between the subnav divider and the first content element of EVERY
   sub-tab, and 26px between sibling content blocks. ONE shared rule (owl selector),
   never per-panel margins. */
.sch-shell .sch-shpanel-body{margin-top:26px}
.sch-shell .sch-shpanel-body>*+*{margin-top:26px}

/* v2 — coach-detail licence cards: the licence NAME clearly dominates the chip row. */
.sch-shell .sch-fap-lic__head>strong{font-size:20px;font-weight:700;color:var(--navy);line-height:1.15}

/* ── Toast stack (shared notification primitive; used by every CIS page) ── */
.sch-toast-stack{position:fixed;right:18px;bottom:18px;z-index:99999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.sch-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;color:#fff;
  font-family:'Rajdhani',system-ui,sans-serif;font-size:14.5px;font-weight:600;line-height:1.35;
  box-shadow:0 10px 30px -10px rgba(18,43,70,.5);animation:schToastIn .18s ease}
.sch-toast--success{background:#227F77}
.sch-toast--error{background:#9b2d22}
.sch-toast--info{background:#122B46}
.sch-toast__close{margin-left:auto;flex:none;background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 6px}
.sch-toast__close:hover{color:#fff}
@keyframes schToastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sch-toast{animation:none}}

/* Pending button state (shared): inline spinner + dimmed label. */
.sch-btn-pending{position:relative;opacity:.75;pointer-events:none}
.sch-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:currentColor;border-radius:50%;
  vertical-align:-2px;margin-right:6px;animation:schSpin .7s linear infinite}
@keyframes schSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sch-spin{animation-duration:1.6s}}

/* Quiet-danger variant (destructive inline actions, e.g. Undo import). */
.sch-shell .sch-sbtn-danger{color:#9b2d22}
.sch-shell .sch-sbtn-danger:hover{color:#7f1d1d}
/* Native file input pattern: visually-hidden input + styled label + filename echo. */
.sch-shell .sch-file-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.sch-shell .sch-file-name{font-size:13.5px;font-weight:500;color:var(--ink-60);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Disclosure toggles inside the shell (details/summary) — portal styling, no theme link blue. */
.sch-shell details>summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:13px}
.sch-shell details>summary:hover{color:var(--teal)}

/* ══ THE PERSON HERO — ONE definition, every page ═════════════════════════
   Rendered by SCH_CIS_Chrome::person_hero(). This block is the whole of its
   styling: the coach dashboard, My CPD, study groups and My study all wear it
   and NONE of them restates a rule. Values are the dashboard's, verbatim
   (sch-dashboard.css:1136-1138 and :1189-1190) — it was the reference, so the
   other three now match it rather than approximating it.

   THE FLIP IS THE POINT: `title` renders as the small uppercase eyebrow and
   `subtitle` as the large bold name, because on a person hero the PERSON is
   the headline and the page label is the caption. */
.sch-glass-page.sch-person-hero .sch-person-ava{
  display:block;width:52px;height:52px;border-radius:50%;
  background:#ccd7e0 center/cover no-repeat;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(18,43,70,.10);
}
.sch-glass-page.sch-person-hero .lg-hero-sub{
  font-size:20px !important;font-weight:700 !important;
  color:var(--l-ink,#122B46) !important;margin-top:2px !important;
}
.sch-glass-page.sch-person-hero .lg-hero-title{
  font-size:13px !important;font-weight:600 !important;letter-spacing:.08em !important;
  text-transform:uppercase;color:var(--l-ink-60,rgba(18,43,70,.62)) !important;
}
/* FLAT marks: natural aspect, height-capped, no chips or frames. */
/* The meta slot holds the logos and the actions side by side. It used to be
   styled only on My CPD, which is why the other pages' hero controls wrapped
   differently. */
.sch-glass-page.sch-person-hero .lg-hero-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sch-glass-page.sch-person-hero .sch-person-logos{display:flex;align-items:center;gap:14px}
.sch-glass-page.sch-person-hero .sch-person-logo{
  height:40px;width:auto;max-width:130px;object-fit:contain;display:block;
}
/* Right-side actions. Three styles only — anything else would be a fifth hero. */
.sch-glass-page.sch-person-hero .sch-person-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sch-glass-page.sch-person-hero .sch-person-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  font:600 13.5px Inter,system-ui,sans-serif;text-decoration:none;color:#122B46;
  background:#fff;border:1px solid rgba(18,43,70,.14);white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.sch-glass-page.sch-person-hero .sch-person-btn.is-ghost:hover{color:#122B46;border-color:rgba(18,43,70,.28)}
.sch-glass-page.sch-person-hero .sch-person-btn.is-primary{background:#227F77;color:#fff;border-color:#227F77}
.sch-glass-page.sch-person-hero .sch-person-btn.is-primary:hover{background:#1a6b63;color:#fff}
/* The association button carries the platform yellow as an OUTLINE that fills on
   hover — My CPD's own treatment (sch-my-cpd.css:101 at badf4b6^), kept verbatim
   rather than replaced with a solid fill. */
.sch-glass-page.sch-person-hero .sch-person-btn.is-yellow{background:transparent;border-color:#F1C40F;color:#8a6d00}
.sch-glass-page.sch-person-hero .sch-person-btn.is-yellow:hover{background:#F1C40F;border-color:#F1C40F;color:#122B46}
@media(max-width:640px){
  .sch-glass-page.sch-person-hero .sch-person-logo{height:30px}
}

/* ══ WIDE TABLE — frozen first column and header row ══════════════════════
   LIFTED from .schcoh__progwrap / .schcoh__matrix, which was built for the
   study-group progress matrix and is now shared. Two classes:

     .sch-freeze-wrap   the scroller. The CARD scrolls, never the page body.
     .sch-freeze        the table inside it.

   The first column and the header row are both sticky, and the corner cell
   sits above both — without that, the navy header band scrolls out from under
   the names and the two overlap.

   Sticky cells MUST paint their own background, and the header's rule needs
   !important for the reason documented in sch-feedback.css: sch-glass.css
   carries a generic `.sch-glass-page table th { background:#EDF1F6
   !important }` that otherwise wins. */
.sch-freeze-wrap{
  overflow-x:auto;overflow-y:auto;max-height:70vh;
  border:1px solid var(--hair,rgba(18,43,70,.10));border-radius:12px;background:#fff;
  /* The affordance: an edge shadow visible only while more remains to the
     right. background-attachment:local is what ties it to the scroll. */
  background-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,rgba(18,43,70,.14),transparent);
  background-position:right center,right center;background-repeat:no-repeat;
  background-size:100% 100%,14px 100%;background-attachment:local,scroll;
}
.sch-freeze{min-width:max-content}

/* ══ SCROLLING IT WITH A MOUSE ═══════════════════════════════════════════
   A two-finger swipe worked and nothing else did: no visible bar, no arrows,
   nothing to drag. On macOS the OS scrollbar is an OVERLAY — it does not exist
   until a scroll is already happening, which is no use to someone looking for
   a way to start one — and a mouse user with no horizontal wheel had no way in
   at all. The content was simply unreachable.

   A REAL SCROLLBAR, NOT THE OVERLAY. Giving ::-webkit-scrollbar an explicit
   height is what makes Chrome and Safari lay OUT a classic, always-present bar
   and reserve space for it, instead of the overlay that only exists mid-scroll.
   Measured in Chrome: with these rules the container reserves 12px; with
   nothing, 0px.

   THE STANDARD PROPERTIES ARE BEHIND @supports FOR A REAL REASON, not tidiness.
   In Chromium, setting scrollbar-width or scrollbar-color makes it IGNORE the
   ::-webkit-scrollbar rules entirely and fall back to the OS overlay — so
   stating both, which is the usual cross-browser advice, silently undoes the
   fix. Measured, same page, same table:

       ::-webkit-scrollbar height only          reserves 12px
       scrollbar-width:thin + scrollbar-color   reserves  0px
       both together                            reserves  0px

   `@supports not selector(::-webkit-scrollbar)` is false in Chrome and Safari
   and true in Firefox, so each engine gets exactly one mechanism. Firefox does
   not use overlay scrollbars on the desktop anyway; there the properties are
   only colouring an already-visible bar. */
.sch-freeze-wrap::-webkit-scrollbar{height:12px;width:12px}
.sch-freeze-wrap::-webkit-scrollbar-track{background:rgba(18,43,70,.06);border-radius:0 0 12px 12px}
.sch-freeze-wrap::-webkit-scrollbar-thumb{
  background:rgba(18,43,70,.34);border-radius:8px;border:3px solid transparent;background-clip:content-box;
}
.sch-freeze-wrap::-webkit-scrollbar-thumb:hover{background:rgba(18,43,70,.52);background-clip:content-box}
.sch-freeze-wrap::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  .sch-freeze-wrap{scrollbar-width:thin;scrollbar-color:rgba(18,43,70,.34) rgba(18,43,70,.06)}
}

/* THE CONTAINER IS FOCUSABLE, so the table is reachable with no mouse at all:
   tab to it, then left/right. The ring is the platform's, not the browser's
   default outline, and only on :focus-visible so a click does not draw it. */
.sch-freeze-wrap:focus{outline:none}
.sch-freeze-wrap:focus-visible{outline:2px solid var(--teal,#227F77);outline-offset:2px}

/* THE EDGE ARROWS. The script wraps the scroller in .sch-freeze-outer so the
   buttons have a positioning context that does NOT scroll with the content —
   inside the scroller they would slide away with the columns. They are hidden
   whenever there is nothing to reach in that direction, so an arrow is never a
   control that does nothing. The right-edge gradient above is untouched and
   still carries the "more to the right" hint. */
.sch-freeze-outer{position:relative}
/* A COMPACT BUTTON, VERTICALLY CENTRED — not a full-height edge strip. A strip
   covered the navy header band and, on the left, sat on top of the FROZEN name
   column, which does not scroll and must stay readable. The script sets the
   left button's offset to that column's measured width, so it lands just past
   the names, over the part that actually moves. */
.sch-freeze-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:46px;z-index:5;
  display:none;align-items:center;justify-content:center;
  border:1px solid rgba(18,43,70,.14);padding:0;cursor:pointer;color:#4A5A6E;
  background:rgba(255,255,255,.94);border-radius:8px;
  box-shadow:0 2px 8px rgba(18,43,70,.14);
  transition:background .12s ease,color .12s ease;
}
.sch-freeze-nav.is-on{display:flex}
.sch-freeze-nav.is-prev{left:6px}
.sch-freeze-nav.is-next{right:6px}
.sch-freeze-nav:hover{color:#122B46;background:#fff}
.sch-freeze-nav:active{background:#E8EFF3}
.sch-freeze-nav:focus-visible{outline:2px solid var(--teal,#227F77);outline-offset:-2px}
/* ON A NAVIGATION STRIP the arrows are shorter and sit inside the band. Neither
   strip has a frozen column, so both sit at the very edge — the script passes
   frozen:null and the left offset stays at 6px. The dock's band is navy, so its
   pair is light-on-dark; the sub-nav keeps the default ink. */
.sch-freeze-outer--nav .sch-freeze-nav{height:28px;width:22px;box-shadow:none;border-radius:6px}
.sch-freeze-outer--dark .sch-freeze-nav{
  background:rgba(10,22,40,.9);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.86);
}
.sch-freeze-outer--dark .sch-freeze-nav:hover{background:rgba(10,22,40,1);color:#fff}
.sch-freeze-outer--dark .sch-freeze-nav:active{background:#0a1628}
.sch-freeze-nav svg{width:20px;height:20px;display:block;pointer-events:none}
@media (hover:none){
  /* Touch already has the swipe; the arrows would only cover two columns. */
  .sch-freeze-nav{display:none !important}
}
.sch-freeze th:first-child,
.sch-freeze td:first-child{
  position:sticky;left:0;z-index:2;background:#fff;
  box-shadow:1px 0 0 var(--hair,rgba(18,43,70,.10));min-width:180px;
}
/* THE STICKY CELL MUST BE OPAQUE, and must stay opaque in every row state.
   A sticky cell paints over the scrolled content beneath it ONLY where it has
   a background of its own; `background:#fff` above covers the plain row, but a
   striped or hovered row repaints the OTHER cells and leaves this one showing
   the columns sliding underneath — text over text. Each state therefore
   repeats its own colour on the frozen cell, and !important is needed because
   the row-level rules that set those states are themselves !important
   (sch-feedback.css / sch-glass.css). */
.sch-glass-page.sch-light .sch-freeze tbody tr:nth-child(even) td:first-child{
  background:#FAFBFC !important;
}
.sch-glass-page.sch-light .sch-freeze tbody tr:hover td:first-child{
  background:#F1F5F8 !important;
}
.sch-glass-page.sch-light .sch-freeze tbody td:first-child{
  background:#fff !important;
}
/* A row the page has tinted for meaning (completed, selected) keeps that tint
   on the frozen cell too, so the column never desyncs from its row. */
.sch-glass-page.sch-light .sch-freeze tbody tr.is-done td:first-child{
  background:rgba(28,122,69,.055) !important;
}
.sch-glass-page.sch-light .sch-freeze thead th{
  position:sticky;top:0;z-index:3;background:var(--l-thead-bg) !important;
}
.sch-glass-page.sch-light .sch-freeze thead th:first-child{z-index:4} /* the corner */