@import url("tokens.css");
@import url("shell.css");

/* ============================================================================
   Native Apps Team — legal.css
   Document-page styles: terms.html, privacy.html, ai-disclosure.html, and the
   base layer for download.html (whose own components live in its <style>).

   THE SHELL IS NOT HERE. Reset, base type, .wrap, the skip link, the sticky
   nav, .pill and the footer live in assets/shell.css and are shared with the
   homepage through assets/site.css. Never re-declare any of them in this
   file — the two stylesheets must stay one shell.
   (Both @import rules must remain above every other rule here.)

   The `<div class="container">` region of each legal page is FROZEN v3.0
   compliance copy. Style it from here; never edit the markup.

   Sections
     1  Additive vars
     2  Document base
     3  Page masthead (doc-head, doc-tabs)
     4  Document body (frozen .container)
     5  Frozen body components (doc-meta, summary, callout, data-table)
     6  Download-page hooks
     7  Print
   ========================================================================= */


/* ── 1. Additive vars ──────────────────────────────────────────────────────
   --bar-h, --accent, --dur-fast come from shell.css. */
:root{
  /* One measure shared by the masthead and the body, so their left edges
     line up at every width instead of the title starting at the page gutter
     and the prose starting 170px further in. ~70 characters at 17px. */
  --doc-measure:36rem;

  /* A legal masthead does not need a 60px marketing headline; --t-h2 tops out
     at 3.75rem, which is four lines of "Terms of Service & End-User Licence
     Agreement" inside the measure above. */
  --t-doc-title:clamp(1.875rem, 1.35rem + 2.2vw, 2.5rem);
}


/* ── 2. Document base ──────────────────────────────────────────────────── */
.legal,.dl-page{ line-height:1.6 }

/* --accent is the only brand colour with AA contrast in both schemes.
   --cobalt is 5.9:1 on white but only 3.55:1 on black, so prose links used to
   fail AA on every legal page in dark mode. Scoped to prose on purpose: a
   bare `a` rule here would out-cascade the shell's nav and footer colours. */
.legal .container a,
.dl-page main a:not(.badge-wrap){
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
@media (hover:hover){
  .legal .container a:hover,
  .dl-page main a:not(.badge-wrap):hover{ text-decoration-thickness:2px }
}

/* A soft Aurora wash at the top of the page, the same gesture as the
   homepage hero, so a document page reads as the same product. Decorative,
   never intercepts a click, and clipped horizontally so it cannot widen the
   page at 320px. */
.legal main,.dl-page main{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
}
.legal main::before,.dl-page main::before{
  content:"";
  position:absolute; inset:0 0 auto; z-index:-1;
  height:min(460px, 52svh);
  pointer-events:none;
  opacity:.20;
  background:
    radial-gradient(50% 62% at 18% 18%, var(--cobalt), transparent 70%),
    radial-gradient(44% 58% at 72% 8%, var(--violet), transparent 72%),
    radial-gradient(40% 52% at 96% 34%, var(--mint), transparent 72%);
  filter:blur(50px);
  /* Masked in from the top edge so overflow-x:clip cannot leave a hard
     horizontal seam directly under the sticky nav. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%, #000 64%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 26%, #000 64%, transparent 100%);
}
@media (prefers-color-scheme:dark){
  .legal main::before,.dl-page main::before{ opacity:.34 }
}

/* Document pages end on prose, so they owe the footer the whitespace that a
   full-bleed homepage band would otherwise supply. The specificity here is
   deliberately (0,1,1) so it beats download.html's own `.dl` shorthand. */
.legal main,.dl-page main{ padding-bottom:var(--s-5) }


/* ── 3. Page masthead ──────────────────────────────────────────────────── */
.legal .doc-head,
.legal .container{
  width:100%;
  max-width:calc(var(--doc-measure) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}
.legal .doc-head{ padding-block:var(--s-4) var(--s-2) }

.legal .doc-eyebrow{
  margin:0 0 .55rem;
  font-size:var(--t-cap);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);      /* matches .eyebrow on the homepage */
}
.legal .doc-title{
  margin:0;
  font-size:var(--t-doc-title);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.legal .doc-sub{
  margin:.7rem 0 0;
  max-width:52ch;
  color:var(--ink-2);
  font-size:var(--t-lead);
  line-height:1.45;
  letter-spacing:-.014em;
}

.doc-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:var(--s-3);
}
.doc-tabs a{
  display:inline-flex; align-items:center;
  min-height:44px;                       /* was 34px: below the tap minimum */
  padding-inline:.95rem;
  font-size:var(--t-cap);
  font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  border:1px solid var(--hair);
  border-radius:999px;
  white-space:nowrap;
  transition:color var(--dur-fast) linear, border-color var(--dur-fast) linear,
             background var(--dur-fast) linear;
}
@media (hover:hover){
  .doc-tabs a:hover{ color:var(--ink); border-color:var(--ink-2) }
}
/* The active chip is the shell's pill, so the document nav and the site nav
   share one shape. */
.doc-tabs a[aria-current="page"]{
  color:var(--paper);
  background:var(--ink);
  border-color:var(--ink);
  font-weight:600;
}


/* ── 4. Document body — frozen `<div class="container">` ───────────────── */
.legal .container{
  padding-block:var(--s-2) var(--s-4);
  font-size:clamp(1rem,.96rem + .22vw,1.0625rem);
  line-height:1.68;
}
.legal .container > h2{
  margin:var(--s-4) 0 .6rem;
  padding-top:var(--s-2);
  border-top:1px solid var(--hair);
  font-size:clamp(1.25rem,1.13rem + .5vw,1.5rem);
  font-weight:700;
  letter-spacing:-.02em;
}
.legal .container > h2:first-of-type{ margin-top:var(--s-3) }
.legal .container > h3{
  margin:var(--s-3) 0 .5rem;
  font-size:clamp(1.05rem,1rem + .28vw,1.1875rem);
  font-weight:650;
  color:var(--ink);
}
.legal .container p{ margin:0 0 1.05em }
/* shell.css resets every list; prose lists need their markers back. */
.legal .container ul{
  list-style:disc;
  margin:0 0 1.15em;
  padding-left:1.35em;
}
.legal .container li{ margin-bottom:.5em }
.legal .container li::marker{ color:var(--ink-2) }
.legal .container strong{ font-weight:650 }
.legal .container code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:.1em .35em;
}


/* ── 5. Frozen body components ─────────────────────────────────────────── */
.legal .doc-meta{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  padding:var(--s-2);
  margin-bottom:var(--s-3);
  font-size:.9375rem;
  line-height:1.75;
  color:var(--ink-2);
}
.legal .doc-meta strong{ color:var(--ink) }

.legal .summary{
  position:relative;
  margin:0 0 var(--s-2);
  padding:var(--s-2) var(--s-2) var(--s-2) calc(var(--s-2) + 6px);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.legal .summary::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--aurora);
}
.legal .callout{
  margin:0 0 var(--s-2);
  padding:var(--s-2);
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-left:3px solid var(--ink-3);
  border-radius:var(--radius-sm);
  font-size:.96875rem;
}
.legal .callout:last-child{ margin-top:var(--s-3) }

