/* Styling aims at the Wix player's shape: white sidebar with sectioned step tiles
   carrying a document or padlock icon, a teal progress bar and primary button, an
   audio pill with a circular play control, and "Complete Step ›" bottom-right.
   Eric put visual redesign out of scope, so this matches structure and affordances
   rather than chasing a pixel match. */
:root{
  /* Measured from the live Wix player, not guessed. Headings and UI are
     Montserrat; lesson body copy is Arial 16px/24px; the accent is #57BC8A; and
     buttons and images are SQUARE (border-radius 0). */
  --ink:#1a1a1a; --muted:#5f6b74; --faint:#8a949c;
  --line:#ededed; --line-soft:#f0f2f3; --line-strong:#333334;
  --bg:#fff; --bg2:#f7f8f9;
  --accent:#57bc8a; --accent-dark:#46a877; --accent-soft:#eaf7f0;
  --done:#57bc8a; --locked:#a3adb4;
  --navy:#0c2340; --hero:#f7fafd; --card-line:#e6ecf2;
  --radius:0px; --radius-card:8px; --max:1180px;
  --sidebar:376px; --content:813px;
  --head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.5 var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.btn,.tile,.section-title,.chip,.tab,.admin-nav a,.stat-value{font-family:var(--head)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* Site chrome. Navy bar with the official white logo, following the design for the
   catalogue. Only local pages are linked. */
header.site{padding:11px 24px;background:var(--navy)}
.site-nav a{position:relative;padding:18px 0}
/* the active page is underlined in the accent, as in the design */
.site-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);border-radius:2px 2px 0 0}
.site-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.site .brand{display:flex;align-items:center;text-decoration:none;flex:none}
/* height fixed, width from the asset's own ratio — a hard width would squash it */
.site .brand img{height:30px;width:auto}
/* The catalogue has the big search field in its hero, as in the design, so the
   header box would be the same search twice on the same screen. */
/* The catalogue has the big field in its hero and the admin has its own search
   box, so in both places the header box would be the same search twice on one
   screen. */
body.catalog .site-search,body.admin .site-search{display:none}
/* ONE auto margin in the bar. With two, the free space is split between them and
   the search floats in the middle of the bar looking like a mistake. */
.site-search{margin-left:auto;display:flex}
.site-search input{padding:8px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font:inherit;font-size:14px;min-width:210px;background:rgba(255,255,255,.08);color:#fff}
.site-search input::placeholder{color:#9fb0c4}
.site-search input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.14)}
.site-end{display:flex;align-items:center;gap:12px}
/* on pages with no header search, the account block takes the push instead */
body.catalog .site-end,body.admin .site-end{margin-left:auto}
.site-end form{margin:0}
.site-me{font-family:var(--head);font-size:14px;color:#c9ced2;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-admin{font-family:var(--head);font-size:14px;text-decoration:none;color:#c9ced2;
  padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}
