/* ═══════════════════════════════════════════════════════════════════════════
   K GUIDE — LIVE-SITE CHROME

   kpress's own slots, which exist only on the built site: the header and
   footer bars, the settings gear, the contents rail. The study renders its own
   masthead, so none of these selectors match anything there — which is why
   this is a second file rather than the tail of k-guide.css, which the study
   inlines whole.

   Linked after k-guide.css; both ship through sources[].static in kpress.yml.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Site chrome overrides (warm theme) ────────────────────────────
   The header is a full-bleed tan bar spanning the viewport; its inner
   row, the settings gear, and the footer track the content: centred on
   the reading column at tablet/mobile, and left-anchored to the wide
   TOC+text group at wide widths (logo at the content's left edge,
   About/gear at the text column's right edge).

   Wide-band geometry: content sits 3rem from the viewport left (2rem
   page gutter + 1rem .kpress-doc padding-inline); the group is 71rem
   wide (15rem TOC + 3rem gap + 53rem text), so its right edge — the
   text column — lands at 74rem. */

/* ── The canvas ────────────────────────────────────────────────────────────
   The browser paints a page's background before any stylesheet has loaded, and
   it picks the colour from `color-scheme`. kpress ships `<meta name=
   "color-scheme" content="light dark">` and sets `color-scheme` on its own
   component scopes only, never on a host's root — correct for a kpress embedded
   in someone else's page, but this site *is* the page. So the root's scheme
   stayed `normal`, which under that meta means "either", and a reader whose
   system is dark but who has chosen the light theme got a black frame between
   one page and the next: the browser painted its dark default, then the
   stylesheet arrived and painted the light ground over it.

   Two things close that gap. The root states the scheme the page actually
   resolved to, so the first paint is already the right colour; and the canvas
   carries the ground explicitly rather than relying on the body's background
   propagating up to it. */
:root[data-kpress-resolved-theme="light"] {
  color-scheme: light;
}
:root[data-kpress-resolved-theme="dark"] {
  color-scheme: dark;
}
html {
  background: var(--kpress-doc-bg);
}

/* Flush the tan bar to the very top; leave clearance below the footer
   (the viewport is a 100dvh scroller, so the footer otherwise jams
   against the window edge). */
.kpress-page-main {
  padding-block-start: 0;
  padding-block-end: 2rem;
}

/* Header: a full-bleed gentle tan bar, flush to the top. The negative
   inline margin cancels the page gutter so the bar reaches both edges.

   Selector note: kpress >= 0.3 aligns the header/footer rows with the
   *reading column* at wide widths (`padding-inline-start: 21.5rem` on
   `.kpress-page-main:has(.kpress-toc) .kpress-site-header`, specificity
   0-3-0). This site aligns its chrome with the whole TOC+text group
   instead, so the header/footer rules below carry a matching 0-3-0
   selector and win on source order. `:has(.kpress-doc)` matches every
   page, TOC or not, so both pages get the same chrome. */
.kpress-page-main:has(.kpress-doc) .kpress-site-header {
  align-items: center;
  background: var(--kpress-doc-surface-bg);
  border-bottom: 1px solid var(--kpress-doc-border);
  display: flex;
  margin-inline: calc(-1 * var(--kpress-page-margin-inline, 2rem));
  max-width: none;
  min-height: 2.6rem;
  padding-block: 0.5rem;
  padding-inline: 0;
  width: auto;
}
/* Inner row: constrained to the content group and aligned to it. */
.kpress-site-header > div {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 48rem;
  padding-inline: 0 3.5rem; /* left edge on the column; right lane for the gear */
  width: 100%;
}

/* The masthead row: the wordmark at the start, the nav controls at the end.
   Same parts as the study's .masthead — .brand and .ctl — so the two mastheads
   cannot drift; only the bar around them belongs to kpress. */
.site-bar {
  align-items: center;
  display: flex;
  gap: var(--ui-3);
  width: 100%;
}
.site-bar nav {
  align-items: center;
  display: flex;
  /* A step wider than the gap inside .brand, so the two nav entries read as two
     destinations rather than as one run of words. */
  gap: var(--ui-4);
  margin-left: auto;
}

