/* ============================================================================
   NIGHT MODE — the Oct 10 2026 look, layered over app.css.

   [stated] 2026-10-10: "i like the night mode design keep it dark the phone
   looks good too go ahead and push that to the website". The approved mockup
   is the "A · Night Mode" board and the "C · Pocket" phone screens on the
   Sharp Signal Redesign canvas: iPhone dark mode, neutral greys instead of
   the old blue-black, rounded cards, iOS segmented controls, book logos as
   app icons, gold kept as the brand accent.

   WHY A LAYER AND NOT A REWRITE. app.css carries a year of measured layout
   fixes (the sticky header that must not sit in a scroll box, the fixed
   table layout, the phone grid, the ladder that re-stacks). Every one of them
   still holds; this file only changes how things LOOK. It loads after
   app.css, so a rule here wins by order, and deleting the <link> puts the
   old look back in one edit.
   ========================================================================= */

:root{
  /* neutral iOS dark greys. tokens.css still defines the brand's own values
     (the Discord renderers read those); the web board overrides them here. */
  --sur-0:#0B0B0D;   /* page */
  --sur-1:#161618;   /* card */
  --sur-2:#1E1E21;   /* tile inside a card, row hover, input */
  --sur-3:#26262A;   /* pressed */
  --line-1:#232326;
  --line-2:#2A2A2D;
  --line-3:#3A3A3C;
  --ink-1:#F5F5F7;
  --ink-2:#A1A1A6;   /* 6.9:1 on the card */
  --ink-3:#8E8E93;   /* 5.3:1 on the card */
  --pos:#30D158;
  --pos-2:#30D158;
  --pos-wash:rgba(48,209,88,.14);
  --gold-2:#E2C374;
  --gold-wash:rgba(201,162,75,.13);
  --gold-line:rgba(201,162,75,.42);
  --track:#1C1C1E;   /* segmented control track */
  --seg-on:#3A3A3C;  /* selected segment */
  /* [stated] 2026-10-12: "choose a better font for the whole website that doesn't look so AI,
     whatever font apple uses" - the system font: San Francisco on iPhone / Mac, Segoe on
     Windows, Roboto on Android; nothing downloaded, nothing that reads as a dev tool */
  --f-display:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono:ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  --r-sm:10px; --r:14px; --r-lg:24px;
  --shadow-sm:none; --lift:none;
  --shadow:0 20px 60px rgba(0,0,0,.55);
}

body{font-size:14px; letter-spacing:-.003em}
h1,h2,h3{letter-spacing:-.025em}

/* ── THE BAR: a translucent iOS nav bar, tabs in a segmented track ── */
.appbar{
  background:rgba(11,11,13,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:0 20px; gap:16px; align-items:center; height:auto; min-height:60px;
}
.mark{
  gap:10px; font-size:17px; font-weight:650; letter-spacing:-.01em;
  text-transform:none; color:var(--ink-1);
}
.mark .mdot{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none}
.mark i{
  font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none;
  color:var(--ink-3); border-left:1px solid var(--line-2); padding-left:10px;
}
.tabs{
  align-self:center; align-items:center; gap:2px; padding:3px;
  background:var(--track); border-radius:12px;
}
.tabs a{
  padding:8px 14px; border-radius:9px; font-size:13.5px; font-weight:600;
  letter-spacing:0; color:var(--ink-2);
}
.tabs a::after{display:none}
.tabs a:hover{color:var(--ink-1); background:rgba(255,255,255,.04)}
.tabs a[aria-current="page"]{background:var(--seg-on); color:var(--ink-1)}
.tabs a[aria-current="page"] svg{color:var(--gold)}
.fresh{font-size:12px; color:var(--ink-2)}
.dot{background:var(--pos); box-shadow:0 0 0 3px rgba(48,209,88,.16)}
.who{border-left-color:var(--line-2); font-size:12.5px}

/* ── controls ── */
.btn{border-radius:999px; min-height:40px; padding:10px 20px; font-weight:650; font-size:13.5px}
.btn.sm{border-radius:999px; min-height:34px; padding:7px 14px}
.btn.ghost{background:var(--track); border-color:var(--line-3); color:var(--ink-1)}
.btn.ghost:hover{background:var(--sur-3)}
.seg{background:var(--track); border:0; border-radius:12px; padding:3px; gap:2px}
.seg button{border-radius:9px; padding:7px 14px; font-weight:600; color:var(--ink-2)}
.seg button:hover{background:rgba(255,255,255,.04); color:var(--ink-1)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--seg-on); color:var(--ink-1); font-weight:650}
@media(max-width:560px){ .seg{border-radius:12px} }
select,textarea,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]){
  background:var(--track); border:1px solid var(--line-2); border-radius:12px;
  min-height:40px; font-size:14px;
}
select:hover,input:not([type=range]):hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{border-color:var(--gold-line); outline:none}
/* the words above each box: [stated] 2026-10-12 "need to be easier to read" - the body
   font, a size up, brighter, less tracking than the old mono caps */
