/* ------------------------------------------------------------------
   Palette sampled from the source artwork:
   #003D66 panel navy, #69B3E3 accent, #C7C9CB cover grey.
   The backdrop sits darker than the brand navy so the white pages
   read as lit paper rather than as another panel.
   ------------------------------------------------------------------ */

:root {
  --ink:        #04202f;
  --ink-deep:   #021520;
  --navy:       #003d66;
  --navy-lift:  #0a4d7a;
  --sky:        #69b3e3;
  --sky-soft:   rgba(105, 179, 227, 0.16);
  --paper:      #ffffff;
  --grey:       #c7c9cb;
  --on-dark:    #dce7ef;
  --on-dark-dim:#8fa6b6;

  --bar-h: 3.75rem;
  --radius: 0.5rem;
  --shadow-page: 0 1.5rem 4rem rgba(0, 0, 0, 0.55);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Layout rules below set display on elements that also carry the `hidden`
   attribute. Without this, `display: flex` silently wins and the panels are
   stuck open. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #0b3149 0%, var(--ink) 45%, var(--ink-deep) 100%);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -3rem; left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 0.85rem;
  background: var(--sky);
  color: var(--ink-deep);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------- masthead ----- */

.masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 1.15rem 0.45rem;
  border-bottom: 1px solid rgba(105, 179, 227, 0.14);
}

.masthead h1 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--paper);
}

.masthead__status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--on-dark-dim);
  min-height: 1em;
}

/* ------------------------------------------------------ stage ----- */

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1.1rem 3.4rem calc(var(--bar-h) + 1.1rem);
}

.book {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.35s ease;
}
.book:not(.is-ready) { visibility: hidden; }

/* A closed book draws its single page into one half of the spread area.
   Slide the container so that page sits in the middle of the stage. */
.book.is-cover { transform: translateX(-25%); }
.book.is-back  { transform: translateX(25%); }

@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}

.stage__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--on-dark-dim);
  font-size: 0.9rem;
}

.stage__spinner {
  width: 1.6rem; height: 1.6rem;
  border: 2px solid rgba(105, 179, 227, 0.25);
  border-top-color: var(--sky);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Page shells built for StPageFlip's HTML mode. */
.page {
  background: var(--paper);
  overflow: hidden;
}
.page img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.page--hard { background: var(--navy); }

/* Spoken-sentence highlight, positioned in page-relative percentages so it
   tracks the page through resizes and flips. */
.hl-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hl {
  position: absolute;
  background: rgba(105, 179, 227, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 61, 102, 0.22) inset;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hl.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hl { transition: none; }
  .stage__spinner { animation-duration: 2s; }
}

/* Edge affordances */
.edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.6rem; height: 4.5rem;
  display: grid; place-items: center;
  background: rgba(0, 61, 102, 0.55);
  border: 1px solid rgba(105, 179, 227, 0.22);
  border-radius: var(--radius);
  color: var(--on-dark);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.stage:hover .edge, .edge:focus-visible { opacity: 1; }
.edge:hover { background: var(--navy-lift); }
.edge--prev { left: 0.4rem; }
.edge--next { right: 0.4rem; }
.edge svg { width: 1.35rem; height: 1.35rem; }

svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico--play path, #stop rect { fill: currentColor; stroke: none; }

/* -------------------------------------------------------- bar ----- */

.bar {
  position: fixed;
  left: 50%;
  bottom: 0.85rem;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  background: rgba(2, 21, 32, 0.86);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(105, 179, 227, 0.22);
  border-radius: 999px;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
}

.bar__group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.2rem;
}
.bar__group + .bar__group {
  border-left: 1px solid rgba(105, 179, 227, 0.16);
  margin-left: 0.15rem;
  padding-left: 0.4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--on-dark);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--icon { width: 2.35rem; padding: 0; }
