/* Pärmen: prylar, papper, avtal, mätare, inköpslistan och hantverkare.

   Husets arkiv ska kännas som en ordnad pärm, inte som en databastabell: kort i stället för
   rader, en färgad bricka med ikon per sort, och de stora siffrorna överst. Färgen är en
   flik att känna igen sorten på; namnet, ikonen och orden bär alltid betydelsen. Brickorna är
   mjuka ytor och bär därför --on-soft (mörkt bläck i ljust, ljust i mörkt), aldrig --on-color. */

/* ── Delat: brickor, grupper, tillbakalänk ───────────────────────────────── */
.parm-ikon, .pryl-bild, .pryl-hjalte-bild, .hv-bricka, .papper-miniatyr {
  --ton: var(--paper-2);
  background: var(--ton); color: var(--on-soft);
}
.ton-syren { --ton: var(--lilac-soft); }
.ton-himmel { --ton: var(--sky-soft); }
.ton-sol { --ton: var(--sun-soft); }
.ton-mint { --ton: var(--mint-soft); }
.ton-rosa { --ton: var(--pink-soft); }

.parm-ikon {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
}
.parm-antal {
  font: 700 13px/1 var(--f-body); padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-2); border: var(--bw) solid var(--line);
  font-variant-numeric: tabular-nums;
}

.parm-grupp { margin-top: 36px; }
.parm-grupp > h2 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
  scroll-margin-top: 90px;
}