/* No underline on the logo or nav links, in any state. */
.kpress-site-header a,
.kpress-site-header a:hover,
.kpress-site-header a:focus {
  text-decoration: none;
}

/* Breathing room between the bar and the article. */
.kpress-doc { margin-block-start: 1.25rem; }

/* Settings gear: ride the header row at its right edge, beside About.
   In-flow so its right edge tracks the content, pulled up onto the bar;
   the empty area passes clicks through to the logo/About beneath. */
.kpress-settings {
  align-items: center; /* centre the gear in the shared-height box */
  /* The bar carries a 1px bottom border inside its height, so its content box
     centres half a pixel above the middle of its border box. The overlay has
     no border and would centre the gear on the border box instead, leaving it
     visibly low against the nav. Reproduce the border rather than correcting
     with a magic offset. */
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  inset: auto;
  justify-content: flex-end;
  margin-block: -2.6rem 0; /* overlay exactly on the header row */
  margin-inline: auto;
  max-width: 48rem;
  min-height: 2.6rem; /* same height as the bar → shared vertical centre */
  padding-inline-end: 0;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 251;
}
.kpress-settings > * {
  pointer-events: auto;
}

/* Footer: same content tracking; comfortable padding so it reads clearly
   instead of hugging the bottom edge. No rule above it — kpress draws one, and
   on a page whose content is already bounded boxes it is a second horizontal
   line under a stack of them; the space does the separating. Centred, because
   one line of copyright left-aligned under centred content reads as a loose
   end. */
.kpress-page-main:has(.kpress-doc) .kpress-site-footer {
  border-top: 0;
  margin-inline: auto;
  max-width: 48rem;
  padding-block: 1.25rem 2rem;
  text-align: center;
  /* Pin the inline gutter: kpress's own footer rules widen it to 4rem
     at >= 48rem and add a 21.5rem reading-column inset at >= 75rem, and
     this site tracks the content group instead. */
  padding-inline: 0;
  width: 100%;
}

/* The settings gear is kpress's own control, and it ships at 16px while every
   control glyph in this system is sized from --ui-icon-sm. Sitting in the same
   row as the nav's book, two pixels shows. The button keeps its own hit area;
   only the glyph is brought onto the scale. */
.kpress-settings-btn svg {
  height: var(--ui-icon-sm);
  width: var(--ui-icon-sm);
}

/* One column width, on every view.

   kpress caps the document at the measure plus 2rem and then pads it by 2rem on
   each side, so its content lands a whole gutter narrower than the measure —
   736px against 768. The chapter view has no such padding and lands exactly on
   the measure, so the same box at the top of the page was 768 wide on one view
   and 736 on the other, and changed width as a reader moved between them.

   Cap the document at the measure plus its own inset, and the content box is
   the measure on both. Past 75rem the one-page view's grid already gives its
   text the measure, so this only settles the narrower band. */
:root .kpress-doc:has(.kpress-toc),
:root .kpress-doc {
  /* Centred as well as capped. kpress sets `margin-inline: 0` on a document
     that reserves a rail, so it can left-anchor the rail-and-text group; every
     page carries that attribute whether or not it shows a rail. Capping the
     width without restoring the centring left the whole document against the
     left edge, and the wider the screen the further off-centre it read. */
  margin-inline: auto;
  max-width: calc(var(--kpress-measure) + 2 * var(--ui-doc-inset));
  padding-inline: var(--ui-doc-inset);
}

/* ── A standalone page ────────────────────────────────────────────────────
   About is a short page a reader arrives at, reads, and leaves. It is not a
   chapter of a fifty-minute document, so it does not take the long-form
   reading treatment: serif at the prose size, left-aligned, sized for staying
   put. It takes the pattern the guide's own opening uses — a centred serif
   heading — over a sans body at the site's body size, so it sits with the rest
   of the chrome rather than with the guide.
   ───────────────────────────────────────────────────────────────────────── */
