/*
 * Styles for the serial reader pages (Thymeleaf, SerialReadViewController): the library /read (+ genre,
 * tag, search), a world, a book's contents, a chapter, the age gate and the 404. Served at
 * /read-assets/serial.css (mirrors /events-assets/events.css).
 *
 * ONE palette, shared with the SPA. Every --sr-* value below equals the matching --color-* token in
 * frontend/src/index.css: `:root` = the light `@theme` block, `html.dark` = the `.dark` block.
 * DesignTokenParityTest reads index.css and compares this file's values against it, so a hand-tuned
 * colour here is a red run. Theme selection is the SPA's (the anti-flash script reads
 * localStorage["litmemo-theme"]).
 *
 * Two font roles:
 *   --sr-font        the interface (the brand's sliced app font, which covers the site's own copy);
 *   --sr-font-prose  the author's text. It starts with the system faces on purpose: an author writes
 *                    any character at all, and the landing pages' subset font would drop the ones it
 *                    does not carry to a different face mid-sentence. The app font's slices are
 *                    unicode-range'd, so listing it later never blocks a glyph.
 * The reading column (680px, 19px / 18px on phones, line-height 2, title 1.9× / 1.5× of the size) is
 * the public reader's (PublicProjectViewPage NovelReader + index.css .tiptap).
 */

:root {
  color-scheme: light;
  --sr-background: #faf8f5;
  --sr-foreground: #1a1a1a;
  --sr-card: #ffffff;
  --sr-card-foreground: #1a1a1a;
  --sr-primary: #7d6340;
  --sr-primary-foreground: #ffffff;
  --sr-secondary: #f0ebe4;
  --sr-secondary-foreground: #4a3f35;
  --sr-muted: #f5f0ea;
  --sr-muted-foreground: #6b6159;
  --sr-accent: #e8dfd4;
  --sr-accent-foreground: #4a3f35;
  --sr-destructive: #dc2626;
  --sr-border: #9e8e7e;
  --sr-input: #9e8e7e;
  --sr-ring: #7d6340;
  --sr-success: #0d7a54;

  --sr-font: "Swei Spring Sugar", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --sr-font-serif: "Swei Spring Sugar", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, serif;
  --sr-font-prose: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
    "Hiragino Sans", "Noto Sans JP", "Noto Sans SC", "Swei Spring Sugar", sans-serif;
  --sr-prose-size: 18px;
}

html.dark {
  color-scheme: dark;
  --sr-background: #0f0d0a;
  --sr-foreground: #e8e0d4;
  --sr-card: #1a1610;
  --sr-card-foreground: #e8e0d4;
  --sr-primary: #c4a574;
  --sr-primary-foreground: #0f0d0a;
  --sr-secondary: #241f18;
  --sr-secondary-foreground: #c8bfb0;
  --sr-muted: #241f18;
  --sr-muted-foreground: #978b7b;
  --sr-accent: #2e271d;
  --sr-accent-foreground: #c8bfb0;
  --sr-destructive: #dc2626;
  --sr-border: #504536;
  --sr-input: #504536;
  --sr-ring: #c4a574;
  --sr-success: #10b981;
}

/* The interface follows the TREE's language (html[data-ui-lang]); <html lang> is the work's own language. */
html[data-ui-lang="ja"] {
  --sr-font: "Swei Spring Sugar JP", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --sr-font-serif: "Swei Spring Sugar JP", "Hiragino Mincho ProN", "Noto Serif JP", system-ui, serif;
}
html[data-ui-lang="zh-Hans"] {
  --sr-font: "Swei Spring Sugar SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --sr-font-serif: "Swei Spring Sugar SC", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", system-ui, serif;
}
@media (min-width: 768px) { :root { --sr-prose-size: 19px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sr-font);
  color: var(--sr-foreground);
  background: var(--sr-background);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ===== Scaffold ===== */
.sr-page { overflow-x: hidden; padding-bottom: 4rem; }
.sr-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .sr-inner { padding: 0 1.5rem; } }
.sr-muted { color: var(--sr-muted-foreground); }
.sr-section { padding: 2rem 0 0; }
.sr-heading { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.sr-heading-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 0 0 1rem; }
.sr-heading-row .sr-heading { margin: 0; }
.sr-count { font-size: 0.875rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }

/* ===== Library head: one line of what the place is (+ a subline), or the subject of a genre / tag / search ===== */
.sr-head { padding: 2.25rem 0 0; }
.sr-head h1 { margin: 0; font-family: var(--sr-font-serif); font-size: 1.875rem; line-height: 1.3; color: var(--sr-foreground); overflow-wrap: anywhere; }
@media (max-width: 639px) { .sr-head { padding-top: 1.5rem; } .sr-head h1 { font-size: 1.375rem; } }
.sr-lead { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-search-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; }
.sr-search-query { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }

/* ===== Buttons and chips ===== */
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0.5rem 1.25rem; border-radius: 0.375rem;
  font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.2; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.sr-btn-primary { background: var(--sr-primary); color: var(--sr-primary-foreground); border-color: var(--sr-primary); }
.sr-btn-primary:hover { background: var(--sr-foreground); border-color: var(--sr-foreground); color: var(--sr-background); }
.sr-btn-outline { background: transparent; color: var(--sr-foreground); border-color: var(--sr-border); }
.sr-btn-outline:hover { border-color: var(--sr-foreground); }
.sr-btn:focus-visible, .sr-chip:focus-visible, .sr-card:focus-visible, a:focus-visible, .sr-more > summary:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }

.sr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
/* The genre row: every genre on a line or two on a wide screen; one sideways-scrolling line on a phone
   instead of a wall of chips above the works. */
.sr-genres { padding: 1.25rem 0 0; }
.sr-genre-chips { gap: 0.5rem; }
@media (max-width: 767px) {
  .sr-genre-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
  .sr-genre-chips::-webkit-scrollbar { display: none; }
}
.sr-chip {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.3rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--sr-border); color: var(--sr-foreground); font-size: 0.875rem; line-height: 1.2; white-space: nowrap;
}
.sr-chip:hover { border-color: var(--sr-foreground); }
.sr-chip.is-active { background: var(--sr-primary); border-color: var(--sr-primary); color: var(--sr-primary-foreground); }
/* A genre with no work in this view: still in its place (the row never reshuffles), greyed and inert. */
.sr-chip.is-empty { border-style: dashed; border-color: color-mix(in srgb, var(--sr-border) 55%, transparent);
  color: color-mix(in srgb, var(--sr-muted-foreground) 70%, transparent); cursor: default; }
.sr-tag { font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-tag:hover { color: var(--sr-foreground); text-decoration: underline; }
.sr-badge {
  display: inline-flex; align-items: center; padding: 0.05rem 0.45rem; border-radius: 0.25rem; font-size: 0.75rem;
  font-weight: 700; line-height: 1.4; border: 1px solid var(--sr-border); color: var(--sr-muted-foreground); white-space: nowrap;
}
.sr-badge-mature { border-color: var(--sr-destructive); color: var(--sr-destructive); }
.sr-badge-done { background: var(--sr-secondary); color: var(--sr-secondary-foreground); border-color: transparent; }
/* In the library's list the status is an outline: green while it is still coming, brand colour once complete. */
.sr-row .sr-badge-live { border-color: var(--sr-success); color: var(--sr-success); }
.sr-row .sr-badge-done { background: transparent; border-color: var(--sr-primary); color: var(--sr-primary); }

/* ===== The list's toolbar: 共 N 部作品 + sort tabs on the left, instant filters + 更多篩選 on the right.
   All plain links (no form, no script); on a phone the filters take their own line. ===== */
.sr-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin: 0 0 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-toolbar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; min-width: 0; }
.sr-tabs { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.sr-tab { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; color: var(--sr-muted-foreground);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sr-tab:hover { color: var(--sr-foreground); }
.sr-tab.is-active { color: var(--sr-foreground); font-weight: 700; border-bottom-color: var(--sr-primary); }
.sr-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0; position: relative; }
.sr-filter-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.75rem; border-radius: 0.375rem;
  border: 1px solid var(--sr-border); background: var(--sr-card); color: var(--sr-foreground); font-size: 0.875rem; line-height: 1.2; white-space: nowrap; }
.sr-filter-chip:hover { border-color: var(--sr-foreground); }
.sr-filter-chip.is-active { background: var(--sr-primary); border-color: var(--sr-primary); color: var(--sr-primary-foreground); }
.sr-more > summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.25rem; padding: 0 0.25rem; cursor: pointer;
  font-size: 0.875rem; color: var(--sr-muted-foreground); list-style: none; white-space: nowrap; }
.sr-more > summary::-webkit-details-marker { display: none; }
.sr-more > summary::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.sr-more[open] > summary { color: var(--sr-foreground); }
.sr-more[open] > summary::after { border-top-color: transparent; border-bottom-color: currentColor; margin: 0 0 4px; }
.sr-more-panel { margin: 0.5rem 0 0.25rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--sr-card);
  border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); }
