/* glans.css — detaljerna som svarar när man rör vid gränssnittet. Kräver tokens.css och glans.js.

   Byggt för Företagsdata 2026-10-14. Sami: "fixa alla micro animationer och lite mera avancerade
   'bling' för att få den mera interaktiv och snygg ... hover eller knappar". Smaken ur animation-skillen:
   - knappar byter färg; inget lyft, ingen uppskalning, ingen studs, ingen ripple (2026-05-25, 2026-10-06)
   - svep och mask hellre än ren fade (2026-04-28); snabbt in, tydlig inbromsning (2026-08-17)
   - staplar växer, talet räknar (2026-09-06, 2026-09-09)

   Markup:
   <body data-glans>              varje .knapp inuti får knappsvepet: färgen sveper in från den sida
                                  pekaren kommer ifrån och ut åt den sida den lämnar. Andra element:
                                  class="glans-knapp", eller en extra selektor i värdet
                                  (data-glans=".nav-tool, .help-launch"). Fyllningen är --glans-fyll.
                                  Alla kryssrutor och radioknappar inuti får bocken (nedan).
   <span class="glans-pil"><svg>…</svg></span>  pilen (ett barnelement, inte bara text) åker ut åt höger och kommer tillbaka från vänster vid hover
   <div data-glans-sken>          ett svagt ljus följer pekaren längs kortets kant och en svag ton på
                                  ytan (bara mus)
   <span class="glans-rund">1</span> rund markör som fylls inifrån när --glans-rund blir 1
   <span class="glans-stapel"><i></i></span>  Glans.stapel(el, andel) låter fyllningen växa från vänster
   .glans-arbetar                 ett streck sveper längs överkanten medan något räknas
   Glans.text(el, text)           texten rullar upp ur sin ruta och den nya kommer underifrån
   Glans.mellan(fran, till, fn)   tweenar en lista tal med expo-kurvan, t.ex. en karta som zoomar

   Tider ur tokens.css. Byggets egna val, märkta [OMÄTT]: skenets radie 220 px, bockens
   fördröjning 60 ms, arbetsstreckets varv 1,1 s. */

/* ── Knappsvep ─────────────────────────────────────────────────────────────── */
/* :where() ger noll specificitet: positionen gäller bara element som inte redan har en egen (fast, klistrig).
   Utan det tog skenet orderlistens position: fixed i Företagsdata (upptäckt 2026-10-14). */
:where(.glans-knapp) { position: relative; }
.glans-knapp { isolation: isolate; }
.glans-knapp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glans-fyll, var(--accent-hover, var(--yta-djup)));
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--tid-normal) var(--kurva-expo);
}
/* data-glans-sida säger var fyllningen ligger hopfälld: där pekaren kom in, eller där den gick ut. */
.glans-knapp[data-glans-sida="v"]::before { clip-path: inset(0 100% 0 0); }
.glans-knapp.glans-pa::before { clip-path: inset(0); transition-duration: var(--tid-lugn); }
.glans-knapp.glans-direkt::before { transition: none; }
.glans-knapp:disabled::before, .glans-knapp[aria-disabled="true"]::before { clip-path: inset(0 0 0 100%); }

/* Fyllningen per knapptyp, och hoverfärgen som annars skulle byta hela ytan på en gång. */
.glans-knapp.knapp--primar { --glans-fyll: var(--accent-hover, var(--yta-djup)); }
.glans-knapp.knapp--primar:hover:not(:disabled) { background-color: var(--accent); }
.glans-knapp.knapp--mork { --glans-fyll: var(--accent); }
.glans-knapp.knapp--mork:hover:not(:disabled) { background-color: var(--yta-djup); }
.glans-knapp.knapp--dampad { --glans-fyll: var(--dampad-hover, var(--yta-2)); }
.glans-knapp.knapp--dampad:hover:not(:disabled) { background-color: var(--dampad); }
.glans-knapp.knapp--spok { --glans-fyll: var(--yta-2); transition: color var(--tid-normal) var(--kurva-standard); }
.glans-knapp.knapp--spok:hover:not(:disabled) { background-color: transparent; color: var(--text); }
/* Tangentbordet får samma fyllning som musen. */
.glans-knapp:focus-visible::before { clip-path: inset(0); }

