/* ─────────────────────────────────────────────────────────────────────────────
   Theme layer over Bootstrap 5.3 — Motorway-inspired palette.
   Rule: cream ground, near-black for anything interactive (buttons, links),
   yellow as a highlight only — never a small button. All values are tokens so
   the whole theme re-points from :root.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand tokens — verbatim from the brand kit's colors.css. Everything below points
       at these rather than repeating the hex values. */
    --bc-cream: #FBF7EB;   /* page background */
    --bc-ink: #1A1A1A;     /* text, structure, buttons */
    --bc-yellow: #FFDE00;  /* brand accent: icon, CTAs, highlights */
    --bc-white: #FFFFFF;   /* icon bubble */
    --bc-font: "Figtree", system-ui, sans-serif;

    --bs-body-bg: var(--bc-cream);
    --bs-body-color: var(--bc-ink);
    --bs-secondary-color: #6f6a60;
    --bs-body-font-family: var(--bc-font);
    --bs-border-color: #e7e1cf;
    --bs-border-color-translucent: #e7e1cf;

    --ink: var(--bc-ink);    /* buttons, links, footer */
    --ink-hover: #000000;
    --yellow: var(--bc-yellow); /* accent — surfaces & highlights only */
    --yellow-hover: #f2d200;
    --surface: #FFFFFF;
    --ring: 0 0 0 0.2rem rgba(26, 26, 26, 0.18);
}

body {
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main { flex: 1 0 auto; padding-top: 12px; }

/* Without a real native-app shell, the whole page was reachable by the browser's
   own pinch/double-tap zoom — "trippy" on a phone, per the user's own report
   (2026-10-01). `manipulation` drops pinch- and double-tap-zoom but keeps
   ordinary scrolling/tapping. Deliberately NOT put on `body` itself: touch-action
   restrictions apply to every descendant with no way for a child to opt back out
   (confirmed by actually testing it with a synthetic pinch gesture — setting
   `touch-action: auto` back on the lightbox's own image did nothing while `body`
   carried the restriction), so the one deliberate exception — the photo
   lightbox, see static/js/lightbox.js's file header for why zooming into a car's
   photo is worth keeping — has to sit OUTSIDE this rule's reach entirely, as a
   sibling of body's other top-level sections, not nested inside one of them
   (see base.html's `{% block lightbox %}`). */
body > *:not(.lightbox) { touch-action: manipulation; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.011em; font-weight: 600; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-hover); text-decoration: underline; }

/* ── Site nav — sticky yellow bar, always ONE row ──────────────────────────────────
   Widths (measured at the original 34px logo; it's now 5% smaller, so 191px): brand lockup 201px, the four links ~350px (~375 with the unread
   badge), 12px container padding each side. So:
     >= 640px  full lockup + links inline
     480-639   icon-only + links inline (the links leave no room for the wordmark)
     < 480     full lockup + a menu button — with the links tucked into the menu there's
               room again (lockup 201 + button ~32 + padding ≈ 270px, under the 320px
               narrowest phone); the links drop down under the bar
   Kit spec for the lockup: 32-36px tall, never stretched or recoloured. */
:root { --nav-h: 56px; }   /* the bar's height — sticky things below it offset by this */
html { scroll-padding-top: var(--nav-h); }
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1030;            /* above page content, below modals (1055) and the photo lightbox (1080) */
    background-color: var(--yellow);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; }
.site-nav .navbar-brand { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; margin-right: 0; flex-shrink: 0; }
.site-logo { height: 34px; width: auto; display: block; }
/* The nav's logo is 10% smaller than the kit's 34px reference (34 x 0.9 = 30.6px) — a deliberate,
   user-requested step below the kit's 32-36px guidance. The footer keeps the full 34px. */
.site-nav .site-logo { height: 30.6px; }
.site-logo-icon { width: 34px; display: none; }
.site-nav .site-logo-icon { width: 30.6px; }
.site-nav-links { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; }
.site-nav-burger {
    display: none; position: relative; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0.25rem; color: var(--ink); cursor: pointer;
}
.site-nav-burger-dot {
    position: absolute; top: 2px; right: 0; width: 10px; height: 10px; border-radius: 50%;
    background: #e5251b; border: 2px solid var(--yellow);
}
.site-nav-burger-dot[hidden] { display: none; }

