:root {
  --bg:#000; --fg:#e5e0d5; --meta:#8a8578;
  --panel:#1e1e1e; --panel2:#151515; --border:#2a2620;
  --nav-inactive:#3f3f3f;
  --accent:#f0a06a;         /* orange accent for headings/misc */
}
html,body { background:var(--bg); color:var(--fg); font-family: Georgia, 'Times New Roman', serif; margin:0; }
body { max-width: 900px; margin: 0 auto; padding: 12px 20px 96px; line-height:1.7; font-size:19px; }
h1,h2 { font-family:'Palatino Linotype','Book Antiqua', serif; }
h1 { font-size: 1.6em; margin: 24px 0 .1em; }
h2.subtitle { font-size:1.05em; color:var(--meta); font-weight:normal; margin-top:0; }
/* Romanization + English gloss under the author's name. Kept visually
   subordinate so the Chinese byline reads as the real name. */
h2.subtitle .byline-gloss { display:block; font-size:12px; font-style:italic; margin-top:2px; opacity:.75; }

/* --- Link colors ---
   Base states via :link / :visited (LVHA order). Modern browsers may
   restrict :visited under privacy settings; the reader's JS also adds a
   .visited class to every anchor whose target is in localStorage, so we
   style .visited as a class too — highest priority — covering all sites
   where CSS :visited is blocked or unreliable. */
