/* Sifferkollen – riktning "The product performs" (taste-skill, seed 605269030).
   Off-white grund, flaskgrön text, gul accent. League Spartan till rubriker, Figtree till text. */
@font-face { font-family: "League Spartan"; src: url("/fonter/spartan-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonter/figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonter/figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #f7f7f7;
  --surface: #ebebeb;
  --surface-2: #e0e2e0;
  --ink: #0d2a1c;
  --muted: #546058;
  --accent: #f6e016;
  --accent-ink: #0d2a1c;
  --papper: #ffffff;
  --radie: 4px;
  --marg: clamp(16px, 3vw, 32px);
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --display: "League Spartan", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gung: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-head); margin-bottom: 16px; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); margin-bottom: 16px; }
h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.1; }
p { text-wrap: pretty; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); transition: text-decoration-color .2s, color .2s; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
mark { background: var(--accent); color: var(--accent-ink); padding: 0 .15em; }
small { font-size: var(--step-small); }
.visuellt-dold, .hopp:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp:focus { position: fixed; left: 16px; top: 16px; z-index: 10; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; }

/* Sidhuvud: ordmärke, några länkar, en handling */
.topp { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--marg); max-width: 1440px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.03em; text-decoration: none; }
.logo img { border-radius: var(--radie); }
.meny { display: flex; align-items: center; gap: 22px; font-size: var(--step-small); }
.meny a:not(.btn) { text-decoration: none; }
.meny a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (max-width: 720px) { .meny a:not(.btn) { display: none; } }

/* Knappar: en form, platt, gul */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radie); font-weight: 600; text-decoration: none; transition: transform .2s var(--gung), background .2s; }
.btn:hover { background: #ffe92e; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-liten { min-height: 40px; padding: 0 16px; font-size: var(--step-small); }

/* Vanliga sidor */
.wrap { max-width: 1200px; margin: 0 auto; padding: 8px var(--marg) 96px; }
.wrap > h1 { max-width: 18ch; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 60ch; margin: 0 0 40px; }
.lead strong { font-weight: 600; }
.bread { font-size: var(--step-small); color: var(--muted); margin: 8px 0 20px; }
.bread a { color: var(--muted); }
.card { background: var(--surface); border-radius: var(--radie); padding: clamp(20px, 3vw, 40px); margin-bottom: 16px; }
.card > p, .card > ul { max-width: 68ch; }
.muted { color: var(--muted); }
.annons { font-size: var(--step-small); color: var(--muted); margin: 12px 0 0; }

/* Fält (formulärfält får ha linjer) */
input, select { font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 1.5px solid #c9ccc9; border-radius: var(--radie); background: var(--papper); color: var(--ink); width: 100%; transition: border-color .2s, box-shadow .2s; font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--ink); }
input:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent); } /* taste-skill-ignore: fokusring, inte vila */

