/* ── Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* ── Design tokens — light (the only theme) ─────────────────────────── */
/*
   Neutrals are tinted toward hue 42 (the brand orange), chroma 0.006–0.012.
   This creates perceptual warmth without visible color — surfaces feel
   intentional rather than lifted from a generic template.
   All colors in OKLCH for perceptual uniformity.
*/
:root {
    color-scheme: light;

    /* Surfaces */
    --bg:       oklch(0.97 0.004 42);
    --card:     oklch(0.995 0.002 42);
    --card2:    oklch(0.96 0.004 42);
    --overlay:  oklch(0.10 0 0 / 0.50);

    /* Borders */
    --border:   oklch(0.87 0.007 42);
    --border-l: oklch(0.81 0.009 42);

    /* Text */
    --text:     oklch(0.18 0.012 42);
    --muted:    oklch(0.46 0.012 42);
    --dim:      oklch(0.58 0.010 42);

    /* Accent — orange */
    --accent:   oklch(0.70 0.21 42);
    --accent-h: oklch(0.64 0.21 42);

    /* Semantic — operational (green), fault (red), info (blue), attention (yellow) */
    --green:     oklch(0.72 0.175 145);
    --green-bg:  oklch(0.92 0.055 145);
    --red:       oklch(0.64 0.215 25);
    --red-bg:    oklch(0.93 0.040 25);
    --blue:      oklch(0.70 0.145 245);
    --blue-bg:   oklch(0.93 0.040 245);
    --yellow:    oklch(0.78 0.135 85);
    --yellow-bg: oklch(0.93 0.040 85);

    /* Geometry */
    --radius:    8px;
    --radius-s:  5px;
    --sidebar-w: 170px;
    --sidebar-c: 60px;

    /* Spacing — 4pt scale */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Typography */
    --font-body:    'Manrope', system-ui, sans-serif;
    --font-display: 'Barlow Condensed', system-ui, sans-serif;
}

/* ── Scrollbars ──────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-l) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-l); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Paint the document background on the root so full-page navigations don't
   flash white between documents (the body bg alone leaves the html canvas
   default-white). */
html { background: var(--bg); }

/* ── Cross-document view transitions ─────────────────────────── */
/* Subtle crossfade between full-page navigations (Chromium). Other browsers
   ignore this and get the normal — now flash-free — navigation.
   DISABLED: in current Chromium the transition never completes on this app,
   which leaves the document animation timeline frozen at 0 after the first
   navigation — every CSS animation in the app (toasts, spinners) stays
   invisible. Re-enable only after verifying animations keep running
   (document.timeline.currentTime must advance after navigating). */
/* @view-transition { navigation: auto; } */
/* Persistent chrome keeps its own snapshot so it doesn't crossfade/flicker. */
/* .sidebar       { view-transition-name: sidebar; }
   .mobile-topbar { view-transition-name: topbar; } */
/* Fast and functional, not decorative (per DESIGN.md). */
/* ::view-transition-old(root),
   ::view-transition-new(root) { animation-duration: 140ms; } */

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    /* +0.1 line-height for light text on dark: keeps reading comfortable */
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display font — applied to structural headings, not all h* */
.brand-text,
.mobile-title,
.section-title,
.page-header h1,
.modal-header h2,
.card-title {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge-green  { background: var(--green-bg);  color: var(--green);  }
.badge-red    { background: var(--red-bg);    color: var(--red);    }
.badge-blue   { background: var(--blue-bg);   color: var(--blue);   }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-muted  { background: var(--card2);     color: var(--muted);  }

/* Document status badges - shared by the users table and the machine roster.
   `--missing` is red because a driver without an SOS plan is a problem either
   way. A machine that simply has no basket is not, so machines distinguish
   "lapsed" (--expired) from "never uploaded" (--none). */
.doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.doc-badge + .doc-badge {
    margin-left: 2px;
}

.doc-badge--valid   { color: var(--green);  }
.doc-badge--soon    { color: var(--yellow); }
.doc-badge--missing { color: var(--red);    }
.doc-badge--expired { color: var(--red);    }
.doc-badge--none    { color: var(--dim);    }

/* Inspection warning triangle — yellow (expiring) or red (expired). Used by
   both the machine roster and the car roster; it lived in machines.css, which
   the cars page never loads, so the cars triangle rendered with no colour at
   all and yellow was indistinguishable from red. */
.insp-warn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}
.insp-warn--yellow { color: var(--yellow); }
.insp-warn--red    { color: var(--red);    }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-s);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    transition: background 0.10s, color 0.10s, border-color 0.10s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Native color input in the create/edit modals */
.color-input {
    width: 56px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--card);
    cursor: pointer;
}

