/* ══════════════════════════════════════════════════════════════
   ITALY LIONS EDUCATION — THE DESIGN LAYER

   Every class is prefixed `edu-` so nothing can be silently
   overridden by a same-named class in styles.css or il-design.css,
   both of which load BEFORE this file.

   ── COLOUR: EDUCATION IS THE PLATFORM, NOT A GUEST ──────────
   This file was first written as a LIGHT surface — white cards,
   dark text — on the reasoning that a place to read for an hour
   wants a bright page, and that entertainment.html had already
   done the same. Both halves of that were wrong.

   Italy Lions is a DARK product. index, feed, business, market,
   events, profile and the whole Business Hub render on
   --s-0 (#080806) with white ink and gold as the accent; the
   navbar is a translucent black, the inputs are a 3% white wash,
   and the lines are gold at 16%. A white Education pinned to that
   navbar did not read as a section of the site — it read as a
   different website wearing the same logo.

   (entertainment.html is not a precedent. Its BODY is the platform
   dark; only its inner panel is white, which is why the seam shows
   there too. One outlier is not a convention.)

   So this file now defines NO palette of its own. Every colour
   below resolves to a token from il-design.css:

       --s-0 … --s-4   the warm-black surface ladder
       --ink-hi/--ink/--ink-mid/--ink-low
       --line, --line-soft, --line-hot
       --gold, --g-200 … --g-600
       --e-1 … --e-3, --e-glow, --r-*, --ease

   Change a token there and Education changes with everything else.
   That is the point, and it is why the `--edu-*` aliases below are
   thin pointers rather than values: they keep this file readable
   without giving it an opinion of its own.

   THE THREE WORKSPACES ARE STILL VISUALLY DIFFERENT (§49), but by
   DENSITY and CHROME rather than by background colour:
     Student   roomy, image-led rails. Reading and finding.
     Studio    dense, panelled, table-first. Managing.
     Campus    the Studio with a cool slate accent instead of gold,
               so an institute admin can tell which hat they wear.

   RESPONSIVE (§38): every grid is `auto-fill, minmax(...)`, every
   table has a card fallback under 760px, and the last rule in this
   file is the backstop that stops the page ever scrolling sideways.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Thin aliases onto the platform ladder. No new colours. */
  --edu-gold:    var(--gold);
  --edu-gold-lt: var(--g-200);
  --edu-gold-dk: var(--g-600);

  --edu-canvas:  var(--s-0);   /* the page itself — never repainted */
  --edu-raised:  var(--s-1);   /* section wells, empty states */
  --edu-card:    var(--s-2);   /* cards, panels, tables */
  --edu-hover:   var(--s-3);   /* card hover, inputs */
  --edu-pop:     var(--s-4);   /* popovers, menus */

  --edu-ink:     var(--ink-hi);
  --edu-ink-2:   var(--ink);
  --edu-muted:   var(--ink-mid);
  --edu-faint:   var(--ink-low);

  --edu-line:    var(--line);
  --edu-line-2:  var(--line-soft);
  --edu-line-hot:var(--line-hot);

  --edu-radius:  var(--r-md);
  --edu-shadow:  var(--e-2);

  /* Status tones, chosen to carry on a near-black ground. The dark
     theme cannot reuse the light-theme greens and reds — #1f7a4d on
     #14120D fails contrast badly — so each is a light foreground
     over a 12% wash of itself. */
  --edu-green:   #5FD48C;
  --edu-green-bg:rgba(95,212,140,0.13);
  --edu-amber:   #E8B64C;
  --edu-amber-bg:rgba(232,182,76,0.13);
  --edu-red:     #F08A8A;
  --edu-red-bg:  rgba(240,138,138,0.13);
  --edu-blue:    #7FBCEC;
  --edu-blue-bg: rgba(127,188,236,0.13);
  --edu-slate:   #9FC1D6;   /* the Campus accent */
}

/* NOTE WHAT IS ABSENT: `body.edu-page { background: … }`.
   il-design.css already paints the canvas — a gold-tinted radial
   wash over --s-0, fixed — and repainting it here is exactly how
   the seam appeared. Education inherits the page it is part of. */
body.edu-page { color: var(--ink); }

/* NO `body.edu-page p { … }` RULE HERE, deliberately. il-design.css
   already styles every `p` as --ink-mid, so it would be redundant —
   and worse, `body.edu-page p` scores (0,1,1) against `.edu-empty-t`'s
   (0,1,0), so it QUIETLY WON and greyed out the one line in an empty
   state that is supposed to stand out. A redundant rule that also
   loses you a heading is the worst kind. */