:root:not([data-kguide-view="onepage"])[data-kguide-view="page"] .kpress-prose {
  font-family: var(--kpress-font-sans);
  font-size: var(--type-body);
  /* Its text starts where a chapter box's text starts: the column is the same
     width on both pages, and on the guide the box's own padding insets the
     words from that edge. Without this the page is the same width but the text
     sits a little wider than anything else on the site. */
  padding-inline: var(--ui-4);
}
:root[data-kguide-view="page"] .kpress-prose h1 {
  /* The caps heading, the same one the one-page view gives a part: it names
     what follows rather than titling a work, so it is set as a divider and not
     as a display line. Ink, not muted — see .part-name for the shared parts. */
  color: var(--kpress-doc-text);
  font-family: var(--kpress-font-sans);
  font-size: calc(var(--type-base) * 1.35);
  font-variant-caps: var(--kpress-caps-variant);
  font-weight: var(--ui-weight-part);
  letter-spacing: var(--ui-tracking-part);
  line-height: var(--kpress-caps-heading-line-height);
  text-align: center;
  text-transform: var(--kpress-caps-transform);
  text-wrap: balance;
}
:root[data-kguide-view="page"] .kpress-prose h2,
:root[data-kguide-view="page"] .kpress-prose h3 {
  font-family: var(--kpress-font-sans);
  font-size: var(--type-title);
}
:root[data-kguide-view="page"] .kpress-prose p,
:root[data-kguide-view="page"] .kpress-prose li {
  font-family: var(--kpress-font-sans);
  font-size: var(--type-body);
}

/* The one-page view's opening: the guide's title and description, centred, and
   the print offer, all in kpress's document header — which sits above the card
   rather than inside it. The offer is about the page, not part of the document
   the card holds. */
/* The heading has moved into the card, so kpress's metadata header holds
   nothing but the rule it draws under itself. */
:root[data-kguide-view="onepage"] .kpress-doc-header {
  border: 0;
  display: none;
}
/* ...and the title block opens the document it names, centred like the chapter
   view's, inside the surface rather than above it. */
:root[data-kguide-view="onepage"] .kpress-prose > .title-block {
  margin-block-end: var(--ui-6);
  text-align: center;
}
/* kpress's own prose rules reach this heading, so its size and measure are
   restated to hold. The space below it is not: that gap belongs to the caps
   correction in k-guide.css, which sets it on the description itself, and a
   bottom margin here would collapse against it and win. The description takes
   the shared rules untouched for the same reason. */
:root[data-kguide-view="onepage"] .kpress-prose > .title-block h1 {
  font-size: var(--type-display);
  margin: 0 auto;
  max-width: 26ch;
  text-wrap: balance;
}
/* The print offer sits between the title and the card, on the reading column,
   so it reads as an offer about the page rather than as part of the document
   the card holds. */
:root[data-kguide-view="onepage"] .kpress-doc > .view-switch {
  margin-block: 0 var(--ui-5);
  margin-inline: auto;
  max-width: var(--kpress-measure);
  text-align: start;
}

/* Settling. The document is held back until the view has finished assembling
   itself, then fades in over one fast beat, so moving between pages does not
   flash the untransformed document and then jump. Opacity only: nothing moves,
   nothing reflows, and under prefers-reduced-motion the transition collapses
   to nothing and the page simply appears. */
.kpress-doc {
  opacity: 1;
  transition: opacity var(--ui-motion-edge);
}
:root.k-guide-settling .kpress-doc {
  opacity: 0;
}

/* Every view but the one-page guide is a single centred column.
   `toc_rail: reserved` stamps the layout on every page and, past 75rem, turns
   it into a `15rem 53rem` grid and pushes the header and footer right by
   21.5rem to meet the text beside the rail. Removing the rail element is not
   enough on its own: the home page and About never had one to remove, and the
   attribute is stamped regardless. Both halves are needed — the element goes
   in k-guide.js, the reservation goes here. */
