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

html,
body {
  margin: 0;
  padding: 0;
}

/* Dölj scrollbaren så det känns som en app */
html {
  scrollbar-width: none;
  background: var(--nightsky);
  overscroll-behavior: none;   /* ingen gummibandseffekt eller dra-för-att-ladda-om */
  touch-action: manipulation;  /* ingen tryckfördröjning eller dubbeltryckszoom; nyp-zoom finns kvar */
}

/* Gränssnittsdelar beter sig som i en app: inga långtrycksmenyer, ingen
   markering av knapptext, inga bilder som går att dra. Brödtext går att markera. */
a,
button,
img,
.tab-bar,
.page-top,
.stat,
.industry,
.puff,
.cta {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}

/* Tryckkänsla på kort och runda knappar */
.industry,
a.puff,
.avatar {
  transition: transform 0.12s ease, background-color 0.15s ease;
}

.industry:active,
a.puff:active {
  transform: scale(0.98);
}

.avatar:active {
  transform: scale(0.94);
}

/* ---------- Sidbyten (View Transitions mellan sidor) ----------
   Anläggningsvyn glider in från höger, startvyn glider tillbaka från vänster,
   som i en iOS-app. data-page på <html> avgör riktningen. Webbläsare utan stöd
   byter sida som vanligt. */
@view-transition {
  navigation: auto;
}

.app {
  view-transition-name: screen;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-group(screen) {
  animation-duration: 0.38s;
}

::view-transition-old(screen),
::view-transition-new(screen) {
  mix-blend-mode: normal;
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

/* Framåt (till anläggningsvyn): ny vy glider in över den gamla */
html[data-page="location"]::view-transition-old(screen),
html[data-page="arrival"]::view-transition-old(screen) { animation-name: vt-push-out; }
html[data-page="arrival"]::view-transition-new(screen),
html[data-page="location"]::view-transition-new(screen) { animation-name: vt-push-in; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35); }

/* Bakåt (till startvyn): gamla vyn glider ut åt höger och visar den under */
html[data-page="index"]::view-transition-old(screen) { animation-name: vt-pop-out; z-index: 1; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35); }
html[data-page="index"]::view-transition-new(screen) { animation-name: vt-pop-in; }

/* Byte mellan flikar (startvy ⇄ inställningar): vyn tonar över och tab-baren står still */
html:active-view-transition-type(tab)::view-transition-old(screen) { animation-name: vt-fade-out; z-index: auto; box-shadow: none; }
html:active-view-transition-type(tab)::view-transition-new(screen) { animation-name: vt-fade-in; box-shadow: none; }
html:active-view-transition-type(tab) .tab-bar { view-transition-name: tab-bar; }
html:active-view-transition-type(tab)::view-transition-group(tab-bar) { animation: none; }

