/* AQ-266. Shared across site stylesheets; scope protects page-specific forms. */
:root { --wire-header-height:122px; }
html { scroll-padding-top:calc(var(--wire-header-height) + 16px); }
#wireHeader {
  --wh-blue:#1d6bb4; --wh-paper:#f2f5f8; --wh-ink:#17324b; --wh-dim:#4b6883; --wh-line:#d6e0e9;
  position:sticky; top:0; z-index:100; width:100%; margin:0; padding:0;
  background:var(--wh-paper); color:var(--wh-ink); border:0;
  font:12px/1.4 "IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
[data-theme="dark"] #wireHeader { --wh-paper:#102131; --wh-ink:#e4edf5; --wh-dim:#b5c8d9; --wh-line:#294053; }
#wireHeader *, #wireHeader *::before, #wireHeader *::after { box-sizing:border-box; }
#wireHeader [hidden] { display:none!important; }
/* AQ-373: product identity/navigation left, global utilities right.
   Full-height rectangular targets follow the shell's navigation convention. */
#wireHeader .topbar {
  position:static; display:flex; align-items:center; gap:0;
  height:auto; min-height:48px; max-width:none; margin:0;
  padding:0 max(20px, calc((100% - 1560px) / 2 + 20px)); background:var(--wh-blue); border:0;
}
#wireHeader .wordmark { display:flex; flex:none; margin:0 16px 0 0; padding:0; }
#wireHeader .wm-home { display:flex; align-items:center; gap:12px; min-height:48px; padding:0; color:#fff; text-decoration:none; white-space:nowrap; }
#wireHeader .wh-logo { display:block; width:auto; height:24px; max-width:none; filter:brightness(0) invert(1); }
#wireHeader .wire { font:600 15px/1.3 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:0; text-transform:none; color:#fff; }
#wireHeader .topbar-tools { display:flex; flex:0 1 auto; align-items:center; gap:0; min-width:0; margin-left:auto; padding-left:16px; }
#wireHeader .searchbox { position:relative; display:block; flex:0 1 220px; width:220px; max-width:220px; min-width:150px; margin:0 8px 0 0; padding:0; border:0; background:none; }
#wireHeader .searchbox input, #wireHeader .searchbox input:focus {
  display:block; width:100%; height:36px; margin:0; padding:0 28px 0 32px;
  border:0; border-bottom:1px solid #ffffffb3; border-radius:0; background:#154f86; color:#fff;
  font:12px/1.4 "IBM Plex Mono",ui-monospace,monospace; transition:none;
}
#wireHeader .searchbox input::placeholder { color:#e5eef7; opacity:1; font:10.5px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.04em; }
#wireHeader .searchbox .icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#fff; font-size:17px; pointer-events:none; }
#wireHeader .searchbox kbd { position:absolute; top:50%; right:8px; transform:translateY(-50%); padding:0 4px; min-width:0; color:#e5eef7; background:transparent; border:1px solid #ffffff85; border-radius:2px; font:10px/1.5 ui-monospace,monospace; }
#wireHeader .searchbox input:not(:placeholder-shown) ~ kbd { display:none; }
#wireHeader .wire-nav { display:flex; flex:none; align-items:stretch; gap:0; margin:0; padding:0; }
#wireHeader .btn {
  display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:48px;
  margin:0; padding:0 12px; border:0; border-radius:0;
  background:transparent; color:#fff; cursor:pointer; text-decoration:none; white-space:nowrap;
  font:12px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.03em;
}
#wireHeader .btn:hover { background:#185992; }
#wireHeader .btn:active { background:#103f6c; }
#wireHeader .btn[aria-current="page"] { background:#154f86; box-shadow:inset 0 -3px #fff; }
#wireHeader .iconbtn { width:48px; height:48px; padding:0; font-size:17px; }
#wireHeader .topbar :is(a,button,input):focus-visible { outline:2px solid #fff; outline-offset:-4px; }
#wireHeader .searchbox input:focus-visible { outline-offset:2px; }
#wireHeader #wireNavToggle { display:none; }
#wireHeader .clock-strip { display:flex; align-items:center; width:100%; height:30px; padding:0 max(20px, calc((100% - 1560px) / 2 + 20px)); background:var(--wh-paper); border-bottom:1px solid var(--wh-line); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  /* proximity, not mandatory: a drag still lands where the finger left it, but
     it settles on a whole city rather than parking a time half under the fade.
     These were set only by app.css, so the six pages that load this stylesheet
     without app.css — manual, welcome, subscribe, invitation, privacy, terms —
     had a rail that snapped to nothing (AQ-327). */
  scroll-snap-type:x proximity; scroll-padding-left:max(20px, calc((100% - 1560px) / 2 + 20px)); }
