/* Vaxla, riktning "Varm och taktil", putsad.
   Allt ska se ut att ga att ta pa: tjocka konturer i blackbrunt, harda
   kanter under knapparna, papper och varma farger. Gront ar pengar in,
   rott ar pengar ut, och det ar det enda de fargerna far betyda.

   Den har versionen andrar ingen farghallning och ingen form. Den infor
   tre skalor och haller sig till dem:

   1. Avstandsskalan --sp-1 .. --sp-7. Inga losa pixelvarden.
   2. Typskalan --fs-1 .. --fs-8. Ett steg per niva, inte ett per stalle.
   3. Lyftskalan --lift-1 .. --lift-4, alltsa hur hogt ett element star
      over sin harda kant.

   Lyftet ar nyckeln till rytmen. En knapp med "box-shadow: 0 6px 0" ser
   ut att vara 6 px hogre an den ar, sa ett avstand pa 12 px under den
   ser ut som 6. Darfor far varje lyft element en margin-bottom lika stor
   som sitt lyft. Da mater alla avstand det man faktiskt ser. */

:root {
  /* Papper och trä */
  --sand: #FBEFD8;
  --sand-2: #F6DFB6;
  --cream: #FFF8EA;
  --cream-2: #FFEFD2;
  --paper: #FFFDF7;

  /* Bläck: alla konturer och all text */
  --ink: #3A2A1B;
  --edge: #4E3822;          /* hårda kanter under knappar och kort */
  /* Nedtonad text. Mörkare än förut: 5.2:1 mot den mörkaste sanden,
     5.9:1 mot papper. Gamla #7A6045 låg på 4.50:1 och klarade kravet
     bara på decimalen. */
  --ink-soft: #6E5741;
  --line: #E9D6B4;
  --line-deep: #DCC298;

  /* Guld: appens grundfärg, varken in eller ut */
  --gold: #F7B733;
  --gold-light: #FFD470;
  --gold-dark: #C0800F;

  /* Grönt: pengar in */
  --green: #2CA862;
  --green-deep: #1B8048;
  --green-dark: #12603A;
  --green-soft: #D8F0DF;

  /* Rött: pengar ut */
  --red: #E4562C;
  --red-deep: #C0391A;
  --red-dark: #8D2810;
  --red-soft: #FBE0D4;

  /* Accenter, används sparsamt */
  --blue: #3E8FD6;
  --purple: #8E63D6;

  /* --- Avståndsskala, fyra pixlar i taget ------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;

  /* --- Lyft: höjden på den hårda kanten under ett element ---------- */
  --lift-1: 3px;    /* små brickor: händelseikoner */
  --lift-2: 4px;    /* chips, små knappar, ikonknappar */
  --lift-3: 5px;    /* kort */
  --lift-4: 6px;    /* knappar, profiler, sifferknappar, skylten */

  /* --- Typografisk skala, ungefär 1.2 mellan stegen ---------------- */
  --fs-1: .75rem;      /* 12 px: siffrorna längs termometern */
  --fs-2: .875rem;     /* 14 px: metadata, fotnoter, skalor */
  --fs-3: 1.0625rem;   /* 17 px: brödtext, chips, etiketter */
  --fs-4: 1.25rem;     /* 20 px: knapptext, korthuvuden */
  --fs-5: 1.5rem;      /* 24 px: sidrubrik i toppraden, namn, delta */
  --fs-6: 1.8125rem;   /* 29 px: sifferknappar, familjekoden */
  --fs-7: 2.1875rem;   /* 35 px: startsidans rubrik */
  --fs-8: 3.5rem;      /* 56 px: saldot */

  --lh-tight: 1.14;
  --lh-snug: 1.3;
  --lh: 1.5;

  /* --- Höjder på träffytor. Minsta är 44 px ----------------------- */
  --h-1: 44px;
  --h-2: 48px;   /* chip, liten knapp, ikonknapp */
  --h-3: 56px;   /* fält, stegknappar */
  --h-4: 64px;   /* huvudknapp */
  --h-5: 72px;   /* sifferknapp */

  /* --- Radier ----------------------------------------------------- */
  --r-1: 14px;   /* små brickor */
  --r-2: 18px;   /* fält, små knappar, ikonknappar */
  --r-3: 22px;   /* knappar, sifferknappar, skylten */
  --r-4: 26px;   /* kort och profiler */
  --r: var(--r-4);       /* bakåtnamn, används av äldre regler */
  --r-sm: var(--r-2);

  /* --- Konturtjocklek --------------------------------------------- */
  --bw-1: 2px;     /* kort */
  --bw-2: 2.5px;   /* små kontroller */
  --bw-3: 3px;     /* stora kontroller */
  --bw-4: 4px;     /* mätaren */
  --bw-5: 5px;     /* termometern, appens instrument */

  --shadow: 0 12px 22px rgba(96, 62, 24, .12);
  --shadow-lg: 0 18px 36px rgba(96, 62, 24, .20);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Dubbeltryck ska aldrig zooma. Det ar det som hander nar ett knapptryck
   missar och telefonen tolkar de tva snabba tryckningarna som "zooma in".
   Nyp med tva fingrar fungerar fortfarande, det gor ingen av misstag. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  /* Inte "fixed": med fast bakgrund malas tonen bara over skarmhojden och
     under den blir sidan vit sa fort innehallet ar langre an en skarm. */
  background: linear-gradient(168deg, var(--sand) 0%, var(--sand-2) 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Inget markeringsverktyg eller forstoringsglas nar man haller inne en knapp.
   Familjekoden och lankarna lamnas markerbara sa att de gar att kopiera. */
.btn, .chip, .iconbtn, .profile, .pinpad button, .picker button, .sign,
.balance, .thermo-wrap, .tx, label, h1, h2, h3 {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: transparent;
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-3); line-height: var(--lh); font-weight: 600;
  overscroll-behavior-y: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Pappersfibrer. Ligger bakom allt innehall och far aldrig storas fram. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- Typografi ------------------------------------------------------ */
/* Baloo 2 ar rund och tjock och bar alla rubriker och alla siffror.
   Nunito ar mjuk men lugn och bar brodtexten.
   Bara vikt 700 och 800 av Baloo och 400 till 800 av Nunito ligger i
   fonts-katalogen, sa inga andra vikter far anvandas. */
h1, h2, h3 {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.005em;
  margin: 0 0 .35em; color: var(--ink);
}
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); line-height: var(--lh-snug); }
p { margin: 0 0 var(--sp-4); }
strong, b { font-weight: 800; }
small, .muted { color: var(--ink-soft); font-weight: 600; }
small { font-size: var(--fs-2); }
a { color: var(--ink); text-underline-offset: 3px; }

