/* Underhållet, journalen, kommande år och husets år.

   Underhållet är det som ska göras och journalen det som är gjort; det är de två sidorna man
   kommer tillbaka till. Lugna kort, stora siffror och en stolthet i det som är klart.
   Läses in efter sida-planering och sida-arkivet (App.razor) och vinner på ordning eller en
   klass mer. Färgen bärs av kanter, staplar och pillor, aldrig av hela ytor, och varje läge har
   ord eller ikon bredvid. Text på en mjuk yta är --ink eller --*-ink, aldrig --on-color: den
   är mörk även i mörkt läge och blev 1,3:1 på telefonens rumsrutor första gången. */

/* ══ Underhåll ═══════════════════════════════════════════════════════════ */

.uh-stats .stat small { overflow-wrap: anywhere; }

/* Hjulet och det figuren säger står på samma kort, så att det läses som en sak. */
.uh-wheel {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  padding: 24px 28px; box-shadow: var(--lift); gap: 28px;
}
.uh-wheel .wheel-side { gap: 14px; }
.uh-wheel .wheel-box { max-width: 400px; }
.uh-wheel .wheel-legend { font-size: 13.5px; gap: 6px 14px; }
.uh-wheel-note { margin: 0; max-width: 52ch; }

/* "I fas": de påbörjade som inte är sena. En siffra och en stapel, inget mer. */
.uh-fas { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; }
.uh-fas-num { font: 650 clamp(40px, 5vw, 56px)/.95 var(--f-display); letter-spacing: -.035em; color: var(--mint-ink); }
.uh-fas-num small { font: 600 18px var(--f-display); letter-spacing: 0; color: var(--ink-2); }
.uh-fas-lbl { font-weight: 600; color: var(--ink); }
.uh-fas-bar {
  grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 8px;
  border: 1px solid var(--line);
}
.uh-fas-bar i { display: block; height: 100%; background: var(--mint); border-radius: 99px; }

/* Gruppernas rubriker: ikonbricka, läget i ord och antalet. Raden under säger vad man gör. */
.uh-group { margin: 0 0 36px; }
.uh-group .group-label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; margin: 0 0 14px; }
.uh-group .group-label h2 {
  margin: 0; display: flex; align-items: center; gap: 10px;
}
.uh-group .group-label p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 14.5px; }
.uh-group-ico {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink); border: var(--bw-thin) solid var(--line);
}
.uh-group--late .uh-group-ico { background: var(--tomato-soft); color: var(--tomato-ink); }
.uh-group--soon .uh-group-ico { background: var(--sun-soft); color: var(--sun-ink); }
.uh-group--ok .uh-group-ico { background: var(--mint-soft); color: var(--mint-ink); }
.uh-group--later .uh-group-ico { background: var(--sky-soft); color: var(--sky-ink); }
.uh-group--start .uh-group-ico { background: var(--lilac-soft); color: var(--lilac-ink); }
.uh-group-n {
  font: 700 14px/1 var(--f-body); padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-2); border: var(--bw-thin) solid var(--line);
}

/* Uppgiftskortet: vitt kort, lägets färg i en kant upptill och i stapeln. En tonad botten på
   varje sent kort blev en vägg av rött när fem var sena. */
.uh-group .maint-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.uh-group .maint-grid .card.mcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  padding: 20px 20px 14px; background: var(--card);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-l);
  transition: transform .25s var(--spring), border-color .2s, box-shadow .25s;
}
.uh-group .maint-grid .card.mcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--mk, var(--line-strong));
}
.uh-group .maint-grid .card.mcard:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--lift-s); }
.uh-group .maint-grid .card.mcard--late { --mk: var(--tomato); --mk-soft: var(--tomato-soft); background: var(--card); }
.uh-group .maint-grid .card.mcard--soon { --mk: var(--sun); --mk-soft: var(--sun-soft); background: var(--card); }
.uh-group .maint-grid .card.mcard--later { --mk: var(--sky); --mk-soft: var(--sky-soft); }
.uh-group .maint-grid .card.mcard--donetoday { --mk: var(--mint); --mk-soft: var(--mint-soft); background: var(--card); }
.uh-group .maint-grid .card.mcard--notstarted { --mk: var(--lilac); --mk-soft: var(--lilac-soft); }

