/* Articulate v1 — phone-first. Light default, dark via [data-theme="dark"]. */
:root{
  --bg:#F6F7F9; --card:#FFFFFF; --border:#E3E6EB; --border-soft:#EEF0F4;
  --text:#101828; --text2:#475467; --text3:#98A2B3;
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-soft:#EEF0FF;
  --green:#067647; --green-soft:#ECFDF3; --amber:#B54708; --amber-soft:#FFFAEB;
  --red:#D92D20; --red-soft:#FEF3F2;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --radius:14px;
}
html[data-theme="dark"]{
  --bg:#0B0F19; --card:#141B2E; --border:#263049; --border-soft:#1D2540;
  --text:#F2F4F8; --text2:#B9C1D4; --text3:#6E7891;
  --accent:#818CF8; --accent-hover:#A5B4FC; --accent-soft:#1F2550;
  --green:#6CE9A6; --green-soft:#0E2E1F; --amber:#FEC84B; --amber-soft:#33270E;
  --red:#F97066; --red-soft:#3A1A16;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.5;
}
.wrap{max-width:560px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;}
@media (min-width:900px){ .wrap{max-width:1120px;} }

/* top bar */
.topbar{display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;}
.wordmark{font-weight:800; font-size:17px; letter-spacing:-.02em;}
.wordmark span{color:var(--accent);}
.spacer{flex:1;}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); color:var(--text2);}
.iconbtn{width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2);}
.iconbtn:active{transform:scale(.96);}

/* content */
.content{padding:16px; padding-bottom:40px; flex:1;}
@media (min-width:900px){ .content{padding:28px 32px;} .todaygrid{display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start;} }
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:14px;}
.card h3{margin:0 0 4px; font-size:15px; letter-spacing:-.01em;}
.muted{color:var(--text2);} .faint{color:var(--text3);}
.small{font-size:13px;} .tiny{font-size:12px;}
.tagchip{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:999px; margin-bottom:8px;}
.prompt{font-size:19px; font-weight:650; letter-spacing:-.015em; line-height:1.4; margin:0 0 6px;}
@media (min-width:900px){ .prompt{font-size:22px;} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:700; border-radius:12px; padding:13px 20px; cursor:pointer; border:1px solid transparent;}
.btn:disabled{opacity:.55; cursor:default;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:active{background:var(--accent-hover);}
.btn-ghost{background:var(--card); border-color:var(--border); color:var(--text);}
.btn-block{width:100%;}
.btn-sm{font-size:13px; padding:9px 14px; border-radius:10px;}
.btnrow{display:flex; gap:10px; margin-top:14px;}
.btnrow .btn{flex:1;}
.recordbtn{width:100%; margin-top:14px; padding:18px; font-size:17px; border-radius:16px;
  background:var(--accent); color:#fff; border:0; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 6px 20px rgba(79,70,229,.35);}
.recordbtn:active{transform:scale(.99);}
.recordbtn.recording{background:var(--red); box-shadow:0 6px 20px rgba(217,45,32,.35);}
.linkbtn{border:0; background:none; color:var(--text3); font-size:14px; font-weight:600; cursor:pointer; padding:10px;}

/* recording */
.recwrap{text-align:center; padding:26px 10px 18px;}
.timer{font-size:52px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.timer .target{font-size:15px; font-weight:600; color:var(--text3);}
.wave{display:flex; align-items:flex-end; justify-content:center; gap:5px; height:56px; margin:18px 0;}
.wave i{width:6px; border-radius:3px; background:var(--accent); animation:wv 1s ease-in-out infinite;}
@keyframes wv{0%,100%{height:12px; opacity:.5;}50%{height:48px; opacity:1;}}
.stopbtn{width:84px; height:84px; border-radius:50%; border:0; cursor:pointer; margin:6px auto 0;
  background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(217,45,32,.4);}

/* transcript */
textarea.tbox{width:100%; min-height:200px; border:1px solid var(--border); border-radius:12px; padding:14px;
  font-size:15px; line-height:1.6; font-family:inherit; background:var(--bg); color:var(--text); resize:vertical;}
textarea.tbox:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent);}

/* grade card */
.gsec{padding:16px 0; border-top:1px solid var(--border-soft);}
.gsec:first-child{border-top:0; padding-top:2px;}
.glabel{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:8px;}
.upgrade{border-left:3px solid var(--accent); padding:2px 0 2px 12px; font-weight:600;}
.rw{border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px; background:var(--bg);}
.rw .orig{border-left:3px solid var(--amber); padding-left:10px; color:var(--text2); font-style:italic; margin-bottom:8px;}
.rw .new{font-weight:650; margin-bottom:6px;}
.rw .why{font-size:13px; color:var(--text2);}
.rw .vtag{font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--green); margin-bottom:6px;}
.swap{display:flex; align-items:flex-start; gap:8px; padding:10px 0; border-top:1px solid var(--border-soft); font-size:14px;}
.swap .weak{color:var(--text3); text-decoration:line-through;}
.swap .arrow{color:var(--accent); font-weight:800;}
.swap .sharp{font-weight:700;}
.swap .note{display:block; font-size:12px; color:var(--text2); font-weight:400;}
.swap .savebtn{margin-left:auto; flex-shrink:0;}
.chipbtn{font-size:12px; font-weight:700; border:1px solid var(--border); background:var(--card); color:var(--accent);
  border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap;}
