/* OLDMAN WOLL: the gentleman's study from the brand portrait (walnut, leather, tweed, burgundy
   tie, brass), with racecard-style condensed figures and betting-slip yellow kept for prices only. */
:root {
  --green: #5c1a24;      /* burgundy (his jumper and pocket square): headings, buttons */
  --walnut: #251912;     /* masthead and footer, like the panelling behind him */
  --brass: #c9a25a;      /* the lamp and the sign's lettering */
  --ink: #221812;        /* body text */
  --chalk: #f7f6f3;      /* page */
  --paper: #ffffff;      /* cards */
  --slip: #f2c230;       /* betting-slip yellow: prices only */
  --sky: #2c5f8a;        /* football */
  --rule: #d9ddd3;
  --muted: #56615a;
  --win: #1d7a45;
  --loss: #a33a2c;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sign: "Cinzel", Georgia, serif;   /* the lettering on his sign: wordmark and main headline only */
  --body: "Public Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 1rem/1.6 var(--body); }
a { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem 1rem; z-index: 10; }

/* Masthead */
.masthead { background: var(--walnut); color: #fff; border-bottom: 3px solid var(--brass); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; font: 700 1.45rem/1 var(--sign); letter-spacing: .06em; color: var(--brass); text-decoration: none; }
.brand img { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--brass); object-fit: cover; }
.brand small { display: block; font: 500 .8rem/1.3 var(--body); letter-spacing: .02em; color: #e8dcc5; }
.nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.nav a, .nav button.link { color: #fff; text-decoration: none; font-weight: 500; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

.account { margin-left: 1.25rem; }
.account .link { color: #fff; font-weight: 500; }
.tabbar { display: none; }

/* Type */
h1, h2, h3 { font-family: var(--display); color: var(--green); line-height: 1.05; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; margin: 2.5rem 0 1rem; max-width: 20ch; }
.hero h1 { font-family: var(--sign); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; }
h2 { font-size: 2rem; font-weight: 600; margin: 3rem 0 .5rem; }
h3 { font-size: 1.4rem; font-weight: 600; margin: 0 0 .5rem; }
.lede { font-size: 1.15rem; max-width: 60ch; }
.note { color: var(--muted); font-size: .9rem; margin-top: 0; }
.small { font-size: .85rem; color: var(--muted); }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; padding: 1rem 0 2rem; border-bottom: 4px solid var(--brass); }
.hero-portrait { margin: 2rem 0 0; }
.hero-portrait img { display: block; width: 100%; height: auto; border: 6px solid var(--walnut); outline: 2px solid var(--brass); outline-offset: -12px; }
.hero-portrait figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

.button { display: inline-block; background: var(--green); color: #fff; border: 2px solid var(--green); padding: .7rem 1.3rem; font: 600 1rem var(--body); text-decoration: none; cursor: pointer; border-radius: 3px; }
.button.quiet { background: transparent; color: var(--green); margin-left: .5rem; }
.button:hover { background: #431219; }
.button.quiet:hover { background: #f1e6e7; }

/* Track record table */
.record table { width: 100%; border-collapse: collapse; background: var(--paper); }
.record th, .record td { padding: .65rem .75rem; text-align: right; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.record th:first-child, .record td:first-child { text-align: left; }
.record thead th { font: 600 1rem var(--display); color: var(--muted); border-bottom: 2px solid var(--ink); }
.pos { color: var(--win); font-weight: 600; }
.neg { color: var(--loss); font-weight: 600; }
.record-scroll { overflow-x: auto; }

.grades { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; }
.grades div { border-left: 4px solid var(--brass); padding: .25rem 0 .25rem 1rem; }
.grades dt { font: 600 1.25rem var(--display); color: var(--green); }
.grades dd { margin: .25rem 0 0; }

.nobet { margin: 2rem 0; padding: 1rem 1.25rem; background: var(--paper); border: 1px dashed var(--rule); }
.nobet dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.nobet dt { font-weight: 600; }
.nobet dd { margin: 0; color: var(--muted); }

/* Picks: each one laid out like a racecard line */
.card { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; background: var(--paper); border-top: 4px solid #1f5c3c; padding: 1rem 1.25rem; margin: 0 0 1rem; }
.card.football { border-top-color: var(--sky); }
.card-label { grid-column: 1 / -1; font: 600 1.05rem var(--display); color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; }
.card-sel { font: 700 1.8rem/1.1 var(--display); color: var(--ink); }
.card-event { color: var(--muted); }
.card-price { grid-row: 2 / span 2; grid-column: 2; align-self: center; text-align: center; background: var(--slip); color: var(--ink); padding: .5rem .9rem; min-width: 5.5rem; }
.card-price b { display: block; font: 700 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.card-price span { font-size: .8rem; }
.chance { grid-column: 1 / -1; margin-top: .6rem; }
.chance-bar { position: relative; height: .6rem; background: #e7eae3; }
.chance-bar .model { position: absolute; inset: 0 auto 0 0; background: #1f5c3c; }
.chance-bar .market { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; background: var(--ink); }
.card.football .chance-bar .model { background: var(--sky); }
.chance-text { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.legs { grid-column: 1 / -1; margin: .5rem 0 0; padding-left: 1.2rem; }
.result { font-weight: 600; }
.result.win, .result.placed { color: var(--win); }
.result.loss, .result.unplaced { color: var(--loss); }

.age-gate { max-width: 34rem; }
.check { display: flex; gap: .6rem; align-items: center; font-weight: 500; margin: 1rem 0; }
.check input { width: 1.25rem; height: 1.25rem; }
.form-error { color: var(--loss); font-weight: 600; }
.loading { color: var(--muted); }

.footer { margin-top: 4rem; background: var(--walnut); color: #ece4d6; padding: 2rem 0; border-top: 3px solid var(--brass); }
.footer a { color: #fff; }
.footer .small { color: #cbbfa9; }
.eighteen strong { display: inline-block; border: 2px solid #fff; border-radius: 50%; width: 2.4rem; height: 2.4rem; line-height: 2.1rem; text-align: center; margin-right: .5rem; font-family: var(--display); }

@media (max-width: 36rem) {
  .brand small { display: none; }
  .card { grid-template-columns: 1fr; }
  .card-price { grid-row: auto; grid-column: 1; justify-self: start; display: flex; gap: .6rem; align-items: baseline; }
  .button.quiet { margin: .75rem 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Shown while a paused test database wakes up */
body.waking::after { content: "Loading. The test database is waking up, which takes a few seconds."; position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .6rem 1rem; font-size: .9rem; max-width: 90vw; }

/* What the model says */
.says-day { font-size: 1.1rem; margin-bottom: .5rem; }
.says { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.says li { font-size: 1.05rem; display: flex; align-items: baseline; gap: .6rem; }
.says b { flex: none; display: inline-block; min-width: 1.6rem; font: 700 1.6rem/1 var(--display); color: var(--green); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- phones: app layout
   Slim top bar, bottom tab bar, compact portrait, 44px touch targets, notch-safe spacing. */
@media (max-width: 48rem) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .wrap { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .masthead { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); }
  .masthead-inner { min-height: 3.5rem; flex-wrap: nowrap; }
  .brand { font-size: 1.15rem; gap: .55rem; }
  .brand img { width: 2.2rem; height: 2.2rem; }
  .brand small { display: none; }
  .nav { display: none; }
  .account { display: none; }   /* the tab bar carries Sign in / Sign out on phones */

  /* Compact hero: small framed portrait beside a shorter headline */
  .hero { grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; padding: 1.25rem 0 1.5rem; }
  .hero > div:first-child { display: contents; }
  .hero h1 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.35rem; line-height: 1.2; align-self: center; }
  .hero .lede { grid-column: 1 / -1; font-size: 1rem; margin: 0; }
  .hero p:last-child { grid-column: 1 / -1; margin: 0; }
  .hero-portrait { grid-column: 1; grid-row: 1; order: 0; margin: 0; max-width: none; }
  .hero-portrait img { border-width: 3px; outline-offset: -7px; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; }

  h1 { font-size: 1.9rem; margin: 1.25rem 0 .75rem; }
  h2 { font-size: 1.6rem; margin: 2rem 0 .4rem; }
  .button { display: block; width: 100%; text-align: center; min-height: 48px; padding: .8rem 1rem; }
  .button.quiet { margin: .75rem 0 0; }
  .says b { font-size: 1.4rem; }
  .nobet { padding: .9rem 1rem; }
  .nobet dl { grid-template-columns: 1fr; gap: .1rem; }
  .nobet dd { margin-bottom: .6rem; }
  .grades { grid-template-columns: 1fr; }

  /* Picks: full-bleed cards like an app list */
  .card { margin: 0 -1rem .75rem; padding: .9rem 1rem; }
  .card-sel { font-size: 1.5rem; }
  .check { min-height: 44px; }
  .check input { width: 1.5rem; height: 1.5rem; }

  /* Results table becomes stacked rows */
  .record table, .record tbody, .record tr, .record td { display: block; width: 100%; }
  .record thead { display: none; }
  .record tr { background: var(--paper); margin-bottom: .6rem; padding: .5rem .75rem; }
  .record td { display: flex; justify-content: space-between; border: 0; padding: .2rem 0; text-align: right; }
  .record td:first-child { font-weight: 600; text-align: left; }
  .record td:nth-child(2)::before { content: "Settled"; }
  .record td:nth-child(3)::before { content: "Won"; }
  .record td:nth-child(4)::before { content: "Staked"; }
  .record td:nth-child(5)::before { content: "Returned"; }
  .record td:nth-child(6)::before { content: "Profit"; }
  .record td:nth-child(7)::before { content: "Return on stake"; }
  .record td::before { color: var(--muted); font-weight: 400; }

  .footer { margin-top: 2.5rem; padding: 1.5rem 0; font-size: .9rem; }

  /* Bottom tab bar */
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
            background: var(--walnut); border-top: 2px solid var(--brass); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
            min-height: 3.75rem; color: #d8ccb6; text-decoration: none; font: 500 .75rem var(--body); background: none; border: 0; cursor: pointer; }
  .tabbar svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
  .tabbar a[aria-current="page"] { color: var(--brass); font-weight: 700; box-shadow: inset 0 3px 0 var(--brass); background: rgba(201, 162, 90, .12); }
}

/* What the model says: football and racing kept apart, rolled up by week */
.headline { font: 600 1.35rem/1.3 var(--body); color: var(--ink); margin: .5rem 0 1rem; }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.total { background: var(--paper); border-top: 4px solid var(--brass); padding: .8rem 1rem; }
.total.football { border-top-color: var(--sky); }
.total.racing { border-top-color: #1f5c3c; }
.total h3 { font-size: 1.25rem; margin: 0 0 .25rem; }
.total-wl { font: 700 2rem/1 var(--display); margin: 0; font-variant-numeric: tabular-nums; }
.total-wl span { font: 500 .9rem var(--body); color: var(--muted); }
.total-pnl { font-weight: 600; margin: .35rem 0 0; font-variant-numeric: tabular-nums; }
.total-pnl span { font-weight: 400; color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); font-size: .9rem; }
.run { margin: 1rem 0; }
.by-week { margin-top: 1.5rem; }
.week { background: var(--paper); margin-bottom: .75rem; border-left: 4px solid var(--brass); }
.week summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; cursor: pointer; min-height: 48px; font-weight: 600; list-style: none; }
.week summary::-webkit-details-marker { display: none; }
.week summary::after { content: "▾"; color: var(--muted); }
.week[open] summary::after { content: "▴"; }
.week-name { flex: 1; }
.week-lines { padding: 0 1rem .5rem; border-bottom: 1px solid var(--rule); }
.ln { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-variant-numeric: tabular-nums; }
.ln-name { color: var(--muted); }
.days { list-style: none; margin: 0; padding: 0 1rem .5rem; }
.day { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.day:last-child { border-bottom: 0; }
.day-head { display: flex; justify-content: space-between; margin-bottom: .25rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.chip { font-size: .8rem; background: #f1efe9; padding: .2rem .5rem; border-radius: 1rem; }
.chip.win b, .chip.placed b { color: var(--win); }
.chip.loss b, .chip.unplaced b { color: var(--loss); }
@media (max-width: 48rem) {
  .totals { grid-template-columns: 1fr; gap: .5rem; }
  .total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 1rem; }
  .total h3 { grid-column: 1 / -1; }
  .total-wl { font-size: 1.7rem; }
  .total-pnl { margin: 0; text-align: right; }
  .headline { font-size: 1.2rem; }
}

/* Old Man Woll's daily line */
.today { background: var(--paper); border-left: 4px solid var(--brass); padding: .7rem 1rem; margin: 0 0 1.25rem; }
.today p { margin: .2rem 0; font-size: 1.05rem; }
.today:empty { display: none; }
@media (max-width: 48rem) {
  .today { grid-column: 1 / -1; margin: 0; }
}

/* ---------------------------------------------------------------- release stages
   Pre-alpha (grey, rough) -> Alpha (brass) -> Beta (tweed blue) -> Live (burgundy, the paid membership). */
.stage { display: inline-block; vertical-align: middle; font: 700 .72rem/1 var(--body); letter-spacing: .03em;
         padding: .28rem .5rem; border-radius: 2px; border: 1.5px solid currentColor; white-space: nowrap; }
.stage.prealpha { color: #5d5d58; background: #ecebe6; border-style: dashed; }
.stage.alpha { color: #6b4e14; background: #f6ecd3; }
h1 .stage, h2 .stage { font-size: .8rem; margin-left: .35rem; position: relative; top: -.15em; }

.stage-strip { background: #f6ecd3; border-bottom: 1px solid #e3cf9f; font-size: .88rem; }
.stage-strip a { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem 0; color: var(--ink); text-decoration: none; }
.stage-strip .how { text-decoration: underline; color: var(--green); font-weight: 600; }

.stages { margin: 2rem 0 0; }
.stages > p { max-width: 62ch; }
.stage-track { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: st; }
.st { position: relative; padding: 1.6rem .9rem .9rem 0; border-top: 4px solid var(--rule); counter-increment: st; }
.st::before { content: counter(st); position: absolute; top: -.85rem; left: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
              background: var(--chalk); border: 3px solid var(--rule); font: 700 .8rem/1.05rem var(--body); text-align: center; color: var(--muted); }
.st b { display: block; font: 700 1.3rem/1.1 var(--display); color: var(--ink); }
.st span { display: block; font-size: .9rem; color: var(--muted); margin-top: .25rem; }
.st .here { display: inline-block; margin-top: .5rem; font: 700 .8rem var(--body); font-style: normal; padding: .2rem .5rem; }
.st.prealpha, .st.alpha { border-top-color: var(--brass); }
.st.prealpha::before, .st.alpha::before { border-color: var(--brass); background: var(--brass); color: var(--walnut); }
.st.prealpha .here { background: #ecebe6; color: #5d5d58; border: 1.5px dashed #5d5d58; }
.st.alpha .here { background: #f6ecd3; color: #6b4e14; border: 1.5px solid #6b4e14; }
.st.live b { color: var(--green); }

.stage-note { color: var(--muted); font-size: .92rem; margin-top: 0; max-width: 62ch; }
.today-tag { font: 600 .95rem var(--body); margin: 0 0 .2rem !important; color: var(--muted); }
.totals.cols-2 { grid-template-columns: repeat(2, 1fr); }
.totals.cols-1 { grid-template-columns: minmax(0, 24rem); }
.total h3 .stage { font-size: .65rem; margin-left: .25rem; }
.pick-group { margin-top: 1.5rem; }

.lab-link { display: grid; gap: .3rem; margin: 2.5rem 0 0; padding: 1rem 1.25rem; background: var(--paper);
            border: 2px dashed #b9b7ae; color: var(--ink); text-decoration: none; }
.lab-link:hover { border-color: var(--green); }
.lab-title { font: 600 1.5rem/1.1 var(--display); color: var(--green); }
.lab-go { font-weight: 600; color: var(--green); text-decoration: underline; }
#view-racing h1 { max-width: none; }

@media (max-width: 48rem) {
  .stage-strip { font-size: .8rem; }
  .stage-strip .how { flex-basis: 100%; }
  .stage-track { grid-template-columns: 1fr; gap: 0; border-left: 4px solid var(--rule); margin-left: .7rem; }
  .st { border-top: 0; padding: .1rem 0 1rem 1.3rem; }
  .st::before { top: 0; left: -.95rem; }
  .st.prealpha, .st.alpha { border-left: 4px solid var(--brass); margin-left: -4px; }
  .totals.cols-2, .totals.cols-1 { grid-template-columns: 1fr; }
  .lab-link { margin: 2rem 0 0; }
}

/* Details step and admin page */
.field { display: grid; gap: .3rem; font-weight: 500; margin: 1rem 0; max-width: 24rem; }
.field input { font: inherit; padding: .65rem .75rem; border: 2px solid var(--rule); border-radius: 3px; min-height: 44px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1rem 0 1.5rem; }
.admin-stats div { background: var(--paper); border-top: 4px solid var(--brass); padding: .8rem 1rem; }
.admin-stats b { display: block; font: 700 2.2rem/1 var(--display); color: var(--green); font-variant-numeric: tabular-nums; }
.admin-stats span { color: var(--muted); font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left !important; }
.admin-table tr.new td { background: #fbf6e8; }
@media (max-width: 48rem) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-table td:nth-child(2)::before { content: "Email"; }
  .admin-table td:nth-child(3)::before { content: "Signed up"; }
  .admin-table td:nth-child(4)::before { content: "Email confirmed"; }
  .admin-table td:nth-child(5)::before { content: "18+"; }
  .admin-table td:nth-child(6)::before { content: "Sign-ins"; }
  .admin-table td:nth-child(7)::before { content: "Last signed in"; }
  .admin-table td { text-align: right !important; gap: 1rem; }
  .admin-table td:first-child { text-align: left !important; }
}
.admin-m { display: none; }
@media (max-width: 48rem) {
  .admin-m:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass); font-weight: 600; }
}
.today .asof { margin-top: .5rem !important; }
.totals.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 48rem) { .totals.cols-3 { grid-template-columns: 1fr; } }
.pos, .neg { white-space: nowrap; }

/* Latest news */
.news { margin-top: 2rem; }
.news-item { background: var(--paper); border-left: 4px solid var(--green); margin-bottom: .6rem; }
.news-item summary { display: grid; gap: .1rem; padding: .8rem 1rem; cursor: pointer; list-style: none; min-height: 48px; }
.news-item summary::-webkit-details-marker { display: none; }
.news-item time { font-size: .85rem; color: var(--muted); }
.news-item summary span { font: 600 1.15rem/1.25 var(--body); color: var(--ink); }
.news-item p { margin: 0 1rem .75rem; max-width: 62ch; }
.news-item[open] summary { padding-bottom: .4rem; }
.admin-table td:nth-child(6) { text-align: right !important; font-variant-numeric: tabular-nums; }