/* ═══ base, chrome and motion — shared by every page ═══════════════════════ */

@layer base {
  body {
    min-block-size: 100svh;
    background: var(--bg-0);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  body:has(dialog.viewer[open]) { overflow: hidden; }

  ::selection { background: var(--ink); color: var(--on-ink); }

  .skip {
    position: fixed; inset-inline-start: 12px; inset-block-start: 12px;
    z-index: 999; padding: 10px 18px; border-radius: var(--r-pill);
    background: var(--ink); color: var(--on-ink);
    font-size: .85rem; font-weight: 500;
    translate: 0 -180%;
    &:focus { translate: 0 0; }
  }

  /* Small numbers: counts, dates, sizes, exposures. */
  .meta {
    font-family: var(--mono);
    font-size: .74rem; letter-spacing: .01em;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }

  /* ── controls ─────────────────────────────────────────────────────────── */

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-block-size: 36px;
    padding: .45em 1.1em; border-radius: var(--r-pill);
    font-size: .85rem; font-weight: 500; line-height: 1.2;
    white-space: nowrap; cursor: pointer;
    transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease),
                border-color var(--quick) var(--ease), opacity var(--quick);
    &[disabled] { opacity: .38; pointer-events: none; }
    &[data-busy] { opacity: .55; pointer-events: none; }
  }

  .btn-solid {
    background: var(--ink); color: var(--on-ink);
    &:hover { background: oklch(100% 0 0 / .82); }
  }
  .btn-line {
    border: 1px solid var(--line); color: var(--ink);
    &:hover { border-color: var(--mute); }
  }
  .btn-ghost {
    background: var(--plate); color: var(--ink);
    &:hover { background: var(--plate-2); }
    &[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
  }

  .noscript {
    padding: 20vh var(--pad); text-align: center; color: var(--mute);
    max-inline-size: 46ch; margin-inline: auto;
  }
}

/* ═══ chrome — bar, selection bar, toast, footer ═══════════════════════════ */

@layer chrome {
  /* One bar, always there. It does not hide on scroll and nothing else
     floats: back, the shoot, its chapters, and the two actions. */
  .bar {
    position: sticky; inset-block-start: 0; z-index: 40;
    display: flex; align-items: center; gap: 8px 20px;
    min-block-size: calc(var(--bar-h) + var(--safe-t));
    padding: var(--safe-t) max(var(--pad), var(--safe-r)) 0 max(var(--pad), var(--safe-l));
    background: color-mix(in oklab, var(--bg-0) 94%, transparent);
    border-block-end: 1px solid var(--line-soft);
    @supports (backdrop-filter: blur(1px)) {
      background: color-mix(in oklab, var(--bg-0) 86%, transparent);
      backdrop-filter: blur(14px);
    }
  }

  .bar-back {
    display: inline-flex; align-items: center; gap: .45em;
    min-block-size: 40px;
    font-size: .88rem; color: var(--mute); white-space: nowrap;
    transition: color var(--quick) var(--ease);
    &:hover { color: var(--ink); }
  }
  .bar-title {
    font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-inline-size: 0;
  }

  .bar-nav {
    display: flex; align-items: center; gap: 2px; margin-inline-start: auto;
    a {
      display: flex; align-items: center;
      min-block-size: 36px; padding: 6px 12px; border-radius: var(--r-pill);
      font-size: .85rem; color: var(--mute); white-space: nowrap;
      transition: color var(--quick) var(--ease), background-color var(--quick) var(--ease);
      &:hover { color: var(--ink); background: var(--plate); }
      &[aria-current] { color: var(--ink); background: var(--plate-2); }
    }
    /* One chapter needs no chapter navigation. */
    &:not(:has(a + a)) { display: none; }
  }

  .bar-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
  .bar-nav:has(a + a) + .bar-tools { margin-inline-start: 0; }

  html[data-select] .bar-tools [data-select-toggle] { visibility: hidden; }

  /* Narrow: the chapters drop to a second row that scrolls sideways, and
     the back link keeps only its arrow. */
  @media (width < 760px) {
    .bar { flex-wrap: wrap; column-gap: 12px; }
    .bar-back-text {
      position: absolute; inline-size: 1px; block-size: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .bar-back { font-size: 1.05rem; padding-inline-end: 4px; }
    .bar-tools, .bar-nav:has(a + a) + .bar-tools { margin-inline-start: auto; }
    .bar-tools { gap: 6px; .btn { padding-inline: .9em; } }
    .bar-nav {
      order: 3; flex-basis: 100%;
      margin-inline: calc(max(var(--pad), var(--safe-l)) * -1) calc(max(var(--pad), var(--safe-r)) * -1);
      padding: 0 max(var(--pad), var(--safe-r)) 8px max(var(--pad), var(--safe-l));
      overflow-x: auto; scrollbar-width: none;
      scroll-snap-type: x proximity;
      &::-webkit-scrollbar { block-size: 0; }
      a { scroll-snap-align: start; }
    }
  }

  /* Selection bar. */
  .selbar {
    position: fixed; z-index: 46;
    inset-block-end: max(14px, var(--safe-b));
    inset-inline: max(12px, var(--safe-l)) max(12px, var(--safe-r));
    margin-inline: auto; max-inline-size: 560px;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--r-panel);
    background: var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: var(--elev);
    &[hidden] { display: none; }
  }
  .selbar-exit {
    display: grid; place-items: center;
    inline-size: 40px; block-size: 40px; border-radius: var(--r-pill);
    color: var(--mute); font-size: 1.1rem; line-height: 1; flex: none;
    &:hover { color: var(--ink); background: var(--plate); }
  }
  .selbar-count {
    display: flex; align-items: baseline; gap: .45em;
    font-size: .85rem; color: var(--mute); min-inline-size: 0;
    strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
    em { font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--dim); }
  }
  .selbar-acts { display: flex; gap: 6px; margin-inline-start: auto; }
  @media (width < 420px) { .selbar-count em { display: none; } }

  /* Toast. */
  .toast {
    position: fixed; z-index: 90; inset: auto 0 calc(84px + var(--safe-b));
    margin-inline: auto; inline-size: fit-content; max-inline-size: 86vw;
    padding: 10px 16px; border: 0; border-radius: var(--r-panel);
    background: var(--ink); color: var(--on-ink);
    font-size: .85rem; font-weight: 500;
    opacity: 0;
    transition: opacity var(--quick) var(--ease), display var(--quick) allow-discrete;
    &:popover-open { opacity: 1; }
    @starting-style { &:popover-open { opacity: 0; } }
  }

  /* Footer: the colophon. */
  .foot {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px;
    max-inline-size: var(--measure); margin-inline: auto;
    padding: 40px max(var(--pad), var(--safe-r)) calc(40px + var(--safe-b)) max(var(--pad), var(--safe-l));
    border-block-start: 1px solid var(--line-soft);
    font-size: .82rem; color: var(--dim);
    p { margin: 0; }
  }
  .foot-top {
    margin-inline-start: auto;
    color: var(--mute);
    &:hover { color: var(--ink); }
  }
}

/* ═══ motion — last layer, so the reduced-motion cut wins ══════════════════ */

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}