/* The panel drops down over the list (from the filters' right edge; full width on a phone) instead of
   pushing the list down. */
.sr-more-panel { position: absolute; inset-inline-end: 0; top: 100%; z-index: 5; width: max-content; max-width: min(28rem, calc(100vw - 2rem));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); }
@media (max-width: 639px) { .sr-toolbar-filters { width: 100%; } .sr-more-panel { inset-inline-start: 0; width: auto; max-width: none; } }
.sr-more-label { margin: 0.25rem 0 0.35rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-more-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; }
.sr-mature-toggle { font-size: 0.875rem; color: var(--sr-muted-foreground); text-decoration: underline; }

/* ===== The list (書庫 / genre / tag / search): a 16:9 world cover beside the text; one column, two from 1024 ===== */
.sr-rows { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .sr-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sr-row { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 0; min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sr-border) 30%, transparent); }
.sr-row-cover { flex: none; width: 8rem; }
@media (min-width: 640px) { .sr-row { gap: 1.125rem; } .sr-row-cover { width: 11rem; } }
.sr-row-cover .sr-cover { border-radius: 0.375rem; }
.sr-row-cover .sr-cover-mono { font-size: 2.25rem; }
.sr-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sr-row-body > p { margin: 0; }
.sr-row-title { margin: 0; font-family: var(--sr-font-serif); font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
.sr-row-title a:hover { color: var(--sr-primary); }
.sr-row-desc { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--sr-secondary-foreground); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) { .sr-row-title { font-size: 1rem; } .sr-row-desc { font-size: 0.8125rem; } }

/* ===== Cards: one column on phones, two on tablets, three on desktops ===== */
.sr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sr-card { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sr-card-link { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-card h3 { margin: 0.25rem 0 0; font-family: var(--sr-font-serif); font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; }
.sr-card-link:hover h3 { color: var(--sr-primary); }
.sr-card-meta { margin: 0; font-size: 0.875rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0; }
.sr-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }

/* The cover: 16:9 like the world cover's frame. The placeholder — the title's first character on a tinted
   ground — is always printed; a world with a PUBLISHED cover carries it as JSON and the cover island mounts
   .ev-cover-drawn as the frame's first child, draws the app's renderer in it, and marks the frame .is-drawn
   only once the cover is complete: then the drawn layer fades in over the placeholder (which stays in the
   markup). The same contract as the event wall's tiles (events.css). */
.sr-cover {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 0.5rem;
  background: linear-gradient(150deg, var(--sr-accent), var(--sr-secondary) 55%, var(--sr-muted));
  border: 1px solid color-mix(in srgb, var(--sr-border) 40%, transparent);
}
.sr-cover > .ev-cover-drawn { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.sr-cover.is-drawn > .ev-cover-drawn { opacity: 1; }
.sr-cover.is-drawn > .sr-cover-mono { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sr-cover > .ev-cover-drawn { transition: none; } }
.sr-cover-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sr-font-serif); font-weight: 700; font-size: clamp(2.5rem, 9vw, 4rem); color: var(--sr-primary); opacity: 0.55;
}

/* ===== Shelves (本週新作 / 最多人追蹤): one sideways-scrolling row of 16:9 covers — about four and a peek of
   the next on a wide screen, one and a half on a phone, so it reads as "there is more this way". ===== */
.sr-shelf-head { justify-content: space-between; }
.sr-see-all { font-size: 0.875rem; color: var(--sr-muted-foreground); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.sr-see-all:hover { color: var(--sr-foreground); }
.sr-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1 * 1rem) / 1.6); gap: 1rem; overflow-x: auto;
  margin: 0; padding: 0 0 0.5rem; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
@media (min-width: 640px) { .sr-shelf { grid-auto-columns: calc((100% - 2 * 1.25rem) / 2.6); gap: 1.25rem; } }
@media (min-width: 1024px) { .sr-shelf { grid-auto-columns: calc((100% - 3 * 1.25rem) / 4.25); } }
.sr-shelf-card { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; scroll-snap-align: start; }
.sr-shelf-card h3 { margin: 0.35rem 0 0; font-family: var(--sr-font-serif); font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-shelf-card .sr-card-link:hover h3 { color: var(--sr-primary); }
.sr-shelf-card .sr-card-meta { font-size: 0.8125rem; }
.sr-shelf-card .sr-cover-mono { font-size: 2.5rem; }

/* ===== Pager ===== */
.sr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin: 2rem 0 0; font-size: 0.9rem; }
.sr-empty { margin: 1rem 0; padding: 2rem 1rem; text-align: center; border: 1px dashed var(--sr-border); border-radius: 0.5rem; color: var(--sr-muted-foreground); }

/* ===== Breadcrumb ===== */
.sr-crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.sr-crumbs li + li::before { content: "›"; margin-inline-end: 0.5rem; }
.sr-crumbs a:hover { color: var(--sr-foreground); text-decoration: underline; }
/* 「→」is not Bidi-mirrored: a forward arrow points toward the reading direction's end. Inline-block so the transform applies. */
[dir="rtl"] .sr-arrow-fwd { display: inline-block; transform: scaleX(-1); }

/* ===== World page ===== */
.sr-world-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 0 0; }
@media (min-width: 768px) { .sr-world-head { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; } }
.sr-world-head h1 { margin: 0 0 0.5rem; font-family: var(--sr-font-serif); font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.25; overflow-wrap: anywhere; }
.sr-world-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--sr-muted-foreground); }
.sr-world-meta .sr-author { color: var(--sr-foreground); font-weight: 700; }
.sr-world-meta a:hover { color: var(--sr-foreground); text-decoration: underline; }
.sr-synopsis { margin: 1rem 0 0; max-width: 42rem; white-space: pre-line; line-height: 1.85; overflow-wrap: anywhere; }
.sr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.25rem 0 0; }
/* ===== Follow ===== */
.sr-follow-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; }
.sr-follow-slot:empty { display: none; }
/* The signed-in state: a filled button reads as「done」, and still toggles back on press. */
.sr-follow.is-following { background: var(--sr-secondary); color: var(--sr-secondary-foreground); border-color: var(--sr-border); }
.sr-follow.is-following:hover { border-color: var(--sr-foreground); }
.sr-follow[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.sr-follow[hidden] { display: none; }
.sr-follow-count { font-size: 0.875rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-follow-error { flex-basis: 100%; font-size: 0.8125rem; color: var(--sr-destructive); }
.sr-follow-error:empty { display: none; }
.sr-btn-small { min-height: 2.25rem; padding: 0.35rem 0.9rem; font-size: 0.875rem; }
.sr-author-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.sr-author-link:hover { text-decoration-color: currentColor; }
.sr-chapter-follow { margin: 0.25rem 0 0; }
.sr-follow-block { margin: 2.5rem 0 0; padding: 1.25rem 1.25rem 1.375rem; border-radius: 0.75rem; text-align: center;
  background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); }
.sr-follow-block[hidden] { display: none; }
.sr-follow-block-title { margin: 0 0 0.25rem; font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.sr-follow-block .sr-muted { margin: 0 0 1rem; font-size: 0.875rem; }
.sr-follow-block .sr-follow-slot { justify-content: center; }

/* ===== Author page ===== */
.sr-author-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem; padding: 1.25rem 0 0; }
.sr-avatar { flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: 9999px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: var(--sr-secondary); color: var(--sr-secondary-foreground);
  font-family: var(--sr-font-serif); font-size: 2.25rem; font-weight: 700; }
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-author-main { flex: 1 1 16rem; min-width: 0; }
.sr-author-kicker { margin: 0 0 0.125rem; font-size: 0.8125rem; }
.sr-author-head h1 { margin: 0 0 0.5rem; font-family: var(--sr-font-serif); font-size: clamp(1.625rem, 4vw, 2.25rem); line-height: 1.25; overflow-wrap: anywhere; }
.sr-author-bio { margin: 0; max-width: 40rem; white-space: pre-line; line-height: 1.8; overflow-wrap: anywhere; }
.sr-author-head .sr-actions { margin-top: 1rem; }

/* ===== 角色與設定 (/read/{world}/world) and its entry on the world page ===== */
.sr-lore-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.875rem 1.125rem; border-radius: 0.5rem; background: var(--sr-card);
  border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); min-height: 2.75rem; }
