/* Study library: shared reading surface, then 1200 / 900 / 600px layouts. */
:root {
  --bg:#f3f2ed; --paper:#fff; --ink:#233129; --muted:#58685e;
  --line:#d9dfd8; --soft:#edf0e9; --accent:#245b45; --accent2:#e8f1eb;
  --gold:#795715; --gold2:#fbf1d9; --danger:#a44337;
  --reader-base:19px; --reader-title:30px; --reader-note:17px;
}
html[data-reader-size="normal"] { --reader-base:17px; --reader-title:26px; --reader-note:16px; }
html[data-reader-size="xlarge"] { --reader-base:22px; --reader-title:34px; --reader-note:20px; }
html[data-theme="night"] {
  color-scheme:dark;
  --bg:#151c18; --paper:#1e2822; --ink:#edf2e9; --muted:#b9c6bc;
  --line:#405247; --soft:#29382f; --accent:#b0d7b8; --accent2:#2b4234;
  --gold:#f0ce8c; --gold2:#463b26; --danger:#ffb0a2;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body.study-library-page {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Noto Sans JP",sans-serif;
  line-height:1.65;
}
button,input,select { font:inherit; }
button { cursor:pointer; color:var(--ink); touch-action:manipulation; }
button:disabled { cursor:default; opacity:.6; }
input[type="checkbox"] { cursor:pointer; accent-color:var(--accent); }
a { color:var(--accent); text-underline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--accent); outline-offset:3px;
}
button,select,input { max-width:100%; }
[hidden],.hidden-filter,.sheet { display:none!important; }
html body.study-library-page .nb-header { background:var(--paper); border-color:var(--line); color:var(--ink); }
html body.study-library-page .nb-header :is(.nb-brand,.nb-section,.nb-global a,.nb-menu) { min-width:44px; min-height:44px; align-items:center; }
html[data-theme="night"] body.study-library-page .nb-header a { color:var(--ink); }
html[data-theme="night"] body.study-library-page .nb-header .nb-brand .nb-brand-name { color:var(--ink); }
html[data-theme="night"] body.study-library-page .nb-header .nb-menu span { background:var(--ink); }

