/* VÄRDSIDAN: /logga-in och /admin. Egen stil, skild från panel.css som /skapa behåller.

   Grundtanken: en instrumentpanel, inte ett formulär. Ljus, skarp yta med en elektrisk accent,
   stora siffror, luft och tunna linjer i stället för kort i rutnät. Mörkt läge följer telefonen
   (prefers-color-scheme). Allt utgår från variablerna i :root: byt en färg här och hela sidan
   följer med, i båda lägena. Ett test i tests/vard.test.js räknar kontrasten ur den här filen,
   så ändra aldrig en färg utan att köra det.

   Klasser med prefix v- är nya. Klasserna btn, f, notice, card, row, stack, small, muted och badge
   finns kvar för bordskartans motor (bordsvy.js, bordskarta.js), som stylas av vard-karta.css med
   samma variabler. Aliaserna --p-* längst ned i :root gör att motorns äldre regler också får de nya
   färgerna utan att motorn ändras. */

/* ---------- Typsnitten, lokalt (aldrig Google Fonts) ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variablerna ---------- */

:root {
  color-scheme: light dark;

  /* Benvitt, mörkgrönt och en dämpad guld. Samma värld som startsidan och gästsidan.
     Varje par är mätt, se tests/vard.test.js: brödtext minst 4,5:1 mot både bakgrund och yta. */
  --v-bg: #f7f4ee;
  --v-yta: #fffdf8;
  --v-yta-2: #efeade;
  --v-text: #16241c;
  --v-dampad: #55605a;
  --v-linje: #ddd7c8;
  /* Fältkanten: minst 3:1 mot ytan, så att ett fält syns också när det inte har fokus. */
  --v-kant: #8a8578;
  --v-accent: #26443a;
  /* Guldet som TEXT. #8a6a47 ligger på 4,52:1 mot bakgrunden, alltså utan marginal. Den här
     ligger på 5,62:1 och 6,06:1, och skillnaden syns knappt. */
  --v-accent-text: #7a5c33;
  --v-accent-mjuk: #eee7d6;
  --v-pa-accent: #fffdf8;
  --v-ok: #2f6b45;
  --v-varning: #8a5a12;
  --v-fara: #a3342a;
  --v-glod: rgb(38 68 58 / 0.12);
  --v-skugga: rgb(22 36 28 / 0.18);
  /* Samma färg som --v-yta, men som tre tal. En toning måste kunna sluta i ytans färg med noll i
     alfa: slutar den i transparent tonar Safari genom svart, och kanten blir grå i stället för
     osynlig. Ändras --v-yta ska det här talet ändras med, och ett test i vard.test.js kräver det. */
  --v-yta-rgb: 255 253 248;
  /* Guldet som tre tal, för toningar som ska sluta genomskinliga i samma färg. */
  --v-guld-rgb: 122 92 51;
  /* Glasytan: en panel som ligger OVANPÅ något annat, till exempel bordskartan. Den släpper
     igenom en aning av det som ligger under, så att man ser att kartan fortsätter där bakom. */
  --v-glas: rgb(255 255 255 / 0.88);
  /* Kanten på en glasyta: en ljusrand, inte en linje. Den skiljer panelen från kartan under. */
  --v-glas-kant: rgb(255 255 255 / 0.55);

  --v-radie: 12px;
  --v-radie-rad: 14px;
  --v-radie-pill: 999px;

  --v-kurva-ut: cubic-bezier(0.23, 1, 0.32, 1);
  --v-kurva-glid: cubic-bezier(0.77, 0, 0.175, 1);
  --v-tid-tryck: 160ms;
  --v-tid-in: 480ms;
  --v-tid-rakna: 800ms;
  --v-steg: 50ms;

  --v-font-rubrik: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v-font-text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Aliaser för bordskartans motor (bordsvy.css och avsnittet D2 i panel.css använder dem). */
  --p-bg: var(--v-bg);
  --p-surface: var(--v-yta);
  --p-ink: var(--v-text);
  --p-muted: var(--v-dampad);
  --p-line: var(--v-linje);
  --p-accent: var(--v-accent);
  --p-accent-soft: var(--v-accent-mjuk);
  --p-danger: var(--v-fara);
  --p-ok: var(--v-ok);
  --p-table: var(--v-yta-2);
  --p-radius: var(--v-radie);
}

