/* ---------- Glas och ljus ----------
   Ett lager ovanpå app.css: frostat glas på det som ligger ovanpå annat innehåll,
   toning i coverbilden och sken under lime knappar. Kortens yta och kant finns i
   app.css (--edge). Utseendet följer Figma "01 Start" och "02 Anläggning" (2026-10-09).

   Tillgänglighet: vägvisningsrutan har text på glaset och är 94 % täckande så att
   texten klarar 7:1 även mot en ljus karta. Knapplisten och tab-baren är 82 % som i
   Figma. För tab-baren är det en medveten avvikelse (beslut 2026-10-09): de inaktiva
   flikarnas text kan gå under 7:1 när något ljust scrollar förbi bakom, vilket är ovanligt. Vid prefers-reduced-transparency eller
   prefers-contrast blir allt glas helt täckande (längst ner). */

/* Coverbilden på startvyn: mörk toning upptill och nedtill (kartan tonas inte) */
.hero--truck::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 16, 17, 0.4) 0, rgba(14, 16, 17, 0) 96px),
    linear-gradient(0deg, rgba(14, 16, 17, 0.45) 0, rgba(14, 16, 17, 0) 120px);
}

/* Primärknappar: solid lime med mjukt sken */
.cta__button {
  box-shadow: 0 10px 28px -10px var(--glow-lime);
}

.tab-bar__scan {
  box-shadow: 0 10px 30px -6px var(--glow-lime);
}

/* Knapplisten: frostat glas med en tunn kant upptill (Figma: MistDark 20 %) */
.cta {
  border-radius: 0;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(127, 128, 133, 0.2);
}

/* Tab-baren: frostat glas med urgröpningen som mask, så att glaset följer formen */
.tab-bar__bg {
  background: var(--glass-dark); /* 82 % som i Figma, se kommentaren överst */
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='40'%3E%3Cpath d='M0 0H18C36 0 44 8 55.7 20A38 38 0 0 0 120.3 20C132 8 140 0 158 0H176V40H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--notch) 50% 0 / 176px 40px no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - 87px) 40px no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - 87px) 40px no-repeat,
    linear-gradient(#000 0 0) 0 40px / 100% calc(100% - 40px) no-repeat;
  mask: var(--notch) 50% 0 / 176px 40px no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - 87px) 40px no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - 87px) 40px no-repeat,
    linear-gradient(#000 0 0) 0 40px / 100% calc(100% - 40px) no-repeat;
}

.tab-bar__bg-side,
.tab-bar__bg-base {
  background: none;
}

.tab-bar__notch {
  fill: none;
}

/* Runda knappar ovanpå bild/karta: vitt frostat glas */
.avatar {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 6px 20px rgba(14, 16, 17, 0.25);
}

/* Vägvisningsrutan ovanpå kartan: mörkt frostat glas */
.app--arrival[data-step="route"] .nav-banner {
  background: var(--glass-text);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 12px 32px rgba(14, 16, 17, 0.35);
}

/* Utan genomskinlighet: täckande ytor, inget glas */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cta,
  .tab-bar__bg,
  .app--arrival[data-step="route"] .nav-banner {
    background: var(--nightsky-lighterer);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .avatar {
    background: var(--cloud);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}