/* =========================================================================
   MinDel — startsidan (WAVE 2a)

   Länkas bara från index.html. Allt härifrån gäller enbart startsidan;
   support/integritet/villkor rör den här filen aldrig och ser den aldrig.

   Tokens kommer från site.css (art-direction §3). De definieras inte om
   här — det här är bara nya regler som läser dem. Enda tillägget är
   kategorirampens sex variabler, speglade från assets/categories.js så
   CSS och datakällan går att jämföra vid färgändringar.

   Sidan är en sekvens av rum (art-direction §2.3), inte en enda yta:
   mörkt → ljust → mörkt → ljust. Räknaren lever i det första, mörka rummet
   som ett eget ljust instrument — den är inte en egen sektion.
   ========================================================================= */

:root {
  /* Kategorirampen, art-direction §3. Fem steg i en plommonfamilj plus en
     neutral samlingspost. categories.js bär samma värden som hex-literaler
     eftersom de också skrivs in som inline-färger i DOM:en. */
  --cat-boende: #ae59b4;
  --cat-mat: #9a46a0;
  --cat-transport: #86338c;
  --cat-drift: #731f79;
  --cat-abonnemang: #600467;
  --cat-ovrigt: #5d6d66;
}

/* --- Sidans grund ---------------------------------------------------------
   Startsidan är mörk hela vägen (ADR-0002, tillägget om premiumriktningen).
   Bara startsidan: site.css håller kvar den ljusa grunden åt support-,
   integritets- och villkorssidorna, som aldrig laddar den här filen.      */

body {
  background: var(--room);
  color: var(--paper);
}

html {
  scrollbar-color: var(--room-raised) var(--room-deep);
}

::-webkit-scrollbar-track {
  background: var(--room-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--room-raised);
  border-color: var(--room-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--paper-soft);
}

/* --seam bär betydelse på mörk botten (art-direction §3, tillägget efter
   mockuprunda 1); site.css default --seam-ink är nästan osynlig mot
   smaragd. Regeln låg tidigare på .room--dark. Nu när hela sidan är mörk
   måste den ligga på roten — sidhuvudet och sidfoten står utanför varje
   rum och hade annars saknat synlig fokusring helt. */
:focus-visible {
  outline-color: var(--seam);
}

a {
  text-decoration-color: var(--paper-soft);
}

a:hover {
  text-decoration-color: var(--paper);
}

/* --- Rummen -------------------------------------------------------------
   Full bredd, hårda snitt mellan rummen (art-direction §2.3). Snittet finns
   kvar; det som ändrats är att båda sidorna om det numera är smaragd. Två
   djup — --room och --room-alt — plus elevation bär rytmen i stället för en
   växling mellan mörkt och ljust. Gradienterna ligger INUTI ett rum, aldrig
   över skarven mellan två.                                                */

.room {
  position: relative;
  /* Egen staplingskontext, så dekorlagren nedan aldrig kan hamna ovanpå
     ett annat rums innehåll. */
  isolation: isolate;
  /* Kantdekoren blöder medvetet utanför rummet. Utan det här ger den
     vågrät scroll på i stort sett varje skärmbredd. */
  overflow: hidden;
  padding-block: var(--space-6);
}

/* Innehållet läggs över dekoren utan att dekoren behöver negativ z-index —
   det hade lagt den bakom rummets egen bakgrund och gjort den osynlig. */
.room > .shell {
  position: relative;
  z-index: 1;
}

.room--dark {
  background: linear-gradient(180deg, var(--room) 0%, var(--room-deep) 100%);
  color: var(--paper);
}

.room--mid {
  background: linear-gradient(180deg, var(--room-alt) 0%, var(--room) 100%);
  color: var(--paper);
}

/* Glödfältet. Byggt av radial-gradient, medvetet INTE av filter: blur() på
   färgade element: samma mjuka ljus, men utan att webbläsaren behöver
   rastrera och sudda ett extra lager per rum på en sida som samtidigt
   animerar ett reglage. Färgerna kommer ur --glow-*, som i sin tur är
   color-mix på identitetsfärgerna — de kan alltså inte glida ifrån
   personerna och sömmen. */
.room::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.room--dark::before {
  background:
    radial-gradient(46rem 34rem at -8% 10%, var(--glow-a), transparent 68%),
    radial-gradient(34rem 30rem at 0% 78%, var(--glow-seam), transparent 70%),
    radial-gradient(50rem 38rem at 106% 24%, var(--glow-b), transparent 68%),
    radial-gradient(38rem 32rem at 94% 98%, var(--glow-a), transparent 70%);
  opacity: 0.6;
}

.room--mid::before {
  background:
    radial-gradient(42rem 32rem at 104% 6%, var(--glow-a), transparent 70%),
    radial-gradient(36rem 30rem at -6% 88%, var(--glow-b), transparent 72%);
  opacity: 0.45;
}

/* Punktrastret vid högerkanten, maskat till en mjuk fläck i stället för att
   ligga över hela rummet — annars läser det som en bakgrundstextur över
   sidan i stället för som en kant. */
.room--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 26px 26px;
  color: var(--paper);
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(58% 62% at 100% 26%, #000 0%, transparent 70%);
  mask-image: radial-gradient(58% 62% at 100% 26%, #000 0%, transparent 70%);
}

.room h2 {
  max-width: 24ch;
}

/* --- Kantdekoren ----------------------------------------------------------
   Märkets egen geometri — den gröna ringen, den blå ringen, den gula
   stapeln — kraftigt uppförstorad och utblödd över rummets kanter. Samma
   former som i instrumentets chrome (index.html), inte nya. Färgerna sätts
   här och inte i markupen, så dekoren inte bär egna hexvärden.           */

.brand-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.brand-field__mark {
  position: absolute;
  height: auto;
  opacity: 0.1;
}

/* Låg och långt ut till vänster. Låg den högre korsade den gula stapeln
   rubriken rakt igenom, och dekor som skär genom sidans största text läser
   som ett fel snarare än som en bakgrund. */
.brand-field__mark--left {
  left: -32%;
  top: 26%;
  width: min(46rem, 64vw);
  opacity: 0.08;
  transform: rotate(-14deg);
}

.brand-field__mark--right {
  right: -26%;
  bottom: -16%;
  width: min(56rem, 76vw);
  transform: rotate(10deg);
}

.brand-field__ring-a {
  fill: var(--a);
}

.brand-field__ring-b {
  fill: var(--b);
}

.brand-field__bar {
  fill: var(--seam);
}

@media (max-width: 45rem) {
  /* Mindre och svagare på små skärmar: där konkurrerar dekoren med texten
     i stället för att ligga bakom den. */
  .brand-field__mark {
    opacity: 0.07;
  }

  .brand-field__mark--right {
    bottom: -8%;
  }
}

/* --- Sidhuvud -------------------------------------------------------------
   Överskrider site.css bara på startsidan: fastnitat och i rumsfärg, så det
   ligger kvar som en konstant ram medan rummen växlar under det. Övriga
   sidor (support.html m.fl.) delar samma .masthead-markup men får site.css
   defaultbehandling, ljus och ostatisk — se web/support.html.             */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Genomskinlig och suddad i stället för täckt: rummets glöd och dekor
     fortsätter under sidhuvudet i stället för att kapas av en solid list. */
  background: color-mix(in srgb, var(--room) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--edge-dark);
}

/* Utan backdrop-filter blir en genomskinlig list oläslig så fort innehåll
   scrollar under den. Då är solid rätt svar, inte lägre opacitet. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: var(--room);
  }
}

.masthead .wordmark {
  color: var(--paper);
}

/* Navlänkarna blir egna tryckytor med en pill-hover i stället för en
   understrykning. 44px-höjden kommer från site.css och rörs inte. */
.masthead nav a {
  padding-inline: var(--space-2);
  border-radius: 999px;
  color: var(--paper-soft);
  transition:
    color var(--duration-interaction) var(--ease-interaction),
    background-color var(--duration-interaction) var(--ease-interaction);
}

