/* DriveBase prototyp: reset, typografi och skalen.
   Portalen och adminen delar ramen: toppfältet (.skal-topp) och sidfoten (.skal-fot). Adminen har sin rubrikrad
   (.skal-admin) under toppfältet. Färger bara ur tokens.css. */

/* ================= Reset ================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-bas);
  font-weight: var(--vikt-normal);
  line-height: var(--radavstand);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Resetreglerna står i :where(), som har specificiteten 0. Då vinner varje komponent- och vyklass över dem,
   till exempel .kort på en <ol class="kort"> (yp-c I1). */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(svg) { flex: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; }
:where(table) { border-collapse: collapse; }
:where(code, kbd, samp) { font-family: var(--font-mono); font-size: .875em; }
:where(hr) { border: 0; border-top: 1.5px solid var(--linje); margin: var(--s-6) 0; }
[hidden] { display: none !important; }

/* ================= Typografi ================= */
h1, h2, h3, h4 {
  font-family: var(--font-rubrik);
  font-weight: var(--vikt-fet);
  line-height: var(--radavstand-rubrik);
  letter-spacing: var(--spacing-rubrik-liten);
  text-wrap: balance;
}
h1 {
  font-weight: var(--vikt-rubrik);
  font-size: var(--fs-4xl);
  line-height: var(--radavstand-tat);
  letter-spacing: var(--spacing-rubrik);
}
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-l); }
p { text-wrap: pretty; }
b, strong { font-weight: var(--vikt-fet); }
small { font-size: var(--fs-s); }

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover { text-decoration-thickness: 3px; }

::selection { background: var(--accent-2-ljus); color: var(--text); }

/* ================= Fokus ================= */
:focus-visible {
  outline: var(--fokus-bredd) solid var(--fokus);
  outline-offset: var(--fokus-avstand);
}
/* Rubriker och behållare som får fokus av routern visar ingen ram */
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }

/* Mörka ytor: vit fokusram och ljus dämpad text */
.pa-mork {
  --fokus: var(--fokus-pa-mork);
  --text-dampad: var(--text-dampad-pa-mork);
  color: var(--text-pa-mork);
}

/* ================= Hjälpklasser ================= */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tal { font-variant-numeric: tabular-nums; }
.dampad { color: var(--text-dampad); }
.mono { font-family: var(--font-mono); font-size: .9375em; }

.ikon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* Hoppa till innehållet, syns bara vid fokus */
.hoppa {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-hoppa);
  min-height: var(--klickyta);
  padding: var(--s-2) var(--s-4);
  border: 2px solid var(--primar);
  border-radius: var(--r-m);
  background: var(--yta);
  color: var(--primar);
  font-weight: var(--vikt-fet);
  translate: 0 -200%;
  transition: translate var(--t-snabb) var(--kurva);
}
.hoppa:focus-visible { translate: 0 0; outline-color: var(--primar); }

/* Ingen scroll i bakgrunden medan menylådan eller en dialog är öppen */
/* Spärren sitter på html ensamt. Får body också overflow: hidden blir body en egen scrollbehållare,
   och då klistrar mobilens toppfält mot body i stället för mot fönstret och följer med ut ur bilden
   på en scrollad sida (yp-b I1). På html står scrollpositionen kvar och toppfältet ligger still. */
html.skal-last { overflow: hidden; }

/* ================= Ordmärket ================= */
/* Gnistans märke: DB.ikon.marke(S) och DB.ikon.ordmarke(S / 1.55) i ikoner.js. Storleken kommer från
   SVG-attributen, så ingen regel här sätter width eller height på märket. Symbol och ord fylls med
   currentColor (navy på ljust, vit i .ordmarke--ljus) och gnistan med --gnista på båda bottnarna.
   Ordmärkets viewBox har versalernas mittlinje i mitten, så align-items: center räcker för centreringen. */
.ordmarke {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickyta);
  color: var(--primar);
  text-decoration: none;
  white-space: nowrap;
}
.ordmarke:hover { text-decoration: none; }
.ordmarke__marke { flex: none; fill: currentColor; }
.ordmarke__ord-svg { flex: none; }
.ordmarke__ord { fill: currentColor; }
.ordmarke__gnista { fill: var(--gnista); }
/* Luften 0,42 versalhöjder mellan symbol och ord. --versal sätts på ordmärkets svg av DB.ikon.ordmarke */
.ordmarke__marke + .ordmarke__ord-svg { margin-inline-start: calc(var(--versal) * .42); }
.ordmarke--ljus { color: var(--text-pa-mork); }

