/*
 * Podium_Api shared stylesheet, loaded by lib/Layout.cfc on every page.
 * Desktop rules first, then the phone layout (max-width: 700px) at the end.
 */

/* ---------------------------------------------------------------- base */
/* Nothing may widen the page past the screen: on a phone that lets the whole
 * app slide sideways. clip (not hidden) keeps position: sticky working. */
html, body { overflow-x: hidden; overflow-x: clip; }
body { font-family: -apple-system, Helvetica, Arial, sans-serif; max-width: 1100px; margin: 0 auto 2rem; padding: 0 1rem; color: #1a1a1a; }
/* Landscape iPhone (viewport-fit=cover, lib/Layout.cfc): the page stays clear of the notch. */
body { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
main { display: block; }
h1 { font-size: 1.4rem; margin: 1.2rem 0 0.8rem; }
h1 a { font-size: 0.9rem; font-weight: normal; margin-left: 1rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
a { color: #0a5cb8; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f3f3f3; padding: 0.1rem 0.3rem; border-radius: 4px; }
summary { cursor: pointer; color: #0a5cb8; }
button { cursor: pointer; }
textarea { font-family: inherit; font-size: 0.95rem; }
form { margin-bottom: 1rem; }
label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 0.2rem; }
.muted { color: #5f6368; font-size: 0.85rem; }
.ok { color: #0a7a2f; font-weight: 600; }
.bad { color: #b3261e; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; }
dt { color: #666; }
dd { margin: 0; }

/* ---------------------------------------------------------------- accessibility */
/* Visible focus for keyboard users on every interactive element. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #0a5cb8; outline-offset: 2px; border-radius: 6px;
}

/* ---------------------------------------------------------------- top nav */
/* One row: the links scroll sideways instead of wrapping (thin scrollbar as the hint). */
.topnav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem 1.2rem; padding: 0.7rem 0; border-bottom: 1px solid #e6e6e6; }
.topnav .brand { flex: none; font-weight: 700; color: #1a1a1a; }
.topnav .links { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0.3rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; }
.topnav .links a { flex: none; white-space: nowrap; padding: 0.25rem 0.55rem; border-radius: 6px; font-size: 0.9rem; color: #444; }
.topnav .links a:hover { background: #f1f4f8; text-decoration: none; }
.topnav .links a.active { background: #0a5cb8; color: #fff; }
/* Tap feedback (assets/nav-progress.js): a thin bar creeping across the top while the next page loads; invisible for the first 150 ms so quick pages don't flash it. */
.nav-progress { position: fixed; top: env(safe-area-inset-top, 0); left: 0; z-index: 10000; height: 3px; width: 0; background: #0a5cb8; opacity: 0; pointer-events: none; transition: opacity 0.2s, width 0s 0.2s; }
.nav-progress.on { width: 90%; opacity: 1; transition: width 6s cubic-bezier(0.1, 0.7, 0.2, 1) 0.15s, opacity 0.1s 0.15s; }

/* ---------------------------------------------------------------- tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid #eee; font-size: 0.875rem; vertical-align: top; }
th { background: #fafafa; }
th a.sort { color: inherit; white-space: nowrap; }
th a.sort:hover { color: #0a5cb8; }
.pager { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; }

/* ---------------------------------------------------------------- pills */
.pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; white-space: nowrap; }
.pill.open, .pill.handled, .podium { background: #e6f4ea; color: #0a7a2f; }
.pill.closed { background: #eee; color: #666; }
.pill.no-handler { background: #fff4e5; color: #a15c00; }
.pill.rejected, .pill.failed { background: #fdecea; color: #b3261e; }
.pill.info { background: #eef2f7; color: #44536a; }
.provider { background: #eef3fb; color: #0a5cb8; }
.count { background: #f3f3f3; color: #555; margin-left: 0.2rem; }
.aplan { background: #fff4e5; color: #a15c00; }
.stats a { color: inherit; }
.stats a:hover strong { color: #0a5cb8; }
.stats a.active strong { color: #0a5cb8; }
/* API Explorer's HTTP status pill */
.pill.ok, .pill.bad { padding: 0.15rem 0.6rem; font-size: 0.85rem; font-family: Consolas, monospace; font-weight: normal; }
.pill.ok { background: #e6f4ea; color: #0a7a2f; }
.pill.bad { background: #fdecea; color: #b3261e; }

/* ---------------------------------------------------------------- toolbars */
.toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar input[type=text] { padding: 0.4rem 0.6rem; width: 300px; }
.toolbar select, .toolbar button { padding: 0.4rem 0.6rem; }
.htmx-request#adf-results, .htmx-request#conv-results, .htmx-request#log-results,
.htmx-request#messages-panel, .htmx-request#explorer-result { opacity: 0.5; }

/* ---------------------------------------------------------------- ADF leads */
.stats { display: flex; gap: 2rem; margin: 0.5rem 0 1rem; }
.stats div strong { display: block; font-size: 1.3rem; }
.providers { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.providers a { text-decoration: none; }
.providers a.active .provider { background: #0a5cb8; color: #fff; }
.msg-list .msg { font-size: 0.88rem; }
.lead-row { cursor: pointer; }
.lead-row:hover { background: #fafcff; }
.detail-row { display: none; }
.detail-row.open { display: table-row; }
.detail-row > td { background: #fcfcfc; padding: 0.8rem 1rem; }
.detail dl { grid-template-columns: 9rem 1fr; gap: 0.3rem 1rem; margin: 0; }
.detail dt { color: #777; }
.timeline { padding-left: 1.2rem; margin: 0; }
.timeline li { margin-bottom: 0.9rem; }
.comments { background: #fff; border-left: 3px solid #ddd; padding: 0.3rem 0.6rem; margin: 0.3rem 0; white-space: pre-line; }
pre.xml { font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; background: #f7f7f7; padding: 0.6rem; border-radius: 6px; overflow-x: auto; max-height: 420px; }

/* ---------------------------------------------------------------- conversations */
.msg { border: 1px solid #eee; border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.msg.outbound { background: #eaf3ff; }
.sender-icon, .channel-icon { margin-right: 0.15rem; }
.channel-tabs { display: flex; gap: 0.4rem; margin: 1.25rem 0; flex-wrap: wrap; }
.channel-tab { border: 1px solid #c8d7ea; border-radius: 999px; padding: 0.35rem 0.75rem; color: #0a5cb8; }
.channel-tab.active { background: #0a5cb8; color: #fff; border-color: #0a5cb8; }

/* ---------------------------------------------------------------- API explorer */
.field { margin-bottom: 0.75rem; }
.field input[type=text] { width: 100%; padding: 0.5rem; box-sizing: border-box; font-family: Consolas, monospace; }
button.send { padding: 0.5rem 1.2rem; }
.quicklinks { margin-bottom: 1rem; }
.quicklinks button { font-size: 0.8rem; padding: 0.25rem 0.6rem; margin: 0 0.4rem 0.4rem 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.quicklinks button:hover { background: #f3f3f3; }

/* ---------------------------------------------------------------- settings */
.settings-form label { font-size: 1rem; color: inherit; margin-bottom: 0.35rem; }
.settings-form select, .settings-form button { padding: 0.5rem; font: inherit; }

/* ---------------------------------------------------------------- AI lead card (lead-card.cfm) */
.lead-card { border: 1px solid #d8e2f0; border-radius: 8px; padding: 0.8rem 1rem; margin: 0.8rem 0 1rem; background: #fbfdff; font-size: 0.9rem; }
.lead-card .lc-head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
.lead-card .lc-headline { font-weight: 600; font-size: 1rem; }
.lead-card .lc-kind { background: #eef3fb; color: #0a5cb8; border-radius: 10px; padding: 0.05rem 0.5rem; font-size: 0.75rem; }
.lead-card .lc-flag { background: #fff4e5; color: #a15c00; border-radius: 10px; padding: 0.05rem 0.5rem; font-size: 0.75rem; }
.lead-card dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.2rem 0.8rem; margin: 0.6rem 0; }
.lead-card dt { color: #666; }
.lead-card dd { margin: 0; }
.lead-card .lc-asked { border-left: 3px solid #ccd; padding: 0.2rem 0.6rem; margin: 0.5rem 0; color: #333; }
.lead-card .lc-label { color: #666; font-size: 0.8rem; margin-top: 0.6rem; }
.lead-card ul { margin: 0.2rem 0 0.4rem 1.1rem; padding: 0; }
.lead-card .lc-reply { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; padding: 0.5rem 0.7rem; white-space: pre-wrap; }
.lead-card .lc-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; color: #777; font-size: 0.78rem; }
.lead-card .card-btn { font-size: 0.78rem; padding: 0.15rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
.lead-card .card-btn.active { background: #0a5cb8; color: #fff; border-color: #0a5cb8; }
.lead-card pre { font-size: 0.75rem; background: #f5f5f5; padding: 0.5rem; border-radius: 4px; overflow-x: auto; max-height: 300px; white-space: pre-wrap; }
.lead-card.htmx-request { opacity: 0.6; }

/* ---------------------------------------------------------------- Volvo PIN programs (pins.cfm, programs.cfm) */
/* One hue per program family, used as a pill and as a card's left edge. */
.fam-aplan { background: #e8eef7; color: #1c4f8c; }
.fam-affinity { background: #e6f2ec; color: #2f6f4f; }
.fam-costco-ev, .fam-costco-cpo { background: #fbeaea; color: #9b2a24; }
.fam-unknown { background: #f1f1f1; color: #555; }
.fam-edge-aplan { border-left-color: #1c4f8c !important; }
.fam-edge-affinity { border-left-color: #2f6f4f !important; }
.fam-edge-costco-ev, .fam-edge-costco-cpo { border-left-color: #9b2a24 !important; }
.pill .pi { vertical-align: -3px; }
.pill.new { background: #0a5cb8; color: #fff; }
.nav-badge { display: inline-block; min-width: 1.1rem; padding: 0 0.3rem; margin-left: 0.25rem; border-radius: 999px; background: #d93025; color: #fff; font-size: 0.72rem; line-height: 1.1rem; text-align: center; }
.topnav .links a.active .nav-badge { background: #fff; color: #0a5cb8; }
.callout { display: block; border: 1px solid #c8d7ea; border-left: 4px solid #0a5cb8; background: #f5f9ff; border-radius: 8px; padding: 0.7rem 1rem; margin: 0 0 1rem; color: #1a1a1a; }
.callout:hover { text-decoration: none; background: #eef4fd; }
.callout span { display: block; color: #555; font-size: 0.85rem; margin-top: 0.15rem; }
.warn-stat strong { color: #b35c00; }
.pin-card, .program-family { border: 1px solid #e3e6ea; border-left: 4px solid #999; border-radius: 8px; padding: 0.8rem 1rem; margin: 0 0 0.9rem; background: #fff; }
.pin-top { display: flex; align-items: center; gap: 0.7rem; }
.pin-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; vertical-align: middle; }
.pin-who { flex: 1; min-width: 0; }
.pin-name { font-weight: 600; font-size: 1rem; }
.pin-code { font-size: 0.95rem; letter-spacing: 0.04em; }
.pin-program { margin: 0.6rem 0 0.4rem; }
.pin-groups { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.35rem; font-size: 0.85rem; }
.pin-groups a { color: #2f6f4f; display: inline-flex; align-items: center; gap: 0.25rem; }
.pin-facts { grid-template-columns: 9rem 1fr; margin: 0.5rem 0; }
.deadline { color: #555; font-size: 0.85rem; }
.deadline.soon { color: #b3261e; font-weight: 600; }
.pin-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.88rem; }
.pin-steps { margin-top: 0.5rem; }
.pin-steps ol, .pin-steps ul { margin: 0.4rem 0; padding-left: 1.2rem; font-size: 0.88rem; }
.pin-steps li { margin-bottom: 0.3rem; }
.program-family h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.program-family h2 a { font-size: 0.8rem; font-weight: normal; }
tr.offer-ended td { color: #5f6368; }

/* ---------------------------------------------------------------- home (index.cfm) + phone tab bar */
.home-title { margin-top: 1rem; }
.home-tiles .tile-label { display: flex; flex-direction: column; gap: 0.15rem; }
.tile-hint { font-weight: 400; font-size: 0.82rem; color: #4a5260; }
/* Home: the main tiles, four across on a wide screen (iPad landscape, desktop). */
@media (min-width: 900px) { .tiles.home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Home: small tiles under the grid for drill-down and reference pages. They
   share the row's full width (however many there are), wrapping on a phone,
   where each wrapped row stretches to fill too. */
.home-small { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.home-small-tile { flex: 1 1 10rem; position: relative; display: flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.5rem 0.75rem; border-radius: 12px; color: #1a1a1a; font-weight: 600; font-size: 0.95rem; -webkit-tap-highlight-color: transparent; }
.home-small-tile:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20, 40, 80, 0.12); }
.home-small-tile:active { transform: scale(0.98); }
.home-small-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-small-tile .tile-badge { position: static; flex: none; }
/* Needs you: action items under the Home grid (index.cfm). Two columns on wide screens, one on phones. */
.home-next { margin: 1.6rem 0 1rem; }
.home-next h2 { font-size: 1.25rem; margin: 0 0 0.6rem; display: flex; align-items: baseline; gap: 0.5rem; }
.home-next-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
.home-next-group { border: 1px solid #e3e7ec; border-radius: 14px; padding: 0.7rem 0.95rem 0.3rem; background: #fff; min-width: 0; }
.home-next-group h3 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.2rem; font-size: 1rem; }
.home-next-all { margin-left: auto; font-size: 0.88rem; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.home-next .item { min-height: 44px; padding-left: 0.2rem; padding-right: 0.2rem; }
.home-next .item-main { display: flex; flex-direction: column; }
.home-next .item-thumb { width: 2.6rem; height: 2.6rem; font-weight: 700; font-size: 0.9rem; }
.home-next-clip, .home-next-step { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-next-step { color: #2b313a; }
.home-next .swipe-row .item { border-bottom: none; }
.home-next .swipe-row { border-bottom: 1px solid #e8ebef; }
.home-next .swipe-row:last-child { border-bottom: none; }
.home-next-hint { margin: 0.6rem 0 0; }
/* A swipe action that finishes something (green), next to the red Delete. */
.swipe-delete.swipe-ok { background: #1f7a4d; }
.swipe-delete.swipe-archive { background: #5d6875; }
/* Documents: Archived (N), folded under On file (lib/DocumentsPane.cfc). */
.doc-archived { margin-top: 0.8rem; }
.doc-archived > summary { cursor: pointer; color: #5d6875; font-size: 0.9rem; min-height: 36px; display: flex; align-items: center; }
.doc-item.is-archived { opacity: 0.75; align-items: center; }
/* Documents > Adjust crop (assets/doc-crop.js): the original with a box to drag, Turn, and the result. */
.doc-crop-sheet { width: min(44rem, 96vw); }
.doc-crop-stage { position: relative; width: fit-content; max-width: 100%; margin: 0.4rem auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.doc-crop-stage img { display: block; max-width: 100%; max-height: 58vh; }
.doc-crop-box { position: absolute; box-sizing: border-box; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 9999px rgba(16, 24, 40, 0.5); cursor: move; touch-action: none; }
.doc-crop-box i { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; background: rgba(10, 92, 184, 0.85); border-radius: 50%; touch-action: none; }
.doc-crop-box i[data-h="nw"] { left: -13px; top: -13px; cursor: nwse-resize; } .doc-crop-box i[data-h="ne"] { right: -13px; top: -13px; cursor: nesw-resize; }
.doc-crop-box i[data-h="sw"] { left: -13px; bottom: -13px; cursor: nesw-resize; } .doc-crop-box i[data-h="se"] { right: -13px; bottom: -13px; cursor: nwse-resize; }
.doc-crop-stage { overflow: hidden; }
.doc-crop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0.6rem 0; padding: 0 1rem; }
.doc-crop-pv-wrap { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.doc-crop-pv { position: relative; display: inline-block; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 6px; background: #f4f6f9; }
.doc-crop-pv-in { position: absolute; left: 50%; top: 50%; background-repeat: no-repeat; }
.doc-crop-actions { display: flex; align-items: center; gap: 0.8rem; padding: 0 1rem 1rem; }
/* Inbox (messages.cfm): one row per customer conversation, Mail-style --
   neutral rows; a blue dot and a blue wait time mark who's waiting on us. */
.inbox-n { opacity: 0.65; margin-left: 0.2rem; font-variant-numeric: tabular-nums; }
.inbox-items > div { border-bottom: 1px solid #edf0f3; }
.inbox-items > div:last-child { border-bottom: none; }
.inbox-items .item, .inbox-items .swipe-row .item { border-bottom: none; min-height: 44px; align-items: center; padding: 0.7rem 0.4rem 0.7rem 0; }
.inbox-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: transparent; margin: 0 0.1rem 0 0.25rem; }
.inbox-row.is-waiting .inbox-dot { background: #0a5cb8; }
.inbox-thumb { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #eef1f5; color: #3d5270; font-weight: 600; font-size: 0.88rem; }
.inbox-items .item-main { display: flex; flex-direction: column; gap: 0.12rem; }
.inbox-top { display: flex; align-items: baseline; gap: 0.6rem; }
.inbox-top .item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1a1a1a; }
.inbox-row.is-waiting .item-title { font-weight: 700; }
.inbox-when { flex: none; font-size: 0.82rem; color: #6b7280; font-variant-numeric: tabular-nums; }
.inbox-row.is-waiting .inbox-when { color: #0a5cb8; font-weight: 600; }
.inbox-preview { color: #4a5260; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-preview strong { color: #2b313a; font-weight: 600; }
.inbox-channel { color: #8a95a3; margin-right: 0.3rem; vertical-align: -2px; }
.inbox-status { font-size: 0.8rem; color: #6b7280; }
.inbox-status.is-failed { color: #9a5b00; }
.inbox-row.is-optout .item-title, .inbox-row.is-optout .inbox-preview { color: #5f6368; }
.setup-banner { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: #c8ecf2; color: #1a1a1a; }
.setup-banner span { flex: 1; }
.setup-banner strong { text-decoration: underline; }
.fab { display: none; }
.app-menu-close:focus:not(:focus-visible) { outline: none; }
.app-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: #f1f4f8; color: #1a1a1a; cursor: pointer; }
@media (max-width: 820px) {
    /* Phones: no top bar -- the store, Me and Back live in the menu pill (lib/Layout.cfc fabMenu), so the
       page starts at the top of the screen. */
    .topnav { display: none; }
    main { padding-top: 0.6rem; }
    /* Room under the page for the menu pill and the bars beside it (pill at the bottom), or a little (pill on top). */
    body { padding-bottom: 1.5rem !important; }
    html[data-fab^="b"] body { padding-bottom: calc(var(--fab-above) + 0.2rem) !important; }
    .lc-reply, .pos-pane.open { padding-bottom: 5rem; }
    .checkout-badge { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }

    /* The menu pill (assets/fab.js): Back (Home Screen app), the menu and the store's name; grows into the panel. */
    /* --fab-gap: between the pill and a bar on its line; --fab-edge: the screen edge, the same on both sides. */
    html { --fab-h: 54px; --fab-gap: 0.5rem; --fab-edge: 1rem; --fab-top: calc(env(safe-area-inset-top) + 0.75rem); --fab-bottom: calc(1rem + env(safe-area-inset-bottom)); --fab-above: calc(var(--fab-bottom) + var(--fab-h) + 0.6rem); }
    .fab { display: block; }
    .fab-bar { position: fixed; right: var(--fab-edge); bottom: var(--fab-bottom); z-index: 9720; display: flex; align-items: stretch; height: var(--fab-h); border-radius: 999px;
        background: #0a5cb8; color: #fff; box-shadow: 0 6px 18px rgba(10, 60, 120, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2); view-transition-name: fab-surface; transition: transform 0.12s ease; }
    .fab-btn { position: relative; display: flex; align-items: center; gap: 0.5rem; height: 100%; padding: 0 1.15rem 0 1rem; border: 0; border-radius: 999px; background: none; color: inherit;
        font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
    .fab-bar:has(.fab-btn:active) { transform: scale(0.95); }
    .fab-icons { display: grid; place-items: center; }
    .fab-ic { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.12s, transform 0.18s; }
    .fab-ic-close { opacity: 0; transform: rotate(-90deg); }
    html.fab-open .fab-ic-menu { opacity: 0; transform: rotate(90deg); }
    html.fab-open .fab-ic-close { opacity: 1; transform: none; }
    .fab-store { white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
    .fab-btn .nav-badge { position: absolute; top: -6px; right: -4px; margin: 0; background: #d93025; color: #fff; }
    .fab-back { display: grid; place-items: center; width: 50px; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.28); }
    .fab-back[hidden] { display: none; }
    /* With Back in it, the pill drops the store's name (it's at the top of the panel) to leave the line room. */
    .fab-bar:has(.fab-back:not([hidden])) .fab-store { display: none; }
    .fab-bar:has(.fab-back:not([hidden])) .fab-btn { padding: 0 1.05rem 0 0.95rem; }
    /* A quote open (the desk page, or one on a customer's page): the pill is just the menu, so the payment bar
       beside it has room for the payment, what's due and its chevron. */
    body.page-desk .fab-store, html.desk-open .fab-store { display: none; }
    body.page-desk .fab-btn, html.desk-open .fab-btn { padding: 0 1.05rem 0 0.95rem; }
    html.fab-open .fab-bar { view-transition-name: fab-btn; background: #1f2937; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
    html.fab-open .fab-btn .nav-badge { display: none; }
    .fab-scrim { position: fixed; inset: 0; z-index: 9710; background: rgba(15, 23, 42, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .fab-panel { position: fixed; right: 0.75rem; bottom: var(--fab-above); z-index: 9715; box-sizing: border-box;
        width: min(24rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - var(--fab-h) - 2.6rem - env(safe-area-inset-bottom) - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
        padding: 0.8rem; border-radius: 24px; background: #fff; color: #1a1a1a; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28); }
    html.fab-open .fab-panel { view-transition-name: fab-surface; }
    .fab-panel[hidden], .fab-scrim[hidden] { display: none; }
    .fab-stores { display: flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 0.7rem; border-radius: 14px; background: #f1f4f8; }
    .fab-stores button { flex: 1; min-height: 42px; border: 0; border-radius: 11px; background: none; font: inherit; font-weight: 600; color: #44505c; cursor: pointer; }
    .fab-stores button.active { background: #fff; color: #0a5cb8; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
    /* More: the full desktop list, folded (open when you're on one of its pages). */
    .fab-more { margin-bottom: 0.6rem; }
    .fab-more > summary { display: flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 40px; border-radius: 12px; color: #44505c; font-weight: 600; font-size: 0.9rem; list-style: none; cursor: pointer; }
    .fab-more > summary::-webkit-details-marker { display: none; }
    .fab-more > summary span { font-size: 0.75rem; transition: transform 0.15s; }
    .fab-more[open] > summary span { transform: rotate(180deg); }
    .fab-more > summary:active { background: #f1f4f8; }
    .fab-more-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; padding: 0.2rem 0 0.4rem; }
    .fab-more-list a { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.3rem 0.6rem; border-radius: 12px; background: #f6f8fa; color: #1a1a1a; font-size: 0.88rem; font-weight: 600; }
    .fab-more-list a:hover { text-decoration: none; }
    .fab-more-list a .ui-i { color: #0a5cb8; flex: none; }
    .fab-more-list a.active { background: #0a5cb8; color: #fff; }
    .fab-more-list a.active .ui-i { color: #fff; }
    .fab-more-list .nav-badge { margin-left: auto; }
    .fab-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
    /* The customers you've touched lately (layout/working-strip.cfm), nearest the pill: swipe sideways. */
    .fab-recent { min-height: 52px; margin: 0.6rem -0.8rem -0.2rem; padding: 0 0.8rem; }
    .fab-recent .home-working { margin: 0; gap: 0.4rem; }
    .fab-recent .home-working-k { padding: 0.5rem 0.1rem; }
    .fab-recent .home-working-list { padding-bottom: 0.15rem; overscroll-behavior-x: contain; }
    .fab-recent-none { margin: 0.9rem 0 0; text-align: center; }
    .fab-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 64px; padding: 0.5rem; border-radius: 16px; background: #0a5cb8; color: #fff; font-weight: 650; font-size: 0.9rem; }
    .fab-q.active { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
    .fab-q-home { background: #0a4a96; }
    /* Ask among the places: its purple sparkle. */
    .fab-grid a.fab-ask .ui-i { color: #7b4fd6; }
    .fab-grid a.fab-ask.active { background: linear-gradient(135deg, #7b4fd6, #0a5cb8); }
    .fab-grid a.fab-ask.active .ui-i { color: #fff; }
    .fab-q:hover { text-decoration: none; }
    .fab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
    .fab-grid a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 70px; padding: 0.45rem 0.3rem; border-radius: 14px;
        background: #f1f4f8; color: #1a1a1a; font-size: 0.8rem; font-weight: 600; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
    .fab-grid a:hover { text-decoration: none; }
    .fab-grid a .ui-i { color: #0a5cb8; }
    .fab-grid a.active { background: #0a5cb8; color: #fff; }
    .fab-grid a.active .ui-i { color: #fff; }
    .fab-grid .nav-badge { position: absolute; top: 0.35rem; right: 0.35rem; margin: 0; }
    .fab-foot { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid #edf0f3; }
    .fab-me { position: relative; flex: 1; display: flex; align-items: center; gap: 0.6rem; min-height: 52px; padding: 0.3rem 0.5rem; border-radius: 14px; color: #1a1a1a; }
    .fab-me:hover { text-decoration: none; }
    .fab-me.active { background: #eef3fb; }
    .fab-me span:not(.me-avatar) { display: flex; flex-direction: column; line-height: 1.2; }
    .fab-me small { color: #5f6b78; font-size: 0.78rem; }
    .fab-me .nav-badge { margin-left: auto; }
    .fab-logout { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fbeceb; color: #b3261e; }
    /* The panel's tiles come in quickly from the pill's corner. */
    html.fab-open .fab-stores, html.fab-open .fab-quick, html.fab-open .fab-grid a, html.fab-open .fab-foot, html.fab-open .fab-recent { animation: fab-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(var(--i, 0) * 12ms); }
    @keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
    html.kb-open .fab-bar { display: none; }
    /* The customer's Ask sheet open: it has the bottom of the screen (its own send button lives there). */
    body:has(.cust-ask.is-open) .fab-bar { display: none; }

    /* Where it lives (html[data-fab], lib/Layout.cfc fabPos, dragged there in assets/fab.js): bottom / top,
       left / center / right; bottom right unless moved. */
    html[data-fab^="t"] .fab-bar { top: var(--fab-top); bottom: auto; }
    html[data-fab$="l"] .fab-bar { left: var(--fab-edge); right: auto; }
    html[data-fab$="c"] .fab-bar { left: 0; right: 0; width: max-content; margin: 0 auto; }
    html[data-fab^="t"] .fab-panel { top: calc(var(--fab-top) + var(--fab-h) + 0.6rem); bottom: auto; }
    html[data-fab$="l"] .fab-panel { left: 0.75rem; right: auto; }
    html[data-fab$="c"] .fab-panel { left: calc(50% - min(12rem, 50vw - 0.75rem)); right: auto; }
    html[data-fab^="t"] main { padding-top: calc(var(--fab-h) + 1.4rem); }
    /* The morph grows from the pill's own corner (the panel's edge nearest it). */
    html[data-fab^="t"]::view-transition-old(fab-surface), html[data-fab^="t"]::view-transition-new(fab-surface) { top: 0; bottom: auto; }
    html[data-fab$="l"]::view-transition-old(fab-surface), html[data-fab$="l"]::view-transition-new(fab-surface) { left: 0; right: auto; }
    html[data-fab$="c"]::view-transition-old(fab-surface), html[data-fab$="c"]::view-transition-new(fab-surface) { left: 0; right: 0; margin: 0 auto; }

    /* Moving it: the pill follows the finger and the six spots show; the nearest one lights up. */
    html.fab-dragging .fab-bar { right: auto; bottom: auto; margin: 0; width: auto; transition: none; transform: scale(1.06); box-shadow: 0 12px 30px rgba(10, 60, 120, 0.45); z-index: 9740; cursor: grabbing; }
    html.fab-dragging .fab-btn .nav-badge { display: none; }
    .fab-targets { position: fixed; inset: 0; z-index: 9730; background: rgba(15, 23, 42, 0.18); animation: fab-tg-in 0.15s ease both; }
    @keyframes fab-tg-in { from { opacity: 0; } }
    .fab-target { position: fixed; width: 130px; height: var(--fab-h); box-sizing: border-box; border-radius: 999px; border: 2.5px dashed #0a5cb8; background: rgba(255, 255, 255, 0.75);
        transition: transform 0.12s ease, background 0.12s; }
    .fab-target[data-pos^="b"] { bottom: var(--fab-bottom); }
    .fab-target[data-pos^="t"] { top: var(--fab-top); }
    .fab-target[data-pos$="l"] { left: 1rem; }
    .fab-target[data-pos$="c"] { left: calc(50% - 65px); }
    .fab-target[data-pos$="r"] { right: 1rem; }
    .fab-target.is-here { border-style: solid; border-color: #9aa9bb; }
    .fab-target.is-on { transform: scale(1.12); background: rgba(10, 92, 184, 0.28); border-style: solid; border-color: #0a5cb8; }

    /* The morph (assets/fab.js startViewTransition): the pill's box grows into the panel's and the
       pictures are clipped to it from the pill's corner, not stretched. */
    ::view-transition-group(fab-surface) { animation-duration: 0.24s; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
    ::view-transition-image-pair(fab-surface) { overflow: hidden; border-radius: 24px; }
    ::view-transition-old(fab-surface), ::view-transition-new(fab-surface) { position: absolute; inset: auto 0 0 auto; width: auto; height: auto; object-fit: none; animation-duration: 0.18s; }
    ::view-transition-group(fab-btn) { animation-duration: 0.2s; }
    /* Picked off the panel: the tile's box grows into the page (assets/fab.js + the head script in lib/Layout.cfc). */
    ::view-transition-group(fab-pick) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1); z-index: 2; }
    ::view-transition-image-pair(fab-pick) { overflow: hidden; border-radius: 16px; }
    ::view-transition-old(fab-pick) { animation-duration: 0.12s; }
    ::view-transition-new(fab-pick) { width: 100%; height: auto; object-fit: cover; object-position: top; animation-duration: 0.22s; }
    /* Page to page: a quick cross-fade, the pill staying where it is. */
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
    @media (prefers-reduced-motion: reduce) {
        @view-transition { navigation: none; }
        html.fab-open .fab-stores, html.fab-open .fab-quick, html.fab-open .fab-grid a, html.fab-open .fab-foot, html.fab-open .fab-recent { animation: none; }
    }

    /* A Quote / Next button (desk-forward, slide-forward) and the pill both at the bottom right: the button sits just
       above the pill, the same height and edge. */
    html[data-fab="br"] .desk-forward, html[data-fab="br"] .slide-forward { right: var(--fab-edge); bottom: var(--fab-above); min-height: var(--fab-h); }
}
@media (max-width: 600px) {
    /* The desk's payment bar: beside the pill at the bottom left or right, above it at the bottom center. */
    /* Same height, shape, color and edges as the pill, an even gap between them. */
    .desk-paybar { box-sizing: border-box; height: var(--fab-h); min-height: 0 !important; padding: 0 1.1rem !important; border-radius: 999px !important;
        box-shadow: 0 6px 18px rgba(10, 60, 120, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        left: var(--fab-edge) !important; right: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)) !important; bottom: var(--fab-bottom) !important; }
    html[data-fab="bl"] .desk-paybar { left: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)) !important; right: var(--fab-edge) !important; }
    /* One line beside the pill: each figure unbroken, "Summary" / "Back to the quote" down to the arrow. */
    .desk-paybar { white-space: nowrap; overflow: hidden; gap: 0.5rem !important; }
    .desk-paybar > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .desk-paybar > :first-child, .desk-paybar .desk-paybar-go { flex: none; }
    .desk-paybar > :first-child + * { font-size: 0.85rem; }
    .desk-paybar .desk-paybar-go { margin-left: auto; }
    .desk-paybar .pb-more, .desk-paybar .pb-back { font-size: 0; }
    /* The way into the summary: a chevron in a light circle at the bar's end (the whole bar is the button). */
    .desk-paybar .pb-more::after, .desk-paybar .pb-back::after { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 34px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.22) center / 18px no-repeat; }
    .desk-paybar .pb-more::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
    .desk-paybar .pb-back::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
    .desk-paybar { padding-right: 0.55rem !important; }
    html[data-fab^="t"] .desk-paybar { right: var(--fab-edge) !important; }
    html[data-fab="bc"] .desk-paybar { right: var(--fab-edge) !important; bottom: var(--fab-above) !important; }
    html.desk-sumsheet .desk .desk-pane:not(.open) { bottom: calc(var(--fab-bottom) + var(--fab-h) + 0.6rem) !important; }
    html[data-fab="bc"].desk-sumsheet .desk .desk-pane:not(.open) { bottom: calc(var(--fab-above) + var(--fab-h) + 0.6rem) !important; }
}

/* ---------------------------------------------------------------- style guide (style-guide.cfm) */
.sg-toc { position: sticky; top: 0; background: #fff; padding: 0.4rem 0; z-index: 5; }
.sg-section { border-top: 1px solid #e6e6e6; padding: 0.6rem 0 1.2rem; scroll-margin-top: 3rem; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.sg-swatch { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.sg-swatch span { height: 2.6rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); }
.sg-pane-demo { max-width: 560px; border: 1px solid #e3e7ec; border-radius: 12px; padding: 0.4rem 0.9rem; }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; }
.sg-icons div { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem; border: 1px solid #eef0f3; border-radius: 10px; color: #0a5cb8; }
.sg-icons code { font-size: 0.72rem; color: #444; }
.sg-idea { border: 1.5px dashed #b9c3d0; border-radius: 12px; padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; }
.sg-idea h3 { margin-top: 0.2rem; }
.sg-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-strip a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; border-radius: 999px; color: #1a1a1a; font-weight: 600; font-size: 0.9rem; min-height: 40px; }

/* ---------------------------------------------------------------- settings: background tasks */
.task-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.task-card { display: flex; gap: 1rem; align-items: center; border: 1px solid #e3e7ec; border-radius: 12px; padding: 0.8rem 1rem; background: #fff; }
.task-card.off { background: #fafafa; }
.task-card.off .task-name, .task-card.off .task-does { color: #5f6368; }
.task-main { flex: 1; min-width: 0; }
.task-name { font-weight: 600; }
.task-trigger { color: #0a5cb8; font-size: 0.85rem; margin: 0.1rem 0 0.3rem; }
.task-does { font-size: 0.9rem; margin-bottom: 0.25rem; }
.task-toggle { margin: 0; }
.task-always { white-space: nowrap; }
.switch { position: relative; width: 52px; height: 32px; border-radius: 999px; border: none; background: #c7ccd3; cursor: pointer; flex: none; transition: background 0.15s; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.15s; }
.switch.is-on { background: #2f9e5a; }
.switch.is-on .knob { left: 23px; }

/* ---------------------------------------------------------------- JSON viewer (assets/json-viewer.js) */
.jv-root { font-family: Consolas, "Courier New", monospace; font-size: 0.82rem; background: #f7f7f7; padding: 0.6rem; border-radius: 6px; margin-top: 0.4rem; max-width: 100%; overflow-x: auto; }
.jv-root details { margin-left: 1rem; }
.jv-root summary { color: #555; }
.jv-key { color: #a1264e; font-weight: 600; }
.jv-str { color: #0a7a2f; }
.jv-num { color: #0a5cb8; }
.jv-bool, .jv-null { color: #a15c00; }
.jv-row { margin-left: 1rem; }
.jv-toolbar { margin: 0.4rem 0; display: flex; gap: 0.4rem; }
.jv-toolbar button { font-size: 0.78rem; padding: 0.2rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.jv-toolbar button:hover { background: #f3f3f3; }

/* ---------------------------------------------------------------- customer profile: POS-style tiles + pane (customer.cfm) */
/* Pastel tiles modelled on Shopify POS: icon top-left, label bottom-left,
   count badge top-right; the selected tile's detail sits in a pane on the
   right. Below 820px the pane becomes a full-screen slide-over. */
.pos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 0.8rem; }
.pos-crumb { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.88rem; color: #555; padding: 0.35rem 0; min-height: 44px; }
.pos-customer { display: flex; gap: 0.9rem; align-items: flex-start; margin: 0.2rem 0 1rem; }
.pos-customer h1 { margin: 0; font-size: 1.55rem; }
.pos-customer-main { min-width: 0; }
.pos-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.avatar { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #0a5cb8; color: #fff; font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 6.6rem; padding: 0.85rem 0.95rem; border-radius: 14px; color: #1a1a1a; font-weight: 600; font-size: 1.02rem; line-height: 1.25; transition: transform 0.08s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; }
.tile:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20, 40, 80, 0.12); }
.tile:active { transform: scale(0.98); }
.tile.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a5cb8; }
.tile-icon { color: #0a5cb8; }
.tile-badge { position: absolute; top: 0.6rem; right: 0.6rem; min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: #1a1a1a; font-size: 0.8rem; font-weight: 600; text-align: center; }
.tile-label { margin-top: 1.2rem; }
.tone-slate { background: #e8edf3; } .tone-slate .tile-icon { color: #3d5270; }
.tone-blue { background: #d6e4f7; }
.tone-green { background: #d3ece2; } .tone-green .tile-icon { color: #2f6f4f; }
.tone-amber { background: #fbe9cc; } .tone-amber .tile-icon { color: #9a5b00; }
.tone-purple { background: #e6ddf7; } .tone-purple .tile-icon { color: #5b3aa8; }
.tone-rose { background: #f7dfe4; } .tone-rose .tile-icon { color: #a3324a; }
.tone-soon { background: #fff; border: 1.5px dashed #b9c3d0; color: #5b6573; font-weight: 500; }
.tone-soon .tile-icon { color: #8a95a3; }
.tiles .tile-label .tile-hint { display: block; margin-top: 0.15rem; }
/* "Beta" marker: on a tile (top-right, where a count would sit) and next to a pane title. */
.beta-pill { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; background: #fff4e5; color: #a15c00; border: 1px solid #f2d3a6; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: middle; }
/* "AI" marker: content kept by the AI (Sales Stage / Sales Plan). */
.ai-chip { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.02rem 0.4rem; border-radius: 999px; background: #5b3aa8; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px; }
.ai-chip .ui-i { stroke-width: 2.2; }
.tile-badge.beta-pill { background: #fff4e5; color: #a15c00; font-size: 0.68rem; }
/* A beta tile that also has a count: both, side by side. */
.tile-badges { position: absolute; top: 0.6rem; right: 0.6rem; display: flex; align-items: center; gap: 0.3rem; }
.tile-badges .tile-badge { position: static; }

/* Sales stage pane (layout/sales-stage.cfm), touch-first. */
.sales-stage { position: relative; }
/* Working: an indeterminate bar along the top of the pane while any request
   (AI refresh, save, stage tap) is in flight, plus a spinner on the AI line. */
.ss-progress { display: none; position: sticky; top: 0; height: 4px; margin: -0.2rem 0 0.6rem; border-radius: 2px; background: #e6ddf7; overflow: hidden; z-index: 2; }
.ss-progress.htmx-request { display: block; }
.ss-progress span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, #ff5f8f, #ffb347, #4fd18b, #3fa7ff, #a35bff); animation: ss-slide 1.1s ease-in-out infinite; }
@keyframes ss-slide { from { left: -40%; } to { left: 100%; } }
/* The AI "thinking" look: a rainbow border that spins around the box while
   the AI works (the load-triggered update, or the whole pane on Refresh now).
   Browsers without @property show the rainbow border without the spin. */
@property --ss-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ss-rotate { to { --ss-angle: 360deg; } }
.ss-updating, .sales-stage.htmx-request { border: 2px solid transparent; background: linear-gradient(#f7f4fd, #f7f4fd) padding-box, conic-gradient(from var(--ss-angle), #ff5f8f, #ffb347, #4fd18b, #3fa7ff, #a35bff, #ff5f8f) border-box; animation: ss-rotate 2.4s linear infinite; }
.ss-updating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: 12px; color: #44356e; font-size: 0.92rem; }
.ss-pending { margin: 0.2rem 0 0.8rem; padding: 0.45rem 0.75rem; border-radius: 10px; background: #f7f4fd; color: #44356e; line-height: 1.4; }
.ss-pending-dot { display: inline-block; width: 7px; height: 7px; margin-right: 0.35rem; border-radius: 50%; background: #a35bff; vertical-align: middle; }
.sales-stage.htmx-request { border-radius: 14px; padding: 0.6rem; margin: -0.6rem; }
.ss-spinner { width: 1rem; height: 1rem; border: 2px solid #d2c5ef; border-top-color: #5b3aa8; border-radius: 50%; animation: ss-spin 0.8s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-progress span, .ss-spinner, .ss-updating, .sales-stage.htmx-request { animation-duration: 6s; } }
.ss-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ss-stage { padding: 0.35rem 0.9rem; border-radius: 999px; background: #5b3aa8; color: #fff; font-weight: 700; font-size: 1.05rem; }
.ss-stage-sold { background: #0a7a2f; } .ss-stage-hold { background: #6b7480; } .ss-stage-lost { background: #8a3a4a; }
.ss-temp { padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: #eef2f7; color: #44536a; }
.ss-temp-hot { background: #fdecea; color: #b3261e; } .ss-temp-warm { background: #fff4e5; color: #a15c00; } .ss-temp-cold { background: #e3eefb; color: #0a5cb8; }
.ss-goal { margin: 0.5rem 0 0.7rem; }
.ss-stepper { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.ss-pill { min-height: 40px; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid #c9d0d8; background: #fff; color: #333; font: inherit; font-size: 0.9rem; }
.ss-pill.done { background: #ece6f8; border-color: #d2c5ef; color: #5b3aa8; }
.ss-pill.active { background: #5b3aa8; border-color: #5b3aa8; color: #fff; font-weight: 600; }
.ss-label { color: #5f6368; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: 0.9rem 0 0.3rem; }
.ss-summary { margin: 0; font-size: 1rem; line-height: 1.45; }
.ss-steps { display: flex; flex-direction: column; gap: 0.4rem; }
.ss-step { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.1rem 0.6rem; align-items: center; min-height: 48px; padding: 0.5rem 0.7rem; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: left; }
.ss-check { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: 2px solid #b9c3d0; border-radius: 6px; color: #fff; font-weight: 700; }
.ss-step-text { font-size: 0.98rem; }
.ss-step-meta { color: #5f6368; font-size: 0.8rem; }
.ss-step.is-done .ss-check { background: #0a7a2f; border-color: #0a7a2f; }
.ss-step.is-done .ss-step-text { text-decoration: line-through; color: #777; }
.ss-blockers { margin: 0.2rem 0 0 1.1rem; padding: 0; }
.ss-facts { display: grid; grid-template-columns: 8rem 1fr; gap: 0.3rem 0.8rem; margin: 0.2rem 0; }
.ss-facts dt { color: #5f6368; } .ss-facts dd { margin: 0; }
.ss-why { margin-top: 0.6rem; }
/* Follow-up countdown (whose move it is, when the next follow-up is due). */
.ss-fu { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.3rem 0 0.7rem; padding: 0.65rem 0.8rem; border: 1px solid #d6e4f7; border-radius: 12px; background: #f2f7fd; }
.ss-fu.due { border-color: #f3c3bd; background: #fdf3f2; }
.ss-fu.us { border-color: #f3c3bd; background: #fdf3f2; }
.ss-fu-line { display: flex; align-items: center; gap: 0.4rem; }
.ss-fu-line .ui-i { flex: none; color: #0a5cb8; }
.ss-fu.due .ss-fu-line .ui-i, .ss-fu.us .ss-fu-line .ui-i { color: #b3261e; }
.ss-fu-when { font-size: 0.95rem; }
.ss-fu.due .ss-fu-when strong { color: #b3261e; }
.ss-fu-bar { height: 6px; border-radius: 3px; background: #dfe7f2; overflow: hidden; }
.ss-fu-bar span { display: block; height: 100%; border-radius: 3px; background: #0a5cb8; }
.ss-fu.due .ss-fu-bar span { background: #d93025; }
.ss-fu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.ss-fu-actions .ss-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.pipe-flag-followup { background: #fdecea; color: #b3261e; }
.ss-deal { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0.4rem; padding: 0.65rem 0.8rem; border: 1px solid #bfe0cb; border-radius: 12px; background: #eef8f2; color: inherit; }
.ss-deal:hover { text-decoration: none; }
.ss-deal-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ss-deal-state { flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: #fff4e5; color: #a15c00; }
.ss-deal-state.ss-deal-posted { background: #0a7a2f; color: #fff; }
/* Ask about this sale. While the AI answers, the form gets the rainbow border. */
.ss-ask { margin: 0.2rem 0 0.6rem; border-radius: 12px; }
.ss-ask.htmx-request { padding: 0.5rem; border: 2px solid transparent; background: linear-gradient(#f7f4fd, #f7f4fd) padding-box, conic-gradient(from var(--ss-angle), #ff5f8f, #ffb347, #4fd18b, #3fa7ff, #a35bff, #ff5f8f) border-box; animation: ss-rotate 2.4s linear infinite; }
.ss-ask-row { display: flex; gap: 0.5rem; }
.ss-ask-row input { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; padding: 0.4rem 0.65rem; border: 1px solid #c9d0d8; border-radius: 10px; }
.ss-ask-row .ss-btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.ss-ask-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.ss-chip { min-height: 36px; padding: 0.2rem 0.75rem; border-radius: 999px; border: 1px solid #d2c5ef; background: #f7f4fd; color: #5b3aa8; font: inherit; font-size: 0.85rem; }
.ss-ask-working { display: none; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; color: #44356e; }
.ss-ask.htmx-request .ss-ask-working { display: flex; }
.ss-qas { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.ss-qa { padding: 0.6rem 0.75rem; border: 1px solid #e3e7ec; border-left: 3px solid #a35bff; border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 0.3rem; }
.ss-qa-q { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; }
.ss-qa-x { border: none; background: none; color: #5f6368; font-size: 1.2rem; line-height: 1; min-width: 32px; min-height: 32px; }
.ss-conf { display: inline-block; padding: 0.02rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #eef2f7; color: #44536a; }
.ss-conf-stated { background: #e6f4ea; color: #0a7a2f; } .ss-conf-implied { background: #fff4e5; color: #a15c00; }
.ss-qa-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* Customer > Messages: the sales plan in brief, and AI reply drafts. */
/* Collapsed to one line (a <details>); tap for the goal, next step and a link to the full plan. */
.msg-plan { flex: none; margin: 0 0 0.5rem; padding: 0.4rem 0.7rem; border: 1px solid #d2c5ef; border-radius: 12px; background: #f7f4fd; color: inherit; }
.msg-plan > summary { list-style: none; cursor: pointer; }
.msg-plan > summary::-webkit-details-marker { display: none; }
.msg-plan[open] { display: flex; flex-direction: column; gap: 0.25rem; }
.msg-plan[open] > summary { margin-bottom: 0.15rem; }
.msg-plan-caret { color: #5b3aa8; font-size: 0.9rem; transition: transform 0.15s; }
.msg-plan[open] .msg-plan-caret { transform: rotate(180deg); }
.msg-plan-open { align-self: flex-start; font-weight: 600; color: #5b3aa8; }
.msg-plan-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; min-width: 0; }
.msg-plan-head > * { flex: none; }
.msg-plan-head .ss-stage { font-size: 0.85rem; padding: 0.15rem 0.6rem; }
.msg-plan-head .ss-temp { font-size: 0.8rem; padding: 0.1rem 0.5rem; }
.msg-plan-title { font-weight: 600; color: #5b3aa8; margin-left: auto; }
.msg-plan-goal, .msg-plan-next { color: #333; }
.msg-send-group { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.suggest-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid #d2c5ef; background: #f7f4fd; color: #5b3aa8; font: inherit; font-size: 0.92rem; font-weight: 600; }
.reply-sheet { width: min(640px, calc(100vw - 2rem)); max-height: min(80vh, 760px); overflow: auto; padding: 0; border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(20, 30, 60, 0.3); background: #fff; color: inherit; }
.reply-sheet::backdrop { background: rgba(15, 20, 35, 0.45); }
.sheet-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid #e3e7ec; background: #fff; }
.sheet-head h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.45rem; }
.sheet-close { min-width: 44px; min-height: 44px; border: none; background: none; font-size: 1.6rem; line-height: 1; color: #5f6368; }
.sheet-body { padding: 0.8rem 1rem 1.1rem; overflow: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.sheet-plan { color: #44356e; }
.sheet-reply { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 0.85rem; border: 1px solid #e3e7ec; border-radius: 12px; }
.sheet-reply-label { font-weight: 700; color: #5b3aa8; font-size: 0.9rem; }
.sheet-reply-text { white-space: pre-wrap; font-size: 1rem; line-height: 1.45; }
.sheet-reply .ss-btn { align-self: flex-start; }
@media (max-width: 640px) {
    .reply-sheet { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}
.ss-cars { display: flex; flex-direction: column; gap: 0.5rem; }
.ss-car { padding: 0.65rem 0.8rem; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; }
.ss-car-title { font-weight: 600; }
.ss-payoff { margin: 0.35rem 0 0.15rem; }
.ss-car .pane-links { margin: 0.5rem 0 0; }
.ss-ai-state { font-size: 0.9rem; color: #5f6368; }
.ss-ai-state.on { color: #0a7a2f; font-weight: 600; }
.ss-btn { min-height: 44px; padding: 0.4rem 0.95rem; border-radius: 10px; border: 1px solid #c9d0d8; background: #fff; color: #0a5cb8; font: inherit; font-size: 0.95rem; }
.ss-btn.primary { background: #0a5cb8; border-color: #0a5cb8; color: #fff; font-weight: 600; }
.ss-close-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.ss-close-form select, .ss-close-form input { min-height: 44px; font: inherit; font-size: 16px; padding: 0.3rem 0.6rem; border: 1px solid #c9d0d8; border-radius: 8px; }
.ss-history { margin-top: 0.8rem; }
.ss-note { margin-top: 1rem; }
.ss-edit legend { font-size: 0.85rem; color: #444; padding: 0 0.3rem; }
.ss-edit textarea { width: 100%; box-sizing: border-box; font-size: 16px; padding: 0.55rem 0.65rem; border: 1px solid #c9d0d8; border-radius: 8px; }
.ss-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ss-edit .ss-choice { flex-direction: row; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.75rem; border: 1px solid #c9d0d8; border-radius: 999px; background: #fff; font-size: 0.9rem; color: #333; }
.ss-step-edit { display: grid; grid-template-columns: 1fr 8.5rem 9.5rem; gap: 0.4rem; }
.ss-fact-edit { display: grid; grid-template-columns: 9rem 1fr; gap: 0.4rem; }
.ss-step-edit select, .ss-step-edit input[type=date] { min-height: 44px; font: inherit; font-size: 16px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0 0.4rem; background: #fff; }
.ss-actions { display: flex; gap: 0.5rem; }
@media (max-width: 640px) {
    .ss-step-edit { grid-template-columns: 1fr 1fr; }
    .ss-step-edit input[type=text] { grid-column: 1 / -1; }
}
.pos-pane { position: sticky; top: 0.6rem; background: #fafbfc; border: 1px solid #e3e7ec; border-radius: 16px; padding: 1rem 1.1rem 1.2rem; max-height: calc(100vh - 1.2rem); overflow: auto; }
.pane-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.pane-head h2 { margin: 0; font-size: 1.3rem; }
.pane-back { display: none; align-items: center; gap: 0.2rem; min-height: 44px; padding: 0 0.6rem 0 0.2rem; border: none; background: none; color: #0a5cb8; font: inherit; font-size: 1rem; }
.pane-dl { grid-template-columns: 8.5rem 1fr; gap: 0.55rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.pane-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.pill-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: #e8f0fb; min-height: 36px; font-size: 0.9rem; }
.items { display: flex; flex-direction: column; }
.item { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid #e8ebef; color: inherit; }
.item:last-child { border-bottom: none; }
a.item-link:hover { text-decoration: none; background: #f2f6fb; }
.item-thumb { flex: none; width: 3rem; height: 3rem; border-radius: 10px; display: grid; place-items: center; color: #0a5cb8; }
.item-main { flex: 1; min-width: 0; }
.item-title { font-weight: 600; font-size: 1rem; }
.item-title code { font-size: 0.85rem; margin-left: 0.3rem; }
.item-sub { color: #666; font-size: 0.86rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
.item-tags { margin-top: 0.3rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.item-value { text-align: right; font-size: 0.95rem; flex: none; max-width: 40%; }
p.small, .small { font-size: 0.8rem; }
.edit-form { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.edit-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #444; margin: 0; }
.edit-form input[type=text], .edit-form input[type=email], .edit-form input[type=tel] { font: inherit; font-size: 16px; padding: 0.55rem 0.65rem; border: 1px solid #c9d0d8; border-radius: 8px; min-height: 44px; box-sizing: border-box; width: 100%; }
.edit-form fieldset { border: 1px solid #e3e7ec; border-radius: 10px; padding: 0.5rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.edit-row { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 0.5rem; }
.edit-form .confirm { flex-direction: row; align-items: center; gap: 0.5rem; font-size: 0.9rem; min-height: 44px; }
.primary-btn { align-self: flex-start; min-height: 44px; padding: 0.55rem 1.2rem; border: none; border-radius: 10px; background: #0a5cb8; color: #fff; font: inherit; font-weight: 600; }
.write-result { border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; font-size: 0.9rem; }
.ok-box { background: #e6f4ea; color: #0a5c24; }
.bad-box { background: #fdecea; color: #8c1d18; }
.sync-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; font-size: 0.8rem; color: #666; margin-top: 0.25rem; }
.link-btn { border: none; background: none; padding: 0.2rem 0.3rem; color: #0a5cb8; font: inherit; cursor: pointer; min-height: 32px; }
.link-btn:disabled { opacity: 0.5; }
/* Owned vehicles: End ownership / Previously owned */
.end-own { margin-top: 0.2rem; }
.end-own > summary { display: inline-flex; align-items: center; list-style: none; padding-left: 0; font-size: 0.8rem; }
.end-own > summary::-webkit-details-marker { display: none; }
.end-own-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.end-own-form select, .end-own-form input[type=text] { font: inherit; font-size: 16px; padding: 0.4rem 0.5rem; border: 1px solid #c9d0d8; border-radius: 8px; min-height: 40px; box-sizing: border-box; }
.end-own-form input[type=text] { flex: 1 1 10rem; min-width: 0; }
.end-own-form button { min-height: 40px; padding: 0.35rem 0.9rem; border: 1px solid #8c1d18; color: #8c1d18; background: #fff; border-radius: 8px; font: inherit; }
.prev-owned { margin: 0.8rem 0; border-top: 1px solid #e8ebef; padding-top: 0.5rem; }
.prev-owned > summary { cursor: pointer; font-weight: 600; color: #3d5270; min-height: 36px; display: flex; align-items: center; }
.vin-desk { margin: 0.6rem 0 0.9rem; }
.vin-desk-head { font-weight: 600; font-size: 0.92rem; color: #3d5270; margin-bottom: 0.2rem; }
.desk-vin-said { margin: 1rem 0; }
.desk-vin-said table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.desk-vin-said th, .desk-vin-said td { padding: 0.3rem 0.4rem; border-bottom: 1px solid #e8ebef; text-align: right; }
.desk-vin-said th:first-child { text-align: left; font-weight: 500; }
.desk-vin-said thead th { font-size: 0.8rem; color: #6b7686; font-weight: 600; }
.desk-vin-said tr.desk-vin-diff td, .desk-vin-said tr.desk-vin-diff th { background: #fff6e0; }
.item.is-ended .item-title { color: #666; }
.lookup-box { border: 1px dashed #b9c3d0; border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0.5rem 0 1rem; }
.lookup-box p { margin: 0 0 0.4rem; }
.cdk-btn { margin: 0.2rem 0 0.8rem; min-height: 40px; padding: 0.35rem 0.9rem; border: 1px solid #3d5270; color: #3d5270; background: #fff; border-radius: 8px; }
a.card-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid #0a5cb8; border-radius: 6px; }
.lookup-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.35rem 0; border-top: 1px solid #eee; }
.lookup-row .card-btn { min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid #0a5cb8; color: #0a5cb8; background: #fff; border-radius: 6px; }
@media (min-width: 1000px) {
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .pos { grid-template-columns: 1fr; }
    .pos-pane { display: none; }
    .pos-pane.open { display: block; position: fixed; inset: 0; z-index: 10001; max-height: none; border: none; border-radius: 0; padding: 0.6rem 1rem 2rem; background: #fff; overflow: auto; -webkit-overflow-scrolling: touch; }
    .pane-back { display: inline-flex; }
    .pane-head { position: sticky; top: -0.6rem; background: #fff; padding: 0.4rem 0; z-index: 1; }
    .pos-customer h1 { font-size: 1.3rem; }
    .tile { min-height: 5.8rem; font-size: 0.98rem; }
}

/* ================================================================ phones
 * List tables marked class="stack" become one card per row: the header row
 * turns into a wrap of sort chips and each cell shows its data-label.
 * Other tables scroll sideways instead of widening the page. */
@media (max-width: 700px) {
    body { padding: 0 0.75rem; }
    h1 { font-size: 1.2rem; }
    h1 a { display: inline-block; margin: 0.15rem 0.7rem 0 0; font-size: 0.85rem; }
    h2 { font-size: 1rem; }
    .topnav { gap: 0.3rem 0.8rem; }
    .topnav .links a { font-size: 0.85rem; }

    td, dd, .comments, .msg { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; word-break: break-word; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar input[type=text], .toolbar select { width: 100%; box-sizing: border-box; font-size: 16px; }
    .stats { flex-wrap: wrap; gap: 0.8rem 1.2rem; }
    .providers { gap: 0.3rem; }
    dl, .detail dl { grid-template-columns: minmax(5.5rem, 32%) 1fr; gap: 0.25rem 0.6rem; }

    table:not(.stack) { display: block; overflow-x: auto; }
    table.stack, table.stack tbody { display: block; width: 100%; }
    table.stack tr { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px solid #e3e3e3; }
    table.stack tr.head { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.3rem 0.4rem; padding: 0 0 0.5rem; }
    table.stack tr.head th { padding: 0.2rem 0.55rem; border: 1px solid #ddd; border-radius: 999px; font-size: 0.78rem; }
    table.stack td { display: block; border: none; padding: 0.12rem 0; }
    table.stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 6rem; color: #5f6368; font-size: 0.78rem; }
    table.stack td.primary { order: -1; font-weight: 600; font-size: 0.95rem; }
    table.stack td.primary::before { display: none; }
    table.stack tr:hover td { background: none; }
    table.stack tr.detail-row { display: none; padding: 0; border: none; }
    table.stack tr.detail-row.open { display: block; }
    table.stack tr.detail-row > td { padding: 0.5rem 0; }

    .jv-root { max-width: 100%; }
    .pager { flex-wrap: wrap; }
    .lead-card { padding: 0.7rem 0.75rem; }
    .lead-card dl { grid-template-columns: 6.5rem 1fr; }
    .pin-top { flex-wrap: wrap; }
    .pin-facts { grid-template-columns: 7rem 1fr; }
}

/* ---------------------------------------------------------------- settings > activity */
.activity-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1rem; }
.activity-stat { display: flex; flex-direction: column; gap: 0.15rem; border: 1px solid #e3e7ec; border-radius: 10px; padding: 0.55rem 0.75rem; color: inherit; }
.activity-stat:hover { text-decoration: none; border-color: #0a5cb8; }
.activity-stat.active { border-color: #0a5cb8; background: #f2f6fb; }
.activity-filters input[type=search] { flex: 1 1 12rem; min-width: 0; font: inherit; padding: 0.4rem 0.5rem; }
.activity-filters .inline-check { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.activity-table td.nowrap { white-space: nowrap; }
.activity-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.activity-endpoint code { font-size: 0.78rem; overflow-wrap: anywhere; }
.activity-table tr.is-error td { background: #fff7f6; }
.capture-box { border: 1px solid #e3e7ec; border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0 0 1rem; }
.capture-box > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.capture-list { display: flex; flex-direction: column; gap: 0.3rem; }
.capture-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.25rem 0; }
code.wrap { overflow-wrap: anywhere; white-space: normal; }

/* Customer > Service: CDK repair orders per vehicle */
.ro-vehicle { margin: 1rem 0 0.4rem; font-size: 1rem; }
.ro-list { display: flex; flex-direction: column; gap: 0.35rem; }
.ro { border: 1px solid #dde3ea; border-radius: 8px; background: #fff; }
.ro-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; align-items: baseline; }
.ro-row::after { content: "\203A"; grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: #a0a8b0; }
.ro-row:active { background: #f1f4f7; }
.ro-date { font-weight: 600; white-space: nowrap; }
.ro-meta { color: #5c6670; font-size: 0.85rem; text-align: right; }
.ro-headline { grid-column: 1 / 3; font-size: 0.85rem; color: #3a434c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: lowercase; }
.ro-headline::first-letter { text-transform: uppercase; }
.ro-lines { margin: 0; padding: 0 0.7rem 0 2rem; font-size: 0.85rem; list-style: none; }
.ro-lines li { padding: 0.3rem 0; border-top: 1px solid #eef1f4; text-transform: lowercase; }
.ro-lines li::first-letter { text-transform: uppercase; }
.ro-lines .pill, .ro-lines .muted { text-transform: none; }
.ro-line-code { display: inline-block; width: 1.2rem; margin-left: -1.4rem; color: #8a939c; text-transform: uppercase; }
.ro.is-upcoming { border-color: #9cc9a8; }

/* Push view: detail slides in from the right over the pane, iPhone-style */
.pos-pane.pushed { overflow: hidden; }
.push-view { position: absolute; left: 0; right: 0; height: 100%; min-height: 100%; background: inherit; padding: inherit; box-sizing: border-box; overflow: auto; transform: translateX(100%); transition: transform 0.28s ease; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); z-index: 5; -webkit-overflow-scrolling: touch; }
.push-view.in { transform: translateX(0); }
.push-back { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 44px; padding: 0 0.6rem 0 0.2rem; border: none; background: none; color: #0a5cb8; font: inherit; font-size: 1rem; cursor: pointer; }
.push-view .ro-lines { padding: 0 0 0 1.6rem; }
@media (prefers-reduced-motion: reduce) { .push-view { transition: none; } }
@media (max-width: 820px) { .push-head { top: -0.6rem; } }
.ro-declined li { text-transform: none; }
.ro-declined li::first-letter { text-transform: none; }

/* Customer > Household */
.link-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 0.5rem 0.7rem; border: 1px solid #c9d0d8; border-radius: 8px; min-height: 44px; }
.link-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.link-candidate .item-main { flex: 1 1 12rem; min-width: 0; }
.link-candidate select, .link-candidate button { font: inherit; min-height: 40px; padding: 0.35rem 0.6rem; border: 1px solid #c9d0d8; border-radius: 8px; background: #fff; }
.link-candidate button { border-color: #0a5cb8; color: #0a5cb8; }
.link-ext { margin-top: 0.6rem; }
.link-ext-head { margin: 0.8rem 0 0.3rem; font-size: 0.95rem; }
.link-add-new { margin-top: 0.6rem; }
.link-add-new > summary { cursor: pointer; list-style: none; }
.link-new-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.link-new-form input, .link-new-form select, .link-new-form button { font: inherit; font-size: 16px; min-height: 40px; padding: 0.35rem 0.6rem; border: 1px solid #c9d0d8; border-radius: 8px; background: #fff; flex: 1 1 10rem; min-width: 0; }
.link-new-form button { border-color: #0a5cb8; color: #0a5cb8; flex: 0 0 auto; }
.link-new-form p { flex-basis: 100%; margin: 0; }
.household-note { margin: 0 0 0.8rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: #eef5ff; color: #1d3b63; }

/* ---------------------------------------------------------------- customers list (POS rows, iPad-first) */
.sort-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.sort-chips a { text-decoration: none; }
.sort-chips .pill, .providers .pill { padding: 0.45rem 0.8rem; font-size: 0.85rem; min-height: 36px; display: inline-flex; align-items: center; box-sizing: border-box; }
.sort-chips .active-chip { background: #0a5cb8; color: #fff; }
.cust-list { background: #fff; border: 1px solid #e3e7ec; border-radius: 12px; padding: 0 0.9rem; }
.cust-row { align-items: center; min-height: 64px; text-decoration: none; }
.cust-row:hover { text-decoration: none; }
.cust-row .item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.cust-row .item-sub.why { color: #202223; }
.cust-row .item-sub.change { color: #8a6116; font-size: 0.8rem; }
.cust-row .item-value { min-width: 5.5rem; }
.avatar.sm { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }
/* Customer timeline pane */
.timeline-day { margin: 0.9rem 0 0.2rem; font-size: 0.8rem; font-weight: 650; color: #5f6368; text-transform: uppercase; letter-spacing: 0.03em; }
.timeline .item { padding: 0.55rem 0; }
.timeline .item-thumb { width: 2.4rem; height: 2.4rem; border-radius: 8px; }
.timeline .is-housekeeping .item-title { font-weight: 500; color: #5f6368; }
.timeline .item-value { font-size: 0.8rem; color: #5f6368; }
.timeline-toggle { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.timeline-toggle a { text-decoration: none; }
.crm-link-form input[type=text] { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: 0.8rem; padding: 0.5rem; min-height: 44px; }
/* ADF leads: tap a row to open its detail beneath it */
.lead-item { cursor: pointer; align-items: center; min-height: 64px; }
.lead-item .item-value code { font-size: 0.72rem; }
.lead-detail { display: none; background: #f7f9fc; border-radius: 10px; padding: 0.8rem 1rem; margin: 0 0 0.6rem; }
.lead-detail.open { display: block; }
.conv-slot { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* Inventory: photo rows + vehicle pane */
.inv-thumb { flex: none; width: 5.6rem; height: 4.2rem; border-radius: 10px; object-fit: cover; background: #e8edf3; }
/* No photo: a same-size box with an X through it (inventory.cfm noPhoto). */
.inv-nophoto { position: relative; display: grid; place-items: center; overflow: hidden; background: #eef1f5; border: 1px solid #d5dbe2; box-sizing: border-box; color: #5b6878; }
.inv-nophoto svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #c3cbd4; stroke-width: 1.2; }
.inv-nophoto span { position: relative; padding: 0.1rem 0.35rem; border-radius: 4px; background: #eef1f5; font-size: 0.85rem; font-weight: 600; text-align: center; line-height: 1.15; }
.inv-thumb.inv-nophoto span { font-size: 0.6rem; padding: 0.05rem 0.2rem; }
/* Same box as a real photo: the feed's photos are 4:3, full width, capped like .inv-photo (18rem; 26rem in the slide-over). */
.inv-photo.inv-nophoto { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 18rem; border-radius: 12px; margin-bottom: 0.7rem; }
.ro-notes { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }
.ro-notes li { margin-bottom: 0.35rem; white-space: pre-line; }
.inv-row { padding: 0.65rem 0.4rem; align-items: center; min-height: 44px; }
.inv-row.active { background: #e8f0fb; }
.inv-row-price { font-weight: 700; font-size: 1.05rem; }
.inv-vin-tail { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; }
.chip-gap { display: inline-block; width: 0.6rem; }
.pane-empty { text-align: center; padding: 2rem 1rem; }
.inv-photo { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 12px; background: #e8edf3; margin-bottom: 0.7rem; }
.inv-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.7rem; }
.inv-price { font-size: 1.5rem; font-weight: 700; margin-right: 0.4rem; }
.inv-vin { font-size: 0.95rem; letter-spacing: 0.04em; user-select: all; }
.inv-h { font-size: 1rem; margin: 1.1rem 0 0.3rem; color: #3d5270; }
.inv-tags { margin-bottom: 0.6rem; }
.inv-raw { margin-top: 1.2rem; border-top: 1px solid #e8ebef; padding-top: 0.5rem; }
.inv-raw > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; color: #3d5270; font-weight: 600; }
@media (max-width: 820px) {
    .inv-thumb { width: 4.6rem; height: 3.5rem; }
}

/* Desking (desk.cfm): quote form on the left, live summary on the right */
.desk-head h1 { margin: 0.2rem 0 0.2rem; font-size: 1.45rem; }
.desk-head { position: relative; }
.desk-head-settings { display: inline-block; margin: 0.15rem 0 0.2rem; font-size: 0.85rem; }
.desk-head-tools { display: flex; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0.1rem -0.5rem; }
.desk-head-tools .desk-head-settings { margin: 0; }
/* Lease details' "More options" (security deposits, single pay while not in use). */
.desk-moreopts { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 0.9rem; border: 0; border-top: 1px solid #e3e7ec; background: none; color: #5b6676; font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; }
.desk-moreopts[aria-expanded="true"] span { color: #0b62c4; }
/* Lease auto bump icon on the Money factor line (desk.cfm fieldHtml), dealer view only. */
.desk-bump { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 0.3rem; padding: 0; border: none; border-radius: 6px; background: none; color: #a7afba; vertical-align: middle; cursor: pointer; }
.desk-bump.on { color: #7c3aed; }
/* Customer view: just the arrow, no tip (still tappable). */
html:not(.desk-custview) .desk-bump:hover { background: #f3edfe; }
html:not(.desk-custview) .desk-bump[data-tip]:hover::after, html:not(.desk-custview) .desk-bump[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: 0.45rem 0.6rem; border-radius: 8px;
    background: #1f2a37; color: #fff; font-size: 0.78rem; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.desk-cpo { border: 1px solid #d5dbe3; background: #fff; color: #3d4652; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.desk-cpo.on { border-color: #1e7e34; background: #e6f4ea; color: #1e7e34; }
/* Customer view (the handshake; assets/desk-pad.js deskCustomer): dealer-only parts of the desk hide while it's on. */
html.desk-custview .desk-private { display: none !important; }
/* The payment pane's head: links right-aligned, the print icon last at the top right. */
.desk-pane .pane-head { align-items: flex-start; }
.desk-pane-links { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.desk-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; border-radius: 8px; color: #3d4652; }
.desk-icon-btn:hover { background: #f1f3f6; }
.desk-icon-btn svg { display: block; }
.desk-lock { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; color: #6b7686; }
.desk-lock svg { display: block; }
/* The handshake: icon and a small switch, off (grey) in dealer view, on (green) in customer view. */
.desk-handshake { gap: 0.3rem; padding: 0 0.4rem; border-radius: 999px; }
.desk-handshake .dh-switch { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #c9d0d8; transition: background 0.15s; }
.desk-handshake .dh-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.desk-handshake[aria-pressed="true"] { background: #e6f4ea; color: #1e7e34; }
.desk-handshake[aria-pressed="true"] .dh-switch { background: #1e7e34; }
.desk-handshake[aria-pressed="true"] .dh-switch::after { transform: translateX(11px); }
/* Desking settings sub-tabs (layout/desk-settings-tabs.cfm). */
.desk-subtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.9rem; }
.desk-subtab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem; border: 1px solid #d5dbe3; border-radius: 999px; background: #fff; color: #3d4652; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.desk-subtab:hover { background: #f4f6f9; }
.desk-subtab.active { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
/* Pricing strategy rules (desk-settings.cfm ?tab=pricing): a two-handle bar from MSRP past invoice. */
.pr-rule { padding: 0.8rem 0.9rem 0.9rem; border-top: 1px solid #eef0f3; }
.pr-rule.pr-new { background: #fafbfc; }
.pr-add { margin-bottom: 0.4rem; color: #0a5cb8; font-size: 0.85rem; font-weight: 600; }
.pr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pr-head select, .pr-head input[type="text"] { min-height: 40px; }
.pr-head input[type="text"] { flex: 1; min-width: 9rem; }
.pr-slider { position: relative; height: 34px; margin-top: 0.6rem; }
.pr-track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 4px; background: linear-gradient(270deg, #e6f4ea, #fdf3e1 45%, #fbe4e4); }
.pr-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(10, 92, 184, 0.4); }
.pr-inv { position: absolute; top: -6px; width: 2px; height: 20px; margin-right: -1px; background: #6b7686; }
/* MSRP on the right: the ranges run right to left (0 off MSRP at the right edge). */
.pr-r { direction: rtl; position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pr-r::-webkit-slider-runnable-track { background: none; }
.pr-r::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #0a5cb8; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab; }
.pr-r::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #0a5cb8; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab; }
.pr-r-floor::-webkit-slider-thumb { background: #c5221f; }
.pr-r-floor::-moz-range-thumb { background: #c5221f; }
.pr-scale { position: relative; display: flex; justify-content: space-between; height: 1.1rem; color: #8a94a3; font-size: 0.75rem; }
.pr-invlabel, .pr-msrplabel { position: absolute; transform: translateX(50%); }
.pr-msrp { position: absolute; top: -6px; width: 2px; height: 20px; margin-right: -1px; background: #1f2a37; }
.pr-msrplabel { color: #1f2a37; font-weight: 600; }
.pr-addbtn { border-top: 1px solid #eef0f3; }
.pr-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.pr-nums label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; }
.pr-nums .desk-input { width: 7.5rem; }
.pr-nums .desk-input i { flex: none; color: #6b7686; font-style: normal; font-weight: 600; }
.pr-rule[data-u="pct"] .pr-pre, .pr-rule[data-u="usd"] .pr-suf { display: none; }
.pr-nums label:nth-child(1) > span:first-child { color: #0a5cb8; }
.pr-nums label:nth-child(2) > span:first-child { color: #c5221f; }
/* Pricing strategy strip under the sale price (desk.cfm pricingHtml). */
.desk-pricing { padding: 0.45rem 0.9rem 0.6rem; border-top: 1px solid #eef0f3; background: #fafbfc; font-size: 0.82rem; }
.dp-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.35rem; color: #3d4652; font-weight: 600; }
.dp-head .muted { font-weight: 500; font-variant-numeric: tabular-nums; }
.dp-track { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(270deg, #e6f4ea, #fdf3e1 70%, #fbe4e4); }
.dp-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(10, 92, 184, 0.35); }
.dp-inv { position: absolute; top: -4px; width: 2px; height: 16px; margin-right: -1px; background: #6b7686; }
.dp-now { position: absolute; top: -5px; width: 12px; height: 18px; margin-right: -6px; border-radius: 4px; background: #0a5cb8; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.dp-now.below { background: #c5221f; }
/* Drag the sale price (desk-pad.js): the bar takes the finger (a taller touch area around it), the
   marker grows while it moves, and the price under it shows with Use / Cancel. */
.dp-track.dp-dragable { cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.dp-track.dp-dragable::before { content: ""; position: absolute; left: -6px; right: -6px; top: -16px; bottom: -16px; }
.dp-track.dp-dragable .dp-now { cursor: grab; transition: transform 0.1s; }
.dp-track.dp-dragging .dp-now { transform: scale(1.35); cursor: grabbing; }
.dp-dragline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0.7rem 0 0.1rem; padding: 0.45rem 0.6rem; border-radius: 10px; background: #eef4fc; }
.dp-dragline[hidden] { display: none; }
.dp-dragprice { font-size: 1.1rem; font-weight: 700; color: #0a5cb8; font-variant-numeric: tabular-nums; }
.dp-dragnote { flex: 1; min-width: 8rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.dp-dragline .dp-use { min-height: 40px; padding: 0 1rem; font-size: 0.95rem; }
.dp-dragpay { font-variant-numeric: tabular-nums; }
.dp-dragpay b { color: #1f2a37; }
.dp-draggross, .dp-dragcosts { flex-basis: 100%; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.dp-draggross { color: #1e7e34; font-weight: 600; }
.dp-draggross.neg { color: #c5221f; }
.dp-draggross:empty { display: none; }
.dp-dragbtns { display: flex; align-items: center; gap: 0.6rem; flex-basis: 100%; margin-top: 0.2rem; }
/* Summary pieces you can tap to change (desk.cfm ed(), desk-pad.js deskEdit): a quiet dotted underline. */
.desk-ed { cursor: pointer; text-decoration: underline dotted rgba(10, 92, 184, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: 4px; }
.desk-ed:hover, .desk-ed:focus-visible { background: #eef4fc; outline: none; }
.desk-due[data-edit] { cursor: pointer; }
.desk-due[data-edit]:hover, .desk-due[data-edit]:focus-visible { box-shadow: inset 0 0 0 2px #b9d3f1; outline: none; }
.desk-paybar .desk-ed { text-decoration-color: rgba(255, 255, 255, 0.6); }
.desk-paybar .desk-ed:hover, .desk-paybar .desk-ed:focus-visible { background: rgba(255, 255, 255, 0.15); }
/* Pricing bar drag (desk.cfm action=pricepreview): the summary at the dragged price, marked, and the
   numbers that came back washed in yellow that fades (the old 37signals yellow fade). */
.dp-preview-sum { position: relative; }
.dp-preview-note { margin: 0 0 0.5rem; padding: 0.35rem 0.6rem; border-radius: 8px; background: #fff8d6; color: #7a5a00; font-size: 0.85rem; font-weight: 600; }
@keyframes deskYellowFade { 0% { background-color: #ffef8a; } 100% { background-color: transparent; } }
.yft { animation: deskYellowFade 1.2s ease-out; border-radius: 4px; }
@keyframes deskYellowFadeBar { 0% { background-color: rgba(255, 228, 92, 0.55); } 100% { background-color: transparent; } }
.desk-paybar .yft { animation-name: deskYellowFadeBar; }
html[data-theme="dark"] .yft { animation-name: deskYellowFadeBar; }
/* The page's payment while the price is being dragged: a preview until Use. */
.dp-preview { color: #0a5cb8 !important; font-style: italic; }
.desk-paybar .dp-preview { color: #fff !important; text-decoration: underline dotted rgba(255, 255, 255, 0.7); text-underline-offset: 3px; }
.dp-dragline.below { background: #fdecea; }
.dp-dragline.below .dp-dragprice { color: #c5221f; }
.dp-msrp { position: absolute; top: -4px; width: 2px; height: 16px; margin-right: -1px; background: #1f2a37; }
.dp-scale { display: flex; justify-content: space-between; margin-top: 0.3rem; color: #8a94a3; font-variant-numeric: tabular-nums; }
.dp-warn { margin: 0.35rem 0 0; color: #c5221f; font-weight: 600; }
.dp-floor { margin: 0.35rem 0 0; color: #3d4652; }
/* The AI deal strategy's prices on the strip: open (hollow) and go-to (solid), purple. */
.dp-ai { position: absolute; top: -3px; width: 14px; height: 14px; margin-right: -7px; border: 2.5px solid #7b3fe4; border-radius: 50%; background: #fff; box-sizing: border-box; }
.dp-ai.dp-ai-go { background: #7b3fe4; }
.dp-ailine { margin: 0.3rem 0 0; color: #5b2bb5; font-weight: 600; }
.dp-ailine .dp-ai, .dst-row .dp-ai { position: relative; top: 2px; display: inline-block; margin: 0 0.2rem 0 0; }
/* Price strategy fold at the top of the Price group (desk.cfm): one line, opens to the AI read and the chart. */
.desk-pricefold-group .desk-grid > .desk-pricefold { border-top: none; background: #f8f5fe; }
/* A thin rainbow that runs around the Price strategy box: the gradient sits behind a 1.5px gap. */
.desk-ws .desk-pricefold-group { margin: 1rem 0 0.8rem; padding: 2.5px; border-radius: 14.5px;
    background: linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #0a84ff, #5e5ce6, #bf5af2, #ff3b30) 0 0 / 300% 100%;
    animation: dpf-rainbow 8s linear infinite; }
.desk-ws .desk-pricefold-group > .desk-grid { border: none; border-radius: 12px; }
/* Inside the worksheet card: room around it so the rainbow shows on every side. */
.desk-ws .desk-sheet .desk-group.desk-pricefold-group { margin: 0.8rem 0.7rem 1rem; }
@keyframes dpf-rainbow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .desk-ws .desk-pricefold-group { animation: none; } }
.desk-pricefold > summary { list-style: none; cursor: pointer; }
.desk-pricefold > summary::-webkit-details-marker { display: none; }
.dpf-sum { display: flex; align-items: center; gap: 0.8rem; min-height: 44px; padding: 0 0.9rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.dpf-title { flex: 1; color: #5b2bb5; font-weight: 700; }
.dpf-ai { color: #5b2bb5; font-weight: 600; }
.dpf-ai .dp-ai { position: relative; top: 2px; display: inline-block; margin: 0; }
.desk-pricefold[open] .desk-fold-caret { transform: rotate(180deg); }
.desk-pricefold .desk-strategy .dst-head > span:first-child { display: none; }
.desk-pricefold > .desk-strategy, .desk-pricefold > .desk-pricing { border-top: 1px solid #ece6f8; }
/* AI deal strategy box (desk.cfm strategyHtml), above the pricing strip, behind the lock. */
.desk-strategy { padding: 0.6rem 0.9rem 0.7rem; border-top: 1px solid #eef0f3; background: #f8f5fe; font-size: 0.86rem; }
.dst-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dst-head > span:first-child { color: #5b2bb5; font-weight: 700; }
.dst-head .dst-read { margin-left: auto; }
.dst-wait { display: none; }
.dst-read.htmx-request .dst-wait { display: inline; }
.dst-read-text { margin: 0.4rem 0; color: #1f2a37; }
.dst-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 40px; border-top: 1px solid #ece6f8; }
.dst-row strong { font-variant-numeric: tabular-nums; }
.dst-k { color: #5b2bb5; font-weight: 600; }
.dst-why { flex: 1; min-width: 12rem; color: #4b5563; }
.dst-next { margin: 0.4rem 0 0; }
.dst-signals { margin: 0.3rem 0 0; padding-left: 1.1rem; color: #4b5563; }
.dst-facts { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #ece6f8; }
.dst-facts ul { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; color: #374151; }
.dst-fact { display: flex; gap: 0.5rem; align-items: center; }
.dst-fact input { flex: 1; min-width: 0; min-height: 40px; padding: 0 0.7rem; border: 1px solid #d9cff3; border-radius: 10px; background: #fff; font: inherit; }
.dst-fact input:focus { outline: 2px solid #7b3fe4; outline-offset: 0; }
/* Back-end history fold, under Price strategy (desk.cfm backFoldHtml), behind the lock. */
.desk-ws .desk-sheet .desk-group.desk-backend-group { margin: 0 0.7rem 1rem; }
.desk-ws .desk-backend-group > .desk-grid { border: 1px solid #e3e7ec; border-radius: 12px; }
.desk-backfold > summary { list-style: none; cursor: pointer; }
.desk-backfold > summary::-webkit-details-marker { display: none; }
.desk-backfold .dpf-title { color: #1e5aa8; }
.desk-backfold[open] .desk-fold-caret { transform: rotate(180deg); }
.dbk-body { padding: 0.2rem 0.9rem 0.8rem; font-size: 0.86rem; border-top: 1px solid #eef0f3; }
.dbk-ai { margin: 0.4rem 0 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: #f8f5fe; }
.dbk-ai p { margin: 0.25rem 0; }
.dbk-deals { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.dbk-deals li { margin: 0.35rem 0; }
.dst-build { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #ece6f8; }
.dst-build p { margin: 0.2rem 0; }
.dst-needs { color: #b06000; font-weight: 600; }
.dst-buildbtn { margin-top: 0.4rem; }
.dst-x { min-width: 28px; min-height: 28px; padding: 0; color: #8a94a3; font-size: 1.1rem; line-height: 1; }
/* Desk list (desks.cfm): title, + Desk a car and the settings gear on one line; then search and chips. */
.desk-list-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.desk-list-head h1 { margin: 0; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .desk-list-head { flex-wrap: nowrap; gap: 0.5rem; }
  .desk-list-head h1 { font-size: 1.3rem; }
  .dkl-h-pre { display: none; }
  .desk-list-head .ss-btn { padding: 0 0.85rem; font-size: 0.95rem; white-space: nowrap; }
}
.desk-list-head .ss-btn { min-height: 44px; display: inline-flex; align-items: center; }
.dkl-gear { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #eef2f7; color: #3d5270; }
.dkl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dkl-chips::-webkit-scrollbar { display: none; }
.dkl-chips a { flex: 0 0 auto; }
.dkl-chip-gap { flex: 1 1 0.6rem; min-width: 0.6rem; }
/* A desk as a row (lib/desking/DeskList.cfc): two lines, the payment on the right; swipe for its actions. */
.desk-rows .item { min-height: 56px; align-items: center; padding: 0.55rem 0; }
.desk-rows .item-main { min-width: 0; }
.desk-rows .item-title, .desk-rows .item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-rows .item-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dr-st { font-weight: 600; color: #6b7686; }
.dr-st.dr-agreed { color: #1f7a4d; }
.dr-st.dr-dead { color: #a0392f; }
.dr-st.dr-working { color: #0a5cb8; }
.dr-more { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 0.2rem; border: 0; border-radius: 50%; background: transparent; color: #6b7686; cursor: pointer; }
.dr-more:hover { background: #eef2f7; }
@media (hover: hover) and (pointer: fine) { .dr-more { display: inline-flex; } }
.desk-row .swipe-delete { width: 88px; }
.desk-row .swipe-delete.swipe-more { right: 88px; }
.swipe-delete.swipe-archive { background: #6b7686; }
.swipe-delete.swipe-restore { background: #0a5cb8; }
.desk-rows .is-archived .item-title { color: #6b7686; }
.desk-archived { margin: 0.4rem 0 0.8rem; }
.desk-archived > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.3rem; color: #3d5270; font-weight: 600; list-style: none; }
.desk-archived > summary::-webkit-details-marker { display: none; }
.desk-archived > summary::after { content: "\203A"; margin-left: 0.2rem; transition: transform .15s; }
.desk-archived[open] > summary::after { transform: rotate(90deg); }
/* One row per customer; "n desks" (or a swipe left) opens their desks under it. */
.dkl-group { margin: 0; border-bottom: 1px solid #e8ebef; }
.dkl-group .swipe-row .item, .dkl-group .dkl-head .item { border-bottom: none; }
.dkl-head { display: flex; align-items: center; touch-action: pan-y; }
.dkl-head > .item { flex: 1 1 auto; min-width: 0; }
.dkl-count { flex: 0 0 auto; min-height: 44px; margin-left: 0.4rem; padding: 0 0.8rem; border: 0; border-radius: 999px; background: #e8f0fb; color: #0a5cb8; font: inherit; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dkl-count span { display: inline-block; transition: transform .15s; }
.dkl-group.open .dkl-count span { transform: rotate(90deg); }
.dkl-desks { display: none; margin: 0 0 0.5rem 0.9rem; padding-left: 0.6rem; border-left: 3px solid #e8f0fb; }
.dkl-group.open .dkl-desks { display: block; }
.dkl-desks .swipe-row + .swipe-row { border-top: 1px solid #eef0f3; }
.desk-veh { margin: 0.6rem 0; }
.desk-veh > summary { min-height: 40px; display: inline-flex; align-items: center; font-size: 0.9rem; }
.desk-search, .desk-veh-free input[type=text], .desk-start-free input[type=text], .desk-start-free select { font: inherit; font-size: 16px; padding: 0.5rem 0.65rem; border: 1px solid #c9d0d8; border-radius: 8px; min-height: 44px; box-sizing: border-box; }
.desk-search { width: 100%; margin: 0.3rem 0; }
.desk-veh-free, .desk-start-free { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.desk-veh-free input[type=text], .desk-start-free input[type=text] { flex: 1 1 12rem; min-width: 0; }
.desk-veh-pick, .desk-start { align-items: center; margin: 0; }
.desk-op { display: inline-block; margin: 0; }
.quote-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.3rem 0.1rem 0.5rem; margin-top: 0.6rem; -webkit-overflow-scrolling: touch; }
.quote-tab { flex: none; display: flex; flex-direction: column; justify-content: center; min-height: 56px; min-width: 7.5rem; padding: 0.35rem 0.85rem; border-radius: 12px; background: #e8edf3; color: #1a1a1a; }
.quote-tab:hover { text-decoration: none; background: #dde5ee; }
.quote-tab.on { background: #0a5cb8; color: #fff; }
.quote-tab-label { font-size: 0.8rem; font-weight: 600; opacity: 0.85; }
.quote-tab-amt { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The quote tabs' "+" and the actions tray under them (desk.cfm; desk-pad.js deskOps). */
.quote-add { flex: none; align-self: center; width: 40px; height: 40px; border: 1.5px solid #0a5cb8; border-radius: 50%; background: #fff; color: #0a5cb8; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.quote-add:hover { background: #e8f1fc; }
/* Volvo program sheet: who a ticked dealer-cash incentive goes to (desk.cfm programPanel). */
/* The switch sits over the row, between its tick box and its name. */
.dpp-line { position: relative; }
.dpp-line > .dpp-row { padding-left: calc(0.9rem + 34px); }
.dpp-line > .dpp-row .dpp-box { margin-left: -34px; margin-right: 34px; }
.dpp-line > .dpp-mini { position: absolute; top: 50%; left: calc(0.9rem + 22px + 0.5rem); transform: translateY(-50%); }
.dpp-mini { display: inline-flex; align-items: center; padding: 6px 2px; border: none; background: none; cursor: pointer; }
.dpp-mini[disabled] { cursor: default; opacity: 0.45; }
.dpp-mini i { position: relative; width: 26px; height: 15px; border-radius: 8px; background: #c9d0d8; transition: background 0.15s; }
.dpp-mini i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.dpp-mini.on i { background: #1e7e34; }
.dpp-mini.on i::after { transform: translateX(11px); }
.desk-ops { margin: 0 0 0.5rem; }
.desk-ops-grip { display: block; width: 100%; height: 16px; padding: 0; border: none; background: none; cursor: grab; touch-action: pan-y; }
.desk-ops-grip span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: #c9d0d8; transition: background 0.15s, width 0.15s; }
.desk-ops-grip:hover span, .desk-ops-grip[aria-expanded="true"] span { width: 56px; background: #0a5cb8; }
.desk-ops-tray { padding: 0.4rem 0.5rem 0.1rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fafbfc; }
.desk-ops-tray:not([hidden]) { animation: deskOpsIn 0.18s ease-out; }
@keyframes deskOpsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.desk-ops-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
.desk-ops-row .desk-op { margin: 0; }
.desk-ops-k { flex: 0 0 4.6rem; color: #6b7686; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.desk-ops-row button.card-btn, .desk-ops-row button.primary-btn { min-height: 34px; padding: 0.15rem 0.65rem; border-radius: 8px; font: inherit; font-size: 0.84rem; }
.desk-ops-row button.card-btn { border: 1px solid #0a5cb8; color: #0a5cb8; background: #fff; }
.desk-ops-row button.primary-btn { font-weight: 600; }
.desk-ops-row button.card-btn.danger { border-color: #b42318; color: #b42318; }
.desk-ops-row button.copied { border-color: #1e7e34; color: #1e7e34; }
/* Delete the whole deal: folded away under the tray, a slide inside (desk.cfm). */
.desk-ops-deldeal { margin: 0.1rem 0 0.35rem; }
.desk-ops-deldeal > summary { display: inline-block; padding: 0.15rem 0; color: #b42318; font-size: 0.8rem; cursor: pointer; list-style: none; }
.desk-ops-deldeal > summary::-webkit-details-marker { display: none; }
.desk-ops-deldeal p { margin: 0.2rem 0 0.4rem; color: #8c1d18; }
.desk-ops-deldeal .slide-form { margin: 0; }
.desk-ops-deldeal .slide-confirm { height: 40px; }
.desk-ops-deldeal .slide-knob { top: 4px; left: 4px; width: 32px; height: 32px; font-size: 1.3rem; }
.desk-ops-deldeal .slide-text { padding-left: 40px; font-size: 0.84rem; }
.desk-quote-ops, .desk-deal-ops { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.3rem 0 0.8rem; }
.desk-quote-ops button.card-btn, .desk-deal-ops button.card-btn, .desk-veh-free button, .desk-veh-pick button, .desk-start button.card-btn { min-height: 40px; padding: 0.3rem 0.85rem; border: 1px solid #0a5cb8; color: #0a5cb8; background: #fff; border-radius: 8px; font: inherit; font-size: 0.9rem; }
button.card-btn.danger { border-color: #8c1d18; color: #8c1d18; }
.desk-deal-ops .primary-btn { min-height: 52px; font-size: 1.05rem; padding: 0.55rem 1.4rem; }
.desk-form fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.desk-form fieldset[disabled] { opacity: 0.7; }
.desk-locked { background: #e6f4ea; color: #0a5c24; border-radius: 10px; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
.desk-type-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 0.4rem; }
.desk-type-row .desk-label { flex: 1 1 10rem; }
.desk .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #e3e7ec; }
.desk .segmented button { min-height: 40px; padding: 0 1rem; border: none; border-radius: 8px; background: none; color: #1a1a1a; font: inherit; font-weight: 550; }
.desk .segmented button.on { background: #fff; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.15); font-weight: 650; }
.desk-group { border-top: 1px solid #e8ebef; padding-top: 0.2rem; margin-top: 0.6rem; }
.desk-group h3, .desk-trades h3 { color: #3d5270; }
.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.55rem 0.7rem; align-items: end; }
.desk-field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; font-size: 0.8rem; color: #555; }
.desk-wide { grid-column: span 2; }
.desk-input { display: flex; align-items: center; border: 1px solid #c9d0d8; border-radius: 8px; background: #fff; min-height: 44px; padding: 0 0.55rem; box-sizing: border-box; }
.desk-input:focus-within { border-color: #0a5cb8; box-shadow: 0 0 0 2px rgba(10, 92, 184, 0.2); }
.desk-input i { font-style: normal; color: #888; margin-right: 0.2rem; }
.desk-input input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 16px; padding: 0.45rem 0; background: none; font-variant-numeric: tabular-nums; }
.desk-field select { font: inherit; font-size: 16px; min-height: 44px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0 0.5rem; background: #fff; width: 100%; }
.desk-check { display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; min-height: 44px; margin: 0; font-size: 0.88rem; color: #333; }
.desk-check input { width: 1.2rem; height: 1.2rem; }
.desk-fees { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.3rem; }
.desk-fee { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto auto; gap: 0.5rem; align-items: center; }
.desk-fee > input[type=text] { font: inherit; font-size: 16px; min-height: 44px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0 0.55rem; box-sizing: border-box; min-width: 0; }
.desk-fee .link-btn { font-size: 1.4rem; min-width: 44px; min-height: 44px; color: #8c1d18; }
/* Remove a fee / incentive / product line: a real 44px button, not a bare x. */
.desk-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ecc8c4; border-radius: 10px; background: #fdf3f2; color: #b42318; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.desk-remove:hover { border-color: #b42318; background: #fbe4e1; }
.desk-remove:active { background: #f6cfca; }
.desk-trades { margin-top: 0.8rem; border-top: 1px solid #e8ebef !important; }
.desk-trade { background: #fafbfc; border: 1px solid #e3e7ec; border-radius: 12px; padding: 0 0.8rem; margin-bottom: 0.6rem; }
.desk-trade.is-hidden { display: none; }
.desk-trade.is-empty { background: none; border-style: dashed; }
.desk-trade[open] { padding-bottom: 0.8rem; }
.desk-trade-sum { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; cursor: pointer; list-style: none; }
.desk-trade-sum::-webkit-details-marker { display: none; }
.desk-trade-sum .muted { font-size: 0.9rem; }
.desk-trade[open] > .desk-trade-sum .link-like { display: none; }
.link-like { color: #1f5fbf; font-weight: 600; }
.desk-trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.desk-add-menu > summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; color: #1f5fbf; font-weight: 600; }
.desk-add-menu > summary::-webkit-details-marker { display: none; }
.desk-add-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem 0 0.4rem; }
.desk-add-list .pill-btn { border: 1px solid #c9d0d8; border-radius: 999px; padding: 0 0.8rem; min-height: 40px; background: #fff; }
.desk-inc { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) auto auto auto; }
.desk-prog { max-width: 8rem; }
.desk-vscope { display: flex; gap: 0.4rem; margin: 0.3rem 0; }
.desk-vscope label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.7rem; border: 1px solid #c9d0d8; border-radius: 999px; font-size: 0.9rem; }
.quote-tab-car { display: block; font-size: 0.72rem; color: #5b6573; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-plan { font-size: 0.9rem; background: #f3f6fa; border-radius: 8px; padding: 0.5rem 0.7rem; }
.desk-grid-wrap { margin: 0.6rem 0 0.8rem; }
.desk-grid-wrap > summary { font-weight: 600; min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.desk-paygrid { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.desk-paygrid th, .desk-paygrid td { padding: 0.15rem; text-align: center; border-bottom: 1px solid #e8ebef; }
.desk-paygrid thead th { font-size: 0.8rem; color: #6b7686; font-weight: 600; }
.desk-paygrid tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.desk-paygrid td button { width: 100%; min-height: 40px; border: none; background: none; font: inherit; border-radius: 8px; cursor: pointer; }
.desk-paygrid td button:hover { background: #eef3fb; }
.desk-paygrid td.on, .desk-paygrid td.on button { background: #1f5fbf; color: #fff; border-radius: 8px; font-weight: 700; }
.desk-paygrid td.short button { color: #8c1d18; }
.desk-garage { font: inherit; font-size: 16px; min-height: 40px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0 0.4rem; max-width: 100%; }
.desk-pane .pane-head h2 .muted { font-size: 0.9rem; font-weight: 500; }
.desk-big { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0 0.8rem; }
.desk-big strong { font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.desk-big strong small { font-size: 1rem; font-weight: 600; color: #555; margin-left: 0.15rem; }
.desk-due { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0.8rem; border-radius: 10px; background: #e8f0fb; margin-bottom: 0.6rem; }
.desk-due strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.desk-lines { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; margin: 0.4rem 0 0.7rem; font-size: 0.93rem; }
.desk-lines dd { text-align: right; font-variant-numeric: tabular-nums; }
/* The invisible ")" after a positive amount (desk.cfm moneyCol), so digits line up with (negatives). */
.np { visibility: hidden; }
.desk-gross-rsv { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid #eef0f3; }
.desk-gross-rsv .dst-k { margin-bottom: 0.2rem; }
.desk-lines .total { font-weight: 700; color: #1a1a1a; border-top: 1px solid #dfe3e8; padding-top: 0.4rem; }
.desk-taxbase { margin: 0.4rem 0 0.8rem; }
.desk-taxbase > summary { min-height: 36px; display: inline-flex; align-items: center; font-size: 0.9rem; }
@media (max-width: 820px) {
    /* The summary stays on the page (below the form) instead of a slide-over. */
    .desk .desk-pane { display: block; position: static; max-height: none; order: -1; }
    .desk-big strong { font-size: 2rem; }
    .desk-fee { grid-template-columns: minmax(0, 1fr) minmax(0, 7rem) auto; }
    .desk-fee .desk-check { grid-column: span 1; }
    .desk-inc { grid-template-columns: minmax(0, 1fr) minmax(0, 6rem) auto; }
    .desk-inc .desk-prog { grid-column: 1; }
    .desk-wide { grid-column: auto; }
}
.desk-settings textarea { font: inherit; font-size: 16px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0.5rem; max-width: 28rem; }
.desk-check-table { border-collapse: collapse; margin: 0.5rem 0; font-variant-numeric: tabular-nums; }
.desk-check-table th, .desk-check-table td { padding: 0.35rem 0.9rem 0.35rem 0; text-align: left; border-bottom: 1px solid #e8ebef; }
.desk-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 9rem)); gap: 0.4rem 0.6rem; }

/* ---- Document camera (assets/doc-camera.js): full screen, touch-first ---- */
html.doccam-open, html.doccam-open body { overflow: hidden; }
.doccam { position: fixed; inset: 0; z-index: 2147483000; background: #000; color: #fff; height: 100dvh; touch-action: manipulation; -webkit-user-select: none; user-select: none; font-family: inherit; }
.doccam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doccam-guide { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, 0.95); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); pointer-events: none; }
.doccam-guide.guide-card { width: min(88vw, calc(62dvh * 1.586)); aspect-ratio: 1.586; }
.doccam-guide.guide-page { width: min(84vw, calc(66dvh * 0.773)); aspect-ratio: 0.773; border-radius: 8px; }
.doccam-guide.guide-none { display: none; }
.doccam-top, .doccam-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left)); }
.doccam-top { top: 0; padding-top: max(0.75rem, env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.doccam-bottom { bottom: 0; padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.doccam-title { flex: 1; text-align: center; font-weight: 600; font-size: 1.05rem; }
.doccam-btn { min-height: 44px; min-width: 88px; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font: inherit; font-weight: 600; font-size: 1rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.doccam-btn:disabled { opacity: 0.5; }
.doccam-primary { background: #fff; color: #111; }
.doccam-torch.is-on { background: #ffd54a; color: #111; }
.doccam-shutter { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 5px solid #fff; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); }
.doccam-shutter:active { transform: scale(0.94); background: #fff; }
.doccam.no-live .doccam-shutter::after { content: "Camera"; display: block; color: #111; font-weight: 700; font-size: 0.75rem; }
.doccam-hint { position: absolute; left: 1rem; right: 1rem; bottom: calc(110px + env(safe-area-inset-bottom)); text-align: center; font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.doccam-review { position: absolute; inset: 0; background: #000; }
.doccam-review-img { position: absolute; left: 1rem; right: 1rem; top: calc(1rem + env(safe-area-inset-top)); bottom: calc(6.2rem + env(safe-area-inset-bottom)); width: calc(100% - 2rem); height: calc(100% - 7.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; }
.doccam-crop { position: absolute; inset: 0; background: #000; z-index: 1; }
.doccam-crop-stage { position: absolute; left: 1rem; right: 1rem; top: calc(4.2rem + env(safe-area-inset-top)); bottom: calc(6.2rem + env(safe-area-inset-bottom)); overflow: hidden; touch-action: none; }
.doccam-crop-img { position: absolute; }
.doccam-crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); cursor: move; touch-action: none; }
.doccam-crop-handle { position: absolute; width: 44px; height: 44px; touch-action: none; }
.doccam-crop-handle::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid #fff; }
.doccam-crop-handle.h-nw { left: -4px; top: -4px; cursor: nwse-resize; } .h-nw::after { left: 0; top: 0; border-left-width: 5px; border-top-width: 5px; }
.doccam-crop-handle.h-ne { right: -4px; top: -4px; cursor: nesw-resize; } .h-ne::after { right: 0; top: 0; border-right-width: 5px; border-top-width: 5px; }
.doccam-crop-handle.h-sw { left: -4px; bottom: -4px; cursor: nesw-resize; } .h-sw::after { left: 0; bottom: 0; border-left-width: 5px; border-bottom-width: 5px; }
.doccam-crop-handle.h-se { right: -4px; bottom: -4px; cursor: nwse-resize; } .h-se::after { right: 0; bottom: 0; border-right-width: 5px; border-bottom-width: 5px; }
.doccam-toast { position: absolute; left: 50%; top: calc(4.2rem + env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100% - 2rem); padding: 0.55rem 1rem; border-radius: 12px; background: rgba(20, 20, 20, 0.85); font-size: 0.95rem; text-align: center; z-index: 2; }
.doccam-toast.is-error { background: #b42318; }
.doccam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.doccam-flash.go { animation: doccam-flash 0.35s ease-out; }
@keyframes doccam-flash { from { opacity: 0.85; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .doccam-flash.go { animation: none; } }

/* Documents tile (customer profile) and the phone capture page */
.doc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.doc-action { display: flex; align-items: center; gap: 0.6rem; min-height: 56px; padding: 0.7rem 0.9rem; border: 1px solid #d9dee5; border-radius: 12px; background: #fff; color: #1a1a1a; font: inherit; font-weight: 600; font-size: 1rem; text-align: left; -webkit-tap-highlight-color: transparent; }
.doc-action:active { transform: scale(0.98); }
.doc-action svg { flex: none; color: #0a5cb8; }
.doc-handoff { display: flex; align-items: center; gap: 0.6rem; width: 100%; justify-content: center; }
.doc-qr { display: flex; gap: 1rem; align-items: center; padding: 1rem; margin-bottom: 1rem; border-radius: 14px; background: #f3f6fa; }
.doc-qr-code { flex: none; padding: 8px; background: #fff; border-radius: 10px; line-height: 0; }
.doc-qr-code img, .doc-qr-code canvas { width: 168px; height: 168px; }
.doc-thumb { flex: none; width: 4.5rem; height: 3.2rem; border-radius: 8px; object-fit: cover; background: #e8ebef; }
.doc-photo-link { display: block; flex: none; line-height: 0; }
@media (max-width: 520px) { .doc-qr { flex-direction: column; text-align: center; } }
.doc-send-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.6rem 0 1rem; }
.doc-send-preview { padding: 1rem; margin-bottom: 1rem; border: 1.5px dashed #b9c3d0; border-radius: 14px; background: #fafbfc; }
.doc-send-preview select { display: block; width: 100%; min-height: 44px; margin-top: 0.25rem; font: inherit; }
.doc-send-msg { padding: 0.6rem 0.8rem; border-radius: 12px; background: #eaf3ff; white-space: pre-wrap; margin-top: 0.2rem; }
.doc-send-rules { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }
.doc-send-rules li { margin-bottom: 0.25rem; }
@media (max-width: 520px) { .doc-send-row { grid-template-columns: 1fr; } }
.doc-summary { font-size: 0.95rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.doc-details { margin-top: 0.35rem; }
.doc-details summary { display: inline-flex; align-items: center; min-height: 36px; color: #0a5cb8; font-size: 0.9rem; cursor: pointer; }
.doc-details .pane-dl { display: grid; }
.doc-details .pane-links button.pill-link { border: 0; font: inherit; font-size: 0.9rem; color: #0a5cb8; }
/* Desk strip on the customer profile: profile and desk side by side once a
   deal is open; scroll sideways between them. Each side scrolls on its own. */
.strip-desk { display: none; }
.desk-strip.on { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; column-gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.desk-strip.on::-webkit-scrollbar { display: none; }
.desk-strip.on > .strip-page { display: block; height: 100%; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; }
html.desk-open, html.desk-open body { overflow: hidden; }
/* Phones and narrow iPads: the open strip is pinned to the screen (under the app's top bar, which
   stays on both sides -- customer.cfm sizeStrip sets --strip-top -- down to the tab bar), so its
   Profile bar is always at the top -- it no longer depends on how far Safari lets the window scroll
   (it stopped short, or moved around the keyboard, leaving the bar out of reach). The pages keep the
   body's side gutter. */
@media (max-width: 820px) {
    /* To the bottom of the screen (it stopped short for the old tab bar, which cut the desk's payment bar off);
       the menu pill sits above it. */
    .desk-strip.on { position: fixed; top: var(--strip-top, env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; height: auto !important; z-index: 9500; background: #fff; column-gap: 0; }
    .desk-strip.on > .strip-page { box-sizing: border-box; padding: 0 0.75rem; }
    /* On the profile side: the desk's payment bar steps aside, and "Quote ›" sits above the tab bar. */
    html.desk-atprofile .desk-paybar { display: none; }
    button.desk-forward { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}
.desk-panel-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; background: #fff; border-bottom: 1px solid #e8ebef; }
.desk-panel-title { flex: 1; min-width: 0; font-weight: 600; color: #3d5270; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-close { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: #e8edf3; color: #1a1a1a; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; }
.desk-close:hover { background: #dde5ee; }
.desk-back-btn { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; min-height: 44px; padding: 0 0.6rem 0 0.2rem; border: none; background: none; color: #0a5cb8; font: inherit; }
.strip-desk .desk-pane { top: 4.4rem; max-height: calc(100% - 5rem); }
.desk-forward { position: fixed; right: 1rem; bottom: 1.2rem; z-index: 10060; min-height: 52px; padding: 0 1.3rem; border: none; border-radius: 999px; background: #0a5cb8; color: #fff; font: inherit; font-weight: 650; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(10, 92, 184, 0.35); }

/* Timeline swipe-to-delete (customer.cfm): the row face slides left over a red Delete. */
.swipe-row { position: relative; overflow: hidden; touch-action: pan-y; }
.swipe-row .swipe-face { position: relative; z-index: 1; background: var(--swipe-bg, #fff); will-change: transform; -webkit-user-select: none; user-select: none; }
.swipe-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; background: #d92d20; color: #fff; font: inherit; font-weight: 600; font-size: 0.95rem; }
.swipe-row:not(.is-open) .swipe-delete { pointer-events: none; }
.swipe-row:not(.is-moving) .swipe-delete { visibility: hidden; }
.swipe-removed { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0; border-bottom: 1px solid #e8ebef; }
.pos-pane { --swipe-bg: #fafbfc; }
.theme-pos .pos-pane { --swipe-bg: var(--pos-surface); }
.swipe-row .item { border-bottom: 1px solid #e8ebef; }
.swipe-row:last-child .item { border-bottom: none; }
@media (max-width: 820px) { .pos-pane.open { --swipe-bg: #fff; } }
/* Slide to confirm (desk: Delete deal) -- for permanent actions */
.slide-form { display: block; width: 100%; max-width: 22rem; }
.slide-confirm { --slide: 0; position: relative; height: 52px; border-radius: 999px; background: #fdecea; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.slide-confirm::before { content: ""; position: absolute; inset: 0; background: #d92d20; opacity: calc(var(--slide) * 0.9); border-radius: inherit; }
.slide-text { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 52px; color: #8c1d18; font-weight: 650; font-size: 0.95rem; opacity: calc(1 - var(--slide)); pointer-events: none; }
.slide-knob { position: absolute; top: 4px; left: 4px; width: 44px; height: 44px; border: none; border-radius: 50%; background: #d92d20; color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(140, 29, 24, 0.35); transition: transform 0.25s ease; }
.slide-knob:active { cursor: grabbing; }
.slide-confirm.done .slide-knob { background: #fff; color: #d92d20; }
/* Desk: Roll back panel */
.desk-rollback { border-top: 1px solid #dfe3e8; margin-top: 0.4rem; padding-top: 0.2rem; }
.desk-rollback h3 { color: #3d5270; margin-top: 0.6rem; }
.rb-form { margin: 0; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.rb-chip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; margin: 0; border: 1px solid #c9d0d8; border-radius: 999px; background: #fff; color: #0a5cb8; font-size: 0.9rem; font-weight: 550; cursor: pointer; }
.rb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rb-chip.on { background: #0a5cb8; border-color: #0a5cb8; color: #fff; }
.rb-chip:focus-within { outline: 3px solid #0a5cb8; outline-offset: 2px; }
.rb-target { max-width: 14rem; margin-bottom: 0.4rem; }
.rb-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.rb-q { min-height: 40px; min-width: 4.8rem; padding: 0 0.8rem; border: 1px solid #c9d0d8; border-radius: 10px; background: #f6f8fa; color: #1d2733; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.rb-q:hover { border-color: #0a5cb8; }
.rb-q.on { background: #e8f0fb; border-color: #0a5cb8; color: #0a5cb8; }
.rb-label { font-size: 0.8rem; color: #555; margin-top: 0.3rem; }
.rb-result { margin: 0.3rem 0 0.6rem; min-height: 5.2rem; }
/* Apply sits below the answer, never inside it, so a preview can't swap it away mid-tap. */
.rb-foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.rb-foot .primary-btn { min-height: 44px; min-width: 9rem; }
.rb-foot .primary-btn:disabled { opacity: 0.5; cursor: default; }
.rb-fail { margin: 0.5rem 0; }
/* One line at the bottom of the screen: "Applied: Sale price $51,200", or a save that failed. */
.desk-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); transform: translate(-50%, 1rem); z-index: 1000;
  max-width: calc(100vw - 2rem); padding: 0.7rem 1.1rem; border-radius: 12px; background: #1f2a37; color: #fff; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.desk-toast.on { opacity: 1; transform: translate(-50%, 0); }
.desk-toast.bad { background: #c5221f; }
.rb-answer { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: #e6f4ea; margin-bottom: 0.5rem; }
.rb-answer strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.rb-miss { background: #fdecea; color: #8c1d18; border-radius: 10px; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
/* Settings > Dealerships: one card per store, fields in a two-column grid. */
.dealership-card .task-main { width: 100%; }
.hook-lines { display: grid; gap: 0.3rem; margin-top: 0.4rem; }
.hook-lines { border-top: 1px solid #e8ebef; margin-top: 0.8rem; padding-top: 0.6rem; }
.hook-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.hook-line > strong { min-width: 4rem; }
.hook-switch { display: inline-flex; align-items: center; gap: 0.35rem; color: #4a5260; }
.switch.switch-sm { width: 40px; height: 24px; }
.switch.switch-sm .knob { width: 18px; height: 18px; }
.switch.switch-sm.is-on .knob { left: 19px; }
.inbox-svc { font-size: 0.7rem; padding: 0.05rem 0.4rem; vertical-align: 0.1em; }
.dealership-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.9rem; margin: 0.6rem 0; }
.dealership-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.dealership-fields input { min-height: 40px; padding: 0.35rem 0.55rem; font: inherit; font-size: 1rem; border: 1px solid #c9d0d8; border-radius: 8px; }
@media (max-width: 600px) { .dealership-fields { grid-template-columns: 1fr; } }
/* Inventory filters: Make / Model / Trim / Color chip groups with live counts. */
.facets { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.4rem 0 0.6rem; }
.facet { display: flex; gap: 0.6rem; align-items: flex-start; }
.facet-label { flex: none; width: 3.6rem; padding-top: 0.45rem; font-size: 0.82rem; font-weight: 600; color: #5f6368; }
.facet-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.facet-chips a { display: inline-flex; }
.facet-chips .pill { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 34px; padding: 0.2rem 0.65rem; font-size: 0.85rem; }
.facet-n { opacity: 0.65; font-size: 0.78rem; }
.facet .swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.facet-more { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.facet-more > summary { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.5rem; color: #0a5cb8; font-size: 0.85rem; cursor: pointer; list-style: none; }
.facet-more[open] > summary { display: none; }
.facet-clear { padding-left: 4.2rem; }
@media (max-width: 600px) { .facet { flex-direction: column; gap: 0.2rem; } .facet-label { width: auto; padding-top: 0; } .facet-clear { padding-left: 0; } }

/* Slide-out detail (assets/slide-strip.js): list and detail one screen wide
   each, side by side once a record is open; swipe sideways between them. */
.slide-detail, .slide-forward[hidden] { display: none; }
.slide-strip.on { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; column-gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.slide-strip.on::-webkit-scrollbar { display: none; }
.slide-strip.on > .slide-page { display: block; height: 100%; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; }
html.slide-open, html.slide-open body { overflow: hidden; }
.slide-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; background: #fff; border-bottom: 1px solid #e8ebef; }
.slide-title { flex: 1; min-width: 0; font-weight: 600; color: #3d5270; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-back-btn { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; min-height: 44px; padding: 0 0.6rem 0 0.2rem; border: none; background: none; color: #0a5cb8; font: inherit; font-size: 1rem; }
.slide-close { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: #e8edf3; color: #1a1a1a; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; }
.slide-body { padding: 0.8rem 0 2rem; }
.slide-body .pane-head { display: none; }
.slide-body .inv-photo { max-height: 26rem; }
.slide-forward { position: fixed; right: 1rem; bottom: 1.2rem; z-index: 10060; min-height: 52px; padding: 0 1.3rem; border: none; border-radius: 999px; background: #0a5cb8; color: #fff; font: inherit; font-weight: 650; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(10, 60, 120, 0.3); }
@media (max-width: 820px) { .slide-forward { bottom: calc(5rem + env(safe-area-inset-bottom)); } }
/* Customer profile as a slide strip: tiles use the full width; the open
   section is full width too, with RO / appointment details pushed over it. */
.cust-main .tiles { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.slide-detail { position: relative; }
.slide-detail.pushed { overflow: hidden; }
.slide-detail .push-view { background: #fff; padding: 0.6rem 0 2rem; }
.slide-detail .push-view .pane-head { position: sticky; top: 0; background: #fff; z-index: 1; padding: 0.4rem 0; }
.slide-detail .push-view .push-back { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 44px; border: none; background: none; color: #0a5cb8; font: inherit; font-size: 1rem; }
.slide-full-btn { flex: none; min-height: 44px; padding: 0 1.1rem; border: none; border-radius: 999px; background: #e8f0fb; color: #0a5cb8; font: inherit; font-weight: 600; }
.slide-sub { font-weight: 500; color: #5f6368; }
/* Full screen: the strip covers the window (app nav hidden) until closed. */
html.slide-full .slide-strip.on { position: fixed; inset: 0; z-index: 10050; height: auto; background: #fff; padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); }
@media (max-width: 600px) { .slide-full-btn { display: none; } }
/* Inventory: filters column on the left, cars on the right; the car itself
   slides further right (slide strip). */
.inv-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.inv-filters { position: sticky; top: 0.6rem; max-height: calc(100vh - 1.2rem); overflow-y: auto; padding: 0.2rem 0.6rem 0.8rem 0; border-right: 1px solid #e8ebef; }
.slide-strip.on .inv-filters { max-height: calc(100% - 1.2rem); }
.inv-filters .providers { flex-wrap: wrap; }
.inv-filters .facets { margin-top: 0.8rem; gap: 0.8rem; }
.inv-filters .facet { flex-direction: column; gap: 0.3rem; }
.inv-filters .facet-label { width: auto; padding-top: 0; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; }
.inv-filters .facet-clear { padding-left: 0; }
.inv-filters .sort-chips { flex-wrap: wrap; }
.inv-results-col > .muted:first-child { margin-top: 0.2rem; }
/* Inventory header: title + feed line, Refresh on the right; stat tiles; a
   full-size search box; labelled filter groups; count + sort on one row. */
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.inv-head h1 { margin: 0 0 0.15rem; }
.inv-head p { margin: 0; }
.inv-refresh-btn { min-height: 40px; padding: 0.4rem 0.95rem; border: 1px solid #d5dde8; border-radius: 10px; background: #fff; color: #0a5cb8; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.inv-refresh-btn:hover { background: #eef3fb; }
.inv-refresh-btn:disabled { color: #5f6368; cursor: progress; }
.inv-stats { gap: 0.6rem; margin: 0.8rem 0; flex-wrap: wrap; }
.inv-stats > div { min-width: 6.5rem; padding: 0.55rem 0.9rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; }
.inv-stats > div strong { font-size: 1.35rem; line-height: 1.2; }
.inv-stats > div .muted { font-size: 0.82rem; }
.inv-search { gap: 0.8rem; margin-bottom: 0.4rem; }
.inv-search input[type=search] { flex: 1 1 18rem; max-width: 34rem; min-height: 44px; box-sizing: border-box; padding: 0.5rem 0.85rem; border: 1px solid #c9d2dd; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.inv-search input[type=search]:focus { outline: 2px solid #0a5cb8; outline-offset: 0; border-color: #0a5cb8; }
.inv-group-label { margin: 0.9rem 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #5f6368; }
.inv-filters > .inv-group-label:first-child { margin-top: 0.2rem; }
.inv-filters .providers { margin-bottom: 0; }
.inv-filters .facets { margin-top: 0.9rem; }
.inv-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 0.1rem 0 0.6rem; }
.inv-results-head .sort-chips { margin: 0; }
.inv-count { font-size: 0.95rem; color: #5f6368; }
.inv-count strong { color: inherit; font-size: 1.05rem; }
.sort-mark { margin-left: 0.25rem; font-size: 0.8em; }
.inv-more { display: block; width: 100%; min-height: 48px; margin: 0.4rem 0 1rem; border: 1px dashed #c9d2dd; border-radius: 12px; background: none; color: #0a5cb8; font: inherit; font-size: 0.9rem; cursor: pointer; }
.inv-more .inv-more-busy { display: none; color: #5f6368; }
.inv-more.htmx-request .inv-more-label { display: none; }
.inv-more.htmx-request .inv-more-busy { display: inline; }
@media (max-width: 900px) {
    .inv-layout { grid-template-columns: 1fr; gap: 0.4rem; }
    .inv-filters { position: static; max-height: none; overflow: visible; border-right: none; padding: 0; }
    .inv-filters .facet { flex-direction: row; }
    .inv-filters .facet-label { width: 3.6rem; padding-top: 0.45rem; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }
}
/* Inventory split (wide screens): filters | cars | car, two visible at a
   time. Opening a car scrolls the strip so the cars and the car each take
   half; swipe right for the filters; Full screen gives the car the window.
   Same page width as every other page, so the top bar never jumps. */
.slide-strip.split { --split-side: 18rem; }
@media (min-width: 1000px) {
    .slide-strip.split .inv-layout { grid-template-columns: var(--split-side) minmax(0, 1fr); }
    .slide-strip.split.on { grid-auto-columns: auto; grid-template-columns: calc(var(--split-side) + 50% + 0.65rem) calc(50% - 0.75rem); }
    .slide-strip.split.on > .slide-main { scroll-snap-align: start; }
    .slide-strip.split.on > .slide-detail { scroll-snap-align: end; border-left: 1px solid #e8ebef; padding-left: 1rem; }
    .slide-strip.split.on .slide-back-btn { display: none; }
    html.slide-full .slide-strip.split.on { grid-template-columns: 100% 100%; }
    html.slide-full .slide-strip.split.on > .slide-detail { border-left: none; padding-left: 0; }
    html.slide-full .slide-strip.split.on .slide-back-btn { display: inline-flex; }
}
.providers .pill .ui-i { vertical-align: -3px; margin-right: 0.1rem; }
/* Store switcher in the top bar (lib/Layout.cfc): the current store's name;
   a transparent native <select> over it opens the device's own picker. */
.store-switch { position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.2rem; cursor: pointer; }
.store-switch select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.store-switch .store-caret { color: #5f6368; }
.store-switch .store-short { display: none; }
.store-switch:focus-within { outline: 2px solid #0a5cb8; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 820px) { .store-switch .store-full { display: none; } .store-switch .store-short { display: inline; } }

/* Filter accordion (ADF Leads > Lead source): a one-line summary with the
   current pick; tap to open the full set of chips. */
.filter-acc { margin: 0.2rem 0 1rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; }
.filter-acc > summary { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-height: 48px; padding: 0.35rem 0.9rem; cursor: pointer; list-style: none; }
.filter-acc > summary::-webkit-details-marker { display: none; }
.filter-acc > summary::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; border-right: 2px solid #5f6368; border-bottom: 2px solid #5f6368; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; }
.filter-acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filter-acc-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #5f6368; }
.filter-acc > summary .pill { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.filter-acc .active-chip { background: #0a5cb8; color: #fff; }
.filter-acc .active-chip .facet-n { color: inherit; }
.filter-acc > .providers { margin: 0; padding: 0.2rem 0.9rem 0.9rem; }
.providers a.active .provider .facet-n { color: inherit; }

/* Settings > Scheduled tasks: "Runs every [6 minutes]" */
.task-interval { margin: 0.35rem 0 0.2rem; }
.task-interval label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: #5f6368; }
.task-interval select { min-height: 36px; padding: 0.25rem 0.5rem; border: 1px solid #c9d2dd; border-radius: 8px; background: #fff; color: #202124; font: inherit; font-size: 0.9rem; }

/* Customer profile > Messages: the Podium thread as chat bubbles (customer
   on the left, the dealership on the right) and the reply box. */
.msg-thread { display: flex; flex-direction: column; gap: 0.7rem; }
.msg-convs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.msg-convs .pill { font-size: 0.78rem; padding: 0.2rem 0.6rem; }
.chat { display: flex; flex-direction: column; gap: 0.45rem; max-height: 60vh; overflow-y: auto; padding: 0.6rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fafbfc; }
.chat-day { align-self: center; margin: 0.4rem 0 0.1rem; font-size: 0.75rem; font-weight: 600; color: #5f6368; }
.bubble { align-self: flex-start; max-width: 82%; padding: 0.5rem 0.75rem; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid #e3e7ec; font-size: 0.92rem; line-height: 1.4; overflow-wrap: anywhere; }
.bubble.out { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: #0a5cb8; border-color: #0a5cb8; color: #fff; }
.bubble.out a { color: #fff; text-decoration: underline; }
.bubble.failed { border-color: #b3261e; }
.bubble-text p { margin: 0 0 0.4rem; }
.bubble-text p:last-child { margin-bottom: 0; }
.bubble-meta { margin-top: 0.25rem; font-size: 0.72rem; opacity: 0.75; }
.bubble-img img { display: block; max-width: 220px; max-height: 220px; margin-top: 0.3rem; border-radius: 10px; }
.bubble-file { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; font-weight: 600; }
.msg-reply { display: flex; flex-direction: column; gap: 0.5rem; }

/* Development (development.cfm, layout/dev-tabs.cfm). Raw-data sections in
   other pages carry class dev-only and show only with Development > "Show
   developer details" on (lib/Layout.cfc puts html.dev-on). */
html:not(.dev-on) .dev-only { display: none !important; }
.dev-title { margin-bottom: 0.2rem; }
.dev-switch-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.8rem 0 1.2rem; padding: 0.9rem 1rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; }
.dev-switch-title { font-weight: 600; margin-bottom: 0.2rem; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; }
.dev-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.dev-card:hover { border-color: #0a5cb8; }
.dev-card strong { color: #0a5cb8; }
.dev-pre { max-height: 60vh; overflow: auto; padding: 0.7rem; border: 1px solid #e8ebef; border-radius: 10px; background: #fafbfc; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; }

/* Settings > General > Linked systems; the profile's "Open in ..." row. */
.linked-systems { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.linked-system { display: grid; gap: 0.35rem; padding: 0.75rem 0.9rem; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; }
.linked-system input[type=text] { width: 100%; box-sizing: border-box; }
.linked-system-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.linked-system-add { border-style: dashed; }
.pos-customer .sys-links { margin-top: 0.5rem; }

/* A text that didn't go through: red, with the reason underneath. */
.bubble.out.failed { background: #fdecea; border-color: #d93025; color: #5f1410; }
.bubble.out.failed a { color: #5f1410; }
.bubble-failed { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px solid rgba(217, 48, 37, 0.35); font-size: 0.8rem; font-weight: 600; color: #b3261e; }

/* Hover (or tap / focus on touch) details, e.g. a failed text's carrier error. */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; min-height: 1.4rem; font-weight: 400; cursor: help; outline: none; }
.tip-body { display: none; position: absolute; z-index: 30; bottom: calc(100% + 6px); right: -0.4rem; width: max-content; max-width: 16rem; padding: 0.5rem 0.65rem; border-radius: 8px; background: #202124; color: #fff; font-size: 0.75rem; font-weight: 400; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.tip-body a { color: #9cc3ff; }
.tip:hover .tip-body, .tip:focus .tip-body, .tip:focus-within .tip-body { display: block; }
.tip:focus-visible { outline: 2px solid #0a5cb8; outline-offset: 2px; border-radius: 50%; }
/* Fingers: the small buttons and the (i) take a tap around them too (44px tall at least), the layout doesn't move. */
@media (pointer: coarse) {
    .link-btn, .pill-btn, a.card-btn, .ss-qa-x, .tip { position: relative; }
    .link-btn::after, .pill-btn::after, a.card-btn::after, .ss-qa-x::after { content: ""; position: absolute; inset: -6px -2px; }
    .tip::after { content: ""; position: absolute; inset: -11px; }
}

/* Reply attachment preview (assets/msg-reply.js): paste, drop or pick. */
.msg-preview-item { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.msg-preview-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.msg-preview-doc { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 56px; border-radius: 6px; background: #fdecea; color: #b3261e; font-weight: 700; font-size: 0.8rem; }
.msg-preview-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: #5f6368; }
.msg-preview-remove { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: #f1f3f6; color: #202124; font-size: 1.2rem; line-height: 1; cursor: pointer; }


/* Customers > + Add customer */
.add-cust-btn { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0.3rem 0.9rem; border: 1px solid #0a5cb8; border-radius: 8px; color: #0a5cb8; background: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.add-cust-btn:hover { background: #eef4fc; }
.add-cust { border: 1px solid #c9d0d8; border-radius: 12px; padding: 0.9rem 1rem; margin: 0 0 1rem; background: #fff; }
.add-cust-head { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
.add-cust-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.add-cust-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.add-cust-fields input, .add-cust-fields select { min-height: 44px; padding: 0.35rem 0.6rem; font: inherit; font-size: 1rem; border: 1px solid #c9d0d8; border-radius: 8px; background: #fff; box-sizing: border-box; width: 100%; }
.add-cust-actions { display: flex; gap: 1rem; align-items: center; }
.added-note { border: 1px solid #b7dfc3; background: #effaf2; color: #1d5e33; border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0 0 0.8rem; }
.added-note.existing { border-color: #c9d0d8; background: #f4f6f9; color: inherit; }
@media (max-width: 600px) { .add-cust-fields { grid-template-columns: 1fr; } .add-cust-btn { margin-left: 0; justify-content: center; } }

/* Customer > Messages (customer.cfm threadHtml): one header line for the
   conversation in view, the thread, and one composer box. The pane becomes a
   fixed-height column so only the thread scrolls (browsers without :has keep
   the thread's own 60vh cap). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pos-pane:has(.msg-thread) { display: flex; flex-direction: column; height: calc(100dvh - 1.2rem); overflow: hidden; }
.pos-pane:has(.msg-thread) .pane-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pos-pane:has(.msg-thread) .msg-thread { flex: 1; min-height: 0; }
.pos-pane:has(.msg-thread) .chat { flex: 1; min-height: 8rem; max-height: none; }
@media (max-width: 820px) {
    .pos-pane.open:has(.msg-thread) { display: flex; height: 100dvh; padding-bottom: 0.8rem; }
    /* Closed (the customer's name tapped, Back): gone, not left under the tiles by the rule above. */
    .pos-pane:not(.open) { display: none; }
}
/* Phones: the open pane covers the page, so the page behind it can't scroll. Otherwise iOS hands the
   first swipe to that hidden page and the messages only scroll after a tap. */
@media (max-width: 820px) {
    html:has(.pos-pane.open), html:has(.pos-pane.open) body { overflow: hidden; overscroll-behavior: none; }
    /* Pinned, and everything but the pane blanked: after the keyboard opens and closes iOS can
       leave the page shifted, which showed the customer tiles under the pane. */
    html:has(.pos-pane.open) body { position: fixed; inset: 0; width: 100%; }
    html:has(.pos-pane.open) body * { visibility: hidden; }
    html:has(.pos-pane.open) .pos-pane.open, html:has(.pos-pane.open) .pos-pane.open *,
    html:has(.pos-pane.open) dialog, html:has(.pos-pane.open) dialog *,
    html:has(.pos-pane.open) .doccam, html:has(.pos-pane.open) .doccam *, html:has(.pos-pane.open) .nav-progress { visibility: visible; }
    .pos-pane.open { overscroll-behavior: contain; }
}
.chat { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* The message a notification or the Customers list opened on: a brief glow that fades (assets/msg-reply.js). */
.bubble { transition: box-shadow 0.8s; }
.bubble.focus { box-shadow: 0 0 0 3px #f2b705; }
/* Tapbacks (Liked, Loved...): a badge on the reacted-to message's top corner, as on an iPhone; hover or tap says who and when. */
.bubble { position: relative; }
.bubble.has-react { margin-top: 0.75rem; }
.react-badges { position: absolute; top: -0.85rem; right: -0.4rem; display: flex; gap: 0.15rem; z-index: 1; }
.bubble.out .react-badges { right: auto; left: -0.4rem; }
.react { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.3rem; border: 2px solid #fafbfc; border-radius: 999px; background: #e9edf2; font-size: 0.85rem; line-height: 1; cursor: pointer; }
.react.mine { background: #0a5cb8; }
.react-who { display: none; position: absolute; top: calc(100% + 0.3rem); right: 0; z-index: 5; padding: 0.35rem 0.55rem; border-radius: 8px; background: #202124; color: #fff; font-size: 0.75rem; font-weight: 400; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.bubble.out .react-who { right: auto; left: 0; }
.react:hover .react-who, .react:focus-visible .react-who, .react.show .react-who { display: block; }
.conv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.conv-pick { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0 0.3rem 0 0.7rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #0a5cb8; }
.conv-pick select { min-height: 34px; max-width: 15rem; border: none; background: transparent; color: #202124; font: inherit; font-size: 0.9rem; font-weight: 600; }
.conv-ctl { display: flex; align-items: center; gap: 0.45rem; flex: 1 1 14rem; min-width: 0; }
.conv-ctl[hidden] { display: none; }
.conv-ctl form { margin: 0; }
.conv-gap { flex: 1; }
.conv-assign label { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0 0.3rem 0 0.6rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #5f6368; }
.conv-assign select { min-height: 34px; max-width: 9.5rem; border: none; background: transparent; color: #202124; font: inherit; font-size: 0.88rem; }
.conv-menu { position: relative; }
.conv-menu summary { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 36px; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #202124; font-weight: 700; letter-spacing: 1px; list-style: none; cursor: pointer; }
.conv-menu summary::-webkit-details-marker { display: none; }
.conv-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 15rem; overflow: hidden; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.conv-menu-list form { margin: 0; }
.conv-menu-list button, .conv-menu-list a { display: flex; align-items: center; gap: 0.55rem; width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 0.9rem; border: none; border-top: 1px solid #eef0f3; background: none; color: #202124; font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer; }
.conv-menu-list > :first-child, .conv-menu-list > form:first-child button { border-top: none; }
.conv-menu-list button:hover, .conv-menu-list a:hover { background: #f4f7fb; }
.bubble.out.ai { background: #fff; border: 1px dashed #0a5cb8; color: #202124; }
.bubble.out.ai a { color: #0a5cb8; }
.msg-reply { flex: none; display: flex; flex-direction: column; gap: 0.4rem; }
.msg-box { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.45rem 0.6rem 0.5rem; border: 1px solid #c9d2dd; border-radius: 14px; background: #fff; }
.msg-box:focus-within { border-color: #0a5cb8; box-shadow: 0 0 0 1px #0a5cb8; }
.msg-draft-note { margin: 0; padding: 0.3rem 0.55rem; border-radius: 8px; background: #f3effd; color: #5b3fb5; font-weight: 600; }
.msg-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.4rem; font-size: 0.82rem; color: #5f6368; }
.msg-line strong { color: #202124; font-weight: 600; overflow-wrap: anywhere; }
.msg-line label { display: inline-flex; align-items: center; gap: 0.2rem; }
.msg-line select { min-height: 30px; max-width: 12rem; padding: 0 0.1rem; border: none; background: transparent; color: #202124; font: inherit; font-size: 0.82rem; font-weight: 600; }
.msg-dot { color: #9aa0a6; }
.msg-opted { margin: 0; }
.msg-subject { width: 100%; box-sizing: border-box; padding: 0.3rem 0.2rem; border: none; border-bottom: 1px solid #eef0f3; background: transparent; font: inherit; font-size: 16px; }
.msg-subject:focus, .msg-reply textarea:focus { outline: none; }
.msg-reply textarea { width: 100%; box-sizing: border-box; min-height: 2.8rem; max-height: 9rem; padding: 0.3rem 0.2rem; border: none; background: transparent; font: inherit; font-size: 16px; resize: none; }
.msg-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.msg-attach { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; border-radius: 10px; color: #0a5cb8; cursor: pointer; }
.msg-attach:hover { background: #eef4fc; }
/* The desk's quote sheet waiting to go with the reply (customer.cfm quotePdfChip). */
.msg-quote-pdf { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; padding: 0.4rem 0.6rem; border: 1px solid #d5dbe3; border-radius: 10px; background: #f7f9fc; font-size: 0.88rem; }
.msg-quote-pdf .mqp-icon { padding: 0.15rem 0.35rem; border-radius: 5px; background: #c62828; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
.msg-quote-pdf .link-btn { margin-left: auto; font-size: 1.1rem; line-height: 1; }
.msg-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.msg-reply .primary-btn { align-self: auto; min-height: 40px; min-width: 6rem; padding: 0.4rem 1.1rem; }
.msg-reply .primary-btn:disabled { opacity: 0.5; }

/* Documents: a pasted or dropped image asks what it is (assets/doc-camera.js). */
.doc-paste { display: flex; gap: 0.9rem; align-items: flex-start; margin: 0 0 0.8rem; padding: 0.8rem; border: 2px solid #0a5cb8; border-radius: 14px; background: #f4f8fd; }
.doc-paste-thumb { flex: none; width: 112px; height: 112px; object-fit: cover; border-radius: 10px; background: #fff; border: 1px solid #e3e7ec; }
.doc-paste-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.doc-paste-q { font-weight: 700; font-size: 1.05rem; }
.doc-paste-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.doc-paste-choice { min-height: 44px; padding: 0.4rem 0.7rem; border: 1px solid #c9d2dd; border-radius: 10px; background: #fff; color: #202124; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.doc-paste-choice:hover { border-color: #0a5cb8; }
.doc-paste-choice.is-unsure { color: #5f6368; font-weight: 500; }
.doc-paste-cancel { align-self: flex-start; }
@media (max-width: 600px) { .doc-paste { flex-direction: column; } .doc-paste-choices { grid-template-columns: 1fr; } }
.doc-file-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.doc-file-head .link-btn { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }

/* Development > Sessions */
.sess-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sess-head form { margin: 0; }
/* Development > API tokens: the new-token form. */
.token-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.token-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.token-form .token-check { flex-direction: row; align-items: center; gap: 0.4rem; flex-basis: 100%; }
/* Development > Data API > Explorer: the token box, and Swagger UI kept on a light card (it has no dark theme). */
.api-views { margin-bottom: 1rem; }
/* Development > Data API > Command-line tool: install steps per system, each command block with a Copy button. */
.cli-page { max-width: 54rem; }
.cli-page h3 { margin-top: 1.4rem; }
.cli-os-tabs { margin-bottom: 0.6rem; }
.cli-cmd { position: relative; white-space: pre-wrap; word-break: break-all; padding-right: 4.5rem; }
.cli-copy { position: absolute; top: 0.4rem; right: 0.4rem; }
.apix-token { border: 1px solid #e8ebef; background: #fff; border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.apix-token label { font-weight: 600; display: block; margin-bottom: 0.4rem; }
.apix-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.apix-row input { flex: 1 1 18rem; min-width: 0; font-family: ui-monospace, monospace; }
#apixStatus { margin-top: 0.4rem; min-height: 1.2em; }
#apixStatus.ok { color: #2f7d32; }
#apixStatus.bad { color: #b52a1c; }
.apix-swagger { background: #fff; color: #3b4151; border-radius: 10px; padding: 0 0.5rem; }
.apix-swagger .swagger-ui .info { margin: 1rem 0 0.5rem; }
.apix-swagger .swagger-ui .scheme-container { box-shadow: none; padding: 0.5rem 0; }
/* The app's global code { background; padding } boxed every line of Swagger's dark code blocks. */
.apix-swagger .swagger-ui pre code, .apix-swagger .swagger-ui .microlight, .apix-swagger .swagger-ui .microlight span { background: transparent; padding: 0; border-radius: 0; }
.sess-item .item-value form { margin: 0; }
.sess-ended { margin: 0.8rem 0 1rem; }
.sess-ended summary { cursor: pointer; color: #5f6368; }

/* Customer > Deals: a deal built in CDK but not finalized. */
.pill.pending-deal { background: #fff4e0; color: #8a4b00; border: 1px solid #f0c27a; }

/* Development > Customer records: possible duplicates with Keep + Merge. */
.dupe-group { align-items: flex-start; }
.dupe-person { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.3rem; font-size: 0.92rem; }
.dupe-person input[type=radio] { margin: 0; }

/* Customer > Notes (lib/PersonNotes.cfc) */
.note-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.note-form textarea { width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: 0.6rem 0.75rem; border: 1px solid #c9d2dd; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; resize: vertical; }
.note-form-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.note-list { display: flex; flex-direction: column; gap: 0.6rem; }
.note-item { padding: 0.65rem 0.8rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.note-item.is-pinned { border-color: #f0c27a; background: #fffaf0; }
.note-body { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.note-meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.35rem; }
.note-meta form { margin: 0; }
.pinned-note { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid #f0c27a; border-radius: 10px; background: #fffaf0; color: #5c3b00; font-size: 0.88rem; text-decoration: none; }
/* Suggested record updates under the customer's name (layout/profile-suggestions.cfm). */
.psug { margin-top: 0.5rem; border: 1px solid #d9cff2; border-radius: 12px; background: #f8f5ff; }
.psug-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.7rem; cursor: pointer; list-style: none; min-height: 44px; font-size: 0.9rem; }
.psug-bar::-webkit-details-marker { display: none; }
.psug-title { flex: 1; min-width: 0; }
.psug-cta { color: #5b3aa8; font-weight: 600; white-space: nowrap; }
.psug[open] .psug-cta { display: none; }
.psug-reading { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem 0.55rem; font-size: 0.85rem; color: #555; }
.psug-all { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0 0.6rem 0.6rem; }
.psug-all .primary-btn { align-self: auto; }
.psug-msg { margin: 0 0.6rem 0.6rem; }
.psug-list { display: grid; gap: 0.5rem; padding: 0 0.6rem; }
.psug-item { display: grid; gap: 0.35rem; padding: 0.6rem; border-radius: 10px; background: #fff; border: 1px solid #e6e0f5; }
.psug-pick { border-left: 4px solid #5b3aa8; }
.psug-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.psug-field { font-weight: 700; }
.psug-item input[type="text"], .psug-item textarea { width: 100%; box-sizing: border-box; font-size: 1rem; padding: 0.5rem 0.6rem; border: 1px solid #ccc; border-radius: 8px; }
.psug-quote { display: block; margin-top: 0.2rem; font-style: italic; }
.psug-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.psug-actions .primary-btn { min-height: 40px; }
.psug-foot { padding: 0.5rem 0.7rem 0.6rem; margin: 0; }

/* Customer > Customer details */
.details-form { display: flex; flex-direction: column; gap: 0.8rem; }
.details-form fieldset { margin: 0; padding: 0.6rem 0.8rem 0.7rem; border: 1px solid #e3e7ec; border-radius: 12px; }
.details-form legend { padding: 0 0.3rem; font-weight: 600; font-size: 0.9rem; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.8rem; }
.details-grid .span2 { grid-column: 1 / -1; }
.details-pair { display: grid; grid-template-columns: 5rem 1fr; gap: 0.5rem; }
.details-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.details-form input[type=text], .details-form input[type=tel], .details-form input[type=email], .details-form input[type=date], .details-form select { min-height: 40px; padding: 0.3rem 0.55rem; font: inherit; font-size: 16px; border: 1px solid #c9d2dd; border-radius: 8px; background: #fff; box-sizing: border-box; width: 100%; }
.ident-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.3rem 0; border-bottom: 1px solid #f0f2f5; }
.ident-row:last-of-type { border-bottom: none; }
.ident-row .ident-value { flex: 1 1 10rem; font-weight: 600; overflow-wrap: anywhere; }
.ident-row select { width: auto !important; min-height: 36px !important; }
.ident-row label.ident-primary, .ident-row label.ident-remove { flex-direction: row; align-items: center; gap: 0.25rem; }
.ident-new input { flex: 1 1 12rem; width: auto !important; }
.details-checks { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.details-checks label, .details-form label.confirm { flex-direction: row; align-items: center; gap: 0.35rem; font-size: 0.92rem; }
.podium-add { margin-top: 1rem; }
@media (max-width: 600px) { .details-grid { grid-template-columns: 1fr; } }

/* Customers > + Add customer: already-known phone/email, and the Podium option. */
.add-cust-matches { margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid #f0c27a; border-radius: 10px; background: #fffaf0; }
.add-cust-matches p { margin: 0.15rem 0; }
.add-cust-podium { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.8rem; font-size: 0.92rem; }
/* Settings > Notifications (assets/push-settings.js marks this browser's row) */
.push-device-row:not(.push-this) .push-this-pill { display: none; }
.push-device-row form { margin: 0; }
.push-help li { margin-bottom: 0.45rem; }

/* Salesperson line on the profile; Settings > Users. */
.owner-form { margin: 0; }
.owner-form select { min-height: 32px; padding: 0.1rem 0.4rem; border: 1px solid #c9d2dd; border-radius: 8px; background: #fff; font: inherit; font-size: 0.85rem; }
.mine-toggle { margin: 0 0 0.6rem; }
.user-card { border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.user-card summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; }
.user-card .user-name { font-weight: 700; }
.user-card .user-map-sum { flex-basis: 100%; }
.user-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.7rem; }
.user-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.user-form input[type=text], .user-form input[type=password], .user-form select { min-height: 40px; padding: 0.3rem 0.55rem; font: inherit; font-size: 16px; border: 1px solid #c9d2dd; border-radius: 8px; background: #fff; box-sizing: border-box; width: 100%; }
.user-form select[multiple] { min-height: 8rem; }
.user-form label.confirm { flex-direction: row; align-items: center; gap: 0.35rem; }
.user-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 760px) { .user-maps { grid-template-columns: 1fr; } }
.push-pref { flex-wrap: wrap; }
.push-modes { margin: 0; }
.pill-btn { border: none; background: none; padding: 0; font: inherit; cursor: pointer; min-height: 36px; }
/* Sales Stage: cars in stock that fit (SalesStage.fitCars). */
a.ss-car.ss-fit { display: block; color: inherit; text-decoration: none; border-color: #c9dcf3; }
a.ss-car.ss-fit:hover { border-color: #0a5cb8; }
/* A suggested car with + Interested beside it; a vehicle of interest with Desk it and x; a deal on the desk. */
.ss-fitrow { display: flex; align-items: stretch; gap: 0.5rem; }
.ss-fitrow > .ss-fit { flex: 1; min-width: 0; }
.ss-fitrow > .ss-voi-add { flex: none; align-self: center; white-space: nowrap; }
.ss-car.ss-voi { display: flex; align-items: center; gap: 0.5rem; border-color: #b9dcc3; background: #f4fbf6; }
.ss-voi-car { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ss-voi-desk { margin: 0; }
.ss-voi-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #6b7686; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ss-voi-x:hover { background: #eef1f5; color: #b3261e; }
a.ss-car.ss-desk { display: block; color: inherit; text-decoration: none; border-color: #c9dcf3; }
a.ss-car.ss-desk:hover { border-color: #0a5cb8; }
.ss-desk .pill { margin-left: 0.4rem; vertical-align: 1px; }
.ss-desk-ai { margin-top: 0.3rem; color: #5b2bb5; font-size: 0.85rem; }
@media (max-width: 600px) { .ss-fitrow { flex-direction: column; } .ss-fitrow > .ss-voi-add { align-self: flex-start; } }

/* Me (me.cfm) */
.me-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.me-head h1 { margin-bottom: 0.1rem; }
.me-logout { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; text-decoration: none; }
.me-inbox a.me-item { color: inherit; text-decoration: none; }
.me-item.unread .task-name::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; background: #0a5cb8; vertical-align: middle; }
.me-item:not(.unread) .task-name { font-weight: 500; }
.me-more { margin-top: 2rem; }
.push-note-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 1rem; }
.push-note-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; flex: 1 1 12rem; }
.push-note-form input, .push-note-form select { min-height: 40px; padding: 0.3rem 0.55rem; font: inherit; font-size: 16px; border: 1px solid #c9d2dd; border-radius: 8px; background: #fff; }

/* Top-bar Me: a circle with the user's initials (lib/Layout.cfc) */
.topnav .links a.me-link { position: relative; display: inline-flex; align-items: center; padding: 0 0.2rem; background: none; }
.topnav .links a.me-link:hover { background: none; }
.me-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #0a5cb8; color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.topnav .links a.me-link:hover .me-avatar { background: #084a94; }
.topnav .links a.me-link.active .me-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a5cb8; }
.topnav .links a.me-link .nav-badge { position: absolute; top: -4px; right: -6px; margin: 0; background: #d93025; color: #fff; }

/* Me on phones: the circle at the right of the top bar, the menu's Me card, the More sheet row */
.me-mobile { display: none; }
@media (max-width: 820px) {
    .topnav a.me-mobile { display: inline-flex; position: relative; align-items: center; margin-left: auto; min-height: 44px; padding: 0 0.2rem; }
    .topnav a.me-mobile:hover { text-decoration: none; }
    .topnav a.me-mobile.active .me-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a5cb8; }
    .topnav a.me-mobile .nav-badge { position: absolute; top: 0; right: -6px; margin: 0; }
}

/* Prospecting (prospecting.cfm, preview): campaign tiles and worklist rows. */
.prospect-group { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: #4a5260; }
.prospect-tiles { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.prospect-tiles .tile { min-height: 5.6rem; }
.prospect-campaign { margin-top: 1.4rem; }
.prospect-campaign h2 { margin-top: 0; }
.prospect-future { border-left: 3px solid #f2d3a6; padding-left: 0.6rem; }
.prospect-row .item-sub.why { color: #1a1a1a; }
.prospect-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.prospect-actions button { min-height: 2.25rem; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px dashed #b9c3d0; background: #fff; color: #8a95a3; font-size: 0.85rem; cursor: not-allowed; }
.prospect-row .item-value { text-align: right; min-width: 7rem; }

/* Account menu: the avatar at the right of the top bar (lib/Layout.cfc accountMenu). Phones use the me-mobile link instead. */
.me-menu { position: relative; flex: none; }
.me-menu > summary { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; list-style: none; cursor: pointer; }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu > summary:hover .me-avatar { background: #084a94; }
.me-menu > summary.active .me-avatar, .me-menu[open] > summary .me-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a5cb8; }
.me-menu > summary .nav-badge { position: absolute; top: 2px; right: -6px; margin: 0; }
.me-menu-panel { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 9500; min-width: 15rem; padding: 0.4rem; background: #fff; border: 1px solid #e3e7ec; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; }
.me-menu-who { padding: 0.5rem 0.75rem 0.6rem; border-bottom: 1px solid #eef1f4; margin-bottom: 0.3rem; }
.me-menu-panel a { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0.45rem 0.75rem; border-radius: 10px; color: #1a1a1a; }
.me-menu-panel a:hover { background: #f1f4f8; text-decoration: none; }
.me-menu-panel a.active { background: #e8f0fb; color: #0a5cb8; }
.me-menu-panel a span small { display: block; color: #5f6368; font-size: 0.8rem; }
.me-menu-panel a .nav-badge { margin-left: auto; }
.me-menu-panel a.me-menu-logout { color: #b3261e; border-top: 1px solid #eef1f4; border-radius: 0 0 10px 10px; margin-top: 0.3rem; }
@media (max-width: 820px) {
    .me-menu { display: none; }
}

/* Section tabs right under a page title (Customers / ADF Leads / Volvo PINs), and Development's way back to Settings. */
.channel-tabs.section-tabs { margin: 0.4rem 0 1rem; }
.channel-tab .nav-badge { margin-left: 0.3rem; }
.channel-tab.active .nav-badge { background: #fff; color: #0a5cb8; }
.section-back { display: inline-block; margin-top: 0.6rem; color: #5f6368; font-size: 0.9rem; }

/* Phones: the composer is one row (paperclip, AI, the text, Send) until it's tapped into or has text;
   then the To / From lines show and the box grows with what's typed. The AI button is just its chip. */
@media (max-width: 820px) {
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) { flex-direction: row; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem 0.3rem 0.5rem; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .msg-line,
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .msg-subject { display: none; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .msg-reply-row { display: contents; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .msg-attach { order: 1; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) textarea { order: 2; flex: 1; min-width: 0; min-height: 2.4rem; height: 2.4rem; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .mention-wrap { order: 2; flex: 1; min-width: 0; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .msg-send-group { order: 3; margin-left: 0; }
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .primary-btn { min-width: 0; padding: 0.4rem 0.9rem; }
    .msg-send-group .suggest-btn { min-height: 40px; padding: 0.25rem 0.45rem; }
    .msg-send-group .suggest-label { display: none; }
    .msg-plan-title { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto !important; }
}

/* Phones: the conversation bar is one line. The picker carries the status ("(closed)"), the assignee
   is their initials in a circle (the picker is laid invisibly over it), then the ... menu. */
.assign-ini { display: none; }
@media (max-width: 820px) {
    .conv-bar { flex-wrap: nowrap; gap: 0.4rem; }
    .conv-pick { flex: 1 1 auto; min-width: 0; }
    .conv-pick select { min-width: 0; max-width: 100%; width: 100%; text-overflow: ellipsis; }
    .conv-ctl { flex: none; gap: 0.35rem; }
    .conv-ctl .pill.open, .conv-ctl .pill.closed, .conv-gap { display: none; }
    .conv-ctl .pill.rejected { font-size: 0.7rem; padding: 0.1rem 0.4rem; }
    .conv-assign label { position: relative; justify-content: center; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
    .conv-assign label > .ui-i { display: none; }
    .assign-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #0a5cb8; }
    .assign-ini.ai { color: #5b3aa8; }
    .conv-assign select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
    .conv-menu summary { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- native feel
   Taps answer at once (assets/nav-progress.js turns on :active for iOS), pages
   cross-fade with the top and tab bars held still, the top bar stays put with
   a blur, the current tab pops, and sections that load later show grey
   placeholders. "Reduce motion" on the device turns the movement off. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, select, input, textarea { touch-action: manipulation; }
a, button, summary { -webkit-touch-callout: none; }
.tile, .item-link, .card-btn, .primary-btn, .pill-link, .ss-btn, .suggest-btn, .conv-pick, .conv-assign label, .conv-menu summary,
.doc-action, .chip, .pill-link, .msg-plan > summary {
    transition: transform 0.12s ease, filter 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.tile:active, .card-btn:active, .primary-btn:active, .pill-link:active, .ss-btn:active, .suggest-btn:active { transform: scale(0.96); filter: brightness(0.94); }
.item-link:active { background-color: #eef2f7; }
.conv-pick:active, .conv-assign label:active, .conv-menu summary:active, .msg-plan > summary:active { transform: scale(0.92); }

/* Page to page on a computer: a quick cross-fade; the top bar doesn't move. (Phones have their own, with the menu pill.) */
@media (hover: hover) and (pointer: fine) {
    @view-transition { navigation: auto; }
    .topnav { view-transition-name: topnav; }
    ::view-transition-old(root) { animation: vt-fade-out 0.14s ease both; }
    ::view-transition-new(root) { animation: vt-fade-in 0.2s ease both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(6px); } }

/* The top bar stays at the top, see-through with a blur like iOS; a hairline once the page scrolls under it. */
.topnav { position: sticky; top: 0; z-index: 8000; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: transparent; transition: border-color 0.2s, box-shadow 0.2s; }
html.scrolled .topnav { border-bottom-color: #e3e7ec; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); }
@media (max-width: 820px) {
    .topnav { position: sticky; }
}
@keyframes tab-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Sections still loading (htmx hx-trigger="load"): grey shimmering lines under the "Loading..." text. */
div[hx-trigger="load"] > p.muted::after { content: ""; display: block; height: 4.6rem; margin-top: 0.6rem; border-radius: 12px; background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 50%, #eef1f5 75%); background-size: 200% 100%; animation: skel-shimmer 1.2s linear infinite; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    div[hx-trigger="load"] > p.muted::after { animation: none; }
    .tile:active, .card-btn:active, .primary-btn:active, .pill-link:active, .ss-btn:active, .suggest-btn:active,
    .conv-pick:active, .conv-assign label:active, .conv-menu summary:active, .msg-plan > summary:active { transform: none; }
}

/* Customer header: the salesperson chip and the Open in links on one row under the name, styled like
   the Messages conversation bar. Phones: the salesperson is initials in a circle and the Open in
   links sit in a ... menu, as in Messages. */
.pos-customer .avatar { margin-top: 0.1rem; }
/* The initials double as "send this customer to my phone" (customer.cfm push-me): no visible hint on purpose. */
.pos-customer { position: relative; }
button.avatar-push { border: 0; padding: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
button.avatar-push:active, button.avatar-push.is-sending { transform: scale(0.92); }
.push-me-note { position: absolute; left: 0; top: calc(100% + 0.3rem); z-index: 5; background: #1f7a3a; color: #fff; font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.push-me-note.bad { background: #b3261e; }
.pos-customer .sync-status { margin-top: 0.15rem; }
.pos-badges:not(:has(*)) { display: none; }
.pos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.55rem; }
/* Header C (customer.cfm): the next step under the name, then chips -- household, the car on the desk,
   the P / V / C records box (green linked, grey missing, red someone else's), red flags. */
.pos-next { display: flex; align-items: center; gap: 0.5rem; max-width: 100%; margin: 0.15rem 0 0.1rem; color: #1d2433; text-decoration: none; font-size: 0.95rem; min-height: 32px; }
.pos-next:hover .pos-next-t { text-decoration: underline; text-underline-offset: 3px; }
.pos-next-stage { flex: none; padding: 0.15rem 0.55rem; border-radius: 999px; background: #eef1f5; color: #44505c; font-size: 0.78rem; font-weight: 700; }
.pos-next-stage.t-hot { background: #fdecea; color: #b42318; }
.pos-next-stage.t-warm { background: #fff4dc; color: #9a6200; }
.pos-next-stage.t-cold { background: #e8f1fc; color: #0a5cb8; }
.pos-next-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-next-go { flex: none; color: #9aa4b0; font-size: 1.1rem; }
.hdr-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0 0.75rem; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; color: #1d2433; font: inherit; font-size: 0.88rem; white-space: nowrap; text-decoration: none; cursor: pointer; }
.hdr-chip:hover { background: #f6f8fb; }
.hdr-chip.hh { color: #6b46c1; background: #efe9fb; border-color: #d9cdf5; font-weight: 600; }
.hdr-chip.car { max-width: 20rem; }
.hdr-car-t { overflow: hidden; text-overflow: ellipsis; }
.hdr-chip.recs { gap: 3px; padding: 0 0.5rem; }
.hdr-chip.recs b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 0.72rem; }
.hdr-chip.recs .rs-y { background: #e7f6ec; color: #1a7f37; }
.hdr-chip.recs .rs-n { background: #eef1f5; color: #9aa4b0; }
.hdr-chip.recs .rs-x { background: #fdecea; color: #b42318; }
.hdr-chip.recs.is-bad { border-color: #f5c6c0; }
/* Account menu: Clear all notifications (lib/Layout.cfc accountMenu), styled as a menu row. */
.me-menu-clear { margin: 0; }
.me-menu-clear button { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 44px; padding: 0.45rem 0.75rem; border: 0; border-radius: 10px; background: none; font: inherit; color: #0a5cb8; text-align: left; cursor: pointer; }
.me-menu-clear button:hover { background: #f4f7fb; }
.hdr-chip.bad { color: #b42318; background: #fdecea; border-color: #f5c6c0; font-weight: 600; cursor: default; }
@media (max-width: 600px) { .hdr-chip.car:has(b) .hdr-car-t, .hdr-chip.car:has(b) .hdr-car-dot { display: none; } }
.pos-actions .sys-links { display: contents; }
.pos-actions .pill-link { min-height: 36px; padding: 0 0.8rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #0a5cb8; font-size: 0.88rem; font-weight: 500; }
.pos-actions .pill-link:hover { background: #f4f7fb; }
.pos-links-menu { display: none; }
.owner-chip { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; padding: 0 0.75rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #202124; font-size: 0.88rem; font-weight: 600; }
.owner-chip .ui-i { color: #5f6368; }
.owner-chip.none .owner-name { color: #5f6368; font-weight: 500; }
.owner-ini { display: none; }
.owner-why { padding: 0.05rem 0.4rem; border-radius: 999px; background: #eef2f7; color: #5f6368; font-size: 0.72rem; font-weight: 500; }
.owner-caret { color: #5f6368; font-size: 0.75rem; }
.owner-chip .owner-form { margin: 0; }
.owner-chip .owner-form select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.owner-chip.can-pick:active { transform: scale(0.96); }
@media (max-width: 820px) {
    .pos-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .pos-actions::-webkit-scrollbar { display: none; }
    .hdr-chip, .pos-actions .owner-chip { flex: none; white-space: nowrap; }
    .hdr-car-t { max-width: 8.5rem; }
    .pos-next { font-size: 0.9rem; }
    .pos-actions .sys-links { display: none; }
    .pos-links-menu { display: block; }
    .pos-links-menu .conv-menu-list { left: 0; right: auto; }
    .pos-links-menu summary { width: 38px; height: 38px; }
    .owner-chip { justify-content: center; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
    .owner-chip > .ui-i, .owner-chip .owner-name, .owner-chip .owner-why, .owner-chip .owner-caret { display: none; }
    .owner-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #0a5cb8; }
    .owner-chip.none .owner-ini { color: #5f6368; }
}

/* Sales Stage / Sales Plan: one slim bar (AI state and time, Refresh, ... menu), the stage and
   temperature, then the stages as a compact track -- a swipeable row on a phone. */
.ss-bar { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid #e3e7ec; }
.ss-bar-state { flex: 1; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.88rem; color: #5f6368; }
.ss-bar .ss-ai-state { font-size: 0.88rem; }
.ss-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #0a5cb8; font: inherit; font-size: 1.1rem; cursor: pointer; }
.ss-icon-btn:active { transform: scale(0.92); }
.ss-menu summary { width: 38px; height: 38px; }
.ss-head .ss-stage { font-size: 0.95rem; padding: 0.3rem 0.85rem; }
.ss-head .ss-temp { font-size: 0.85rem; }
.ss-goal { margin: 0.45rem 0 0.6rem; }
.ss-stepper { gap: 0.3rem; }
.ss-pill { min-height: 34px; padding: 0.2rem 0.75rem; font-size: 0.85rem; }
.ss-pill.side { border-style: dashed; color: #5f6368; }
.ss-pill.side.active { border-style: solid; background: #6b7480; border-color: #6b7480; color: #fff; }
.ss-step-gap { width: 1px; align-self: stretch; margin: 0.2rem 0.2rem; background: #d5dbe3; }
.ss-close { margin-top: 1rem; }
@media (max-width: 820px) {
    .ss-stepper { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem 0.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .ss-stepper::-webkit-scrollbar { display: none; }
    .ss-stepper .ss-pill { flex: none; scroll-snap-align: center; }
    .pane-head h2 { font-size: 1.15rem; }
}

/* Performance (performance.cfm, preview): month chips, stat cards, advisor / salesperson rows. */
.perf-section h2 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
.perf-section h2 svg { color: #4a5260; }
.perf-section h3 { margin: 1.2rem 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: #4a5260; }
.perf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; margin: 0 0 0.6rem; }
.perf-stat { border: 1px solid #e3e6ea; border-radius: 10px; padding: 0.7rem 0.85rem; background: #fafbfc; display: flex; flex-direction: column; gap: 0.15rem; }
.perf-stat .perf-label { font-size: 0.82rem; color: #5b6472; }
.perf-stat strong { font-size: 1.6rem; line-height: 1.15; }
.perf-delta { font-size: 0.8rem; color: #6b7480; }
.perf-delta.up { color: #0a7a2f; }
.perf-delta.down { color: #b3261e; }
.perf-row .item-value strong { font-size: 1.25rem; }
/* Filter chips that are on (Inventory's Make / Model / Year / Trim / Color as well as Store and
   Condition): solid blue with a check, so what's filtered is visible at a glance. */
a.active .pill.active-chip, .facet-chips a.active .pill { background: #0a5cb8; color: #fff; }
a.active .pill.active-chip .facet-n { color: inherit; opacity: 0.85; }
.chip-check { font-size: 0.8em; font-weight: 700; margin-right: 0.1rem; }
/* Inventory > "Showing": every filter that's on, each with an x; Clear all. */
.inv-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid #d6e4f7; border-radius: 12px; background: #f4f8fd; }
.inv-filterbar-label { margin-right: 0.15rem; color: #5f6368; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.inv-filterbar-all { color: #3d5270; font-size: 0.9rem; }
.crumb-link { display: inline-flex; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.crumb-link:hover { text-decoration: none; }
.crumb { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0 0.35rem 0 0.7rem; border-radius: 999px; background: #0a5cb8; color: #fff; font-size: 0.85rem; font-weight: 600; }
.crumb-x { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 1rem; line-height: 1; }
.crumb-link:hover .crumb-x { background: rgba(255, 255, 255, 0.4); }
.crumb-link:active .crumb { transform: scale(0.95); }
.crumb-clear { margin-left: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.perf-warn { border-left: 3px solid #f2d3a6; background: #fff8ec; padding: 0.5rem 0.7rem; border-radius: 0 6px 6px 0; margin: 0 0 0.7rem; }

/* Sales pipeline (pipeline.cfm, Beta): a funnel strip of counts per stage,
   then one prioritized list -- "Needs you now" first, then everyone else. */
.pipe-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.pipe-top p { margin: 0; }
.pipe-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.funnel { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.6rem; -webkit-overflow-scrolling: touch; }
.funnel-step { flex: 1 0 auto; min-width: 5.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; padding: 0.5rem 0.6rem; border-radius: 12px; background: #ece6f8; color: #3d2a73; position: relative; }
.funnel-step:hover { text-decoration: none; box-shadow: 0 1px 6px rgba(91, 58, 168, 0.18); }
.funnel-n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.funnel-label { font-size: 0.78rem; white-space: nowrap; }
.funnel-step.empty { background: #f3f5f8; color: #5f6368; }
.funnel-step.side { flex: 0 0 auto; min-width: 4.4rem; background: #f3f5f8; color: #5f6368; }
.funnel-step.active { background: #5b3aa8; color: #fff; }
.funnel-closing:not(.empty):not(.active), .funnel-sold:not(.empty):not(.active) { background: #dff0e6; color: #0a5c2a; }
.funnel-gap { flex: 0 0 0.4rem; }
.pipe-h { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0.45rem; font-size: 1.05rem; }
.pipe-h-n { min-width: 1.5rem; padding: 0 0.45rem; border-radius: 999px; background: #eef2f7; color: #44536a; font-size: 0.82rem; text-align: center; }
.pipe-h-n.attn { background: #fdecea; color: #b3261e; }
.pipe-list { display: flex; flex-direction: column; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; overflow: hidden; }
.pipe-row { display: grid; grid-template-columns: minmax(10rem, 1.1fr) 7.5rem minmax(0, 2.4fr) minmax(8rem, auto); align-items: center; gap: 0.3rem 0.8rem; padding: 0.6rem 0.8rem; min-height: 52px; color: inherit; border-top: 1px solid #eef0f3; }
.pipe-row:first-child { border-top: none; }
.pipe-row:hover { text-decoration: none; background: #f8f9fb; }
.pipe-row.needs { border-left: 4px solid #d93025; padding-left: calc(0.8rem - 4px); }
.pipe-row-who { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.pipe-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-row .ss-temp { font-size: 0.72rem; padding: 0.05rem 0.45rem; }
.pipe-row-stage .ss-stage { font-size: 0.78rem; padding: 0.12rem 0.55rem; font-weight: 600; }
.pipe-row-next { font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-row-meta { font-size: 0.78rem; text-align: right; white-space: nowrap; }
.pipe-row .pipe-flags { grid-column: 1 / -1; order: 5; }
.pipe-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pipe-flag { padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: #fdecea; color: #b3261e; }
.pipe-flag-stuck, .pipe-flag-overdue { background: #fff4e5; color: #a15c00; }
.pipe-flag-ai { background: #eef2f7; color: #44536a; }
.pipe-foot { margin-top: 1rem; }
@media (max-width: 760px) {
    .pipe-row { grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; }
    .pipe-row-stage { justify-self: end; }
    .pipe-row-next { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .pipe-row-meta { grid-column: 1 / -1; text-align: left; }
    .pipe-row .pipe-flags { order: 0; }
}

/* Ask (ask.cfm): the in-app assistant. Chats list | thread, question box pinned to the bottom. */
.ask-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ask-chats { position: sticky; top: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.ask-new { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.8rem; margin-bottom: 0.5rem; border-radius: 12px; background: #0a5cb8; color: #fff; font-weight: 600; }
.ask-new:hover { text-decoration: none; background: #084c99; }
.ask-chats-head { padding: 0.3rem 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.ask-chat { display: flex; flex-direction: column; gap: 0.1rem; min-height: 44px; justify-content: center; padding: 0.35rem 0.6rem; border-radius: 10px; color: #1a1a1a; }
.ask-chat:hover { background: #f1f4f8; text-decoration: none; }
.ask-chat.active { background: #e8f0fb; }
.ask-chat-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; line-height: 1.3; }
.ask-main { display: flex; flex-direction: column; min-height: calc(100vh - 7rem); max-width: 860px; }
.ask-thread { flex: 1; display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 1rem; }
.ask-msg { display: flex; gap: 0.6rem; }
.ask-q { justify-content: flex-end; }
.ask-q .bubble { max-width: 80%; font-size: 1rem; white-space: pre-wrap; }
.ask-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #efe9fb; color: #6b3fc6; }
.ask-answer { min-width: 0; flex: 1; padding: 0.15rem 0 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.ask-answer p { margin: 0 0 0.6rem; }
.ask-answer ul, .ask-answer ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.ask-answer li { margin: 0.2rem 0; }
.ask-answer h4 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
.ask-answer a { font-weight: 600; }
.ask-answer.failed { color: #b3261e; }
.ask-table-wrap { overflow-x: auto; margin: 0 0 0.6rem; -webkit-overflow-scrolling: touch; }
.ask-table { border-collapse: collapse; font-size: 0.9rem; min-width: 60%; }
.ask-table th, .ask-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #e3e7ec; text-align: left; vertical-align: top; }
.ask-table th { background: #f6f8fa; font-weight: 600; white-space: nowrap; }
.ask-steps { margin-top: 0.2rem; font-size: 0.8rem; color: #5f6368; }
.ask-steps > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; }
.ask-steps ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.ask-steps li.bad { color: #b3261e; }
.ask-steps-plain { font-size: 0.8rem; color: #5f6368; }
.ask-wait .ask-answer { display: flex; align-items: center; gap: 0.5rem; color: #5f6368; }
.ask-dots { display: inline-flex; gap: 4px; }
.ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: #6b3fc6; opacity: 0.3; animation: ask-dot 1.2s infinite ease-in-out; }
.ask-dots i:nth-child(2) { animation-delay: 0.15s; }
.ask-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.ask-empty { padding: 2rem 0 1rem; text-align: center; }
.ask-empty h1 { margin: 0.6rem 0 0.4rem; font-size: 1.5rem; }
.ask-empty p { max-width: 34rem; margin: 0 auto 1.2rem; }
.ask-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #efe9fb; color: #6b3fc6; }
.ask-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; text-align: left; }
.ask-suggestion { min-height: 52px; padding: 0.6rem 0.9rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; color: #1a1a1a; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.ask-suggestion:hover { background: #f6f8fa; }
.ask-suggestion:active { transform: scale(0.98); }
.ask-form { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.6rem 0 0.4rem; background: #fff; }
.ask-form textarea { flex: 1; box-sizing: border-box; min-height: 52px; max-height: 180px; padding: 0.8rem 1rem; border: 1px solid #cfd6de; border-radius: 26px; font: inherit; font-size: 1rem; line-height: 1.35; resize: none; background: #fff; color: #1a1a1a; }
.ask-form textarea:focus { outline: none; border-color: #0a5cb8; box-shadow: 0 0 0 3px rgba(10, 92, 184, 0.15); }
.ask-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #0a5cb8; color: #fff; cursor: pointer; }
.ask-form.is-busy .ask-send { opacity: 0.45; pointer-events: none; }
.ask-foot { padding: 0 0 0.6rem; text-align: center; }
.ask-inline-form { display: inline; }
@media (max-width: 820px) {
    .ask-layout { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    /* A short list that scrolls up and down, so a chat can still be swiped left to remove. */
    .ask-chats { position: static; max-height: 12.5rem; gap: 0.1rem; }
    .ask-new { flex: none; }
    .ask-chat-when { display: none; }
    .ask-main { min-height: calc(100dvh - 12rem); }
    .ask-form { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}
.as-tool-group { margin: 0.9rem 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #5f6368; }
/* Ask in the top bar: sparkle + a rainbow ring that turns slowly (a masked
   conic gradient on ::before, so the link itself keeps its normal colours).
   Still for Reduce Motion. Kept out of dark.css (tools/make-dark-css.py). */
@property --ask-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.topnav .links a.nav-ask { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 600; }
.topnav .links a.nav-ask .ui-i { color: #8a4dff; }
.topnav .links a.nav-ask.active { background: #f3edff; color: #4b1fa8; }
.ask-ring::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--ask-angle), #ff4d6d, #ffb347, #ffe14d, #4ddc8c, #3fa9f5, #8a4dff, #ff4d6d);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ask-ring-turn 4s linear infinite; }
@keyframes ask-ring-turn { to { --ask-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ask-ring::before { animation: none; } }
html[data-theme="dark"] .topnav .links a.nav-ask.active { background: #3a2f55; color: #e6dcff; }
html[data-theme="dark"] .topnav .links a.nav-ask .ui-i { color: #b994ff; }
/* Ask: proposed changes (Confirm / Dismiss), message drafts with Copy, per-answer model line. */
.ask-action { display: flex; align-items: center; gap: 0.7rem; margin: 0.6rem 0 0; padding: 0.7rem 0.8rem; border: 1px solid #d9cdf5; border-radius: 14px; background: #faf7ff; }
.ask-action-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #efe9fb; color: #6b3fc6; }
.ask-action-body { flex: 1; min-width: 0; }
.ask-action-title { font-weight: 600; }
.ask-action-detail { font-size: 0.88rem; color: #5f6368; overflow-wrap: anywhere; }
.ask-action-result { margin-top: 0.2rem; font-size: 0.88rem; color: #1e7e34; display: flex; align-items: center; gap: 0.3rem; }
.ask-action-result.bad { color: #b3261e; }
.ask-action-btns { flex: none; display: flex; gap: 0.4rem; }
.ask-confirm, .ask-dismiss { min-height: 44px; padding: 0 1rem; border-radius: 22px; font: inherit; font-weight: 600; cursor: pointer; }
.ask-confirm { border: 0; background: #0a5cb8; color: #fff; }
.ask-dismiss { border: 1px solid #cfd6de; background: #fff; color: #1a1a1a; }
.ask-confirm:disabled, .ask-dismiss:disabled { opacity: 0.5; }
.ask-action.is-applied { border-color: #b7dfc2; background: #f3fbf5; }
.ask-action.is-dismissed, .ask-action.is-failed { opacity: 0.75; background: #f6f8fa; border-color: #e3e7ec; }
.ask-draft { position: relative; margin: 0 0 0.6rem; padding: 0.7rem 0.9rem 0.7rem 0.9rem; border-left: 4px solid #8a4dff; border-radius: 10px; background: #f6f3ff; }
.ask-draft-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b3fc6; margin-bottom: 0.25rem; }
.ask-draft-text { white-space: normal; padding-right: 4.5rem; }
.ask-copy { position: absolute; top: 0.5rem; right: 0.5rem; min-height: 36px; padding: 0 0.8rem; border: 1px solid #d9cdf5; border-radius: 18px; background: #fff; color: #4b1fa8; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ask-steps-cost { margin-top: 0.3rem; }
.ask-backup { color: #b26a00; }
.ask-chat-row { border-radius: 10px; }
.ask-chats-hint { padding: 0.4rem 0.6rem; }
@media (max-width: 820px) {
    .ask-action { flex-wrap: wrap; }
    .ask-action-btns { width: 100%; justify-content: flex-end; }
    .ask-chats-hint { display: none; }
}
/* The corner Ask button and its panel (lib/Layout.cfc askDot, assets/ask-dot.js): iPad / computer only. */
.ask-dot-wrap { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 8000; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.ask-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #8a4dff; box-shadow: 0 6px 20px rgba(40, 20, 90, 0.25); cursor: pointer; }
.ask-dot.ask-ring::before { padding: 3px; }
.ask-dot:active { transform: scale(0.94); }
.ask-dot-wrap.is-open .ask-dot { background: #f3edff; }
.ask-dot-panel { display: flex; flex-direction: column; width: min(420px, calc(100vw - 2.4rem)); height: min(640px, calc(100vh - 7rem)); border: 1px solid #e3e7ec; border-radius: 18px; background: #fff; box-shadow: 0 12px 40px rgba(20, 20, 40, 0.25); overflow: hidden; }
.ask-dot-panel[hidden] { display: none; }
.ask-dot-head { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem; border-bottom: 1px solid #e3e7ec; }
.ask-dot-title { flex: 1; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.ask-dot-title .ui-i { color: #8a4dff; }
.ask-dot-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.6rem; border: 0; border-radius: 8px; background: none; color: #0a5cb8; font: inherit; font-size: 0.85rem; cursor: pointer; }
.ask-dot-btn:hover { background: #f1f4f8; text-decoration: none; }
.ask-dot-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: #1a1a1a; cursor: pointer; }
.ask-dot-x:hover { background: #f1f4f8; }
.ask-dot-frame { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 820px) { .ask-dot-wrap { display: none; } }
/* Ask inside that panel (ask.cfm?embed=1). */
body.page-none:has(.ask-embed) { max-width: none; margin: 0; padding: 0 0.7rem; }
.ask-embed { display: block; }
.ask-embed .ask-chats { display: none; }
.ask-embed .ask-main { min-height: calc(100vh - 0.5rem); max-width: none; }
.ask-embed .ask-empty { padding: 1rem 0 0.5rem; }
.ask-embed .ask-empty h1 { font-size: 1.15rem; }
.ask-embed .ask-empty p { font-size: 0.88rem; }
.ask-embed .ask-suggest { grid-template-columns: 1fr; gap: 0.4rem; }
.ask-embed .ask-suggestion { min-height: 44px; font-size: 0.88rem; }
.ask-embed .ask-q .bubble, .ask-embed .ask-answer { font-size: 0.93rem; }
.ask-embed .ask-action { flex-wrap: wrap; }
.ask-embed .ask-action-btns { width: 100%; justify-content: flex-end; }
.ask-embed .ask-form textarea { min-height: 46px; padding: 0.65rem 0.9rem; }
.ask-embed .ask-send { width: 46px; height: 46px; }
.ask-embed .ask-foot { font-size: 0.72rem; }
/* Prospecting > a customer's brief sheet (layout/prospect-brief.cfm, assets/prospect-brief.js). */
.prospect-row[data-brief] { cursor: pointer; }
.prospect-row.is-briefed { background: #f7f4fd; }
.prospect-actions .prospect-brief-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid #cdbff0; color: #44356e; cursor: pointer; font-weight: 600; }
.brief-sheet { width: min(720px, calc(100vw - 2rem)); }
.brief-nav { display: inline-flex; gap: 0.1rem; }
.brief-nav button:disabled { opacity: 0.3; }
.pb-who { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.pb-name { font-size: 1.2rem; font-weight: 700; }
.pb-open { align-self: center; text-decoration: none; }
.pb-ai { border-radius: 12px; padding: 0.7rem 0.9rem; background: #f7f4fd; color: #2c2346; }
.pb-ai p { margin: 0 0 0.5rem; }
.pb-ai h4 { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #5b3aa8; }
.pb-ai ul { margin: 0 0 0.3rem; padding-left: 1.2rem; }
.pb-ai li { margin: 0.15rem 0; }
.pb-headline { font-weight: 700; }
.pb-cautions li::marker { color: #b3261e; }
.pb-car { border: 1px solid #e3e7ec; border-radius: 12px; padding: 0.6rem 0.9rem; }
.pb-car h4 { margin: 0 0 0.3rem; }
.pb-car .pane-dl { display: grid; margin: 0.3rem 0; }
.pb-ros summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #0a5cb8; }
@media (max-width: 600px) { .pb-car .pane-dl { grid-template-columns: 6.5rem 1fr; } }
.pb-ai.htmx-request { opacity: 0.6; }

/* Pull to refresh (assets/pull-refresh.js, Home Screen app only). */
.pull-refresh { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 3.6rem); left: 50%; z-index: 60; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #fff; color: #8a929e; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transform: translate(-50%, -44px); opacity: 0; pointer-events: none; }
.pull-refresh.ready, .pull-refresh.spin { color: #0a5cb8; }
.pull-refresh.spin svg { animation: pull-spin 0.8s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pull-refresh.spin svg { animation: none; } }

/* Development > Speed */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.speed-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.speed-table th, .speed-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #e8ebef; text-align: left; white-space: nowrap; }
.speed-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.speed-fast { color: #1e7d45; } .speed-ok { color: #a86a00; } .speed-slow { color: #c62828; font-weight: 600; }

/* Touch screens: feel like an app, not a web page. No grey flash on a tap,
   no "copy / look up" pop-up from a long press on buttons, tabs and tiles,
   and text boxes at 16px so iPhone doesn't zoom in when one is tapped. */
@media (hover: none) and (pointer: coarse) {
    html { -webkit-tap-highlight-color: transparent; }
    .topnav, .tile, .home-small-tile, .pill, .channel-tab, .item-link, .card-btn, .primary-btn, .ss-btn, .chip-check, .crumb, button, summary {
        -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}


/* A section's "Name · Store" line under its title (customer.cfm paneContext): phones only,
   where the section opens full screen over the header with the name. */
.pane-titles { min-width: 0; }
.pane-context { display: none; }
@media (max-width: 820px) {
    .pane-context { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.1rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: #0a5cb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; cursor: pointer; }
    .pane-context-go { font-size: 1.1rem; line-height: 1; }
}
.pane-store { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: #0a5cb8; color: #fff; font-size: 0.78rem; font-weight: 700; }
.store-pill { font-size: 0.72rem; padding: 0.02rem 0.45rem; }
.item-link.focus { background: #eef4fd; box-shadow: inset 3px 0 0 #0a5cb8; }

/* A car open in Inventory on a computer (html.slide-open, assets/slide-strip.js):
   the page takes the whole window; on a wide one the filters, the cars and the
   car all show at once (no sideways scroll). Closing it goes back to the
   usual width. */
@media (min-width: 1000px) {
    html.slide-open body { max-width: none; }
}
@media (min-width: 1400px) {
    html.slide-open:not(.slide-full) .slide-strip.split.on { grid-template-columns: minmax(0, 1fr) minmax(30rem, 40%); }
}

/* ...and the top bar stays reachable above it: pinned to the window while a
   car is open (the page itself doesn't scroll then, so sticky can't hold it). */
html.slide-open:not(.slide-full) .topnav { position: fixed; top: 0; left: 0; right: 0; margin: 0; z-index: 8000; }
/* Phone: the search row stacks (.toolbar column), where flex-basis 18rem became 288px tall. */
@media (max-width: 700px) { .inv-search input[type=search] { flex: 0 0 auto; max-width: none; } }
.pill.store-guess { border: 1px dashed #7aa7dd; }

/* Inbox: who a conversation is assigned to in Podium (picker + row line). */
.inbox-assignee { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: #6b7280; }

/* Inventory RO detail: tire & brake life slot (assets/tire-brake.js draws into it). */
.tbl-slot { margin: 0.6rem 0 0.9rem; padding: 0.7rem 0.8rem; border: 0.5px solid #d5dae0; border-radius: 8px; }

/* Home Screen app (no browser bar): Back left of the store name (assets/app-nav.js). */
.app-back { display: none; }
html.standalone .app-back:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; width: 40px; height: 44px; margin: 0 -0.6rem 0 -0.4rem; border-radius: 10px; color: #0a5cb8; -webkit-tap-highlight-color: transparent; }
html.standalone .app-back:active { background: #f1f4f8; }
.edge-back { position: fixed; left: -44px; top: 0; z-index: 10001; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(20, 40, 80, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.edge-back::after { content: ""; position: absolute; left: 17px; top: 15px; width: 12px; height: 12px; border-left: 3px solid #8a95a3; border-bottom: 3px solid #8a95a3; transform: rotate(45deg); }
.edge-back.ready::after { border-color: #0a5cb8; }

/* A tapped tab / tile / menu entry while its page loads: icon faded, a spinner in its place. */
.tap-busy > svg, .tap-busy .tile-icon, .tap-busy .me-avatar, .tap-busy .working-av { opacity: 0.18; transition: opacity 0.12s; }
.tap-spin { position: absolute; box-sizing: border-box; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; pointer-events: none; animation: ss-spin 0.7s linear infinite; }

/* Inbox header: title + round buttons that open a pick list (messages.cfm). */
.inbox-head { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.2rem; }
.inbox-head h1 { flex: 1; min-width: 0; margin: 0; }
.pick-btn { display: inline-flex; align-items: center; gap: 0.35rem; height: 44px; padding: 0 0.9rem 0 1rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #0a5cb8; font: inherit; font-weight: 600; font-size: 0.95rem; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-btn b { min-width: 1.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #e6eef8; font-size: 0.85rem; text-align: center; }
.pick-circle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #c9d2dd; border-radius: 50%; background: #fff; color: #0a5cb8; font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-circle.on { background: #0a5cb8; border-color: #0a5cb8; color: #fff; }
.pick-btn:active, .pick-circle:active { transform: scale(0.94); }
.inbox-sub { margin: 0.1rem 0 0.6rem; }
.pick-sheet { width: min(420px, calc(100vw - 2rem)); }
.pick-list { display: flex; flex-direction: column; padding: 0.3rem 0 calc(0.5rem + env(safe-area-inset-bottom)); }
.pick-list a { display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.4rem 1.1rem; color: #1a1a1a; font-size: 1.02rem; }
.pick-list a:hover { background: #f1f4f8; text-decoration: none; }
.pick-list a > span:not(.pick-avatar):not(.inbox-n) { flex: 1; min-width: 0; }
.pick-list a[aria-current] { color: #0a5cb8; font-weight: 600; }
.pick-list a > svg { flex: none; color: #0a5cb8; }
.pick-list .inbox-n { color: #5f6368; font-size: 0.9rem; font-weight: 400; }
.pick-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e6eef8; color: #0a5cb8; font-size: 0.8rem; font-weight: 700; }
@media (max-width: 600px) { .pick-sheet { width: 100vw; } }
/* Me: "Notifications from" above the tabs, text over the store buttons (me.cfm). */
.task-card.me-stores { flex-direction: column; align-items: stretch; gap: 0.6rem; margin: 0.6rem 0 0.8rem; }
.me-stores .push-modes { justify-content: flex-start; }
/* Phones: each notification setting's text on top, its buttons on a row underneath. */
@media (max-width: 700px) {
    .task-card.push-pref { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .push-pref .push-modes { justify-content: flex-start; flex-wrap: wrap; }
}
/* Me > Notifications: who an alert is for (me.cfm). */
.me-for { display: inline-block; margin-right: 0.15rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #eceff3; color: #4a5260; font-size: 0.75rem; font-weight: 600; }
.me-for.is-mine { background: #0a5cb8; color: #fff; }

/* Customer notes: @mentions and attachments (assets/mentions.js, lib/Mentions.cfc). */
.mention-wrap { position: relative; }
.mention-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; padding: 0.3rem; border: 1px solid #d5dce5; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20, 30, 60, 0.18); }
.mention-pop button { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; padding: 0.3rem 0.6rem; border: 0; border-radius: 8px; background: transparent; color: #1a1a1a; font: inherit; text-align: left; cursor: pointer; }
.mention-pop button.on, .mention-pop button:hover { background: #eef3fa; }
/* Team posts in a customer's Messages (lib/TeamPosts.cfc): staff only, never sent. Yellow, centered, apart from the customer's and our texts. */
.msg-reply .mention-pop { top: auto; bottom: 100%; margin: 0 0 4px; }
.bubble.team { align-self: center; max-width: 88%; border-radius: 12px; background: #fff8dc; border: 1px solid #f0d97a; color: #3d3200; }
.team-tag { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: #8a6d00; text-transform: uppercase; }
.team-at { color: #6b4f00; }
.bubble.team.team-ai { background: #f6f3fe; border-color: #d6cbf5; color: #202124; }
.bubble.team.team-ai .team-tag { color: #5b3fb5; text-transform: none; letter-spacing: 0; }
.team-ai .bubble-text p, .team-ai .bubble-text ul, .team-ai .bubble-text ol { margin: 0 0 0.4rem; }
.team-ai .bubble-text ul, .team-ai .bubble-text ol { padding-left: 1.2rem; }
.bubble.team .attach-chips { margin-top: 0.4rem; }
.team-remove { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.msg-reply.team-mode .msg-box { border-color: #e0b000; background: #fffbea; box-shadow: 0 0 0 1px #e0b000; }
.msg-reply.team-mode .msg-line, .msg-reply.team-mode .msg-subject, .msg-reply.team-mode .msg-attach, .msg-reply.team-mode .msg-credit, .msg-reply.team-mode .suggest-btn { display: none; }
.msg-reply.team-only .msg-line { display: flex; }
.msg-reply.team-mode .primary-btn { background: #8a6d00; border-color: #8a6d00; }
.msg-reply.team-mode::before { content: "To the team \00b7  only staff see this, nothing goes to the customer"; font-size: 0.75rem; font-weight: 600; color: #8a6d00; }
.msg-reply.team-only::before { content: none; }
.team-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.team-line-label { font-weight: 700; color: #5f6368; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; }
.team-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.5rem; border-radius: 13px; background: #eef1f5; font-weight: 600; font-size: 0.78rem; }
.team-chip.lead { background: #e3edfa; color: #0a4a94; }
.team-watch { min-height: 30px; padding: 0 0.6rem; border: 1px solid #c9d2dd; border-radius: 15px; background: #fff; color: #0a5cb8; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.team-line-hint { margin-left: auto; font-size: 0.72rem; }
@media (max-width: 820px) { .team-line-hint, .team-chip-name { display: none; } }
.mention { padding: 0 0.2rem; border-radius: 4px; background: #e6eef8; color: #0a5cb8; font-weight: 600; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.attach-chips:empty { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.4rem 0.6rem; border: 1px solid #d5dce5; border-radius: 10px; background: #fff; color: #1a1a1a; }
a.attach-chip:hover { text-decoration: none; border-color: #0a5cb8; }
.attach-chip > svg { flex: none; color: #0a5cb8; }
.attach-chip span, .attach-hit span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.attach-chip small, .attach-hit small { color: #5f6368; font-size: 0.78rem; }
.attach-remove { border: 0; background: transparent; color: #5f6368; font-size: 1.2rem; cursor: pointer; padding: 0 0.2rem; }
.attach-find { margin: 0.4rem 0; }
.attach-find input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.4rem 0.7rem; border: 1px solid #c9d2dd; border-radius: 10px; font: inherit; font-size: 16px; }
.attach-results { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.attach-hit { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.35rem 0.6rem; border: 0; border-radius: 8px; background: #f4f6f9; color: #1a1a1a; font: inherit; text-align: left; cursor: pointer; }
.attach-hit:hover { background: #eef3fa; }
.attach-kind { flex: none; padding: 0.05rem 0.45rem; border-radius: 999px; background: #e6eef8; color: #0a5cb8; font-size: 0.72rem; font-weight: 600; }
.note-item.is-focus { box-shadow: 0 0 0 2px #0a5cb8; border-radius: 10px; }
.ro.is-focus, .doc-item.is-focus { box-shadow: 0 0 0 2px #0a5cb8; border-radius: 10px; }

/* No signal (assets/app-nav.js): a banner above the tab bar with Try again. */
.net-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 76px);z-index:1200;
  display:flex;align-items:center;gap:.6rem;max-width:calc(100vw - 32px);padding:.55rem .6rem .55rem 1rem;border-radius:14px;
  background:#1f2933;color:#fff;font-size:.92rem;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.net-banner[hidden]{display:none}
.net-banner button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:.4rem .8rem;background:#0a5cb8;color:#fff;cursor:pointer}
.net-banner .net-x{background:transparent;padding:.3rem .5rem;font-size:1.2rem;line-height:1;color:#cbd2d9}

/* Set up this phone (me.cfm section=setup): numbered steps that tick when done. */
.setup{max-width:560px;margin:0 auto}
.setup h1{margin-bottom:.25rem}
.setup-steps{list-style:none;margin:1rem 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.setup-step{display:flex;gap:.9rem;align-items:flex-start;padding:1rem;border:1px solid #e3e7ec;border-radius:16px;background:#fff}
.setup-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;background:#e7f0fb;color:#0a5cb8}
.setup-num .ui-i{display:none}
.setup-step.is-done .setup-num{background:#16a34a;color:#fff}
.setup-step.is-done .setup-num span{display:none}
.setup-step.is-done .setup-num .ui-i{display:block}
.setup-body{flex:1;min-width:0}
.setup-body h2{font-size:1.05rem;margin:.2rem 0 .35rem}
.setup-body p{margin:.25rem 0 .5rem}
.setup-icon{display:inline-flex;vertical-align:-3px;color:#0a5cb8}
.setup-body .primary-btn{display:inline-flex;align-items:center;gap:.4rem}
.setup-body [hidden]{display:none}
.setup-go{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.25rem 0 .5rem}
.setup-go .primary-btn{padding:.8rem 1.4rem;font-size:1.02rem;text-decoration:none}

/* Shown only in the installed Home Screen app, or only outside it (html.standalone: lib/Layout.cfc). */
html:not(.standalone) .standalone-only{display:none}
html.standalone .browser-only{display:none}
/* Home on a phone's browser: add to Home Screen. */
.install-hint{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.6rem .5rem .6rem .8rem;border:1px solid #cfe0f5;border-radius:14px;background:#f2f7fd;font-size:.92rem}
.install-hint[hidden]{display:none}
.install-hint .tile-icon{color:#0a5cb8;display:inline-flex}
.install-hint .net-x{margin-left:auto;border:0;background:transparent;font-size:1.3rem;line-height:1;padding:.2rem .5rem;color:#5b6573;cursor:pointer}
/* Home > Catch up (layout/catch-up.cfm): first on a phone, after the tiles elsewhere. */
.home-stack{display:flex;flex-direction:column}
.home-catchup{margin:0 0 1.25rem}
@media (max-width:700px){.home-catchup{order:-1}}
.catchup{border:1px solid #e3e7ec;border-radius:16px;background:#fff;padding:1rem}
.catchup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.catchup-head h2{margin:0 0 .15rem;font-size:1.15rem}
.catchup-done{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.catchup-counts{display:flex;flex-wrap:wrap;gap:.35rem;margin:.75rem 0 .25rem}
.catchup-replies{margin:.35rem 0 0}
.catchup-ai{margin:.75rem 0;padding:.7rem .85rem;border-radius:12px;background:#f6f3fd;border:1px solid #e6def8}
.catchup-ai ul{margin:.45rem 0 0;padding-left:1.1rem}
.catchup-ai li{margin:.3rem 0;line-height:1.4}
/* The summary holds its place while it's written (a box the usual three bullets fill, with
   placeholder lines), then fades in; a longer one grows the box downward. */
.catchup-ai{min-height:9.5rem;box-sizing:border-box}
.catchup-ai.is-note{min-height:0}
.catchup-ai:not(.is-loading){animation:cu-fade .45s ease-out}
.catchup-ai.is-loading .cu-skel{display:block;height:.8rem;margin:.65rem 0 0;border-radius:6px;background:linear-gradient(90deg,#ebe5f8 0%,#f7f4fd 50%,#ebe5f8 100%);background-size:200% 100%;animation:cu-shimmer 1.4s ease-in-out infinite}
@keyframes cu-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cu-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.catchup-ai:not(.is-loading),.catchup-ai.is-loading .cu-skel{animation:none}}
.catchup-ref{white-space:nowrap;font-weight:600;text-decoration:none}
.catchup-list{margin-top:.5rem}
.catchup-more summary{cursor:pointer;color:#0a5cb8;font-weight:600;padding:.5rem 0}
.catchup-empty{margin:.6rem 0 0}
.pill.cu-lead{background:#f1ebfb;color:#6b3fb0}
.pick-note { margin: 0; padding: 0 1.1rem calc(0.9rem + env(safe-area-inset-bottom)); }
.catchup-tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Suggested replies: the direction box and the deal's kept context (layout/sales-stage.cfm action=suggest). */
.sheet-direction { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0.75rem; border: 1px solid #e6def8; border-radius: 12px; background: #f6f3fd; }
.sheet-direction label[for] { font-weight: 600; font-size: 0.95rem; }
.sheet-direction textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 0.5rem 0.6rem; border: 1px solid #c9d2dd; border-radius: 10px; resize: vertical; background: #fff; }
.sheet-direction-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.sheet-direction-row label { display: inline-flex; align-items: center; gap: 0.35rem; }
.msg-name-check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; padding: 0.55rem 0.7rem; border: 1px solid #f0c36d; border-radius: 10px; background: #fff7e3; color: #6b4a00; font-size: 0.9rem; }
.msg-name-check span { flex: 1 1 14rem; }
/* One line, scrolled sideways (finger or trackpad). */
.steer-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 2px 0 4px; }
.steer-chips > .muted { flex: 0 0 auto; }
.steer-chip { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.steer-chip span { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
.steer-chip.is-ai span { border-style: dashed; }
.steer-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.steer-chip span { padding: 0.3rem 0.7rem; border: 1px solid #c9bfe6; border-radius: 999px; background: #fff; font-size: 0.85rem; color: #4a3d73; user-select: none; }
.steer-chip input:checked + span { background: #5b3fc4; border-color: #5b3fc4; color: #fff; }
.steer-chip input:focus-visible + span { outline: 2px solid #5b3fc4; outline-offset: 2px; }
.sheet-direction.is-busy { opacity: 0.6; pointer-events: none; }
.sheet-direction.is-busy .sheet-redraft::after { content: "ing..."; }
.sheet-context { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0 0 0.75rem; }
.sheet-context > .muted { flex-basis: 100%; }
.ctx-chip { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.25rem 0.3rem 0.25rem 0.65rem; border-radius: 999px; background: #eef2f7; color: #2b3645; font-size: 0.85rem; }
.ctx-chip button { border: 0; background: transparent; font-size: 1.05rem; line-height: 1; padding: 0 0.35rem; color: #5b6573; cursor: pointer; }
.sheet-reply-subject { margin: 0.15rem 0 0.3rem; font-weight: 600; }
/* Phone pane header: the customer's salesperson beside the store (customer.cfm paneContext). */
.pane-context-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pane-rep { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; padding: 0.05rem 0.5rem 0.05rem 0.35rem; border-radius: 999px; background: #eef2f7; color: #44536a; font-size: 0.8rem; font-weight: 600; }
.pill.cu-rep { display: inline-flex; align-items: center; gap: 0.2rem; background: #e7f0fb; color: #0a5cb8; }
.pill.cu-norep { background: #fff4e5; color: #a15c00; }

/* Customers: search row (box + button, salesperson chip, Add) and Show / Sort pick buttons. */
.cust-search { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
.cust-search-box { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; height: 44px; padding: 0 0.25rem 0 0.9rem; }
.cust-search-box:focus-within { border-color: #0a5cb8; box-shadow: 0 0 0 3px rgba(10, 92, 184, 0.15); }
.cust-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; padding: 0; height: 100%; }
.cust-search-box input::-webkit-search-cancel-button { display: none; }
.cust-search-go { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #0a5cb8; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cust-search .add-cust-btn { flex: none; height: 44px; display: inline-flex; align-items: center; padding: 0 0.9rem; border-radius: 999px; white-space: nowrap; }
.cust-clear { margin: -0.4rem 0 0.6rem; }
.cust-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.25rem 0 0.75rem; }
.pick-btn.on { background: #0a5cb8; border-color: #0a5cb8; color: #fff; }
.pick-btn.on b { background: rgba(255, 255, 255, 0.25); }
@media (max-width: 700px) {
    .hide-phone { display: none; }
    .cust-stats { display: flex; flex-wrap: nowrap; gap: 1.1rem; overflow-x: auto; margin: 0 0 0.75rem; padding-bottom: 0.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .cust-stats div { flex: none; }
    .cust-stats div strong { font-size: 1.05rem; }
    .cust-stats .muted { font-size: 0.78rem; white-space: nowrap; }
}
@media (max-width: 700px) {
    .cust-head { flex-wrap: nowrap; }
    .cust-head .pick-btn { height: 40px; padding: 0 0.7rem 0 0.8rem; font-size: 0.9rem; min-width: 0; }
    .cust-row { align-items: flex-start; gap: 0.7rem; }
    .cust-row .avatar { margin-top: 0.15rem; }
    .cust-row .item-value { font-size: 0.82rem; text-align: right; flex: none; }
    .cust-row .item-value .muted { font-size: 0.75rem; }
    .cust-row .item-sub.why, .cust-row .item-sub.change { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.related-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.related-row > .item { flex: 1; min-width: 14rem; }
.related-merge { margin: 0; }
/* Messages: a newer message arrived while typing (assets/msg-reply.js), and the Send guard (customer.cfm). */
.msg-live { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.5rem 0; padding: 0.55rem 0.6rem 0.55rem 0.85rem; border-radius: 12px; background: #fff4e5; border: 1px solid #f3d19e; color: #7a4a00; font-weight: 600; font-size: 0.92rem; }
.msg-live button { border: 0; border-radius: 9px; padding: 0.4rem 0.8rem; background: #a15c00; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.msg-collision { margin: 0.5rem 0; padding: 0.65rem 0.85rem; border-radius: 12px; background: #fff4e5; border: 1px solid #f3d19e; color: #5c3a00; font-size: 0.92rem; }
.msg-collision ul { margin: 0.4rem 0; padding-left: 1.1rem; }
.msg-collision li { margin: 0.2rem 0; }
.msg-typing { margin: 0.4rem 0; padding: 0.35rem 0.75rem; border-radius: 999px; display: inline-block; background: #eef2f7; color: #44536a; font-size: 0.85rem; font-weight: 600; }
.pill.cu-pod { background: #fdecea; color: #b3261e; }
.pane-sub { font-size: 0.95rem; margin: 0.25rem 0 0.4rem; color: #44536a; }
.owner-more { display: block; margin: 0.3rem 0 0 0.2rem; font-size: 0.82rem; }
/* Inventory > a car: swipeable photo gallery (assets/gallery.js). */
.inv-gallery { position: relative; margin-bottom: 0.7rem; border-radius: 12px; overflow: hidden; background: #e8edf3; }
.inv-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.inv-gallery-track::-webkit-scrollbar { display: none; }
.inv-gallery-img { flex: 0 0 100%; width: 100%; height: 18rem; object-fit: cover; scroll-snap-align: center; }
html.slide-full .inv-gallery-img { height: min(60vh, 34rem); object-fit: contain; background: #111; }
.inv-gallery-count { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.8rem; font-weight: 600; }
.inv-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #1a1a1a; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.inv-gallery-nav.prev { left: 0.5rem; }
.inv-gallery-nav.next { right: 0.5rem; }
@media (hover: none) { .inv-gallery-nav { display: none; } }

/* Settings > AI rules */
.ai-rules-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.ai-rules-form label { display: block; }
.ai-rules-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 0.3rem; }
.ai-rules-form input[type=checkbox] { margin-right: 0.35rem; }

/* Sales plan > Deal progress (layout/sales-stage.cfm): one folded line, a compact list when open */
.ss-road-wrap { margin: 0.6rem 0 0.4rem; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; }
.ss-road-sum { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.35rem 0.7rem; cursor: pointer; list-style: none; }
.ss-road-sum::-webkit-details-marker { display: none; }
.ss-road-sum::after { content: "\25BE"; margin-left: auto; color: #5f6368; font-size: 0.75rem; }
.ss-road-wrap[open] .ss-road-sum::after { content: "\25B4"; }
.ss-road-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5f6368; white-space: nowrap; }
.ss-road-bar { display: inline-flex; gap: 3px; flex: none; }
.ss-road-bar i { width: 14px; height: 6px; border-radius: 3px; background: #dfe4ea; }
.ss-road-bar i.is-have { background: #0a7a2f; }
.ss-road-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: #3c4043; }
.ss-road { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 0.8rem; padding: 0 0.7rem 0.5rem; border-top: 1px solid #eef1f4; }
.ss-road-piece { display: flex; align-items: center; gap: 0.55rem; min-height: 40px; padding: 0.3rem 0; border: 0; border-bottom: 1px solid #f1f3f5; background: none; color: inherit; font: inherit; font-size: 0.88rem; text-align: left; }
.ss-road-piece .ss-check { flex: none; width: 1.15rem; height: 1.15rem; border-width: 1.5px; border-radius: 4px; font-size: 0.75rem; }
.ss-road-piece.is-have .ss-check { background: #0a7a2f; border-color: #0a7a2f; }
.ss-road-text { min-width: 0; display: flex; align-items: baseline; gap: 0.45rem; }
.ss-road-text strong { flex: none; font-weight: 600; }
.ss-road-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: #5b6573; }

/* Customer header: Podium / CDK / AI checks folded into one row (customer.cfm .pos-sync) */
.pos-sync { margin-top: 0.35rem; }
.pos-sync > summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 32px; color: #5f6368; font-size: 0.8rem; cursor: pointer; list-style: none; }
.pos-sync > summary::-webkit-details-marker { display: none; }
.pos-sync > summary::after { content: "\25BE"; font-size: 0.7rem; }
.pos-sync[open] > summary::after { content: "\25B4"; }
.pos-sync-body { display: grid; gap: 0.25rem; padding: 0.15rem 0 0.3rem 0.6rem; border-left: 2px solid #e3e7ec; }
.pos-sync-body .sync-status { margin-top: 0; }
#psug-slot:empty { display: none; }
@media (max-width: 820px) {
    /* Avatar and name on one line; everything else uses the full width. */
    .pos-customer { display: grid; grid-template-columns: auto 1fr; gap: 0 0.7rem; align-items: center; }
    .pos-customer .avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; margin-top: 0; }
    .pos-customer-main { display: contents; }
    .pos-customer-main > * { grid-column: 1 / -1; }
    .pos-customer-main > .pos-name-row { grid-column: 2; }
    .pos-name-row h1 { line-height: 1.15; }
    /* Housekeeping last, under the salesperson and pinned notes. */
    .pos-customer-main > .pos-sync { order: 1; }
    .pos-customer-main > .pos-name-row + .muted { margin-top: 0.5rem; }
    /* The salesperson chip keeps their name (the circle with an initial was hard to read). */
    .owner-chip { width: auto; height: 38px; padding: 0 0.75rem; border-radius: 999px; }
    .owner-chip > .ui-i, .owner-chip .owner-name, .owner-chip .owner-caret { display: inline-flex; }
    .owner-chip .owner-why, .owner-ini { display: none; }
}

/* Messages: Credit app menu (customer.cfm creditLinkBtn): our credit app or the website's, opening upward */
.msg-credit { white-space: nowrap; font-size: 0.9rem; }
.conv-menu.msg-credit-menu > summary { width: auto; height: auto; min-height: 36px; padding: 0 0.4rem; border: none; background: none; color: #0a5cb8; font-weight: 400; letter-spacing: normal; }
.msg-credit-menu .conv-menu-list { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 14rem; white-space: normal; }
.msg-credit-menu .conv-menu-list button { justify-content: space-between; }
.msg-credit-menu .conv-menu-list button:disabled { color: #80868b; cursor: default; background: none; }
.msg-credit-menu .conv-menu-list p { margin: 0 0.9rem 0.6rem; }

/* Dictation mic (assets/dictate.js): in a text box's bottom-right corner, or beside the paperclip in Messages */
.dictate-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -2.5rem 0.25rem 0.25rem auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5f6368; cursor: pointer; }
.dictate-btn:hover { background: #eef2f7; color: #202124; }
.dictate-btn.in-row { margin: 0; }
.dictate-btn.is-on { background: #d93025; color: #fff; animation: dictate-pulse 1.4s ease-in-out infinite; }
@keyframes dictate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(217, 48, 37, 0); } }
@media (max-width: 820px) {
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]))):has(textarea:placeholder-shown) .dictate-btn.in-row { order: 1; }
    /* The one-line box keeps room to type: Credit app shows once the box opens. */
    .msg-box:not(:has(textarea:focus, select:focus, .msg-subject:focus, .msg-preview:not([hidden]), .msg-credit-menu[open])):has(textarea:placeholder-shown) .msg-credit { display: none; }
}

/* Catch up: Refresh spins while the list and AI summary reload (layout/catch-up.cfm) */
.catchup-refresh { color: #5f6368; font-weight: 400; }
.catchup-refresh.htmx-request svg { animation: pull-spin 0.8s linear infinite; }
.topnav .links a.nav-ask .nav-beta { margin-left: 0.15rem; padding: 0 0.35rem; font-size: 0.62rem; line-height: 1.5; }

/* Team messages (team.cfm): users writing to each other. A list beside the open conversation; on a phone one or the other. */
.tc-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.tc-list { display: flex; flex-direction: column; gap: 0.35rem; }
.tc-list-head h1 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.tc-new summary { list-style: none; cursor: pointer; }
.tc-new summary::-webkit-details-marker { display: none; }
.tc-new-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0.6rem; padding: 0.7rem; border: 1px solid #d5dce5; border-radius: 12px; background: #fff; }
.tc-new-form textarea { width: 100%; box-sizing: border-box; padding: 0.4rem; border: 1px solid #d5dce5; border-radius: 8px; font: inherit; font-size: 16px; resize: vertical; }
.tc-pick { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0; padding: 0; border: 0; }
.tc-person { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; }
.tc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: 12px; color: inherit; text-decoration: none; }
.tc-row:hover { background: #eef3fa; }
.tc-row.active { background: #e3edfa; }
.tc-row-text { display: flex; flex-direction: column; min-width: 0; }
.tc-row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-row.unread .tc-row-text strong { font-weight: 800; }
.tc-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.tc-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 0.65rem; background: #d93025; color: #fff; font-size: 0.72rem; font-weight: 700; margin-left: auto; }
.tc-note { margin-top: 0.6rem; }
.tc-thread { display: flex; flex-direction: column; gap: 0.6rem; height: calc(100dvh - 7rem); min-height: 22rem; }
.tc-thread.tc-empty { align-items: center; justify-content: center; border: 1px dashed #d5dce5; border-radius: 14px; }
.tc-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; }
.tc-back { display: none; color: #0a5cb8; }
.tc-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; border: 1px solid #e3e7ec; border-radius: 14px; background: #f8fafc; }
.tc-chat .bubble.team-ai { align-self: flex-start; }
@media (max-width: 820px) {
    .tc-layout { grid-template-columns: 1fr; }
    .tc-layout.tc-open .tc-list, .tc-layout:not(.tc-open) .tc-thread { display: none; }
    .tc-back { display: inline-flex; }
    .tc-thread { height: calc(100dvh - 6rem); }
}
.tc-hint { flex: 1; min-width: 0; }
@media (max-width: 820px) { .msg-box:has(textarea:placeholder-shown):not(:has(textarea:focus)) .tc-hint { display: none; } }

/* Sign in on your phone (phone-signin.cfm). */
.ps-page { max-width: 46rem; }
.ps-pass { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0 0.4rem; }
.ps-way { padding: 1rem; border: 1px solid #d5dce5; border-radius: 14px; background: #fff; }
.ps-way h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.ps-qr { display: inline-block; padding: 10px; background: #fff; border-radius: 8px; }
.ps-code { font-size: 2.6rem; font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; margin: 0.6rem 0; }
.ps-expired { opacity: 0.35; pointer-events: none; }
.tc-swipe { border-radius: 12px; }
.tc-swipe .tc-row { background: #fff; }
.tc-swipe .tc-row.active { background: #e3edfa; }

/* Desk sheet on phones and narrow iPads: the payment summary sits below the form (it isn't a pop-over pane here),
   fees fold to one line, and each fee or product is one row (name, amount, remove) with its ticks small underneath. */
.desk-fold > summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.desk-fold > summary::-webkit-details-marker { display: none; }
.desk-fold > summary h3 { margin: 0; }
.desk-fold-caret { margin-left: auto; color: #6b7686; transition: transform 0.15s; }
.desk-fold[open] .desk-fold-caret { transform: rotate(180deg); }
@media (max-width: 820px) {
    .desk .desk-pane:not(.open) { display: block; position: static; max-height: none; overflow: visible; margin-top: 0.4rem; order: 2; grid-row: auto; }
    .desk > .pos-left { order: 1; grid-row: auto; }
}
@media (max-width: 600px) {
    .desk-fee, .desk-inc { grid-template-columns: minmax(0, 1fr) 6.8rem 44px; gap: 0 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid #eef0f3; }
    .desk-fee > .link-btn, .desk-fee > .desk-remove { grid-column: 3; grid-row: 1; }
    .desk-fee .desk-check { grid-row: 2; min-height: 34px; font-size: 0.8rem; color: #5f6368; }
    .desk-fee .desk-check input { width: 1rem; height: 1rem; }
    .desk-fee .desk-check + .desk-check { grid-column: 2 / span 2; }
    .desk-inc .desk-input { grid-column: 2; grid-row: 1; }
    .desk-inc .desk-prog { grid-column: 1; grid-row: 2; max-width: none; min-height: 36px; font-size: 14px; }
    .desk-inc .desk-check { grid-column: 2 / span 2; }
    .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .desk-quote-ops { gap: 0.3rem; }
    .desk-quote-ops button.card-btn { padding: 0.3rem 0.6rem; }
}

/* Deal list (deal-list.cfm): Ask's "full list" of a deal search */
.dl-page { max-width: 1200px; }
.dl-switch { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.dl-group { font-size: 1.05rem; margin: 1.2rem 0 0.3rem; }
.dl-table td { vertical-align: top; }

/* Desk on phones: the payment pinned above the tab bar (desk.cfm .desk-paybar); hidden elsewhere. */
.desk-paybar { display: none; }
@media (max-width: 600px) {
    .desk-paybar { display: flex; align-items: center; gap: 0.7rem; position: fixed; left: 0.5rem; right: 0.5rem; bottom: calc(4.1rem + env(safe-area-inset-bottom)); z-index: 8999;
        padding: 0.55rem 0.9rem; min-height: 48px; border: 0; border-radius: 12px; background: #0a5cb8; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    .desk-paybar .pb-back, html.desk-sumsheet .desk-paybar .pb-more { display: none; }
    html.desk-sumsheet .desk-paybar .pb-back { display: inline; }
    /* The summary as a sheet over the worksheet (deskSumSheet): from the top of the screen down to the
       bar, scrolling on its own; the worksheet stays put underneath. */
    html.desk-sumsheet .desk .desk-pane:not(.open) { position: fixed; left: 0.5rem; right: 0.5rem; top: calc(0.5rem + env(safe-area-inset-top)); bottom: calc(4.1rem + 3.6rem + env(safe-area-inset-bottom));
        z-index: 8998; margin: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; border-radius: 16px;
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.35); }
    .desk-paybar:hover { text-decoration: none; }
    .desk-paybar strong { font-size: 1.15rem; }
    .desk-paybar small { font-weight: 500; opacity: 0.85; }
    .desk-paybar .muted { color: rgba(255, 255, 255, 0.85); }
    .desk-paybar-go { margin-left: auto; font-size: 0.85rem; opacity: 0.9; }
    .desk { padding-bottom: 4.2rem; }
}

/* Settings > AI assistant > Ask memory */
.as-mem-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; max-width: 640px; }
.as-mem-row { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.2rem 0.6rem; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; }
.as-mem-text { flex: 1; min-width: 0; }
.as-mem-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.as-mem-add input[type=text] { width: 9rem; }
.as-mem-note { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; border: 1px solid #e3e7ec; border-radius: 10px; background: #fff; }
.as-mem-note textarea { width: 100%; box-sizing: border-box; font: inherit; }
.as-mem-ops { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.as-mem-ops .muted { margin-right: auto; }
.catchup-ref-rep { vertical-align: 0.1em; font-size: 0.8rem; white-space: nowrap; }

/* Customer header: another record that may be the same person (customer.cfm, CustomerStore.related) */
.same-person-note { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.5rem 0 0.2rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff4e5; color: #7a4b00; font-size: 0.9rem; text-decoration: none; }
.same-person-note:hover { text-decoration: none; background: #ffecd2; }
.same-person-note svg { flex: none; margin-top: 0.15rem; }
.sys-podium-menu { flex: none; position: relative; }
.conv-menu.sys-podium-menu > summary { width: auto; height: auto; min-height: 36px; padding: 0 0.8rem; gap: 0.3rem; white-space: nowrap; letter-spacing: normal;
    font-size: 0.88rem; font-weight: 500; color: #0a5cb8; }
.sys-podium-menu .conv-menu-list { min-width: 17rem; left: 0; right: auto; }
.sys-podium-menu .conv-menu-list a { white-space: normal; }
.sys-podium-menu > summary::-webkit-details-marker { display: none; }
.sys-podium-menu .conv-menu-list p { margin: 0.2rem 0.6rem 0.3rem; }

/* A sale won (assets/celebrate.js): a bright moving rainbow fills the row or the deal, with
   fireworks and confetti drawn on a canvas inside it (clipped to the box), once, then gone. */
.pill.cu-sold { background: #fff3c4; color: #7a5200; font-weight: 600; }
.celebrate { position: relative; isolation: isolate; }
.celebrate::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(100deg, #ff3b5c, #ff8a3d, #ffd43b, #51e07a, #3bb8ff, #7c5cff, #ff4fb8, #ff3b5c, #ff8a3d, #ffd43b);
    background-size: 400% 100%; animation: celebrate-sweep 4.2s ease-in-out forwards; }
@keyframes celebrate-sweep {
    0% { opacity: 0; background-position: 0% 50%; }
    12% { opacity: 0.8; }
    80% { opacity: 0.7; }
    100% { opacity: 0; background-position: 100% 50%; }
}
.celebrate-fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
    .celebrate::after { animation: celebrate-glow 2.5s ease-out forwards; background: #fff3c4; }
    @keyframes celebrate-glow { 0% { opacity: 0; } 20% { opacity: 0.8; } 100% { opacity: 0; } }
}
.celebrate-again { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 0.15rem; border-radius: 50%;
    color: #a0661a; font-size: 1.05rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.celebrate-again:hover { background: #fff3c4; }
.celebrate-again.spin { animation: celebrate-spin 0.7s ease-out; }
@keyframes celebrate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .celebrate-again.spin { animation: none; } }

/* Add to CDK (customer.cfm cdkAddFormHtml): matches to link, then a short form */
.cdk-add { margin: 0.5rem 0; padding: 0.7rem 0.8rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; color: #202124; font-size: 0.92rem; }
.cdk-add .items { margin: 0.3rem 0 0.6rem; }
.cdk-match { display: flex; align-items: center; gap: 0.6rem; }
.cdk-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.6rem; }
.cdk-f { display: flex; flex-direction: column; gap: 0.15rem; grid-column: span 2; font-size: 0.82rem; color: #5f6368; }
.cdk-f.wide { grid-column: span 4; }
.cdk-f.short { grid-column: span 1; }
.cdk-f input, .cdk-f select { min-height: 40px; padding: 0 0.6rem; border: 1px solid #c9d2dd; border-radius: 8px; font: inherit; font-size: 16px; color: #202124; background: #fff; }
.cdk-ops { grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: center; }
.cdk-form > p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .cdk-f, .cdk-f.short { grid-column: span 2; } }

/* Desk settings > Volvo programs (desk-programs.cfm) */
.dp-upload { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin: 0.6rem 0 1.2rem; }
.dp-ops { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0 1rem; }
.dp-ops form { margin: 0; }
.dp-grid td, .dp-grid th { padding: 0.3rem 0.45rem; font-size: 0.82rem; }
.dp-grid tr.dp-first td { border-top: 2px solid #c9d2dd; }
.dp-head { text-align: center !important; color: #5f6368; font-weight: 500; border-bottom: 0 !important; }
.dp-dealer { display: inline-block; padding: 0 0.3rem; border-radius: 4px; background: #fff3c4; color: #7a5200; font-size: 0.7rem; font-weight: 700; }
.dp-stack td, .dp-stack th { font-size: 0.8rem; padding: 0.25rem 0.4rem; text-align: center; }
.dp-stack .dp-no { background: #fdecec; color: #b3261e; font-weight: 600; }
.dp-stack .dp-yes { color: #1e7d45; }

/* Desk: the Volvo program for the quote's car (desk.cfm programPanel), and each incentive's Customer / Dealer */
.desk-prog-panel { padding: 0.6rem 0.75rem; border: 1px solid #dfe5ee; border-radius: 12px; background: #f7f9fc; }
.dpp-head { display: flex; align-items: baseline; gap: 0.6rem; }
.dpp-head h3 { margin: 0; }
.dpp-variant { margin: 0.3rem 0; }
.dpp-variant > summary { cursor: pointer; font-weight: 600; color: #1f3a5f; }
.dpp-rates { margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.dpp-incs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.dpp-incs .pill-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.desk-inc-mode { min-height: 44px; border: 1px solid #c9d0d8; border-radius: 8px; padding: 0 0.4rem; font: inherit; font-size: 15px; background: #fff; }
@media (max-width: 600px) { .desk-inc .desk-inc-mode { grid-column: 1 / -1; min-height: 36px; } }

/* Desk quick picks + keypad (assets/desk-pad.js): a speed bar under a number box,
   and on touch screens a keypad sheet with the same picks. Context picks (Volvo
   program, the car, its cost) are tinted. */
.pad-bar { position: absolute; z-index: 60; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: min(560px, calc(100vw - 1rem)); padding: 0.45rem; background: #fff; border: 1px solid #d5dbe2; border-radius: 10px; box-shadow: 0 6px 20px rgba(20, 30, 60, 0.18); }
.pad-bar[hidden] { display: none; }
.pad-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 0.25rem 0.75rem; border: 1px solid #c9d0d8; border-radius: 999px; background: #f4f6f9; color: #1f2a37; font: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums; line-height: 1.15; cursor: pointer; }
.pad-chip small { font-size: 0.68rem; color: #5b6573; }
.pad-chip.ctx { border-color: #9cc0ea; background: #eaf3fd; }
.pad-chip.on { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
.pad-chip.on small { color: #dce9f8; }
.pad-sheet { width: min(460px, calc(100vw - 2rem)); }
.pad-sheet.has-picks { width: min(700px, calc(100vw - 2rem)); }
.pad-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0.7rem 1rem 1rem; }
.has-picks .pad-body { grid-template-columns: minmax(0, 1fr) minmax(170px, 34%); }
.pad-display { min-height: 3.2rem; padding: 0.45rem 0.8rem; border-radius: 12px; background: #f1f3f6; color: #1f2a37; font-size: 2rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap; }
.pad-display.fresh { color: #8a94a3; }
.pad-chips { display: flex; flex-direction: column; gap: 0.5rem; max-height: 27rem; overflow-y: auto; }
.pad-chips[hidden] { display: none; }
.pad-chips .pad-chip { flex: none; min-height: 58px; border-radius: 12px; font-size: 1.1rem; }
/* Custom amount / back to the picks: a phone's list-first sheet only. */
.pad-custom, .pad-tolist, .pad-grab { display: none; }
.pad-sheet:not(.has-picks) .pad-side { display: none; }
@media (max-width: 600px) {
    /* A sheet from the bottom, full width, above the home bar; swipe it down by its top. */
    .reply-sheet.pad-sheet, .reply-sheet.pad-sheet.has-picks { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: pad-up 0.2s ease-out; }
    .pad-grab { display: block; width: 40px; height: 5px; margin: 0.45rem auto 0; border-radius: 3px; background: #c9d0d8; }
    .pad-sheet .sheet-head { padding-top: 0.35rem; }
    .has-picks .pad-body { grid-template-columns: minmax(0, 1fr); }
    .pad-body { padding: 0.5rem 1rem 0.9rem; }
    .pad-keys button { min-height: 56px; }
    /* Keypad view: the picks step aside (Picks brings them back). */
    .pad-sheet.has-picks .pad-tolist { display: inline-flex; margin-right: 0.4rem; }
    .pad-sheet.has-picks:not(.list-mode) .pad-side { display: none; }
    /* List view: big rows, the current one marked, Custom amount on top. */
    .pad-sheet.list-mode .pad-main, .pad-sheet.list-mode .pad-tolist { display: none; }
    .pad-sheet.list-mode .pad-custom { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-bottom: 0.5rem; border: 1px solid #c9d0d8; border-radius: 12px; background: #f1f3f6; color: #1f2a37; font: inherit; font-size: 1.05rem; font-weight: 600; }
    .pad-sheet.list-mode .pad-chips { flex-direction: column; flex-wrap: nowrap; max-height: 62dvh; }
    .pad-sheet.list-mode .pad-chips .pad-chip { flex: none; min-height: 54px; border-radius: 12px; font-size: 1.15rem; }
}
@keyframes pad-up { from { transform: translateY(40%); opacity: 0.4; } to { transform: none; opacity: 1; } }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.65rem; }
.pad-keys button { min-height: 62px; border: 1px solid #d5dbe2; border-radius: 12px; background: #fff; color: #1f2a37; font: inherit; font-size: 1.45rem; font-weight: 600; touch-action: manipulation; cursor: pointer; }
.pad-keys button:active { background: #e8edf3; }
.pad-keys .pad-clear { color: #b42318; font-size: 1.05rem; }
.pad-keys .pad-done { grid-column: span 2; border-color: #0a5cb8; background: #0a5cb8; color: #fff; font-size: 1.15rem; }

/* The desk's keyboard hint (assets/desk-pad.js); not on touch screens. */
.desk-keys { margin: 0.2rem 0 0.4rem; }
.desk-keys kbd { display: inline-block; min-width: 1.2em; padding: 0 0.3em; margin-right: 0.15em; border: 1px solid #c9d0d8; border-radius: 4px; background: #f4f6f9; color: #1f2a37; font: inherit; font-size: 0.75rem; text-align: center; }
@media (pointer: coarse) { .desk-keys { display: none; } }
/* Hold Alt on the desk: letters on the boxes and the shortcut menu from the bottom (assets/desk-pad.js). */
.desk-kt { display: inline-block; min-width: 1.1em; margin-left: 0.3em; padding: 0 0.3em; border-radius: 4px; background: #0a5cb8; color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
/* The Alt shortcut sheet (desk-pad.js showAlt): dark for contrast, titled sections, keys in columns. */
.desk-altmenu { position: fixed; left: 50%; bottom: 0; z-index: 70; width: min(820px, calc(100vw - 1rem)); padding: 0.8rem 1.1rem 1rem; border-radius: 14px 14px 0 0; background: #17202b; box-shadow: 0 -10px 34px rgba(10, 16, 28, 0.35); transform: translate(-50%, 110%); transition: transform 0.18s ease-out; font-size: 0.86rem; color: #e8edf3; }
.desk-altmenu.on { transform: translate(-50%, 0); }
.desk-altmenu .dam-sec + .dam-sec { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid #2c3846; }
.desk-altmenu .dam-h { margin-bottom: 0.35rem; color: #8fa0b5; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.desk-altmenu .dam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); gap: 0.35rem 0.8rem; }
.desk-altmenu .dam-grid > span { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.desk-altmenu kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; margin-right: 0.3em; padding: 0 0.3em; border-radius: 5px; background: #f4f6f9; color: #17202b; font: inherit; font-size: 0.78rem; font-weight: 700; box-shadow: 0 1px 0 #8fa0b5; }
@media (pointer: coarse) { .desk-altmenu { display: none; } }

/* Desk worksheet (desk.cfm .desk-ws): each box is a row -- label left, value
   right -- in a card per group, like DeskingOS. The value box only shows its
   border on hover / focus. The payment pane on the right is unchanged. */
.desk-ws .desk-group { border-top: none; margin-top: 0.9rem; padding-top: 0; }
.desk-ws .desk-group > h3 { margin: 0 0 0.35rem 0.2rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7686; }
.desk-ws .desk-group > .desk-grid { display: block; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; overflow: hidden; }
.desk-ws .desk-grid > .desk-field, .desk-ws .desk-grid > .desk-check { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 50px; margin: 0; padding: 0 0.4rem 0 0.9rem; border-top: 1px solid #eef0f3; font-size: 0.95rem; color: #1f2a37; }
.desk-ws .desk-grid > :first-child { border-top: none; }
.desk-ws .desk-grid > .desk-field > span:first-child { flex: 1; min-width: 0; }
.desk-ws .desk-grid > .desk-field:focus-within { background: #eef5fd; }
.desk-ws .desk-grid .desk-input { flex: 0 0 11.5rem; min-height: 40px; border-color: transparent; background: transparent; }
.desk-ws .desk-grid .desk-input:hover { border-color: #dfe3e8; background: #fff; }
.desk-ws .desk-grid .desk-input:focus-within { border-color: #0a5cb8; background: #fff; }
.desk-ws .desk-grid .desk-input input { text-align: right; font-weight: 600; }
.desk-ws .desk-grid > .desk-field > select { flex: 0 0 11.5rem; width: 11.5rem; min-height: 40px; border-color: transparent; background-color: transparent; text-align: right; font-weight: 600; }
.desk-ws .desk-grid > .desk-field > select:hover { border-color: #dfe3e8; }
.desk-ws .desk-grid > .desk-check { flex-direction: row-reverse; justify-content: space-between; padding-right: 1.1rem; }
.desk-ws .desk-grid > .desk-wide { grid-column: auto; }
/* The Alt letter on a row: quiet until Alt is held, then lit (assets/desk-pad.js). */
.desk-ak { display: inline-block; min-width: 1.15em; margin-left: 0.45em; padding: 0 0.25em; border: 1px solid #d5dbe2; border-radius: 4px; color: #8a94a3; font-size: 0.7rem; font-weight: 600; line-height: 1.35; text-align: center; vertical-align: 0.1em; }
.desk-alt-on .desk-ak { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
@media (pointer: coarse) { .desk-ak { display: none; } }
@media (max-width: 600px) {
    .desk-ws .desk-grid .desk-input, .desk-ws .desk-grid > .desk-field > select { flex-basis: 9.5rem; width: 9.5rem; }
}
/* Payment by term / miles a year on the summary (termStripHtml): tap one to use it. */
.desk-term-strip { margin: 0 0 0.8rem; }
.dts-label { margin: 0.2rem 0 0.3rem; font-size: 0.78rem; font-weight: 600; color: #6b7686; }
.dts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr)); gap: 0.35rem; margin-bottom: 0.45rem; }
.dts-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 0.25rem; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; color: #1f2a37; font: inherit; cursor: pointer; touch-action: manipulation; }
.dts-cell small { font-size: 0.72rem; color: #6b7686; }
.dts-cell strong { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.dts-cell:hover { border-color: #9cc0ea; background: #f2f7fd; }
.dts-cell.on { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
.dts-cell.on small { color: #dce9f8; }
.dts-cell[disabled] { cursor: default; opacity: 0.7; }
/* The worksheet as one sheet (mockup): grey bands for the groups, 44px rows,
   regular-weight values with their $ / % / mo, quiet placeholders. */
.desk-ws .desk-sheet { margin-top: 0.6rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; overflow: hidden; }
.desk-ws .desk-sheet .desk-group { margin: 0; }
.desk-ws .desk-sheet .desk-group > h3 { margin: 0; padding: 0.3rem 0.9rem; border-top: 1px solid #e3e7ec; border-bottom: 1px solid #eef0f3; background: #f6f7f9; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7686; }
.desk-ws .desk-sheet .desk-group:first-child > h3 { border-top: none; }
.desk-ws .desk-sheet .desk-group > .desk-grid { border: none; border-radius: 0; }
.desk-ws .desk-sheet .desk-grid > .desk-field, .desk-ws .desk-sheet .desk-grid > .desk-check { min-height: 44px; padding: 0 0.35rem 0 0.9rem; font-size: 0.95rem; cursor: pointer; }
.desk-ws .desk-sheet .desk-grid > .desk-check { padding-right: 1rem; }
/* A roll-in switch's amount, muted, in the amounts column just left of its box. */
/* Incentives band: dealer cash held for the dealer, folded under the customer's lines (not in the total). */
.dl-held { border-top: 1px solid #eef0f3; background: #fafbfc; }
.dl-held > summary { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0 0.9rem; list-style: none; cursor: pointer; color: #6b7686; font-size: 0.85rem; font-weight: 600; }
.dl-held > summary::-webkit-details-marker { display: none; }
.dl-held > summary > span:first-child { flex: 1; }
.dl-held > summary > strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-held[open] > summary .desk-fold-caret { transform: rotate(180deg); }
.desk-gross .desk-disclose { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 40px; border-top: 1px solid #eef0f3; }
.desk-gross .desk-disclose .link-btn { flex: none; min-height: 36px; font-size: 0.85rem; }
.desk-ws .desk-grid > .desk-check > .desk-rollamt { margin-left: auto; color: #8a94a3; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.desk-ws .desk-sheet .desk-grid > .desk-field:focus-within { background: #e8f1fc; }
.desk-ws .desk-sheet .desk-grid > .desk-field:focus-within > span:first-child { color: #0a5cb8; }
.desk-ws .desk-sheet .desk-input { flex: 0 0 10rem; min-height: 36px; padding: 0 0.55rem; }
.desk-ws .desk-sheet .desk-input input { padding: 0.3rem 0; font-weight: 500; font-size: 0.95rem; color: #1f2a37; }
.desk-ws .desk-input input::placeholder { color: #a7afba; font-weight: 400; }
.desk-ws .desk-sheet .desk-field > select { flex: 0 0 10rem; width: 10rem; min-height: 36px; padding: 0 1.6rem 0 0.5rem; border: 1px solid transparent; border-radius: 8px; box-shadow: none; -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center; font-weight: 500; font-size: 0.95rem; text-align: right; text-align-last: right; color: #1f2a37; }
.desk-ws .desk-sheet .desk-field > select:hover, .desk-ws .desk-sheet .desk-field > select:focus { border-color: #dfe3e8; background-color: #fff; outline: none; }
.desk-ws .desk-sheet .desk-ak { margin-left: 0.4em; }
/* The Volvo program: a one-line button on the form (Alt+V) opening the panel in a sheet. */
.desk-prog-open { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 48px; margin: 0.8rem 0 0; padding: 0 0.9rem; border: 1px solid #dfe5ee; border-radius: 12px; background: #f7f9fc; color: #1f2a37; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.desk-prog-open > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-prog-open:hover { border-color: #9cc0ea; background: #f0f6fd; }
.desk-prog-sheet { width: min(680px, calc(100vw - 2rem)); }
.desk-prog-body { padding: 0.6rem 1rem 1rem; }
.desk-prog-sheet .desk-prog-panel { padding: 0; border: none; background: none; }
.desk-prog-sheet .dpp-head h3 { display: none; }
/* The quote's name + deal type: one slim line; the pencil opens a small sheet (bottom sheet on a phone). */
.desk-qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; margin: 0.2rem 0 0.1rem; }
.desk-qedit { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; max-width: 100%; padding: 0 0.6rem 0 0.2rem; border: 1px solid transparent; border-radius: 10px; background: none; color: #1f2a37; font: inherit; cursor: pointer; }
.desk-qedit strong { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-qedit:hover { border-color: #dfe3e8; background: #f7f9fc; }
.desk-qpen { display: inline-flex; color: #6b7686; }
.desk-qedit:hover .desk-qpen { color: #0a5cb8; }
.desk-qhead .desk-keys { margin: 0; }
.desk-qsheet { width: min(460px, calc(100vw - 2rem)); }
.desk-qsheet-body { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.8rem 1rem 1rem; }
.desk-qsheet-body .segmented { margin-top: 0.3rem; }
.desk-qsheet-body .primary-btn { align-self: flex-end; min-width: 6rem; }
/* Incentives / service contract & products / fees as sheet bands (desk.cfm .desk-band): a line is a
   row -- name left (an input styled as text), tags, amount right -- and "..." opens its details. */
.desk-ws .desk-sheet .desk-band > h3, .desk-ws .desk-sheet .desk-band > summary > h3 { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.desk-ws .desk-sheet .desk-band > summary { list-style: none; cursor: pointer; }
.desk-ws .desk-sheet .desk-band > summary::-webkit-details-marker { display: none; }
.desk-ws .desk-sheet .desk-band > summary > h3 { margin: 0; padding: 0.3rem 0.9rem; border-top: 1px solid #e3e7ec; border-bottom: 1px solid #eef0f3; background: #f6f7f9; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7686; }
.desk-ws .desk-sheet .desk-band:not([open]) > summary > h3 { border-bottom: none; }
.desk-ws .desk-sheet .desk-band > summary:hover > h3 { background: #eef1f5; }
.desk-band .db-total { margin-left: auto; }
.desk-band > summary .desk-fold-caret { margin-left: 0; font-size: 0.7rem; }
.desk-band[open] > summary .desk-fold-caret { transform: rotate(180deg); }
.desk-band .db-total { font-variant-numeric: tabular-nums; color: #3d5270; }
.desk-line { border-top: 1px solid #eef0f3; }
.desk-band .desk-grid > .desk-line:first-of-type { border-top: none; }
.dl-main { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.3rem 0 0.9rem; }
.dl-name { flex: 1; min-width: 0; margin-left: -0.4rem; padding: 0.3rem 0.4rem; border: 1px solid transparent; border-radius: 8px; background: none; color: #1f2a37; font: inherit; font-size: 0.95rem; }
.dl-name:hover { border-color: #dfe3e8; }
.dl-name:focus { border-color: #0a5cb8; background: #fff; outline: none; }
.dl-name::placeholder { color: #a7afba; }
.dl-tags { display: flex; align-items: center; gap: 0.25rem 1.1rem; flex: none; }
.dl-tags .pill { font-size: 0.7rem; }
/* Inline switches on a line (taxable, up front, taxed, disclosed): a pill you tap -- outlined off, filled on. */
.dl-tog { position: relative; display: inline-flex; align-items: center; min-height: 32px; margin: 0; cursor: pointer; }
/* On / off settings on a line (taxable, up front...) and in Desk settings' fee rows are switches, not
   checkboxes: a small track + knob, the word beside it. */
.dl-tog { gap: 0.35rem; }
.dl-tog span { color: #5f6875; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.dl-tog input:checked + span { color: #1d2733; }
.dl-tog input, .desk-fee .desk-check input[name*="Taxable"], .desk-fee .desk-check input[name*="Upfront"] {
    -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 30px; height: 18px; margin: 0;
    border-radius: 999px; background: #c7ccd3; cursor: pointer; transition: background 0.15s; opacity: 1; pointer-events: auto; }
.dl-tog input::after, .desk-fee .desk-check input[name*="Taxable"]::after, .desk-fee .desk-check input[name*="Upfront"]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s; }
.dl-tog input:checked, .desk-fee .desk-check input[name*="Taxable"]:checked, .desk-fee .desk-check input[name*="Upfront"]:checked { background: #0a5cb8; }
.dl-tog input:checked::after, .desk-fee .desk-check input[name*="Taxable"]:checked::after, .desk-fee .desk-check input[name*="Upfront"]:checked::after { left: 14px; }
.dl-tog input:focus-visible, .desk-fee .desk-check input:focus-visible { outline: 2px solid #0a5cb8; outline-offset: 2px; }
.dl-prog { font-size: 0.75rem; color: #6b7686; }
/* An incentive's unusual settings as one letter on its line (desk-incentives.cfm): D dealer cash, T taxed. */
.dl-mark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #eef1f5; color: #5d6875; font-size: 0.7rem; font-weight: 700; cursor: default; }
.desk-ws .desk-sheet .desk-band .desk-input { flex: 0 0 8.5rem; }
.dl-more { flex: none; width: 36px; height: 36px; border: none; border-radius: 8px; background: none; color: #6b7686; font: inherit; font-size: 1.1rem; font-weight: 700; letter-spacing: -1px; cursor: pointer; }
.dl-more:hover { background: #f1f3f6; }
.desk-line.open .dl-more { background: #e8f1fc; color: #0a5cb8; }
.dl-detail { display: none; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding: 0.15rem 0.9rem 0.65rem; }
.desk-line.open .dl-detail { display: flex; }
.dl-detail .desk-prog { width: 8rem; min-height: 36px; padding: 0 0.5rem; border: 1px solid #c9d0d8; border-radius: 8px; font: inherit; font-size: 15px; }
.dl-detail .desk-inc-mode, .dl-detail .desk-check { min-height: 36px; }
.dl-detail .desk-remove { width: 36px; height: 36px; margin-left: auto; font-size: 1.3rem; }
.dl-add > summary, .dl-add-btn { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 0.9rem; border: none; border-top: 1px solid #eef0f3; background: none; color: #0a5cb8; font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; list-style: none; cursor: pointer; }
.dl-add > summary::-webkit-details-marker { display: none; }
.dl-add > summary:hover, .dl-add-btn:hover { background: #f7f9fc; }
.dl-add .desk-add-list { padding: 0 0.9rem 0.7rem; }
/* A band's lines sit in from its header (incentives, products, fees, accessories), so the
   sections read as headings with items under them; amounts stay on the right edge. */
.desk-band .desk-line .dl-main, .desk-band .desk-line .dl-detail, .desk-band .dl-add > summary, .desk-band .dl-held > summary { padding-left: 1.75rem; }
.desk-band .dl-add .desk-add-list { padding-left: 1.75rem; }
@media (max-width: 600px) {
    .desk-ws .desk-sheet .desk-band .desk-input { flex-basis: 7rem; }
    /* On a phone the switches drop to their own row under the name and amount. */
    .dl-main { flex-wrap: wrap; }
    .dl-tags { order: 9; width: 100%; padding-bottom: 0.35rem; }
}
/* The summary's details folded to one line each (desk.cfm sumFold): title left, the number right. */
.desk-sumfold { border-top: 1px solid #e3e7ec; }
.desk-sumfold > summary { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; list-style: none; cursor: pointer; font-size: 0.92rem; }
.desk-sumfold > summary::-webkit-details-marker { display: none; }
.desk-sumfold > summary > span:first-child { flex: 1; color: #3d4652; }
.desk-sumfold > summary > strong { font-variant-numeric: tabular-nums; color: #1f2a37; font-weight: 600; }
.desk-sumfold > summary .desk-fold-caret { margin-left: 0; font-size: 0.7rem; }
.desk-sumfold[open] > summary .desk-fold-caret { transform: rotate(180deg); }
.desk-sumfold > summary:hover > span:first-child { color: #0a5cb8; }
.dsf-body { padding: 0 0 0.6rem; }
.dsf-body .desk-lines { margin-top: 0; }
.desk-sumfold + .desk-gross, .desk-sumfold + .desk-grid-wrap { border-top: 1px solid #e3e7ec; }
/* Row tooltips: a small (i) after the label; hover (Mac) or tap / focus (iPad) shows what it means. */
.desk-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 0.35rem; border: 1px solid #b9c2cd; border-radius: 50%; color: #6b7686; font-family: Georgia, serif; font-size: 0.68rem; font-style: italic; font-weight: 700; line-height: 1; vertical-align: 0.1em; cursor: help; }
.desk-tip:hover, .desk-tip:focus { border-color: #0a5cb8; color: #0a5cb8; outline: none; }
/* The tip text floats above everything (assets/desk-pad.js puts it on the page, fixed), so a
   card's rounded corners can't clip it. */
.desk-tipfloat { position: fixed; z-index: 1000; max-width: 280px; padding: 0.5rem 0.65rem; border-radius: 8px; background: #1f2a37; color: #fff; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(20, 30, 60, 0.25); pointer-events: none; }
.desk-tipfloat[hidden] { display: none; }
/* Tax is a section like the others (desk.cfm): "Tax · 9%" and its amount on the header; how it's
   taxed is the first line inside. A lease's "/mo" is small after the amount. */
.desk-band .db-total small { margin-left: 0.1rem; font-size: 0.72rem; font-weight: 500; color: #6b7686; }
.desk-ws .desk-sheet .desk-grid > .desk-bandnote { padding: 0.5rem 0.9rem; border-bottom: 1px solid #eef0f3; }
/* A lease's Down payment: the header caret opens the roll-ins under Due at signing (desk-pad.js),
   so it points by those, not by the section (which stays open). */
.desk-ws .desk-sheet .desk-dueband > summary .desk-fold-caret { transform: none; }
.desk-ws .desk-sheet .desk-dueband > summary[aria-expanded="true"] .desk-fold-caret { transform: rotate(180deg); }
/* What's rolled in, under the Due at signing label (also while the switches are folded away). */
.desk-duenote { display: block; margin-top: 0.1rem; color: #6b7686; font-size: 0.78rem; font-weight: 400; }
/* Accordion rows: a sub-row (buy factor) stays folded under its row until the caret opens it. */
.desk-ws .desk-sheet .desk-grid > .desk-subrow { display: none; }
.desk-ws .desk-sheet .desk-grid.show-sub > .desk-subrow { display: flex; padding-left: 1.8rem; background: #fafbfc; }
.desk-subtoggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 0.3rem; border: none; border-radius: 6px; background: none; color: #6b7686; font: inherit; font-size: 0.8rem; vertical-align: middle; cursor: pointer; transition: transform 0.15s; }
.desk-subtoggle:hover { background: #eef1f5; color: #0a5cb8; }
.desk-subtoggle[aria-expanded="true"] { transform: rotate(180deg); }
/* Amounts line up: a plain row keeps an empty slot where a line's "..." button sits
   (36px + the 0.8rem gap, as .dl-main's 0.5rem gap + 0.3rem padding), so every value's
   right edge -- and its cents -- falls in one column. */
.desk-ws .desk-sheet .desk-grid > .desk-field { padding-right: 0; }
.desk-ws .desk-sheet .desk-grid > .desk-field::after { content: ""; flex: 0 0 36px; }
.desk-ws .desk-sheet .desk-ws-total .desk-grid > .desk-field { padding-right: 0; }
.desk-ws-total .desk-field > strong { padding-right: 0.55rem; }
/* Band subtotals in line with the amounts: the total ends where the values end (their 0.55rem
   inner padding), the caret takes the "..." slot (36px after the 0.8rem gap), same size and figures. */
.desk-ws .desk-sheet .desk-band > summary > h3 { padding-right: 0; gap: 0.8rem; }
.desk-ws .desk-sheet .desk-band > summary .db-total { margin-left: auto; padding-right: 0.55rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: #1f2a37; font-variant-numeric: tabular-nums; }
.desk-ws .desk-sheet .desk-band > summary .desk-fold-caret { flex: 0 0 36px; text-align: center; }
/* One look for every amount on the worksheet: same size, weight and figures (rows, lines,
   pickers, the running total; an empty value's placeholder only greyed). */
.desk-ws .desk-sheet .desk-input input, .desk-ws .desk-sheet .desk-field > select, .desk-ws-total .desk-field > strong {
    font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; color: #1f2a37; }
.desk-ws .desk-sheet .desk-input input::placeholder { font-weight: 500; color: #a7afba; }
.desk-qhead-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
/* Smooth in-place edits (CSS view transitions; desk-pad.js swaps a band with transition:true):
   each block that changes is named, so it morphs from its old size to its new one and the rows
   below glide instead of jumping; a just-added line slides open. */
#incentives { view-transition-name: desk-incentives; }
#products { view-transition-name: desk-products; }
#fees { view-transition-name: desk-fees; }
#tax { view-transition-name: desk-tax; }
#desk-paycard { view-transition-name: desk-paycard; }
#desk-ws-total { view-transition-name: desk-ws-total; }
#desk-summary { view-transition-name: desk-summary; }
#quote-tabs { view-transition-name: desk-quote-tabs; }
::view-transition-group(*) { animation-duration: 0.28s; animation-timing-function: ease-out; }
.desk-line.dl-new { animation: desk-line-in 0.32s ease-out 0.12s both; }
@keyframes desk-line-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .desk-line.dl-new { animation: none; }
}
/* Drill-in screens (desk.cfm .desk-stage, assets/desk-pad.js): the main sheet and the screens it opens
   share one spot; the open one is in the flow, the others sit off to the side, hidden. Moving between
   them slides (the main sheet a little left, the screen in from the right). */
.desk-stage { position: relative; overflow-x: clip; }
.desk-stage > .desk-main, .desk-stage > .desk-screen { transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s; }
.desk-stage > :not(.is-active) { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s; }
.desk-stage > .desk-screen:not(.is-active) { transform: translateX(45%); }
.desk-stage > .desk-main:not(.is-active) { transform: translateX(-25%); }
.desk-stage > .is-active { position: relative; transform: none; visibility: visible; opacity: 1; }
.desk-stage.no-anim > * { transition: none !important; }
/* One column (phone): the screen opens where you are -- the main sheet keeps its place and height
   under it, and the screen is positioned at the current scroll (desk-pad.js placeScreen). */
.desk-stage.in-place > .desk-main:not(.is-active) { position: relative; }
.desk-stage.in-place > .desk-screen.is-active { position: absolute; left: 0; right: 0; z-index: 2; background: var(--page-bg, #fff); }
/* Two columns: each side scrolls on its own, so the worksheet can scroll to a screen without the
   page (or the payment pane) moving. */
@media (min-width: 821px) {
    .pos.desk > .pos-left { position: sticky; top: 0.6rem; max-height: calc(100vh - 1.2rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.35rem; }
}
/* Room under the worksheet (desk.cfm .desk-scroll-room) so the last rows (More: Volvo program)
   scroll up to the middle of the screen. */
.desk-scroll-room { height: 45vh; flex: none; }
@media (prefers-reduced-motion: reduce) { .desk-stage > * { transition: none !important; } }
.ds-head { display: flex; align-items: center; gap: 0.8rem; min-height: 44px; margin: 0.3rem 0 0.2rem; }
.ds-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.ds-back { min-height: 40px; padding: 0 0.7rem 0 0.2rem; border: none; border-radius: 10px; background: none; color: #0a5cb8; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.ds-back:hover { background: #eef5fd; }
.desk-screen .desk-band > summary { pointer-events: none; }
.desk-screen .desk-band > summary .desk-fold-caret { visibility: hidden; }
/* "More": one row per screen -- its title, the number that matters (in the amounts column), and a chevron. */
.desk-more { margin-top: 0.9rem; }
.desk-drill { display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 50px; padding: 0 0 0 0.9rem; border: none; border-top: 1px solid #eef0f3;
    background: #fff; color: #1f2a37; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.desk-grid > .desk-drill:first-child { border-top: none; }
.desk-drill:hover { background: #f5f8fc; }
.desk-drill > span:first-child { flex: 1; }
.desk-drill > strong { padding-right: 0.55rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.desk-drill .dd-chev { flex: 0 0 36px; text-align: center; color: #8a94a3; font-size: 1.3rem; }
/* The Total discount row is a swipe row (Roll back), so its look is set here, not by the grid. */
/* Laid out like the other rows (label left, the amount in the amounts column, the "..." in its slot), on white. */
.desk-ws .desk-sheet .dd-total .desk-field { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 44px; margin: 0; padding: 0 0 0 0.9rem; font-size: 0.95rem; color: #1f2a37; background: #fff; }
.dd-total .desk-field > span:first-child { flex: 1; font-weight: 600; }
.dd-total .desk-field > strong { flex: none; padding-right: 0.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.desk-line.dd-total .swipe-face { --swipe-bg: #fff; background: #fff; }
.desk-line.dd-total { border-top: 1px solid #eef0f3; }
.desk-ws .desk-sheet .desk-discount .desk-grid > .desk-field.dd-part { background: #fff; }
/* Total discount: a subtotal under the incentives; its "..." shows the two parts beneath. */
.desk-discount .dd-part { display: none !important; }
.desk-discount.open .dd-part { display: flex !important; padding-left: 1.8rem !important; background: #fafbfc; font-size: 0.88rem; }
.desk-discount .dd-part > strong { font-weight: 500; }
.desk-discount.open .dl-more { background: #e8f1fc; color: #0a5cb8; }
/* Net selling price: the subtotal under Total discount, laid out the same (its amount in the same column). */
.desk-ws .desk-sheet .dd-net .desk-field { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 44px; margin: 0; padding: 0 0 0 0.9rem; font-size: 0.95rem; color: #1f2a37; background: #f6f8fa; }
.dd-net .desk-field > span:first-child { flex: 1; font-weight: 600; }
.dd-net .desk-field > strong { flex: none; padding-right: 0.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-net .dd-gap { flex: none; width: 36px; margin-left: -0.3rem; }
.desk-line.dd-net { border-top: 1px solid #e3e7ec; }
.desk-line.dd-net .swipe-face { --swipe-bg: #f6f8fa; background: #f6f8fa; }
#desk-discount { view-transition-name: desk-discount; }
/* A row with its own "..." (money factor -> buy factor): the button takes the empty slot. */
.desk-ws .desk-sheet .desk-grid > .desk-field.has-more::after { display: none; }
.desk-field.has-more > .dl-more { margin-left: -0.3rem; }
.dl-more.desk-subtoggle { width: 36px; height: 36px; margin-left: 0; font-size: 1.1rem; transform: none; }
.dl-more.desk-subtoggle[aria-expanded="true"] { transform: none; background: #e8f1fc; color: #0a5cb8; }
/* Car cost band: the Desk settings adds as read-only rows lined up with the amounts. */
.desk-ws .desk-sheet .desk-grid > .desk-costadd { cursor: default; }
.desk-costadd > strong { flex: 0 0 auto; padding-right: 0.55rem; font-size: 0.95rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #1f2a37; }
.desk-band > .desk-grid + .desk-ws-total { border-top: 1px solid #d5dbe2; }
/* The worksheet's running total (amount financed / adjusted cap cost / balance due), read only. */
.desk-ws .desk-sheet .desk-ws-total .desk-grid > .desk-field { border-top: 1px solid #d5dbe2; background: #f6f7f9; cursor: default; padding-right: 0.9rem; }
.desk-ws-total .desk-field > span { font-weight: 600; color: #1f2a37; }
.desk-ws .desk-sheet .desk-ws-total .dws-roll .swipe-face > .desk-field { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; padding: 0 0.9rem; border-top: 1px solid #d5dbe2; background: #f6f7f9; font-size: 0.95rem; }
.desk-line.dws-roll .swipe-face { --swipe-bg: #f6f7f9; background: #f6f7f9; }
.desk-ws-total .desk-field > strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
/* The flat Rebate line: an unsaved one has no swipe face but lines up the same. */
.desk-line .dl-face { background: #fff; }
.dl-flat .desk-ak { margin: 0 0.2rem 0 0; }
/* Swipeable desk lines (assets/swipe-delete.js): the face slides over a red Delete. */
.desk-line.swipe-row .swipe-face { --swipe-bg: #fff; }
.desk-line.swipe-row .swipe-delete { width: 88px; }
.desk-line.swipe-row .swipe-delete.swipe-more { right: 88px; background: #6b7686; }
.dl-detail .dl-delete { margin-left: auto; color: #b42318; font-size: 0.85rem; }
/* The payment card: a break in the worksheet; swipe it left for Roll back (blue). */
.desk-paycard { position: relative; margin: 0.9rem 0; border: 1px solid #cfe0f5; border-radius: 12px; background: #f2f7fd; overflow: hidden; }
.desk-paycard .dpc-face { --swipe-bg: #f2f7fd; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 1rem; background: #f2f7fd; }
.dpc-left { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dpc-label { font-size: 0.95rem; font-weight: 600; color: #1f2a37; }
.dpc-big { flex: none; text-align: right; }
.dpc-big { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: #102a4c; }
.dpc-big small { font-size: 0.9rem; font-weight: 600; color: #5b6573; }
.dpc-sub { font-size: 0.85rem; color: #5b6573; }
.dpc-hint { margin-left: auto; font-size: 0.75rem; color: #8a94a3; }
.swipe-delete.swipe-rb { width: 110px; background: #0a5cb8; }
@media (pointer: coarse) { .dpc-hint { display: none; } }
/* Roll back drawer: slides in from the right. */
.reply-sheet.desk-drawer { width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 16px 0 0 16px; }
.desk-drawer[open] { animation: desk-drawer-in 0.22s ease-out; }
@keyframes desk-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.desk-drawer-body { padding: 0.4rem 1rem 1.2rem; }
.desk-drawer .desk-rollback > form > h3 { display: none; }
@media (max-width: 600px) { .reply-sheet.desk-drawer { width: 100vw; margin: 0; border-radius: 0; } }
/* Volvo program sheet: rates and incentives as a vertical checklist (tick to put on, untick to take off). */
.dpp-list { margin: 0.7rem 0 0.4rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; overflow: hidden; }
.dpp-sub { padding: 0.3rem 0.9rem; border-bottom: 1px solid #eef0f3; background: #f6f7f9; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #6b7686; }
.dpp-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 50px; padding: 0.35rem 0.9rem; border: none; border-top: 1px solid #eef0f3; background: #fff; color: #1f2a37; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; touch-action: manipulation; }
.dpp-sub + .dpp-row { border-top: none; }
.dpp-row:hover { background: #f7f9fc; }
.dpp-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border: 2px solid #b9c2cd; border-radius: 6px; color: #fff; font-size: 0.85rem; font-weight: 700; }
.dpp-row.on .dpp-box { border-color: #0a5cb8; background: #0a5cb8; }
.dpp-text { flex: 1; min-width: 0; }
.dpp-text small { display: block; font-size: 0.75rem; color: #6b7686; }
.dpp-amt { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.dpp-row.blocked { cursor: default; color: #9aa3ae; background: #fafbfc; }
.dpp-row.blocked .dpp-box { border-color: #d5dbe2; background: #f1f3f6; }
.dpp-row[disabled]:not(.blocked) { cursor: default; }
/* The summary's Cost and gross fold: no default marker over its title. */
.desk-gross > summary { display: flex; align-items: baseline; gap: 0.6rem; list-style: none; cursor: pointer; }
.desk-gross > summary::-webkit-details-marker { display: none; }
.desk-gross > summary h3 { margin: 0.6rem 0 0.3rem; }
/* Trade-ins and car cost: the second sheet. A trade is a row (vehicle + allowance / payoff left,
   equity right) that opens to its fields as sheet rows. */
.desk-trades .desk-sheet { margin-top: 0.9rem; }
.desk-sheet .desk-trade { border-top: 1px solid #eef0f3; }
.desk-sheet .desk-trade:first-of-type { border-top: none; }
.desk-sheet .desk-trade.is-hidden { display: none; }
.desk-sheet .desk-trade-sum { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 48px; padding: 0.3rem 0.9rem; list-style: none; cursor: pointer; font-size: 0.95rem; }
.desk-sheet .desk-trade-sum::-webkit-details-marker { display: none; }
.desk-sheet .desk-trade-sum:hover { background: #f7f9fc; }
.desk-sheet .dts-name { min-width: 0; }
.desk-sheet .dts-name small { display: block; font-size: 0.78rem; }
.desk-sheet .dts-val { font-weight: 500; font-variant-numeric: tabular-nums; }
.desk-sheet .desk-trade.is-empty .desk-trade-sum { color: #0a5cb8; font-weight: 600; font-size: 0.9rem; }
.desk-ws .desk-sheet .desk-trade > .desk-grid { border-top: 1px solid #eef0f3; background: #fcfdfe; }
.desk-band > .desk-grid + .desk-grid, .desk-band > .desk-trade + .desk-grid { border-top: 1px solid #eef0f3; }
.desk-sheet .desk-tradecredit { font-size: 0.88rem; color: #3d4652; }
.desk-sheet .desk-note { margin: 0; padding: 0.4rem 0.9rem 0.7rem; border-top: 1px solid #eef0f3; }
@media (max-width: 600px) {
    .desk-ws .desk-sheet .desk-input, .desk-ws .desk-sheet .desk-field > select { flex-basis: 8.5rem; width: 8.5rem; }
}

/* Settings > Health (lib/Health.cfc): one row per check, a coloured dot for its state. */
.health-sum { padding: 0.6rem 0.9rem; border-radius: 0.6rem; background: #e6f4ea; color: #0a5a24; }
.health-sum.health-warn { background: #fff4d6; color: #7a5200; }
.health-sum.health-bad { background: #fde7e5; color: #8c1d18; }
.health-list { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.health-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9rem; border: 1px solid #e3e6ea; border-radius: 0.7rem; background: #fff; }
.health-dot { flex: none; width: 0.8rem; height: 0.8rem; margin-top: 0.3rem; border-radius: 50%; background: #1f9d55; }
.health-warn .health-dot { background: #e0a800; }
.health-bad .health-dot { background: #d93025; }
.health-off .health-dot { background: #b6bcc4; }
.health-title { font-weight: 600; }
.health-state { margin-left: 0.4rem; font-size: 0.8rem; font-weight: 500; color: #5f6670; }
.health-bad .health-state { color: #b3261e; }
.health-warn .health-state { color: #8a6100; }
.health-detail { margin-top: 0.15rem; }

/* Performance > Scorecard (performance.cfm, lib/Scorecard.cfc) */
.sc-table td, .sc-table th { white-space: nowrap; }
.sc-was { display: block; font-size: 0.75rem; color: #6b7380; }
.sc-slow { color: #b3261e; font-weight: 600; }
.sc-flag { display: inline-block; min-width: 1.6rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #fde7e5; color: #8c1d18; font-weight: 600; text-decoration: none; }

/* Sales plan > Notes (layout/sales-stage.cfm): a note box the AI reads, and the newest notes. */
.ss-note textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 0.5rem 0.6rem; border: 1px solid #d5d9df; border-radius: 10px; }
.ss-note-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.ss-note-private { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #5b6472; }
.ss-notes { display: grid; gap: 0.35rem; margin: 0.5rem 0 0.9rem; }
.ss-note-item { font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: #fffbea; }
.ss-note-item.is-private { background: #f1f2f4; }
.ss-note-lock, .note-lock { display: inline-flex; vertical-align: -2px; color: #5b6472; }
.note-private-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: #5b6472; background: #eef0f3; border-radius: 999px; padding: 0.05rem 0.5rem; }
.msg-plan.msg-plan-loading { display: flex; align-items: center; gap: 0.4rem; min-height: 2.2rem; animation: cu-shimmer-bg 1.6s ease-in-out infinite alternate; }
@keyframes cu-shimmer-bg { from { opacity: 0.75; } to { opacity: 1; } }
.msg-saved-note { margin: 0 0 0.3rem; color: #5b6472; }

/* VinSolutions on the customer page (customer.cfm vinLeadsHtml): team line, write buttons, dry-run requests */
.vin-team { margin: 0.2rem 0 0.4rem; }
.vin-act { margin-top: 0.35rem; }
.vin-act summary { cursor: pointer; color: #1a5fb4; }
.vin-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
.vin-form textarea, .vin-form input[type=text] { flex: 1 1 14rem; min-width: 0; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid #d0d4da; border-radius: 8px; }
.vin-form select { max-width: 100%; }
.vin-act-line, .vin-license { margin: 0.3rem 0; }
.vin-license { padding: 0.45rem 0.6rem; background: #eef5ff; border-radius: 8px; }
.vin-result { margin: 0.3rem 0; }
.vin-result.ok { color: #1f7a3f; }
.vin-dry { white-space: pre-wrap; word-break: break-word; background: #f5f6f8; border-radius: 8px; padding: 0.5rem; margin: 0.3rem 0; max-height: 16rem; overflow: auto; }
.vin-cand { margin: 0.25rem 0; }
.vin-cand-household { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0.5rem 0 0; }
.vin-cand-household select { font: inherit; min-height: 36px; padding: 0.2rem 0.5rem; border: 1px solid #c9d0d8; border-radius: 8px; background: #fff; }

/* ↺ Roll back hint (desk.cfm rbIcon): the line swipes for Roll back; tapping the badge does the same.
   Styled like the shortcut badge (.desk-ak) but kept on touch screens, where the swipe is. */
.desk-rb-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; margin-left: 0.45em; padding: 0 0.2em; border: 1px solid #d5dbe2; border-radius: 4px; background: none; color: #8a94a3; font: inherit; line-height: 1; vertical-align: 0.1em; cursor: pointer; }
.desk-rb-ic:hover, .desk-rb-ic:focus-visible { border-color: #0a5cb8; color: #0a5cb8; outline: none; }
/* Lease details' "More options": a full-width line, not the small ··· toggle it borrows its behaviour from. */
.desk-ws .desk-sheet .desk-grid > .desk-moreopts.desk-subtoggle { display: flex; width: 100%; height: auto; min-height: 44px; margin: 0; border-radius: 0; transform: none; justify-content: space-between; padding: 0 0.9rem; font-size: 0.85rem; }
/* Touch screens: section headers a finger's height, and the small icons on a row (↺ Roll back, the
   auto bump arrow, the (i)) answer a tap a little around them too. */
@media (pointer: coarse) {
    .desk-ws .desk-sheet .desk-band > summary > h3 { min-height: 40px; }
    .desk-rb-ic, .desk-bump, .desk-tip { position: relative; }
    .desk-rb-ic::before, .desk-bump::before, .desk-tip::before { content: ""; position: absolute; inset: -10px; }
}
.desk-screen .desk-rb-ic { display: none; }
/* A lease's tax on its header (desk.cfm): per payment, so not in the money column (it doesn't add
   into the adjusted cap cost) -- muted, ending where the money column starts. */
.desk-ws .desk-sheet .desk-band > summary .db-aside { margin-left: auto; margin-right: calc(36px + 8.5rem); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: #6b7686; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desk-ws .desk-sheet .desk-band > summary .db-aside small { margin-left: 0.1rem; font-size: 0.72rem; }
/* A lease's key terms (term and miles; the residual): cards of their own under the adjusted cap cost. */
.desk-ws .desk-keysheet { margin-top: 0.75rem; }
.desk-ws .desk-keysheet .desk-keycard .desk-grid > .desk-field:first-child { border-top: none; }
/* Every amount ends on one column (measured against the inputs' text, desktop and phone): the
   discount lines carry a "..." slot of their own, the lease's total has the row's spacer after it,
   and a swipeable total (Amount financed, Balance due) has none, so each is nudged onto it. */
.desk-ws .desk-sheet .dd-total .desk-field > strong, .desk-ws .desk-sheet .dd-net .desk-field > strong { padding-right: calc(0.55rem + 6px); }
.desk-ws .desk-sheet .desk-ws-total .desk-grid > .desk-field > strong { padding-right: 0; margin-right: -5px; }
.desk-ws .desk-sheet .desk-ws-total .dws-roll .swipe-face > .desk-field > strong { margin-right: 36px; }

/* Customer page, new layout (customer.cfm, cookie custLayout=timeline): four main tiles, the other
   sections as pills, and the timeline under them. The classic grid is untouched. */
.tiles.tiles-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.tiles.tiles-four .tile { min-height: 4.9rem; padding: 0.65rem 0.75rem; font-size: 0.95rem; border-radius: 12px; }
@media (max-width: 520px) { .tiles.tiles-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0.2rem; }
/* Customer page (2026-10-17): two rows of half-height tiles, More by purpose, the timeline on Now. */
.tiles.tiles-eight { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
/* The tiles' column decides their style (beside an open pane it's narrow even on a desktop). */
:has(> .tiles.tiles-eight) { container-type: inline-size; }
.tiles.tiles-eight .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.5rem; min-height: 3.2rem; padding: 0.45rem 0.7rem; font-size: 0.92rem; border-radius: 12px; }
.tiles.tiles-eight .tile-label { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles.tiles-eight .tile-badge { position: static; margin-left: auto; flex: none; }
.tiles.tiles-eight .tile.is-empty { opacity: 0.55; }
@container (max-width: 640px) {
    .tiles.tiles-eight { gap: 0.35rem; }
    .tiles.tiles-eight .tile { flex-direction: column; justify-content: center; gap: 0.1rem; min-height: 3.6rem; padding: 0.35rem 0.2rem; font-size: 0.72rem; text-align: center; }
    .tiles.tiles-eight .tile-label { white-space: normal; line-height: 1.1; }
    .tiles.tiles-eight .tile-badge { position: absolute; top: 0.2rem; right: 0.25rem; margin: 0; min-width: 0; padding: 0 0.3rem; font-size: 0.65rem; }
}
.cust-more { margin: 0.6rem 0 0; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.cust-more > summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 0.8rem; list-style: none; cursor: pointer; color: #5d6875; font-size: 0.88rem; }
.cust-more > summary::-webkit-details-marker { display: none; }
.cust-more[open] .cust-more-caret { transform: rotate(180deg); }
.cust-more-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; padding: 0 0.8rem 0.7rem; }
@media (max-width: 600px) { .cust-more-cols { grid-template-columns: 1fr 1fr; } }
.cust-more-col h4 { margin: 0.35rem 0 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a94a3; }
.cust-more-link { display: flex; justify-content: space-between; gap: 0.4rem; min-height: 34px; align-items: center; border-bottom: 1px solid #f0f2f5; color: #1d2433; font-size: 0.9rem; text-decoration: none; }
.cust-more-link span { color: #5d6875; font-size: 0.8rem; }
.cust-more-link.is-urgent { color: #b42318; font-weight: 600; }
.cust-more-link.active { color: #0a5cb8; }
/* Your tiles (assets/cust-tiles.js): drag between the tiles and More, the star adds one. */
.cust-more-row { display: flex; align-items: center; gap: 0.2rem; border-bottom: 1px solid #f0f2f5; }
.cust-more-row .cust-more-link { flex: 1; border-bottom: 0; }
.cust-more-star { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: #9aa4b0; font-size: 1rem; cursor: pointer; }
.cust-more-star:hover { background: #f1f4f8; color: #c98a00; }
.cust-more-hint { margin: 0; padding: 0 0.8rem 0.7rem; }
[data-ct-tiles] [data-ct-key], .cust-more-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ct-ghost { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; opacity: 0.9; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.25); border-radius: 12px; background: #fff; }
.ct-dragging { opacity: 0.35; }
.ct-on, .ct-on * { cursor: grabbing !important; }
[data-ct-tiles].ct-zone { outline: 2px dashed #0a5cb8; outline-offset: 4px; border-radius: 12px; }
[data-ct-tiles] .ct-before { box-shadow: -4px 0 0 #0a5cb8; }
[data-ct-more].ct-zone { outline: 2px dashed #b42318; outline-offset: 2px; }
.tl-filters { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.2rem; }
.tl-now-what { flex: 1; min-width: 0; }
.tl-pick { margin-left: auto; min-height: 32px; padding: 0 0.6rem; border: 1px solid #d5dbe2; border-radius: 999px; background: #fff; font: inherit; font-size: 0.85rem; color: #44505c; }
.tl-earlier { display: block; width: 100%; margin: 0.5rem 0 0.3rem; padding: 0.55rem; border: 0; border-radius: 10px; background: #f4f6f9; color: #0a5cb8; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.tl-earlier:hover { background: #eaeef3; }
.mini-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid #d5dbe2; border-radius: 999px; background: #fff; color: #1f2a37; font-size: 0.85rem; text-decoration: none; }
.mini-pill b { font-weight: 600; font-size: 0.78rem; color: #6b7686; }
.mini-pill:hover, .mini-pill.active { border-color: #0a5cb8; color: #0a5cb8; }
.mini-pill.is-more { border-style: dashed; color: #6b7686; }
.cust-tl { margin-top: 1rem; padding: 0.8rem 0.9rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.cust-tl-h { margin: 0 0 0.4rem; font-size: 1.05rem; }
/* Timeline filters, grouped entries and links (both layouts). */
.tl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0.6rem; }
.tl-chip { padding: 0.22rem 0.65rem; border: 1px solid #d5dbe2; border-radius: 999px; background: #fff; color: #6b7686; font: inherit; font-size: 0.82rem; cursor: pointer; }
.tl-chip.on { border-color: #0a5cb8; background: #e8f1fc; color: #0a5cb8; }
.tl-act { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.4rem; font-size: 0.82rem; color: #6b7686; }
.timeline .tl-link { color: inherit; text-decoration: none; }
.timeline .tl-link:hover { color: #0a5cb8; text-decoration: underline; }
.tl-go { color: #9aa4b2; font-size: 1.1rem; }
.tl-more { font-size: inherit; }
.tl-kids { margin-top: 0.35rem; padding-left: 0.6rem; border-left: 2px solid #e3e7ec; }
.tl-kid { padding: 0.15rem 0; font-size: 0.85rem; font-weight: 400; color: #4a5565; }
.tl-item[hidden], .timeline-day[hidden], .timeline .items[hidden] { display: none; }
/* The pane's context Back ("‹ Timeline", "‹ Customer"): shown at every width while there's somewhere
   to go back to (the plain Back shows on the phone only). */
.pane-back.is-ctx { display: inline-flex; }
/* Trade-in (customer.cfm sec.trade; the new layout's strip above the timeline). */
.trade-card { margin: 0 0 0.9rem; padding: 0.75rem 0.85rem; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; }
.trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 1rem; }
/* The plan (a status), the card's actions, the ended-lease question, and the inline edits (customer.cfm Trade-in). */
.trade-plan { margin: 0 0 0 auto; }
.trade-plan-pick { min-height: 32px; padding: 0 0.6rem; border: 1px solid #d5dbe2; border-radius: 999px; background: #fff; font: inherit; font-size: 0.85rem; color: #5d6875; }
.trade-plan-pick.is-set { border-color: #0a5cb8; background: #e8f1fc; color: #0a5cb8; font-weight: 600; }
.trade-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin: 0.35rem 0 0.2rem; font-size: 0.88rem; }
.trade-acts .link-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.trade-end > summary { list-style: none; cursor: pointer; color: #b42318; }
.trade-end > summary::-webkit-details-marker { display: none; }
.trade-end-form { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; }
.trade-end-form select { min-height: 34px; border: 1px solid #d5dbe2; border-radius: 8px; font: inherit; }
.trade-ask { margin: 0.4rem 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: #fff4dc; font-size: 0.9rem; }
.trade-ask form, .trade-m .inline-form { display: inline; margin: 0; }
.trade-edit { margin-top: 0.25rem; }
.trade-edit > summary { list-style: none; cursor: pointer; font-size: 0.8rem; }
.trade-edit > summary::-webkit-details-marker { display: none; }
.trade-edit[open] > summary { display: none; }
.trade-stale { text-decoration: line-through; color: #8a94a3; }
.trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.trade-m { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: 8px; background: #f6f7f9; min-width: 0; }
.trade-m > span { font-size: 0.78rem; color: #6b7686; }
.trade-m > strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.trade-m > small { font-size: 0.75rem; color: #6b7686; }
.trade-m strong.bad, .trade-lease .bad { color: #b42318; }
.trade-val { display: flex; gap: 0.3rem; align-items: center; }
.trade-val input { width: 100%; min-width: 0; padding: 0.25rem 0.4rem; border: 1px solid #d5dbe2; border-radius: 6px; font: inherit; font-size: 0.95rem; }
.trade-lease { margin-top: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; background: #fdf6e7; font-size: 0.9rem; }
.trade-strip { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; padding: 0.65rem 0.8rem; border: 1px solid #ecd9b0; border-radius: 12px; background: #fdf6e7; color: #1f2a37; text-decoration: none; }
.trade-strip-ic { flex: none; display: inline-flex; color: #8a5a00; }
.trade-strip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trade-strip-val { flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.trade-strip-val small { display: block; font-size: 0.72rem; font-weight: 400; color: #6b7686; }
/* A long email's rest, or its quoted reply, folded under the message (MessageThread.safeHtml). */
.bubble-text .msg-more { margin-top: 0.4rem; }
.bubble-text .msg-more > summary { cursor: pointer; font-size: 0.82rem; color: #0a5cb8; }
.bubble.out .bubble-text .msg-more > summary { color: inherit; text-decoration: underline; }
.bubble-text a { word-break: break-word; }

/* Numbers on a car (lib/desking/NumbersCard.cfc): Ask's car_numbers payment card. */
.nums-card { margin: 0.7rem 0; padding: 0.8rem 0.9rem; border: 1px solid #dfe3e8; border-radius: 14px; background: #fff; display: grid; gap: 0.55rem; }
.nums-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.nums-price { display: grid; text-align: right; gap: 0.1rem; }
.nums-price strong { font-size: 1.1rem; }
.nums-grid { display: grid; gap: 0.3rem; align-items: center; }
.nums-col { text-align: center; }
.nums-row { padding-right: 0.3rem; white-space: nowrap; }
.nums-cell { display: grid; text-align: center; padding: 0.45rem 0.3rem; border-radius: 10px; background: #f3f6fa; }
.nums-cell strong { font-size: 1.02rem; }
.nums-cell small { color: #5d6875; font-size: 0.75rem; }
.nums-cash { display: grid; justify-items: start; gap: 0.1rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: #f3f6fa; }
.nums-cash strong { font-size: 1.4rem; }
.nums-incs { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.nums-actions { display: flex; justify-content: flex-end; }

/* Desk a car (desk-start.cfm) and a car-only desk's Attach to a customer (desk.cfm). */
.desk-startpage { max-width: 40rem; display: grid; gap: 0.6rem; }
.desk-start-form { display: grid; gap: 0.55rem; }
.desk-start-form label { font-weight: 600; }
.desk-start-car { width: 100%; text-align: left; border: 0; background: none; font: inherit; cursor: pointer; }
.desk-start-types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.desk-start-types .ss-btn { min-height: 44px; padding: 0.4rem 1rem; }
.desk-attach { margin: 0.3rem 0; }
.desk-attach > summary { cursor: pointer; list-style: none; }
.desk-attach .link-search { margin: 0.4rem 0; }
.nums-dealer { font-size: 0.85rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: #fff7e6; color: #6b4e00; }
.desk-start-sc { margin: 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: #eaf2fd; color: #1d3b63; font-size: 0.9rem; }

/* Ask: slash-command menu, the History button and sheet (assets/ask.js, ask.cfm). */
.ask-cmds[hidden] { display: none; }
.ask-cmds { position: sticky; bottom: 4.2rem; z-index: 5; display: grid; gap: 0.1rem; margin: 0 0 0.3rem; padding: 0.3rem; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12); }
.ask-cmds button { display: flex; gap: 0.6rem; align-items: baseline; width: 100%; padding: 0.55rem 0.6rem; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.ask-cmds button:hover, .ask-cmds button:focus { background: #eef3fb; }
.ask-cmds code { font-weight: 700; color: #0a5cb8; }
.ask-cmds span { color: #5d6875; font-size: 0.9rem; }
.ask-hist-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dfe3e8; border-radius: 50%; background: #fff; color: #44505c; cursor: pointer; }
@media (min-width: 700px) { .ask-history { width: min(32rem, calc(100vw - 2rem)); } }
.ask-history .link-search { margin: 0.2rem 0 0.6rem; }
.ask-hist-list { display: grid; gap: 0.1rem; max-height: 65vh; overflow-y: auto; }
.ask-hist-day { padding: 0.6rem 0.4rem 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.ask-hist-row { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; padding: 0.6rem 0.5rem; border-radius: 10px; color: inherit; text-decoration: none; }
.ask-hist-row:hover, .ask-hist-row.active { background: #eef3fb; }
.ask-hist-row .ask-chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-hist-new { justify-content: flex-start; align-items: center; color: #0a5cb8; font-weight: 600; }
.ask-local .ask-answer code { font-weight: 700; }

/* The activity log (customer.cfm Notes & activity): what to log, then what happened. */
.log-kinds, .log-group { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }
.log-kind input, .log-opt input { position: absolute; opacity: 0; pointer-events: none; }
.log-kind span, .log-opt span { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0.3rem 0.75rem; border: 1px solid #c9d0d8; border-radius: 999px; background: #fff; font-size: 0.9rem; cursor: pointer; }
.log-kind input:checked + span { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
.log-opt input:checked + span { border-color: #0a5cb8; background: #eaf2fd; color: #0a3d7a; box-shadow: inset 0 0 0 1px #0a5cb8; }
.log-kind input:focus-visible + span, .log-opt input:focus-visible + span { outline: 2px solid #0a5cb8; outline-offset: 2px; }
.log-group { display: none; }
.log-form[data-kind="call"] .log-group[data-for="call"], .log-form[data-kind="visit"] .log-group[data-for="visit"], .log-form[data-kind="other"] .log-group[data-for="other"] { display: flex; }
.note-kind { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.9rem; color: #0a3d7a; }
.tl-log { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
/* The customer page's timeline, tightened: "Timeline" and the Now picker on one line, the Log buttons one row
   under it that scrolls sideways (room for more actions), then the entries. */
.cust-tl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; align-items: center; }
.cust-tl > * { grid-column: 1 / -1; min-width: 0; }
.cust-tl > .cust-tl-h { grid-column: 1; grid-row: 1; margin: 0; }
.cust-tl > .tl-filters { grid-column: 2; grid-row: 1; flex-wrap: nowrap; margin: 0; }
.cust-tl > .tl-filters { display: contents; }
.cust-tl > .tl-filters .tl-pick { grid-column: 2; grid-row: 1; width: auto; min-width: 0; flex: none; margin: 0; }
.cust-tl > .tl-filters .tl-now-what { grid-column: 1 / -1; grid-row: 2; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-tl > .tl-log { grid-row: 3; flex-wrap: nowrap; overflow-x: auto; margin: 0.55rem -0.9rem 0.5rem; padding: 0 0.9rem 0.1rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.cust-tl > .tl-log::-webkit-scrollbar { display: none; }
.cust-tl > .tl-log .pill-link { flex: none; min-height: 36px; padding: 0.25rem 0.8rem; font-size: 0.88rem; white-space: nowrap; }

/* Ask about this customer (customer.cfm #cust-ask, assets/cust-ask.js): a slim bar at the bottom of
   the profile -- above the phone's tab bar -- and a sheet that rises from the bottom with Ask in it. */
.cust-ask-bar { position: fixed; z-index: 8990; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 0.3rem; width: min(36rem, calc(100vw - 2rem)); padding: 0.3rem; border-radius: 999px;
    background: #fff; border: 1px solid #dfe3e8; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.14); }
.cust-ask-open { flex: 1; display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.8rem; border: 0; background: none; font: inherit; color: #5d6875; text-align: left; cursor: pointer; }
.cust-ask-open svg { color: #7b4fd6; flex: none; }
.cust-ask-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-ask-mic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #0a5cb8; color: #fff; cursor: pointer; }
main:has(~ .cust-ask), body:has(#cust-ask) main { padding-bottom: 5rem; }
.cust-ask.is-open .cust-ask-bar { display: none; }
.cust-ask-sheet { position: fixed; z-index: 9100; left: 50%; transform: translateX(-50%) translateY(var(--cad, 0px)); transition: transform 0.2s ease; bottom: 0; width: min(46rem, 100vw); height: min(72vh, 44rem);
    display: flex; flex-direction: column; background: #fff; border: 1px solid #dfe3e8; border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.18); }
.cust-ask-head { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 0.9rem 0.5rem; border-bottom: 1px solid #eef0f3; }
/* The handle (assets/cust-ask.js): drag the sheet down to put it away, or tap it. A wide strip to hit, a small bar to see. */
.cust-ask-grab { position: absolute; top: 0; left: 50%; width: 120px; height: 22px; margin-left: -60px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.cust-ask-grab::before { content: ""; position: absolute; top: 0.35rem; left: 40px; width: 40px; height: 4px; border-radius: 2px; background: #d3d8de; transition: background 0.15s; }
.cust-ask-grab:hover::before, .cust-ask-grab:focus-visible::before, .cust-ask-sheet.is-dragging .cust-ask-grab::before { background: #9aa4b0; }
.cust-ask-sheet.is-dragging { transition: none; }
.cust-ask-sheet.is-dragging .cust-ask-grab { cursor: grabbing; }
.cust-ask-sheet.is-dragging iframe { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cust-ask-sheet { transition: none; } }
.cust-ask-title { flex: 1; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.cust-ask-title svg { color: #7b4fd6; }
.cust-ask-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f3f6; cursor: pointer; }
.cust-ask-sheet iframe { flex: 1; width: 100%; border: 0; }
.cust-ask-sheet[hidden] { display: none; }
/* Swiped down (assets/cust-ask.js, .cust-ask.is-min): the bar shrinks to a short line where it was, like the
   iPhone's home bar; swipe it up or tap it and the bar comes back. Only the line takes taps, the rest passes through. */
.cust-ask-peek { display: none; }
/* With a mouse there's no swipe: a small minimize button beside the mic does it. */
.cust-ask-hide { display: none; flex: none; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #5f6368; cursor: pointer; }
.cust-ask-hide:hover, .cust-ask-hide:focus-visible { background: #f1f3f6; color: #1a1a1a; }
@media (hover: hover) and (pointer: fine) { .cust-ask-hide { display: grid; } }
.cust-ask.is-min .cust-ask-bar { background: none; border-color: transparent; box-shadow: none; justify-content: center; pointer-events: none; }
.cust-ask.is-min .cust-ask-bar > :not(.cust-ask-peek) { display: none; }
.cust-ask.is-min .cust-ask-peek { display: block; position: relative; width: 132px; height: 100%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; touch-action: none; animation: cust-ask-peek-in 0.2s ease both; }
.cust-ask.is-min .cust-ask-peek::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: #7b4fd6; opacity: 0.55; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.2); }
.cust-ask.is-min .cust-ask-peek:focus-visible::before, .cust-ask.is-min .cust-ask-peek:hover::before { opacity: 0.85; }
.cust-ask-bar.is-swiping { transition: none; }
.cust-ask-bar.is-going { transition: translate 0.16s ease-in, opacity 0.16s ease-in; opacity: 0; }
.cust-ask-bar.is-back { animation: cust-ask-back 0.2s ease-out both; }
@keyframes cust-ask-peek-in { from { opacity: 0; scale: 0.6 1; } }
@keyframes cust-ask-back { from { opacity: 0; scale: 0.94 0.7; } }
@media (prefers-reduced-motion: reduce) { .cust-ask.is-min .cust-ask-peek, .cust-ask-bar.is-back { animation: none; } .cust-ask-bar.is-going { transition: none; } }
@media (max-width: 820px) {
    /* Beside the menu pill (lib/Layout.cfc fabMenu; --fab-w from assets/fab.js) at the bottom left or right,
       above it at the bottom center, full width when it's at the top. */
    /* Same height, shape and edges as the pill, an even gap between them. */
    .cust-ask-bar { box-sizing: border-box; height: var(--fab-h); left: var(--fab-edge); right: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)); width: auto; transform: none; bottom: var(--fab-bottom); padding: 0.35rem; }
    .cust-ask-bar .cust-ask-mic { width: 44px; height: 44px; }
    /* Narrow beside a wide pill (Back + the store): the prompt shrinks, the mic stays. */
    .cust-ask-bar { min-width: 0; }
    .cust-ask-bar .cust-ask-open { min-width: 0; padding: 0 0.6rem; }
    .cust-ask-bar .cust-ask-mic { flex: none; }
    /* The quote open over the profile (customer.cfm deskShow): its payment bar has the line, the Ask bar steps aside;
       back on the profile side it's the other way round (html.desk-atprofile .desk-paybar). */
    html.desk-open:not(.desk-atprofile) .cust-ask-bar { display: none; }
    html[data-fab="bl"] .cust-ask-bar { left: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)); right: var(--fab-edge); }
    html[data-fab="bc"] .cust-ask-bar { right: var(--fab-edge); bottom: var(--fab-above); }
    html[data-fab^="t"] .cust-ask-bar { right: var(--fab-edge); }
    html[data-fab="bc"] body:has(#cust-ask) main { padding-bottom: 8.5rem; }
    .cust-ask-sheet { height: calc(100vh - 5rem); height: calc(100dvh - 5rem); border-radius: 16px 16px 0 0; }
}
/* Ask's mic (assets/ask.js voice input): red while it listens. */
.ask-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dfe3e8; border-radius: 50%; background: #fff; color: #44505c; cursor: pointer; }
.ask-form.is-listening .ask-mic { background: #d92d20; border-color: #d92d20; color: #fff; animation: ask-mic-pulse 1.2s ease-in-out infinite; }
@keyframes ask-mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(217, 45, 32, 0.18); } }
@media (prefers-reduced-motion: reduce) { .ask-form.is-listening .ask-mic { animation: none; } }
/* Ask in a customer's sheet: their prompts up top, no long footer or intro. */
.ask-for-customer .ask-foot, .ask-for-customer .ask-empty > p, .ask-for-customer .ask-empty-icon { display: none; }
.ask-for-customer .ask-empty h1 { font-size: 1.1rem; margin: 0.4rem 0 0.8rem; }
.ask-for-customer .ask-chats, .ask-for-customer .ask-hist-btn { display: none; }

/* Working on (lib/TouchLog.cfc): Home's strip, the Customers tab, the star by a customer's name. */
.home-working { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; min-width: 0; }
.home-working-k { flex: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5d6875; text-decoration: none; padding: 0.6rem 0.2rem; }
a.home-working-k:hover, a.home-working-k:focus-visible { color: #0a5cb8; text-decoration: underline; text-underline-offset: 3px; }
.home-working-list { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.15rem 0.1rem 0.35rem; scrollbar-width: none; min-width: 0; }
.home-working-list::-webkit-scrollbar { display: none; }
.home-working-chip { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem 0.25rem 0.3rem; min-height: 40px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; color: inherit; text-decoration: none; white-space: nowrap; font-size: 0.92rem; }
.home-working-chip.is-pinned { border-color: #e7b85c; }
.home-working-pin { color: #c98a00; font-size: 0.8rem; }
.home-working-all { padding-left: 0.8rem; color: #0a5cb8; }
.working-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e6effa; color: #0a3d7a; font-size: 0.78rem; font-weight: 700; }
.working-row { display: flex; align-items: center; gap: 0.5rem; }
.working-link { flex: 1; display: flex; align-items: center; gap: 0.7rem; min-width: 0; color: inherit; text-decoration: none; }
.working-star { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #9aa4b0; font-size: 1.3rem; line-height: 1; cursor: pointer; vertical-align: middle; }
.working-star.is-on { color: #e0a100; }
h1 .working-star { width: 32px; height: 32px; font-size: 1.2rem; }
.working-page > p { margin-top: 0; }

/* Customer header B (customer.cfm): the name opens their details; Call / Messages / ... beside it.
   The record checks hide until picked from ... */
.pos-customer-main { flex: 1; }
.pos-name-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pos-name-row h1 { display: flex; align-items: center; gap: 0.3rem; flex: 0 1 auto; min-width: 0; }
.pos-customer h1 a.pos-name-edit { display: inline-flex; align-items: center; min-width: 0; }
.pos-name-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-customer h1 a.pos-name-edit { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pos-name-edit:hover { color: #0a5cb8; }
.pos-name-edit:active { opacity: 0.6; }
.pos-name-go { display: inline-flex; vertical-align: middle; margin-left: 0.1rem; color: #9aa3ae; }
.pos-icons { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex: none; }
.pos-icon, .conv-menu summary.pos-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #c9d2dd; border-radius: 50%; background: #fff; color: #0a5cb8; letter-spacing: 0; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pos-icon:hover { background: #f4f7fb; }
.pos-icon:active { transform: scale(0.94); }
.pos-more .conv-menu-list { right: 0; left: auto; min-width: 17rem; }
.pos-sync:not([open]) { display: none; }
.pos-contact { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-body { display: grid; gap: 0.5rem; padding: 0.8rem 1rem 1.1rem; }
.call-num { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0 1rem; border-radius: 14px; background: #1f7a3a; color: #fff; font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.call-num:active { opacity: 0.85; }
.call-num small { color: #d9f0df; font-weight: 400; }
.call-log { display: grid; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid #eef0f3; }
.call-log-h { font-weight: 600; }
.call-outcomes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.call-outcomes .pill-btn { min-height: 44px; padding: 0 0.9rem; border: 1px solid #c9d2dd; border-radius: 999px; background: #fff; color: #0a5cb8; font-weight: 600; }
.call-outcomes .pill-btn:active { background: #e8f0fb; }
.call-log input[type="text"] { min-height: 44px; padding: 0 0.8rem; border: 1px solid #c9d2dd; border-radius: 10px; font: inherit; font-size: 16px; }
.call-log .link-btn { justify-self: start; }
.call-body.called .call-log { border-top-color: #0a5cb8; }
.call-body.called .call-log-h { color: #0a5cb8; }
@media (max-width: 820px) {
    .pos-icons { gap: 0.3rem; }
    .pos-icon, .conv-menu summary.pos-icon { width: 36px; height: 36px; }
    .pos-customer .pos-name-row h1 { font-size: 1.2rem; }
    .pos-customer .avatar { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; }
    .pos-name-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
    .pos-name-go { display: none; }
    .pos-name-row h1 .working-star { width: 28px; height: 28px; flex: none; }
}

/* A keyboard is up (assets/app-nav.js): the tab bar steps aside, as in a native app. */
html.kb-open .fab-btn { display: none; }

/* Contact sheet tabs (customer.cfm #call-sheet): Call / Visit / Other; only the picked one shows. */
.cs-seg { display: flex; padding: 3px; border-radius: 10px; background: #eef1f5; }
.cs-seg button { flex: 1; min-height: 38px; border: 0; border-radius: 8px; background: none; color: #5f6368; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.cs-seg button.on { background: #fff; color: #1f2a37; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.call-body .cs-pane[data-for="visit"], .call-body .cs-pane[data-for="other"] { display: none; }
.call-body[data-tab="visit"] .cs-pane[data-for="call"], .call-body[data-tab="other"] .cs-pane[data-for="call"] { display: none; }
.call-body[data-tab="visit"] .cs-pane[data-for="visit"], .call-body[data-tab="other"] .cs-pane[data-for="other"] { display: grid; }
.cs-pane[data-for="call"] { display: grid; gap: 0.5rem; }
.call-sheet .cs-grab { display: none; }
@media (max-width: 600px) { .call-sheet .cs-grab { display: block; } }
.call-log.cs-pane[data-for="visit"], .call-log.cs-pane[data-for="other"] { margin-top: 0; padding-top: 0.2rem; border-top: 0; }

/* Ask in a panel or the customer's sheet (ask.cfm?embed=1): the chat scrolls in its own box between
   the top and the question box, which sits at the bottom (no tab bar in there), so the newest
   message and the "Looking it up" status stay in view. */
html:has(.ask-embed), body.page-none:has(.ask-embed) { height: 100%; overflow: hidden; }
.ask-embed .ask-main { height: 100vh; height: 100dvh; min-height: 0; }
.ask-embed .ask-thread { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: 0.5rem; }
.ask-embed .ask-form { position: static; bottom: auto; padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)); }

/* ==== Desk worksheet cleanup (2026-10-16) ====================================================
   Sections read as plain headers, not grey bars: the name on the left, and -- only while the
   section is folded -- its amount on the right. The price block is MSRP, sale price, incentives
   (taken off), then Customer price. "+ Add" lists are rows (name, price), not bubbles. */
.desk-ws .desk-sheet .desk-band > summary > h3 { min-height: 44px; padding-top: 0; padding-bottom: 0; border-top: 1px solid #e3e7ec; border-bottom: none; background: #fff;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: #1f2a37; text-transform: none; }
.desk-ws .desk-sheet .desk-band > summary:hover > h3 { background: #f7f9fc; }
.desk-ws .desk-sheet .desk-band[open] > summary > h3 { color: #3d5270; }
.desk-ws .desk-sheet .desk-band[open] > summary .db-total { visibility: hidden; }
.desk-ws .desk-sheet .desk-band > summary .db-total { font-weight: 500; color: #3d5270; }
.desk-ws .desk-sheet .desk-band > .desk-grid { border-top: 1px solid #eef0f3; }
/* Incentives sits in the price block as a line that's taken off: its folded amount reads -$3,000. */
.desk-ws .desk-sheet #incentives > summary > h3 { font-weight: 500; }
.desk-ws .desk-sheet #incentives[open] > .desk-grid { background: #fbfcfd; }
/* Customer price: the price block's result. */
.desk-ws .desk-sheet .desk-custprice .dcp-row { min-height: 52px; background: #f6f8fa; border-top: 1px solid #d5dbe2; }
.desk-ws .desk-sheet .desk-custprice .dcp-row > span { font-weight: 700; color: #1f2a37; }
.desk-ws .desk-sheet .desk-custprice .dcp-row > strong { font-size: 1.05rem; font-weight: 700; }
.desk-ws .desk-sheet .desk-custprice .dcp-row .desk-duenote { font-weight: 500; }
/* A gap after Customer price, before the rest of the deal (products, down payment, fees, tax). */
.desk-ws .desk-sheet .desk-custprice { margin-bottom: 0.6rem; border-bottom: 1px solid #e3e7ec; }
/* "+ Add a product / incentive": a list of rows, name on the left and its price on the right. */
.desk-add-list { display: flex; flex-direction: column; gap: 0; padding: 0 0 0.3rem; }
.dl-add .desk-add-list { padding: 0 0 0.4rem; }
.desk-add-list .pill-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 0.9rem;
  border: 0; border-top: 1px solid #f0f2f5; border-radius: 0; background: none; color: #1f2a37; font: inherit; font-size: 0.95rem; font-weight: 500; text-align: left; cursor: pointer; }
.desk-add-list .pill-btn:hover, .desk-add-list .pill-btn:focus-visible { background: #f2f6fc; }
.desk-add-list .pill-btn .muted { font-variant-numeric: tabular-nums; }
.dl-add[open] > summary { color: #3d5270; }
/* The Alt-letter badges and the "Hold Alt" hint show only while Alt is held. */
.desk-althint { display: none; }
.desk-ak { display: none; }
.desk-alt-on .desk-ak { display: inline-block; }
/* Desk header: the car, one meta line (status · customer · VIN · asking), the handshake and the
   settings gear on the right. The quote tabs end in "+" and "···" (the actions tray). */
.desk-head { display: flex; align-items: flex-start; gap: 0.8rem; }
.desk-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.desk-head > .desk-head-tools { flex: 0 0 auto; margin: 0.2rem 0 0; }
.desk-meta { font-size: 0.9rem; line-height: 1.5; }
.desk-meta .dr-st { font-weight: 600; }
.desk-attach > summary { min-height: 36px; display: inline-flex; align-items: center; }
.pos-badges:not(:has(*)) { display: none; }
.desk-head-settings { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #3d5270; }
.desk-head-settings:hover { background: #eef2f7; }
.quote-add { width: 44px; height: 44px; }
.quote-more { display: inline-flex; align-items: center; justify-content: center; border-color: #c9d0d8; color: #3d5270; }
.quote-more[aria-expanded="true"] { background: #0a5cb8; border-color: #0a5cb8; color: #fff; }
.pane-head h2 .desk-qedit { font-size: 1.15rem; font-weight: 700; padding-left: 0.3rem; margin-left: -0.3rem; }
.pane-head h2 .desk-qedit .pill { font-size: 0.72rem; font-weight: 600; }
/* The summary's title row wraps (title, then the links) rather than widening the page on a phone. */
.desk-pane > .pane-head { flex-wrap: wrap; row-gap: 0.2rem; min-width: 0; }
.desk-pane > .pane-head h2 { min-width: 0; }
.pos.desk > .pos-left, .pos.desk > .pos-pane { min-width: 0; }
.desk-headlinks { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 1.2rem; margin: 0.2rem 0 0.2rem; }
.desk-headlinks > details { margin: 0; }
.desk-headlinks > details[open] { flex: 1 1 100%; order: 2; }
.desk-headlinks .desk-veh > summary, .desk-headlinks .desk-attach > summary { min-height: 44px; font-size: 0.92rem; color: #0a5cb8; cursor: pointer; list-style: none; }
.desk-headlinks summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) {
  .desk-head h1 { font-size: 1.2rem; line-height: 1.3; }
  .desk-meta { font-size: 0.85rem; }
  .quote-tabs { margin-top: 0.2rem; }
}
/* Price range bar (desk.cfm pricingHtml): low on the left, high on the right; each mark labelled at its
   own tick (Floor and MSRP above, Cost and Start below). Red under the floor, blue for the room to deal,
   grey over the start, hatched under cost. */
.desk-pricing .dp-head { align-items: center; margin-bottom: 0.2rem; }
.dp-rulelink { font-size: 0.8rem; font-weight: 500; }
.dp-track { height: 10px; margin: 0 0.4rem; background: #e3e7ec; }
.dp-zone-low { position: absolute; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: #f6c9c6; }
.dp-zone-loss { position: absolute; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: repeating-linear-gradient(135deg, rgba(197, 34, 31, 0.28) 0 3px, transparent 3px 7px); }
.dp-band { background: rgba(10, 92, 184, 0.32); border-radius: 0; }
.dp-tick { position: absolute; top: -3px; width: 2px; height: 16px; margin-right: -1px; background: #0a5cb8; }
.dp-tick-floor { background: #c5221f; }
.dp-inv { background: #6b7686; top: -5px; height: 20px; }
.dp-lbls { position: relative; height: 1.9rem; margin: 0 0.4rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-lbl { position: absolute; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: #3d4652; font-weight: 600; }
.dp-lbl small { font-size: 0.68rem; font-weight: 500; color: #6b7686; }
.dp-lbls-top .dp-lbl { bottom: 0.25rem; }
.dp-lbls-bottom .dp-lbl { top: 0.25rem; }
.dp-lbl.at-left { transform: translateX(100%); align-items: flex-start; }
.dp-lbl.at-right { transform: translateX(0); align-items: flex-end; }
.dp-lbl-floor { color: #a3201c; }
.dp-lbl-cost { color: #4b5563; }
.dp-lbl-start, .dp-lbl-msrp { color: #1f2a37; }
.dp-costline { margin: 0.2rem 0 0; font-size: 0.8rem; }
.dp-say { margin: 0.45rem 0 0; color: #1f2a37; font-size: 0.86rem; line-height: 1.45; }
.dp-bad { color: #c5221f; }
.dp-floor { margin: 0.2rem 0 0; font-size: 0.8rem; }
.dp-odd { margin: 0.3rem 0 0; padding: 0.3rem 0.5rem; border-radius: 8px; background: #fff8e6; color: #7a5200; font-size: 0.8rem; }
.desk-pricing .dp-head { text-align: left !important; }
/* Summary pane: every fold looks the same (title, its number, caret), one hairline apart. */
.desk-pane .desk-sumfold { border-top: 1px solid #e6e9ee; }
.desk-pane .desk-sumfold > summary { min-height: 44px; font-weight: 400; }
.desk-pane .desk-gross.desk-sumfold > summary { align-items: center; }
.desk-pane .desk-sumfold[open] > summary .desk-fold-caret { transform: rotate(180deg); }
.desk-pane > .pane-head h2 { flex: 1 1 auto; }
.pane-head h2 .desk-qedit { white-space: nowrap; }
.desk-pane > .pane-head .desk-pane-links { margin-left: auto; }
.desk-ws .desk-sheet .desk-add-list .pill-btn { padding-right: calc(36px + 0.55rem); }
/* "+ Add ...": the open list reads as a pick list -- an inset panel with a caption, each row a "+"
   button (name, then its price), and Close on the header. */
.dl-add[open] > .desk-add-list { margin: 0 0.9rem 0.8rem; padding: 0; border: 1px solid #d5dbe2; border-radius: 12px; background: #f7f9fc; overflow: hidden; box-shadow: 0 2px 8px rgba(31, 42, 55, 0.08); }
.dl-add[open] > .desk-add-list::before { content: "Tap one to add it"; display: block; padding: 0.5rem 0.9rem 0.4rem; color: #6b7686; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.desk-ws .desk-sheet .dl-add .desk-add-list .pill-btn { justify-content: flex-start; padding-right: 0.9rem; border-top: 1px solid #e6e9ee; background: #fff; }
.dl-add .desk-add-list .pill-btn::before { content: "+"; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 0.2rem; border-radius: 50%; background: #e8f0fb; color: #0a5cb8; font-weight: 700; line-height: 1; }
.dl-add .desk-add-list .pill-btn .muted { margin-left: auto; }
.dl-add .desk-add-list .pill-btn:hover, .dl-add .desk-add-list .pill-btn:focus-visible { background: #eef4fd; }
.dl-add .desk-add-list .pill-btn:hover::before { background: #0a5cb8; color: #fff; }
.dl-add > summary { box-sizing: border-box; }
.dl-add[open] > summary { color: #3d5270; }
.dl-add[open] > summary::after { content: "Close"; margin-left: auto; color: #6b7686; font-weight: 500; }
/* Fees > Apply a fee template: the same pick list, but each row replaces the fees, and the last row
   goes to the template builder (Desking settings > Fees). */
.dl-feetpl[open] > .desk-add-list::before { content: "Replaces every fee on this quote"; }
.dl-feetpl .desk-add-list .pill-btn::before { content: "\21C4"; font-size: 0.85rem; }
.dl-feetpl .desk-add-list a.dl-tpl-edit { color: #0a5cb8; text-decoration: none; }
.dl-feetpl .desk-add-list a.dl-tpl-edit::before { content: "\270E"; }
/* The template builder (Desking settings > Fees). */
.desk-tpl > summary { list-style: none; cursor: pointer; }
.desk-tpl > summary::-webkit-details-marker { display: none; }
.desk-tpl > summary h3 { display: flex; align-items: baseline; gap: 0.5rem; }
.desk-tpl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-bottom: 0.4rem; }
.desk-tpl-head .desk-field { flex: 1 1 14rem; }
.desk-ws .desk-sheet .desk-downgroup { border-top: 1px solid #e3e7ec; }

/* Credit application (lib/CreditAppView.cfc, assets/credit-app.js): the customer's form on /capture and the desk's page. */
.ca-form h1 { margin-bottom: 0.3rem; }
.ca-form h2 { font-size: 1.2rem; margin: 0; }
.ca-step { margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ca-sec { border: 1px solid #dfe4ea; border-radius: 14px; padding: 0.9rem 0.9rem 0.4rem; margin: 1rem 0 0; background: #fff; min-width: 0; }
.ca-sec legend { font-weight: 700; padding: 0 0.35rem; }
.ca-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 0.6rem; }
.ca-f { display: flex; flex-direction: column; grid-column: span 6; margin-bottom: 0.75rem; min-width: 0; }
.ca-half { grid-column: span 3; }
.ca-third { grid-column: span 2; }
.ca-l { font-size: 0.85rem; color: #4a5560; margin-bottom: 0.2rem; }
.ca-f input, .ca-f select { width: 100%; min-height: 46px; padding: 0.45rem 0.6rem; font: inherit; font-size: 16px; border: 1px solid #c4ccd6; border-radius: 10px; background: #fff; box-sizing: border-box; }
.ca-money { display: flex; align-items: center; gap: 0.3rem; }
.ca-secret { position: relative; display: block; }
.ca-secret input { padding-right: 4.2rem; }
.ca-peek { position: absolute; top: 0; right: 0; height: 100%; min-width: 44px; padding: 0 0.8rem; border: none; background: none; color: #0a5cb8; font: inherit; font-size: 0.95rem; cursor: pointer; }
.ca-money > span { color: #5f6b78; }
.ca-check { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0.4rem 0 0.8rem; line-height: 1.35; }
.ca-check input { width: 22px; height: 22px; flex: none; margin-top: 0.05rem; }
.ca-err, .ca-err-top { color: #b42318; font-size: 0.85rem; margin-top: 0.2rem; }
.ca-err-top { padding: 0.6rem 0.8rem; border-radius: 10px; background: #fdecea; font-size: 0.95rem; }
.ca-bad input, .ca-bad select, .ca-f [aria-invalid="true"], .ca-pad.ca-bad canvas { border-color: #d92d20; background: #fff8f7; }
.ca-co-toggle { margin: 0.9rem 0 0; }
.ca-copyaddr { display: block; margin: 0 0 0.5rem; padding-left: 0; }
.ca-co { margin-top: 1.4rem; padding-top: 0.6rem; border-top: 2px solid #dfe4ea; }
.ca-co-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.ca-legal { max-height: 16rem; overflow: auto; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; border-radius: 10px; background: #f4f6f8; font-size: 0.9rem; line-height: 1.45; }
.ca-legal p, .ca-privacy p { margin: 0 0 0.6rem; }
.ca-privacy { margin-bottom: 0.8rem; font-size: 0.9rem; }
.ca-sign { padding-top: 0.6rem; margin-top: 0.4rem; border-top: 1px solid #edf0f3; }
.ca-sign-who { font-weight: 700; margin-bottom: 0.2rem; }
.ca-pad { position: relative; margin-bottom: 0.3rem; }
.ca-pad canvas { display: block; width: 100%; height: 150px; border: 1px solid #c4ccd6; border-radius: 10px; background: #fff; touch-action: none; }
.ca-pad [data-ca-clear] { position: absolute; right: 0.4rem; top: 0.3rem; }
.ca-submit { display: block; width: 100%; min-height: 54px; margin: 1.2rem 0 0.4rem; font-size: 1.1rem; }
.ca-foot { text-align: center; }
.ca-received { padding: 0.6rem 0.8rem; border-radius: 10px; background: #e7f6ec; color: #1a7f37; font-weight: 600; }
@media (max-width: 420px) { .ca-half, .ca-third { grid-column: span 6; } .ca-grid .ca-third:has(select) { grid-column: span 3; } }

.ca-staff { max-width: 64rem; }
.ca-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.ca-bar-title { font-weight: 700; font-size: 1.15rem; flex: 1; min-width: 12rem; }
.ca-reveal { margin: 0.6rem 0; }
.ca-shown { padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff4e5; }
.ca-cols { display: grid; gap: 1rem; }
.ca-cols.two { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.ca-block { border: 1px solid #dfe4ea; border-radius: 14px; padding: 0.8rem 1rem; margin-top: 1rem; background: var(--surface, #fff); }
.ca-block h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.ca-dl { display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; margin: 0; }
.ca-dl dt, .ca-dl dd { margin: 0; padding: 0.32rem 0; border-bottom: 1px solid #f0f2f5; }
.ca-dl dt { color: #5f6b78; font-size: 0.88rem; }
.ca-dl dd { font-weight: 600; overflow-wrap: anywhere; }
.ca-dl .ca-sub { padding-top: 0.8rem; font-weight: 700; color: inherit; border-bottom: 0; }
[data-ca-copy] { cursor: copy; border-radius: 6px; }
[data-ca-copy]:hover { background: #eef4fb; }
.ca-copied { background: #e7f6ec !important; }
.ca-copied::after { content: " copied"; color: #1a7f37; font-weight: 400; font-size: 0.8rem; }
.ca-sigs { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.6rem; }
.ca-sigs figure { margin: 0; } .ca-sigs img { max-width: 22rem; width: 100%; border: 1px solid #dfe4ea; border-radius: 8px; background: #fff; }
.ca-sigs figcaption { font-size: 0.8rem; color: #5f6b78; }
.ca-log { margin: 0; padding-left: 1.1rem; }
.ca-legal-edit { display: block; margin-bottom: 0.7rem; }
.ca-legal-edit textarea { display: block; width: 100%; margin-top: 0.25rem; font: inherit; padding: 0.5rem; box-sizing: border-box; }
/* Printing an application: just the application -- no menu or nav, starts on page 1, sections run across pages (a row never splits). */
@media print {
    @page { size: letter; margin: 0.5in; }
    body:has(.ca-staff) > :not(main), body:has(.ca-staff) .fab, body:has(.ca-staff) .topnav { display: none !important; }
    body:has(.ca-staff), body:has(.ca-staff) main { margin: 0 !important; padding: 0 !important; background: #fff !important; min-height: 0 !important; }
    .ca-staff { max-width: none; font-size: 11pt; }
    .ca-bar .link-btn, .ca-bar button, .ca-reveal, .ca-noprint, .ca-copied::after { display: none !important; }
    .ca-bar { margin: 0 0 0.2rem; } .ca-bar-title { font-size: 14pt; }
    .ca-cols, .ca-cols.two { display: block; }
    .ca-block { break-inside: auto; border-radius: 0; border-color: #c9d0d8; padding: 0.4rem 0.7rem; margin-top: 0.6rem; box-shadow: none; }
    .ca-block h2 { break-after: avoid; }
    .ca-dl dt, .ca-dl dd { padding: 0.18rem 0; break-inside: avoid; }
    .ca-sigs { break-inside: avoid; }
}


/* Right now on the customer page (lib/CustomerNow.cfc): full-width cards under the tiles, above the timeline;
   the colored edge says what kind (red waiting, purple lead / PIN, amber trade / lease / duplicate, green desk). */
.cust-now { display: grid; gap: 0.45rem; margin: 0.8rem 0 0; }
.cust-now .swipe-row { border-radius: 14px; }
.now-card { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.55rem 0.8rem 0.55rem 0.7rem; border: 1px solid #e3e7ec; border-left: 4px solid #9aa9bb;
    border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.now-card:hover { text-decoration: none; background: #fafbfc; }
.now-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f1f4f8; color: #44505c; }
.now-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.now-label { font-size: 0.78rem; font-weight: 700; color: #5d6875; }
.now-text { font-size: 0.95rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.now-go { flex: none; color: #9aa4b0; font-size: 1.3rem; }
.now-card.tone-red { border-left-color: #d92d20; } .now-card.tone-red .now-ic { background: #fdecea; color: #b42318; } .now-card.tone-red .now-label { color: #b42318; }
.now-card.tone-purple { border-left-color: #7b4fd6; } .now-card.tone-purple .now-ic { background: #f1ebff; color: #6a3fc8; }
.now-card.tone-amber { border-left-color: #d69a1c; } .now-card.tone-amber .now-ic { background: #fdf3e1; color: #9a6400; }
.now-card.tone-green { border-left-color: #1a9a55; } .now-card.tone-green .now-ic { background: #e5f6ec; color: #13744a; }

/* The desk summary sheet's handle (assets/desk-pad.js sumGrab): tap or pull down to put the sheet away. */
.desk-sum-grab { display: none; }
html.desk-sumsheet .desk-sum-grab { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: calc(100% + 2rem); margin: -0.6rem -1rem 0.4rem;
    padding: 0.45rem 0 0.35rem; border: 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, 0.96); color: #5d6875; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; touch-action: none; }
html.desk-sumsheet .desk-sum-grab .dsg-bar { width: 40px; height: 5px; border-radius: 3px; background: #c9d0d8; }
html.desk-sumsheet .desk .desk-pane:not(.open) { transition: transform 0.15s ease; }
/* The quote on a customer's page has no "Full screen" (the same quote again on the desk page: two places for one
   view, Peter 2026-10-17). "‹ Profile" is the way back; the desk page is still there from Quotes / Desking. */
.desk-panel-bar > a.pill-link[href*="/desk?"] { display: none; }

/* Ask, modernized (ask.cfm): the question box is one rounded field with the mic and send inside it. On a phone:
   a slim top bar (Ask · History · New) instead of the chat list, the thread full height, the box at the bottom
   beside the menu pill (like the customer's Ask bar), and the fine print down to one line. */
.ask-top { display: none; }
.ask-box { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 0.3rem; padding: 0.3rem 0.3rem 0.3rem 0.4rem; border: 1px solid #cfd6de; border-radius: 26px; background: #fff;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1); transition: border-color 0.15s, box-shadow 0.15s; }
.ask-box:focus-within { border-color: #0a5cb8; box-shadow: 0 0 0 3px rgba(10, 92, 184, 0.15), 0 6px 20px rgba(16, 24, 40, 0.1); }
.ask-form .ask-box textarea { min-height: 44px; padding: 0.65rem 0.6rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ask-form .ask-box textarea:focus { box-shadow: none; }
.ask-box .ask-mic { width: 40px; height: 40px; border: 0; background: transparent; }
.ask-box .ask-min { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #5f6368; cursor: pointer; }
.ask-box .ask-min:hover, .ask-box .ask-min:focus-visible { background: #f1f3f6; color: #1a1a1a; }
.ask-box .ask-send { width: 40px; height: 40px; }
.ask-fine { margin: 1rem auto 0; max-width: 30rem; }
.ask-answer { font-size: 1rem; line-height: 1.55; }
.ask-q .bubble { border-radius: 20px 20px 6px 20px; padding: 0.6rem 0.95rem; }
@media (max-width: 820px) {
    .ask-layout:not(.ask-embed) .ask-chats { display: none; }
    .ask-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.4rem; margin: -0.6rem -1rem 0.4rem; padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1rem 0.5rem;
        background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #eef0f3; }
    .ask-top-t { flex: 1; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 1.1rem; }
    .ask-top-t .ui-i { color: #7b4fd6; }
    .ask-top-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.8rem; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; color: #1f2a37;
        font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
    .ask-top-new { border-color: #0a5cb8; background: #0a5cb8; color: #fff; }
    .ask-top-new span:first-child { font-size: 1.15rem; line-height: 1; }
    .ask-layout:not(.ask-embed) .ask-hist-btn { display: none; }
    .ask-layout:not(.ask-embed) .ask-main { min-height: 0; }
    .ask-layout:not(.ask-embed) .ask-thread { padding-bottom: 5.5rem; }
    .ask-layout:not(.ask-embed) .ask-foot { display: none; }
    .ask-layout:not(.ask-embed) .ask-form { margin: 0; position: fixed; z-index: 9000; left: var(--fab-edge, 1rem); right: calc(var(--fab-edge, 1rem) + var(--fab-w, 130px) + var(--fab-gap, 0.5rem)); bottom: var(--fab-bottom, 1rem);
        padding: 0; background: none; }
    html[data-fab="bl"] .ask-layout:not(.ask-embed) .ask-form { left: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)); right: var(--fab-edge); }
    html[data-fab="bc"] .ask-layout:not(.ask-embed) .ask-form { right: var(--fab-edge); bottom: var(--fab-above); }
    html[data-fab^="t"] .ask-layout:not(.ask-embed) .ask-form { right: var(--fab-edge); }
    .ask-layout:not(.ask-embed) .ask-box { min-height: var(--fab-h, 54px); box-sizing: border-box; align-items: center; }
    /* The pill's height exactly: the box's padding and border come off the text box's height. */
    .ask-layout:not(.ask-embed) .ask-box textarea { min-height: calc(var(--fab-h, 54px) - 0.6rem - 2px); }
    /* The chat fades out under the bar and the pill instead of being cut off by them. */
    .ask-layout:not(.ask-embed)::after { content: ""; position: fixed; z-index: 8990; left: 0; right: 0; bottom: 0; height: calc(var(--fab-bottom, 1rem) + var(--fab-h, 54px) + 1.2rem);
        background: linear-gradient(to top, #ffffff 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
    .ask-layout:not(.ask-embed) .ask-cmds { position: fixed; z-index: 9001; left: 1rem; right: 1rem; bottom: calc(var(--fab-above, 5rem)); }
    .ask-empty { padding: 1rem 0 0.5rem; }
    .ask-layout:not(.ask-embed) .ask-empty > p:not(.ask-fine), .ask-layout:not(.ask-embed) .ask-empty h1 .beta-pill { display: none; }
    .ask-empty h1 { font-size: 1.25rem; }
    .ask-suggest { grid-template-columns: 1fr; gap: 0.45rem; }
    .ask-suggestion { min-height: 48px; }
}
/* In the customer's Ask sheet (embed): the same rounded box, full width at the bottom. */
.ask-embed .ask-form { padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
.ask-embed .ask-box textarea { min-height: 42px; padding: 0.6rem 0.55rem; }

/* Desk, phone: one line per row with room to breathe (details live behind each row's (i)). */
@media (max-width: 600px) {
    .desk-ws .desk-grid > .desk-field, .desk-ws .desk-grid > .desk-check { min-height: 56px; }
    .desk-ws .desk-sheet .desk-taxband > summary h3 { white-space: nowrap; }
    .desk-ws .desk-sheet .desk-band > summary .db-aside { margin-right: 0.7rem; }
}

/* The bar on the pill's line moved up one level, full width (html[data-barup], assets/fab.js) -- only matters with
   the pill at the bottom left or right. While moving: the two spots, the nearer one lit. */
@media (max-width: 820px) {
    html[data-barup="1"][data-fab="br"] .cust-ask-bar, html[data-barup="1"][data-fab="bl"] .cust-ask-bar { left: var(--fab-edge); right: var(--fab-edge); bottom: var(--fab-above); }
    html[data-barup="1"] body:has(#cust-ask) main { padding-bottom: 9rem; }
    .cust-ask-bar, .desk-paybar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .bar-lifted { transition: none !important; box-shadow: 0 14px 34px rgba(16, 24, 40, 0.3) !important; z-index: 9750 !important; }
    .bar-targets { position: fixed; inset: 0; z-index: 9745; background: rgba(15, 23, 42, 0.16); pointer-events: none; animation: fab-tg-in 0.15s ease both; }
    .bar-target { position: fixed; left: var(--fab-edge); height: var(--fab-h); box-sizing: border-box; display: grid; place-items: center; border: 2.5px dashed #0a5cb8; border-radius: 999px;
        background: rgba(255, 255, 255, 0.7); color: #0a5cb8; font-size: 0.8rem; font-weight: 600; transition: background 0.12s, transform 0.12s; }
    .bar-target[data-up="1"] { right: var(--fab-edge); bottom: var(--fab-above); }
    .bar-target[data-up="0"] { right: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)); bottom: var(--fab-bottom); }
    html[data-fab="bl"] .bar-target[data-up="0"] { left: calc(var(--fab-edge) + var(--fab-w, 130px) + var(--fab-gap)); right: var(--fab-edge); }
    .bar-target.is-on { background: rgba(10, 92, 184, 0.22); border-style: solid; transform: scale(1.02); }
}
@media (max-width: 600px) {
    html[data-barup="1"][data-fab="br"] .desk-paybar, html[data-barup="1"][data-fab="bl"] .desk-paybar { left: var(--fab-edge) !important; right: var(--fab-edge) !important; bottom: var(--fab-above) !important; }
    html[data-barup="1"].desk-sumsheet .desk .desk-pane:not(.open) { bottom: calc(var(--fab-above) + var(--fab-h) + 0.6rem) !important; }
}

/* iPhone: bars pinned to the bottom put back where the screen really ends when iOS leaves the page short
   (assets/app-nav.js --vv-fix; 0 normally). */
.fab-bar, .cust-ask-bar, .desk-paybar, .desk-forward, .slide-forward, .ask-layout:not(.ask-embed) .ask-form { translate: 0 var(--vv-fix, 0px); }
.cust-ask-bar { translate: 0 calc(var(--vv-fix, 0px) + var(--cas, 0px)); }

/* Phones, less said (Peter, 2026-10-18): the explanations a desk screen has room for (.phone-hide) go; Home's
   big tiles -- the same places as the menu panel -- become one row of chips that keep their counts. */
@media (max-width: 820px) {
    .phone-hide { display: none !important; }
    .home-stack .home-tiles, .home-stack .home-small { display: flex; flex-wrap: nowrap; gap: 0.45rem; overflow-x: auto; margin: 0 -1rem 0.4rem; padding: 0.1rem 1rem 0.3rem;
        scrollbar-width: none; overscroll-behavior-x: contain; }
    .home-stack .home-tiles::-webkit-scrollbar, .home-stack .home-small::-webkit-scrollbar { display: none; }
    .home-stack .home-tiles .tile, .home-stack .home-small .home-small-tile { flex: none; position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem;
        min-height: 42px; height: auto; aspect-ratio: auto; padding: 0.3rem 0.85rem 0.3rem 0.55rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; }
    .home-stack .home-tiles .tile-hint { display: none; }
    .home-stack .home-tiles .tile-label { flex-direction: row; font-size: 0.92rem; margin: 0; padding: 0; line-height: 1.2; }
    .home-stack .home-tiles .tile > *, .home-stack .home-small .home-small-tile > * { margin-top: 0; margin-bottom: 0; align-self: center; }
    .home-stack .home-tiles .tile-icon { width: auto; height: auto; margin: 0; }
    .home-stack .home-tiles .tile-icon .ui-i { width: 18px; height: 18px; }
    .home-stack .home-tiles .tile-badge, .home-stack .home-small .tile-badge { position: static; order: 3; margin: 0; }
    .home-stack .home-tiles .tile[href*="prospecting"], .home-stack .home-small-tile[href*="settings"] { display: none; }
}

/* Price bar drag: the readout above the knob (assets/desk-pad.js bubble). */
.dp-bubble { position: fixed; z-index: 9800; display: flex; align-items: baseline; gap: 0.55rem; padding: 0.5rem 0.75rem; border-radius: 12px; background: #1d2733; color: #fff;
    font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.28); pointer-events: none; }
.dp-bubble[hidden] { display: none; }
.dp-bubble::after { content: ""; position: absolute; top: 100%; left: var(--tail, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: #1d2733; }
.dp-bubble b { font-size: 1.05rem; }
.dp-bubble b.neg, .dp-bubble .neg { color: #ff8a80; }
.dp-bubble .pos { color: #8fd9a8; }
/* Phone: the result line with Use / Cancel sits above the bar, the bar at the bottom of the block by the thumb. */
@media (max-width: 600px) {
    .desk-pricing { display: flex; flex-direction: column; }
    .desk-pricing > * { order: 5; }
    .desk-pricing > .dp-head { order: 0; }
    .desk-pricing > .dp-dragline { order: 1; margin: 0.3rem 0 0.7rem; }
    /* While the finger is on the bar only the bubble shows: the line appearing above would push the bar under the thumb. */
    .desk-pricing:has(.dp-dragging) > .dp-dragline { display: none; }
    .desk-pricing > .dp-lbls-top { order: 2; }
    .desk-pricing > .dp-track { order: 3; }
    .desk-pricing > .dp-lbls-bottom { order: 4; }
}
/* Customer price: one figure beside the label, the breakdown in its (i). */
.desk-ws .desk-sheet .dcp-row > span:first-child { white-space: nowrap; }
.dcp-off { margin-left: 0.45rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #e6f4ea; color: #1e7e34; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.dcp-off.over { background: #fdecea; color: #c5221f; }