/* "Så läser du en V64-startlista" – layered start-list guide.
   Editorial sport palette: deep dark blue, light steel blue, chalk white, signal orange (late changes),
   cold green (confirmed info), graphite grey (historical data). */
.rl {
  --rl-deep: #0f1f3a; --rl-steel: #cfdcea; --rl-steel-2: #e8eff6; --rl-chalk: #fbfbf8; --rl-orange: #ff7a1a; --rl-orange-dark: #a34a00;
  --rl-green: #167a5a; --rl-graphite: #5b6470; --rl-ice: #8fd3f4; --rl-line: #d8e0ea;
  background: var(--rl-steel-2);
}

/* Hero */
.rl-hero { position: relative; overflow: hidden; background: var(--rl-deep); color: #fff; }
.rl-hero-bg { position: absolute; inset: 0; opacity: .22; pointer-events: none; padding: 24px; }
.rl-hero-bg .rl-card { max-width: 1240px; margin: 0 auto; transform: scale(1.02); }
.rl-hero-inner { position: relative; padding-bottom: 32px; }
.rl-hero .breadcrumbs, .rl-hero .breadcrumbs a { color: rgba(255, 255, 255, .8); }
.rl-hero-panel { max-width: 720px; margin: 8px auto 0; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--rl-chalk); color: var(--navy); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.rl-hero-panel h1 { font-size: clamp(30px, 4.2vw, 52px); }
.rl-ingress { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); }