a          { color: inherit; text-decoration:none; }
a:link     { color: #e5e0d5 !important; text-decoration:none; }
a:visited  { color: #4bcf5b !important; text-decoration:none; }
a:hover    { text-decoration:underline; }
a.visited  { color: #4bcf5b !important; }

/* two-row chapter navigator: dropdown on top, links below */
.chnav {
  display:flex; flex-direction:column; gap:10px;
  padding:12px 16px; background:var(--panel); border:1px solid var(--border); border-radius:4px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:13px;
  margin: 8px 0 16px;
}
.chnav select.chsel {
  display:block; width:100%; box-sizing:border-box;
  padding:8px 30px 8px 12px; background:var(--panel2); color:var(--fg);
  border:1px solid var(--border); border-radius:2px; font-size:13px;
  font-family:inherit; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px 7px;
}
.chnav select.chsel:focus { outline:none; border-color:#4bcf5b; }
.chnav .navlinks {
  display:flex; align-items:center; justify-content:center;
  gap:24px; flex-wrap:wrap;
}
.chnav a.navlink {
  text-decoration:none;
  text-transform: uppercase;
  font-weight:500;
  letter-spacing:0.5px;
  padding: 4px 6px;
  white-space:nowrap;
}
.chnav a.navlink:hover { color: #8be48f !important; text-decoration:underline; }

.crumbs {
  color: var(--meta); font-family: system-ui, sans-serif; font-size:13px;
  margin: 0 0 6px 2px;
}
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }

.content div { margin: 0 0 1em 0; }
.status-missing { padding:16px; background:var(--panel); border:1px dashed var(--border); border-radius:8px; color:var(--meta); }

/* source bar (MTL vs fresh translation) */
.srcbar { font-family: system-ui, sans-serif; font-size: 13px; margin: 0 0 18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.src-badge { padding: 2px 9px; border-radius: 10px; }
.src-badge.fresh { background:#173a1f; color:#8be48f; border:1px solid #2c5a34; }
.src-badge.mtl { background:var(--panel); color:var(--meta); border:1px solid var(--border); }
.src-toggle { color:#f0a06a !important; text-decoration:none; }
.src-toggle:hover { text-decoration:underline; }

/* fresh-translation body */
.fresh-translation h3.scene { font-family:system-ui,sans-serif; font-size:0.8em; letter-spacing:1px; text-transform:uppercase; color:var(--meta); margin:1.7em 0 0.6em; font-weight:600; }
.fresh-translation hr { border:none; border-top:1px solid var(--border); width:38%; margin:1.8em auto; }
.fresh-translation blockquote { margin:1em 0; padding:0.6em 1em; border-left:3px solid var(--accent); background:var(--panel); color:var(--fg); font-family:system-ui,sans-serif; font-size:0.92em; border-radius:0 4px 4px 0; }
.fresh-translation p { margin:0 0 1em 0; }
.fresh-translation em { color:#cdbfae; }
/* spec table sits inside the same "card" as a system readout: panel bg,
   orange left-accent, right-rounded corners; scrolls horizontally if needed */
.fresh-translation .table-wrap { margin:1em 0; padding:0.6em 1em; background:var(--panel); border-left:3px solid var(--accent); border-radius:0 4px 4px 0; overflow-x:auto; }
.fresh-translation table.spec { border-collapse:collapse; width:100%; font-family:system-ui,sans-serif; font-size:0.92em; }
.fresh-translation table.spec th, .fresh-translation table.spec td { padding:0.45em 0.8em; text-align:left; vertical-align:top; border-bottom:1px solid #3a352c; }
.fresh-translation table.spec tbody tr:last-child td { border-bottom:none; }
.fresh-translation table.spec thead th { color:var(--accent); font-weight:600; border-bottom:1px solid #4c463a; }
.fresh-translation table.spec td:first-child { color:var(--meta); font-weight:600; white-space:nowrap; }
input[type=number], select { font-size:15px; padding:4px 6px; background:var(--panel2); color:var(--fg); border:1px solid var(--border); border-radius:4px; }

/* --- Table of contents -------------------------------------------------
   Two columns, split at an exact 50% by COUNT in index.php (not left to
   multicol height balancing). Width is content-driven: each column is
   max-content wide and rows never wrap, so a longer chapter title in the
   future simply widens the column with no CSS to re-tune. The .toc box is
   the horizontal scroll container, so the PAGE never scrolls sideways. */
.toc {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  font-size: 15px;
  font-family: system-ui, sans-serif;
}
.toccol { flex: 0 0 auto; width: max-content; }
.toc a { display:block; padding:2px 0; text-decoration:none; white-space: nowrap; }
.toc a:hover { text-decoration:underline; }

/* The TOC page gets the full viewport to spend on those two columns, while
   its heading/status/jump blocks keep the 900px reading measure. */
body.toc-page { max-width: none; }
body.toc-page > :not(.toc):not(.toclegend) { max-width: 900px; margin-left:auto; margin-right:auto; }

/* Chapter availability, dimmest = least available. Forced over every link
   state so a visited link cannot make an absent chapter look present. */
/* MTL published at source but not mirrored locally — less dark. */
.toc a.pending, .toc a.pending:link, .toc a.pending:visited, .toc a.pending.visited {
  color: #8a8578 !important;
}
/* Chinese raw held, no MTL at source yet — real dark gray. */
.toc a.rawonly, .toc a.rawonly:link, .toc a.rawonly:visited, .toc a.rawonly.visited {
  color: #4a463f !important;
}
/* Legacy class name, kept in case an older compiled template survives. */
.toc a.missing, .toc a.missing:link, .toc a.missing:visited, .toc a.missing.visited {
  color: #8a8578 !important;
}

.toclegend {
  display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center;
  font-family: system-ui, sans-serif; font-size:13px; color:var(--meta);
  margin: 18px auto 10px;
}
.toclegend .swatch { display:inline-block; width:1.1em; text-align:center; }
.toclegend .sw-fresh   { color:var(--fg); }
.toclegend .sw-have::before    { content:"—"; color:#e5e0d5; }
.toclegend .sw-pending::before { content:"—"; color:#8a8578; }
.toclegend .sw-rawonly::before { content:"—"; color:#4a463f; }

/* Chapters with a fresh (from-raw) translation are marked by the ✦ star only.
   Colour is deliberately NOT forced, so green stays RESERVED for VISITED
   links (a:visited / a.visited). A fresh chapter reads cream until visited,
   then turns green like any other visited link. */

table.status {
  border-collapse:collapse; margin: 8px 0 20px; font-family:system-ui,sans-serif; font-size:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
table.status th, table.status td { padding:6px 14px; text-align:left; }
table.status th { color:var(--meta); font-weight:500; border-right:1px solid var(--border); background:var(--panel2); }
table.status .asof { color:var(--meta); font-size:12px; margin-left:6px; }

.jump { display:flex; gap:8px; align-items:center; margin:12px 0; font-family:system-ui,sans-serif; font-size:14px; }
form.jump button { padding: 6px 14px; background:var(--panel2); color:var(--fg); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
form.jump button:hover { background:var(--panel); color:var(--accent); }
footer { color:var(--meta); font-size:12px; text-align:center; padding-top:32px; }

/* Translator's-note hover tooltip: [^1] markers in fresh translations.
   Pure CSS (no JS); native title= attr is the no-CSS fallback. */
.fresh-translation .tn {
  color: var(--accent, #6cb6ff);
  cursor: help;
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  font-weight: 700;
  position: relative;
}
.fresh-translation .tn:hover::after,
.fresh-translation .tn:focus::after {
  content: attr(data-note);
  position: absolute;
  left: 0;
  top: 1.5em;
  z-index: 60;
  width: min(340px, 72vw);
  white-space: normal;
  text-align: left;
  background: var(--panel2, #1b1b1f);
  color: var(--fg, #e8e8e8);
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  padding: 0.55em 0.75em;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  vertical-align: baseline;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* TOC video-recap blurb */
.videonote {
  margin: 0 0 18px; padding: 10px 14px;
  background: var(--panel); border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0; color: var(--fg);
  font-family: system-ui, sans-serif; font-size: 0.92em; line-height: 1.5;
}
.videonote a { color: #f0a06a !important; text-decoration: underline; }