/* MarketMover, the web app: the app's five looks as token sets, its panels, chips and price cells.
   A sidebar on a wide screen (the Mac), a tab bar on a phone (iOS). */
:root, [data-theme="day"] { color-scheme: light; --bg:#FFFFFF; --panel:#F4F7FC; --panel2:#EAF0F9; --panel3:#DFE7F4; --line:#D3DCEB; --ink:#0B1633; --ink2:#3F4B6E; --muted:#66718F; --accent:#1E5EFF; --on-accent:#FFFFFF; --amber:#A35400; --up:#0E8F63; --down:#D32F2F; --lay:#A8336F; --lay-panel:#F7E6EF; --model:#5643CF; --model-panel:#EBE7FB; --code-r:#1E5EFF; --code-g:#0E8F63; --code-h:#C9521A; }
[data-theme="night"] { color-scheme: dark; --bg:#06080F; --panel:#0C1120; --panel2:#121A2E; --panel3:#18223A; --line:#212D48; --ink:#E9EEFF; --ink2:#A7B1CC; --muted:#7581A3; --accent:#2962FF; --on-accent:#FFFFFF; --amber:#FFB000; --up:#1DE9A4; --down:#FF5C5E; --lay:#F0A8C8; --lay-panel:#2A2440; --model:#9C8CFF; --model-panel:#1C1930; --code-r:#4A9BFF; --code-g:#1FB98A; --code-h:#FF7A3C; }
[data-theme="navy"] { color-scheme: dark; --bg:#071233; --panel:#0B1B4B; --panel2:#10245E; --panel3:#152C70; --line:#22397E; --ink:#FFFFFF; --ink2:#B4C0E0; --muted:#8492BC; --accent:#1DE9A4; --on-accent:#071233; --amber:#FFC24D; --up:#3DE38A; --down:#FF6B6B; --lay:#F3B3D0; --lay-panel:#2C2A5F; --model:#B6A9FF; --model-panel:#1F2264; --code-r:#5CA6FF; --code-g:#2BD39C; --code-h:#FF8F55; }
[data-theme="ice"] { color-scheme: light; --bg:#EAF1FF; --panel:#FFFFFF; --panel2:#DCE6FA; --panel3:#CFDCF5; --line:#BFCFEC; --ink:#0B1633; --ink2:#3F4B6E; --muted:#62708F; --accent:#1E5EFF; --on-accent:#FFFFFF; --amber:#A35400; --up:#0E8F63; --down:#D32F2F; --lay:#A8336F; --lay-panel:#F5E2EC; --model:#5643CF; --model-panel:#E4E0F9; --code-r:#1E5EFF; --code-g:#0E8F63; --code-h:#C9521A; }
[data-theme="graphite"] { color-scheme: dark; --bg:#08080A; --panel:#0E0E12; --panel2:#14141A; --panel3:#1B1B22; --line:#23232C; --ink:#E9E9EE; --ink2:#A6A6B0; --muted:#7A7A88; --accent:#4A9BFF; --on-accent:#06080F; --amber:#FFB000; --up:#21D16B; --down:#FF4D4F; --lay:#F0A8C8; --lay-panel:#2A2440; --model:#9C8CFF; --model-panel:#1C1930; --code-r:#4A9BFF; --code-g:#1FB98A; --code-h:#FF7A3C; }
:root { --side: 216px; --tab: 64px; --r: 12px; --num: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; } button { font: inherit; color: inherit; } input, textarea, select { font: inherit; color: var(--ink); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; }
.up { color: var(--up); } .down { color: var(--down); } .amber { color: var(--amber); } .muted { color: var(--muted); } .ink2 { color: var(--ink2); } .model-c { color: var(--model); }
.frame { display: flex; min-height: 100vh; min-height: 100dvh; }
/* the sidebar (wide) */
.side { display: none; width: var(--side); flex: none; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; position: sticky; top: 0; height: 100vh; height: 100dvh; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink); font-size: 16px; padding: 6px 8px; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.sidenav { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.sidenav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 500; }
.sidenav a svg { width: 18px; height: 18px; color: var(--ink2); } .sidenav a.on { background: var(--panel3); font-weight: 600; } .sidenav a.on svg { color: var(--accent); }
.sidenav a .count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.side-foot { margin-top: auto; padding: 8px; }
.plan-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--model-panel); color: var(--model); white-space: nowrap; }
/* the main column and the toolbar */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); min-height: 50px; }
.top .title { flex: 1; text-align: center; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top.root { border-bottom-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.form-w { max-width: 780px; }
.top .nav-btn { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--panel2); display: grid; place-items: center; cursor: pointer; color: var(--ink); } .top .nav-btn:disabled { opacity: .35; }
.top .nav-btn svg { width: 18px; height: 18px; } .top .nav-btn.accent { color: var(--accent); }
.top .group { display: flex; gap: 4px; background: var(--panel); border-radius: 999px; padding: 3px; border: 1px solid var(--line); }
.view { max-width: 1180px; width: 100%; margin: 0 auto; padding: 12px 14px calc(var(--tab) + 28px); flex: 1; }
.foot { max-width: 1180px; width: 100%; margin: 0 auto; padding: 8px 14px calc(var(--tab) + 20px); color: var(--muted); font-size: 12px; }
/* the tab bar (phone) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; justify-content: space-around; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 5px 4px calc(4px + env(safe-area-inset-bottom)); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 10px; font-weight: 600; flex: 1; padding: 4px 0; }
.tabbar a svg { width: 24px; height: 24px; } .tabbar a.on { color: var(--accent); }
.tabbar a .count { position: absolute; top: 0; right: calc(50% - 22px); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; background: var(--down); color: #fff; padding: 0 4px; }
@media (min-width: 900px) { .top.root { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); } .view > h1:first-child, .view > .form-w > h1:first-child, .root-title { display: none; } .side { display: flex; } .tabbar { display: none; } .view, .foot { padding-bottom: 24px; max-width: none; } .view { padding: 16px 24px 24px; } .top { padding: 8px 20px; } .top .title { text-align: left; font-size: 17px; } }
/* type */
h1 { font-size: 26px; letter-spacing: -0.02em; margin: 4px 0 10px; font-weight: 700; } h2 { font-size: 16px; margin: 14px 0 8px; font-weight: 600; } h3 { font-size: 14px; margin: 10px 0 6px; font-weight: 600; }
.cap { font-size: 12px; color: var(--muted); } .cap2 { font-size: 11px; color: var(--muted); } .kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.note { color: var(--ink2); font-size: 13px; margin: 8px 0; } .loading, .empty { color: var(--muted); padding: 36px 0; text-align: center; }
.empty b { display: block; color: var(--ink); font-size: 16px; margin: 8px 0 4px; } .empty svg { width: 40px; height: 40px; color: var(--muted); }
.err { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--down) 12%, var(--panel)); color: var(--down); margin: 8px 0; font-size: 13px; }
.warn { color: var(--amber); font-size: 13px; display: flex; gap: 6px; align-items: flex-start; margin: 8px 0; }
/* panels, chips, buttons */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.panel2 { background: var(--panel2); border-radius: 10px; padding: 10px; } .panel.lvl2 { background: var(--panel2); } .panel.lvl3 { background: var(--panel3); }
.strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } .strip::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .strip.chips { flex-wrap: nowrap; } .strip.chips.picks-markets { margin-top: 0; }
.chip { flex: none; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--panel2); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.chip.on { background: var(--accent); color: var(--on-accent); } .chip.small { padding: 4px 9px; font-size: 12px; } .chip.lvl3 { background: var(--panel3); color: var(--ink2); } .chip.lvl3.on { background: var(--accent); color: var(--on-accent); }
/* a selected chip's small text (the SRM book chip's "opens 9:30 am") reads on the accent in every theme (review 15 Oct, note 3) */
.chip.on small, .chip.on .muted { color: var(--on-accent); opacity: .92; }
/* the bet type an AutoBet rule is for, beside its name (review 15 Oct, note 15) */
.type-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; white-space: nowrap; vertical-align: 1px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chip svg { width: 13px; height: 13px; }
.val-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--ink2); white-space: nowrap; } .val-chip.up { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); } .val-chip.down { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.runner-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; } .runner-acts .chip { min-height: 36px; } .runner-acts .chip svg { width: 14px; height: 14px; }
.menu { position: relative; display: inline-block; } .menu-list { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 60vh; overflow-y: auto; }
.menu-list.right { left: auto; right: 0; } .menu-list button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; } .menu-list button:hover { background: var(--panel2); } .menu-list button.on::before { content: "✓"; font-size: 12px; } .menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; } .menu-list button.danger { color: var(--down); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; border: 0; cursor: pointer; font-size: 14px; }
.btn.ghost { background: var(--panel2); color: var(--ink); } .btn.small { padding: 5px 11px; font-size: 13px; } .btn[disabled] { opacity: .45; cursor: default; } .btn.wide { width: 100%; padding: 13px; font-size: 16px; } .btn.danger { background: transparent; color: var(--down); } .btn.link { background: none; color: var(--accent); padding: 4px 6px; }
.btn svg { width: 16px; height: 16px; }
.icon-btn { width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--panel); color: var(--ink2); display: inline-grid; place-items: center; cursor: pointer; flex: none; } .icon-btn svg { width: 16px; height: 16px; } .icon-btn.on { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.fact { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--panel2); font-size: 13px; color: var(--ink2); } .fact img { width: 14px; height: 14px; border-radius: 4px; } .fact.amber { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.code-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; } .code-chip svg { width: 14px; height: 14px; }
.code-chip.R { color: var(--code-r); background: color-mix(in srgb, var(--code-r) 15%, transparent); } .code-chip.G { color: var(--code-g); background: color-mix(in srgb, var(--code-g) 15%, transparent); } .code-chip.H { color: var(--code-h); background: color-mix(in srgb, var(--code-h) 15%, transparent); }
.code-chip.glyph { width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 999px; } .code-chip.glyph svg { width: 15px; height: 15px; }
.live { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--down); color: #fff; font-size: 11px; font-weight: 700; }
.badges { display: inline-flex; gap: 3px; align-items: center; } .badges img { width: 18px; height: 18px; border-radius: 5px; display: block; } .badges .more { font-size: 11px; font-weight: 700; color: var(--ink2); background: var(--panel3); padding: 2px 5px; border-radius: 5px; } .badges.big img { width: 22px; height: 22px; border-radius: 6px; }
.switch { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--panel3); border: 0; cursor: pointer; flex: none; padding: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .switch[aria-checked="true"] { background: var(--up); } .switch[aria-checked="true"]::after { left: 23px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel); } .row:first-child { border-radius: var(--r) var(--r) 0 0; } .row:last-child { border-bottom: 0; border-radius: 0 0 var(--r) var(--r); } .row:only-child { border-radius: var(--r); }
.row b { display: block; font-weight: 600; } .row img { width: 22px; height: 22px; border-radius: 6px; vertical-align: middle; } .row small { color: var(--muted); display: block; font-size: 12px; } .row .val { color: var(--muted); font-size: 14px; white-space: nowrap; } .row a.val, .row .val.accent { color: var(--accent); }
.group { margin: 16px 0; } .group > .kicker { padding: 0 12px 6px; } .group > .cap { padding: 6px 12px 0; } .group .list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.field { margin: 12px 0; } .field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; } .field small { color: var(--muted); display: block; margin-top: 4px; font-size: 12px; }
textarea, input[type=text], input[type=number], input[type=search], select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; } textarea.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
input.inline { width: 90px; text-align: right; padding: 5px 8px; }
/* the home */
.jump { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; scroll-snap-type: x mandatory; } .jump::-webkit-scrollbar { display: none; }
.jump a { flex: 0 0 170px; scroll-snap-align: start; padding: 10px; border-radius: var(--r); background: var(--panel2); border: 1px solid var(--line); color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.jump .hd { display: flex; align-items: center; gap: 6px; } .jump .hd .num { font-size: 12px; } .jump .hd .cd { margin-left: auto; } .jump .venue { font-weight: 600; font-size: 14px; height: 38px; line-height: 19px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cd { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; } .cd.soon { color: var(--amber); } .cd.now { color: var(--down); }
.meeting { padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin: 8px 0; }
.meeting .hd { display: flex; align-items: center; gap: 8px; color: var(--ink); } .meeting .hd .t { flex: 1; min-width: 0; } .meeting .hd b { font-size: 16px; font-weight: 600; display: block; } .meeting .hd small { color: var(--muted); font-size: 12px; } .meeting .hd svg.chev { width: 14px; height: 14px; color: var(--muted); }
.rchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; padding-bottom: 2px; } .rchips::-webkit-scrollbar { display: none; }
.rchip { flex: none; padding: 6px 8px; border-radius: 6px; background: var(--panel2); color: var(--ink); font-size: 12px; text-align: center; min-width: 58px; display: flex; flex-direction: column; gap: 1px; align-items: center; } .rchip b { font-family: var(--num); font-weight: 600; font-size: 12px; display: flex; gap: 3px; align-items: center; } .rchip small { color: var(--muted); font-size: 11px; }
.rchip.done { background: var(--panel3); color: var(--muted); } .rchip.done b { color: var(--muted); } .rchip.next { background: color-mix(in srgb, var(--accent) 18%, transparent); } .rchip.on { background: var(--accent); color: var(--on-accent); } .rchip.on small, .rchip.on b { color: var(--on-accent); } .rchip svg { width: 9px; height: 9px; color: var(--amber); }
.rchip b .rstar { display: inline-flex; } .rchip b .rstar svg { width: 9px; height: 9px; color: var(--amber); }
/* a race chip's own star on the Racing home (Daniel, 4 Nov 2026): inside the chip's box, beside its link */
/* Racing Victoria's stewards and racing.com's extras (1.27 A4, B5) */
.stew-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel3); color: var(--ink2); margin: 2px 4px 2px 0; }
.stew-tag.excuse { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--ink); } .stew-tag.down { background: color-mix(in srgb, var(--down) 22%, transparent); color: var(--ink); }
.stew-mark { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--amber) 25%, transparent); color: var(--ink); }
.stew-mark.down { background: color-mix(in srgb, var(--down) 28%, transparent); }
.stew-row { padding: 6px 0; border-top: 1px solid var(--line); } .stew-hdr summary { cursor: pointer; color: var(--ink2); font-size: 13px; }
.rc-extras { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel2); } .rc-extras .note.down { color: var(--down); }
.rchip-w { position: relative; flex: none; display: flex; } .rchip-w.starrable .rchip { padding-right: 24px; }
.rchip-w .rchip-star { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 22px; height: 28px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.rchip-w .rchip-star svg { width: 12px; height: 12px; } .rchip-w .rchip-star.on { color: var(--amber); } .rchip-w .rchip-star:hover { background: none; color: var(--amber); }
.jump a .ft { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .jump a .ft .star-btn { width: 24px; height: 24px; margin: -4px -4px -4px 0; }
.home-view { margin-top: 2px; }
.bytime { margin-top: 10px; } .bt-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); } .bt-row > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: var(--ink); } .bt-row .t { flex: 1; min-width: 0; } .bt-row .t b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-row .t small { color: var(--muted); font-size: 12px; } .bt-row .bt-when { flex: none; min-width: 64px; text-align: right; font-family: var(--num); font-size: 13px; }
.bt-row.done .t b { color: var(--ink2); } .bt-row.next { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; }
.bt-run summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 4px; } .bt-run[open] summary { margin-bottom: 2px; }
@media (max-width: 520px) { .bt-row .badges { display: none; } }
.rchip.sp-chip { border: 0; font: inherit; cursor: pointer; background: var(--model-panel); color: var(--ink); } .rchip.sp-chip b { font-family: inherit; }
.bb-row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--panel2); color: var(--ink); margin: 6px 0; } .bb-row .t { flex: 1; } .bb-row b { display: block; font-size: 14px; font-weight: 600; } .bb-row small { color: var(--muted); font-size: 12px; }
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sec-hd .cap { text-align: right; }
/* the race card */
.star-btn { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; } .star-btn svg { width: 16px; height: 16px; } .star-btn:hover { background: var(--panel2); color: var(--ink); } .star-btn.on { color: var(--amber); } .star-btn.big { width: 34px; height: 34px; background: var(--panel2); } .star-btn.big svg { width: 18px; height: 18px; }
.mybet.autorule { display: flex; align-items: center; gap: 8px; } .mybet.autorule .switch { flex: none; } .mybet.autorule .star-btn { color: var(--muted); }
.chip.mine svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; } .chip.mine.on { background: var(--amber); color: #1a1200; }
.race-hd { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; } .race-hd .t { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.3; } .race-hd .cd { font-size: 16px; } .race-hd .right { display: flex; align-items: center; gap: 8px; flex: none; }
.fresh { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .fresh.on { color: var(--up); } .fresh svg { width: 13px; height: 13px; }
.xstrip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); margin: 8px 0; } .xstrip .big { font-family: var(--num); font-size: 20px; font-weight: 700; } .xstrip .sub { font-size: 12px; color: var(--muted); } .xstrip img { width: 30px; height: 30px; border-radius: 8px; } .xstrip .delayed { margin-left: auto; text-align: right; } .xstrip .delayed b { color: var(--amber); display: block; }
.mstrip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; line-height: 1.6; border-radius: 10px; background: var(--model-panel); font-size: 13px; color: var(--ink2); margin: 8px 0; flex-wrap: wrap; } .mstrip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--model); } .mstrip b { color: var(--model); font-family: var(--num); } .mstrip .r { margin-left: auto; }
.ctl { display: flex; align-items: center; gap: 14px; margin: 8px 0; font-size: 13px; color: var(--ink2); font-weight: 600; } .ctl button { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); font-weight: 600; cursor: pointer; font-size: 13px; } .ctl svg { width: 14px; height: 14px; } .ctl .hint { margin-left: auto; font-weight: 500; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.grid { display: grid; grid-template-columns: 148px 1fr; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; }   /* 148px: a name word of eleven letters and its ellipsis fit on a phone (F1) */
@media (min-width: 900px) { .grid { grid-template-columns: 340px 1fr; } }
@media (min-width: 1200px) { .grid { grid-template-columns: 420px 1fr; } }   /* room for the runner icons beside the jockey (S9) */
.grid .names .acts { display: flex; gap: 2px; flex: none; } .grid .names .acts > .slot { width: 28px; height: 28px; } .grid .names .acts button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--ink2); display: grid; place-items: center; cursor: pointer; padding: 0; } .grid .names .acts button:hover { background: var(--panel2); color: var(--ink); } .grid .names .acts button svg { width: 15px; height: 15px; } .grid .names .acts button.on { color: var(--amber); }
.grid .names { display: flex; flex-direction: column; } .grid .prices { overflow-x: auto; scrollbar-width: thin; }
.grid .prices table { border-collapse: separate; border-spacing: 0; min-width: 100%; } .grid .prices th, .grid .prices td { padding: 0 4px; text-align: center; white-space: nowrap; }
.grid .prices th { height: 48px; vertical-align: bottom; padding-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--muted); } .grid .prices th img { width: 18px; height: 18px; border-radius: 5px; display: block; margin: 0 auto 3px; } .grid .prices th.model { color: var(--model); font-weight: 600; } .grid .prices th.model span { color: var(--muted); font-weight: 500; display: block; }
.grid .prices th .lbl { display: block; }
.grid .prices th.beside { color: var(--ink2); }
/* the import sheet (1.27 C6): a drop zone over the file picker */
.imp-drop { border: 1.5px dashed var(--line); border-radius: 10px; padding: 18px 12px; text-align: center; cursor: pointer; color: var(--ink2); }
.imp-drop.over, .imp-drop:focus-visible { border-color: var(--accent); color: var(--ink); outline: none; }
.grid .prices .px.own-col { color: var(--amber); font-variant-numeric: tabular-nums; }
.grid .rowh { height: 64px; } @media (min-width: 900px) { .grid .rowh { height: 56px; } }
.grid .names .hd { height: 48px; } .grid .names .name { height: 64px; padding: 6px 6px 6px 10px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); cursor: pointer; } @media (min-width: 900px) { .grid .names .name { height: 56px; } }
.grid .names .pos { width: 20px; height: 20px; border-radius: 50%; background: var(--panel3); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; } .grid .names .pos.first { background: var(--amber); color: #000; }
.grid .names .silk { width: 28px; height: 28px; border-radius: 7px; background: var(--panel3); flex: none; position: relative; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink2); overflow: visible; } .grid .names .silk img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; } .grid .names .silk img + .n { display: none; } .ls { font-family: var(--num); letter-spacing: .06em; } .grid .names .silk .bm { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; color: var(--muted); border: 0; padding: 0; cursor: pointer; } .grid .names .silk .bm svg { width: 10px; height: 10px; } .grid .names .silk .bm.on { color: var(--amber); }
/* the runner cell (review 15 Oct, S9; fourth pass F1; fifth pass): the name and meta take all the room between the silk
   and the row's actions (flex: 1), so the actions stand at the right edge of the names column on every row, one column
   down the card (flex: none, in flow, never over the price column, whose track is the grid's; a scratched runner keeps the
   empty slots of the actions it has not, so its share and bookmark line up too); the name wraps to a second line at a word,
   never cut mid-word where there is room (a word longer than the whole column breaks rather than clips); only the meta line
   truncates with an ellipsis before the actions, its tooltip carrying the whole line; the cell clips, so nothing runs into
   the prices */
