/* ══ BROADIMAGE EDITORIAL CHROME ═══════════════════════════════════════════════════════════
 * Header band, menu curtain, theme + locale chips. ONE copy for every editorial page.
 *
 * WHY THIS FILE EXISTS: the 8 legal pages each carried ~8KB of inline chrome CSS — 63 selectors,
 * of which 19 were byte-identical across all 8. That is ~64KB duplicated, and eight edits for
 * every future tweak. This session alone re-tweaked the header six times.
 *
 * Every value here is lifted from /editorial-access/, which is verified at 42/42 — not rewritten.
 * Material for the chips comes from apple-material.css's Liquid Glass MEMBERSHIP lists in both
 * polarities; this file only supplies geometry and layout. Never copy that material here.
 *
 * Companion: assets/js/editorial-shell.js (theme, locale, drawer, 9-locale chrome strings).
 * ────────────────────────────────────────────────────────────────────────────────────────── */

/* Pre-JS fallback only. editorial-shell.js measures the real band and writes this token, then
   re-measures on resize. Do NOT add a breakpoint literal for it: a hardcoded value competing
   with the measured one is what left the curtain floating 4px above the band at 390. */
:root { --bi-hdr-h: 76px; }

/* ── BAND ─────────────────────────────────────────────────────────────────────────────────
   Same values measured off /about/ in both themes, which is the look he approved. */
body > header.site-header {
  position: sticky; top: 0; z-index: 6;
  margin: 0; height: auto; border-radius: 0;
  padding: calc(16px + env(safe-area-inset-top)) 24px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
}
html.dark body > header.site-header {
  background: rgba(28, 28, 30, 0.84) !important;
  color: #f5f5f7 !important;
  border-bottom: 1px solid rgba(235, 235, 245, 0.18) !important;
}
html.light body > header.site-header {
  background: rgba(255, 255, 255, 0.86) !important;
  color: #1d1d1f !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.24) !important;
}
body > header.site-header::before { content: none !important; }

body > header.site-header .brand { display: flex; align-items: center; text-decoration: none; }
body > header.site-header .brand img { height: 40px; width: auto; }

/* ── THE LOGO SWAP — DO NOT "SIMPLIFY" THE SPECIFICITY ────────────────────────────────────
 * Exactly one mark may paint per theme. This shipped broken once: the markup came over from
 * /editorial-access/ but its swap rule stayed behind (editorial-shell.css has none), and each
 * legal page still carries its own
 *     header.site-header a.brand img { … display: block }
 * at specificity (0,2,3), whose swap targets the OLD class names .logo-light / .logo-dark.
 * Nothing hid either variant, so BOTH painted — measured 209x40 at x24 AND x243, in light and
 * dark, on every page.
 *
 * So the selector below is deliberately heavy: html.dark + body + header.site-header + .brand +
 * img.editorial-logo-light clears (0,2,3) on its own merits. `display: none !important` is NOT
 * used, because an !important here would also beat any future intentional override; winning on
 * specificity keeps the cascade honest. If you shorten this selector, the double logo returns. */
html.dark  body > header.site-header .brand img.editorial-logo-light,
html.light body > header.site-header .brand img.editorial-logo-dark { display: none; }
html.dark  body > header.site-header .brand img.editorial-logo-dark,
html.light body > header.site-header .brand img.editorial-logo-light { display: block; }

/* Same failure, same fix: the sun/moon pair had no visibility rule here either, so a single 44px
   chip painted BOTH glyphs stacked (measured 19x19 each, both themes). One glyph shows the state
   you would switch TO, which is why dark shows the sun. */
#biChromeTheme .bi-sun, #biChromeTheme .bi-moon { display: none; }
html.dark  #biChromeTheme .bi-sun  { display: block; }
html.light #biChromeTheme .bi-moon { display: block; }

.bi-hdr-left, .bi-hdr-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bi-hdr-left  { flex: 0 1 auto; }
.bi-hdr-right { flex: 0 0 auto; }
.bi-hdr-sep { width: 1px; height: 30px; flex: 0 0 1px; margin: 0 4px; }
html.dark  .bi-hdr-sep { background: rgba(255, 255, 255, 0.28); }
html.light .bi-hdr-sep { background: rgba(60, 60, 67, 0.28); }

/* ── CHIPS ───────────────────────────────────────────────────────────────────────────────
   Geometry only. The MATERIAL is granted by apple-material.css membership. */
