/* ══ 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;
}
/* GLASS, 2026-08-19 — his call from the mock: the band wears the same material as the editorial
   home, which is a TRANSPARENT fill over the existing blur. The hairline stays (his explicit ask,
   and the editorial home does not have one). The INK is NOT changed: the editorial home can afford
   white in both themes because it always has a dark video underneath; a legal page in light mode
   has a white page underneath, and white-on-white is exactly the failure the mock showed.
   Specificity note: this must stay `html.dark body > header.site-header` (0,2,1). A bare
   `body > header.site-header` (0,1,1) LOSES to these rules even with !important — that mis-step
   cost a whole mock render before this landed. */
html.dark body > header.site-header {
  background: transparent !important;
  color: #f5f5f7 !important;
  border-bottom: 1px solid rgba(235, 235, 245, 0.18) !important;
}
html.light body > header.site-header {
  background: transparent !important;
  color: #1d1d1f !important;
  border-bottom: 1px solid rgba(60, 60, 67, 0.24) !important;
}
/* Where the blur cannot happen the fill is the ONLY thing separating the band from the page, so it
   comes back. Chrome 88+ and Safari 15.4+ both support this, so it is a floor, not a common path. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.dark  body > header.site-header { background: rgba(28, 28, 30, 0.92) !important; }
  html.light body > header.site-header { background: rgba(255, 255, 255, 0.94) !important; }
}
/* forced-colors ignores backdrop-filter, so a transparent band would put the controls straight on
   top of scrolling text. Same treatment the editorial home already ships. */
@media (forced-colors: active) {
  html.dark  body > header.site-header,
  html.light body > header.site-header { background: Canvas !important; color: CanvasText !important; }
}
/* HIS CALL 2026-08-20: "lay off the contributor login in the header and also become a contributor in
   tablet as well". Both CTA chips come off at <=1024px — phones AND every iPad in portrait — leaving
   the five things he named: the logo with its lettering, the menu, light/dark, support and pause.
   Both destinations already live in the curtain menu on every page, so nothing becomes unreachable.
   This also clears a measured 18.5-19.5px overlap where the burger was landing on the login chip at
   440px, the iPhone 16 Pro Max width, which his own screenshots show as clipped lettering.
   Above 1024 is treated as desktop, so iPad landscape keeps them. */
@media (max-width: 1024px) {
  body > header.site-header a.bi-hdr-chip[href*="#login"],
  body > header.site-header a.bi-hdr-chip[href*="contributor-access"],
  body > header.site-header a.bi-hdr-chip[href*="become-a-contributor"] { display: none !important; }
}


/* THE HOME'S HEADER SITS OVER THE VIDEO, and taking its white plate away broke the one thing that
   plate was carrying: in LIGHT theme the brand shows `broadimage_logo_brand_new.png`, a near-black
   wordmark, and against dark footage on a transparent band it all but disappeared. I introduced that
   with the glass, so it is fixed here rather than lived with.
   The band takes the editorial home's own scrim, and in light theme it flies the WHITE wordmark —
   the same swap the dark theme already makes. `.bi-hdr-hero` is on the home and its 30 twins only;
   every other page keeps the plain glass, where the light wordmark still has a light page behind it.
   (0,2,1) beats the `content: none !important` on `body > header.site-header::before` at (0,1,1). */
header.site-header.bi-hdr-hero::before {
  content: '' !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
}
html.light header.site-header.bi-hdr-hero::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 100%);
}
html.light body > header.site-header.bi-hdr-hero .brand img.editorial-logo-dark  { display: block; }
html.light body > header.site-header.bi-hdr-hero .brand img.editorial-logo-light { display: none; }
@media (forced-colors: active) {
  header.site-header.bi-hdr-hero::before { background: none !important; }
  html.light body > header.site-header.bi-hdr-hero .brand img.editorial-logo-dark  { display: none; }
  html.light body > header.site-header.bi-hdr-hero .brand img.editorial-logo-light { display: block; }
}
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; }
  /* 2026-08-18 (found by the contributor-chrome gate, present on BOTH sites): at 390 the two TEXT chips
     + theme + WhatsApp = ~420px against ~290px of band — the header overflowed the viewport and the page
     scrolled sideways. Below 640 the text chips collapse to icon squares; the label stays for AT. */
  .bi-hdr-chip:not(.sq) { width: 44px; padding: 0; gap: 0; }
  .bi-hdr-chip:not(.sq) span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;
  }
  #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; }
  /* same gate: nowrap labels ("Become a Contributor", "Contributor Log In") pushed a 2-column grid past
     the viewport. Let them wrap inside their cell instead of widening the curtain. */
  #editorialDrawer a, #editorialDrawer button { white-space: normal; height: auto; min-height: 46px; padding: 6px 12px; min-width: 0; line-height: 1.15; }
  #editorialDrawer a span, #editorialDrawer button span { min-width: 0; }
  #editorialDrawer .bi-curtain-foot .bi-drawer-footer { flex: 1 1 100%; }
}
@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; }
}