#wireHeader .clock-strip::-webkit-scrollbar { display:none; }
/* THE FADE, and it lives with the rail. Same reason as the JS that sets these
   classes: it was declared only in app.css, so the pages above could not show
   it at all and the rest only showed it to a signed-in reader on the terminal
   (AQ-327). Scoped to the header, like everything else the header owns. */
#wireHeader .clock-strip.ovf-e {
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); }
#wireHeader .clock-strip.ovf-s {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%); }
#wireHeader .clock-strip.ovf-s.ovf-e {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); }
/* A mask clips the element's OWN outline as readily as its content, so with a
   fade on, the last 34px of the rail's focus ring faded to nothing. Focus
   lifts the fade and the keyboard reader gets a whole, unbroken ring. This
   pairs with the same rule in app.css, which no longer wins on its own now
   that the masks above carry an ID. */
#wireHeader .clock-strip:is(.ovf-s,.ovf-e):focus-visible {
  -webkit-mask-image:none; mask-image:none; }
/* gap is a FLOOR, not the spacing: min-width:100% plus space-between spreads
   the cities across the band whenever they fit, and the gap only bites once
   they don't. So it decides the width at which the rail starts to scroll.
   22px put fifteen cities at 1535px and started the scroll at 1495 — i.e. on
   every laptop made. Fourteen cities at 16px need ~1330, which clears a 1440
   window with room and still reads as a rail rather than a list. */
#wireHeader .clocks { display:flex; flex:0 0 auto; flex-wrap:nowrap; align-items:center; justify-content:space-between; min-width:100%; gap:16px; margin:0; }
#wireHeader .clock { display:flex; flex:none; align-items:center; gap:7px; scroll-snap-align:start; }
/* THE DAY/NIGHT DOT. It was a 4px blue bead that meant nothing — the same
   colour beside Washington at 03:00 and Tokyo at noon. At 9px it is big enough
   to read at a glance, and it carries the one fact the rail was missing:
   whether the people in that capital are awake. The state is set by
   wire-header.js from the sun's real altitude, not from the hour.

   MONOCHROME, ON A VALUE LADDER (AQ-327). The three states were an amber disc,
   a salmon disc and a grey ring: two saturated hues on a band that has no
   other colour on it, carrying a fact that is not a category but a quantity —
   how much sun. Hue is the wrong axis for that, and it was the only axis a
   reader got for two of the three states, because amber and salmon are the
   pair a red-green reader is least able to separate and they flatten to nearly
   the same grey in print.
   So the ladder is lit / half-lit / unlit, drawn in the band's own ink:
     day   filled     the terminator has passed, the disc is lit
     dusk  half-lit   civil twilight, drawn as the terminator itself
     night hollow     a ring, dimmer than the label beside it
   That is monochrome, it is legible at 9px, and — unlike a hue — it survives
   greyscale, a colour-blind reader and both themes without a second encoding. */
#wireHeader .clock::before { content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:transparent; border:1.5px solid var(--wh-dim); box-sizing:border-box;
  transition:background-color .4s linear, border-color .4s linear; }
/* Sun above the horizon — lit. */
#wireHeader .clock[data-sun="day"]::before { background:var(--wh-ink); border-color:var(--wh-ink); }
/* Civil twilight: neither working daylight nor night, so neither filled nor
   hollow. The hard 50% stop is the terminator drawn at 9px; a gradient is a
   background-image, so it lands instantly rather than easing, which is right —
   a dot that fades through half-lit on its way to lit would read as dusk twice
   a day in places that are not in it. */
