/* reader.css */

#reader-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0); z-index:400;
  pointer-events:none;
  transition:background 0.35s ease;
}
#reader-overlay.active { background:rgba(0,0,0,0.55); pointer-events:all; }

#reader-sheet {
  position:fixed; left:0; right:0; bottom:0;
  height:95dvh;
  background:var(--white);
  border-radius:18px 18px 0 0;
  z-index:410;
  transform:translateY(100%);
  transition:transform 0.42s var(--ease-slide);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -16px 60px rgba(0,0,0,0.2);
}
#reader-sheet.open { transform:translateY(0); }

#reader-handle {
  width:36px; height:4px; border-radius:2px;
  background:#ddd; margin:10px auto 0; flex-shrink:0;
}

#reader-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}

#reader-close {
  width:34px; height:34px; border-radius:50%;
  background:var(--light); display:flex; align-items:center; justify-content:center;
  transition:background 0.15s;
}
#reader-close:active { background:var(--border); }

#reader-path-tag {
  font-family:var(--font-ui);
  font-size:0.62rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:20px;
  background:color-mix(in srgb, var(--active) 12%, white);
  color:var(--active);
  transition:all 0.25s;
}

#reader-content {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:60px;
}

#reader-banner {
  width:100%; height:190px;
  display:flex; align-items:center; justify-content:center;
  font-size:4.5rem;
  transition:background 0.25s;
}

#reader-meta-row {
  display:flex; align-items:center; gap:6px;
  padding:14px 18px 4px;
}
#reader-source { font-family:var(--font-ui); font-size:0.63rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--active); transition:color 0.25s; }
#reader-dot    { color:#ccc; font-size:0.6rem; }
#reader-time   { font-size:0.62rem; color:var(--mid); }

#reader-title {
  font-family:var(--font-display);
  font-size:clamp(1.35rem,4.5vw,1.9rem);
  font-weight:900; line-height:1.2;
  color:var(--ink); padding:6px 18px 14px;
  letter-spacing:-0.01em;
}

#reader-lead {
  font-family:var(--font-body);
  font-size:1.02rem; font-weight:500;
  line-height:1.68; color:#333;
  padding:0 18px 18px;
  border-bottom:1px solid var(--border);
}

#reader-body {
  padding:18px 18px 0;
  font-family:var(--font-body);
  font-size:0.96rem; line-height:1.78; color:#454542;
}
#reader-body p { margin-bottom:16px; }

/* ── Reader share button ── */
#reader-share-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--light);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark);
  transition: background 0.15s;
}
#reader-share-btn:active { background: var(--border); }

/* ── Reader cover image ── */
#reader-banner.has-cover {
  height: 220px;
  font-size: 0;
}