.masthead nav a:hover,
.masthead nav a[aria-current='page'] {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  text-decoration: none;
}

/* --- Hjälten --------------------------------------------------------------
   Vänsterställd, stor. Båda raderna står kvar i full kontrast (mockup D —
   ingen av dem får tonas ned mot den andra). Det gröna "lön." är ett
   accentord, inte en nedtoning: --a mot --room ligger på 6.4:1, alltså full
   läsbarhet, och accenten kommer ur referensmaterialet för premiumriktningen.

   Från 64rem delar hjälten sig i två: berättelsen till vänster, räknarens
   ingång till höger. Under det ligger de i följd, berättelsen först.     */

/* Rummet ger redan --space-6 i toppen. Det här är bara den extra luft
   tvåkolumnsläget behöver för att rubriken ska stå mitt i sitt rum — på
   smala skärmar lade den ihop med rummets egen padding till en tom halv
   skärm innan rubriken ens började. */
.hero {
  padding-top: clamp(0rem, -1.5rem + 4vw, var(--space-4));
}

.hero__top {
  display: grid;
  gap: clamp(var(--space-4), 5vw, var(--space-6));
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__top {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.05em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 36%, transparent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero__badge svg {
  width: 15px;
  height: 15px;
  color: var(--a);
}

.hero h1 {
  max-width: 18ch;
  margin-top: var(--space-3);
  color: var(--paper);
  /* Staplad layout: rubriken har hela sidbredden. Undre gränsen 2.375rem
     håller "Ni delar hushåll." på en rad ända ned till 320px. */
  font-size: clamp(2.375rem, 1.35rem + 5.2vw, 5.5rem);
  /* Skuggan sitter på rubriken, inte på rummet: den lyfter texten från
     glöden bakom utan att lägga dimma över hela sidan. */
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.hero h1 em {
  font-style: normal;
  color: var(--a);
}

/* Måste stå EFTER basregeln ovan: samma specificitet, så kaskadordningen är
   det enda som avgör. I tvåkolumnsläget har rubriken bara halva bredden och
   behöver en egen, flackare kurva — den här håller "Ni delar hushåll." på en
   rad ned till 64rem, där basens grad var 75px i en 477px bred kolumn. */
@media (min-width: 64rem) {
  .hero h1 {
    font-size: clamp(3.5rem, -0.1rem + 6.4vw, 5.25rem);
  }
}

.hero__lead {
  margin-top: var(--space-3);
  max-width: 46ch;
  color: var(--paper-soft);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Knappar --------------------------------------------------------------
   Två vikter, inte tre. Den primära bär sidans enda fyllda identitetsfärg
   utanför resultatet; den andra är en ren kant. Ingen tredje "tertiär"
   som i praktiken bara är en länk.                                       */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding-inline: var(--space-4);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-caption);
  text-decoration: none;
  transition:
    transform var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction),
    background-color var(--duration-interaction) var(--ease-interaction);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 88%, #ffffff), var(--a));
  /* Mörk smaragd, inte svart: 6.7:1 mot --a och håller sig i familjen. */
  color: #04231a;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--a) 55%, transparent),
    0 18px 34px -18px var(--glow-a),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

.btn--primary:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--a) 70%, transparent),
    0 24px 44px -18px var(--glow-a),
    0 8px 18px -8px rgba(0, 0, 0, 0.55);
}

.btn--ghost {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-dark);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 34%, transparent);
}

/* --- Räknarens ingång som kort ---------------------------------------------
   Namn och nettoinkomster låg tidigare löst i rummet. Som ett upphöjt kort
   blir de hjältens högra halva i stället för en formulärrad under den.   */

.hero-entry {
  /* Referensram för .incomes nedan. */
  container-type: inline-size;
  container-name: entry;
  margin-top: 0;
  padding: clamp(var(--space-3), 3vw, var(--space-4));
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  box-shadow:
    var(--shadow-card-dark),
    0 44px 90px -54px var(--glow-a);
}

.hero-entry__title {
  color: var(--paper);
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}

.hero-entry__lead {
  margin-top: 0.35em;
  max-width: var(--measure);
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* --- Metodvalet ------------------------------------------------------------
   Egen bandbredd under hjälten, med centrerad rubrik — sektionen ställer en
   fråga till båda två, och en centrerad fråga läser som just det. Ingen
   border-top längre: korten under bär avgränsningen själva.              */

.stance-segment {
  margin-top: clamp(var(--space-5), 6vw, var(--space-6));
  text-align: center;
}

/* .room h2 sätter max-width: 24ch. Utan margin-inline: auto står den
   boxen kvar till vänster och bara texten inuti den centreras — vilket
   läser som en feljusterad rubrik, inte som en centrerad. */
.stance-segment__title {
  max-width: 24ch;
  margin-inline: auto;
  color: var(--paper);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
}

.stance-segment__lead {
  margin: 0.5em auto 0;
  max-width: 56ch;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* --- Resultatytan ----------------------------------------------------------
   På små skärmar ligger ringen, personerna och sömmen i en läsbar följd. På
   desktop flankerar personerna ringen, och sömmen får en egen rad under
   alla tre — så varken långa belopp eller extrema andelar tränger ihop den.

   Namngivna grid-areor i stället för ordning i markupen: ringen står först i
   DOM:en (den är sidans visuella ankare på mobil) men hamnar i mitten på
   desktop utan att någon behöver läsa den mellan de två personerna.      */

.hero-result {
  margin-top: clamp(var(--space-4), 4vw, var(--space-5));
  display: grid;
  gap: var(--space-3);
  grid-template-areas:
    'ring'
    'person-a'
    'person-b'
    'seam';
}

.ring {
  grid-area: ring;
  justify-self: center;
}

.person--a {
  grid-area: person-a;
}

.person--b {
  grid-area: person-b;
}

.hero-result > .seam {
  grid-area: seam;
  /* --space-5, inte --space-4: beloppen sätts med line-height 0.92, så
     textrutan slutar ovanför kommatecknets underhäng. Mätt på rutan såg
     --space-4 ut att räcka; på bläcket gjorde den inte det. */
  margin-top: var(--space-5);
}

/* --- Ringen ----------------------------------------------------------------
   En andra rendering av tal som redan står utskrivna bredvid den, därför
   aria-hidden i markupen. Den räknar ingenting själv: --share-a-num skrivs
   av calculator.js paint() på [data-calc] och är samma andel sömmen visar.

   stroke-dashoffset, inte conic-gradient: en gradient går inte att
   övergångsanimera utan att registrera egenskapen med @property, och en
   registrerad --share-a hade gjort sömmens dragning trög. Här räcker en
   vanlig transition på en SVG-egenskap.                                   */

.ring {
  --ring-size: clamp(8rem, 34cqi, 11rem);
  --ring-stroke: 13;
  /* 2π × 56, cirkelns radie i markupens viewBox. Ändras radien måste det
     här värdet räknas om — det finns ingen väg att läsa den ur CSS. */
  --ring-length: 351.858;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
}

.ring__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ring__track,
.ring__fill {
  fill: none;
  stroke-width: var(--ring-stroke);
}

.ring__track {
  stroke: var(--b);
}

.ring__fill {
  stroke: var(--a);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-length);
  stroke-dashoffset: calc(var(--ring-length) * (1 - var(--share-a-num, 50) / 100));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--duration-interaction) var(--ease-interaction);
}

/* Samma regel som sömmens: under drag ska fyllningen följa fingret exakt,
   inte hasa efter med en övergång. .is-dragging sätts av calculator.js på
   .seam, och ringen är dess syskon — därför :has() på den gemensamma
   föräldern i stället för en egen klass. */
.hero-result:has(.seam.is-dragging) .ring__fill {
  transition: none;
}

