/* ============================================================
   GRIMOIRE — design system for « Anglais avec Harry Potter »
   An illuminated study-grimoire: parchment, iron-gall ink,
   antique gold, candlelit midnight. Adult, calm, readable.
   ============================================================ */

:root{
  /* Ink */
  --ink:        oklch(0.255 0.018 58);
  --ink-soft:   oklch(0.40 0.020 55);
  --ink-faint:  oklch(0.53 0.018 60);
  /* Parchment */
  --parch:      oklch(0.927 0.022 86);
  --parch-2:    oklch(0.962 0.016 90);
  --parch-3:    oklch(0.90 0.026 82);
  --edge:       oklch(0.83 0.030 78);
  --edge-soft:  oklch(0.88 0.024 82);
  /* Metals & jewels */
  --gold:       oklch(0.70 0.105 80);
  --gold-deep:  oklch(0.545 0.092 70);
  --gold-ink:   oklch(0.46 0.080 66);
  --midnight:   oklch(0.235 0.050 287);
  --midnight-2: oklch(0.165 0.042 290);
  --midnight-3: oklch(0.30 0.052 286);
  --wine:       oklch(0.42 0.105 24);
  --emerald:    oklch(0.50 0.078 152);
  /* Type */
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Shape */
  --radius: 7px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px oklch(0.3 0.03 60 / .10), 0 10px 30px -16px oklch(0.30 0.04 60 / .35);
  --shadow-lift: 0 2px 6px oklch(0.3 0.03 60 / .14), 0 22px 48px -22px oklch(0.28 0.05 60 / .50);
  --maxw: 920px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  font-family:var(--body);
  font-size:19px;
  line-height:1.72;
  color:var(--ink);
  margin:0;
  background-color:var(--parch);
  background-image:
    radial-gradient(120% 80% at 50% -10%, oklch(0.97 0.02 88 / .9), transparent 55%),
    radial-gradient(140% 120% at 100% 0%, oklch(0.86 0.035 70 / .35), transparent 60%),
    radial-gradient(130% 120% at 0% 100%, oklch(0.84 0.04 60 / .30), transparent 55%);
  background-attachment: fixed;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* faint paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, oklch(0.2 0.02 60 / .012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, oklch(0.2 0.02 60 / .010) 0 1px, transparent 1px 4px);
}

::selection{ background: oklch(0.70 0.105 80 / .35); }

a{ color:var(--gold-ink); text-decoration-color: oklch(0.70 0.105 80 / .5); text-underline-offset:3px; }
a:hover{ color:var(--wine); }

b, strong{ font-weight:600; color:var(--ink); }
i, em{ font-style:italic; }

/* ===================== HERO / HEADER ===================== */
header{
  position:relative;
  color: oklch(0.93 0.02 88);
  background:
    radial-gradient(120% 140% at 50% -40%, var(--midnight-3), transparent 60%),
    linear-gradient(160deg, var(--midnight) 0%, var(--midnight-2) 100%);
  padding: clamp(40px, 7vw, 76px) 22px clamp(34px, 5vw, 56px);
  text-align:center;
  overflow:hidden;
  border-bottom: 1px solid oklch(0.70 0.105 80 / .35);
}
/* candlelight */
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: radial-gradient(60% 60% at 50% 12%, oklch(0.70 0.105 80 / .14), transparent 70%);
}
/* gold double frame */
header::after{
  content:"";position:absolute; inset:14px;
  border:1px solid oklch(0.70 0.105 80 / .28);
  box-shadow: inset 0 0 0 4px oklch(0.16 0.04 290 / .0), inset 0 0 0 5px oklch(0.70 0.105 80 / .12);
  pointer-events:none;
}
header > *{ position:relative; z-index:1; }

.crest{
  display:inline-flex; align-items:center; justify-content:center;
  width:62px;height:62px;margin:0 auto 18px;
  border:1.5px solid oklch(0.70 0.105 80 / .6);
  border-radius:50%;
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em;
  color: var(--gold);
  background: radial-gradient(circle at 50% 30%, oklch(0.30 0.05 286), oklch(0.16 0.04 290));
  box-shadow: 0 0 0 4px oklch(0.70 0.105 80 / .10), inset 0 1px 0 oklch(1 0 0 / .08);
}
.crest small{ font-size:.62em; letter-spacing:.06em; }

header h1{
  font-family:var(--display);
  font-weight:600;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height:1.05;
  letter-spacing:.005em;
  margin:0 0 .35em;
  text-wrap:balance;
}
header h1 i{ color: var(--gold); font-style:italic; font-weight:500; }
header p{
  margin:.25em auto;
  max-width:46ch;
  color: oklch(0.86 0.03 86 / .92);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
header p.tagline{
  font-style:italic;
  color: oklch(0.80 0.06 84);
}
.ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:18px auto 6px; color: oklch(0.70 0.105 80 / .8);
  font-size:1rem; letter-spacing:.5em;
}
.ornament::before,.ornament::after{
  content:""; height:1px; width:min(120px, 22vw);
  background:linear-gradient(90deg, transparent, oklch(0.70 0.105 80 / .6));
}
.ornament::after{ background:linear-gradient(90deg, oklch(0.70 0.105 80 / .6), transparent); }

