/* ═══════════════════════════════════════════════════════════════════════════
   padox-site.css — site chrome, layered on top of padox-styles.css.

   Additive, never a replacement. The base sheet carries everything about the
   document itself: typography, code, tables, admonitions, syntax highlighting,
   dark-mode tokens, print. This sheet adds the fixed bar, the collection nav
   column and the drawer, and takes back the few rules the standalone layout
   puts in places a three-column site cannot use.

   Custom properties, colours and the light/dark tokens all come from the base
   sheet, so nothing here hardcodes a colour that the theme toggle would miss.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bar-height: 3.25rem;
  --nav-width: 13.5rem;
  --drawer-width: 16.875rem;
  --toc-width: 15rem;
  --site-gap: 2rem;
}

/* Fragment navigation scrolls the target to the very top of the viewport, which on a site
   is underneath the bar: a heading self-link or a cross-page #anchor landed exactly one
   --bar-height out of sight. scroll-padding-top is the scroll container's own allowance, so
   it applies to every way of reaching a target -- the nav, the page TOC, the back-to-top
   button, a pasted URL -- without a rule per targetable element. The extra 0.6rem is so the
   heading clears the bar rather than touching it.

   Standalone pages need none of this; nothing is sticky there, which is why it lives here
   and not in the base sheet. */
html {
  scroll-padding-top: calc(var(--bar-height) + 0.6rem);
}

/* ── Undo the standalone layout ──────────────────────────────────────────────
   The base sheet centres the body as a single measured column and hangs two
   fixed buttons off its right edge. A site is full-width with its own grid, and
   the back-to-top button is redundant once the bar is always on screen. */

body {
  max-width: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* The back-to-top button stays. The base sheet aligns it to the edge of an 860px measured
   column, which is meaningless here, so it lines up with the bar instead: same inset as the
   bar's padding, so it sits directly below the theme toggle. Both keep the base sheet's
   2.35rem size, or their centres would not agree. */
.page-jump {
  right: var(--site-gap);
  bottom: 1.25rem;
}

/* ── Banner: scrolls away, unlike the bar ────────────────────────────────── */

.site-banner {
  padding: 0.6rem var(--site-gap);
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  text-align: center;
}

/* ── The bar ─────────────────────────────────────────────────────────────── */

.site-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--bar-height);
  padding: 0 var(--site-gap);
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}

.site-title {
  font-weight: 650;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--text);
}

.site-title:hover {
  text-decoration: none;
  color: var(--accent);
}

/* Pushes the tools to the right, and is where a search box will go. */
.site-bar-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

/* The toggle moves out of the corner and into the bar, so the base sheet's
   fixed positioning and its wide-screen right: calc() alignment both go. */
.site-bar .theme-toggle {
  position: static;
  inset: auto;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.site-layout {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--toc-width);
  gap: var(--site-gap);
  align-items: start;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 var(--site-gap);
}

/* The measure stays where the base sheet put it: a wider window buys margins,
   not longer lines. */
.site-layout > .content {
  max-width: 54rem;
  min-width: 0;
  padding: 1.5rem 0 3rem;
}

/* ── Collection nav ──────────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: calc(var(--bar-height) + 1rem);
  max-height: calc(100vh - var(--bar-height) - 2rem);
  overflow-y: auto;
  padding: 1.5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Only the drawer needs this: on a wide screen the bar already names the collection, and
   repeating it at the top of the nav column is just the same words twice. */
.site-nav-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.site-nav-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* list-style on the li, not the ul: the base sheet sets `ul > li { list-style-type: square }`,
   and a declaration that matches the li directly beats one inherited from its list. This is
   how the base's own #TOC li rule does it. */
.site-nav li {
  margin: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.28rem 0.55rem;
  border-radius: 5px;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text);
}

.site-nav a:hover {
  background: var(--toc-bg);
  text-decoration: none;
}

.site-nav a.current {
  border-left-color: var(--accent);
  background: var(--toc-bg);
  font-weight: 600;
  color: var(--accent);
}

/* ── Page TOC, on the right ──────────────────────────────────────────────────
   The base sheet's sidebar TOC is the left column of a two-column page. Here
   the left column is the collection, so the page TOC moves right. */

/* The bottom padding is for the back-to-top button, which floats in the same right-hand
   inset: without it the button covers the last entry or two. */
#TOC.toc-side {
  position: sticky;
  top: calc(var(--bar-height) + 1rem);
  max-height: calc(100vh - var(--bar-height) - 2rem);
  overflow-y: auto;
  margin: 0;
  padding: 1.5rem 0 4rem;
  border: none;
  border-radius: 0;
  background: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

