/* =========================================================================
   psauto.dk design system
   No framework: custom properties, grid, flexbox, light/dark aware.
   ========================================================================= */

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

* { margin: 0; }

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

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- tokens - */

:root {
    color-scheme: light;

    --ink-900: #0a0f1a;
    --ink-800: #131a29;
    --ink-700: #1e2738;

    --bg:            #f4f6fa;
    --bg-elevated:   #ffffff;
    --bg-sunken:     #eaeef5;
    --bg-inset:      #f8fafc;

    --text:          #101828;
    --text-muted:    #5a6478;
    --text-subtle:   #8792a6;
    --text-onbrand:  #ffffff;

    --border:        #dfe4ec;
    --border-strong: #c6cddb;

    --brand-50:  #eef4ff;
    --brand-100: #dbe6ff;
    --brand-300: #9cbaff;
    --brand-500: #2f6bff;
    --brand-600: #1e51e0;
    --brand-700: #1740b4;

    --success-bg: #e7f8ef;
    --success-fg: #0d7a45;
    --danger-bg:  #fdeceb;
    --danger-fg:  #c02a25;
    --warn-bg:    #fff5e2;
    --warn-fg:    #96601a;

    /* The "Sold" badge inverts with the theme; a dark chip on a dark card
       reads as no chip at all. */
    --badge-sold-bg: #131a29;
    --badge-sold-fg: #ffffff;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 4%);
    --shadow:    0 4px 12px rgb(16 24 40 / 7%), 0 1px 3px rgb(16 24 40 / 5%);
    --shadow-lg: 0 18px 48px rgb(16 24 40 / 14%), 0 4px 12px rgb(16 24 40 / 6%);

    --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
    --step-1:  clamp(1.1rem, 1.03rem + 0.36vw, 1.35rem);
    --step-2:  clamp(1.35rem, 1.2rem + 0.72vw, 1.85rem);
    --step-3:  clamp(1.7rem, 1.4rem + 1.5vw, 2.7rem);
    --step-4:  clamp(2.1rem, 1.55rem + 2.6vw, 3.8rem);

    --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
    --measure: 68ch;

    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0a0e17;
        --bg-elevated:   #131926;
        --bg-sunken:     #070a11;
        --bg-inset:      #1a2130;

        --text:          #eef1f7;
        --text-muted:    #9aa5b8;
        --text-subtle:   #6f7b90;

        --border:        #232c3d;
        --border-strong: #33405a;

        --brand-50:  #14203c;
        --brand-100: #1a2c52;
        --brand-300: #4a76ef;
        --brand-500: #5c86ff;
        --brand-600: #7699ff;
        --brand-700: #96b2ff;

        --success-bg: #0e2b1e;
        --success-fg: #5fd598;
        --danger-bg:  #2e1416;
        --danger-fg:  #ff8f89;
        --warn-bg:    #2c2110;
        --warn-fg:    #f0c07a;

        --badge-sold-bg: #e6eaf3;
        --badge-sold-fg: #131a29;

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
        --shadow:    0 6px 18px rgb(0 0 0 / 45%);
        --shadow-lg: 0 24px 60px rgb(0 0 0 / 60%);
    }
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg:            #0a0e17;
    --bg-elevated:   #131926;
    --bg-sunken:     #070a11;
    --bg-inset:      #1a2130;

    --text:          #eef1f7;
    --text-muted:    #9aa5b8;
    --text-subtle:   #6f7b90;

    --border:        #232c3d;
    --border-strong: #33405a;

    --brand-50:  #14203c;
    --brand-100: #1a2c52;
    --brand-300: #4a76ef;
    --brand-500: #5c86ff;
    --brand-600: #7699ff;
    --brand-700: #96b2ff;

    --success-bg: #0e2b1e;
    --success-fg: #5fd598;
    --danger-bg:  #2e1416;
    --danger-fg:  #ff8f89;
    --warn-bg:    #2c2110;
    --warn-fg:    #f0c07a;

    --badge-sold-bg: #e6eaf3;
    --badge-sold-fg: #131a29;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow:    0 6px 18px rgb(0 0 0 / 45%);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 60%);
}

/* ------------------------------------------------------------------ base - */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv05' 1, 'ss03' 1;
}

h1, h2, h3, h4 {
    line-height: 1.15;
    letter-spacing: -0.021em;
    font-weight: 650;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-700); }

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--brand-500); color: #fff; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 1em; height: 1em; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- layout - */

.container {
    width: min(100% - var(--gutter) * 2, 1200px);
    margin-inline: auto;
}

.container-narrow { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }

/* Notched phones in landscape put the rounded corner over the gutter. */
@supports (padding: env(safe-area-inset-left)) {
    .container, .container-narrow {
        padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    }
}

.stack > * + * { margin-top: var(--stack-gap, 1rem); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: var(--step--1); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--brand-600);
}

.lede { font-size: var(--step-1); color: var(--text-muted); max-width: 46ch; }

/* ---------------------------------------------------------------- header - */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

.site-header[data-scrolled] { border-bottom-color: var(--border); }


.site-header__inner {
    display: flex; align-items: center; gap: 1rem;
    min-height: 68px;
}

.brand {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--text); text-decoration: none;
    flex: none; /* an <img> flex item shrinks past its intrinsic width otherwise */
}
.brand:hover { color: var(--text); }