/* Focus-visible: explicit keyboard focus ring, compliant with WCAG 2.4.7 */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary         { background: var(--accent);  color: oklch(0.99 0 0); }
.btn-primary:hover   { background: var(--accent-h); }
.btn-primary:active  { background: oklch(0.60 0.21 42); }

.btn-secondary       { background: var(--card2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-l); }
.btn-secondary:active { background: var(--bg); }

.btn-ghost           { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover     { color: var(--text); border-color: var(--border-l); }
.btn-ghost:active    { background: oklch(0.70 0.21 42 / 0.07); }

.btn-danger          { background: var(--red-bg); color: var(--red); border: 1px solid transparent; }
.btn-danger:hover    { background: var(--red); color: oklch(0.99 0 0); }
.btn-danger:active   { background: oklch(0.58 0.215 25); color: oklch(0.99 0 0); }

.btn-danger-hover:hover { color: var(--red); }

.btn-sm   { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-icon { padding: 0.4rem; justify-content: center; }

/*
   iconify-icon renders as display:inline by default. Inside a flex button
   this introduces font-metric descent space, shifting the icon down.
   display:block makes it a proper flex item — parent's align-items:center
   then centers it geometrically.
*/
.btn iconify-icon { display: block; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
}

/* ── Form elements ───────────────────────────────────────────── */
label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--sp-1);
    letter-spacing: 0.02em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.5rem 0.7rem;
    color: var(--text);
    font-size: 0.875rem;
    font-family: var(--font-body);
    transition: border-color 0.10s, box-shadow 0.10s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.70 0.21 42 / 0.16);
}

/* Inline validation — only fires after the user has interacted with the field */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px oklch(0.64 0.215 25 / 0.14);
}

.field-error {
    display: block;
    font-size: 0.75rem;
    color: var(--red);
    margin-top: var(--sp-1);
}

select option { background: var(--card); color: var(--text); }
textarea { resize: vertical; min-height: 80px; }

.field           { margin-bottom: var(--sp-4); }
.field-hint      { display: block; font-size: 0.75rem; color: var(--dim); margin-top: var(--sp-1); }
.form-group      { margin-bottom: var(--sp-4); }

/* Collapsed "Egen prompt" field under the image preview in the car and machine
   modals. Native <details> — the open/closed state is UI-local and needs no
   signal and no script. */
.img-prompt {
    margin-top: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--card2);
}
.img-prompt > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.img-prompt > summary::-webkit-details-marker { display: none; }
.img-prompt > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.12s;
}
.img-prompt[open] > summary::before { transform: rotate(90deg); }
.img-prompt > summary:hover { color: var(--text); }
.img-prompt-body { padding: 0 0.7rem 0.7rem; }
.img-prompt-body textarea { min-height: 64px; }
/* Marks a saved prompt so it's visible without opening the disclosure. */
.img-prompt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.form-row-check {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    margin-bottom: var(--sp-4);
}

.check-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.check-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ── Shared table ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table thead tr { border-bottom: 1px solid var(--border); }

.table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover         { background: var(--card2); }
.table a                      { color: var(--text); font-weight: 500; }
.table a:hover                { color: var(--accent); }

/* Sortable table headers — shared by users + customers tables. */
.th-sort a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}
.th-sort a:hover     { color: var(--text); }
.th-sort--active a   { color: var(--accent); }