/* Mörkt läge: samma variabler, andra värden. Accenten som text är ljusare än accenten som yta,
   annars håller den inte kontrasten mot den mörka bakgrunden. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Mörk skog, inte svart glas: bakgrunden har samma gröna ton som ljust läge, bara djup. */
    --v-bg: #101410;
    --v-yta: #191e18;
    --v-yta-2: #222821;
    --v-text: #f1efe7;
    --v-dampad: #a9ada2;
    --v-linje: #2b322a;
    --v-kant: #6f776d;
    --v-accent: #4a7a62;
    --v-accent-text: #d8bb7d;
    --v-accent-mjuk: #1d2a22;
    --v-pa-accent: #ffffff;
    --v-ok: #5cc088;
    --v-varning: #e0a95a;
    --v-fara: #ff8577;
    --v-glod: rgb(74 122 98 / 0.22);
    --v-skugga: rgb(0 0 0 / 0.55);
    --v-yta-rgb: 25 30 24;
    --v-guld-rgb: 216 187 125;
    --v-glas: rgb(20 23 28 / 0.86);
    --v-glas-kant: rgb(255 255 255 / 0.1);
  }
}

/* ---------- Grunden ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--v-bg);
  /* Plats för rullningslisten hålls alltid. Utan den flyttar sidan sju bildpunkter i sidled så
     fort en flik är kortare än fönstret, och loggan och rubriken hoppar när värden byter flik. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--v-bg);
  color: var(--v-text);
  font: 400 16px/1.5 var(--v-font-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Glöden: en stillastående radial gradient uppe till vänster, i accenten. Ett eget element bakom
   allt, så att den aldrig rullar med och aldrig påverkar layouten. */
.v-glod {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60vmax 60vmax at 0% 0%, var(--v-glod), transparent 45%);
}

a {
  color: var(--v-accent-text);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--v-font-rubrik);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

h1 {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 22px;
  line-height: 1.15;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

@media (min-width: 900px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 25px;
  }
}

:focus-visible {
  outline: 2px solid var(--v-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--v-accent-mjuk);
}

/* Sidans bredd. Textvyerna får 720, bordskartan full bredd (klassen sätts av vyn). */
.wrap,
.v-sida {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 72px;
}

/* Bordskartan och utskicket får hela bredden. Klassen sätts på body av vyn, så att både innehållet
   och loggan ovanför flyttar ut samtidigt och står i linje. */
.v-bred .v-sida,
.v-bred .panel-topp {
  max-width: 1180px;
}

/* Loggan högst upp till vänster (js/logga.js lägger elementet före #app). */
.panel-topp {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 0;
}

.logga {
  display: block;
  width: auto;
  height: 24px;
}

.logga-lank {
  display: inline-flex;
  align-items: center;
  /* Tryckytan är 44 px fast bilden är 24: luften läggs på med padding och dras av igen med
     margin, så att loggan står kvar precis där den stod. */
  padding-block: 10px;
  margin-block: -10px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .logga-lank:hover {
    opacity: 0.72;
  }
}

/* ---------- Text ---------- */

.small {
  font-size: 14px;
}

.muted,
.v-dampad {
  color: var(--v-dampad);
}

.v-etikett {
  margin: 0 0 6px;
  font: 600 12px/1.3 var(--v-font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-accent-text);
}

.v-ingress {
  font-size: 17px;
  color: var(--v-dampad);
}

.v-rubrikrad {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

/* ---------- Layout ---------- */

.stack,
.v-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.row,
.v-rad-knappar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Sektionen: etikett, rubrik och innehåll. Avgränsas med luft och en tunn linje ovanför, aldrig
   med ett kort. */
.v-sektion {
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--v-linje);
}

.v-sektion:first-child,
.v-sektion.is-utan-linje {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.v-sektion-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.v-sektion-huvud .v-etikett {
  margin: 0;
}

/* Sektionsrubriken, samma i alla fem vyer: 17 px halvfet. Vyns egen rubrik är 22 px och sidans
   rubrik 36, så det finns tre steg och inte fem. Se också .v-kort-rubrik och .bv-col-head. */
.v-sektion-huvud h2 {
  font: 600 17px/1.2 var(--v-font-rubrik);
  letter-spacing: -0.01em;
}

/* Toppraden under loggan: Alla event, Logga ut, Skapa och redigera. */
.v-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 22px;
}

