/* ══════════════════════════════════════════════════════════════════════════════════════════
   PN-PILOT-SEASON — countdown chip/banner + first-login welcome modal (Vero, 2026-09-27)
   Companion to assets/js/pn-pilot-season.js. Same mount pattern as pn-guide-20260927.css:
   `.pnps-welcome` is appended to document.body directly, a SIBLING of `.pn-folio`, not a
   descendant of it — .pn-folio carries a transform in the cased-iPad desktop layout, which would
   otherwise resolve this dialog's `position:fixed` against the folio's box instead of the
   viewport. Width is capped at iPad width (740px — a welcome card, not a full document like the
   Guide) so on desktop it always reads as contained "inside the glass", never full-bleed.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── shared countdown chip, used by the appbar pill, the Floor hero banner, the Guide header
      and the welcome modal — one look everywhere the pilot clock appears ────────────────────── */
.pnps-cd{ font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }
.pnps-cd-txt{ font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }

/* appbar host — pn-system-v4.css sets `.appbar > *{min-width:0}` below 980px, which silently
   compresses any unlisted flex child to ~0 width once the bar runs short of room (measured:
   #pnpsAppbarCd collapsed to a 0-width, invisible node at 390px before this rule existed) —
   pn-masthead-20260912.css's own comment names this exact trap and lists the pills it protects
   with `flex:0 0 auto`; this one is not on that list (a different, optional file), so it is
   protected here instead. The identity block stays the one element that shrinks/truncates, same
   as every other fixed pill in the bar. */
.appbar > #pnpsAppbarCd{ flex:0 0 auto !important; min-width:0; }

