/* Learn DevOps Online — portal
   Dark, committed, and the same brand as learndevopsonline.com: near-black
   surfaces, a gold accent, and a warm off-white for text rather than a cold
   white. One typeface (Inter Tight) carrying weight, JetBrains Mono for
   machine values and for the small uppercase labels the marketing site uses.

   Status colours deliberately avoid gold: on this palette gold means "you can
   act on this", so money that is due reads amber-orange and anything overdue
   reads red. */

:root{
  --bg:#0F1216; --panel:#161B22; --panel-2:#1B212A; --raise:#212832; --sunken:#0A0D11;
  --line:#242B35; --line-2:#303945;
  --ink:#E9E4DA; --ink-2:#A7A79F; --ink-3:#787C83;

  --accent:#D9A125; --accent-2:#F0C462; --accent-ink:#1A1206;
  --accent-dim:#D9A1251f; --accent-line:#D9A12547;
  --grad:linear-gradient(135deg,#F0C462,#B07C18);

  --ok:#4CC38A; --ok-dim:#4CC38A1a;
  --hot:#E05B4A; --hot-dim:#E05B4A1c;
  --warn:#E08A3C; --warn-dim:#E08A3C1a;

  --r:12px; --r-sm:8px; --r-xs:6px;
  --ring:0 0 0 1px var(--line);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.04em; line-height:1.08; text-wrap:balance}
h1{font-size:2.05rem} h2{font-size:1.22rem} h3{font-size:1.02rem; font-weight:700; letter-spacing:-.025em}
p{margin:0 0 .7em} p:last-child{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{color:#EFC167}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.85em}
code{font-family:"JetBrains Mono",monospace; font-size:.83em; background:var(--raise);
  padding:.15em .45em; border-radius:var(--r-xs); color:var(--accent-2)}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3); font-size:.85rem}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent); color:var(--accent-ink)}

/* The marketing site's eyebrow label, reused anywhere a block needs naming. */
.eyebrow,.tile .k,.incl h3{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  font-weight:500}

/* ── top bar ──────────────────────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:6px;
  padding:0 20px; height:54px; background:#0A0B11EE; backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.wordmark{display:flex; align-items:center; gap:10px; font-weight:650; font-size:.93rem;
  color:var(--ink); margin-right:16px; letter-spacing:-.025em; white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.wordmark .dot{width:20px; height:20px; border-radius:6px; background:var(--grad); flex:0 0 auto}
/* The scrollbar is hidden for looks, so a fade on the right edge is the only
   thing telling anyone there is more nav off-screen. Without it, links simply
   vanish on a narrow window and look like they were never built. */
