/* ============================================
   ARTICLE / READER VIEW
   ============================================ */

.article-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px 24px 0;
}

.breadcrumb {
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 18px;
}

.breadcrumb a:hover { color: var(--brick); }

.article-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
  display: block;
}

.article-header h1 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.byline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}

.byline-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.byline-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.byline-role {
  font-size: 12px;
  color: var(--slate);
}

.byline-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--slate);
  text-align: right;
}

.view-count::before { content: '· '; }

.placeholder-notice {
  max-width: var(--content-width);
  margin: 28px auto 60px;
  padding: 20px 24px;
  background: var(--brick-tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Listen panel ---- */

.listen-panel {
  max-width: var(--content-width);
  margin: 22px auto 0;
  padding: 16px 20px;
  background: var(--moss-tint);
  border: 1px solid #C7DBD2;
  border-radius: 8px;
}

.listen-panel-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.listen-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--moss);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.listen-btn svg { width: 13px; height: 13px; fill: var(--paper); }
.listen-btn.playing svg.icon-play { display: none; }
.listen-btn:not(.playing) svg.icon-pause { display: none; }

.listen-info { flex: 1; min-width: 0; }
.listen-title { font-size: 13px; font-weight: 600; color: var(--moss); }
.listen-sub { font-size: 12px; color: #4A7263; }

.listen-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--moss);
}

.listen-rate select {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--moss);
  background: var(--paper-raised);
  border: 1px solid #C7DBD2;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
}

.listen-progress-wrap {
  margin-top: 14px;
}

.listen-progress-track {
  position: relative;
  height: 4px;
  background: #C7DBD2;
  border-radius: 2px;
  cursor: pointer;
}

.listen-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--moss);
  border-radius: 2px;
}

.listen-progress-handle {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  background: var(--moss);
  border: 2px solid var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  box-shadow: 0 0 0 1px var(--moss);
}

.listen-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #4A7263;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.listen-voice-note {
  font-size: 11px;
  color: #4A7263;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #C7DBD2;
}

/* ---- Reader toolbar ---- */

.reader-toolbar {
  position: sticky;
  /* Sits just below the masthead (also sticky, higher z-index) instead of
     both competing for top: 0 — that collision used to leave this whole
     toolbar (font/theme controls included) hidden behind the masthead
     once scrolled. */
  top: var(--masthead-height);
  z-index: 40;
  background: var(--read-bg);
  border-bottom: 1px solid var(--rule);
}

.reader-toolbar-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* .reader-progress-bar itself now lives inside .masthead (see main.css) so
   it's always visible, anchored right under the category nav row, rather
   than tied to this toolbar's own sticky position. */

.toolbar-group { display: flex; align-items: center; gap: 6px; }

.toolbar-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
}

.toolbar-btn:hover { border-color: var(--ink-soft); }
.toolbar-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.theme-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  cursor: pointer;
}

.theme-swatch.active { box-shadow: 0 0 0 2px var(--brick); }
.theme-swatch[data-theme="light"] { background: #FAFAF7; }
.theme-swatch[data-theme="sepia"] { background: #F0E6D2; }
.theme-swatch[data-theme="dark"] { background: #1B1D22; }

/* ---- Reading themes ---- */

body[data-theme="sepia"] { --read-bg: #F4ECDB; --read-ink: #3B2F22; background: var(--read-bg); color: var(--read-ink); }
body[data-theme="sepia"] .article-body { color: var(--read-ink); }
body[data-theme="sepia"] .masthead { background: var(--read-bg); }

body[data-theme="dark"] { --read-bg: #181A1F; --read-ink: #DCDDE2; background: var(--read-bg); color: var(--read-ink); }
body[data-theme="dark"] .article-body { color: var(--read-ink); }
body[data-theme="dark"] .article-body blockquote { color: #B6B9C2; border-color: #3A3D45; }
body[data-theme="dark"] .masthead { background: var(--read-bg); border-color: #3A3D45; }
body[data-theme="dark"] .article-header h1,
body[data-theme="dark"] .article-dek { color: var(--read-ink); }
body[data-theme="dark"] .byline-row,
body[data-theme="dark"] .reader-toolbar,
body[data-theme="dark"] .reader-toolbar-inner { border-color: #3A3D45; }

/* ---- Article body (the Kindle-style reading column) ---- */

.article-body {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 32px 24px 60px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
}

.article-body[data-size="sm"] { font-size: 17px; }
.article-body[data-size="lg"] { font-size: 21px; }
.article-body[data-size="xl"] { font-size: 23px; }

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

.article-body p.lede::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  margin: 0.04em 0.08em 0 0;
  color: var(--brick);
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.32em;
  font-weight: 600;
  margin: 1.6em 0 0.7em;
  line-height: 1.3;
}

.article-body blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 3px solid var(--brick);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05em;
}

.article-body .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5em;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 1.8em 0;
  padding: 0 10%;
  text-align: center;
}

.reading-sentence.active-sentence {
  background: rgba(31, 77, 62, 0.1);
  box-shadow: 0 0 0 2px rgba(31, 77, 62, 0.18);
  border-radius: 2px;
}

body[data-theme="dark"] .reading-sentence.active-sentence {
  background: rgba(95, 168, 145, 0.18);
}

.article-footer-meta {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px 60px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.share-block { margin-top: 4px; }

.share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 10px;
}

.share-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.share-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.share-btn svg { width: 17px; height: 17px; }

.share-btn:hover { color: #fff; border-color: transparent; }
.share-btn.share-facebook:hover { background: #1877F2; }
.share-btn.share-x:hover { background: #000; }
.share-btn.share-whatsapp:hover { background: #25D366; }
.share-btn.share-linkedin:hover { background: #0A66C2; }
.share-btn.share-reddit:hover { background: #FF4500; }
.share-btn.share-instagram:hover {
  background: linear-gradient(45deg, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%);
}
.share-btn.share-copy:hover { background: var(--ink); }

.share-toast {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

.source-note {
  font-size: 12px;
  color: var(--slate);
  margin-top: 18px;
}

@media (max-width: 600px) {
  .article-header h1 { font-size: 28px; }
  .article-dek { font-size: 16px; }
  .article-body { font-size: 18px; }
  .article-body[data-size="lg"] { font-size: 19px; }
  .article-body[data-size="xl"] { font-size: 20px; }
  .listen-panel-top { flex-wrap: wrap; }
  .byline-meta { display: none; }
}