/* The Ciukaj Room, built on The Arena. Every value here is from DESIGN.md; change it there first. */
:root {
  --ground: #0A0E1A; --surface: #131A2B; --raised: #1B2440; --line: #263251; --line-strong: #33436B;
  --ink: #F4F6FC; --muted: #9AA6C4; --dim: #66739A;
  --gold: #FFC857; --gold-2: #FF9F1C; --on-gold: #1A1200; --sky: #4DA3FF; --sky-2: #2B6CB0; --heat: #FF4D3D; --up: #2EE6A6; --down: #FF5C7A;
  --glass: rgba(20, 26, 48, .55); --edge: rgba(255, 255, 255, .10);
  --display: "Barlow Condensed", Impact, sans-serif; --sans: "Instrument Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px;
  --col: 480px; --nav-h: 64px;
  /* the old names, kept so nothing the JS still writes goes unstyled */
  --rule: var(--line); --brass: var(--gold); --pos: var(--up); --neg: var(--down);
  /* the same colors as triplets, for the glows and washes (rgba(var(--gold-rgb), .4)) */
  --gold-rgb: 255, 200, 87; --gold-2-rgb: 255, 159, 28; --ground-rgb: 10, 14, 26; --up-rgb: 46, 230, 166; --down-rgb: 255, 92, 122;
  --heat-rgb: 255, 77, 61; --sky-rgb: 77, 163, 255; --hi-rgb: 255, 255, 255;
}
@media (min-width: 900px) { :root { --col: 560px; } }
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
main { max-width: var(--col); margin: 0 auto; padding: 0 0 calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.screen { display: block; }
.title { font: 800 34px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; }
.meta { font: 500 13.5px/1.5 var(--sans); color: var(--muted); margin: 0; }
.meta b { color: var(--ink); font-weight: 600; }
.note { font: 14px/1.5 var(--sans); color: var(--muted); margin: 6px 0 0; }
.note.foot { margin: 20px 16px 0; }
.msg { font: 500 13.5px/1.5 var(--sans); color: var(--muted); margin: 8px 16px 0; min-height: 1.5em; }
.msg.ok { color: var(--up); } .msg.err { color: var(--down); }
.pos { color: var(--up); } .neg { color: var(--down); } .muted { color: var(--muted); } .mono { font-family: var(--mono); }
.head { padding: 18px 16px 6px; }
.head.sub { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 26px 16px 8px; }
.head.sub .note { flex-basis: 100%; }
.slug { font: 800 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slug.brass { color: var(--gold); }
.loading { padding: 16px; font: 500 13.5px var(--sans); color: var(--muted); }
.empty { padding: 14px 16px; margin: 0 16px; font: 500 14px/1.5 var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.link { background: none; border: 0; color: var(--muted); font: 500 13.5px var(--sans); text-decoration: underline; padding: 12px 0; min-height: 44px; cursor: pointer; }

/* the top bar */
.mast { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: var(--col); margin: 0 auto; padding: 12px 16px 10px; background: rgba(var(--ground-rgb), .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.mast-name { display: inline-flex; align-items: center; gap: 9px; font: 800 19px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.mast-name::before { content: "CR"; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 4px 14px rgba(var(--gold-rgb), .4); display: grid; place-items: center; font: 800 13px var(--display); color: var(--on-gold); }
.mast-who { font: 500 13px var(--sans); color: var(--muted); white-space: nowrap; }
.mast-who b { color: var(--ink); font-weight: 600; }
.mast-find { margin-left: 8px; min-width: 44px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 700 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.mast-find:hover { color: var(--ink); border-color: var(--line-strong); }

/* the command palette */
.palette { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 0; }
.pal-box { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden; }
#pal-in { width: 100%; box-sizing: border-box; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 17px var(--sans); outline: none; }
#pal-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
#pal-list li { display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; }
#pal-list li .k { grid-row: 1 / 3; align-self: center; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
#pal-list li b { font: 600 15px var(--sans); color: var(--ink); }
#pal-list li small { font: 500 12.5px var(--sans); color: var(--muted); }
#pal-list li[aria-selected="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
#pal-list li.none { color: var(--muted); font: 500 14px var(--sans); display: block; }
.pal-hint { margin: 0; padding: 8px 14px 12px; font: 500 11.5px var(--mono); color: var(--dim); border-top: 1px solid var(--line); }
.pal-hint kbd { font: inherit; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.pal-hint b { color: var(--muted); }
html.floor .pal-box, html.floor #pal-list li { border-radius: 3px; }
html.floor #pal-list li[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--signal); }
.fl-bk.flash { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 599px) { .palette { padding-top: 6vh; } #pal-list li { grid-template-columns: 44px 1fr; } }

/* the week picker and the switches */
.weeks { display: flex; gap: 3px; padding: 3px; margin: 12px 0 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.weeks::-webkit-scrollbar { display: none; }
.weeks .wk { flex: 1 0 auto; min-width: 52px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.weeks .wk[aria-pressed="true"] { background: var(--raised); color: var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--line-strong); }
.toggle { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 6px 0 0; padding: 7px 14px 7px 10px; text-align: left; line-height: 1.35; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font: 700 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; }
.toggle::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 8px; border: 1px solid var(--muted); border-radius: 50%; }
.toggle[aria-pressed="true"] { color: var(--ink); background: var(--raised); border-color: var(--line-strong); }
.toggle[aria-pressed="true"]::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), .6); }
.markets { display: flex; gap: 6px; padding: 10px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.markets::-webkit-scrollbar { display: none; }
.markets button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 700 12px var(--mono); letter-spacing: .04em; color: var(--muted); cursor: pointer; }
.markets button[aria-pressed="true"] { color: var(--ground); background: var(--ink); border-color: var(--ink); }

/* the record strip: four tiers, all equal, the hot ones in gold */
.record { margin: 14px 16px 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.record .rh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 800 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.record .rh span { font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--dim); text-transform: none; text-align: right; }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.tier { position: relative; border-radius: 12px; padding: 8px 4px 7px; text-align: center; background: var(--ground); border: 1px solid var(--line); overflow: hidden; }
.tier small { display: block; font: 700 10.5px var(--mono); letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.tier b { display: block; font: 800 22px/1.1 var(--display); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tier em { display: block; font: 600 11px var(--mono); font-style: normal; color: var(--muted); }
.tier.hot { border-color: rgba(var(--gold-rgb), .5); background: linear-gradient(180deg, rgba(var(--gold-rgb), .16), var(--ground)); }
.tier.hot b { color: var(--gold); text-shadow: 0 0 14px rgba(var(--gold-rgb), .6); }
.tier.hot::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, rgba(var(--hi-rgb), .22) 50%, transparent 60%); animation: shine 3.2s infinite; pointer-events: none; }
.tier.cold b { color: var(--muted); }
@keyframes shine { to { transform: translateX(60%); } }

/* team chips and house swatches */
.chip { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 800 11px var(--display); letter-spacing: .02em; color: #fff; background: var(--raised); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); flex: none; vertical-align: middle; }
.chip.lg { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.chip.dk { color: var(--on-gold); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--dim); box-shadow: 0 0 8px currentColor; vertical-align: middle; margin-right: 6px; flex: none; }

/* the hero: rank 1 as a card */
.lead { margin: 14px 16px 0; padding: 1px; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(var(--gold-rgb), .9), rgba(var(--gold-2-rgb), .15) 40%, rgba(38, 50, 81, .6)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.lead > .in { border-radius: calc(var(--r-xl) - 1px); background: linear-gradient(160deg, #1E2747 0%, #131A31 60%, #10162A); padding: 16px 16px 14px; position: relative; overflow: hidden; }
.lead .slugrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.lead .slugrow .tag { padding: 4px 8px; border-radius: 6px; background: rgba(var(--gold-rgb), .15); border: 1px solid rgba(var(--gold-rgb), .35); }
.lead .slugrow .kick { color: var(--muted); }
.lead .slugrow .kick.live { color: var(--heat); }
.lead .match { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 12px; }
.lead .team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lead .team.h { flex-direction: row-reverse; text-align: right; }
.lead .team div > span { display: block; font: 800 20px/1 var(--display); text-transform: uppercase; }
.lead .team div > small { display: block; font: 600 11px var(--mono); color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
.lead .at { font: 700 12px var(--mono); color: var(--dim); text-align: center; }
.lead .pickline { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; margin-top: 14px; }
.lead .bet { font: 800 44px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.lead .bet em { font-style: normal; color: var(--gold); }
.lead .bet small { display: block; font: 500 13px var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 5px; }
.ring { width: 84px; height: 84px; position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 30px/1 var(--display); color: var(--ink); }
.ring small { position: absolute; left: -16px; right: -16px; bottom: -16px; text-align: center; font: 700 11px var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.cols.four { grid-template-columns: repeat(2, 1fr); }
.cols div { background: rgba(var(--ground-rgb), .55); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font: 700 15px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; }
.cols div small { display: block; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.cols div em { display: block; font: 500 12px var(--sans); font-style: normal; color: var(--muted); margin-top: 2px; }
.cols div .pos { color: var(--up); } .cols div .neg { color: var(--down); }
.lead .cols { margin-top: 22px; }
.books { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.books::-webkit-scrollbar { display: none; }
.bk { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font: 700 12px var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--line); }
.bk.best { border-color: var(--up); background: rgba(var(--up-rgb), .1); }

/* the reasons */
.why { display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px; margin-top: 14px; font: 500 13.5px/1.45 var(--sans); color: var(--muted); }
.why.brain span:nth-child(odd) { font: 700 11px var(--mono); color: var(--gold); background: rgba(var(--gold-rgb), .12); border-radius: 6px; padding: 3px 6px; white-space: nowrap; height: fit-content; margin-top: 1px; }
.why.brain span:nth-child(even) { min-width: 0; }
.why.brain i { display: block; color: var(--ink); font: italic 14px/1.4 var(--sans); }
.why .fact, .why .fact + span { color: var(--ink); }

/* every house */
.houses { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 13px/1.35 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.houses .hd { display: block; font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.houses .hd.chk { margin: 10px 0 0; font: 500 11px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--dim); }
.houses .h { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 1fr; gap: 6px; padding: 4px 0; align-items: stretch; }
.houses .h.th { padding: 0 0 4px; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.houses .h.th span + span { padding-left: 9px; }
.houses .hn { display: flex; align-items: center; gap: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 12.5px var(--sans); color: var(--muted); }
.houses .hn i { display: block; font-style: normal; font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.houses .can .hn { color: var(--ink); }
.houses .c { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ground); min-width: 0; }
.houses .c b { font-weight: 700; font-size: 14px; color: var(--muted); }
.houses .can .c b { color: var(--ink); }
.houses .c small { grid-column: 1 / -1; font: 500 11px var(--mono); line-height: 1.3; color: var(--dim); }
.houses .c u { text-decoration: none; font: 700 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.houses .c.up { background: rgba(var(--up-rgb), .1); border-color: rgba(var(--up-rgb), .5); } .houses .c.up b, .houses .c.up u, .houses .c.up small { color: var(--up); }
.houses .c.dn { background: rgba(var(--down-rgb), .1); border-color: rgba(var(--down-rgb), .5); } .houses .c.dn b, .houses .c.dn u, .houses .c.dn small { color: var(--down); }
.houses .c.new { border-color: var(--gold); } .houses .c.new b, .houses .c.new small { color: var(--gold); }
.houses .pulse { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); font: 700 11.5px var(--mono); letter-spacing: .02em; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.houses .pulse .up { color: var(--up); } .houses .pulse .dn { color: var(--down); }

/* the moneyline block */
.mlb { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mlb .hd { display: block; font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.mlb .hd b { font-weight: 800; }
.mlb .cols { margin: 10px 0 8px; } .mlb .cols.two { grid-template-columns: 1fr 1fr; }
.mlb .pos, .hd .pos { color: var(--up); } .mlb .neg, .hd .neg { color: var(--down); }
.mlb .mls { margin: 0 0 8px; font: 500 13.5px/1.45 var(--sans); color: var(--ink); }
.mlb .mln { margin: 8px 0 0; font: 12.5px/1.45 var(--sans); color: var(--muted); }
.mlb .houses.ml { margin-top: 8px; padding-top: 8px; }

/* rows: the board and every list */
#rows, #passed-rows, #pool-picks, #pool-card, #ai-card, #inbox, #picks, #system, #ask-threads, #rule-week, #layouts, #standings { margin: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
#rows:empty, #passed-rows:empty, #pool-picks:empty, #pool-card:empty, #ai-card:empty, #inbox:empty, #picks:empty, #system:empty, #ask-threads:empty, #rule-week:empty, #layouts:empty, #standings:empty { display: none; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); min-height: 44px; }
.row.first { border-top: 0; }
.row:nth-child(even) { background: var(--ground); }
.row .m { display: flex; align-items: center; gap: 8px; font: 800 16px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; min-width: 0; }
.row .m .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .m .n { font: 800 13px var(--display); color: var(--dim); letter-spacing: .02em; min-width: 22px; }
.row .m small { font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.row .b { font: 500 12.5px/1.4 var(--sans); color: var(--muted); margin-top: 3px; }
.row .b b { color: var(--ink); font: 700 12.5px var(--mono); }
.row .e { text-align: right; font: 800 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.row .e.muted { color: var(--muted); }
.row .e .bar { width: 64px; height: 5px; border-radius: 3px; background: var(--line); margin: 5px 0 4px auto; overflow: hidden; }
.row .e .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.row .e .bar.s i { background: linear-gradient(90deg, var(--sky-2), var(--sky)); }
.row .e small { display: block; font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); text-align: right; margin-top: 3px; text-transform: uppercase; }
.row .e small.pos { color: var(--up); } .row .e small.neg { color: var(--down); }
.row .e small.live { color: var(--heat); } .row .e small.live::before { content: "● "; font-size: 8px; vertical-align: 1px; animation: pulse 1.4s infinite; }
.row .e.status { font: 700 13px var(--mono); }
.row.three { grid-template-columns: 1fr auto auto; }
.row.expandable { cursor: pointer; }
.row.expandable:hover { background: var(--raised); }
.row.expandable.open { background: var(--raised); box-shadow: inset 3px 0 0 var(--gold); }
.row .detail { grid-column: 1 / -1; padding-top: 4px; }
.row .detail .cols { margin: 10px 0 0; }
.row .why { margin-top: 12px; }
.row.final { opacity: .6; }
.row.final.open { opacity: 1; }
@keyframes pulse { 50% { opacity: .35; } }
.changed { animation: settle 400ms ease-out; }
@keyframes settle { from { background: rgba(var(--gold-rgb), .18); } to { background: transparent; } }
.prev { font: 500 12px var(--mono); color: var(--dim); text-decoration: line-through; margin-right: 6px; }

/* no read, activity */
.passed, .activity { margin-top: 18px; }
.passed-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 16px 8px; min-height: 40px; font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.passed .row .m { color: var(--muted); }
#activity .act { margin: 0 16px; }
#activity .passed-hd + .act { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); border-top: 1px solid var(--line); }
#activity .act:last-of-type { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.act { display: grid; grid-template-columns: 58px 52px 1fr; gap: 0 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 0; font: 500 13px/1.45 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.act .t { font: 600 11.5px var(--mono); color: var(--dim); padding-top: 2px; }
.act .k { font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding-top: 3px; }
.act .x b { color: var(--ink); font: 800 13px var(--display); letter-spacing: .02em; text-transform: uppercase; }
.act .x i { font-style: normal; color: var(--ink); }
.act.with .x i { color: var(--up); } .act.against .x i { color: var(--down); }
.act.injury .k, .act.final .k { color: var(--gold); }

/* pool */
.val { font: 800 18px var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.val small { display: block; font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.pts { font: 800 18px var(--display); border: 1px solid var(--line); background: var(--ground); color: var(--ink); min-width: 48px; height: 44px; padding: 0 8px; border-radius: var(--r-sm); }
.pts.on { border-color: var(--gold); color: var(--gold); background: var(--raised); }
.side { font: 700 14px var(--mono); border: 1px solid var(--line); background: var(--ground); color: var(--ink); height: 44px; padding: 0 8px; max-width: 180px; border-radius: var(--r-sm); }
.pool-actions { display: flex; gap: 10px; padding: 16px 16px 0; flex-wrap: wrap; }
.score { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: baseline; }
.score:first-child { border-top: 0; }
.score .n { font: 800 18px var(--display); text-transform: uppercase; }
.score .p { font: 800 22px var(--display); text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.score .r { font: 600 12px var(--mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.card-pts { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font: 800 18px var(--display); background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--on-gold); box-shadow: 0 4px 12px rgba(var(--gold-rgb), .35); }
.card-pts.lo { background: var(--raised); color: var(--muted); box-shadow: none; border: 1px solid var(--line-strong); }

/* forms */
.stack { display: grid; gap: 12px; padding: 12px 16px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 5px; }
.field label { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.field input, .field select { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 16px var(--mono); padding: 10px 12px; min-height: 44px; border-radius: var(--r-sm); width: 100%; font-variant-numeric: tabular-nums; }
.field textarea { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 16px/1.4 var(--sans); padding: 10px 12px; min-height: 88px; border-radius: var(--r-sm); width: 100%; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .pts:focus, .side:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .2); }
.field input:disabled, .field select:disabled { color: var(--muted); border-style: dashed; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 500 13.5px/1.4 var(--sans); color: var(--ink); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold); }
.btn { font: 800 14px var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 13px 18px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--raised); cursor: pointer; min-height: 44px; border-radius: var(--r-md); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); box-shadow: 0 8px 24px rgba(var(--gold-2-rgb), .25); }
.btn.primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn.ghost { border-color: var(--line); color: var(--muted); background: none; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Ask the Analyst */
.chat.q { background: var(--raised); white-space: pre-wrap; }
.chat.a { background: var(--surface); }
.chat.a .who { color: var(--gold); }
.chat.a .brief { margin: 0; padding: 0; border: 0; background: none; font-size: 15px; }
.chat.a .brief p:last-child { margin-bottom: 0; }

/* brief and ledger */
.brief { margin: 6px 16px 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 15px; line-height: 1.55; }
.brief h1, .brief h2, .brief h3 { font: 800 20px/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; margin: 14px 0 6px; }
.brief h1 { font-size: 26px; }
.brief > :first-child { margin-top: 0; }
.brief p { margin: 0 0 10px; }
.brief table { border-collapse: collapse; font: 13px var(--mono); font-variant-numeric: tabular-nums; margin: 6px 0 12px; width: 100%; }
.brief th, .brief td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.brief th { color: var(--muted); font-weight: 500; }
.brief code { font-family: var(--mono); font-size: 13px; }
.brief ul { padding-left: 18px; margin: 0 0 10px; }
.brief .sig { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font: 800 16px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.brief .sig small { display: block; font: 500 12px var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 4px; }
#rulings { margin: 0 16px; }
#rulings .note.backtest { padding: 0 0 12px; }
.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ledger .r { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font: 500 14px/1.45 var(--sans); }
.ledger .r:first-child { border-top: 0; }
.ledger .r .n { font: 800 13px var(--display); color: var(--gold); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ledger .r .s { color: var(--muted); font: 500 12px var(--mono); display: block; margin-top: 3px; }
#ruling-form { margin-top: 16px; }

/* the bottom nav: five icon tabs */
.nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(var(--ground-rgb), .94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
@media (min-width: 900px) { .nav { max-width: var(--col); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.nav button { display: grid; justify-items: center; align-content: center; gap: 3px; background: none; border: 0; padding: 0; font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); cursor: pointer; user-select: none; }
.nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav button.on { color: var(--gold); }
.nav button.on svg { filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .6)); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }


/* ---- the desktop: the orbit field on the Board, the terminal panes beside every other screen ---- */
.orbit { display: none; }
.desk { display: none; }
@media (min-width: 1180px) {
  body.has-desk .mast, body.has-desk main { margin-left: 0; margin-right: auto; }
  /* Michael, 2026-09-24: the bar with the tabs stays in the middle on desktop, like the Board's dock, not pinned left over the column */
  body.has-desk .nav { left: 50%; right: auto; bottom: 22px; width: auto; max-width: none; height: auto; margin: 0; padding: 6px; transform: translateX(-50%); display: flex; gap: 4px; border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); z-index: 7; }
  body.has-desk .nav button { padding: 8px 16px; border-radius: 16px; }
  body.has-desk main { padding-bottom: 120px; }
  body.has-desk .nav button.on { background: rgba(var(--gold-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
  .desk:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 420px; position: fixed; top: 0; bottom: 0; left: calc(var(--col) + 1px); right: 0; background: var(--ground); }
  .pane { overflow-y: auto; border-left: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .pane-hd { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px 10px; min-height: 44px; background: var(--ground); border-bottom: 1px solid var(--line); font: 800 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
  .pane-hd span + span { font: 600 11px var(--mono); letter-spacing: .04em; text-transform: none; color: var(--muted); text-align: right; }
  .pane-hd ~ .pane-hd { border-top: 1px solid var(--line); }
  .desk .act { margin: 0; grid-template-columns: 100px 46px 1fr; padding: 8px 20px; border: 0; border-bottom: 1px solid var(--line); background: none; }
  .desk .act:nth-child(even) { background: var(--surface); }
  .desk .act.fresh .t, .desk .act.fresh .x { color: var(--ink); }
  .desk .act.big .k { color: var(--gold); }
  .desk .empty { margin: 12px 20px; }
  .sc { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.4 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
  .sc:nth-child(even) { background: var(--surface); }
  .sc .g { display: flex; align-items: center; gap: 6px; color: var(--ink); font: 800 15px var(--display); text-transform: uppercase; } .sc .g em { font-style: normal; color: var(--dim); font: 700 11px var(--mono); } .sc .g b { font: 800 18px var(--display); }
  .sc .s { text-align: right; font: 600 11.5px var(--mono); } .sc .p { grid-column: 1 / -1; }
  .sc.in { box-shadow: inset 3px 0 0 var(--heat); } .sc.in .s { color: var(--heat); } .sc.fin .g { color: var(--muted); }
  .sc .p.pos { color: var(--up); } .sc .p.neg { color: var(--down); }
  .nt { padding: 8px 20px; border-bottom: 1px solid var(--line); font: 500 12.5px/1.45 var(--sans); color: var(--muted); } .nt b { color: var(--ink); font: 800 13px var(--display); text-transform: uppercase; letter-spacing: .02em; }

  /* the Board on a screen: the orbit field, full bleed */
  body.orbit-on main, body.orbit-on .mast, body.orbit-on .desk, body.orbit-on .nav { display: none; }
  body.orbit-on { overflow: hidden; }
  .orbit:not([hidden]) { display: block; position: fixed; inset: 0; background: radial-gradient(900px 500px at 15% 10%, rgba(60, 40, 140, .35), transparent 60%), radial-gradient(700px 500px at 85% 80%, rgba(var(--gold-2-rgb), .16), transparent 60%), radial-gradient(600px 400px at 70% 15%, rgba(var(--up-rgb), .10), transparent 60%), var(--ground); }
  .orbit .grid { position: absolute; inset: -40% -10% -10%; background-image: linear-gradient(rgba(var(--hi-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hi-rgb), .05) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%; mask-image: linear-gradient(180deg, transparent 30%, #000 100%); opacity: .6; pointer-events: none; }
  .orbit .top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; }
  .orbit .logo { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
  .orbit .logo::before { content: "CR"; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 0 24px rgba(var(--gold-rgb), .6); display: grid; place-items: center; font: 800 15px var(--display); color: var(--on-gold); }
  .orbit .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px); font: 700 12px var(--mono); letter-spacing: .05em; color: var(--muted); }
  .orbit .pill b { color: var(--ink); }
  .orbit .pill.live { color: var(--heat); border-color: rgba(var(--heat-rgb), .4); }
  .orbit .pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 10px var(--heat); animation: pulse 1.4s infinite; }
  .orbit button.pill { cursor: pointer; }
  .orbit .seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px); }
  .orbit .seg button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .orbit .seg button[aria-pressed="true"] { background: rgba(var(--hi-rgb), .1); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .35); }
  .orbit .legend { position: absolute; left: 22px; top: 84px; z-index: 5; width: 360px; display: grid; gap: 6px; font: 600 12px var(--sans); color: var(--muted); }
  .orbit .legend h1 { margin: 0 0 4px; font: 800 34px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
  .orbit .legend h1 small { display: block; font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
  .orbit .legend div { display: flex; align-items: center; gap: 8px; }
  .orbit .legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
  .orbit .record { position: absolute; left: 22px; top: 292px; z-index: 5; width: 360px; margin: 0; background: var(--glass); border-color: var(--edge); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
  .orbit .space { position: absolute; inset: 0; perspective: 1200px; perspective-origin: 50% 45%; }
  .orbit .field { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; }
  .orb { position: absolute; transform-style: preserve-3d; cursor: pointer; will-change: transform; transition: opacity .25s; }
  .orb .ball::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(var(--hi-rgb), 0); transition: border-color .15s; pointer-events: none; }
  .orb:hover .ball::after, .orb:focus-visible .ball::after { border-color: rgba(var(--hi-rgb), .6); }
  .orb .ball { width: var(--d); height: var(--d); border-radius: 50%; position: relative; display: grid; place-items: center; text-align: center;
    background: radial-gradient(circle at 32% 28%, rgba(var(--hi-rgb), .55), transparent 28%), radial-gradient(circle at 50% 50%, var(--c2), var(--c1) 70%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6), inset -12px -18px 40px rgba(0, 0, 0, .45), inset 8px 8px 24px rgba(var(--hi-rgb), .18), 0 0 var(--glow, 0px) var(--c2); transition: transform .2s; }
  .orb:hover .ball { transform: scale(1.06); }
  .orb.held { z-index: 3; cursor: grabbing; } .orb.held .ball { transform: scale(1.08); }
  .orb { touch-action: none; }
  .orb .ball b { font: 800 calc(var(--d) * .27) / .95 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); letter-spacing: .01em; text-transform: uppercase; }
  .orb .ball b small { display: block; font: 700 calc(var(--d) * .13) var(--mono); opacity: .9; margin-top: 2px; text-transform: none; }
  .orb .conf { position: absolute; right: -6px; top: -6px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font: 800 16px var(--display); color: var(--on-gold); background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(var(--gold-rgb), .5); }
  .orb.lean .conf { background: linear-gradient(135deg, var(--sky-2), var(--sky)); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
  .orb.lean { opacity: .8; }
  .orb .lv { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: var(--heat); color: #fff; font: 800 10px var(--mono); letter-spacing: .06em; box-shadow: 0 0 14px var(--heat); white-space: nowrap; }
  .orb .lv.fin { background: var(--raised); color: var(--muted); box-shadow: none; border: 1px solid var(--line-strong); }
  .orb .lv.fin.pos { color: var(--up); border-color: var(--up); } .orb .lv.fin.neg { color: var(--down); border-color: var(--down); }
  .orb .ring { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(var(--gold-rgb), .55); animation: spin 18s linear infinite; }
  .orb .shadow { position: absolute; left: 10%; right: 10%; bottom: -38px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); filter: blur(4px); }
  .orb.max .ball::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .35), transparent 60%); animation: breathe 2.6s ease-in-out infinite; z-index: -1; }
  .orb.max .spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--gold); animation: orbitspin var(--t) linear infinite; top: 50%; left: 50%; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes breathe { 50% { transform: scale(1.15); opacity: .6; } }
  @keyframes orbitspin { from { transform: rotate(0) translateX(var(--rr)) rotate(0); } to { transform: rotate(360deg) translateX(var(--rr)) rotate(-360deg); } }
  .orbit .card { position: absolute; right: 22px; top: 84px; bottom: 110px; width: 420px; z-index: 6; border-radius: 24px; background: linear-gradient(160deg, rgba(30, 38, 70, .75), rgba(14, 18, 36, .85)); border: 1px solid var(--edge); backdrop-filter: blur(24px); box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(var(--hi-rgb), .12); padding: 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; transform: translateX(0) rotateY(0); transform-origin: right center; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
  .orbit .card.hidden { transform: translateX(40px) rotateY(-8deg); opacity: 0; pointer-events: none; }
  .orbit .card .lead { margin: 0; padding: 0; background: none; box-shadow: none; }
  .orbit .card .lead > .in { padding: 0; background: none; overflow: visible; }
  .orbit .card .lead .slugrow { padding-right: 36px; }
  .orbit .card .x { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--edge); background: none; display: grid; place-items: center; color: var(--muted); cursor: pointer; font: 600 14px var(--sans); z-index: 1; }
  .orbit .dock { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; padding: 6px; border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
  .orbit .dock button { display: grid; justify-items: center; gap: 4px; padding: 8px 16px; border: 0; border-radius: 16px; background: none; font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
  .orbit .dock button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .orbit .dock button.on { color: var(--gold); background: rgba(var(--gold-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
  .orbit .dock button.on svg { filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .7)); }
  .orbit .hint { position: absolute; left: 22px; bottom: 30px; z-index: 5; font: 600 12px var(--mono); color: var(--dim); }
  .orbit .quiet { position: absolute; left: 22px; bottom: 56px; z-index: 5; width: 360px; font: 500 12.5px/1.45 var(--sans); color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { .orb .ring, .orb.max .ball::before, .orb.max .spark, .tier.hot::after, .row .e small.live::before, .orbit .pill.live::before { animation: none !important; } .orbit .field { transition: none; } }

/* the terminal inside the field, and the ticker along its bottom edge */
@media (min-width: 1180px) {
  .orbit .term { position: absolute; left: 22px; top: 452px; bottom: 96px; width: 360px; z-index: 5; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); overflow: hidden; }
  .orbit .term .tabs { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--edge); }
  .orbit .term .tabs button { flex: 1; padding: 8px 6px; border: 0; border-radius: 12px; background: none; font: 800 12px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .orbit .term .tabs button[aria-pressed="true"] { background: rgba(var(--hi-rgb), .08); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); }
  .orbit .term .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .orbit .term .pane { flex: 1; min-height: 0; overflow-y: auto; border-left: 0; }
  .orbit .term .pane-hd { background: rgba(var(--ground-rgb), .8); padding: 10px 14px 8px; font-size: 12px; }
  .orbit .term .act { grid-template-columns: 54px 1fr; padding: 8px 14px; font-size: 12px; }
  .orbit .term .act .k { display: none; }
  .orbit .term .sc { padding: 8px 14px; font-size: 12px; } .orbit .term .sc .g { font-size: 14px; } .orbit .term .sc .g b { font-size: 16px; } .orbit .term .sc .chip { width: 22px; height: 22px; font-size: 10px; }
  .orbit .term .nt { padding: 7px 14px; font-size: 12px; }
  .orbit .term .empty { margin: 10px 14px; font-size: 13px; }
  .orbit .hint { bottom: 56px; }
  .orbit .dock { bottom: 46px; }
  .orbit .quiet { display: none; }
  .orbit .ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 4; overflow: hidden; background: rgba(var(--ground-rgb), .85); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
  .orbit .ticker .run { display: inline-flex; gap: 40px; align-items: center; height: 34px; padding-left: 20px; white-space: nowrap; font: 500 12px var(--mono); color: var(--muted); animation: tick 120s linear infinite; }
  .orbit .ticker:hover .run { animation-play-state: paused; }
  .orbit .ticker .run span { display: inline-flex; align-items: center; gap: 8px; }
  .orbit .ticker .run b { font: 800 13px var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
  .orbit .ticker .run i { font-style: normal; color: var(--dim); }
  .orbit .ticker .run .with { color: var(--up); } .orbit .ticker .run .against { color: var(--down); }
  @keyframes tick { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .orbit .ticker .run { animation: none; } }

/* the filter bar over the field */
@media (min-width: 1180px) {
  .orbit .filters { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  .orbit .filters:empty { display: none; }
  .orbit.card-open .filters { left: 424px; transform: none; max-width: calc(100vw - 424px - 490px); flex-wrap: wrap; border-radius: 20px; }   /* the card takes the right column; the bar moves off it */
  .orbit .filters .grp { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(var(--ground-rgb), .5); }
  .orbit .filters button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px; background: none; font: 700 12px var(--mono); letter-spacing: .03em; color: var(--dim); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
  .orbit .filters button span { font: 700 10.5px var(--mono); padding: 1px 6px; border-radius: 999px; background: rgba(var(--hi-rgb), .08); color: var(--muted); }
  .orbit .filters button[aria-pressed="true"] { background: rgba(var(--gold-rgb), .14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .35); }
  .orbit .filters button[aria-pressed="true"] span { background: rgba(var(--gold-rgb), .2); color: var(--gold); }
  .orbit .filters .rng { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; font: 700 12px var(--mono); letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
  .orbit .filters .rng b { color: var(--gold); min-width: 2ch; }
  .orbit .filters input[type=range] { width: 110px; accent-color: var(--gold); cursor: pointer; }
}

/* the brain's card on the board: the five games that carry points wear their slot */
.row .m .cardtag { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(var(--gold-rgb), .14); border: 1px solid rgba(var(--gold-rgb), .35); color: var(--gold); font: 800 10.5px var(--display); letter-spacing: .06em; }
.lead .slugrow .tag.slot { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }   /* not .card: the orbit's glass panel rule owns that name */
@media (min-width: 1180px) {
  .orb .pick { position: absolute; left: -10px; top: -10px; display: grid; justify-items: center; min-width: 52px; padding: 5px 9px 4px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--on-gold); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 18px rgba(var(--gold-rgb), .55); z-index: 2; }
  .orb .pick b { font: 800 22px/1 var(--display); letter-spacing: .01em; }
  .orb .pick small { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .85; }
  .orb .pick:not(.locked) { background: var(--raised); color: var(--gold); border: 1px solid rgba(var(--gold-rgb), .5); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
  .orb .conf { top: -6px; }
}

/* the pool: everyone's week, and the record strip's bettor switcher */
.row.bettor-hd { background: var(--raised) !important; border-top: 1px solid var(--line-strong); }
.row.bettor-hd .m .t { color: var(--gold); }
.row.bettor-hd .e { color: var(--gold); }
.who-row { display: flex; gap: 6px; margin: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
.who-row::-webkit-scrollbar { display: none; }
.who-row button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 700 12px var(--mono); letter-spacing: .03em; color: var(--muted); cursor: pointer; }
.who-row button span { font: 700 10.5px var(--mono); padding: 1px 6px; border-radius: 999px; background: rgba(var(--hi-rgb), .08); }
.who-row button[aria-pressed="true"] { color: var(--gold); background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .4); }
.who-row + .record { margin-top: 10px; }

/* a replayed week: decided after the fact from T-30 data, never the live record */
.replay-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: rgba(var(--sky-rgb), .14); border: 1px solid rgba(var(--sky-rgb), .4); color: var(--sky); font: 800 10.5px var(--display); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
#ai-card .row .b { white-space: normal; }

/* the line path: tap a house's number for where and when it moved */
.houses .h.tap { cursor: pointer; border-radius: var(--r-md); }
.houses .h.tap:hover { background: rgba(var(--hi-rgb), .04); }
.linepath:empty { display: none; }
.linepath { margin: 10px 0 4px; padding: 10px 10px 8px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); }
.linepath .lp-note { font: 500 12.5px var(--sans); color: var(--muted); }
.linepath .lp-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 12px var(--mono); color: var(--ink); margin-bottom: 4px; }
.linepath .lp-hd span:last-child { font: 500 11px var(--sans); color: var(--dim); text-align: right; }
.linepath .lp-hd .sw { margin-right: 6px; }
.linepath svg.lp { display: block; overflow: visible; }
.linepath svg text { font: 500 10px var(--mono); fill: var(--dim); }
.linepath svg text.lbl { font: 700 11px var(--mono); }
.linepath svg text.pooll { fill: var(--gold); font-weight: 700; }
.linepath svg text.kickl { fill: var(--heat); font-weight: 700; }
.linepath svg line { stroke: var(--line); stroke-width: 1; }
.linepath svg line.key { stroke: var(--line-strong); }
.linepath svg line.day { stroke: var(--line); stroke-dasharray: 2 3; }
.linepath svg line.pool { stroke: var(--gold); stroke-dasharray: 5 4; stroke-width: 1.5; }
.linepath svg line.kick { stroke: var(--heat); stroke-width: 1.5; }
.linepath svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.linepath svg path.off { stroke-width: 1.5; opacity: .3; }
.linepath svg path.on { stroke-width: 3; }
.linepath .lp-moves { display: grid; gap: 3px; margin-top: 8px; max-height: 140px; overflow-y: auto; font: 500 12px var(--mono); color: var(--muted); }
.linepath .lp-moves div { display: flex; justify-content: space-between; gap: 10px; }
.linepath .lp-moves b { color: var(--ink); font-weight: 700; }

/* the AI's journal: every look at the week */
#ai-journal { margin: 0 16px; }
#ai-journal:empty { display: none; }
.look { padding: 12px 14px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.look .lk { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 12px var(--mono); color: var(--muted); }
.look .lk b { color: var(--ink); font: 800 14px var(--display); letter-spacing: .03em; text-transform: uppercase; }
.look .lk b.did { color: var(--gold); }
.look .lk b.held { color: var(--sky); }
.look .saw { margin: 6px 0 0; font: 500 12.5px/1.45 var(--sans); color: var(--muted); }
.look .saw span { display: block; }
.look .note { margin-top: 6px; color: var(--ink); font-size: 13.5px; }

/* numbers inside the badges and rings: the condensed display face read blocky ("86 is quite blocky"), so the digits use
   the body face at 700 with a little air between them */
.ring b { font: 700 27px/1 var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.row .e { font: 700 20px/1 var(--sans); letter-spacing: .01em; }
.tier b { font: 700 20px/1.15 var(--sans); letter-spacing: .01em; }
.card-pts { font: 700 17px var(--sans); }
@media (min-width: 1180px) {
  .orb .conf { font: 700 14px var(--sans); letter-spacing: .02em; }
}

/* Chook's Brain top five: the rank has to jump off the page */
.top5 { margin: 14px 16px 0; padding: 12px 12px 10px; border-radius: var(--r-xl); background: linear-gradient(160deg, #2A2140, #151C31 70%); border: 1px solid rgba(var(--gold-rgb), .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.top5 .t5h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.top5 .t5h span { font: 800 17px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.top5 .t5h em { font: 600 11px var(--mono); font-style: normal; color: var(--gold); text-align: right; }
.top5 .t5 { display: grid; grid-template-columns: 46px auto 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid rgba(var(--hi-rgb), .07); }
.top5 .t5h + .t5 { border-top: 0; }
.t5r, .orb .pick b, .row .m .cardtag, .lead .slugrow .tag.slot { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.t5r { display: grid; place-items: center; width: 46px; height: 36px; border-radius: 10px; font: 800 20px var(--sans); background: linear-gradient(135deg, #F5A623, #D9480F); box-shadow: 0 6px 16px rgba(217, 72, 15, .45); }
.top5 .t5 b { font: 800 18px var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.top5 .t5 em { font: 700 12px var(--mono); font-style: normal; color: var(--gold); }
.row .m .cardtag { padding: 3px 9px; font: 800 12px var(--sans); letter-spacing: .02em; background: linear-gradient(135deg, #F5A623, #D9480F); border: 0; box-shadow: 0 3px 10px rgba(217, 72, 15, .4); }
.lead .slugrow .tag.slot { background: linear-gradient(135deg, #F5A623, #D9480F); border: 0; font-weight: 800; }
@media (min-width: 1180px) {
  .orb .pick, .orb .pick:not(.locked) { left: -14px; top: -14px; min-width: 64px; padding: 6px 10px 5px; border: 2px solid #fff; background: linear-gradient(135deg, #F5A623, #D9480F); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 24px rgba(245, 166, 35, .7); }
  .orb .pick b { font: 800 26px/1 var(--sans); }
  .orb .pick small { color: #fff; opacity: .95; font-size: 10.5px; }
  .orbit .record + .top5, #orbit-record .top5 { margin: 10px 0 0; }
  #orbit-record .top5 .t5 { grid-template-columns: 40px auto 1fr auto; }
  #orbit-record .top5 .t5r { width: 40px; height: 32px; font-size: 18px; }
}

/* desktop: Chook's Brain top five sits in the left column under the title; the record and the terminal move down */
@media (min-width: 1180px) {
  #orbit-record .top5 { position: absolute; left: 22px; top: 164px; width: 360px; margin: 0; z-index: 5; padding: 10px 10px 8px; backdrop-filter: blur(18px); }
  #orbit-record .top5 .t5 { padding: 4px 2px; gap: 8px; }
  #orbit-record .top5 .t5h span { font-size: 15px; }
  .orbit .legend div { display: none; }
  .orbit .record { top: 432px; }
  .orbit .term { top: 590px; }
}

/* the rank badges, restrained (Michael, 2026-09-24: green, white numbers with a thin black stroke, no clip art):
   one flat field green, a hairline edge, a small drop shadow with an offset, no glow, no gradient sheen */
.t5r, .row .m .cardtag, .lead .slugrow .tag.slot {
  background: #15803D; border: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  color: #fff; text-shadow: none; -webkit-text-stroke: 1px #000; paint-order: stroke fill;
}
.t5r { border-radius: 8px; font-weight: 800; }
.row .m .cardtag { -webkit-text-stroke-width: .6px; }
.lead .slugrow .tag.slot { -webkit-text-stroke-width: .6px; }
.top5 { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
@media (min-width: 1180px) {
  .orb .pick, .orb .pick:not(.locked) { background: #15803D; border: 1px solid rgba(0, 0, 0, .4); border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); left: -10px; top: -10px; min-width: 56px; padding: 5px 9px 4px; }
  .orb .pick b { color: #fff; text-shadow: none; -webkit-text-stroke: 1.2px #000; paint-order: stroke fill; font-size: 24px; }
  .orb .pick small { color: #fff; opacity: .9; }
}

/* the Room: who sucks and who is great */
#tiers { margin: 0 16px; display: grid; gap: 10px; }
#tiers .empty { margin: 0; }
.tiers-by { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tiers-by .tbh { font: 800 15px var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.tiers-by .tl { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.tiers-by .tbh + .tl { border-top: 0; margin-top: 0; }
.tiers-by .tlh { display: flex; justify-content: space-between; gap: 8px; font: 700 12px var(--mono); color: var(--muted); margin-bottom: 6px; }
.tiers-by .tlh b { color: var(--gold); font-weight: 700; }
.tiers-by .tls { display: flex; flex-wrap: wrap; gap: 6px; }
.tiers-by .tt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); }
.tiers-by .tt b { font: 800 14px var(--display); letter-spacing: .02em; }
.tiers-by .tt em { font: 600 11px var(--mono); font-style: normal; color: var(--muted); }
.tiers-by .tt.right { border-color: rgba(var(--up-rgb), .6); } .tiers-by .tt.wrong { border-color: rgba(var(--down-rgb), .6); opacity: .75; }

/* ---- the season: projected end-of-year standings (Michael, 2026-09-24) ---- */
.sfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 16px 12px; }
.sf { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.sf b { display: block; font: 800 26px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.sf span { display: block; margin-top: 4px; font: 500 11.5px/1.35 var(--sans); color: var(--muted); }
#season-view { margin: 0 16px 6px; }
.sgroup { margin: 14px 16px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.sgh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px 6px; font: 800 15px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sgh span { font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.shead, .srow { display: grid; grid-template-columns: minmax(0, 1.7fr) .6fr 1fr .8fr .7fr .7fr; gap: 6px; align-items: center; padding: 8px 14px; }
.shead { padding-block: 4px; border-bottom: 1px solid var(--line); font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.shead span:not(:first-child), .srow > span:not(.sn) { text-align: right; }
.srow { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: 600 13px var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.srow.first { border-top: 0; }
.srow:hover, .srow:focus-visible { background: var(--raised); outline: none; }
.srow .sn { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.srow .sn b { font: 800 16px var(--display); letter-spacing: .02em; }
.srow .se b { font: 800 17px var(--display); color: var(--gold); }
.srow .sr, .srow .sp { color: var(--muted); }
.srow.seed { grid-template-columns: minmax(0, 1.7fr) 1fr 1fr 1fr; }
.srow .sk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #15803D; color: #fff; font: 700 12px var(--sans); font-style: normal; -webkit-text-stroke: .6px #000; paint-order: stroke fill; }
.srow .rt { font: 600 11px var(--mono); font-style: normal; color: var(--sky); }
.dl { font-style: normal; margin-left: 4px; font: 700 10px var(--mono); color: var(--dim); }
.dl.pos { color: var(--up); } .dl.neg { color: var(--down); }
.ctag { padding: 1px 6px; border-radius: 999px; font: 800 11px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ctag.bot { background: rgba(var(--down-rgb), .14); border: 1px solid rgba(var(--down-rgb), .45); color: var(--down); }
.ctag.top { background: rgba(var(--up-rgb), .12); border: 1px solid rgba(var(--up-rgb), .45); color: var(--up); }
#season-week { margin: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.gl { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); }
.gl.first { border-top: 0; }
.gl .gw { grid-row: span 2; font: 700 11px var(--mono); color: var(--dim); }
.gl .gm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gl .gm i { font: 600 11px var(--mono); font-style: normal; color: var(--dim); }
.gl .gm button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 800 15px var(--display); letter-spacing: .02em; cursor: pointer; }
.gl .gm button b { font: 800 19px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.gl .gm button.win { color: var(--ink); }
.gl .gm button.win b { color: var(--gold); }
.gl .gm button:hover { background: var(--raised); }
.gl .gx { font: 500 11.5px var(--mono); color: var(--muted); }
.gl .gx em { font-style: normal; font-weight: 800; }
.gl.fin .gm button b { color: var(--ink); }
.gl .pos, .sf .pos { color: var(--up); } .gl .neg, .sf .neg { color: var(--down); }
.sheet { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; background: rgba(4, 6, 12, .7); backdrop-filter: blur(6px); }
.sheet[hidden] { display: none; }
.sheet-in { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--ground); border: 1px solid var(--line-strong); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .sheet { place-items: center; } .sheet-in { border-radius: var(--r-xl); max-height: 86vh; } }
body.sheet-open { overflow: hidden; }
.sh-hd { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 45%, var(--ground)), var(--ground) 70%); border-bottom: 1px solid var(--line); }
.sh-hd > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.sh-hd .chip { grid-row: span 2; }
.sh-hd h2 { margin: 0; font: 800 26px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sh-hd p { margin: 0; font: 500 12px var(--mono); color: var(--muted); }
.sh-hd .x { flex: none; width: 36px; height: 36px; border: 1px solid var(--edge); border-radius: 12px; background: var(--glass); color: var(--ink); font: 400 22px/1 var(--sans); cursor: pointer; }
.sh-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 6px; }
.sh-big div { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.sh-big b { display: block; font: 800 30px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.sh-big span { font: 500 11px var(--mono); color: var(--muted); }
.sh-p { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px 16px; }
.sh-p span { display: grid; gap: 2px; padding: 8px 6px; border-radius: var(--r-md); background: var(--surface); text-align: center; font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sh-p b { font: 800 19px var(--display); color: var(--ink); letter-spacing: 0; }
.sh-p .up b { color: var(--up); } .sh-p .dn b { color: var(--down); }
.sheet-in .note { margin: 8px 16px; }
.sheet-in .ctl { color: var(--gold); }
.sh-dist { margin: 8px 16px; padding-bottom: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.sh-dist svg { display: block; width: 100%; height: auto; padding: 0 10px 8px; }
.sh-dist text { font: 600 8px var(--mono); fill: var(--dim); }
.sheet-in > .sgh { margin-top: 10px; }
.sheet-in > .gl { margin: 0 16px; border-inline: 1px solid var(--line); background: var(--surface); }
@media (max-width: 560px) {
  .sfacts { grid-template-columns: 1fr; }
  .shead, .srow { grid-template-columns: minmax(0, 1.6fr) .9fr .7fr .6fr; }
  .shead span:nth-child(4), .srow .sp, .shead span:nth-child(6), .srow .sd { display: none; }
  .srow.seed { grid-template-columns: minmax(0, 1.4fr) 1fr .8fr; }
  .srow.seed .sd { display: none; }
  .sh-p { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the double reverse fuckeroo: a flag, never a pick */
.fishy { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--heat-rgb), .12); border: 1px dashed rgba(var(--heat-rgb), .6); color: var(--heat); font: 800 11px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
/* the AI's one entry: how it got there folds away under it */
.ai-looks { margin: 8px 16px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ai-looks summary { padding: 10px 14px; cursor: pointer; font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-looks summary .meta { font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* Chook's Brain, backtested on its current settings */
.bt-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 16px 0; }
.bt { margin: 12px 16px 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.bt-scroll { overflow-x: auto; }
.bt table { width: 100%; border-collapse: collapse; font: 600 12px var(--mono); font-variant-numeric: tabular-nums; }
.bt th, .bt td { padding: 7px 10px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.bt thead th { border-top: 0; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.bt tbody th { text-align: left; font: 700 12px var(--sans); color: var(--ink); white-space: normal; }
.bt .cn { display: block; max-width: 30ch; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.bt td b { display: block; color: var(--ink); }
.bt td small { color: var(--dim); }
.bt td.pos b, .bt td.pos small { color: var(--up); }
.bt td.neg b, .bt td.neg small { color: var(--down); }
.bt td.nil { color: var(--dim); }
.bt-seasons { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 12px; }
.bt-seasons span { display: grid; padding: 6px 9px; border-radius: var(--r-md); background: var(--raised); font: 700 12px var(--mono); color: var(--ink); }
.bt-seasons em { font-style: normal; font: 600 9.5px var(--mono); color: var(--dim); }
.bt-seasons .pos { color: var(--up); } .bt-seasons .neg { color: var(--down); }
@media (max-width: 560px) { .bt-top { grid-template-columns: 1fr; } }

/* the top five: rank, team, the number and any flag in one cell, confidence and points never wrap (Michael, 2026-09-24) */
.top5 .t5 { grid-template-columns: 46px auto minmax(0, 1fr) auto; }
.top5 .t5t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.top5 .t5t .fishy { margin-left: 0; }
.top5 .t5 em { white-space: nowrap; text-align: right; }
.top5 .t5 em small { display: block; font: 600 10px var(--mono); color: var(--muted); }

/* the desktop Board on a short screen: the top five and the record go compact so the tape keeps its room */
@media (min-width: 1180px) {
  .orbit.tight #orbit-record .top5 { padding: 8px 10px 6px; }
  .orbit.tight #orbit-record .top5 .t5h { margin-bottom: 2px; }
  .orbit.tight #orbit-record .top5 .t5 { padding: 2px; gap: 6px; grid-template-columns: 32px auto minmax(0, 1fr) auto; }
  .orbit.tight #orbit-record .top5 .t5r { width: 32px; height: 26px; font-size: 15px; }
  .orbit.tight #orbit-record .top5 .chip { width: 22px; height: 22px; font-size: 10px; }
  .orbit.tight #orbit-record .top5 .t5 b { font-size: 16px; }
  .orbit.tight #orbit-record .top5 .t5 em { display: flex; gap: 6px; align-items: baseline; }
  .orbit.tight .record { padding: 8px 12px; }
  .orbit.tight .record .rh { font-size: 12px; }
  .orbit.tight .record .tiers { margin-top: 6px; }
  .orbit.tight .record .tier { padding: 4px 2px; }
  .orbit.tight .record .tier b { font-size: 18px; }
  .orbit.tight .record .tier em { font-size: 10px; }
}

/* review fixes, 2026-09-24 */
.orb .ring { width: auto; height: auto; }   /* the bubble's ring fills the bubble; the lead card's .ring is 84px */
.record .rh span, .houses .hd.chk, .lp-hd span:last-child { color: var(--muted); }   /* sentences never sit in --dim */
@media (min-width: 1180px) { .pane { padding-bottom: 96px; } }   /* the floating tab bar never covers the terminal's last rows */
.orb:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* the board row's summary is its button; the house buttons in the open detail sit beside it, never inside it */
.row .sum { min-width: 0; cursor: pointer; }
.row .sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
/* a pool pick past its deadline stays as filed: shown, not editable */
.row.closed { opacity: .6; }
.row.closed select { cursor: not-allowed; }

/* ---- The Mikey Meat Pie Mud Pit: black and neon green, the terminal. Michael, 2026-09-24. The switch on the Board puts
   html.mudpit on the page; every token above is repainted here, the code rain runs behind the content (#rain), and
   everything reads in the mono face. Chook's own look is untouched when it is off. ---- */
#rain { display: none; }
html.mudpit {
  --ground: #000000; --surface: #020A04; --raised: #051208; --line: #0B3314; --line-strong: #13602A;
  --ink: #CFFFD8; --muted: #3DDC62; --dim: #1F8A3B;
  --gold: #00FF41; --gold-2: #00C233; --on-gold: #001A07; --sky: #7DFFB0; --sky-2: #2FB36A; --heat: #FFB000; --up: #00FF41; --down: #FF3D5E;
  --glass: rgba(0, 10, 3, .9); --edge: rgba(0, 255, 65, .22);
  --display: "JetBrains Mono", ui-monospace, Consolas, monospace; --sans: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --gold-rgb: 0, 255, 65; --gold-2-rgb: 0, 194, 51; --ground-rgb: 0, 0, 0; --up-rgb: 0, 255, 65; --down-rgb: 255, 61, 94;
  --heat-rgb: 255, 176, 0; --sky-rgb: 125, 255, 176; --hi-rgb: 190, 255, 205;
}
/* the rain moves every frame: a blurred glass panel over it would re-blur every frame, so in the Mud Pit the panels are solid */
html.mudpit *, html.mudpit *::before, html.mudpit *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.mudpit .nav { background: rgba(0, 0, 0, .94); }
html.mudpit #rain { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .3; }
html.mudpit main { position: relative; z-index: 1; }
html.mudpit body { font-size: 15px; }
html.mudpit ::selection { background: #00FF41; color: #000; }
html.mudpit .title { font-size: 27px; letter-spacing: 0; text-shadow: 0 0 12px rgba(0, 255, 65, .55); color: var(--gold); }
html.mudpit .title::before { content: "> "; color: var(--dim); }
html.mudpit .mast { background: rgba(0, 0, 0, .9); border-bottom-color: var(--line-strong); box-shadow: 0 0 18px rgba(0, 255, 65, .12); }
html.mudpit .mast-name { font-size: 15px; letter-spacing: .02em; color: var(--gold); text-shadow: 0 0 10px rgba(0, 255, 65, .6); }
html.mudpit .mast-name::before { content: "MP"; border-radius: 4px; background: #000; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgba(0, 255, 65, .5); font: 700 12px var(--mono); }
html.mudpit .mast-name::after { content: "_"; margin-left: -6px; animation: mud-caret 1s steps(1) infinite; }
@keyframes mud-caret { 50% { opacity: 0; } }
html.mudpit .chip { background: #000 !important; color: var(--gold) !important; box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--mono); font-size: 11px; }
html.mudpit .chip.lg { box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(0, 255, 65, .35); }
html.mudpit .lead { background: linear-gradient(135deg, rgba(0, 255, 65, .9), rgba(0, 194, 51, .15) 40%, rgba(11, 51, 20, .7)); box-shadow: 0 0 34px rgba(0, 255, 65, .18); }
html.mudpit .lead > .in { background: linear-gradient(160deg, #031006 0%, #010702 60%, #000); }
html.mudpit .lead > .in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 255, 65, .05) 0 1px, transparent 1px 3px); }
html.mudpit .toggle#mudpit-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(0, 255, 65, .35); }
html.mudpit .mudtag, .mudtag { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
html.mudpit .empty, html.mudpit .record { background: rgba(2, 10, 4, .92); }
html.mudpit .orbit:not([hidden]) { background: radial-gradient(900px 500px at 15% 10%, rgba(0, 255, 65, .10), transparent 60%), radial-gradient(700px 500px at 85% 80%, rgba(0, 194, 51, .10), transparent 60%), rgba(0, 0, 0, .55); }
html.mudpit .orbit .grid { background-image: linear-gradient(rgba(0, 255, 65, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 65, .12) 1px, transparent 1px); }
html.mudpit .orbit .logo { font-size: 17px; color: var(--gold); text-shadow: 0 0 12px rgba(0, 255, 65, .6); }
html.mudpit .orbit .logo::before { content: "MP"; border-radius: 4px; background: #000; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px rgba(0, 255, 65, .6); font: 700 13px var(--mono); }
html.mudpit .orbit .legend h1 { font-size: 26px; color: var(--gold); text-shadow: 0 0 12px rgba(0, 255, 65, .5); }
html.mudpit .orb .ball { background: radial-gradient(circle at 32% 28%, rgba(190, 255, 205, .35), transparent 28%), radial-gradient(circle at 50% 50%, var(--c2), #000 78%); box-shadow: 0 0 0 1px var(--c1), 0 0 var(--glow, 0px) var(--c1), inset 0 0 26px rgba(0, 255, 65, .25); color: #D8FFE0; }
html.mudpit #orbit-mudpit[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(0, 255, 65, .4); }
html.mudpit .mudbt table td { font: 600 12px var(--mono); }
html.mudpit .mudbt tr:first-child th, html.mudpit .mudbt tr:first-child td { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { html.mudpit .mast-name::after { animation: none; } }
html.mudpit .top5 { background: linear-gradient(160deg, #031207, #010502 70%); border-color: rgba(0, 255, 65, .5); box-shadow: 0 0 26px rgba(0, 255, 65, .12); }
/* Michael, 2026-09-24: "make the numbers in the little circles have the black stroke too even the 5 pts 4 pts". Every
   badge in the Mud Pit keeps the house rule: white numbers with a black stroke, on a darker green so the white reads */
html.mudpit .t5r, html.mudpit .row .m .cardtag, html.mudpit .lead .slugrow .tag.slot, html.mudpit .orb .pick, html.mudpit .orb .pick:not(.locked) { background: #00A82B; color: #fff; border-color: #00FF41; box-shadow: 0 0 12px rgba(0, 255, 65, .45); }
html.mudpit .t5r, html.mudpit .row .m .cardtag, html.mudpit .lead .slugrow .tag.slot, html.mudpit .orb .pick b, html.mudpit .orb .pick small, html.mudpit .orb .conf, html.mudpit .srow .sk { color: #fff; text-shadow: none; -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
html.mudpit .orb .pick small { opacity: 1; -webkit-text-stroke-width: .8px; }
html.mudpit .orb .pick b { -webkit-text-stroke-width: 1.2px; }
html.mudpit .row .m .cardtag, html.mudpit .lead .slugrow .tag.slot, html.mudpit .srow .sk { -webkit-text-stroke-width: .6px; }
html.mudpit .orb .conf { background: #00A82B; box-shadow: 0 0 0 2px #000, 0 0 12px rgba(0, 255, 65, .5); -webkit-text-stroke-width: 1.2px; }
html.mudpit .srow .sk { background: #00A82B; }
@media (min-width: 1180px) { html.mudpit .orbit .card { background: linear-gradient(160deg, rgba(2, 18, 7, .92), rgba(0, 4, 1, .95)); } }
html.mudpit .sheet { background: rgba(0, 0, 0, .75); }

/* ---- The Floor (DESIGN.md "The Floor"): white on near-black, one signal orange that means "this changed", the
   highlighter on the best number. Archivo Narrow for names, Archivo for words, Azeret Mono for every number. Nothing
   animates. No team colors, no book colors, no gold, no glass: color is for state, never identity. ---- */
html.floor {
  --ground: #0D0F12; --surface: #13161B; --raised: #181C22; --line: #262B33; --line-strong: #3A414C;
  --ink: #F2F4F7; --muted: #AEB5C0; --dim: #7F8794;
  --gold: #F2F4F7; --gold-2: #D9DDE3; --on-gold: #0D0F12; --sky: #F2F4F7; --sky-2: #AEB5C0; --heat: #FF4F1F; --up: #F2F4F7; --down: #FF4F1F;
  --signal: #FF4F1F; --best: #FFF176; --on-best: #15151A;
  --glass: rgba(19, 22, 27, .96); --edge: rgba(255, 255, 255, .12);
  --display: "Archivo Narrow", "Arial Narrow", sans-serif; --sans: "Archivo", system-ui, sans-serif; --mono: "Azeret Mono", ui-monospace, Consolas, monospace;
  --r-sm: 3px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px;
  --gold-rgb: 242, 244, 247; --gold-2-rgb: 217, 221, 227; --ground-rgb: 13, 15, 18; --up-rgb: 242, 244, 247; --down-rgb: 255, 79, 31;
  --heat-rgb: 255, 79, 31; --sky-rgb: 242, 244, 247; --hi-rgb: 255, 255, 255;
}
html.floor *, html.floor *::before, html.floor *::after { animation: none !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
html.floor body { font-size: 14px; }
html.floor .mast { background: var(--ground); box-shadow: none; }
html.floor .mast-name { font: 700 16px/1 var(--display); letter-spacing: .14em; }
html.floor .mast-name::before { content: "TF"; border-radius: 3px; background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font: 700 12px var(--mono); }
html.floor .title { font: 700 26px/1 var(--display); letter-spacing: .02em; }
html.floor .nav { background: var(--ground); }
html.floor .nav button.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }
html.floor .nav button.on svg { filter: none; }
html.floor .toggle, html.floor .weeks .wk, html.floor .markets button, html.floor .pill { border-radius: 3px; font-family: var(--display); letter-spacing: .08em; }
html.floor .toggle[aria-pressed="true"]::before { background: var(--signal); border-color: var(--signal); box-shadow: none; }
html.floor .weeks { border-radius: 3px; }
html.floor .weeks .wk[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -3px 0 var(--signal); }
html.floor .empty { border-radius: 3px; }
html.floor #rain { display: none; }
html.floor .mudtag { color: var(--muted); border-color: var(--line-strong); }
.rooms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rooms .toggle { margin: 8px 0 0; }

/* the list */
.fl-host { padding: 0 16px 24px; }
.fl-wrap { display: block; }
.fl-side { display: none; }
.fl-head { padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.fl-head h1 { margin: 0 0 6px; font: 700 clamp(26px, 7vw, 40px)/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.fl-head h1 small { display: block; margin-top: 6px; font: 500 12px/1.4 var(--mono); color: var(--dim); text-transform: none; letter-spacing: 0; }
.fl-note { margin: 6px 0 0; font: 500 12.5px/1.45 var(--sans); color: var(--dim); }
.fl-note b { color: var(--ink); font-weight: 600; }
.fl-foot { margin: 14px 0 0; font: 500 11.5px/1.45 var(--mono); color: var(--dim); }
.fl-sig { color: var(--signal); font-weight: 600; }
.fl-list { display: grid; }
.fl-row { display: grid; gap: 6px; width: 100%; text-align: left; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit; }
.fl-row:hover { background: var(--surface); }
.fl-game { font: 700 17px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.fl-game small { display: block; margin-top: 3px; font: 500 11px/1.3 var(--mono); color: var(--dim); text-transform: none; letter-spacing: 0; }
.fl-game .fl-card { font-style: normal; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--ink); border-radius: 3px; font: 700 11px var(--mono); vertical-align: 2px; }
.fl-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fl-n { display: block; font: 500 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 5px; border-radius: 3px; position: relative; }
.fl-n small { display: block; font: 700 10px/1 var(--display); letter-spacing: .1em; color: var(--dim); margin-bottom: 3px; }
.fl-n i { font-style: normal; color: var(--dim); font-size: 11px; }
.fl-n.m15 { background: var(--signal); color: #000; }
.fl-n.m15 small, .fl-n.m15 i { color: #000; }
.fl-n.m60 { box-shadow: inset 0 0 0 1.5px var(--signal); }
.fl-n.m24::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); transform: translateY(-50%); }

/* the dossier */
.fl-head.dossier h1 { font-size: clamp(30px, 9vw, 44px); }
.fl-back { background: none; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; min-height: 36px; margin-bottom: 10px; cursor: pointer; }
.fl-lead { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.fl-lead b { color: var(--ink); font-weight: 600; }
.fl-sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fl-sec h3 { margin: 0 0 10px; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.fl-sec h3 .n { color: var(--signal); font: 500 10px/1 var(--mono); letter-spacing: 0; }
.fl-sec h3 .right { margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); text-align: right; }
.fl-sec h4 { margin: 10px 0 6px; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fl-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 600px) { .fl-books { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fl-books { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.fl-bk { padding: 7px 5px; border: 1px solid var(--line); border-radius: 3px; text-align: center; position: relative; }
.fl-bk .nm { font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-bk .nm em { font-style: normal; color: var(--on-best); background: var(--best); padding: 1px 4px; border-radius: 2px; margin-left: 3px; letter-spacing: .04em; }
.fl-bk .num { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-bk .num small { font-size: 10px; color: var(--dim); margin-left: 3px; font-weight: 500; }
.fl-bk .num b { font-size: 9px; margin-left: 3px; vertical-align: 2px; }
.fl-bk .when { font: 500 10px/1 var(--mono); color: var(--dim); margin-top: 5px; }
.fl-bk.pin { border-style: dashed; }
.fl-bk.pin .nm { color: var(--signal); }
.fl-bk.best { background: var(--best); color: var(--on-best); border-color: var(--best); }
.fl-bk.best .nm, .fl-bk.best .num small, .fl-bk.best .when { color: #4a4a2a; }
.fl-bk.best .nm em { background: var(--on-best); color: var(--best); }
.fl-bk.m15 { background: var(--signal); color: #000; border-color: var(--signal); }
.fl-bk.m15 .nm, .fl-bk.m15 .num small, .fl-bk.m15 .when, .fl-bk.m15 .num b { color: #000; }
.fl-bk.m60 { box-shadow: inset 0 0 0 1.5px var(--signal); }
.fl-bk.m24::before { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.fl-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.fl-sum b { color: var(--ink); font-weight: 600; }
.fl-chart { width: 100%; height: auto; display: block; }
.fl-chart text { font: 500 10px var(--mono); fill: var(--dim); }
.fl-chart .key { stroke: var(--line); stroke-dasharray: 3 4; }
.fl-chart .ax { stroke: var(--line); }
.fl-chart .dk { stroke: var(--ink); stroke-width: 2; fill: none; }
.fl-chart .pin { stroke: var(--dim); stroke-width: 1.5; fill: none; stroke-dasharray: 5 3; }
.fl-chart .steam { fill: var(--signal); opacity: .6; }
.fl-chart .steam.board { opacity: 1; }
.fl-chart .inj { stroke: var(--signal); stroke-width: 1.5; }
.fl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 11px/1.3 var(--mono); color: var(--dim); margin-top: 6px; }
.fl-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--ink); vertical-align: middle; margin-right: 5px; }
.fl-legend i.p { border-top: 2px dashed var(--dim); }
.fl-legend i.s { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); border: 0; }
.fl-legend i.j { width: 2px; height: 11px; background: var(--signal); border: 0; }
.fl-bar { display: grid; grid-template-columns: 64px 1fr 92px; gap: 10px; align-items: center; font: 500 12px/1 var(--mono); margin: 6px 0; }
.fl-bar .lbl { color: var(--dim); }
.fl-bar .trk { height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.fl-bar .trk i { display: block; height: 100%; background: var(--ink); opacity: .8; }
.fl-bar .val { text-align: right; font-weight: 600; white-space: nowrap; }
.fl-hist { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 500 11px/1.4 var(--mono); color: var(--dim); }
.fl-rows { display: grid; }
.fl-kv { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font: 500 12.5px/1.45 var(--sans); }
.fl-kv:first-child { border-top: 0; }
.fl-kv > span:first-child { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.fl-kv b { font-weight: 600; }
.fl-kv i { color: var(--muted); }
.fl-kv .rec { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.fl-verdicts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .fl-verdicts { grid-template-columns: 1fr 1fr; } }
.fl-verdict { border: 1px solid var(--line); border-radius: 3px; padding: 10px; }
.fl-verdict .t { font: 700 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; margin-bottom: 8px; }
.fl-verdict ul { list-style: none; margin: 0; padding: 0; font: 500 12px/1.5 var(--mono); }
.fl-verdict li { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); }
.fl-verdict li b { color: var(--ink); font-weight: 600; }
.fl-verdict .hl { margin: 8px 0 0; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.fl-verdict .pub { margin: 6px 0 0; font: 500 11px/1.4 var(--mono); color: var(--dim); }
.fl-brainline { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 8px; }
.fl-brainline .pick { font: 700 30px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.fl-brainline .conf { font: 600 14px/1 var(--mono); color: var(--signal); }
.fl-brainline .size { font: 500 12px/1.3 var(--mono); color: var(--dim); }
.fl-concepts { width: 100%; border-collapse: collapse; font: 500 12px/1.35 var(--mono); }
.fl-concepts td { padding: 5px 0; border-top: 1px solid var(--line); vertical-align: top; }
.fl-concepts td:first-child { font-family: var(--sans); font-size: 12.5px; padding-right: 8px; }
.fl-concepts td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.fl-concepts td:nth-child(2) { white-space: nowrap; padding: 5px 8px; color: var(--muted); }
.fl-concepts .src { color: var(--dim); font-size: 11px; margin-left: 6px; font-family: var(--mono); }
.fl-concepts .q { color: var(--muted); font-style: italic; margin-top: 2px; }
.fl-concepts tr.stale td { color: var(--dim); }
.fl-quote { margin: 0 0 10px; padding: 0 0 0 12px; border-left: 2px solid var(--line); font: 500 14px/1.45 var(--sans); white-space: pre-line; }
.fl-quote small { display: block; font: 500 11px/1 var(--mono); color: var(--dim); margin-top: 6px; }

/* on a desktop the Floor is a desk, not a phone column: the page widens to the screen's 1180 and the grid gets its room */
@media (min-width: 1180px) {
  html.floor main, html.floor .mast, html.floor .nav { max-width: 1180px; }
  /* the Floor tab is one big screen: the page takes the width, the panes sit inside it (Michael, 2026-10-09: "it's cut off") */
  body.tab-floor main, body.tab-floor.has-desk main, body.tab-floor .mast { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  body.tab-floor .desk { display: none !important; }
  .fl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; padding: 0 20px; }
  .fl-wrap .fl-host { padding-left: 4px; padding-right: 4px; }
  .fl-side { position: sticky; top: 64px; height: calc(100vh - 64px - 110px); display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px; margin-top: 8px; }
  .fl-side .pane { min-height: 0; overflow-y: auto; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding-bottom: 0; }
  .fl-side .pane-hd { background: var(--surface); padding: 10px 12px 8px; font: 700 12px/1 var(--display); letter-spacing: .1em; }
  .fl-side .pane-hd span + span { font: 500 11px var(--mono); color: var(--dim); }
  .fl-side .act { grid-template-columns: 64px 42px 1fr; padding: 6px 12px; font-size: 12px; }
  .fl-side .act .t, .fl-side .act .k { font-family: var(--mono); }
  .fl-side .act.big .k { color: var(--signal); }
  .fl-side .empty { margin: 10px 12px; }
  html.floor .fl-host, body.tab-floor .fl-host { padding: 0 24px 24px; }
  html.floor .fl-strip, body.tab-floor .fl-strip { margin: 0 -24px 6px; }
  html.floor .fl-list, body.tab-floor .fl-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
/* the live strip and the odds screen (desktop) */
.fl-strip { display: flex; margin: 0 -16px 6px; border-bottom: 1px solid var(--line); background: #000; overflow: hidden; }
.fl-strip .lbl { flex: none; padding: 9px 12px; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); border-right: 1px solid var(--line); display: flex; align-items: center; }
.fl-strip .items { display: flex; overflow-x: auto; scrollbar-width: none; }
.fl-strip .items::-webkit-scrollbar { display: none; }
.fl-strip button { flex: none; background: none; border: 0; border-right: 1px solid var(--line); color: var(--ink); padding: 8px 12px; font: 500 12px/1.2 var(--mono); white-space: nowrap; cursor: pointer; text-align: left; }
.fl-strip button b { color: var(--signal); margin-right: 8px; font-weight: 600; }
.fl-strip button em { font-style: normal; color: var(--dim); margin-left: 8px; }
.fl-findrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#fl-find { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font: 500 13px/1 var(--mono); padding: 8px 10px; min-height: 36px; width: 180px; }
#fl-find:focus { outline: 1px solid var(--signal); outline-offset: 0; }
.fl-screen { margin: 4px 0 14px; }
.fl-screen .bar { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.fl-screen h2 { margin: 0; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fl-screen .mkts { display: inline-flex; gap: 2px; margin-left: auto; }
.fl-screen .mkts button { padding: 6px 10px; border: 1px solid var(--line); background: none; color: var(--dim); font: 700 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; min-height: 30px; cursor: pointer; border-radius: 3px; }
.fl-screen .mkts button[aria-pressed="true"] { color: #000; background: var(--signal); border-color: var(--signal); }
.fl-screen .hint { font: 500 11px/1 var(--mono); color: var(--dim); }
.fl-screen .hint kbd { font: inherit; border: 1px solid var(--line); padding: 2px 5px; border-radius: 3px; margin: 0 2px; }
.fl-grid { width: 100%; border-collapse: collapse; font: 500 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.fl-grid th { text-align: right; font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 8px 8px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.fl-grid th:first-child { text-align: left; }
.fl-grid th.pin { color: var(--signal); }
.fl-grid td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fl-grid td.game { text-align: left; font: 700 15px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.fl-grid td.game small { display: block; font: 500 10px/1.2 var(--mono); color: var(--dim); margin-top: 3px; text-transform: none; letter-spacing: 0; }
.fl-grid tr.fl-gr { cursor: pointer; }
.fl-grid tr.fl-gr:hover td, .fl-grid tr.fl-gr:focus-visible td { background: var(--surface); }
.fl-grid tr.sel td { background: var(--raised); }
.fl-grid tr.sel td.game::before { content: "▸ "; }
.fl-grid td.empty { color: var(--dim); }
.fl-c .cell { display: inline-block; padding: 3px 5px; border-radius: 3px; position: relative; }
.fl-c .cell small { color: var(--dim); font-size: 11px; margin-left: 4px; }
.fl-c .cell b { font-size: 8px; margin-left: 4px; vertical-align: 2px; }
.fl-c.m15 .cell { background: var(--signal); color: #000; font-weight: 600; }
.fl-c.m15 .cell small { color: #000; }
.fl-c.m60 .cell { box-shadow: inset 0 0 0 1.5px var(--signal); }
.fl-c.m24 .cell::before { content: ""; position: absolute; left: -4px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); transform: translateY(-50%); }
.fl-c.best .cell { background: var(--best); color: var(--on-best); }
.fl-c.best .cell small { color: #4a4a2a; }
.fl-c.best.m15 .cell { box-shadow: inset 0 0 0 2px var(--signal); }
.fl-c.pin .cell { border: 1px dashed var(--line-strong); }

/* the Book and the honesty page */
.fl-tscroll { overflow-x: auto; }
.fl-table { width: 100%; border-collapse: collapse; font: 500 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.fl-table th { text-align: left; font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.fl-table th small { text-transform: none; letter-spacing: 0; font-family: var(--mono); font-weight: 500; }
.fl-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fl-table td small { color: var(--dim); }
.fl-table .up, .fl-bet .up { color: var(--ink); font-weight: 600; }
.fl-table .dn, .fl-bet .dn { color: var(--signal); font-weight: 600; }
.fl-bank { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font: 500 12px/1.3 var(--mono); color: var(--dim); }
.fl-bank label { display: inline-flex; align-items: center; gap: 6px; }
.fl-bank input { width: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font: 500 13px/1 var(--mono); padding: 7px 8px; min-height: 36px; }
.fl-bank button { background: var(--signal); color: #000; border: 0; border-radius: 3px; font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 0 12px; min-height: 36px; cursor: pointer; }
.fl-bank .fl-note { flex-basis: 100%; margin: 0; }
.fl-bank button.quiet { background: none; color: var(--ink); border: 1px solid var(--line); }
.fl-bet { display: grid; grid-template-columns: 92px 1fr 64px; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font: 500 12.5px/1.4 var(--sans); }
.fl-bet:first-child { border-top: 0; }
.fl-bet .w { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.fl-bet .w small, .fl-bet .p small, .fl-bet .r small { display: block; font: 500 11px/1.4 var(--mono); color: var(--dim); }
.fl-bet .p b { font-weight: 600; }
.fl-bet .p i { color: var(--muted); }
.fl-bet .r { text-align: right; font: 700 11px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.fl-bet .r.win { color: var(--ink); }
.fl-bet .r.loss { color: var(--signal); }
.fl-bet .r.pending { color: var(--dim); }
.fl-calc { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; font: 500 12px/1 var(--mono); color: var(--dim); }
.fl-calc b { color: var(--ink); font-weight: 600; }
html.floor #screen-log .stack, html.floor #screen-room .stack { max-width: 560px; }

/* the war room: lanes, Tuesday to kickoff */
.wr { display: grid; gap: 4px; position: relative; }
.wr-days { position: relative; height: 14px; margin-left: 96px; margin-right: 112px; }
.wr-days span { position: absolute; top: 0; transform: translateX(-50%); font: 500 10px/1 var(--mono); color: var(--dim); }
.wr-lane { display: grid; grid-template-columns: 96px 1fr 112px; gap: 0; align-items: center; min-height: 30px; }
.wr-name { font: 700 10px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding-right: 8px; }
.wr-track { position: relative; height: 22px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.wr-track .seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; font: 600 11px/1 var(--mono); color: var(--ink); border-left: 2px solid var(--ground); overflow: hidden; white-space: nowrap; cursor: default; }
.wr-track .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.wr-track .seg.home { background: #2a2f38; }
.wr-track .seg.away { background: #1b1f26; color: var(--muted); }
.wr-track .seg.pass, .wr-track .seg.none { background: transparent; color: var(--dim); }
.wr-track .seg.pass i { background: var(--signal); }
.wr-track .seg.total { background: #22262e; }
.wr-track .seg.mkt { background: #15181d; color: var(--muted); }
.wr-track .seg.mkt i { background: var(--dim); }
.wr-empty { font: 500 11px/22px var(--mono); color: var(--dim); padding-left: 6px; }
.wr-now { padding-left: 8px; font: 600 12px/1.2 var(--mono); }
.wr-now small { display: block; font: 500 10px/1.3 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px; }
.wr-now.away { color: var(--muted); }
.wr-now.pass b, .wr-now.none b { color: var(--dim); }
@media (max-width: 599px) { .wr-lane { grid-template-columns: 64px 1fr 84px; } .wr-days { margin-left: 64px; margin-right: 84px; } .wr-name { font-size: 9px; } .wr-now small { max-width: 76px; } }

/* the tape */
.fl-tape { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; margin: 10px 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.fl-tape .lbl { font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fl-tape input[type="range"] { width: 100%; accent-color: var(--signal); height: 28px; cursor: pointer; }
.fl-tape .at { font: 600 12px/1 var(--mono); min-width: 150px; text-align: right; }
.fl-tape button { background: var(--signal); color: #000; border: 0; border-radius: 3px; font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 0 12px; min-height: 32px; cursor: pointer; }
.fl-tape button[disabled] { background: var(--line); color: var(--dim); cursor: default; }
.fl-tape .hint { grid-column: 1 / -1; font: 500 11px/1.3 var(--mono); color: var(--dim); }
.fl-chart .cursor { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 2 3; }
.wr { position: relative; }
.wr-cursor { position: absolute; top: 14px; bottom: 0; width: 0; border-left: 1.5px dashed var(--signal); pointer-events: none; z-index: 1; }

/* the Floor as a tab inside the other rooms: its own tokens on its own box */
.floor-skin {
  --ground: #0D0F12; --surface: #13161B; --raised: #181C22; --line: #262B33; --line-strong: #3A414C;
  --ink: #F2F4F7; --muted: #AEB5C0; --dim: #7F8794;
  --gold: #F2F4F7; --gold-2: #D9DDE3; --on-gold: #0D0F12; --sky: #F2F4F7; --sky-2: #AEB5C0; --heat: #FF4F1F; --up: #F2F4F7; --down: #FF4F1F;
  --signal: #FF4F1F; --best: #FFF176; --on-best: #15151A;
  --glass: rgba(19, 22, 27, .96); --edge: rgba(255, 255, 255, .12);
  --display: "Archivo Narrow", "Arial Narrow", sans-serif; --sans: "Archivo", system-ui, sans-serif; --mono: "Azeret Mono", ui-monospace, Consolas, monospace;
  --r-sm: 3px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px;
  --gold-rgb: 242, 244, 247; --gold-2-rgb: 217, 221, 227; --ground-rgb: 13, 15, 18; --up-rgb: 242, 244, 247; --down-rgb: 255, 79, 31;
  --heat-rgb: 255, 79, 31; --sky-rgb: 242, 244, 247; --hi-rgb: 255, 255, 255;
  background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; border-radius: 6px;
}
.floor-skin *, .floor-skin *::before, .floor-skin *::after { animation: none !important; transition: none !important; text-shadow: none !important; }
html:not(.floor) .floor-skin { margin: 8px 0 0; border: 1px solid var(--line); }
.subnav { display: flex; gap: 6px; padding: 12px 16px 0; }
.subnav button { flex: 1; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.subnav button[aria-pressed="true"] { color: var(--ink); background: var(--raised); border-color: var(--line-strong); }
html.floor .subnav button { border-radius: 3px; font-family: var(--display); }
html.floor .subnav button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--signal); }

/* the news tape */
.fl-news { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 12.5px/1.4 var(--sans); }
.fl-news:first-child { border-top: 0; }
.fl-news:hover { background: var(--raised); }
.fl-news .t { font: 500 11px/1.3 var(--mono); color: var(--dim); }
.fl-news .t small { color: var(--dim); }
.fl-news .tags i { display: inline-block; margin: 4px 4px 0 0; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; font: 600 10px/1.3 var(--mono); font-style: normal; color: var(--dim); }
.fl-news .tags i.on { color: var(--ink); border-color: var(--ink); }
.fl-rows .fl-news { padding: 8px 0; }
.fl-chart .news { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
@media (min-width: 1180px) { .fl-side { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* live mode */
.fl-livewrap { margin: 10px 0 4px; padding: 10px 12px 12px; border: 1px solid var(--signal); border-radius: 4px; background: var(--panel, var(--surface)); }
.fl-liveh { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; font: 700 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--signal); }
.fl-liveh small { font: 500 11px/1.3 var(--mono); color: var(--dim); text-transform: none; letter-spacing: 0; }
.fl-liveh .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); align-self: center; animation: fl-blink 1.6s ease-in-out infinite; }
@keyframes fl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .fl-liveh .dot { animation: none; } }
.fl-livegrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fl-live { padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.fl-live:hover { background: var(--raised); }
.fl-sec .fl-live { cursor: default; padding: 0; border: 0; }
.fl-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.fl-score .tm { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 700 15px/1 var(--display); letter-spacing: .03em; }
.fl-score .tm b { font: 700 28px/1 var(--mono); }
.fl-score .tm:last-child { flex-direction: row-reverse; }
.fl-score .clk { text-align: center; font: 500 11px/1.3 var(--mono); color: var(--dim); }
.fl-score .clk b { display: block; color: var(--ink); font-weight: 600; }
.fl-livenum { margin: 6px 0 0; font: 500 12px/1.4 var(--mono); color: var(--dim); }
.fl-livenum b { color: var(--ink); }
.fl-positions { display: grid; gap: 4px; margin-top: 8px; }
.fl-pos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 88px; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--line); border-radius: 3px; font: 500 12px/1.3 var(--sans); }
.fl-pos .who small { display: block; font: 500 10px/1.2 var(--mono); color: var(--dim); }
.fl-pos .what { font: 600 13px/1.2 var(--mono); }
.fl-pos .st { font: 500 11px/1.3 var(--mono); color: var(--dim); }
.fl-pos .st b { color: var(--ink); }
.fl-pos .ch { position: relative; height: 16px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; font: 600 10px/16px var(--mono); text-align: right; padding-right: 4px; }
.fl-pos .ch i { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
.fl-pos .ch b { position: relative; }
.fl-pos.good { border-color: var(--best); }
.fl-pos.good .ch i { background: var(--best); }
.fl-pos.good .ch b { color: var(--on-best); mix-blend-mode: normal; }
.fl-pos.bad { border-color: var(--signal); }
.fl-pos.bad .ch i { background: var(--signal); }
.fl-books.live { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.fl-books.live .ln { font: 500 11px/1.4 var(--mono); }
.fl-books.live .ln small { color: var(--dim); }
@media (max-width: 480px) { .fl-pos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fl-pos .st { grid-column: 1; } .fl-pos .ch { grid-column: 2; } }

/* college on the Floor */
.fl-league { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.fl-league button { padding: 7px 12px; background: none; border: 0; color: var(--dim); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.fl-league button + button { border-left: 1px solid var(--line); }
.fl-league button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }
.fl-lg { margin: 0 0 4px; font: 600 10.5px/1.3 var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }