/* ===================================================================
   FICTBASE Plugin — Public Styles  v2.0
   All rules scoped under .fictbase-* / #fb-reader / #fb-progress-bar
   so they never bleed into the host WordPress theme.
   =================================================================== */

/* ---- Design tokens -------------------------------------------- */
.fictbase-story-page,
.fictbase-stories,
.fictbase-stories-page,
.fictbase-search-page,
.fictbase-tag-page,
.fictbase-login-widget,
.fictbase-bookmarks-page {
  --fb-accent:      #4f46e5;
  --fb-accent-dk:   #4338ca;
  --fb-accent-bg:   #eef2ff;
  --fb-green:       #16a34a;
  --fb-green-bg:    #f0fdf4;
  --fb-text:        #18181b;
  --fb-text-2:      #3f3f46;
  --fb-muted:       #71717a;
  --fb-light:       #a1a1aa;
  --fb-surface:     #ffffff;
  --fb-surface-2:   #f9f9fb;
  --fb-border:      #e4e4e7;
  --fb-border-2:    #d4d4d8;
  --fb-radius:      14px;
  --fb-radius-sm:   8px;
  --fb-shadow:      0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  --fb-shadow-md:   0 4px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);
  --fb-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fb-font-serif:  'Georgia', 'Times New Roman', serif;

  font-family: var(--fb-font);
  color: var(--fb-text);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.fictbase-story-page *,
.fictbase-stories *,
.fictbase-stories-page *,
.fictbase-search-page *,
.fictbase-tag-page *,
.fictbase-login-widget *,
.fictbase-bookmarks-page * {
  box-sizing: border-box;
}

/* ===================================================================
   STORY ARCHIVE / GRID
   =================================================================== */

.fictbase-stories {
  margin: 0;
  padding: 8px 0;
}

.fb-no-content {
  color: var(--fb-muted);
  font-style: italic;
  padding: 32px 0;
  text-align: center;
}

.fb-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  margin: 8px 0;
}

.fb-story-card {
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  overflow: hidden;
  background: var(--fb-surface);
  box-shadow: var(--fb-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex;
  flex-direction: column;
}

.fb-story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 24px 48px rgba(79,70,229,.12);
  border-color: var(--fb-accent);
}

.fb-story-card__cover {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.fb-story-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.fb-story-card:hover .fb-story-card__cover img {
  transform: scale(1.04);
}

.fb-story-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fb-story-card__genre {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fb-accent);
  display: block;
  margin-bottom: 6px;
}

.fb-story-card__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  font-family: var(--fb-font);
}

.fb-story-card__title a {
  color: var(--fb-text);
  text-decoration: none;
}

.fb-story-card__title a:hover {
  color: var(--fb-accent);
}

.fb-story-card__desc {
  font-size: .875rem;
  color: var(--fb-muted);
  line-height: 1.55;
  margin-bottom: 12px;
  flex: 1;
}

.fb-story-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .78rem;
  color: var(--fb-light);
  margin-bottom: 14px;
}

/* ===================================================================
   STORY SINGLE PAGE
   =================================================================== */

.fictbase-story-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

/* Hero card */
.fb-story-hero {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 48px;
  padding: 36px;
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow-md);
}

.fb-story-cover {
  flex: 0 0 200px;
}

.fb-story-cover img {
  width: 200px !important;
  height: 300px !important;
  max-width: none !important;
  border-radius: 12px;
  aspect-ratio: 2 / 3;
  object-fit: cover !important;
  display: block !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
}

.fb-story-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.fb-story-genre-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fb-story-title {
  font-family: var(--fb-font);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--fb-text);
  margin: 0 0 14px;
  letter-spacing: -.03em;
}

.fb-story-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .83rem;
  color: var(--fb-muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.fb-story-stats__sep {
  color: var(--fb-border-2);
}

.fb-story-description {
  font-size: .975rem;
  line-height: 1.75;
  color: var(--fb-text-2);
  margin-bottom: 24px;
}

.fb-story-description p {
  margin: 0 0 .75em;
}

.fb-story-description p:last-child {
  margin-bottom: 0;
}

.fb-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Chapters section */
.fb-chapter-section {
  margin-bottom: 40px;
}

.fb-chapter-section__heading {
  font-family: var(--fb-font);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fb-light);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fb-border);
}

/* Chapter list */
.fb-chapter-ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-chapter-ol__item {
  display: flex;
  align-items: center;
  gap: 0;
}

.fb-chapter-ol__link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  text-decoration: none;
  padding: 13px 16px;
  border-radius: var(--fb-radius-sm);
  transition: background .15s ease;
  border: 1px solid transparent;
}

.fb-chapter-ol__link:hover {
  background: var(--fb-surface-2);
  border-color: var(--fb-border);
}

.fb-chapter-ol__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fb-surface-2);
  border: 1px solid var(--fb-border);
  font-size: .78rem;
  font-weight: 700;
  color: var(--fb-muted);
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.fb-chapter-ol__link:hover .fb-chapter-ol__num {
  background: var(--fb-accent-bg);
  border-color: var(--fb-accent);
  color: var(--fb-accent);
}

/* A chapter label is free text ("Prologue", "Chapter One"), so the circle sized
   for a digit would spill it. Grow into a pill and ellipsis anything very long.
   display:block (not flex) because text-overflow needs a block container; the
   line-height is the 32px box minus its 1px borders under border-box. */
