/* Naptable dashboard — minimal styling, no framework. */

:root {
  --bg: #fafaf8;
  --panel: #ffffff;
  --border: #e4e0d8;
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --pos: #138a36;
  --neg: #b3261e;
  --accent: #2a4365;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

header, section, footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
}

header {
  padding-top: 32px;
  padding-bottom: 12px;
}

h1 {
  font-size: 28px;
  margin: 0;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 18px;
  margin: 28px 0 12px;
  font-weight: 600;
}

h3 {
  font-size: 14px;
  margin: 12px 0 6px;
  font-weight: 600;
  color: var(--accent);
}

.subtitle {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Visitor's per-point value bar — rescales every .amount on the page via JS */
.pt-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 14px 0;
}
.pt-bar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.pt-bar input {
  width: 90px;
  padding: 4px 8px;
  font-size: 1em;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.pt-bar .recommended {
  color: var(--muted);
}
.pt-bar .recommended strong {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.pt-bar .recommended strong.pos { color: var(--pos); }
.pt-bar .recommended strong.neg { color: var(--neg); }
.pt-bar-hint {
  color: var(--muted);
  font-size: 0.85em;
  margin-left: auto;
}

/* Tabular numerals for amounts so digit columns line up as visitor rescales. */
.amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.window-toggle {
  display: flex;
  gap: 4px;
}

.window-toggle a {
  text-decoration: none;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

.window-toggle a.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.window-toggle a:hover {
  border-color: var(--accent);
}

.today-summary {
  margin-top: 16px;
}

.today-summary h2 {
  margin: 0 0 8px;
}

.copy-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  margin: 0;
  cursor: text;
  user-select: all;
}

.hint {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stat .value {
  font-size: 22px;
  font-weight: 600;
  margin: 4px 0;
}

.stat .note {
  font-size: 12px;
  color: var(--muted);
}

.pos { color: var(--pos); }
.neg { color: var(--neg); }

table.tips {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}

table.tips th,
table.tips td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

table.tips th {
  background: #f4f0e8;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

table.tips tr.place-leg td {
  background: #fafafa;
}

table.tips tr:last-child td {
  border-bottom: none;
}

.role {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  background: #eee;
  color: #555;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
}

.status {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.status.placed   { background: #fff3cd; color: #856404; }  /* bet open / awaiting settlement */
.status.settled  { background: #e8f5e9; color: #2e7d32; }  /* bet has a final outcome */
.status.dry_run  { background: #f3e5f5; color: #6a1b9a; }
.status.failed   { background: #ffebee; color: #c62828; }
.status.skipped  { background: #fff0e0; color: #9a5b00; }  /* NOT PLACED — needs attention */

.status-reason {
  display: block;
  margin-top: 2px;
  font-size: 0.8em;
  color: var(--neg);
}

/* Banner listing bets that didn't get on (no match, past cutoff, etc.). */
.unplaced-banner {
  margin: 10px 0 14px;
  padding: 10px 14px;
  background: #fff0e0;
  border: 1px solid #ffd9a8;
  border-radius: 6px;
  color: #9a5b00;
}
.unplaced-banner ul { margin: 6px 0 0; padding-left: 20px; }
.unplaced-banner li { font-size: 0.9em; }

/* Operational day-status badge — "did the system run?" vs "how did the strategy do?". */
.op-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  margin-left: 0.5em;
  vertical-align: middle;
}
.op-status.op-good    { background: #e8f5e9; color: #2e7d32; }  /* all races settled cleanly */
.op-status.op-warn    { background: #fff3cd; color: #856404; }  /* partial: some skipped/stuck */
.op-status.op-bad     { background: #ffebee; color: #c62828; }  /* missed entirely / all skipped */
.op-status.op-neutral { background: #f5f5f5; color: #555;    }  /* in progress / no tips */

/* Day P&L pill — inline next to the day heading so the bottom line is
   visible at a glance without scrolling. */
.day-pl-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  margin-left: 0.5em;
  vertical-align: middle;
  background: #f5f5f5;
  color: #555;
}
.day-pl-pill.pos { background: #e8f5e9; color: #2e7d32; }
.day-pl-pill.neg { background: #ffebee; color: #c62828; }
.day-pl-pill.strategy { box-shadow: inset 0 0 0 2px currentColor; }

/* Day-total banner under the table — same numbers, more prominent. */
.day-total-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #f5f5f5;
  border: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.day-total-banner.pos { background: #e8f5e9; border-color: #c8e6c9; }
.day-total-banner.neg { background: #ffebee; border-color: #ffcdd2; }
.day-total-banner strong { font-size: 1.1em; }
.day-total-banner .hint { margin: 0; color: var(--muted); font-size: 0.85em; }

/* The "Singles total" footer row inside the tip table. */
.day-totals td {
  border-top: 2px solid var(--border);
  font-weight: 600;
  background: #fafafa;
}
.day-totals .totals-label {
  text-align: right;
  font-style: italic;
  color: var(--muted);
}

/* Muted placeholder for shadow Yankee P&L values that aren't ready yet. */
.muted-hint {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9em;
  cursor: help;
  text-decoration: underline dotted;
}

.no-bet {
  color: var(--muted);
  font-style: italic;
}

.shadow {
  margin-top: 12px;
  background: #fff8ec;
  border: 1px solid #e8d8a8;
  border-radius: 6px;
  padding: 12px 16px;
}

.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  font-size: 13px;
}

.shadow-grid > div {
  display: flex;
  flex-direction: column;
}

.shadow-grid .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.notes {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.empty {
  color: var(--muted);
  font-style: italic;
}

footer {
  padding: 32px 24px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #f0eee8;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ───────────────────────── 22-ladder Yankee visual ───────────────────────── */
/* An expandable view of the EW Yankee: all 22 ladder "tracks" climbing race by
   race. Each rung is one leg — green (won) / orange (placed) rolls the pot on;
   a red ✕ kills the line. The figure on the right is what the line is worth.
   --place is the one new colour; the rest reuse --pos / --neg. */
:root { --place: #e0871e; }

.yankee-tracks { margin-top: 10px; }
.yankee-tracks > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  user-select: none;
}
.yankee-tracks > summary::-webkit-details-marker { display: none; }
.yankee-tracks > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.8em;
  margin-right: 2px;
}
.yankee-tracks[open] > summary::before { content: "▾"; }
.yt-summary-title { font-weight: 600; }
.yt-summary-counts { color: var(--muted); font-size: 0.85em; }

.yt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 2px 6px;
  font-size: 0.8em;
  color: var(--muted);
}
.yt-key { display: inline-flex; align-items: center; gap: 5px; }
.yt-key .rung { width: 16px; height: 16px; font-size: 9px; }

/* Today's runners — context so the rungs are readable. */
.yt-runners {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.yt-runner {
  flex: 1 1 140px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 5px;
  background: var(--panel);
  line-height: 1.35;
}
.yt-runner-no { font-size: 0.72em; color: var(--muted); font-weight: 600; }
.yt-runner-horse { display: block; font-weight: 600; font-size: 0.92em; }
.yt-runner-result { font-size: 0.78em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.yt-runner.result-won      { border-left-color: var(--pos); }
.yt-runner.result-placed   { border-left-color: var(--place); }
.yt-runner.result-unplaced { border-left-color: var(--neg); }
.yt-runner.result-void     { border-left-color: var(--muted); }
.yt-runner.result-pending  { border-left-color: var(--border); }

/* The 22 tracks. */
.yt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 720px) {
  .yt-grid { grid-template-columns: 1fr 1fr; gap: 6px 22px; }
}
.yt-track {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 5px;
}
.yt-track.status-dead    { opacity: 0.62; }
.yt-track.status-completed { background: #f0f8f1; }
.yt-track.status-skipped, .yt-track.status-stuck { background: #fff7ec; }

.yt-side {
  font-size: 0.66em;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  text-align: center;
  padding: 1px 0;
  border-radius: 3px;
}
.yt-side-win   { color: var(--accent); background: #eef2f8; }
.yt-side-place { color: #8a5413; background: #fbf1e3; }

/* The climb: rungs sitting on a faint rail. */
.yt-rungs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.yt-rungs::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 50%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.rung {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rung.win     { background: var(--pos);   border-color: var(--pos);   color: #fff; }
.rung.place   { background: var(--place); border-color: var(--place); color: #fff; }
.rung.dead    { background: var(--neg);   border-color: var(--neg);   color: #fff; }
.rung.void    { background: #eef0f3; border-color: #d6dae1; color: #5b6573; font-size: 8.5px; }
.rung.pending { background: var(--panel); border-style: dashed; color: var(--muted); }
.rung.dim     { background: var(--bg); border-color: #ece9e2; color: #c4c0b8; }

.yt-total {
  font-variant-numeric: tabular-nums;
  font-size: 0.88em;
  text-align: right;
  min-width: 56px;
  color: var(--ink);
}
.yt-total.total-stake { color: var(--muted); }
.yt-total.total-final { font-weight: 600; }