/* ============================================================================
   STEALTH-SHARED.CSS — live-site shared foundation
   Single source of truth for the design system across all stealth.org pages.
   Extracted 2026-06-16 from the deep-page canonical (privacy/). Page-specific
   CSS (hero, section bodies, page tables) stays inline in each page, loaded
   AFTER this file so any intentional per-page override still wins.
   NOTE: distinct from the new-project /stealth.css deliverable.
   ========================================================================== */

/* ====== FOUNDATION: tokens, reset, focus, scrollbar, header, nav, mobile sheet ====== */
  /* ============ PALETTE — v15-locked tokens ============ */
  /* Note: for /privacy v1 we tighten the usage rule around --text-mute: it is
     RESTRICTED to ≥16px only (contrast 3.92:1 fails AA 4.5:1 at smaller sizes,
     per audit-v15-accessibility-webguidelines.md finding #1). Small mono meta
     labels below 16px on this page use --text-sec (#9a9a9a · 6.10:1 · passes
     AA) instead. Full token-level fix is queued for the post-Phase-2 landing
     remediation sweep — /privacy v1 respects the constraint proactively. */
  :root {
    --bg:          #0d0d0d;
    --bg-alt:      #111111;
    --bg-raised:   #161616;
    --bg-hover:    #1a1a1a;
    --border:      #303030;
    --border-ui:   #6a6a6a;   /* interactive UI border — WCAG 1.4.11 (≥3:1) */
    --border-soft: #252525;
    --rule:        #404040;
    --text-hi:     #ffffff;
    --text:        #ededed;
    --text-sec:    #9a9a9a;
    --text-mute:   #858585;
    --text-dim:    #4a4a4a;
    --red:         #e7011f;
    --red-soft:    rgba(231,1,31,0.35);
    --hairline:        1px solid var(--border);
    --hairline-soft:   1px solid var(--border-soft);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* ============ GLOBAL :FOCUS-VISIBLE — audit fix (Pattern 2) ============
     One rule, inherits to every interactive element. Fires only on keyboard
     focus (mouse users don't see the ring). Uses --red so the focus state
     reads as part of the brand system rather than as a browser default. */
  :focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }
  /* For elements that already have an explicit pinned-disabled focus treatment
     (e.g. .spec-link with aria-disabled="true"), preserve their existing rules
     via the selectors lower in the stylesheet — those take precedence here. */

  html {
    scroll-behavior: smooth;
    font-feature-settings: "ss01", "cv11", "tnum";
    /* Hide native scrollbar (Firefox) — custom rail drawn below */
    scrollbar-width: none;
  }
  /* Hide native scrollbar (WebKit/Blink) */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  ::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* ============ CUSTOM SCROLLBAR — identical vocabulary to landing v15 ============ */
  .sb-rail {
    position: fixed; top: 0; right: 0;
    width: 100px; height: 100vh;
    z-index: 9999; pointer-events: none;
  }
  .sb-track {
    position: absolute; top: 0; right: 2px;
    width: 8px; height: 100%;
    background: var(--bg-alt);
    pointer-events: auto; cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .sb-thumb {
    position: absolute; top: 0; left: 0;
    width: 8px; min-height: 24px;
    background: var(--text-sec);      /* raised from --text-mute for AA contrast */
    border-left: 1px solid var(--red);
    cursor: grab;
    transition: background 0.15s ease;
    will-change: transform, height;
    z-index: 2;
  }
  .sb-thumb:hover { background: var(--text); }
  .sb-thumb:active { background: var(--text); cursor: grabbing; }
  .sb-tick {
    position: absolute; right: 2px;
    width: 8px; height: 1px;
    background: var(--text-dim);
    pointer-events: auto; cursor: pointer;
    z-index: 1;
    transition: background 0.15s ease, height 0.15s ease, width 0.15s ease;
  }
  .sb-tick:hover { background: var(--red); height: 2px; width: 12px; right: 0; }
  .sb-label {
    position: absolute; top: 0; right: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-sec);           /* was --text-mute — promoted for AA */
    white-space: nowrap; pointer-events: none;
    background: var(--bg);
    padding: 4px 8px; border: 1px solid var(--border);
    transition: opacity 0.25s ease;
    opacity: 0;
    will-change: transform, opacity;
  }
  .sb-label .sb-label-num { color: var(--red); font-weight: 500; margin-right: 6px; }
  .sb-label .sb-label-sep { color: var(--text-dim); margin: 0 6px; }
  .sb-label.is-active { opacity: 1; }
  .sb-track.sb-hidden { opacity: 0; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .sb-track, .sb-thumb, .sb-tick, .sb-label { transition: none; }
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  /* Section anchor offset so sticky header (statusbar + masthead) doesn't overlap heading */
  section.sect { scroll-margin-top: 164px; } /* v23: sticky header + sect-rail */
  @media (max-width: 900px) {
    section.sect { scroll-margin-top: 48px; }
  }

  .wrap { position: relative; z-index: 1; }

  /* ============ MONO UTILITIES ============ */
  .mono { font-family: 'IBM Plex Mono', monospace; }
  .micro {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500;
  }
  .tight-kern { letter-spacing: -0.05em; }

  /* ============ STICKY HEADER WRAPPER ============ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
  }
  @media (max-width: 900px) {
    .site-header { position: static; }
  }

  /* ============ STATUS BAR ============ */
  .statusbar {
    background: var(--bg);
    color: var(--text-sec);
    border-bottom: var(--hairline);
    padding: 10px 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .statusbar-l, .statusbar-r { display: flex; gap: 20px; align-items: center; }
  .statusbar strong { color: var(--text); font-weight: 500; }

  .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  .statusbar-hide-mobile { display: flex; gap: 20px; align-items: center; }
  @media (max-width: 720px) { .statusbar-hide-mobile { display: none; } }

  /* ============ MASTHEAD ============ */
  .masthead {
    background: var(--bg);
    padding: 22px 24px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: var(--hairline);
  }
  .logo { display: flex; align-items: center; gap: 10px; }
  .logo-mark {
    width: 24px;
    height: 32px;
    color: var(--text);
    display: block;
    flex-shrink: 0;
  }
  .logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 17px;
    letter-spacing: 0.2em; color: var(--text);
  }
  .logo-link {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    /* v17 (phase-6b): 44×44 touch target (WCAG 2.5.5). Visible mark unchanged; only hit area grows. */
    min-height: 44px; padding: 11px 0;
  }
  .logo-version {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px; color: var(--text-sec);
    letter-spacing: 0.1em; margin-left: 10px;
  }

  nav ul { list-style: none; display: flex; gap: 28px; }
  nav a {
    color: var(--text);
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500;
    transition: color 0.15s;
    position: relative;
    padding: 12px 0;
    display: inline-block;
  }
  nav a:hover { color: var(--red); }
  nav a::before { content: none; color: var(--text-dim); margin-right: 6px; transition: color 0.15s; }
  nav a:hover::before { color: var(--red); }

  /* ============ TWO-TIER NAV (v23) ============
     Masthead = site menu (pages, → glyph, current page lit). .sect-rail =
     this page's sections (numbered, scroll-spy). Scoped so footer
     legal-nav keeps the canonical `nav a` rules above. */
  .masthead nav a.nav-page::before { content: '→'; }
  .masthead nav a.nav-page { font-size: 16px; }
  .masthead nav a.nav-current { color: var(--text-hi); }
  .masthead nav a.nav-current::before { color: var(--red); }
  .sect-rail {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px;
    border-bottom: var(--hairline);
    background: var(--bg);
  }
  .sect-rail ul { gap: 22px; }
  .sect-rail a {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    padding: 12px 0;
    position: relative;
  }
  .sect-rail a::before { content: none; }
  .sect-rail .nav-num { color: var(--text-dim); margin-right: 6px; transition: color 0.15s; }
  .sect-rail a:hover { color: var(--text); }
  .sect-rail a:hover .nav-num { color: var(--red); }
  .sect-rail a.is-active { color: var(--text-hi); }
  .sect-rail a.is-active .nav-num { color: var(--red); }
  .sect-rail a.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--red);
  }
  @media (max-width: 900px) { .sect-rail { display: none; } }
  nav a.nav-home::before { content: '←'; color: var(--red); margin-right: 6px; font-weight: 600; }
  nav a.nav-home { color: var(--text); }
  @media (max-width: 900px) { nav ul { display: none; } }

  /* ============ MOBILE BURGER + FULLSCREEN SHEET (v21) ============
     Mirrors the pattern on /index.html (landing). Pair: <button class="burger">
     inside .masthead ↔ <div class="mobile-sheet"> below the header. Both are
     desktop-invisible; at ≤900px the burger is a 44×44 icon at the right edge
     of the masthead and the sheet is a position:fixed full-viewport overlay.
     Visibility is driven by [data-open] via visibility+opacity transition
     (not display) so the fade works; aria-hidden tracks open state for AT. */

  .burger { display: none; }
  .mobile-sheet { display: none; }

  @media (max-width: 900px) {

    /* ---- Burger button ---- */
    .burger {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-right: -10px;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: var(--text);
      -webkit-tap-highlight-color: transparent;
      position: relative;
      z-index: 61;
    }
    .burger:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
    .burger-lines { display: block; width: 20px; height: 12px; position: relative; }
    .burger-lines span,
    .burger-lines::before,
    .burger-lines::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1.5px;
      background: currentColor;
      transition: top 0.2s ease, bottom 0.2s ease, transform 0.2s ease, opacity 0.15s ease;
    }
    .burger-lines::before { top: 0; }
    .burger-lines span    { top: calc(50% - 0.75px); }
    .burger-lines::after  { bottom: 0; }
    .burger[aria-expanded="true"] .burger-lines::before {
      top: calc(50% - 0.75px);
      transform: rotate(45deg);
    }
    .burger[aria-expanded="true"] .burger-lines span { opacity: 0; }
    .burger[aria-expanded="true"] .burger-lines::after {
      bottom: auto;
      top: calc(50% - 0.75px);
      transform: rotate(-45deg);
    }

    /* ---- Fullscreen sheet ---- */
    .mobile-sheet {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 60;
      background: var(--bg);
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.18s ease, visibility 0s linear 0.18s;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-sheet[data-open="true"] {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.18s ease, visibility 0s linear 0s;
    }
    .mobile-sheet-header {
      position: sticky;
      top: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      padding: 22px 24px;
      min-height: 44px;
      border-bottom: var(--hairline);
      z-index: 1;
    }
    .mobile-sheet-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text);
    }
    .mobile-sheet-label .ms-section { color: var(--red); margin-right: 8px; }
    .mobile-sheet-body {
      padding: 32px 24px 96px;
      padding-left:  max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
    .ms-group + .ms-group { margin-top: 40px; }
    .ms-group-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-mute);
      padding-bottom: 10px;
      border-bottom: var(--hairline);
      margin-bottom: 4px;
      font-weight: 500;
    }
    /* Explicit display overrides the `nav ul { display: none }` rule above. */
    .mobile-sheet ul {
      display: block;
      list-style: none;
      padding: 0;
      margin: 0;
      gap: 0;
      align-items: initial;
    }
    .mobile-sheet li { display: block; border-bottom: var(--hairline); }
    .mobile-sheet li:last-child { border-bottom: none; }
    .mobile-sheet a {
      display: flex;
      align-items: baseline;
      gap: 14px;
      padding: 18px 0;
      font-family: 'Inter', sans-serif;
      font-size: 18px;
      color: var(--text);
      text-decoration: none;
      letter-spacing: -0.01em;
      min-height: 44px;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-sheet a:hover { color: var(--red); }
    .mobile-sheet a:focus-visible {
      color: var(--red);
      outline: 2px solid var(--red);
      outline-offset: 4px;
    }
    .ms-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      letter-spacing: 0.08em;
      color: var(--text-mute);
      font-weight: 500;
      min-width: 34px;
      flex-shrink: 0;
      padding-top: 4px;
    }
    .ms-group-explore a {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-sec);
    }
    .ms-group-explore a::before {
      content: '→';
      color: var(--red);
      margin-right: 12px;
      min-width: 14px;
      display: inline-block;
    }
    .ms-group-explore a:hover { color: var(--text); }

    html.ms-open, body.ms-open { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
      .mobile-sheet { transition: none; }
      .burger-lines span,
      .burger-lines::before,
      .burger-lines::after { transition: none; }
    }
  }