/* Layout with meter */
.rl-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; padding-block: 24px 48px; }
.rl-layout > * { min-width: 0; }
.rl-paper { background: #fff; border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; }
.rl-paper h2 { margin-top: 44px; padding-top: 10px; border-top: 3px solid var(--rl-steel-2); }
.rl-paper h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.rl-paper p, .rl-paper li { max-width: 72ch; }
.rl-paper .table-scroll { max-width: 100%; }
.rl-card-soft { padding: 16px 18px; border-radius: var(--radius); background: var(--rl-steel-2); border: 1px solid var(--rl-line); }
.rl-card-soft h3 { margin-top: 0; font-size: 17px; }
.rl-card-soft ul { padding-left: 20px; display: grid; gap: 4px; }
.rl-info { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius); background: #eaf6f0; border-left: 5px solid var(--rl-green); font-weight: 700; }
.rl-meter { position: sticky; top: 16px; }
.rl-meter ol { list-style: none; display: grid; gap: 6px; border-left: 3px solid var(--rl-steel); padding-left: 12px; }
.rl-meter li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--rl-graphite); font-size: 13px; position: relative; }
.rl-meter li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--rl-steel); transform: translateY(-50%); }
.rl-meter li.is-current { background: var(--rl-deep); color: #fff; }
.rl-meter li.is-current::before { background: var(--rl-ice); }
.rl-meter-no { font-weight: 800; font-variant-numeric: tabular-nums; }
.rl-meter-label { font-weight: 600; }
.rl-mobile-step { display: none; margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--rl-deep); color: #fff; font-weight: 800; font-size: 14px; }

/* Layer tabs */
.rl-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.rl-tab { min-height: 48px; padding: 8px 6px; border-radius: 8px; border: 2px solid var(--rl-steel); background: rgba(207, 220, 234, .35); color: var(--navy); font-weight: 800; font-size: 14px; }
.rl-tab:hover { background: var(--rl-steel-2); }
.rl-tab[aria-selected="true"] { background: var(--rl-deep); color: #fff; border-color: var(--rl-ice); box-shadow: inset 0 -4px 0 var(--rl-ice); }

/* Race card */
.rl-card { border: 1px solid var(--rl-line); border-radius: var(--radius); background: var(--rl-chalk); overflow: hidden; }
.rl-fiction { margin: 0; padding: 8px 16px; background: var(--rl-steel-2); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--rl-graphite); }
.rl-head { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; background: var(--rl-deep); color: #fff; }
.rl-head-item { display: grid; gap: 2px; }
.rl-head .rl-k { color: var(--rl-steel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.rl-head .rl-v { font-weight: 800; font-size: 16px; }
.rl-rows { list-style: none; }
.rl-row { border-top: 1px solid var(--rl-line); }
.rl-row-main { display: grid; grid-template-columns: 44px minmax(110px, 1.2fr) 52px 84px minmax(140px, 1fr) 72px 96px minmax(110px, 1fr) 44px; gap: 8px; align-items: center; padding: 10px 12px; }
.rl-row-main .rl-c-led, .rl-row-main .rl-c-senast, .rl-row-main .rl-c-seger, .rl-row-main .rl-odds { display: none; }
@media (min-width: 1500px) {
  .rl-row-main { grid-template-columns: 44px minmax(120px, 1.4fr) 56px 72px 88px minmax(150px, 1.2fr) 72px 72px 96px 60px minmax(120px, 1fr) 80px 44px; }
  .rl-row-main .rl-c-led, .rl-row-main .rl-c-senast, .rl-row-main .rl-c-seger, .rl-row-main .rl-odds { display: grid; }
}
.rl-nr { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--rl-deep); color: #fff; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.rl-name { font-weight: 800; font-size: 17px; }
.rl-name.is-struck { text-decoration: line-through; color: var(--rl-graphite); }
.rl-status-struck, .rl-upd { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--rl-orange); color: var(--rl-deep); font-size: 12px; font-weight: 800; text-decoration: none; vertical-align: middle; }
.rl-status-struck { background: #ffe0cc; color: var(--rl-orange-dark); }
.rl-cell { display: grid; gap: 1px; min-width: 0; }
.rl-k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--rl-graphite); font-weight: 700; }
.rl-v { font-weight: 700; font-size: 14px; }
.rl-l3 .rl-v { font-weight: 600; font-size: 13px; color: var(--rl-graphite); }
.rl-form { display: inline-flex; gap: 3px; }
.rl-form-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--rl-steel-2); border: 1px solid var(--rl-line); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.rl-form-1 { background: #e2f3ea; border-color: var(--rl-green); }
.rl-form-0 { color: var(--rl-graphite); }
.rl-form-g { background: #ffe0cc; border-color: var(--rl-orange); color: var(--rl-orange-dark); }
.rl-bar { display: block; height: 6px; border-radius: 3px; background: var(--rl-steel-2); overflow: hidden; }
.rl-bar-fill { display: block; height: 100%; background: var(--rl-deep); }
.rl-w38 { width: 38%; } .rl-w24 { width: 24%; } .rl-w17 { width: 17%; } .rl-w11 { width: 11%; } .rl-w6 { width: 6%; } .rl-w4 { width: 4%; }
.rl-odds .rl-v { color: var(--rl-green); }
.rl-more { justify-self: end; }
.rl-details { padding: 0 12px 14px 64px; }
.rl-details dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--rl-steel-2); }
.rl-details dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-graphite); font-weight: 700; }
.rl-details dd { margin: 0; font-weight: 700; font-size: 14px; }
.rl-layer-notes { padding: 12px 16px; border-top: 1px solid var(--rl-line); background: #fff; }
.rl-layer-notes p, .rl-layer-notes div { margin: 0; font-size: 14px; }
.rl-timeline { list-style: none; display: grid; gap: 4px; margin: 8px 0; }
.rl-timeline li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 6px; background: #fff3ea; border-left: 4px solid var(--rl-orange); }
.rl-timeline time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rl-orange-dark); }
/* Layer dimming (only when JS has set an active layer) */
.js .rl-card[data-layer-active] .rl-row-main [data-layer], .js .rl-card[data-layer-active] .rl-head, .js .rl-card[data-layer-active] .rl-layer-notes > * { transition: opacity .18s; }
.js .rl-card[data-layer-active="lopp"] .rl-row-main [data-layer]:not([data-layer~="lopp"]) { opacity: .3; }
.js .rl-card[data-layer-active="start"] .rl-row-main [data-layer]:not([data-layer~="start"]) { opacity: .3; }
.js .rl-card[data-layer-active="form"] .rl-row-main [data-layer]:not([data-layer~="form"]) { opacity: .3; }
.js .rl-card[data-layer-active="kapacitet"] .rl-row-main [data-layer]:not([data-layer~="kapacitet"]) { opacity: .3; }
.js .rl-card[data-layer-active="streck"] .rl-row-main [data-layer]:not([data-layer~="streck"]) { opacity: .3; }
.js .rl-card[data-layer-active="uppdateringar"] .rl-row-main [data-layer]:not([data-layer~="uppdateringar"]) { opacity: .3; }
.js .rl-card:not([data-layer-active="lopp"]) .rl-head { opacity: .55; }
.js .rl-card[data-layer-active="lopp"] .rl-layer-notes > *:not([data-layer="lopp"]),
.js .rl-card[data-layer-active="start"] .rl-layer-notes > *:not([data-layer="start"]),
.js .rl-card[data-layer-active="form"] .rl-layer-notes > *:not([data-layer="form"]),
.js .rl-card[data-layer-active="kapacitet"] .rl-layer-notes > *:not([data-layer="kapacitet"]),
.js .rl-card[data-layer-active="streck"] .rl-layer-notes > *:not([data-layer="streck"]),
.js .rl-card[data-layer-active="uppdateringar"] .rl-layer-notes > *:not([data-layer="uppdateringar"]) { display: none; }
.js .rl-card:not([data-layer-active="uppdateringar"]) .rl-row .rl-status-struck,
.js .rl-card:not([data-layer-active="uppdateringar"]) .rl-row .rl-upd { opacity: .3; }

