/* ===== Garage: "Onderhoudsboekje" (Material 3, 60/30/10) =====
   60% base: warm paper-grey backgrounds. 30% sage: cards, selected chips, the top of a list.
   10% racing green: buttons, the active tab, links; what you should look at.
   Red and amber are reserved for status (overdue, due soon) and never used as an accent.
   The values come from the colour lab (OKLCH tones); all text colours: WCAG AA or better. */
@font-face { font-family: "Roboto"; src: url("fonts/roboto-400-500-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("fonts/roboto-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --bg: #FDFAF5;            /* 60: page */
  --bg-2: #F6F3EE;          /* 60: raised a step (menus, hover) */
  --card: #E6EFEA;          /* 30: sage card */
  --card-2: #EAE5E0;        /* a surface inside a card */
  --line: #D5D0CA;
  --line-2: #857F77;        /* field and button outlines: 3.9:1 */
  --text: #1E1A15;
  --muted: #5D5750;         /* 6.0:1 on a card */
  --dim: #857F77;
  --accent: #1E6B47;        /* 10: racing green, white on it 6.5:1 */
  --accent-2: #1E6B47;      /* the accent as text */
  --accent-soft: #CEDED5;
  --ok: #1E6B47; --ok-soft: #CEDED5;
  --warn: #8A5A00; --warn-soft: #FFDDB3;
  --bad: #BA1A1A; --bad-soft: #FFDAD6;
  --r: 16px; --r-sm: 12px; --r-field: 4px;
  --shadow: none;           /* depth from surface steps, not shadows */
  --float: 0 2px 6px rgba(30,26,21,.12), 0 8px 24px rgba(30,26,21,.10);  /* only what floats: menus, dialogs */
  --bar: #FDFAF5; --bar-text: #1E1A15; --bar-muted: #5D5750; --bar-line: #D5D0CA; --bar-hover: rgba(30,26,21,.08);
  --field: transparent;
  --glass: rgba(253,250,245,.92);
  --on-accent: #FFFFFF;
  --button: #1E6B47; --button-hover: #185A3B;
  --link: #1E6B47;
  --state: rgba(30,26,21,.08);   /* hover layer */
  /* each part of the app has its own earthy colour (icons, their tint, the charts of that page); never red or
     amber, those mean overdue and due soon. Text never wears these. All 3:1 or more on their own tint. */
  --sec-maint: #1E6B47; --sec-money: #2F5D9A; --sec-fuel: #66681C; --sec-docs: #7A4A7E; --sec-specs: #0E6E86; --sec-neutral: #55606B;
  --c: var(--accent);
  --notice-error: #93000A; --notice-ok: #162C21; --notice-warn: #5C3B00;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}

/* Dark theme: own, chosen values (no automatically inverted colours) */
:root[data-dark] {
  --bg: #110F0C;
  --bg-2: #181613;
  --card: #19201C;
  --card-2: #292622;
  --line: #403C37;
  --line-2: #847F79;
  --text: #EEEBE6;
  --muted: #B5B0AA;
  --dim: #847F79;
  --accent: #408963;        /* dark text on it */
  --accent-2: #81CAA1;
  --accent-soft: #333D38;
  --ok: #81CAA1; --ok-soft: #333D38;
  --warn: #F2C14E; --warn-soft: rgba(242,193,78,.14);
  --bad: #FFB4AB; --bad-soft: rgba(255,180,171,.12);
  --float: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  --bar: #110F0C; --bar-text: #EEEBE6; --bar-muted: #B5B0AA; --bar-line: #403C37; --bar-hover: rgba(238,235,230,.08);
  --field: transparent;
  --glass: rgba(25,32,28,.9);
  --on-accent: #141414;
  --button: #408963; --button-hover: #4E9A72;
  --link: #81CAA1;
  --state: rgba(238,235,230,.08);
  --sec-maint: #81CAA1; --sec-money: #9DB8EC; --sec-fuel: #C9C77A; --sec-docs: #D2A6D6; --sec-specs: #6FC3DA; --sec-neutral: #A9B4BE;
  --notice-error: #FFDAD6; --notice-ok: #D4E7DC; --notice-warn: #FFDDB3;
  color-scheme: dark;
}
.sec-maint { --c: var(--sec-maint); }
.sec-money { --c: var(--sec-money); }
.sec-fuel { --c: var(--sec-fuel); }
.sec-docs { --c: var(--sec-docs); }
.sec-specs { --c: var(--sec-specs); }
.sec-neutral { --c: var(--sec-neutral); }

/* Smooth transition when switching (only while switching, not on every page change) */
html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease,
              fill .6s ease, stroke .6s ease, outline-color .6s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition, html.theme-transition * { transition: none !important; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* also when a class sets 'display' */
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible { outline-color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--font); letter-spacing: .01em;
  font-feature-settings: "tnum";
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font); margin: 0 0 .4em; line-height: 1.25; letter-spacing: 0; font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 400; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
strong, b, th { font-weight: 500; }  /* Roboto is bundled with 400 and 500 only: never a faked bold */
small, .muted { color: var(--muted); }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* ----- layout ----- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bar);
  border-bottom: 1px solid var(--bar-line); }
.topbar .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.topbar :focus-visible { outline-color: var(--bar-text); }
.logo { display: flex; align-items: center; gap: 12px; color: var(--bar-text); font-weight: 400; font-size: 1.375rem; }
.logo:hover { color: var(--bar-text); text-decoration: none; }
.logo-mark { width: 36px; height: 36px; display: block; border-radius: 12px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--bar-muted); height: 40px; padding: 0 16px; border-radius: 20px; display: flex; gap: 8px; align-items: center; font-weight: 500;
  transition: background-color .15s, color .15s; }
.nav a:hover { color: var(--bar-text); background: var(--bar-hover); text-decoration: none; }
.nav a.active { color: var(--text); background: var(--accent-soft); }
main.wrap { padding-top: 28px; padding-bottom: 80px; }
.header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.header p { margin: 0; }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); margin-bottom: 14px; font-size: .9rem; }
.section { margin-top: 40px; }
.section > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.section > h2 .i { color: var(--c); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; align-items: start; }

/* ----- cards ----- */
/* Material 3 filled card: the sage 30% surface, no border and no shadow */
.card { background: var(--card); border: 0;
  border-radius: var(--r); padding: 20px; box-shadow: none; }