.site-admin:hover{color:#fff}
.site-end .btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.site-end .btn--ghost:hover{border-color:#fff}
.site-nav{display:flex;gap:22px;align-items:center}
.site-nav a{font-family:var(--head);font-size:14.5px;text-decoration:none;color:#fff}
.site-nav a:hover{color:var(--accent)}
.btn--soft{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent-soft)}
.btn--outline{background:var(--bg);color:#12305a;border-color:#12305a}

/* Course info page: tinted title band, full-width hero, then the detail. */
.course-page{max-width:1130px;margin:0 auto;padding:34px 22px 70px}
.course-band{background:var(--accent-soft);padding:26px 28px}
.course-band h1{margin:0 0 10px}
.course-band .cert{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink);font-size:15px}
.course-hero{width:100%;display:block}
.course-body{padding:28px 28px 0}
.course-cta{margin:22px 0 0}
.wrap{max-width:var(--max);margin:0 auto;padding:30px 22px 70px}
body.catalog .wrap{padding-top:6px}
h1{font-size:28px;line-height:1.4;margin:0 0 10px;font-weight:600;letter-spacing:normal}
h2{font-size:19px;margin:26px 0 10px;font-weight:600}
.muted{color:var(--muted);font-size:13px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{display:inline-block;padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;text-decoration:none;color:var(--muted);background:var(--bg)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.count{color:var(--muted);font-size:14px;margin:0 0 22px}

/* ---- catalogue: the hero band, then the programs ----
   The band is a tinted panel with the background detail from the design pinned to
   its right edge. The art is a background-image rather than an <img> so it can be
   cropped by the panel at any window width without a wrapper to clip it. */
.hero{background:var(--hero);position:relative;overflow:hidden;
  border-bottom:1px solid var(--card-line)}
.hero-art{position:absolute;inset:0;background:url("/static/hero-art.svg") right center / auto 100% no-repeat;
  pointer-events:none}
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:38px 22px 10px;
  display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.hero-text{flex:1;min-width:260px}
.hero-eyebrow{margin:0 0 6px;font-family:var(--head);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark)}
.hero-inner h1{font-size:38px;line-height:1.2;font-weight:600;margin:0 0 8px;letter-spacing:-0.01em}
.hero-lede{margin:0;color:var(--muted);font-size:16px}
.hero-search{flex:1;min-width:280px;max-width:620px;margin-top:6px}
.hero-search-field{display:flex;align-items:center;gap:12px;background:var(--bg);
  border:1px solid var(--card-line);border-radius:14px;padding:14px 18px;
  box-shadow:0 1px 2px rgba(12,35,64,.04)}
.hero-search-field:focus-within{border-color:var(--accent)}
.hero-search-icon{color:var(--faint);display:flex}
.hero-search input{border:0;outline:none;font:inherit;font-size:15.5px;width:100%;background:none}

/* Continue learning. Sits inside the hero band, as in the design, and is rendered
   only when there is something to continue. */
.resume{position:relative;max-width:var(--max);margin:0 auto;padding:20px 22px 34px}
.resume-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.resume-card{display:flex;align-items:stretch;gap:16px;background:var(--bg);
  border:1px solid var(--card-line);border-radius:12px;padding:14px;
  box-shadow:0 1px 2px rgba(12,35,64,.04)}
/* 16:9, the ratio the course art is drawn at. Any other ratio crops it, and these
   images carry their own title, so a crop cuts a word in half rather than losing
   scenery — cropping to the right did not help: 81% of the width still shows. */
.resume-img{width:112px;height:63px;object-fit:cover;border-radius:8px;
  flex:none;background:var(--bg2)}
.resume-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.resume-body h3{font-family:var(--head);font-size:16px;line-height:1.35;font-weight:600;margin:7px 0 4px}
.resume-body h3 a{text-decoration:none}
.resume-body h3 a:hover{color:var(--accent-dark)}
.resume-progress{display:flex;align-items:center;gap:10px;width:100%;margin:5px 0 0}
.resume-progress .progress-bar{max-width:260px}
.resume-progress .progress-bar {display: block;width: 100%;height: 5px;background: var(--line);border-radius: 999px;overflow: hidden;}
.resume-progress .progress-bar > span {display: block;height: 100%;width: 0;background: #43b87d;border-radius: inherit;transition: width 0.4s ease;}
.resume-pct{font-family:var(--head);font-size:13px;color:var(--muted);flex:none}
.resume-steps{margin:0;font-size:12.5px;color:var(--muted)}
/* its own row at the end of the body, right-aligned. Beside the body it had
   nowhere to shrink to and overlapped the step count on a phone. */
.resume-go{align-self:flex-end;margin-top:10px;display:flex;align-items:center;gap:4px;
  font-family:var(--head);font-size:14px;text-decoration:none;color:var(--accent-dark)}
.resume-go:hover{color:var(--ink)}

/* the section heading and its count, side by side */
.band{display:flex;align-items:baseline;gap:14px;margin:0}
.band-title{font-size:21px;font-weight:600;margin:0}
.band .count{margin:0}
.resume .band-title{margin:0 0 14px}

/* A category label on the card, so a program says what family it belongs to
   without the reader having to know the catalogue. Clickable: it filters the
   catalogue to that category, same destination as the chips above it. */
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;align-self:flex-start;font-family:var(--head);font-size:12px;
  padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);
  text-decoration:none}
a.tag:hover{background:var(--accent-dark);color:#fff}
.card-summary{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.card-snippet{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:auto 0 0;padding-top:4px}
.card-go{display:flex;align-items:center;gap:3px;font-family:var(--head);font-size:14px;
  text-decoration:none;color:var(--accent-dark);flex:none}
.card-go:hover{color:var(--ink)}
.no-results{border:1px solid var(--line);padding:26px 24px;text-align: center;}
.no-results p{margin:0 0 10px}
.no-results p:last-child{margin:0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.card{border:1px solid var(--card-line);border-radius:12px;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease}
.card:hover{border-color:#cfdae6;box-shadow:0 6px 18px rgba(12,35,64,.07)}
.card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h2{margin:0;font-size:17px;line-height:1.35;font-weight:600}
.card-body h2 a{text-decoration:none}
.card-body h2 a:hover{color:var(--accent-dark)}
.card-body .meta{margin:0;color:var(--muted);font-size:13px}
.card-body .btn{margin-top:auto;align-self:flex-start}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:5px;text-decoration:none;font-size:16px;line-height:1.4;font-weight:400;cursor:pointer;border:1px solid transparent}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-dark)}
.btn--ghost{background:var(--bg);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:7px 14px;font-size:14px}
.btn--go svg{margin-right:-4px}

.course-landing .cert{color:var(--muted);font-size:14px;margin:0 0 20px}

/* sections / accordions */
.section{border-bottom:1px solid var(--line);margin-bottom: 16px;border-radius: 8px;}
.section summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px ;cursor:pointer;list-style:none}
.section summary::-webkit-details-marker{display:none}
.section-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.section-title{font-weight:400;font-size:16px;line-height:1.4;color:var(--ink)}
.section-count{color:var(--muted);font-size:12.5px}
.section .chev{color:var(--faint);flex:none;transition:transform .15s ease}
.section[open] .chev{transform:rotate(180deg)}
.section-steps{margin:0;padding-left:15px;color:var(--muted);font-size:14px;background-color: var(--hero);}
.section-steps li{padding: 10px 10px 10px 20px;border-bottom: 1px solid var(--line);position: relative;list-style: none;}
.course-meta {display: flex;align-items: center;gap: 38px;margin: 32px 0 28px;}
.meta-item {display: flex;align-items: center;gap: 13px;}
.meta-item+.meta-item {border-left: 1px solid #dce3e5;padding-left: 35px;}
.meta-label {font-size: 12px;color: #77838d;margin-bottom: 4px;}
.meta-value {font-size: 15px;font-weight: 700;}
.meta-icon svg {stroke: var(--locked);}
.course-body .section {border: 1px solid var(--line);margin-bottom: 16px;border-radius: 8px;}
.course-body .section .section-steps li::before {content: '';height: 8px;width: 8px;background-color: var(--accent);display: block;position: absolute;left: 0;border-radius: 50%;top: 50%;transform: translateY(-50%);}
.section-title-wrapper {display: flex;flex-wrap: wrap;gap: 10px;align-items: center;margin-bottom: 18px;}
.section-rename-form{display:flex;align-items:center;gap:4px;flex: auto;justify-content: end;}
.section-rename-form .section-title-input{font:inherit;font-size:15px;padding:4px 8px;
  border:1px solid var(--card-line);border-radius:6px;width:100%}
.section-title-wrapper .admin-rowtools, .panel .section-title-wrap h2 {margin-bottom: 0;}
.section-title-wrap {display: flex;flex-wrap: wrap;flex: auto;justify-content: space-between;align-items: center;}

/* ---- player ----
   Willian's design (13-Aug-2026), not the Wix player. The 1296px inset frame with
   1px #333334 borders and two independently scrolling panes is GONE, deliberately:
   this is a full-bleed shell with a sticky footer and a page that scrolls normally.
   Parity now covers content, rules and numbers — not appearance.

   One markup for both widths. `.contents` is a <details>: forced open and styled as
   a sidebar above 900px, left collapsed as a "Course contents" row below it. The
   UA hides a closed details' children with display:none, which author CSS can
   override — that is what makes one list serve both, instead of two that drift. */
body.player{background:var(--bg2);display:block;height:auto}
body.player main{padding:0}

/* the mobile course bar: hidden on desktop, where the sidebar and crumbs say this */
.course-bar{display:none}

.player-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);
  max-width:1560px;margin:0 auto;align-items:start;
  /* room for the sticky footer, so the last paragraph is never under it */
  padding:0 0 80px}

.player-side{position:sticky;top:0;align-self:start;background:var(--bg);
  border-right:1px solid var(--card-line);}
/* Above 900px the panel IS the sidebar: the toggle and its label are not rendered
   and the body is simply shown. */
.contents-toggle,.contents-summary{display:none}
.contents-body{display:block;padding:22px 20px 20px}
.side-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.side-course{font-family:var(--head);font-size:19px;line-height:1.3;font-weight:600;margin:0}
.side-progress{display:flex;align-items:center;gap:12px;margin:14px 0 6px;
  padding-bottom:16px;border-bottom:1px solid var(--card-line);
  font-family:var(--head);font-size:14px;color:var(--muted)}
.ring{flex:none}
.ring-num{font-family:var(--head);font-size:13px;font-weight:600;fill:var(--ink)}
.overview-link{display:flex;align-items:center;gap:10px;padding:14px 0;
  font-family:var(--head);font-size:15px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--card-line)}
.overview-link:hover{color:var(--accent-dark)}
.overview-link svg{color:var(--muted)}

.sec{border-bottom:1px solid var(--card-line)}
.sec > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 0;cursor:pointer;list-style:none}
.sec > summary::-webkit-details-marker{display:none}
.sec-head{display:flex;flex-direction:column;gap:3px;min-width:0}
.sec-title{font-family:var(--head);font-size:14.5px;font-weight:600;line-height:1.35}
.sec-count{font-size:12.5px;color:var(--muted)}
.sec .chev{color:var(--faint);flex:none;transition:transform .15s ease}
.sec[open] .chev{transform:rotate(180deg)}

.lessons{list-style:none;margin:0 0 10px;padding:0}
.lesson-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0px 2px;text-decoration:none;color:var(--ink);border-radius:8px;border-left:3px solid transparent}
.lesson-row:hover{background:var(--bg2)}
.lesson-row .row-icon{color:var(--faint);flex:none;margin-top:1px}
.row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.row-title{font-size:14px;line-height:1.4}
.row-status{font-size:12.5px;color:var(--accent-dark)}
.lesson-row.is-done .row-icon{color:var(--done)}
/* the current lesson, marked with the accent rule from the design */
.lesson-row.is-current{background:var(--accent-soft);border-left-color:var(--accent)}
.lesson-row.is-current .row-title{font-weight:600}
.lesson-row.is-locked{color:var(--locked)}
.lesson-row.is-locked .row-icon{color:var(--locked)}
.cert-issued{margin:14px 0 0;font-size:13px;color:var(--accent-dark)}
.player-main{background:var(--bg);padding:26px 44px 40px;}
/* the column fills; the MEASURE is what needs a limit, not the panel */
.player-main > .lesson,.player-main > .crumbs{max-width:900px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);margin:0 0 22px}
.crumbs a{color:var(--accent-dark);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.lesson-eyebrow{margin:0 0 8px;font-family:var(--head);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark)}
.lesson h1{font-size:33px;line-height:1.2;font-weight:600;margin:0 0 22px;letter-spacing:-0.01em}
.lesson p{margin:0 0 16px;font-size:16px;line-height:1.65}
.lesson-img{width:100%;border-radius:12px;margin:0 0 22px}

