/* I Learn Chinese — thema's (7: 4 helder + 3 donker) */
:root{
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

/* 1 — Licht */
:root, [data-theme="licht"]{
  --bg:#faf8f5; --fg:#1d1a17; --muted:#7f756b; --line:#eae3db;
  --card:#ffffff; --accent:#c13b2e; --accent-soft:#f6e7e3;
  --t1:#c0392b; --t2:#d97a1f; --t3:#1f8a4c; --t4:#2474a8; --t5:#9aa0a6;
  --shadow:0 20px 50px -24px rgba(60,40,30,.28);
}
/* 6 — Kersenbloesem */
[data-theme="kersen"]{
  --bg:#fdf4f5; --fg:#2c1c22; --muted:#8d7078; --line:#f2dfe3;
  --card:#ffffff; --accent:#c94a72; --accent-soft:#fbe4ea;
  --t1:#c0392b; --t2:#d0791f; --t3:#1f8a4c; --t4:#4a6fb5; --t5:#a89499;
  --shadow:0 20px 50px -24px rgba(120,50,70,.22);
}
/* 8 — Nacht */
[data-theme="nacht"]{
  --bg:#0f1420; --fg:#e8edf6; --muted:#7f8aa0; --line:#232c3d;
  --card:#161d2b; --accent:#6ea8fe; --accent-soft:#1b2740;
  --t1:#ef7a6b; --t2:#e8a44a; --t3:#58c48a; --t4:#6ea8fe; --t5:#8b95a8;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
}
/* 10 — Aubergine */
[data-theme="aubergine"]{
  --bg:#15111c; --fg:#eee8f6; --muted:#8b7f9c; --line:#2a2336;
  --card:#1d1727; --accent:#b98cf0; --accent-soft:#2a2038;
  --t1:#ef7a7a; --t2:#e0a24f; --t3:#62c48c; --t4:#7fa8f0; --t5:#928aa4;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
}

/* 11 — Mist */
[data-theme="mist"]{
  --bg:#f5f6f8; --fg:#1b1e24; --muted:#767d8a; --line:#e3e6ec;
  --card:#ffffff; --accent:#4a6fa5; --accent-soft:#e8eef7;
  --t1:#c0392b; --t2:#d97a1f; --t3:#1f8a4c; --t4:#2474a8; --t5:#9aa0a6;
  --shadow:0 20px 50px -24px rgba(50,60,80,.24);
}
/* 15 — Lavendel */
[data-theme="lavendel"]{
  --bg:#f7f5fd; --fg:#221c33; --muted:#7c7492; --line:#e7e2f5;
  --card:#ffffff; --accent:#7159c9; --accent-soft:#ece7fa;
  --t1:#c0392b; --t2:#d0791f; --t3:#1f8a4c; --t4:#3a5fc0; --t5:#9791a8;
  --shadow:0 20px 50px -24px rgba(70,60,120,.24);
}
/* 20 — Robijn */
[data-theme="robijn"]{
  --bg:#180f12; --fg:#f6e8ec; --muted:#9c8189; --line:#2e1f24;
  --card:#20151a; --accent:#e8698c; --accent-soft:#331d24;
  --t1:#ef7a7a; --t2:#e0a24f; --t3:#62c48c; --t4:#7fa8f0; --t5:#9c8a90;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* Het hidden-attribuut moet altijd winnen: zonder !important overschrijft een
   eigen regel als `main{display:flex}` de display:none van de browser, en dan
   blijft een "verborgen" element gewoon staan. */
[hidden]{display:none !important}
/* max-width/overflow-x: vangnet tegen horizontale overflow op mobiel.
   text-size-adjust: WebKit (Safari én Chrome op iOS) mag de tekst niet
   zelf opblazen, want dan wordt de layout breder dan het scherm. */
html,body{height:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter",
    "Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
    "Noto Sans CJK SC",sans-serif; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; overflow:hidden; user-select:none;
}
.zh-font{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
button{font:inherit; color:inherit; cursor:pointer}

/* toonkleuren */
.t1{color:var(--t1)} .t2{color:var(--t2)} .t3{color:var(--t3)} .t4{color:var(--t4)} .t5{color:var(--t5)}
body.no-tone .t1,body.no-tone .t2,body.no-tone .t3,body.no-tone .t4,body.no-tone .t5{color:var(--muted)}
/* Chinese karakters krijgen dezelfde toonkleur; zonder toonkleuren gewoon de tekstkleur */
body.no-tone .char.t1,body.no-tone .char.t2,body.no-tone .char.t3,
body.no-tone .char.t4,body.no-tone .char.t5{color:var(--fg)}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:calc(12px + var(--sat)) calc(14px + var(--sar)) 10px calc(14px + var(--sal));
  background:var(--bg); border-bottom:1px solid var(--line);
}
.lesson-select{
  flex:1; min-width:0; font:inherit; font-size:13.5px; font-weight:600; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 10px; min-height:38px;
  max-width:100%; cursor:pointer;
}
.icon-btn{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); display:grid; place-items:center; transition:.16s; flex:0 0 auto;
}
.icon-btn svg{width:19px; height:19px; fill:currentColor}
.icon-btn.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- focus ----------
   De browser tekent een dikke zwarte ring om een <select> zodra je hem aanraakt, en
   die blijft staan nadat je een les hebt gekozen. Chrome rekent een muisklik op een
   select óók tot "toetsenbordgebruik" (:focus-visible is dan waar), dus een ring die
   alleen bij Tab verschijnt is daar niet te maken. Daarom krijgt de leskeuzelijst
   helemaal geen aanduiding: met en zonder focus ziet hij er hetzelfde uit.
   De knoppen ernaast houden hun ring wél — daar geeft een muisklik géén
   :focus-visible (gemeten), dus die ring verschijnt alleen bij toetsenbordnavigatie. */
.lesson-select:focus{outline:none}
.icon-btn:focus,
.nav:focus,
.play-btn:focus,
.theme-chip:focus,
.seg button:focus{outline:none}
.icon-btn:focus-visible,
.nav:focus-visible,
.play-btn:focus-visible,
.theme-chip:focus-visible,
.seg button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- zoeken ---------- */
.search-row{
  /* --topbar-h wordt door app.js gezet (echte hoogte van de sticky header) */
  position:sticky; top:var(--topbar-h, calc(61px + var(--sat))); z-index:15; background:var(--bg);
  padding:10px calc(14px + var(--sar)) 10px calc(14px + var(--sal)); border-bottom:1px solid var(--line);
  max-width:100%; box-sizing:border-box;
}
.search-bar{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 12px; min-height:42px; max-width:100%}
.search-bar svg{width:18px; height:18px; fill:var(--muted); flex:0 0 auto}
/* 16px: anders zoomt iOS Safari in zodra je het veld aanklikt (en dan valt de
   rechterkant buiten beeld) */
.search-bar input{flex:1; border:none; background:transparent; font:inherit; font-size:16px; color:var(--fg); outline:none; min-width:0; width:100%}
.search-bar input::placeholder{color:var(--muted)}
.search-bar .count{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto}

.notice{max-width:640px; margin:12px auto 0; padding:10px 14px; font-size:13px; color:var(--accent); background:var(--accent-soft); border-radius:12px}
.notice[hidden]{display:none}

/* ---------- focus-kaart ---------- */
main{flex:1; display:flex; flex-direction:column; align-items:center; padding:6px 22px 8px; min-height:0; overflow-y:auto}
.card{
  width:100%; max-width:560px; text-align:center; padding:44px 28px 40px; cursor:pointer; margin-top:auto;
  background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
  transition:transform .16s ease;
}
.card:active{transform:scale(.985)}
.front{display:block}
/* "eerst de vertaling": de vertaling staat dan groot op de voorkant */
.front .nl{font-size:clamp(28px, 7vw, 40px); font-weight:700; line-height:1.35; margin:0; letter-spacing:-.01em; word-break:break-word}
.zh{font-size:clamp(34px, 8.5vw, 52px); font-weight:700; line-height:1.32; letter-spacing:.02em; margin:0 0 6px; word-break:break-word}
/* het Chinees staat ná het tikken in de uitgeklapte kaart: iets kleiner */
.reveal .zh{font-size:clamp(26px, 6.5vw, 36px); margin:0 0 2px}
.py{font-size:clamp(16px, 4vw, 20px); color:var(--muted); font-weight:500; margin:0; min-height:1.5em}
.py span{font-weight:600}
.divider{width:34px; height:3px; border-radius:3px; background:var(--line); margin:24px auto}
.reveal{max-height:0; overflow:hidden; opacity:0; transform:translateY(6px); transition:max-height .32s ease, opacity .32s ease, transform .32s ease}
.reveal.open{opacity:1; transform:none}
.nl{font-size:clamp(20px, 5vw, 26px); font-weight:700; margin:0 0 8px}
/* De letterlijke vertaling staat tussen de vertaling en de uitleg: hij hoort bij
   de tekst (net als de vertaling), niet bij de toelichting in het getinte kader.
   18px boven en onder; de marges van .nl en .uitleg zijn kleiner, dus die vallen
   hiertegen weg en je krijgt precies 18px aan beide kanten. */
.litblok{margin:18px 0}
/* line-height zodat de inkt ook optisch op gelijke afstand van de vertaling en het
   kader staat (een grote regel heeft onder zich meer leading dan een kleine), en
   zodat een gloss van twee regels niet op elkaar plakt */
.lit{font-size:13.5px; line-height:1.45; color:var(--muted); margin:0}
.lit b{color:var(--fg); font-weight:600}
.delen{font-size:12.5px; line-height:1.4; color:var(--muted); margin:6px 0 0}
.lbl{display:inline-block; font-size:10.5px; letter-spacing:.05em; opacity:.8; margin-right:3px}
.uitleg{text-align:left; font-size:14px; line-height:1.62; background:var(--accent-soft); border-radius:14px; padding:15px 17px; margin:0}
.uitleg p{margin:0 0 8px}
.uitleg p:last-child{margin-bottom:0}
.uitleg ul{margin:6px 0 8px; padding-left:20px}
.uitleg li{margin:3px 0}
.hint{font-size:12.5px; color:var(--muted); margin:16px 0 0; min-height:1.2em}
.play-btn{margin-top:22px; margin-bottom:auto}

/* ---------- lijst-weergave ---------- */
main.list-view{display:block; overflow-y:auto; padding:0; min-height:0}
.list-inner{max-width:640px; margin:0 auto; padding:0 18px calc(28px + var(--sab))}
.list-telling{font-size:12.5px; color:var(--muted); margin:14px 0 0; padding-bottom:10px}
.list-telling:empty{display:none}

.li{text-align:left; padding:18px 0; border-bottom:1px solid var(--line); cursor:pointer}
.li:last-child{border-bottom:none}
.li-head{display:flex; gap:12px; align-items:flex-start}
.li-num{
  color:var(--muted); font-size:12.5px; line-height:1; padding-top:8px; min-width:18px;
  text-align:right; font-variant-numeric:tabular-nums; flex:0 0 auto; transition:color .18s;
}
.li.open .li-num{color:var(--accent)}
.li-body{flex:1; min-width:0}
/* Chinees kleiner dan op de kaart: er passen meerdere onder elkaar */
.li .zh{font-size:clamp(23px, 6vw, 29px); line-height:1.4; margin:0 0 4px; text-align:left}
.li .py{font-size:clamp(13.5px, 3.5vw, 15.5px); margin:0; text-align:left}
.li .hint{font-size:12px; margin:10px 0 0}
.li.open .hint{display:none}
.li .reveal{margin-top:0}
.li.open .reveal{margin-top:12px}
/* de reveal-animatie van de kaart gebruikt .open op .reveal; in de lijst staat
   .open op de regel zelf, dus hier dezelfde twee regels nogmaals */
.li.open .reveal{opacity:1; transform:none}
.li .nl{font-size:16.5px; margin:0 0 6px; text-align:left}
.li .uitleg{font-size:13.5px; padding:13px 15px}
.li .litblok{margin:18px 0}
.li .lit{font-size:12.5px; margin:0}
.li .delen{font-size:12px; margin:5px 0 0}
/* afspeelknop per regel: zacht accentrondje — duidelijk, maar kleiner dan op de kaart */
.li .play-btn{
  width:40px; height:40px; margin:1px 0 0; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent); border:none; box-shadow:none;
}
.li .play-btn svg{width:18px; height:18px; fill:currentColor; margin-left:1px}
.li .play-btn:active{transform:scale(.92)}
.li .play-btn.playing{background:var(--accent); color:#fff}
.li .play-btn.playing svg{margin-left:0}

/* ---------- karakter (stroke mode) ---------- */
.char{cursor:pointer; border-radius:6px; transition:background .12s}
body.stroke-mode .char:hover{background:var(--accent-soft)}

/* ---------- audio ---------- */
.play-btn{
  width:58px; height:58px; border-radius:50%; border:none; background:var(--accent); color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 26px -10px var(--accent); transition:.16s; flex:0 0 auto;
}
.play-btn svg{width:24px; height:24px; fill:#fff; margin-left:2px}
.play-btn:active{transform:scale(.94)}
.play-btn.playing{background:var(--fg)}
.play-btn.playing svg{margin-left:0}
.play-btn.playing .ic-play{display:none}
.play-btn .ic-stop{display:none}
.play-btn.playing .ic-stop{display:block}

/* ---------- nav ---------- */
nav{display:flex; align-items:center; justify-content:center; gap:16px; padding:16px 22px calc(18px + var(--sab))}
.nav{width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--fg); display:grid; place-items:center; flex:0 0 auto}
.nav svg{width:20px; height:20px; fill:currentColor}
.nav:active{background:var(--fg); color:var(--bg)}
.track{flex:0 1 220px; height:3px; border-radius:3px; background:var(--line); overflow:hidden}
.track i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease}
.count{font-size:12.5px; color:var(--muted); min-width:52px; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- settings sheet ---------- */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:.25s;
  z-index:50; display:flex; align-items:flex-end;
}
.backdrop.open{opacity:1; pointer-events:auto}
.sheet{
  width:100%; max-width:640px; margin:0 auto; background:var(--bg);
  border-radius:22px 22px 0 0; padding:10px 20px calc(20px + var(--sab));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-height:86vh; overflow-y:auto;
}
.backdrop.open .sheet{transform:none}
.sheet .handle{width:40px; height:4px; border-radius:4px; background:var(--line); margin:8px auto 6px}
.sheet h3{font-size:15px; margin:10px 0 4px; display:flex; align-items:center; justify-content:space-between}
.sheet .x{width:32px; height:32px; border-radius:10px; border:none; background:var(--line); color:var(--fg); font-size:16px}
.row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .lbl{font-size:14.5px; font-weight:500}
.seg{display:flex; background:var(--line); border-radius:10px; padding:3px; gap:3px}
.seg button{border:none; background:transparent; color:var(--muted); font-size:13px; font-weight:600; padding:7px 12px; border-radius:8px; min-width:40px; transition:.15s}
.seg button.on{background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* thema-kiezer (10 thema's) */
.row.col{flex-direction:column; align-items:stretch; gap:0}
.themes{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
.theme-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  padding:8px 12px; border-radius:11px; border:1px solid; cursor:pointer; transition:.15s;
  line-height:1;
}
.theme-chip i{width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto}
.theme-chip.on{box-shadow:0 0 0 2px var(--accent)}
.theme-chip:active{transform:scale(.97)}
/* toonkleuren: legenda */
.row-line{display:flex; align-items:center; justify-content:space-between; gap:14px}
.tone-legend{display:flex; flex-wrap:wrap; gap:9px 15px; margin-top:12px}
.tone-legend span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.tone-legend i{width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto}
.tone-legend b{font-weight:700; font-size:14px}

.sw{position:relative; width:48px; height:28px; flex:0 0 auto}
.sw input{opacity:0; width:0; height:0; position:absolute}
.sw .sl{position:absolute; inset:0; border-radius:999px; background:var(--line); transition:.18s; cursor:pointer}
.sw .sl::before{content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + .sl{background:var(--accent)}
.sw input:checked + .sl::before{transform:translateX(20px)}

/* ---------- stroke modal ---------- */
.strokemodal{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; display:none; align-items:center; justify-content:center; padding:24px}
.strokemodal.open{display:flex}
.strokemodal .panel{background:var(--card); border-radius:22px; padding:22px; text-align:center; max-width:320px; width:100%; box-shadow:var(--shadow)}
.strokemodal .big{font-size:56px; line-height:1; margin:0 0 4px; font-weight:600}
.strokemodal #stroke-target{width:200px; height:200px; margin:0 auto; display:block}
.strokemodal .actions{display:flex; gap:10px; justify-content:center; margin-top:16px}
.strokemodal .actions button{border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:14px; font-weight:600; padding:10px 16px; border-radius:12px; min-height:42px}
.strokemodal .actions button.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.strokemodal .msg{font-size:12.5px; color:var(--muted); margin-top:10px; min-height:1.2em}

@media (min-width:640px){ .sheet{margin-bottom:24px; border-radius:22px} }
@media (max-width:480px){
  .topbar{padding:calc(12px + var(--sat)) calc(8px + var(--sar)) 10px calc(8px + var(--sal))}
  .search-row{padding:10px calc(8px + var(--sar)) 10px calc(8px + var(--sal))}
  main{padding:6px 4px 8px}
  .card{padding:44px 4px 40px}
  nav{padding:16px 8px calc(18px + var(--sab))}
  /* ook 16px: anders zoomt iOS in bij het openen van de leskeuzelijst */
  /* min-height gelijk aan de knoppen ernaast (40px), anders staan de randen 1px uit */
  .lesson-select{font-size:16px; min-height:40px}
  .icon-btn{width:40px; height:40px}
}

/* ---------- stemkeuze in de instellingen (extra stemmen) ----------
   Kaders om de twee groepen, radiokeuzes zonder eigen kader, en het dialect als
   gewone tekst in een tweede kolom. Zie skills/ILearnChineseApp/RUNBOOK-stemmen.md. */
.lijn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* de regel zonder label: keuze links, schakelaar rechts, zoals de andere rijen */
.lijn-vol { width: 100%; justify-content: space-between; }

.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .rd {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line);
  flex: 0 0 auto; position: relative;
}
.radio.on .rd { border-color: var(--accent); }
.radio.on .rd::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent);
}
.radio.uit { opacity: .45; cursor: default; }
.radio .nm { font-size: 14px; }

