/* ============================================================================
   Native Apps Team — shell.css
   THE SINGLE SITE SHELL. Reset/base + skip link + sticky nav + pills + footer.

   Imported by BOTH assets/site.css and assets/legal.css, immediately after
   assets/tokens.css. Nothing page-specific belongs here: if a rule is only
   ever true for the homepage it lives in site.css, and if it is only ever
   true for a document page it lives in legal.css.

   The <header> and <footer> markup is byte-identical on all five pages
   (index, download, terms, privacy, ai-disclosure) apart from aria-current.
   If you change a class name here, change it on all five.

   Sections
     1  Additive vars      5  Sticky nav
     2  Reset & base       6  Pills
     3  Layout primitive   7  Footer
     4  Skip link          8  Print
   ========================================================================= */


/* ── 1. Additive vars ──────────────────────────────────────────────────────
   Derived values only. Token names from tokens.css are never redefined. */
:root{
  /* Tell the UA both schemes are handled, so form controls, scrollbars and
     the canvas colour follow the theme instead of staying light. */
  color-scheme: light dark;

  /* The bar is --nav-h plus enough room to hold a 44px tap target. Every
     sticky offset (scroll-padding, :target, skip link, pin) derives from it. */
  --bar-h: calc(var(--nav-h) + 8px);

  /* Accent — an AA-contrast member of the Aurora ramp. Raw --violet is only
     4.0:1 on white and raw --cobalt is 3.55:1 on black, so neither is safe
     for text. This is the only brand colour that may carry type. */
  --accent:#3F2FD1;

  --dur-fast:200ms;
  --ease-quint:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
  :root{ --accent:#A99BF5 }    /* 8.7:1 on #000 */
}


/* ── 2. Reset & base ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
*{ margin:0 }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + var(--s-2));
}

body{
  min-height:100svh;                 /* svh, never vh */
  /* clip, never hidden — overflow:hidden on an ancestor silently kills every
     descendant position:sticky, including this nav and the pinned chapter. */
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:var(--t-body);
  line-height:1.55;
  letter-spacing:-.011em;
  /* A long email address or URL must never push the page sideways at 320px. */
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}

img,svg,video{ display:block; max-width:100% }
img{ border-style:none }
a{ color:inherit }
/* Global list reset. Document prose re-enables markers — see legal.css. */
ul,ol{ list-style:none; padding:0 }
button{ font:inherit; color:inherit }

h1,h2,h3{ font-weight:600; text-wrap:balance }
p,li{ text-wrap:pretty }

/* Anchors must clear the sticky bar. */
[id]{ scroll-margin-top:calc(var(--bar-h) + var(--s-2)) }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
:focus:not(:focus-visible){ outline:none }

::selection{ background:color-mix(in oklab, var(--accent) 26%, transparent) }

.vh{
  position:absolute!important; width:1px; height:1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* One motion policy for the whole site. Everything decorative is additionally
   gated on (prefers-reduced-motion:no-preference) at its own definition; this
   is the belt to that pair of braces. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ── 3. Layout primitive ───────────────────────────────────────────────────
   One measure for nav, main and footer, so the three are optically aligned
   at every width. max-width carries the gutters so the *content* box lands
   on exactly --wrap on a wide screen. */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}


/* ── 4. Skip link ──────────────────────────────────────────────────────── */
.skip{
  position:absolute;
  left:max(var(--s-2), env(safe-area-inset-left));
  top:-100%;
  z-index:200;
  display:inline-flex; align-items:center;
  min-height:44px; padding:.5rem 1.1rem;
  background:var(--card); color:var(--ink);
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  font-weight:600; text-decoration:none;
}
.skip:focus{ top:calc(var(--bar-h) + .5rem) }


/* ── 5. Sticky nav ─────────────────────────────────────────────────────────
   1px sentinel instead of a scroll listener: site.js toggles .is-stuck when
   it leaves the viewport, so the hairline only appears once you have scrolled
   past the top. With site.js absent the bar is simply always borderless. */
.nav-sentinel{ position:absolute; top:0; left:0; width:100%; height:1px }

.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) linear, background var(--dur-fast) linear;
}
/* Apple's recipe: more transparent, but only where blur can carry it, and
   only where color-mix() actually resolves — the @supports tests BOTH,
   because a browser with backdrop-filter but no color-mix would otherwise
   compute the background to transparent and lose the bar entirely. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)))
      and (background:color-mix(in srgb, red 50%, transparent)){
  .nav{
    background:color-mix(in srgb, var(--paper) 72%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
            backdrop-filter:saturate(180%) blur(20px);
  }
}
.nav.is-stuck{ border-bottom-color:var(--hair) }

.nav__in{
  min-height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2);
}

.nav__brand{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px;
  flex:0 0 auto;
  color:var(--ink); text-decoration:none;
  font-weight:600; font-size:.9375rem; letter-spacing:-.02em;
  white-space:nowrap;
}
/* logo-na.svg is 158×61 (2.59:1) — measured from the original avatar.
   width:auto so a future logo swap cannot get squashed. */