@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-push-in  { from { transform: translateX(100%); } }
@keyframes vt-push-out { to   { transform: translateX(-30%); filter: brightness(0.7); } }
@keyframes vt-pop-out  { to   { transform: translateX(100%); } }
@keyframes vt-pop-in   { from { transform: translateX(-30%); filter: brightness(0.7); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

html::-webkit-scrollbar,
.app::-webkit-scrollbar {
  display: none;
}

body {
  font-family: var(--font);
  font-feature-settings: "cv05"; /* Inter: litet l med svans, skiljer l från I och 1 */
  background: var(--nightsky);
  color: var(--cloud);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* Koder och siffror som ska läsas av exakt (grindkoder, registreringsnummer):
   l med svans, I med tvärstreck, nolla med snedstreck, lika breda siffror. */
.is-code {
  font-feature-settings: "cv05", "cv08", "zero", "tnum";
}

/* ---------- Tillgänglighet ---------- */
:focus-visible {
  outline: 3px solid var(--lime-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.avatar:focus-visible,
.puff:focus-visible,
.industry:focus-visible {
  border-radius: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- App-skal ----------
   På mobil fyller appen hela skärmen. På större skärmar visas den
   som en telefon centrerad i webbläsaren. */
.app {
  display: flow-root; /* hindrar arkets margin-top från att läcka ut (margin collapse) */
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--nightsky);
  overflow-x: clip;
}

@media (min-width: 500px) {
  body {
    background: #1d2433;
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }

  /* Telefonram: 852 px hög (eller fönstrets höjd om det är lägre), innehållet scrollar inuti */
  .app {
    width: 393px;
    height: min(852px, calc(100dvh - 80px));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    border-radius: var(--radius-sheet);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- Ikoner ---------- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.icon--16 {
  width: 16px;
  height: 16px;
}

/* ---------- PageTop ---------- */
.page-top {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
}

.page-top__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gutter);
  padding-top: max(var(--gutter), env(safe-area-inset-top));
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--cloud);
  color: var(--nightsky);
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

/* Fokusring som syns både mot mörk bakgrund och mot ljus karta/bild */
.avatar:focus-visible {
  outline: 3px solid var(--nightsky);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--lime-light);
}

/* ---------- Hero (bild/karta bakom innehållet) ---------- */
/* Bilden/kartan står kvar när man scrollar och innehållsarket glider upp över den.
   Negativ marginal gör att den inte tar plats i flödet. */
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 280px;
  margin-bottom: -280px;
  overflow: hidden;
}

.hero--truck img {
  width: 100%;
  aspect-ratio: 393 / 295;
  object-fit: cover;
  object-position: bottom;
}

.hero--map {
  background: #e4e6ea;
}

.hero__map {
  position: relative;
  width: 393px;
  height: 280px;
  margin: 0 auto;
}

.hero__map-image {
  position: absolute;
  left: -481.8px;
  top: -35.4px;
  width: 1272px;
  height: 964px;
  max-width: none;
}

/* Riktig karta (js/map.js) ovanpå den statiska bilden */
.hero .hero__map-live {
  position: absolute; /* vinner över .mapboxgl-map { position: relative } */
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero.is-live .hero__map-live {
  opacity: 1;
}

.hero.is-live .hero__map {
  visibility: hidden;
}

.map-pin {
  width: 32px;
  height: 50px;
}

.map-pin img {
  width: 100%;
  height: 100%;
}

.hero__pin {
  position: absolute;
  left: 181px;
  top: 99px;
  width: 32px;
  height: 50px;
}

/* ---------- Innehållsark ---------- */
.sheet {
  position: relative;
  margin-top: 248px;
  min-height: calc(100dvh - 248px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: var(--nightsky);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow: clip; /* innehåll (t.ex. väderrutan) klipps av arkets rundade hörn */
}

@media (min-width: 500px) {
  .sheet {
    min-height: calc(852px - 248px);
  }
}

/* Startvyn: lägre coverbild (220 px i stället för 280), arket börjar 32 px före bildens nederkant */
.hero--truck {
  height: 220px;
  margin-bottom: -220px;
}

.hero--truck img {
  margin-top: -48px; /* visa lastbilen, inte himlen, i den lägre bilden */
}

/* Med tab-bar: arket fyller skärmen ner till tab-baren, och lämnar plats för QR-knappen */
.app--tabs .sheet {
  margin-top: 188px;
  padding-bottom: 36px;
  min-height: calc(100dvh - 188px - var(--tab-bar-height) - env(safe-area-inset-bottom));
}

@media (min-width: 500px) {
  .app--tabs .sheet {
    min-height: calc(852px - 188px - var(--tab-bar-height));
  }
}

/* ---------- Tab-bar ----------
   Ligger sist i .app och klistrar sig mot botten, både när sidan scrollar
   (mobil) och när telefonramen scrollar (dator). Bakgrunden har en rundad
   urgröpning i mitten där QR-knappen sticker upp. */
.tab-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar__bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 176px 1fr;
  grid-template-rows: 40px 1fr;
  pointer-events: none;
}

.tab-bar__bg-side {
  background: var(--nightsky-lighterer);
}

/* Raka övre hörn och en tunn kant upptill som följer urgröpningen (Figma: Tab-bar, 2026-10-09) */
.tab-bar__bg-side {
  box-shadow: inset 0 1px 0 rgba(75, 79, 84, 0.8);
}

.tab-bar__edge {
  fill: none;
  stroke: rgba(75, 79, 84, 0.8);
  stroke-width: 1;
}

.tab-bar__notch {
  display: block;
  fill: var(--nightsky-lighterer);
}

.tab-bar__bg-base {
  grid-column: 1 / -1;
  background: var(--nightsky-lighterer);
}

.tab-bar ul {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 88px 1fr 1fr;
  align-items: center;
  height: var(--tab-bar-height);
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.tab-bar li {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px; /* klickyta ≥ 44 px (WCAG 2.5.5) */
  min-height: 56px;
  padding: 4px 2px;
  border-radius: 12px;
  color: var(--mist-light); /* Figma: MistDark, men den ger bara ca 4:1 mot tab-baren (WCAG AAA kräver 7:1) */
  transition: color 0.2s ease;
}

.tab-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease;
}

.tab-bar__icon svg {
  display: block;
}

.tab-bar__label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto; /* smala skärmar: "Inställ-ningar" i stället för att flyta över */
}

/* Vald flik: mörk platta bakom ikonen + lime ikon och text (form, inte bara färg) */
.tab-bar__item[aria-current="page"] {
  color: var(--lime-light);
}

.tab-bar__item[aria-current="page"] .tab-bar__icon {
  background: var(--nightsky);
  color: var(--lime-dark);
}

.tab-bar__item:not([aria-current]):hover {
  color: var(--cloud);
}

/* QR-knappen: stor lime cirkel som sticker upp ur urgröpningen */
.tab-bar__scan-slot {
  align-self: start;
}

.tab-bar__item--scan {
  margin-top: -32px; /* cirkelns mitt på tab-barens överkant */
  padding-top: 0;
  gap: 14px; /* texten på samma linje som de andra flikarnas */
}

.tab-bar__scan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lime-dark);
  color: var(--nightsky);
  box-shadow: 0 10px 28px rgba(205, 242, 65, 0.35);
  transition: transform 0.15s ease;
}

.tab-bar__scan svg {
  width: 28px;
  height: 28px;
}

.tab-bar__item--scan:active .tab-bar__scan {
  transform: scale(0.94);
}

.tab-bar__item--scan:focus-visible {
  outline: none;
}

.tab-bar__item--scan:focus-visible .tab-bar__scan {
  outline: 3px solid var(--lime-light);
  outline-offset: 4px;
}

/* Skanna-knappen är en <button>: nollställ knappens standardutseende */
button.tab-bar__item {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Microinteractions: spelas en gång (ca 1 s) när fliken blir aktiv.
   Klassen .is-entering sätts av js/tabbar.js. Allt slutar i viloläget. */
.tab-bar__icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}

.is-entering .nav-roof  { animation: nav-roof 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.is-entering .nav-door  { animation: nav-grow 0.5s ease-out 0.35s both; transform-origin: bottom; }
.is-entering .nav-bar   { animation: nav-grow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: bottom; }
.is-entering .nav-bar:nth-child(2) { animation-delay: 0.1s; }
.is-entering .nav-bar:nth-child(3) { animation-delay: 0.2s; }
.is-entering .nav-bar:nth-child(4) { animation-delay: 0.3s; }
.is-entering .nav-cog   { animation: nav-spin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.is-entering .nav-head  { animation: nav-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
.is-entering .nav-body  { animation: nav-rise 0.5s ease-out both; }

@keyframes nav-roof {
  from { transform: translateY(-5px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes nav-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes nav-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(0); }
}

@keyframes nav-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes nav-rise {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.sheet--padded-top {
  padding-top: 24px;
}

/* ---------- Sektioner ---------- */
.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--gutter);
}

.section--bleed {
  padding: 0;
}

.section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--lime-light);
}

.section--bleed .section__title {
  padding: 0 var(--gutter);
}

.section__title h2 {
  flex: 1;
  font: inherit;
}

/* Visa alla: lime pill. Klickytan är 44 px hög (WCAG 2.5.5) utan att pillen växer. */
.section__link {
  position: relative;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--lime-dark);
  color: var(--nightsky);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  text-decoration: none;
}

.section__link::before {
  content: "";
  position: absolute;
  inset: -11px -4px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none; /* även när listan är en <ul> */
}

/* ---------- Typografi ---------- */
.title {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--cloud);
}

