/* Servicedax. Mobile first, ingen byggprocess. */

/* ---------- Typsnitt (lokala, latin räcker för svenska) ---------- */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* ---------- Färger ---------- */

:root {
  --asfalt: #23282D;
  --skylt: #FBFCFD;
  --grus: #E6E9EC;
  --grus-mork: #D8DDE2;
  --linje: #C9CFD5;
  --dampad: #4A5158;
  --eu-bla: #1D4FA3;
  --varsel: #E3A21A;
  --varsel-text: #855700;
  --stopp: #A62F26;
  --klar: #276B43;

  /* Semantiska roller, byts i mörkt läge */
  --bg: var(--grus);
  --text: var(--asfalt);
  --muted: var(--dampad);
  --line: var(--linje);
  --box: var(--grus-mork);
  --surface: var(--skylt);
  --nav-bg: var(--skylt);
  --link: var(--eu-bla);
  --focus: var(--eu-bla);
  --field-border: #6B747D;
  --pill-border: #AEB6BE;
  --selected-bg: #DCE5F4;
  --disabled-bg: #8C959E;
  --overdue: var(--stopp);
  --soon: var(--varsel-text);
  --ok: var(--klar);
  --confirm: var(--klar);
  --plate-shadow: 0 2px 0 #B9C0C7, 0 10px 24px rgba(35, 40, 45, 0.14);

  --nav-h: 76px;
  --savebar-h: 84px;
  --gutter: 20px;
  --max: 560px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--asfalt);
    --text: #E6E9EC;
    --muted: #AEB6BE;
    --line: #3F464D;
    --box: #30363C;
    --surface: #2B3136;
    --nav-bg: #1C2024;
    --link: #93B3EC;
    --focus: #93B3EC;
    --field-border: #858E97;
    --pill-border: #5A636B;
    --selected-bg: #1E3257;
    --disabled-bg: #4A5158;
    --overdue: #F08A80;
    --soon: #F2B84B;
    --ok: #74C895;
    --plate-shadow: 0 2px 0 #151819, 0 10px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Grund ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Vanlig blocklayout, inte flex-kolumn, så att innehållet aldrig trycks ihop */
.page {
  display: block;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 40px max(var(--gutter), env(safe-area-inset-left));
}
.has-nav .page { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 40px); }
.has-nav.has-savebar .page { padding-bottom: calc(var(--nav-h) + var(--savebar-h) + env(safe-area-inset-bottom) + 32px); }

a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }

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

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

.hint { font-size: 15px; color: var(--muted); }
.optional { font-weight: 400; color: var(--muted); }
.info-text { font-size: 16px; color: var(--muted); margin-top: 8px; }
.empty { font-size: 16px; color: var(--muted); padding: 14px 0; }
code { font-size: 15px; }

/* ---------- Rubriker ---------- */

.brandbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { font-family: var(--font-cond); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.brandbar__date { font-size: 15px; color: var(--muted); }
.brandbar__end { display: flex; align-items: center; gap: 4px; margin-right: -12px; }
.brandbar { margin-top: -12px; }

.hero {
  margin: 28px 0 6px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.02;
  text-wrap: balance;
}
.lede { font-size: 16px; color: var(--muted); }

.page-title {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.05;
  margin-bottom: 18px;
}

.section-title { margin: 32px 0 6px; font-family: var(--font-cond); font-size: 20px; font-weight: 600; color: var(--text); }
.section { margin-top: 12px; }

.back-link {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 48px; margin: -12px 0 4px -6px; padding-right: 8px;
  font-weight: 600; text-decoration: none;
}

.title-with-plate { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.title-with-plate .page-title { margin-bottom: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Skylten ---------- */

.plate {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--skylt);
  color: var(--asfalt);
  border: 1.5px solid var(--asfalt);
  border-radius: 4px;
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
}
.plate__eu {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: var(--eu-bla); color: #fff;
  font-family: var(--font); font-weight: 600; letter-spacing: 0;
}
.plate__text {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

.plate--sm { width: 92px; height: 30px; font-size: 16px; }
.plate--sm .plate__eu { width: 12px; font-size: 8px; padding-bottom: 2px; }
.plate--sm.plate--name .plate__text { font-size: 14px; }
.plate--sm .plate__text--long { font-size: 12px !important; letter-spacing: 0.02em; }

.plate--md { width: 100%; height: 30px; font-size: 16px; }
.plate--md .plate__eu { width: 12px; font-size: 8px; padding-bottom: 2px; }
.plate--md.plate--name .plate__text { font-size: 14px; }

.plate--lg {
  width: 100%; height: 100px;
  border-width: 3px; border-radius: 10px;
  font-size: 52px; font-weight: 700;
  box-shadow: var(--plate-shadow);
}
.plate--lg .plate__eu { width: 40px; justify-content: space-between; padding: 12px 0 8px; font-size: 20px; }
.plate--lg .plate__text--long { font-size: 38px; }

.plate-hero { margin-top: 16px; }

/* ---------- Status ---------- */

.status {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status--overdue { color: var(--overdue); }
.status--missing { color: var(--muted); }
.status--soon { color: var(--soon); }
/* Snart: fylld klocka som en varningsskylt, syns mot ljus bakgrund */
.icon-soon { fill: var(--varsel); color: var(--asfalt); }
.status--ok { color: var(--muted); font-weight: 500; }

/* ---------- Listor (plana, 1 px avdelare, inga kort) ---------- */

.list > li:last-child > .row,
.list > li:last-child > .history-row,
.list > .settings-row:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 0;
  border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__title { font-size: 17px; font-weight: 600; }
.row__sub { font-size: 15px; color: var(--muted); }
.row__chevron { color: var(--muted); flex-shrink: 0; }
a.row:hover .row__title { text-decoration: underline; text-underline-offset: 3px; }

.history-row {
  display: grid; grid-template-columns: 86px minmax(0, 1fr); column-gap: 14px;
  min-height: 56px; padding: 12px 0;
  border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.history-row__date {
  font-family: var(--font-cond); font-weight: 600; font-size: 17px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.history-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history-row__what { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.history-row__note { font-size: 15px; overflow-wrap: anywhere; }
.history-row__vehicle { font-size: 15px; font-weight: 600; color: var(--muted); }
a.history-row:hover .history-row__what { text-decoration: underline; text-underline-offset: 3px; }

.link-row {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; margin-top: 6px;
  font-weight: 600; text-decoration: none;
}

.fold { margin-top: 24px; }
.fold summary, .more summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--muted);
}
.fold summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.fold[open] .fold__icon, .more[open] .fold__icon { transform: rotate(180deg); }

/* ---------- Fordonssidan ---------- */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: -12px; }
.topbar .back-link { margin: 0 0 0 -6px; }
.topbar .icon-btn { margin-right: -12px; }

.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.title-row .page-title { margin-bottom: 0; }
.title-row .icon-btn { margin-right: -12px; }

.pills--filter { margin: -6px 0 6px -2px; flex-wrap: wrap; overflow: visible; }
.pills {
  flex: 1; min-width: 0;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 2px 8px; margin: 0 0 0 -2px;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 16px;
  border: 2px solid var(--pill-border); border-radius: 24px;
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 500;
}
.pill[aria-current] { background: var(--eu-bla); border-color: var(--eu-bla); color: #fff; font-weight: 600; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--text); cursor: pointer;
}
.icon-btn:disabled { visibility: hidden; }

.vehicle-head { margin-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.vehicle-head__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vehicle-head__name h1 { font-size: 22px; font-weight: 600; }
.vehicle-head__meters {
  font-family: var(--font-cond); font-weight: 600; font-size: 30px; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.notes { margin-top: 16px; font-size: 15px; color: var(--muted); }
.vehicle-head__end { display: flex; flex-direction: column; align-items: flex-end; }
.vehicle-head__update {
  display: inline-flex; align-items: center; min-height: 48px; margin: -6px -4px -12px 0; padding: 0 4px;
  font-weight: 600; text-decoration: none;
}

.page-kicker { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.page-title--with-sub { margin-bottom: 2px; }
.page-sub { font-size: 16px; color: var(--muted); margin-bottom: 18px; }

/* ---------- Översikt: ett block per fordon ---------- */

.vblock { margin-top: 28px; }
.vblock__heading { font-size: inherit; font-weight: inherit; }
.vblock__head {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 4px 0 8px;
  color: inherit; text-decoration: none;
}
.vblock__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
a.vblock__head:hover .vblock__name { text-decoration: underline; text-underline-offset: 3px; }

.occ {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.occ:last-child { border-bottom: 1px solid var(--line); }
.occ__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.occ__what { font-size: 16px; overflow-wrap: anywhere; }
.occ__sub { font-size: 15px; color: var(--muted); }
.occ__date {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-cond); font-weight: 600; font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.occ__none { font-size: 15px; color: var(--muted); }
.occ--missing { color: var(--muted); }
.occ--missing .occ__what { font-size: 15px; font-weight: 600; }
.occ__icon { flex-shrink: 0; }
.occ__action {
  flex-shrink: 0; display: inline-flex; align-items: center;
  min-height: 48px; margin: -10px -4px -10px 0; padding: 0 4px;
  font-weight: 600; text-decoration: none;
}

/* ---------- Fyll i datum ---------- */

.fill-row { padding-bottom: 4px; }
.fill-row .field { margin-top: 18px; }
.fill-row__what { font-weight: 400; color: var(--muted); }
.fill-row.is-unknown .fill-row__date input,
.fill-row:has([data-unknown]:checked) .fill-row__date input { display: none; }
.check-row--compact { min-height: 48px; border: 0; padding: 4px 0; }

/* ---------- Historik ---------- */

.year-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 28px 0 4px;
  font-family: var(--font-cond); font-size: 26px; font-weight: 600;
}
.year-title__sum { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--muted); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 2px solid transparent; border-radius: 8px;
  background: none; color: inherit;
  font-size: 16px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.btn--block { display: flex; width: 100%; }
.btn--spaced { margin-top: 18px; }
.btn--primary {
  min-height: 58px; border-radius: 10px;
  background: var(--eu-bla); color: #fff; font-size: 18px;
}
.btn--primary:disabled { background: var(--box); color: var(--muted); cursor: not-allowed; }
.btn--outline { border-color: var(--link); color: var(--link); min-height: 56px; }
.btn--danger { border-color: var(--overdue); color: var(--overdue); min-height: 56px; }
.btn--quiet { min-height: 48px; padding: 0 8px; color: var(--link); }
.btn--quiet-danger { color: var(--overdue); }

.stack { margin-top: 14px; }
.danger-zone { margin-top: 40px; }

/* Uppgifter i rader (adminpanelen) */
.facts { margin: 16px 0 0; }
.facts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-size: 15px; color: var(--muted); }
.facts dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }

/* ---------- Formulär ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.field > label, .field > legend, .field > .label, .checks > legend {
  font-size: 16px; font-weight: 600; padding: 0;
}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  border: 2px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
}
textarea { padding: 12px; min-height: 80px; resize: vertical; line-height: 1.35; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input[type="date"] { display: block; -webkit-appearance: none; appearance: none; line-height: 48px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input[readonly] { background: transparent; border-color: var(--line); color: var(--muted); }
[aria-invalid="true"] { border-color: var(--overdue) !important; }

.meter-input {
  height: 64px;
  padding: 0 16px !important;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 36px !important;
  font-variant-numeric: tabular-nums;
}

.field-error { font-size: 15px; font-weight: 600; color: var(--overdue); }
.form-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 0 4px; padding: 14px 16px;
  border-radius: 10px; border: 2px solid var(--overdue);
  color: var(--overdue); font-weight: 600;
}
.form-alert svg { flex-shrink: 0; margin-top: 1px; }

/* Mätarna bredvid varandra */
.meters { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.meters > legend { font-size: 16px; font-weight: 600; padding: 0; }
.meters--two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.meters--two > legend { grid-column: 1 / -1; }
.meters__field { margin-top: 6px; }
.meters__field > label { font-size: 15px; font-weight: 500; color: var(--muted); }
.meters--two .meter-input { font-size: 30px !important; }

/* Valt fordon i Logga, en rad */
.vehicle-chosen { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: -6px; }
.vehicle-chosen__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.vehicle-chosen__change {
  display: inline-flex; align-items: center; min-height: 48px; margin-right: -4px; padding: 0 4px;
  font-weight: 600; text-decoration: none;
}

/* Fordonsvalet i Logga, 2x2 */
.vehicle-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vehicle-pick__item {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 80px; padding: 10px;
  border: 2px solid var(--pill-border); border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.vehicle-pick__item[aria-current] { border-color: var(--link); background: var(--selected-bg); }
.vehicle-pick__name { font-size: 17px; font-weight: 600; }

.info-text + .checks, .field + .checks { margin-top: 26px; }
.log-form > .info-text:first-of-type { margin-top: 26px; }
.checks { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.checks > legend { margin-bottom: 4px; }

.check-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 17px; cursor: pointer;
}
.check-item:last-child .check-row { border-bottom: 1px solid var(--line); }
.check-item.is-open:last-child .check-row { border-bottom: 0; }
.check-row--single { margin-top: 26px; border-bottom: 1px solid var(--line); }
.check-row input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--eu-bla); }
.check-row__label { flex: 1; min-width: 0; }
.check-row:has(input:checked) .check-row__label { font-weight: 600; }
.check-row:has(input:checked) .check-row__spec { font-weight: 400; }
.check-row__spec { display: block; font-size: 15px; color: var(--muted); }
.row__spec { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.tag--overdue { color: var(--overdue); }
.tag--soon { color: var(--soon); }

/* Ny sista dag visas när en fast-datum-uppgift kryssas i */
.due-box {
  display: none; flex-direction: column; gap: 8px;
  margin: 0 0 10px; padding: 16px;
  border-radius: 10px; background: var(--box);
}
.due-box > label { font-size: 16px; font-weight: 600; }
.check-item.is-open .due-box,
.check-item:has(> .check-row input:checked) .due-box { display: flex; }

.more { margin-top: 18px; border-top: 1px solid var(--line); }
.more .field { margin-top: 4px; margin-bottom: 8px; }

.choice { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.choice__option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.choice__option:last-of-type { border-bottom: 1px solid var(--line); }
.choice__option input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--eu-bla); }
.choice__option > span { display: flex; flex-direction: column; gap: 2px; font-size: 17px; }
.choice__option strong { font-weight: 600; }

/* Bara fälten för valt läge visas (utan :has visas båda, vilket också fungerar) */
.task-form:has(input[value="interval"]:checked) .mode-fields--fixed,
.task-form:has(input[value="fixed_date"]:checked) .mode-fields--interval { display: none; }

.inline-form { display: flex; gap: 10px; margin-top: 14px; }
.inline-form select { flex: 1; }
.inline-form .btn { min-height: 52px; }

.settings-row {
  display: flex; align-items: center; gap: 4px;
  min-height: 64px; border-top: 1px solid var(--line);
}
.settings-row__link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 0;
  color: inherit; text-decoration: none;
}
.settings-row__link > .row__title { min-width: 0; overflow-wrap: anywhere; }
span.settings-row__link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
a.settings-row__link:hover .row__title { text-decoration: underline; text-underline-offset: 3px; }
.settings-row__link--stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
/* Rad med text överst och knappar under (väntande inbjudningar) */
.settings-row--wrap { flex-wrap: wrap; }
.settings-row--wrap > .settings-row__link { flex-basis: 100%; min-height: 0; padding-bottom: 0; }
.row-actions { display: flex; gap: 8px; margin: 0 0 6px -8px; }
.subsection-title { margin: 24px 0 4px; font-size: 16px; font-weight: 600; color: var(--muted); }

/* ---------- Bekräftelse ---------- */

.flash {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; margin-bottom: 20px; padding: 12px 16px;
  border-radius: 10px;
  background: var(--klar); color: #fff;
  font-size: 17px; font-weight: 600;
}
.flash--error { background: var(--stopp); }
.flash svg { flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash-in 220ms ease-out; }
  @keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* ---------- Fast spara-knapp ovanför bottennavigeringen ---------- */

.savebar {
  position: fixed; left: 0; right: 0; z-index: 10;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 12px var(--gutter);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.savebar__inner { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; }

/* ---------- Bottennavigering ---------- */

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav-bg);
  border-top: 1px solid var(--line);
}
.bottomnav__inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center; height: var(--nav-h);
  max-width: var(--max); margin: 0 auto;
}
.bottomnav__tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px;
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.bottomnav__tab[aria-current] { color: var(--link); font-weight: 600; }
.bottomnav__tab--log { color: var(--text); }
.bottomnav__plus {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-top: -28px;
  border-radius: 50%;
  background: var(--eu-bla); color: #fff;
  box-shadow: 0 0 0 4px var(--nav-bg);
}
/* Platt när sidan har ett spara-fält, så att de två blå knapparna inte krockar */
.has-savebar .bottomnav__plus { width: 40px; height: 40px; margin-top: -16px; box-shadow: none; }

/* ---------- Inloggning ---------- */

.login { max-width: 360px; margin: 12vh auto 0; }
.login__form { margin-top: 28px; }
.login__about { display: flex; margin-top: 0; }

/* ---------- Startsidan (utloggad) ---------- */

.landing .page { max-width: 1120px; }

.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -12px; }
.lp-logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-cond); font-weight: 700; font-size: 26px; letter-spacing: 0.02em;
}
.lp-logo img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.lp-top__login { min-height: 48px; padding: 0 16px; }

