/* preview.css — PREVIEW-ONLY CHROME. Nothing in this file is part of Auto
   Evolution's design and nothing in it survives purchase.

   AT PURCHASE, delete: this file, its <link> in index.html / thanks.html /
   buy.html, the .expiry block in all three, buy.html itself, and initExpiry()
   and its call in js/main.js. See README.md.

   It is a separate file for the same reason tweaks.js is a separate file: it
   ships nowhere the buyer keeps, so house-tech-spec §7's 40 KB CSS cap does
   not measure it (§7, as amended — the exclusion is enforced by name in
   scripts/qa/lib/site.mjs, exactly as shippedJsFiles excludes tweaks.js).

   Brief §5.8. Every value here is a token from tokens.css; this file adds one
   token of its own and no literals. */

:root {
  /* The one preview-only token. It cannot live in tokens.css: that is the
     file the buyer inherits, and this value must not survive purchase. It
     resolves to --layout-tap-min rather than restating 44px, because a raw
     size literal outside tokens.css is a house blocker (spec §3) and because
     the bar's height IS the tap minimum — that is where the number comes
     from (brief §5.8). */
  --expiry-height: var(--layout-tap-min);
}

/* Bar 1 of 2. Sticky at 0; the site header sticks beneath it. The ground is
   --color-band so the strip reads as chrome above a chalk page and never as
   one of the page's own sections (brief §5.5, as amended). */
.expiry {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--color-band);
  color: var(--color-band-ink);
}

.expiry__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--expiry-height);
}

/* One line, never two. The header's sticky offset is a fixed token, so a bar
   that wrapped would let the page slide under the header (brief §5.8). */
.expiry__text {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-snug);
}

/* Buy Now. Geometry, tap target and transition are .btn's; only the colour
   pair and the side padding change. Clay on band = 8.63:1 (brief §4 F12). */
.btn--buy {
  flex: 0 0 auto;
  padding-inline: var(--space-sm);
  background-color: var(--color-clay);
  color: var(--color-band);
}

.btn--buy:hover {
  background-color: var(--color-band-ink);
}

/* Both stock focus rings fail here. --color-focus is 1.36:1 on this ground
   (brief §4 N3); a clay ring offset outward lands on the chalk header below
   at 1.58:1 (F11). The ring goes INSIDE the button: 8.63:1 (F12/N7). */
.btn--buy:focus-visible {
  outline-color: var(--color-band);
  outline-offset: calc(var(--space-3xs) * -1);
}

/* Bar 2 of 2 sticks beneath bar 1, and in-page anchors clear both. These are
   overrides of site.css, which this file must never require an edit to. */
.site-header {
  inset-block-start: var(--expiry-height);
}

section[id] {
  scroll-margin-block-start: calc(var(--expiry-height) + var(--bar-height));
}