/* Kärnan lyfts över SVG:n med grid-stacking, inte position: absolute —
   .ring är redan ett place-items: center-grid, så båda barnen hamnar i
   samma cell. */
.ring__svg,
.ring__core {
  grid-area: 1 / 1;
}

.ring__core {
  display: grid;
  place-items: center;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  color: var(--paper);
  background: color-mix(in srgb, var(--room) 55%, transparent);
}

.ring__core svg {
  width: 58%;
  height: 58%;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-width: 0;
}

.person__meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body);
}

.person__pct {
  color: var(--paper-soft);
  font-weight: 500;
  white-space: nowrap;
}

.person__name {
  font-family: var(--font-display);
  color: inherit;
}

/* Siffrorna är sidans hero-typografi (art-direction §4) — större och mer
   självsäkra än rubriken. tabular-nums håller dem stilla medan de räknar
   upp; letter-spacing stannar på -0.02em så tusenavskiljaren (hårt
   mellanslag i sv-SE-formatet) inte kläms ihop till en osynlig lucka.

   data-amount får sitt textinnehåll från assets/calculator.js money(),
   som formaterar med Intl style:'currency' — "kr" sitter redan i den
   strängen. Ingen egen <span class="unit"> läggs till här (till skillnad
   från mockupen, som räknade rått och satte enheten separat): att göra
   det hade dubblerat enheten till "14 880 kr kr". Samma begränsning gäller
   redan .grand__value, som också läser en färdigformaterad sträng. */
.person__amount {
  margin-top: 0.05em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  word-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  /* Personerna staplade: hela panelbredden per belopp. */
  font-size: clamp(2.25rem, 15cqi, 4.5rem);
}

.person--a .person__amount {
  color: var(--a);
}

.person--b .person__amount {
  color: var(--b);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.dot--a {
  background: var(--a);
}

.dot--b {
  background: var(--b);
}

/* --- Sömmen som reglage -----------------------------------------------
   En avdelare, inte ett klot (punchlist #2). Handtaget är en smal, hög
   stapel som korsar bandet lodrätt i stället för en rund bricka som
   ligger ovanpå det. Träffytan hålls på minst 44 × 44 px via ::before,
   utan att det synliga handtaget växer i samma takt.

   --share-a sätts av assets/calculator.js som en procentsträng ("60%").
   Fyllningen läser den, men animerar med scaleX, aldrig width — reglet
   som detektorn flaggar. calc(perc / 100%) konverterar procentsträngen
   till ett rent tal utan att calculator.js behöver veta något om det. */

.seam {
  --share-a: 50%;
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: none;
}

.seam:active {
  cursor: grabbing;
}

.seam.is-dragging .seam__fill,
.seam.is-dragging .seam__handle {
  transition: none !important;
}

.seam__track {
  position: absolute;
  inset: 0;
  margin-block: auto;
  height: 16px;
  border-radius: 999px;
  background: var(--b);
  box-shadow: 0 0 0 1px var(--edge-dark);
  overflow: hidden;
  /* Avslöjandets tredje komponent (art-direction §7, våg 3 uppgift 3):
     färgen anländer i landningsbilden i stället för att vara fullt
     mättad hela tiden. 520 ms delar tid med COUNT_MS i calculator.js
     (motion.js sätter/tar bort .is-settling nedan), så full färg landar
     precis när uppräkningen gör det. */
  transition: background-color 520ms var(--ease-reveal);
}

.seam__fill {
  position: absolute;
  inset: 0;
  background: var(--a);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(calc(var(--share-a) / 100%));
  transition:
    transform var(--duration-interaction) var(--ease-interaction),
    background-color 520ms var(--ease-reveal);
}

/* motion.js sätter .is-settling exakt när ett hållningsbyte utlöser en
   uppräkning i calculator.js — den diskreta händelse som skickar
   { animate: true } — aldrig vid ett tangenttryck. Ingen transition på
   väg IN i det dämpade läget: det ska
   vara ett hopp, inte en nedtoning, så det inte läser som en blinkning
   ("keep it subtle — this is a settle, not a flash"). Övergången
   TILLBAKA till full identitetsfärg, definierad i reglerna ovan, är den
   enda som syns. Färgerna dras mot --room, samma rum sömmen står i, så
   den dämpade tonen läser som "ännu inte anländ" snarare än en egen,
   tredje färg. */
.seam.is-settling .seam__track,
.seam.is-settling .seam__fill {
  transition: none;
}

.seam.is-settling .seam__track {
  background: color-mix(in srgb, var(--b) 45%, var(--room));
}

.seam.is-settling .seam__fill {
  background: color-mix(in srgb, var(--a) 45%, var(--room));
}

.seam__handle {
  position: absolute;
  top: 50%;
  left: var(--share-a);
  width: 7px;
  height: calc(100% + 22px);
  transform: translate(-50%, -50%) scale(1);
  border-radius: 4px;
  background: var(--seam);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition:
    left var(--duration-interaction) var(--ease-interaction),
    transform var(--duration-interaction) var(--ease-interaction);
}

/* Osynlig träffyta. 44 px golv oavsett hur smalt det synliga handtaget är. */
.seam__handle::before {
  content: '';
  position: absolute;
  inset: -18px -19px;
}

.seam:hover .seam__handle,
.seam__handle:focus-visible {
  transform: translate(-50%, -50%) scale(1.05);
}

.seam.is-dragging .seam__handle {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.seam__handle:focus-visible {
  outline: 3px solid var(--seam);
  outline-offset: 4px;
}

/* Levande etikett. aria-valuenow uppdateras redan varje pixel av
   assets/calculator.js (setShareFromPercent → paint), så en ren
   attr()-läsning räcker — ingen extra JS krävs för att den ska hänga med
   under drag. */
.seam__handle::after {
  content: attr(aria-valuenow) '\00a0%';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--room-raised);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-interaction) var(--ease-interaction);
}

.seam:hover .seam__handle::after,
.seam__handle:focus-visible::after,
.seam.is-dragging .seam__handle::after {
  opacity: 1;
}

/* Kritikens punkt 4: bildtexten var centrerad medan allt annat på sidan är
   vänsterställt, och satt utan luft mot beloppens baslinje ovanför. Både
   på desktop och vid 390px löser samma två regler det — vänsterställning
   och ett uttryckligt margin-top i stället för att luta sig mot
   .hero-result:s egen radavstånd. */
.hero-result__caption {
  margin-top: var(--space-3);
  max-width: 44rem;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* Steg 1: personerna sida vid sida, ringen på egen rad ovanför. Varje
   person får knappt halva panelen — gott om plats åt beloppet. */
@container result (min-width: 22rem) {
  .hero-result {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'ring ring'
      'person-a person-b'
      'seam seam';
    column-gap: var(--space-3);
  }

  .person--b {
    align-items: flex-end;
    text-align: right;
  }

  .person--b .person__meta {
    flex-direction: row-reverse;
  }

  .person--b .person__name {
    text-align: right;
  }

  .person__amount {
    font-size: clamp(1.75rem, 7.6cqi, 3.5rem);
  }

  .ring {
    --ring-size: clamp(8rem, 28cqi, 12rem);
  }

  .hero-result > .seam {
    width: 100%;
    height: 72px;
    margin-inline: 0;
  }

  .seam__track {
    height: 20px;
  }

  .seam__handle {
    width: 8px;
  }
}

/* Steg 2: ringen flyttar in MELLAN personerna — referensbildernas
   komposition. Först när panelen är bred nog att en person fortfarande får
   ~36% av den, annars äter ringen upp beloppets plats. */
@container result (min-width: 34rem) {
  .hero-result {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      'person-a ring person-b'
      'seam seam seam';
    align-items: center;
    column-gap: clamp(var(--space-2), 3cqi, var(--space-4));
    row-gap: var(--space-5);
  }

  .person__amount {
    font-size: clamp(1.5rem, 5.6cqi, 3.25rem);
  }

  .ring {
    --ring-size: clamp(7rem, 22cqi, 11rem);
  }

  /* row-gap ovan ger redan etiketten sin plats. */
  .hero-result > .seam {
    margin-top: 0;
  }
}

/* --- Fastnitad kompaktspegling av sömmen --------------------------------
   Wire:as i calculator.js: en IntersectionObserver på hero-resultatet slår
   på/av .is-visible, aria-hidden och inert tillsammans. Kritikens punkt 8:
   opacity: 0 räcker inte ensamt — elementet ligger då kvar i
   tillgänglighetsträdet och kan bli fokuserat. `inert` (satt i markupen och
   togglad i JS) är den egentliga spärren; visibility: hidden här är ett
   andra, defensivt lager som matchar det semantiskt även rent visuellt,
   med en fördröjd övergång så den inte blir interaktiv förrän den setts.
   Egna attribut (data-sticky-*) i stället för data-seam/-track/-handle, så
   den aldrig kan förväxlas med roten calculator.js faktiskt styr — men
   .seam/.seam__track/.seam__handle återanvänds för att ärva all styling
   och all --share-a-läsning från reglaget ovan. */

.sticky-seam {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--room-raised);
  color: var(--paper);
  box-shadow:
    0 -1px 0 var(--edge-dark),
    0 -12px 28px -16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition:
    opacity var(--duration-interaction) var(--ease-interaction),
    visibility 0s var(--duration-interaction);
}

