:root {
  --ink: #1d1a16;
  --paper: #faf7f0;
  --paper-2: #f2ece0;
  --muted: #6b6255;
  --rule: #d8cfbe;
  --accent: #7a4b2b;
  --accent-soft: #9a6a45;
  --zh: #2a2620;
  --draft: #b25a00;
  --link: #1f5fa8;
  --max: 1180px;
  --serif: Georgia, 'Songti SC', 'Noto Serif', 'Times New Roman', serif;
  --zh-serif: 'Songti SC', 'Noto Serif CJK SC', 'PMingLiU', 'Source Han Serif SC', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
}
.hidden { display: none !important; }

/* ---- Sign-in ---- */
.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, var(--paper-2), var(--paper));
}
.signin-card {
  text-align: center;
  padding: 2.5rem 0 0;
  width: min(480px, calc(100vw - 2rem));
}
/* Clerk's mounted widget renders at its own natural width (often wider than
   our title column above it), which made the two look misaligned. Constrain
   the widget to fill the same column the title sits in. */
.signin-card .cl-rootBox,
.signin-card .cl-cardBox,
.signin-card .cl-card {
  width: 100% !important;
  max-width: 100% !important;
}
.book-zh { font-family: var(--zh-serif); font-size: 2.6rem; margin: 0; letter-spacing: 0.15em; }
.book-en { color: var(--muted); margin: 0.2rem 0 1.4rem; }
.signin-note { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.signin-fallback { color: var(--draft); font-size: 0.9rem; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.6rem 1.2rem;
  background: rgba(250, 247, 240, 0.96);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.brand {
  font-family: var(--zh-serif); font-size: 1.25rem; font-weight: 600;
  background: none; border: none; cursor: pointer; color: var(--ink);
  letter-spacing: 0.08em;
}
.brand-en { font-family: var(--serif); font-size: 0.7rem; color: var(--muted); letter-spacing: 0; }
.topnav { display: flex; gap: 1rem; flex: 1; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.mode-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.mode-toggle input { cursor: pointer; }

/* ---- Layout ---- */
.view { max-width: var(--max); margin: 0 auto; padding: 2rem 1.2rem 6rem; }
h1, h2, h3 { font-weight: 600; line-height: 1.3; }
a { color: var(--link); }

/* ---- Table of contents ---- */
.toc-head { text-align: center; margin-bottom: 2.5rem; }
.toc-head .zh { font-family: var(--zh-serif); font-size: 2.4rem; letter-spacing: 0.12em; margin: 0; }
.toc-head .en { color: var(--muted); font-style: italic; }
.toc-note { font-size: 0.85rem; color: var(--muted); background: var(--paper-2); border-left: 3px solid var(--accent-soft); padding: 0.6rem 0.9rem; border-radius: 4px; }
.toc-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.toc-item { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.toc-item:hover { background: var(--paper-2); }
.toc-num { font-size: 0.8rem; color: var(--muted); min-width: 4.5rem; }
.toc-zh { font-family: var(--zh-serif); font-size: 1.15rem; }
.toc-en { color: var(--muted); font-style: italic; flex: 1; }
.badge { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.badge-draft { background: #fbe9d3; color: var(--draft); border: 1px solid #eab87f; }
.badge-cond { background: #e7e0f3; color: #5a3da0; border: 1px solid #c3b4e6; }

/* ---- Chapter ---- */
.chapter-head { margin-bottom: 1.4rem; }
.chapter-kicker { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.chapter-zh { font-family: var(--zh-serif); font-size: 2rem; margin: 0.2rem 0; letter-spacing: 0.08em; }
.chapter-en { color: var(--accent); font-style: italic; font-size: 1.2rem; margin: 0; }
.chapter-meta { color: var(--muted); font-size: 0.82rem; margin-top: 0.5rem; display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.chapter-meta button { font: inherit; font-size: 0.82rem; color: var(--link); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

.draft-banner { background: #fbe9d3; border: 1px solid #eab87f; color: #8a4a00; padding: 0.5rem 0.8rem; border-radius: 5px; font-size: 0.85rem; margin-bottom: 1.4rem; }

/* 3-column grid: English / Chinese / comment-pill gutter. Pill lives in its
   own column so it never overlaps text and never overflows the viewport. */
.para-row { display: grid; grid-template-columns: 1fr 1fr 2.6rem; gap: 1.4rem; padding: 0.5rem 0; position: relative; }
body.english-only .para-row { grid-template-columns: 1fr 2.6rem; }
body.english-only .para-zh { display: none; }
.para-en { }
.para-zh { font-family: var(--zh-serif); color: var(--zh); line-height: 2; text-align: justify; }
.para-zh.draft { color: #8a8270; }
.para-zh-missing { color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 0.85rem; }
.para-row.verse { grid-template-columns: 1fr 2.6rem; }
.para-row.condensation .para-en { border-left: 3px solid #c3b4e6; padding-left: 0.8rem; }

.verse { border: none; margin: 1.4rem auto; padding: 0; max-width: 40rem; text-align: center; color: var(--zh); }
.verse-line { font-family: var(--zh-serif); }
.verse .verse-line:lang(en) { font-family: var(--serif); }
.verse-gap { height: 0.6rem; }
.verse-attr { color: var(--muted); font-style: italic; font-size: 0.9rem; margin-top: 0.3rem; }

/* footnote refs + popover */
.fn-ref { line-height: 0; }
.fn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.7em; padding: 0 0.1em; }
.fn-link:hover { color: var(--accent-soft); }
.fn-pop { position: absolute; z-index: 30; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(0,0,0,0.15); padding: 0.8rem 1rem; border-radius: 6px; max-width: 360px; font-size: 0.85rem; line-height: 1.5; }
.fn-pop .fn-num { color: var(--accent); font-weight: 600; margin-right: 0.3rem; }

/* comment affordance — sits in the row's dedicated 3rd grid column */
.para-actions { align-self: start; justify-self: end; margin-top: 0.2rem; opacity: 0.4; transition: opacity 0.15s; }
.para-row:hover .para-actions { opacity: 1; }
.para-actions:has(.has-threads) { opacity: 1; }
.cmt-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer; color: var(--muted); font-size: 0.9rem;
  padding: 0.15rem 0.55rem; line-height: 1.4;
}
.cmt-btn:hover { background: var(--paper); color: var(--accent); border-color: var(--accent-soft); }
.cmt-btn.has-threads { color: var(--accent); background: #fbe9d3; border-color: #eab87f; }
.cmt-count { font-size: 0.72rem; font-weight: 600; }

/* threads panel */
.threads { position: relative; grid-column: 1 / -1; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 0.9rem 2.2rem 0.9rem 1rem; margin: 0.4rem 0; }
.threads-close { position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.5rem; border-radius: 4px; }
.threads-close:hover { color: var(--ink); background: var(--paper); }
.thread { border-bottom: 1px solid var(--rule); padding: 0.6rem 0; }
.thread:last-child { border-bottom: none; }
.thread.resolved { opacity: 0.6; }
.comment { margin: 0.4rem 0; }
.comment-meta { font-size: 0.75rem; color: var(--muted); }
.comment-quote { border-left: 3px solid var(--accent-soft); padding-left: 0.6rem; color: var(--muted); font-style: italic; margin: 0.2rem 0; font-size: 0.9rem; }
.comment-body { font-size: 0.95rem; }
.thread-actions, .comment-actions { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.thread-actions button, .comment-actions button { font-size: 0.75rem; background: none; border: none; color: var(--link); cursor: pointer; padding: 0; }
textarea { width: 100%; font: inherit; font-size: 0.9rem; padding: 0.5rem; border: 1px solid var(--rule); border-radius: 5px; resize: vertical; background: var(--paper); }
.composer .section-search { font-size: 0.9rem; padding: 0.5rem; margin: 0 0 0.5rem; }
.composer-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.5rem 0 0.25rem; }
.composer-label:first-child { margin-top: 0; }
.btn { background: var(--accent); color: #fff; border: none; padding: 0.4rem 0.9rem; border-radius: 5px; cursor: pointer; font: inherit; font-size: 0.85rem; }
.btn.secondary { background: none; color: var(--muted); border: 1px solid var(--rule); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* glossary + editorial */
.section-search { width: 100%; padding: 0.6rem 0.8rem; font: inherit; border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 1.4rem; background: var(--paper); }
.gloss-section h2, .ed-section h2 { border-bottom: 2px solid var(--rule); padding-bottom: 0.3rem; }
.gloss-group { margin: 1rem 0; }
.gloss-group h3 { color: var(--muted); font-size: 0.9rem; }
.gloss-entry, .ed-decision { position: relative; padding: 0.4rem 0; border-bottom: 1px solid var(--paper-2); }
.gloss-entry:hover, .ed-decision:hover { background: var(--paper-2); }
.ed-decision { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.ed-decision h3 { color: var(--accent); margin: 0 0 0.4rem; }
.ed-applied { font-size: 0.8rem; color: var(--muted); }

/* inline figures (book photographs + Taicang map) */
.book-figure {
  margin: 1.6rem auto;
  max-width: 32rem;
  text-align: center;
}
.book-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 4px;
  cursor: zoom-in;
  filter: grayscale(0.05);
}
.book-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fig-zh { font-family: var(--zh-serif); color: var(--zh); }
.fig-en { font-style: italic; }
body.english-only .fig-zh { display: none; }

/* chapter nav footer */
.chapter-nav { display: flex; justify-content: space-between; margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.chapter-nav button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; }

/* activity */
.activity-item { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.activity-anchor { font-size: 0.78rem; color: var(--muted); }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: grid; place-items: center; z-index: 100; }
.lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 1rem; right: 1.4rem; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; }

.empty { color: var(--muted); font-style: italic; text-align: center; padding: 3rem 0; }
.loading { color: var(--muted); text-align: center; padding: 3rem 0; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Two-row layout: English + pill share the top row so the widget sits at
     the START of its paragraph (aligned with the first English line); the
     Chinese block spans the full width below. This anchors the pill INSIDE
     the row, eliminating the floating "between-paragraph" position that
     made it ambiguous which paragraph it belonged to. */
  .para-row {
    grid-template-columns: 1fr 3rem;
    grid-template-areas:
      "english actions"
      "chinese chinese";
    column-gap: 0.4rem;
    row-gap: 0.3rem;
  }
  body.english-only .para-row,
  .para-row.verse {
    grid-template-areas: "english actions";
  }
  .para-row > .para-en { grid-area: english; }
  .para-row > .para-zh { grid-area: chinese; border-left: 2px solid var(--rule); padding-left: 0.7rem; }
  .para-row > .para-actions { grid-area: actions; align-self: start; justify-self: end; margin-top: 0.2rem; opacity: 1; }

  /* Topbar: switch to a 2-row grid so the brand sits on its own row with
     the user button beside it, and the nav + side-by-side toggle share the
     row below. Children of .topbar-right are promoted to direct grid items
     via display: contents so they can be placed independently. */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand user"
      "nav   toggle";
    column-gap: 0.8rem;
    row-gap: 0.4rem;
    align-items: center;
    padding: 0.6rem 1rem;
  }
  .topbar-right { display: contents; }
  .brand { grid-area: brand; padding: 0; text-align: left; white-space: nowrap; }
  .brand-en { margin-left: 0.4rem; }
  #user-button { grid-area: user; justify-self: end; }
  .topnav { grid-area: nav; gap: 0.7rem; font-size: 0.85rem; }
  .mode-toggle { grid-area: toggle; justify-self: end; }

  /* TOC rows: stack chapter number, Chinese title, and English title on
     their own lines. Avoids the cramped 3-column layout on narrow screens. */
  .toc-item { flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.7rem 0.4rem; }
  .toc-num { min-width: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .toc-en { flex: none; }
  .toc-item .badge { align-self: flex-start; }
}