/* The frame around the booklet pages: top bar, tabs, pager.
   Page styling itself lives in booklet.css. Colours come from the
   :root tokens defined there (--gold, --forest-deep, …). */

html, body { margin: 0; min-height: 100%; background: #0a0f0c; }
.shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; font-family: 'Cinzel', serif; }

.topbar {
  position: sticky; top: 0; z-index: 50; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 2rem;
  background: rgba(10,15,12,0.96); border-bottom: 1px solid rgba(201,164,64,0.2); backdrop-filter: blur(8px);
}
.brand img { height: 32px; object-fit: contain; display: block; }
.edition { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(201,164,64,0.5); }
.edition img { width: 24px; height: 24px; object-fit: contain; }

.tabs { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
.tab {
  font: inherit; font-size: 0.75rem; padding: 0.375rem 0.75rem; border-radius: 4px; border: 0; cursor: pointer;
  background: transparent; color: rgba(201,164,64,0.55); transition: all 0.2s;
}
.tab:hover { color: var(--gold); }
.tab.active { background: var(--gold); color: var(--forest-deep); }

.stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; box-sizing: border-box; }
.pages { width: 100%; display: flex; justify-content: center; }
.page { display: none; animation: fade 0.4s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pager { display: flex; align-items: center; gap: 2rem; margin-top: 2rem; }
.pager-btn {
  font: inherit; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  padding: 0.5rem 1.5rem; border-radius: 4px; transition: all 0.2s;
  background: rgba(201,164,64,0.1); color: var(--gold); border: 1px solid rgba(201,164,64,0.3);
}
.pager-btn:hover:not(:disabled) { background: rgba(201,164,64,0.2); }
.pager-btn:disabled { opacity: 0.3; cursor: default; }
.dots { display: flex; align-items: center; gap: 0.5rem; }
.dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(201,164,64,0.3); transition: all 0.2s; }
.dot.active { width: 24px; background: var(--gold); }
.counter { font-size: 0.75rem; color: rgba(201,164,64,0.3); margin-top: 1rem; }

/* Small screens: scale the fixed 816px page down to fit */
@media (max-width: 880px) {
  .pages { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar { padding: 0.75rem 1rem; }
  .edition span { display: none; }
}

/* Print: every page, one per sheet, no chrome */
@media print {
  html, body { background: #fff; }
  .topbar, .pager, .counter { display: none !important; }
  .stage { padding: 0; }
  .pages { display: block; }
  .page { display: block !important; page-break-after: always; animation: none; }
  .booklet-page { box-shadow: none; }
}

/* Print: show all four class variants, one per sheet */
@media print { .class-variant { display: block !important; page-break-after: always; } }