/* Story detail and the device-local reading library. */
.story-page, .library-page { width: min(100%, 760px); margin-inline: auto; }
.reader-byline a { text-decoration-color: var(--line); text-underline-offset: .2em; }
.story-notes summary, .reader-notes summary { min-height: 44px; align-content: center; cursor: pointer; color: var(--muted); font: 550 .85rem/1.4 var(--sans); }
.story-notes p, .reader-notes p { color: var(--muted); font: .85rem/1.55 var(--sans); margin-top: 2px; overflow-wrap: anywhere; }
.story-contents > h2, .shelf-section > h2 { margin-bottom: 10px; }
.contents-list, .shelf-list { border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--card); overflow: hidden; }
.contents-list .chapter-link { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; gap: 12px; min-height: 62px; padding: 8px clamp(12px, 3vw, 22px); }
.contents-list .chapter-list-number { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.contents-list .chapter-list-copy { color: var(--ink); min-width: 0; }
.chapter-list-copy strong { font-weight: 620; }
.chapter-list-copy small { display: block; color: var(--muted); margin-top: 2px; }
.chapter-link[aria-current="page"] { background: var(--wash); }
.chapter-link[aria-current="page"] .chapter-list-number { color: var(--accent); font-weight: 700; }
.shelf-section { margin-bottom: 23px; }
.shelf-list { list-style: none; padding: 0; }
.shelf-item { display: flex; gap: 10px 14px; justify-content: space-between; align-items: center; padding: 12px clamp(12px, 3vw, 18px); }
.shelf-item > div:first-child, .shelf-title { min-width: 0; overflow-wrap: anywhere; }
.shelf-item + .shelf-item { border-top: 1px solid var(--line); }
.shelf-title { font-weight: 650; text-decoration: none; }
.shelf-title:hover { text-decoration: underline; text-underline-offset: .15em; }
.shelf-title .small { display: block; font-weight: 400; }
.shelf-item p { margin-top: 2px; }
.shelf-story { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.shelf-story .cover { width: 36px; flex: 0 0 36px; }
.library-page .empty { max-width: none; }

/* Chapter controls and typography share the reader's appearance. */
.reader-mode {
  --paper: #f8f1e4;
  --card: #fdf8ed;
  --ink: #2c251d;
  --muted: #695b4b;
  --line: #dfd3bf;
  --input-line: #a6947d;
  --wash: #eee2cf;
  --accent: #9c3e29;
  --terracotta: #9c3e29;
  --accent-hover: #823020;
  --reader-gutter: clamp(20px, 5.5vw, 54px);
  --reading-size: 1.32rem;
  --reading-line: 1.67;
  --reading-font: "Baskervville", Georgia, serif;
  --reading-width: 37rem;
  --reading-scale: 1;
}
.reader-mode[data-reader-theme="light"] {
  --paper: #fff;
  --card: #fff;
  --ink: #242322;
  --muted: #615c57;
  --line: #e4ded7;
  --input-line: #a8a29b;
  --wash: #f5f1ed;
}
.reader-mode[data-reader-theme="night"] {
  color-scheme: dark;
  --paper: #181817;
  --card: #22211f;
  --ink: #eee4d5;
  --muted: #c0b29f;
  --line: #413b34;
  --input-line: #82756a;
  --wash: #2e2a25;
  --accent: #ffb193;
  --terracotta: #ffb193;
  --accent-hover: #ffd0bd;
}
.reader-mode[data-reader-font="sans"] { --reading-font: var(--sans); --reading-size: 1.18rem; }
.reader-mode[data-reader-size="-3"] { --reading-scale: .64; }
.reader-mode[data-reader-size="-2"] { --reading-scale: .76; }
.reader-mode[data-reader-size="-1"] { --reading-scale: .88; }
.reader-mode[data-reader-size="1"] { --reading-scale: 1.12; }
.reader-mode[data-reader-size="2"] { --reading-scale: 1.24; }
.reader-mode[data-reader-size="3"] { --reading-scale: 1.36; }
.reader-mode[data-reader-spacing="compact"] { --reading-line: 1.45; }
.reader-mode[data-reader-spacing="loose"] { --reading-line: 1.92; }
.reader-mode[data-reader-width="narrow"] { --reading-width: 30rem; }
.reader-mode[data-reader-width="wide"] { --reading-width: 46rem; }
.reader-mode > .site-header { display: none; }
.reader-mode .site-main { width: 100%; padding: 0 0 max(32px, env(safe-area-inset-bottom)); }
.reader-mode :is(.site-main, .reader-heading h1):focus:not(:focus-visible) { outline: none; }
.reader-bar {
  position: sticky;
  z-index: 3;
  top: 0;
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.reader-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 59px;
  width: min(100% - 2 * var(--reader-gutter), 74rem);
  margin-inline: auto;
}
.reader-series-link { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font: 1.25rem/1.15 var(--serif); text-decoration: none; }
.reader-series-link > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reader-series-link .reader-chevron { color: var(--accent); }
.reader-series-link:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--input-line); text-underline-offset: .2em; }
.reader-tools { display: flex; align-items: center; gap: 4px; }
.reader-tool {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 5px 9px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: 620 .84rem/1 var(--sans);
}
.reader-tool:hover { color: var(--accent); background: var(--wash); }
.reader-tool[aria-pressed="true"] { color: var(--accent); }
.reader-aa { font: 1.33rem/1 var(--serif); }
.reader-chevron {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.back-chevron { transform: rotate(-135deg); }
.reader-bookmark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 73%, 0 100%);
}
.reader-bookmark::after {
  content: "";
  position: absolute;
  inset: 1.5px 1.5px 2.9px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 69%, 0 100%);
}
.btn .reader-bookmark::after { background: var(--card); }
:where(.btn, .reader-tool):hover .reader-bookmark::after { background: var(--wash); }
[aria-pressed="true"] > .reader-bookmark::after { display: none; }
.chapter-reader { width: min(100% - 2 * var(--reader-gutter), var(--reading-width)); margin-inline: auto; }
.reader-heading { padding: clamp(37px, 6vw, 78px) 0 clamp(21px, 4vw, 38px); text-align: center; }
.reader-kicker { color: var(--accent); font: 680 .72rem/1.35 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.reader-heading h1 { font: 400 clamp(2.55rem, 7vw, 4.5rem)/1.03 var(--reading-font); letter-spacing: -.036em; overflow-wrap: anywhere; }
.reader-heading .reader-kicker + h1 { margin-top: 10px; }
.reader-byline { color: var(--muted); margin-top: 12px; font: .85rem/1.45 var(--sans); overflow-wrap: anywhere; }
.reader-byline > span { margin-inline: .23em; color: var(--accent); }
.reader-notes { margin: 6px auto -9px; }
.reader-notes p { text-wrap: pretty; }
.chapter-rule { width: 36px; height: 1px; margin: clamp(15px, 3vw, 27px) auto 0; background: var(--accent); }
.reader-skip-passages:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.reader-skip-passages:focus { display: inline-block; padding: 8px; margin-bottom: 8px; background: var(--card); color: var(--accent); }
.chapter-reader .prose {
  margin: 0 0 clamp(32px, 7vw, 64px);
  font: 400 calc(var(--reading-size) * var(--reading-scale))/var(--reading-line) var(--reading-font);
  overflow-wrap: anywhere;
}
.chapter-reader .prose.plain { white-space: pre-wrap; }
.chapter-reader .prose p + p { margin-block: .85em 0; }
.chapter-reader .prose.markdown :is(ul, ol) { padding-inline-start: 1.5em; }
.chapter-reader .prose.markdown :is(blockquote, pre) { margin-inline: 0; }
.chapter-reader .prose.markdown pre { font-size: .9em; }
.chapter-reader .prose.markdown h1, .chapter-reader .prose.markdown h2, .chapter-reader .prose.markdown h3 { font-family: var(--reading-font); }
.reader-end { border-top: 1px solid var(--line); padding-top: 9px; }
.reader-end-heading { margin-bottom: 8px; }
.reader-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--wash);
  text-decoration: none;
}
.reader-next:hover { border-color: var(--accent); }
.reader-next small { display: block; color: var(--accent); font: 650 .74rem/1.4 var(--sans); }
.reader-next strong { font: 400 1.1rem/1.24 var(--serif); overflow-wrap: anywhere; }
.reader-next .reader-chevron { color: var(--accent); }
.reader-end-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-top: 8px; }
.reader-mode #dialog { width: min(510px, calc(100% - 22px)); }
.reader-dialog-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.reader-dialog-title h2 { margin: 0; overflow-wrap: anywhere; }
.reader-dialog-title .reader-tool { font-size: 1.55rem; margin: -8px -9px 0 0; }
.reader-index + .shelf-section { margin: 20px 0 0; }
.appearance { display: grid; gap: 12px; }
.appearance-row { min-width: 0; margin: 0; border: 0; padding: 0; }
.appearance-row legend { font-size: .84rem; font-weight: 650; padding: 0 0 5px; }
.appearance-options, .text-size { display: flex; gap: 6px; }
.appearance-option { flex: 1; position: relative; min-width: 0; cursor: pointer; }
.appearance-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.appearance-option span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 3px;
  text-align: center;
  font: 560 .84rem/1.3 var(--sans);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}
