/* FirstCase Academy — the application's styles (index.html). Moved out of an inline <style> so the
   page and its styles cache separately, and so dark mode (the color tokens at the top) has one
   place to live. Loaded after clinical.css, as the inline block was, so it still wins any tie. */

:root{
  --navy:#1b3a5b; --teal:#2a7f7f; --teal-dk:#1f5f5f; --gold:#c9962e;
  --bg:#f4f6f8; --card:#ffffff; --ink:#22303c; --sub:#5b6b7a;
  --line-red:#c8102e; /* SurgSoul: the line. Only ever a line. */
  --good:#277546; --bad:#c0392b; --line:#dde4ea; /* --good darkened from #2e8b57: the lighter shade was 4.25:1 on white, under the 4.5:1 WCAG AA floor for normal-size text (it's used at small sizes in .ok/.pill.done/.lv4) */
  /* Surfaces and inks with a job, so dark mode changes them in one place below. */
  --panel:#f8fafb; --tint:#eef5f5; --muted-bg:#eef2f6; --line-strong:#cddcec;
  --warn-bg:#fdf6e7; --warn-ink:#7a5610; --ok-bg:#e6f2ec; --bad-bg:#faeae7; --info-ink:#1f4e8a;
  --heading:#1b3a5b; --accent-ink:#1f5f5f;
  color-scheme: light;
}
/* Dark mode: the device's setting, unless My Profile → Appearance chose one (html[data-theme]).
   The header stays navy, and photographs and signatures keep their white grounds. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f161d; --card:#18222c; --panel:#1c2834; --ink:#e4eaf0; --sub:#a6b4c2; --line:#2c3a48; --line-strong:#3d4d5d;
    --heading:#e9eff5; --accent-ink:#7dcfcb; --tint:#15302f; --muted-bg:#202c38;
    --warn-bg:#2e2716; --warn-ink:#f0d391; --ok-bg:#163020; --good:#6fd39a; --bad-bg:#3a1e1c; --bad:#ff8f80; --info-ink:#9ec5f7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f161d; --card:#18222c; --panel:#1c2834; --ink:#e4eaf0; --sub:#a6b4c2; --line:#2c3a48; --line-strong:#3d4d5d;
  --heading:#e9eff5; --accent-ink:#7dcfcb; --tint:#15302f; --muted-bg:#202c38;
  --warn-bg:#2e2716; --warn-ink:#f0d391; --ok-bg:#163020; --good:#6fd39a; --bad-bg:#3a1e1c; --bad:#ff8f80; --info-ink:#9ec5f7;
  color-scheme: dark;
}

/* "by SurgSoul" endorsement lockup. SurgSoul is the parent company; FirstCase Academy
   is its product. Red is only ever a line — here, the 2px rule before the name. */
.endorse{display:flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.02em;
         color:inherit; opacity:.72; margin-top:6px;}