.sr-lore-entry:hover { border-color: var(--sr-foreground); }
.sr-lore-entry-count { color: var(--sr-muted-foreground); font-size: 0.9rem; overflow-wrap: anywhere; }
.sr-lore-entry-go { font-weight: 700; color: var(--sr-primary); white-space: nowrap; }
.sr-lore-head { padding: 1.25rem 0 0; }
.sr-lore-kicker { margin: 0 0 0.125rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.sr-lore-kicker a:hover { color: var(--sr-foreground); text-decoration: underline; }
.sr-lore-head h1 { margin: 0; font-family: var(--sr-font-serif); font-size: clamp(1.625rem, 4vw, 2.25rem); line-height: 1.25; }
.sr-lore-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sr-lore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sr-lore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sr-lore-card { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: 1rem 1.125rem;
  border-radius: 0.5rem; background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-lore-card-head { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.sr-lore-card-title { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.sr-lore-card h3 { margin: 0; font-family: var(--sr-font-serif); font-size: 1.125rem; line-height: 1.4; overflow-wrap: anywhere; }
/* The author's avatar frame is placed by an inline style (SerialReadViewController#avatarStyle): the picture
   is scaled and shifted so exactly the framed square fills the circle. */
.sr-lore-avatar { position: relative; flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 9999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--sr-secondary);
  color: var(--sr-secondary-foreground); font-family: var(--sr-font-serif); font-size: 1.5rem; font-weight: 700; }
.sr-lore-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-lore-avatar img.is-framed { position: absolute; max-width: none; object-fit: fill; }
.sr-lore-aliases { margin: 0; font-size: 0.8125rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-lore-body { margin: 0; white-space: pre-line; line-height: 1.8; font-family: var(--sr-font-prose); overflow-wrap: anywhere; }
.sr-lore-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; margin: 0; font-size: 0.875rem; }
.sr-lore-field { display: contents; }
.sr-lore-field dt { color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-lore-field dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-family: var(--sr-font-prose); }
.sr-lore-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sr-lore-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.375rem; }

/* ===== Ads (design §十三之二, serial-publishing.md「廣告」) =====
   The boxes exist in the HTML only when the page may carry ads (SerialAds#forPage); when the viewer gets
   none, the ad script removes them and the data-ad-layout attribute, so nothing below holds space then.
   Each box is the unit's exact size from the first paint (no CLS when the ad arrives late or never).
   Sizes and stickiness follow AdSense 9185043 (fixed sizes) and 10734935 (sticky: desktop only, ≤300 wide,
   one at a time, never mirrored) — the 300×600 right rail is the ONLY sticky ad on any page. */
.sr-ad { display: flex; flex-direction: column; align-items: center; }
.sr-ad-label { margin: 0 0 0.375rem; font-size: 0.6875rem; line-height: 1; letter-spacing: 0.08em; color: var(--sr-muted-foreground); }
.sr-ad-frame { max-width: 100%; overflow: hidden; border-radius: 0.25rem; background: var(--sr-muted);
  border: 1px dashed color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-ad-frame > ins { display: block; }
/* Under the chapter, both widths: wide margins keep it clear of the text above and of the follow block and
   上一章／下一章 below (AdSense 6160631: never adjacent to navigation or action items). */
.sr-ad-chapter-end { margin: 3.5rem auto 3.5rem; }
.sr-ad-chapter-end + .sr-follow-block { margin-top: 0; }

/* Rails are wide-screen only: below the breakpoint they are not displayed and never get an ad unit. */
.sr-ad-rail { display: none; }

/* Chapter + world: one 300×600 column at ≥1280px, sticky under the site's sticky bar (3.5rem). */
@media (min-width: 1280px) {
  /* .sr-page's overflow-x: hidden makes it a scroll container, which pins position: sticky to a box that
     never scrolls; clip cuts the same overflow without becoming one. */
  .sr-page:has(> [data-ad-layout="right"]) { overflow-x: clip; }
  [data-ad-layout="right"] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 2.5rem;
    align-items: start; max-width: calc(72rem + 300px + 2.5rem); margin: 0 auto; padding-inline-end: 1.5rem; }
  [data-ad-layout="right"] > .sr-ad-rail-wide { display: block; position: sticky; top: 4.5rem; padding-top: 2.5rem; }
  /* The chapter column keeps the reader's 680px; the rail sits to its right. */
  [data-serial-chapter] [data-ad-layout="right"] { grid-template-columns: minmax(0, 1fr) 680px minmax(300px, 1fr);
    column-gap: 1.5rem; max-width: none; padding-inline-end: 1rem; }
  [data-serial-chapter] [data-ad-layout="right"] > .sr-article { grid-column: 2; width: 100%; }
  [data-serial-chapter] [data-ad-layout="right"] > .sr-ad-rail-wide { grid-column: 3; justify-self: start; }
}

/* Listings (library, genre, tag, search, author, 角色與設定): a 160×600 column on each side at ≥1440px,
   scrolling with the page — NOT sticky (mirrored sticky rails are not allowed). */
@media (min-width: 1440px) {
  [data-ad-layout="rails"] { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; column-gap: 1.5rem;
    align-items: start; max-width: calc(72rem + 2 * (160px + 1.5rem) + 2rem); margin: 0 auto; padding: 0 1rem; }
  [data-ad-layout="rails"] > .sr-ad-rail { display: block; padding-top: 2rem; }
  [data-ad-layout="rails"] > .sr-ad-rail-left { grid-column: 1; grid-row: 1; }
  [data-ad-layout="rails"] > .sr-page { grid-column: 2; grid-row: 1; min-width: 0; }
  [data-ad-layout="rails"] > .sr-ad-rail-right { grid-column: 3; grid-row: 1; }
}

.sr-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-list li { border-bottom: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-list a { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 0.25rem; min-width: 0; }
.sr-list a:hover .sr-list-title { color: var(--sr-primary); }
.sr-list-num { flex: none; font-size: 0.8125rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-list-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sr-list-book { display: block; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-list-date { flex: none; font-size: 0.8125rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }

.sr-books { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .sr-books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sr-book { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: 0.35rem 1rem; padding: 1rem 1.125rem;
  border-radius: 0.5rem; background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); min-width: 0; }
.sr-book-thumb { display: block; }
.sr-book-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding-top: 0.125rem; }
.sr-book p { margin: 0; }

/* A book's cover frame: the BOOK_COVER board (2:3); the rest is the world frame's contract (.sr-cover). */
.sr-cover-book { aspect-ratio: 2 / 3; border-radius: 0.375rem; }
.sr-cover-book .sr-cover-mono { font-size: 1.75rem; }
.sr-book-head { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 640px) { .sr-book-head { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; } }
.sr-book-hero-cover .sr-cover-mono { font-size: clamp(2.25rem, 7vw, 3.5rem); }
.sr-book-head-body { min-width: 0; }
.sr-book h3 { margin: 0; font-family: var(--sr-font-serif); font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
.sr-book a:hover h3 { color: var(--sr-primary); }

/* ===== Chapter page: the public reader's reading column ===== */
.sr-article { max-width: 680px; margin: 0 auto; padding: 1.5rem 22px 0; }
@media (min-width: 768px) { .sr-article { padding: 2.5rem 32px 0; } }
.sr-chapter-head { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.75rem; }
.sr-chapter-num { margin: 0; font-size: 13px; letter-spacing: 0.08em; color: var(--sr-muted-foreground); }
.sr-chapter-num a:hover { color: var(--sr-foreground); text-decoration: underline; }
.sr-chapter-head h1 {
  margin: 0; font-family: var(--sr-font-serif); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
  font-size: calc(var(--sr-prose-size) * 1.5);
}
@media (min-width: 768px) { .sr-chapter-head h1 { font-size: calc(var(--sr-prose-size) * 1.9); } }
.sr-chapter-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 13px; color: var(--sr-muted-foreground); }
.sr-body-wrap { position: relative; }
.sr-watermark { position: absolute; inset: 0; pointer-events: none; user-select: none; opacity: 0.08;
  background-repeat: repeat; background-size: 360px 360px; }
.sr-prose { font-family: var(--sr-font-prose); font-size: var(--sr-prose-size); line-height: 2; overflow-wrap: anywhere; }
.sr-prose p { margin: 0.5em 0; line-height: 2; }
.sr-prose h1 { font-size: 1.75rem; font-weight: 700; margin: 1em 0 0.5em; }
.sr-prose h2 { font-size: 1.5rem; font-weight: 600; margin: 0.8em 0 0.4em; }
.sr-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 0.6em 0 0.3em; }
.sr-prose ul { padding-inline-start: 1.5em; margin: 0.5em 0; list-style-type: disc; }
.sr-prose ol { padding-inline-start: 1.5em; margin: 0.5em 0; list-style-type: decimal; }
.sr-prose li { margin: 0.2em 0; }
.sr-prose blockquote { border-inline-start: 3px solid var(--sr-primary); padding-inline-start: 1em; margin: 0.5em 0; color: var(--sr-muted-foreground); font-style: italic; }
.sr-prose hr { border: 0; border-top: 1px solid var(--sr-border); margin: 2em 0; }
.sr-prose a { color: var(--sr-primary); text-decoration: underline; }
/* 章節插圖: the editor's and the public reader's rule — its own line, centred, 滿版 = the column,
   半寬 = half (the column on a phone), never wider than the picture; the caption wraps under it. */
.sr-prose figure { width: fit-content; max-width: 100%; margin: 1.5em auto; text-align: center; }
.sr-prose figure[data-width="half"] { max-width: 50%; }
@media (max-width: 767px) { .sr-prose figure[data-width="half"] { max-width: 100%; } }
.sr-prose figure img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0.5em; }
.sr-prose figcaption { width: 0; min-width: 100%; margin-top: 0.4em; font-size: 0.875em; line-height: 1.5; color: var(--sr-muted-foreground); }
/* 作品卡片 inside a post (author-blog-design §4.4, serial/_embeds.html): one link — cover, kicker, title,
   excerpt or stats, 去讀 →. A book or chapter card has the 2:3 book frame (72px), a world card the 16:9 world
   frame (128px; 96px on a phone). The prose's font and link underline do not apply inside the card. The
   unreadable card is one muted line in the same box, so the body keeps its rhythm. */
.sr-prose .sr-embed {
  display: flex; align-items: center; gap: 1rem; margin: 1.5em 0; padding: 0.875rem;
  border: 1px solid var(--sr-border); border-radius: 0.75rem; background: var(--sr-card); color: var(--sr-card-foreground);
  font-family: var(--sr-font); font-size: 1rem; line-height: 1.5; text-decoration: none;
}
.sr-prose a.sr-embed:hover { border-color: var(--sr-primary); }
.sr-prose a.sr-embed:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-embed .sr-cover { flex: 0 0 8rem; width: 8rem; }
.sr-embed-book .sr-cover { flex: 0 0 4.5rem; width: 4.5rem; }
.sr-embed .sr-cover-mono { font-size: 1.75rem; }
.sr-embed-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.sr-embed-kicker { font-size: 0.75rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-embed-title { font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.sr-embed-excerpt { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sr-secondary-foreground); overflow-wrap: anywhere; }
.sr-embed-meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-embed-cta { flex: none; font-size: 0.875rem; color: var(--sr-primary); white-space: nowrap; }
.sr-prose .sr-embed-gone { justify-content: center; min-height: 4.5rem; border-style: dashed; background: var(--sr-muted);
  color: var(--sr-muted-foreground); font-size: 0.875rem; }
@media (max-width: 479px) {
  .sr-prose .sr-embed { gap: 0.75rem; padding: 0.75rem; }
  .sr-embed .sr-cover { flex-basis: 6rem; width: 6rem; }
  .sr-embed-book .sr-cover { flex-basis: 3.75rem; width: 3.75rem; }
  /* The call to action drops under the text on a phone, so the title keeps the width. */
  .sr-prose a.sr-embed { flex-wrap: wrap; }
  .sr-embed-text { flex-basis: calc(100% - 7rem); }
  .sr-embed-book .sr-embed-text { flex-basis: calc(100% - 4.5rem); }
  .sr-embed-cta { margin-inline-start: auto; }
}
.sr-figure-placeholder {
  width: 100vw; max-width: 100%; display: flex; align-items: center; justify-content: center; min-height: 9rem; padding: 1.25em 1em;
  border: 1px dashed var(--sr-border); border-radius: 0.5em; background: var(--sr-muted); color: var(--sr-muted-foreground);
  font-family: var(--sr-font); font-size: 0.875rem; line-height: 1.5;
}
.sr-pending { margin: 1rem 0 0; padding: 2.5rem 1.25rem; text-align: center; border: 1px dashed var(--sr-border); border-radius: 0.5rem; }
.sr-pending h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.sr-pending p { margin: 0; color: var(--sr-muted-foreground); }

.sr-chapter-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; margin: 2.5rem 0 0; }
.sr-chapter-nav a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.875rem 1rem; border-radius: 0.5rem; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); background: var(--sr-card); }
.sr-chapter-nav a:hover { border-color: var(--sr-foreground); }
.sr-chapter-nav .sr-next { grid-column: 2; text-align: end; }
.sr-chapter-nav small { font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-chapter-nav span { overflow-wrap: anywhere; }
.sr-toc-link { display: flex; justify-content: center; margin: 1rem 0 0; }
/* Where the comments go (a later slice fills it); empty now, so it takes no room. */
.sr-comments-slot:empty { display: none; }

/* ===== Age gate and 404 ===== */
.sr-gate { max-width: 32rem; margin: 3rem auto 0; padding: 2rem 1.5rem; text-align: center; border-radius: 0.75rem;
  background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); }
