/* ============================================================
   AINA VIET HUB — styles.css
   Palette: Paper #FAF7F2 · Bone #F1ECE3 · Oatmeal #E5DDCE
            Walnut #5B4636 · Ink #23211D · Moss #6B7F59 · Terracotta #C26E4B
   Type:    Fraunces (display) · Inter Tight (UI) · JetBrains Mono (Vietnamese)
   Signature: tone-contour curves drawn beside every Vietnamese word.
   ============================================================ */

:root{
  --paper:#FAF7F2; --bone:#F1ECE3; --oat:#E5DDCE;
  --walnut:#5B4636; --ink:#23211D; --moss:#6B7F59; --terra:#C26E4B;
  --moss-d:#566847; --terra-d:#A85A3C;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(35,33,29,.06), 0 6px 18px rgba(35,33,29,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55;
}
.vi{font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:-0.01em}
h1,h2,h3,.wordmark{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.15; margin:0 0 .4rem}
a{color:var(--walnut)}
button{font:inherit; cursor:pointer}
::selection{background:var(--terra); color:var(--paper)}

/* ---------- header & tabs ---------- */
header{
  position:sticky; top:0; z-index:20; background:rgba(250,247,242,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--oat);
}
.brand{
  display:flex; align-items:baseline; gap:.5rem; padding:.7rem 1rem .2rem;
  max-width:760px; margin:0 auto;
}
.brand .logo{font-family:"Fraunces",serif; font-size:1.25rem; font-weight:700}
.brand .logo .dot{color:var(--terra)}
.brand .site{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--walnut); opacity:.75}
#tabs{
  display:flex; gap:.35rem; overflow-x:auto; padding:.45rem 1rem .65rem;
  max-width:760px; margin:0 auto; scrollbar-width:none;
}
#tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; padding:.4rem .85rem; border-radius:999px; text-decoration:none;
  font-size:.9rem; color:var(--walnut); background:var(--bone); border:1px solid var(--oat);
  white-space:nowrap;
}
.tab.on{background:var(--moss); border-color:var(--moss); color:var(--paper); font-weight:600}

