/* The Lines table, shared by the Slip Builder (boxapi/templates/boxslips.html) and the Board
   (lolprops/web/templates/board.html): glass box with refracting edges, Name / Prop / line badge / Lean / Prob
   columns, black game icons, icon filters and the pager. Pages wrap it in <div class="sbld">; lines.js drives it. */
/* The green and red for over / under and wins / losses. */
.sbld { --good: #6fff01; --bad: #e03131; --good-rgb: 111, 255, 1; --bad-rgb: 224, 49, 49; }
/* Glass, built the way Apple's material reads: a heavy blur that brightens what's behind (the site's monotone
   gradient), a thin rim lit from the top-left and fading round the edge, a faint specular sheen, and a soft
   drop shadow lifting it off the page. */
.sbld .panel.glass { position: relative; isolation: isolate; border: 0; border-radius: 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .035) 38%, rgba(255, 255, 255, .02) 100%);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.06); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03), inset 0 0 24px rgba(255, 255, 255, .02),
    0 1px 2px rgba(0, 0, 0, .35), 0 28px 60px -22px rgba(0, 0, 0, .75); }
.sbld .panel.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, .04) 55%,
    rgba(255, 255, 255, .08) 80%, rgba(255, 255, 255, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sbld .panel.glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 12% -20%, rgba(255, 255, 255, .09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%); }
/* The bevel: light caught along the inside of the rim, brightest at the top, so the edge reads as thick glass. */
.sbld .panel.glass { --bevel: inset 0 12px 16px -14px rgba(255, 255, 255, .16), inset 0 -12px 16px -14px rgba(255, 255, 255, .07),
  inset 12px 0 16px -14px rgba(255, 255, 255, .06), inset -12px 0 16px -14px rgba(255, 255, 255, .06); }