.td-muted   { color: var(--muted); }
.td-date    { font-size: 0.8rem; color: var(--muted); }
.td-name    { font-weight: 600; }
.td-actions { white-space: nowrap; text-align: right; }

/* ── Modal ───────────────────────────────────────────────────── */
/*
   DataStar controls visibility via style="display:none".
   CSS default must be the VISIBLE state (flex).
*/
/* An open modal freezes the page under it. Without this the page keeps
   scrolling behind the overlay while the modal's own content stays put, which
   on a phone reads as "the modal won't scroll". data-show toggles the inline
   display, so a backdrop whose style attribute no longer says "none" is the
   open one. */
html:has(.modal-backdrop:not([style*="none"])) {
    overflow: hidden;
}

.modal-backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    /* The overlay owns the scroll while it is open: it scrolls itself if a modal
       ever outgrows it, and `contain` stops a touch drag anywhere on the overlay
       from chaining through to the page behind it. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 640px) {
    .modal-backdrop {
        align-items: flex-start;
        padding: calc(52px + 0.5rem) 0.5rem max(env(safe-area-inset-bottom), 0.5rem);
        box-sizing: border-box;
    }

    .modal,
    .modal-wide {
        position: static;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 52px - 1rem - env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }

    .modal-header { flex-shrink: 0; }

    /* The content region scrolls, and it is matched by what it is *not*: a
       modal wraps its content in .modal-body, .modal-form, a bare <form> or a
       page-specific class, and naming them one by one left most modals with no
       scrollable region at all — the modal clips (overflow hidden above) and
       nothing inside it scrolls, so anything past the fold is unreachable.
       Every modal has exactly one such child. */
    .modal > :not(.modal-header):not(.modal-actions) {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Actions bar stays pinned at the bottom of the modal */
    .modal > .modal-actions,
    .modal-wide > .modal-actions {
        flex-shrink: 0;
        margin-top: 0;
    }
}

.modal-wide { max-width: 760px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-header h2 { font-size: 1.1rem; font-weight: 700; }

/* Destructive confirm modals — red title signals irreversibility at a glance */
.modal-confirm .modal-header h2 { color: var(--red); }

.modal form,
.modal-form,
.modal-body { padding: var(--sp-4) var(--sp-6); }

.modal-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

/* An action bar that is a direct child of .modal (not wrapped in a padded
   form/body) needs the body's horizontal + bottom inset, otherwise its buttons
   sit flush in the modal's corner. Form-wrapped action bars get their padding
   from the wrapper, so this is scoped to direct children only. */
.modal > .modal-actions {
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
    padding-bottom: var(--sp-4);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-4);
    color: var(--muted);
}

.empty-state iconify-icon {
    display: block;
    margin: 0 auto var(--sp-4);
    /* Warm accent tint — dim (0.49) is nearly invisible at this size; accent at
       45 % opacity reads as soft orange warmth without fighting the content */
    color: oklch(0.70 0.21 42 / 0.45);
}

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    flex: 1;
    line-height: 1.15;
}