/* ===================== STICKY NAV ===================== */
nav{
  position:sticky; top:0; z-index:40;
  display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch;
  gap:5px; padding:7px 10px;
  background: oklch(0.165 0.042 290 / .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 oklch(0.70 0.105 80 / .28), 0 8px 22px -16px oklch(0 0 0 / .7);
  overflow-x:auto; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
nav::-webkit-scrollbar{ height:5px; }
nav::-webkit-scrollbar-thumb{ background: oklch(0.70 0.105 80 / .4); border-radius:4px; }
nav a{
  flex:0 0 auto;
  color: oklch(0.85 0.03 86);
  text-decoration:none;
  font-size:.84rem;
  letter-spacing:.02em;
  padding:8px 13px; border-radius:6px;
  white-space:nowrap;
  transition: background .15s, color .15s;
  position:relative;
}
nav a:hover{ background: oklch(1 0 0 / .07); color: oklch(0.95 0.02 88); }
/* home / back link pinned at the start of the nav */
nav a.nav-home{
  color: var(--gold);
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600;
  margin-right:4px; padding-left:11px;
  border-right:1px solid oklch(0.70 0.105 80 / .25);
  border-radius:6px 0 0 6px;
}
nav a.nav-home:hover{ background: oklch(0.70 0.105 80 / .14); color: var(--gold); }
nav a.nav-home .chev{ font-size:1.05em; line-height:1; }
nav a.is-active{ color: var(--gold); }
nav a.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  background: var(--gold); border-radius:2px;
}
/* progress rail under nav */
.progress-rail{
  position:sticky; top:0; z-index:39;
  height:3px; background: oklch(0.165 0.042 290 / .96);
}
.progress-rail > span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 8px oklch(0.70 0.105 80 / .6);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ===================== MAIN / LAYOUT ===================== */
main{ max-width:var(--maxw); margin:0 auto; padding: 26px 20px 10px; }

/* progress summary banner on course pages */
.studybar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--parch-2);
  border:1px solid var(--edge);
  border-radius:var(--radius-lg);
  padding:14px 18px; margin:22px 0 6px;
  box-shadow:var(--shadow);
}
.studybar .meter{ flex:1 1 220px; min-width:180px; }
.studybar .meter-track{
  height:9px; border-radius:6px; background:var(--parch-3);
  box-shadow: inset 0 1px 2px oklch(0.3 0.03 60 / .18); overflow:hidden;
}
.studybar .meter-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.studybar .meter-label{ font-size:.92rem; color:var(--ink-soft); margin-top:6px; }
.studybar .meter-label b{ color:var(--gold-ink); }
.studybar .who{
  font-family:var(--display); font-size:1.45rem; font-weight:600; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; white-space:nowrap; flex:0 0 auto;
}
.studybar .who-btn{
  font-family:var(--display); font-size:1.45rem; font-weight:600; color:var(--ink);
  background:none; border:none; cursor:pointer; padding:0; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; line-height:1.1;
}
.studybar .who-btn .pencil{ font-size:.62em; color:var(--gold-ink); opacity:.7; }
.studybar .who-btn:hover{ color:var(--gold-ink); }
.studybar .who .edit-name{
  font-family:var(--body); font-size:.8rem; color:var(--gold-ink); white-space:nowrap;
  background:none;border:none;cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  padding:0;
}
.studybar .reset{
  font-family:var(--body); font-size:.82rem; color:var(--ink-faint);
  background:none; border:1px solid var(--edge); border-radius:6px;
  padding:5px 11px; cursor:pointer;
}
.studybar .reset:hover{ color:var(--wine); border-color:var(--wine); }

/* ===================== LESSON CARDS ===================== */
.lesson{
  position:relative;
  background:var(--parch-2);
  border:1px solid var(--edge);
  border-radius:var(--radius-lg);
  padding: clamp(20px, 3.2vw, 36px);
  margin:26px 0;
  box-shadow:var(--shadow);
  scroll-margin-top:64px;
}
.lesson > h2{
  font-family:var(--display);
  font-weight:600;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height:1.12;
  color:var(--ink);
  margin:0 0 .5em;
  padding-bottom:.42em;
  border-bottom:1px solid var(--edge);
  position:relative;
  text-wrap:balance;
}
.lesson > h2::after{
  content:""; position:absolute; left:0; bottom:-1px; width:84px; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.lesson > h2 .sub{ display:block; }

/* illuminated lesson number badge (injected) */
.lesson-num{
  position:absolute; top:-18px; left: clamp(16px, 3vw, 30px);
  width:40px;height:40px; border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display); font-weight:600; font-size:1.25rem;
  color:var(--gold);
  background: radial-gradient(circle at 50% 30%, var(--midnight-3), var(--midnight-2));
  border:1.5px solid oklch(0.70 0.105 80 / .55);
  box-shadow: 0 4px 12px -4px oklch(0 0 0 / .4), 0 0 0 4px var(--parch);
}

