/* SweepstakeReport homepage (2026-10-08, direction A: the Terminal leads, the ranking stays as a compact band).
   Linked by index.html only, after css/styles.css and terminal/terminal.css; uses only their tokens. The top bar and
   the is-in / is-gated show-and-hide rules live in css/styles.css (sr_chrome block), because every page has the bar.
   Source of truth: build/tools/home/home.css (sr_home_move.py copies it here). */

/* visible focus for every link and button that does not carry the site's .focus-ring */
main a:not(.focus-ring):focus-visible,
main button:not(.focus-ring):focus-visible,
.site-footer a:focus-visible,
.t-fine a:focus-visible,
main summary:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

/* ---------- hero ---------- */
.a-hero .hero-grid { gap: 2.25rem; }
/* The text column starts at the top of the row (2026-10-08 b; it was centred): the call to action at its foot is the
   open one or, where the Terminal is not available, the taller notice, and that answer may land after the first paint.
   Top-aligned, the heading and the screenshot stay exactly where they are whichever one shows. */
@media (min-width: 960px) {
  .a-hero .hero-grid { grid-template-columns: 5fr 7fr; align-items: start; gap: 3.5rem; padding: 4.5rem 0 4.75rem; }
}
/* While the answer is out (html.gate-pending, at most 2 seconds; css/styles.css keeps both calls to action unseen):
   below 960px the screenshot sits under the call to action, so it waits unseen too, in place, and appears where it
   belongs. A visitor who is logged in sees neither call to action and does not wait. */
@media (max-width: 959px) {
  html.gate-pending:not(.is-in) .a-hero .a-shot { visibility: hidden; }
}
/* the same for what follows the hero: on a tall screen it is in view, and the taller notice would push it down */
html.gate-pending:not(.is-in) .a-hero ~ * { visibility: hidden; }
.a-hero [data-when~="open"], .a-hero [data-when~="gated"] { transition: opacity 0.3s var(--ease); }
html.gate-pending .a-hero [data-when~="open"], html.gate-pending .a-hero [data-when~="gated"] { opacity: 0; }
.a-hero h1 {
  max-width: 29rem;
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  line-height: 1.02;
}
.a-hero h1 em { font-style: italic; font-weight: 560; color: var(--gold-2); }
.a-hero .lede { max-width: 31rem; font-size: 1.08rem; }
.a-hero .lede strong { color: var(--cream); font-weight: 600; }
.a-hero .hero-actions { margin-top: 1.6rem; }
.a-hero .hero-actions .btn { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
.a-free {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--stone);
}
.a-free::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--gold); transform: rotate(45deg); }
.a-free b { font-weight: 500; color: var(--cream-soft); }

/* a visitor from a state where the Terminal is not available: the call to action becomes a notice */
.a-gate {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid rgba(196, 146, 58, 0.5);
  border-left: 3px solid var(--amber);
  background: linear-gradient(180deg, rgba(196, 146, 58, 0.12), rgba(18, 17, 14, 0.7));
}
.a-gate-k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--gold-2); }
.a-gate-t { margin: 0.5rem 0 0; font-family: var(--display); font-size: 1.25rem; font-weight: 560; line-height: 1.3; color: var(--cream); }
.a-gate-s { margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--stone); }
.a-gate .hero-actions { margin-top: 1rem; }
.a-gate .hero-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.9rem; }
.a-gate-acct { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--stone); }
.a-gate-acct a { color: var(--gold-2); text-underline-offset: 3px; text-decoration-color: var(--gold-line); }

