/* Shared across every page of howitwent.app.

   **Only what all pages agree on lives here.** A rule that two pages share and
   a third contradicts belongs in that page's own <style> block: this file
   existing does not make it the place to put CSS, it makes it the place to put
   CSS whose *drifting* would be a defect.

   What was drifting, and why this file exists: the palette below was written
   out twice, on the marketing page and on the policy page, with a comment in
   one of them asserting the other held the same values. Nothing checked that.
   The colors come from packages/story_render/lib/src/render/brand.dart and
   change when the film's do, so two hand-kept copies is one page quietly
   disagreeing with the product it is selling. That half is generated now —
   `dart tool/gen_site_palette.dart`, and `--check` fails if it is stale.

   Deliberately *not* here: `* { box-sizing: border-box }`. The marketing page
   sets it and the policy page does not, and that is load-bearing rather than an
   oversight — the policy page's body carries `max-width: 38rem` with 1.25rem of
   side padding, so border-box would pull 2.5rem out of a page of terms. A
   shared reset that narrows a page of terms is exactly the silent change this
   file is supposed to prevent.

   **Served out of site/public/, not imported through the bundler.** Astro
   minifies a stylesheet it bundles and gives it a hashed name. Minifying would
   take every line of reasoning above out of the file, and the hashed name would
   mean the generated icon and this sheet stop being addressable at a stable
   path — which `icon_parity_test.dart` and the CSP both depend on. public/ is
   copied to the output untouched, which is what this file needs. */

/* BEGIN generated from brand.dart */
/* Written by tool/gen_site_palette.dart from
   packages/story_render/lib/src/render/brand.dart at c0150668.
   Do not edit between these markers — the next run overwrites it. The tokens
   outside them are the site's own and are hand-written on purpose.

   Two of these are deliberately not the obvious ones. Links and buttons take
   `Brand.orangeChrome` rather than the route orange, because the route orange
   is 2.67:1 as small type on paper and the chrome cut measures 5.62:1 on the
   same ground at the same hue. The route orange appears only as drawn line —
   the rule under the wordmark, and the icon. And the ink is never black and the
   paper never white, the same rule the film holds to. */
:root {
  --bg: #EAE6DC;
  --ink: #16232B;
  --rule: rgba(22, 35, 43, .14);
  --accent: #9A3B02;
  --route: #F25C05;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A2130;
    --ink: #EAE6DC;
    --rule: rgba(234, 230, 220, .16);
    --accent: #FFB454;
  }
}
/* END generated from brand.dart */

/* The site's own tokens. Nothing upstream declares these, so there is nothing
   for them to drift from and they are hand-written on purpose — see the note in
   tool/gen_site_palette.dart about why generating them would invert the point
   of the generator. */