h3{
  font-family:var(--display);
  font-weight:600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color:var(--gold-ink);
  margin:1.7em 0 .5em;
  padding-left:14px;
  border-left:3px solid var(--gold);
  line-height:1.2;
}
h4{ font-family:var(--body); font-weight:600; font-size:1.05rem; color:var(--ink); margin:1.2em 0 .35em; }
.sub{ color:var(--ink-faint); font-style:italic; font-size:.78em; font-weight:400; }
.lesson > p, .lesson li{ color:var(--ink-soft); }
.lesson > p{ max-width:68ch; }
ol li, ul li{ margin:5px 0; }

/* ===================== TABLES ===================== */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0; border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:.95rem; background:var(--parch-2); }
th,td{ border:1px solid var(--edge-soft); padding:9px 13px; text-align:left; vertical-align:top; }
th{
  background: oklch(0.86 0.035 78);
  color:var(--gold-ink);
  font-family:var(--body); font-weight:600;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
}
tr:nth-child(even) td{ background: oklch(0.945 0.02 86); }
td.en, .en{ font-weight:600; color:var(--ink); font-size:1.02em; }

/* ===================== QUOTE (marginalia) ===================== */
.quote{
  position:relative;
  background:var(--parch-3);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px 14px 22px;
  margin:14px 0;
  font-style:italic;
  font-size:1.06rem;
  color:var(--ink-soft);
}
.quote b{ color:var(--ink); font-style:normal; }

/* ===================== TIP (margin note) ===================== */
.tip{
  background: oklch(0.93 0.04 92);
  border:1px solid oklch(0.80 0.07 88);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:13px 16px; margin:16px 0;
  font-size:.97rem; color:var(--ink-soft);
}
.tip b{ color:var(--gold-ink); }

/* ===================== EXERCISE BLOCK ===================== */
.ex{
  background: oklch(0.955 0.014 88);
  border:1px solid var(--edge-soft);
  border-radius:var(--radius);
  padding:15px 17px; margin:14px 0;
}
.ex .q, .ex .clip-label{ font-weight:600; color:var(--ink); }
.ex .q{ display:block; margin-bottom:2px; }
.clip-label{ color:var(--gold-ink); font-weight:600; }

/* ===================== REVEAL (answers) ===================== */
details{
  margin:12px 0 2px;
  border-radius:var(--radius);
}
details summary{
  display:inline-flex; align-items:center; gap:9px;
  cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.92rem;
  color:var(--gold-ink);
  background:var(--parch-2);
  border:1px solid var(--gold-deep);
  border-radius:999px;
  padding:7px 16px 7px 14px;
  list-style:none;
  user-select:none;
  white-space:nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
  width:max-content; max-width:100%;
}
details summary::-webkit-details-marker{ display:none; }
details summary::before{
  content:""; width:9px;height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s ease;
  margin-bottom:2px;
}
details[open] summary{ background: var(--gold-deep); color: oklch(0.97 0.02 88); border-color:var(--gold-deep); }
details[open] summary::before{ transform: rotate(45deg); margin-bottom:0; margin-top:-2px; }
details summary:hover{ box-shadow:0 2px 10px -4px oklch(0.70 0.105 80 / .8); }
/* animated reveal */
@media (prefers-reduced-motion: no-preference){
  details[open] .ans{ animation: ansIn .34s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes ansIn{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }
.ans{
  margin-top:10px;
  background: linear-gradient(180deg, oklch(0.90 0.03 86), var(--parch-3));
  border:1px solid var(--edge);
  border-top:2px solid var(--gold);
  border-radius:var(--radius);
  padding:13px 16px;
  color:var(--ink-soft);
  font-size:.98rem;
}
.ans b{ color:var(--ink); }
.ans .sub{ display:block; margin-top:4px; }

/* ===================== CUSTOM AUDIO PLAYER ===================== */
audio{ display:none; }
.player{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: linear-gradient(160deg, var(--midnight) 0%, var(--midnight-2) 100%);
  border:1px solid oklch(0.70 0.105 80 / .3);
  border-radius:var(--radius-lg);
  padding:11px 14px; margin:10px 0 12px;
  box-shadow: var(--shadow), inset 0 1px 0 oklch(1 0 0 / .06);
  color: oklch(0.9 0.02 88);
}
.player .pp{
  flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid oklch(0.70 0.105 80 / .55);
  background: radial-gradient(circle at 50% 35%, var(--midnight-3), var(--midnight-2));
  color:var(--gold); cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition: transform .1s, box-shadow .15s, background .15s;
}
.player .pp:hover{ box-shadow:0 0 0 4px oklch(0.70 0.105 80 / .14); }
.player .pp:active{ transform:scale(.94); }
.player .pp svg{ width:18px;height:18px;fill:currentColor; }
.player .mid{ flex:1 1 200px; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.player .seek{
  position:relative; height:8px; border-radius:5px; cursor:pointer;
  background: oklch(0.12 0.03 290);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / .5);
}
.player .seek .buf, .player .seek .played{
  position:absolute; left:0;top:0;bottom:0; border-radius:5px;
}
.player .seek .buf{ background: oklch(0.4 0.04 286 / .6); width:0; }
.player .seek .played{
  background:linear-gradient(90deg, var(--gold-deep), var(--gold)); width:0;
  box-shadow:0 0 8px oklch(0.70 0.105 80 / .5);
}
.player .seek .knob{
  position:absolute; top:50%; left:0; width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%); background:var(--gold);
  box-shadow:0 0 0 3px oklch(0.16 0.04 290), 0 2px 4px oklch(0 0 0 / .5);
  opacity:0; transition:opacity .15s;
}
.player .seek:hover .knob, .player.is-playing .seek .knob{ opacity:1; }
.player .row2{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.player .time{ font-family:var(--mono); font-size:.72rem; color: oklch(0.78 0.04 86); letter-spacing:.02em; }
.player .tools{ display:flex; align-items:center; gap:6px; }
.player .tbtn{
  font-family:var(--body); font-size:.76rem; font-weight:600;
  color: oklch(0.82 0.04 86);
  background: oklch(0.3 0.05 286 / .5);
  border:1px solid oklch(0.70 0.105 80 / .25);
  border-radius:6px; padding:4px 9px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
  transition: background .15s, color .15s, border-color .15s;
}
.player .tbtn:hover{ color:var(--gold); border-color: oklch(0.70 0.105 80 / .6); }
.player .tbtn.rate{ min-width:46px; justify-content:center; }
.player .tbtn svg{ width:13px;height:13px;fill:currentColor; }

/* ===================== DONE / COMPLETE TOGGLE ===================== */
.done-toggle{
  position:absolute; top: clamp(18px, 3vw, 30px); right: clamp(16px, 3vw, 30px);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-size:.8rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-faint);
  background:var(--parch);
  border:1px solid var(--edge);
  border-radius:999px;
  padding:6px 14px 6px 9px; cursor:pointer;
  transition: all .18s;
}
.done-toggle .seal{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--edge);
  display:flex;align-items:center;justify-content:center;
  background:var(--parch-2);
  transition: all .2s;
}
.done-toggle .seal svg{ width:13px;height:13px;fill:none;stroke:var(--ink-faint);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round; opacity:0; transform:scale(.5); transition:.2s; }
.done-toggle:hover{ border-color:var(--gold-deep); color:var(--gold-ink); }
.done-toggle:hover .seal{ border-color:var(--gold-deep); }
.lesson.is-done .done-toggle{ color: oklch(0.97 0.02 88); background:var(--gold-deep); border-color:var(--gold-deep); }
.lesson.is-done .done-toggle .seal{ background: oklch(0.97 0.02 88); border-color: oklch(0.97 0.02 88); }
.lesson.is-done .done-toggle .seal svg{ opacity:1; transform:scale(1); stroke:var(--gold-deep); }
.lesson.is-done{ border-color: oklch(0.70 0.105 80 / .5); }
.lesson.is-done > h2{ }
.lesson.is-done .lesson-num{
  background: radial-gradient(circle at 50% 30%, var(--gold), var(--gold-deep));
  color: oklch(0.2 0.04 290); border-color:var(--gold);
}

