/* site/styles.css — the one external stylesheet for the whole site (UI-SPEC CSS delivery
   constraint). Never an inline <style> block, never a style="" attribute, anywhere. Keeping
   every rule here is what lets the CSP ship style-src 'self' with no 'unsafe-inline' and no
   hash-syncing burden.

   Every #RRGGBB literal below is a member of check-site-brand.sh's eight-colour approved
   palette. No colour is derived, mixed or introduced — the guard is a positive membership
   test, so an unvetted value fails regardless of hue. */

:root {
  color-scheme: dark;

  /* Color — copied verbatim from DesignTokens.swift's Palette enum, plus two new text
     colors introduced by this phase for prose legibility. */
  --color-dominant: #0B0B0D;
  --color-secondary: #1C1C1E;
  --color-accent: #0A84FF;
  --color-text: #F2F2F7;
  --color-text-muted: #A9A9B2;

  /* Spacing — the 8-point scale, identical tokens and values to DesignTokens.Spacing. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Type */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --size-body: 17px;
  --size-label: 14px;
  --size-heading: 22px;
  --size-display: 32px;

  /* Layout */
  --content-max-width: 720px;
  --reading-column-width: 65ch;
  /* A rem-based twin of the 65ch reading column, for the landing page only. `ch` resolves
     against each element's OWN font-size, so the 14px .disclaimer and the 16px .body-copy
     computed to different columns (558px vs 607px) and their left edges did not line up.
     41rem is the same 656px box at the root size, independent of the element's own type. */
  --reading-column-max: 41rem;
  /* Showcase-only container. Four 280px bezels plus three --space-xl gutters need ~1216px to
     sit on one row; below this the ladder in .showcase drops to two columns, then one. */
  --showcase-max-width: 1216px;
  --gutter: var(--space-md);
}

