/* ======================================================================
   common.css — shared base for all pages in hsk/old
   (pickler index.html, volume index.html shells, dialog.html)
   Includes light/dark theme vars, header, panels, controls,
   the theme toggle, and small-screen responsive rules.
   ====================================================================== */
:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1f2430; --muted:#6b7280;
  --brand:#5b54d9; --brand2:#7a6ff0; --ok:#2f9e5f; --warn:#d98a2b;
  --bad:#c0392b; --line:#e5e7ef;
  --shadow:0 6px 24px rgba(31,36,48,.08);
  --hover:rgba(31,36,48,.035);
  --hanzi:28px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#12141c; --card:#1d2130; --ink:#eceef4; --muted:#98a0b2;
  --brand:#7a6ff0; --brand2:#9489f6; --ok:#3fbc74; --warn:#e0a144;
  --bad:#e26050; --line:#2b3040;
  --shadow:0 6px 24px rgba(0,0,0,.4);
  --hover:rgba(236,238,244,.06);
  --hanzi:28px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}

/* ---- header: caption first, then section tabs (all floated left) ---- */
/* sticky so the volume/dialog header stays visible while scrolling */
header{position:sticky;top:0;z-index:45;display:flex;flex-wrap:wrap;row-gap:4px;column-gap:20px;align-items:baseline;background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;padding:8px 24px 10px;box-shadow:0 2px 10px rgba(0,0,0,.10)}
@media(prefers-reduced-motion:reduce){ header{box-shadow:none} }
header .cap{display:flex;flex-wrap:wrap;row-gap:2px;column-gap:14px;align-items:baseline}
header .cap h1{margin:0;font-size:19px;font-weight:700}
header .cap p{margin:0;font-size:12px;opacity:.85}
header .cap a.back{white-space:nowrap;color:rgba(255,255,255,.9);text-decoration:none;font-size:12px}
header .cap a.back:hover{color:#fff;text-decoration:underline}
header .tabs{display:flex;flex-wrap:wrap;gap:2px}
header .tabs button,header .tabs a.tab-link{background:transparent;border:0;color:rgba(255,255,255,.78);font-size:13px;font-weight:600;padding:4px 11px;cursor:pointer;text-decoration:none;border-radius:7px;transition:.15s;white-space:nowrap}
header .tabs button.on,header .tabs a.tab-link.on{color:#fff;background:rgba(255,255,255,.2)}
header .tabs button:hover:not(.on),header .tabs a.tab-link:hover:not(.on){color:#fff;background:rgba(255,255,255,.12)}
/* hamburger button (inserted by nav.js); only shown on small screens */
.nav-burger{display:none}

.wrap{max-width:880px;margin:0 auto;padding:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
select,input[type=text]{font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
select:focus,input:focus{outline:2px solid var(--brand2);border-color:transparent}
input[type=range]{accent-color:var(--brand)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:transparent;padding:8px 14px;font-size:14px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--brand);color:#fff}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:10px 16px;font-size:15px;font-weight:600;cursor:pointer;transition:.12s}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn.primary:hover{background:var(--brand2)}
.btn.ghost:hover{border-color:var(--brand2);color:var(--brand)}
.btn.ok{background:var(--ok);color:#fff}
.btn.ok:hover{filter:brightness(1.06)}
.btn.again{background:var(--warn);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.empty{padding:24px;text-align:center;color:var(--muted)}
.speak{background:none;border:0;cursor:pointer;font-size:85%;color:var(--brand);padding:0 2px;border-radius:6px}
.speak:hover{background:var(--hover)}

/* ---- floating theme toggle (bottom-left; clear of the right sidebar) ---- */
.theme-btn{position:fixed;left:14px;bottom:14px;z-index:55;width:38px;height:38px;border-radius:12px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .15s, box-shadow .15s}
.theme-btn:hover{transform:translateY(-1px)}

/* ---- initial loading overlay (the volume/dialog data takes a moment) ---- */
.load-overlay{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:var(--bg)}
.load-overlay .load-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:loadspin .8s linear infinite}
@keyframes loadspin{to{transform:rotate(360deg)}}
.load-overlay .load-text{font-size:14px;color:var(--muted)}
.load-overlay.err .load-spinner{display:none}
.load-overlay.err .load-text{color:var(--bad);max-width:520px;text-align:center;line-height:1.5}
@media(prefers-reduced-motion:reduce){ .load-overlay .load-spinner{animation-duration:2.2s} }

/* ---- small screens: smartphones (portrait) ----
   The header tabs become a burger menu: the nav is hidden until the
   hamburger (injected by nav.js) toggles header.nav-open, which drops
   the full tab list down under the caption as a column. The burger is
   absolutely positioned top-right so it never adds to the header height. */
@media(max-width:640px){
  body{font-size:15px}
  header{padding:8px 60px 10px 14px;column-gap:10px;position:relative}
  header .cap h1{font-size:17px}
  header .cap p{font-size:11px}
  header .nav-burger{position:absolute;top:8px;right:12px;display:flex;width:40px;height:40px;min-width:40px;min-height:40px;border:0;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0}
  header .nav-burger:hover{background:rgba(255,255,255,.28)}
  header .nav-burger[aria-expanded="true"]{background:rgba(255,255,255,.3)}
  header .tabs{display:none;flex-direction:column;align-items:stretch;width:100%;gap:2px;margin-top:8px;padding:8px;background:rgba(0,0,0,.18);border-radius:12px;max-width:100%}
  header.nav-open .tabs,header.nav-open #topTabs{display:flex}
  header .tabs button,header .tabs a.tab-link{flex:none;min-height:44px;padding:10px 12px;text-align:left;font-size:14px;border-radius:8px;color:#fff}
  .wrap{padding:12px}
  .panel{padding:14px;border-radius:12px}
  .row{gap:8px}
  .row>div{min-width:0}
  select,input[type=text]{font-size:16px;min-height:44px} /* avoid iOS focus zoom, bigger targets */
  .seg{width:100%}
  .seg button{flex:1;min-height:44px}
  .btn{width:100%;min-height:44px}
  button{min-height:44px} /* generous tap targets on touch screens */
  button.speak{min-height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
  header .tabs button,header .tabs a.tab-link{min-height:44px;padding-top:9px;padding-bottom:9px}
  header .cap a.back{display:inline-block;padding:9px 2px}
  .theme-btn{width:44px;height:44px}
}