/* Rubriken i klarrutorna ar ett belopp och far darfor pengarnas morka
   toner. Javascriptet satter "color: var(--red)" direkt pa elementet, sa
   vi doper om vad --red betyder just har i stallet for att slass med
   !important. Samma trick som pa .delta. */
.card.center > h2 { --green: var(--green-deep); --red: var(--red-deep); }

/* Som app pa hemskarmen ritas sidan under statusraden och under
   hemknappsstrecket, darav sakerhetsmarginalerna. */
#app {
  max-width: 560px; margin: 0 auto;
  padding: calc(var(--sp-5) + env(safe-area-inset-top)) var(--sp-4)
           calc(var(--sp-7) + env(safe-area-inset-bottom));
}

/* --- Knappar -------------------------------------------------------- */
/* Alla knappar ar utstansade brickor: tjock kontur och en hard kant
   under, som trycks ihop nar man trycker ner dem.
   display:flex och inte inline-flex: en inline-knapp star pa en textrad
   och far da ett par pixlar oforutsagbart luft over och under sig, vilket
   gor att tva knappar efter varandra aldrig far samma avstand. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: var(--h-4); padding: var(--sp-3) var(--sp-5); width: 100%;
  border: var(--bw-3) solid var(--ink); border-radius: var(--r-3);
  background: var(--paper); color: var(--ink);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700; font-size: var(--fs-4); line-height: 1.1;
  box-shadow: 0 var(--lift-4) 0 var(--edge), var(--shadow);
  cursor: pointer;
  /* Sjalva lyftet, sa att avstandet under knappen ar det man ser.
     Fristaende knappar bar dessutom sitt eget avstand nedat, eftersom de
     ofta star direkt fore ett kort utan nagot som satter marginalen. */
  margin-bottom: calc(var(--sp-5) + var(--lift-4));
  transition: transform .07s ease, box-shadow .07s ease;
}
.btn:active { transform: translateY(var(--lift-4)); box-shadow: 0 0 0 var(--edge), 0 4px 10px rgba(96,62,24,.16); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: 0 var(--lift-4) 0 var(--edge); }

/* Gult ar appens grundfarg. Gront och rott ar morkare an forut sa att den
   vita texten nar 4.7:1 respektive 5.0:1 mitt i knappen i stallet for de
   3.1:1 den lag pa. Kulorerna ar samma, bara djupare. */