.uh-group .mcard-name { font: 650 19px/1.2 var(--f-display) !important; letter-spacing: -.01em; color: var(--ink); }
.uh-group .mcard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.uh-group .mcard-meta > * { display: inline-flex; align-items: center; gap: 5px; }
.uh-group .mcard-meta a { color: var(--ink); font-weight: 600; }
/* Engångsuppgiften märks med ord och ikon, och med fet stil så att den syns i en lång lista. */
.uh-group .mcard-meta .mcard-once { color: var(--ink); font-weight: 700; }
.uh-group .mcard-note { margin: 0; overflow-wrap: anywhere; }
.uh-group .mcard-dates { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; color: var(--ink-2); }

/* Hur långt det gått sedan sist. Bara en bild av datumen under, som står i text. */
.mcard-prog { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.mcard-prog i { display: block; height: 100%; border-radius: 99px; background: var(--mk, var(--ink-3)); transition: width .6s var(--ease); }

.uh-group .mcard-actions { margin-top: 2px; }
.uh-group .mcard-actions .btn.mint {
  width: 100%; justify-content: center; min-height: 46px; font-weight: 700; gap: 8px;
  border: var(--bw-thin) solid color-mix(in srgb, var(--mint) 70%, var(--ink));
}
.uh-group .mcard-actions .btn.mint:hover:not(:disabled) { filter: brightness(1.04); }
.mcard-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); color: var(--mint-ink); }

/* De två sällan använda ändringarna står som en tyst rad under knappen. */
.mcard-more { display: flex; flex-wrap: wrap; gap: 0 4px; margin: -4px -10px 0; }
.mcard-more .btn.btn-ghost.last-done-open { font-size: 13.5px; font-weight: 600; padding: 6px 10px; min-height: 36px; color: var(--sky-ink); }
.mcard-more .last-done-form { flex: 1 1 100%; display: grid; gap: 8px; padding: 10px; background: var(--paper-2); border-radius: var(--r-s); margin: 4px 0; }

/* Avbockningen: rutan fylls, rubriken stryks, kortet nickar. Sedan laddas listan om och kortet
   flyttar till Gjort idag. Allt står still under prefers-reduced-motion, men bocken och
   strecket syns ändå, så att det går att se att något hände. */
.mcard.is-klar { border-color: var(--mint) !important; }
.mcard.is-klar .mcard-name { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--mint-ink); }
.mcard.is-klar .mcard-check { background: var(--mint-ink); color: var(--card); animation: uh-pop .45s var(--spring); }
.mcard.is-klar .mcard-prog i { width: 0 !important; }
.uh-group .maint-grid .card.mcard.is-klar { animation: uh-nick .5s var(--spring); }
@keyframes uh-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes uh-nick { 0% { transform: none; } 40% { transform: translateY(-4px) scale(1.01); } 100% { transform: none; } }

/* Senast gjort: de sista posterna, raden öppnar posten. Hela historiken står i journalen. */
.uh-senast { margin-top: 44px; }
.uh-senast-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.uh-loglist {
  list-style: none; margin: 0; padding: 0; background: var(--card);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-l); overflow: hidden;
}
.uh-loglist li + li { border-top: 1px solid var(--line); }
.uh-loglist .log-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 4px 16px; width: 100%;
  min-height: 60px; padding: 10px 18px; background: none; border: 0; text-align: left; color: var(--ink);
  font: inherit; cursor: pointer;
}
.uh-loglist .log-row:hover { background: var(--paper); }
.uh-loglist .log-row:focus-visible { outline-offset: -3px; }
.log-date { color: var(--ink-2); font-size: 14px; }
.log-what { display: grid; min-width: 0; overflow-wrap: anywhere; }
.log-what small { color: var(--ink-2); }
.log-cost { font-weight: 700; white-space: nowrap; }