.brand__mark { height: 40px; width: auto; flex: none; }

.brand__text { display: grid; gap: 1px; }
.brand__name {
    font-weight: 750; font-size: 1.02rem; line-height: 1.05;
    letter-spacing: -0.015em;
}
.brand__tag {
    font-size: 0.6rem; font-weight: 650; line-height: 1;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-subtle);
}

/* The mark is a black/white split, so the dark theme gets an ink-inverted file
   rather than a filter. Mirrors the token blocks: system preference first, then
   an explicit [data-theme] override in both directions. */
.brand__mark--dark, img.brand__mark--dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand__mark--light,
    :root:not([data-theme="light"]) img.brand__mark--light { display: none; }
    :root:not([data-theme="light"]) .brand__mark--dark,
    :root:not([data-theme="light"]) img.brand__mark--dark { display: block; }
}

[data-theme="dark"] .brand__mark--light,
[data-theme="dark"] img.brand__mark--light { display: none; }
[data-theme="dark"] .brand__mark--dark,
[data-theme="dark"] img.brand__mark--dark { display: block; }

[data-theme="light"] .brand__mark--light,
[data-theme="light"] img.brand__mark--light { display: block; }
[data-theme="light"] .brand__mark--dark,
[data-theme="light"] img.brand__mark--dark { display: none; }

.site-nav { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }

.site-nav__link {
    padding: 0.5rem 0.85rem; border-radius: var(--radius-pill);
    color: var(--text-muted); text-decoration: none; font-weight: 500;
    font-size: var(--step--1);
    transition: background 0.15s, color 0.15s;
}
.site-nav__link:hover { background: var(--bg-sunken); color: var(--text); }
.site-nav__link[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }

.header-tools { display: flex; align-items: center; gap: 0.4rem; }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--bg-elevated); color: var(--text-muted);
    cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }

.lang-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--bg-sunken); border-radius: var(--radius-pill);
}
.lang-switch button {
    border: 0; background: none; cursor: pointer;
    padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--text-subtle); transition: background 0.15s, color 0.15s;
}
.lang-switch button[aria-pressed="true"] {
    background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-sm);
}

/* The hamburger only exists on narrow screens. */
.nav-toggle { display: none; }

@media (max-width: 46rem) {
    .site-header__inner { min-height: 60px; gap: 0.5rem; }
    .brand__mark { height: 34px; }
    .brand__tag { display: none; }
    .nav-toggle { display: inline-grid; }
    .header-tools { gap: 0.3rem; }
    .lang-switch button { padding: 0.3rem 0.55rem; }

    /* Anchored to the sticky header, which is itself a positioned ancestor. */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        margin-inline-start: 0;
        padding: 0.5rem;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .site-nav[data-open] {
        display: flex;
        animation: nav-panel 0.28s var(--ease);
        transform-origin: top center;
    }

    /* Links fan in behind the panel. Delays stay short so the menu never feels
       like it is waiting on an animation. */
    .site-nav[data-open] .site-nav__link {
        animation: nav-item 0.32s var(--ease) backwards;
    }
    .site-nav[data-open] .site-nav__link:nth-child(1) { animation-delay: 0.04s; }
    .site-nav[data-open] .site-nav__link:nth-child(2) { animation-delay: 0.08s; }
    .site-nav[data-open] .site-nav__link:nth-child(3) { animation-delay: 0.12s; }

    .site-nav__link { padding: 0.8rem 1rem; border-radius: var(--radius); font-size: var(--step-0); }

    .header-tools { margin-inline-start: auto; }
}

/* The wordmark, the language pair and three round buttons stopped fitting on
   one line below ~400px -- the hamburger was pushed off the right edge.
   Buttons shrink first; only the narrowest phones lose the wordmark, since
   the emblem carries the brand on its own. */
@media (max-width: 25rem) {
    .icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 21.5rem) {
    .brand__text { display: none; }
}

/* Hamburger morphs into the close icon. */
.nav-toggle .icon { transition: rotate 0.28s var(--ease); }
.nav-toggle[aria-expanded="true"] { color: var(--text); border-color: var(--border-strong); }
.nav-toggle[aria-expanded="true"] .icon { rotate: 90deg; }

@keyframes nav-panel {
    from { opacity: 0; translate: 0 -12px; scale: 1 0.97; }
}

@keyframes nav-item {
    from { opacity: 0; translate: 0 -10px; }
}

/* --------------------------------------------------------------- buttons - */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.72rem 1.3rem; border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600; font-size: var(--step-0); line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--brand-500); color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 20%); }
.btn-primary:hover:not(:disabled) { background: var(--brand-600); color: #fff; }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text); }

.btn-danger { background: var(--danger-bg); color: var(--danger-fg); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-bg) 80%, var(--danger-fg)); }

.btn-block { width: 100%; }
.btn-lg { padding: 0.9rem 1.6rem; font-size: var(--step-1); }
.btn-sm { padding: 0.45rem 0.85rem; font-size: var(--step--1); }

