/* Bildagboken — varm gradientbakgrund, frostade glaskort, en korallorange accent, tabbmeny längst ner */
:root {
  --ground: #E9E4DF;
  --glow-1: rgba(229, 158, 91, .55);
  --glow-2: rgba(231, 112, 38, .28);
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge: rgba(255, 255, 255, .85);
  --input: rgba(255, 255, 255, .8);
  --ink: #232221;
  --ink-2: #534e49;
  --ink-3: #6B635C;
  --line: rgba(35, 34, 33, .1);
  --accent: #E77026;
  --accent-ink: #ffffff;
  --accent-soft: rgba(231, 112, 38, .14);
  /* Orange text på ljus botten: mörkare än accenten, så att den går att läsa. */
  --accent-text: #AD4C17;
  --danger: #B93A24;
  --danger-soft: rgba(185, 58, 36, .1);
  --sage: #5E786F;
  --sage-soft: rgba(107, 133, 127, .16);
  --sand: #BFAE9E;
  --warn: #A86B0C;
  --warn-soft: rgba(201, 134, 27, .16);
  --track: rgba(35, 34, 33, .08);
  --car-glass: #5f6b70;
  --scrim: rgba(20, 16, 12, .38);
  --shadow: 0 10px 30px -12px rgba(90, 60, 30, .25);
  --f-display: "Urbanist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-card: 22px;
  --r-chip: 999px;
  color-scheme: light;
}
/* Mörkt läge: följer telefonen ("Automatiskt") om man inte valt Ljust eller Mörkt i appen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #171514;
    --glow-1: rgba(229, 158, 91, .16);
    --glow-2: rgba(231, 112, 38, .14);
    --glass: rgba(44, 40, 37, .62);
    --glass-strong: rgba(52, 47, 43, .94);
    --glass-edge: rgba(255, 255, 255, .07);
    --input: rgba(255, 255, 255, .06);
    --ink: #F1ECE6;
    --ink-2: #c3bab1;
    --ink-3: #958b81;
    --line: rgba(255, 255, 255, .09);
    --accent: #F08443;
    --accent-ink: #1b1209;
    --accent-soft: rgba(240, 132, 67, .16);
    --accent-text: #F08443;
    --danger: #F07A63;
    --danger-soft: rgba(240, 122, 99, .14);
    --sage: #8FAAA3;
    --sage-soft: rgba(143, 170, 163, .16);
    --sand: #8a7d71;
    --warn: #E0A443;
    --warn-soft: rgba(224, 164, 67, .15);
    --track: rgba(255, 255, 255, .08);
    --car-glass: #3c464b;
    --scrim: rgba(0, 0, 0, .55);
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #171514;
  --glow-1: rgba(229, 158, 91, .16);
  --glow-2: rgba(231, 112, 38, .14);
  --glass: rgba(44, 40, 37, .62);
  --glass-strong: rgba(52, 47, 43, .94);
  --glass-edge: rgba(255, 255, 255, .07);
  --input: rgba(255, 255, 255, .06);
  --ink: #F1ECE6;
  --ink-2: #c3bab1;
  --ink-3: #958b81;
  --line: rgba(255, 255, 255, .09);
  --accent: #F08443;
  --accent-ink: #1b1209;
  --accent-soft: rgba(240, 132, 67, .16);
  --accent-text: #F08443;
  --danger: #F07A63;
  --danger-soft: rgba(240, 122, 99, .14);
  --sage: #8FAAA3;
  --sage-soft: rgba(143, 170, 163, .16);
  --sand: #8a7d71;
  --warn: #E0A443;
  --warn-soft: rgba(224, 164, 67, .15);
  --track: rgba(255, 255, 255, .08);
  --car-glass: #3c464b;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* segmented control (Utseende) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--track); }
.seg button { border: 0; background: none; padding: 10px 6px; border-radius: 12px; font: 600 13.5px var(--f-body); color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow); }

/* car chips */
.car-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding-bottom: 2px; }
.car-chips::-webkit-scrollbar { display: none; }
.car-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink-2); font: 600 13px var(--f-body); padding: 8px 14px; border-radius: var(--r-chip); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.car-chips button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.car-chips button.add { color: var(--accent-text); border-color: transparent; background: var(--accent-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 85% 0%, var(--glow-1), transparent 70%),
    radial-gradient(50% 35% at 0% 30%, var(--glow-2), transparent 70%),
    radial-gradient(70% 40% at 60% 100%, var(--glow-1), transparent 70%);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.app {
  max-width: 480px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
}
.app.no-nav { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.loading { text-align: center; color: var(--ink-3); margin-top: 30vh; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-actions { display: flex; gap: 8px; }
.hello { min-width: 0; }
.hello small { display: block; color: var(--ink-3); font-size: 13px; }
.hello h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; text-wrap: balance; }
.icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); cursor: pointer; padding: 0;
}
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--ground); }

/* glass card */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}
.card h2 { margin: 0 0 12px; font-family: var(--f-display); font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-wrap: balance; }
.link { font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; position: relative; }
/* Textlänkar är små, men tryckytan är minst 44 punkter hög. */
.link::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.muted { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.empty { text-align: center; padding: 26px 12px; color: var(--ink-2); }
.empty b { display: block; font-family: var(--f-display); font-size: 17px; color: var(--ink); margin-bottom: 4px; }

/* activity card */
.toast { display: flex; gap: 12px; align-items: center; padding: 12px 14px; width: 100%; text-align: left; cursor: pointer; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 14px; background: var(--sage-soft); color: var(--sage); }
.avatar.me { background: var(--accent-soft); color: var(--accent-text); }
.avatar.sys { background: var(--warn-soft); color: var(--warn); }
.toast p { margin: 0; font-size: 14px; min-width: 0; }
.toast time { display: block; font-size: 12px; color: var(--ink-3); }
.new-pill { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-chip); background: var(--accent); color: var(--accent-ink); }