.fb-chapter-ol__num--label {
  display: block;
  width: auto;
  /* A common min-width so a story whose chapters are all labelled keeps a
     straight title column instead of a ragged one. */
  min-width: 6rem;
  max-width: 9rem;
  padding: 0 .65rem;
  border-radius: 999px;
  line-height: 30px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-chapter-ol__body {
  flex: 1;
  min-width: 0;
}

.fb-chapter-ol__title {
  display: block;
  font-size: .925rem;
  font-weight: 600;
  color: var(--fb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.fb-chapter-ol__link:hover .fb-chapter-ol__title {
  color: var(--fb-accent);
}

.fb-chapter-ol__meta {
  font-size: .775rem;
  color: var(--fb-light);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.fb-chapter-ol__meta-sep {
  color: var(--fb-border-2);
}

.fb-chapter-ol__arrow {
  font-size: .85rem;
  color: var(--fb-border-2);
  flex-shrink: 0;
  margin-left: 4px;
  transition: color .15s, transform .15s;
}

.fb-chapter-ol__link:hover .fb-chapter-ol__arrow {
  color: var(--fb-accent);
  transform: translateX(3px);
}

.fb-chapter-ol__item--hidden { display: none; }

.fb-load-more {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 11px 24px;
  border: 1.5px solid var(--fb-border-2);
  border-radius: var(--fb-radius-sm);
  background: transparent;
  color: var(--fb-muted);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--fb-font);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.fb-load-more:hover { border-color: var(--fb-accent); color: var(--fb-accent); }

@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-load-more { border-color: #3f3f46; color: #a1a1aa; }
  .fb-theme-auto .fb-load-more:hover { border-color: var(--fb-accent); color: var(--fb-accent); }
}
.fb-theme-dark .fb-load-more { border-color: #3f3f46; color: #a1a1aa; }
.fb-theme-dark .fb-load-more:hover { border-color: var(--fb-accent); color: var(--fb-accent); }

/* Follow widget */
.fb-follow-widget {
  margin-top: 40px;
  padding: 32px 28px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: var(--fb-radius);
  text-align: center;
}

.fb-follow-widget h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fb-text);
  font-family: var(--fb-font);
}

.fb-follow-widget__sub {
  font-size: .875rem;
  color: var(--fb-muted);
  margin: 0 0 18px;
}

.fb-follow-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.fb-follow-form__input {
  padding: 10px 16px;
  border: 1.5px solid var(--fb-border-2);
  border-radius: var(--fb-radius-sm);
  font-size: .95rem;
  min-width: 240px;
  background: #fff;
  color: var(--fb-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--fb-font);
}

.fb-follow-form__input:focus {
  border-color: var(--fb-accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.fb-follow-widget__success {
  color: var(--fb-green);
  font-weight: 600;
  font-size: .95rem;
}

.fb-follow-widget__error {
  color: #dc2626;
  font-size: .875rem;
  margin-bottom: 12px;
}

.fb-follow-widget__note {
  font-size: .775rem;
  color: var(--fb-light);
  margin: 8px 0 0;
}

/* ===================================================================
   BADGES
   =================================================================== */

.fb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--fb-surface-2);
  color: var(--fb-muted);
  font-family: var(--fb-font);
  white-space: nowrap;
}

.fb-badge--ongoing   { background: var(--fb-green-bg);  color: var(--fb-green);   border: 1px solid #bbf7d0; }
.fb-badge--completed { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.fb-badge--hiatus    { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.fb-badge--draft     { background: var(--fb-surface-2); color: var(--fb-light); border: 1px solid var(--fb-border); }
.fb-badge--premium   { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ===================================================================
   BUTTONS
   =================================================================== */

.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--fb-radius-sm);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  font-family: var(--fb-font);
  line-height: 1;
  white-space: nowrap;
}

.fb-btn:active { transform: scale(.98); }

.fb-btn--primary {
  background: var(--fb-accent);
  color: #fff !important;
  border-color: var(--fb-accent);
  box-shadow: 0 1px 3px rgba(79,70,229,.3);
}

.fb-btn--primary:hover {
  background: var(--fb-accent-dk);
  border-color: var(--fb-accent-dk);
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
}

.fb-btn--outline {
  background: #fff;
  color: var(--fb-text) !important;
  border-color: var(--fb-border-2);
}

.fb-btn--outline:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent) !important;
  background: var(--fb-accent-bg);
}

.fb-btn--lg {
  padding: 13px 28px;
  font-size: 1rem;
}

/* ===================================================================
   CHAPTER READER
   =================================================================== */

#fb-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fb-accent), #818cf8);
  width: 0%;
  z-index: 9999;
  transition: width .1s linear;
}

body.fictbase-reader-page {
  background: #fafafa;
}

/* Some themes (e.g. PopularFX) apply float:left + display:inline-block to all
   <main> elements. Override here so our reader footer appears below the content,
   not alongside it. */
body.fictbase-reader-page #fb-reader-content {
  float: none !important;
  display: block !important;
  width: auto !important;
}

body.fictbase-reader-page .fb-reader-footer {
  clear: both;
}

#fb-reader {
  --fb-accent:    #4f46e5;
  --fb-accent-dk: #4338ca;
  /* Was only ever defined on the virtual pages, so the bookmark button's
     saved and hover backgrounds resolved to nothing inside the reader. */
  --fb-accent-bg: #eef2ff;
  --fb-text:      #18181b;
  --fb-muted:     #71717a;
  --fb-light:     #a1a1aa;
  --fb-surface:   #ffffff;
  --fb-surface-2: #f9f9fb;
  --fb-border:    #e4e4e7;
  --fb-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fb-font-serif: 'Georgia', 'Times New Roman', serif;

  min-height: 100vh;
  padding-bottom: 80px;
  font-family: var(--fb-font);
  -webkit-font-smoothing: antialiased;
}

