/* Test Drive Valet — dealer portal layout (loads after styles.css) */

/* The `hidden` attribute must beat anything in this file, and without this rule
   it loses. The browser's own `[hidden] { display: none }` is a USER-AGENT rule,
   so any author `display:` declaration outranks it regardless of specificity or
   order — and this stylesheet has dozens, starting with `.btn { display:
   inline-flex }`. That is not hypothetical: `vehicles.html`'s "Read from
   website" button ships as `<button class="btn" hidden>` and was **visible to
   every dealer**, including stores with no inventory page configured at all.
   Worse than merely visible — the click listener is attached only inside the
   gate that was supposed to unhide it, so what showed was a dead button
   promising an import that could not happen.
   `!important` is safe here because nothing reveals a hidden element through
   CSS: every caller sets `.hidden = false`, which removes the attribute. */
[hidden] { display: none !important; }

body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; visibility: hidden; }
body.ready { visibility: visible; }
.side { background: var(--bg-2); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side .brand { padding: 4px 8px 12px; font-size: 15px; }
.side .brand-mark { width: 28px; height: 28px; flex: none; }
/* Our own mark stays our amber whatever accent the dealership chose for the
   portal (Cache, 2026-10-13): the accent variables are theirs, the logo is ours. */
.side .brand-mark { background: #f2b53a; color: #1a1200; }
.side .brand { white-space: nowrap; }
.side .brand-mark svg { width: 17px; height: 17px; }
/* The dealer's own badge, drawn like the staff card: accent stripe, white name. */
.loc-badge { margin: 0 8px 16px; padding: 10px 11px; border-radius: 9px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--text); font-size: 12.5px; }
.loc-badge b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--text); }
/* The dealership's logo, top right of the page header (draft 2026-10-08).
   The sidebar is always dark, so a white "transparent" logo showed there; the
   page is light in light mode, so the same logo gets a dark plate there and
   sits bare only in dark mode. "invert" flips in dark mode as before. */
