/*
 * Library reading view (templates/library/article.html + partials/article_main.html).
 *
 * Plain CSS rather than Tailwind utilities so the reading typography lives in
 * one place and needs no rebuild of output.css.
 *
 * #article-content's top-level children are the bookmark/anchor blocks
 * (text-anchor.js stamps them by index): nothing here may add or remove one —
 * it only styles them, and hides the empty <p> the stored <p>-wrapped body
 * parses into.
 */

.bb-reader {
  --reader-ink: #222222;
  --reader-muted: #6b7280;
  --reader-rule: #E2E8EC;
  --reader-accent: #003B65;
  --reader-warm: #F36518;
  --reader-soft: #F7F9FA;
  --reader-size: 1.1875rem;
  --reader-measure: 40rem;
}

/* ---------- layout ---------- */

.bb-reader-shell {
  display: flex;
  gap: 3.5rem;
  padding: 1.75rem 2rem 4rem;
}

.bb-reader-sidebar {
  flex: 0 0 22rem;
  max-width: 22rem;
}

@media (min-width: 768px) {
  .bb-reader-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-inline-end: 0.5rem;
  }
}

.bb-reader-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Focus mode: the library tree is put away and the text sits centred. */
.bb-reader.is-focus .bb-reader-sidebar { display: none; }

@media (max-width: 1023px) {
  .bb-reader-sidebar { flex-basis: 18rem; max-width: 18rem; }
  .bb-reader-shell { gap: 2rem; }
}

@media (max-width: 767px) {
  .bb-reader-shell { display: block; padding: 1rem 1.25rem 3rem; }
  .bb-reader-sidebar { max-width: none; }
}

/* Phone: the menu/article switch above the content. */
.bb-reader-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--reader-rule);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--reader-accent);
  background: #fff;
  cursor: pointer;
}

/* ---------- article header ---------- */

.bb-article {
  max-width: var(--reader-measure);
  margin-inline: auto;
}

.bb-article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--reader-muted);
  margin-bottom: 2.5rem;
}
.bb-article-breadcrumb a { color: var(--reader-muted); transition: color .15s; }
.bb-article-breadcrumb a:hover { color: var(--reader-warm); }
.bb-article-breadcrumb .sep { color: #c4cbd1; }
.bb-article-breadcrumb .current { color: var(--reader-ink); }

.bb-article-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reader-warm);
  margin-bottom: 0.75rem;
}

.bb-article-title {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.15;
  color: var(--reader-accent);
  margin: 0 0 1.25rem;
  font-weight: 400;
}

.bb-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--reader-rule);
  border-bottom: 1px solid var(--reader-rule);
  margin-bottom: 2.75rem;
  font-size: 0.875rem;
  color: var(--reader-muted);
}

.bb-article-rule { margin-bottom: 2.25rem; }

.bb-article-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bb-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--reader-accent);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bb-tool:hover { background: var(--reader-soft); }
.bb-tool:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }
.bb-tool[aria-pressed="true"] { background: var(--reader-soft); border-color: var(--reader-rule); }
.bb-tool svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.bb-tool .bb-tool-a-small { font-size: 0.8rem; }
.bb-tool .bb-tool-a-large { font-size: 1.1rem; }

.bb-tool-primary {
  border-color: var(--reader-accent);
  padding: 0 0.9rem;
}
.bb-tool-primary:hover { background: var(--reader-accent); color: #fff; }

.bb-tool-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--reader-rule);
  margin: 0 0.35rem;
}

/* The focus toggle only makes sense where the tree sits beside the text. */
@media (max-width: 767px) {
  .bb-tool-focus, .bb-tool-divider-focus { display: none; }
  .bb-tool-label-wide { display: none; }
}

/* ---------- reading typography ---------- */

/* Low specificity on purpose: html[lang="he"] * and the other per-language
   font rules in languages.css must still win over the Latin serif. */
.bb-article-body,
.bb-article-body * {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}
.bb-reader.is-sans .bb-article-body,
.bb-reader.is-sans .bb-article-body * {
  font-family: 'Inter', system-ui, sans-serif;
}