.sticky-seam.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-interaction) var(--ease-interaction);
}

.sticky-seam__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  min-height: 44px;
}

.sticky-seam__side {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-caption);
  white-space: nowrap;
  flex: 0 0 auto;
}

.sticky-seam__side--b {
  flex-direction: row-reverse;
}

.sticky-seam__name {
  font-weight: 600;
  color: var(--paper-soft);
}

.sticky-seam__amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sticky-seam .seam {
  flex: 1 1 auto;
  height: 32px;
  min-width: 48px;
}

.sticky-seam .seam__track {
  height: 8px;
}

.sticky-seam .seam__handle {
  width: 5px;
}

@media (min-width: 56.25rem) {
  /* Kritikens andra runda, punkt 1: 64px var en gissning, och mastheaden
     (position: sticky, z-index: 50, se home.css ovan) mäter i praktiken
     ~85px och blir högre ändå så fort navigationen radbryter — så toppen
     av resultatnamnen och beloppen klipptes av mastheaden.
     --header-h sätts av calculator.js (syncHeaderHeight, ResizeObserver
     på .masthead) till den verkliga höjden, så de två aldrig kan glida
     isär. Fallbacken 85px gäller bara om ResizeObserver saknas. */
  .sticky-seam {
    top: var(--header-h, 85px);
    bottom: auto;
  }

  .sticky-seam__name {
    display: inline;
  }
}

@media (max-width: 56.24rem) {
  .sticky-seam__name {
    display: none;
  }
}

/* --- Instrumentet -----------------------------------------------------
   Ljust objekt i det mörka rummet. Egen chrome, sidans enda riktigt
   diffusa skugga, upphöjd inset-highlight (art-direction §6).           */

/* Kritikens punkt 1: instrumentets högerkant ska linjera med heron, inte
   kapas 216px tidigare av en egen max-width. Båda lever i samma .shell,
   så att inte sätta någon egen bredd här räcker för att kanterna ska möta
   varandra på alla brytpunkter. */
.instrument {
  /* Avståndet kommer från .dashboard:s gap nu, inte från en egen marginal. */
  margin-top: 0;
  background: var(--instrument);
  color: var(--ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Den befintliga fyrlagersskuggan plus ett grönt glödlager. Glöden ligger
     sist och YTTERST i listan: den lägger ljus runt kortet utan att röra
     hårstrecket eller inset-highlighten som skiljer "platt kort med skugga"
     från "objekt som står upp". */
  box-shadow:
    0 0 0 1px rgba(12, 37, 28, 0.08),
    0 40px 80px -30px rgba(0, 0, 0, 0.55),
    0 10px 24px -14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 #fff,
    0 50px 100px -60px var(--glow-a);
}

.instrument__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, #f2f6f2, #eef3ee);
  border-bottom: 1px solid var(--edge-light);
}

.instrument__brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84375rem;
}

.instrument__brand svg {
  width: 18px;
  height: 18px;
}

/* "UPPDATERAS DIREKT" — den enskilt starkaste skiljelinjen mellan
   myndighetsblankett och modernt verktyg i hela researchunderlaget
   (art-direction §6). Live-uppdateringen fanns redan; det som saknades
   var att sidan sa det högt. */
.instrument__live {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.instrument__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--seam-ink);
  box-shadow: 0 0 0 3px rgba(147, 111, 0, 0.18);
  flex: none;
}

.instrument__body {
  /* Referensram för @container nedan. Bredden kommer från .dashboard-
     kolumnen, aldrig från innehållet, så inline-size-containment är säkert. */
  container-type: inline-size;
  container-name: instrument;
  padding: var(--space-3);
}

@media (min-width: 40rem) {
  .instrument__body {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }
}

.instrument .step {
  padding-block: var(--space-4);
  border-top: 1px solid var(--edge-light);
}

.instrument .step:first-child {
  border-top: 0;
  padding-top: 0;
}

.instrument .step:last-child {
  padding-bottom: 0;
}

/* Numrerad steg-chrome (siffra i cirkel) är bannlyst — elimineringslistans
   punkt 1. Rubriken bär ordningen genom att stå i dokumentordning, inte
   genom en badge. */
.instrument .step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
}

/* Kritikens punkt 7: .masthead är position: sticky och lägger sig ovanpå
   allt (z-index: 50). Utan scroll-margin-top hamnar ett rubrik-mål — t.ex.
   "Hushållets kostnader" — bakom den så fort något scrollar dit. 5rem
   ger luft utöver mastens egen höjd (~4rem) på alla brytpunkter. */
#manad,
#kostnader,
.instrument .step__title {
  scroll-margin-top: 5rem;
}

.instrument .step__lead {
  margin-top: 0.4em;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-caption);
}

.cost-tabs {
  width: min(100%, 34rem);
  margin-top: var(--space-3);
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--room-light);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--edge-light);
}

.cost-tab {
  min-width: 0;
  min-height: 48px;
  padding: 0.55rem var(--space-2);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--duration-interaction) var(--ease-interaction),
    background-color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.cost-tab:hover {
  color: var(--ink);
}

/* Fylld i person A:s grönt i stället för "vitt kort på ljusgrå ram". Det
   valda läget behöver vinna över det ovalda på mer än en skuggnyans.
   --room mot --a ligger på 6.4:1. */
.cost-tab[aria-selected='true'] {
  color: var(--room);
  background: var(--a);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--a) 60%, transparent),
    0 10px 22px -14px var(--glow-a);
}

.cost-tab[aria-selected='true']:hover {
  color: var(--room);
}

.cost-tab:focus-visible {
  outline: 3px solid var(--seam-ink);
  outline-offset: 2px;
}

.cost-panel {
  margin-top: var(--space-3);
}

.cost-panel[hidden] {
  display: none;
}

.lump-total {
  display: block;
  max-width: 42rem;
}

.lump-total__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-caption);
  font-weight: 600;
}

.lump-total__field {
  min-height: 56px;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--ink-soft);
  background: var(--instrument);
  border: 1px solid var(--edge-light);
  border-radius: var(--radius);
  transition:
    border-color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.lump-total__field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seam) 35%, transparent);
}

.lump-total__field input {
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.lump-total__field input::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 65%, transparent);
  opacity: 1;
}

.lump-total__field > span {
  flex: none;
  font-size: var(--text-caption);
  white-space: nowrap;
}

