/* Conclusions first in the Lab and on the player page (static/v4/lab_more.js, partials/season_path):
   the "In short" block, the percentile bars beside it, and the card of actual, expected and
   projected. Every class carries the Lab's lz- prefix. */

/* -- In short ------------------------------------------------------------------------------------ */
.lz-sum { margin: 0 !important; }
.lz-sum > .ch { border-bottom: 1px solid var(--line); }
.lz-sum > .ch h2 { font-size: 19px; }
.lz-sum-body { padding: 0; }
.lz-sum-body > .lz-wait { padding: 20px var(--pad); }
.lz-short { list-style: none; margin: 0; padding: 14px var(--pad) 16px; display: grid; gap: 10px; max-width: 92ch; }
.lz-short li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--text); }
.lz-short li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--cob); }
.lz-short li:first-child { font-weight: 600; }
.lz-sum-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.lz-sum-grid > .lz-sum-t { border-right: 1px solid var(--line); min-width: 0; }
.lz-sum-k { min-width: 0; padding: 14px 0 16px; }
.lz-sum-k h3 { font-size: 13px; font-weight: 700; color: var(--mut); letter-spacing: 0; padding: 0 var(--pad) 8px; }
.lz-sum-k .lz-note { padding: 10px var(--pad) 0; }
.lz-cmp { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pad) 18px; }
.lz-tx-short { padding: 16px var(--pad); }
.lz-tx-short:empty { display: none; }
.lz-tx-short .lz-sum { box-shadow: none; }
.lz-page > .lz-sum + .lz-heads, .lz-flat > .lz-sum { margin-top: 0; }

/* -- percentile bars --------------------------------------------------------------------------------- */
.lz-pct { display: grid; padding: 0 var(--pad); }
.lz-pct-r { display: grid; grid-template-columns: minmax(120px, 1.25fr) 74px minmax(90px, 1.6fr) 46px; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); font-size: 13.5px; }
.lz-pct-r:first-child { border-top: 0; }
.lz-pct-r .lz-pl { font-weight: 600; min-width: 0; line-height: 1.3; padding: 6px 0; }
.lz-pct-r .lz-pl small { display: block; font-weight: 500; font-size: 12px; color: var(--faint); }
.lz-pct-r .lz-pv { text-align: right; font: 800 15px var(--disp); color: var(--text); font-variant-numeric: tabular-nums; }
.lz-pct-r .lz-pt { position: relative; height: 10px; border-radius: 5px; background: var(--s3); cursor: default; }
.lz-pct-r .lz-pt i { display: block; height: 100%; border-radius: 5px; background: var(--cob-soft-2); }
.lz-pct-r.hi .lz-pt i { background: var(--cob); }
.lz-pct-r.lo .lz-pt i { background: var(--faint); }
.lz-pct-r .lz-pt b { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; border-radius: 1px; }
.lz-pct-r .lz-pp { text-align: right; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; }
.lz-pct-r.hi .lz-pp { color: var(--cob-2); }
.lz-pct-axis { display: grid; grid-template-columns: minmax(120px, 1.25fr) 74px minmax(90px, 1.6fr) 46px; gap: 12px; font-size: 11px; color: var(--faint); padding-top: 4px; }
.lz-pct-axis span:nth-child(1) { grid-column: 3; justify-self: start; grid-row: 1; }
.lz-pct-axis span:nth-child(2) { grid-column: 3; justify-self: center; grid-row: 1; }
.lz-pct-axis span:nth-child(3) { grid-column: 3; justify-self: end; grid-row: 1; }

/* -- actual, expected, projected ------------------------------------------------------------------------ */
.lz-path { margin: 0; }
.lz-path-short { padding: 0 var(--pad) 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); max-width: 92ch; }
.lz-path .cb svg { display: block; width: 100%; height: auto; }
.lz-path-box { container-type: inline-size; }
.lz-path-md, .lz-path-sm { display: none; }
@container (max-width: 1100px) { .lz-path-lg { display: none; } .lz-path-md { display: block; } }
@container (max-width: 600px) { .lz-path-md { display: none; } .lz-path-sm { display: block; } }

@media (max-width: 900px) {
  .lz-sum-grid { grid-template-columns: minmax(0, 1fr); }
  .lz-sum-grid > .lz-sum-t { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .lz-short li { font-size: 14.5px; }
  .lz-pct-r { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "l v p" "tr tr tr"; row-gap: 6px; padding: 8px 0; }
  .lz-pct-r .lz-pl { grid-area: l; } .lz-pct-r .lz-pv { grid-area: v; } .lz-pct-r .lz-pt { grid-area: tr; } .lz-pct-r .lz-pp { grid-area: p; }
  .lz-pct-axis { grid-template-columns: minmax(0, 1fr); }
  .lz-pct-axis span:nth-child(n) { grid-column: 1; }
  .lz-tx-short { padding: 12px; }
}