:root {
  --muted: #5C6670;
  --card: rgba(255, 255, 255, .45);
  --keyline: #C9C4B8;

  /* A system stack, and no webfont — not even the Inter the app is set in. A
     site whose privacy policy fetches a font from a CDN discloses its readers
     to that CDN, which is a poor way to open a page about disclosing nothing.
     Held as a variable so a page that overrides its size does not have to
     restate the family to do it. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --muted: #9AA4B2;
    --card: rgba(255, 255, 255, .05);
    --keyline: rgba(255, 255, 255, .22);
  }
}

/* ---------------------------------------------------------------------------
   The shared components' own styles.

   **A component that does not carry its styles is not shared, it is borrowed.**
   `src/components/StoreBadges.astro` and `FooterRow.astro` emit `.cta`,
   `.badge`, `.note` and `.row`; while those rules lived in the marketing page's
   <style> block, putting either component on any other page rendered it
   unstyled — and on the beta page, which defines `.badge` and `.note`
   differently for its cards, it would have rendered *wrongly*, which is the
   harder one to notice. Nothing on the site did that yet. The help pages are
   exactly when somebody would have.

   **The badge tokens below were already two hand-kept copies**, in the
   marketing page's `.cta` and the beta page's `.platform`, with the same four
   measured numbers written out twice. That is the test this file is governed
   by: a rule whose *drifting apart* is the defect belongs here. The palette was
   the first thing to fail it and these were the second.

   A page may still override any of this — the beta page's `.badge` places the
   same artwork inside a card, and the two footers keep their own gaps. What it
   may not do is be the only place a shared component's geometry exists.
   --------------------------------------------------------------------------- */

/* **Two licensed badges, one height, and the Play badge sets it.** Neither
   piece of artwork can be restyled, so the App Store badge is sized to the
   Play badge's visible height rather than either being cut to the other.
   Every number here is measured off assets/google-play-badge.png rather
   than chosen: the asset is 646x250, the visible badge is 564x168 at
   offset (41,41), and its corner arc reaches the flat edge 20 units down.
   Re-measure all four if the badge is ever re-downloaded — Google has changed
   the artwork before. */
:root {
  --badge-h: 66px;                              /* the asset's rendered height */
  --act-h: calc(var(--badge-h) * 168 / 250);    /* 44.35px — the visible badge */
  --act-r: calc(var(--act-h) * 20 / 168);       /* 5.3px — the badge's own corner */
  --act-inset: calc(var(--badge-h) * 41 / 250); /* 10.8px — the clear space */
}

.cta {
  display: flex;
  align-items: center;
  /* **This gap is load-bearing and has a floor.** The rule below pulls the
     Play badge's box in to its visible ink, which takes the asset's built-in
     clear space out of the layout — so this gap is now the only thing
     providing it, and Apple's SVG never had any to begin with. Both
     guidelines require a quarter of the badge's height, 11px at 44px, and
     1rem clears that. Do not reduce it below 0.7rem. */
  gap: 1rem;
  flex-wrap: wrap;
}

/* **Google's badge, unmodified, and the sizing is theirs rather than ours.**
   assets/google-play-badge.png is the file Play serves, 646x250 — of which
   the visible badge is 564x168 and the rest is the one-quarter-of-height
   clear space the brand guidelines require. So the margin around it is
   inside the asset: never crop it, never recolor it, and never set a
   background behind it. The rendered height is 66px because that puts the
   *visible* badge at 44px — the guidelines' floor is 28px, and the number
   that has to clear it is not the one written here. Cropping the asset to
   make the gap look tighter is the one change that breaks the license. */
/* **The negative margin is alignment, not cropping — the pixels are
   untouched.** The asset carries its clear space as transparency inside the
   file, so laid out honestly the visible badge sits 10.8px right of and
   below everything else in the column, which is what made this row look
   scrappy: the badge appeared indented from the button under it and from
   the paragraph above. Pulling the *box* in to the ink lines all three
   actions up on one left edge and makes the badge 44px tall like them,
   while the artwork itself is still the file Google serves, uncropped,
   unrecolored, on no background. The clear space is now provided by
   .cta's gap — see the floor noted there. */
.badge img { display: block; width: auto; }
.badge.play { margin: calc(-1 * var(--act-inset)); }
.badge.play img { height: var(--badge-h); }

/* **Apple's badges, unmodified, and they carry no clear space of their
   own.** assets/app-store-badge.svg and assets/mac-app-store-badge.svg are
   what Apple's marketing tools serve for the English black badges: 40-unit
   viewBoxes (119.66 and 156.10 wide) whose edge is the gray keyline, so
   the visible badge *is* the file and each takes the Play badge's visible
   44px directly, with no inset to pull in. The guidelines' floor on screen
   is 40px; the clear space they ask for is a quarter of the height, which
   .cta's gap provides exactly as it does for Google's.

   **Two Apple badges because iPhone and Mac are two stores, and the App
   Store one goes first because the guidelines say so.** They are one
   record and one product page — the Mac link is the same URL with
   `?platform=mac`, which selects the Mac tab — but a Mac user scanning for
   a badge should find one rather than a clause in the note.

   **Black, not white, and that is the guidelines' call rather than ours:**
   the black badge is the one to use when another platform's badge is in
   the layout. The keyline is part of the artwork and is what keeps it
   legible on the dark palette — nothing here adds a border or a background.

   **The two corners differ, and are left differing.** Apple's is 0.21 of
   its height, Google's 0.12. They are two brands' shapes, neither file may
   be edited, and a row of two licensed badges reads as exactly that. The
   previous row had a hand-styled button between them cut to Google's
   corner, and that was the item that looked out of place — not the
   badges. */
.badge.app-store img { height: var(--act-h); }

/* Its own line, always. A note that can share the row wraps into whatever
   gap is left over and reads as a caption on whichever badge it happened
   to land next to — and it qualifies both. The "Say hello" mailto lives
   in this line as running text: with two licensed badges in the row, a
   third hand-styled block beside them read as two things and a stray, and
   the footer carries the address in full for anyone who scrolls past. */
.cta .note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: .95rem;
}

/* The footer link row, as FooterRow.astro emits it. Only the shape is here;
   each page sets its own gap, because the marketing page's footer has room to
   breathe and the beta page's is a tight line under a column of terms. */
footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ---------------------------------------------------------------------------
   SiteHeader.astro — the icon, the name as type, and the site's two other
   sections.

   **`.home` was written out twice before this**, in beta.astro's and
   Help.astro's own <style> blocks, with the same tile size, the same radius and
   the same keyline in both. That is the test this file is governed by: a rule
   whose *drifting apart* is the defect belongs here. It was the palette first,
   the badge measurements second, and this third.

   The tile is the generated assets/icon.svg — the file the favicon and the
   marketing page's hero both point at — so nothing here holds a copy of the
   mark. The rounding and the keyline are the span's, because the asset is the
   full-bleed square that iOS and the web mask themselves.
   --------------------------------------------------------------------------- */
.sitehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.home {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.home .tile {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 22%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--keyline), 0 2px 7px rgba(22, 35, 43, .20);
}
.home .tile img { display: block; width: 100%; height: 100%; }

/* **The marketing page draws the tile alone, and it is not a link.** Its hero
   is the full lockup at 2 cap, so the name would be the same words twice at two
   sizes thirty pixels apart; and a link here would point at the page the reader
   is already on. `design/landing-header.html` is the sheet this was picked off,
   and the variant it replaced had no mark at all — which left the two links
   floating with nothing on the page's left edge to hold them.

   Slightly smaller than the tile beside a name, because here it is standing on
   its own rather than sitting against a cap height. */
.home.mark-only { cursor: default; }
.home.mark-only .tile { width: 30px; height: 30px; }

.sitenav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: .9375rem;
}
/* **The section you are in is a span, not a link**, and it is drawn as the
   emphasized item rather than the dimmed one. A nav that dims where you are
   reads as "this one is unavailable"; weight reads as "this one is you". */
.sitenav a { color: var(--muted); text-decoration: none; }
.sitenav a:hover { color: var(--accent); text-decoration: underline; }
.sitenav [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* On <html> as well as on <body>, so the overscroll area past the end of a
   short page is paper rather than the browser's white. */
html { background: var(--bg); }

a { color: var(--accent); }