/* Mobil: bilden kant i kant, texten under */
.lp-hero { margin: 12px calc(-1 * var(--gutter)) 0; }
.lp-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 80%; }
.lp-hero__text { padding: 22px var(--gutter) 0; }
.lp-hero__title {
  font-family: var(--font-cond); font-weight: 600; font-size: 46px; line-height: 1.02;
  text-wrap: balance;
}
.lp-hero__lede { margin-top: 12px; font-size: 18px; color: var(--muted); max-width: 34em; }
.lp-hero__cta { width: 100%; margin-top: 22px; }
.lp-note { margin-top: 12px; font-size: 15px; color: var(--muted); }

.lp-section { margin-top: 56px; }
.lp-h2 { font-family: var(--font-cond); font-weight: 600; font-size: 32px; line-height: 1.06; text-wrap: balance; }
.lp-h3 { margin: 0; font-size: 18px; font-weight: 600; }
.lp-text { margin-top: 6px; font-size: 17px; color: var(--muted); max-width: 34em; }
.lp-sub { margin-top: 4px; margin-bottom: 6px; }

.lp-steps { list-style: none; margin: 14px 0 0; padding: 0; }
.lp-steps__item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.lp-steps__num {
  flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--eu-bla); color: #fff;
  font-family: var(--font-cond); font-weight: 700; font-size: 20px;
}