/* hero car */
.hero { padding: 16px 16px 14px; overflow: hidden; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hero-top h2 { margin: 0; font-size: 20px; display: block; }
.hero-top .sub { font-size: 13px; color: var(--ink-3); }
.plate { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; border: 1.5px solid var(--ink); white-space: nowrap; text-transform: uppercase; }
.car { display: block; width: 100%; max-width: 100%; height: auto; margin: 6px 0 4px; }
.car-pick { display: block; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.car-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.car-pick .cam {
  position: absolute; left: 10px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(20, 16, 12, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.row-actions { display: flex; align-items: center; gap: 10px; }
.link.danger { color: var(--danger); }
.car-fig { margin: 12px 0 8px; position: relative; }
.car-photo { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--track); }
.car-fig figcaption { position: absolute; right: 8px; bottom: 8px; }
.car-fig figcaption a { font-size: 10.5px; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 7px; border-radius: 999px; text-decoration: none; }
.odo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.odo-num { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.odo-num span { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.btn-soft { border: 0; cursor: pointer; font: 600 13px var(--f-body); color: var(--accent-text); background: var(--accent-soft); padding: 9px 14px; border-radius: var(--r-chip); white-space: nowrap; }

/* service gauge */
.facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fact .v { font-weight: 600; font-size: 14.5px; }
.fact .s { font-size: 13px; color: var(--ink-2); }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font-size: 12px; padding: 4px 9px; border-radius: var(--r-chip); background: var(--track); color: var(--ink-2); }

/* rows with icon + text + pill */
.rows { display: flex; flex-direction: column; }
.dl { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.dl:first-child { border-top: 0; padding-top: 0; }
.dl:last-child { padding-bottom: 0; }
.dl.as-btn { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.dl.as-btn:first-child { border-top: 0; }
.dl.as-btn > span { display: block; min-width: 0; }
.dl.as-btn > .dl-ic, .dl.as-btn > .avatar { display: grid; }
.dl .dl-t, .dl .dl-s { display: block; }
.dl-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--track); color: var(--ink-2); flex: none; }
.dl-t { font-weight: 600; font-size: 14.5px; }
.dl-s { font-size: 12.5px; color: var(--ink-3); }
.dl-v { font-family: var(--f-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-chip); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.soon { background: var(--warn-soft); color: var(--warn); }
.pill.urgent { background: var(--accent-soft); color: var(--accent-text); }
.pill.ok { background: var(--sage-soft); color: var(--sage); }
.pill.none { background: var(--track); color: var(--ink-3); }

/* economy */
.eco { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--glass-strong); border-radius: 16px; padding: 12px; min-width: 0; }
.stat .n { font-family: var(--f-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat .n small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 110px; padding-top: 6px; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.bar i { display: block; width: 100%; max-width: 30px; min-height: 3px; border-radius: 8px 8px 4px 4px; background: var(--sand); opacity: .6; }
.bar.now i { background: var(--accent); opacity: 1; }
.bar span { font-size: 11px; color: var(--ink-3); }
.bar b { font-size: 10.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tips */
.recs { display: flex; flex-direction: column; gap: 12px; }
.rec { display: grid; grid-template-columns: 6px 1fr; gap: 12px; }
.rec .sev { border-radius: 3px; background: var(--sage); }
.rec .sev.mid { background: var(--warn); }
.rec .sev.high { background: var(--accent); }
.rec b { display: block; font-size: 14.5px; font-weight: 600; }
.rec p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.ask { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ask small { color: var(--ink-3); font-size: 12px; flex: 1 1 160px; }

/* buttons */
.btn { border: 0; cursor: pointer; font: 600 15px var(--f-body); padding: 12px 18px; border-radius: var(--r-chip); background: var(--ink); color: var(--ground); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 140px; }

/* search */
.search {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px;
  border-radius: var(--r-chip); background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink-3);
}
.search:focus-within { border-color: var(--accent); }
.search input { border: 0; background: none; padding: 12px 0; flex: 1; min-width: 0; border-radius: 0; }
.search input:focus, .search input:focus-visible { outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { border: 0; background: var(--track); color: var(--ink-2); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.log-list { display: flex; flex-direction: column; gap: 14px; }

/* log list */
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; margin: 0 -2px; }
.filters::-webkit-scrollbar { display: none; }
/* Fler filter åt höger: kanten tonas ut så att man ser att raden går att svepa. */
.filters.more, .car-chips.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.filters button { flex: none; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink-2); font: 500 13px var(--f-body); padding: 8px 14px; border-radius: var(--r-chip); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.month { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink-3); margin: 6px 4px -4px; }
.entry { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; width: 100%; text-align: left; cursor: pointer; }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry:last-child { padding-bottom: 0; }
.entry > span { display: block; min-width: 0; }
.entry > .avatar, .entry > .dl-ic { display: grid; }
.entry .t { display: block; font-weight: 600; font-size: 14.5px; }
.entry .d { display: block; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.entry .m { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.who { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-chip); background: var(--sage-soft); color: var(--sage); }
.who.me { background: var(--accent-soft); color: var(--accent-text); }
.entry .amt { font-family: var(--f-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* car facts */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec div { background: var(--glass-strong); border-radius: 14px; padding: 11px 12px; min-width: 0; }
.spec .v { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }

/* forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field small { font-size: 12px; color: var(--ink-3); }
input, select, textarea {
  font: 16px var(--f-body); color: var(--ink);
  background: var(--input); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
/* Datum och tid: samma höjd som övriga fält även när de är tomma (iPhone krymper annars tomma fält). */
input[type="date"], input[type="time"] { height: 46px; line-height: 1.2; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; min-height: 44px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--input); font-size: 14px; cursor: pointer; }
/* Kryssknappar ser ut som filterknapparna: orange när de är valda, med en bock. */
.check { position: relative; user-select: none; -webkit-user-select: none; transition: background .15s, border-color .15s, color .15s; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink-3); flex: none; box-sizing: border-box; }
.check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.check:has(input:checked)::before { content: "✓"; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.section-t { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin: 6px 0 -4px; }
.err { color: var(--accent-text); font-size: 13.5px; margin: 0; }
.photo-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line); background: var(--input); cursor: pointer; color: var(--ink-2); font-size: 14px; }
.photo-in input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-in svg { color: var(--accent-text); flex: none; }
.photo { border-radius: 16px; width: 100%; display: block; }
.odo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--input); border: 1px solid var(--line); }
.odo-row b { font-family: var(--f-display); font-size: 18px; font-variant-numeric: tabular-nums; }
.big-input { font-family: var(--f-display); font-weight: 700; font-size: 26px; padding: 14px 16px; }
details.more { border-top: 1px solid var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent-text); list-style: none; padding: 4px 0; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " ▾"; }
details.more[open] summary::after { content: " ▴"; }
details.more > .form { margin-top: 12px; }
.item-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-radius: 16px; background: var(--input); border: 1px solid var(--line); }
.item-row > .row2, .item-row > .field { grid-column: 1 / -1; }
.item-row input { background: var(--glass-strong); }
.code { font-family: var(--f-display); font-weight: 800; font-size: 30px; letter-spacing: .14em; }

/* login */
.btn.google { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line); }

/* bottom nav */
.nav {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: 0;
  /* På iPhone ligger menyn strax ovanför hemstrecket i stället för en hel marginal ovanför. */
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) max(10px, calc(env(safe-area-inset-bottom, 0px) - 16px)) max(16px, env(safe-area-inset-left, 0px));
  display: flex; justify-content: center; pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  width: 100%; max-width: 448px; display: grid; grid-template-columns: 1fr 1fr 64px 1fr 1fr; align-items: center;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 26px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); padding: 6px;
}
.tab { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 11px var(--f-body); color: var(--ink-3); padding: 6px 0; border-radius: 18px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] svg { color: var(--accent-text); }
.fab { justify-self: center; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 10px 24px -8px var(--accent); margin-top: -22px; }

