@import url("./ui/a11y.css");
/* CHU-1455：僅供六個學習外框使用；沿用既有行為及排版。 */
:root {
  --ink:var(--q-text); --muted:var(--q-text-2); --blue:var(--q-blue-600);
  --blue-soft:var(--q-info-bg); --blue-pale:var(--q-paper);
  --yellow:var(--q-amber-300); --yellow-soft:var(--q-remind-bg);
  --green:var(--q-success); --green-soft:var(--q-success-bg);
  --orange:var(--q-remind); --orange-soft:var(--q-remind-bg); --red:var(--q-error);
  --cream:var(--q-paper); --white:var(--q-surface); --line:var(--q-line);
  --paper:var(--q-paper); --paper-2:var(--q-surface); --book-ink:var(--q-ink-900);
  --edge:var(--q-line-strong); --shadow:var(--q-shadow-2); --radius:var(--q-r-lg);
  --anim-muted:var(--q-text-2); --anim-accent:var(--q-blue-600);
  --chrome-band:var(--q-blue-600); --chrome-band-bg:var(--q-info-bg); --chrome-band-fg:var(--q-info);
}
body.band-low,body[data-chrome-band="low"] {
  --chrome-band:var(--q-band-low); --chrome-band-bg:var(--q-band-low-bg); --chrome-band-fg:var(--q-band-low-fg);
  --radius:var(--q-r-xl);
}
body.band-mid,body[data-chrome-band="mid"] {
  --chrome-band:var(--q-band-mid); --chrome-band-bg:var(--q-band-mid-bg); --chrome-band-fg:var(--q-band-mid-fg);
  --radius:var(--q-r-lg);
}
body.band-high,body[data-chrome-band="high"] {
  --chrome-band:var(--q-band-high); --chrome-band-bg:var(--q-band-high-bg); --chrome-band-fg:var(--q-band-high-fg);
  --radius:var(--q-r-md);
}
body { background:var(--q-paper); color:var(--q-text); font-family:var(--q-font); }
button,input,textarea,select { font-family:var(--q-font); }
.chrome-logo { display:block; flex:none; object-fit:contain; }
.brand { color:var(--q-text); }
body:not([data-chrome-band]) .top { background:var(--q-surface); }
.top .chrome-logo { margin:10px; }
.brand .chrome-logo { margin:10px 0; }
.home .chrome-logo { margin:0; }
.home { background:var(--q-surface); }
.bands { background:var(--chrome-band-bg); }
.bands button[aria-selected="true"],.bands button[aria-pressed="true"] {
  background:var(--chrome-band-bg);color:var(--chrome-band-fg);box-shadow:inset 0 -3px 0 var(--chrome-band-fg);
}
.tabs .tab[aria-selected="true"],.subjects .subj[aria-pressed="true"] {
  background:var(--chrome-band-bg);color:var(--chrome-band-fg);border-color:var(--chrome-band-fg);
}
.card.low .tag { background:var(--q-band-low-bg);color:var(--q-band-low-fg); }
.card.mid .tag { background:var(--q-band-mid-bg);color:var(--q-band-mid-fg); }
.card.high .tag { background:var(--q-band-high-bg);color:var(--q-band-high-fg); }
button,input:not([type="hidden"]),select,summary,a.link,.back,.home,.anim-map,.other a,.next a,.notice a,.modal .bar a {
  min-height:var(--q-tap);min-width:var(--q-tap);
}
a.link,.next a,.notice a,.modal .bar a { display:inline-flex;align-items:center; }
.icon-btn,.listen,.ops button { min-width:var(--q-tap);min-height:var(--q-tap); }
.switch { min-height:var(--q-tap);cursor:pointer; }
.switch input { min-height:var(--q-tap);height:var(--q-tap);width:48px;min-width:48px;background:var(--q-text-2); }
.switch input::after { top:13px; }
.switch input:checked::after { transform:translateX(24px); }
button,input,textarea,select { border-color:var(--q-text-2); }
.icon-btn,.sound,.zy-all,.voice,.tab,.mini,.fin input,textarea,.reflect input,.input-row input,.ops button,.add {
  border-color:var(--q-text-2);
}
.btn { box-shadow:var(--q-shadow-2); }
.btn.warm { box-shadow:var(--q-shadow-2); }
.bands button,.chip,.sample,.pill,.tag,.st { border-radius:var(--q-r-pill); }
.icon-btn,.sound,.mini { border-radius:var(--q-r-md); }
footer,.foot { color:var(--q-text-2);font-family:var(--q-font); }
#progressControls { background:var(--q-surface);border-top:1px solid var(--q-line);border-radius:var(--q-r-md); }
#progressControls button { background:var(--q-surface)!important;color:var(--q-text)!important;border-color:var(--q-text-2)!important;border-radius:var(--q-r-md)!important; }
.anim-panel { --anim-muted:var(--q-text-2);--anim-accent:var(--q-blue-600); }
.entry.map .ic { background:var(--q-band-mid-fg); }
.due-card { background:var(--q-remind-bg); }
.route-card { background:var(--q-band-mid-bg); }
.tab { color:var(--q-text-2); }
/* 注音大小沿用，主文字提高至品牌建議下限。 */
body.band-low,body[data-chrome-band="low"] { --fs:28px; }
.band-low .sent-text { font-size:max(1em,28px); }
.band-low .anim-panel :is(p,label,button,summary,.anim-meta,.anim-card b,.anim-concept,.anim-next-label,.anim-start,.anim-map) { font-size:28px; }
/* 雙層焦點環：白紙間隔、品牌藍外環。SVG 節點另外標示外框。 */
body :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:3px solid var(--q-blue-600)!important;outline-offset:3px;
  box-shadow:0 0 0 3px var(--q-paper)!important;
}
.unit-graph .gn:focus-visible rect { stroke:var(--q-blue-600);stroke-width:4; }
.zy-all { min-height:var(--q-tap); }
/* 小螢幕縮放後仍保有 44px：僅擴大站點的點擊外框，座標與連線不變。 */
.unit-graph .gn rect { height:48px; }
.opt,.fopt,.method,.btn.ghost,.anim-panel button,.anim-search input {
  border-color:var(--q-text-2);
}