/* Wide layout. Sidebar and reading column keep independent, bounded widths. */
.app {
  width:min(1440px,100%); margin-inline:auto; padding:24px 24px 64px;
  display:grid; grid-template-columns:208px minmax(0,1fr); gap:28px; align-items:start;
}
.sidebar { position:sticky; top:88px; max-height:calc(100dvh - 104px); overflow:auto; display:grid; gap:18px; min-width:0; padding:4px; }
.brand small { display:block; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.12em; }
.brand h1 { margin:6px 0 8px; font-size:23px; line-height:1.4; letter-spacing:-.025em; }
.brand-home { display:block; min-height:44px; color:var(--ink); text-decoration:none; }
.home-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.nav { display:grid; gap:8px; }
.nav-btn { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid transparent; border-radius:10px; padding:9px 12px; background:transparent; font-weight:750; }
.nav-btn.active { border-color:var(--line); background:var(--paper); color:var(--accent); }
.count { padding:2px 8px; background:var(--soft); color:var(--muted); border-radius:20px; font-size:12px; }
.nav-btn.active .count { background:var(--accent2); color:var(--accent); }
.side-card { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.side-card .label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; color:var(--muted); font-size:12px; }
.side-card strong { color:var(--ink); }
.bar { height:5px; overflow:hidden; margin-top:10px; background:var(--soft); border-radius:6px; }
.bar span { display:block; height:100%; width:0; background:var(--accent); }
.side-actions { display:grid; gap:8px; }
.side-action,.hand-btn { min-height:44px; padding:8px 10px; text-align:left; border:1px solid var(--line); border-radius:9px; background:var(--paper); font-size:14px; }
.side-action.active { background:var(--gold2); color:var(--gold); }
.hand-btn { color:var(--accent); background:var(--accent2); font-weight:750; }
.main { min-width:0; width:100%; max-width:1040px; }
.topline { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.title-wrap { min-width:0; }
.kicker { color:var(--muted); font-size:10px; letter-spacing:.1em; font-weight:750; }
.title-wrap h2 { margin:2px 0 0; font-size:28px; line-height:1.35; letter-spacing:-.02em; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.reader-size { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.reader-size-label { padding-inline:6px; font-size:12px; color:var(--muted); }
.reader-size button { min-width:44px; min-height:44px; padding:4px 6px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:13px; }
.reader-size button.active { background:var(--accent); color:var(--paper); }
html[data-theme="night"] .reader-size button.active { color:#16231b; }
.ghost { min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-size:13px; }
/* Equivalent actions remain in the sidebar/bottom bar and filter toolbar. */
#topHandBtn,#resetStateViewBtn { display:none; }

/* Complete statistics fit one strip at every width. */
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 12px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper); }
.metric { min-width:0; min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px; border:0; border-right:1px solid var(--line); background:transparent; }
.metric:last-child { border-right:0; }
.metric strong { font-size:19px; line-height:1.3; font-variant-numeric:tabular-nums; }
.metric span { font-size:12px; color:var(--muted); }
.metric-action.active { background:var(--gold2); color:var(--gold); }
.metric-action.active span { color:var(--gold); }
.toolbar { position:sticky; top:72px; z-index:30; margin-bottom:10px; padding-block:6px; background:var(--bg); scroll-margin-top:88px; }
.toolbox { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.search-wrap { position:relative; display:flex; align-items:center; gap:8px; flex:1 1 280px; min-width:0; }
.search-wrap:before { content:'⌕'; position:absolute; left:13px; top:8px; color:var(--muted); font-size:20px; pointer-events:none; }
.field,select,.clear-filter { width:100%; min-width:0; height:46px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font-size:15px; }
.field { flex:1; padding:8px 12px 8px 38px; }
.field::placeholder { color:var(--muted); opacity:1; }
.toolbox select { flex:1 1 140px; width:auto; padding:6px 8px; }
.clear-filter { flex:0 0 52px; width:52px; padding:6px 8px; background:var(--accent2); color:var(--accent); font-weight:750; }
.statusline { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:10px 0; font-size:13px; color:var(--muted); }
.statusline strong { color:var(--ink); }

/* One reading card, with fixed roles for title, level, and actions. */
.cards { display:grid; gap:16px; width:100%; margin:0 0 28px; }
.study-card { min-width:0; overflow:clip; border:1px solid var(--line); border-radius:13px; background:var(--paper); scroll-margin-top:180px; }
.study-card.done-row { border-inline-start:4px solid var(--accent); }
.study-head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'title meta' 'actions memory'; align-items:center; gap:10px 16px; padding:16px 18px; border-bottom:1px solid var(--line); }
.study-title-wrap { grid-area:title; min-width:0; }
.study-word-line { display:flex; align-items:center; gap:10px; min-width:0; }
.study-title { min-width:0; font-size:var(--reader-title); line-height:1.5; font-weight:800; overflow-wrap:anywhere; }
.study-reading { color:var(--muted); font-size:calc(var(--reader-base) * .85); }
.study-side { display:contents; }
.study-meta { grid-area:meta; justify-self:end; color:var(--muted); font-size:13px; }
.study-actions { grid-area:actions; display:flex; flex-wrap:wrap; gap:8px; }
.memory-toggle { grid-area:memory; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:13px; cursor:pointer; }
.memcheck { flex:0 0 22px; width:22px; height:22px; margin:0; }
.study-action { min-height:44px; min-width:44px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:14px; font-weight:650; }
.star.on { color:var(--gold); border-color:var(--gold); background:var(--gold2); }
.word-audio,.icon-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:6px; min-width:44px; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); font-size:18px; }
.word-audio { flex-basis:44px; width:44px; height:44px; padding:0; }
.study-example .example-audio::after { content:'朗讀'; font-size:13px; font-weight:650; }
.study-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.study-block { min-width:0; padding:12px 18px; border-bottom:1px solid var(--line); }
.study-block:last-child { border-bottom:0; }
.study-block:nth-child(odd):not(.wide) { border-right:1px solid var(--line); }
.study-block.wide { grid-column:1/-1; }
.study-label { margin-bottom:4px; color:var(--accent); font-size:13px; font-weight:750; }
.study-value { font-size:var(--reader-base); line-height:1.8; overflow-wrap:anywhere; }
.study-value.meaning { font-weight:700; }
.study-value.note-text { font-size:var(--reader-note); color:var(--muted); }
.study-example-text { min-width:0; }
.example-ja-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.furi-example { min-width:0; font-size:var(--reader-base); line-height:2.15; overflow-wrap:anywhere; }
ruby { ruby-align:center; ruby-position:over; }
rt { color:var(--muted); font-size:.6em; font-weight:500; }
.furi-loading { opacity:.8; }
.study-translation { margin-top:8px; padding:8px 12px; border-left:3px solid var(--line); background:var(--soft); color:var(--ink); font-size:calc(var(--reader-base) * .94); line-height:1.8; overflow-wrap:anywhere; }
.study-type-line { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:var(--reader-base); }
.study-article-link { display:inline-flex; align-items:center; min-height:44px; padding:6px 0; font-size:15px; font-weight:700; }
.empty { padding:48px 12px; color:var(--muted); text-align:center; font-size:17px; }
.load-more-sentinel { display:flex; align-items:center; justify-content:center; gap:8px; width:min(100%,520px); min-height:48px; margin:0 auto 24px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--muted); font-size:13px; }
.load-more-sentinel:before { content:'↓'; color:var(--accent); }
.page-notes { margin-top:28px; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.8; }
.page-notes p { margin:10px 0 0; }
.page-notes #statusHint { display:block; margin-top:10px; }
.seo-intro strong { color:var(--ink); }
.study-links { padding:16px 0; border-top:1px solid var(--line); }
.study-links strong { display:block; margin-bottom:8px; font-size:14px; }
.study-links-list { display:flex; flex-wrap:wrap; gap:8px; }
.study-links a { display:inline-flex; align-items:center; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; text-decoration:none; }
.mobile-nav { display:none; }