/* ----- buttons (Material 3: filled, outlined; 40px high, a full pill) ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px;
  border-radius: 20px; border: 1px solid transparent; font: inherit; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  background: var(--button); color: var(--on-accent); transition: background-color .15s, border-color .15s, transform .1s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--button-hover); color: var(--on-accent); text-decoration: none; }
.btn:active { transform: scale(.98); }
/* the second button (Material 3 tonal): sage with dark green text, clearly a button but lighter than the main one */
.btn.ghost { background: var(--accent-soft); color: var(--notice-ok); border-color: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--notice-ok) 10%, var(--accent-soft)); color: var(--notice-ok); }
/* a link in running text: underlined, so you see it between grey text */
:is(p, small, li, dd, td, .notice) a:not(.btn):not(.chip):not(.tile) { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .15s; }
:is(p, small, li, dd, td, .notice) a:not(.btn):not(.chip):not(.tile):hover { text-decoration-color: currentColor; }
.notice a:not(.btn) { color: inherit; }
/* a hint card: a feature you would not find otherwise, with a short explanation and one action */
.hint { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin: 0 0 16px; border-radius: var(--r); background: var(--card); }
.hint-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.hint-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.hint-text strong { font-weight: 500; }
.hint-text small { font-size: .875rem; }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.small { height: 36px; padding: 0 16px; font-size: .875rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--bad); cursor: pointer; }
.btn.danger-solid { background: var(--bad); color: #fff; }
.btn.danger-solid:hover { background: color-mix(in srgb, var(--bad) 85%, #000); color: #fff; }

/* ----- navigation without reloading (app.js navigation): a thin bar at the top while the next page loads ----- */
html.is-loading { cursor: progress; }
html.is-loading body::before { content: ""; position: fixed; top: 0; left: 0; z-index: 100; height: 3px; width: 100%;
  background: var(--accent); transform-origin: left; animation: loading 1.2s ease-out .15s both; }
@keyframes loading { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { html.is-loading body::before { animation: none; transform: scaleX(.6); } }

/* ----- confirmation dialog (app.js askConfirm) instead of the browser's confirm() ----- */
.confirm-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0;
  border-radius: 28px; background: var(--bg-2); color: var(--text); box-shadow: var(--float); }
.confirm-dialog::backdrop { background: rgba(0,0,0,.32); }
.confirm-dialog p { margin: 0 0 20px; line-height: 1.5; }
.confirm-dialog .actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ----- forms ----- */
label, .field-header { display: block; font-size: .8125rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.field { margin-bottom: 18px; }
input[type=text], input:not([type]), input[type=number], input[type=date], input[type=search], input[type=password],
input[type=email], input[type=tel], select, textarea {
  width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r-field); border: 1px solid var(--line-2);
  background: var(--field); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; padding: 12px 16px; resize: vertical; }
select[multiple] { height: auto; padding: 6px; }
/* Material 3 outlined field: focus is a 2px border in the accent (the second pixel as an inset shadow, so nothing shifts) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
select option { background: var(--bg); color: var(--text); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
/* a unit inside the field (km after, € before): the field says what it holds, the label stays short */
.affix { position: relative; }
.affix .unit { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.affix input { padding-right: 48px; }
.affix.pre .unit { left: 16px; right: auto; }
.affix.pre input { padding-left: 34px; padding-right: 16px; }
.form-card { max-width: 760px; padding: 24px; }
.header .plate { margin-bottom: 10px; }
.search-bar { display: flex; gap: 10px; }
.search-bar input { flex: 1; }
.checkbox { display: flex; gap: 10px; align-items: center; color: var(--text); font-weight: 500; cursor: pointer; margin: 0; }
input[type=checkbox] { accent-color: var(--c); width: 18px; height: 18px; }
.upload { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border: 1px dashed var(--line-2);
  border-radius: var(--r); color: var(--muted); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.upload:hover, .upload.dragover { border-color: var(--accent); background: var(--state); }
.upload .i { width: 28px; height: 28px; color: var(--c); }
.upload input { display: none; }
label.upload { font-size: .95rem; font-weight: 400; margin: 0; }
.i.accent { color: var(--c); }
.rdw-block { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px 20px; }
.rdw-info { flex: 1; min-width: 260px; }
.rdw-info p { margin: 4px 0 0; font-size: .88rem; }
.rdw-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.rdw-history .card { padding: 16px 20px; }
.rdw-history p { font-size: .9rem; }
.rdw-list { list-style: none; margin: 0; padding: 0; }
.rdw-list > li { padding: 10px 0; border-top: 1px solid var(--line); }
.rdw-list ul { margin: 4px 0 0; padding-left: 20px; font-size: .9rem; }
.recall { border-top: 1px solid var(--line); padding: 10px 0; }
.recall summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-weight: 500; }
.recall summary .chip { flex: none; }
.recall p { margin: 8px 0 0; }
.stat small + small, .stat strong + small { display: block; font-size: .75rem; }
.notice.read-result:not(.visible) { display: none; }
.interval-table td:first-child { font-weight: 500; }
.interval-table .default { color: var(--muted); font-size: .8rem; display: block; margin-top: 2px; }
.interval-table input { height: 38px; max-width: 160px; }
.upload strong { color: var(--text); }

/* multi-select dropdown */
.dropdown { position: relative; }
.dropdown summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 40px 6px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-field); background: var(--field); cursor: pointer; flex-wrap: wrap; position: relative; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.dropdown[open] summary { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dropdown[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.dropdown .placeholder { color: var(--dim); padding-left: 4px; }
.dropdown .panel { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg-2);
  border: 0; border-radius: var(--r-sm); padding: 8px; box-shadow: var(--float); animation: menu-in .18s var(--ease); }
.dropdown .panel input[type=search] { height: 38px; margin-bottom: 6px; }
.dropdown ul { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; columns: 2 220px; column-gap: 6px; }
.dropdown li label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text);
  font-weight: 500; margin: 0; cursor: pointer; break-inside: avoid; }
.dropdown li label:hover { background: var(--state); }

/* ----- license plate (Dutch plate) ----- */
/* the yellow plate is the one place yellow appears in the app; as wide as its text, never stretched */
.plate { display: inline-flex; align-items: stretch; width: max-content; max-width: 100%; flex: none; align-self: flex-start;
  border-radius: 4px; overflow: hidden; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: .04em; font-size: .875rem; line-height: 1; box-shadow: 0 0 0 1.5px #111; }
.plate::before { content: "NL"; background: #1F3FA0; color: #fff; font-family: var(--font); font-size: .55em; padding: 0 4px; display: flex;
  align-items: flex-end; padding-bottom: 3px; letter-spacing: 0; }
.plate span { background: #F7D117; color: #111; padding: 5px 8px; }
.plate.large { font-size: 1.125rem; }

/* ----- chips & badges ----- */
/* Material 3 assist/filter chip: 8px corners. "In order" stays calm (an outline), only overdue and due soon get colour */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: .8125rem; font-weight: 500;
  background: transparent; border: 1px solid var(--line); color: var(--muted); transition: background-color .15s, border-color .15s; }
.chip.accent { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--notice-warn); }
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--notice-error); }
.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--notice-ok); }