.btn--gold  { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.btn--green { background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; }
.btn--red   { background: linear-gradient(180deg, var(--red) 0%, #A62F14 100%); color: #fff; }

/* Spokknappen ar en fotnot, inte en handling. Den far ingen kropp och
   darmed inget lyft att kompensera. */
.btn--ghost {
  background: none; border: none; box-shadow: none;
  color: var(--ink-soft); min-height: var(--h-1);
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: var(--fs-3);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  margin-bottom: var(--sp-5);
}
.btn--ghost:active { transform: translateY(1px); box-shadow: none; }
.btn--small {
  display: inline-flex;
  min-height: var(--h-2); font-size: var(--fs-3); padding: var(--sp-2) var(--sp-4); width: auto;
  border-width: var(--bw-2); border-radius: var(--r-2);
  box-shadow: 0 var(--lift-2) 0 var(--edge), var(--shadow);
  margin-bottom: calc(var(--sp-5) + var(--lift-2));
  vertical-align: middle;
}
.btn--small:active { transform: translateY(var(--lift-2)); box-shadow: 0 0 0 var(--edge); }
.btn--small:disabled { box-shadow: 0 var(--lift-2) 0 var(--edge); }

/* I en rad styr raden avstandet, sa knapparna bar bara sitt eget lyft. */
.btn-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.btn-row .btn { flex: 1 1 0; width: auto; margin-bottom: var(--lift-4); }
.btn-row .btn--small { margin-bottom: var(--lift-2); }
/* Avbryt ska inte ta halva raden fran den knapp som ar sjalva handlingen.
   Det ar den som gor att "Skapa kontot" ryms pa en rad i stallet for tva. */
.btn-row .btn--ghost { flex: 0 1 auto; margin-bottom: 0; padding-inline: var(--sp-3); }
/* Kugghjulet ar en ikon och ska vara kvadratiskt, inte en tredjedel bred. */
.btn-row .btn[data-edit] { flex: 0 0 var(--h-2); padding-inline: 0; font-size: var(--fs-4); }

/* --- Chips ---------------------------------------------------------- */
.chip {
  border: var(--bw-2) solid var(--ink); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: var(--sp-2) var(--sp-4); min-height: var(--h-2);
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: var(--fs-3);
  box-shadow: 0 var(--lift-2) 0 var(--edge); cursor: pointer;
  margin-bottom: var(--lift-2);
  transition: transform .07s ease, box-shadow .07s ease, background .12s ease;
}
.chip:active { transform: translateY(var(--lift-2)); box-shadow: 0 0 0 var(--edge); }
/* Det valda chipet star kvar pa sin rad. Forut flyttades det ner tre
   pixlar, vilket gjorde att "Lor" hangde lagre an "Fre" och "Son" bredvid
   sig. Nu ar det i stallet malat gult, med en tunnare kant och en skugga
   inuti som ger samma "nedtryckta" kansla utan att bryta linjen. */
.chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 2px 0 var(--gold-dark), inset 0 3px 0 rgba(58, 42, 27, .16);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* --- Kort ----------------------------------------------------------- */
/* Kortet ar ett tjockt pappersark: mjuk kontur och en synlig underkant.
   Marginalen ar avstandet man ser plus kortets egen kant. */
.card {
  background: var(--paper); border-radius: var(--r-4); padding: var(--sp-5);
  border: var(--bw-1) solid var(--line);
  box-shadow: 0 var(--lift-3) 0 var(--line-deep), var(--shadow);
  margin-bottom: calc(var(--sp-5) + var(--lift-3));
}
.card--flat { box-shadow: none; border: var(--bw-2) dashed var(--line-deep); }

/* Sista och forsta barnet ska inte skjuta ut kortets luft ur balans.
   Undantaget ar element med hard kant: de behaller sitt lyft, annars ser
   den nedre luften mindre ut an den ovre. */
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card > .btn:last-child { margin-bottom: var(--lift-4); }
.card > .btn--small:last-child,
.card > .chips:last-child { margin-bottom: var(--lift-2); }

/* Hjartat i appen: kortet med saldot och termometern far egen varme. */
.card:has(.thermo-wrap) {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream-2) 100%);
  border-color: var(--line-deep);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  min-height: calc(var(--h-2) + var(--lift-2));
}
.topbar h1, .topbar h2 { margin: 0; flex: 1; font-size: var(--fs-5); min-width: 0; }
.iconbtn {
  border: var(--bw-2) solid var(--ink); background: var(--paper); border-radius: var(--r-2);
  width: var(--h-2); height: var(--h-2); font-size: var(--fs-4); cursor: pointer;
  box-shadow: 0 var(--lift-2) 0 var(--edge); color: var(--ink);
  display: grid; place-items: center; flex: none;
  font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700;
  transition: transform .07s ease, box-shadow .07s ease;
}
/* Ikonknappen star nastan alltid i en rad som ar centrerad lodratt, sa
   den far inte bara sitt lyft som marginal. Raderna ger den plats i
   stallet, via min-height. */
.iconbtn:active { transform: translateY(var(--lift-2)); box-shadow: 0 0 0 var(--edge); }

/* --- Maskot och figurer --------------------------------------------- */
.mascot { display: block; margin: 0 auto var(--sp-3); overflow: visible; }
.btn .mascot, .topbar .mascot { margin: 0; flex: none; }
.mascot__coin { fill: var(--gold); }
.mascot__coin-edge { fill: var(--gold-dark); }
.mascot__coin-inner { fill: none; stroke: var(--gold-dark); stroke-width: 3; stroke-dasharray: 5 6; opacity: .75; }
.mascot__eye { fill: var(--ink); }
.mascot__glint { fill: #fff; }
.mascot__blush { fill: #F0806A; opacity: .55; }
.mascot__mouth { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.mascot__legs path, .mascot__arms path { fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round; }
.mascot__shoe { fill: var(--ink); }
.mascot__hand { fill: var(--gold); stroke: var(--ink); stroke-width: 3.5; }
.mascot--glad { animation: bob 2.8s ease-in-out infinite; }
.mascot--jubel { animation: hop .7s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes hop { 0%,100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-15px) rotate(4deg) } }

.piggy { display: block; margin: 0 auto var(--sp-3); }
.piggy__body { fill: #F6A9C0; }
.piggy__ear, .piggy__snout { fill: #E9829F; }
.piggy__nostril, .piggy__eye { fill: #6E3A4C; }
.piggy__slot { fill: #6E3A4C; }
.piggy__legs, .piggy__tail { stroke: #E9829F; stroke-width: 7; stroke-linecap: round; fill: none; }
.piggy__coin-c { fill: var(--gold); stroke: var(--gold-dark); stroke-width: 3.5; }
.piggy__coin-t { font: 800 11px "Baloo 2", system-ui; fill: var(--gold-dark); }
.piggy__coin { animation: drop 1.6s ease-in-out infinite; }
@keyframes drop { 0% { transform: translateY(-12px); opacity: 0 } 40% { opacity: 1 } 100% { transform: translateY(10px); opacity: 0 } }

.service-icon { display: block; margin: 0 auto var(--sp-3); }
.svc__ribbon { fill: var(--blue); }
.svc__ribbon--dark { fill: #2F6FA8; }
.svc__medal-edge { fill: var(--green-dark); }
.svc__medal { fill: var(--green); }
.svc__check { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.svc__spark { fill: var(--gold); opacity: .9; }

/* --- Avatarer -------------------------------------------------------- */
/* Klistermarke: black runt om, barnets farg innanfor. */
.avatar {
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--av) 42%, #fff);
  border: var(--bw-3) solid var(--ink); flex: none; line-height: 1;
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--av) 62%, #fff),
              0 var(--lift-1) 0 rgba(58, 42, 27, .22);
}

/* --- Profilvalet ----------------------------------------------------- */
/* Forsta intrycket varje gang appen oppnas. Varje profil ar ett kort man
   plockar upp: stor figur, stort namn, tydlig roll. */
.profiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
  /* Utan den har marginalen la PIN-kortet sig kant i kant mot profilen
     ovanfor sa fort man valt vem man ar. */
  margin-bottom: var(--sp-5);
}
.profile {
  position: relative; cursor: pointer;
  border: var(--bw-3) solid var(--ink); border-radius: var(--r-4);
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  box-shadow: 0 var(--lift-4) 0 var(--edge), var(--shadow);
  font-family: "Nunito", system-ui, sans-serif;
  margin-bottom: var(--lift-4);
  transition: transform .09s ease, box-shadow .09s ease;
}
.profile:active { transform: translateY(var(--lift-4)); box-shadow: 0 0 0 var(--edge); }
.profile .avatar { box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--av) 62%, #fff), 0 5px 0 rgba(58,42,27,.20); }
.profile__name {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 800; font-size: var(--fs-5); line-height: var(--lh-tight); color: var(--ink);
}
.profile__role {
  font-size: var(--fs-2); font-weight: 800; color: var(--ink-soft);
  background: var(--cream-2); border: var(--bw-1) solid var(--line-deep);
  border-radius: 999px; padding: 2px var(--sp-3); line-height: 1.5;
}
.profile__money { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; color: var(--green-deep); }
.badge {
  position: absolute; top: -10px; right: -8px; min-width: 32px; height: 32px;
  border-radius: 999px; background: var(--red-deep); color: #fff;
  border: var(--bw-3) solid var(--ink);
  font-family: "Baloo 2", system-ui, sans-serif; font-size: var(--fs-2); font-weight: 800;
  display: grid; place-items: center; padding: 0 7px;
  box-shadow: 0 var(--lift-1) 0 var(--ink);
}

/* --- Saldot ---------------------------------------------------------- */
.balance { text-align: center; margin: 0 0 var(--sp-5); }
.balance:last-child { margin-bottom: 0; }
.balance__amount {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: var(--fs-8); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
  transition: color .18s ease;
}
.balance__amount--down { color: var(--red-deep); }
.balance__amount--up { color: var(--green-deep); }
.balance__label {
  color: var(--ink-soft); font-weight: 800; font-size: var(--fs-3);
  margin-top: var(--sp-1); letter-spacing: .01em;
}
/* Javascriptet satter "color: var(--green)" direkt pa elementet. I stallet
   for att overrosta det med !important later vi --green betyda den morka
   tonen just har: 4.9:1 mot papper i stallet for 3.0:1. Samma ton som
   saldot far nar det forhandsvisas uppat, sa de tva talen matchar. */
.delta {
  --green: var(--green-deep);
  --red: var(--red-deep);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: var(--fs-5); font-weight: 800; line-height: 1.2; margin-top: var(--sp-2);
}

/* --- Termometern ------------------------------------------------------ */
/* --bulb-h ags av CSS och laser bade rorets nederkant och malflaggornas
   nollpunkt. Javascriptet laser variabeln, sa geometrin gar att andra harifran.

   Kulan ar 112 px och roret slutar 74 px over botten, alltsa en bit ovanfor
   kulans bredaste punkt. Forut slutade det precis vid bredaste punkten och
   da blev skarven en rak, synlig kant tvars over glaset. Nu gar roret ner i
   kulan dar bagen redan lutar och overgangen ser ut som en termometer. */
.thermo-wrap {
  display: flex; align-items: stretch;
  /* Ingen lucka: den dolde att den prickade linjen ska ga fran roret ut
     till flaggan, och den sköt termometern sju pixlar ur mitten nar det
     inte fanns nagra sparmal alls. */
  gap: 0;
  --bulb-h: 74px;
}
.thermo-wrap:has(.goals:empty) { justify-content: center; }
.goals:empty { flex: 0 0 0; }

.thermo {
  position: relative; width: 92px; flex: none;
  height: var(--thermo-h, 320px);
  filter: drop-shadow(0 var(--lift-3) 0 rgba(58, 42, 27, .13));
}
.thermo__tube {
  position: absolute; inset: 0 0 var(--bulb-h) 0;
  background: linear-gradient(90deg, #EFE2C9, #F7EEDD 40%, #E7D8BC);
  border: var(--bw-5) solid var(--ink); border-bottom: none;
  border-radius: 46px 46px 0 0; overflow: hidden;
}
/* Glasdager. Ligger sist och lyser darfor over vatskan. */
.thermo__tube::after {
  content: ""; position: absolute; left: 12px; top: 18px; bottom: 8px; width: 13px;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.06));
}
.thermo__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, #E9A214 100%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .40);
  transition: height .45s cubic-bezier(.2,.8,.3,1);
}
.thermo__preview {
  position: absolute; left: 0; right: 0;
  transition: height .18s linear, bottom .18s linear;
}
/* Rutigt falt = "det har ar forandringen". Rott ner, gront upp. */
.thermo__preview--down {
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, #F58462 10px 20px);
  box-shadow: inset 0 3px 0 rgba(58,42,27,.22), inset 0 -3px 0 rgba(58,42,27,.22);
}
.thermo__preview--up {
  background: repeating-linear-gradient(45deg, var(--green) 0 10px, #63CE96 10px 20px);
  box-shadow: inset 0 3px 0 rgba(58,42,27,.22), inset 0 -3px 0 rgba(58,42,27,.22);
}
/* Kulan ligger fore roret i DOM sa att rorets botten tacker kulans ovansida
   och overgangen blir en riktig termometer, utan synlig kant. */
.thermo__bulb {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--gold-light), var(--gold) 55%, #DE9A10);
  border: var(--bw-5) solid var(--ink);
  transition: background .18s ease;
}
.thermo__bulb--down { background: radial-gradient(circle at 34% 30%, #F5825E, var(--red) 55%, var(--red-dark)); }
.thermo__bulb--up { background: radial-gradient(circle at 34% 30%, #63CE96, var(--green) 55%, var(--green-dark)); }
/* Plus och minus i kulan sager samma sak som fargen, for den som inte
   sarskiljer gront och rott. Ritade som staplar och inte som tecken: da
   blir plus och minus exakt lika tjocka, och de hamnar mitt i den del av
   kulan som syns nedanfor roret i stallet for nere vid kanten. */
.thermo__bulb--up::before,
.thermo__bulb--up::after,
.thermo__bulb--down::after {
  content: ""; position: absolute; left: 50%;
  bottom: calc(var(--bulb-h) / 2);
  transform: translate(-50%, 50%);
  background: #fff; border-radius: 4px;
}
.thermo__bulb--up::after, .thermo__bulb--down::after { width: 32px; height: 8px; }
.thermo__bulb--up::before { width: 8px; height: 32px; }


/* --- Sparmalen som flaggor -------------------------------------------- */
.goals { position: relative; flex: 1; min-width: 0; }
.goal {
  position: absolute; left: 0; right: 0; transform: translateY(50%);
  display: flex; align-items: center; gap: var(--sp-2);
}
.goal__flag {
  background: var(--paper); border: var(--bw-2) solid var(--ink); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; gap: 7px;
  box-shadow: 0 var(--lift-2) 0 var(--edge); font-size: var(--fs-3); font-weight: 800;
  min-width: 0; max-width: 100%;
}
.goal__flag strong { font-family: "Baloo 2", system-ui, sans-serif; white-space: nowrap; }
.goal--reached .goal__flag {
  border-color: var(--green-deep); background: var(--green-soft);
  box-shadow: 0 var(--lift-2) 0 var(--green-dark);
}
/* Linjen borjar nu vid rorets kant och gar fram till flaggan, sa att man
   ser vilken hojd flaggan pekar pa. */
.goal__line { flex: none; width: 22px; border-top: 3px dotted var(--ink); opacity: .5; }

/* --- Mataren ----------------------------------------------------------- */
/* Den ska se ut att vilja dras i: tjockt spar, ett stort greppvred med
   rafflor, och ett tydligt fyllt falt bakom vredet. */
.meter { margin: var(--sp-4) 0 0; }
.meter input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 54px;
  background: transparent; margin: 0; display: block;
  touch-action: pan-y; cursor: pointer;
}
.meter input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 32px; border-radius: 999px;
  border: var(--bw-4) solid var(--ink);
  background: linear-gradient(90deg, var(--track, var(--gold)) var(--pct, 0%), #EFE2C9 var(--pct, 0%));
  box-shadow: inset 0 4px 0 rgba(58, 42, 27, .14);
}
.meter input[type="range"]::-moz-range-track {
  box-sizing: border-box; height: 32px; border-radius: 999px;
  border: var(--bw-4) solid var(--ink);
  background: linear-gradient(90deg, var(--track, var(--gold)) var(--pct, 0%), #EFE2C9 var(--pct, 0%));
  box-shadow: inset 0 4px 0 rgba(58, 42, 27, .14);
}
.meter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box;
  width: 50px; height: 50px; margin-top: -9px; border-radius: 50%;
  border: var(--bw-4) solid var(--ink);
  background:
    linear-gradient(var(--ink) 0 0) calc(50% - 9px) 50% / 3px 15px no-repeat,
    linear-gradient(var(--ink) 0 0) 50% 50% / 3px 15px no-repeat,
    linear-gradient(var(--ink) 0 0) calc(50% + 9px) 50% / 3px 15px no-repeat,
    radial-gradient(circle at 36% 28%, #FFFFFF, #F4E5CA);
  box-shadow: 0 var(--lift-2) 0 var(--edge), 0 8px 14px rgba(96, 62, 24, .28);
  cursor: grab;
}
.meter input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 50px; height: 50px; border-radius: 50%;
  border: var(--bw-4) solid var(--ink);
  background:
    linear-gradient(var(--ink) 0 0) calc(50% - 9px) 50% / 3px 15px no-repeat,
    linear-gradient(var(--ink) 0 0) 50% 50% / 3px 15px no-repeat,
    linear-gradient(var(--ink) 0 0) calc(50% + 9px) 50% / 3px 15px no-repeat,
    radial-gradient(circle at 36% 28%, #FFFFFF, #F4E5CA);
  box-shadow: 0 var(--lift-2) 0 var(--edge), 0 8px 14px rgba(96, 62, 24, .28);
  cursor: grab;
}
.meter input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.06); }
/* Beloppet sitter i en bubbla ovanfor greppet och foljer med nar man drar.
   Greppet ar 44 px brett och dess mitt ror sig mellan 22 px och bredden
   minus 22 px, darav rakningen. --pctnum ar en andel mellan 0 och 1. */
.meter { position: relative; padding-top: 48px; }
.meter__value {
  position: absolute; top: 0;
  /* Bubblan foljer greppet men stannar innanfor mataren i andlagena,
     annars hamnar den utanfor kortet pa en smal skarm. */
  left: clamp(52px, calc(22px + var(--pctnum, 0) * (100% - 44px)), calc(100% - 52px));
  transform: translateX(-50%);
  min-width: 74px; padding: 5px 12px;
  background: var(--track, var(--gold-dark)); color: #FFFDF7;
  border: var(--bw-2) solid var(--ink); border-radius: 999px;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: var(--fs-5); font-weight: 800; line-height: 1.15;
  text-align: center; white-space: nowrap;
  box-shadow: 0 var(--lift-2) 0 var(--edge);
  transition: left .06s linear;
}
/* Liten spets ner mot greppet, sa att bubblan hor ihop med det man drar. */
.meter__value::after {
  content: ""; position: absolute; left: 50%; bottom: -15px;
  transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--ink);
}
.stepper { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.stepper .iconbtn { width: var(--h-3); height: var(--h-3); font-size: var(--fs-6); border-radius: 50%; }

/* --- Skylten "Nytt sedan sist" ----------------------------------------- */
/* En malad traskylt som hanger pa tva spikar strax under toppraden.
   Spikarna sticker upp 21 px ovanfor skylten, sa marginalen daruppe maste
   vara luften plus spikarna. Annars stack de in i toppradens knapp. */
.sign {
  position: relative;
  margin: calc(var(--sp-5) + 22px) 0 calc(var(--sp-5) + var(--lift-4));
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: var(--bw-3) solid var(--ink); border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 var(--lift-4) 0 var(--gold-dark), var(--shadow-lg);
  animation: swing 3.4s ease-in-out infinite;
  transform-origin: top center;
  cursor: pointer;
}
.sign::before, .sign::after {
  content: ""; position: absolute; top: -21px; width: 14px; height: 26px;
  background:
    radial-gradient(circle 7px at 50% 7px, var(--ink) 97%, transparent 100%) no-repeat,
    linear-gradient(var(--ink) 0 0) 50% 0 / 5px 100% no-repeat;
}
.sign::before { left: 26px; }
.sign::after { right: 26px; }
.sign h3 { margin: 0 0 var(--sp-2); color: var(--ink); }
.sign ul { margin: 0; padding-left: 22px; font-weight: 800; }
.sign li { margin-bottom: 2px; }
/* 5.5:1 mot guldet. Forut 4.1:1, alltsa under kravet. */
.sign small { display: block; margin-top: var(--sp-2); color: rgba(58, 42, 27, .85); font-weight: 700; }
@keyframes swing { 0%,100% { transform: rotate(-1.1deg) } 50% { transform: rotate(1.1deg) } }

/* --- Handelselistan ----------------------------------------------------- */
.tx {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 2px dashed var(--line);
}
/* Ikonens harda kant ar tre pixlar, sa sista radens luft nedat maste vara
   tre pixlar mindre for att se lika stor ut som kortets ovre luft. */
.tx:last-child { border-bottom: none; padding-bottom: var(--lift-1); }
.tx__icon {
  width: 46px; height: 46px; border-radius: var(--r-1); display: grid; place-items: center;
  font-size: var(--fs-4); flex: none;
  border: var(--bw-2) solid var(--ink); box-shadow: 0 var(--lift-1) 0 rgba(58, 42, 27, .22);
  background: var(--cream-2);
}
.tx__icon--in { background: var(--green-soft); }
.tx__icon--out { background: var(--red-soft); }
.tx__body { flex: 1; min-width: 0; }
.tx__title { font-weight: 800; line-height: var(--lh-snug); }
.tx__meta { font-size: var(--fs-2); color: var(--ink-soft); font-weight: 700; }
.tx__amount {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800; font-size: var(--fs-4); white-space: nowrap;
}
.tx__amount--in { color: var(--green-deep); }
.tx__amount--out { color: var(--red-deep); }
.tx--reversed .tx__title, .tx--reversed .tx__amount { text-decoration: line-through; opacity: .5; }
.tx .iconbtn { width: var(--h-1); height: var(--h-1); font-size: var(--fs-3); box-shadow: 0 var(--lift-1) 0 var(--edge); }

/* --- PIN ---------------------------------------------------------------- */
.pin-dots { display: flex; gap: var(--sp-5); justify-content: center; margin: var(--sp-5) 0 var(--sp-6); }
.pin-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: var(--bw-3) solid var(--ink); background: var(--paper);
  transition: background .12s ease, transform .12s ease;
}
.pin-dot--on { background: var(--gold); transform: scale(1.15); box-shadow: 0 var(--lift-1) 0 var(--gold-dark); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pinpad button {
  height: var(--h-5); border-radius: var(--r-3);
  border: var(--bw-3) solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: "Baloo 2", system-ui, sans-serif; font-size: var(--fs-6); font-weight: 700;
  cursor: pointer; box-shadow: 0 var(--lift-4) 0 var(--edge);
  margin-bottom: var(--lift-4);
  transition: transform .07s ease, box-shadow .07s ease;
}
.pinpad button:active { transform: translateY(var(--lift-4)); box-shadow: 0 0 0 var(--edge); }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-10px) } 75% { transform: translateX(10px) } }

/* --- Formular ------------------------------------------------------------ */
/* Faltetiketten ar brodtextstorlek i fet stil, avsnittsrubriken (h3) ar
   ett steg storre i Baloo. Forut lag de nastan pa samma storlek och da
   gick det inte att se att "Hur mycket?" hor under "Veckopeng". */
label {
  display: block; font-weight: 800; margin-bottom: var(--sp-2);
  font-size: var(--fs-3); color: var(--ink);
}
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: var(--sp-4); font: inherit; font-weight: 700; color: var(--ink);
  border: var(--bw-3) solid var(--line-deep); border-radius: var(--r-2); background: #fff;
  box-shadow: inset 0 3px 0 rgba(58, 42, 27, .06);
  min-height: var(--h-3);
}
/* 4.6:1 mot vitt. Den gamla tonen lag pa 2.6:1 och gick knappt att se. */
input::placeholder { color: #8C7A61; font-weight: 600; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: inset 0 3px 0 rgba(58, 42, 27, .06), 0 0 0 4px rgba(247, 183, 51, .55);
}
.btn:focus-visible, .profile:focus-visible, .chip:focus-visible,
.iconbtn:focus-visible, .pinpad button:focus-visible, .picker button:focus-visible {
  outline: 4px solid var(--blue); outline-offset: 3px;
}
.field { margin-bottom: var(--sp-5); }
.picker { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.picker button {
  border: var(--bw-4) solid transparent; background: none; padding: 3px; border-radius: 50%;
  cursor: pointer; line-height: 0; min-width: var(--h-1); min-height: var(--h-1);
  display: grid; place-items: center;
  /* Den valda knappens harda kant far inte ata upp luften till nasta rad. */
  margin-bottom: var(--lift-2);
}
.picker button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--gold);
  box-shadow: 0 var(--lift-2) 0 var(--edge);
}
.swatch {
  width: 38px; height: 38px; border-radius: 50%; display: block;
  border: var(--bw-3) solid var(--ink); box-shadow: inset 0 -5px 0 rgba(58, 42, 27, .20);
}

/* --- Ovrigt --------------------------------------------------------------- */
.code-box {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: var(--fs-6); font-weight: 800; letter-spacing: .12em; text-align: center;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: var(--bw-3) dashed var(--ink); border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-3); margin-bottom: var(--sp-4); word-break: break-all;
  box-shadow: inset 0 -5px 0 rgba(58, 42, 27, .12);
}
.toast {
  position: fixed; left: 50%; top: calc(var(--sp-3) + env(safe-area-inset-top));
  transform: translateX(-50%);
  background: var(--ink); color: #FFF8EA;
  border: var(--bw-3) solid var(--ink);
  padding: var(--sp-3) var(--sp-6); border-radius: 999px;
  font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; font-size: var(--fs-3);
  box-shadow: 0 5px 0 rgba(0,0,0,.28), var(--shadow-lg);
  z-index: 60; max-width: 88vw; text-align: center;
  animation: toast-in .22s cubic-bezier(.2,1.3,.4,1);
}
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0 } }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 55; opacity: 0; }
.flash--up { background: radial-gradient(circle, rgba(44, 168, 98, .55), transparent 70%); animation: flash .9s ease-out; }
.flash--down { background: radial-gradient(circle, rgba(228, 86, 44, .55), transparent 70%); animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; align-items: stretch; }
.stack > * { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-3); }
.stack > .btn { margin-bottom: var(--lift-4); }
.stack > .btn--small { margin-bottom: var(--lift-2); align-self: flex-start; }
.stack > .btn--ghost { margin-bottom: 0; }
/* Sma knappar som star ensamma i en centrerad ruta ska sta mitt i den. */
.center > .btn--small { margin-inline: auto; }
.center .btn--small { display: inline-flex; }
.hidden { display: none !important; }
.spinner {
  width: 40px; height: 40px; border: 5px solid var(--line-deep);
  border-top-color: var(--gold-dark); border-radius: 50%;
  margin: var(--sp-7) auto; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.err {
  background: var(--red-soft); border: var(--bw-3) solid var(--red-deep); color: #7C230B;
  border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); font-weight: 800;
  margin-bottom: var(--sp-4);
  box-shadow: 0 var(--lift-2) 0 rgba(141, 40, 16, .35);
}
/* Foten ar fotnoter. Avstandet mellan dem kommer fran traffytan, 44 px,
   inte fran en uppblast radhojd. */
