/* "Så fungerar V64" – page-scoped styles. Sport palette: navy, ice, turquoise, orange, off-white; green only for confirmed-correct. */
.gv {
  --gv-navy: #10203a; --gv-navy-2: #17243d; --gv-ice: #dceaf4; --gv-ice-2: #eef4f9;
  --gv-turq: #1ec2bb; --gv-turq-dark: #0f8f8a; --gv-orange: #f28c28; --gv-orange-dark: #b85f0a;
  --gv-paper: #f9f6f0; --gv-green: #1f8a4c; --gv-line: #d8e2ef;
  background: var(--gv-navy);
  color: var(--navy);
}

/* Hero */
.gv-hero { color: #fff; padding-block: 8px 40px; }
.gv-hero .breadcrumbs a, .gv-hero .breadcrumbs { color: rgba(255, 255, 255, .8); }
.gv-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .35); }
.gv-hero-grid { display: grid; grid-template-columns: 1fr; place-items: center; position: relative; }
.gv-oval { grid-area: 1 / 1; width: 100%; max-width: 980px; height: auto; }
.gv-track-mobile { display: none; width: 100%; max-width: 480px; height: auto; margin-bottom: 8px; }
.gv-hero-copy { grid-area: 1 / 1; text-align: center; max-width: 520px; padding: 24px; }
.gv-hero-copy h1 { color: #fff; font-size: clamp(36px, 5vw, 64px); }
.gv-ingress { color: var(--gv-ice); font-size: clamp(16px, 1.6vw, 19px); }
.gv-result-chips { list-style: none; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gv-result-chips li { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--gv-turq); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.gv-lane { fill: none; stroke: rgba(220, 234, 244, .28); stroke-width: 34; }
.gv-lane-inner { stroke-width: 22; }
.gv-dash { fill: none; stroke: var(--gv-turq); stroke-width: 3; stroke-dasharray: 10 12; opacity: .8; }
.gv-cp circle { fill: var(--gv-navy-2); stroke: var(--gv-turq); stroke-width: 4; }
.gv-cp text { fill: #fff; font: 800 15px/1 var(--font); }
.gv-cp .gv-small { font-size: 11px; font-weight: 600; fill: var(--gv-ice); }

/* Layout: paper article + sticky panel */
.gv-layout > * { min-width: 0; }
.gv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding-bottom: 48px; }
.gv-paper { background: var(--gv-paper); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); max-width: none; }
.gv-paper h2 { margin-top: 44px; padding-top: 10px; border-top: 3px solid var(--gv-ice); }
.gv-paper h2:first-of-type { margin-top: 28px; }
.gv-paper p, .gv-paper li { max-width: 72ch; }
.gv-row { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--gv-ice-2); border: 1px solid var(--gv-line); font: 700 .95em/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.gv-rows { padding-left: 22px; display: grid; gap: 6px; }
.gv-table th.num, .gv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gv-table th { background: var(--gv-ice); }
.gv-table th:first-child, .gv-table td:first-child { padding-left: 16px; }
.gv-table th:last-child, .gv-table td:last-child { padding-right: 16px; }
.gv-table { background: #fff; }
.gv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gv-two > *, .gv-examples > *, .gv-nets > *, .gv-compare > *, .gv-signs > *, .gv-budget > * { min-width: 0; }
.gv-paper .table-scroll { max-width: 100%; }
.gv-steps { padding-left: 24px; display: grid; gap: 8px; }
.gv-steps li::marker { font-weight: 800; color: var(--gv-turq-dark); }

/* Horse chips */
.gv-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.gv-chip { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 50%; background: var(--gv-navy-2); color: #fff; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.gv-chips-outline .gv-chip { background: #fff; color: var(--gv-navy-2); border: 2px solid var(--gv-navy-2); }
.gv-chips-reserve .gv-chip { min-width: 26px; height: 26px; font-size: 12px; background: transparent; color: var(--muted); border: 2px dashed var(--muted); }
.gv-chips-label { font-size: 13px; color: var(--muted); font-weight: 700; margin-right: 2px; }

/* Win zones */
.gv-zones { display: grid; gap: 6px; margin: 16px 0 24px; padding: 14px; border-radius: var(--radius); background: var(--gv-navy-2); }
.gv-finish { height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, #fff 0 14px, var(--gv-navy) 14px 28px); }
.gv-zone { display: flex; align-items: baseline; gap: 14px; padding: 12px 16px; border-radius: 6px; color: #fff; }
.gv-zone strong { font-size: 20px; min-width: 76px; font-variant-numeric: tabular-nums; }
.gv-zone-6 { background: var(--gv-turq-dark); }
.gv-zone-5 { background: rgba(30, 194, 187, .45); }
.gv-zone-4 { background: rgba(30, 194, 187, .22); }

/* Scoreboards / calculator */
.gv-calc { margin: 20px 0; padding: 20px; border-radius: var(--radius); background: var(--gv-navy-2); color: #fff; }
.gv-boards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.gv-board { display: grid; justify-items: center; gap: 4px; min-width: 88px; padding: 10px 8px 8px; border-radius: 8px; background: var(--gv-navy); border: 2px solid var(--gv-turq); }
.gv-board-num { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gv-board-leg { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gv-ice); }
.gv-board-btns { display: none; gap: 6px; }
.js .gv-board-btns { display: flex; }
.gv-calc-btn { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--gv-turq); background: transparent; color: #fff; font-size: 22px; font-weight: 800; line-height: 1; }
.gv-calc-btn:hover { background: rgba(30, 194, 187, .2); }
.gv-calc-btn:focus-visible { outline-color: var(--gv-orange); }
.gv-times { font-size: 26px; font-weight: 800; color: var(--gv-turq); }
.gv-result { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 8px; background: var(--gv-turq); color: var(--gv-navy); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gv-result strong { font-size: 34px; }
.gv-result-eq { color: var(--gv-navy-2); }
.gv-calc-hint { margin: 10px 0 0; text-align: center; color: var(--gv-ice); }
.gv-calc-hint.muted { color: var(--gv-ice); }

/* Track stations */
.gv-track { list-style: none; position: relative; margin: 16px 0 24px; padding-left: 28px; display: grid; gap: 10px; }
.gv-track::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; border-left: 4px dashed var(--gv-turq); }
.gv-station { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); }
.gv-station::before { content: ""; position: absolute; left: -24px; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--gv-turq); transform: translateY(-50%); }
.gv-station-no { font-weight: 800; }
.gv-station-body { display: grid; }
.gv-station-val { font-weight: 700; }
.gv-station-role { font-size: 13px; color: var(--muted); }
.gv-station-acc { text-align: right; display: grid; }
.gv-station-acc-label { font-size: 12px; color: var(--muted); }
.gv-station-acc strong { font-size: 22px; font-variant-numeric: tabular-nums; }

/* Control panel */
.gv-panel { position: sticky; top: 16px; padding: 20px; border-radius: var(--radius); background: var(--gv-ice); border: 1px solid var(--gv-line); }
.gv-panel-mobile { display: none; position: static; margin: 4px 0 6px; }
.gv-panel-title { font-size: 18px; margin-bottom: 12px; }
.gv-panel-list { display: grid; gap: 10px; margin: 0 0 14px; }
.gv-panel-list dt { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gv-panel-list dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gv-type { border: 1px solid var(--gv-line); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
.gv-type legend { font-size: 13px; font-weight: 700; padding: 0 4px; }
.gv-type label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; }

/* Info box (responsible) */
.gv-info { margin: 18px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--gv-ice-2); border-left: 5px solid var(--gv-orange); }
.gv-info p { margin: 0; }

/* Examples grid */
.gv-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.gv-example { padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); }
.gv-example h3 { margin-top: 0; font-size: 18px; }

/* Compare */
.gv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.gv-compare > div { padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); display: grid; gap: 8px; }
.gv-compare-wrong { border-left: 5px solid var(--gv-orange) !important; }
.gv-compare-right { border-left: 5px solid var(--gv-green) !important; }
.gv-x { color: var(--gv-orange-dark); font-weight: 800; }
.gv-check { color: var(--gv-green); font-weight: 800; }

/* Budget gauge */
.gv-budget { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center; margin: 12px 0; }
.gv-gauge { width: 160px; height: 160px; }
.gv-gauge-bg { fill: none; stroke: var(--gv-ice); stroke-width: 14; }
.gv-gauge-fg { fill: none; stroke: var(--gv-turq-dark); stroke-width: 14; stroke-linecap: round; }
.gv-gauge-big { font: 800 22px var(--font); fill: var(--navy); }
.gv-gauge-small { font: 600 12px var(--font); fill: var(--muted); }
.gv-gauge-caption { font-size: 18px; }

/* Networks */
.gv-nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0; }
.gv-nets figure { padding: 12px; border-radius: var(--radius); background: var(--gv-navy-2); color: #fff; }
.gv-nets figcaption { font-weight: 800; margin-bottom: 8px; color: #fff; }
.gv-net { width: 100%; height: auto; }
.gv-net-line { stroke-width: 1.4; }
.gv-net-lit { stroke: var(--gv-turq); opacity: .9; }
.gv-net-dim { stroke: rgba(220, 234, 244, .18); }
.gv-net-node { fill: #fff; }
.gv-net .gv-label, .gv-switch .gv-label { fill: var(--gv-ice); font: 700 12px var(--font); }
.gv-net-note { margin: 8px 0 0; color: var(--gv-ice); }

/* Switch */
.gv-switch { width: 100%; height: auto; margin: 12px 0; border-radius: var(--radius); background: var(--gv-navy-2); }
.gv-rail { fill: none; stroke: var(--gv-ice); stroke-width: 6; stroke-linecap: round; }
.gv-rail-v6 { stroke: var(--gv-orange); }
.gv-cp-v6 circle { stroke: var(--gv-orange); }
.gv-warn rect { fill: var(--gv-orange); }
.gv-warn text { fill: var(--gv-navy); font: 800 12px var(--font); }

/* Correction example */
.gv-correction { margin: 14px 0; padding: 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); }
.gv-goals { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gv-goal { display: grid; gap: 4px; padding: 10px 8px; border-radius: 8px; text-align: center; border: 2px solid var(--gv-line); }
.gv-goal-leg { font-size: 12px; font-weight: 700; color: var(--muted); }
.gv-goal-state { font-weight: 800; }
.gv-goal-right { border-color: var(--gv-green); background: #eef8f1; }
.gv-goal-wrong { border-color: var(--gv-orange); background: #fff2e6; }
.gv-correction-detail { margin-top: 12px; }
.gv-correction-detail p { margin: 6px 0; }
.gv-formula { font-weight: 800; }

/* Jackpot strip */
.gv-jackpot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 14px 0; }
.gv-jp-box { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); }
.gv-jp-label { font-weight: 800; }
.gv-jp-sub { font-size: 14px; color: var(--muted); }
.gv-jp-arrow { display: grid; place-items: center; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--gv-turq-dark); position: relative; min-width: 140px; }
.gv-jp-arrow::after { content: ""; position: absolute; left: 8px; right: 8px; top: 68%; border-top: 3px dashed var(--gv-turq); }

/* Signs */
.gv-signs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.gv-sign { padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--gv-line); border-top: 6px solid var(--gv-navy-2); }
.gv-sign h3 { margin: 0 0 8px; font-size: 17px; }
.gv-sign p { margin: 4px 0; font-size: 15px; }
.gv-sign-wrong { color: var(--gv-orange-dark); }
.gv-sign-right { color: var(--gv-green); }

/* Checklist */
.gv-checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.gv-checklist li { position: relative; padding-left: 28px; }
.gv-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--gv-turq-dark); }

@media (max-width: 1024px) {
  .gv-layout { grid-template-columns: 1fr; }
  .gv-panel:not(.gv-panel-mobile) { display: none; }
  .gv-panel-mobile { display: block; }
}
@media (max-width: 760px) {
  .gv-oval { display: none; }
  .gv-track-mobile { display: block; }
  .gv-hero-grid { grid-template-columns: 1fr; }
  .gv-hero-copy { grid-area: auto; padding: 8px 0 0; }
  .gv-two, .gv-examples, .gv-compare, .gv-nets, .gv-signs, .gv-checklist { grid-template-columns: 1fr; }
  .gv-budget { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gv-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gv-jackpot { grid-template-columns: 1fr; }
  .gv-jp-arrow { min-height: 56px; }
  .gv-jp-arrow::after { left: 40%; right: 40%; top: 80%; }
  .gv-station { grid-template-columns: 64px minmax(0, 1fr); }
  .gv-station-acc { grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .gv-board { min-width: 0; flex: 1 1 28%; }
  .gv-times { display: none; }
  .gv-result { font-size: 18px; }
  .gv-result strong { font-size: 28px; }
}