/* Styles for spec content rendered via lib/spec/.jsx (Sec component wraps everything in
). */ /* IBM Plex Mono — same WOFF2 files tc39.es ships at /ecma262/assets/fonts/, vendored under lume-poc/fonts/. font-display: swap lets system mono render first and the Plex glyphs swap in as soon as they load (no FOIT flash). Four weights cover regular / bold / italic / bold-italic; ecmarkup uses bold-mono for inline and regular-mono inside 
.

   NOTE: keep the src url() RELATIVE ("fonts/…", no leading slash). url()
   resolves against this stylesheet's own location, so a relative path
   works whether the site is served from the origin root (local PoC) or a
   sub-path (GitHub Pages /ecma262/…). A leading-slash "/fonts/…" would
   resolve to the origin root and 404 under any base path. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Bold-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Italic-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexMono-BoldItalic-SlashedZero.woff2") format("woff2");
}

/* IBM Plex Serif — the body typeface tc39.es/ecma262 ships (ecmarkup.css
   `body { font-family: 'IBM Plex Serif', serif }`). Same SlashedZero subset
   tc39 serves from /assets/fonts, so digits read with a slashed zero. Four
   faces (regular/bold/italic/bold-italic) cover the spec's prose, 
   bold, and italic emphasis. */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Regular-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Bold-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Italic-SlashedZero.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-BoldItalic-SlashedZero.woff2") format("woff2");
}

/* Universal border-box reset — matches Nextra's Tailwind preflight
   (node_modules/nextra-theme-docs/dist/style.css:133-139), which sets
   `*, ::after, ::before, ::backdrop, ::file-selector-button {
   box-sizing: border-box }`. Without this the page inherits the CSS
   default content-box, so `width: 100%` + horizontal padding silently
   overflows the parent (the mobile sidebar search input was leaking
   ~8px past the viewport for exactly that reason). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Page chrome (Lume PoC) ──────────────────────────────────────────────
   Body is a vertical flex stack of header / .layout-wrapper / footer.
   The wrapper itself is a 3-column grid for sidebar / main / TOC; the
   footer sits OUTSIDE it so sticky sidebar/TOC slide up out of view as
   the footer scrolls in. TOC drops off below ~1100px; sidebar drops off
   below ~800px. Matches the affordance Nextra gives us today. */
:root {
  --bg: #ffffff;
  --bg-rgb: 255 255 255;
  --fg: #111827;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --chrome-bg: #fafafa;
  --accent: #2563eb;
  --accent-rgb: 37 99 235;
  --sidebar-w: 256px; /* matches Nextra's x:w-64 */
  --toc-w: 256px; /* matches Nextra's x:w-64 */
  --content-max-w: 90rem; /* matches Nextra's --nextra-content-width (1440px) */
  --header-h: 4rem; /* matches Nextra's --nextra-navbar-height: 64px */

  /* Body / spec typography — the IBM Plex families tc39.es ships:
       - Plex Serif (body) — loaded via @font-face above, so the reading
         zone matches tc39 exactly; Charter / Cambria / Georgia remain as
         fallbacks for the brief swap window or a failed font load.
       - Plex Sans (emu-const / emu-gprose / figcaption) ≈ Segoe UI
         (Windows) / -apple-system (= SF Pro on macOS), both humanist
         sans in the same family Plex Sans belongs to.
       - Plex Mono (emu-t / emu-opt / emu-params / inline code) — loaded
         via @font-face above (leads the --font-mono stack below).
     Used only inside the spec body so the page chrome (header,
     sidebar, footer) keeps its Nextra-matching sans stack. */
  --font-serif:
    "IBM Plex Serif",
    Charter,
    "Bitstream Charter",
    Cambria,
    "Iowan Old Style",
    Georgia,
    ui-serif,
    serif;
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Segoe UI Variable",
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;
  /* Plex Mono first — declared via @font-face above; falls back to the
     OS mono stack while it loads and on machines that block webfonts. */
  --font-mono:
    "IBM Plex Mono",
    ui-monospace,
    "SF Mono",
    Menlo,
    "Cascadia Mono",
    "Cascadia Code",
    Consolas,
    "DejaVu Sans Mono",
    "Liberation Mono",
    monospace;

  /* Spec  styling + the 7 cycling highlight backgrounds ecmarkup applies
     when a variable is clicked (tc39 parity, ecmarkup.css). */
  --var-foreground-color: #218379;
  --referenced0-background-color: #ffff6c;
  --referenced1-background-color: #ffa4a8;
  --referenced2-background-color: #96e885;
  --referenced3-background-color: #3eeed2;
  --referenced4-background-color: #eacfb6;
  --referenced5-background-color: #82ddff;
  --referenced6-background-color: #ffbcf2;

  /* Grammar annotation colours (tc39 parity, ecmarkup.css): parameter lists
     (`[Yield]`) and constraints (`[+In]`) in teal, optional markers (`?`) in
     gold, and the RHS hover highlight (dashed → solid border + tint). */
  --params-foreground-color: #2aa198;
  --opt-foreground-color: #b58900;
  --production-rhs-background-color: #f0f0f0;
  --production-rhs-border-color: #888;

  color-scheme: light;
}
html.dark {
  --bg: #0f1117;
  --bg-rgb: 15 17 23;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --rule: #2a2e37;
  --chrome-bg: #161922;
  --accent: #60a5fa;
  --accent-rgb: 96 165 250;
  --var-foreground-color: #4fb6ab;
  --referenced0-background-color: #6d6d1e;
  --referenced1-background-color: #7e171c;
  --referenced2-background-color: #1f6211;
  --referenced3-background-color: #1a7a6b;
  --referenced4-background-color: #7b4719;
  --referenced5-background-color: #185870;
  --referenced6-background-color: #731761;
  --params-foreground-color: #57d0c7;
  --opt-foreground-color: #d8b750;
  --production-rhs-background-color: #4d4d4d;
  --production-rhs-border-color: #888;
  color-scheme: dark;
}