/* the real screenshot in a quiet browser frame */
.a-shot { position: relative; margin: 0; }
.a-shot::before {
  content: "";
  position: absolute;
  inset: 8% -4% -6% 10%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(201, 165, 106, 0.16), transparent 65%);
  filter: blur(24px);
  pointer-events: none;
}
.a-frame .t-frame-bar { padding: 0.55rem 0.8rem; }
.a-frame .t-frame-bar b { flex: 1; text-align: center; }
.a-dots { display: inline-flex; gap: 5px; }
.a-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(232, 220, 200, 0.14); }
.a-frame img { display: block; width: 100%; height: auto; background: #0b0c0e; }
/* desktop: the real 1440x900 screen, cropped to its working column (x 470 to 1200, y 20 to 770) so it reads at near full size */
@media (min-width: 640px) {
  .a-crop { position: relative; overflow: hidden; aspect-ratio: 730 / 750; background: #0b0c0e; }
  .a-crop img { position: absolute; left: -64.38%; top: -2.67%; width: 197.26%; max-width: none; aspect-ratio: 1440 / 900; }
}
.a-shot figcaption { margin: 0.75rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--stone); max-width: 40rem; }
@media (max-width: 639px) {
  .a-shot { max-width: 22rem; margin-inline: auto; }
  .a-frame img { aspect-ratio: 600 / 720; object-fit: cover; object-position: top; }
  .a-frame .t-frame-bar span:last-child { display: none; }
  .a-hero .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- section heads ---------- */
.a-sec-lede { margin: 0.75rem 0 0; max-width: 42rem; color: var(--stone); line-height: 1.6; }
.a-head-note { margin: 0; font-size: 0.9rem; color: var(--stone); }

/* plans: the gated state of a plan button (.t-plan .a-off) lives in terminal/terminal.css since 2026-10-09, because
   /terminal/ shows it too; this page loads that stylesheet */

/* ---------- ground rules ---------- */
.a-rules-grid { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 960px) { .a-rules-grid { grid-template-columns: 1.3fr 0.85fr 1.15fr; gap: 1.5rem; } }
.a-rules-grid .t-panel h3, .a-limits h3 {
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cream);
}
.a-rules-grid .t-panel p { font-size: 0.95rem; }
.a-rules-grid .t-avail-line { font-size: 1rem; }
.a-limits {
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(30, 61, 50, 0.32), rgba(18, 17, 14, 0.7));
  padding: 1.4rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
@media (min-width: 640px) { .a-limits { padding: 1.75rem; } }
.a-limits p { margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--cream-soft); }
.a-call { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.a-call .mast-kicker { color: var(--stone); }
.a-call .fig {
  display: block;
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.a-call p { margin-top: 0.4rem; font-size: 0.88rem; color: var(--stone); }

/* ---------- the ranking, compact ---------- */
.a-rank-band {
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  background:
    radial-gradient(ellipse 55% 90% at 0% 0%, rgba(201, 165, 106, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 70% at 100% 100%, rgba(74, 28, 34, 0.28), transparent 55%),
    var(--ink-2);
}
.a-rank-grid { display: grid; gap: 2rem; padding: 3.25rem 0 3.5rem; }
@media (min-width: 960px) { .a-rank-grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; padding: 4rem 0; } }
.a-rank-grid h2 {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--cream);
  text-wrap: balance;
}
.a-rank-grid .a-sec-lede { font-size: 0.97rem; }
.a-rank-when { margin: 1rem 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.a-rank-grid .hero-actions { margin-top: 1.4rem; }
.a-rank-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.a-rank-list li + li { border-top: 1px solid var(--rule); }
.a-rank-head, .a-rank-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 3.4rem 2.6rem;
  align-items: center;
  gap: 0.9rem;
}
.a-rank-head {
  padding: 0 0.5rem 0.55rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
}
.a-rank-head span:nth-child(3), .a-rank-head span:nth-child(4) { text-align: right; }
.a-rank-row {
  padding: 0.85rem 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.a-rank-row:hover, .a-rank-row:focus-visible {
  background: linear-gradient(90deg, rgba(201, 165, 106, 0.08), transparent 65%);
  box-shadow: inset 2px 0 0 var(--gold);
}
.a-rank-row .rank-idx { width: auto; font-size: 1.6rem; }
.a-rank-name { display: block; font-family: var(--display); font-size: 1.18rem; font-weight: 600; line-height: 1.25; color: var(--cream); }
.a-rank-meta { display: block; margin-top: 0.15rem; font-size: 0.84rem; line-height: 1.4; color: var(--stone); }
/* the row tags ("Our publisher's app", "Tied for 3rd", "Unavailable"): 11px at the least (2026-10-09; they were 9.5px,
   and the first one is the ownership disclosure). One rule for all three, so they stay the same size. */
.a-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--gold-line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
  white-space: nowrap;
  color: var(--gold-2);
}
.a-tag.is-dim { border-color: var(--rule-strong); color: var(--stone); }
.a-rank-row .grade { justify-self: end; }
.a-rank-score { justify-self: end; font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.a-rank-foot { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--stone); }
@media (max-width: 639px) {
  .a-rank-head, .a-rank-row { grid-template-columns: 2rem minmax(0, 1fr) auto 2.1rem; gap: 0.65rem; }
  .a-rank-row { padding: 0.8rem 0.15rem; }
  .a-rank-row .rank-idx { font-size: 1.35rem; }
  .a-rank-name { font-size: 1.05rem; }
  .a-rank-score { font-size: 1.2rem; }
  .a-tag { margin-left: 0; margin-top: 0.25rem; vertical-align: baseline; }
  .a-rank-name .a-tag { display: table; }
}
/* the narrowest phones: the 11px tag keeps its size and fits its column (tighter tracking, not a smaller font) */
@media (max-width: 359px) {
  .a-tag { padding: 0.1rem 0.35rem; letter-spacing: 0.04em; }
}

/* where the Terminal is not available the band sits right after the hero (index.html moves it, 2026-10-09): the
   section that then follows the ground rules needs no second top padding, like the other stacked sections */
#rules + .a-latest { padding-top: 0; }

/* ---------- latest ---------- */
.a-latest .card-grid { margin-top: 1.5rem; }
.a-latest .card h3 { font-size: 1.15rem; }

/* ---------- footer: four columns ---------- */
@media (min-width: 768px) { .a-foot { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .a-foot { grid-template-columns: 1.05fr 0.8fr 0.75fr 1.7fr; gap: 2.25rem; } }

@media (prefers-reduced-motion: reduce) {
  .a-rank-row { transition: none; }
}