.sr-gate h1 { margin: 0 0 0.5rem; font-size: 1.375rem; line-height: 1.35; }
.sr-gate-world { margin: 0 0 0.75rem; font-family: var(--sr-font-serif); font-weight: 700; overflow-wrap: anywhere; }
.sr-gate p { margin: 0 0 1.5rem; color: var(--sr-muted-foreground); }
.sr-gate .sr-actions { justify-content: center; margin: 0; }

/* ===== Comments (chapter page, design §九) =====
   Plain text only: the body keeps the reader's line breaks (pre-wrap) and long unbroken strings wrap
   (anywhere) instead of widening the reading column. */
.sr-comments { margin: 3rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--sr-border); }
.sr-comments-title { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.25rem; margin: 0 0 1rem; }
.sr-comments-count { font-size: 0.875rem; font-weight: 400; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-comment-compose { margin: 0 0 1.25rem; }
.sr-comment-form { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-comment-form textarea {
  width: 100%; min-height: 6.5rem; padding: 0.75rem; border-radius: 0.5rem; resize: vertical;
  border: 1px solid var(--sr-input); background: var(--sr-card); color: var(--sr-foreground);
  font: inherit; font-size: 1rem; line-height: 1.6; box-sizing: border-box;
}
.sr-comment-form textarea:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 1px; }
.sr-comment-form-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.sr-comment-counter { margin-inline-end: auto; font-size: 0.8125rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-comment-counter.is-over { color: var(--sr-destructive); }
.sr-comment-error { margin: 0; font-size: 0.875rem; color: var(--sr-destructive); }
.sr-comment-error:empty { display: none; }
.sr-comment-reason { margin: 0; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--sr-muted); color: var(--sr-muted-foreground); font-size: 0.9375rem; }
.sr-comment-list, .sr-comment-replies { list-style: none; margin: 0; padding: 0; }
.sr-comment-thread { padding: 1rem 0; border-bottom: 1px solid var(--sr-muted); }
.sr-comment-replies { margin: 0.25rem 0 0; margin-inline-start: 1.25rem; padding-inline-start: 0.875rem; border-inline-start: 2px solid var(--sr-muted); }
.sr-comment-replies:empty { display: none; }
.sr-comment-replies > li { padding: 0.625rem 0 0; }
.sr-comment { position: relative; }
.sr-comment-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-inline-end: 2.75rem; }
.sr-comment-name { font-weight: 700; font-size: 0.9375rem; overflow-wrap: anywhere; }
.sr-comment-badge { border-color: var(--sr-primary); color: var(--sr-primary); }
.sr-comment-time { font-size: 0.8125rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-comment-body { margin: 0.375rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; font-family: var(--sr-font-prose); }
.sr-comment-hidden { margin: 0; font-size: 0.875rem; color: var(--sr-muted-foreground); font-style: italic; }
.sr-comment-actions { display: flex; gap: 0.5rem; margin-top: 0.375rem; }
.sr-comment-link {
  background: none; border: 0; padding: 0.375rem 0.25rem; min-height: 2.25rem; font: inherit; font-size: 0.875rem;
  color: var(--sr-muted-foreground); cursor: pointer;
}
.sr-comment-link:hover { color: var(--sr-foreground); }
.sr-comment-link:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-comment-reply-slot { margin-top: 0.5rem; }
.sr-comment-menu { position: absolute; top: -0.25rem; inset-inline-end: 0; }
.sr-comment-menu > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; cursor: pointer; color: var(--sr-muted-foreground); font-weight: 700;
}
.sr-comment-menu > summary::-webkit-details-marker { display: none; }
.sr-comment-menu > summary:hover { background: var(--sr-muted); color: var(--sr-foreground); }
.sr-comment-menu > summary:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-comment-menu-list {
  position: absolute; inset-inline-end: 0; top: 2.375rem; z-index: 5; min-width: 11rem; padding: 0.25rem; margin: 0; list-style: none;
  border: 1px solid var(--sr-border); border-radius: 0.5rem; background: var(--sr-card); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.sr-comment-menu-list button {
  display: block; width: 100%; text-align: start; padding: 0.5rem 0.75rem; min-height: 2.5rem; border: 0; border-radius: 0.375rem;
  background: none; font: inherit; font-size: 0.9375rem; color: var(--sr-foreground); cursor: pointer;
}
.sr-comment-menu-list button:hover, .sr-comment-menu-list button:focus-visible { background: var(--sr-muted); outline: none; }
.sr-comments-more { margin: 1.25rem 0 0; text-align: center; }
.sr-comments-empty { margin: 0 0 0.5rem; }

/* ── 檢舉 (design §十): the small link on chapter / world pages and the page's own dialog ── */
.sr-report-row { margin: 1.5rem 0 0; text-align: end; }
.sr-report-link {
  border: 0; background: none; padding: 0.5rem 0.25rem; min-height: 2.25rem; font: inherit; font-size: 0.8125rem;
  color: var(--sr-muted-foreground); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sr-report-link:hover { color: var(--sr-foreground); }
.sr-report-link:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-report-dialog {
  width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-sizing: border-box;
  margin: auto; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--sr-border); border-radius: 0.75rem;
  background: var(--sr-card); color: var(--sr-card-foreground); font-family: var(--sr-font);
}
/* No <dialog>.showModal: the script sets [open] plus this class, which keeps it fixed on screen. */
.sr-report-dialog.is-fallback { position: fixed; inset: 0; z-index: 60; box-shadow: 0 10px 40px rgb(0 0 0 / 0.35); }
.sr-report-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.sr-report-dialog h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.sr-report-dialog fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
.sr-report-dialog legend, .sr-report-note-label { display: block; margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 700; }
.sr-report-reason { display: flex; align-items: center; gap: 0.625rem; min-height: 2.5rem; padding: 0.25rem 0; cursor: pointer; font-size: 0.9375rem; }
.sr-report-reason input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--sr-primary); flex: none; }
.sr-report-dialog textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: 0.625rem 0.75rem; resize: vertical;
  border: 1px solid var(--sr-input); border-radius: 0.5rem; background: var(--sr-background); color: var(--sr-foreground);
  font: inherit; font-family: var(--sr-font-prose); font-size: 0.9375rem; line-height: 1.6;
}
.sr-report-dialog textarea:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 1px; }
.sr-report-counter { display: block; margin: 0.25rem 0 0; text-align: end; font-size: 0.8125rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-report-counter.is-over { color: var(--sr-destructive); }
.sr-report-error { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--sr-destructive); }
.sr-report-error:empty { display: none; }
.sr-report-actions { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.sr-report-done { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.7; }

/* ===== 我的書架 (/read/shelf, docs/product/site-navigation-design.md §七) ===== */
.sr-myshelf { max-width: 56rem; padding-top: 2rem; }
.sr-myshelf [hidden] { display: none !important; }
.sr-myshelf-title { margin: 0; font-size: 1.5rem; line-height: 1.35; font-family: var(--sr-font-serif); }
.sr-myshelf-sub { margin: 0.25rem 0 0; font-size: 0.875rem; }
.sr-myshelf-status { margin: 2rem 0 0; text-align: center; font-size: 0.875rem; }
.sr-myshelf-rows { margin: 0; padding: 0; list-style: none; border-radius: 0.75rem; background: var(--sr-card);
  border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); }