/* ================= Innehållsbehållaren (main) ================= */
/* Varje <main> är containern "innehall", så att komponenter kan följa innehållsytans bredd
   med @container innehall (...) i stället för skärmens. .tabell blir kort så under 760 px. */
.skal-innehall {
  display: block;
  min-width: 0;
  container: innehall / inline-size;
}
.skal-innehall--fri { min-height: 100vh; }

/* ================= Portalens skal ================= */
/* I entréns språk (beslut 0005): marinblå sida, entréns sidhuvud med det vita liggande märket och entréns sidfot
   med Drive Managements ordmärke. Färgschemat och bakgrunden står på html[data-vy="portal"], som entréns på
   html[data-vy="inloggning"], och släpper när routern byter vy. */
html[data-vy="portal"], html[data-vy="portal"] body { background: var(--yta-mork); color-scheme: dark; }
.skal--portal, .skal--admin {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--yta-mork);
  color: var(--text-pa-mork);
  --fokus: var(--fokus-pa-mork);
}
.skal-topp { position: relative; z-index: var(--z-sticky); height: 72px; }
.skal-topp__inre {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: 1560px;
  height: 100%;
  margin: 0 auto;
  padding: 0 5%;
}
.skal-topp__marke { display: flex; align-items: center; min-height: var(--klickyta); flex: none; }
.skal-topp__marke img { display: block; width: 188px; height: auto; }
.skal-topp__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--r-s);
  background: var(--hover-ljus);
  color: var(--text-pa-mork);
  font-size: var(--fs-xs);
  font-weight: var(--vikt-fet);
  white-space: nowrap;
  flex: none;
}
.skal-topp__hoger {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
  margin-left: auto;
}
/* Flikarna Hem, Konto och Admin: en rundad kontur på marinblått med en vit markör under den aktiva fliken.
   Utan rorelse.js har den aktiva fliken själv den vita ytan. Med markören (.har-markor) glider ytan i stället. */
.skal-flikar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
  padding: 3px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-rund);
}
.skal-flikar__punkt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: var(--klickyta);
  padding: 0 var(--s-5);
  border-radius: var(--r-rund);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  text-decoration: none;
  transition: color var(--t-normal) var(--kurva), background-color var(--t-normal) var(--kurva);
}
.skal-flikar__punkt:hover { color: var(--text-pa-mork); text-decoration: none; }
.skal-flikar__punkt[aria-current] { background: var(--pal-vit); color: var(--pal-navy); }
.skal-flikar.har-markor .skal-flikar__punkt[aria-current] { background: transparent; }
.skal-flikar__punkt:focus-visible { outline-offset: 2px; }
.skal-flikar__markor {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--markor-w, 0);
  translate: var(--markor-x, 0) 0;
  border-radius: var(--r-rund);
  background: var(--pal-vit);
  pointer-events: none;
  transition: translate var(--t-glid) var(--kurva-fjader), width var(--t-glid) var(--kurva-fjader);
}
/* rorelse.js ställer markören på förra platsen utan övergång innan den glider */
.is-utan-overgang { transition: none !important; }
/* Innehållet: entréns bredd, 1344 px, med sidans marginal. Felläget och skelettet i start.js använder samma
   behållare utan skalet runt. */
.skal-innehall--portal {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(1344px + 2 * var(--marginal));
  margin: 0 auto;
  padding: 0 var(--marginal);
}
/* Felläget och skelettet före routern står utan skalet och får sidans luft upptill */
.skal-innehall--portal:is(.start-fel, [aria-busy="true"]) { padding-top: var(--s-8); }
.skal-fot {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  width: min(100% - 2 * max(20px, var(--marginal)), 1344px);
  margin: var(--s-24) auto 0;
  padding: var(--s-8) 0 var(--s-10);
  border-top: 1px solid var(--linje-pa-mork);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
}
.skal-fot__avsandare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.skal-fot__ordmarke { display: block; flex: none; width: 140px; height: auto; }

