:root{
  --bg:#f6f4 ee; --bg:#f6f4ee; --panel:#fffdf8; --ink:#26312a; --muted:#6b7a70;
  --line:#e2ddd0; --accent:#3f7d54; --accent-soft:#e7f0e8; --seediq:#2f6d47;
  --zh:#8a5a2b; --en:#3a4a5a; --chip:#eef0e9; --shadow:0 1px 3px rgba(40,50,40,.08);
  --maxw:1080px;
  --read-scale:1;   /* multiplier for reading-text size; set by the A− / A+ size toggle */
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#171b18; --panel:#1e2420; --ink:#e7ece6; --muted:#9aa89e;
    --line:#2c342e; --accent:#7bbe90; --accent-soft:#233029; --seediq:#8fd0a4;
    --zh:#d9ad74; --en:#a9c0d6; --chip:#26302a; --shadow:0 1px 3px rgba(0,0,0,.3); }
}
:root[data-theme="dark"]{ --bg:#171b18; --panel:#1e2420; --ink:#e7ece6; --muted:#9aa89e;
  --line:#2c342e; --accent:#7bbe90; --accent-soft:#233029; --seediq:#8fd0a4;
  --zh:#d9ad74; --en:#a9c0d6; --chip:#26302a; --shadow:0 1px 3px rgba(0,0,0,.3); }
:root[data-theme="light"]{ --bg:#f6f4ee; --panel:#fffdf8; --ink:#26312a; --muted:#6b7a70;
  --line:#e2ddd0; --accent:#3f7d54; --accent-soft:#e7f0e8; --seediq:#2f6d47;
  --zh:#8a5a2b; --en:#3a4a5a; --chip:#eef0e9; --shadow:0 1px 3px rgba(40,50,40,.08); }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,"Songti SC","Noto Serif CJK SC",serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; cursor:pointer; }

/* ---- top bar (two compact rows; extras tucked behind the ⚙ settings popover) ---- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; flex-direction:column; gap:.45rem;
  padding:.55rem clamp(.8rem,4vw,2rem);
  background:color-mix(in srgb,var(--panel) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.tb-title{ display:flex; align-items:center; gap:.6rem; }
.brand{ display:flex; flex-direction:column; margin-right:auto; min-width:0; cursor:pointer;
  border:1px solid transparent; border-radius:10px; padding:.15rem .4rem; margin-left:-.4rem;
  transition:background .1s, border-color .1s; }
.brand:hover,.brand:focus-visible{ background:var(--accent-soft); border-color:var(--line); outline:none; }
.brand:hover .brand-seediq{ text-decoration:underline; }
.brand-seediq{ font-size:clamp(1.05rem,3.6vw,1.3rem); font-weight:700; color:var(--seediq); letter-spacing:.01em; }
.brand-sub{ font-size:.78rem; color:var(--muted); }
.tb-actions{ display:flex; align-items:center; gap:.4rem; flex:none; }
.icon-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  width:2.1rem; height:2.1rem; border-radius:9px; font-size:1.15rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); }
.tab{
  border:1px solid transparent; background:transparent; padding:.35rem .8rem;
  border-radius:999px; color:var(--muted); font-size:.95rem;
}
.tab.active{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
/* the ℹ About button matches the ⚙ gear (square icon), not a pill tab */
.tab.icon-btn{ width:2.1rem; height:2.1rem; padding:0; border-radius:9px;
  border:1px solid var(--line); font-size:1.15rem; }
.tab.icon-btn.active{ background:var(--panel); border-color:var(--accent); color:var(--accent); }

/* the 📖/🌿 + search strip, sitting full-width under the hero */
/* Five icons, evenly spread edge-to-edge (📖 🌿 📚 ℹ ⚙) */
.app-nav{ display:flex; align-items:stretch; justify-content:space-between; gap:.4rem; margin:0 0 1.2rem; }
.app-nav .nav-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); }
.app-nav .nav-btn.active{ border-color:var(--accent); background:var(--accent-soft); }
/* ℹ/⚙ at the right of a reading-view strip stretch to match the search box height */
.app-nav .icon-btn{ flex:none; width:2.4rem; height:auto; }
.nav-ic{ font-size:1.15rem; line-height:1; }