/* ── Pilen ─────────────────────────────────────────────────────────────────── */
.glans-pil { display: inline-flex; overflow: hidden; vertical-align: middle; }
.glans-pil > * { display: block; }
:is(a, button, .glans-knapp):hover > .glans-pil > *,
:is(a, button, .glans-knapp):focus-visible > .glans-pil > * { animation: glans-pil var(--tid-lugn) linear; }
@keyframes glans-pil {
  0%     { transform: none; animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  42%    { transform: translateX(130%); }
  42.01% { transform: translateX(-130%); animation-timing-function: var(--kurva-expo); }
  100%   { transform: none; }
}

/* ── Sken längs kanten ─────────────────────────────────────────────────────── */
/* Kortets yta får en svag ton runt pekaren; kanten får ljuset. Skenet sätter background-image och
   transition på kortet, så kortet ska inte ha egna sådana. */
@property --glans-sken-styrka { syntax: "<number>"; inherits: false; initial-value: 0; }
:where([data-glans-sken]) { position: relative; }
[data-glans-sken] {
  background-image: radial-gradient(520px circle at var(--sken-x, 50%) var(--sken-y, 0%),
                    color-mix(in srgb, var(--glans-sken, var(--accent)) calc(var(--glans-sken-styrka) * 5%), transparent), transparent 70%);
  transition: --glans-sken-styrka var(--tid-lugn) var(--kurva-standard);
}
[data-glans-sken].glans-sken-pa { --glans-sken-styrka: 1; }
[data-glans-sken]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(220px circle at var(--sken-x, 50%) var(--sken-y, 0%),
              color-mix(in srgb, var(--glans-sken, var(--accent)) 70%, transparent), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity var(--tid-lugn) var(--kurva-standard);
}
[data-glans-sken].glans-sken-pa::after { opacity: 1; }

/* ── Bocken ────────────────────────────────────────────────────────────────── */
:is([data-glans], .glans-bock) input:is([type="checkbox"], [type="radio"]), input.glans-bock {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; display: inline-block;
  width: 18px; height: 18px; margin: 0; border-radius: 5px; cursor: pointer; vertical-align: middle;
  border: 1.5px solid var(--glans-bock-kant, var(--yta-ton, var(--hairline))); background: var(--yta);
  transition: border-color var(--tid-normal) var(--kurva-standard);
}
:is([data-glans], .glans-bock) input[type="radio"] { border-radius: 50%; }
:is([data-glans], .glans-bock) input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) { border-color: var(--accent); }
/* Fyllningen växer ut från mitten. */
:is([data-glans], .glans-bock) input:is([type="checkbox"], [type="radio"])::before, input.glans-bock::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--accent);
  clip-path: circle(0 at 50% 50%); transition: clip-path var(--tid-normal) var(--kurva-expo);
}
:is([data-glans], .glans-bock) input:is(:checked, :indeterminate)::before, input.glans-bock:is(:checked, :indeterminate)::before {
  clip-path: circle(71% at 50% 50%); transition-duration: var(--tid-lugn);
}
:is([data-glans], .glans-bock) input:is(:checked, :indeterminate), input.glans-bock:is(:checked, :indeterminate) { border-color: var(--accent); }
/* Bocken ritas från vänster till höger, strax efter fyllningen. Radion får en prick. */
:is([data-glans], .glans-bock) input:is([type="checkbox"], [type="radio"])::after, input.glans-bock::after {
  content: ""; position: absolute; inset: 1.5px; background: var(--pa-accent, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.6 9.6 3.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.9 8.6 9.6 3.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path var(--tid-kvick) var(--kurva-standard);
}
:is([data-glans], .glans-bock) input[type="checkbox"]:indeterminate::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is([data-glans], .glans-bock) input[type="radio"]::after { inset: 5px; border-radius: 50%; -webkit-mask: none; mask: none; }
:is([data-glans], .glans-bock) input:is(:checked, :indeterminate)::after, input.glans-bock:is(:checked, :indeterminate)::after {
  clip-path: inset(0); transition: clip-path var(--tid-normal) var(--kurva-expo) 60ms;
}
:is([data-glans], .glans-bock) input:is([type="checkbox"], [type="radio"]):disabled { opacity: .45; cursor: not-allowed; }

/* ── Rund markör som fylls ─────────────────────────────────────────────────── */
.glans-rund { position: relative; isolation: isolate; }
.glans-rund::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: var(--glans-rund-fyll, var(--accent));
  clip-path: circle(calc(var(--glans-rund, 0) * 50%) at 50% 50%); transition: clip-path var(--tid-lugn) var(--kurva-expo);
}

/* ── Stapel ────────────────────────────────────────────────────────────────── */
.glans-stapel { display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--glans-spar, var(--yta-2)); }
.glans-stapel > i { display: block; height: 100%; border-radius: inherit; background: var(--glans-stapelfarg, var(--accent));
  transform: scaleX(var(--andel, 0)); transform-origin: 0 50%; transition: transform var(--tid-lugn) var(--kurva-expo); }

/* ── Arbetsstreck ──────────────────────────────────────────────────────────── */
/* Visas först efter --tid-kvick, så att ett snabbt svar inte blinkar. */
:where(.glans-arbetar) { position: relative; }
.glans-arbetar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent) no-repeat; background-size: 45% 100%;
  opacity: 0; animation: glans-arbetar-syns 1ms var(--tid-kvick) forwards, glans-arbetar 1.1s var(--kurva-standard) infinite;
}
@keyframes glans-arbetar-syns { to { opacity: 1; } }
@keyframes glans-arbetar { from { background-position: -80% 0; } to { background-position: 180% 0; } }

/* ── Rullande text ─────────────────────────────────────────────────────────── */
/* Spanen som Glans.text lägger runt texten; masken sitter i själva animationen. */
.glans-rull { display: block; overflow: hidden; text-overflow: ellipsis; white-space: inherit; }

@media (prefers-reduced-motion: reduce) {
  .glans-knapp::before, [data-glans-sken], [data-glans-sken]::after, .glans-rund::before, .glans-stapel > i,
  :is([data-glans], .glans-bock) input::before, :is([data-glans], .glans-bock) input::after, input.glans-bock::before, input.glans-bock::after {
    transition: none !important; }
  .glans-pil > *, .glans-arbetar::before { animation: none !important; }
  .glans-arbetar::before { opacity: 1; background-size: 100% 100%; background-position: 0 0; }
}