/* Avdragskollen v1 "Två spalter". Artikelns H2 ovanför ett kort som delas i två spalter: frågorna till vänster,
   beskedet till höger på en sky mist-panel bakom en hårlinje. Bygger på designsystemet (../system/ampy.css);
   här ligger bara det som är unikt för kalkylatorn. Alla mått ur --ampy-*; egna värden står som lokala
   variabler med kommentar (px vid 1440 / 390). */

/* ---------- Sidan: artikelspalten (980 px) på vit artikelbakgrund ---------- */
.rk-sida { background: var(--ampy-bg-surface); }                       /* artikelmallens brödyta är vit, inte sky mist; kortet bär hårlinje + kortskugga */
.rk-spalt { max-width: 98rem; margin: 0 auto; padding: var(--ampy-space-xl) 0; }   /* kortet fyller spaltens 980 px */
@media (max-width: 1040px) { .rk-spalt { padding-inline: var(--ampy-space-m); } }

/* ---------- Rubriken: en riktig artikel-H2 ovanför kortet (.ampy-h2 36/500/1,2) ---------- */
.rk__rubrik { margin: 0 0 var(--ampy-space-stack-lg); }                /* rubrik -> block 39,6 / 21,5, som LED-kalkylatorn */

/* ---------- Kortet ---------- */
.rk {
  --rk-pad-x: var(--ampy-space-l);        /* kortpadding 39,6 / 21,5 (brief 32 till 40 / 20 till 24) */
  --rk-pad-y: var(--ampy-space-l);
  --rk-gap-q: var(--ampy-space-m);        /* fråga -> fråga 28 (mobil: se nedan) */
  --rk-gap-sub: var(--ampy-space-3xs);    /* fråga -> underrad 7 / 6,6 */
  --rk-gap-ctl: max(12px, var(--ampy-space-xs));   /* underrad -> kontroll 14 / 12: xs faller till 10,5 på mobil, briefens golv är 12 */
  --rk-text-fraga: 20px;                   /* frågor 20/500 (h3-tokenen är 22 vid 1440, briefen säger 20) */
  --rk-text-under: 16px;                   /* underrad, "Per person och år.", femårsraden: 16/400 (small-tokenen faller till 14 på mobil) */
  --rk-text-tal: var(--ampy-text-number); /* 56 vid 1440; 44 på mobil (nedan) */
  --rk-text-enhet: calc(var(--rk-text-tal) * .5);   /* "upp till"/"ca" och "kr": halva talet (28 / 22), som LED-kalkylatorns kr/år */
  --rk-text-stopp: 18px;                   /* stoppbeskedet 18/500 på båda skärmar (briefen) */
  --rk-text-siffror: 18px;                 /* siffrorna i beloppsfältet */
  --rk-seg-min: 88px;                      /* minsta bredd per alternativ (briefen); "Pension" i 600 + padding är 84,3 så spåret byter inte bredd när vikten byter */
  /* Talblockets höjd: talraden + luft + "Per person och år." (56 + 9,9 + 22,4 = 88,3 / 44 + 8,3 + 22,4 = 74,7).
     Stoppblocket får samma höjd så etiketten och panelen står stilla när talet byts mot X + besked. */
  --rk-huvud-h: calc(var(--rk-text-tal) + var(--ampy-space-2xs) + var(--rk-text-under) * var(--ampy-lh-ui));

  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);              /* 55 / 45 */
  padding: 0;
  overflow: visible;
}

/* ---------- Vänster: frågorna ---------- */
.rk__fragor { display: flex; flex-direction: column; gap: var(--rk-gap-q); padding: var(--rk-pad-y) var(--rk-pad-x); min-width: 0; }

.rk__fraga { border: 0; margin: 0; padding: 0; min-width: 0; min-inline-size: 0; }
.rk[data-mode="gt"] .rk__fraga--aldre { display: none; }              /* fem år påverkar bara ROT: frågan visas inte i grön teknik-läget */
.rk__etikett {
  display: block; padding: 0; margin: 0;
  font-family: var(--ampy-font); font-size: var(--rk-text-fraga); font-weight: var(--ampy-w-medium);
  line-height: var(--ampy-lh-h3); letter-spacing: var(--ampy-ls-heading); color: var(--ampy-ink);
}
.rk__under {
  margin: var(--rk-gap-sub) 0 0;
  font-size: var(--rk-text-under); font-weight: var(--ampy-w-ui); line-height: var(--ampy-lh-ui); color: var(--ampy-ink-muted);
  max-width: none; text-wrap: pretty;                                    /* ingen ensam "delvis." på sista raden vid 375 */
}
.rk__fraga > .rk__segment, .rk__fraga > .rk__inkomst, .rk__fraga > .rk__belopp { margin-top: var(--rk-gap-ctl); }

