/* The online read-only banner (07_DEPLOYMENT_AND_OPS.md §4.1).
 *
 * Cloudflare-only: the local host never serves this file, and `src/public/**`
 * has no idea it exists. Injected into every HTML response by the Worker.
 *
 * Design tokens only, never raw hex (guardrail 10) — so it inherits sun mode,
 * night mode and the burn's automatic switch for free. `--soon` is the token
 * pair the design already uses for "heads up, not an error": amber on warm
 * cream by day, warm gold on near-black at 3am. */

.cf-banner {
  display: block;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--soon-bg);
  color: var(--ink);
  border-bottom: 2px solid var(--soon);
  font-family: var(--font-ui);
  /* Never smaller than body text — dusty eyes, bright sun (tokens.css). */
  font-size: var(--size-body);
  line-height: 1.45;
}

.cf-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-1);
}

.cf-banner-title {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-bold);
}

.cf-banner-line {
  margin: 0;
  font-size: var(--size-small);
}

/* The two audiences (§4.1). At camp you need a hostname; off playa you need to
 * know the data is a snapshot and how old it is. Both, always, in one message —
 * `camp.local` only resolves on camp WiFi, so neither half is redundant. */
.cf-banner-who {
  font-weight: var(--weight-semibold);
}

.cf-banner-host {
  font-weight: var(--weight-bold);
  /* A hostname to be typed into a phone, dusty, at night. Give it the shape of
     something you copy rather than something you read past. */
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-1);
  border-radius: var(--radius-slot);
  background: color-mix(in srgb, var(--soon) 28%, transparent);
}

.cf-banner-fresh {
  font-weight: var(--weight-semibold);
}

/* Stale enough that an off-playa reader should not be planning around it. */
.cf-banner[data-stale='true'] .cf-banner-fresh {
  color: var(--gap);
}

@media (max-width: 768px) {
  .cf-banner { padding: var(--space-3); }
}

/* No entrance animation, deliberately. The first version faded in over 240ms
 * and a screenshot caught it at about 15% opacity — an unreadable notice is
 * indistinguishable from no notice, and this one exists to be read before
 * somebody taps a seat. */