.btn:hover:not(:disabled) { background: var(--sky-soft); color: var(--paper); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn[aria-expanded="true"] { background: var(--sky-soft); color: var(--paper); }

.btn--listen {
  background: var(--navy);
  padding: 0 0.95rem 0 0.8rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.btn--listen:hover:not(:disabled) { background: var(--navy-lift); }
.btn--listen[aria-pressed="true"] { background: var(--sky); color: var(--ink-deep); }
.btn--listen .ico--pause { display: none; }
.btn--listen[aria-pressed="true"] .ico--play { display: none; }
.btn--listen[aria-pressed="true"] .ico--pause { display: inline; }

/* Reading progress runs along the bottom of the Listen button itself. */
.btn--listen::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: var(--progress, 0%);
  background: currentColor;
  opacity: 0.65;
  transition: width 0.25s ease;
}

.pager {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.35rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--on-dark-dim);
}
.pager input {
  width: 2.9rem;
  padding: 0.3rem 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(105, 179, 227, 0.2);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.pager input::-webkit-outer-spin-button,
.pager input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------- voice menu ----- */

.voice-menu {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  background: rgba(2, 21, 32, 0.96);
  border: 1px solid rgba(105, 179, 227, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
}
.field { display: block; margin-bottom: 0.75rem; font-size: 0.82rem; color: var(--on-dark-dim); }
.field > span { display: block; margin-bottom: 0.3rem; }
.field select, .field input[type="range"] { width: 100%; }
.field select {
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(105, 179, 227, 0.2);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
}
.field select option { background: var(--ink-deep); }
.field input[type="range"] { accent-color: var(--sky); }
.field--check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.field--check span { margin: 0; }
.field--check input { accent-color: var(--sky); }
.voice-menu__note { margin: 0.7rem 0 0; font-size: 0.75rem; color: var(--on-dark-dim); }
.voice-menu__note:empty { display: none; }

/* ----------------------------------------------------- panels ----- */

.panel {
  position: fixed;
  top: 0; bottom: 0;
  z-index: 30;
  width: min(22rem, 88vw);
  display: flex;
  flex-direction: column;
  background: rgba(2, 21, 32, 0.97);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(105, 179, 227, 0.18);
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
}
.panel--contents { left: 0; }
.panel--text {
  right: 0; left: auto;
  width: min(30rem, 92vw);
  border-right: 0;
  border-left: 1px solid rgba(105, 179, 227, 0.18);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.7rem 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(105, 179, 227, 0.16);
}
.panel__head h2 { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--paper); }

.icon-btn {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--on-dark); cursor: pointer;
}
.icon-btn:hover { background: var(--sky-soft); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

.thumbs {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0.8rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  color: var(--on-dark-dim);
  font: inherit;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.thumbs img {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.4);
}
.thumbs button span { display: block; padding-top: 0.3rem; }
.thumbs button:hover img { outline: 2px solid rgba(105, 179, 227, 0.45); }
.thumbs .is-current img { outline: 2px solid var(--sky); }
.thumbs .is-current span { color: var(--sky); }

.reader {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.1rem 1.3rem 2rem;
  max-width: 66ch;
}
.reader h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sky);
}
.reader h3:first-child { margin-top: 0; }
.reader p { margin: 0 0 0.7rem; color: var(--on-dark); }
.reader p.is-speaking {
  background: var(--sky-soft);
  box-shadow: -0.6rem 0 0 var(--sky-soft), 0.6rem 0 0 var(--sky-soft);
}

/* ------------------------------------------------ now reading ----- */

.now-reading {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + 1.5rem);
  transform: translateX(-50%);
  z-index: 15;
  max-width: min(48rem, calc(100vw - 3rem));
  padding: 0.5rem 0.95rem;
  background: rgba(0, 61, 102, 0.9);
  border: 1px solid rgba(105, 179, 227, 0.3);
  border-radius: var(--radius);
  color: var(--paper);
  font-size: 0.86rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a wide screen an open panel takes space from the spread rather than
   covering it, so the page stays readable while the text is alongside. The
   floating controls shift with it to stay centred over the pages. */
@media (min-width: 900px) {
  body.panel-left  .stage { padding-left: calc(min(22rem, 88vw) + 1rem); }
  body.panel-right .stage { padding-right: calc(min(30rem, 92vw) + 1rem); }

  .bar, .now-reading { transition: transform 0.2s ease; }
  body.panel-left  .bar,
  body.panel-left  .now-reading { transform: translateX(calc(-50% + min(22rem, 88vw) / 2)); }
  body.panel-right .bar,
  body.panel-right .now-reading { transform: translateX(calc(-50% - min(30rem, 92vw) / 2)); }
  body.panel-left.panel-right .bar,
  body.panel-left.panel-right .now-reading {
    transform: translateX(calc(-50% + min(22rem, 88vw) / 2 - min(30rem, 92vw) / 2));
  }
}

.noscript {
  position: fixed;
  inset: auto 1rem 6rem;
  padding: 1rem;
  background: var(--navy);
  border-radius: var(--radius);
  text-align: center;
}

/* ------------------------------------------------------ small ----- */

@media (max-width: 700px) {
  .stage { padding: 0.6rem 0.6rem calc(var(--bar-h) + 0.9rem); }
  .edge { display: none; }
  .bar {
    width: calc(100vw - 1rem);
    justify-content: space-between;
    border-radius: var(--radius);
    gap: 0.1rem;
  }
  .bar__group { padding: 0; gap: 0.1rem; }
  .bar__group + .bar__group { margin-left: 0; padding-left: 0.3rem; }
  .btn--icon { width: 2.1rem; }
  .btn--listen .btn__label { display: none; }
  .btn--listen { padding: 0 0.75rem; }
  /* Full screen is redundant on a phone and the toolbar has no room for it. */
  #fullscreen { display: none; }
  .pager { padding: 0; }
  .pager input { width: 2.4rem; }
  .masthead h1 { font-size: 0.85rem; }
  .masthead__status { display: none; }
  .now-reading { display: none; }
}