.v-topp-del {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Kortet finns kvar för motorn, men i den nya stilen är det en yta utan skugga. */
.card {
  background: var(--v-yta);
  border: 1px solid var(--v-linje);
  border-radius: var(--v-radie);
  padding: 16px;
}

/* ---------- Knappar ---------- */

.v-knapp,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--v-accent-text);
  border-radius: var(--v-radie);
  background: transparent;
  color: var(--v-accent-text);
  font: 600 16px/1.2 var(--v-font-rubrik);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--v-tid-tryck) var(--v-kurva-ut),
    background-color var(--v-tid-tryck) ease,
    border-color var(--v-tid-tryck) ease,
    color var(--v-tid-tryck) ease;
}

.v-knapp:active,
.btn:active {
  transform: scale(0.97);
}

.v-knapp.is-primar,
.btn-primary {
  background: var(--v-accent);
  border-color: var(--v-accent);
  color: var(--v-pa-accent);
}

.v-knapp.is-tyst {
  border-color: transparent;
  padding-inline: 12px;
}

.v-knapp.is-fara,
.btn-danger {
  border-color: var(--v-fara);
  color: var(--v-fara);
}

.v-knapp.is-liten,
.btn-small {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

/* På pekskärm är 40 px för lite: de små knapparna (Ladda ner, Släpp reservation, Avbryt) får
   samma 44 px som de stora. Med mus står de kvar på 40 så raderna inte växer. */
@media (pointer: coarse) {
  .v-knapp.is-liten,
  .btn-small {
    min-height: 44px;
  }
}

.v-knapp.is-bred {
  width: 100%;
}

.v-knapp:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .v-knapp:not(:disabled):hover,
  .btn:not(:disabled):hover {
    background: var(--v-accent-mjuk);
  }

  .v-knapp.is-primar:not(:disabled):hover,
  .btn-primary:not(:disabled):hover {
    background: var(--v-accent);
    filter: brightness(1.08);
  }
}

/* ---------- Fält ---------- */

.v-falt,
.f {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v-dampad);
}

.v-falt-hint {
  font-weight: 400;
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--v-kant);
  border-radius: var(--v-radie);
  background: var(--v-yta);
  color: var(--v-text);
  font: 400 16px/1.4 var(--v-font-text);
  transition:
    border-color var(--v-tid-tryck) ease,
    box-shadow var(--v-tid-tryck) ease;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--v-accent);
  box-shadow: 0 0 0 3px var(--v-accent-mjuk);
}

input::placeholder,
textarea::placeholder {
  color: var(--v-dampad);
  opacity: 0.8;
}

/* ---------- Chips ---------- */

.v-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v-chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--v-linje);
  border-radius: var(--v-radie-pill);
  background: var(--v-yta);
  color: var(--v-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.v-chip.is-accent {
  border-color: var(--v-accent-mjuk);
  background: var(--v-accent-mjuk);
  color: var(--v-accent-text);
}

.v-chip.is-ok {
  color: var(--v-ok);
}

.v-chip.is-varning {
  color: var(--v-varning);
}

.v-chip.is-fara,
.badge.nej {
  color: var(--v-fara);
}

.v-chip-tal {
  font-family: var(--v-font-rubrik);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Pricken: 8 px, grön vid Kommer, linjefärg annars. */
.v-prick {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v-linje);
  flex: none;
}

.v-prick.is-ok {
  background: var(--v-ok);
}

.v-prick.is-fara {
  background: var(--v-fara);
}

/* ---------- Rader (listor) ---------- */

/* Raderna i eventlistan. Samma språk som översikten: en post per rad med en hårlinje emellan, inga
   ramade kort. Listan får en linje över den första raden, så att den börjar lika tydligt som den
   slutar. */
.v-rader {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--v-linje);
}

.v-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--v-linje);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--v-tid-tryck) ease;
}

.v-rad:active {
  color: var(--v-accent-text);
}

.v-rad.is-stilla {
  cursor: default;
}

.v-rad.is-stilla:active {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .v-rad:not(.is-stilla):hover .v-rad-rubrik {
    color: var(--v-accent-text);
  }
}

.v-rad-rubrik {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  transition: color var(--v-tid-tryck) ease;
}

.v-rad-text {
  grid-column: 1;
  color: var(--v-dampad);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.v-rad-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--v-accent-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: right;
}

.v-rad-chevron {
  font-family: var(--v-font-rubrik);
  font-size: 26px;
  line-height: 1;
  color: var(--v-accent-text);
}

/* Tunna listor: en rad per post, linje emellan, ingen ram. */
.v-lista {
  display: grid;
}

.v-lista > li {
  padding: 14px 0;
  border-top: 1px solid var(--v-linje);
}

.v-lista > li:first-child {
  border-top: 0;
}

