/* Drift board (/drift/): the livery home's world (liveries.css + home.css: header, photograph band), like the
   teams and tournament pages, with its own photograph. The board is open rows on hairlines, numbers in tabular
   figures, the leader in ink. Sentence case throughout (DESIGN.md). */

.dr-band {
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, .94) 0%, rgba(4, 6, 10, .8) 38%, rgba(4, 6, 10, .25) 72%, rgba(4, 6, 10, .35) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, .5) 0%, rgba(4, 6, 10, 0) 35%, rgba(4, 6, 10, .55) 78%, var(--night) 100%),
    url(../assets/band-ridge.jpg) 60% 55% / cover no-repeat var(--shot);
}
.dr-band .lv-band-copy { padding: 44px 48px 34px; }
.dr-band h1 { max-width: none; margin-top: 10px; font-size: clamp(34px, 3.8vw, 56px); }
.dr-band .lv-lede { max-width: 60ch; margin-top: 12px; font-size: 16px; }
.dr-col { padding-top: 30px; }

.dr-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 22px 0 0; }
.dr-facts:empty { display: none; }
.dr-facts dt { color: var(--ink); font: 800 28px/1 var(--font-sans); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.dr-facts dd { margin: 6px 0 0; color: var(--ink-3); font: 500 13px/1.3 var(--font-sans); }

/* Course picker. */
.dr-pick { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-bottom: 26px; }
.dr-pick[hidden] { display: none; }
.dr-pick label { color: var(--ink-2); font: 600 13px/1.4 var(--font-sans); }
.dr-pick select { min-width: 220px; max-width: 100%; background-color: #10141b; }
.dr-pick label:first-child select { min-width: 300px; }
.dr-pick select option { background: #10141b; color: var(--ink); }

/* ── Board ─────────────────────────────────────────────────────────────────────────────────── */

.dr-table { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.dr-table th { padding: 0 8px 10px; color: var(--ink-3); font: 500 13px/1 var(--font-sans); text-align: left; white-space: nowrap; }
.dr-table td { padding: 14px 8px; border-top: 1px solid var(--hair); color: var(--ink-2); font: 500 15px/1.3 var(--font-sans); white-space: nowrap; }
.dr-table tbody tr { transition: background .15s; }
.dr-table tbody tr:hover { background: rgba(243, 245, 248, .03); }
.dr-table .dr-num { text-align: right; }
.dr-table .dr-pos { width: 40px; color: var(--ink-3); font: 700 15px/1 var(--font-sans); text-align: right; }
.dr-table .dr-pos.top { color: var(--ink); }
.dr-table td.dr-who { max-width: 0; width: 34%; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font: 600 16px/1.3 var(--font-sans); }
.dr-who a { color: inherit; text-decoration: none; }
.dr-who a:hover { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.dr-who small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font: 500 13px/1.3 var(--font-sans); }
.dr-carline { display: none; }
.dr-table td.dr-car { max-width: 0; width: 22%; overflow: hidden; text-overflow: ellipsis; }
.dr-table td.dr-score { color: var(--ink); font: 700 17px/1 var(--font-sans); }
.dr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dr-empty { padding: 24px 0; color: var(--ink-3); }

/* Narrower: the car moves under the driver's name. */
@media (max-width: 960px) {
  .dr-table .dr-car { display: none; }
  .dr-carline { display: inline; }
  .dr-table td.dr-who { width: 42%; }
}

/* A phone: position, driver and score. */
@media (max-width: 720px) {
  .dr-band .lv-band-copy { padding: 30px 16px 26px; }
  .lv-col.dr-col { padding-left: 16px; padding-right: 16px; }
  .dr-facts { gap: 14px 28px; }
  .dr-facts dt { font-size: 24px; }
  .dr-pick { flex-direction: column; }
  .dr-pick select, .dr-pick label:first-child select { width: 100%; min-width: 0; }
  .dr-table .dr-x { display: none; }
  .dr-table td { padding: 12px 4px; }
  .dr-table th { padding: 0 4px 10px; }
  .dr-table .dr-pos { width: 28px; }
  .dr-table td.dr-who { width: 100%; }
}