.endorse-line{width:18px; height:2px; background:var(--line-red); flex:none; border-radius:1px;}
.endorse strong{font-weight:700;}
.endorse a{color:inherit; text-decoration:none;}
.endorse a:hover{text-decoration:underline;}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55;}
.hidden{display:none !important;}
.print-only{display:none;}
/* installed on a notched iPhone the header sits under the status bar without this */
header{background:var(--navy); color:#fff; padding:18px 20px 0; padding-top:max(18px, env(safe-area-inset-top));}
#app-banner{display:none; padding:9px 16px; font-size:.85rem; font-weight:600; text-align:center;}
#app-banner.show{display:block;}
#app-banner.offline{background:var(--gold); color:var(--warn-ink);}
#app-banner.update{background:var(--teal); color:#fff; cursor:pointer;}
/* A banner you can act on holds a real button, so it can be reached with the keyboard. */
#app-banner .banner-btn{background:transparent; border:0; color:inherit; font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:2px 4px; width:100%;}
#app-banner .banner-btn:focus-visible{outline:2px solid currentColor; outline-offset:2px; border-radius:4px;}
/* What /app shows before the script has decided between sign-in and the app. */
#boot-splash{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:#dbe6f0; background:linear-gradient(160deg,var(--navy) 0%, #274d75 100%); font-weight:600;}
#boot-splash img{width:64px; height:64px; border-radius:14px;}
body:has(#auth-screen:not(.hidden)) #boot-splash, body:has(#app-main:not(.hidden)) #boot-splash{display:none;}
.head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
header h1{font-size:1.35rem; letter-spacing:.3px;}
/* The full badge is unreadable at header size and its navy ring disappears into the
   navy bar, so the header gets the compact EC mark instead — same file the tab and
   tab icon use. It deliberately does NOT reuse /icons/icon-192.png: that path is
   already in live clients' HTTP caches under the old glove artwork with a 7-day
   max-age, and a fresh path is the only way to change it on deploy day. It sits
   next to the <h1>, which carries the name, hence alt="". */
.brand{display:flex; align-items:center; gap:11px;}
.brand-mark{height:44px; width:44px; flex:none; border-radius:10px;}
@media(max-width:420px){ .brand-mark{height:36px; width:36px;} }
header p{color:#b8c9da; font-size:.85rem; margin:2px 0 12px;}
#user-chip-wrap{position:relative; margin-left:auto;}
#user-chip-btn{background:transparent; border:1px solid #4d6b88; color:#c7d6e4; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:.82rem; font-weight:600;}
#user-chip-btn:hover{background:rgba(255,255,255,.08);}
#user-chip-btn.on{background:var(--bg); color:var(--heading); border-color:var(--bg);}
#user-chip-btn.on .who b{color:var(--heading);}
#user-chip-btn .who b{color:#fff;}
/* On a phone the header was a third of the screen before any content: title, tagline and the
   endorsement stacked, then the chip on its own row. One row there — mark, name, chip. */
@media(max-width:600px){
  header{padding:10px 14px 0; padding-top:max(10px, env(safe-area-inset-top));}
  .head-top{flex-wrap:nowrap; align-items:center; margin-bottom:6px;}
  .head-top .brand, .head-top .brand > div{min-width:0;}
  header h1{font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  header .brand p{display:none;}
  #user-chip-wrap{min-width:0; flex:0 1 auto;}
  #user-chip-btn{max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:6px 10px;}
  #user-chip-btn .who-tail{display:none;}   /* the name, not the role or plan, when room is short */
}
nav{display:flex; flex-wrap:wrap; gap:4px;}
nav button{background:transparent; color:#c7d6e4; border:none; padding:10px 14px; cursor:pointer; font-size:.9rem; border-radius:8px 8px 0 0; font-weight:600;}
nav button.active{background:var(--bg); color:var(--heading);}
.nav-group{position:relative; display:inline-block;}
.nav-dropdown{position:absolute; top:calc(100% + 4px); left:0; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.2); padding:6px; min-width:190px; z-index:30; display:flex; flex-direction:column; gap:2px;}
#user-menu{left:auto; right:0;}
/* The menu is a column of buttons plus one link (Plans). Styled together so they cannot drift. */
.nav-dropdown button, .nav-dropdown a{background:transparent; border:none; color:var(--ink); text-align:left; padding:9px 11px; border-radius:6px; font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap; display:block; width:100%; text-decoration:none; font-family:inherit;}
.nav-dropdown button:hover, .nav-dropdown a:hover{background:var(--bg);}
.nav-dropdown button.active{background:var(--tint); color:var(--accent-ink);}
.nav-dropdown hr{border:none; border-top:1px solid var(--line); margin:5px 2px;}
.nav-menu-head{font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sub);
  padding:8px 10px 2px;}
.nav-menu-head + .nav-item{margin-top:0;}
#learn-head-study{border-top:1px solid var(--line); margin-top:4px; padding-top:10px;}
/* Screen-reader-only. First use in this stylesheet — the pin toggles announce into
   #nav-pin-msg, which is the only way a screen-reader user learns the bar changed. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
         clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}
/* The bar had no focus ring at all — every other control gets one from the .tab-row rule
   below, so a keyboard user in the nav was simply invisible. */
nav button:focus-visible, .nav-dropdown button:focus-visible, .nav-dropdown a:focus-visible{
  outline:2px solid var(--gold); outline-offset:-2px; border-radius:6px;}
/* Gold reads on the navy bar and barely at all on a white menu (about 2.6:1), so the menus,
   which are white, take teal (4.9:1) instead. */
.nav-dropdown button:focus-visible, .nav-dropdown a:focus-visible{outline-color:var(--teal);}
/* Two-line rows. `white-space:nowrap` on .nav-dropdown button is what keeps the plain
   account menu tidy and is exactly what a wrapping description must not inherit — hence a
   scoped override rather than dropping it. */
.nav-dropdown-rich{min-width:min(330px, calc(100vw - 24px));}
.nav-item{display:flex; align-items:stretch; gap:2px; border-radius:6px;}
.nav-item:hover{background:var(--bg);}
.nav-item > button[data-sec]{flex:1; white-space:normal; padding:8px 10px; line-height:1.3;}
.nav-item > button[data-sec]:hover{background:transparent;}  /* the row owns the hover */
.nav-item-label{display:block; font-weight:700; font-size:.9rem; color:var(--ink);}
.nav-item-desc{display:block; font-weight:400; font-size:.78rem; color:var(--sub); margin-top:1px;}
.nav-item > button[data-sec].active{background:var(--tint);}
.nav-item > button[data-sec].active .nav-item-label{color:var(--accent-ink);}
/* The pin toggle is a SIBLING of the row button, never a child: nested <button> is invalid
   HTML and browsers reparent it, which would turn every pin click into a navigation. */
.nav-dropdown button.nav-pin{flex:none; width:34px; padding:0; border-radius:6px; background:transparent;
         border:none; cursor:pointer; font-size:.85rem; opacity:.3; line-height:1;}
.nav-dropdown button.nav-pin:hover:not(:disabled){opacity:.85; background:var(--line);}
.nav-dropdown button.nav-pin.on{opacity:1;}
.nav-dropdown button.nav-pin:disabled{opacity:.12; cursor:not-allowed;}
/* A pinned section is an ordinary top-level button with a marker, so the bar can be rebuilt
   without touching anything the markup owns. */
.nav-pin-btn::before{content:"📌"; font-size:.7rem; margin-right:5px; opacity:.7;}
/* The last group's menu, right-aligned so it cannot run off a 1000px main. Which group is last
   depends on the account's bar, so applyNavProfile() stamps it. */
.nav-group-end .nav-dropdown{left:auto; right:0;}
/* Where pinned sections are generated. A marker only: shown, it would add a flex gap. */
.nav-pin-anchor{display:none;}
/* The top-level count is no longer fixed — 5 for a personal account, up to 6 for a learner,
   up to 7 for an educator, plus up to two pinned sections — so this no longer aims at a
   particular split. It just keeps each row
   dense enough that the wrap lands at two rows rather than three.
   Deliberately NOT flex-wrap:nowrap + overflow-x:auto, tempting as a scrolling bar is:
   .nav-dropdown is position:absolute inside .nav-group, and an overflow-x:auto ancestor
   establishes a scroll container that clips it — every dropdown would be cut off at the bar. */
@media(max-width:600px){
  nav{gap:2px; position:relative;}
  nav button{padding:8px 9px; font-size:.79rem;}
  .nav-pin-btn::before{display:none;}   /* the label needs the width more than the icon does */
  /* The panel anchors to the BAR, not to its trigger. A group sitting two-thirds along a
     375px row cannot open a 330px panel at left:0 without running off the screen, and there
     is no collision logic to save it — so at phone width the group stops being the
     positioning context and the menu simply spans the bar. */
  .nav-group{position:static;}
  .nav-group .nav-dropdown,
  .nav-group-end .nav-dropdown{left:0; right:0; width:auto; min-width:0;}
  .nav-item-desc{font-size:.75rem;}
  .nav-dropdown button.nav-pin{width:40px;}   /* the smallest honest touch target here */
}
/* The phone tab bar and the More sheet. Above 600px neither exists: the bar fits. */
.tabbar{display:none;}
@media(max-width:600px){
  .tabbar:not(.hidden){display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--card);
    border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(0,0,0,.08);
    padding:4px 4px max(4px, env(safe-area-inset-bottom));}
  .tabbar button{flex:1 1 0; min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; background:transparent; border:0; border-radius:10px; color:var(--sub);
    font:inherit; font-size:.68rem; font-weight:700; cursor:pointer; padding:4px 2px;}
  .tabbar button span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .tabbar svg{width:22px; height:22px; flex:none;}
  .tabbar button.active, .tabbar button[aria-expanded="true"]{color:var(--accent-ink); background:var(--tint);}
  .tabbar button:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
  body.has-tabbar main{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
  /* Anything scrolled into view — a focused field, a form opened below — stops above the tabs
     instead of underneath them. */
  html.has-tabbar{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom)); scroll-padding-top:8px;}
  /* The full bar becomes the More sheet: hidden until asked for, then a column above the tabs. */
  body.has-tabbar #nav{display:none;}
  body.has-tabbar.nav-sheet-open #nav{display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px;
    position:fixed; left:0; right:0; bottom:calc(60px + env(safe-area-inset-bottom)); z-index:44;
    max-height:min(72vh, 560px); overflow-y:auto; background:var(--navy); padding:12px 10px 14px;
    border-radius:14px 14px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.25);}
  body.has-tabbar.nav-sheet-open #nav > button, body.has-tabbar.nav-sheet-open #nav .nav-group-btn{
    width:100%; text-align:left; font-size:.95rem; padding:12px 14px; border-radius:8px;}
  body.has-tabbar.nav-sheet-open #nav .nav-group{display:block;}
  body.has-tabbar.nav-sheet-open #nav > button.in-tabbar{display:none;}
  body.has-tabbar.nav-sheet-open #nav .nav-group.hidden, body.has-tabbar.nav-sheet-open #nav > .hidden{display:none !important;}
  body.has-tabbar.nav-sheet-open #nav .nav-dropdown{position:static; box-shadow:none; margin:2px 0 8px;}
  body.has-tabbar header .head-top{margin-bottom:0; padding-bottom:10px;}
}
/* in-section tabs — splits a crowded section (e.g. "study" vs "manage my questions")
   into focused panels. Distinct look from .pill-row on purpose: pills are a choice
   within a form (which domain, how many questions); these are "which part of the
   page am I looking at" — different job, shouldn't look interchangeable. */