/* ── Touch target enforcement ────────────────────────────────── */
/*
   On touch devices (no hover, coarse pointer) interactive elements
   must meet the 44×44px minimum. We use min-height rather than
   fixed height so content can still expand naturally.
*/
@media (hover: none) and (pointer: coarse) {
    .btn     { min-height: 44px; }
    .btn-sm  { min-height: 38px; } /* small buttons get a slight concession */
    .btn-icon { min-height: 44px; min-width: 44px; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
/*
   Disable non-essential motion for users who've opted out.
   Focus rings and opacity changes are preserved (not layout motion).
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Misc utils ──────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

/* Screen-reader only — visually hidden but announced by assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green  { background: var(--green);  }
.dot-red    { background: var(--red);    }
.dot-yellow { background: var(--yellow); }
.dot-muted  { background: var(--muted);  }

/* ── Skeleton placeholders ───────────────────────────────────── */
/*
   Shared loading primitives: heavy pages paint an instant skeleton
   while real data streams in over SSE (no spinner). Token-driven so
   they adapt to light/dark automatically. Pulse mirrors the on-brand
   feel of map.css's @keyframes pulse without depending on it.
*/
@keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }

.skel {
    background: var(--card2);
    border-radius: var(--radius-s);
    animation: skel-pulse 1.2s ease-in-out infinite;
}
.skel-cell { width: 100%; height: 100%; min-height: 1.5rem; }
.skel-row  { height: 2.5rem; margin: .25rem 0; }
.skel-text { display: inline-block; height: .8em; width: 8ch; vertical-align: middle; }

/* ── Mobile responsive tables ──────────────────────────────── */
/*
   Below 600 px the shared .table collapses from a multi-column
   layout into card-style rows:
     • td:first-child and .td-name  → block primary heading
     • .td-muted                    → inline secondary metadata
     • .td-actions                  → absolute right-center of card
   Columns that carry neither class (e.g. badge/icon cells in
   safety checks) stay inline and appear after the muted text.
*/
@media (max-width: 600px) {
    .table-wrap { overflow-x: hidden; }

    .table thead          { display: none; }
    .table,
    .table tbody          { display: block; }

    .table tr {
        position: relative;
        display: block;
        padding: var(--sp-3) var(--sp-4);
        /* Reserve right edge for 2 action icon-buttons (~92 px) */
        padding-right: calc(var(--sp-3) + 96px);
        border-bottom: 1px solid var(--border);
    }

    .table tbody tr:last-child { border-bottom: none; }
    .table tbody tr:hover      { background: var(--card2); }

    /* All cells: strip table layout, flow as inline text by default */
    .table td {
        display: inline;
        padding: 0 2px 0 0;
        border: none;
        font-size: 0.75rem;
        color: var(--muted);
    }

    /* First cell per row — primary identifier (date, name, etc.) */
    .table td:first-child {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        padding: 0;
        margin-bottom: 2px;
    }

    /* Explicit primary cell overrides first-child with same intent */
    .table .td-name {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        padding: 0;
        margin-bottom: 2px;
    }

    /* Secondary text — one field per line so long values (email, address)
       never overflow into the absolutely-positioned action buttons */
    .table .td-muted {
        display: block;
        font-size: 0.75rem;
        color: var(--muted);
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Actions: pinned to right edge, vertically centered in card */
    .table .td-actions {
        position: absolute;
        right: var(--sp-3);
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: var(--sp-1);
        padding: 0;
        white-space: nowrap;
    }
}

/* Colour reference photo + logo toggle under the image preview in the car and
   machine edit modals. The upload is a native form (Datastar can't post files),
   so it sits as its own block rather than inside the modal's signal flow. */
.img-ref {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--card2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.img-ref-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.img-ref-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--border);
    background: var(--bg);
    flex: none;
}
.img-ref-copy { display: flex; flex-direction: column; min-width: 0; }
.img-ref-title { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.img-ref-form { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.img-ref-file { font-size: 0.8rem; color: var(--muted); max-width: 100%; }
.img-ref-file::file-selector-button {
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    margin-right: var(--sp-2);
    border: 1px solid var(--border-l);
    border-radius: var(--radius-s);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.img-ref-logo { font-size: 0.82rem; }

/* Picker for an already-generated vehicle image. The thumbnails sit on white
   discs, the same ground the map markers use, so a picture reads the same here
   as it will on the map. */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--sp-3);
    max-height: 46vh;
    overflow-y: auto;
    padding: var(--sp-1);
}
.pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--card2);
    cursor: pointer;
    transition: border-color 0.10s;
}
.pick:hover { border-color: var(--border-l); }
.pick--selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pick img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: oklch(1 0 0);
    border-radius: 50%;
}
.pick span {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* The radio is the state; the tile is the control. */
.pick-radio { position: absolute; opacity: 0; pointer-events: none; }