/* THE OVERLAY + THE OLD BOOKS (js/overlay.js, js/old-books.js). Gene, 2026-11-05.
   The rain is a foreign green against the station's amber on purpose: it is the
   feed laid over us, not the station speaking. The record (the tear, the lens
   ring, the books) speaks in the station's own amber. */

.ovl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 55; pointer-events: none; opacity: 0.9; }
.ovl-lens, .ovl-chip { display: none; }
.ovl-on .ovl-lens {
  display: block; position: fixed; left: 0; top: 0; z-index: 56; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.55), 0 0 26px rgba(255, 176, 32, 0.28), inset 0 0 30px rgba(255, 176, 32, 0.12);
  will-change: transform;
}
.ovl-lens__love {
  position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); white-space: nowrap;
  font: 700 0.62rem/1 var(--font-mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.ovl-on .ovl-chip {
  display: flex; align-items: center; gap: 12px; position: fixed; z-index: 57; top: 12px; left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 24px); padding: 7px 8px 7px 16px; border-radius: 999px;
  background: rgba(8, 5, 2, 0.88); border: 1px solid rgba(255, 176, 32, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-family: var(--font-mono);
}
.ovl-chip__kick { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; color: rgba(150, 235, 170, 0.95); white-space: nowrap; }
.ovl-chip__txt { font-size: 0.72rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovl-chip button {
  flex: none; cursor: pointer; border-radius: 999px; padding: 6px 12px; font: 700 0.64rem/1 var(--font-mono); letter-spacing: 0.16em;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ovl-chip__books { background: var(--neon-cyan); color: #1a0f02; border: 1px solid var(--neon-cyan); }
.ovl-chip__books:hover, .ovl-chip__books:focus-visible { background: #ffc85a; }
.ovl-chip__lift { background: transparent; color: var(--ink); border: 1px solid rgba(244, 230, 198, 0.35); }
.ovl-chip__lift:hover, .ovl-chip__lift:focus-visible { border-color: var(--ink); }
#overlay-btn[aria-pressed="true"] { border-color: rgba(150, 235, 170, 0.8); color: rgba(170, 245, 190, 1); box-shadow: 0 0 14px rgba(120, 220, 150, 0.35); }

/* ── THE OLD BOOKS ── */
.books-card { width: min(94vw, 720px); max-height: 88vh; overflow-y: auto; }
.books-sub { margin: -4px 0 18px; font: 0.76rem/1.5 var(--font-mono); color: var(--ink-dim); }
.book { position: relative; padding: 18px 20px 16px 22px; margin-top: 14px; border-radius: 12px;
  border: 1px solid var(--space-line); border-left: 3px solid var(--neon-cyan); background: rgba(255, 176, 32, 0.035); }
.book--reading { border-left-style: dashed; }
.book--myth { border-left-color: var(--neon-red); }
.book__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.book__clue { margin: 0; font: 600 clamp(1.15rem, 1rem + 0.8vw, 1.5rem)/1.15 var(--font-display); color: var(--ink); }
.book__verdict { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
  font: 700 0.6rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-cyan); }
.book--myth .book__verdict { color: var(--neon-red); }
.book__record { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.book__record li { font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.book__record li::marker { color: var(--neon-cyan); font-family: var(--font-mono); font-size: 0.75rem; }
.book__src { margin-left: 2px; white-space: nowrap; font: 0.7rem var(--font-mono); letter-spacing: 0.04em; color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dotted rgba(255, 176, 32, 0.5); }
.book__src:hover, .book__src:focus-visible { border-bottom-style: solid; }
.book__reading { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--space-line); font-size: 0.88rem; line-height: 1.55; color: var(--ink-dim); font-style: italic; }
.book__reading b { font: 700 normal 0.62rem var(--font-mono); letter-spacing: 0.2em; color: var(--neon-cyan); margin-right: 6px; }

@media (max-width: 640px) {
  .ovl-chip__txt, .ovl-chip__kick { display: none; }
  .ovl-on .ovl-chip { top: 8px; gap: 8px; padding-left: 12px; }
  .book { padding: 14px 14px 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .ovl-chip button { transition: none; } }