.lead {
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.5; /* WCAG 1.4.8 */
  color: var(--cloud);
}

.lead--14 {
  font-size: 14px;
}

/* ---------- Välkomst ---------- */
.welcome {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 var(--gutter);
}

.weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 44px;
  height: 90px;
  padding: 23px 6px 16px;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
  border-top: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 8px 24px rgba(14, 16, 17, 0.35);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.welcome__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}

/* ---------- Väderikon: microinteractions ----------
   Spelas när ikonen visas och stannar efter ~4,5 s (under 5 s, WCAG 2.2.2).
   Varje animation slutar i ikonens viloläge. */
.weather svg {
  display: block;
  overflow: visible;
}

.weather svg * {
  transform-box: fill-box;
  transform-origin: center;
}

.wx-cloud { animation: wx-drift 4.5s ease-in-out; }
.wx-moon  { animation: wx-rock 4.5s ease-in-out; }
.wx-sun   { animation: wx-glow 1.5s ease-in-out 3; }
.wx-ray   { animation: wx-ray 1.5s ease-in-out 3; }
.wx-drop  { animation: wx-fall 0.9s ease-in 5; }
.wx-flake { animation: wx-snow 1.5s ease-in-out 3; }
.wx-fog   { animation: wx-fog 2.25s ease-in-out 2; }
.wx-bolt  { animation: wx-flash 1.5s linear 3; }

