/* ==========================================================================
   frame.v1.css (bible section 5a)
   Section scaffolding, the ghost index numerals, the top chrome bar (return
   banner + language switcher) and the site footer. The drafting-frame layer
   this file was named for was retired in 2026 and removed on 4 August 2026 -
   see the note below.

   z-index ladder (site-wide): section scaffolding -1 | content auto |
   nav-drawer 85 | .nav 90 | .nav-drop 95 | chrome bar 125 | .skip-link 140.
   ========================================================================== */

/* The drafting-frame motif is GONE (owner decision 2026-06-21: the bordered
   "sheet" read as a gimmick to enterprise buyers). It was hidden site-wide with
   .sheet-frame{display:none} and its whole .sf-* subtree - crosshairs, head/left/
   mid/right rails, the scroll readout, the progress tick and its keyframes - was
   left in place behind that. Removed 4 August 2026 after proving zero render
   sites: no .tsx or .ts references .sheet-frame or any sf-* class, and the
   DraftingFrame.tsx the old comment deferred to does not exist in the repo.
   --frame is KEPT: it is the content edge inset used by .nav, .wrap and .footer.
   The matching initReadout() in reveal.v1.js went with it. */

/* ==========================================================================
   GHOST INDEX NUMERALS (bible 5f) - one per section header, hard limit.
   Markup: <span class="ghost-n" aria-hidden="true">01</span> as the first
   child of a .sheet-section.
   ========================================================================== */
