/* ==========================================================================
   ACE PODIUM — designer layer
   --------------------------------------------------------------------------
   The visual language from the designer's file, applied on top of ace.css
   without disturbing the components the working pages already rely on.
   Tokens (palette, type) live in ace.css so every page inherits them; this
   file carries the new composition: the film hero, the glass pick card, the
   gold ticker. Load it AFTER ace.css.
   ========================================================================== */

/* ------------------------------------------------------------- film hero */

.hero--film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0B1A12;
  color: #fff;
  min-height: min(860px, 100vh);
  padding-top: var(--header-h, 72px);
  display: flex;
  align-items: center;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 22, 14, 0.90) 0%, rgba(8, 22, 14, 0.66) 45%, rgba(8, 22, 14, 0.34) 100%),
    linear-gradient(180deg, rgba(8, 22, 14, 0.55) 0%, rgba(8, 22, 14, 0) 28%),
    linear-gradient(0deg, rgba(8, 22, 14, 0.70) 0%, rgba(8, 22, 14, 0) 26%);
}

.hero--film .hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 6vw, 96px) clamp(56px, 7vw, 96px);
}

.hero__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}

.hero__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.hero__lede {
  margin: 24px 0 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* The film hero sits on a dark photograph, so its buttons carry their own
   contrast rather than borrowing the page's light-theme accent. */
.btn--film {
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--film:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.hero--film .btn--primary {
  background: var(--l-accent);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.hero--film .btn--primary:hover {
  background: var(--l-accent-2);
  color: #fff;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  justify-self: end;
  width: 100%;
  max-width: 520px;
}

/* --------------------------------------------------------- glass pick card */

.pickcard {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(12, 30, 20, 0.55);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  color: #fff;
}

.pickcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pickcard__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.pickcard__badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.pickcard__body {
  padding: 20px 24px 22px;
  color: #fff;
}

/* The card's inner markup is produced by the page's renderer, which uses the
   site's pick styles. Recolour them for the dark glass surface. */
.pickcard .pick,
.pickcard .pick--top {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.pickcard .pick__rank {
  color: rgba(255, 255, 255, 0.55);
}
.pickcard .pick__name {
  color: #fff;
}
.pickcard .pick__prob {
  color: var(--gold);
}
.pickcard .pick__facts {
  color: rgba(255, 255, 255, 0.62);
}
.pickcard .meeting__time {
  color: #fff;
}
.pickcard .pick__meta,
.pickcard .help,
.pickcard .factstrip {
  color: rgba(255, 255, 255, 0.66);
}
.pickcard h3 {
  color: #fff;
}
.pickcard .formfig span {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.86);
}
.pickcard .formfig span.is-win {
  background: rgba(198, 166, 103, 0.22);
  color: var(--gold);
}
.pickcard .skeleton {
  background: rgba(255, 255, 255, 0.10);
}

.pickcard__foot {
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pickcard__help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.hero__all {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 22, 14, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hero__all:hover {
  background: rgba(8, 22, 14, 0.66);
  color: #fff;
}
.hero__all svg {
  color: var(--gold);
}

/* The page header floats over the film, so it must be legible on dark. */
body[data-page="index"] .masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
body[data-page="index"] .masthead a,
body[data-page="index"] .masthead button {
  color: #fff;
}
body[data-page="index"] .masthead .icon-btn {
  border-color: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------- ticker */

.marquee {
  background: var(--gold);
  color: #14201A;
  border: 0;
}
.marquee__item {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #14201A;
  font-weight: 500;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero--film .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: clamp(36px, 8vw, 64px);
  }
  .hero__aside {
    justify-self: stretch;
    max-width: 560px;
  }
  .hero--film {
    min-height: 0;
    padding-bottom: 8px;
  }
}

@media (max-width: 680px) {
  .hero--film .hero__inner {
    padding: 28px 20px 40px;
  }
  .hero__title {
    font-size: clamp(32px, 9vw, 44px);
  }
  .hero__lede {
    margin-top: 16px;
    font-size: 15.5px;
  }
  .hero__actions {
    margin-top: 22px;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .pickcard {
    border-radius: 22px;
  }
  .pickcard__head,
  .pickcard__body,
  .pickcard__foot {
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero__all {
    width: 100%;
    justify-content: center;
  }
}

/* Respect reduced motion: the film should not autoplay for someone who has
   asked the system for less movement. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero--film {
    background-image: linear-gradient(rgba(8, 22, 14, 0.72), rgba(8, 22, 14, 0.72)), url("../img/hero-poster.png");
    background-size: cover;
    background-position: center;
  }
}

/* Error and empty states inside the glass card. The site's light-theme state
   colours are invisible on a dark photograph, so they are restated here. */
.pickcard .state-error {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 16px 18px;
}
.pickcard .state-error .empty__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.pickcard .state-error p,
.pickcard .state-error .help {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.pickcard .state-error .btn {
  margin-top: 12px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  color: #14201A;
  font-size: 13.5px;
  font-weight: 600;
}
.pickcard .empty,
.pickcard .empty p {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------- login */

body[data-page="login"] .pv-auth {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  padding: 0;
  max-width: none;          /* the old single-column auth card was capped at 480px */
  border: 1px solid var(--rule);
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 580px;
  padding: clamp(28px, 4vw, 48px);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 22, 14, 0.12) 0%, rgba(8, 22, 14, 0.55) 52%, rgba(8, 22, 14, 0.93) 100%),
    url("../img/hero-poster.png") center / cover no-repeat;
}

.auth-art__mark {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.auth-art__mark em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.auth-art__note {
  margin: 0;
  max-width: 30rem;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(28px, 4vw, 56px);
  min-width: 0;
}

@media (max-width: 920px) {
  body[data-page="login"] .pv-auth {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .auth-art {
    min-height: 230px;
    border-radius: 22px;
    margin-bottom: 4px;
  }
  .auth-form {
    padding: 4px 0 0;
  }
}

/* ==========================================================================
   Shared components — applied to every page that loads ace.css.
   The designer's language: generous radii, hairline borders, pill buttons,
   and a dark green footer with the gold as the only accent.
   ========================================================================== */

/* ------------------------------------------------------------------ footer */

.footer {
  background: var(--l-accent);
  color: #fff;
  border-top: 0;
}
.footer .footer__inner {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: 32px;
}
.footer .masthead__brand,
.footer .masthead__name {
  color: #F7F7F4;
}
.footer .masthead__name span {
  color: var(--gold);
}
.footer__grid {
  gap: clamp(32px, 4vw, 56px);
}
.footer__grid h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.footer__list {
  gap: 12px;
}
.footer__list a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}
.footer__list a:hover {
  color: var(--gold);
}
.footer .prose,
.footer p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.footer .link,
.footer a.link {
  color: var(--gold);
}
.footer__base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}
.footer__base .link {
  color: var(--gold);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn--lg {
  height: 54px;
  padding: 0 26px;
  font-size: 16.5px;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--accent-ink);
}
.btn--ghost {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--ink-3);
  background: var(--bg-tint);
  color: var(--ink);
}
.btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

/* ------------------------------------------------------------------- cards */

.panel {
  border-radius: 24px;
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: none;
}
.panel__head {
  padding: 18px 22px;
}
.panel__body {
  padding: 20px 22px;
}

.badge {
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* ------------------------------------------------------------------- bands */

.band {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.band--tight {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* The designer's app-page heading: a hairline under the title on app pages. */
body[data-area="app"] .band:first-of-type h1,
body[data-area="admin"] .band:first-of-type h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- pricing */

/* His hero facts are pills, not a run of text. */
.factstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.factstrip span {
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Three plans as cards, the way he sets them, not as a comparison table. */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--surface);
}

.plan-card--featured {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plan-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 30px;
}

.plan-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-card__amount {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.plan-card__unit {
  font-size: 15px;
  color: var(--ink-2);
  white-space: nowrap;
}

.plan-card__specs {
  margin: 0;
}

.plan-card__specs > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}

.plan-card__specs dt {
  margin: 0;
  color: var(--ink-2);
}

.plan-card__specs dd {
  margin: 0;
  font-weight: 600;
}

.plan-card__cta {
  margin-top: auto;
  height: 52px;
}


/* The heading and supporting paragraph that open a section in his pages. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.section-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.section-head p {
  margin: 0;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A serif italic closing phrase in a page title, as in his heroes. */
h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.section-head--tight {
  margin-bottom: 20px;
}
.section-head--tight h2 {
  font-size: clamp(24px, 2.4vw, 32px);
}

/* ---------------------------------------------------------- results rows */

.race-row {
  border-top: 1px solid var(--rule);
}
.race-row:first-child {
  border-top: 0;
}

.race-row__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}

.race-row__btn:hover .race-row__name {
  color: var(--accent);
}

.race-row__time {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.race-row__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.race-row__tag {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}

.race-row__tag[data-hit="1"] {
  color: var(--accent);
}

.race-row__caret {
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: transform 0.18s ease;
}

.race-row.is-open .race-row__caret {
  transform: rotate(90deg);
}

.race-row__panel {
  padding: 2px 4px 22px;
}

@media (max-width: 620px) {
  .race-row__btn {
    grid-template-columns: 46px minmax(0, 1fr) auto 12px;
    gap: 10px;
    font-size: 14px;
  }
  .race-row__tag {
    font-size: 10px;
  }
}

/* In the finishing places, only a horse we picked is marked. The name and its
   finishing figure take the accent, with a bar down the side, so the match is
   visible at a glance without restating the result as won or placed. */
.finish .pick--picked {
  box-shadow: inset 2px 0 0 var(--accent);
  background: rgba(22, 61, 42, 0.07);
  border-radius: 8px;
  padding-left: 10px;
  margin-left: -10px;
}
:root[data-theme="dark"] .finish .pick--picked {
  background: rgba(198, 166, 103, 0.12);
}
.finish .pick--picked .pick__name,
.finish .pick--picked .pick__rank {
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------------------ admin shell */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.page-head__date {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.page-head h1 { margin: 0; }

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.chip__dot--good { background: #2E8B57; }

/* A label, a number, and what the number refers to. */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--surface);
}
.stat-card__label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.stat-card__value {
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card__note { font-size: 13px; color: var(--ink-3); }

/* Two panels of equal weight, side by side until the screen is narrow. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

.panel-ish {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--surface);
}
.panel-ish__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tool-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tool-card__name { font-size: 16px; font-weight: 600; }
.tool-card__note { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ------------------------------------------------------------- admin lists */

.toolbar--users {
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.toolbar--users .field { min-width: 9rem; }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.pager__info {
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--mono);
}
.pager__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pager__page {
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--mono);
  min-width: 7rem;
  text-align: center;
}
.pager .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------- the record page */

.verdict {
  margin-top: 18px;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.agree { margin-top: 16px; border-top: 1px solid var(--rule); }
.agree__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.agree__label { font-weight: 600; }
.agree__n, .agree__fig, .agree__gap, .agree__read {
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
@media (max-width: 720px) { .agree__row { grid-template-columns: 1fr 1fr; gap: 6px 12px; } }

.leak-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.leak-filter button {
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.leak-filter button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

.leak-bars { display: flex; flex-direction: column; gap: 2px; }
.segrow {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 64px 44px 96px;
  gap: 14px; align-items: center; padding: 8px 0; font-size: 14px;
}
.segrow__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segrow__track { position: relative; height: 18px; background: var(--bg-tint); border-radius: 4px; }
.segrow__noise { position: absolute; left: 38%; right: 38%; top: 0; bottom: 0; background: rgba(20,32,26,.07); }
.segrow__bar { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; }
.segrow__val, .segrow__n, .segrow__read { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.segrow__val { text-align: right; }
.segrow__read { text-align: right; }
@media (max-width: 720px) {
  .segrow { grid-template-columns: minmax(0, 1fr) 64px; }
  .segrow__track, .segrow__n, .segrow__read { display: none; }
}

.conf-rows { margin-top: 16px; }
.conf__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 60px 44px;
  gap: 12px; align-items: center; padding: 8px 0;
}
.conf__bar { height: 10px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.conf__bar span { display: block; height: 100%; background: var(--accent); }
.conf__label, .conf__fig, .conf__n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.conf__fig { text-align: right; }

.week-rows { margin-top: 16px; }
.week__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 60px 40px;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule);
}
.week__label, .week__fig, .week__gap, .week__n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* ---------------------------------------------------------------- tickets */
.ticket { margin-bottom: 16px; }
.ticket__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ticket__subject { margin: 0; font-size: 16px; font-weight: 600; }
.ticket__body { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.ticket__reply { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg-tint); }
.ticket__reply p { margin: 6px 0 0; font-size: 14px; }
.ticket__form { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ticket__form textarea { width: 100%; }

/* ---------------------------------------------- behaviour analytics */

.funnel-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.funnel__row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px 72px;
  gap: 12px; align-items: center; font-size: 14px;
}
.funnel__bar { height: 12px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.funnel__bar span { display: block; height: 100%; background: var(--accent); }
.funnel__label { color: var(--ink-2); }
.funnel__n { text-align: right; font-family: var(--mono); font-size: 13px; }
.funnel__drop { text-align: right; font-family: var(--mono); font-size: 11px; color: #a33b2a; }

.exit-rows { display: flex; flex-direction: column; gap: 8px; }
.exit__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 110px) 46px;
  gap: 12px; align-items: center;
}
.exit__path {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.exit__bar { height: 8px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.exit__bar span { display: block; height: 100%; background: var(--accent); }
.exit__n { text-align: right; font-family: var(--mono); font-size: 12px; }

.day-bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.day-bar { flex: 1; min-width: 2px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; }

/* ---- the designer's free-pick card, carried into the live hero ----------- */
.tipcard{
  position:relative;
  width:100%; max-width:560px; box-sizing:border-box;
  color:#fff; border-radius:32px; overflow:hidden;
  border:1px solid rgba(255,255,255,.46);
  background:
    radial-gradient(110% 85% at 2% -12%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,0) 66%),
    linear-gradient(160deg, rgba(26,66,45,.40) 0%, rgba(13,38,24,.52) 44%, rgba(6,22,14,.66) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(1.5) brightness(1.04);
  backdrop-filter:blur(30px) saturate(1.5) brightness(1.04);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(255,255,255,.10) inset,
    0 0 60px rgba(255,255,255,.05) inset;
}
/* the moving highlight that makes the surface read as glass rather than fill */
.tipcard > *{ position:relative; z-index:1; }
/* only the front card ever shows type. A card leaving the front drops its
   words at once; a card arriving holds them until it has settled, so two
   cards never overlap mid-swap. */
.tipdeck .tipcard > *{ opacity:0; transition:opacity .16s ease; }
.tipdeck .tipcard.is-front > *{ opacity:1; transition:opacity .26s ease .2s; }
.tipcard::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-45%; height:78%;
  background:linear-gradient(104deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.15) 46%,
             rgba(255,255,255,0) 72%);
  transform:rotate(-8deg); pointer-events:none; z-index:0;
  animation:liquid-shimmer 9s ease-in-out infinite;
}
@keyframes liquid-shimmer{
  0%,100%{ transform:translateX(-14%) rotate(-8deg); opacity:.45 }
  50%    { transform:translateX(14%) rotate(-8deg); opacity:.95 }
}
@media (prefers-reduced-motion: reduce){ .tipcard::before{ animation:none } }
.tipcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 26%,
             rgba(255,255,255,0) 72%, rgba(255,255,255,.09) 100%);
  mix-blend-mode:screen; opacity:.85;
}
.tipcard__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 26px; border-bottom:1px solid rgba(255,255,255,.14);
}
.tipcard__label{
  margin:0; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:400;
  letter-spacing:.12em; color:rgba(255,255,255,.75); text-transform:uppercase;
}
.tipcard__badge{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em;
  padding:5px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  color:rgba(255,255,255,.85); text-transform:uppercase;
}
.tipcard__body{ padding:22px 26px 24px; }
.tipcard__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tipcard__time{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; }
.tipcard__course{ font-family:'JetBrains Mono',monospace; font-size:13px; color:rgba(255,255,255,.7); }
.tipcard__race{
  font-size:20px; font-weight:600; line-height:1.35; letter-spacing:-.01em;
  margin-top:14px; max-width:520px; text-wrap:pretty;
}
.tipcard__runners{ margin-top:10px; }
.tipcard__runner{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.tipcard__runner:last-child{ border-bottom:0; }
.tipcard__rank{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; color:#C6A667; }
.tipcard__name{ font-size:17px; font-weight:500; }
.tipcard__pct{ font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:500; color:rgba(255,255,255,.92); }
.tipcard__note{ font-size:11px; line-height:1.5; color:rgba(255,255,255,.65); margin-top:12px; }

@media (max-width:560px){
  .tipcard{ max-width:none; }
  .tipcard__head{ padding:16px 18px; }
  .tipcard__body{ padding:18px 18px 20px; }
  .tipcard__race{ font-size:18px; }
  .tipcard__runner{ grid-template-columns:32px 1fr auto; }
  .tipcard__name{ font-size:16px; }
}

/* ---- the free-tip deck: cards stacked on one another, rotating ---------- */
.tipdeck{
  position:relative; display:grid; width:100%; max-width:560px; margin:0 auto;
  box-sizing:border-box; perspective:1400px; padding:0 44px 60px 0;
}
.tipdeck .tipcard{
  grid-area:1/1; align-self:start;
  transform-origin:50% 0;
  transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .62s ease;
  will-change:transform,opacity; pointer-events:none;
}
.tipdeck .tipcard.is-front{ pointer-events:auto; }
.tipdeck .tipcard .tipcard__head{ transition:border-color .4s; }

@media (max-width:560px){
  .tipdeck{ padding-bottom:44px; }
  .tipdeck .tipcard{ border-radius:26px; }
}

@media (prefers-reduced-motion: reduce){
  .tipdeck.no-motion .tipcard{ transition:none !important; }
  .tipcard::before{ animation:none !important; }
}

/* ---- login: the designer's screen, no masthead, no admin role picker ---- */
body.auth-page .masthead,
body.auth-page #site-footer,
body.auth-page .site-footer{ display:none; }

.auth-split{
  min-height:100vh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));
}
.auth-split__art{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(28px,4vw,48px);
  display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  min-height:320px; box-sizing:border-box;
  background-image:
    linear-gradient(180deg,rgba(8,22,14,.58) 0%,rgba(8,22,14,.22) 42%,rgba(8,22,14,.78) 100%),
    url("/assets/img/hero-poster.png");
  background-size:cover; background-position:center;
}
.auth-split__brand{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; align-self:flex-start; }
.auth-split__word{ font-size:24px; letter-spacing:-.02em; display:flex; gap:6px; }
.auth-split__word .ace{ font-weight:700; color:#F7F7F4; }
.auth-split__word .podium{ font-weight:400; color:#C6A667; }
.auth-split__pill{
  font-size:12px; font-weight:600; padding:5px 10px; white-space:nowrap; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
}
.auth-split__copy{ max-width:520px; }
.auth-split__title{
  margin:0; font-size:clamp(36px,4.2vw,60px); font-weight:600; line-height:1.05; letter-spacing:-.035em;
}
.auth-split__title span{
  font-family:'Newsreader',serif; font-style:italic; font-weight:400; letter-spacing:-.01em; color:#C6A667;
}
.auth-split__lede{
  margin:18px 0 0; font-size:clamp(16px,1.3vw,18px); line-height:1.55;
  color:rgba(255,255,255,.82); max-width:440px; text-wrap:pretty;
}

.auth-split__pane{
  background:var(--bg); display:flex; flex-direction:column;
  padding:clamp(28px,4vw,48px); box-sizing:border-box;
}
.auth-split__top{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.auth-split__back{
  display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500;
  color:var(--quiet); text-decoration:none;
}
.auth-split__back:hover{ color:var(--ink); }
.auth-split__center{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(32px,5vw,64px) 0; }
.auth-panel{ width:100%; max-width:420px; }
.auth-panel.hide{ display:none; }

.auth-c{ display:flex; flex-direction:column; gap:22px; }
.auth-c h2{ margin:0; font-size:clamp(30px,3vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.auth-c__sub{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--quiet); }
.auth-c__field{ display:flex; flex-direction:column; gap:8px; }
.auth-c__field > span:first-child{ font-size:14px; font-weight:600; color:var(--ink); }
.auth-c__wrap{ position:relative; display:flex; align-items:center; }
.auth-c__input{
  width:100%; height:54px; box-sizing:border-box; padding:0 18px;
  border-radius:14px; border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:16px; outline:none;
}
.auth-c__input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,61,42,.12); }
.auth-c__wrap .auth-c__input{ padding-right:56px; }
.auth-c__eye{
  position:absolute; right:8px; width:40px; height:40px; border:none; background:none;
  color:var(--quiet); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:10px;
}
.auth-c__eye:hover{ color:var(--ink); }
.auth-c__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:-6px; }
.auth-c__link{ font-size:14px; font-weight:600; color:var(--primary); text-decoration:none; }
.auth-c__link:hover{ text-decoration:underline; }
.auth-c__msg{ font-size:14px; margin:0; }
.auth-c__submit{
  height:56px; border-radius:999px; border:none; background:#163D2A; color:#fff;
  font-family:inherit; font-size:17px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-c__submit:hover{ background:#1E5038; }
.auth-c__submit:disabled{ opacity:.7; cursor:default; }
.auth-c__foot{ margin:0; text-align:center; font-size:15px; color:var(--quiet); }
.auth-c__alt:empty{ display:none; }
.auth-split__legal{ margin:0; font-size:13px; color:var(--quiet); text-align:center; }
.auth-split__legal a{ color:var(--primary); text-decoration:none; }
.auth-split__legal a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .auth-split__art{ min-height:300px; }
  .auth-split__title{ font-size:34px; }
  .auth-split__center{ padding:36px 0; }
}

/* the skip link must stay off-screen on the full-height auth split */
body.auth-page .skip{ top:-140px; }
body.auth-page .skip:focus{ top:14px; }