/* settings icon key: what the nav glyphs mean */
.settings-key{ display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; color:var(--ink); }
.settings-key .nav-ic,.settings-key .key-ic{ font-size:1rem; margin-right:.35rem; }

/* settings popover: floats in the top-right corner, opened by any ⚙ gear (hero + strips) */
.settings-panel{
  position:fixed; top:.7rem; right:clamp(.6rem,3vw,1.2rem); z-index:60; max-width:min(92vw,320px);
  display:flex; flex-direction:column; gap:.75rem;
  padding:.85rem .95rem; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); box-shadow:0 8px 28px rgba(30,40,30,.28);
}
.settings-panel[hidden]{ display:none; }
.settings-group{ display:flex; flex-direction:column; gap:.4rem; }
.settings-lbl{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
/* the reading-unit toggle now sits above the reader, not in the top bar */
.gran-toggle.level-inline{ display:inline-flex; margin:0 0 1rem; }
.lang-toggle,.gran-toggle{ display:flex; gap:.25rem; }
.lang{
  border:1px solid var(--line); background:var(--panel); padding:.28rem .55rem;
  border-radius:8px; font-size:.78rem; color:var(--muted); opacity:.5;
}
.lang.on{ opacity:1; color:var(--ink); border-color:var(--accent); }
.lang[data-lang="s"].on{ color:var(--seediq); }
.gran-toggle{ background:var(--chip); border-radius:9px; padding:2px; }
.level{
  border:none; background:transparent; padding:.3rem .6rem;
  border-radius:7px; font-size:1rem; color:var(--muted); cursor:pointer;
}
.level.on{ background:var(--panel); color:var(--accent); font-weight:700; box-shadow:var(--shadow); }
.ui-lang{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  padding:.28rem .55rem; border-radius:8px; font-size:.78rem; font-weight:600;
}
.ui-lang:hover{ border-color:var(--accent); color:var(--ink); }
.set-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:.4rem .7rem; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer;
}
.set-btn:hover{ border-color:var(--accent); }
.set-btn:disabled{ opacity:.6; cursor:default; }
.set-status{ font-size:.75rem; color:var(--accent); }
.set-meta{ font-size:.7rem; color:var(--muted); }
.size-toggle{ display:flex; gap:.25rem; background:var(--chip); border-radius:9px; padding:2px; }
.size{
  border:none; background:transparent; padding:.3rem .55rem; min-width:2rem;
  border-radius:7px; font-size:.95rem; font-weight:700; color:var(--muted); cursor:pointer;
}
.size:hover{ color:var(--accent); }
.size:disabled{ opacity:.35; cursor:default; }

/* ---- layout ---- */
main{ max-width:var(--maxw); margin:0 auto; padding:clamp(1rem,3vw,2rem); }
.foot{ max-width:var(--maxw); margin:0 auto; padding:1.5rem; color:var(--muted); font-size:.8rem; }