/* ---------- layout ---------- */
main{max-width:760px; margin:0 auto; padding:1.1rem 1rem 4.5rem}
.pagetitle{font-size:1.5rem; margin:.4rem 0 .9rem}
.pagetitle .thin{font-family:"Inter Tight"; font-weight:400; font-size:.95rem; color:var(--walnut); opacity:.8}
.eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra-d); font-weight:600; margin:0 0 .25rem}
.fineprint{font-size:.8rem; color:var(--walnut); opacity:.85}
.lead{max-width:60ch}
.row{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.row.center{justify-content:center}
.row.gap{gap:.8rem; margin-top:.6rem}
.backlink{display:inline-block; margin-bottom:.6rem; font-size:.9rem; text-decoration:none; color:var(--moss-d); font-weight:600}

/* ---------- hero (Today) ---------- */
.hero{padding:1.4rem 0 .8rem; text-align:center}
.wordmark{font-size:4.4rem; font-weight:700; letter-spacing:-.02em; margin:0}
.wordmark .dot{color:var(--terra)}
.hero-curve{width:120px; height:30px; display:block; margin:.1rem auto .4rem}
.hero-curve path{fill:none; stroke:var(--terra); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.1s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sub{margin:.1rem 0 .6rem; color:var(--walnut)}
.streak{display:inline-block; background:var(--bone); border:1px solid var(--oat);
  border-radius:999px; padding:.3rem .9rem; font-size:.92rem}

.grid{display:grid; gap:.8rem; margin:1rem 0}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.action{
  display:block; background:var(--bone); border:1px solid var(--oat); border-radius:var(--r);
  padding:1rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.action:hover{transform:translateY(-2px)}
.action h3{font-size:1.02rem; margin-bottom:.25rem}
.action p{margin:.1rem 0 .55rem; font-size:.88rem; color:var(--walnut)}
.action .cta{font-size:.85rem; font-weight:700; color:var(--moss-d)}

.pod{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r);
  padding:1.1rem; margin:1.1rem 0 .8rem; box-shadow:var(--shadow)}
.pod .big{font-size:1.35rem; margin:.15rem 0}
.pod .en{color:var(--walnut); margin:.1rem 0 .55rem}

/* ---------- tone glyph signature ---------- */
.tgs{display:inline-flex; gap:2px; vertical-align:middle; margin-left:.25rem}
.tg{width:22px; height:17px}
.tg path{fill:none; stroke:var(--terra); stroke-width:3; stroke-linecap:round}

/* ---------- buttons ---------- */
.btn{
  border:none; border-radius:var(--r-sm); padding:.65rem 1.1rem; font-weight:700;
  background:var(--bone); color:var(--ink); border:1px solid var(--oat);
}
.btn.moss{background:var(--moss); border-color:var(--moss); color:var(--paper)}
.btn.moss:hover{background:var(--moss-d)}
.btn.walnut{background:var(--walnut); border-color:var(--walnut); color:var(--paper)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent; border-color:var(--terra); color:var(--terra-d)}
.btn.wide{width:100%}
.btn small{display:block; font-weight:500; font-size:.68rem; opacity:.8}
.play{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--moss);
  background:var(--paper); color:var(--moss-d); font-size:1rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.play:hover{background:var(--moss); color:var(--paper)}
.play.sm{width:32px; height:32px; font-size:.8rem}
.play.big{width:64px; height:64px; font-size:1.4rem}

/* ---------- review ---------- */
.rev{max-width:560px; margin:0 auto}
.counter{font-size:.8rem; color:var(--walnut); text-align:center; margin:.2rem 0 .6rem}
.card{
  background:var(--bone); border:1px solid var(--oat); border-radius:var(--r);
  box-shadow:var(--shadow); padding:1.4rem 1.2rem; text-align:center; min-height:220px;
}
.deckline{font-size:.8rem; color:var(--walnut); margin:0 0 .8rem}
.newchip{color:var(--terra-d)}
.vi.huge{font-size:2rem; margin:.3rem 0 .6rem; overflow-wrap:anywhere}
.vi.big{font-size:1.3rem}
.vi.sm{font-size:.95rem}
.en.big{font-size:1.15rem; font-weight:600; margin:.7rem 0 .3rem}
.flip-rule{border:none; border-top:1px dashed var(--oat); margin:1rem 0}
.alt{color:var(--terra-d); font-size:.9rem; margin:.2rem 0}
.note{font-size:.9rem; color:var(--walnut); max-width:46ch; margin:.5rem auto}
.ex{background:var(--paper); border:1px solid var(--oat); border-radius:var(--r-sm);
  padding:.6rem .8rem; margin:.7rem auto .3rem; max-width:46ch}
.ex .vi{font-size:.98rem}
.exen{font-size:.84rem; color:var(--walnut); margin:.25rem 0 0}
.grades{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.9rem}
.grades .g0{border-color:var(--terra); color:var(--terra-d)}
.grades .g3{border-color:var(--moss); color:var(--moss-d)}
.finish{text-align:center; padding:2.5rem 0}
.finish .btn{display:inline-block; margin-top:1rem; text-decoration:none}

/* ---------- lessons ---------- */
.units{list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.5rem}
.units a{
  display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center;
  background:var(--bone); border:1px solid var(--oat); border-radius:var(--r-sm);
  padding:.75rem .9rem; text-decoration:none; color:var(--ink);
}
.units .unum{font-family:"Fraunces",serif; font-size:1.3rem; color:var(--terra); font-weight:700}
.units .vi{font-size:.82rem; color:var(--walnut); font-style:normal}
.units .mark{font-size:.8rem; color:var(--walnut)}
.units .done a{opacity:.78}
.units .done .mark{color:var(--moss-d); font-weight:800; font-size:1rem}
.lesson-title .vi{font-size:1rem; color:var(--walnut)}
.goal{font-weight:600; color:var(--moss-d); margin:.2rem 0 .7rem}
.lesson-body{max-width:62ch}
.lesson-body b{color:var(--walnut)}
.phrases{list-style:none; padding:0; display:grid; gap:.55rem; margin:.6rem 0 1.2rem}
.phrases li{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r-sm); padding:.6rem .8rem}
.phrases .en{font-size:.85rem; color:var(--walnut)}
.vid{margin:1rem 0}
.vid iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r); box-shadow:var(--shadow)}
.cap{font-size:.8rem; color:var(--walnut); margin:.35rem 0 0}
.mission{
  border-left:4px solid var(--terra); background:var(--bone);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:.8rem 1rem; margin:1.1rem 0;
}
.res{display:grid; gap:.6rem; margin-bottom:1.5rem}
@media(min-width:620px){.res{grid-template-columns:1fr 1fr}}
.rcard{display:block; background:var(--bone); border:1px solid var(--oat); border-radius:var(--r-sm);
  padding:.75rem .9rem; text-decoration:none; color:var(--ink)}