.field > label,.lbl{font-size:12.5px; letter-spacing:.05em; font-family:var(--f-display); font-weight:600; color:var(--ink-2)}

/* ── surfaces ── */
.card,.filters,.tablewrap,.rail,.statusbar{
  background:var(--sur-1); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:none;
}
.card-p{padding:20px 22px}
.card h2,.sec-h{font-family:var(--f-display); font-size:12.5px; letter-spacing:.06em; font-weight:600; color:var(--ink-2)}
.lead{font-size:15px; color:var(--ink-2)}
.filters{padding:12px; gap:10px; border-radius:22px}

/* stat tiles */
.sum{gap:12px}
.stat{background:var(--sur-1); border:1px solid var(--line-2); border-radius:20px; padding:18px 20px; box-shadow:none}
.stat::before{display:none}
.stat b{font-family:var(--f-display); font-size:30px; font-weight:650; letter-spacing:-.025em}
.stat b.gold{color:var(--pos)}
.stat span{font-size:13px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--ink-2); margin-top:4px}

/* ── the board table ── */
.tablewrap{border-radius:24px; padding:6px}
thead th{
  background:var(--sur-1); color:var(--ink-3);
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  border-bottom:1px solid var(--line-2); padding:13px 12px 11px;
}
thead th:first-child{border-top-left-radius:18px}
thead th:last-child{border-top-right-radius:18px}
thead th.sorted{color:var(--gold-2); box-shadow:inset 0 -2px 0 var(--gold)}
tbody tr.row{border-bottom:1px solid var(--line-1)}
tbody tr.row:hover,tbody tr.row.open{background:var(--sur-2)}
td{padding:13px 12px}
.game .lg{border:0; background:var(--gold-wash); color:var(--gold-2); border-radius:6px; padding:2px 6px; font-weight:650; letter-spacing:.04em}
.game .t{font-size:12px; color:var(--ink-3)}
td.bet .n{font-size:14.5px; font-weight:600}
td.bet .m{font-size:12px; color:var(--ink-3)}
td.price{font-size:16px}
.flag{border-radius:6px}

/* a logo plus "Hard Rock Bet" needs more than the 122px the glyph had, and
   the bet pill a little more than 116 once it is a rounded pill. table-layout
   is fixed, so these pixels come out of the two prose columns. */
#v-board thead th:nth-child(3){width:156px}
#v-board thead th:nth-child(11){width:128px}

/* BOOK LOGOS. The logo is the book's own site icon, served from /logos/,
   drawn as a small app icon; a book with no logo falls back to the old glyph. */
.book{gap:9px; font-size:13.5px}
.book .blogo{width:26px; height:26px; border-radius:7px; flex:none; display:block; object-fit:cover; background:var(--sur-2)}
.book .glyph{border-radius:7px; width:26px; height:26px}
.ladder2 .book .blogo,.ladder .book .blogo{width:30px; height:30px; border-radius:8px}
a.booklink{border-radius:10px}
a.booklink:hover,a.booklink:focus-visible{background:var(--sur-3); color:var(--ink-1)}