/* ===================== CODE / PATH ===================== */
code, .path{
  font-family:var(--mono); font-size:.84em;
  background: oklch(0.88 0.03 84);
  color:var(--gold-ink);
  padding:1px 6px; border-radius:5px;
}

/* ===================== COLUMNS ===================== */
.two{ column-count:2; column-gap:26px; }
.two li{ break-inside:avoid; }
@media(max-width:640px){ .two{ column-count:1; } }

/* ===================== FOOTER (colophon) ===================== */
footer{
  text-align:center; color:var(--ink-faint);
  padding:40px 22px 56px; font-size:.92rem;
  margin-top:30px;
  border-top:1px solid var(--edge);
  background: oklch(0.90 0.026 82 / .5);
}
footer::before{
  content:"✦"; display:block; color:var(--gold); font-size:1.1rem; margin-bottom:10px; opacity:.7;
}

/* ===================== HOME PAGE ===================== */
body[data-page="home"] main{ max-width:980px; }
.lead{
  font-size:1.18rem; line-height:1.7; color:var(--ink-soft);
  max-width:64ch; margin:8px auto 4px; text-align:center;
}
.home-greet{
  text-align:center; margin:26px auto 6px; font-family:var(--display);
  font-size:1.5rem; color:var(--ink);
}
.home-greet .edit-name{
  font-family:var(--body); font-size:.82rem; color:var(--gold-ink); white-space:nowrap;
  background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.overall{
  max-width:560px; margin:14px auto 4px; text-align:center;
}
.overall .meter-track{
  height:10px;border-radius:6px;background:var(--parch-3);
  box-shadow:inset 0 1px 2px oklch(0.3 0.03 60 / .18); overflow:hidden;
}
.overall .meter-fill{ display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .6s; }
.overall .meter-label{ font-size:.95rem;color:var(--ink-soft);margin-top:8px; }
.overall .meter-label b{ color:var(--gold-ink); }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:30px 0; }
@media(max-width:680px){ .grid{ grid-template-columns:1fr; } }
.card{
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:inherit;
  background:var(--parch-2);
  border:1px solid var(--edge);
  border-left:4px solid var(--gold);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  box-shadow:var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; right:-30px; top:-30px; width:120px;height:120px;
  background: radial-gradient(circle, oklch(0.70 0.105 80 / .12), transparent 70%);
  pointer-events:none;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-left-color:var(--gold-deep); }