/* Kalendern: samma lugna kort som allt annat. */
.cal-section { background: var(--card); box-shadow: none; border-width: var(--bw-thin); }
.cal-ico { transform: none; background: var(--lilac-soft); color: var(--lilac-ink); border-width: var(--bw-thin); }
.cal-section .calendar-feed { background: var(--paper); }

@media (max-width: 760px) {
  .uh-wheel { padding: 18px 16px; }
  .uh-group .maint-grid { grid-template-columns: 1fr; }
  .mcard-more .btn.btn-ghost.last-done-open { min-height: 44px; }
  .uh-loglist .log-row { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .uh-loglist .log-date { grid-column: 1 / -1; font-size: 13px; }
}

/* ══ Journalen ═══════════════════════════════════════════════════════════ */

/* Tidslinjen: ett år är ett stort årtal med summan, och under det korten för varje post.
   På bredden står årtalet kvar till vänster medan korten rullar förbi. */
.jt { margin-top: 36px; }
.jt-year { display: grid; grid-template-columns: 200px 1fr; gap: 12px 28px; padding: 22px 0; border-top: var(--bw-thin) solid var(--line); }
.jt-year:first-of-type { border-top: 0; padding-top: 8px; }
.jt-year-head { align-self: start; position: sticky; top: 84px; display: grid; gap: 4px; }
.jt-year-nr { margin: 0; font: 650 clamp(40px, 5vw, 60px)/.9 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.jt-year-line { margin: 0; color: var(--ink-2); font-size: 14px; }
.jt-year-bar { display: block; height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 6px; border: 1px solid var(--line); }
.jt-year-bar i { display: block; height: 100%; background: var(--sun); border-radius: 99px; }

/* Filtren över tidslinjen: fälten på en rad som bryts, de valda som brickor under, och raden om
   urvalet sist. Brickorna är kort och inte färgblock, så texten står på --card i båda lägena. */
.jf { display: grid; gap: 12px; margin: 4px 0 20px; padding: 16px; background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); }
.jf-rad { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; }
.jf-falt { flex: 1 1 150px; margin: 0; min-width: 0; }
.jf-falt .input { width: 100%; }
.jf-sok { flex: 2 1 240px; }
.jf-valda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px 6px 14px;
  background: var(--paper-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  border: var(--bw-thin) solid var(--line-strong); border-radius: 99px; cursor: pointer; max-width: 100%;
}
.jf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-chip:hover { border-color: var(--ink-2); }
.jf-chip:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
:root[data-theme="dark"] .jf-chip:focus-visible { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jf-chip:focus-visible { outline-color: var(--sun); } }
.jf-urval { margin: 0; font-weight: 600; color: var(--ink); }
.jf-tomt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 0; }
.jf-tomt p { margin: 0; flex: 1 1 240px; color: var(--ink-2); }