.grid .names .name { overflow: hidden; }
.grid .names .txt { min-width: 0; flex: 1; } .grid .names .txt > b { display: block; overflow-wrap: break-word; font-weight: 600; font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .grid .names .txt > b .n { font-family: var(--num); font-weight: 600; } .grid .names .txt > small { display: block; min-width: 0; color: var(--ink2); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .names .name.scr { opacity: .5; } .grid .names .name.scr b { text-decoration: line-through; } .grid .names .name.scr .scr { color: var(--down); text-decoration: none; font-weight: 700; margin-left: 4px; } .grid .names .txt .ded { color: var(--amber); }
@media (max-width: 899px) { .grid .names .txt > b { font-size: 13px; } }
/* a wide row is 56px: a name on two lines and the meta line fit with the cell's padding at 3px and the name at 1.15 */
@media (min-width: 900px) { .grid .names .name { padding-top: 3px; padding-bottom: 3px; } .grid .names .txt > b { line-height: 1.15; } }
/* between 900 and 1199 the column is 340px: the icons stand on the meta line without their words (the tooltip and the
   runner sheet keep them), so the marks show before the line runs out of room */
@media (min-width: 900px) and (max-width: 1199px) { .grid .names .meta .ri small { display: none; } }
.grid .prices td { border-top: 1px solid var(--line); height: 64px; } @media (min-width: 900px) { .grid .prices td { height: 56px; } }
.px { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 38px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink); vertical-align: middle; }
@media (min-width: 900px) { .px { width: 66px; font-size: 15px; } }
.px.lay { background: var(--lay-panel); color: var(--lay); border-color: transparent; } .px + .px.lay { margin-left: 3px; } .px.tote { border-color: transparent; } .px.tote.pl { color: var(--ink2); } .px.closed { background: var(--panel); border-color: transparent; color: var(--ink2); font-weight: 500; } .px.gap { background: transparent; border-color: transparent; color: var(--muted); }
.px.best::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.px .mv { position: absolute; top: 3px; left: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .px .mv.firm { border-top: 6px solid var(--up); } .px .mv.drift { border-bottom: 6px solid var(--down); }
.px.value { outline: 1.5px solid var(--up); outline-offset: -1px; } .px.own-value { outline-style: dashed; }
.grid .prices th.own { color: var(--amber); font-weight: 600; } .grid .prices th.own span { display: block; font-weight: 500; color: var(--muted); }
.own-in { width: 52px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: center; padding: 0 4px; } .own-in:focus { outline: 2px solid var(--amber); outline-offset: -1px; border-color: transparent; } .own-in::placeholder { color: var(--muted); font-weight: 400; }
.mkt .px.own-mkt { color: var(--amber); }
.ctl button.on { color: var(--amber); }
/* the race page's controls row wraps on a phone (16 Oct: with My ratings and Paste it ran 14 px past a 360 px screen,
   which widened the page and the docked slips with it) */
.ctl { flex-wrap: wrap; row-gap: 6px; }
.px.flash-up { animation: fu .7s ease-out .1s; } .px.flash-down { animation: fd .7s ease-out .1s; } @keyframes fu { from { background: color-mix(in srgb, var(--up) 35%, var(--panel2)); } to { background: var(--panel2); } } @keyframes fd { from { background: color-mix(in srgb, var(--down) 35%, var(--panel2)); } to { background: var(--panel2); } }
.px.model { background: var(--model-panel); border-color: transparent; color: var(--model); flex-direction: column; gap: 0; line-height: 1.1; } .px.model small { font-size: 8px; color: var(--muted); font-weight: 500; } .px.model.pl { font-weight: 500; }
.px.fluc { width: 96px; flex-direction: column; line-height: 1.1; font-size: 12px; } .px.fluc small { font-size: 10px; font-weight: 500; }
.mkt td { height: 30px !important; } .mkt .px { height: 24px; font-size: 11px; background: var(--panel); border-color: transparent; color: var(--ink2); font-weight: 500; } .mkt .px.model { background: var(--model-panel); color: var(--model); }
.grid .names .mkt-l { height: 30px; padding: 0 10px; font-size: 11px; line-height: 1.15; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); color: var(--ink2); } .grid .names .mkt-l small { color: var(--muted); font-size: 10px; }
.ml { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-family: var(--num); } .ml i { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .ml.firm { color: var(--up); } .ml.firm i { border-top: 6px solid var(--up); } .ml.drift { color: var(--down); } .ml.drift i { border-bottom: 6px solid var(--down); } .ml.same { color: var(--muted); }
.src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 8px 0; } .src .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--model); }
.segs { margin-top: 12px; } .seg-body { margin-top: 8px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; } table.t th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 6px; border-bottom: 1px solid var(--line); } table.t td { padding: 7px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; } table.t td.n, table.t th.n { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; } table.t tr:last-child td { border-bottom: 0; } table.t img { width: 18px; height: 18px; border-radius: 5px; vertical-align: middle; }
.tscroll { overflow-x: auto; }
.form-card { padding: 10px 12px; border-radius: 10px; background: var(--panel2); margin: 6px 0; } .form-card .hd { display: flex; gap: 8px; align-items: baseline; } .form-card .hd .n { color: var(--amber); font-family: var(--num); } .form-card .hd b { font-weight: 600; } .form-card .ls { font-family: var(--num); letter-spacing: .08em; color: var(--ink2); margin-left: auto; font-size: 13px; } .form-card .stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.result-box { padding: 10px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); margin: 8px 0; display: block; color: var(--ink); } .result-box .pl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .result-box .pl span { display: inline-flex; align-items: center; gap: 5px; } .result-box .pl i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--panel3); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; } .result-box .pl i.first { background: var(--amber); color: #000; }
.divs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .divs span { padding: 2px 7px; border-radius: 6px; background: var(--panel2); font-size: 12px; font-family: var(--num); }
/* sheets */
.sheet { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--ink) 40%, transparent); display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 700px) { .sheet { align-items: center; } }
.sheet .card { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); } @media (min-width: 700px) { .sheet .card { border-radius: 16px; max-height: 86vh; } }
.sheet .card.wide { max-width: 760px; }
.sheet .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sheet .bar b { font-size: 16px; }
.sheet.full .card { max-width: 640px; border-radius: 0; max-height: 100vh; height: 100vh; height: 100dvh; padding-top: max(14px, env(safe-area-inset-top)); } @media (min-width: 700px) { .sheet.full .card { border-radius: 16px; height: auto; max-height: 92vh; } }
.sheet h1 { font-size: 26px; margin: 10px 0 6px; } .sheet .lede { color: var(--ink2); font-size: 16px; } .sheet .links { display: flex; gap: 14px; font-weight: 600; margin: 10px 0 14px; flex-wrap: wrap; }
.dots { display: flex; gap: 5px; align-items: center; margin: 6px 0; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .dots i.on { background: var(--accent); } .dots .cap { margin-left: 6px; }
.tour-ic { width: 48px; height: 48px; color: var(--accent); margin: 14px 0 6px; } .tour-ic svg { width: 44px; height: 44px; }
.lock { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); font-size: 12px; color: var(--ink2); } .lock svg { width: 12px; height: 12px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .books label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-weight: 500; cursor: pointer; } .books label img { width: 22px; height: 22px; border-radius: 6px; } .books label.on { border-color: var(--up); }
.locked { text-align: center; padding: 40px 16px; } .locked svg { width: 40px; height: 40px; color: var(--muted); } .locked b { display: block; font-size: 18px; margin: 8px 0 4px; } .locked p { color: var(--ink2); max-width: 420px; margin: 0 auto 14px; }
/* the looks picker */
.themes { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px; } .theme { flex: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; font-size: 12px; } .theme .sw { width: 72px; height: 66px; border-radius: 10px; border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .theme.on .sw { border: 2px solid var(--accent); } .theme .sw i { display: block; border-radius: 3px; } .theme .sw .dots2 { display: flex; gap: 4px; } .theme .sw .dots2 i { width: 9px; height: 9px; border-radius: 50%; } .theme b { display: block; margin-top: 4px; font-weight: 600; color: var(--ink); } .theme small { color: var(--muted); display: block; }
/* stat cards, picks, model */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .stat { padding: 12px 14px; border-radius: 10px; background: var(--panel2); } .stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .stat .v { font-family: var(--num); font-size: 22px; font-weight: 700; margin: 2px 0; } .stat .n { font-size: 11px; color: var(--muted); }
.pick-race { padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); margin: 10px 0; } .pick-race .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pick-race .hd b { font-size: 15px; } .pick-race .hd .cd { margin-left: auto; }
.banner { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2); margin: -12px -14px 10px; }
/* a banner inside the page's flow, under a panel (the SRM and SGM value pages' not-earned line): its own box, never over the panel above */
.banner.inset { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r); } .banner svg { width: 16px; height: 16px; color: var(--amber); flex: none; margin-top: 1px; }
.hline { font-size: 34px; font-weight: 700; margin: 2px 0 10px; } .hline.fitted { color: var(--model); } .hline.builtin { color: var(--ink2); }
svg.chart { width: 100%; height: auto; display: block; } .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 4px; } .legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
/* the community */
.cwrap { display: block; } @media (min-width: 900px) { .cwrap { display: grid; grid-template-columns: 236px 1fr; gap: 20px; align-items: start; margin: -16px -24px 0; } .cwrap > div:last-child { padding: 16px 24px 0 0; min-width: 0; } .cwrap.solo { display: block; margin: 0; } }
.cside { background: var(--panel); border-right: 1px solid var(--line); padding: 10px 8px; position: sticky; top: 50px; height: calc(100vh - 50px); overflow-y: auto; }
.cside .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 10px 8px 4px; } .cside a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; } .cside a.on { background: var(--panel3); font-weight: 600; } .cside a .ic { color: var(--ic, var(--ink2)); width: 18px; text-align: center; flex: none; } .cside a.on .ic { color: var(--accent); } .cside a .unread { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); } .cside a.muted-ch { color: var(--muted); } .cside a.unr { font-weight: 600; }
.cside .online { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); padding: 0 8px 6px; } .cside .online i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; }
.chan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--ink); border-bottom: 1px solid var(--line); background: var(--panel); } .chan:first-child { border-radius: var(--r) var(--r) 0 0; } .chan:last-child { border-bottom: 0; border-radius: 0 0 var(--r) var(--r); }
.chan .ic { width: 22px; text-align: center; font-size: 18px; color: var(--accent); flex: none; } .chan .t { flex: 1; min-width: 0; } .chan b { display: block; font-weight: 500; } .chan small { color: var(--muted); display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chan .unread { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); } .chan .when { font-size: 11px; color: var(--muted); }
.chan-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .chan-bar .ic { font-size: 20px; color: var(--accent); } .chan-bar .t { flex: 1; min-width: 0; } .chan-bar b { font-size: 16px; } .chan-bar small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chan-bar .when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.msgs { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 100px; }
.msg { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 5px 4px; border-radius: 8px; position: relative; } .msg.cont { padding-top: 0; } .msg:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); }
.msg .av { width: 28px; height: 28px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-weight: 600; color: var(--ink2); font-size: 12px; overflow: hidden; cursor: pointer; border: 0; padding: 0; } .msg .av img { width: 100%; height: 100%; object-fit: cover; } .msg.bot .av { background: var(--model-panel); color: var(--model); }
.msg .who { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .msg .who b { color: var(--ink); font-weight: 600; font-size: 14px; } .msg .who .time { font-size: 11px; }
.role { font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 999px; } .role.owner { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .role.admin { background: color-mix(in srgb, var(--model) 18%, transparent); color: var(--model); } .role.founder { background: var(--panel2); color: var(--ink2); font-weight: 400; }
.msg .body { font-size: 14px; white-space: pre-wrap; word-break: break-word; } .msg .body code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--panel2); padding: 0 4px; border-radius: 4px; }
.msg .quote { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg .deleted { font-style: italic; color: var(--muted); font-size: 13px; }
.msg.pinned { background: color-mix(in srgb, var(--amber) 10%, transparent); border-left: 3px solid var(--amber); padding-left: 10px; }
.msg .more { opacity: .22; border: 0; background: none; cursor: pointer; padding: 2px 4px; color: var(--ink2); align-self: start; } .msg:hover .more { opacity: 1; } .msg .more svg { width: 16px; height: 16px; }
.rchip-c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--model-panel); color: var(--ink); font-size: 13px; margin: 4px 0; } .rchip-c.lay { background: var(--lay-panel); } .rchip-c.watch { background: color-mix(in srgb, var(--amber) 14%, transparent); } .rchip-c.bet { background: var(--panel2); outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .rchip-c .num { font-size: 13px; } .rchip-c img { width: 16px; height: 16px; border-radius: 4px; } .rchip-c .tag { font-size: 9px; font-weight: 800; } .rchip-c .tag.lay { color: var(--lay); } .rchip-c .tag.watch { color: var(--amber); } .rchip-c .sep { width: 1px; height: 14px; background: var(--line); }
.pill { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; } .pill.won, .pill.placed { color: var(--up); background: color-mix(in srgb, var(--up) 18%, transparent); } .pill.lost { color: var(--down); background: color-mix(in srgb, var(--down) 18%, transparent); } .pill.void, .pill.cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, transparent); } .pill.other { color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent); }
.rchip-c .tag.type { color: var(--accent); }
/* a shared slip as a card (Stage K): the kind and the book, the legs as lines, the result line once graded */
.slip-card { display: block; margin: 4px 0; padding: 8px 10px; border-radius: 12px; background: var(--panel2); outline: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--ink); text-decoration: none; max-width: 520px; } .slip-card .sc-head, .slip-card .sc-leg, .slip-card .sc-result { display: flex; align-items: center; gap: 6px; min-width: 0; } .slip-card .sc-head { font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; } .slip-card .sc-head img { width: 16px; height: 16px; border-radius: 4px; } .slip-card .sc-leg { font-size: 12.5px; padding: 2px 0; } .slip-card .sc-leg > span:not(.sp):not(.num):not(.pill) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slip-card .sp { flex: 1; } .slip-card .num { font-size: 12.5px; } .slip-card .sc-result { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; }
.media { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .media img { height: 120px; max-width: 260px; border-radius: 8px; object-fit: cover; cursor: pointer; } .media img.gif { height: auto; max-height: 200px; }
.reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .reacts button { border: 0; background: var(--panel2); border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; } .reacts button.mine { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.poll { max-width: 420px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-top: 6px; } .poll b { display: block; font-size: 14px; margin-bottom: 6px; } .poll .opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; border-radius: 6px; overflow: hidden; font-size: 14px; } .poll .opt .bar { position: absolute; inset: 0; background: var(--panel2); border-radius: 6px; z-index: 0; } .poll .opt.mine .bar { background: color-mix(in srgb, var(--accent) 22%, transparent); } .poll .opt span { position: relative; z-index: 1; } .poll .opt .pct { margin-left: auto; font-family: var(--num); font-size: 12px; color: var(--ink2); } .poll .cap { margin-top: 4px; }
.racemark { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 0; width: 100%; text-align: left; cursor: pointer; font-size: 14px; font-weight: 600; margin: 4px 0; } .racemark svg { width: 16px; height: 16px; color: var(--accent); } .racemark .r { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; }
.composer { position: fixed; left: 0; right: 0; bottom: var(--tab); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 7; } @media (min-width: 900px) { .composer { left: var(--side); bottom: 0; padding-bottom: 12px; } }
.composer .inner { margin: 0 auto; padding: 0 2px; } @media (min-width: 900px) { .composer { padding-left: 256px; } .composer .inner { max-width: none; } .composer.solo { padding-left: 24px; } }
.composer .attach { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .composer .attach .chip { font-weight: 500; } .composer .attach .chip button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); display: inline-grid; } .composer .attach .chip button svg { width: 14px; height: 14px; }
.composer .line { display: flex; gap: 6px; align-items: flex-end; } .composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; border-radius: 12px; padding: 9px 12px; } .composer .icon-btn { width: 36px; height: 36px; background: var(--panel2); } .composer .send { background: var(--accent); color: var(--on-accent); }
.record { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); } .record:first-child { border-radius: var(--r) var(--r) 0 0; } .record:last-child { border-bottom: 0; border-radius: 0 0 var(--r) var(--r); } .record .av { width: 34px; height: 34px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-weight: 600; color: var(--ink2); font-size: 13px; overflow: hidden; flex: none; } .record .av img { width: 100%; height: 100%; object-fit: cover; } .record .t { min-width: 0; } .record b { font-weight: 600; } .record small { display: block; color: var(--muted); font-size: 12px; }
.act { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); position: relative; } .act .av { width: 32px; height: 32px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-weight: 600; color: var(--ink2); position: relative; flex: none; } .act .av .bd { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; } .act .t { flex: 1; min-width: 0; font-size: 13px; } .act .t b { font-weight: 600; } .act .t .ex { color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .act .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }
.notes { display: flex; flex-direction: column; gap: 8px; } .noteb { padding: 8px 10px; border-radius: 8px; background: var(--panel); max-width: 90%; } .noteb.house { background: var(--model-panel); } .noteb .hd { font-size: 11px; color: var(--muted); margin-bottom: 2px; } .noteb .hd b { color: var(--ink); }
.prof-hd { display: flex; align-items: center; gap: 12px; } .prof-hd .av { width: 64px; height: 64px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-size: 24px; font-weight: 600; color: var(--ink2); overflow: hidden; } .prof-hd .av img { width: 100%; height: 100%; object-fit: cover; }
.emoji-pick { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; } .emoji-pick button { border: 0; background: var(--panel2); border-radius: 8px; font-size: 18px; padding: 4px 6px; cursor: pointer; }
.update-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; position: relative; z-index: 9; } .update-bar > svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .update-bar span { flex: 1; } .update-bar .icon-btn { background: var(--panel2); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab) + 16px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.25); } @media (min-width: 900px) { .toast { bottom: 20px; } }
.rg { padding: 10px 12px; border-radius: 10px; background: var(--panel); font-size: 12px; color: var(--ink2); margin: 12px 0; } .rg b { display: block; color: var(--ink); margin-bottom: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mybets { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); display: grid; gap: 6px; }
.mybets .kicker { margin: 0; padding: 0; }
.mybet { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.mybet .cap { margin: 0; } .mybet .legs { flex-basis: 100%; padding-left: 26px; }
.mybet > :last-child { margin-left: auto; }
.receipt { display: grid; gap: 2px; }
.receipt .kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.receipt .kv span { color: var(--muted); }
.receipt .kv b { text-align: right; display: flex; align-items: center; gap: 6px; }
.betrow small { display: block; }
.t.nowrap th, .t.nowrap td { white-space: nowrap; }
.warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.plans-app { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.plan-app { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--panel); }
.plan-app.on { border-color: var(--accent); }
.plan-app ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink2); display: grid; gap: 3px; }
.ls-strip { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; } .ls-strip i { font-style: normal; font-family: var(--num); font-size: 11px; width: 18px; height: 20px; display: inline-grid; place-items: center; border-radius: 4px; background: var(--panel3); color: var(--ink2); } .ls-strip i.up { background: color-mix(in srgb, var(--up) 25%, transparent); color: var(--up); } .ls-strip i.amber { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.preview { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .preview.open { display: block; -webkit-line-clamp: unset; }
.amber-chip { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.pos-n { font-style: normal; font-family: var(--num); font-size: 11px; color: var(--muted); margin-right: 4px; } .fact.rchip-r b { font-family: var(--num); font-weight: 600; color: var(--amber); }
.ftag { font-style: normal; display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); } .ftag.mover { background: color-mix(in srgb, var(--up) 20%, transparent); color: var(--up); } .tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.form-card .note { font-size: 14px; margin-top: 6px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip { padding: 10px 12px; border-radius: 10px; background: var(--panel2); margin: 6px 0; } .tip .tip-hd { display: flex; align-items: center; gap: 8px; } .tip .tip-hd img { width: 18px; height: 18px; border-radius: 5px; } .tip .note { font-size: 13px; color: var(--ink2); margin-top: 4px; } .tip .facts { margin: 6px 0 0; }
.speed-map { display: grid; gap: 8px; } .speed-map .lane { padding: 8px 12px; border-radius: 10px; background: var(--panel2); } .speed-map .lane .facts { margin: 4px 0 0; }
.spark { vertical-align: middle; }
.offer-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-left: 4px; vertical-align: 1px; }
.accent-fact { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kind-cap { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--panel3); color: var(--ink2); } .kind-cap.boost { color: var(--up); background: color-mix(in srgb, var(--up) 18%, transparent); } .kind-cap.moneyBack { color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent); } .kind-cap.earlyPayout { color: var(--code-r); background: color-mix(in srgb, var(--code-r) 15%, transparent); }
.promo-card { position: relative; padding: 12px 14px 12px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin: 8px 0; overflow: hidden; } .promo-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink2); } .promo-card.boost::before { background: var(--up); } .promo-card.moneyBack::before { background: var(--amber); } .promo-card.earlyPayout::before { background: var(--code-r); } .promo-card.feature::before { background: var(--muted); }
.promo-card .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .promo-card h3 { margin: 6px 0 2px; font-size: 16px; } .promo-card p { margin: 4px 0; font-size: 14px; } .promo-card details { margin-top: 4px; } .promo-card summary { cursor: pointer; }
.promos-strip { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; } .promos-strip .hd { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; font: inherit; } .promos-strip .hd .kicker { flex: 1; } .promos-strip .hd .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; } .promos-strip.open .hd .chev { transform: rotate(90deg); }
.promos-strip .lines { display: none; padding: 0 12px 10px; } .promos-strip.open .lines { display: grid; gap: 8px; } .offer-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); text-decoration: none; font-size: 14px; } .offer-line img { width: 18px; height: 18px; border-radius: 5px; } .offer-line .cap { flex-basis: 100%; margin-left: 26px; }
/* the race card's news (Stage N3, docs/ARBS-AND-NEWS.md): the strip is a promos strip with the posts under it */
.nw-strip .hd > svg:first-child { width: 16px; height: 16px; color: var(--accent); flex: none; }
.nw-strip-posts { display: grid; gap: 8px; padding: 0 12px 12px; } .nw-strip-posts .nw-post, .nw-runner .nw-post { background: var(--bg); }
.nw-runner { display: grid; gap: 8px; }
/* the pop-up (Daniel, 18 Oct: "where its not in the way"): a corner over the page, under every sheet, never over the toolbar,
   the tab bar, the race view's grid and prices, the betslip pill or the docked slips. A phone: a slim bar just above the tab
   bar, opened with a tap, lifted over the betslip pill, and over the dock (--dock-h) when a slip is docked; the view keeps room
   under its last rows for it, as it does for the dock. A wide screen: the sidebar's own bottom corner, above the plan chip, so
   it is never over the race view; a slim bar on a short window, so the sidebar's links stay in sight; lifted over the dock only
   where the centred dock reaches the sidebar (under 1072 px); the pill is bottom right. */