/* The logo and, for a store in a dealer group, its name under it in the dealer's accent (2026-10-09). */
.logo-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.logo-store { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--section-accent, var(--accent-text)); opacity: .7; line-height: 1; padding-right: 2px; }
.page-logo { background: #fff; border-radius: 8px; padding: 7px 14px; height: 46px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.page-logo img { max-height: 32px; max-width: 200px; object-fit: contain; display: block; }
.page-logo.style-transparent { background: #141821; }
.page-logo.style-invert { background: transparent; padding: 0; height: auto; }
.page-logo.style-invert img { max-height: 44px; }
:root[data-theme="dark"] .page-logo.style-transparent { background: transparent; padding: 0; height: auto; }
:root[data-theme="dark"] .page-logo.style-transparent img { max-height: 44px; }
:root[data-theme="dark"] .page-logo.style-invert img { filter: invert(1) hue-rotate(180deg); }
/* A logo with no background of its own (read from its pixels, portal.js
   readLogo): no plate on either theme, and the logo ITSELF flips on the theme
   where it would vanish — a light wordmark turns dark on the light page, a
   dark one turns light on the dark page. */
.page-logo.style-transparent.logo-clear, .scope-logo.style-transparent.logo-clear { background: transparent; padding: 0; height: auto; }
.page-logo.style-transparent.logo-clear img { max-height: 44px; }
:root[data-theme="light"] .page-logo.logo-clear.logo-light img, :root[data-theme="light"] .scope-logo.logo-clear.logo-light img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .page-logo.logo-clear.logo-dark img, :root[data-theme="dark"] .scope-logo.logo-clear.logo-dark img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .page-logo.style-invert.logo-clear.logo-light img, :root[data-theme="dark"] .scope-logo.style-invert.logo-clear.logo-light img { filter: none; }
/* The face beside a customer's name (2026-10-08). A driver photo is centered;
   a license front is shown through the window over its portrait, which sits
   at the left of every US license. */
.name-cell { display: flex; align-items: center; gap: 10px; }
.face { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; }
.face.lic { background-size: 330%; background-position: 10% 46%; }
/* A small actions menu in a page header (the customer profile's More; the
   Dealerships page has its own copy of these). */
.menu-wrap { position: relative; display: inline-block; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.35); padding: 6px; }
.menu-pop button { display: block; width: 100%; text-align: left; font: 500 13.5px var(--font-body); padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; }
.menu-pop button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.menu-pop button.danger { color: var(--bad-text, #f87171); }
.menu-pop .menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
/* The way back from a deep page (2026-10-08). */
.back-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 6px; }
.back-link:hover { color: var(--accent-text); }
/* The notification bell (2026-10-08): in the page header beside the logo. */
.bell-wrap { position: relative; }
.bell-btn { position: relative; padding: 9px 11px; display: inline-flex; align-items: center; }
.bell-btn.has-new { color: var(--accent-text); border-color: var(--accent); }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #141821); font: 700 11px/18px var(--font-body); text-align: center; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, 92vw); max-height: 70vh; overflow: auto; z-index: 60; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: 0 24px 60px -24px var(--shadow); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.bell-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13.5px; }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.bell-item.is-new b { color: var(--accent-text); }
.bell-item b { display: block; font-weight: 600; }
.bell-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.bell-ic { font-size: 17px; line-height: 1.3; }
/* Embedded pages (Export data, Agreements inside Settings): no sidebar, no header, no page padding. */
html.embed .side, html.embed .topbar, html.embed .menu-btn, html.embed .bell-wrap { display: none !important; }
html.embed body { background: transparent; }
html.embed body { display: block; min-height: 0; }
html.embed { height: auto; min-height: 0; }
html.embed .content { padding: 0 2px; max-width: none; width: 100%; }
html.embed .layout, html.embed main { margin: 0; }
.settings-embed { width: 100%; border: 0; display: block; min-height: 480px; background: transparent; }
/* The title block gives way so the logo stays on the first line beside the heading. */
.topbar > div:first-child { flex: 1 1 320px; min-width: 0; }
.topbar .actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.topbar-brand, .topbar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-brand:empty, .topbar-btns:empty { display: none; }
.scope-logo { background: #fff; border-radius: 7px; padding: 6px 10px; margin: 0 0 8px; height: 42px; display: flex; align-items: center; justify-content: center; }
.scope-logo img { max-height: 30px; max-width: 100%; object-fit: contain; display: block; }
.scope-logo.style-transparent, .scope-logo.style-invert { background: transparent; padding: 2px 0; height: auto; justify-content: flex-start; }
.scope-logo.style-transparent img, .scope-logo.style-invert img { max-height: 40px; }
/* A single-color logo drawn dark for a light page, flipped light for the
   dark sidebar. hue-rotate(180deg) undoes the hue half of invert() so any
   accent color the logo carries lands near where it started. */
:root[data-theme="dark"] .scope-logo.style-invert img { filter: invert(1) hue-rotate(180deg); }
.loc-badge .loc-org { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The super admin's dealership chooser. Deliberately a plain select rather
   than the accent-bordered badge a dealer sees: a dealer is being told where
   they are, while staff are being asked. The two must not look alike, because
   confusing them is how somebody edits a stranger's settings. */
.scope { margin: 0 8px 16px; }
.scope-here { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 12.5px; }
.scope-here b { display: block; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-here span { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-here.is-dealer { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--text) 4%, transparent); padding: 10px 11px; }
.scope-here.is-dealer b { color: var(--text); font-size: 14.5px; line-height: 1.25; white-space: normal; }
.scope-here.is-dealer span { margin-top: 3px; }
/* minmax(0, …): a 1fr column will not shrink below its content, so a label
   wider than half the card pushed the second button out of it. */
/* Stacked, one per line: side by side the labels wrapped or overflowed
   depending on the font size the browser chose. Compact enough stacked. */
/* The two ways out of a dealership (Cache, 2026-10-12: the old pair was "small and
   hard to press on mobile"): full width, 44px tall, an icon and a one-line hint. */
.scope-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.scope-act { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 34px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: transparent; color: var(--text); font: 600 12.5px/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.scope-act svg { width: 15px; height: 15px; flex: none; }
.scope-here .scope-act-text { display: block; min-width: 0; color: inherit; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.scope-here .scope-act-text small { display: none; }
@media (max-width: 760px) { .scope-act { min-height: 44px; padding: 10px 12px; font-size: 13.5px; } .scope-act svg { width: 18px; height: 18px; } }
.scope-act.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #1a1200); }
.staff-guard-line { margin-top: 8px; font-size: 11px; color: var(--accent-text); line-height: 1.35; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.staff-guard-line .btn-link { font-size: 11px; padding: 0; }
.scope-act.primary:hover { filter: brightness(1.06); }
.scope-act.secondary { background: color-mix(in srgb, var(--text) 6%, transparent); }
.scope-act.secondary:hover { border-color: var(--accent); }
body.side-mini .scope-act-text { display: none; } body.side-mini .scope-act { justify-content: center; padding: 10px; }
.scope-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.scope-pick { width: 100%; font-size: 12.5px; font-weight: 600; padding: 7px 9px; border-radius: 8px; }
.scope-find { width: 100%; font-size: 12.5px; font-weight: 500; padding: 7px 9px; border-radius: 8px; margin-bottom: 0; }
.scope-found { font-size: 11px; font-weight: 500; color: var(--muted-2); margin-top: 5px; padding: 0 2px; }
/* The matches, shown as rows rather than left inside the select. A closed
   select only ever displays its selected option, so filtering one is invisible
   until it is opened — which reads as a search that does nothing. */
/* 2026-10-08: dropped down over the nav, not in the flow, so a long list of
   dealerships never pushes the menu out of view. Scrolls past ~9 names. */
.scope-pop { position: relative; }
.scope-hits { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 40; display: grid; gap: 1px; max-height: 300px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 9px; box-shadow: 0 18px 40px -18px var(--shadow); }
.scope-hits[hidden] { display: none; }
/* Inside a dialog the list sits under its field, in the flow: the absolute
   placement above is for the sidebar's search, whose box is positioned.
   Without this a dialog's hits dropped below the dialog, out of sight (Cache,
   2026-10-10: "Customer lookup isnt working"). */
.modal .scope-hits { position: static; margin-top: 6px; max-height: 240px; }
.scope-hits .scope-found { margin: 2px 0 3px; padding: 0 7px; }
.scope-hit { display: block; width: 100%; text-align: left; font-size: 12.5px; font-weight: 500; padding: 6px 9px; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; }
.scope-hit.is-here { color: var(--accent-text); font-weight: 700; }
.scope-hit:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.scope-store { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 6px; padding: 0 2px; line-height: 1.4; }
/* The same search on the "choose a dealership first" page, which is a content
   panel rather than the sidebar — so it sizes to its text instead of filling
   the column. */
.pick-find { display: block; margin-top: 14px; max-width: 320px; font-size: 13px; padding: 7px 10px; }
.menu { display: grid; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 500; }
.menu a svg { width: 17px; height: 17px; flex: none; }
.menu a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.menu a.active { color: var(--text); background: rgba(242,181,58,.1); }
.menu a.active svg { color: var(--accent-text); }
.menu .nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.menu .nav-count[hidden] { display: none; }
.menu .soon { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--muted-2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--accent-text); flex: none; }
.user b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.user span { color: var(--muted-2); font-size: 12px; }
.signout { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; padding: 8px; border-radius: 8px; cursor: pointer; }
.signout:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.theme-seg { display: flex; gap: 2px; margin: 10px 8px 0; padding: 3px; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 9px; }
.theme-seg button { flex: 1; background: none; border: 0; border-radius: 6px; color: var(--muted-2); cursor: pointer; padding: 6px 0; display: grid; place-items: center; }
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button:hover { color: var(--text); }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 2px var(--shadow); }

/* BUILD STAMP (temporary — delete this rule to remove) */
.build-stamp { padding: 8px 8px 0; font-size: 10.5px; color: var(--muted-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; opacity: .7; }

/* Wider (Cache, 2026-10-09: "a decent amount of dead space on the right side"): the
   page uses the screen it has, with a cap only on very wide monitors. */
.content { padding: 28px 36px 48px; max-width: 1720px; width: 100%; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.topbar h1 { font-size: 1.5rem; }
/* No description under a page title (Cache, 2026-10-08: "looks cluttered, too busy").
   The dashboard's date and a record's own facts (a customer's or a drive's
   line, marked .meta when set) are the two things that stay. */
.topbar > div > p:not(#today):not(.meta) { display: none; }
.topbar p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .btn { padding: 9px 14px; font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.stats.stats-6 { grid-template-columns: repeat(6, 1fr); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stat b { display: block; font-family: var(--font-head); font-size: 1.9rem; letter-spacing: -0.03em; margin-top: 6px; }
.stat b.accent { color: var(--accent-text); }

/* Every portal page loads styles.css first, for the design tokens, and that is
   the *marketing* stylesheet: it carries `section { padding: 96px 0 }` to space
   out the landing page's full-width bands. That rule has been silently applying
   to every <section> in the portal — settings.html's five tab panes were each
   carrying 192px of dead space, top and bottom, on a page in daily use. Nothing
   looked broken enough to report, which is why it survived.
   Reset it here rather than per page: portal.css is loaded by the nine portal
   pages and by none of the five marketing ones, so this cannot reach the site.
   Keep <section> usable in the portal — the alternative was a standing rule to
   never use the element, which is the kind of thing nobody remembers. */
main section { padding: 0; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-head h3 { font-size: 15px; }
.panel-body { padding: 18px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { width: auto; padding: 7px 10px; font-size: 13px; }
.filters input[type="search"] { min-width: 220px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* A wide table stays inside its card: the headings wrap to two lines and the
   switch columns are narrow, and on a screen that is still too small the
   wrapper scrolls sideways instead of the table running out of the panel
   (Cache, 2026-10-13: "alerts title overflow out of the card"). */
.table-scroll { overflow-x: auto; max-width: 100%; }
.alerts-table th { white-space: normal; padding: 10px 10px; line-height: 1.25; font-size: 11px; letter-spacing: .04em; vertical-align: bottom; }
.alerts-table th:first-child, .alerts-table td:first-child { padding-left: 18px; }
.alerts-table td { padding-left: 10px; padding-right: 10px; }
.alerts-table th:nth-child(n+3):not(:last-child) { max-width: 92px; }
td { padding: 11px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
td small { display: block; color: var(--muted); font-size: 12.5px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Vehicle photo, in the inventory list. Fixed box with object-fit: cover, because
   dealer listing photos arrive in every aspect ratio there is and a column of
   different-height rows reads as a broken page. The "none" state is a dashed box
   on purpose — a dealer has to be able to tell "no photo came with this car" from
   "the photo failed to load", and an empty cell says neither. */
td.thumb-cell { width: 64px; padding-right: 0; }
.veh-thumb, .veh-thumb-none { width: 64px; height: 44px; border-radius: 7px; flex: none; }
.veh-thumb { object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--border-2); }
.veh-thumb-none { display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--border-2); color: var(--muted-2); }
.veh-thumb-none svg { width: 17px; height: 17px; }
.veh-thumb-failed { border-style: dashed; }
/* The same photo, bigger, on the two pages that show one car rather than a column
   of them — the drive record and the customer profile. A record of a visit is
   read to answer "which car was this?", and 64x44 is a reminder rather than an
   answer. Kept as a size class rather than inline pixels so the shape stays here
   with the rest of the layout. */
td.thumb-cell-lg { width: 132px; }
.veh-thumb-lg { width: 132px; height: 88px; border-radius: 9px; }

/* The derived time zone, on the signup modals and on Settings. A panel rather
   than plain text because it is an answer the operator is being asked to
   confirm, and it has to read as a field's value rather than as help text.
   `--accent-text` for the note: it is theme-aware, and the note is "look at
   this", not "something is wrong" — there is no `--warn` in this stylesheet. */
.zone { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.zone-why { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.zone-note { color: var(--accent-text); font-size: 12.5px; margin-top: 5px; }
.veh-thumb-lg.veh-thumb-none svg { width: 26px; height: 26px; }
/* A photo beside its description inside one cell, for tables that already have
   their columns spoken for. */
.veh-cell { display: flex; align-items: center; gap: 10px; }
.veh-cell > div { min-width: 0; }

/* The dealership's inventory pages, listed read-only on the Vehicles import
   modal — the pages themselves and, after a read, one line per page with its own
   count or its own failure. Numbered when it is an <ol>, because the read order
   is what decides whose copy of a car listed on two pages survives. Here rather
   than in the page because `.src-bad` has to agree with the rest of this
   stylesheet about what "something went wrong" looks like. */
.src-read { margin: 0; padding-left: 20px; font-size: 13.5px; }
.src-read li { margin-bottom: 7px; line-height: 1.45; }
.src-read li:last-child { margin-bottom: 0; }
.src-bad { color: var(--bad-text); }

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--text); margin-bottom: 6px; font-family: var(--font-head); }
.empty .btn { margin-top: 16px; }
.loading { padding: 40px; text-align: center; color: var(--muted-2); }

.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; white-space: nowrap; }
.tag-ok { background: rgba(74,222,128,.14); color: var(--ok-text); }
.tag-live { background: rgba(96,165,250,.16); color: var(--info-text); }
.tag-warn { background: rgba(242,181,58,.18); color: var(--accent-text); }
.tag-bad { background: rgba(248,113,113,.16); color: var(--bad-text); }
.tag-muted { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); }

.btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn-danger { background: transparent; color: var(--bad-text); border-color: rgba(248,113,113,.4); }
.btn-danger:hover { background: rgba(248,113,113,.08); }
.icon-btn { background: none; border: 1px solid var(--border-2); color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.icon-btn svg { width: 15px; height: 15px; }

/* Modal */
.modal-wrap { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: 26px; box-shadow: 0 40px 80px -30px var(--shadow); }
.modal h3 { margin-bottom: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.modal-wide { max-width: 760px; }

/* A one-of-N chooser, and the tick-box variant of the same thing. Radios
   rather than a dropdown on purpose: each option needs a sentence, and the
   consequence of picking wrong is a dealership's whole inventory or its whole
   record set, so the tradeoffs have to be readable at once rather than one at
   a time. Shared, because settings.html's inventory source, dealers.html's
   login scope and dealers.html's test-dealership tick are the same control. */
.src-opt, .test-opt, .pick { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.src-opt, .test-opt { padding: 11px 13px; border: 1px solid var(--border-2); border-radius: 10px; }
.src-opt { margin-bottom: 8px; font-weight: 500; }
.test-opt { background: var(--bg-2); }
.pick { font-weight: 400; margin-bottom: 9px; }
/* `flex: none` alone is not enough: with `flex-basis: auto` the box still
   takes its width from the `width` property, which styles.css sets to 100%
   for text fields. That rule exempts checkboxes now, and this states the
   intent locally too — a tick box is never a column. */
.src-opt input, .test-opt input, .pick input { width: auto; margin: 3px 0 0; flex: none; }
.src-opt b, .test-opt b, .pick b { display: block; font-weight: 600; }
.src-opt small, .test-opt small, .pick small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.src-opt.on { border-color: var(--accent); background: var(--bg-2); }

/* Toasts */
#toasts { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 8px; z-index: 200; }
.toast-msg { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 14px; font-size: 14px; box-shadow: 0 20px 40px -20px var(--shadow); animation: pop .15s ease; }
.toast-msg.ok { border-color: rgba(74,222,128,.4); }
.toast-msg.error { border-color: rgba(248,113,113,.5); color: var(--bad-text); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

/* Charts (tiny inline bars) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 10px 0 0; }
.bars div { flex: 1; background: rgba(242,181,58,.45); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.bars div.hi { background: var(--accent); }
.bars div span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }
.bars div b { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; }
.bars-wrap { padding: 24px 18px 34px; }

/* Progress of a long read (the sitemap route, which is one fetch per car).
   `width` is the only thing the script animates, and the transition is what
   makes a bar that steps forward every few seconds read as movement rather
   than as a redraw. No stripes or pulse: this bar can sit on the same number
   for several seconds while a slow dealer site answers, and an animation that
   keeps moving while the count does not is a progress bar that lies. */
.prog { height: 8px; border-radius: 999px; background: var(--border-2); overflow: hidden; }
.prog-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .4s ease; }

.menu-btn { display: none; } .side-close, .nav-backdrop { display: none; }
@media (max-width: 760px) { .side-close, .nav-backdrop { display: block; } }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.dropzone { border: 1.5px dashed var(--border-2); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); color: var(--text); }
pre.small { font-size: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow: auto; max-height: 220px; }

@media (max-width: 1000px) { .stats, .stats.stats-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  body { grid-template-columns: minmax(0, 1fr); }
  body.side-mini { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 20px 16px 40px; }
  .stats, .stats.stats-6 { grid-template-columns: 1fr 1fr; }
  .menu-btn { display: inline-flex; padding: 8px 10px; }
  /* The open menu scrolls (Cache, 2026-10-10: with the CRM section it ran past the bottom of a phone). */
  /* The drawer (2026-10-11): the sidebar slides in from the left over a dimmed
     page, with a ✕ at its top; the hamburger in the header stays where it was. */
  body > .side { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(320px, 86vw); height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); }
  body.nav-open > .side { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .side-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 15px/1 var(--font-body); cursor: pointer; z-index: 2; }
  .kv { grid-template-columns: 1fr; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}

/* Import history (vehicles.html) — one <details> per import, the cars inside. */
details.hist { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
details.hist > summary { cursor: pointer; font-size: 14px; }
details.hist > summary small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.hist-sec { margin-top: 12px; }
.hist-sec h4 { font-size: 13px; margin: 0 0 4px; }
.hist-sec ul { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 220px; overflow: auto; }
.hist-sec li { padding: 4px 0; border-top: 1px solid var(--border); }

/* ---- Analytics (analytics.html, drawn by analytics-view.js) ----
   One blue for every bar; one blue ramp for the heat map. The ramp's steps are
   listed twice because the two themes need it to run in opposite directions:
   "more" is always the step furthest from the surface, so on a dark surface the
   busiest hour is the LIGHTEST cell. Reusing the light ramp there would make the
   busiest hour sink into the background. */
:root {
  --chart-1: #5598e7;
  --heat-0: var(--surface-2);
  --heat-1: #123f7a; --heat-2: #1c5cab; --heat-3: #2a78d6; --heat-4: #6da7ec; --heat-5: #b7d3f6;
}
:root[data-theme="light"] {
  --chart-1: #2a78d6;
  --heat-0: var(--bg-2);
  --heat-1: #cde2fb; --heat-2: #86b6ef; --heat-3: #3987e5; --heat-4: #1c5cab; --heat-5: #0d366b;
}
/* One toolbar, in the site's own surface and type (2026-10-09). */
.an-controls { display: inline-flex; gap: 0; flex-wrap: wrap; align-items: stretch; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; }
.an-ctl { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border-right: 1px solid var(--border); }
.an-ctl:last-child { border-right: 0; }
.an-controls label { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin: 0; }
.an-controls select { width: auto; min-width: 150px; padding: 6px 30px 6px 0; font-size: 14px; font-weight: 600; color: var(--text); background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.an-controls select:focus { outline: none; box-shadow: none; color: var(--accent-text); }
@media (max-width: 760px) { .an-controls { display: flex; } .an-ctl { border-right: 0; border-bottom: 1px solid var(--border); width: 100%; } .an-ctl:last-child { border-bottom: 0; } }
.an-panel .panel-body > table, .an-panel .an-two table { margin: 0 -18px; width: calc(100% + 36px); }
.an-panel .an-two table { margin: 0; width: 100%; }
.an-panel .an-two td { padding-left: 0; }
.an-panel th.num { text-align: right; }
.an-panel td small { margin-top: 1px; }
.an-empty { color: var(--muted); font-size: 14px; margin: 2px 0; }
.an-foot { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 14px 0 0; max-width: 78ch; }
.an-foot b { color: var(--text); font-weight: 600; }
.an-sub { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--muted-2); text-transform: uppercase; margin: 0 0 10px; padding: 0; }
.an-gap { margin-top: 22px; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
/* Inventory insights (2026-10-08): three tables side by side, stacked on a narrow screen. */
.an-three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Nothing wraps in these tables (Cache, 2026-10-09): a long name is cut with an ellipsis and shown whole on hover. */
.an-three td, .an-three th { white-space: nowrap; }
.an-three td b { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.an-three .pill { white-space: nowrap; }
/* The What to check dialog (2026-10-09). It opens from inside the report overlay (z-index 120), so it sits above it. */
.modal-wrap:has(.modal-wide) { z-index: 130; }
.an-report-box td, .an-report-box th { white-space: nowrap; }
/* The vehicle column gives way first: the name and its note are cut with an ellipsis, so the numbers and buttons always fit (Cache, 2026-10-09: "overflowing out of the frame"). */
.an-report-box table { width: 100%; }
.an-report-box td:first-child { max-width: 0; width: 36%; }
.an-report-box td:first-child > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-report-tools { display: flex; gap: 8px; flex: none; }
/* The report as a page of its own (analytics.html?view=lingering). */
.an-page-report > :not(.an-grid), .an-page-report .an-grid > :not(.an-report) { display: none; }
.an-grid > .an-report.an-report-page { position: static; inset: auto; z-index: auto; display: block; padding: 0; background: none; backdrop-filter: none; }
.an-report-page .an-report-box { max-width: none; max-height: none; overflow: visible; }
.an-row-actions { white-space: nowrap; text-align: right; }
.an-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* A checked car: struck out and at the bottom, still on the list (Cache, 2026-10-09). */
tr.an-done td { opacity: .6; }
tr.an-done td b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
tr.an-done .an-done-note { text-decoration: none; }
.an-row-actions .btn { margin-left: 4px; }
.modal.modal-wide { max-width: 860px; }
.chk-head h3 { margin-bottom: 8px; }
.chk-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.chk-facts small { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.chk-lead { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 10px 0; }
.chk-progress { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; }
.chk-groups { columns: 2; column-gap: 24px; }
.chk-group { break-inside: avoid; margin-bottom: 12px; }
.chk-group h4 { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); margin: 6px 0 4px; }
.chk-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.chk-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.chk-item input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.chk-item.on span { color: var(--muted); text-decoration: line-through; }
@media (max-width: 760px) { .chk-groups { columns: 1; } }
.an-three > div { min-width: 0; overflow-x: auto; }
.an-three table { width: 100%; }
.an-three td, .an-three th { padding-left: 8px; padding-right: 8px; }
.an-three th { white-space: normal; line-height: 1.2; }
.an-three table td, .an-three table th { font-size: 13px; }
.pill-ok { color: var(--ok, #15803d); }
.pill-warn { color: var(--accent-text); border-color: var(--accent); }
/* A car on the report that was walked before and is due again (2026-10-08). */
.an-recheck { display: block; margin-top: 3px; font-size: 11.5px; color: var(--accent-text); font-weight: 600; }
.an-panel .pill + .pill { margin-left: 4px; }
.an-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-facts span { display: block; font-size: 12.5px; color: var(--muted); }
.an-facts b { display: block; font-family: var(--font-head); font-size: 1.6rem; letter-spacing: -0.02em; margin-top: 4px; }
.an-pill, .an-panel .pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--muted); margin-left: 6px; white-space: nowrap; }

/* Bars: never thicker than 14px, square at the baseline, rounded at the data end. */
.an-bars { display: grid; gap: 9px; }
.an-bar { display: grid; grid-template-columns: 104px 1fr auto; gap: 10px; align-items: center; font-size: 13px; border-radius: 6px; outline: none; }
.an-bar:focus-visible, .an-cell:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.an-bar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bar-track { display: block; height: 14px; }
.an-bar-fill { display: block; height: 100%; background: var(--chart-1); border-radius: 0 4px 4px 0; min-width: 0; }
.an-bar-val { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; min-width: 2ch; }
.an-inline { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }

/* Heat map: a 2px gap in the surface colour separates the cells — no borders. */
.an-heat { display: grid; gap: 2px; align-items: center; }
.an-heat-day { font-size: 12px; color: var(--muted); padding-right: 8px; }
.an-heat-hour { font-size: 11px; color: var(--muted-2); text-align: left; white-space: nowrap; overflow: visible; height: 16px; }
.an-cell { display: block; height: 22px; border-radius: 3px; outline: none; }
.an-heat-0 { background: var(--heat-0); } .an-heat-1 { background: var(--heat-1); } .an-heat-2 { background: var(--heat-2); }
.an-heat-3 { background: var(--heat-3); } .an-heat-4 { background: var(--heat-4); } .an-heat-5 { background: var(--heat-5); }
.an-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; }
.an-legend .an-cell { width: 18px; height: 12px; }
.an-legend .muted:first-child { margin-right: 4px; } .an-legend .muted:last-child { margin-left: 6px; }
.an-tip { position: fixed; z-index: 200; display: none; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12.5px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 6px 18px -6px var(--shadow); }
@media (max-width: 900px) { .an-two { grid-template-columns: 1fr; } .an-bar { grid-template-columns: 84px 1fr auto; } }
@media (max-width: 1900px) { .an-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .an-three > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .an-three { grid-template-columns: minmax(0, 1fr); } }

/* Analytics: the folded report, and the in-depth report's row of filters. */
details.an-fold > summary { cursor: pointer; list-style: none; border-bottom: 0; }
details.an-fold > summary::-webkit-details-marker { display: none; }
details.an-fold > summary h3::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); }
details.an-fold[open] > summary h3::before { content: "▾"; }
details.an-fold[open] > summary { border-bottom: 1px solid var(--border); }
.an-x-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.an-x-controls select { width: auto; max-width: 190px; padding: 6px 9px; font-size: 13px; }
.an-x-group { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--border-2); }
.an-x-group label, .an-x-check { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.an-x-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.an-x-check input { width: auto; }
.an-x-sum { font-size: 14px; margin: 0 0 14px; color: var(--muted); }
.an-x-sum b { color: var(--text); font-weight: 600; }

/* Analytics: the manager's report and its print form. */
.an-lead { font-size: 14px; line-height: 1.55; color: var(--text); max-width: 78ch; margin: 0 0 12px; }
.an-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.an-checks h4, .an-checks h5 { font-size: 13px; margin: 0 0 6px; }
.an-checks ul { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.an-checks li { padding: 3px 0 3px 20px; position: relative; line-height: 1.4; }
.an-checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border: 1.5px solid var(--border-2); border-radius: 3px; }
.an-print-only { display: none; }
@media (max-width: 900px) { .an-checks { grid-template-columns: 1fr 1fr; } }
@media print {
  /* Only when the report's own button asked for it: Ctrl-P anywhere else on the
     portal still prints the page as it looks. */
  html.an-printing { --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --muted: #333; --muted-2: #444; --border: #bbb; --border-2: #777; }
  html.an-printing body { display: block; background: #fff; }
  html.an-printing .side, html.an-printing .topbar, html.an-printing .an-controls, html.an-printing .an-tip,
  html.an-printing #out > *:not([data-report="lingering"]), html.an-printing .an-noprint, html.an-printing .alert { display: none !important; }
  html.an-printing .content { padding: 0; }
  html.an-printing details.an-fold { border: 0; }
  html.an-printing details.an-fold > summary h3::before { content: ""; width: 0; }
  html.an-printing .an-print-only { display: block; }
  html.an-printing .an-print-car { break-before: page; padding-top: 4px; }
  html.an-printing .an-print-car h4 { font-size: 16px; margin: 0 0 2px; }
  html.an-printing .an-print-car > p { font-size: 12px; margin: 0 0 12px; }
  html.an-printing .an-boxes { gap: 10px 22px; }
  html.an-printing .an-boxes li { font-size: 11.5px; padding-top: 2px; padding-bottom: 2px; }
  html.an-printing .an-notes { margin-top: 16px; border-top: 1px solid #777; padding-top: 6px; min-height: 90px; }
}

/* ---- Analytics: wide layout, trend chart, time-frame controls ----
   The portal's pages stop at 1240px, which suits a table. Analytics is several
   charts that are easier to read side by side, so it takes the whole window and
   lays its panels two abreast once there is room for two. */
.content.content-wide { max-width: none; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.an-grid > * { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 1500px) { .an-grid > .an-half { grid-column: auto; } }
.an-grid > .stats { margin-bottom: 0; }

/* Stacked series: the validated categorical order — blue, orange, aqua, yellow,
   magenta — stepped separately for each theme. Never cycled: a sixth series is
   folded into "Other", which is grey because it is not an entity. */
:root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-x: #667085; }
:root[data-theme="light"] { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-x: #98a2b3; }
/* One series, not split: the page's one chart color, which a dealership's own
   accent replaces. The numbered ones below are the split series and stay fixed —
   five colors that have to be told apart cannot all follow one store's color. */
.an-s0 { background: var(--chart-1); }
.an-s1 { background: var(--series-1); } .an-s2 { background: var(--series-2); } .an-s3 { background: var(--series-3); }
.an-s4 { background: var(--series-4); } .an-s5 { background: var(--series-5); } .an-sx { background: var(--series-x); }

.an-seg-ctl { display: inline-flex; border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; }
.an-seg-ctl button { background: transparent; color: var(--muted); border: 0; border-right: 1px solid var(--border-2); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.an-seg-ctl button:last-child { border-right: 0; }
.an-seg-ctl button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.an-seg-ctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.an-facts-row { grid-template-columns: repeat(3, max-content); gap: 36px; margin: 4px 0 18px; }
.an-facts b small { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

.an-chart { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.an-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 200px; font-size: 11px; color: var(--muted-2); text-align: right; font-variant-numeric: tabular-nums; }
.an-yaxis span { line-height: 1; }
.an-plot { min-width: 0; }
/* The three gridlines are drawn by the plot's own background: top, middle, baseline. */
.an-cols { display: flex; align-items: flex-end; gap: 2px; height: 200px;
  background: linear-gradient(var(--border), var(--border)) top / 100% 1px no-repeat,
              linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat,
              linear-gradient(var(--border-2), var(--border-2)) bottom / 100% 1px no-repeat; }
.an-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; position: relative; }
.an-col:hover, .an-col:focus-visible { background: var(--surface-2); }
.an-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; width: 100%; max-width: 24px; flex: 0 0 auto; }
.an-stack .an-seg { display: block; width: 100%; min-height: 2px; }
.an-stack .an-seg:last-child { border-radius: 4px 4px 0 0; }
.an-col-val { font-size: 11px; line-height: 1; padding-bottom: 3px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.an-xaxis { display: flex; gap: 2px; margin-top: 6px; }
.an-xaxis span { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: visible; }
.an-legend-series { flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.an-legend-series span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend-series i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.an-legend-series b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
details.an-table { margin-top: 14px; font-size: 13px; }
details.an-table > summary { cursor: pointer; color: var(--muted); }
details.an-table table { margin-top: 8px; }
details.an-table td, details.an-table th { padding: 6px 12px 6px 0; }

.an-delta { display: block; font-size: 12.5px; margin-top: 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.an-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Analytics: motion ----
   Cache, 2026-10-04: "add some subtle animations to the analytics page when
   changing time toggle and other views." Every redraw replaces the markup, so
   these run by themselves each time a toggle changes what is on screen: the
   content settles in, bars grow from their baseline, columns rise from the
   axis. Short, and one direction only — the eye should land on the new figures,
   not watch them arrive. The filter row itself is left still, or the control
   somebody is using would flicker under their pointer. */
@keyframes an-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes an-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes an-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes an-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.an-grid > * { animation: an-settle .28s ease-out both; }
.an-grid > *:nth-child(2) { animation-delay: .03s; } .an-grid > *:nth-child(3) { animation-delay: .06s; }
.an-grid > *:nth-child(4) { animation-delay: .09s; } .an-grid > *:nth-child(n+5) { animation-delay: .12s; }
[data-trend] > *:not(.an-x-controls), [data-reps] > *:not(.an-x-controls), [data-explore] > *:not(.an-x-controls) { animation: an-settle .22s ease-out both; }
.an-bar-fill { transform-origin: left center; animation: an-grow-x .42s cubic-bezier(.2, .7, .2, 1) both; }
.an-stack { transform-origin: center bottom; animation: an-grow-y .42s cubic-bezier(.2, .7, .2, 1) both; }
.an-col-val { animation: an-fade .3s ease-out .28s both; }
.an-heat .an-cell { animation: an-fade .35s ease-out both; }
details.an-fold[open] > .panel-body, details.an-table[open] > table, details.hist[open] > .hist-body { animation: an-settle .2s ease-out both; }
.an-seg-ctl button { transition: background-color .15s ease, color .15s ease; }
.an-col { transition: background-color .12s ease; }
.an-tip { transition: opacity .1s ease; }
/* Some people are made unwell by movement on a screen, and say so in their
   system settings. For them the page simply changes. */
@media (prefers-reduced-motion: reduce) {
  .an-grid > *, [data-trend] > *, [data-reps] > *, [data-explore] > *, .an-bar-fill, .an-stack, .an-col-val, .an-heat .an-cell,
  details.an-fold[open] > .panel-body, details.an-table[open] > table, details.hist[open] > .hist-body { animation: none !important; }
  .an-seg-ctl button, .an-col, .an-tip { transition: none !important; }
}
@media print { .an-grid > *, .an-bar-fill, .an-stack { animation: none !important; } }

/* Analytics: the folded remainder of a shortened table. */
.an-panel tbody.an-more-ctl td { border-bottom: 0; padding-top: 10px; padding-bottom: 0; }

/* A small text button inside a line of text — "Set password" beside a login. */
.btn-link { background: none; border: 0; padding: 0 0 0 6px; font: inherit; font-size: 12.5px; color: var(--info-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--text); }

/* ==== The website's look, carried into the portal ====
   Cache, 2026-10-04: "The actual super admin and dealer portal websites need to
   match the website's look and feel too." The portal already shared the site's
   colors and typefaces (both load styles.css); what it lacked was the site's
   atmosphere — the warm glow behind the page, headings with room around them,
   soft cards, pill-shaped labels, and things settling into place rather than
   appearing. This block is that, and only that: it changes how the portal
   looks and nothing about what any page does. It sits last so it wins without
   touching the rules above, and it serves both the dealer's pages and Test
   Drive Valet's own, which are the same stylesheet. */

/* The page behind everything: the site's amber glow at the top right and a
   faint cool one at the bottom left. Fixed, so it stays put while a long table
   scrolls over it. `color-mix` on the tokens means it follows the light theme. */
body {
  background:
    radial-gradient(920px 560px at 88% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    radial-gradient(760px 520px at 4% 108%, color-mix(in srgb, var(--info-text) 6%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* The sidebar: glass over the glow, like the site's top bar. */
.side { background: color-mix(in srgb, var(--bg-2) 72%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 22px 16px; }
.side .brand { font-size: 16px; padding: 4px 8px 16px; }
.side .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.side .brand-mark svg { width: 20px; height: 20px; }
.menu { gap: 3px; }
.menu a { padding: 10px 12px; border-radius: 11px; font-size: 14.5px; transition: background-color .15s ease, color .15s ease; }
.menu a.active { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); font-weight: 600; }

/* Room to breathe, and a page title that reads as a title. */
.content { padding: 40px 44px 72px; }
.topbar { margin-bottom: 30px; }
.topbar h1 { font-size: clamp(1.75rem, 2.3vw, 2.2rem); letter-spacing: -0.03em; }
.topbar p { font-size: 15px; margin-top: 6px; }

/* Cards: rounder, slightly see-through so the glow reaches them, and a border
   that answers the pointer the way the site's cards do. */
.stat, .panel { border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); transition: border-color .15s ease; }
.stat:hover, .panel:hover { border-color: var(--border-2); }
.stats { gap: 16px; margin-bottom: 26px; }
.stat { padding: 22px 24px; }
/* The label only — a figure's own notes under it ("vs the 90 days before") stay as written. */
.stat > span:first-child { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.stat b { font-size: 2.3rem; margin-top: 10px; }
.panel { margin-bottom: 18px; }
.panel-head { padding: 18px 22px; }
/* Section titles in the dealership's accent, bold (Cache, 2026-10-09). --section-accent is
   set by portal.js when the store has a color and its plan includes branding; our gold otherwise. */
.panel-head h3 { font-size: 16px; letter-spacing: -0.01em; font-weight: 800; color: var(--section-accent, var(--accent-text)); }
.panel-body { padding: 22px; }
th { padding: 12px 22px; font-size: 11.5px; letter-spacing: .08em; }
td { padding: 14px 22px; }
/* Analytics pulls its tables out to the panel's edge; keep that flush. */
.an-panel .panel-body > table { margin: 0 -22px; width: calc(100% + 44px); }

/* An insurer's logo on its plate, where a customer named the company instead
   of photographing a card. White behind it: a logo is drawn for a white page. */
.insurer-logo { display: inline-grid; place-items: center; width: 132px; height: 58px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--border-2); flex: none; box-sizing: border-box; overflow: hidden; }
.insurer-logo img { width: 100%; height: 100%; max-width: 104px; max-height: 40px; object-fit: contain; display: block; }
.insurer-named { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.insurer-named b { display: block; font-size: 16px; }
.insurer-named small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---- Analytics in the dealership's own color ----
   `analytics.html` sets --chart-1 on the page from the store's accent (stepped
   until it can be seen on this theme) and adds .an-dealer. The heat map's ramp
   is then built from that one color: fainter steps are mixed into the panel,
   and the busiest step is pushed a little toward the text color, so "more" is
   always the step furthest from the surface in either theme. One hue. */
.an-dealer {
  --heat-1: color-mix(in srgb, var(--chart-1) 26%, var(--heat-0));
  --heat-2: color-mix(in srgb, var(--chart-1) 48%, var(--heat-0));
  --heat-3: color-mix(in srgb, var(--chart-1) 72%, var(--heat-0));
  --heat-4: var(--chart-1);
  --heat-5: color-mix(in srgb, var(--chart-1) 62%, var(--text));
}

/* Analytics: six headline tiles, and the one that is also a link. */
.an-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
button.stat-link { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); }
.an-stat-note { display: block; font-size: 12.5px; margin-top: 6px; }
.stat .an-stat-go { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); letter-spacing: 0; text-transform: none; }
button.stat-link:hover { border-color: var(--accent); }
button.stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The "Vehicles Driven Often & Unsold" report: not in the page's flow. Its tile
   opens it over the page, dimmed behind, and it scrolls inside its own box. */
.an-grid > .an-report { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; margin: 0;
  background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: an-fade .16s ease-out both; }
.an-report-box { width: 100%; max-width: 1400px; max-height: calc(100vh - 48px); overflow: auto; margin: 0; background: var(--surface);
  border-color: var(--border-2); box-shadow: 0 40px 80px -30px var(--shadow); animation: an-settle .2s ease-out both; }
.an-report-box > .panel-head { position: sticky; top: 0; z-index: 1; background: var(--surface); flex-wrap: nowrap; align-items: flex-start; }
.an-report-box > .panel-head h3 { font-size: 1.25rem; margin-bottom: 4px; }
.an-report-box details.an-table > summary { font-size: 14px; font-weight: 600; color: var(--text); }
.an-report-box details.an-table[open] > .an-checks { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .an-grid > .an-report, .an-report-box { animation: none !important; } }
@media print {
  /* Printing lays the report back into the page: no overlay, no inner scroll. */
  html.an-printing .an-grid > .an-report { position: static; display: block; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  html.an-printing .an-report-box { max-height: none; overflow: visible; border: 0; box-shadow: none; animation: none; }
  html.an-printing .an-report-box > .panel-head { position: static; }
}
@media print {
  /* The printed report lists every car, including the ones folded on screen. */
  html.an-printing tbody.an-more[hidden] { display: table-row-group !important; }
  html.an-printing tbody.an-more-ctl { display: none !important; }
}

/* ---- Outside the dealership's plan ----
   The note that says so, the greyed panel under it, and the small tag on one
   control. The panel still shows what the dealership has saved: a downgrade
   hides, it never deletes. */
.plan-note { margin: 0; padding: 12px 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); background: color-mix(in srgb, var(--accent) 9%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.plan-note b { color: var(--text); font-weight: 600; }
.plan-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.panel-body > .plan-note, .plan-note.is-inline { border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 10px; margin-bottom: 14px; }
.plan-locked > [inert] { opacity: .5; filter: saturate(.6); }
.plan-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); white-space: nowrap; vertical-align: middle; }
label.plan-locked, .field.plan-locked { opacity: 1; }
.field.plan-locked > label:first-child { display: inline-flex !important; vertical-align: middle; }
label.plan-locked > .plan-tag { margin-left: auto; align-self: center; flex: none; }
.tag-plan { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
/* Three looks for three tiers. Core: plain outline. Intelligence: the accent
   tag above. Enterprise: gold-to-platinum edge and a diamond, so the top tier
   reads as the top tier in any list. */
.tag-plan.plan-core { background: transparent; color: var(--muted); border: 1px solid var(--border-2); }
.tag-plan.plan-enterprise { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #f2b53a, #fbe7b2 40%, #c9ced8 70%, #f2b53a) border-box; border: 1px solid transparent; color: var(--accent-text); }
.tag-plan.plan-enterprise::before { content: "◆ "; font-size: 9px; vertical-align: 1px; }

/* Labels as pills, buttons with the site's corners. */
.tag { border-radius: 999px; padding: 4px 10px; }
.actions .btn, .btn-sm { border-radius: 10px; }
.modal { border-radius: 20px; padding: 30px; }
.modal h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.empty b { font-size: 1.15rem; }

/* Things settle into place when a page opens. Tied to `body.ready` because the
   page is hidden until the portal knows who is signed in — without that the
   movement would have finished before anything was visible. Once, on arrival:
   nothing here moves again while somebody is working. */
@keyframes portal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* `backwards`, NOT `both`, and the difference took the analytics report down on
   the day it shipped. With `both` the finished animation keeps holding its last
   frame, so the element's transform is the identity matrix rather than `none`
   for ever after — and ANY transform makes an element the containing block for
   `position: fixed` inside it. The "Vehicles Driven Often & Unsold" report is a
   fixed overlay inside #out: it opened sized to the whole analytics page and
   centered 1,600px down, so pressing its tile just dimmed the screen. The end
   state here is the element's natural state, so nothing needs holding. */
body.ready .content > * { animation: portal-in .36s ease-out backwards; }
body.ready .content > *:not(.topbar) { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) { body.ready .content > * { animation: none; } }

@media (max-width: 760px) {
  .content { padding: 22px 16px 44px; }
  /* Opened over the page on a phone, the menu must not show the page through it. */
  body.nav-open .side { background: var(--bg-2); }
}
@media print {
  body { background: none; }
  body.ready .content > * { animation: none; }
}

/* The phone check-in's code on the Settings page: the QR on a white plate
   (a scanner needs black on white whatever the portal's theme), the address
   and its buttons beside it. */
.phone-code { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 14px; border: 1px solid var(--border-2); border-radius: 12px; }
.phone-qr { flex: none; background: #fff; border-radius: 10px; padding: 6px; line-height: 0; }
.phone-qr svg { display: block; }
.tag-phone { background: color-mix(in srgb, var(--info-text) 16%, transparent); color: var(--info-text); }

/* The billing banner: a payment failed, or check-ins are paused for it.
   Above the topbar on every page, because the Settings tab that fixes it is
   not where a dealer is looking when the problem starts. */
.billing-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin: 0 0 16px; border-radius: 12px; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); color: var(--text); font-size: 14px; }
.menu a.is-locked { opacity: .55; }
.menu a.is-locked:hover { opacity: .8; }
.soon.tier-badge { letter-spacing: .06em; }
.soon.plan-intelligence { background: rgba(242,181,58,.18); color: var(--accent-text); border-color: rgba(242,181,58,.4); }
.soon.plan-enterprise { background: rgba(147,197,253,.16); color: var(--info-text); border-color: rgba(147,197,253,.4); }
.bell-item.is-pin { background: rgba(242,181,58,.08); }
.billing-bar.warn { background: rgba(242,181,58,.12); border-color: rgba(242,181,58,.4); }
.billing-bar span { flex: 1; }
.view-as-bar { display: flex; align-items: center; gap: 14px; padding: 11px 18px; margin: 0 0 16px; border-radius: 12px; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.4); color: var(--text); font-size: 14px; }
.view-as-bar span { flex: 1; }

/* ---- Valet CRM: the pipeline board and the deal page (2026-10-10) ---- */
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.pipe-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 200px; }
.pipe-col.over { border-color: var(--accent); }
.pipe-col > header { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--section-accent, var(--accent-text)); min-width: 0; }
.pipe-col > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-col > header b { font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 999px; padding: 2px 9px; }
.pipe-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.pipe-empty { color: var(--muted-2); font-size: 13px; text-align: center; padding: 24px 0; }
.pipe-card { display: block; min-width: 0; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; color: inherit; text-decoration: none; cursor: grab; }
.pipe-card:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--text) 7%, transparent); }
.pipe-card.dragging { opacity: .5; }
.pipe-card b { display: block; font-size: 13.5px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-card small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-card .pipe-car { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.3; min-width: 0; }
.pipe-card .pipe-car > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipe-card .pipe-car img { width: 40px; height: 28px; object-fit: cover; border-radius: 5px; flex: none; }
.pipe-card.is-sold { border-color: rgba(74,222,128,.4); }
.pipe-card.is-lost { opacity: .6; }
.pipe-card.is-lost b { text-decoration: line-through; }
.deal-stages { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.deal-stage { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 14px 7px 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.deal-stage i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.deal-stage.done { color: var(--text); } .deal-stage.done i { background: var(--accent); color: var(--accent-ink); }
.deal-stage.now { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .deal-stage.now i { background: var(--accent); color: var(--accent-ink); }
.deal-stage.off { opacity: .45; } .deal-stage:disabled { cursor: default; }
.deal-stage.is-sold { border-color: rgba(74,222,128,.6); } .deal-stage.is-sold i { background: var(--ok-text); color: #fff; }
.deal-stage.is-lost { border-color: rgba(248,113,113,.5); } .deal-stage.is-lost i { background: var(--bad-text); color: #fff; }
.deal-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .deal-grid { grid-template-columns: 1fr; } }
.timeline { display: flex; flex-direction: column; }
.tl-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.45; }
.tl-row:first-child { border-top: 0; }
.tl-row .tl-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 14px; }
.tl-row small { display: block; margin-top: 2px; font-size: 12px; }
.deal-drive { display: block; padding: 8px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 14px; }
.deal-drive:first-child { border-top: 0; }
.deal-drive b { display: block; font-weight: 600; } .deal-drive small { display: block; font-size: 12px; margin-top: 2px; }

/* ---- The collapsed menu (2026-10-10): icons only, more page ---- */
.side { position: sticky; }
/* Inside the sidebar's edge, not hanging over it: the sidebar scrolls now
   (2026-10-13), and a scrolling box clips anything that overhangs it. It sits
   on the brand row, which keeps room for it on the right. */
.side-collapse { position: absolute; right: 10px; top: 22px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-2); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 5; }
.side .brand { padding-right: 44px; }
body.side-mini .side .brand { padding-right: 8px; }
/* Collapsed: the button leaves the corner and takes its own row right under
   the logo (the sidebar is a flex column; order puts it there), so nothing
   covers the logo whatever size it is. */
body.side-mini .side .brand { order: -2; }
body.side-mini .side-collapse { position: static; transform: none; order: -1; margin: 0 auto 10px; }
.side-collapse svg { width: 14px; height: 14px; }
.side-collapse:hover { color: var(--text); border-color: var(--accent); }
body.side-mini { grid-template-columns: 72px minmax(0, 1fr); }
body.side-mini .side { padding-left: 10px; padding-right: 10px; }
body.side-mini .side-collapse svg { transform: rotate(180deg); }
body.side-mini .side > :not(.brand):not(.menu):not(.side-foot):not(.side-collapse) { display: none; }
body.side-mini .brand { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; }
body.side-mini .menu a { justify-content: center; padding: 11px 0; gap: 0; font-size: 0; }
body.side-mini .menu a svg { width: 20px; height: 20px; }
body.side-mini .menu a .soon, body.side-mini .menu a .nav-badge { display: none; }
body.side-mini .side-foot > :not(.user) { display: none; }
body.side-mini .user { justify-content: center; padding: 6px 0; }
body.side-mini .user > div:last-child { display: none; }
@media (max-width: 900px) { .side-collapse { display: none; } }

/* Cars of interest on a deal (2026-10-10). */
.deal-cars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.deal-car { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.deal-car.is-primary { border-color: var(--accent); }
.deal-car img, .deal-car .noimg { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; background: color-mix(in srgb, var(--text) 8%, transparent); }
.deal-car > div { min-width: 0; flex: 1; } .deal-car b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deal-car small { display: block; font-size: 12px; color: var(--muted); }
.deal-car .deal-car-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.car-pick { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.car-pick .deal-car { cursor: pointer; } .car-pick .deal-car:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--text) 4%, transparent); }

.deal-person { display: flex; gap: 14px; align-items: center; }
.deal-person > div { min-width: 0; flex: 1; }
.face-lg { width: 56px; height: 56px; font-size: 17px; }

/* Tasks (2026-10-10). */
.task-list { display: flex; flex-direction: column; }
.task-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.task-row:first-child { border-top: 0; }
#tasksBox .task-row { grid-template-columns: 26px minmax(0, 1fr); }
.task-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-2); background: transparent; color: var(--ok-text); font: 700 13px var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.task-check:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.task-row.is-done .task-check { border-color: var(--ok-text); cursor: default; }
.task-row.is-done b { text-decoration: line-through; color: var(--muted); }
.task-main { min-width: 0; } .task-main b { display: block; font-weight: 600; } .task-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-main small a { color: var(--accent-text); }
.task-when { text-align: right; white-space: nowrap; font-size: 13px; } .task-when small { display: block; font-size: 11.5px; }
.task-who { white-space: nowrap; font-size: 13px; color: var(--muted); min-width: 90px; text-align: right; }
.panel.task-overdue .panel-head h3 { color: var(--bad-text); }
@media (max-width: 760px) { .task-row { grid-template-columns: 26px minmax(0, 1fr); } .task-when, .task-who { grid-column: 2; text-align: left; } }

/* Trade-in photos (2026-10-10). */
.trade-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.trade-photos:empty { margin: 0; }
.trade-photo { position: relative; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 6%, transparent); }
.trade-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trade-photo-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font: 700 14px/1 var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; }

/* The text inbox (2026-10-10). */
.inbox { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; height: calc(100vh - 190px); min-height: 480px; }
.inbox .panel { margin: 0; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.inbox-search { padding: 12px; border-bottom: 1px solid var(--border); } .inbox-search input { width: 100%; }
#threads { overflow: auto; flex: 1; }
.thread { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; cursor: pointer; }
.thread:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.thread.is-open { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.thread b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.has-new b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: middle; }
.thread small { color: var(--muted-2); font-size: 11.5px; white-space: nowrap; }
.thread span { grid-column: 1 / -1; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.inbox-head a { color: var(--accent-text); }
.inbox-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; display: flex; flex-direction: column; gap: 3px; }
.msg.in { align-self: flex-start; } .msg.out { align-self: flex-end; align-items: flex-end; }
.msg-body { padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg.in .msg-body { background: color-mix(in srgb, var(--text) 8%, transparent); border-bottom-left-radius: 5px; }
.msg.out .msg-body { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.msg small { color: var(--muted-2); font-size: 11.5px; }
/* The lead response clock (2026-10-10): a chip on a deal row or card, a bar on the deal page. */
.lead-clock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); margin-right: 6px; white-space: nowrap; vertical-align: middle; }
.lead-clock.is-waiting { background: rgba(242,181,58,.18); color: var(--accent-text); }
.lead-clock.is-late { background: rgba(192,57,43,.14); color: #b3261e; }
:root[data-theme="dark"] .lead-clock.is-late { color: #ff8a80; }
.lead-clock.is-answered { background: rgba(46,160,67,.14); color: #1f7a3a; }
:root[data-theme="dark"] .lead-clock.is-answered { color: #7ed49a; }
.lead-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; margin: -6px 0 16px; font-size: 14px; background: rgba(242,181,58,.14); border: 1px solid rgba(242,181,58,.35); color: var(--text); }
.lead-bar span { color: var(--muted); }
.lead-bar.is-late { background: rgba(192,57,43,.1); border-color: rgba(192,57,43,.35); }
.lead-bar.is-late span { color: #b3261e; font-weight: 600; }
:root[data-theme="dark"] .lead-bar.is-late span { color: #ff8a80; }
.lead-bar.is-answered { background: rgba(46,160,67,.1); border-color: rgba(46,160,67,.3); }
/* Text templates (2026-10-11): the Settings list and the inbox picker. */
.tpl-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tpl-item:last-child { border-bottom: 0; }
.tpl-item b { font-size: 14px; } .tpl-item p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; white-space: pre-wrap; }
.tpl-item.is-off b { color: var(--muted); }
.tpl-fill { font: inherit; font-size: 12px; font-family: ui-monospace, monospace; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); cursor: pointer; }
.tpl-fill:hover { border-color: var(--accent); }
.tpl-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; margin: 4px 0 12px; }
.tpl-row { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.tpl-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tpl-row b { display: block; font-size: 13.5px; margin-bottom: 3px; } .tpl-row span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
/* Paperwork (2026-10-11): the field editor in Settings and the list on a deal. */
.pw-page { position: relative; margin: 0 auto 14px; box-shadow: 0 2px 12px rgba(0,0,0,.14); background: #fff; }
.pw-page canvas { display: block; } .pw-layer { position: absolute; inset: 0; }
.pw-box { position: absolute; border: 2px dashed #b8860b; background: rgba(242,181,58,.26); border-radius: 4px; font-size: 10px; font-weight: 700; color: #5a3d00; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; cursor: move; touch-action: none; }
.pw-box.dealer { border-color: #6b7280; background: rgba(107,114,128,.22); color: #374151; }
.pw-box.is-sel { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 2; }
.pw-box .pw-grip { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; background: var(--accent); border-radius: 4px 0 3px 0; cursor: nwse-resize; }
.pw-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; position: sticky; top: 0; background: var(--surface); z-index: 3; }
.pw-tools .seg .seg-btn { padding: 6px 10px; font-size: 13px; }
.pw-tools select, .pw-tools input { font: inherit; font-size: 13px; padding: 6px 8px; }
.pw-canvas { max-height: min(62vh, calc(100vh - 300px)); overflow: auto; -webkit-overflow-scrolling: touch; background: color-mix(in srgb, var(--text) 5%, transparent); padding: 14px; border-radius: 10px; }
.pw-layer { touch-action: pan-x pan-y; }
.pw-modal { max-height: 96vh; overflow: auto; }
.pw-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pw-doc:last-child { border-bottom: 0; } .pw-doc small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pw-doc .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-wide.pw-modal { width: min(1100px, 96vw); }
/* The Leads list (2026-10-11): the inline hand-out select. */
.lead-assign { font: inherit; font-size: 13px; padding: 5px 8px; max-width: 170px; }
/* Leads in (2026-10-11): a row opens to what arrived. */
.li-row { cursor: pointer; } .li-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.li-detail td { background: color-mix(in srgb, var(--text) 3%, transparent); font-size: 13.5px; }
/* Follow-up schedules (2026-10-11): the step editor and the line on a deal. */
.cad-step { display: grid; grid-template-columns: auto 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cad-step label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cad-step label input { width: 64px; }
.cad-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
@media (max-width: 600px) { .cad-step { grid-template-columns: 1fr 1fr; } .cad-step input[data-title] { grid-column: 1 / -1; } }
.msg-state { opacity: .75; }
/* A call in the thread sits where a text from that side would: incoming and missed on the left, outgoing on the right. */
.msg.is-call .msg-body { background: transparent; border: 1.5px dashed var(--border-2); color: var(--muted); font-size: 13px; }
.msg.is-call.is-missed .msg-body { color: #b3261e; border-color: rgba(179,38,30,.45); }
:root[data-theme="dark"] .msg.is-call.is-missed .msg-body { color: #ff8a80; }
.msg.is-pending .msg-body { opacity: .72; }
.msg.is-failed .msg-body { background: color-mix(in srgb, var(--danger, #c0392b) 85%, var(--accent)); }
.msg-retry { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; color: var(--accent-text); cursor: pointer; text-decoration: underline; }
.inbox-compose { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.inbox-compose textarea { flex: 1; resize: none; }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; height: auto; } .inbox-list { max-height: 40vh; } .inbox-pane { min-height: 60vh; } }

/* Trade-in condition items (2026-10-10). */
.trade-cond { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.trade-cond-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.cond-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.cond-row:first-child { border-top: 0; }
.cond-row img, .cond-row .noimg { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; background: color-mix(in srgb, var(--text) 8%, transparent); display: block; }
.cond-row > div { flex: 1; min-width: 0; } .cond-row b { display: block; font-size: 13.5px; font-weight: 600; } .cond-row small { display: block; font-size: 12px; color: var(--muted); }
.sev { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sev-small { background: rgba(74,222,128,.14); color: var(--ok-text); } .sev-medium { background: rgba(242,181,58,.18); color: var(--accent-text); } .sev-large { background: rgba(248,113,113,.16); color: var(--bad-text); }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.seg-btn { border: 0; background: none; color: var(--muted); font: 600 13px var(--font-body); padding: 8px 16px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-2); }
.seg-btn.on { background: var(--accent); color: var(--accent-ink); }
.cond-prev { font-size: 13px; color: var(--muted); }

/* The trade-in panel's head: the key photo and the car (2026-10-10). */
.trade-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.trade-key, .trade-key img, .trade-key .noimg { width: 112px; height: 78px; border-radius: 10px; object-fit: cover; display: block; flex: none; background: color-mix(in srgb, var(--text) 8%, transparent); }
.trade-head > div { min-width: 0; } .trade-head b { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .trade-head small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.trade-facts { gap: 8px 20px; font-size: 13.5px; margin: 0 0 8px; }
.trade-facts small { font-size: 10px; }
.trade-money { padding-top: 8px; border-top: 1px solid var(--border); }
.trade-notes { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.trade-photo.is-key { border-color: var(--accent); }
.trade-photo-tag { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 1px 5px; }
.trade-photo-key { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.trade-photo-key:hover { background: var(--accent); color: var(--accent-ink); }

.inbox-head-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.veh-cell { display: flex; align-items: center; gap: 8px; }

/* The customer's Compliance panel (2026-10-10): labelled rows, tags, the screenings capped at three. */
.comp { padding-top: 6px; padding-bottom: 8px; }
.comp-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.comp-row:first-child { border-top: 0; }
.comp-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding-top: 4px; }
.comp-note { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.comp-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.comp-item { display: flex; align-items: center; gap: 10px; }
.comp-item > span:first-child { min-width: 96px; color: var(--text); }
.comp-list .btn { margin-top: 4px; }

/* New deal dialog (2026-10-10). */
.nd-known { margin: -4px 0 12px; }
.nd-driven { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-cars { display: flex; flex-direction: column; gap: 6px; }
.nd-car { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; }
.nd-car.is-primary { border-color: var(--accent); }
button.tag { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* The Valet CRM section of the menu (2026-10-10): its own heading and tint. */
.menu-sec { display: flex; align-items: baseline; gap: 6px; margin: 12px 10px 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--section-accent, var(--accent-text)); }
.menu-sec small { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted-2); }
.menu a.is-crm { border-left: 2px solid color-mix(in srgb, var(--section-accent, var(--accent)) 55%, transparent); border-radius: 0 9px 9px 0; margin-left: 2px; }
.menu a.is-crm.active { border-left-color: var(--section-accent, var(--accent)); }
body.side-mini .menu-sec { justify-content: center; margin: 10px 4px 4px; padding-top: 8px; font-size: 0; }
body.side-mini .menu-sec::before { content: "CRM"; font-size: 9px; letter-spacing: .1em; }
body.side-mini .menu-sec small { display: none; }

/* ---- On a phone (2026-10-10): a salesperson's Tasks, Inbox and Deals from their browser ---- */
.inbox-back { display: none; }
@media (max-width: 900px) {
  /* The page never gets wider than the phone: a scroll strip inside (the stage
     chips, a wide table) scrolls on its own instead of stretching everything. */
  .content { min-width: 0; overflow-x: hidden; }
  .deal-stages, .pipe, #listPanel { max-width: 100%; }
  .inbox { display: block; height: auto; }
  .inbox .panel { height: auto; }
  .inbox-list { max-height: none; }
  .inbox .inbox-pane { display: none; }
  .inbox.is-open .inbox-list { display: none; }
  /* The open conversation takes the whole screen (Cache, 2026-10-10: the
     keyboard hid the text box and Send). The pane is pinned to the visible
     part of the viewport; inbox.html resizes it as the keyboard comes and goes. */
  .inbox.is-open .inbox-pane { display: flex; position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 70; margin: 0; border-radius: 0; border-left: 0; border-right: 0; max-width: none; background: var(--bg); }
  .inbox.is-open .inbox-msgs { max-height: none; flex: 1 1 auto; min-height: 0; }
  .inbox.is-open .inbox-compose { flex: none; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--bg-2); }
  .inbox.is-open .inbox-head { flex: none; }
  .inbox-back { display: inline-flex; margin-right: 8px; padding: 6px 10px; }
  .inbox-head { flex-wrap: wrap; }
  .inbox-head-acts { width: 100%; justify-content: flex-start; }
  .msg { max-width: 88%; }
  .an-controls { flex-wrap: wrap; }
  .an-controls .an-ctl { flex: 1 1 45%; min-width: 140px; }
  #listPanel { overflow-x: auto; }
  #listPanel table { min-width: 640px; }
  .pipe { grid-auto-flow: row; grid-template-columns: 1fr; }
  .deal-stages { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .deal-stage { flex: none; }
  .topbar .actions { align-items: flex-start; width: 100%; }
  .topbar-btns { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .content { padding: 18px 14px 40px; }
  .task-when { white-space: normal; }
  .nd-car { flex-wrap: wrap; }
}

/* ---- The phone pass (Cache, 2026-10-10: "optimize mobile web usability") ----
   One header row at the top: Menu, the page's buttons, the bell and a small
   logo; the title under it. Panels scroll sideways instead of clipping, search
   boxes take the full width, filter controls stack, nothing hangs off the edge. */
@media (max-width: 600px) {
  * { -webkit-tap-highlight-color: transparent; }
  .topbar { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin-bottom: 16px; }
  .topbar > div:first-child { flex: none; }
  .topbar h1 { font-size: 1.35rem; line-height: 1.2; }
  .topbar .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin: 0; }
  .topbar-btns { order: 1; flex: 1 1 auto; justify-content: flex-start; gap: 8px; }
  .topbar-brand { order: 2; margin-left: auto; }
  .topbar-brand .logo-stack { align-items: flex-end; gap: 2px; }
  .topbar-brand .page-logo { height: 34px; padding: 5px 9px; }
  .topbar-brand .page-logo img { max-height: 22px; max-width: 110px; }
  .topbar-brand .page-logo.style-transparent, .topbar-brand .page-logo.style-invert { height: auto; }
  .topbar-brand .page-logo.style-transparent img, .topbar-brand .page-logo.style-invert img { max-height: 26px; }
  .logo-store { font-size: 9px; }
  .actions .btn, .topbar-btns .btn { padding: 8px 12px; font-size: 13.5px; }
  .back-link { font-size: 13px; }
  /* Panels: never clip a wide table; let it scroll sideways instead. */
  .panel { overflow-x: auto; }
  .panel-head { padding: 12px 14px; gap: 8px; }
  .panel-head h3 { font-size: 15px; }
  .panel-body { padding: 14px; }
  .filters { width: 100%; }
  .filters input[type="search"], .filters select { min-width: 0; width: 100%; }
  .panel-head .filters { flex-basis: 100%; }
  .an-controls { display: flex; width: 100%; box-sizing: border-box; }
  .an-controls .an-ctl { flex: 1 1 100%; }
  .an-controls .an-ctl select, .an-controls .an-ctl input { width: 100%; }
  table th, table td { padding: 9px 8px; font-size: 13.5px; }
  input, select, textarea { box-sizing: border-box; max-width: 100%; font-size: 16px; } /* 16px stops iOS zooming into fields */
  .field textarea { width: 100%; }
  .modal { padding: 18px 16px; border-radius: 14px; max-height: 94vh; }
  .modal-wrap { padding: 10px; align-items: flex-end; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
  .form-row { flex-direction: column; gap: 0; }
  .deal-grid { gap: 14px; }
  .deal-stages { gap: 5px; margin-bottom: 14px; }
  .deal-stage { padding: 6px 11px 6px 6px; font-size: 12.5px; }
  .deal-stage i { width: 20px; height: 20px; font-size: 11px; }
  .tl-row { font-size: 13.5px; }
  .deal-person { gap: 10px; }
  .face-lg { width: 46px; height: 46px; }
  .chk-facts { gap: 6px 14px; }
  .inbox-msgs { padding: 12px; }
  .inbox-compose { padding: 10px; }
  .task-row { gap: 8px 10px; padding: 9px 0; }
  .task-main small { white-space: normal; }
  .pipe-col { min-height: 0; }
  .stats, .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat b, .stat .big { font-size: 1.6rem; }
  .side-collapse { display: none; }
  .scans { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 110px 1fr; }
  .comp-row { grid-template-columns: 100px minmax(0, 1fr); }
}

/* Phone composer (Cache, 2026-10-11): the text box takes the full width on
   top; Templates sits small at the left and Send at the right under it. The
   bell's panel is pinned to the screen's edges rather than hung off the bell,
   which sits at the far left of the phone header. */
@media (max-width: 600px) {
  .inbox-compose { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
  .inbox-compose textarea { grid-column: 1 / -1; width: 100%; min-height: 50px; font-size: 16px; }
  .inbox-compose .btn-ghost { justify-self: start; padding: 8px 12px; font-size: 13.5px; }
  .inbox-compose .btn-primary { justify-self: end; min-width: 112px; padding: 10px 18px; }
  .bell-panel { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-height: 82vh; z-index: 80; }
}

/* Team scheduling (2026-10-11): the week grid. */
.sched-wrap { overflow-x: auto; }
.sched { min-width: 820px; }
.sched th small { display: block; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.sched th.is-today, .sched td.is-today { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sched-cell { vertical-align: top; min-width: 96px; cursor: pointer; }
.sched-cell:hover .add-hint { opacity: 1; }
.add-hint { display: block; text-align: center; color: var(--muted); opacity: .25; font-size: 18px; line-height: 1; }
.shift { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 7px; margin-bottom: 4px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); cursor: pointer; }
.shift.is-draft { border-style: dashed; }
.shift small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.shift:disabled { cursor: default; }
.sched-cell.is-off { background: color-mix(in srgb, var(--text) 5%, transparent); }
.off-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--muted); padding: 3px 6px; border: 1px dashed var(--border-2); border-radius: 6px; }

/* The desk (2026-10-11): the form on the left, the live summary on the right. */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.desk-summary { position: static; }
.desk-pay { padding: 6px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.desk-pay small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 2px; }
.desk-pay b { display: block; font-family: var(--font-heading, inherit); font-size: 36px; letter-spacing: -.02em; line-height: 1.1; }
.desk-pay span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.desk-summary .kv { grid-template-columns: 1fr auto; font-size: 13.5px; gap: 6px 14px; } .desk-summary .kv dd { text-align: right; font-variant-numeric: tabular-nums; }
.desk-compare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.desk-cmp { font: inherit; padding: 8px 4px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; text-align: center; }
.desk-cmp small { display: block; color: var(--muted); font-size: 11px; } .desk-cmp b { font-size: 14px; }
.desk-cmp.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.desk-extra { align-items: flex-end; }
@media (max-width: 1100px) { .desk { grid-template-columns: 1fr; } }

/* Deal page cars (2026-10-11): a real thumbnail, or the inventory page's no-photo mark. */
.deal-car-thumb { flex: 0 0 auto; width: 96px; height: 64px; border-radius: 8px; overflow: hidden; display: block; }
.deal-car-thumb img, .deal-car-thumb .veh-thumb-none { width: 96px; height: 64px; object-fit: cover; }

/* "Upgrade to Valet Intelligence" on a locked page and on Settings → Billing (2026-10-12). */
.plan-upgrade { display: inline-block; padding: 5px 11px; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #1a1200) !important; font-weight: 700; text-decoration: none !important; font-size: 13px; }
.plan-upgrade:hover { filter: brightness(1.06); }

/* The setup list inside the bell (2026-10-12): a <details> that opens into the steps. */
.bell-item.bell-setup { display: block; padding: 0; }
.bell-item.bell-setup summary { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.bell-item.bell-setup summary::-webkit-details-marker { display: none; }
.bell-item.bell-setup summary b::after { content: ' \25BE'; color: var(--muted); font-weight: 400; }
.bell-item.bell-setup[open] summary b::after { content: ' \25B4'; }
.bell-sub { border-top: 1px solid var(--border); padding: 4px 0 6px; }
.bell-step { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 14px 8px 18px; color: var(--text); text-decoration: none; font-size: 13px; }
.bell-step > span:first-child { color: var(--accent-text); text-align: center; }
.bell-step.is-done { color: var(--muted); } .bell-step.is-done > span:first-child { color: var(--ok-text, #3fb950); }
.bell-step b { display: block; font-weight: 600; } .bell-step small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.bell-step.is-done b { font-weight: 500; text-decoration: line-through; opacity: .7; }
a.bell-step:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.bell-step-all { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }

/* The key-metric boxes open what is behind them (2026-10-12). A box is a
   button; the chevron says so; Coming in drops open in place. */
.stat.is-click { position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: border-color .15s, transform .15s; }
.stat.is-click:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat.is-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-more { position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); opacity: .7; }
.stat-more.stat-drop-ic { transform: rotate(45deg); top: 14px; }
.stat.is-open { border-color: var(--accent); }
.stat.is-open .stat-drop-ic { transform: rotate(225deg); top: 18px; }
.stat-drop { margin-top: -8px; border-color: rgba(242,181,58,.45); }
.modal.modal-wide { max-width: 860px; }
.modal-wide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.stat-pill { display: inline-block; font-family: var(--font-head); font-size: 15px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); margin-left: 6px; vertical-align: middle; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.stat-chips .tag b { margin-left: 4px; }
.stat-detail table { width: 100%; }

/* The feedback bubble (2026-10-12): bottom right of every portal page. */
.fb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; box-shadow: 0 14px 34px -14px var(--shadow); transition: transform .15s, border-color .15s; }
.fb-fab svg { width: 18px; height: 18px; color: var(--accent-text); }
.fb-fab:hover { transform: translateY(-1px); border-color: var(--accent); }
@media (max-width: 760px) { .fb-fab { right: 12px; bottom: 12px; padding: 10px 12px; } .fb-fab span { display: none; } }
@media print { .fb-fab { display: none; } }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fb-kinds label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.fb-kinds input { width: auto; }

.fb-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-preview { position: relative; margin-top: 10px; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.fb-preview img { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.fb-preview .btn { position: absolute; top: 8px; right: 8px; }
body.fb-capturing * { animation: none !important; transition: none !important; }

/* Inventory signals (2026-10-12): the three pills on a car. */
.sig { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap; margin: 2px 4px 2px 0; }
.sig-ok { background: rgba(74,222,128,.14); color: var(--ok-text); }
.sig-warn { background: rgba(242,181,58,.18); color: var(--accent-text); }
.sig-bad { background: rgba(248,113,113,.16); color: var(--bad-text); }
.sig-hot { background: rgba(248,113,113,.16); color: var(--bad-text); }
.sig-muted { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); }
.sig-att { border: 1px solid currentColor; }
.sig-cell { min-width: 150px; }
tr.veh-row { cursor: pointer; }
/* The car's page. */
.veh-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; padding: 20px; align-items: start; }
.veh-photo .veh-thumb-lg, .veh-photo img { width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: 10px; }
.veh-pills { margin-bottom: 12px; }
.veh-kv { grid-template-columns: 110px 1fr 110px 1fr; }
.veh-kv dd small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.veh-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.check-list { display: grid; gap: 6px; margin-top: 8px; }
.check-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.check-row.is-done { opacity: .7; } .check-row.is-done b { text-decoration: line-through; font-weight: 500; }
.check-ic { color: var(--accent-text); font-weight: 700; text-align: center; } .check-row.is-done .check-ic { color: var(--ok-text); }
.check-row b { display: block; font-weight: 600; font-size: 13.5px; } .check-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.note-thread { margin-top: 14px; display: grid; gap: 8px; }
.note-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.note-row.is-check { border-style: dashed; }
.note-meta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .note-meta .btn { margin-left: auto; }
.note-body { white-space: pre-wrap; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.driver-row { padding: 8px 0; border-bottom: 1px solid var(--border); } .driver-row:last-child { border-bottom: 0; }
.driver-row b { font-weight: 600; } .driver-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 1000px) { .veh-grid { grid-template-columns: 1fr; } .veh-head { grid-template-columns: 1fr; } .veh-kv { grid-template-columns: 110px 1fr; } }

/* Settings → Reports (2026-10-13). */
.rep-card .panel-head h3 { font-size: 15px; }
.rep-scheds { margin-top: 12px; display: grid; gap: 8px; }
.rep-sched { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.rep-sched-on { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 500; }
.rep-sched small { grid-column: 1 / -1; font-size: 12px; }
.rep-to { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.rep-to .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--border-2); background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 13px; }
.rep-to .chip button { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; }
.rep-to .chip button:hover { color: var(--bad-text, #f87171); }
.rep-to .chip-add { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 220px; min-width: 0; }
.rep-to .chip-add input { margin: 0; width: 100%; min-width: 0; padding: 6px 10px; font-size: 13px; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.rep-preview { background: #0a0c10; border-radius: 10px; padding: 4px; max-height: 70vh; overflow: auto; color: #f3f5f8; }
.rep-preview a { color: #f2b53a; }
@media (max-width: 760px) { .rep-sched { grid-template-columns: 1fr; } }