.card .lvl{
  font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink);
  display:flex; align-items:center; gap:9px;
}
.card .lvl .dot{ width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px oklch(0.70 0.105 80 / .2); }
.card h2{ font-family:var(--display); font-weight:600; font-size:1.7rem; margin:2px 0 0; color:var(--ink); line-height:1.1; }
.card p{ margin:6px 0 0; font-size:.96rem; color:var(--ink-soft); }
.card .card-progress{ margin-top:14px; display:flex; align-items:center; gap:10px; }
.card .card-progress .meter-track{
  flex:1; height:7px; border-radius:5px; background:var(--parch-3);
  box-shadow:inset 0 1px 2px oklch(0.3 0.03 60 / .18); overflow:hidden;
}
.card .card-progress .meter-fill{ display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .6s; }
.card .card-progress .pct{ font-family:var(--mono); font-size:.74rem; color:var(--gold-ink); white-space:nowrap; }
.card.span-2{ grid-column:1/-1; }

/* override old inline color classes from source */
.a1,.a2,.b1,.b2,.n5{ background:var(--parch-2); }

.files{
  background:var(--parch-2);
  border:1px solid var(--edge);
  border-radius:var(--radius-lg);
  padding:20px 26px; margin-top:26px;
  box-shadow:var(--shadow);
}
.files h3{ border-left:none; padding-left:0; margin-top:0; }
.files ul{ margin:0; padding-left:18px; }
.files a{ color:var(--gold-ink); }

/* ===================== UTIL ===================== */
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* back to top */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px;height:48px; border-radius:50%;
  border:1.5px solid oklch(0.70 0.105 80 / .5);
  background: radial-gradient(circle at 50% 30%, var(--midnight-3), var(--midnight-2));
  color:var(--gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lift);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition: opacity .25s, transform .25s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ box-shadow: var(--shadow-lift), 0 0 0 5px oklch(0.70 0.105 80 / .14); }
.to-top svg{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }

/* footer home link */
footer .foot-home{
  display:inline-block; margin-top:8px; color:var(--gold-ink);
  font-size:.95rem; text-decoration:none;
}
footer .foot-home:hover{ color:var(--wine); }
footer .foot-nav{ margin-top:6px; }
footer .colophon{ margin-top:14px; font-style:italic; font-size:.9rem; color:var(--gold-ink); opacity:.85; }
footer .colophon i{ font-style:italic; }

@media(max-width:560px){
  body{ font-size:18px; }
  .lesson{ padding:22px 16px; }
  table{ font-size:.9rem; }
  th,td{ padding:7px 9px; }
  /* study bar: action buttons take the full row & share it, so they never overflow narrow phones */
  .studybar .actions{ flex-basis:100%; }
  .studybar .actions .sb-btn{ flex:1 1 auto; justify-content:center; }
  /* completion toggle: flow above the title (no longer absolute) so it never overlaps it on mobile */
  .done-toggle{ position:static; display:flex; width:max-content; max-width:100%; margin:0 0 14px auto; }
  .lesson > h2{ margin-top:0; }
}

/* ============================================================
   EFFECTS & MOTION  (all decorative motion gated below)
   ============================================================ */

/* vocab row hover highlight */
@media(hover:hover){
  tbody tr:hover td, table tr:hover td{ background: oklch(0.90 0.045 84) !important; }
}
.lesson, .card, .ex, .player, .quote, .tip{ }

/* audio: animated equalizer + shimmer on the played bar */
.player .eq{
  display:none; align-items:flex-end; gap:2px; height:18px; width:0;
  flex:0 0 auto; overflow:hidden; transition:width .25s;
}
.player.is-playing .eq{ display:flex; width:22px; margin-left:-2px; }
.player .eq i{ width:3px; background:var(--gold); border-radius:2px; height:30%; opacity:.85; }