.jt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Under tidslinjen när inte alla poster ritats: raden säger hur många, knappen tar nästa omgång. */
.jt-mer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 0 4px; border-top: var(--bw-thin) solid var(--line); }
.jt-mer p { margin: 0; }
.jt-post {
  position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px 12px 12px; background: var(--card);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-m);
  transition: border-color .2s, transform .25s var(--spring);
}
.jt-post:hover { border-color: var(--line-strong); transform: translateX(2px); }
.jt-post.is-forb { box-shadow: inset 4px 0 0 var(--mint); }
.jt-date {
  display: grid; place-items: center; align-self: start; width: 52px; padding: 6px 0; border-radius: 10px;
  background: var(--paper-2); color: var(--ink); line-height: 1;
}
.jt-date b { font: 650 22px/1 var(--f-display); }
.jt-date small { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.jt-main { display: grid; gap: 4px; min-width: 0; }
/* Hela kortet är träffytan: knappens yta sträcks över kortet. */
.jt-open {
  all: unset; cursor: pointer; font: 650 17px/1.25 var(--f-display); color: var(--ink); overflow-wrap: anywhere;
}
.jt-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jt-open:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
:root[data-theme="dark"] .jt-open:focus-visible { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jt-open:focus-visible { outline-color: var(--sun); } }
.jt-meta { color: var(--ink-2); overflow-wrap: anywhere; }
.jt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jt-tags .pill { font-size: 12px; padding: 3px 9px; gap: 5px; }
.jt-side { display: flex; align-items: center; gap: 12px; }
.jt-cost { font: 650 18px/1 var(--f-display); white-space: nowrap; color: var(--ink); }
.jt-kvitto {
  width: 44px; height: 56px; object-fit: cover; border-radius: 6px; flex: none;
  border: var(--bw-thin) solid var(--line); background: var(--paper-2); transform: rotate(-3deg);
}
.jt-utan { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); white-space: nowrap; width: 44px; justify-content: center; text-align: center; font-size: 11.5px; line-height: 1.15; flex-wrap: wrap; }

/* Dela och ladda ner: filerna som rader med ikon, köparlänken bredvid. */
.jr-ut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.jr-ladda { display: grid; gap: 6px; padding: 18px; box-shadow: none; border: var(--bw-thin) solid var(--line); }
.jr-ladda h3 { margin: 0 0 4px; font: 650 20px/1.2 var(--f-display); }
.jr-fil {
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 10px; min-height: 56px;
  border-radius: var(--r-s); color: var(--ink); text-decoration: none; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.jr-fil:hover { background: var(--paper-2); }
.jr-fil b { display: block; }
.jr-fil small { display: block; color: var(--ink-2); font-size: 13.5px; }
.jr-fil-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--lilac-soft); color: var(--lilac-ink); }
.jr-ut .visa-skapa, .jr-ut .saljluckor { box-shadow: none; border: var(--bw-thin) solid var(--line); }
.jr-ut .saljluckor { margin-bottom: 16px; }

/* Tom pärm: kortet är papper, inte en gul skylt. */
.arkiv-tom { background: var(--card); box-shadow: var(--lift); border-width: var(--bw-thin); }

@media (max-width: 860px) {
  .jt-year { grid-template-columns: 1fr; gap: 12px; }
  .jt-year-head { position: static; grid-template-columns: auto 1fr; align-items: end; column-gap: 14px; }
  .jt-year-line { align-self: end; padding-bottom: 4px; }
  .jt-year-bar { grid-column: 1 / -1; }
  .jr-ut-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jt-post { grid-template-columns: 44px 1fr; gap: 10px 12px; padding: 12px; }
  .jt-date { width: 44px; }
  .jt-side { grid-column: 2; justify-content: space-between; }
  .jt-utan { width: auto; flex-wrap: nowrap; }
  /* Två fält i bredd på telefonen, sökningen över hela raden. 16 px i fälten så att iOS inte zoomar. */
  .jf { padding: 12px; }
  .jf-falt { flex: 1 1 calc(50% - 7px); }
  .jf-sok { flex-basis: 100%; }
  .jf-falt .input { font-size: 16px; }
  .jf-chip { min-height: 44px; }
}

/* ══ Kommande år och vad huset kostat ════════════════════════════════════ */

/* Den stora siffran först, förklaringen under. */
.ut-total { display: grid; gap: 2px; margin: 0 0 12px; }
.ut-big { font: 650 clamp(38px, 5.4vw, 64px)/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); overflow-wrap: anywhere; }
.ut-big-lbl { font: 600 15px/1.3 var(--f-body); color: var(--ink-2); }

/* Åren som en lista i ett kort, inte tio kort. En färg: hel för den första delen, randig för den andra.
   Raderna har sin summa i text, så stapeln är bara en bild av den. */
