/* Extracted from header-v2.blade.php, 2026-08-15. Inlined into every page that
   includes it, so no browser could cache it. Rules needing a per-request value stay
   inline in their original position, so the cascade is unchanged. */
.mast{padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--pn-line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);z-index:60}
.mast .logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:20px;line-height:1;flex:0 0 auto}
.mast .logo .shield{width:26px;height:26px;flex:0 0 auto;background:linear-gradient(135deg,#7A5CFF,var(--pn-magenta));-webkit-mask:var(--shield-url) no-repeat center/contain;mask:var(--shield-url) no-repeat center/contain}
.mast .logo .n{background:linear-gradient(90deg,var(--pn-electric),var(--pn-magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.mast .spacer{flex:1}
/* search */
.msearch{display:flex;align-items:center;gap:6px}
.msearch form{display:flex;align-items:center;gap:6px}
.msearch input{width:0;opacity:0;padding:0;border:0;transition:width .22s ease,opacity .18s ease,padding .22s ease;
  background:var(--pn-surface);border-radius:99px;font-size:14.5px;font-family:var(--sans);color:var(--pn-ink);min-width:0}
.msearch.open input{width:min(46vw,240px);opacity:1;padding:10px 14px;border:1px solid var(--pn-line)}
@media(min-width:900px){.msearch input{width:210px;opacity:1;padding:10px 14px;border:1px solid var(--pn-line)}}
/* SEARCH ON A PHONE (val, 2026-08-03: "is impossible for people to do any
   searches on mobile phone"). MEASURED at 375px before the fix: tapping the
   search icon opened a field TWO PIXELS wide. The logo is flex:0 0 auto at
   186px and never yields, so the row needed 18+186+172+42+42+18 = 478px in a
   375px viewport, and the input was the only item that could give, so it gave
   everything. Nobody could type a character.

   Open search now becomes an overlay across the row instead of competing with
   the logo for space, which is the ordinary phone pattern. The right offset is
   DERIVED from the burger it must not cover (18px page padding + 42px button +
   6px gap), not guessed, so it cannot drift if the padding changes. */
@media(max-width:899px){
  .msearch.open{position:absolute;left:14px;right:calc(18px + 42px + 6px);top:12px;height:42px;
    display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.98);z-index:2}
  .msearch.open form{flex:1 1 auto;min-width:0}
  .msearch.open input{width:100%;flex:1 1 auto;min-width:0}
}
.iconbtn{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--pn-ink);border-radius:50%}
/* The search and menu buttons sat 10px apart, which reads as one crowded control
   rather than two (val, 2026-08-03: "still too close to each other"). The extra
   margin comes out of the flexible spacer, so the menu button stays flush with
   the page edge: measured at 320px, its right edge is 302px either way. */
.mast .burger{margin-left:10px}
.iconbtn:active{background:var(--pn-surface)}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){.msearch .searchtoggle{display:none}}
/* slide-over menu */
.menu-scrim{position:fixed;inset:0;background:rgba(14,15,20,.5);backdrop-filter:blur(2px);z-index:90}
.menu{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,340px);background:#fff;z-index:100;
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s .24s;
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:-16px 0 48px -24px rgba(18,19,31,.45);
  visibility:hidden}/* closed = truly gone: keyboard users must not tab into an off-screen menu */
.menu.is-open{transform:translateX(0);visibility:visible;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s 0s}
@media(prefers-reduced-motion:reduce){.menu{transition:none}}
.menu-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--pn-line)}
.menu-ttl{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pn-ink-3)}
.menu-x{background:none;border:0;font-size:30px;line-height:1;color:var(--pn-ink);width:44px;height:44px;cursor:pointer}
.menu-nav{display:flex;flex-direction:column;padding:8px 0}
.menu-nav a{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;padding:13px 18px;border-bottom:1px solid var(--pn-line);color:var(--pn-ink)}
.menu-nav a:active{background:var(--pn-surface)}
.menu-sec{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pn-ink-3);padding:18px 18px 8px}
.editions{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 26px}
.editions a{font-size:13px;font-weight:700;padding:8px 12px;border:1px solid var(--pn-line);border-radius:999px;color:var(--pn-ink-2)}
.editions a.on{background:linear-gradient(90deg,var(--pn-electric),var(--pn-magenta));border-color:transparent;color:#fff}