.rcard p{margin:.25rem 0 0; font-size:.85rem; color:var(--walnut)}
.rcard.solo{margin:1rem 0}

/* ---------- tones ---------- */
.tones{display:grid; gap:.8rem; margin:1rem 0 1.4rem}
@media(min-width:620px){.tones{grid-template-columns:repeat(2,1fr)}}
.tonecard{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r); padding:1rem; box-shadow:var(--shadow)}
.tonecard svg{width:100%; height:60px}
.tonecard svg path{fill:none; stroke:var(--terra); stroke-width:4; stroke-linecap:round}
.tonecard h3{font-size:1.05rem}
.tonecard .mark{font-family:"JetBrains Mono",monospace; color:var(--terra-d); font-weight:500}
.tonecard .desc{font-size:.88rem; color:var(--walnut); margin:.3rem 0 .5rem}
.quizbox{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r); padding:1.1rem; margin:1rem 0; box-shadow:var(--shadow)}
.tonegrid{grid-template-columns:repeat(5,1fr); margin-top:.8rem}
.tonegrid .btn{padding:.5rem .25rem; font-size:.72rem; font-weight:600}
.tonegrid svg{display:block; width:100%; height:26px; margin-bottom:.15rem}
.tonegrid svg path{fill:none; stroke:var(--terra); stroke-width:3.5; stroke-linecap:round}
.sel{padding:.55rem .7rem; border-radius:var(--r-sm); border:1px solid var(--oat); background:var(--paper); font:inherit}

/* ---------- phrasebook ---------- */
.search{
  width:100%; padding:.75rem .95rem; border-radius:var(--r-sm); border:1px solid var(--oat);
  background:var(--bone); font:inherit; margin-bottom:.6rem;
}
.chips{display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:.4rem; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; border:1px solid var(--oat); background:var(--bone); border-radius:999px;
  padding:.3rem .75rem; font-size:.82rem; color:var(--walnut);
}
.chip.on{background:var(--walnut); border-color:var(--walnut); color:var(--paper)}
.chip-s{background:var(--moss); border-color:var(--moss); color:var(--paper)}
.chip-p{background:var(--terra); border-color:var(--terra); color:var(--paper)}
.chip-c{background:var(--oat); color:var(--walnut)}
.pb{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.pb>li{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r-sm); padding:.65rem .85rem}
.pbrow{display:flex; justify-content:space-between; align-items:center; gap:.7rem; cursor:pointer}
.pb .en{font-size:.84rem; color:var(--walnut)}
.pbtools{display:flex; gap:.45rem; align-items:center}
.star{background:none; border:none; font-size:1.3rem; color:var(--terra); padding:.2rem}
.pbmore{display:none; border-top:1px dashed var(--oat); margin-top:.55rem; padding-top:.55rem}
.pb>li.open .pbmore{display:block}
.empty{padding:1rem; color:var(--walnut)}