/* ── Clearance for the fixed site header ──────────────────────
   .navbar is position:fixed, so it reserves no space of its own and
   whatever is first in the document renders underneath it. These pages
   never had any top padding at all: the hero heading was already
   partly behind the bar when the bar was one row, and the second row
   made it obvious. --nav-h is the single number that knows how tall
   the header currently is (two rows above 1152px, one below), so this
   follows it instead of guessing a pixel value. None of the Education
   pages carries the announcement .top-bar today; the second rule is
   there so that adding one later does not reintroduce this. */
body.edu-page { padding-top: var(--nav-h, 70px); }
body.edu-page:has(.top-bar) { padding-top: calc(var(--tb-h, 40px) + var(--nav-h, 70px)); }

.edu-wrap { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.edu-wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 18px; }

/* ── HERO ─────────────────────────────────────────────────── */
.edu-hero {
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(201,162,39,0.26), transparent 60%),
    radial-gradient(900px 340px at 88% 0%, rgba(201,162,39,0.14), transparent 62%),
    var(--s-1);
  color: var(--ink-hi);
  padding: 38px 0 30px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.edu-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}
.edu-hero p { color: var(--ink-mid); }
.edu-brand {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  margin: 0; line-height: 1.14; color: var(--ink-hi);
}
.edu-brand span { color: var(--gold); }
.edu-tag { margin: 8px 0 0; font-size: clamp(.9rem, 2.3vw, 1.05rem); font-weight: 500; }

/* ── SEARCH BAR ───────────────────────────────────────────── */
.edu-searchbar {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px; backdrop-filter: blur(9px);
}
.edu-sfield { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; padding-left: 11px; min-width: 0; }
.edu-sfield svg { color: var(--gold); flex-shrink: 0; }
.edu-sfield input {
  flex: 1; background: none; border: 0; outline: none; color: var(--ink-hi);
  font: inherit; font-size: .95rem; padding: 12px 0; min-width: 0;
}
.edu-sfield input::placeholder { color: var(--ink-low); }
.edu-sgo {
  background: linear-gradient(135deg, var(--g-200), var(--gold));
  color: #14120D; border: 0; border-radius: var(--r-sm); padding: 12px 22px;
  font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.edu-sgo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,162,39,.30); }
.edu-placebtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-sm); padding: 11px 14px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.edu-placebtn:hover { background: rgba(201,162,39,.14); border-color: var(--line-hot); color: var(--ink-hi); }

/* Live search results panel */
.edu-results {
  margin-top: 12px; background: var(--s-4); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--e-3); display: none; text-align: left;
  max-height: 62vh; overflow-y: auto; border: 1px solid var(--line);
}
.edu-results.open { display: block; }
.edu-rgroup {
  padding: 9px 15px 5px; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid);
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line-soft);
}
.edu-ritem {
  display: flex; align-items: center; gap: 11px; padding: 11px 15px;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.edu-ritem:hover, .edu-ritem:focus-visible { background: var(--s-3); outline: none; color: var(--ink-hi); }
.edu-ritem b { font-size: .92rem; font-weight: 700; display: block; color: var(--ink-hi); }
.edu-ritem small { color: var(--ink-mid); font-size: .78rem; }

/* ── WORKSPACE SWITCHER (§3) ──────────────────────────────── */
.edu-wsbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.edu-wsbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 15px; font: inherit; font-size: .85rem;
  font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: none;
}
.edu-wsbtn:hover, .edu-wsbtn:focus-visible { border-color: var(--line-hot); background: var(--s-3); color: var(--ink-hi); outline: none; }
.edu-wsbtn.active { background: rgba(201,162,39,.16); border-color: var(--line-hot); color: var(--gold); }
.edu-wsmenu { position: relative; }
.edu-wspop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--e-3); padding: 6px; display: none;
}
.edu-wspop.open { display: block; }
.edu-wsitem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: .88rem; text-align: left; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.edu-wsitem:hover, .edu-wsitem:focus-visible { background: var(--s-3); color: var(--ink-hi); outline: none; }
.edu-wsitem small { display: block; color: var(--ink-mid); font-size: .74rem; font-weight: 500; }