.spinner {
    width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ hero - */

.hero {
    position: relative; overflow: hidden;
    padding-block: clamp(2.5rem, 1rem + 7vw, 6rem) clamp(2rem, 1rem + 4vw, 4rem);
    background:
        radial-gradient(90rem 40rem at 15% -20%, var(--brand-50), transparent 60%),
        radial-gradient(60rem 30rem at 100% 0%, color-mix(in srgb, var(--brand-100) 60%, transparent), transparent 55%);
}

.hero__grid {
    display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
    grid-template-columns: 1fr;
    align-items: start;
}

/* `1fr` is `minmax(auto, 1fr)`: the column floors at its own min-content
   width, which the reviews strip and the address line pushed to 452px on a
   341px phone -- the page scrolled sideways and the form card was clipped. */
.hero__grid > * { min-width: 0; }

@media (min-width: 62rem) {
    .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero__copy { --stack-gap: 1.15rem; }

.trust-row {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.trust-row__item {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: var(--step--1); color: var(--text-muted); font-weight: 500;
}
.trust-row__item .icon { color: var(--brand-500); }

/* ----------------------------------------------------------------- cards - */

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card-pad { padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }

.card-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.1rem clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
    border-bottom: 1px solid var(--border);
}
.card-header h2, .card-header h3 { font-size: var(--step-1); }

/* ----------------------------------------------------------------- forms - */

.field { display: grid; gap: 0.4rem; }

.field label {
    font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
}

.input, .textarea, .select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* Safari zooms the viewport whenever a focused field is under 16px, and
   --step-0 bottoms out at 15.2px. Touch devices get the 16px floor; pointer
   devices keep the fluid scale. */
@media (pointer: coarse) {
    .input, .textarea, .select { font-size: max(16px, var(--step-0)); }
}

.input::placeholder { color: var(--text-subtle); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
    outline: none;
    background: var(--bg-elevated);
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}

.field[data-invalid] .input { border-color: var(--danger-fg); }
.field[data-invalid] .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fg) 18%, transparent); }

.field-error {
    font-size: var(--step--1); color: var(--danger-fg); font-weight: 500;
    display: none;
}
.field[data-invalid] .field-error { display: block; }

.field-row { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .field-row-2 { grid-template-columns: 1fr 1fr; } }

.field-hint { font-size: var(--step--1); color: var(--text-subtle); }

/* --- licence plate ------------------------------------------------------ */

/* Rebuilt in CSS: the old build used a bitmap plus five media queries that
   re-guessed the input's font size at every breakpoint. */
.plate {
    container-type: inline-size;
    display: block;
    background: #fff;
    border: 2px solid #14181f;
    border-radius: 10px;
    box-shadow: var(--shadow), inset 0 0 0 1px rgb(0 0 0 / 6%);
    overflow: hidden;
    cursor: text;
}

.plate__inner {
    display: flex;
    align-items: stretch;
    /* Real plates are ~520x110mm. Driving the height from the container width
       keeps that ratio instead of letting the input's line box decide it. */
    height: 21.5cqi;
    min-height: 54px;
}

.plate__band {
    flex: none;
    width: 13cqi;
    min-width: 42px;
    background: linear-gradient(180deg, #043cae, #05299f);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Container units, not percentages: percentage padding and gap resolve
       against the containing block's width, which here is the whole plate --
       that gave this 74px-wide band 32px of vertical padding. */
    gap: 0.9cqi;
    padding: 1.4cqi 1cqi;
}

/* Bounded in the same units as the band, so the emblem cannot spill onto the
   white part of the plate at any plate size. */
.plate__eu {
    width: 8.5cqi;
    min-width: 22px;
    height: auto;
    aspect-ratio: 1;
    flex: none;
}

.plate__country {
    font: 700 clamp(9px, 4.6cqi, 20px) / 1 var(--font);
    color: #fff;
    letter-spacing: 0.02em;
    flex: none;
}

.plate__input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    font-family: var(--font-mono);
    font-size: 13cqi;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: #14181f;
    padding-inline: 2cqi;
}
.plate__input::placeholder { color: #c2c7d0; }
.plate__input:focus { outline: none; }

.plate:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

.field[data-invalid] .plate { border-color: var(--danger-fg); }

/* --- file dropzone ------------------------------------------------------ */

.dropzone {
    position: relative;
    display: grid; place-items: center; gap: 0.35rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--bg-inset);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dropzone:hover, .dropzone[data-dragover] {
    border-color: var(--brand-500);
    background: var(--brand-50);
    color: var(--brand-700);
}
.dropzone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.dropzone__title { font-weight: 600; color: var(--text); }
.dropzone[data-dragover] .dropzone__title { color: var(--brand-700); }

.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.thumbs:empty { display: none; }

.thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    animation: pop 0.25s var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
    position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgb(10 15 26 / 72%); color: #fff;
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.thumb:hover button, .thumb button:focus-visible { opacity: 1; }

/* No hover on a phone, so the only way to drop a photo stayed invisible.
   Make it permanent, and big enough to hit. */
@media (hover: none) {
    .thumb button { opacity: 1; width: 28px; height: 28px; }
}

@keyframes pop { from { opacity: 0; transform: scale(0.9); } }

/* --- captcha ------------------------------------------------------------ */

.captcha { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; }
.captcha__q {
    flex: none;
    padding: 0.7rem 1rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono); font-weight: 700;
    letter-spacing: 0.05em;
    user-select: none;
}
.captcha .field { flex: 1 1 8rem; }

/* --- form feedback ------------------------------------------------------ */