@media (min-width: 600px) {
  :root {
    --gutter: var(--space-lg);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-dominant);
  color: var(--color-text);
  font-family: var(--font-system);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shared header / footer shell (byte-identical across all three pages). */

.site-header,
.site-footer {
  background: var(--color-secondary);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.site-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* Pushes the nav to the trailing edge so the bar reads as brand-left / nav-right rather than
   two items abandoned together on the left. Wraps to its own row under ~400px, where
   flex-wrap takes over and the auto margin collapses harmlessly. */
.site-header .site-nav {
  margin-left: auto;
}

/* No colour or text-decoration override here: the brand is a real <a href="/">, and UI-SPEC's
   Focus-Visible & Link Affordances section locks "underline is never removed" as the redundant
   non-colour cue this icon-less site has no substitute for. It inherits the shared `a` rules. */
.site-brand {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-nav a,
.site-footer a {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
}

.copyright {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

/* Links — the site's only two classes of interactive control (internal nav links and the one
   mailto: link on /support). */

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reading column for the generated /privacy content. Classless content constraint: one class
   on the wrapper (.policy), zero classes inside — every rule below is a bare element selector
   scoped under it. */

.policy {
  max-width: var(--reading-column-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

@media (max-width: 599px) {
  .policy {
    max-width: calc(100% - 32px);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

.policy h1 {
  font-size: 2rem; /* 32px / 16px root */
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}

.policy h2 {
  font-size: 1.375rem; /* 22px */
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-lg);
}

.policy p {
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

.policy ul,
.policy ol {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.policy li {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--space-xs);
}

.policy hr {
  border: none;
  border-top: 1px solid var(--color-secondary);
  margin: var(--space-lg) 0;
}

.policy em {
  font-style: italic;
}

.policy strong {
  font-weight: 600;
}

@media print {
  body {
    background: #FFFFFF;
    color: #000000;
  }
  header, footer, nav {
    display: none;
  }
  .policy {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .policy a[href]::after {
    content: " (" attr(href) ")";
    color: #000000;
  }
  .policy hr {
    border-color: #CCCCCC;
  }
}

/* Hand-authored pages (/, /support). Shared content column — .policy (above) overrides this
   with its own narrower 65ch reading column via higher selector specificity. */

main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* The landing page opts out of the shared single column: its showcase needs a wider container
   than its prose does, so `main` stops constraining width and each section below centres its
   own. Scoped to the .landing class so /support keeps the 720px default untouched. */
main.landing {
  max-width: none;
  padding: 0;
}

/* Landing hero (/) */

.hero {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  text-align: center;
}

@media (min-width: 960px) {
  .hero {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
  }
}

/* The one true display element on the site. Fluid between the 32px --size-display floor and
   52px, so the hero has real presence on a laptop without overflowing a 375px phone. */
.hero h1 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--space-sm);
}

/* The subtitle is the paragraph immediately following h1 — scoped this way (rather than a
   dedicated class) so it never fights .store-badge's own rule below for the second <p>.
   Stays Label size per UI-SPEC; the hierarchy comes from the h1 growing, not this shrinking. */
.hero h1 + p {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}

/* Static, non-interactive "Coming to the App Store" badge (D-13). Every rule here is
   load-bearing for "does not read as a broken button" — see UI-SPEC's badge subsection. */
.store-badge {
  display: inline-block;
  background: var(--color-secondary);
  color: var(--color-accent);
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  border-radius: 8px; /* tag-like radius, never a pill */
  padding: var(--space-sm) var(--space-lg);
  margin: 0;
  cursor: default;
}
/* Deliberately no .store-badge:hover rule anywhere in this file — the absence of hover
   feedback is itself the signal that nothing happens on interaction. */

/* Screenshot showcase (/) */

.showcase {
  max-width: var(--showcase-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  justify-items: center;
}

/* Two-up as soon as two bezels fit side by side, four-up only once all four do at their full
   280px width. Skipping a three-column step keeps the grid symmetrical at every size — four
   items never leave an orphan on a second row. */
@media (min-width: 600px) {
  .showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 1080px) {
  .showcase {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  width: 100%;
  max-width: 280px;
}

/* Phone Bezel Geometry (D-12) — transcribed exactly from UI-SPEC, border ring reads as a
   consistent thickness through the corner (outer radius 40px minus 10px border = 30px inner). */
.phone-frame {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  border: 10px solid var(--color-secondary);
  border-radius: 40px;
  background: var(--color-dominant);
  overflow: hidden;
}
.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px; /* outer radius (40px) minus border width (10px) */
}

.shot-caption {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: center;
  text-wrap: balance;
  margin: 0;
}

/* Landing body copy — verbatim App Store description (D-14) */

/* Narrowed from the shared 720px to the same 65ch measure /privacy already uses. At 720px this
   prose ran to ~90 characters a line, well past the 60–75 readable range. */
.body-copy {
  max-width: var(--reading-column-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
}

/* A hairline above each section header does the rhythm work that a background band cannot:
   the approved palette holds only two dark values, and a --color-secondary band would swallow
   both the bezel borders and the store badge, which are drawn in that same colour. */
.body-copy h2 {
  font-size: 1.375rem; /* 22px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em; /* reads as an intentional section header; the source case is kept as-is */
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-secondary);
  /* The rule is pulled out to the column's padding box and the text pushed back in, so every
     horizontal rule on the page (these, and the one above the closing disclaimer, which sits
     on its own padding box) spans the same width and shares one left edge. */
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.body-copy p {
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 var(--space-md);
  /* The intro paragraph quotes a raw export filename (2021-02-18_b~EiQSFWl…jpg) with no space
     in it. Without this it overflows the viewport on a 375px phone. */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* The lead paragraph carries the whole value proposition; sizing it up separates it from the
   explanatory prose beneath without touching a word of D-14's verbatim copy. */
.body-copy > p:first-child {
  font-size: 1.25rem; /* 20px */
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.body-copy ul,
.body-copy ol {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.body-copy li {
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
}

/* Accent markers tie the lists to the one brand colour without adding a decorative element.
   list-style itself is left intact — setting `list-style: none` is what strips list semantics
   from VoiceOver in Safari, and this needs none of that to restyle the marker. */
.body-copy li::marker {
  color: var(--color-accent);
}

/* WHAT IT DOES is eight sibling items of equal weight — a single column of them reads as a
   wall. Two columns halve the scan length once there is room; the ol under HOW TO GET YOUR
   EXPORT is deliberately excluded, since its steps are ordered and must stay a single file. */
@media (min-width: 720px) {
  .body-copy ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
    padding-left: var(--space-lg);
  }
}

/* Non-affiliation disclaimer (all three pages, verbatim, D-15) */

.disclaimer {
  margin: var(--space-xl) 0 var(--space-2xl);
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* On the landing page the disclaimer closes <main> outside any section, so it centres itself
   on the same reading measure the body copy uses and takes a hairline to set it apart. */
main.landing > .disclaimer {
  max-width: var(--reading-column-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
  border-top: 1px solid var(--color-secondary);
}

/* Bare heading/paragraph typography for hand-authored pages (/, /support) — a more specific
   class rule above (e.g. .hero h1, .body-copy p) always wins over these where both apply. */

main > h1 {
  font-size: 2rem; /* 32px */
  font-weight: 600;
  line-height: 1.15;
  margin: var(--space-xl) 0 var(--space-lg);
}

main h2 {
  font-size: 1.375rem; /* 22px */
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-md);
}

main p {
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

/* The one non-nav interactive control on the site: the /support mailto contact link. Matched
   by attribute rather than a new class, so it inherits the shared `a` link rules above (accent
   colour, underline always present) plus a 44px minimum tap target. */
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  overflow-wrap: anywhere;
}

/* Support page FAQ (D-06) */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.faq-item {
  background: var(--color-secondary);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
}

.faq-item h3 {
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--space-sm);
}

.faq-item p {
  margin: 0;
  overflow-wrap: anywhere;
}