/* ── SECTION HEADS + RAILS ────────────────────────────────── */
.edu-sec { margin: 34px 0; }
.edu-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 15px; flex-wrap: wrap; }
.edu-sec-t {
  font-family: 'Cinzel', serif; font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700; margin: 0; color: var(--ink-hi);
}
.edu-sec-t em { font-style: normal; color: var(--gold); }
.edu-sec-s { margin: 4px 0 0; font-size: .86rem; color: var(--ink-mid); }
.edu-sec-more { font-size: .82rem; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; }
.edu-sec-more:hover { text-decoration: underline; }

.edu-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.edu-grid-sm { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.edu-rail {
  display: grid; gap: 14px; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr); overflow-x: auto;
  padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.edu-rail > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .edu-rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow: visible; }
}

/* ── COURSE CARD ──────────────────────────────────────────── */
.edu-card {
  background: var(--s-2); border: 1px solid var(--line); border-radius: var(--edu-radius);
  overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  min-width: 0;
}
.edu-card:hover, .edu-card:focus-visible {
  transform: translateY(-3px); box-shadow: var(--e-2);
  border-color: var(--line-hot); background: var(--s-3); outline: none;
}
.edu-card-img {
  aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--s-3), var(--s-1));
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.edu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-card-img .edu-ph { font-size: 2rem; opacity: .6; }
.edu-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.edu-card-t { font-size: .97rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--ink-hi);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.edu-card-by { font-size: .79rem; color: var(--ink-mid); margin: 0; }
.edu-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.edu-card-price { font-size: .92rem; font-weight: 800; color: var(--ink-hi); }
.edu-card-price.free { color: var(--edu-green); }

/* ── CHIPS / PILLS ────────────────────────────────────────── */
.edu-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); padding: 4px 10px; font-size: .73rem;
  font-weight: 700; color: var(--ink-mid); white-space: nowrap;
}
.edu-chip.gold  { background: rgba(201,162,39,.14); border-color: var(--line-hot); color: var(--g-200); }
.edu-chip.green { background: var(--edu-green-bg); border-color: rgba(95,212,140,0.32); color: var(--edu-green); }
.edu-chip.amber { background: var(--edu-amber-bg); border-color: rgba(232,182,76,0.32); color: var(--edu-amber); }
.edu-chip.red   { background: var(--edu-red-bg);   border-color: rgba(240,138,138,0.32); color: var(--edu-red); }
.edu-chip.blue  { background: var(--edu-blue-bg);  border-color: rgba(127,188,236,0.32); color: var(--edu-blue); }
.edu-chip.grey  { background: rgba(255,255,255,0.04); border-color: var(--line-soft); color: var(--ink-low); }

.edu-filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.edu-filters::-webkit-scrollbar { display: none; }
.edu-fchip {
  flex: 0 0 auto; background: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 15px; font: inherit; font-size: .82rem;
  font-weight: 600; color: var(--ink-mid); cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.edu-fchip:hover { border-color: var(--line-hot); color: var(--ink-hi); }
.edu-fchip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #14120D; font-weight: 800; }
.edu-fchip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.edu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--g-200), var(--gold));
  color: #14120D; border: 0; border-radius: var(--r-sm); padding: 11px 20px;
  font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer;
  text-decoration: none; transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.edu-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201,162,39,.28); }
.edu-btn:focus-visible { outline: 2px solid var(--g-200); outline-offset: 2px; }
.edu-btn[disabled], .edu-btn.is-disabled {
  background: var(--s-3); color: var(--ink-low); cursor: not-allowed;
  transform: none; box-shadow: none; border: 1px solid var(--line-soft);
}
.edu-btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  box-shadow: none;
}
.edu-btn-ghost:hover { border-color: var(--line-hot); background: var(--s-3); color: var(--ink-hi); box-shadow: none; }
.edu-btn-sm { padding: 7px 13px; font-size: .8rem; border-radius: var(--r-sm); }
.edu-btn-danger { background: transparent; border: 1px solid rgba(240,138,138,.38); color: var(--edu-red); }
.edu-btn-danger:hover { background: var(--edu-red-bg); box-shadow: none; }

/* ── FORMS ────────────────────────────────────────────────── */
.edu-field { display: block; margin-bottom: 15px; }
.edu-label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-hi); margin-bottom: 6px; }
.edu-hint  { display: block; font-size: .76rem; color: var(--ink-mid); margin-top: 5px; line-height: 1.5; }
.edu-input, .edu-select, .edu-textarea {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; font: inherit; font-size: .9rem;
  color: var(--ink-hi); outline: none; transition: border-color .16s, box-shadow .16s, background .16s;
}
.edu-input::placeholder, .edu-textarea::placeholder { color: var(--ink-low); }
.edu-input:focus, .edu-select:focus, .edu-textarea:focus {
  border-color: var(--gold); background: var(--s-3);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}