footer.legal {
  text-align: center; padding: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-2);
  color: var(--ink-soft); line-height: var(--lh);
  display: flex; flex-direction: column; align-items: center;
}
footer.legal a {
  color: var(--ink-soft); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-1); padding: 0 var(--sp-2);
}
footer.legal .btn--ghost {
  width: auto; min-height: var(--h-1); padding: 0 var(--sp-2); margin-bottom: 0;
  font-size: var(--fs-2); font-weight: 700; color: var(--ink-soft);
  text-decoration-thickness: 1.5px;
}

/* Sitter man i bil och ar akslesjuk ska ingenting rora sig. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Härdning mot verkliga familjer
   ---------------------------------------------------------------------
   Framtaget genom att foto ta appen med långa namn, stora belopp, ören,
   sex sparmål samtidigt, trettio händelser och tomma konton, på skärmar
   från 320 px och uppåt, även med telefonens textstorlek uppskruvad.
   Ligger sist så att reglerna vinner över motsvarande ovan.
   ===================================================================== */

/* Brödtexten i rem, inte px, så att den växer med telefonens egen
   textstorlek. 1.0625rem är exakt 17 px i grundläget. */
body { font-size: 1.0625rem; }

/* Långa ord, som ett sparmål eller ett dubbelnamn, ska brytas i stället
   för att sticka ut ur sitt kort. */
