/**
 * s3.css — S3-only styles on top of onrecord.css (design.md Part II;
 * docs/design-on-record/screens-spec.md §S3). Everything shared (viewfinder,
 * HUD, spec bar, manifest, loop strip, filmstrip, grid-1px, reveal system)
 * lives in onrecord.css; this file holds only S3's own compositions: the call
 * sheet's display-scale values, the loop heading, the placeholder filmstrip
 * grounds, the who-can-apply split, and the closing deck.
 * Every value is var(--token) from public-tokens.css / tokens.css.
 */

/* ── shared deck furniture (home.css is NOT loaded on this route) ────────── */

.deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 30px;
}

/* ── DECK 02 — the call sheet ─────────────────────────────────────────────
   Requirement values read at display scale: the manifest becomes a call sheet,
   not a table. `.t-callsheet` supplies the Latin face; the AR override has to
   be restated here because onrecord's `:lang(ar) .manifest__value` is later in
   the cascade at equal specificity. */

.callsheet .manifest__value {
  font-size: var(--text-callsheet-lat);
  line-height: 1.05;
  color: var(--color-ink);
}
:lang(ar) .callsheet .manifest__value {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  font-size: var(--text-callsheet-ar);
  line-height: 1.3;
  letter-spacing: 0; /* Arabic is never tracked */
}
.callsheet .manifest__key {
  align-self: center;
}
.callsheet .manifest__idx {
  align-self: center;
}

/* ── DECK 02 — the loop ───────────────────────────────────────────────────── */

.loop-heading {
  margin-block: clamp(48px, 6vw, 76px) 24px;
}
.loop-strip__idx {
  /* muted, not faint: ink-faint measures 4.34:1 on the surface cells —
     under the 4.5 floor (visual_qa 2026-09-01) */
  color: var(--color-ink-muted);
}
.loop-strip__cell--raised .loop-strip__label {
  color: var(--color-accent);
}

/* ── the filmstrip band ───────────────────────────────────────────────────
   No footage exists yet (docs/design-on-record/asset-manifest.md): every tile
   is a graphite ground built from the surface ramp, each with its own layered
   gradient so the strip reads as five different frames rather than one swatch
   repeated. Poster → video swap replaces these when the shoot lands. */

.filmstrip-band__label {
  margin-block-end: 18px;
}
.filmstrip-band__credit {
  margin-block-start: 16px;
}

.filmstrip__tile--1 {
  background:
    radial-gradient(64% 42% at 32% 24%, var(--rule-700), transparent 70%),
    linear-gradient(168deg, var(--graphite-820), var(--graphite-950) 78%);
}
.filmstrip__tile--2 {
  background:
    radial-gradient(54% 36% at 72% 70%, var(--seam-800), transparent 72%),
    linear-gradient(
      12deg,
      var(--graphite-950),
      var(--graphite-820) 58%,
      var(--graphite-870)
    );
}
.filmstrip__tile--3 {
  background:
    radial-gradient(96% 30% at 50% 92%, var(--line-600), transparent 74%),
    linear-gradient(
      196deg,
      var(--graphite-870),
      var(--graphite-950) 62%,
      var(--graphite-820)
    );
}
.filmstrip__tile--4 {
  background:
    radial-gradient(44% 44% at 24% 76%, var(--rule-700), transparent 68%),
    radial-gradient(58% 34% at 84% 16%, var(--seam-800), transparent 74%),
    linear-gradient(150deg, var(--graphite-950), var(--graphite-870));
}
.filmstrip__tile--5 {
  background:
    radial-gradient(48% 58% at 60% 32%, var(--seam-800), transparent 72%),
    linear-gradient(28deg, var(--rule-700), var(--graphite-950) 70%);
}

/* ── DECK 03 — who can apply ──────────────────────────────────────────────
   Two columns per design-v2 §5: the eligibility paragraph beside the roster of
   countries. `.t-lead` is the 18–21px band (18px EN / 20px AR at desktop). */

.who-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4.5vw, 72px);
}
.who-cols__text {
  flex: 1 1 320px;
  max-inline-size: 480px;
}
.who-cols__grid {
  flex: 1.3 1 460px;
  align-self: flex-start;
}
.who-copy {
  color: var(--color-ink);
}

/* Fixed column counts, not auto-fit: six countries divide evenly into 2 and 3,
   so the welded grid never leaves a half-lit empty cell. The 18+ cell takes the
   whole closing row — it is a condition, not a seventh country. */
.country-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.country-grid__cell--age {
  grid-column: 1 / -1;
}
.country-grid__cell {
  background: var(--color-surface);
  padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.8vw, 20px);
  color: var(--color-ink);
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-slug-lat);
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color var(--dur-hover) var(--ease-micro);
}
:lang(ar) .country-grid__cell {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
}
.country-grid__cell:hover {
  background: var(--color-surface-raised);
}
.country-grid__cell--age {
  color: var(--color-accent);
  font-family: var(--font-stack-mono);
  letter-spacing: 0.08em;
}
:lang(ar) .country-grid__cell--age {
  font-family: var(--font-stack-text-ar);
  letter-spacing: 0;
}

/* ── DECK 04 — the close ──────────────────────────────────────────────────── */

.no-dm-head {
  max-inline-size: 20ch;
}
.no-dm-rest {
  margin-block-start: 20px;
  max-inline-size: 62ch;
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
}
:lang(ar) .no-dm-rest {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}
.privacy-row {
  margin-block-start: 26px;
}
.privacy-link {
  font-size: var(--text-legal-lat);
  color: var(--color-ink-muted);
  text-decoration: none;
}
.privacy-link:hover,
.privacy-link:focus-visible {
  color: var(--color-ink);
}
:lang(ar) .privacy-link {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-legal-ar);
}