/* Användarmenyn i portalens toppfält: en kontur på marinblått, som entréns sekundära kontroller. Menyn är en ljus ö. */
.skal-anvandare { position: relative; }
.skal-anvandare__knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--knapp-hojd);
  padding: 4px 16px 4px 4px;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-rund);
  background: transparent;
  color: var(--text-pa-mork);
  font-weight: var(--vikt-fet);
  line-height: 1.2;
  transition: background-color var(--t-snabb) var(--kurva), border-color var(--t-snabb) var(--kurva);
}
.skal-anvandare__knapp:hover { background: var(--hover-ljus); border-color: var(--hover-ljus-2); }
.skal-anvandare__knapp[aria-expanded="true"] { background: var(--hover-ljus); }
.skal-anvandare__knapp .avatar { width: 36px; height: 36px; border-radius: var(--r-rund); background: var(--yta); color: var(--primar); font-size: var(--fs-2xs); }
.skal-anvandare__pil {
  width: 8px; height: 8px;
  margin: 0 2px 3px 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--t-snabb) var(--kurva);
}
.skal-anvandare__knapp[aria-expanded="true"] .skal-anvandare__pil { rotate: 225deg; margin-bottom: -3px; }
.skal-anvandare__meny {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: var(--z-popup);
  width: max-content;
  min-width: 260px;
  max-width: calc(100vw - 2 * var(--marginal));
  padding: var(--s-2);
  border-radius: 20px;
  background: var(--yta);
  color: var(--text);
  box-shadow: 0 30px 90px var(--pal-navy-a55);
  color-scheme: light;
  --fokus: var(--pal-navy);
}
.skal-anvandare__huvud {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-bottom: var(--s-1);
  border-bottom: 1.5px solid var(--linje);
}
.skal-anvandare__namn { font-weight: var(--vikt-fet); }
.skal-anvandare__epost { color: var(--text-dampad); font-size: var(--fs-s); overflow-wrap: anywhere; }
.skal-anvandare__punkt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--klickyta);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-weight: var(--vikt-mellan);
  text-align: left;
  text-decoration: none;
}
.skal-anvandare__punkt:hover { background: var(--hover-mork); text-decoration: none; }
.skal-anvandare__punkt:focus-visible { outline-offset: 0; }

/* ================= Adminskalet ================= */
/* Portalens ram (beslut 0008): samma marinblå sida, toppfält och sidfot som portalen, med Admin aktiv. Under
   toppfältet står adminens rubrikrad med flikarna och knapparna, och innehållet står direkt på marinblått i portalens
   bredd, 1120 px. Bakgrunden står på html[data-ram="admin"] och släpper när routern byter ram. Färgschemat är mörkt
   som i portalen, och de vita panelerna och dialogerna sätter sitt eget ljusa. */
html[data-ram="admin"], html[data-ram="admin"] body { background: var(--yta-mork); color-scheme: dark; }
/* Toasten är ljus mot marinblått i alla adminvyer, dialogerna och spärrläget, som i portalen */
html[data-ram="admin"] .toaster .toast { background: var(--yta); color: var(--text); box-shadow: 0 18px 48px var(--pal-navy-a55); }
html[data-ram="admin"] .toast__ikon { background: var(--yta-mjuk); color: var(--text); }
html[data-ram="admin"] .toast--ok .toast__ikon { background: var(--ok); color: var(--accent-2-text); }
html[data-ram="admin"] .toast--fel .toast__ikon { background: var(--fel); color: var(--accent-text); }
.skal--admin { --admin-bredd: 1120px; }

/* Rubrikraden: flikarna Översikt, Personer och Logg till vänster och knapparna Utskick och Inställningar till höger.
   Flikarna har samlingens form (portal.css, .portal-flikar) på marinblått: en tunn ljus kontur och den aktiva fliken
   vit. Knapparna är konturknappar som Sök i toppfältet. */
.skal-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  width: min(100% - 2 * var(--marginal), var(--admin-bredd));
  margin: var(--s-8) auto 0;
}
.skal-admin__flikar {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-m);
}
.skal-admin__flik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border-radius: 10px;
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  text-decoration: none;
  transition: color var(--t-snabb) var(--kurva), background-color var(--t-snabb) var(--kurva);
}
.skal-admin__flik:hover { background: var(--hover-ljus); color: var(--text-pa-mork); text-decoration: none; }
/* Aktiv flik: sidan (aria-current="page") och avdelningen för vyerna under fliken (aria-current="true") */
.skal-admin__flik[aria-current] { background: var(--pal-vit); color: var(--pal-navy); }
.skal-admin__flik:focus-visible { outline-offset: 2px; }
.skal-admin__knappar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.skal-admin__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--klickyta);
  padding: 0 var(--s-4);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-m);
  color: var(--text-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-snabb) var(--kurva);
}
.skal-admin__knapp:hover { background: var(--hover-ljus); text-decoration: none; }
.skal-admin__knapp .ikon { width: 18px; height: 18px; }
/* Under 560 px står flikarna och knapparna på var sin rad i hela bredden */
@media (max-width: 559.98px) {
  .skal-admin__flikar, .skal-admin__knappar { display: flex; flex: 1 0 100%; }
  .skal-admin__flik, .skal-admin__knapp { flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); }
}