.bar nav{display:flex; gap:3px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.bar nav::-webkit-scrollbar{display:none}
.linkish.on{background:var(--accent-dim); color:#F2CC80;
  box-shadow:inset 0 0 0 1px var(--accent-line); font-weight:600}
/* Below this width the two groups fight for room and links get clipped. Wrap
   the primary nav onto its own full-width row instead — scrolling hid links
   with no hint they existed, which is how Library went unnoticed. */
@media (max-width:860px){
  .bar{height:auto; flex-wrap:wrap; padding:8px 14px 0; gap:4px}
  .bar .right{order:2; margin-left:auto}
  .bar .right .linkish{padding:6px 8px; font-size:.84rem}
  .bar nav{order:3; flex-basis:100%; justify-content:space-between; padding:4px 0 6px;
    -webkit-mask-image:none; mask-image:none}
  .bar nav a{padding:6px 8px; font-size:.85rem}
  .who{display:none}
  .wordmark{margin-right:0}
}
@media (max-width:420px){
  .wordmark span{display:none}
  .bar nav a{padding:6px 5px; font-size:.8rem}
}
.bar nav a{padding:6px 12px; border-radius:var(--r-sm); color:var(--ink-2);
  font-size:.88rem; font-weight:500; white-space:nowrap}
.bar nav a:hover{background:var(--panel-2); color:var(--ink)}
.bar nav a[aria-current]{background:var(--accent-dim); color:#F2CC80;
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.bar .right{display:flex; align-items:center; gap:8px; margin-left:auto}
.who{font-size:.84rem; color:var(--ink-3); white-space:nowrap}
.linkish{background:none; border:0; padding:6px 10px; font:inherit; font-size:.86rem;
  color:var(--ink-2); cursor:pointer; border-radius:var(--r-sm)}
.linkish:hover{background:var(--panel-2); color:var(--ink)}

main{max-width:60rem; margin:0 auto; padding:26px 20px 90px}
main.wide{max-width:74rem}
.head{margin:0 0 20px}
.head h1{margin-bottom:5px}
.head .sub{color:var(--ink-2); font-size:.92rem}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:7px; background:var(--accent);
  color:var(--accent-ink); border:0; padding:9px 16px; border-radius:var(--r-xs);
  font:inherit; font-size:.89rem; font-weight:700; cursor:pointer; letter-spacing:-.015em;
  transition:background .14s, transform .14s}
.btn:hover{background:#EBB33C; color:#fff}
.btn:active{transform:translateY(.5px)}
.btn.quiet{background:var(--raise); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.quiet:hover{background:var(--panel-2); color:var(--ink)}
.btn.danger{background:var(--hot); color:#180605}
.btn.danger:hover{background:#E8705F}
.btn.sm{padding:5px 11px; font-size:.82rem}
.btn:disabled{opacity:.5; cursor:default}

/* ── panels: a header strip plus a body, so forms read as product ─────── */
.panel{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring); overflow:hidden}
.panel + .panel{margin-top:12px}
/* The body padding for a panel that has no .phead/.pbody of its own. */
.pad{padding:17px 19px}
.pad > h3:first-child{margin-bottom:12px}
.phead{display:flex; align-items:center; gap:10px; padding:12px 18px;
  border-bottom:1px solid var(--line); background:var(--panel-2)}
.phead h3{flex:1 1 auto}
.phead .c{color:var(--ink-3); font-size:.83rem; font-weight:400}
.pbody{padding:16px 18px}
.pfoot{display:flex; justify-content:flex-end; gap:8px; padding:12px 18px;
  border-top:1px solid var(--line); background:var(--panel-2)}
.section-title{display:flex; align-items:center; gap:11px; margin:26px 0 10px}
.section-title h2{flex:0 0 auto; font-size:1.05rem}
.section-title .rule{flex:1; height:1px; background:var(--line)}

/* ── continue card: the one place boldness is spent ───────────────────── */
.resume{display:flex; align-items:center; gap:17px; padding:18px 20px; border-radius:var(--r);
  color:var(--ink); position:relative; overflow:hidden;
  background:linear-gradient(135deg,#2A2008 0%,#1A1A14 55%,var(--panel) 100%);
  box-shadow:inset 0 0 0 1px #4A3A14, 0 18px 40px -26px #D9A12566}
.resume::after{content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,#D9A12588,transparent)}
.resume:hover{box-shadow:inset 0 0 0 1px #6A5420, 0 22px 50px -26px #D9A12588; color:var(--ink)}
.resume .play{flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; box-shadow:0 6px 20px -6px #D9A125AA}
.resume .play svg{width:17px; height:17px; fill:#0A0D11; margin-left:2px}
.resume .body{flex:1; min-width:0; display:block}
.resume .ttl{display:block; font-weight:650; font-size:1.08rem; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.resume .meta{display:block; color:#A99FD8; font-size:.85rem; margin-top:2px}
.resume .track{display:block; height:3px; background:#FFFFFF14; border-radius:2px;
  margin-top:10px; overflow:hidden}
.resume .track i{display:block; height:100%; background:var(--grad); border-radius:2px}

/* ── course cards ─────────────────────────────────────────────────────── */
.courses{display:grid; gap:9px}
.course-card{display:flex; align-items:center; gap:16px; padding:15px 18px; border-radius:var(--r);
  background:var(--panel); box-shadow:var(--ring); color:var(--ink)}
.course-card:hover{background:var(--panel-2); box-shadow:0 0 0 1px var(--line-2); color:var(--ink)}
.course-card .nm{flex:1; min-width:0}
.course-card .nm b{display:block; font-weight:600; font-size:1rem; letter-spacing:-.025em}
.course-card .nm span{display:block; color:var(--ink-3); font-size:.84rem; margin-top:1px}
.course-card .track{flex:0 0 84px; height:3px; background:var(--raise); border-radius:2px; overflow:hidden}
.course-card .track i{display:block; height:100%; background:var(--grad)}
.course-card .pr{flex:0 0 auto; text-align:right; min-width:3rem}
.course-card .pr b{display:block; font:600 1rem/1 "JetBrains Mono",monospace; letter-spacing:-.03em}
.course-card .pr span{display:block; font-size:.74rem; color:var(--ink-3); margin-top:3px}

/* ── the run log ──────────────────────────────────────────────────────── */
.log{list-style:none; margin:0; padding:5px}
.log li{position:relative}
.log .row{display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink)}
a.row:hover{background:var(--panel-2); color:var(--ink)}
.log .row.off{opacity:.45}
.log .num{flex:0 0 auto; width:1.7rem; font:500 .76rem/1 "JetBrains Mono",monospace;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.log .ttl{flex:1; min-width:0; font-weight:500; font-size:.94rem; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.log .sub{display:block; font-weight:400; font-size:.79rem; color:var(--ink-3); margin-top:2px}

/* status markers: small, bright, and glowing so state reads at a glance */
.mk{flex:0 0 auto; width:9px; height:9px; border-radius:50%; display:block}
.mk.done{background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim)}
.mk.part{background:conic-gradient(var(--accent) var(--p,0%), #303945 0)}
.mk.live{background:var(--hot); box-shadow:0 0 0 3px var(--hot-dim)}
.mk.lock{box-shadow:inset 0 0 0 1.5px #2A2F3E}
.mk i{display:none}

/* ── tags ─────────────────────────────────────────────────────────────── */
.tag{flex:0 0 auto; font-size:.71rem; font-weight:600; padding:3px 9px; border-radius:var(--r-xs);
  white-space:nowrap; letter-spacing:-.005em}
.tag.trial{background:var(--accent-dim); color:#A79BFF}
.tag.live{background:var(--hot-dim); color:#F0907F}
.tag.live.now::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:#F0907F; margin-right:6px; vertical-align:1px; animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.tag.live.now::before{animation:none}}
.tag.done{background:var(--ok-dim); color:#43D6A0}
.tag.flat{background:var(--raise); color:var(--ink-2)}
.tag.due{background:var(--warn-dim); color:var(--warn)}
.tag.stop{background:var(--hot-dim); color:#F0907F}
.pct{flex:0 0 auto; font:500 .79rem/1 "JetBrains Mono",monospace; color:var(--ink-2)}

/* ── notices ──────────────────────────────────────────────────────────── */
.notice{border-radius:var(--r); padding:14px 17px; margin:0 0 16px; background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line); border-left:2px solid var(--ink-3)}
.notice h2{font-size:1rem; margin-bottom:3px}
.notice p{font-size:.88rem; color:var(--ink-2)}
.notice.stop{border-left-color:var(--hot); background:linear-gradient(90deg,#1A0D0C,var(--panel) 60%)}
.notice.stop h2{color:#F0907F}
.notice.due{border-left-color:var(--warn); background:linear-gradient(90deg,#1A1408,var(--panel) 60%)}
.flash{background:var(--accent-dim); color:#BDB3FF; padding:10px 15px; border-radius:var(--r-sm);
  font-size:.88rem; font-weight:500; margin:0 0 18px; box-shadow:inset 0 0 0 1px var(--accent-line)}
.flash.bad{background:var(--hot-dim); color:#F0907F; box-shadow:inset 0 0 0 1px #E05B4A44}

.empty{text-align:center; padding:64px 24px}
.empty h1{margin-bottom:8px}
.empty p{color:var(--ink-2); max-width:34rem; margin-inline:auto}

/* ── sign-in ──────────────────────────────────────────────────────────── */
body.solo{display:grid; place-items:center; min-height:100dvh; padding:24px;
  background:radial-gradient(70rem 40rem at 50% -10%, #2A1F08 0%, var(--bg) 62%)}
.solo .card{background:var(--panel); border-radius:16px; padding:32px; max-width:24rem; width:100%;
  box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 80px -40px #000}
.solo .card .wordmark{margin:0 0 20px}
.solo .card h1{font-size:1.5rem; margin-bottom:8px}
.solo .card p{color:var(--ink-2); font-size:.91rem}
.solo .card .btn{width:100%; justify-content:center; margin-top:14px; padding:11px}

/* ── player ───────────────────────────────────────────────────────────── */
.stage{position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--r);
  overflow:hidden; contain:paint; box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px #000}
.stage #yt,.stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.wm{position:absolute; z-index:3; pointer-events:none; user-select:none; font-size:12.5px;
  font-weight:600; color:#fff; opacity:.3; white-space:nowrap; text-shadow:0 1px 4px #000E}
.wmtile{position:absolute; inset:0; z-index:2; pointer-events:none; user-select:none;
  overflow:hidden; color:#fff; opacity:.05; font:600 11px/22px "JetBrains Mono",monospace;
  word-break:break-all; transform:rotate(-24deg) scale(1.6); transform-origin:center}
.halt{display:grid; place-items:center; text-align:center; aspect-ratio:16/9; gap:6px;
  background:var(--panel); border-radius:var(--r); padding:28px; box-shadow:var(--ring)}
.halt h2{font-size:1.2rem} .halt p{color:var(--ink-2); max-width:30rem; font-size:.9rem}

/* ── live class ───────────────────────────────────────────────────────── */
.livebox{display:grid; place-items:center; text-align:center; gap:7px; padding:54px 28px;
  background:var(--panel); border-radius:var(--r); box-shadow:var(--ring)}
.livebox.open{background:linear-gradient(160deg,#1C0C0A,var(--panel) 70%);
  box-shadow:inset 0 0 0 1px #4A211A, 0 22px 50px -30px #E05B4A66}
.livebox h2{font-size:1.6rem} .livebox p{color:var(--ink-2); max-width:32rem; font-size:.91rem}
.cd{font-variant-numeric:tabular-nums; color:var(--accent-2)}
.livebox.open .cd{color:#F0907F}

/* ── forms ────────────────────────────────────────────────────────────── */
label{display:block; font-size:.82rem; font-weight:500; color:var(--ink-2); margin-bottom:5px}
input,select,textarea{width:100%; padding:9px 11px; border:0; border-radius:var(--r-sm);
  background:var(--sunken); color:var(--ink); font:inherit; font-size:.9rem;
  box-shadow:inset 0 0 0 1px var(--line-2)}
input::placeholder,textarea::placeholder{color:#4C5365}
input:focus,select:focus,textarea:focus{outline:0;
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-dim)}
textarea{min-height:7rem; font-family:"JetBrains Mono",monospace; font-size:.82rem; line-height:1.55}
.form{display:grid; gap:13px}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:11px}
.check{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink);
  margin:0; padding:8px 0; font-weight:400}
.check input{width:auto; margin:0; accent-color:var(--accent)}

/* ── tables ───────────────────────────────────────────────────────────── */
.tw{overflow-x:auto; border-radius:var(--r); background:var(--panel); box-shadow:var(--ring); margin:0 0 14px}
table.t{width:100%; border-collapse:collapse; font-size:.88rem; min-width:32rem}
table.t th{text-align:left; font-size:.75rem; font-weight:600; color:var(--ink-3);
  padding:10px 15px; border-bottom:1px solid var(--line); background:var(--panel-2)}
table.t td{padding:10px 15px; border-bottom:1px solid var(--line); vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--panel-2)}
/* `table.t th` above is (0,1,2) and beats a bare `th.n` (0,1,1), so a numeric
   header stayed left-aligned over its right-aligned column — every figure
   looked like it belonged to the heading on its left. */
td.n,th.n,table.t th.n{text-align:right; font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",monospace}
td.acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
td.acts form{margin:0}
td.acts select{width:auto; max-width:9rem; padding:5px 8px; font-size:.8rem}

/* ── stat tiles ───────────────────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; margin:0 0 20px}
.tile{background:var(--panel); border-radius:var(--r); padding:15px 17px; box-shadow:var(--ring);
  position:relative; overflow:hidden}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad)}
.tile .k{margin-bottom:7px}   /* type and colour come from .eyebrow above */
.tile .v{font:700 1.7rem/1 "Inter Tight",sans-serif; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.tile .v.good{color:var(--ok)} .tile .v.bad{color:var(--hot)}
.faint.bad{color:#F0907F}   /* a failed invite email, under the status badge */
.tile .f{font-size:.79rem; color:var(--ink-3); margin-top:5px}

/* ── tabs ─────────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:4px; margin:0 0 20px; background:var(--panel); padding:4px;
  border-radius:var(--r-sm); box-shadow:var(--ring); width:fit-content}
.tabs .tab{padding:7px 15px; border-radius:var(--r-xs); color:var(--ink-2); font-size:.88rem;
  font-weight:500}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{background:var(--raise); color:var(--ink); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── admin sections ───────────────────────────────────────────────────── */
.sect{margin:0 0 22px}
.secthead{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 8px}
.secthead h3{margin:0}
.secthead form{display:flex; gap:6px; align-items:center; margin:0}
.secthead input{width:auto; max-width:11rem; padding:5px 9px; font-size:.83rem}
.adder{border-radius:var(--r-sm); margin:8px 0 0; background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line)}
.adder > summary{padding:10px 15px; cursor:pointer; font-size:.86rem; font-weight:600;
  color:var(--accent); list-style:none}
.adder > summary::-webkit-details-marker{display:none}
.adder > summary:hover{color:#EFC167}
.adder[open] > summary{border-bottom:1px solid var(--line)}
.adder .form{padding:15px}

/* ── collapsible groups ───────────────────────────────────────────────── */
.grp{border-radius:var(--r); background:var(--panel); margin:0 0 10px; overflow:hidden;
  box-shadow:var(--ring)}
.grp > summary{display:flex; align-items:center; gap:10px; padding:12px 17px; cursor:pointer;
  list-style:none; font-weight:650; font-size:.95rem; letter-spacing:-.02em;
  background:var(--panel-2); border-bottom:1px solid var(--line)}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary::after{content:""; width:6px; height:6px; border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg); margin-left:auto;
  transition:transform .18s ease}
.grp[open] > summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.grp > summary::after{transition:none}}
.grp > summary .c{font-weight:400; color:var(--ink-3); font-size:.82rem}

@media (max-width:640px){
  main{padding:20px 14px 70px}
  .bar{padding:0 13px} .wordmark span{display:none}
  h1{font-size:1.6rem}
  .resume{gap:13px; padding:15px} .resume .play{width:40px; height:40px}
  .course-card .track{display:none}
}

/* ── cloaked player ───────────────────────────────────────────────────────
   Layering, lowest first: iframe, watermark tile, cloak (swallows every click
   and the context menu), watermark text, cover (opaque whenever not playing,
   so YouTube's own branding is never visible), our control bar on top. */
.stage .cloak{position:absolute; inset:0; z-index:3; background:transparent; cursor:pointer}
.stage .wmtile{z-index:2}
.stage .wm{z-index:4}

.stage .cover{position:absolute; inset:0; z-index:5; background:#0F1216;
  display:grid; place-items:center; gap:14px; align-content:center; cursor:pointer}
.stage .cover[hidden]{display:none}
.stage .cover .ct{font-weight:600; font-size:1.02rem; letter-spacing:-.025em; color:var(--ink);
  max-width:80%; text-align:center}
.stage .cover .bigplay{width:62px; height:62px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; box-shadow:0 10px 32px -10px #D9A125AA}
.stage .cover .bigplay::after{content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #0A0D11; margin-left:5px}

.stage .ctl{position:absolute; left:0; right:0; bottom:0; z-index:6; display:flex;
  align-items:center; gap:10px; padding:26px 14px 11px;
  background:linear-gradient(transparent,#000000D9 62%); opacity:0; transition:opacity .18s}
.stage:hover .ctl,.stage .ctl:focus-within,.stage .cover:not([hidden]) ~ .ctl{opacity:1}
@media (prefers-reduced-motion:reduce){.stage .ctl{transition:none}}
.stage .ctl button{background:#FFFFFF1A; border:0; color:#fff; height:30px; min-width:30px;
  padding:0 8px; border-radius:7px; cursor:pointer; font:600 12px/1 inherit;
  display:grid; place-items:center}
.stage .ctl button:hover{background:#FFFFFF2E}
.stage .ctl .vol svg{display:block}
.stage .ctl .pp::after{content:""; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff; margin-left:2px}
.stage .ctl .pp.playing::after{border:0; width:9px; height:11px; margin:0;
  background:linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 9px)}
.stage .ctl .cc.on{background:var(--accent); color:#fff}
.stage .ctl .now,.stage .ctl .dur{font:500 11.5px/1 "JetBrains Mono",monospace; color:#fff;
  font-variant-numeric:tabular-nums}
.stage .ctl .bar{flex:1; height:4px; background:#FFFFFF2E; border-radius:2px; position:relative;
  cursor:pointer}
.stage .ctl .bar::before{content:""; position:absolute; inset:-7px 0; cursor:pointer}
.stage .ctl .bar i{position:absolute; left:0; top:0; bottom:0; border-radius:2px}
.stage .ctl .buf{background:#FFFFFF33}
.stage .ctl .fill{background:var(--grad)}
.stage .ctl .speed{width:auto; padding:5px 6px; font-size:11.5px; background:#FFFFFF1A;
  color:#fff; box-shadow:none; border-radius:7px; height:30px}
.stage .ctl .speed option{background:#13151C; color:#fff}
.stage:fullscreen .ctl,.stage:-webkit-full-screen .ctl{padding-bottom:20px}
@media (max-width:560px){
  .stage .ctl{gap:7px; padding:22px 9px 9px}
  .stage .ctl .speed,.stage .ctl .cc,.stage .ctl .vol{display:none}
}

/* ── link mode ────────────────────────────────────────────────────────── */
.openbox{display:grid; place-items:center; gap:13px; text-align:center; padding:52px 26px;
  background:var(--panel); border-radius:var(--r); box-shadow:var(--ring)}
.openbox h2{font-size:1.35rem}
.openbox p{color:var(--ink-2); font-size:.92rem; max-width:30rem; margin:0}
.openbox .bigplay{width:60px; height:60px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; box-shadow:0 10px 32px -10px #D9A125AA; margin-bottom:2px}
.openbox .bigplay::after{content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #0A0D11; margin-left:5px}
.openbox .go{margin-top:6px; padding:11px 24px; font-size:.95rem}
.openbox .after{color:var(--accent-2); font-size:.86rem}
.openbox .doneBtn.on{background:var(--ok); color:#06160F; box-shadow:none}

/* reorder controls */
.btn.ord{min-width:28px;padding:5px 7px;font-size:.9rem;line-height:1}
.btn.ord:disabled{opacity:.3}

/* ── fee summary strip ────────────────────────────────────────────────── */
.feebar{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--line); border-radius:var(--r); overflow:hidden; margin:0 0 20px;
  box-shadow:var(--ring)}
.feebar .fb{background:var(--panel); padding:14px 17px}
.feebar .k{display:block; font-size:.79rem; color:var(--ink-3); margin-bottom:5px}
.feebar .v{display:block; font:700 1.35rem/1 "Inter Tight",sans-serif; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.feebar .v.good{color:var(--ok)} .feebar .v.bad{color:var(--hot)}

/* ── per-course fee chip, with breakdown on hover/focus ───────────────── */
.feechip{position:relative; flex:0 0 auto; font-size:.74rem; font-weight:600;
  padding:4px 10px; border-radius:20px; white-space:nowrap; cursor:default; outline:0}
.feechip.due{background:var(--warn-dim); color:var(--warn)}
.feechip.over{background:var(--hot-dim); color:#F0907F}
.feechip.clear{background:var(--ok-dim); color:var(--ok)}
.feechip .tip{position:absolute; bottom:calc(100% + 9px); right:0; z-index:40;
  display:grid; gap:5px; min-width:13.5rem; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--raise); box-shadow:0 0 0 1px var(--line-2), 0 16px 36px -16px #000;
  opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity .13s, transform .13s}
.feechip:hover .tip,.feechip:focus .tip,.feechip:focus-within .tip{opacity:1; transform:none}
.feechip .tip span{display:flex; justify-content:space-between; gap:16px; font-weight:400}
.feechip .tip em{font-style:normal; color:var(--ink-3); font-size:.78rem}
.feechip .tip b{color:var(--ink); font-size:.82rem; font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",monospace}
.feechip .tip::after{content:""; position:absolute; top:100%; right:16px; border:5px solid transparent;
  border-top-color:var(--raise)}
@media (prefers-reduced-motion:reduce){.feechip .tip{transition:none}}
@media (max-width:640px){.feechip .tip{right:auto; left:0}}

/* ── search + filter toolbar ──────────────────────────────────────────── */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px}
.toolbar #q{flex:1 1 15rem; max-width:22rem; padding:8px 12px; font-size:.9rem}
.chips{display:flex; gap:4px; flex-wrap:wrap}
.chip{background:var(--panel); color:var(--ink-2); border:0; padding:6px 12px; border-radius:20px;
  font:inherit; font-size:.83rem; font-weight:500; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line)}
.chip:hover{color:var(--ink); background:var(--panel-2)}
.chip.on{background:var(--accent-dim); color:#F2CC80; box-shadow:inset 0 0 0 1px var(--accent-line);
  font-weight:600}
.log li[hidden],.grp[hidden]{display:none}

/* ── session resources ────────────────────────────────────────────────── */
.res{display:grid; gap:8px; margin:0 0 20px}
.resitem{display:flex; align-items:center; gap:12px; padding:13px 17px; border-radius:var(--r-sm);
  background:var(--panel); box-shadow:var(--ring); color:var(--ink)}
.resitem:hover{background:var(--panel-2); color:var(--ink); text-decoration:none}
.resitem .rt{flex:1; font-weight:500; font-size:.93rem}

/* ── next live class, on the home page ───────────────────────────────── */
.nextlive{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r);
  margin:0 0 14px; color:var(--ink); background:linear-gradient(100deg,#1C0C0A,var(--panel) 65%);
  box-shadow:inset 0 0 0 1px #4A211A}
.nextlive:hover{color:var(--ink); box-shadow:inset 0 0 0 1px #6B2F24}
.nextlive .nl{flex:1; min-width:0}
.nextlive .nl b{display:block; font-weight:600; font-size:1rem; letter-spacing:-.022em}
.nextlive .nl span{display:block; color:#D8A79E; font-size:.84rem; margin-top:1px}
.dotpulse{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--hot);
  box-shadow:0 0 0 3px var(--hot-dim); animation:beat 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dotpulse{animation:none}}

/* ── agenda of live classes ──────────────────────────────────────────── */
.agenda{display:grid; gap:9px}
.ag{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 17px;
  border-radius:var(--r); background:var(--panel); box-shadow:var(--ring)}
.ag.now{background:linear-gradient(100deg,#1C0C0A,var(--panel) 65%); box-shadow:inset 0 0 0 1px #4A211A}
.ag .when{flex:0 0 8.5rem}
.ag .when b{display:block; font-size:.92rem; font-weight:600}
.ag .when span{display:block; color:var(--ink-3); font-size:.82rem;
  font-family:"JetBrains Mono",monospace; margin-top:2px}
.ag .what{flex:1 1 12rem; min-width:0}
.ag .what b{display:block; font-weight:600; font-size:.97rem; letter-spacing:-.02em}
.ag .what span{display:block; color:var(--ink-3); font-size:.83rem; margin-top:1px}
@media (max-width:560px){.ag .when{flex-basis:100%}}

/* ── notes ────────────────────────────────────────────────────────────── */
.notebox{min-height:9rem; font-family:inherit; font-size:.93rem; line-height:1.6;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); resize:vertical}
.notebox:focus{box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-dim)}
.section-title #notestatus{margin-left:auto; font-size:.8rem}

/* ── certificate ──────────────────────────────────────────────────────── */
.certcta{display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r);
  margin:0 0 16px; color:var(--ink);
  background:linear-gradient(100deg,#0E2A1E,var(--panel) 65%); box-shadow:inset 0 0 0 1px #1F5A40}
.certcta:hover{color:var(--ink); box-shadow:inset 0 0 0 1px #2C7A57}
.certcta .nl{flex:1}
.certcta .nl b{display:block; font-weight:600; font-size:1rem; letter-spacing:-.022em}
.certcta .nl span{display:block; color:#8FC9AC; font-size:.84rem; margin-top:1px}

body.certpage{display:grid; place-items:center; min-height:100dvh; padding:28px;
  background:radial-gradient(60rem 36rem at 50% -8%, #141235 0%, var(--bg) 62%)}
.cert{width:100%; max-width:46rem; aspect-ratio:1.414/1; display:grid; align-content:center;
  justify-items:center; text-align:center; gap:4px; padding:48px 56px; border-radius:16px;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-2), 0 40px 90px -50px #000;
  position:relative; overflow:hidden}
.cert::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad)}
.certmark{display:flex; align-items:center; gap:9px; font-weight:650; font-size:.9rem;
  letter-spacing:-.02em; margin-bottom:18px}
.certmark .mk-icon{display:block; border-radius:5px; flex:0 0 auto}
/* Gold on the dark screen version, ink on the printed one — gold on white
   prints washed out, and this page exists to be printed. */
.certmark .mk-gold,.certmark .mk-ink{display:block; height:17px; width:auto}
.certmark .mk-ink{display:none}
.certlede{color:var(--ink-3); font-size:.92rem; margin:0}
.certname{font-size:clamp(1.8rem,5vw,2.9rem); font-weight:800; letter-spacing:-.04em; margin:6px 0 12px}
.certcourse{font-size:clamp(1.1rem,3vw,1.5rem); font-weight:600; letter-spacing:-.03em;
  color:var(--accent-2); margin:6px 0 0}
.certfoot{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin-top:34px;
  padding-top:20px; border-top:1px solid var(--line); width:100%}
.certfoot span{display:grid; gap:3px}
.certfoot em{font-style:normal; color:var(--ink-3); font-size:.72rem}
.certfoot b{font-size:.85rem; font-weight:600}
.certbar{display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:20px; justify-content:center}
@media print{
  body.certpage{background:#fff; padding:0; display:block}
  .certbar{display:none}
  .cert{max-width:none; box-shadow:none; border-radius:0; background:#fff; color:#111;
    aspect-ratio:auto; min-height:100vh}
  .cert .certlede,.cert .certfoot em{color:#555}
  .cert .certname,.cert .certfoot b,.certmark{color:#111}
  .certmark .mk-gold{display:none}
  .certmark .mk-ink{display:block}
  .certcourse{color:#2B3FC4}
  .certfoot{border-top-color:#ddd}
}

/* ── consolidated notes ───────────────────────────────────────────────── */
.notebar{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 18px}
.noteitem{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring);
  padding:17px 20px; margin:0 0 11px}
.noteitem h3{font-size:1rem; margin:0 0 3px}
.noteitem h3 a{color:var(--ink)}
.noteitem h3 a:hover{color:var(--accent)}
.noteitem > .faint{margin:0 0 10px}
.notebody{margin:0; padding:0; background:none; border:0; white-space:pre-wrap; word-wrap:break-word;
  font-family:inherit; font-size:.93rem; line-height:1.65; color:var(--ink-2); overflow-x:visible}
@media print{
  body{background:#fff; color:#111}
  .bar,.notebar,.head .sub{display:none}
  .noteitem{box-shadow:none; background:none; border-bottom:1px solid #ddd; border-radius:0;
    padding:10px 0; break-inside:avoid}
  .noteitem h3 a,.notebody{color:#111}
  .noteitem > .faint{color:#666}
}

/* ── library ──────────────────────────────────────────────────────────── */
.cloud{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:14px 16px;
  background:var(--panel); border-radius:var(--r); box-shadow:var(--ring)}
.tagchip{background:var(--raise); color:var(--ink-2); border:0; padding:5px 11px; border-radius:20px;
  font:inherit; font-size:.79rem; font-weight:500; cursor:pointer; display:inline-flex; gap:6px;
  align-items:center; box-shadow:inset 0 0 0 1px var(--line)}
.tagchip:hover{color:var(--ink); background:var(--panel-2)}
.tagchip span{color:var(--ink-3); font-size:.72rem; font-family:"JetBrains Mono",monospace}
.tagchip.on{background:var(--accent-dim); color:#F2CC80; box-shadow:inset 0 0 0 1px var(--accent-line)}
.tagchip.on span{color:#C79A3E}

.lib{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring); padding:16px 19px;
  margin:0 0 10px}
.lib[hidden]{display:none}
.libhead{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.libt{font-weight:600; font-size:1rem; letter-spacing:-.022em; color:var(--ink)}
a.libt:hover{color:var(--accent)}
.libc{color:var(--ink-3); font-size:.82rem; margin:2px 0 0}
.libs{margin:10px 0 0}
.libs p{position:relative; color:var(--ink-2); font-size:.9rem; line-height:1.55;
  margin:0 0 4px; padding-left:15px}
.libs p::before{content:""; position:absolute; left:2px; top:.62em; width:4px; height:4px;
  border-radius:50%; background:var(--accent-2); opacity:.65}
.libtags{display:flex; flex-wrap:wrap; gap:5px; margin-top:11px}
textarea.plain{font-family:inherit; font-size:.92rem; line-height:1.6; min-height:9rem}

/* ── Announcements ─────────────────────────────────────────────────────────
   A warm strip at the top of the dashboard and the course page. Loud enough
   to read before the content, quiet enough not to look like an error. */
.anns{display:grid; gap:9px; margin:0 0 18px}
.ann{display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  border-radius:var(--r); background:linear-gradient(180deg,#2A2415,#241F13);
  box-shadow:inset 0 0 0 1px #4A3D1C, 0 1px 0 rgba(0,0,0,.25)}
.ann .megaphone{flex:none; width:19px; height:19px; margin-top:1px; color:#E8B44A}
.ann .megaphone svg{width:100%; height:100%; fill:currentColor}
.annbody{min-width:0}
.annbody p{margin:0 0 3px; color:#F3E2BC; font-size:.93rem; line-height:1.5;
  letter-spacing:-.01em; overflow-wrap:anywhere}
.annbody p:last-child{margin-bottom:0}
.annc{display:block; color:#C9A760; font-size:.7rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px}

/* Admin side: posted announcements with their remaining window. */
.annlist{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:7px}
.annrow{display:flex; gap:12px; align-items:center; padding:10px 13px;
  border-radius:10px; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line)}
.annrow p{margin:0; flex:1; min-width:0; color:var(--ink); font-size:.9rem;
  line-height:1.45; overflow-wrap:anywhere}
.annrow .faint{flex:none; font-size:.78rem}
.annrow.off{opacity:.55}
.annrow.off p{text-decoration:line-through; text-decoration-color:var(--ink-3)}

/* The session page's "What's covered" block reuses the library's bullet
   styling; tag chips there are links back into a filtered library. */
.covered{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring);
  padding:16px 19px; margin:0 0 14px}
.covered .libs{margin:0}
.covered .libtags{margin-top:13px}
a.tagchip{text-decoration:none}

/* ── Public catalogue ──────────────────────────────────────────────────────
   Same palette and type as the portal, so signing in is a continuation rather
   than a jump to a different product. Wider than the portal because a shop
   window is read by someone who is not yet looking for anything specific. */
body.pub main{max-width:1080px}
body.pub .bar nav a{font-size:.9rem}

.hero{padding:46px 0 38px; border-bottom:1px solid var(--line); margin-bottom:34px}
.hero h1{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.12; letter-spacing:-.035em;
  margin:0 0 16px; color:var(--ink)}
.hero p{max-width:54ch; color:var(--ink-2); font-size:1.03rem; line-height:1.62; margin:0 0 10px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}

.section-title .count{font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--ink-3);
  background:var(--raise); padding:3px 9px; border-radius:20px; box-shadow:inset 0 0 0 1px var(--line)}

.ccards{display:grid; gap:12px; margin:0 0 40px}
.ccard{display:grid; grid-template-columns:168px 1fr auto; gap:18px; align-items:center;
  background:var(--panel); border-radius:var(--r); box-shadow:var(--ring); padding:14px;
  text-decoration:none; transition:box-shadow .15s, transform .15s}
.ccard:hover{box-shadow:var(--ring), 0 10px 30px rgba(0,0,0,.38); transform:translateY(-1px)}
.cov{display:block; width:168px; height:94px; border-radius:10px; overflow:hidden; background:var(--raise)}
.cov img{width:100%; height:100%; object-fit:cover; display:block}
.cov.noimg{display:grid; place-items:center;
  background:linear-gradient(135deg, hsl(var(--h) 46% 26%), hsl(calc(var(--h) + 40) 52% 16%))}
.cov.noimg b{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:#fff; opacity:.92}
.cbody{min-width:0; display:block}
.cbody b{display:block; font-size:1.05rem; font-weight:650; letter-spacing:-.022em; color:var(--ink)}
.ccard:hover .cbody b{color:var(--accent)}
.cbody .tag-line{display:block; color:var(--ink-2); font-size:.9rem; line-height:1.5; margin-top:3px}
.cbody .meta{display:block; color:var(--ink-3); font-size:.82rem; margin-top:6px}
.pr{display:block; text-align:right; white-space:nowrap}
.pr b{display:block; font-size:1.3rem; font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.pr b.free{color:var(--ok)}
.pr s{color:var(--ink-3); font-size:.88rem; margin-right:7px}
.pr .off{font-style:normal; font-size:.74rem; font-weight:600; color:#E8B44A;
  background:#2A2415; padding:2px 7px; border-radius:20px; box-shadow:inset 0 0 0 1px #4A3D1C}

.why{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:34px 0 10px;
  padding-top:30px; border-top:1px solid var(--line)}
.why h3{margin:0 0 6px; font-size:.98rem; letter-spacing:-.02em}
.why p{margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.6}

.crumbs{color:var(--ink-3); font-size:.82rem; margin:0 0 6px}
.crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--accent)}

.coursepage{display:grid; grid-template-columns:1fr 348px; gap:26px; align-items:start}
.pitch p{color:var(--ink-2); line-height:1.65; margin:0 0 10px}

.syl{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring); margin:0 0 9px;
  overflow:hidden}
.syl > summary{display:flex; gap:13px; align-items:center; padding:14px 17px; cursor:pointer;
  list-style:none}
.syl > summary::-webkit-details-marker{display:none}
.syl > summary .n{font-family:"JetBrains Mono",monospace; font-size:.8rem; color:var(--ink-3)}
.syl .st b{display:block; font-size:.98rem; letter-spacing:-.02em; color:var(--ink)}
.syl .st span{display:block; color:var(--ink-3); font-size:.82rem; margin-top:2px}
.syl[open] > summary{background:var(--raise)}
.syl ul{list-style:none; margin:0; padding:4px 17px 14px}
.syl li{display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:.92rem}
.syl li .k{flex:none; width:7px; height:7px; border-radius:50%; background:var(--ink-3)}
.syl li .k.live{background:var(--hot)}
.syl li .t{flex:1; min-width:0}

.buybox{background:var(--panel); border-radius:var(--r); box-shadow:var(--ring); overflow:hidden;
  position:sticky; top:84px}
.buybox .cov.wide{width:100%; height:auto; aspect-ratio:16/9; border-radius:0}
.buybox .pad{padding:17px 18px}
.buybox .validity{color:var(--ink-3); font-size:.84rem; margin:0 0 10px}
.bigprice .pr{text-align:left; margin-bottom:15px}
.bigprice .pr b{font-size:1.9rem}
.btn.block{display:block; text-align:center; width:100%}
.buybox .faint{margin:11px 0 0; font-size:.82rem; line-height:1.55}
.incl{padding:16px 18px; border-top:1px solid var(--line)}
.incl h3{margin:0 0 10px; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.incl ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.incl li{position:relative; padding-left:20px; color:var(--ink-2); font-size:.89rem; line-height:1.5}
.incl li::before{content:"+"; position:absolute; left:3px; top:-1px; color:var(--accent-2); font-weight:700}

.pubfoot{max-width:1080px; margin:46px auto 30px; padding:20px 22px 0; display:flex; gap:12px;
  flex-wrap:wrap; justify-content:space-between; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:.82rem}
.pubfoot a{color:var(--ink-3)} .pubfoot a:hover{color:var(--accent)}

@media (max-width:900px){
  .coursepage{grid-template-columns:1fr}
  .buybox{position:static; order:-1}
  .why{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* The portal hides the wordmark text to fit six nav links; a shop window has
     two, and the brand name is the one thing a first-time visitor needs. */
  body.pub .wordmark span{display:inline}
}
@media (max-width:620px){
  .ccard{grid-template-columns:110px 1fr; gap:13px}
  .cov{width:110px; height:66px}
  .pr{grid-column:2; text-align:left; margin-top:4px}
  .pr b{font-size:1.1rem; display:inline-block; margin-right:8px}
}

/* ── Checkout ──────────────────────────────────────────────────────────────
   Two panels side by side: how to pay, and where else to pay from. The QR sits
   on white because scanners want contrast, not a dark theme. */
.paygrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px; align-items:start}
.qr{background:#fff; border-radius:12px; padding:12px; width:max-content; margin:4px 0 14px}
.qr svg{display:block}
.payline{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin:0 0 7px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.payline span{color:var(--ink-3); font-size:.84rem}
.payline code, .payline b{font-size:.95rem; color:var(--ink)}
.bankbox p{margin:0 0 5px; color:var(--ink-2); font-size:.9rem; font-family:"JetBrains Mono",monospace}
@media (max-width:760px){ .paygrid{grid-template-columns:1fr} }

/* ── Finish ────────────────────────────────────────────────────────────────
   The palette alone leaves everything on one plane. These rules give the page
   a light source: panels catch a hairline at the top, interactive cards lift
   on hover, and the brand gold appears as a faint glow behind page headers the
   way it does on the marketing site's hero — colour as atmosphere, not paint. */

body{
  background:
    radial-gradient(900px 420px at 50% -220px, #D9A1250e, transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* One surface treatment, applied to everything that is a "card". */
.panel, .tile, .lib, .course-card, .resume, .nextlive, .ccard, .buybox, .syl, .covered,
.notice, .sect, .grp, .annrow{
  background-image:linear-gradient(180deg, #FFFFFF07, transparent 42%);
}
.panel, .tile, .lib, .ccard, .buybox, .covered, .sect{
  box-shadow:var(--ring), 0 1px 2px #00000040, 0 10px 24px -18px #000000cc;
}

/* Anything you can click rises very slightly. Enough to notice, not to bounce. */
.course-card, .resume, .nextlive, .lib, .ccard{
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.course-card:hover, .resume:hover, .nextlive:hover, .ccard:hover{
  transform:translateY(-2px);
  box-shadow:var(--ring), 0 2px 4px #00000050, 0 18px 36px -20px #000;
}

/* Page headers: eyebrow, then a title with room to breathe. */
.head{padding:4px 0 20px}
.head h1{font-size:clamp(1.9rem, 3.2vw, 2.4rem)}
.head .sub{color:var(--ink-2); margin-top:9px; font-size:.95rem}
.crumbs{letter-spacing:.02em}

/* Section rules read as structure rather than decoration. */
.section-title{display:flex; align-items:center; gap:14px; margin:30px 0 14px}
.section-title h2{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:500; color:var(--accent)}
.section-title .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent)}

/* Tags: quieter, so the gold ones mean something. */
.tag{border-radius:5px; letter-spacing:.01em}
.tag.trial{background:var(--accent-dim); color:var(--accent-2); box-shadow:inset 0 0 0 1px var(--accent-line)}

/* The run-log rail: gold for progress, so the eye follows the one colour. */
.mk.done{background:var(--ok)}
.mk.part{background:conic-gradient(var(--accent) var(--p,0%), var(--line-2) 0)}

/* Buttons: a touch of lift, and a gold cast under the primary one. */
.btn{box-shadow:0 1px 0 #00000040}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px -8px #D9A12599}
.btn.quiet:hover{box-shadow:0 6px 18px -10px #000}

/* Inputs: the focus ring is the brand colour doing a job. */
input, select, textarea{transition:box-shadow .14s, border-color .14s}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 3px var(--accent-dim)}

/* The dashboard's first screen: who you are, then where you were. */
.welcome{padding:30px 0 22px; margin-bottom:6px; border-bottom:1px solid var(--line)}
.welcome h1{font-size:clamp(1.9rem,3.4vw,2.5rem); margin:7px 0 0}
.welcome .sub{color:var(--ink-2); font-size:.93rem; margin-top:9px}
.welcome .eyebrow{margin:0}

/* Course identity without anyone uploading artwork. */
.ct{flex:0 0 auto; width:50px; height:50px; border-radius:10px; display:grid; place-items:center;
  font-weight:800; font-size:1rem; letter-spacing:-.03em; color:#fff;
  background:linear-gradient(140deg, hsl(var(--h) 44% 30%), hsl(calc(var(--h) + 38) 50% 17%));
  box-shadow:inset 0 1px 0 #FFFFFF26}
.course-card .track i{background:var(--accent)}
@media (max-width:620px){ .ct{width:42px; height:42px; font-size:.88rem} }

/* A grid stretches its children, which turned every form's submit into a
   full-width gold bar. A button should be the size of its label. */
.form > .btn, .form > button{justify-self:start}

/* ── Course tiles ──────────────────────────────────────────────────────────
   The three standing things at the top of a course: the next class, the chat
   room, the daily lab, the handbook. Equal weight, because on any given day any
   of them can be the reason a student opened the page. */
/* Three across, however many there are: a course with a handbook and a repo
   wraps onto a second row rather than squeezing five tiles into one. At 176px
   a repo name broke across three lines and the lab window read as a column of
   fragments — the row fitted, and nothing in it was legible.
   Flex rather than grid, for one reason: an incomplete last row centres under
   the full one. A grid can only ever leave the gap on the right. */
.ctiles{display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin:0 0 22px}
.ctile{display:flex; gap:13px; align-items:flex-start; text-align:left;
  flex:0 1 calc((100% - 22px) / 3);
  padding:15px 16px; border-radius:var(--r); background:var(--panel); color:var(--ink);
  box-shadow:var(--ring), 0 1px 2px #00000040, 0 10px 24px -18px #000000cc;
  background-image:linear-gradient(180deg,#FFFFFF07,transparent 42%);
  border:0; font:inherit; cursor:default;
  transition:transform .16s ease, box-shadow .16s ease}
a.ctile, button.ctile{cursor:pointer}
a.ctile:hover, button.ctile:hover{transform:translateY(-2px); color:var(--ink);
  box-shadow:var(--ring), 0 2px 4px #00000050, 0 18px 36px -20px #000}

.ctile .ci{flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid;
  place-items:center; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2)}
.ctile .ci svg{width:17px; height:17px; fill:var(--ink-2)}
.ctile .cb{min-width:0}
.ctile .ck{display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}
.ctile b{display:block; font-size:.98rem; font-weight:650; letter-spacing:-.02em;
  overflow-wrap:anywhere}
.ctile .cb > span:not(.ck){display:block; color:var(--ink-3); font-size:.8rem; line-height:1.45;
  margin-top:3px; overflow-wrap:anywhere}
.ctile .cl{color:var(--warn)}

/* Open right now: the one tile that should pull the eye. */
.ctile.now{background:linear-gradient(180deg,#D9A1251c,var(--panel) 60%);
  box-shadow:inset 0 0 0 1px var(--accent-line), 0 14px 30px -20px #D9A12566}
.ctile.now .ci{background:var(--accent-dim); box-shadow:inset 0 0 0 1px var(--accent-line)}
.ctile.now .ci svg{fill:var(--accent-2)}
.ctile.now b{color:var(--accent-2)}
.ctile.chat .ci svg{fill:#5BC8A8}
.ctile.doc .ci svg{fill:#7FA8E8}
.ctile.repo .ci svg{fill:#C2CBD6}

/* Two or three actions side by side under a panel's explanation. */
.btnrow{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:0 0 10px}

@media (max-width:1020px){ .ctile{flex-basis:calc((100% - 11px) / 2)} }
@media (max-width:860px){ .ctile{flex-basis:100%} }

/* ── Page header with actions, and the panels they open ───────────────────── */
.head.withaction{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap}
.headacts{display:flex; gap:8px; padding-bottom:4px}

.sheet{border:0; padding:0; max-width:min(880px, calc(100vw - 32px)); width:100%;
  background:var(--panel); color:var(--ink); border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 50px 90px -40px #000;
  max-height:min(86vh, 900px); overflow:hidden}
.sheet::backdrop{background:#05070Bcc; backdrop-filter:blur(3px)}
.sheethead{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FFFFFF08,transparent)}
.sheethead h2{font-size:1.05rem}
.sheetbody{padding:16px 18px 20px; overflow:auto; max-height:calc(86vh - 56px)}
/* The form inside is already a panel on the page; inside a sheet it is the sheet. */
.sheetbody > .panel{background:transparent; box-shadow:none; padding:0; background-image:none}
.sheetbody > .panel > h3:first-child{display:none}
@media (max-width:620px){
  .sheet{max-height:94vh} .sheetbody{max-height:calc(94vh - 56px)}
  .head.withaction{align-items:flex-start}
}

/* Weekday checkboxes for the class pattern. */
.days{display:flex; flex-wrap:wrap; gap:8px}
.days .check{background:var(--raise); padding:7px 11px; border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1px var(--line); font-size:.86rem}
.days .check:has(input:checked){background:var(--accent-dim); color:var(--accent-2);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.ctile.off{opacity:.72}
.ctile.off b{color:var(--hot)}

/* The per-day class actions: two small forms that should read as one row. */
.t .acts form.inline{display:inline-flex; gap:5px; align-items:center; margin:0 6px 4px 0}
.t .acts form.inline input[type=time]{width:7.4rem}
.t .acts form.inline input:not([type=time]){width:11rem}
@media (max-width:900px){ .t .acts form.inline{display:flex; margin-bottom:6px} }
.ag.off{opacity:.6}
.ag.off .what b{text-decoration:line-through; text-decoration-color:var(--ink-3)}
#cardmsg.bad{color:var(--hot)}
.pr .approx{display:block; font-style:normal; font-size:.78rem; color:var(--ink-3); margin-top:3px}
.bigprice .pr .approx{font-size:.85rem}

/* The brand mark: a square icon plus the wordmark, both real images so the
   header matches the payment sheet and the marketing site exactly. */
.wordmark .mk-icon{display:block; border-radius:6px; flex:0 0 auto}
.wordmark .mk-word{display:block; height:17px; width:auto}
.wordmark{gap:9px}
@media (max-width:860px){ body:not(.pub) .wordmark .mk-word{display:none} }

/* Quick picks above a reason box. They write the sentence rather than submit
   it, so the text stays editable and what is on screen is what is sent. */
.picks{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 9px}
.picks .btn{font-size:.8rem; padding:5px 11px}
.sheet textarea{width:100%; resize:vertical; font:inherit; background:var(--raise);
  color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.sheet textarea:focus{outline:none; border-color:var(--accent)}