@media (prefers-reduced-motion: no-preference){
  /* header candlelight flicker */
  header::before{ animation: flicker 7s ease-in-out infinite; }
  @keyframes flicker{
    0%,100%{ opacity:1; }
    42%{ opacity:.82; }
    50%{ opacity:.95; }
    66%{ opacity:.78; }
    78%{ opacity:.9; }
  }

  /* drifting gold embers in the header */
  .mote{
    position:absolute; bottom:-8px; width:3px; height:3px; border-radius:50%;
    background: radial-gradient(circle, oklch(0.82 0.12 84), oklch(0.7 0.1 78 / 0));
    left: var(--x); opacity:0; pointer-events:none; z-index:0;
    animation: floatMote var(--dur) linear var(--delay) infinite;
  }
  @keyframes floatMote{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    12%{ opacity:.7; }
    70%{ opacity:.5; }
    100%{ transform:translateY(calc(-1 * var(--rise))) translateX(var(--drift)); opacity:0; }
  }

  /* crest gentle float + shimmer sweep */
  .crest{ animation: crestFloat 6s ease-in-out infinite; overflow:hidden; }
  .crest::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background: linear-gradient(115deg, transparent 35%, oklch(0.92 0.1 88 / .35) 50%, transparent 65%);
    transform: translateX(-120%); animation: crestShimmer 5.5s ease-in-out infinite;
  }
  @keyframes crestFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  @keyframes crestShimmer{ 0%,72%{ transform:translateX(-120%); } 86%,100%{ transform:translateX(120%); } }

  /* lesson-number badge subtle pulse on completed */
  .lesson.is-done .lesson-num{ animation: numPop .45s cubic-bezier(.3,1.4,.5,1) both; }
  @keyframes numPop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

  /* equalizer bars */
  .player.is-playing .eq i{ animation: eqBar .9s ease-in-out infinite; }
  .player .eq i:nth-child(1){ animation-delay:0s; }
  .player .eq i:nth-child(2){ animation-delay:.25s; }
  .player .eq i:nth-child(3){ animation-delay:.5s; }
  .player .eq i:nth-child(4){ animation-delay:.15s; }
  @keyframes eqBar{ 0%,100%{ height:25%; } 50%{ height:95%; } }

  /* shimmer travelling along the played portion while playing */
  .player.is-playing .seek .played{
    background-image: linear-gradient(90deg, var(--gold-deep), var(--gold), oklch(0.92 0.1 88), var(--gold), var(--gold-deep));
    background-size: 220% 100%;
    animation: playedShimmer 2.4s linear infinite;
  }
  @keyframes playedShimmer{ from{ background-position: 120% 0; } to{ background-position: -120% 0; } }

  /* scroll reveal (added by JS) */
  body.js-reveal .reveal{ opacity:0; transform: translateY(20px); }
  body.js-reveal .reveal.in{ opacity:1; transform:none;
    transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }

  /* sparkle burst on completing a lesson */
  .spark{
    position:absolute; width:7px; height:7px; pointer-events:none; z-index:5;
    color:var(--gold);
    background: radial-gradient(circle, currentColor 0 40%, transparent 60%);
    animation: sparkFly .7s ease-out forwards;
  }
  @keyframes sparkFly{
    0%{ transform: translate(0,0) scale(.4); opacity:1; }
    100%{ transform: translate(var(--sx), var(--sy)) scale(1); opacity:0; }
  }

  /* to-top gentle idle */
  .to-top.show{ animation: toTopIn .3s ease both; }
  @keyframes toTopIn{ from{ opacity:0; transform: translateY(12px) scale(.9); } to{ opacity:1; transform:none; } }
}

/* count-up shouldn't cause layout shift */
.meter-label, .pct, .overall .meter-label{ font-variant-numeric: tabular-nums; }

/* ============================================================
   NOX — night reading theme (data-theme="nox" on <html>)
   ============================================================ */
[data-theme="nox"]{
  --ink:        oklch(0.89 0.018 85);
  --ink-soft:   oklch(0.76 0.020 82);
  --ink-faint:  oklch(0.62 0.020 80);
  --parch:      oklch(0.205 0.014 60);
  --parch-2:    oklch(0.248 0.016 62);
  --parch-3:    oklch(0.300 0.020 64);
  --edge:       oklch(0.40 0.020 70);
  --edge-soft:  oklch(0.34 0.018 66);
  --gold:       oklch(0.76 0.110 82);
  --gold-deep:  oklch(0.62 0.100 76);
  --gold-ink:   oklch(0.81 0.100 82);
  --shadow: 0 1px 2px oklch(0 0 0 / .35), 0 12px 34px -16px oklch(0 0 0 / .7);
  --shadow-lift: 0 2px 6px oklch(0 0 0 / .45), 0 24px 52px -22px oklch(0 0 0 / .8);
}
[data-theme="nox"] body{
  background-color: var(--parch);
  background-image:
    radial-gradient(120% 80% at 50% -10%, oklch(0.30 0.03 70 / .7), transparent 55%),
    radial-gradient(140% 120% at 100% 0%, oklch(0.26 0.04 285 / .55), transparent 60%),
    radial-gradient(130% 120% at 0% 100%, oklch(0.23 0.025 60 / .6), transparent 55%);
}
[data-theme="nox"] body::before{ opacity:.25; }
[data-theme="nox"] th{ background: oklch(0.32 0.030 72); color: var(--gold-ink); }
[data-theme="nox"] tr:nth-child(even) td{ background: oklch(0.225 0.015 62); }
[data-theme="nox"] .tip{ background: oklch(0.30 0.035 90 / .30); border-color: oklch(0.50 0.06 85 / .5); }
[data-theme="nox"] .ex{ background: oklch(0.225 0.015 62); }
[data-theme="nox"] .ans{ background: linear-gradient(180deg, oklch(0.295 0.020 64), oklch(0.255 0.018 62)); }
[data-theme="nox"] code, [data-theme="nox"] .path{ background: oklch(0.32 0.030 72); color: var(--gold-ink); }
[data-theme="nox"] details summary{ background: var(--parch-3); }
[data-theme="nox"] footer{ background: oklch(0.17 0.012 60 / .6); }
[data-theme="nox"] .studybar .meter-track,
[data-theme="nox"] .overall .meter-track,
[data-theme="nox"] .card .meter-track{ background: oklch(0.16 0.010 60); }
@media(hover:hover){
  [data-theme="nox"] table tr:hover td{ background: oklch(0.33 0.030 84) !important; }
}

