/* official-views.css — the /official views, the LMU Ratings tab on /leaderboards (rank chips, flags, the "You" card,
 * distributions) and their light-theme colors. Moved out of official.html so both pages share it. */
.ofl-exp { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
/* Official ranks: RaceOS rank chips (colored by rank name), the driver-rank progress bar, flags. */
.ofl-rk { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 650; white-space: nowrap; }
.ofl-rk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rk, var(--text-3)); flex: none; }
[data-rk="Bronze"] { --rk: #b4773f; } [data-rk="Silver"] { --rk: #a9b3bd; } [data-rk="Gold"] { --rk: #d9a92a; }
[data-rk="Platinum"] { --rk: #4fb8b0; } [data-rk="Diamond"] { --rk: #7b9dff; }
.ofl-bar { display: block; width: 88px; max-width: 100%; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--line-2, rgba(127, 127, 127, .25)); overflow: hidden; }
.ofl-bar > i { display: block; height: 100%; background: var(--rk, var(--accent)); }
.ofl-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.ofl-chips .ofl-rk { font-size: var(--fs-micro); font-weight: 600; color: var(--text-2, var(--text)); }
.ofl-flag { width: 20px; height: 15px; border-radius: 2px; vertical-align: middle; object-fit: cover; }
.ofl-cc { display: inline-block; min-width: 20px; font-size: var(--fs-micro); font-weight: 700; color: var(--text-3); vertical-align: middle; }
.ofl-name-flag { display: none; margin-right: 6px; }
.ofl-search input { min-height: 34px; width: 240px; max-width: 100%; }
.ofl-more { display: block; margin: 0 auto var(--s4, 16px); }
.ofl-ranks-table { min-width: 560px; }
.ofl-sl:empty { display: none; }
.ofl-sl { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.ofl-me { display: grid; grid-template-columns: minmax(160px, 1.2fr) repeat(3, minmax(150px, 1fr)); gap: 14px 20px; padding: 14px 18px; margin: 0 0 14px; border-color: var(--accent, #00ff66); }
.ofl-me-who { display: flex; align-items: center; gap: 10px; }
.ofl-me-who strong { display: block; font-size: 1.05rem; }
.ofl-me-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ofl-me-h { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #8a8); }
.ofl-me-row { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.ofl-me-row small { color: var(--text-3, #8a8); }
.ofl-me-upd { font-size: .75rem; color: var(--text-3, #8a8); }
@media (max-width: 768px) { .ofl-me { grid-template-columns: 1fr 1fr; } .ofl-me-who { grid-column: 1 / -1; } }
/* Countries view and rank distributions (the account Ratings card's chart look, bars colored by rank). */
.ofl-rv { margin-bottom: var(--s3, 12px); }
.ofl-page .cmp-track[hidden] { display: none; }
.ofl-ranks-table td, .ofl-ranks-table th { vertical-align: middle; }
.ofl-cc-btn { min-height: 0; border-radius: 0; box-shadow: none; }
.ofl-dists + .cmp-updated { margin-top: var(--s3, 12px); }
.ofl-ranks-table .ofl-cc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ofl-cc-btn:hover span, .ofl-cc-btn:focus-visible span { color: var(--accent); text-decoration: underline; }
.ofl-top { display: none; }
.ofl-dists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s4, 16px) var(--s5, 24px); }
.ofl-dist { margin: 0; padding: 14px 16px 12px; border: 1px solid var(--line-2, rgba(127, 127, 127, .25)); border-radius: var(--v2-r-lg, 10px); background: var(--v2-panel, var(--bg-2, transparent)); }
.ofl-dist-h { margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, var(--text)); }
.rt-plot { position: relative; height: 120px; margin-top: 22px; border-bottom: 1px solid var(--line, rgba(127, 127, 127, .3)); }
.rt-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.rt-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.rt-bar i { display: block; width: 100%; background: var(--rk, var(--text-3)); border-radius: 3px 3px 0 0; }
.rt-you { position: absolute; top: -20px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.rt-you b { position: absolute; top: 0; left: 5px; font-size: 0.75rem; color: var(--text); white-space: nowrap; }
.rt-you.rt-you-l b { left: auto; right: 5px; }
.ofl-dist-axis { display: flex; gap: 2px; margin-top: 4px; }
.ofl-dist-axis span { min-width: 0; overflow: hidden; padding-top: 3px; border-top: 2px solid var(--rk, var(--text-3)); font-size: 0.75rem; font-weight: 600; color: var(--text-2, var(--text)); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.rt-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: var(--text-3); margin-top: 4px; }
/* Best laps: filters, sort, histogram, sector colors, the driver's lap list; columns hidden on phones (ofl-m). */
.ofl-lf { margin-top: var(--s2, 8px); }
.ofl-lflag:empty { display: none; }
.ofl-sort { margin: 0 0 var(--s3, 12px); }
.ofl-histo { margin: 0 0 var(--s3, 12px); }
.ofl-histo > summary { cursor: pointer; width: max-content; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, var(--text)); }
.ofl-hist { margin-top: var(--s2, 8px); }
.ofl-hist .rt-bar i { background: var(--accent); opacity: .75; }
.ofl-hm { position: absolute; top: -18px; bottom: 0; width: 0; border-left: 1px dashed var(--text-3); }
.ofl-hm b { position: absolute; top: 0; left: 3px; font-size: 0.6875rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.ofl-laps-table td, .ofl-laps-table th { vertical-align: middle; }
.ofl-laps-table .ofl-lrow { cursor: pointer; }
.ofl-laps-table .ofl-lrow:hover > *, .ofl-laps-table .ofl-lrow.is-open > * { background: var(--v2-overlay, rgba(127, 127, 127, .1)); }
.ofl-dbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ofl-dbtn::after { content: "\25BE"; font-size: 0.75em; color: var(--text-3); }
.ofl-dbtn[aria-expanded="true"]::after { content: "\25B4"; }
.ofl-dbtn:hover span, .ofl-dbtn:focus-visible span { color: var(--accent); text-decoration: underline; }
.ofl-dflag { width: 18px; height: 13px; margin-right: 5px; }
.ofl-dbtn .ofl-dflag { margin-right: 0; }
#oflLaps [hidden] { display: none !important; }
.ofl-sub { display: none; margin-top: 2px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ofl-sp { color: var(--ofl-sp, #b06cff); font-weight: 700; }
.ofl-sg { color: var(--ofl-sg, #2fbf71); font-weight: 600; }
.ofl-xrow > td { padding: 0 !important; background: var(--v2-inset, rgba(127, 127, 127, .06)); }
.ofl-x { padding: 10px 12px 12px; white-space: normal; }
.ofl-xsum { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: var(--fs-small); font-weight: 650; }
.ofl-xsum small { margin-right: 5px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ofl-xwhere { margin-left: auto; font-weight: 500; color: var(--text-3); }
/* Width 0 + min-width 100%: the lap list scrolls inside the row instead of widening the board. */
.ofl-xwrap { width: 0; min-width: 100%; margin-top: 8px; overflow-x: auto; }
.ofl-x .ofl-xtable { width: auto; min-width: 0; font-size: var(--fs-small); }
.ofl-x .ofl-xtable thead th, .ofl-x .ofl-xtable td { padding: 4px 12px; text-align: right; vertical-align: middle; }
.ofl-x .ofl-xtable thead th { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ofl-xtable tr.is-best td { background: var(--v2-wash, rgba(var(--accent-rgb), .13)); }
.ofl-xtable tr.is-stint td { border-top: 2px solid var(--accent); }
.ofl-xnote { margin: 8px 0 0; font-size: var(--fs-micro); color: var(--text-3); }
@media (max-width: 768px) {
    .ofl-page .ofl-m { display: none; }
    .ofl-laps-table, .ofl-cars-table { min-width: 0; }
    .ofl-sub { display: block; }
    .ofl-laps-table th, .ofl-laps-table td, .ofl-cars-table th, .ofl-cars-table td { padding-left: 8px; padding-right: 8px; }
    .ofl-laps-table tbody th { min-width: 0; white-space: normal; }
    .ofl-xwhere { margin-left: 0; flex-basis: 100%; }
    .ofl-sort { display: flex; width: 100%; }
    .ofl-sort button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
    .ofl-hm b { font-size: 0.625rem; }
}
@media (max-width: 560px) {
    .ofl-ranks-table { min-width: 0; }
    .ofl-top { display: block; }
    .ofl-name-flag { display: inline; }
    .ofl-bar { width: 64px; }
    .ofl-search, .ofl-search input { width: 100%; }
}
/* ---- One look for every tab (the Schedule's): tab strip, filter panels of pills, banner cards, calmer tables. ---- */
[data-rk="Field"] { --rk: #7c8591; }
[data-cls="Hyper"], [data-cls="Hypercar"] { --cls: #e5484d; } [data-cls="LMP2"] { --cls: #3e8ef7; } [data-cls="LMP3"] { --cls: #a66cff; }
[data-cls="GT3"] { --cls: #f2a33a; } [data-cls="GTE"] { --cls: #e05fa8; }
.ofl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 var(--s3, 12px); padding: 12px 14px; border: 1px solid var(--ofl-line);
    border-radius: var(--ofl-r); background: var(--v2-panel, var(--bg-2, transparent)); }
.ofl-filters:empty { display: none; }
.ofl-filters .cmp-track { margin: 0; }
.ofl-filters select { min-height: 34px; max-width: 100%; }
.ofl-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ofl-pills[hidden] { display: none; }
.ofl-pills button { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 5px 12px; border: 1px solid var(--ofl-line); border-radius: 999px; background: transparent; box-shadow: none;
    color: var(--text-2, var(--text)); font: inherit; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ofl-pills button:hover { border-color: var(--text-3); }
.ofl-pills button[aria-pressed="true"], .ofl-pills button[aria-selected="true"] { border-color: var(--accent); background: var(--v2-wash, rgba(var(--accent-rgb), .13)); color: var(--text-hi, var(--text)); }
.ofl-pills button[data-cls]:not([data-cls=""])::before, .ofl-car::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cls, var(--text-3)); }
.ofl-car { display: inline-flex; align-items: center; gap: 7px; }
.ofl-car::before { display: inline-block; }
/* The race picker (Best laps): race type and a name search, then the series per week (daily ones per tier) as buttons. */
.ofl-picker { margin: 0 0 var(--s3, 12px); padding: 12px 14px; border: 1px solid var(--ofl-line); border-radius: var(--ofl-r); background: var(--v2-panel, var(--bg-2, transparent)); }
.ofl-picker [hidden], .ofl-pgroup[hidden] { display: none; }
.ofl-pick-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; }
.ofl-pick-top .ofl-search { margin: 0 0 0 auto; }
.ofl-elists { position: relative; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.ofl-ewk { margin: 12px 0 6px; font-size: var(--fs-micro); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ofl-ewk:first-child { margin-top: 0; }
.ofl-elist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ofl-ev { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 0; padding: 8px 12px; border: 1px solid var(--ofl-line); border-radius: var(--v2-r-md, 6px);
    background: transparent; box-shadow: none; color: var(--text-2, var(--text)); font: inherit; text-align: left; cursor: pointer; }
.ofl-ev:hover { border-color: var(--text-3); }
.ofl-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ofl-ev[aria-pressed="true"] { border-color: var(--accent); background: var(--v2-wash, rgba(var(--accent-rgb), .13)); color: var(--text-hi, var(--text)); }
.ofl-ev b { font-size: var(--fs-small); }
.ofl-ev span { font-size: var(--fs-micro); color: var(--text-3); }
.ofl-pgroup { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ofl-plabel { flex: none; font-size: var(--fs-micro); font-weight: 650; color: var(--text-3); }
@media (max-width: 768px) {
    .ofl-pick-top .ofl-search { margin: 0; flex: 1 1 100%; }
    .ofl-elists { max-height: 50vh; }
    .ofl-elist { grid-template-columns: 1fr; }
    .ofl-pgroup { flex: 1 1 100%; }
}
/* The event banner (Best laps): the RaceOS artwork, title and track/session/week over a shade. */
.ofl-banner { position: relative; display: flex; align-items: flex-end; min-height: 120px; margin: 0 0 var(--s3, 12px); border: 1px solid var(--ofl-line); border-radius: var(--ofl-r); overflow: hidden;
    background: var(--v2-inset, #111) center 40% / cover no-repeat; }
.ofl-banner:not(.has-img) { min-height: 0; background: var(--v2-panel, var(--bg-2, transparent)); }
.ofl-banner-t { width: 100%; padding: 36px 16px 12px; }
.ofl-banner.has-img .ofl-banner-t { background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ofl-banner:not(.has-img) .ofl-banner-t { padding-top: 12px; }
.ofl-banner h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.ofl-banner p { margin: 3px 0 0; font-size: var(--fs-small); font-weight: 600; opacity: .9; }
/* Tables: room to breathe, aligned numbers, a light zebra, the header kept in view on wide screens. */
.ofl-page .cmp-table { font-variant-numeric: tabular-nums; }
.ofl-page .cmp-table tbody tr:not(.ofl-xrow):nth-child(even) > * { background: rgba(127, 127, 127, .045); }
.ofl-page .cmp-table tbody td, .ofl-page .cmp-table tbody th { padding-top: 10px; padding-bottom: 10px; }
.ofl-page .cmp-table thead th { font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ofl-page .table-wrap { border-radius: var(--ofl-r); border-color: var(--ofl-line); }
@media (min-width: 1200px) {
    .ofl-page .table-wrap:has(> .ofl-laps-table, > .ofl-ranks-table, > .ofl-ana-table) { overflow: visible; }
    .ofl-page .table-wrap:has(> .ofl-laps-table, > .ofl-ranks-table, > .ofl-ana-table) thead th { position: sticky; top: 0; z-index: 2; background: var(--v2-panel, var(--panel)); }
}
.ofl-num { text-align: right; white-space: nowrap; }
.ofl-num small { color: var(--text-3); }
.ofl-dim { color: var(--text-3); font-size: var(--fs-micro); }
.ofl-sub2 { display: block; margin-top: 3px; font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); white-space: normal; }
/* DR / SR chips: "Silver 1 · 60%", a thin progress bar, "top 12%". */
.ofl-rkw { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; vertical-align: middle; }
.ofl-rk small { margin-right: 4px; font-size: .85em; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.ofl-rk em { margin-left: 6px; font-style: normal; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ofl-rkw .ofl-bar { width: 96px; margin-top: 0; height: 3px; }
.ofl-rkw .ofl-bar > i { background: var(--rk, var(--accent)); }
.ofl-top-pct { font-size: var(--fs-micro); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.ofl-chips { gap: 6px 16px; margin-top: 6px; }
.ofl-chips .ofl-rkw { gap: 3px; }
.ofl-chips .ofl-rkw .ofl-bar { width: 72px; }
.ofl-chips .ofl-top-pct { display: none; }
.ofl-ranks-table td .ofl-rkw { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.ofl-ranks-table td .ofl-rkw .ofl-rk { flex-basis: 100%; }
/* Meters (race stats, strength): a track with a fill, the number beside it. */
.ofl-meter { display: inline-flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.ofl-track { position: relative; display: block; flex: 1 1 auto; min-width: 40px; max-width: 160px; height: 8px; border-radius: 4px; background: rgba(127, 127, 127, .16); overflow: hidden; }
.ofl-track > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.ofl-meter b { flex: none; min-width: 46px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ofl-meter-pick .ofl-track > i { background: var(--text-2, var(--text)); opacity: .55; }
.ofl-meter-pod .ofl-track > i { background: var(--ofl-pod, #c58b42); }
.ofl-meter-win .ofl-track > i { background: var(--ofl-gold, #e2b33c); }
.ofl-ana-table td.ofl-lead .ofl-meter b { color: var(--ofl-gold-t, #e2b33c); }
.ofl-page .cmp-table tbody th { background: transparent; }
.ofl-ana-table tr.is-win > th, .ofl-ana-table tr.is-win > td:first-child { box-shadow: none; }
.ofl-ana-table tr.is-win > td:first-child { border-left: 3px solid var(--ofl-gold, #e2b33c); }
.ofl-few { display: inline-block; padding: 2px 9px; border: 1px dashed var(--ofl-line); border-radius: 999px; font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.ofl-summary { margin: 0 0 var(--s3, 12px); padding: 12px 16px; border: 1px solid var(--ofl-line); border-left: 3px solid var(--accent); border-radius: var(--ofl-r); background: var(--v2-panel, transparent);
    font-size: var(--fs-small); line-height: 1.5; }
.ofl-ana-table { min-width: 0; }
.ofl-ana-table tbody th { min-width: 150px; }
.ofl-rs-table td:nth-child(3), .ofl-rs-table td:nth-child(4), .ofl-rs-table td:nth-child(5), .ofl-rs-table td:nth-child(6), .ofl-rs-table td:nth-child(7) { min-width: 130px; }
.ofl-gap { display: block; min-width: 160px; }
.ofl-gap .ofl-track { max-width: none; overflow: visible; }
.ofl-gap .ofl-track > i { background: linear-gradient(90deg, var(--accent), var(--ofl-gold, #e2b33c)); }
.ofl-gap u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-2, var(--text)); border-radius: 1px; }
.ofl-st-table .ofl-srow { cursor: pointer; }
.ofl-st-table .ofl-srow:hover > *, .ofl-st-table .ofl-srow.is-open > * { background: var(--v2-overlay, rgba(127, 127, 127, .1)); }
.ofl-tracks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.ofl-tracks li { display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(110px, 1fr) minmax(80px, 2fr) 64px; align-items: center; gap: 12px; }
.ofl-tracks li b { text-align: right; font-variant-numeric: tabular-nums; }
/* Lap-time tiers: a card per track with its artwork and a colored ladder of bands. */
.ofl-hero-sm { aspect-ratio: 16 / 5; }
.ofl-tcard.is-thin .ofl-hero { filter: grayscale(.6) brightness(.8); }
.ofl-ladder { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.ofl-ladder li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-left: 4px solid var(--rk); border-radius: var(--v2-r-md, 6px);
    background: color-mix(in srgb, var(--rk) 13%, transparent); font-size: var(--fs-small); }
.ofl-ladder li:nth-child(1) { margin-right: 0; } .ofl-ladder li:nth-child(2) { margin-right: 4%; } .ofl-ladder li:nth-child(3) { margin-right: 8%; }
.ofl-ladder li:nth-child(4) { margin-right: 12%; } .ofl-ladder li:nth-child(5) { margin-right: 16%; } .ofl-ladder li:nth-child(6) { margin-right: 20%; }
.ofl-rung { min-width: 66px; font-weight: 700; color: var(--rk); }
.ofl-ladder b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ofl-ladder li.is-you { box-shadow: inset 0 0 0 1px var(--accent); }
.ofl-youtag { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--bg, #000); font-size: var(--fs-micro); font-weight: 700; }
.ofl-you { margin: 10px 0 0; font-size: var(--fs-small); color: var(--text-2, var(--text)); }
.ofl-need { margin-top: 12px; }
.ofl-need p { margin: 0 0 6px; font-size: var(--fs-small); color: var(--text-3); }
.ofl-need .ofl-track { max-width: none; }
.ofl-need .ofl-track > i { background: var(--text-3); }
/* QA fixes: banner title stays white over the artwork in any theme; the "You" card's rank rows flow as text so they never break mid-figure; the histogram note clears the plot. */
.ofl-banner.has-img h2 { color: #fff; }
.ofl-me-row { display: block; }
.ofl-me-row small { display: inline-block; min-width: 84px; }
@media (max-width: 560px) { .ofl-me { grid-template-columns: 1fr; } }
.ofl-histo .cmp-updated { margin-top: 10px; }
/* Lap-time distribution: a small histogram per car on one shared axis, bars in the class color; the median tick solid. */
.ofl-ldists { display: grid; gap: 8px; margin: 0 0 var(--s3, 12px); }
.ofl-ldist { padding: 10px 14px 8px; }
.ofl-ldist .ofl-dist-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-transform: none; letter-spacing: 0; }
.ofl-ldist .rt-plot { height: 56px; margin-top: 6px; }
.ofl-ldist .rt-bar i { background: var(--cls, var(--accent)); opacity: .8; }
.ofl-ldist .ofl-hm { top: -4px; }
.ofl-ldist .ofl-qm { border-left: 2px solid var(--text); }
/* Weekly races: the per-class table inside each series card. */
.ofl-wcard .table-wrap { margin: 10px 0; }
.ofl-wk-table th, .ofl-wk-table td { vertical-align: top; }
/* Light theme: the fixed purple/green/gold/rank colors are too pale on a bright page, so darker values. */
[data-theme="daylight"] { --ofl-sp: #7a2fd0; --ofl-sg: #137a40; --ofl-gold: #c9961a; --ofl-gold-t: #8a6100; --ofl-pod: #a8691f; }
[data-theme="daylight"] [data-rk="Bronze"] { --rk: #98602a; } [data-theme="daylight"] [data-rk="Silver"] { --rk: #6b7885; }
[data-theme="daylight"] [data-rk="Gold"] { --rk: #a87a00; } [data-theme="daylight"] [data-rk="Platinum"] { --rk: #1f8a82; }
[data-theme="daylight"] [data-rk="Diamond"] { --rk: #3d63d6; } [data-theme="daylight"] [data-rk="Field"] { --rk: #5b6572; }
[data-theme="daylight"] [data-cls="GT3"] { --cls: #c97a10; } [data-theme="daylight"] [data-cls="LMP3"] { --cls: #7f45d6; }
.ofl-tsel select { min-width: 160px; }
@media (max-width: 768px) {
    .ofl-filters { padding: 10px 12px; gap: 10px; }
    .ofl-filters .cmp-track { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
    .ofl-filters .cmp-track select { flex: 1 1 auto; min-width: 0; }
    .ofl-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .ofl-pills::-webkit-scrollbar { display: none; }
    .ofl-sort { width: auto; }
    .ofl-banner { min-height: 96px; }
    .ofl-banner h2 { font-size: 18px; }
    .ofl-ana-table tbody th { min-width: 0; }
    .ofl-rs-table td:nth-child(n) { min-width: 0; }
    .ofl-meter { flex-direction: column-reverse; align-items: flex-end; gap: 4px; width: auto; }
    .ofl-meter .ofl-track { flex: none; width: 56px; min-width: 0; height: 6px; }
    .ofl-meter b { min-width: 0; }
    .ofl-car { display: inline; }
    .ofl-car::before { margin-right: 6px; vertical-align: 1px; }
    .ofl-few { white-space: normal; border-radius: var(--v2-r-md, 6px); }
    .ofl-tracks li { grid-template-columns: 1fr auto; gap: 2px 10px; }
    .ofl-tracks li .ofl-gap { grid-column: 1 / -1; min-width: 0; }
    .ofl-tracks li .ofl-dim { grid-column: 1; grid-row: 2; }
    .ofl-tracks li b { grid-column: 2; grid-row: 1; }
    .ofl-ladder li { margin-right: 0 !important; }
    .ofl-chips .ofl-rkw .ofl-bar { width: 56px; }
}