/* 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; }
.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); }

/* Få färger: alla staplar i himmel, en ovanligt hög månad i tomat med ikon och ord i förklaringen. */
.mt-bars { height: 220px; gap: 8px; }
.mt-bar { border-radius: 8px 8px 3px 3px; }
.mt-hog > .mt-bar { background: var(--tomato); }
.mt-hog .mt-val { color: var(--tomato-ink); font-weight: 700; }
.mt-val svg { vertical-align: -2px; margin-right: 1px; }
.mt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mt-legend-hog { color: var(--tomato-ink); display: inline-flex; align-items: center; gap: 4px; }
.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; }

/* ── 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; }
  .papper-knappar { padding: 10px 12px 12px; }
  .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; }
  .mt-bars { gap: 3px; }
  :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; }
}