.bi-hdr-chip {
  box-sizing: border-box;
  height: 44px; border-radius: 8px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 0 14px; white-space: nowrap; text-decoration: none;
  font: 600 13px/1 'Poppins', sans-serif;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.bi-hdr-chip.sq { width: 44px; padding: 0; }
.bi-hdr-chip svg { width: 19px; height: 19px; display: block; flex: 0 0 auto; }
html.dark .bi-hdr-chip {
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 48%, rgba(0,0,0,.08)),
              rgba(20, 24, 31, 0.46);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
html.light .bi-hdr-chip {
  color: #1d1d1f;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.48) 52%, rgba(225,228,234,.42)),
              rgba(255, 255, 255, 0.58);
  box-shadow: 0 12px 34px rgba(31,40,52,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── BURGER ──────────────────────────────────────────────────────────────────────────────
   flex:0 0 auto is the load-bearing declaration. The shell sets `flex: 0 0 44px`, and a
   FLEX-BASIS pins a flex item no matter what `width` says — that cost real time to find. */
#editorialMenuButton {
  flex: 0 0 auto !important; width: auto !important; min-width: 44px; height: 44px;
  padding: 0 12px !important; border: 0 !important;
  flex-direction: row !important; gap: 10px; border-radius: 8px !important;
  font: 600 13px/1 'Poppins', sans-serif;
}
/* the three bars need their OWN column, or a row-direction button lays them out horizontally
   and they collapse to zero width */
#editorialMenuButton i { display: flex; flex-direction: column; gap: 4px; width: 22px; flex: 0 0 22px; }
#editorialMenuButton i span { display: block; width: 22px; }
#editorialMenuButton .bi-menu-word { white-space: nowrap; }
@media (max-width: 1024px) {
  #editorialMenuButton .bi-menu-word {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  #editorialMenuButton { width: 44px !important; padding: 0 !important; }
}

/* ── LOCALE CHIP — owned by assets/css/editorial-shell.css ─────────────────────────────────
 * Deliberately NOT set here. That file is the only stylesheet every editorial page loads, so it
 * is the single owner; this file previously held one of three competing copies, which is how the
 * legal pages, /editorial-access/ and /editorial-registration/ drifted apart. See the comment
 * there for the measured values and for why the ink does not copy home's. */

/* THE GUTTER — NARROW WIDTHS ONLY, and the width bound is measured, not chosen.
 *
 * The chip is fixed and reserves no space, so it can land on the footer's links. Swept at 17
 * widths against the real GLYPH boxes (DOM Range per line, not element rects — a block's rect is
 * its whole column, which reports overlaps that do not exist):
 *
 *     1440 → leftmost footer glyph x473   …   700 → x103   |  chip ends x64  → NO overlap
 *      600 → x53   540 → x58   480 → x58   390 → x42   320 → x40            → OVERLAP
 *
 * RE-DERIVED after BOTH its inputs changed — the chip moved to bottom:44 for home parity, and the
 * footer gained a destinations row. Carrying the old 130px over would have been a stale number.
 * Re-swept at the same 17 widths against the NEW footer: the collision moved from {600,540,480,
 * 390,375,320} to {430,320}. That set is wrap-dependent and shifts with any footer edit, so the
 * value is derived GEOMETRICALLY instead of fitted to the widths that happen to fail today:
 *
 *     chip top edge = 44 (offset) + 44 (height) = 88px off the viewport bottom
 *     + 18px clearance                          = 106px
 *
 * That clears the chip at ANY wrap, so a future footer change cannot silently re-open it.
 * Still bounded at 640 — above it the leftmost footer glyph is x85..x478 against a chip ending
 * at x64, so no desktop page pays for a collision that cannot happen there.
 *
 * Scoped by `main.page ~` so it reaches ONLY the legal pages — /editorial-access/ uses
 * `main.access-page` and its footer is a fixed strip that must not gain padding.
 *
 * It still floats over body copy mid-scroll (measured: `<p>` glyphs at x18 under the chip at 390).
 * That is the accepted trade — the same behaviour as the home page — not an oversight. */
@media (max-width: 640px) {
  body > main.page ~ footer.site-footer {
    padding-bottom: calc(106px + env(safe-area-inset-bottom));
  }
}

/* ── SITE-MAP FOOTER — owned by assets/css/editorial-shell.css ─────────────────────────────
 * Moved there because /editorial-access/ and /editorial-registration/ do NOT load this file,
 * so the link colour never reached them — measured 8 of 40 checks failing, exactly those two
 * pages x 2 themes x 2 widths. Same lesson as the locale chip: put shared chrome in the one
 * stylesheet every editorial page loads. */

/* The pages already hide header and footer for print; this chrome did not exist when that rule
   was written, so without this a printed contract carries a floating language chip. */
@media print {
  body > header.site-header, #editorialDrawer, #editorialDrawerBackdrop,
  .editorial-locale-control { display: none !important; }
  body > main.page ~ footer.site-footer { padding-bottom: 0; }
}

/* ── MENU CURTAIN ─────────────────────────────────────────────────────────────────────────
   Drops from under the band. A DISCLOSURE, not a dialog: the page stays live behind it, so no
   aria-modal. editorial-shell.js still owns open/close, focus and `inert` — `inert` when closed
   is exactly what takes these links out of the tab order. */
#editorialDrawer.bi-curtain {
  position: fixed; left: 0; right: 0; top: var(--bi-hdr-h, 76px); bottom: auto;
  width: auto; max-width: none; z-index: 5;
  overflow: hidden; max-height: 0; opacity: 0; transform: none; box-shadow: none;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  transition: max-height 380ms cubic-bezier(.4,0,.2,1), opacity 240ms ease;
  font-family: 'Poppins', sans-serif; display: block;
}
html.dark  #editorialDrawer.bi-curtain {
  background: linear-gradient(180deg, rgba(20,24,31,.72), rgba(20,24,31,.52)); color: #f5f5f7;
}
html.light #editorialDrawer.bi-curtain {
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.74)); color: #1d1d1f;
}
#editorialDrawer.bi-curtain.is-open {
  max-height: min(460px, calc(100svh - var(--bi-hdr-h, 76px))); opacity: 1;
}
/* transparent click-away catcher BELOW the band — not a dimming scrim, the page is not inert */
#editorialDrawerBackdrop {
  position: fixed !important; left: 0; right: 0; top: var(--bi-hdr-h, 76px); bottom: 0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  opacity: 0; pointer-events: none; z-index: 4;
}
#editorialDrawerBackdrop.is-open { opacity: 1; pointer-events: auto; }

