/* pick.live — mobile-first, no build pipeline. */

:root {
  /* NYRA Saratoga scheme: black chrome, zinc neutrals, Saratoga red. */
  --bg: #f7f7f8;
  --card: #ffffff;
  --ink: #27272a;          /* zinc-800, NYRA body text */
  --muted: #71717a;        /* zinc-500 */
  --line: #e4e4e7;         /* zinc-200 */
  --chrome: #0a0a0a;       /* NYRA black header */
  --chrome-ink: #f4f4f5;
  --accent: #dd0031;       /* Saratoga red (NYRA --color-sar) */
  --accent-ink: #ffffff;
  --gold: #997c43;         /* NYRA gold */
  --up: #007647;           /* Belmont green (NYRA --color-bel) */
  --down: #dd0031;
  --refund: #8a6d1a;
  --radius: 9px;
  /* 16px scaled down ~15%: shrinks the whole rem-based layout together. */
  font-size: 13.6px;
  /* The palette is light-only; without this, iPadOS dark mode paints native
     form controls (buttons, checkboxes) with white text on our white cards. */
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
main { max-width: 720px; margin: 0 auto; padding: 1rem; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; }
.muted { color: var(--muted); font-size: 0.85rem; }
.pos { color: var(--up); } .neg { color: var(--down); }

/* Header */
.site-header {
  background: var(--chrome);
  color: var(--chrome-ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem;
}
.brand { font-weight: 800; font-size: 1.2rem; color: #ffffff; text-decoration: none; letter-spacing: 0.02em; }
.brand-dot { color: var(--accent); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-left: auto; }
.site-header nav a { color: #a1a1aa; text-decoration: none; font-size: 0.95rem; }
.site-header nav a:hover { color: #ffffff; }
.inline-form { display: inline; }
.linklike { background: none; border: none; color: #a1a1aa; cursor: pointer; font-size: 0.95rem; padding: 0; }
.linklike:hover { color: #fff; }

/* Messages */
.messages { max-width: 720px; margin: 0.75rem auto 0; padding: 0 1rem; }
.message { border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; font-size: 0.95rem; }
.message-success { background: #e3f0ea; color: #007647; }
.message-error { background: #fbe4e9; color: #a30026; }
.message-warning { background: #f5eeda; color: #7a5d12; }

/* Root For board — dark chrome, deliberately unlike the white feed cards:
   the trackside board, not another post. Numbers only, ordered by how many
   live tickets lean on each horse. */
.root-for {
  background: linear-gradient(180deg, #1c1c1f, #0a0a0a);
  color: var(--chrome-ink);
  border-radius: var(--radius);
  border: 1px solid #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 0.75rem 0.95rem 0;
  margin: 1rem 0;
}
/* One run of text — dot, bold question, race — so nothing can wrap apart
   or sit off-baseline. Bold alone separates the question from the race. */
.root-for-line { margin: 0 0 0.65rem; font-size: 1.05rem; font-weight: 400; color: #ffffff; }
.root-for-line strong { font-weight: 700; }
/* Pulsing live dot — the one piece of motion on the page, and it earns it:
   the dot swells and throws a ring so the pulse reads at a glance. */
.live-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--accent); margin-right: 0.5rem; vertical-align: 0.06em;
  animation: root-pulse 1.4s ease-in-out infinite;
}
@keyframes root-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(221, 0, 49, 0.55); }
  50% { transform: scale(1.3); box-shadow: 0 0 0 7px rgba(221, 0, 49, 0); }
}
.root-for-horses { display: flex; flex-wrap: wrap; gap: 0.7rem; padding-bottom: 0.85rem; }
/* Numbers run big — the thing you glance at from the rail — with a white
   keyline so dark cloths hold their shape on the chrome. */
.root-for .cloth { width: 2.5rem; height: 2.5rem; font-size: 1.35rem; border-color: rgba(255, 255, 255, 0.55); }
.root-for-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0 -0.95rem;
  padding: 0.45rem 0.95rem 0.5rem;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 0.9rem;
  font-size: 0.9rem;
}
.root-for-footer-label { color: #8a8a93; }
.root-for-footer a { color: #e3b93e; font-weight: 600; text-decoration: none; white-space: nowrap; }
.root-for-footer a:hover { text-decoration: underline; }

/* Posts.
   Header: title on top, then one tight meta line — race · pool bold,
   track · date soft — everything else lives with the tickets. */
/* Body copy inside a post runs one step above the site base for phone
   legibility; .commentary and .post-total inherit it. */
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; font-size: 1.05rem; }
.post-header h2 { margin: 0 0 0.35rem; font-size: 1.7rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.post-header h2 a { color: inherit; text-decoration: none; }
.post-wager-line { margin: 0.15rem 0 0.5rem; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.post-wager-line .soft { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.post-header .sep { color: #a1a1aa; font-weight: 400; }
/* Total Bet opens the post body as a plain paragraph — it inherits the
   body type wholesale and only spaces itself; commentary reads on from
   it as a continuation. */
.post-total { margin: 0.5rem 0; }
.cloth-scratched { opacity: 0.4; text-decoration: line-through; }
.cloth-winner { position: relative; }
.cloth-winner::after {
  /* Green check badge centered on the cloth's lower-right corner. */
  content: "\2713";
  position: absolute; right: 0; bottom: 0;
  transform: translate(50%, 50%);
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--up); border: 1.5px solid #fff; color: #fff;
  font-size: 0.5rem; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Winners page */
.day-select {
  display: block; width: 100%; margin: 1rem 0 0; padding: 0.5rem 0.75rem;
  font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.winners-day { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0; display: none; }
.winners-day.active { display: block; }
/* File-folder tabs: separated boxes with rounded tops; the active tab merges
   into the panel below and carries a red top bar. Row scrolls if 12+ overflow. */
.race-tabs {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line); margin: 0.6rem 0 0.85rem;
}
.race-tab {
  flex: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px 7px 0 0; margin-bottom: -1px;
  background: #f4f4f5; color: var(--muted);
  padding: 0.4rem 0.75rem; font: inherit; font-size: 0.95rem; font-weight: 700;
}
.race-tab.active {
  background: var(--card); color: var(--ink); border-bottom-color: var(--card);
  box-shadow: inset 0 3px 0 var(--accent); /* red top bar */
}
/* Decided races go green; the active decided tab keeps its white body but
   trades the red top bar for a green one. */
.race-tab.decided { background: var(--up); border-color: var(--up); color: #ffffff; }
.race-tab.active.decided {
  background: var(--card); color: var(--up); border-color: var(--up);
  border-bottom-color: var(--card); box-shadow: inset 0 3px 0 var(--up);
}
.race-panel { display: none; }
.race-panel.active { display: block; }
.horse-row { margin: 0; border-bottom: 1px dashed var(--line); }
.horse-row:last-child { border-bottom: none; }
.horse-row.is-winner { background: #ecf6f1; }
.horse-label {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.4rem;
  cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.horse-label .runner-name { font-size: 0.95rem; }
.horse-label .cloth { width: 1.86rem; height: 1.86rem; font-size: 1.02rem; }
.winner-check { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--up); flex: none; cursor: pointer; }
.horse-row.scratched .runner-name { text-decoration: line-through; color: var(--muted); }
.horse-row.scratched .cloth { opacity: 0.45; }
.scratched-tag { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.payout-block { border-top: 1px solid var(--line); margin-top: 0.85rem; padding-top: 0.6rem; }
.payout-block h3 { margin: 0 0 0.15rem; }
/* One card per hit ticket, all on the same grid: races | ticket | amount.
   The middle column is the only one allowed to shrink or wrap, so the
   amount box never falls to a second line however long the runners get. */
.payout-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 0.75rem;
  background: #ecf6f1; /* the winner tint the horse rows use */
  border: 1px solid #cfe6db; border-left: 4px solid var(--up);
  border-radius: 7px; padding: 0.5rem 0.75rem; margin: 0.6rem 0;
}
.payout-races {
  background: var(--up); color: #ffffff; font-weight: 700; font-size: 0.85rem;
  padding: 0.2rem 0.5rem; border-radius: 6px; white-space: nowrap;
}
.payout-ticket { display: flex; flex-direction: column; min-width: 0; }
.payout-name { font-weight: 600; }
.payout-runners { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.payout-cost { color: var(--muted); font-size: 0.8rem; }
.payout-entry { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.payout-entry input {
  width: 6.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; text-align: right; background: #ffffff;
}
.payout-status { grid-column: 1 / -1; font-size: 0.85rem; margin-top: 0.15rem; }
.payout-status:empty { display: none; }
.payout-status.ok { color: var(--up); }
.payout-status.err { color: var(--down); }
.commentary { margin: 0.5rem 0; }  /* bottom rhythm matches its paragraphs so .post-total reads as the next one */
.commentary p { margin: 0.5rem 0; }
.commentary img { max-width: 100%; height: auto; border-radius: var(--radius); }
.commentary img.align-left { float: left; max-width: 50%; margin: 0.25rem 1rem 0.5rem 0; }
.commentary img.align-right { float: right; max-width: 50%; margin: 0.25rem 0 0.5rem 1rem; }
.commentary img.align-center { display: block; float: none; margin: 0.5rem auto; }
.commentary::after { content: ""; display: table; clear: both; } /* contain wrapped floats */
.commentary table { border-collapse: collapse; }
.commentary th, .commentary td { border: 1px solid var(--line); padding: 0.3rem 0.5rem; }
.commentary blockquote { border-left: 3px solid var(--accent); margin: 0.5rem 0; padding: 0.1rem 0.8rem; color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); margin: 3rem 0; }

.chip { display: inline-block; border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.75rem; font-weight: 600; }
.chip-draft { background: #eee; color: var(--muted); border: 1px dashed var(--muted); }

/* Strategy block — no rule above it; the post flows straight from
   commentary through the Total Bet paragraph into the tickets. */
.strategy-block { margin-top: 1rem; }
.strategy-name { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); }

/* Key Horses */
.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0; }
.key-horses {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fafafa; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem;
}
.key-horses-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.key-horses-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.pick-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--line); }
.pick-row:last-child { border-bottom: none; }
.pick-row .leg-race { padding-top: 0; }  /* the 0.2rem nudge is sized for the ticket-card rows */
/* Key Horses is a low-key section: cloths shrink to match the surrounding text. */
.key-horses .leg-chips .cloth { width: 1.35rem; height: 1.35rem; font-size: 0.75rem; }

/* Ticket card */
.ticket-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ticket-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.ticket-header {
  /* wager | group label (true center) | total + caret */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4rem 0.75rem;
  /* 5% lighter than the site chrome black */
  background: #171717; color: var(--chrome-ink); padding: 0.5rem 0.8rem; font-size: 0.9rem;
}
.ticket-header { font-weight: 700; }
.ticket-header .ticket-wager { grid-column: 1; justify-self: start; white-space: nowrap; }
.ticket-header .ticket-group { grid-column: 2; }
.ticket-header .ticket-header-right { grid-column: 3; }
/* Header text: base amount | group (centered) | total. No pills. */
.ticket-base { color: #e3b93e; }
.ticket-dash { color: oklch(70.7% 0.022 261.325); }
.ticket-total { color: #ffffff; }
.ticket-group { color: oklch(87.2% 0.01 258.338); white-space: nowrap; }
.ticket-header-right { justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; }
.ticket-toggle {
  background: none; border: none; cursor: pointer; padding: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.ticket-toggle::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-right: 2px solid var(--chrome-ink);
  border-bottom: 2px solid var(--chrome-ink);
  transform: rotate(225deg) translate(-15%, -15%); /* chevron up: click to collapse */
  transition: transform 0.15s ease;
}
.ticket-card.collapsed .ticket-toggle::before {
  transform: rotate(45deg) translate(-15%, -15%); /* chevron down: click to expand */
}
.ticket-card.collapsed .ticket-body { display: none; }
/* Dead tickets leave the list and pile into one roll-up row — count and money
   staked — so a card that mostly died costs one row of scroll, not one per
   corpse. Opening the pile shows the grayed design (whole card faded, header
   text struck through) at half height; tapping a strip (pick.js) restores the
   full card. wagers_sorted puts dead tickets last, so live cards sit above. */
.dead-rollup-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  border: 1px dashed #d4d4d8; border-radius: var(--radius); background: #fafafa;
  color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.4rem 0.8rem; cursor: pointer;
}
.dead-rollup-head .caret {
  width: 0.45rem; height: 0.45rem; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-15%, -15%);
  transition: transform 0.15s ease;
}
.dead-rollup.open .dead-rollup-head .caret { transform: rotate(225deg) translate(-15%, -15%); }
.dead-rollup-body { display: none; }
.dead-rollup.open .dead-rollup-body {
  display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem;
}
.ticket-card.dead.collapsed { opacity: 0.35; cursor: pointer; }
.ticket-card.dead.collapsed .ticket-header { padding: 0.14rem 0.8rem; font-size: 0.76rem; }
.ticket-card.dead.collapsed .ticket-wager,
.ticket-card.dead.collapsed .ticket-group,
.ticket-card.dead.collapsed .ticket-total { text-decoration: line-through; }
.ticket-card.dead.collapsed .ticket-toggle { padding: 0.15rem; }
.ticket-card.dead.collapsed .ticket-toggle::before { width: 0.32rem; height: 0.32rem; }
.ticket-footer {
  padding: 0.5rem 0.8rem; font-size: 1.05rem; font-weight: 800;
  color: #ffffff; letter-spacing: 0.03em; text-align: center;
}
.footer-won {
  background: var(--up);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.footer-refunded { background: var(--refund); }
.footer-won span { font-size: 1.25em; }
.trophy { height: 1.4em; width: auto; }

.ticket-legs { padding: 0.5rem 0.8rem 0.7rem; }
.leg-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--line); }
.leg-row:last-child { border-bottom: none; }
.leg-race { flex: 0 0 2.2rem; font-weight: 700; font-size: 0.9rem; color: #52525b; padding-top: 0.2rem; }
.leg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } /* row gap clears the winner badge overhang */
/* Ticket-card cloths run ~25% larger than the base chip. */
.leg-chips .cloth { width: 1.95rem; height: 1.95rem; font-size: 1.07rem; }

.runner { display: inline-flex; align-items: center; gap: 0.3rem; }
.runner-name { font-size: 0.9rem; }
.runner.scratched .runner-name { text-decoration: line-through; color: var(--muted); }
.runner.scratched .cloth { opacity: 0.45; }

/* Saddle cloth chips — standard NA colors */
.cloth {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 5px;
  font-weight: 800; font-size: 0.85rem; flex: none;
  border: 1px solid rgba(0,0,0,0.25);
}
.cloth-1  { background: #d0342c; color: #fff; }
.cloth-2  { background: #ffffff; color: #111; }
.cloth-3  { background: #1747a0; color: #fff; }
.cloth-4  { background: #f5d327; color: #111; }
.cloth-5  { background: #146c37; color: #fff; }
.cloth-6  { background: #111111; color: #f5d327; }
.cloth-7  { background: #e87f1e; color: #111; }
.cloth-8  { background: #f4a9c0; color: #111; }
.cloth-9  { background: #34bdb4; color: #111; }
.cloth-10 { background: #6a3fa0; color: #fff; }
.cloth-11 { background: #9d9d94; color: #b3382c; }
.cloth-12 { background: #a9d135; color: #111; }
.cloth-13 { background: #6d4a2f; color: #fff; }
.cloth-14 { background: #7c1e2e; color: #f5d327; }
.cloth-15 { background: #b9a878; color: #111; }
.cloth-16 { background: #b26a33; color: #fff; }

/* Losing chips: one uniform muted gray, regardless of saddle-cloth color.
   Double class outranks the .cloth-N palette rules above. */
.cloth.cloth-lost { background: #e4e4e7; color: #a1a1aa; border-color: #d4d4d8; }

/* Report page */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.8rem; }
.stat-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.stat-value { font-size: 1.25rem; font-weight: 700; }

.report-table { border-collapse: collapse; min-width: 100%; background: var(--card); }
.report-table th, .report-table td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.report-table thead th { background: #f4f4f5; text-align: left; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Forms / manage */
.manage-form div { margin-bottom: 0.75rem; }
.manage-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.manage-form input[type="text"], .manage-form textarea, .manage-form select,
.login-card input[type="text"], .login-card input[type="password"] {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: var(--card);
}
.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 6px; padding: 0.45rem 1rem; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-publish { background: var(--gold); border-color: #866c39; color: #ffffff; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.attach-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0; background: #fafafa; }
.attach-box legend { font-weight: 700; padding: 0 0.4rem; }
.attached-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.8rem; margin: 0.4rem 0; font-size: 0.95rem;
}
.btn-small { padding: 0.2rem 0.7rem; font-size: 0.85rem; }

.login-card { max-width: 360px; margin: 3rem auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.login-card h1 { text-align: center; }
.login-card label { display: block; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.9rem; }
.login-card button { width: 100%; margin-top: 0.5rem; }

.pagination { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0; color: var(--muted); }

@media (min-width: 700px) {
  main { padding: 1.5rem; }
}