.bb-article-body {
  position: relative;
  font-size: var(--reader-size);
  line-height: 1.85;
  color: var(--reader-ink);
  overflow-wrap: break-word;
  hyphens: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* The stored body is wrapped in a <p>, so the browser leaves empty <p>s
   around it: hide them (they stay in the DOM — they are anchor blocks). */
.bb-article-body p:empty,
.bb-article-body .bb-dup-title { display: none; }

.bb-article-body p { margin: 0 0 1.35em; }

/* Justified like a printed book; hyphenation (lang from <html>) keeps the
   word spacing even. Only on article text: not the collection lists. */
.bb-article-body[data-reader-body] p,
.bb-article-body[data-reader-body] li,
.bb-article-body[data-reader-body] blockquote {
  text-align: justify;
  text-align-last: start;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Phones: ~35 characters a line is too few to justify — Chrome often has no
   hyphenation dictionary for the language, and gaps open between words. */
@media (max-width: 520px) {
  .bb-article-body[data-reader-body] p,
  .bb-article-body[data-reader-body] li,
  .bb-article-body[data-reader-body] blockquote { text-align: start; }
}

.bb-article-body em, .bb-article-body i { font-style: italic; }
.bb-article-body strong, .bb-article-body b { font-weight: 600; color: #111; }

.bb-article-body h1,
.bb-article-body h2,
.bb-article-body h3,
.bb-article-body h4 {
  font-family: 'Taviraj', serif;
  color: var(--reader-accent);
  line-height: 1.3;
  font-weight: 500;
  margin: 2.2em 0 0.8em;
}
.bb-article-body h1 { font-size: 1.6em; }
.bb-article-body h2 { font-size: 1.4em; }
.bb-article-body h3 { font-size: 1.2em; }
.bb-article-body h4 { font-size: 1.05em; }

.bb-article-body a {
  color: var(--reader-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 59, 101, .3);
  text-underline-offset: 3px;
}
.bb-article-body a:hover { text-decoration-color: var(--reader-warm); }

.bb-article-body blockquote {
  margin: 1.8em 0;
  padding-block: 0.2em;
  border-inline-start: 2px solid var(--reader-warm);
  padding-inline-start: 1.4em;
  font-style: italic;
  color: #3a3a3a;
}

.bb-article-body ul, .bb-article-body ol { margin: 0 0 1.35em; padding-inline-start: 1.5em; }
.bb-article-body ul { list-style: disc; }
.bb-article-body ol { list-style: decimal; }
.bb-article-body li { margin: 0.35em 0; }

.bb-article-body img { max-width: 100%; height: auto; margin: 2em auto; border-radius: 0.25rem; }

.bb-article-body sup { font-size: 0.7em; line-height: 0; }

.bb-article-body hr {
  border: 0;
  margin: 2.5em auto;
  width: 4rem;
  border-top: 1px solid var(--reader-rule);
}

.bb-article-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9em; }
.bb-article-body td, .bb-article-body th { border: 1px solid var(--reader-rule); padding: .5em .75em; }

/* The page text is selected a lot (share, bookmark, translate): a calm highlight. */
.bb-article-body ::selection { background: rgba(243, 101, 24, .18); }

/* The legacy in-text trigger stays in place (it is anchor block 0) but the
   header button now opens the reader. */
.bb-article-body > [data-presentation-trigger].bb-legacy-trigger { display: none; }

/* End of text ornament. */
.bb-article-end {
  display: flex;
  justify-content: center;
  margin: 3rem 0 2.5rem;
  color: var(--reader-warm);
  opacity: .7;
}
.bb-article-end svg { width: 3.5rem; height: 1.25rem; }

/* ---------- previous / next ---------- */

.bb-article-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 560px) { .bb-article-pager { grid-template-columns: 1fr; } }

.bb-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--reader-rule);
  border-radius: 0.75rem;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.bb-pager-link:hover { border-color: var(--reader-accent); background: var(--reader-soft); }
.bb-pager-link.is-next { text-align: end; grid-column: 2; }
@media (max-width: 560px) { .bb-pager-link.is-next { grid-column: 1; } }

.bb-pager-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--reader-muted);
}
.bb-pager-link.is-next .bb-pager-label { justify-content: flex-end; }
.bb-pager-label svg { width: 0.9rem; height: 0.9rem; transition: transform .15s; }
[dir="rtl"] .bb-pager-label svg { transform: scaleX(-1); }

.bb-pager-title {
  font-family: 'Taviraj', serif;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--reader-accent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- collections (an entry with children, an author page) ---------- */

.bb-article-intro { margin-bottom: 2rem; }

.bb-article-body .bb-toc {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--reader-rule);
  counter-reset: bb-toc;
}
.bb-article-body .bb-toc-item { margin: 0; border-bottom: 1px solid var(--reader-rule); counter-increment: bb-toc; }
.bb-article-body a.bb-toc-link { text-decoration: none; color: inherit; }
.bb-toc-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0.5rem;
  transition: background .15s;
}
.bb-toc-link:hover { background: var(--reader-soft); }
.bb-toc-num {
  flex: 0 0 2.25rem;
  text-align: end;
  font-size: 0.875rem;
  color: var(--reader-warm);
  font-variant-numeric: tabular-nums;
}
.bb-toc-text { flex: 1 1 auto; min-width: 0; }
.bb-toc-title {
  display: block;
  font-family: 'Taviraj', serif;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--reader-accent);
}
.bb-toc-link:hover .bb-toc-title { color: var(--reader-warm); }
.bb-toc-year { color: var(--reader-muted); font-size: 0.875rem; margin-inline-start: 0.4rem; }
.bb-toc-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--reader-muted);
}
/* Previews are stored HTML: keep them inline in the clamp. */
.bb-toc-preview * { display: inline; margin: 0; font-size: inherit; }

/* ---------- reading progress ---------- */

.bb-reading-progress {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--reader-warm);
  z-index: 60;
  pointer-events: none;
  transition: opacity .2s;
}
[dir="rtl"] .bb-reading-progress { transform-origin: right center; }

/* ---------- back to top ---------- */

.bb-to-top {
  position: fixed;
  inset-inline-end: 1.5rem;
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--reader-accent);
  border: 1px solid var(--reader-rule);
  box-shadow: 0 4px 14px rgba(0, 59, 101, .12);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  z-index: 40;
}
.bb-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.bb-to-top svg { width: 1.1rem; height: 1.1rem; }
/* Above the bottom tab bar on phones. */
@media (max-width: 1023px) { .bb-to-top { bottom: 5.5rem; } }

@media (prefers-reduced-motion: reduce) {
  .bb-reading-progress, .bb-to-top, .bb-pager-link, .bb-toc-link { transition: none; }
}

@media print {
  .bb-reader-sidebar, .bb-article-tools, .bb-article-pager, .bb-to-top,
  .bb-reading-progress, .bb-reader-switch, .bb-article-breadcrumb { display: none !important; }
  .bb-article { max-width: none; }
  .bb-article-body { font-size: 11pt; }
}

/* Entries without a number of their own: their position in the list. */
.bb-toc-num:empty::before { content: counter(bb-toc); }