/* ── Choose-several as chips (teacher profile) ─────────────────────
   Real checkboxes, drawn as pills. A fieldset, so its legend names the
   group for screen readers; the browser's fieldset frame is removed. */
.edu-pick { border: 0; padding: 0; margin: 0 0 15px; min-width: 0; }
.edu-pick > legend { padding: 0; text-transform: uppercase; letter-spacing: .09em; }
/* styles.css capitalises every <label>; a chip is a label but reads as a word. */
.edu-pick-chip { text-transform: none; letter-spacing: normal; }
.edu-pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.edu-pick-chip { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.edu-pick-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.edu-pick-chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--edu-line); background: var(--edu-hover);
  color: var(--edu-ink-2); font-size: .84rem; font-weight: 600; line-height: 1.2;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.edu-pick-chip:active span { transform: scale(.96); }
.edu-pick-chip input:checked + span {
  background: linear-gradient(135deg, var(--edu-gold-lt), var(--edu-gold)); border-color: transparent;
  color: #111; font-weight: 800;
}
.edu-pick-chip input:checked + span::before { content: '✓'; font-weight: 900; }
.edu-pick-chip input:focus-visible + span { outline: 2px solid var(--edu-gold); outline-offset: 2px; }
.edu-photo-field > .edu-label { text-transform: uppercase; letter-spacing: .09em; }
.edu-photo-row { display: flex; align-items: center; gap: 12px; }
.edu-photo-row .edu-input { flex: 1; min-width: 0; }
.edu-photo-prev {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--edu-gold-lt), var(--edu-gold-dk)); color: #111;
  font-weight: 900; font-size: 1.2rem; border: 2px solid var(--edu-line-hot);
}
.edu-photo-prev img { width: 100%; height: 100%; object-fit: cover; }
/* A native <select>'s dropdown is painted by the OS, so its options
   need an explicit dark background or they render white-on-white. */
.edu-select option { background: var(--s-3); color: var(--ink-hi); }
.edu-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.edu-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.edu-check { display: flex; align-items: flex-start; gap: 9px; font-size: .87rem; cursor: pointer; padding: 4px 0; color: var(--ink); }
.edu-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; }

/* ── PANELS, EMPTY AND NOTICE STATES ──────────────────────── */
.edu-panel {
  background: var(--s-2); border: 1px solid var(--line); border-radius: var(--edu-radius);
  padding: 18px; margin-bottom: 16px;
}
.edu-panel-t { font-size: 1rem; font-weight: 800; margin: 0 0 4px; color: var(--ink-hi); }
.edu-panel-s { font-size: .83rem; color: var(--ink-mid); margin: 0 0 14px; }

.edu-empty {
  border: 1px dashed var(--line); border-radius: var(--edu-radius);
  padding: 34px 22px; text-align: center; background: var(--s-1);
}
.edu-empty-i { font-size: 2rem; margin-bottom: 10px; opacity: .85; }
.edu-empty-t { font-size: 1.02rem; font-weight: 800; margin: 0 0 6px; color: var(--ink-hi); }
.edu-empty-p { font-size: .87rem; color: var(--ink-mid); margin: 0 auto 16px; max-width: 460px; line-height: 1.65; }

.edu-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--s-1); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold); border-radius: var(--r-sm);
  padding: 13px 15px; font-size: .85rem; color: var(--ink); line-height: 1.62;
}
.edu-notice.warn { border-left-color: var(--edu-amber); background: var(--edu-amber-bg); }
.edu-notice.info { border-left-color: var(--edu-blue);  background: var(--edu-blue-bg); }
.edu-notice b { color: var(--ink-hi); }
.edu-notice a { color: var(--gold); font-weight: 700; }
.edu-notice-i { font-size: 1.1rem; flex-shrink: 0; line-height: 1.3; }

/* ── PROGRESS ─────────────────────────────────────────────── */
.edu-bar { height: 7px; background: rgba(255,255,255,0.08); border-radius: var(--r-pill); overflow: hidden; }
.edu-bar > i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--g-200), var(--gold));
  transition: width .35s var(--ease);
}
.edu-pct { font-size: .76rem; font-weight: 800; color: var(--ink-mid); }

/* ── STAT TILES ───────────────────────────────────────────── */
.edu-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.edu-stat { background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px; }
.edu-stat-n { font-size: 1.5rem; font-weight: 800; color: var(--ink-hi); line-height: 1.15; }
.edu-stat-l { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mid); margin-top: 5px; }