/* Personerna i hushållet: person 1 utan huvud; från två personer visas "Person N" som eyebrow (+ Ta bort) och en
   hårlinje mellan blocken. Fråga -> fråga inom blocket = samma rytm som resten av formuläret. */
.rk__personer { display: flex; flex-direction: column; gap: var(--rk-gap-q); }
.rk__person > * + * { margin-top: var(--rk-gap-q); }
.rk__person > .rk__personhuvud + * { margin-top: var(--ampy-space-2xs); }   /* eyebrow -> fråga 9,9 / 8,3 */
.rk__person + .rk__person { padding-top: var(--ampy-space-s); border-top: 1px solid var(--ampy-line); }
.rk__personer[data-antal="1"] .rk__personhuvud { display: none; }
.rk__personhuvud { display: flex; align-items: center; justify-content: space-between; gap: var(--ampy-space-s); min-height: 24px; }
.rk__personetikett { margin: 0; }

/* Textlänkarna (systemets .ampy-link, 14 -> 16 px för en 55-åring); "Ta bort" utan 44-boxen på fin pekare så
   eyebrow-raden håller sin höjd, 44 px träffyta på touch */
.rk__lank { font-size: var(--rk-text-under); }
.rk__lank svg { width: 16px; height: 16px; }
.rk__lagg { margin-top: calc(var(--ampy-space-2xs) - var(--rk-gap-q)); }   /* 44-boxen: textens överkant hamnar ~ 20 px under sista fältet */
.rk__tabort { min-height: 0; }
@media (pointer: coarse) { .rk__tabort { min-height: 44px; margin-block: -10px; } }

/* "Redan använt i år": en rad under inkomsten, etiketten till vänster om ett kort fält (bankblankettens mönster;
   på mobil etikett ovanför fullbreddsfält). Fältet 150 px rymmer "50 000" med marginal. */
.rk__fraga--anvant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rk-gap-ctl) var(--ampy-space-xs); }   /* fältet i höger kant, i linje med inkomstfältet; gap xs (14) så etikett 215 + fält 150 ryms i 378 */
.rk__fraga--anvant > .rk__etikett { flex: 0 1 auto; }
.rk__fraga--anvant > .rk__belopp { flex: 0 0 14rem; margin-top: 0; }   /* 140: etikett 216 + gap 14 + 140 = 370 ryms i artikelspaltens 377 (wrap-behållare krymper inte, den bryter) */

/* Segment: 48 px spår (4 px padding, 40 px alternativ) som LED-kalkylatorn, bredd efter text, minst 88 px per val.
   Valt läge = vit pill + teal-deep text (systemet) + vikt 600 mot 500: tre signaler, inte bara färg. */
.rk__segment {
  display: inline-grid; grid-auto-columns: 1fr;                         /* lika breda val, bredden ur den längsta texten */
  container-type: normal;
}
.rk__segment > label {
  min-width: var(--rk-seg-min); min-height: 40px; padding-inline: var(--ampy-space-xs);
  font-size: var(--ampy-text-button); font-weight: var(--ampy-w-medium);
}
.rk__segment > label:has(input:checked) { font-weight: var(--ampy-w-strong); }
/* Touch: tryckytan är hela alternativet, 44 px i det 48 px höga spåret (2 px spår runt i stället för 4) */
@media (pointer: coarse) {
  .rk__segment.ampy-segment { padding: 2px; }
  .rk__segment > label { min-height: 44px; }
}

