/* The small dashboard card on tjanst.html (assets/js/minidashboard.js): one card, three parts side by side, the same
   card style as the site (thin dark outline, hard offset shadow). The number comes first in every part; the picture
   follows. The looks' pictures and their motion are in odling.css and assets/css/teman/. */
.mini-kort {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 0;
  background: var(--vit); border: 1.5px solid var(--black); border-radius: 16px; box-shadow: 6px 6px 0 var(--black);
}
.mini-kort > * { padding: 26px 28px; min-width: 0; }
.mini-kort > * + * { border-left: 1px solid var(--linje); }
.mini-kort p { margin: 0; }
.mini-tal { font: 600 clamp(40px, 3.6vw, 54px)/1 var(--rubrik); letter-spacing: -0.03em; color: var(--mork); font-variant-numeric: tabular-nums; }
.mini-tal.liten { font-size: clamp(30px, 2.6vw, 38px); }
.mini-etikett { font: 600 15px/1.3 var(--sans); color: var(--black); }
.mini-under { color: var(--dampad); font-size: 14px; }

.mini-huvud { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mini-text { display: grid; gap: 8px; align-content: start; }
.mini-bild { flex: none; width: 112px; }
.mini-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.mini-kort[data-tema="skogen"] .mini-bild { width: 150px; }
.mini-kort[data-tema="standard"] .mini-bild { width: 120px; }

.mini-ring { display: block; }
.mini-ring-spar { fill: none; stroke: var(--papper-2); stroke-width: 12; }
.mini-ring-fyll { fill: none; stroke: var(--mork); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1400ms cubic-bezier(.22, 1, .36, 1); }
.vuxen .mini-ring-fyll { stroke-dashoffset: calc(100 - var(--v)); }

.mini-mitt { display: grid; gap: 26px; align-content: start; }
.mini-litet { display: grid; gap: 8px; }

.mini-stapel { display: block; height: 8px; background: var(--papper-2); border-radius: 999px; overflow: hidden; }
.mini-stapel i { display: block; height: 100%; border-radius: 999px; background: var(--mini-farg, var(--mork));
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1000ms cubic-bezier(.22, 1, .36, 1); }
.vuxen .mini-stapel i { transform: scaleX(var(--v)); }
.mini-kort.tema-odling { --mini-farg: #4F7A4E; }
.mini-kort.tema-skogen { --mini-farg: #3E6B52; }

.mini-lista { display: grid; gap: 14px; align-content: start; }
.mini-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mini-lista li { display: grid; gap: 6px; }
.mini-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.mini-rad > span { color: var(--dampad); font-size: 14px; font-variant-numeric: tabular-nums; }
.mini-person { grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.mini-person-text { display: grid; gap: 6px; }
.mini-ikon { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--black); display: grid; place-items: center;
  font: 600 13px var(--sans); background: var(--papper); }
.mini-lage { font: 600 12px/1 var(--sans); padding: 5px 9px; border: 1.5px solid var(--black); border-radius: 999px; color: var(--black) !important; }
.mini-lage.efter { background: #FBEFC6; }
.mini-atgard { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--black); }
.mini-prick { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #C8402F; transform: translateY(-1px); }
.mini-nasta { display: grid; gap: 4px; background: var(--gul, #F4C01E); border: 1.5px solid var(--black); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--black); padding: 12px 14px; }
.mini-nasta b { font: 600 19px/1.2 var(--rubrik); }

@media (max-width: 900px) {
  .mini-kort { grid-template-columns: minmax(0, 1fr); }
  .mini-kort > * + * { border-left: 0; border-top: 1px solid var(--linje); }
}
@media (prefers-reduced-motion: reduce) {
  .mini-ring-fyll, .mini-stapel i { transition: none; }
}