#TOC.toc-side > h2 {
  margin: 0 0 0.4rem;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#TOC.toc-side ul {
  column-count: 1;
}

#TOC.toc-side a {
  padding-left: 0.3rem;
}

#TOC.toc-side > ul > li > ul > li > a {
  padding-left: 1rem;
}

#TOC.toc-side > ul > li > ul > li > ul > li > a {
  padding-left: 1.7rem;
}

/* The drawer's copy of the TOC, nested under the current page's nav entry. Only ever one of
   the two copies is displayed. */
.toc-drawer {
  display: none;
  margin: 0.15rem 0 0.4rem;
}

/* Pandoc copies each heading's full inline content into its TOC entry, which includes the
   anchor link that anchors.lua injects. The base sheet hides those inside #TOC; this copy is
   not inside #TOC, so without this each entry carries a second, empty, block-level <a> and
   comes out at double height. That was the "excessive spacing". */
.toc-drawer .heading-anchor,
.toc-drawer .heading-link > .heading-anchor {
  display: none;
}

/* Every level, not just the first: this copy of the TOC is not inside #TOC, so none of the
   base sheet's list resets reach it and nested levels would keep their markers. */
.toc-drawer ul,
.toc-drawer ol {
  margin: 0;
  padding-left: 0.9rem;
  list-style: none;
  column-count: 1;
}

.toc-drawer li {
  margin: 0;
  list-style: none;
}

.toc-drawer a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}

.toc-drawer a:hover {
  color: var(--accent);
}

/* ── Drawer, checkbox-driven ─────────────────────────────────────────────────
   No JavaScript: a hidden checkbox, a label to flip it and a scrim to flip it
   back. That keeps navigation working with scripting disabled, and it is one
   fewer script than the standalone template needs for its TOC. */

.site-burger,
.site-nav-close,
.site-scrim {
  display: none;
}

.site-burger,
.site-nav-close {
  cursor: pointer;
  color: var(--muted);
}

.site-burger svg,
.site-nav-close svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

.site-burger:hover,
.site-nav-close:hover {
  color: var(--accent);
}

/* ── Narrowing, in two stages ────────────────────────────────────────────────
   The collection nav gives way before the page TOC does. Reading the current page
   matters more than moving between pages, so the column that survives longer is
   the one that navigates the page you are on.

     wide          nav | content | TOC
     medium              content | TOC     nav in the drawer
     narrow              content           both in the drawer

   Stage one: the nav column becomes the drawer, and its copy of the TOC is still
   hidden because the right-hand column is still there. */

@media (max-width: 1400px) {
  .site-layout {
    grid-template-columns: minmax(0, 1fr) var(--toc-width);
  }

  .site-burger,
  .site-nav-close,
  .site-nav-head {
    display: block;
  }

  .site-nav-head {
    display: flex;
  }

  /* Wider than the column it replaces, hence its own token: the column is one of three
     things sharing the width and every rem it takes comes off the text, while the drawer
     is over the page and costs the reading measure nothing. It also has to hold the page
     TOC's indented entries once that folds in too, at 1000px. */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: min(var(--drawer-width), 86vw);
    height: 100%;
    max-height: none;
    padding: 1rem 1rem 2rem;
    border-right: 1px solid var(--border);
    background: var(--paper);
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }

  .site-drawer-state:checked ~ .site-layout > .site-nav {
    transform: none;
  }

  .site-drawer-state:checked ~ .site-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 38%);
  }
}

/* Stage two: the right-hand column goes as well, and the drawer's copy of the TOC takes
   over. The article itself never gains a table of contents, at any width. */
@media (max-width: 1000px) {
  .site-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #TOC.toc-side {
    display: none;
  }

  .toc-drawer {
    display: block;
  }
}

/* Stage three: a phone. --site-gap is 2rem, which at this width spends a tenth of the screen
   on margin; the standalone sheet gives a document 10px there and this should not be wider.
   Everything inset from a screen edge derives from --site-gap -- the bar, the banner, the
   text column, the two floating buttons -- so lowering it moves them together and they stay
   in line with each other, which is the property that took two attempts to get right. */
@media (max-width: 720px) {
  :root {
    --site-gap: 10px;
  }
}

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

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  .site-bar,
  .site-banner,
  .site-nav,
  .toc-side,
  .site-scrim,
  .site-burger {
    display: none;
  }

  .site-layout {
    display: block;
    padding: 0;
  }

  .site-layout > .content {
    max-width: none;
  }
}

