/* =====================================================================
   ServicePlan.one — design system
   Navy primary + confident green accent. Trust-forward, card-based.
   Single stylesheet, no build step, mobile-first.
   ===================================================================== */

/* Responsive breakpoints — only these three are used anywhere in this file:
     600px   phones
     900px   tablets / narrow windows
     1180px  inner-shell pages (the 244px sidebar eats width)
   Add a rule to an existing block; do not invent a new width. */

:root {
    /* Palette */
    --navy-900: #06182b;
    --navy-800: #0b2440;
    --navy-700: #123256;
    --navy-600: #1c4674;
    --green-700: #0f7a43;   /* text on pale-green chips (light theme) */
    --green-600: #12805c;
    --green-500: #16a34a;
    --green-100: #e3f4ec;
    --amber-600: #b45309;
    --amber-100: #fdf1dd;
    --blue-600: #1d6fe0;
    --red-600: #b42318;
    --red-100: #fbe7e5;
    --slate-600: #64748b;
    --slate-100: #edf2f7;
    --violet-600: #7c3aed;
    --violet-100: #f1e8ff;
    --next-600: #0f5c99;
    --next-100: #e8f2ff;
    --danger: #b42318;
    --ink: #0b2440;
    --muted: #5b6b7d;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --bg: #f5f7fa;
    --bg-muted: #eef2f7;
    --card: #ffffff;
    --white: #ffffff;

    /* Type */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Radius + shadow */
    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(11, 36, 64, .06), 0 1px 3px rgba(11, 36, 64, .05);
    --shadow: 0 4px 14px rgba(11, 36, 64, .08);
    --shadow-lg: 0 18px 50px rgba(11, 36, 64, .16);

    --maxw: 1280px;
    /* Height of the sticky header, border included, for anything that has to
       offset itself to clear it — otherwise it slides underneath and loses its
       top edge. This is the portal value (.site-header__inner is 66px + 1px
       border); public-design.css overrides it for the taller public header. */
    --site-header-h: 67px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   Browsers implement it as `[hidden] { display: none }` in the user-agent
   sheet, which any author rule setting `display` on the same element beats —
   so a component styled `display: flex` renders anyway, empty, and looks like a
   stray panel. This file had eight per-component patches for exactly that; one
   rule covers every element, including the ones nobody has written yet. */
[hidden] { display: none !important; }

/* The off-canvas nav drawer is always in the DOM, parked past the right edge
   via translateX(100%) when closed. overflow-x:clip on body alone stops the
   viewport from scrolling to reveal it at most widths, but per-axis overflow
   propagation from body to the viewport is inconsistent across browsers/widths
   -- it silently stopped clipping in the ~800-900px range. Clipping the actual
   root element removes the dependency on that propagation behaviour entirely. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
@supports not (overflow: clip) {
    html { overflow-x: hidden; }
    body { overflow-x: hidden; }
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; color: var(--navy-800); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; }
/* Page titles inside the workshop/owner/admin shell read a bit larger than marketing-page h1s. */
.admin-content h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4em; }
p { margin: 0 0 1rem; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--bg-muted); padding: .1em .45em; border-radius: 6px; font-size: .9em; color: var(--navy-700); }
hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 960px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.link { color: var(--blue-600); font-weight: 600; }
.back-link { display: inline-block; color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.back-link:hover { color: var(--navy-700); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    font-family: inherit; font-size: .98rem; font-weight: 650; line-height: 1;
    padding: .8em 1.3em; border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green-500); color: #fff; box-shadow: 0 6px 16px rgba(22,163,74,.28); }
.btn--primary:hover { background: var(--green-600); }
.btn--ghost { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy-600); background: var(--bg-muted); }
.btn--sm { padding: .55em .95em; font-size: .88rem; }
.btn--lg { padding: 1em 1.8em; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Header / footer ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}
/* backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants (same rule as transform/filter/perspective) --
   so the fixed, full-viewport mobile nav drawer was being sized against this
   67px sticky bar instead of the viewport, collapsing it to a sliver. Drop the
   filter only while the drawer is open, which is also when it's least visible
   anyway (the drawer + backdrop cover most of the header). */
.site-header.is-nav-open { backdrop-filter: none; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: .55em; font-weight: 800; color: var(--navy-800); font-size: 1.1rem; }
.brand:hover { text-decoration: none; }
.brand__mark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
    background: var(--navy-800); color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .02em;
}
/* Brand logo. The artwork carries its own dark rounded plate, so it needs no
   background of its own — only a height; the width follows the 4.04:1 ratio. */