/* EV pills: green on a green wash; the top tier is a solid pill */
.evcell{border-radius:999px; padding:5px 10px; font-size:13px}
.evcell.p1{color:var(--pos); background:rgba(48,209,88,.10)}
.evcell.p2{color:var(--pos); background:rgba(48,209,88,.18)}
.evcell.p3{color:#06210F; background:var(--pos)}
.code{background:var(--sur-2); border:0; border-radius:999px}
.tap{border-radius:999px; background:var(--gold-wash); border-color:var(--gold-line)}
.lock{color:var(--ink-2)}

/* the drawer under an opened row: the line shop */
tr.detail>td{background:var(--sur-2); padding:4px 14px 20px}
.fairline{border-bottom-color:var(--line-2); font-size:12.5px; color:var(--ink-3)}
.fairline b.gold{color:var(--gold-2)}
.bothcap{color:var(--ink-1); font-size:13px}
.ladder2{
  background:var(--sur-1); border:1px solid var(--line-2); border-radius:20px;
  padding:6px 16px 12px; max-width:720px;
}
.ladder2 > div{border-bottom-color:var(--line-1); min-height:48px}
.ladder2 .h{font-family:var(--f-display); font-weight:600; letter-spacing:.06em; font-size:11.5px}
.ladder2 .h.side{font-family:var(--f-display); font-size:13.5px}
.ladder2 .lab,.ladder2 .pc.best,.ladder2 .pc.avg{background:var(--sur-2); box-shadow:-5px 0 0 var(--sur-2), 5px 0 0 var(--sur-2)}
.ladder2 .pc b{font-size:15.5px}
.ladder2 .pc.best b{color:#06210F; background:var(--pos); border-radius:999px; padding:3px 10px}
.bar{background:var(--sur-3); border-radius:999px}

/* preview bar, gate, footer */
.previewbar{background:var(--sur-1); border:1px solid var(--gold-line); border-left:1px solid var(--gold-line); border-radius:20px; padding:14px 18px}
.gate .card{border-radius:28px; padding:40px}
.gate h1{font-size:30px; text-transform:none; letter-spacing:-.025em}
footer{border-top-color:var(--line-1); color:var(--ink-3); font-size:12px}

/* the other tabs pick the same surfaces up through the variables; these are
   the few places that had their own shape */
.picklist{border-radius:20px; background:var(--sur-1)}
.pickrow{border-bottom-color:var(--line-1)}
.pickrow.on{background:var(--sur-2); box-shadow:inset 3px 0 0 var(--gold)}
.chips label{background:var(--track); border-color:var(--line-2)}
.savebar{background:rgba(22,22,24,.94); border-radius:20px}
.codebox{border-radius:14px}
.ch-stage,.ch-mini,.ch-lim-c,.ch-table{border-radius:16px}
.rail-toggle{border-radius:14px}
.page-h{border-bottom-color:var(--line-2)}
.page-h h1{font-size:26px; letter-spacing:-.025em}

/* The wide-screen bar wrap from app.css draws a rule across the full width
   above the tabs; a segmented track sits on its own instead. */
@media(max-width:1280px){
  .appbar{padding:10px 16px 10px; gap:10px 14px}
  .tabs{margin:0; padding:3px; border-top:0; width:100%}
  .tabs a{padding:9px 12px; flex:1 1 0; justify-content:center}
}
@media(max-width:620px){
  .tabs{padding:3px}
  .tabs a{padding:9px 4px; font-size:12.5px}
}

/* ── THE PHONE: every row is a card (the approved "Pocket" screens) ──────
   app.css already turns the table into a grid of blocks below 780px; this
   keeps that and lays each block out as a card: kickoff and EV across the
   top, the bet big, then the book's logo on the left and the price on the
   right. The book column comes BACK as that bottom-left cell (it carries the
   bet link), so the "· Book" text under the bet name is no longer needed. */
@media(max-width:780px){
  .pad{padding:14px 12px 44px}
  .tablewrap{background:transparent; border:0; padding:0; border-radius:0}
  #v-board tbody tr.row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"game ev" "bet bet" "book price";
    gap:6px 12px; padding:14px 16px; margin:0 0 10px;
    background:var(--sur-1); border:1px solid var(--line-2); border-radius:22px;
  }
  #v-board tbody tr.row:hover,#v-board tbody tr.row.open{background:var(--sur-1); border-color:var(--line-3)}
  #v-board tbody tr.row.open{border-radius:22px 22px 0 0; margin-bottom:0; border-bottom-color:transparent}
  #v-board .c-game{grid-area:game}
  #v-board .c-ev{grid-area:ev; align-self:start}
  #v-board .c-bet{grid-area:bet}
  #v-board .col-book{display:block; grid-area:book; min-width:0; align-self:center}
  #v-board .c-price{grid-area:price; align-self:center; font-size:20px}
  #v-board td.bet .only-s{display:none}
  #v-board td.bet .n{font-size:17px; font-weight:650; letter-spacing:-.01em}
  #v-board .game .g{font-size:12.5px}
  #v-board tr.detail{margin:0 0 10px}
  #v-board tr.detail > td{
    background:var(--sur-1); border:1px solid var(--line-3); border-top:0;
    border-radius:0 0 22px 22px; padding:2px 12px 14px;
  }
  .ladder2{padding:4px 10px 10px; border-radius:16px}
  .stat{border-radius:18px; padding:14px 16px}
  .stat b{font-size:24px}
  .filters{border-radius:18px}
}