/* ---- plants: filters + grid ---- */
.controls{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1.2rem; }
.search{
  flex:1 1 220px; padding:.55rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:var(--panel); color:var(--ink); font-size:1rem;
}
.chip{
  border:1px solid var(--line); background:var(--chip); color:var(--muted);
  padding:.35rem .7rem; border-radius:999px; font-size:.85rem;
}
.chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* 科 family picker: a native <select> that reads as a chip, at the right of the division row.
   flex:0 1 auto + min-width:0 lets it SHRINK on narrow phones instead of running off the
   right edge (the <select>'s own text then ellipsizes inside the shorter box). */
.fam-select{ flex:0 1 auto; min-width:0; max-width:9.5rem; padding:.35rem .55rem;
  border-radius:999px; appearance:auto; cursor:pointer; text-overflow:ellipsis; }
.count{ color:var(--muted); font-size:.85rem; margin-left:.2rem; }

/* ---- two symmetrical filter panels (left = ethnobotanical uses, right = botany) ---- */
.filter-panels{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.2rem; }
.fpanel{ border:1px solid var(--line); border-radius:12px; background:var(--panel);
  box-shadow:var(--shadow); overflow:hidden; }
.fpanel-h{ font-size:.72rem; letter-spacing:.07em; font-weight:700;
  color:var(--accent); background:var(--accent-soft); padding:.5rem .7rem;
  border:none; border-bottom:1px solid var(--line); width:100%; text-align:left;
  display:flex; align-items:center; gap:.45rem; cursor:pointer; }
.fpanel-h:hover{ background:color-mix(in srgb,var(--accent) 14%, transparent); }
.fph-t{ text-transform:uppercase; flex:none; }
/* the active-filter chip shown while the panel is collapsed (or open) */
.fph-act{ text-transform:none; letter-spacing:0; font-weight:600; font-size:.78rem;
  color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:.05rem .5rem; max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fpanel-h::after{ content:"▾"; font-size:.8rem; transition:transform .12s; flex:none;
  margin-left:auto; transform:rotate(-90deg); }
.fpanel-h.open::after{ transform:rotate(0deg); }
/* collapsed panel: header only, no bottom border seam */
.fpanel-h:not(.open){ border-bottom:none; }
/* accordion row */
.facc{ border-bottom:1px solid var(--line); }
.facc:last-child{ border-bottom:none; }
.facc-h{ display:flex; align-items:center; gap:.4rem; width:100%; text-align:left;
  background:none; border:none; color:var(--ink); padding:.5rem .7rem; font-size:.92rem;
  cursor:pointer; }
.facc-h::before{ content:"›"; color:var(--muted); transition:transform .12s; flex:none;
  display:inline-block; width:.7em; }
.facc.open > .facc-h::before{ transform:rotate(90deg); }
.facc-h:hover{ background:var(--accent-soft); }
.facc-h.on{ background:var(--accent); color:#fff; }
.facc-h.on::before{ color:#fff; }
.facc-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.facc-n{ flex:none; font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.facc-h.on .facc-n{ color:#fff; opacity:.85; }
/* subcategory / family list, revealed when a row is open */
.facc-subs{ background:color-mix(in srgb,var(--accent) 5%, transparent); padding:.15rem 0 .35rem; }
.facc-sub{ display:flex; align-items:center; gap:.4rem; width:100%; text-align:left;
  background:none; border:none; color:var(--muted); padding:.32rem .7rem .32rem 1.5rem;
  font-size:.84rem; cursor:pointer; }
.facc-sub:hover{ background:var(--accent-soft); color:var(--ink); }
.facc-sub.on{ color:var(--accent); font-weight:700; }
.facc-sub.on .facc-name::before{ content:"• "; }

/* transient centred toast (dictionary TBA placeholder, etc.) */
.toast{ position:fixed; left:50%; bottom:2.2rem; transform:translateX(-50%) translateY(.5rem);
  background:var(--ink); color:var(--panel); padding:.6rem 1.1rem; border-radius:999px;
  font-size:.9rem; font-weight:600; box-shadow:var(--shadow); z-index:2000;
  opacity:0; transition:opacity .22s, transform .22s; pointer-events:none; max-width:80vw;
  text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Cards are now uniformly three tight lines, so they can be smaller and denser. */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.7rem; }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.65rem .8rem; box-shadow:var(--shadow); text-align:left; transition:transform .08s;
}
.card:hover{ transform:translateY(-2px); border-color:var(--accent); }
/* One arrangement for every card: three single lines, never wrapping — a name too long
   ellipsizes rather than growing the card to 4–5 rows. */
.card .c-name{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:.1rem .4rem; }
.card .cs{ font-size:1.02rem; font-weight:700; color:var(--seediq);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.card .cc{ font-size:.88rem; color:var(--zh);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; max-width:55%; }
.card .cen{ font-size:.8rem; color:var(--en); margin-top:.04rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .c-sci{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:.1rem .4rem;
  margin-top:.04rem; overflow:hidden; }
.card .csci{ font-size:.74rem; font-style:italic; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.card .cfam{ font-size:.72rem; color:var(--muted); white-space:nowrap; flex:none; }
/* ---- plant detail ---- */
.back{ border:none; background:none; color:var(--accent); padding:.2rem 0; margin-bottom:.6rem; font-size:.9rem; }
.detail-head{ border-bottom:1px solid var(--line); padding-bottom:.55rem; margin-bottom:.7rem; }
.detail-head h1{ margin:0; color:var(--seediq); font-size:calc(2rem * var(--read-scale)); line-height:1.15; }
/* English common name + Latin share ONE line under the Toda name (common name plain, Latin
   italic). The common name tells a reader meeting e.g. "bhngil" in the text that it is
   Makino bamboo. Kept tight so the header stays short. */
.detail-head .name-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .55rem; margin:.12rem 0 .2rem; }
.detail-head .common-en{ color:var(--en); font-weight:500; font-size:calc(1.1rem * var(--read-scale)); }
.detail-head .sci{ font-style:italic; color:var(--muted); font-size:calc(1rem * var(--read-scale)); }
/* One uniform Chinese line: name · family · division (no lone English, no labels). */
.detail-head .meta{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:baseline; color:var(--muted); font-size:calc(.9rem * var(--read-scale)); margin-top:0; }
.block-title{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  margin:1.6rem 0 .5rem; font-weight:700; }

/* ---- reader ---- */
.reader{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.4rem; }
.line{ margin:0; display:flex; gap:.6rem; align-items:baseline; }
.line .para-body{ flex:1; }
.line.s{ color:var(--seediq); font-weight:600; font-size:1.06rem; }
.line.zh{ color:var(--zh); }
.line.en{ color:var(--en); font-size:.95rem; }
.line .lab{ flex:0 0 2.1rem; font-size:.58rem; color:var(--muted); font-weight:700;
  text-align:right; text-transform:uppercase; letter-spacing:.03em; opacity:.55;
  line-height:1.9; }
.w{ border-radius:4px; padding:0 .02em; }
.w:hover{ background:color-mix(in srgb,var(--accent) 22%, transparent); cursor:default; }

/* ---- reading pager (段/句/片/文) ---- */
.pager{ min-height:40vh; }
.unit-sec{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
  font-weight:700; margin:.2rem 0 .7rem; }
.unit-src{ font-size:calc(1.5rem * var(--read-scale)); line-height:2.1; color:var(--seediq); font-weight:600; margin-bottom:1rem; }
.unit-trans{ display:flex; gap:.55rem; align-items:baseline; margin:.35rem 0; font-size:calc(1rem * var(--read-scale)); }
.unit-trans .lab{ flex:0 0 2.2rem; font-size:.58rem; color:var(--muted); font-weight:700;
  text-align:right; text-transform:uppercase; opacity:.55; }
.unit-trans.zh{ color:var(--zh); font-size:calc(1.05rem * var(--read-scale)); }
.unit-trans.en{ color:var(--en); }
.unit-trans.approx{ opacity:.82; }
.unit-trans.approx .lab{ color:var(--accent); opacity:.7; }
.cont{ color:var(--muted); font-style:italic; font-size:.85em; opacity:.7; }
.align-note{ color:var(--muted); font-size:.82rem; font-style:italic; margin:.4rem 0;
  padding:.35rem .6rem; border-left:2px solid var(--line); }
.word-punct{ color:var(--muted); }

/* Uya's cloned-voice reading button (before the Toda line) */
.play-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:1.5em; height:1.5em; margin-right:.4em; padding:0; vertical-align:-.15em;
  font-size:.72em; line-height:1; border:0; border-radius:50%; cursor:pointer;
  color:#fff; background:var(--accent);
  box-shadow:0 1px 3px color-mix(in srgb,var(--accent) 45%, transparent);
  transition:transform .1s ease, background .15s ease; -webkit-appearance:none; }
.play-btn:hover{ transform:scale(1.12); }
.play-btn:active{ transform:scale(.95); }

/* word learning status (on Toda source words) */
.unit-src .w, .unit-src .word-punct{ }
.w{ border-radius:5px; padding:0 .08em; }
.unit-src .w{ cursor:pointer; }
.unit-src .w.status-new{ background:color-mix(in srgb,var(--accent) 15%, transparent); }
.unit-src .w.status-learning{ background:color-mix(in srgb,#e8a13a 34%, transparent); }
.unit-src .w.status-known{ background:transparent; color:color-mix(in srgb,var(--seediq) 60%, var(--muted)); }
.unit-src .w:hover{ outline:2px solid var(--accent); outline-offset:1px; }

/* pager nav */
.pager-nav{ display:flex; align-items:center; justify-content:center; gap:1.2rem;
  margin:1.6rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--line); }
.pg-btn{ width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); font-size:1.3rem; color:var(--accent); box-shadow:var(--shadow); }
.pg-btn:disabled{ opacity:.3; cursor:default; color:var(--muted); }
.pg-pos{ font-size:.9rem; color:var(--muted); min-width:4rem; text-align:center; }

/* word-view popup */
.word-popup{ position:fixed; z-index:60; min-width:180px; max-width:280px;
  background:var(--panel); border:1px solid var(--accent); border-radius:12px;
  box-shadow:0 6px 24px rgba(30,40,30,.28); padding:.6rem .8rem; }
.wp-header{ display:flex; justify-content:space-between; align-items:center; }
.wp-word{ font-size:1.25rem; font-weight:700; color:var(--seediq); }
.wp-close{ border:none; background:none; font-size:1.3rem; color:var(--muted); line-height:1; }
.wp-body{ margin:.35rem 0 .5rem; }
.wp-zh{ color:var(--zh); font-size:1.05rem; }
.wp-en{ color:var(--en); font-size:.92rem; margin-top:.1rem; }
.wp-nodef{ color:var(--muted); font-style:italic; font-size:.9rem; }
.wp-status{ display:flex; gap:.3rem; }
.wp-st{ flex:1; border:1px solid var(--line); background:var(--chip); color:var(--muted);
  border-radius:7px; padding:.28rem .2rem; font-size:.75rem; }
.wp-new.active{ background:color-mix(in srgb,var(--accent) 22%, transparent); color:var(--accent); border-color:var(--accent); }
.wp-learning.active{ background:color-mix(in srgb,#e8a13a 40%, transparent); color:var(--ink); border-color:#e8a13a; }
.wp-known.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* coverage badge */
.cov-badge{
  display:inline-block; margin-left:.6rem; font-size:.68rem; font-weight:600;
  color:var(--muted); background:var(--chip); border:1px solid var(--line);
  border-radius:999px; padding:.05rem .5rem; text-transform:none; letter-spacing:0;
  vertical-align:middle; cursor:help;
}

/* glossed inline words */
.w.has-gloss{ cursor:pointer; border-bottom:1px dotted color-mix(in srgb,var(--seediq) 55%, transparent); }
.w.has-gloss:hover{ background:var(--accent-soft); }
.w.rgloss{ border-bottom-color:color-mix(in srgb,var(--zh) 60%, transparent); }
.seg-toda{ color:var(--seediq); font-weight:600; }

/* gloss popover */
.gloss-pop{
  position:fixed; z-index:50; max-width:260px;
  background:var(--panel); border:1px solid var(--accent); border-radius:10px;
  padding:.5rem .7rem; box-shadow:0 4px 18px rgba(30,40,30,.22);
}
.gp-word{ font-weight:700; color:var(--seediq); font-size:1rem; }
.gp-zh{ color:var(--zh); margin-top:.15rem; }
.gp-en{ color:var(--en); font-size:.9rem; margin-top:.05rem; }
.gp-src{ color:var(--muted,#8a938a); font-size:.72rem; margin-top:.3rem; opacity:.8; }

/* 詞彙表 · Glossary (📚 view) */
.vocab{ max-width:760px; margin:0 auto; padding:0 .2rem 3rem; }
.vocab-head{ padding:.4rem 0 .8rem; }
.vocab-title{ font-size:1.3rem; color:var(--seediq); margin:0; }
.vocab-sub{ font-size:.78rem; color:var(--muted); margin-top:.15rem; }
.vocab-search{
  width:100%; box-sizing:border-box; margin-top:.7rem;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  color:var(--ink); font-size:.95rem; padding:.55rem .75rem;
}
.vocab-search:focus{ outline:none; border-color:var(--accent); }
.vocab-letter{
  position:sticky; top:0; z-index:2;
  background:color-mix(in srgb,var(--accent) 12%, var(--bg,#fff));
  color:var(--accent); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.28rem .6rem; margin:.5rem 0 0; border-radius:6px;
}
.vocab-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .9rem;
  padding:.5rem .3rem; border-bottom:1px solid var(--line);
}
.vr-word{ color:var(--seediq); font-weight:700; font-size:1.02rem; flex:0 0 auto;
  min-width:9rem; }
.vr-root{ color:var(--muted); font-weight:400; font-size:.82rem; margin-left:.35rem; }
.vr-defs{ display:flex; flex-direction:column; gap:.12rem; flex:1 1 12rem; }
.vr-zh{ color:var(--zh); }
.vr-en{ color:var(--en); font-size:.92rem; }
.vr-src{ color:var(--muted); font-size:.72rem; opacity:.8; }
.vr-mt{ color:var(--accent); font-size:.6rem; font-weight:700; margin-left:.25rem;
  vertical-align:super; opacity:.7; cursor:help; letter-spacing:.03em; }
.vocab-empty{ color:var(--muted); padding:1.5rem .3rem; text-align:center; }
.vocab-row{ cursor:pointer; }
.vocab-row:hover{ background:var(--accent-soft); border-radius:6px; }

.vocab-title-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.vocab-rnd{ border:1px solid var(--line); background:var(--panel); border-radius:10px;
  font-size:1.1rem; line-height:1; padding:.35rem .5rem; cursor:pointer; }
.vocab-rnd:hover{ border-color:var(--accent); }

/* domain toggle: 全部 · 民族植物 · 植物形態 */
.vocab-domains{ display:flex; gap:.35rem; margin-top:.6rem; }
.vd{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:999px; padding:.3rem .8rem; font-size:.82rem; cursor:pointer; }
.vd.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* A–Z collapsible sections: each letter opens to reveal its words */
.vocab-sec{ border-bottom:1px solid var(--line); }
.vsec-h{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  border:none; background:none; color:var(--seediq); font-weight:700; font-size:1.15rem;
  padding:.65rem .4rem; cursor:pointer; }
.vsec-h::after{ content:"▸"; margin-left:auto; color:var(--muted); font-size:.9rem;
  transition:transform .15s; }
.vocab-sec.open .vsec-h::after{ transform:rotate(90deg); }
.vsec-h:hover{ color:var(--accent); }
.vsec-n{ color:var(--muted); font-weight:400; font-size:.8rem; }
.vsec-body{ padding-bottom:.5rem; }

/* word card (tap a row / 🎲 random) */
.wc-back{ position:fixed; inset:0; z-index:60; background:rgba(20,26,22,.45);
  display:flex; align-items:flex-start; justify-content:center; padding:8vh 1rem 2rem;
  overflow-y:auto; }
.word-card{ background:var(--panel); border:1px solid var(--accent); border-radius:14px;
  box-shadow:0 8px 30px rgba(20,30,20,.35); max-width:520px; width:100%;
  padding:1rem 1.1rem 1.2rem; }
.wc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.wc-word{ color:var(--seediq); font-weight:700; font-size:1.4rem; }
.wc-close{ border:none; background:none; color:var(--muted); font-size:1.5rem; line-height:1;
  cursor:pointer; padding:0 .2rem; }
.wc-zh{ color:var(--zh); font-size:1.05rem; margin-top:.35rem; }
.wc-en{ color:var(--en); font-size:.95rem; margin-top:.1rem; }
.wc-ex{ margin-top:1rem; border-top:1px solid var(--line); padding-top:.7rem; }
.wc-ex-h{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); font-weight:700; margin-bottom:.5rem; }
.wc-ex-none{ color:var(--muted); font-size:.88rem; }
.wc-ex-row{ margin-bottom:.85rem; }
.wc-ex-s{ color:var(--seediq); line-height:1.4; }
.wc-hit{ font-weight:700; background:color-mix(in srgb,var(--accent) 22%, transparent);
  border-radius:3px; padding:0 .1em; }
.wc-ex-zh{ color:var(--zh); font-size:.9rem; margin-top:.1rem; }
.wc-ex-en{ color:var(--en); font-size:.85rem; margin-top:.05rem; }
.wc-ex-src{ margin-top:.2rem; border:none; background:none; color:var(--accent);
  font-size:.78rem; cursor:pointer; padding:0; }
.wc-ex-src-flat{ color:var(--muted); cursor:default; }

/* table of contents */
.toc{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:.9rem 1.1rem; margin-bottom:1.4rem; box-shadow:var(--shadow);
}
.toc-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); font-weight:700; margin-bottom:.5rem; }
.toc-ch{ display:flex; align-items:baseline; gap:.4rem; width:100%; text-align:left;
  border:none; background:none; color:var(--seediq); font-weight:700; font-size:1rem;
  padding:.3rem 0; cursor:pointer; line-height:1.25; }
/* a 節 toggle inside a chapter: same control, stepped down so the 章 → 節 → 項 levels read
   as a hierarchy rather than three ranks of the same shout */
.toc-ch-sub{ font-weight:600; font-size:.94rem; }
.toc-ch-sub .toc-caret{ font-size:.7rem; opacity:.8; }
.toc-ch-sub .mulu-zh{ font-size:.85rem; }
.toc-caret{ flex:none; color:var(--accent); font-size:.8rem; transition:transform .12s; }
.toc-ch.open .toc-caret{ transform:rotate(90deg); }
.toc-ch-txt{ flex:1 1 auto; min-width:0; }
.toc-group{ margin:.1rem 0 .3rem .3rem; padding-left:1rem; border-left:2px solid var(--line); }
.toc-group[hidden]{ display:none; }
/* rows as a flex column: a plain block <button> gets extra UA layout height that a <div>
   doesn't, which was opening a big gap between the numbered sub-section rows. */
.toc-sec{ display:flex; flex-direction:column; position:relative; width:100%; text-align:left;
  border:none; background:none; color:var(--muted); font-size:.9rem;
  padding:.18rem 1.1rem .18rem 0; cursor:pointer; }
.toc-ch:hover,.toc-sec:hover{ color:var(--accent); }
.toc-idx button.toc-sec::after{ content:"›"; position:absolute; right:.1rem; top:.18rem;
  color:var(--accent); opacity:.5; }
.toc-idx .toc-leaf::after{ content:"›"; margin-left:auto; color:var(--accent); opacity:.55; }
.toc-idx .toc-lbl{ cursor:default; opacity:.75; }
.toc-idx .toc-lbl:hover{ color:inherit; }
/* prev/next section nav inside an opened 目錄 part */
.sec-nav{ display:flex; align-items:center; gap:.6rem; margin:.2rem 0 1rem; flex-wrap:wrap; }
/* the 片/句/段/文 toggle rides at the right end of the top sec-nav bar (one line, not two) */
.sec-nav .gran-toggle.level-inline{ margin:0; flex:none; }
.sec-nav button{ border:1px solid var(--line); background:var(--panel); color:var(--accent);
  border-radius:8px; padding:.25rem .75rem; font-size:.85rem; cursor:pointer; }
.sec-nav button:disabled{ opacity:.4; cursor:default; }
.sec-nav .sec-pos{ color:var(--muted); font-size:.8rem; margin-left:auto; }
/* trilingual 目錄 rows — tightened so the stacked s/zh/en lines don't sprawl */
.mulu-s{ color:var(--seediq); font-weight:600; line-height:1.25; }
.mulu-zh{ color:var(--ink); font-size:.9rem; line-height:1.2; }
.mulu-en{ color:var(--muted); font-size:.82rem; font-style:italic; line-height:1.2; }
.toc-idx .toc-lbl .mulu-zh{ color:var(--muted); }
.heading-row{ font-weight:700; color:var(--ink); font-size:1.15rem; margin:1.4rem 0 .3rem; }
.intro-head{ margin:2.2rem 0 .7rem; padding-bottom:.4rem; border-bottom:2px solid var(--accent); }
.intro-head:first-child{ margin-top:0; }
.intro-title-s{ font-size:1.5rem; font-weight:700; color:var(--seediq); }
.intro-title-sub{ font-size:.9rem; color:var(--muted); margin-top:.1rem; }
.sec-head{ margin:1.4rem 0 .5rem; }
.sec-title-s{ font-size:1.12rem; font-weight:700; color:var(--seediq); }
.sec-title-sub{ font-size:.82rem; color:var(--muted); }

.hidden{ display:none !important; }
.empty{ color:var(--muted); font-style:italic; padding:2rem 0; text-align:center; }
/* Village hero on the landing (a square painting cropped to a banner); Uya's portrait on About. */
.hero{ position:relative; margin:0 0 1.5rem; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.12); }
.hero img{ display:block; width:100%; height:clamp(220px, 32vw, 400px);
  object-fit:cover; object-position:center 58%; }
/* The hero is pure identity: title line then attribution line. ℹ/⚙ moved to the nav strip
   below (2026-07-18), so the caption is a simple stack. */
.hero figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.3rem 1.15rem .95rem;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  display:grid; grid-template-columns:1fr; row-gap:.3rem; }
.hero-title,.hero-byline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .6rem;
  text-shadow:0 1px 4px rgba(0,0,0,.6); }
.hero-title .ht-s{ color:#fff; font-weight:700; font-size:clamp(1.1rem,2.4vw,1.6rem); letter-spacing:.01em; }
.hero-title .ht-zh{ color:#f2f6f0; font-weight:600; font-size:clamp(1rem,2vw,1.4rem); }
.hero-title .ht-en{ color:#e6ebe4; font-style:italic; font-weight:500; font-size:clamp(.82rem,1.5vw,1.05rem); }
.hero-byline .ht-s{ color:#eef3ec; font-weight:600; font-size:clamp(.82rem,1.4vw,1rem); }
.hero-byline .ht-zh{ color:#dde6db; font-size:clamp(.75rem,1.2vw,.9rem); }
.hero-byline .ht-en{ color:#d0d9ce; font-style:italic; font-size:clamp(.72rem,1.1vw,.84rem); }
/* ℹ / ⚙ in the caption's right column, translucent over the photo */
.hero-ic{ justify-self:end; width:2rem; height:2rem; border-radius:8px; font-size:1.05rem;
  background:rgba(20,26,20,.42); border:1px solid rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(3px); }
.hero-ic:hover,.hero-ic[aria-expanded="true"],.hero-ic.active{ background:rgba(20,26,20,.72); border-color:#fff; color:#fff; }
.about-portrait{ margin:0 auto 1.75rem; max-width:560px; text-align:center; }
.about-portrait img{ display:block; width:100%; max-width:560px; height:auto; border-radius:12px; margin:0 auto; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.about-portrait figcaption{ margin-top:.6em; max-width:560px; margin-left:auto; margin-right:auto; }
.about-portrait .portrait-name{ font-weight:600; }
.about-portrait .portrait-note{ color:var(--muted); font-size:.9rem; line-height:1.5; }

/* Plant page: header, reading column and photo share one centered 760px column so their
   left/right edges line up (title aligned with content). The Toda source text is justified
   to both edges. The pager's tall min-height is dropped here so the photo sits directly under
   the text instead of after a big empty gap. */
.detail-head{ max-width:760px; margin-left:auto; margin-right:auto; }
.plant-reader{ max-width:760px; margin-left:auto; margin-right:auto; }
.plant-reader .unit-src{ text-align:justify; }
.plant-reader .pager{ min-height:0; }
.plant-photo{ margin:.2rem auto 1.4rem; max-width:760px; }
.plant-photo img{ display:block; width:100%; max-width:520px; height:auto; margin-left:auto; margin-right:auto; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.plant-photo figcaption{ margin-top:.4em; font-size:.85rem; color:var(--muted); text-align:center; }
.plant-photo figcaption a{ color:var(--muted); }
/* the photo is a link through to the species on 認識植物 — say so on hover */
.plant-photo .photo-link{ display:block; }
.plant-photo .photo-link img{ transition:box-shadow .12s, transform .12s; }
.plant-photo .photo-link:hover img,.plant-photo .photo-link:focus-visible img{
  box-shadow:0 4px 18px rgba(0,0,0,.22); transform:translateY(-2px); }
.plant-photo .photo-link:focus-visible{ outline:none; }
.plant-photo .photo-link:focus-visible img{ outline:2px solid var(--accent); outline-offset:3px; }

/* About: centered column, but prose aligned to both left and right edges. */
.about{ text-align:justify; }
.about p{ max-width:70ch; margin-left:auto; margin-right:auto; font-size:calc(1rem * var(--read-scale)); }
.about .lead{ font-size:1.15rem; }
.about .lead-zh{ margin-top:-.4em; color:var(--muted); }
/* English paragraph then its Chinese, grouped: tighten the gap between the pair and
   keep a fuller gap before the next English paragraph. */
.about .about-en{ margin-bottom:.2em; }
.about .about-zh{ margin-top:0; margin-bottom:.8em; color:var(--muted); }
.about-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  overflow-wrap:anywhere; }