.tab-row{display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:16px; flex-wrap:wrap;}
.tab-row [role=tab]{background:transparent; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; padding:10px 16px; font-size:.95rem; font-weight:700; color:var(--sub); cursor:pointer;}
.tab-row [role=tab]:hover{color:var(--accent-ink);}
.tab-row [role=tab][aria-selected=true]{color:var(--heading); border-bottom-color:var(--teal);}
.tab-row [role=tab]:focus-visible, [role=tabpanel]:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;}
/* A tab that is its own destination elsewhere in the nav (Learners, People, Cohorts, Feedback
   Inbox; Backup for an educator). It stays in the tabset, so the router can still select it,
   but never shows in the strip. In a single-panel screen the strip and the editor intro go too
   (showSec sets data-solo). */
.tab-row [role=tab].solo-tab{display:none;}
.section[data-solo] > .tab-row, .section[data-solo] #manage-head{display:none;}
.section[data-solo-pending] [role=tabpanel]{visibility:hidden;}
/* A screen's heading takes focus when the screen changes (focusScreen). It is not a control, so
   it gets no ring. */
main h2[tabindex="-1"]:focus, #app-main:focus{outline:none;}
/* fieldset/legend reset — used to group related controls (answer options, a radio
   choice, a filter row) under one accessible label without the default browser
   fieldset border; legend is styled to match the existing label look exactly. */