.sr-myshelf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; }
.sr-myshelf-row + .sr-myshelf-row { border-top: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-myshelf-main { min-width: 0; flex: 1 1 16rem; }
.sr-myshelf-name { font-weight: 600; color: var(--sr-foreground); overflow-wrap: anywhere; }
.sr-myshelf-name:hover { color: var(--sr-primary); }
.sr-myshelf-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--sr-muted-foreground); }
.sr-myshelf-unread { padding: 0 0.5rem; border-radius: 999px; font-weight: 600; color: var(--sr-primary);
  background: color-mix(in srgb, var(--sr-primary) 15%, transparent); }
.sr-myshelf-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sr-myshelf-empty { margin: 0; padding: 1rem; font-size: 0.875rem; color: var(--sr-muted-foreground); }
.sr-myshelf-empty a { color: var(--sr-primary); }
.sr-myshelf-author { margin-bottom: 1rem; border-radius: 0.75rem; background: var(--sr-card);
  border: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent); }
.sr-myshelf-author .sr-myshelf-rows { border: none; border-top: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); border-radius: 0 0 0.75rem 0.75rem; }
.sr-myshelf-author-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; }

/* ===== Author pages (/read/author/{handle}[/posts|/works|/about], author-blog-design §五) =====
   The free「紙本」look: the reader pages' own palette, one column, no banner (themes are a later slice).
   The profile row is the 作者頁 board's (avatar, pen name, counts, 追蹤作者 on the right; stacked on phones). */
.sr-blog { max-width: 67.5rem; }
.sr-blog-profile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; padding: 1.5rem 0 0; }
.sr-blog-avatar { width: 7.5rem; height: 7.5rem; font-size: 2.75rem; }
.sr-blog-profile-main { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; padding-bottom: 0.375rem; }
.sr-blog-profile h1 { margin: 0; font-family: var(--sr-font-serif); font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.25; overflow-wrap: anywhere; }
.sr-blog-stats { margin: 0; font-size: 0.8125rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-blog-stats .sr-follow-count { font-size: inherit; }
.sr-blog-follow { padding-bottom: 0.375rem; }
@media (max-width: 639px) {
  .sr-blog-avatar { width: 4.75rem; height: 4.75rem; font-size: 1.75rem; }
  .sr-blog-profile { align-items: center; gap: 0.75rem; }
  .sr-blog-profile-main { flex-basis: 0; flex-grow: 1; padding: 0; }
  .sr-blog-follow { flex: 1 1 100%; padding: 0; }
  .sr-blog-follow .sr-follow { width: 100%; }
}
.sr-blog-tabs { display: flex; gap: 1.5rem; margin: 1.5rem 0 0; border-bottom: 1px solid color-mix(in srgb, var(--sr-border) 55%, transparent);
  overflow-x: auto; scrollbar-width: none; }
.sr-blog-tab { flex: none; padding: 0.625rem 0; min-height: 2.75rem; display: inline-flex; align-items: center;
  color: var(--sr-muted-foreground); border-bottom: 2px solid transparent; font-size: 0.9375rem; }
.sr-blog-tab:hover { color: var(--sr-foreground); }
.sr-blog-tab.is-active { color: var(--sr-foreground); font-weight: 700; border-bottom-color: var(--sr-primary); }
.sr-blog-more { margin-inline-start: auto; font-size: 0.8125rem; color: var(--sr-primary); text-decoration: underline; text-underline-offset: 3px; }
.sr-blog-chips { margin: 0 0 1rem; }
.sr-heading-row .sr-chips .sr-chip { min-height: 2rem; padding: 0.2rem 0.8rem; font-size: 0.8125rem; }
/* A post's picture frame (16:9): the published cover, or the title's first character on the tinted ground. */
.sr-blog-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.5rem;
  background: linear-gradient(150deg, var(--sr-accent), var(--sr-secondary) 55%, var(--sr-muted)); }