/* Width variants */
.fb-reader .fb-reader-content,
.fb-reader .fb-reader-header,
.fb-reader .fb-reader-footer,
.fb-reader .fb-reader-nav,
.fb-reader .fb-comments,
.fb-reader .fb-breadcrumb {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.fb-width-narrow .fb-reader-content,
.fb-width-narrow .fb-reader-header,
.fb-width-narrow .fb-reader-footer,
.fb-width-narrow .fb-reader-nav,
.fb-width-narrow .fb-comments,
.fb-width-narrow .fb-breadcrumb { max-width: 580px; }

.fb-width-wide .fb-reader-content,
.fb-width-wide .fb-reader-header,
.fb-width-wide .fb-reader-footer,
.fb-width-wide .fb-reader-nav,
.fb-width-wide .fb-comments,
.fb-width-wide .fb-breadcrumb { max-width: 880px; }

/* Font size variants */
.fb-font-small  .fb-reader-content { font-size: .9rem; }
.fb-font-medium .fb-reader-content { font-size: 1.1rem; }
.fb-font-large  .fb-reader-content { font-size: 1.25rem; }

/* Top nav */
/* The tools group carries margin-left:auto, which eats the free space
   space-between would otherwise have distributed -- so the story title and the
   chapter label ran together with no gap at all. gap is what separates them;
   the auto margin still pushes the tools to the right. */
.fb-reader-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: .875rem;
  color: var(--fb-muted);
}

.fb-reader-nav--top {
  border-bottom: 1px solid var(--fb-border);
  margin-bottom: 40px;
}

.fb-reader-nav__back {
  text-decoration: none;
  color: var(--fb-muted);
  font-weight: 500;
  transition: color .15s;
  /* Block, not flex: the arrow and the title are one text node, and
     text-overflow does not apply to the anonymous item a flex container would
     wrap that text in. A long story title truncates here rather than shoving
     the chapter label and the tools off the row. */
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-reader-nav__back:hover { color: var(--fb-accent); }

.fb-reader-nav__chapter {
  font-weight: 600;
  color: var(--fb-text);
  font-size: .825rem;
  white-space: nowrap;
}

/* Reader header */
.fb-reader-header { margin-bottom: 40px; }

.fb-reader-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--fb-text);
  letter-spacing: -.02em;
}

.fb-reader-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .83rem;
  color: var(--fb-light);
  flex-wrap: wrap;
}

/* Chapter content */
.fb-reader-content {
  line-height: 1.9;
  color: #2d2d2d;
  font-family: var(--fb-font-serif);
}

.fb-reader-content p,
#fb-reader .fb-reader-content p,
#fb-reader-content p,
body .fb-reader-content p {
  margin: 0 0 1.2em !important;
  line-height: 1.9 !important;
}

.fb-reader-content p:empty,
#fb-reader .fb-reader-content p:empty,
#fb-reader-content p:empty {
  display: none !important;
  margin: 0 !important;
}

.fb-reader-content p + p,
#fb-reader .fb-reader-content p + p,
#fb-reader-content p + p {
  text-indent: 2em;
}

/* Footer nav */
.fb-reader-footer {
  border-top: 1px solid var(--fb-border);
  margin-top: 60px;
  padding-top: 36px;
}

.fb-reader-chapnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.fb-chapnav__prev {
  border: 1.5px solid var(--fb-border-2);
  color: var(--fb-text-2) !important;
  background: #fff;
}

.fb-chapnav__prev:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent) !important;
  background: var(--fb-accent-bg);
}

.fb-chapnav__toc {
  font-size: .83rem;
  color: var(--fb-light);
  text-decoration: none;
  transition: color .15s;
}

.fb-chapnav__toc:hover { color: var(--fb-accent); }

.fb-chapnav__end {
  font-size: .83rem;
  color: var(--fb-light);
}

.fb-chapnav__placeholder { flex: 0 0 auto; }

/* Author bio */
.fb-author-bio {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--fb-surface-2);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
}

.fb-author-bio__avatar { border-radius: 50%; flex-shrink: 0; }

.fb-author-bio__name {
  font-size: .95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  color: var(--fb-text);
}

.fb-author-bio p {
  margin: 0;
  font-size: .875rem;
  color: var(--fb-muted);
  line-height: 1.55;
  font-family: var(--fb-font);
}

/* ===================================================================
   PRO FEATURES
   =================================================================== */

/* Bookmark button — a toggle: filled means this story has a saved place, and
   clicking again removes it. */
.fb-bookmark-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fb-light);
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: color .15s, background .15s;
}

.fb-bookmark-btn:hover { color: var(--fb-accent); background: var(--fb-accent-bg); }

/* Saved state */
.fb-bookmark-btn--saved { color: var(--fb-accent); background: var(--fb-accent-bg); }
.fb-bookmark-btn--saved svg { fill: var(--fb-accent); stroke: var(--fb-accent); }

/* The dot is the at-a-glance answer to "is this saved?". A fill alone is easy
   to miss on an 18px icon, and it is the only standing cue that the next click
   removes something rather than saving it again. */
.fb-bookmark-btn--saved::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fb-accent);
  border: 1.5px solid var(--fb-surface);
}

/* Confirmation, beside the button that caused it. role="status" is on the
   element, so it is announced as well as shown. */
.fb-bm-toast {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--fb-text);
  color: var(--fb-surface);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fb-bm-toast--on { opacity: 1; transform: translateY(0); }

/* Brief pulse on click to confirm the save registered */
@keyframes fb-bm-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.fb-bookmark-btn--pulse svg { animation: fb-bm-pulse .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .fb-bm-toast { transition: none; }
  .fb-bookmark-btn--pulse svg { animation: none; }
}

/* "Previously On" recap */
.fb-recap {
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius-sm);
  margin: 0 auto 32px;
  max-width: 680px;
  background: var(--fb-surface-2);
  overflow: hidden;
}

.fb-recap__toggle {
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  color: var(--fb-muted);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-recap__toggle::-webkit-details-marker { display: none; }
.fb-recap__toggle::before { content: '▶'; font-size: .65em; }
details[open] .fb-recap__toggle::before { content: '▼'; }
details[open] .fb-recap { border-bottom: none; }

.fb-recap__body {
  padding: 4px 18px 16px;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--fb-text-2);
  border-top: 1px solid var(--fb-border);
  font-family: var(--fb-font);
}

/* Premium teaser fade */
.fb-premium-teaser {
  position: relative;
  max-height: 320px;
  overflow: hidden;
}
.fb-premium-teaser::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--fb-surface));
  pointer-events: none;
}
.fb-theme-dark .fb-premium-teaser::after {
  background: linear-gradient(to bottom, transparent, var(--fb-surface));
}