fieldset{border:none; padding:0; margin:0 0 10px;}
legend{font-weight:700; font-size:.85rem; color:var(--heading); padding:0; margin-bottom:3px; width:100%;}
legend .small{font-weight:400;}
.skip-link{position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100; font-weight:700; text-decoration:none;}
.skip-link:focus{left:0; top:0;}
main{max-width:1000px; margin:0 auto; padding:20px 16px 60px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:14px;}
h2{color:var(--heading); font-size:1.15rem; margin-bottom:8px;}
h3{color:var(--accent-ink); font-size:1rem; margin:14px 0 6px;}
ul,ol{margin:6px 0 10px 22px;}
li{margin-bottom:4px;}
.tag{display:inline-block; background:var(--tint); color:var(--accent-ink); font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;}
.note{background:var(--warn-bg); border-left:4px solid var(--gold); padding:10px 12px; border-radius:0 8px 8px 0; font-size:.9rem; margin:10px 0;}
.why{background:var(--tint); border-left:4px solid var(--teal); padding:10px 12px; border-radius:0 8px 8px 0; font-size:.9rem; margin:10px 0;}
details{border:1px solid var(--line); border-radius:10px; background:var(--card); margin-bottom:10px; overflow:hidden;}
details summary{cursor:pointer; padding:14px 18px; font-weight:700; color:var(--heading); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
details summary::after{content:"+"; color:var(--accent-ink); font-size:1.3rem; font-weight:400;}
details[open] summary::after{content:"–";}
details .body{padding:0 18px 16px;}
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;}
.pill{background:var(--card); border:2px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; font-size:.92rem; font-weight:600; color:var(--ink); text-align:left;}
.pill:hover{border-color:var(--teal);}
.pill.done{background:var(--ok-bg); border-color:var(--good); color:var(--good); cursor:default;}
.pill.wrong{animation:shake .3s; border-color:var(--bad);}
.pill.sel{background:var(--teal); border-color:var(--teal); color:#fff;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* Someone who has asked their device for less motion gets the colour change without the shake,
   and no smooth scrolling or animated progress bars. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
.drill-status{font-size:.9rem; color:var(--sub); margin:8px 0;}
.btn{background:var(--teal); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer;}
.btn:hover{background:var(--teal-dk);}
.btn.ghost{background:transparent; color:var(--accent-ink); border:2px solid var(--teal);}
.btn.danger{background:transparent; color:var(--bad); border:2px solid var(--bad);}
.btn.sm{padding:5px 10px; font-size:.8rem;}
.btn.active-rating{background:var(--teal); color:#fff; border-color:var(--teal);}
.dash-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.dash-table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--sub); border-bottom:2px solid var(--line); padding:6px 8px;}
.dash-table td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.dash-table tr:hover td{background:var(--panel);}
.dash-name b{color:var(--heading);}
.dash-metric{font-weight:700; color:var(--ink);}
/* The Learners board: sortable headers, a search and cohort filter above it, and a "quiet" tag
   in words rather than a colour alone. */
.dash-wrap{overflow-x:auto;}
.dash-table th.dash-name{font-size:.85rem; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:400;
  border-bottom:1px solid var(--line); padding:7px 8px; background:transparent;}
.sort-btn{background:transparent; border:0; padding:2px 0; font:inherit; font-weight:700; color:inherit; cursor:pointer;
  text-transform:inherit; letter-spacing:inherit; display:inline-flex; gap:4px; align-items:center;}
