/* Adult content gate: blur chapter prose and the thanks bar until the user dismisses the 18+ banner */
.immersive-reader .adult-content-gate--locked #user-content,
.immersive-reader .adult-content-gate--locked .chapter-thanks-bar {
  filter: blur(2.5px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .immersive-reader #user-content,
  .immersive-reader .chapter-thanks-bar {
    transition: filter 200ms ease;
  }
}

/* Open paragraph-error marks: soft wash always visible (stronger on interact) */
.immersive-reader #user-content .paragraph-report--marked {
  background-color: color-mix(in srgb, var(--color-status-warning-subtle-bg) 70%, transparent) !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.immersive-reader #user-content .paragraph-report--marked:hover,
.immersive-reader #user-content .paragraph-report--marked[aria-expanded="true"] {
  background-color: var(--color-status-warning-subtle-bg) !important;
}

.immersive-reader #user-content .paragraph-report--marked:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--color-status-warning-solid) 70%, transparent);
  outline-offset: 2px;
}

.paragraph-report-mark-popover {
  position: absolute;
  z-index: 60;
  max-width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-line);
  background: var(--color-card);
  color: var(--color-fg);
  box-shadow: var(--shadow-popover, 0 8px 24px rgb(0 0 0 / 0.1));
}

.paragraph-report-mark-popover__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.paragraph-report-mark-popover__item {
  padding: 0.45rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-fg) 12%, transparent);
}

.paragraph-report-mark-popover__item:first-child {
  padding-top: 0;
  border-top: none;
}

.paragraph-report-mark-popover__user {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-fg);
}

.paragraph-report-mark-popover__text {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-fg-secondary);
}

.paragraph-report-mark-popover__empty {
  color: var(--color-fg-muted);
}

/* Bottom grid: fiction anchor + translator support (chapter reader + fiction show) */
.reader-bottom-grid {
  align-items: stretch;
}

.reader-bottom-grid__cell {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.reader-bottom-grid__cell > .reader-bottom-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

.reader-bottom-card,
.reader-anchor-card,
.reader-support-card {
  min-height: 0;
}

.reader-bottom-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.reader-bottom-card__visual {
  flex-shrink: 0;
  align-self: stretch;
  width: 3rem;
}

@media (min-width: 640px) {
  .reader-bottom-card__visual {
    width: 3.75rem;
  }
}

@media (min-width: 768px) {
  .reader-bottom-card__visual {
    width: 4.5rem;
  }
}

@media (min-width: 1024px) {
  .reader-bottom-card__visual {
    width: 5.25rem;
  }

  .reader-support-card__visual {
    align-self: flex-start;
    aspect-ratio: 2 / 3;
  }
}

.reader-anchor-card__cover {
  align-self: flex-start;
  aspect-ratio: 2 / 3;
}

.reader-support-card__visual {
  display: flex;
}

.reader-bottom-card__action--full .reader-outlined-btn {
  width: 100%;
}

.reader-support-card__mascot {
  user-select: none;
  -webkit-user-select: none;
}

/* Reader toolbar: slide off on scroll down; reappear instantly on scroll up (see reader_toolbar_controller.js) */
@media (prefers-reduced-motion: reduce) {
  .immersive-reader .reader-toolbar {
    transition: none;
  }
}

/* Immersive chapter reader — light mode (“sunlit” stone palette, cover-visible scrim) */

html:not(.dark) .immersive-reader #user-content {
  color: rgb(41 37 36) !important; /* stone-800 */
}

html:not(.dark) .immersive-reader #user-content :where(h1, h2, h3, h4, h5, h6) {
  color: rgb(28 25 23) !important; /* stone-900 */
}

html:not(.dark) .immersive-reader #user-content :where(a) {
  color: rgb(14 116 144) !important; /* cyan-700 */
}

html:not(.dark) .immersive-reader #user-content :where(a:hover) {
  color: rgb(21 94 117) !important; /* cyan-800 */
}

html:not(.dark) .immersive-reader #user-content :where(strong, b) {
  color: rgb(28 25 23) !important;
}

html:not(.dark) .immersive-reader #user-content .explanation {
  color: #4b5563 !important;
  -webkit-text-fill-color: currentcolor !important;
}

html:not(.dark) .immersive-reader #user-content :where(blockquote) {
  border-left-color: rgb(214 211 209); /* stone-300 */
  color: rgb(87 83 78) !important; /* stone-600 */
}