/* de man/vrouw-schakelaar als er een extra stem gekozen is */
.row.uit .lbl { opacity: .45; }
.row.uit .seg { opacity: .4; }
.row.uit .seg button { cursor: default; }

/* de twee kaders met de elf stemmen */
.extra-kop .row-line { margin-bottom: 16px; }
.stem-groep {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 13px 8px; margin: 0 0 12px;
}
.stem-groep legend {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; opacity: .62;
  font-weight: 600; padding: 0 6px;
}
.stem-groep .radio { padding: 7px 0; }
.stem-groep .radio.on .nm { color: var(--accent); }
.stem-noot { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; }

/* ---------- laadindicator ----------
   Een dunne boog die ronddraait in de accentkleur, over de thema-achtergrond. Hij
   verschijnt pas als het laden echt even duurt (anders flitst hij bij elke leswissel)
   en dekt het scherm af tot de eerste kaart er staat. */
.loader{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:var(--bg); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.loader.aan{opacity:1; pointer-events:auto}
.loader .spin{width:42px; height:42px; transform:rotate(-90deg); overflow:visible}
.loader .baan, .loader .boog{fill:none; stroke-width:3; stroke-linecap:round}
.loader .baan{stroke:var(--line)}
.loader .boog{stroke:var(--accent); stroke-dasharray:30 96; animation:laadboog 1.15s linear infinite}
@keyframes laadboog{to{stroke-dashoffset:-126}}
/* wie beweging liever niet ziet: rustig pulseren in plaats van draaien */
@media (prefers-reduced-motion: reduce){
  .loader .boog{animation:laadpuls 1.6s ease-in-out infinite}
  @keyframes laadpuls{0%,100%{opacity:.35} 50%{opacity:1}}
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}