.sort-btn:hover{color:var(--accent-ink);}
.sort-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;}
.sort-btn .sort-mark{opacity:.35;}
th[aria-sort] .sort-btn{color:var(--heading);}
th[aria-sort] .sort-btn .sort-mark{opacity:1;}
.quiet-tag{display:inline-block; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:9px;
  background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--line-strong); margin-left:4px;}
.dash-table tr.is-quiet > *{background:var(--warn-bg);}
.people-tools{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:flex-end; margin:6px 0 2px;}
.people-tools > div{flex:1 1 180px; min-width:0;}
.people-tools input, .people-tools select{margin-bottom:4px;}
.dash-sort-mobile{display:none;}
@media(max-width:600px){
  .dash-sort-mobile{display:block;}
  /* Stacked cards, with every cell labelled, instead of a table scrolled sideways inside its box
     with most of its columns out of view. Roles are set on the elements (renderDashboard),
     because display:block strips table semantics in some browsers. */
  .dash-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);}
  .dash-table, .dash-table tbody, .dash-table tr, .dash-table th, .dash-table td{display:block; width:100%;}
  .dash-table tr{border:1px solid var(--line); border-radius:10px; margin:0 0 10px; padding:6px 12px; background:var(--card);}
  .dash-table tr:hover td{background:transparent;}
  .dash-table td, .dash-table th.dash-name{border:0; padding:5px 0;}
  .dash-table td{display:grid; grid-template-columns:96px 1fr; gap:8px;}
  .dash-table td::before{content:attr(data-label); font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--sub); padding-top:2px;}
  .dash-table th.dash-name{border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:2px;}
}
/* Today: the session card on My Progress and its one-line strip on the Case Library. */
.today-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.today-streak{font-weight:700; color:var(--accent-ink);}
.today-exam{margin:0 0 6px; font-weight:600;}
.today-step{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.today-step:last-child{border-bottom:none;}
.today-step .today-label{flex:1;}
.today-check{width:1.4em; text-align:center; font-weight:700; color:var(--line);}
.today-step.done .today-check{color:var(--good);}
.today-week{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0;}
.today-week label{display:flex; align-items:center; gap:6px; margin:0;}
.today-week select{width:auto; margin:0; padding:4px 8px;}
.week-dots{display:flex; gap:6px; margin-bottom:4px;}
.week-dots .dot{width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:flex;
                align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:var(--sub);}
.week-dots .dot.on{background:var(--teal); border-color:var(--teal); color:#fff;}
.week-dots .dot.rest{border-style:dashed;}
.week-dots .dot.future{opacity:.5;}
.week-dots .dot.now{box-shadow:0 0 0 2px var(--gold);}
.today-strip{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
             background:var(--tint); border-left:3px solid var(--teal); border-radius:8px; padding:8px 12px; margin-bottom:12px;}
.dash-none{color:var(--sub); font-weight:400;}
.team-pill{display:inline-block; background:var(--muted-bg); color:var(--sub); font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:9px;}
.rev-endorsed{background:var(--ok-bg); color:var(--good);}
.rev-flagged{background:var(--bad-bg); color:var(--bad);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; align-items:center;}
.opt{display:block; width:100%; text-align:left; background:var(--card); border:2px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font-size:.95rem;}
.opt:hover{border-color:var(--teal);}
.opt.correct{border-color:var(--good); background:var(--ok-bg);}
.opt.incorrect{border-color:var(--bad); background:var(--bad-bg);}
.cst-options .opt:disabled{opacity:1; color:var(--ink); cursor:default;}
.opt.picked{border-color:var(--navy); background:var(--muted-bg);} /* exam mode: confirms a pick without revealing right/wrong */
.explain{background:var(--tint); border-radius:8px; padding:10px 12px; font-size:.9rem; margin:8px 0 14px; display:none;}
.scorebar{font-weight:700; color:var(--heading); margin-bottom:10px;}
.flashcard{background:var(--card); border:2px solid var(--line); border-radius:14px; min-height:210px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; cursor:pointer; font-size:1.05rem;}
.flashcard .front{font-size:1.3rem; font-weight:800; color:var(--heading);}
.flashcard #fc-front-text{white-space:pre-line;}
.flashcard.cst-card .front{font-size:1.05rem; line-height:1.6; text-align:left;}
.flashcard.cst-card .back{text-align:left; line-height:1.6;}
/* pre-line, not nowrap: card text uses line breaks structurally — "Left: Osteotome /
   Right: Chisel", and the blank line between an instrument's name, aliases and use — and
   textContent would otherwise collapse them all into one run-on paragraph. */
.flashcard .back{display:none; color:var(--ink); white-space:pre-line;}
.flashcard.flipped .front{display:none;}
.flashcard.flipped .back{display:block;}
.flashcard .hint{color:var(--sub); font-size:.8rem; margin-top:14px;}
/* The photograph IS the question on an instrument card, so it gets real room. Capped against
   the viewport as well as in pixels so a phone in landscape does not push the rating buttons
   off the bottom of the screen. */
.fc-photo{max-width:100%; max-height:min(46vh, 320px); border-radius:8px; margin-bottom:8px;}
.fc-zoom{position:fixed; inset:0; z-index:60; background:rgba(10,22,38,.94);
  display:flex; align-items:center; justify-content:center; padding:18px; cursor:zoom-out;}
/* The overlay must never survive its hidden attribute. */
.fc-zoom[hidden]{display:none !important;}
.fc-zoom img{max-width:100%; max-height:100%; border-radius:10px; background:#fff;}
/* askDialog(): the in-page replacement for window.prompt(). */
.ask-backdrop{position:fixed; inset:0; z-index:70; background:rgba(10,22,38,.55); display:flex; align-items:center;
  justify-content:center; padding:16px;}
.ask-dialog{background:var(--card); color:var(--ink); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  width:min(480px, 100%); max-height:calc(100vh - 32px); overflow:auto; padding:20px 22px;}
.ask-dialog h2{margin-bottom:8px;}
.ask-dialog #ask-text p{font-size:.92rem; margin:0 0 8px;}
.ask-dialog label{display:block; margin-top:6px;}
.ask-dialog .btn:disabled{opacity:.45; cursor:not-allowed;}
.fc-zoom-close{position:absolute; top:max(14px, env(safe-area-inset-top)); right:14px; background:#fff; color:var(--navy);
  border:0; border-radius:8px; padding:10px 14px; font:inherit; font-weight:700; cursor:pointer; min-height:44px;}
.fc-zoom-close:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.fc-study{margin-bottom:12px;}
.fc-study select{max-width:420px; margin-bottom:2px;}
.chip{font:inherit; font-size:.82rem; padding:5px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--sub);}
.chip[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy);}
/* The count inside a selected chip: grey on navy was 2.1:1. */
.chip[aria-pressed="true"] .small{color:#d6e2ee;}
.locked-note{margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--sub);}
.check-item{display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.92rem;}
.check-item .sig{margin-left:auto; color:var(--sub); font-size:.78rem; white-space:nowrap;}
.progress{height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin:6px 0 14px;}
.progress div{height:100%; background:var(--teal); transition:width .3s;}
table{border-collapse:collapse; width:100%; font-size:.9rem; margin:8px 0;}
th,td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top;}
th{background:var(--muted-bg); color:var(--heading);}
.section{display:none;}
.section.active{display:block;}
.small{font-size:.83rem; color:var(--sub);}
input[type=text],input[type=password],input[type=email],input[type=search],input[type=date],input[type=number],select,textarea{
  width:100%; padding:9px 11px; border:2px solid var(--line); border-radius:8px;
  font-size:.92rem; font-family:inherit; background:var(--card); color:var(--ink); margin:3px 0 10px;
}
textarea{min-height:80px; resize:vertical;}
label{font-weight:700; font-size:.85rem; color:var(--heading);}
label .small{font-weight:400;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media(max-width:640px){.grid2{grid-template-columns:1fr;}}
/* Case Library: one search box, then surgeon → region groups of compact rows. Scoped under
   #lib-list so the nested <details> are not each a heavy bordered box: the surgeon is a card,
   a region is a light rule with a smaller summary. */
.lib-tools{margin-top:10px;}
.lib-tools input[type=search]{margin-bottom:4px;}
.check-row{display:flex; gap:8px; align-items:flex-start; font-weight:600; margin-top:8px; cursor:pointer;}
.check-row input{margin-top:3px;}
.lib-tools-row{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px;}
.lib-tools-row .btn-row{margin:0;}
#lib-count{margin:4px 0;}
#lib-list{margin-top:8px;}
#lib-list details{margin-bottom:8px;}
#lib-list summary{padding:12px 14px; gap:10px;}
/* Child combinators: the global details[open] summary::after also matches the summary of a
   CLOSED group nested inside an open one, which would show it as open. */
#lib-list details > summary::after{content:"+";}
#lib-list details[open] > summary::after{content:"–";}
#lib-list summary:focus-visible{outline:2px solid var(--teal); outline-offset:-2px; border-radius:8px;}
#lib-list .lib-title{flex:1; min-width:0; overflow-wrap:anywhere;}
#lib-list .lib-meta{font-size:.78rem; font-weight:600; color:var(--sub); white-space:nowrap;}
#lib-list details .body{padding:0 12px 10px;}
#lib-list details details{border:0; border-top:1px solid var(--line); border-radius:0; margin:0; background:transparent;}
#lib-list details details summary{padding:10px 4px; font-size:.92rem; color:var(--accent-ink);}
#lib-list details details .body{padding:0 0 8px;}
#lib-list .lib-starter{background:var(--panel);}
.lib-note{margin:0 0 8px;}
.lib-empty{margin:10px 2px;}
.lib-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:0 0 6px;
  text-align:left; cursor:pointer; font:inherit; color:var(--ink);}