/* Förskjut parallella delar så att de inte rör sig i takt */
.wx-ray:nth-of-type(2n),
.wx-drop:nth-of-type(2n),
.wx-flake:nth-of-type(2n) { animation-delay: 0.15s; }
.wx-ray:nth-of-type(3n),
.wx-drop:nth-of-type(3n),
.wx-flake:nth-of-type(3n) { animation-delay: 0.3s; }
.wx-fog:last-of-type { animation-direction: reverse; }

@keyframes wx-drift {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(1.5px); }
  70% { transform: translateX(-1.5px); }
}

@keyframes wx-rock {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-10deg); }
  70% { transform: rotate(6deg); }
}

@keyframes wx-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.88); }
}

@keyframes wx-ray {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes wx-fall {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(3px); opacity: 0; }
  46% { transform: translateY(-3px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes wx-snow {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(1px, 2.5px); opacity: 0; }
  46% { transform: translate(-1px, -2.5px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes wx-fog {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

@keyframes wx-flash {
  0%, 30%, 100% { opacity: 1; }
  10%, 20% { opacity: 0.2; }
}

/* ---------- Statistik ---------- */
.stats {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.stat + .stat {
  border-left: 1px solid var(--nightsky-lighterer);
}


.stat__value {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1.3; /* enstaka siffra, inte brödtext */
}

.stat__label {
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.5; /* WCAG 1.4.8 */
  color: var(--mist-light);
}

/* ---------- Anläggningskort (horisontell scroll) ---------- */
.carousel {
  display: flex;
  gap: 8px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.industry {
  /* Alltid två hela kort + 32 px av ett tredje som tips om att det finns fler.
     100 % = karusellens innehållsbredd (skärmbredd minus 2 × 16 px), 32 px = gap + titt. */
  flex: 0 0 calc((100% - 32px) / 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
  scroll-snap-align: start;
}

.industry__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  line-height: 1.5; /* WCAG 1.4.8 */
  overflow-wrap: break-word;
}

.industry__name {
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.industry__place {
  font-size: 12px;
  font-weight: var(--weight-regular);
}

.industry__image {
  margin-top: auto; /* bilderna linjerar även när namnet radbryts */
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
}

.industry__image img {
  position: absolute;
  max-width: none;
}

/* ---------- Anläggning ---------- */
.location {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--gutter) 8px;
}

/* Platschip: "Stora Enso · Skoghall" */
.worksite {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--lime-dark);
}

.location__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- CTA ----------
   Huvudknappen ligger i en list som klistrar sig mot botten, med samma
   bakgrund och rundning som tab-baren. Listen ska vara sist i sitt block
   (arket eller stegpanelen) och hamnar i nederkanten även när innehållet är kort. */
.cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  padding: 16px var(--gutter);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--nightsky-lighterer);
}

.cta[hidden] {
  display: none;
}

.cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lime-dark);
  color: var(--nightsky);
  font-family: inherit;
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.cta__button:active {
  transform: scale(0.98);
}

/* Ark med knapplist: listen tar själv hand om avståndet till nederkanten */
.sheet--actions {
  padding-bottom: 0;
}

/* Fokus får inte hamna bakom listen (WCAG 2.4.12): scrolla fram innehållet ovanför den */
html[data-page="location"],
html[data-page="arrival"] {
  scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

@media (min-width: 500px) {
  html[data-page="location"] .app,
  html[data-page="arrival"] .app {
    scroll-padding-bottom: 104px;
  }
}

/* ---------- Puffar (listkort) ---------- */
.puff {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

a.puff:active {
  background: linear-gradient(var(--nightsky-lighterer), var(--nightsky-lighterer)) padding-box, var(--edge) border-box;
}

.puff__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.puff__text {
  font-size: 14px;
  font-weight: var(--weight-regular);
  line-height: 1.5; /* WCAG 1.4.8 */
  color: var(--cloud);
  overflow-wrap: break-word;
}


.puff__sender {
  font-size: 14px;
  font-weight: var(--weight-bold);
  line-height: 1.5; /* WCAG 1.4.8 */
  color: var(--mist-light);
}

/* Kommentarens topp: avsändare till vänster, datumchip till höger */
.puff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Datumchip */
.date {
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.5; /* WCAG 1.4.8 */
  color: var(--lime-light);
  font-feature-settings: "cv05", "tnum";
}

/* ---------- QR-skanner (js/scanner.js) ----------
   Modal som fälls upp nedifrån och täcker telefonramen (dator) eller skärmen. */
.scanner {
  position: fixed;
  inset: auto;
  left: var(--scanner-left, 0);
  top: var(--scanner-top, 0);
  width: var(--scanner-width, 100vw);
  height: var(--scanner-height, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sheet);
  background: #05080f;
  color: var(--cloud);
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: scanner-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scanner[open] {
  display: flex;
}

.scanner.is-closing {
  animation: scanner-out 0.22s ease-in forwards;
}

.scanner::backdrop {
  background: rgba(5, 8, 15, 0.6);
}

@media (max-width: 499px) {
  .scanner {
    border-radius: 0;
  }
}

@keyframes scanner-in  { from { transform: translateY(100%); } }
@keyframes scanner-out { to   { transform: translateY(100%); } }

.scanner__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--gutter);
  padding-top: max(var(--gutter), env(safe-area-inset-top));
}

.scanner__title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--weight-semibold);
}

.scanner__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--nightsky);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.scanner__close:active {
  transform: scale(0.94);
}

.scanner__close:focus-visible {
  outline: 3px solid var(--nightsky);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--lime-light);
}

/* Låtsaskamera: mörk, lite suddig bild med en QR-kod i perspektiv */
.scanner__camera {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scanner__feed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #3a3f48 0%, #1b1f27 55%, #05080f 100%);
}

.scanner__qr {
  width: 170px;
  height: 170px;
  filter: blur(0.6px) brightness(0.9);
  transform: perspective(500px) rotateX(10deg) rotateZ(-4deg);
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.scanner__frame {
  position: relative;
  width: 240px;
  height: 240px;
  /* Fyra vita hörn (Figma: 04 Skanner – hittad) */
  background:
    linear-gradient(var(--cloud), var(--cloud)) top left / 40px 4px,
    linear-gradient(var(--cloud), var(--cloud)) top left / 4px 40px,
    linear-gradient(var(--cloud), var(--cloud)) top right / 40px 4px,
    linear-gradient(var(--cloud), var(--cloud)) top right / 4px 40px,
    linear-gradient(var(--cloud), var(--cloud)) bottom left / 40px 4px,
    linear-gradient(var(--cloud), var(--cloud)) bottom left / 4px 40px,
    linear-gradient(var(--cloud), var(--cloud)) bottom right / 40px 4px,
    linear-gradient(var(--cloud), var(--cloud)) bottom right / 4px 40px;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 9999px rgba(5, 8, 15, 0.55); /* mörkar ner allt utanför sökrutan */
  transition: transform 0.25s ease;
}

.scanner__line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 3px;
  border-radius: 3px;
  background: var(--lime-dark);
  box-shadow: 0 0 16px 2px rgba(205, 242, 65, 0.6);
  animation: scanner-sweep 1s ease-in-out 3 alternate;
}

@keyframes scanner-sweep {
  from { top: 12px; }
  to   { top: calc(100% - 15px); }
}

.scanner__check {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--nightsky);
}