/* audio: play, waveform, time, volume — the waveform is drawn from the file */
.audio{display:flex;align-items:center;gap:14px;border:1px solid var(--card-line);
  border-radius:12px;padding:12px 16px;margin:0 0 22px;background:var(--bg)}
.audio-play{width:44px;height:44px;border-radius:50%;border:0;flex:none;cursor:pointer;
  background:var(--accent-dark);color:#fff;display:flex;align-items:center;justify-content:center}
.audio-play:hover{background:var(--accent)}
/* 3px bars with a 2px gap at every width; player.js asks for as many as fit. Bars
   that stretch to fill turn into a bar chart on a wide screen. */
.wave{flex:1;min-width:0;height:34px;display:flex;align-items:center;gap:2px;cursor:pointer;
  overflow:hidden}
.wave i{width:3px;flex:none;background:#cdd6de;border-radius:2px;display:block}
.wave i.on{background:var(--accent)}
.wave:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* the range input stays as the accessible control and the keyboard path; the bars
   are the visible one */
.audio-seek{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.audio-time{font-family:var(--head);font-size:13.5px;color:var(--muted);flex:none;
  font-variant-numeric:tabular-nums}
.audio-icon{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;flex:none}
.audio-icon:hover{color:var(--ink)}

/* quiz */
.question{border:0;margin:0 0 26px;padding:0}
.question legend{font-family:var(--head);font-size:16px;font-weight:600;line-height:1.45;
  margin:0 0 12px;padding:0}
.option{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin:0 0 8px;
  border:1px solid var(--card-line);border-radius:10px;font-size:15px;cursor:pointer}
.option:hover{border-color:#cfdae6}
.option.is-chosen{border-color:var(--accent);background:var(--accent-soft)}
.option input{margin-top:3px;flex:none}
/* Three states, and they must LOOK different: the same grey block for "correct" and
   "incorrect" is how a reader ends up unsure which one they got. */
.feedback{margin:10px 0 0;font-size:14px;line-height:1.55;padding:10px 12px;border-radius:8px}
.feedback--wrong{background:#fdecec;color:#8f2427;border-left:3px solid #c0392b}
.feedback--right{background:var(--accent-soft);color:var(--accent-dark);border-left:3px solid var(--accent)}
/* Deliberately says nothing about right or wrong: our key is derived, not
   authoritative, and a verdict we cannot stand behind is worse than none. */
.feedback--unknown{background:var(--bg2);color:var(--muted);border-left:3px solid var(--line-strong)}

/* Finishing a course now has a screen. It used to have only a database row. */
.done{display:flex;gap:16px;align-items:flex-start;background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:12px;padding:20px 22px;margin:0 0 26px}
.done-icon{color:var(--accent-dark);flex:none;margin-top:2px}
.done h2{font-size:20px;margin:0 0 6px;font-weight:600}
.done p{margin:0 0 8px;font-size:15px}
.done-serial code{background:var(--bg);padding:2px 6px;border-radius:4px;font-size:13px}
.done .btn{margin-top:4px}
.grade{margin:0 0 6px;font-family:var(--head);font-size:15px}
.grade--pass{color:var(--muted);font-size:14px;margin-bottom:20px}
.step-hidden{padding:40px 0}
.step-hidden h2{margin:0 0 10px}

/* the action bar, fixed to the bottom at every width — it is the one control that
   must never require a scroll to find */
.player-foot{position:fixed;left:0;right:0;bottom:0;background:var(--bg);
  border-top:1px solid var(--card-line);box-shadow:0 -2px 10px rgba(12,35,64,.05);z-index:20}
.player-foot-inner{max-width:1560px;margin:0 auto;display:flex;align-items:center;
  gap:16px;padding:14px 24px;justify-content: space-between;}
.foot-at{margin:0 auto;font-family:var(--head);font-size:14px;color:var(--muted)}
.btn-spacer{flex:none;width:1px}
.btn--back{gap:8px}
.player-foot .btn--primary{padding:13px 22px;border-radius:10px}
.player-foot .btn--ghost{border-radius:10px;border-color:var(--card-line)}
.step-actions form{margin:0}
.step-actions {display: flex;align-items: center;gap: 16px;}

@media (max-width:900px){
  /* the sidebar becomes the "Course contents" row from the design, at the top of
     the lesson rather than beside it */
  body.player header.site{display:none}
  .course-bar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 12px;
    background:var(--navy);color:#fff;padding:12px 16px 14px}
  .course-back{color:#fff;display:inline-flex;align-items:center;gap:2px;grid-row:1;
    font-family:var(--head);font-size:14px;text-decoration:none}
  /* a bare chevron is not a signpost — Varsha could not find the way back */
  .course-back-label{font-size:14px}
  .course-bar-title{font-family:var(--head);font-size:16px;font-weight:600;grid-row:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .course-bar-progress{grid-column:1 / -1;margin-top:12px}
  .course-bar-progress{height:4px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
  .course-bar-progress span{display:block;height:100%;background:var(--accent)}
  .course-bar-pct{grid-column:1 / -1;display:block;margin-top:8px;font-family:var(--head);font-size:13px;color:var(--accent)}

  .player-shell{display:block;padding-bottom:104px}
  .player-side{position:static;min-height:0;border-right:0;background:transparent}
  .player-main{padding:18px 16px 28px;min-height:0}
  .crumbs{display:none}

  .contents{margin:14px 16px 0;border:1px solid var(--card-line);border-radius:12px;
    background:var(--bg)}
  .contents-summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
  .contents-icon{color:var(--muted);display:flex}
  .contents-label{font-family:var(--head);font-size:15px;font-weight:600}
  .contents-at{margin-left:auto;font-size:13.5px;color:var(--muted)}
  .contents-chev{color:var(--faint);display:flex;transition:transform .15s ease}
  .contents-toggle:checked ~ .contents-summary .contents-chev{transform:rotate(90deg)}
  /* the checkbox itself stays reachable by keyboard but takes no space */
  .contents-toggle{position:absolute;width:1px;height:1px;opacity:0}
  .contents-toggle:focus-visible ~ .contents-summary{outline:2px solid var(--accent);outline-offset:2px}
  /* closed means closed, and open means open — no UA behaviour involved */
  .contents-toggle:not(:checked) ~ .contents-body{display:none}
  .contents-body{padding:0 16px 18px;border-top:1px solid var(--card-line)}
  .side-head{padding-top:14px}
  .side-course{font-size:16px}

  .lesson-eyebrow{font-size:11.5px}
  .lesson h1{font-size:27px;margin:0 0 18px}
  .lesson p{font-size:15.5px}
  .lesson-img{border-radius:10px}
  .audio{padding:10px 12px;gap:10px}
  .audio-play{width:40px;height:40px}
  .wave{height:28px}

  .player-foot-inner{padding:12px 16px;gap:10px}
  /* the primary action takes the room it needs; the count is not worth a row */
  .foot-at{display:none}
  .step-actions {gap: 10px;}
  /*.step-actions{flex:1}
  .player-foot .step-actions .btn,.player-foot .step-actions form{width:100%;justify-content:center}*/
}

/* course descriptions — measured on the Wix page: a 270px left navigation column
   that scrolls on its own (900px visible over 1853px of content), items ~45px tall
   with 15px left padding, beside a content column whose blocks are two columns:
   text ~370px left, ~390px course image right, each field an icon + label with the
   body text on the line BELOW. */
body.descriptions{background:var(--bg)}
.desc-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:44px;
  max-width:1320px;margin:0 auto;padding:34px 24px 70px;align-items:start}

.desc-nav{position:sticky;top:24px;max-height:calc(100vh - 60px);overflow-y:auto;
  border:1px solid var(--line);background:var(--bg)}
.desc-nav-group{border-bottom:1px solid var(--line)}
.desc-nav-group:last-child{border-bottom:0}
.desc-nav-title{font-family:var(--head);font-size:14.5px;line-height:1.35;margin:0;
  padding:14px 15px;color:var(--ink)}
.desc-nav-item{display:block;min-height:45px;padding:12px 15px;font-size:14px;line-height:1.35;
  text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.desc-nav-item:hover{background:var(--bg2)}
.desc-nav-item.is-active{background:var(--accent-soft);border-left-color:var(--accent);font-weight:500}

.desc-content{min-width:0}
.desc-group{margin:0 0 44px;scroll-margin-top:24px}
.desc-group-title{font-family:var(--head);font-size:28px;line-height:1.3;font-weight:600;
  color:var(--accent);margin:0 0 22px}
.desc{display:grid;grid-template-columns:minmax(0,370px) 390px;gap:40px;align-items:start;
  justify-content:space-between;padding:28px;margin:0 0 22px;background:var(--bg2);scroll-margin-top:24px}
.desc-main{min-width:0}
.desc-title{font-family:var(--head);font-size:22px;line-height:1.3;font-weight:600;margin:0 0 20px}
.desc-title a{text-decoration:none}
.desc-title a:hover{color:var(--accent-dark)}
.desc-field{margin:0 0 14px;padding:14px 16px;background:var(--bg);border:1px solid var(--line)}
.desc-field-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.desc-icon{width:30px;height:30px;object-fit:contain;flex:none;display:block}
.desc-label{font-family:var(--head);font-size:16px;font-weight:600;line-height:1.2}
.desc-text{margin:0;font-size:14px;line-height:1.6}
.desc-media img{width:100%;height:auto;display:block}
.desc-more{margin:6px 0 0}
.desc-more summary{cursor:pointer;font-family:var(--head);font-size:16px;color:var(--accent-dark);
  list-style:none;display:inline-block;padding:4px 0}
.desc-more summary::-webkit-details-marker{display:none}
.desc-more summary::after{content:" ›"}
.desc-more[open] summary::after{content:" ‹"}
.desc-more p{margin:12px 0 0;font-size:14px;line-height:1.6}
.desc-cta{margin-top:16px !important}

@media (max-width:1080px){
  .desc-layout{grid-template-columns:1fr;gap:22px}
  .desc-nav{position:static;max-height:280px}
  .desc{grid-template-columns:1fr;gap:20px}
  .desc-media{order:-1;max-width:390px}
}

/* Top section, measured on the Wix page: a full-bleed banner photo 192px tall with
   the title (36px, white) and strapline (22px, white) over it, then an intro of two
   paragraphs beside a ~380px image. */
.desc-hero{min-height:192px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:34px 24px;text-align:center;background-color:#3a4650;
  background-size:cover;background-position:center;position:relative}
.desc-hero::before{content:"";position:absolute;inset:0;background:rgba(20,28,34,.34)}
.desc-hero h1,.desc-hero .desc-strapline{position:relative;margin:0;color:#fff}
.desc-hero h1{font-family:var(--head);font-size:36px;font-weight:600;line-height:1.2;letter-spacing:.01em}
.desc-strapline{font-family:var(--head);font-size:22px;font-weight:400;line-height:1.4;max-width:1000px}
.desc-intro{max-width:1320px;margin:0 auto;padding:48px 24px 10px;display:grid;
  grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:center}
.desc-intro p{margin:0 0 18px;font-size:16px;line-height:1.65}
.desc-intro p:last-child{margin-bottom:0}
.desc-intro-media img{width:100%;height:auto;display:block}

/* The course image deliberately breaks out of the panel on the right — measured
   54px past its edge on the Wix page. The panel must not clip it. */
.desc{overflow:visible}
/* translate, not a negative margin: a negative margin widens the box and stretched
   the image from 390 to 472px. This shifts it without resizing it. */
.desc-media{transform:translateX(82px)}

@media (max-width:1080px){
  .desc-hero h1{font-size:28px}
  .desc-strapline{font-size:18px}
  .desc-intro{grid-template-columns:1fr;gap:24px;padding:30px 22px 6px}
  .desc-intro-media{max-width:380px}
  .desc-media{transform:none}
}

/* private-preview gate */
body.gate{background:var(--bg2)}
.gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{background:var(--bg);border:1px solid var(--line-strong);padding:34px 34px 30px;max-width:450px;width:100%}
.gate-card h1{font-size:24px;margin:0 0 10px}
.gate-lede{margin:0 0 20px;font-size:15px;color:var(--muted);line-height:1.5}
.gate-card .field input{width:100%}
.gate-card .btn{width:100%;justify-content:center;margin-top:4px}
.gate-card .hint{margin:18px 0 0}

.spinner{display:inline-block;width:14px;height:14px;margin-left:8px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  vertical-align:-2px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================================================================
   Sign-in / sign-up modal. Supplied as a complete static prototype
   (signlogin.html) and adapted here: real name/required attributes added,
   the tab switch is native radio+label (works with no JS at all), and two
   bare class names collide with unrelated existing rules elsewhere in this
   file — `.tab` (course/admin content tabs) and `.subtitle` (admin page
   subtitles) — so both are scoped under `.auth-tabs`/`.auth-form` here
   rather than left bare. Everything else keeps the names as supplied. */

.auth-overlay{position:fixed;inset:0;width:100%;height:100%;padding:0px 20px 5px;
  background:rgba(0,0,0,.48);display:flex;align-items:center;justify-content:center;
  overflow-y:auto}

.auth-modal{position:relative;width:100%;max-width:1680px;height:min(900px,calc(100vh - 40px));
  display:flex;background:#eef5f7;overflow:hidden}

.close-btn{position:absolute;top:20px;right:20px;width:40px;height:40px;padding:0;border:0;
  display:inline-block;background:transparent;cursor:pointer;z-index:100}
.close-btn span{position:absolute;left:5px;top:19px;width:30px;height:2px;background:#202629}
.close-btn span:first-child{transform:rotate(45deg)}
.close-btn span:last-child{transform:rotate(-45deg)}

/* Image/testimonial area. Desktop+tablet: image only. Mobile: the image
   becomes the background behind a CSS-only testimonial slider. */
.testimonial-area{position:relative;width:57%;height:100%;overflow:hidden;
  background-image:url("https://static.wixstatic.com/media/de4f7d_20f2f95f6977475fa3aa7a5a1f70f8bb~mv2.jpg/v1/fill/w_1586,h_1270,fp_0.48_0.64,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Frame%2034962.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat}

.mobile-testimonials{display:none}
.slider-radio{position:absolute;opacity:0;pointer-events:none}
.slider{position:relative;width:100%}
.slides{position:relative;width:100%}
.slide{display:none;width:100%;padding:25px 20px;background:#fff;border-radius:8px;
  color:#404548;font-size:16px;line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.slide p{margin:0}
.slide strong{font-weight:700}
#slide-1:checked ~ .slides .slide-1{display:block}
#slide-2:checked ~ .slides .slide-2{display:block}
#slide-3:checked ~ .slides .slide-3{display:block}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px}
.slider-dots label{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);cursor:pointer}
#slide-1:checked ~ .slider-dots label[for="slide-1"],
#slide-2:checked ~ .slider-dots label[for="slide-2"],
#slide-3:checked ~ .slider-dots label[for="slide-3"]{background:#fff;transform:scale(1.2)}

.auth-content{width:43%;height:100%;padding:25px 35px 30px;background:#eef5f7;
  overflow-y:auto;scrollbar-width:thin}
.auth-content > input{position:absolute;opacity:0;pointer-events:none}

.auth-tabs{width:100%;display:flex;border-bottom:1px solid var(--locked);margin:0 auto 15px;}
.auth-tabs .tab{position:relative;width:50%;padding-bottom:10px;text-align:center;
  color:var(--faint);font-size:18px;font-weight:600;cursor:pointer}
.auth-tabs .tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:transparent}
#signup-tab:checked ~ .auth-tabs .signup-label{color:var(--accent)}
#signup-tab:checked ~ .auth-tabs .signup-label::after{background:var(--accent)}
#login-tab:checked ~ .auth-tabs .login-label{color:var(--accent)}
#login-tab:checked ~ .auth-tabs .login-label::after{background:var(--accent)}

.auth-form{display:none;width:100%}
#signup-tab:checked ~ .signup-form{display:block}
#login-tab:checked ~ .login-form{display:block}
#verify-tab:checked ~ .verify-form{display:block}
#forgot-tab:checked ~ .forgot-form{display:block}

.auth-form h1{margin:0 0 8px;color:var(--accent);text-align:center;font-size:24px;line-height:1.25;font-weight:bold}
.auth-form .subtitle{max-width:494px;margin:0 auto 20px;text-align:center;font-size:16px;line-height:1.4;font-weight:600}
.auth-form .hint{max-width:700px;margin:10px auto 0;color:#707477;text-align:center;font-size:14px}

.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}
.form-group{position:relative;margin-bottom:16px}
.form-group label{display:block;margin-bottom:7px;color: var(--muted);font-size:14px;font-weight:600}
.form-group label span{color:var(--muted)}
.form-group input{display: block;width: 100%;height: 44px;padding: 0 16px;border: 1px solid var(--locked);border-radius: 3px;background: var(--bg);color: var(--muted);font-size: 16px;outline: none;}
.form-group input:focus{border-color:var(--accent)}
.form-group input::placeholder{color:#a5a8aa}

.eye-icon{position:absolute;right:15px;bottom:9px;width:25px;height:25px;opacity:.4;cursor:pointer}
.eye-icon:hover{opacity:.8}
.eye-icon svg{width:100%;height:100%;fill:none;stroke:#555;stroke-width:1.8}

/* The newsletter checkbox from the supplied file is repurposed as the required
   agree-to-terms checkbox (product decision, 2026-09-17) — unchecked by
   default, required, relabelled. Fixed along the way: the supplied CSS drew
   the ✓ unconditionally regardless of the real (visually hidden) checkbox's
   state, which would have been actively misleading on a now-required field. */
.newsletter{display:flex;align-items:flex-start;gap:10px;margin:7px 0 22px;cursor:pointer}
.newsletter input{position:absolute;opacity:0}
.custom-checkbox{flex: 0 0 24px;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--locked);border-radius: 3px;background: var(--bg);color: transparent;font-size: 20px;font-weight: 700;}
.newsletter input:checked ~ .custom-checkbox{color:var(--accent);}
.newsletter-text{color:#606568;font-size:14px;line-height:1.3}

.submit-btn{width:100%;height:48px;padding:0;border:0;border-radius:5px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;cursor:pointer}
.submit-btn:hover{background:var(--accent-dark)}
.submit-btn:disabled{opacity:.7;cursor:default}

.terms{max-width:700px;margin:15px auto;color:var(--muted);text-align:center;font-size:12px;line-height:1.5}
.terms a{color:var(--accent);text-decoration:underline}

.social-divider{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.social-divider span{flex:1;height:1px;background:#c8d0d3}
.social-divider p{margin:0;color:var(--muted);font-size:14px;white-space:nowrap}
.social-buttons{display:flex;align-items:center;justify-content:center;gap:25px}
.social-buttons a{width:32px;height:32px;padding:0;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.social-buttons a svg{width:32px;height:32px}
.login-form h1{margin-top:22px}
.forgot-password{margin-top:-7px;margin-bottom:28px;text-align:right}
.forgot-password label{color:var(--muted);font-size:15px;cursor:pointer}
.login-divider{margin-top:22px}

@media (max-width:1200px){
  .auth-content{padding:50px 35px 35px}
  .auth-form h1{font-size:29px}
  .auth-form .subtitle{font-size:15px}
}
@media (max-width:900px){
  .auth-overlay{padding:10px}
  .auth-modal{height:calc(100vh - 20px)}
  .testimonial-area{width:48%}
  .auth-content{width:52%;padding:50px 25px 30px}
  .auth-form h1{font-size:26px}
  .auth-form .subtitle{font-size:16px}
}
@media (max-width:768px){
  .auth-overlay{position:fixed;inset:0;padding:0;display:block;overflow-y:auto;background:rgba(0,0,0,.48)}
  .auth-modal{width:100%;max-width:none;height:auto;min-height:100vh;display:flex;
    flex-direction:column;overflow:visible}
  .auth-content{order:1;width:100%;height:auto;padding:32px 22px 38px;overflow:visible}
  .testimonial-area{order:2;width:100%;height:auto;min-height:360px;padding:55px 22px 30px;
    display:flex;align-items:center;justify-content:center;background-position:center center;
    background-image:url("https://static.wixstatic.com/media/de4f7d_bf90103f92d746d3a46df7a33ad3ae6e~mv2.jpg/v1/fill/w_733,h_379,fp_0.49_0.38,lg_1,q_80,enc_avif,quality_auto/Frame%2034985.jpg")}
  .mobile-testimonials{position:relative;display:block;width:100%;max-width:500px}
  .close-btn{top:12px;right:12px;width:38px;height:38px;background:rgba(255,255,255,.9);border-radius:50%}
  .close-btn span{left:5px;top:18px;width:28px}
  .auth-tabs{margin-bottom:24px}
  .auth-tabs .tab{padding-bottom:11px;font-size:19px}
  .auth-tabs .tab::after{height:4px}
  .auth-form h1{margin-top:0;margin-bottom:9px;padding:0 5px;font-size:26px;line-height:1.25}
  .login-form h1{margin-top:0}
  .auth-form .subtitle{margin-bottom:25px;padding:0 5px;font-size:16px;line-height:1.4}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-group{margin-bottom:16px}
  .form-group label{margin-bottom:7px;font-size:16px}
  .form-group input{height:50px;font-size:16px}
  .newsletter{gap:9px;margin-top:6px;margin-bottom:21px}
  .custom-checkbox{flex-basis:27px;width:27px;height:27px;font-size:19px}
  .newsletter-text{font-size:13px;line-height:1.35}
  .submit-btn{height:52px;font-size:19px}
  .terms{margin:14px auto 22px;font-size:11px;line-height:1.5}
  .social-divider{gap:10px;margin-bottom:15px}
  .social-divider p{font-size:14px}
  .forgot-password{margin-top:-5px;margin-bottom:24px}
  .forgot-password label{font-size:14px}
  .slide{padding:22px 20px;font-size:15px;line-height:1.5}
}
@media (max-width:480px){
  .auth-content{padding:28px 18px 35px}
  .testimonial-area{min-height:330px;padding:50px 18px 25px}
  .auth-tabs{margin-bottom:22px}
  .auth-tabs .tab{font-size:18px}
  .auth-form h1{padding:0;font-size:23px}
  .auth-form .subtitle{padding:0;font-size:15px}
  .form-group label{font-size:15px}
  .form-group input{height:49px}
  .newsletter-text{font-size:12px}
  .submit-btn{height:51px;font-size:18px}
  .terms{font-size:10.5px}
  .social-divider p{font-size:13px}
  .slide{padding:20px 17px;font-size:14px}
}
@media (max-width:360px){
  .auth-content{padding-left:15px;padding-right:15px}
  .auth-form h1{font-size:21px}
  .auth-form .subtitle{font-size:14px}
  .newsletter-text{font-size:11.5px}
  .testimonial-area{min-height:310px}
}


/* ------------------------------------------------------------------ narrow screens
   Everything responsive lives here, at the end, ON PURPOSE. The first attempt put
   `.resume-row{grid-template-columns:1fr}` above the rule it was overriding, so the
   two-column layout won at every width and the Continue card cramped to a column of
   single words on a phone. Cascade order is not a detail when the later rule is the
   general one.

   Most people using this will be on a phone, so these are not a fallback. */

@media (min-width:900px){
  .player-main {
    height: calc(100vh - 160px);
    overflow: auto;
  }
  .contents-body .sections {
    height: calc(100vh - 402px);
    overflow: auto;
    padding-right: 15px;
    margin-right: -15px;
  }
}
@media (max-width:1000px){
  .hero-inner{padding:28px 20px 4px}
  .hero-inner h1{font-size:32px}
  .hero-search{max-width:none;flex-basis:100%}
  .resume{padding:16px 20px 28px}
  .resume-row{grid-template-columns:1fr}
}

@media (max-width:760px){
  /* The bar stacks into two rows rather than pretending to fit. Nav stays visible —
     two links that scroll beat a menu that has to be discovered. */
  header.site{padding:10px 16px}
  .site-inner{gap:12px 16px}
  .site .brand img{height:26px}
  .site-nav{gap:18px;font-size:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex:1 0 auto}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:12px 0;white-space:nowrap}
  .site-search{flex-basis:100%;margin-left:0}
  .site-search input{min-width:0;width:100%}
  /* the name is the first thing to go: signing out and reaching the admin are
     actions, and a name is only a label */
  .site-me{display:none}
  .site-end{margin-left:auto;gap:10px}

  .hero-inner{padding:22px 16px 2px}
  .hero-inner h1{font-size:27px}
  .hero-lede{font-size:15px}
  .hero-eyebrow{font-size:11px}
  .hero-search-field{padding:12px 14px;border-radius:12px}
  .hero-art{background-size:auto 130%;opacity:.8}

  .resume{padding:14px 16px 24px}
  .resume-card{padding:12px}
  .resume-img{width:118px;height:66px}
  .resume-body h3{margin:6px 0 6px;font-size:15.5px}
  .resume-progress .progress-bar{max-width:none}

  .wrap{padding:24px 16px 56px}
  .band-title{font-size:19px}
  /* one row that scrolls sideways, so the filters do not eat half the screen */
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;margin-bottom:18px}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}

  .course-band,.course-body{padding-left:16px;padding-right:16px}
}

/* Below this a 16:9 image above every card means scrolling past pictures to reach
   the third course. The card becomes a row: image left, text right — which is the
   shape Willian's mobile design uses, and it fits three courses on a screen. */
@media (max-width:620px){
  .grid{grid-template-columns:1fr;gap:14px}
  .card{flex-direction:row;align-items:stretch}
  .card-img{width:126px;flex:none;aspect-ratio:auto;align-self:stretch}
  /* the course art carries its own title on the left, so a centre crop in a narrow
     column shows half a word; the photograph is on the right */
  .card-img img{height:100%;object-position:right center}
  .card-body{padding:12px 14px;gap:7px}
  .card-body h2{font-size:15.5px}
  .card-summary,.card-snippet{font-size:13px;
    /* two lines, so the row height stays predictable down the list */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-foot{flex-wrap:wrap;gap:4px 10px}
  .tag{font-size:11px;padding:3px 8px}
}

@media (max-width:420px){
  .hero-inner h1{font-size:24px}
  .resume-card{gap:12px}
  .resume-img{width:96px;height:54px}
  .card-img{width:104px}
}


/* ------------------------------------------------------- restored admin styles
   Deleted by accident, not by decision. The player rewrite replaced everything
   between the "player" marker and the "course descriptions" marker, and the whole
   admin stylesheet was sitting in between — so the admin rendered as an unstyled
   table with full-size thumbnails. 65 assertions passed over it, because none of
   them looked at how the admin LOOKS; that gap is now closed too.

   These are the original rules, brought back verbatim. */

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:6px;color:var(--faint);text-decoration:none;flex:none}
.icon-btn:hover{background:var(--bg2);color:var(--ink)}
/* .icon-btn has only ever been an <a> until now — reset the <button> defaults it
   otherwise carries (border, background, font) so it matches. */
button.icon-btn{border:0;background:none;cursor:pointer;font:inherit;padding:0}
.progress{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.progress-pct{font-size:13px;color:var(--muted);min-width:34px;text-align:right}
.audio-icon.is-muted{color:var(--accent-dark)}
.admin-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0 30px}
.admin-table th,.admin-table td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table th{font-weight:500;color:var(--muted);font-size:13px;background-color: var(--line-soft);}
.admin-section{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 20px}
.admin-section h2{margin:0 0 12px;font-size:17px}
.admin-step{border-top:1px solid var(--line-soft);padding:10px 0}
.admin-step summary{cursor:pointer;font-size:15px}
.admin-quiz{margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--line)}
.admin-quiz h3{font-size:14px;margin:0 0 8px;color:var(--muted);font-weight:500}
.admin-add{margin:16px 0 0;padding:14px 0 0;border-top:1px dashed var(--line)}
.field-inline{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 12px}
.admin-flash{background:var(--accent-soft);color:var(--accent-dark);padding:10px 14px;border-radius:6px;font-size:14px}
.admin-error{background:#fdecec;color:#a3282a;padding:10px 14px;border-radius:6px;font-size:14px}
.admin-warn{display:flex;gap:10px;align-items:flex-start;background:#fdf6e3;
  border:1px solid #f0d78c;border-left:4px solid #b8860b;border-radius:6px;
  padding:14px 16px;margin:0 0 16px;color:#7a5c00}
.admin-warn svg{flex:none;margin-top:1px}
.admin-warn strong{display:block}
.admin-warn p{margin:2px 0 0;font-size:13.5px}
.field-error{color:#a3282a;font-size:13px;margin:4px 0 0}
.admin-token-fallback,.gate-key{margin:22px 0 0;border-top:1px solid var(--line);padding-top:14px}
.gate-key summary{cursor:pointer;font-size:13.5px;color:var(--muted)}
.gate-key summary:hover{color:var(--ink)}
.btn--block{display:flex;justify-content:center;width:100%}
.admin-token-fallback{max-width:420px}
.admin-token-fallback summary{cursor:pointer;font-size:14px;color:var(--muted)}
.admin-token-fallback summary:hover{color:var(--ink)}
.subtitle{color:var(--muted);margin:-8px 0 20px}
.count-inline{color:var(--muted);font-weight:400;font-size:.7em;vertical-align:middle}
.admin-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);flex:1}
.tabs--detail{margin:0 0 22px}
.pill{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--bg2);
  color:var(--muted);font-size:12px;font-weight:500;text-align:center}
.admin-search{display:flex;gap:8px;align-items:center;padding:0 0 8px}
.admin-search input{padding:8px 11px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:14px}
.cell-program{display:flex;gap:12px;align-items:flex-start}
.cell-text{display:flex;flex-direction:column;gap:2px}
.cell-program .cell-text a {text-decoration: none;}
.thumb{width:54px;height:36px;object-fit:cover;border-radius:5px;background:var(--bg2);flex:none;display:block}
.thumb--empty{display:inline-block}
.thumb--lg{width:110px;height:74px}

.hero-preview-wrap{position:relative;display:inline-block}
.hero-preview-wrap .thumb--lg{width:220px;height:148px}
.hero-preview-wrap img,.hero-preview-wrap .hero-placeholder{cursor:pointer}
.hero-placeholder{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--card-line);color:var(--muted);background:var(--bg2)}
.hero-placeholder svg{width:48px;height:48px}
.hero-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--card-line);background:var(--bg);color:var(--muted);cursor:pointer;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center}
.hero-remove:hover{background:var(--bg2);color:var(--ink)}
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:12px;font-weight:500}
.badge--active{background:#e4f7ef;color:#0f7a52}
.badge--muted{background:var(--bg2);color:var(--muted)}
.badges{margin:-8px 0 18px;display:flex;gap:10px;align-items:center}
.panel{border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:0 0 18px}
.panel h2{margin:0 0 14px;font-size:17px}
.overview-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;padding-bottom: 16px;}
.overview-meta{flex:1;min-width:220px}
.overview-meta h2{margin:0 0 6px}
.overview-meta p{margin:0 0 8px}
.overview-meta p:last-child { margin-bottom: 0 !important;}
.overview-meta-row{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.overview-meta-item{display:inline-flex;align-items:center;gap:5px}
.overview-meta-item svg{flex:none}
.overview-bottom {border-top: 1px solid var(--line);}
.overview-bottom .muted {margin-bottom: 0;}
.overview-meta-item-divider {width: 1px;height: 18px;background-color: var(--line);flex-shrink: 0;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;align-items: center;justify-content: space-between;gap:4px}
.stat-label{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.cat-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 20px}
.cat-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.cat-row:last-child{border-bottom:0}
.cat-row a{text-decoration:none;font-size:16px}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 18px;margin:0 0 14px}
.admin-upload{margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--line)}
.admin-upload h3{font-size:14px;margin:0 0 8px;color:var(--muted);font-weight:500}
.admin-audio{width:100%;max-width:420px;margin:0 0 12px}
.admin-upload code{background:var(--bg2);padding:1px 5px;font-size:12.5px}
.upload-note{margin-left:10px}

/* Missed by the first restore: these names also appear in a shared font-family
   list, so a search for the NAME found them and a search for the RULE would not.
   The admin nav, the tabs and the stat figures. */
.admin-nav{display:flex;gap:18px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.admin-nav a{padding:10px 2px;text-decoration:none;color:var(--muted);border-bottom:1px solid transparent;font-size:15px}
.admin-nav a.is-active{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
.tab{padding:10px 2px;text-decoration:none;color:var(--muted);border-bottom:1px solid transparent;font-size:15px;white-space:nowrap}
.tab.is-active{color:var(--accent-dark);border-bottom-color:var(--accent);font-weight:500}
.stat-value{font-size:22px;font-weight:600;letter-spacing:-.01em}

/* ---- inside PIMS: ?minimal=yes ---- */
/*
 * The container already says which course this is, in its own header, with the
 * close button and the way out. Repeating it in the breadcrumb and the mobile
 * bar stacks three titles down the top of a frame.
 *
 * The sidebar keeps its course name: it labels the contents list rather than
 * titling the page, and losing it would leave the list of sections belonging to
 * nothing.
 */
.minimal main{padding-top:0}
.minimal .crumbs a{display:none}
.minimal .crumbs :is(span,[aria-hidden]):first-child{display:none}
.minimal .course-bar-title{display:none}

/* Authoring tools: one row of small actions under a heading, and the answer-marking
   block. Kept plain — this surface is for six people, not for the catalogue. */
.admin-new{margin:0 0 20px;border:1px solid var(--card-line);border-radius:10px;padding:14px 16px}
.admin-new summary{cursor:pointer;font-family:var(--head);font-weight:600;font-size:15px}
.admin-new form{margin-top:12px;max-width:520px}
.admin-rowtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.admin-rowtools form{margin:0;display:flex;gap:6px;align-items:center}
.admin-rowtools input{padding:6px 10px;border:1px solid var(--card-line);border-radius:6px;font:inherit;font-size:14px}
.admin-question{border:1px solid var(--card-line);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.admin-question .checklist{margin:8px 0}
.panel--danger{border-color:#f0c9c9;background:#fdf7f7}
.panel--danger h2{color:#a3282a}
.panel .section-title-wrapper + div {position: relative;margin-left: 40px;border-left: 1px solid var(--card-line);border-bottom: 1px solid var(--card-line);
}
.panel .section-title-wrapper + div::before {content: "";position: absolute;height: calc(100% - 30px);width: 1px;left: -30px;background-color: var(--locked);opacity: 0.6;}
.panel .section-title-wrapper + div .admin-step {position: relative;}
.panel .section-title-wrapper + div .admin-step::before {content: "→";position: absolute;left: -30px;top: 13px;color: var(--locked);}

/* ---- authoring forms ----
   `.field` went missing in the same accidental deletion that took the admin
   stylesheet, and my restore did not notice because ".field" appears inside
   ".gate-card .field input" — so the detector called it present. Without these three
   rules every label sits on the same line as its input, which is exactly what the
   admin looked like. Restored verbatim, then given the layout it should have had. */
.field{display:block;margin:0 0 12px}
.field span{display:block;font-size:13px;color:var(--muted);margin:0 0 5px}
.field input,.field textarea,.field select{width:100%;max-width:640px;padding:9px 11px;
  border:1px solid var(--card-line);border-radius:6px;font:inherit;font-size:14.5px;
  color:var(--ink);background:var(--bg)}
.field textarea{resize:vertical;min-height:80px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field input.has-error,.field textarea.has-error{border-color:#a3282a}
.field  input[type="checkbox"] {width: auto;}

/* Adding a step is five fields; in one column they scroll off, in a row they crush.
   Two columns with the body spanning both is the shape the content actually has. */
.admin-add{margin:18px 0 0;padding:16px 0 0;border-top:1px dashed var(--card-line)}
.admin-add--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 18px;align-items:start}
.admin-add--grid .field--wide{grid-column:1 / -1}
.admin-add--grid button{grid-column:1 / -1;justify-self:start}
.admin-step{border-top:1px solid var(--card-line);padding:12px 12px}
.admin-step > summary{cursor:pointer;font-size:15px;font-family:var(--head);padding:4px 0;list-style:none}
.admin-step > summary::-webkit-details-marker{display:none}
/* The browser's own disclosure triangle always renders first, ahead of anything in
   the summary — including the drag handle. Hidden above and redrawn here instead, so
   it can sit AFTER the handle rather than in front of it. */
/* inline-flex + centered content, not inline-block: an inline-block's box picks up
   extra height from the line's baseline metrics, so its center doesn't land on the
   icon's actual center — rotate() spins around that off-center point and the icon
   visibly shifts instead of turning in place. Flex-centering makes the box and the
   icon share the same center exactly. */
.step-marker{display:inline-flex;align-items:center;justify-content:center;
  margin:0 2px 0 4px;color:var(--ink);transition:transform .15s ease;vertical-align: middle;}
.step-marker svg{width:17px;height:17px}
.admin-step[open] > summary .step-marker{transform:rotate(90deg)}
.admin-step > form,.admin-step .admin-upload,.admin-step .admin-quiz{max-width:680px}
.admin-quiz h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin:16px 0 8px}
.panel h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}

/* Images on a step: thumbnails with a remove button each, and an upload that says
   which kind of file it is sending. */
.admin-images{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.admin-image{border:1px solid var(--card-line);border-radius:8px;padding:6px;width:150px}
.admin-image img{width:100%;height:84px;object-fit:cover;border-radius:5px;background:var(--bg2)}
.admin-image form{margin:6px 0 0}
.admin-image .btn{width:100%;justify-content:center}

/* ---- the article editor ----
   Shaped after the Wix Online Programs editor: the content is shown AS THE LEARNER
   WILL SEE IT, with quiet controls on each block and one bar of block types at the end.

   The first version was a stack of labelled forms — every paragraph a textarea with a
   heading and a Save button, every gap a disclosure that opened into three more forms.
   It worked and it was unreadable: the editor looked nothing like the thing being
   edited, so you could not tell by looking whether the lesson was right. */
/* One row per answer option: tick, wording, remove. */
.qopts{margin:8px 0}
.qopt{display:flex;gap:8px;align-items:center;margin:0 0 6px;max-width:640px}
.qopt input[type=checkbox]{flex:none;width:17px;height:17px}
.qopt input[type=text],.qopt input:not([type]){flex:1;min-width:0;border:1px solid var(--card-line);
  border-radius:6px;padding:7px 9px;font:inherit;font-size:14px}
.qopt input:not([type]):focus{outline:none;border-color:var(--accent)}
.qopt--add{margin-top:10px}
.qopt-spacer{flex:none;width:17px}

.ed-title{display:flex;gap:8px;align-items:center;max-width:760px;margin:0 0 10px}
.ed-title input{flex:1;min-width:0;border:1px solid var(--card-line);border-radius:6px;
  padding:8px 10px;font-family:var(--head);font-size:15px}
.ed-title input:focus{outline:none;border-color:var(--accent)}

.ed{border:1px solid var(--card-line);border-radius:12px;padding:8px 18px 18px;
  background:var(--bg);max-width:760px}
.ed-empty{padding:26px 0;text-align:center}

.ed-block{position:relative;padding:2px 0}
.ed-block form{margin:0}

/* Text reads as body copy and becomes editable where it sits: no border until focus,
   and the Save button only appears once you are in it. */
.ed-block--text textarea{width:100%;border:1px solid transparent;border-radius:6px;
  padding:8px 10px;font:16px/1.65 var(--body);color:var(--ink);background:none;resize:vertical;
  display:block}
.ed-block--text textarea:hover{border-color:var(--card-line)}
.ed-block--text textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.ed-save{display:none;margin:6px 0 0}
.ed-block:focus-within .ed-save{display:inline-flex}

.ed-block--image img{width:100%;border-radius:10px;margin:8px 0 0}
.ed-alt{margin:6px 0 0}
.ed-alt input{width:100%;border:1px solid transparent;border-radius:6px;padding:6px 8px;
  font:inherit;font-size:13px;color:var(--muted);background:none}
.ed-alt input:hover{border-color:var(--card-line)}
.ed-alt input:focus{outline:none;border-color:var(--accent);background:var(--bg);color:var(--ink)}
.ed-block--audio audio{width:100%;margin:10px 0 0}
.ed-file-name{margin:4px 0 0;font-size:12px}

/* The per-block controls: three small buttons, top right, and only while the block is
   hovered or focused — a toolbar per paragraph is more chrome than content. */
.ed-chrome{position:absolute;top:4px;right:4px;display:flex;gap:2px;opacity:0;
  transition:opacity .12s ease;background:var(--bg);border:1px solid var(--card-line);
  border-radius:8px;padding:2px}
.ed-block:hover .ed-chrome,.ed-block:focus-within .ed-chrome{opacity:1}
.ed-chrome button{width:26px;height:26px;border:0;background:none;cursor:pointer;
  color:var(--muted);border-radius:5px;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.ed-chrome button:hover:not(:disabled){background:var(--bg2);color:var(--ink)}
.ed-chrome button:disabled{opacity:.3;cursor:default}

.ed-handle{cursor:grab;display:inline-flex;align-items:center;justify-content:center;
  padding:4px 6px;margin:-4px 0;border-radius:6px;color:var(--muted);user-select:none;
  font-size:16px;line-height:1}
.ed-handle:hover{background:var(--bg2);color:var(--ink)}
.ed-handle:active{cursor:grabbing}
[data-reorder-item]{transition:transform .05s}
/* The node being dragged is the real element, moved live as it passes over other rows
   (see player.js) — dimming it is what tells you which row is actually in your hand. */
[data-reorder-item].is-dragging{opacity:.45}

/* Insert points: a hairline that only becomes a row of controls on hover. The bar at
   the end is always visible, because appending is what most content does. */
.ed-gap,.ed-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ed-gap{height:10px;overflow:hidden;opacity:0;transition:opacity .12s ease,height .12s ease}
.ed-gap:hover,.ed-gap:focus-within{height:auto;opacity:1;padding:8px 0}
.ed-bar{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--card-line);max-width:760px}
.ed-add{display:flex;gap:6px;align-items:center;margin:0}
.ed-add--text{flex:1;min-width:220px}
.ed-add--text input{flex:1;border:1px solid var(--card-line);border-radius:6px;padding:7px 10px;
  font:inherit;font-size:14px}
.ed-add--text input:focus{outline:none;border-color:var(--accent)}
/* The label IS the button: the native file input is taken out of the layout but stays
   focusable and clickable through the label, so choosing a picture is one click on
   something that looks like a control rather than "Choose File | No file chosen". */
.ed-file{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--card-line);
  border-radius:6px;padding:7px 12px;font-family:var(--head);font-size:13.5px;cursor:pointer;
  color:var(--muted);background:var(--bg)}
.ed-file:hover{border-color:var(--ink);color:var(--ink)}
.ed-file:focus-within{border-color:var(--accent);color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.ed-file span{display:inline-flex;align-items:center;gap:6px;pointer-events:none}
.ed-file input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* No hover on a touch screen, so hover-revealed controls are controls that do not exist:
   the insert points between blocks and the move/remove buttons would be unreachable on a
   phone. There they simply stay visible. */
@media (hover: none) {
  .ed-gap{height:auto;opacity:1;padding:6px 0}
  .ed-chrome{opacity:1;position:static;margin:6px 0 0;width:max-content}
}

/* [hidden] loses to .btn{display:inline-flex}, so the Upload buttons the script hides
   once it can submit for you stayed on screen — two buttons for one action. */
[hidden]{display:none !important}

/* A draft renders exactly like a published course, which is the point of a preview and
   also the danger — so it says so, in a bar nobody can miss. */
.preview-bar{background:#fff8e1;border:1px solid #f0d48a;color:#7a5b12;border-radius:8px;
  padding:10px 14px;margin:0 0 18px;font-size:14px}
.preview-note{font-size:13.5px;color:var(--muted);font-family:var(--head)}

/* Limit text to a maximum of 3 lines and hide overflow */
.truncate-3 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.truncate-2 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

/* checkbox filter css */
.courses-head-wrapper {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;border-bottom: 1px solid var(--line);margin-bottom: 15px;gap: 10px;padding-bottom: 15px;margin-top: 15px;}
.courses-head-wrapper .checkbox-group {display: flex;align-items: center;gap: 24px;}
.courses-head-wrapper .checkbox {display: inline-flex;align-items: center;gap: 8px;cursor: pointer;font-size: 14px;color: var(--line-strong);}
/* Visually hidden, not display:none — display:none drops the input from the
   accessibility tree and off the tab order, so "Completed"/"In Progress" did not
   exist for keyboard or screen-reader users. Same technique .ed-file already uses
   for its file input. */
.courses-head-wrapper .checkbox input {position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.courses-head-wrapper .checkbox:focus-within .checkmark {outline:2px solid var(--accent);outline-offset:2px;}
.courses-head-wrapper .checkmark {width: 18px;height: 18px;border: 1px solid var(--muted);border-radius: 4px;background: #fff;position: relative;}
.courses-head-wrapper .checkbox input:checked + .checkmark {background: var(--accent);border-color: var(--accent);}
.courses-head-wrapper .checkbox input:checked + .checkmark::after {content: "";position: absolute;left: 5px;top: 1px;width: 5px;height: 9px;border: solid #fff;border-width: 0 1px 1px 0;transform: rotate(45deg);}

.count--link{text-align:center;margin-top:60px}

/* The 404 page (COUR-6). Taken from the designer's proposal code block, which the PO
   put in the coder's hands for this card — the measure is off the heading on purpose:
   max-width:18ch broke "That address has / moved" across two lines at 1400px, and a
   layout bug is the opposite of what a page whose job is reassurance should do. */
.notfound{max-width:640px;padding-top:64px;padding-bottom:96px}
.notfound-code{font-family:var(--mono,var(--head));font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.notfound h1{font-size:clamp(26px,4vw,34px);line-height:1.15;margin:0 0 12px;
  max-width:none;text-wrap:balance}
.notfound-lede{color:var(--muted);font-size:17px;line-height:1.6;margin:0 0 28px;max-width:52ch}
.notfound-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
@media (max-width:560px){
  .notfound{padding-top:40px}
  .notfound-actions{flex-direction:column;align-items:stretch}
  .notfound-actions .btn{justify-content:center}
}