/* compact — appbar pill */
.pnps-cd--compact{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px;
  border:1px solid color-mix(in srgb, var(--accent,#f97316) 38%, var(--line,rgba(255,255,255,.16)));
  border-radius:2px; background:color-mix(in srgb, var(--accent,#f97316) 9%, var(--surface2,rgba(255,255,255,.04)));
  font:700 11.5px/1 var(--pn-mono,"JetBrains Mono",ui-monospace,monospace); letter-spacing:.03em;
  color:var(--ink,#eef3fb); white-space:nowrap;
}
.pnps-cd--compact .pnps-cd-ico{ width:6px; height:6px; border-radius:50%; background:var(--accent,#f97316); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#f97316) 22%, transparent); }
.pnps-cd--compact.is-over{ opacity:.7; border-color:var(--line,rgba(255,255,255,.16)); background:var(--surface2,rgba(255,255,255,.04)); }
.pnps-cd--compact.is-over .pnps-cd-ico{ background:var(--muted,#9aa7bd); box-shadow:none; }
@media (max-width:900px){ .pnps-cd--compact .pnps-cd-txt{ max-width:120px; overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:560px){ .pnps-cd--compact{ padding:0 8px; gap:4px; } .pnps-cd--compact .pnps-cd-txt{ max-width:78px; } }
@media (max-width:480px){ .pnps-cd--compact{ padding:0 6px; gap:3px; font-size:11px; } .pnps-cd--compact .pnps-cd-txt{ max-width:32px; overflow:visible; } }

/* full — Floor hero banner (LB-01 companion strip) + welcome modal + Guide header */
.pnps-cd--full{
  display:flex; flex-direction:column; gap:3px; padding:14px 16px;
  border:1px solid color-mix(in srgb, var(--accent,#f97316) 42%, transparent);
  border-radius:2px; background:color-mix(in srgb, var(--accent,#f97316) 11%, transparent);
  margin-bottom:14px;
}
.pnps-cd--full .pnps-cd-eyebrow{
  font:800 10px/1 var(--pn-mono,"JetBrains Mono",monospace); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent,#f97316);
}
.pnps-cd--full .pnps-cd-txt{
  font:800 20px/1.15 var(--pn-mono,"JetBrains Mono",ui-monospace,monospace); color:var(--ink,#eef3fb); letter-spacing:.01em;
}
.pnps-cd--full .pnps-cd-sub{ font:500 12.5px/1.3 var(--pn-sans,Inter,sans-serif); color:var(--muted,#9aa7bd); }
.pnps-cd--full.is-over{ border-color:var(--line,rgba(255,255,255,.16)); background:var(--surface2,rgba(255,255,255,.04)); }
.pnps-cd--full.is-over .pnps-cd-eyebrow{ color:var(--muted,#9aa7bd); }

/* the header used in the Guide + any compact "how it works" sheet */
.pnps-hdr{ display:block; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--gd-line,rgba(255,255,255,.14)); }
.pnps-hdr-eyebrow{
  display:block; font:800 10px/1 var(--pn-mono,"JetBrains Mono",monospace); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gd-accent,#ff6a2b); margin-bottom:8px;
}
.pnps-hdr .pnps-cd--hdr{
  display:inline-block; padding:8px 12px; margin-bottom:10px;
  border:1px solid color-mix(in srgb, var(--gd-accent,#ff6a2b) 42%, transparent);
  border-radius:2px; background:color-mix(in srgb, var(--gd-accent,#ff6a2b) 11%, transparent);
  font:800 15px/1.1 var(--pn-mono,"JetBrains Mono",monospace); color:var(--gd-ink,#f2f4f9);
}
.pnps-hdr .pnps-cd--hdr.is-over{ opacity:.75; }
.pnps-pts{ margin:0; padding:0 0 0 1.1em; list-style:disc; }
.pnps-pts li{ font:400 13.5px/1.5 var(--pn-sans,Inter,sans-serif); color:var(--gd-muted,rgba(233,238,248,.82)); margin:0 0 6px; }
.pnps-pts li:last-child{ margin-bottom:0; }
.pnps-pts b{ color:var(--gd-ink,#f2f4f9); font-weight:700; }
.pnps-hdr--compact .pnps-hdr-line{ font:400 13px/1.45 var(--pn-sans,Inter,sans-serif); color:var(--gd-muted,rgba(233,238,248,.82)); margin:0; }

/* ── FIRST-LOGIN WELCOME — REDESIGN v2 (Vero, 2026-09-27). CEO, launch day, verbatim: "What did
   I say about putting dark pops with dark content on dark backgrounds?????!!! Stop it — and
   redesign this to look polished." The previous card was a dark panel (#14161d) on a dark scrim
   on a dark game — exactly the shipped violation. This card is LOCKED LIGHT, in every theme,
   always: the SST's own base (#f8f9ff surface, #0b1c30 navy brutalist border, #f97316 orange the
   ONE saturated colour, hard offset shadow, tiny radius) — never a bespoke dark skin, never
   theme-branched back to dark. Standing direction honoured: block colour, clear differentiation,
   type legibility, lighter modules. ─────────────────────────────────────────────────────────── */
.pnps-welcome{
  position:fixed; inset:0; z-index:20050;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,8,14,.72);
  backdrop-filter:blur(8px) saturate(115%); -webkit-backdrop-filter:blur(8px) saturate(115%);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  animation:pnps-in .22s ease-out;
}
@keyframes pnps-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .pnps-welcome{ animation:none } }

/* card tokens — no theme branching. The scrim behind dims the (possibly dark) game; the card
   itself never inherits that darkness. */
.pnps-welcome{
  --pw-bg:#f8f9ff; --pw-ink:#0b1c30; --pw-muted:#4a3b33; --pw-line:#0b1c30;
  --pw-accent:#f97316; --pw-accent-ink:#582200;
}

.pnps-welcome-card{
  position:relative; width:min(600px,92vw); max-height:88vh; overflow-y:auto;
  background:var(--pw-bg); color:var(--pw-ink);
  border:4px solid var(--pw-line); border-radius:2px;
  box-shadow:10px 10px 0 var(--pw-accent), 24px 24px 60px rgba(0,0,0,.35);
  padding:0 0 24px;
}
@media (max-width:600px){
  .pnps-welcome{ padding:0; align-items:stretch; }
  .pnps-welcome-card{ width:100%; max-width:none; max-height:100vh; height:100%; border-radius:0; border-width:0; box-shadow:none; padding:0 0 20px; }
}

/* hero — the NBP 3D "PILOT SEASON" + torn OCT 31 calendar render, full-bleed across the card top */
.pnps-welcome-hero{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,#1a1006 0%,#3a2210 55%,#0b1c30 100%);
  border-bottom:4px solid var(--pw-line);
}
.pnps-welcome-hero img{ display:block; width:100%; height:100%; object-fit:cover; }
/* CSS fallback face — shown only if the render 404s (img onerror swaps this class in). Same
   promise (PILOT SEASON headline + a torn OCT 31 page), built from tokens, never a blank box. */
.pnps-welcome-hero--fallback img{ display:none; }
.pnps-welcome-hero--fallback{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.pnps-welcome-hero--fallback::before{
  content:"PILOT\A SEASON"; white-space:pre; font:900 14.5vw/.82 var(--pn-display,"Archivo Black",Inter,sans-serif);
  font-style:italic; letter-spacing:-.03em; color:#fbbf24; text-shadow:4px 4px 0 #9d4300;
}
.pnps-welcome-hero--fallback::after{
  content:"OCT\A 31"; white-space:pre; flex:none; text-align:center;
  font:800 15px/1.05 var(--pn-mono,"JetBrains Mono",monospace); letter-spacing:.08em; text-transform:uppercase;
  color:#0b1c30; background:#f8f9ff; border:3px solid #0b1c30; border-radius:2px; padding:10px 16px;
  transform:rotate(3deg); box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
@media (max-width:600px){ .pnps-welcome-hero{ aspect-ratio:4/3; } }

/* Close — quiet control (CEO: "not a heavy orange outlined box"). Small overlay chip on the
   hero image, no border, no accent colour — it fades into the photo until hovered/focused. */
.pnps-welcome-x{
  position:absolute; top:12px; right:12px; min-width:44px; min-height:32px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  font:700 10px/1 var(--pn-mono,"JetBrains Mono",monospace); letter-spacing:.1em; text-transform:uppercase;
  color:#f8f9ff; background:rgba(11,28,48,.5); border:0; border-radius:2px; cursor:pointer;
}
.pnps-welcome-x:hover, .pnps-welcome-x:focus-visible{ background:rgba(11,28,48,.8); color:var(--pw-accent); }

.pnps-welcome-body{ padding:16px 26px 0; }
@media (max-width:600px){ .pnps-welcome-body{ padding:16px 18px 0; } }

/* html body #pnps-welcome .pnps-hdr-eyebrow (id+class+2 elements, specificity 1,1,2) — ties
   pn-ds.css's `[class*="-eyebrow"]` !important rule (same specificity via its :not(#id) bump) and
   wins on source order (this file loads later). Same trap as the headline above: an un-countered
   version rendered a washed-out grey label instead of the orange-on-cream chip. */
html body #pnps-welcome .pnps-hdr-eyebrow{
  display:inline-block; font:800 10.5px/1 var(--pn-mono,"JetBrains Mono",monospace) !important; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pw-accent-ink) !important; background:color-mix(in srgb, var(--pw-accent) 18%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--pw-accent) 55%, transparent); padding:5px 10px; border-radius:2px; margin:0 0 12px;
}
/* html body #pnps-welcome-h (ID + 2 elements, specificity 1,0,2) — pn-ds.css enforces a
   site-wide h1/h2/h3 ink via `h2:not(#pn-ds-never){color:var(--ds-ink)!important}`, whose
   :not(#id) bump gives it specificity 1,0,1; a plain !important class rule (0,1,0) LOSES to that
   even though this file loads later, because among !important declarations specificity still
   decides, not source order. Measured, not guessed: computed color was rgb(238,243,250) — the
   dark theme's near-white ink — on this #f8f9ff card, i.e. an invisible headline. */
html body #pnps-welcome-h{
  font:900 27px/1.08 var(--pn-display,"Archivo Black",Inter,sans-serif) !important; font-style:italic;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--pw-ink) !important; margin:0 0 16px; text-wrap:balance;
}

/* the big legible clock — days / hours / mins as three separate, high-contrast blocks (tabular
   digits) rather than one string, so the deadline reads at a glance. One block colour, no dark-
   on-dark: navy block, warm-gold digits, off-white labels — every pairing AA-plus. */
.pnps-clock{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px; }
.pnps-clock-unit{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:12px 4px 10px; background:var(--pw-ink); border:2px solid var(--pw-ink); border-radius:2px;
}
.pnps-clock-num{
  font:800 clamp(26px,7vw,36px)/1 var(--pn-mono,"JetBrains Mono",ui-monospace,monospace);
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; color:#fbbf24;
}
.pnps-clock-lbl{ font:700 10px/1 var(--pn-mono,"JetBrains Mono",monospace); letter-spacing:.14em; text-transform:uppercase; color:#f8f9ff; opacity:.82; }
.pnps-clock.is-over .pnps-clock-num{ color:#f8f9ff; opacity:.7; }
.pnps-clock-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.pnps-welcome .pnps-pts{ margin:0 0 20px; }
.pnps-welcome .pnps-pts li{ font:400 15px/1.55 var(--pn-sans,Inter,sans-serif); color:var(--pw-muted); }
.pnps-welcome .pnps-pts b{ color:var(--pw-ink); font-weight:800; }

.pnps-welcome-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:0 26px; }
@media (max-width:600px){ .pnps-welcome-actions{ padding:0 18px; } }
.pnps-welcome-actions .pn-btn{ min-height:46px; font-weight:800; }
.pnps-welcome-actions .pn-btn--primary{ background:var(--pw-accent); color:#1a0a00; border:2px solid var(--pw-ink); box-shadow:4px 4px 0 var(--pw-ink); border-radius:2px; }
.pnps-welcome-actions .pn-btn--primary:hover{ background:#fb8a3f; }
.pnps-welcome-actions .pn-btn--secondary{ background:transparent; color:var(--pw-ink); border:2px solid var(--pw-ink); border-radius:2px; }
.pnps-welcome-actions .pn-btn--secondary:hover{ background:color-mix(in srgb, var(--pw-ink) 8%, transparent); }
@media (max-width:420px){ .pnps-welcome-actions{ flex-direction:column; } .pnps-welcome-actions .pn-btn{ width:100%; } }

/* focus visibility, everywhere in this file (UX_RULES / apple-design a11y) */
.pnps-welcome :focus-visible, .pnps-cd :focus-visible{ outline:2px solid var(--pw-accent,#f97316); outline-offset:2px; }

/* CEO 2026-09-27: the countdown is "a subtle part of topnav" — no box, no fill, no accent border.
   A quiet muted line with a small live dot; the first-login welcome carries the message. */
.appbar .pnps-cd--compact{
  height:auto !important; padding:0 4px !important; border:0 !important; background:none !important;
  box-shadow:none !important; border-radius:0 !important;
  font:600 11px/1 var(--pn-mono,"JetBrains Mono",ui-monospace,monospace) !important; letter-spacing:.04em;
  color:var(--muted,#9aa7bd) !important; opacity:.85;
}
.appbar .pnps-cd--compact .pnps-cd-ico{ width:5px; height:5px; box-shadow:none !important; opacity:.8; }