/* ============================================================
   HEADER CONTROLS (theme toggle)
   ============================================================ */
.hdr-controls{
  position:absolute; top:16px; right:18px; z-index:3;
  display:flex; gap:8px;
}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid oklch(0.70 0.105 80 / .45);
  background: oklch(0.30 0.05 286 / .55);
  color: var(--gold);
  cursor:pointer; display:flex;align-items:center;justify-content:center;
  font-size:1.15rem; line-height:1;
  transition: background .15s, box-shadow .15s, transform .1s;
  backdrop-filter: blur(4px);
}
.icon-btn:hover{ background: oklch(0.70 0.105 80 / .2); box-shadow:0 0 0 4px oklch(0.70 0.105 80 / .12); }
.icon-btn:active{ transform:scale(.93); }

/* ============================================================
   STUDYBAR ACTION BUTTONS
   ============================================================ */
.studybar .actions{ display:flex; gap:8px; flex-wrap:wrap; flex:0 1 auto; min-width:0; }
.sb-btn{
  font-family:var(--body); font-size:.86rem; font-weight:600;
  border-radius:999px; padding:7px 15px; cursor:pointer; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition: all .15s;
}
.sb-btn.primary{
  color: oklch(0.97 0.02 88); background: var(--gold-deep);
  border:1px solid var(--gold-deep);
}
.sb-btn.primary:hover{ box-shadow:0 3px 12px -4px oklch(0.70 0.105 80 / .9); }
.sb-btn.ghost{
  color: var(--gold-ink); background: var(--parch);
  border:1px solid var(--edge);
}
.sb-btn.ghost:hover{ border-color: var(--gold-deep); }
.sb-btn .badge{
  background: oklch(0.70 0.105 80 / .25); color:inherit;
  border-radius:999px; padding:0 7px; font-size:.78em; font-variant-numeric:tabular-nums;
}

/* ============================================================
   HOME — resume link on cards
   ============================================================ */
.card .resume{
  margin-top:12px; font-size:.86rem; font-weight:600; color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:6px;
}
.card .resume .arrow{ transition: transform .15s; }
.card:hover .resume .arrow{ transform: translateX(3px); }
.card .resume.complete{ color: var(--emerald); }
[data-theme="nox"] .card .resume.complete{ color: oklch(0.74 0.10 152); }

/* ============================================================
   FLASHCARDS — revision overlay
   ============================================================ */
.fc-overlay{
  position:fixed; inset:0; z-index:120; display:none;
  flex-direction:column;
  background: oklch(0.14 0.025 287 / .92);
  backdrop-filter: blur(7px);
  color: oklch(0.92 0.02 88);
}
.fc-overlay.open{ display:flex; }
.fc-top{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-bottom:1px solid oklch(0.70 0.105 80 / .25);
}
.fc-top .fc-title{ font-family:var(--display); font-size:1.4rem; font-weight:600; color:var(--gold); }
.fc-top .fc-count{ font-family:var(--mono); font-size:.85rem; color: oklch(0.8 0.04 86); }
.fc-top .fc-spacer{ flex:1; }
.fc-top .fc-x{
  width:40px;height:40px;border-radius:50%; cursor:pointer;
  border:1.5px solid oklch(0.70 0.105 80 / .4); background:transparent; color:var(--gold);
  font-size:1.2rem; line-height:1; display:flex;align-items:center;justify-content:center;
}
.fc-top .fc-x:hover{ background: oklch(0.70 0.105 80 / .15); }
.fc-prog{ height:4px; background: oklch(0.12 0.03 290); }
.fc-prog > span{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .35s; }

.fc-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 20px; }
.fc-card{
  width:min(560px, 92vw); height:min(340px, 52vh);
  perspective:1400px; cursor:pointer; background:none; border:none; padding:0;
}
.fc-inner{
  position:relative; width:100%; height:100%;
  transition: transform .5s cubic-bezier(.3,.7,.3,1);
  transform-style: preserve-3d;
}
.fc-card.flipped .fc-inner{ transform: rotateY(180deg); }
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border-radius:var(--radius-lg); padding:30px; text-align:center;
  background: linear-gradient(165deg, oklch(0.97 0.018 88), oklch(0.92 0.03 84));
  color: var(--ink);
  border:1px solid oklch(0.70 0.105 80 / .4);
  box-shadow: 0 24px 60px -24px oklch(0 0 0 / .8), inset 0 1px 0 oklch(1 0 0 / .5);
}
.fc-face .fc-tag{ font-family:var(--body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); }
.fc-face .fc-word{ font-family:var(--display); font-weight:600; font-size: clamp(1.9rem, 6vw, 3rem); line-height:1.1; color:var(--ink); text-wrap:balance; }
.fc-face .fc-hint{ font-size:.85rem; color:var(--ink-faint); font-style:italic; }
.fc-back{ transform: rotateY(180deg);
  background: linear-gradient(165deg, oklch(0.30 0.05 286), oklch(0.22 0.04 290)); }