/* the hairline lives INSIDE the clipped area so nothing paints while collapsed */
#editorialDrawer .bi-curtain-wrap {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 16px 24px 4px;
}
html.dark  #editorialDrawer .bi-curtain-wrap { border-top: 1px solid rgba(255,255,255,.10); }
html.light #editorialDrawer .bi-curtain-wrap { border-top: 1px solid rgba(60,60,67,.14); }
#editorialDrawer .bi-curtain-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 8px 24px 0; padding: 4px 0 calc(16px + env(safe-area-inset-bottom));
}
html.dark  #editorialDrawer .bi-curtain-foot { border-top: 1px solid rgba(255,255,255,.08); }
html.light #editorialDrawer .bi-curtain-foot { border-top: 1px solid rgba(60,60,67,.12); }

#editorialDrawer a, #editorialDrawer button {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px;
  border-radius: 8px; text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer; color: inherit;
  font: 600 13.5px/1 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 280ms ease, transform 340ms cubic-bezier(.22,1,.36,1), background-color 150ms;
  transition-delay: calc((10 - var(--i, 0)) * 18ms);
}
#editorialDrawer.is-open a, #editorialDrawer.is-open button {
  opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 34ms + 110ms);
}
#editorialDrawer a svg, #editorialDrawer button svg { width: 17px; height: 17px; opacity: .85; flex: 0 0 auto; }
html.dark  #editorialDrawer a:hover, html.dark  #editorialDrawer button:hover,
html.dark  #editorialDrawer a:focus-visible { background: rgba(255,255,255,.12); }
html.light #editorialDrawer a:hover, html.light #editorialDrawer button:hover,
html.light #editorialDrawer a:focus-visible { background: rgba(0,0,0,.06); }
#editorialDrawer a:focus-visible, #editorialDrawer button:focus-visible {
  outline: 3px solid #0071e3; outline-offset: -3px;
}
html.dark #editorialDrawer a:focus-visible, html.dark #editorialDrawer button:focus-visible {
  outline-color: #fff;
}
#editorialDrawer .bi-drawer-footer {
  margin-left: auto; padding-right: 4px; font: 400 11px/1.4 'Poppins', sans-serif; opacity: .7;
}
@media (max-width: 900px) { #editorialDrawer .bi-curtain-wrap { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) {
  body > header.site-header { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  body > header.site-header .brand img { height: 32px; }
  .bi-hdr-left, .bi-hdr-right { gap: 6px; }
  #editorialDrawer .bi-curtain-wrap { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 12px 16px 4px; }
  #editorialDrawer .bi-curtain-foot { margin-left: 16px; margin-right: 16px; }
  #editorialDrawer.bi-curtain { overflow-y: auto; }
}
@media (max-width: 430px) {
  /* the shutter occupies x 0-282 of the 1398px artwork, so cropping to that shows the mark
     alone at full size. Same file, windowed — no new asset. */
  body > header.site-header .brand img {
    width: 34px; height: 32px; max-width: none; object-fit: cover; object-position: left center;
  }
  .bi-hdr-sep { display: none; }
}
@media (max-width: 380px) { #editorialDrawer .bi-curtain-wrap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  #editorialDrawer.bi-curtain, #editorialDrawer a, #editorialDrawer button {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  #editorialDrawer a, #editorialDrawer button { transform: none !important; }
}