.chipbtn.saved{color:var(--green); border-color:var(--green);}

/* skeleton */
.skel{border-radius:8px; background:linear-gradient(90deg,var(--border-soft) 25%,var(--border) 50%,var(--border-soft) 75%);
  background-size:200% 100%; animation:sk 1.2s infinite;}
@keyframes sk{to{background-position:-200% 0;}}

/* banner */
.banner{display:none; padding:10px 16px; font-size:13px; font-weight:600; align-items:center; gap:8px;}
.banner.on{display:flex;}
.banner.offline{background:var(--amber-soft); color:var(--amber); border-bottom:1px solid var(--border);}
.banner .x{margin-left:auto; cursor:pointer; font-weight:800;}

/* lock screen */
.lock{max-width:380px; margin:12vh auto 0; padding:0 20px; text-align:center;}
.lock input{width:100%; border:1px solid var(--border); border-radius:12px; padding:14px;
  font-size:17px; text-align:center; background:var(--card); color:var(--text); margin:14px 0;}
.lock input:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.err{color:var(--red); font-size:13px; font-weight:600; min-height:20px;}

.hidden{display:none !important;}

/* v2 — tabs, scenarios, vocab, progress */
.content{padding-bottom:96px;}

/* tab bar */
.tabbar{position:sticky; bottom:0; z-index:50; display:flex; gap:2px;
  background:var(--card); border-top:1px solid var(--border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
.tab{flex:1; border:0; background:none; color:var(--text3); font-size:11px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; cursor:pointer;
  font-family:inherit;}
.tab.active{color:var(--accent);}
.tab:active{transform:scale(.96);}

/* scenarios */
.srow{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:13px 14px; margin-bottom:8px; cursor:pointer; font-family:inherit; color:var(--text);}
.srow:active{background:var(--bg);}
.srow-t{display:block; font-weight:700; font-size:14px;}
.srow-s{display:block; font-size:12px; color:var(--text3); margin-top:2px; flex:1;}
.chev{color:var(--text3); font-size:20px; font-weight:400; flex-shrink:0;}
.goals{padding-left:20px; margin:0 0 6px; font-size:14px;}
.goals li{margin-bottom:8px; color:var(--text2);}
.goals li::marker{color:var(--accent); font-weight:800;}
#itemGoals{background:var(--bg); border:1px solid var(--border-soft); border-radius:12px;
  padding:12px 14px; margin:10px 0 4px;}
#itemGoals .goals{margin-bottom:0; font-size:13px;}
#itemGoals .goals li{margin-bottom:6px;}

/* scenario goal verdicts */
.goalrow{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border-soft);}
.goalrow:first-child{border-top:0; padding-top:0;}
.vchip{font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; margin-top:1px;}
.v-met{background:var(--green-soft); color:var(--green);}
.v-partial{background:var(--amber-soft); color:var(--amber);}
.v-missed{background:var(--red-soft); color:var(--red);}
.v-unscored{background:var(--bg); color:var(--text3); border:1px solid var(--border);}

/* vocab */
.vrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--border-soft);}
.vrow:first-child{border-top:0;}
.vword{font-weight:700; font-size:14px;}
.statechip{margin-left:auto; flex-shrink:0; font-size:10px; font-weight:800; padding:3px 10px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.05em;}
.st-new{background:var(--accent-soft); color:var(--accent);}
.st-due{background:var(--amber-soft); color:var(--amber);}
.st-learning{background:#E0EAFF; color:#3538CD;}
html[data-theme="dark"] .st-learning{background:#232a5e; color:#a5b4fc;}
.st-mastered{background:var(--green-soft); color:var(--green);}
.drillword{font-size:34px; font-weight:800; letter-spacing:-.02em; margin:22px 0;}

/* progress */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px;}
.stat{background:var(--bg); border:1px solid var(--border-soft); border-radius:10px;
  padding:10px 4px; text-align:center;}
.stat b{font-size:19px; display:block; letter-spacing:-.02em;}
.stat span{font-size:10px; color:var(--text3); font-weight:600;}
.bars{display:flex; align-items:flex-end; gap:6px; height:96px; margin-top:8px;}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%;}
.bar i{width:100%; max-width:34px; background:var(--accent); border-radius:4px; opacity:.85;}
.bar span{font-size:10px; color:var(--text3); font-weight:700;}
.hrow{display:block; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--border-soft);
  padding:12px 0; cursor:pointer; font-family:inherit; color:var(--text);}
.hrow:first-child{border-top:0;}
.hhead{display:flex; align-items:center; gap:8px;}
.hhead .chev{margin-left:auto;}
.kindchip{font-size:10px; font-weight:800; padding:2px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.05em; background:var(--accent-soft); color:var(--accent);}
.htitle{font-weight:650; font-size:14px; margin:5px 0 3px;}
.hdetail{padding-bottom:4px;}