.lib-row:hover{border-color:var(--teal);}
.lib-row:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.lib-row-main{min-width:0;}
.lib-row-name{font-weight:600; overflow-wrap:anywhere;}
.lib-row-tag{display:inline-block; margin-left:6px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent-ink); background:var(--tint); border-radius:8px; padding:1px 6px; vertical-align:2px;}
.lib-row-hint{display:block; font-size:.76rem; color:var(--sub); margin-top:2px;}
.lib-row .badge{margin-top:0; white-space:nowrap;}
.lib-row-bar{display:block; grid-column:1 / -1; height:4px; margin:4px 0 0;}
.lib-row-bar span{display:block; height:100%; background:var(--teal);}
.tag-group{background:var(--muted-bg); color:var(--sub);}
.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:10px; margin-top:6px;}
.lv0{background:var(--muted-bg); color:var(--sub);}
.lv1{background:var(--warn-bg); color:var(--warn-ink);}
.lv2{background:var(--tint); color:var(--accent-ink);}
.lv3{background:var(--muted-bg); color:var(--info-ink);}
.lv4{background:var(--ok-bg); color:var(--good);}
.lvl-btn{border:2px solid var(--line); background:var(--card); border-radius:10px; padding:7px 12px; cursor:pointer; font-size:.82rem; font-weight:700;}
.lvl-btn.on{border-color:var(--teal); background:var(--teal); color:#fff;}
.lvl-btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.sec-block{margin-bottom:14px;}
.sec-block h3{margin-top:0;}
.list-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap;}
.update-item{padding:12px 0; border-bottom:1px solid var(--line);}
.update-item:last-child{border-bottom:0;}
.update-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--sub); font-size:.8rem;}
.update-unread{border-left:3px solid var(--teal); padding-left:10px;}
.update-badge{display:inline-block; padding:2px 7px; border-radius:999px; background:var(--tint); color:var(--accent-ink); font-size:.72rem; font-weight:800;}
.toolbar{display:flex; gap:8px; flex-wrap:wrap;}
.err{color:var(--bad); font-size:.85rem; font-weight:600;}
/* Federated sign-in. A rule of its own rather than reusing .err, because "this will create a
   second account" is a caution the person should read and then proceed past, not a failure. */