.lp-feature { margin-top: 56px; }
.lp-feature__img, .lp-soon__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.lp-feature__text { margin-top: 18px; }

.lp-soon { list-style: none; margin: 14px 0 0; padding: 0; }
.lp-soon__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.lp-soon__item .lp-soon__img { flex-shrink: 0; width: 112px; border-radius: 8px; }
.lp-soon__item .lp-text { font-size: 16px; }

.lp-cta { margin-top: 64px; padding: 28px 22px; border-radius: 14px; background: var(--surface); }
.lp-cta__btn { width: 100%; margin-top: 20px; }

.lp-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 15px;
}

@media (min-width: 760px) {
  /* Dator: texten till vänster, bilden till höger. Text ovanpå bilden skulle hamna över bilen. */
  .lp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin: 24px 0 0; }
  .lp-hero picture { order: 2; }
  .lp-hero__img { aspect-ratio: 4 / 3; object-position: 70% 50%; border-radius: 16px; }
  .lp-hero__text { padding: 0; }
  .lp-hero__title { font-size: 60px; }
  .lp-hero__cta { width: auto; min-width: 220px; }
  .lp-text { font-size: 18px; }

  .lp-section { margin-top: 80px; }
  .lp-h2 { font-size: 38px; }
  .lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .lp-steps__item { flex-direction: column; }

  .lp-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 88px; }
  .lp-feature--flip .lp-feature__img { order: 2; }
  .lp-feature__text { margin-top: 0; }

  .lp-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
  .lp-soon__item { flex-direction: column; padding: 0; border-top: 0; }
  .lp-soon__item .lp-soon__img { width: 100%; border-radius: 12px; }

  .lp-cta { margin-top: 96px; padding: 40px 44px; }
  .lp-cta__btn { width: auto; min-width: 220px; }
}

/* ---------- Testmiljön (APP_ENV=dev) ---------- */

.env-badge {
  position: fixed; z-index: 100; top: env(safe-area-inset-top); left: 50%; transform: translateX(-50%);
  padding: 2px 12px; border-radius: 0 0 8px 8px;
  background: var(--varsel); color: var(--asfalt);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  pointer-events: none;
}

/* ---------- Större skärmar ---------- */

@media (min-width: 700px) {
  .page { padding-top: 40px; }
  .hero { font-size: 48px; }
}

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

/* Tomt garage: kortet "Lägg till ditt första fordon" */
.first-vehicle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 140px; margin-top: 24px; padding: 20px 16px;
  border: 2px dashed var(--link); border-radius: 10px;
  background: var(--surface);
  color: var(--link); text-decoration: none;
}
.first-vehicle:hover, .first-vehicle:focus-visible { border-style: solid; background: var(--selected-bg); }
.first-vehicle__plate { width: 150px; height: 38px; }
.first-vehicle__plate .plate__eu { width: 15px; }
.first-vehicle__text { font-size: 17px; font-weight: 600; }