html:not(.dark) .immersive-reader .note-content {
  background: rgb(250 250 249); /* stone-50 */
  border-color: rgb(8 145 178 / 0.25);
  border-left-color: rgb(14 116 144 / 0.55);
  color: rgb(68 64 60); /* stone-700 */
}

/* Immersive chapter reader — dark mode (solid scrim, high contrast, no blue form glow) */

.dark .immersive-reader #user-content {
  color: rgb(228 228 231) !important; /* zinc-200 */
}

.dark .immersive-reader #user-content :where(h1, h2, h3, h4, h5, h6) {
  color: rgb(250 250 250) !important; /* zinc-50 */
}

.dark .immersive-reader #user-content :where(a) {
  color: rgb(251 113 133) !important; /* rose-400 */
}

.dark .immersive-reader #user-content :where(a:hover) {
  color: rgb(253 164 175) !important; /* rose-300 */
}

.dark .immersive-reader #user-content :where(strong, b) {
  color: rgb(250 250 250) !important;
}

.dark .immersive-reader #user-content .explanation {
  color: #a1a1aa !important;
  -webkit-text-fill-color: currentcolor !important;
}

.dark .immersive-reader #user-content :where(blockquote) {
  border-left-color: rgb(82 82 91); /* zinc-600 */
  color: rgb(161 161 170) !important; /* zinc-400 */
}

.dark .immersive-reader .note-content {
  background: rgb(24 24 27);
  border-color: rgb(159 18 57 / 0.35);
  border-left-color: rgb(190 18 60 / 0.55);
  color: rgb(228 228 231);
}


/* Reader ad drawer: panel sits below sticky reader toolbar (top-12); grid fits in remaining viewport */
.immersive-reader .reader-ad-drawer__body {
  background: rgb(12 10 9 / 0.92); /* stone-950 */
}

.dark .immersive-reader .reader-ad-drawer__body {
  background: rgb(9 9 11 / 0.94); /* zinc-950 */
}

.immersive-reader .reader-ad-drawer__grid {
  max-height: calc(100dvh - 7rem);
}

.immersive-reader .reader-ad-drawer__cell ins.adsbygoogle[data-ad-status='unfilled'] {
  display: none !important;
}

.immersive-reader .reader-ad-drawer__cell:has(ins.adsbygoogle[data-ad-status='unfilled']) {
  display: none;
}

.immersive-reader .reader-ad-drawer__cell ins.adsbygoogle {
  min-height: 3.75rem;
  max-height: calc((100dvh - 7.5rem) / 3 - 0.35rem);
}

@media (min-width: 640px) {
  .immersive-reader .reader-ad-drawer__grid {
    max-height: calc(100dvh - 8rem);
  }

  .immersive-reader .reader-ad-drawer__cell ins.adsbygoogle {
    min-height: 4.5rem;
    max-height: calc((100dvh - 8.5rem) / 3 - 0.5rem);
  }
}

/* Reader settings drawer — match site primary buttons (cyan-700) */
.immersive-reader .reader-settings__font--active {
  border-color: rgb(14 116 144);
  background-color: rgb(14 116 144);
  color: rgb(255 255 255);
}

.dark .immersive-reader .reader-settings__font--active {
  border-color: rgb(225 29 72);
  background-color: rgb(225 29 72);
  color: rgb(255 255 255);
}

/* Comments drawer: keep body tight under timestamp (no turbo-frame / paragraph stack gap) */
.immersive-reader turbo-frame.reader-comments-drawer__content {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.immersive-reader .reader-comments-drawer__content > p {
  margin: 0;
}

/* Comments drawer — textarea padding (composer + inline edit/reply inside cards) */
.immersive-reader .reader-comments-drawer__input,
.immersive-reader .reader-comments-drawer__composer textarea,
.immersive-reader .reader-comments-drawer__card form.comment textarea {
  box-sizing: border-box;
  padding: 0.75rem;
}

.dark .immersive-reader .reader-comments-drawer__input,
.dark .immersive-reader .reader-comments-drawer__composer textarea,
.dark .immersive-reader .reader-comments-drawer__card form.comment textarea {
  background-color: rgb(39 39 42);
  color: rgb(244 244 245);
  border-color: rgb(63 63 70);
}

.dark .immersive-reader .reader-comments-drawer__input:focus,
.dark .immersive-reader .reader-comments-drawer__composer textarea:focus,
.dark .immersive-reader .reader-comments-drawer__card form.comment textarea:focus {
  border-color: rgb(244 63 94);
  outline: none;
  box-shadow: 0 0 0 2px rgb(244 63 94 / 0.2);
}