.brand__logo { display: block; height: 64px; width: auto; }
/* The 198px sidebar rail caps this one at ~42px: the artwork is 4.04:1. */
.brand__logo--sidebar { height: 30px; }
.site-nav-toggle { display: none; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-muted); color: var(--ink); cursor: pointer; }
.site-nav-toggle__bars, .site-nav-toggle__bars::before, .site-nav-toggle__bars::after { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; content: ''; }
.site-nav-toggle__bars { position: relative; }
.site-nav-toggle__bars::before { position: absolute; top: -5px; }
.site-nav-toggle__bars::after { position: absolute; top: 5px; }
.site-nav__close { display: none; position: absolute; top: .75rem; right: .9rem; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 10px; background: var(--bg-muted); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.site-nav-backdrop { display: none; }
.site-nav { display: flex; align-items: center; gap: 1.15rem; }
.site-nav a { color: var(--navy-700); font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: var(--green-600); text-decoration: none; }
.site-nav a.btn { color: #fff; }
.site-nav a.btn--ghost { color: var(--navy-800); }
/* Utility controls (language, install, account) sit apart from the content links. */
.site-nav__utility { display: flex; align-items: center; gap: .8rem; margin-left: auto; padding-left: 1.15rem; border-left: 1px solid var(--line); }
.site-nav__utility:empty { display: none; }
.site-nav__menu--notifications { display: inline-flex; align-items: center; }
.site-nav__utility .topbar-bell { color: inherit; }
.site-header__identity { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.site-header__avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .82rem; overflow: hidden; flex: 0 0 auto; }
.site-header__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }
.site-header__identity-text { display: grid; line-height: 1.25; }
.site-header__identity-text strong { font-size: .86rem; font-weight: 700; color: var(--ink); }
.site-header__identity-text small { font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.site-nav__menu { position: relative; display: inline-flex; flex: 0 0 auto; }
.site-nav__menu > summary { list-style: none; }
.site-nav__menu > summary::-webkit-details-marker { display: none; }
.site-nav__menu-trigger {
    display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem;
    border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink);
    font-size: .88rem; font-weight: 700; cursor: pointer; user-select: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.site-nav__menu-trigger:hover { border-color: var(--navy-600); background: var(--bg-muted); text-decoration: none; }
.site-nav__menu[open] > .site-nav__menu-trigger { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.site-nav__menu-trigger--account { padding-left: .35rem; }
.site-nav__menu-trigger--login { white-space: nowrap; }
/* Content menus (Reports / Workshops / Company) read as plain nav links, matching
   the sibling <a>s. The pill treatment is reserved for the account/log-in control. */
.site-nav__menu-trigger--link {
    height: auto; padding: 0; gap: .35rem;
    border: 0; border-radius: 0; background: none;
    color: var(--navy-700); font-size: .95rem; font-weight: 600;
}
.site-nav__menu-trigger--link:hover { color: var(--green-600); background: none; border: 0; }
.site-nav__menu--link[open] > .site-nav__menu-trigger { color: var(--green-600); border: 0; box-shadow: none; }
.site-nav__account-copy { display: grid; line-height: 1.1; text-align: left; }
.site-nav__account-copy strong { font-size: .84rem; font-weight: 700; }
.site-nav__account-copy small { font-size: .63rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.site-nav__menu-chevron { flex: 0 0 auto; color: var(--muted); transform-origin: 50% 50%; transition: transform .18s ease; }
.site-nav__menu[open] > .site-nav__menu-trigger .site-nav__menu-chevron { transform: rotate(180deg); }
.site-nav__menu-trigger--link .site-nav__menu-chevron { color: currentColor; }
.site-nav__menu-panel {
    position: absolute; top: calc(100% + .5rem); right: 0; min-width: 180px; padding: .4rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); z-index: 100;
}
.site-nav__menu-panel a { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border-radius: 8px; color: var(--ink); font-size: .92rem; font-weight: 600; }
.site-nav__menu-panel a:hover { background: var(--bg-muted); text-decoration: none; }
.site-nav__menu-panel--start { right: auto; left: 0; }
.site-nav__signout-link { white-space: nowrap; }
/* ---------- Language selector ---------- */
.language-menu { position: relative; display: inline-block; flex: 0 0 auto; }
.language-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--navy-800); font-size: .8rem; line-height: 1; font-weight: 700; cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.language-menu summary:hover { border-color: var(--navy-600); }
.language-menu[open] summary { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu__flag { display: block; width: 18px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11,36,64,.12); }
.language-menu__code { letter-spacing: .02em; }
.language-menu__chevron { color: var(--muted); transition: transform .18s ease; }
.language-menu[open] .language-menu__chevron { transform: rotate(180deg); }
.language-menu__list { position: absolute; z-index: 100; top: calc(100% + 6px); right: 0; min-width: 176px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); animation: lm-in .14s ease; }
@keyframes lm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.language-menu__option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--navy-700) !important; font-size: .85rem; line-height: 1; font-weight: 600; }
.language-menu__option:hover { background: var(--bg-muted); text-decoration: none; }
.language-menu__option .language-menu__name { flex: 1; }
.language-menu__option .language-menu__check { color: var(--green-600); font-weight: 800; opacity: 0; }
.language-menu__option.is-active { background: var(--green-100); color: var(--green-600) !important; }
.language-menu__option.is-active .language-menu__check { opacity: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-800); color: #cdd8e4; margin-top: 4rem; padding: 3.25rem 0 0; }
.site-footer__main { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 2.1fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.site-footer__brand { max-width: 360px; }
.site-footer__brand-link { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-size: 1.12rem; }
.site-footer__brand-link:hover { color: #fff; text-decoration: none; }
.site-footer .brand__mark { background: #fff; color: var(--navy-800); }
.site-footer__brand p { max-width: 35ch; margin: 1rem 0 0; color: #aebed0; line-height: 1.65; }
.site-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; margin-top: 1.35rem; }
.site-footer__secondary-link { color: #d9e5ef; font-size: .9rem; font-weight: 700; }
.site-footer__secondary-link:hover { color: #fff; text-decoration: none; }
.site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.site-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.site-footer__column h2 { margin: 0 0 .35rem; color: #8298ae; font-size: .76rem; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.site-footer__column a { color: #d7e1eb; font-size: .92rem; font-weight: 600; line-height: 1.45; transition: color .15s ease, transform .15s ease; }
.site-footer__column a:hover { color: #fff; text-decoration: none; transform: translateX(2px); }
.site-footer__bar { margin-top: 3rem; padding: .7rem 0; background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.06); }
.site-footer__bar-inner { min-height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.site-footer .site-footer__copyright { margin: 0; color: #90a3b8; font-size: .78rem; line-height: 1.2; }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.25rem; }
.site-footer__bottom-links a { color: #90a3b8; font-size: .78rem; font-weight: 600; }
.site-footer__bottom-links a:hover { color: #dce7f1; text-decoration: none; }
.site-footer__tools { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.site-footer__tools .pwa-install-button { display: inline-flex; align-items: center; gap: .45rem; height: 30px; padding: 0 .8rem; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; }
.site-footer__tools .pwa-install-button:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.1); }
.site-footer__tools .pwa-install-button__label { display: inline; }
.language-menu--footer summary { height: 30px; padding: 0 9px; gap: 6px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; font-size: .74rem; }
.language-menu--footer summary:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.1); }
.language-menu--footer .language-menu__chevron { color: #90a3b8; }
.language-menu--footer .language-menu__list { top: auto; bottom: calc(100% + 6px); }

/* ---------- Theme toggle ---------- */
.theme-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; transition: border-color .15s ease, background .15s ease; }
.theme-toggle:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.1); }
.theme-toggle__icon { pointer-events: none; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline; }

/* ---------- Informational / legal pages ---------- */
.page-hero { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #dce8f3; padding: 3.2rem 0; }
.page-hero--compact { padding: 2rem 0; }
.pricing-hero h1 { margin: 0; }
.page-hero h1 { color: #fff; margin-bottom: .55rem; }
.page-hero p { max-width: 62ch; margin-bottom: 0; color: #c6d4e2; font-size: 1.08rem; }
.page-content { padding: 3rem 0; }
.prose { width: 100%; }
.prose h2 { margin-top: 2.1rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul { padding-left: 1.35rem; }
.prose li { margin: .45rem 0; }
.prose .last-updated { color: var(--muted); font-size: .9rem; }
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; box-shadow: var(--shadow-sm); }
.info-card h2, .info-card h3 { margin-top: 0; }
.info-card p:last-child { margin-bottom: 0; }

/* ---------- Marketing pages: pricing + CTA blocks ---------- */
.page-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }

/* ---------- Process flow (workshops / how it works) ---------- */
.workflow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.6rem 0 0;
    padding: 0;
    counter-reset: workflow;
}
.workflow__step {
    position: relative;
    display: grid;
    gap: .75rem;
    padding: 1.35rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    margin: 0;
}
/* Connector between cards. Drawn on the card, not as an extra element, so the
   list stays four items for a screen reader. */
.workflow__step::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 1rem;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--line-strong), var(--green-500));
}
.workflow__step--final::after { display: none; }

.workflow__marker { display: flex; align-items: center; gap: .6rem; }
.workflow__num {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 999px;
    /* Pinned, not tokenised: this one carries white text, so it must stay dark
       in both themes. The brand --green-500 only reaches 3.3:1 against white. */
    background: #0f7a43; color: #fff;
    font-size: .82rem; font-weight: 800;
}
.workflow__icon { width: 26px; height: 26px; color: var(--green-600); flex: 0 0 auto; }
.workflow__step--final .workflow__icon { color: var(--green-500); }

.workflow__body { display: grid; gap: .3rem; min-width: 0; }
.workflow__body strong { color: var(--ink); font-size: .98rem; line-height: 1.3; }
.workflow__body span { color: var(--muted); font-size: .88rem; line-height: 1.5; }

@media (max-width: 900px) {
    /* A vertical rail reads better than four squeezed columns. */
    .workflow { grid-template-columns: 1fr; gap: .75rem; }
    .workflow__step { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; }
    .workflow__marker { flex-direction: column; gap: .4rem; }
    .workflow__step::after {
        top: 100%; left: 2.1rem;
        width: 2px; height: .75rem;
        transform: none;
        background: linear-gradient(180deg, var(--line-strong), var(--green-500));
    }
}
.page-note { margin-top: 1.6rem; padding: .85rem 1rem; border-left: 3px solid var(--line-strong); background: var(--bg-muted); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--muted); font-size: .9rem; }
.pricing-highlight { display: grid; justify-items: start; gap: .3rem; margin-top: 1.6rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.pricing-highlight__label { font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pricing-highlight__amount { font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--navy-800); }
.pricing-highlight__note { color: var(--muted); font-size: .92rem; }
.pricing-highlight .btn { margin-top: .8rem; }
.pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.pricing-tiers--buyer-single { grid-template-columns: minmax(0, 420px); justify-content: start; }
.pricing-tier { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.pricing-tier--single { max-width: 100%; }
.pricing-tier h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.pricing-tier__desc { color: var(--muted); font-size: .9rem; margin: 0 0 .9rem; }
.pricing-tier__plans { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: .5rem; }
.pricing-tier__plans li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.pricing-tier__plans li:first-child { border-top: 0; padding-top: 0; }
.pricing-tier__period { flex: 1 1 auto; color: var(--muted); font-size: .88rem; }
.pricing-tier__amount { font-size: 1.15rem; font-weight: 800; color: var(--navy-800); }
/* Buyer report pricing: three volume tiers with a highlighted 'best value'. */
.pricing-tiers--buyer .pricing-tier { position: relative; }
.pricing-tier.is-featured { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(22,163,74,.18), var(--shadow-sm); }
.pricing-tier__flag { align-self: flex-start; margin-bottom: .6rem; padding: .2rem .6rem; border-radius: 999px; background: var(--green-100); color: var(--green-600); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.pricing-tier__price { display: flex; align-items: baseline; gap: .4rem; margin: .1rem 0 .5rem; }
.pricing-tiers--buyer .pricing-tier__amount { font-size: 2.15rem; line-height: 1.05; }
.pricing-tier__unit { color: var(--muted); font-size: .85rem; font-weight: 600; }
.pricing-tier__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; color: var(--muted); font-size: .88rem; }
.pricing-tiers--buyer .pricing-tier .btn { margin-top: auto; justify-content: center; }
.pricing-tiers__foot { margin-top: .85rem; }

/* Pack purchase form inside a pricing tier */
.pricing-tier__buy { margin-top: auto; display: grid; gap: .5rem; }
.pricing-tier__buy .field { margin: 0; }
.pricing-tier__buy input { width: 100%; }
.pricing-tier__buy .btn { justify-content: center; }

/* ---------- Buyer report pack ---------- */
.pack-card h1 { margin: .3rem 0 .8rem; font-size: 1.7rem; }
.pack-meter { height: 8px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; margin-bottom: 1.3rem; }
.pack-meter__fill { display: block; height: 100%; background: var(--green-500); border-radius: 999px; }
.pack-form { margin: 0; }
.pack-link-card { margin-top: 1.1rem; }
.pack-link-card h2, .pack-vin-list + h2 { margin-top: 0; font-size: 1.05rem; }
.pack-vin-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pack-vin-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.pack-vin-list li:first-child { border-top: 0; padding-top: 0; }

:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .pricing-highlight,
:root[data-theme="dark"] .pricing-tier { background: var(--card); }
:root[data-theme="dark"] .pricing-highlight__amount,
:root[data-theme="dark"] .pricing-tier__amount,
:root[data-theme="dark"] .pricing-tier h2 { color: var(--ink); }
.faq-list { max-width: none; margin: 1.5rem 0 0; width: 100%; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .8rem; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-weight: 700; color: var(--navy-800); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--green-600); font-size: 1.2rem; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item__answer { padding: 0 1.25rem 1.1rem; color: var(--muted); }
.faq-item__answer p:last-child { margin-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; align-items: start; }
.contact-card h2 { margin-top: 0; }
.contact-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.contact-card li { padding: .75rem 0; border-top: 1px solid var(--line); }
.contact-card li:first-child { border-top: 0; padding-top: 0; }
.contact-card strong { display: block; color: var(--navy-800); }
.status-note { background: var(--green-100); border: 1px solid #b9e3cd; border-radius: var(--r-sm); padding: .8rem 1rem; color: var(--green-600); font-weight: 600; }
.status-note[hidden] { display: none; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: .8rem; border-bottom: 1px solid var(--line); }
.cookie-table th { color: var(--navy-800); background: var(--bg-muted); }
.cookie-table td { color: var(--muted); }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,.98); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 24px rgba(11,36,64,.12); padding: .9rem 0; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cookie-banner strong { color: var(--navy-800); }
.cookie-banner p { color: var(--muted); font-size: .88rem; margin: .2rem 0 0; max-width: 70ch; }
.cookie-banner__actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--r); padding: .9rem 1.1rem; margin: 1.2rem 0; font-weight: 550; }
.alert--success { background: var(--green-100); color: var(--green-600); border: 1px solid #b9e3cd; }
.alert--error { background: #fdeaea; color: #b42318; border: 1px solid #f4c1bd; }
.admin-flash-stack { position: fixed; top: calc(68px + .85rem); right: 1.5rem; z-index: 45; width: min(430px, calc(100vw - 2rem)); display: grid; gap: .65rem; }
.admin-flash-stack .alert { display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .8rem .95rem; border-radius: 14px; box-shadow: var(--shadow-lg); transition: opacity .22s ease, transform .22s ease; }
.admin-flash-stack .alert > span { flex: 1 1 auto; min-width: 0; }
.alert__close { flex: 0 0 auto; margin: -.15rem -.2rem 0 0; border: 0; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; padding: .1rem .25rem; border-radius: 8px; cursor: pointer; opacity: .65; }
.alert__close:hover { opacity: 1; }
.alert__close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
.admin-flash-stack .alert.is-dismissing { opacity: 0; transform: translateY(-8px); }
.live-notification-stack { position: fixed; top: clamp(4.65rem, 7vw, 5.6rem); right: clamp(.85rem, 2vw, 1.4rem); z-index: 78; width: min(430px, calc(100vw - 2rem)); display: grid; gap: .65rem; pointer-events: none; }
.live-notification-toast { display: grid; gap: .3rem; color: inherit; text-decoration: none; box-shadow: var(--shadow-lg); pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.live-notification-toast strong { display: block; }
.live-notification-toast__body,
.live-notification-toast small { color: var(--muted); }
.live-notification-toast.is-hiding { opacity: 0; transform: translateY(-6px); }

/* ---------- Sections ---------- */
.section { padding: 3rem 0; }
.section--muted { background: var(--bg-muted); }
.section__title { text-align: center; }
.section__sub { text-align: center; max-width: 920px; margin: .5rem auto 0; color: var(--muted); }

/* ---------- Cards / forms ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.empty { text-align: center; color: var(--muted); }
.form .field { display: block; margin-bottom: 1.1rem; }
.field__label { display: block; font-weight: 650; font-size: .9rem; margin-bottom: .35rem; color: var(--navy-700); }
.field__hint { display: block; font-size: .76rem; color: color-mix(in srgb, var(--muted) 78%, transparent); margin-top: .3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=tel], input[type=url], input[type=search], input[type=time], textarea, select {
    width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
    padding: .7rem .85rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 74%, transparent);
    opacity: 1;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
textarea { resize: vertical; }
.form__actions { display: flex; gap: .8rem; margin-top: .5rem; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    /* The drifting glow layers must not spill into the page's scroll area. */
    overflow: hidden;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(22,163,74,.18), transparent 60%),
        linear-gradient(160deg, var(--navy-800), var(--navy-900));
    color: #eaf1f8; padding: 3.5rem 0 4rem;
}

/* ---------- Hero illustration + scrim ---------- */
/* Sits below the glow/grid layers (z-index -1) so those still read as an extra
   depth cue on top of it. The scrim is a separate element rather than a filter
   on the <img>, so the fade can be asymmetric (heavy over the copy, light over
   the art) instead of dimming the whole image evenly. */
.hero__photo {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover; object-position: center right;
    display: block;
}
.hero__photo-scrim {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(90deg,
        var(--navy-900) 0%, rgba(6,24,43,.88) 32%,
        rgba(6,24,43,.38) 62%, rgba(6,24,43,.12) 100%);
}
@media (max-width: 900px) {
    /* No side column to tuck the full illustration into once the layout
       stacks, so instead of hiding it, crop it to a band behind the headline
       and lead paragraph, fading to solid navy before the VIN card starts --
       the card and everything below it stay on the plain hero background. */
    .hero__photo, .hero__photo-scrim {
        inset: 0 0 auto 0;
        height: 360px;
    }
    .hero__photo { object-position: 78% 32%; }
    .hero__photo-scrim {
        background: linear-gradient(180deg,
            rgba(6,24,43,.32) 0%, rgba(6,24,43,.62) 55%, var(--navy-900) 100%);
    }
}

/* ---------- Hero parallax layers (decorative) ---------- */
.hero__layers { position: absolute; inset: -12% -5%; z-index: -1; pointer-events: none; }
.hero__glow { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.hero__glow--a { top: -8%; right: 4%; width: 46vw; max-width: 620px; aspect-ratio: 1; background: radial-gradient(circle, rgba(22,163,74,.34), transparent 68%); }
.hero__glow--b { bottom: -22%; left: -6%; width: 38vw; max-width: 520px; aspect-ratio: 1; background: radial-gradient(circle, rgba(29,111,224,.28), transparent 70%); }
.hero__grid {
    position: absolute; inset: 0; display: block; opacity: .5;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}
.hero__copy, .hero__panel { position: relative; }

/* ---------- Scroll reveal ---------- */
/* Only the section itself animates. Staggering the cards inside would need rules
   that outrank .persona-card:hover and would kill the card hover-lift. */
[data-reveal] { transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
[data-reveal].reveal-pending { opacity: 0; transform: translate3d(0, 26px, 0); }

@media (prefers-reduced-motion: reduce) {
    .hero__glow, .hero__grid { display: none; }
    [data-reveal] { transition: none; }
    [data-reveal].reveal-pending { opacity: 1; transform: none; }
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
.hero h1 { color: #fff; margin: 0 0 1rem; line-height: 1.15; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #7ee3b1; }
.hero .lead { font-size: 1.12rem; line-height: 1.65; color: #c6d4e2; max-width: 42ch; margin: 0 0 .3rem; }
.hero .lead--wide { max-width: none; }
.hero .lead strong { color: #fff; font-weight: 800; }

.lookup-card { background: #fff; border-radius: var(--r-lg); padding: 1rem; box-shadow: var(--shadow-lg); margin-top: 1.5rem; max-width: 520px; }
.lookup-card__tabs { display: inline-flex; background: var(--bg-muted); border-radius: 999px; padding: 4px; margin-bottom: .8rem; }
.lookup-tab { border: none; background: transparent; font-family: inherit; font-weight: 650; font-size: .9rem; color: var(--muted); padding: .45em 1.1em; border-radius: 999px; cursor: pointer; }
.lookup-tab.is-active { background: #fff; color: var(--navy-800); box-shadow: var(--shadow-sm); }
.lookup-card__row { display: flex; gap: .6rem; }
.lookup-card__row input { flex: 1; }
.lookup-card__hint, .lookup-card__hint code { color: var(--muted); font-size: .82rem; margin: .6rem 0 .2rem; }
.lookup-card .btn { flex-shrink: 0; }

.hero__panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 1.5rem; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.trust-stat__num { display: block; font-size: 1.8rem; font-weight: 800; color: #fff; }
.trust-stat__label { display: block; font-size: .78rem; color: #a9bccf; margin-top: .2rem; }
.trust-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.trust-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; color: #d6e2ee; font-size: .95rem; }

/* ---------- Hero owner-review stack ---------- */
.hero__owner-link { margin: .85rem 0 0; color: #a9bccf; font-size: .92rem; }
.hero__owner-link a { color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.hero__owner-link a:hover { color: var(--green-500); }

/* Cards overlap and tilt like a small handful dropped on the panel. Each sits
   slightly lower and rotated the opposite way from its neighbour. */
.review-stack { display: grid; padding: .35rem .25rem 0; }
.review-card {
    grid-area: 1 / 1;                     /* stack them all in one cell */
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 10px 26px rgba(4, 14, 26, .3);
    transition: transform .22s ease, box-shadow .22s ease;
}
.review-card blockquote { margin: .45rem 0 .6rem; color: var(--ink); font-size: .95rem; line-height: 1.45; }
.review-card blockquote::before { content: '“'; }
.review-card blockquote::after  { content: '”'; }
.review-card figcaption { display: grid; gap: .1rem; font-size: .8rem; color: var(--muted); }
.review-card__who { font-weight: 700; color: var(--ink); }
.review-card__where a { color: var(--green-600); font-weight: 650; }
.review-card__stars { font-size: .9rem; line-height: 1; color: #f0a92b; }

/* Live card on top; the two ghosts peek out behind it, tilted the other way.
   They carry no content and never react to the pointer. */
.review-card--ghost { pointer-events: none; }
.review-card--ghost-2 { transform: translate(14px, -12px) rotate(3.4deg); z-index: 1; opacity: .45; min-height: 118px; }
.review-card--ghost-1 { transform: translate(-10px, -6px) rotate(-2.6deg); z-index: 2; opacity: .7;  min-height: 124px; }
.review-card--live    { transform: rotate(.9deg); z-index: 3; }

@media (prefers-reduced-motion: reduce) {
    .review-card, .review-card:hover { transition: none; }
}

@media (max-width: 900px) {
    /* Tilting reads as broken on a narrow column: drop the ghosts, keep the quote. */
    .review-card--ghost { display: none; }
    .review-card--live { transform: none; }
}
.tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--green-500); color: #fff; font-size: .75rem; flex-shrink: 0; }

/* ---------- Persona grid ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.persona-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease; }
.persona-card:hover { border-color: var(--green-500); box-shadow: 0 12px 30px rgba(22,163,74,.16); transform: translateY(-4px); }
/* Custom line-art tiles (matching the hero illustration's navy/emerald
   palette) replacing plain emoji. border-radius here is a belt-and-braces
   crop on top of the source image's own rounded corners. */
.persona-card__icon { display: block; width: 56px; height: 56px; border-radius: 14px; }
.persona-card p { color: var(--muted); flex: 1; }
.persona-card .btn { align-self: flex-start; margin-top: .4rem; }
.persona-card .link { margin-top: .3rem; }


.report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.report-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--ink); }
.report-card__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(22,163,74,.12); color: var(--green-500); flex: 0 0 auto; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .01em; padding: .28em .7em; border-radius: 999px; text-transform: none; }
.badge--confirmed { background: var(--green-100); color: var(--green-600); }
.badge--unconfirmed { background: var(--amber-100); color: var(--amber-600); }
.badge--danger { background: var(--red-100); color: var(--red-600); }

.service-tone { --service-accent: var(--line-strong); --service-soft: var(--bg-muted); --service-ink: var(--muted); }
.service-tone--owner-self { --service-accent: var(--slate-600); --service-soft: var(--slate-100); --service-ink: var(--slate-600); }
.service-tone--owner-pending { --service-accent: var(--amber-600); --service-soft: var(--amber-100); --service-ink: var(--amber-600); }
.service-tone--owner-verified { --service-accent: var(--green-500); --service-soft: var(--green-100); --service-ink: var(--green-700); }
.service-tone--workshop-pending { --service-accent: var(--violet-600); --service-soft: var(--violet-100); --service-ink: var(--violet-600); }
.service-tone--workshop-verified { --service-accent: var(--blue-600); --service-soft: color-mix(in srgb, var(--blue-600) 12%, var(--card)); --service-ink: var(--blue-600); }
.service-tone--next-service { --service-accent: var(--next-600); --service-soft: var(--next-100); --service-ink: var(--next-600); }
.service-tone--neutral { --service-accent: var(--line-strong); --service-soft: var(--bg-muted); --service-ink: var(--muted); }
.service-tone-badge { background: var(--service-soft); color: var(--service-ink); }
.service-tone-dot { background: var(--service-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--service-accent) 18%, transparent) !important; }
.service-tone-surface { border-color: color-mix(in srgb, var(--service-accent) 24%, var(--line)); border-left: 4px solid var(--service-accent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--service-soft) 32%, var(--card)), var(--card)); }
.service-tone-note { padding: .8rem .95rem; border: 1px solid color-mix(in srgb, var(--service-accent) 24%, var(--line)); border-left: 4px solid var(--service-accent); border-radius: 14px; background: color-mix(in srgb, var(--service-soft) 62%, var(--card)); }

/* ---------- Vehicle header + summary cards ---------- */
.vehicle-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.vehicle-header__identity { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.vehicle-header__avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 1.25rem; font-weight: 800; }
.vehicle-header__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-header__id { min-width: 0; }
.vehicle-header__id h1 { margin: .15rem 0; }
.vehicle-header__title-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.vehicle-header__title-row .badge { flex-shrink: 0; }
.vehicle-header__links { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.vehicle-header__links .link { font-weight: 600; }
.vehicle-header__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); }
.summary-card__label { display: block; font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.summary-card__value { display: block; font-size: 1.9rem; font-weight: 800; color: var(--navy-800); margin: .2rem 0; }
.summary-card__value.small-value { font-size: 1.15rem; }
.summary-card__sub { display: block; font-size: .82rem; color: var(--muted); }

.vehicle-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
.vehicle-fact { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vehicle-fact--wide { grid-column: 1 / -1; }
.vehicle-fact__label { font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vehicle-fact__value { font-size: 1rem; font-weight: 650; color: var(--navy-800); word-break: break-word; }

.mileage-card { margin-bottom: 1.8rem; }
.mileage-chart { width: 100%; overflow-x: auto; }
.mileage-chart__svg { width: 100%; height: auto; min-width: 480px; display: block; }
.mileage-chart__gridline { stroke: var(--line); stroke-width: 1; }
.mileage-chart__axis { stroke: var(--line-strong); stroke-width: 1; }
.mileage-chart__axis-label { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.mileage-chart__line { fill: none; stroke: var(--green-500); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mileage-chart__dot { fill: var(--green-600); stroke: var(--card); stroke-width: 1.5; }
.mileage-chart__dot--rollback { fill: var(--red-600); }
.mileage-chart__warning { font-size: 13px; fill: var(--red-600); }
.mileage-chart__flat-band { fill: var(--amber-100); opacity: .6; }
.mileage-chart__flat-label { font-size: 11px; fill: var(--amber-600); text-anchor: middle; font-weight: 650; }
.mileage-chart__legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .8rem; }
.mileage-chart__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.mileage-chart__legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); display: inline-block; }
.mileage-chart__legend-dot--rollback { background: var(--red-600); }
.mileage-chart__legend-swatch { width: 14px; height: 9px; border-radius: 2px; background: var(--amber-100); display: inline-block; }

/* ---------- Record list ---------- */
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.list-header h2 { margin: 0; }
.record-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.record-row { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.record-row--confirmed { border-left: 4px solid var(--green-500); }
.record-row--unconfirmed { border-left: 4px solid var(--line-strong); }
.record-row__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: inherit; }
.record-row__link:hover { text-decoration: none; background: #fbfcfe; }
.record-row__meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; flex-wrap: wrap; }
.record-row__title { font-weight: 650; color: var(--navy-800); }
.record-row__aside { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.chevron { font-size: 1.4rem; color: var(--line-strong); }
.not-rated { color: var(--blue-600); font-weight: 650; font-size: .9rem; }

/* ---------- Stars ---------- */
.stars { display: inline-flex; letter-spacing: 1px; }
.star { color: var(--line-strong); }
.star--on { color: #f5a623; }
:root[data-theme="dark"] .star--on { color: #fbbf3c; }
.rating-inline { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--navy-800); }
.rating-inline.big { font-size: 1.3rem; }
.rating-inline--compact { gap: .22rem; }
.summary-card__sub--rating { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.star-rating-field { margin-bottom: 1rem; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; font-size: 2rem; margin-bottom: .35rem; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label { color: var(--line-strong); cursor: pointer; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label,
.star-input label.is-active { color: #f5a623; }
.star-input label:hover,
.star-input label.is-active { transform: translateY(-1px); }
.star-input input:focus + label { outline: 2px solid rgba(245,166,35,.35); outline-offset: 4px; border-radius: 6px; }
.star-input__status { margin: 0; min-height: 1.2rem; }

/* ---------- Record detail ---------- */
.record-detail__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.parts-list { margin: .5rem 0 1rem; padding-left: 1.2rem; }
.parts-list li { margin: .2rem 0; }
.record-detail__summary { background: var(--bg-muted); border-radius: var(--r-sm); padding: 1rem; color: var(--navy-700); }
.feedback { margin: .6rem 0; padding-left: 1rem; border-left: 3px solid var(--green-500); color: var(--navy-700); font-style: italic; }

/* ---------- Two column ---------- */
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.8rem; align-items: start; }
.feedback-card { margin-bottom: 1rem; }
.feedback-card.card { padding: 1.1rem 1.3rem; }
.feedback-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.feedback-card__link { flex-shrink: 0; white-space: nowrap; }

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.pagination__info { color: var(--muted); font-size: .85rem; }
.pagination__controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pagination__page { color: var(--muted); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.pagination__jump { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.pagination__jump input { width: 4.5rem; min-height: 2.3rem; padding: .35rem .45rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); color: var(--text); font: inherit; }
.pagination .btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---- Services page: two-column layout (filters + calendar on the left, list on the right) ---- */
.services-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }
.services-layout__side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.services-layout__main { min-width: 0; }
@media (max-width: 900px) {
    .services-layout { grid-template-columns: 1fr; }
}

.services-filters { padding: 1.1rem 1.25rem; }
.services-filters__row { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; }
.services-filters__row .field { margin: 0; }
.services-filters__clear { align-self: flex-start; }
.services-list__status { margin: 0 0 1rem; }
#services-list[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* ---- Services page: one-month-at-a-time activity calendar ---- */
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.cal__nav-btn { padding: .3rem .65rem; line-height: 1; font-size: 1rem; }
.cal__nav-btn:disabled { opacity: .35; pointer-events: none; }
.cal__today-btn { display: block; margin: 0 0 .75rem; font-size: .78rem; }
.cal__selects { display: flex; gap: .4rem; min-width: 0; }
.cal__select { min-width: 0; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; }
.cal__weekday-row, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__weekday-row { margin-bottom: 4px; }
.cal__weekday { text-align: center; font-size: .68rem; font-weight: 650; color: var(--muted); }
.cal__cell { position: relative; aspect-ratio: 1 / 1; width: 100%; padding: 0; border: 0; border-radius: 6px; background: var(--bg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal__cell--outside { background: transparent; cursor: default; }
.cal__cell-num { font-size: .72rem; font-weight: 600; color: var(--ink); }
.cal__cell--0 .cal__cell-num { color: var(--muted); }
.cal__cell--1, .cal__cell--2, .cal__cell--3, .cal__cell--4 { color: #0b2b17; }
.cal__cell--1 { background: #9be9a8; }
.cal__cell--2 { background: #40c463; }
.cal__cell--3 { background: #30a14e; }
.cal__cell--3 .cal__cell-num, .cal__cell--4 .cal__cell-num { color: #f0fff4; }
.cal__cell--4 { background: #216e39; }
.cal__cell:hover:not(.cal__cell--outside) { outline: 2px solid var(--navy-600); outline-offset: 1px; }
.cal__cell.is-selected { outline: 2px solid var(--navy-800); outline-offset: 1px; box-shadow: 0 0 0 1px #fff inset; }
.heatmap__legend { display: flex; align-items: center; gap: .3rem; margin-top: .85rem; }
.heatmap__legend .cal__cell { width: 14px; height: 14px; cursor: default; }

/* ---------- Workshop service entry ---------- */
.service-head { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.2rem; }
.service-head__main { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.service-head h1 { font-size: 1.5rem; margin: .1rem 0; }
.pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--bg-muted); color: var(--navy-700); font-weight: 650; font-size: .85rem; padding: .45em .9em; border-radius: 999px; }
.pill--free { background: var(--green-100); color: var(--green-600); }
.pill--button { border: 0; cursor: pointer; transition: background .15s ease; }
.pill--button:hover { background: var(--line-strong, var(--bg-muted)); }
.pill--button:focus-visible { outline: 2px solid var(--navy-600, currentColor); outline-offset: 2px; }
.pill__chevron { font-size: .7em; transition: transform .18s ease; }
.service-head--open .pill__chevron { transform: rotate(180deg); }

/* Collapsible peek — animated open/close via grid-template-rows (0fr → 1fr). */
.service-recent { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.service-recent.is-open { grid-template-rows: 1fr; }
.service-recent__inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .2s ease .04s; }
.service-recent.is-open .service-recent__inner { opacity: 1; }
.service-recent__inner > :first-child { margin-top: 0; }
/* Border/top-padding live on the inner so nothing shows while collapsed. */
.service-recent.is-open .service-recent__inner { border-top: 1px solid var(--line-strong, rgba(0,0,0,.08)); padding-top: .9rem; }
.service-recent__intro { margin: 0 0 .55rem; }
.service-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.service-recent__item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-muted); padding: .6rem .75rem; }
.service-recent__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; min-width: 0; }
.service-recent__item-title { font-weight: 650; }
.service-recent__summary { margin: .45rem 0 0; font-size: .84rem; line-height: 1.45; white-space: pre-wrap; }
.service-recent__parts { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.service-recent__parts li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .18rem .6rem; font-size: .76rem; font-weight: 600; color: var(--navy-700); }
.service-recent__more { margin-top: .7rem; }
.service-recent__status { margin: .55rem 0 0; }

/* Service-entry screen: tightened so the collapsed view fits without scrolling. */
/* Service entry started from a booking: what the owner asked for, and the way
   back to it. Kept to one line so it never pushes the form off the first screen. */
.service-from-appt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.service-from-appt > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.service-from-appt .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .service-from-appt { align-items: stretch; flex-direction: column; }
    .service-from-appt .btn { width: 100%; }
}
.section--service-entry { padding: 0; }
.section--service-entry .service-head { margin-bottom: 1rem; }
.section--service-entry .service-head h1 { font-size: 1.25rem; }
.section--service-entry .service-catalog-panel { gap: .7rem; display: flex; flex-direction: column; height: calc(100vh - 233px); min-height: 400px; }
.section--service-entry .service-catalog-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.section--service-entry .service-catalog-panel__head h2 { margin: 0; }
.section--service-entry .service-catalog-panel__edit { flex: 0 0 auto; white-space: nowrap; }
.section--service-entry .service-catalog-empty { margin: .4rem 0; padding: .8rem; border: 1px dashed var(--line); border-radius: 10px; }
.section--service-entry .panel h2 { margin-bottom: .4rem; }
.section--service-entry .service-search-entry { margin: 0; }
.section--service-entry .service-search-row { margin-bottom: .25rem; }
.section--service-entry .service-part-combobox input { min-height: 40px; }
.section--service-entry .service-search-entry__button { min-height: 40px; }
.section--service-entry .parts-catalog { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.section--service-entry .service-category-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .7rem;
    border-radius: 14px;
    min-width: 0;
    overflow: visible;
}
.section--service-entry .service-category-row__meta {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 0 0 240px;
    min-width: 0;
}
.section--service-entry .service-category-row__thumb { flex: 0 0 auto; }
.section--service-entry .parts-category-thumb--md {
    --parts-category-thumb-size: 56px;
    --parts-category-thumb-radius: 14px;
    --parts-category-thumb-padding: .08rem;
    --parts-category-thumb-border: 1px solid color-mix(in srgb, var(--line) 88%, #fff);
    --parts-category-thumb-background: transparent;
}
.section--service-entry .service-category-row__title {
    min-width: 0;
    display: grid;
    gap: .12rem;
}
.section--service-entry .service-category-row__title h3 {
    margin: 0;
    font-size: .84rem;
    line-height: 1.18;
}
.section--service-entry .service-category-row__title p {
    margin: 0;
    font-size: .72rem;
}
.section--service-entry .service-category-row__chips,
.section--service-entry .parts-category-card__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}
.section--service-entry .part-option {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    gap: .3rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    overflow: hidden;
}
.section--service-entry .part-option:hover, .section--service-entry .part-option:focus-visible { transform: none; }
.section--service-entry .part-option__name { display: block; min-width: 0; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section--service-entry .part-option__name::before { content: "+"; margin-right: .25em; color: var(--green-600); font-weight: 800; }
.section--service-entry .part-option__action { display: none; }
.section--service-entry .parts-category-card__empty { margin: 0; font-size: .76rem; }
.section--service-entry .service-category-row__more {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px dashed var(--line);
    white-space: nowrap;
}
/* Confirmation pulse on the chip that was just added to the order. */
.section--service-entry .part-option.is-added { animation: part-option-added .45s ease-out; }
@keyframes part-option-added {
    0% { background: var(--green-100); border-color: var(--green-500); transform: scale(1); }
    35% { background: var(--green-100); border-color: var(--green-500); transform: scale(.93); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .section--service-entry .part-option.is-added { animation: none; }
}

@media (max-width: 1120px) {
    .section--service-entry .service-category-row { align-items: flex-start; }
    .section--service-entry .service-category-row__meta { flex-basis: 200px; }
    .section--service-entry .parts-category-thumb--md { --parts-category-thumb-size: 50px; }
}
@media (max-width: 860px) {
    .section--service-entry .service-category-row {
        flex-direction: column;
        align-items: stretch;
    }
    .section--service-entry .service-category-row__meta { flex-basis: auto; }
}

/* The chip area stays compact — about three rows — and scrolls inside itself, so adding
   parts never changes the page height nor pushes the fields below out of place.
   The spare height goes to the summary box instead (see .service-summary-field). */
.section--service-entry .repair-order { margin-bottom: .45rem; min-height: 44px; max-height: 96px; flex: 0 1 auto; overflow-y: auto; padding: .35rem; }

/* Summary absorbs whatever height is left over in the panel. */
.section--service-entry .service-summary-field { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.section--service-entry .service-summary-field textarea { flex: 1 1 auto; min-height: 62px; resize: none; }
.section--service-entry .service-photo-field { margin-bottom: .45rem; }
.section--service-entry .service-photo-slot { width: 58px; height: 58px; border-radius: 9px; }
.section--service-entry .service-photo-slot__placeholder { gap: 0; padding: .1rem; font-size: .58rem; line-height: 1.15; }
.section--service-entry .service-photo-slot__plus { font-size: 1rem; }
/* Photo label and its hint share one line instead of stacking. */
.section--service-entry .service-photo-field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-bottom: .3rem; }

/* Date · mileage · next-service proposal on one row. */
.section--service-entry .field-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section--service-entry .field-row--three input { width: 100%; min-width: 0; }
.section--service-entry .field-row--three input[type=date] { padding-inline: .4rem; }

/* Nothing sits beside the photos any more, so the four slots run across. */
.section--service-entry .service-photo-grid--quad { display: grid; grid-template-columns: repeat(4, auto); gap: .35rem; justify-content: start; }
/* The interval the proposal came from, under the date it produced. */
.section--service-entry .service-next-field__hint { font-size: .62rem; line-height: 1.2; margin-top: .12rem; }
.section--service-entry .field-row { gap: .7rem; }
.section--service-entry .service-ai-actions { margin: .45rem 0 0; gap: .4rem; }
.section--service-entry .ai-note { padding: .4rem .6rem; font-size: .74rem; line-height: 1.3; }
.section--service-entry .service-order-panel__note { margin: .25rem 0 0; font-size: .72rem; line-height: 1.3; }
/* Trim inputs, labels and hints in the order panel — useful but not worth a full line each. */
.section--service-entry .service-order-panel .field { margin-bottom: .45rem; }
.section--service-entry .service-order-panel .field__hint { font-size: .7rem; line-height: 1.25; }
.section--service-entry .service-order-panel .field__label { margin-bottom: .15rem; font-size: .82rem; }
.section--service-entry .service-order-panel input:not([type=file]),
.section--service-entry .service-order-panel textarea { padding-block: .4rem; font-size: .92rem; }
.section--service-entry .service-order-panel textarea { min-height: 0; }

/* The panel itself never scrolls: it is exactly as tall as the space below the header,
   and the repair-order chip area above absorbs whatever height is left over. */
.section--service-entry .service-order-panel {
    top: 76px;
    height: calc(100vh - 233px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}
/* On short screens drop the optional AI hint and tighten further, so the form still
   fits on one screen instead of reintroducing a scrollbar. */
@media (max-height: 780px) {
    .section--service-entry .ai-note { display: none; }
    .section--service-entry .service-photo-slot { width: 50px; height: 50px; }
    .section--service-entry .service-order-panel .field { margin-bottom: .35rem; }
    .section--service-entry .service-summary-field textarea { min-height: 44px; }
    .section--service-entry .repair-order { min-height: 36px; max-height: 76px; }
    .section--service-entry .service-order-panel,
    .section--service-entry .service-catalog-panel { min-height: 380px; }
}

.service-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 1.25rem; align-items: start; }
.panel h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.search-box { position: relative; margin-bottom: 1rem; }
.search-box input { padding-right: 2.4rem; }
.search-box__icon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); opacity: .5; }
.service-catalog-panel { display: grid; gap: 1rem; }
.service-catalog-panel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.service-catalog-panel__intro { max-width: 62ch; margin: .2rem 0 0; font-size: .78rem; }
.service-search-entry { margin: 0; }
.service-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: stretch; margin-bottom: .35rem; }
.service-part-combobox { position: relative; min-width: 0; }
.service-part-combobox input { width: 100%; height: 100%; min-height: 46px; padding-inline: .85rem; }
.service-part-suggestions { top: calc(100% + .35rem); }
.service-part-suggestion .vin-suggestion__main strong { display: block; overflow: hidden; color: var(--ink); font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.service-part-suggestion .vin-suggestion__main > span { color: var(--muted); font-size: .74rem; }
.service-part-suggestion .vin-suggestion__meta { align-items: center; }
.service-search-entry__button { white-space: nowrap; min-width: 108px; }
.parts-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.parts-category-card { border: 1px solid var(--line); border-radius: 16px; padding: 1rem; background: color-mix(in srgb, var(--card) 78%, var(--bg-muted) 22%); display: grid; gap: .85rem; min-width: 0; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.parts-category-card__media { display: grid; place-items: center; aspect-ratio: 1 / 1; min-height: 0; padding: .75rem; border: 1px solid color-mix(in srgb, var(--line) 85%, #fff); border-radius: 14px; background: #fff; overflow: hidden; }
.parts-category-card__image { width: 100%; height: 100%; object-fit: contain; display: block; }
.parts-category-card__head { display: flex; align-items: flex-start; gap: .8rem; }
.parts-category-card__head h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.parts-category-card__head p { margin: .2rem 0 0; }
.parts-category-card__list { display: grid; gap: .55rem; }
.part-option { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.part-option:hover, .part-option:focus-visible { border-color: var(--green-500); background: var(--bg-muted); text-decoration: none; outline: none; transform: translateY(-1px); }
.part-option__name { min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.part-option__action { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; padding: .38rem .55rem; border-radius: 999px; background: rgba(22,163,74,.12); color: var(--green-600); font-size: .75rem; font-weight: 700; }
.part-option--static { cursor: default; }
.part-option--static:hover { transform: none; }
.part-option__delete-form { margin: 0; flex: 0 0 auto; }
.part-option__delete { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-muted); color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.part-option__delete:hover, .part-option__delete:focus-visible { background: rgba(220,38,38,.14); color: #dc2626; outline: none; }
.part-option.is-added { animation: part-option-added .45s ease-out; }
.parts-category-card.is-updated { border-color: var(--green-500); box-shadow: 0 0 0 1px rgba(22,163,74,.12), 0 12px 24px rgba(6,24,43,.08); }
.parts-category-card__empty { margin: 0; }

/* ---- Parts & services catalog page: two-column layout (add form on the left) ---- */
.parts-layout { display: grid; grid-template-columns: 360px 1fr; gap: 1.25rem; align-items: start; }
.parts-layout__side, .parts-layout__main { min-width: 0; }
@media (max-width: 900px) {
    .parts-layout { grid-template-columns: 1fr; }
}

.parts-add-card { padding: 1.25rem; }
.parts-add-card h2 { margin: 0 0 .9rem; }
.parts-add-form { display: flex; flex-direction: column; gap: 1rem; }
.parts-add-form .field { margin: 0; }
.parts-add-form.is-submitting .parts-add-form__submit { opacity: .82; }
.parts-add-form__actions { display: flex; align-items: center; gap: .65rem; }
.parts-add-form__submit { height: 46px; width: 100%; }
.parts-add-card .field__hint { margin: .8rem 0 0; }
.parts-empty-note { margin-bottom: 1rem; }
.parts-inline-status,
.parts-submit-status { min-height: 1.2rem; margin: .32rem 0 0; font-size: .82rem; color: var(--muted); }
.parts-inline-status.is-warning,
.parts-submit-status.is-warning { color: #b45309; }
.parts-inline-status.is-success,
.parts-submit-status.is-success { color: var(--green-600); }
.parts-quick-categories { display: flex; flex-wrap: wrap; gap: .45rem; }
.parts-quick-category { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.parts-quick-category:hover,
.parts-quick-category:focus-visible { border-color: var(--green-500); background: var(--bg-muted); outline: none; transform: translateY(-1px); }
.parts-quick-category.is-active { border-color: var(--green-500); background: rgba(22,163,74,.12); color: var(--green-700); }
.parts-quick-category__count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: rgba(6,24,43,.08); color: inherit; font-size: .72rem; font-weight: 800; }
.parts-category-select { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; }
.parts-category-select:focus { outline: 2px solid rgba(22,163,74,.18); border-color: var(--green-500); }
.parts-category-preview { display: flex; align-items: center; gap: .85rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 82%, var(--bg-muted) 18%); }
.parts-category-preview__media { width: 84px; height: 84px; border-radius: 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--line) 85%, #fff); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.parts-category-preview__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.parts-category-preview__body { min-width: 0; }
.parts-category-preview__body strong { display: block; font-size: .9rem; line-height: 1.3; }
.parts-category-preview__body p { margin: .18rem 0 0; }
.parts-bulk-entry { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 84%, var(--bg-muted) 16%); padding: .75rem .85rem; }
.parts-bulk-entry summary { cursor: pointer; font-weight: 700; list-style: none; }
.parts-bulk-entry summary::-webkit-details-marker { display: none; }
.parts-bulk-entry[open] summary { margin-bottom: .8rem; }
.parts-bulk-entry textarea { width: 100%; min-height: 120px; resize: vertical; }
@media (prefers-reduced-motion: reduce) {
    .parts-category-card,
    .parts-quick-category,
    .part-option { transition: none; }
    .parts-category-card.is-updated,
    .part-option.is-added { animation: none; }
}
/* Repair order: compact wrapping chips. flex-shrink:0 is load-bearing — without it the
   box shrinks below its content inside the column-flex panel and items overlap the field below. */
.repair-order { list-style: none; margin: 0 0 1.2rem; padding: .5rem; min-height: 56px; flex: 0 0 auto; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); display: flex; flex-wrap: wrap; align-content: flex-start; gap: .35rem; }
.repair-order__empty { width: 100%; text-align: center; margin: auto; }
.repair-order__item { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .28rem .3rem .28rem .6rem; background: var(--bg-muted); border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; }
.repair-order__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repair-order__remove { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1; }
.repair-order__remove:hover { background: rgba(220,38,38,.14); color: #b42318; }
/* Newly added chip pops in. */
.repair-order__item.is-new { animation: repair-order-pop .32s ease-out; }
@keyframes repair-order-pop {
    0% { opacity: 0; transform: scale(.7); }
    60% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .repair-order__item.is-new { animation: none; }
}
.service-order-panel { position: sticky; top: calc(68px + 1rem); }
.service-photo-field { margin: 0 0 1rem; }
.service-photo-field__head { display: grid; gap: .2rem; margin-bottom: .6rem; }
.service-photo-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.service-photo-slot { position: relative; display: grid; place-items: center; width: 84px; height: 84px; flex: 0 0 auto; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: color-mix(in srgb, var(--card) 72%, var(--bg-muted) 28%); cursor: pointer; overflow: hidden; transition: border-color .15s ease, background .15s ease; }
.service-photo-slot:hover, .service-photo-slot:focus-within { border-color: var(--green-500); background: var(--bg-muted); }
.service-photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-photo-slot img[hidden] { display: none; }
.service-photo-slot__placeholder { display: grid; justify-items: center; gap: .1rem; color: var(--muted); font-size: .62rem; line-height: 1.2; text-align: center; padding: .25rem; }
.service-photo-slot__plus { font-size: 1.1rem; line-height: 1; color: var(--green-600); }
.service-photo-slot.is-dragover { border-color: var(--green-500); border-style: solid; background: var(--green-100); }
.service-photo-slot__clear { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: none; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(6,24,43,.72); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }
.service-photo-slot.is-filled .service-photo-slot__clear { display: grid; }
.service-photo-slot.is-filled { border-style: solid; }
.service-photo-slot.is-filled .service-photo-slot__placeholder { display: none; }

.vehicle-photo-field { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vehicle-photo-field .service-photo-slot { width: 140px; height: 100px; border-radius: 12px; }
.check-inline { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--muted); cursor: pointer; }
.check-inline input { margin: 0; }
.service-ai-actions { display: grid; gap: .75rem; margin: .75rem 0 1rem; }
.service-title-field { margin-top: 0; }
.ai-note { background: var(--bg-muted); color: var(--muted); font-size: .84rem; font-weight: 550; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .9rem; margin: 0; }
.service-form-actions { display: flex; align-items: center; gap: .75rem; }
.service-ai-button { background: color-mix(in srgb, var(--blue-600) 10%, transparent); color: var(--blue-600); border: 1.5px solid color-mix(in srgb, var(--blue-600) 32%, var(--line-strong)); box-shadow: none; }
.service-ai-button:hover { background: color-mix(in srgb, var(--blue-600) 16%, transparent); border-color: color-mix(in srgb, var(--blue-600) 46%, var(--line-strong)); }
.service-confirm-button { flex: 1 1 auto; }

/* ---------- Service correction window (15 minutes after saving) ---------- */
.edit-window-banner { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; border-left: 4px solid var(--green-500); }
.edit-window-banner p { margin: .15rem 0 0; }
.edit-window-banner__icon { font-size: 1.3rem; line-height: 1; }
.edit-window-banner__action { margin-left: auto; }
.edit-window-banner__actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.edit-window-banner__actions form { margin: 0; }
.edit-window-banner.is-urgent { border-left-color: #d97706; }
.edit-window-banner.is-urgent [data-edit-countdown] { color: #b45309; }
.edit-window-banner.is-expired { border-left-color: var(--line-strong); opacity: .7; }
[data-edit-countdown] { font-variant-numeric: tabular-nums; }

.repair-order--edit { min-height: 52px; max-height: none; }
.workshop-service-edit__actions { justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.edit-part-add { margin-top: .6rem; grid-template-columns: minmax(0, 1fr) auto; }
.edit-photo-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
.edit-photo { position: relative; display: block; width: 108px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; }
.edit-photo img { display: block; width: 100%; height: 78px; object-fit: cover; }
.edit-photo__remove { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem; background: var(--bg-muted); font-size: .72rem; font-weight: 650; }
.edit-photo:has(input:checked) { border-color: #dc2626; opacity: .55; }
.edit-photo:has(input:checked) .edit-photo__remove { background: rgba(220,38,38,.16); color: #b42318; }

.next-inspection { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .8rem; }

/* ---------- Workshop vehicles ---------- */
.vehicles-table__actions { white-space: nowrap; text-align: right; }
.vehicles-table__actions .btn + .btn { margin-left: .35rem; }
.badge--muted { background: var(--bg-muted); color: var(--muted); margin-left: .4rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Profile ---------- */
.profile-card__head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; }
.profile-card__avatar { width: 64px; height: 64px; border-radius: 16px; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-stats { display: flex; gap: 2.5rem; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.profile-stats__num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--navy-800); }
.profile-stats__label { display: block; font-size: .85rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.chip { background: var(--bg-muted); color: var(--navy-700); font-size: .85rem; font-weight: 600; padding: .35em .9em; border-radius: 999px; }
.profile-card__contact { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.workshop-public-profile .container { max-width: var(--maxw); }
.workshop-public-layout { display: grid; gap: 1rem; align-items: start; }
.workshop-public-layout { grid-template-columns: minmax(0, 1fr) 360px; }
/* The hero is short and the sidebar is tall, so the main column carries the map
   too — otherwise the page shows a column of nothing beside the contact card. */
.workshop-public-main,
.workshop-public-side { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 901px) {
  /* Deliberately no max-height/overflow here. Giving the column its own scroll
     box meant the wheel did nothing while the pointer was over it — the box had
     nothing to scroll, and overscroll-behavior stopped the page taking over. */
  .workshop-public-side { position: sticky; top: calc(var(--site-header-h) + 1rem); align-self: start; }
}
.workshop-public-hero,
.workshop-public-contact-card,
.workshop-public-hours-card,
.workshop-public-map-card,
.workshop-public-feedback-card { padding: 1.2rem; }
.workshop-public-hero { display: grid; gap: 1rem; }
.workshop-public-hero__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.workshop-public-hero__avatar { width: 132px; height: 132px; border-radius: 22px; background: linear-gradient(180deg, var(--navy-700), var(--navy-900)); color: #fff; display: grid; place-items: center; font-size: 3rem; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
/* An upload is finished artwork — a logo, a shopfront photo — with its own
   aspect ratio. Forcing it into a fixed square left white margins around
   anything that was not square, so the box shrink-wraps the image instead and
   only caps how large it may get. The radius lives on the container because
   the later `> img { border-radius: inherit }` rule would override it here. */
.workshop-public-hero__avatar--logo { width: auto; height: auto; min-width: 0; background: none; border: 0; padding: 0; border-radius: 12px; }
.workshop-public-hero__avatar--logo img { width: auto; height: auto; max-width: 180px; max-height: 132px; }
.workshop-public-hero__avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.workshop-public-hero__copy h1 { margin: .2rem 0 .4rem; }
.workshop-public-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center; margin-bottom: .65rem; }
.workshop-public-hero__location { color: var(--muted); font-size: .92rem; font-weight: 600; }
.workshop-public-hero__lead { margin: 0; color: var(--muted); max-width: 70ch; white-space: pre-line; }
.workshop-public-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.workshop-public-stat { border: 1px solid var(--line-strong); border-radius: 16px; padding: .95rem 1rem; background: var(--bg-muted); min-width: 0; }
.workshop-public-stat__value { display: block; color: var(--ink); font-size: 1.7rem; font-weight: 850; line-height: 1.05; letter-spacing: -.02em; }
.workshop-public-stat__label { display: block; margin-top: .3rem; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.workshop-public-stat .stars { font-size: .95rem; }
.workshop-public-section-head { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.workshop-public-section-head h2 { margin: 0 0 .2rem; font-size: 1rem; }
.workshop-public-contact-list { margin: 0; display: grid; gap: .85rem; }
.workshop-public-contact-list > div { display: grid; gap: .18rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.workshop-public-contact-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.workshop-public-contact-list dt { color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.workshop-public-contact-list dd { margin: 0; color: var(--ink); font-size: .95rem; overflow-wrap: anywhere; }
.workshop-public-contact-actions { display: grid; gap: .55rem; margin-top: 1rem; }
.workshop-public-contact-actions .btn { width: 100%; justify-content: center; }
.workshop-public-directions { margin-top: 0; }
.workshop-public-contact-note { margin: 0; color: var(--muted); font-size: .92rem; }
.workshop-public-promotions-card { padding: 1.2rem; }
.workshop-public-promotion-list { display: grid; gap: .8rem; }
.workshop-public-promotion { border: 1px solid var(--line-strong); border-radius: 16px; padding: .95rem 1rem; background: var(--bg-muted); display: grid; gap: .45rem; }
.workshop-public-promotion__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; }
.workshop-public-promotion__head strong { font-size: .95rem; }
.workshop-public-promotion__summary { margin: 0; color: var(--ink); font-size: .86rem; font-weight: 600; }
.workshop-public-promotion__meta { display: flex; flex-wrap: wrap; gap: .45rem .85rem; color: var(--muted); font-size: .76rem; }
.booking-workshop-callout { margin-bottom: 1rem; }
.workshop-public-map { width: 100%; height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-muted); }
.workshop-public-map--empty { display: grid; place-items: center; padding: 1rem; text-align: center; }
.workshop-public-feedback-list { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.workshop-public-feedback-item { border: 1px solid var(--line-strong); border-radius: 16px; padding: 1rem; background: var(--bg-muted); }
.workshop-public-feedback-item .feedback { margin: .5rem 0 .65rem; }
@media (max-width: 1100px) {
  .workshop-public-layout { grid-template-columns: 1fr 320px; }
}
@media (max-width: 900px) {
  .workshop-public-layout { grid-template-columns: 1fr; }
  .workshop-public-map { height: 320px; }
}
@media (max-width: 600px) {
  .workshop-public-hero,
  .workshop-public-contact-card,
  .workshop-public-hours-card,
    .workshop-public-map-card,
  .workshop-public-feedback-card { padding: 1rem; }
  .workshop-public-hero__top { grid-template-columns: 1fr; }
  .workshop-public-hero__avatar { width: 104px; height: 104px; font-size: 2.4rem; }
  .workshop-public-hero__avatar--logo img { max-width: 140px; max-height: 104px; }
  .workshop-public-stats { grid-template-columns: 1fr; }
  .workshop-public-map { height: 280px; }
}

/* ---------- Buyer paywall ---------- */
.buyer-page { background: var(--bg); }
.buyer-strip { text-align: center; margin-bottom: 1.5rem; }
.buyer-strip h1 { margin: .2rem 0; }
.buyer-record { margin-bottom: 1rem; }
.buyer-record__title { margin: .5rem 0 .3rem; font-size: 1.15rem; }
.buyer-record--locked { position: relative; overflow: hidden; }
.buyer-record--locked .record-detail__head,
.buyer-record--locked .buyer-record__title { filter: blur(4px); user-select: none; pointer-events: none; opacity: .75; }
.buyer-record__blur { filter: blur(4px); user-select: none; color: var(--muted); margin: 0; }
.lock-panel { text-align: center; padding: 2.2rem 1.5rem; border: 1.5px solid var(--line-strong); }
.lock-panel__icon { font-size: 2rem; margin-bottom: .3rem; }
.lock-panel h2 { margin-bottom: .3rem; }
.lock-panel .btn { margin: 1rem 0 .6rem; }
.stub-tag { color: var(--amber-600); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6,24,43,.55); backdrop-filter: blur(2px); }
.modal__panel { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; box-shadow: var(--shadow-lg); }
.modal__close { position: absolute; top: .7rem; right: .9rem; border: none; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.qr { width: 180px; height: 180px; margin: 1rem auto; display: grid; place-items: center; }
.qr canvas, .qr img { width: 100%; height: 100%; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { flex: 1; font-size: .85rem; }

/* ---------- Errors ---------- */
.error-code { font-size: 5rem; font-weight: 800; color: var(--navy-800); margin: 0; }

/* ---------- Administrator dashboard ---------- */
.admin-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; }
.admin-header h1 { margin-bottom: .35rem; }
.admin-header .lead { margin: 0; color: var(--muted); }
.admin-header--action-only { justify-content: flex-end; }
.admin-summary { grid-template-columns: repeat(6, 1fr); }
.admin-summary .summary-card { padding: 1rem; }
.admin-summary .summary-card__value { font-size: 1.55rem; }
.admin-search-card, .admin-table-card { margin-bottom: 1.4rem; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-section-heading h2 { margin: 0; }
.admin-section-heading p { margin: .25rem 0 0; }
.admin-search-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 1rem; }
.admin-search-form .field { margin: 0; }
.admin-search-form .form__actions { margin: 0; }
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9rem; }
.admin-table th, .admin-table td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { background: var(--bg-muted); color: var(--navy-800); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }

/* Clickable directory rows. The name stays a real anchor (focusable, middle-
   clickable, shows its href on hover); the ::after just stretches its hit area
   across the row. `position: relative` on <tr> is honoured by current browsers,
   and if one ever ignores it the anchor itself still works -- only the
   whole-row hit area is lost. */
.admin-table tr.admin-row-link { position: relative; }
.admin-table tr.admin-row-link:hover { background: var(--bg-muted); }
.admin-row-link__anchor { font-weight: 700; color: var(--ink); }
.admin-row-link__anchor::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.admin-row-link__anchor:hover { color: var(--green-600); text-decoration: none; }
.admin-row-link__anchor code { background: none; padding: 0; color: inherit; font-weight: 700; }
:root[data-theme="dark"] .admin-row-link__anchor code { color: inherit; }
.admin-row-link__anchor:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
/* Keep real controls inside a row above the stretched overlay. */
.admin-table tr.admin-row-link a:not(.admin-row-link__anchor),
.admin-table tr.admin-row-link button { position: relative; z-index: 2; }

/* ---------- Admin: workshop detail ---------- */
.admin-workshop-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.admin-workshop-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.admin-workshop-avatar { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 1.5rem; font-weight: 800; }
.admin-workshop-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.admin-workshop-avatar:has(img) { background: #fff; }
.admin-workshop-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.admin-workshop-title h1 { margin: 0; font-size: 1.5rem; }
.admin-workshop-head .muted { margin: .25rem 0 0; font-size: .88rem; }
.admin-workshop-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.admin-detail-list { margin: 0; display: grid; gap: .1rem; }
.admin-detail-list > div { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.admin-detail-list > div:last-child { border-bottom: 0; }
.admin-detail-list dt { color: var(--muted); font-size: .84rem; font-weight: 650; }
.admin-detail-list dd { margin: 0; color: var(--ink); font-size: .9rem; word-break: break-word; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.admin-table-card h3 { margin: 1.3rem 0 .3rem; font-size: .95rem; }

/* ---------- Owner: embeddable vehicle badge ---------- */
.badge-preview { display: grid; gap: .6rem; justify-items: start; margin-bottom: 1.1rem; }
.badge-preview__img { max-width: 100%; height: auto; border-radius: 14px; }
.badge-preview .muted { margin: 0; }

@media (max-width: 600px) {
    .admin-detail-list > div { grid-template-columns: 1fr; gap: .1rem; }
    .admin-workshop-actions { width: 100%; }
    .admin-workshop-actions .btn { flex: 1; justify-content: center; }
}
.admin-actions-cell { min-width: 220px; }
.admin-inline-form { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.admin-inline-form:last-child { margin-bottom: 0; }
.admin-inline-form input { min-width: 0; width: 130px; padding: .45rem .55rem; font-size: .78rem; }
.admin-inline-form .btn { flex-shrink: 0; padding: .48rem .65rem; font-size: .72rem; }
.admin-lower-grid { grid-template-columns: 1.35fr 1fr; }
.admin-login-card { max-width: 520px; margin: 2rem auto; }
.admin-login-card .lead { color: var(--muted); }
.admin-directory-header { align-items: center; }
.admin-directory-count { min-width: 96px; padding: .75rem 1rem; text-align: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.admin-directory-count strong { display: block; color: var(--navy-800); font-size: 1.45rem; line-height: 1.1; }
.admin-directory-count span { display: block; margin-top: .15rem; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.admin-search-form--directory { grid-template-columns: minmax(0, 1fr) auto; }
.admin-search-form--directory .form__actions { display: flex; gap: .5rem; }
.admin-status { display: inline-flex; align-items: center; padding: .28rem .5rem; border-radius: 999px; background: var(--bg-muted); color: var(--muted); font-size: .75rem; font-weight: 700; }
.admin-status--verified, .admin-status--good, .admin-status--paid { color: var(--green-600); background: rgba(30, 150, 108, .12); }
.admin-status--pending, .admin-status--needs_attention { color: var(--amber-600); background: rgba(210, 150, 20, .14); }
.admin-status--overdue, .admin-status--damaged, .admin-status--written_off { color: var(--red-600); background: rgba(220, 38, 38, .1); }
.admin-empty-state { padding: 1.5rem .7rem .25rem; color: var(--muted); text-align: center; }
.admin-owner-identity { display: flex; align-items: center; gap: .7rem; }
.admin-owner-avatar { width: 34px; height: 34px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--navy-800); color: #fff; font-size: .9rem; font-weight: 800; }
.admin-owner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finance-summary { grid-template-columns: repeat(4, 1fr); }
.summary-card--link { color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.summary-card--link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.finance-note { margin: -.55rem 0 1.35rem; }
.finance-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.finance-action-card { display: grid; gap: .3rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.finance-action-card:hover { color: var(--text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.finance-action-card > span { font-size: 1.15rem; }
.finance-action-card small { color: var(--muted); }

/* ---------- Responsive ---------- */
/* The inner shell's 244px sidebar eats width, so the two-panel service layout
   needs to collapse earlier than the public pages do. */
@media (max-width: 1180px) {
    .admin-content .service-grid { grid-template-columns: 1fr; }
    .admin-content .service-order-panel { position: static; }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    /* Once the hero collapses to one column there's no side panel to leave room for,
       so let the lookup card use the full column width instead of its desktop cap. */
    .lookup-card { max-width: none; }
    .persona-grid, .summary-cards, .trust-grid, .report-grid { grid-template-columns: 1fr; }
    .vehicle-facts { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
    .service-grid, .two-col { grid-template-columns: 1fr; }
    .service-order-panel { position: static; }
    .parts-catalog { grid-template-columns: 1fr; }
    .page-grid, .contact-grid { grid-template-columns: 1fr; }
    .site-footer__main { grid-template-columns: 1fr; gap: 2.5rem; }
    .site-footer__brand { max-width: 560px; }
    .site-footer__bar-inner { grid-template-columns: 1fr auto; }
    .site-footer__bottom-links { justify-content: flex-start; grid-row: 2; }
    .site-footer__tools { grid-column: 2; grid-row: 1 / span 2; }
}

/* Public nav becomes a slide-in panel. Raised to 900px: the top-level bar
   (Find a workshop / Reports / Workshops / FAQ / Company + account) stops
   fitting well before the old 600px cutoff. */
@media (max-width: 900px) {
    /* Public nav becomes a slide-in panel (previously the links just disappeared). */
    .site-nav-toggle { display: grid; }
    .site-header__inner { gap: .6rem; }
  .site-header .brand__logo { height: 48px; }
    .site-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: 300px; max-width: 80vw; flex-direction: column; align-items: stretch; gap: .15rem; padding: 4rem 1rem 1.25rem; background: var(--card); border-left: 1px solid var(--line); overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; }
    .site-header.is-nav-open .site-nav { transform: none; box-shadow: -12px 0 40px rgba(6,24,43,.28); }
    .site-nav__close { display: grid; }
    .site-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(6,24,43,.5); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    .site-header.is-nav-open .site-nav-backdrop { opacity: 1; pointer-events: auto; }
    .site-nav a:not(.btn) { display: block; padding: .8rem .6rem; border-radius: 8px; font-size: 1rem; }
    .site-nav__menu { width: 100%; }
    .site-nav__menu > summary { width: 100%; justify-content: space-between; min-height: 44px; }
    .site-nav__menu-trigger--account { padding-left: .55rem; }
    .site-nav__menu-trigger--link { padding: .8rem .6rem; border-radius: 8px; font-size: 1rem; }
    .site-nav__menu-trigger--link:hover { background: var(--bg-muted); }
    .site-nav__menu-panel { position: static; width: 100%; min-width: 0; margin-top: .35rem; box-shadow: none; }
    .site-nav__menu-panel a { padding: .8rem .7rem; }
    .site-nav__signout-link { width: 100%; justify-content: center; }
    .site-header__identity { padding: .6rem; }
    .site-nav__utility { flex-direction: column; align-items: stretch; gap: .15rem; margin-left: 0; margin-top: .6rem; padding-left: 0; padding-top: .8rem; border-left: 0; border-top: 1px solid var(--line); }
    .site-nav a:not(.btn):hover { background: var(--bg-muted); text-decoration: none; }
    .site-nav .btn { margin-top: .5rem; justify-content: center; }
    .site-nav .language-menu { align-self: flex-start; margin-bottom: .4rem; }
    .site-nav .language-menu__list { right: auto; left: 0; }
    .site-nav .language-menu__option { display: flex !important; }
}

@media (max-width: 600px) {
    .section { padding: 2rem 0; }
    .admin-flash-stack { left: 1rem; right: 1rem; width: auto; top: calc(68px + .75rem); }
    .live-notification-stack { left: 1rem; right: 1rem; width: auto; top: 4.35rem; }
    .field-row { grid-template-columns: 1fr; }
    /* Three narrow stat columns wrap their labels unevenly on real phone widths —
       stack them instead, each stat on its own row with a divider. */
    .trust-grid { grid-template-columns: 1fr; gap: 0; text-align: left; }
    .trust-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .trust-stat:last-child { border-bottom: 0; }
    .trust-stat__label { margin-top: 0; text-align: right; }
    .service-search-row, .service-form-actions { grid-template-columns: 1fr; display: grid; }
    .service-search-entry__button, .service-form-actions .btn { width: 100%; }
    .service-order-panel { position: static; }
    .parts-category-card { padding: .9rem; }
    .lookup-card__row { flex-direction: column; }
    .vehicle-header__title-row { align-items: flex-start; }
    .vehicle-header__links { gap: .35rem; }
    .vehicle-header__actions { width: 100%; }
    .vehicle-header__actions .btn { flex: 1; }
    .group-tiles { grid-template-columns: repeat(3, 1fr); }
    .cookie-banner__inner { align-items: stretch; flex-direction: column; gap: .7rem; }
    .cookie-banner__actions { flex-wrap: wrap; }
    .site-footer { padding-top: 2.5rem; }
    .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .site-footer__column:last-child { grid-column: 1 / -1; }
    .site-footer__bar { margin-top: 2.5rem; padding: 1rem 0; }
    .site-footer__bar-inner { grid-template-columns: 1fr auto; gap: .8rem; }
    .site-footer__bottom-links { grid-column: 1 / -1; grid-row: 2; }
    .site-footer__tools { grid-column: 2; grid-row: 1; }
}

@media (max-width: 900px) {
    .admin-summary { grid-template-columns: repeat(3, 1fr); }
    .finance-summary { grid-template-columns: repeat(2, 1fr); }
    .finance-action-grid { grid-template-columns: 1fr; }
    .admin-search-form { grid-template-columns: 1fr 1fr; }
    .admin-search-form--directory { grid-template-columns: 1fr auto; }
    .admin-search-form .form__actions { grid-column: 1 / -1; }
    .admin-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .admin-header { align-items: flex-start; flex-direction: column; }
    .admin-summary { grid-template-columns: repeat(2, 1fr); }
    .admin-search-form { grid-template-columns: 1fr; }
    .admin-search-form .form__actions { grid-column: auto; }
}

.admin-login-help { margin: 1rem 0 0; text-align: center; font-size: .9rem; }
.admin-create-form { display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap: 1rem; }
.admin-create-form .field { margin: 0; }
.admin-create-form .form__actions { margin: 0; }
.admin-accounts-table { min-width: 1040px; }
.admin-account-form { display: grid; gap: .4rem; min-width: 180px; }
.admin-account-form input, .admin-accounts-table select, .admin-password-form input { padding: .45rem .55rem; font-size: .78rem; }
.admin-password-form { display: flex; align-items: center; gap: .35rem; min-width: 190px; }
.admin-password-form input { width: 120px; min-width: 0; }
.admin-accounts-table .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
    .admin-create-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .admin-create-form { grid-template-columns: 1fr; }
}

/* =====================================================================
   Compact backend shell
   Dense, crisper navigation for admin/workshop/owner areas.
   ===================================================================== */
.admin-shell {
    display: grid;
    grid-template-columns: 198px 1fr;
    min-height: 100vh;
    background: var(--bg);
    isolation: isolate;
    --r-sm: 5px;
    --r: 8px;
    --r-lg: 12px;
}
.admin-sidebar {
    background: linear-gradient(180deg, #1a2128 0%, #141a20 100%);
    color: #c7d3e0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 70;
    align-self: start;
    height: 100vh;
    border-right: 1px solid rgba(255,255,255,.05);
    overflow: visible;
}
.admin-sidebar__brand {
    display: flex;
    /* The logo is ~4:1, so in a 198px rail the tier label has to sit under it
       rather than beside it. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .3rem;
    min-height: 52px;
    padding: .62rem .85rem;
    font-weight: 800;
    color: #fff;
    font-size: .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-sizing: border-box;
}
.admin-sidebar__brand:hover { text-decoration: none; color: #fff; }
.admin-sidebar__brand .brand__mark { width: 28px; height: 28px; border-radius: 4px; background: #2f7fc1; color: #fff; font-size: .72rem; }
.admin-sidebar__brand small { display: block; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7f93a8; }
.admin-sidebar__brand-sub {
    flex: 0 0 auto; font-size: .56rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #7f93a8; line-height: 1;
}
.admin-sidebar__brandrow { display: flex; align-items: center; justify-content: space-between; }
.admin-sidebar__brandrow .admin-sidebar__brand { flex: 1; min-width: 0; }
.admin-sidebar__nav { display: flex; flex-direction: column; padding: .42rem .32rem .5rem; gap: .45rem; flex: 1; overflow: visible; }
.admin-nav-section { display: grid; gap: .14rem; position: relative; }
.admin-nav-label { padding: .18rem .42rem; margin: 0; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: #718396; font-weight: 800; }
.admin-nav-section__meta { margin: 0 .42rem .15rem; color: #8395a8; font-size: .67rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-nav-stack { display: grid; gap: .08rem; }
.admin-nav-link,
.admin-nav-menu__summary,
.admin-nav-sublink {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .58rem;
    width: 100%;
    min-height: 34px;
    padding: .42rem .54rem;
    border-radius: 6px;
    color: #b8c4d1;
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.2;
}
.admin-nav-link:hover,
.admin-nav-menu__summary:hover,
.admin-nav-sublink:hover { background: rgba(107,167,240,.08); color: #eef5fb; text-decoration: none; }
.admin-nav-link.is-active,
.admin-nav-menu__summary.is-active,
.admin-nav-sublink.is-active {
    background: linear-gradient(90deg, rgba(47,127,193,.9), rgba(47,127,193,.78));
    color: #fff;
    box-shadow: inset 2px 0 0 rgba(255,255,255,.18);
}
.admin-nav-link__icon { width: 16px; height: 16px; display: grid; place-items: center; color: #98adc3; }
.admin-nav-link:hover .admin-nav-link__icon,
.admin-nav-menu__summary:hover .admin-nav-link__icon,
.admin-nav-sublink:hover .admin-nav-link__icon,
.admin-nav-link.is-active .admin-nav-link__icon,
.admin-nav-menu__summary.is-active .admin-nav-link__icon,
.admin-nav-sublink.is-active .admin-nav-link__icon { color: currentColor; }
.admin-nav-link__icon-svg,
.admin-nav-menu__chevron-icon { width: 16px; height: 16px; display: block; }
.admin-nav-link__copy { min-width: 0; display: grid; gap: .06rem; }
.admin-nav-link__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-link__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.68); font-size: .65rem; font-weight: 600; }
.admin-nav-link.is-active .admin-nav-link__meta,
.admin-nav-menu__summary.is-active .admin-nav-link__meta { color: rgba(255,255,255,.82); }
.admin-nav-link__badge {
    min-width: 16px;
    height: 16px;
    padding: 0 .28rem;
    border-radius: 4px;
    background: rgba(255,255,255,.12);
    color: inherit;
    font-size: .62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.admin-nav-menu { margin: 0; position: relative; }
.admin-nav-menu > summary { list-style: none; cursor: pointer; }
.admin-nav-menu > summary::-webkit-details-marker { display: none; }
.admin-nav-menu__chevron { display: grid; place-items: center; color: #6f8398; transition: transform .16s ease, color .16s ease; }
.admin-nav-menu[open] > .admin-nav-menu__summary .admin-nav-menu__chevron { transform: rotate(90deg); color: currentColor; }
.admin-nav-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + .36rem);
    z-index: 120;
    width: 220px;
    padding: .32rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px;
    background: #232a31;
    box-shadow: 0 14px 32px rgba(0,0,0,.34);
}
.admin-nav-menu[open] > .admin-nav-submenu { display: grid; gap: .08rem; }
.admin-nav-submenu::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -6px;
    width: 10px;
    height: 10px;
    background: #232a31;
    border-left: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform: rotate(45deg);
}
.admin-nav-sublink { min-height: 32px; padding: .44rem .56rem; font-size: .79rem; color: #a9b7c6; background: transparent; }
.admin-nav-sublink .admin-nav-link__icon { width: 14px; height: 14px; }
.admin-nav-sublink .admin-nav-link__icon-svg { width: 14px; height: 14px; }
.admin-nav-sep { height: 1px; background: rgba(255,255,255,.08); margin: .18rem .42rem 0; }
.admin-nav-link--utility { color: #c5d1dd; }

.admin-sidebar__foot {
    min-height: 78px;
    padding: .72rem .85rem .8rem;
    font-size: .7rem;
    color: #7c8ea1;
    border-top: 1px solid rgba(255,255,255,.08);
    display: grid;
    align-content: center;
    gap: .55rem;
    box-sizing: border-box;
}
.admin-sidebar__foot-name { color: #d7e1eb; }
.admin-sidebar__foot-link { justify-content: center; min-height: 30px; }
.admin-sidebar__preferences { display: grid; gap: .35rem; padding-bottom: .6rem; margin-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-sidebar__preferences-label { color: #71869b; font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-sidebar__preferences-tools { display: flex; align-items: center; gap: .35rem; min-height: 28px; }
.admin-sidebar__preferences .language-menu summary,
.admin-sidebar__preferences .theme-toggle,
.admin-sidebar__preferences .pwa-install-button {
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
}
.admin-sidebar__preferences .language-menu summary { padding: 0 .48rem !important; font-size: .7rem !important; }
.admin-sidebar__preferences .theme-toggle,
.admin-sidebar__preferences .pwa-install-button { width: 28px !important; min-width: 28px !important; }

.admin-body { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 52px;
    padding: .55rem .9rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
}
.admin-topbar__title { font-weight: 800; color: var(--ink); font-size: 1.08rem; letter-spacing: -.01em; margin: 0; }
.admin-topbar__heading { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.admin-topbar__action {
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    min-height: 28px;
    padding: 0 .55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--green-600);
    background: var(--bg-muted);
    font-size: .74rem;
    font-weight: 750;
    white-space: nowrap;
}
.admin-topbar__action:hover { color: var(--green-700); text-decoration: none; }
.admin-topbar__tools { display: flex; align-items: center; gap: .35rem; }
.admin-topbar .theme-toggle,
.admin-topbar .language-menu summary,
.admin-topbar .topbar-bell,
.admin-topbar__user,
.admin-topbar__user-dropdown,
.admin-topbar__user-dropdown a,
.admin-menu-toggle { border-radius: 6px !important; }
.admin-topbar .theme-toggle { border-color: var(--line-strong); background: var(--bg-muted); color: var(--ink); }
.admin-topbar .language-menu summary { background: var(--bg-muted); height: 30px; }
.admin-topbar__user {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 30px;
    padding: 0 .2rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}
.admin-topbar__user-menu { position: relative; }
.admin-topbar__user-menu summary { list-style: none; cursor: pointer; }
.admin-topbar__user-menu summary::-webkit-details-marker { display: none; }
.admin-topbar__user-dropdown { position: absolute; right: 0; top: calc(100% + .38rem); min-width: 144px; padding: .25rem; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-lg); }
.admin-topbar__user-dropdown a { display: block; padding: .5rem .6rem; color: var(--ink); font-size: .82rem; font-weight: 600; }
.admin-topbar__user-dropdown a:hover { background: var(--bg-muted); text-decoration: none; }
.admin-topbar__avatar { width: 30px; height: 30px; border-radius: 4px; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; overflow: hidden; }
.admin-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-content { padding: .85rem 1rem 1.2rem; }
.admin-content .section { padding: 0; }
.admin-content .container { max-width: none; padding: 0; }
.admin-content .admin-header .eyebrow { color: var(--green-600); }
.admin-content h1 { font-size: clamp(1.38rem, 2vw, 1.72rem); margin-bottom: .3rem; }
.admin-content h2 { font-size: 1.12rem; }
.admin-content .card { padding: 1rem; }
.admin-content .panel h2 { margin-bottom: .6rem; }
.admin-content .form .field { margin-bottom: .72rem; }
.admin-content .field-row { gap: .65rem; }
.admin-content .admin-header { margin-bottom: .85rem; }
.admin-content .summary-cards { margin-bottom: .95rem; }
.admin-content .mileage-card { margin-bottom: .95rem; }
.admin-content .admin-search-card,
.admin-content .admin-table-card { margin-bottom: .85rem; }
.admin-content .feedback-card { margin-bottom: .55rem; }
.admin-footer { margin-top: auto; min-height: 68px; padding: .85rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; box-sizing: border-box; }
.admin-footer a { color: var(--muted); font-weight: 600; }

.admin-shell .btn,
.admin-shell input,
.admin-shell select,
.admin-shell textarea,
.admin-shell .card,
.admin-shell .owner-vehicle-switcher,
.admin-shell .owner-vehicle-hero,
.admin-shell .owner-metric-strip,
.admin-shell .owner-timeline-filters,
.admin-shell .vehicle-sort-chip,
.admin-shell .vehicle-directory-card,
.admin-shell .account-head,
.admin-shell .topbar-notifications__panel,
.owner-switcher-modal,
.owner-switcher-result {
    border-radius: 6px !important;
}
.admin-shell .btn { padding: .72em 1.05em; }
.admin-shell input,
.admin-shell select,
.admin-shell textarea { border-radius: 5px; }
.admin-shell .card,
.admin-shell .vehicle-directory-card,
.admin-shell .owner-vehicle-hero,
.admin-shell .owner-metric-strip,
.admin-shell .owner-timeline-filters,
.admin-shell .account-head,
.owner-switcher-modal,
.owner-switcher-result { box-shadow: 0 1px 2px rgba(11, 36, 64, .07) !important; }
.admin-shell .topbar-bell { width: 30px; height: 30px; border-radius: 6px !important; }
.admin-shell .topbar-bell__badge { border-radius: 4px; min-width: 16px; height: 16px; line-height: 16px; top: -4px; right: -4px; }
.admin-shell .owner-vehicle-switcher { max-width: min(330px, 32vw); padding: .26rem .42rem; gap: .45rem; }
.admin-shell .owner-vehicle-switcher__icon { width: 28px; height: 28px; border-radius: 4px; }
.admin-shell .owner-vehicle-switcher__copy strong { font-size: .78rem; }
.admin-shell .owner-vehicle-switcher__copy small { font-size: .64rem; }
.admin-shell .owner-vehicle-switcher__chevron { font-size: .92rem; }
.owner-switcher-modal { padding: 1rem; }
.owner-switcher-result { padding: .55rem; }

.admin-menu-toggle { display: none; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line-strong); background: var(--bg-muted); color: var(--ink); cursor: pointer; }
.admin-menu-toggle__bars, .admin-menu-toggle__bars::before, .admin-menu-toggle__bars::after { display: block; width: 15px; height: 2px; border-radius: 1px; background: currentColor; content: ''; }
.admin-menu-toggle__bars { position: relative; }
.admin-menu-toggle__bars::before { position: absolute; top: -5px; }
.admin-menu-toggle__bars::after { position: absolute; top: 5px; }
.admin-sidebar__close { display: none; width: 34px; height: 34px; margin-right: .45rem; flex: 0 0 auto; place-items: center; border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.admin-sidebar__backdrop { display: none; }

@media (min-width: 901px) {
    .admin-shell .topbar-notifications__panel,
    .admin-shell .admin-topbar__user-dropdown { border-radius: 6px !important; }
}

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: 270px;
        max-width: 82vw;
        height: auto;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: none;
        overflow-y: auto;
    }
    .admin-sidebar__nav { overflow-y: visible; }
    .admin-nav-menu[open] > .admin-nav-submenu {
        position: static;
        width: auto;
        margin: .08rem 0 .18rem .92rem;
        padding: 0 0 0 .56rem;
        border: 0;
        border-left: 1px solid rgba(255,255,255,.09);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .admin-nav-submenu::before { display: none; }
    .admin-nav-link,
    .admin-nav-menu__summary,
    .admin-nav-sublink { min-height: 38px; font-size: .88rem; }
    .admin-shell.is-nav-open .admin-sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.5); }
    .admin-sidebar__backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6,24,43,.55); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    .admin-shell.is-nav-open .admin-sidebar__backdrop { opacity: 1; pointer-events: auto; }
    /* The one deliberate exception to the global [hidden] rule: this backdrop
       ships hidden and is never unhidden in the DOM — the drawer controls it
       entirely through opacity and pointer-events, so it has to keep painting. */
    .admin-sidebar__backdrop[hidden] { display: block !important; }
    .admin-menu-toggle { display: grid; }
    .admin-sidebar__close { display: grid; }
    .admin-topbar { padding: .52rem .75rem; gap: .45rem; }
    .admin-topbar__heading { gap: .48rem; min-width: 0; }
    .admin-topbar__title { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-topbar__action-label { display: none; }
    .admin-topbar__tools { gap: .3rem; flex: 0 0 auto; }
    .admin-topbar__user span:not(.admin-topbar__avatar) { display: none; }
    .admin-content { padding: .85rem .75rem 1.5rem; }
    .admin-footer { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

body.has-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar, .admin-sidebar__backdrop, .admin-nav-menu__chevron { transition: none; }
}


/* =====================================================================
   Dark theme
   ===================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1420;
    --bg-muted: #131f2e;
    --card: #16212f;
    --white: #16212f;
    --ink: #e7edf4;
    --muted: #98a8ba;
    --line: #24313f;
    --line-strong: #33455a;
    --blue-600: #6ba7f0;
    --green-600: #34d399;   /* readable as text/links on the dark surfaces */
    --green-700: #34d399;   /* same role on the dark chips */
    --green-100: #12301f;
    --amber-600: #e0a44c;   /* readable as text on the dark amber chips and bands */
    --amber-100: #33260f;
    --red-100: #3a1a17;
    --slate-600: #c2cfdd;
    --slate-100: #202c39;
    --violet-600: #c7a7ff;
    --violet-100: #2b1f44;
    --next-600: #9ccfff;
    --next-100: #162b42;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow: 0 6px 18px rgba(0,0,0,.55);
    --shadow-lg: 0 20px 55px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body { background: var(--bg); }

/* Surfaces that used literal white */
:root[data-theme="dark"] .btn--ghost,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .lookup-card,
:root[data-theme="dark"] .lookup-tab.is-active,
:root[data-theme="dark"] .persona-card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .record-row,
:root[data-theme="dark"] .group-tile,
:root[data-theme="dark"] .part-item,
:root[data-theme="dark"] .part-add { background: var(--card); }

/* Translucent chrome */
:root[data-theme="dark"] .site-header { background: rgba(11,20,32,.86); border-bottom-color: var(--line); }
:root[data-theme="dark"] .cookie-banner { background: rgba(16,25,37,.98); }
:root[data-theme="dark"] .lookup-tab { color: var(--muted); }
:root[data-theme="dark"] .field__hint { color: color-mix(in srgb, var(--muted) 52%, transparent); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: color-mix(in srgb, var(--muted) 50%, transparent); }


/* Strong text hard-coded to navy in the light theme */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .summary-card__value,
:root[data-theme="dark"] .profile-stats__num,
:root[data-theme="dark"] .record-row__title,
:root[data-theme="dark"] .rating-inline,
:root[data-theme="dark"] .error-code,
:root[data-theme="dark"] .lookup-tab.is-active,
:root[data-theme="dark"] .cookie-banner strong,
:root[data-theme="dark"] .contact-card strong,
:root[data-theme="dark"] .faq-item summary,
:root[data-theme="dark"] .cookie-table th,
:root[data-theme="dark"] .language-menu summary { color: var(--ink); }

/* Secondary text (was navy-700) */
:root[data-theme="dark"] .site-nav a,
:root[data-theme="dark"] .site-nav__menu-trigger--link,
:root[data-theme="dark"] .btn--ghost,
:root[data-theme="dark"] .field__label,
:root[data-theme="dark"] .group-tile__label,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] code,
:root[data-theme="dark"] .admin-table th,
:root[data-theme="dark"] .record-detail__summary,
:root[data-theme="dark"] .settings-summary-text { color: #c6d3e1; }

/* Language dropdown options in dark */
:root[data-theme="dark"] .language-menu__option { color: #c6d3e1 !important; }
:root[data-theme="dark"] .language-menu__option.is-active { color: #46d38a !important; }
:root[data-theme="dark"] .language-menu__option.is-active { background: rgba(22,163,74,.18); }
:root[data-theme="dark"] .record-row__link:hover,
:root[data-theme="dark"] .record-row__link:focus-visible { background: var(--bg-muted); }
:root[data-theme="dark"] .record-row__link:hover .record-row__title,
:root[data-theme="dark"] .record-row__link:focus-visible .record-row__title { color: var(--ink); }
:root[data-theme="dark"] .record-row__link:hover .muted,
:root[data-theme="dark"] .record-row__link:focus-visible .muted { color: #b7c6d6; }
:root[data-theme="dark"] .feedback { color: #b8c9db; }
:root[data-theme="dark"] .feedback-card .muted { color: #c4d2e0; }
:root[data-theme="dark"] .group-tile.is-active { background: rgba(22,163,74,.16); border-color: #35c46e; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
:root[data-theme="dark"] .group-tile.is-active .group-tile__label { color: #ecf7f1; }
:root[data-theme="dark"] .tag-editor__tag { background: rgba(22,163,74,.2); border-color: rgba(101,217,154,.4); color: #8be8b5; }
:root[data-theme="dark"] .tag-editor__tag button { background: rgba(101,217,154,.16); }
:root[data-theme="dark"] .tag-editor__tag button:hover,
:root[data-theme="dark"] .tag-editor__tag button:focus-visible { background: rgba(101,217,154,.28); }
:root[data-theme="dark"] .tag-editor__suggestion-list button:hover,
:root[data-theme="dark"] .tag-editor__suggestion-list button:focus-visible { background: rgba(22,163,74,.12); color: #90ecba; }

/* Badges + alerts contrast */
:root[data-theme="dark"] .badge--confirmed { color: #46d38a; }
:root[data-theme="dark"] .btn--primary:hover { background: var(--green-500); }
/* Empty stars use --line-strong, which on the dark card is all but invisible --
   a 3/5 rating then reads as three stars with nothing to compare against. */
/* :not(.star--on) matters: this selector outranks .star--on, so without it the
   dark theme greys out filled stars too and every rating reads as zero. */
:root[data-theme="dark"] .star:not(.star--on),
:root[data-theme="dark"] .star-input label:not(.is-active) { color: #5d7590; }
:root[data-theme="dark"] .badge--danger { color: #f5847a; }
:root[data-theme="dark"] .vehicle-fact__value { color: var(--ink); }
:root[data-theme="dark"] .badge--unconfirmed { color: #f4bf6a; }
:root[data-theme="dark"] .alert--success { color: #46d38a; border-color: #1f4a37; }
:root[data-theme="dark"] .alert--error { background: #3a1a1a; color: #f6a6a0; border-color: #5b2a2a; }
:root[data-theme="dark"] .admin-flash-stack .alert--success { background: rgba(10, 47, 27, .96); color: #7ee3b1; border-color: rgba(70, 211, 138, .28); }
:root[data-theme="dark"] .admin-flash-stack .alert--error { background: rgba(66, 25, 25, .98); color: #f6b1ac; border-color: rgba(246, 177, 172, .22); }

/* Activity calendar intensity scale */
:root[data-theme="dark"] .cal__cell--1 { background: #0e4429; }
:root[data-theme="dark"] .cal__cell--2 { background: #006d32; }
:root[data-theme="dark"] .cal__cell--3 { background: #26a641; }
:root[data-theme="dark"] .cal__cell--4 { background: #39d353; }
:root[data-theme="dark"] .cal__cell--1 .cal__cell-num, :root[data-theme="dark"] .cal__cell--2 .cal__cell-num { color: #eafff2; }
:root[data-theme="dark"] .cal__cell:hover:not(.cal__cell--outside) { outline-color: var(--line-strong); }
:root[data-theme="dark"] .cal__cell.is-selected { outline-color: var(--ink); box-shadow: 0 0 0 1px var(--card) inset; }

/* =====================================================================
   Workshop directory (map + table)
   ===================================================================== */
.dir-head { margin-bottom: 1.2rem; }
.dir-head .eyebrow { color: var(--green-600); }
.dir-controls { margin-bottom: 1.2rem; }
.dir-controls__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.dir-controls__row + .dir-controls__row { margin-top: 1rem; }
.dir-controls .field { margin: 0; }
.dir-field--grow { flex: 1 1 240px; }
.dir-field--sm { width: 120px; }
.dir-controls__actions { display: flex; gap: .5rem; }
.dir-syncbox { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--muted); font-weight: 600; margin-left: auto; }
.dir-status { margin: .8rem 0 0; }

/* Table gets the larger share: it carries the ratings, experience and
   specializations a visitor actually compares on. minmax(0,…) so a long
   workshop name cannot push the grid wider than its container. */
.dir-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1.5rem; align-items: start; }
.dir-map { height: 560px; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); z-index: 0; }
.dir-table-wrap { min-width: 0; }
.dir-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dir-table th.is-sortable:hover { color: var(--green-600); }
.dir-table th.is-sortable::after { content: '⇅'; opacity: .35; margin-left: .3rem; font-size: .8em; }
.dir-table th.sorted-asc::after { content: '↑'; opacity: 1; }
.dir-table th.sorted-desc::after { content: '↓'; opacity: 1; }
.dir-empty { padding: 1.5rem; text-align: center; }
.chip--sm { font-size: .72rem; padding: .2em .55em; margin: 1px 0; display: inline-block; }
/* "+3 more" — collapses the rest of a workshop's specializations into a link
   to its profile, where the full list is shown. */
.chip--more { color: var(--green-600); text-decoration: none; white-space: nowrap; }
.chip--more:hover, .chip--more:focus-visible { background: color-mix(in srgb, var(--green-600) 18%, var(--bg-muted)); }

/* Leaflet popup readability in dark theme */
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: var(--card); color: var(--ink); }

@media (max-width: 900px) {
    .dir-grid { grid-template-columns: 1fr; }
    .dir-map { height: 380px; order: -1; }
    .dir-syncbox { margin-left: 0; }
}

/* ---------- Buyer PayPal ---------- */
.paypal-buttons { max-width: 320px; margin: 1rem auto .4rem; }
.paypal-error { margin: .6rem auto 0; max-width: 320px; }


/* ---- Workshop settings / billing ---- */
.settings-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.settings-page { width: 100%; max-width: none; margin: 0; }
.settings-page-form, .settings-main-column, .settings-sidebar, .settings-secondary-stack { min-width: 0; }
.settings-main-column { display: grid; align-content: start; }
.settings-sidebar { display: grid; gap: 1.25rem; align-content: start; }
.settings-secondary-stack { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.settings-layout--workshop-page { grid-template-columns: minmax(0, 1.18fr) minmax(460px, 1fr); }
.settings-actions--below-card { justify-content: flex-start; margin-top: .95rem; }
.shell-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; width: 100%; }
.shell-page-head h1 { margin-bottom: .25rem; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; min-width: 0; width: 100%; }
.settings-card { padding: 1.25rem; min-width: 0; }
.settings-form { display: grid; gap: 1rem; }
.settings-form--stacked { gap: .85rem; }
.settings-grid { display: grid; gap: .9rem; }
.settings-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid--wide { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(220px, 1fr)); }
.settings-grid--address { grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr); }
.field--compact input, .field--compact select { min-width: 0; }
.settings-form .field input, .settings-form .field select, .settings-form .field textarea,
.admin-settings-form .field input, .admin-settings-form .field select, .admin-settings-form .field textarea { width: 100%; }
.settings-form textarea { min-height: 110px; resize: vertical; }
.settings-actions { margin-top: .25rem; }
.specialization-field { display: grid; gap: .4rem; }
.tag-editor { display: grid; gap: .7rem; padding: .85rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--bg-muted); }
.tag-editor:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.tag-editor__selected { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 30px; }
.tag-editor__empty { align-self: center; color: var(--muted); font-size: .82rem; }
.tag-editor__tag { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .38rem .45rem .38rem .72rem; border: 1px solid rgba(22,163,74,.24); border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: .84rem; font-weight: 700; }
.tag-editor__tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-editor__tag button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(22,163,74,.12); color: inherit; font: inherit; cursor: pointer; }
.tag-editor__tag button:hover, .tag-editor__tag button:focus-visible { background: rgba(22,163,74,.24); outline: none; }
.tag-editor__entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.tag-editor__entry input { min-width: 0; background: var(--card); }
.tag-editor__suggestions { display: grid; gap: .4rem; }
.tag-editor__suggestions-label { color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tag-editor__suggestion-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-editor__suggestion-list button { min-height: 30px; padding: .34rem .62rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--navy-700); font-family: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; }
.tag-editor__suggestion-list button:hover, .tag-editor__suggestion-list button:focus-visible { border-color: var(--green-500); color: var(--green-600); outline: none; }
.tag-editor__status { min-height: 1em; margin: 0; }
.settings-secondary-card { scroll-margin-top: 1rem; }
.security-settings, .security-group { display: grid; gap: .85rem; min-width: 0; }
.security-group + .security-group { padding-top: 1rem; border-top: 1px solid var(--line); }
.security-group h3 { margin: 0; font-size: 1rem; }
.security-group__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.security-current-email { min-width: 0; overflow: hidden; color: var(--muted); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.security-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .85rem; align-items: end; min-width: 0; }
.settings-card--security .security-form { grid-template-columns: minmax(0, 1fr); }
.settings-card--security .security-form .btn { width: 100%; }
.security-form .field, .security-form .form__actions { margin: 0; }
.danger-zone { scroll-margin-top: 1rem; padding: .75rem 1rem; border-color: var(--line); background: transparent; box-shadow: none; }
.danger-zone__content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; }
.danger-zone h2 { margin: 0; color: var(--muted); font-size: 1rem; font-weight: 650; }
.danger-zone__trigger { color: #9f3028; box-shadow: none; }
.danger-zone__warning { color: #8f1d14 !important; }
.btn--danger { background: #b42318; border: 1px solid #b42318; color: #fff; }
.btn--danger:hover { background: #8f1d14; border-color: #8f1d14; color: #fff; text-decoration: none; }
.btn--danger:disabled { opacity: .45; cursor: not-allowed; }
.modal-open { overflow: hidden; }
.delete-account-modal { max-width: 560px; text-align: left; padding: 1.5rem; }
.delete-account-modal h2 { padding-right: 2rem; color: #8f1d14; }
.danger-modal__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fee4e2; color: #b42318; font-size: 1.35rem; font-weight: 900; }
.delete-account-form { display: grid; gap: .85rem; margin-top: 1rem; }
.danger-confirm-check { display: flex; align-items: flex-start; gap: .55rem; padding: .75rem; border: 1px solid #f1a7a0; border-radius: 10px; background: #fff8f7; color: #6f2b24; font-size: .88rem; }
.danger-confirm-check input { flex: 0 0 auto; margin-top: .15rem; }
.delete-account-form__actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; }

/* ---- Settings read-only summary cards (Edit opens a popup) ---- */
.settings-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; width: 100%; min-width: 0; margin-bottom: 1.25rem; }
.settings-overview__col { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.settings-summary-card { padding: 1.25rem; min-width: 0; display: grid; gap: 1rem; align-content: start; }
.settings-summary-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.settings-summary-card__head h2 { margin: 0; }
.settings-summary-card__identity { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.settings-summary-card__avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 1.25rem; font-weight: 800; }
.settings-summary-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-summary-card__title { min-width: 0; display: grid; gap: .3rem; }
.settings-summary-card__title h2 { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-summary-card__title .badge { justify-self: start; }
.settings-summary-list { display: grid; gap: 0; }
.settings-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.settings-summary-list .settings-summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-summary-row__label { flex: 0 0 auto; color: var(--muted); font-size: .84rem; font-weight: 650; }
.settings-summary-row__value { min-width: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.settings-summary-row__value--block { margin: .15rem 0 0; text-align: left; font-size: .95rem; }
.settings-summary-section { display: grid; gap: .4rem; padding-top: .2rem; }
.settings-summary-section .settings-summary-row__label { display: block; }
.settings-summary-text { margin: 0; color: var(--navy-700); line-height: 1.55; overflow-wrap: anywhere; }
.settings-summary-row--action { align-items: center; }
.settings-summary-row--action:not(:last-child) { border-bottom: 1px solid var(--line); }
.hours-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hours-summary-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.hours-summary-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-summary-list__days { color: var(--muted); font-size: .84rem; font-weight: 650; }
.hours-summary-list__value { font-weight: 650; }
.hours-summary-list__value.is-closed { color: var(--muted); font-weight: 600; }
.hours-summary-list__row.is-today { position: relative; }
.hours-summary-list__row.is-today .hours-summary-list__days,
.hours-summary-list__row.is-today .hours-summary-list__value { color: var(--ink); font-weight: 800; }
.hours-summary-list__today { display: inline-block; margin-left: .4rem; padding: .05rem .35rem; border-radius: 999px;
                             background: var(--bg-muted); border: 1px solid var(--line-strong);
                             color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em;
                             text-transform: uppercase; vertical-align: .08em; }
/* Open/closed badge: the one thing a visitor checks before picking up the phone. */
.hours-status { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
                padding: .2rem .5rem; border-radius: 999px; border: 1px solid transparent;
                font-size: .74rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.hours-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.hours-status--open { color: var(--green-700); background: var(--green-100); border-color: color-mix(in srgb, var(--green-600) 35%, transparent); }
.hours-status--closed { color: var(--muted); background: var(--bg-muted); border-color: var(--line-strong); }
.hours-status__detail { margin: .1rem 0 .35rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }

/* ---- Settings edit modals (Save / Cancel popups) ---- */
.settings-edit-modal { text-align: left; padding: 1.5rem; }
.settings-edit-modal h2 { padding-right: 2rem; margin-bottom: .3rem; }
.settings-edit-modal--wide { max-width: 760px; max-height: calc(100vh - 2rem); overflow-y: auto; }
.settings-edit-modal--narrow { max-width: 440px; }
.settings-edit-modal .settings-form { margin-top: .75rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* The calendar's confirm dialog: two equal choices, so they share the width
   rather than huddling at one edge. */
.modal-actions--split { justify-content: center; }
.appt-move-confirm__slot { margin: .35rem 0 .2rem; font-size: 1.05rem; }

.settings-hours { padding: 1rem; border: 1px solid var(--line, rgba(120,140,160,.22)); }
.settings-sidebar .opening-hours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .7rem; row-gap: .6rem; }
.settings-sidebar .opening-hours-ruler { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 0 .2rem; }
.settings-sidebar .opening-hours-ruler > span { display: none; }
.settings-sidebar .opening-hours-row { grid-template-columns: 1fr auto; gap: .45rem .65rem; padding: .55rem .65rem; align-items: start; }
.settings-sidebar .opening-hours-row__day { grid-column: 1; grid-row: 1; }
.settings-sidebar .opening-hours-row__closed { grid-column: 2; grid-row: 1; font-size: .76rem; }
.settings-sidebar .opening-hours-row__visual { grid-column: 1 / -1; grid-row: 2; }
.settings-sidebar .opening-hours-row__times { grid-column: 1 / -1; grid-row: 3; max-width: none; }
.settings-sidebar .opening-hours-row__times input { padding: .4rem .45rem; font-size: .78rem; }
.settings-sidebar .opening-hours-presets { display: grid; grid-template-columns: minmax(0, 1fr); }
.settings-sidebar .opening-hours-presets .btn { width: 100%; }
.settings-sidebar .opening-hours-help { font-size: .78rem; }
.settings-sidebar .hours-range { height: 32px; }
.settings-sidebar .hours-range__rail { inset: 8px 0; }
.settings-sidebar .hours-range__selection { top: 8px; bottom: 8px; }
.settings-sidebar .hours-range__input { height: 32px; }
.settings-sidebar .hours-range__input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
.settings-sidebar .hours-range__input::-moz-range-thumb { width: 18px; height: 18px; }
.opening-hours-heading { margin-bottom: .85rem; }
.opening-hours-toolbar { display: grid; gap: .45rem; margin-bottom: .75rem; }
.opening-hours-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.opening-hours-presets .btn { padding: .5rem .68rem; }
.opening-hours-help { margin: 0; }
.opening-hours-grid { display: grid; gap: .55rem; }
.opening-hours-ruler,
.opening-hours-row { display: grid; grid-template-columns: 78px minmax(180px, 1fr) 230px 68px; gap: .6rem; align-items: center; }
.opening-hours-ruler { padding: 0 .8rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
.opening-hours-ruler__ticks { display: flex; justify-content: space-between; }
.opening-hours-row { padding: .65rem .8rem; border: 1px solid rgba(120,140,160,.18); border-radius: 14px; background: var(--card); transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.opening-hours-row:focus-within { border-color: rgba(22,163,74,.55); }
.opening-hours-row__day { display: grid; gap: .12rem; min-width: 0; }
.opening-hours-row__day strong { color: var(--navy-800); }
.opening-hours-row__visual { min-width: 0; }
.hours-range { --open-pct: 33.3333%; --close-pct: 75%; position: relative; height: 40px; touch-action: none; }
.hours-range__rail { position: absolute; inset: 11px 0; border-radius: 999px; background-color: var(--bg-muted); background-image: linear-gradient(to right, transparent calc(25% - .5px), rgba(120,140,160,.3) 25%, transparent calc(25% + .5px), transparent calc(50% - .5px), rgba(120,140,160,.3) 50%, transparent calc(50% + .5px), transparent calc(75% - .5px), rgba(120,140,160,.3) 75%, transparent calc(75% + .5px)); border: 1px solid var(--line); cursor: pointer; }
.hours-range__selection { position: absolute; z-index: 2; top: 11px; bottom: 11px; left: var(--open-pct); right: calc(100% - var(--close-pct)); min-width: 8px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-600), var(--green-500)); box-shadow: 0 3px 10px rgba(22,163,74,.24); cursor: grab; touch-action: none; }
.hours-range__selection:hover { filter: brightness(1.04); }
.hours-range__selection:active, .opening-hours-row.is-dragging .hours-range__selection { cursor: grabbing; }
.hours-range__selection:focus-visible { outline: 3px solid rgba(22,163,74,.24); outline-offset: 4px; }
.hours-range__input { position: absolute; z-index: 3; inset: 0; width: 100%; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; }
.hours-range__input:focus { border: 0; box-shadow: none; }
.hours-range__input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.hours-range__input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13px; border: 3px solid #fff; border-radius: 50%; background: var(--green-600); box-shadow: 0 1px 5px rgba(15,37,68,.32); appearance: none; -webkit-appearance: none; pointer-events: auto; cursor: ew-resize; }
.hours-range__input::-moz-range-track { height: 2px; border: 0; background: transparent; }
.hours-range__input::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--green-600); box-shadow: 0 1px 5px rgba(15,37,68,.32); pointer-events: auto; cursor: ew-resize; }
.hours-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(22,163,74,.2), 0 1px 5px rgba(15,37,68,.32); }
.hours-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(22,163,74,.2), 0 1px 5px rgba(15,37,68,.32); }
.opening-hours-row__times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .35rem; align-items: center; }
.opening-hours-row__times label { min-width: 0; }
.opening-hours-row__times input { min-width: 0; padding: .48rem .5rem; font-size: .82rem; }
.opening-hours-row__times > span { color: var(--muted); }
.opening-hours-row__closed { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; font-size: .82rem; white-space: nowrap; }
.opening-hours-row__closed input { width: auto; }
.opening-hours-row.is-closed { background: var(--bg-muted); }
.opening-hours-row.is-closed .opening-hours-row__day strong { color: var(--muted); }
.opening-hours-row.is-closed .hours-range__selection { background: var(--line-strong); box-shadow: none; }
.opening-hours-row.is-closed .hours-range { opacity: .62; }
:root[data-theme="dark"] .opening-hours-row__day strong { color: var(--ink); }
:root[data-theme="dark"] .hours-range__input { background: transparent; }
:root[data-theme="dark"] .tag-editor__suggestion-list button { color: #c6d3e1; }
:root[data-theme="dark"] .tag-editor__tag { color: #65d99a; }
:root[data-theme="dark"] .danger-zone { background: transparent; border-color: var(--line); }
:root[data-theme="dark"] .danger-zone h2 { color: var(--muted); }
:root[data-theme="dark"] .danger-zone__trigger,
:root[data-theme="dark"] .danger-zone__warning { color: #ff938a !important; }
:root[data-theme="dark"] .danger-confirm-check { background: #281818; border-color: #67312d; color: #efbbb6; }
:root[data-theme="dark"] .danger-modal__icon { background: #49211e; color: #ff938a; }
:root[data-theme="dark"] .delete-account-modal h2 { color: #ff938a; }
.billing-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workshop-summary-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subscription-usage-card { gap: .25rem; }
/* The upgrade moved out of the old level card and into the plan it upgrades. */
.summary-card__cta { margin-top: .7rem; }
/* The ladder came with it, held against the card's right edge and level with
   the plan name. It wraps under the name rather than overflowing when the
   column is too narrow to seat both on one line. */
.summary-card__plan-row { display: flex; align-items: center; justify-content: space-between; gap: .3rem .6rem; flex-wrap: wrap; }
.summary-card__track { margin: 0; justify-content: flex-end; }
.summary-card__sub--warn { color: var(--danger); font-weight: 650; }
.subscription-usage { width: 100%; height: 7px; margin: .25rem 0 .35rem; accent-color: var(--green-600); }
.tier-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.tier-plan-card { border: 1px solid rgba(120,140,160,.18); border-radius: var(--r); padding: 1rem; background: rgba(255,255,255,.03); display: grid; gap: .55rem; }
.tier-plan-card--current { border-color: color-mix(in srgb, var(--green-600) 58%, var(--line)); box-shadow: inset 3px 0 0 var(--green-600); }
.tier-plan-card__top { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.tier-plan-card__price { font-size: 1.55rem; font-weight: 800; margin: 0; }
.admin-summary--billing { margin-top: 1rem; }
.admin-settings-form { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) minmax(180px, 1.8fr) repeat(2, minmax(110px, .8fr)) auto auto; gap: .75rem; align-items: end; padding: .9rem 0; border-top: 1px solid rgba(120,140,160,.15); }
.admin-settings-form--single { grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(120px, .8fr)) auto auto; }
.admin-settings-form--plan { grid-template-columns: repeat(7, minmax(100px, 1fr)) auto auto; }
.admin-settings-form--new { border-top-style: dashed; }
.admin-edit-stack { display: grid; }
.admin-check { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding-bottom: .45rem; }
@media (max-width: 1180px) {
  .settings-layout, .settings-layout--workshop-page { grid-template-columns: 1fr; }
  .settings-overview { grid-template-columns: 1fr; }
  .settings-sidebar .opening-hours-grid, .settings-sidebar .opening-hours-presets { grid-template-columns: 1fr; }
  .settings-grid--two, .settings-grid--wide, .settings-grid--address { grid-template-columns: 1fr; }
  .security-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-form .form__actions { grid-column: 1 / -1; }
  .admin-settings-form, .admin-settings-form--single, .admin-settings-form--plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .opening-hours-ruler { grid-template-columns: 1fr; padding: 0 .2rem; }
  .opening-hours-ruler > span { display: none; }
  .opening-hours-row { grid-template-columns: 1fr auto; gap: .6rem .8rem; }
  .opening-hours-row__day { grid-column: 1; grid-row: 1; }
  .opening-hours-row__closed { grid-column: 2; grid-row: 1; }
  .opening-hours-row__visual { grid-column: 1 / -1; grid-row: 2; }
  .opening-hours-row__times { grid-column: 1 / -1; grid-row: 3; max-width: 240px; }
  .opening-hours-presets { display: grid; grid-template-columns: minmax(0, 1fr); }
  .settings-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .settings-actions .btn { width: 100%; }
  .opening-hours-presets .btn { width: 100%; }
  .security-group__heading { display: grid; gap: .2rem; }
  .security-current-email { max-width: 100%; }
  .security-form { grid-template-columns: minmax(0, 1fr); }
  .security-form .form__actions { grid-column: auto; }
  .tag-editor__entry { grid-template-columns: 1fr; }
  .tag-editor__entry .btn { width: 100%; }
  .delete-account-form__actions { display: grid; grid-template-columns: 1fr; }
  .delete-account-form__actions .btn { width: 100%; }
  .billing-summary-cards { grid-template-columns: 1fr; }
  .admin-settings-form, .admin-settings-form--single, .admin-settings-form--plan { grid-template-columns: 1fr; }
  .settings-summary-card__head { flex-wrap: wrap; }
  .settings-summary-row { flex-wrap: wrap; }
  .settings-summary-row__value { text-align: left; }
  .settings-edit-modal { padding: 1.1rem; }
  .settings-edit-modal--wide { max-height: calc(100vh - 1rem); }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .btn { width: 100%; }
}



.mileage-chart-card { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; background: var(--bg-muted); min-width: 0; overflow: hidden; }
.mileage-chart-card__head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .45rem; font-size: .85rem; }
.mileage-chart-wrap { position: relative; min-height: 172px; min-width: 0; width: 100%; overflow: hidden; }
.mileage-chart { width: 100% !important; max-width: 100%; height: 172px !important; display: block; }
.mileage-chart__grid { stroke: rgba(120, 140, 160, .22); stroke-width: 1; }
.mileage-chart__line { fill: none; stroke: var(--green-600); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mileage-chart__dot { fill: var(--green-600); stroke: var(--bg-muted); stroke-width: 3; }
.mileage-chart__axis { fill: var(--muted); font-size: 12px; font-weight: 600; }
.mileage-chart__axis--date { font-size: 11px; }

/* ---- Buyer report: mileage read-out ----
   The odometer section carries the verdict, the four figures a buyer negotiates
   on, the chart and the anomalies in words. Sized to survive the PDF: every
   grid collapses to fewer columns rather than shrinking type. */
.mileage-ico { flex: 0 0 auto; }
.mileage-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start;
                   border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: .5rem .65rem; }
.mileage-verdict > div { display: grid; gap: .1rem; }
.mileage-verdict strong { color: var(--ink); font-size: .84rem; line-height: 1.25; }
.mileage-verdict span { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.mileage-verdict__icon { display: flex; align-items: center; height: 1.05rem; }
.mileage-verdict--ok { border-left-color: var(--green-500); background: var(--green-100); }
.mileage-verdict--ok .mileage-verdict__icon { color: var(--green-700); }
.mileage-verdict--warn { border-left-color: var(--amber-600); background: var(--amber-100); }
.mileage-verdict--warn .mileage-verdict__icon { color: var(--amber-600); }
.mileage-verdict--alert { border-left-color: var(--red-600); background: var(--red-100); }
.mileage-verdict--alert .mileage-verdict__icon { color: var(--red-600); }

.mileage-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.mileage-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
                gap: 0 .35rem; align-items: center; min-width: 0;
                border: 1px solid var(--line); border-radius: 9px; padding: .4rem .55rem; background: var(--bg-muted); }
.mileage-stat__icon { grid-row: 1 / 3; align-self: center; display: flex; color: var(--muted); }
.mileage-stat__label { color: var(--muted); font-size: .66rem; line-height: 1.25; overflow-wrap: anywhere; }
.mileage-stat__value { grid-column: 2; color: var(--ink); font-size: .96rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.mileage-stat__sub { grid-column: 2; color: var(--muted); font-size: .64rem; line-height: 1.3; overflow-wrap: anywhere; }
.mileage-stat--ok .mileage-stat__icon { color: var(--green-600); }
.mileage-stat--warn .mileage-stat__icon { color: var(--amber-600); }

.mileage-legend { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .85rem; }
.mileage-legend li { display: inline-flex; align-items: center; gap: .32rem; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.mileage-legend__key { width: 14px; height: 3px; border-radius: 2px; background: var(--green-600); flex: 0 0 auto; }
.mileage-legend__key--trend { height: 0; border-top: 2px dashed var(--muted); border-radius: 0; background: none; }
.mileage-legend__key--idle { height: 10px; border-radius: 2px; background: var(--amber-100); border: 1px dashed var(--amber-600); }
.mileage-legend__key--rollback { width: 8px; height: 8px; border-radius: 50%; background: var(--red-600); }

.mileage-insights { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.mileage-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; align-items: start;
                   color: var(--muted); font-size: .74rem; line-height: 1.4; }
.mileage-insight .mileage-ico { margin-top: .1rem; }
.mileage-insight--ok .mileage-ico { color: var(--green-600); }
.mileage-insight--warn .mileage-ico { color: var(--amber-600); }
.mileage-insight--alert { color: var(--ink); }
.mileage-insight--alert .mileage-ico { color: var(--red-600); }

.mileage-table tr.is-rollback { background: var(--red-100); }
.mileage-table tr.is-idle { background: var(--amber-100); }
.mileage-table__delta { white-space: nowrap; }
.mileage-delta { display: inline-flex; align-items: center; gap: .25rem; color: var(--green-700); font-weight: 700; }
.mileage-delta--warn { color: var(--amber-600); }
.mileage-delta--alert { color: var(--red-600); }

/* ---- Buyer report page ---- */
.section.buyer-page { padding: 1.55rem 0 2.2rem; }
.report-page { display: grid; gap: .7rem; width: 100%; margin: 0 auto; }
.report-page > * { min-width: 0; }
.report-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; padding: .45rem; position: sticky; top: calc(var(--site-header-h) + .5rem); z-index: 5; }
.report-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: .38rem .7rem; border-radius: 999px; background: var(--bg-muted); color: var(--ink); font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.2; }
.report-section { padding: .85rem .9rem; display: grid; gap: .55rem; }
.report-section__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.report-section__head h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.005em; }
/* Timeline composition as a flow chart: a root bar whose thickness is split
   between branches in proportion to their share, drawn as inline SVG so it
   themes from CSS variables, prints as vector, and needs no charting library. */
.report-flow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .75rem; align-items: center; }
.report-flow__root { display: grid; gap: .05rem; text-align: right; }
.report-flow__total { color: var(--ink); font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.report-flow__label { color: var(--muted); font-size: .69rem; line-height: 1.25; }
.report-flow__svg { display: block; flex: 0 0 auto; }
.report-flow__spine { fill: var(--line-strong); }
.report-flow__ribbon { fill: var(--service-accent); opacity: .5; }
.report-flow__targets { list-style: none; margin: 0; padding: 0; }
.report-flow__target { display: flex; align-items: center; gap: .45rem; height: 26px;
                       border-left: 3px solid var(--service-accent); padding-left: .5rem; }
.report-flow__value { color: var(--ink); font-size: 1.02rem; font-weight: 800; line-height: 1; min-width: 1.3em; }
.report-flow__name { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.report-next-service { text-align: right; display: grid; gap: .02rem; }
.report-next-service strong { color: var(--ink); font-size: 1.02rem; line-height: 1.1; }
.report-next-service span { color: var(--muted); font-size: .66rem; }
.report-specs-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: .7rem; align-items: start; }
.report-specs-layout > * { min-width: 0; }
.report-spec-visual { margin: 0; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); overflow: hidden; }
.report-spec-visual img { width: 100%; height: auto; min-height: 0; max-height: 152px; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.report-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .55rem; }
.report-photo-grid--sample,
.report-photo-grid--evidence { min-width: 0; }
.report-photo-grid--sample { width: 100%; }
.report-photo-grid--compact { display: flex; flex-wrap: wrap; gap: .8rem; }
.report-photo-card { margin: 0; min-width: 0; overflow: hidden; }
.report-photo-card__trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.report-photo-card img { width: 100%; border-radius: 16px; display: block; }
.report-photo-card--sample img { aspect-ratio: 3 / 2; height: auto; max-height: 112px; border-radius: 9px; object-fit: contain; object-position: center; background: linear-gradient(180deg, #f8fafc, #eef4f9); border: 1px solid var(--line); }
.report-photo-card--compact img { aspect-ratio: 4 / 3; object-fit: cover; }
.report-photo-grid--evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.report-photo-grid--evidence-1 { grid-template-columns: minmax(0, .5fr); }
.report-photo-grid--evidence-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-photo-grid--evidence-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-photo-card--evidence { width: 100%; max-width: 100%; }
.report-photo-card--evidence img { aspect-ratio: 3 / 2; height: auto; max-height: 74px; border-radius: 7px; object-fit: contain; object-position: center; border: 1px solid var(--line); background: linear-gradient(180deg, #f8fafc, #eef4f9); }
.record-photo-modal { max-width: min(920px, calc(100vw - 2rem)); text-align: left; }
.record-photo-modal__figure { margin: 0; }
.record-photo-modal__figure img { display: block; width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 16px; background: var(--bg-muted); }
.record-photo-modal__figure figcaption { margin-top: .55rem; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.report-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .4rem; align-content: start; }
.report-spec { border: 1px solid var(--line); border-radius: 9px; padding: .4rem .55rem; background: var(--bg-muted); display: grid; gap: .05rem; align-content: start; }
.report-spec span { color: var(--muted); font-size: .66rem; line-height: 1.25; }
.report-spec strong { color: var(--ink); font-size: .84rem; line-height: 1.25; overflow-wrap: anywhere; }
.report-section .admin-table { font-size: .8rem; min-width: 0; }
.report-section .admin-table th, .report-section .admin-table td { padding: .35rem .5rem; }
.report-locked-teaser { border: 1px dashed var(--line-strong); border-radius: 10px; padding: .65rem .8rem; background: linear-gradient(135deg, rgba(15,37,68,.03), rgba(22,163,74,.05)); color: var(--muted); font-size: .85rem; font-weight: 600; }
.report-lock-panel { margin-top: .25rem; }
.timeline-list { display: grid; gap: .4rem; }
.timeline-year-divider { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: .55rem; align-items: center; margin: .5rem 0 .1rem; }
.timeline-year-divider span { justify-self: end; color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.timeline-year-divider::after { content: ''; grid-column: 2 / -1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--line-strong) 75%, transparent), transparent); }
.timeline-event { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: .55rem; align-items: stretch; }
.timeline-event__date { display: grid; align-content: start; justify-items: end; gap: .14rem; padding-top: .2rem; text-align: right; }
.timeline-event__date-day { color: var(--ink); font-size: 1.05rem; font-weight: 850; line-height: 1; letter-spacing: -.02em; }
.timeline-event__date-month { color: var(--ink); font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.timeline-event__date-year { color: var(--muted); font-size: .62rem; font-weight: 750; }
.timeline-event__rail { position: relative; display: flex; justify-content: center; }
.timeline-event__rail::before { content: ''; position: absolute; top: -.9rem; bottom: -.9rem; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 24%, var(--line)), color-mix(in srgb, var(--service-accent) 12%, var(--line))); }
.timeline-event__dot { width: 10px; height: 10px; border-radius: 999px; margin-top: .6rem; border: 2px solid var(--card); position: relative; z-index: 1; }
.timeline-event__body { border: 1px solid var(--line); border-radius: 12px; padding: .45rem .6rem; background: var(--bg-muted); }
.timeline-event__layout { display: grid; gap: .6rem; align-items: start; }
.timeline-event__layout > * { min-width: 0; }
.timeline-event__layout--with-evidence { grid-template-columns: minmax(0, 1.75fr) minmax(200px, .85fr); }
.timeline-event__content { min-width: 0; }
/* Parts are the tallest thing in an event: one bullet per line turns three
   fitted items into three lines. As wrapped chips they read as a set and cost
   one line. Scoped to the timeline so record pages keep their bulleted list. */
.timeline-event .parts-list { margin: .3rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .22rem; }
.timeline-event .parts-list li { margin: 0; padding: .1rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .72rem; line-height: 1.45; }
.timeline-event__body p { margin: .1rem 0; font-size: .8rem; line-height: 1.4; }
.timeline-event__body h3 { margin: .15rem 0; font-size: .95rem; }
/* Locked timeline placeholders. The markup holds only fixed dummy text, so the
   blur hides nothing real — it just signals "more here" without inviting a read. */
.timeline-event--locked { user-select: none; -webkit-user-select: none; pointer-events: none; }
.timeline-event--locked .timeline-event__date,
.timeline-event--locked .timeline-event__rail,
.timeline-event--locked .timeline-event__body { filter: blur(5px); opacity: .75; }
.timeline-event--locked .timeline-event__dot { background: var(--line-strong); }
.timeline-event__head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: space-between; }
.timeline-event__date-inline { color: var(--ink); font-size: .76rem; font-weight: 750; }
.timeline-event__evidence { display: grid; gap: .35rem; align-self: start; min-width: 0; }
.timeline-event__evidence-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-top: .05rem; }
.timeline-event__evidence-head strong { color: var(--ink); font-size: .72rem; }
.buyer-strip--report { margin: 0 auto .1rem; max-width: 760px; display: grid; gap: .2rem; }
.buyer-strip--report h1 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.buyer-strip--report p, .buyer-strip--report .small { font-size: .8rem; }
/* The lookup page stacks plain cards, which carry no margin of their own. */
.buyer-sample-callout { margin-top: 1.5rem; }
.report-page__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.report-page__topbar .back-link { margin-bottom: 0; }
.report-specs-layout--no-visual { grid-template-columns: 1fr; }
.buyer-strip--report h1,
.buyer-strip--report p,
.report-page > .alert { margin: 0; }
@media (max-width: 900px) {
  .section.buyer-page { padding: 1.1rem 0 1.8rem; }
  .report-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; }
  .report-specs-layout { grid-template-columns: 1fr; }
  .report-photo-grid { grid-template-columns: 1fr 1fr; }
  .report-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-flow { gap: .5rem; }
  .timeline-year-divider, .timeline-event { grid-template-columns: 46px 16px minmax(0, 1fr); gap: .5rem; }
  .timeline-event__date-day { font-size: 1rem; }
  .timeline-event__layout--with-evidence { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .section.buyer-page { padding: .9rem 0 1.4rem; }
  .report-page { gap: .7rem; }
  .report-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .45rem; }
  .report-nav a { padding: .4rem .6rem; font-size: .78rem; }
  .report-section { padding: .75rem .8rem; gap: .5rem; min-width: 0; overflow: hidden; }
  .report-photo-grid { grid-template-columns: 1fr; }
  .report-spec-grid { grid-template-columns: 1fr 1fr; }
  /* No room for the ribbons on a phone: the coloured rails still carry the tone. */
  .report-flow { grid-template-columns: 1fr; gap: .4rem; }
  .report-flow__root { text-align: left; }
  .report-flow__svg { display: none; }
  .report-spec-visual { padding: .45rem; }
  .report-spec-visual img { aspect-ratio: auto; object-fit: contain; object-position: center; }
  .mileage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mileage-chart-card { padding: .6rem; }
  .mileage-chart-card__head { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .mileage-chart-wrap { min-height: 180px; height: 180px; overflow: hidden; }
  .mileage-chart { height: 180px !important; }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-section .admin-table { min-width: 0; width: 100%; table-layout: fixed; font-size: .82rem; }
  .report-section .admin-table th,
  .report-section .admin-table td { padding: .6rem .45rem; white-space: normal; overflow-wrap: anywhere; }
  .report-section .admin-table th:nth-child(1),
  .report-section .admin-table td:nth-child(1) { width: 34%; }
  .report-section .admin-table th:nth-child(2),
  .report-section .admin-table td:nth-child(2) { width: 28%; }
  .report-section .admin-table th:nth-child(3),
  .report-section .admin-table td:nth-child(3) { width: 38%; }
  .timeline-year-divider { grid-template-columns: 1fr; gap: .35rem; margin-top: .3rem; }
  .timeline-year-divider span { justify-self: start; }
  .timeline-year-divider::after { grid-column: 1; }
  .timeline-event { grid-template-columns: 1fr; gap: .55rem; }
  .timeline-event__date { display: flex; align-items: baseline; justify-content: flex-start; gap: .4rem; text-align: left; padding-top: 0; }
  .timeline-event__date-day { font-size: 1.55rem; }
  .timeline-event__rail { display: none; }
  .timeline-event__body { padding: .95rem; }
  .timeline-event__head { align-items: start; flex-direction: column; }
  .timeline-event__evidence-head { flex-wrap: wrap; }
  .report-photo-grid--evidence { grid-template-columns: 1fr 1fr; }
}

/* Dark-theme surface guard: keep nested setting controls dark. */
:root[data-theme="dark"] .btn--ghost {
  background: var(--card) !important;
  color: #c6d3e1 !important;
  border-color: var(--line-strong) !important;
}
:root[data-theme="dark"] .btn--ghost:hover {
  background: var(--bg-muted) !important;
  border-color: #58708a !important;
}
:root[data-theme="dark"] .opening-hours-row {
  background: var(--card) !important;
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .opening-hours-row.is-closed {
  background: var(--bg-muted) !important;
}

/* ---------- Installable PWA ---------- */
.pwa-install-button[hidden] { display: none !important; }
.pwa-install-button { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 34px; white-space: nowrap; }
.pwa-install-button svg { flex: 0 0 auto; }
.site-nav .pwa-install-button { color: var(--navy-800); }
.admin-topbar .pwa-install-button { height: 34px; padding: 0 .7rem; background: var(--bg-muted); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.pwa-install-modal { max-width: 500px; text-align: left; padding: 1.5rem; }
.pwa-install-modal h2 { padding-right: 2rem; margin: .8rem 0 .45rem; }
.pwa-install-modal p { line-height: 1.6; }
.pwa-install-modal__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--green-500); color: #fff; font-size: .88rem; font-weight: 850; letter-spacing: .02em; box-shadow: 0 0 0 6px var(--green-100); }
.pwa-install-modal__actions { display: flex; justify-content: flex-end; margin-top: 1.1rem; }
:root[data-theme="dark"] .admin-topbar .pwa-install-button,
:root[data-theme="dark"] .site-nav .pwa-install-button { background: var(--bg-muted) !important; color: var(--ink) !important; }
@media (max-width: 900px) {
  .pwa-install-button { width: 36px; min-width: 36px; height: 36px; padding: 0 !important; }
  .pwa-install-button__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .pwa-install-modal { padding: 1.25rem; }
  .pwa-install-modal__actions .btn { width: 100%; }
}

.pwa-update-notice[hidden] { display: none !important; }
.pwa-update-notice { position: fixed; z-index: 85; top: 74px; right: 1rem; width: min(520px, calc(100vw - 2rem)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.pwa-update-notice > div:first-child { display: grid; gap: .12rem; }
.pwa-update-notice strong { color: var(--ink); font-size: .9rem; }
.pwa-update-notice span { color: var(--muted); font-size: .8rem; }
.pwa-update-notice__actions { display: flex; flex: 0 0 auto; gap: .45rem; }
@media (max-width: 600px) {
  .pwa-update-notice { top: 68px; align-items: stretch; flex-direction: column; }
  .pwa-update-notice__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pwa-update-notice__actions .btn { width: 100%; }
}

@media (max-width: 600px) {
  .site-header .brand__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .site-header .brand__logo { height: 40px; }
  .site-nav { gap: .45rem; }
}

/* ---------- Workshop profile picture ---------- */
.profile-image-editor { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-muted); }
.profile-image-editor__preview { width: 112px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 30px; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 800; box-shadow: 0 8px 22px rgba(11,36,64,.12); }
.profile-image-editor [hidden] { display: none !important; }
/* Mirrors the read-only summary avatar: the image fills the tile, so the
   preview shows the same crop visitors see on the workshop card. */
.profile-image-editor__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-image-editor__content { min-width: 0; display: grid; gap: .65rem; }
.profile-image-editor__description { color: var(--muted); font-size: .88rem; margin: .15rem 0 0; }
.profile-image-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.profile-image-input + label { cursor: pointer; }
.profile-image-input:focus-visible + label { outline: 3px solid var(--blue-600); outline: 3px solid color-mix(in srgb, var(--blue-600) 35%, transparent); outline-offset: 2px; }
.profile-image-remove { color: var(--danger); }
.profile-image-editor__status { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.profile-card__avatar img, .admin-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-card__avatar img { border-radius: inherit; }
.admin-topbar__avatar { overflow: hidden; }
.admin-topbar__avatar img { border-radius: 999px; }
@media (max-width: 600px) {
  .profile-image-editor { grid-template-columns: 84px minmax(0, 1fr); align-items: start; padding: .85rem; }
  .profile-image-editor__preview { width: 84px; border-radius: 22px; font-size: 1.6rem; }
  .profile-image-editor__actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .profile-image-editor { grid-template-columns: 1fr; }
  .profile-image-editor__preview { width: 92px; }
  .profile-image-editor__actions .btn { flex: 1 1 auto; }
}

/* ---------- Workshop VIN finder ---------- */
.vin-entry-page { width: 100%; max-width: none; margin: 0; }
.vin-entry-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 1.25rem; align-items: start; width: 100%; }
.vin-search-card, .vin-recent-card { padding: 1.25rem; min-width: 0; }
.vin-search-card h2, .vin-recent-card h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.vin-search-form { display: grid; gap: .45rem; }
.vin-search-form > .field { margin: 0; }
.vin-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: stretch; }
.vin-search-row .btn { min-width: 112px; }
.vin-combobox { position: relative; min-width: 0; }
.vin-combobox input { width: 100%; height: 100%; min-height: 46px; padding-inline: .85rem; text-transform: uppercase; letter-spacing: .055em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.vin-suggestions { position: absolute; z-index: 50; top: calc(100% + .4rem); left: 0; right: 0; max-height: min(390px, 55vh); overflow-y: auto; padding: .35rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); }
.vin-suggestion { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .7rem .75rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.vin-suggestion:hover, .vin-suggestion.is-active { background: var(--bg-muted); }
.vin-suggestion.is-active, .vin-suggestion[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--green-500); background: color-mix(in srgb, var(--green-100) 72%, var(--card)); }
.vin-suggestion:focus-visible { outline: 2px solid var(--green-500); outline-offset: -2px; }
.vin-suggestion__main, .vin-suggestion__meta { display: grid; gap: .16rem; min-width: 0; }
.vin-suggestion__main code { overflow: hidden; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.vin-suggestion__main > span, .vin-suggestion__meta time { color: var(--muted); font-size: .76rem; }
.vin-suggestion__meta { flex: 0 0 auto; justify-items: end; text-align: right; }
.vin-suggestion__badge { padding: .18rem .42rem; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: .68rem; font-weight: 800; }
.vin-suggestions__empty { padding: .8rem; color: var(--muted); font-size: .84rem; text-align: center; }
.vin-recent-card { position: sticky; top: 76px; }
.vin-recent-list { display: grid; }
.vin-recent-item { display: flex; align-items: center; justify-content: space-between; gap: .9rem; min-width: 0; padding: .78rem 0; border-top: 1px solid var(--line); color: inherit; }
.vin-recent-item:first-child { padding-top: 0; border-top: 0; }
.vin-recent-item:last-child { padding-bottom: 0; }
.vin-recent-item:hover { color: inherit; text-decoration: none; }
.vin-recent-item:hover code { color: var(--green-600); }
.vin-recent-item__main { display: grid; gap: .14rem; min-width: 0; }
.vin-recent-item__main code { overflow: hidden; color: var(--ink); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; }
.vin-recent-item__main strong { overflow: hidden; color: var(--ink); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.vin-recent-item__main > span, .vin-recent-item__meta { color: var(--muted); font-size: .74rem; }
.vin-recent-item__meta { display: grid; flex: 0 0 auto; gap: .14rem; justify-items: end; text-align: right; }
.vin-recent-empty { margin: 0; }
@media (max-width: 900px) {
  .vin-entry-layout { grid-template-columns: minmax(0, 1fr); }
  .vin-recent-card { position: static; }
}
@media (max-width: 600px) {
  .vin-search-row { grid-template-columns: minmax(0, 1fr); }
  .vin-search-row .btn { width: 100%; }
  .vin-suggestion { align-items: flex-start; }
  .vin-suggestion__meta { max-width: 42%; }
  .vin-recent-item { align-items: flex-start; }
}

/* ---------- Workshop promotions ---------- */
.promotions-page { width: 100%; max-width: none; margin: 0; }
.promotions-summary-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.promotions-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 1.25rem; align-items: start; width: 100%; }
.promotions-form { gap: 1rem; }
.promotions-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.promotions-form-grid--rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promotions-list-card { min-width: 0; }
.promotions-list { display: grid; gap: .9rem; }
.promotion-item { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: var(--bg-muted); }
.promotion-item__head { display: grid; gap: .9rem; }
.promotion-item__title-wrap { min-width: 0; display: grid; gap: .35rem; }
.promotion-item__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.promotion-item__title-row h3 { margin: 0; font-size: 1rem; }
.promotion-item__summary { margin: 0; color: var(--ink); font-weight: 600; }
.promotion-item__meta { display: flex; flex-wrap: wrap; gap: .5rem .85rem; color: var(--muted); font-size: .82rem; }
.promotion-item__actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.promotion-item__action-form { display: inline-flex; }
.promotion-item__delete { color: #9f3028; }
.promotion-empty { margin: 0; }
.promotion-badge--active { background: var(--green-100); color: var(--green-700); }
.promotion-badge--scheduled { background: #e7f0ff; color: #2557a7; }
.promotion-badge--paused { background: var(--amber-100); color: var(--amber-700); }
.promotion-badge--draft { background: #eef2f7; color: #52637a; }
.promotion-badge--expired { background: #f7ebeb; color: #9f3028; }
:root[data-theme="dark"] .promotion-item { background: rgba(255,255,255,.03); border-color: rgba(133,154,181,.18); }
:root[data-theme="dark"] .promotion-badge--scheduled { background: rgba(59,130,246,.18); color: #9bc2ff; }
:root[data-theme="dark"] .promotion-badge--draft { background: rgba(148,163,184,.16); color: #d0d9e4; }
:root[data-theme="dark"] .promotion-badge--expired { background: rgba(180,35,24,.16); color: #ffb0a8; }
@media (max-width: 1180px) {
  .promotions-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promotions-layout, .promotions-form-grid, .promotions-form-grid--rules { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .promotions-summary-cards { grid-template-columns: 1fr; }
  .promotion-item { padding: .9rem; }
  .promotion-item__actions { display: grid; grid-template-columns: 1fr; }
  .promotion-item__action-form, .promotion-item__actions .btn { width: 100%; }
}

/* ---------- Owner: notifications, vehicles, reports ---------- */

.notif-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1rem; margin-bottom: 1.1rem; }
.notif-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-muted); }
.notif-tab { padding: .4em 1em; border-radius: 999px; font-size: .88rem; font-weight: 650; color: var(--muted); }
.notif-tab:hover { text-decoration: none; color: var(--ink); }
.notif-tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.notif-toolbar__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.notif-toolbar__actions form { margin: 0; }
.notif-danger:hover { border-color: #dc2626; color: #dc2626; }

.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.notif-item { display: flex; align-items: stretch; gap: .5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.notif-item.is-unread { border-color: color-mix(in srgb, var(--green-500) 45%, var(--line)); background: color-mix(in srgb, var(--green-100) 22%, var(--card)); }
.notif-item__link { display: flex; align-items: flex-start; gap: .7rem; flex: 1; min-width: 0; padding: .9rem 1rem; color: inherit; }
.notif-item__link:hover { text-decoration: none; background: var(--bg-muted); }
.notif-item__dot { width: 8px; height: 8px; margin-top: .45rem; border-radius: 999px; background: transparent; flex: 0 0 auto; }
.notif-item.is-unread .notif-item__dot { background: var(--green-500); }
.notif-item__body { display: grid; gap: .2rem; min-width: 0; }
.notif-item__title { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.notif-item.is-unread .notif-item__title { font-weight: 800; }
.notif-item__text { color: var(--muted); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.notif-badge { display: inline-block; padding: .05rem .4rem; border-radius: 999px; background: var(--green-500); color: #fff; font-size: .66rem; font-weight: 800; }
/* The one notification that asks a question puts its answers on their own line,
   under the message rather than squeezed beside the read/delete icons. */
.notif-item--ask { flex-wrap: wrap; border-color: color-mix(in srgb, var(--green-500) 45%, var(--line)); }
.notif-item--ask .notif-item__link { order: 0; }
.notif-item--ask .notif-item__actions { order: 1; }
.notif-item__ask { order: 2; flex: 1 0 100%; display: flex; gap: .5rem; padding: 0 1rem .9rem; }
.notif-item__ask form { margin: 0; }
@media (max-width: 640px) {
    .notif-item__ask { flex-direction: column; }
    .notif-item__ask .btn { width: 100%; }
}
.notif-item__actions { display: flex; align-items: center; gap: .25rem; padding-right: .6rem; flex: 0 0 auto; }
.notif-item__actions form { margin: 0; }
.notif-icon-btn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: var(--bg-muted); color: var(--muted); font-size: .95rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.notif-icon-btn:hover { background: var(--green-100); color: var(--green-700); }
.notif-icon-btn--danger:hover { background: rgba(220,38,38,.14); color: #dc2626; }

.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.vehicle-card { display: grid; gap: .55rem; align-content: start; }
.vehicle-card.is-active { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500) inset; }
.vehicle-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.vehicle-card__head h3 { margin: 0; font-size: 1.05rem; }
.vehicle-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .3rem 0 .2rem; }
.vehicle-card__stats div { display: grid; gap: .1rem; }
.vehicle-card__stats dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.vehicle-card__stats dd { margin: 0; font-weight: 750; font-size: .95rem; }
.vehicle-card__actions form { margin: 0; }

.detail-list { display: grid; gap: .5rem; margin: 0 0 1.4rem; }
.detail-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.detail-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt { color: var(--muted); font-size: .85rem; }
.detail-list dd { margin: 0; font-weight: 700; font-size: .9rem; text-align: right; }

.year-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.year-bar { display: grid; grid-template-columns: 3.2rem 1fr 2rem; align-items: center; gap: .7rem; }
.year-bar__label { font-weight: 700; font-size: .88rem; }
.year-bar__track { height: 10px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.year-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--green-500); min-width: 3px; }
.year-bar__value { text-align: right; font-weight: 700; font-size: .85rem; color: var(--muted); }

@media (max-width: 600px) {
    .notif-toolbar { align-items: stretch; flex-direction: column; }
    .notif-tabs { justify-content: space-between; }
    .notif-toolbar__actions .btn { width: 100%; }
    .notif-toolbar__actions form { flex: 1; }
}

/* Topbar notification bell (owner area) */
.topbar-bell { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-muted); font-size: .95rem; line-height: 1; text-decoration: none; }
.topbar-bell__icon { display: grid; place-items: center; width: 16px; height: 16px; }
.topbar-bell__icon-svg { width: 16px; height: 16px; display: block; }
.topbar-bell:hover, .topbar-bell.is-active { border-color: var(--green-500); background: var(--green-100); text-decoration: none; }
.topbar-bell__badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.admin-sidebar__foot-name { color: #c7d3e0; }

/* Owner account header on the vehicle list */
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.account-head__id { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.account-head__avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--navy-800); color: #fff; font-size: 1.1rem; }
.account-head__id h2 { margin: .05rem 0 0; font-size: 1.15rem; }
.account-head__count { margin: 0; }


/* ---------- Owner vehicle workspace ---------- */
.owner-vehicle-switcher { display: inline-flex; min-width: 0; max-width: min(390px, 34vw); align-items: center; gap: .55rem; padding: .38rem .55rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.owner-vehicle-switcher:hover { border-color: var(--green-500); background: var(--card); }
.owner-vehicle-switcher__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--green-100); font-size: .9rem; flex: 0 0 auto; overflow: hidden; }
.owner-vehicle-switcher__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owner-vehicle-switcher__icon-svg { width: 18px; height: 18px; display: block; color: currentColor; }
.owner-vehicle-switcher__copy { min-width: 0; display: grid; gap: .02rem; }
.owner-vehicle-switcher__copy strong, .owner-vehicle-switcher__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-vehicle-switcher__copy strong { font-size: .82rem; }
.owner-vehicle-switcher__copy small { color: var(--muted); font-size: .68rem; }
.owner-vehicle-switcher__chevron { color: var(--muted); font-size: 1rem; flex: 0 0 auto; }
.owner-switcher-modal { width: min(100%, 580px); padding: 1.5rem; }
.owner-switcher-modal h2 { margin: .2rem 0 .45rem; }
.owner-switcher-modal__eyebrow, .owner-vehicle-hero__eyebrow { margin: 0; color: var(--green-600); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.owner-switcher-results { display: grid; gap: .45rem; min-height: 58px; margin-top: .3rem; }
.owner-switcher-result { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.owner-switcher-result:hover { border-color: var(--green-500); background: var(--green-100); color: var(--ink); text-decoration: none; }
.owner-switcher-result__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--bg-muted); overflow: hidden; }
.owner-switcher-result__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owner-switcher-result__copy { min-width: 0; display: grid; gap: .12rem; }
.owner-switcher-result__copy strong, .owner-switcher-result__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-switcher-result__copy strong { font-size: .88rem; }
.owner-switcher-result__copy small { color: var(--muted); font-size: .73rem; }
.owner-switcher-result__arrow { color: var(--green-600); font-weight: 800; }
.owner-switcher-modal__all { display: inline-flex; gap: .4rem; margin-top: 1.1rem; color: var(--green-600); font-size: .86rem; font-weight: 800; }
.vehicle-directory-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.5rem; }
.vehicle-directory-head h1 { margin: .25rem 0 .55rem; }
.vehicle-directory-head p { max-width: 62ch; margin: 0; }
.vehicle-directory-head__account { display: grid; gap: .2rem; flex: 0 0 auto; padding: .8rem 1rem; border-left: 2px solid var(--green-500); background: var(--bg-muted); border-radius: 0 10px 10px 0; }
.vehicle-directory-search { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.1rem; }
.vehicle-directory-search .field { margin: 0; }
.vehicle-directory-search__actions { display: flex; gap: .5rem; }
.vehicle-directory-search > .muted { margin: 0; white-space: nowrap; }
.vehicle-directory-sort { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; flex-wrap: wrap; }
.vehicle-directory-sort__label { color: var(--muted); font-size: .84rem; font-weight: 800; }
.vehicle-directory-sort__buttons { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.vehicle-sort-chip { display: inline-flex; align-items: center; min-height: 36px; padding-left: .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .84rem; font-weight: 700; overflow: hidden; }
.vehicle-sort-chip:hover { border-color: var(--blue-600); color: var(--blue-600); }
.vehicle-sort-chip.is-active { border-color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 12%, var(--card)); color: var(--ink); box-shadow: 0 0 0 3px rgba(107,167,240,.12); }
.vehicle-sort-chip__arrow { display: grid; place-items: center; align-self: stretch; min-width: 30px; margin-left: .45rem; border-left: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.vehicle-sort-chip__arrow:hover, .vehicle-sort-chip__arrow.is-active { background: color-mix(in srgb, var(--blue-600) 16%, var(--card)); color: var(--blue-600); text-decoration: none; }
.vehicle-directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.vehicle-directory-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate; }
.vehicle-directory-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 90%, transparent)); z-index: 1; }
.vehicle-directory-card.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.76)); z-index: 1; }
:root[data-theme="dark"] .vehicle-directory-card.has-photo::after { background: linear-gradient(180deg, rgba(11,20,32,.56), rgba(11,20,32,.74)); }
.vehicle-directory-card__bg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .24; filter: saturate(.88); z-index: 0; transform: scale(1.035); }
:root[data-theme="dark"] .vehicle-directory-card__bg { opacity: .28; }
.vehicle-directory-card > * { position: relative; z-index: 2; }
.vehicle-directory-card.is-active { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow-sm); }
.vehicle-directory-card__marker { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 999px; background: var(--green-500); box-shadow: 0 0 0 4px rgba(22,163,74,.14); z-index: 3; }
.vehicle-directory-card__top { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }
.vehicle-directory-card__identity { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1; }
.vehicle-directory-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--green-100) 84%, var(--card)); color: var(--green-700); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: 0 0 auto; }
.vehicle-directory-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-directory-card__icon svg { width: 22px; height: 22px; display: block; }
.vehicle-directory-card__heading { min-width: 0; display: grid; gap: .18rem; }
.vehicle-directory-card__heading h2 { margin: 0; font-size: 1.06rem; overflow-wrap: anywhere; }
.vehicle-directory-card__heading code { display: inline-block; max-width: 100%; color: var(--muted); font-size: .78rem; background: color-mix(in srgb, var(--bg-muted) 78%, transparent); border-radius: 999px; padding: .16rem .55rem; white-space: nowrap; }
.vehicle-directory-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem .9rem; margin: 1rem 0 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.vehicle-directory-card__stats dt { color: var(--muted); font-size: .64rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.vehicle-directory-card__stats dd { margin: .2rem 0 0; color: var(--ink); font-size: .85rem; font-weight: 750; overflow-wrap: anywhere; }
.vehicle-directory-card__actions { display: flex; align-items: center; gap: .55rem; margin-top: auto; }
.vehicle-directory-card__actions .btn { justify-content: center; }
.owner-vehicle-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.owner-vehicle-hero__identity { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.owner-vehicle-hero__avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; border-radius: 14px; background: var(--navy-800); color: #fff; font-size: 1.2rem; }
.owner-vehicle-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.owner-vehicle-hero__title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.owner-vehicle-hero__title h1 { margin: .15rem 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.owner-vehicle-hero__vin { margin: 0; color: var(--muted); font-size: .8rem; }
.owner-vehicle-hero__vin code { color: inherit; }
.owner-vehicle-hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.owner-metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.owner-metric-strip > div { display: grid; gap: .28rem; padding: .9rem 1rem; border-right: 1px solid var(--line); }
.owner-metric-strip > div:last-child { border-right: 0; }
.owner-metric-strip span { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.owner-metric-strip strong { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.owner-history-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); grid-template-areas: 'insights timeline'; gap: 1.25rem; align-items: start; }
.owner-history-layout .owner-timeline-panel { grid-area: timeline; }
.owner-history-layout .owner-history-insights { grid-area: insights; }
.owner-timeline-panel { min-width: 0; padding: 1.2rem; }
.owner-timeline-panel__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.owner-timeline-panel__head h2, .owner-mileage-panel h2 { margin: .25rem 0 .25rem; font-size: 1.2rem; }
.owner-timeline-panel__head p.muted { margin: 0; font-size: .86rem; }
.owner-timeline-filters { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, .55fr) 110px auto auto; gap: .55rem; align-items: center; margin: 1.2rem 0 .8rem; padding: .7rem; border-radius: 12px; background: var(--bg-muted); }
.owner-timeline-filters label { min-width: 0; }
.owner-timeline-filters input, .owner-timeline-filters select { width: 100%; min-height: 38px; padding: .45rem .65rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .82rem; }
.owner-timeline-filters__clear { color: var(--muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.owner-timeline-panel__count { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; }
.owner-timeline-empty { margin: 1rem 0 0; }
.owner-service-timeline { position: relative; }
.owner-service-timeline__year { position: relative; display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 .55rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.owner-service-timeline__year::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.owner-service-event { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr); gap: .65rem; min-width: 0; }
.owner-service-event__date { padding-top: .7rem; display: grid; align-content: start; justify-items: end; color: var(--muted); line-height: 1; }
.owner-service-event__date strong { color: var(--ink); font-size: .92rem; }
.owner-service-event__date span { margin-top: .18rem; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.owner-service-event__rail { position: relative; display: flex; justify-content: center; }
.owner-service-event__rail::before { content: ''; position: absolute; top: 0; bottom: -1px; width: 2px; background: var(--line); }
.owner-service-event__rail span { position: relative; z-index: 1; width: 10px; height: 10px; margin-top: 1rem; border: 2px solid var(--card); border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 2px var(--green-100); }
.owner-service-event.is-owner .owner-service-event__rail span { background: #8393a5; box-shadow: 0 0 0 2px var(--bg-muted); }
.owner-service-event__card { display: block; min-width: 0; margin: 0 0 .7rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.owner-service-event__card:hover { border-color: var(--green-500); color: var(--ink); text-decoration: none; transform: translateX(2px); box-shadow: var(--shadow-sm); }
.owner-service-event__card.service-tone-surface:hover { border-color: color-mix(in srgb, var(--service-accent) 42%, var(--line)); }
.owner-service-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--muted); font-size: .73rem; }
.owner-service-event__meta .badge { font-size: .66rem; }
.owner-service-event__card h3 { margin: .48rem 0 .22rem; font-size: .94rem; }
.owner-service-event__card p { margin: 0; color: var(--muted); font-size: .8rem; }
.owner-service-event__detail { display: block; margin-top: .5rem; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.owner-service-event__open { display: block; margin-top: .6rem; color: var(--green-600); font-size: .74rem; font-weight: 800; }
.owner-service-event__rate { display: block; margin-top: .6rem; color: var(--blue-600); font-size: .74rem; font-weight: 850; }
.owner-service-event__rating { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; color: var(--ink); font-size: .78rem; font-weight: 800; }
.owner-service-event__rating .stars { color: #f5a623; letter-spacing: .04em; }
.owner-history-insights { display: grid; gap: 1rem; position: sticky; top: 92px; }
.owner-mileage-panel { padding: 1rem; }
.owner-mileage-panel__head { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
.owner-mileage-panel__latest { padding: .35rem .5rem; border-radius: 8px; background: var(--green-100); color: var(--green-600); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.owner-mileage-chart-wrap { height: 220px; margin-top: .75rem; }
.owner-mileage-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.owner-mileage-panel__note { margin: .8rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.owner-mileage-panel__warning { color: var(--red-600); }
.owner-quick-actions { display: grid; padding: .8rem; }
.owner-quick-actions h2 { margin: .25rem .25rem .55rem; font-size: .92rem; }
.owner-quick-actions a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .55rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .84rem; font-weight: 700; }
.owner-quick-actions a:hover { color: var(--green-600); text-decoration: none; }
.owner-quick-actions a span { color: var(--muted); }
@media (max-width: 1050px) { .owner-history-layout { grid-template-columns: 1fr; grid-template-areas: 'timeline' 'insights'; } .owner-history-insights { position: static; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); } }
@media (max-width: 800px) { .vehicle-directory-head { align-items: start; flex-direction: column; gap: 1rem; } .vehicle-directory-search { grid-template-columns: 1fr auto; } .vehicle-directory-search > .muted { grid-column: 1 / -1; } .vehicle-directory-sort { align-items: start; flex-direction: column; } .owner-metric-strip { grid-template-columns: repeat(2, 1fr); } .owner-metric-strip > div:nth-child(even) { border-right: 0; } .owner-metric-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } .owner-history-insights { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .owner-vehicle-switcher { max-width: 48vw; } .owner-vehicle-switcher__copy strong { font-size: .72rem; } .owner-vehicle-switcher__copy small { display: none; } .owner-vehicle-hero { align-items: start; flex-direction: column; } .owner-vehicle-hero__actions { width: 100%; } .owner-vehicle-hero__actions .btn { flex: 1; } .owner-timeline-panel { padding: .9rem; } .owner-timeline-panel__head { align-items: stretch; flex-direction: column; } .owner-timeline-panel__head .btn { align-self: flex-start; } .owner-timeline-filters { grid-template-columns: 1fr 1fr; } .owner-timeline-filters label:first-child { grid-column: 1 / -1; } .owner-timeline-filters .btn { justify-content: center; } .owner-service-event { grid-template-columns: 39px 14px minmax(0, 1fr); gap: .45rem; } .owner-service-event__card { padding: .7rem; } .owner-service-event__date strong { font-size: .82rem; } .vehicle-directory-search { grid-template-columns: 1fr; } .vehicle-directory-search__actions { width: 100%; } .vehicle-directory-search__actions .btn { flex: 1; } .vehicle-directory-sort__buttons, .vehicle-direction-toggle { width: 100%; } .vehicle-sort-chip, .vehicle-direction-chip { flex: 1 1 calc(50% - .4rem); } .vehicle-directory-card__stats { grid-template-columns: 1fr 1fr; } .vehicle-directory-card__actions { flex-direction: column; align-items: stretch; } }


.inline-help { position: relative; display: inline-flex; margin-left: .35rem; vertical-align: middle; }
.inline-help summary { list-style: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-muted); color: var(--muted); font-size: .7rem; font-weight: 800; cursor: pointer; }
.inline-help summary::-webkit-details-marker { display: none; }
.inline-help__bubble { position: absolute; top: calc(100% + .45rem); right: 0; width: min(260px, 70vw); padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.45; box-shadow: var(--shadow-lg); z-index: 5; }
.option-fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.option-grid { display: grid; gap: .6rem; }
.option-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem .75rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; text-align: center; font-weight: 650; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.option-card input { position: absolute; opacity: 0; inset: 0; }
.option-card:hover { border-color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 8%, var(--card)); }
.option-card.is-selected { border-color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 13%, var(--card)); box-shadow: 0 0 0 1px rgba(107,167,240,.28) inset; }
.vehicle-photo-field input[name="remove_photo"] { position: absolute; opacity: 0; pointer-events: none; }
.owner-mileage-panel__latest { background: color-mix(in srgb, var(--green-100) 70%, var(--card)); color: var(--ink); }
:root[data-theme="dark"] .owner-mileage-panel__latest { color: #d7fff0; background: rgba(22,163,74,.18); }
@media (max-width: 700px) { .option-grid--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .option-grid--three { grid-template-columns: 1fr; } }


/* ---------- Dashboard low-frequency tools + notification popup ---------- */
.admin-sidebar__preferences { display: grid; gap: .45rem; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-sidebar__preferences-label { color: #71869b; font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-sidebar__preferences-tools { display: flex; align-items: center; gap: .45rem; min-height: 32px; }
.admin-sidebar__preferences .language-menu summary { height: 30px; padding: 0 .55rem; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; font-size: .72rem; }
.admin-sidebar__preferences .language-menu summary:hover { border-color: rgba(107,167,240,.65); background: rgba(107,167,240,.12); }
.admin-sidebar__preferences .language-menu__chevron { color: #9db0c3; }
.admin-sidebar__preferences .language-menu__list { top: auto; bottom: calc(100% + .5rem); left: 0; right: auto; }
.admin-sidebar__preferences .theme-toggle { width: 30px; height: 30px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; }
.admin-sidebar__preferences .theme-toggle:hover { border-color: rgba(107,167,240,.65); background: rgba(107,167,240,.12); }
.admin-sidebar__preferences .pwa-install-button { display: inline-flex; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0 !important; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eef4f9; }
.admin-sidebar__preferences .pwa-install-button__label { display: none; }
.topbar-notifications { position: relative; }
.topbar-notifications > summary { list-style: none; cursor: pointer; }
.topbar-notifications > summary::-webkit-details-marker { display: none; }
.topbar-notifications__panel { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 70; width: min(360px, calc(100vw - 2rem)); padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }
.topbar-notifications__head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .1rem .2rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.topbar-notifications__head span { color: var(--blue-600); font-size: .72rem; font-weight: 800; }
.topbar-notifications__list { display: grid; gap: .25rem; padding: .45rem 0; }
.topbar-notification { display: grid; grid-template-columns: 8px minmax(0,1fr); gap: .6rem; align-items: start; padding: .55rem .45rem; border-radius: 8px; color: var(--ink); }
.topbar-notification:hover { background: var(--bg-muted); text-decoration: none; }
.topbar-notification__dot { width: 7px; height: 7px; margin-top: .38rem; border-radius: 999px; background: transparent; }
.topbar-notification.is-unread .topbar-notification__dot { background: var(--blue-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-600) 18%, transparent); }
.topbar-notification__copy { display: grid; gap: .18rem; min-width: 0; }
.topbar-notification__copy strong { overflow: hidden; color: var(--ink); font-size: .78rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.topbar-notification__copy small { color: var(--muted); font-size: .7rem; }
.topbar-notifications__empty { margin: .8rem .2rem; color: var(--muted); font-size: .78rem; }
.topbar-notifications__all { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .2rem .1rem; border-top: 1px solid var(--line); color: var(--blue-600); font-size: .78rem; font-weight: 800; }
.topbar-notifications__all:hover { color: var(--blue-600); text-decoration: none; }
@media (max-width: 600px) { .topbar-notifications__panel { position: fixed; top: 4.2rem; right: .75rem; } }


/* ---------- Owner verification and account pages ---------- */
.otp-card { max-width: 520px; margin: 2rem auto; }
.otp-card h1 { margin: .25rem 0 .55rem; }
.otp-input { text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .35em; }
.otp-test-note { display: grid; gap: .25rem; margin: 1rem 0; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--amber-600) 45%, var(--line)); border-radius: 10px; background: var(--amber-100); color: var(--ink); font-size: .8rem; }
.otp-test-note code { color: var(--amber-600); font-size: 1rem; font-weight: 850; letter-spacing: .12em; }
.account-page-head { margin-bottom: 1rem; }
.account-page-head h1 { margin: .25rem 0 .45rem; }
.account-photo-field { align-items: flex-start; }
.inline-help__bubble { max-height: 180px; overflow: auto; }
.owner-metric-strip { overflow: visible; position: relative; }


/* ---------- Owner account dashboard ---------- */
.account-top-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.account-profile-card { min-height: 122px; padding: 1rem 1.05rem; display: flex; align-items: center; }
.account-profile-card__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; }
.account-profile-card__identity { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.account-profile-card__avatar { width: 72px; height: 72px; flex: 0 0 auto; overflow: hidden; border-radius: 18px; display: grid; place-items: center; background: var(--bg-muted); color: var(--ink); font-size: 1.6rem; font-weight: 800; }
.account-profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-profile-card__eyebrow { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-profile-card h2 { margin: .25rem 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.account-profile-card__details { display: grid; gap: .7rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.account-profile-card__details dt { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.account-profile-card__details dd { margin: .18rem 0 0; color: var(--ink); font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.account-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.account-summary-card { display: grid; gap: .35rem; min-height: 122px; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.account-summary-card:hover { border-color: var(--blue-600); color: var(--ink); text-decoration: none; }
.account-summary-card span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.account-summary-card strong { color: var(--ink); font-size: 1.25rem; overflow-wrap: anywhere; }
.account-summary-card small { color: var(--blue-600); font-size: .75rem; font-weight: 700; }
.account-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .85fr); gap: 1rem; align-items: start; }
.account-dashboard-card { padding: 1rem; }
.account-dashboard-card--services { grid-row: span 2; }
.account-dashboard-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.account-dashboard-card__head h2 { margin: 0; font-size: 1.05rem; }
.account-dashboard-card__head a { color: var(--blue-600); font-size: .78rem; font-weight: 800; }
.account-service-list, .account-notification-list, .account-promotion-list { display: grid; gap: .35rem; }
.account-service-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .65rem .45rem; border-top: 1px solid var(--line); color: var(--ink); }
.account-service-row:first-child { border-top: 0; }
.account-service-row:hover { background: var(--bg-muted); color: var(--ink); text-decoration: none; }
.account-service-row__date { color: var(--muted); font-size: .72rem; font-weight: 700; }
.account-service-row__copy { display: grid; gap: .15rem; min-width: 0; }
.account-service-row__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.account-service-row__copy small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.account-notification { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .7rem .35rem; border-top: 1px solid var(--line); color: var(--ink); }
.account-notification:first-child { border-top: 0; }
.account-notification:hover { color: var(--ink); text-decoration: none; background: var(--bg-muted); }
.account-notification__dot { width: 7px; height: 7px; margin-top: .35rem; border-radius: 99px; }
.account-notification.is-unread .account-notification__dot { background: var(--blue-600); box-shadow: 0 0 0 3px rgba(107,167,240,.18); }
.account-notification__copy { display: grid; gap: .16rem; min-width: 0; }
.account-notification__copy strong, .account-notification__copy small, .account-notification__body { display: block; }
.account-notification__copy strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-notification__body { overflow: hidden; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.account-notification__copy small { color: var(--muted); font-size: .7rem; }
.account-notification__arrow { width: auto !important; height: auto !important; margin-top: 0 !important; color: var(--muted); font-size: .8rem; }
.account-promotion { display: grid; gap: .18rem; padding: .65rem .4rem; border-top: 1px solid var(--line); }
.account-promotion:first-child { border-top: 0; }
.account-promotion strong { font-size: .82rem; }
.account-promotion span { color: var(--muted); font-size: .72rem; }
.account-promotion small { color: var(--blue-600); font-size: .72rem; font-weight: 700; }
.account-edit-modal { max-width: 540px; text-align: left; }
.account-edit-modal h2 { margin: 0 0 1rem; padding-right: 2rem; }
.account-service-list--all { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
@media (max-width: 1000px) { .account-top-grid { grid-template-columns: 1fr; } .account-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .account-dashboard-grid { grid-template-columns: 1fr; } .account-dashboard-card--services { grid-row: auto; } }
@media (max-width: 600px) { .account-summary-grid { grid-template-columns: 1fr; } .account-service-row { grid-template-columns: 1fr auto; } .account-service-row__date { grid-column: 1; } .account-profile-card__head { flex-direction: column; align-items: stretch; } .account-notification { grid-template-columns: 8px minmax(0, 1fr); align-items: start; } .account-notification__arrow { display: none; } }


.owner-timeline-panel--wide { padding: 1.2rem; }
.owner-timeline-panel__head--compact { margin-bottom: .35rem; }
.owner-timeline-filters--services { grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.4fr) minmax(140px, .8fr) minmax(140px, .8fr) auto auto; }
.owner-timeline-filters--services .field__label { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vehicle-directory-sort--services { margin-top: .25rem; }
.owner-service-timeline--all .owner-service-event__card p { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .owner-timeline-filters--services { grid-template-columns: 1fr 1fr 1fr; } .owner-timeline-filters--services label:first-child, .owner-timeline-filters--services label:nth-child(2) { grid-column: span 3; } }
@media (max-width: 700px) { .owner-timeline-filters--services { grid-template-columns: 1fr 1fr; } .owner-timeline-filters--services label:first-child, .owner-timeline-filters--services label:nth-child(2) { grid-column: span 2; } }
@media (max-width: 520px) { .owner-timeline-filters--services { grid-template-columns: 1fr; } }

/* =====================================================================
   Appointments (booking)
   Owner wizard, both calendars, the schedule agenda and the detail pages.
   Every colour comes from a token so the dark theme needs almost no
   overrides — the few that are needed sit at the end of this block.
   ===================================================================== */

/* ---- Shared bits the rest of the app now needs too ---- */
/* The booking wizard gates "Continue" and "Send request" on a real choice being
   made, so a disabled button has to *look* disabled — until now nothing in the
   design system said what that looks like. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:active, .btn[disabled]:active { transform: none; }
.alert--warning { background: var(--amber-100); color: var(--amber-600); border: 1px solid color-mix(in srgb, var(--amber-600) 30%, transparent); }
.alert--info { background: color-mix(in srgb, var(--blue-600) 12%, transparent); color: var(--blue-600); border: 1px solid color-mix(in srgb, var(--blue-600) 30%, transparent); }
.chip--muted { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
.admin-nav-link__badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 .42em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-500);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

/* ---- Status pills ---- */
.appt-pill {
    display: inline-flex; align-items: center; gap: .35em; white-space: nowrap;
    padding: .3em .8em; border-radius: 999px;
    font-size: .76rem; font-weight: 800; letter-spacing: .01em;
    background: var(--bg-muted); color: var(--muted);
}
.appt-pill--pending { background: var(--amber-100); color: var(--amber-600); }
.appt-pill--proposed { background: color-mix(in srgb, var(--blue-600) 14%, transparent); color: var(--blue-600); }
.appt-pill--confirmed { background: var(--green-100); color: var(--green-700); }
.appt-pill--declined,
.appt-pill--cancelled { background: var(--red-100); color: var(--red-600); }
.appt-pill--completed { background: var(--bg-muted); color: var(--muted); }

/* =====================================================================
   Owner: the three-step booking wizard
   ===================================================================== */
.booking-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.booking-head h1 { margin-bottom: .35rem; }
.booking-head p { max-width: 60ch; margin: 0; }
.booking-head__vehicle {
    display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.booking-head__vehicle-icon { font-size: 1.4rem; }
.booking-head__vehicle strong, .booking-head__vehicle small { display: block; }
.booking-head__vehicle small { color: var(--muted); font-size: .72rem; letter-spacing: .02em; }
.booking-empty { display: grid; gap: .5rem; justify-items: center; padding: 2.5rem 1.5rem; }

.booking-steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; flex-wrap: wrap; }
.booking-steps__item {
    display: flex; align-items: center; gap: .5rem; flex: 1 1 160px;
    padding: .6rem .9rem; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--card); color: var(--muted); font-size: .85rem; font-weight: 700;
    transition: border-color .15s ease, color .15s ease;
}
.booking-steps__item span {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
    background: var(--bg-muted); color: var(--muted); font-size: .75rem; font-weight: 800;
}
.booking-steps__item.is-active { border-color: var(--green-500); color: var(--ink); }
.booking-steps__item.is-active span { background: var(--green-500); color: #fff; }
.booking-steps__item.is-done span { background: var(--green-100); color: var(--green-700); }

.booking-panel { margin-bottom: 1.25rem; }
.booking-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.booking-panel__head h2 { margin: 0; }
.booking-panel__head p { margin: .25rem 0 0; }
.booking-panel__actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.25rem; }
.booking-search { margin: 0; min-width: min(280px, 100%); }
.booking-search__actions { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; }
.booking-workshop-picker { display: grid; grid-template-columns: minmax(280px, .92fr) minmax(0, 1.28fr); gap: 1rem; align-items: start; }
.booking-workshop-map-wrap { display: grid; gap: .65rem; position: sticky; top: 1rem; }
.booking-workshop-map { height: 460px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-muted); overflow: hidden; }
.booking-workshop-map__status { margin: 0; }
.booking-workshop-results { min-width: 0; }

.booking-workshops { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.booking-workshop { position: relative; display: block; cursor: pointer; }
.booking-workshop input { position: absolute; opacity: 0; pointer-events: none; }
.booking-workshop__body {
    display: grid; gap: .45rem; height: 100%; padding: 1rem 1.1rem;
    border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.booking-workshop:hover .booking-workshop__body { border-color: var(--line-strong); }
.booking-workshop input:focus-visible + .booking-workshop__body { outline: 2px solid var(--green-500); outline-offset: 2px; }
.booking-workshop.is-selected .booking-workshop__body { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.booking-workshop__identity { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.booking-workshop__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: color-mix(in srgb, var(--green-100) 78%, var(--card)); color: var(--green-700); font-size: 1rem; font-weight: 800; }
.booking-workshop__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-workshop__heading { display: grid; gap: .22rem; min-width: 0; flex: 1; }
.booking-workshop__top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.booking-workshop__top strong { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.booking-workshop__rating { color: var(--amber-600); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.booking-workshop__rating small { color: var(--muted); font-weight: 600; }
.booking-workshop__known {
    justify-self: start; padding: .15em .6em; border-radius: 999px;
    background: var(--green-100); color: var(--green-700); font-size: .7rem; font-weight: 800;
}
.booking-workshop__specs { display: flex; flex-wrap: wrap; gap: .3rem; }
.booking-workshop__specs .chip { font-size: .7rem; padding: .2em .6em; }
.booking-workshop__hours { display: grid; gap: .1rem; font-size: .72rem; }
.booking-workshops__empty { margin: 1rem 0 0; }

.booking-services { display: grid; gap: 1.1rem; }
.booking-service-group__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.booking-service-group__dot { width: 9px; height: 9px; border-radius: 999px; }
.booking-service-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.booking-service {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .45em .9em; border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--card); font-size: .88rem; font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.booking-service input { accent-color: var(--green-500); margin: 0; }
.booking-service:hover { border-color: var(--line-strong); }
.booking-service.is-selected { border-color: var(--green-500); background: var(--green-100); color: var(--green-700); }
.booking-note { margin-top: 1.25rem; }

.booking-schedule { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.5rem; align-items: start; }
.booking-hours { margin: .75rem 0 0; }
.booking-slots__title { margin: 0 0 .75rem; font-size: 1rem; }
.booking-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .45rem; }
.booking-slot {
    padding: .6em .2em; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700;
    cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.booking-slot:hover:not(:disabled) { border-color: var(--green-500); color: var(--green-700); }
.booking-slot.is-selected { border-color: var(--green-500); background: var(--green-500); color: #fff; }
.booking-slot.is-taken { border-style: dashed; border-color: var(--line); color: color-mix(in srgb, var(--muted) 60%, transparent); cursor: not-allowed; text-decoration: line-through; }

.booking-summary {
    display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem;
    padding: .9rem 1.1rem; border-radius: var(--r); background: var(--green-100);
    border: 1px solid color-mix(in srgb, var(--green-500) 35%, transparent);
}
.booking-summary__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--green-500); color: #fff; font-weight: 800; }
.booking-summary strong, .booking-summary small { display: block; }
.booking-summary strong { color: var(--green-700); }
.booking-summary small { color: var(--muted); }

/* =====================================================================
   The calendars — one month grid, two densities
   ===================================================================== */
.appt-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.appt-cal__nav-btn { padding: .3rem .7rem; line-height: 1; font-size: 1.1rem; }
.appt-cal__nav-btn:disabled, .appt-cal__nav-btn[disabled] { opacity: .35; pointer-events: none; }
.appt-cal__label { font-weight: 800; color: var(--ink); }
.appt-cal__today-link { display: inline-block; margin-bottom: .7rem; font-size: .78rem; font-weight: 700; }
.appt-cal__weekdays, .appt-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.appt-cal__weekdays { margin-bottom: 5px; }
.appt-cal__weekdays span { text-align: center; font-size: .68rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }

/* Compact density: the owner's slot picker and the propose modal. */
.appt-cal__day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    aspect-ratio: 1 / 1; padding: .2rem; border: 1.5px solid transparent; border-radius: 10px;
    background: var(--bg-muted); color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.appt-cal__day-num { font-size: .85rem; font-weight: 700; line-height: 1; }
.appt-cal__day-note { font-size: .58rem; font-weight: 700; color: var(--muted); line-height: 1; text-align: center; }
.appt-cal__day:hover:not(:disabled) { border-color: var(--green-500); }
.appt-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--blue-600); }
.appt-cal__day.is-selected { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.appt-cal__day.is-selected .appt-cal__day-num, .appt-cal__day.is-selected .appt-cal__day-note { color: #fff; }
.appt-cal__day.is-closed { background: transparent; border-style: dashed; border-color: var(--line); color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: not-allowed; }
.appt-cal__day.is-unavailable { opacity: .5; cursor: not-allowed; }
.appt-cal__day--outside { background: transparent; cursor: default; border: 0; }

/* Roomy density: the month view that carries booking chips. */
.appt-cal--month .appt-cal__grid--month { gap: 6px; }
.appt-cal__day--month {
    aspect-ratio: auto; min-height: 92px; align-items: stretch; justify-content: flex-start;
    padding: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    color: var(--ink); text-decoration: none; cursor: default; overflow: hidden;
}
a.appt-cal__day--month { cursor: pointer; }
a.appt-cal__day--month:hover { border-color: var(--green-500); text-decoration: none; }
.appt-cal__day--month .appt-cal__day-num { align-self: flex-start; color: var(--muted); font-size: .78rem; }
.appt-cal__day--month.is-today { border-color: var(--blue-600); box-shadow: none; }
.appt-cal__day--month.is-today .appt-cal__day-num { color: var(--blue-600); font-weight: 900; }
.appt-cal__day--month.is-selected { background: var(--card); border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
.appt-cal__day--month.is-selected .appt-cal__day-num { color: var(--green-700); }
.appt-cal__day--month.is-past { background: var(--bg-muted); }
.appt-cal__day-chips { display: grid; gap: 3px; margin-top: .3rem; min-width: 0; }

.appt-chip {
    display: flex; align-items: baseline; gap: .3rem; min-width: 0;
    padding: .12em .45em; border-radius: 5px;
    font-size: .66rem; font-weight: 700; line-height: 1.5;
    background: var(--bg-muted); color: var(--muted);
}
.appt-chip__time { font-variant-numeric: tabular-nums; font-weight: 800; }
.appt-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-chip--pending { background: var(--amber-100); color: var(--amber-600); }
.appt-chip--proposed { background: color-mix(in srgb, var(--blue-600) 15%, transparent); color: var(--blue-600); }
.appt-chip--confirmed { background: var(--green-100); color: var(--green-700); }
.appt-chip--completed { background: var(--bg-muted); color: var(--muted); }
.appt-chip--more { justify-content: center; color: var(--muted); }
/* In the legend the chip is a bare colour swatch. */
.appt-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1rem; color: var(--muted); font-size: .74rem; font-weight: 650; }
.appt-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.appt-legend .appt-chip { width: 14px; height: 14px; padding: 0; border-radius: 4px; }

/* =====================================================================
   Lists, rows and the summary panels
   ===================================================================== */
/* Cards stacked straight into the page, with no grid to space them: the week
   view and the owner's appointment both do that. 1.25rem is the separation the
   appointment grids below already use, so the stacks match them. Margins rather
   than a grid, so the neighbours' own margins collapse into it instead of
   adding to it — a header that wants more room still gets it. */
.appt-page > * + * { margin-top: 1.25rem; }

.appt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.appt-layout__main, .appt-layout__side { display: grid; gap: 1.25rem; min-width: 0; }
.appt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; }
.appt-toolbar__note { margin: 0; }
.appt-callout { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.appt-list { display: grid; gap: .5rem; }

.appt-row {
    position: relative;
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
    padding: .85rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--r); background: var(--card); color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* The headline is the row's link, stretched over the whole card. That keeps the
   row clickable while leaving room for a real <button> on top of it — a form
   cannot be nested inside an anchor. */
.appt-row__link { color: inherit; }
.appt-row__link::after { content: ""; position: absolute; inset: 0; }
.appt-row__link:hover { text-decoration: none; }
.appt-row:hover, .appt-row:focus-within { box-shadow: var(--shadow); border-color: var(--line-strong); }
.appt-row--pending { border-left-color: var(--amber-600); }
.appt-row--proposed { border-left-color: var(--blue-600); }
.appt-row--confirmed { border-left-color: var(--green-500); }
.appt-row--declined, .appt-row--cancelled { border-left-color: var(--red-600); }
.appt-row__when { display: grid; gap: .1rem; }
.appt-row__when strong { font-size: .86rem; }
.appt-row__when small { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.appt-row__body { display: grid; gap: .2rem; min-width: 0; }
.appt-row__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-row__meta { overflow-wrap: anywhere; }
.appt-row__services { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.appt-row__status { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
/* Above the stretched link, so the click lands on the button, not the row. */
.appt-row__quick { position: relative; z-index: 1; margin: 0; }

/* A row that arrived while the page was open. The live swap is otherwise
   invisible, and a booking silently appearing under the cursor is worse than no
   update at all — this says "this one is new" and then gets out of the way.
   Honoured only where motion is welcome; the tint alone carries the meaning. */
.appt-row.is-fresh, .appt-next.is-fresh {
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 22%, transparent);
    animation: appt-fresh 4s ease-out 1;
}
@keyframes appt-fresh {
    0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 45%, transparent); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .appt-row.is-fresh, .appt-next.is-fresh { animation: none; }
}
.appt-list__note { margin: 1rem 0 .4rem; font-weight: 700; letter-spacing: .02em; }

.appt-next { border-left: 4px solid var(--green-500); }
.appt-next__label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.appt-next__when { margin: .25rem 0 .4rem; }
.appt-next__where { margin: 0 0 .2rem; }
.appt-next__meta { margin: 0; }
.appt-next__actions { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; flex-wrap: wrap; }

.appt-tally__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.appt-tally__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .1rem; border-top: 1px solid var(--line); font-size: .85rem; }
.appt-tally__list li:first-child { border-top: 0; }
.appt-tally__list span { color: var(--muted); }
.appt-tally__list strong { font-size: 1.05rem; }

/* =====================================================================
   Detail pages
   ===================================================================== */
.appt-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.appt-back { font-size: .85rem; font-weight: 700; }
.appt-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.appt-detail__main, .appt-detail__side { display: grid; gap: 1.25rem; min-width: 0; }

.appt-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.appt-hero__when {
    display: grid; gap: .2rem; place-items: center; text-align: center;
    padding: 1.1rem 1.4rem; border-radius: var(--r); background: var(--green-100);
}
.appt-hero__date { color: var(--green-700); font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.appt-hero__time { color: var(--green-700); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.appt-hero__where h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.appt-hero__where p { margin: 0 0 .2rem; }
.appt-hero__links { font-size: .88rem; }

.appt-proposal__compare { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.appt-proposal__slot { display: grid; gap: .15rem; padding: .8rem 1.1rem; border-radius: var(--r); border: 1px solid var(--line); flex: 1 1 200px; }
.appt-proposal__slot--old strong { color: var(--muted); text-decoration: line-through; }
.appt-proposal__slot--new { border-color: var(--blue-600); background: color-mix(in srgb, var(--blue-600) 8%, transparent); }
.appt-proposal__arrow { color: var(--muted); font-size: 1.3rem; }
.appt-proposal__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.appt-proposal__actions form { margin: 0; }
.appt-message { margin: .75rem 0 0; padding: .7rem 1rem; border-left: 3px solid var(--line-strong); background: var(--bg-muted); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }

.appt-services { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.appt-service { display: flex; align-items: center; gap: .8rem; padding: .55rem .1rem; border-top: 1px solid var(--line); }
.appt-service:first-child { border-top: 0; }
.appt-service__icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.appt-service__icon svg { width: 20px; height: 20px; }
.appt-service strong, .appt-service small { display: block; }
.appt-service small { font-size: .72rem; }

.appt-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.appt-history li { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: .5rem .1rem; border-top: 1px solid var(--line); font-size: .88rem; }
.appt-history li:first-child { border-top: 0; }

.appt-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 1rem; border-left: 2px solid var(--line); }
.appt-timeline__item { position: relative; display: flex; gap: .6rem; }
.appt-timeline__dot { position: absolute; left: -1.55rem; top: .4rem; width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); box-shadow: 0 0 0 3px var(--card); }
.appt-timeline__item--approved .appt-timeline__dot, .appt-timeline__item--accepted .appt-timeline__dot { background: var(--green-500); }
.appt-timeline__item--proposed .appt-timeline__dot { background: var(--blue-600); }
.appt-timeline__item--declined .appt-timeline__dot, .appt-timeline__item--cancelled .appt-timeline__dot, .appt-timeline__item--rejected .appt-timeline__dot { background: var(--red-600); }
.appt-timeline__item p { margin: .2rem 0 0; }
.appt-timeline__at { display: block; margin-top: .15rem; }

.appt-cancel { margin-top: 1.25rem; display: grid; gap: .5rem; justify-items: start; }
.appt-cancel .field { width: min(340px, 100%); margin: 0; }

.appt-actions { display: grid; gap: .8rem; }
.appt-actions h2 { margin: 0; }
.appt-actions form { margin: 0; display: grid; gap: .5rem; }
.appt-actions .field { margin: 0; }
.appt-actions__propose { margin: .2rem 0; }
.appt-owner { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.appt-owner__icon { color: var(--muted); }

/* =====================================================================
   Workshop: the schedule and its day agenda
   ===================================================================== */
.appt-schedule { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.appt-schedule__day { position: sticky; top: 1rem; }
/* .appt-pending carried margin-top: 0 from an older layout. It sat at the same
   weight as the card stack above but later in the file, so it quietly cancelled
   the separation for that one card. The class stays as a markup hook. */

/* One grid row per slot; each booking spans the rows it really occupies, so an
   overlap shows up as two blocks in the same rows rather than two tidy lines. */
.appt-agenda { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 .6rem; }
.appt-agenda__ruler, .appt-agenda__track { display: grid; grid-template-rows: repeat(var(--appt-agenda-rows, 1), 34px); }
.appt-agenda__tick { color: var(--muted); font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; transform: translateY(-.35em); }
.appt-agenda__track { position: relative; grid-auto-flow: column; border-left: 1px solid var(--line); padding-left: .5rem; }
.appt-agenda__track::before {
    /* Hairlines between the slots, so a block's length is readable at a glance. */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 34px);
}
.appt-agenda__block {
    position: relative; display: grid; gap: .05rem; align-content: start; overflow: hidden;
    margin: 1px 0; padding: .35rem .55rem; border-radius: 8px;
    border-left: 3px solid var(--line-strong); background: var(--bg-muted); color: var(--ink);
}
.appt-agenda__block:hover { text-decoration: none; filter: brightness(.97); }
.appt-agenda__block strong { font-size: .74rem; font-variant-numeric: tabular-nums; }
.appt-agenda__block span { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-agenda__block small { color: var(--muted); font-size: .68rem; }
.appt-agenda__block--pending { background: var(--amber-100); border-left-color: var(--amber-600); }
.appt-agenda__block--proposed { background: color-mix(in srgb, var(--blue-600) 12%, transparent); border-left-color: var(--blue-600); }
.appt-agenda__block--confirmed { background: var(--green-100); border-left-color: var(--green-500); }

/* ---- Propose-another-time modal ---- */
.propose-modal { max-width: 860px; width: min(860px, 100%); text-align: left; max-height: 92vh; overflow-y: auto; }
.propose-modal h2 { margin: 0 0 .35rem; padding-right: 2rem; }
.propose-modal__duration { max-width: 260px; margin: 1rem 0; }
.propose-modal__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.25rem; align-items: start; }
.propose-modal__slots h3 { margin: 0 0 .6rem; font-size: .95rem; }
.propose-slot-list { display: grid; gap: 3px; max-height: 340px; overflow-y: auto; padding-right: .2rem; }
.propose-slot {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .5rem; align-items: center; text-align: left;
    padding: .45rem .6rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
    background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.propose-slot__time { font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.propose-slot__label { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.propose-slot:hover:not(:disabled) { border-color: var(--green-500); }
.propose-slot.is-selected { border-color: var(--green-500); background: var(--green-100); }
.propose-slot.is-taken { background: var(--bg-muted); border-style: dashed; cursor: not-allowed; }
.propose-slot.is-taken .propose-slot__label { color: var(--red-600); }
.propose-slot.is-blocked { opacity: .5; cursor: not-allowed; }
/* The finish time on the approve form: quiet until the length is changed, but
   always the largest thing in its own line, because it is the answer. */
.appt-actions__window {
    display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    margin: 0 0 .4rem; padding: .55rem .75rem;
    border-radius: var(--r-sm); background: var(--bg-muted);
}
.appt-actions__window strong { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.appt-proposal__length { font-weight: 700; color: var(--amber-600); }

.propose-modal__chosen { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; padding: .7rem 1rem; border-radius: var(--r); background: var(--green-100); color: var(--green-700); font-size: .9rem; }
.propose-modal__actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }

/* ---- Dark theme: the few surfaces that are not already token-driven ---- */
:root[data-theme="dark"] .booking-workshop__body,
:root[data-theme="dark"] .booking-service,
:root[data-theme="dark"] .booking-steps__item,
:root[data-theme="dark"] .appt-row,
:root[data-theme="dark"] .propose-slot,
:root[data-theme="dark"] .appt-cal__day--month { background: var(--card); }
/* :where() keeps this at the weight of a single class, so the slot's own hover,
   selected and taken rules still win in the dark theme. Spelled the old way it
   outranked all three: the selected slot lost its blue fill, and a hover left
   light text on a near-white tile. */
:where(:root[data-theme="dark"]) .booking-slot { background: var(--card); }
:root[data-theme="dark"] .appt-cal__day.is-selected { color: #05230f; }
:root[data-theme="dark"] .appt-cal__day.is-selected .appt-cal__day-num,
:root[data-theme="dark"] .appt-cal__day.is-selected .appt-cal__day-note { color: #05230f; }
:root[data-theme="dark"] .booking-summary__icon,
:root[data-theme="dark"] .admin-nav-link__badge { color: #05230f; }
:root[data-theme="dark"] .appt-agenda__block--pending,
:root[data-theme="dark"] .appt-agenda__block--confirmed { color: var(--ink); }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
    .appt-layout, .appt-detail, .appt-schedule { grid-template-columns: minmax(0, 1fr); }
    .appt-schedule__day { position: static; }
    .booking-workshop-picker { grid-template-columns: minmax(0, 1fr); }
    .booking-workshop-map-wrap { position: static; }
    .booking-workshop-map { height: 340px; }
    .booking-schedule { grid-template-columns: minmax(0, 1fr); }
    .propose-modal__grid { grid-template-columns: minmax(0, 1fr); }
    .propose-slot-list { max-height: 260px; }
}
@media (max-width: 900px) {
    .appt-cal__day--month { min-height: 74px; }
    .appt-cal__day-chips .appt-chip__label { display: none; }
}
@media (max-width: 600px) {
    .booking-head { flex-direction: column; }
    .booking-search__actions { align-items: stretch; }
    .booking-search__actions .btn, .booking-search { width: 100%; }
    .booking-steps__item { flex-basis: 100%; }
    .booking-workshops { grid-template-columns: minmax(0, 1fr); }
    .booking-workshop-map { height: 300px; }
    .appt-row { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .appt-row__when { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: .5rem; align-items: baseline; }
    .appt-row__status { justify-content: flex-start; }
    .appt-hero { grid-template-columns: minmax(0, 1fr); }
    .appt-cal__day--month { min-height: 56px; padding: .25rem; }
    .appt-cal__day-chips { display: none; }
    .appt-cal__day--month.has-bookings::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--green-500); margin: .2rem auto 0; }
    .appt-agenda { grid-template-columns: 44px minmax(0, 1fr); }
}

/* A past day in the compact picker recedes rather than shouting "Full". */
.appt-cal__day.is-past:not(.appt-cal__day--month) { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--muted) 45%, transparent); }

/* =====================================================================
   Vehicle claims + two-sided service confirmation
   ===================================================================== */

/* A third service status: work the owner did themselves, which nobody else
   can ever vouch for, so it is neither confirmed nor waiting. */
.badge--self-service { background: color-mix(in srgb, var(--blue-600) 13%, transparent); color: var(--blue-600); }
.badge--inline { margin-left: .5rem; font-size: .64rem; vertical-align: middle; }

/* ---- "Who carried out the work?" ---- */
.who-did-it { border: 0; margin: 0 0 1.1rem; padding: 0; }
.who-did-it__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; margin-top: .35rem; }
.who-did-it__option {
    display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
    padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r);
    background: var(--card); transition: border-color .15s ease, box-shadow .15s ease;
}
.who-did-it__option:hover { border-color: var(--line-strong); }
.who-did-it__option.is-selected { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.13); }
.who-did-it__option input { margin-top: .2rem; accent-color: var(--green-500); }
.who-did-it__option strong, .who-did-it__option small { display: block; }
.who-did-it__option small { margin-top: .15rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* ---- Workshop picker on the owner's record form ---- */
/* Both of these are toggled with the [hidden] attribute, and both carry a
   display from another rule (.form .field, and flex below) that would otherwise
   out-specify the browser's [hidden] { display: none }. */
.workshop-picker[hidden],
.workshop-picker__chosen[hidden] { display: none; }
.workshop-picker { position: relative; }
.workshop-picker__results { display: grid; gap: 3px; margin-top: .4rem; }
.workshop-result {
    display: grid; gap: .1rem; text-align: left; cursor: pointer;
    padding: .55rem .8rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
    background: var(--card); color: var(--ink); font: inherit;
}
.workshop-result:hover { border-color: var(--green-500); }
.workshop-result__main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Shops the owner has used before are the likely answer, so they say so. */
.workshop-result__flag {
    padding: .1em .5em; border-radius: 999px;
    background: var(--green-100); color: var(--green-700); font-size: .66rem; font-weight: 800;
}
.workshop-picker__chosen {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .4rem;
    padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--green-100);
    color: var(--green-700); font-weight: 700;
}
.workshop-picker__clear { border: 0; background: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }

/* ---- Confirmation queues (both audiences) ---- */
.confirm-list { display: grid; gap: .8rem; }
.confirm-item { border-left: 4px solid var(--amber-600); }
.confirm-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.confirm-item__title { margin: 0 0 .2rem; font-size: 1.05rem; }
.confirm-item__head p { margin: 0; }
.confirm-item__summary { margin: .8rem 0 0; }
.confirm-item__actions { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; flex-wrap: wrap; }
.confirm-item__actions form { margin: 0; }
.confirm-item__note { margin: .6rem 0 0; }

/* The same ask, inline on a single record. */
.record-confirm { margin: 1.2rem 0; padding: 1rem 1.15rem; border-radius: var(--r); background: var(--amber-100); color: var(--amber-600); }
.record-confirm p { margin: 0 0 .8rem; }
.record-confirm strong { display: block; margin-bottom: .2rem; }
.record-confirm form { margin: 0; }

/* ---- Vehicle registration + claim ---- */
.claim-callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.claim-pending { margin-bottom: 1.25rem; border-left: 4px solid var(--amber-600); }
.claim-pending h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.claim-pending__list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .1rem; }
.claim-pending__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.claim-pending__list li:first-child { border-top: 0; }
.claim-pending__list strong, .claim-pending__list small { display: block; }

.claim-card { max-width: 560px; }
.claim-card__vehicle { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.claim-card__icon { font-size: 1.6rem; }
.claim-card__vehicle strong, .claim-card__vehicle small { display: block; }
.claim-card__testcode { margin: 0 0 1rem; }
/* The code is six digits and nothing else — give it room and rhythm. */
.claim-card__code { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.claim-card__secondary { display: flex; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.claim-card__secondary form { margin: 0; }

.vehicles-empty { display: grid; gap: .5rem; justify-items: center; padding: 2.5rem 1.5rem; }
.vehicles-empty p { margin: 0; max-width: 46ch; }

/* An owner with no car chosen is a normal state, so the switcher says so calmly. */
.owner-vehicle-switcher--empty { border-style: dashed; opacity: .85; }
.owner-switcher-modal__clear { margin: .8rem 0 0; }

:root[data-theme="dark"] .who-did-it__option,
:root[data-theme="dark"] .workshop-result { background: var(--card); }

/* The bell popup's head now carries an action as well as the count. */
/* The form is the flex item, so it has to centre its button rather than let it
   sit on the form's own text baseline — otherwise "Mark all as read" rides ~2px
   below the "N new" chip beside it. */
.topbar-notifications__head form { margin: 0; display: flex; align-items: center; }
.topbar-notifications__count,
.topbar-notifications__markread { font-size: .72rem; font-weight: 800; line-height: 1.2; color: var(--blue-600); }
.topbar-notifications__markread {
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
.topbar-notifications__markread:hover { text-decoration: underline; }
.topbar-notifications__markread:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
/* With a count, an action and a title, the head needs to wrap on narrow screens. */
.topbar-notifications__head { flex-wrap: wrap; }
.topbar-notifications__head strong { margin-right: auto; }

/* =====================================================================
   Vehicle edit — compact, aligned, space-efficient
   Dense layout, crisp menu-like icons, and no oversized spec cards.
   ===================================================================== */
.section--tight { padding: 1rem 0; }

/* ---- Next-service banner ---- */
.service-due {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin: 0 0 .85rem; padding: .72rem .95rem;
    border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: 6px; background: var(--card);
}
.service-due__icon {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 4px;
    font-size: .92rem; font-weight: 800; line-height: 1;
}
.service-due__copy { display: grid; gap: .08rem; min-width: 0; }
.service-due__copy strong { font-size: .96rem; }
.service-due__copy small { color: var(--muted); font-size: .76rem; }
.service-due__vehicle { margin-left: auto; text-align: right; white-space: nowrap; }
.service-due--overdue { border-left-color: var(--red-600); background: color-mix(in srgb, var(--red-100) 55%, var(--card)); }
.service-due--overdue .service-due__icon { background: var(--red-600); color: #fff; }
.service-due--overdue .service-due__copy strong { color: var(--red-600); }
.service-due--soon { border-left-color: var(--amber-600); background: color-mix(in srgb, var(--amber-100) 55%, var(--card)); }
.service-due--soon .service-due__icon { background: var(--amber-600); color: #fff; }
.service-due--soon .service-due__copy strong { color: var(--amber-600); }
.service-due--ok { border-left-color: var(--green-500); background: color-mix(in srgb, var(--green-100) 55%, var(--card)); }
.service-due--ok .service-due__icon { background: var(--green-500); color: #fff; }
.service-due--ok .service-due__copy strong { color: var(--green-700); }
.service-due--unknown .service-due__icon { background: var(--bg-muted); color: var(--muted); }

/* ---- Vehicle details / editor ---- */
.section--tight .service-due { max-width: none; margin-inline: 0; }
.vehicle-profile { max-width: none; margin-inline: 0; padding: .95rem; display: grid; gap: .9rem; }
.vehicle-profile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .1rem;
    border-bottom: 1px solid var(--line);
}
.vehicle-profile__head-copy { min-width: 0; display: grid; gap: .28rem; }
.vehicle-profile__eyebrow {
    margin: 0;
    color: var(--blue-600);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vehicle-profile__head h1 { margin: 0; color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.15; }
.vehicle-profile__sub { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; max-width: 62ch; }
.vehicle-profile__actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.vehicle-profile__actions .btn { white-space: nowrap; }

.vehicle-profile__grid,
.vehicle-edit__grid {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    grid-template-areas:
        "media identity"
        "media specs"
        "notes notes"
        "note note";
    gap: .8rem;
    align-items: start;
}
.vehicle-edit { margin: 0; padding: 0; max-width: none; }
.vehicle-edit__group {
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-muted);
    min-width: 0;
}
.vehicle-edit__group-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    margin-bottom: .75rem;
}
.vehicle-edit__group-head-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
}
.vehicle-edit__group-head-copy { min-width: 0; display: grid; gap: .12rem; padding-top: .04rem; }
.vehicle-edit__group-head h2 { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.2; }
.vehicle-edit__group-head p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.vehicle-edit__title-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--blue-600); }
.vehicle-edit__media { grid-area: media; }
.vehicle-edit__identity { grid-area: identity; }
.vehicle-edit__specs { grid-area: specs; }
.vehicle-edit__notes { grid-area: notes; }
.vehicle-profile__note,
.vehicle-edit__note { grid-area: note; margin: -.1rem 0 0; line-height: 1.3; }
.vehicle-profile__note { color: var(--muted); font-size: .78rem; }
.vehicle-profile .field,
.vehicle-edit .field,
.admin-content .vehicle-edit .field { margin: 0; }

.vehicle-profile__photo-grid,
.vehicle-edit__photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.vehicle-profile__photo-card { margin: 0; display: grid; gap: .25rem; min-width: 0; }
.vehicle-profile__photo-frame {
    width: 100%;
    height: 86px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
}
.vehicle-profile__photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-profile__photo-frame--empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--line) 22%, var(--card));
}
.vehicle-profile__photo-caption,
.vehicle-edit__photo-caption { color: var(--muted); font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.15; }
.vehicle-edit__photo-cell { display: grid; gap: .25rem; min-width: 0; }
.vehicle-edit__photo-cell .service-photo-slot { width: 100%; height: 86px; border-radius: 8px; }
.vehicle-edit__photo-cell .service-photo-slot__placeholder { font-size: .72rem; padding: .2rem; }
.vehicle-edit__photo-cell .service-photo-slot__plus { font-size: 1rem; }

.vehicle-profile__identity-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
.vehicle-profile__fact-card {
    display: grid;
    gap: .48rem;
    align-content: start;
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}
.vehicle-profile__fact-card--make,
.vehicle-profile__fact-card--model,
.vehicle-edit__identity-field--make,
.vehicle-edit__identity-field--model { grid-column: span 3; }
.vehicle-profile__fact-card--year,
.vehicle-profile__fact-card--status,
.vehicle-profile__fact-card--plate,
.vehicle-edit__identity-field--year,
.vehicle-edit__identity-field--status,
.vehicle-edit__identity-field--plate { grid-column: span 2; }
.vehicle-profile__fact-label,
.vehicle-edit__identity-field .field__label,
.vehicle-edit__spec-label {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.15;
    text-transform: uppercase;
}
.vehicle-profile__fact-value { min-width: 0; color: var(--ink); font-size: .95rem; font-weight: 750; overflow-wrap: anywhere; }
.vehicle-profile__make { display: flex; align-items: center; gap: .65rem; }
.vehicle-profile__make-logo { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.vehicle-profile__make-text { min-width: 0; overflow-wrap: anywhere; }
.vehicle-profile__fact-value code { font-family: inherit; font-size: .92em; }
.vehicle-edit__identity-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; align-items: start; }
.vehicle-edit__identity-field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.vehicle-edit__identity-field input[type=text],
.vehicle-edit__identity-field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .68rem .8rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}
.vehicle-edit__identity-field input[type=text]:focus,
.vehicle-edit__identity-field select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.make-picker {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    align-items: center;
    min-height: 46px;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--card);
    overflow: hidden;
}
.make-picker:focus-within { outline: 2px solid rgba(29, 111, 224, .22); outline-offset: 2px; border-color: var(--blue-600); }
.make-picker__logo { width: 30px; height: 30px; margin-left: .45rem; object-fit: contain; }
.make-picker__input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .62rem .4rem .62rem .45rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: none !important;
}
.make-picker__input:focus { outline: 0; box-shadow: none; }
.make-picker__toggle { width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .96rem; cursor: pointer; }
.make-picker__toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--line) 35%, transparent); }

.vehicle-profile__spec-fields,
.vehicle-edit__spec-fields {
    display: grid;
    /* Four cards since the technical inspection joined them; auto-fit keeps the
       row honest at any width instead of pinning a count. */
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: .55rem;
    align-items: stretch;
}
.vehicle-profile__spec-card,
.vehicle-edit__spec-field {
    display: grid;
    min-height: 0;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    align-content: start;
    min-width: 0;
}
.vehicle-profile__spec-card { gap: .55rem; }
.vehicle-edit__spec-field { gap: .45rem; }
.vehicle-profile__spec-card--interval,
.vehicle-profile__spec-card--fuel,
.vehicle-profile__spec-card--transmission,
.vehicle-edit__spec-field--interval,
.vehicle-edit__spec-field--fuel,
.vehicle-edit__spec-field--transmission { grid-column: auto; }
.vehicle-profile__spec-top,
.vehicle-edit__spec-top {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .45rem;
    align-items: center;
    min-height: 30px;
}
.vehicle-edit__spec-icon-shell {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--blue-600) 10%, var(--card));
    color: var(--blue-600);
    border: 1px solid color-mix(in srgb, var(--blue-600) 18%, var(--line));
}
.vehicle-edit__field-icon { width: 16px; height: 16px; }
.vehicle-edit__spec-copy { min-width: 0; display: grid; align-content: center; }
.vehicle-edit__spec-label { display: block; font-size: .68rem; }
.vehicle-profile__spec-value {
    display: block;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vehicle-edit__spec-field select {
    min-width: 0;
    min-height: 42px;
    padding: .58rem .72rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: .93rem;
    font-weight: 750;
    line-height: 1.2;
}
.vehicle-edit__spec-field select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.vehicle-edit__notes .vehicle-edit__group-head { margin-bottom: .55rem; }
.vehicle-profile__description {
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.5;
}
.vehicle-profile__description.is-empty { color: var(--muted); }
.vehicle-edit__notes textarea { min-height: 84px; border-radius: 6px; padding: .7rem .8rem; }
.modal#vehicle-edit-modal { place-items: start center; overflow-y: auto; overscroll-behavior: contain; }
.vehicle-edit-modal { max-width: 1120px; max-height: none; margin: 1rem 0; overflow: visible; text-align: left; padding: 1rem; }
.vehicle-edit-modal__head { display: grid; gap: .24rem; margin-bottom: .9rem; }
.vehicle-edit-modal h2 { margin: 0; padding-right: 2rem; }
.vehicle-edit-modal p { margin: 0; }
.vehicle-edit__actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.buyer-vehicle-photos { margin-bottom: 1rem; }
.report-photo-card figcaption { margin-top: .45rem; color: var(--muted); font-size: .78rem; line-height: 1.35; }

@media (max-width: 1180px) {
    .vehicle-edit__grid { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .vehicle-profile__grid,
    .vehicle-edit__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "specs" "media" "notes" "note"; }
    .vehicle-profile__identity-list,
    .vehicle-edit__identity-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vehicle-profile__fact-card--make,
    .vehicle-profile__fact-card--model,
    .vehicle-edit__identity-field--make,
    .vehicle-edit__identity-field--model { grid-column: span 2; }
    .vehicle-profile__fact-card--year,
    .vehicle-profile__fact-card--status,
    .vehicle-profile__fact-card--plate,
    .vehicle-edit__identity-field--year,
    .vehicle-edit__identity-field--status,
    .vehicle-edit__identity-field--plate { grid-column: span 1; }
    .vehicle-profile__spec-fields,
    .vehicle-edit__spec-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vehicle-profile__photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vehicle-edit__photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .service-due__vehicle { margin-left: 0; width: 100%; text-align: left; }
}

@media (max-width: 600px) {
    .vehicle-profile { padding: .8rem; }
    .vehicle-profile__head { align-items: stretch; flex-direction: column; }
    .vehicle-profile__actions { justify-content: stretch; }
    .vehicle-profile__actions .btn { flex: 1 1 auto; }
    .vehicle-edit__group { padding: .75rem; }
    .vehicle-edit__group-head { grid-template-columns: 34px minmax(0, 1fr); gap: .6rem; }
    .vehicle-edit__group-head-icon { width: 34px; height: 34px; }
    .vehicle-edit__title-icon { width: 16px; height: 16px; }
    .vehicle-profile__identity-list,
    .vehicle-profile__photo-grid,
    .vehicle-profile__spec-fields,
    .vehicle-edit__photo-grid,
    .vehicle-edit__spec-fields,
    .vehicle-edit__identity-fields { grid-template-columns: minmax(0, 1fr); }
    .vehicle-profile__fact-card--make,
    .vehicle-profile__fact-card--model,
    .vehicle-profile__fact-card--year,
    .vehicle-profile__fact-card--status,
    .vehicle-profile__fact-card--plate,
    .vehicle-edit__identity-field--make,
    .vehicle-edit__identity-field--model,
    .vehicle-edit__identity-field--year,
    .vehicle-edit__identity-field--status,
    .vehicle-edit__identity-field--plate,
    .vehicle-edit__spec-field,
    .vehicle-edit__spec-field--interval,
    .vehicle-edit__spec-field--fuel,
    .vehicle-edit__spec-field--transmission { grid-column: auto; }
    .vehicle-edit__photo-cell .service-photo-slot { height: 120px; }
}


/* ---------- Workshop parts compact vertical UI ---------- */
.parts-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.parts-editor,
.parts-board { min-width: 0; }
.parts-editor { position: sticky; top: 1rem; padding: .9rem; align-self: start; }
.parts-add-form { display: grid; gap: .75rem; }
.parts-add-form__actions { margin-top: .1rem; }
.parts-board { padding: .95rem; }
.parts-board__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .85rem; }
.parts-board__head h2 { margin: 0 0 .2rem; font-size: 1rem; }
.parts-board__head p { margin: 0; }
.parts-board__total { white-space: nowrap; }
.parts-board__list { display: grid; gap: .55rem; max-height: calc(100vh - 145px); overflow: auto; padding-right: .15rem; }
.parts-current-category { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .7rem; align-items: center; margin-bottom: .9rem; }
.parts-category-thumb {
    --parts-category-thumb-size: 52px;
    --parts-category-thumb-radius: 12px;
    --parts-category-thumb-padding: 0;
    --parts-category-thumb-border: 1px solid color-mix(in srgb, var(--line) 85%, #fff);
    --parts-category-thumb-background: #fff;
    width: var(--parts-category-thumb-size);
    height: var(--parts-category-thumb-size);
    padding: var(--parts-category-thumb-padding);
    border-radius: var(--parts-category-thumb-radius);
    background: var(--parts-category-thumb-background);
    border: var(--parts-category-thumb-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.parts-category-thumb__image { width: 100%; height: 100%; object-fit: contain; display: block; }
.parts-category-thumb--lg { --parts-category-thumb-size: 52px; --parts-category-thumb-radius: 12px; }
.parts-category-thumb--sm { --parts-category-thumb-size: 44px; --parts-category-thumb-radius: 10px; }
.parts-current-category__body { min-width: 0; display: grid; gap: .08rem; }
.parts-current-category__body strong { display: block; font-size: .95rem; line-height: 1.25; }
.parts-category-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: .75rem; align-items: start; padding: .5rem; border: 1px solid color-mix(in srgb, var(--line) 92%, #fff); border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, var(--bg-muted) 8%); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.parts-category-row.is-active { border-color: rgba(22,163,74,.38); box-shadow: 0 0 0 1px rgba(22,163,74,.14); background: color-mix(in srgb, rgba(22,163,74,.08) 24%, var(--card) 76%); }
.parts-category-row.is-updated { box-shadow: 0 0 0 1px rgba(22,163,74,.18), 0 12px 24px rgba(6,24,43,.08); }
.parts-category-row__select { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: .65rem; width: 100%; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.parts-category-row__select:hover,
.parts-category-row__select:focus-visible { border-color: var(--green-500); background: var(--bg-muted); outline: none; transform: translateY(-1px); }
.parts-category-row__select.is-active { border-color: var(--green-500); background: rgba(22,163,74,.10); }
.parts-category-row__body { min-width: 0; display: grid; gap: .12rem; }
.parts-category-row__body strong { display: block; font-size: .82rem; line-height: 1.2; }
.parts-category-row__body small { display: block; color: var(--muted); font-size: .72rem; }
.parts-category-row__parts { min-width: 0; display: grid; gap: .45rem; align-content: center; padding: .1rem 0; }
.parts-category-row__parts-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.parts-chip-list { display: flex; flex-wrap: wrap; gap: .42rem; align-items: flex-start; min-height: 32px; }
.parts-category-card__empty { margin: 0; }
.part-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: min(100%, 250px); min-height: 30px; padding: .28rem .28rem .28rem .68rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 86%, var(--bg-muted) 14%); }
.part-chip.is-added { animation: part-option-added .45s ease-out; }
.part-chip__name { min-width: 0; max-width: 188px; font-size: .82rem; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-chip__delete-form { margin: 0; display: inline-flex; }
.part-chip__delete { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: rgba(6,24,43,.07); color: var(--muted); font-size: .95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.part-chip__delete:hover,
.part-chip__delete:focus-visible { background: rgba(220,38,38,.14); color: #dc2626; outline: none; }
.parts-empty-note { margin-bottom: .75rem; }
@keyframes parts-panel-flash {
    0% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    35% { box-shadow: 0 0 0 1px rgba(22,163,74,.16), 0 12px 24px rgba(6,24,43,.08); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (max-width: 1180px) {
    .parts-shell { grid-template-columns: 1fr; }
    .parts-editor { position: static; }
    .parts-board__list { max-height: none; }
}
@media (max-width: 780px) {
    .parts-board__head,
    .parts-category-row,
    .parts-category-row__parts-head { display: grid; gap: .5rem; }
    .parts-category-row { grid-template-columns: 1fr; }
    .parts-board__total { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .parts-category-row,
    .parts-category-row__select,
    .part-chip { transition: none; animation: none; }
}



/* Outlook-like owner booking calendar refresh */
.appt-cal--picker {
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, #f7fafc) 0%, var(--card) 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .06);
}
.appt-cal--picker .appt-cal__nav { margin-bottom: .65rem; }
.appt-cal--picker .appt-cal__label { font-size: 1rem; }
.appt-cal__grid--picker { gap: 4px; }
/* The blank days either side of the month keep the base grid cell shape, and a
   square filler was setting the height of the whole row it sat in. */
.appt-cal__grid--picker .appt-cal__day--outside { aspect-ratio: auto; min-height: 0; }
/* Compact on purpose: a month has to fit on one screen without scrolling, on a
   phone as much as a laptop. The cell is about half the height it was, and the
   colour does the work the extra space used to. */
.appt-cal__day--picker {
    align-items: stretch;
    justify-content: flex-start;
    aspect-ratio: auto;
    min-height: 46px;
    padding: .28rem .3rem .25rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    box-shadow: none;
}
.appt-cal__day--picker:hover:not(:disabled) {
    border-color: var(--blue-600);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
    transform: translateY(-1px);
}
.appt-cal__day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}
.appt-cal__day--picker .appt-cal__day-num {
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}
/* The whole cell is the gauge: how full a day is reads as colour before any of
   the words are read. Five bands, coloured from the same tokens the status pills
   elsewhere use so the calendar agrees with the rest of the app. */
/* A ramp, not two buckets: emptier days stay pale, and the colour warms and
   deepens as the day fills, so a month of mostly-free days still reads as
   different from a month that is filling up. */
.appt-cal__day--picker[data-load="quiet"]  { background: color-mix(in srgb, var(--green-500) 5%,  var(--card)); border-color: color-mix(in srgb, var(--green-500) 24%, var(--line)); }
.appt-cal__day--picker[data-load="open"]   { background: color-mix(in srgb, var(--green-500) 14%, var(--card)); border-color: color-mix(in srgb, var(--green-500) 45%, var(--line)); }
.appt-cal__day--picker[data-load="busy"]   { background: color-mix(in srgb, #eab308 20%,          var(--card)); border-color: color-mix(in srgb, #eab308 50%,          var(--line)); }
.appt-cal__day--picker[data-load="tight"]  { background: color-mix(in srgb, var(--amber-600) 20%, var(--card)); border-color: color-mix(in srgb, var(--amber-600) 55%, var(--line)); }
.appt-cal__day--picker[data-load="full"]   { background: color-mix(in srgb, var(--red-600) 14%,   var(--card)); border-color: color-mix(in srgb, var(--red-600) 42%, var(--line)); }
.appt-cal__day--picker[data-load="closed"],
.appt-cal__day--picker[data-load="past"]   { background: var(--bg-muted); border-color: var(--line); }

.appt-cal__day--picker[data-load="quiet"] .appt-cal__day-note,
.appt-cal__day--picker[data-load="open"]  .appt-cal__day-note { color: var(--green-700); }
.appt-cal__day--picker[data-load="busy"]  .appt-cal__day-note { color: #9a6700; }
.appt-cal__day--picker[data-load="tight"] .appt-cal__day-note { color: var(--amber-600); }
.appt-cal__day--picker[data-load="full"]  .appt-cal__day-note { color: var(--red-600); }

.appt-cal__day--picker .appt-cal__day-note {
    margin-top: auto;
    padding-top: .12rem;
    text-align: left;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.1;
    /* Wrapping, not clipping: a narrow column must never push its text over the
       day beside it, which is what a nowrap pill used to do here. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.appt-cal__day--picker.is-selected {
    background: color-mix(in srgb, var(--blue-600) 10%, white);
    border-color: var(--blue-600);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .14);
    color: var(--ink);
}
.appt-cal__day--picker.is-selected .appt-cal__day-num,
.appt-cal__day--picker.is-selected .appt-cal__day-note { color: var(--blue-600); }
.appt-cal__day--picker.is-today:not(.is-selected) { border-color: color-mix(in srgb, var(--blue-600) 45%, var(--line)); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .22); }
.appt-cal__today-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 .8rem;
    padding: .35rem .65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
}
.booking-schedule__slots {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #f8fafc) 0%, var(--card) 100%);
}
.booking-slots__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
    padding: .8rem .95rem;
    border: 1px solid color-mix(in srgb, var(--blue-600) 15%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--blue-600) 7%, white);
}
.booking-slots__summary strong,
.booking-slots__summary small { display: block; }
.booking-slots__summary small { color: var(--muted); }
.booking-slot-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .35rem; }
.booking-slot {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 0;
    /* 44px is the smallest a finger can reliably hit; this sits just above it
       so twice as many times fit on screen as before. */
    min-height: 46px;
    padding: .3rem .45rem;
    border-radius: 9px;
    background: var(--card);
    box-shadow: none;
}
.booking-slot__time { font-size: .82rem; font-weight: 800; line-height: 1.15; }
.booking-slot__state { font-size: .62rem; font-weight: 700; color: var(--muted); line-height: 1.1; }
.booking-slot:hover:not(:disabled) {
    border-color: var(--blue-600);
    /* Mixed into the card, not into white: the text stays var(--ink), which is
       light in the dark theme, so a white-ish hover tile made the time unreadable. */
    background: color-mix(in srgb, var(--blue-600) 8%, var(--card));
    color: var(--ink);
}
.booking-slot:hover:not(:disabled) .booking-slot__state { color: var(--blue-600); }
.booking-slot.is-selected {
    border-color: var(--blue-600);
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
}
.booking-slot.is-selected .booking-slot__state { color: rgba(255,255,255,.88); }
.booking-slot.is-taken {
    background: color-mix(in srgb, var(--bg-muted) 88%, var(--card));
    /* Muted rather than a fade to transparent: against the dark card the old
       70% fade came out at roughly 1.3:1, which is not readable at all. */
    color: var(--muted);
    text-decoration: none;
}
.booking-slot.is-taken .booking-slot__state { color: inherit; }
@media (max-width: 900px) {
    .appt-cal__day--picker { min-height: 44px; }
    .booking-slot-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (max-width: 600px) {
    .appt-cal--picker { padding: .5rem; }
    .appt-cal__day--picker { min-height: 42px; padding: .22rem .2rem .2rem; }
    .appt-cal__day--picker .appt-cal__day-num { font-size: .74rem; }
    .appt-cal__day--picker .appt-cal__day-note { font-size: .55rem; padding-top: .1rem; }
    .booking-schedule__slots { padding: .8rem; }
    .booking-slot-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .35rem; }
    .booking-slot { min-height: 46px; padding: .3rem .4rem; }
    .booking-slots__summary { align-items: start; flex-direction: column; }
}
:root[data-theme="dark"] .appt-cal--picker,
:root[data-theme="dark"] .booking-schedule__slots,
:root[data-theme="dark"] .booking-slots__summary,
:root[data-theme="dark"] .appt-cal__today-link {
    box-shadow: none;
}

/* =====================================================================
   Booking flow — September 2026 review
   Week schedule, the service picker, and the phone fixes the propose
   modal needed. Tokens only; no new colours.
   ===================================================================== */

/* ---- The workshop's week ------------------------------------------------ */
.appt-week-card { padding: 1rem; }
.appt-schedule-head { align-items: center; gap: 1rem; flex-wrap: wrap; }
.appt-schedule-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.appt-view-tabs { flex: 0 0 auto; }

.appt-week__nav {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-bottom: .85rem;
}
.appt-week__label { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.appt-week__label strong { font-size: 1rem; }
.appt-week__today { font-size: .78rem; }

/* Seven columns plus the ruler. The grid scrolls sideways inside its own box
   rather than pushing the page, which is what keeps a 7-day timetable usable on
   a phone without pretending a phone has room for seven columns. */
.appt-week__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.appt-week__grid {
    display: grid;
    grid-template-columns: 3.4rem repeat(7, minmax(6.2rem, 1fr));
    grid-template-rows: auto 1fr;
    gap: 2px;
    min-width: 46rem;
}
.appt-week__corner { background: transparent; }

.appt-week__head {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .45rem .3rem .5rem;
    border-bottom: 2px solid var(--line);
    text-align: center;
}
.appt-week__head.is-today { border-bottom-color: var(--blue-600); }
.appt-week__head.is-closed { opacity: .55; }
.appt-week__weekday { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.appt-week__daynum { font-size: 1.05rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.appt-week__head.is-today .appt-week__daynum { color: var(--blue-600); }
.appt-week__daymeta { font-size: .66rem; color: var(--muted); }

/* One ruler shared by every column, so 10:00 on Monday sits on the same line as
   10:00 on Thursday and the eye can read across. */
.appt-week__ruler {
    display: grid;
    grid-template-rows: repeat(var(--week-rows), minmax(1.35rem, 1fr));
    padding-top: 2px;
}
.appt-week__tick {
    font-size: .64rem; color: var(--muted); text-align: right; padding-right: .35rem;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.appt-week__tick.is-hour { color: var(--ink); font-weight: 600; }

.appt-week__col {
    display: grid;
    grid-template-rows: repeat(var(--week-rows), minmax(1.35rem, 1fr));
    position: relative;
    padding-top: 2px;
}
.appt-week__col.is-today { background: color-mix(in srgb, var(--blue-600) 4%, transparent); }
.appt-week__cell { grid-column: 1; border-top: 1px solid var(--line); }
.appt-week__cell:nth-child(2n) { border-top-style: dashed; }
/* Hours the workshop is shut are shaded, not removed: dropping the rows would
   shift every block in the columns beside it. */
.appt-week__cell.is-outside { background: repeating-linear-gradient(135deg, var(--bg-muted) 0 6px, transparent 6px 12px); border-top-color: transparent; }

.appt-week__entry {
    /* The column defines rows only. Anything left to auto-placement that lands
       on an occupied row opens an implicit SECOND column, and the day splits in
       half. Pinning one side is not enough — whichever side is left on auto is
       the one that gets bumped — so the cell is pinned to column 1 as well and
       the booking simply lies over it. */
    grid-column: 1;
    position: relative;
    display: flex; flex-direction: column; gap: .05rem;
    margin: 0 2px;
    padding: .28rem .4rem .32rem;
    border-radius: var(--r-sm);
    border-left: 3px solid currentColor;
    font-size: .7rem;
    overflow: hidden;
    min-width: 0;
}
.appt-week__entry strong { font-size: .68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Wide enough for the range, or narrow enough that only the start fits. */
.appt-week__from { display: none; }
.appt-week__entry span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-week__entry--pending   { background: var(--amber-100); color: var(--amber-600); }
.appt-week__entry--proposed  { background: color-mix(in srgb, var(--blue-600) 12%, var(--card)); color: var(--blue-600); }
.appt-week__entry--confirmed { background: var(--green-100); color: var(--green-700); }
.appt-week__entry--completed { background: var(--bg-muted); color: var(--muted); }
.appt-week__entry--blocked {
    background: repeating-linear-gradient(135deg, var(--slate-100) 0 5px, var(--bg-muted) 5px 10px);
    color: var(--slate-600);
    border-left-style: dashed;
}
.appt-week__link { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .05rem; padding: .28rem .4rem; color: inherit; text-decoration: none; }
.appt-week__link:hover { text-decoration: none; }
.appt-week__entry.is-saving { opacity: .55; }

/* The resize handle. Only pending and confirmed bookings get one — a proposed
   slot is a specific window the owner is being asked to accept. */
.appt-week__grip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
    border: 0; padding: 0; background: transparent;
    cursor: ns-resize; touch-action: none;
}
.appt-week__grip::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px;
    transform: translateX(-50%); border-radius: 2px; background: currentColor; opacity: .28;
}
.appt-week__entry:hover .appt-week__grip::after,
.appt-week__grip:focus-visible::after { opacity: .8; }
.appt-week__entry.is-resizing { box-shadow: 0 0 0 2px var(--green-500); z-index: 2; }
/* A movable booking takes the pointer itself, so touch-action has to come off
   the whole block rather than just a handle: a finger starting on one drags it
   instead of scrolling the grid. */
.appt-week__entry[data-appt-movable] { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
/* The stretch being marked out by a drag: a preview, not a block yet. */
.appt-week__entry--draft { grid-column: 1; display: grid; place-items: center; background: color-mix(in srgb, var(--blue-600) 14%, transparent); border: 1px dashed var(--blue-600); color: var(--blue-600); font-weight: 700; pointer-events: none; }
.appt-week__entry.is-moving { cursor: grabbing; opacity: .92; z-index: 3; box-shadow: 0 0 0 2px var(--blue-600), 0 8px 18px rgba(11,36,64,.22); }
.appt-week__preview {
    position: absolute; right: 3px; bottom: 3px; z-index: 3;
    padding: .1rem .3rem; border-radius: 4px;
    background: var(--ink); color: var(--white);
    font-size: .62rem; font-weight: 700;
}

.appt-week__unblock {
    position: absolute; top: 1px; right: 2px; z-index: 3;
    border: 0; background: transparent; color: inherit;
    font-size: .85rem; line-height: 1; cursor: pointer; padding: .1rem .2rem;
    opacity: .5;
}
.appt-week__unblock:hover { opacity: 1; }
.appt-week__hint { margin: .8rem 0 0; }
.appt-chip--blocked { background: var(--slate-100); color: var(--slate-600); }
.appt-agenda__block--blocked {
    background: repeating-linear-gradient(135deg, var(--slate-100) 0 5px, var(--bg-muted) 5px 10px);
    color: var(--slate-600);
    position: relative;
}

/* ---- Holding time back -------------------------------------------------- */
.block-form { display: flex; flex-direction: column; gap: .8rem; text-align: left; }
.block-form__times { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* ---- "Which car is this for?" ------------------------------------------- */
/* Shown only when the account has no car selected, because booking then has to
   ask rather than quietly point the whole account at whatever the URL named. */
.booking-vehicle-ask {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.booking-vehicle-ask__copy { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.booking-vehicle-ask__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Step one lost its heading, so the search is the only thing left on this row
   and belongs on the right where it was, not stretched across. */
.booking-panel__head--search { justify-content: flex-end; }
/* ---- The service picker ------------------------------------------------- */
.booking-services { margin-bottom: 1.25rem; }
.booking-services__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.booking-services__head h3 { margin: 0; font-size: 1rem; }
.booking-services__list { display: flex; flex-wrap: wrap; gap: .45rem; }
.booking-service {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .75rem;
    min-height: 44px;
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink);
    font: inherit; font-size: .85rem; cursor: pointer; text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.booking-service:hover { border-color: var(--green-500); }
.booking-service.is-selected { border-color: var(--green-500); background: var(--green-100); color: var(--green-700); }
.booking-service__icon { display: inline-flex; width: 15px; height: 15px; flex: none; }
.booking-service__icon svg { width: 100%; height: 100%; }
.booking-service__minutes { font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.booking-service.is-selected .booking-service__minutes { color: var(--green-700); }

/* ---- The earliest opening ----------------------------------------------- */
.booking-earliest {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    margin-bottom: .8rem; padding: .7rem .85rem;
    border: 1.5px solid var(--green-500); border-radius: var(--r);
    background: var(--green-100); color: var(--green-700);
    font: inherit; text-align: left; cursor: pointer;
}
.booking-earliest:hover { background: color-mix(in srgb, var(--green-500) 18%, var(--card)); }
.booking-earliest__flash { font-size: 1.05rem; }
.booking-earliest__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.booking-earliest__body small { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.booking-earliest__body strong { font-size: .92rem; }
.booking-earliest__take { font-size: .78rem; font-weight: 800; white-space: nowrap; }

/* ---- Time of day -------------------------------------------------------- */
.booking-daypart { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.booking-daypart__chip {
    padding: .4rem .7rem; min-height: 36px;
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--muted);
    font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.booking-daypart__chip:hover { border-color: var(--blue-600); color: var(--blue-600); }
.booking-daypart__chip.is-active { border-color: var(--blue-600); background: var(--blue-600); color: var(--white); }

/* ---- The action bar ----------------------------------------------------- */
.booking-chosen { margin: .2rem 0 0; font-weight: 700; color: var(--ink); }
.booking-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.booking-actions .booking-summary { margin: 0; flex: 1; min-width: 12rem; }

/* ---- Owner: change or cancel ------------------------------------------- */
.appt-change { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.appt-change h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.appt-change__actions { margin: .8rem 0 1rem; }
.appt-change .appt-cancel { margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.appt-ics { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }

/* ---- How long a request has waited ------------------------------------- */
.appt-row__waiting {
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: .15rem .4rem; border-radius: 4px;
    background: var(--bg-muted); color: var(--muted);
    white-space: nowrap;
}
.appt-row__waiting.is-stale { background: var(--amber-100); color: var(--amber-600); }

/* ---- Per-service length on the parts page ------------------------------ */
.part-chip__duration-form { display: inline-flex; align-items: center; gap: .25rem; }
.part-chip__duration {
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--card); color: var(--muted);
    font: inherit; font-size: .72rem; padding: .1rem .2rem;
    max-width: 5.4rem;
}
.part-chip__duration:focus { color: var(--ink); border-color: var(--green-500); }
/* Visible only without JavaScript, or to a keyboard user in the form — the
   select saves itself on change when scripting is available. */
.part-chip__duration-save {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.part-chip__duration-form:focus-within .part-chip__duration-save {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    padding: .12rem .4rem; border: 1px solid var(--green-500); border-radius: 6px;
    background: var(--green-100); color: var(--green-700);
    font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer;
}

/* ---- Booking rules on the settings page -------------------------------- */
.settings-booking-rules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; width: 100%; }

/* =====================================================================
   Phone and tablet
   ===================================================================== */
@media (max-width: 900px) {
    .appt-week__grid { min-width: 42rem; }

    /* The propose modal was the hardest screen on the site to use on a phone:
       37px rows, and a scroller nested inside the modal's own scroller so a
       swipe two millimetres to the side moved a different thing. */
    .propose-modal { max-height: 94vh; }
    .propose-slot-list {
        max-height: none;              /* one scrolling surface, not two */
        overflow: visible;
        grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
        display: grid;
        gap: .5rem;
    }
    .propose-slot {
        grid-template-columns: minmax(0, 1fr);
        gap: .1rem;
        min-height: 56px;              /* was 37px — under the 44px minimum */
        padding: .55rem .6rem;
        align-content: center;
    }
    .propose-slot__time { font-size: .95rem; }
    .propose-slot__label { white-space: normal; font-size: .72rem; }
    /* Times first: the month grid above them pushed the whole timetable below
       the fold on a phone. */
    .propose-modal__grid { display: flex; flex-direction: column; }
    .propose-modal__slots { order: 1; }
    .propose-modal__grid > .appt-cal { order: 2; }

    .booking-vehicle-ask { align-items: stretch; flex-direction: column; }
    .booking-vehicle-ask__actions .btn { flex: 1; }
    .booking-panel__head--search { justify-content: stretch; }
    .booking-earliest__take { display: none; }
    .booking-daypart__chip { flex: 1 1 calc(50% - .35rem); }

    /* The slot grid is taller than the viewport, so the submit button used to
       be a long scroll away from the time that was just chosen. */
    .booking-actions {
        position: sticky; bottom: 0; z-index: 5;
        margin: 1rem -1rem -1rem;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: var(--card);
        box-shadow: 0 -6px 18px rgba(11, 36, 64, .09);
    }
    .booking-actions .btn { flex: 1; }
    .appt-schedule-head { flex-direction: column; align-items: stretch; }
    .appt-schedule-head__actions .btn { flex: 1; }
}

@media (max-width: 600px) {
    .block-form__times { grid-template-columns: 1fr; }
    .booking-services__list { gap: .4rem; }
    .booking-service { font-size: .8rem; padding: .45rem .65rem; }
    .appt-week__grid { min-width: 38rem; grid-template-columns: 2.9rem repeat(7, minmax(4.8rem, 1fr)); }
    .appt-week__entry span { font-size: .64rem; }
    /* A 77px column clips "09:00 – 10:00" mid-digit; the block's height
       already says how long it runs. */
    .appt-week__range { display: none; }
    .appt-week__from { display: block; }
}

/* ---- Dark theme: the surfaces that are not already token-driven --------- */
:root[data-theme="dark"] .booking-service,
:root[data-theme="dark"] .booking-daypart__chip:not(.is-active),
:root[data-theme="dark"] .part-chip__duration,
:root[data-theme="dark"] .appt-change,
:root[data-theme="dark"] .appt-week__entry--proposed { background: var(--card); }
:root[data-theme="dark"] .booking-service.is-selected,
:root[data-theme="dark"] .booking-earliest { background: var(--green-100); color: var(--green-700); }
/* The active chip is a blue fill in both themes, so it keeps white text in
   both — the dark ink used on the green chips would vanish on it. */
:root[data-theme="dark"] .booking-daypart__chip.is-active { color: #06182b; }
/* --red-600 and --amber-600 keep their light-theme values in the dark palette,
   which leaves them almost invisible on a dark cell. The calendar states them
   explicitly, the way --green-700 already is. */
:root[data-theme="dark"] .appt-cal__day--picker[data-load="tight"] .appt-cal__day-note { color: #fbbf24; }
:root[data-theme="dark"] .appt-cal__day--picker[data-load="full"]  .appt-cal__day-note { color: #f87171; }
/* The slot summary mixes its background with a literal white, which leaves a
   near-white box under near-white text once the theme flips. */
:root[data-theme="dark"] .booking-slots__summary {
    background: var(--bg-muted);
    border-color: color-mix(in srgb, var(--blue-600) 26%, var(--line));
}
:root[data-theme="dark"] .appt-week__preview { background: var(--line-strong); color: var(--ink); }

/* Service-entry catalog: size the panel to its actual category content. The old
   viewport-height rule left a large blank area when a workshop had only one
   configured category. Long catalogs still scroll instead of stretching the page. */
.section--service-entry .service-catalog-panel {
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 233px);
}
.section--service-entry .parts-catalog {
    flex: 0 1 auto;
    max-height: calc(100vh - 360px);
}
@media (max-width: 860px) {
    .section--service-entry .service-catalog-panel {
        height: auto;
        max-height: none;
    }
    .section--service-entry .parts-catalog {
        max-height: none;
        overflow-y: visible;
    }
}
@media (max-height: 780px) and (min-width: 861px) {
    .section--service-entry .service-catalog-panel {
        min-height: 0;
        max-height: calc(100vh - 180px);
    }
    .section--service-entry .parts-catalog {
        max-height: calc(100vh - 310px);
    }
}


/* Workshop level artwork: lightweight transparent corner badge overlays. */
.workshop-public-hero__avatar,
.vehicle-header__avatar,
.booking-workshop__avatar { position: relative; overflow: visible; }
.workshop-public-hero__avatar > img,
.vehicle-header__avatar > img,
.booking-workshop__avatar > img { border-radius: inherit; }
.workshop-level-avatar-badge {
    position: absolute;
    z-index: 2;
    right: -7px;
    bottom: -7px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 1px;
    border: 2px solid var(--card, #fff);
    border-radius: 50%;
    background: var(--card, #fff);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .24);
    pointer-events: none;
}
.workshop-level-avatar-badge img,
.workshop-level-avatar-badge__image { width: 100%; height: 100%; object-fit: contain; display: block; }
.vehicle-header__avatar .workshop-level-avatar-badge { width: 25px; height: 25px; right: -5px; bottom: -5px; }
.booking-workshop__avatar .workshop-level-avatar-badge { width: 23px; height: 23px; right: -5px; bottom: -5px; }
.workshop-public-hero__avatar .workshop-level-avatar-badge { width: 36px; height: 36px; }
/* The level ladder as chips: all three tiers shown, the workshop's own picked
   out and the other two faded back, so a visitor reads both "what this one is"
   and "out of what". No score, progress bar or upgrade prompt — the full
   .workshop-level-card below is for the workshop's own dashboard and the admin
   view, where progress is the point. */
.workshop-level-track { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.workshop-level-chip {
    display: inline-flex;
    align-items: center;
    gap: .38em;
    padding: .3em .8em;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--workshop-level-color);
    background: color-mix(in srgb, var(--workshop-level-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--workshop-level-color) 42%, transparent);
}
.workshop-level-chip img { width: 1.05em; height: 1.05em; object-fit: contain; display: block; }
/* Inside a track the non-current tiers recede. Opacity rather than a muted
   colour so the tier's own hue still reads through at a glance. */
.workshop-level-track .workshop-level-chip { opacity: .4; }
.workshop-level-track .workshop-level-chip.is-current {
    opacity: 1;
    background: color-mix(in srgb, var(--workshop-level-color) 20%, transparent);
    border-color: var(--workshop-level-color);
}
/* ---- Admin: workshop editing, level moves and the credit ledger ---- */
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.1rem; margin-bottom: 1.2rem; }
.admin-form-grid__wide { grid-column: 1 / -1; }
.admin-subheading { margin: 1.4rem 0 .6rem; font-size: 1rem; }
.admin-hours-grid { display: grid; gap: .45rem; margin-bottom: 1.2rem; }
.admin-hours-row { display: grid; grid-template-columns: 8rem auto auto auto 1fr; align-items: center; gap: .5rem; }
.admin-hours-row__day { font-weight: 700; font-size: .9rem; }
.admin-hours-row__sep { color: var(--muted); }
.admin-hours-row__closed { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
@media (max-width: 620px) { .admin-hours-row { grid-template-columns: 1fr auto auto; } .admin-hours-row__day { grid-column: 1 / -1; } }
/* A live Stripe subscription is not changed by editing the level here, so the
   page has to say so rather than let the two drift apart silently. */
.admin-warning-note { padding: .6rem .8rem; border-radius: 8px; font-size: .85rem;
    color: var(--amber-600, #8a6400); background: color-mix(in srgb, var(--amber-600, #b45309) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber-600, #b45309) 35%, transparent); }
.admin-warning-note--inline { display: inline-block; padding: .1rem .45rem; border-radius: 999px; }
.admin-table tr.is-current-level { background: color-mix(in srgb, var(--green-600) 8%, transparent); }
/* Credit is money in the workshop's favour, so it reads as a positive on the
   billing page rather than as just another neutral statistic. */
.summary-card--credit { border-color: color-mix(in srgb, var(--green-600) 45%, var(--line)); }
.summary-card--credit .summary-card__value { color: var(--green-600); }
.billing-credit-note { padding: .7rem .9rem; margin: 0 0 1rem; border-radius: 8px; font-size: .88rem;
    color: var(--green-600); background: color-mix(in srgb, var(--green-600) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green-600) 32%, transparent); }
.admin-table td.is-positive { color: var(--green-600); font-weight: 700; }
.admin-table td.is-negative { color: var(--amber-600, #b45309); font-weight: 700; }

/* A workshop that has used its whole allowance cannot log services until it
   buys the next level, so the card stops being decorative and says so. */
.workshop-level-card.is-blocked { border-color: var(--amber-600, #b45309); border-left-color: var(--amber-600, #b45309); }
.workshop-level-card.is-blocked .workshop-level-card__track > span { background: var(--amber-600, #b45309); }
.workshop-level-card__warn { color: var(--amber-600, #b45309); font-weight: 700; }
.workshop-level-card__note { margin: 0 0 .5rem; font-size: .82rem; color: var(--muted); }
.workshop-level-card__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Table-row variant: the same ladder at the size of the other row metadata. */
.workshop-level-track--sm { gap: .2rem; margin-top: .25rem; }
.workshop-level-track--sm .workshop-level-chip {
    padding: .12em .5em;
    font-size: .66rem;
    gap: .25em;
}

.workshop-level-card {
    display: grid;
    gap: .65rem;
    margin: .9rem 0 1rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, var(--workshop-level-color) 38%, var(--line));
    border-left: 4px solid var(--workshop-level-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--workshop-level-color) 6%, var(--card));
}
.workshop-level-card__head,
.workshop-level-card__identity,
.workshop-level-card__progress-meta { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.workshop-level-card__identity { justify-content: flex-start; }
.workshop-level-card__mark { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; }
.workshop-level-card__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.workshop-level-card__identity > span:last-child { display: grid; gap: .08rem; }
.workshop-level-card__identity .eyebrow { color: var(--workshop-level-color); font-size: .66rem; }
.workshop-level-card__score,
.workshop-level-card__progress-meta { color: var(--muted); font-size: .72rem; }
.workshop-level-card__progress-meta { margin-bottom: .28rem; }
.workshop-level-card__track { height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--workshop-level-color) 16%, var(--bg-muted)); }
.workshop-level-card__track span { display: block; height: 100%; border-radius: inherit; background: var(--workshop-level-color); }
.workshop-level-inline { display: inline-flex; align-items: center; gap: .28rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
.workshop-level-inline__dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #16a34a; }
.workshop-level-inline--premium .workshop-level-inline__dot { background: #a8b0bb; }
.workshop-level-inline--gold .workshop-level-inline__dot { background: #d4a72c; }
.gamification-admin-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gamification-admin-level { min-width: 0; padding: .9rem; border: 1px solid color-mix(in srgb, var(--gamification-level-color) 45%, var(--line)); border-top: 3px solid var(--gamification-level-color); border-radius: 10px; }
.gamification-admin-level legend { padding: 0 .3rem; font-weight: 800; }
.gamification-level-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 50%; background: var(--gamification-level-color); }
.gamification-admin-actions { grid-column: 1 / -1; }
@media (max-width: 800px) { .gamification-admin-form { grid-template-columns: 1fr; } .gamification-admin-actions { grid-column: auto; } }
@media (max-width: 560px) { .workshop-level-card__head { align-items: flex-start; flex-direction: column; } .workshop-public-hero__avatar .workshop-level-avatar-badge { width: 31px; height: 31px; } }

/* ---- Promotion clash warning ------------------------------------------- */
.promotion-conflict { border: 1px solid var(--amber-300, #f0c36d); border-radius: 16px; background: var(--amber-100, #fdf6e3); padding: .9rem 1rem; display: grid; gap: .6rem; }
.promotion-conflict__title { margin: 0; font-size: .95rem; color: var(--amber-600, #8a6400); }
.promotion-conflict__list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .88rem; }
.promotion-conflict__list span { display: block; }
.promotion-conflict__kind { color: var(--muted); font-size: .82rem; }
.promotion-conflict__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ======================================================================
   Homepage hero — multiplane parallax that follows the pointer.

   home-hero.js writes four numbers here and nothing else:
     --mx / --my   where the pointer is, -1..1 from the centre
     --lx / --ly   the same as percentages, for the light
     --beam-l / -r how close the pointer is to each headlight, 0..1
   Every movement below is CSS arithmetic on those, so the planes stay on
   the compositor and the script never touches layout. Their defaults are
   the resting state, which is also what a phone and a reduced-motion
   visitor see for good.
   ====================================================================== */
.hero-scene {
    --mx: 0; --my: 0;
    --lx: 50%; --ly: 42%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(820px, 90vh);
    display: grid;
    align-items: center;
    /* Near-black, because the picture supplies all the light: anything brighter
       here and the plate's own darkened edges would read as bars down the sides. */
    background: #04070d;
    color: #eef4fa;
}
/* The stage is the picture: it keeps the plate's aspect ratio and is sized to
   cover the hero, which means a percentage inside it is a percentage of the
   photograph. That is what lets the headlight glows be placed on the actual
   lamps rather than guessed at. On a wide screen the whole scene shifts right,
   clearing the left third for the copy so the headline never lands on a lamp.
   Both planes live inside, so they stay registered with each other. */
.hero-scene__stage {
    position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none;
    height: 100%; aspect-ratio: 2688 / 1792; min-width: 118%;
    transform: translate(-50%, -50%);
}
/* The plate falls away to black at its own edges, so on a wide screen it can be
   smaller than the hero and sit off-centre without any border to notice: the
   car lands clear of the card row, and the left third is free for the copy. */
@media (min-width: 1000px) {
    .hero-scene__stage {
        height: 92%; min-width: 0;
        transform: translate(-50%, -50%) translate(9%, -4%);
    }
}
.hero-scene__plane { position: absolute; inset: 0; will-change: transform; }
.hero-scene__plane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Nearest moves most: that is the whole illusion. The car also swings a
   degree and a half, which is as far as a flat photograph can be pushed
   before it starts to shear. */
.hero-scene__plane--rays {
    transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0) scale(1.06);
    mix-blend-mode: screen; opacity: .85;
}
.hero-scene__plane--backdrop {
    transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -9px), 0) scale(1.045);
}
.hero-scene__plane--car {
    transform:
        perspective(1400px)
        translate3d(calc(var(--mx) * -34px), calc(var(--my) * -18px), 0)
        rotateY(calc(var(--mx) * 1.6deg))
        rotateX(calc(var(--my) * -1.1deg))
        scale(1.02);
    transform-origin: 50% 70%;
}
.hero-scene__plane--car img { object-position: 50% 60%; }

/* The headlights answer the pointer. Two soft discs where the lamps are,
   lit by --beam-l / --beam-r, plus a constant glow so they are never dead. */
.hero-scene__beam {
    --beam: 0;
    position: absolute; top: 48.2%; width: 13%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(calc(1 + var(--beam) * .35));
    background: radial-gradient(circle, rgba(214,236,255,.85), rgba(150,200,255,.28) 38%, transparent 68%);
    opacity: calc(.20 + var(--beam) * .55);
    mix-blend-mode: screen;
    transition: opacity .25s ease;
}
/* Where the lamps are on the plate, measured off it by the script that built
   it. The script that lights them reads these positions back from the page
   rather than being told them again. */
.hero-scene__beam--left { left: 28.8%; }
.hero-scene__beam--right { left: 70.9%; }

/* Something for the car to stand on. It leans the opposite way to the car,
   which is what stops the car reading as a sticker sliding about. */
.hero-scene__ground {
    position: absolute; left: 50%; top: 77.1%; width: 40%; height: 10%;
    transform: translate(-50%, -20%) translate3d(calc(var(--mx) * 16px), 0, 0);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.62), transparent 70%);
    filter: blur(6px);
}

/* The light that follows the cursor, and the frame that keeps the copy legible. */
.hero-scene__spot {
    position: absolute; inset: 0;
    background: radial-gradient(520px circle at var(--lx) var(--ly), rgba(190,225,255,.16), transparent 62%);
    mix-blend-mode: screen; opacity: 0; transition: opacity .4s ease;
}
.hero-scene.is-alive .hero-scene__spot { opacity: 1; }
.hero-scene__vignette {
    position: absolute; inset: 0;
    background:
        linear-gradient(95deg, rgba(5,9,16,.9) 0%, rgba(5,9,16,.62) 30%, rgba(5,9,16,0) 58%, rgba(5,9,16,.35) 100%),
        linear-gradient(to bottom, rgba(5,9,16,.55) 0%, rgba(5,9,16,0) 22%, rgba(5,9,16,0) 58%, rgba(5,9,16,.82) 100%);
}

/* ---- The copy over the top --------------------------------------------- */
.hero-scene__content {
    position: relative; z-index: 1;
    display: grid; grid-template-rows: 1fr auto;
    align-content: center; gap: 2.6rem;
    padding-top: 3.2rem; padding-bottom: 2.6rem;
    min-height: inherit;
}
.hero-copy { max-width: 560px; align-self: center; transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 3px), 0); }
.hero-copy__eyebrow {
    display: inline-block; margin-bottom: .7rem;
    font-size: .74rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: #7ee3b1;
}
.hero-copy h1 {
    margin: 0 0 .9rem; color: #fff; line-height: 1.08; letter-spacing: -.01em;
    font-size: clamp(2rem, 4vw, 3.2rem);
    text-shadow: 0 2px 30px rgba(4,10,20,.55);
}
.hero-copy__lead { margin: 0 0 1.4rem; max-width: 52ch; color: #cbd9e7; font-size: 1.05rem; line-height: 1.6; }
.hero-copy__aside { margin: 1rem 0 0; color: #a9bdd1; font-size: .9rem; }
.hero-copy__aside a { color: #8fe7b8; font-weight: 700; }

.hero-lookup { margin: 0; }
.hero-lookup__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-lookup__row input {
    flex: 1 1 260px; min-width: 0; height: 50px; padding: 0 .95rem;
    border: 1px solid rgba(255,255,255,.28); border-radius: 14px;
    background: rgba(255,255,255,.94); color: var(--ink);
    font-size: 1rem; font-weight: 600; letter-spacing: .04em;
}
.hero-lookup__row input::placeholder { color: #7b8b9c; font-weight: 500; letter-spacing: normal; }
.hero-lookup__row input:focus { outline: 3px solid rgba(126,227,177,.55); outline-offset: 1px; background: #fff; }
.hero-lookup__row .btn { height: 50px; border-radius: 14px; flex: 0 0 auto; }
.hero-lookup__hint { margin: .7rem 0 0; color: #a9bdd1; font-size: .86rem; }
.hero-lookup__hint code { background: rgba(255,255,255,.12); color: #e8f2fb; padding: .1rem .4rem; border-radius: 6px; font-size: .84rem; }

/* ---- The three cards ---------------------------------------------------- */
/* --proximity is 1 when the pointer is on a card and 0 when it is away. At
   rest they sit at .82 opacity: readable without a mouse, brighter with one. */
.hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hero-card {
    --proximity: 0;
    display: grid; gap: .2rem;
    padding: .95rem 1.05rem;
    border: 1px solid rgba(255,255,255,calc(.12 + var(--proximity) * .22));
    border-radius: 18px;
    background: rgba(10,17,28,calc(.42 + var(--proximity) * .16));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    color: #eef4fa;
    opacity: calc(.82 + var(--proximity) * .18);
    transform:
        translate3d(calc(var(--mx) * -12px), calc(var(--my) * -7px), 0)
        translateY(calc(var(--proximity) * -4px));
    box-shadow: 0 18px 40px rgba(2,6,14,calc(.18 + var(--proximity) * .22));
    transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
.hero-card:hover, .hero-card:focus-visible { text-decoration: none; }
.hero-card:focus-visible { outline: 3px solid rgba(126,227,177,.65); outline-offset: 3px; }
.hero-card__eyebrow { font-size: .68rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: #7ee3b1; }
.hero-card strong { color: #fff; font-size: 1rem; }
.hero-card__note { color: #b6c7d8; font-size: .85rem; line-height: 1.45; }

/* ---- The proof band under it -------------------------------------------- */
.section--proof { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.proof-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.6rem 2.4rem; align-items: center; }
.proof-figures { margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; }
/* No review on file yet: the figures take the whole band rather than huddling
   in a column beside nothing. */
.proof-figures:only-child { justify-content: space-between; gap: 1.2rem; }
.proof-figures dt { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.proof-figures dd { margin: .15rem 0 0; color: var(--ink); font-size: 1.9rem; font-weight: 850; line-height: 1; }
.proof-quote { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.proof-quote__stars { color: #f5b301; font-size: .95rem; }
.proof-quote blockquote { margin: .4rem 0 .55rem; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.proof-quote figcaption { color: var(--muted); font-size: .85rem; }
.proof-quote__rule { display: block; margin-top: .35rem; font-size: .78rem; }

@media (max-width: 1000px) {
    .hero-scene__content { gap: 1.8rem; }
    .hero-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .proof-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .hero-scene { min-height: 0; }
    /* Filling a tall narrow hero with a wide picture would crop it to an
       unreadable piece of grille, so on a phone the plate sits across the top
       at its own proportions and the copy runs down over it. */
    .hero-scene__stage {
        top: 0; height: auto; width: 168%; min-width: 0; aspect-ratio: 2688 / 1792;
        transform: translateX(-50%);
    }
    .hero-scene__content { padding-top: 2.4rem; padding-bottom: 2.6rem; }
    .hero-scene__plane img { object-position: 50% 58%; }
    /* The copy runs the full width here, so the picture is held further back. */
    .hero-scene__vignette { background: linear-gradient(to bottom, rgba(4,7,13,.78) 0%, rgba(4,7,13,.68) 42%, rgba(4,7,13,.94) 100%); }
    .hero-lookup__row .btn { width: 100%; }
    .proof-figures dd { font-size: 1.5rem; }
}
/* ---- Workshop plans, one per reputation level -------------------------- */
/* Every colour here comes from --level-color, which the view sets from the
   admin setting, so a changed colour needs no stylesheet edit. */
.level-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2.4rem; }
.level-plan {
    display: flex; flex-direction: column; gap: .7rem;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--line); border-top: 3px solid var(--level-color, var(--green-500));
    border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm);
}
.level-plan__head { display: flex; align-items: center; gap: .8rem; }
.level-plan__icon { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; }
.level-plan__icon--blank { border-radius: 14px; background: color-mix(in srgb, var(--level-color) 22%, transparent); }
.level-plan h2 { margin: 0; font-size: 1.25rem; color: var(--ink); }
.level-plan__price { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.level-plan__price strong { font-size: 2rem; font-weight: 850; line-height: 1.05; color: var(--ink); }
.level-plan__period { color: var(--muted); font-size: .9rem; }
.level-plan__note { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.level-plan__cta { margin-top: auto; align-self: flex-start; }
.level-pricing--subscriptions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.level-plan--premium { --level-color: #64748b; }
.level-plan--gold { --level-color: #c99200; }
.plan-feature-list { margin: .2rem 0 .8rem; padding-left: 1.15rem; color: var(--muted); font-size: .92rem; }
.plan-feature-list li { margin: .35rem 0; }

@media (max-width: 980px) {
    .level-pricing--subscriptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workshop-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .level-pricing--subscriptions, .workshop-summary-cards { grid-template-columns: 1fr; }
}

/* ---- The colour picker on the admin level screen ----------------------- */
.gamification-admin-color { display: flex; align-items: center; gap: .6rem; }
.gamification-admin-color input[type="color"] { width: 52px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); cursor: pointer; }
.gamification-admin-hex { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.gamification-admin-preview { margin-top: .5rem; width: 48px; height: 48px; object-fit: contain; }


/* Admin Stripe settings */
.stripe-settings-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.stripe-settings-status { display:grid; gap:.35rem; padding:1rem; }
.stripe-settings-status__label { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.stripe-settings-status__value { font-size:1rem; }
.stripe-settings-status__value--live { color:#b42318; }
.stripe-settings-status__value--test { color:#1769aa; }
.stripe-settings-status__value--unconfigured { color:var(--muted); }
.stripe-settings-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.stripe-settings-form__actions { grid-column:1 / -1; }
.stripe-settings-help { margin-top:1rem; }
.stripe-settings-secrets { display:grid; gap:.65rem; margin:0 0 1rem; }
.stripe-settings-secrets > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .75rem; background:var(--bg-muted); border:1px solid var(--line); border-radius:8px; }
.stripe-settings-secrets dt { font-weight:700; }
.stripe-settings-secrets dd { margin:0; color:var(--muted); font-size:.85rem; }
.stripe-settings-links { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
@media (max-width:800px) { .stripe-settings-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stripe-settings-form { grid-template-columns:1fr; } .stripe-settings-form__actions { grid-column:auto; } }
@media (max-width:520px) { .stripe-settings-status-grid { grid-template-columns:1fr; } .stripe-settings-secrets > div { align-items:flex-start; flex-direction:column; gap:.25rem; } }

.workshop-level-card__actions { display:flex; justify-content:flex-end; align-items:center; margin-top:.15rem; padding-top:.1rem; }
@media (max-width:560px) { .workshop-level-card__actions { justify-content:stretch; } .workshop-level-card__actions .btn { width:100%; } }

/* ======================================================================
   Homepage feature story — seven blocks, alternating sides.

   The drawings are inline SVG built out of the site's own colour tokens, so
   they follow the light and dark themes with no second set of files. As each
   one crosses the viewport home-parallax.js writes --drift onto it (-1 at the
   bottom of the screen, 1 at the top) and the rule below turns that into a
   couple of dozen pixels of movement against the words beside it.
   ====================================================================== */
.features { padding-top: 3.4rem; padding-bottom: 3.4rem; }
.features__head { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.features__head .section__title { margin: .35rem 0 .6rem; }
.features__head .section__sub { margin: 0; }

.features__list { display: grid; gap: 3rem; }

.feature {
    display: grid;
    /* Even columns, so a photograph is the same size whichever side it is on. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.6rem;
}
/* Every other block turns around, so the eye zigzags down the page instead of
   running down one straight edge. */
.feature:nth-child(even) .feature__art { order: 2; }

.feature__art {
    position: relative;
    transform: translate3d(0, calc(var(--drift, 0) * -22px), 0);
    will-change: transform;
}
.feature__art::before {
    /* A pool of light under the photograph, so it sits on the page rather than
       floating on it. */
    content: '';
    position: absolute; inset: 12% 4% -4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--green-500) 26%, transparent), transparent);
    filter: blur(34px);
    opacity: .45;
    z-index: -1;
}
.feature__art img {
    display: block; width: 100%; height: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    /* The photographs are graded dark; a touch of contrast keeps them from
       going flat against the page, and the frame stops them bleeding into it. */
    filter: saturate(1.04) contrast(1.03);
}

.feature__copy { max-width: 34rem; }
.feature__copy h3 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--ink); }
.feature__copy p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }

/* ---- The closing ask ---------------------------------------------------- */
.features__start {
    margin-top: 3.6rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem 3rem; align-items: center;
    padding: 2.2rem;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background:
        radial-gradient(90% 140% at 8% 0%, color-mix(in srgb, var(--green-500) 12%, transparent), transparent 70%),
        var(--card);
    box-shadow: var(--shadow-sm);
}
.features__start-copy h3 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--ink); }
.features__start-copy p { margin: 0 0 1.2rem; color: var(--muted); line-height: 1.6; max-width: 42ch; }
.features__start-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.features__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: step; }
.features__steps li {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .75rem; align-items: start;
    color: var(--ink); font-size: .95rem; line-height: 1.5;
}
.features__steps span {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
    background: color-mix(in srgb, var(--green-500) 16%, transparent);
    color: var(--green-700); font-size: .82rem; font-weight: 800;
}

@media (max-width: 900px) {
    .features__list { gap: 2.8rem; }
    .feature { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    /* Stacked, the drawing always leads and the words follow it. */
    .feature:nth-child(even) .feature__art { order: 0; }
    .feature__art { transform: translate3d(0, calc(var(--drift, 0) * -12px), 0); }
    .feature__copy { max-width: none; }
    .features__start { grid-template-columns: minmax(0, 1fr); padding: 1.6rem; }
}

/* ======================================================================
   Who a section is for.

   The homepage now speaks to two audiences in a row, so each half says
   whose it is before it says anything else. The owner half keeps the page
   background and photographs; the workshop half is a dark band with
   blueprints. Same tag, two colours.
   ====================================================================== */
.audience-tag {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: 1rem; padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.audience-tag::before {
    content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor;
}
.audience-tag--owner {
    color: var(--green-600);
    background: color-mix(in srgb, var(--green-500) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green-500) 30%, transparent);
}
.audience-tag--workshop {
    color: #8ec9ff;
    background: rgba(142, 201, 255, .12);
    border: 1px solid rgba(142, 201, 255, .3);
}

/* ---- The workshop band ------------------------------------------------- */
.workshops-band {
    position: relative;
    background:
        radial-gradient(80% 120% at 82% 0%, rgba(35, 84, 148, .55), transparent 62%),
        linear-gradient(180deg, #0a1626 0%, #081120 100%);
    color: #e8f0fa;
    padding-top: 4rem; padding-bottom: 4rem;
    /* A hairline top and bottom so the band reads as its own room. */
    border-top: 1px solid rgba(142, 201, 255, .16);
    border-bottom: 1px solid rgba(142, 201, 255, .16);
}
.workshops-band__head { max-width: 46rem; margin: 0 auto 2.4rem; text-align: center; }
.workshops-band__head h2 {
    margin: 0 0 .7rem; color: #fff; line-height: 1.15;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
.workshops-band__lead { margin: 0 auto 1.5rem; max-width: 56ch; color: #b3c6da; font-size: 1.05rem; line-height: 1.65; }
.workshops-band__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.workshops-band__actions .btn--ghost { color: #dceaf8; border-color: rgba(142, 201, 255, .38); }
.workshops-band__actions .btn--ghost:hover { background: rgba(142, 201, 255, .12); }

/* The wide drawing under the header, drifting like the owner artwork does. */
.workshops-band__stage {
    margin: 0 auto 2.4rem; max-width: 1080px;
    transform: translate3d(0, calc(var(--drift, 0) * -14px), 0);
    will-change: transform;
}
.workshops-band__stage img {
    display: block; width: 100%; height: auto;
    border-radius: var(--r-lg);
    border: 1px solid rgba(142, 201, 255, .22);
    box-shadow: 0 30px 70px rgba(2, 8, 18, .5);
}

.workshops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.workshop-card {
    display: grid; grid-template-rows: auto 1fr;
    border: 1px solid rgba(142, 201, 255, .18);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
    transform: translate3d(0, calc(var(--drift, 0) * -8px), 0);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.workshop-card:hover { border-color: rgba(142, 201, 255, .38); background: rgba(255, 255, 255, .06); }
.workshop-card__art { overflow: hidden; border-bottom: 1px solid rgba(142, 201, 255, .14); }
.workshop-card__art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.workshop-card__copy { padding: 1.2rem 1.3rem 1.4rem; }
.workshop-card__copy h3 { margin: 0 0 .45rem; color: #fff; font-size: 1.18rem; line-height: 1.25; }
.workshop-card__copy p { margin: 0; color: #b3c6da; font-size: .96rem; line-height: 1.6; }

/* ---- The standing offer to workshops ----------------------------------- */
/* Bottom right rather than half way up the edge: at mid-height it crossed the
   reading column, and the corner is where a standing action is looked for
   anyway. It is a real link to the section, so it works without the script that
   shows and hides it. */
.workshop-hail {
    position: fixed; z-index: 40; right: 1.25rem; bottom: 1.25rem;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .8rem 1.15rem;
    border: 1px solid rgba(142, 201, 255, .34);
    border-radius: 999px;
    background: rgba(10, 22, 38, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #dceaf8; font-size: .88rem; font-weight: 700; line-height: 1;
    box-shadow: 0 14px 34px rgba(2, 8, 18, .45);
    transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.workshop-hail:hover { background: rgba(16, 34, 58, .96); text-decoration: none; color: #fff; }
.workshop-hail:focus-visible { outline: 3px solid rgba(126, 227, 177, .65); outline-offset: 2px; }
.workshop-hail__icon { display: grid; place-items: center; color: #8ec9ff; }
.owner-hail .workshop-hail__icon { color: #7ee3b1; }
/* Hidden by default and by the script; only shown once the hero is behind you.
   [hidden] also keeps it out of the tab order while it is away. */
.workshop-hail[hidden] { display: none; }
.workshop-hail.is-away { opacity: 0; transform: translateY(140%); pointer-events: none; }

@media (max-width: 900px) {
    .workshops-grid { grid-template-columns: minmax(0, 1fr); }
    .workshops-band { padding-top: 3rem; padding-bottom: 3rem; }
    /* Within a thumb's reach, and a little smaller. */
    .workshop-hail { right: 1rem; bottom: 1rem; padding: .7rem 1rem; font-size: .82rem; }
}


/* Vehicle brand catalogue */
.vehicle-make-admin-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.vehicle-make-admin-fields__wide { grid-column:span 2; }
.vehicle-make-admin-item { position:relative; padding:1.25rem; border:1px solid var(--line); border-radius:14px; margin-top:1rem; background:var(--surface); }
.vehicle-make-admin-item.is-inactive { opacity:.72; }
.vehicle-make-admin-item__head { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.vehicle-make-admin-item__head img { width:56px; height:56px; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:var(--surface-2, #f8fafc); padding:.35rem; }
.vehicle-make-admin-item__head h3 { margin:0; }
.vehicle-make-admin-item__head p { margin:.2rem 0 0; }
.vehicle-make-admin-item__head .btn { margin-left:auto; }
.vehicle-make-admin-item__toggle { margin-top:.55rem; }
.admin-section-heading__meta { display:flex; gap:.4rem; flex-wrap:wrap; }
@media (max-width: 820px) { .vehicle-make-admin-fields { grid-template-columns:1fr 1fr; } .vehicle-make-admin-fields__wide { grid-column:span 2; } }
@media (max-width: 560px) { .vehicle-make-admin-fields { grid-template-columns:1fr; } .vehicle-make-admin-fields__wide { grid-column:span 1; } .vehicle-make-admin-item__head { align-items:flex-start; flex-wrap:wrap; } .vehicle-make-admin-item__head .btn { margin-left:0; } }


/* Workshop dashboard onboarding */
.workshop-onboarding { margin: 1.25rem 0; }
.workshop-onboarding__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.workshop-onboarding__head h2 { margin:.1rem 0 .25rem; }
.workshop-onboarding__head p { margin:0; }
.workshop-onboarding__meta { display:flex; align-items:flex-start; gap:.55rem; flex:0 0 auto; }
.workshop-onboarding__meta form { margin:0; }
.workshop-onboarding__count { color:var(--muted); white-space:nowrap; }
.workshop-onboarding__dismiss { border:none; background:transparent; font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 .3rem; border-radius:8px; }
.workshop-onboarding__dismiss:hover { color:var(--ink); background:var(--bg-muted); }
.workshop-onboarding__dismiss:focus-visible { outline:3px solid var(--blue-600); outline:3px solid color-mix(in srgb, var(--blue-600) 35%, transparent); outline-offset:2px; }
.workshop-onboarding progress { display:block; width:100%; height:.5rem; margin:1rem 0; accent-color:var(--green-600, #16a34a); }
.workshop-onboarding__body { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.workshop-onboarding__list { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:0; padding:0; list-style:none; color:var(--muted); font-size:.88rem; }
.workshop-onboarding__list li::before { content:'•'; margin-right:.35rem; color:var(--green-600, #16a34a); }
@media (max-width: 620px) { .workshop-onboarding__body { align-items:flex-start; flex-direction:column; } .workshop-onboarding__body .btn { width:100%; } }


/* ======================================================================
   Public site — dark-only finish
   ====================================================================== */
body.public-site {
    background: #070c14;
    color: #e7edf4;
}
body.public-site .site-header {
    background: rgba(7, 12, 20, .82);
    border-bottom-color: rgba(143, 170, 198, .16);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .16);
}
body.public-site .brand,
body.public-site .site-nav a,
body.public-site .site-nav__menu-trigger--link,
body.public-site .site-nav__menu-trigger--login {
    color: #e7edf4;
}
body.public-site .brand__mark {
    background: linear-gradient(145deg, #42e69d, #149b67);
    color: #061b14;
    box-shadow: 0 8px 24px rgba(52, 211, 153, .2);
}
body.public-site .brand { gap: 0; }
body.public-site .site-nav__utility { border-left-color: rgba(143, 170, 198, .18); }
body.public-site .site-nav__menu-trigger:not(.site-nav__menu-trigger--link) {
    background: rgba(20, 31, 46, .72);
    border-color: rgba(143, 170, 198, .22);
    color: #dbe7f3;
}
body.public-site .site-nav__menu-trigger:not(.site-nav__menu-trigger--link):hover,
body.public-site .site-nav__menu:not(.site-nav__menu--link)[open] > .site-nav__menu-trigger {
    background: rgba(38, 57, 78, .86);
    border-color: rgba(126, 227, 177, .55);
    color: #fff;
}
body.public-site .site-nav__menu-trigger--link,
body.public-site .site-nav__menu--link[open] > .site-nav__menu-trigger--link {
    background: transparent;
    border: 0;
    box-shadow: none;
}
body.public-site .site-nav__menu-trigger--link:hover {
    background: transparent;
    border: 0;
    color: #7ee3b1;
}
body.public-site .site-nav__menu-panel {
    background: #121d2b;
    border-color: rgba(143, 170, 198, .2);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
body.public-site .site-nav__menu-panel a { color: #cbd9e7; }
body.public-site .site-nav__menu-panel a:hover { background: rgba(126, 227, 177, .1); color: #fff; }
body.public-site .site-nav-toggle {
    background: #121d2b;
    border-color: rgba(143, 170, 198, .25);
    color: #e7edf4;
}
body.public-site .section {
    background: #070c14;
    border-top: 1px solid rgba(143, 170, 198, .06);
}
/* Sections that should sit on the page background instead of painting their own
   band, the way .page-content does. Without this a .section page reads a shade
   darker than a .page-hero + .page-content page: the dark theme repaints the
   body to var(--bg) but leaves .section on its literal #070c14. */
body.public-site .section--flush {
    background: transparent;
    border-top: 0;
}
body.public-site .section--proof {
    background: linear-gradient(180deg, #0a121d, #09111b);
    border-top-color: rgba(126, 227, 177, .12);
    border-bottom: 1px solid rgba(143, 170, 198, .08);
}
body.public-site .section__title,
body.public-site h1,
body.public-site h2,
body.public-site h3 { color: #f1f6fb; }
body.public-site .section__sub,
body.public-site .feature__copy p,
body.public-site .persona-card p { color: #aebfd1; }
body.public-site .persona-card {
    background: linear-gradient(160deg, #121d2b, #0e1825);
    border-color: rgba(143, 170, 198, .17);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}
body.public-site .persona-card:hover {
    border-color: rgba(126, 227, 177, .58);
    box-shadow: 0 20px 55px rgba(21, 126, 85, .18);
}
body.public-site .feature__art img {
    border-color: rgba(143, 170, 198, .18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}
body.public-site .features__start {
    background: radial-gradient(90% 140% at 8% 0%, rgba(52, 211, 153, .12), transparent 70%), #111c2a;
    border-color: rgba(126, 227, 177, .2);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}
body.public-site .proof-quote {
    background: #121d2b;
    border-color: rgba(143, 170, 198, .18);
}
body.public-site .proof-figures dt { color: #8fa6bc; }
body.public-site .proof-figures dd { color: #f1f6fb; }
body.public-site .site-footer {
    margin-top: 0;
    background: #050a11;
    border-top: 1px solid rgba(143, 170, 198, .12);
}
body.public-site .site-footer__bar { background: #03070c; }
body.public-site .site-footer__tools .pwa-install-button {
    border-color: rgba(143, 170, 198, .2);
    background: rgba(255,255,255,.05);
}
@media (max-width: 900px) {
    body.public-site .site-nav {
        background: #0b1420;
        border-left-color: rgba(143, 170, 198, .16);
    }
    body.public-site .site-nav__menu-trigger--link,
    body.public-site .site-nav__menu-trigger--login { color: #e7edf4; }
    body.public-site .site-nav__utility { border-left: 0; }
}


/* ======================================================================
   Homepage — content entering from the sides
   ====================================================================== */
[data-fly-in] {
    --fly-x: 0px;
    --fly-y: 0px;
    opacity: 1;
    transform: translate3d(var(--fly-x), var(--fly-y), 0);
    transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--fly-delay, 0ms);
    will-change: opacity, transform;
}
[data-fly-in].fly-pending { opacity: 0; }
[data-fly-in][data-fly="left"].fly-pending { --fly-x: -54px; }
[data-fly-in][data-fly="right"].fly-pending { --fly-x: 54px; }
[data-fly-in][data-fly="up"].fly-pending { --fly-y: 34px; }
[data-fly-in][data-fly="down"].fly-pending { --fly-y: -34px; }

/* Feature art already has a small scroll drift; keep both motions composited. */
.feature__art[data-fly-in] {
    transform: translate3d(var(--fly-x), calc(var(--drift, 0) * -22px + var(--fly-y)), 0);
}
@media (max-width: 900px) {
    .feature__art[data-fly-in] {
        transform: translate3d(var(--fly-x), calc(var(--drift, 0) * -12px + var(--fly-y)), 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-fly-in],
    [data-fly-in].fly-pending,
    .feature__art[data-fly-in] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ======================================================================
   Report how-it-works — explanatory workflow
   ====================================================================== */
.report-how-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 3rem;
    align-items: center;
}
.report-how-hero__layout h1 { margin-bottom: .7rem; }
.report-how-hero__layout p { max-width: 42rem; }
.report-how-hero__signal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    padding: 1.1rem;
    border: 1px solid rgba(143, 170, 198, .22);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}
.report-how-hero__signal-line {
    position: absolute;
    top: 2rem;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, rgba(143,170,198,.5), #7ee3b1, rgba(143,170,198,.5));
}
.report-how-hero__signal-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: .45rem; color: #9eb2c6; font-size: .74rem; }
.report-how-hero__signal-node span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(143,170,198,.35); border-radius: 50%; background: #0d1724; color: #c6d5e4; font-size: .68rem; font-weight: 800; }
.report-how-hero__signal-node strong { font-size: .78rem; font-weight: 700; }
.report-how-hero__signal-node--active { color: #dff8eb; }
.report-how-hero__signal-node--active span { border-color: #7ee3b1; background: rgba(126,227,177,.14); color: #7ee3b1; box-shadow: 0 0 0 5px rgba(126,227,177,.07); }

.report-how-content { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.report-how-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: end; margin-bottom: 2rem; }
.report-how-intro h2, .report-how-source h2, .report-how-limit h2 { margin: .45rem 0 0; color: #f1f6fb; font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
.report-how-intro > p { max-width: 48rem; margin: 0; color: #aebfd1; font-size: 1.02rem; line-height: 1.7; }
.report-how-kicker { color: #7ee3b1; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.report-workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 0; }
.report-workflow__step {
    min-height: 100%;
    padding: 1.45rem;
    border-color: rgba(143,170,198,.19);
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(24,39,57,.96), rgba(12,22,35,.98));
    box-shadow: 0 22px 55px rgba(0,0,0,.22);
}
.report-workflow__step::after { background: linear-gradient(90deg, rgba(143,170,198,.34), #7ee3b1); }
.report-workflow__step--final { border-color: rgba(126,227,177,.36); background: linear-gradient(155deg, rgba(23,58,54,.96), rgba(12,28,31,.98)); }
.report-workflow__step--final::after { display: none; }
.report-workflow .workflow__marker { justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.report-workflow .workflow__num { width: 34px; height: 34px; background: #173c32; color: #a8f2cd; font-size: .9rem; }
.report-workflow .workflow__icon { width: 32px; height: 32px; color: #8ec9ff; }
.report-workflow__step--final .workflow__icon { color: #7ee3b1; }
.report-workflow .workflow__body { gap: .55rem; }
.report-workflow__label { color: #8ea5ba !important; font-size: .7rem !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.report-workflow .workflow__body strong { color: #f1f6fb; font-size: 1.18rem; }
.report-workflow .workflow__body p { margin: 0; color: #b3c6da; font-size: .94rem; line-height: 1.65; }
.report-workflow__detail { display: flex; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(143,170,198,.14); color: #8ea5ba; font-size: .76rem; }
.report-workflow__detail b { color: #dff8eb; font-weight: 750; }

.report-how-source { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 3rem; align-items: center; margin-top: 4.5rem; padding: 2.2rem; border: 1px solid rgba(143,170,198,.15); border-radius: 20px; background: #0d1724; }
.report-how-source__copy p { max-width: 62ch; margin: 1rem 0 0; color: #aebfd1; line-height: 1.7; }
.report-how-source__copy strong { color: #edf5fc; }
.report-how-source__signals { display: grid; gap: .9rem; }
.report-how-source__signals > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: .65rem; align-items: center; }
.report-how-source__signals strong { color: #e7edf4; font-size: .9rem; }
.report-how-source__signals small { grid-column: 2; color: #8399ae; font-size: .78rem; }
.report-how-source__dot { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; }
.report-how-source__dot--confirmed { background: #7ee3b1; box-shadow: 0 0 0 5px rgba(126,227,177,.1); }
.report-how-source__dot--owner { background: #8ec9ff; box-shadow: 0 0 0 5px rgba(142,201,255,.1); }
.report-how-source__dot--check { background: #f2c879; box-shadow: 0 0 0 5px rgba(242,200,121,.1); }
.report-how-cards { margin-top: 2rem; }
body.public-site .report-how-cards .info-card { border-color: rgba(143,170,198,.16); background: linear-gradient(155deg, #121f2e, #0d1724); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
body.public-site .report-how-cards .info-card h3 { margin-top: 0; color: #f1f6fb; }
body.public-site .report-how-cards .info-card p { color: #aebfd1; }
.report-how-limit { max-width: 58rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(143,170,198,.13); }
.report-how-limit p { margin: 1rem 0 0; color: #aebfd1; line-height: 1.7; }

@media (max-width: 900px) {
    .report-how-hero__layout, .report-how-intro, .report-how-source { grid-template-columns: 1fr; gap: 1.6rem; }
    .report-workflow { grid-template-columns: 1fr; gap: .9rem; }
    .report-workflow__step { min-height: 0; }
    .report-workflow__step::after { top: 100%; left: 1.9rem; width: 2px; height: .9rem; transform: none; background: linear-gradient(180deg, rgba(143,170,198,.34), #7ee3b1); }
    .report-workflow__step--final::after { display: none; }
}
@media (max-width: 600px) {
    .report-how-content { padding-top: 3rem; padding-bottom: 3rem; }
    .report-how-hero__signal { gap: .35rem; padding: .8rem .55rem; }
    .report-how-source { padding: 1.35rem; }
}

/* Mobile public navigation: details must stack summary and submenu vertically. */
@media (max-width: 900px) {
    .site-nav > .site-nav__menu { display: block; width: 100%; flex: 0 0 auto; }
    .site-nav > .site-nav__menu > summary { display: flex; width: 100%; }
    .site-nav > .site-nav__menu > .site-nav__menu-panel { display: block; position: static; width: 100%; min-width: 0; box-sizing: border-box; margin: .25rem 0 .45rem; padding: .35rem 0 .35rem .45rem; }
}