/* ══════════════════════════════════════════════════════════
   STUDIO SHELL — Teacher Studio and Institute Campus
   ══════════════════════════════════════════════════════════ */
.edu-studio { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }
.edu-snav {
  /* 84px was the old one-row header plus 14px of air. */
  position: sticky; top: calc(var(--nav-h, 70px) + 14px); background: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--edu-radius); padding: 8px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.edu-snav-g {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-low); padding: 12px 11px 6px;
}
.edu-snav-i {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: .87rem; font-weight: 600; color: var(--ink-mid);
  cursor: pointer; text-align: left; text-decoration: none;
}
.edu-snav-i:hover { background: var(--s-3); color: var(--ink-hi); }
.edu-snav-i:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.edu-snav-i.active { background: rgba(201,162,39,.15); color: var(--gold); font-weight: 800; }
.edu-snav-c { margin-left: auto; background: var(--gold); color: #14120D; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800; padding: 1px 7px; }

/* The Campus wears the same chrome with a cool slate accent. */
.edu-campus .edu-snav-i.active { background: rgba(159,193,214,.14); color: var(--edu-slate); }
.edu-campus .edu-snav-c { background: var(--edu-slate); color: #0E0D0A; }
.edu-campus .edu-studio-t em { color: var(--edu-slate); }
.edu-campus .edu-sec-t em { color: var(--edu-slate); }

.edu-studio-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.edu-studio-t { font-family: 'Cinzel', serif; font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--ink-hi); }
.edu-studio-t em { font-style: normal; color: var(--gold); }
.edu-studio-s { font-size: .84rem; color: var(--ink-mid); margin: 4px 0 0; }

@media (max-width: 860px) {
  .edu-studio { grid-template-columns: 1fr; gap: 14px; }
  .edu-snav {
    position: static; display: flex; gap: 6px; overflow-x: auto;
    max-height: none; padding: 7px; scrollbar-width: none;
  }
  .edu-snav::-webkit-scrollbar { display: none; }
  .edu-snav-g { display: none; }
  .edu-snav-i { flex: 0 0 auto; white-space: nowrap; }
}

/* ── TABLES, WITH A REAL MOBILE FALLBACK (§38) ────────────── */
.edu-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s-2); }
.edu-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 520px; color: var(--ink); }
.edu-table th, .edu-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.edu-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mid); font-weight: 800; background: rgba(255,255,255,0.03); }
.edu-table td b { color: var(--ink-hi); }
.edu-table tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  .edu-table { min-width: 0; }
  .edu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .edu-table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .edu-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 5px 0; text-align: right; }
  .edu-table td::before {
    content: attr(data-th); font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-low); text-align: left; flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   COURSE PLAYER (§9)
   ══════════════════════════════════════════════════════════ */
.edu-player { display: grid; grid-template-columns: 320px 1fr; gap: 0; min-height: 60vh; align-items: start; }
.edu-curric {
  border-right: 1px solid var(--line); background: var(--s-1);
  /* 70px was exactly the old header height. */
  position: sticky; top: calc(var(--nav-h, 70px) + 8px); max-height: calc(100vh - var(--nav-h, 70px) - 16px); overflow-y: auto; padding: 14px;
}
.edu-mod-t {
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-low); padding: 14px 8px 7px;
}
.edu-less {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px; border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: .86rem; text-align: left; color: var(--ink-mid); cursor: pointer;
}
.edu-less:hover { background: var(--s-3); color: var(--ink); }
.edu-less:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.edu-less.active { background: var(--s-3); color: var(--ink-hi); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.edu-less.locked { color: var(--ink-low); cursor: not-allowed; }
.edu-less-i { flex-shrink: 0; width: 19px; text-align: center; line-height: 1.45; }
.edu-less-n { flex: 1; min-width: 0; line-height: 1.45; }
.edu-less-d { font-size: .73rem; color: var(--ink-low); font-weight: 500; }

.edu-stage { padding: 20px 22px 40px; min-width: 0; }
.edu-video {
  aspect-ratio: 16 / 9; width: 100%; background: #000;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
}
.edu-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.edu-lesson-body { font-size: .95rem; line-height: 1.78; color: var(--ink); margin-top: 18px; }
.edu-lesson-body p { margin: 0 0 14px; color: var(--ink); }
.edu-playbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
}

/* The two mobile-only controls, hidden by default.
   THIS BLOCK MUST STAY ABOVE THE MEDIA QUERY BELOW. It sat underneath it
   originally, and because both rules have the same specificity the later
   one won — at every width — so the curriculum sheet's Close button was
   invisible on the phones it exists for. Order is the whole fix. */
.edu-curric-close, .edu-curric-toggle { display: none; }

@media (max-width: 900px) {
  .edu-player { grid-template-columns: 1fr; }
  /* The curriculum becomes a sheet. Translated off screen, never
     `display:none`, so focus and scroll position survive closing. */
  .edu-curric {
    position: fixed; inset: auto 0 0 0; z-index: 70; max-height: 76vh;
    border-right: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--e-3);
    transform: translateY(101%); transition: transform .26s var(--ease); background: var(--s-2);
  }
  .edu-curric.open { transform: translateY(0); }
  .edu-curric-close { display: block; }
  .edu-curric-toggle { display: inline-flex; }
  .edu-stage { padding: 16px 16px 90px; }
}

.edu-scrim {
  position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.edu-scrim.open { opacity: 1; pointer-events: auto; }

/* ── MODAL / SHEET ────────────────────────────────────────── */
.edu-modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.66);
  display: none; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(3px);
}
.edu-modal.open { display: flex; }
.edu-modal-in {
  background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  width: min(720px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px;
  box-shadow: var(--e-3); margin: auto; color: var(--ink);
}
.edu-modal-t { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; color: var(--ink-hi); }
.edu-modal-s { font-size: .84rem; color: var(--ink-mid); margin: 0 0 16px; }
.edu-modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 560px) {
  .edu-modal { align-items: flex-end; padding: 0; }
  .edu-modal-in { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 94vh; width: 100%; }
  .edu-modal-foot .edu-btn { flex: 1; }
}

/* ── QUIZ ─────────────────────────────────────────────────── */
.edu-q { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 13px; background: var(--s-2); }
.edu-q-n { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-low); }
.edu-q-t { font-size: .95rem; font-weight: 700; margin: 6px 0 12px; line-height: 1.5; color: var(--ink-hi); }
.edu-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-bottom: 8px;
  cursor: pointer; font-size: .89rem; line-height: 1.5; background: rgba(255,255,255,0.02);
  color: var(--ink);
}
.edu-opt:hover { border-color: var(--line-hot); background: var(--s-3); }
.edu-opt input { margin-top: 2px; accent-color: var(--gold); width: 17px; height: 17px; flex-shrink: 0; }
.edu-opt:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.edu-q.correct { border-color: rgba(95,212,140,.45); background: var(--edu-green-bg); }
.edu-q.wrong   { border-color: rgba(240,138,138,.42); background: var(--edu-red-bg); }

/* ── TOAST ────────────────────────────────────────────────── */
.edu-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
  z-index: 120; background: var(--s-4); color: var(--ink-hi);
  border: 1px solid var(--line-hot); border-radius: var(--r-sm);
  padding: 12px 18px; font-size: .87rem; font-weight: 600; max-width: min(440px, calc(100vw - 32px));
  box-shadow: var(--e-3); transition: transform .28s var(--ease); text-align: center;
}
.edu-toast.show { transform: translateX(-50%) translateY(0); }
.edu-toast.bad { border-color: rgba(240,138,138,.5); color: var(--edu-red); }

/* ── SKELETON (loading, never a fake number) ──────────────── */
.edu-skel { background: linear-gradient(90deg, var(--s-2) 25%, var(--s-3) 37%, var(--s-2) 63%);
  background-size: 400% 100%; animation: eduShimmer 1.3s linear infinite; border-radius: var(--r-sm); }
@keyframes eduShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .edu-skel { animation: none; }
  .edu-card, .edu-btn, .edu-curric, .edu-toast, .edu-bar > i { transition: none !important; }
  .edu-card:hover, .edu-btn:hover { transform: none; }
}

/* ── ACCESSIBILITY (§46) ──────────────────────────────────── */
.edu-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.edu-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #14120D; padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 800; text-decoration: none;
}
.edu-skip:focus { left: 0; }
body.edu-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── THE HORIZONTAL-OVERFLOW BACKSTOP (§38) ───────────────
   Last rule in the file on purpose. Whatever a future section does,
   the page itself never scrolls sideways; a wide child scrolls
   inside its own container instead. */
body.edu-page { overflow-x: hidden; }
body.edu-page img, body.edu-page video, body.edu-page iframe { max-width: 100%; }