.sr-blog-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-blog-cover .sr-cover-mono { font-size: 1.75rem; }
.sr-blog-pinned { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.75rem 0 0; padding: 1.25rem; border-radius: 0.75rem;
  background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-blog-pinned:hover { border-color: var(--sr-foreground); }
.sr-blog-pinned-cover { flex: 0 0 17.5rem; max-width: 100%; }
.sr-blog-pinned-cover .sr-cover-mono { font-size: 2.5rem; }
@media (max-width: 639px) { .sr-blog-pinned-cover { flex-basis: 100%; } .sr-blog-pinned { padding: 1rem; } }
.sr-blog-pinned .sr-blog-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-blog-pinned-body { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sr-blog-pinned-title { font-family: var(--sr-font-serif); font-size: 1.375rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sr-blog-kicker { font-size: 0.75rem; font-weight: 700; color: var(--sr-primary); overflow-wrap: anywhere; }
.sr-blog-summary { color: var(--sr-muted-foreground); font-size: 0.875rem; line-height: 1.75; overflow-wrap: anywhere; }
.sr-blog-date { font-size: 0.75rem; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-blog-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-blog-list > li { border-bottom: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-blog-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; min-width: 0; }
.sr-blog-row:hover .sr-blog-row-title { color: var(--sr-primary); }
.sr-blog-row-cover { flex: 0 0 7.5rem; }
.sr-blog-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sr-blog-row-title { font-family: var(--sr-font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sr-blog-row .sr-blog-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-blog-row > .sr-blog-date { flex: none; }
@media (max-width: 639px) {
  .sr-blog-row { align-items: flex-start; flex-wrap: wrap; column-gap: 0.75rem; row-gap: 0.25rem; }
  .sr-blog-row-cover { flex-basis: 6rem; }
  .sr-blog-row-body { flex-basis: 0; flex-grow: 1; }
  .sr-blog-row > .sr-blog-date { flex-basis: 100%; padding-inline-start: 6.75rem; }
}
.sr-blog-bio { font-family: var(--sr-font-prose); }
/* ===== A post (/read/author/{handle}/p/{code}) =====
   The chapter page's reading column; at ≥1280px a 300px rail on its right (categories, then the one sticky
   300×600 when this page carries ads). Below that width the rail is not displayed (its ad never gets a unit). */
.sr-post .sr-crumbs { margin-bottom: 1rem; }
.sr-post-kicker { display: flex; flex-wrap: wrap; gap: 0 0.25rem; letter-spacing: 0.02em; }
.sr-post-category { color: var(--sr-primary); }
.sr-post-category:hover { text-decoration: underline; }
.sr-post-cover { margin: 0 0 1.75rem; }
.sr-post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.625rem; }
.sr-post-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; text-align: start; }
.sr-post-follow-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; }
.sr-post-follow-text { flex: 1 1 14rem; min-width: 0; }
.sr-post-follow .sr-muted { margin: 0; }
.sr-post .sr-follow-block { margin-top: 1.5rem; }
.sr-post-rail { display: none; }
@media (min-width: 1280px) {
  /* .sr-page's overflow-x: hidden would pin the sticky ad to a box that never scrolls (see the chapter rule). */
  .sr-page:has(> .sr-post-layout) { overflow-x: clip; }
  .sr-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 680px minmax(300px, 1fr); column-gap: 1.5rem; padding-inline-end: 1rem; }
  .sr-post-layout > .sr-post { grid-column: 2; width: 100%; }
  .sr-post-rail { grid-column: 3; justify-self: start; width: 300px; display: flex; flex-direction: column; gap: 1.25rem;
    padding-top: 2.5rem; align-self: stretch; }
  .sr-post-rail > .sr-ad-rail { display: block; position: sticky; top: 4.5rem; }
}
.sr-post-rail-box { padding: 1rem; border-radius: 0.75rem; background: var(--sr-card); border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); }
.sr-post-rail-title { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-post-rail-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.sr-post-rail-box a { overflow-wrap: anywhere; }
.sr-post-rail-box a:hover { color: var(--sr-primary); }
.sr-post-rail-box a.is-active { color: var(--sr-primary); font-weight: 700; }

/* ===== Reading chrome on a chapter page (ReaderChrome; serial/_parts :: readerToc / readerBottomBar /
   readerProgress): a 300px TOC column from 1024px that the reader can fold to a 3rem rail, a drawer below 1024px
   (phone and tablet) opened from the fixed chapter bar, and a 3px progress bar under the sticky site bar. Used by
   the serial chapter page and the share's (templates/share/chapter.html). ===== */

/* .sr-page's overflow-x: hidden would make it a scroll container, and the sticky TOC column would stick to a box
   that never scrolls; clip cuts the same overflow without becoming one. */
.sr-page:has(> .sr-reader-shell) { overflow-x: clip; }

.sr-progress { position: fixed; inset-inline: 0; top: calc(3.5rem + 1px); height: 3px; z-index: 49; pointer-events: none; }
.sr-progress-fill { height: 100%; background: var(--sr-primary); transform: scaleX(0); transform-origin: left center; will-change: transform; }
/* The bar fills from the reading direction's start: the script scales it, the origin decides which edge stays put. */
[dir="rtl"] .sr-progress-fill { transform-origin: right center; }

/* The drawer (the default, phone and tablet); from 1024px the same element is the column. */
.sr-toc { position: fixed; inset: 0; z-index: 60; display: none; }
.sr-toc:target, html[data-sr-toc-open] .sr-toc { display: flex; }
html[data-sr-toc-open] body { overflow: hidden; }
.sr-toc-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
.sr-toc-panel { position: relative; box-sizing: border-box; width: 20rem; max-width: 85%; height: 100%; overflow-y: auto;
  overscroll-behavior: contain; padding: 0 1.25rem 1.75rem; background: var(--sr-muted);
  border-inline-end: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
.sr-toc-close-row { display: flex; justify-content: flex-end; margin: 0.5rem 0 0; margin-inline-end: -0.75rem; }
.sr-toc-close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 0.375rem; color: var(--sr-muted-foreground); }
.sr-toc-close:hover { background: var(--sr-card); color: var(--sr-foreground); }
.sr-toc-close svg { width: 1.125rem; height: 1.125rem; }
.sr-toc-head { display: flex; gap: 0.875rem; align-items: flex-start; margin: 0 0 1.5rem; }
.sr-toc-cover { flex: none; width: 4rem; }
.sr-toc-cover .sr-cover { border-radius: 0.25rem; }
.sr-toc-cover .sr-cover-mono { font-size: 1.5rem; }
.sr-toc-head-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sr-toc-title { margin: 0; font-family: var(--sr-font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sr-toc-meta { margin: 0; font-size: 0.8125rem; color: var(--sr-muted-foreground); overflow-wrap: anywhere; }
.sr-toc-heading { margin: 0 0 0.375rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; color: var(--sr-muted-foreground); }
.sr-toc-volume { margin: 1.125rem 0 0.25rem; font-size: 0.8125rem; font-weight: 700; color: var(--sr-secondary-foreground); overflow-wrap: anywhere; }
.sr-toc-list { margin: 0; padding: 0; list-style: none; }
.sr-toc-list a { display: flex; align-items: baseline; gap: 0.75rem; min-height: 2.75rem; box-sizing: border-box;
  margin: 0 -0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.45; }
.sr-toc-list a:hover { background: var(--sr-card); }
.sr-toc-list a.is-current { background: var(--sr-card); color: var(--sr-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--sr-primary); }
/* box-shadow offsets are physical: the current-row mark moves to the start edge with the column. */
[dir="rtl"] .sr-toc-list a.is-current { box-shadow: inset -3px 0 0 var(--sr-primary); }
.sr-toc-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sr-toc-count { flex: none; font-size: 0.75rem; font-weight: 400; color: var(--sr-muted-foreground); font-variant-numeric: tabular-nums; }
.sr-toc-world { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin: 1.5rem 0 0; padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent); border-radius: 0.5rem; font-size: 0.875rem;
  color: var(--sr-secondary-foreground); }
.sr-toc-world:hover { background: var(--sr-card); color: var(--sr-foreground); }
.sr-toc-world svg { flex: none; width: 1.125rem; height: 1.125rem; }

/* The chapter bar below 1024px (phone and tablet), the drawer's way in. The body keeps room for it, so the last
   paragraph and the footer's links are never under it; the manga reader's own page bar takes its place
   (html[data-sr-bar-claimed]) in 翻頁 / 單頁 / 跨頁 below 1024px. */
.sr-bottombar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); height: 4rem; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sr-card); border-top: 1px solid color-mix(in srgb, var(--sr-border) 60%, transparent); }
html[data-sr-bar-claimed] .sr-bottombar { display: none; }
.sr-bottombar-toc-count { display: none; }
@media (max-width: 359px) {
  .sr-bottombar-toc-label { display: none; }
  .sr-bottombar-toc-count { display: inline; white-space: nowrap; font-variant-numeric: tabular-nums; }
}
/* 12px side padding: the outer cells' labels are tap targets against the screen edge (frontend.md edge rule). */
.sr-bottombar-cell { display: flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 0; padding: 0 0.75rem;
  font-size: 0.875rem; line-height: 1.3; text-align: center; color: var(--sr-secondary-foreground); }
.sr-bottombar-toc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-bottombar-cell svg { flex: none; width: 1rem; height: 1rem; }
.sr-bottombar-next { font-weight: 700; color: var(--sr-primary); }
.sr-bottombar-cell.is-disabled { font-weight: 400; color: color-mix(in srgb, var(--sr-muted-foreground) 60%, transparent); }
body.sr-has-bottombar { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
html[data-sr-bar-claimed] body.sr-has-bottombar { padding-bottom: 0; }

/*「— 完 —」under the last chapter of a finished book only (SerialReadViewController#endMark); the site footer's
   own end rule is not printed on reader pages (SiteChromeRenderer#readerFooter). */
.sr-end-mark { display: flex; align-items: center; gap: 1.25rem; margin: 2.5rem 0 0; color: var(--sr-primary); font-size: 1rem; letter-spacing: 0.1em; }
.sr-end-mark::before, .sr-end-mark::after { content: ""; flex: 1; border-top: 1px solid color-mix(in srgb, var(--sr-border) 60%, transparent); }

/* The column's fold control. It is drawn only under html[data-sr-toc-foldable], which readerSettingsBoot sets before
   the first paint (no layout jump when the control arrives); without JavaScript there is no attribute, no control,
   and the column stays open. Drawer widths never show it: the drawer has its own ✕. */
.sr-toc-fold-row, .sr-toc-rail { display: none; }
.sr-toc-fold { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; border-radius: 0.375rem; background: transparent; color: var(--sr-muted-foreground); cursor: pointer; }
.sr-toc-fold:hover { background: var(--sr-card); color: var(--sr-foreground); }
.sr-toc-fold:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-toc-fold svg { width: 1.125rem; height: 1.125rem; }
/* The fold glyphs draw the column on their left and point toward or away from it: the column is at the start. */
[dir="rtl"] .sr-toc-fold svg { transform: scaleX(-1); }

/* 1024px, not 768: on a tablet a fixed 300px column left the text ~470px; there the TOC is the drawer instead. */
@media (min-width: 1024px) {
  .sr-bottombar { display: none; }
  body.sr-has-bottombar { padding-bottom: 0; }
  .sr-reader-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  /* inset first: the shorthand would reset `top` if it came after it. */
  .sr-reader-shell > .sr-toc { inset: auto; position: sticky; top: calc(3.5rem + 1px); z-index: auto; display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem - 1px); height: calc(100dvh - 3.5rem - 1px);
    border-inline-end: 1px solid color-mix(in srgb, var(--sr-border) 45%, transparent);
    background: color-mix(in srgb, var(--sr-muted) 60%, transparent); }
  .sr-reader-shell > .sr-toc .sr-toc-backdrop, .sr-reader-shell > .sr-toc .sr-toc-close-row { display: none; }
  .sr-reader-shell > .sr-toc .sr-toc-panel { flex: 1 1 auto; min-height: 0; width: auto; max-width: none; height: auto;
    padding: 1.75rem 1.25rem; background: transparent; border: 0; box-shadow: none; }
  html[data-sr-toc-open] body { overflow: visible; }
  /* 收合目錄 at the column's top right (where the drawer keeps its ✕), outside the panel's own scroll, so it stays put
     however far the list is scrolled. The panel then starts right under it. */
  html[data-sr-toc-foldable] .sr-reader-shell > .sr-toc .sr-toc-fold-row { display: flex; flex: none; justify-content: flex-end;
    padding: 0.5rem 0.5rem 0; }
  html[data-sr-toc-foldable] .sr-reader-shell > .sr-toc .sr-toc-panel { padding-top: 0.25rem; }
  /* Folded (html[data-sr-toc-collapsed], also set before the first paint): a 3rem rail holding 展開目錄; the text
     track takes the width, and the article keeps its own max-width, centred in it. */
  html[data-sr-toc-foldable][data-sr-toc-collapsed] .sr-reader-shell { grid-template-columns: 3rem minmax(0, 1fr); }
  html[data-sr-toc-foldable][data-sr-toc-collapsed] .sr-reader-shell > .sr-toc .sr-toc-panel,
  html[data-sr-toc-foldable][data-sr-toc-collapsed] .sr-reader-shell > .sr-toc .sr-toc-fold-row { display: none; }
  html[data-sr-toc-foldable][data-sr-toc-collapsed] .sr-reader-shell > .sr-toc .sr-toc-rail { display: flex; flex: none;
    justify-content: center; padding: 0.5rem 0 0; }
}

