/* 老人與海中英對照閱讀站 —— 全站樣式
   配色取「加勒比海的日照／曬白的木船／黃昏」：淺色是烈日下的帆布，深色是灣流夜色。
   房規比照 ourisland-notes：CSS 變數 + prefers-color-scheme + data-theme 覆寫。*/
:root{
  --bg:#f4f1e8; --surface:#fffdf7; --ink:#20262c; --muted:#6b7681; --line:#ded8c8;
  --accent:#b06a1f; --accent-ink:#8d5215; --accent-soft:#f6ead6; --chip:#eae5d6;
  --en:#2c3540; --zh:#20262c; --rule:#c9bfa8;
  --mark:#ffe45c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151a; --surface:#171d24; --ink:#dfe4e8; --muted:#8b96a2; --line:#28313a;
    --accent:#e0a45c; --accent-ink:#eebd80; --accent-soft:#2b2114; --chip:#1e262e;
    --en:#c6cfd8; --zh:#dfe4e8; --rule:#313c46;
    --mark:rgba(255,213,64,.34);
  }
}
:root[data-theme="dark"]{
  --bg:#10151a; --surface:#171d24; --ink:#dfe4e8; --muted:#8b96a2; --line:#28313a;
  --accent:#e0a45c; --accent-ink:#eebd80; --accent-soft:#2b2114; --chip:#1e262e;
  --en:#c6cfd8; --zh:#dfe4e8; --rule:#313c46;
  --mark:rgba(255,213,64,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  background:var(--bg); color:var(--ink);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  line-height:1.8; margin:0; padding:0 20px 90px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto}
a{color:var(--accent-ink)}

/* ── 頁首 ───────────────────────────── */
.masthead{padding:52px 0 6px}
.eyebrow{color:var(--muted); font-size:.8rem; letter-spacing:.14em; margin:0 0 10px}
.eyebrow .sep{margin:0 .5em; opacity:.5}
h1{
  font-family:"Noto Serif TC","Songti TC",serif; font-weight:900;
  font-size:clamp(1.9rem,5.5vw,2.7rem); margin:0 0 14px; letter-spacing:.04em; text-wrap:balance;
}
h1 .accent{color:var(--accent)}
.lede{color:var(--muted); max-width:38em; margin:0 0 6px}

/* ── 頂部工具列（sticky） ───────────── */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:12px 0 10px; margin:18px 0 8px; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.topbar a,.topbar button{
  font:inherit; font-size:.8rem; text-decoration:none; color:var(--ink);
  background:var(--chip); border:1px solid var(--line); border-radius:999px;
  padding:3px 13px; cursor:pointer; white-space:nowrap;
}
.topbar a:hover,.topbar button:hover{border-color:var(--accent); color:var(--accent-ink)}
.topbar button.on{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .topbar button.on{color:#0f1419}
.topbar .spacer{margin-left:auto}
.topbar .group{display:flex; gap:6px; align-items:center}
.topbar .glabel{color:var(--muted); font-size:.72rem; letter-spacing:.08em}

/* ── 目錄頁 ─────────────────────────── */
.filterbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:22px 0 10px}
#q{
  flex:1; min-width:220px; font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px;
}
#q:focus{outline:none; border-color:var(--accent)}
.count{color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums}

.part{margin:36px 0 0}
.part>h2{
  font-family:"Noto Serif TC","Songti TC",serif; font-weight:900; font-size:1.15rem;
  margin:0 0 12px; padding-bottom:7px; border-bottom:2px solid var(--accent); letter-spacing:.03em;
}
.toc{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.toc li{margin:0}
.toc a{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:11px 15px; text-decoration:none; color:var(--ink);
}
.toc a:hover{border-color:var(--accent); background:var(--accent-soft)}
.toc .no{
  color:var(--accent); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:.8rem; letter-spacing:.06em; margin-right:.7em;
}
.toc .zh{font-weight:700}
.toc .en{color:var(--muted); font-size:.84rem; margin-left:.5em}
.toc .gist{display:block; color:var(--muted); font-size:.83rem; margin-top:3px; line-height:1.6}
.toc a.read{border-left:3px solid var(--accent)}
.toc a.read .no::after{content:" ✓"; color:var(--accent)}

/* ── 章節頁 ─────────────────────────── */
.chapmast{padding:34px 0 4px}
.chapmast .no{color:var(--accent); font-size:.82rem; letter-spacing:.16em; font-variant-numeric:tabular-nums}
.chapmast h1{font-size:clamp(1.5rem,4.4vw,2.15rem); margin:8px 0 10px}
.chapmast .en{color:var(--muted); font-size:.95rem; font-style:italic; margin:0 0 12px}
.chapmast .gist{
  color:var(--muted); border-left:3px solid var(--rule); padding:2px 0 2px 14px;
  margin:0; max-width:40em;
}

section.sec{margin:44px 0 0; scroll-margin-top:76px}
section.sec>h2{
  font-family:"Noto Serif TC","Songti TC",serif; font-weight:900; font-size:1.2rem;
  margin:0 0 14px; padding-bottom:7px; border-bottom:2px solid var(--accent); letter-spacing:.03em;
}
.sec p{margin:.7em 0}
.sec ul{padding-left:1.4em; margin:.5em 0}
.sec li{margin:.35em 0}
.sec strong{font-weight:700}
.sec em{font-style:italic}

/* 📖 導讀 */
.summary{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 20px 16px}

/* 📕 中英對照 */
.para{margin:0 0 26px; position:relative}
.para>.pno{
  color:var(--accent); font-size:.72rem; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  border-bottom:1px dashed var(--rule); display:block; padding-bottom:4px; margin-bottom:10px;
}
.pair{margin:0 0 14px; padding:2px 10px; border-radius:6px; border-left:2px solid transparent}
.pair:hover{background:var(--accent-soft)}
.pair.pick{background:var(--accent-soft); border-left-color:var(--accent)}
.pair .s-en{color:var(--en); font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:1.02rem; margin:0}
.pair .s-zh{color:var(--zh); margin:.25em 0 0}
.pair .s-en:empty,.pair .s-zh:empty{display:none}
/* 詩節（讚美詩、題詞）：整段一個 token，保留換行 */
.pair .s-en.verse,.pair .s-zh.verse{padding-left:1.1em; border-left:2px solid var(--rule)}
.pair .s-en.verse{font-style:italic}
/* 只有單邊的句子：譯者的中文旁白，或沒等到譯文的英文句 */
.pair.solo{border-left-color:var(--rule)}
.pair.solo .s-zh{color:var(--muted); font-size:.95rem}
hr.starbreak{border:none; border-top:1px dashed var(--rule); width:38%; margin:22px auto}
body.only-en .s-zh,body.only-zh .s-en{display:none}
body.only-en .pair,body.only-zh .pair{margin-bottom:9px}

/* 📚 單字 */
.vocab{display:grid; gap:10px}
details.word{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
details.word>summary{
  list-style:none; cursor:pointer; padding:11px 44px 11px 16px; position:relative;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em;
}
details.word>summary::-webkit-details-marker{display:none}
details.word>summary::after{content:"＋"; position:absolute; right:16px; top:10px; color:var(--accent)}
details.word[open]>summary::after{content:"－"}
details.word>summary:hover{background:var(--accent-soft)}
details.word[open]>summary{border-bottom:1px solid var(--line)}
.word .idx{color:var(--accent); font-variant-numeric:tabular-nums; font-size:.8rem; font-weight:700; min-width:1.6em}
.word .term{
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:700; font-size:1.05rem;
}
.word .ipa{color:var(--muted); font-size:.85rem}
.word .gloss{color:var(--muted); font-size:.86rem; flex-basis:100%}
body.quiz .word .gloss,body.quiz .word .ipa{filter:blur(4.5px); transition:filter .12s}
body.quiz .word:hover .gloss,body.quiz .word:hover .ipa,
body.quiz details.word[open] .gloss,body.quiz details.word[open] .ipa{filter:none}
.word .wbody{padding:10px 16px 14px; font-size:.93rem}
.word .wbody ul{margin:0; padding-left:1.3em}
.word .wbody li{margin:.3em 0}

/* 🏛️ 典故 */
.allusions{display:grid; gap:9px}
.allusion{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:11px 16px}
.allusion h3{font-family:"Noto Serif TC","Songti TC",serif; font-size:1rem; margin:0 0 .3em; color:var(--accent-ink)}
.allusion p{margin:0; font-size:.93rem}

/* ── 章節前後導航 ───────────────────── */
.chapnav{display:flex; gap:10px; margin:52px 0 0; padding-top:18px; border-top:1px solid var(--line)}
.chapnav a{
  flex:1; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; text-decoration:none; color:var(--ink); font-size:.88rem;
}
.chapnav a:hover{border-color:var(--accent); background:var(--accent-soft)}
.chapnav a.next{text-align:right}
.chapnav .dir{display:block; color:var(--muted); font-size:.75rem; letter-spacing:.1em; margin-bottom:2px}
.chapnav .none{flex:1}

mark{background:var(--mark); color:inherit; border-radius:2px; padding:0 1px}

/* ── 畫線（螢光筆）與選取工具列 ───────────── */
/* --mark 已在主題變數裡分淺／深色，這裡不再另外覆寫顏色 */
mark.hl{background:var(--mark); color:inherit; border-radius:2px; padding:.06em 1px; cursor:pointer}

#seltools,#hlremove{position:absolute; z-index:60; display:flex; gap:6px}
#seltools[hidden],#hlremove[hidden]{display:none}
#seltools button,#hlremove{
  font:inherit; font-size:.82rem; font-weight:700; white-space:nowrap;
  padding:6px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
:root[data-theme="dark"] #seltools button,:root[data-theme="dark"] #hlremove{color:#0f1419}
#seltools button:hover,#hlremove:hover{filter:brightness(1.12)}
#hlremove{background:#a4402f; border-color:#a4402f; color:#fff}
:root[data-theme="dark"] #hlremove{color:#fff}

/* 目錄頁：有畫線的章節掛個記號 */
.toc a .hlmark{color:var(--accent); font-size:.78rem; margin-left:.5em; font-variant-numeric:tabular-nums}

footer.colophon{
  margin-top:60px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.8rem;
}
footer.colophon p{margin:.3em 0}

@media (max-width:560px){
  body{padding:0 14px 70px}
  .topbar{gap:6px}
  .topbar a,.topbar button{padding:3px 10px; font-size:.76rem}
  .chapnav{flex-direction:column}
}
@media print{
  .topbar,.chapnav,.filterbar{display:none}
  body{padding:0}
  details.word{break-inside:avoid}
  details.word>summary::after{display:none}
}