/* ── OUTLIERS (replaces Trends, 2026-10-10) ──────────────────────────────
   The same card language as the board: a fixed-layout table on a desktop,
   one card per bet on a phone, the book's logo on every price. */
#o-table{table-layout:fixed}
#o-table thead th:nth-child(3){width:168px}
#o-table thead th:nth-child(4){width:84px}
#o-table thead th:nth-child(5){width:100px}
#o-table thead th:nth-child(6){width:108px}
#o-table thead th:nth-child(7){width:70px}
#o-table tbody tr.row > td{overflow:hidden}
#o-table td.bet .n{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#o-table td.o-price{color:var(--pos)}
.o-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:8px; max-width:980px}
.o-bk{display:flex; align-items:center; gap:10px; background:var(--sur-1); border:1px solid var(--line-2); border-radius:14px; padding:9px 12px; min-width:0}
.o-bk .blogo{width:28px; height:28px; border-radius:8px; flex:none}
.o-bk .glyph{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; border:1px solid currentColor; font-size:10px}
.o-bk .o-nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}
.o-bk b{font-family:var(--mono); font-size:14.5px; font-weight:600}
.o-bk.o-hit{border-color:var(--pos); background:rgba(48,209,88,.08)}
.o-bk.o-hit b{color:var(--pos)}
.o-bk.o-out{opacity:.55}
.o-tag{font-size:11px; color:var(--ink-3); white-space:nowrap}
.o-tag.o-best{color:var(--pos)}
.o-tag.o-sharp{color:var(--gold-2)}
.o-act{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px}
.o-why{font-size:12.5px; max-width:70ch}
@media(max-width:1080px){
  #o-table thead th:nth-child(7),#o-table td.o-n{display:none}
}
@media(max-width:780px){
  #v-outliers table,#v-outliers tbody,#v-outliers tr,#v-outliers td{display:block}
  #v-outliers thead{display:none}
  #v-outliers table{table-layout:auto}
  #v-outliers tbody tr.row{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"game pct" "bet bet" "book price";
    gap:6px 12px; padding:14px 16px; margin:0 0 10px;
    background:var(--sur-1); border:1px solid var(--line-2); border-radius:22px;
  }
  #v-outliers tbody tr.row > td{padding:0; overflow:visible}
  #v-outliers tbody tr.row.open{border-radius:22px 22px 0 0; margin-bottom:0; border-color:var(--line-3); border-bottom-color:transparent}
  #v-outliers .o-game{grid-area:game; min-width:0}
  #v-outliers .o-pct{grid-area:pct; align-self:start}
  #v-outliers .o-bet{grid-area:bet; min-width:0}
  #v-outliers .o-book{grid-area:book; min-width:0; align-self:center}
  #v-outliers .o-price{grid-area:price; align-self:center; font-size:20px; text-align:right}
  #v-outliers .o-avg,#v-outliers .o-n{display:none}
  #v-outliers td.bet .n{white-space:normal; font-size:17px; font-weight:650}
  #v-outliers .game .g{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; color:var(--ink-3)}
  #v-outliers tr.detail{margin:0 0 10px}
  #v-outliers tr.detail > td{display:block; background:var(--sur-1); border:1px solid var(--line-3); border-top:0;
    border-radius:0 0 22px 22px; padding:2px 12px 14px}
}