.scanner__check svg {
  padding: 16px;
  border-radius: 50%;
  background: var(--lime-dark);
  box-sizing: content-box;
}

.scanner__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px var(--gutter);
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  text-align: center;
}

.scanner__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-light);
}

.scanner__status {
  margin: 0;
  min-height: 1.5em;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

/* Samma utseende som huvudknappen (Figma: Knapp/Primär med kompassikon) */
.scanner__continue {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--lime-dark);
  color: var(--nightsky);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 10px 28px -10px var(--glow-lime);
}

.scanner__continue svg {
  flex-shrink: 0;
}

/* Kod hittad */
.scanner.is-found .scanner__line { display: none; }
.scanner.is-found .scanner__check { display: flex; animation: nav-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.scanner.is-found .scanner__frame { transform: scale(0.96); }
.scanner.is-found .scanner__hint { display: none; }
.scanner.is-found .scanner__status { color: var(--lime-light); }
.scanner.is-found .scanner__continue { display: inline-flex; }

/* ---------- Ankomstflödet (arrival.html, js/arrival.js) ---------- */

/* Checkpoint-linjen: fem punkter på en linje, avklarade och aktuell i lime */
.checkpoints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--gutter);
}

.checkpoints__line {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkpoints__line::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--nightsky-light);
}

.checkpoints__line li {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nightsky);
  border: 2px solid var(--mist-dark);
}

.checkpoints__line li.is-done {
  background: var(--lime-dark);
  border-color: var(--lime-dark);
}

.checkpoints__line li[aria-current="step"] {
  background: var(--nightsky);
  border: 4px solid var(--lime-dark);
  transform: scale(1.3);
}

.checkpoints__label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--lime-light);
}

.arrival__step {
  flex: 1; /* fyller arket så att knapplisten hamnar i nederkanten */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arrival__step[hidden] {
  display: none;
}

.title:focus {
  outline: none; /* fokus flyttas hit programmatiskt vid stegbyte */
}

/* Fakta (uppdrag, last, plats …) */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 0;
  margin: 0;
  padding: 16px 0;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 16px;
  min-width: 0;
}