.warn{background:var(--warn-bg, var(--warn-bg)); border-left:3px solid var(--warn, #c77700);
      padding:8px 10px; border-radius:6px; margin:8px 0;}
/* An educator invitation: news, not a caution, so teal rather than .warn's amber. */
.invite-note{background:var(--tint); border-left:3px solid var(--teal); padding:8px 10px;
             border-radius:6px; margin:8px 0 12px; text-align:left;}
.invite-link{display:block; width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem;}
.auth-or{display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--ink-soft, var(--sub));
         font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;}
.auth-or::before, .auth-or::after{content:""; flex:1; height:1px; background:var(--line);}
.provider-btn{display:block; width:100%; text-align:center; margin-bottom:8px; text-decoration:none;}
.account-pick{display:block; width:100%; text-align:left; margin-bottom:8px;}
.ok{color:var(--good); font-size:.85rem; font-weight:600;}
/* a deactivated account stays visible and legible — it is a state, not a removal */
.list-row.inactive-row{opacity:.62;}
/* Overview (educators): the attention list first, then setup, then the program at a glance. */
.ov-head{margin-top:0;}
.ov-row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.ov-row .btn{margin-bottom:6px;}
.attn-list{list-style:none; margin:4px 0 0; padding:0;}
.attn-list li{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);}
.attn-list li:last-child{border-bottom:0;}
.attn-count{flex:none; min-width:2.2em; text-align:center; font-weight:800; font-size:1.05rem; color:var(--heading);
  background:var(--warn-bg); border-radius:8px; padding:3px 6px;}