.nw-pop { --nw-b: calc(var(--tab) + env(safe-area-inset-bottom) + 8px); position: fixed; z-index: 9; left: 12px; right: 12px; bottom: var(--nw-b); max-width: 480px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 18%, transparent); }
body:has(.slip-pill) .nw-pop { --nw-b: calc(var(--tab) + 72px); }
body:has(.slip-dock:not(:empty)) .nw-pop { --nw-b: calc(max(64px + env(safe-area-inset-bottom) + var(--dock-h, 150px), var(--tab) + 64px) + 8px); }
.nw-pop-bar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 40px 8px 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.nw-pop-bar svg { width: 16px; height: 16px; color: var(--accent); flex: none; } .nw-pop-bar b { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nw-pop-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.nw-pop-card { display: none; padding: 10px 12px; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.nw-pop.open .nw-pop-bar { display: none; } .nw-pop.open .nw-pop-card { display: block; } .nw-pop.open .nw-pop-k { cursor: pointer; }
.nw-pop-k { padding-right: 28px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); overflow-wrap: anywhere; }
.nw-pop-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 4px; font-size: 14px; } .nw-pop-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nw-pop-who .nw-handle { flex: 1 1 0; min-width: 0; }
.nw-pop-at { margin-left: auto; flex: none; color: var(--muted); font-size: 12px; }
.nw-pop-text { margin: 4px 0 0; font-size: 14px; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-pop.more .nw-pop-text { display: block; -webkit-line-clamp: unset; }
.nw-pop-ft { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .nw-pop-more { border: 0; background: none; padding: 2px 0; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.nw-pop-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .nw-pop-x:hover { background: var(--panel2); color: var(--ink); } .nw-pop-x svg { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .view:has(> .nw-pop) { padding-bottom: calc(var(--tab) + 28px + 56px); }
  body:has(.slip-pill) .view:has(> .nw-pop) { padding-bottom: calc(var(--tab) + 28px + 112px); }
  body:has(.slip-dock:not(:empty)) .view:has(> .nw-pop) { padding-bottom: calc(var(--dock-h, 150px) + 30px + 56px); }
}
@media (min-width: 900px) {
  .nw-pop, body:has(.slip-pill) .nw-pop, body:has(.slip-dock:not(:empty)) .nw-pop { --nw-b: 52px; left: 10px; right: auto; width: calc(var(--side) - 20px); }
  .nw-pop .nw-pop-bar { display: none; } .nw-pop .nw-pop-card { display: block; }
}
@media (min-width: 900px) and (max-height: 859px) {
  .nw-pop:not(.open) .nw-pop-bar { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; } .nw-pop:not(.open) .nw-pop-card { display: none; }
  .nw-pop-bar svg { grid-row: span 2; } .nw-pop-bar b { max-width: none; }   /* in the sidebar: the author, the text under it */
}
@media (min-width: 900px) and (max-width: 1071px) { body:has(.slip-dock:not(:empty)) .nw-pop { --nw-b: calc(16px + var(--dock-h, 150px) + 10px); } }
.wv-item { width: 100%; text-align: left; font: inherit; cursor: pointer; border: 0; border-bottom: 1px solid var(--line); } .wv-item.on { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); } .wv-item.on .val { color: var(--accent); }
/* Stage 7: the betslip through the extension (docs/PLACEMENT-UI.md) */
.px.bet { cursor: pointer; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .px.bet:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
/* a tote price that can be bet is drawn as every other bettable price: the fill, the accent edge and ink (FEEDBACK-2026-10-13 point 6) */
.px.tote.bet, .px.tote.pl.bet { background: var(--panel2); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .px.tote.bet:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.px.bet.in { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .px.bet.in .mv.firm { border-top-color: var(--on-accent); } .px.bet.in .mv.drift { border-bottom-color: var(--on-accent); } .px.lay.bet.in { background: var(--lay); color: #fff; }
.slip-pill { position: fixed; right: 16px; bottom: calc(var(--tab) + 16px); z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 25%, transparent); cursor: pointer; }
.slip-pill svg { width: 18px; height: 18px; } .slip-pill b { font-family: var(--num); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--on-accent) 22%, transparent); border-radius: 999px; padding: 0 8px; }
@media (min-width: 900px) { .slip-pill { bottom: 24px; right: 24px; } }
/* one slip look (FEEDBACK-2026-10-13 point 12): the betslip's legs and the SRM, multi and exotics slips share it, a solid
   panel with the line edge and the card radius, never a grey see-through box */
.slip-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.leg { padding: 10px 12px; margin: 8px 0; } .leg.live { opacity: .7; }
.leg .hd { display: flex; align-items: center; gap: 10px; } .leg .hd .t { flex: 1; min-width: 0; } .leg .hd b { display: block; font-weight: 700; } .leg .hd small { color: var(--muted); display: block; }
.leg .pl { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; } .leg .stepper { display: inline-flex; align-items: center; gap: 4px; } .leg .stepper input { width: 76px; text-align: center; }
.leg .stakes { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .leg .amt { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; } .leg .amt input { width: 92px; }
.leg .ret { margin: 4px 0 8px; } .leg .btn.wide { width: 100%; }
.acc { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-top: 14px; } .acc input { width: 20px; height: 20px; }
/* one stake entry (stage-k2 §5): the large currency field, the preset chips, the live line and the primary button */
.stake-entry { display: grid; gap: 8px; margin: 10px 0 4px; }
.stake-field { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 24px; color: var(--ink); }
.stake-field .cur { color: var(--muted); font-weight: 600; } .stake-field .stake-in { flex: 1; min-width: 0; width: auto; border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; text-align: left; outline: none; } .stake-field:focus-within { border-color: var(--accent); }
.leg .stakes .stake-field { padding: 2px 10px; font-size: 18px; width: 150px; } .leg .stakes .stake-field .stake-in { width: 100%; }
.stake-presets { margin: 0; } .stake-line { margin: 0; } .stake-flexi { display: flex; align-items: center; gap: 6px; } .stake-flexi input { width: 16px; height: 16px; }
.srm-slip .stake-entry { margin: 6px 0 0; } .srm-slip .stake-field { font-size: 18px; padding: 4px 10px; }
.result { display: grid; place-items: center; margin: 6px 0 10px; } .result svg { width: 44px; height: 44px; } .result.up { color: var(--up); } .result.down { color: var(--down); } .result.amber { color: var(--amber); }
.kv.down b { color: var(--down); }
/* market movers (app.js viewMovers): a dense grid of cards, the move loud, a tap opening the runner under its card */
.movers-chips { margin: 6px 0 0; }
.movers { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; margin-top: 10px; }
@media (max-width: 480px) { .movers { grid-template-columns: minmax(0, 1fr); } }
.mover { display: block; padding: 8px 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.mover:hover, .mover:focus-visible { border-color: var(--accent); outline: none; }
.mover.open { border-color: var(--accent); background: var(--panel2); }
.mover .hd { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; } .mover .hd b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mover .hd .cap { white-space: nowrap; } .mover .hd .mv { margin-left: auto; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.mover .mv.firm, .mover-detail .firm { color: var(--up); } .mover .mv.drift, .mover-detail .drift { color: var(--down); }
.mover .bd { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .mover .rn { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mover .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .mover .num small { display: block; color: var(--muted); font-size: 11px; }
.mover .bd .spark { width: 60px; height: 16px; flex: none; }
.mover-detail { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--accent); }
.md-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .md-num { width: 44px; height: 44px; border-radius: 10px; background: var(--panel3); display: grid; place-items: center; font-weight: 700; flex: none; overflow: hidden; } .md-num img { width: 44px; height: 44px; }
.md-who { flex: 1; min-width: 200px; } .md-who b { font-size: 16px; } .md-acts { display: flex; gap: 6px; align-items: center; } .md-note { margin: 8px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.md-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; } @media (max-width: 760px) { .md-grid { grid-template-columns: minmax(0, 1fr); } }
.md-grid .kicker { margin-bottom: 6px; } .md-grid table.t td, .md-grid table.t th { padding: 5px 6px; white-space: nowrap; } .md-grid table.t td.n, .md-grid table.t th.n { text-align: right; } .md-grid table.t .spark { width: 60px; height: 16px; } .md-grid tr.muted td { color: var(--muted); }
.chip-gap { flex: none; width: 6px; }
/* the national tote's column mark (docs/RACE-PRODUCTS.md §7): a word, not a book's logo */
.tote-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; background: #2e7d5b; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
/* the SP column (S12): its badge in the header; a cell without a figure reads "SP" as a label */
.tote-badge.sp-badge { background: #5a4a8a; } .px.spx { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
/* the "Bet at [book]" picker on a dividend leg and its confirm sheet */
.leg .div-at { margin: 6px 0 0; } .pool-at select option:disabled { color: var(--muted); }
.tote-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* the race's other markets (docs/RACE-PRODUCTS.md Stage 2) */
.mk-card { background: var(--panel); border-radius: 12px; padding: 12px; margin: 10px 0; }
.mk-card > b { display: block; margin-bottom: 6px; }
.mk-card .prices { overflow-x: auto; }
/* a book's logo in a market card is the grid's 18px, never the file's own 96px (FEEDBACK-2026-10-13 point 11) */
.mk-card img { width: 18px; height: 18px; border-radius: 5px; } .mk-card th img { display: block; margin: 0 auto 3px; }
.srm-src .chip { display: inline-flex; align-items: center; gap: 5px; } .srm-src .model-chip { color: var(--model); } .srm-src .model-chip.on { color: var(--on-accent, #fff); }
/* an SRM board price is a .px like the grid's, a button that puts the runner on the slip at the depth shown */
.px.srm-cell { cursor: pointer; padding: 0; } .px.srm-cell:hover { border-color: var(--ink2); }
.px.srm-cell.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
/* the ready-made SRMs (FEEDBACK-2026-10-13 point 13): two headed groups, one card under another, every line wrapping */
.srm-readies { display: grid; gap: 14px; margin-top: 12px; }
.srm-ready-group h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.srm-ready-list { display: grid; gap: 8px; }
.srm-ready { display: grid; gap: 4px; min-width: 0; text-align: left; background: var(--panel2); border-radius: 10px; padding: 10px 12px; color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.srm-ready:hover, .srm-ready:focus-visible { outline: 1.5px solid var(--ink2); outline-offset: -1px; }
.srm-ready-t.model { color: var(--model); }
.srm-ready-leg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.srm-ready-leg .silk { width: 20px; height: 20px; flex: none; border-radius: 5px; background: var(--panel3); overflow: hidden; }
.srm-ready-leg .silk-img { width: 20px; height: 20px; object-fit: contain; background: #fff; display: block; }
.srm-ready-books { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.srm-ready-px { display: inline-flex; align-items: center; gap: 4px; font-family: var(--num); }
.srm-ready-px.best b { color: var(--amber); }
.srm-ready-px.best b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--amber); vertical-align: super; }
.srm-ready-ours { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* the SRM value scanner's finds (Stage G): the ready-made card with a mark down its side */
.srm-value { box-shadow: inset 3px 0 0 var(--up); }
/* Picks, Other markets (stage-k2 §8): the kind on each card, a kind in shadow marked quietly, each kind's record as a chip */
.srm-ready-t .cd { font-size: 12px; margin-left: 4px; }
.other-markets { margin-top: 18px; } .other-markets h2 { margin-bottom: 4px; } .mkv-records { margin: 6px 0 2px; } .mkv-records .val-chip { white-space: normal; }
.srm-value-group h4 { color: var(--up); }
.srm-slip { position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 10; max-width: 640px; margin: 0 auto; display: grid; gap: 8px; padding: 10px 12px; box-shadow: 0 8px 30px rgb(0 0 0 / .18); max-height: 60vh; overflow-y: auto; }
@media (min-width: 900px) { .srm-slip { bottom: 16px; } }
/* the slips over the tab bar stack in one dock (Stage 13): the multi across races on top, the race's SRM or exotic slip under it */
/* the dock scrolls as a whole up to 70% of the window (REVIEW-2026-10-15 S1): no slip and no book list inside it has a cap of
   its own; the page's bottom padding follows the dock's height (--dock-h, set by slipDock) so the rows behind it stay reachable.
   No `align-content: end` here (15 Oct, the dock that would not scroll): on a grid that overflows, end alignment puts the
   overflow above the box's top, outside the scrollable area, so the slip's top was clipped and nothing scrolled; the dock
   sits on its bottom edge anyway, so the rows need no alignment of their own */
.slip-dock { position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 10; max-width: 640px; margin: 0 auto; display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 900px) { .slip-dock { bottom: 16px; } }
.slip-dock > .srm-slip { position: static; max-height: none; overflow: visible; margin: 0; }   /* the dock's full width, never shrunk to its words */
.slip-dock:empty { display: none; }
/* each slip's title row (the toggle with the best price) stays at the top of the dock while its body scrolls under it: the bar
   is stuck to the dock's scrollport, grown over the slip's padding and the row gap so the rows behind it do not show through */
.slip-dock .srm-bar { position: sticky; top: 0; z-index: 1; margin: -10px -12px -8px; padding: 10px 12px 8px; width: auto; background: var(--panel); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.multi-books { display: grid; gap: 4px; }
.multi-book { display: grid; gap: 1px; padding: 5px 8px; border-radius: 8px; background: var(--panel2); }
.multi-book.on { background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.multi-slip a { text-decoration: none; }
body:has(.slip-dock:not(:empty)) .view { padding-bottom: calc(var(--dock-h, 150px) + 30px); }
/* a slip whose bet is on (S7): the words, the My Bets chip and the × on one line */
.srm-bar.placed { cursor: default; } .srm-bar.placed b { font-size: 13px; } .srm-bar.placed .chip { text-decoration: none; }
/* our fair under a betslip leg's price (S6) */
.leg .fair-line { margin: 2px 0 0; }
.srm-bar { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.srm-row { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.srm-row .sp, .srm-bar .sp { flex: 1; }
.srm-slip .px.big { font-size: 18px; font-weight: 700; width: auto; min-width: 50px; padding: 0 6px; flex: none; }
.srm-slip .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; }
.srm-slip > .chip { justify-self: start; }
/* every docked slip fits its dock at any width (16 Oct: the exotics slip ran off the right edge at 460 px, and past the
   panel at any width). The slip's one column never grows past the slip, so a wide table or the row of book chips scrolls
   inside it instead of widening the dock; the title row wraps, the dividend estimate on a line of its own under the
   kind and the price; a long Bet label wraps inside the button */
.srm-slip { grid-template-columns: minmax(0, 1fr); }
.srm-slip .prices { overflow-x: auto; scrollbar-width: thin; } .srm-slip .prices td.num { white-space: nowrap; }
.srm-bar { flex-wrap: wrap; row-gap: 2px; text-align: left; } .srm-bar > b { min-width: 0; }
.srm-bar .est-div { order: 1; flex: 1 1 100%; }
.srm-bar .bar-px { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }   /* the book and its price wrap together, at the right */
.srm-slip .btn { max-width: 100%; white-space: normal; }
.srm-slip .srm-row:has(> .chip) { flex-wrap: wrap; row-gap: 6px; } .srm-slip .srm-row > .px { flex-shrink: 0; }   /* a row of action chips (Clear, Share, To the Extra SRM, Add to multi) wraps */
.view:has(.srm-grid) { padding-bottom: 180px; }
.exo-cell { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: none; color: var(--on-accent, #fff); font-weight: 700; cursor: pointer; }
.exo-cell.on { background: var(--accent); border-color: var(--accent); }
.mk-card td.mk-sel { min-width: 140px; max-width: 220px; font-size: 13px; white-space: normal; }
/* Extra Markets as the race card's grid (stage-k2 §2): the runner cell for a one-runner selection, a text row of the same
   height for the rest, the price columns in the grid's table; the chip filter above the cards */
.mk-card .mk-grid { margin: 0 -2px; background: var(--panel2); } .mk-card .mk-grid .names .name { cursor: default; } .mk-card .mk-grid .names .name[data-runner] { cursor: pointer; }
.mk-grid .names .mk-text .txt b { font-size: 13px; -webkit-line-clamp: 2; white-space: normal; } .mk-grid .names .txt small.sub { white-space: normal; color: var(--muted); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
.mk-grid .prices td .mk-m, .mk-grid .prices td .mk-only { margin-top: 1px; }
.mk-filter { margin: 4px 0 0; } .mk-filter-sub { margin: 2px 0 6px; } .mk-filter .model-chip { color: var(--model); } .mk-filter .model-chip.on { color: var(--on-accent); }
/* Stage E (FEEDBACK-2026-10-13 point 15): each book's margin against our fair, small under its price */
/* an extra-market price the extension cannot place: marked "prices only", the reason on hover or tap (review 15 Oct, B7, note 21) */
.mk-card .px.only { cursor: help; opacity: .85; } .mk-card .mk-only { display: block; margin-top: 2px; font-size: 9px; line-height: 1.1; color: var(--amber); text-align: center; white-space: nowrap; }
.mk-card .mk-m { display: block; margin-top: 2px; font-size: 10px; line-height: 1.1; color: var(--muted); text-align: center; font-family: var(--num); }
/* "Our markets": the markets no book sells, priced by the model; each price a button onto the Extra SRM */
.xs-ours { margin-top: 18px; }
.xs-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .xs-hd b { font-size: 15px; } .xs-hd small { font-size: 12px; font-weight: 600; }
.xs-ours .cap { margin: 4px 0 0; }
.mk-card .xs-who { display: block; font-size: 11px; color: var(--muted); }
.xsrm-slip .xs-m { display: block; font-size: 11px; }
/* a settled selection (point 16): won, lost, void, not known yet */
.px.st { font-size: 12px; white-space: nowrap; background: transparent; border-color: transparent; } .px.st-won { color: var(--up); font-weight: 700; } .px.st-lost { color: var(--muted); font-weight: 500; } .px.st-void { color: var(--ink2); font-weight: 500; } .px.st-unknown { color: var(--amber); font-weight: 600; }
.mk-card tr.xs-set td { padding-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.mk-card th.model { color: var(--model); font-size: 11px; font-weight: 600; line-height: 1.15; vertical-align: bottom; } .mk-card th.model span { display: block; font-size: 9px; color: var(--muted); font-weight: 500; }
.xs-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; } .xs-pick .chip { min-width: 34px; justify-content: center; }
.px.xs-cell { cursor: pointer; padding: 0; } .px.xs-cell:hover { outline: 1.5px solid var(--model); outline-offset: -1px; }
.px.xs-cell.on { background: var(--model); color: var(--on-accent, #fff); } .px.xs-cell.on small { color: inherit; opacity: .85; }
body:has(#xsrm-slip) .view { padding-bottom: 220px; }
/* the Extra SRM slip: legs in words wrap within the dock on a narrow screen */
.slip-dock { grid-template-columns: minmax(0, 1fr); }
.xsrm-slip { grid-template-columns: minmax(0, 1fr); }
.xsrm-slip .srm-row { flex-wrap: wrap; } .xsrm-slip .srm-legs .srm-row { flex-wrap: nowrap; } .xsrm-slip .srm-legs .srm-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.xsrm-slip > .chip { white-space: normal; text-align: left; }
.chip.static { cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.chip .cnt { font-size: 10px; opacity: .7; margin-left: 3px; }
/* open windows (docs/RACE-PRODUCTS.md Stage 12): a book whose product is not open says when it opens */
.win-notes { margin: 6px 0; }
.win-notes p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
/* the pool builder (docs/RACE-PRODUCTS.md Stage 14; stage-k2 §3): each leg the race card's grid, a tap on a row picks the
   runner; the summary wraps; one Bet at [book] picker and one Bet button */
.chip.static.pool-open { cursor: pointer; }
.pool-grid { margin: 6px 0; } .pool-grid .names .name[data-prun] { cursor: pointer; } .pool-grid .prices tr.pool-row[data-prun] { cursor: pointer; }
.pool-grid .prices tr.pool-row.on td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pool-sum { margin: 10px 0; padding: 10px 12px; display: grid; gap: 8px; }
.pool-facts { display: flex; flex-wrap: wrap; gap: 6px; } .pool-facts .fact { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; line-height: 1.25; } .pool-facts .fact small { font-size: 10px; color: var(--muted); } .pool-facts .fact b { font-family: var(--num); font-size: 14px; } .pool-facts .model-fact { background: var(--model-panel); } .pool-facts .model-fact b { color: var(--model); }
.pool-at { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; } .pool-at select { width: auto; padding: 6px 10px; border-radius: 999px; background: var(--panel2); border: 0; font-weight: 600; }
/* Analytics, SRM and Exotics (products.js tables) */
.pp-table .scroll { overflow-x: auto; } .pp-table td small { font-size: 11px; } .pp-cap { margin: 6px 0 0; } .pp-verdicts { margin: 10px 0 0; padding-left: 18px; } .pp-verdicts li + li { margin-top: 4px; }
.pp-better, .pp-res-hit { color: var(--up); font-weight: 600; } .pp-worse { color: var(--down); font-weight: 600; } .pp-unclear, .pp-none, .pp-res-open { color: var(--muted); }
/* Analytics, Bookmakers (bookmakers.js): the rank, then one table per measure; each table scrolls in its own box on a phone */
.bk-days { margin-bottom: 8px; }
.bk-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-rank-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px; grid-template-areas: "place name score" ". bar bar" ". parts parts"; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.bk-rank-row:last-child { border-bottom: 0; }
@media (min-width: 560px) { .bk-rank-row { grid-template-columns: 26px minmax(0, 1fr) minmax(80px, 200px) 40px; grid-template-areas: "place name bar score" ". parts parts parts"; } }
.bk-rank-row .bk-name b { overflow: hidden; text-overflow: ellipsis; }
.bk-place { grid-area: place; font-family: var(--num); font-weight: 700; color: var(--ink2); text-align: right; }
.bk-rank-row .bk-name { grid-area: name; }
.bk-bar { grid-area: bar; height: 8px; border-radius: 4px; background: var(--panel3); overflow: hidden; } .bk-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bk-score { grid-area: score; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.bk-parts { grid-area: parts; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); font-family: var(--num); font-variant-numeric: tabular-nums; }
.bk-parts i { font-style: normal; font-family: inherit; } .bk-part.unsampled { color: var(--amber); }
.bk-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; } .bk-name img { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.bk-tag { font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 1px 6px; border-radius: 6px; background: var(--panel3); color: var(--ink2); }
.bk-weights, .bk-foot { margin-top: 8px; }
.bk-section h3 { margin: 0 0 4px; } .bk-section > .cap { margin: 0 0 8px; }
.bk-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bk-table table.t td, .bk-table table.t th { white-space: nowrap; }
.bk-table table.t th.c, .bk-table table.t td.c { text-align: center; }
.bk-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .bk-sort.on { color: var(--ink); }
.bk-tick { color: var(--up); font-weight: 700; } .bk-no { color: var(--muted); }
.bk-notes { margin: 6px 0 0; padding-left: 18px; } .bk-notes li + li { margin-top: 4px; }
/* racing.com (Stage R, contracts/racingcom-product.md §3): the credit, the gear mark, a past run's speed line */
.rc-credit { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); } .rc-credit img { width: 14px; height: 14px; border-radius: 3px; }
.rc-gear { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; background: var(--panel3); color: var(--ink2); } .rc-gear.first { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.rc-speed { font-size: 12px; color: var(--ink2); margin-top: 4px; white-space: normal; } .rc-speed .rc-stew { color: var(--muted); margin-top: 2px; }
tr.rc-row td { padding-top: 0; border-top: 0; }
.rc-result { margin: 8px 0; } .rc-news { display: block; color: var(--ink2); }
/* a Top N sold only inside an SRM: the cell links to the SRM tab in place of a price (review 15 Oct, note 5) */
.px.srm-only { font-size: 10px; font-weight: 600; line-height: 1.1; text-align: center; white-space: normal; color: var(--ink2); text-decoration: none; cursor: pointer; }
.rc-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink2); }
/* runner icons on the meta line (stage-k2 §6): firming, drifting, first-time blinkers, other gear, first up, top weight */
.ri { display: inline-flex; align-items: center; gap: 2px; vertical-align: -2px; margin-left: 2px; cursor: help; } .ri svg { width: 12px; height: 12px; } .ri small { font-size: 10px; color: var(--ink2); }
.ri b { font-size: 9.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: var(--panel3); color: var(--ink2); line-height: 1.5; }
.ri-flame { color: var(--up); } .ri-snowflake { color: var(--down); } .ri-glasses, .ri-gear { color: var(--amber); } .ri-weight { color: var(--ink2); }
.rc-mark { width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; } .rc-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
/* the runner sheet's line of icon words under the name (fourth pass, F2): each mark with what it means */
.icon-words { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 2px; font-size: 13px; } .icon-words .ri { margin-left: 0; gap: 4px; cursor: default; vertical-align: 0; } .icon-words .ri svg { width: 14px; height: 14px; flex: none; } .icon-words .ri > span { color: var(--ink2); }
/* the News tab (Stage N2 of docs/ARBS-AND-NEWS.md): the X posts as cards, the filter chips, the race chip, the "3 new" pill */
.nw-feed, .nw-pill-wrap, .nw-foot { max-width: 680px; }
.nw-chips { margin: 6px 0 0; }
.nw-pill-wrap { position: sticky; top: 50px; height: 0; display: flex; align-items: flex-start; justify-content: center; z-index: 7; }
.nw-pill { margin-top: 4px; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); } .nw-pill[hidden] { display: none; }
.nw-feed { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; overflow-anchor: none; }
.nw-post { padding: 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.nw-hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nw-av { width: 34px; height: 34px; border-radius: 50%; background: var(--panel2); color: var(--ink2); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.nw-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nw-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-handle { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-time { flex: none; align-self: flex-start; border: 0; background: none; padding: 2px 0 4px 6px; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .nw-time.full { color: var(--ink2); }
.nw-text { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nw-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 14px; overflow-wrap: anywhere; }
.nw-media { display: block; margin-top: 10px; max-width: 420px; } .nw-media img { display: block; width: 100%; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
/* the whole picture, as X's feed shows it (R3): the card's width, its own shape, never cropped */
.nw-media.nw-full { max-width: 100%; } .nw-media.nw-full img { width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: 14px; }
/* a post as X's feed (R3): the face, then the name, @handle and time on one line, the text, the picture, the race and View on X under it */
.sp-news.nw-x { display: flex; gap: 10px; align-items: flex-start; padding: 12px; } .nw-x .nw-av { width: 40px; height: 40px; font-size: 16px; }
.nw-x-body { flex: 1; min-width: 0; } .nw-x-hd { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex-wrap: wrap; } .nw-x-hd b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nw-x-hd .nw-time { padding: 0; align-self: baseline; } .nw-x .nw-text { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.nw-x-ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .nw-x-ft .nw-race { max-width: 100%; } .nw-x-ft .nw-out { font-size: 13px; color: var(--muted); }
.nw-list-x { max-width: 640px; }
/* Behind the news as tiles, the picks' and arbs' grid (R3) */
.sp-behind-list { margin: 8px 0; } .sp-behind .ab-pct { color: var(--accent); } button.ab-chip.bet { border: 0; font: inherit; cursor: pointer; } button.ab-chip.bet:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.nw-ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nw-race { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); font-size: 13px; font-weight: 600; }
.nw-race:hover, .nw-race:focus-visible { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); outline: none; }
.nw-race svg { width: 13px; height: 13px; flex: none; } .nw-race span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nw-race small { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.nw-out { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.nw-again { display: flex; margin: 12px auto 0; }
.nw-foot { margin-top: 12px; }
/* the Arbs tab (Stage A2 of docs/ARBS-AND-NEWS.md): one card per arb, the filter chips, the delayed-Betfair note, the stake box */
.ab-chips { margin: 6px 0 0; } .ab-chips small { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--amber) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); font-size: 13px; color: var(--ink2); } .ab-note svg { width: 16px; height: 16px; color: var(--amber); flex: none; margin-top: 1px; }
.ab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; margin-top: 10px; overflow-anchor: none; align-items: start; }
.ab-list > .loading, .ab-list > .empty { grid-column: 1 / -1; }
.ab-card { padding: 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ab-top { display: flex; align-items: flex-start; gap: 10px; }
.ab-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ab-race { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); min-width: 0; } .ab-race svg { width: 15px; height: 15px; flex: none; color: var(--ink2); } .ab-race b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-race:hover b { color: var(--accent); }
.ab-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .ab-kind { font-weight: 600; color: var(--ink2); }
.ab-pct { flex: none; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--up); }
.ab-legs { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid var(--line); }
.ab-leg { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ab-leg img { width: 24px; height: 24px; border-radius: 6px; }
.ab-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .ab-who b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-amt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; } .ab-amt small { font-size: 11px; color: var(--muted); }
.ab-amt { min-width: 58px; } .ab-amt b { font-family: var(--num); font-size: 14px; font-weight: 600; color: var(--ink2); }
/* P2a: racing's lay is a leg row in the NBA's look, its chip in the lay colour; the code's mark beside the race */
.ab-leg.sp.lay .ab-chip .num { color: var(--lay); } .ab-av > svg { width: 28px; height: 28px; margin-top: 2px; color: var(--muted); }
/* P2b: racing's picks as the NBA's pick cards, one look; the books disagreeing; the NBA's SGM finds */
.rpk { cursor: pointer; } .rpk .ab-pct { color: var(--up-text, var(--up)); }
.rpk .ab-lines { margin: 8px 0 0; font-size: 12px; color: var(--ink2); } .rpk-list { margin-top: 8px; } .other-markets .ab-list { margin-top: 6px; }
.sp-pk-b.rest { color: var(--ink2); } button.sp-pk-b { border: 0; font: inherit; color: inherit; cursor: pointer; } button.sp-pk-b small { font-size: 10.5px; color: var(--muted); } button.sp-pk-b:hover { box-shadow: inset 0 0 0 1.5px var(--accent); } button.sp-pk-b.best:hover { box-shadow: inset 0 0 0 1.5px var(--up); } .sp-pk-b.rest small { font-size: 11px; } .rpk-dis-rule { margin: 6px 0 2px; align-items: center; } .rpk-dis-lead { margin: 0 4px 0 0; white-space: nowrap; flex: none; } .rpk-dis-words { margin: 2px 0 0; }
.sp-pk-legs { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink); } .sp-pk-legs li { margin: 2px 0; } .sp-dis-words { grid-column: 1 / -1; margin: 0; }
.ab-foot { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.ab-stake { flex: none; display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ab-in-wrap { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink2); font-size: 14px; } .ab-in-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input.ab-in[type=number] { width: 64px; height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-family: var(--num); font-size: 15px; font-weight: 600; padding: 0; outline: none; -moz-appearance: textfield; appearance: textfield; } .ab-in::-webkit-outer-spin-button, .ab-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ab-lines { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink2); } .ab-lines b { color: var(--up); font-weight: 700; }
.ab-empty span { display: block; max-width: 460px; margin: 0 auto; } .ab-again { display: inline-flex; margin: 12px 4px 0; } .ab-again-row { display: block; }
.ab-end { margin-top: 12px; }
/* A4: Alert me under the chips, and the card's betting buttons */
.ab-alerts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 0; } .ab-alerts .btn svg { width: 15px; height: 15px; } .ab-alerts .cap { margin: 0; }
.ab-bet { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ab-bet .btn { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Racing follows Sports (the design review of 20 Oct 2026; Daniel: "recommendations are fine"): every chip 36 px high, as
   Sports' are; the dense rows keep their compact chips: a table's cells (the form guide's Stewards and Replay, the exotics
   price grid's head), a chip inside a line of words (Undo, Tell me when it opens, Check for replay, Cancel unmatched), the
   betslip's price stepper, the docked slip's bar, and a channel's Closed badge */
.chip { min-height: 36px; } .chip.small { padding-left: 10px; padding-right: 10px; }
td .chip, th .chip, .cap .chip, small .chip, .leg .stepper .chip, .srm-bar .chip, .chan-bar .chip { min-height: 0; }
/* a sheet's bar (its title and Close) stays at the top while the sheet scrolls, on the sheet's own background */
.sheet .card > .bar:first-child { position: sticky; top: -14px; z-index: 4; background: var(--bg); margin: -14px -16px 8px; padding: 12px 16px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sheet.full .card > .bar:first-child { top: calc(-1 * max(14px, env(safe-area-inset-top))); margin-top: calc(-1 * max(14px, env(safe-area-inset-top))); padding-top: calc(max(14px, env(safe-area-inset-top)) - 2px); }
/* a tap on a price at a book that places nothing from here: a brief ring on the cell beside the toast */
.px.tapped { animation: px-tap .45s ease-out; } @keyframes px-tap { from { box-shadow: 0 0 0 2px var(--ink2); } to { box-shadow: 0 0 0 0 transparent; } }

/* the Command Centre's Routines (21 Oct 2026): a table on a wide screen, cards on a phone; "running" in the accent */
.pill.run { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rt-table td.rt-said { max-width: 360px; overflow-wrap: anywhere; font-size: 12px; } .rt-table td.rt-said.down, td.rt-said.down { color: var(--down); }
.rt-table table.t { table-layout: fixed; } .rt-table th:nth-child(1) { width: 26%; } .rt-table th:nth-child(2) { width: 92px; } .rt-table th:nth-child(3) { width: 21%; } .rt-table th:nth-child(4) { width: 15%; }
.rt-cards { display: none; }
@media (max-width: 700px) { .rt-table { display: none; } .rt-cards { display: block; } }
/* the Arbs tab's NBA list (docs/SPORTS.md 23, "NBA arbs as racing's"): racing's card with its title (the face or team
   logo, the player bold and the market regular), the game under it, the legs' prices as racing's chips, the filters as
   strips of chips */
.ab-av { flex: none; align-self: flex-start; } .ab-av .face, .ab-av .tm-badge { width: 40px; height: 40px; font-size: 12px; } .ab-av .tm-badge { border-radius: 10px; }
.ab-title { font-size: 15px; line-height: 1.3; color: var(--ink2); } .ab-title b { color: var(--ink); font-weight: 700; }
.sab .ab-race b { font-size: 13px; font-weight: 600; color: var(--ink2); } .sab .ab-race .tm-badge { width: 20px; height: 20px; border-radius: 5px; font-size: 7px; } .sab .ab-race .tm-badge .tm-logo { padding: 2px; }
.ab-window { font-size: 13px; font-weight: 600; color: var(--accent); }
.ab-pct.mid { color: var(--accent); font-size: 22px; }
.ab-leg.sp { grid-template-columns: minmax(0, 1fr) auto auto; } .ab-leg.sp .ab-who b, .ab-leg.sp .ab-who small { white-space: normal; }
.sab .ab-meta { flex-wrap: wrap; gap: 2px 8px; } .sab .ab-meta > * { white-space: nowrap; }
.ab-chip { margin: 0; } .ab-chip .num { font-family: var(--num); font-size: 15px; font-weight: 700; }
.sab .ab-chips + .ab-chips { margin-top: 6px; } .sab-lbl { align-self: center; margin: 0 2px 0 4px; }
.sab-games .chip { display: inline-flex; align-items: center; gap: 4px; } .sab-games .tm-badge { width: 18px; height: 18px; border-radius: 5px; font-size: 7px; cursor: pointer; } .sab-games .tm-badge .tm-logo { padding: 1px; } .sab-t { font-weight: 500; }
.sab-books .chip img { width: 16px; height: 16px; border-radius: 4px; display: block; }
.ab-search { margin: 8px 0 0; }
/* the Movers tab's NBA list: the player's face or the team's logo, a player's other rungs folded under "+N rungs" */
.sp-mover .sp-mv-t { display: block; font-size: 14px; color: var(--ink2); } .sp-mover .sp-mv-t b { color: var(--ink); } .sp-mover .sp-mv-t .chip { margin-left: 6px; vertical-align: middle; } .sp-rung { display: block; }
/* Sports (stage S4, sports-ui.js): racing's parts with a game for a race; the teams' colours and initials for their logos */
.tm-badge { position: relative; overflow: hidden; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; font-family: var(--num); cursor: pointer; } .tm-badge.big { width: 44px; height: 44px; font-size: 12px; border-radius: 10px; } .tm-badge.ou { background: var(--panel3); color: var(--ink2); cursor: default; }
.tm-badge .tm-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.face { position: relative; overflow: hidden; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panel3); color: var(--ink2); font-size: 10px; font-weight: 700; } .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: var(--panel3); } .face.sm { width: 20px; height: 20px; font-size: 8px; } .face.big { width: 56px; height: 56px; font-size: 16px; }
[data-spteam] { cursor: pointer; }
.sp-search { margin: 8px 0; } .sp-search input { width: 100%; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }
.sp-books .chip img { width: 14px; height: 14px; border-radius: 4px; } .sp-books .chip:not(.on) img { opacity: .45; }
.sp-formchips .cap { align-self: center; margin-right: 2px; }
.sp-found, .sp-roster { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .sp-found .chip, .sp-roster .chip { gap: 6px; }
.sp-form { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; font-family: var(--num); font-variant-numeric: tabular-nums; } .sp-form small { font-size: 11px; color: var(--ink2); white-space: nowrap; }
.sp-form .res { display: inline-flex; gap: 2px; } .sp-form .res i, .sp-form5 i { font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; padding: 1px 2px; border-radius: 4px; text-align: center; background: var(--panel3); color: var(--ink2); line-height: 14px; } .sp-form .res i.w, .sp-form5 i.w { background: color-mix(in srgb, var(--up-text) 12%, transparent); color: var(--up-text); } .sp-form .res i.l, .sp-form5 i.l { background: color-mix(in srgb, var(--down-text) 12%, transparent); color: var(--down-text); }
.grid .prices th.sp-lead, .grid .prices td.sp-lead { text-align: left; padding: 0 8px; } .grid .prices td.sp-lead { min-width: 118px; }
.sp-tbl .r-form { padding: 0 0 4px 36px; } .sp-tbl .r-form .sp-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sp-avgs { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; } .sp-avgs .stat { min-width: 58px; padding: 6px 8px; border-radius: 10px; background: var(--panel2); text-align: center; } .sp-avgs .v { font-family: var(--num); font-weight: 700; font-size: 15px; } .sp-avgs .k { font-size: 10px; color: var(--muted); font-weight: 600; }
.sp-person { align-items: center; gap: 12px; }
.sp-hd { align-items: center; } .sp-hd .t small { margin-top: 2px; }
.sp-game { display: block; color: var(--ink); } .sp-game .hd { margin-bottom: 8px; }
.sp-tbl .r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px 72px 78px; gap: 6px; align-items: center; padding: 3px 0; } .sp-tbl .r.hdr { padding: 0; font-size: 11px; color: var(--ink2); font-weight: 600; } .sp-tbl .r.hdr span { text-align: center; } .sp-tbl .nm { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-c { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 40px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-family: var(--num); font-variant-numeric: tabular-nums; line-height: 1.1; } .sp-c b { font-size: 14px; font-weight: 600; } .sp-c small { font-size: 11px; color: var(--ink2); font-weight: 600; } .sp-c .p { display: inline-flex; align-items: center; gap: 3px; } .sp-c img { width: 14px !important; height: 14px !important; border-radius: 4px; flex: none; } .sp-c.gap { background: transparent; border-color: transparent; color: var(--muted); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.px.sl { flex-direction: column; line-height: 1.1; width: 56px; } .px.sl small { font-size: 10.5px; color: var(--ink2); font-weight: 600; }
.grid .rowh.sp-main td, .grid .names .name.sp-main { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sp-grid { margin: 8px 0; } .sp-grid .names .name { cursor: default; } .sp-grid .names .name[data-spplayer], .sp-grid .names .name[data-spfluc] { cursor: pointer; }
.inj { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: 1px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); } .inj.out { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }
.fact.model-fact { background: var(--model-panel); color: var(--model); }
.sp-logs { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .sp-logs table { border-collapse: collapse; width: 100%; font-size: 13px; } .sp-logs th, .sp-logs td { padding: 7px 8px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); font-family: var(--num); font-variant-numeric: tabular-nums; } .sp-logs th { border-top: 0; font-size: 11px; color: var(--muted); font-weight: 600; } .sp-logs th:nth-child(-n+2), .sp-logs td:nth-child(-n+2) { text-align: left; } .sp-logs .on { font-weight: 700; } .sp-logs td.hit { color: var(--up-text); } .sp-logs td.miss { color: var(--down-text); } .sp-logs small.up { color: var(--up-text); } .sp-logs small.down { color: var(--down-text); }
.sp-chart { width: 100%; height: auto; display: block; margin: 8px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); } .sp-chart .ax { font-size: 11px; fill: var(--ink2); font-family: var(--num); }
.sp-final { font-weight: 700; color: var(--ink2); }
.sp-grid .px.fl { cursor: pointer; } .sp-grid .px.fl:hover { border-color: var(--ink2); }
.sp-share { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--panel2); border-radius: 10px; padding: 10px; margin: 0 0 12px; }
.sp-section { margin-bottom: 4px; } .sp-section a.chip { text-decoration: none; }
.sp-news { align-items: flex-start; } .sp-news small { white-space: normal; } .sp-news .inj { margin-left: 6px; } .sp-news-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
/* Sports polish (Daniel's review, 20 Oct 2026): every book within reach on a wide screen, racing's row acts in the names */
@media (min-width: 900px) { .grid.sp-grid { grid-template-columns: 230px 1fr; } }
@media (min-width: 1200px) { .grid.sp-grid { grid-template-columns: 250px 1fr; } }
.sp-grid .prices table { width: 100%; } .sp-grid .prices th, .sp-grid .prices td { padding: 0 2px; } .sp-grid .px, .sp-grid .px.sl { width: 52px; } .sp-grid .px.fluc { width: 96px; }
.sp-grid .prices th.sp-lead, .sp-grid .prices td.sp-lead { padding: 0 6px; } .sp-grid .prices td.sp-lead { min-width: 124px; }
.sp-grid .names .name { cursor: pointer; } .sp-grid .names .name .acts { margin-left: auto; }
.sp-chart { max-width: 640px; }
/* Racing parity (the audit of 20 Oct): the row's badge or face in racing's silk box, racing's control row, the chart's grid */
.sp-silk { overflow: visible; } .sp-silk .tm-badge, .sp-silk .face { width: 28px; height: 28px; border-radius: 7px; font-size: 9px; } .sp-silk .face img { border-radius: 7px; }
.sp-books .chip img { width: 16px; height: 16px; border-radius: 4px; } .sp-books .chip:not(.on) img { opacity: .4; } .sp-books .chip { padding: 4px 6px; }
.sp-chart .gl { stroke: var(--line); stroke-width: 1; } .prof-hd .face.big { width: 44px; height: 44px; } .prof-hd .tm-badge.big { width: 44px; height: 44px; }
.sports .ri { display: inline-grid; vertical-align: -2px; margin-right: 3px; } .sports .ri svg { width: 12px; height: 12px; } .sports .ri.flame { color: var(--amber); } .sports .ri.snowflake { color: var(--accent); }   /* sports only: racing's .ri (inline-flex, icon over its words) stays racing's */
/* Sports, the design review of 20 Oct 2026 (Fable 5.1's punch list): sports-only selectors and tokens; racing's untouched */
:root, [data-theme="day"], [data-theme="ice"] { --up-text: #066A48; --down-text: #B02525; }
[data-theme="night"], [data-theme="navy"], [data-theme="graphite"] { --up-text: var(--up); --down-text: var(--down); }
.sports .chip { min-height: 36px; } .sports .chip.small { padding-left: 10px; padding-right: 10px; }
.sports .sp-books { gap: 4px; } .sports .sp-books .chip { padding: 0 5px; min-width: 28px; justify-content: center; }
.sp-ctl { margin: 4px 0 6px; min-height: 36px; gap: 12px; } .sp-ctl .hint { white-space: nowrap; } .sp-ctl button { min-height: 36px; } .sp-ctl .sp-tog::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; flex: none; } .sp-ctl .sp-tog.on::before { background: currentColor; }
.grid.sp-grid .prices th { color: var(--ink2); } .grid.sp-grid .prices th .lbl { color: var(--ink2); } .grid.sp-grid .names .mkt-l small { color: var(--ink2); } .grid.sp-grid .mkt .px { color: var(--ink2); }
.sp-grid .ml.firm { color: var(--up-text); } .sp-grid .ml.firm i { border-top-color: var(--up-text); } .sp-grid .ml.drift { color: var(--down-text); } .sp-grid .ml.drift i { border-bottom-color: var(--down-text); }
.sp-form5 { flex-direction: row; gap: 4px; align-items: flex-start; } .sp-form5 .g { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 21px; } .sp-form5 small { font-size: 11px; line-height: 13px; } .sp-form5 .pf { color: var(--ink); font-weight: 600; } .sp-form5 .pa { color: var(--ink2); } .sp-form5 .lab i { background: none; } .sp-form5 .lab small { color: var(--ink2); font-weight: 500; text-align: right; align-self: stretch; }
.sp-tbl .r-form { padding: 2px 0 6px 36px; }
.sp-other i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink2); }
.sp-grid.sp-flucs .prices td, .sp-grid.sp-flucs .prices th { min-width: 104px; } .sp-grid.sp-flucs .px.fluc { width: 100px; }
.grid.sp-grid .names .name.sp-grp, .grid.sp-grid tr.sp-grp td { height: 36px; } .grid.sp-grid .names .name.sp-grp { cursor: default; padding: 0 10px; gap: 8px; font-size: 13px; background: var(--panel2); } .grid.sp-grid .names .name.sp-grp .tm-badge { width: 22px; height: 22px; border-radius: 6px; font-size: 8px; } .grid.sp-grid tr.sp-grp td { border-top: 1px solid var(--line); background: var(--panel2); }
.sp-hd-wide .t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .sp-side { display: inline-flex; align-items: center; gap: 8px; } .sp-side small { font-weight: 500; }
.sp-soon .cd { color: var(--amber); }
/* S11's live scores: LIVE (racing's red pill), the quarter and clock in racing's .cd.now red, the score; the card's score box
   (racing's results box) once a game has started */
.sp-livew { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px 5px; white-space: nowrap; } .sp-livew .cd { font-size: 12px; }
.sp-sc { font-weight: 700; color: var(--ink); font-size: 13px; }
.sp-final { white-space: nowrap; }
.sp-chip-live { color: var(--down); font-weight: 700; }
/* a started game's score beside the team name on the home stays whole; the name gives way (ellipsis) */
.sp-tbl .nm:has(> b.num) { display: flex; align-items: baseline; gap: 4px; } .sp-tbl .nm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sp-tbl .nm > b.num { flex: none; } .rchip.on .sp-chip-live { color: var(--on-accent); }
.chip.sp-gchip { gap: 0; white-space: normal; height: auto; min-height: 36px; max-width: 150px; padding-top: 4px; padding-bottom: 4px; } .chip.sp-gchip .sp-final { font-weight: 600; white-space: normal; text-align: right; }
.chip.sp-gchip .sp-livew { justify-content: flex-start; }
.sp-box { margin: 8px 0 4px; overflow-x: auto; } .sp-box table { border-collapse: collapse; width: 100%; max-width: 520px; font-size: 13px; }
.sp-box th, .sp-box td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--line); } .sp-box thead th { color: var(--muted); font-weight: 600; font-size: 11px; }
.sp-box thead th:first-child { text-align: left; } .sp-box tbody th { text-align: left; white-space: nowrap; } .sp-box tbody th .tm-badge { margin-right: 6px; vertical-align: middle; }
.sp-box td.now { color: var(--down); font-weight: 700; } .sp-box td.tot { font-weight: 800; color: var(--ink); }
.sp-hot { display: inline-block; margin-right: 4px; padding: 0 4px; border-radius: 4px; font-family: var(--num); font-size: 11px; font-weight: 700; line-height: 15px; color: var(--up-text); background: color-mix(in srgb, var(--up-text) 12%, transparent); }
.sp-st:focus-visible, .sp-sortc:focus-visible, .sp-ctl .sp-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-silk .bm::before { content: ""; position: absolute; inset: -4px -14px -14px -4px; }
.sports .sp-more { margin: 6px 0; }
.sheet .card:has([data-sp-sheet]) > .bar { position: sticky; top: -14px; z-index: 4; background: var(--bg); margin: -14px -16px 8px; padding: 12px 16px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sp-sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.sp-chart image { opacity: .95; }
.sp-tags .inj { margin: 0 6px 0 0; }
/* the Sports tab's Model under the best book's price, or alone where no book prices the game (R13) */
.sp-tbl.with-m .sp-c { height: 54px; } .sp-c .sp-m { font-size: 10px; font-weight: 600; color: var(--model); white-space: nowrap; } .sp-c-model { background: var(--model-panel); border-color: transparent; } .sp-c .p.model, .sp-c .p.model b { color: var(--model); }
.sp-c.flash-up { animation: fu .7s ease-out .1s; } .sp-c.flash-down { animation: fd .7s ease-out .1s; }
.px.sp-tapped { animation: sp-tap .45s ease-out; } @keyframes sp-tap { from { box-shadow: 0 0 0 2px var(--ink2); } to { box-shadow: 0 0 0 0 transparent; } }
.face.ring { box-shadow: 0 0 0 2px var(--ring); } .sp-silk .face.ring { box-shadow: 0 0 0 2px var(--ring); }
.tm-badge .tm-logo { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 6px; padding: 2px; }
.sp-tray { align-items: center; gap: 6px; margin: 6px 0 2px; } .sp-tray .cap { flex: none; margin-right: 2px; } .sp-st { all: unset; cursor: pointer; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; } .sp-st .face { width: 32px; height: 32px; } .sp-st small { font-size: 11px; color: var(--ink2); max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid.sp-grid .names .name.sp-hl { animation: sp-hl 1.6s ease-out; } @keyframes sp-hl { from { background: color-mix(in srgb, var(--amber) 22%, transparent); } to { background: transparent; } }
@media (min-width: 900px) { .sp-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 0 12px; align-items: start; } .sp-tbl { max-width: 560px; } .grid.sp-grid.sp-pgrid { grid-template-columns: 270px 1fr; } }
@media (min-width: 1200px) { .grid.sp-grid.sp-pgrid { grid-template-columns: 290px 1fr; } }
/* Same game multis (stage S5, sports-ui.js "same game multis"): racing's SRM slip and board, their sports twins */
.sp-sgm .sp-sgm-book small { min-width: 0; overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }   /* a book's own lines and its edge: two lines at most, never cut on a phone */
.sp-sgm .sp-sgm-book b { flex: none; }
.sp-sgm .sp-sgm-at { flex-wrap: wrap; } .sp-sgm .sp-sgm-at .chips { flex-wrap: wrap; gap: 6px; }
.sp-sgm .btn.bet-only { background: var(--panel2); color: var(--ink2); border: 1px dashed var(--line); }
.sp-sgm .btn.bet-only.sp-tapped { animation: sp-tap .45s ease-out; }
.sp-sgm > small.amber { margin-top: -4px; }
.sports [data-sgmgrid] .px.srm-cell { padding: 0 4px; }
.sp-sgm-markets { margin-bottom: 6px; }
/* Live game view (docs/SPORTS.md 27, sports-live-ui.js): Live / Pre-game as racing's mode chips, the in-play grid as the
   card's (prices only: a tap opens the price's history), the box score, team stats, plays and leaders as racing's segs */
.sp-odds { margin-bottom: 0; } .sp-ldot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--down); } .sp-odds .chip.on .sp-ldot { background: var(--on-accent); }
.sp-live-odds [data-lvcell] { cursor: pointer; } .sp-live-odds .grid .names .name[data-lvsel] { cursor: pointer; }
.sp-inplay-note { margin: 6px 2px 0; }
.sp-live-odds .grid.sp-grid .names .name.sp-grp .face { width: 22px; height: 22px; font-size: 8px; }
.sp-lteam .tm-badge { width: 20px; height: 20px; border-radius: 5px; font-size: 7px; cursor: inherit; } .sp-lteam .tm-badge .tm-logo { padding: 1px; }
.sp-bs td:first-child, .sp-bs th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); max-width: 150px; }
.sp-bs td[data-spplayer] { cursor: pointer; }
.sp-bs-nm { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; } .sp-bs-nm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sp-bs-nm b { font-weight: 600; } .sp-bs-nm small { color: var(--muted); font-size: 10px; font-weight: 600; }
.sp-oncourt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.sp-bs tr.sp-bs-sep td { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding-top: 9px; padding-bottom: 3px; letter-spacing: .04em; text-transform: uppercase; }
.sp-bs th:nth-child(2), .sp-bs td:nth-child(2) { text-align: right; }
.sp-bs td.sp-bs-out { text-align: left; font-family: inherit; font-weight: 500; }
.sp-bs tr.sp-bs-tot td { font-weight: 700; color: var(--ink); } .sp-bs tr.sp-bs-pct td { border-top: 0; padding-top: 0; font-size: 11px; color: var(--ink2); }
.sp-bs-foot { margin: 6px 2px 0; }
.sp-ts { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 8px 12px 4px; }
.sp-ts-hd { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .sp-ts-hd > span { display: inline-flex; align-items: center; gap: 8px; } .sp-ts-hd .tm-badge { width: 24px; height: 24px; border-radius: 6px; font-size: 8px; cursor: default; }
.sp-ts-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 8px 0 6px; border-bottom: 1px solid var(--line); } .sp-ts-row:last-child { border-bottom: 0; }
.sp-ts-row .k { font-size: 12px; color: var(--ink2); text-align: center; } .sp-ts-row .v { font-size: 15px; color: var(--ink2); } .sp-ts-row .v.r { text-align: right; } .sp-ts-row .v.on { color: var(--ink); font-weight: 800; }
.sp-ts-row .v small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.sp-ts-bar { grid-column: 1 / -1; display: flex; gap: 3px; height: 5px; } .sp-ts-bar i { display: block; height: 100%; border-radius: 3px; background: var(--panel3); } .sp-ts-bar i.on { background: var(--accent); }
.sp-pl-q { margin: 12px 2px 6px; }
.sp-plays { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sp-plays .row.sp-play { display: grid; grid-template-columns: 40px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; justify-content: stretch; }
.sp-pl-clock { font-size: 12px; color: var(--muted); } .sp-pl-tm .tm-badge { width: 22px; height: 22px; border-radius: 6px; font-size: 7px; cursor: default; } .sp-pl-tm .tm-badge .tm-logo { padding: 1px; }
.sp-pl-txt { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; } .sp-pl-sc { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sp-plays .row.sp-scoring .sp-pl-txt { color: var(--ink); font-weight: 600; } .sp-plays .row.sp-scoring .sp-pl-sc { color: var(--ink2); } .sp-pl-sc .on { color: var(--accent); font-weight: 800; }
.sp-ld-hd { justify-content: flex-start; align-items: center; } .sp-ld-hd .tm-badge { width: 24px; height: 24px; border-radius: 6px; font-size: 8px; cursor: default; } .sp-ld-hd h2 { margin: 14px 0 8px; }
.sp-live-segs .list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sp-ld-v { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .sp-ld-v b { font-size: 20px; line-height: 1.1; } .sp-ld-v small { font-size: 10px; font-weight: 700; color: var(--muted); }
/* S12's live model (docs/SPORTS.md 79): the books past the live Model under the in-play grid, the Model's words in its colour */
.sp-live-edges { margin-top: 12px; } .sp-live-edges .model { color: var(--model); font-family: var(--num); white-space: nowrap; }
/* ---- end of Live game view */
/* Sports, Daniel's first manual review (21 Oct 2026): racing's drop-downs for the books, the form and the filters (racing's
   .ctl and .menu as they are); the started game's scoreboard centred; the home's cards filling their column; the form's
   extra words. Sports-only selectors; racing's untouched */
.sports .sp-ctl .sp-menu { min-height: 36px; white-space: nowrap; } .sports .sp-ctl { column-gap: 16px; }
.sp-board { max-width: 560px; margin: 10px auto 8px; }
.sp-sb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.sp-sbt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 13px; } .sp-sbt b { font-weight: 700; letter-spacing: .02em; }
.sp-sbs { display: flex; align-items: center; gap: 14px; } .sp-sbs > b { font-size: 34px; line-height: 1; font-weight: 700; color: var(--ink2); min-width: 2.2ch; text-align: center; } .sp-sbs > b.lead { color: var(--ink); }
.sp-sbm { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; font-size: 12px; white-space: nowrap; } .sp-sbm .cd { font-size: 13px; font-weight: 700; }
.sp-board .sp-box { margin: 6px 0 0; } .sp-board .sp-box table { max-width: none; } .sp-board .sp-box tbody th { width: 30%; }
@media (min-width: 900px) { .sports .sp-tbl { max-width: none; } }
.sp-formbox { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; } .sp-fx { display: flex; flex-wrap: wrap; gap: 2px 8px; } .sp-fx small { font-size: 11px; color: var(--ink2); white-space: nowrap; font-family: var(--num); font-weight: 600; }
.sp-tbl .r-form .sp-formbox { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sp-nms { display: none; } @media (max-width: 480px) { .sports .sp-tbl .sp-nml { display: none; } .sports .sp-tbl .sp-nms { display: inline; } }
/* in a grid the extra words sit on one line beside the five columns, so a row keeps racing's height (the names column's
   rows are drawn apart from the prices' and must line up) */
.sp-grid .sp-formbox { flex-direction: row; align-items: center; gap: 10px; } .sp-grid .sp-fx { flex-wrap: nowrap; }
/* a player's form in a grid: his last 5 on top, the other words wrapping beside each other under it (five options fit
   racing's row); on a phone the team's extra words wrap under its five columns, and the rows of a grid that shows them
   are taller, names and prices alike, so they stay lined up (the review of sports-review1) */
.sp-grid td.sp-lead .sp-form:not(.sp-form5) { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; max-width: 170px; } .sp-grid td.sp-lead .sp-form:not(.sp-form5) .res { flex-basis: 100%; }
@media (max-width: 480px) { .sp-grid .sp-formbox { flex-direction: column; align-items: flex-start; gap: 2px; } .sp-grid .sp-fx { flex-wrap: wrap; max-width: 130px; white-space: normal; } .sp-grid.sp-tall .names .name.rowh, .sp-grid.sp-tall .prices tr.rowh td { height: 88px; } }
/* end of Daniel's first manual review */
/* The NBA model's chips (stage S6), in the model's colour as racing's */
.sports .model-chip { color: var(--model); } .sports .model-chip.on { color: var(--on-accent, #fff); }
/* The game card's content (docs/SPORTS.md 28, sports-content-ui.js): the preview and key stats as racing's strip under the
   header, the Lineups mode (lineups and scenarios), each book's previews and tips as racing's content segments */
.sp-story .lines { gap: 8px; } .sp-story .lines > .chip { justify-self: start; } .sp-story .hd .cap { margin-left: auto; }
.sp-story-h { margin: 2px 0 0; font-size: 15px; line-height: 1.35; }
.sp-story-p p { margin: 0 0 8px; } .sp-story-p:not(.open) p:nth-child(n+3) { display: none; }
.sp-story-lines { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; } .sp-story-lines li { margin: 2px 0; }
table.t.sp-tale { width: 100%; max-width: 560px; margin: 4px auto 0; table-layout: fixed; } .sp-tale th, .sp-tale td { text-align: center; padding: 5px 6px; }
.sp-tale thead th { font-size: 13px; font-weight: 700; color: var(--ink); } .sp-tale thead th.cap { font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.sp-tale tbody th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .sp-tale td { font-family: var(--num); font-size: 14px; } .sp-tale td small { color: var(--muted); font-size: 11px; }
.sp-tale td .sp-form { justify-content: center; } .sp-tale td.up { font-weight: 700; } .sp-tale thead th:nth-child(2) { width: 24%; }
.sp-tale .sp-form5 { gap: 2px; } .sp-tale .sp-form5 .g { min-width: 0; } .sp-tale .sp-form5 i { min-width: 14px; font-size: 11px; padding: 1px; }
.sp-story > .lines > .cap { text-align: center; } .sp-story > .lines > .facts { justify-content: center; margin: 0; }
.sp-lu { display: grid; gap: 14px; } @media (min-width: 900px) { .sp-lu { grid-template-columns: 1fr 1fr; } }
.sp-lu-team .kicker { margin: 6px 0 4px; } .sp-lu-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sp-lu-row.sp-lu-changed { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sp-lu-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; } .sp-lu-who > span:last-child { display: flex; flex-direction: column; min-width: 0; } .sp-lu-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lu-num { font-family: var(--num); font-size: 13px; color: var(--ink2); white-space: nowrap; } .sp-lu-num b.up { color: var(--up); } .sp-lu-num b.down { color: var(--down); }
.sp-lu-acts { display: flex; gap: 4px; flex-wrap: wrap; } .sp-lu-acts .chip { padding: 3px 8px; }
@media (max-width: 600px) { .sp-lu-acts { flex-basis: 100%; padding-left: 42px; } }
.sp-scen { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .sp-scen .strip { margin: 4px 0; }
table.t.sp-scen-t td.n, table.t.sp-scen-t th.n { text-align: right; white-space: nowrap; } table.t.sp-scen-t td img { width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-left: 2px; }
.sp-content-segs .tip img { width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-right: 4px; }
/* the game page's Insights and Tips (stage S9c, sports-content-ui.js insightsHtml): our numbers' sentences, each with its
   link and its bets' price buttons (racing's price chip), and the tips as cards with their reason, price and result */
.sp-ins-foot { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .sp-ins-foot > section, .sp-ins-it > * { min-width: 0; }
.sp-ins-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.sp-ins-h { font-size: 17px; font-weight: 750; margin: 0; letter-spacing: -0.01em; }
.sp-ins-chips { margin: 0 0 8px; }
.sp-ins-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.sp-ins-it { display: grid; grid-template-columns: 104px 1fr; gap: 2px 10px; align-items: baseline; padding: 9px 12px; border-radius: 10px; background: var(--panel2); }
.sp-ins-g { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sp-ins-t { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.sp-ins-acts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sp-ins-acts:empty { display: none; }
.sp-ins-bet { display: inline-flex; align-items: center; gap: 6px; }
.sp-ins-bw { font-size: 12.5px; color: var(--ink2); }
.sp-ins-px { border: 0; cursor: pointer; font: inherit; color: var(--ink); background: var(--panel); outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.sp-ins-px:hover { outline-color: var(--accent); } .sp-ins-px.in { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); outline-color: var(--accent); }
.sp-ins-px:focus-visible, .sp-ins-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-ins-none { font-size: 12px; color: var(--muted); }
.sp-ins-link { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.sp-ins-empty { margin: 0; }
.sp-ins-more { justify-self: start; margin-top: 2px; }
.sp-tips-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sp-tip { padding: 11px 12px; border-radius: 12px; background: var(--panel2); display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--accent); }
.sp-tip.won { border-left-color: var(--up); } .sp-tip.lost { border-left-color: var(--down); } .sp-tip.void { border-left-color: var(--muted); }
.sp-tip-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .sp-tip-w { font-size: 15px; }
.sp-tip-m { font-size: 11.5px; color: var(--muted); }
.sp-tip-r { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.sp-tip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; }
.sp-tip-stood { font-size: 12.5px; color: var(--ink2); display: inline-flex; align-items: center; gap: 4px; } .sp-tip-stood img { width: 14px; height: 14px; border-radius: 4px; }
.sp-tip-why { color: var(--muted); font-size: 12px; }
.sp-tips-note { margin: 8px 0 0; }
@media (max-width: 560px) { .sp-ins-it { grid-template-columns: 1fr; } .sp-ins-acts { grid-column: 1; } .sp-ins-g { min-width: 0; } .sp-tips-list { grid-template-columns: 1fr; } }
/* Sports, Daniel's second manual review (21 Oct 2026): over and under side by side under one book (racing's tote W / P
   pair), the model's expected minutes and start as columns, the NBA's logo, the story as a paragraph and the tale of the
   tape as rows with bars, the Lineups' scenario sheet and bar, the live game on the whole width. Sports-only selectors */
.sp-grid.sp-ou .prices th.sp-pair { border-left: 1px solid var(--line); }
.sp-grid.sp-ou .prices tbody td.sp-u { padding-left: 0; }
.sp-grid.sp-ou .prices tbody tr.rowh > td:not(.sp-u):not(.sp-lead), .sp-grid.sp-ou .prices tbody tr.mkt > td { border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-grid .prices th.sp-mcol, .sp-grid .prices td.sp-mcol { min-width: 46px; padding: 0 4px; }
.sp-mv { font-family: var(--num); font-size: 14px; font-weight: 600; color: var(--ink2); } .sp-mv.on { color: var(--ink); }
.sp-twin { margin: 8px 0 0; }
.sp-story-para { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 72ch; }
.sp-tape { width: 100%; max-width: 560px; margin: 4px auto 0; }
.sp-tape-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 2px 0 8px; border-bottom: 1px solid var(--line); }
.sp-tape-hd > .cap { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sp-tape-tm { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; min-width: 0; } .sp-tape-tm.h { justify-self: end; flex-direction: row-reverse; }
.sp-tape-tm .tm-badge.big { width: 34px; height: 34px; border-radius: 9px; cursor: inherit; }
.sp-tape-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 5px; padding: 8px 2px 7px; border-bottom: 1px solid var(--line); }
.sp-tape-row:last-child { border-bottom: 0; } .sp-tape-row[data-sptape] { cursor: pointer; border-radius: 6px; } .sp-tape-row[data-sptape]:hover { background: var(--panel2); }
.sp-tape-row[data-sptape]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-tape-row .k { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; white-space: nowrap; }
.sp-tape-row .v { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-family: var(--num); font-size: 14px; color: var(--ink2); } .sp-tape-row .v.h { justify-content: flex-end; }
.sp-tape-row .v.on { color: var(--ink); font-weight: 700; } .sp-tape-row .v small { font-size: 11px; font-weight: 600; color: var(--muted); }
.sp-tape-bar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 4px; }
.sp-tape-bar i { display: block; height: 100%; border-radius: 3px; background: var(--panel3); } .sp-tape-bar i:first-child { justify-self: end; } .sp-tape-bar i.on { background: var(--accent); }
.sp-l5s { display: inline-flex; gap: 3px; } .sp-tape-row .v.h .sp-l5s { justify-content: flex-end; }
.sp-l5 { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-family: var(--num); font-size: 11px; font-weight: 700; text-decoration: none; }
.sp-l5.w { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up-text); } .sp-l5.l { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down-text); }
a.sp-l5:hover, a.sp-l5:focus-visible { outline: 1.5px solid currentColor; outline-offset: 1px; }
img.sp-league { display: inline-block; flex: none; width: auto; height: 16px; vertical-align: -3px; margin-right: 5px; border-radius: 2px; }
.sp-comp { display: flex; align-items: center; } .sp-comp img.sp-league { height: 24px; margin-right: 8px; }
div.kicker img.sp-league { height: 14px; vertical-align: -2px; }
.sp-scen-bar { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 6; margin: 10px 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .35); }
.sp-scen-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .sp-scen-bar-row + .sp-scen-bar-row { margin-top: 6px; }
.sp-scen-bar .kicker { margin: 0 4px 0 0; } .sp-scen-shift { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--num); font-size: 13px; color: var(--ink2); } .sp-scen-shift b { color: var(--ink); }
.sp-scen-presets { margin: 0 0 8px; align-items: center; } .sp-scen-presets > .cap { margin-right: 4px; white-space: nowrap; }
.sp-move-m { font-size: 13px; color: var(--ink2); } .sp-move-m .num { font-family: var(--num); } .sp-move-m b.up { color: var(--up-text); } .sp-move-m b.down { color: var(--down-text); }
.sp-lu-team .kicker .cnt { margin-left: 4px; } .sp-lu-what { flex: none; margin-left: auto; }
.sp-lu-team .list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sp-scen-all { margin-top: 16px; }
.sp-wi .row { align-items: flex-start; justify-content: flex-start; gap: 10px; } .sp-wi .row > b { flex: none; width: 78px; padding-top: 7px; } .sp-wi .strip { margin: 0; flex: 1; min-width: 0; flex-wrap: wrap; overflow: visible; justify-content: flex-start; }
.sp-ou2 { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.15; } .sp-ou2 > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sp-ou2 i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; } .sp-ou2.acts { align-items: flex-start; } .sp-ou2.acts .chip { padding: 2px 8px; }
table.t.sp-scen-t tr.sp-ou-row td { vertical-align: middle; }
@media (max-width: 600px) { .sp-lu-row { flex-wrap: nowrap; gap: 8px; } .sp-lu-num { font-size: 11px; white-space: normal; text-align: right; max-width: 92px; } .sp-scen-bar { top: calc(52px + env(safe-area-inset-top)); } }
/* the live game on the whole width (Daniel's second manual review): the scoreboard and its quarters side by side, the
   in-play grid across, then the box score beside the play-by-play; a phone keeps it compact and centred */
.sp-sbn { display: none; font-size: 12px; color: var(--muted); font-weight: 500; text-align: center; }
@media (min-width: 900px) {
  .sp-board { max-width: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 12px; align-items: stretch; }
  .sp-board .sp-sb { padding: 14px 18px; } .sp-board .sp-box { margin: 0; display: flex; align-items: center; } .sp-board .sp-box table { width: 100%; }
  .sp-sbn { display: block; } .sp-sbs > b { font-size: 44px; } .sp-sbt .tm-badge.big { width: 52px; height: 52px; }
  .sp-live-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
  .sp-live-pbp { position: sticky; top: calc(60px + env(safe-area-inset-top)); max-height: calc(100vh - 76px); overflow-y: auto; }

}
.sp-mv2 { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; } .sp-mv2 small { font-size: 11px; font-weight: 600; color: var(--muted); } .sp-mv2 small.on { color: var(--ink2); }
/* The NBA model's own prices (S6): All lines' Model only rows, Our markets on the card */
.sports .sp-model-only .name, .sports tr.sp-model-only td { opacity: .78; }
/* R9: a game no book has priced yet, its prices the model's own (docs/SPORTS.md 90) */
.sports .sp-nobooks { color: var(--model); background: var(--model-panel); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.sports .sp-nobooks b { color: var(--model); }
/* Players' All lines (22 Oct 2026): each player's lines nested under his headline row, the fold's buttons between */
.sports .grid.sp-grid.sp-pall .names .name.sp-phead, .sports .grid.sp-grid.sp-pall tr.sp-phead td { box-shadow: inset 0 1px 0 var(--line); }
.sports .grid.sp-grid.sp-pall .names .name.sp-sub { padding-left: 52px; } .sports .grid.sp-grid.sp-pall .names .name.sp-sub .txt b { font-weight: 600; font-size: 13px; }
.sports .grid.sp-grid.sp-pall .names .name.sp-sub, .sports .grid.sp-grid.sp-pall tr.sp-sub td { background: color-mix(in srgb, var(--panel2) 55%, transparent); }
.sports .grid.sp-grid .names .name.sp-grp.sp-pfold, .sports .grid.sp-grid tr.sp-grp.sp-pfold td { background: transparent; border-top: 0; } .sports .grid.sp-grid .names .name.sp-grp.sp-pfold { padding-left: 52px; gap: 6px; }
@media (max-width: 899px) { .sports .grid.sp-grid.sp-pall .names .name.sp-sub, .sports .grid.sp-grid .names .name.sp-grp.sp-pfold { padding-left: 14px; } }
.sports .sp-fold { display: flex; gap: 6px; flex-wrap: wrap; }
/* Sports, Daniel's third review (21 Oct 2026, docs/SPORTS.md 34): the NBA's movers as racing's mover cards, the arbs'
   row actions, the AutoBet tab's NBA side, the compare search, the lineups as the Players grid's rows; sports selectors
   only (a test walks this block), racing untouched */
.sp-movers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; } .sp-movers .sp-mvc { min-width: 0; }
.sp-mvc .hd .sp-mv-game { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink); text-decoration: none; }
.sp-mvc .hd .sp-mv-game .tm-badge { width: 18px; height: 18px; border-radius: 5px; font-size: 7px; flex: none; } .sp-mvc .hd .sp-mv-game .tm-badge .tm-logo { padding: 1px; }
.sp-mvc .hd .sp-mv-game:hover b { text-decoration: underline; } .sp-mvc .hd .cap { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-mvc .bd { gap: 8px; margin-top: 4px; } .sp-mvc .bd .sp-mv-av { flex: none; display: inline-flex; } .sp-mvc .bd .sp-mv-av .face, .sp-mvc .bd .sp-mv-av .tm-badge { width: 30px; height: 30px; font-size: 9px; } .sp-mvc .bd .sp-mv-av .tm-badge { border-radius: 8px; }
.sp-mvc .sp-mv-ou { background: var(--panel3); color: var(--ink2); }
.sp-mvc .rn.sp-mv-t { font-weight: 400; color: var(--ink2); font-size: 14px; } .sp-mvc .rn.sp-mv-t b { color: var(--ink); font-weight: 600; }
.sp-mvc .rn.sp-mv-t b, .sp-mvc .rn.sp-mv-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-mvc .rn.sp-mv-t small { font-size: 12.5px; color: var(--ink2); }
.sp-mvc .sp-mv-more { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 12px; } .sp-mvc .sp-mv-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.sp-mvc .sp-mv-px { flex: none; display: inline-flex; align-items: center; gap: 6px; } .sp-mvc .sp-mv-px .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-mvc .sp-mv-books { display: inline-flex; gap: 2px; } .sp-mvc .sp-mv-spark { flex: none; display: inline-flex; width: 60px; height: 16px; } .sp-mvc .sp-mv-spark .spark { width: 60px; height: 16px; }
.sp-mvc .sp-mv-rung { display: flex; align-items: center; gap: 8px; padding: 4px 0 0 38px; font-size: 12.5px; color: var(--ink2); } .sp-mvc .sp-mv-rung .sp-mv-rl { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.sp-mvc .sp-mv-rung .mv { font-weight: 700; margin-left: 4px; } .sp-mvc .sp-mv-rung .mv.firm { color: var(--up); } .sp-mvc .sp-mv-rung .mv.drift { color: var(--down); }
@media (max-width: 480px) { .sp-mvc .sp-mv-spark, .sp-mvc .sp-mv-spark .spark { width: 44px; } .sp-mvc .bd { gap: 6px; } .sp-mvc .sp-mv-px .num { font-size: 14px; } }
.sp-ab-acts { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; } .sp-ab-acts .chip { text-decoration: none; }
.sp-ab-acts .chip svg { width: 14px; height: 14px; }
.sp-ab .ab-leg.sp { cursor: pointer; border-radius: 10px; } .sp-ab .ab-leg.sp:hover { background: var(--panel2); } .sp-ab .ab-leg.sp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-auto .sp-rule .sp-rule-st { display: block; margin-top: 2px; } .sp-auto .sp-rule .sp-rule-st.up { color: var(--up-text, var(--up)); } .sp-auto .sp-rule .sp-rule-st.muted { color: var(--muted); }
.sp-auto .sp-rule .type-badge { margin-left: 6px; }
.sports .sp-find { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; } .sports .sp-find .sp-find-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sports .sp-find .face, .sports .sp-find .tm-badge { flex: none; } .sports .sp-find .num { font-family: var(--num); font-weight: 600; }
.sports .sp-find .tm-badge { width: 26px; height: 26px; border-radius: 7px; font-size: 8px; } .sports .sp-find + .sp-find { border-top: 1px solid var(--line); }
.sp-share-acts { display: grid; gap: 8px; }
/* the Lineups as the Players grid's rows (Daniel's third review): face, name, "#jersey · pos · team", then aligned columns;
   the biggest moves as the same rows, before → after; a compact What if */
.sp-lu-list .sp-lu-row { flex-wrap: nowrap; gap: 6px; padding: 7px 12px; cursor: pointer; justify-content: flex-start; }
.sp-lu-list .sp-lu-row:hover { background: var(--panel2); } .sp-lu-list .sp-lu-row.sp-lu-changed { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sp-lu-list .sp-lu-hd { padding: 6px 12px 4px; cursor: default; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.sp-lu-list .sp-lu-hd:hover { background: transparent; }
.sp-lu-list .sp-lu-g > .kicker { padding: 8px 12px 2px; margin: 0; }
.sp-lu-list .sp-lu-who { flex: 1; min-width: 0; gap: 10px; } .sp-lu-list .sp-lu-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sp-lu-list .sp-lu-txt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-lu-list .sp-lu-txt small { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lu-list .sp-lu-c { flex: none; width: 46px; text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink); }
.sp-lu-list .sp-lu-c b.up { color: var(--up-text, var(--up)); } .sp-lu-list .sp-lu-c b.down { color: var(--down-text, var(--down)); }
.sp-lu-list .sp-lu-c.sp-lu-min small { display: none; }
.sp-lu-out { color: var(--down-text, var(--down)); font-weight: 600; font-size: 12.5px; font-family: var(--font, inherit); }
.sp-lu-list .sp-lu-c.sp-lu-ba { width: 88px; display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 4px; white-space: nowrap; } .sp-lu-list .sp-lu-c.sp-lu-mmin { width: 64px; } .sp-lu-list .sp-lu-ba small { color: var(--muted); font-size: 11.5px; } .sp-lu-list .sp-lu-ba small::after { content: " →"; }
.sp-lu-list .sp-lu-hd .sp-lu-c.sp-lu-ba { display: block; }
.sp-lu-list .sp-lu-act { flex: none; width: 92px; display: flex; justify-content: flex-end; }
.sp-lu-list .sp-lu-what { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--panel2); color: var(--ink2); font-size: 12px; font-weight: 600; white-space: nowrap; margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sp-lu-list .sp-lu-what svg { width: 14px; height: 14px; flex: none; } .sp-lu-list .sp-lu-what.on { background: var(--accent); color: var(--on-accent); } .sp-lu-list .sp-lu-what:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .sp-lu-list .sp-lu-row { padding: 7px 10px; gap: 4px; } .sp-lu-list .sp-lu-who { gap: 8px; } .sp-lu-list .sp-lu-who .face { width: 28px; height: 28px; }
  .sp-lu-list .sp-lu-c { width: 33px; font-size: 12.5px; } .sp-lu-list .sp-lu-c.sp-lu-st, .sp-lu-list .sp-lu-c.sp-lu-pl { display: none; }
  .sp-lu-list .sp-lu-c.sp-lu-min { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .sp-lu-list .sp-lu-c.sp-lu-min small { display: block; font-size: 10px; color: var(--muted); }
  .sp-lu-list .sp-lu-c.sp-lu-ba { width: 40px; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.1; } .sp-lu-list .sp-lu-ba small::after { content: ""; }
  .sp-lu-list .sp-lu-act { width: 34px; } .sp-lu-list .sp-lu-what { padding: 0 7px; } .sp-lu-list .sp-lu-what span { display: none; }
}
.sp-autorule > span > svg { width: 18px; height: 18px; flex: none; color: var(--ink2); } .sp-autorule .icon-btn svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .sp-lu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sp-lu-team { min-width: 0; }
@media (min-width: 900px) and (max-width: 1439px) { .sp-lu { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .sp-lu-list .sp-lu-c.sp-lu-mmin { width: 34px; } }
/* the card's top, compact (Daniel's third review, note 8: "The story so far takes up so much space"): the story to two
   lines with More, the tale of the tape as one strip, the last meeting and the report's count on one line */
/* the story's first part always shown, the strip folded or not; the rest behind More (Daniel's fourth notes, 21 Oct 2026) */
.sp-story > .sp-story-first { padding: 0 12px 10px; } .sp-story.open > .sp-story-first { padding-bottom: 8px; } .sp-story-first .sp-story-h { margin: 0 0 4px; }
.sp-story-clip:not(.open) { display: none; } .sp-story-clip.open > a { margin-top: 6px; }
.sp-story .lines .sp-more { all: unset; cursor: pointer; justify-self: start; color: var(--accent); font-size: 13px; font-weight: 600; line-height: 1.4; } .sp-story .lines .sp-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sp-story .lines .sp-tape-more { justify-self: center; white-space: nowrap; flex: none; padding: 4px 10px; border-radius: 999px; background: var(--panel2); color: var(--ink2); font-size: 12px; }
.sp-tape-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 2px; border-top: 1px solid var(--line); min-width: 0; }
.sp-ts-side { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .sp-ts-side.h { flex-direction: row-reverse; }
.sp-ts-tm { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .sp-ts-side.h .sp-ts-tm { flex-direction: row-reverse; }
.sp-ts-tm .tm-badge { width: 24px; height: 24px; border-radius: 6px; font-size: 7.5px; cursor: inherit; } .sp-ts-tm b { font-size: 14px; }
.sp-ts-rec { font-family: var(--num); font-size: 13.5px; font-weight: 600; color: var(--ink); } .sp-ts-net { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sp-tape-strip .sp-l5s { gap: 2px; } .sp-tape-strip .sp-l5 { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.sp-story > .lines > .sp-top-facts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin: 0; } .sp-top-facts::-webkit-scrollbar { display: none; }
.sp-top-facts .fact { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
  .sp-ts-net, .sp-tape-more .w { display: none; } .sp-tape-strip { gap: 6px; } .sp-ts-side { gap: 5px; } .sp-tape-strip .sp-l5 { width: 14px; height: 16px; font-size: 9px; border-radius: 4px; }
  .sp-ts-tm .tm-badge { width: 22px; height: 22px; } .sp-ts-tm b { font-size: 13px; } .sp-ts-rec { font-size: 12.5px; }
}
.sp-story .lines .sp-top-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .sp-top-row > .sp-top-facts { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-end; }
.sp-top-row .sp-top-facts .fact { padding: 2px 9px; font-size: 12px; }
/* a final game's Result (Daniel's third review, note 10): the line score, leaders, settled lines, win probability, the parts */
.sp-res { display: grid; gap: 12px; margin-top: 4px; } .sp-res .kicker { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.sp-ls { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow-x: auto; } .sp-ls table.t { width: 100%; font-size: 14px; }
.sp-ls table.t th, .sp-ls table.t td { padding: 7px 10px; white-space: nowrap; } .sp-ls table.t .n { text-align: center; font-family: var(--num); font-variant-numeric: tabular-nums; }
.sp-ls .sp-ls-tm { display: flex; align-items: center; gap: 8px; } .sp-ls .sp-ls-tm .tm-badge { width: 24px; height: 24px; border-radius: 6px; font-size: 7.5px; }
.sp-ls tr.on td { color: var(--ink); } .sp-ls tr:not(.on) td { color: var(--ink2); } .sp-ls .sp-ls-t { font-size: 16px; }
.sp-final { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* the Result's game leaders: their own class, `.sp-ldr` (Daniel's fourth notes, 21 Oct 2026: a bare `.sp-lead` here made the
   Players grid's lead cells `td.sp-lead` flex boxes, stacked out of their row, so the prices ran three rows tall) */
.sp-ldr-g { display: grid; gap: 10px; } @media (min-width: 900px) { .sp-ldr-g { grid-template-columns: 1fr 1fr; } }
.sp-ldr-t { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 8px 10px; } .sp-ldr-t .kicker .tm-badge { width: 18px; height: 18px; border-radius: 5px; font-size: 6.5px; }
.sp-ldr { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 5px 0; } .sp-ldr + .sp-ldr { border-top: 1px solid var(--line); }
.sp-ldr > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .sp-ldr small { color: var(--ink2); font-size: 12px; }
.sp-ldr .sp-ldr-v { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .sp-ldr .sp-ldr-v b { font-family: var(--num); font-size: 18px; } .sp-ldr .sp-ldr-v small { font-size: 10px; font-weight: 700; color: var(--muted); }
.sp-settled .sp-set { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: center; } .sp-settled .sp-set-m { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sp-settled .sp-set-s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .sp-settled .sp-set-s .rchip-c { padding: 2px 8px; } .sp-settled .sp-set-r { font-size: 12px; font-weight: 700; }
.sp-settled .sp-set-s.up .sp-set-r { color: var(--up-text, var(--up)); } .sp-settled .sp-set-s.muted { opacity: .7; }
@media (max-width: 600px) { .sp-settled .sp-set { grid-template-columns: 1fr; } }
.sp-wp .chart { width: 100%; height: 140px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.sp-res-parts { margin: 4px 0 0; } .sp-res-body { min-width: 0; } .sp-res-tape { max-width: 640px; }
.sp-plays { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); max-height: 70vh; overflow-y: auto; }
.sp-play { display: grid; grid-template-columns: 74px 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; } .sp-play:last-child { border-bottom: 0; }
.sp-play .sp-play-t .tm-badge { width: 20px; height: 20px; border-radius: 5px; font-size: 6.5px; } .sp-play.sc { background: color-mix(in srgb, var(--accent) 5%, transparent); } .sp-play .sp-play-d[data-spplayer] { cursor: pointer; }
.sp-play .num { font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-res-body tr.st-starter td.st-nm { box-shadow: inset 3px 0 0 var(--accent); }
/* note 11: Biggest moves as the What-if sheet's table, the model's own line moving, the stat chips, the sheet's segments */
.sp-scen-chips { margin: 4px 0 8px; }
.sp-fair.up { color: var(--up-text, var(--up)); } .sp-fair.down { color: var(--down-text, var(--down)); }
.sp-wi2 .sp-more { all: unset; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.sp-scen-t .sp-fair { display: block; font-size: 11px; font-weight: 600; color: var(--muted); } .sp-scen-t tr.sp-model-row td:first-child { color: var(--ink2); }
.sp-wi2 { display: grid; gap: 6px; margin: 8px 0; } .sp-wi-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-wi-k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sp-seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); overflow: hidden; } .sp-seg.sp-seg-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .sp-seg-scroll::-webkit-scrollbar { display: none; }
.sp-seg .sp-seg-b { all: unset; cursor: pointer; flex: none; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; } .sp-seg .sp-seg-b + .sp-seg-b { border-left: 1px solid var(--line); }
.sp-seg .sp-seg-b.on { background: var(--accent); color: var(--on-accent); } .sp-seg .sp-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-ts-rec { white-space: nowrap; }
@media (max-width: 600px) { .sp-ts-tm b { display: none; } .sp-tape-strip .sp-l5 { width: 13px; } .sp-tape-strip .sp-tape-more { padding: 4px 8px; } }
.sp-mvc .rn.sp-mv-t small { display: flex; gap: 4px; min-width: 0; } .sp-mvc .rn.sp-mv-t .sp-mv-mk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-mvc .sp-mv-more { flex: none; white-space: nowrap; }
/* the Fable 5.1 review: the card's AutoBet box one line until opened, its rows' words on their own lines */
.sp-autorule small { display: block; } .sp-autofold { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sp-autofold:hover { color: var(--accent); }
.sp-autobox { padding: 6px 12px; }
/* Sports, Daniel's fourth notes (21 Oct 2026): the movers' market line whole (never cut for the rungs link, which wraps
   under it), a game market's bold line wrapping rather than cut */
.sp-mvc .rn.sp-mv-t small { flex-wrap: wrap; column-gap: 4px; row-gap: 0; } .sp-mvc .rn.sp-mv-t .sp-mv-mk { flex: none; max-width: 100%; }
.sp-mvc .rn.sp-mv-t b.sp-mv-mkb { white-space: normal; }
/* Sports, stage S9 (docs/SPORTS.md 41): steam on the card's rows and the Movers tab, the alternate-line cards on Arbs, the
   NBA Picks page's cards (their row of books) and their Alert me */
.sports .sp-steam.firm { color: var(--up); } .sports .sp-steam.drift { color: var(--down); } .sports .sp-steam { margin: 0 4px 0 0; }
.sp-stc .bd { flex-wrap: wrap; row-gap: 6px; } .sp-stc .sp-st-books { display: flex; flex-wrap: wrap; gap: 4px 12px; flex-basis: 100%; justify-content: flex-start; padding-left: 40px; min-width: 0; }
.sp-stc .sp-st-when { flex: none; white-space: nowrap; color: var(--ink2); } .sp-stc .sp-st-when::before { content: "· "; }
.sp-stc .sp-st-b { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; } .sp-stc .sp-st-b .num { font-variant-numeric: tabular-nums; }
.sp-stc .sp-mv-rung { flex-wrap: wrap; } .sp-stc .sp-mv-rung .sp-st-books { padding-left: 0; }
.sp-alt .ab-pct { color: var(--up-text, var(--up)); } .sp-alt .ab-window.sp-alt-src { color: var(--ink2); } .sp-alt .ab-foot { display: block; } .sp-alt .ab-lines { margin: 0; }
.sp-pk-alerts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sp-auto .pill { white-space: nowrap; }
.sp-wchips.strip { -webkit-mask-image: none; mask-image: none; justify-content: flex-end; }
.sp-pk .ab-pct { color: var(--up-text, var(--up)); }
.sp-pk-books { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; } .sp-pk-b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: var(--panel2); font-size: 12.5px; white-space: nowrap; }
.sp-pk-b .num { font-variant-numeric: tabular-nums; font-weight: 600; } .sp-pk-b img { width: 14px; height: 14px; border-radius: 4px; } .sp-pk-b.model { color: var(--model); } .sp-pk-b.model small { font-size: 11px; }
.sp-ab .ab-card, .sp-pk { cursor: pointer; }
.sp-pk-b.best { box-shadow: inset 0 0 0 1.5px var(--up); } .sp-pk .sp-ab-acts { margin-top: 8px; } .sp-pk-note { margin: 6px 0 0; }
@media (max-width: 600px) { .sp-pk .sp-ab-acts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .sp-pk .sp-ab-acts .chip { flex: none; } .sp-pk .sp-pk-ic span { display: none; } }
/* end of stage S9 */
/* Multis across games (stage S5c): an NBA leg's game and tip-off on one line in the multi slip; its words wrap instead */
.sp-mleg { white-space: nowrap; }
/* S10's screens on news (sports-impact-ui.js, docs/SPORTS.md 51): the card's news strip and late-scratch alarm, the news
   pop-up's best prices, the injuries board's numbers */
.sp-nw-strip { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 8px; scrollbar-width: none; } .sp-nw-strip::-webkit-scrollbar { display: none; }
.sp-nw-item { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 340px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-nw-item .inj { margin: 0; } .sp-nw-item small { white-space: nowrap; }
.sp-nw-strip.alarm .sp-nw-item.late { border-color: var(--down); background: color-mix(in srgb, var(--down) 10%, var(--panel)); }
.sp-nw-best small { display: inline; } .sp-nw-best { display: flex; align-items: center; gap: 6px; flex: none; } .sp-nw-best .px { display: inline-flex; gap: 4px; align-items: center; width: auto; padding: 0 8px; }
.sp-nw-nums { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; flex: none; max-width: 52%; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 13px; }
.sp-nw-nums > span { white-space: nowrap; } .sp-nw-nums small { display: inline; white-space: nowrap; } .sp-nw-inj { align-items: flex-start; }
@media (max-width: 600px) { .sp-nw-inj { flex-wrap: wrap; } .sp-nw-nums { max-width: 100%; justify-content: flex-start; padding-left: 42px; } .sp-nw-item { max-width: 280px; } }
/* P2c: racing's movers as the NBA's tiles; the runner's number where the NBA has a face */
.sp-mvc .bd .sp-mv-av .tm-badge.sp-mv-num { background: var(--panel3); color: var(--ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.sp-mvc.rc-mvc .hd .code-chip { flex: none; }
/* P2c: racing's News posts as the NBA's rows: the face, the name, the text and picture, the handle and time; the race and View on X on the right */
.sp-news.nw-row .nw-row-l { display: flex; gap: 10px; align-items: flex-start; min-width: 0; flex: 1; } .sp-news.nw-row .nw-row-m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-news.nw-row .nw-text { margin: 2px 0 0; font-size: 14px; } .sp-news.nw-row .nw-row-by { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .sp-news.nw-row .nw-row-by .nw-time { padding: 0; }
.sp-news.nw-row .nw-media { margin-top: 6px; max-width: 420px; } .sp-news.nw-row .sp-news-acts .nw-race { max-width: 220px; }
@media (max-width: 480px) { .sp-news.nw-row { flex-wrap: wrap; } .sp-news.nw-row .sp-news-acts { flex-direction: row; flex-wrap: wrap; padding-left: 44px; align-items: center; } }
/* P3, the sports pages (Daniel's review of 27 Oct 2026; docs/SPORTS.md 77) */
/* the model's Line column, left of its price */
.sp-grid th.sp-mline, .sp-grid td.sp-mline { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink2); padding: 0 6px; white-space: nowrap; }
.sp-grid tr.sp-model-only .px.gap { opacity: .5; } .sp-ours-f { margin: 6px 0 2px; }
/* the Lineups' rows as the pricing tables' (dense, aligned columns, grid lines; the name whole, never "...") */
.sp-lu-list .sp-lu-row { display: grid; grid-auto-flow: column; grid-template-columns: minmax(170px, 260px); grid-auto-columns: max-content; justify-content: start; align-items: stretch; gap: 0; padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-lu-list .sp-lu-row > * { display: flex; align-items: center; padding: 6px 8px; border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-lu-list .sp-lu-row > .sp-lu-who { border-left: 0; padding-left: 12px; } .sp-lu-list .sp-lu-row > .sp-lu-c { justify-content: flex-end; width: 56px; box-sizing: border-box; }
.sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-ba { width: 92px; } .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-mmin { width: 68px; } .sp-lu-list .sp-lu-row > .sp-lu-act { width: 100px; box-sizing: border-box; justify-content: center; }
.sp-lu-list .sp-lu-hd > * { padding-top: 5px; padding-bottom: 5px; }
.sp-lu-list .sp-lu-txt b { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.2; } .sp-lu-list .sp-lu-txt small { white-space: normal; }
.sp-lu-team .list { overflow-x: auto; }
@media (max-width: 600px) {
  .sp-lu-list .sp-lu-row { grid-template-columns: minmax(120px, 1fr); } .sp-lu-list .sp-lu-row > * { padding: 6px 5px; }
  .sp-lu-list .sp-lu-row > .sp-lu-c { width: 38px; } .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-ba { width: 44px; } .sp-lu-list .sp-lu-row > .sp-lu-act { width: 40px; }
  .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-st, .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-pl { display: none; }
}
/* the what-if's tables: dense rows with grid lines, the recommendation over them and its rows lit */
table.t.sp-scen-t td, table.t.sp-scen-t th { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.t.sp-scen-t { border-collapse: collapse; } table.t.sp-scen-t tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.t.sp-scen-t tr.sp-pick td { background: color-mix(in srgb, var(--up) 12%, transparent); } table.t.sp-scen-t tr.sp-pick td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.sp-scen-pick { border: 1px solid color-mix(in srgb, var(--up) 40%, var(--line)); background: color-mix(in srgb, var(--up) 8%, var(--panel)); border-radius: var(--r); padding: 8px 12px; margin: 8px 0; font-size: 13.5px; line-height: 1.4; }
.sp-scen-pick b { color: var(--up-text, var(--up)); } .sp-scen-pick.none { border-color: var(--line); background: var(--panel); color: var(--ink2); } .sp-scen-pick ul { margin: 4px 0 0; padding-left: 18px; }
/* the Result: how the lines settled as a table, the box score and the team stats filling the width with grid lines */
table.t.sp-set-t { width: 100%; font-size: 14px; } table.t.sp-set-t td, table.t.sp-set-t th { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.t.sp-set-t td.sp-set-m { font-weight: 700; color: var(--ink2); } table.t.sp-set-t tr.up td { color: var(--up-text, var(--up)); } table.t.sp-set-t tr.muted td:not(.sp-set-m) { color: var(--ink2); }
table.t.sp-set-t td.sp-set-r { font-weight: 700; } table.t.sp-set-t td.sp-set-b img { width: 16px; height: 16px; margin-right: 3px; }
.sp-res-body .st-tbl table.t { width: 100%; } .sp-res-body .st-tbl table.t td, .sp-res-body .st-tbl table.t th { border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-res-tape { max-width: none; }
/* R4 (docs/SPORTS.md, R4): the NBA AutoBet log's Clear beside its kicker */
.sp-auto .kicker #splog-clear { float: right; margin-top: -5px; text-transform: none; letter-spacing: 0; }
/* R1 (3 Nov 2026), Daniel's review: "a lot of empty space to the right of what if. Use that space wisely". The Lineups'
   number columns share the width right of the name (no empty space after What if), and threes and PRA join the lines
   where the team's box has room for them */
.sp-lu-team { container-type: inline-size; }
.sp-lu-list .sp-lu-row { grid-auto-columns: 1fr; justify-content: stretch; }
.sp-lu-list .sp-lu-row > .sp-lu-c { width: auto; min-width: 56px; justify-content: center; }
.sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-ba { min-width: 92px; } .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-mmin { min-width: 68px; }
.sp-lu-list .sp-lu-row > .sp-lu-act { width: auto; min-width: 104px; }
@container (max-width: 740px) { .sp-lu-list .sp-lu-x { display: none; } }
@media (max-width: 600px) {
  .sp-lu-list .sp-lu-row > .sp-lu-c { min-width: 38px; } .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-ba { min-width: 44px; } .sp-lu-list .sp-lu-row > .sp-lu-c.sp-lu-mmin { min-width: 34px; }
  .sp-lu-list .sp-lu-row > .sp-lu-act { min-width: 40px; }
}
/* R15 (3 Nov 2026): Our markets in the card's own grid, each market its heading over its grid, as the card's other modes;
   the period's and the team's chips on one strip under the type's */
.sports .sp-ours-sub { margin: 4px 0 2px; }
.sports .sp-ours-t { margin: 12px 0 0; } .sports .sp-ours-t + .sp-grid { margin-top: 4px; }
/* R1: a scenario's every market in one list, its rows as the Players grid's (the face and name over the market, larger
   type, the width filled), the scope's chips over it; a What if's short summary */
.sp-scen-all { margin-top: 12px; } .sp-scen-all > .kicker { margin: 4px 0 6px; }
.sp-sm-scope { margin: 4px 0 8px; align-items: center; } .sp-sm-out { margin: 0 0 8px; color: var(--down-text, var(--down)); }
.sp-sm-list { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; background: var(--panel); }
.sp-sm-row { display: grid; grid-template-columns: minmax(200px, 2.4fr) repeat(5, minmax(72px, 1fr)) minmax(88px, auto); align-items: stretch; min-width: 660px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-sm-row:last-child { border-bottom: 0; } .sp-sm-row > * { display: flex; align-items: center; padding: 8px 10px; border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.sp-sm-row > .sp-sm-who { border-left: 0; gap: 10px; padding-left: 12px; min-width: 0; } .sp-sm-row > .sp-sm-who[data-spplayer] { cursor: pointer; }
.sp-sm-who .sp-lu-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sp-sm-who .sp-lu-txt b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; } .sp-sm-who .sp-lu-txt small { font-size: 12px; color: var(--ink2); }
.sp-sm-row > .sp-sm-c { justify-content: flex-end; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 14px; } .sp-sm-row > .sp-sm-ln { color: var(--ink2); }
.sp-sm-c .sp-ou2 { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .sp-sm-c .sp-ou2 > span { display: inline-flex; align-items: center; gap: 5px; } .sp-sm-c .sp-ou2 i { font-style: normal; font-size: 11px; color: var(--muted); }
.sp-sm-c .px { min-width: 54px; } .sp-sm-c .px img { width: 14px; height: 14px; border-radius: 4px; margin-left: 4px; } .sp-sm-c .px.model.up { color: var(--up-text, var(--up)); } .sp-sm-c .px.model.down { color: var(--down-text, var(--down)); }
.sp-sm-row > .sp-sm-act { flex-direction: column; justify-content: center; gap: 4px; } .sp-sm-act .chip { padding: 3px 8px; }
.sp-sm-row.sp-sm-hd > * { padding-top: 6px; padding-bottom: 6px; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sp-sm-row.sp-pick { background: color-mix(in srgb, var(--up) 10%, transparent); box-shadow: inset 3px 0 0 var(--up); } .sp-sm-row.sp-model-row .sp-sm-who b { color: var(--ink2); }
.sp-sm-more { margin: 8px 0 4px; }
.sp-wi-sum { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 8px 12px; margin: 8px 0; font-size: 13.5px; line-height: 1.45; } .sp-wi-sum .kicker { margin: 0 0 4px; }
.sp-wi-sum ul { margin: 0 0 8px; padding-left: 18px; } .sp-wi-sum b { color: var(--ink); }
@media (max-width: 600px) { .sp-sm-row { grid-template-columns: minmax(150px, 1.6fr) repeat(5, minmax(62px, 1fr)) minmax(72px, auto); min-width: 560px; } .sp-sm-row > * { padding: 7px 6px; } .sp-sm-row > .sp-sm-c { font-size: 13px; } .sp-sm-row > .sp-sm-who { position: sticky; left: 0; z-index: 1; background: var(--panel); } .sp-sm-row.sp-pick > .sp-sm-who { background: color-mix(in srgb, var(--up) 10%, var(--panel)); } }
.sp-sm-who[data-spplayer]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }