/* Kundvyns stil. Samma uttryck som prototypen (docs/kundvy-prototyp.html),
   men med systemets typsnitt: ett typsnitt från Google hade lämnat kundens
   adress till Google vid varje sidvisning. Inga inline-stilar finns, så CSP:n
   kan vara style-src 'self'. */
:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --ink: #121720;
  --muted: #5a6474;
  --line: #e1e6ed;
  --accent: #1c5cab;
  --series: #2a78d6;
  --series-soft: #b7d3f6;
  --okant: #c9d1dc;
  --ad: #f5e6cc;
  --good: #0ca30c;
  --ex-bg: #fff2d4;
  --ex-ink: #7a5000;
  --fel: #b3261e;
  --text: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --panel: #161b22; --ink: #e8edf3; --muted: #9aa5b4; --line: #27303b;
    --accent: #86b6ef; --series: #3987e5; --series-soft: #1c5cab; --okant: #3a4350;
    --ad: #33291a; --good: #4cc78d; --ex-bg: #2e2412; --ex-ink: #f2c66d; --fel: #f2b8b5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1116; --panel: #161b22; --ink: #e8edf3; --muted: #9aa5b4; --line: #27303b;
  --accent: #86b6ef; --series: #3987e5; --series-soft: #1c5cab; --okant: #3a4350;
  --ad: #33291a; --good: #4cc78d; --ex-bg: #2e2412; --ex-ink: #f2c66d; --fel: #f2b8b5; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--text); }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.92em; }
h1, h2 { margin: 0; line-height: 1.2; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; max-width: 68ch; }
.muted { color: var(--muted); }
.label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

.top { background: var(--panel); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1112px; margin: 0 auto; padding-inline: 16px; padding-block: 12px 0; display: grid; gap: 6px; }
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brand b { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.brand .kund { color: var(--muted); }
.brand form { margin-left: auto; }
.ex { display: inline-flex; align-items: center; background: var(--ex-bg); color: var(--ex-ink); border: 1px dashed currentColor; border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; }
nav.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { padding: 10px 12px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

main { max-width: 1112px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 64px; display: grid; gap: 22px; }
main.smal { max-width: 460px; }
.rubrik { display: grid; gap: 6px; }
.kort { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: grid; gap: 14px; min-width: 0; }
.rad { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tal { display: grid; gap: 2px; }
.tal .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.klass { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; font-size: 0.8rem; }
.klass.tom { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.pagar::before { content: "● "; color: var(--good); }

.tabell { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
td.r, th.r { text-align: right; }
.stapel { width: 100px; height: 8px; vertical-align: middle; margin-right: 8px; }
.stapel rect.bakgrund { fill: var(--line); }
.stapel rect.fyllnad { fill: var(--series); }

.hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.huvud { display: grid; gap: 6px; }
.huvud .v { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.huvud .ki { font-family: var(--mono); color: var(--muted); }
.riktning { font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.utfall { display: grid; gap: 12px; }
.utfall div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.utfall .namn { grid-column: 1 / -1; font-weight: 600; }
.utfall svg { width: 100%; height: 12px; }
.utfall rect.bakgrund { fill: var(--line); }
.utfall rect.fyllnad { fill: var(--series-soft); }
.utfall div:first-child rect.fyllnad { fill: var(--series); }

/* Kurvorna: diagrammet sträcks till kortets bredd, etiketterna är vanlig
   text runt det, så att de är lika stora på telefon som på dator. */
.diagram { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; }
.diagram .y { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.diagram svg { width: 100%; height: 220px; display: block; }
.diagram svg.lag { height: 120px; }
.diagram .x { grid-column: 2; display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.diagram line.axel { stroke: var(--line); }
.diagram path.kvar { stroke: var(--series); fill: none; stroke-width: 2.5; }
.diagram path.okant { fill: var(--okant); opacity: 0.6; }
.diagram rect.hopp { fill: var(--series); }
.diagram rect.block, .forklaring rect.block { fill: var(--ad); }
.diagram line.markor { stroke: var(--muted); stroke-dasharray: 3 3; }
.diagram svg { touch-action: pan-y; }
.tips { position: absolute; z-index: 2; pointer-events: none; white-space: pre; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 0.82rem; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.88rem; }
details[open] summary { margin-bottom: 8px; }
.forklaring { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.forklaring svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px; }
.forklaring rect.serie { fill: var(--series); }
.forklaring rect.okant { fill: var(--okant); }

.metod dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.metod dt { font-weight: 700; }
.metod dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .metod dl { grid-template-columns: 1fr; } }

form.inloggning { display: grid; gap: 12px; }
label { font-weight: 600; display: grid; gap: 6px; }
input[type="email"] { font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
button { font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: 0; background: var(--accent); color: var(--panel); cursor: pointer; }
button.lank { background: none; color: var(--accent); padding: 0; font-weight: 600; }
button:disabled { opacity: 0.6; cursor: wait; }
.fel { color: var(--fel); font-weight: 600; min-height: 1.5em; }

.knappar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
a.knapp { display: inline-block; font-weight: 700; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; }

/* Utskriften: ljus, utan meny, knappar och interaktiva delar, och inget
   kort delat mellan två sidor. Väljaren är starkare än temablocken ovan, så
   att ett mörkt tema på skärmen inte följer med till papperet. */
@page { margin: 15mm; }
@media print {
  html:root:not([data-utskrift]) {
    --bg: #ffffff; --panel: #ffffff; --ink: #121720; --muted: #4a5464; --line: #d5dbe3;
    --accent: #1c5cab; --series: #2a78d6; --series-soft: #b7d3f6; --okant: #c9d1dc;
    --ad: #f5e6cc; --good: #0ca30c; --ex-bg: #fff2d4; --ex-ink: #7a5000; color-scheme: light;
  }
  body { font-size: 10.5pt; }
  .top nav, .top form, .ladda-ner, details, .tips, .diagram .markor { display: none !important; }
  .top { border-bottom: 1px solid var(--line); }
  main { max-width: none; padding: 12px 0 0; }
  .kort { break-inside: avoid; border-color: var(--line); }
  a { color: inherit; text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}