/* Premium gate */
.fb-premium-gate {
  text-align: center;
  padding: 56px 32px;
  border: 2px dashed var(--fb-border);
  border-radius: var(--fb-radius);
  margin: 40px auto;
  max-width: 420px;
  background: var(--fb-surface-2);
}

.fb-premium-gate svg { color: var(--fb-light); margin-bottom: 16px; }
.fb-premium-gate h2 { font-size: 1.2rem; margin: 0 0 8px; color: var(--fb-text); font-family: var(--fb-font); }
.fb-premium-gate p  { color: var(--fb-muted); margin: 0 0 28px; font-size: .9rem; font-family: var(--fb-font); }

/* ===================================================================
   DARK THEME
   =================================================================== */

/* ── Dark theme tokens — applies to reader AND all virtual pages ── */
.fb-theme-dark,
.fb-theme-dark #fb-reader {
  --fb-accent-bg: rgba(79, 70, 229, .22);
  --fb-text:      #f4f4f5;
  --fb-text-2:    #d4d4d8;
  --fb-muted:     #a1a1aa;
  --fb-light:     #71717a;
  --fb-surface:   #1c1c1e;
  --fb-surface-2: #2c2c2e;
  --fb-border:    #3f3f46;
  --fb-border-2:  #52525b;
  background: #111113;
  color: #f4f4f5;
}