/* sheet */
.scrim { position: fixed; inset: 0; z-index: 8; background: var(--scrim); }
.sheet {
  position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px;
  max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 26px 26px 0 0;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet-head {
  display: flex; align-items: center; gap: 10px; margin: 0 -16px 14px; padding: 6px 16px 10px;
  position: sticky; top: -10px; z-index: 2; background: var(--glass-strong);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.sheet-head h3 { margin: 0; font-family: var(--f-display); font-size: 20px; flex: 1; min-width: 0; }
.sheet-head .icon-btn { width: 38px; height: 38px; }
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.types button { border: 1px solid var(--line); background: var(--input); border-radius: 18px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font: 500 13px var(--f-body); color: var(--ink); }
.types button svg { color: var(--accent-text); }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.detail-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.detail-list dt { color: var(--ink-3); font-size: 13.5px; }
.detail-list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* confirm dialog */
.confirm-scrim { position: fixed; inset: 0; z-index: 14; background: var(--scrim); }
.confirm {
  position: fixed; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 40px)); padding: 22px 20px 18px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 24px; box-shadow: var(--shadow);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.confirm h3 { margin: 0 0 8px; font-family: var(--f-display); font-size: 20px; text-wrap: balance; }
#confirm-body p { margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }
#confirm-body p.warn { color: var(--ink-3); font-size: 13px; margin-top: 10px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.btn.solid-danger { background: var(--danger); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .confirm:not([hidden]) { animation: pop .18s ease-out; }
  @keyframes pop { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
}

/* fuel gauge */
.fuel-card { padding-bottom: 14px; }
.fuel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fuel-head h2 { margin: 0; }
.fuel-now { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.fuel-now small { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.fuel-now.low { color: #C8432B; }
.fuel-now.mid { color: #B7791F; }
.fuel-now.ok { color: #3F8A55; }
input[type="range"].fuel-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 14px; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #D9472F 0%, #E8A33A 45%, #5BAE6B 100%); cursor: pointer; margin: 6px 0 0;
}
input[type="range"].fuel-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
input[type="range"].fuel-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
input[type="range"].fuel-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* Etiketterna står exakt under reglagets nio lägen (knoppens mitt går från 15 px in till 15 px före slutet). */
.fuel-ticks { position: relative; height: 16px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.fuel-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.fuel-ticks span:nth-child(1) { left: 15px; } .fuel-ticks span:nth-child(2) { left: calc(15px + (100% - 30px) * .125); }
.fuel-ticks span:nth-child(3) { left: calc(15px + (100% - 30px) * .25); } .fuel-ticks span:nth-child(4) { left: calc(15px + (100% - 30px) * .375); }
.fuel-ticks span:nth-child(5) { left: 50%; } .fuel-ticks span:nth-child(6) { left: calc(15px + (100% - 30px) * .625); }
.fuel-ticks span:nth-child(7) { left: calc(15px + (100% - 30px) * .75); } .fuel-ticks span:nth-child(8) { left: calc(15px + (100% - 30px) * .875); }
.fuel-ticks span:nth-child(9) { left: calc(100% - 15px); }
.fuel-ticks .minor { font-weight: 500; opacity: .7; font-size: 10.5px; top: 1px; }
.fuel-meta { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* rad överst när nätet saknas */
.net-pill {
  position: fixed; z-index: 21; left: 50%; transform: translateX(-50%);
  top: calc(6px + env(safe-area-inset-top, 0px));
  max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ink); color: var(--ground); border-radius: 999px; padding: 6px 14px;
  font: 600 12.5px var(--f-body); box-shadow: var(--shadow); pointer-events: none;
}
.net-pill.syncing { background: var(--sage); color: #fff; }

/* toast message */
.toast-msg {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--ground); border-radius: 16px; padding: 12px 16px;
  font-size: 14px; box-shadow: var(--shadow);
  /* Släpp igenom tryck, så att knapparna under meddelandet fungerar medan det syns. */
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) { animation: up .25s ease-out; }
  .toast-msg:not([hidden]) { animation: drop .25s ease-out; }
  @keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes drop { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}
.tire-head { font-weight: 700; font-size: 14.5px; margin: 10px 0 -4px; padding-top: 12px; border-top: 1px solid var(--line); }
.tire-head .tire-on { color: var(--accent-text); font-weight: 600; }
/* Ingen nivå angiven: knoppen syns svagt tills man drar i den. */
input[type="range"].fuel-range.unset::-webkit-slider-thumb { opacity: .35; }
input[type="range"].fuel-range.unset::-moz-range-thumb { opacity: .35; }
/* Blir det en ruta över på sista raden tar den hela bredden. */
.eco .stat:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- dator */
/* Telefonlayouten ovan gäller överallt. På breda skärmar flyttar menyn till vänster
   och korten läggs i två kolumner, så att sidan använder bredden. */
.fab-label, .nav-logo, .tab-wide { display: none; }

/* Surfplatta på höjden: menyn ligger kvar längst ner, men korten får två kolumner. */
@media (min-width: 760px) and (max-width: 899px) {
  .app:not(.no-nav) { max-width: 880px; gap: 14px; }
  .app[data-screen="view-oversikt"],
  .app[data-screen="view-bilen"],
  .app[data-screen="view-installningar"] { display: block; columns: 2; column-gap: 14px; }
  .app[data-screen="view-oversikt"] > *,
  .app[data-screen="view-bilen"] > *,
  .app[data-screen="view-installningar"] > * { break-inside: avoid; margin: 0 0 14px; }
  .app[data-screen] > .top,
  .app[data-screen] > .car-chips,
  .app[data-screen] > .card.toast,
  .app[data-screen] > p.hint { column-span: all; }
  .app[data-screen="view-ekonomi"] { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .app[data-screen="view-ekonomi"] > .top,
  .app[data-screen="view-ekonomi"] > .hint { grid-column: 1 / -1; }
  .app[data-screen="view-logg"],
  .app[data-screen="view-aviseringar"] { max-width: 680px; }
}

@media (min-width: 900px) {
  :root { --side: 232px; }

  /* Sidomeny */
  .nav {
    top: 0; bottom: 0; right: auto; width: var(--side);
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px 20px;
    align-items: flex-start;
  }
  .nav-inner {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    max-width: none; padding: 10px; border-radius: 24px;
  }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    font-size: 15px; padding: 11px 14px; border-radius: 14px;
  }
  .tab:hover { background: var(--accent-soft); color: var(--ink); }
  .tab[aria-current="page"] { background: var(--accent-soft); }
  .fab {
    order: -1; width: 100%; height: 48px; border-radius: 16px; margin: 0 0 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font: 600 15px var(--f-body); box-shadow: 0 8px 20px -10px var(--accent);
  }
  .fab svg { width: 20px; height: 20px; }
  .fab-label { display: inline; }
  .nav-logo { display: block; order: -2; width: 150px; height: auto; margin: 6px auto 12px; }
  .tab-wide { display: flex; }
  .tab-sep { margin-top: 10px; position: relative; }
  .tab-sep::before { content: ""; position: absolute; left: 8px; right: 8px; top: -6px; border-top: 1px solid var(--line); }

  /* Innehållet: centrerat i ytan till höger om menyn */
  .app:not(.no-nav) {
    max-width: 1080px;
    margin-left: calc(var(--side) + max(0px, (100vw - var(--side) - 1080px) / 2));
    margin-right: 0;
    padding: 28px 28px 48px;
    gap: 16px;
  }
  .hello h1 { font-size: 30px; }

  /* Översikt, Bilen och Inställningar: korten i två kolumner */
  .app[data-screen="view-oversikt"],
  .app[data-screen="view-bilen"],
  .app[data-screen="view-installningar"] {
    display: block; columns: 2; column-gap: 16px;
  }
  .app[data-screen="view-oversikt"] > *,
  .app[data-screen="view-bilen"] > *,
  .app[data-screen="view-installningar"] > * {
    break-inside: avoid; margin: 0 0 16px;
  }
  .app[data-screen] > .top,
  .app[data-screen] > .car-chips,
  .app[data-screen] > .card.toast,
  .app[data-screen] > p.hint { column-span: all; }

  /* Ekonomi: siffrorna och fördelningen bredvid varandra */
  .app[data-screen="view-ekonomi"] { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .app[data-screen="view-ekonomi"] > .top,
  .app[data-screen="view-ekonomi"] > .hint { grid-column: 1 / -1; }

  /* Logg och aviseringar är listor och läses bäst lagom breda */
  .app[data-screen="view-logg"],
  .app[data-screen="view-aviseringar"] { max-width: 760px; }

  /* Formulär öppnas som en ruta mitt på skärmen i stället för underifrån */
  .sheet {
    top: 50%; bottom: auto; left: calc(50% + var(--side) / 2); right: auto;
    transform: translate(-50%, -50%); width: min(540px, calc(100vw - var(--side) - 48px));
    max-width: none; max-height: 86vh; border-radius: 26px; box-shadow: var(--shadow);
    padding-bottom: 24px;
  }
  .sheet .grab { display: none; }
  .sheet { padding-top: 0; }
  .sheet-head { top: 0; padding-top: 14px; }
  .confirm { left: calc(50% + var(--side) / 2); }
  .toast-msg { left: calc(50% + var(--side) / 2); bottom: 24px; }
  /* Aviseringar och Inställningar finns i sidomenyn, så ikonerna uppe till höger behövs inte. */
  .top-actions { display: none; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) { animation: pop .2s ease-out; }
}
#sheet-title:focus { outline: none; }
@media (min-width: 900px) {
  .tab { position: relative; }
  .tab .badge { position: static; margin-left: auto; border: 0; }
}
/* Slitage på underhållspunkter: hur stor del av intervallet som har gått. */
.wear { display: block; height: 6px; border-radius: 3px; background: var(--track); margin-top: 7px; overflow: hidden; }
.wear i { display: block; height: 100%; border-radius: 3px; background: var(--sage); }
.wear.soon i { background: var(--warn); }
.wear.urgent i { background: var(--accent); }
/* Fält med platsknapp */
.geo-row { display: flex; gap: 8px; align-items: stretch; }
.geo-row input { flex: 1; }
.geo-btn { flex: none; width: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.geo-btn.busy svg { animation: geo-pulse 1s ease-in-out infinite; }
@keyframes geo-pulse { 50% { opacity: .35; } }
.chip-btn { border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 500 13px var(--f-body); padding: 7px 12px; border-radius: var(--r-chip); cursor: pointer; }
.ask .btn-soft { max-width: 100%; }

/* Mätarställningens ålder */
.odo-age { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.odo-age.old { color: var(--accent-text); font-weight: 600; }

/* Mindre bild på bilen i mobilen, så att mer syns direkt */
@media (max-width: 759px) {
  .hero .car { max-height: 110px; width: auto; margin: 2px auto 0; }
  .hero .car-photo { aspect-ratio: 21 / 9; }
  .hero .car-fig { margin: 8px 0 6px; }
}

/* Förslag medan man skriver i "Var" och "Adress" */
.suggest { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--input); }
.suggest button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 14px; cursor: pointer; font: 400 14px var(--f-body); color: var(--ink); }
.suggest button:first-child { border-top: 0; }
.suggest button:hover, .suggest button:focus-visible { background: var(--accent-soft); }
.suggest button span { font-size: 12.5px; color: var(--ink-3); }
.suggest .hint { padding: 10px 14px; }

/* Tillbaka-pilen i vyernas rubrik: samma knapp som i formulären, till vänster om rubriken. */
.top.has-back { justify-content: flex-start; }
.top .back-btn { width: 38px; height: 38px; align-self: flex-end; margin-bottom: 2px; }
@media (min-width: 900px) { .top .back-btn { display: none; } }

/* Underhållspunkten man tryckte på */
.item-row.focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Logga in med Apple: svart knapp (vit i mörkt läge), enligt Apples riktlinjer */
.btn.apple { background: #000; color: #fff; border: 1px solid #000; }
:root[data-theme="dark"] .btn.apple, :root[data-theme="natt"] .btn.apple { background: #fff; color: #000; border-color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .btn.apple { background: #fff; color: #000; border-color: #fff; } }

/* Ekonomi: bläddra mellan månader och år */
.eco-nav { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; }
.eco-nav .icon-btn { width: 38px; height: 38px; }
.eco-nav .icon-btn:disabled { opacity: .3; cursor: default; }
.eco-nav-t { text-align: center; }
.eco-nav-t h2 { margin: 2px 0 0; justify-content: center; }
.eco-big { text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 40px; line-height: 1.1; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.eco-big small { font-size: 16px; font-weight: 600; color: var(--ink-3); }
/* Årets tolv staplar: högre stapel, dyrare månad. Tryck för att välja månaden. */
.year-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 130px; margin-top: 14px; }
.ybar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.ybar i { display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--sand); opacity: .7; min-height: 0; }
.ybar i.zero { background: var(--track); opacity: 1; height: 3px !important; }
.ybar.sel i { background: var(--accent); opacity: 1; }
.ybar span { font-size: 11px; color: var(--ink-3); font-weight: 600; order: 2; }
.ybar.sel span { color: var(--accent-text); }
.ybar:disabled { cursor: default; opacity: .4; }

/* "Det här gjordes": ikryssad rad visar åtgärd och position */
#work-rows { display: flex; flex-direction: column; gap: 6px; }
.work-row { border-radius: 14px; }
.work-row .w-opts { display: none; flex-wrap: wrap; gap: 6px; padding: 6px 4px 8px 34px; }
.work-row:has(.w-on:checked) .w-opts { display: flex; }
.w-act { display: flex; flex-wrap: wrap; gap: 4px; }
.w-act label { position: relative; }
.w-act input { position: absolute; opacity: 0; pointer-events: none; }
.w-act span { display: inline-block; padding: 5px 10px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--input); font: 500 12.5px var(--f-body); color: var(--ink-2); cursor: pointer; }
.w-act input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.w-act input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Positioner: flera kan väljas, egen rad under åtgärden */
.w-sides { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.w-sides label { position: relative; }
.w-sides input { position: absolute; opacity: 0; pointer-events: none; }
.w-sides span { display: inline-block; padding: 5px 10px; border-radius: var(--r-chip); border: 1px dashed var(--line); background: transparent; font: 500 12.5px var(--f-body); color: var(--ink-2); cursor: pointer; }
.w-sides input:checked + span { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.w-sides input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.w-add { margin-top: 10px; }
/* Hjulen som bilen sedd uppifrån: fram överst, bak under */
.w-sides.corners { display: grid; grid-template-columns: repeat(2, max-content); }

/* Liten karta i bokningen. Hela kartan är en knapp som öppnar valet av kartapp. */
.bk-map { position: relative; height: 150px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--track); margin-top: -4px; }
.bk-map-inner, .bk-map-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bk-map-open { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; }
.bk-map-open span { display: inline-flex; align-items: center; gap: 5px; background: var(--glass-strong); color: var(--accent-text); border: 1px solid var(--glass-edge); border-radius: var(--r-chip); padding: 5px 10px; font: 600 12.5px var(--f-body); box-shadow: var(--shadow); }
#map-choice { z-index: 21; }
#map-choice-scrim { z-index: 20; }
#map-choice .btn { text-align: center; text-decoration: none; }
/* Långa rubriker i rutorna kortas efter två rader. Hela rubriken finns som title. */
#sheet-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Ångra i meddelandet längst ner */
.toast-msg > span { flex: 1; min-width: 0; }
.toast-undo { pointer-events: auto; flex: none; border: 0; background: none; color: var(--accent); font: 700 14px var(--f-body); padding: 8px 4px; margin: -8px -4px; cursor: pointer; }
/* I dag / I går under datumfältet */
.date-quick { display: flex; gap: 8px; margin-top: -6px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; text-decoration: none; }
.chip-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
/* Snabbknappar under en bokning */
.row-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 10px 52px; }
/* Bild i en post: tryck för större */
.photo-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-zoom img { display: block; }
.lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .92); display: flex; }
.lb-scroll { flex: 1; overflow: auto; display: grid; place-items: center; touch-action: pinch-zoom pan-x pan-y; -webkit-overflow-scrolling: touch; padding: calc(60px + env(safe-area-inset-top, 0px)) 8px calc(20px + env(safe-area-inset-bottom, 0px)); }
.lb-scroll img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-in; }
.lb-scroll img.zoomed { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.lb-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 41; }
/* Intervall med enhet (år eller månader) */
.unit-row { display: flex; gap: 8px; }
.unit-row input { flex: 1; min-width: 0; }
.unit-row select { flex: none; width: 84px; }
.log-sum b { color: var(--ink); font-weight: 600; }
/* Budget: stapel och text under månadens summa */
/* Jämförelse med året innan */
.delta { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.delta.up { color: var(--accent-text); }
.delta.down { color: var(--sage); }
/* Att göra */
.todos { display: flex; flex-direction: column; }
.todo { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; }
.todo:first-child { border-top: 0; }
/* Samma fyrkantiga kryssruta som i formulären */
.todo .box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; box-sizing: border-box; }
.todo input:checked + .box { background: var(--accent); border-color: var(--accent); }
.todo input:checked + .box::after { content: "✓"; color: var(--accent-ink); font-size: 12px; font-weight: 800; line-height: 1; }
.todo input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.todo-t { font-size: 14.5px; overflow-wrap: anywhere; }
.todo small { font-size: 11.5px; color: var(--ink-3); }
.todo.done .todo-t { text-decoration: line-through; color: var(--ink-3); }
.todo-add { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.todo-add input { flex: 1; min-width: 0; min-height: 50px; font-size: 16px; }
.todo-btn { flex: none; width: 50px; border: 0; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; cursor: pointer; }
/* Läs av kvitto */
.receipt-btn { position: relative; cursor: pointer; }
.receipt-btn.busy { opacity: .7; pointer-events: none; }
.steps { margin: 8px 0 6px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.steps li { margin: 3px 0; }
/* Servicebok: syns bara vid utskrift */
#print-root { display: none; }
@media print {
  @page { margin: 16mm 14mm; }
  body > *:not(#print-root) { display: none !important; }
  body { background: #fff !important; color: #111; }
  body::after { display: none; }
  #print-root { display: block; font: 10.5pt/1.4 var(--f-body); color: #111; }
  .pb-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
  .pb-head h1 { font: 700 22pt var(--f-display); margin: 0; }
  .pb-head p { margin: 2px 0 0; }
  .pb-date { text-align: right; font-size: 9pt; color: #555; }
  .pb h2 { font: 700 13pt var(--f-display); margin: 18px 0 6px; }
  .pb table { width: 100%; border-collapse: collapse; }
  .pb-facts { width: auto !important; }
  .pb-facts th { text-align: left; font-weight: 500; color: #555; padding: 2px 18px 2px 0; }
  .pb-table th { text-align: left; font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom: 1px solid #999; padding: 4px 6px 4px 0; }
  .pb-table td { border-bottom: 1px solid #ddd; padding: 5px 6px 5px 0; vertical-align: top; }
  .pb-table tr { break-inside: avoid; }
  .pb-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 1.5px solid #111; }
  .pb .r { text-align: right; white-space: nowrap; }
  .pb small { color: #555; }
}

/* Budgetraden i Ekonomi: rubrik och Ändra som i korten */
/* Rensa sökningen: större tryckyta än själva knappen */
.search-clear { position: relative; }
.search-clear::after { content: ""; position: absolute; inset: -9px; }
/* Välj kort på Översikt */
.card-order { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-row .check { flex: 1; }
.icon-btn.sm { width: 40px; height: 40px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
/* Fält som fylldes i från ett kvitto */
.from-receipt { border-color: var(--sage) !important; background: var(--sage-soft) !important; }
/* Bilder i datumordning */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pg { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--track); cursor: pointer; }
.pg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-wait { position: absolute; inset: 0; background: var(--track); }
.pg-d { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .5); padding: 1px 6px; border-radius: 999px; }
/* Delad servicebok */
.share-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.share-url { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.todo-add select { flex: none; width: auto; max-width: 40%; }
.shared-book { overflow-x: auto; }
.shared-book .pb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.shared-book .pb-head h1 { font: 700 24px var(--f-display); margin: 0; }
.shared-book .pb-head p { margin: 2px 0 0; }
.shared-book .pb-date { text-align: right; font-size: 12px; color: var(--ink-3); }
.shared-book h2 { font: 700 16px var(--f-display); margin: 18px 0 6px; display: block; }
.shared-book table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.shared-book .pb-facts { width: auto; }
.shared-book .pb-facts th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 2px 16px 2px 0; }
.shared-book .pb-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 4px 6px 4px 0; }
.shared-book .pb-table td { border-bottom: 1px solid var(--line); padding: 6px 6px 6px 0; vertical-align: top; }
.shared-book .pb-table tfoot td { font-weight: 700; border-bottom: 0; }
.shared-book .r { text-align: right; white-space: nowrap; }
.shared-book small { color: var(--ink-3); }

/* Loggen lite tätare: mindre ikon och luft, samma textstorlek */
.entry > .dl-ic, .entry > .avatar { width: 34px; height: 34px; border-radius: 10px; }
.entry > .avatar { border-radius: 50%; }
.entry .m { margin-top: 2px; }
.log-list { gap: 10px; }
.log-list .card { padding-top: 12px; padding-bottom: 12px; }
/* Anteckningar om bilen */
.notes p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }

/* Bilden och bränslestapeln bredvid varandra */
.hero-media { display: flex; gap: 12px; align-items: stretch; margin: 8px 0 6px; }
.hero-media .car-pick { flex: 1; min-width: 0; }
.hero-media .car-fig { margin: 0; }
.car-wait { aspect-ratio: 16 / 9; }
.fuel-col { flex: none; width: 38px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fuel-end { font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1; }
.fuel-v { position: relative; flex: 1; min-height: 80px; width: 26px; border-radius: 13px; background: var(--track); overflow: hidden; cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.fuel-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fuel-v i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 13px 13px; background: #3F8A55; transition: height .08s linear; }
.fuel-v.mid i { background: #C9922B; }
.fuel-v.low i { background: #C8432B; }
.fuel-v.unset i { background: transparent; }
.fuel-v b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.fuel-v.unset b { color: var(--ink-3); text-shadow: none; }
.fuel-v.low b { bottom: auto; top: 6px; color: var(--ink-2); text-shadow: none; }
@media (max-width: 759px) {
  .hero-media .car-fig, .hero-media .car-photo { margin: 0; }
}
/* Kompakt bilkort: bild och bränsle överst, mätarställning och bilen på en rad under */
.hero { padding: 12px 12px 12px; }
.hero-media { margin: 0 0 10px; }
.hero .odo { align-items: center; padding-top: 10px; gap: 10px; }
.odo-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.hero .odo-num { font-size: 26px; display: inline-flex; align-items: baseline; }
.hero .odo-num svg { align-self: center; margin-left: 4px; color: var(--ink-3); }
.hero .odo-age { display: block; margin-top: 0; }
.hero-car { text-align: right; min-width: 0; }
.hero-name { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.hero-name b { font-family: var(--f-display); font-size: 16px; font-weight: 700; }
.hero-car .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fuel-name { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
/* Bilens namn och regnummer överst i kortet, på en rad */
.hero > .hero-car { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; margin-bottom: 10px; }
.hero > .hero-car .hero-name { justify-content: flex-start; }
.hero > .hero-car .sub { margin-top: 0; text-align: right; white-space: nowrap; }
.hero .odo > .odo-age { text-align: right; }
/* Däck: när frågan om vilka däck är dold tar mönsterdjupet hela raden */
#ef-tire-row:has(#ef-tirekind-box[hidden]) { grid-template-columns: 1fr; }
/* Bilkortet, alternativ D: bilden i full bredd och två rutor under */
.hero .car-pick .car-fig { margin: 0; }
.hero .car-photo { aspect-ratio: 21 / 9; }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.hero-tile { background: var(--glass-strong); border-radius: 16px; padding: 11px 12px; min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 0; text-align: left; color: inherit; font: inherit; }
button.hero-tile { cursor: pointer; }
.hero-tile .odo-num { font-size: 22px; }
.hero-tile .odo-age { display: block; margin: 0; }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fuel-pct { font: 800 18px var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.fuel-pct.ok { color: #3F8A55; } .fuel-pct.mid { color: #B7791F; } .fuel-pct.low { color: #C8432B; }
.fuel-h { position: relative; height: 26px; margin-top: 6px; border-radius: 10px; background: var(--track); cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.fuel-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fuel-h i { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #C8432B, #C9922B 35%, #3F8A55 70%); }
.fuel-h.unset i { background: transparent; }
.fuel-thumb { position: absolute; top: 3px; bottom: 3px; width: 8px; margin-left: -4px; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; }
.fuel-h.unset .fuel-thumb { opacity: .5; left: 50% !important; }
.fuel-ends { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
@media (min-width: 760px) { .hero .car-photo { aspect-ratio: 16 / 9; } }
/* Plusmenyn i grupper */
.types-head { margin: 14px 2px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.types-head:first-of-type { margin-top: 0; }
/* Bilder från loggen inne i kortet Bilder och dokument */
.photos-part { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Två kolumner där korten fylls på i den kortaste kolumnen (ersätter CSS-kolumner) */
@media (min-width: 760px) {
  .app[data-screen="view-oversikt"], .app[data-screen="view-bilen"], .app[data-screen="view-installningar"] { display: flex; flex-direction: column; columns: auto; }
  .app[data-screen] > .mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin: 0; }
  .mcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .mcol > * { margin: 0 !important; }
}
@media (min-width: 900px) {
  .app[data-screen] > .mgrid, .mcol { gap: 16px; }
}
/* Dator: menyn och innehållet centreras tillsammans, så att menyn står bredvid kolumnerna */
@media (min-width: 900px) {
  :root { --offset: max(0px, (100vw - var(--side) - 1080px) / 2); }
  .nav { left: var(--offset); }
  .app:not(.no-nav) { margin-left: calc(var(--offset) + var(--side)); }
}
/* Telefon på tvären: håll menyn och innehållet utanför skåran för kamera och Face ID */
@media (min-width: 900px) {
  .nav { width: calc(var(--side) + env(safe-area-inset-left, 0px)); padding-left: calc(20px + env(safe-area-inset-left, 0px)); overflow-y: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .app:not(.no-nav) {
    margin-left: calc(var(--offset) + var(--side) + env(safe-area-inset-left, 0px));
    padding-right: max(28px, calc(env(safe-area-inset-right, 0px) + 12px));
  }
}
/* Låg skärm (telefon på tvären): kompaktare meny så att allt får plats på höjden */
@media (min-width: 900px) and (max-height: 520px) {
  .nav { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
  .nav-logo { display: none; }
  .fab { height: 40px; margin-bottom: 4px; }
  .tab { padding: 7px 12px; font-size: 14px; }
  .tab-sep { margin-top: 6px; }
}
/* Ekonomi: samma kolumner som de andra sidorna (korten läggs i kortaste kolumnen) */
@media (min-width: 760px) {
  .app[data-screen="view-ekonomi"] { display: flex; flex-direction: column; grid-template-columns: none; }
}
/* Bakgrundens färgtoning: exakt skärmens storlek, egen ritning, så att den inte får en kant när telefonen vrids */
body::after { inset: auto; top: 0; left: 0; width: var(--vw, 100vw); height: var(--vh, 100vh); transform: translateZ(0); }
@supports (height: 100lvh) { body::after { height: max(var(--vh, 100vh), 100lvh); } }
/* Att göra och Anteckningar: kategorier */
.todo-add { display: block; }
.todo-row { display: flex; gap: 8px; align-items: stretch; }
.todo-row input { flex: 1; min-width: 0; min-height: 50px; font-size: 16px; }
/* Datum och tid i samma fält */
input[type="datetime-local"] { height: 46px; line-height: 1.2; }
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
/* Bokning: stort datumfält och tidsknappar */
.big-date { min-height: 52px; font-size: 17px; }
.time-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.time-pick .chip-btn { min-height: 42px; min-width: 64px; justify-content: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.time-other { position: relative; cursor: pointer; }
.time-other.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.time-other input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
/* Snurrhjul för tid, i Apples stil */
.wheel { position: relative; display: flex; justify-content: center; align-items: center; height: 200px; margin-top: 8px; border-radius: 16px; background: var(--input); border: 1px solid var(--line); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%); }
.wheel-band { position: absolute; left: 10px; right: 10px; top: 80px; height: 40px; border-radius: 10px; background: var(--track); pointer-events: none; }
.wheel-col { position: relative; z-index: 1; height: 200px; width: 76px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none; }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }
.wheel-pad { height: 80px; }
.wheel-item { height: 40px; line-height: 40px; scroll-snap-align: center; font: 500 22px var(--f-body); color: var(--ink-3); font-variant-numeric: tabular-nums; cursor: pointer; transition: color .15s; }
.wheel-item.sel { color: var(--ink); font-weight: 600; }
.wheel-sep { position: relative; z-index: 1; font: 600 22px var(--f-body); color: var(--ink); padding: 0 2px; }
/* Reglage som i iOS (Heldag) */
.ios-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 4px; font-size: 15px; color: var(--ink); cursor: pointer; }
input.ios-switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 16px; cursor: pointer;
  background: radial-gradient(circle 13.5px at 15.5px 50%, #fff 92%, transparent 100%) no-repeat, #E3E2E0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); transition: background-color .2s; }
input.ios-switch:checked { background: radial-gradient(circle 13.5px at calc(100% - 15.5px) 50%, #fff 92%, transparent 100%) no-repeat, #34C759; }
input.ios-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bilder från loggen: vad bilden hör till och datum */
.pg-d { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 14px 7px 5px; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; text-align: left; }
.pg-d b { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Välkomstsidan: förhandsvisning av appen, rubrik och inloggning */
.lp { position: relative; margin: 6px 8px 10px; }
.lp-card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 20px; box-shadow: var(--shadow); padding: 12px; transform: rotate(-2deg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.lp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.lp-name { display: flex; align-items: center; gap: 8px; }
.lp-name b { font: 700 15px var(--f-display); }
.lp-top small { font-size: 11px; color: var(--ink-3); }
.lp-scene { position: relative; height: 104px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #f2b27e 0%, #efc9a5 50%, #7c6f66 51%, #4a433f 100%); }
.lp-body { position: absolute; left: 14%; right: 14%; bottom: 20%; height: 30%; background: #26262a; border-radius: 30px 52px 10px 10px; }
.lp-body::after { content: ""; position: absolute; left: 22%; right: 30%; top: -48%; height: 62%; background: #34343a; border-radius: 36px 52px 0 0; }
.lp-tyre { position: absolute; bottom: 11%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #111; border: 3px solid #6b6b6b; }
.lp-tyre.l { left: 22%; } .lp-tyre.r { right: 22%; }
.lp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lp-tiles .odo-num { font-size: 18px; }
.lp-tiles .fuel-pct { font-size: 15px; }
.lp-tiles .fuel-h { height: 16px; cursor: default; }
.lp-note { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; margin: -8px 14px 0 22px; padding: 10px 12px; background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 16px; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.lp-note .dl-ic { width: 36px; height: 36px; border-radius: 10px; }
.lp-note b { display: block; font-size: 14px; }
.lp-note small { display: block; font-size: 12px; color: var(--ink-3); }
/* Dra kort i ordning */
.card-row { position: relative; border-radius: 999px; transition: transform .18s ease; }
.card-row.dragging { z-index: 2; transition: none; background: var(--glass-strong); box-shadow: 0 10px 24px -8px rgba(0,0,0,.3); }
.drag-handle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); cursor: grab; touch-action: none; border-radius: 12px; }
.drag-handle:active { cursor: grabbing; color: var(--ink); }
.drag-handle:focus-visible { outline: 2px solid var(--accent); }
/* Flytta kort direkt på sidan (som iPhones hemskärm) */
[data-card] { -webkit-touch-callout: none; }
body.arranging [data-card] { -webkit-user-select: none; user-select: none; animation: jiggle .32s ease-in-out infinite alternate; cursor: grab; }
body.arranging [data-card]:nth-of-type(2n) { animation-delay: -.16s; animation-duration: .36s; }
body.arranging [data-card] * { pointer-events: none; }
body.arranging [data-card].lifted { animation: none; z-index: 30; position: relative; box-shadow: 0 24px 48px -16px rgba(0,0,0,.35); cursor: grabbing; transition: none; scale: 1.03; }
@keyframes jiggle { from { rotate: -0.6deg; } to { rotate: 0.6deg; } }
@media (prefers-reduced-motion: reduce) { body.arranging [data-card] { animation: none; outline: 2px dashed var(--accent); outline-offset: 2px; } }
.arrange-bar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top, 0px)); width: min(440px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--ink); color: var(--ground); box-shadow: var(--shadow); font-size: 14px; }
.arrange-bar .btn { padding: 9px 18px; }
@media (min-width: 900px) { .arrange-bar { left: calc(50% + var(--side) / 2); } }

/* Kom igång */
.start-step .step-n, .dl.as-btn > .step-n { width: 28px; height: 28px; justify-self: center; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 700 13.5px var(--f-body); flex: none; }
.start-step.done .step-n { background: var(--sage-soft); color: var(--sage); }
.start-step.done .dl-t { color: var(--ink-3); text-decoration: line-through; }
/* Lika stort mellanrum mellan menyn och korten som mellan kolumnerna */
@media (min-width: 900px) {
  .app:not(.no-nav) { padding-left: 0; }
}
/* Telefon på tvären: ingen rubrik (Hej, Logg, Ekonomi …), menyn visar redan var man är */
@media (min-width: 900px) and (max-height: 520px) {
  .app:not(.no-nav) > .top { display: none; }
  .app:not(.no-nav) { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
}

.hi-desk { display: none; }
@media (min-width: 900px) and (min-height: 521px) { .hi-mobile { display: none; } .hi-desk { display: inline; } }
/* Pillret och tiden på rubrikraden (används på smala kolumner) */
.pill-in, .dl-when, .t-short { display: none; }
.fuel-pct { white-space: nowrap; }
/* Kameraskåran sitter bara på ena sidan när telefonen ligger ner */
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
:root[data-notch="right"] { --safe-l: 0px; }
:root[data-notch="left"] { --safe-r: 0px; }
/* Telefon på tvären: mindre meny, korten använder bredden, luftigare rader */
@media (min-width: 900px) and (max-height: 520px) {
  :root { --side: 188px; }
  .nav { width: calc(var(--side) + var(--safe-l)); padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px calc(10px + var(--safe-l)); }
  .nav-inner { padding: 8px; gap: 2px; border-radius: 20px; }
  .tab { gap: 10px; padding: 6px 10px; font-size: 13.5px; border-radius: 12px; }
  .tab svg { width: 20px; height: 20px; }
  .fab { height: 38px; font-size: 14px; border-radius: 13px; }
  .fab svg { width: 18px; height: 18px; }
  .app:not(.no-nav) {
    margin-left: calc(var(--offset) + var(--side) + var(--safe-l));
    padding-right: calc(14px + var(--safe-r));
    max-width: none;
  }
  /* Pillret först i textraden, så att texten får hela bredden */
  .dl:has(> .pill-out) { grid-template-columns: 40px minmax(0, 1fr); }
  .dl > .pill-out { display: none !important; }
  /* Rubriken till vänster, pillret och tiden uppe till höger */
  .dl .dl-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .dl-tt { min-width: 0; }
  .dl-when { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; align-self: center; }
  .pill-in { display: inline-block; font-size: 11.5px; padding: 2px 8px; }
  .when-t { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
  .sub-when, .t-long { display: none; }
  .t-short { display: inline; }
  .dl-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-quick { flex-wrap: nowrap; }
  /* Bilkortet: regnummer och namn på en rad, år och drivmedel under, lägre bild */
  .hero > .hero-car { flex-wrap: wrap; gap: 4px 10px; }
  .hero > .hero-car .hero-name { flex-wrap: nowrap; }
  .hero > .hero-car .hero-name b { white-space: nowrap; }
  .hero > .hero-car .sub { flex-basis: 100%; text-align: left; }
  .hero .car { max-height: 120px; width: auto; margin: 0 auto; display: block; }
  .hero .car-photo { aspect-ratio: 21 / 8; }
}

/* Sidomenyn börjar i höjd med första kortet (räknas ut i appen) */
@media (min-width: 900px) {
  /* Rubrikraden: 22 + 46 + 12 px, plus mellanrummet 16 px = 96 px. På en låg skärm (på tvären) finns ingen rubrik. */
  .nav { padding-top: calc(96px + env(safe-area-inset-top, 0px)) !important; }
}
@media (min-width: 900px) and (max-height: 520px) {
  .nav { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
}

/* Dator: logotypen överst till vänster i stället för hälsningen, och inte i menyn */
.brandbar { display: none; }
@media (min-width: 900px) and (min-height: 521px) {
  .nav:not([hidden]) ~ .brandbar {
    display: block; position: absolute; z-index: 5; top: calc(22px + env(safe-area-inset-top, 0px));
    left: calc(var(--offset) + 20px + env(safe-area-inset-left, 0px)); pointer-events: none;
  }
  .brandbar img { display: block; width: 190px; height: auto; margin-top: 4px; }
  .nav .nav-logo { display: none; }
  /* Rubriken (Översikt, Logg …) på samma rad som logotypen, och korten börjar på samma höjd på alla flikar */
  .app:not(.no-nav) { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .app:not(.no-nav) > .top { height: 46px; margin-bottom: 12px; }
  .app:not(.no-nav) > .top .hello small { display: none; }
  .app:not(.no-nav) > .top .hello h1 { font-size: 28px; line-height: 46px; white-space: nowrap; }
}

/* Fler teman: Grönt och Hav (ljusa), Natt (mörkt) */
:root[data-theme="gron"] {
  --ground: #E1E8DE;
  --glow-1: rgba(120, 176, 118, .5);
  --glow-2: rgba(38, 122, 74, .24);
  --ink: #1E2420;
  --ink-2: #48524B;
  --ink-3: #5C6960;
  --line: rgba(30, 36, 32, .1);
  --accent: #2E7D4F;
  --accent-ink: #ffffff;
  --accent-soft: rgba(46, 125, 79, .14);
  --accent-text: #22603C;
  --sage: #4F7A6A;
  --sage-soft: rgba(79, 122, 106, .16);
  --track: rgba(30, 36, 32, .08);
  --shadow: 0 10px 30px -12px rgba(40, 80, 50, .25);
}
:root[data-theme="hav"] {
  --ground: #E0E7EF;
  --glow-1: rgba(104, 162, 226, .5);
  --glow-2: rgba(37, 99, 235, .2);
  --ink: #1D232B;
  --ink-2: #48515D;
  --ink-3: #5C6674;
  --line: rgba(29, 35, 43, .1);
  --accent: #2563EB;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 99, 235, .13);
  --accent-text: #1C4FC0;
  --track: rgba(29, 35, 43, .08);
  --shadow: 0 10px 30px -12px rgba(30, 60, 110, .24);
}
:root[data-theme="natt"] {
  --ground: #12131C;
  --glow-1: rgba(124, 108, 240, .2);
  --glow-2: rgba(56, 189, 248, .12);
  --glass: rgba(36, 38, 56, .62);
  --glass-strong: rgba(42, 44, 64, .95);
  --glass-edge: rgba(255, 255, 255, .07);
  --input: rgba(255, 255, 255, .06);
  --ink: #ECEBF5;
  --ink-2: #BEBCD4;
  --ink-3: #8F8CA9;
  --line: rgba(255, 255, 255, .09);
  --accent: #8B7CF6;
  --accent-ink: #120F24;
  --accent-soft: rgba(139, 124, 246, .18);
  --accent-text: #AB9FFA;
  --danger: #F07A63;
  --danger-soft: rgba(240, 122, 99, .14);
  --sage: #8FB3AA;
  --sage-soft: rgba(143, 179, 170, .16);
  --sand: #7d7a95;
  --warn: #E0A443;
  --warn-soft: rgba(224, 164, 67, .15);
  --track: rgba(255, 255, 255, .08);
  --car-glass: #3a3f52;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* Välj tema: rutor med en liten förhandsvisning */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--input); color: var(--ink); font: 600 13px var(--f-body); cursor: pointer; }
.theme-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.theme-sw { width: 44px; height: 30px; border-radius: 9px; position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); }
.theme-sw i { position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; }

/* Flyttläget: kryss uppe till vänster som döljer kortet */
body.arranging [data-card] { position: relative; }
.card-hide {
  position: absolute; z-index: 3; top: -8px; left: -8px; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink-2); color: var(--ground); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  pointer-events: auto !important;
}
.card-hide svg { pointer-events: none; }
[data-card].card-gone { transition: opacity .18s, scale .18s; opacity: 0; scale: .9; }
/* Bilknapparna, nyhetsrutan och tipsraderna: samma avstånd till korten som allt annat (ingen extra marginal) */
@media (min-width: 760px) {
  .app[data-screen] > .car-chips { margin: 0 -2px; }
  .app[data-screen] > .card.toast, .app[data-screen] > p.hint { margin-bottom: 0; }
}

/* På gång: grupperat efter när, med en liten rubrik för varje tidpunkt */
.koll { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.koll-head { display: flex; align-items: center; gap: 8px; margin: 8px 0 -2px; font: 700 11.5px var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.koll-head:first-child { margin-top: 0; }
.koll-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.koll-head.urgent { color: var(--accent-text); }
.koll-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: var(--track); }
.koll-row.urgent { background: var(--accent-soft); }
.koll-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
div.koll-main { cursor: default; }
.koll-t { font: 600 15px var(--f-body); }
.koll-s { font-size: 13px; color: var(--ink-3); }
.koll-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line); cursor: pointer; padding: 0; text-decoration: none; }
.koll-tile { flex: none; width: 46px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-2); margin-right: 2px; }
.koll-tile b { font: 800 19px/1.05 var(--f-display); color: var(--ink); }
.koll-tile small { font: 700 10px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; }
.koll-tile.kt-month b { font-size: 15px; }
.koll-row.urgent .koll-tile { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.koll-row.urgent .koll-tile b, .koll-row.urgent .koll-tile small { color: var(--accent-ink); }

/* Loggen: datumbricka, ikon, text och belopp */
.entry.log-row { grid-template-columns: 44px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; }
.entry.log-row:first-child { padding-top: 0; }
.entry.log-row:last-child { padding-bottom: 0; }
.entry.log-row > .koll-tile { display: flex; margin: 0; width: 44px; min-height: 44px; }
.entry.log-row > .dl-ic { width: 36px; height: 36px; border-radius: 11px; }
.entry.log-row .t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry.log-row .d { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.entry.log-row .d .who { margin-right: 2px; }
.entry.log-row .d b { color: var(--ink-2); }
.entry.log-row .d b.hot-t { color: var(--accent-text); }
.koll-tile.hot { background: var(--accent); border-color: var(--accent); }
.koll-tile.hot b, .koll-tile.hot small { color: var(--accent-ink); }
.entry.log-row > .dl-ic.hot { background: var(--accent-soft); color: var(--accent-text); }
.entry.log-row .chev { color: var(--ink-3); font-weight: 500; }
.log-month { display: flex; justify-content: space-between; align-items: baseline; }
.log-month span { font-family: var(--f-body); font-weight: 600; font-size: 13px; }

/* Översikten för ägaren */
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-stats .n { font: 700 24px var(--f-display); }
.admin-feat { display: grid; grid-template-columns: minmax(0, 1fr) 90px 60px; gap: 10px; align-items: center; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--line); }
.admin-feat:first-child { border-top: 0; }
.admin-feat .wear { margin: 0; }
.admin-feat b { text-align: right; font-size: 13px; }
.admin-house { padding: 12px 0; border-top: 1px solid var(--line); }
.admin-house:first-child { border-top: 0; padding-top: 0; }
.admin-user { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-top: 6px; font-size: 14px; }
.admin-user small { color: var(--ink-3); font-size: 12.5px; }

/* Inställningar: hushållet med namn, medlemmar och inbjudan i ett kort */
.hh-title { display: flex; align-items: center; gap: 8px; }
.hh-title h2 { margin: 0; flex: 1; min-width: 0; }
.hh-edit { width: 36px; height: 36px; flex: none; }
.hh-me { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.hh-pen { color: var(--ink-3); display: inline-flex; }
.hh-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--track); }
.hh-grow { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh-code { font: 800 22px var(--f-display); letter-spacing: .12em; }
.hh-invite .btn-soft { white-space: nowrap; }
.hh-ghost { flex: none; border: 1px solid var(--line); background: none; color: var(--ink-2); font: 600 13.5px var(--f-body); padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }

/* Det här gjordes: bara det som är tillagt, med menyer för vad och var */
#work-rows { display: flex; flex-direction: column; gap: 8px; }
.work-row { display: flex; align-items: center; gap: 8px 6px; padding: 10px 6px 10px 14px; border-radius: 14px; background: var(--track); }
.w-name { flex: 1; min-width: 0; font: 600 14.5px var(--f-body); }
.work-row { flex-wrap: wrap; }
.w-name { flex: 1 1 130px; }
.w-sel { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.work-row select { width: auto; max-width: 100%; flex: none; min-height: 34px; height: 34px; padding: 0 28px 0 12px; border-radius: 999px; font: 600 13px var(--f-body); background-color: var(--input); border: 1px solid var(--line); color: var(--ink); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; }
.work-row .w-del { margin-left: -2px; }
.w-del { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.w-add { margin-top: 10px; }
#w-searchbox { position: relative; }
.w-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.w-chips:empty { display: none; }
.w-sug-l { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }
.w-chip { border: 1px solid var(--line); background: var(--input); color: var(--ink-2); font: 600 12.5px var(--f-body); padding: 6px 11px; border-radius: 999px; cursor: pointer; }

/* Logotypen som vektor: mörk text i ljusa teman, ljus text i mörka */
.logo-d { display: none !important; }
:root[data-theme="dark"] .logo-l, :root[data-theme="natt"] .logo-l { display: none !important; }
:root[data-theme="dark"] .logo-d:not(.nav-logo), :root[data-theme="natt"] .logo-d:not(.nav-logo) { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-l { display: none !important; }
  :root:not([data-theme]) .logo-d:not(.nav-logo) { display: block !important; }
}

/* Inloggningssidan: logotyp, rubrik, tre fördelar och knapparna längst ner */
.login-a { max-width: 420px; width: 100%; margin: 0 auto; min-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; padding: 12px 4px 8px; }
.la-brand { margin: 0; }
.la-brand img { width: 200px; height: auto; display: block; }
.la-title { margin: 30px 0 0; font: 800 34px/1.08 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.la-sub { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.la-feats { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.la-f { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; }
.la-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.la-f b { display: block; font: 600 15.5px var(--f-body); }
.la-f small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.la-btns { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.la-btns .btn { margin: 0; min-height: 52px; font-size: 16px; }
.la-legal { margin: 6px 0 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.la-legal a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
@media (min-width: 900px) { .login-a { min-height: 0; padding-top: 8vh; } .la-btns { margin-top: 0; } }

/* Notiser: val per typ */
.push-kinds { margin-top: 8px; display: flex; flex-direction: column; }
.push-kind { border-top: 1px solid var(--line); padding: 10px 0; }
.push-kind:first-child { border-top: 0; }
.push-kind b { display: block; font: 600 15px var(--f-body); }
.push-kind small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }

/* Bokning: datum och tid på en rad, tiden öppnar ett litet hjul */
.dt-row { display: flex; gap: 8px; align-items: stretch; }
.dt-row input[type=date] { flex: 1; min-width: 0; }
.dt-time { flex: none; min-width: 92px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--input); color: var(--ink); font: 600 16px var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.dt-time.open { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent) inset; }
.dt-pop { margin-top: 8px; padding: 4px 10px 10px; border-radius: 16px; background: var(--input); border: 1px solid var(--line); }
.dt-pop .ios-switch-row { min-height: 40px; padding: 4px 2px; }
.wheel.compact { height: 120px; margin-top: 4px; background: none; border: 0; }
.wheel.compact .wheel-col { height: 120px; }
.wheel.compact .wheel-pad { height: 40px; }
.wheel.compact .wheel-band { top: 40px; }
.wheel.compact .wheel-item { font-size: 20px; }

/* Loggformulär med datum framåt i tiden: förslag att boka i stället */
.future-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 14px; color: var(--ink); }
#cf-bes-out.warn { color: var(--warn, #b45309); }
/* Med tangentbordet uppe: rutan står ovanför det, med rundade hörn och utan extra luft längst ner. */
.sheet.kb { border-radius: 26px; padding-bottom: 16px; }

/* Bränsle: en stapel med procenten i, röd när tanken är tom och grön när den är full. */
.fuel-tile { gap: 8px; }
.fuel-e { position: relative; height: 34px; margin-top: auto; border-radius: 17px; background: var(--track); overflow: hidden; cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
.fuel-e:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fuel-e i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 17px; transition: width .08s linear, background .15s; }
.fuel-ic { position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; z-index: 1; pointer-events: none; }
.fuel-e.unset .fuel-ic { color: var(--ink-3); }
.fuel-val { position: absolute; left: 31px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; font: 800 15px var(--f-display); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; pointer-events: none; }
.fuel-val.out { color: var(--ink); }
.fuel-e.unset .fuel-val { font: 600 12.5px var(--f-body); color: var(--ink-3); }
.fuel-e em { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); pointer-events: none; }