/* Innehållet direkt på marinblått, i rubrikradens bredd */
.skal-innehall--admin {
  flex: 1 0 auto;
  width: min(100% - 2 * var(--marginal), var(--admin-bredd));
  margin: var(--s-10) auto 0;
}

/* Adminrutt för en inloggad utan adminroll. Direkt på marinblått i portalens rubrikmått: rubriken och vägen tillbaka
   som en konturruta, och listan över admins i en vit panel som i översikten. */
.skal-ingen-behorighet {
  display: grid;
  gap: var(--s-8);
  min-width: 0;
  color: var(--text-pa-mork);
}
.skal-ingen-behorighet__overrad {
  color: var(--text-dampad-pa-mork);
  font-weight: var(--vikt-mellan);
  font-size: var(--fs-m);
}
.skal-ingen-behorighet__rubrik {
  margin-top: var(--s-2);
  font-family: var(--font-rubrik);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  font-weight: var(--vikt-rubrik);
  line-height: 1.08;
  letter-spacing: .004em;
  color: var(--text-pa-mork);
}
.skal-ingen-behorighet__ingress {
  max-width: 62ch;
  margin-top: var(--s-2);
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-l);
  line-height: 1.45;
}
.skal-ingen-behorighet__rutnat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
.skal-ingen-behorighet__platta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  justify-content: flex-end;
  min-height: 240px;
  padding: var(--s-6);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-l);
}
.skal-ingen-behorighet__las {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: auto;
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: 50%;
}
.skal-ingen-behorighet__platta-rubrik {
  font-family: var(--font-rubrik);
  font-weight: var(--vikt-rubrik);
  font-size: var(--fs-xl);
  line-height: 1.15;
}
.skal-ingen-behorighet__tillbaka { align-self: flex-start; margin-top: var(--s-2); }
.skal-ingen-behorighet__kort {
  --text: var(--pal-navy);
  --text-dampad: var(--pal-dampad);
  --fokus: var(--pal-navy);
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-l);
  background: var(--yta);
  color: var(--text);
  color-scheme: light;
}
.skal-ingen-behorighet__hjalp { color: var(--text-dampad); }
.skal-ingen-behorighet__admins { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.skal-ingen-behorighet__admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--linje);
}
.skal-ingen-behorighet__person { display: grid; flex: 1 1 12rem; min-width: 0; }
.skal-ingen-behorighet__namn { font-weight: var(--vikt-fet); }
.skal-ingen-behorighet__epost { color: var(--text-dampad); font-size: var(--fs-s); overflow-wrap: anywhere; }
@container innehall (max-width: 759.98px) {
  .skal-ingen-behorighet__rutnat { grid-template-columns: minmax(0, 1fr); }
  .skal-ingen-behorighet__platta { min-height: 0; }
  .skal-ingen-behorighet__las { margin-bottom: var(--s-2); }
}

/* ================= Smala skärmar ================= */
@media (max-width: 859.98px) {
  .skal-topp { height: auto; }
  .skal-topp__inre { flex-wrap: wrap; row-gap: var(--s-2); padding-top: var(--s-3); padding-bottom: var(--s-2); }
  .skal-flikar { order: 3; flex: 1 0 100%; margin: 0; }
  .skal-flikar__punkt { flex: 1 1 0; min-width: 0; padding: 0 var(--s-2); }
}
@media (max-width: 699.98px) {
  .skal-topp__inre { gap: var(--s-3); padding-left: var(--marginal); padding-right: var(--marginal); }
  .skal-topp__marke img { width: 150px; }
  .skal-anvandare__knapptext { display: none; }
  .skal-anvandare__knapp { padding-right: 12px; }
  .skal-fot { flex-direction: column; align-items: flex-start; margin-top: var(--s-16); }
}

