/* MinOdds type scale — mockups A–G, 390px portrait.
   Hero: prices + horse names. Meta, labels, legal stay small.
   Two horse cards + Copy must fit without horizontal scroll. */
:root {
  --paper: #F6F4EF;
  --ink: #1A1A1A;
  --green: #1B5E3B;
  --amber: #C47B1A;
  --red: #A33B32;
  --muted: #6B645C;
  --line: #E4DED4;
  --card: #ffffff;
  --fat: #1B5E3B;
  --ar: #C47B1A;
  --sk: #A33B32;
  --beige: #F5F2EB;
  --sage: #8FA48B;
  --charcoal: #140E0C;
  --charcoal-cell: #1A1210;
  --chili: #E85D04;
  --marigold: #FFE500;
  --gold-mute: #E8D5A8;
  --lime: #32D74B;
  --fail: #E10600;
  --radius: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/inter-latin-700.woff2") format("woff2");
}
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.3;
}
body {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
a { color: var(--green); }
main { flex: 1 1 auto; }

/* Header */
.top {
  display: grid;
  grid-template-columns: auto minmax(2.75rem, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.wordmark {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  height: auto;
  min-height: 0;
  line-height: 0;
  text-decoration: none;
  justify-self: start;
  align-self: center;
}
.wordmark img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
}
.account-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  min-width: 44px;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.account-emoji {
  font-size: 1.55rem;
  line-height: 1;
  filter: url(#account-green);
}
.toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}
.top > .keys,
.top > .daypass-link {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}
.sub {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.top .chips {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 0;
  padding: 4px 0 2px;
}

.keys {
  border-radius: 999px;
  padding: 6px 11px 6px 9px;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}
.keys::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.5 2a4.5 4.5 0 0 0-4.37 5.57L.8 12.9a.75.75 0 0 0 1.06 1.06l1.04-1.04.9.9a.75.75 0 0 0 1.06-1.06l-.9-.9 1.5-1.5A4.5 4.5 0 1 0 9.5 2Zm0 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M9.5 2a4.5 4.5 0 0 0-4.37 5.57L.8 12.9a.75.75 0 0 0 1.06 1.06l1.04-1.04.9.9a.75.75 0 0 0 1.06-1.06l-.9-.9 1.5-1.5A4.5 4.5 0 1 0 9.5 2Zm0 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z'/></svg>") center / contain no-repeat;
}
.keys.green { background: #E4F0E8; color: var(--green); border-color: #C5DCCB; }
.keys.red { background: #F6E4E2; color: var(--red); border-color: #E8C7C3; }
.daypass-link {
  border-radius: 999px;
  padding: 6px 11px;
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
}

/* Chips */
.chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 2px 0 8px;
}
.chip-all { flex: 0 0 auto; }
.chips-scroll {
  display: flex;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.chip.on { background: var(--green); color: #fff; border-color: var(--green); }

body.card-list {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.card-list .top {
  flex: 0 0 auto;
  z-index: 20;
}
body.card-list main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.card-list .banner,
body.card-list .hint {
  flex: 0 0 auto;
}
body.card-list .timetable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.card-list .legal {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 8px;
}

.hint { color: var(--muted); font-size: 0.875rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
.foot-hint {
  color: var(--muted);
  font-size: 0.8125rem;
  background: #EFEBE3;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 10px 0 0;
}

/* Timetable */
.timetable { list-style: none; padding: 0; margin: 0; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 9px 10px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 6px 0;
  position: relative;
}
.row:has(.row-hit) { cursor: pointer; }
.row.imminent {
  background: #EAF3EC;
  border-color: #C5DCCB;
}
.row.done { color: var(--muted); background: #FBF9F5; }
.row.done.imminent,
.row.waiting.imminent {
  background: #EAF3EC;
  border-color: #C5DCCB;
  color: var(--ink);
}
.row.waiting {
  position: relative;
  grid-template-columns: 1fr auto;
}
.row.paid.waiting { grid-template-columns: 1fr auto; }
.off-clock {
  z-index: 2;
  pointer-events: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
}
.off-clock .clock {
  width: 18px;
  height: 18px;
  animation: off-flash 1s ease-in-out infinite;
}
@keyframes off-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .off-clock .clock { animation: none; }
}
.row.paid {
  grid-template-columns: 1fr;
  position: relative;
}
.row.paid { cursor: pointer; }
.row.paid.noprice { grid-template-columns: 1fr auto; }
.act.noprice {
  color: var(--muted);
  font-weight: 600;
}
.prices-as-at { margin: 0 0 6px; }
.row-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.row:has(.row-hit) .act { pointer-events: none; }
.when {
  display: grid;
  grid-template-columns: 3.3rem 1fr;
  column-gap: 8px;
  row-gap: 1px;
  min-width: 0;
}
.time {
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.course { font-weight: 600; font-size: 1rem; }
.meta { font-size: 0.8125rem; color: var(--muted); }
.meta.winner {
  min-width: 0;
}
.meta.winner .who-won {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.meta.winner .cloth.sm {
  width: auto;
  height: auto;
  min-width: 1em;
  padding: 2px 1px 0;
  border-radius: 2px;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: flex-end;
  background: #111;
  color: #fff;
}
.act {
  position: relative;
  z-index: 2;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}
.act.unlock::before,
.act.open::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M4.5 7V5.5a3.5 3.5 0 1 1 7 0V7h.75A1.75 1.75 0 0 1 14 8.75v4.5A1.75 1.75 0 0 1 12.25 15H3.75A1.75 1.75 0 0 1 2 13.25v-4.5A1.75 1.75 0 0 1 3.75 7H4.5Zm1.5 0h4V5.5a2 2 0 1 0-4 0V7Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M4.5 7V5.5a3.5 3.5 0 1 1 7 0V7h.75A1.75 1.75 0 0 1 14 8.75v4.5A1.75 1.75 0 0 1 12.25 15H3.75A1.75 1.75 0 0 1 2 13.25v-4.5A1.75 1.75 0 0 1 3.75 7H4.5Zm1.5 0h4V5.5a2 2 0 1 0-4 0V7Z'/></svg>") center / contain no-repeat;
}
.row.done .act { color: var(--muted); }

/* Toggle */
.toggle {
  display: flex;
  background: var(--card);
  border-radius: 999px;
  border: 1px solid var(--line);
  overflow: hidden;
  width: fit-content;
  flex-shrink: 0;
}
.seg {
  padding: 6px 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}
.seg.on { background: var(--green); color: #fff; }

/* Race header */
.racehead {
  background: #EAF3EC;
  border: 1px solid #C5DCCB;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.racehead h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.racehead p {
  margin: 3px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.trial-chip {
  font-size: 0.75rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.snap { font-size: 0.8125rem; color: var(--muted); margin: 0 0 6px; }

/* Horse cards — the product */
.horse {
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px 8px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
}
.horse.steady {
  background: var(--beige);
  color: var(--green);
  border-color: var(--sage);
}
.horse.favourite,
.horse.joint_fav {
  background: #E8E6E1;
  color: #5C5852;
  border-color: #C9C4BB;
}
.horse.juicy,
.horse.jackpot {
  background: var(--charcoal);
  color: var(--gold-mute);
  border-color: var(--charcoal-cell);
}
.id {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.horse .id .who h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  line-height: 32px;
  min-width: 0;
}
.horse .id .who h2 .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.or-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 1;
  flex-shrink: 0;
}
.horse .id .badge {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.cloth {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.cloth.sm { width: 26px; height: 26px; font-size: 0.8125rem; border-radius: 6px; }
.cloth.steady { background: var(--green); color: var(--beige); }
.cloth.favourite,
.cloth.joint_fav { background: #6B6760; color: #F0EEEA; }
.cloth.juicy,
.cloth.jackpot { background: var(--chili); color: #fff; }
.who { min-width: 0; flex: 1; }
.who h2, .horse h2 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.horse.steady h2 { color: var(--green); font-weight: 400; }
.horse.favourite h2,
.horse.joint_fav h2 { color: #4A4742; font-weight: 400; }
.horse.juicy h2,
.horse.jackpot h2 {
  color: var(--marigold);
  font-weight: 800;
}
.who p {
  margin: 1px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.horse.steady .who p { color: var(--sage); }
.horse.favourite .who p,
.horse.joint_fav .who p { color: #7A756C; }
.horse.juicy .who p,
.horse.jackpot .who p { color: var(--gold-mute); }
.horse > .why {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.horse.steady > .why { color: var(--sage); }
.horse.favourite > .why,
.horse.joint_fav > .why { color: #7A756C; }
.horse.juicy > .why { color: var(--gold-mute); }
.badge {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: auto;
  white-space: nowrap;
  align-self: flex-start;
  line-height: 1;
}
.horse .badge {
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: 9px;
}
span.badge.steady {
  background-color: var(--green);
  color: var(--beige);
  border: 0;
}
span.badge.favourite,
span.badge.joint_fav {
  background-color: #6B6760;
  color: #F0EEEA;
  border: 0;
}
span.badge.juicy,
span.badge.jackpot {
  background-color: var(--marigold);
  color: var(--charcoal);
  border: 0;
  /* Marigold on charcoal blooms; inset keeps the box looking the same height as STEADY. */
  box-shadow: inset 0 0 0 1px rgba(20, 14, 12, 0.35);
}
.badge.skip { display: none; }
.field-row .badge.skip { display: none; }
.field-row.skip { color: var(--muted); }
.field-row.skip .who strong { font-weight: 400; color: var(--muted); }
.field-row.juicy .who strong,
.field-row.jackpot .who strong {
  font-weight: 800;
  color: var(--chili);
}
.field-row.steady .who strong { font-weight: 700; color: var(--green); }
.field-row.favourite .who strong,
.field-row.joint_fav .who strong { font-weight: 700; color: #5C5852; }
.result-card .field-row.jackpot {
  padding-top: 10px;
  padding-bottom: 10px;
}
.result-card .name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.result-card .name-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-card .field-row.steady .who strong {
  color: var(--green);
  font-weight: 800;
}
.result-card .field-row.juicy .who strong {
  color: var(--chili);
  font-weight: 800;
}
.result-card .field-row.jackpot .who strong {
  color: var(--chili);
  font-weight: 800;
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0;
}
.result-card .field-row.jackpot .j {
  margin-top: 5px;
}
.result-card .who .badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  margin: 0;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.result-card .name-line .or-mark {
  width: 20px;
  height: 20px;
  font-size: 8px;
}
.summary-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.summary-banner .t-steady { color: var(--green); }
.summary-banner .t-juicy { color: var(--chili); }
.summary-banner .stake {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pick-title {
  margin: 0 0 2px;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.pick-title .t-steady { color: var(--green); }
.pick-title .t-juicy { color: var(--chili); }
.attitude {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.split-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 10px;
  border: 4px solid var(--green);
}
.split-half {
  padding: 10px 8px;
  text-align: center;
}
.split-half.steady {
  background: var(--beige);
  color: var(--green);
  border-right: 1px solid var(--sage);
}
.split-half.juicy {
  background: var(--charcoal);
  color: var(--gold-mute);
}
.split-status {
  margin: 0 auto;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.split-status span {
  display: block;
  padding: 8px 12px;
  border-radius: 9px;
}
.split-status.on {
  padding: 2px;
  border-radius: 11px;
}
.split-half.steady .split-status.on {
  background: var(--ink);
}
.split-half.steady .split-status.on span {
  background: var(--green);
  color: var(--beige);
}
.split-half.juicy .split-status.on {
  background: var(--chili);
}
.split-half.juicy .split-status.on span {
  background: var(--marigold);
  color: var(--charcoal);
}
.split-half.steady .split-status.off {
  background: transparent;
  color: var(--sage);
}
.split-half.juicy .split-status.off {
  padding: 2px;
  border-radius: 11px;
  background: var(--chili);
}
.split-half.juicy .split-status.off span {
  background: var(--charcoal);
  color: var(--chili);
  padding: 8px 12px;
}
.split-status.off span {
  padding: 8px 4px;
}
.warn-places {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #FDECEC;
  color: var(--red);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: pretty;
  text-wrap: balance;
}
.warn-places.ew-risk {
  text-align: center;
  border: 4px solid currentColor;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 8px;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}
.prices > div {
  padding: 6px 6px 8px;
  text-align: center;
  min-width: 0;
}
.prices.two { grid-template-columns: 1fr 1fr; }
.prices > div + div { border-left: 1px solid var(--line); }
.prices > .pct-cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.pct-cell > div {
  padding: 6px 4px 8px;
  text-align: center;
  min-width: 0;
}
.pct-cell > div + div { border-left: 1px solid var(--line); }
.prices strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.horse.steady .prices {
  background: #fff;
  border: 2px solid var(--sage);
}
.horse.steady .prices > div + div,
.horse.steady .pct-cell > div + div { border-left-color: var(--sage); }
.horse.steady .prices strong { color: var(--ink); }
.horse.steady .lab { color: var(--sage); }
.horse.favourite .prices,
.horse.joint_fav .prices {
  background: #F3F1ED;
  border: 2px solid #C9C4BB;
}
.horse.favourite .prices > div + div,
.horse.joint_fav .prices > div + div,
.horse.favourite .pct-cell > div + div,
.horse.joint_fav .pct-cell > div + div { border-left-color: #C9C4BB; }
.horse.favourite .lab,
.horse.joint_fav .lab { color: #7A756C; }
.horse.juicy .prices,
.horse.jackpot .prices {
  background: var(--charcoal-cell);
  border: 2px solid var(--chili);
}
.horse.juicy .prices > div + div,
.horse.jackpot .prices > div + div,
.horse.juicy .pct-cell > div + div,
.horse.jackpot .pct-cell > div + div { border-left-color: var(--chili); }
.horse.juicy .prices strong,
.horse.jackpot .prices strong { color: var(--gold-mute); }
.horse.juicy .lab,
.horse.jackpot .lab { color: var(--gold-mute); }
.horse.juicy .snap-cell,
.horse.jackpot .snap-cell {
  background: var(--charcoal);
}
.horse.juicy .snap-cell strong,
.horse.jackpot .snap-cell strong {
  color: var(--marigold);
  font-weight: 800;
}
.lab {
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 1px;
}
.clock {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13ZM8 3a5 5 0 1 0 0 10A5 5 0 0 0 8 3Zm.75 2v2.69l1.78 1.78a.75.75 0 1 1-1.06 1.06L7.25 8.31V5A.75.75 0 0 1 8.75 5Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13ZM8 3a5 5 0 1 0 0 10A5 5 0 0 0 8 3Zm.75 2v2.69l1.78 1.78a.75.75 0 1 1-1.06 1.06L7.25 8.31V5A.75.75 0 0 1 8.75 5Z'/></svg>") center / contain no-repeat;
}
.chance {
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.horse.steady .chance { color: var(--sage); }
.horse.juicy .chance,
.horse.jackpot .chance { color: var(--gold-mute); }

.ew {
  margin: 7px 0 2px;
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.ew .yes { color: var(--green); font-weight: 700; }
.ew .no { color: var(--red); font-weight: 700; }
.ew-terms { font-size: 0.8125rem; color: var(--muted); }
.horse.juicy .ew .yes,
.horse.jackpot .ew .yes { color: var(--marigold); }
.horse.juicy .ew .no,
.horse.jackpot .ew .no { color: var(--chili); }
.horse.juicy .ew-terms,
.horse.jackpot .ew-terms { color: var(--gold-mute); }

.skip-line {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 2px 0 8px;
}

.toast .badge { margin-left: 6px; vertical-align: middle; }
.result-line .badge { margin-right: 6px; }
.toast {
  background: var(--green);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.3;
}

.primary {
  display: block;
  width: 100%;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  min-height: 44px;
  margin: 6px 0 0;
}
.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.cta-stack .primary,
.cta-stack .secondary {
  margin: 0;
}
.cta-stack .secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--beige);
  color: var(--green);
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
}
.center {
  text-align: center;
  font-size: 0.9375rem;
  margin: 4px 0;
}
.center a { text-decoration: none; font-weight: 500; }

/* Full card — stacked, not a 6-col table */
.back {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0 0 6px;
  color: var(--ink);
}
.mode-line {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 4px;
}
.meta-line { font-size: 0.8125rem; color: var(--muted); margin: 0 0 4px; }
.ok { color: var(--green); font-weight: 600; font-size: 0.8125rem; margin: 0 0 6px; }
.field { list-style: none; padding: 0; margin: 0 0 8px; }
.field-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.field-row .who { display: flex; flex-direction: column; gap: 1px; }
.field-row .who strong { font-size: 0.9375rem; }
.result-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
}
.result-line .who { flex: 1; min-width: 0; }
.result-line .who strong { display: block; font-size: 1rem; }
.result-card .field-row {
  grid-template-columns: 2.1rem 26px 1fr auto 1.35rem;
  align-items: center;
}
.result-card.finish .field-row {
  grid-template-columns: 26px minmax(0, 1fr) 3.4rem 3.6rem;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.result-card.finish.settled .field-row {
  grid-template-columns: 26px minmax(0, 1fr) 3.4rem 3.6rem;
}
.result-card.finish .cloth.sm {
  font-size: 0.9375rem;
  font-weight: 600;
}
.result-card.finish .who strong,
.result-card.finish .field-row.steady .who strong,
.result-card.finish .field-row.juicy .who strong,
.result-card.finish .field-row.skip .who strong {
  font-size: 0.9375rem;
  font-weight: 600;
}
.result-card.finish .margin {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
  min-width: 3.2rem;
  text-align: center;
  color: var(--ink);
}
.result-card.finish .px {
  min-width: 3.4rem;
  align-items: center;
  text-align: center;
}
.result-card.finish .px strong {
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
}
.result-card.finish .field-row.head .col-lab,
.result-card.finish .field-row.head .odds-time {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
}
.result-card.finish .fate {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
}
.result-card.finish .field-row.place-cut {
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2px;
  padding-bottom: 9px;
}
.result-on-card {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.result-card.pre-race .field-row {
  grid-template-columns: 26px 1fr auto;
}
.result-card.pre-race.settled .field-row {
  grid-template-columns: 26px 1fr auto 1.35rem;
}
.result-card.pre-race .field-row .why {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: normal;
  word-break: normal;
}
.result-card.pre-race .unit {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: top;
}
.result-card.pre-race .field-row.steady .why { color: var(--sage); }
.result-card.pre-race .field-row.juicy .why { color: var(--chili); }
.result-card.pre-race .field-row.nr .why { display: none; }
.result-card .field-row.head {
  border-bottom: 0;
  padding-bottom: 2px;
  padding-top: 2px;
}
.result-card .field-row.head .head-pad {
  width: 26px;
  height: 1px;
  background: transparent;
}
.result-card .field-row.head .odds-time {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.nr-head {
  margin: 12px 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nr-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.nr-list li { padding: 3px 0; }
.result-card .px {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.6rem;
}
.result-card .px .lab {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-card .px strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
}
.result-card .pos {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
}
.result-card .sp {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
}
.result-card .field-row.nr { color: var(--muted); }
.bet-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  width: 1.35rem;
  text-align: center;
}
.bet-mark.yes { color: var(--lime); }
.bet-mark.no { color: var(--fail); }
.bet-mark.empty { visibility: hidden; }
.j { display: block; color: var(--muted); font-size: 0.8125rem; }
.nums { font-size: 0.8125rem; color: var(--muted); }
.sticky-cta {
  position: sticky;
  bottom: 0;
  background: transparent;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  margin-top: 4px;
}

/* Auth / gate */
.banner {
  background: var(--card);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.9375rem;
  margin: 0 0 8px;
}
.gate h1 { margin: 0 0 4px; font-size: 1.25rem; }
.gate p { font-size: 0.9375rem; margin: 4px 0; }
.warn { color: var(--red); font-size: 0.9375rem; }
.cancel { display: block; text-align: center; min-height: 40px; padding: 8px; font-size: 0.9375rem; }
.form label { display: block; margin: 10px 0; font-size: 0.9375rem; }
.form input[type=email],
.form input[type=password] {
  width: 100%;
  padding: 10px;
  font-size: 16px; /* iOS will zoom if < 16 */
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-top: 4px;
}
.form label.check,
.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.check input { margin-top: 3px; flex-shrink: 0; }
.check span {
  min-width: 0;
  flex: 1 1 auto;
}
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 0;
  width: 40px;
  min-height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-eye {
  width: 22px;
  height: 22px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5A2.5 2.5 0 1 0 12 9a2.5 2.5 0 0 0 0 5z'/></svg>") center / contain no-repeat;
}
.pw-toggle[aria-pressed="true"] .pw-eye {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 4.3 4.3 3 21 19.7 19.7 21l-2.6-2.6A12.6 12.6 0 0 1 12 19c-5 0-9.3-3.1-11-7a13.3 13.3 0 0 1 4.4-5.3L3 4.3zM12 9a3 3 0 0 1 3 3l-3-3zm0-4c5 0 9.3 3.1 11 7a13.4 13.4 0 0 1-3.5 4.6l-1.5-1.5A11 11 0 0 0 21.1 12C19.5 8.6 16 7 12 7c-.7 0-1.3.1-2 .2L8.3 5.5C9.5 5.2 10.7 5 12 5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 4.3 4.3 3 21 19.7 19.7 21l-2.6-2.6A12.6 12.6 0 0 1 12 19c-5 0-9.3-3.1-11-7a13.3 13.3 0 0 1 4.4-5.3L3 4.3zM12 9a3 3 0 0 1 3 3l-3-3zm0-4c5 0 9.3 3.1 11 7a13.4 13.4 0 0 1-3.5 4.6l-1.5-1.5A11 11 0 0 0 21.1 12C19.5 8.6 16 7 12 7c-.7 0-1.3.1-2 .2L8.3 5.5C9.5 5.2 10.7 5 12 5z'/></svg>") center / contain no-repeat;
}
.pw-rules {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  font-size: 0.75rem;
  color: var(--muted);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 8px;
  row-gap: 2px;
}
.pw-rules li {
  margin: 0;
  font-size: inherit;
  white-space: nowrap;
}
.pw-rules [data-rule="len"] { grid-column: 1; grid-row: 1; }
.pw-rules [data-rule="upper"] { grid-column: 1; grid-row: 2; }
.pw-rules [data-rule="lower"] { grid-column: 1; grid-row: 3; }
.pw-rules [data-rule="digit"] {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}
.pw-rules [data-rule="symbol"] {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  text-align: right;
}
.pw-rules li.ok { color: var(--green); font-weight: 600; }
.pw-rules li.miss { color: var(--red); }

h1 { font-size: 1.2rem; margin: 0 0 8px; }

/* Footer — never steal the product screen */
.legal {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}
body.product .legal { padding-top: 8px; font-size: 0.75rem; }
body.card-list .legal,
body.product .legal { color: #F6F4EF; }
body.card-list .legal a,
body.product .legal a { color: #F6F4EF; }
.inline { display: inline; }
button.text {
  background: none;
  border: 0;
  color: var(--green);
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
}
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Account / FAQ / paywall — not racecard */
.account-page-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.account-email {
  font-size: 0.9375rem;
  margin: 0 0 14px;
  word-break: break-all;
}
.account-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0 0 10px;
}
.account-block h2 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
}
.account-block p { margin: 0 0 8px; font-size: 0.875rem; font-weight: 400; }
.account-block form { margin: 0; }
.pass-status.active { color: var(--green); font-weight: 700; }
.pass-status.expired,
.pass-status.none { color: var(--muted); font-weight: 700; }
.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  font-size: 0.9375rem;
}
.account-nav a,
.account-nav button.text {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 8px;
}
.faq summary {
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  min-height: 32px;
}
.faq details p {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--ink);
}
.auth-card .faq {
  overflow-y: auto;
  max-height: 9rem;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 4px;
  padding-right: 4px;
}
.auth-card .faq details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 2px;
  margin: 0;
}
.auth-card .faq details:last-of-type { border-bottom: 0; }
.auth-card .contact { margin: 4px 0 0; }

a.primary {
  text-decoration: none;
  text-align: center;
  color: #fff;
}

/* Landing — same photo + 38% green scrim as Account; same wordmark size/slot.
   Viewport is pinned; expanded “more” copy scrolls inside the cream card. */
html:has(body.landing) { background: var(--paper); }
body.landing {
  color: #F6F4EF;
  background-color: transparent;
  isolation: isolate;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.landing .toggle,
body.landing .account-link,
body.landing .keys,
body.landing .daypass-link,
body.landing .sub { display: none; }
body.landing .landing-signin {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  border-radius: 999px;
  padding: 6px 11px;
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
}
body.landing .top,
body.landing .legal {
  flex: 0 0 auto;
}
body.landing main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.landing-fold {
  flex: 0 0 auto;
  min-height: 0;
}
body.landing h1 {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #F6F4EF;
  text-shadow: 0 1px 8px rgba(20, 14, 12, 0.45);
}
.landing-ctas { margin: 0 0 6px; }
.landing-ctas .primary {
  margin-top: 0;
  border: 2px solid #000;
}
.landing-tiles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
}
.landing-tile .badge {
  margin-left: 0;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  min-width: 5.5rem;
  padding: 0 12px;
  text-align: center;
  overflow: hidden;
  line-height: 1;
  font-weight: 700;
}
.landing-tile.steady,
.landing-tile.juicy {
  border-width: 2px;
}
.landing-tile.steady {
  background: var(--beige);
}
.landing-tile p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
  font-style: italic;
  text-align: center;
}
.landing-tile.steady p { color: var(--green); }
.landing-tile.juicy {
  border-color: var(--chili);
}
.landing-tile.juicy p { color: var(--chili); }
.landing-next {
  margin: 6px 0 0;
  color: #F6F4EF;
  font-size: 0.8125rem;
  text-align: center;
  text-shadow: 0 1px 6px rgba(20, 14, 12, 0.4);
}
.landing-essay {
  margin: 0;
  background: rgba(246, 244, 239, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  border: 0;
  border-radius: 16px;
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}
.landing-essay h2 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.landing-lede {
  margin: 0 0 2px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink);
}
.landing-more {
  overflow-anchor: none;
  min-height: 0;
}
.landing-more > summary,
.landing-less {
  color: var(--green);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.landing-more > summary::-webkit-details-marker { display: none; }
.landing-less { display: none; margin-top: 2px; }
.landing-more[open] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.landing-more[open] > summary { display: none; }
.landing-more[open] .landing-less {
  display: inline-flex;
  flex: 0 0 auto;
}
.landing-more[open] .landing-copy {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: min(42dvh, 18rem);
  padding-right: 4px;
}
.landing-copy {
  padding: 0;
}
.landing-copy p {
  font-size: 0.875rem;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--ink);
}
.landing-copy p:last-child { margin-bottom: 0; }

/* Photo pages — SteadyJuicy cover, light green scrim, cream header wash.
   Missing image → cream. Home/product pin the photo so long lists do not stretch it. */
html:has(body.auth),
html:has(body.account),
html:has(body.card-list),
html:has(body.product) { background: var(--paper); }
body.auth,
body.account {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(27, 77, 62, 0.38), rgba(27, 77, 62, 0.38)),
    image-set(
      url("/static/steady-juicy.webp?v=1") type("image/webp"),
      url("/static/steady-juicy.jpeg?v=1") type("image/jpeg")
    );
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}
body.card-list,
body.product {
  color: var(--ink);
  background-color: transparent;
  isolation: isolate;
}
body.landing::before,
body.card-list::before,
body.product::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(430px, 100vw);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(27, 77, 62, 0.38), rgba(27, 77, 62, 0.38)),
    image-set(
      url("/static/steady-juicy.webp?v=1") type("image/webp"),
      url("/static/steady-juicy.jpeg?v=1") type("image/jpeg")
    );
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}
body.auth .toggle,
body.auth .account-link,
body.auth .keys,
body.auth .daypass-link { display: none; }
body.auth main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body.auth .auth-card {
  margin-top: auto;
  margin-bottom: 12px;
  width: 100%;
}
body.auth .auth-mark { display: none; }
body.legal-page main {
  min-height: 0;
  overflow: hidden;
}
body.legal-page .auth-card {
  max-height: min(62dvh, 28rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.legal-page .legal-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-right: 4px;
}
body.legal-page .legal-scroll h1 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

body.legal-page .legal-scroll p {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.35;
}
body.legal-page .legal-scroll p:last-child { margin-bottom: 0; }
body.auth .legal,
body.account .legal,
body.landing .legal { color: #F6F4EF; }
body.auth .legal a,
body.account .legal a,
body.landing .legal a { color: #F6F4EF; }
body.landing .top,
body.account .top,
body.auth .top,
body.card-list .top,
body.product .top {
  margin: -8px -14px 8px;
  padding: 8px 14px 14px;
  background: linear-gradient(
    180deg,
    rgba(246, 244, 239, 0.5) 0%,
    rgba(246, 244, 239, 0.22) 62%,
    rgba(246, 244, 239, 0) 100%
  );
}
body.card-list .hint,
body.product .skip-line,
body.product .attitude,
body.product .back,
body.product .center.muted {
  color: #F6F4EF;
}
body.product .field {
  background: rgba(246, 244, 239, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 8px 12px;
}
body.card-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.card-page .top {
  margin-bottom: 2px;
  padding-bottom: 6px;
}
body.card-page main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.card-page .racehead { margin: 0 0 6px; }
body.card-page .split-banner { margin: 0 0 8px; }
body.card-page .field-scroll .attitude {
  color: var(--muted);
}
body.card-page .field-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(246, 244, 239, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 8px 12px;
}
body.card-page .field-scroll .field {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin: 0;
}
body.card-page .sticky-cta {
  position: static;
  flex: 0 0 auto;
  margin-top: 8px;
  padding-bottom: 0;
}
body.account main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body.account .auth-card {
  margin-top: auto;
  margin-bottom: 12px;
  width: 100%;
}
body.account .account-block {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
body.account .account-nav {
  gap: 0;
  margin: 4px 0 0;
}
body.account .account-nav a,
body.account .account-nav button.text {
  min-height: 32px;
}
body.account .account-nav.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 8px;
}
.account-nav-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.account-nav-col.meta {
  align-items: flex-end;
}
.account-nav-col.meta a,
.account-nav-col.meta button.text {
  justify-content: flex-end;
  text-align: right;
  text-decoration: none;
}
body.account .primary { text-align: center; text-decoration: none; }
.auth-card {
  background: rgba(246, 244, 239, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  border-radius: 16px;
  padding: 18px 16px 16px;
  margin: 36px 4px 16px;
}
body.auth .form input[type=email],
body.auth .form input[type=password],
body.account .form input[type=email],
body.account .form input[type=password] {
  background: #fff;
}
.auth-card h1 {
  color: var(--ink);
  text-shadow: none;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-mark {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  margin: 0 auto 14px;
}
.auth-card .hint,
.auth-card p { color: var(--ink); }
.auth-card a { color: var(--green); }
.auth-card a.primary { color: #fff; }
.auth-card .cancel { color: var(--green); }

/* Add to Home Screen — never a full-screen trap */
.install-coach {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 80;
  pointer-events: none;
  padding: 0 14px;
  box-sizing: border-box;
}
body.card-list .install-coach:not([hidden]) {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  max-width: none;
  padding: 0;
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  pointer-events: auto;
  flex: 0 0 auto;
}
.install-sheet {
  pointer-events: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 8px 24px rgba(20, 14, 12, 0.16);
}
.install-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.install-sheet h2 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
  flex: 1 1 auto;
  padding-top: 6px;
}
.install-icon {
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: contain;
}
.install-steps {
  margin: 0 0 8px;
  padding-left: 1.2rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.install-steps li { margin: 0 0 2px; }
.install-why {
  margin: 0 0 8px;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.4;
}
.install-dismiss {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 44px;
  padding: 8px;
  cursor: pointer;
}
@media (display-mode: standalone) {
  .install-coach,
  [data-install-native],
  [data-install-open] { display: none !important; }
}
.contact { font-size: 0.875rem; color: var(--muted); margin-top: 16px; }
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  background: transparent;
  border: 1px solid var(--green);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
}
.account-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 390px) {
  body { padding-left: 12px; padding-right: 12px; }
}