/* ── Landing page ────────────────────────────────────────────────────────────
   One centred column: no collection nav, no page table of contents. What the
   nav would have offered is instead a list of collapsibles, one per page, each
   holding that page's abstract or first paragraph. */

.site-layout-landing {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62rem;
}

.site-layout-landing > .content {
  max-width: none;
  padding-bottom: 4rem;
}

/* The title block becomes a hero: centred, and without the rule-and-date row a
   dated article wants. */
#title-block-header.landing-hero {
  margin: 0 0 2rem;
  border: none;
  padding: 2rem 0 0;
  text-align: center;
}

/* The image is the h1, so it spans the content column: its own lettering then reads at
   heading size without a font-size to tune. */
#title-block-header.landing-hero .landing-hero-image {
  margin: 0 0 1.9rem;
  border: none;
  padding: 0;
  line-height: 0;
}

#title-block-header.landing-hero .landing-hero-image a {
  display: block;
}

#title-block-header.landing-hero .landing-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only the text form of the title. The h1 carries both classes when there is a hero image, so
   without :not() this rule — being later and equally specific — would undo the image rule's
   margin and line-height above.
   text-align must also be restated rather than inherited from the hero: the base sheet sets it
   on .title itself, and a direct match beats an inherited value however specific the ancestor. */
#title-block-header.landing-hero .title:not(.landing-hero-image) {
  margin: 0;
  border: none;
  padding: 0;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.15;
  text-align: center;
}

/* The site sheet's article subtitle is right-aligned with a leading em dash; a
   hero wants it centred and plain. */
/* A burgundy of its own, not --muted and not --h1-accent.
   --muted read as a caption; --h1-accent was tried and came out washed out on paper, at
   3.46:1 — enough to clear the 3:1 large-text threshold and not enough to carry a line this
   size. --hero-subtitle is 7.97:1 light and 6.64:1 dark, the dark value picked to match the
   weight --h1-accent already had there rather than to match the light one's ratio.

   Its own token because only this line changes: --h1-accent still draws the title rule, the
   date and the section rules, and reusing it would have moved all of those too. And only
   .landing-hero — an ordinary page's subtitle stays --heading, from the base sheet. */
#title-block-header.landing-hero .subtitle {
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--hero-subtitle);
}

#title-block-header.landing-hero .subtitle::before {
  content: none;
}

/* A landing page's own images are figures, not inline marks, so they may fill
   the column. */
body.landing .content > p > img,
body.landing .content > p > a > img {
  max-width: 100%;
  height: auto;
}

/* ── Page summaries ──────────────────────────────────────────────────────── */

/* A bordered panel: the list is a distinct thing on the page, not a continuation of the
   prose above it. */
.page-summaries {
  margin: 2.6rem 0 3rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0 1.3rem 0.5rem;
}

/* Straddles the top border, like a fieldset legend: pulled up by half its line box, and
   given the page's own background so the border appears to break for it. Needs no rules of
   its own — the panel border is the rule. */
.page-summaries-title {
  width: fit-content;
  margin: -0.72em auto 0.45em;
  padding: 0 0.75rem;
  background: var(--paper);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-summary {
  border-bottom: 1px solid var(--border);
}

/* The panel's own border closes the list, so the last separator would double it. */
.page-summary:last-child {
  border-bottom: none;
}

.page-summary > summary {
  cursor: pointer;
  padding: 0.62rem 0.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  list-style: none;
}

/* Replace the disclosure triangle with a mark that rotates, so the two states
   read the same way in every engine. */
.page-summary > summary::-webkit-details-marker {
  display: none;
}

.page-summary > summary::marker {
  content: none;
}

.page-summary > summary::before {
  content: "";
  display: inline-block;
  width: 0.46rem;
  height: 0.46rem;
  margin-right: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-0.1em);
  transition: transform 0.15s ease-out;
}

.page-summary[open] > summary::before {
  transform: rotate(45deg) translateY(-0.05em);
}

.page-summary > summary:hover {
  color: var(--accent);
}

.page-summary > summary a {
  text-decoration: none;
  color: inherit;
}

.page-summary > summary a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.page-summary-body {
  padding: 0 0 1rem 1.12rem;
  color: var(--quote-text);
}

@media (prefers-reduced-motion: reduce) {
  .page-summary > summary::before {
    transition: none;
  }
}

@media print {
  .page-summary-body {
    display: block;
  }
}