/* "Distans och tillägg i V64-lopp" – measuring lab. Palette: dark slate, warm copper, light limestone,
   lime as measuring accent, muted purple for tillägg, white for numbers. Not the blue/terracotta duel palette. */
.di {
  --di-slate: #2b3440; --di-slate-2: #3b4757; --di-copper: #b87333; --di-copper-2: #8f5622; --di-lime: #b5e853; --di-lime-2: #e9f7c9;
  --di-stone: #f3efe6; --di-stone-2: #e6e0d3; --di-purple: #7a6fa0; --di-purple-2: #ece8f5; --di-line: #d3ccbd; --di-ink: #1d232b;
  background: var(--di-stone-2);
  color: var(--di-ink);
}
.di h1, .di h2, .di h3 { color: var(--di-slate); letter-spacing: -.02em; font-weight: 800; }
.di-m, .di-km-time, .di-track-m, .di-lane-lbl, .di-measure text, .di-hist-plac, .di-mark text { font-variant-numeric: tabular-nums; }
.di-m { display: inline-block; font-weight: 800; font-size: 1.15em; color: var(--di-copper-2); }
.di h2 .di-m { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 6px; background: var(--di-slate); color: var(--di-lime); font-size: .8em; vertical-align: middle; }

/* Hero */
.di-hero { background: var(--di-slate); color: #fff; padding-block: 8px 28px; }
.di-hero .breadcrumbs, .di-hero .breadcrumbs a { color: rgba(255, 255, 255, .85); }
.di-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .4); }
.di-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 56px); margin: 12px 0 6px; }
.di-tagline { font-size: clamp(16px, 1.6vw, 21px); color: var(--di-lime); font-weight: 600; margin: 0 0 12px; }
.di-fig { width: 100%; height: auto; display: block; margin: 14px 0; border-radius: 10px; }
.di-fig-hero { max-width: 1040px; }
.di-startline { stroke: #fff; stroke-width: 3; stroke-dasharray: 6 5; }
.di-track rect { fill: var(--di-copper); }
.di-track[data-dist="medel"] rect { fill: #c98a4a; }
.di-track[data-dist="lang"] rect { fill: #d9a066; }
.di-ticks line { stroke: #fff; stroke-width: 2; }
.di-track-lbl { fill: #e2e8f0; font: 700 12px/1 var(--font); }
.di-track-m { fill: #fff; font: 800 15px/1 var(--font); }
.di-finish { stroke: var(--di-lime); stroke-width: 4; }
.di-fig-hero .di-track { transition: opacity .2s; }
.di[data-dist="kort"] .di-fig-hero .di-track:not([data-dist="kort"]), .di[data-dist="medel"] .di-fig-hero .di-track:not([data-dist="medel"]), .di[data-dist="lang"] .di-fig-hero .di-track:not([data-dist="lang"]) { opacity: .35; }

/* Distance switch */
.di-switch-wrap { position: sticky; top: 0; z-index: 5; background: var(--di-stone); border-bottom: 1px solid var(--di-line); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.di-switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 10px; }
.di-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.di-switch .di-k { margin: 0; }
.di-sw { min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 2px solid var(--di-line); background: #fff; color: var(--di-ink); font: 700 15px/1.2 var(--font); cursor: pointer; transition: background .2s, border-color .2s, color .2s; display: inline-flex; align-items: baseline; gap: 6px; }
.di-sw small { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.di-sw[aria-pressed="true"] { background: var(--di-slate); border-color: var(--di-slate); color: #fff; }
.di-sw[aria-pressed="true"] small { color: var(--di-lime); }
.di-sw:hover { border-color: var(--di-slate); }
.di-sw-status { margin: 0 0 0 auto; color: var(--muted); }
.di[data-dist="kort"] .di-dist:not([data-dist="kort"]), .di[data-dist="medel"] .di-dist:not([data-dist="medel"]), .di[data-dist="lang"] .di-dist:not([data-dist="lang"]) { opacity: .6; }
.di[data-dist="kort"] .di-dist[data-dist="kort"], .di[data-dist="medel"] .di-dist[data-dist="medel"], .di[data-dist="lang"] .di-dist[data-dist="lang"] { outline: 3px solid var(--di-lime); outline-offset: 4px; }

/* Paper */
.di-layout { padding-block: 24px 48px; }
.di-paper { background: var(--di-stone); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; border: 1px solid var(--di-line); }
.di-paper h2 { margin-top: 44px; }
.di-paper p, .di-paper li { max-width: 72ch; }
.di-paper ul + p, .di-paper ol + p, .di-paper .table-scroll + p, .di-paper .di-fig + p { margin-top: 12px; }
.di-ingress { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; }
.di-fiction-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--di-stone-2); border: 1px dashed var(--di-line); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.di-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.di-two > * { min-width: 0; }
.di-card { padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--di-line); }
.di-card h2, .di-card h3 { margin-top: 0; }
.di-dist { margin-top: 36px; padding: 4px 18px 18px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); transition: opacity .2s; }
.di-tillagg { margin-top: 36px; padding: 4px 18px 18px; border-radius: 10px; background: var(--di-purple-2); border-left: 8px solid var(--di-purple); }
.di-tillagg h2 { color: #4d4470; }
.di-code { margin: 8px 0; }
.di-code code { font-size: 1.1em; }

/* Energy band */
.di-band-wrap { margin: 14px 0; }
.di-band { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; min-height: 64px; }
.di-seg { flex: 1 1 0; display: grid; place-items: center; padding: 8px; border-radius: 6px; background: var(--di-slate-2); color: #fff; font-weight: 700; font-size: 14px; text-align: center; transition: flex-grow .3s; min-width: 0; }
.di-seg-start { background: var(--di-copper); } .di-seg-pos { background: var(--di-copper-2); } .di-seg-mitt { background: var(--di-slate-2); } .di-seg-avanc { background: var(--di-purple); } .di-seg-upplopp { background: var(--di-slate); }
.di[data-dist="kort"] .di-band-main .di-seg-start, .di[data-dist="kort"] .di-band-main .di-seg-pos { flex-grow: 2.2; }
.di[data-dist="kort"] .di-band-main .di-seg-mitt { flex-grow: .7; }
.di[data-dist="medel"] .di-band-main .di-seg-mitt, .di[data-dist="medel"] .di-band-main .di-seg-avanc { flex-grow: 1.5; }
.di[data-dist="lang"] .di-band-main .di-seg-mitt { flex-grow: 2.6; }
.di[data-dist="lang"] .di-band-main .di-seg-avanc { flex-grow: 1.6; }
.di[data-dist="lang"] .di-band-main .di-seg-start { flex-grow: .6; }
.di-band-lang .di-seg-mitt { flex-grow: 2.6; } .di-band-lang .di-seg-avanc { flex-grow: 1.6; } .di-band-lang .di-seg-start { flex-grow: .6; }

/* Ruler */
.di-ruler-body { fill: var(--di-slate); }
.di-minor line { stroke: #fff; stroke-width: 1; }
.di-mark line { stroke: var(--di-copper-2); stroke-width: 3; }
.di-mark text { fill: var(--di-ink); font: 700 12px/1 var(--font); }
.di-fig-ruler, .di-fig-hist { background: var(--di-stone-2); padding: 6px; }

/* Profiles */
.di-profiles { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.di-profile { padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); border-top: 6px solid var(--di-copper); transition: opacity .2s; }
.di-profile[data-dist="medel"] { border-top-color: var(--di-slate-2); }
.di-profile[data-dist="lang"] { border-top-color: var(--di-purple); }
.di-profile h3 { margin-top: 0; }
.di-profile-sub { font-weight: 600; color: var(--muted); }
.di-profile dl { margin: 0; display: grid; gap: 6px; }
.di-profile dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.di-profile dd { margin: 0; font-weight: 600; }
.di[data-dist="kort"] .di-profile:not([data-dist="kort"]), .di[data-dist="medel"] .di-profile:not([data-dist="medel"]), .di[data-dist="lang"] .di-profile:not([data-dist="lang"]) { opacity: .45; }

/* Chase */
.di-sand { fill: var(--di-stone-2); }
.di-lane rect { fill: #cfc7b8; }
.di-lane-start { stroke: var(--di-purple); stroke-width: 5; }
.di-lane-lbl { fill: var(--di-ink); font: 700 12px/1 var(--font); }
.di-measure line { stroke: var(--di-slate); stroke-width: 2; }
.di-measure text { fill: var(--di-slate); font: 800 13px/1 var(--font); }
.di-finish-flag rect { fill: var(--di-slate); }
.di-finish-flag text { fill: var(--di-slate); font: 800 12px/1 var(--font); }
.di-arrow-dir { fill: none; stroke: var(--di-copper-2); stroke-width: 3; }
.di-fig-chase marker path { fill: var(--di-copper-2); }
.di-horse circle { fill: var(--di-purple); }
.di-horse text { fill: #fff; font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.di-fig-chase-v { display: none; max-width: 320px; margin-inline: auto; }

/* Scale */
.di-scale { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 14px; align-items: end; margin: 14px 0; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); }
.di-pan { padding: 12px 14px; border-radius: 10px 10px 4px 4px; background: var(--di-stone-2); border-bottom: 6px solid var(--di-slate); display: grid; gap: 4px; }
.di-pan .di-k { margin: 0; }
.di-fulcrum { position: relative; width: 120px; height: 70px; }
.di-beam { position: absolute; left: -60px; right: -60px; top: 0; height: 6px; background: var(--di-slate); border-radius: 3px; }
.di-post { position: absolute; left: 50%; top: 0; width: 8px; height: 70px; margin-left: -4px; background: var(--di-copper); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.di-factors { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--di-line); }
.di-factors ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.di-factors li { padding: 6px 12px; border-radius: 999px; background: var(--di-lime-2); font-weight: 700; font-size: 14px; }
.di-scale .small { grid-column: 1 / -1; margin: 0; }

/* Traffic */
.di-slate { fill: var(--di-slate); }
.di-rail { stroke: #fff; stroke-width: 3; }
.di-field-h { fill: #cbd5e1; }
.di-path path { fill: none; stroke-width: 4; stroke-linecap: round; }
.di-path-inner path { stroke: var(--di-lime); }
.di-path-second path { stroke: #fff; stroke-dasharray: 10 8; }
.di-path-outer path { stroke: #f6c177; stroke-dasharray: 2 8; stroke-width: 5; }
.di-path-third path { stroke: #c9b8ff; stroke-dasharray: 22 10; }
.di-path-lbl text { fill: #e2e8f0; font: 700 12px/1 var(--font); }
.di-lbl-col { fill: rgba(255, 255, 255, .08); }
.di-legend { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; }
.di-legend li { display: flex; align-items: center; gap: 8px; }
.di-leg { display: inline-block; width: 44px; height: 0; border-top: 4px solid var(--di-slate); }
.di-leg-second { border-top-style: dashed; }
.di-leg-outer { border-top-style: dotted; border-top-width: 5px; border-color: var(--di-copper); }
.di-leg-third { border-top-style: dashed; border-color: var(--di-purple); }

/* Tempo */
.di-tempo { margin: 14px 0; padding: 14px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); }
.di-tempo-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.di-tempo-out { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--di-lime-2); }

/* Frames (sprint example) */
.di-frames { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.di-frames li { display: grid; gap: 6px; }
.di-frame { display: block; aspect-ratio: 3 / 2; border-radius: 8px; background: var(--di-slate); overflow: hidden; }
.di-frame svg { width: 100%; height: 100%; display: block; }
.di-frame .f-car { fill: #cbd5e1; }
.di-frame .f-wing, .di-frame .f-curve { fill: none; stroke: #e2e8f0; stroke-width: 2.5; stroke-linecap: round; }
.di-frame .f-finish { stroke: var(--di-lime); stroke-width: 3; stroke-dasharray: 4 3; }
.di-frame .f-chip { fill: #fff; }
.di-frame .f-chip.is-hot { fill: var(--di-lime); }
.di-frame .f-lbl { fill: #e2e8f0; font: 700 9px/1 var(--font); }
.di-frame-lbl { font-weight: 700; font-size: 14px; text-align: center; }

/* History */
.di-history { margin: 14px 0; padding: 14px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); }
.di-hist line { stroke: var(--di-copper-2); stroke-width: 2; }
.di-hist circle { fill: var(--di-slate); }
.di-hist-plac { fill: #fff; font: 800 15px/1 var(--font); }
.di-hist-meta { fill: var(--di-ink); font: 600 10px/1 var(--font); }
.di-hist { transition: opacity .2s; }
.di[data-dist="kort"] .di-hist:not([data-dist="kort"]), .di[data-dist="medel"] .di-hist:not([data-dist="medel"]), .di[data-dist="lang"] .di-hist:not([data-dist="lang"]) { opacity: .3; }
.di[data-dist="kort"] .di-hist[data-dist="kort"] circle, .di[data-dist="medel"] .di-hist[data-dist="medel"] circle, .di[data-dist="lang"] .di-hist[data-dist="lang"] circle { fill: var(--di-copper); }
.di-hist-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.di-hist-list li { display: grid; grid-template-columns: 90px 1fr 1fr 1fr; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--di-stone); font-size: 14px; transition: opacity .2s; }
.di-hist-list li span:first-child { font-weight: 800; }
.di[data-dist="kort"] .di-hist-list li:not([data-dist="kort"]), .di[data-dist="medel"] .di-hist-list li:not([data-dist="medel"]), .di[data-dist="lang"] .di-hist-list li:not([data-dist="lang"]) { opacity: .45; }
.di[data-dist="kort"] .di-hist-list li[data-dist="kort"], .di[data-dist="medel"] .di-hist-list li[data-dist="medel"], .di[data-dist="lang"] .di-hist-list li[data-dist="lang"] { background: var(--di-lime-2); }

/* Km card */
.di-km { margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--di-slate); color: #fff; }
.di-km .di-k { color: #cbd5e1; margin-top: 0; }
.di-km-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.di-km-item { padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .08); display: grid; gap: 4px; }
.di-km-time { font-size: clamp(30px, 4vw, 44px); font-weight: 800; color: var(--di-lime); line-height: 1; }
.di-km-item details { margin-top: 6px; }
.di-km-item summary { cursor: pointer; font-weight: 700; color: #fff; }
.di-km-item dl { margin: 8px 0 0; display: grid; gap: 4px; }
.di-km-item dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; font-weight: 700; }
.di-km-item dd { margin: 0; }
.di-km-foot { font-weight: 700; font-size: 17px; margin: 12px 0 4px; color: #fff; }
.di-km .small { color: #cbd5e1; }

/* Decision */
.di-decision { margin: 14px 0; padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--di-line); }
.di-dec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.di-dec-list li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--di-stone); font-weight: 600; font-size: 17px; }
.di-dec-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--di-slate); color: var(--di-lime); font-weight: 800; }
.di-dec-labels { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.di-dec-labels li { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid; }
.di-dec-labels .is-pos { border-color: #2f7d4a; color: #1f5a34; background: #e6f4ea; }
.di-dec-labels .is-unsure { border-color: var(--di-copper); color: var(--di-copper-2); background: #fbefe2; }
.di-dec-labels .is-risk { border-color: #a63d2a; color: #7d2a1b; background: #f8e3de; }

.di-mistakes > div { background: #fff; border-left-color: var(--di-copper); }
.di-check-tillagg { border-left: 6px solid var(--di-purple); }

@media (prefers-reduced-motion: reduce) {
  .di-seg, .di-sw, .di-dist, .di-profile, .di-hist, .di-hist-list li, .di-fig-hero .di-track { transition: none; }
}
@media (max-width: 900px) {
  .di-profiles { grid-template-columns: 1fr; }
  .di-legend { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .di-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .di-two, .di-km-grid, .di-frames { grid-template-columns: 1fr; }
  .di-band { flex-direction: column; min-height: 0; }
  .di-seg { min-height: 40px; }
  .di-fig-chase { display: none; }
  .di-fig-chase-v { display: block; }
  .di-scale { grid-template-columns: 1fr; }
  .di-fulcrum { display: none; }
  .di-hist-list li { grid-template-columns: 1fr 1fr; }
  .di-sw-status { margin-left: 0; width: 100%; }
  .sp-mistakes.di-mistakes { grid-template-columns: 1fr; }
  .di h2 .di-m { display: block; width: max-content; margin: 0 0 6px; }
  .di-track-lbl { font-size: 17px; }
  .di-track-m { font-size: 20px; }
  .di-path-lbl text, .di-lane-lbl, .di-measure text { font-size: 15px; }
}