/* ================= Rörelse ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ================= Sök ================= */
/* Knappen i portalens toppfält: en rundad kontur på marinblått med kortkommandot */
.skal-sok {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--knapp-hojd);
  padding: 0 var(--s-3) 0 var(--s-4);
  border: 1.5px solid var(--linje-pa-mork);
  border-radius: var(--r-rund);
  background: transparent;
  color: var(--text-dampad-pa-mork);
  font-size: var(--fs-s);
  font-weight: var(--vikt-fet);
  transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.skal-sok:hover { background: var(--hover-ljus); color: var(--text-pa-mork); }
.skal-sok__tangent {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--hover-ljus);
  color: var(--text-pa-mork);
  font-family: var(--font-text);
  font-size: var(--fs-2xs);
  font-weight: var(--vikt-fet);
}
@media (max-width: 699.98px) {
  .skal-sok { padding: 0; width: var(--knapp-hojd); justify-content: center; }
  .skal-sok__text, .skal-sok__tangent { display: none; }
}

/* Snabbsökningen (snabbsok.js): en vit, rundad ruta högt upp på en skymd sida */
.snabbsok {
  width: min(640px, calc(100% - 32px));
  max-width: none;
  max-height: none;
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
  color-scheme: light;
  --fokus: var(--pal-navy);
}
.snabbsok::backdrop { background: var(--skym); backdrop-filter: blur(3px); }
.snabbsok__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(76vh - 24px);
  border-radius: 28px;
  background: var(--yta);
  box-shadow: 0 30px 90px var(--pal-navy-a55);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-rorelse="lugn"]) .snabbsok[open] .snabbsok__panel { animation: snabbsok-in 200ms var(--kurva) backwards; }
}
@keyframes snabbsok-in { from { opacity: 0; filter: blur(6px); } }
.snabbsok__falt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  border-bottom: 1.5px solid var(--linje);
  color: var(--text-dampad);
}
.snabbsok__inmatning {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
  border: 0;
  background: transparent;
  color: var(--pal-navy);
  font-size: var(--fs-l);
  outline: none;
}
.snabbsok__inmatning::placeholder { color: var(--text-dampad); }
.snabbsok__tangent, .snabbsok__fot kbd {
  padding: 2px 8px;
  border: 1.5px solid var(--linje);
  border-radius: var(--r-xs);
  color: var(--text-dampad);
  font-family: var(--font-text);
  font-size: var(--fs-2xs);
  font-weight: var(--vikt-fet);
}
.snabbsok__lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.snabbsok__rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  border-radius: 16px;
  cursor: pointer;
}
.snabbsok__rad[aria-selected="true"] { background: var(--yta-mjuk); }
.snabbsok__ikon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yta-mjuk);
  color: var(--pal-navy);
}
.snabbsok__rad[aria-selected="true"] .snabbsok__ikon { background: var(--pal-navy); color: var(--pal-vit); }
.snabbsok__text { display: grid; min-width: 0; }
.snabbsok__titel { color: var(--pal-navy); font-weight: var(--vikt-fet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snabbsok__under { color: var(--text-dampad); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snabbsok__grupp { color: var(--text-dampad); font-size: var(--fs-xs); font-weight: var(--vikt-fet); }
.snabbsok__tomt { padding: var(--s-6) var(--s-4); color: var(--text-dampad); text-align: center; }
.snabbsok__fot {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-5);
  border-top: 1.5px solid var(--linje);
  color: var(--text-dampad);
  font-size: var(--fs-xs);
}
.snabbsok__fot kbd + kbd { margin-left: 2px; }
.snabbsok__fot kbd:nth-of-type(3) { margin-left: var(--s-3); }
@media (max-width: 559.98px) {
  .snabbsok { margin-top: var(--s-3); }
  .snabbsok__grupp, .snabbsok__fot { display: none; }
}
/* Under 480 px får märket, Demoläge, Sök och användarmenyn plats på en rad */
@media (max-width: 479.98px) {
  .skal-topp__inre { column-gap: 10px; }
  .skal-topp__marke img { width: 124px; }
  .skal-topp__chip { padding: 2px 8px; }
  .skal-topp__hoger { gap: var(--s-2); }
  .skal-sok { width: var(--klickyta); min-height: var(--klickyta); }
  .skal-anvandare__knapp { min-height: var(--klickyta); padding-right: 10px; }
}