/* Waldo race player: uses the site's tokens (site.css). */
.wr { font-family: var(--sans, Inter, system-ui, sans-serif); color: var(--ink); }
.wr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.wr-button, .wr-select { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; }
.wr-button:hover { border-color: var(--ink-3); }
.wr-scrub { flex: 1 1 200px; accent-color: var(--spring); }
.wr-clock { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; color: var(--ink-2); }
.wr-lanes { display: grid; gap: 16px 12px; justify-content: center; }
.wr-lane { margin: 0; }
.wr-lane figcaption { margin: 0 0 6px; font-size: 13px; line-height: 1.35; }
.wr-head { display: flex; gap: 7px; align-items: center; font-size: 15px; }
.wr-strategy { color: var(--ink-3); }
.wr-status { font-variant-numeric: tabular-nums; color: var(--ink-2); min-height: 1.35em; }
.wr-status.wr-right { color: var(--spring); font-weight: 600; }
.wr-status.wr-wrong { color: var(--bad); font-weight: 600; }
.wr-canvas { display: block; border-radius: 4px; }
.wr-kind { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; }
.wr-kind.wr-llm { background: var(--paper-2); color: var(--ink-2); }
.wr-kind.wr-decision { background: var(--amber-2); color: var(--amber-ink); }
.wr-picker { margin: 16px 0 0; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; font-size: 13px; }
.wr-picker legend { font-weight: 600; padding: 0 4px; }
.wr-pick small { color: var(--ink-3); }
.wr-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.wr-key i { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; }
/* In a post: wider than the text column. */
/* Lined up with the text, running wider to the right where there is room. */
.article .wr-wide { width: min(1120px, calc(100vw - 48px)); max-width: none; margin: 24px 0; }
.wr-lane figcaption { min-height: 6.6em; }
.wr-task { font-size: 16px; margin: 0 0 10px; padding: 10px 14px; background: var(--paper-2); border-radius: 8px; }
.wr-doing { font-size: 13px; color: var(--ink); min-height: 2.7em; margin-top: 2px; }
.wr-logo { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.wr-initial { display: inline-grid; place-items: center; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.wr-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 24px; font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.wr-how p { margin: 0; line-height: 1.5; }
.wr-how .wr-kind { margin-right: 4px; }
/* The leaderboard runs as wide as the race, so all its columns fit on a desktop. */
.article #board table { font-size: 14px; }
.article #board td, .article #board th { padding: 10px 9px; }
.wr-gif-status { font-size: 13px; color: var(--ink-3); min-width: 8em; }
.wr-button:disabled { opacity: .5; cursor: progress; }