/* ----- notices ----- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 20px;
  border: 0; }
.notice .i { margin-top: 2px; }
.notice.error { background: var(--bad-soft); color: var(--notice-error); }
.notice.ok { background: var(--ok-soft); color: var(--notice-ok); }
.notice.warn { background: var(--warn-soft); color: var(--notice-warn); }
.notice p { margin: 0; }

/* ----- garage (overview) ----- */
.garage { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
/* a vehicle: the photo on a studio backdrop (wall and floor in two neutral steps), then name, status and plate */
.vehicle-card { display: block; color: inherit; background: var(--card); border: 0; border-radius: var(--r);
  overflow: hidden; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.vehicle-card::after { content: ""; position: absolute; inset: 0; background: var(--text); opacity: 0; transition: opacity .15s; pointer-events: none; }
.vehicle-card:hover { color: inherit; text-decoration: none; transform: translateY(-3px); box-shadow: var(--float); }
.vehicle-card:hover::after { opacity: .05; }
.vehicle-card:active::after { opacity: .1; }
.vehicle-card .image { aspect-ratio: 16/10; margin: 8px 8px 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--bg-2) 64%, var(--line) 64.5%, var(--bg-2) 100%);
  display: grid; place-items: center; position: relative; }
.vehicle-card .image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vehicle-card .image > .i { width: 64px; height: 64px; color: var(--dim); stroke-width: 1.2; }
.vehicle-card .info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.vehicle-card .title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vehicle-card h3 { font-size: 1.0625rem; margin: 0; min-width: 0; }
.vehicle-card .meta { display: flex; gap: 8px 16px; color: var(--muted); font-size: .8125rem; flex-wrap: wrap; align-items: center; }
.vehicle-card .meta > span:not(.plate) { display: inline-flex; gap: 6px; align-items: center; }
.new-card { display: grid; place-items: center; min-height: 240px; border: 1px dashed var(--line-2); border-radius: var(--r);
  color: var(--muted); text-align: center; transition: color .15s, background-color .15s; }
.new-card:hover { color: var(--accent-2); background: var(--state); text-decoration: none; }
.new-card .i { width: 36px; height: 36px; margin-bottom: 8px; }
.empty { text-align: center; padding: 60px 20px; }
.empty > .i { width: 56px; height: 56px; color: var(--c); stroke-width: 1.4; margin-bottom: 12px; }

/* ----- hero (vehicle) ----- */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.viewer { position: relative; border-radius: var(--r); overflow: hidden; border: 0; min-height: 380px;
  background: linear-gradient(180deg, var(--card-2) 0%, var(--bg-2) 64%, var(--line) 64.3%, var(--bg-2) 100%); }
.viewer iframe, .viewer > img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer > img { object-fit: cover; }
.viewer .fallback { filter: blur(2px) brightness(.6); }
.viewer .empty-image { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); }
.viewer .empty-image > div > .i, .viewer .empty-image > .i { width: 80px; height: 80px; stroke-width: 1; color: var(--dim); margin-bottom: 10px; }
.viewer .load-3d { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; }
.viewer .load-3d p { margin: 10px 0 0; font-size: .85rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.viewer .viewer-actions { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.viewer .viewer-actions .btn { background: var(--glass); backdrop-filter: blur(8px); }
/* For free models Sketchfab always shows a large title and author bar (top) and a logo (bottom);
   they fall out of view by making the frame larger than its box. */
.viewer iframe.sketchfab { top: -72px; height: calc(100% + 136px); }
.hero-info { display: flex; flex-direction: column; gap: 18px; }
.hero-info h1 { margin: 0; }
.eyebrow { font-size: .875rem; font-weight: 400; color: var(--muted); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 0;
  border-radius: var(--r-sm); overflow: hidden; }
.specs div { background: var(--card); padding: 12px 16px; }
.specs div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.specs dt { font-size: .8125rem; color: var(--muted); }
.specs dd { margin: 2px 0 0; font-weight: 500; }
.hero-info .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
.stat { display: flex; align-items: center; gap: 16px; }
.stat .icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--c); flex: none; }
a.stat { position: relative; }
a.stat:hover { background: color-mix(in srgb, var(--text) 5%, var(--card)); text-decoration: none; }
.stat .icon .i { width: 22px; height: 22px; }
.stat small { display: block; }
.stat strong { font-size: 1.5rem; font-weight: 500; letter-spacing: 0; }

/* the odometer: six drums with white digits, like the one in the dashboard. A physical object, so the same
   dark material in both themes. */
.odometer { display: inline-flex; align-items: flex-end; gap: 8px; margin: 2px 0; }
.odometer .drums { display: inline-flex; gap: 2px; padding: 3px; background: #0B0B0B; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.odometer .drum { position: relative; width: 22px; height: 34px; border-radius: 4px; overflow: hidden; display: grid; place-items: center;
  font: 500 20px/1 var(--font-mono); color: #F4F4F2;
  background: linear-gradient(180deg, #050505 0%, #2A2A2A 24%, #1C1C1C 50%, #2A2A2A 76%, #050505 100%); }
.odometer .drum::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 32%, transparent 68%, rgba(0,0,0,.55)); }
.odometer .unit { color: var(--muted); font-size: .875rem; padding-bottom: 4px; }
/* while rolling (app.js odometer): a column of digits that slides; only transform, so it stays smooth */
.odometer .roll { align-self: start; display: flex; flex-direction: column; will-change: transform; }
.odometer .roll span { display: block; height: 34px; line-height: 34px; text-align: center; }

/* planning: one sage list with hairlines, overdue first; the status colour sits on the dot and the bar only */
.planning { display: grid; gap: 0; background: var(--card); border-radius: var(--r); overflow: hidden; }
.plan { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 14px 20px;
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.plan:first-child { border-top: 0; }
.plan .name { font-weight: 500; display: flex; gap: 10px; align-items: center; }
.plan .dot { width: 8px; height: 8px; border-radius: 50%; }
.plan .sub { color: var(--muted); font-size: .8125rem; }
.progress { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--card-2); overflow: hidden; }
/* bars are an SVG rect (web.bar): a width as an attribute, which the CSP allows, instead of a style */
.fill { display: block; width: 100%; height: 100%; }
.green .dot { background: var(--ok); } .green .progress rect { fill: var(--ok); }
.orange .dot { background: var(--warn); } .orange .progress rect { fill: var(--warn); }
.red .dot { background: var(--bad); } .red .progress rect { fill: var(--bad); }
/* a row that needs attention: a status bar on the left and a light tint, visible at a glance */
.plan.red { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); box-shadow: inset 4px 0 0 var(--bad); }
.plan.orange { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); box-shadow: inset 4px 0 0 var(--warn); }
.plan.red .sub .text-strong { color: var(--notice-error) !important; }
.plan.orange .sub .text-strong { color: var(--notice-warn) !important; }