/* ── PARLAY SEARCH (2026-10-10) ── */
.p-form{margin-bottom:16px}
.p-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:16px 18px}
.p-grid .field{min-width:0}
.p-grid .p-wide{grid-column:1 / -1}
.p-grid .seg{align-self:flex-start; max-width:100%; flex-wrap:wrap}
.p-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:20px}
.p-status{font-size:13.5px; color:var(--ink-2); display:inline-flex; align-items:center; gap:9px}
.p-status.bad{color:var(--neg)}
.spin{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-3); border-top-color:var(--gold); display:inline-block}
@media(prefers-reduced-motion:no-preference){ .spin{animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} }
.p-sum{margin-bottom:16px; line-height:1.6; font-size:14px}
.p-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr)); gap:16px}
.p-card{background:var(--sur-1); border:1px solid var(--line-2); border-radius:22px; overflow:hidden; min-width:0}
.p-img{display:block; width:100%; height:auto; background:var(--sur-2)}
.p-text{padding:14px 16px 16px; font-size:13.5px; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere}
.p-text b{color:var(--ink-1)}
.p-text .btn{margin-top:10px}
.p-text small,.p-sum small{font-size:12px}

/* six tabs on a 320px phone: "Outliers" is the widest short label and ran
   6px past its share. A hair smaller there, measured at 320 and 360. */
@media(max-width:370px){
  .tabs a{font-size:11.5px; padding:9px 1px; letter-spacing:-.01em}
}

/* ── THE OPENED ROW, SECOND PASS (2026-10-10) ────────────────────────────
   [stated] over a screenshot of an opened board row: "lets make sure this
   dosnet look like this need to look neat and sorted looks broken when
   clicking into a tab." Measured at 1440px: the books sat in a 720px box with
   the right half of the drawer empty, that box was one CSS grid whose gaps
   cut every divider and every BEST / AVERAGE band into pieces, and the facts
   ran together on one line in two fonts. Now the facts are a card on the
   left (two-up tiles on a phone) and every book is ONE row element on the
   right, so its divider and its shading run edge to edge. Board and Outliers
   share it. Last in the file on purpose: these win by order. */
