/* ============================================================
   Mandarin Path — components
   ============================================================ */

/* ---------- surfaces ---------- */
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-1);
}
.card.pad-lg{padding:24px}
.card.flush{padding:0;overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-hd h2,.card-hd h3{margin:0}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.col{display:flex;flex-direction:column;gap:10px}
.stack{display:flex;flex-direction:column;gap:14px}
.spacer{flex:1}
.muted{color:var(--text-3)}
.small{font-size:.83rem}
.tiny{font-size:.74rem}
.center{text-align:center}
.mt{margin-top:14px}.mt-lg{margin-top:26px}.mb{margin-bottom:14px}
.hidden{display:none !important}

/* ---------- page header ---------- */
.page-hd{margin-bottom:22px}
.page-hd .eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  margin-bottom:5px;display:block
}
.page-hd p{color:var(--text-2);max-width:74ch;margin:6px 0 0}
.crumb{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--text-3);margin-bottom:8px}
.crumb a:hover{color:var(--accent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 17px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--bg-elev);color:var(--text);font-weight:600;font-size:.875rem;cursor:pointer;
  transition:background .14s,border-color .14s,transform .08s,box-shadow .14s;white-space:nowrap;
}
.btn:hover{background:var(--bg-sunk)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .ico{width:17px;height:17px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-sunk);color:var(--text)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-sm{height:32px;padding:0 12px;font-size:.8rem;border-radius:8px}
.btn-lg{height:48px;padding:0 24px;font-size:.95rem;border-radius:12px}
.btn-block{width:100%}
.btn-group{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-elev)}
.btn-group button{
  height:34px;padding:0 13px;border:0;background:transparent;cursor:pointer;
  font-size:.81rem;font-weight:600;color:var(--text-2);border-right:1px solid var(--border)
}
.btn-group button:last-child{border-right:0}
.btn-group button:hover{background:var(--bg-sunk)}
.btn-group button.on{background:var(--accent);color:#fff}

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;
  font-size:.72rem;font-weight:650;background:var(--bg-sunk);color:var(--text-2);white-space:nowrap
}
.chip.lv1{background:color-mix(in srgb,var(--lvl1) 15%,transparent);color:var(--lvl1)}
.chip.lv2{background:color-mix(in srgb,var(--lvl2) 15%,transparent);color:var(--lvl2)}
.chip.lv3{background:color-mix(in srgb,var(--lvl3) 15%,transparent);color:var(--lvl3)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.info{background:var(--info-soft);color:var(--info)}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
html[data-theme="dark"] .chip.accent{color:var(--accent)}
.chip-btn{cursor:pointer;border:1px solid var(--border);background:var(--bg-elev);height:30px;padding:0 12px}
.chip-btn:hover{border-color:var(--border-strong)}
.chip-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.78rem;font-weight:650;color:var(--text-2)}
.input,select.input,textarea.input{
  height:38px;padding:0 11px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-elev);font-size:.875rem;width:100%
}
textarea.input{height:auto;padding:9px 11px;line-height:1.6;resize:vertical}
.input:focus{outline:none;border-color:var(--accent)}
select.input{cursor:pointer;appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px;background-repeat:no-repeat}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:38px;height:22px;border-radius:999px;background:var(--border-strong);position:relative;transition:background .18s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:var(--shadow-1)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(16px)}
.range{width:100%;accent-color:var(--accent)}

/* ---------- progress ---------- */
.bar{height:8px;border-radius:999px;background:var(--bg-sunk);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.bar.thin{height:5px}
.bar.lv1>i{background:var(--lvl1)}.bar.lv2>i{background:var(--lvl2)}.bar.lv3>i{background:var(--lvl3)}
.bar.ok>i{background:var(--ok)}.bar.warn>i{background:var(--warn)}.bar.bad>i{background:var(--bad)}

.ring{position:relative;display:grid;place-items:center}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .track{stroke:var(--bg-sunk)}
.ring .val{stroke:var(--accent);transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.3,1)}
.ring .ring-label{position:absolute;text-align:center;line-height:1.1}
.ring .ring-label b{display:block;font-size:1.3rem;font-weight:700}
.ring .ring-label span{font-size:.66rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}