.facts dt {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-light);
}

.facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.status-chip {
  align-self: flex-start;
  margin: 0;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  font-size: 14px;
  line-height: 1.5;
}

.alert {
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--nightsky-light);
  border-left: 6px solid var(--warning); /* ingen gradientkant: varningskanten ska synas */
}

.alert p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Bekräftelse: stor kryssruta (≥ 44 px klickyta via hela raden) */
.confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

/* Egen kryssruta: ljus ram (kontrast 3:1, WCAG 1.4.11), lime med bock när den är ikryssad */
.confirm input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--mist-light);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.confirm input::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-left: 2.5px solid var(--nightsky);
  border-bottom: 2.5px solid var(--nightsky);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease;
}

.confirm input:checked {
  border-color: var(--lime-dark);
  background: var(--lime-dark);
}

.confirm input:checked::before {
  transform: rotate(-45deg) scale(1);
}

.confirm input[aria-invalid="true"] {
  border-color: var(--warning);
}

.confirm input:focus-visible {
  outline: 3px solid var(--lime-light);
  outline-offset: 2px;
}

.form-error {
  margin: 0;
  padding: 8px 16px;
  border-left: 4px solid var(--warning);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--cloud);
}

/* Lossningssteg: numrerad lista */
.steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
  font-size: 14px;
  line-height: 1.5;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 14px;
  font-weight: var(--weight-bold);
  font-feature-settings: "tnum";
}

.done-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lime-dark);
  color: var(--nightsky);
}

/* Lime knappar med inbäddad ikon: ikonen tar knappens textfärg */
.cta__button svg {
  display: block;
}

a.cta__button {
  text-decoration: none;
}

/* Vägvisning */
.nav-banner,
.speed-sign {
  display: none;
}

.app--arrival[data-step="route"] .nav-banner {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  left: 72px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--nightsky);
  box-shadow: 0 8px 24px rgba(9, 16, 31, 0.35);
}

.nav-banner__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--lime-dark);
}

.nav-banner__text p {
  margin: 0;
}

.nav-banner__instruction {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.nav-banner__distance {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-light);
  font-feature-settings: "tnum";
}

.app--arrival[data-step="route"] .speed-sign {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cloud);
  border: 6px solid var(--signal-red);
  color: var(--nightsky);
  font-size: 20px;
  font-weight: var(--weight-bold);
  font-feature-settings: "tnum";
  box-shadow: 0 4px 12px rgba(9, 16, 31, 0.3);
}

/* I vägvisningssteget tar kartan det mesta av skärmen och arket blir ett kort i botten */
.app--arrival[data-step="route"] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

@media (min-width: 500px) {
  .app--arrival[data-step="route"] {
    min-height: 0;
  }
}

.app--arrival[data-step="route"] .hero {
  position: relative;
  flex: 1;
  height: auto;
  min-height: 320px;
  margin-bottom: -32px;
}

.app--arrival[data-step="route"] .hero__map-live {
  position: absolute;
  inset: 0;
}

.app--arrival[data-step="route"] .sheet {
  margin-top: 0;
  min-height: 0;
}

.route-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.route-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.route-card__copy p {
  margin: 0;
}

.route-card__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-light);
}

.pill-button {
  flex-shrink: 0;
  min-width: 88px;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--nightsky-lighterer);
  color: var(--cloud);
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.pill-button[aria-pressed="true"] {
  background: var(--lime-dark);
  color: var(--nightsky);
}

.pill-button[hidden] {
  display: none;
}

.progress {
  height: 8px;
  margin: 0 var(--gutter);
  border-radius: 4px;
  background: var(--nightsky-light);
  overflow: hidden;
}

.progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--lime-dark);
}

.app--arrival[data-step="route"] .arrival__step[data-step-panel="route"] {
  padding: 0 var(--gutter);
}

.app--arrival[data-step="route"] .progress {
  margin: 0;
}

/* Kartmarkörer */
.truck-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime-dark);
  border: 3px solid var(--nightsky);
  color: var(--nightsky);
  box-shadow: 0 4px 12px rgba(9, 16, 31, 0.35);
}

.truck-marker svg {
  transform: rotate(var(--bearing, 0deg));
}

.site-marker {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--nightsky);
  border: 2px solid var(--lime-dark);
  color: var(--lime-dark);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

/* Demokort på startvyn */
.demo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--gutter);
  padding: 16px;
  border: 1px dashed rgba(127, 128, 133, 0.5); /* MistDark 50 %, dekor */
  border-radius: var(--radius-card);
  color: var(--cloud);
  transition: transform 0.12s ease;
}