:root:not([data-kguide-view="onepage"]) .kpress-content-with-toc[data-kpress-toc-rail="reserved"] {
  display: block;
  margin-inline: auto;
  min-height: 0;
}
/* Cancel the rail's 21.5rem inset, on every view. The bar itself stays
   full-bleed — its tan ground and its hairline run the width of the viewport at
   every size, and capping the header element would cut both off. Its inner row
   is what carries the 48rem cap, above. The footer has no ground to lose, so it
   takes the cap directly.

   This applies to the one-page view too. It used to be exempt, and tracked the
   rail-and-text group instead: at 1500px its header row ran 175–1311 where the
   text column ran 463–1311 and its own view-switch box ran 359–1127 — three
   alignments on one page, none of them the column the other three views use.
   The rail now hangs beside the column instead of moving it (see the wide-band
   block at the end of this file), so every view's chrome sits on one column. */
.kpress-page-main:has(.kpress-doc) .kpress-site-header {
  padding-inline-start: 0;
}
.kpress-page-main:has(.kpress-doc) .kpress-site-footer {
  margin-inline: auto;
  max-width: 48rem;
  padding-inline-start: 0;
}

/* ...and the document inside it takes the reading measure. The guide's two
   views bring their own column — .guide and .overview are capped at the
   measure — but a plain page like About has none, so with the rail's grid
   gone its text ran the full width of the pane. The card's inline padding is
   removed just above, so the cap is the measure itself and the text lands on
   the same column the chapter boxes do. */
:root:not([data-kguide-view="onepage"]) .kpress-long-text {
  margin-inline: auto;
  max-width: var(--kpress-measure);
}

/* Wide pages: the gear leaves the column and takes the viewport's edge, and
   About moves out to the column's edge in the lane it vacates. Below this the
   two share the column and the gear's lane is reserved inside it, which is
   right when there is no room to spare — the change only happens where the
   empty band beside the text is wide enough that a gear floating in it reads
   as chrome rather than as something dropped. */
@media (min-width: 84rem) {
  .kpress-site-header > div {
    padding-inline-end: 0; /* About reaches the column's edge */
  }
  .kpress-settings {
    margin-inline: 0;
    max-width: none;
    padding-inline-end: var(--ui-4);
  }
}

/* The chrome keeps the reading column at every width. An earlier rule
   re-anchored it past 75rem to the TOC+text group, which moved the wordmark
   left and the nav and gear right of where they sit at every narrower width —
   the one place a reader notices the chrome moving is when it moves. The
   chapter view has no TOC to anchor to in any case. */

/* Mobile: keep the bar full-bleed, but align the inner row to the page
   gutter so it shares the gear's box (the gear is a page-main child),
   keeping About and the gear from colliding at narrow widths. */
/* Below the measure the column is the viewport less the document's own gutter,
   rather than a centred 48rem, so the chrome takes that same gutter. Written as
   a media query: the container query this replaced was scoped to a container
   the header is not inside, and never fired — the wordmark sat flush against
   the viewport edge. */
@media (max-width: 47.99rem) {
  /* The header bar is full-bleed, so its inner row starts at the viewport edge
     and needs the gutter added. The gear and the footer are page-main children,
     already inset by that same gutter, so they need nothing. */
  .kpress-site-header > div {
    padding-inline-start: var(--ui-2);
  }
}

/* Table of contents: no box around it. The contents are a list beside the
   text, not a panel competing with the content card; the active-entry
   indicator and the indent already carry the structure. Padding is kept so
   the entries do not sit flush against the reading column. */
.kpress-toc {
  border: 0;
  padding-left: 0.5rem;
}

/* ...and no scrollbar down its edge. The contents still scroll — there are
   more entries than fit a viewport, so the scrolling has to stay — but the
   bar itself is a second vertical line beside the one the active entry
   already draws. Hidden in both engines; wheel, trackpad, drag and
   keyboard scrolling are unaffected. */