/* timeline */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.moment { position: relative; margin-bottom: 14px; }
.moment::before { content: ""; position: absolute; left: -25px; top: 22px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent); }
.moment .card { padding: 16px 18px; }
.moment .top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.moment .date { font-weight: 500; }
.moment .amount { margin-left: auto; font-weight: 500; }
.moment .types { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.moment .bottom { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.moment .bottom a { display: inline-flex; gap: 6px; align-items: center; }
.moment em { color: var(--muted); }
.moment.storage .card { padding: 12px 18px; }
.moment.storage .top { align-items: center; }

/* ----- vehicle page: tabs, history per year, recent activity ----- */
/* Material 3 primary tabs: a 3px indicator under the label in the accent */
.tabs { display: flex; gap: 0; margin-top: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 20px; color: var(--muted); font-weight: 500;
  white-space: nowrap; transition: color .15s, background-color .15s; }
.tabs a:hover { color: var(--text); background: var(--state); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent-2); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--accent); animation: tab-in .3s var(--ease); }
@keyframes tab-in { from { transform: scaleX(.3); opacity: 0; } }
.tabs .count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--card-2); border: 0;
  font-size: .75rem; line-height: 20px; text-align: center; color: var(--muted); }
.tabs .count.bad { background: var(--bad); color: #fff; }
:root[data-dark] .tabs .count.bad { color: #410002; }
.filter { display: flex; gap: 6px; flex-wrap: wrap; }
.filter .chip:hover { text-decoration: none; background: var(--state); }
details.year { margin-bottom: 12px; }
details.year > summary { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 1.05rem; }
details.year > summary::-webkit-details-marker { display: none; }
details.year > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.year[open] > summary::before { transform: rotate(90deg); }
details.year .timeline { margin-top: 6px; }
.recent { padding: 0; overflow: hidden; }  /* the hover of a row follows the rounded corners of the card */
.recent-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 12px 20px;
  color: var(--text); border-top: 1px solid var(--line); transition: background-color .15s; }
.recent-row:first-child { border-top: 0; }
.recent-row:hover { background: var(--state); color: var(--text); text-decoration: none; }
.recent-row .date { color: var(--muted); font-size: .875rem; }
.recent-row .what { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .amount { font-weight: 500; }

/* export */
.export { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.export .text { flex: 1; min-width: 240px; }
.export .text p { margin: 0; color: var(--muted); }
.danger-zone summary { color: var(--muted); cursor: pointer; margin-top: 40px; font-size: .9rem; }

/* ----- tables ----- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8125rem; color: var(--muted); font-weight: 500;
  padding: 10px 8px; border-bottom: 1px solid var(--line); }
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.types-table input, .types-table select { height: 38px; }
.types-table select { min-width: 160px; }

/* ----- choosing an image ----- */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.choice { padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--card);
  cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: border-color .15s, transform .15s; width: 100%; }
.choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.choice img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--bg-2); }
.choice .label { padding: 10px 12px; font-size: .875rem; font-weight: 500; display: block; }
.choice .label small { display: block; font-weight: 400; }
.badge-3d { position: relative; }
.badge-3d::after { content: "3D"; position: absolute; top: 8px; left: 8px; background: var(--accent); color: var(--on-accent); font-weight: 500;
  font-size: .75rem; padding: 2px 8px; border-radius: 4px; }

/* ----- redacting ----- */
.redact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.redact-sidebar { position: sticky; top: 84px; }
.redact-page { position: relative; margin-bottom: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 34px -12px rgba(16,24,40,.35); border: 1px solid var(--line);
  cursor: crosshair; user-select: none; touch-action: none; background: #fff; }
.redact-page img { display: block; width: 100%; pointer-events: none; }
.box { position: absolute; border: 2px solid var(--accent); background: rgba(0,0,0,.85); border-radius: 2px; cursor: pointer; }
.box.off { background: color-mix(in srgb, var(--accent) 10%, transparent); border-style: dashed; }
.box:hover { outline: 2px solid var(--text); z-index: 2; }
.box:hover .reason { display: block; }
.box .reason { display: none; position: absolute; left: -2px; bottom: calc(100% + 4px); font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 3px;
  background: var(--accent); color: var(--on-accent); font-weight: 500; white-space: nowrap; pointer-events: none; }
.box.drawing { background: rgba(0,0,0,.6); border-style: solid; }
.legend { display: grid; gap: 10px; font-size: .88rem; color: var(--muted); margin: 16px 0; }
.legend span { display: flex; gap: 10px; align-items: center; }
.legend i { width: 22px; height: 14px; border: 2px solid var(--accent); border-radius: 2px; display: inline-block; flex: none; }
.legend i.on { background: #000; }
.legend i.off { border-style: dashed; background: color-mix(in srgb, var(--accent) 10%, transparent); }

@media (max-width: 860px) {
  .hero, .redact-layout { grid-template-columns: 1fr; }
  .viewer { min-height: 280px; }
  .redact-sidebar { position: static; }
  .wrap { padding: 0 16px; }
  .nav a span, .account-menu summary span { display: none; }
}

input[type=file] { color: var(--muted); font: inherit; font-size: .9rem; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; color: var(--accent-2); background: transparent;
  border: 1px solid var(--line-2); border-radius: 20px; padding: 8px 16px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--state); }
.stats .card, .grid-2 > .card { margin: 0; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; }
@media (max-width: 560px) {
  .search-bar { flex-direction: column; }
  .topbar .wrap { gap: 12px; }
}

/* ===== Account menu at the right of the top bar (the theme is chosen under Instellingen) ===== */
.account-menu { position: relative; }
.account-menu summary { list-style: none; display: flex; gap: 8px; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px;
  color: var(--bar-muted); font-weight: 500; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu summary.active, .account-menu[open] summary { color: var(--bar-text); background: var(--bar-hover); }
.account-menu .menu :focus-visible { outline-color: var(--link); }
.account-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 250px; max-width: 320px; padding: 8px 0;
  background: var(--bg-2); border: 0; border-radius: var(--r-sm); box-shadow: var(--float); animation: menu-in .18s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.account-menu .menu-email { margin: 0; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .menu a, .account-menu .menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.account-menu .menu a:hover, .account-menu .menu button:hover { background: var(--state); text-decoration: none; }
.account-menu form { margin: 0; }

/* ===== Quick actions and small parts ===== */
.km-quick { display: flex; gap: 8px; margin-top: 10px; }
.km-quick input { height: 36px; max-width: 140px; }
.km-quick .btn { height: 36px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 16px; }
.tile { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card); border: 0;
  border-radius: var(--r-sm); color: var(--text); transition: background-color .15s, transform .15s var(--ease); }
/* a tile alone on the last row takes the whole row (3 columns from ~1000px, 2 below that, 1 on a phone) */
@media (min-width: 1000px) { .tiles > :last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
@media (min-width: 680px) and (max-width: 999px) { .tiles > :last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
.tile:hover { background: color-mix(in srgb, var(--text) 5%, var(--card)); color: var(--text); transform: translateY(-1px); text-decoration: none; }
.tile > .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.tile small { display: block; }
.specs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 24px; margin: 0; }
.specs-list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.specs-list dt { color: var(--muted); }
.specs-list dd { margin: 0; font-weight: 500; text-align: right; }
.banner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.banner p { flex: 1; min-width: 220px; }
.checklist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 4px; }
.checklist input { flex: none; margin-top: 2px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; color: var(--text);
  font-weight: 400; font-size: .95rem; margin: 0; cursor: pointer; }
.checklist label:hover { background: var(--state); }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }

/* ===== Charts (one series: the color of the part; text in text shades; calm grid) ===== */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .bar { fill: var(--c); }
.chart .bar-group:hover .bar, .chart .bar-group:focus .bar { filter: brightness(1.12); }
.chart .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: color-mix(in srgb, var(--c) 12%, transparent); stroke: none; }
.chart .point { fill: var(--c); stroke: var(--card); stroke-width: 2; }
.chart .hit { fill: transparent; }
.chart .hit:hover + .point, .chart .point:hover { r: 6; }
.tooltip { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: 8px; font-size: .85rem;
  background: var(--text); color: var(--bg); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); opacity: 0; transition: opacity .1s; }