.demo-card:active {
  transform: scale(0.98);
}

.demo-card__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.demo-card__label {
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.demo-card__title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

/* Beskrivningen syns inte (Figma) men läses upp av skärmläsare */
.demo-card__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lastbilen syns först när vägvisningen startar; vid grinden visas grindpinnen */
.app--arrival[data-step="gate"] .truck-marker,
.app--arrival[data-step="safety"] .truck-marker {
  display: none;
}

/* Vägvisning: Mapbox logotyp och upphovsrätt flyttas ner så att instruktionsrutan inte täcker dem */
.app--arrival[data-step="route"] .mapboxgl-ctrl-top-right {
  top: auto;
  bottom: 40px;
}

/* Vägvisning: listen går kant i kant under kortet och glider in när man är framme */
.app--arrival[data-step="route"] .arrival__step[data-step-panel="route"] .cta {
  margin: 0 calc(-1 * var(--gutter));
  animation: cta-rise 0.35s ease-out;
}

@keyframes cta-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ---------- Ark som fälls upp nedifrån (inställningar) ----------
   Dialogen täcker telefonramen (mobil: hela skärmen), panelen ligger i botten.
   Positionen sätts av js/settings.js, som för skannern. */
.sheet-dialog {
  position: fixed;
  inset: auto;
  left: var(--dialog-left, 0);
  top: var(--dialog-top, 0);
  width: var(--dialog-width, 100vw);
  height: var(--dialog-height, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sheet);
  background: none;
  color: var(--cloud);
  overflow: hidden;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}

.sheet-dialog[open] {
  display: flex;
}

.sheet-dialog::backdrop {
  background: rgba(5, 8, 15, 0.6);
}

@media (max-width: 499px) {
  .sheet-dialog {
    border-radius: 0;
  }
}

.sheet-dialog__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px var(--gutter);
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  background: var(--nightsky-light);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  animation: scanner-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet-dialog.is-closing .sheet-dialog__panel {
  animation: scanner-out 0.22s ease-in forwards;
}

.sheet-dialog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sheet-dialog__title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.sheet-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--nightsky);
  cursor: pointer;
}

/* Val (radioknappar) i ett ark: hela raden är tryckyta */
.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices legend {
  padding: 0;
  margin-bottom: 4px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--nightsky);
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
}

/* Egen radioknapp: ljus ring (kontrast 3:1, WCAG 1.4.11), lime prick när den är vald */
.choice input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--mist-dark);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.choice input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nightsky);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.choice input:checked {
  border-color: var(--lime-dark);
  background: var(--lime-dark);
}

.choice input:checked::before {
  transform: scale(1);
}

/* Valt alternativ: fetstil och lime knapp (inte bara färg) */
.choice:has(input:checked) {
  font-weight: var(--weight-semibold);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--lime-light);
  outline-offset: 2px;
}

.choice input:focus-visible {
  outline: none;
}

/* Inaktivt alternativ (t.ex. ljust läge som inte finns än) */
/* Inaktiva kontroller är undantagna från kontrastkraven (WCAG 1.4.3/1.4.6) och
   ska se avstängda ut; förklaringen står i texten under alternativen. */
.choice.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.choice.is-disabled input {
  cursor: default;
}

.sheet-dialog__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-light);
}

/* ---------- Inställningar (settings.html) ----------
   Grupperade rader som i telefonens egna inställningar. Rader med flera
   alternativ öppnar ett ark; av/på-knappar sitter direkt på raden. */
.settings-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: max(24px, calc(env(safe-area-inset-top) + 16px)) 0 36px;
  min-height: calc(100dvh - var(--tab-bar-height) - env(safe-area-inset-bottom));
}

@media (min-width: 500px) {
  .settings-view {
    min-height: calc(100% - var(--tab-bar-height));
  }
}

.settings-view__title {
  margin: 0;
  padding: 0 var(--gutter);
  font-size: 28px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--gutter);
}

.settings-group .section__title {
  margin: 0;
}

.settings-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.settings-list > li + li {
  border-top: 1px solid var(--nightsky-lighterer);
}

.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--cloud);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.setting--link {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.setting--link:active {
  background: var(--nightsky-lighterer);
}

/* Listan klipper hörnen, så fokusringen ritas innanför raden */
.setting--link:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius-card);
}

.setting__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setting__label {
  flex: 1;
  min-width: 0;
}

.setting__hint {
  font-size: 12px;
  color: var(--mist-light);
}

.setting__value {
  font-size: 14px;
  color: var(--mist-light);
  text-align: right;
}

.setting__value--plain {
  color: var(--mist-light);
}