/* Inkomstraden: typ-väljare + belopp på samma rad */
.rk__inkomst { display: flex; flex-wrap: wrap; gap: var(--ampy-space-xs); align-items: center; }
.rk__belopp { position: relative; flex: 1 1 150px; min-width: 0; }   /* basis 150: i artikelspalten (832 -> vänsterspalt 378) ryms segment + fält på en rad; "1 200 000" behöver 148 */
.rk__input {
  width: 100%; padding-right: calc(var(--ampy-space-xs) + var(--ampy-space-2xs) + 1.1em); text-align: right;   /* plats för kr-suffixet */
  font-size: var(--rk-text-siffror); font-weight: var(--ampy-w-medium); color: var(--ampy-ink);
}
.rk__input::placeholder { font-weight: var(--ampy-w-ui); }
.rk__enhet {
  position: absolute; right: var(--ampy-space-xs); top: 50%; transform: translateY(-50%);
  font-size: var(--ampy-text-button); font-weight: var(--ampy-w-ui); color: var(--ampy-ink-muted); pointer-events: none;
}

/* ---------- Höger: beskedet ---------- */
.rk__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--rk-pad-y) var(--rk-pad-x);
  background: var(--ampy-bg-subtle);
  border-left: 1px solid var(--ampy-line);
  border-radius: 0 calc(var(--ampy-radius-card) - 1px) calc(var(--ampy-radius-card) - 1px) 0;
  min-width: 0;
}
/* Tre rader: luft / huvudbeskedet / luft. Huvudet (etikett, tal, underrad) ligger alltid mitt i panelen och
   flyttar sig inte när femårsraden dyker upp; raden får plats i den nedre luften. På mobil (auto-höjd) blir
   luften 0 och raden följer direkt under. */
.rk__resultat { flex: 1 1 auto; display: grid; grid-template-rows: 1fr auto 1fr; min-width: 0; }
.rk__huvud { grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rk__eyebrow { display: block; margin: 0; }                              /* block i stället för systemets inline-flex: etiketten får radbrytas ("Ert tillgängliga grön teknik-avdrag"), med "grön teknik-avdrag" ihop */

.rk__talrad {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ampy-space-2xs);
  margin-top: var(--ampy-space-xs);                                     /* etikett -> tal 14 / 10,5 */
}
.rk__talpar { display: inline-flex; align-items: baseline; column-gap: var(--ampy-space-2xs); white-space: nowrap; }   /* talet och kr hålls ihop: bryts raden hamnar "upp till" ensam på första raden, aldrig "kr" ensam på sista */
.rk__prefix, .rk__talenhet {
  font-size: var(--rk-text-enhet); font-weight: var(--ampy-w-medium); line-height: 1;
  letter-spacing: var(--ampy-ls-heading); color: var(--ampy-ink-muted);
}
.rk__tal { font-size: var(--rk-text-tal); }
.rk__per {
  margin: var(--ampy-space-2xs) 0 0;                                    /* tal -> underrad 9,9 / 8,3 */
  font-size: var(--rk-text-under); font-weight: var(--ampy-w-ui); line-height: var(--ampy-lh-ui); color: var(--ampy-ink-muted);
}
.rk__not {
  grid-row: 3; align-self: start;
  margin: var(--ampy-space-s) 0 0; padding-top: var(--ampy-space-s);
  border-top: 1px solid var(--ampy-line);
  font-size: var(--rk-text-under); font-weight: var(--ampy-w-ui); line-height: var(--ampy-lh-ui); color: var(--ampy-ink-body);
  max-width: none;
}

/* Stoppläget: rött X och beskedet på en rad, mitt för varandra, i talblockets höjd (ingenting hoppar) */
.rk__stopp {
  display: flex; align-items: center; gap: var(--ampy-space-s);
  margin-top: var(--ampy-space-xs);                                     /* samma avstånd från etiketten som talraden */
  min-height: var(--rk-huvud-h);
}
.rk__x { width: 44px; height: 44px; display: block; flex: 0 0 auto; }
.rk__x circle { fill: var(--ampy-error-ink); }
.rk__stopptext {
  margin: 0; min-width: 0;
  font-size: var(--rk-text-stopp); font-weight: var(--ampy-w-medium); line-height: 1.35; color: var(--ampy-ink);
  max-width: none; text-wrap: pretty;
}
.rk__ihop { white-space: nowrap; display: inline-block; }                /* "grön teknik-avdrag" bryts aldrig: nowrap stoppar mellanslaget, inline-block stoppar bindestrecket (Chrome bryter annars efter "-" även i nowrap, sett i probens gt-skärmdump) */
.rk__resultat[data-status="stopp"] :is(.rk__talrad, .rk__per, .rk__not) { display: none; }