h1, h2, h3, p, li, label,
.tx__title, .profile__name, .goal__flag, .balance__label {
  overflow-wrap: anywhere;
}
/* Undviker ensamma slutord, så att "kr" inte hamnar på egen rad.
   Webbläsare utan stöd påverkas inte. */
h1, h2, h3, p, li, label,
.tx__title, .tx__meta, .profile__name, .balance__label {
  text-wrap: pretty;
}

/* Rubriken i toppraden krymper med skärmen, så att Maximilian-Alexander
   får plats bredvid både knapp och figur. */
.topbar h1, .topbar h2 { min-width: 0; }

/* 132 px i stället för 150 ger två kolumner även på en 320 px bred
   telefon. Med sex profiler blir en enda kolumn en lång rullning. */
.profiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.profile__name {
  font-size: clamp(1.05rem, 4.2vw, 1.3rem); line-height: 1.15;
  text-align: center; max-width: 100%;
}
.profile__role {
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* Saldot får aldrig brytas mellan siffra och "kr", och skalar ner sig
   självt så att 2 480 kr ryms även på 320 px. */
.balance__amount {
  font-size: clamp(2.3rem, 14.5vw, 3.6rem); white-space: nowrap;
}
.delta { white-space: nowrap; }

/* Skalan ligger överst i röret. Annars målar både vätskan och glasdagern
   över siffrorna, och ett fyllt rör går inte att läsa av. */

/* På riktigt smala skärmar smalnar röret så att flaggorna får den bredd
   de behöver. Kulan följer med. */
@media (max-width: 360px) {
  .thermo-wrap { --bulb-h: 48px; gap: 10px; }
  .thermo { width: 76px; }
  .thermo__bulb { width: 88px; height: 88px; }
}

/* Flaggorna är enradiga brickor som krymper i stället för att svämma ut
   ur kortet. Titeln kortas av med tre punkter, beloppet aldrig. */
.goals { overflow-x: clip; overflow-y: visible; }
.goal__flag {
  flex: 0 1 auto; white-space: nowrap; min-height: 38px;
}
.goal__flag > span { flex: none; }
.goal__flag > span + span {
  flex: 0 1 auto; min-width: 2.5em;
  overflow: hidden; text-overflow: ellipsis;
}
.goal__flag strong { flex: none; }

/* Från fyra sparmål och uppåt går flaggorna inte att sätta på exakt rätt
   nivå, de hamnar ovanpå varandra och två av sex blir helt dolda. Då
   staplas de i stället som en lista nerifrån och upp, i samma ordning som
   på röret: lägsta målet närmast kulan. */
.goals:has(.goal:nth-child(4)) {
  display: flex; flex-direction: column-reverse; justify-content: space-between;
  gap: 4px; padding: 2px 0;
}
.goals:has(.goal:nth-child(4)) .goal {
  position: static; transform: none; flex: 0 0 auto;
}
/* Sitter de tätt ihop ska den högre flaggan ligga överst, inte under. */
.goal:nth-child(1) { z-index: 1; }
.goal:nth-child(2) { z-index: 2; }
.goal:nth-child(3) { z-index: 3; }

/* Saldot i vuxenoversikten far inte brytas mellan siffra och "kr". */
.kidcard__right { text-align: right; }
.kidcard__amount {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800; font-size: 1.4rem; line-height: 1.1; white-space: nowrap;
}

/* Sparmålens bildväljare: runda knappar med de ritade figurerna. */
.malbild {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--line); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .08s ease, border-color .08s ease;
}
.malbild[aria-pressed="true"] { border-color: var(--ink); background: var(--gold-light); }
.malbild:active { transform: scale(.94); }

/* Figurerna i händelselistans rutor ska centreras i sin bricka. */
.tx__icon svg, .btn svg.fig { display: block; }

/* Raden med veckopengen under termometern: figur och text på samma linje. */
.allowance-line {
  margin: 16px 0 0; display: flex; align-items: center;
  justify-content: center; gap: 7px;
}