/* Dark — reader-specific */
.fb-theme-dark .fb-reader-content { color: #d4d4d8; font-family: var(--fb-font-serif); }
.fb-theme-dark .fb-reader-title   { color: #f4f4f5; }
.fb-theme-dark .fb-chapter-ol__link:hover { background: #2c2c2e; }
.fb-theme-dark .fb-chapter-ol__num { background: #2c2c2e; border-color: #3f3f46; }
.fb-theme-dark .fb-follow-widget  { background: linear-gradient(135deg, #1e1b4b, #1e1e2e); border-color: #3730a3; }
.fb-theme-dark .fb-follow-form__input { background: #1c1c1e; border-color: #3f3f46; color: #f4f4f5; }
.fb-theme-dark .fb-chapnav__prev  { background: #1c1c1e; border-color: #3f3f46; color: #d4d4d8 !important; }
.fb-theme-dark .fb-author-bio     { background: #2c2c2e; border-color: #3f3f46; }

/* Dark — shared across all pages */
.fb-theme-dark .fb-story-card     { background: #1c1c1e; border-color: #3f3f46; }
.fb-theme-dark .fb-story-card:hover { border-color: var(--fb-accent); }
.fb-theme-dark .fb-story-hero     { background: #1c1c1e; border-color: #3f3f46; }
.fb-theme-dark .fb-story-title    { color: #f4f4f5; }
.fb-theme-dark .fb-btn--outline   { background: #1c1c1e; border-color: #3f3f46; color: #d4d4d8 !important; }
.fb-theme-dark .fb-btn--ghost     { background: transparent; border-color: #3f3f46; color: #a1a1aa; }
.fb-theme-dark .fb-filter-pill    { background: #1c1c1e; border-color: #3f3f46; color: #a1a1aa; }
.fb-theme-dark .fb-filter-pill:hover { background: #2c2c2e; border-color: var(--fb-accent); color: var(--fb-accent); }
.fb-theme-dark .fb-filter-pill--active { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
.fb-theme-dark .fb-bookmark-card  { background: #1c1c1e; border-color: #3f3f46; }
.fb-theme-dark .fb-bookmark-card__cover { background: #2c2c2e; border-color: #3f3f46; }
.fb-theme-dark .fb-bookmark-card__cover--empty { background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%); }
.fb-theme-dark .fb-breadcrumb     { background: #1c1c1e; border-color: #3f3f46; }
.fb-theme-dark .fb-reader .fb-breadcrumb { background: none; border-color: #3f3f46; }
.fb-theme-dark .fb-pagination__btn { background: #1c1c1e; border-color: #3f3f46; color: #a1a1aa; }
.fb-theme-dark .fb-pagination__btn:hover { border-color: var(--fb-accent); color: var(--fb-accent); background: #1c1c1e; }
.fb-theme-dark .fb-bm-page-title  { color: #f4f4f5; }
.fb-theme-dark .fb-archive-title  { color: #f4f4f5; }
.fb-theme-dark .fb-filter-bar     { border-color: #3f3f46; }

/* ===================================================================
   AUTO THEME (system preference)
   =================================================================== */

@media (prefers-color-scheme: dark) {
  .fb-theme-auto {
    --fb-accent-bg: rgba(79, 70, 229, .22);
    --fb-text: #f4f4f5; --fb-text-2: #d4d4d8;
    --fb-muted: #a1a1aa; --fb-light: #71717a;
    --fb-surface: #1c1c1e; --fb-surface-2: #2c2c2e;
    --fb-border: #3f3f46; --fb-border-2: #52525b;
    background: #111113; color: #f4f4f5;
  }
  .fb-theme-auto .fb-reader-content { color: #d4d4d8; }
  .fb-theme-auto .fb-story-hero     { background: #1c1c1e; border-color: #3f3f46; }
  .fb-theme-auto .fb-story-card     { background: #1c1c1e; border-color: #3f3f46; }
  .fb-theme-auto .fb-chapter-ol__link:hover { background: #2c2c2e; }
  .fb-theme-auto .fb-follow-widget  { background: linear-gradient(135deg, #1e1b4b, #1e1e2e); }
  .fb-theme-auto .fb-filter-pill    { background: #1c1c1e; border-color: #3f3f46; color: #a1a1aa; }
  .fb-theme-auto .fb-filter-pill--active { background: var(--fb-accent); border-color: var(--fb-accent); color: #fff; }
  .fb-theme-auto .fb-bookmark-card  { background: #1c1c1e; border-color: #3f3f46; }
  .fb-theme-auto .fb-breadcrumb     { background: #1c1c1e; border-color: #3f3f46; }
  .fb-theme-auto .fb-pagination__btn { background: #1c1c1e; border-color: #3f3f46; color: #a1a1aa; }
  .fb-theme-auto .fb-btn--outline    { background: #1c1c1e; border-color: #52525b; color: #d4d4d8 !important; }
  .fb-theme-auto .fb-btn--outline:hover { border-color: var(--fb-accent); color: var(--fb-accent) !important; background: #1e1b4b; }
  .fb-theme-auto .fb-chapnav__prev   { background: #1c1c1e; border-color: #3f3f46; color: #d4d4d8 !important; }
  .fb-theme-auto .fb-chapter-ol__item { border-color: #3f3f46; }
  .fb-theme-auto .fb-story-stats     { color: #71717a; }
  .fb-theme-auto .fb-story-description { color: #a1a1aa; }
}

/* ===================================================================
   LOGIN WIDGET
   =================================================================== */

.fictbase-login-widget { max-width: 380px; margin: 0 auto; }
.fb-login-logged-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fb-login-greeting { margin: 0; font-size: .95rem; color: var(--fb-text-2); }
.fb-login-form-wrap #fb-login-form p { margin: 0 0 14px; }
.fb-login-form-wrap #fb-login-form label { display: block; font-size: .85rem; color: var(--fb-muted); margin-bottom: 4px; font-family: var(--fb-font); }
.fb-login-form-wrap #fb-login-form input[type="text"],
.fb-login-form-wrap #fb-login-form input[type="password"] {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--fb-border);
  border-radius: var(--fb-radius-sm); font-size: .95rem; box-sizing: border-box; outline: none;
  transition: border-color .15s; font-family: var(--fb-font); color: var(--fb-text);
}
.fb-login-form-wrap #fb-login-form input:focus { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.fb-login-form-wrap #fb-login-submit {
  width: 100%; padding: 11px; background: var(--fb-text); color: #fff;
  border: none; border-radius: var(--fb-radius-sm); font-size: .95rem; font-weight: 600;
  cursor: pointer; margin-top: 4px; font-family: var(--fb-font); transition: background .15s;
}
.fb-login-form-wrap #fb-login-submit:hover { background: var(--fb-text-2); }
.fb-login-register-link, .fb-login-lost-link { font-size: .82rem; color: var(--fb-light); text-align: center; margin-top: 12px; }
.fb-login-register-link a, .fb-login-lost-link a { color: var(--fb-muted); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 700px) {
  .fb-story-hero {
    flex-direction: column;
    padding: 24px;
    gap: 20px;
  }
  .fb-story-cover { flex: 0 0 auto; display: flex; justify-content: center; }
  .fb-story-cover img { width: 140px !important; height: 210px !important; max-width: none !important; }
  .fb-story-title { font-size: 1.6rem; }
  .fb-story-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fb-reader-title { font-size: 1.5rem; }
  .fb-reader-chapnav { flex-direction: column; align-items: stretch; text-align: center; gap: 8px; }
  .fb-chapnav__prev,
  .fb-chapnav__next { display: flex; width: 100%; min-width: 0; justify-content: center; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; }
  .fb-chapnav__toc { order: -1; width: 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; }
  .fb-chapnav__placeholder { display: none; }
}

@media (max-width: 460px) {
  .fb-story-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fictbase-story-page,
  .fictbase-stories-page,
  .fictbase-search-page,
  .fictbase-tag-page,
  .fictbase-bookmarks-page { padding: 24px 16px 48px; }
}

/* ===================================================================
   READER NAV — tools group (bookmark button + My Bookmarks link)
   =================================================================== */

#fb-reader .fb-reader-nav__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  position: relative;   /* the confirmation toast anchors here */
}

#fb-reader .fb-reader-nav__bm-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--fb-reader-muted, #a1a1aa);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
#fb-reader .fb-reader-nav__bm-link:hover {
  background: rgba(79,70,229,.08);
  color: #4f46e5;
}
#fb-reader .fb-reader-nav__bm-link svg {
  flex-shrink: 0;
}

/* ===================================================================
   MY BOOKMARKS PAGE
   =================================================================== */

.fictbase-bookmarks-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.fb-bm-page-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--fb-border);
  padding-bottom: 20px;
}

.fb-bm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--fb-muted);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .15s;
}
.fb-bm-back:hover {
  color: var(--fb-accent);
}

.fb-bm-page-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--fb-text);
}

.fb-bm-page-count {
  margin: 0;
  font-size: .875rem;
  color: var(--fb-muted);
}

.fb-bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fb-bookmarks-empty,
.fb-bookmarks-loading {
  padding: 48px 0;
  text-align: center;
  color: var(--fb-muted);
  font-size: .95rem;
}

/* Bookmark card */
.fb-bookmark-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  padding: 20px;
  box-shadow: var(--fb-shadow);
  transition: box-shadow .2s;
}
.fb-bookmark-card:hover {
  box-shadow: var(--fb-shadow-md);
}

.fb-bookmark-card__cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fb-surface-2);
  border: 1px solid var(--fb-border);
}
.fb-bookmark-card__cover--empty {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.fb-bookmark-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-bookmark-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-bookmark-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.fb-bookmark-card__title a {
  color: var(--fb-text);
  text-decoration: none;
}
.fb-bookmark-card__title a:hover {
  color: var(--fb-accent);
}

.fb-bookmark-card__pos {
  margin: 0;
  font-size: .85rem;
  color: var(--fb-accent);
  font-weight: 500;
}

.fb-bookmark-card__date {
  margin: 0;
  font-size: .8rem;
  color: var(--fb-muted);
}

.fb-bookmark-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Library — what a reader has paid to unlock. Reuses the bookmark card so a
   purchase and a saved place read as the same kind of thing on one page. */
.fb-library {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--fb-border);
}

.fb-library__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.fb-library__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fb-text);
}

.fb-library__count {
  margin: 0;
  font-size: .85rem;
  color: var(--fb-muted);
}

/* A row whose content is gone or unpublished is still a purchase, so it keeps
   its place in the list and only loses the emphasis of a live one. */
.fb-library-card__note {
  margin: 0;
  font-size: .8rem;
  color: var(--fb-muted);
  font-style: italic;
}

/* Ghost / small button variants */
.fb-btn--sm {
  padding: 6px 14px;
  font-size: .8rem;
}
.fb-btn--ghost {
  background: transparent;
  color: var(--fb-muted);
  border: 1px solid var(--fb-border);
}
.fb-btn--ghost:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff1f1;
}

@media (max-width: 520px) {
  .fb-bookmark-card {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 16px;
  }
  .fb-bm-page-header { flex-direction: column; gap: 4px; }
  /* Icon only on a phone. The label is a bare text node, not a <span>, so it
     is collapsed with font-size rather than selected -- the rule that tried to
     hide a <span> here never matched anything. */
  #fb-reader .fb-reader-nav__bm-link {
    font-size: 0;
    gap: 0;
    padding: 6px;
  }
}

/* ===================================================================
   STORIES ARCHIVE PAGE  (/stories/)
   =================================================================== */

.fictbase-stories-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.fb-archive-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.fb-archive-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--fb-text);
}

.fb-archive-count {
  font-size: .85rem;
  color: var(--fb-muted);
  margin: 0;
}

/* Filter bar */
.fb-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--fb-border);
}

.fb-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.fb-filter-group--right {
  flex: 0 0 auto;
}

.fb-filter-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1px solid var(--fb-border);
  background: var(--fb-surface);
  color: var(--fb-text-2);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.fb-filter-pill:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent);
  background: var(--fb-accent-bg);
}

.fb-filter-pill--active {
  background: var(--fb-accent);
  border-color: var(--fb-accent);
  color: #fff;
}

.fb-filter-pill--active:hover {
  background: var(--fb-accent-dk);
  border-color: var(--fb-accent-dk);
  color: #fff;
}

.fb-filter-pill--sm {
  padding: 4px 11px;
  font-size: .78rem;
}

/* Cover placeholder — rich gradient + subtle radial highlight */
.fb-story-card__cover--empty {
  display: block;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #4f46e5 0%, #7c3aed 100%);
}
.fb-story-card__cover--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 25%, rgba(255,255,255,.22) 0%, transparent 65%);
}
/* Rotate gradient per card so adjacent cards look distinct */
.fb-story-card:nth-child(4n+2) .fb-story-card__cover--empty { background: linear-gradient(160deg, #0891b2 0%, #4f46e5 100%); }
.fb-story-card:nth-child(4n+3) .fb-story-card__cover--empty { background: linear-gradient(160deg, #be185d 0%, #7c3aed 100%); }
.fb-story-card:nth-child(4n+4) .fb-story-card__cover--empty { background: linear-gradient(160deg, #0d9488 0%, #0284c7 100%); }

/* Badges row inside card body */
.fb-story-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Pagination */
.fb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.fb-pagination__btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--fb-radius-sm);
  border: 1px solid var(--fb-border);
  background: var(--fb-surface);
  color: var(--fb-text-2);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.fb-pagination__btn:hover {
  border-color: var(--fb-accent);
  color: var(--fb-accent);
  background: var(--fb-accent-bg);
}

.fb-pagination__info {
  font-size: .82rem;
  color: var(--fb-muted);
}

@media (max-width: 600px) {
  .fb-filter-bar { flex-direction: column; align-items: flex-start; }
  .fb-filter-group--right { align-self: flex-start; }
  .fb-archive-header { flex-direction: column; gap: 4px; }
}

/* ===================================================================
   BREADCRUMB  (shared across all fictbase pages + reader)
   =================================================================== */

.fb-breadcrumb {
  display: inline-flex;
  align-items: center;
  background: var(--fb-surface-2);
  border: 1px solid var(--fb-border);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 28px;
}

/* Inside the reader: flush against the nav, no pill background */
.fb-reader .fb-breadcrumb {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 14px 0 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--fb-border);
}

.fb-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: .775rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.fb-breadcrumb__item {
  display: flex;
  align-items: center;
}

/* Link crumbs */
.fb-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fb-muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}

.fb-breadcrumb__link:hover {
  color: var(--fb-accent);
  background: var(--fb-accent-bg);
}

/* Home icon */
.fb-breadcrumb__home-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

/* Chevron separator */
.fb-breadcrumb__chevron {
  width: 14px;
  height: 14px;
  color: var(--fb-light);
  flex-shrink: 0;
  margin: 0 1px;
}

/* Current page (last crumb) */
.fb-breadcrumb__current {
  color: var(--fb-text);
  padding: 2px 4px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .fb-breadcrumb {
    padding: 5px 12px;
  }
  .fb-breadcrumb__current {
    max-width: 160px;
  }
}

/* Unlock controls (Pro fills these into the paid gate).
   Each button is its own form because each carries its own nonce, so the forms
   have to disappear from the layout and let the buttons sit in the gate's flex
   row directly. */
.fb-unlock-form { margin: 0; display: contents; }
.fb-premium-gate .fb-unlock-pending,
.fb-premium-gate .fb-unlock-error {
	flex: 1 0 100%;
	margin: 0 0 4px;
	font-size: .9rem;
	font-family: var(--fb-font);
}
.fb-premium-gate .fb-unlock-pending { color: var(--fb-muted); }
.fb-premium-gate .fb-unlock-error   { color: #b32d2e; }

/* ── Content rating and warnings (2.5.0) ───────────────────────────────── */
.fb-advisory {
  border: 1px solid var(--fb-border);
  border-left: 3px solid #f59e0b;
  border-radius: var(--fb-radius-sm);
  background: var(--fb-surface-2);
  padding: 12px 16px;
  margin: 0 0 18px;
}
.fb-advisory--compact {
  padding: 9px 14px;
  margin: 0 0 22px;
  font-size: 13px;
}
.fb-advisory__heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fb-muted);
}
.fb-advisory__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fb-advisory__label {
  font-size: 12px;
  color: var(--fb-muted);
  margin-right: 2px;
}
.fb-advisory__rating,
.fb-advisory__warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.fb-advisory__warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 500;
}
.fb-advisory__rating--teen     { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.fb-advisory__rating--mature   { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.fb-advisory__rating--explicit { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Dark reader theme. Duplicated for .fb-theme-auto under the OS preference,
   matching how the rest of this file handles the two. */
.fb-theme-dark .fb-advisory { background: #1c1c1e; border-color: #3f3f46; border-left-color: #f59e0b; }
.fb-theme-dark .fb-advisory__heading,
.fb-theme-dark .fb-advisory__label { color: #a1a1aa; }
.fb-theme-dark .fb-advisory__warning { background: #2a2113; color: #fbbf24; border-color: #5a4416; }
.fb-theme-dark .fb-advisory__rating--teen     { background: #16213a; color: #93c5fd; border-color: #1e3a8a; }
.fb-theme-dark .fb-advisory__rating--mature   { background: #2c1a0e; color: #fdba74; border-color: #7c2d12; }
.fb-theme-dark .fb-advisory__rating--explicit { background: #2c1416; color: #fca5a5; border-color: #7f1d1d; }
@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-advisory { background: #1c1c1e; border-color: #3f3f46; border-left-color: #f59e0b; }
  .fb-theme-auto .fb-advisory__heading,
  .fb-theme-auto .fb-advisory__label { color: #a1a1aa; }
  .fb-theme-auto .fb-advisory__warning { background: #2a2113; color: #fbbf24; border-color: #5a4416; }
  .fb-theme-auto .fb-advisory__rating--teen     { background: #16213a; color: #93c5fd; border-color: #1e3a8a; }
  .fb-theme-auto .fb-advisory__rating--mature   { background: #2c1a0e; color: #fdba74; border-color: #7c2d12; }
  .fb-theme-auto .fb-advisory__rating--explicit { background: #2c1416; color: #fca5a5; border-color: #7f1d1d; }
}

.fb-feed-link {
  float: right;
  padding: 2px 9px;
  border: 1px solid var(--fb-border);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fb-muted);
  text-decoration: none;
}
.fb-feed-link:hover { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.fb-theme-dark .fb-feed-link { border-color: #3f3f46; }
@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-feed-link { border-color: #3f3f46; }
}

/* ===================================================================
   SEARCH — form, results, hits
   =================================================================== */

.fictbase-search-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.fb-search-form { margin: 0 0 28px; }
.fb-search-form--compact { margin: 0 0 20px; }

.fb-search-form__label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fb-muted);
}

.fb-search-form__row { display: flex; gap: 8px; }

.fb-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--fb-text);
  background: var(--fb-surface);
  border: 1px solid var(--fb-border-2);
  border-radius: var(--fb-radius-sm);
}
.fb-search-form__input:focus {
  outline: none;
  border-color: var(--fb-accent);
  box-shadow: 0 0 0 3px var(--fb-accent-bg);
}
.fb-search-form__submit { flex: 0 0 auto; }

.fb-search-notice {
  margin: 0 0 24px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--fb-text-2);
  background: var(--fb-surface-2);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius-sm);
}

.fb-search-section { margin: 0 0 36px; }

.fb-search-section__title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fb-muted);
  border-bottom: 1px solid var(--fb-border);
}

.fb-search-list { margin: 0; padding: 0; list-style: none; }

.fb-search-hit {
  padding: 16px 0;
  border-bottom: 1px solid var(--fb-border);
}
.fb-search-hit:last-child { border-bottom: 0; }

.fb-search-hit__story {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fb-muted);
}
.fb-search-hit__story a { color: inherit; text-decoration: none; }
.fb-search-hit__story a:hover { color: var(--fb-accent); }

.fb-search-hit__title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}
.fb-search-hit__title a { color: var(--fb-text); text-decoration: none; }
.fb-search-hit__title a:hover { color: var(--fb-accent); }

.fb-search-hit__lock {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--fb-border-2);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--fb-muted);
  vertical-align: middle;
}

.fb-search-hit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--fb-muted);
}
.fb-search-hit__genre { font-weight: 600; color: var(--fb-accent); }

.fb-search-hit__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fb-text-2);
}
.fb-search-hit__excerpt--locked { font-style: italic; color: var(--fb-muted); }

.fb-search-hit__excerpt mark {
  padding: 0 2px;
  background: #fef3c7;
  color: inherit;
  border-radius: 2px;
}

.fb-search-more,
.fb-search-back { margin: 12px 0 0; font-size: 14px; color: var(--fb-muted); }
.fb-search-back a { color: var(--fb-accent); text-decoration: none; }

/* Dark, following the same duplication as the rest of this file. */
.fb-theme-dark .fb-search-form__input,
.fb-theme-dark .fb-search-notice { background: #1c1c1e; border-color: #3f3f46; color: #f4f4f5; }
.fb-theme-dark .fb-search-section__title,
.fb-theme-dark .fb-search-hit { border-color: #27272a; }
.fb-theme-dark .fb-search-hit__title a { color: #f4f4f5; }
.fb-theme-dark .fb-search-hit__lock { border-color: #3f3f46; }
.fb-theme-dark .fb-search-hit__excerpt mark { background: #4a3a12; color: #fde68a; }
@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-search-form__input,
  .fb-theme-auto .fb-search-notice { background: #1c1c1e; border-color: #3f3f46; color: #f4f4f5; }
  .fb-theme-auto .fb-search-section__title,
  .fb-theme-auto .fb-search-hit { border-color: #27272a; }
  .fb-theme-auto .fb-search-hit__title a { color: #f4f4f5; }
  .fb-theme-auto .fb-search-hit__lock { border-color: #3f3f46; }
  .fb-theme-auto .fb-search-hit__excerpt mark { background: #4a3a12; color: #fde68a; }
}

@media (max-width: 560px) {
  .fb-search-form__row { flex-direction: column; }
  .fb-search-form__submit { width: 100%; }
}

/* ===================================================================
   TAGS — chips on a story page, and the tag archive (/stories/tag/x/)
   =================================================================== */

.fictbase-tag-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.fb-archive-eyebrow {
  margin: 0 0 2px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fb-muted);
  flex-basis: 100%;
}

.fb-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

/* Styled off the tokens rather than literal colours, so the dark and auto
   themes get the chip for free -- the token block above is what changes. */
.fb-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--fb-border);
  border-radius: 999px;
  background: var(--fb-surface);
  color: var(--fb-muted) !important;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}

.fb-tag-chip:hover,
.fb-tag-chip:focus-visible {
  border-color: var(--fb-accent);
  background: var(--fb-accent-bg);
  color: var(--fb-accent) !important;
}

.fb-tag-chip__count {
  font-size: .68rem;
  font-weight: 700;
  color: var(--fb-light);
  font-variant-numeric: tabular-nums;
}

.fb-tag-cloud {
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--fb-border);
}

.fb-tag-cloud__label {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fb-muted);
}

.fb-tag-cloud__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The token block does the rest; only the accent-tinted hover needs a nudge
   so it does not go near-white on a dark ground. */
.fb-theme-dark .fb-tag-chip:hover,
.fb-theme-dark .fb-tag-chip:focus-visible { background: #1e1b4b; color: #a5b4fc !important; }

@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-tag-chip:hover,
  .fb-theme-auto .fb-tag-chip:focus-visible { background: #1e1b4b; color: #a5b4fc !important; }
}


/* ===================================================================
   COMMENTS (chapter thread)
   Every colour comes from the #fb-reader token block, so the dark and
   auto themes above recolour this section without a rule of their own.
   The exceptions are at the bottom: form controls, which browsers paint
   white regardless of what the page around them says.
   =================================================================== */

.fb-comments {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--fb-border);
}

.fb-comments__title {
  margin: 0 0 24px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--fb-text);
  font-variant-numeric: tabular-nums;
}

.fb-comments__empty,
.fb-comments__closed {
  margin: 0 0 24px;
  font-size: .9rem;
  color: var(--fb-muted);
}

.fb-comment-list,
.fb-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Replies step in, with a rule marking the thread they belong to. One
   step is enough to read the nesting; deeper indents run a fifth-level
   reply off the side of a phone. */
.fb-comment-list .children {
  margin: 16px 0 0 14px;
  padding-left: 18px;
  border-left: 2px solid var(--fb-border);
}

.fb-comment {
  margin: 0 0 24px;
}

.fb-comment__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.fb-comment__avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.fb-comment__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fb-comment__author {
  font-size: .9rem;
  font-weight: 700;
  color: var(--fb-text);
}

.fb-comment__date {
  font-size: .75rem;
  color: var(--fb-light) !important;
  text-decoration: none;
}

.fb-comment__date:hover { color: var(--fb-accent) !important; }

.fb-comment__text {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--fb-text);
}

.fb-comment__text p { margin: 0 0 12px; }
.fb-comment__text p:last-child { margin-bottom: 0; }

.fb-comment__reply {
  margin-top: 8px;
  font-size: .8rem;
}

.fb-comment__reply a {
  color: var(--fb-muted) !important;
  font-weight: 600;
  text-decoration: none;
}

.fb-comment__reply a:hover { color: var(--fb-accent) !important; }

/* A comment held for moderation is only ever shown to the person who
   left it, so it is marked rather than hidden. */
.fb-comment--pending > .fb-comment__body { opacity: .72; }

.fb-comment__pending {
  margin: 0 0 8px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fb-light);
}

/* ---- The form ---- */

.fb-comments .fb-comment-form,
.fb-comments #respond {
  margin-top: 32px;
}

.fb-comments #reply-title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fb-text);
}

.fb-comments #reply-title small { font-size: .8rem; font-weight: 500; margin-left: 8px; }

.fb-comments .fb-comment-form__field label,
.fb-comments .comment-form-author label,
.fb-comments .comment-form-email label,
.fb-comments .comment-form-url label {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--fb-muted);
}

.fb-comments p { margin: 0 0 16px; }

.fb-comments textarea,
.fb-comments input[type="text"],
.fb-comments input[type="email"],
.fb-comments input[type="url"] {
  width: 100%;
  max-width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--fb-border);
  border-radius: var(--fb-radius-sm, 8px);
  background: var(--fb-surface);
  color: var(--fb-text);
  font-family: var(--fb-font);
  font-size: .95rem;
  line-height: 1.6;
  box-sizing: border-box;
  outline: none;
}

.fb-comments textarea:focus,
.fb-comments input[type="text"]:focus,
.fb-comments input[type="email"]:focus,
.fb-comments input[type="url"]:focus {
  border-color: var(--fb-accent);
}

.fb-comments .comment-notes,
.fb-comments .comment-form-cookies-consent label,
.fb-comments .logged-in-as,
.fb-comments .must-log-in {
  font-size: .8rem;
  color: var(--fb-muted);
}

.fb-comments .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-comments .comment-form-cookies-consent input { margin: 0; }

/* Dark grounds: the token block recolours everything above except the
   controls, which the browser paints from its own defaults. */
.fb-theme-dark .fb-comments textarea,
.fb-theme-dark .fb-comments input[type="text"],
.fb-theme-dark .fb-comments input[type="email"],
.fb-theme-dark .fb-comments input[type="url"] {
  background: #1c1c1e;
  border-color: #3f3f46;
  color: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
  .fb-theme-auto .fb-comments textarea,
  .fb-theme-auto .fb-comments input[type="text"],
  .fb-theme-auto .fb-comments input[type="email"],
  .fb-theme-auto .fb-comments input[type="url"] {
    background: #1c1c1e;
    border-color: #3f3f46;
    color: #f4f4f5;
  }
}