/* --- Instrumentpanelen och resultatpanelen sida vid sida --------------------
   Under 64rem ligger de i följd — kostnaderna först, resultatet under, samma
   ordning som tidigare. Från 64rem står de bredvid varandra: det man matar
   in till vänster, det man får ut till höger, båda synliga samtidigt.

   align-items: start, så den kortare panelen inte sträcks till den längres
   höjd. Instrumentet växer när utgiftsrader läggs till; resultatet ska inte
   få ett stort tomrum av det.                                            */

.dashboard {
  /* Samma sektionsrytm som .stance-segment får uppåt, så metodvalet och
     dashboarden står lika långt ifrån varandra som hjälten och metodvalet. */
  margin-top: clamp(var(--space-5), 6vw, var(--space-6));
  display: grid;
  gap: clamp(var(--space-3), 3vw, var(--space-4));
  align-items: start;
}

@media (min-width: 64rem) {
  .dashboard {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

}

.result-segment {
  margin-top: 0;
}

/* Ligger inuti .result-surface. Rubriken bär panelens namn på samma sätt
   som instrumentets chrome bär sitt — kolumnerna börjar därmed på samma
   höjd, vilket de inte gjorde när den här raden stod utanför kortet. */
.result-segment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.result-segment__title {
  color: var(--paper);
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  scroll-margin-top: 5rem;
}

/* Namnger den valda modellen med calculator.js egen METHOD_LABELS, så
   panelen aldrig kan kalla fördelningen något annat än kvittot gör. */
.stance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 34%, transparent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
}

.stance-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a);
  flex: none;
}

/* Tom tills calculator.js har skrivit i den — annars syns en naken pill
   under den korta stund innan första uträkningen. */
.stance-chip:has(span:empty) {
  display: none;
}

.result-surface {
  /* Referensram för resultatets layout. Beloppen och ringen ska mäta sig mot
     PANELEN, inte mot fönstret: panelen är halva dashboarden från 64rem, och
     ett @media-mått gav 50px stora belopp i en 185px bred kolumn. */
  container-type: inline-size;
  container-name: result;
  padding: clamp(var(--space-3), 3vw, var(--space-5));
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  color: var(--paper);
  box-shadow:
    var(--shadow-card-dark),
    0 44px 90px -54px var(--glow-a);
}

.result-surface .hero-result {
  margin-top: 0;
}

.result-segment .receipt {
  margin-top: var(--space-4);
}

/* --- Steg 1: hållningarna -----------------------------------------------
   Fyra lager samtidigt (art-direction §6, steg 1): vila, vald (bakgrund +
   ramviktshopp + skugga), nedtonade syskon, och ett levande bockmärke.
   Riktiga radioknappar under — piltangenter fungerar utan simulering.    */

.stances {
  border: 0;
  /* Rubriken ovanför är centrerad; korten är det inte. Innehållet i ett kort
     är en förklaring att läsa, och centrerad brödtext läser sämre. */
  text-align: left;
  margin: clamp(var(--space-4), 4vw, var(--space-5)) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .stances {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stance {
  display: block;
  cursor: pointer;
}

.stance input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.stance__box {
  position: relative;
  display: block;
  height: 100%;
  padding: clamp(var(--space-3), 2.4vw, var(--space-4));
  border-radius: var(--radius-xl);
  color: var(--paper);
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-card-dark); /* lager 1: vila, hårstrecket som skugga */
  transition:
    box-shadow var(--duration-interaction) var(--ease-interaction),
    background var(--duration-interaction) var(--ease-interaction),
    transform var(--duration-interaction) var(--ease-interaction),
    opacity var(--duration-interaction) var(--ease-interaction);
}

/* Hover-elevation via det additiva skuggsystemet (art-direction §6, våg 3
   uppgift 5) — bara på de OVALDA korten. Det valda kortet har redan sin
   egen starka signal två regler ned (ring + skugga) och ska inte tappa
   den bara för att pekaren råkar vila där; :has() skiljer ut fallet utan
   att någon extra klass behövs. */
.stance:hover:not(:has(input:checked)) .stance__box {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-card-dark),
    0 24px 44px -26px rgba(0, 0, 0, 0.7);
}

/* lager 2 + 3: flerskiktad vald-state, aldrig bara en färg */
.stance input:checked + .stance__box {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--seam) 12%, var(--surface-2)),
    color-mix(in srgb, var(--seam) 6%, var(--surface-1))
  );
  box-shadow:
    0 0 0 2px var(--seam),
    0 22px 44px -22px var(--glow-seam),
    0 14px 26px -14px rgba(0, 0, 0, 0.55);
}

.stance input:focus-visible + .stance__box {
  outline: 3px solid var(--seam);
  outline-offset: 2px;
}

/* lager 3 (forts.): syskonen tappar elevation, den enskilda spaken för
   att valet ska kännas som ett val. */
.stances:has(input:checked) .stance:not(:has(input:checked)) .stance__box {
  opacity: 0.75;
}

/* lager 4: ett levande bockmärke, inte bara ram och bakgrundston. */
.stance__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--seam);
  display: none;
  align-items: center;
  justify-content: center;
}

.stance input:checked + .stance__box .stance__check {
  display: flex;
}

.stance__check svg {
  width: 10px;
  height: 10px;
}

/* Miniatyren blir levande: 50/50, 60/40, 75/25 i samma två färger som
   sömmen. Statiska proportioner, men i sömfärgerna gör de tre korten
   omedelbart läsbara som "vad blir konsekvensen". */
.stance__viz {
  display: flex;
  width: 5.5rem;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--b);
  box-shadow: 0 6px 16px -10px var(--glow-b);
}

.stance__viz i {
  display: block;
  height: 100%;
  background: var(--a);
}

.stance__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  padding-right: 1.5rem;
}

.stance__body {
  display: block;
  margin-top: 0.35em;
  max-width: 30em;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* Bockmärket är en gul bricka; kryssets färg är alltså text på gult, inte
   text på rummet. */
.stance__check {
  color: var(--ink);
}

/* --- Snabbval och kostnadsrader ------------------------------------------
   Normalflödet är ett klick på en vanlig utgift och därefter bara beloppet.
   Kategori och namn följer snabbvalet; fri text ligger bakom "Egen utgift". */
.expense-quick {
  margin-top: var(--space-3);
}

.expense-quick__label,
.expense-list__head {
  color: var(--ink-soft);
  font-size: var(--text-caption);
  font-weight: 600;
}

.expense-presets {
  margin-top: var(--space-1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}

/* Tröskelvärdena är räknade, inte gissade: varje ruta lägger 44px ikon,
   18px bocken och 12px luft ovanpå etiketten. Under ~125px etikettyta
   börjar "Internet & mobil" brytas mitt i ett ord. */
@container instrument (min-width: 38rem) {
  .expense-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container instrument (min-width: 52rem) {
  .expense-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.expense-preset {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: var(--space-1) var(--space-2);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-1);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  background: var(--room-light);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color var(--duration-interaction) var(--ease-interaction),
    border-color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.expense-preset:hover {
  border-color: var(--edge-light);
  box-shadow: var(--shadow-raised-light);
}

.expense-preset:focus-visible {
  outline: 3px solid var(--seam-ink);
  outline-offset: 2px;
}

.expense-preset[data-added='true'] {
  background: color-mix(in srgb, var(--seam) 9%, var(--instrument));
  border-color: var(--seam-ink);
}

.expense-preset__icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.expense-preset__state {
  width: 20px;
  height: 20px;
}

.expense-preset__state svg {
  display: block;
  width: 100%;
  height: 100%;
}

.expense-preset__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.expense-preset__state {
  display: none;
  place-items: center;
  color: var(--seam-ink);
}

.expense-preset[data-added='true'] .expense-preset__state {
  display: grid;
}

.expense-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--edge-light);
}

.expense-list[hidden] {
  display: none;
}

.expense-list__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.expense-list__head [data-expense-count] {
  font-weight: 400;
}

.erows {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.erow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 44px;
  grid-template-areas:
    'icon title title remove'
    'icon amount payer remove';
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-2);
  background: var(--room-light);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--edge-light);
  transition: box-shadow var(--duration-interaction) var(--ease-interaction);
}