/* ---------- Stor siffra ---------- */

.v-siffra {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.v-siffra-tal {
  font: 600 84px/0.95 var(--v-font-rubrik);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--v-accent-text);
}

.v-siffra-text {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--v-dampad);
}

.v-siffra-text strong {
  color: var(--v-text);
  font-weight: 600;
}

@media (min-width: 900px) {
  .v-siffra-tal {
    font-size: 96px;
  }
}

/* ---------- Besked ---------- */

.v-besked,
.notice {
  padding: 12px 14px;
  border: 1.5px solid var(--v-linje);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--v-yta);
  font-size: 14px;
}

.v-besked.is-ok,
.notice.ok {
  border-color: var(--v-ok);
  color: var(--v-ok);
}

.v-besked.is-fel,
.notice.error {
  border-color: var(--v-fara);
  color: var(--v-fara);
}

.v-besked.is-info {
  border-color: var(--v-accent);
}

/* Något är på väg att ta slut, till exempel platserna under taket för antal svar. Det är varken
   ett fel eller ett lugnt besked: det kräver att någon gör något, men inte just nu. */
.v-besked.is-varning {
  border-color: var(--v-varning);
  color: var(--v-varning);
}

.v-tomt {
  padding: 18px 0;
  color: var(--v-dampad);
  font-size: 15px;
}

.plain-list {
  display: grid;
  gap: 6px;
}

/* ---------- Utfällning (details) ---------- */

.v-utfall > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v-utfall > summary::-webkit-details-marker {
  display: none;
}

.v-utfall-innehall {
  display: grid;
  gap: 8px;
  padding: 12px 0 4px;
}

.v-utfall-innehall dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 14px;
}

.v-utfall-innehall dt {
  color: var(--v-dampad);
}

.v-utfall-innehall dd {
  overflow-wrap: anywhere;
}

/* ---------- Flikar ---------- */

.tabs,
/* Hållaren runt flikraden.

   Den ligger KVAR ÖVERST när sidan rullar. På en telefon i liggande läge är skärmen låg, och
   toppraden plus rubriken tog nästan hela höjden: flikarna hamnade utanför bild, och det syntes
   inte att Bilderna fanns. Nu följer raden med.

   Toningen ritas här och inte på själva rullytan. En toning på rullytan följer med innehållet i
   sidled och hamnar mitt i raden i stället för i kanten. data-spill sätts av vyer/event.js när
   raden rullas, när fliken byts och när fönstret ändras. */
.v-flikrad {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 8px 0 24px;
  padding: 6px 0;
  background: var(--v-bg);
}

.v-flikrad::before,
.v-flikrad::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 44px;
  opacity: 0;
  /* Toningen får aldrig ta emot ett tryck: fliken under den ska gå att trycka på. */
  pointer-events: none;
  transition: opacity 160ms ease;
}

.v-flikrad::before {
  left: 2px;
  border-radius: var(--v-radie-pill) 0 0 var(--v-radie-pill);
  background: linear-gradient(90deg, var(--v-yta) 30%, rgb(var(--v-yta-rgb) / 0) 100%);
}

.v-flikrad::after {
  right: 2px;
  border-radius: 0 var(--v-radie-pill) var(--v-radie-pill) 0;
  background: linear-gradient(270deg, var(--v-yta) 30%, rgb(var(--v-yta-rgb) / 0) 100%);
}

.v-flikrad[data-spill='vanster']::before,
.v-flikrad[data-spill='bada']::before,
.v-flikrad[data-spill='hoger']::after,
.v-flikrad[data-spill='bada']::after {
  opacity: 1;
}

.v-flikar {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--v-linje);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.v-flikar::-webkit-scrollbar {
  display: none;
}

/* Flikarna: understruken aktiv flik, som skisserna visar, inte en fylld pill. Understrykningen
   är guld och sitter under texten, så att raden läses som en rad och inte som fem knappar. */
.tab,
.v-flik {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 0 14px;
  /* Se .v-flik nedan: på bredare skärm står flikarna kvar till vänster i stället för att sträckas
     ut över hela sidan. */
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--v-dampad);
  font: 600 14px/1 var(--v-font-rubrik);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--v-tid-tryck) ease,
    color var(--v-tid-tryck) ease;
}

/* Fem flikar på 375 px, utan en andra meny och utan en rad som måste rullas. Under 480 px står
   korta namn, Bord i stället för Bordskartan, och de fem delar bredden lika. Hela namnet står kvar
   i knappens aria-label, så uppläsningen förlorar ingenting. Över 480 px ryms de långa namnen. */
