/* ══ 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;
}
/* SISTER SITES 2026-08-20 — the identical glass the contributor chrome wears: TRANSPARENT fill over
   the blur this band already carries. The hairline stays (his ask). The INK is not changed. */
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;
}
@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; }
}
@media (forced-colors: active) {
  html.dark  body > header.site-header,
  html.light body > header.site-header { background: Canvas !important; color: CanvasText !important; }
}
/* HIS ASK: both log-in chips off at <=1024 — phones and every iPad in portrait. Clears a measured
   18.5px overlap at 440 and 49.5px at 641 where the burger sat UNDER the login chip and could not be
   tapped at all. Both destinations already live in this site's curtain menu. */
@media (max-width: 1024px) {
  body > header.site-header a.bi-hdr-chip[href*="upload.broadimage.com"],
  body > header.site-header a.bi-hdr-chip[href*="editorial-access"],
  body > header.site-header .bi-home-portal,
  body > header.site-header #biAcctBtn { display: none !important; }
}
/* HIS ASK: the slim line. The HOME's band carries `border:0 !important` in its own block, so it has
   neither edge today — measured `0px none` on both. Restored to match every other page. */
body > header.site-header.bi-home-header { border-bottom: 1px solid rgba(235, 235, 245, 0.18) !important; }
html.light body > header.site-header.bi-home-header { 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; }
  /* 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; }
}