@media (min-width: 480px) {
    .site-nav-links { display: flex !important; }   /* beats .collapse:not(.show) */
}
@media (max-width: 767.98px) {
    /* Bootstrap's .container caps at 540px between 576 and 767 — narrower than the
       content needs, which is what used to push the links onto a second row. */
    .site-nav .container { max-width: 100%; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
    .site-logo-full { display: none; }
    .site-logo-icon { display: block; }
}
@media (max-width: 479.98px) {
    .site-nav-burger { display: flex; }
    .site-nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--yellow); padding: 0 1rem 0.75rem;
        border-top: 1px solid rgba(26, 26, 26, 0.12);
        box-shadow: 0 10px 18px rgba(26, 22, 8, 0.15);
    }
    .site-nav-links.show { display: flex; }
    .site-nav-links .nav-cta { padding: 0.8rem 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
    .site-nav-links .nav-cta:last-child { border-bottom: 0; }
}
.site-nav .nav-cta {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.1rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
    text-decoration: none;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card { border-color: var(--bs-border-color); border-radius: 0.65rem; background-color: var(--surface); }
.card.shadow-sm {
    box-shadow: 0 1px 2px rgba(26, 22, 8, 0.05), 0 1px 3px rgba(26, 22, 8, 0.07) !important;
}
/* The lift-on-hover only belongs on actual clickable listing tiles (the browse
   grid) — it doesn't mean anything on a big static card like a form or the
   live preview, where it just reads as unwanted jitter under the cursor. */
.card-img-top, .card .ratio:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card-footer, .card-header { background-color: transparent; border-color: var(--bs-border-color); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn { border-radius: 0.5rem; font-weight: 500; }
.btn:focus-visible { box-shadow: var(--ring); }
/* Filled primary — black by default, dark grey (not near-black) on hover, black again when pressed. */
.btn-dark, .btn-primary { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover, .btn-primary:hover,
.btn-dark:focus-visible, .btn-primary:focus-visible {
    background-color: #3f3b33; border-color: #3f3b33; color: #fff;
}
.btn-dark:active, .btn-primary:active {
    background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important;
}

/* the "create / list a car" CTA — Motorway's yellow with black text */
.btn-success { background-color: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 600; }
.btn-success:hover, .btn-success:focus { background-color: var(--yellow-hover); border-color: var(--yellow-hover); color: var(--ink); }

/* Outline — white with a light border; hover just darkens the border (no fill). */
.btn-outline-secondary { color: var(--bs-secondary-color); border-color: var(--bs-border-color); background-color: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
    background-color: transparent; border-color: var(--ink); color: var(--ink);
}
.btn-outline-secondary:active {
    background-color: #f3edde !important; border-color: var(--ink) !important; color: var(--ink) !important;
}

/* The listing-card save/watchlist heart — Bootstrap's .btn-sm padding is wider than
   it is tall, so on a rounded-circle button it drew an oval, not a circle; fixed
   width/height + flex-centering makes it a true circle with the (SVG, not a
   Unicode glyph) heart actually centred inside it. */
.save-heart-btn {
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Same fix, for the other icon-only buttons using the default (non-rounded-circle)
   .btn-sm/.btn — "Mark as sold", "Share": sized to match a plain .btn-sm's natural
   height so they still line up with the text buttons beside them in the same row. */
.icon-btn-sm {
    width: 31px; height: 31px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* <a class="btn"> should never pick up the global link underline on hover... */
.btn:hover:not(.btn-link) { text-decoration: none; }
/* ...except the deliberately link-styled ones. */
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-label { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; }
.form-control, .form-select { border-radius: 0.5rem; border-color: #d8d2bf; background-color: var(--surface); }
.form-control:focus, .form-select:focus { border-color: var(--ink); box-shadow: var(--ring); }
.form-control:disabled, .form-control[readonly] { background-color: #f0ece0; color: var(--bs-secondary-color); }
.form-text { color: var(--bs-secondary-color); }

/* ── Menus / badges / tables / alerts / pagination ─────────────────────────── */
.list-group { border-radius: 0.55rem; }
.list-group-item { border-color: var(--bs-border-color); background-color: var(--surface); }
.list-group-item-action:hover { background-color: #f4efe1; }
.list-group-item.active { background-color: var(--ink); border-color: var(--ink); }

.badge { font-weight: 500; letter-spacing: 0; padding: 0.36em 0.6em; }

.table > :not(caption) > * > * { padding: 0.5rem 0.85rem; }
.table th { color: var(--bs-secondary-color); font-weight: 500; }

.alert { border-radius: 0.55rem; border: 1px solid transparent; }

.page-link { color: var(--ink); border-radius: 0.4rem; margin: 0 0.1rem; border-color: var(--bs-border-color); }
.page-item.active .page-link { background-color: var(--ink); border-color: var(--ink); }

/* ── Auth pages (allauth: login / signup / code) ───────────────────────────── */
.auth-card {
    max-width: 25rem;
    margin: 2.5rem auto;
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 1px 2px rgba(26, 22, 8, 0.05), 0 18px 44px -22px rgba(26, 22, 8, 0.22);
}
.auth-card h1 { font-weight: 700; }
.auth-card-wide { max-width: 38rem; }   /* signup: room for the 2-column field grid */
.auth-card form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-card form select,
.auth-card form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d8d2bf;
    border-radius: 0.5rem;
    font: inherit;
    background: var(--surface);
    margin-bottom: 0.15rem;
}
.auth-card form input:focus, .auth-card form select:focus, .auth-card form textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.15);
}
.auth-card .form-label { margin-top: 0.6rem; }
.auth-card .helptext { display: block; font-size: 0.78rem; color: var(--bs-secondary-color); margin: 0.15rem 0 0.4rem; }
.auth-card ul.errorlist { list-style: none; padding: 0; margin: 0.15rem 0 0.4rem; color: #b3261e; font-size: 0.82rem; }
.auth-card .pc-invalid input { border-color: #b3261e; }   /* bad postcode on submit — red outline, no text */

/* Invalid-field feedback (set by the script in base.html), site-wide */
.field-error,
input.field-error, select.field-error, textarea.field-error { border-color: #b3261e !important; }
.field-error:focus { border-color: #b3261e !important; box-shadow: 0 0 0 0.2rem rgba(179, 38, 30, 0.15) !important; }
.field-hint { color: #b3261e; font-size: 0.72rem; line-height: 1.3; margin-top: 0.15rem; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--bs-secondary-color); font-size: 0.85rem; margin: 1.1rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }

/* ── Toasts (flash messages) — small, bottom-centre, auto-dismiss ────────────── */
.toast-stack {
    /* + the phone's own bottom inset (home indicator / gesture bar) — see the
       viewport-fit=cover note in base.html. 0 on desktop. */
    position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 1080; display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem); pointer-events: none;
}
.toast-item {
    pointer-events: auto;
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--ink); color: #fff;
    padding: 0.5rem 0.55rem 0.5rem 0.9rem;
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(26, 22, 8, 0.22);
    font-size: 0.875rem; font-weight: 500;
    animation: toast-in 0.18s ease-out;
}
.toast-item.error, .toast-item.danger { background: #d13a2f; }
.toast-item.toast-out { opacity: 0; transform: translateY(6px); transition: opacity 0.22s ease, transform 0.22s ease; }
.toast-x { border: 0; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 1.15rem; line-height: 1; padding: 0 0.35rem; cursor: pointer; }
.toast-x:hover { color: #fff; }
/* Actionable control inside a toast (e.g. "Hidden — Undo") — display:contents
   keeps the form's box out of the toast's flex layout so the button sits inline. */
.toast-undo-form { display: contents; }
.toast-undo {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--yellow); font-weight: 700; text-decoration: underline; white-space: nowrap;
}
.toast-undo:hover { color: var(--yellow-hover); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast-item { animation: none; } .toast-item.toast-out { transition: none; } }

/* ── Site footer — dark anchor to bookend the cream page ───────────────────── */
.site-footer {
    flex-shrink: 0;
    background: var(--ink);
    color: #b8b2a1;
    padding: 2.5rem 0 1.75rem;
    margin-top: 3rem;
    font-size: 0.9rem;
}
.site-footer a { color: #e9e3d2; font-weight: 600; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer-top {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(140px, 1fr);
    gap: 2rem;
}
.site-footer-brand { max-width: 32rem; }
.site-footer-logo { margin-bottom: 0.75rem; }
.site-footer-brand p { margin: 0; line-height: 1.5; }
.site-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.site-footer-links-heading {
    color: #7d7768;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.35rem;
}
@media (max-width: 767.98px) {
    .site-footer-top {
        grid-template-columns: 1fr 1fr;
        row-gap: 1.75rem;
    }
    .site-footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 479.98px) {
    .site-footer-top { grid-template-columns: 1fr; }
}
.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #857f71;
    font-size: 0.8rem;
}

/* ── Legal pages (privacy, terms) ─────────────────────────────────────────── */
.lg-page .le-head p { font-size: .85rem; line-height: 1.45; }
.lg-page > p { font-size: .93rem; line-height: 1.6; margin-bottom: 1.25rem; }
.lg-page > p a { color: var(--ink); }
.lg-section { margin-bottom: 1.75rem; }
.lg-section h2 { font-size: 1.08rem; font-weight: 700; margin-bottom: .55rem; }
.lg-section p { font-size: .93rem; line-height: 1.65; margin-bottom: .7rem; }
.lg-section ul { padding-left: 1.15rem; margin-bottom: .7rem; }
.lg-section li { margin-bottom: .35rem; line-height: 1.6; font-size: .93rem; }
.lg-section li strong { font-weight: 600; }
.lg-section a { color: var(--ink); }
.lg-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 16px 18px; margin-bottom: .75rem; }
.lg-toc-label { width: 100%; font-size: .78rem; font-weight: 600; color: var(--lm-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.lg-toc a { font-size: .85rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lg-toc a:hover { text-decoration: underline; }
.lg-callout { border-left: 3px solid var(--yellow); padding: 12px 16px; border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--yellow) 8%, transparent); margin-bottom: .7rem; }
.lg-callout p { margin-bottom: 0; font-size: .93rem; }
.lg-footer { border-top: 1px solid var(--lm-line); padding-top: 20px; margin-top: 1rem; font-size: .82rem; color: var(--lm-muted); line-height: 1.5; }
.lg-footer a { color: var(--lm-muted); }

/* ── Listing photo picker (create/edit) ─────────────────────────────────── */
.photo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.photo-pick-tile, .photo-pick-add {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f0ece0;
    border: 1px solid var(--bs-border-color);
}
.photo-pick-tile { cursor: grab; }
/* inset, not a regular box-shadow — the tile clips its own image (overflow:
   hidden), which would clip an outer shadow/border too; inset draws inside
   the box instead, so the "held" ring always stays visible. */
.photo-pick-tile.dragging {
    opacity: 0.95;
    box-shadow: inset 0 0 0 3px var(--ink);
    z-index: 5;
    cursor: grabbing;
}
.photo-pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-pick-tile.photo-pick-processing { cursor: default; }
.photo-pick-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(240, 236, 224, 0.7);
}
.photo-pick-spinner .spinner-border { color: var(--ink); }
.photo-pick-unavailable {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center; padding: 0.5rem;
    color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 600;
    background: #f0ece0;
}
.photo-pick-unavailable small { font-weight: 400; }
.photo-pick-cover {
    position: absolute; left: 6px; bottom: 6px;
    background: var(--ink); color: #fff; font-size: 0.7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
}
.photo-pick-remove {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 50%; border: none;
    background: rgba(26, 26, 26, 0.75); color: #fff; font-size: 1rem; line-height: 1;
    cursor: pointer;
}
.photo-pick-remove:hover { background: var(--ink); }
.photo-pick-add {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 0.25rem; cursor: pointer;
    color: var(--bs-secondary-color); font-size: 0.85rem; font-weight: 600;
    border-style: dashed; background: transparent;
}
.photo-pick-add:hover { border-color: var(--ink); color: var(--ink); }
.photo-pick-hint { font-size: 0.8rem; color: var(--bs-secondary-color); }

/* ── Filter panel — collapsible sections, Facebook-Marketplace-style layout ── */
.filter-panel .form-control,
.filter-panel .form-select { font-size: 0.85rem; }

.filter-accordion { border-top: 1px solid var(--bs-border-color); margin-top: 0.5rem; }
.filter-section { border-bottom: 1px solid var(--bs-border-color); }
.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.filter-section-header::-webkit-details-marker { display: none; }
.filter-section-header::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--bs-secondary-color);
    border-bottom: 1.5px solid var(--bs-secondary-color);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.filter-section[open] > .filter-section-header::after { transform: rotate(-135deg); }
.filter-section-body { padding-bottom: 0.85rem; }

/* Zero-count filter options — very light grey, not selectable. */
.filter-panel select option:disabled { color: #c9c4b6; }

/* ── Messenger-style chat dock ───────────────────────────────────────────────── */
.nav-messages { position: relative; }
.nav-unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; margin-left: 0.3rem;
    background: #d51b21; color: #fff; font-size: 0.65rem; font-weight: 700;
    border-radius: 999px; vertical-align: middle;
}

.chat-flyout {
    position: fixed; top: 70px; right: 16px; width: 320px; max-height: 70vh;
    background: var(--surface); border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(26,22,8,.18);
    z-index: 1070; overflow: hidden; display: flex; flex-direction: column;
}
.chat-flyout-header { padding: 0.75rem 1rem; font-weight: 700; border-bottom: 1px solid var(--bs-border-color); }
.chat-flyout-list { overflow-y: auto; }
.chat-flyout-empty { padding: 1.5rem 1rem; color: var(--bs-secondary-color); font-size: 0.85rem; text-align: center; }
.chat-flyout-row {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.6rem 1rem; background: none; border: 0; border-bottom: 1px solid var(--bs-border-color);
    text-align: left; cursor: pointer;
}
.chat-flyout-row:hover { background: var(--bs-body-bg); }
.chat-flyout-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-flyout-row-name {
    font-weight: 600; font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-flyout-row.unread .chat-flyout-row-name { font-weight: 800; }
.chat-flyout-row-preview {
    font-size: 0.78rem; color: var(--bs-secondary-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-flyout-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }

.chat-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--yellow); color: var(--ink); font-size: 0.8rem; font-weight: 700;
    border: 0; overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
button.chat-avatar:hover { background: var(--bs-body-bg); }

/* Wraps any avatar so the online dot can sit pinned to its bottom-right corner. */
.chat-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.chat-online-dot {
    position: absolute; bottom: 0; right: 0; width: 10px; height: 10px;
    background: #31a24c; border-radius: 50%; border: 2px solid var(--bs-body-bg);
}

/* View profile / Block — opened from any avatar (header or per-message). */
.chat-avatar-popup {
    position: fixed; z-index: 1080; min-width: 150px;
    background: var(--surface); border-radius: 0.6rem; overflow: hidden;
    box-shadow: 0 6px 20px rgba(26,22,8,.22); border: 1px solid var(--bs-border-color);
}
.chat-avatar-popup-item {
    display: block; width: 100%; padding: 0.55rem 0.9rem; font-size: 0.82rem;
    background: none; border: 0; text-align: left; color: var(--ink); text-decoration: none;
}
.chat-avatar-popup-item:hover { background: var(--bs-body-bg); }
.chat-avatar-popup-danger { color: #d51b21; }

.chat-windows {
    position: fixed; bottom: 0; right: 16px; z-index: 1065;
    display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 0.75rem;
}
/* Minimized bubbles' home — always the first DOM child of .chat-windows (see the JS
   comment on insertExpandedWindow), so row-reverse keeps it pinned at the outermost
   right edge no matter how many expanded panels come and go beside it. It's a normal
   flex item, not its own fixed-position box, so .chat-windows' own align-items:flex-end
   bottom-aligns it too — the stack starts at the bottom-right corner and grows upward
   as bubbles are added (column-reverse), instead of floating near the top of the page. */
.chat-minimized-rail {
    display: flex; flex-direction: column-reverse; align-items: flex-end;
    gap: 0.6rem; flex-shrink: 0;
}
.chat-window {
    width: 300px; height: 470px; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--bs-border-color);
    border-bottom: none; border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: 0 -4px 20px rgba(26,22,8,.16); overflow: visible;
}
/* Minimized: a small round bubble (Facebook's own "more than 3 chats" behaviour). */
.chat-window.minimized {
    width: 56px; height: 56px; border-radius: 50%; background: transparent;
    box-shadow: 0 2px 10px rgba(26,22,8,.3);
}
.chat-window.minimized .chat-window-body,
.chat-window.minimized .chat-window-footer,
.chat-window.minimized .chat-attach-preview,
.chat-window.minimized .chat-window-listing-bar,
.chat-window.minimized .chat-window-blocked-notice,
.chat-window.minimized .chat-avatar-wrap,
.chat-window.minimized .chat-window-title,
.chat-window.minimized .chat-window-btn { display: none; }
.chat-window-header {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem;
    background: var(--ink); color: #fff; cursor: pointer; flex-shrink: 0;
    border-radius: 0.75rem 0.75rem 0 0; position: relative;
}
.chat-window.minimized .chat-window-header {
    width: 56px; height: 56px; padding: 0; background: transparent;
    border-radius: 50%; justify-content: center;
}
.chat-window-title { flex: 1; min-width: 0; }
.chat-window-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-window-listing { font-size: 0.7rem; color: #d8d2bf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-window-btn {
    background: none; border: 0; color: #fff; opacity: 0.8; font-size: 1rem;
    line-height: 1; width: 1.6rem; height: 1.6rem; flex-shrink: 0;
}
.chat-window-btn:hover { opacity: 1; }

.chat-window-min-face { display: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.chat-window.minimized .chat-window-min-face { display: block; }
.chat-window-min-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-window-min-face-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.chat-window-min-badge {
    display: none; position: absolute; top: -3px; right: -3px; z-index: 2;
    min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem;
    align-items: center; justify-content: center;
    background: #d51b21; color: #fff; font-size: 0.62rem; font-weight: 700;
    border-radius: 999px; border: 2px solid var(--bs-body-bg);
}
.chat-window.minimized .chat-window-min-badge:not([hidden]) { display: flex; }

/* Close (x) on a minimized bubble — hidden until hover, then takes over the same
   corner the unread badge sits in (you're not checking the count while reaching to
   close it). Black circle, white x, matching the ask exactly. */
.chat-window-min-close {
    display: none; position: absolute; top: -3px; right: -3px; z-index: 3;
    width: 1.15rem; height: 1.15rem; padding: 0; align-items: center; justify-content: center;
    background: #000; color: #fff; border: 2px solid var(--bs-body-bg); border-radius: 50%;
    font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.chat-window.minimized:hover .chat-window-min-close { display: flex; }
.chat-window.minimized:hover .chat-window-min-badge { display: none; }

/* The sold/deal strip, inside the progress tracker's "Sale" panel (see
   .chat-progress below) — kept yellow-tinted, same "something needs your
   attention" treatment as the code box in emails, since it's always a real
   action (confirm the purchase, leave a review). */
.chat-deal-strip { background: #fdf6cf; border: 1px solid #ffde00; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.4rem; }
.chat-deal-strip[hidden] { display: none; }
/* Same equal-width-column trick as .chat-window-actions, sized for however many
   buttons this state shows (Directions+Accept+Decline, Directions+Calendar+Cancel,
   or Directions+Withdraw) — grid-auto-columns:1fr splits evenly without needing to
   know the count up front. Forms go display:contents so the button inside becomes
   the actual grid item (no nested-flex-container quirk, and the form still
   submits normally — contents only removes its own box, not its behaviour). */
.chat-viewing-strip-actions, .chat-offer-strip-actions {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem; margin-top: 0.5rem;
}
.chat-viewing-strip-actions form, .chat-offer-strip-actions form { display: contents; }
.chat-viewing-strip-actions .btn, .chat-offer-strip-actions .btn { width: 100%; }
.offer-preset-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The meetup-code entry row (.chat-meetup-code-row) — found live (2026-09-30) to
   render at a real phone's normal width but with `btn-sm`-scale tap targets, on a
   screen a seller is realistically using outdoors, one-handed, right when it
   matters (confirming the buyer showed up). Bigger input/Confirm specifically for
   this row on a touch device/narrow screen. */
@media (max-width: 479.98px), (pointer: coarse) {
    .chat-meetup-code-row { gap: 0.5rem !important; }
    .chat-meetup-code-row input, .chat-meetup-code-row .btn {
        min-height: 2.75rem; font-size: 0.95rem;
    }
}
/* The post-viewing check-in row (.chat-outcome-actions) — originally given the same
   full-width-stacked treatment as the meetup-code row above, but reversed at the
   user's own direction (2026-10-05): once the header above it got meaningfully more
   compact, stretching these buttons edge-to-edge read as wasting exactly the space
   just reclaimed. Now the same equal-width-column grid as
   .chat-viewing-strip-actions/.chat-offer-strip-actions below (Directions/Calendar/
   Cancel) — one compact row, however many buttons (3 or 4) a given state shows. */
.chat-outcome-actions {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem;
}
.chat-outcome-actions form { display: contents; }
.chat-outcome-actions .btn { width: 100%; }

/* The four-stage progress tracker (Offer -> Viewing -> Meetup -> Sale), 2026-10-05
   — replaces the old permanently-expanded offer/viewing/deal strips above, which
   the user flagged as costing a whole screenful of space before a single message
   is even visible. Only one stage's detail panel shows at a time (see the click
   handler in conversation.html's extra_js block); the circles themselves carry
   the at-a-glance status so the panel underneath doesn't have to. */
.chat-progress {
    border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: #fff;
    margin-bottom: 0.5rem; overflow: hidden;
}
.chat-progress-steps { display: flex; align-items: flex-start; padding: 0.6rem 0.5rem 0.5rem; }
.chat-progress-step {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    flex: 0 0 auto; width: 4.25rem; background: none; border: 0; padding: 0; cursor: pointer;
}
.chat-progress-dot {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700;
    background: #efece2; color: var(--bs-secondary-color); border: 2px solid #efece2;
    transition: width 0.15s ease, height 0.15s ease, font-size 0.15s ease;
}
.chat-progress-label { font-size: 0.65rem; color: var(--bs-secondary-color); line-height: 1.1; text-align: center; }
.chat-progress-step-done .chat-progress-dot { background: #dff1e2; color: #1e7b34; border-color: #dff1e2; }
.chat-progress-step-done .chat-progress-label { color: #1e7b34; }
.chat-progress-step-active .chat-progress-dot { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.chat-progress-step-active .chat-progress-label { color: var(--ink); font-weight: 700; }
.chat-progress-step-skipped .chat-progress-dot { background: #efece2; color: var(--bs-secondary-color); opacity: 0.6; }
.chat-progress-step-skipped .chat-progress-label { opacity: 0.6; }
.chat-progress-step[aria-expanded="true"] .chat-progress-dot {
    width: 2.15rem; height: 2.15rem; font-size: 0.85rem;
    /* currentColor picks up the dot's own state colour (green/ink/grey) above, so one
       rule covers every state's ring instead of repeating it per state-active-done etc. */
    outline: 2px solid currentColor; outline-offset: 2px;
    /* The outline paints outside the dot's own box without affecting layout, so the
       column's normal gap to the label doesn't account for it — the label ended up
       touching the outline's bottom edge. This margin is the dot's own reserved
       clearance for it. */
    margin-bottom: 0.3rem;
}
.chat-progress-line {
    flex: 1 1 auto; height: 2px; background: #efece2; margin-top: 0.88rem; min-width: 0.5rem;
}
.chat-progress-line-done { background: #bfe3c6; }
.chat-progress-line-active, .chat-progress-line-skipped { background: #efece2; }
.chat-progress-panel {
    padding: 0.6rem 0.75rem 0.7rem; border-top: 1px solid var(--bs-border-color);
    font-size: 0.78rem;
}
.chat-progress-panel strong { font-size: 0.82rem; }
.chat-progress-panel .small { font-size: 0.72rem; }
/* "Nothing to do here yet" and similar — was the standard light grey, too faint to read
   comfortably on a phone (live feedback 2026-10-07). Darker, still lighter than the
   bold headline text that marks something to act on. */
.chat-progress-panel .text-muted { color: #4a463e !important; }
body.chat-page .chat-progress-panel .small { font-size: 0.8rem; }
.chat-progress-prompt { display: flex; align-items: center; gap: 10px; }
.chat-progress-prompt p { flex: 1; }
.chat-progress-prompt .btn { flex: 0 0 auto; }
.chat-progress-panel .chat-deal-strip { padding: 0.5rem 0.6rem; margin: -0.1rem 0; }
.chat-meetup-code-display {
    font-size: 1.6rem; font-weight: 700; letter-spacing: 0.15em; text-align: center;
    background: #efece2; border-radius: 0.4rem; padding: 0.35rem 0; margin-bottom: 0.35rem;
}
/* The dock's popup window is a fixed 300px (see .chat-window) — comfortable for 4
   steps at the sizing above, but a 5th (Review, added 2026-10-06) no longer fits
   without shrinking; the classic/mobile page has plenty of room and keeps the
   roomier sizing above untouched. */
.chat-window .chat-progress-steps { padding: 0.5rem 0.3rem 0.4rem; }
.chat-window .chat-progress-step { width: 3.3rem; }
.chat-window .chat-progress-dot { width: 1.5rem; height: 1.5rem; font-size: 0.65rem; }
.chat-window .chat-progress-step[aria-expanded="true"] .chat-progress-dot { width: 1.8rem; height: 1.8rem; font-size: 0.72rem; margin-bottom: 0.25rem; }
.chat-window .chat-progress-label { font-size: 0.56rem; }
.chat-window .chat-progress-line { min-width: 0.2rem; margin-top: 0.62rem; }

/* ── Classic/mobile chat page — fixed header, fixed send row, only the thread itself
   scrolls, modelled on Facebook Messenger's own layout (user's request, 2026-10-01).
   No position:fixed/JS needed: body.chat-page locks the whole page to the viewport
   height, which turns <main> into a plain flex column with exactly one flexible
   child (.chat-page-scroll) — the header/footer are just ordinary flex items either
   side of it that never scroll because there's nothing above or below them to
   scroll past. The real site footer is hidden here for the same reason: once the
   page itself can't scroll, it could never be reached anyway. */
body.chat-page {
    /* body's own base rule only sets min-height: 100vh — a floor, not a ceiling, so
       on its own this does nothing to stop the page growing past the viewport to fit
       25 messages. max-height is the actual cap; height+overflow:hidden alone isn't
       enough (confirmed by testing: without it, body just grew to ~2000px to fit the
       content, then the autofocused message input's focus-scroll yanked the whole
       document hundreds of pixels off-screen trying to reveal it). */
    height: 100dvh; max-height: 100dvh; overflow: hidden;
    /* body's base rule sets min-height: 100vh, and min-height beats max-height. On an
       iPhone (and Android with its address bar showing) 100vh is the screen with the
       toolbars HIDDEN — taller than what's visible — so the page grew past the screen
       and the message box sat under Safari's bottom toolbar, just its tip showing
       (reported live 2026-10-07). Lift that floor here; 100dvh above is the visible
       height, and the phone itself moves things for the on-screen keyboard. */
    min-height: 0;
    /* overflow:hidden alone stops body's OWN content from scrolling past it, but
       doesn't stop iOS itself from starting its native rubber-band drag on a
       touchmove — confirmed live on a real iPhone (2026-10-08): dragging down from
       the very top (or up from the very bottom) still visibly pulled the whole page
       a little way before snapping back, briefly exposing the browser chrome behind
       it in this page's <meta name="theme-color"> yellow. overscroll-behavior stops
       the gesture itself from being treated as an overscroll at all. */
    overscroll-behavior: none;
    /* Pinned to the real screen edges instead of trusting 100dvh (2026-10-08, ?debug=1
       screenshot from the installed app on a real Samsung, Chrome 154): the visible
       area was 807px and 100dvh itself measured 807, yet body laid out at 863 — 56px,
       exactly Chrome's address-bar height, for a toolbar the installed app doesn't
       even have — so the message box sat in the 56px below the screen, behind the
       phone's buttons. A fixed box with inset: 0 is sized by the browser's actual
       viewport, not by any vh unit, so there's no number left to get wrong. */
    position: fixed; inset: 0; height: auto; max-height: none;
}
body.chat-page .site-footer { display: none; }
/* The nav's normal mb-4 is a spacing device for ordinary page content below it —
   wrong here, where the chat shell sits flush against it; left in, it was eating
   ~18px nothing accounted for, pushing the footer that far past the viewport. */
/* !important needed — Bootstrap's own .mb-4 utility (already on this element) carries
   !important too, so a plain override here was silently losing to it (found live,
   2026-10-05 — this 24px was most of what was still padding out the gap under the
   nav bar, even after the header's own padding and the hidden <h1>'s margin were
   both already zeroed). */
body.chat-page .site-nav { margin-bottom: 0 !important; }
body.chat-page .chat-page-main {
    /* Once body itself is properly capped (above), .site-main's own `flex: 1 0 auto`
       correctly fills exactly what's left below the nav's REAL rendered height —
       no need to hardcode that height a second time via --nav-h, which was 2px off
       from the nav's actual size and the real source of the leftover gap below. */
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    max-width: 100%; padding: 0 !important; margin: 0;
}
/* Top padding matches the left/right (0.75rem) on purpose — the user asked for the
   gap above the grey panel to read as the same gap as its sides, for a uniform
   margin all round rather than the panel sitting flush against the nav bar
   (2026-10-05, after an earlier round had closed this down to near-zero). */
.chat-page-header { flex-shrink: 0; padding: 0.75rem 0.75rem 0; }
/* contain, not none — the thread itself should still bounce normally at its own
   top/bottom (that's useful, ordinary scroll feedback), it just shouldn't hand the
   gesture off to the now-locked body once it runs out of its own room to give. */
.chat-page-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0.75rem; }
.chat-page-footer { flex-shrink: 0; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom)); }
/* The screen-reader-only title between the header's top and the grey panel below it
   still carries the browser's own default heading margin even though its own box is
   clipped to 1x1px by .visually-hidden — that invisible margin was half of what was
   padding out the gap under the nav bar (found live, 2026-10-05). It doesn't need to
   take any layout space at all, so it gets none. */
.chat-page-sr-title { margin: 0 !important; }

/* Listing quick-access bar + actions, mirroring Facebook Marketplace's own chat header.
   One grey panel (square corners, no radius) holds both rows — the listing info and the
   action buttons — rather than two separate rounded cards with a gap between them.
   Two columns, `align-items: stretch` so the back button spans the panel's full
   height: a narrow one for Back, a wider one for everything else (listing bar on
   top, action buttons below) — not two stacked rows inside one undivided box, at
   the user's own direction (2026-10-05) once the header stopped scrolling away and
   a thin arrow glyph in the corner read as too easy to miss. */
.chat-window-top-panel { background: #f0ece0; display: flex; align-items: stretch; }
/* A plain flex row now, not a column — More moved into this same row (below), so
   there's only ever one child row's worth of content here any more. */
.chat-window-top-panel-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
/* Classic/mobile page only — the dock has no back button since it's a popup with its
   own close button, not a full page. Same warm family as the panel's own `#f0ece0`
   background, just a touch lighter — a plain neutral grey (tried first) clashed
   against that warm tone, per the user's own follow-up (2026-10-05): "the UI
   buttons have like a tiny brown tint to them", so this should share it, not fight
   it, while still reading as a step lighter/different from the panel it sits on. */
.chat-window-back-col {
    flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center;
    background: #f0ece0; border-right: 1px solid #e0dac8; color: var(--ink);
}
.chat-window-back-col:hover { background: var(--ink-hover); color: #fff; }
/* Rounded to match every other card on the page (the progress tracker right below
   it, inputs, etc.) — classic/mobile page only, where this sits inset with the
   page's own background showing on every side; the dock's identical bar runs flush
   edge-to-edge inside its own popup, where rounding it would just clip content for
   no visual benefit. `overflow: hidden` so the back/more columns' own square
   corners actually clip to the curve instead of poking out past it. */
.chat-page-header .chat-window-top-panel { border-radius: 0.6rem; overflow: hidden; }
/* Once Offer/Viewing moved into the stepper circles (2026-10-06), this row's only
   remaining content was a single full-width "More" button sitting under the listing
   bar — a whole extra row of height for one icon. Folded into this same row instead
   (2026-10-07), then redone as a proper column (2026-10-08) once a small floating
   circle in the corner read as too close to the nav bar's own hamburger icon — now
   a mirror of the back button's own left-hand column: full-height, square, a plain
   divider line instead of a filled shape. */
.chat-window-listing-bar {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem;
}
.chat-window-listing-thumb { width: 32px; height: 32px; border-radius: 0.35rem; object-fit: cover; flex-shrink: 0; }
.chat-window-listing-info { min-width: 0; flex: 1 1 auto; }
.chat-window-listing-label { font-size: 0.65rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
.chat-window-listing-price { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-window-more-wrap { position: relative; display: flex; flex-shrink: 0; }
.chat-window-more-btn {
    flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; border-left: 1px solid #e0dac8; background: #f0ece0; color: var(--ink);
}
.chat-window-more-btn:hover { background: var(--ink-hover); color: #fff; }
/* Anchored to the wrap's right edge, not its left — the button sits at the true
   right edge of the panel, so a menu opening further right would run off-screen. */
.chat-window-more-menu {
    position: absolute; top: 100%; right: 0; margin-top: 0.3rem; min-width: 160px; z-index: 5;
    background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 0.6rem;
    box-shadow: 0 6px 20px rgba(26,22,8,.22); overflow: hidden;
}
.chat-window-body { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.chat-window-empty { margin: auto; color: var(--bs-secondary-color); font-size: 0.8rem; text-align: center; }
.chat-day-sep {
    text-align: center; font-size: 0.72rem; color: var(--bs-secondary-color);
    margin: 0.3rem 0;
}
/* "X left the chat" — a system notice, not a message from anyone, so no bubble,
   avatar or tick, same treatment as a day separator. */
.chat-system-msg {
    text-align: center; font-size: 0.75rem; font-style: italic;
    color: var(--bs-secondary-color); margin: 0.4rem 0;
}
.chat-msg { display: flex; align-items: flex-end; gap: 0.35rem; max-width: 80%; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg-avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.chat-msg-col { display: flex; flex-direction: column; min-width: 0; }
.chat-msg.mine .chat-msg-col { align-items: flex-end; margin-left: auto; }
.chat-msg-bubble {
    padding: 0.4rem 0.65rem; border-radius: 1rem; font-size: 0.85rem;
    background: var(--bs-body-bg); word-break: break-word;
}
.chat-msg.mine .chat-msg-bubble { background: var(--ink); color: #fff; }
.chat-msg-time { font-size: 0.65rem; color: var(--bs-secondary-color); margin-top: 0.1rem; }
.chat-msg-tick { margin-left: 0.25rem; font-size: 0.7rem; letter-spacing: -2px; color: var(--bs-secondary-color); }
.chat-msg-tick-read { color: #3897f0; letter-spacing: -2px; }
/* The single "sent" tick is a real SVG now (the old Unicode glyph looked too thin) —
   the double delivered/read ticks stay plain text/WhatsApp-style, untouched. */
.chat-msg-tick svg { width: 12px; height: 12px; vertical-align: -1px; }
.chat-window-blocked-notice {
    padding: 0.5rem; text-align: center; font-size: 0.75rem;
    color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color);
}
/* Dock toast: inline alert inside a chat window (replaces window.alert) */
.dock-toast {
    display: flex; align-items: center; gap: 6px; margin: 0 6px 4px;
    padding: 7px 10px; border-radius: 10px;
    background: #3b2e1a; color: #fff; font-size: .8rem; line-height: 1.25;
    animation: cv-toast-in 250ms ease;
}
.dock-toast span { flex: 1; }
.dock-toast button { flex: 0 0 auto; background: none; border: 0; color: rgba(255,255,255,.7); font-size: 1.1rem; padding: 0 2px; cursor: pointer; line-height: 1; }
.dock-toast button:hover { color: #fff; }
.dock-toast-floating {
    position: fixed; bottom: 16px; right: 16px; z-index: 10001;
    max-width: 340px; margin: 0; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.chat-window-footer {
    display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.5rem;
    border-top: 1px solid var(--bs-border-color); flex-shrink: 0;
}
.chat-window-input {
    flex: 1; resize: none; border: 1px solid #d8d2bf; border-radius: 1rem;
    padding: 0.4rem 0.75rem; font: inherit; font-size: 0.85rem; max-height: 6rem;
}
.chat-window-input:focus { outline: none; border-color: var(--ink); }
.chat-window-send {
    background: var(--ink); color: #fff; border: 0; border-radius: 50%;
    width: 2rem; height: 2rem; flex-shrink: 0; font-size: 0.9rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.chat-window-send:hover { background: var(--ink-hover); }
.chat-window-attach {
    background: none; color: var(--bs-secondary-color); border: 0; border-radius: 50%;
    width: 2rem; height: 2rem; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.chat-window-attach:hover { background: var(--bs-body-bg); color: var(--ink); }
/* A photo shared mid-chat — capped so it never dwarfs the bubble it sits above,
   full aspect ratio kept (no crop, unlike a listing thumbnail) since recognising
   what's actually in the photo matters more here than a uniform tile shape. */
.chat-msg-image {
    display: block; max-width: 220px; max-height: 220px; border-radius: 0.75rem;
    margin-bottom: 0.25rem; cursor: pointer; object-fit: contain;
}
/* Preview strip for a picked-but-not-yet-sent photo — sits right above the footer,
   same pattern on both the dock and the mobile page. */
.chat-attach-preview {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--bs-border-color);
}
.chat-attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 0.4rem; }
.chat-attach-preview-remove {
    background: none; border: 0; color: var(--bs-secondary-color); font-size: 1.1rem;
    line-height: 1; padding: 0.2rem 0.4rem; margin-left: auto;
}
.chat-attach-preview-remove:hover { color: var(--ink); }

/* Mirrors the JS isDesktop() check exactly — pointer type first (a real phone/tablet
   is always coarse, whatever its width), plus a floor so a genuinely tiny desktop
   window doesn't try to render the fixed-width floating dock. */
@media (max-width: 479.98px), (pointer: coarse) {
    .chat-flyout, .chat-windows, .chat-minimized-rail { display: none !important; }
}

/* Include / Exclude / Show only — vehicle-history disclosure filters. */
.filter-flag-option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0; font-size: 0.85rem; cursor: pointer;
}
.filter-flag-option span:first-child { flex: 1; }
.filter-flag-option input[type="radio"] { flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); margin: 0; }
.filter-info-box {
    background: #eaf1fb; border-radius: 0.5rem; padding: 0.75rem 0.9rem;
    font-size: 0.78rem; color: #2b3f57; margin-top: 0.6rem;
}

/* Write-off category badge — deliberately loud (yellow), a buyer should never miss it. */
.cat-badge {
    display: inline-block; background: var(--yellow); color: var(--ink);
    font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em;
    padding: 0.18em 0.55em; border-radius: 0.3rem;
}

/* The old price on a listing that's been reduced — muted and struck through,
   sitting right next to the current price (same plain "was/now" pattern as
   Facebook/Rightmove) rather than a separate history/timeline. */
.price-was {
    color: var(--bs-secondary-color); font-weight: 400; font-size: 0.85em;
    text-decoration: line-through; margin-left: 0.35em;
}

/* ── Listing detail page — big sticky photo, info column scrolls in its own
   box alongside it (same idea as Facebook's listing panel) ──────────────────── */
.listing-detail-card { border-radius: 0.4rem; } /* the site's default card radius reads as too rounded on a box this large */
/* On phones and tablets the two columns stack, so the page just scrolls normally: a
   4:3 photo, then the details. The sticky photo + inner-scrolling info box only makes
   sense side by side (Bootstrap's lg breakpoint) — on a phone it trapped the details
   in a 560px scroll box inside the page. */
.listing-detail-carousel,
.listing-detail-carousel .carousel-item,
.listing-detail-carousel img {
    aspect-ratio: 4 / 3;
}
.listing-detail-carousel img { width: 100%; object-fit: cover; display: block; }
@media (min-width: 992px) {
    .listing-detail-photo,
    .listing-detail-info {
        position: sticky;
        top: calc(var(--nav-h) + 1rem);
    }
    .listing-detail-carousel,
    .listing-detail-carousel .carousel-item,
    .listing-detail-carousel img {
        aspect-ratio: auto;
        height: min(70vh, 560px);
    }
    .listing-detail-info {
        max-height: min(70vh, 560px);
        overflow-y: auto;
        padding-right: 0.5rem; /* clears the scrollbar so text doesn't hug it */
    }
}
.listing-detail-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.4rem;
}
.listing-detail-specs li span { font-weight: 600; }
.listing-detail-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-detail-description.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.listing-detail-carousel img { cursor: zoom-in; }

/* Bootstrap's default carousel arrow is a thin, low-contrast chevron with no button
   behind it — barely visible against a lot of car photos. Same white/grey-stroke
   circular button as the lightbox's own nav arrows, for one consistent look. */
.listing-detail-carousel .carousel-control-prev,
.listing-detail-carousel .carousel-control-next {
    width: 48px; height: 48px; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 1;
}
.listing-detail-carousel .carousel-control-prev { left: 12px; }
.listing-detail-carousel .carousel-control-next { right: 12px; }
.listing-detail-carousel .carousel-control-prev-icon,
.listing-detail-carousel .carousel-control-next-icon {
    width: 44px; height: 44px; background-color: #fff; background-size: 18px;
    border: 2px solid #d8d2bf; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.listing-detail-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.listing-detail-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.listing-detail-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.listing-detail-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: #f4efe1; }
.listing-status-flag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: #d51b21;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5rem 1.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Bootstrap's own modal/backdrop z-index (1055/1050) sits below the chat dock
   (1065) and its avatar popup (1080) — without this a modal opened while a chat
   window is open renders partly behind it. Only the share modal uses Bootstrap's
   Modal component right now, so raising these globally is safe. */
.modal { z-index: 1090; }
.modal-backdrop { z-index: 1085; }

/* ── Full-screen lightbox — click any listing photo to open ──────────────────
   The blurred, scaled-up copy of the same photo behind it (instead of plain
   black bars) is the same "fill the letterbox with the image itself" trick
   Facebook/Instagram use. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080; /* above Bootstrap's own modal/backdrop layers */
    background: #000;
}
.lightbox[hidden] { display: none; }
.lightbox-bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: blur(50px) brightness(0.55);
    transform: scale(1.15);
}
.lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    /* No touch-action override needed here — .lightbox itself is exempted from
       the site-wide rule (see the `body > *:not(.lightbox)` comment above), so
       everything inside it, this image included, is unrestricted by default:
       pinch-to-zoom (mobile) and ctrl+scroll/ctrl-plus (desktop) still work. */
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    background: rgba(20, 20, 20, 0.92); /* solid enough to stay visible over any photo */
    color: #fff;
    border: none;
}
.lightbox-close:hover { background: #000; }
/* The nav arrows specifically: white with a light grey stroke rather than a solid
   dark circle — reads more clearly as "tap here" against a photo of any brightness,
   and matches the same style now used on the listing-detail carousel's arrows. */
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    background: #fff;
    color: var(--ink);
    border: 2px solid #d8d2bf;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.lightbox-nav:hover { background: #f4efe1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-count {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* ── Seller insights ─────────────────────────────────────────────────────────── */
/* Hero views card */
.ins-hero {
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: 14px;
    padding: 18px 20px 14px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
}
.ins-hero-lbl { font-size: .78rem; color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ins-hero-row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.ins-hero-num { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ins-hero-delta { font-size: .82rem; font-weight: 700; color: var(--bs-secondary-color); border-radius: 6px; padding: 3px 8px; }
.ins-hero-delta.up { color: var(--lm-green, #1f8a57); background: rgba(31,138,87,.08); }
.ins-hero-delta.down { color: #c4362c; background: rgba(196,54,44,.08); }
.ins-hero-sub { font-size: .78rem; color: var(--bs-secondary-color); margin-top: 4px; }
.ins-hero-chart { width: 180px; }
.ins-hero-chart svg { display: block; width: 100%; height: 52px; overflow: visible; }
.ins-hero-days { display: flex; justify-content: space-between; margin-top: 4px; }
.ins-hero-days span { font-size: .58rem; color: var(--bs-secondary-color); font-weight: 500; width: 14.28%; text-align: center; }
@media (max-width: 520px) {
    .ins-hero { grid-template-columns: 1fr; }
    .ins-hero-chart { width: 100%; }
}
/* Five secondary tiles — single row */
.ins-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 24px; }
.ins-tile {
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: 10px;
    padding: 10px 10px 7px; min-width: 0;
}
.ins-tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ins-tile-lbl { font-size: .68rem; color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-tile-delta { font-size: .64rem; font-weight: 700; color: var(--bs-secondary-color); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.ins-tile-delta.up { color: var(--lm-green, #1f8a57); background: rgba(31,138,87,.08); }
.ins-tile-delta.down { color: #c4362c; background: rgba(196,54,44,.08); }
.ins-tile-num { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ins-tile-prev { font-size: .66rem; color: var(--bs-secondary-color); margin-top: 1px; }
.ins-tile-chart { width: 100%; margin-top: 6px; }
.ins-tile-chart svg { display: block; width: 100%; height: 28px; overflow: visible; }
.ins-tile-days { display: flex; justify-content: space-between; margin-top: 3px; }
.ins-tile-days span { font-size: .54rem; color: var(--bs-secondary-color); font-weight: 500; width: 14.28%; text-align: center; }
/* By-listing table */
.ins-tbl-wrap { overflow-x: auto; }
.ins-table { width: max-content; min-width: 100%; }
.ins-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; padding: 6px 12px; text-align: center; }
.ins-th-car, .ins-td-car { text-align: left !important; position: sticky; left: 0; background: #fff; z-index: 1; padding-right: 16px !important; }
.ins-th-car { z-index: 2; }
.ins-table td { vertical-align: middle; white-space: nowrap; padding: 8px 12px; font-size: .85rem; text-align: center; }
.ins-zero { color: var(--bs-secondary-color); opacity: .45; }
.ins-pos { font-weight: 700; }
.ins-hi { font-weight: 700; color: var(--lm-green, #1f8a57); }
.ins-dim { color: var(--bs-secondary-color); }
.insight-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 0.35rem; background: var(--bs-border-color); }

/* ── Manage listing page ─────────────────────────────────────────────────────── */
.manage-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.manage-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.manage-actions form { display: contents; }
.manage-action {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    background: none; border: 0; padding: 0.25rem; font-size: 0.8rem; font-weight: 500;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.manage-action:hover { color: var(--ink); text-decoration: none; }
.manage-action-icon {
    width: 44px; height: 44px; border-radius: 50%; background: #efe9d8;
    display: flex; align-items: center; justify-content: center;
}
.manage-action:hover .manage-action-icon { background: #e6dfc8; }
.manage-action-danger, .manage-action-danger:hover { color: #b3261e; }
.manage-action-success, .manage-action-success:hover { color: #1e7b34; }
.manage-action-success .manage-action-icon { background: #dff1e2; }
.manage-action-success:hover .manage-action-icon { background: #cde9d1; }

/* Verified/Hot/New — the blue tick (listings/_verified_badge_icon.html), the flame
   (_hot_badge_icon.html) and the sparkle (_new_badge_icon.html), icon-only, same
   scalloped badge shape, different colour/glyph baked into each one's own SVG. Hot/New
   recomputed nightly, see listings/management/commands/update_listing_badges.py. */
.verified-badge-icon svg, .listing-badge-icon svg { width: 18px; height: 18px; vertical-align: -3px; }

/* Always in this order — verified first, then hot, then new. Stacked top-to-bottom
   next to the detail page's title (.listing-badge-stack); on the card they instead sit
   bottom-left, in line with the share/save/hide (or manage) buttons, so a row, not a
   column (.listing-badge-row) — see _card.html's two bottom action rows. */
.listing-badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.listing-badge-row { display: flex; align-items: center; gap: 4px; }
.manage-chat {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0;
    border-top: 1px solid var(--bs-border-color); color: var(--ink); text-decoration: none;
}
.manage-chat:first-of-type { border-top: 0; }
.manage-chat:hover { color: var(--ink); text-decoration: none; background: rgba(0, 0, 0, 0.02); }
.manage-chat-text { flex: 1 1 auto; min-width: 0; }

/* ── Ratings ─────────────────────────────────────────────────────────────────── */
.rating-stars { letter-spacing: 1px; color: var(--ink); }
.sold-choice { cursor: pointer; }
.sold-choice:has(input:checked) { background: #fff8cc; }


/* ── Small-screen filter toggle — styled exactly like the "Sort by" accordion rows ──
   It reuses .filter-section-header (same type, padding and chevron), so the only extra
   rules are the ones a <button> needs: no button chrome, the row's own top/bottom
   lines, and the chevron flipping with aria-expanded instead of <details>[open]. */
.filter-toggle {
    width: 100%;
    background: none;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--ink);
    font-family: inherit;
    text-align: left;
}
.filter-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
/* Once open, the toggle's own bottom line is the accordion's top line — no double rule. */
@media (max-width: 767.98px) {
    #filterPanel .filter-accordion { border-top: 0; margin-top: 0; }
}

/* ── Cookie banner — bottom-left on desktop (the chat dock lives bottom-right), full
   width on phones. Reject and Accept are the same size on purpose. ───────────────── */
.cookie-banner {
    position: fixed; left: 16px; bottom: 16px; z-index: 1075;
    width: min(26rem, calc(100vw - 32px));
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--bs-border-color); border-radius: 14px;
    box-shadow: 0 10px 34px rgba(26, 26, 26, 0.18);
    padding: 1rem 1.1rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-title { font-weight: 700; margin: 0 0 0.35rem; }
.cookie-banner-text { font-size: 0.875rem; line-height: 1.45; margin: 0 0 0.85rem; color: #4a463e; }
.cookie-banner-text a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.cookie-banner-legal { font-size: 0.78rem; line-height: 1.4; margin: 0 0 0.85rem; color: #857f71; }
.cookie-banner-legal a { color: #857f71; font-weight: 600; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.6rem; }
.cookie-banner-actions .btn { flex: 1; }
@media (max-width: 575.98px) {
    .cookie-banner { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; }
}

/* ── Rotate-to-portrait lock — see the comment on the markup in base.html for why
   this exists instead of trying to actually lock device orientation (impossible from
   a plain webpage). Hidden by default; shown only for a touchscreen in landscape
   short enough to be a phone, not a tablet (an iPad's landscape height is nowhere
   near this short) — pure media query, no JS. Highest z-index on the site: this
   should sit above literally everything else, including the photo lightbox. */
.rotate-lock {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    background: var(--bs-body-bg); color: var(--ink);
    flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
    text-align: center; padding: 2rem;
}
.rotate-lock p { margin: 0; font-weight: 600; max-width: 20rem; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    .rotate-lock { display: flex; }
}

.site-footer-link-btn {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
    color: #e9e3d2; cursor: pointer; text-align: left;
}
.site-footer-link-btn:hover { color: #fff; }

/* ── Messages inbox (/messages/ — templates/messaging/inbox.html, _inbox_row.html,
   static/js/inbox.js). Redesigned 2026-10-07 from the approved phone mock, on top of
   the account page's .acct-* styles. The car is each row's main picture (that's what
   the chat is about), the other person sits on its corner with their online dot. */
.ib-large { padding: 0 0 10px; }
.ib-large h1 { margin: 0; font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.ib-sub { font-size: .84rem; color: var(--bs-secondary-color); margin-top: 4px; min-height: 1.2em; }
.ib-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 8px; border-radius: 12px; background: var(--acct-chip); cursor: text; transition: background-color 200ms ease, box-shadow 200ms ease; }
.ib-search:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.ib-search svg { color: var(--bs-secondary-color); flex: 0 0 auto; }
.ib-search input { flex: 1; border: 0; background: none; outline: none; font-size: .95rem; min-width: 0; }
.ib-search input::placeholder { color: #9a9488; }
.ib-seg-wrap .acct-seg button { position: relative; z-index: 1; height: 36px; border: 0; background: none; border-radius: 10px; font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #5d5747; transition: color 220ms ease; }
.ib-seg-wrap .acct-seg button[aria-selected="true"] { color: var(--ink); }
.ib-n { font-size: .7rem; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d13a2f; color: #fff; display: inline-grid; place-items: center; }
.ib-n:empty { display: none; }
.ib-list { padding-bottom: 32px; min-height: 60vh; }
.ib-label { display: flex; align-items: center; justify-content: space-between; margin-left: 4px; margin-right: 4px; }
.ib-label[hidden] { display: none; }
.ib-closed-toggle { border: 0; background: none; padding: 0; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bs-secondary-color); display: inline-flex; align-items: center; gap: 4px; }
.ib-closed-toggle svg { transform: rotate(-90deg); transition: transform 360ms cubic-bezier(.32,.72,0,1); }
.ib-closed-toggle[aria-expanded="true"] svg { transform: none; }
/* Folded away by default — JS animates the height; without JS it's just a toggle */
.ib-closed-wrap { overflow: hidden; height: 0; transition: height 380ms cubic-bezier(.32,.72,0,1); }
html:not(.ib-js) .ib-closed-wrap { height: auto; }
.acct-group[hidden] { display: none; }

.ib-row { position: relative; overflow: hidden; }
.ib-row + .ib-row { border-top: 1px solid var(--acct-line); }
.ib-row[hidden] { display: none; }
.ib-actions { position: absolute; inset: 0 0 0 auto; display: flex; visibility: hidden; }
.ib-row.swiped .ib-actions { visibility: visible; }
.ib-actions form { display: flex; margin: 0; }
.ib-actions button { width: 78px; border: 0; color: #fff; font-weight: 700; font-size: .76rem; display: grid; place-items: center; align-content: center; gap: 4px; }
.ib-a-read { background: #2f5fa8; }
.ib-a-mute { background: #8a8478; }
.ib-a-leave { background: #d13a2f; }
.ib-main { position: relative; z-index: 1; display: flex; align-items: center; background: var(--surface); touch-action: pan-y; will-change: transform; user-select: none; -webkit-user-select: none; }
.ib-link { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 12px 6px 12px 14px; color: var(--ink); text-decoration: none; -webkit-user-drag: none; }
.ib-link:hover { color: var(--ink); text-decoration: none; }
.ib-main:has(.ib-link:active) { background: #faf7ef; }
.ib-more { width: 40px; height: 40px; margin-right: 6px; border-radius: 50%; border: 0; background: transparent; color: var(--bs-secondary-color); display: none; place-items: center; flex: 0 0 auto; }
.ib-more:hover { background: var(--acct-chip); }
@media (hover: hover) and (pointer: fine) { .ib-more { display: grid; } }

.ib-av { position: relative; width: 58px; height: 58px; flex: 0 0 auto; }
.ib-car { display: block; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; background: #e6e0d0; }
.ib-car img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ib-who { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 2.5px solid var(--surface); display: grid; place-items: center; font-size: .6rem; font-weight: 800; color: var(--ink); }
.ib-who.alt { background: #d9e6f5; }
.ib-on { position: absolute; right: -6px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: #2bb36b; border: 2.5px solid var(--surface); }

.ib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ib-top { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.ib-name { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ib-role { flex: 0 0 auto; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--acct-chip); color: #5d5747; }
.ib-role-selling { background: #fff4b8; color: #6b5a00; }
.ib-time { margin-left: auto; flex: 0 0 auto; font-size: .78rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ib-car-t { font-size: .82rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; }
.ib-bottom { display: flex; align-items: center; gap: 8px; margin-top: 3px; width: 100%; }
.ib-preview { flex: 1; min-width: 0; font-size: .9rem; color: #4a463e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ticks are the chat thread's own .chat-msg-tick markup; here they sit before the text */
.ib-preview .chat-msg-tick { margin: 0 4px 0 0; font-size: .78rem; }
.ib-unread-n { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
.ib-unread-n:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.ib-row.unread .ib-name { font-weight: 800; }
.ib-row.unread .ib-preview { color: var(--ink); font-weight: 600; }
.ib-row.unread .ib-time { color: var(--ink); font-weight: 700; }
.ib-muted-ic { color: #b9b3a5; flex: 0 0 auto; display: none; }
.ib-row.muted .ib-muted-ic { display: inline-flex; }
.ib-row.muted .ib-unread-n { background: #b9b3a5; color: #fff; }
.ib-stage { display: inline-flex; align-items: center; margin-top: 7px; min-height: 24px; padding: 2px 9px; border-radius: 8px; font-size: .74rem; font-weight: 700; }
.ib-stage-viewing { background: #e3f3ea; color: #1f8a57; }
.ib-stage-offer { background: #fff4b8; color: #6b5a00; }
.ib-stage-action { background: var(--ink); color: #fff; }
.ib-stage-sold { background: var(--acct-chip); color: #5d5747; }
.ib-row.closed .ib-link { opacity: .62; }
.ib-row.closed .ib-preview { font-style: italic; }
.ib-first { display: grid; justify-items: center; gap: 6px; padding: 40px 22px; }
.ib-first b { color: var(--ink); font-size: 1.05rem; }
.ib-first .acct-btn { padding: 0 22px; }

/* Bootstrap's .btn-link is its own blue — keep link-style buttons on the brand ink. */
.btn-link {
    --bs-btn-color: var(--ink); --bs-btn-hover-color: var(--ink-hover); --bs-btn-active-color: var(--ink-hover);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    text-decoration: underline;
}

/* Short text links get a taller touch area on phones without changing how they look. */
@media (max-width: 767.98px) {
    .tap-pad { display: inline-block; padding: 0.7rem 0; }
    .site-footer-links a, .site-footer-link-btn { display: block; padding: 0.3rem 0; }
    .site-footer-links { gap: 0.1rem; }
}

.tap-pad-sm { display: inline-block; padding: 0.2rem 0; }
@media (max-width: 767.98px) { .tap-pad-sm { padding: 0.55rem 0; } }

/* ── Editorial pages: the public sell page, comparison pages and guides ────────── */
.article-page { max-width: 46rem; margin: 0 auto; padding: 1.5rem 0 2rem; line-height: 1.65; }
.article-page h1 { font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 0.25rem; }
.article-page h2 { font-size: 1.35rem; font-weight: 700; margin: 2.2rem 0 0.6rem; text-wrap: balance; }
.article-page h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.3rem; }
.article-page .lead { font-size: 1.15rem; margin: 1rem 0 1.25rem; }
.article-crumbs { font-size: 0.85rem; color: var(--bs-secondary-color); margin-bottom: 0.75rem; }
.article-crumbs a { color: var(--bs-secondary-color); text-decoration: underline; }
.article-meta { font-size: 0.85rem; color: var(--bs-secondary-color); margin-bottom: 0.5rem; }
.article-note { font-size: 0.875rem; color: var(--bs-secondary-color); border-left: 3px solid var(--bs-border-color); padding-left: 0.85rem; margin: 1rem 0; }
.article-page a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
.article-list { padding-left: 1.2rem; }
.article-list li { margin-bottom: 0.5rem; }
.article-steps { padding-left: 1.3rem; }
.article-steps li { margin-bottom: 0.85rem; }
.article-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.5rem; }
.article-table { background: var(--surface); font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
.article-table th, .article-table td { vertical-align: top; padding: 0.7rem 0.85rem; }
.article-table thead th { background: var(--bc-yellow); border-bottom: 0; }
.article-cta { background: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 0.75rem; padding: 1.4rem 1.5rem; margin: 2.5rem 0 1.5rem; }
.article-cta h2 { margin-top: 0; }
.article-cta .btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.article-related ul { padding-left: 1.2rem; }
.article-related li { margin-bottom: 0.5rem; }
.article-guide-list { list-style: none; padding: 0; }
.article-guide-list li { padding: 1.1rem 0; border-top: 1px solid var(--bs-border-color); }
.article-guide-list h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.article-guide-list p { margin: 0; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
    .article-page h2 { font-size: 1.2rem; margin-top: 1.8rem; }
    .article-actions .btn { width: 100%; }
}
.article-table th, .article-table td { color: var(--ink); }
.article-table tbody th { font-weight: 600; }
.article-page .lead { font-weight: 400; }

/* ── Comparison pages (/compare/*) — checklist grid + reason cards ────────────── */
.cp-page { max-width: 46rem; margin: 0 auto; }
.cp-page h1 { font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: .25rem; }
.cp-date { font-size: .78rem; color: var(--lm-muted); margin-bottom: .6rem; }
.cp-lead { font-size: .95rem; line-height: 1.55; margin-bottom: 1.5rem; }
.cp-check-section { margin-bottom: 2rem; }
.cp-check-section h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.cp-check-table { border-radius: 12px; overflow: hidden; border: 1px solid var(--lm-line); }
.cp-check-header { display: grid; grid-template-columns: 1fr 72px 72px; background: var(--yellow); padding: 10px 16px; align-items: center; }
.cp-check-header span:first-child { font-size: .82rem; font-weight: 700; color: var(--ink); }
.cp-check-header span { font-size: .72rem; font-weight: 700; text-align: center; color: var(--ink); }
.cp-row { display: grid; grid-template-columns: 1fr 72px 72px; padding: 12px 16px; align-items: center; background: var(--surface); border-top: 1px solid var(--lm-line); }
.cp-row:nth-child(odd) { background: color-mix(in srgb, var(--surface) 50%, var(--cream)); }
.cp-row .cp-label { font-size: .88rem; font-weight: 600; }
.cp-row .cp-sublabel { font-size: .78rem; color: var(--lm-muted); line-height: 1.3; margin-top: 2px; }
.cp-cell { text-align: center; }
.cp-yes { color: #2e7d32; }
.cp-no { color: #c62828; }
.cp-mid { color: var(--lm-muted); }
.cp-check-note { font-size: .78rem; color: var(--lm-muted); margin-top: .6rem; line-height: 1.4; }
.cp-reasons-section { margin-bottom: 2rem; }
.cp-reasons-section h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; display: flex; align-items: center; gap: 8px; }
.cp-reasons-section h2 svg { width: 22px; height: 22px; flex-shrink: 0; }
.cp-reasons { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cp-reason { background: var(--surface); border-radius: 12px; padding: 16px 18px; display: flex; gap: 12px; }
.cp-reason-icon { width: 36px; height: 36px; flex-shrink: 0; background: color-mix(in srgb, var(--yellow) 15%, transparent); border-radius: 8px; display: grid; place-items: center; }
.cp-reason-icon svg { width: 18px; height: 18px; color: var(--ink); }
.cp-reason b { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 2px; }
.cp-reason p { font-size: .82rem; line-height: 1.5; color: var(--lm-muted); margin: 0; }
.cp-tip { background: var(--surface); border-left: 4px solid var(--yellow); border-radius: 0 12px 12px 0; padding: 16px 18px; margin-bottom: 2rem; }
.cp-tip b { display: block; font-size: .92rem; margin-bottom: .25rem; }
.cp-tip p { font-size: .88rem; line-height: 1.55; margin: 0; color: var(--lm-muted); }
.cp-cta { background: var(--surface); border-radius: 12px; padding: 24px 20px; text-align: center; margin-bottom: 2rem; }
.cp-cta h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.cp-cta p { font-size: .88rem; color: var(--lm-muted); margin: 0 0 1rem; }
.cp-cta-btns { display: flex; flex-direction: column; gap: 8px; }
.cp-cta-btns a { display: block; text-align: center; padding: 13px; border-radius: 10px; font-size: .93rem; font-weight: 700; text-decoration: none; }
.cp-btn-dark { background: var(--ink); color: var(--cream); }
.cp-btn-dark:hover { opacity: .92; color: var(--cream); }
.cp-btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--lm-line); }
.cp-guides { margin-bottom: 1rem; }
.cp-guides h2 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }
.cp-guide-list { display: flex; flex-direction: column; gap: 6px; }
.cp-guide-list a { display: block; padding: 11px 14px; background: var(--surface); border-radius: 10px; text-decoration: none; color: var(--ink); font-size: .85rem; font-weight: 600; }
.cp-guide-list a:hover { background: var(--lm-line); }

/* ── Search landing pages (/cars/ford/, /cars/ford/fiesta/) ───────────────────── */
.landing-page { max-width: 46rem; padding: 0.75rem 0 2rem; }
.landing-page h1 { font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.landing-lead { font-size: 1.05rem; line-height: 1.55; margin-bottom: 1.5rem; }
.landing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .landing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 399px) { .landing-grid { grid-template-columns: 1fr; } }
.landing-grid .col { padding: 0; }
.landing-filter { font-size: 0.88rem; font-weight: 600; margin-bottom: 2rem; display: inline-block; }
.landing-models { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding: 0; list-style: none; }
.landing-models a { text-decoration: underline; text-underline-offset: 2px; font-size: 0.88rem; }
.landing-models .text-muted { font-size: 0.82rem; }
.landing-page .article-cta { max-width: none; }
.landing-guides h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.landing-guides-list { display: flex; flex-direction: column; gap: 6px; }
.landing-guides-list a { display: block; padding: 11px 14px; background: var(--surface); border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.landing-guides-list a:hover { background: var(--lm-line, #e2ddd3); }

/* ── Help Centre — category cards with nested accordion ──────────────────────── */
.hp-page { padding-bottom: 2rem; }
.hp-page .le-head p { font-size: .92rem; color: var(--lm-muted); }

.hp-cat { border: 1px solid var(--lm-line); border-radius: 12px; margin-bottom: .75rem; overflow: hidden; }
.hp-cat-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; }
.hp-cat-header::-webkit-details-marker { display: none; }
.hp-cat-icon { width: 36px; height: 36px; flex-shrink: 0; background: color-mix(in srgb, var(--yellow) 15%, transparent); border-radius: 8px; display: grid; place-items: center; }
.hp-cat-icon svg { width: 20px; height: 20px; color: var(--ink); }
.hp-cat-label { flex: 1; min-width: 0; }
.hp-cat-label b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.hp-cat-label span { display: block; font-size: .82rem; color: var(--lm-muted); line-height: 1.3; }
.hp-cat-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--lm-muted); transition: transform .2s; }
.hp-cat[open] .hp-cat-chevron { transform: rotate(180deg); }
.hp-cat-body { padding: 0 18px 10px; }

.hp-q { border-top: 1px solid var(--lm-line); }
.hp-q-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: .8rem 0; font-size: .93rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.hp-q-btn::-webkit-details-marker { display: none; }
.hp-q-icon { width: 18px; height: 18px; flex-shrink: 0; margin-left: auto; color: var(--lm-muted); transition: transform .2s; }
.hp-q[open] .hp-q-icon { transform: rotate(45deg); }
.hp-q-answer { padding: 0 0 .8rem; }
.hp-q-answer p { font-size: .9rem; line-height: 1.65; margin: 0 0 .6rem; }
.hp-q-answer p:last-child { margin-bottom: 0; }
.hp-q-answer a { color: var(--ink); }
.hp-q-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.hp-contact { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; margin: 1.25rem 0; background: var(--ink); color: var(--cream); border-radius: 10px; font-size: .93rem; font-weight: 600; text-decoration: none; }
.hp-contact svg { width: 18px; height: 18px; }
.hp-contact:hover { opacity: .92; color: var(--cream); }

.hp-guides { margin-top: .5rem; }
.hp-guides h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
.hp-guide-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.hp-guide-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--lm-line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.hp-guide-card:hover { border-color: var(--ink); color: var(--ink); }
.hp-guide-card b { font-size: .88rem; font-weight: 700; line-height: 1.35; }
.hp-guide-card span { font-size: .78rem; color: var(--lm-muted); line-height: 1.4; }
@media (max-width: 520px) { .hp-guide-row { grid-template-columns: 1fr; } }

.site-footer-socials { display: flex; gap: 0.9rem; margin-top: 1rem; }
.site-footer-socials a { color: #e9e3d2; display: inline-flex; }
.site-footer-socials a:hover { color: #fff; }

/* ── Visitor Stats — simple dependency-free CSS bar chart ─────────────────────── */
.visitor-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.visitor-chart-bar { flex: 1; background: var(--bc-yellow); border-radius: 2px 2px 0 0; min-height: 2px; }

/* ── Account page (templates/accounts/profile.html, static/js/account.js) ──────────
   From the user-approved phone mock (2026-10-06): a large title that hands over to a
   compact frosted bar on scroll, a profile card, one pinned Selling | Buying |
   Settings tab bar, swipeable listing rows, iOS-style grouped settings and an edit
   sheet. One narrow column on every screen size — it's a phone-first page, and a
   single column reads fine on desktop too. --acct-nav-h is the nav's REAL height,
   measured by account.js (--nav-h is ~2px off, see body.chat-page above). */
.site-main.acct-page { max-width: 720px; }
.acct-page { --acct-nav-h: var(--nav-h); --acct-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.16); --acct-line: #ece6d5; --acct-chip: #f2ecdc; }
.acct-page .min-w-0 { min-width: 0; }
.press { transition: transform 120ms ease-out, background-color 160ms ease; }
.press:active { transform: scale(.97); transition-duration: 60ms; }

.acct-compact {
    position: sticky; top: var(--acct-nav-h); z-index: 30; height: 48px; margin: -1.5rem -0.75rem calc(1.1rem - 48px);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    background: rgba(251,247,236,.8); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(26,26,26,.07); opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.acct-compact.show { opacity: 1; pointer-events: auto; }
.acct-compact span { transform: translateY(4px); transition: transform 300ms cubic-bezier(.32,.72,0,1); }
.acct-compact.show span { transform: none; }
.acct-large { font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 0.9rem; }

.acct-stack { display: grid; gap: 14px; }
.acct-card { background: var(--surface); border-radius: 22px; box-shadow: var(--acct-shadow); padding: 18px; }
.acct-profile-top { display: flex; align-items: center; gap: 14px; }
.acct-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.15; }
.acct-meta { color: var(--bs-secondary-color); font-size: .84rem; margin-top: 2px; }
.acct-join-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.acct-join-row small { color: var(--bs-secondary-color); font-size: .82rem; }
.acct-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--lm-green, #1f8a57); background: rgba(31,138,87,.08); padding: 3px 8px; border-radius: 6px; text-decoration: none; }
.acct-verified-badge:hover { background: rgba(31,138,87,.14); color: var(--lm-green, #1f8a57); }
.acct-unverified-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; color: var(--bs-secondary-color); background: var(--acct-chip, #f0ece4); padding: 3px 8px; border-radius: 6px; text-decoration: none; }
.acct-unverified-badge:hover { opacity: .8; color: var(--bs-secondary-color); }
.acct-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.acct-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--acct-chip); color: #4a463e; }
.acct-tag-idle { background: transparent; border: 1px dashed #cfc7b1; color: var(--bs-secondary-color); font-weight: 600; }
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 14px; background: var(--bs-body-bg); border-radius: 14px; }
.acct-stats a { padding: 10px 4px; text-align: center; position: relative; text-decoration: none; }
.acct-stats a + a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--acct-line); }
.acct-stats b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acct-stats .acct-stat-empty b { color: var(--bs-secondary-color); opacity: .5; }
.acct-stats span { font-size: .74rem; color: var(--bs-secondary-color); }
.acct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct-btn { height: 44px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: .92rem; text-decoration: none; }
.acct-btn:hover { text-decoration: none; }
.acct-btn-ink { background: var(--ink); color: #fff; }
.acct-btn-ink:hover { background: #000; color: #fff; }
.acct-btn-soft { background: var(--acct-chip); color: var(--ink); }
.acct-btn-soft:hover { background: #e9e1cb; }
.acct-btn-yellow { background: var(--yellow); color: var(--ink); }
.acct-btn-yellow:hover { background: var(--yellow-hover); color: var(--ink); }

.acct-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff4b8; border: 1px solid #f2df74; text-decoration: none; }
.acct-nudge:hover { text-decoration: none; background: #fff0a0; }
.acct-nudge-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--yellow); display: grid; place-items: center; flex: 0 0 auto; }
.acct-nudge b { display: block; font-size: .92rem; }
.acct-nudge span span, .acct-nudge .min-w-0 > span { font-size: .8rem; color: #5d5747; }
.acct-chev { margin-left: auto; flex: 0 0 auto; opacity: .55; }

/* Tab bar — pinned under the compact title bar; the thumb slides between tabs */
.acct-seg-mark { height: 14px; }
.acct-seg-wrap {
    position: sticky; top: calc(var(--acct-nav-h) + 48px); z-index: 20; margin: 0 -0.75rem 4px; padding: 8px 0.75rem;
    background: rgba(251,247,236,.85); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.acct-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--acct-chip); border-radius: 13px; padding: 3px; }
.acct-seg a { position: relative; z-index: 1; height: 38px; border-radius: 10px; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #5d5747; text-decoration: none; transition: color 220ms ease; }
.acct-seg a[aria-selected="true"] { color: var(--ink); }
.acct-seg-n { font-size: .74rem; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(26,26,26,.08); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.acct-seg a[aria-selected="true"] .acct-seg-n { background: var(--yellow); }
.acct-seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(26,26,26,.1), 0 3px 8px -2px rgba(26,26,26,.12); transition: transform 420ms cubic-bezier(.32,.72,0,1); }

/* At least a screen tall, so a short tab can keep the tab bar pinned instead of the page jumping */
.acct-pane { padding: 6px 0 24px; min-height: 100vh; min-height: 100dvh; }
.acct-pane[hidden] { display: none; }
.acct-sec-title { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 4px 10px; }
.acct-sec-title h2 { margin: 0; font-size: 1.12rem; letter-spacing: -0.015em; }
.acct-sec-title a { font-size: .86rem; font-weight: 600; color: var(--bs-secondary-color); }

.acct-insight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-insight a { background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: var(--acct-shadow); text-decoration: none; color: var(--ink); }
.acct-insight b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.acct-insight span { font-size: .78rem; color: var(--bs-secondary-color); }
.acct-insight em { font-style: normal; font-size: .72rem; font-weight: 700; color: #1f8a57; display: block; margin-top: 2px; }
.acct-insight em.acct-insight-muted { color: var(--bs-secondary-color); }
.acct-spark { display: block; margin-top: 6px; width: 100%; height: 22px; }

.acct-week-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-week-tile { background: var(--surface); border-radius: 14px; padding: 12px 12px 10px; box-shadow: var(--acct-shadow); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
a.acct-week-tile, a.acct-week-tile:hover { text-decoration: none; color: var(--ink); }
.acct-wt-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.acct-wt-lbl { font-size: .78rem; color: var(--bs-secondary-color); font-weight: 600; }
.acct-wt-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .73rem; font-weight: 700; color: var(--bs-secondary-color); padding: 3px 8px; border-radius: 6px; background: var(--acct-chip); }
.acct-wt-delta.up { color: #1f8a57; background: rgba(31,138,87,.08); }
.acct-wt-delta.down { color: #a3542a; background: rgba(196,54,44,.08); }
.acct-wt-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.acct-wt-sub { font-size: .72rem; color: var(--bs-secondary-color); margin-top: 2px; width: 100%; }
.acct-wt-chart { position: relative; width: 100%; margin-top: 6px; }
.acct-wt-chart svg { display: block; width: 100%; height: 30px; overflow: visible; }
.acct-wt-area { fill: rgba(31,138,87,.08); }
.acct-wt-area-down { fill: rgba(196,54,44,.06); }
.acct-wt-prev { fill: none; stroke: var(--acct-line); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; }
.acct-wt-line { fill: none; stroke: #1f8a57; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.acct-wt-line-down { stroke: #c4362c; }
.acct-wt-dot { position: absolute; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #1f8a57; transform: translateY(-50%); font-style: normal; }
.acct-wt-dot-down { background: #c4362c; }
.acct-wt-days { display: flex; justify-content: space-between; margin-top: 4px; width: 100%; }
.acct-wt-days span { font-size: .6rem; color: var(--bs-secondary-color); font-weight: 500; width: 14.28%; text-align: center; }

.acct-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -0.75rem; padding: 0 0.75rem 2px; }
.acct-chips::-webkit-scrollbar { display: none; }
.acct-chips-top { margin-top: 10px; margin-bottom: 12px; }
.acct-chip { flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--acct-line); background: var(--surface); font-weight: 600; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.acct-chip:hover { text-decoration: none; color: var(--ink); }
.acct-chip-n { color: var(--bs-secondary-color); font-weight: 500; }
.acct-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.acct-chip[aria-pressed="true"] .acct-chip-n { color: rgba(255,255,255,.65); }
.acct-chip[aria-disabled="true"] { color: #b9b3a5; background: transparent; pointer-events: none; }
.acct-chip[aria-disabled="true"] .acct-chip-n { color: #b9b3a5; }

/* Listing rows — swipe left for actions (account.js); ⋯ does the same */
.acct-rows { background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); overflow: hidden; margin-top: 12px; }
.acct-row { position: relative; overflow: hidden; }
.acct-row[hidden] { display: none; }
.acct-row + .acct-row { border-top: 1px solid var(--acct-line); }
.acct-row-actions { position: absolute; inset: 0 0 0 auto; display: flex; visibility: hidden; }
.acct-row.swiped .acct-row-actions { visibility: visible; }
.acct-row-actions form { display: flex; }
.acct-row-actions a, .acct-row-actions button { width: 80px; border: 0; color: #fff; font-weight: 700; font-size: .8rem; display: grid; place-items: center; align-content: center; gap: 4px; text-decoration: none; }
.acct-row-actions a:hover { color: #fff; text-decoration: none; }
.acct-act-edit { background: #8a8478; }
.acct-act-sold, .acct-act-relist { background: #1f8a57; }
.acct-act-delete { background: #d13a2f; }
.acct-row-main { position: relative; z-index: 1; display: flex; align-items: center; background: var(--surface); touch-action: pan-y; will-change: transform; user-select: none; -webkit-user-select: none; }
.acct-row-link { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 12px 0 12px 12px; color: var(--ink); text-decoration: none; -webkit-user-drag: none; }
.acct-row-link:hover { text-decoration: none; color: var(--ink); }
.acct-row-thumb { position: relative; width: 84px; height: 63px; border-radius: 11px; overflow: hidden; flex: 0 0 auto; background: #e6e0d0; }
.acct-row-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.acct-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.acct-row-price { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acct-row-title { font-weight: 700; font-size: .93rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.acct-row-stats { font-size: .76rem; color: var(--bs-secondary-color); margin-top: 2px; font-variant-numeric: tabular-nums; }
.acct-row-cta { margin-top: 6px; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--yellow); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; }
.acct-status { position: absolute; left: 6px; bottom: 6px; height: 18px; padding: 0 6px; border-radius: 6px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; display: inline-flex; align-items: center; }
.acct-status-active { background: rgba(255,255,255,.92); color: #1f8a57; }
.acct-status-draft { background: var(--ink); color: var(--yellow); }
.acct-status-sold { background: rgba(26,26,26,.78); color: #fff; }
.acct-row-more { width: 44px; height: 44px; margin: 0 4px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; flex: 0 0 auto; color: var(--bs-secondary-color); }
.acct-row-more:hover, .acct-row-more:active { background: var(--acct-chip); }
.acct-rows-empty { padding: 22px 18px; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; margin: 0; }
.acct-hint { text-align: center; font-size: .76rem; color: #b9b3a5; margin: 10px 0 0; }
.acct-empty { padding: 22px 18px; text-align: center; color: var(--bs-secondary-color); background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); margin-top: 12px; }
.acct-list-cta { margin-top: 14px; width: 100%; height: 52px; font-size: 1rem; border-radius: 14px; }
.acct-desk-list-btn { display: none; }

/* Settings — iOS-style grouped lists */
.acct-group-label { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 22px 16px 8px; }
.acct-group { background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); overflow: hidden; }
.acct-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 14px; position: relative; color: var(--ink); text-decoration: none; }
.acct-item:hover { text-decoration: none; color: var(--ink); background: #faf7ef; }
.acct-item + .acct-item::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--acct-line); }
.acct-item-icon + .acct-item-text { padding-left: 0; }
.acct-item:has(.acct-item-icon) + .acct-item::before, .acct-item + .acct-item:has(.acct-item-icon)::before { left: 58px; }
.acct-item-static:hover { background: none; }
.acct-item-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.acct-item-text { flex: 1; min-width: 0; padding: 10px 0; }
.acct-item-text b { display: block; font-weight: 600; font-size: .95rem; }
.acct-item-text small { display: block; font-size: .78rem; color: var(--bs-secondary-color); line-height: 1.35; margin-top: 1px; }
.acct-item-value { color: var(--bs-secondary-color); font-size: .88rem; white-space: nowrap; }
.acct-item-chev { color: #c6bfae; flex: 0 0 auto; }
.acct-badge-red { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #d13a2f; color: #fff; font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
.acct-switch-row { cursor: pointer; }
/* iOS switch on a real checkbox: the knob stretches while pressed, then slides */
.acct-switch {
    appearance: none; -webkit-appearance: none; position: relative; width: 51px; height: 31px; flex: 0 0 auto; margin: 0;
    border-radius: 999px; background: #e3ddcc; cursor: pointer; transition: background-color 250ms ease;
}
.acct-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform 380ms cubic-bezier(.32,.72,0,1), width 200ms cubic-bezier(.32,.72,0,1); }
.acct-switch:checked { background: var(--ink); }
.acct-switch:checked::after { transform: translateX(20px); }
.acct-switch:active::after { width: 33px; }
.acct-switch:checked:active::after { transform: translateX(14px); }
.acct-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.acct-notif-save { padding: 12px 14px; border-top: 1px solid var(--acct-line); }
.acct-notif-save .acct-btn { width: 100%; }

/* Notification preferences page (Concept B: category cards + dark push banner) */
.acct-subtitle { font-size: .84rem; color: var(--bs-secondary-color); margin: -2px 0 16px; }
.notif-page { max-width: 820px; margin: 0 auto; }

/* Dark push banner — shown when push is NOT enabled */
.notif-push-banner {
    background: var(--ink); color: var(--cream, #F5F0E5); border-radius: 18px; padding: 18px 16px;
    margin-bottom: 18px; display: flex; gap: 14px; align-items: flex-start;
}
.notif-push-banner-icon {
    width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1);
    display: grid; place-items: center; flex: 0 0 auto;
}
.notif-push-banner-text { flex: 1; min-width: 0; }
.notif-push-banner-text b { font-size: .95rem; font-weight: 700; display: block; margin-bottom: 4px; }
.notif-push-banner-text small { font-size: .8rem; opacity: .65; line-height: 1.4; display: block; margin-bottom: 12px; }
.notif-push-enable {
    height: 40px; border-radius: 10px; border: 0; padding: 0 20px; font-weight: 700; font-size: .86rem;
    background: var(--yellow); color: var(--ink); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.notif-push-hint { font-size: .8rem; opacity: .6; margin: 0 0 8px; }
.notif-push-ios { font-size: .78rem; opacity: .5; margin: 4px 0 10px; line-height: 1.35; }
.notif-push-status { font-size: .82rem; color: #4ade80; margin: 8px 0 0; }
.notif-push-battery { font-size: .8rem; background: rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; margin-top: 12px; line-height: 1.4; }
.notif-push-battery strong { font-weight: 700; }
.acct-btn-sm { height: 36px; font-size: .84rem; padding: 0 14px; }

/* White push enabled card */
.notif-push-on {
    background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); overflow: hidden;
    margin-bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 14px;
}
.notif-push-on-icon {
    width: 36px; height: 36px; border-radius: 10px; background: #e8f5e9;
    display: grid; place-items: center; flex: 0 0 auto; color: #2f7d5b;
}
.notif-push-on-text { flex: 1; min-width: 0; }
.notif-push-on-text b { font-weight: 600; font-size: .92rem; display: block; }
.notif-push-on-status { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #2f7d5b; margin-top: 2px; }
.notif-push-on-status svg { flex-shrink: 0; }
.notif-push-off-btn {
    height: 34px; border-radius: 9px; border: 0; padding: 0 14px; font-weight: 600; font-size: .8rem;
    background: var(--acct-chip); color: var(--bs-secondary-color); cursor: pointer; font-family: inherit; white-space: nowrap;
}

/* Install app card (standalone) */
.notif-install-card {
    background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); overflow: hidden;
    margin-bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 14px;
}
.notif-install-icon {
    width: 36px; height: 36px; border-radius: 10px; background: var(--acct-chip);
    display: grid; place-items: center; flex: 0 0 auto; color: var(--ink);
}
.notif-install-text { flex: 1; min-width: 0; }
.notif-install-text b { font-weight: 600; font-size: .92rem; display: block; }
.notif-install-text small { display: block; font-size: .78rem; color: var(--bs-secondary-color); line-height: 1.35; margin-top: 2px; }
.notif-install-btn {
    height: 36px; border-radius: 10px; border: 0; padding: 0 16px;
    font-weight: 600; font-size: .84rem; background: var(--yellow); color: var(--ink);
    cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.notif-install-x {
    border: 0; background: none; padding: 0 2px; margin-left: -4px;
    font-size: 1.3rem; line-height: 1; color: var(--bs-secondary-color); cursor: pointer; flex-shrink: 0;
}
.notif-install-x:hover { color: var(--ink); }

/* Category cards */
.notif-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.notif-cat { background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow); overflow: hidden; }
.notif-cat-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.notif-cat-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.notif-cat-title { font-weight: 700; font-size: .92rem; }
.notif-cat-desc { font-size: .76rem; color: var(--bs-secondary-color); line-height: 1.35; }
.notif-row { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 52px; position: relative; cursor: pointer; }
.notif-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--acct-line); }
.notif-row-text { flex: 1; min-width: 0; padding: 8px 0; }
.notif-row-text b { display: block; font-weight: 600; font-size: .9rem; }
.notif-row-text small { display: block; font-size: .74rem; color: var(--bs-secondary-color); line-height: 1.35; margin-top: 1px; }
.notif-row-disabled { opacity: .45; pointer-events: none; }
.notif-page .acct-notif-save { background: none; border: none; padding: 16px 0 0; }
.notif-page .acct-notif-save .acct-btn { border-radius: 14px; }
@media (min-width: 660px) {
    .notif-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.acct-logout { margin: 22px 0 6px; width: 100%; height: 54px; border-radius: 18px; border: 0; background: var(--surface); box-shadow: var(--acct-shadow); color: #d13a2f; font-weight: 700; font-size: .98rem; }

/* Edit profile sheet — slides up from the bottom; drag/fling the handle to close */
.acct-scrim { position: fixed; inset: 0; z-index: 1060; background: rgba(15,14,12,.42); opacity: 0; pointer-events: none; }
.acct-scrim.on { opacity: 1; pointer-events: auto; }
.acct-sheet {
    position: fixed; z-index: 1061; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 560px;
    max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
    background: var(--bs-body-bg); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -20px rgba(0,0,0,.4); will-change: transform;
}
.acct-sheet[hidden] { display: none; }
.acct-sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.acct-sheet-grab { flex: 0 0 auto; padding: 8px 16px 6px; touch-action: none; cursor: grab; user-select: none; }
.acct-sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(26,26,26,.2); margin: 0 auto 10px; }
.acct-sheet-bar { display: flex; align-items: center; justify-content: space-between; }
.acct-sheet-bar h2 { margin: 0; font-size: 1.1rem; letter-spacing: -0.015em; }
.acct-sheet-cancel { color: var(--bs-secondary-color); font-weight: 600; padding: 6px 2px; }
.acct-sheet-save { border: 0; background: none; font-weight: 700; font-size: .95rem; padding: 6px 2px; color: var(--ink); }
.acct-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px calc(24px + env(safe-area-inset-bottom)); }
.acct-photo-edit { display: grid; justify-items: center; gap: 8px; padding: 10px 0 6px; }
.acct-photo-btn { font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin: 0; }
.acct-remove-photo { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--bs-secondary-color); }
.acct-remove-photo .form-check-input { margin: 0; }
.acct-field { display: grid; gap: 4px; padding: 10px 14px; }
.acct-field + .acct-field { border-top: 1px solid var(--acct-line); }
.acct-field label { font-size: .76rem; font-weight: 600; color: var(--bs-secondary-color); display: flex; align-items: center; gap: 5px; margin: 0; }
.acct-field input { border: 0; background: none; padding: 0; font-size: 1rem; outline: none; }
.acct-field-locked div { color: var(--bs-secondary-color); }
.acct-note { font-size: .78rem; color: var(--bs-secondary-color); line-height: 1.45; margin: 10px 4px 0; }

/* ── Desktop: hidden by default, shown at breakpoint ── */
.acct-desktop-layout { display: contents; }
.acct-sidebar { display: none; }
.acct-profile-sidebar { display: none; }
.acct-sidebar-nav { display: none; }
.acct-sidebar-insights { display: none; }
.acct-row-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.acct-badge { font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.acct-badge-green { background: #e6f4ed; color: #2f7d5b; }
.acct-badge-orange { background: #fef2e0; color: #b45309; }
.acct-badge-blue { background: #eff6ff; color: #2563eb; }

/* ── Desktop inventory-table elements (hidden on mobile, shown ≥860px) ── */
.acct-desk-strip { display: none; }
.acct-desk-stats { display: none; }
.acct-desk-table-wrap { display: none; }
.acct-desk-search { display: none; }
.acct-desk-toolbar { display: block; }
.acct-t-car { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-t-thumb { width: 56px; height: 42px; border-radius: 8px; background: #eae6dc; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.acct-t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acct-t-title { font-weight: 600; font-size: .86rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-t-specs { font-size: .78rem; color: var(--bs-secondary-color); margin-top: 1px; }
.acct-t-price { font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-t-status { font-weight: 700; font-size: .68rem; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; display: inline-block; }
.acct-t-s-active { background: #e6f4ed; color: #2f7d5b; }
.acct-t-s-sold { background: #f0ede5; color: var(--bs-secondary-color); }
.acct-t-s-draft { background: #fef3e0; color: #c98a00; }
.acct-t-views, .acct-t-saves, .acct-t-chats { font-variant-numeric: tabular-nums; }
.acct-t-muted { color: var(--acct-line); }
.acct-t-date { color: var(--bs-secondary-color); white-space: nowrap; }
.acct-t-actions { display: flex; gap: 4px; }
.acct-t-act { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); text-decoration: none; transition: background 100ms ease, color 100ms ease; }
.acct-t-act:hover { background: var(--acct-chip); color: var(--ink); }

/* ── Medium screens (768–859px): wider profile, 2-col listings, no sidebar ── */
@media (min-width: 768px) and (max-width: 859px) {
    .site-main.acct-page { max-width: 720px; }
    .acct-profile { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 24px; }
    .acct-profile .acct-profile-top { grid-column: 1; grid-row: 1; }
    .acct-profile .acct-join-row { margin-top: 4px; }
    .acct-profile .acct-stats { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
    .acct-profile .acct-actions { grid-column: 2; grid-row: 1 / -1; align-self: center; grid-template-columns: 1fr; width: 180px; gap: 6px; }
    .acct-rows { display: grid; grid-template-columns: 1fr 1fr; }
    .acct-rows .acct-row { border-top: 0; }
    .acct-rows .acct-row:nth-child(n+3) { border-top: 1px solid var(--acct-line); }
    .acct-rows .acct-row:nth-child(odd) { border-right: 1px solid var(--acct-line); }
    .acct-rows .acct-rows-empty { grid-column: 1 / -1; }
    .acct-pane .row { --bs-gutter-x: 1rem; }
    .acct-pane .row-cols-sm-3 > * { flex: 0 0 auto; width: 25%; }
}

/* ── Desktop layout (≥860px): inventory table — Design C ─────────────── */
@media (min-width: 860px) {
    .site-main.acct-page { max-width: 1100px; }
    .acct-desktop-layout { display: block; padding-top: 20px; margin-bottom: -1.5rem; }
    .acct-main { min-width: 0; }

    /* Hide mobile-only elements */
    .acct-sidebar { display: none; }
    .acct-stack { display: none; }
    .acct-compact, .acct-large { display: none; }
    .acct-mobile-insights { display: none; }
    .acct-sell-title { display: none; }

    /* ── Profile strip ── */
    .acct-desk-strip {
        display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow);
        padding: 20px 24px;
    }
    .acct-desk-strip-info { flex: 1; min-width: 180px; }
    .acct-desk-strip-info .acct-name { font-size: 1.15rem; }
    .acct-desk-strip-info .acct-join-row { margin-top: 4px; }
    .acct-desk-strip-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .acct-desk-strip-actions .acct-btn { height: 40px; font-size: .86rem; padding: 0 16px; }

    /* ── Stat tiles ── */
    .acct-desk-stats { display: block; margin-top: 16px; }
    .acct-desk-stats-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
    .acct-desk-stats-h h2 { font-size: 1.05rem; font-weight: 800; margin: 0; }
    .acct-desk-stats-h a { font-size: .82rem; font-weight: 600; color: var(--bs-secondary-color); text-decoration: none; }
    .acct-desk-stats-h a:hover { color: var(--ink); }
    .acct-desk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; gap: 12px; }
    .acct-desk-tile { background: var(--surface); border-radius: 16px; box-shadow: var(--acct-shadow); padding: 18px 20px 14px; transition: transform 140ms ease; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
    a.acct-desk-tile:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); }
    .acct-desk-tile .acct-wt-num { font-size: 1.7rem; margin-top: 4px; }
    .acct-desk-tile .acct-wt-chart svg { height: 48px; }
    .acct-desk-tile .acct-wt-chart { margin-top: 10px; }
    .acct-empty { max-width: 100%; }

    /* ── Tab bar as underline tabs ── */
    .acct-seg-mark { display: none; }
    .acct-seg-wrap { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; padding: 0; margin: 20px 0 0; display: flex; align-items: flex-end; justify-content: space-between; }
    .acct-seg { display: flex; gap: 0; background: transparent; border-radius: 0; padding: 0; border-bottom: 2px solid var(--acct-line); }
    .acct-desk-list-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; font-size: .85rem; font-weight: 600; background: var(--yellow); color: var(--ink); border-radius: 10px; text-decoration: none; margin-bottom: 6px; transition: opacity 140ms ease; }
    .acct-desk-list-btn:hover { opacity: .85; color: var(--ink); }
    .acct-list-cta-desk-hide { }
    .acct-seg-thumb { display: none; }
    .acct-seg a { height: auto; border-radius: 0; padding: 12px 20px; font-size: .92rem; color: var(--bs-secondary-color); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 120ms ease, border-color 120ms ease; }
    .acct-seg a:hover { color: var(--ink); }
    .acct-seg a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
    .acct-seg-n { background: var(--acct-line); }
    .acct-seg a[aria-selected="true"] .acct-seg-n { background: var(--yellow); }

    /* ── Selling toolbar: search + chips row ── */
    .acct-desk-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
    .acct-desk-search {
        flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px;
        background: var(--surface); border: 1.5px solid var(--acct-line); border-radius: 10px;
        padding: 9px 12px; transition: border-color 120ms ease;
    }
    .acct-desk-search:focus-within { border-color: var(--ink); }
    .acct-desk-search input { border: 0; background: none; outline: none; font: inherit; font-size: .86rem; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }
    .acct-desk-search input::placeholder { color: var(--bs-secondary-color); }
    .acct-desk-search svg { color: var(--bs-secondary-color); flex-shrink: 0; }
    .acct-desk-toolbar .acct-chips { margin: 0; padding: 0; gap: 5px; overflow: visible; }

    /* ── Data table ── */
    .acct-rows { display: none; }
    [data-acct-swipe-hint] { display: none; }
    .acct-desk-table-wrap {
        display: block; margin-top: 12px;
        background: var(--surface); border-radius: 18px; box-shadow: var(--acct-shadow);
        overflow-x: auto;
    }
    .acct-desk-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 740px; table-layout: fixed; }
    .acct-desk-table col:nth-child(1) { width: auto; }
    .acct-desk-table col:nth-child(2) { width: 9%; }
    .acct-desk-table col:nth-child(3) { width: 8%; }
    .acct-desk-table col:nth-child(4) { width: 9%; }
    .acct-desk-table col:nth-child(5) { width: 9%; }
    .acct-desk-table col:nth-child(6) { width: 9%; }
    .acct-desk-table col:nth-child(7) { width: 9%; }
    .acct-desk-table col:nth-child(8) { width: 56px; }
    .acct-desk-table thead th {
        font-size: .74rem; font-weight: 600; color: var(--bs-secondary-color);
        text-transform: uppercase; letter-spacing: .05em; text-align: center;
        padding: 14px 16px; border-bottom: 1px solid var(--acct-line);
        white-space: nowrap; cursor: pointer; user-select: none; transition: color 100ms ease;
    }
    .acct-desk-table thead th:first-child { text-align: left; }
    .acct-desk-table td:not(:first-child) { text-align: center; }
    .acct-desk-table thead th:last-child { cursor: default; }
    .acct-desk-table thead th:hover:not(:last-child) { color: var(--ink); }
    .acct-sort-arrow { display: inline-block; margin-left: 3px; opacity: .3; transition: opacity 100ms ease; font-size: .68rem; }
    .acct-sorted .acct-sort-arrow { opacity: 1; color: var(--ink); }
    .acct-desk-table tbody tr { border-bottom: 1px solid var(--acct-line); transition: background 80ms ease; }
    .acct-desk-table tbody tr:last-child { border-bottom: none; }
    .acct-desk-table tbody tr.acct-t-clickable { cursor: pointer; }
    .acct-desk-table tbody tr:hover { background: #f8f5ed; }
    .acct-desk-table td { padding: 12px 16px; vertical-align: middle; }
    .acct-desk-table-empty { padding: 48px 24px; text-align: center; color: var(--bs-secondary-color); font-size: .92rem; margin: 0; }

    /* ── Pagination ── */
    .acct-desk-table-bottom {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px; border-top: 1px solid var(--acct-line); font-size: .86rem; color: var(--bs-secondary-color);
    }
    .acct-desk-pager { display: flex; gap: 4px; }
    .acct-pager-btn {
        min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--acct-line);
        background: var(--surface); font-weight: 600; font-size: .86rem; color: var(--ink);
        cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 8px;
        transition: background 100ms ease, color 100ms ease;
    }
    .acct-pager-btn.active { background: var(--ink); color: var(--bc-cream); border-color: var(--ink); }
    .acct-pager-btn:hover:not(.active):not(:disabled) { background: #f8f5ed; }
    .acct-pager-btn:disabled { opacity: .3; cursor: default; }

    /* ── CTA button ── */
    .acct-list-cta { display: none; }

    /* Buying tab: 4-col cards */
    .acct-pane .row { --bs-gutter-x: 1rem; }
    .acct-pane .row-cols-sm-3 > * { flex: 0 0 auto; width: 25%; }

    .acct-sheet { max-height: 96vh; max-height: 96dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .acct-page *, .acct-sheet, .acct-sheet * { transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .acct-compact, .acct-seg-wrap { background: var(--bs-body-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* Account page — "Following" list under Buying */
.acct-follow-row { gap: 8px; padding-right: 10px; }
.acct-follow-row:hover { background: none; }
.acct-follow-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.acct-follow-link:hover { color: var(--ink); text-decoration: none; }
.acct-follow-row + .acct-follow-row::before { left: 66px; }
.acct-unfollow { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--acct-line); background: var(--surface); font-weight: 600; font-size: .82rem; color: var(--ink); }
.acct-unfollow:hover { background: var(--acct-chip); }
a.acct-unfollow { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.acct-follow-row form { flex: 0 0 auto; }

/* ── Public seller profile (templates/accounts/public_profile.html,
   static/js/public-profile.js) — the account page's visual language, with a
   centred contact-card header. ─────────────────────────────────────────────── */
.pp-compact { gap: 8px; }
.pp-compact-name { transform: translateY(4px); transition: transform 300ms cubic-bezier(.32,.72,0,1); }
.acct-compact.show .pp-compact-name { transform: none; }
.pp-self { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--ink); color: #f3efe4; font-size: .84rem; line-height: 1.4; }
.pp-self b { color: #fff; }
.pp-self a { margin-left: auto; flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--yellow); color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.pp-hero { text-align: center; padding: 8px 0 4px; }
.pp-avatar { display: inline-block; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface), 0 10px 30px -12px rgba(26,26,26,.4); }
.pp-avatar > * { display: flex !important; }
.pp-hero h1 { margin: 14px 0 2px; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.pp-meta { color: var(--bs-secondary-color); font-size: .88rem; }
.pp-tags { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pp-tag-ok { background: #e3f3ea; color: #1f8a57; }

.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 0; }
.pp-stats a, .pp-stats > span { padding: 14px 4px; text-align: center; position: relative; text-decoration: none; color: var(--ink); transition: background 150ms ease; }
.pp-stats a:hover { background: rgba(26,26,26,.04); }
.pp-stats a + a::before, .pp-stats a + span::before, .pp-stats span + a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--acct-line); }
.pp-stats b { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pp-stats b svg { color: #e0a400; }
.pp-stats span { font-size: .76rem; color: var(--bs-secondary-color); }
.pp-stat-empty b { color: var(--bs-secondary-color); opacity: .5; }

.pp-actions { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 8px; margin-top: 12px; }
.pp-actions form { margin: 0; }
.pp-more { position: relative; }
.pp-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; min-width: 210px; padding: 6px; border-radius: 16px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7); box-shadow: 0 2px 4px rgba(26,26,26,.05), 0 18px 40px -18px rgba(26,26,26,.35);
    transform-origin: top right; opacity: 0; transform: scale(.92); pointer-events: none;
    transition: opacity 160ms ease, transform 320ms cubic-bezier(.32,.72,0,1);
}
.pp-menu.open { opacity: 1; transform: none; pointer-events: auto; }
/* Without JS the menu simply stays open under the button */
html:not(.pp-js) .pp-menu { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 8px; }
.pp-menu form { margin: 0; }
.pp-menu a, .pp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 11px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; }
.pp-menu a:hover, .pp-menu button:hover { background: rgba(26,26,26,.05); color: var(--ink); text-decoration: none; }
.pp-menu .pp-danger, .pp-menu .pp-danger:hover { color: #d13a2f; }
.pp-assure { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--acct-shadow); font-size: .82rem; color: #4a463e; line-height: 1.45; }
.pp-assure svg { flex: 0 0 auto; margin-top: 1px; }

.pp-seg { grid-template-columns: repeat(3, 1fr); }

.pp-sold-title { margin-top: 24px; }
.pp-sold-title span { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.pp-sold-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -0.75rem; padding: 0 0.75rem 4px; scroll-snap-type: x mandatory; }
.pp-sold-strip::-webkit-scrollbar { display: none; }
.pp-sold-strip > .col { flex: 0 0 44%; max-width: 220px; padding: 0; scroll-snap-align: start; scroll-margin-left: 0.75rem; }
.pp-sold-strip .listing-tile img { filter: grayscale(.35); }

.pp-summary { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 8px; }
.pp-score b { display: block; font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.pp-score-stars { color: #e0a400; font-size: .95rem; letter-spacing: 1px; margin-top: 6px; }
.pp-score span { font-size: .76rem; color: var(--bs-secondary-color); }
.pp-bars { display: grid; gap: 5px; }
.pp-bar { display: grid; grid-template-columns: 12px 1fr 18px; gap: 8px; align-items: center; font-size: .74rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.pp-bar i { height: 6px; border-radius: 3px; background: var(--acct-chip); overflow: hidden; position: relative; }
.pp-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 3px; transform-origin: left; animation: pp-grow 700ms cubic-bezier(.32,.72,0,1) both; animation-delay: calc(var(--d) * 60ms); }
@keyframes pp-grow { from { transform: scaleX(0); } }
.pp-review-chips { margin: 14px -0.75rem 10px; }
.pp-review { padding: 14px 16px; }
.pp-review + .pp-review { border-top: 1px solid var(--acct-line); }
.pp-review[hidden] { display: none; }
.pp-review-head { display: flex; align-items: center; gap: 10px; }
.pp-review-av { width: 34px; height: 34px; border-radius: 50%; background: var(--acct-chip); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: 0 0 auto; }
.pp-review-name { font-weight: 700; font-size: .9rem; }
.pp-review-sub { font-size: .76rem; color: var(--bs-secondary-color); }
.pp-review-stars { margin-left: auto; color: #e0a400; font-size: .85rem; letter-spacing: 1px; flex: 0 0 auto; }
.pp-review-text { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: #2c2a26; }
.pp-review-car { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .76rem; color: var(--bs-secondary-color); background: var(--bs-body-bg); border-radius: 8px; padding: 4px 8px; }
.pp-review-report { display: block; margin-top: 6px; font-size: .74rem; color: #b9b3a5; text-decoration: underline; text-underline-offset: 2px; }
.pp-reviews-note { margin-top: 12px; }
.pp-followers-summary { text-align: center; padding: 32px 16px; }
.pp-followers-summary b { display: block; font-size: 2.4rem; line-height: 1; margin-bottom: 4px; }
.pp-followers-summary span { color: var(--bs-secondary-color); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .pp-bar i::after { animation: none; } }

/* ── Public profile — mobile: match the account-page card ────────────── */
@media (max-width: 859.98px) {
    body:has(.pp-page) { min-height: 0; }
    .site-main.pp-page { flex: 0 0 auto; }
    .pp-page .acct-pane { min-height: 0; }
    .pp-head { background: var(--surface); border-radius: 22px; box-shadow: var(--acct-shadow); padding: 18px; }
    .pp-hero { text-align: center; padding: 0; }
    .pp-avatar { box-shadow: none; }
    .pp-avatar > * { width: 80px !important; height: 80px !important; font-size: 1.8rem !important; }
    .pp-hero h1 { margin: 10px 0 0; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
    .pp-hero-info { display: flex; flex-direction: column; align-items: center; }
    .pp-meta { font-size: .82rem; margin-top: 2px; }
    .pp-tags { justify-content: center; margin-top: 6px; }
    .pp-stats { margin-top: 16px; background: var(--bs-body-bg); border-radius: 14px; }
    .pp-stats a, .pp-stats > span { padding: 10px 4px; }
    .pp-stats b { font-size: 1.15rem; }
    .pp-stats a:nth-child(n+4), .pp-stats .pp-stat-reply { display: none; }
    .pp-actions { margin-top: 14px; }
    .pp-assure { display: none; }
}

/* ── Public profile — desktop (≥860 px), concept C: dark hero banner ───── */
body:has(.pp-page) { overflow-x: clip; }
@media (min-width: 860px) {
    .site-main.pp-page { display: flex; flex-direction: column; padding-top: 0; }
    .pp-page .pp-back-bar { display: none; }

    /* Head: grid so actions overlay on hero row */
    .pp-page .pp-head { display: grid; grid-template-columns: 1fr; }

    /* Hero: dark banner, horizontal layout, full-bleed — NO bottom padding (info/actions own their pb) */
    .pp-page .pp-hero {
        grid-row: 1; grid-column: 1;
        display: flex; align-items: flex-end; gap: 28px;
        text-align: left;
        background: var(--ink); color: #fff;
        margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
        padding: 40px calc(50vw - 50%) 0;
    }
    .pp-page .pp-hero h1 { color: #fff; font-size: 2rem; margin: 0; line-height: 1.1; }
    .pp-hero-info {
        flex: 1; min-width: 0; padding-bottom: 20px;
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    }
    .pp-page .pp-hero-info h1 { width: 100%; }
    .pp-page .pp-meta { color: rgba(255,255,255,.55); font-size: .92rem; margin: 0; }
    .pp-page .pp-tags { justify-content: flex-start; margin: 0; }
    .pp-page .pp-tag-ok { background: rgba(31,138,87,.2); color: #5ee0a0; }
    .pp-page .acct-tag.acct-tag-idle { background: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }

    /* Avatar: larger, golden ring, overlaps below hero */
    .pp-page .pp-avatar {
        margin-bottom: -36px; position: relative; z-index: 2;
        box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px rgba(255,225,77,.3), 0 10px 30px -12px rgba(26,26,26,.4);
    }
    .pp-page .pp-avatar > * { width: 120px !important; height: 120px !important; font-size: 2.8rem !important; }

    /* Actions: grid-overlaid on hero row, bottom-right aligned */
    .pp-page .pp-actions {
        grid-row: 1; grid-column: 1; align-self: end; justify-self: end; z-index: 3;
        display: flex; gap: 8px; margin: 0; padding-bottom: 20px;
    }
    .pp-page .pp-actions .acct-btn { width: auto; height: 42px; border-radius: 12px; padding: 0 20px; }
    .pp-page .pp-actions .pp-more .acct-btn { width: 42px !important; height: 42px; padding: 0; }
    .pp-page .pp-actions .acct-btn-ink { background: var(--yellow); color: var(--ink); }
    .pp-page .pp-actions .acct-btn-soft { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.1); }
    .pp-page .pp-actions .acct-btn-soft:hover { background: rgba(255,255,255,.2); }
    .pp-page .pp-actions .acct-btn:disabled { opacity: .4; cursor: default; }

    /* Stats bar */
    .pp-page .pp-stats { grid-row: 2; display: flex; border-radius: 16px; overflow: hidden; margin-top: 50px; }
    .pp-page .pp-stats a, .pp-page .pp-stats > span { flex: 1; padding: 16px 12px; }

    /* Assure */
    .pp-page .pp-assure { grid-row: 3; max-width: 1100px; margin: 12px auto 0; }

    /* Self-banner: reorder to bottom, sticky floating bar */
    .pp-page .pp-self {
        order: 999; position: sticky; bottom: 16px; z-index: 20;
        margin: 24px 0 0;
        background: var(--ink); color: #fff; box-shadow: 0 4px 24px rgba(26,26,26,.25);
    }
    .pp-page .pp-self a { background: var(--yellow); color: var(--ink); }

    /* Tabs: sticky underline style */
    .pp-page .acct-seg-mark { display: none; }
    .pp-page .acct-seg-wrap {
        position: sticky; top: 56px; z-index: 10;
        background: var(--bs-body-bg); padding: 16px 0 0; margin-bottom: 4px;
        border-bottom: 1px solid var(--acct-line);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .pp-page .acct-seg.pp-seg { display: flex; background: none; border-radius: 0; padding: 0; gap: 0; }
    .pp-page .pp-seg a[role="tab"] {
        padding: 12px 20px; border-radius: 0; font-size: .9rem; font-weight: 600;
        position: relative; color: var(--bs-secondary-color);
        transition: color 180ms ease; text-decoration: none;
    }
    .pp-page .pp-seg a[role="tab"]:hover { color: var(--ink); }
    .pp-page .pp-seg a[aria-selected="true"] { color: var(--ink); }
    .pp-page .pp-seg a[aria-selected="true"]::after {
        content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
        height: 3px; border-radius: 3px 3px 0 0; background: var(--ink);
    }
    .pp-page .pp-seg a[aria-selected="true"] .acct-seg-n { background: var(--yellow); }
    .pp-page .acct-seg-thumb { display: none; }

    /* Tab pane content */
    .pp-page .acct-pane { padding-top: 24px; }

    /* Listings: 4 columns, mock gap */
    .pp-page .acct-pane .row.row-cols-sm-3 > * { width: 25%; }
    .pp-page .acct-pane .row.g-3 { --bs-gutter-x: 18px; --bs-gutter-y: 18px; }

    /* Sold strip: 4-col grid */
    .pp-page .pp-sold-title { margin-top: 32px; }
    .pp-page .pp-sold-strip {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
        overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
    }
    .pp-page .pp-sold-strip > .col { flex: none; max-width: none; }

    /* Reviews: summary card + 2-col card grid */
    .pp-page .pp-summary { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px; }
    .pp-page .pp-review-chips { margin-left: 0; margin-right: 0; }
    .pp-page .pp-reviews {
        display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
        overflow: visible; border-radius: 0; background: none; box-shadow: none;
    }
    .pp-page .pp-review { background: var(--surface); border-radius: 16px; box-shadow: var(--acct-shadow); padding: 20px; }
    .pp-page .pp-review + .pp-review { border-top: none; }
    .pp-page .pp-review-av { width: 40px; height: 40px; font-size: .85rem; }

    /* Deals: 3-col card grid */
    .pp-page .pp-deals {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
        overflow: visible; border-radius: 0; background: none; box-shadow: none;
    }
    .pp-page .pp-deal { background: var(--surface); border-radius: 16px; box-shadow: var(--acct-shadow); padding: 16px; }
    .pp-page .pp-deal + .pp-deal::before { display: none; }
}

/* ── Chat page refinements (templates/messaging/conversation.html,
   static/js/conversation-poll.js) — from the user-approved phone mock, 2026-10-07.
   Scoped to body.chat-page so the desktop dock (which shares the tracker partial
   and .chat-progress styles) is untouched. ───────────────────────────────────── */
body.chat-page .cv-head-wrap {
    padding: 0; position: relative; z-index: 5;
    background: rgba(251,247,236,.92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(26,26,26,.07);
}
.cv-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 4px; }
.cv-icon-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); }
.cv-icon-btn:hover { background: rgba(26,26,26,.06); color: var(--ink); }
.cv-who { position: relative; flex: 0 0 auto; display: block; }
.cv-car { display: block; width: 44px; height: 44px; border-radius: 13px; overflow: hidden; background: #e6e0d0; }
.cv-car img { width: 100%; height: 100%; object-fit: cover; }
.cv-head-text { flex: 1; min-width: 0; }
.cv-head-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cv-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-status { flex: 0 0 auto; font-size: .74rem; font-weight: 600; color: #1f8a57; display: inline-flex; align-items: center; gap: 4px; }
.cv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2bb36b; }
.cv-muted { color: #b9b3a5; display: inline-flex; }
.cv-head-car { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-head-car b { color: var(--ink); }
.cv-flag { font-weight: 700; color: #d13a2f; }
.cv-menu { min-width: 210px; }

/* Tracker, inside the pinned header */
body.chat-page .cv-head-wrap .chat-progress { margin: 0; border: 0; border-top: 1px solid rgba(26,26,26,.06); border-radius: 0; background: var(--surface); }
body.chat-page .cv-head-wrap .chat-progress-panel { max-height: 38vh; overflow-y: auto; }
body.chat-page .cv-head-wrap .chat-progress-step-done .chat-progress-dot { background: #1f8a57; color: #fff; border-color: #1f8a57; }
body.chat-page .cv-head-wrap .chat-progress-line-done { background: #1f8a57; }
/* The selection ring is outline: currentColor — white on a finished (green) dot, so it
   vanished. Pin it to ink so the selected step always shows its ring. */
body.chat-page .cv-head-wrap .chat-progress-step[aria-expanded="true"] .chat-progress-dot { outline-color: var(--ink); }
/* When the offer card is showing under the thread, its Accept/Decline/Counter are the
   ones to use — the tracker's Offer panel keeps just its summary line, not a second set */
body.chat-page:has([data-offer-card]) .cv-head-wrap .chat-offer-strip-actions { display: none; }

/* Thread */
.cv-thread { display: flex; flex-direction: column; padding: 10px 2px 6px; }
.cv-thread > * { flex-shrink: 0; }
.cm-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; }
.cm-row.cm-first { margin-top: 10px; }
.cm-me { justify-content: flex-end; }
.cm-col { display: flex; flex-direction: column; max-width: 78%; min-width: 0; }
.cm-me .cm-col { align-items: flex-end; }
.cm-them .cm-col { align-items: flex-start; }
.cm-bubble { padding: 8px 13px; border-radius: 20px; font-size: .97rem; line-height: 1.35; overflow-wrap: anywhere; }
.cm-text { white-space: pre-wrap; }
.cm-me .cm-bubble { background: var(--ink); color: #fff; }
.cm-them .cm-bubble { background: var(--surface); box-shadow: 0 1px 1px rgba(26,26,26,.06); }
.cv-js .cm-me:not(.cm-last) .cm-bubble, .cm-me.cm-last .cm-bubble { border-bottom-right-radius: 6px; }
.cv-js .cm-me:not(.cm-first) .cm-bubble { border-top-right-radius: 6px; }
.cv-js .cm-them:not(.cm-last) .cm-bubble, .cm-them.cm-last .cm-bubble { border-bottom-left-radius: 6px; }
.cv-js .cm-them:not(.cm-first) .cm-bubble { border-top-left-radius: 6px; }
.cm-bubble.cm-photo-only { padding: 3px; }
.cm-bubble .chat-msg-image { display: block; max-width: 230px; width: 100%; border-radius: 16px; }
.cm-bubble .chat-msg-image + .cm-text { margin-top: 6px; }
.cm-meta { font-size: .7rem; color: var(--bs-secondary-color); margin: 3px 6px 0; }
.cv-js .cm-meta { display: none; }
.cv-js .cm-last .cm-meta { display: block; }
.cm-meta .chat-msg-tick { color: var(--bs-secondary-color); }
.cm-meta .chat-msg-tick-read { color: #3897f0; }
.cm-avatar { flex: 0 0 auto; width: 28px; height: 28px; font-size: .6rem; }
.cv-js .cm-them:not(.cm-last) .cm-avatar { visibility: hidden; }
.cv-thread .chat-day-sep { align-self: center; margin: 12px 0 4px; padding: 3px 10px; border-radius: 999px; background: #f0eadb; font-size: .72rem; font-weight: 700; color: #5d5747; }

/* The live offer card */
.cv-card { align-self: center; width: min(340px, 94%); margin: 12px auto; background: var(--surface); border-radius: 18px; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.2); overflow: hidden; }
.cv-card-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.cv-card-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: #fff4b8; color: #6b5a00; }
.cv-card-t { font-size: .72rem; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.cv-card-v { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.cv-card-sub { padding: 0 14px 12px; font-size: .8rem; color: var(--bs-secondary-color); }
.cv-card-acts { display: flex; border-top: 1px solid #ece6d5; }
.cv-card-acts > * { flex: 1; margin: 0; display: flex; }
.cv-card-acts > * + * { border-left: 1px solid #ece6d5; }
.cv-card-acts button { flex: 1; height: 46px; border: 0; background: none; font-weight: 700; font-size: .9rem; color: var(--ink); }
.cv-card-acts button:hover { background: #faf7ef; }
.cv-card-acts .cv-accept { color: #1f8a57; }

/* "… is typing" */
.cv-typing { display: inline-flex; gap: 4px; align-self: flex-start; margin: 8px 0 4px 36px; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface); box-shadow: 0 1px 1px rgba(26,26,26,.06); }
.cv-typing[hidden] { display: none; }
.cv-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9b3a5; animation: cv-blink 1.2s infinite ease-in-out; }
.cv-typing i:nth-child(2) { animation-delay: .15s; }
.cv-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cv-blink { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Toast: inline alert above the composer (replaces window.alert) */
.cv-toast {
    display: flex; align-items: center; gap: 8px; margin: 0 8px 6px;
    padding: 10px 14px; border-radius: 12px;
    background: #3b2e1a; color: #fff; font-size: .88rem; line-height: 1.3;
    animation: cv-toast-in 250ms ease;
}
.cv-toast span { flex: 1; }
.cv-toast button { flex: 0 0 auto; background: none; border: 0; color: rgba(255,255,255,.7); font-size: 1.2rem; padding: 0 2px; cursor: pointer; line-height: 1; }
.cv-toast button:hover { color: #fff; }
@keyframes cv-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Offline banner: appears after consecutive poll failures */
.cv-offline {
    text-align: center; padding: 8px 14px; margin: 0 8px 6px;
    border-radius: 12px; background: #d94040; color: #fff;
    font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    animation: cv-toast-in 250ms ease;
}

/* Footer: chips, composer, + tray */
body.chat-page .cv-foot {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(251,247,236,.92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -1px 0 rgba(26,26,26,.06);
}
.cv-chips { display: flex; justify-content: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px 8px; padding: 0 10px; }
.cv-chips::-webkit-scrollbar { display: none; }
.cv-chip { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #ece6d5; background: var(--surface); font-weight: 600; font-size: .82rem; white-space: nowrap; color: var(--ink); }
.cv-chip-key { background: #8a8478; border-color: #8a8478; color: #fff; }
.cv-composer { display: flex; align-items: flex-end; gap: 8px; }
.cv-plus { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 0; background: #f2ecdc; color: var(--ink); display: grid; place-items: center; transition: transform 300ms cubic-bezier(.32,.72,0,1), background-color 200ms ease, color 200ms ease; }
.cv-plus[aria-expanded="true"] { transform: rotate(45deg); background: var(--ink); color: #fff; }
.cv-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--surface); border: 1px solid #ddd5bf; border-radius: 22px; padding: 0 5px 0 14px; transition: border-color 200ms ease; }
.cv-field:focus-within { border-color: var(--ink); }
.cv-field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; resize: none; font-size: 1rem; line-height: 1.35; padding: 9px 0; min-height: 40px; max-height: 140px; color: var(--ink); }
.cv-send { width: 32px; height: 32px; margin: 4px 0; flex: 0 0 auto; border-radius: 50%; border: 0; background: var(--ink); color: var(--yellow); display: grid; place-items: center;
    opacity: .3; transition: opacity 160ms ease, transform 120ms ease-out; }
.cv-send:active { transform: scale(.9); }
.cv-field.cv-has-text .cv-send { opacity: 1; }
/* Without JS there's no "has text" signal, so the button just stays visible */
html:not(.cv-js) .cv-send { transform: none; opacity: 1; }
.cv-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; height: 0; overflow: hidden; transition: height 340ms cubic-bezier(.32,.72,0,1); }
.cv-tray.open { height: 88px; }
.cv-tray button { margin-top: 10px; border: 0; background: none; display: grid; justify-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #4a463e; }
.cv-tray-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 2px rgba(26,26,26,.06), 0 6px 16px -10px rgba(26,26,26,.25); color: var(--ink); }
.cv-tray-offer { background: #fff4b8; }
.cv-tray-viewing { background: #e3f3ea; color: #1f8a57; }

/* Offer / viewing as bottom sheets on phones */
.cv-amount { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid #ece6d5; border-radius: 16px; padding: 8px 16px; margin: 0; }
.cv-amount span { font-size: 1.9rem; font-weight: 800; color: var(--bs-secondary-color); }
.cv-amount input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cv-fine { width: 100%; margin: 8px 0 0; text-align: center; font-size: .76rem; color: var(--bs-secondary-color); }
.cv-pound { font-size: 1.15rem; font-weight: 800; line-height: 1; }

/* ── Chat page refinements, round 2 (2026-10-08, from the before/after mock) ── */
/* Tighter header + tracker so the conversation gets more of the screen */
body.chat-page .cv-head { padding: 4px 8px 4px 2px; gap: 8px; }
body.chat-page .cv-car { width: 38px; height: 38px; border-radius: 11px; }
body.chat-page .cv-name { font-size: .95rem; }
body.chat-page .cv-head-car { font-size: .76rem; }
body.chat-page .cv-icon-btn { width: 36px; height: 36px; }
body.chat-page .cv-head-wrap .chat-progress-steps { padding: 6px 10px 4px; }
body.chat-page .cv-head-wrap .chat-progress-dot { width: 24px; height: 24px; font-size: .68rem;
    transition: background-color 300ms ease, color 300ms ease, width 300ms ease, height 300ms ease; }
body.chat-page .cv-head-wrap .chat-progress-step[aria-expanded="true"] .chat-progress-dot { width: 26px; height: 26px; font-size: .72rem; margin-bottom: 2px; }
body.chat-page .cv-head-wrap .chat-progress-label { font-size: .62rem; }
body.chat-page .cv-head-wrap .chat-progress-line { margin-top: .7rem; }
/* Menu icons, and the risky actions set apart */
body.chat-page .cv-menu .chat-avatar-popup-item { display: flex; align-items: center; gap: 10px; }
body.chat-page .cv-menu .cv-mi { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
body.chat-page .cv-menu .cv-menu-divider { height: 1px; background: #ece6d5; margin: 4px 8px; }
/* Where your unread messages start */
.cv-unread-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: .7rem; font-weight: 800; color: #9a7400; letter-spacing: .04em; text-transform: uppercase; }
.cv-unread-divider::before, .cv-unread-divider::after { content: ""; flex: 1; height: 1px; background: #f0d36b; }
/* Jump to latest */
.cv-jump {
    position: absolute; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6;
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px; border: 0;
    background: var(--ink); color: #fff; font-weight: 700; font-size: .8rem; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none;
    transition: opacity 200ms ease, transform 360ms cubic-bezier(.32,.72,0,1);
}
.cv-jump.show { opacity: 1; transform: none; pointer-events: auto; }
.cv-jump-n { background: var(--yellow); color: var(--ink); border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; font-size: .68rem; }
body.chat-page .chat-page-main { position: relative; }
/* New bubbles and cards pop in */
@keyframes cv-pop { from { opacity: 0; transform: translateY(12px) scale(.94); } }
.cm-row.cv-enter, .cv-event.cv-enter { animation: cv-pop 420ms cubic-bezier(.32,.72,0,1) both; }
.cm-me.cv-enter { transform-origin: bottom right; }
.cm-them.cv-enter { transform-origin: bottom left; }
.chat-msg-tick { transition: color 300ms ease; }
@media (prefers-reduced-motion: reduce) { .cm-row.cv-enter, .cv-event.cv-enter { animation: none; } .cv-jump { transition: none; } }

/* Deal events (offers, viewings, meetups, sales) as small cards in the chat instead of
   italic one-liners; older ones of each kind fade back (conversation-poll.js). */
.cv-thread .cv-event {
    align-self: center; display: flex; align-items: center; gap: 10px; width: min(360px, 94%);
    margin: 10px auto; padding: 9px 12px 9px 9px; border-radius: 14px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(26,26,26,.05), 0 4px 14px -10px rgba(26,26,26,.25);
    font-style: normal; font-size: .84rem; color: #2c2a26; text-align: left; line-height: 1.35;
    transition: opacity 300ms ease;
}
.cv-event-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; background: #f2ecdc; color: #5d5747; }
.cv-event-offer .cv-event-ic { background: #fff4b8; color: #6b5a00; }
.cv-event-viewing .cv-event-ic { background: #e3f3ea; color: #1f8a57; }
.cv-event-meetup .cv-event-ic { background: #1f8a57; color: #fff; }
.cv-event-sale .cv-event-ic { background: var(--ink); color: var(--yellow); }
.cv-event-text { flex: 1; min-width: 0; }
.cv-event-time { flex: 0 0 auto; align-self: flex-start; font-size: .7rem; color: var(--bs-secondary-color); margin-top: 1px; }
.cv-thread .cv-event.cv-event-old { opacity: .5; box-shadow: none; }
.cv-tray-ic .cv-pound { font-size: 1.35rem; }
/* Date / time: one look on every phone — a filled, centred value you tap to open the
   phone's own calendar or clock (Android otherwise showed a bare dd/mm/yyyy mask) */
.cv-when { height: 50px; text-align: center; font-size: 1.05rem; font-weight: 600; border-radius: 12px; background: var(--surface); }
.cv-when::-webkit-date-and-time-value { text-align: center; }
.cv-when::-webkit-datetime-edit { display: inline-flex; justify-content: center; }
@media (max-width: 575.98px) {
    .modal.cv-sheet .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; min-height: 0; display: block; transform: translateY(100%); transition: transform 380ms cubic-bezier(.32,.72,0,1); }
    .modal.cv-sheet.show .modal-dialog { transform: none; }
    .modal.cv-sheet .modal-content { border: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .modal.cv-sheet .modal-header { border-bottom: 0; position: relative; padding-top: 22px; }
    .modal.cv-sheet .modal-header::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 40px; height: 5px; border-radius: 3px; background: rgba(26,26,26,.2); }
    .modal.cv-sheet .modal-footer { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cv-typing i { animation: none; }
    .cv-send, .cv-plus, .cv-tray, .modal.cv-sheet .modal-dialog { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    body.chat-page .cv-head-wrap, body.chat-page .cv-foot { background: var(--bs-body-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Photo picker: touch hold-and-drag (photo-picker.js, create + edit pages) ── */
.photo-pick-grid { position: relative; }
.photo-pick-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.photo-pick-tile.lifted { z-index: 6; box-shadow: 0 16px 30px -10px rgba(0,0,0,.45); cursor: grabbing; }

/* ── Manage listing (templates/listings/manage.html, 2026-10-08) ─────────────
   One centred phone-width column on every screen: photos, price and the one big
   next step first, then this week's numbers, then chats, then housekeeping. */
.lm-page, .le-page { --lm-line: #ece6d5; --lm-chip: #f2ecdc; --lm-muted: #6f6a60; --lm-green: #1f8a57; --lm-red: #c4362c;
    --lm-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.16); --lm-ease: cubic-bezier(.32,.72,0,1);
    max-width: 600px; margin: -8px auto 0; }
.lm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; margin: 0 -6px; }
.lm-back { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 6px; border-radius: 10px; }
.lm-back:hover { color: var(--ink); background: rgba(26,26,26,.04); }
.lm-icon-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; color: var(--ink); }
.lm-icon-btn:hover { background: rgba(26,26,26,.05); }
.lm-menu-wrap { position: relative; }
.lm-menu { position: absolute; right: 0; top: 44px; z-index: 30; width: 230px; padding: 6px; background: var(--surface); border-radius: 16px;
    box-shadow: 0 20px 50px -16px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); transform-origin: top right; animation: lm-menu-in 260ms var(--lm-ease); }
@keyframes lm-menu-in { from { opacity: 0; transform: scale(.92); } }
.lm-menu a, .lm-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border: 0; background: none; border-radius: 10px;
    font-weight: 600; text-align: left; color: var(--ink); text-decoration: none; }
.lm-menu a:hover, .lm-menu button:hover { background: var(--bc-cream); color: var(--ink); }
.lm-menu form { margin: 0; }
.lm-menu .lm-red { color: var(--lm-red); }
.lm-menu-divider { height: 1px; background: var(--lm-line); margin: 4px 8px; }
.lm-mi { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }

.lm-hero { position: relative; border-radius: 22px; overflow: hidden; background: #2a2926; aspect-ratio: 4 / 3; }
.lm-hero-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.lm-hero-track::-webkit-scrollbar { display: none; }
.lm-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; scroll-snap-align: center; }
.lm-slide img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.lm-slide-blur { display: none; }
.lm-hero-nav { display: grid; place-content: center; position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(20,20,20,.55); color: #fff;
    cursor: pointer; z-index: 3; transition: background .15s, opacity .15s; }
.lm-hero-nav:hover { background: rgba(20,20,20,.8); }
.lm-hero-nav[disabled] { opacity: .25; pointer-events: none; }
.lm-hero-prev { left: 10px; }
.lm-hero-next { right: 10px; }
.lm-hero-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: #e9e4d6; font-weight: 700; text-decoration: none; background: #3a3833; }
.lm-hero-empty:hover { color: #fff; }
.lm-hero-count { position: absolute; right: 12px; bottom: 12px; background: rgba(20,20,20,.62); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 9px;
    border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
.lm-status { position: absolute; left: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.93); font-size: .78rem;
    font-weight: 700; padding: 5px 10px 5px 8px; border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lm-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lm-green); box-shadow: 0 0 0 3px rgba(31,138,87,.18); }
.lm-status-sold i { background: var(--ink); box-shadow: none; }
.lm-status-draft i { background: #c9a227; box-shadow: none; }
.lm-hero-edit { position: absolute; right: 12px; top: 12px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.93); font-size: .8rem;
    font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.lm-hero-edit:hover { color: var(--ink); background: #fff; }

.lm-title { padding: 16px 4px 0; }
.lm-title h1 { margin: 0; font-size: 1.6rem; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.lm-meta { margin-top: 4px; color: var(--lm-muted); font-size: .92rem; }
.lm-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lm-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; flex-basis: 100%; }
.lm-price-was { font-size: 1rem; }
.lm-price-btn { margin-left: auto; height: 34px; padding: 0 12px; border: 1px solid var(--lm-line); border-radius: 999px; background: var(--surface); font-size: .84rem;
    font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.lm-price-btn:hover { border-color: var(--ink); }
.lm-verify-state { margin: 8px 0 0; font-size: .86rem; font-weight: 700; color: #8a6d00; }
.lm-verify-ok { color: var(--lm-green); }
.lm-verify-bad { color: var(--lm-red); }

/* ── Manage / Public toggle ── */
.mg-toggle { display: flex; gap: 4px; padding: 16px 4px 0; }
.mg-toggle-btn { flex: 1; height: 44px; border: 0; border-radius: 12px; background: var(--lm-chip); color: var(--lm-muted);
    font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .18s, color .18s; }
.mg-toggle-btn:hover { background: #e8e1cf; }
.mg-toggle-active { background: var(--ink); color: #fff; }
.mg-toggle-active:hover { background: var(--ink); }
.mg-buyer-note { display: flex; align-items: center; gap: 8px; padding: 14px 4px 0; font-size: .82rem; color: var(--lm-muted); }
.mg-buyer-note svg { flex-shrink: 0; }

/* Specs line (manage page inline summary) */
.lm-specs-line { margin-top: 6px; color: var(--lm-muted); font-size: .88rem; }

/* Mark as sold CTA */
.lm-sold-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 16px; background: var(--ink);
    color: #fff; font-weight: 700; font-size: 1rem; margin-top: 16px; text-decoration: none; transition: transform 120ms ease-out; }
.lm-sold-cta:hover { color: #fff; background: #000; }
.lm-sold-cta:active { transform: scale(.98); }

/* Hero dot indicators — Fancyapps-style dynamic scaling */
.lm-hero-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; z-index: 5; }
.lm-hero-dots::before { content: ""; position: absolute; inset: -18px -14px -6px; border-radius: 999px; background: radial-gradient(ellipse, rgba(0,0,0,.32) 0%, transparent 70%); pointer-events: none; z-index: -1; }
.lm-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.38); flex: 0 0 auto; margin: 0 3px; transition: transform .25s ease, opacity .25s ease, width .25s ease, height .25s ease, margin .25s ease; }
.lm-hero-dot.active { background: #fff; opacity: 1; }
.lm-hero-dot.d-small { transform: scale(.5); opacity: .4; }
.lm-hero-dot.d-hide { width: 0; height: 0; margin: 0; transform: scale(0); opacity: 0; }

/* Hero gallery — hidden on mobile, shown at desktop breakpoints.
   Concept B: full-width hero image + thumbnail filmstrip below. */
.lm-hero-gallery { display: none; }
.lm-hg-main { position: relative; overflow: hidden; cursor: pointer; background: #2a2926; border-radius: 8px; }
.lm-hg-main img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; }
.lm-hg-main .lm-hg-blur { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px);
    object-fit: cover; filter: blur(20px) brightness(.7); z-index: 0; transform: scale(1.1); }
.lm-hg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: none; cursor: pointer; display: grid; place-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.15); z-index: 3; opacity: 0; transition: opacity .15s, background .15s; }
.lm-hg-main:hover .lm-hg-nav { opacity: 1; }
.lm-hg-nav:hover { background: #fff; }
.lm-hg-prev { left: 10px; }
.lm-hg-next { right: 10px; }
.lm-hg-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 3; }
.lm-hg-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s, transform .2s; cursor: pointer; }
.lm-hg-dot.active { background: #fff; transform: scale(1.15); }
.lm-hg-dot.d-small { transform: scale(.55); opacity: .4; }
.lm-hg-dot.d-hide { width: 0; margin: 0; transform: scale(0); opacity: 0; }
.lm-hg-strip { overflow: hidden; margin-top: 4px; position: relative; }
.lm-hg-strip-inner { display: flex; gap: 4px; transition: transform .3s ease; will-change: transform; }
.lm-hg-thumb { flex: 0 0 auto; width: 100px; height: 68px; position: relative; overflow: hidden; cursor: pointer;
    border-radius: 6px; transition: opacity .25s, transform .3s ease; opacity: .4; transform: scale(.85); }
.lm-hg-thumb.active { opacity: 1; transform: scale(1); }
.lm-hg-thumb:hover { opacity: .6; }
.lm-hg-thumb.active:hover { opacity: 1; }
.lm-hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lm-primary { padding-top: 16px; }
.lm-primary form { margin: 0; }
.lm-btn-ink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--ink);
    color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: transform 120ms ease-out, background-color 160ms ease; }
.lm-btn-ink:hover { color: #fff; background: #000; }
.lm-btn-ink:active { transform: scale(.98); }
.lm-btn-ink:disabled { opacity: .7; }

.lm-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 18px; justify-items: center; }
.lm-actions form { display: contents; }
.lm-act { border: 0; background: none; display: grid; justify-items: center; gap: 7px; font-size: .78rem; font-weight: 600; padding: 4px 0; color: var(--ink); text-decoration: none; }
.lm-act:hover { color: var(--ink); }
.lm-act-ic { width: 60px; height: 60px; border-radius: 20px; background: var(--surface); box-shadow: var(--lm-shadow); display: grid; place-items: center; transition: transform 120ms ease-out; }
.lm-act:active .lm-act-ic { transform: scale(.92); }
.lm-act-ic svg { width: 24px; height: 24px; }
.lm-act-red { color: var(--lm-red); }
.lm-act-red .lm-act-ic { color: var(--lm-red); }

.lm-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 4px 10px; }
.lm-sec-h h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.lm-sec-h h2 span { color: var(--lm-muted); font-weight: 600; }
.lm-sec-h a { font-size: .86rem; font-weight: 600; color: var(--lm-muted); text-decoration: none; }
.lm-card { background: #fff; border-radius: 20px; box-shadow: var(--lm-shadow); }

.lm-stats { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-tile { background: var(--bc-cream); border-radius: 14px; padding: 12px 12px 10px; min-width: 0; }
.lm-tile-lbl { font-size: .78rem; color: var(--lm-muted); font-weight: 600; }
.lm-tile-num { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.lm-tile-delta { font-size: .74rem; font-weight: 700; color: var(--lm-muted); }
.lm-tile-delta.up { color: var(--lm-green); }
.lm-tile-delta.down { color: #a3542a; }
.lm-tile-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.lm-tile-chart { position: relative; width: 100%; margin-top: 6px; }
.lm-tile-chart svg { display: block; width: 100%; height: 30px; overflow: visible; }
.lm-tile-sub { font-size: .75rem; color: var(--lm-muted); margin-top: 2px; width: 100%; }
.lm-tile-days { display: flex; justify-content: space-between; margin-top: 4px; width: 100%; }
.lm-tile-days span { font-size: .62rem; color: var(--lm-muted); font-weight: 500; width: 14.28%; text-align: center; }
.lm-spark-area { fill: rgba(31,138,87,.08); }
.lm-spark-area-down { fill: rgba(196,54,44,.06); }
.lm-spark-prev { fill: none; stroke: var(--lm-line); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; }
.lm-spark-line { fill: none; stroke: var(--lm-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lm-spark-line-down { stroke: var(--lm-red, #c4362c); }
.lm-spark-end { position: absolute; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--lm-green); transform: translateY(-50%); }
.lm-spark-end-down { background: var(--lm-red, #c4362c); }
.lm-insights-sum { display: none; }
.lm-chat-tabs { display: none; }
.lm-chat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 50%; background: #2563eb; color: #fff; font-size: .7rem; font-weight: 700; margin-left: 6px; }

.lm-nudge { margin-top: 12px; display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: #fff7c2; }
.lm-nudge-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; }
.lm-nudge p { margin: 0; font-size: .86rem; color: #4b4637; }
.lm-nudge strong { display: block; font-size: .95rem; color: var(--ink); }
.lm-nudge a { margin-left: auto; flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .82rem;
    display: inline-flex; align-items: center; text-decoration: none; }
.lm-nudge a:hover { color: #fff; background: #000; }

.lm-chats { padding: 4px 0; }
.lm-chat { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; position: relative; color: var(--ink); text-decoration: none; }
.lm-chat:hover { color: var(--ink); background: rgba(26,26,26,.02); }
.lm-chat + .lm-chat::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--lm-line); }
.lm-av { flex: 0 0 auto; width: 42px !important; height: 42px !important; font-size: .86rem; }
.lm-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lm-chat-top { display: flex; align-items: baseline; gap: 6px; width: 100%; }
.lm-chat-top b { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-chat-top time { margin-left: auto; color: var(--lm-muted); font-size: .78rem; white-space: nowrap; }
.lm-chat-prev { display: flex; align-items: center; gap: 6px; width: 100%; color: var(--lm-muted); font-size: .88rem; }
.lm-chat-prev span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-chat.unread .lm-chat-prev span { color: var(--ink); font-weight: 600; }
.lm-chat .ib-stage { margin-top: 6px; }
.lm-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f7cf6; flex: 0 0 auto; }
.lm-empty { margin: 0; padding: 14px 16px; color: var(--lm-muted); font-size: .9rem; }
.lm-listing-no { text-align: center; color: #b9b3a5; font-size: .76rem; margin: 22px 0 8px; font-variant-numeric: tabular-nums; }

.mg-seller-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mg-seller-top { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.mg-seller-av { position: relative; width: 56px !important; height: 56px !important; font-size: 1.2rem; }
.mg-seller-online { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--lm-green); border: 2px solid #fff; display: block; }
.mg-seller-info { flex: 1; min-width: 0; }
.mg-seller-info b { display: block; font-size: 1rem; font-weight: 800; }
.mg-seller-info small { display: block; font-size: .78rem; color: var(--lm-muted); }
.mg-seller-join-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.mg-seller-verified { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--lm-green); background: rgba(31,138,87,.08); padding: 3px 8px; border-radius: 6px; margin-left: auto; }
.mg-seller-unverified { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; color: var(--lm-muted); background: var(--lm-chip); padding: 3px 8px; border-radius: 6px; margin-left: auto; }
.mg-seller-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; background: var(--lm-line); border-radius: 10px; overflow: hidden; }
.mg-seller-stats > span { background: var(--surface); padding: 12px 8px; text-align: center; }
.mg-seller-stats b { display: block; font-size: 1.05rem; font-weight: 800; }
.mg-seller-stats small { font-size: .68rem; color: var(--lm-muted); }
.mg-seller-stats .mg-stat-empty b { color: var(--lm-muted); opacity: .45; }
.mg-seller-meta { display: flex; flex-direction: column; gap: 8px; }
.mg-seller-meta-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--lm-muted); }
.mg-seller-meta-row svg { flex: 0 0 auto; }
.mg-seller-meta-row b { color: var(--ink); font-weight: 600; }
.mg-seller-cta { width: 100%; padding: 14px; border-radius: 12px; background: var(--ink); color: #fff; border: 0; font-size: .95rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; }
.mg-seller-cta:hover { opacity: .85; }
.mg-seller-cta:disabled { opacity: .4; cursor: default; }
.mg-seller-or { text-align: center; font-size: .78rem; color: var(--lm-muted); margin: -8px 0; }
.mg-seller-btns { display: flex; gap: 8px; }
.mg-seller-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px;
    border: 1.5px solid var(--lm-line); background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--ink); transition: all .15s; }
.mg-seller-btn:hover { background: var(--lm-chip); border-color: var(--lm-muted); }
.mg-seller-btn:disabled { opacity: .5; cursor: default; }

/* Change price sheet (a .cv-sheet modal: a bottom sheet on phones) */
.lm-pricebox { text-align: center; padding: 4px 0; }
.lm-pricebox-in { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; cursor: text; }
.lm-pricebox-in span { font-size: 2.2rem; font-weight: 800; color: var(--lm-muted); }
.lm-pricebox-in input { width: 7ch; border: 0; background: none; outline: none; font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding: 0; color: var(--ink); }
.lm-pricebox-note { color: var(--lm-muted); font-size: .9rem; min-height: 1.4em; }
.lm-quick { display: flex; justify-content: center; gap: 8px; margin: 12px 0 14px; flex-wrap: wrap; }
.lm-quick button { height: 36px; padding: 0 14px; border: 1.5px solid var(--lm-line); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: .86rem; color: var(--ink); }
.lm-quick button:hover { border-color: var(--ink); }
.lm-note { display: flex; gap: 10px; align-items: flex-start; background: var(--bc-cream); border-radius: 14px; padding: 12px; font-size: .84rem; color: #4b4637; margin: 0 0 14px; }
.lm-note svg { flex: 0 0 auto; }

/* ── Edit listing (templates/listings/edit.html + static/js/listing-edit.js) ── */
.le-preview-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--lm-chip); font-weight: 700; font-size: .86rem; color: var(--ink); }
.le-preview-btn:hover { background: #e9e1cc; }
.le-head { padding: 2px 4px 0; }
.le-head h1 { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.le-head p { margin: 2px 0 0; color: var(--lm-muted); font-size: .9rem; }
.le-error-box { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fde9e7; color: #8a231b; font-weight: 600; font-size: .9rem; }
.le-error-box ul { margin: 0; padding-left: 1.1rem; }
.le-label { margin: 26px 4px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-muted); display: flex; align-items: center; gap: 6px; }
.le-label-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.le-note { margin: 8px 4px 0; font-size: .8rem; color: var(--lm-muted); }
.le-note:empty { display: none; }
.le-mot-status { color: var(--ink); font-weight: 600; }
.le-mot-locked { opacity: .6; pointer-events: none; }
.le-field-error { margin: 6px 4px 0; font-size: .84rem; font-weight: 600; color: #b3261e; }
.is-invalid { outline: 2px solid #b3261e; outline-offset: -1px; border-radius: 14px; }
.le-card { background: var(--surface); border-radius: 18px; box-shadow: var(--lm-shadow); }
.le-q { margin: 18px 4px 8px; font-weight: 700; font-size: .95rem; }
.le-q-first { margin-top: 0; }

.le-photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.le-photos .photo-pick-tile, .le-photos .photo-pick-add { aspect-ratio: 1; border-radius: 14px; border: 0; transition: box-shadow 200ms ease; }
.le-photos .photo-pick-tile { background: #e6e0d0; }
.le-photos .photo-pick-add { border: 1.5px dashed #d8d0bb; color: var(--lm-muted); font-size: .78rem; font-weight: 700; }
.le-photos .photo-pick-cover { background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .68rem; }
.le-photos .photo-pick-remove { width: 28px; height: 28px; top: 5px; right: 5px; background: rgba(20,20,20,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.le-add-plus { font-size: 1.5rem; line-height: 1; }

/* Sell/Edit page: labels, hints and notes can't be highlighted (a stray long-press on a
   phone selected "Make" or "Keep contact inside Browse Cars chat") — only what you type can. */
.le-page { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.le-page input, .le-page textarea, .le-page [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.le-big-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.le-own-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 14px; }
.le-big { padding: 12px 14px; min-width: 0; cursor: text; }
.le-own { min-width: 0; }
.le-own label { display: block; font-size: .78rem; font-weight: 700; color: var(--lm-muted); margin-bottom: 6px; }
.le-own select { width: 100%; font-size: 1.1rem; font-weight: 700; }
.le-big label { display: block; font-size: .78rem; font-weight: 700; color: var(--lm-muted); }
.le-big-in { display: flex; align-items: baseline; gap: 4px; }
.le-big-in span { font-size: 1.3rem; font-weight: 800; color: var(--lm-muted); }
.le-big-in .le-unit { font-size: .9rem; }
.le-big-in input { border: 0; background: none; outline: none; width: 100%; min-width: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding: 0; color: var(--ink); }
.le-big:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.le-big small { display: block; font-size: .74rem; font-weight: 700; color: var(--lm-muted); margin-top: 2px; min-height: 1.1em; }

.le-rows { overflow: hidden; }
.le-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; margin: 0; position: relative; cursor: pointer; }
.le-row + .le-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--lm-line); }
.le-row > span { font-weight: 600; flex: 0 0 auto; }
.le-row select.form-select { flex: 1; min-width: 0; border: 0; box-shadow: none; background-color: transparent; text-align: right; text-align-last: right; padding: 0 22px 0 0;
    background-position: right 0 center; background-size: 12px; font-weight: 600; color: var(--lm-muted); cursor: pointer; height: 52px; }
.le-row select.form-select:focus { color: var(--ink); }

.le-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; }
.le-choice { position: relative; }
html:not(.le-js) .le-choice select { max-width: 320px; }
.le-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.le-chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--lm-line); background: var(--surface); font-weight: 600; font-size: .92rem;
    display: inline-flex; align-items: center; gap: 8px; color: var(--ink); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease-out; }
.le-chip:hover { border-color: #cfc6ad; }
.le-chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.le-chip:active { transform: scale(.96); }
.le-chip[hidden] { display: none; }
.le-chip-more { border-style: dashed; color: var(--lm-muted); }
.le-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: 0 0 auto; }
.le-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #ece5d2; border-radius: 14px; padding: 3px; position: relative; }
.le-seg-btn { position: relative; z-index: 1; height: 40px; border: 0; background: none; font-weight: 700; font-size: .9rem; border-radius: 11px; color: var(--ink); }
.le-seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 11px; background: var(--surface); opacity: 0;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.18); transition: transform 360ms var(--lm-ease), width 360ms var(--lm-ease), opacity 160ms ease; }

.le-private { padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.le-private > div { min-width: 0; }
.le-mini-label { display: block; font-size: .78rem; font-weight: 700; color: var(--lm-muted); margin-bottom: 6px; }
.le-plate { display: flex; align-items: stretch; height: 54px; border-radius: 8px; background: #F7D117; box-shadow: inset 0 0 0 2px #1a1a1a; overflow: hidden; }
.le-plate-gb { width: 34px; flex: 0 0 auto; background: #00309a; color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 800; }
.le-plate input.form-control { flex: 1; min-width: 0; width: 100%; border: 0; background: none; box-shadow: none; outline: none; text-align: center; border-radius: 0;
    font: 700 1.8rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.le-plate:focus-within { box-shadow: inset 0 0 0 2px #1a1a1a, 0 0 0 3px rgba(26,26,26,.18); }
.le-private input[name="postcode"] { height: 48px; border: 1.5px solid var(--lm-line); border-radius: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--bc-cream); }
.le-private input[name="postcode"]:focus { border-color: var(--ink); box-shadow: none; }
/* Number plate: first on Sell + Edit, one row like Make / Model / Year with a small plate on the right */
.le-plate-card { margin-top: 18px; }
.le-plate-card .le-row { cursor: text; }
.le-plate-card .le-plate { margin-left: auto; height: 38px; width: 150px; flex: 0 0 auto; border-radius: 6px; }
.le-plate-card .le-plate-gb { width: 22px; font-size: .55rem; }
.le-plate-card .le-plate input.form-control { font-size: 1.2rem; padding: 0 6px; }
.le-plate-card .le-plate input::placeholder { color: rgba(17,17,17,.3); }
/* "Please fill in…" lands under the card/row (base.html's data-hint-after), not inside it */
.le-page .field-hint { margin: 6px 4px 0; font-size: .8rem; font-weight: 600; }
.le-choice:has(select.field-error) .le-seg, .le-choice:has(select.field-error) .le-chip { box-shadow: 0 0 0 1.5px #b3261e; }
.le-plate-card:has(.field-error) .le-plate { box-shadow: inset 0 0 0 2px #b3261e; }

.le-desc { padding: 12px 14px; }
.le-desc textarea.form-control { border: 0; box-shadow: none; padding: 0; resize: none; background: none; font-size: .95rem; line-height: 1.5; min-height: 150px; }
.le-desc-foot { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--lm-muted); border-top: 1px solid var(--lm-line); padding-top: 8px; margin-top: 6px; }
.le-desc-foot span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.le-tip { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--lm-chip); font-size: .84rem; display: flex; gap: 8px; align-items: flex-start; animation: le-drop 300ms var(--lm-ease); }
.le-tip[hidden] { display: none; }
.le-tip svg { flex: 0 0 auto; }
.le-tip button { margin-left: auto; border: 0; background: none; font-weight: 700; text-decoration: underline; flex: 0 0 auto; color: var(--ink); }
@keyframes le-drop { from { opacity: 0; transform: translateY(-6px); } }

.le-end { height: 110px; }
/* Visible without JS (a plain sticky bar); with JS it slides up only once something has changed */
.le-savebar { position: sticky; bottom: 0; z-index: 20; margin: 0 -12px; display: flex; gap: 10px; align-items: center;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(251,247,236,.92);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 -1px 0 rgba(26,26,26,.07); }
.le-js .le-savebar { position: fixed; left: 50%; bottom: 12px; width: min(100%, 624px); margin: 0; border-radius: 14px; transform: translate(-50%, 110%); transition: transform 460ms var(--lm-ease); }
.le-js .le-savebar.on { transform: translate(-50%, 0); }
.le-savebar .lm-btn-ink { width: auto; padding: 0 24px; height: 48px; flex: 0 0 auto; }
.le-what { flex: 1; min-width: 0; font-size: .84rem; color: var(--lm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-what b { display: block; color: var(--ink); font-size: .95rem; }
.le-discard { font-weight: 700; color: var(--lm-muted); padding: 0 6px; text-decoration: none; }
.le-discard:hover { color: var(--ink); }
.le-btn-soft { height: 48px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--lm-chip); font-weight: 700; color: var(--ink); }
.toast-stack { transition: bottom 300ms ease; }
body:has(.le-savebar.on) .toast-stack { bottom: calc(90px + env(safe-area-inset-bottom)); }

/* Preview sheet */
.le-pv { border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--lm-shadow); }
.le-pv img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.le-pv-body { padding: 14px 16px 16px; }
.le-pv-body h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.le-pv-price { font-size: 1.25rem; font-weight: 800; margin: 2px 0 10px; }
.le-pv-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .86rem; margin: 0 0 10px; }
.le-pv-spec dt { color: var(--lm-muted); font-weight: 400; }
.le-pv-spec dd { margin: 0; font-weight: 700; }
.le-pv-desc { font-size: .86rem; white-space: pre-line; color: #3a372f; margin: 0; max-height: 9em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .le-js .le-savebar, .le-seg-thumb, .lm-menu, .le-tip { transition: none; animation: none; }
}
/* The touch belongs to the tile, not the picture inside it: a tile's contents are
   rebuilt when it gains/loses the Cover badge, and a touch whose target gets replaced
   mid-drag is dropped by the browser. The remove button still takes its own taps. */
.photo-pick-tile > *:not(.photo-pick-remove) { pointer-events: none; }

/* Change price: the number is a real-looking text box, focused as the sheet opens */
.lm-pricefield { display: block; margin: 4px 0 0; padding: 10px 14px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); cursor: text; }
.lm-pricefield-lbl { display: block; font-size: .78rem; font-weight: 700; color: var(--lm-muted); }
.lm-pricefield-in { display: flex; align-items: baseline; gap: 4px; }
.lm-pricefield-in > span { font-size: 2rem; font-weight: 800; color: var(--lm-muted); }
.lm-pricefield-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0; font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; color: var(--ink); caret-color: var(--ink); }
.lm-pricefield-in svg { align-self: center; flex: 0 0 auto; color: var(--lm-muted); }
.lm-pricefield .lm-pricebox-note { text-align: left; }
.lm-pricebox-note { margin: 6px 2px 0; text-align: left; }
.lm-quick-lbl { margin: 16px 2px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-muted); }
.lm-quick { justify-content: flex-start; margin-top: 0; }

/* ── Who bought it? (templates/ratings/sold_chooser.html) ── */
.sc-car { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.sc-car img, .sc-car-ph { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: #e6e0d0; }
.sc-car > span { display: flex; flex-direction: column; min-width: 0; }
.sc-car b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-car > span > span { color: var(--lm-muted); font-size: .9rem; }
.sc-page .le-head { margin-top: 18px; }
.sc-page .le-head p { line-height: 1.45; }
.sc-warn { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px; border-radius: 14px; background: #fff4b8; color: #5c4d00; font-size: .88rem; font-weight: 600; }
.sc-warn svg { flex: 0 0 auto; margin-top: 1px; }
.sc-list { overflow: hidden; }
.sc-option { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; margin: 0; position: relative; cursor: pointer; transition: background-color 160ms ease; }
.sc-option + .sc-option::before { content: ""; position: absolute; left: 70px; right: 0; top: 0; height: 1px; background: var(--lm-line); }
.sc-option:hover { background: rgba(26,26,26,.02); }
.sc-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-option:has(input:checked) { background: #fffbe0; }
.sc-option:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--ink); }
.sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sc-top { display: flex; align-items: baseline; gap: 6px; width: 100%; }
.sc-top b { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-time { flex: 0 0 auto; align-self: center; color: var(--lm-muted); font-size: .78rem; white-space: nowrap; }
.sc-prev { color: var(--lm-muted); font-size: .88rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-prev.sc-wrap { white-space: normal; }
.sc-option .ib-stage { margin-top: 6px; }
.sc-check { flex: 0 0 auto; align-self: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d8d0bb; display: grid; place-items: center; color: transparent;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 260ms var(--lm-ease); }
.sc-option:has(input:checked) .sc-check { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }
.sc-elsewhere-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--lm-chip); display: grid; place-items: center; }
.sc-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-next li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: #3f3b32; padding: 0 4px; }
.sc-next li span { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--lm-chip); display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--ink); }
.sc-submit { position: sticky; bottom: 0; z-index: 10; margin: 22px -12px 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(251,247,236,0), var(--bc-cream) 30%); }
.sc-submit .lm-btn-ink:disabled { background: #cfc8b6; color: #fff; opacity: 1; }

/* ── Verify this listing (templates/verification/request.html + status.html) ── */
.lv-hero { text-align: center; padding: 8px 8px 0; }
.lv-shield { width: 64px; height: 64px; border-radius: 20px; background: var(--yellow); display: inline-grid; place-items: center; margin-bottom: 10px; }
.lv-shield-ok { background: #e3f3ea; color: var(--lm-green); }
.lv-hero h1 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.025em; }
.lv-hero p { margin: 2px 0 0; color: var(--lm-muted); }
.lv-hero .lv-why { margin: 10px auto 0; max-width: 34ch; color: #3f3b32; line-height: 1.45; }
.lv-rejected { display: grid; gap: 2px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #fde9e7; color: #8a231b; font-size: .9rem; }
.lv-tile { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0 0 10px; border-radius: 18px; background: var(--surface); box-shadow: var(--lm-shadow);
    border: 1.5px dashed #d8d0bb; position: relative; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.lv-tile:hover { border-color: #b9af94; }
.lv-tile input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; bottom: 0; pointer-events: none; }
.lv-tile:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--ink); }
.lv-tile-ic, .lv-thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 12px; }
.lv-tile-ic { background: var(--lm-chip); display: grid; place-items: center; }
.lv-thumb { object-fit: cover; }
.lv-thumb:not([hidden]) + .lv-tile-text { }
.lv-tile:has(.lv-thumb:not([hidden])) .lv-tile-ic { display: none; }
.lv-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-tile-text b { font-weight: 700; }
.lv-tile-text span { color: var(--lm-muted); font-size: .86rem; line-height: 1.35; overflow-wrap: anywhere; }
.lv-tile-act { flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; }
.lv-tile.done { border-style: solid; border-color: var(--lm-green); }
.lv-tile.done .lv-tile-act { background: var(--lm-chip); color: var(--ink); }
.lv-tile.done .lv-tile-text b::after { content: " \2713"; color: var(--lm-green); }
.lv-private { margin-top: 14px; background: var(--surface); box-shadow: var(--lm-shadow); }
.lv-private a { color: var(--ink); font-weight: 600; }
.lv-steps { list-style: none; margin: 24px 0 0; padding: 0 4px; display: grid; gap: 0; }
.lv-steps li { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.lv-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: var(--lm-line); }
.lv-steps li.done:not(:last-child)::after { background: var(--lm-green); }
.lv-steps i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d8d0bb; background: var(--bc-cream); margin-top: 1px; }
.lv-steps li.done i { background: var(--lm-green); border-color: var(--lm-green); box-shadow: inset 0 0 0 4px var(--lm-green); }
.lv-steps li.now i { border-color: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,.2); }
.lv-steps span { display: flex; flex-direction: column; color: var(--lm-muted); font-size: .88rem; }
.lv-steps b { color: var(--ink); font-size: .95rem; }

/* ── Reviews page (templates/ratings/home.html, 2026-10-08) ─────────────────── */
.rv-public { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--lm-chip); font-weight: 700; font-size: .82rem; color: var(--ink); text-decoration: none; }
.rv-public:hover { color: var(--ink); background: #e9e1cc; }
.rv-private { display: flex; align-items: center; gap: 6px; }

.rv-score { margin-top: 16px; padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.rv-big { text-align: center; }
.rv-big b { display: block; font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rv-big-stars { font-size: 1rem; letter-spacing: .08em; margin-top: 4px; color: var(--ink); }
.rv-big span { display: block; color: var(--lm-muted); font-size: .8rem; margin-top: 2px; }
.rv-bars { display: grid; gap: 5px; }
.rv-bar { display: grid; grid-template-columns: 10px 1fr 18px; gap: 8px; align-items: center; font-size: .76rem; color: var(--lm-muted); font-variant-numeric: tabular-nums; }
.rv-bar i { height: 7px; border-radius: 4px; background: var(--lm-chip); position: relative; overflow: hidden; }
.rv-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 4px; transform-origin: left; animation: rv-grow 700ms var(--lm-ease) both; animation-delay: calc(var(--d) * 60ms); }
@keyframes rv-grow { from { transform: scaleX(0); } }
.rv-roles { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-roles > div { background: var(--bc-cream); border-radius: 14px; padding: 10px 12px; }
.rv-roles span { display: block; font-size: .76rem; color: var(--lm-muted); font-weight: 600; }
.rv-roles b { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-roles small { color: var(--lm-muted); font-size: .78rem; }
.rv-score-empty { grid-template-columns: 1fr; text-align: center; gap: 4px; padding: 22px 18px; }
.rv-score-empty .rv-big-stars { font-size: 1.8rem; color: #c9c1aa; margin: 0; }
.rv-score-empty b { font-size: 1rem; }
.rv-score-empty span { color: var(--lm-muted); font-size: .88rem; }

.rv-n { background: var(--ink); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; font-size: .7rem; letter-spacing: 0; }
.rv-todo { display: grid; gap: 10px; }
.rv-task { padding: 14px; display: grid; gap: 12px; margin: 0; scroll-margin-top: 90px; }
.rv-hot { box-shadow: var(--lm-shadow); }
.rv-flash { animation: rv-flash 1.6s ease 300ms; }
@keyframes rv-flash { 30% { box-shadow: var(--lm-shadow), inset 0 0 0 2px var(--yellow), 0 0 0 6px rgba(255,222,0,.45); } }
.rv-task-top { display: flex; gap: 12px; align-items: center; }
.rv-task-top b { display: block; font-weight: 700; line-height: 1.3; }
.rv-task-top > div > span:last-child { color: var(--lm-muted); font-size: .86rem; }
.rv-thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #e6e0d0; flex: 0 0 auto; display: block; }
.rv-thumb-sm { width: 44px; height: 44px; border-radius: 12px; }
.rv-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--yellow); color: var(--ink); margin-bottom: 4px; }
.rv-tag-grey { background: var(--lm-chip); color: #5d5747; }
.rv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-btns form { margin: 0; }
.rv-btns .lm-btn-ink, .rv-btns .le-btn-soft { width: 100%; height: 46px; border-radius: 14px; }

.rv-stars-in { display: flex; gap: 6px; }
.rv-stars-in label { flex: 1; height: 50px; border-radius: 14px; background: var(--bc-cream); display: grid; place-items: center; cursor: pointer; position: relative; }
.rv-stars-in input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars-in label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--ink); }
.rv-stars-in svg { width: 28px; height: 28px; fill: none; stroke: #c9c1aa; stroke-width: 1.8; transition: fill 160ms ease, stroke 160ms ease, transform 300ms var(--lm-ease); }
.rv-stars-in label.on svg, html:not(.rv-js) .rv-stars-in label:has(input:checked) svg { fill: var(--yellow); stroke: #6b6560; stroke-width: .6; }
.rv-stars-in label.pop svg { transform: scale(1.18); }
.rv-star-word { text-align: center; font-weight: 700; font-size: .92rem; min-height: 1.4em; margin-top: -4px; }
.rv-compose { display: grid; gap: 10px; }
.rv-js .rv-compose { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 420ms var(--lm-ease), opacity 240ms ease; }
.rv-js .rv-compose.open { max-height: 420px; opacity: 1; }
.rv-compose textarea { width: 100%; min-height: 90px; border: 1.5px solid var(--lm-line); border-radius: 14px; padding: 10px 12px; resize: none; outline: none; background: var(--bc-cream); font: inherit; }
.rv-compose textarea:focus { border-color: var(--ink); }
.rv-compose p { margin: 0; font-size: .8rem; color: var(--lm-muted); display: flex; gap: 6px; }
.rv-compose p svg { flex: 0 0 auto; margin-top: 2px; }
.rv-field-error { font-size: .84rem; color: #b91c1c; margin-top: -4px; }
.rv-rate-profile { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #fff; border-radius: var(--lm-radius, 16px); box-shadow: var(--lm-shadow); margin-top: 10px; }
.rv-rate-profile b { display: block; font-size: .95rem; }
.rv-rate-profile a { font-size: .84rem; color: var(--lm-muted); }

.rv-waiting { padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.rv-waiting > div { flex: 1; min-width: 0; font-size: .88rem; color: var(--lm-muted); }
.rv-waiting b { color: var(--ink); display: block; font-size: .95rem; }
.rv-waiting a { flex: 0 0 auto; font-weight: 700; font-size: .84rem; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--lm-chip); display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }

.rv-tabs { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; background: #ece5d2; border-radius: 14px; padding: 3px; position: relative; }
.rv-tabs button { position: relative; z-index: 1; height: 40px; border: 0; background: none; font-weight: 700; font-size: .9rem; color: var(--ink); }
.rv-tabs button span { color: var(--lm-muted); font-weight: 600; margin-left: 2px; }
.rv-tabs-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 11px; background: var(--surface); box-shadow: 0 2px 8px -2px rgba(0,0,0,.18); transition: transform 380ms var(--lm-ease); }
.rv-tabs[data-on="by"] .rv-tabs-thumb { transform: translateX(100%); }
[data-rv-pane][hidden] { display: none; }
.rv-list { margin-top: 12px; overflow: hidden; }
.rv-item { padding: 14px 16px; position: relative; }
.rv-item + .rv-item::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--lm-line); }
.rv-item-head { display: flex; gap: 10px; align-items: center; }
.rv-who { flex: 1; min-width: 0; }
.rv-who b { display: block; font-weight: 700; }
.rv-who span { color: var(--lm-muted); font-size: .8rem; }
.rv-stars { letter-spacing: .06em; font-size: .95rem; white-space: nowrap; color: var(--ink); }
.rv-text { margin: 8px 0 0; font-size: .92rem; color: #2f2c26; }
.rv-car { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: #5d5747; background: var(--lm-chip); padding: 3px 8px; border-radius: 7px; }
.rv-report { display: block; margin-top: 6px; font-size: .78rem; color: var(--lm-muted); }
.rv-auto-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--lm-muted); background: var(--lm-chip); padding: 2px 8px; border-radius: 6px; margin-top: 6px; }
.rv-state { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--lm-muted); }
.rv-state-ok { color: var(--lm-green); }
.rv-locked { background: repeating-linear-gradient(-45deg, #fbf8ef 0 10px, #f6f1e3 10px 20px); }
/* Placeholder lines, not the real review — its text never reaches the page */
.rv-blur { margin-top: 10px; display: grid; gap: 8px; filter: blur(3px); }
.rv-blur i { display: block; height: 10px; border-radius: 5px; background: #d9d1bc; }
.rv-blur i:last-child { width: 70%; }
.rv-locked-cta { margin-top: 12px; display: inline-flex; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .84rem; align-items: center; text-decoration: none; }
.rv-locked-cta:hover { color: #fff; background: #000; }
.rv-empty { margin-top: 12px; padding: 22px 18px; text-align: center; color: var(--lm-muted); font-size: .9rem; }
.rv-empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.rv-page .sc-next { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .rv-bar i::after, .rv-flash { animation: none; } .rv-js .rv-compose, .rv-tabs-thumb { transition: none; } }

/* Public profile: Deals tab (every confirmed sale/purchase) */
.pp-deals { overflow: hidden; }
.pp-deal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; }
.pp-deal + .pp-deal::before { content: ""; position: absolute; left: 82px; right: 0; top: 0; height: 1px; background: var(--acct-line); }
.pp-deal-img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #e6e0d0; flex: 0 0 auto; display: block; }
.pp-deal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pp-deal-main b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pp-deal-main > span:last-child { color: var(--bs-secondary-color); font-size: .84rem; }
.pp-deal-role { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-bottom: 3px; }
.pp-deal-sold { background: #e3f3ea; color: #1f8a57; }
.pp-deal-bought { background: var(--acct-chip); color: #5d5747; }
.pp-deal-stars { color: #e0a400; letter-spacing: .04em; }

/* ── Report pages (templates/reports/_report_form.html, 2026-10-08) ── */
/* At least a screen tall, so the footer stays below the fold like every other page */
.rp-page { min-height: calc(100vh - var(--nav-h, 56px)); min-height: calc(100dvh - var(--nav-h, 56px)); }
.rp-head { text-align: center; padding: 6px 8px 0; }
.rp-flag { width: 60px; height: 60px; border-radius: 18px; background: #fde9e7; color: #b3261e; display: inline-grid; place-items: center; margin-bottom: 10px; }
.rp-head h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; }
.rp-head p { margin: 2px 0 0; color: var(--lm-muted); }
.rp-quote { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--lm-shadow); font-size: .92rem; color: #3f3b32; border-left: 3px solid var(--lm-line); }
.rp-option { align-items: center; }
.rp-reason { font-weight: 600; white-space: normal; line-height: 1.35; }
.rp-details { padding: 12px 14px; }
.rp-details textarea { width: 100%; border: 0; outline: none; resize: none; background: none; font: inherit; font-size: .95rem; line-height: 1.5; min-height: 100px; }
.rp-details:focus-within { box-shadow: var(--lm-shadow), 0 0 0 2px var(--ink); }
.rp-private { margin-top: 14px; background: var(--surface); box-shadow: var(--lm-shadow); }
.rp-option + .rp-option::before { left: 16px; }
.rp-page .sc-submit { transition: bottom .3s ease; }
@media (max-width: 767.98px) {
    body:has(> .tabbar) .rp-page .sc-submit { bottom: var(--tabbar-h); }
    body:has(.prompt-visible) .rp-page .sc-submit { bottom: calc(var(--tabbar-h, 0px) + 80px); }
}

/* ── Blocked users list (messaging/blocked_list.html) ──────────────────────── */
.bl-page .le-head p { line-height: 1.45; }
.bl-list { overflow: hidden; }
.bl-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.bl-row + .bl-row { border-top: 1px solid var(--lm-line); }
.bl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bl-info b { font-size: .95rem; font-weight: 700; }
.bl-info span { font-size: .8rem; color: var(--lm-muted); }
.bl-unblock { padding: 7px 16px; border: 1.5px solid var(--lm-line); border-radius: 10px; background: none; font: 600 .82rem/1 inherit; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.bl-unblock:hover { border-color: var(--ink); }
.bl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 24px; color: var(--lm-muted); }
.bl-empty svg { margin-bottom: 4px; opacity: .4; }
.bl-empty b { color: var(--ink); font-size: 1rem; }
.bl-empty span { font-size: .88rem; line-height: 1.45; }

/* Account header chips are links now (rating → Reviews, ID → Verify your ID) */
a.acct-tag-link { text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
a.acct-tag-link:hover { color: var(--ink); background: #e9e1cc; }
a.acct-tag-idle.acct-tag-link:hover { background: transparent; border-color: var(--ink); }
a.acct-tag-link::after { content: "›"; margin-left: 2px; font-weight: 800; opacity: .6; }
/* Verify your ID placeholder: the tile shows what's coming, not tappable yet */
.lv-tile-soon { cursor: default; opacity: .85; }
.lv-tile-soon:hover { border-color: #d8d0bb; }
.lv-page .sc-submit .lm-btn-ink:disabled { background: #cfc8b6; color: #fff; opacity: 1; }
.lv-gov-link { color: var(--ink); font-weight: 700; }
.lv-fields { overflow: hidden; }
.lv-field { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.lv-field + .lv-field { border-top: 1px solid var(--lm-line); }
.lv-field label { font-weight: 600; font-size: .82rem; color: var(--lm-muted); margin: 0; }
.lv-page .lv-field .form-control, .lv-page .lv-field .form-control:focus { border: 0; background: transparent; padding: 0; font-size: 1rem; font-weight: 600; color: var(--ink); box-shadow: none; height: auto; border-radius: 0; }

/* ── Verify ID stepper (Concept C, 2026-10-22) ──────────────────────────────
   5-step horizontal progress rail: Get code → Details → Submit → Review → Complete.
   Steps 1–2 are client-side (JS toggle), 3–4 are backend pending, 5 is verified.
   Class prefix: vid- (verify-id). */
.vid-rail { display: flex; align-items: center; padding: 0 20px; margin-bottom: 24px; }
.vid-rail-step { display: flex; align-items: center; gap: 6px; }
.vid-dot {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lm-line);
    display: grid; place-items: center; font-size: .7rem; font-weight: 800;
    color: var(--lm-muted); background: var(--bc-cream); flex-shrink: 0;
}
.vid-dot.active {
    border-color: var(--yellow); background: var(--yellow); color: var(--ink);
    box-shadow: 0 0 0 4px rgba(255,222,0,.2);
}
.vid-dot.done { border-color: var(--lm-green); background: var(--lm-green); color: #fff; }
.vid-rail-label { font-size: .72rem; font-weight: 600; color: var(--lm-muted); white-space: nowrap; }
.vid-rail-label.active { color: var(--ink); }
.vid-rail-line { flex: 1; height: 2px; background: var(--lm-line); margin: 0 6px; min-width: 12px; }
.vid-rail-line.done { background: var(--lm-green); }
@media (max-width: 480px) {
    .vid-dot { width: 22px; height: 22px; font-size: .64rem; }
    .vid-dot.done svg { width: 12px; height: 12px; }
    .vid-rail-label { display: none; }
    .vid-rail-line { margin: 0 4px; min-width: 8px; }
}
.vid-content { max-width: 520px; margin: 0 auto; }
.vid-card {
    background: var(--surface); border: 1px solid var(--lm-line);
    border-radius: 18px; overflow: hidden;
}
.vid-card-header { padding: 20px 20px 0; }
.vid-step-icon {
    width: 48px; height: 48px; border-radius: 14px; background: var(--yellow);
    display: grid; place-items: center; margin: 0 auto 12px;
}
.vid-card-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.vid-card-desc { color: var(--lm-muted); font-size: .9rem; line-height: 1.45; margin: 0; }
.vid-card-desc a { color: var(--ink); font-weight: 700; text-decoration: none; }
.vid-gov-action {
    display: flex; align-items: center; gap: 12px; margin: 16px 20px;
    padding: 14px 16px; border-radius: 14px; background: var(--lm-chip);
    text-decoration: none; color: var(--ink);
}
.vid-gov-action:hover { opacity: .85; }
.vid-gov-icon {
    width: 40px; height: 40px; border-radius: 10px; background: var(--ink);
    display: grid; place-items: center; flex-shrink: 0; color: var(--bc-cream);
}
.vid-gov-text { font-size: .86rem; line-height: 1.4; min-width: 0; }
.vid-gov-text b { display: block; font-size: .9rem; }
.vid-gov-text span { color: var(--lm-muted); }
.vid-form-body { padding: 0 20px 20px; }
.vid-field-group {
    border-radius: 14px; border: 1px solid var(--lm-line); overflow: hidden; margin-top: 16px;
}
.vid-field { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.vid-field + .vid-field { border-top: 1px solid var(--lm-line); }
.vid-field-error { outline: 2px solid #b3261e; outline-offset: -1px; border-color: #b3261e; }
.vid-field label { font-weight: 600; font-size: .78rem; color: var(--lm-muted); margin: 0; }
.vid-field .form-control, .vid-field .form-control:focus {
    border: 0; background: transparent; padding: 0; font-size: .95rem; font-weight: 600;
    color: var(--ink); box-shadow: none; height: auto; border-radius: 0;
    font-family: var(--bc-font);
}
.vid-field .form-control::placeholder { color: var(--lm-line); font-weight: 500; }
.vid-privacy {
    margin-top: 12px; font-size: .82rem; color: var(--lm-muted);
    display: flex; gap: 8px; align-items: center;
}
.vid-privacy svg { flex-shrink: 0; opacity: .5; }
.vid-privacy a { color: var(--ink); font-weight: 600; text-decoration: none; }
.vid-actions { padding: 0 20px 20px; display: flex; gap: 10px; }
.vid-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    height: 48px; border-radius: 14px; background: var(--ink); color: var(--bc-cream);
    font-family: var(--bc-font); font-size: .92rem; font-weight: 700;
    border: none; cursor: pointer; text-decoration: none;
}
.vid-btn-secondary {
    background: transparent; border: 2px solid var(--lm-line); color: var(--ink);
    flex: 0 0 auto; padding: 0 20px;
}
.vid-result {
    background: var(--surface); border: 1px solid var(--lm-line); border-radius: 18px;
    padding: 32px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.vid-result h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.vid-result p { color: var(--lm-muted); font-size: .9rem; max-width: 30ch; line-height: 1.45; margin: 0; }
.vid-result .vid-btn { margin-top: 8px; flex: 0 0 auto; width: 100%; max-width: 260px; }
.vid-review-details {
    margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--lm-chip);
    width: 100%; max-width: 320px; text-align: left;
}
.vid-review-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .84rem; padding: 4px 0;
}
.vid-review-row + .vid-review-row { border-top: 1px solid var(--lm-line); padding-top: 8px; margin-top: 4px; }
.vid-review-row span:first-child { color: var(--lm-muted); }
.vid-review-row span:last-child { font-weight: 700; }
.vid-review-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; background: var(--yellow);
    font-size: .78rem; font-weight: 700;
}
.vid-review-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
    animation: vid-pulse 1.5s ease-in-out infinite;
}
@keyframes vid-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.vid-complete-badge {
    width: 72px; height: 72px; border-radius: 50%; background: #e3f3ea;
    display: grid; place-items: center; position: relative;
}
.vid-complete-badge svg { color: var(--lm-green); }
.vid-complete-badge::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 3px solid var(--lm-green); opacity: .2;
}
.vid-rejection {
    margin: 0 20px 16px; padding: 12px 14px; border-radius: 14px;
    background: #fdecd9; color: #a3542a; font-size: .86rem;
    display: flex; gap: 10px; align-items: flex-start; line-height: 1.4;
}
.vid-rejection svg { flex-shrink: 0; margin-top: 1px; }

/* ── Listing page (templates/listings/detail.html, 2026-10-09) ────────────────
   Same column and parts as Manage (lm-*), plus the buyer's bits: Ask the seller,
   key-detail tiles, history checks, the seller card and a bottom bar. */
.li-page { padding-bottom: 8px; }
[data-listing-manage].li-page { padding-bottom: calc(var(--tabbar-h, 0px) + 8px); }
.li-bar-end { display: flex; align-items: center; }
.li-bar-end form { margin: 0; }
.li-heart svg { transition: transform 300ms var(--lm-ease), fill 160ms ease, stroke 160ms ease; }
.li-heart[aria-pressed="true"] svg { fill: #e0393e; stroke: #e0393e; }
.li-heart.pop svg { animation: li-pop 340ms var(--lm-ease); }
@keyframes li-pop { 40% { transform: scale(1.25); } }

.li-owner { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--ink); color: #fff; }
.li-owner-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: var(--yellow); }
.li-owner p { margin: 0; flex: 1; min-width: 0; font-size: .82rem; color: #cfc9ba; line-height: 1.35; }
.li-owner b { display: block; color: #fff; font-size: .95rem; }
.li-owner-manage { flex: 0 0 auto; height: 34px; padding: 0 16px; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.li-owner-manage:hover { background: rgba(255,255,255,.22); color: #fff; }

.li-hero .lm-hero-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }
.li-hero .lm-hero-empty { color: #cfc9ba; }
.li-listed { gap: 5px; padding-left: 9px; }
.li-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.li-thumbs::-webkit-scrollbar { display: none; }
.li-thumbs button { flex: 0 0 auto; width: 54px; height: 42px; border: 0; padding: 0; border-radius: 9px; overflow: hidden; opacity: .5; background: #e6e0d0; transition: opacity 200ms ease, box-shadow 200ms ease; }
.li-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.li-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.li-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.li-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; line-height: 1; background: var(--lm-chip); color: var(--ink); vertical-align: middle; }
.li-badge svg { display: block; flex: 0 0 auto; width: 16px; height: 16px; margin-left: -4px; }
.li-badge .verified-badge-icon { display: block; line-height: 0; }
.li-badge { background: var(--surface); box-shadow: inset 0 0 0 1px var(--lm-line); padding-left: 9px; }
.li-badge-ok { background: #e8f4fd; box-shadow: none; color: #0f6aa8; }
.li-badge-sm { height: 20px; padding: 0 8px; font-size: .68rem; }
.li-price-row { align-items: baseline; margin-top: 8px; flex-wrap: wrap; }
.li-drop { font-size: .78rem; font-weight: 800; color: var(--lm-green); background: #e3f3ea; padding: 3px 8px; border-radius: 999px; line-height: 1.2; }
.lm-price-sub { display: flex; align-items: baseline; gap: 8px; }
.li-where { display: flex; align-items: center; gap: 5px; }
.li-where svg { flex: 0 0 auto; }

.li-glance { margin-top: 16px; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.li-glance div { background: var(--bc-cream); border-radius: 14px; padding: 10px 12px; }
.li-glance span { display: block; font-size: .74rem; color: var(--lm-muted); font-weight: 600; }
.li-glance b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.li-glance small { grid-column: 1 / -1; text-align: right; color: var(--lm-muted); font-size: .74rem; padding: 0 6px 2px; }
.li-gone { margin-top: 16px; }

.li-ask { margin: 16px 0 0; padding: 14px; scroll-margin-top: 130px; }
.li-ask-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; margin-bottom: 10px; }
.li-ask-h svg { color: var(--lm-muted); }
.li-ask-row { display: flex; gap: 8px; align-items: stretch; }
.li-ask-row textarea { flex: 1; min-width: 0; border: 1.5px solid var(--lm-line); border-radius: 14px; padding: 10px 12px; outline: none; background: var(--bc-cream); resize: none; font: inherit; font-size: .95rem; line-height: 1.4; min-height: 66px; }
.li-ask-row textarea:focus { border-color: var(--ink); }
.li-send { flex: 0 0 auto; align-self: flex-end; height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; transition: transform 120ms ease-out; }
.li-send:hover { color: #fff; background: #000; }
.li-send:active { transform: scale(.96); }
.li-send:disabled { opacity: .7; }
.li-ask-note { margin: 8px 2px 0; font-size: .76rem; color: var(--lm-muted); display: flex; gap: 5px; align-items: center; }
.li-ask-done { display: flex; align-items: center; gap: 10px; }
.li-ask-done[hidden] { display: none; }
.li-ask [data-li-done]:not([hidden]) { animation: li-in 320ms ease; }
@keyframes li-in { from { opacity: 0; transform: translateY(4px); } }
.li-tick { width: 38px; height: 38px; border-radius: 50%; background: var(--lm-chip); display: grid; place-items: center; flex: 0 0 auto; }
.li-tick-ok { background: #e3f3ea; color: var(--lm-green); }
.li-ask-done p { margin: 0; flex: 1; min-width: 0; font-size: .86rem; color: var(--lm-muted); }
.li-ask-done p b { display: block; color: var(--ink); font-size: .95rem; }
.li-ask-done a { flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: .86rem; display: inline-flex; align-items: center; text-decoration: none; }
.li-ask-done a:hover { color: #fff; background: #000; }

.li-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.li-spec { background: #fff; border-radius: 16px; box-shadow: var(--lm-shadow); padding: 12px 10px; display: grid; gap: 6px; justify-items: start; min-width: 0; }
.li-spec svg { color: var(--lm-muted); }
.li-spec-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.li-spec-ic svg { color: inherit; }
.li-spec-fuel-petrol .li-fuel-fill { fill: #22c55e; }
.li-spec-fuel-diesel .li-fuel-fill { fill: #1a1a1a; }
.li-spec-fuel-electric .li-fuel-fill { fill: #3b82f6; }
.li-spec-fuel-hybrid .li-fuel-fill { fill: #10b981; }
.li-spec-colour .li-spec-ic { background: transparent; }
.li-spec span { font-size: .72rem; color: var(--lm-muted); font-weight: 600; }
.li-spec b { font-size: .95rem; font-weight: 800; line-height: 1.15; margin-top: -4px; overflow-wrap: anywhere; }
.li-listed-ago { font-size: .8rem; color: var(--lm-muted); margin-top: 4px; margin-bottom: -4px; }

.li-checks { overflow: hidden; }
.li-check { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; }
.li-check + .li-check::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; background: var(--lm-line); }
.li-c-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #e3f3ea; color: var(--lm-green); }
.li-c-grey { background: var(--lm-chip); color: var(--lm-muted); }
.li-c-warn { background: #fdecd9; color: #a3542a; font-weight: 900; }
.li-check > div { flex: 1; min-width: 0; }
.li-check b { display: block; font-weight: 700; font-size: .95rem; }
.li-check small { color: var(--lm-muted); font-size: .8rem; }
.li-check small a { color: var(--lm-muted); }
.li-unverified { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #f5f0e4; color: #9b8e73; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.li-unverified svg { opacity: .7; }
.li-plate { flex: 0 0 auto; font: 700 .95rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing: .06em; background: #F7D117; color: #111; border-radius: 4px; padding: 5px 8px; box-shadow: inset 0 0 0 1.5px #1a1a1a; white-space: nowrap; text-transform: uppercase; }

.li-desc { padding: 14px 16px; }
.li-desc p { margin: 0; white-space: pre-line; font-size: .95rem; color: #2f2c26; max-height: 6.2em; overflow: hidden; overflow-wrap: anywhere; transition: max-height 500ms var(--lm-ease);
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.li-desc.open p, .li-desc-short p { max-height: none; -webkit-mask-image: none; mask-image: none; }
.li-desc.open p { max-height: 200em; }
.li-desc button { margin-top: 6px; border: 0; background: none; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

.li-seller { display: block; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.li-seller:hover { color: var(--ink); }
.li-seller-top { display: flex; align-items: center; gap: 12px; }
.li-av { position: relative; flex: 0 0 auto; }
.li-av i { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #2fbf6b; box-shadow: 0 0 0 2.5px #fff; }
.li-seller-name { flex: 1; min-width: 0; }
.li-seller-name b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1.05rem; font-weight: 800; }
.li-seller-name small { color: var(--lm-muted); font-size: .82rem; }
.li-seller-top > svg { color: #b9b3a5; flex: 0 0 auto; }
.li-seller-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-top: 1px solid var(--lm-line); padding-top: 12px; text-align: center; font-size: .74rem; color: var(--lm-muted); font-weight: 600; }
.li-seller-stats > span + span { border-left: 1px solid var(--lm-line); }
.li-seller-stats b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.li-follow-form { margin: 10px 0 0; }
/* Not following = the active/primary-looking state (ink, inviting the tap);
   following = deliberately greyed out, reads as "already done" — these were
   inverted until 2026-10-10 (found live: following showed black, as if it were
   the thing still to do). */
.li-follow { width: 100%; height: 44px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; transition: background-color 160ms ease, color 160ms ease, transform 120ms ease-out; }
.li-follow:active { transform: scale(.98); }
.li-follow[aria-pressed="true"] { background: var(--lm-chip); color: var(--ink); }

.li-safe { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #f3eedf; font-size: .86rem; color: #4b4637; }
.li-safe b { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: .92rem; margin-bottom: 6px; }
.li-safe ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.li-foot { display: flex; justify-content: space-between; align-items: center; margin: 14px 4px 0; font-size: .8rem; color: var(--lm-muted); }
.li-foot a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; color: var(--lm-muted); text-decoration: none; }
.li-foot a:hover { color: var(--ink); }

/* Similar cars: the shared card, in a sideways row */
.li-more { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 6px; scroll-padding-inline: 12px; }
.li-more::-webkit-scrollbar { display: none; }
.li-more > .col { flex: 0 0 44%; width: 44%; max-width: 220px; min-width: 0; scroll-snap-align: start; padding: 0; margin: 0; }

/* Bottom bar */
.li-dock { position: fixed; z-index: 1020; left: 50%; bottom: 0; width: min(100%, 600px); transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(251,247,236,.9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -1px 0 rgba(26,26,26,.07); }
.li-dock-price { flex: 1; min-width: 0; }
.li-dock-price b { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.li-dock-price span { display: block; font-size: .78rem; color: var(--lm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-dock .lm-btn-ink { height: 50px; }
.li-dock-btn { width: auto; padding: 0 22px; flex: 0 0 auto; }
.li-dock-main { flex: 1; }
.li-dock-soft { flex: 0 0 auto; width: 50px; height: 50px; border: 0; border-radius: 16px; background: var(--lm-chip); display: grid; place-items: center; color: var(--ink); }
body.li-body .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .li-heart svg, .li-desc p { transition: none; } .li-heart.pop svg, .li-ask [data-li-done]:not([hidden]) { animation: none; } }
.li-mot { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: var(--ink); text-decoration: none; transition: transform 120ms ease-out; }
.li-mot:hover { color: var(--ink); }
.li-mot:active { transform: scale(.98); }
.li-mot-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; }
.li-mot-text { flex: 1; min-width: 0; }
.li-mot-text b { display: block; font-weight: 700; }
.li-mot-text small { display: block; color: var(--lm-muted); font-size: .8rem; }
.li-mot-chev { flex: 0 0 auto; color: #b9b3a5; }
.li-mot-real { margin-top: 10px; padding: 13px 16px; }
.li-mot-real-top { display: flex; align-items: center; gap: 12px; }
.li-mot-flag { margin-top: 10px; background: #fdecd9; color: #a3542a; font-size: .82rem; font-weight: 600; border-radius: 8px; padding: 8px 10px; }
.li-mot-source { display: block; padding: 14px 16px; font-size: .82rem; font-weight: 700; color: var(--ink); text-decoration: underline; }
.li-mot-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; padding: 4px 9px 4px 7px; border-radius: 999px; }
.li-mot-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.li-mot-pill-valid { background: #e3f3ea; color: #1f8a57; }
.li-mot-pill-valid .li-mot-pill-dot { background: #1f8a57; }
.li-mot-pill-expired { background: #fdecd9; color: #a3542a; }
.li-mot-pill-expired .li-mot-pill-dot { background: #a3542a; }

.li-mot-expand { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-top: 1px solid var(--lm-line, #ece6d5); background: var(--lm-chip, #f2ecdc); padding: 12px 16px; margin-top: 10px; font-family: inherit; font-size: .86rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.li-mot-expand svg { transition: transform 200ms ease; flex: 0 0 auto; }
.li-mot-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.li-mot-body { max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
.li-mot-body.open { max-height: 4000px; }

.li-mot-chart-wrap { padding: 16px 16px 8px; border-bottom: 1px solid var(--lm-line, #ece6d5); }
.li-mot-chart-h { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lm-muted, #6f6a60); margin-bottom: 2px; }
.li-mot-chart-sub { font-size: .74rem; color: var(--lm-muted, #6f6a60); margin-bottom: 10px; }
.li-mot-chart-box { width: 100%; }
.li-mot-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; color: var(--lm-muted, #6f6a60); margin: 8px 0 14px; }
.li-mot-legend span { display: inline-flex; align-items: center; gap: 5px; }
.li-mot-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.li-mot-timeline-h { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lm-muted, #6f6a60); padding: 14px 16px 4px; }
.li-mot-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lm-line, #ece6d5); }
.li-mot-dot-col { flex: 0 0 auto; width: 18px; display: flex; flex-direction: column; align-items: center; }
.li-mot-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; }
.li-mot-dot.pass { background: #1f8a57; }
.li-mot-dot.fail { background: #c4362c; }
.li-mot-dot-line { flex: 1; width: 2px; background: var(--lm-line, #ece6d5); margin-top: 4px; }
.li-mot-row-body { flex: 1; min-width: 0; }
.li-mot-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; font-weight: 700; }
.li-mot-fail-text { color: #c4362c; }
.li-mot-row-meta { color: var(--lm-muted, #6f6a60); font-size: .76rem; margin-top: 2px; }
.li-mot-defect { margin-top: 6px; font-size: .78rem; display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.li-mot-defect-tag { flex: 0 0 auto; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 5px; margin-top: 1px; }
.li-mot-defect-advisory { background: #fff4b8; color: #8a6d00; }
.li-mot-defect-major, .li-mot-defect-dangerous { background: #fdecd9; color: #a3542a; }
.li-mot-defect-minor, .li-mot-defect-fail, .li-mot-defect-user-entered { background: #f2ecdc; color: #6f6a60; }

/* ── Listing detail — VES (DVLA vehicle check) card ──── */
.li-ves { margin-top: 10px; padding: 14px 16px; }
.li-ves-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.li-ves-row b { font-weight: 700; font-size: .92rem; }
.li-ves-ic { flex: 0 0 auto; color: var(--ink); }
.li-ves-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--lm-line, #ece6d5); font-size: .86rem; }
.li-ves-label { color: var(--lm-muted, #6f6a60); }
.li-ves-value { font-weight: 600; text-align: right; }
.li-ves-tax-taxed { color: #1f8a57; }
.li-ves-tax-sorn { color: #a3542a; }
.li-ves-tax-untaxed { color: #c4362c; }

/* ── Listing detail — owner floating dock (matches toast-item design) ──── */
.li-dock.li-dock-owner { background: var(--ink); border-radius: 0.6rem; border-left: 3px solid var(--yellow);
    bottom: calc(1.5rem + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 2rem);
    padding: 0.5rem 0.55rem 0.5rem 0.9rem; box-shadow: 0 8px 24px rgba(26, 22, 8, 0.22); }
.li-dock-owner > span { flex: 1; font-size: 0.875rem; font-weight: 500; color: #fff; }
.li-dock-owner > svg { flex: 0 0 auto; color: rgba(255,255,255,.5); }
.li-dock-owner-btn { flex: 0 0 auto; padding: 0; border: 0; background: none; color: var(--yellow);
    font: inherit; font-size: 0.875rem; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.li-dock-owner-btn:hover { color: var(--yellow-hover); }
/* Seller card link CTA styling */
a.mg-seller-cta { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.mg-seller-btn-form { flex: 1; display: flex; }
.mg-seller-btn-form .mg-seller-btn { flex: 1; }
/* Seller section heading — only on detail page sidebar */
.li-seller-h { margin-top: 8px; }
@media (min-width: 768px) {
    .li-page { max-width: 1120px; padding-left: 16px; padding-right: 16px; }
    .li-specs { grid-template-columns: repeat(3, 1fr); }
    .li-dock:not(.li-dock-owner) { display: none; }
    body.li-body:not(:has(.li-dock-owner)) .site-footer { padding-bottom: 0; }
    .li-more > .col { flex: 0 0 30%; max-width: 280px; }
}
/* ── Listing detail — desktop layout matching manage page ─────────────────── */
@media (min-width: 1024px) {
    [data-listing-detail] { max-width: 1100px; padding-left: 16px; padding-right: 16px; }
    [data-listing-detail] .lm-hero { aspect-ratio: auto; border-radius: 0; overflow: visible; background: transparent; }
    [data-listing-detail] .lm-hero-track,
    [data-listing-detail] .lm-hero-dots { display: none; }
    [data-listing-detail] .lm-hero-gallery { display: block; }
    [data-listing-detail] .lm-hg-main { height: 400px; }
    [data-listing-detail] .lm-title { display: grid; grid-template-columns: 1fr auto; gap: 0 24px; padding-top: 16px; align-items: baseline; }
    [data-listing-detail] .li-badges { grid-column: 1; }
    [data-listing-detail] .lm-title h1 { grid-column: 1; font-size: 1.6rem; }
    [data-listing-detail] .lm-specs-line { grid-column: 1; margin-top: 2px; }
    [data-listing-detail] .li-where { grid-column: 1; }
    [data-listing-detail] .lm-price-row { display: contents; }
    [data-listing-detail] .lm-price-row > .lm-price { grid-column: 2; grid-row: -3; font-size: 1.8rem; text-align: right; align-self: baseline; justify-self: end; }
    [data-listing-detail] .lm-price-row > .lm-price-sub { grid-column: 2; grid-row: -2; justify-self: end; align-self: baseline; }
    [data-listing-detail] .mg-content { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 24px; align-items: start; }
    [data-listing-detail] .mg-side { position: sticky; top: 24px; }
    [data-listing-detail] .lm-card { background: #fff; border-radius: 14px; }
    [data-listing-detail] .li-seller-h { margin-top: 0; }
}
/* ── Desktop grid cards (hidden on mobile, shown on desktop) ── */
.lm-grid { display: none; }
.lm-grid-sec-h { margin: 0 0 8px; }

.lm-alist { display: flex; flex-direction: column; }
.lm-aitem { display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: none;
    text-decoration: none; color: var(--ink); font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; }
.lm-aitem:hover { opacity: .7; }
.lm-aitem + .lm-aitem { border-top: 1px solid var(--lm-line); }
.lm-aitem-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bc-cream); display: grid; place-content: center; flex: 0 0 36px; }
.lm-aitem-red { color: var(--lm-red); }

/* ── Create page — hero + anchor nav (desktop only) ─────────────────────────── */
.le-hero { display: none; }

/* Create / Edit — savebar: ink bar */
[data-listing-create] .le-savebar,
[data-listing-edit] .le-savebar {
    background: var(--ink); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26,22,8,.22); margin: 0 -4px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    bottom: 12px;
}
.le-js [data-listing-create] .le-savebar,
.le-js [data-listing-edit] .le-savebar { position: sticky; width: auto; margin: 0 -4px; transform: none; left: auto; }
.le-js [data-listing-create] .le-savebar.on,
.le-js [data-listing-edit] .le-savebar.on { transform: none; }
[data-listing-create] .le-end,
[data-listing-edit] .le-end { height: 16px; }
[data-listing-create] .le-savebar .lm-btn-ink,
[data-listing-edit] .le-savebar .lm-btn-ink { height: 38px; font-size: .88rem; background: var(--yellow); color: var(--ink); }
[data-listing-create] .le-btn-soft,
[data-listing-edit] .le-btn-soft { height: 38px; font-size: .88rem; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; }
[data-listing-create] .le-btn-soft:hover,
[data-listing-edit] .le-btn-soft:hover { background: rgba(255,255,255,.2); }
[data-listing-create] .le-what,
[data-listing-edit] .le-what { color: rgba(255,255,255,.55); }
[data-listing-create] .le-what b,
[data-listing-edit] .le-what b { color: #fff; }
[data-listing-edit] .le-discard { color: rgba(255,255,255,.55); }
[data-listing-edit] .le-discard:hover { color: #fff; }

/* ── Create/Edit listing + Manage listing — desktop ─────────────────────────── */
@media (min-width: 768px) {
    .le-page { max-width: 780px; }
    .le-photos { grid-template-columns: repeat(4, 1fr); }
    [data-listing-manage] { max-width: 780px; }

    /* Sell / Edit page — desktop hero + plate card */
    [data-le-form] { max-width: 720px; }
    [data-le-form] .le-head-mobile { display: none; }
    [data-le-form] .le-hero {
        display: block; background: var(--surface); border-radius: 24px 24px 0 0;
        padding: 36px 32px 22px; margin-top: 12px; text-align: center;
        box-shadow: var(--lm-shadow);
    }
    .le-hero h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; margin: 0; }
    .le-hero p { margin: 6px 0 0; color: var(--lm-muted); font-size: .92rem; }
    .le-hero-import {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-bottom: 0;
        color: var(--lm-muted); font-weight: 600; font-size: .88rem; text-decoration: none;
    }
    .le-hero-import:hover { color: var(--ink); }

    /* Plate card visually merges with the hero — same surface, continuous shadow */
    [data-le-form] .le-plate-card {
        border-radius: 0 0 24px 24px; margin-top: 0;
        background: var(--surface); border-top: 1px solid var(--lm-line);
        box-shadow: 0 4px 12px -6px rgba(26,26,26,.10);
    }
    [data-le-form] .le-plate-card .le-row { justify-content: center; gap: 24px; padding: 6px 16px; }
    [data-le-form] .le-plate-card .le-row > span { font-size: 1rem; }
    [data-le-form] .le-plate-card .le-plate { width: 220px; height: 50px; }
    [data-le-form] .le-plate-card .le-plate input.form-control { font-size: 1.5rem; }
    [data-le-form] .le-plate-card .le-plate-gb { width: 30px; font-size: .62rem; }
    [data-le-form] .le-plate-card + .le-note { text-align: center; }
    [data-le-form] .le-plate-card + .le-note + .le-note { text-align: center; }


}
@media (min-width: 1024px) {
    /* ── Manage page — desktop Concept B layout ── */
    [data-listing-manage] { max-width: 1100px; padding-left: 16px; padding-right: 16px; }

    /* Hero: hide mobile carousel + dots, show gallery grid */
    [data-listing-manage] .lm-hero { aspect-ratio: auto; border-radius: 0; overflow: visible; background: transparent; }
    [data-listing-manage] .lm-hero-track,
    [data-listing-manage] .lm-hero-dots { display: none; }
    [data-listing-manage] .lm-hero-gallery { display: block; }
    [data-listing-manage] .lm-hg-main { height: 400px; }
    [data-listing-manage] .lm-status { left: 20px; top: 20px; }

    /* Header: title left, price right */
    [data-listing-manage] .lm-title { display: grid; grid-template-columns: 1fr auto; gap: 0 24px; padding-top: 16px; align-items: baseline; }
    [data-listing-manage] .lm-title h1 { grid-column: 1; font-size: 1.6rem; }
    [data-listing-manage] .lm-specs-line { grid-column: 1; margin-top: 2px; }
    [data-listing-manage] .lm-price-row { display: contents; }
    [data-listing-manage] .lm-price-row > .lm-price { grid-column: 2; grid-row: 1; font-size: 1.8rem; text-align: right; align-self: baseline; justify-self: end; }
    [data-listing-manage] .lm-price-row > .lm-price-sub { grid-column: 2; grid-row: 2; justify-self: end; align-self: baseline; }

    /* Toggle row: toggle left, actions right, border below */
    [data-listing-manage] .mg-toggle-row {
        display: flex; align-items: center; justify-content: space-between;
        margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--lm-line); }
    [data-listing-manage] .mg-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--lm-chip); border-radius: 12px; margin-top: 0; }
    [data-listing-manage] .mg-toggle-btn { flex: none; padding: 10px 28px; border-radius: 10px; }

    /* Actions within toggle row: sold CTA + pill buttons in one flex row */
    [data-listing-manage] .mg-actions-wrap { display: flex; align-items: center; gap: 8px; }
    [data-listing-manage] .lm-sold-cta { width: auto; height: auto; padding: 10px 20px; margin: 0;
        font-size: .85rem; font-weight: 600; border-radius: 12px; display: inline-flex; }
    [data-listing-manage] .lm-actions { display: flex; gap: 8px; padding-top: 0; }
    [data-listing-manage] .lm-act { display: flex; flex-direction: row; align-items: center; gap: 8px;
        padding: 10px 20px; border-radius: 12px; border: 1.5px solid var(--lm-line); background: #fff; font-size: .85rem; }
    [data-listing-manage] .lm-act:hover { background: var(--lm-chip); border-color: var(--lm-muted); }
    [data-listing-manage] .lm-act-ic { width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; }
    [data-listing-manage] .lm-act-ic svg { width: 18px; height: 18px; }
    [data-listing-manage] .lm-act-red { color: var(--lm-red); border-color: rgba(196,54,44,.2); }
    [data-listing-manage] .lm-act-red:hover { background: rgba(196,54,44,.06); }
    [data-listing-manage] .lm-act-red .lm-act-ic { color: var(--lm-red); }

    /* Buyer note (shown when public panel active) */
    [data-listing-manage] .mg-buyer-note { padding: 0; }

    /* 2-column content grid — manage panel stretches so chat fills sidebar height */
    [data-listing-manage] .mg-content { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 24px; align-items: start; }
    [data-listing-manage] [data-mg-panel="manage"] .mg-content { grid-template-columns: 3fr 2fr; align-items: stretch; }
    [data-listing-manage] .mg-side { position: sticky; top: 24px; display: flex; flex-direction: column; }

    /* Cards: white backgrounds on desktop (stands out against cream page) */
    [data-listing-manage] .lm-card { background: #fff; border-radius: 14px; }

    /* Insights summary row */
    [data-listing-manage] .lm-insights-sum { display: flex; gap: 12px; align-items: baseline; margin: 0 4px 14px; }
    [data-listing-manage] .lm-sum-big { font-size: 2rem; font-weight: 800; }
    [data-listing-manage] .lm-sum-lbl { font-size: .82rem; color: var(--lm-muted); margin-left: 6px; }
    [data-listing-manage] .lm-sum-sep { color: var(--lm-line); }
    [data-listing-manage] .lm-sum-change { font-size: .85rem; font-weight: 700; color: var(--lm-green); }
    [data-listing-manage] .lm-sum-change.down { color: var(--lm-red, #c4362c); }

    /* Insight tiles: 3-column grid, white tiles, label + delta on same row */
    [data-listing-manage] .lm-stats { grid-template-columns: repeat(3, 1fr); padding: 0; gap: 10px;
        background: transparent; border-radius: 0; box-shadow: none; }
    [data-listing-manage] .lm-tile { background: #fff; border-radius: 14px; padding: 18px 18px 14px; }
    [data-listing-manage] .lm-tile-num { margin-top: 4px; font-size: 1.7rem; }
    [data-listing-manage] .lm-tile-delta { display: inline-flex; align-items: center; gap: 3px;
        font-size: .73rem; padding: 3px 8px; border-radius: 6px; background: var(--lm-chip); }
    [data-listing-manage] .lm-tile-delta.up { background: rgba(31,138,87,.08); }
    [data-listing-manage] .lm-tile-delta.down { background: rgba(196,54,44,.08); }
    [data-listing-manage] .lm-tile-chart svg { height: 48px; }
    [data-listing-manage] .lm-tile-chart { margin-top: 10px; }

    /* Section headers: small uppercase labels (mock style) */
    [data-listing-manage] .lm-sec-h h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

    /* Chat sidebar: merge section header into card visually */
    [data-listing-manage] .mg-side .lm-sec-h { margin: 0; padding: 18px 18px 0; background: #fff; border-radius: 14px 14px 0 0; }
    [data-listing-manage] .mg-side .lm-sec-h h2 { font-size: 1rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
    [data-listing-manage] .mg-side .lm-chats { border-radius: 0 0 14px 14px; flex: 1; display: flex; flex-direction: column; }
    [data-listing-manage] .lm-chat-tabs { display: flex; gap: 0; padding: 12px 18px 0; border-bottom: 1px solid var(--lm-line); }
    [data-listing-manage] .lm-chat-tab { padding: 8px 16px; font-size: .8rem; font-weight: 600; color: var(--lm-muted);
        border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
    [data-listing-manage] .lm-chat-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
    [data-listing-manage] .lm-chat-tab:hover { color: var(--ink); }
    [data-listing-manage] .lm-chat-badge { display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        font-size: .65rem; font-weight: 700; margin-left: 5px; background: var(--lm-chip); color: var(--lm-muted); }
    [data-listing-manage] .lm-chat-tab.active .lm-chat-badge { background: var(--ink); color: #fff; }

    /* Public panel: specs grid 3x2 with 1px cell borders */
    [data-listing-manage] [data-mg-panel="public"] .li-specs {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 1px; background: var(--lm-line); border-radius: 14px; overflow: hidden; }
    [data-listing-manage] [data-mg-panel="public"] .li-spec {
        display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto;
        gap: 1px 12px; align-items: center;
        background: #fff; padding: 18px; border-radius: 0; box-shadow: none; }
    [data-listing-manage] [data-mg-panel="public"] .li-spec > svg {
        grid-row: 1 / -1; grid-column: 1; justify-self: center;
        width: 36px; height: 36px; padding: 8px; box-sizing: border-box;
        border-radius: 10px; background: var(--lm-chip); color: var(--lm-muted); }
    [data-listing-manage] [data-mg-panel="public"] .li-spec > .li-spec-ic {
        grid-row: 1 / -1; grid-column: 1; justify-self: center;
        width: 36px; height: 36px; border-radius: 10px; }
    [data-listing-manage] [data-mg-panel="public"] .li-spec > span:not(.li-spec-ic) {
        grid-column: 2; grid-row: 1;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
    [data-listing-manage] [data-mg-panel="public"] .li-spec > b {
        grid-column: 2; grid-row: 2; font-size: .95rem; margin-top: 0; }

    /* Listing number */
    [data-listing-manage] .lm-listing-no { text-align: center; padding-top: 32px; }
}
/* ── Conversation page — desktop ────────────────────────────────────────────── */
@media (min-width: 768px) {
    body.chat-page .chat-page-main { max-width: 820px; margin: 0 auto; }
    .chat-page-header { padding: 0.75rem 1.25rem 0; }
    .chat-page-scroll { padding: 0 1.25rem; }
    .chat-page-footer { padding: 0.5rem 1.25rem calc(0.5rem + env(safe-area-inset-bottom)); }
    body.chat-page .cv-head { padding: 8px 12px 8px 6px; }
    body.chat-page .cv-car { width: 44px; height: 44px; border-radius: 13px; }
    body.chat-page .cv-name { font-size: 1.05rem; }
    body.chat-page .cv-head-car { font-size: .82rem; }
    body.chat-page .cv-icon-btn { width: 40px; height: 40px; }
    .cm-bubble .chat-msg-image { max-width: 320px; }
    .cv-card { width: min(400px, 94%); }
    body.chat-page .cv-foot { padding: 10px 1.25rem calc(10px + env(safe-area-inset-bottom)); }
    .cv-field textarea { font-size: 1.05rem; }
}
/* ── Messages inbox — desktop ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    .ib-page .ib-large { padding-top: 8px; }
    .ib-page .ib-large h1 { font-size: 1.8rem; }
    .ib-page .ib-search { max-width: 420px; }
}

/* ── Bottom tab bar (templates/_tabbar.html, 2026-10-09) ──────────────────────
   Phones only (same breakpoint as the ☰ menu); the top menu covers wider screens.
   Anything else pinned to the bottom (toasts, the cookie banner, the footer's end)
   moves up by its height while it's there. */
.tabbar { display: none; }
@media (max-width: 767.98px) {
    body { --tabbar-h: calc(60px + env(safe-area-inset-bottom)); }
    .tabbar { position: fixed; z-index: 1025; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
        height: var(--tabbar-h); padding: 6px 4px env(safe-area-inset-bottom);
        background: rgba(251,247,236,.9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 -1px 0 rgba(26,26,26,.08); }
    .tabbar-tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 3px 0; font-size: .68rem; font-weight: 600; line-height: 1.2;
        color: #a39d8f; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
    .tabbar-tab:hover { color: #a39d8f; }
    .tabbar-tab svg { width: 25px; height: 25px; transition: transform 300ms cubic-bezier(.32,.72,0,1); }
    .tabbar-tab:active svg, .tabbar-tab:active .tabbar-plus { transform: scale(.88); }
    .tabbar-tab[aria-current="page"] { color: var(--ink); font-weight: 800; }
    .tabbar-tab[aria-current="page"] .tabbar-o, .tabbar-tab:not([aria-current="page"]) .tabbar-f { display: none; }
    .tabbar-sell { color: var(--ink); gap: 2px; padding-top: 0; }
    .tabbar-sell:hover { color: var(--ink); }
    .tabbar-plus { width: 44px; height: 32px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center;
        box-shadow: inset 0 0 0 1.5px rgba(26,26,26,.08); transition: transform 160ms ease-out; }
    .tabbar-plus svg { width: 20px; height: 20px; }
    .tabbar-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0393e;
        color: #fff; font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bc-cream); }
    .tabbar-badge[hidden] { display: none; }

    body:has(> .tabbar) .site-footer { padding-bottom: calc(var(--tabbar-h) + 16px); }
    body:has(> .tabbar) .toast-stack { bottom: calc(var(--tabbar-h) + 14px); }
    body:has(> .tabbar) .cookie-banner { bottom: calc(var(--tabbar-h) + 10px); }
    body:has(.prompt-visible) .cookie-banner { bottom: calc(var(--tabbar-h, 0px) + 90px); }
    body:has(> .tabbar) .le-savebar,
    body:has(> .tabbar) [data-listing-edit] .le-savebar,
    body:has(> .tabbar) [data-listing-create] .le-savebar { bottom: calc(var(--tabbar-h) + 12px); }
    body:has(> .tabbar) .li-dock { bottom: var(--tabbar-h); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .tabbar-tab svg, .tabbar-plus { transition: none; } }

/* ── Phones: no footer (2026-10-09) ───────────────────────────────────────────
   The tab bar does the main navigation, so the footer goes and the ☰ menu becomes
   the "more" menu: help, contact, the legal pages, cookie settings, socials and the
   company line the footer used to carry. */
.site-nav-more { display: none; }
@media (max-width: 767.98px) {
    .site-footer { display: none; }
    body:not(.chat-page) .site-main { padding-bottom: calc(var(--tabbar-h, 0px) + 24px) !important; }
    .site-logo-full { display: block; }
    .site-logo-icon { display: none; }
    .site-nav-burger { display: flex; }
    .site-nav-burger-dot { display: none; }
    .site-nav-links:not(.show) { display: none !important; }
    .site-nav-links.show { display: flex !important; }
    .site-nav-links {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 1030;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--yellow); padding: 0 1rem 0.9rem;
        border-top: 1px solid rgba(26, 26, 26, 0.12);
        box-shadow: 0 10px 18px rgba(26, 22, 8, 0.15);
    }
    .site-nav-links > .nav-cta { display: none; }   /* Buy / Sell / Messages / Account are tabs now */
    .site-nav-more { display: flex; flex-direction: column; }
    .site-nav-more > a, .site-nav-more > button { padding: 0.8rem 0; border: 0; border-bottom: 1px solid rgba(26, 26, 26, 0.12); background: none;
        text-align: left; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 1rem; }
    .site-nav-more-socials { display: flex; gap: 1.1rem; padding: 0.9rem 0 0.4rem; }
    .site-nav-more-socials a { color: var(--ink); display: grid; place-items: center; width: 28px; height: 28px; }
    .site-nav-more-legal { margin: 0.4rem 0 0; font-size: 0.75rem; line-height: 1.4; color: rgba(26, 26, 26, 0.7); }
}

/* ── Car tile (templates/listings/_card.html, 2026-10-09) ─────────────────────
   From the approved home-page mock: rounded photo with the heart on it, then price,
   title, specs and area. The previous boxed tile is commit 1f9f8fb. */
.car-tile { position: relative; height: 100%; }
.car-tile-link { display: block; color: var(--ink); text-decoration: none; border-radius: 16px; outline: none; }
.car-tile-link:hover { color: var(--ink); text-decoration: none; }
.car-tile-link:focus-visible .car-tile-img { box-shadow: 0 0 0 3px var(--bc-cream), 0 0 0 5px var(--ink); }
.car-tile-img { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e6e0d0; display: grid; place-items: center;
    transition: box-shadow 300ms ease, transform 120ms ease-out; }
.car-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(.32,.72,0,1); }
.car-tile-nophoto { color: #8f8a7c; font-size: .82rem; font-weight: 600; }
@media (hover: hover) {
    .car-tile-link:hover .car-tile-img { box-shadow: 0 14px 30px -14px rgba(26,22,8,.35); }
    .car-tile-link:hover .car-tile-img img { transform: scale(1.04); }
}
.car-tile-link:active .car-tile-img { transform: scale(.98); transition-duration: 60ms; }
.car-tile-status { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(26,26,26,.82); color: #fff; font-size: .7rem; font-weight: 700; }
.car-tile-status.is-live { background: #1f8a57; }
.car-tile-body { padding: 9px 2px 0; min-width: 0; }
.car-tile-price { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.car-tile-price .listing-badge-row { margin-left: auto; }
.car-tile-title { font-weight: 600; font-size: .92rem; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-tile-specs { font-size: .8rem; color: var(--bs-secondary-color); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.car-tile-loc { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--bs-secondary-color); margin-top: 3px; white-space: nowrap; overflow: hidden; }
.car-tile-loc svg { flex: 0 0 auto; }
.car-tile-loc span { overflow: hidden; text-overflow: ellipsis; }
.car-tile-actions { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; }
.car-tile-actions form { margin: 0; }
.glass-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--ink);
    background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6); box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform 120ms ease-out, background-color 160ms ease; }
.glass-btn:hover { background: rgba(255,255,255,.94); color: var(--ink); }
.glass-btn:active { transform: scale(.9); }
.car-tile-heart[aria-pressed="true"] { color: #e0393e; }
.car-tile-heart[aria-pressed="true"] svg { fill: currentColor; }
.car-tile-hide button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.car-tile-hide { opacity: 0; transition: opacity 180ms ease; }
.car-tile:hover .car-tile-hide, .car-tile-hide:focus-within, .car-tile-hide.is-on { opacity: 1; }
@media (hover: none) { .car-tile-hide:not(.is-on) { display: none; } }
.car-tile-heart.pop svg { animation: car-heart-pop 420ms cubic-bezier(.32,.72,0,1); }
@keyframes car-heart-pop { 35% { transform: scale(1.3); } }
@media (max-width: 575.98px) {
    .car-tile-price { font-size: 1.02rem; }
    .car-tile-title { font-size: .86rem; }
    .car-tile-specs, .car-tile-loc { font-size: .76rem; }
    .glass-btn { width: 32px; height: 32px; }
}

/* ── Home / browse (templates/listings/list.html, 2026-10-09) ─────────────────
   Phone first, from the approved mock; the filter form is a bottom sheet on phones and
   the sidebar from md up (static/js/browse.js). */
.bh-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; margin: 8px 0 14px; max-width: 100%; background: var(--surface);
    border-radius: 999px; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.16); cursor: text; }
.bh-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(26,26,26,.08); }
.bh-search svg { color: var(--bs-secondary-color); flex: 0 0 auto; }
.bh-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.bh-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px; }
.bh-chips::-webkit-scrollbar { display: none; }
.bh-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #e7e1cf;
    background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.bh-chip:hover { color: var(--ink); border-color: #cfc7b1; text-decoration: none; }
.bh-chip span { font-weight: 500; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.bh-chip[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bh-chip[aria-current] span { color: rgba(255,255,255,.65); }

.bh-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bh-pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin: 0; border-radius: 10px; border: 1px solid #e7e1cf;
    background: #fff; color: var(--ink); font-weight: 500; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.bh-pill-btn:hover { color: var(--ink); border-color: #cfc7b1; text-decoration: none; }
.bh-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: #fff; font-size: .72rem; display: inline-grid; place-items: center; }
.bh-sort { position: relative; cursor: pointer; margin-left: auto; }
.bh-sort select { border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); padding: 0; margin: 0; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; max-width: 150px; }

.bh-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 16px; }
.bh-pill-x { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--ink); color: #fff;
    font-weight: 600; font-size: .8rem; text-decoration: none; max-width: 100%; }
.bh-pill-x:hover { color: #fff; text-decoration: none; background: #3f3b33; }
.bh-pill-x svg { opacity: .7; flex: 0 0 auto; }
.bh-link { font-weight: 600; font-size: .86rem; color: var(--bs-secondary-color); text-decoration: underline; text-underline-offset: 2px; }
.bh-link:hover { color: var(--ink); }
.bh-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: .9rem; color: var(--bs-secondary-color); }
.bh-btn-ink { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--ink);
    color: #fff; font-weight: 700; text-decoration: none; }
.bh-btn-ink:hover { background: #000; color: #fff; text-decoration: none; }
.bh-empty { text-align: center; padding: 48px 20px; background: var(--surface); border-radius: 20px; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.16); }
.bh-empty h2 { margin: 12px 0 4px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
.bh-empty p { margin: 0 auto 18px; color: var(--bs-secondary-color); max-width: 30rem; }

.bh-sell { margin-top: 28px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none;
    box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 6px 20px -12px rgba(26,26,26,.16); transition: transform 120ms ease-out; }
.bh-sell:hover { color: var(--ink); text-decoration: none; }
.bh-sell:active { transform: scale(.98); }
.bh-sell-plus { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; flex: 0 0 auto; }
.bh-sell-text { flex: 1; min-width: 0; }
.bh-sell-text b { display: block; font-size: 1rem; letter-spacing: -.01em; }
.bh-sell-text span { font-size: .86rem; color: var(--bs-secondary-color); }
.bh-sell-go { color: var(--bs-secondary-color); flex: 0 0 auto; }

.bh-alert { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--ink); color: #f3efe4; }
.bh-alert-bell { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; }
.bh-alert-text { flex: 1; min-width: 0; }
.bh-alert-text b { color: #fff; display: block; font-size: 1rem; letter-spacing: -.01em; }
.bh-alert-text span { font-size: .86rem; opacity: .75; }
.bh-alert button { flex: 0 0 auto; height: 42px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--yellow); color: var(--ink); font-weight: 700; transition: transform 120ms ease-out; }
.bh-alert button:active { transform: scale(.97); }
.bh-alert.is-saved button { background: rgba(255,255,255,.14); color: #fff; }
.bh-alert.is-saved .bh-alert-bell { background: #1f8a57; color: #fff; }
/* Named + editable saved searches (2026-10-10) */
.bh-alert { flex-wrap: wrap; }
.bh-alert-text { flex: 1 1 calc(100% - 60px); }
.bh-alert-text a { color: var(--yellow); font-weight: 700; }
.bh-alert-name { flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08); color: #fff; font-size: .95rem; outline: none; }
.bh-alert-name::placeholder { color: rgba(255,255,255,.5); }
.bh-alert-name:focus { border-color: var(--yellow); background: rgba(255,255,255,.12); }
.bh-alert-cancel { color: rgba(255,255,255,.7); font-weight: 600; font-size: .9rem; align-self: center; }
.bh-alert-cancel:hover { color: #fff; }
.bh-alert.is-editing { box-shadow: 0 0 0 3px var(--yellow); scroll-margin-top: 16px; }
/* Compact version for living inside the filter sheet (2026-10-12) — the full-size
   card above was sized for its own standalone spot below the results; squeezed in
   among the filter controls it needs to read as one more row, not a second hero. */
.bh-sheet .bh-alert { margin-top: 12px; gap: 10px; padding: 12px 14px; border-radius: 14px; }
.bh-sheet .bh-alert-bell { width: 30px; height: 30px; border-radius: 8px; }
.bh-sheet .bh-alert-bell svg { width: 15px; height: 15px; }
.bh-sheet .bh-alert-text { flex-basis: calc(100% - 44px); }
.bh-sheet .bh-alert-text b { font-size: .86rem; }
.bh-sheet .bh-alert-text span { font-size: .76rem; }
.bh-sheet .bh-alert button { height: 36px; padding: 0 14px; font-size: .84rem; border-radius: 9px; flex: 1 1 100%; }
.bh-sheet .bh-alert-name { height: 36px; font-size: .86rem; flex-basis: 100%; }
/* Saved-search chip row — scrollable strip in the filter sheet header (2026-10-12,
   from the approved mock: chips + a pinned + button on the right). */
.ss-row { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px;
    overflow-x: auto; scrollbar-width: none; }
.ss-row::-webkit-scrollbar { display: none; }
.ss-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1.5px solid var(--bs-border-color); background: var(--surface);
    font-weight: 600; font-size: .84rem; color: var(--bc-ink);
    text-decoration: none; white-space: nowrap; transition: all 180ms cubic-bezier(.32,.72,0,1); }
.ss-chip:hover { border-color: var(--bc-ink); color: var(--bc-ink); text-decoration: none; }
.ss-chip[aria-current="true"] { background: var(--bc-ink); border-color: var(--bc-ink); color: #fff; }
.ss-chip[aria-current="true"] svg { opacity: .6; }
.ss-chip-add { border-style: dashed; color: var(--bs-secondary-color); cursor: pointer; }
.ss-chip-add:hover { border-style: solid; }
.ss-add { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px dashed var(--bs-border-color); background: none;
    display: grid; place-items: center; color: var(--bs-secondary-color);
    cursor: pointer; transition: all 180ms cubic-bezier(.32,.72,0,1);
    position: sticky; right: 0; }
.ss-add::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px;
    background: linear-gradient(to right, transparent, var(--bc-cream)); pointer-events: none; }
.ss-add:hover { border-color: var(--bc-ink); color: var(--bc-ink); border-style: solid; }
.bh-editing { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: #fff4b8; font-size: .88rem; }
.bh-editing span { flex: 1; min-width: 0; }
.bh-editing b { display: block; font-size: .95rem; }
.bh-editing a:not(.bh-link) { color: var(--ink); font-weight: 700; }

/* Filter chips inside the panel (templates/listings/_filter_chips.html) */
.bh-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-fchip { position: relative; margin: 0; cursor: pointer; }
.bh-fchip input { position: absolute; opacity: 0; pointer-events: none; }
.bh-fchip span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid #e7e1cf; background: var(--surface);
    font-weight: 600; font-size: .86rem; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.bh-fchip small { font-weight: 500; color: var(--bs-secondary-color); font-size: .8rem; }
.bh-fchip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.bh-fchip input:checked + span small { color: rgba(255,255,255,.65); }
.bh-fchip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(26,26,26,.18); }
.bh-fchip input:disabled + span { color: #c9c4b6; border-color: #efeadc; background: transparent; cursor: default; }
.bh-fchip input:disabled + span small { color: #c9c4b6; }
.bh-swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.bh-swatch-beige { background: #d9c7a3; } .bh-swatch-black { background: #111; } .bh-swatch-blue { background: #2c5bb8; } .bh-swatch-bronze { background: #9a6a34; }
.bh-swatch-brown { background: #6b4428; } .bh-swatch-cream { background: #f3e9cf; } .bh-swatch-gold { background: #c9a227; } .bh-swatch-green { background: #2f7a3f; }
.bh-swatch-grey { background: #7d8288; } .bh-swatch-maroon { background: #6e1f2a; } .bh-swatch-orange { background: #e8781e; } .bh-swatch-pink { background: #e88bb0; }
.bh-swatch-purple { background: #6b3fa0; } .bh-swatch-red { background: #c62d24; } .bh-swatch-silver { background: #c9ccd1; } .bh-swatch-turquoise { background: #2bb3b1; }
.bh-swatch-white { background: #fff; } .bh-swatch-yellow { background: #f4d21f; } .bh-swatch-multicoloured { background: conic-gradient(#e33, #fc3, #3c6, #39f, #a3f, #e33); }
.bh-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bh-range span { color: var(--bs-secondary-color); font-size: .85rem; }
.bh-sheet-sort { padding: 0 2px 10px; border-bottom: 1px solid #ece6d5; margin-bottom: 6px; }
.bh-sheet-sort label { font-size: .88rem; font-weight: 700; margin-bottom: 6px; display: block; }
.bh-sheet-sort select { border-color: #ddd5bf; background-color: var(--surface); font-size: .86rem; }

/* The filter panel: modal overlay on desktop, bottom sheet on phones */
.bh-sheet-grab { padding-bottom: 6px; }
.bh-handle { display: none; }
.bh-scrim { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(15,14,12,.42); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.bh-scrim.on { opacity: 1; pointer-events: auto; }
body.bh-sheet-open { overflow: hidden; }
.bh-sheet-title { display: flex; align-items: center; justify-content: space-between; }
.bh-sheet-title h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.012em; }
.bh-sheet-x { width: 32px; height: 32px; border: none; background: var(--bc-cream); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.bh-sheet-x:hover { background: #e7e1cf; }
.bh-sheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.bh-sheet-foot .bh-btn-ink { flex: 1; }
.bh-clear-link { font-weight: 600; color: var(--bs-secondary-color); }
@media (min-width: 768px) {
    .bh-sheet { position: fixed; top: 50%; left: 50%; z-index: 1041; width: 480px; max-height: 85vh; display: flex; flex-direction: column;
        background: var(--surface); border-radius: 16px; padding: 0; box-shadow: 0 8px 40px rgba(0,0,0,.12);
        transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden; transition: transform 300ms cubic-bezier(.32,.72,0,1), opacity 200ms ease, visibility 0s linear 300ms; }
    .bh-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition: transform 300ms cubic-bezier(.32,.72,0,1), opacity 200ms ease; }
    .bh-sheet-grab { padding: 20px 24px 0; }
    .bh-sheet-grab .ss-row { margin-top: 10px; }
    .bh-sheet-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
    .bh-sheet-foot { padding: 16px 24px; border-top: 1px solid #ece6d5; margin: 0; }
    .bh-search { height: 44px; font-size: .92rem; margin-bottom: 12px; }
    .bh-bar { justify-content: flex-start; }
}
/* ...and a bottom sheet on phones */
@media (max-width: 767.98px) {
    .bh-bar { position: sticky; top: var(--real-nav-h, var(--nav-h)); z-index: 20; margin: 0 -12px 14px; padding: 10px 12px;
        background: rgba(251,247,236,.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); transition: box-shadow 240ms ease; }
    .bh-bar.stuck { box-shadow: 0 1px 0 rgba(26,26,26,.06), 0 10px 24px -18px rgba(26,26,26,.4); }

    .bh-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041; height: min(88vh, 760px); height: min(88dvh, 760px); display: flex; flex-direction: column;
        background: var(--bc-cream); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -20px rgba(0,0,0,.4);
        transform: translateY(110%); visibility: hidden; transition: transform 460ms cubic-bezier(.32,.72,0,1), visibility 0s linear 460ms; }
    .bh-sheet.open { transform: none; visibility: visible; transition: transform 460ms cubic-bezier(.32,.72,0,1); }
    .bh-sheet.dragging { transition: none; }
    .bh-sheet-grab { flex: 0 0 auto; padding: 8px 20px 10px; touch-action: none; cursor: grab; user-select: none; }
    .bh-handle { display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(26,26,26,.2); margin: 0 auto 10px; }
    .bh-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
    .bh-sheet-body .filter-accordion { background: var(--surface); border-radius: 18px; padding: 0 16px; border-top: 0; margin-top: 0; }
    .bh-sheet-foot { margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(251,247,236,.92);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid #efeadc; }
    .bh-sheet-foot .bh-btn-ink { height: 50px; font-size: 1rem; }
    .bh-alert { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
    .bh-alert button { flex: 1 1 100%; height: 44px; }
    .bh-alert-name { flex-basis: 100%; height: 44px; }
    .bh-alert.is-editing button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-sheet, .bh-sheet.open, .bh-scrim, .car-tile-img, .car-tile-img img { transition: none; }
}

/* ── App prompts (install / notification nudges) ───────────────────────── */
.app-prompt-container { position: fixed; bottom: 72px; left: 0; right: 0; z-index: 1080; display: flex; flex-direction: column; align-items: center; pointer-events: none; padding: 0 12px; }
.app-prompt { pointer-events: auto; width: 100%; max-width: 420px; border-radius: 16px; padding: 14px 16px; opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease; }
.app-prompt.prompt-visible { opacity: 1; transform: translateY(0); }

/* Install banner */
.app-prompt-install { background: var(--bc-near-black, #1e1e1e); color: #fff; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.app-prompt-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.app-prompt-body { flex: 1; min-width: 0; }
.app-prompt-body b { display: block; font-size: .92rem; line-height: 1.3; }
.app-prompt-body small { display: block; font-size: .78rem; opacity: .65; margin-top: 1px; }
.app-prompt-action { flex: 0 0 auto; padding: 7px 16px; border: none; border-radius: 999px; background: var(--bc-yellow, #ffe14d); color: var(--bc-near-black, #1e1e1e); font-weight: 700; font-size: .82rem; cursor: pointer; }
.app-prompt-action:disabled { opacity: .5; }
.app-prompt-dismiss { flex: 0 0 auto; width: 28px; height: 28px; border: none; background: none; color: rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.app-prompt-dismiss:hover { color: rgba(255,255,255,.7); }

/* iOS guide */
.app-prompt-ios { background: #fff; color: var(--bc-near-black, #1e1e1e); box-shadow: 0 4px 24px rgba(0,0,0,.14); padding: 18px 20px 20px; position: relative; }
.app-prompt-dismiss-top { position: absolute; top: 10px; right: 10px; color: #999; }
.app-prompt-dismiss-top:hover { color: #555; }
.app-prompt-ios-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.app-prompt-ios-header .app-prompt-icon { width: 34px; height: 34px; background: var(--bc-near-black, #1e1e1e); color: #fff; border-radius: 8px; }
.app-prompt-ios-header b { font-size: .92rem; }
.app-prompt-ios-steps { display: flex; flex-direction: column; gap: 10px; }
.app-prompt-ios-step { display: flex; align-items: center; gap: 10px; font-size: .85rem; line-height: 1.4; }
.app-prompt-step-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--bc-cream, #faf7f0); font-weight: 700; font-size: .78rem; display: flex; align-items: center; justify-content: center; }
.app-prompt-ios-step svg { flex: 0 0 auto; color: #007aff; }

/* Notification prompt */
.app-prompt-notif { background: #fff; color: var(--bc-near-black, #1e1e1e); box-shadow: 0 4px 24px rgba(0,0,0,.14); padding: 18px 20px; text-align: center; }
.app-prompt-notif-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.app-prompt-notif-bell { width: 34px; height: 34px; border-radius: 50%; background: var(--bc-yellow, #ffe14d); display: flex; align-items: center; justify-content: center; color: var(--bc-near-black, #1e1e1e); }
.app-prompt-notif-title { font-size: .95rem; }
.app-prompt-notif-text { font-size: .82rem; color: #777; margin: 0 0 14px; }
.app-prompt-notif-actions { display: flex; gap: 10px; justify-content: center; }
.app-prompt-notif-enable { padding: 9px 20px; border: none; border-radius: 999px; background: var(--bc-near-black, #1e1e1e); color: #fff; font-weight: 700; font-size: .84rem; cursor: pointer; }
.app-prompt-notif-enable:disabled { opacity: .5; }
.app-prompt-notif-later { padding: 9px 16px; border: none; border-radius: 999px; background: transparent; color: #999; font-weight: 600; font-size: .84rem; cursor: pointer; }
.app-prompt-notif-later:hover { color: #555; }

/* When the tab bar is absent, drop closer to the bottom */
@media (min-width: 768px) { .app-prompt-container { bottom: 24px; } }

/* ── Select picker (static/js/select-picker.js) ─────────────────────────────
   Our own list over a hidden <select data-picker>: drops down under the field on a
   computer; on phones, a box in the middle of the screen over a darkened page. */
.sp-trigger { cursor: pointer; font: inherit; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.sp-trigger:disabled { cursor: not-allowed; }
.sp-trigger.is-placeholder .sp-value { color: #b3ad9f; }
.sp-trigger .sp-chev { flex: 0 0 auto; color: #a39d90; transition: transform .2s cubic-bezier(.32,.72,0,1); }
.sp-trigger[aria-expanded="true"] .sp-chev { transform: rotate(90deg); }
.sp-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sell/Edit page row: value on the right, the whole row is the button */
.sp-in-row { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; border: 0; background: none; padding: 0; text-align: right; font-weight: 500; }
.le-row.is-disabled { cursor: not-allowed; }
.le-row.is-disabled > span { color: #b3ad9f; }
/* On its own in a card (Lowest offer) */
.sp-block { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 0 16px; border: 0; background: none; border-radius: inherit; text-align: left; font-weight: 500; }
/* Browse page: keeps the .ce-select look (its own arrow) */
.sp-trigger.ce-select { display: flex; align-items: center; text-align: left; }
.sp-trigger.form-control { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
.sp-trigger.ce-select:disabled { opacity: .5; background-color: #faf8f2; }

.sp-scrim { position: fixed; inset: 0; z-index: 1094; background: transparent; }
/* --sp-fs = the font size of the field it opened from (set in JS), so the list reads as part of that field */
.sp-pop { --sp-fs: 15px; --sp-row: calc(var(--sp-fs) * 2.7); position: fixed; z-index: 1095; display: flex; flex-direction: column; max-height: 360px; background: #fff; border-radius: 12px; font-size: var(--sp-fs);
    box-shadow: 0 12px 40px -8px rgba(26,26,26,.28), 0 0 0 1px #ece6d5; overflow: hidden; outline: none;
    opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .18s cubic-bezier(.32,.72,0,1); }
.sp-pop.on { opacity: 1; transform: none; }
.sp-title { display: none; }
.sp-search { display: flex; align-items: center; gap: 8px; margin: 6px 6px 2px; padding: 0 10px; height: var(--sp-row); flex: 0 0 auto; border-radius: 9px; background: #f2ecdc; color: #8a8478; cursor: text; }
.sp-search[hidden] { display: none; }
.sp-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; }
.sp-search input::-webkit-search-cancel-button, .sp-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.sp-search svg { width: 1em; height: 1em; flex: 0 0 auto; }
.sp-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.sp-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: var(--sp-row); padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-opt:hover, .sp-opt.is-active { background: #f6f2e6; }
.sp-opt[aria-selected="true"] { font-weight: 600; }
.sp-opt:disabled { color: #b3ad9f; cursor: not-allowed; background: none; }
.sp-tick { width: 1.1em; height: 1.1em; flex: 0 0 auto; display: none; }
.sp-opt[aria-selected="true"] .sp-tick { display: block; }
.sp-empty { padding: 12px 10px; color: #6f6a60; }

/* Phone: centred box, page darkened behind it */
.sp-scrim.is-phone { background: rgba(15,14,12,.5); opacity: 0; transition: opacity .18s; }
.sp-scrim.is-phone.on { opacity: 1; }
/* phone: 16px everywhere (also stops iOS zooming into the search box) */
.sp-pop.is-phone { --sp-fs: 16px !important; --sp-row: 50px; top: 50%; left: 50%; width: calc(100% - 32px); max-width: 420px; max-height: 72vh; border-radius: 20px;
    transform: translate(-50%, -50%) scale(.96); box-shadow: 0 24px 60px -12px rgba(0,0,0,.45); }
.sp-pop.is-phone.on { transform: translate(-50%, -50%); }
.sp-pop.is-phone .sp-title { display: block; padding: 18px 20px 4px; font-weight: 800; font-size: 1.1rem; }
.sp-pop.is-phone .sp-search { margin: 10px 14px 4px; padding: 0 12px; border-radius: 12px; height: 44px; }
.sp-pop.is-phone .sp-list { padding: 6px 8px 10px; }
.sp-pop.is-phone .sp-opt { padding: 0 12px; border-radius: 10px; }
body.sp-lock { overflow: hidden; }