/* Avdragskollen v3 "Talet först": resultatet är hjälten, en sky mist-panel överst i det vita kortet, de tre frågorna
   på en lugn rad under. På mobil (kort < 440) byter panelen plats: frågorna först, talet direkt under beloppsfältet,
   så det syns medan man skriver. Allt kommer ur system/ampy.css (tokens + .ampy-card/.ampy-segment/.ampy-input/
   .ampy-h2/.ampy-eyebrow). Egna värden finns bara som lokala --ak-variabler med kommentar.
   Inga midnattsytor: vit + sky mist, midnight som text. Teal enda accent (valt läge), rött bara för X:et. */

.ak-body { background: var(--ampy-bg-surface); }                                                  /* artikelsidan är vit; panelen ska läsas mot kortet, inte mot sidan */
.ak-main { box-sizing: content-box; max-width: 98rem; margin: 0 auto; padding: var(--ampy-space-2xl) var(--ampy-gutter); }   /* 980 px artikelspalt (innehållet), sajtens gutter utanför */
.ak [hidden] { display: none !important; }                                                          /* hidden vinner över komponenternas display */

.ak {
  --ak-tal: clamp(44px, 3.4vw + 30.7px, 56px);                 /* brief: talet 44 (390) till 56 (>= 744); systemets --ampy-text-number bottnar på 38 */
  --ak-q: min(var(--ampy-text-h3), 20px);                      /* brief: frågor 20/500; h3-token ger 22 på desktop, brief säger 20 */
  --ak-under: 16px;                                            /* brief: underrad 16/400 dämpad */
  --ak-gap-under: var(--ampy-space-3xs);                       /* fråga -> underrad 6.6 till 7 (brief 6 till 8) */
  --ak-gap-kontroll: clamp(12px, var(--ampy-space-xs), 14px);  /* underrad -> kontroll 12 till 14; xs bottnar på 10.5 och klamras upp till 12 */
  --ak-gap-fraga: clamp(28px, var(--ampy-space-l), 40px);      /* fråga -> fråga 28 till 40 (staplat) */
  --ak-gap-rad: var(--ampy-space-m);                           /* kolumngap på desktopraden (minst 28, överskottet fördelas) */
  --ak-kort: var(--ampy-space-s);                              /* kortets padding = panelens indrag: 19.8 desktop, 10.5 mobil (xs, nedan) */
  --ak-panel: var(--ampy-space-s);                             /* panelens och frågornas padding 19.8 / 13.3: texten står 39.6 / 23.8 från kortkanten (brief 32 till 40 / 20 till 24) */
  --ak-enhet: clamp(21px, var(--ak-tal) / 2, 28px);           /* "upp till"/"ca"/"kr": halva talet, 22 mobil -> 28 desktop (LED: 56 + 28); --ampy-text-mid ger bara 21 på 1440 */
  --ak-ikon-x: 44px;                                           /* rött X: cirkel 40 till 48 */
  --ak-rad-h: calc(2 * 1.5 * var(--ak-under) + var(--ampy-space-3xs));   /* "Per person och år." + en reserverad rad för femårsnoten: hjälten byter aldrig höjd på desktop */
}

/* ---------- Rubrik + kort ---------- */
.ak { container-type: inline-size; container-name: ak; }                                /* layouten frågar spaltens bredd (= kortets yttermått), inte fönstrets; sektionen är behållare så att kortet självt kan styras */
.ak__rubrik { margin: 0 0 var(--ampy-space-stack-lg); }                                 /* H2 -> kort 39.6 desktop, 21.5 mobil (systemets stack-lg, som LED); text-wrap: balance ur .ampy-h2 */
.ak__kort { padding: var(--ak-kort); }

/* ---------- Hjälten: sky mist-panel med radie inne i kortet, samma indrag som frågorna ----------
   Vänsterkanten på etikett, tal och frågor är samma linje (kortpadding + panelpadding = 39.6), som i LED-kalkylatorn. */
.ak__kort.ampy-card > .ak__hero {                                                /* specificitet över systemets .ampy-card > :first-child { margin-top: 0 } */
  display: flex; flex-direction: column; gap: var(--ampy-space-2xs);              /* etikett -> tal 9.9 (+ 4 nedan = 14, LED readout) */
  margin: 0; padding: var(--ampy-space-m) var(--ak-panel) var(--ak-panel);       /* 28 upptill (etiketten får luft), 19.8 i sidorna och nedtill (+ den reserverade notraden) */
  background: var(--ampy-bg-subtle);
  border-radius: var(--ampy-radius-field);
}
.ak__etikett { margin: 0 0 4px; }                                                /* 9.9 + 4 = 14 mellan etikett och tal (LED ~14); lokalt värde, R2 Minor 8 */
.ak__live { display: flex; flex-direction: column; gap: var(--ampy-space-2xs); } /* tal -> rad 9.9 */