.fc-back .fc-word{ color: oklch(0.95 0.03 88); }
.fc-back .fc-tag{ color: var(--gold); }
.fc-back .fc-hint{ color: oklch(0.8 0.04 86); }

.fc-controls{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:18px 20px 26px;
}
.fc-controls .fc-act{
  font-family:var(--body); font-size:1rem; font-weight:600;
  border-radius:999px; padding:12px 22px; cursor:pointer; min-width:150px;
  border:1.5px solid; display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition: all .15s;
}
.fc-act.review{ color: oklch(0.84 0.09 50); background: oklch(0.40 0.08 45 / .35); border-color: oklch(0.6 0.1 50 / .6); }
.fc-act.review:hover{ background: oklch(0.45 0.1 45 / .5); }
.fc-act.known{ color: oklch(0.88 0.1 150); background: oklch(0.38 0.08 152 / .35); border-color: oklch(0.55 0.09 152 / .6); }
.fc-act.known:hover{ background: oklch(0.42 0.1 152 / .5); }
.fc-tools{ display:flex; gap:18px; justify-content:center; padding:0 20px 22px; flex-wrap:wrap; }
.fc-tools button{
  font-family:var(--body); font-size:.86rem; color: oklch(0.82 0.04 86);
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color: oklch(0.70 0.105 80 / .5);
}
.fc-tools button:hover{ color: var(--gold); }
.fc-tools button[aria-pressed="true"]{ color: var(--gold); }
.fc-done{
  text-align:center; padding:40px 24px; max-width:520px; margin:auto;
}
.fc-done .fc-done-mark{ font-size:3rem; color:var(--gold); }
.fc-done h3{ font-family:var(--display); color: oklch(0.95 0.03 88); border:none; padding:0; font-size:2rem; margin:.3em 0; }
.fc-done p{ color: oklch(0.82 0.04 86); }
.fc-empty{ text-align:center; color: oklch(0.82 0.04 86); padding:50px 24px; }

@media(max-width:560px){
  .hdr-controls{ top:12px; right:12px; }
  .fc-controls .fc-act{ min-width:130px; flex:1; }
}

/* ============================================================
   MORE MAGIC — stars, wand-trail, flourishes, theme flash
   ============================================================ */
.fc-done{ position:relative; }

/* richer hover aura on cards & flashcard faces */
.card:hover{ box-shadow: var(--shadow-lift), 0 0 0 1px oklch(0.70 0.105 80 / .35), 0 0 46px -12px oklch(0.70 0.105 80 / .55); }

@media (prefers-reduced-motion: no-preference){
  /* twinkling night sky in headers */
  .star{
    position:absolute; z-index:0; border-radius:50%;
    background: radial-gradient(circle, oklch(0.97 0.04 90), oklch(0.85 0.08 84 / 0));
    opacity:0; pointer-events:none;
    animation: twinkle var(--tdur) ease-in-out var(--tdelay) infinite;
  }
  @keyframes twinkle{
    0%,100%{ opacity:0; transform:scale(.5); }
    45%{ opacity:.9; transform:scale(1); }
    70%{ opacity:.35; transform:scale(.85); }
  }

  /* wand-sparkle cursor trail */
  .cursor-spark{
    position:fixed; width:7px; height:7px; border-radius:50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, oklch(0.92 0.11 86), oklch(0.7 0.1 80 / 0) 70%);
    pointer-events:none; z-index:9999; will-change: transform, opacity;
    animation: cspark .72s ease-out forwards;
  }
  @keyframes cspark{
    0%{ opacity:.95; transform: translate(-50%,-50%) scale(1); }
    100%{ opacity:0; transform: translate(calc(-50% + var(--cd, 0px)), calc(-50% + 14px)) scale(.2); }
  }

  /* theme switch — candle flash + button spin */
  .theme-flash{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0; animation: themeFlash .6s ease-out forwards; }
  @keyframes themeFlash{ 0%{ opacity:0; } 22%{ opacity:.85; } 100%{ opacity:0; } }
  .icon-btn.spin{ animation: btnSpin .6s cubic-bezier(.3,.8,.3,1); }
  @keyframes btnSpin{ 0%{ transform: rotate(0) scale(1); } 55%{ transform: rotate(200deg) scale(1.15); } 100%{ transform: rotate(360deg) scale(1); } }

  /* "spell accomplished" floating flourish on lesson completion */
  .flourish-text{
    position:absolute; top: clamp(14px, 3vw, 26px); right: clamp(16px, 3vw, 30px);
    font-family:var(--display); font-weight:600; font-size:1.2rem; white-space:nowrap;
    color: var(--gold-ink); pointer-events:none; z-index:6;
    text-shadow: 0 1px 8px oklch(0.70 0.105 80 / .5);
    animation: floatUp 1.2s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes floatUp{
    0%{ opacity:0; transform: translateY(6px) scale(.85); }
    25%{ opacity:1; transform: translateY(-4px) scale(1); }
    100%{ opacity:0; transform: translateY(-40px) scale(1); }
  }
}