.v-flik-kort {
  display: none;
}

@media (max-width: 479px) {
  .v-flikar {
    gap: 0;
    overflow-x: visible;
  }

  .v-flik {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 2px;
    font-size: 13px;
  }

  .v-flik-lang {
    display: none;
  }

  .v-flik-kort {
    display: inline;
  }

  /* Raden rullar inte längre, så kantens toning har ingenting att visa. */
  .v-flikrad::before,
  .v-flikrad::after {
    content: none;
  }
}

/* Från 480 px sträcks flikarna inte ut. Eventsidan är 1180 px bred, och fem flikar som delar den
   bredden hamnar så långt isär att raden slutar läsas som en rad. De står i stället till vänster,
   under rubriken, som i skissen. */
@media (min-width: 480px) {
  .v-flik {
    flex: 0 0 auto;
    padding: 0 18px;
  }

  .v-flik:first-child {
    padding-left: 0;
  }
}

.tab[aria-selected='true'],
.v-flik[aria-selected='true'] {
  border-bottom-color: var(--v-accent-text);
  background: transparent;
  color: var(--v-text);
  font-weight: 600;
}

/* Liggande telefon. Skärmen är låg, och den stora rubriken sköt ned flikraden under kanten.
   Rubriken krymper, så att flikarna syns direkt i stället för efter en rullning. */
@media (max-height: 560px) and (orientation: landscape) {
  .v-rubrikrad h1 {
    font-size: 26px;
    line-height: 30px;
  }

  .v-rubrikrad {
    margin-bottom: 4px;
  }

  .v-flikrad {
    margin: 4px 0 14px;
  }

  /* Etiketten över rubriken är utsmyckning. I liggande läge är varje rad höjd som flikarna
     behöver, så den får stå över. */
  .v-rubrikrad .v-etikett {
    display: none;
  }

  .v-event > .v-topp {
    margin-bottom: 10px;
  }
}

/* ---------- Heron på inloggningen ---------- */

.v-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 40vh;
  padding: 24px 20px;
  margin: 0 -16px 28px;
  border-radius: 0 0 28px 28px;
  color: #ffffff;
  /* Mörk skog med en strimma guld, inte en blå platta. Tonerna kommer ur paletten, utom guldet
     som ligger som en tunn glöd i hörnet: det ska anas, inte läsas. */
  background:
    radial-gradient(120% 90% at 85% 0%, rgb(var(--v-guld-rgb) / 0.22) 0%, rgb(var(--v-guld-rgb) / 0) 60%),
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.22) 100%), var(--v-accent);
  overflow: hidden;
}

.v-hero-text {
  display: grid;
  gap: 6px;
  max-width: 34ch;
}

.v-hero-text .v-etikett {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
}

.v-hero-text h1 {
  color: #ffffff;
}

.v-hero-ingress {
  color: rgb(255 255 255 / 0.85);
  font-size: 15px;
}

/* Inloggningens formulär: en enda spalt, allt helbrett. */
.v-inloggning {
  display: grid;
  gap: 14px;
  max-width: 440px;
}

.v-inloggning .v-knapp {
  width: 100%;
}

@media (min-width: 900px) {
  .v-hero {
    margin: 0 0 32px;
    border-radius: 28px;
    min-height: 36vh;
  }
}

/* Utskicksvyn hade en egen tonad bakgrund, --v-accent-mjuk på hela sidan. Den togs bort: de fem
   flikarna är en och samma sida och ska ligga på samma yta. En flik som byter färg på hela sidan
   läses som en annan tjänst. */

/* Eventsidan är lika bred i alla fem flikar, se vyer/event.js. Svaren är en läslista, och en rad
   text över hela den bredden blir för lång att följa med ögat. Vyn håller därför sin egen
   spaltbredd i stället för att sidan krymper och växer när värden byter flik. */
@media (min-width: 900px) {
  .v-vy-svaren {
    max-width: 880px;
  }
}

/* ---------- Rörelse ---------- */

.v-in {
  animation: v-in var(--v-tid-in) var(--v-kurva-ut) backwards;
  animation-delay: calc(var(--v-i, 0) * var(--v-steg));
}

@keyframes v-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.v-pop {
  animation: v-pop 400ms var(--v-kurva-ut) backwards;
}

@keyframes v-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  70% {
    transform: scale(1.04);
  }
}

/* Pulsringen: en ring som växer och tonar ut, till exempel på ett bord när en gäst släpps. */
.v-puls {
  position: relative;
}