tr.detail>td{background:var(--sur-2); padding:14px 14px 16px}
.dw{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
@media(min-width:1000px){ .dw{grid-template-columns:272px minmax(0,1fr); gap:14px; align-items:start} }
.dw-side{display:flex; flex-direction:column; gap:10px; min-width:0}
.dw-facts{margin:0; background:var(--sur-1); border:1px solid var(--line-2); border-radius:18px; padding:2px 16px}
.dw-f{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-1); min-width:0}
.dw-f:last-child{border-bottom:0}
.dw-f dt{font-size:12.5px; color:var(--ink-3); white-space:nowrap; flex:none}
.dw-f dd{margin:0; min-width:0; text-align:right; font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--ink-1); overflow-wrap:anywhere}
.dw-f dd small{font-weight:500; font-size:11.5px; color:var(--ink-3); margin-left:6px}
.dw-f.gold dd{color:var(--gold-2)}
.dw-f.pos dd{color:var(--pos)}
.dw-f dd .aged{color:var(--warn, #C9A24B)}
.dw-f.only-code{display:none}
.dw-acts{display:flex; flex-direction:column; gap:8px}
.dw-acts > a{display:flex; width:100%; justify-content:center; align-items:center; text-align:center}
.dw-acts .tap.only-code{display:none}
.dw-note{margin:0; padding:0 4px; font-size:12px; line-height:1.5; color:var(--ink-3)}
.dw-main{background:var(--sur-1); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; min-width:0}
.dw-cap{padding:14px 18px 12px; font-size:14px; font-weight:650; color:var(--ink-1); border-bottom:1px solid var(--line-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dw-cap .dim{font-weight:500; margin-left:4px}
.shop{font-size:13px}
.sh-r{display:grid; grid-template-columns:minmax(0,1fr) minmax(88px,220px) minmax(88px,220px); column-gap:16px;
  align-items:center; min-height:52px; padding:8px 18px; border-bottom:1px solid var(--line-1)}
.shop.one .sh-r{grid-template-columns:minmax(0,1fr) minmax(96px,220px)}
.sh-r:last-child{border-bottom:0}
.sh-head{min-height:0; padding-top:12px; padding-bottom:10px; border-bottom-color:var(--line-2); align-items:end}
.sh-head .h{font-family:var(--f-display); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.sh-head .h.side{text-align:right; text-transform:none; letter-spacing:-.01em; font-family:var(--f-display); font-size:13.5px;
  font-weight:650; color:var(--ink-1); line-height:1.25; overflow-wrap:anywhere}
.sh-head .h.side i{display:block; font-style:normal; font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:2px}
.sh-r.sh-sum{background:var(--sur-2)}
.sh-r.sh-sum-end{border-bottom-color:var(--line-2)}
.sh-r .lab{font-family:var(--f-display); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.sh-r .bk{min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px}
.sh-r .bk .book{min-width:0; white-space:normal; line-height:1.25}
.shop .book .blogo{width:28px; height:28px; border-radius:8px}
.sh-r .pc{display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-family:var(--f-mono); line-height:1.2; min-width:0}
.sh-r .pc b{font-size:15px; font-weight:600; color:var(--ink-1); letter-spacing:-.01em}
.sh-r .pc small{font-family:var(--f-display); font-size:11px; color:var(--ink-3); margin-top:3px; white-space:nowrap}
.sh-r .pc small.p1,.sh-r .pc small.p2,.sh-r .pc small.p3{color:var(--pos)}
.sh-r .pc small.n{color:var(--neg)}
.sh-r .pc.best b{color:#06210F; background:var(--pos); border-radius:999px; padding:3px 10px; font-weight:700}
.sh-r .pc.avg b{color:var(--ink-2)}
.sh-r .pc.none{color:var(--ink-3); font-size:15px}
.sh-r.anchor .bk .book{color:var(--ink-2)}
.shop .sh-r:not(.sh-head):not(.sh-sum):hover{background:rgba(255,255,255,.025)}
.shop .up{animation:fl-up 2.4s ease-out}
.shop .dn{animation:fl-dn 2.4s ease-out}
.dw-main .onesided{padding:11px 18px 13px; border-top:1px solid var(--line-2); font-size:12px; line-height:1.45; color:var(--ink-3)}
.sh-r.o-hit{background:rgba(48,209,88,.08); box-shadow:inset 3px 0 0 var(--pos)}
.sh-r.o-hit .pc b{color:var(--pos)}
.sh-r.o-out{opacity:.55}
/* the bet name ends in "…" instead of being cut mid-letter: the name was a
   bare text node in a flex box, where text-overflow never applies */
td.bet .n .nt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:780px){
  #v-board tr.detail > td,#v-outliers tr.detail > td{padding:10px 10px 12px}
  td.bet .n .nt{white-space:normal; overflow:visible}
  .dw-facts{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:6px 14px}
  .dw-f{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:8px 0; border-bottom:0}
  .dw-f dd{text-align:left}
  .dw-f dd small{margin-left:5px}
  .dw-f.only-code{display:flex}
  .dw-acts{flex-direction:row; flex-wrap:wrap}
  .dw-acts > a{flex:1 1 140px; width:auto}
  .dw-acts .tap.only-code{display:flex; padding:10px 14px; font-size:13px}
  .dw-cap{padding:12px 14px 10px; white-space:normal}
  .sh-r{grid-template-columns:minmax(0,1fr) minmax(68px,27%) minmax(68px,27%); column-gap:10px; padding:8px 12px; min-height:50px}
  .shop.one .sh-r{grid-template-columns:minmax(0,1fr) minmax(80px,34%)}
  .sh-head .h.side{font-size:12.5px}
  .sh-r .pc b{font-size:14px}
  .sh-r .pc.best b{padding:3px 8px}
  .dw-main .onesided{padding:10px 12px 12px}
}

/* THE FULL LIST under the parlay search cards (2026-10-12): every set that
   cleared the bar, as rows, with a find box. The cards above are the top few. */
.p-list{margin-top:18px; padding:0; overflow:hidden}
.p-list-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px;
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.p-list-h input{flex:0 1 220px; min-width:140px; height:34px; font-size:13px; text-transform:none; letter-spacing:0}
.p-tbl{table-layout:auto}
.p-tbl th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:10px 12px; text-align:left}
.p-tbl td{padding:9px 12px; font-size:13.5px; border-top:1px solid var(--line-2); vertical-align:top}
.p-tbl td small{display:block; margin-top:2px; font-size:11.5px}
.p-tbl .t-r{text-align:right; white-space:nowrap}
.p-tbl .pos{color:var(--pos,#4FB477)} .p-tbl .neg{color:var(--neg,#DC6469)}
@media(max-width:600px){.p-tbl th:nth-child(3),.p-tbl td:nth-child(3){display:none}}