/* Academy module - Netflix-style training library. Scoped under #academy-root. */
#academy-root { --ac-radius: 12px; }

/* ---------- top bar ---------- */
#academy-root .ac-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#academy-root .ac-search { max-width:280px; }

/* ---------- hero ---------- */
#academy-root .ac-hero {
  position:relative; border-radius:18px; overflow:hidden; margin-bottom:26px;
  min-height:300px; display:flex; align-items:flex-end;
  border:1px solid var(--border);
}
#academy-root .ac-hero-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.05);
}
#academy-root .ac-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,12,16,.94) 0%, rgba(8,12,16,.72) 42%, rgba(8,12,16,.15) 100%),
             linear-gradient(0deg, rgba(8,12,16,.85), transparent 55%);
}
[data-theme="light"] #academy-root .ac-hero-bg::after {
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.2) 100%),
             linear-gradient(0deg, rgba(255,255,255,.9), transparent 55%);
}
#academy-root .ac-hero-inner { position:relative; padding:28px 30px; max-width:620px; }
#academy-root .ac-hero-eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:8px; }
#academy-root .ac-hero-title { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0 0 10px; }
#academy-root .ac-hero-desc { color:var(--text-dim); font-size:14px; line-height:1.55; margin:0 0 18px; max-width:520px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#academy-root .ac-hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#academy-root .ac-hero-prog { font-size:12px; color:var(--text-faint); }

/* ---------- rows ---------- */
#academy-root .ac-row { margin-bottom:26px; }
#academy-root .ac-row-head { display:flex; align-items:center; gap:10px; margin:0 2px 12px; }
#academy-root .ac-row-head h3 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
#academy-root .ac-row-head .ac-count { font-size:12px; color:var(--text-faint); font-weight:600; }
#academy-root .ac-row-scroll {
  display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
#academy-root .ac-row-scroll::-webkit-scrollbar { height:8px; }

/* ---------- cards ---------- */
#academy-root .ac-card {
  flex:0 0 auto; width:260px; scroll-snap-align:start; cursor:pointer;
  border-radius:var(--ac-radius); overflow:hidden; background:var(--surface);
  border:1px solid var(--border); transition:transform .16s, box-shadow .16s, border-color .16s;
}
#academy-root .ac-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
#academy-root .ac-card-thumb {
  position:relative; aspect-ratio:16/9; background:var(--surface-3) center/cover no-repeat;
  display:grid; place-items:center;
}
#academy-root .ac-card-thumb .ac-ph { color:var(--text-faint); }
#academy-root .ac-card-play {
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .16s;
  background:rgba(8,12,16,.35);
}
#academy-root .ac-card:hover .ac-card-play { opacity:1; }
#academy-root .ac-card-play span {
  width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 20px -4px var(--brand-glow);
}
#academy-root .ac-card-dur {
  position:absolute; right:7px; bottom:7px; background:rgba(0,0,0,.78); color:#fff;
  font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px;
}
#academy-root .ac-card-check {
  position:absolute; left:7px; top:7px; width:24px; height:24px; border-radius:50%;
  background:var(--green); color:#fff; display:grid; place-items:center;
}
#academy-root .ac-card-prog { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.22); }
#academy-root .ac-card-prog i { display:block; height:100%; background:var(--brand); }
#academy-root .ac-card-body { padding:10px 12px 12px; }
#academy-root .ac-card-title { font-size:13.5px; font-weight:650; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#academy-root .ac-card-cat { font-size:11px; color:var(--text-faint); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* module pill (bottom-left of the thumb) when a card is shown inside a track row */
#academy-root .ac-card-mod {
  position:absolute; left:7px; bottom:7px; z-index:1;
  background:var(--brand); color:#fff; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:6px; box-shadow:0 2px 8px -2px var(--brand-glow);
}
/* curriculum (track) rows: a small description line under the track title */
#academy-root .ac-track-desc { margin:-4px 2px 10px; font-size:12.5px; color:var(--text-faint); }
/* track + module chips under the title on the watch page */
#academy-root .ac-watch-track { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
#academy-root .ac-track-chip {
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:650;
  color:var(--brand); background:var(--brand-soft, rgba(12,143,108,.12));
  border:1px solid var(--border-soft); padding:4px 11px; border-radius:99px;
}

/* ---------- watch / player ---------- */
#academy-root .ac-back { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--text-dim);
  font-weight:600; font-size:13px; margin-bottom:14px; }
#academy-root .ac-back:hover { color:var(--text); }
#academy-root .ac-player {
  position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow-lg); user-select:none;
}
#academy-root .ac-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* the shield sits ABOVE the youtube iframe: it catches every click so the YouTube
   logo / title / "watch on youtube" can never be reached, and toggles play instead. */
#academy-root .ac-shield { position:absolute; inset:0; z-index:2; cursor:pointer; }
/* Top scrim hides YouTube's title + channel name. YouTube only paints that strip
   in the transient states (cued, hover, pause, buffering, first seconds of play,
   error) - never during steady playback. So the scrim shows exactly when the UI is
   up (same trigger as the controls) and fades out once playback settles, which is
   also when YouTube's own title has faded. Cued -> poster (z6) covers it; error ->
   error overlay (z7) covers it; this handles hover / pause / first-frame flash. */
