/* Övergångar (js/tabs.js och js/motion.js): vyer och kort som tonas in, markören i flikraden och skelett.
   Tider och kurva från css/tokens.css; med minskad rörelse är tiderna noll och skripten hoppar över rörelsen.
   Bara opacity och transform animeras. */

/* ---------- Tona in ---------- */
/* Reserven när View Transitions saknas, och för vyer utanför panelen: den nya vyn kommer in underifrån.
   backwards, inte both, så att ingen transform ligger kvar när animationen är klar. */
.tr-in { animation: tr-in var(--dur-2) var(--ease) backwards; }
@keyframes tr-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tr-out { to { opacity: 0; } }

/* View Transitions vid flikbyte: bara panelens innehåll tas som bild. Roten får inget namn, så kartan
   och resten av sidan ritas som vanligt under övergången och går att trycka på. */
:root.tr-tabs { view-transition-name: none; }
:root.tr-tabs #sheet-body { view-transition-name: tr-view; }
:root.tr-tabs::view-transition { pointer-events: none; }
::view-transition-group(tr-view) { animation-duration: var(--dur-2); animation-timing-function: var(--ease); }
::view-transition-old(tr-view) { animation: tr-out var(--dur-1) var(--ease-in) both; }
::view-transition-new(tr-view) { animation: tr-in var(--dur-2) var(--ease) both; }

/* ---------- Markören i flikraden ---------- */
/* js/tabs.js sätter storlek och läge. Knapparna ligger ovanpå, och den valda knappen har ingen egen bakgrund. */
@media (min-width: 761px) { .tabs.has-marker { position: relative; } }
.tabs.has-marker button { position: relative; z-index: 1; }
.tabs.has-marker button[aria-current="page"] { background: transparent; }
.tabs-marker { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-md); background: var(--accent-soft); transform-origin: 0 0; pointer-events: none; will-change: transform; }
@media (max-width: 760px) { .tabs-marker { border-radius: var(--r-pill); } }

/* ---------- Skelett ---------- */
/* Samma ljusa block som i Läget (.lg-skel i css/laget.css). Höjderna följer det riktiga innehållet,
   så att inget hoppar när det kommer. */
.tp-skel .tp-head .lg-skel { width: 38%; height: 13px; margin: 3px 0; }
.tp-skel .tp-sum .lg-skel { width: 64%; height: 13px; margin: 3px 0; }
.tp-skel > div { display: grid; gap: 6px; }
.tp-skel .tp-skel-sum { width: 130px; height: 14px; margin: 3px 0; }
.tp-skel .tp-list { overflow: hidden; }
.tp-skel .tp-list li .lg-skel { height: 11px; margin: 4px 0; }
.tp-skel .tp-list li .lg-skel + .lg-skel { width: 40px; }
.tp-skel .tp-list li::before { background: var(--line); }
.tp-skel .tp-list li > i { border-color: var(--line); }
.av-skel .av-row { min-height: 66px; } /* som en avgång med en rad under */
.tk-skel { height: 12px; width: 70%; margin: 3px 0; }