.attn-text{flex:1; min-width:0;}
.attn-list li.all-clear{color:var(--good); font-weight:600;}
.setup-list{margin:6px 0 0 0; padding:0; list-style:none; counter-reset:step;}
.setup-list li{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); counter-increment:step;}
.setup-list li:last-child{border-bottom:0;}
.setup-list li::before{content:counter(step); flex:none; width:28px; height:28px; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--sub);}
.setup-list li.done::before{content:"✓"; background:var(--good); border-color:var(--good); color:#fff;}
.setup-list li.done .setup-text{color:var(--sub);}
.setup-text{flex:1; min-width:0;}
.glance-table{margin:4px 0 8px; font-size:.88rem;}
.glance-table th, .glance-table td{padding:6px 10px;}
/* People: one line per person, actions under Manage, Delete apart from the rest. */
.people-summary{font-weight:700; color:var(--heading); margin:0 0 6px;}
.person-row{display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);}
.person-row.inactive-row .person-main{opacity:.62;}
.person-main{min-width:0; overflow-wrap:anywhere;}
.person-meta{display:block;}
.person-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.person-controls select{width:auto; max-width:200px; margin:0; font-size:.82rem; padding:5px 8px;}
.person-manage{grid-column:1 / -1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
.role-pill{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:1px 8px; border-radius:999px;
  background:var(--muted-bg); color:var(--sub); vertical-align:1px;}
.role-pill.is-educator{background:var(--tint); color:var(--accent-ink);}
.inline-form{margin:12px 0 0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:8px;}
.inline-form-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.inline-form-row input{flex:1 1 220px; margin:0;}
.inline-form p.small{margin:2px 0 6px;}
.danger-zone{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-strong);}
.danger-zone p{margin-bottom:6px;}
@media(max-width:600px){
  .person-row{grid-template-columns:1fr;}
  .person-controls{justify-content:flex-start;}
}
.pill-off{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 7px; border-radius:999px; margin-left:6px;
  background:var(--muted-bg); color:var(--sub); vertical-align:middle;}
/* Read-only notice for a lapsed subscription. Amber, not red: nothing is broken and nothing
   has been lost, so it must not read like an error. */
.plan-banner{
  background:var(--warn-bg); border:1px solid var(--line-strong); border-left:4px solid #b4791c;
  color:var(--warn-ink); border-radius:8px; padding:11px 14px; margin:0 0 16px;
  font-size:.9rem; line-height:1.5;
}

.demo-banner{background:var(--warn-bg); border:1px solid var(--line-strong); border-left:4px solid var(--gold); border-radius:8px;
  padding:10px 14px; margin:0 0 14px; font-size:.9rem; color:var(--warn-ink);}
.demo-banner a{color:var(--accent-ink); font-weight:700; white-space:nowrap;}

/* The confirmation prompt. Blue-grey, not the amber above: a lapsed subscription means
   something is actually wrong, this is only a request, and two amber bars stacked would read
   as equally urgent. */
.verify-banner{
  background:var(--muted-bg); border:1px solid var(--line-strong); border-left:4px solid var(--navy);
  color:var(--heading); border-radius:8px; padding:11px 14px; margin:0 0 16px;
  font-size:.9rem; line-height:1.5; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.verify-banner span{flex:1 1 260px;}

/* auth screen */
#auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(160deg,var(--navy) 0%, #274d75 100%);}
.auth-card{background:var(--card); border-radius:14px; padding:28px; width:100%; max-width:400px; box-shadow:0 12px 40px rgba(0,0,0,.3);}
.auth-card form{margin:0;}   /* the fields sit in a real <form>; no UA margin on it */
.auth-card h1{color:var(--heading); font-size:1.4rem; margin-bottom:2px;}
/* on the sign-in card the badge IS the heading — no wordmark under a logo that
   already carries one. The alt text is what keeps the h1 non-empty. */
.auth-card h1.auth-brand{margin:2px 0 10px;}
/* Sized so "Create account" is on screen without scrolling: at 236px the badge alone pushed
   the sign-up button below the fold on a laptop and on a phone. */
.auth-brand img{display:block; width:100%; max-width:176px; height:auto; margin:0 auto;}
/* Sign-up has twice the fields of sign-in, so the badge gives up more room there. */
.auth-card.is-register .auth-brand img{max-width:112px;}
@media(max-width:600px){
  .auth-brand img{max-width:124px;}
  .auth-card.is-register .auth-brand img{max-width:92px;}
  .auth-card{padding:22px 20px;}
}
.auth-card .sub{color:var(--sub); font-size:.85rem; margin-bottom:16px;}
.auth-toggle{display:flex; gap:6px; margin-bottom:16px;}
.auth-toggle button{flex:1; padding:9px; border:2px solid var(--line); background:var(--card); border-radius:8px; font-weight:700; cursor:pointer; color:var(--sub);}
.auth-toggle button.on{border-color:var(--teal); color:var(--accent-ink); background:var(--tint);}
@media print{
  header,nav,.btn,.btn-row,.no-print{display:none !important;}
  body{background:var(--card);}
  .section{display:none !important;}
  .section.print-me{display:block !important;}
  .print-only{display:block !important;}
  .print-header{border-bottom:2px solid #1b3a5b; padding-bottom:10px; margin-bottom:16px;}
  .print-header h1{color:#1b3a5b; font-size:1.3rem;}
  .print-header .print-mark{display:block; height:58px; width:auto; margin-bottom:8px;}
  .print-header p{color:var(--sub); font-size:.85rem; margin-top:2px;}
  .card,details{border:1px solid #999; break-inside:avoid;}
  details{display:block;} details summary::after{content:"";}
  details:not([open]) .body{display:block;}
}