#wireHeader .clock[data-sun="dusk"]::before {
  background:linear-gradient(90deg, var(--wh-ink) 0 50%, transparent 50% 100%);
  border-color:var(--wh-dim); }
/* Below civil twilight — hollow, and dimmer than the label beside it. */
#wireHeader .clock[data-sun="night"]::before { background:transparent; border-color:var(--wh-line); }
[data-theme="dark"] #wireHeader .clock[data-sun="night"]::before { border-color:#4a5462; }
@media (prefers-reduced-motion: reduce) { #wireHeader .clock::before { transition:none; } }
#wireHeader .clock .micro { color:var(--wh-dim); font:10px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.07em; }
#wireHeader .clock .t { color:var(--wh-ink); font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
#wireHeader .ticker-wrap { display:flex; align-items:stretch; height:36px; margin:0; padding:0; background:var(--wh-paper); border-bottom:1px solid var(--wh-line); overflow:hidden; }
#wireHeader .ticker-label { display:flex; align-items:center; flex:none; padding:0 14px 0 max(20px, calc((100% - 1560px) / 2 + 20px)); background:var(--wh-blue); color:#fff; font:600 11px/1.4 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.15em; }
#wireHeader .ticker { flex:1; min-width:0; overflow:hidden; position:relative; height:100%; mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 20px),transparent); }
#wireHeader .ticker-track { display:inline-flex; align-items:stretch; height:100%; width:max-content; white-space:nowrap; animation:wire-ticker var(--ticker-dur,220s) linear infinite; }
#wireHeader .ticker-track:has(.wire-ticker-message) { animation:none; }
#wireHeader .tick, #wireHeader .wire-ticker-message { display:flex; align-items:center; margin:0; padding:0 24px 0 0; color:var(--wh-dim); font:12px/1.4 "IBM Plex Mono",ui-monospace,monospace; text-decoration:none; }
#wireHeader .wire-ticker-message { padding-left:16px; }
/* AQ-276: 4.404:1 against the ticker paper was below the small-text minimum. */
#wireHeader .tick b { color:#2f6fae; font-weight:600; padding-right:8px; }
[data-theme="dark"] #wireHeader .tick b { color:#7dbaf0; }
#wireHeader .tick:hover { color:var(--wh-ink); text-decoration:underline; }
#wireHeader .ticker-pause { flex:none; display:grid; place-items:center; width:36px; margin:0; padding:0; border:0; border-left:1px solid var(--wh-line); border-radius:0; background:var(--wh-paper); color:var(--wh-ink); cursor:pointer; font:14px/1 ui-monospace,monospace; }
#wireHeader .ticker:hover .ticker-track, #wireHeader .ticker:focus-within .ticker-track, #wireHeader[data-ticker-paused] .ticker-track { animation-play-state:paused; }
#wireHeader .ticker:focus-within { mask-image:none; overflow-x:auto; }
#wireHeader :is(.clock-strip,.tick,.wire-ticker-message,.ticker-pause):focus-visible { outline:2px solid #2f75b8; outline-offset:-2px; }
@keyframes wire-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* Scroll containers retain their content below the whole banner. */
.story, .story h3 .tlink, .row { scroll-margin-top:16px; }
.thead { top:var(--wire-header-height); }
.guide-sidebar { top:var(--wire-header-height); height:calc(100dvh - var(--wire-header-height)); }
body > .skip { z-index:110; }
/* Keep global navigation reachable on the sign-in screen as well. */
body:has(> #wireHeader) > .gate { top:var(--wire-header-height); overflow-y:auto; align-items:flex-start; }
body:has(> #wireHeader) > .gate .gate-box { margin-block:auto; }
#srcModal { top:0; }
#srcModal .modal-card { max-height:calc(100dvh - 32px); }
/* The same nav moves into a disclosure panel; it is never cloned. */
@media(max-width:1100px) {
  #wireHeader .topbar { flex-wrap:wrap; }
  #wireHeader #wireNavToggle { display:inline-flex; margin-right:8px; }
  #wireHeader .wordmark { margin-right:0; }
  #wireHeader .wire-nav {
    position:fixed; top:var(--wire-topbar-height,48px); left:0; z-index:102;
    width:256px; max-width:100vw; max-height:calc(100dvh - var(--wire-topbar-height,48px));
    overflow-y:auto; flex-direction:column; align-items:stretch;
    background:#154f86; border:1px solid #ffffff40; box-shadow:0 8px 20px #0003;
  }
  #wireHeader .wire-nav .btn { justify-content:flex-start; padding:0 20px; }
  #wireHeader .wire-nav .btn[aria-current="page"] { box-shadow:inset 3px 0 #fff; background:#103f6c; }
  #wireHeader .topbar-tools { min-width:0; }
  #wireHeader .searchbox { width:220px; }
}
@media(max-width:600px) {
  :root { --wire-header-height:175px; }
  #wireHeader .topbar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; padding:0 12px 8px; gap:0; }
  #wireHeader #wireNavToggle { grid-column:1; grid-row:1; margin:0; }
  #wireHeader .wordmark { grid-column:2; grid-row:1; }
  #wireHeader .wm-home { min-height:48px; gap:8px; }
  #wireHeader .wh-logo { height:20px; }
  #wireHeader .wire { font-size:13px; }
  #wireHeader .topbar-tools { display:contents; }
  #wireHeader .searchbox { grid-column:1 / -1; grid-row:2; width:100%; max-width:none; min-width:0; margin:0; }
  #wireHeader .searchbox input, #wireHeader .searchbox input:focus { height:44px; font-size:16px; }
  #wireHeader .wh-help { grid-column:3; grid-row:1; }
  #wireHeader #themeBtn { grid-column:4; grid-row:1; }
  #wireHeader .btn { min-height:48px; padding:0 8px; font-size:11px; letter-spacing:0; }
  #wireHeader .iconbtn { width:44px; height:48px; }
  /* This band is a drag target on a phone: fourteen cities are ~1330px of rail
     in a 390px viewport, so the reader has to move it. 30px was 6px of
     clearance around an 18px row — a hairline to catch with a thumb. app.css
     asked for 34px and said why, and this rule had been silently beating it on
     specificity ever since; 34px is a band you can actually grab, and it is
     still the shortest of the three. */
  #wireHeader .clock-strip { height:34px; padding:0 12px; scroll-padding-left:12px; }
  #wireHeader .clocks { gap:16px; padding-right:12px; }
  /* 26px of fade, not 34: on a 390px band 34px is a whole city spent on the
     dissolve. */
  #wireHeader .clock-strip.ovf-e {
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); }
  #wireHeader .clock-strip.ovf-s {
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%); }
  #wireHeader .clock-strip.ovf-s.ovf-e {
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%); }
  /* Restated inside the query: it ties with the two-sided mask above on
     specificity, and that one is declared later, so without this line the
     focus ring would go back to being clipped at exactly the narrow widths
     where the rail always overflows. */
  #wireHeader .clock-strip:is(.ovf-s,.ovf-e):focus-visible {
    -webkit-mask-image:none; mask-image:none; }
  #wireHeader .ticker-label { padding-left:12px; }
  #wireHeader .ticker-wrap { height:45px; }
  #wireHeader .ticker-pause { width:44px; }
}
@media(max-width:720px) { .guide-sidebar { position:static; height:auto; } }
@media(prefers-reduced-motion:reduce) { #wireHeader .ticker-track { animation:none; } #wireHeader .ticker { overflow-x:auto; } }
@media print { #wireHeader { position:static; } #wireHeader .wire-nav, #wireHeader #wireNavToggle, #wireHeader .topbar-tools, #wireHeader .clock-strip, #wireHeader .ticker-wrap { display:none; } .guide-sidebar { display:none; } }