/* With the TOC column (open or folded), the chapter's 300×600 rail sits right of the text inside the remaining
   width (the centred three-track layout above would not fit beside a 300px column). */
@media (min-width: 1280px) {
  [data-serial-chapter] .sr-reader-shell > .sr-ad-layout[data-ad-layout="right"] { grid-template-columns: minmax(0, 680px) 300px;
    justify-content: center; column-gap: 1.5rem; max-width: none; padding: 0 1rem; }
  [data-serial-chapter][data-manga="true"] .sr-reader-shell > .sr-ad-layout[data-ad-layout="right"] { grid-template-columns: minmax(0, 960px) 300px; }
  [data-serial-chapter] .sr-reader-shell > .sr-ad-layout[data-ad-layout="right"] > .sr-article { grid-column: 1; }
  [data-serial-chapter] .sr-reader-shell > .sr-ad-layout[data-ad-layout="right"] > .sr-ad-rail-wide { grid-column: 2; }
}

/* ===== 「Aa」: the chapter pages' reading settings (serial/_parts :: readerSettings) =====
   html[data-sr-size] / html[data-sr-paper] are set before the first paint (readerSettingsBoot) from the SPA reader's
   own keys, so a reader's choice is the same in both readers. Sizes are the SPA's (lib/readerSettings.ts READER_FONT_PX:
   17 / 19 / 22 on a desktop, one pixel less on a phone); 中 is the page's own size and sets no attribute. */
html[data-sr-size="s"] { --sr-prose-size: 16px; }
html[data-sr-size="l"] { --sr-prose-size: 21px; }
@media (min-width: 768px) {
  html[data-sr-size="s"] { --sr-prose-size: 17px; }
  html[data-sr-size="l"] { --sr-prose-size: 22px; }
}
/* The paper re-points the page's tokens, and the site top bar and footer follow it (below), as the SPA reader's
   whole frame did (readerPaperClass on its root). 白 = the light palette, 夜 = the dark one (the same values as
   :root / html.dark above), 米 = the SPA's .reader-paper-sepia (frontend/src/index.css). Never chosen = no
   attribute = the site theme. */
html[data-sr-paper="light"] {
  color-scheme: light;
  --sr-background: #faf8f5; --sr-foreground: #1a1a1a; --sr-card: #ffffff; --sr-card-foreground: #1a1a1a;
  --sr-primary: #7d6340; --sr-primary-foreground: #ffffff; --sr-secondary: #f0ebe4; --sr-secondary-foreground: #4a3f35;
  --sr-muted: #f5f0ea; --sr-muted-foreground: #6b6159; --sr-accent: #e8dfd4; --sr-accent-foreground: #4a3f35;
  --sr-border: #9e8e7e; --sr-input: #9e8e7e; --sr-ring: #7d6340;
}
html[data-sr-paper="sepia"] {
  color-scheme: light;
  --sr-background: #f4ecdc; --sr-foreground: #2b241b; --sr-card: #fbf6ec; --sr-card-foreground: #2b241b;
  --sr-primary: #705735; --sr-primary-foreground: #ffffff; --sr-secondary: #ebe0ca; --sr-secondary-foreground: #4a3f35;
  --sr-muted: #efe5d1; --sr-muted-foreground: #5f5241; --sr-accent: #e2d6bf; --sr-accent-foreground: #4a3f35;
  --sr-border: #a8977a; --sr-input: #a8977a; --sr-ring: #705735;
}
html[data-sr-paper="dark"] {
  color-scheme: dark;
  --sr-background: #0f0d0a; --sr-foreground: #e8e0d4; --sr-card: #1a1610; --sr-card-foreground: #e8e0d4;
  --sr-primary: #c4a574; --sr-primary-foreground: #0f0d0a; --sr-secondary: #241f18; --sr-secondary-foreground: #c8bfb0;
  --sr-muted: #241f18; --sr-muted-foreground: #978b7b; --sr-accent: #2e271d; --sr-accent-foreground: #c8bfb0;
  --sr-border: #504536; --sr-input: #504536; --sr-ring: #c4a574;
}
/* The top bar (--st-*, site-chrome/site-topbar.css) and the footer (--sf-*, shared/chrome/site-footer.css) take the
   paper too: a dark page under a pale bar, or a white page over a dark footer, reads as two sites. Their tokens are
   pointed at the paper's --sr-* (one palette, no copied hex), so the bar's dropdowns, phone menu, genre menu and
   account menu follow with it. Only the reader pages load this sheet and only their boot script sets the attribute,
   so /blog, /templates, /events keep the site theme untouched.
   :root[…] is (0,2,0): it outranks html.dark (0,1,1) whatever the link order (this sheet is linked BEFORE
   site-topbar.css); the footer's tokens sit on .sf-footer itself, so they are re-pointed on that element. */
:root[data-sr-paper] {
  --st-bg: var(--sr-background); --st-fg: var(--sr-foreground); --st-muted: var(--sr-muted-foreground);
  --st-primary: var(--sr-primary); --st-primary-fg: var(--sr-primary-foreground); --st-border: var(--sr-border);
  --st-card: var(--sr-card);
}
:root[data-sr-paper] .sf-footer {
  color-scheme: inherit;
  --sf-bg: var(--sr-background); --sf-fg: var(--sr-foreground); --sf-primary: var(--sr-primary);
  --sf-muted: var(--sr-muted-foreground); --sf-border: var(--sr-border);
}
/* The top bar's light / dark toggle names the theme a click switches TO, judged by what the reader SEES: with a
   paper on, 夜 is dark and 白 / 米 are light, whatever the site theme (readerSettingsScript clears the paper and
   sets the site theme to the opposite on click). The glyph follows from the first paint; (0,2,1) outranks
   site-topbar.css's html.dark rules (0,1,2). */
:root[data-sr-paper="dark"] .st-theme-moon { display: none; }
:root[data-sr-paper="dark"] .st-theme-sun { display: inline-block; }
:root[data-sr-paper="light"] .st-theme-sun, :root[data-sr-paper="sepia"] .st-theme-sun { display: none; }
:root[data-sr-paper="light"] .st-theme-moon, :root[data-sr-paper="sepia"] .st-theme-moon { display: inline-block; }

/* The crumbs row with the page's tools at its right end (Aa, 分享). The tools never shrink; the crumbs wrap. */
.sr-article-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sr-article-bar > .sr-crumbs { flex: 1 1 auto; min-width: 0; }
.sr-tools { flex: none; display: flex; align-items: center; gap: 0.5rem; margin: 0.875rem 0 0; }
.sr-tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.75rem;
  min-height: 2.75rem; padding: 0 0.625rem; border: 1px solid var(--sr-border); border-radius: 0.375rem; background: transparent;
  color: var(--sr-foreground); font: inherit; font-size: 0.875rem; line-height: 1; cursor: pointer; }