.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:700}
.stat .v{font-size:1.55rem;font-weight:700;line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .sub{font-size:.76rem;color:var(--text-3)}

/* ---------- interactive hanzi ---------- */
.zh{font-family:var(--han);line-height:1.85}
.zh-word{
  display:inline-block;border-radius:5px;padding:0 1px;cursor:pointer;
  transition:background .12s,color .12s;position:relative
}
.zh-word:hover{background:var(--accent-soft);color:var(--accent-ink)}
html[data-theme="dark"] .zh-word:hover{color:var(--accent)}
.zh-word.known{border-bottom:2px solid color-mix(in srgb,var(--ok) 55%,transparent)}
.zh-word.learning{border-bottom:2px dashed color-mix(in srgb,var(--warn) 65%,transparent)}
.zh-word.new{border-bottom:2px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.zh-char{display:inline-block;cursor:pointer;border-radius:4px}
.zh-char:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.zh-punct{color:var(--text-3)}
.zh-lg{font-size:1.65rem}
.zh-xl{font-size:2.4rem}
.zh-hero{font-size:clamp(3.2rem,11vw,5.5rem);line-height:1.15;font-weight:500}

.ruby{display:inline-flex;flex-direction:column;align-items:center;margin:0 1px;vertical-align:bottom}
.ruby .py{font-family:var(--sans);font-size:.62em;color:var(--text-3);line-height:1.35;letter-spacing:.01em}

.hovercard{
  position:absolute;z-index:200;max-width:300px;
  background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:var(--shadow-3);padding:12px 14px;pointer-events:none;
  animation:fadeUp .12s ease
}
.hovercard .hc-top{display:flex;align-items:baseline;gap:9px}
.hovercard .hc-c{font-family:var(--han);font-size:1.9rem;line-height:1.1}
.hovercard .hc-p{font-weight:700;color:var(--accent)}
.hovercard .hc-m{font-size:.84rem;color:var(--text-2);margin-top:5px}
.hovercard .hc-meta{font-size:.72rem;color:var(--text-3);margin-top:7px;display:flex;gap:8px;flex-wrap:wrap}

/* tones */
.t1{color:var(--tone1)}.t2{color:var(--tone2)}.t3{color:var(--tone3)}.t4{color:var(--tone4)}.t5{color:var(--tone5)}
body.tone-colors .zh-char[data-tone="1"]{color:var(--tone1)}
body.tone-colors .zh-char[data-tone="2"]{color:var(--tone2)}
body.tone-colors .zh-char[data-tone="3"]{color:var(--tone3)}
body.tone-colors .zh-char[data-tone="4"]{color:var(--tone4)}
body.tone-colors .zh-char[data-tone="5"]{color:var(--tone5)}

/* ---------- audio button ---------- */
.play{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);
  background:var(--bg-elev);display:grid;place-items:center;cursor:pointer;color:var(--accent);
  transition:background .14s,transform .1s
}
.play:hover{background:var(--accent-soft)}
.play:active{transform:scale(.93)}
.play.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
.play::before{content:"";width:0;height:0;border-left:10px solid currentColor;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;margin-left:3px}
.play.playing::before{border:0;width:10px;height:10px;background:currentColor;border-radius:2px;margin:0}
.play.sm{width:27px;height:27px}
.play.sm::before{border-left-width:8px;border-top-width:5px;border-bottom-width:5px;margin-left:2px}
.play.lg{width:48px;height:48px}
.play.lg::before{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}

/* ---------- modal ---------- */
.modal-root{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;
  background:rgba(12,10,8,.5);backdrop-filter:blur(3px);animation:fadeIn .15s ease}
/* a class-level display beats the browser's [hidden] rule, so restate it */
.modal-root[hidden],.hovercard[hidden],.search-pop[hidden],.nav-badge[hidden]{display:none !important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg-elev);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);
  width:min(640px,100%);max-height:86vh;overflow:auto;border:1px solid var(--border);
  animation:popIn .18s cubic-bezier(.2,.9,.3,1)
}
.modal.wide{width:min(900px,100%)}
@keyframes popIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-elev);z-index:2}
.modal-bd{padding:20px}
.modal-ft{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.x-btn{width:32px;height:32px;border-radius:8px;border:0;background:transparent;cursor:pointer;color:var(--text-3);font-size:20px;line-height:1}
.x-btn:hover{background:var(--bg-sunk);color:var(--text)}

/* ---------- toast ---------- */
.toast-root{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow-3);animation:toastIn .22s ease
}
.toast.ok{background:var(--ok);color:#fff}
.toast.bad{background:var(--bad);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:720px){.toast-root{bottom:74px}}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  border:0;background:transparent;cursor:pointer;padding:9px 14px;font-size:.86rem;font-weight:600;
  color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap
}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column}
.list-row{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--border);
  transition:background .12s
}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--bg-sunk)}
.list-row.clickable{cursor:pointer}

/* ---------- search popover ---------- */
.search-pop{
  position:absolute;top:44px;left:0;right:0;max-height:min(70vh,520px);overflow:auto;z-index:120;
  background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-3);
  padding:6px
}
.search-sec{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:9px 10px 4px}
.search-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer}
.search-item:hover,.search-item.sel{background:var(--accent-soft)}
html[data-theme="dark"] .search-item:hover,html[data-theme="dark"] .search-item.sel{background:var(--bg-sunk)}
.search-item .si-zh{font-family:var(--han);font-size:1.2rem;min-width:2.4em}
.search-item .si-body{min-width:0;flex:1}
.search-item .si-p{font-size:.78rem;color:var(--accent);font-weight:650}
.search-item .si-m{font-size:.8rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- empty / callouts ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--text-3)}
.empty .big{font-family:var(--han);font-size:2.6rem;opacity:.35;margin-bottom:10px}
.note{
  border-left:3px solid var(--accent);background:var(--accent-soft);padding:11px 14px;
  border-radius:0 9px 9px 0;font-size:.87rem;color:var(--accent-ink)
}
html[data-theme="dark"] .note{color:var(--text)}
.note.info{border-color:var(--info);background:var(--info-soft)}
.note.warn{border-color:var(--warn);background:var(--warn-soft)}
.note.ok{border-color:var(--ok);background:var(--ok-soft)}
html[data-theme="dark"] .note.info,html[data-theme="dark"] .note.warn,html[data-theme="dark"] .note.ok{color:var(--text)}
.note b{font-weight:700}