.alert {
    display: flex; align-items: start; gap: 0.65rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    font-size: var(--step--1); font-weight: 500;
}
.alert-error   { background: var(--danger-bg);  color: var(--danger-fg); }
.alert-success { background: var(--success-bg); color: var(--success-fg); }
.alert[hidden] { display: none; }

.form-done {
    display: grid; place-items: center; gap: 0.85rem;
    text-align: center; padding: 2.5rem 1rem;
    animation: pop 0.35s var(--ease);
}
.form-done__badge {
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--success-bg); color: var(--success-fg);
}
.form-done__badge .icon { width: 28px; height: 28px; stroke-width: 2.25; }

/* --------------------------------------------------------- contact panel - */

.info-panel {
    background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
    color: #e9edf5;
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.info-panel::after {
    content: ''; position: absolute; inset: auto -20% -55% auto;
    width: 22rem; height: 22rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(47 107 255 / 45%), transparent 65%);
    pointer-events: none;
}
.info-panel h2 { font-size: var(--step-2); color: #fff; }
.info-panel p { color: #a9b4c9; }

.info-list { display: grid; gap: 1rem; margin-top: 1.75rem; }
.info-list__item { display: flex; gap: 0.9rem; align-items: start; }
.info-list__icon {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: var(--radius);
    background: rgb(255 255 255 / 8%); color: var(--brand-300);
}
.info-list__label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #7d8aa3;
}
.info-list__value { color: #fff; font-weight: 550; }
.info-list__value a { color: #fff; text-decoration: none; }
.info-list__value a:hover { text-decoration: underline; }

/* The embedded map is a grid child of .info-list, so it lines up under the
   address without being an .info-list__item itself. It spans the panel's full
   inner width rather than starting past the icon column: indenting it left the
   block visibly off-centre against the flush right edge. */
.map-embed {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    background: rgb(255 255 255 / 6%);
}
.map-embed iframe {
    display: block; width: 100%; height: 190px; border: 0;
    /* Google's embed is a light-mode tile set; damp it so it does not glare
       against the dark panel, and restore it on hover. */
    filter: grayscale(0.35) contrast(0.92) brightness(0.92);
    transition: filter 0.25s var(--ease);
}
.map-embed:hover iframe, .map-embed:focus-within iframe { filter: none; }
.map-embed__link {
    position: absolute; inset-inline-end: 0.5rem; inset-block-end: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.35rem 0.55rem 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--ink-900); color: #fff;
    font-size: 0.72rem; font-weight: 600; text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.map-embed__link:hover { background: var(--brand-600); }

@media (max-width: 34rem) {
    .map-embed iframe { height: 160px; }
}

/* A touch drag that starts on a Google embed pans the map instead of the
   page, so the reader gets stuck on it. The map is inert until tapped;
   app.js flips [data-active] on. */
@media (pointer: coarse) {
    .map-embed:not([data-active]) iframe { pointer-events: none; }
    .map-embed__unlock {
        position: absolute; inset: 0;
        display: grid; place-items: center;
        border: 0; padding: 0; cursor: pointer;
        background: rgb(10 15 26 / 28%); color: #fff;
        font-size: 0.78rem; font-weight: 600;
    }
    .map-embed__unlock span {
        padding: 0.4rem 0.8rem; border-radius: var(--radius-pill);
        background: var(--ink-900); box-shadow: var(--shadow-sm);
    }
    .map-embed[data-active] .map-embed__unlock { display: none; }
}
@media (pointer: fine) {
    .map-embed__unlock { display: none; }
}

/* ------------------------------------------------------------- reviews -- */

/* Slider without a library: a scroll-snap track. Arrows and dots only appear
   once app.js has wired them, so no-JS still gets a swipeable strip. */
.reviews {
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
}
.reviews__head { display: flex; align-items: start; gap: 1rem; justify-content: space-between; }
.reviews__head h3 { font-size: var(--step-1); color: #fff; }
.reviews__meta { font-size: var(--step--1); color: #a9b4c9; margin-top: 0.15rem; }

.reviews__nav { display: flex; gap: 0.4rem; flex: none; }
.reviews__nav[hidden] { display: none; }
.reviews__arrow {
    display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 6%); color: #e9edf5;
    cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.reviews__arrow:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.reviews__arrow:active { transform: scale(0.94); }

.reviews__track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0.9rem;
    margin-top: 1.1rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review {
    scroll-snap-align: center;
    display: grid; gap: 0.6rem; align-content: start;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 6%);
}
.review__stars { display: inline-flex; gap: 0.1rem; color: #f5b544; }
.review__text { color: #e9edf5; font-size: var(--step--1); line-height: 1.6; }
.review__author { color: #fff; font-weight: 600; font-size: var(--step--1); }

.reviews__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: 1rem;
}
.reviews__dots { display: flex; align-items: center; gap: 0.4rem; }
.reviews__dots[hidden] { display: none; }
.reviews__dot {
    position: relative;
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: rgb(255 255 255 / 28%); cursor: pointer;
    transition: background 0.2s, width 0.2s var(--ease);
}
/* The dot stays 7px; the thing a thumb has to hit is 30px. */
.reviews__dot::after { content: ''; position: absolute; inset: -12px -8px; }
.reviews__dot[aria-current="true"] { width: 20px; border-radius: var(--radius-pill); background: var(--brand-300); }

.reviews__link {
    margin-left: auto;
    color: var(--brand-300); font-size: var(--step--1); font-weight: 600;
    text-decoration: none;
}
.reviews__link:hover { text-decoration: underline; }

/* -------------------------------------------------------------- sections - */

.section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.section-head { --stack-gap: 0.85rem; max-width: 56ch; margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem); }

.steps {
    display: grid; gap: 1.25rem;
    grid-template-columns: 1fr;
    counter-reset: step;
}
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 1.5rem; }
.step__num {
    counter-increment: step;
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-bottom: 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--brand-50); color: var(--brand-700);
    font-weight: 700; font-size: var(--step--1);
}
.step__num::before { content: counter(step); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.step p { color: var(--text-muted); font-size: var(--step--1); }

/* ----------------------------------------------------------------- prose - */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--text-muted); }

.prose h3 {
    font-size: var(--step-1);
    margin-top: 1.9em;
    color: var(--text);
}

/* Labelled points: the label reads as a heading, the body as prose. */
.prose-list { list-style: none; padding: 0; display: grid; gap: 0.9rem; }

.prose-list li {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.prose-list strong { font-weight: 650; color: var(--text); }
.prose-list span { color: var(--text-muted); font-size: var(--step--1); }

/* ---------------------------------------------------------------- footer - */

.site-footer {
    margin-top: auto;
    padding-block: 2.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-subtle);
    font-size: var(--step--1);
}
.site-footer__inner {
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
    align-items: center; justify-content: space-between;
}

.page-shell { display: flex; flex-direction: column; min-height: 100svh; }

/* =========================================================================
   Admin
   ========================================================================= */

.admin-body { background: var(--bg-sunken); }

.admin-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.admin-header__inner {
    display: flex; align-items: center; gap: 0.75rem;
    min-height: 62px;
}
.admin-header .brand__mark { height: 32px; }
.admin-badge {
    padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
    background: var(--brand-50); color: var(--brand-700);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}

/* Brand + badge + theme toggle + "Sign out" overran a 375px header. The
   badge is the least load-bearing of the four. */
@media (max-width: 40rem) {
    .admin-header__inner { gap: 0.5rem; }
    /* Scoped to the header: the login page uses the same badge as a title. */
    .admin-header .admin-badge { display: none; }
}

.admin-main { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.stats {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.25rem;
}
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.1rem 1.25rem; }
.stat__label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-subtle);
}
.stat__value {
    font-size: var(--step-3); font-weight: 680; letter-spacing: -0.03em;
    line-height: 1.1; margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.stat__value small { font-size: var(--step--1); font-weight: 500; color: var(--text-subtle); letter-spacing: 0; }

.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
}