.kpress-toc {
  scrollbar-width: none;
}
.kpress-toc::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* ── The document surface, per view ───────────────────────────────────────
   kpress draws the document on its own white surface, which is right for a
   document and wrong for a page whose content is already boxes: the overview
   and the chapter view would be a box drawn around boxes. Both drop it and sit
   directly on the page.

   Only the one-page view keeps it. It is a document rather than a set of
   cards, the surface is what makes it read as a page, and it is the view that
   prints. Everything else — the home page, the chapter view, About — sits
   directly on the page, so the three read as one site. */
:root:not([data-kguide-view="onepage"]) .kpress-doc,
:root:not([data-kguide-view="onepage"]) .kpress-long-text {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}
/* With the card gone its top padding is vestigial, and it was stacking on the
   document's own to push the first thing on the page 40px further down than on
   the one-page view — where the same box sits outside the card. Dropping it
   puts every view's first element the same distance below the bar. */
:root:not([data-kguide-view="onepage"]) .kpress-long-text {
  padding-block-start: 0;
}

/* The overview states the guide's title inside its box, so kpress's own
   document header would say it twice. */
:root[data-kguide-view="overview"] .kpress-doc-header,
:root[data-kguide-view="nav"] .kpress-doc-header {
  display: none;
}

/* The chapter view carries its own contents — seventeen boxes that state their
   own titles, read times and descriptions — so kpress's rail beside it would be
   a second contents list. It is removed from the DOM in k-guide.js rather than
   hidden here; see dropContentsRail for why hiding it is not enough. The
   one-page view keeps the rail: it is a document, and a document that long
   needs one. */

/* A part heading on the one-page view is an `h1` in the document, and the prose
   layer sets those in large serif — right for a title, wrong for a divider
   between runs of chapters. It takes the treatment the chapter view gives the
   same heading instead: sans, title size, caps, centred, with the part's own
   weight and tracking. The chapter view splits "Part One: About This Guide"
   into an eyebrow and a name; here it stays one line, because splitting it
   would mean the build rewriting the document's own heading. */
:root[data-kguide-view="onepage"] .kpress-prose > h1.part-head {
  font-family: var(--kpress-font-sans);
  font-size: var(--type-title);
  font-weight: var(--ui-weight-part);
  margin-block: var(--ui-6) var(--ui-4);
  text-align: center;
}
/* The label and the name carry their own treatment, the same two the chapter
   view uses, so the heading reads as an eyebrow over a name in both views. A
   step larger here than in the chapter view: it is the only divider on a page
   that runs every chapter together. */
:root[data-kguide-view="onepage"] .kpress-prose > h1.part-head .part-name {
  font-size: calc(var(--type-base) * 1.35);
}
/* Chapters need room to breathe on a page that runs them all together: on the
   one-page view an h2 opens a chapter, and the prose layer's heading rhythm is
   tuned for a heading inside a chapter rather than the start of one. */
:root[data-kguide-view="onepage"] .kpress-prose > h2 {
  /* Four-fifths of the largest step: enough that a chapter starts rather than
     continues, without the gap reading as a section break of its own. */
  margin-block-start: calc(var(--ui-6) * 0.8);
}
/* A subhead gets a little of the same, a step down: enough to separate it from
   the paragraph above without reading as a new chapter. */
:root[data-kguide-view="onepage"] .kpress-prose > h3 {
  margin-block-start: var(--ui-5);
}

/* ...but not the guide's own title, which is a title and keeps the display
   face it opens the page with. */