/* Skip-to-content: visually hidden until a keyboard user tabs into it,
   at which point it snaps to the top-left as a proper button. */
.skip-nav {
  position: fixed;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 100;
  padding: 0.5em 0.9em;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 0.15s;
}
.skip-nav:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -3px;
}
/* In dark mode --accent lightens to blue-400, where white text drops to
   2.5:1 — use dark text (and a matching outline) on the light button. */
html.dark .skip-nav {
  color: #111827;
}
html.dark .skip-nav:focus {
  outline-color: #111827;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  /* Track the dynamic viewport so the footer sits at the current bottom
     edge on iOS even as the URL bar grows/shrinks; the vh line is the
     fallback for browsers without dvh. Same pattern Nextra uses
     (style.css:3031-3032). */
  min-height: 100vh;
  min-height: 100dvh;
}
/* Sidebar + main + TOC live in this flex wrapper; footer sits as a
   sibling of the wrapper. Sticky elements inside cannot exceed the
   wrapper's bottom edge — when the footer (outside) scrolls into view,
   sidebar/TOC slide up rather than overlapping it. Mirrors Nextra's
   
. */
.layout-wrapper {
  display: grid;
  /* `minmax(0, 1fr)` instead of bare `1fr` for the main column: the
     implicit `auto` min would otherwise force the track to expand to
     fit the largest item's min-content (long emu-nt names, pre block
     lines), pushing the grid container wider than the viewport. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  /* Cap the sidebar/main/TOC trio at --content-max-w (1440px) and centre
     it, matching Nextra's 
.
     On viewports wider than 1440px the trio sits in the middle with even
     gutters; below 1440px it fills the viewport (no visual change). */
  max-width: var(--content-max-w);
  margin-inline: auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  transition: grid-template-columns 0.2s ease-in-out;
}

/* Offset in-page anchor jumps (#sec-…, dfn / step / prodref targets, etc.) by
   the sticky header's height so the target lands below the bar instead of
   hidden under it. Adapted from Nextra's
   `html:not(:has(*:focus)) { scroll-padding-top: var(--nextra-navbar-height) }`,
   but the guard is narrowed to input-like elements: Chrome makes scrollable
   containers keyboard-focusable, so a fragment jump to a wide emu-table
   focuses the table itself — with Nextra's `*:focus` guard that very jump
   lost the offset and the table landed under the header. Only a focused
   field's scroll-into-view should skip the offset. */
html:not(
  :has(input:focus, textarea:focus, select:focus, [contenteditable]:focus)
) {
  scroll-padding-top: var(--header-h);
}

.site-header {
  /* Outer bar: sticky positioning only — bg + border live on the absolute
     .site-header-blur child so the underlying layer can blur content that
     scrolls below. Matches Nextra's
     
.
     z-index above the mobile nav panel (z-20) so the navbar stays visible
     while the menu is open, and above the breadcrumb (z-35) so the header's
     version-switcher dropdown opens over it rather than slipping behind it
     (the dropdown's own z-index can't escape this header stacking context). */
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header-blur {
  /* Translucent frosted-glass background, matches Nextra's
     
. */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--bg-rgb) / 0.7);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(12px); /* x:backdrop-blur-md */
  backdrop-filter: blur(12px);
}
.site-header-inner {
  /* Inner row: matches Nextra's navbar inner container