.segmented {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.segmented a {
    padding: 0.4rem 0.95rem; border-radius: var(--radius-pill);
    font-size: var(--step--1); font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.segmented a:hover { color: var(--text); }
.segmented a[aria-current="page"] { background: var(--brand-500); color: #fff; }

.search {
    position: relative; flex: 1 1 15rem; max-width: 22rem; margin-inline-start: auto;
}
@media (max-width: 40rem) {
    /* Wrapped onto its own row, `auto` start-margin left it stranded right. */
    .search { max-width: none; margin-inline-start: 0; }
    .segmented { flex: 1 1 auto; }
    .segmented a { flex: 1; text-align: center; }
}
.search .icon {
    position: absolute; left: 0.8rem; top: 50%; translate: 0 -50%;
    color: var(--text-subtle); pointer-events: none;
}
.search input { padding-left: 2.4rem; background: var(--bg-elevated); }

/* --- table -------------------------------------------------------------- */

.table-card { overflow: hidden; padding: 0; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }

.table th {
    text-align: left; white-space: nowrap;
    padding: 0.7rem 1rem;
    background: var(--bg-inset);
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-subtle);
}
@media (min-width: 46rem) {
    /* Sticks to .table-scroll, never to the viewport: `overflow-x: auto` makes
       that div a scroll container, which becomes the sticky root. An offset
       here is measured from ITS top edge, so the 62px meant to clear the admin
       header instead pushed the row of labels down over the first car. */
    .table th { position: sticky; top: 0; }
}
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover { color: var(--text); }
.table th .icon { opacity: 0; margin-left: 0.2rem; vertical-align: -2px; }
.table th[aria-sort] { color: var(--text); }
.table th[aria-sort] .icon { opacity: 1; }
.table th[aria-sort="descending"] .icon { rotate: 180deg; }

/* `.table th` sets text-align, so the bare `.cell-actions` rule below loses on
   specificity and the header drifts left of its own buttons. */
.table th.cell-actions { text-align: right; }

.table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background 0.12s; }
.table tbody tr:hover { background: var(--bg-inset); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[hidden] { display: none; }

.cell-id { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.cell-name { font-weight: 600; color: var(--text); }
.cell-num { font-variant-numeric: tabular-nums; }
.cell-actions { text-align: right; white-space: nowrap; }

.plate-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: #fff; color: #14181f;
    border: 1px solid #14181f; border-radius: 5px;
    font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.04em; white-space: nowrap;
}

.chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 650;
    background: var(--bg-sunken); color: var(--text-muted);
}
.chip-brand  { background: var(--brand-50); color: var(--brand-700); }
.chip-muted  { background: var(--bg-sunken); color: var(--text-subtle); }

.link-btn {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--brand-600); font-weight: 600; font-size: inherit;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger-fg); }