:root[data-kguide-view="onepage"] .kpress-prose > .title-block h1 {
  font-family: var(--kpress-font-prose);
  font-size: var(--type-display);
  font-variant-caps: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Wide screens, one-page view: kpress left-anchors the rail-plus-text grid, so
   past the band's floor the whole group sits against the left with an empty
   half-screen beside it, while at every narrower width the text is centred.
   Centre the group instead, and bring the chrome with it: the bar's inner row,
   the print offer and the footer all take the group's box and its 18rem inset,
   so they line up with the text column rather than with the page.

   18rem is the rail plus the gap — 15 + 3 — and 71rem is the whole group,
   which is how kpress builds the grid. */
/* The one-page view's contents rail hangs in the margin, and does not move the
   column it sits beside.

   kpress lays the rail out as the first track of a `15rem 53rem` grid, which
   makes the text the *second* track and so shifts the reading column right by
   the width of the rail. Every other view centres its column, so the one-page
   view alone read as off-centre, and its header, its text and its own
   view-switch box each landed somewhere different.

   Instead: keep kpress's two tracks, then pull the whole grid left by exactly
   one rail lane and grow it by the same amount. The text track lands back on
   the document's own content box — the centred 48rem column every other view
   uses — and the rail overflows into the left margin, which in a
   left-to-right page is not scrollable, so nothing gains a horizontal
   scrollbar. The rail stays a grid item, so it keeps kpress's sticky
   behaviour.

   The rail can only hang where there is margin to hang it in: it needs a full
   lane between the column's left edge and the viewport's, so the pane must be
   at least 48rem + 2 × 14rem = 76rem, and 77rem is where that clears the page
   gutter. The lane is sized to make that threshold sit just above the band
   where kpress drops the rail anyway, so there is no width at which the rail
   is neither a side rail nor a phone's inline list: a full-width contents list
   above a document on a wide screen is worse than either. */
@media (min-width: 75rem) and (max-width: 76.999rem) {
  :root[data-kguide-view="onepage"] .kpress-content-with-toc {
    display: block;
  }
}
@media (min-width: 77rem) {
  :root[data-kguide-view="onepage"] .kpress-content-with-toc {
    column-gap: var(--ui-rail-gap);
    grid-template-columns: var(--ui-rail-width) var(--kpress-measure);
    justify-content: start;
    margin-inline-start: calc(-1 * var(--ui-rail-lane));
    width: calc(100% + var(--ui-rail-lane));
  }
  /* The card fills the column exactly, so its edges land on the header row, the
     footer and the view-switch box above it. */
  :root[data-kguide-view="onepage"] .kpress-content-with-toc .kpress-long-text {
    max-width: none;
    width: 100%;
  }
  /* A table marked wide may grow past the reading column, and kpress caps it at
     `100cqw - 23rem` — the space left over when the text starts 20.5rem from the
     pane's left edge, which is where kpress's left-anchored group puts it. This
     column is centred instead, so that cap let the widest table run past the
     pane and put a horizontal scrollbar on the page. Restate it for a centred
     column: the table starts half a pane less half a measure from the left, so
     the room to its right is half a pane plus half a measure, less the card's
     inset at each end. */
  :root[data-kguide-view="onepage"]
    .kpress-content-with-toc
    .kpress-table-wrap[data-kpress-table-scale="wide"] {
    max-width: calc(50cqw + var(--kpress-measure) / 2 - 5rem);
  }
}

/* ── Print ────────────────────────────────────────────────────────────────
   kpress hides its own chrome for print, but this stylesheet loads after it
   and restyles the header with a more specific selector, which brings the bar
   back on the page. Hide it here at the same strength, along with the gear —
   which kpress's list does not cover — and the offers to switch view or print,
   neither of which means anything on paper.

   The title block is centred on screen by a rule scoped to the view attribute
   the runtime sets. Print keeps that attribute, but the centring is restated
   here so a printed page does not depend on a script having run.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .kpress-page-main:has(.kpress-doc) .kpress-site-header,
  .kpress-page-main:has(.kpress-doc) .kpress-site-footer,
  .kpress-settings,
  .view-switch {
    display: none;
  }

  .kpress-prose > .title-block {
    text-align: center;
  }
  .kpress-prose > .title-block h1,
  .kpress-prose > .title-block .standfirst {
    margin-inline: auto;
    text-align: center;
  }

  /* No card on paper: the page is the surface. Written at the same strength as
     the rule that draws it, or the shadow survives into the print stylesheet.
     Most browsers drop shadows and backgrounds when printing anyway; this makes
     it true regardless of that setting. */
  .kpress.kpress-doc,
  .kpress-prose.kpress-long-text {
    background: none;
    border: 0;
    box-shadow: none;
  }
}