/* ═══════════════════════════════════════════════════════════════════════════
   FUNKTIONSVÄLJAREN — formatmallen

   Raden med numrerade flikar över en skärm ur systemet. Sajtens eget språk och
   inte produktens: flikarna hör till hemsidan och står utanför fönstret, så de
   ska läsa som resten av sektionerna och inte som en kontroll inne i systemet.

   MÄSSINGEN BÄR SIFFRAN, aldrig en yta och aldrig en knapps bakgrund. Samma
   regel som i resten av sajten.
   ═══════════════════════════════════════════════════════════════════════ */

.fnk{position:relative}

/* Raden skrollar i sidled på telefon i stället för att radbrytas. Två flikar
   ryms, men listan ska tåla en femte utan att layouten byter form. */
.fnk-rad{display:flex;gap:.45rem;list-style:none;margin:0 0 .8rem;padding:0 0 .2rem;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.fnk-rad::-webkit-scrollbar{display:none}
.fnk-rad li{flex:none;scroll-snap-align:start}

.fnk-k{display:flex;align-items:center;gap:.55rem;
  padding:.5rem .8rem;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font:inherit;font-size:.83rem;line-height:1.2;text-align:left;white-space:nowrap;
  transition:color .18s var(--ease-solutra,ease),
             border-color .18s var(--ease-solutra,ease),
             transform .18s var(--ease-solutra,ease)}
.fnk-k:hover{color:var(--text);border-color:rgba(92,141,255,.4)}
.fnk-k:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
.fnk-k--pa{color:var(--text);border-color:rgba(92,141,255,.5);
  box-shadow:0 10px 24px -20px rgba(10,24,84,.7)}

/* MÖRKARE ÄN --massing MED FLIT. Siffran är 9,6 px och fet, alltså inte "stor
   text", och då gäller 4,5:1. var(--massing) på den ljusa mässingstonen låg
   precis på gränsen och föll i kontrollen. #755c2e är samma familj och ligger
   på drygt 6:1 mot kortets vita botten. Ändra inte tillbaka utan att mäta. */
.fnk-nr{display:grid;place-items:center;flex:none;
  width:24px;height:24px;border-radius:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.04em;color:#755c2e;
  background:rgba(194,164,105,.14);border:1px solid rgba(194,164,105,.34)}
.fnk-k--pa .fnk-nr{color:#fff;background:#0d1b46;border-color:#0d1b46}
.fnk-t{font-weight:600}

/* INGEN HÖJDRESERV HÄR, och det är ett val. Varje demo bär sin egen min-height
   i sin egen fil, så panelen som står framme vid laddning är redan reserverad
   och sidan förskjuter sig inte. Att dessutom reservera ytan för den HÖGSTA av
   panelerna hade gett tvärtom effekt: objektskärmen är 1796 px på en telefon
   och bildskärmen 848, alltså nästan tusen pixlar tomt under bilddemot varje
   gång någon bytte till det. Ytan följer den panel som står framme, och höjden
   ändras bara direkt efter ett tryck, vilket inte räknas som förskjutning. */
.fnk-yta{position:relative}
.fnk-p{display:block}
/* Ingressen står INNE i panelen och inte i sektionshuvudet. Varje funktion har
   sin egen mening, och en gemensam ingress hade tvingats beskriva båda och
   därmed ingen. */
.fnk-lead{margin:0 0 .7rem;max-width:74ch;color:var(--muted);
  font-size:.88rem;line-height:1.7}

.fnk-fot{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:.75rem}
.fnk-av{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;
  font-weight:600;letter-spacing:.08em;color:var(--faint)}

.fnk-nasta{display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text);
  font:inherit;font-size:.8rem;font-weight:600;
  transition:border-color .18s var(--ease-solutra,ease),
             transform .18s var(--ease-solutra,ease)}
.fnk-nasta:hover{border-color:rgba(92,141,255,.5)}
.fnk-nasta:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
.fnk-nasta svg{width:15px;height:15px;flex:none}

@media(prefers-reduced-motion:reduce){
  .fnk-k,.fnk-nasta{transition:none}
}