/*
  THE PUBLIC SITE CARRIES THE WIN THE WEEK IDENTITY, NOT THE APP'S SCREEN
  CHROME. `theme.css` is still loaded (see affiliate.html) but ONLY for its
  structural [hidden] fix, shared by every page that toggles the attribute —
  see hidden-attribute.test.ts. Its `:root` palette and blue accent are the
  in-app product's own colour, unrelated to the racecourse identity this brand
  is built to be recognised by (`docs/BRAND.md`) — a stranger landing on this
  domain has never opened the app and has nothing to match it against — so
  every token and rule below is deliberately redeclared to override it. The
  tokens are that identity's palette and type stack, ported as CSS rather
  than restated by eye, so a change to the source stays the one place this
  ever needs to be corrected from.

  This is a "ledger" surface in that identity's own terms: a scannable list of
  prices, read carefully, same family as the race card. Paper body, turf
  masthead, gold for anything live or actionable — never decorative.
*/

:root {
  --turf: #0a3a28;
  --paper: #efe3c8;
  --paper-alt: #e8dabb;
  --rule: #d3bf95;
  --gold: #c8a24a;
  --ink: #171310;
  --ink-soft: #6b5e48;
  --claret: #8e2434;
  --muted-on-turf: #8fa79a;
}

* {
  box-sizing: border-box;
}

/*
  OSWALD IS A LABEL FACE, NOT A READING FACE — the brand's own type table
  (§4) never lists it for paragraph copy, only for names, prices, headlines
  and column heads. The first cut set it as the page's default font, which
  put every sentence of prose on the site into a condensed display face:
  legible on a card's short lines, hard going on desktop where a paragraph
  is read at length. The system stack is the reading face; Oswald is opted
  into explicitly, only where the brand table actually asks for it.
*/
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 32px;
}

/* ---- Masthead — the wordmark, always Bitter ExtraBold, gold on turf. ---- */
.masthead {
  background: var(--turf);
  padding: 22px 16px 16px;
  text-align: center;
}
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.brand {
  font-family: Bitter, serif;
  font-weight: 800;
  font-size: clamp(24px, 6vw, 32px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.tag {
  margin-top: 4px;
  color: var(--muted-on-turf);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}
.card h1,
.card h2 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.card h1 {
  font-size: 21px;
  margin: 0 0 8px;
}
.card h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.card p {
  margin: 0 0 12px;
}
.card p:last-child {
  margin-bottom: 0;
}

/* Turf-bodied — a statement, not a ledger: one call to action, read at a
   glance. Same distinction §6 of the brand doc draws between card families. */
.card-turf {
  background: var(--turf);
  border-color: var(--turf);
  color: var(--paper);
}
.card-turf h2 {
  color: var(--gold);
}
.card-turf p {
  color: var(--muted-on-turf);
}

.muted {
  color: var(--ink-soft);
}
.small {
  font-size: 13px;
}

#search input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}
#search input::placeholder {
  color: var(--ink-soft);
}

#results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
#results li {
  margin-bottom: 6px;
}
#results button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
#results button:hover {
  border-color: var(--gold);
}
/* A NAME, per the brand's own type table (§4) — Oswald Bold, same face the
   team header and every offer's subject use. */
.result-team {
  font-family: Oswald, sans-serif;
  font-weight: 700;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.team-name {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

#offers {
  list-style: none;
  margin: 0;
  padding: 0;
}
#offers li {
  margin-bottom: 8px;
}
/*
  THE PRICE PANEL — the most reused component in the identity (§5): a filled
  gold rectangle, rx=4, holding a price. Gold is the meaning "live value", so
  this is the one place on the page that colour appears — the offer row
  itself stays paper, the tap-out stays gold.
*/
.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.offer:hover {
  border-color: var(--gold);
}
.offer-label {
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.offer-cta {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--ink);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* A secondary action — outline, not filled, per the status-chip rule (§5):
   filled marks something LIVE, outline marks something PENDING/secondary. */
.share-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 4px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.share-btn:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

#rg {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}
#rg a {
  color: var(--ink);
}