.erow:hover,
.erow:focus-within {
  box-shadow: var(--shadow-raised-light);
}

/* Ledande markör: kategorins ikon i stället för en färgsvatch (kritikens
   punkt 9/10, art-direction §3 — identiteten bärs av formen, färgen av
   ordning/familj). assets/categories.js sätter innerHTML (fill="currentColor")
   och .style.color per rad. */
.erow__icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
}

.erow__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.erow__title {
  grid-area: title;
}

.erow .field--row {
  grid-area: amount;
  justify-self: stretch;
}

.erow__remove {
  grid-area: remove;
}

/* Enradsvarianten kräver 24 (ikon) + 112 (titel) + 160 (belopp) + 118
   (betalaren) + 44 (ta bort) plus fyra mellanrum à 12 = 506px. Tröskeln 32rem
   ger 512px, alltså precis marginal.

   Mät mot INNEHÅLLSRUTAN: @container räknar utan elementets egen padding, och
   instrumentkroppen har 32px på var sida. Vid 1440px är kortet 600px brett men
   containern bara 536px — en tröskel satt efter kortets bredd slår därför till
   för sent. Tröskeln höjdes från 29rem när betalaren tillkom. */
@container instrument (min-width: 32rem) {
  .erow {
    grid-template-columns: 24px minmax(7rem, 1fr) minmax(10rem, 0.6fr) auto 44px;
    grid-template-areas: 'icon title amount payer remove';
  }
}

/* Smalast: beloppet får en egen rad.

   Tvåradsvarianten ovanför ställer beloppet och betalaren bredvid varandra.
   Betalaren är 118px intrinsiskt breda, och av beloppsfältets återstående
   124px går 24 till padding, 51 till "kr/mån" och 6 till mellanrummet — kvar
   blir 43px åt själva talet. "12500" behöver 55px, så en normal hyra låg
   klippt i rutan. Det syntes vid 1024px, alltså en helt vanlig laptop, och
   inte alls vid 1440px där instrumentet är bredare.

   Tröskeln mäts mot INNEHÅLLSRUTAN, som resten av instrumentets @container-
   regler: vid 1024px är kortet 434px men containern 370px. 25rem = 400px
   ligger strax över det och strax under bredden där tvåradsvarianten har
   råd med båda.

   "kr/mån" kortas medvetet inte ned till "kr" i stället. Enheten är en del
   av vad talet betyder, och en månadskostnad som läses som ett engångsbelopp
   är ett värre fel än en rad till. */
@container instrument (max-width: 25rem) {
  .erow {
    grid-template-columns: 24px minmax(0, 1fr) 44px;
    grid-template-areas:
      'icon title remove'
      'icon amount remove'
      'icon payer remove';
  }
}

.erow__title {
  font: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 0.35em 0;
  min-height: 44px;
  min-width: 0;
  width: 100%;
}

.erow:hover .erow__title {
  border-bottom-color: var(--edge-light);
}

.erow__title:focus {
  outline: none;
  border-bottom-style: solid;
  border-bottom-color: var(--ink);
}

.field {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: 48px;
  padding-inline: var(--space-2);
  background: var(--instrument);
  border: 1px solid var(--edge-light);
  border-radius: var(--radius);
}

.field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seam) 35%, transparent);
}

.field span {
  font-size: var(--text-caption);
  color: var(--ink-soft);
  white-space: nowrap;
}

.erow__amount {
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  min-width: 4ch;
  text-align: right;
  padding: 0;
}

.erow__amount:focus {
  outline: none;
}

.erow__remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background var(--duration-interaction) var(--ease-interaction),
    color var(--duration-interaction) var(--ease-interaction);
}

.erow__remove:hover {
  background: var(--room-light);
  color: #b3261e;
}

.erow__remove svg {
  width: 18px;
  height: 18px;
}

.addrow {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-2);
  background: transparent;
  border: 1px dashed var(--edge-light);
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    border-color var(--duration-interaction) var(--ease-interaction),
    color var(--duration-interaction) var(--ease-interaction);
}

.addrow:hover {
  border-style: solid;
  border-color: var(--ink-soft);
  color: var(--ink);
}

.addrow svg {
  width: 18px;
  height: 18px;
}

/* --- Kategoristapel och legend --------------------------------------------
   Ledarlinjerna i mockupen krockade (punchlist #3) — tillbaka till mockup
   A:s rena legendrad: prick, etikett, belopp, på en rad under stapeln.
   Segmentens bredd sätts av assets/calculator.js via flex-grow (inline
   style), inte av CSS — containern ger dem bara rytmen (gap, radie).     */

.catbar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-top: var(--space-3);
  border-radius: 999px;
  overflow: hidden;
  background: var(--room-light);
}

.catbar[hidden],
.catlegend[hidden] {
  display: none;
}

.catbar__seg {
  min-width: 3px;
  flex-basis: 0;
}

/* Kritikens punkt 3: 15rem var för smalt för längre etiketter ("Boende &
   lån", "Abonnemang & streaming") tillsammans med belopp och andel på
   samma rad, så de bröt till två rader. När bara vissa poster i en
   rastrad wrappar blir raden olika hög för sina celler, och eftersom grid
   sträcker celler till radens höjd (align-items: stretch, default) hamnar
   avdelarna olika långt ner — därav den skeva känslan. Bredare kolumner
   där ingen etikett behöver wrappa löser båda på en gång. auto-fit i
   stället för auto-fill kollapsar dessutom oanvända kolumner när det bara
   finns ett fåtal kategorier, så resten av raden inte lämnas tom. */
.catlegend {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  column-gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
}

.catlegend__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 4ch;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-caption);
  border-bottom: 1px solid var(--edge-light);
}

.catlegend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  align-self: center;
}

.catlegend__label {
  min-width: 0;
  color: var(--ink-soft);
}

.catlegend__value {
  font-weight: 600;
}

.catlegend__share {
  min-width: 3.5ch;
  text-align: right;
  color: var(--ink-soft);
}

.grand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}

.grand__label {
  font-weight: 600;
  color: var(--ink-soft);
}

.grand__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  letter-spacing: -0.02em;
}

/* --- Namn och nettoinkomster i hero ----------------------------------------
   Kärnindatan kommer före metod och kostnader. Varje fält har en synlig label
   och en tydlig kontrollkant; placeholders används inte som etiketter. */

.incomes {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

/* 27rem, inte 34: två fält kräver ~180px vardera för belopp plus "kr/mån"
   plus fältets egen luft, och 12px rutnätsluft emellan. Under det står de
   hellre på var sin rad än klipper beloppet. */
@container entry (min-width: 27rem) {
  .incomes {
    grid-template-columns: 1fr 1fr;
  }
}

/* Nedsänkt yta inuti hjältekortet, inte ännu ett upphöjt kort ovanpå det.
   Kortet är objektet; fälten är fördjupningar i det. */
.income {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--room-deep) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-dark);
}

.identity,
.income__field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.identity__label,
.income__label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--paper-soft);
}

.identity__input {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem var(--space-2);
  /* --paper-soft, inte --edge-dark: en kontrollkant måste hålla 3:1 mot sin
     omgivning (WCAG 1.4.11). Det är ett tillgänglighetsval, inte ett
     stilval, och överlever därför omdesignen oförändrat. */
  border: 1px solid var(--paper-soft);
  border-radius: var(--radius-sm);
  background: var(--room-deep);
  color: var(--paper);
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  transition:
    border-color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.identity__input:hover,
.identity__input:focus {
  border-color: var(--paper);
}

.identity__input:focus {
  outline: none;
}

.income--a .identity__input:focus {
  box-shadow: 0 0 0 3px var(--a);
}

.income--b .identity__input:focus {
  box-shadow: 0 0 0 3px var(--b);
}

.income__label {
  min-height: 1.5em;
}

.income__row {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-height: 48px;
  padding-inline: var(--space-2);
  border: 1px solid var(--paper-soft);
  border-radius: var(--radius-sm);
  background: var(--room-deep);
  transition:
    border-color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.income__row:hover,
.income__row:focus-within {
  border-color: var(--paper);
}

.income--a .income__row:focus-within {
  box-shadow: 0 0 0 3px var(--a);
}

.income--b .income__row:focus-within {
  box-shadow: 0 0 0 3px var(--b);
}

.income input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--paper);
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
}