.parm-tillbaka {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--ink-2); font-weight: 600; text-decoration: none; margin: 0 0 8px;
}
.parm-tillbaka:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* Det man får på köpet, i det tomma läget: tre konkreta rader med ikon. */
.parm-varde { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.parm-varde li { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.parm-varde svg { color: var(--ink-2); flex: none; }

/* ── Prylar: korten ──────────────────────────────────────────────────────── */
.pryl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.pryl-kort {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  transition: transform .25s var(--ease), border-color .2s;
}
.pryl-kort:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pryl-bild { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; }
.pryl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pryl-kort-text { display: grid; gap: 2px; padding: 14px 16px 0; min-width: 0; }
.pryl-kort-text b { font: 650 19px/1.2 var(--f-display); overflow-wrap: break-word; hyphens: auto; }
.pryl-kort-text small { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.pryl-kort-pillor { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 16px; margin-top: auto; }
.pryl-kort-pillor .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.pryl-grid > li, .papper-grid > li, .avtal-lista > li, .hv-grid > li { min-width: 0; }

/* ── Prylar: sökningen, filtren och tabellen ─────────────────────────────────
   Pärmen är kort, men den som har fyrtio prylar letar efter ett serienummer eller en garanti som
   går ut, och då är en tabell snabbare än att skrolla bilder. Valet mellan dem minns i webbläsaren. */
.pryl-verktyg {
  display: grid; grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px; align-items: end; margin: 28px 0 0;
}
.pryl-verktyg .field { margin: 0; min-width: 0; }
.pryl-vy { display: grid; gap: 6px; justify-items: start; }
.pryl-vy .seg { max-width: 100%; }
/* På bred skärm sorterar rubrikerna; listan behövs bara där tabellen blivit rader. */
.pryl-sortera { display: none; }
.pryl-urval { gap: 10px; align-items: center; margin: 12px 0 0; min-height: 44px; flex-wrap: wrap; }
.pryl-urval p { margin: 0; }
.pryl-inga { margin-top: 16px; padding: 22px 24px; box-shadow: none; }
.pryl-inga p { margin: 0; }

.pryl-tabell-ram {
  margin-top: 12px; background: var(--card);
  border: var(--bw) solid var(--line); border-radius: var(--r-l);
}
.pryl-tabell th[scope="col"] { background: none; padding: 0; vertical-align: bottom; }
.pryl-tabell tbody tr { position: relative; }
.pryl-tabell tbody tr:last-child > * { border-bottom: 0; }
.pryl-tabell td, .pryl-tabell tbody th { vertical-align: middle; }
/* Hela raden är träffytan, men det är länken som får fokus och läses upp. */
.pryl-tabell tbody th {
  font: 650 16px/1.25 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); background: none;
  border-bottom: var(--bw-thin) solid var(--tema-kant); padding: 12px;
}
.pryl-tabell tbody th small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.pryl-rad-lank { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pryl-rad-lank::after { content: ""; position: absolute; inset: 0; }
.pryl-rad-lank:hover { text-decoration: underline; text-underline-offset: 3px; }
.pryl-tabell .pill { white-space: normal; text-align: left; }

/* Rubriken är en knapp: hela cellen går att klicka på, och pilen säger åt vilket håll. Utan
   sortering står pilen svag, så att det syns att kolumnen går att sortera på. */
.pryl-sortknapp {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.pryl-sortknapp svg { opacity: .35; transition: transform .2s var(--ease); }
.pryl-sortknapp:hover { color: var(--ink); }
.pryl-sortknapp.is-ascending, .pryl-sortknapp.is-descending { color: var(--ink); }
.pryl-sortknapp.is-ascending svg, .pryl-sortknapp.is-descending svg { opacity: 1; }
.pryl-sortknapp.is-ascending svg { transform: rotate(180deg); }
.pryl-sortknapp:focus-visible { outline-offset: -3px; }

/* ── Prylsidan ───────────────────────────────────────────────────────────── */
.pryl-hjalte {
  display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 28px; align-items: center;
  margin: 0 0 24px;
}
.pryl-hjalte-bild {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-xl); border: var(--bw) solid var(--line);
}
.pryl-hjalte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pryl-hjalte-text { display: grid; gap: 10px; align-content: center; min-width: 0; }
.pryl-hjalte-text .arkiv-h1 { margin: 0; overflow-wrap: anywhere; }
.pryl-undertitel { margin: 0; font-size: 18px; color: var(--ink-2); }
.pryl-knappar { gap: 8px; margin-top: 4px; }

.pryl-avsnitt { margin: 0 0 18px; padding: 22px 24px; display: block; }
.pryl-avsnitt > .arkiv-h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.pryl-avsnitt .appliance-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 24px;
}
.pryl-avsnitt .appliance-facts > div { min-width: 0; }
.pryl-avsnitt .appliance-facts dt { font-size: 13px; color: var(--ink-2); margin-bottom: 2px; }
.pryl-avsnitt .appliance-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pryl-avsnitt .appliance-facts .pryl-fakta-bred { grid-column: 1 / -1; }
.pryl-avsnitt .appliance-facts .pryl-fakta-bred dd { font-weight: 500; }
.pryl-anteckning { max-width: 64ch; margin: 16px 0 0; padding-top: 14px; border-top: var(--bw) dashed var(--line); }
.pryl-avsnitt .maint-grid .card { box-shadow: none; }

/* Formuläret: tre grupper i stället för tio fält i en följd. */
.pryl-form { display: grid; gap: 16px; max-width: 640px; }
.pryl-form-ai { display: block; padding: 18px 20px; background: var(--paper-2); box-shadow: none; }
.pryl-form-grupp { margin: 0; padding: 18px 20px 20px; display: grid; gap: 14px; min-width: 0; }
.pryl-form-grupp legend {
  float: left; width: 100%; padding: 0; margin: 0 0 2px;
  font: 650 18px/1.2 var(--f-display); color: var(--ink);
}
.pryl-form-grupp legend + * { clear: both; }
.pryl-falt-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ── Papper ──────────────────────────────────────────────────────────────── */
/* Uppladdningsytan: filfältet täcker ytan osynligt (samma grepp som .ai-drop), så att klick och
   en fil som dras dit går till samma fält. Fokusringen ritas på ytan, eftersom fältet själv är osynligt. */
.papper-drop { position: relative; min-width: 0; }
.papper-snabb { margin: 0 0 18px; }
.papper-drop-zon {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 18px 20px;
  border: var(--bw) dashed var(--line-strong); border-radius: var(--r-m); background: var(--card);
  color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.papper-drop.is-liten .papper-drop-zon { min-height: 64px; padding: 12px 16px; }
.papper-drop-zon:hover { border-color: var(--ink); background: var(--paper-2); }
.papper-drop.is-over .papper-drop-zon { border-style: solid; border-color: var(--ink); background: var(--sky-soft); }
.papper-drop.is-over .papper-drop-titel, .papper-drop.is-over .papper-drop-hint { color: var(--on-soft); }
.papper-drop.has-file .papper-drop-zon { border-style: solid; }
.papper-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.papper-drop-input:disabled { cursor: progress; }
.papper-drop-zon:has(.papper-drop-input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }
:root[data-theme="dark"] .papper-drop-zon:has(.papper-drop-input:focus-visible) { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .papper-drop-zon:has(.papper-drop-input:focus-visible) { outline-color: var(--sun); } }
.papper-drop-ikon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--paper-2); color: var(--ink); border: var(--bw) solid var(--line);
}
.papper-drop-text { display: grid; gap: 3px; min-width: 0; }
.papper-drop-titel { font: 650 16px/1.25 var(--f-body); overflow-wrap: anywhere; }
.papper-drop-hint { color: var(--ink-2); font-size: 14px; line-height: 1.4; }

.papper-forlopp { display: grid; gap: 6px; max-width: 420px; }
.papper-forlopp progress {
  width: 100%; height: 10px; appearance: none; border: 0; border-radius: var(--r-pill);
  background: var(--paper-2); overflow: hidden;
}
.papper-forlopp progress::-webkit-progress-bar { background: var(--paper-2); border-radius: var(--r-pill); }
.papper-forlopp progress::-webkit-progress-value { background: var(--ink); border-radius: var(--r-pill); transition: width .2s; }
.papper-forlopp progress::-moz-progress-bar { background: var(--ink); border-radius: var(--r-pill); }

/* Sök, rum och ordning på en rad; sökrutan tar resten av bredden. */
.papper-verktyg {
  display: grid; grid-template-columns: minmax(200px, 1fr) repeat(auto-fit, minmax(170px, 220px)); gap: 12px 14px;
  align-items: end; margin: 0 0 14px;
}
.papper-flikar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.papper-flik {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 5px;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink); font: 600 15px/1.2 var(--f-body); cursor: pointer;
}
.papper-flik:first-child { padding-left: 14px; }
.papper-flik .parm-ikon { width: 32px; height: 32px; border-radius: var(--r-pill); }
.papper-flik:hover { border-color: var(--line-strong); }
/* Vald flik: fylld med bläck. aria-pressed säger det till skärmläsaren, fyllningen till ögat. */
.papper-flik[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.papper-flik[aria-pressed="true"] .parm-antal { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.papper-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; color: var(--ink-2); }
.papper-resultat:empty { margin: 0; }

.papper-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.papper-kort {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  background: var(--card); border: var(--bw) solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--lift); min-width: 0;
}
/* Miniatyren: bilden som den är, eller ett pappersark med sortens ikon och en tydlig PDF-bricka. */
.papper-miniatyr {
  position: relative; display: grid; place-items: center; align-content: center; gap: 8px;
  aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--bw) solid var(--line);
  text-decoration: none;
}
.papper-miniatyr.is-bild { display: block; }
.papper-miniatyr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.papper-pdf {
  font: 800 12px/1 var(--f-body); letter-spacing: .1em; padding: 5px 9px; border-radius: 6px;
  background: var(--tomato); color: var(--on-color);
}
.papper-sidor { font: 600 13px/1 var(--f-body); color: var(--on-soft); }
.papper-text { display: grid; gap: 6px; min-width: 0; justify-items: start; padding: 14px 16px 0; }
.papper-sort { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.papper-sort .parm-ikon { width: 22px; height: 22px; border-radius: 6px; }
.papper-titel { font: 650 18px/1.25 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.papper-text small { color: var(--ink-2); font-size: 13.5px; }
/* Raden bryts mellan uppgifterna och aldrig inne i en: "13 nov 2026 · Pdf · 1" och "sida" på nästa rad
   gick inte att läsa i telefonens smala kort. */
.papper-fakta > span { white-space: nowrap; }
.papper-rum { display: inline-flex; align-items: center; gap: 4px; }
.papper-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 16px; margin-top: auto; }

.papper-exempel li { display: flex; gap: 10px; align-items: flex-start; }
.papper-exempel .parm-ikon { width: 28px; height: 28px; border-radius: 8px; }

/* ── Avtal ───────────────────────────────────────────────────────────────── */
.avtal-topp {
  display: grid; grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(180px, 1fr)); gap: 16px;
  margin: 4px 0 28px;
}
.avtal-summa {
  display: grid; gap: 6px; align-content: end; padding: 22px 24px;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  border-top: 3px solid var(--sun);
}
.avtal-summa-tal {
  margin: 0; font: 650 clamp(44px, 6vw, 76px)/.95 var(--f-display); letter-spacing: -.035em; color: var(--ink);
  white-space: nowrap;
}
.avtal-summa .small { color: var(--ink-2); }