.v-puls::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--v-accent);
  border-radius: inherit;
  pointer-events: none;
  animation: v-puls 500ms var(--v-kurva-ut) forwards;
}

@keyframes v-puls {
  from {
    opacity: 1;
    transform: scale(0.96);
  }

  to {
    opacity: 0;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Svaren ---------- */

/* Sökraden: fältet tar plats, filtret står bredvid från 420 px. */
.v-sokrad {
  display: grid;
  gap: 10px;
}

@media (min-width: 420px) {
  .v-sokrad {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .v-sokrad select {
    width: auto;
    min-width: 160px;
  }
}

.v-antal {
  margin: 0;
}

.v-svarslista > li {
  padding: 0;
}

/* Raden: namnet överst, svaret under med prick, maten och märkena sist. Hela raden öppnar
   utfällningen, så summary bär allt som syns i listan. */
.v-svar-huvud {
  display: grid;
  gap: 4px;
  padding: 16px 0;
}

.v-svar-namn {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.v-svar-svar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--v-dampad);
  font-size: 14px;
}

.v-svar-mat {
  color: var(--v-accent-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.v-svar-andrad,
.v-svar-namnbyte {
  font-size: 13px;
}

.v-svar-namnbyte {
  color: var(--v-fara);
}

/* Pilen som visar att raden går att fälla ut. Vänd nedåt när den är öppen. */
.v-svar-huvud::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 18px;
  font-family: var(--v-font-rubrik);
  font-size: 22px;
  line-height: 1;
  color: var(--v-dampad);
  transform: rotate(90deg);
  transition: transform var(--v-tid-tryck) var(--v-kurva-ut);
}

.v-svar .v-utfall {
  position: relative;
}

.v-svar .v-utfall[open] .v-svar-huvud::after {
  transform: rotate(-90deg);
}

.v-svar-huvud {
  padding-right: 28px;
}

/* Från 560 px står maten till höger om namnet, som i en tabell utan tabell. */
@media (min-width: 560px) {
  .v-svar-huvud {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .v-svar-namn,
  .v-svar-svar {
    grid-column: 1;
  }

  .v-svar-mat {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: right;
    max-width: 40%;
  }
}

/* ---------- Ramen runt ett event ---------- */

.v-flik-panel {
  display: grid;
}

.v-motor {
  min-width: 0;
}

/* ---------- Gallringen ---------- */

.v-gallring-rad {
  grid-template-columns: minmax(0, 1fr) auto;
}

.v-gallring-knapp {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- Gästernas bilder ---------- */

/* QR-koden till borden, överst i fliken: läget och två knappar, i en egen ruta så att den inte
   läses som en av gästerna nedanför. */
.v-qr {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--v-linje);
  border-radius: var(--v-radie);
}

.v-qr h3 {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
}

.v-gast {
  padding-top: 20px;
  margin-top: 4px;
  border-top: 1px solid var(--v-linje);
}

.v-gast:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.v-gast-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

/* Gästens namn är en post i en lista, inte en sektionsrubrik: samma 16 px som svarens namn och
   raderna i Status och att göra. */
.v-gast-huvud h3 {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
}

.v-bilder-rutnat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 560px) {
  .v-bilder-rutnat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .v-bilder-rutnat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v-bild {
  display: grid;
  gap: 6px;
}

/* Rutan har sin storlek innan bilden kommit, så att rutnätet inte hoppar medan bytes hämtas. */
.v-bild-ruta {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--v-linje);
  border-radius: 10px;
  background: var(--v-yta-2);
  overflow: hidden;
}

.v-bild-ruta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bilden gick inte att hämta. Rutan står kvar och säger det, i stället för att se tom ut. */
.v-bild-ruta.is-fel::after {
  content: 'Kunde inte hämtas';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--v-fara);
}

@supports not (aspect-ratio: 1 / 1) {
  .v-bild-ruta {
    height: 0;
    padding-bottom: 100%;
  }

  .v-bild-ruta img {
    position: absolute;
    inset: 0;
  }
}

/* ---------- Bilden i helskärm ---------- */

/* Rutan ligger i body och täcker hela fönstret. Den ersätter en ny flik: bilden hämtas som bytes
   genom reglerna, och när hämtningen väl är klar har webbläsaren glömt att värden tryckte, så
   window.open stoppas som en popup. */
.v-visare {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 0.86);
  animation: v-visare-in 160ms var(--v-kurva-ut) both;
}

.v-visare[hidden] {
  display: none;
}

@keyframes v-visare-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Ytan fyller rutan, och bilden centreras i den. Ett tryck bredvid bilden landar på ytan och
   stänger. Höjden står i procent och inte i vh: dvh finns inte i Safari 15, och vh räknar fel när
   telefonens adressrad glider undan. Rutan är fast placerad och har därför redan en känd höjd. */
.v-visare-yta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.v-visare-bild {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  animation: v-visare-bild-in 220ms var(--v-kurva-ut) both;
}

@keyframes v-visare-bild-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.v-visare-status {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
}

.v-visare-status[hidden] {
  display: none;
}

/* Knappen ligger i hörnet, ovanför bilden, och är stor nog för en tumme. */
.v-visare-stang {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--v-radie-pill);
  background: rgb(255 255 255 / 0.16);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v-visare-stang:hover {
  background: rgb(255 255 255 / 0.26);
}

.v-visare-stang:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Sidan bakom får inte rulla medan bilden står öppen. */
body.v-visare-pa {
  overflow: hidden;
}

/* Miniatyren är en knapp. Den ska se ut precis som rutan gjorde när den var en div. */
button.v-bild-ruta {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--v-tid-tryck) ease;
}