#academy-root .ac-topscrim {
  position:absolute; left:0; right:0; top:0; height:max(90px, 13%); z-index:5; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.48) 64%, transparent 100%);
  transition:opacity .25s;
}
#academy-root .ac-player.hide-ui .ac-topscrim { opacity:0; }
/* Opaque poster fully covers YouTube's cued screen (its title + "Watch on YouTube")
   until the trainee presses play - so the pre-play state looks 100% native. */
#academy-root .ac-poster {
  position:absolute; inset:0; z-index:6; cursor:pointer; background:#0a0f14 center/cover no-repeat;
  display:grid; place-items:center;
}
#academy-root .ac-poster::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,10,14,.86), rgba(6,10,14,.25) 55%, rgba(6,10,14,.5));
}
#academy-root .ac-player.played .ac-poster { display:none; }
#academy-root .ac-poster-inner { position:relative; text-align:center; color:#fff; padding:20px; }
#academy-root .ac-poster-play {
  width:80px; height:80px; border-radius:50%; margin:0 auto 14px; background:rgba(12,143,108,.95); color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 44px -8px rgba(0,0,0,.7); transition:transform .16s;
}
#academy-root .ac-poster:hover .ac-poster-play { transform:scale(1.06); }
#academy-root .ac-poster-title { font-size:17px; font-weight:700; max-width:70%; margin:0 auto; }
#academy-root .ac-bigplay {
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none;
  opacity:0; transition:opacity .2s;
}
#academy-root .ac-player.paused .ac-bigplay { opacity:1; }
#academy-root .ac-bigplay span {
  width:76px; height:76px; border-radius:50%; background:rgba(12,143,108,.92); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 40px -6px rgba(0,0,0,.6);
}
#academy-root .ac-controls {
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:20px 16px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  transform:translateY(0); transition:opacity .2s; opacity:1;
}
#academy-root .ac-player.hide-ui .ac-controls { opacity:0; }
#academy-root .ac-player.hide-ui { cursor:none; }
#academy-root .ac-seek { position:relative; height:6px; border-radius:99px; background:rgba(255,255,255,.28); cursor:pointer; margin-bottom:10px; }
#academy-root .ac-seek-fill { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--brand); width:0; }
#academy-root .ac-seek-buf { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:rgba(255,255,255,.18); width:0; }
#academy-root .ac-seek-knob { position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); opacity:0; transition:opacity .15s; }
#academy-root .ac-seek:hover .ac-seek-knob { opacity:1; }
#academy-root .ac-bar { display:flex; align-items:center; gap:14px; color:#fff; }
#academy-root .ac-cbtn { background:none; border:0; color:#fff; cursor:pointer; display:grid; place-items:center; opacity:.92; }
#academy-root .ac-cbtn:hover { opacity:1; }
#academy-root .ac-time { font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.85); }
#academy-root .ac-bar .ac-spacer { flex:1; }
#academy-root .ac-rate { background:rgba(255,255,255,.16); border:0; color:#fff; font-size:12px; font-weight:600;
  padding:3px 8px; border-radius:6px; cursor:pointer; }
#academy-root .ac-endcard {
  position:absolute; inset:0; z-index:5; display:none; place-items:center; text-align:center;
  background:#060a0e; color:#fff; padding:20px;
}
#academy-root .ac-player.ended .ac-endcard { display:grid; }
/* Error overlay (z7): covers YouTube's own error screen with our clean message. */
#academy-root .ac-error {
  position:absolute; inset:0; z-index:7; display:none; place-items:center; text-align:center;
  background:#0a0f14; color:#fff; padding:24px;
}
#academy-root .ac-player.errored .ac-error { display:grid; }
#academy-root .ac-error-inner { max-width:560px; }
#academy-root .ac-error-ic { color:var(--amber); margin-bottom:12px; display:flex; justify-content:center; }
#academy-root .ac-error-msg { font-size:17px; font-weight:700; margin-bottom:8px; }
#academy-root .ac-error-fix { font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); }
#academy-root .ac-error-fix b { color:#fff; }
#academy-root .ac-endcard .btn { margin:6px; }

#academy-root .ac-watch-meta { margin-top:18px; max-width:900px; }
#academy-root .ac-watch-meta h2 { margin:0 0 4px; font-size:20px; }
#academy-root .ac-watch-cat { font-size:12px; color:var(--brand); font-weight:600; margin-bottom:12px; }
#academy-root .ac-watch-desc { color:var(--text-dim); font-size:14px; line-height:1.6; white-space:pre-wrap; }
#academy-root .ac-upnext { margin-top:20px; border-top:1px solid var(--border-soft); padding-top:16px; }

/* ---------- manage ---------- */
#academy-root .ac-mtabs { margin-bottom:16px; }
#academy-root .ac-prog-cell { display:flex; align-items:center; gap:8px; min-width:130px; }
#academy-root .ac-prog-track { flex:1; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
#academy-root .ac-prog-track i { display:block; height:100%; background:var(--brand); }

@media (max-width:640px) {
  #academy-root .ac-card { width:210px; }
  #academy-root .ac-hero-title { font-size:23px; }
  #academy-root .ac-hero { min-height:230px; }
}