.nav__brand img{ height:28px; width:auto }

.nav__links{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap:.25rem;
  min-width:0;
}
.nav__links a{
  display:inline-flex; align-items:center;
  min-height:44px;                 /* the bar is 60px; the target is 44px */
  padding-inline:.7rem;
  border-radius:999px;
  color:var(--ink-2);
  font-size:.875rem; font-weight:500;
  text-decoration:none; white-space:nowrap;
  transition:color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.nav__links a[aria-current="page"]:not(.pill){ color:var(--ink); font-weight:600 }
@media (hover:hover){
  .nav__links a:hover{
    color:var(--ink);
    background:color-mix(in srgb, var(--ink) 6%, transparent);
  }
}
/* Two classes, so this beats `.nav__links a` and the pill keeps its own
   foreground. Without it the Download pill renders --ink-2 on --ink (2.6:1). */
.nav__links a.pill{ margin-left:.35rem; color:var(--paper) }
@media (hover:hover){ .nav__links a.pill:hover{ background:var(--ink) } }

/* Graceful collapse — no hamburger, no JS.
   ≤30rem  the wordmark goes; the logo alone still names the site (the
           accessible name lives on the <a>, not on the img).
   ≤24rem  everything tightens. Measured at 320px: 48 logo + 16 gap + 206
           links = 270 inside a 288px content box. Nothing is ever removed,
           so "Apps" and "Support" stay reachable on the smallest phone. */
@media (max-width:30rem){ .nav__wordmark{ display:none } }
@media (max-width:24rem){
  .nav__brand img{ height:24px; width:auto }
  .nav__links{ gap:0 }
  .nav__links a{ padding-inline:.45rem; font-size:.8125rem }
  .nav__links a.pill{ margin-left:.25rem; padding-inline:.9rem; font-size:.875rem }
}


/* ── 6. Pills ──────────────────────────────────────────────────────────────
   The site's only button primitive. The App Store badge is NOT a pill and is
   never restyled — see the compliance note in site.css. */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.6rem 1.15rem;
  border:1px solid transparent; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:opacity var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
@media (hover:hover){ .pill:hover{ opacity:.86 } }
@media (prefers-reduced-motion:no-preference){
  .pill:active{ scale:.975; transition-duration:60ms }
}
.pill--ghost{ background:transparent; color:var(--ink); border-color:var(--hair) }
@media (hover:hover){
  .pill--ghost:hover{
    opacity:1;
    background:color-mix(in srgb, var(--ink) 6%, transparent);
  }
}
.pill--lg{ min-height:52px; padding:.85rem 1.5rem; font-size:1.0625rem }


/* ── 7. Footer ─────────────────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--hair);
  background:var(--paper-2);
  padding-block:var(--s-4);
  padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom));
}
.footer__top{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between;
  gap:var(--s-1) var(--s-3);
}
.footer__brand{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px;
  color:var(--ink); text-decoration:none;
  font-weight:600; letter-spacing:-.02em;
}
.footer__brand img{ height:28px; width:auto }
.footer__tag{
  display:block;
  font-weight:400; letter-spacing:0;
  font-size:var(--t-cap); color:var(--ink-2);
}
.footer__top-link{
  display:inline-flex; align-items:center;
  min-height:44px; padding-inline:1rem;
  border:1px solid var(--hair); border-radius:999px;
  font-size:var(--t-cap); color:var(--ink-2); text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
@media (hover:hover){
  .footer__top-link:hover{ color:var(--ink); border-color:var(--ink-2) }
}

.footer__links{
  display:flex; flex-wrap:wrap;
  gap:0 1.25rem;
  margin-top:var(--s-1);
}
.footer__links a{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:.9375rem; color:var(--ink-2); text-decoration:none;
  transition:color var(--dur-fast) linear;
}
@media (hover:hover){
  .footer__links a:hover{ color:var(--ink); text-decoration:underline }
}

.footer__rule{
  height:1px; border:0; background:var(--hair);
  margin-block:var(--s-2);
}
.footer__legal{ display:grid; gap:.5rem }
.footer__legal p{
  font-size:var(--t-cap); line-height:1.5; letter-spacing:0;
  color:var(--ink-2);                 /* --ink-3 is 3.6:1 on white: not text */
  max-width:78ch;
}


/* ── 8. Print ──────────────────────────────────────────────────────────── */
@media print{
  .skip,.nav,.nav-sentinel,
  .footer__links,.footer__top-link{ display:none!important }
  body{ background:#fff; color:#000; overflow-x:visible }
  .footer{ background:none; border-top:1px solid #bbb }
  a{ color:#000; text-decoration:underline }
}