/* Figures */
.rl-fig { margin: 14px 0; padding: 12px; border-radius: var(--radius); background: var(--rl-deep); color: #fff; }
.rl-fig svg { width: 100%; height: auto; display: block; }
.rl-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--rl-steel); }
.rl-fig figcaption ul { padding-left: 18px; display: grid; gap: 3px; margin-top: 4px; }
.rl-svg-lane { fill: #1a2f52; stroke: #2f4a78; stroke-width: 2; }
.rl-svg-car { fill: var(--rl-steel); }
.rl-svg-line { stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; }
.rl-svg-num circle { fill: #fff; stroke: var(--rl-ice); stroke-width: 3; }
.rl-svg-num text { fill: var(--rl-deep); font: 800 15px/1 var(--font); }
.rl-svg-struck circle { fill: #ffe0cc; stroke: var(--rl-orange); stroke-dasharray: 4 3; }
.rl-svg-struck text { fill: var(--rl-orange-dark); text-decoration: line-through; }
.rl-svg-volt { fill: none; stroke: #fff; stroke-width: 3; }
.rl-svg-label { font: 700 12px var(--font); fill: var(--rl-steel); }
.rl-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rl-halves > * { min-width: 0; margin: 0; }

/* Distance segments */
.rl-segments { list-style: none; display: grid; gap: 10px; margin: 12px 0 4px; }
.rl-segments li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rl-seg-label { font-weight: 800; }
.rl-seg-track { display: block; height: 14px; border-radius: 7px; background: var(--rl-steel-2); overflow: hidden; }
.rl-seg-fill { display: block; height: 100%; background: var(--rl-deep); border-radius: 7px; }
.rl-seg-34 { width: 34%; } .rl-seg-62 { width: 62%; } .rl-seg-100 { width: 100%; }
.rl-seg-tag { font-size: 13px; color: var(--rl-graphite); font-weight: 700; white-space: nowrap; }

/* Tillägg */
.rl-tillagg { position: relative; display: grid; gap: 8px; margin: 12px 0; padding: 12px 64px 12px 12px; border-radius: var(--radius); background: var(--rl-deep); color: #fff; }
.rl-tl-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; }
.rl-tl-label { font-weight: 800; font-variant-numeric: tabular-nums; }
.rl-tl-label small { display: block; font-weight: 700; color: var(--rl-orange); }
.rl-tl-track { display: flex; gap: 6px; align-items: center; min-height: 40px; border-top: 2px dashed rgba(255, 255, 255, .35); border-bottom: 2px dashed rgba(255, 255, 255, .35); padding: 4px 0; }
.rl-tl-20 { padding-left: 14%; } .rl-tl-40 { padding-left: 28%; }
.rl-tl-goal { position: absolute; right: 14px; top: 12px; bottom: 12px; display: grid; place-items: center; padding: 0 6px; border-left: 4px solid #fff; font-weight: 800; writing-mode: vertical-rl; }
.rl-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; background: #fff; color: var(--rl-deep); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.rl-rank .rl-chip { background: var(--rl-deep); color: #fff; }

/* Ranking */
.rl-rank { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border-radius: var(--radius); background: var(--rl-steel-2); border: 1px solid var(--rl-line); }
.rl-rank-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px dashed var(--rl-steel); }
.rl-rank-label { font-weight: 800; }
.rl-rank-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-rank-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--rl-steel-2); border: 1px solid var(--rl-line); font-weight: 700; font-size: 14px; }

/* Checks */
.rl-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rl-checks > div { min-width: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--rl-steel-2); border: 1px solid var(--rl-line); }
.rl-checks h3 { margin: 0 0 6px; font-size: 16px; }
.rl-checks ul { list-style: none; display: grid; gap: 4px; padding: 0; }
.rl-checks li { position: relative; padding-left: 24px; font-size: 14px; }
.rl-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 3px; border: 2px solid var(--rl-green); }
.rl-mistakes > div { border-left-color: var(--rl-orange); }

@media (max-width: 1024px) {
  .rl-layout { grid-template-columns: 1fr; }
  .rl-meter { display: none; }
  .rl-mobile-step { display: block; }
  .rl-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl-halves, .rl-checks { grid-template-columns: 1fr; }
  .rl-hero-bg { display: none; }
}
@media (max-width: 760px) {
  /* Mobile base row: number, name, spår, form, streck; the rest opens via the disclosure */
  .rl-row-main { grid-template-columns: 40px minmax(0, 1fr) 44px; grid-template-areas: "nr name more" "spar form form" "streck streck streck"; gap: 6px 10px; padding: 10px 12px; }
  .rl-row-main .rl-nr { grid-area: nr; }
  .rl-row-main .rl-name { grid-area: name; }
  .rl-row-main .rl-more { grid-area: more; }
  .rl-row-main .rl-cell { display: none; }
  .rl-row-main .rl-c-spar { display: grid; grid-area: spar; }
  .rl-row-main .rl-c-form { display: grid; grid-area: form; }
  .rl-row-main .rl-streck { display: grid; grid-area: streck; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
  .rl-details { padding-left: 12px; }
  .rl-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-segments li { grid-template-columns: 56px minmax(0, 1fr); }
  .rl-seg-tag { grid-column: 1 / -1; white-space: normal; }
  .rl-tl-row { grid-template-columns: 1fr; }
  .rl-tillagg { padding-right: 44px; }
  .rl-rank-row { grid-template-columns: 1fr; }
  .rl-two, .rl-three { grid-template-columns: 1fr; }
}