/* Kalkylatorn: fält till vänster, svaret till höger på stor skärm */
.kalk { display: grid; gap: 0 clamp(24px, 4vw, 56px); }
.kalk label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 18px; }
.kalk label input, .kalk label select { margin-top: 8px; font-weight: 400; }
.kalk .check { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.kalk .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
@media (min-width: 900px) {
  .kalk { grid-template-columns: 5fr 7fr; align-items: start; }
  .kalk > :not(.resultat):not(details):not(p):not(#graf):not(.legend) { grid-column: 1; }
  .kalk > .resultat { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
  .kalk > details, .kalk > p, .kalk > #graf, .kalk > .legend { grid-column: 1 / -1; }
}
.resultat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 20px; }
.resultat div { background: var(--papper); border-radius: var(--radie); padding: 14px 16px; min-width: 0; }
.resultat span { display: block; font-size: var(--step-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultat strong { display: block; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; font-size: clamp(1.1rem, 4vw, 1.6rem); font-variant-numeric: tabular-nums; }
.resultat .huvud { grid-column: 1 / -1; background: var(--ink); color: var(--papper); padding: 20px 22px 18px; }
.resultat .huvud span { color: #b9c6bf; font-size: 1rem; }
.resultat .huvud strong { font-size: clamp(2.8rem, 11vw, 5.2rem); line-height: .95; letter-spacing: -0.045em; margin-top: 6px; }
.resultat small { display: block; color: var(--muted); font-size: var(--step-small); }
.resultat.tre { grid-template-columns: 1fr; gap: 4px; }
.resultat.tre > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; padding: 14px 18px; }
.resultat.tre > div span { grid-column: 1; font-size: var(--step-body); color: var(--ink); white-space: normal; }
.resultat.tre > div strong { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(1.6rem, 3vw, 2.4rem); align-self: center; }
.resultat.tre > div small { grid-column: 1; }
.resultat.tre > .vinnare { padding: 20px 18px; }
.resultat.tre > .vinnare span { color: var(--papper); font-weight: 600; }
.resultat.tre > .vinnare strong { color: var(--accent); font-size: clamp(2rem, 4.2vw, 3.4rem); }
.resultat .vinnare { background: var(--ink); color: var(--papper); }
.resultat .vinnare span, .resultat .vinnare small { color: #b9c6bf; }
details summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
details[open] summary { margin-bottom: 12px; }

/* Tabeller (riktiga tabeller får ha linjer) */
.tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabell th, .tabell td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #d6d9d6; }
.tabell th { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.tabell td:not(:first-child), .tabell th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tabell tbody tr { transition: background .15s; }
.tabell tbody tr:hover { background: var(--papper); }
.tabell .summa td { font-weight: 600; }
.scroll { max-height: 520px; overflow: auto; }
.faq h3 { font-family: var(--text); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; margin: 24px 0 6px; }
.faq p { margin: 0; }

/* Sparbron: sajtens enda helgula fält */
.cta { background: var(--accent); color: var(--accent-ink); }
.cta h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.cta strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.cta .btn { background: var(--ink); color: var(--papper); }
.cta .btn:hover { background: #18402c; }
.cta .annons { color: #3d4a2a; }

/* ISK-graf */
.falt { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
.falt label { display: flex; flex-direction: column; justify-content: space-between; }
.graf svg { width: 100%; height: auto; display: block; }
.g-grid { stroke: #d6d9d6; }
.g-ax { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-isk, .g-kf, .g-depa, .g-insatt { fill: none; stroke-width: 3; stroke-linejoin: round; }
.g-isk { stroke: var(--ink); }
.g-kf { stroke: #c4a800; stroke-width: 3; stroke-dasharray: 10 7; }
.g-depa { stroke: #8a978f; }
.g-insatt { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 5; }
.legend { font-size: var(--step-small); color: var(--muted); display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.legend i { display: inline-block; width: 18px; height: 4px; margin-right: 6px; vertical-align: middle; }
.l-isk { background: var(--ink); } .l-kf { background: #c4a800; } .l-depa { background: #8a978f; } .l-insatt { background: var(--muted); }

/* ===== Startsidan ===== */
.fri { display: block; }
.fri > section, .fri > figure { margin: 0 auto; max-width: 1440px; padding-left: var(--marg); padding-right: var(--marg); }

/* Hjälte: meningen delas av ramen (vertikalt), kalkylatorn arbetar i mitten */
.hjalte { display: grid; grid-template-columns: 1fr minmax(380px, 38vw) 1fr; grid-template-rows: auto auto auto; align-items: end; gap: 20px 40px; min-height: calc(100svh - 84px); align-content: center; padding-top: 8px; padding-bottom: 40px; }
.hjalte-rubrik { display: contents; }
.hjalte-a, .hjalte-b { font-family: var(--display); font-size: clamp(3rem, 7.2vw, 7.5rem); line-height: .86; letter-spacing: -0.05em; white-space: nowrap; }
.hjalte-a { grid-column: 1 / -1; grid-row: 1; }
.hjalte-b { grid-column: 1 / -1; grid-row: 3; text-align: right; }
.hjalte-ram { grid-column: 2; grid-row: 2; background: var(--ink); color: var(--papper); border-radius: var(--radie); padding: 28px 30px 26px; }
.hjalte-ram label { display: block; font-size: var(--step-small); font-weight: 600; color: #cfd8d3; margin-bottom: 14px; }
.hjalte-ram input, .hjalte-ram select { margin-top: 6px; background: #163a28; border-color: #2c5340; color: var(--papper); }
.hjalte-ram input:focus, .hjalte-ram select:focus { border-color: var(--accent); }
.hjalte-ram output { display: block; font-family: var(--display); font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: .9; letter-spacing: -0.045em; color: var(--accent); margin-top: 18px; font-variant-numeric: tabular-nums; }
.hjalte-not { margin: 10px 0 0; font-size: var(--step-small); color: #cfd8d3; }
.hjalte-stod { grid-column: 1; grid-row: 2; font-size: var(--step-lead); line-height: 1.35; max-width: 20ch; margin: 0; }
.hjalte-knapp { grid-column: 3; grid-row: 2; justify-self: end; }
@media (max-width: 899px) {
  .hjalte { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: 16px; }
  .hjalte-a, .hjalte-b { grid-column: 1; grid-row: auto; font-size: 13.5vw; }
  .hjalte-ram, .hjalte-stod, .hjalte-knapp { grid-column: 1; grid-row: auto; }
  .hjalte-ram { padding: 20px; }
  .hjalte-stod { font-size: var(--step-body); max-width: none; }
  .hjalte-knapp { justify-self: stretch; }
}

/* Populära uträkningar: flikar och band */
.lista { padding-top: clamp(80px, 12vw, 180px); }
.lista-topp { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.lista-topp h2 { font-size: var(--step-head); margin: 0; }
.mjuk { color: var(--muted); }
.lista-kropp { display: grid; grid-template-columns: 190px 1fr; gap: 40px; }
.flikar { display: flex; flex-direction: column; gap: 6px; }
.flikar button { font: inherit; text-align: left; border: 0; border-radius: var(--radie); background: var(--surface); color: var(--ink); padding: 12px 16px; min-height: 64px; font-weight: 600; font-size: var(--step-body); cursor: pointer; transition: background .2s, transform .2s var(--gung); }
.flikar button small { display: block; font-weight: 400; color: var(--muted); }
.flikar button:hover { background: var(--surface-2); }
.flikar button[aria-selected="true"] { background: var(--ink); color: var(--papper); }
.flikar button[aria-selected="true"] small { color: #b9c6bf; }
.paneler > [role="tabpanel"] + [role="tabpanel"] { margin-top: 24px; }
.band { display: flex; flex-direction: column; gap: 4px; }
.rad { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: center; gap: 20px; min-height: 76px; padding: 12px 20px; border-radius: var(--radie); background: var(--surface); text-decoration: none; transition: background .2s, transform .25s var(--gung); }
.rad:nth-child(even) { background: var(--surface-2); }
.rad:hover { background: var(--accent); transform: translateX(6px); }
.rad-tal { font-size: var(--step-body); font-variant-numeric: tabular-nums; font-weight: 600; }
.rad-titel { font-size: var(--step-body); font-weight: 600; }
.rad-titel small { display: block; font-weight: 400; color: var(--muted); }
.rad-hoger { font-size: var(--step-small); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rad:hover .rad-titel small, .rad:hover .rad-hoger { color: var(--accent-ink); }
@media (max-width: 899px) {
  .lista-kropp { grid-template-columns: 1fr; gap: 16px; }
  .lista-topp .btn { width: 100%; }
  .flikar { flex-direction: row; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 0; }
  .flikar button { flex: 1; min-height: 56px; }
  .rad { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px; }
  .rad-tal { grid-column: 1; }
  .rad-hoger { grid-column: 2; grid-row: 1; }
  .rad-titel { grid-column: 1 / -1; }
}

/* Bildband: ett riktigt foto från penningens Stockholm */
.fri > .bildband { margin-top: clamp(80px, 12vw, 180px); }
.bildband img { display: block; width: 100%; height: clamp(280px, 52vw, 720px); object-fit: cover; object-position: 50% 32%; }
figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bildband { overflow: hidden; }
    .bildband img { animation: dra linear both; animation-timeline: view(); }
    @keyframes dra { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1) translateY(0); } }
  }
}

/* Dokumenten: namn till vänster, scen med riktiga papper till höger */
.visning { display: grid; grid-template-columns: 5fr 7fr; gap: 0 32px; padding-top: clamp(80px, 12vw, 180px); }
.visning-namn { display: flex; flex-direction: column; }
.steg { min-height: 70vh; padding-top: 12vh; }
.steg button { font: inherit; font-family: var(--display); font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: color .25s; }
.steg button:hover, .steg.vald button { color: var(--ink); }
.steg p { font-size: var(--step-lead); line-height: 1.35; max-width: 24ch; margin: 12px 0 0; }
.scen { position: sticky; top: 10vh; height: min(70svh, 640px); background: var(--surface); border-radius: var(--radie); overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 56px 0 0 56px; }
.ark { width: min(680px, 88%); background: var(--papper); color: var(--ink); padding: 36px 40px; font-size: var(--step-body); flex: none; }
.ark-smal { width: min(560px, 80%); }
.ark-kvitto { width: min(460px, 70%); }
.ark header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ark header strong { font-family: var(--display); font-size: clamp(1.6rem, 2.2vw, 2.2rem); letter-spacing: -0.03em; }
.ark header span { color: var(--muted); font-size: var(--step-small); }
.ark-meta { color: var(--muted); font-size: var(--step-small); margin: 0 0 16px; }
.ark table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.ark td { padding: 9px 0; border-bottom: 1px dashed #d6d9d6; }
.ark td + td { text-align: right; white-space: nowrap; padding-left: 12px; }
.ark .delsumma td { font-weight: 600; }
.ark .summa td { font-weight: 700; font-size: var(--step-body); border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 10px; }
.visning.aktiv .ark { position: absolute; left: 56px; top: 56px; opacity: 0; transform: translateY(24px); transition: opacity .2s, transform .45s var(--gung); pointer-events: none; }
.visning.aktiv .ark.vald { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 899px) {
  .visning { grid-template-columns: 1fr; }
  .visning-namn { flex-direction: row; overflow-x: auto; gap: 20px; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .steg { min-height: 0; padding: 0; scroll-snap-align: start; flex: none; }
  .steg button { font-size: var(--step-lead); }
  .steg p { display: none; }
  .scen { position: relative; top: 0; height: 70svh; padding: 16px 0 0 16px; }
  .visning.aktiv .ark { left: 16px; top: 16px; }
}

/* Brevet */
.fri > .brev { max-width: calc(560px + 2 * var(--marg)); padding-top: clamp(120px, 14vw, 200px); padding-bottom: clamp(80px, 10vw, 160px); }
.brev figure { margin: 0 0 32px; }
.brev img { display: block; width: 100%; height: auto; }
.brev p { font-size: var(--step-body); line-height: 1.6; margin: 0 0 1.4em; }
.brev .brev-namn { font-family: var(--display); font-size: var(--step-lead); letter-spacing: -0.02em; margin-top: 32px; }
.brev-namn small { display: block; font-family: var(--text); font-size: var(--step-small); color: var(--muted); letter-spacing: 0; }

/* Sidfot: de sista raderna på en tavla */
.fot { margin-top: 64px; padding: 0 12px 12px; }
.fotnot { max-width: 1200px; margin: 0 auto 40px; padding: 0 var(--marg); color: var(--muted); font-size: var(--step-small); }
.fotnot { max-width: min(1200px, 75ch); }
.rutor { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.ruta { margin: 0; border-radius: var(--radie); background: var(--surface); padding: 24px; min-height: 220px; }
.ruta-text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 8px; }
.ruta-text p { margin: 0; font-size: var(--step-small); color: var(--muted); }
.ruta-text .ruta-stor { font-size: var(--step-lead); line-height: 1.3; color: var(--ink); max-width: 30ch; margin-bottom: auto; }
.ruta-nav { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 8px; font-size: var(--step-body); }
.ruta-namn { grid-column: 1 / 9; min-height: 320px; background: var(--ink); color: var(--bg); font-family: var(--display); font-size: clamp(3rem, 9vw, 8.1rem); letter-spacing: -0.05em; display: flex; align-items: center; justify-content: center; line-height: 1; }
.ruta-handling { grid-column: 9 / -1; min-height: 320px; background: var(--accent); color: var(--accent-ink); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--display); font-size: var(--step-lead); letter-spacing: -0.03em; transition: background .2s; }
.ruta-handling svg { align-self: flex-end; transition: transform .25s var(--gung); }
.ruta-handling:hover { background: #ffe92e; }
.ruta-handling:hover svg { transform: translate(6px, -6px); }
.fotlankar a { color: var(--muted); }
@media (max-width: 720px) {
  .rutor { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ruta { padding: 20px; min-height: 0; }
  .ruta-namn { grid-column: 1 / -1; min-height: 160px; order: -2; font-size: 18vw; }
  .ruta-handling { grid-column: 1 / -1; min-height: 140px; order: -1; }
  .ruta-text, .ruta-nav { grid-column: 1 / -1; }
}

/* Rörelse: delar glider in när de syns (delat/rorelse.js). Utan skript syns allt. */
.in-vanta { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--gung) var(--fordrojning, 0ms), transform .7s var(--gung) var(--fordrojning, 0ms); }
.in-vanta.in-klar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bildband img { animation: none; }
  .in-vanta { transform: none; transition: opacity .5s ease var(--fordrojning, 0ms); }
  .btn:hover, .rad:hover, .ruta-handling:hover svg { transform: none; }
}