.arkiv .ut-lista {
  gap: 0; background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-l); overflow: hidden;
}
.arkiv .ut-lista > li + li { border-top: 1px solid var(--line); }
.arkiv .ut-lista .ut-ar { border: 0; border-radius: 0; background: none; padding: 14px 18px; }
.arkiv .ut-lista > li.ut-ar { display: grid; gap: 8px; }
.ut-sum { list-style: none; }
.ut-sum::-webkit-details-marker { display: none; }
.ut-sum .ut-rad::after {
  content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform .2s var(--ease);
}
.ut-ar[open] .ut-sum .ut-rad::after { transform: rotate(-135deg); margin-bottom: -2px; }
.ut-rad { align-items: center; }
.ut-belopp { margin-left: auto; }
.ut-ar-nr { font: 650 22px/1.1 var(--f-display); }
.arkiv .ut-stapel { height: 14px; border-radius: 4px; border: 0; background: var(--paper-2); gap: 2px; }
.arkiv .ut-min { background: var(--sky); border-radius: 4px; }
.arkiv .ut-max {
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--sky) 0 3px, var(--sky-soft) 3px 7px);
}
.arkiv .ut-budgetlinje { top: -3px; bottom: -3px; border-left: 2px dashed var(--ink); }
.ut-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 6px; }
.ut-key--a { background: var(--sky); }
.ut-key--b { background: repeating-linear-gradient(135deg, var(--sky) 0 3px, var(--sky-soft) 3px 7px); }
.ut-sammanfattning h2 { font-size: 18px !important; color: var(--ink-2) !important; }

/* ══ Husets år ═══════════════════════════════════════════════════════════ */

/* Ett litet bokslut: figuren med årets rad, och årtalet som en stämpel. */
.ar-bokslut {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  padding: 20px 24px; margin: 0 0 20px;
}
.ar-bokslut .ar-husse { margin: 0; }
.ar-stamp {
  margin: 0; display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; transform: rotate(-4deg);
  border: 2px dashed var(--mint-ink); color: var(--mint-ink);
}
.ar-stamp span { font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.ar-stamp b { font: 650 34px/1 var(--f-display); letter-spacing: -.02em; }

.ar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.arkiv .ar-grid .arkiv-sektion.ar-kort {
  margin: 0; padding: 20px 22px; background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-l);
}
.ar-grid { align-items: start; }
.ar-kort--bred { grid-column: 1 / -1; }
.ar-kol { display: grid; gap: 16px; }
.ar-kort .dotted-row > span:last-child { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ar-kort .dotted-row { gap: 10px; flex-wrap: wrap; }
.ar-knappar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 760px) {
  .ar-grid { grid-template-columns: 1fr; }
  .ar-bokslut { padding: 16px; }
  .ar-stamp { display: none; }
}

/* ══ Rörelse ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .uh-group .maint-grid .card.mcard, .mcard-prog i, .jt-post, .ut-sum .ut-rad::after { transition: none; }
  .uh-group .maint-grid .card.mcard:hover, .jt-post:hover { transform: none; }
  .mcard.is-klar .mcard-check, .uh-group .maint-grid .card.mcard.is-klar { animation: none; }
}

@media print {
  .jt-year-head { position: static; }
  .jt-post { break-inside: avoid; }
}

/* ══ Idéernas budget (/budget) ═══════════════════════════════════════════
   Diagrammen är BarChart (nedan). Det som lagts är grått och helt, det planerade himmel och randigt,
   så att serierna skiljs åt av mönster och inte bara av färg. Beloppen står i text på raden. */
