/* legacy.css — served raw from /public, deliberately NOT processed by the build.
 *
 * Why this file exists
 * -------------------
 * Every chapter of every EPUB edition links to /read/<book>/<ch>/commentary, so the Kindle
 * device's built-in browser is a constant visitor. That browser does not support @layer, and
 * Tailwind v4 wraps its entire output — plus everything in globals.css — in @layer blocks. An
 * unknown at-rule is skipped whole, so on that device the site renders with NO css at all.
 * (It also lacks :where(), @property and color-mix(), any one of which would be enough.)
 *
 * The body copy survives that fine, being semantic HTML. The page header does not: it loses
 * its layout, its spacing and the size constraint on the logo, so it reads "ReadCatalog" under
 * a smeared full-size mark.
 *
 * Rules here use only syntax that predates all of it. Because unlayered styles outrank layered
 * ones in the cascade, these WIN on modern browsers too — so they are written to produce the
 * same result there, and the corresponding Tailwind utilities have been removed from the markup
 * so nothing is applied twice. This file is the single source of truth for header spacing.
 */

.reading-header .scp-mark {
  display: inline-block;
  position: relative;
  width: 36px;   /* px, not rem: the root is scaled below, and the mark should not scale with it */
  height: 36px;
  vertical-align: middle;
}

.reading-header .scp-name {
  margin-left: 0.75rem;
  vertical-align: middle;
}

/* Spacing between "Read", "Catalog" and the theme toggle. Tailwind's gap-* and space-x-* both
 * fail here: gap because flexbox gap is unsupported, space-x-* because its selector is wrapped
 * in :where(). A margin on adjacent children needs neither. */
.reading-header nav > a,
.reading-header nav > button {
  margin-left: 1rem;
}

.reading-header nav > a:first-child {
  margin-left: 0;
}

/* Without the layer, `display:flex` never reaches the header either, so <nav> falls back to
 * being a block and drops to its own line under the brand. Making it inline-block puts them
 * back on one row and gives a small screen a line back. On modern browsers the nav is a flex
 * item, and flex items blockify `inline-block`, so this changes nothing there. */
.reading-header nav {
  display: inline-block;
  margin-left: 1.5rem;
  vertical-align: middle;
}


/* ===========================================================================
 * Overrides for the browser that gets no stylesheet at all.
 *
 * The condition cannot be written as a media query: that browser reports
 * neither `monochrome` nor `update: slow` — both were deployed and neither did
 * anything. So each rule below is applied to EVERYONE, and then undone in the
 * single @supports block at the foot of the file for any browser modern enough
 * to parse it. `@supports selector(...)` is itself too recent for the target,
 * which is exactly why it works: the failure mode runs the safe way, since a
 * browser too old for the undo is one too old for the layered stylesheet.
 *
 * ⚠ Every rule here MUST have its counterpart in that block. A rule added here
 *   and forgotten there changes the site for everyone.
 * =========================================================================== */

/* Type. 187.5% of a 16px default = 30px. The commentary is reached FROM the Kindle's own reading font, so the
 * browser default of 16px reads as a sharp drop. Nothing on that device sets an
 * absolute size, so the root scale carries body copy and headings together. */
html {
  font-size: 187.5%;
}

/* The reading header and the commentary index are both sticky, and on a screen
 * that cannot scroll smoothly they simply hold a quarter of it for ever. */
.reading-header,
.commentary-toc-panel {
  position: static;
}

/* --- the undo, for browsers that can prove they are modern ---------------- */
@supports selector(:where(a)) {
  html {
    font-size: 100%;
  }

  .reading-header,
  .commentary-toc-panel {
    position: sticky;
  }
}