/* Talet byts med en kort intoning; aldrig count-up. base.css nollar tiden vid reduced motion. */
@keyframes rk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rk__talrad.is-swap, .rk__stopp.is-swap { animation: rk-in var(--ampy-dur-base) var(--ampy-ease-out); }

[hidden] { display: none !important; }

/* ---------- Staplat läge: frågorna först, beskedet som fullbreddsblock under ----------
   Styrs av BEHÅLLARENS bredd (container query), inte skärmens: samma kort ligger i artikelspalten (832 px -> två
   spalter), i högerspalten (384 px -> staplat) och på en telefon (356 px -> staplat). Behållaren är .rk-behallare
   (demosidan: main.rk-spalt). Reglerna står två gånger: en gång som @container, en gång som @media-reserv för
   webbläsare utan container queries (Safari < 16). Ändra båda. */
.rk-behallare, .rk-spalt { container-type: inline-size; container-name: rk; }
@container rk (max-width: 719px) {
  .rk {
    --rk-gap-q: clamp(28px, var(--ampy-space-l), 40px);   /* fråga -> fråga 28: l-steget är 21,5 vid 390, under briefens golv */
    --rk-text-tal: 52px;                    /* ägaren 2026-09-14: resultatet på mobil var "lite litet" (44); 52 ryms med "upp till" och "kr" på en rad vid 360 */
    --rk-panel-pad-y: 28px;                 /* panelen får mer luft upptill och nedtill än frågorna (21,5) */
    grid-template-columns: minmax(0, 1fr);
  }
  .rk__segment { display: grid; width: 100%; }                          /* fullbreddskontroller */
  .rk__inkomst { flex-direction: column; align-items: stretch; }
  .rk__belopp { flex: 1 1 auto; }
  .rk__fraga--anvant { flex-direction: column; align-items: stretch; }
  .rk__fraga--anvant > .rk__belopp { flex: 0 0 auto; }
  .rk__panel {
    padding-block: var(--rk-panel-pad-y);
    border-left: 0; border-top: 1px solid var(--ampy-line);
    border-radius: 0 0 calc(var(--ampy-radius-card) - 1px) calc(var(--ampy-radius-card) - 1px);
  }
  .rk__talrad, .rk__stopp { margin-top: 14px; }                          /* etikett -> tal 14 som på desktop (xs-steget är 10,5 vid 390); tal -> underrad 8,3 som förut (ingår i --rk-huvud-h) */
  .rk__resultat { display: flex; flex-direction: column; }             /* auto-höjd: 1fr-raderna skulle annars ärva femårsradens höjd */
}
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .rk {
      --rk-gap-q: clamp(28px, var(--ampy-space-l), 40px);   /* fråga -> fråga 28: l-steget är 21,5 vid 390, under briefens golv */
      --rk-text-tal: 52px;                    /* ägaren 2026-09-14: resultatet på mobil var "lite litet" (44); 52 ryms med "upp till" och "kr" på en rad vid 360 */
      --rk-panel-pad-y: 28px;                 /* panelen får mer luft upptill och nedtill än frågorna (21,5) */
      grid-template-columns: minmax(0, 1fr);
    }
    .rk__segment { display: grid; width: 100%; }                          /* fullbreddskontroller */
    .rk__inkomst { flex-direction: column; align-items: stretch; }
    .rk__belopp { flex: 1 1 auto; }
    .rk__fraga--anvant { flex-direction: column; align-items: stretch; }
    .rk__fraga--anvant > .rk__belopp { flex: 0 0 auto; }
    .rk__panel {
      padding-block: var(--rk-panel-pad-y);
      border-left: 0; border-top: 1px solid var(--ampy-line);
      border-radius: 0 0 calc(var(--ampy-radius-card) - 1px) calc(var(--ampy-radius-card) - 1px);
    }
    .rk__talrad, .rk__stopp { margin-top: 14px; }                          /* etikett -> tal 14 som på desktop (xs-steget är 10,5 vid 390); tal -> underrad 8,3 som förut (ingår i --rk-huvud-h) */
    .rk__resultat { display: flex; flex-direction: column; }             /* auto-höjd: 1fr-raderna skulle annars ärva femårsradens höjd */
  }
}
@media (max-width: 767px) {
  .rk-spalt { padding: var(--ampy-space-m); }                           /* demosidan: rubrikens vänsterkant = kortets */
}