button.v-bild-ruta:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .v-visare,
  .v-visare-bild {
    animation: none;
  }

  button.v-bild-ruta {
    transition: none;
  }
}

/* ---------- Ändringar i ett svar ---------- */

/* Vad som ändrades, när, och vad det stod förut. En gäst kan ändras av den som känner gästens
   e-post eller nummer, och då ska värden se vad som hände, inte bara att något hände. */
.v-svar-logg {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--v-linje);
}

.v-svar-logg-rubrik {
  margin: 0 0 8px;
  font: 600 13px/1.2 var(--v-font-rubrik);
  color: var(--v-dampad);
}

.v-svar-logg-lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-svar-logg-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 14px;
}

.v-svar-logg-falt {
  min-width: 96px;
  font-weight: 600;
}

.v-svar-logg-fran {
  color: var(--v-dampad);
  text-decoration: line-through;
}

.v-svar-logg-till {
  font-weight: 500;
}

/* ---------- Översikten, efter skisserna ---------- */

/* INGA KORT. En benvit yta, tunna hårlinjer som delar sektionerna, och en lodrät linje mellan de
   två spalterna. Det är hela skillnaden mot en vanlig instrumentpanel: ytan hänger ihop. */
.v-vy-oversikt {
  gap: 0;
}

.v-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--v-linje);
}

/* Linjen mellan spalterna. Den ritas på den högra delen, så att den försvinner av sig själv när
   spalterna staplas. */
.v-par > .v-del + .v-del {
  padding-left: 18px;
  border-left: 1px solid var(--v-linje);
}

.v-del-status,
.v-huvudknapp {
  padding: 20px 0;
  border-top: 1px solid var(--v-linje);
}

.v-huvudknapp {
  border-top: 0;
  padding-top: 4px;
}

.v-kort-rubrik {
  margin: 0 0 12px;
  font: 600 17px/1.2 var(--v-font-rubrik);
  letter-spacing: -0.01em;
}

.v-tombild {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 6px 0 2px;
}

/* Ringen: huvudsaken i skissen, stor, med en prickad krans runt. */
.v-ring-box {
  position: relative;
  display: grid;
  place-items: center;
}

.v-ring {
  display: block;
  width: 100%;
  height: auto;
}

.v-ring-krans {
  fill: none;
  stroke: var(--v-accent);
  opacity: 0.55;
}

.v-ring-spar {
  fill: none;
  stroke: var(--v-yta-2);
}

.v-ring-fylld {
  fill: none;
  stroke: var(--v-accent);
}

.v-ring-mitt {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}

.v-ring-procent {
  font: 700 clamp(20px, 6.5vw, 30px)/1 var(--v-font-rubrik);
  letter-spacing: -0.02em;
}

.v-ring-tal {
  font: 700 clamp(15px, 4.6vw, 21px)/1.1 var(--v-font-rubrik);
}

.v-ring-under {
  font-size: 12px;
  color: var(--v-dampad);
}

.v-ring-utan {
  display: grid;
  justify-items: start;
  gap: 4px;
}

/* Nyckeln under ringen. En rad per post: i en smal spalt bryts en enda rad mitt i en post, och
   då hamnar pricken på en rad och talet på nästa. */
.v-ring-nyckel {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
}

