/* The longshot page: one dated position, published with the arithmetic against us.
   Kept out of game.css because the college football chrome does not load game.css and a
   page whose key numbers silently lose their styling is worse than one with none. */

.pl-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:20px 0 14px}
.pl-key-c{background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:15px 17px}
.pl-key-c--lead{border-color:var(--brand-ink);box-shadow:0 0 0 1px var(--brand-ink) inset}
.pl-key-c--bad{border-color:var(--drop)}
.pl-key-t{margin:0;font:800 11px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pl-key-v{margin:7px 0 4px;font-family:var(--cond),"Barlow Condensed",sans-serif;font-size:2.3rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.pl-key-c--bad .pl-key-v{color:var(--drop)}
.pl-key-s{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-3)}
.pl-fine{margin:14px 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-3);max-width:62em}
.pl-note{margin-top:16px;padding:13px 15px;border-left:3px solid var(--line-2);background:var(--surface-2);
  border-radius:0 10px 10px 0;font-size:.93rem;line-height:1.55}
.pl-legs{min-width:0;width:100%;table-layout:fixed}
.pl-legs th,.pl-legs td{padding:9px 6px;font-size:13.5px;vertical-align:top}
.pl-legs thead th{font:700 10.5px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.pl-legs tbody th{font-weight:700;color:var(--ink)}
.pl-legs tbody th small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.pl-pick{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.pl-pick:hover{color:var(--brand-ink);border-bottom-color:currentColor}
.pl-legs .pl-n{color:var(--ink-3)}
.pl-legs thead th:nth-child(1){width:8%}
.pl-legs thead th:nth-child(2){width:46%}
.pl-legs thead th:nth-child(3){width:13%}
.pl-legs thead th:nth-child(4){width:14%}
.pl-legs thead th:nth-child(5){width:19%}
.pl-c{font-variant-numeric:tabular-nums}
.pl-day{color:var(--ink-3);font-size:12px}
.pl-res{color:var(--ink-3);font-style:italic;font-size:12px}
.pl-res--hit,.pl-res--miss{font-style:normal;font-weight:700}
.pl-res--hit{color:var(--ink-2)}
.pl-res--miss{color:var(--loss-ink)}
.pl-res small{display:block;font-weight:500;font-size:11px;color:var(--ink-3)}
.pl-legs tr:has(.pl-res--miss){background:var(--loss-soft)}
.pl-verdict{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line-2);border-left:4px solid var(--loss);border-radius:12px;background:var(--loss-soft);max-width:62em}
.pl-verdict p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.pl-verdict .pl-verdict-t{font:800 1.05rem/1.3 var(--sans);color:var(--loss-ink);margin-bottom:4px}
@media (max-width:620px){
  .pl-legs th,.pl-legs td{padding:8px 4px;font-size:12.5px}
  .pl-legs thead th:nth-child(4),.pl-legs td.pl-day{display:none}
  .pl-legs thead th:nth-child(1){width:9%}
  .pl-legs thead th:nth-child(2){width:52%}
  .pl-legs thead th:nth-child(3){width:15%}
  .pl-legs thead th:nth-child(5){width:24%}
  .pl-key-v{font-size:2rem}
}

/* The longshot book. Same three-number header as a position page, so the reader who
   arrives from one recognises the other. */
.ls-book{min-width:0;width:100%;table-layout:fixed}
.ls-book th,.ls-book td{padding:10px 8px;font-size:13.5px;vertical-align:top}
.ls-book thead th{font:700 10.5px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.ls-book tbody th{font-weight:700;color:var(--ink)}
.ls-book tbody th small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.ls-book .ls-bad{color:var(--drop)}
.ls-book thead th:nth-child(1){width:30%}
.ls-book thead th:nth-child(2){width:12%}
.ls-book thead th:nth-child(3){width:15%}
.ls-book thead th:nth-child(4){width:12%}
.ls-book thead th:nth-child(5){width:15%}
.ls-book thead th:nth-child(6){width:16%}
@media (max-width:620px){
  /* Five columns in ~340px. The header words are the constraint, not the numbers:
     "Overpaid" and "Status" collided at 390px because the cells would not wrap. Let
     them wrap, drop the market's-odds column (it is restated in the note below), and
     give the two money columns the room their labels need. */
  .ls-book th,.ls-book td{padding:8px 4px;font-size:12.5px;overflow-wrap:anywhere;word-break:normal}
  .ls-book thead th{letter-spacing:.02em;line-height:1.25}
  .ls-book thead th:nth-child(3),.ls-book td:nth-child(3){display:none}
  .ls-book thead th:nth-child(1){width:32%}
  .ls-book thead th:nth-child(2){width:16%}
  .ls-book thead th:nth-child(4){width:16%}
  .ls-book thead th:nth-child(5){width:20%}
  .ls-book thead th:nth-child(6){width:16%}
}