/* GENERATED at build time from the knobs in theme.css (see
   src/content/_data/theme.js) — edit theme.css, not this file.
   Switch points in effect for this build:
     cards open below their link when the window is narrower than 63.65rem
       (= --ribbon-min + --panel-min + --marginbox-width + --marginbox-gap + 0.75rem)
     the résumé sidebar appears from 75.65rem
       (= 14rem + --panel-min + --marginbox-width + --marginbox-gap + 0.75rem)
     desktop windows narrower than 40rem (= --page-min) scroll sideways */

/* ---- margin cards: in the rail (wide) ---- */
@media (min-width: 63.65rem) {
  /* rail wide enough for cards: an open card is ABSOLUTELY positioned —
     pinned to its own trigger's line (static position) and anchored just
     past the rule. Cards are fully independent: opening one never moves
     another (trade-off: triggers on adjacent lines could overlap when
     both are open — hence the one-trigger-per-paragraph rule).
     Width is FLUID: from 11rem it grows with the window, capped at
     --marginbox-width (the parameter = the maximum). */
  input.margin-toggle:checked + .sidenote,
  input.margin-toggle:checked + .marginbox {
    position: absolute;
    left: calc(100% + var(--marginbox-gap));
    width: clamp(11rem,
                 calc(var(--vw) - var(--col-total) - var(--marginbox-gap) - 0.75rem),
                 var(--marginbox-width));
    margin-top: 0.15rem;
  }
}

/* ---- margin cards: below their trigger (narrow) ---- */
@media (max-width: 63.64rem) {
  /* narrower than the cards-in-rail threshold: the card opens as a
     FULL-WIDTH FLOAT wearing the rail's dotted skin. A float slots
     BETWEEN line boxes: the line holding the trigger keeps every word
     it had, the card appears under that complete line, and later lines
     shift down without re-wrapping. */
  input.margin-toggle:checked + .sidenote,
  input.margin-toggle:checked + .marginbox,
  input.margin-toggle:checked + .marginreader {
    float: left;
    width: 100%;
    margin: 0.6rem 0;
    background-color: var(--rail-bg);
    background-image: var(--rail-pattern);
    background-size: var(--rail-spacing);
  }
  /* readers can be long: cap and scroll inside the card */
  input.margin-toggle:checked + .marginreader {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ---- the exploratory face's reader, pinned in the rail (wide) ---- */
@media (min-width: 63.65rem) {
  /* wide: pinned in the rail with its OWN scrollbar — the visitor can
     scroll the piece while the page stays put */
  input.margin-toggle:checked + .marginreader {
    position: fixed;
    left: calc(var(--col-total) + var(--marginbox-gap));
    top: 4.5rem;
    bottom: 1.5rem;
    width: clamp(11rem,
                 calc(var(--vw) - var(--col-total) - var(--marginbox-gap) - 0.75rem),
                 calc(var(--marginbox-width) + 6rem));
    overflow-y: auto;
  }
  input.margin-toggle:checked + .marginreader .margin-close {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 0.2rem 0;
  }
}

/* ---- résumé + live faces: the abstract card beside its link (wide) ---- */
@media (min-width: 63.65rem) {
  .face-rl input.margin-toggle:checked + .marginreader {
    position: absolute;
    left: calc(100% + var(--marginbox-gap));
    top: auto;
    bottom: auto;
    transform: translateY(calc(-50% - 0.65em));   /* anchor is the line below the link; lift half a line so the card centres on it */
    max-height: calc(100vh - 6rem);
  }
  /* Where the browser supports anchor positioning (Chrome, Edge, Safari 26+):
     the card is centred on the chip that opened it and, if that would push
     it past the top or bottom of the page, it is shifted to stay at least
     --card-margin inside. Older browsers keep the plain centring above. */
  @supports (anchor-name: --x) {
    .face-rl .m-close { anchor-name: --margin-trigger; }   /* the visible twin while its card is open */
    .face-rl input.margin-toggle:checked + .marginreader {
      position-anchor: --margin-trigger;          /* resolves to the nearest preceding chip = its own */
      align-self: anchor-center;
      transform: none;
      margin-top: var(--card-margin, 1.5rem);
      margin-bottom: var(--card-margin, 1.5rem);
    }
  }
  /* Browsers WITHOUT anchor positioning (Safari before 26, older Firefox)
     keep the plain centring, so a card opened from one of the last two
     papers can hang below the page. While such a card is open, give the
     page room at the bottom so the card sits inside it and the page ends
     cleanly. */
  @supports not (anchor-name: --x) {
    body.face-rl:has(.rrow.paper:nth-last-child(-n+2) input.margin-toggle:checked) { padding-bottom: calc(30vh + 2rem); }
  }
}

/* ---- résumé + live faces: the ⌄ arrow when cards open below ---- */
@media (max-width: 63.64rem) { .rline .mtrig::after { content: "\00a0⌄"; } }

/* ---- the résumé sidebar ---- */
@media (min-width: 75.65rem) {
  /* only the faces WITH a nav (body.has-sidebar) get the card; the live
     page has no nav, so its column stays where the exploratory one is */
  :root:has(body.has-sidebar) { --leftbar-width: 14rem; --ribbon-min: 14rem; }   /* the ribbon widens to hold the card and never gives it up */
  .has-sidebar header.site { display: none; }               /* the card carries the nav now */
  .has-sidebar .sb {
    display: block;
    position: fixed;
    top: 1.75rem;
    bottom: 1.5rem;
    left: 1rem;
    width: calc(var(--leftbar-width) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--bg);
    border-radius: var(--marginbox-radius);
    padding: 0.95rem 0.95rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;   /* mono-meta */
    line-height: 1.5;
  }
}
@media (min-width: 75.65rem) { .rs { scroll-margin-top: 1.5rem; } }

/* ---- desktop floor: sideways scroll below --page-min ---- */
@media (max-width: 40rem) {   /* = --page-min: narrower windows get a horizontal scrollbar, not a reflow */
  html { overflow-x: auto; }
}