.v-ring-nyckel span:not(.v-nyckel-prick) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v-nyckel-prick {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--v-accent);
  border-radius: 50%;
}

.v-nyckel-prick.is-fylld {
  background: var(--v-accent);
}

/* Trenden. Tunna hjälplinjer, guld på kurvan. */
.v-trend {
  display: block;
  width: 100%;
  height: 130px;
}

.v-trend-hjalp {
  stroke: var(--v-linje);
  stroke-width: 1;
}

.v-trend-tal,
.v-trend-dag {
  fill: var(--v-dampad);
  font-family: var(--v-font-text);
  font-size: 11px;
}

/* Ytan under kurvan är en skugga, inte en platta: den ska inte väga tyngre än ringen bredvid. */
.v-trend-yta {
  fill: var(--v-accent-mjuk);
  opacity: 0.6;
}

.v-trend-linje {
  fill: none;
  stroke: var(--v-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.v-trend-punkt {
  fill: var(--v-accent);
}

/* Borden: eventets egna bord där de står, med sina riktiga platser som prickar runt om. */
.v-bord-tal {
  margin: 0 0 10px;
  font: 700 clamp(22px, 7vw, 30px)/1 var(--v-font-rubrik);
  letter-spacing: -0.02em;
}

.v-mini {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
}

.v-mini-bord {
  fill: none;
  stroke: var(--v-accent);
  stroke-width: 1.5;
}

.v-mini-bord.is-upptaget {
  fill: none;
}

.v-mini-stol {
  fill: var(--v-yta);
  stroke: var(--v-accent);
  stroke-width: 1;
}

.v-mini-stol.is-upptagen {
  fill: var(--v-accent);
}

/* Dagarna kvar. Stor siffra, liten text, ingen ring. */
.v-dagar-rad {
  display: grid;
  gap: 2px;
  margin: 0;
}

.v-dagar-tal {
  font: 700 clamp(34px, 11vw, 52px)/0.95 var(--v-font-rubrik);
  letter-spacing: -0.03em;
  color: var(--v-text);
}

.v-dagar-text {
  font-size: 14px;
  color: var(--v-dampad);
}

/* Status och att göra. En rad per sak, hårlinjer emellan, läget i guld när det behöver en åtgärd. */
.v-status {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-status li + li .v-status-rad {
  border-top: 1px solid var(--v-linje);
}

.v-status-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.v-status-ikon {
  display: flex;
  color: var(--v-accent);
}

.v-status-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.v-status-titel {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
}

/* Underraden är eventets egen text, samma som stod på kortraderna förut. */
.v-status-under {
  color: var(--v-dampad);
  font-size: 13.5px;
  line-height: 1.35;
}

.v-status-lage {
  flex: 0 0 auto;
  max-width: 38%;
  color: var(--v-dampad);
  font-size: 13px;
  line-height: 1.3;
  text-align: right;
}

.v-status-lage.is-varna {
  color: var(--v-accent-text);
}

.v-status-pil {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--v-dampad);
  border-right: 1.5px solid var(--v-dampad);
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .v-status-rad:hover .v-status-text {
    color: var(--v-accent-text);
  }
}

/* Dator: statuslistan flyttar upp vid sidan, som i den breda skissen. */
@media (min-width: 900px) {
  .v-vy-oversikt {
    display: grid;
    /* Statuslistan har text i tre delar på varje rad och behöver mer än en tredjedel: under
       250 px bryts rubriken mitt itu och läget hamnar under pilen. */
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
    column-gap: 28px;
    align-items: start;
  }

  .v-vy-oversikt > .v-par {
    grid-column: 1;
  }

  .v-vy-oversikt > .v-del-status {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid var(--v-linje);
  }

  .v-vy-oversikt > .v-huvudknapp {
    grid-column: 2;
  }

  .v-vy-oversikt > .v-chips,
  .v-vy-oversikt > .v-rader,
  .v-vy-oversikt > .v-rad-knappar,
  .v-vy-oversikt > div:last-child {
    grid-column: 1 / -1;
  }
}

/* Bildspelet på storskärm: läget för nya bilder och kryssrutan På skärmen under varje bild. */
.v-skarm-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.v-skarm-val legend {
  float: left;
  margin-right: 4px;
  padding: 0;
}

.v-skarm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  cursor: pointer;
}

.v-skarm input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--v-text, #1d1d1b);
}

.v-skarm-lage {
  color: var(--v-varning, #8a5a00);
}

.v-skarm-lage:empty {
  display: none;
}