/* "Kusk och tränare i V64-startlistan" – two work zones. Trainer zone: deep forest green. Driver zone: dark cobalt.
   Warm sand backgrounds, burnt orange only for the start line, kuskbyte and tactical decision points, graphite text, bone cards. */
.ku {
  --ku-green: #1f4d3a; --ku-green-2: #2c6b50; --ku-green-3: #e3efe8;
  --ku-blue: #1e3a8a; --ku-blue-2: #2a4fb0; --ku-blue-3: #e2e8f8;
  --ku-sand: #efe6d6; --ku-sand-2: #f7f1e6; --ku-orange: #c2561f; --ku-orange-2: #f6e4d8;
  --ku-graphite: #23272e; --ku-bone: #fbf8f1; --ku-line: #d9cfbd;
  background: var(--ku-sand);
  color: var(--ku-graphite);
}
.ku h1, .ku h2, .ku h3, .ku h4 { color: var(--ku-graphite); letter-spacing: -.01em; }
.ku h2 { margin-top: 52px; }
.ku h3 { margin-top: 22px; font-size: 19px; }
.ku a { color: var(--link); }
.ku .is-trainer h2, .ku .is-trainer h3 { color: var(--ku-green); }
.ku .is-driver h2, .ku .is-driver h3 { color: var(--ku-blue); }

/* Hero */
.ku-hero { background: linear-gradient(90deg, var(--ku-green) 0 50%, var(--ku-blue) 50% 100%); color: #fff; padding-block: 8px 24px; }
.ku-hero .breadcrumbs, .ku-hero .breadcrumbs a { color: rgba(255, 255, 255, .85); }
.ku-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .4); }
.ku-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 56px); margin: 12px 0 4px; text-align: center; }
.ku-tagline { text-align: center; font-size: clamp(16px, 1.6vw, 21px); font-weight: 600; margin: 0 0 14px; color: #f3ead9; }
.ku-hero-fig { position: relative; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.ku-fig { width: 100%; height: auto; display: block; margin: 14px 0; border-radius: 10px; }
.ku-fig-hero { margin: 0; }
.ku-hero-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; font-weight: 700; font-size: 14px; }
.ku-hero-labels span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); text-align: center; }
.ku-hero-sub { text-align: center; font-weight: 800; font-size: clamp(16px, 1.5vw, 20px); margin: 14px 0 0; color: #fff; }
.ku-h-left { fill: #244f3d; }
.ku-h-right { fill: #23408f; }
.ku-h-stall path, .ku-h-trainer path, .ku-h-journal path, .ku-h-harness path, .ku-h-feed path, .ku-h-cal path, .ku-h-curve path { fill: none; stroke: #d9e6dd; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ku-h-trainer circle { fill: #d9e6dd; }
.ku-h-journal rect, .ku-h-feed rect, .ku-h-cal rect { fill: rgba(255, 255, 255, .1); stroke: #d9e6dd; stroke-width: 3; }
.ku-h-cal .ku-h-cal-day { fill: var(--ku-orange); stroke: none; }
.ku-h-curve path { stroke: #b5e0c4; stroke-width: 3; }
.ku-h-curve .ku-h-axis { stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.ku-horse path { fill: #f3ead9; stroke: #f3ead9; stroke-width: 2; stroke-linejoin: round; }
.ku-horse .ku-horse-leg, .ku-horse .ku-horse-tail { fill: none; stroke: #f3ead9; stroke-width: 5; stroke-linecap: round; }
.ku-horse-blue path { fill: #dbe4fb; stroke: #dbe4fb; }
.ku-horse-blue .ku-horse-leg, .ku-horse-blue .ku-horse-tail { stroke: #dbe4fb; }
.ku-h-startline { fill: var(--ku-orange); }
.ku-h-startlbl, .ku-h-small { fill: #fff; font: 700 12px/1 var(--font); }
.ku-h-startlbl { fill: #ffd9c4; }
.ku-h-track { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 22; stroke-linecap: round; }
.ku-h-comp { fill: #c7d2f5; }
.ku-h-sulky circle, .ku-h-sulky rect { fill: #dbe4fb; }
.ku-h-sulky path { fill: none; stroke: #dbe4fb; stroke-width: 4; stroke-linecap: round; }
.ku-h-arrows path { fill: none; stroke: #fff; stroke-width: 3; }
.ku-fig-hero marker path { fill: #fff; }
.ku-fig-hero marker.ku-marker-o path { fill: var(--ku-orange); }
.ku-h-attack { fill: none; stroke: #f08a55; stroke-width: 4; stroke-dasharray: 10 8; }
.ku-h-speed { fill: rgba(255, 255, 255, .3); }
.ku-h-speed.is-on { fill: #fff; }
.ku-h-spar circle { fill: #fff; }
.ku-h-spar text { fill: var(--ku-blue); font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums; }

/* Paper */
.ku-layout { padding-block: 24px 48px; }
.ku-paper { background: var(--ku-sand-2); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; border: 1px solid var(--ku-line); }
.ku-paper p, .ku-paper li { max-width: 72ch; }
.ku-paper ul + p, .ku-paper ol + p, .ku-paper .table-scroll + p, .ku-paper .ku-fig + p { margin-top: 12px; }
.ku-ingress { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; }
.ku-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.ku-fiction { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--ku-sand); border: 1px dashed var(--ku-line); margin: 8px 0; }
.ku-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.ku-two > * { min-width: 0; }
.ku-card { padding: 14px 16px; border-radius: 8px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-card h3 { margin-top: 0; }
.ku-paper .data-table th { background: var(--ku-sand); }
.ku-paper .data-table td, .ku-paper .data-table th { border-bottom: 1px solid var(--ku-line); }
.ku-chip { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ku-graphite); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }

/* Zones */
.ku-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.ku-zone { padding: 4px 16px 14px; border-radius: 10px; border-left: 8px solid; background: var(--ku-bone); }
.ku-zone.is-trainer { border-color: var(--ku-green); background: var(--ku-green-3); }
.ku-zone.is-driver { border-color: var(--ku-blue); background: var(--ku-blue-3); }
.ku-zone-wide { margin-top: 44px; padding: 4px 18px 18px; }
.ku-zone-wide h2 { margin-top: 12px; }

/* Responsibility infographic */
.ku-resp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 14px 0; }
.ku-resp-card { position: relative; padding: 16px 16px 30px; border-radius: 10px; color: #fff; }
.ku-resp-card.is-trainer { background: var(--ku-green); }
.ku-resp-card.is-driver { background: var(--ku-blue); }
.ku-resp-card h3, .ku .ku-resp-card h3 { color: #fff; margin: 8px 0 6px; }
.ku-resp-card ul { margin: 0; padding-left: 18px; }
.ku-resp-card li { font-weight: 600; }
.ku-ico { width: 32px; height: 32px; display: block; }
.ku-ico path, .ku-ico circle, .ku-ico rect { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ku-resp-arrow { position: absolute; left: 50%; bottom: -14px; width: 0; height: 0; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid; }
.ku-resp-card.is-trainer .ku-resp-arrow { border-top-color: var(--ku-green); }
.ku-resp-card.is-driver .ku-resp-arrow { border-top-color: var(--ku-blue); }
.ku-resp-result { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 2px solid var(--ku-graphite); }
.ku-resp-result h3 { margin: 0; }
.ku-resp-result p { margin: 0; grid-column: 2; }
.ku-resp-result .ku-ico { grid-row: 1 / 3; width: 40px; height: 40px; }

/* Relay circle */
.ku-relay { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 18px; align-items: center; margin: 14px 0; padding: 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-fig-relay { margin: 0; }
.ku-relay-ring { fill: none; stroke: var(--ku-line); stroke-width: 2; }
.ku-relay-arc { fill: none; stroke: var(--ku-green-2); stroke-width: 4; stroke-linecap: round; }
.ku-fig-relay marker path { fill: var(--ku-green-2); }
.ku-relay-node circle { fill: var(--ku-green); }
.ku-relay-node.is-driver circle { fill: var(--ku-blue); }
.ku-relay-node text { fill: #fff; font: 800 18px/1 var(--font); }
.ku-relay-center { fill: var(--ku-graphite); font: 700 14px/1 var(--font); }
.ku-relay-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ku-relay-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--ku-sand-2); font-weight: 600; }
.ku-relay-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ku-green); color: #fff; font-weight: 800; }
.ku-relay-list li:nth-child(3) .ku-relay-n { background: var(--ku-blue); }

/* Kuskbyte card */
.ku-byte { margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-byte-head, .ku-byte-rows li { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ku-byte-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 6px; }
.ku-byte-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ku-byte-rows li span { padding: 10px 12px; border-radius: 8px; background: var(--ku-sand-2); font-weight: 600; border: 1px solid var(--ku-line); }
.ku-byte-lbl { margin: 12px 0 0; text-align: center; font-weight: 800; color: var(--ku-orange); border-top: 2px solid var(--ku-orange); padding-top: 10px; }

/* Statistics */
.ku-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-stats > .small { grid-column: 1 / -1; margin: 0; }
.ku-stat { display: grid; gap: 6px; }
.ku-stat-pct { font-size: 34px; font-weight: 800; line-height: 1; }
.ku-dots { display: grid; gap: 3px; }
.ku-dots-10 { grid-template-columns: repeat(10, 14px); }
.ku-dots-100 { grid-template-columns: repeat(20, 12px); }
.ku-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ku-line); }
.ku-dots-10 .ku-dot { width: 14px; height: 14px; }
.ku-dot.is-win { background: var(--ku-green); }
.ku-stat-bar { display: block; height: 10px; border-radius: 5px; background: var(--ku-sand); overflow: hidden; }
.ku-stat-fill { display: block; height: 100%; width: 30%; background: var(--ku-green); }
.ku-stat-fill.is-thin { height: 40%; margin-top: 3px; opacity: .6; }
.ku-stat-fill.is-wide { height: 100%; }

/* Comment card */
.ku-comment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-comment-field { padding: 12px 14px; border-radius: 8px; background: var(--ku-sand-2); border-top: 4px solid var(--ku-green); }
.ku-comment-field.is-view { border-top-color: var(--ku-blue); }
.ku-comment-field p { margin: 0; font-weight: 600; font-style: italic; }
.ku-comment-note { grid-column: 1 / -1; margin: 0; font-weight: 700; }

/* Tactics map */
.ku-tactics { margin: 14px 0; }
.ku-tac-track { fill: var(--ku-blue-2); }
.ku-tac-infield { fill: var(--ku-blue-3); }
.ku-tac-dir { fill: none; stroke: var(--ku-orange); stroke-width: 3; }
.ku-fig-tactics marker path { fill: var(--ku-orange); }
.ku-pos circle { fill: #fff; stroke: var(--ku-blue); stroke-width: 3; }
.ku-pos text { fill: var(--ku-blue); font: 800 15px/1 var(--font); }
.ku-tac-lbl { fill: var(--ku-graphite); font: 700 12px/1 var(--font); }
.ku-pos-cards { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ku-pos-card { position: relative; padding: 12px 12px 12px 12px; border-radius: 8px; background: var(--ku-bone); border: 1px solid var(--ku-line); border-top: 4px solid var(--ku-blue); }
.ku-pos-card h4 { margin: 6px 0 8px; font-size: 15px; }
.ku-pos-card p { margin: 0 0 6px; font-size: 14px; }
.ku-pos-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ku-blue); color: #fff; font-weight: 800; }

/* Example scenes */
.ku-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 6px; }
.ku-scene { padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); border-top: 8px solid var(--ku-orange); }
.ku-scene.is-pair { border-top-color: var(--ku-blue); }
.ku-scene.is-stall { border-top-color: var(--ku-green); }
.ku-scene h3 { margin-top: 6px; }
.ku-scene-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ku-verdict { font-weight: 700; padding: 10px 12px; border-radius: 8px; background: var(--ku-sand-2); }
.ku-meters, .ku-thermos, .ku-pair { margin: 12px 0; padding: 12px; border-radius: 8px; background: var(--ku-sand-2); }
.ku-meter { display: grid; gap: 4px; margin-bottom: 10px; }
.ku-meter-bar { display: block; height: 14px; border-radius: 7px; background: var(--ku-line); overflow: hidden; }
.ku-meter-fill { display: block; height: 100%; background: var(--ku-orange); }
.ku-meter-fill.is-low { width: 30%; }
.ku-meter-fill.is-high { width: 85%; }
.ku-meter-lbl, .ku-thermo-lbl { font-weight: 800; }
.ku-thermos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ku-thermos > .small { grid-column: 1 / -1; }
.ku-thermo { display: grid; gap: 6px; justify-items: center; text-align: center; }
.ku-thermo-tube { display: block; width: 28px; height: 110px; border-radius: 14px; background: var(--ku-line); position: relative; overflow: hidden; }
.ku-thermo-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ku-green); }
.ku-thermo-fill.is-hog { height: 85%; }
.ku-thermo-fill.is-osaker { height: 40%; background: repeating-linear-gradient(135deg, var(--ku-blue) 0 6px, var(--ku-blue-3) 6px 12px); }
.ku-pair-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.ku-pair-node { display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--ku-green); }
.ku-pair-node.is-driver { color: var(--ku-blue); }
.ku-pair-line { height: 4px; border-radius: 2px; background: var(--ku-orange); }
.ku-tiles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ku-tile { display: grid; gap: 2px; padding: 8px; border-radius: 6px; background: var(--ku-bone); border: 1px solid var(--ku-line); font-size: 12px; text-align: center; }
.ku-tile-plac { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Mistakes */
.ku-mistakes > div { background: var(--ku-bone); border-left-color: var(--ku-orange); }

/* Checklist */
.ku-checklist { margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--ku-bone); border: 1px solid var(--ku-line); }
.ku-check-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ku-check-progress { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.ku-check-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ku-check-group { padding: 12px 14px; border-radius: 8px; background: var(--ku-sand-2); border: 1px solid var(--ku-line); color: var(--ku-green); }
.ku-check-group h3 { margin: 6px 0 2px; color: var(--ku-green); }
.ku-check-group .small { color: var(--muted); }
.ku-check-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; color: var(--ku-graphite); }
.ku-check-item { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; min-height: 44px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ku-check-item:hover { background: var(--ku-sand); }
.ku-check-item input { width: 22px; height: 22px; margin: 0; accent-color: var(--ku-green); }
.ku-check-item input:checked + span { text-decoration: line-through; color: var(--muted); }

/* Model */
.ku-model { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: m; }
.ku-model li { counter-increment: m; padding: 12px 14px; border-radius: 8px; background: var(--ku-bone); border: 1px solid var(--ku-line); border-top: 4px solid var(--ku-graphite); }
.ku-model li::before { content: counter(m); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ku-graphite); color: #fff; font-weight: 800; font-size: 13px; }
.ku-model li.is-driver { border-top-color: var(--ku-blue); } .ku-model li.is-driver::before { background: var(--ku-blue); }
.ku-model li.is-trainer { border-top-color: var(--ku-green); } .ku-model li.is-trainer::before { background: var(--ku-green); }
.ku-model h3 { margin: 6px 0 4px; font-size: 16px; }
.ku-model p { margin: 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .ku-check-item, .ku-meter-fill { transition: none; } }
@media (max-width: 960px) {
  .ku-scenes { grid-template-columns: 1fr; }
  .ku-pos-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ku-model { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ku-hero h1 { font-size: clamp(26px, 8vw, 36px); }
  .ku-hero { background: var(--ku-green); }
  .ku-fig-hero { display: none; }
  .ku-hero-labels { grid-template-columns: 1fr; }
  .ku-hero-labels .is-driver { background: var(--ku-blue); }
  .ku-two, .ku-zones, .ku-resp, .ku-relay, .ku-stats, .ku-comment, .ku-check-groups, .ku-model, .ku-thermos { grid-template-columns: 1fr; }
  .ku-resp-card { padding-bottom: 16px; }
  .ku-resp-arrow { display: none; }
  .ku-pos-cards { grid-template-columns: 1fr; }
  .ku-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ku-dots-100 { grid-template-columns: repeat(10, 12px); }
  .sp-mistakes.ku-mistakes { grid-template-columns: 1fr; }
  .ku-byte-head { display: none; }
  .ku-byte-rows li { grid-template-columns: 1fr; gap: 4px; margin-bottom: 8px; }
  .ku-byte-rows li span:first-child::before { content: "Föregående start: "; font-weight: 800; color: var(--muted); }
  .ku-byte-rows li span:last-child::before { content: "Aktuell start: "; font-weight: 800; color: var(--muted); }
}