/* Handwriting remains a shared drawer; the layout script manages modal focus. */
.canvas-drawer { position:fixed; inset:auto 0 0; z-index:100; height:min(74dvh,680px); display:flex; flex-direction:column; background:var(--paper); border-top:3px solid var(--accent); box-shadow:0 -8px 32px #0003; visibility:hidden; transform:translateY(105%); transition:transform .2s ease; padding-bottom:env(safe-area-inset-bottom,0px); }
.canvas-drawer.open { visibility:visible; transform:translateY(0); }
.canvas-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.canvas-left { display:flex; flex-wrap:wrap; gap:6px; }
.canvas-tool,.canvas-close { min-width:44px; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font-size:14px; }
.canvas-tool.active { background:var(--accent2); border-color:var(--accent); color:var(--accent); }
.canvas-tool.danger { color:var(--danger); }
.practice-info { min-width:0; text-align:center; }
.practice-target { font-size:21px; font-weight:750; overflow-wrap:anywhere; line-height:1.5; }
.practice-instruction { margin:2px 0; color:var(--muted); font-size:12px; }
.practice-example-zh { margin-top:4px; color:var(--ink); font-size:15px; overflow-wrap:anywhere; }
.canvas-zone { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; background-color:var(--bg); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; }
.canvas-zone canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.canvas-hint { position:absolute; right:12px; bottom:10px; padding:3px 6px; color:var(--muted); background:var(--paper); font-size:12px; pointer-events:none; }
.toast { position:fixed; left:50%; top:16px; z-index:150; max-width:calc(100% - 24px); padding:9px 14px; border-radius:10px; background:var(--ink); color:var(--paper); font-size:14px; transform:translate(-50%,-20px); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media(hover:hover) {
  .nav-btn:hover,.side-action:hover,.study-action:hover,.word-audio:hover,.icon-btn:hover,.study-links a:hover { background:var(--accent2); }
}

/* Compact desktop and landscape tablet. */
@media(min-width:900px) and (max-width:1199px) {
  .app { grid-template-columns:184px minmax(0,1fr); gap:20px; padding:20px 18px 56px; }
  .brand h1 { font-size:21px; }
  .topline { align-items:flex-start; }
  .title-wrap h2 { font-size:26px; }
  .toolbox { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-wrap { grid-column:1/-1; }
  .toolbox select { width:100%; }
  body[data-study-mode="vocab"] .toolbox { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Portrait tablet and split-window layouts. */
@media(max-width:899px) {
  html { scroll-padding-top:12px; }
  .app { display:block; padding:12px 20px calc(88px + env(safe-area-inset-bottom,0px)); }
  .sidebar { position:static; max-height:none; overflow:visible; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,1fr); align-items:center; gap:12px; padding:0 0 14px; }
  .brand small,.home-link,.side-card,.hand-btn { display:none; }
  .side-actions { grid-column:1/-1; display:flex; gap:8px; }
  .side-action { flex:1; text-align:center; }
  .brand h1 { margin:0; font-size:21px; line-height:1.5; }
  .brand h1 br { display:none; }
  .nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .nav-btn { min-height:44px; justify-content:center; padding:6px 9px; font-size:15px; }
  .main { max-width:none; }
  .topline { margin-bottom:10px; gap:10px; }
  .title-wrap h2 { margin:0; font-size:23px; }
  .kicker { display:none; }
  .toolbar { position:static; padding:0; }
  .toolbox { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-wrap { grid-column:1/-1; }
  .toolbox select { width:100%; }
  body[data-study-mode="vocab"] .toolbox { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mobile-nav { position:fixed; z-index:60; bottom:calc(8px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(480px,calc(100% - 24px)); padding:5px; gap:3px; border:1px solid var(--line); border-radius:13px; background:var(--paper); box-shadow:0 4px 20px #0002; }
  .mobile-nav button { min-height:46px; min-width:0; padding:6px 3px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:700; }
  .mobile-nav button.active { color:var(--accent); background:var(--accent2); }
  .canvas-head { grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 12px; }
  .canvas-left { grid-column:1; grid-row:1; }
  .canvas-close { grid-column:2; grid-row:1; }
  .practice-info { grid-column:1/-1; grid-row:2; }
}

/* Phone. Keep controls on two compact rows and content in a single column. */
@media(max-width:599px) {
  .app { padding:10px 12px calc(88px + env(safe-area-inset-bottom,0px)); }
  .sidebar { grid-template-columns:1fr; gap:8px; padding-bottom:12px; }
  .brand h1 { font-size:20px; }
  .topline { gap:8px; }
  .title-wrap h2 { font-size:20px; }
  .title-wrap { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .top-actions { margin-left:0; gap:6px; }
  .reader-size-label { display:none; }
  .ghost { padding-inline:10px; }
  .metrics { margin-bottom:10px; }
  .metric { flex-direction:column; gap:0; padding:5px 3px; }
  .metric strong { font-size:18px; }
  .metric span { font-size:12px; white-space:nowrap; }
  .toolbox { gap:8px; padding:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbox select,.field { font-size:16px; }
  .statusline { margin:8px 0 10px; font-size:12px; }
  .statusline #statusHint { line-height:1.6; }
  .cards { gap:12px; }
  .study-head { grid-template-areas:'title title' 'meta memory' 'actions actions'; padding:12px 14px; gap:8px; }
  .study-meta { justify-self:start; }
  .memory-toggle { justify-self:end; }
  .study-title { font-size:var(--reader-title); }
  .study-word-line { gap:8px; }
  .study-body { grid-template-columns:minmax(0,1fr); }
  .study-block { padding:10px 14px; }
  .study-block:nth-child(odd):not(.wide) { border-right:0; }
  .study-action { padding-inline:10px; }
  .study-translation { padding:7px 9px; }
  .canvas-drawer { height:82dvh; }
  .practice-target { font-size:19px; }
  .practice-example-zh { font-size:14px; }
  .canvas-tool { font-size:13px; padding-inline:8px; }
}
html[data-reader-size="xlarge"] .study-body { grid-template-columns:minmax(0,1fr); }
html[data-reader-size="xlarge"] .study-block:nth-child(odd):not(.wide) { border-right:0; }
@media(max-height:600px) { .canvas-drawer { height:90dvh; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .canvas-drawer,.toast { transition:none; }
}
@media print {
  body.study-library-page { background:#fff; color:#000; }
  .app { display:block; padding:0; }
  .sidebar,.toolbar,.top-actions,.mobile-nav,.canvas-drawer,.toast { display:none!important; }
  .study-card { break-inside:avoid; }
}