/* 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 {
  z-index: var(--z-header);
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.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);
}

/* --------------------------------------------------------------------------
   BRIEF OVERRIDE — MegaGlitch Computer Repair, brief §5.7. Both bars sticky,
   house-shape precedent (shedhorn-plumbing-helena-mt): the brief's first-
   screen arithmetic (96px stated / 96.2px measured sticky-chrome, §4.1) only
   holds if the expiry bar AND the site header are both position:sticky,
   stacked. site.css's own `.site-header` already ships
   `position:sticky; inset-block-start:0` as its permanent, sold-site
   behaviour; this file — preview-only, deleted at purchase — adds the
   offset that makes room for the bar above it while the bar exists.
   -------------------------------------------------------------------------- */

.expiry {
  position: sticky;
  inset-block-start: 0;
}

.site-header {
  inset-block-start: var(--expiry-height);
}