/* Kopia av ~/projekt/verktyg/designsystem/byte.css (2026-10-14, VIK-P2-133). Ändra i
   designsystemet och kopiera hit igen; appens tokens mappas i app.css (--byte-*). */
/* byte.css — rörelse när något byts ut på sidan, inte när man scrollar. Kräver tokens.css och byte.js.

   Byggt för Företagsdata 2026-10-14. Sami: "hover och att allt rör sig när man ändrar något
   att det animeras när man byter från tabell till karta osv." Smaken ur animation-skillen:
   - glid, svep eller avtäckning hellre än ren opacity-fade ("tråk fadea standard", 2026-04-28)
   - snabbt in, tydlig inbromsning (--kurva-expo, 2026-08-17)
   - inte samma rörelse på allt (2026-10-02): vyer avtäcks, rader glider, chips sveper in
   - ingen studs, ingen uppskalning (2026-10-06)
   - stängning med samma kurva, speglad, aldrig linjärt bort (golv 4)

   Markup:
   <div data-byte-vaxel="streck">  knappar med aria-current eller aria-pressed="true";
                                   ett streck glider under den valda. "platta": en platta bakom.
                                   "sida": ett 2 px streck till vänster, för innehållsförteckningar.
   <tbody data-byte-lista>         nya rader glider upp, en i taget
   <div data-byte-lista="nya">     bara det som inte fanns förut sveper in (chips, taggar)
   <details data-byte>             fälls ut och ihop i höjd; pilen vrids
   <dialog data-byte>              glider upp när den öppnas, ned när den stängs
   Byte.visa(el), Byte.vaxla(ut, in) och Byte.in([...]) i byte.js för det som visas med hidden.

   --byte-steg (40 ms mellan raderna) är byggets val [OMÄTT]. Tider annars ur tokens.css. */

/* Växel: markören ligger under knapparnas text och glider mellan dem. */
[data-byte-vaxel] { position: relative; isolation: isolate; }
[data-byte-vaxel] > .byte-markor {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: var(--b-w, 0); height: var(--b-h, 0); transform: translate(var(--b-x, 0), var(--b-y, 0));
  transition: transform var(--tid-lugn) var(--kurva-expo), width var(--tid-lugn) var(--kurva-expo),
              height var(--tid-lugn) var(--kurva-expo), opacity var(--tid-normal) var(--kurva-standard);
}
[data-byte-vaxel] > .byte-markor.direkt { transition: none; }
[data-byte-vaxel="streck"] > .byte-markor { background: var(--byte-markor, var(--text)); border-radius: 2px; }
[data-byte-vaxel="sida"] > .byte-markor { background: var(--byte-markor, var(--text)); }
[data-byte-vaxel="platta"] > .byte-markor { background: var(--byte-platta, var(--yta)); border-radius: var(--byte-radie, 6px);
  box-shadow: 0 1px 2px rgb(6 26 87 / .08), 0 0 0 1px var(--hairline, rgb(0 0 0 / .08)); }

/* Utfällbart: egen pil i stället för webbläsarens, så att den kan vridas. */
details[data-byte] > summary { list-style: none; cursor: pointer; }
details[data-byte] > summary::-webkit-details-marker { display: none; }
details[data-byte] > summary::before {
  content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .7em .12em .1em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--tid-normal) var(--kurva-standard);
}
details[data-byte][open] > summary::before, details[data-byte].byte-oppnar > summary::before { transform: rotate(45deg); }
details[data-byte].byte-stanger > summary::before { transform: rotate(-45deg); }

/* Dialog: glider upp 16 px med expo-kurvan när den öppnas. Stängningen animeras bara där
   webbläsaren kan hålla kvar dialogen i toppskiktet (overlay), annars stängs den direkt. */
dialog[data-byte][open] { animation: byte-dialog-in var(--tid-lugn) var(--kurva-expo); }
dialog[data-byte][open]::backdrop { animation: byte-fond-in var(--tid-lugn) var(--kurva-standard); }
@keyframes byte-dialog-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes byte-fond-in { from { opacity: 0; } }
@supports (overlay: auto) {
  dialog[data-byte] {
    transition: opacity var(--tid-normal) cubic-bezier(.78, 0, .81, 0), transform var(--tid-normal) cubic-bezier(.78, 0, .81, 0),
                overlay var(--tid-normal) allow-discrete, display var(--tid-normal) allow-discrete;
  }
  dialog[data-byte]:not([open]) { opacity: 0; transform: translateY(16px); }
  dialog[data-byte]::backdrop { transition: opacity var(--tid-normal) var(--kurva-standard), overlay var(--tid-normal) allow-discrete, display var(--tid-normal) allow-discrete; }
  dialog[data-byte]:not([open])::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-byte-vaxel] > .byte-markor, details[data-byte] > summary::before,
  dialog[data-byte], dialog[data-byte]::backdrop { transition: none !important; animation: none !important; }
}