/* viewer.css — chrome for the Writing Streak public slide viewer.
   The slide rendering itself lives in slides.css. */

#rs-viewer { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-3) var(--s-3) var(--s-5); }

/* ---------- control bar ---------- */
#rs-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0 var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-3);
}
.rs-bar-left { flex: 1 1 0; min-width: 0; }
.rs-bar-mid { display: flex; align-items: center; gap: var(--s-1); }
.rs-bar-right { flex: 1 1 0; display: flex; justify-content: flex-end; gap: var(--s-1); }

.rs-deck-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "SOFT" 50;
  font-weight: 500; font-size: 1.25rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

.rs-counter {
  font-family: var(--font-orn); font-style: italic;
  font-size: var(--type-meta); color: var(--ink-faint);
  margin-left: var(--s-2); min-width: 4.5em; text-align: center;
}

.rs-nav-btn, .rs-tool-btn {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, "SOFT" 50;
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink); border-radius: 2px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.rs-nav-btn {
  width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.rs-tool-btn {
  height: 2.2rem; padding: 0 0.85rem; font-size: 0.95rem;
}
.rs-nav-btn:hover, .rs-tool-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rs-nav-btn:disabled { opacity: .3; cursor: default; }
.rs-nav-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--rule); }
.rs-tool-btn[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
#rs-btn-play[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
#rs-btn-play[aria-pressed="true"]::before { content: "❚❚"; }
#rs-btn-play[aria-pressed="true"] { font-size: 0.8rem; }

/* ---------- stage ---------- */
#rs-main { display: flex; flex-direction: column; gap: var(--s-3); }
#rs-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--paper-deeper);
  border: 1px solid var(--rule);
  overflow: hidden; cursor: pointer;
}
#rs-scale {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
}
#rs-stage .slide { box-shadow: 0 10px 40px rgba(31,26,23,.18); }

/* fullscreen */
#rs-stage:fullscreen { background: #15120f; aspect-ratio: auto; cursor: default; }
#rs-stage:fullscreen .slide { box-shadow: 0 0 60px rgba(0,0,0,.5); }

/* ---------- progress ---------- */
#rs-progress { height: 3px; background: var(--rule-soft); margin-top: var(--s-2); }
#rs-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }

/* ---------- notes ---------- */
#rs-notes {
  display: none;
  background: var(--paper-deep); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: var(--s-3) var(--s-4);
}
#rs-viewer.rs-notes-open #rs-notes { display: block; }
.rs-notes-head {
  font-family: var(--font-orn); font-style: italic;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--type-small); color: var(--accent-deep);
  margin-bottom: var(--s-2);
}
#rs-notes-body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
#rs-notes-body p { margin-bottom: var(--s-2); }
#rs-notes-body p:last-child { margin-bottom: 0; }
#rs-notes-body code { font-family: var(--font-mono); font-size: .85em; background: var(--paper-deeper); padding: 1px 5px; border-radius: 3px; }
.rs-notes-empty { color: var(--ink-faint); font-style: italic; }

/* ---------- toast ---------- */
.rs-toast {
  position: fixed; bottom: var(--s-4); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.6rem 1.2rem; border-radius: 3px; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ---------- error / landing ---------- */
#rs-error { display: none; max-width: var(--w-prose); margin: var(--s-5) auto; text-align: center; }
#rs-error p { font-family: var(--font-body); color: var(--ink-soft); }
.rs-error-sub { font-family: var(--font-orn); font-style: italic; color: var(--ink-faint); margin-top: var(--s-2); }
.rs-land-h {
  font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 50;
  font-weight: 400; font-size: var(--type-h1); margin-bottom: var(--s-4);
}
.rs-land-list { list-style: none; text-align: left; max-width: 36rem; margin: 0 auto; }
.rs-land-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-soft); }
.rs-land-list a {
  font-family: var(--font-display); font-variation-settings: "opsz" 40, "SOFT" 50;
  font-size: 1.35rem; color: var(--ink);
}
.rs-land-list a:hover { color: var(--accent); }
.rs-land-sub { display: block; font-family: var(--font-orn); font-style: italic; color: var(--ink-faint); font-size: var(--type-meta); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  #rs-bar { flex-wrap: wrap; }
  .rs-bar-left { flex-basis: 100%; }
  .rs-bar-right { flex: 1 1 0; }
  .rs-tool-btn { padding: 0 0.6rem; font-size: 0.85rem; }
}

/* ---------- header "settle in" motion ----------
   A subtle entrance that plays whenever a Header (section) slide appears,
   marking the start of a new section. The viewer rebuilds the slide's DOM on
   every render(), so these animations replay automatically each time a header
   is shown — no JS needed.

   Scoped under #rs-scale on purpose: this selector only exists in the live
   on-screen viewer. PNG export inlines slides.css (not viewer.css) and the
   PDF print path renders into .rs-print-page, so neither matches #rs-scale —
   exports stay static and fully opaque, never catching a mid-animation frame. */

/* Gentle settle: arrive slightly low + soft, ease down with a faint overshoot. */
@keyframes rs-settle-up {
  0%   { opacity: 0; transform: translateY(16px); }
  70%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* The big ghost number eases in behind, barely scaling down into place. */
@keyframes rs-settle-ghost {
  0%   { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
/* The section dots fade up last, settling the page. */
@keyframes rs-settle-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

#rs-scale .type-header .ghost-num {
  animation: rs-settle-ghost 0.7s cubic-bezier(.22, 1, .36, 1) both;
}
#rs-scale .type-header .h-xl {
  animation: rs-settle-up 0.62s cubic-bezier(.22, 1, .36, 1) 0.08s both;
}
#rs-scale .type-header .h-sub {
  animation: rs-settle-up 0.62s cubic-bezier(.22, 1, .36, 1) 0.2s both;
}
#rs-scale .type-header .sec-dots {
  animation: rs-settle-fade 0.55s ease-out 0.34s both;
}

/* Respect users who ask for less motion: show the header instantly. */
@media (prefers-reduced-motion: reduce) {
  #rs-scale .type-header .ghost-num,
  #rs-scale .type-header .h-xl,
  #rs-scale .type-header .h-sub,
  #rs-scale .type-header .sec-dots {
    animation: none;
  }
}

/* ---------- print: deck → PDF, one slide per 16:9 page ----------
   #rs-print-root is parked off-screen rather than display:none. In a
   display:none subtree CSS background-images (split panels, washes,
   banners) are never fetched, so they only started loading inside the
   print pipeline itself — large photos lost that race and printed blank.
   Off-screen (but rendered) content fetches and decodes as soon as
   exportPDF() fills it, and viewer.js additionally awaits decode. */
#rs-print-root { position: absolute; left: -20000px; top: 0; }

@media print {
  .flag, .site-nav, .site-footer, #rs-bar, #rs-progress, #rs-notes, #rs-error { display: none !important; }
  #rs-stage { display: none !important; }
  body, main, #rs-viewer { background: #fff !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body::before { display: none !important; }

  #rs-print-root { display: block !important; position: static !important; left: auto !important; }
  .rs-print-page {
    width: 1280px; height: 720px; overflow: hidden;
    page-break-after: always; break-after: page;
  }
  .rs-print-page:last-child { page-break-after: auto; break-after: auto; }
  .rs-print-page .slide { box-shadow: none !important; }

  @page { size: 1280px 720px; margin: 0; }
}