.bu-key--lagt { background: var(--ink-3); }
.bu-key--utfall { width: 4px; background: var(--ink); }
.bu-domar { margin-top: 12px; }
.bu-klara { margin-top: 16px; }
.bu-klara li { gap: 6px; }
.klar-fakta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.klar-fakta dt { font: 600 12px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.klar-fakta dd { margin: 2px 0 0; font: 650 22px/1.1 var(--f-display); color: var(--ink); }
.klar-utfall { color: var(--ink-2); }

/* ══ Stapeldiagrammet (BarChart) ═════════════════════════════════════════
   Inline-svg med bredden i procent och texten i pixlar, så att etiketterna har samma storlek på
   telefonen som på datorn. Allt färgas med tokens, så mörkt läge följer med utan egna regler.
   Texten bär --ink och --ink-2, aldrig seriens färg: himmel på mörkt kort når inte 4,5:1. */
.bc { margin: 14px 0 0; min-width: 0; max-width: 720px; }
.bc-rubrik { margin: 0 0 6px; font: 650 18px/1.25 var(--f-display); color: var(--ink); }
.bc-svg { display: block; overflow: visible; font-family: var(--f-body); }
.bc-etikett { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.bc-belopp { font-size: 13.5px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc-axel { font-size: 12px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.bc-linjetext { font-size: 12px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-spar { fill: var(--paper-2); }
.bc-lagt { fill: var(--ink-3); }
.bc-plan { fill: var(--sky); }
.bc-rand-a { fill: var(--sky); }
.bc-rand-b { fill: var(--sky-soft); }
.bc-linje { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.bc-utfall { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.bc-key--linje { width: 14px; height: 0; border-top: 2px dashed var(--ink); border-radius: 0; vertical-align: 3px; }
.bc-nycklar { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; }
.bc-nyckel { display: inline-flex; align-items: center; }
.bc-nyckel .ut-key:first-child { margin-left: 0; }
.bc-mening { margin-top: 6px; }
.bc-tabell { margin-top: 8px; }
.bc-tabell summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--ink-2); border-radius: 6px;
}
.bc-tabell summary:hover { color: var(--ink); }
.bc-tabell .table { margin-top: 4px; }
.bc-tabell .table th[scope="row"] { font-weight: 600; text-align: left; }
.bc-tom { margin-top: 10px; }
/* Två diagram sida vid sida under samma rubrik, och under varandra när de inte får plats. */
.bc-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 32px; }
.bc-par .bc { margin-top: 10px; }
@media (forced-colors: active) {
  .bu-key--lagt, .bu-key--utfall { background: CanvasText; }
  .bc-lagt, .bc-plan, .bc-rand-a { fill: CanvasText; }
  .bc-rand-b, .bc-spar { fill: Canvas; }
  .bc-etikett, .bc-belopp, .bc-axel, .bc-linjetext { fill: CanvasText; }
  .bc-linje, .bc-utfall, .bc-grid { stroke: CanvasText; }
  .bc-spar { stroke: CanvasText; stroke-width: 1; }
}
@media print {
  .bc { break-inside: avoid; }
  .bc-tabell { display: none; }
}

/* ══ Vem gör vad ═════════════════════════════════════════════════════════
   Initialerna är knappen på uppgifts- och idékortet. Listan fälls ut under knappen i stället för
   att sväva: ett svävande lager klipptes av kortets overflow och gick utanför skärmen vid 360 px. */
.vem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.vem-knapp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%;
  padding: 4px 14px 4px 4px; border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font: 600 14px/1.2 var(--f-body); cursor: pointer;
}
.vem-knapp:hover:not(:disabled) { border-color: var(--line-strong); }
.vem-knapp:disabled { cursor: default; }
.vem-knapp.is-ingen { color: var(--ink-2); border-style: dashed; }
.vem-namn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vem-init {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--lilac-soft); color: var(--on-soft); font: 700 12px/1 var(--f-body); letter-spacing: .02em;
}
.vem-init--ingen { background: var(--paper-2); color: var(--ink-2); }
.vem-lista {
  list-style: none; margin: 0; padding: 4px; width: min(280px, 100%);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m);
}
.vem-val {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink);
  font: 500 14.5px/1.25 var(--f-body); text-align: left; cursor: pointer;
}
.vem-val > span:not(.vem-init) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vem-val:hover { background: var(--paper); }
.vem-val[aria-pressed="true"] { font-weight: 700; }
.vem-fel { margin: 0; }
.idea-vem { margin: 4px 0 0; }

