/*
 * Hán Ngữ Lab v9.11 – sidebar state palette and accessible light/dark UI.
 * Loaded after styles.css; narrow selectors deliberately fix its original
 * unscoped .sidebar nav a:hover and .dark .sidebar nav a.active rules.
 */
:root{
 --ui-sidebar:#ffffff;
 --ui-nav-text:#385749;
 --ui-nav-hover-bg:#e4f3ea;
 --ui-nav-hover-text:#10583e;
 --ui-nav-active-bg:#d6efe2;
 --ui-nav-active-text:#11553f;
 --ui-nav-icon-bg:#eef6f0;
 --ui-nav-icon:#21664c;
 --ui-active-marker:#1d8a65;
 --ui-streak-bg:#fff5e5;
 --ui-streak-text:#77501f;
 --ui-elev:0 10px 28px rgba(24,72,53,.07);
 --ui-elev-hover:0 16px 36px rgba(24,72,53,.12);
 --ui-focus:#237a5c;
 --ui-topbar:rgba(255,255,255,.93);
 --ui-scroll-thumb:#9ebdad;
 --ui-scroll-track:transparent;
 --ui-btn-ghost:#e5f4eb;
 --ui-btn-ghost-text:#135b41;
 --ui-card-hover:#7ab99a;
}
body.dark{
 color-scheme:dark;
 --ui-sidebar:#17281e;
 --ui-nav-text:#d1e4d6;
 --ui-nav-hover-bg:#2b4a39;
 --ui-nav-hover-text:#f3fff7;
 --ui-nav-active-bg:#2f5942;
 --ui-nav-active-text:#f4fff6;
 --ui-nav-icon-bg:#243d30;
 --ui-nav-icon:#bdebd0;
 --ui-active-marker:#7ee3ae;
 --ui-streak-bg:#3b3021;
 --ui-streak-text:#f5d29d;
 --ui-elev:0 10px 30px rgba(1,15,9,.18);
 --ui-elev-hover:0 18px 38px rgba(0,11,6,.3);
 --ui-focus:#97edbf;
 --ui-topbar:rgba(23,40,30,.94);
 --ui-scroll-thumb:#557866;
 --ui-btn-ghost:#2b4b39;
 --ui-btn-ghost-text:#d9f8e3;
 --ui-card-hover:#70bf94;
}
body:not(.dark){color-scheme:light}
html{scrollbar-color:var(--ui-scroll-thumb) var(--ui-scroll-track)}
body{background:var(--bg);color:var(--ink)}
.sidebar{
 background:var(--ui-sidebar);
 border-right-color:var(--line);
 box-shadow:3px 0 28px rgba(5,48,29,.025);
}
body.dark .sidebar{background:var(--ui-sidebar);border-right-color:var(--line)}
.sidebar .brand{border-radius:15px;transition:background-color .18s ease}
.sidebar .brand:hover{background:var(--ui-nav-hover-bg)}
.sidebar .brand:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
.sidebar .brand strong{color:var(--ink)}
.sidebar .nav-label{color:var(--muted)}
.sidebar nav{
 scrollbar-color:var(--ui-scroll-thumb) transparent;
 scrollbar-width:thin;
 padding:0 4px 12px 1px;
}
.sidebar nav a,
body.dark .sidebar nav a{
 position:relative;
 display:flex;
 min-height:48px;
 margin:1px 0;
 padding:10px 12px 10px 14px;
 gap:12px;
 border:1px solid transparent;
 border-radius:12px;
 background:transparent;
 color:var(--ui-nav-text);
 text-decoration:none;
 font-weight:650;
 line-height:1.4;
 overflow-wrap:anywhere;
 transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sidebar nav a b{
 flex:0 0 28px;
 min-width:28px;
 min-height:30px;
 display:grid;
 place-items:center;
 border-radius:9px;
 background:var(--ui-nav-icon-bg);
 color:var(--ui-nav-icon);
 font-size:19px;
 line-height:1;
 transition:background-color .16s ease,color .16s ease;
}
.sidebar nav a i{
 background:var(--ui-nav-icon-bg);
 color:var(--ui-nav-icon);
 border:1px solid var(--line);
 padding:4px 8px;
 border-radius:8px;
 white-space:nowrap;
 font-style:normal;
 font-size:10px;
}
.sidebar nav a:is(:hover,:focus-visible):not(.active):not([aria-current="page"]),
body.dark .sidebar nav a:is(:hover,:focus-visible):not(.active):not([aria-current="page"]){
 background:var(--ui-nav-hover-bg);
 color:var(--ui-nav-hover-text);
 border-color:var(--ui-card-hover);
 box-shadow:inset 3px 0 0 var(--ui-active-marker);
}
.sidebar nav a:is(.active,[aria-current="page"]),
body.dark .sidebar nav a:is(.active,[aria-current="page"]),
.sidebar nav a:is(.active,[aria-current="page"]):hover,
body.dark .sidebar nav a:is(.active,[aria-current="page"]):hover{
 background:var(--ui-nav-active-bg);
 color:var(--ui-nav-active-text);
 border-color:var(--ui-card-hover);
 box-shadow:inset 4px 0 0 var(--ui-active-marker);
 font-weight:800;
}
.sidebar nav a:is(:hover,:focus-visible,.active,[aria-current="page"]) b{
 background:var(--ui-nav-active-bg);
 color:var(--ui-nav-active-text);
}
.sidebar nav a:is(:hover,:focus-visible,.active,[aria-current="page"]) i{
 background:var(--ui-nav-active-bg);
 color:var(--ui-nav-active-text);
 border-color:var(--ui-card-hover);
}
.sidebar nav a:focus-visible,
body.dark .sidebar nav a:focus-visible{
 outline:3px solid var(--ui-focus);
 outline-offset:2px;
}
.sidebar nav a:active{transform:scale(.992)}
.sidebar .side-bottom{padding-top:10px;border-top:1px solid var(--line)}
.sidebar .streak{
 background:var(--ui-streak-bg);
 color:var(--ink);
 border:1px solid var(--line);
}
.sidebar .streak small{color:var(--ui-streak-text)}
.sidebar .side-bottom p{color:var(--muted);line-height:1.55}
.topbar{
 position:sticky;
 top:0;
 z-index:5;
 background:var(--ui-topbar);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 border-bottom-color:var(--line);
}
body.dark .topbar{background:var(--ui-topbar)}
.topbar .top-left>span{color:var(--muted)}
.topbar .top-left strong{color:var(--green)}
.topbar .top-right>span:first-child{color:var(--muted)}
.icon-button{border-color:var(--line);color:var(--ink)}
.icon-button:hover,
body.dark .icon-button:hover{background:var(--ui-nav-hover-bg);color:var(--ui-nav-hover-text);border-color:var(--ui-card-hover)}
#theme{display:grid;place-items:center}
#theme[aria-pressed="true"]{border-color:var(--ui-card-hover)}
.btn,.primary,.round,.icon-button,.mini,.select,.input{
 transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn.ghost{background:var(--ui-btn-ghost);color:var(--ui-btn-ghost-text)}
.btn.ghost:hover{background:var(--ui-nav-active-bg);color:var(--ui-nav-active-text)}
.btn.outline:hover{background:var(--ui-nav-hover-bg);color:var(--ui-nav-hover-text);border-color:var(--ui-card-hover)}
.btn:focus-visible,.primary:focus-visible,.icon-button:focus-visible,
.select:focus-visible,.input:focus-visible,.mini:focus-visible{
 outline:3px solid var(--ui-focus);
 outline-offset:2px;
}
body.dark .btn:not(.ghost):not(.outline){background:#288964;color:#ffffff}
body.dark .btn:not(.ghost):not(.outline):hover{background:#3ca779;color:#081d11}
body.dark .select,body.dark .input,body.dark .flash-repeat-label input{
 color:var(--ink);
 background:var(--surface);
 border-color:var(--line);
}
body.dark .select option{background:var(--surface);color:var(--ink)}
body.dark .eyebrow{color:#9ae5bd}
body.dark .flashcard .hint,
body.dark .flashcard .roman,
body.dark .extra-vocab .extra-roman,
body.dark .extra-hub-link small{color:var(--muted)}
body.dark .flashcard .reveal{color:#90e2b4}
body.dark .tip{background:#244633;color:#d4f3de;border:1px solid #3b6550}
body.dark .word-char,body.dark .sentence .zh,body.dark .quiz-char{color:var(--ink)}
body.dark .flashcard{box-shadow:var(--ui-elev)}
body.dark .stat .emoji{background:#304c3c}
body.dark .course .han-icon{filter:brightness(.88)}
body.dark .goal{border-color:var(--line)}
body.dark .pill{color:var(--ink);border:1px solid var(--line)}
body.dark .top-left strong{color:#a8e6c1}
body.dark #flashAudioStatus{color:var(--muted)}
:is(.course,.stat,.panel,.word,.sentence,.extra-vocab,.extra-hub-link,.flashcard){
 border-color:var(--line);
 box-shadow:var(--ui-elev);
}
@media(hover:hover) and (pointer:fine){
 :is(.course,.word,.sentence,.extra-vocab,.extra-hub-link):hover{
  border-color:var(--ui-card-hover);
  box-shadow:var(--ui-elev-hover);
  transform:translateY(-2px);
 }
}
.flash-audio-options{
 border-color:var(--line);
 box-shadow:var(--ui-elev);
}
.flash-audio-options select,
.extra-voice-chooser select{max-width:100%}
.flash-audio-options #flashAudioStatus{overflow-wrap:anywhere}
.extra-course .extra-hero{box-shadow:var(--ui-elev)}
@media(max-width:950px){
 .sidebar{box-shadow:14px 0 38px rgba(0,13,7,.23)}
 .sidebar nav{padding-bottom:12px}
}
@media(max-width:620px){
 .sidebar nav a{min-height:46px}
 .flash-audio-options{padding:14px}
 .flash-language-label,.flash-language-label select{max-width:100%}
 .topbar{backdrop-filter:blur(10px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .sidebar nav a,.sidebar nav a b,.btn,.primary,.round,.icon-button,.mini,.select,.input,
 :is(.course,.stat,.panel,.word,.sentence,.extra-vocab,.extra-hub-link,.flashcard){
  transition:none;
  animation:none;
 }
 .sidebar nav a:active{transform:none}
}
@media(prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
 :is(.course,.word,.sentence,.extra-vocab,.extra-hub-link):hover{transform:none}
}
/* v9.12 – Thai speech fidelity messaging: visible when browser lacks a Thai voice */
.thai-voice-warning{margin:13px 0 16px;padding:13px 16px;border:1px solid #a56a2c;border-radius:12px;background:#fff0d6;color:#633a12;font-weight:650;line-height:1.6}
.thai-voice-warning[data-ready="true"]{background:#e5f7eb;color:#155d37;border-color:#5cab7c}
body.dark .thai-voice-warning{background:#49331d;color:#ffe1af;border-color:#a47739}
body.dark .thai-voice-warning[data-ready="true"]{background:#204932;color:#d5ffe2;border-color:#589973}
.thai-voice-warning:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}