.tooltip.visible { opacity: 1; }
/* whose costs (Kosten & km with a taken-over history): your own in the colour of the page, earlier owners amber */
:root { --own: var(--sec-money); --earlier: #A9A39B; }  /* earlier owners: a neutral step, amber means "due soon" */
:root[data-dark] { --earlier: #6F6A63; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch.eigen { background: var(--own); }
.swatch.vorige { background: var(--earlier); }
.filter .chip .swatch { margin-right: 2px; }
.owner-split { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .85rem; }
.owner-split span { display: inline-flex; align-items: center; gap: 6px; }
.owner-split.legend-row { margin: 10px 0 4px; }
.chart .bar.eigen, .cost-bar .track rect.eigen { fill: var(--own); }
.chart .bar.vorige, .cost-bar .track rect.vorige { fill: var(--earlier); }
.cost-bars { display: grid; gap: 10px; }
.cost-bar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; font-size: .92rem; }
.cost-bar .track { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.cost-bar .track rect { fill: var(--c); }
.key-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.key-figures strong { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: 0; }

/* ===== Motion: build up when in view (static/app.js); never with "reduce motion" ===== */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
.notice.pop { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes rise { from { transform: scaleY(0); } }
@keyframes fade-in { from { opacity: 0; } }

/* ===== Total cost of ownership (F5) =====
   Six categories, one fixed colour each (validated categorical palette, light and dark: worst adjacent CVD
   delta E 9.1 / 8.4). Text never wears the category colour; the swatch next to it carries the identity. */
.tco { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; }
:root[data-dark] .tco { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; }
.tco .cat-depreciation { --c: var(--series-1); }
.tco .cat-maintenance { --c: var(--series-2); }
.tco .cat-fuel { --c: var(--series-3); }
.tco .cat-insurance { --c: var(--series-4); }
.tco .cat-road_tax { --c: var(--series-5); }
.tco .cat-other { --c: var(--series-6); }
.tco .swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }

.tco-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 8px;
  background: var(--card); }
.tco-hero-main { display: grid; gap: 4px; }
.tco-big { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tco-unit { font-size: .4em; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tco-facts { display: grid; gap: 10px; margin: 0; }
.tco-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tco-facts div:last-child { border-bottom: 0; }
.tco-facts dt { color: var(--muted); }
.tco-facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .tco-hero { grid-template-columns: 1fr; } }

/* composition: one bar that grows from the left (SVG segments with a 2px surface gap, rounded ends) */
.share-bar { height: 22px; border-radius: 999px; overflow: hidden; background: var(--card-2); }
.share-bar svg { display: block; width: 100%; height: 100%; transform-origin: left;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.share-seg { fill: var(--c); stroke: var(--card); stroke-width: 2px; cursor: default; transition: opacity .25s; }
html.js [data-reveal]:not(.is-in) .share-bar svg { transform: scaleX(0); }
.tco-legend { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px 24px; }
.legend-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: opacity .25s, background .2s; cursor: default; }
.legend-item:hover, .legend-item:focus-visible { background: var(--state); }
.legend-item .name { flex: 1; }
.legend-item strong { font-variant-numeric: tabular-nums; }

/* per year: bars rise from the baseline, year by year; totals fade in after their bar */
.tco-chart .seg { fill: var(--c); stroke: var(--card); stroke-width: 2px; transition: opacity .25s; }
.tco-chart .year-bar { transform-box: fill-box; transform-origin: 50% 100%; outline: none; }
.tco-chart .year-bar:hover .seg, .tco-chart .year-bar:focus-visible .seg { filter: brightness(1.08); }
.tco-chart .year-bar:focus-visible .hit { fill: color-mix(in srgb, var(--link) 10%, transparent); }
html.js [data-reveal].is-in .tco-chart .year-bar { animation: rise .85s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 80ms); }
html.js [data-reveal]:not(.is-in) .tco-chart .year-bar { transform: scaleY(0); }
html.js [data-reveal].is-in .tco-chart .bar-total { animation: fade-in .4s ease both; animation-delay: calc(var(--i) * 80ms + .6s); }
html.js [data-reveal]:not(.is-in) .tco-chart .bar-total { opacity: 0; }
.tco-chart .bar-total { fill: var(--text); font-weight: 500; }

/* point at a category (legend or bar segment): the rest steps back, in both charts */
.tco:has(.legend-item:is(:hover, :focus-visible)) .legend-item:not(:hover):not(:focus-visible) { opacity: .45; }
.tco:has(.cat-depreciation:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-depreciation),
.tco:has(.cat-maintenance:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-maintenance),
.tco:has(.cat-fuel:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-fuel),
.tco:has(.cat-insurance:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-insurance),
.tco:has(.cat-road_tax:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-road_tax),
.tco:has(.cat-other:is(.legend-item, .share-seg):is(:hover, :focus-visible)) .seg:not(.cat-other) { opacity: .15; }

/* input */
.tco-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.fixed-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.fixed-list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.fixed-list li > span:nth-child(2) { flex: 1; }
.fixed-list .name { font-weight: 500; }
.amount-per { display: flex; gap: 8px; }
.amount-per input { flex: 1; min-width: 0; }
.amount-per select { flex: none; width: auto; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], .share-bar svg, .share-seg, .tco-chart .seg, .legend-item { transition: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .notice.pop, html.js [data-reveal] .tco-chart .year-bar, html.js [data-reveal] .tco-chart .bar-total { animation: none !important; }
  html.js [data-reveal] .tco-chart .year-bar { transform: none; }
  html.js [data-reveal] .tco-chart .bar-total { opacity: 1; }
  html.js [data-reveal] .share-bar svg { transform: none; }
}

/* ===== Motion everywhere: lists enter in reading order, bars grow to their value, charts build up =====
   Pure CSS, so it is there from the very first paint (no flash). 'backwards': after the animation the normal
   styles (e.g. the hover lift of a card) work as before. "Reduce motion" in Windows switches all of it off. */
html { scroll-behavior: smooth; }
html.js main.wrap { animation: page-in .35s ease-out backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-only { from { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > * { animation: rise-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
html.js .card tbody > tr { animation: fade-only .4s ease backwards; }
html.js .planning .progress .fill { transform-origin: left; animation: grow-x .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: 250ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(2), html.js .card tbody > tr:nth-child(2) { animation-delay: 55ms; }
html.js .planning > :nth-child(2) .progress .fill { animation-delay: 305ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(3), html.js .card tbody > tr:nth-child(3) { animation-delay: 110ms; }
html.js .planning > :nth-child(3) .progress .fill { animation-delay: 360ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(4), html.js .card tbody > tr:nth-child(4) { animation-delay: 165ms; }
html.js .planning > :nth-child(4) .progress .fill { animation-delay: 415ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(5), html.js .card tbody > tr:nth-child(5) { animation-delay: 220ms; }
html.js .planning > :nth-child(5) .progress .fill { animation-delay: 470ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(6), html.js .card tbody > tr:nth-child(6) { animation-delay: 275ms; }
html.js .planning > :nth-child(6) .progress .fill { animation-delay: 525ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(7), html.js .card tbody > tr:nth-child(7) { animation-delay: 330ms; }
html.js .planning > :nth-child(7) .progress .fill { animation-delay: 580ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(8), html.js .card tbody > tr:nth-child(8) { animation-delay: 385ms; }
html.js .planning > :nth-child(8) .progress .fill { animation-delay: 635ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(9), html.js .card tbody > tr:nth-child(9) { animation-delay: 440ms; }
html.js .planning > :nth-child(9) .progress .fill { animation-delay: 690ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(10), html.js .card tbody > tr:nth-child(10) { animation-delay: 495ms; }
html.js .planning > :nth-child(10) .progress .fill { animation-delay: 745ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(11), html.js .card tbody > tr:nth-child(11) { animation-delay: 550ms; }
html.js .planning > :nth-child(11) .progress .fill { animation-delay: 800ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(12), html.js .card tbody > tr:nth-child(12) { animation-delay: 605ms; }
html.js .planning > :nth-child(12) .progress .fill { animation-delay: 855ms; }
html.js :is(.garage, .stats, .tiles, .planning, .timeline, .key-figures, .checklist, .fixed-list, .subnav) > :nth-child(n+13), html.js .card tbody > tr:nth-child(n+13) { animation-delay: 660ms; }
html.js .notice { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3) backwards; }

/* cost and km chart: bars rise year by year, the km line draws from left to right (time runs that way) */
.chart .line { stroke-dasharray: 1; }
.chart .bar-group { transform-box: fill-box; transform-origin: 50% 100%; }
html.js [data-reveal]:not(.is-in) .chart .bar-group { transform: scaleY(0); }
html.js [data-reveal].is-in .chart .bar-group { animation: rise .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
html.js [data-reveal]:not(.is-in) .chart .line { stroke-dashoffset: 1; }
html.js [data-reveal].is-in .chart .line { animation: draw 1.4s cubic-bezier(.4, 0, .2, 1) backwards; }
html.js [data-reveal]:not(.is-in) .chart :is(.area, .point) { opacity: 0; }
html.js [data-reveal].is-in .chart .area { animation: fade-only .8s ease .5s backwards; }
html.js [data-reveal].is-in .chart .point { animation: fade-only .3s ease 1.2s backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js *, html.js *::before, html.js *::after { animation: none !important; }
  html.js [data-reveal]:not(.is-in) .chart .bar-group { transform: none; }
  html.js [data-reveal] .chart .line { stroke-dashoffset: 0; }
  html.js [data-reveal] .chart :is(.area, .point) { opacity: 1; }
}

/* ===== Parts (F7): the list for the next service ===== */
.next-service { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.needed-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.needed-list li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--card);
  border: 0; border-radius: var(--r-sm); transition: opacity .2s; }
.needed-list .what { flex: 1; min-width: 0; }
.needed-list .what small { display: block; }
.needed-list li.in-stock .what { opacity: .6; }
.needed-list form { margin: 0; }
.stock-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font: inherit;
  font-size: .8125rem; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--text); background: transparent;
  border: 1px solid var(--line-2); transition: background-color .15s, border-color .15s, color .15s; }
.stock-toggle .i { opacity: .35; }
.stock-toggle:hover { border-color: var(--ok); }
.stock-toggle.on { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.stock-toggle.on .i { opacity: 1; }
.parts-hint { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 16px; color: var(--text); }
.parts-hint:hover { background: color-mix(in srgb, var(--text) 5%, var(--card)); text-decoration: none; color: var(--text); }
.parts-hint > .i { width: 22px; height: 22px; color: var(--c); }
.parts-hint span:first-of-type { flex: 1; }
.parts-hint small { display: block; }
td.actions { white-space: nowrap; text-align: right; }
td.actions > * { display: inline-flex; vertical-align: middle; margin-left: 10px; }
td.actions form { margin: 0; }

html.js .needed-list > * { animation: rise-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
html.js .needed-list > :nth-child(2) { animation-delay: 55ms; }
html.js .needed-list > :nth-child(3) { animation-delay: 110ms; }
html.js .needed-list > :nth-child(n+4) { animation-delay: 165ms; }

/* settings: jump to a part */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: .875rem; font-weight: 500;
  color: var(--text); background: transparent; border: 1px solid var(--line-2); transition: background-color .15s; }
.subnav a:hover, .subnav a:focus-visible { background: var(--state); text-decoration: none; }
:target { scroll-margin-top: 80px; }

/* Signing in and registering: one narrow card in the middle, one column, buttons the full width (a large target,
   on a phone too), a calm rhythm between the parts and the way to the other page in a footer */
.auth { max-width: 420px; margin: 48px auto; padding: 32px; }
.auth > .i { width: 40px; height: 40px; color: var(--c); margin-bottom: 8px; }
.auth h1 { margin-bottom: 6px; }
.auth .lead { color: var(--muted); margin: 0 0 24px; }
.auth form .btn { width: 100%; }
.auth .field small { display: block; margin-top: 6px; line-height: 1.45; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth .hint { color: var(--muted); font-size: .85rem; text-align: center; margin: 10px 0 0; line-height: 1.45; }
.auth .notice { margin-bottom: 16px; }
/* A long text from Markdown (the privacy statement): readable lines, tables that scroll on a phone */
.prose { max-width: 860px; margin: 0 auto; line-height: 1.6; }
.prose h2 { margin-top: 1.6em; }
.prose blockquote { margin: 0 0 1em; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--card);
  border-radius: var(--r-sm); }
.prose blockquote p { margin: 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin-bottom: 1em; font-size: .92rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
/* A label with a link on the same line, e.g. "Wachtwoord vergeten?" */
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row a { font-size: .85rem; margin-bottom: 6px; }
.auth-footer { margin: 28px -32px -32px; padding: 16px 32px; border-top: 1px solid var(--line); background: transparent;
  border-radius: 0 0 var(--r) var(--r); text-align: center; color: var(--muted); }
.auth-footer p { margin: 0; }
.auth-footer p + p { margin-top: 6px; }
@media (max-width: 560px) {
  .auth { margin: 16px auto; padding: 22px; }
  .auth-footer { margin: 24px -22px -22px; padding: 14px 22px; }
}
/* Account: one row per way to secure the account, with its state and where to manage it */
.security-list { list-style: none; margin: 0; padding: 0; }
.security-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.security-list li:first-child { border-top: 0; }
.security-list .badge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--c); }
.security-list .what { flex: 1; min-width: 0; }
.security-list .what strong, .security-list .what small { display: block; }
.security-list .what .email { overflow-wrap: anywhere; }
.security-list .chip { margin-left: 6px; vertical-align: 1px; }
/* A short form inside a wide card: lines that stay readable on a large screen */
form.narrow, .divider.narrow { max-width: 480px; }
/* Deleting the account: set apart by a red edge, calm enough to read before deciding */
.card.danger-zone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }  /* the account card only, not the fold-out on the vehicle page */
.danger-zone h2 { display: flex; align-items: center; gap: 10px; color: var(--bad); }
/* Removing a passkey: a quiet button that opens the password field, not a bare disclosure triangle */
details.remove summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--muted);
  font-size: .88rem; padding: 4px 8px; border-radius: 8px; }
details.remove summary::-webkit-details-marker { display: none; }
details.remove summary:hover, details.remove[open] summary { color: var(--bad); background: var(--bad-soft); }
@media (max-width: 560px) {
  .security-list li { flex-wrap: wrap; }
  .security-list .btn { margin-left: 54px; }
}
/* A password field with a button to see what you typed (app.js): a long passphrase is easy to mistype */
.password { position: relative; }
.password input { padding-right: 48px; }
.password button { position: absolute; top: 3px; right: 3px; width: 40px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.password button:hover { color: var(--text); background: var(--state); }
.password button[aria-pressed="true"] .show, .password button:not([aria-pressed="true"]) .hide { display: none; }
/* Two-step verification: the QR code stays black on white in dark mode too, or apps cannot read it */
.qr { background: #fff; border-radius: var(--r-sm); margin: 8px 0; }
.steps li { margin-bottom: 14px; }
.recovery-codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.recovery-codes li { margin-bottom: 6px; }

/* ===== App shell (Material 3): a navigation drawer on a computer, a top bar with navigation at the bottom on a phone =====
   One header element for both (app.js swaps it with every page, so the active item and your vehicles stay right). */
.topbar.signed .nav .pill { display: grid; place-items: center; }
.drawer-vehicles { display: none; }
.topbar { view-transition-name: app-shell; }  /* stays in place while the page changes */

@keyframes pill-in { from { transform: scaleX(.5); } }

/* ===== Vehicle page: header with the main actions, then the overview in two columns =====
   left what needs doing (planning, activity, everything about the vehicle), right the vehicle itself (photo, odometer, data) */
.vhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.vhead-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vhead h1 { margin: 0; }
.vhead .row { margin-top: 8px; }
.vhead .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 24px; }
.vside { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vmain { grid-column: 1; grid-row: 1; min-width: 0; }
.vmain > .tabs { margin-top: 0; }  /* the tabs open the left column; the right column stays on every tab */
.vhead .viewer { view-transition-name: vehicle-photo; }
.kmcard { display: flex; flex-direction: column; gap: 8px; }
.kmcard .lab { font-size: .8125rem; color: var(--muted); }
.kmcard .km-quick { margin-top: 4px; }
.kmcard .km-quick input { max-width: none; flex: 1; height: 40px; }
.kmcard .km-quick .btn { height: 40px; }
.factcard h2 { font-size: 1rem; margin-bottom: 4px; }
.factcard h2 .i { color: var(--sec-specs); }
.factcard .specs-list { grid-template-columns: 1fr; }
.factcard .specs-list div:last-child { border-bottom: 0; }
.vmain .tiles { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.fab { display: none; }

/* ===== Touch: a ripple from where you press (app.js), and the card that grows into the vehicle page =====
   (View Transitions: the photo of the card morphs into the photo on the vehicle page; browsers without it just change page) */
.btn, .tile, .nav a, .drawer-vehicles a, .tabs a, .recent-row, .stat { position: relative; overflow: hidden; }
.fab { overflow: hidden; }  /* already fixed in place, which also holds the ripple; position: relative here moved it into the page */
.ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; transform: scale(0); opacity: .14;
  animation: ripple .55s var(--ease) forwards; }
@keyframes ripple { 60% { transform: scale(1); opacity: .14; } 100% { transform: scale(1); opacity: 0; } }
::view-transition-group(vehicle-photo) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* ===== Idea 1: the vehicle on a deep racing-green band (remove this block and the band class to go back) ===== */
:root { --band: #123F2B; --band-text: #F3F7F4; --band-muted: #B9D3C4; }
:root[data-dark] { --band: #0E2A1D; --band-text: #EEF5F0; --band-muted: #A9C9B6; }
.vhead.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; gap: 0; overflow: hidden;
  border-radius: 24px; background: var(--band); color: var(--band-text); min-height: 280px; }
.band .vhead-text { padding: 28px; justify-content: flex-end; gap: 6px; }
.band .eyebrow, .band .muted { color: var(--band-muted); }
.band h1 { color: var(--band-text); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.band .actions { margin-top: 14px; }
.band .btn { background: var(--band-text); color: var(--band); }
.band .btn:hover { background: #fff; color: var(--band); }
.band .btn.ghost { background: rgba(255,255,255,.12); color: var(--band-text); }
.band .btn.ghost:hover { background: rgba(255,255,255,.2); }
.band .chip.ok { background: rgba(255,255,255,.14); color: var(--band-text); }
.band .viewer { border-radius: 0; min-height: 280px; height: 100%;
  background: radial-gradient(90% 80% at 55% 85%, rgba(255,255,255,.16), transparent 65%), transparent; }
.band .viewer .empty-image { color: var(--band-muted); }
.band .viewer .empty-image .i { color: var(--band-muted); }


/* ===== Idea 2: every topic its own colour field (remove this block to go back) ===== */
.tile { background: color-mix(in srgb, var(--c) 12%, var(--bg)); min-height: 84px; }
.tile:hover { background: color-mix(in srgb, var(--c) 18%, var(--bg)); }
.tile > .i { color: var(--bg); background: var(--c); }
.tile strong { color: var(--text); }
:root[data-dark] .tile { background: color-mix(in srgb, var(--c) 14%, var(--bg)); }
:root[data-dark] .tile:hover { background: color-mix(in srgb, var(--c) 20%, var(--bg)); }


/* ===== Idea 4: what needs doing, at a glance on the start page (remove this block and the overview in index.html to go back) ===== */
.overview { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.overview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.overview-head h2 { margin: 0; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.counts .count { border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.counts .count strong { font: 500 1.75rem/1.1 var(--font-mono); }
.counts .count span { font-size: .875rem; }
.counts .count.bad { background: var(--bad-soft); color: var(--notice-error); }
.counts .count.warn { background: var(--warn-soft); color: var(--notice-warn); }
.counts .count.ok { background: var(--ok-soft); color: var(--notice-ok); }
.next { display: flex; flex-direction: column; }
.next-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--text); font-size: .9375rem; }
.next-row:hover { color: var(--text); background: var(--state); text-decoration: none; }
.next-row .dot { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--ok); }
.next-row .dot.red { background: var(--bad); }
.next-row .dot.orange { background: var(--warn); }
.next-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-row .when { color: var(--muted); font-size: .8125rem; white-space: nowrap; }


/* ===== Idea 5: the history as a coloured timeline (remove this block and the moment-icon in vehicle.html to go back) ===== */
.timeline { padding-left: 56px; }
.timeline::before { left: 19px; }
.moment { --c: var(--sec-maint); }
.moment.storage { --c: var(--sec-neutral); }
.moment.imported { --c: var(--sec-docs); }
.moment::before { display: none; }
.moment-icon { position: absolute; left: -56px; top: 12px; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center;
  background: var(--c); color: var(--bg); box-shadow: 0 0 0 4px var(--bg); }
.moment-icon .i { width: 20px; height: 20px; }
.moment .amount { font-family: var(--font-mono); }


/* ===== Idea 6: headings in a technical, condensed face like dashboards and type plates (remove this block to go back) ===== */
@font-face { font-family: "Saira Semi Condensed"; src: url("fonts/saira-semi-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root { --font-display: "Saira Semi Condensed", "Roboto Condensed", var(--font); }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.1; }
h2 { font-size: 1.25rem; line-height: 1.2; }
.band h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); }


/* ===== Phone (up to 600px): smaller type, tighter spacing, compact cards. The rest of the file is sized for a computer. ===== */

/* ===== Small adjustments (instead of style attributes, which the Content Security Policy does not allow) =====
   !important: they replace inline styles, which beat every rule; this keeps every page exactly as it was.
   The order matters where two meet (m-0 first, a side after it). */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2em { margin-top: .2em !important; }
.mt-4 { margin-top: 4px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-28 { margin-top: 28px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-14 { margin-bottom: 14px !important; }
.mb-28 { margin-bottom: 28px !important; }
.ml-auto { margin-left: auto !important; }
.fs-85 { font-size: .85rem !important; }
.fs-88 { font-size: .88rem !important; }
.fs-90 { font-size: .9rem !important; }
.title-row { display: flex !important; gap: 10px; align-items: center; }
.items-center { align-items: center !important; }
.items-start { align-items: start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.grow { flex: 1 !important; }
.nowrap { flex-wrap: nowrap !important; }
.w-full { width: 100% !important; }
.max-w-160 { max-width: 160px !important; }
.max-w-520 { max-width: 520px !important; }
.date-inline { height: 36px !important; max-width: 170px !important; }
.file-input { padding-top: 9px !important; }
.choice-chip { padding: 8px 14px !important; }
.chip-sm { font-size: .7rem !important; padding: 2px 8px !important; }
.divided { padding: 8px 0 !important; border-bottom: 1px solid var(--line) !important; }
.plate-input { text-transform: uppercase !important; font-family: var(--font-mono) !important; font-weight: 500 !important; letter-spacing: .06em !important; }
.text-left { text-align: left !important; }
.text-strong { color: var(--text) !important; }
.text-warn { color: var(--warn) !important; }
.text-inherit { color: inherit !important; }
.fill-text { fill: var(--text) !important; }
.pointer { cursor: pointer !important; }

/* An explanation under a title (p.intro) sits behind an info button next to the title (app.js), so a page starts
   with what you came for. Without JavaScript the text stays under the title. */
.info-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -8px 0 -8px 2px; vertical-align: middle;
  border: 0; border-radius: 22px; background: none; color: var(--muted); cursor: pointer; }
.info-btn:hover, .info-btn[aria-expanded="true"] { background: var(--state); color: var(--accent-2); }
.info-btn .i { width: 20px; height: 20px; }
p.intro { max-width: 70ch; animation: intro-in .2s var(--ease); }
@keyframes intro-in { from { opacity: 0; transform: translateY(-4px); } }
/* deleting the vehicle closes the right column, on a phone the page: a quiet fold-out, a full row to tap */
.vside > .danger-zone summary { display: flex; align-items: center; min-height: 44px; margin-top: 0; }