.sr-tool-btn:hover { background: var(--sr-muted); }
.sr-tool-btn:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
.sr-tool-btn svg { width: 1rem; height: 1rem; flex: none; }
.sr-aa-glyph { font-family: var(--sr-font-serif); font-weight: 700; font-size: 1rem; }
.sr-aa, .sr-share { position: relative; }
.sr-aa[hidden], .sr-share[hidden] { display: none; }
/* A popover under the button from 768px (anchored to its right edge); below, a bottom sheet over a scrim. */
.sr-aa-scrim { display: none; }
.sr-aa-panel, .sr-share-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 70; width: 17rem;
  max-width: calc(100vw - 2rem); padding: 1rem; border: 1px solid var(--sr-border); border-radius: 0.75rem;
  background: var(--sr-card); color: var(--sr-card-foreground); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); text-align: start; }
.sr-aa-panel[hidden], .sr-share-panel[hidden], .sr-aa-scrim[hidden] { display: none; }
@media (max-width: 767px) {
  .sr-aa-scrim { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, 0.4); }
  .sr-aa-panel, .sr-share-panel { position: fixed; inset-inline: 0; top: auto; bottom: 0; width: auto; max-width: none;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 1rem 1rem 0 0; }
}
.sr-aa-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.75rem; }
.sr-aa-head h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.sr-aa-close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  margin: -0.5rem 0; margin-inline-end: -0.5rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--sr-muted-foreground);
  cursor: pointer; }
.sr-aa-close:hover { background: var(--sr-muted); color: var(--sr-foreground); }
.sr-aa-close svg { width: 1rem; height: 1rem; }
.sr-aa-group { margin: 0 0 0.875rem; padding: 0; border: 0; min-width: 0; }
.sr-aa-group legend { padding: 0; margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-aa-options { display: flex; gap: 0.375rem; }
.sr-aa-option { flex: 1 1 0; min-width: 3.25rem; min-height: 2.75rem; padding: 0 0.5rem; border: 1px solid var(--sr-border);
  border-radius: 0.5rem; background: transparent; color: var(--sr-foreground); font: inherit; font-size: 0.875rem; cursor: pointer; }
.sr-aa-option[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sr-primary); font-weight: 700; }
.sr-aa-option:focus-visible { outline: 2px solid var(--sr-ring); outline-offset: 2px; }
/* The paper swatches show the paper itself, whatever the page's paper is right now. */
.sr-aa-swatch-light { background: #ffffff; color: #1a1a1a; }
.sr-aa-swatch-sepia { background: #f4ecdc; color: #2b241b; }
.sr-aa-swatch-dark { background: #1a1610; color: #e8e0d4; }
.sr-aa-note { margin: 0; font-size: 0.75rem; color: var(--sr-muted-foreground); }

/* ===== The share pages' own parts (templates/share/_parts.html) ===== */
/* The copy guard (the SPA's ReadOnlyGuard): the page's text cannot be selected, without JavaScript too. Form fields
   keep selection (the top bar's search). The card island's sheet sits outside <main>, so it is named here. */
body[data-share-guard] main, body[data-share-guard] .ev-card-sheet { -webkit-user-select: none; user-select: none; }
body[data-share-guard] input, body[data-share-guard] textarea { -webkit-user-select: text; user-select: text; }

/* 分享: the panel's targets (the entry page's grid, on this page's tokens). */
.sr-share-status { position: absolute; inset-inline-end: 0; top: calc(100% + 0.25rem); z-index: 1; white-space: nowrap; font-size: 0.75rem;
  color: var(--sr-success); }
.sr-share-status[data-tone="error"] { color: var(--sr-destructive); white-space: normal; width: 14rem; text-align: end; }
.sr-share-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.sr-share-target { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 100%; min-height: 4.5rem;
  padding: 0.625rem 0.25rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--sr-foreground);
  font: inherit; font-size: 0.75rem; cursor: pointer; }
.sr-share-target:hover, .sr-share-target:focus-visible { background: var(--sr-muted); outline: none; }
.sr-share-target:focus-visible { box-shadow: inset 0 0 0 2px var(--sr-ring); }
.sr-share-disc { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--sr-muted); }
.sr-share-disc svg { width: 1.25rem; height: 1.25rem; }

/* The author credit: the signature on a light backing so ink strokes read on every paper (the SPA's AuthorCredit). */
.sr-share-credit { display: inline-flex; align-items: center; min-width: 0; }
.sr-share-signature { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.sr-share-signature img { display: block; width: auto; max-height: 3rem; }
.sr-share-credit.is-inline .sr-share-signature { padding: 0.125rem 0.5rem; }
.sr-share-credit.is-inline .sr-share-signature img { max-height: 1.75rem; }
.sr-share-signature[hidden], .sr-share-credit [hidden] { display: none; }

/* The world band: the position chip, relations under a card, the undisclosed count. */
.sr-share-position { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.3rem 0.875rem;
  min-height: 2rem; border: 1px solid color-mix(in srgb, var(--sr-border) 60%, transparent); border-radius: 999px;
  background: var(--sr-card); font-size: 0.8125rem; color: var(--sr-secondary-foreground); }
.sr-share-position svg { width: 0.875rem; height: 0.875rem; flex: none; }
.sr-share-lore .sr-heading .sr-count { margin-inline-start: 0.375rem; font-weight: 400; }
.sr-share-relations { font-size: 0.8125rem; }
.sr-share-relations-heading { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 700; color: var(--sr-muted-foreground); }
.sr-share-relations ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.sr-share-relations li { overflow-wrap: anywhere; }
.sr-share-undisclosed { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
/* The designed cards (card island): its grid classes need a grid to act on, and its --ev-* tokens are ours. */
.sr-share-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; margin: 0 0 1rem; }
@media (min-width: 768px) { .sr-share-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sr-share-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sr-share-lore, .ev-card-sheet {
  --ev-background: var(--sr-background); --ev-foreground: var(--sr-foreground); --ev-card: var(--sr-card);
  --ev-card-foreground: var(--sr-card-foreground); --ev-primary: var(--sr-primary); --ev-muted: var(--sr-muted);
  --ev-muted-foreground: var(--sr-muted-foreground); --ev-border: var(--sr-border); --ev-ring: var(--sr-ring);
  --ev-font-serif: var(--sr-font-serif);
}
.sr-share-lore .ev-card-hint { margin: -0.5rem 0 0.75rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }

/* The 稱呼矩陣: the box scrolls sideways, the page never does; it hugs a narrow grid. Row and column heads stick. */
.sr-share-addressing-hint { margin: -0.5rem 0 0.75rem; font-size: 0.8125rem; color: var(--sr-muted-foreground); }
.sr-share-addressing-types { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.75rem; }
.sr-share-addressing-types[hidden] { display: none; }
.sr-share-addressing-types .sr-chip { background: transparent; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.sr-share-addressing-types .sr-chip[aria-pressed="true"] { background: var(--sr-primary); border-color: var(--sr-primary);
  color: var(--sr-primary-foreground); }
.sr-share-addressing-table + .sr-share-addressing-table { margin-top: 1.25rem; }
.sr-share-addressing-table[hidden] { display: none; }
[data-switching] .sr-share-addressing-caption { display: none; }
.sr-share-addressing-caption { margin: 0 0 0.375rem; font-size: 0.8125rem; font-weight: 700; color: var(--sr-secondary-foreground); }
.sr-share-addressing-scroll { width: fit-content; max-width: 100%; overflow: auto;
  border: 1px solid var(--sr-border); border-radius: 0.5rem; }
.sr-share-addressing table { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.sr-share-addressing th, .sr-share-addressing td { min-width: 6rem; padding: 0.375rem 0.5rem; text-align: start; vertical-align: top;
  border-bottom: 1px solid var(--sr-border); border-inline-end: 1px solid var(--sr-border); overflow-wrap: anywhere; }
.sr-share-addressing thead th { position: sticky; top: 0; z-index: 2; background: var(--sr-card); font-weight: 600; }
.sr-share-addressing tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--sr-card); font-weight: 600; }
.sr-share-addressing thead th:first-child { inset-inline-start: 0; z-index: 3; font-weight: 400; color: var(--sr-muted-foreground); }
.sr-share-addressing td.is-self { background: var(--sr-muted); }
.sr-share-addressing-none { color: color-mix(in srgb, var(--sr-muted-foreground) 50%, transparent); }

/* 「通知作者」on a closed link. */
.sr-gate p.sr-share-locked-error { margin: -0.75rem 0 1rem; font-size: 0.8125rem; color: var(--sr-destructive); }
.sr-gate [hidden] { display: none; }

/* 「這是你參與的作品」: a modal over everything (the top bar's z 50, the bars' 40, the Aa sheet's 70). */
.sr-member { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sr-member[hidden] { display: none; }
.sr-member-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.sr-member-panel { position: relative; width: 100%; max-width: 26rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; padding: 1.5rem; border-radius: 0.75rem; background: var(--sr-card); color: var(--sr-card-foreground);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
.sr-member-panel h2 { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.4; }
.sr-member-panel p { margin: 0 0 1.25rem; font-size: 0.9375rem; color: var(--sr-secondary-foreground); }
.sr-member-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.sr-member-actions .sr-btn { flex: 1 1 auto; white-space: normal; }