/* THE VIBE TIMES — the reader layer's own sheet (kite-unfold BP-2026-08-18-503).
 *
 * The story card overlay: fixed to the viewport, above the tower's panned
 * world, never inside a --vt-pan transform — a card must never mis-position
 * when a floor is mid-swipe. FURNITURE LAW analog (docs/design/
 * vibe-times-building.md, "Integration rulings" #3): live HTML over the
 * room, never baked pixels — article text changes twice daily.
 *
 * Palette matches tower.css: dark inked panel, brass border, warm off-white
 * body text, the same #E8654A accent tower.css uses for the article-of-the-
 * day stamp.
 */

.vt-reader-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  background: #05070Bcc; padding: 4vh 4vw;
}
.vt-reader-overlay.is-open { display: flex; }

.vt-reader-card {
  position: relative; max-width: 640px; width: 100%; max-height: 88vh;
  overflow-y: auto; padding: 32px 30px 26px;
  background: linear-gradient(180deg, #12161DEE, #05070BF5);
  border: 2px solid #C8A15B99; border-radius: 6px;
  box-shadow: 0 12px 40px #000A;
  color: #F2E9D8; font-family: ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
}

.vt-reader-headline {
  margin: 0 22px 14px 0; font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2; font-weight: 700; letter-spacing: .01em;
}
.vt-reader-highlight {
  margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #F2E9D8DD;
  border-left: 3px solid #E8654A; padding-left: 14px;
}

.vt-reader-history { margin: 0 0 22px; }
.vt-reader-history-label {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #C8A15B;
}
.vt-reader-history-list { list-style: none; margin: 0; padding: 0; }
.vt-reader-history-list li { margin: 0 0 8px; font-size: 14px; }
.vt-reader-history-list a { color: #6FD3E8; text-decoration: none; }
.vt-reader-history-list a:hover, .vt-reader-history-list a:focus { text-decoration: underline; }
.vt-reader-history-date { color: #F2E9D888; }
.vt-reader-first { margin: 0 0 22px; font-size: 13px; color: #F2E9D899; font-style: italic; }

.vt-reader-linkout {
  display: inline-block; padding: 10px 18px; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: #05070B;
  background: #E8654A; border-radius: 3px; text-decoration: none; font-weight: 600;
}
.vt-reader-linkout:hover, .vt-reader-linkout:focus { background: #F2825F; }

.vt-reader-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border: none; border-radius: 3px; background: transparent; color: #F2E9D8AA;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.vt-reader-close:hover, .vt-reader-close:focus { background: #F2E9D822; color: #F2E9D8; }

[data-story] { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .vt-reader-card { animation: vt-reader-in .16s ease-out; }
}
@keyframes vt-reader-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* THE READER'S WINDOW (magpie-hail, BP-2026-08-30-503) — the LARGE reader's
 * .vt-reader-window-* rules are generated in board_reader.py itself, not
 * here: PAGE_RECT_PCT/LANE_RECT_PCT/SEREN_STAND_PCT are the geometry test's
 * own numbers (tests/test_readers_window.py), and hand-duplicating them
 * into a second, static stylesheet is exactly the drift the ONE RULER
 * discipline elsewhere in this room exists to prevent. This file's own
 * open/close/page BEHAVIOR does live in reader.js (mountReaderWindow) —
 * only the geometry-bearing styles stay generated alongside the numbers
 * they draw.
 */