/* preview.css: PREVIEW-ONLY chrome (expiry bar); deleted at purchase (spec §2, §5, §7; ad-ruling--bar-in-skeleton §2.4).
   At purchase delete: this file, its <link>, the @preview:expiry block, buy.html, initExpiry() and its call (README checklist;
   head-audit `state/expiry` BLOCKERs a sold site that keeps any). Excluded from the CSS caps by name (lib/site.mjs, spec §7).
   FENCE: only tokens.css-guaranteed tokens plus --expiry-height; no new colour, radius, shadow, motion value or breakpoint.
   A brief may override in the site's own copy (chrome colour; sticky stacking). 
   Full rationale: skeleton/SKELETON.md, "CSS comment rationale". */

:root {
  /* Preview-only token (must not live in tokens.css); = --layout-tap-min, not a literal (spec §3, §8). */
  --expiry-height: var(--layout-tap-min);
}

/* House default: static flow, first in <body>, above the header; NOT sticky (design-rules §5, §7.1).
   Sticky is the brief's call: it re-derives its first screen with the stack, and both bars are `sticky`, never `fixed`.
   Ground: --color-ink with --color-bg as ink (the AA-measured body pair inverted); never --color-accent. */
.expiry {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--color-ink);
  color: var(--color-bg);
}

/* QA round-2 FIX (layout/sticky-header): brief §5.3/§11 measures the hero's
   first-screen arithmetic against the real 101px sticky-chrome stack
   (44 expiry + 56 header + 1 border), not the 44px placeholder the tile's
   `measure` block used. This brief's call to make the stack sticky, per the
   skeleton's own documented override (SKELETON.md "Before `.expiry {`"),
   paired with `.expiry`'s own sticky rule above. Loads last, so this wins
   over css/site.css's `position: relative` default without `!important`. */
.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
}

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

/* One line, never two: copy is written to a 320px width budget; the button label yields first (design-rules §5). */
.expiry__text {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-snug);
}

/* Buy control: .btn geometry; ink/bg pair inverted, so AA by construction. */
.btn--buy {
  flex: 0 0 auto;
  padding-inline: var(--space-sm);
  background-color: var(--color-bg);
  color: var(--color-ink);
}

/* THE ONLY CONTROL THAT TAKES MONEY has an edge on buy.html: --color-ink border (WCAG 1.4.11). Scoped away from the bar. */
:not(.expiry__inner) > .btn--buy {
  border-color: var(--color-ink);
}

/* Focus ring inset, ink/bg pair: --color-focus is validated only against bg/surface (WCAG 1.4.11). */
.btn--buy:focus-visible {
  outline-color: var(--color-ink);
  outline-offset: calc(var(--space-3xs) * -1);
}

/* No motion in the bar; never data-reveal (design-rules §0). */

/* buy.html rhythm: --space-md, scoped to [aria-labelledby='buy-title'] only. */
[aria-labelledby='buy-title'] .measure > * + * {
  margin-block-start: var(--space-md);
}