.avtal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.avtal-rad { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; min-width: 0; }
/* Kanten följer läget; markeringen överst och pillan säger samma sak i ord. */
.avtal-rad.is-snart { border-left: 5px solid var(--sun); }
.avtal-rad.is-sen { border-left: 5px solid var(--tomato); }
.avtal-flagga {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0;
  padding: 4px 10px; border-radius: var(--r-pill); font: 700 13px/1.2 var(--f-body);
  background: var(--sun-soft); color: var(--on-soft);
}
.avtal-rad.is-sen .avtal-flagga { background: var(--tomato-soft); }
.avtal-rad-topp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; }
.avtal-rad-topp .parm-ikon { width: 40px; height: 40px; border-radius: 12px; }
.avtal-namn { display: grid; gap: 2px; min-width: 0; align-self: center; }
.avtal-namn h3 { margin: 0; font: 650 20px/1.2 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.avtal-kostnad { display: grid; gap: 2px; justify-items: end; text-align: right; }
.avtal-kostnad b { font: 650 26px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.avtal-kostnad small { color: var(--ink-2); font-size: 13.5px; }
.avtal-fakta {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1.4fr); gap: 10px 18px;
  margin: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--paper-2); border: var(--bw) solid var(--line);
}
.avtal-fakta > div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.avtal-fakta dt { font: 700 12px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.avtal-fakta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.avtal-uppsagning dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.avtal-anteckning { margin: 0; white-space: pre-line; color: var(--ink-2); }
.avtal-pryl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.avtal-knappar { gap: 8px; padding-top: 2px; }

/* ── Mätare ──────────────────────────────────────────────────────────────── */
.mt-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.mt-meter-head h2 { display: flex; align-items: center; gap: 10px; }
.mt-latest { display: grid; justify-items: end; gap: 4px; text-align: right; }
.mt-latest-tal { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.mt-latest-tal b { font: 650 38px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.mt-latest-tal span { color: var(--ink-2); }

.mt-fler { margin-top: 8px; }
.mt-fler-knapp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0 4px;
  border-radius: var(--r-s);
}
.mt-fler-knapp[aria-expanded="true"] svg { transform: rotate(180deg); }
.mt-form-card { max-width: 760px; }

/* ── Mätarnas diagram (ColumnChart) ─────────────────────────────────────────
   Stående staplar per månad med axel till vänster i jämna steg. Höjderna kommer färdiga som
   --h (stapeln) och --j (strecket för året innan) i procent av ytan. Få färger: staplarna i himmel,
   en ovanligt hög månad i tomat med ikon, året innan ett streck i bläck med en ring i kortets färg så
   att det syns även där det korsar stapeln. Text bär aldrig seriens färg, bara bläck och statusens -ink. */
.cc { --cc-h: 210px; --cc-y: 48px; margin: 18px 0 0; min-width: 0; }
.cc-enhet { margin: 0 0 4px; font: 600 12px/1.2 var(--f-body); color: var(--ink-2); }
.cc-plot { display: grid; grid-template-columns: var(--cc-y) minmax(0, 1fr); padding-top: 22px; }
.cc-yaxel { position: relative; height: var(--cc-h); }
.cc-yaxel span {
  position: absolute; right: 10px; transform: translateY(50%); line-height: 1;
  font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cc-yta { position: relative; min-width: 0; }
.cc-grid { position: absolute; top: 0; left: 0; right: 0; height: var(--cc-h); pointer-events: none; }
.cc-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cc-grid .cc-noll { border-top-color: var(--line-strong); }

.cc-cols {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cc-col { position: relative; display: grid; grid-template-rows: var(--cc-h) auto; min-width: 0; border-radius: var(--r-s); }
.cc-col:focus-visible { outline-offset: 1px; }
.cc-rum { position: relative; display: block; }
/* Ytan bakom stapeln vid hovring och fokus: hela kolumnen svarar, inte bara de målade pixlarna. */
.cc-rum::before { content: ""; position: absolute; inset: 0 1px; border-radius: var(--r-s); }
.cc-col:is(:hover, :focus) .cc-rum::before { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cc-stapel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(28px, 64%); height: var(--h); background: var(--sky); border-radius: 5px 5px 0 0;
}
.cc-del .cc-stapel {
  background: repeating-linear-gradient(135deg, var(--sky) 0 3px, var(--sky-soft) 3px 7px);
  box-shadow: inset 0 0 0 1.5px var(--sky);
}
.cc-hog .cc-stapel { background: var(--tomato); }
.cc-hog.cc-del .cc-stapel {
  background: repeating-linear-gradient(135deg, var(--tomato) 0 3px, var(--tomato-soft) 3px 7px);
  box-shadow: inset 0 0 0 1.5px var(--tomato);
}
.cc-jmf {
  position: absolute; left: 50%; bottom: var(--j); transform: translate(-50%, 50%);
  width: min(40px, 88%); height: 3px; border-radius: 2px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--card);
}
/* Siffran och ikonen står ovanför det högsta av stapeln och strecket, så att strecket aldrig stryker över dem. */
.cc-topp {
  position: absolute; left: 50%; bottom: calc(max(var(--h), var(--j)) + 6px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 3px; line-height: 1; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.cc-hog .cc-topp { color: var(--tomato-ink); }
.cc-hoger:last-child .cc-topp { left: auto; right: 0; transform: none; }
.cc-glapp { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 13px; color: var(--ink-3); line-height: 1; }
.cc-man {
  padding-top: 7px; min-height: calc(2.5em + 7px); text-align: center; line-height: 1.25;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
}
.cc-ar { display: block; font-size: 11px; color: var(--ink-3); }

/* Rutan med värdet. Den ligger ovanför stapeln och vid kanterna inåt, så att den aldrig hamnar utanför kortet. */
.cc-ruta {
  position: absolute; z-index: 5; left: 50%; bottom: calc(max(var(--h), var(--j)) + 30px); transform: translateX(-50%);
  display: none; gap: 2px; min-width: 150px; padding: 9px 12px; pointer-events: none;
  background: var(--card); color: var(--ink-2); border: var(--bw-thin, 1.5px) solid var(--line-strong);
  border-radius: var(--r-m); box-shadow: 0 4px 14px var(--shadow-c); font-size: 13px; line-height: 1.35; white-space: nowrap; text-align: left;
}
.cc-ruta b { font: 700 17px/1.15 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.cc-ruta-jmf, .cc-ruta-hog { display: inline-flex; align-items: center; gap: 6px; }
.cc-ruta-hog { color: var(--tomato-ink); font-weight: 700; }
.cc-vanster .cc-ruta { left: 0; transform: none; }
.cc-hoger .cc-ruta { left: auto; right: 0; transform: none; }
.cc-col:is(:hover, :focus) .cc-ruta { display: grid; }

.cc-nycklar { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0 var(--cc-y); }
.cc-nycklar > span { display: inline-flex; align-items: center; gap: 6px; }
.cc-nyckel { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.cc-nyckel--stapel { background: var(--sky); }
.cc-nyckel--jmf { width: 16px; height: 3px; border-radius: 2px; background: var(--ink); }
.cc-nyckel--del { background: repeating-linear-gradient(135deg, var(--sky) 0 2px, var(--sky-soft) 2px 5px); box-shadow: inset 0 0 0 1.5px var(--sky); }
.cc-nycklar .cc-nyckel-hog { color: var(--tomato-ink); font-weight: 600; gap: 4px; }

.cc-avvikelser { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cc-avvikelser li {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: var(--r-m);
  background: var(--tomato-soft); color: var(--on-soft); font-size: 14.5px; line-height: 1.4;
}
.cc-avvikelser .hk-icon { flex: none; margin-top: 1px; color: var(--tomato-ink); }
.cc-mening { margin: 10px 0 0; max-width: 70ch; }
.cc-tabell { margin-top: 6px; }

/* Före andra avläsningen: axeln och månaderna står kvar, staplarna är streckade skuggor. */
.cc-vantar { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
.cc-vantar .cc-rum { border-bottom: 1px solid var(--line-strong); }
.cc-skugga {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(28px, 64%); height: var(--h);
  border: 1.5px dashed var(--line-strong); border-bottom: 0; border-radius: 5px 5px 0 0; opacity: .6;
}
.cc-vantar-text {
  position: absolute; left: 50%; top: calc(var(--cc-h) / 2 + 8px); transform: translate(-50%, -50%);
  width: max-content; max-width: min(460px, 92%); margin: 0; padding: 12px 16px; text-align: center;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-m);
}

@media (max-width: 760px) {
  .cc { --cc-h: 180px; --cc-y: 38px; }
  .cc-yaxel span { right: 6px; font-size: 11px; }
  .cc-stapel, .cc-skugga { width: 68%; border-radius: 4px 4px 0 0; }
  .cc-man { font-size: 11px; }
  .cc-ar { font-size: 10px; letter-spacing: -.02em; }
  .cc-topp { font-size: 11.5px; }
  .cc-nycklar { margin-left: 0; }
}
@media (forced-colors: active) {
  .cc-stapel { background: CanvasText; forced-color-adjust: none; }
  .cc-del .cc-stapel { background: Canvas; border: 2px dashed CanvasText; }
  .cc-jmf { background: Highlight; forced-color-adjust: none; }
}

/* ── Inköpslistan ────────────────────────────────────────────────────────── */
.buy-progress {
  height: 10px; border-radius: var(--r-pill); background: var(--paper-2);
  border: var(--bw) solid var(--line); overflow: hidden; max-width: 520px;
}
.buy-progress i { display: block; height: 100%; background: var(--mint); border-radius: inherit; transition: width .4s var(--ease); }
.buy-progress-text { margin: 8px 0 20px; font-weight: 600; color: var(--ink); }
.buy-list { display: grid; gap: 20px; max-width: 720px; }
.buy-group {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  padding: 18px 18px 14px; box-shadow: var(--lift);
}
.buy-group .buy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.buy-group .buy-head h2 { margin: 0; flex: 1 1 auto; }
.buy-count { font-weight: 700; color: var(--ink-2); }
.buy-group .buy-row { min-height: 60px; border-radius: var(--r-m); }
.buy-group .buy-row .box { width: 30px; height: 30px; border-width: 2px; border-radius: 8px; }
.buy-group .buy-row.klar .what b { text-decoration: line-through; color: var(--ink-2); }

/* ── Hantverkare ─────────────────────────────────────────────────────────── */
.hv-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.hv-kort { display: flex; flex-direction: column; gap: 12px; padding: 20px; min-width: 0; }
.hv-topp { display: flex; gap: 14px; align-items: center; }
.hv-bricka {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 650 19px/1 var(--f-display); letter-spacing: .02em;
}
.hv-namn { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.hv-namn h2 { margin: 0; font: 650 20px/1.2 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.hv-kontakt { display: grid; gap: 6px; }
.hv-lank {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-s); color: var(--ink);
  font-weight: 600; text-decoration: none; overflow-wrap: anywhere; justify-self: start; max-width: 100%;
}
.hv-lank:hover { background: var(--paper-2); }
.hv-anteckning { margin: 0; white-space: pre-line; color: var(--ink); }
.hv-poster { margin: 0; display: flex; align-items: center; gap: 6px; }
.hv-knappar { gap: 8px; margin-top: auto; }

/* ── Smalt ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pryl-hjalte { grid-template-columns: 1fr; gap: 16px; }
  .pryl-hjalte-bild { aspect-ratio: 16 / 10; }
  .pryl-avsnitt { padding: 18px 16px; }
  .pryl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pryl-kort-text b { font-size: 16px; }
  .pryl-avsnitt .appliance-facts { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pryl-kort-text { padding: 12px 12px 0; }
  .pryl-kort-pillor { padding: 8px 12px 12px; }
  .pryl-verktyg { grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .pryl-sok, .pryl-vy { grid-column: 1 / -1; }
  .pryl-sortera { display: grid; grid-column: 1 / -1; }
  /* Tabellen blir kort, en pryl per kort, som alla .table (husse-skal.css), i stället för att scrolla i
     sidled. Rubrikraden göms helt och inte bara visuellt: dess sorteringsknappar fick annars fokus utan
     att synas, och listan Sortera gör samma sak. Kolumnens namn står i varje cell (data-label). */
  .pryl-tabell thead { display: none; }
  .pryl-tabell-ram { border: 0; background: none; border-radius: 0; }
  .pryl-tabell tbody th[scope="row"] { font-size: 17px; font-weight: 650; padding-bottom: 6px; }
  .pryl-tabell tbody td { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; }
  .hv-grid { grid-template-columns: 1fr; }
  /* Två miniatyrer i bredd, som en uppslagen pärm; knapparna radbryts under. */
  .papper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .papper-text { padding: 10px 12px 0; }
  .papper-titel { font-size: 16px; }
  /* Ladda ner över hela kortet och Ändra och Ta bort bredvid varandra under. Med raden som radbryts hamnade
     de tre under varandra med en knapps luft emellan, och kortet blev dubbelt så högt som miniatyren. */
  .papper-knappar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; padding: 10px 12px 12px; }
  .papper-knappar > :first-child, .papper-knappar > span { grid-column: 1 / -1; }
  .papper-knappar .btn { justify-content: center; padding-inline: 6px; }
  .papper-verktyg { grid-template-columns: 1fr 1fr; }
  .papper-sok { grid-column: 1 / -1; }
  .avtal-fakta { grid-template-columns: 1fr; }
  .avtal-rad { padding: 16px; }
  .avtal-topp { grid-template-columns: 1fr 1fr; }
  .avtal-summa { grid-column: 1 / -1; }
  .mt-latest { justify-items: start; text-align: left; }
  :is(.papper-knappar, .avtal-knappar, .hv-knappar, .pryl-avsnitt, .mt-actions) .btn-sm { min-height: 44px; }
}
@media (max-width: 400px) {
  .avtal-rad-topp { grid-template-columns: auto minmax(0, 1fr); }
  .avtal-kostnad { grid-column: 2; justify-items: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pryl-kort, .buy-progress i, .pryl-sortknapp svg, .papper-drop-zon { transition: none; }
  .papper-forlopp progress::-webkit-progress-value { transition: none; }
  .pryl-kort:hover { transform: none; }
}