.income input:focus {
  outline: none;
}

.income .unit {
  font-size: var(--text-caption);
  color: var(--paper-soft);
  white-space: nowrap;
}

.income-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--edge-dark);
  overflow: hidden;
}

.income-bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  border-radius: inherit;
  /* Wire:as i calculator.js (updateIncomeBars): scaleX, aldrig width —
     samma regel som sömmen. Övergången gäller varje tangenttryck, till
     skillnad från beloppens uppräkning som bara spelas vid hållningsbyte
     (art-direction §7) — en ren CSS-transition på en transform behöver
     ingen sådan spärr. */
  transition: transform var(--duration-interaction) var(--ease-interaction);
}

.income--a .income-bar i {
  background: var(--a);
}

.income--b .income-bar i {
  background: var(--b);
}

/* --- Kvittot: förklaring och kopiering ------------------------------------ */

/* Kritikens punkt 5: .step ovanför ger redan padding-block: space-4 i
   botten (samma rytm som mellan steg 1/2/3), så ett eget margin-top här
   dubblade avståndet till avdelaren. Border-top:en är luften som behövs. */
.receipt {
  padding-top: var(--space-3);
  border-top: 1px solid var(--edge-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.receipt__explain {
  flex: 1 1 20rem;
  min-width: 0;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* Ljus felröd. #b3261e är läsbar på ljus botten men faller under 3:1 mot
   smaragden — samma värde som tidigare användes i den mörka varianten. */
.receipt__explain[data-state='error'] {
  color: #ffb4ab;
}

.copy {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  background: var(--paper);
  color: var(--room);
  border: 1px solid var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--duration-interaction) var(--ease-interaction);
}

.copy:hover {
  opacity: 0.88;
}

.copy svg {
  width: 18px;
  height: 18px;
}

.copy[data-state='done'] {
  color: var(--paper);
  background: var(--a-ink);
  border-color: var(--a-ink);
}

.copy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.privacy {
  margin-top: var(--space-4);
  max-width: var(--measure);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

.privacy svg {
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--a);
  flex: none;
}

/* --- Jämförelsen ----------------------------------------------------------
   Hopfälld som standard, samma resonemang som tidigare: den som redan vet
   vad hen vill ska inte behöva läsa förbi den.                           */

/* Ligger numera under hela dashboarden i stället för inuti resultatpanelen:
   den jämför alla tre modellerna och hör därför till båda kolumnerna, inte
   till den högra. Den ligger kvar inuti [data-calc], så calculator.js
   hittar [data-compare-body] oförändrat. */
.compare {
  margin-top: clamp(var(--space-4), 4vw, var(--space-5));
  border-top: 1px solid var(--edge-dark);
}

.compare summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--paper-soft);
}

.compare summary::-webkit-details-marker {
  display: none;
}

.compare summary::after {
  content: '+';
  font-weight: 400;
}

.compare[open] summary::after {
  content: '\2013';
}

.compare[open] summary {
  color: var(--paper);
}

.compare__table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: var(--text-caption);
}

.compare__table th,
.compare__table td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--edge-dark);
  white-space: nowrap;
}

.compare__table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper-soft);
}

.compare__table tbody th {
  font-weight: 400;
  color: var(--paper-soft);
}

.compare__table tr[data-current] th,
.compare__table tr[data-current] td {
  background: var(--room-raised);
  color: var(--paper);
  font-weight: 600;
}

.compare__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--seam);
  border-radius: 999px;
  padding: 0.1em 0.6em;
  vertical-align: 0.1em;
}

.compare__na {
  color: var(--paper-soft);
}

/* Överskrivningarna .result-segment .receipt / .compare / .copy som stod
   här är borta. De flyttade kvittots och jämförelsens kontrast till det
   mörka rummet medan basreglerna satt kvar på ljus botten. Nu är sidan mörk
   hela vägen, så den mörka behandlingen ÄR basen — och .compare ligger
   dessutom utanför .result-segment, dit selektorerna inte nådde. */

/* --- Så går en månad till (ljust rum) --------------------------------------
   Numrerad kedja utan sifferbadge (elimineringslistans punkt 1) — <ol>
   bär ordningen semantiskt, den vertikala linjen bär den visuellt.       */

.months {
  list-style: none;
  margin: clamp(var(--space-4), 4vw, var(--space-5)) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--space-3), 3vw, var(--space-4));
}

@media (min-width: 45rem) {
  .months {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(var(--space-4), 4vw, var(--space-5));
  }
}

/* Upphöjda kort i stället för en kant till vänster. Fortfarande utan
   sifferbadge — <ol> bär ordningen semantiskt (elimineringslistans punkt 1),
   och den färgade vänsterkanten är kvar borttagen (punkt 11). */
.months li {
  padding: clamp(var(--space-3), 2.4vw, var(--space-4));
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-card-dark);
}

.months h3 {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--paper);
}

.months p {
  margin-top: 0.4em;
  max-width: 42em;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* --- Vad appen inte gör (mörkt rum) -----------------------------------
   Ingen fyrkortsgrid — fyra likadana ikon+rubrik+text-kort är en
   bannlyst scaffold. Samma vertikala kedjerytm som .months återanvänds
   här i stället, med en ikon inline i rubriken snarare än centrerad ovanför
   den. Det gör att sektionen läser som en lista att gå igenom, inte som
   fyra utställningsmontrar. */

.negations {
  list-style: none;
  margin: clamp(var(--space-4), 4vw, var(--space-5)) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--space-3), 3vw, var(--space-4));
}

@media (min-width: 45rem) {
  .negations {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(var(--space-4), 4vw, var(--space-5));
  }
}

/* Fortfarande en kedja att gå igenom, inte fyra utställningsmontrar: ikonen
   sitter kvar inline i rubriken i stället för centrerad ovanför den. Det
   enda som ändrats är att raderna nu ligger på en yta i stället för mot en
   kant — fyrkortsgriden är fortsatt bannlyst. */
.negations li {
  padding: clamp(var(--space-3), 2.2vw, var(--space-4));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--room-raised) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-dark);
}

.negations strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body);
}

.negations svg {
  width: 20px;
  height: 20px;
  color: var(--seam);
  flex: none;
}

.negations span {
  display: block;
  margin-top: 0.4em;
  max-width: 42em;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* --- Status --------------------------------------------------------------- */

.status {
  display: flex;
  /* Ingen wrap: pricken är en markör för texten, inte en egen rad. Med
     flex-wrap hamnade den ensam överst så fort texten blev tvåradig. */
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--room-raised) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-dark);
  color: var(--paper);
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  font-size: var(--text-caption);
}

.status__dot {
  width: 10px;
  height: 10px;
  /* Linjerar mot första radens x-höjd i stället för mot boxens överkant. */
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--seam);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--seam) 20%, transparent);
  flex: none;
}

.status > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- FAQ -------------------------------------------------------------- */

.faq {
  max-width: var(--measure);
  margin-top: clamp(var(--space-4), 4vw, var(--space-5));
  border-top: 1px solid var(--edge-dark);
}

.faq details {
  border-bottom: 1px solid var(--edge-dark);
}

.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-weight: 400;
  color: var(--paper-soft);
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq details p {
  padding-bottom: var(--space-3);
  max-width: var(--measure);
  color: var(--paper-soft);
}