.empty {
    display: grid; place-items: center; gap: 0.6rem;
    padding: 4rem 1rem; text-align: center; color: var(--text-muted);
}
/* `display` here outranks the browser's own [hidden] rule, so the
   search-miss panel needs saying explicitly or it never goes away. */
.empty[hidden] { display: none; }
.empty .icon { width: 34px; height: 34px; color: var(--text-subtle); }
.empty h3 { font-size: var(--step-1); color: var(--text); }

/* --- drawer ------------------------------------------------------------- */

.drawer {
    position: fixed; inset: 0; z-index: 100;
    display: grid; grid-template-columns: 1fr min(100% - 2.5rem, 34rem);
    pointer-events: none;
}
.drawer[hidden] { display: none; }
.drawer__scrim {
    background: rgb(6 10 18 / 55%);
    opacity: 0; transition: opacity 0.28s var(--ease);
    pointer-events: auto;
    backdrop-filter: blur(2px);
}
.drawer__panel {
    display: flex; flex-direction: column;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    translate: 100% 0;
    transition: translate 0.32s var(--ease);
    pointer-events: auto;
    overflow: hidden;
}
.drawer[data-open] .drawer__scrim { opacity: 1; }
.drawer[data-open] .drawer__panel { translate: 0 0; }

.drawer__head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.drawer__head h2 { font-size: var(--step-1); }
.drawer__head .icon-btn { margin-inline-start: auto; }
.drawer__body {
    padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; flex: 1;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.drawer__body > * + * { margin-top: 1.5rem; }

.detail-grid { display: grid; gap: 0.1rem; }
.detail-grid > div {
    display: grid; grid-template-columns: minmax(8rem, 38%) 1fr;
    gap: 1rem; padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--step--1);
}
.detail-grid > div:last-child { border-bottom: 0; }
@media (max-width: 30rem) {
    /* An 8rem label column left ~5rem for the value; emails wrapped to four
       lines. Stack instead. */
    .detail-grid > div { grid-template-columns: 1fr; gap: 0.15rem; }
}
.detail-grid dt { color: var(--text-subtle); font-weight: 500; }
.detail-grid dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }

.section-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-subtle);
    margin-bottom: 0.6rem;
}

/* Native scroll-snap gallery, replacing the carousel library. */
.gallery {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(72%, 1fr);
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 0.4rem;
}
.gallery a {
    scroll-snap-align: center;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-sunken);
    aspect-ratio: 4 / 3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* --- dialog + toast ----------------------------------------------------- */

dialog {
    /* A modal dialog is centred by the UA via `margin: auto`, which the
       `* { margin: 0 }` reset above wipes out -- author rules beat the UA
       stylesheet -- leaving it pinned to the top-left. Restore it. */
    margin: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text);
    padding: 0;
    max-width: min(92vw, 26rem);
    box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgb(6 10 18 / 55%); backdrop-filter: blur(2px); }
dialog[open] { animation: pop 0.2s var(--ease); }
.dialog-body { padding: 1.5rem; }
.dialog-body h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.dialog-body p { color: var(--text-muted); font-size: var(--step--1); }
.dialog-actions { display: flex; gap: 0.6rem; justify-content: end; margin-top: 1.5rem; }

.toasts {
    position: fixed; z-index: 200; left: 50%; translate: -50% 0;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    display: grid; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem);
}
.toast {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    background: var(--ink-800); color: #fff;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    font-size: var(--step--1); font-weight: 550;
    animation: toast-in 0.3s var(--ease);
}
.toast .icon { color: #6fe0a5; }
@keyframes toast-in { from { opacity: 0; translate: 0 16px; } }

/* -------------------------------------------------------------- a11y/misc - */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        /* Without this, a staggered `backwards` fill would hold menu items
           invisible for the length of their delay. */
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .admin-header, .toolbar, .site-footer, .drawer, .toasts { display: none !important; }
}

/* ======================================================================== */
/* Cars: admin management + the public listing                              */
/* ======================================================================== */

/* --- admin chrome ------------------------------------------------------- */

.admin-nav { display: flex; gap: 0.2rem; margin-inline-start: 0.5rem; flex-wrap: wrap; }
.admin-nav a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.75rem; border-radius: var(--radius-pill);
    font-size: var(--step--1); font-weight: 550;
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.admin-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.admin-nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }

@media (max-width: 52rem) {
    /* The admin panel is desktop-first, but the header must still be usable
       when it is opened on a phone. */
    .admin-header__inner { flex-wrap: wrap; row-gap: 0.6rem; }
    .admin-nav { order: 3; width: 100%; margin-inline-start: 0; }
}

.row-thumb {
    width: 64px; height: 48px; object-fit: cover; flex: none;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--bg-sunken);
}
.row-thumb--empty { display: grid; place-items: center; color: var(--text-subtle); }

.chip-status { font-weight: 650; }
.chip-for-sale { background: var(--success-bg); color: var(--success-fg); }
.chip-reserved { background: var(--warn-bg); color: var(--warn-fg); }
.chip-sold { background: var(--bg-sunken); color: var(--text-muted); }

