/* Verktygskatalogen — layout och karusell.
   Designtokens ligger i tokens.css. Här finns bara det som är särskilt
   för den här vyn. */

:root {
  /* Sidans yta. Prototypen ligger ljusare än profilens --yttre (#F4F6FB);
     den skillnaden är avsiktlig och gäller den här vyn. */
  --katalog-yta: #F5F6FE;

  /* Bredd på innehållsspalten och dess sidopadding. */
  --spalt: 78rem;
  --spalt-padding: 44px;

  /* Menyraden har egen sidopadding, eftersom knappen ska stå närmare
     kanten än innehållet. Den krymper inte med spalten. */
  --meny-padding: 32px;
  --meny-padding-topp: 17px;
  --meny-knapp: 44px;

  --anslag-padding-y: 26px;

  /* Mittlinjen som ordmärket och hamburgarknappen delar, räknad från
     sidans överkant. Knappen sitter i ett fast lager med egen padding,
     ordmärket i anslaget som scrollar bort — de kan alltså inte vara
     syskon i samma rad, och måste i stället peka på samma tal. */
  --toppmitt: calc(var(--meny-padding-topp) + var(--meny-knapp) / 2);

  /* Karusellen: hur många pixlars scroll ett kort kostar, och hur brett
     korten sprids i sidled. --spridning skalas ned på smala skärmar. */
  --steg-scroll: 420px;
  --steg-x: 138px;
  --spridning: 0.9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Högen sticker ut i sidled utanför spalten och ska klippas mot
   fönsterkanten, inte ge en horisontell scrollbar.
   Klippningen sitter på en egen behållare, inte på html eller body:
   rotelementets overflow ärvs upp till fönstret, och `clip` där fryser
   den vertikala scrollen — vilket är hela sidans drivning.
   `clip` och inte `hidden` eftersom hidden skulle göra behållaren till
   en scrollbehållare och flytta panelens position:sticky till den. */
.sida { overflow-x: clip; }

body {
  margin: 0;
  background: var(--katalog-yta);
  color: var(--black);
  font-family: var(--typsnitt);
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bla); }
a:hover { color: var(--bla-mork); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bla);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--katalog-yta); }
::-webkit-scrollbar-thumb { background: #D7DCE9; border-radius: 5px; }

/* ================================================================
   Anslag
   ================================================================ */

.anslag {
  padding: var(--anslag-padding-y) 0;
}

.spalt {
  max-width: var(--spalt);
  margin: 0 auto;
  padding: 0 var(--spalt-padding);
}

.anslag .spalt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.anslag__toppa {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  /* Lämnar plats åt hamburgarknappen, som ligger fast ovanpå med egen
     sidopadding. Reserven är knappens bredd plus skillnaden mellan
     menyns och spaltens padding, plus lite luft — annars glider
     ordmärket in under knappen när spalten krymper på smal skärm. */
  padding-right: max(
    var(--meny-knapp),
    calc(var(--meny-knapp) + var(--meny-padding) - var(--spalt-padding) + 8px)
  );

  /* Raden är dubbelt så hög som avståndet från anslagets överkant ned
     till den delade mittlinjen. Ett centrerat ordmärke hamnar då exakt
     på knappens mittlinje, oavsett hur högt märket självt är.
     Paketets .clara-logga-rad duger inte här: den centrerar mot en
     granne i samma rad, och knappen ligger i ett eget fast lager. */
  min-height: calc((var(--toppmitt) - var(--anslag-padding-y)) * 2);
}

/* Ordmärkets egen storlek bor i logga/clara-logga.css, som är delad med
   de andra verktygen. Ändra den där, inte här. */

.anslag__rubrik {
  margin: 0;
  max-width: 20em;
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: pretty;
}

.anslag__ingress {
  margin: 0;
  /* rem, inte em. I em följer radlängden textens egen storlek, så när
     ingressen gick från 20 till 14 px krympte spalten från 680 till
     476 px — texten blev mindre men bröts tidigare. I rem står måttet
     still: meningen ryms på en rad, och längre text bryts vid en
     läsbar radlängd i stället för vid en godtycklig. */
  max-width: 34rem;
  /* Vikt 400, inte handoffens 200. Handoffen räknar med Geist som
     brödtypsnitt, men profilen säger Helvetica Neue genom hela
     produkten — och vikt 200 i Helvetica Neue är UltraLight, en mycket
     tunnare skärning än Geist Light. Den läste som ett annat typsnitt
     än brödtexten under korten. Samma vikt, samma intryck.
     Storleken är 14, inte handoffens 20 — ingressen tog för mycket
     plats bredvid rubriken. */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ================================================================
   Karusell
   ================================================================ */

/* Scroll-längden. Höjden sätts av skriptet efter antalet kort:
   100svh + (antal - 1) * --steg-scroll. */
.karusell {
  position: relative;
  max-width: var(--spalt);
  margin: 0 auto;
}

/* Panelen står stilla medan spåret ovanför scrollas förbi. */
.karusell__panel {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 8px var(--spalt-padding) 14px;
}

/* ---- Mätare: var i listan vi står, ovanför korten -------------- */

.matare {
  position: relative;
  z-index: 300;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.spar {
  width: 100%;
  height: 1px;
  background: var(--linje-harfin);
  position: relative;
}

.spar__fylld {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: 0;
  background: var(--bla);
}

.raknare {
  font-family: var(--typsnitt-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--black);
}

/* ---- Fot: det framme kortets text, knapp och bläddring --------- */

.fot {
  position: relative;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  text-align: center;
}

.oppna {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--h-primar);
  padding: 0 24px;
  background: var(--bla);
  color: #FFFFFF;
  border-radius: var(--r-knapp);
  white-space: nowrap;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.oppna:hover { background: var(--bla-mork); color: #FFFFFF; }

/* Verktyget har ingen adress ännu. Knappen behåller sin plats i
   layouten men slutar se klickbar ut — blått betyder klickbart, och
   här finns inget att klicka på. */
.oppna--av,
.oppna--av:hover {
  background: var(--linje-harfin);
  color: var(--etikett);
  cursor: default;
}

.fot__knappar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.stegknapp {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-smayta);
  flex-shrink: 0;
}

.stegknapp:hover { background: var(--bla-yta-hover); color: var(--bla-mork); }

/* Vid listans ändar finns inget nästa kort att gå till. */
.stegknapp[disabled] {
  color: var(--etikett);
  cursor: default;
  opacity: 0.4;
}

.stegknapp[disabled]:hover { background: transparent; color: var(--etikett); }

/* ---- Kortytan --------------------------------------------------- */

.yta {
  position: relative;
  flex-grow: 1;
  z-index: 1;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  /* Webbläsaren behåller den lodräta scrollen; den vågräta rörelsen tar
     skriptet hand om och gör om till bläddring. Se "Svep i sidled" i
     katalog.js. */
  touch-action: pan-y;
}

/* Ramen bär kortets plats i rummet. Skriptet sätter width, height,
   margin, transform, opacity, z-index och filter som inline-stil. */
.ram {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.kort {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--kort);
  box-shadow:
    0 2px 2px rgba(20, 18, 14, 0.06),
    0 14px 22px -16px rgba(20, 18, 14, 0.30);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ram:hover .kort {
  box-shadow:
    0 3px 3px rgba(20, 18, 14, 0.08),
    0 26px 34px -18px rgba(20, 18, 14, 0.36);
}

/* Färgytan. --kort-bg sätts per kort av skriptet. */
.kort__yta {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--kort-bg);
  padding: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Hårfin ljuskant som skiljer kort från kort när de ligger omlott. */
.kort__kant {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  z-index: 1;
}

.kort__nummer {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  font-family: var(--typsnitt-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--black);
}

/* Namnet sitter fast i övre vänstra hörnet och skalar med kortets höjd
   (--namn-storlek sätts av skriptet). */
.kort__namn {
  position: absolute;
  left: 30px;
  top: 30px;
  right: 30px;
  z-index: 2;
  font-size: var(--namn-storlek);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--black);
  /* Flerordiga namn bryts över flera rader i stället för att krympa
     till oläslighet. Storleken sätts av katalog.js efter det längsta
     ordet, så raden kan aldrig bli bredare än kortet. */
  overflow-wrap: break-word;
}

.kort__fot {
  position: relative;
  z-index: 2;
}

.kort__undertitel {
  font-family: var(--typsnitt-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
}

/* Raden skrivs som den står. För namn där versalgemenerna bär betydelse:
   iRAT och tAPP är namn, IRAT och TAPP är något annat. Sätts med
   versaler: false i data/verktyg.js. */
.kort__undertitel--orord { text-transform: none; }

/* ---- Sistakortet: idéer ----------------------------------------- */

.kort__streck {
  position: absolute;
  inset: 12px;
  border: 1.5px dashed rgba(20, 18, 14, 0.38);
  border-radius: 8px;
  z-index: 1;
}

.kort__kontakt {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--black);
  overflow-wrap: anywhere;
}

/* Hela kortet är klickbart. Länken ligger överst och bär kortets
   tillgängliga namn. */
/* Är ibland en <a>, ibland en <button> — se katalog.js. Nollställningen
   nedan gäller knappfallet. */
.kort__lank {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 3;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  appearance: none;
}

/* ================================================================
   Smala skärmar
   ================================================================ */

@media (max-width: 900px) {
  :root {
    --spalt-padding: 24px;
    --spridning: 0.65;
  }

}

@media (max-width: 560px) {
  :root {
    --spalt-padding: 20px;
    --spridning: 0.45;
  }

  .karusell__panel { padding: 8px var(--spalt-padding) 20px; }
}

/* ================================================================
   Mindre rörelse
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Endast för skärmläsare. */
.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   Meny med sök
   ================================================================ */

/* Menyn står still medan sidan scrollas. Wrappern är genomsläpplig för
   klick så att den inte lägger sig som ett lock över sidan; bara knappen
   och panelen tar emot. */
.meny {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 950;
  pointer-events: none;
}

.meny__rad {
  position: relative;
  max-width: var(--spalt);
  margin: 0 auto;
  padding: var(--meny-padding-topp) var(--meny-padding) 0;
  display: flex;
  justify-content: flex-end;
}

.meny__knapp {
  pointer-events: auto;
  width: var(--meny-knapp);
  height: var(--meny-knapp);
  border: 0;
  border-radius: var(--r-rund);
  background: transparent;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meny__knapp:hover { background: #E9ECF8; }

/* Ligger över hela sidan under panelen och fångar klick utanför. */
.meny__bakgrund {
  position: fixed;
  inset: 0;
  z-index: 940;
}

.panel {
  pointer-events: auto;
  position: absolute;
  right: var(--meny-padding);
  top: 67px;
  width: 320px;
  max-width: calc(100vw - 2 * var(--meny-padding));
  padding: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(20, 18, 26, 0.06),
    0 22px 40px -18px rgba(20, 18, 26, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel[hidden],
.meny__bakgrund[hidden],
.traffar[hidden] { display: none; }

.sok {
  position: relative;
  display: flex;
  align-items: center;
}

.sok__ikon {
  position: absolute;
  left: 14px;
  color: var(--etikett);
  pointer-events: none;
}

.sok__falt {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid #DCDFEA;
  border-radius: var(--r-rund);
  background: var(--katalog-yta);
  font-family: inherit;
  font-size: 15px;
  color: var(--black);
}

.sok__falt:focus-visible {
  outline: 2px solid var(--bla);
  outline-offset: 1px;
}

/* Träfflistan kan bli lång när katalogen växer. */
.traffar {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}

.traff {
  width: 100%;
  display: block;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--typsnitt);
  font-size: 16px;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traff:hover { background: #F0F2FB; color: var(--bla); }

.traffar__tomt {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--loptext);
}

.panel__linje {
  height: 1px;
  background: #EDEEF3;
  margin: 6px 2px;
}

.panel__lank {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--black);
  text-decoration: none;
}

.panel__lank:hover { background: #F0F2FB; color: var(--bla); }