.ghost-n{
  position:absolute;
  /* anchored to the section's own top edge, decoupled from --space-section. The
     old top:max(0px, calc(var(--space-section) - 1.1em)) resolved to 0 at every
     viewport width anyway (1.1em is 176-246px against a 72-96px token, so the
     max() floor always won), which made it look as though the watermark tracked
     the section rhythm when it never did. A literal states what it does, and the
     numeral no longer moves if the rhythm or its own font-size is retuned.
     NOTE: no page currently renders a .ghost-n - the markup was retired from
     every route, so this block styles nothing until it comes back. */
  top:0;
  right:clamp(8px, 4vw, 64px);
  z-index:-1;
  font-family:var(--font);
  font-size:clamp(10rem, 7rem + 8vw, 14rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:transparent;
  -webkit-text-stroke:1px rgba(63,63,70,.55);
  pointer-events:none;
  user-select:none;
}
@supports not (-webkit-text-stroke: 1px #000){
  .ghost-n{color:rgba(63,63,70,.28)}
}

/* ==========================================================================
   SECTION SCAFFOLDING
   .sheet-section: standard vertical rhythm only. The exposed baseline grid
   band and full-height column-guide hairlines were removed (owner decision,
   grid scaffolding retired) - see the .sheet-frame removal note above. Below-
   fold rendering is deferred via content-visibility (bible section 4).
   ========================================================================== */
.sheet-section{
  position:relative;
  isolation:isolate;
  padding-block:var(--space-section);
  /* the sticky nav overlays whatever it lands on: it settles at top:42px and is
     64px tall, so the first 106px of the viewport is covered. A stacked
     section's lead-in is now the seam (~25px), well inside that, so an in-page
     jump to #migration / #how-it-works / #try-it would park the heading behind
     the nav. 120px clears it with air to spare. */
  scroll-margin-top:120px;
  content-visibility:auto;
  contain-intrinsic-size:auto 560px;
}

/* ==========================================================================
   COLLAPSE + PRINT
   ========================================================================== */
@media print{
  .ghost-n{display:none}
  .sheet-section{content-visibility:visible;contain-intrinsic-size:none}
}

/* ==========================================================================
   TOP CHROME BAR - the return banner + language switcher, persistent across
   all pages (markup is in the root layout, so the CSS belongs here in the
   shared layer, never in a page-local <style>).

   ONE flex row, not two independently fixed boxes. The switcher used to be a
   separately fixed island parked in the banner's left gutter, which forced the
   banner to reserve a 138px pad and to SHRINK its type (10px at 560, 9px at
   400) to dodge it. As row siblings the two can never overlap at any width, so
   the banner label keeps its 11px register and truncates with an ellipsis
   instead.

   Band height is fixed at 40px at every width (it used to breathe between
   34.9px and 38px as the type shrank). The sticky nav is flush below it at
   top:40px in components.v1.css. The bottom hairline is an inset shadow rather
   than a border so the 40px box is 40px of usable content height, which is what
   gives the <select> its 40px tap target.

   z-index ladder unchanged: bar/banner 125 (above the drafting frame at 110,
   below .skip-link at 140), switcher 126 so the <select> stays hittable.
   ========================================================================== */
.chrome-bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:125;
  display:flex;align-items:stretch;
  height:40px;
  background:var(--chrome-bg);
  box-shadow:inset 0 -1px 0 var(--hairline);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* PHONES GET AN OPAQUE BAND, NO BLUR. Owner-reported on an iPhone: page text
   read straight through the top chrome while scrolling. Two causes, one fix.
   The band is 8% transparent, so high-contrast content behind it always ghosts
   through - the nav drawer already carries the same note and is fully opaque for
   exactly this reason. And a blurred position:fixed layer is expensive enough
   that mobile Safari defers recompositing it during momentum scroll, so the band
   lags behind the content it is supposed to be covering. Dropping the blur and
   going opaque removes the ghosting and the lag together. Desktop keeps the
   glass - it does not scroll under a collapsing toolbar. */
/* The strip ABOVE this bar (under the iOS status bar / Dynamic Island) is NOT
   fixable from CSS: Safari composites its own material there and clips fixed-
   element overflow, so an upward opaque cap never paints (probed on the
   simulator, 5 August 2026). What colours that strip is the page's single
   JS-owned theme-color meta - see THEME_BOOT_SCRIPT and syncThemeColorMeta
   in src/lib/theme.ts. */
@media (max-width:700px){
  .chrome-bar{
    background:var(--floor);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

.return-banner{
  flex:1 1 auto;
  min-width:0; /* required, or the nowrap label refuses to shrink and ellipsis never fires */
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 12px;
  background:transparent;
  color:var(--ink-3);
  /* --t-label, not a literal 11px: this is global chrome and the only label on
     every page, so it follows the shared micro-type tier (12px on phones,
     11px on desktop - unchanged there) rather than pinning the phone floor. */
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  transition:color .2s var(--ease-monument), background .2s var(--ease-monument);
}
.return-banner:hover{color:var(--ink-1);background:var(--chrome-bg-strong)}
/* TRUE viewport centring above the phone boundary (owner report, 13 August
   2026: the label sat left of centre by half the switcher width, because
   flex:1 centres within the REMAINDER next to .lang-switcher). Absolute
   centring with symmetric clearance fixes it; below 701px the flex remainder
   behaviour stays, deliberately - symmetric clearance would spend ~120px of
   the ellipsis budget the de/nl labels need on phones. */
@media (min-width:701px){
  .chrome-bar{justify-content:flex-end}
  .return-banner{
    position:absolute;
    left:50%;top:0;bottom:0;
    transform:translateX(-50%);
    flex:none;
    /* symmetric: budget the switcher's width on BOTH sides, or a long label
       slides under it on one side while claiming to be centred */
    max-width:calc(100% - 340px);
  }
}
.return-banner svg{flex-shrink:0}
/* the label is the only shrinkable part: it truncates, the arrow never does */
.return-banner__label{
  min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Switcher segment: full band height (40px tap target), divided from the
   banner by the same hairline as the band's own edge. */
.lang-switcher{
  flex:0 0 auto;
  position:relative;z-index:126;
  display:flex;align-items:stretch;
  box-shadow:inset 1px 0 0 var(--hairline);
}
/* two-class specificity throughout: the select also carries .annot for the
   drafting-register typography, and components.v1.css loads AFTER this file,
   so a single-class .lang-switcher-select would lose font-size, letter-spacing
   and colour to .annot on source order */
.lang-switcher .lang-switcher-select{
  height:100%;
  min-height:40px; /* tap target; the band is sized to hold it */
  /* right pad reserves room for the native chevron so the last letter of the
     endonym is never overlapped by the arrow */
  padding:0 24px 0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  /* colour and the native dropdown's own light/dark rendering both come from
     the theme: color-scheme is set per theme on :root in tokens.v1.css */
  color:var(--ink-2);
  /* Desktop register only. On a coarse pointer the 16px iOS auto-zoom floor in
     components.v1.css wins (it is !important): an 11px <select> zoomed the whole
     page on focus and left it zoomed, with the nav clipped off both edges. */
  font-size:11px;
  letter-spacing:.5px;
  cursor:pointer;
  transition:background .2s var(--ease-monument), color .2s var(--ease-monument);
}
.lang-switcher .lang-switcher-select:hover{background:var(--sheen);color:var(--ink-1)}
.lang-switcher .lang-switcher-select:focus-visible{outline:2px solid var(--link);outline-offset:-3px}
.lang-switcher .lang-switcher-select:disabled{cursor:progress;opacity:.6}

/* Narrow widths: recover horizontal room for the label WITHOUT dropping its
   type size. Tighter tracking first, then the decorative arrow. */
@media (max-width:560px){
  .return-banner{letter-spacing:.04em;padding:0 10px}
  .lang-switcher .lang-switcher-select{padding:0 22px 0 10px;letter-spacing:.3px}
}
@media (max-width:420px){
  .return-banner svg{display:none}
  .return-banner{gap:0}
}

/* the whole band is screen chrome; paper gets none of it */
@media print{
  .chrome-bar{display:none}
}