/* ====== SECTION SCAFFOLD ====== */
  /* ============ SECTION SCAFFOLD ============ */
  section.sect {
    background: var(--bg);
    /* v17 (phase-6b): respect device safe-area insets (notched/curved viewports). */
    padding: 96px max(24px, env(safe-area-inset-right)) 96px max(24px, env(safe-area-inset-left));
    border-bottom: var(--hairline);
    position: relative;
  }
  .sect-head {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: var(--hairline);
    margin-bottom: 48px;
    align-items: baseline;
  }
  .sect-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.12em; color: var(--text-sec);
  }
  .sect-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1; letter-spacing: -0.035em;
    color: var(--text);
  }
  .sect-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    text-align: right;
  }
  @media (max-width: 720px) {
    .sect-head { grid-template-columns: 1fr; gap: 12px; }
    .sect-meta { text-align: left; }
  }


/* ====== FOOTER + REVEAL + BOTTOM SHADE ====== */
  /* ============ FOOTER ============ */
  footer.foot {
    background: var(--bg);
    padding: 80px 0 40px;
    border-top: var(--hairline);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
  }
  .foot-masthead {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 0 24px 48px;
    border-bottom: var(--hairline);
    margin-bottom: 32px;
  }
  .foot-masthead h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--text-mute);
    font-weight: 500;
  }
  .foot-masthead ul { list-style: none; }
  .foot-masthead li { margin-bottom: 8px; }
  .foot-masthead a {
    color: var(--text-sec);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.15s;
    display: inline-block;
    padding: 6px 0;
  }
  .foot-masthead a:hover { color: var(--text); }
  .foot-statement {
    font-weight: 200;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 380px;
    margin-bottom: 20px;
    color: var(--text);
  }
  .foot-statement strong { font-weight: 700; }
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 24px;
  }
  /* Footer legal nav — hover lift */
  nav[aria-label="Legal"] a { transition: color 0.15s; font-size: 12px; }
  nav[aria-label="Legal"] a:hover { color: var(--text-hi) !important; }
  @media (max-width: 900px) { .foot-masthead { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 500px) { .foot-masthead { grid-template-columns: 1fr; } }

  /* ============ REVEAL ON SCROLL ============ */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .reveal { opacity: 0; }
  .reveal.in { animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; }
    .reveal.in { animation: none; }
  }

  /* ============ BOTTOM SHADE — fade-to-black strip at viewport bottom ============
     Fixed 400px strip pinned to the viewport bottom. Transparent → opaque
     black with a 4-stop eased ramp so the fade is soft at the top and solid
     at the bottom. IntersectionObserver at end-of-body toggles .is-hidden
     when the footer enters an extended zone (rootMargin 400px) so the
     footer itself is never hidden behind the gradient. pointer-events:none
     so it doesn't block clicks. z-index:40 sits safely below the custom
     scrollbar rail (9999). Ported from the landing page verbatim — keep in
     sync across all pages. */
  .bottom-shade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 400px;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)    0%,
      rgba(0, 0, 0, 0.35) 35%,
      rgba(0, 0, 0, 0.75) 65%,
      rgba(0, 0, 0, 1)    100%
    );
    opacity: 1;
    transition: opacity 0.35s ease;
    will-change: opacity;
  }
  .bottom-shade.is-hidden { opacity: 0; }
  @media (max-width: 720px) {
    .bottom-shade { height: 260px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bottom-shade { transition: none; }
  }

  /* ============ v17: iOS / mobile dynamic-toolbar fix ============
     `position:fixed; bottom:0` anchors to the SMALL viewport on mobile
     browsers with a collapsing URL bar (iOS Safari, Android Chrome).
     When the bar is visible the element's bottom edge sits at the top
     of the bar; when the bar collapses during scroll, the visual
     viewport grows downward and the gradient ends short of the true
     screen bottom, leaving a visible empty strip. When scrolling
     pauses, the bar expands again and covers that strip — the seam
     users see between the gradient and the menubar.

     Fix: extend the element below the small-viewport bottom by the
     delta (100lvh − 100svh) = toolbar height, which is a STATIC
     constant (svh/lvh don't change with scroll state — that's dvh).
     The element's bottom edge now always sits behind the toolbar's
     footprint. When the toolbar is visible the extension is hidden
     under it; when it collapses, the extension fills the revealed
     strip with solid black — no seam in either state.

     Pixel-based gradient stops keep the fade identical to the
     percentage version in the first 400px/260px; the grown height
     (= toolbar delta) is pure solid black below the last stop.

     @supports fallback preserves existing behavior on browsers without
     svh/lvh (iOS <15.4, Android pre-Chrome 108 ≈ late 2022). Kept in
     sync with index.html — see the landing-page block for the canonical
     version. */
  @supports (height: 100svh) and (height: 100lvh) {
    .bottom-shade {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0)    0px,
        rgba(0, 0, 0, 0.35) 140px,
        rgba(0, 0, 0, 0.75) 260px,
        rgba(0, 0, 0, 1)    400px
      );
      bottom: calc(100svh - 100lvh);            /* ≤ 0, pushes below */
      height: calc(400px + 100lvh - 100svh);    /* grow to compensate */
    }
    @media (max-width: 720px) {
      .bottom-shade {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0)    0px,
          rgba(0, 0, 0, 0.35) 91px,
          rgba(0, 0, 0, 0.75) 169px,
          rgba(0, 0, 0, 1)    260px
        );
        height: calc(260px + 100lvh - 100svh);
      }
    }
  }