.room__head {
  max-width: var(--measure);
  margin-bottom: var(--space-2);
}

.room__head p {
  margin-top: var(--space-2);
  color: var(--paper-soft);
}

/* --- Sidfoten -------------------------------------------------------------
   site.css sidfot är ljus och delas med support-, integritets- och
   villkorssidorna. Den här överskrivningen hör därför hemma i home.css och
   ingen annanstans: flyttas den till site.css blir de tre andra sidorna
   mörka i botten och ljusa i övrigt (web/README.md, "Vilken stilmall en
   regel hör hemma i").                                                    */

.footer {
  background: var(--room-deep);
  border-top-color: var(--edge-dark);
  color: var(--paper-soft);
}

.footer nav a {
  color: var(--paper-soft);
}

.footer nav a:hover {
  color: var(--paper);
}

/* =========================================================================
   Rörelse (våg 3) — styrs av assets/motion.js

   Hela sidans sofistikeringsbudget går till EN sak: sömmen som svarar på
   inmatning (art-direction §7, färgankomsten och entrén är definierade
   uppe vid .seam). Allt här är medvetet tystare och delar samma enda
   grammatik — opaciteten hinner klart, sedan landar en kort förflyttning
   strax efter — i stället för olika rörelsespråk på olika ställen.

   Vilotillståndet, alltså UTAN .is-priming, är alltid fullt synligt.
   Klassen sätts och tas bort enbart av motion.js; om modulen aldrig
   laddas, om IntersectionObserver saknas, eller om något annat går fel
   syns hela sidan ändå direkt. Det är alltså en additiv effekt ovanpå ett
   läsbart standardläge, aldrig en förutsättning för att läsa innehållet —
   "det vanligaste sättet scroll-reveal går sönder" (art-direction §7).
   ========================================================================= */

.hero h1,
.hero-entry,
.stance-segment,
.instrument,
.room:not([data-calc]) {
  transition:
    opacity 320ms var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

.hero h1.is-priming,
.hero-entry.is-priming,
.stance-segment.is-priming,
.instrument.is-priming,
.room:not([data-calc]).is-priming {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

/* Hero-entrén går i sekvens: rubrik, namn/inkomst, metod och sist
   kostnadsinstrumentet — inte allt på en gång. */
.hero-entry {
  transition-delay: 90ms;
}

.stance-segment {
  transition-delay: 150ms;
}

.instrument {
  transition-delay: 230ms;
}

/* --- Utskrift ------------------------------------------------------------ */

@media print {
  .masthead,
  .sticky-seam,
  .copy,
  .skip-link {
    display: none;
  }
}

/* --- Betalarkontrollen på raden -------------------------------------------
   Riktiga radioknappar under brickorna, så piltangenterna fungerar utan att
   någon simulerar dem. Tre lägen: ej angett, person A, person B. Färgen bär
   inte identiteten ensam — varje bricka visar personens initial, och hela
   namnet ligger i en visually-hidden-etikett.

   Lever inuti instrumentet, sidans enda ljusa yta, och använder därför
   --ink-skalan.                                                            */

.payer {
  grid-area: payer;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.payer__option {
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* 44px träffyta utan att den synliga brickan växer lika mycket. */
.payer__option::before {
  content: '';
  position: absolute;
  inset: -9px -2px;
}

.payer__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.payer__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--edge-light);
  transition:
    background-color var(--duration-interaction) var(--ease-interaction),
    color var(--duration-interaction) var(--ease-interaction),
    box-shadow var(--duration-interaction) var(--ease-interaction);
}

.payer__option:hover .payer__mark {
  box-shadow: inset 0 0 0 1px var(--ink-soft);
}

.payer__option input:checked ~ .payer__mark {
  color: var(--instrument);
  background: var(--ink-soft);
  box-shadow: none;
}

/* Identitetsfärgerna sist, så de vinner över det neutrala valda läget. */
.payer__option--a input:checked ~ .payer__mark {
  color: var(--room);
  background: var(--a);
}

.payer__option--b input:checked ~ .payer__mark {
  color: var(--room);
  background: var(--b);
}

.payer__option input:focus-visible ~ .payer__mark {
  outline: 3px solid var(--seam-ink);
  outline-offset: 2px;
}

/* Autogiro: raden dras redan från någons konto och flyttas aldrig av ett
   förslag. Meningslös utan betalare, och därför avstängd då. */
.payer__lock {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background-color var(--duration-interaction) var(--ease-interaction),
    color var(--duration-interaction) var(--ease-interaction);
}

/* Samma 44px-golv som brickorna, av samma skäl: den synliga knappen ska få
   vara liten i en tät rad, träffytan ska inte (§5). */
.payer__lock::before {
  content: '';
  position: absolute;
  inset: -8px -2px;
}

.payer__lock svg {
  width: 16px;
  height: 16px;
}

.payer__lock:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

.payer__lock[aria-pressed='true'] {
  background: var(--seam);
  color: var(--ink);
}

.payer__lock:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.payer__lock:focus-visible {
  outline: 3px solid var(--seam-ink);
  outline-offset: 2px;
}

/* --- Domslutet: resultatpanelens rubrik ------------------------------------
   Överföringen är det enda i panelen som går att handla på. Fördelningen under
   den är motiveringen. Bara två av fyra lägen bär en siffra; i de andra faller
   rubriken tillbaka på en rad text och låter ringen bära resultatet.        */

.verdict {
  margin-bottom: clamp(var(--space-3), 3cqi, var(--space-4));
  padding-bottom: clamp(var(--space-3), 3cqi, var(--space-4));
  border-bottom: 1px solid var(--edge-dark);
}

.verdict__lead {
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
}

.verdict__amount {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  /* Samma golv som beloppen: sv-SE använder hårt mellanslag som
     tusenavskiljare, och tightare tracking klämmer ihop det till en osynlig
     lucka (ADR-0002). */
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--a);
  font-size: clamp(2rem, 9cqi, 3.75rem);
}

.verdict__note {
  margin-top: 0.5em;
  max-width: 48ch;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

/* Tomma element ska inte lämna en lucka efter sig. */
.verdict__lead:empty,
.verdict__amount:empty,
.verdict__note:empty {
  display: none;
}

.verdict[data-verdict-state='even'] .verdict__amount {
  font-size: clamp(1.5rem, 5cqi, 2.25rem);
}

/* --- Föreslå räkningsfördelning ------------------------------------------- */

.suggest {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  padding: 0 var(--space-3);
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--edge-dark);
  cursor: pointer;
  transition: background-color var(--duration-interaction) var(--ease-interaction);
}

.suggest[hidden] {
  display: none;
}

.suggest:hover {
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}

.suggest svg {
  width: 18px;
  height: 18px;
}

.proposal {
  margin-top: var(--space-3);
  padding: clamp(var(--space-3), 3cqi, var(--space-4));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--room-deep) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-dark);
}

.proposal[hidden] {
  display: none;
}

.proposal__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body);
  max-width: 46ch;
}

.proposal__columns {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

@container result (min-width: 26rem) {
  .proposal__columns {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
}

.proposal__who {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--paper-soft);
}

.proposal__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.4em;
  font-size: var(--text-caption);
}

.proposal__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Låsta autogiron ligger kvar där de ligger; sömfärgen säger att de inte
   är en del av det som föreslås flyttas. */
.proposal__list li[data-locked] {
  color: var(--seam);
}

.proposal__total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--edge-dark);
  font-family: var(--font-display);
  font-weight: 700;
}

.proposal__meta {
  margin-top: var(--space-3);
  max-width: 60ch;
  color: var(--paper-soft);
  font-size: var(--text-caption);
}

.proposal__actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Utanför toleransen visas uppdelningen dämpad: den är ett underlag för
   varför den inte duger, inte ett erbjudande. */
.proposal[data-proposal-state='off'] .proposal__columns {
  opacity: 0.55;
}

.btn--sm {
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--text-caption);
}