/* Mina eller Alla, ovanför listan på översikten och i underhållet. */
.vem-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }

.kal-rad-vem { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 760px) {
  .vem-knapp { min-height: 44px; }
}
@media (forced-colors: active) {
  .vem-init { border: 1px solid CanvasText; }
  .vem-val[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ══ Flerval ═════════════════════════════════════════════════════════════
   "Välj flera" sätter en kryssruta med etikett överst på varje kort, och åtgärdsraden ligger fast nedtill.
   Det markerade kortet får en tjockare kant i bläck, men det är bocken i rutan och ordet "vald" i raden som
   säger det: färgen ensam bär det inte. Raden är ett vitt kort med bläcktext i båda lägena, så att
   knapparna står på samma yta som överallt annars och kontrasten är densamma. */
.uh-valj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
.uh-valj .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.uh-valj-tips { margin: 0; }

.mcard-valj {
  align-self: flex-start; min-height: 44px; margin: -8px 0 -6px -4px; padding: 0 8px 0 4px;
  font: 700 14.5px/1 var(--f-body); color: var(--ink);
  /* Shift-klick markerar annars texten mellan korten i stället för bara rutorna. */
  user-select: none; -webkit-user-select: none;
}
.mcard-valj input { margin: 0; cursor: pointer; }
.uh-group .maint-grid .card.mcard.is-vald { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.uh-valjrad {
  position: fixed; z-index: 27; bottom: 24px; left: var(--sidebar-w); right: 0; margin-inline: auto;
  width: fit-content; max-width: min(860px, calc(100% - var(--sidebar-w) - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px 10px 20px; background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  animation: hk-toast-in 180ms ease-out;
}
.uh-valjrad-antal { margin: 0; font-weight: 600; white-space: nowrap; }
.uh-valjrad-antal b { font: 700 20px/1 var(--f-display); }
.uh-valjrad-knappar, .uh-valjrad-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uh-valjrad .btn { min-height: 44px; }
.uh-valjrad-falt { display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px/1.2 var(--f-body); }
.uh-valjrad-falt .input { min-height: 44px; width: auto; }
.uh-valjrad .vem-lista { width: min(280px, 80vw); }
.uh-valjrad-fel, .uh-valjrad-miss { flex: 1 1 100%; margin: 0; }
.uh-valjrad-miss { padding-left: 18px; color: var(--ink-2); }

/* Raden täcker de sista korten om sidan inte får mer luft nedtill, och bekräftelsen som brukar ligga
   där raden ligger flyttas upp, så att den inte döljer det som stod i raden efter åtgärden. */
.app-header ~ .app-main:has(.uh-valjrad) { padding-bottom: 200px; }
body:has(.uh-valjrad) .hk-toast-region { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }

@media (max-width: 980px) {
  .uh-valjrad { left: 0; max-width: calc(100% - 32px); }
}
@media (max-width: 760px) {
  /* Ovanför flikraden, där tummen redan är, som bekräftelserna och ångra-raden. */
  .uh-valjrad {
    left: 12px; right: 12px; width: auto; max-width: none; margin: 0;
    bottom: calc(96px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 8px 10px;
  }
  .uh-valjrad-avbryt { margin-left: auto; }
  .uh-valjrad-antal { order: -1; }
  .uh-valjrad-knappar, .uh-valjrad-form { flex: 1 1 100%; order: 1; }
  .uh-valjrad-fel, .uh-valjrad-miss { order: 2; }
  .app-header ~ .app-main:has(.uh-valjrad) { padding-bottom: calc(300px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .uh-valjrad { animation: none; }
}
@media print {
  .uh-valj, .uh-valjrad, .mcard-valj { display: none !important; }
}
@media (forced-colors: active) {
  .uh-group .maint-grid .card.mcard.is-vald { outline: 3px solid Highlight; }
}