/* ---------- progress ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin:.4rem 0 1.1rem}
.stat{background:var(--bone); border:1px solid var(--oat); border-radius:var(--r-sm); padding:.7rem .8rem; text-align:center}
.stat b{display:block; font-size:1.25rem; font-family:"Fraunces",serif}
.stat span{font-size:.74rem; color:var(--walnut)}
.meter{margin:0 0 1.2rem}
.bar{height:14px; background:var(--oat); border-radius:999px; overflow:hidden}
.bar.slim{height:8px}
.fill{height:100%; background:linear-gradient(90deg,var(--moss),var(--moss-d)); border-radius:999px; transition:width .4s ease}
.spark{display:flex; gap:4px; align-items:flex-end; height:90px; background:var(--bone);
  border:1px solid var(--oat); border-radius:var(--r-sm); padding:.6rem; margin:.4rem 0 1.2rem}
.col{flex:1; height:100%; display:flex; align-items:flex-end}
.colfill{width:100%; min-height:3px; background:var(--moss); border-radius:3px 3px 0 0}
.deckbar{margin:.55rem 0}
.dhead{display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:.25rem; color:var(--walnut)}

/* ---------- settings ---------- */
.setrow{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding:.7rem 0; border-bottom:1px dashed var(--oat)}
.setrow label{font-weight:600; min-width:170px}
.filelabel{display:inline-block}
input[type=range]{accent-color:var(--moss)}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:999px;
  font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:92vw; text-align:center; z-index:50;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- a11y & motion ---------- */
:focus-visible{outline:3px solid var(--terra); outline-offset:2px; border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .hero-curve path{stroke-dashoffset:0}
}

/* ---------- video aspect-ratio fallback (older WebKit / Tesla) ---------- */
.vid{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:1rem 0}
.vid iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:var(--r); box-shadow:var(--shadow)}
@supports(aspect-ratio:16/9){
  .vid{position:static; padding-bottom:0; height:auto; overflow:visible}
  .vid iframe{position:static; height:auto; aspect-ratio:16/9}
}

/* ---------- phone (≤ 479px) ---------- */
@media(max-width:479px){
  .wordmark{font-size:3rem}
  .hero{padding:1rem 0 .5rem}
  main{padding:.85rem .75rem 4rem}
  .vi.huge{font-size:1.7rem}
  .card{min-height:190px; padding:1.1rem .9rem}
  .grades{gap:.3rem}
  .grades .btn{padding:.65rem .35rem; font-size:.88rem}
  .grades .btn small{font-size:.62rem}
  /* tone quiz: keep 5 cols but tighter */
  .tonegrid .btn{padding:.5rem .08rem; font-size:.64rem; min-height:68px}
  .tonegrid svg{height:22px}
  /* settings: stack label above control */
  .setrow{flex-direction:column; align-items:flex-start; gap:.35rem}
  .setrow label{min-width:unset; width:100%}
  .pod .big{font-size:1.15rem}
  /* lesson units: hide time badge on very narrow */
  .units .mark{display:none}
}

/* ---------- tablet sweet-spot (480–767px) ---------- */
@media(min-width:480px) and (max-width:767px){
  .tones{grid-template-columns:repeat(2,1fr)}
  .tonegrid .btn{min-height:72px; padding:.6rem .25rem; font-size:.72rem}
}

/* ---------- large screens & Tesla (≥ 1024px) ---------- */
@media(min-width:1024px){
  main,#tabs,.brand{max-width:900px}
  /* bigger card & text so it reads from arm's length in the car */
  .card{min-height:260px; padding:2rem 1.8rem}
  .vi.huge{font-size:2.5rem}
  .en.big{font-size:1.3rem}
  /* larger touch targets for finger use */
  .btn{padding:.8rem 1.35rem}
  .play{width:52px; height:52px; font-size:1.15rem}
  .play.sm{width:40px; height:40px; font-size:.95rem}
  .play.big{width:72px; height:72px; font-size:1.65rem}
  .grades{gap:.65rem}
  .grades .btn{padding:1rem .7rem; font-size:1rem}
  /* tones: show 3 columns to use the wide viewport */
  .tones{grid-template-columns:repeat(3,1fr)}
  .tonegrid .btn{padding:.75rem .35rem; font-size:.8rem; min-height:84px}
  .tonegrid svg{height:34px; margin-bottom:.3rem}
  .action{padding:1.25rem 1.15rem}
  .grid{gap:1rem}
  .star{font-size:1.6rem; padding:.3rem}
  .search{padding:.9rem 1.1rem; font-size:1.05rem}
}