.sbld .panel.glass { box-shadow: var(--bevel), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 1px 2px rgba(0, 0, 0, .35), 0 28px 60px -22px rgba(0, 0, 0, .75); }
.sbld .lines-box { overflow: hidden; }
.sbld .lscroll { overflow-x: auto; }
/* Pager under the Lines table: plain white arrows and "page / pages" on the page itself, no box, no effects. */
.sbld .pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 14px; color: #fff; }
.sbld .pager button, .sbld .pager button:hover, .sbld .pager button:active, .sbld .pager button:disabled {
  width: 34px; height: 34px; padding: 0; justify-content: center; border: 0; border-radius: 0; background: none;
  color: #fff; opacity: 1; transition: none; transform: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.sbld .pager button:disabled { cursor: default; }
.sbld .pager svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sbld .pager .num { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.sbld .glass .ltab tbody tr:hover { background: rgba(255, 255, 255, .035); }
.sbld .bar { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; min-height: 34px; }
.sbld .bar b { font-size: 16px; } .sbld .bar .small { font-size: 13px; }
.sbld .filters { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; }
.sbld .fx { position: relative; }
.sbld .fbtn, .sbld .fbtn:hover, .sbld .fbtn:active { position: relative; width: 36px; height: 36px; padding: 0; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: #fff; transform: none; transition: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.sbld .fbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.sbld .fbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sbld .fbtn svg .f { fill: currentColor; stroke: none; }
.sbld .fbtn.set::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.sbld .fpop { position: absolute; right: 0; top: 42px; z-index: 30; min-width: 210px; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 40, 46, .86), rgba(24, 24, 28, .9)); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 50px -12px rgba(0, 0, 0, .8);
  backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.sbld .fpop input { width: 240px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .3); color: #fff; font: inherit; font-size: 14px; }
.sbld .fpop.menu button { display: flex; width: 100%; justify-content: flex-start; padding: 8px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-2); font-size: 14px; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sbld .fpop.menu button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sbld .fpop.menu button[aria-checked="true"] { color: #fff; font-weight: 600; }
.sbld .fpop.menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; padding-left: 14px; }
.sbld td .who { font-weight: 600; }
.sbld td .meta { font-size: 12px; color: var(--muted); }
.sbld .ln { display: inline-block; min-width: 38px; text-align: center; padding: 3px 9px; border-radius: 7px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
/* Spaced like Larry's table: a wide name column, the prop, then narrow centered number columns. */
.ltab { table-layout: fixed; min-width: 720px; }
.ltab th, .ltab td { text-align: center; padding: 16px 20px; }
.ltab th:nth-child(1) { width: 40%; } .ltab th:nth-child(2) { width: 24%; }
.ltab.graded th:nth-child(1) { width: 34%; } .ltab.graded th:nth-child(2) { width: 22%; }
.ltab th:nth-child(1), .ltab td:nth-child(1), .ltab th:nth-child(2), .ltab td:nth-child(2) { text-align: left; }
.ltab td:first-child { white-space: normal; }
.ltab td .who { font-size: 15px; }
.ltab td .meta { margin-top: 3px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltab td:nth-child(2) { color: var(--ink); white-space: normal; }
/* The PrizePicks logo (lolprops/web/templates/_pp_full.svg, _pp_mark.svg, from prizepicks.com): full in the Line header, the mark on slip rows. */
.ppfull { display: block; height: 15px; width: auto; max-width: 100%; margin: 0 auto; }
/* Game logo chips: small pieces of translucent light glass (frosted, brightened, a rim lit from the top-left, a shine
   across the top half, a soft shadow) with the logo in a soft grey. */
.gi { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: 22px; width: 22px; margin-left: 8px; padding: 0; vertical-align: -5px; border-radius: 8px;   /* square */
  font-size: 10px; font-weight: 700; color: #1c1c20;   /* the logo: a soft grey that sits in the dark glass */
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(240, 240, 246, .07) 55%, rgba(220, 220, 230, .1));
  backdrop-filter: blur(10px) saturate(180%) brightness(1.03); -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .08), inset 0 0 6px rgba(255, 255, 255, .05),
    0 1px 1px rgba(0, 0, 0, .25), 0 4px 10px -2px rgba(0, 0, 0, .45); }
.gi::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .35) 40%, rgba(255, 255, 255, .15) 70%, rgba(255, 255, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.gi::after { content: ""; position: absolute; inset: 1px 1px 50%; z-index: -1; border-radius: 7px 7px 4px 4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
.gi.txt { color: rgba(244, 244, 246, .72); width: auto; min-width: 22px; padding: 0 6px; }   /* a sport with no logo shows its name instead */
.gico { display: block; fill: currentColor; height: 13px; width: auto; max-width: 100%; }
.sbld .lean.OVER { color: var(--good); font-weight: 600; } .sbld .lean.UNDER { color: var(--bad); font-weight: 600; }
.sbld .p.hi { color: #fff; } .sbld .p.lo { color: var(--muted); }
/* EV: what $1 returns on average at the app's payout; green above zero */
.sbld .ev { font-weight: 700; } .sbld .ev.pos { color: var(--good); } .sbld .ev.neg { color: var(--bad); }
/* Faded rows (below the rule, used, placed): text and badges fade, the game icon chip stays solid. */
.sbld tr.dim td { color: rgba(244, 244, 246, .5); }
.sbld tr.dim td > :not(.gi) { opacity: .62; }
/* Phones: each line becomes a two-row card instead of a table row that needs sideways scrolling: name and Prob on
   top, the prop with its line badge and lean underneath (graded tables add the result under Prob). The Board keeps
   its book switch as a one-cell header. Correlation (.stk) and Discrepancies (.cmp) lay out their own cards. */
@media (max-width: 640px) {
  .sbld .filters { position: relative; }
  .sbld .filters .fx { position: static; }        /* popovers line up with the filter row's right edge, inside the screen */
  .sbld .fpop { max-width: calc(100vw - 32px); }
  .sbld .fpop input { width: min(240px, calc(100vw - 56px)); }
  .sbld .bookmenu { left: auto; right: 0; transform: none; }
  .ltab { min-width: 0; }
  .ltab:not(.stk):not(.cmp), .ltab:not(.stk):not(.cmp) tbody { display: block; }
  .ltab:not(.stk):not(.cmp) thead:not(:has(.bookswap)) { display: none; }
  .ltab:not(.stk):not(.cmp) thead { display: block; }
  .ltab:not(.stk):not(.cmp) thead tr { display: flex; justify-content: flex-start; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .ltab:not(.stk):not(.cmp) thead th { display: none; }
  .ltab:not(.stk):not(.cmp) thead th:nth-child(3) { display: block; width: auto; padding: 0; border: 0; }
  .ltab:not(.stk):not(.cmp) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
    grid-template-areas: "name name prob" "prop line lean"; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .ltab.graded:not(.stk):not(.cmp) tbody tr { grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "name name name prob" "prop line lean res"; }
  .ltab:not(.stk):not(.cmp) tbody tr:last-child { border-bottom: 0; }
  .ltab:not(.stk):not(.cmp) td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .ltab:not(.stk):not(.cmp) td:nth-child(1) { grid-area: name; }
  .ltab:not(.stk):not(.cmp) td:nth-child(2) { grid-area: prop; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
  .ltab:not(.stk):not(.cmp) td:nth-child(3) { grid-area: line; }
  .ltab:not(.stk):not(.cmp) td:nth-child(4) { grid-area: lean; min-width: 46px; text-align: right; font-size: 13px; }
  .ltab:not(.stk):not(.cmp) td:nth-child(5) { grid-area: prob; text-align: right; font-size: 17px; font-weight: 700; }
  .ltab:not(.stk):not(.cmp) td:nth-child(6) { grid-area: res; text-align: right; }
  .ltab:not(.stk):not(.cmp) td.empty { grid-column: 1 / -1; grid-area: auto; text-align: center; padding: 24px 0; }
  .ltab td .who { font-size: 15px; }
}
/* The player's picture left of the name (Board, Pick'em): PrizePicks' pictures are wide 4:3 shots with room around
   the player, so they're drawn larger in a box the row's height, standing on the row's bottom line. Last in the file,
   so the phone cards' "td { padding: 0 }" above doesn't take the picture's room away. */
.sbld .ltab td.hs { position: relative; padding-left: 96px; }
.sbld .ltab td.hs .fbox { position: absolute; left: 12px; top: 0; bottom: 0; width: 72px; overflow: hidden; pointer-events: none; }
.sbld .ltab td.hs .fbox img { position: absolute; left: 50%; bottom: -8px; width: 104px; height: 78px; transform: translateX(-50%); object-fit: contain; object-position: 50% 100%; }
.sbld .ltab td.hs .fbox img.sil { bottom: 0; width: 60px; height: 60px; }
@media (max-width: 640px) {
  .sbld .ltab td.hs { padding-left: 58px; }
  .sbld .ltab td.hs .fbox { left: -16px; top: -14px; bottom: auto; height: 56px; width: 64px; }
  .sbld .ltab td.hs .fbox img { width: 72px; height: 54px; bottom: -2px; }
  .sbld .ltab td.hs .fbox img.sil { width: 44px; height: 44px; bottom: 0; }
}