/* Talraden: prefix (upp till / ca) + siffra + kr, alla på samma baslinje */
.ak__tal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ampy-space-2xs); margin: 0; }
.ak__prefix { font-size: var(--ak-enhet); font-weight: var(--ampy-w-medium); line-height: 1; letter-spacing: -0.01em; color: var(--ampy-ink-muted); }
.ak__siffra {
  font-size: var(--ak-tal); font-weight: var(--ampy-w-display); line-height: 1; letter-spacing: var(--ampy-ls-number);
  color: var(--ampy-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.ak__enhet { font-size: var(--ak-enhet); font-weight: var(--ampy-w-medium); line-height: 1; color: var(--ampy-ink-muted); }

/* Stopp: rött X + beskedet ersätter talet. Samma höjd som tal + rad så panelen inte hoppar. */
.ak__stopp {
  display: flex; align-items: center; gap: var(--ampy-space-s); margin: 0;
  min-height: calc(var(--ak-tal) + var(--ampy-space-2xs) + var(--ak-rad-h));
  font-size: 18px; font-weight: var(--ampy-w-medium); line-height: 1.35; color: var(--ampy-ink); max-width: 60ch;   /* brief: texten 18 px i --ampy-ink */
}
.ak__kryss {
  flex: 0 0 auto; display: inline-flex; width: var(--ak-ikon-x); height: var(--ak-ikon-x); border-radius: var(--ampy-radius-pill);
  background: var(--ampy-error-ink); color: var(--ampy-action-on);
}
.ak__kryss svg { width: 24px; height: 24px; margin: auto; }                      /* 24 = viewBox: stroke 1.75 renderat exakt, krysset 12 px (som v1/v2b) */

/* Raden under talet: "Per person och år." och femårsnoten (bara ROT) på var sin rad. Höjden är reserverad (min-height)
   så att panelen, och därmed kontrollerna under den på desktop, står stilla när noten dyker upp. */
.ak__rad { display: flex; flex-direction: column; gap: var(--ampy-space-3xs); margin: 0; min-height: var(--ak-rad-h); font-size: var(--ak-under); font-weight: var(--ampy-w-ui); line-height: 1.5; }
.ak__per { color: var(--ampy-ink-muted); }
.ak__not { color: var(--ampy-ink); }

/* Tick när talet byts (aldrig vid load; reduced motion nollas av systemet) */
.is-tick { animation: ak-tick var(--ampy-dur-base) var(--ampy-ease-out); }
@keyframes ak-tick { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Frågorna ---------- */
.ak__fragor { display: flex; flex-direction: column; gap: var(--ak-gap-fraga); margin-top: var(--ampy-space-m); padding: 0 var(--ak-panel) var(--ak-panel); }   /* panel -> frågor 28; frågornas text på panelens linje */
.ak__q { margin: 0; font-size: var(--ak-q); font-weight: var(--ampy-w-medium); line-height: var(--ampy-lh-h3); letter-spacing: var(--ampy-ls-heading); color: var(--ampy-ink); }
.ak__under { margin: var(--ak-gap-under) 0 0; font-size: var(--ak-under); font-weight: var(--ampy-w-ui); line-height: 1.5; color: var(--ampy-ink-muted); }
.ak__under > span { white-space: nowrap; }                                       /* bryter bara mellan meningarna: "Villa, radhus eller lägenhet." / "Helt eller delvis." */
.ak__kontroll { margin-top: var(--ak-gap-kontroll); }
.ak__fraga--inkomst { scroll-margin-top: var(--ampy-space-s); }                  /* när fältet får fokus på mobil rullas frågan upp med lite luft ovanför */

/* Segment: 48 px högt (spår 4 + option 40 + 4), text 16 till 18, valt = vit pill med text-teal ur systemet.
   Ovalt 500, valt 600: vikt + färg + yta skiljer, inte bara färg. */
.ak__seg.ampy-segment { container-type: normal; grid-auto-columns: minmax(88px, 1fr); }   /* brief: min 88 per alternativ; systemets container-fråga (13 px text i smala spår) stängs av */
.ak__seg.ampy-segment > label { min-height: 40px; padding-inline: var(--ampy-space-xs); font-size: var(--ampy-text-body); font-weight: var(--ampy-w-medium); }   /* 16.1 -> 18 */
.ak__seg.ampy-segment > label:has(input:checked) { font-weight: var(--ampy-w-strong); }
@media (pointer: coarse) {                                                       /* touch: alternativet 44 px i ett spår som förblir 48 */
  .ak__seg.ampy-segment { padding: 2px; }
  .ak__seg.ampy-segment > label { min-height: 44px; }
}

/* Belopp: 48 px, 18 px tabulära siffror, "kr" som suffix inne i fältet */
.ak__falt { position: relative; min-width: 0; }
.ak__input.ampy-input {
  font-size: 18px; font-weight: var(--ampy-w-medium); text-align: right;          /* brief: 18 px siffror */
  font-variant-numeric: tabular-nums lining-nums;
  padding-right: calc(var(--ampy-space-xs) + 1.4em);                             /* plats för "kr" (gapet siffror -> kr ca 10, som v2b) */
}
.ak__input.ampy-input::placeholder { font-weight: var(--ampy-w-ui); }             /* platshållaren ska inte se ut som ett ifyllt värde */
.ak__kr { position: absolute; right: var(--ampy-space-xs); top: 50%; transform: translateY(-50%); font-size: var(--ampy-text-body); font-weight: var(--ampy-w-ui); color: var(--ampy-ink-muted); pointer-events: none; }
.ak__inkomst { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ampy-space-xs); align-items: center; }

/* ---------- Grön teknik: fråga 2 styr ingenting och döljs; ingen not, ingen reserverad rad ---------- */
:root[data-mode="gt"] .ak__fraga--femar { display: none; }
:root[data-mode="gt"] .ak__hero { --ak-rad-h: calc(1.5 * var(--ak-under)); }

/* ---------- Smalt fönster: mindre kortpadding, sidans luft ---------- */
@media (max-width: 47.99em) {
  .ak-main { padding: var(--ampy-space-l) var(--ampy-gutter); }
  .ak { --ak-kort: var(--ampy-space-xs); }                                        /* 10.5 + panelens 13.3 = 23.8 från kortkanten till texten */
}

/* ---------- Smalt kort (< 440, dvs mobil): frågorna först, talet under beloppsfältet; fullbreddskontroller ----------
   Talet måste synas när tangentbordet är uppe, så panelen ligger direkt under fältet (visuell ordning via order;
   DOM-ordningen är oförändrad, panelen har inga fokuserbara element). Noten reserverar ingen rad här: panelen är sist
   i kortet, så när den växer flyttas ingen kontroll. */
@container ak (max-width: 439px) {
  .ak__kort { display: flex; flex-direction: column; }
  .ak__kort.ampy-card > .ak__fragor { order: 1; margin: 0; padding: var(--ak-panel) var(--ak-panel) 0; }
  .ak__kort.ampy-card > .ak__hero { order: 2; margin-top: var(--ampy-space-m); --ak-rad-h: calc(1.5 * var(--ak-under)); }   /* fält -> panel 16.9 (+ panelens 13.3 till etiketten) */
  .ak__seg.ampy-segment { display: grid; }                                        /* fullbredd: två lika alternativ */
  .ak__inkomst { grid-template-columns: minmax(0, 1fr); }                         /* Lön/Pension över beloppet */
}

/* ---------- Från 440: kontroller efter innehåll ---------- */
@container ak (min-width: 440px) {
  .ak__seg.ampy-segment { display: inline-grid; }
  .ak__inkomst { grid-template-columns: max-content minmax(14rem, 20rem); justify-content: start; }   /* Lön/Pension efter innehåll (200), beloppet 140 till 200; ingen kontroll breder ut sig över spalten */
}

/* ---------- Bred spalt (>= 940, dvs 980-spalten): de tre frågorna på EN rad ----------
   Raden kräver 856 px innehåll (R2:s aritmetik: 191 + 255 + 354 + 2 x 28) + kortets 2 x 39.6 + kant = 937.
   Ett gemensamt rutnät med tre rader: etiketter / underraden till fråga 1 / kontroller. Frågeblocken är display: contents
   så att varje del är ett eget rutnätsobjekt. Underraden spänner över alla kolumner (grid-column 1 / -1) och står på EN
   rad utan att bredda kolumn 1 (width: max-content i en min-content-kolumn breddar den till 306 px och klipper fältet,
   se R2:s fixtest). DOM-ordning = visuell ordning: fråga, underrad, kontroll. Fråga 2 och 3 har ingen underrad och får
   rad 2 tom; kontrollerna står ändå på samma linje. */
@container ak (min-width: 940px) {
  .ak__fragor { display: grid; grid-template-columns: min-content max-content max-content; grid-template-rows: auto auto auto; column-gap: var(--ak-gap-rad); row-gap: 0; justify-content: space-between; }   /* kolumnerna = sitt innehåll, överskottet delas lika */
  .ak__fraga, .ak__text { display: contents; }
  .ak__q { grid-row: 1; }
  .ak__under { grid-row: 2; grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
  .ak__kontroll { grid-row: 3; align-self: start; }
  .ak__inkomst { grid-template-columns: max-content 15rem; }                      /* beloppet 150 (7 siffror + kr) */
  :root[data-mode="gt"] .ak__fragor { grid-template-columns: min-content max-content; justify-content: start; column-gap: var(--ampy-space-4xl); }   /* två frågor: samlade till vänster, gapet 158 så att underraden (306) slutar före kolumn 2 (börjar vid 350) */
}