.money-positive { color: var(--success-fg); }
.money-negative { color: var(--danger-fg); }
.stat__value--money { font-size: var(--step-1); }
.stat__value--money.is-positive { color: var(--success-fg); }
.stat__value--money.is-negative { color: var(--danger-fg); }

.table-note {
    margin-top: 1rem; font-size: var(--step--1); color: var(--text-subtle);
}

.card-title { font-size: var(--step-1); margin-bottom: 1rem; }

/* --- admin car form ----------------------------------------------------- */

.form-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.form-head h1 { font-size: var(--step-2); margin-top: 0.35rem; }

.back-link {
    display: inline-block; font-size: var(--step--1); font-weight: 550;
    color: var(--text-muted); text-decoration: none;
}
.back-link:hover { color: var(--brand-600); }

.car-form__grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) {
    .car-form__grid { grid-template-columns: minmax(0, 1fr) 22rem; }
    /* Long form on the left, decisions on the right within reach of the eye. */
    .car-form__side { position: sticky; top: 1.5rem; }
}
.car-form__main, .car-form__side { display: grid; gap: 1.5rem; align-content: start; }

.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 46rem) { .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field--wide { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }

.textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }
.select { appearance: none; padding-right: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.05rem center, right 0.8rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.lookup-row { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; }
.lookup-row .field { flex: 1 1 14rem; }

.lookup-status {
    margin-top: 0.75rem; font-size: var(--step--1); font-weight: 550;
    padding: 0.6rem 0.85rem; border-radius: var(--radius);
}
.lookup-status[hidden] { display: none; }
.lookup-status[data-kind="ok"] { background: var(--success-bg); color: var(--success-fg); }
.lookup-status[data-kind="warn"] { background: var(--warn-bg); color: var(--warn-fg); }

.switch { display: flex; gap: 0.7rem; align-items: start; cursor: pointer; }
.switch input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--brand-500); flex: none; }
.switch span { display: grid; gap: 0.15rem; font-size: var(--step--1); }
.switch small { color: var(--text-subtle); }

.admin-only .card-header { justify-content: space-between; }

.expense-rows { display: grid; gap: 0.5rem; }
.expense-row {
    display: grid; gap: 0.4rem;
    grid-template-columns: minmax(0, 1fr) 6.5rem auto;
    align-items: center;
}
/* The date sits on its own line: three inputs plus a delete button in a
   22rem sidebar leaves nothing legible. */
.expense-row input[type="date"] { grid-column: 1 / 3; }
.expense-row .icon-btn { grid-row: 1 / 3; }
.expense-row .input { padding: 0.5rem 0.65rem; font-size: var(--step--1); }

.icon-btn--sm { width: 32px; height: 32px; }

.profit-summary {
    display: grid; gap: 0.1rem; margin-top: 1.25rem;
    padding-top: 1rem; border-top: 1px solid var(--border);
}
.profit-summary > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.35rem 0; font-size: var(--step--1);
}
.profit-summary dt { color: var(--text-subtle); }
.profit-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 550; }
.profit-summary__total {
    margin-top: 0.4rem; padding-top: 0.7rem !important;
    border-top: 1px solid var(--border);
}
.profit-summary__total dt { color: var(--text); font-weight: 650; }
.profit-summary__total dd { font-size: var(--step-1); font-weight: 700; }

.record-summary {
    cursor: pointer; font-weight: 600; font-size: var(--step--1);
    display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted);
}
details[open] .record-summary { margin-bottom: 1rem; }

.thumbs--sortable .thumb { cursor: grab; }
.thumbs--sortable .thumb.is-dragging { opacity: 0.4; }
.thumb__badge {
    position: absolute; left: 4px; bottom: 4px;
    padding: 0.1rem 0.4rem; border-radius: var(--radius-pill);
    background: rgb(10 15 26 / 72%); color: #fff;
    font-size: 0.65rem; font-weight: 650; letter-spacing: 0.03em;
}

.form-actions {
    display: flex; gap: 0.75rem; justify-content: center;
    margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}

/* --- public: filters ---------------------------------------------------- */

.filters { margin-bottom: 1.5rem; }
.filters__bar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.filters__search { flex: 1 1 14rem; }

.segmented--scroll { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.segmented--scroll::-webkit-scrollbar { display: none; }

.filters__panel {
    margin-top: 1rem; padding: 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.filters__panel[hidden] { display: none; }

.filters__grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.filters__actions {
    display: flex; gap: 0.6rem; justify-content: end; flex-wrap: wrap;
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}

.results-count {
    font-size: var(--step--1); color: var(--text-muted); font-weight: 550;
    margin-bottom: 1rem;
}

/* --- public: car grid --------------------------------------------------- */

.car-grid {
    list-style: none; padding: 0; display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.car-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}
.car-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.car-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }

.car-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunken); }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; }
.car-card__placeholder {
    position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-subtle);
}
.car-card__placeholder .icon { width: 40px; height: 40px; }
/* A sold car stays in the list as a reference, so it reads as past tense. */
.car-card.is-sold .car-card__media img { filter: grayscale(0.75); }
.car-card.is-sold:hover .car-card__media img { filter: grayscale(0.25); }

.car-card__count {
    position: absolute; right: 0.6rem; bottom: 0.6rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
    background: rgb(10 15 26 / 68%); color: #fff;
    font-size: var(--step--1); font-weight: 600;
}