/* Av/på-knapp: läget syns på knoppens placering och fyllning, inte bara färgen */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--mist-dark);
  border-radius: 16px;
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Större tryckyta än knappen syns (44 × 44, WCAG 2.5.5) */
.switch::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mist-dark);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.switch[aria-checked="true"] {
  border-color: var(--lime-dark);
  background: var(--lime-dark);
}

.switch[aria-checked="true"] .switch__knob {
  transform: translateX(20px);
  background: var(--nightsky);
}

.switch:focus-visible {
  outline-offset: 3px;
  border-radius: 16px;
}

/* ---------- Igenkänning vid grinden (arrival.html) ---------- */

/* Liten tagg i ett kort, t.ex. "Nytt" */
.tag {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

/* Status som är i ordning: bock före texten (texten säger också "Giltig") */
.facts dd.is-ok::before {
  content: "✓ ";
  color: var(--lime-dark);
}

/* Sekundär knapp som ska ligga till vänster under ett kort */
.pill-button--start {
  align-self: flex-start;
}

/* Hopfällbar sektion (<details>): rubrik och förklaring, pil som vänds när den är öppen */
.disclosure summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary:focus-visible {
  border-radius: var(--radius-card);
}

.disclosure__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.disclosure__title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--cloud);
}

.disclosure__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-light);
}

.disclosure__chevron {
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--lime-dark);
  border-bottom: 2px solid var(--lime-dark);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.disclosure[open] .disclosure__chevron {
  transform: rotate(-135deg);
}

.disclosure .list,
.disclosure .steps {
  margin-top: 8px;
}

/* Grindens vy: det vakten ser när föraren kommer fram */
.gate-pass {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gate-pass__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gate-pass__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.gate-pass__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gate-pass__name {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.gate-pass__company {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-light);
}

/* Status, inte en knapp: chipstil med bock (lime pill betyder "tryck här" i appen) */
.gate-pass__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--nightsky-lighterer);
  color: var(--lime-dark);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

/* Faktarutan i arket: mörkare än arket så att den syns */
.gate-pass .facts {
  background: linear-gradient(var(--nightsky), var(--nightsky)) padding-box, var(--edge) border-box;
}

/* ---------- Ankomstflödet: val, lossningstid och feedback ---------- */

/* hidden ska alltid dölja, även element som har display satt i en klass */
[hidden] {
  display: none !important;
}

/* Val som kort direkt på arket (lastval, tidsuppskattning) */
.choice--card {
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.choice__hint {
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--mist-light);
}

.choices--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mist-light);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sekundär knapp som ändå ska dra blicken (lime text, inte lime yta) */
.pill-button--accent {
  color: var(--lime-dark);
}

/* Nedräkning under lossningen */
.timer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.timer__time {
  margin: 0;
  font-size: 40px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  font-feature-settings: "cv05", "tnum";
}

.timer__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-light);
}

.timer .progress {
  margin: 4px 0 0;
  background: var(--nightsky-lighterer); /* syns mot kortet */
}

[data-unload="over"] .timer__time {
  color: var(--warning);
}

[data-unload="over"] .timer .progress__bar {
  background: var(--warning);
}

/* Feedback efter besöket */
.feedback-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  background: linear-gradient(var(--nightsky-light), var(--nightsky-light)) padding-box, var(--edge) border-box;
}

.feedback-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

.feedback-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.feedback-card__done {
  margin: 0;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--lime-light);
}

.feedback-card__done:empty {
  display: none;
}

.feedback-card__done:focus {
  outline: none;
}

/* Chip som går att slå på och av (kryssruta eller radioknapp i en etikett) */
.toggle-chip {
  position: relative;
  cursor: pointer;
}

.toggle-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  background: var(--nightsky-lighterer);
  font-size: 14px;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}

/* Valt: lime yta och fetstil (inte bara färg) */
.toggle-chip input:checked + span {
  background: var(--lime-dark);
  color: var(--nightsky);
  font-weight: var(--weight-semibold);
}

.toggle-chip input:focus-visible + span {
  outline: 3px solid var(--lime-light);
  outline-offset: 2px;
}

/* Textfält */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--mist-dark); /* 4,7:1 mot bakgrunden, klarar 3:1 för kontroller */
  border-radius: 12px;
  background: var(--nightsky);
  color: var(--cloud);
  font: inherit;
  font-size: 16px; /* under 16 px zoomar iOS in vid fokus */
  line-height: 1.5;
  resize: vertical;
}

.field textarea::placeholder {
  color: var(--mist-light);
}

/* Arket får scrolla om innehållet är högre än skärmen */
.sheet-dialog__panel {
  max-height: 100%;
  overflow-y: auto;
}