.appearance-option input:hover + span { border-color: var(--input-line); }
.appearance-option input:checked + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.appearance-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-paper span { color: #382c23; background: #f3e6d1; }
.theme-light span { color: #252321; background: #fff; }
.theme-night span { color: #eee4d5; background: #25221f; }
.appearance-option.theme-night input:checked + span { outline-color: #ffb193; }
.text-size { align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 9px; }
.text-size output { font-size: .86rem; font-variant-numeric: tabular-nums; }
.text-size .reader-tool { font: 1.25rem/1 var(--sans); }
.reader-settings-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }

@media (max-width: 560px) {
  .reader-bar-inner { width: calc(100% - 28px); min-height: 52px; }
  .reader-series-link { font-size: 1.07rem; gap: 7px; padding-inline-start: 3px; }
  .reader-tools { gap: 0; }
}
@media (max-width: 365px) {
  .shelf-item { flex-wrap: wrap; }
}
@media (forced-colors: active) {
  .reader-bookmark, .chapter-rule { forced-color-adjust: none; background: ButtonText; }
  .reader-bookmark::after { background: Canvas; }
  .appearance-option input:checked + span { outline-color: Highlight; }
}

.series-card { position: relative; }
.series-card .cover { width: clamp(60px, 15vw, 83px); }
.card-title { text-decoration: none; }
.card-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-title:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.series-card .tag { position: relative; }
a.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; text-decoration: none; }
a.tag:is(:hover, [aria-current="true"]) { color: var(--accent); border-color: var(--input-line); background: var(--wash); }
.tag-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-filters .tag { min-height: 37px; }
.story-related { margin-top: 28px; }
@media (max-width: 560px) {
  .reader-mode[data-reader-width="narrow"] { --reader-gutter: clamp(32px, 9vw, 48px); }
  .reader-mode[data-reader-width="wide"] { --reader-gutter: 14px; }
}

.reader-discuss-icon { display: inline-block; position: relative; width: 16px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; }
.reader-discuss-icon::after {
  content: ""; position: absolute; left: 2px; bottom: -4px; width: 4px; height: 4px;
  background: var(--paper); border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: skewY(-35deg);
}
.reader-tool:hover .reader-discuss-icon::after { background: var(--wash); }
.reader-index { margin-top: 12px; }
.chapter-reader .prose :target { scroll-margin-top: calc(75px + env(safe-area-inset-top)); }
.reader-quick {
  display: grid; grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
  align-items: center; justify-items: center; gap: 2px; font: 600 .79rem/1.2 var(--sans);
}
.reader-quick.reader-quick-single { grid-template-columns: 1fr; }
.reader-quick a, .reader-quick-position, .reader-step-disabled {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: 8px; border: 0; border-radius: 8px; background: transparent; text-decoration: none;
}
.reader-quick a { color: var(--accent); }
.reader-quick a:last-child .reader-chevron { order: 1; }
.reader-quick-position { color: var(--muted); font-variant-numeric: tabular-nums; }
.reader-quick a:hover, .reader-quick-position:hover { background: var(--wash); color: var(--accent); }
.reader-step-disabled { color: var(--muted); opacity: .68; }
@media (max-width: 740px) {
  .reader-quick {
    position: fixed; inset: auto 0 0; grid-template-columns: 1fr auto 1fr;
    padding: 0 max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left));
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .reader-quick > :first-child { justify-self: start; }
  .reader-quick > :last-child { justify-self: end; }
  .reader-quick-single > .reader-quick-position:only-child { justify-self: center; }
  .reader-mode .site-main:has(.reader-quick) { padding-bottom: calc(67px + env(safe-area-inset-bottom)); }
  .reader-mode:has(.reader-quick) .toast { bottom: calc(55px + env(safe-area-inset-bottom)); }
}

.reader-mode[data-reader-theme="mist"] {
  --paper: #e9efe9;
  --card: #f2f6f1;
  --ink: #24322a;
  --muted: #4f6255;
  --line: #cbd8ce;
  --input-line: #8ca096;
  --wash: #dce8df;
  --accent: #355f48;
  --terracotta: #355f48;
  --accent-hover: #294b39;
}
.theme-mist span { color: #24322a; background: #e9efe9; }
.reader-mode[data-reader-align="justify"] .prose > p { text-align: justify; hyphens: auto; }
.reader-focus-setting { font-size: .87rem; font-weight: 650; }
.reader-focus-exit { display: none; }
.reader-mode[data-reader-focus="true"] .reader-bar-inner { display: none; }
.reader-mode[data-reader-focus="true"] .reader-bar { border: 0; }
.reader-mode[data-reader-focus="true"] .reader-focus-exit {
  display: inline-flex; position: absolute; top: max(4px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  font: 1.1rem/1 var(--serif); color: var(--muted); background: var(--paper);
}
.reader-mode[data-reader-focus="true"] .site-main:has(.reader-quick) { padding-bottom: max(32px, env(safe-area-inset-bottom)); }

.reader-focus-options { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
/* The annotation rail sits outside the line boxes, so showing a marker cannot rewrap the prose. */
.chapter-reader .prose {
  --line-rail: 44px;
  position: relative;
  margin-inline-end: max(0px, var(--line-rail) - var(--reader-gutter));
}
.line-comment-layer { position: absolute; inset: 0; pointer-events: none; }
body[data-reader-hide-lines="true"] :is(.line-comment-layer, .line-comment-hint) { display: none; }
.line-comment-hint { max-width: var(--reader-prose-width, 44rem); margin: 0 auto 14px; padding-inline: 2px; font: 400 .79rem/1.4 var(--sans); color: var(--muted); }
.line-comment-hint summary { cursor: pointer; font-weight: 650; color: var(--accent); width: fit-content; padding-block: 8px; }
.line-comment-hint p { margin: 3px 0 0; }
.reader-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reader-audio p { margin: 0; }
.next-release-note { margin-bottom: 8px; }
.line-comment-marker {
  position: absolute; left: calc(100% + 7px); display: inline-flex; align-items: center; justify-content: center;
  gap: 2px; width: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font: 650 .7rem/1 var(--sans); pointer-events: auto;
}
.line-comment-marker.has-comments { color: var(--accent); }
.line-comment-marker:is(:hover, :focus-visible) { background: var(--wash); }
.line-comment-marker:not(.has-comments) span { display: none; }
.line-comment-hover:not(.is-visible) {
  position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; clip-path: inset(50%); pointer-events: none;
}
.chapter-reader .prose.markdown pre { overflow-x: auto; }
.passage-revealed { background: var(--wash); box-shadow: 2px 0 var(--wash), -2px 0 var(--wash); }
::highlight(ivy-comment) { background: var(--wash); color: var(--accent); text-decoration: underline; }
@media (max-width: 740px) {
  .reader-mode[data-reader-focus="true"] .reader-bar { min-height: calc(44px + env(safe-area-inset-top)); }
  .reader-mode[data-reader-focus="true"] .reader-focus-exit { top: env(safe-area-inset-top); }
}