.car-badge {
    position: absolute; left: 0.6rem; top: 0.6rem;
    padding: 0.25rem 0.65rem; border-radius: var(--radius-pill);
    font-size: var(--step--1); font-weight: 700; letter-spacing: 0.02em;
}
.car-badge--sold { background: var(--badge-sold-bg); color: var(--badge-sold-fg); }
.car-badge--reserved { background: var(--warn-bg); color: var(--warn-fg); }
.car-badge--inline { position: static; display: inline-block; margin-bottom: 0.6rem; }

.car-card__body { padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.35rem; }
.car-card__title { font-size: var(--step-1); line-height: 1.25; }
.car-card__meta { font-size: var(--step--1); color: var(--text-muted); }
.car-card__price { font-size: var(--step-1); font-weight: 700; margin-top: 0.2rem; }
.car-card__price small {
    display: block; font-size: var(--step--1); font-weight: 550; color: var(--text-subtle);
}
.car-card__price--soft { font-size: var(--step-0); font-weight: 600; color: var(--text-muted); }

.car-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.pager {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: 2.5rem;
}
.pager__state { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager .is-disabled { opacity: 0.4; pointer-events: none; }

/* --- public: car detail -------------------------------------------------- */

.car-detail__grid { display: grid; gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (min-width: 62rem) {
    .car-detail__grid { grid-template-columns: minmax(0, 1fr) 21rem; }
    .car-detail__side { position: sticky; top: 5.5rem; }
}

.car-gallery { display: grid; gap: 0.6rem; }
.car-gallery__hero {
    position: relative; display: block; padding: 0; border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-sunken); cursor: zoom-in;
    aspect-ratio: 4 / 3;
}
.car-gallery__hero img { width: 100%; height: 100%; object-fit: cover; }
.car-gallery__zoom {
    position: absolute; right: 0.75rem; bottom: 0.75rem;
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: rgb(10 15 26 / 68%); color: #fff;
}

.car-gallery__strip {
    list-style: none; padding: 0 0 0.3rem; margin: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, 9rem);
    /* Not `1fr`: with two photos the tracks stretched to fill the row and the
       thumbnails came out almost as large as the hero above them. */
    justify-content: start;
    gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.car-gallery__strip button {
    display: block; padding: 0; width: 100%; aspect-ratio: 4 / 3;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--bg-sunken);
    cursor: zoom-in; scroll-snap-align: start;
}
.car-gallery__strip img { width: 100%; height: 100%; object-fit: cover; }
.car-gallery__strip button:hover { border-color: var(--brand-500); }

.car-summary__title { font-size: var(--step-2); line-height: 1.2; }
.car-summary__price {
    font-size: var(--step-3); font-weight: 700; margin-top: 0.5rem; line-height: 1.1;
}
.car-summary__price small {
    display: block; font-size: var(--step--1); font-weight: 550; color: var(--text-subtle);
}

.car-summary__facts {
    list-style: none; padding: 0; margin-top: 1.25rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    font-size: var(--step--1); color: var(--text-muted);
}
.car-summary__facts li { display: flex; align-items: center; gap: 0.45rem; }
.car-summary__facts .icon { color: var(--brand-500); flex: none; }

.car-summary__cta {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.car-summary__cta h3 { font-size: var(--step-1); }
.car-summary__cta p { font-size: var(--step--1); color: var(--text-muted); margin: 0.3rem 0 1rem; }

.car-description { white-space: pre-line; }

.related { margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }

/* --- lightbox ------------------------------------------------------------ */

.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__scrim {
    position: absolute; inset: 0; border: 0; padding: 0;
    background: rgb(4 7 13 / 92%); cursor: zoom-out;
}
.lightbox__figure {
    position: relative; margin: 0; display: grid; gap: 0.75rem; justify-items: center;
    max-width: min(100vw - 1.5rem, 1400px);
    opacity: 0; scale: 0.98; transition: opacity 0.22s var(--ease), scale 0.22s var(--ease);
}
.lightbox[data-open] .lightbox__figure { opacity: 1; scale: 1; }
.lightbox__figure img {
    max-width: 100%;
    /* Room for the caption and the safe area, so nothing is cropped on a
       phone in landscape. */
    max-height: calc(100svh - 8rem);
    width: auto; object-fit: contain; border-radius: var(--radius);
}
.lightbox__caption { color: #c7cedd; font-size: var(--step--1); font-variant-numeric: tabular-nums; }

.lightbox__btn {
    position: absolute; z-index: 1;
    display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgb(255 255 255 / 10%); color: #fff;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.lightbox__btn:hover { background: rgb(255 255 255 / 20%); }
.lightbox__btn:active { transform: scale(0.94); }
.lightbox__btn[hidden] { display: none; }
.lightbox__btn--close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.lightbox__btn--prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: 1rem; top: 50%; translate: 0 -50%; }

@media (max-width: 34rem) {
    /* Arrows over the photo on a narrow screen; the swipe is the primary
       gesture there anyway. */
    .lightbox__btn--prev { left: 0.5rem; }
    .lightbox__btn--next { right: 0.5rem; }
    .lightbox__figure img { max-height: calc(100svh - 10rem); }
}

@media print {
    .filters, .pager, .lightbox { display: none !important; }
}