/* Frozen `<table class="data-table">` in privacy.html — three prose columns.
   It fits the measure from ~480px up; below that it scrolls horizontally
   inside its own box rather than widening the page. The four background
   layers are the scroll-shadow trick: the two `local` layers scroll with the
   content and mask the two `scroll` shadows away at each end, so the shadow
   only shows on the side that still has content off-screen. */
.legal .data-table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 var(--s-2);
  font-size:.9375rem;
  line-height:1.5;
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--paper) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right / 12px 100% no-repeat scroll;
}
.legal .data-table th,
.legal .data-table td{
  border:1px solid var(--hair);
  padding:.6rem .7rem;
  text-align:left;
  vertical-align:top;
  min-width:9rem;
}
.legal .data-table th{
  background:var(--paper-2);
  font-weight:650;
  color:var(--ink);
}
@media (max-width:30rem){
  /* 3 x 7.5rem = 360px: still a scroller at 320px, but a much shorter one. */
  .legal .data-table th,
  .legal .data-table td{ min-width:7.5rem; padding:.5rem .55rem }
}


/* ── 6. Download-page hooks ────────────────────────────────────────────────
   download.html carries its own component styles inline. Only cross-page
   corrections belong here. */
.dl-page .dl-kicker,
.dl-page .dl-nosignup{
  /* --ink-3 is 3.6:1 on white — a decorative-mark colour, not a text colour. */
  color:var(--ink-2);
}

/* Landscape phone (~360px tall): a 104px app icon plus a 45px title pushed
   the App Store badge to y=480, well below the fold. Two selectors' worth of
   specificity so these beat download.html's own inline component styles. */
@media (max-height:34rem){
  .dl-page .dl{ padding-top:var(--s-2) }
  .dl-page .dl-icon{ width:64px; height:64px; margin-bottom:var(--s-1) }
  .dl-page .dl-name{ font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem) }
  .dl-page .dl-lede{ font-size:var(--t-body); margin-top:var(--s-1) }
  .dl-page .dl-cta{ margin-top:var(--s-2) }
  .dl-page main{ padding-bottom:var(--s-4) }
}


/* ── 7. Print ──────────────────────────────────────────────────────────── */
@media print{
  .doc-tabs{ display:none!important }
  .legal main::before,.dl-page main::before{ display:none!important }
  .legal main,.dl-page main{ padding-bottom:0 }
  body{ font-size:10.5pt }
  .legal .doc-head,
  .legal .container{ max-width:none; padding-inline:0 }
  .legal .container{ line-height:1.5 }
  .legal .summary,.legal .callout,.legal .doc-meta{
    box-shadow:none; border:1px solid #bbb; break-inside:avoid;
  }
  .legal .container > h2{ break-after:avoid }
  .legal .data-table{ display:table; background:none; break-inside:auto }
  .legal .data-table tr{ break-inside:avoid }
}