/* ============================================================
   The Car Buyers CRM, v5 BRAND (migrated 2026-08-26).
   The office edition of the brand system: white cards on the
   brand soft, violet hairlines, tinted status pills. The ONLY
   dark chrome left is the sidebar (see the SIDEBAR block, which
   carries its own scoped palette and ignores these tokens). The
   mobile tab bar reads these tokens like every other surface.

   TYPE. Two faces, one job each. --font (Manrope) is every
   proportional surface and inherits from body, so family is
   changed in ONE place, never in the 374 font-size rules.
   --font-display (Schibsted Grotesk) is display roles ONLY and
   never appears below 24px; --font never appears above 22px.
   That 2px gap is what keeps two matched grotesks from blurring
   into each other, so do not invent a lower display floor,
   raise the heading instead.

   MONO is for IDENTIFIERS, not for numbers: rego, VIN, bank and
   reference strings, the age column, where telling 0 from O is
   the point. Figures use tabular Manrope, which body turns on
   once with font-variant-numeric:tabular-nums. Do not add that
   property per rule and do not reach for font-feature-settings,
   the file has one mechanism.

   WEIGHT LADDER, four steps:
     400  body and table cell text
     500  secondary and meta
     600  card titles, buttons, emphasis
     700 / 800  display roles only
   Half of that rule holds today and half does not, so read it as
   the direction of travel, not an invariant the file already has.
   What DOES hold: 400, 500, 600, 700 and 800 are the only weights
   in the CRM and in the four portal stylesheets. Nothing sits at
   650, 550 or 750 any more. Those three used to snap up to the
   next Inter instance the page actually loaded, and Manrope ships
   as a variable face, so on the day the family changed they would
   have started rendering as true 650 / 550 / 750 and sixteen CRM
   surfaces plus twenty five portal ones would have quietly gone
   thinner, money figures and paperwork headings among them. They
   were snapped to the step they already rendered at, which is why
   700 is currently on far more than display roles.
   What does NOT hold: the ROLE half. 170 rules sit at 600 and 139
   at 700 against 5 at 400, so weight is not signalling yet. The
   6h audit that pushes table cell and meta text down to 400 / 500
   and pulls 700 back to display roles has NOT been run. It is a
   whole app visual change and it wants its own pass with browser
   evidence, not a line in a typography chunk.

   UPPERCASE TRACKING, two values on the caps micro label layer:
   .07em at 11px and below, .05em above 11px, nothing else. Five
   surfaces still carry a hair of tracking of their own: the avatar
   initials in .user-row .av, the mobile .tab label, .brandtag.sm,
   .age-exact and .wk-chip. None of the five is uppercase, so they
   are a different job, not a breach of this rule.

   THE ACCENT SPLIT. --accent is brand identity and selection
   (violet, and it is everywhere). --action is the apex, the one
   colour that means "tap me": the fill of .btn.primary, the one solid
   button on a given viewport, and otherwise only as words on its own
   light tint (--action-soft) for the smaller asks of the same tap, a
   queue row's next move and its call chip. --focus is the ring only.
   Do NOT paint --action onto the 90 var(--accent) sites.
   ============================================================ */
:root{
  --bg:#F6F7FB;            /* page background (the brand soft) */
  --bg-deep:#FAF9FD;       /* nested tint (board tiles, table heads, inputs) */
  --surface:#ffffff;       /* cards / panels */
  --surface-2:#F5F3FA;     /* hover surface */
  --surface-3:#ffffff;     /* elevated (popover — pairs with --shadow-pop) */
  --line:#E6E3F1;          /* hairline border (the brand hair) */
  --line-2:#D6D1E6;        /* stronger divider */
  --text:#070611;          /* primary text (the brand ink), 20.13:1 on white */
  --text-2:#3F3B52;        /* secondary, 10.72:1 */
  --muted:#6A6680;         /* muted (labels, meta), 5.49:1 */
  --faint:#9A96AC;         /* 2.86:1, under AA on every ground, so it is not a
                              text colour. Anything an operator has to read
                              takes --muted, and no new readable label may be
                              given this token. The sweep to enforce that is
                              PARTIAL, not finished: the sites named in the
                              brand migration spec 2b plus the operator
                              critical ones (empty state, cockpit hero field
                              keys, paperwork summary, the Form sub line, the
                              stage sort note, the SLA units in Settings)
                              moved on 2026-08-26. Roughly thirty low traffic
                              sites still read it, each to move as its own
                              chunk touches it. Treat this as a direction of
                              travel, not an invariant the file already holds.
                              The look and feel audit (6 Oct 2026) moved the
                              no rego mark, a car's #L code, the SLA note, the
                              queues' notes and the paperwork checks' note. */
  --accent:#7424E8;        /* brand violet: identity + selection */
  --action:#0765D2;        /* THE action blue. .btn.primary's fill.
                              5.52:1 both ways, where the brand's #087CFF
                              is 3.93:1 and fails as a 13px fill. */
  --action-2:#0857B4;      /* .btn.primary:hover, white on it is 6.92:1 */
  --action-soft:#E9F1FB;   /* the action blue at 9% on white, under
                              --action words: a row's next move, a call
                              chip */
  --focus:#087CFF;         /* the focus ring only (3:1 floor applies):
                              3.93:1 on white, 5.12:1 on the ink sidebar */
  --accent-2:#5417B0;      /* deep violet (links, money), 9.88:1 on white */
  --accent-soft:#F3ECFF;   /* violet tint bg */
  --ok:#0D7A55;            /* green, fine / success, 5.34:1 on white */
  --warn:#9a6310;          /* amber, warning, 5.04:1 on white */
  --bad:#b42323;           /* red, overdue / danger, 6.55:1 on white */
  --ok-bg:#e3f5ee; --warn-bg:#faf1dd; --bad-bg:#fdebeb;
  /* Per-stage hues (board bar, stage chip). ONE violet ramp graded by
     lightness along the pipeline, so violet answers "where in the
     pipeline" and green / amber / red keep "healthy, warning, overdue"
     to themselves. Every step clears 3:1 on the --line bar track.
     The NAMES are load-bearing: five call sites build --st-<stage> by
     string interpolation, and a missing token paints transparent
     instead of throwing. Change values, never names. */
  --st-action:#9764DF; --st-contacted:#8A51DB; --st-inspection_booked:#7D3ED8;
  --st-report_in:#702BD4; --st-offer:#6627C1; --st-pending_paperwork:#5C24AE; --st-pay_collect:#56229F; --st-outcome:#501F96;
  /* where a bought car is up to, an ordinal ramp on the brand violet
     (monotone lightness, one hue): Pay & collect, Rego & transfer, Done */
  --up-pc:#B79BF0; --up-rt:#7424E8; --up-done:#501F96;
  /* brands (The Car Buyers / EV Car Buyers), see server/brands.py */
  --brand-ev:#6A2BE8;      /* EV Car Buyers, the EV site's own on-light violet */
  --brand-tcb:#5F5E5A;     /* The Car Buyers, the CRM's existing neutral */
  /* the Home screen's charts (HOME CHARTS): a gridline lighter than the
     hairline, the violet a step lighter than the accent, the soft wash a
     normal day's arrivals are drawn in and the grey of its curve */
  --grid:#EFEDF5; --accent-mid:#B79BF0; --area:#F1EEF8; --ghost:#CFCBDD;
  --shadow-card:0 1px 2px rgba(7,6,17,.10),0 6px 20px rgba(7,6,17,.06);
  --shadow-pop:0 2px 6px rgba(7,6,17,.14),0 24px 64px rgba(7,6,17,.30);
  --fast:.16s ease-out;    /* state changes: hover, colour, opacity */
  --move:.28s cubic-bezier(.2,.7,.2,1); /* things that travel: drawers, the rail */
  --font:'Manrope','Manrope Fallback',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Schibsted Grotesk','Manrope',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:14px;           /* cards */  --radius-sm:12px; /* controls */
  /* --radius-xs is a deliberate step off the brand ladder: an operator
     control is roughly half a marketing page's, and a 22px tall rego
     plate at 12px reads as a lozenge. Four users, no more:
     .btn.sm, .rego, .user-out and the avatar tile .user-row .av,
     which sits beside .user-out and has to match it. */
  --radius-xs:8px;
  /* Sidebar geometry. The rail values are today's tablet values exactly, so
     the 48px nav target survives the change. ONE definition, read by the
     sidebar block, by the rail block and by .nav-item.on::before, which is
     what stops the active marker drifting off the edge the next time a
     width moves. */
  --sb-w:248px;  --sb-w-rail:64px;
  --sb-pad:12px; --sb-pad-rail:8px;
  /* The height the shell may use: the screen below the home screen app's
     status bar (APP SHELL). The inset is 0 in a browser tab. */
  --app-h:calc(100vh - env(safe-area-inset-top,0px));
}
/* The collapsed rail. js/shell.js sets this class before first paint and
   setRail() in js/app.js owns it after that. */
html.rail:not(.peek){--sb-w:var(--sb-w-rail);--sb-pad:var(--sb-pad-rail)}

/* ---- the peeking rail ----------------------------------------------------
   Resting state is the 64px rail. Hovering it floats the full panel out OVER
   the page, the way Eclipse, VS Code, Linear and Gmail all do it, and the
   toggle now pins it open rather than being the only way in.

   The sidebar is taken out of flow the moment the rail is on, and #view
   carries the 64px gutter instead. That is the whole trick: widening a fixed
   element cannot reflow anything, so a fifty row queue does not move a pixel
   while the labels slide over it.

   Hover only, and only where hover is real. On a touch screen there is no
   pointer to leave, so a panel that opened on tap would have no way to close
   without stealing a tap from the nav row underneath. */
html.rail .sidebar{position:fixed;top:env(safe-area-inset-top,0px);left:0;bottom:0;height:auto;z-index:60;
  transition:width var(--move)}
html.rail #view{margin-left:calc(var(--sb-w-rail) + env(safe-area-inset-left,0px))}
html.rail.peek .sidebar{box-shadow:0 24px 64px -12px rgba(7,6,17,.55)}
@media(prefers-reduced-motion:reduce){html.rail .sidebar{transition:none}}
@media(hover:none){html.rail.peek .sidebar{width:var(--sb-w-rail)}}
/* Metric matched fallback for the swap window. display=swap means the
   operator reads the fallback on every cold load, and a queue of fifty rows
   must not jump when Manrope lands under a cursor already moving to a row.
   src names Helvetica Neue and Arial so the fallback is never San Francisco,
   whose advance runs 6.3% narrower than Manrope. Measured in Chrome against
   Manrope at 13px: size-adjust 99% is the minimum mean advance error over a
   corpus of real queue strings, and the two overrides reproduce Manrope's
   ascent and descent exactly (426 / 120 at 400px). Re measure if the body
   face ever changes. */
@font-face{
  font-family:'Manrope Fallback';
  src:local('Helvetica Neue'),local('Arial');
  size-adjust:99%;
  ascent-override:107.6%;
  descent-override:30.3%;
  line-gap-override:0%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Opened from the home screen it is an app: no rubber band past the ends of
   the page. Only there: in a browser tab, pulling down past the top is how a
   phone reloads the page. On the root, whose value is the one the page's
   own scroller takes (the body's is not passed up to it). */
@media (display-mode:standalone){html{overscroll-behavior-y:none}}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14px;line-height:1.5;
  font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}
.mono,.num{font-family:var(--mono)}
/* A column's head is a word, whatever its column holds: the number font is
   for figures, rego, VIN and phone numbers (look audit round 3a, 7 Oct 2026) */
th.num{font-family:var(--font)}
.muted{color:var(--muted)} .sp{flex:1}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.85;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CFCBDD;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#BAB5CC}
::-webkit-scrollbar-track{background:transparent}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
::placeholder{color:var(--faint)}
@keyframes riseIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}

/* ============================================================ APP SHELL
   Opened from the home screen the CRM runs full screen (viewport-fit=cover
   in index.html), so on an iPhone or an iPad the status bar lies over the
   top of the page, and a notched phone held sideways puts its camera cutout
   over one side. The page starts below the status bar's safe area (the
   shell is --app-h tall), and a band of the page's own ground lies under
   the status bar, over the page, so nothing scrolled up shows through
   behind the clock. Of the sides, the shell keeps its right edge clear and
   the sidebar, always the leftmost thing on a screen that draws it, takes
   the left inset inside its own ink (SIDEBAR), so its ground still runs to
   the edge. The phone block (RESPONSIVE) adjusts this for a phone's
   stacked page. In a browser tab every inset is 0 and nothing moves. */
body{padding-top:env(safe-area-inset-top,0px)}
body::before{content:'';position:fixed;left:0;right:0;top:0;z-index:65;
  height:env(safe-area-inset-top,0px);background:var(--bg);pointer-events:none}
/* The screen's drift (js/drift.js). When iOS leaves the part of the page
   you can see stuck below where the page is laid out, after the keyboard
   closes (WebKit bug 297779), every piece fixed to the screen was drawn
   that much too high: the tab bar floating up the queue, the band behind
   the clock gone off the top. In that state, and only then, html carries
   drift and each piece moves to the screen you can see, the ones at the
   top or covering the whole screen by --vv-top, the ones at the foot by
   --vv-bot (the phone's Assigned to sheet with them, PHONE; the sign in
   screen in screens/login.js). Its own translate, so it adds to a piece's transform (the
   toast's centring, the drawer's slide) rather than replacing it. */
html.drift body::before,html.drift .modal-back,html.drift .ck-drawer-back,
html.drift .ck-drawer,html.drift .pvw,html.drift .held-back,
html.drift #store-overlay{translate:0 var(--vv-top,0px)}
html.drift #toast-root,html.drift .tabbar{translate:0 var(--vv-bot,0px)}
#app{display:flex;height:var(--app-h);overflow:hidden;padding-right:env(safe-area-inset-right,0px)}
#view{flex:1;min-width:0;overflow:auto;height:var(--app-h);background:var(--bg);
  /* The gutter is kept whether or not the page scrolls. Without it a queue
     long enough to scroll was 10px narrower than a short one, so the same
     rows took one layout on one tab and the other on the next (stg-rows,
     under STAGE PAGE). A browser that draws its scrollbars over the page
     reserves nothing. */
  scrollbar-gutter:stable;
  /* The box the page's absolutely placed pieces are laid out in, so they
     scroll with the page. Placed against the window instead, the Home
     screen's hidden labels and chart link lists (hm-vh, hc-keys) sat below
     the foot of the screen on a long day and gave the window a scroll of
     its own. A swipe past the page's end, the app putting a page's scroll
     back (restoreScroll) or a tab onto a hidden chart link scrolled it,
     and the whole app rose off a band of empty ground beside the fixed
     rail (29 Sep 2026). */
  position:relative}
/* With a mouse or a trackpad, a swipe that runs past the page's end stops
   there rather than being handed on to the window behind the app, which on
   a laptop has nothing of its own to scroll. Not on a touch screen: a phone
   held sideways takes this layout, its browser in a tab sizes 100vh as if
   its toolbar were hidden, and the last strip of a page comes up only when
   the window takes that swipe. */
@media (hover:hover) and (pointer:fine){#view{overscroll-behavior-y:contain}}
/* auth (login) hides the shell chrome and keeps the CRM's dark theme. The
   phone rules below still read `body:not(.portal)`: that negation is always
   true now that nothing can set the class, and it is left alone because
   dropping a :not() lowers a live rule's specificity, which is a change to
   the cascade rather than a deletion. */
body.auth #app{display:block;height:auto}
body.auth #view{height:auto;overflow:visible}
body.auth .sidebar{display:none}

/* ============================================================ SIDEBAR
   The one piece of dark chrome (matches the wholesaler page's dark header).
   Self-contained palette, deliberately does NOT use the light tokens.

   The palette below is SCOPED, not :root, so no other surface inherits these
   dark values by accident. .rail-tip shares the selector
   because the tooltip is appended to document.body (the sidebar clips its own
   overflow), so it sits OUTSIDE .sidebar and would otherwise inherit nothing.
   Contrast measured against the ink ground. */
.sidebar,.rail-tip{
  --sb-ink:#070611;                    /* the brand ink */
  --sb-tx:#F6F7FB;                     /* 18.8:1 on ink */
  --sb-idle:#C3C0D0;                   /* idle nav row text, 11.28:1 */
  --sb-tx-2:#9B98AC;                   /* secondary, 7.17:1 */
  --sb-cap:#8E8AA0;                    /* group caption, 6.03:1 */
  --sb-hair:rgba(246,247,251,.14);     /* the kit's hairline on ink */
  --sb-fill:rgba(246,247,251,.06);
  --sb-fill-2:rgba(246,247,251,.10);
  --sb-on:rgba(116,36,232,.34);        /* active row ground */
  --sb-rail:#A97FFF;                   /* active marker, 6.87:1 on ink */
}
.sidebar{width:calc(var(--sb-w) + env(safe-area-inset-left,0px));flex:none;height:var(--app-h);background:var(--sb-ink);
  border-right:1px solid var(--sb-hair);
  display:flex;flex-direction:column;padding:14px var(--sb-pad) 12px calc(var(--sb-pad) + env(safe-area-inset-left,0px));
  overflow-y:auto;overflow-x:hidden;color:var(--sb-tx)}
/* Brand row. Both marks stay in the DOM with one display:none, which still
   fetches, so the first collapse is instant with no flash. Do NOT swap them
   with content:url(): that carries no intrinsic size and the row would
   reflow on every toggle. */
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:4px 8px 14px}
.sidebar .brand .mark{height:26px;width:auto;display:block}
.sidebar .brand .mark-sm{height:24px;width:auto;display:none}
html.rail:not(.peek) .sidebar .brand .mark{display:none}
html.rail:not(.peek) .sidebar .brand .mark-sm{display:block}

/* the collapse toggle. A real button: Enter, Space and the focus ring for
   free. Always visible, because an all day tool should not hide its own
   chrome behind hover, and overflow-x:hidden above would clip anything
   overlapping the sidebar edge anyway. */
.rail-t{margin-left:auto;width:30px;height:30px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--sb-hair);border-radius:9px;
  background:transparent;color:var(--sb-tx-2);
  transition:color var(--fast),border-color var(--fast),background var(--fast)}
.rail-t:hover{color:var(--sb-tx);border-color:var(--sb-fill-2);background:var(--sb-fill)}
/* the chevron points the way the panel travels: left to collapse, right to expand */
.rail-t .ic{width:16px;height:16px;transform:rotate(180deg);
  transition:transform var(--move)}

/* group caption */
.nav-cap{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sb-cap);
  padding:14px 10px 6px}
.nav-div{height:1px;background:var(--sb-fill);margin:8px 6px}
.sidebar .foot{margin-top:auto}

/* nav item */
.nav-item{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border-radius:10px;
  color:var(--sb-idle);font-size:13.5px;font-weight:500;position:relative;
  transition:background var(--fast),color var(--fast)}
.nav-item:hover{background:var(--sb-fill);color:var(--sb-tx)}
.nav-item .ic{width:18px;height:18px;flex:none;opacity:.85}
.nav-item .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item.on{background:var(--sb-on);color:var(--sb-tx)}
.nav-item.on .ic{opacity:1}
/* The marker reads the SAME token the sidebar padding does, so it is flush
   against the edge in both states by construction. Pinned at a literal -12px
   it sat 4px inside the rail's padding box and overflow-x:hidden ate it,
   which is why the icon rail has never shown an active state. */
.nav-item.on::before{content:"";position:absolute;left:calc(var(--sb-pad) * -1);
  top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--sb-rail)}
/* count pill on a nav row */
.nav-item .pill-n{min-width:20px;height:19px;padding:0 6px;border-radius:999px;font-family:var(--mono);
  font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sb-fill);color:var(--sb-tx-2);border:1px solid transparent}
.nav-item.on .pill-n{background:var(--sb-fill-2);color:var(--sb-tx)}
.nav-item .pill-n.bad{background:rgba(180,35,35,.45);color:#ffb4b4;border-color:transparent}
/* nothing waiting: no badge, so the counts that are there read (look audit
   round 3a, 7 Oct 2026) */
.nav-item .pill-n.zero{display:none}

/* command center hero item */
.nav-cc{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;position:relative;
  background:var(--sb-fill);border:1px solid var(--sb-hair);color:var(--sb-tx);margin-bottom:2px}
.nav-cc:hover{background:var(--sb-fill-2);border-color:var(--sb-hair)}
.nav-cc.on{background:var(--sb-on);border-color:color-mix(in srgb,var(--sb-rail) 50%,transparent)}
.nav-cc .cc-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent);
  color:var(--sb-tx);display:flex;align-items:center;justify-content:center}
.nav-cc .cc-ic .ic{width:18px;height:18px;stroke-width:2}
.nav-cc.on .cc-ic{background:var(--sb-tx);color:var(--accent)}
.nav-cc .cc-t{flex:1;min-width:0}
.nav-cc .cc-t b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.nav-cc .cc-t span{display:block;font-size:11px;color:var(--sb-tx-2);margin-top:1px}
.nav-cc .cc-n{min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-family:var(--mono);
  font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bad);color:var(--sb-tx)}
.nav-cc .cc-n.zero{background:var(--sb-fill);color:var(--sb-tx-2)}

/* user row */
.user-row{display:flex;align-items:center;gap:10px;padding:9px 8px;margin-top:6px;border-radius:10px}
.user-row .av{width:32px;height:32px;flex:none;border-radius:var(--radius-xs);background:var(--sb-fill-2);color:var(--sb-tx);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em}
.user-row .un{font-size:13px;font-weight:600;line-height:1.2;color:var(--sb-tx)}
.user-row .ur{font-size:11px;color:var(--sb-tx-2);display:flex;align-items:center;gap:5px}
.user-row .ur .od{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 25%,transparent)}
.user-row .user-id{flex:1;min-width:0}
.user-out{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sb-hair);border-radius:var(--radius-xs);background:transparent;color:var(--sb-tx-2);cursor:pointer}
.user-out:hover{color:var(--sb-tx);border-color:var(--sb-fill-2);background:var(--sb-fill)}
.user-out .ic{width:16px;height:16px}

/* ---------------- RAIL. One definition. js/shell.js and setRail own the class.
   Row height stays 40px in both states: changing height mid transition makes
   the whole column jump. --------------------------------------------------- */
html.rail:not(.peek) .sidebar .brand{flex-direction:column;gap:9px;padding:2px 0 12px}
html.rail:not(.peek) .rail-t{margin-left:0;width:48px;height:28px;border-radius:8px}
html.rail:not(.peek) .rail-t .ic{transform:none}

/* group captions become the hairline they always meant */
html.rail:not(.peek) .nav-cap{height:1px;padding:0;margin:12px 8px;font-size:0;line-height:0;
  color:transparent;background:var(--sb-hair);border-radius:1px}
html.rail:not(.peek) .nav-div{margin:8px 8px}

html.rail:not(.peek) .nav-item{width:48px;margin:0 auto;padding:0;justify-content:center;gap:0}
html.rail:not(.peek) .nav-item .lb{display:none}

/* counts ride the GLYPH's top right corner, not the row's, so the number reads
   as belonging to its icon on rows that have no active background. The icon is
   18px centred in the 48px content box, so top:4px right:6px overlaps its
   corner. That right edge lands at x=50 inside a 64px rail, well clear of
   overflow-x:hidden. Ringed so it reads on the ink ground. */
html.rail:not(.peek) .nav-item .pill-n{position:absolute;top:4px;right:6px;min-width:16px;height:16px;
  padding:0 4px;font-size:9.5px;font-weight:700;border-radius:999px;
  box-shadow:0 0 0 2px var(--sb-ink)}
html.rail:not(.peek) .nav-item .pill-n.zero{display:none}

/* Command Center: the violet tile alone, no outer chrome */
html.rail:not(.peek) .nav-cc{position:relative;width:48px;margin:0 auto 4px;padding:0;
  justify-content:center;background:transparent;border-color:transparent}
html.rail:not(.peek) .nav-cc:hover,html.rail:not(.peek) .nav-cc.on{background:transparent;border-color:transparent}
html.rail:not(.peek) .nav-cc .cc-t{display:none}
html.rail:not(.peek) .nav-cc .cc-ic{width:44px;height:44px;border-radius:12px}
html.rail:not(.peek) .nav-cc .cc-n{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;
  padding:0 4px;font-size:9.5px;box-shadow:0 0 0 2px var(--sb-ink)}
html.rail:not(.peek) .nav-cc .cc-n.zero{display:none}

/* identity: avatar over sign out, the name moves into the tooltip */
html.rail:not(.peek) .user-row{flex-direction:column;gap:8px;padding:9px 0}
html.rail:not(.peek) .user-row .user-id{display:none}

/* Motion: width and nothing else. Labels are display:none in the rail, which
   cannot be transitioned, and fading them while the column reflows reads as
   lag. Gating on sb-anim means no animation on first paint and none on a
   resize crossing the breakpoint, only on a deliberate toggle, and
   will-change lives only for the 320ms the class is set rather than keeping
   a compositor layer alive for the session.
   The global reduced motion rule only zeroes animation-duration and never
   touches transitions, which is why this needs its own guard, placed below
   the tooltip rules so source order and specificity both land its way. */
html.sb-anim .sidebar{transition:width var(--move);will-change:width}

/* Rail tooltip. Lives on document.body, not in the sidebar, because
   overflow-x:hidden clips anything drawn inside the rail. Decoration only,
   aria-hidden: the accessible name comes from the row's aria-label.
   z-index 70 sits above the mobile tab bar at 60 and below pop menus and
   toasts at 80, so a tip can never cover a menu opened on purpose. */
.rail-tip{position:fixed;z-index:70;display:flex;align-items:center;gap:8px;max-width:220px;
  padding:7px 10px;border-radius:10px;background:#1C1A2B;color:var(--sb-tx);font-size:12.5px;
  font-weight:600;white-space:nowrap;border:1px solid var(--sb-hair);
  box-shadow:var(--shadow-pop);
  opacity:0;transform:translateX(-4px);pointer-events:none;
  transition:opacity var(--fast),transform var(--fast)}
.rail-tip.in{opacity:1;transform:none}
.rail-tip .n{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--sb-tx-2)}
/* the user row is the one tip that carries two lines, name over role */
.rail-tip.two{flex-direction:column;align-items:flex-start;gap:1px;white-space:normal}
.rail-tip.two .n{font-family:var(--font);font-size:11px}

/* Reduced motion. This block must sit AFTER every rule it cancels and must
   match their specificity: html.sb-anim .sidebar is (0,2,1) and a bare
   .sidebar here would lose to it, while a .rail-tip written above the
   .rail-tip transition would lose on source order. Both were true before. */
@media(prefers-reduced-motion:reduce){
  html.sb-anim .sidebar,.rail-t .ic,.rail-tip{transition:none}}

/* ============================================================ MOBILE TAB BAR
   Hidden on desktop; shown only at ≤640px (see RESPONSIVE block).
   Painted with the light tokens, not the sidebar's dark palette: the bar
   sits on the page, and the last dark values left the selected label white
   on a white bar, unreadable on every phone.
   Five tabs (index.html). Each is an equal share of the bar's width and the
   whole of its 56px height, so every tap target clears 48px however many
   the signed in role sees. The tab in use reads as selected three ways at
   once, so no one of them has to carry it alone: a soft violet pill behind
   its icon, the icon and the label in the accent, and the label heavier. */
.tabbar{display:none}
.tab{flex:1 1 0;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;position:relative;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent}
.tab-i{display:flex;align-items:center;justify-content:center;width:52px;height:28px;border-radius:999px;
  transition:background var(--fast)}
.tab .ic{width:21px;height:21px}
.tab-l{max-width:100%;padding:0 3px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab.on{color:var(--accent)}
.tab.on .tab-i{background:var(--accent-soft)}
.tab.on .tab-l{font-weight:700}
/* The count on the icon's top right corner (Home = today's list that needs
   a person, in red like the sidebar's, Pipeline = unseen new), ringed in the bar's ground so it reads over the pill. It ends
   inside its own tab (max-width), so it can never sit on the next tab's
   icon, and anything over 99 reads 99+ (syncSidebarCounts), which is what
   keeps it small: New leads has been in four figures on production. */
.tab-b{position:absolute;top:5px;left:calc(50% + 5px);max-width:calc(50% - 6px);min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:16px;text-align:center;
  background:var(--accent);color:#fff;box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.tab-b.bad{background:var(--bad)}
/* Pipeline's is a dot: unseen new leads, while Home's red figure is today's
   list, and two numbers side by side read as one count told twice (look
   audit, 6 Oct 2026). The figure is still its text, for a screen reader,
   and the queue says it in words. */
.tab-b.dot{min-width:0;width:10px;height:10px;padding:0;top:7px;left:calc(50% + 9px);font-size:0;line-height:0}

/* ============================================================ BUTTONS */
/* Labels never wrap (nowrap), so without a ceiling a long one would burst
   out of its card. Cap the width and clip instead: a button always stays
   inside the thing that contains it. Keep labels short enough not to clip. */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:9px 14px;
  border-radius:var(--radius-sm);border:1px solid var(--line-2);background:transparent;color:var(--text);
  white-space:nowrap;max-width:100%;overflow:hidden;
  transition:background var(--fast),border-color var(--fast),color var(--fast)}
.btn:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn .ic{width:16px;height:16px}
.btn.primary{background:var(--action);border-color:var(--action);color:#fff}
.btn.primary:hover{background:var(--action-2);border-color:var(--action-2)}
.btn.soft{background:var(--accent-soft);border-color:transparent;color:var(--accent-2)}
.btn.soft:hover{background:color-mix(in srgb,var(--accent) 14%,var(--accent-soft))}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ok:hover{filter:brightness(1.07)}
.btn.danger{border-color:transparent;background:var(--bad-bg);color:var(--bad)}
.btn.danger:hover{background:var(--bad);color:#fff}
/* a destructive PRIMARY (Mark lost, the danger confirms): the apex button
   in the colour of what it does, so nobody reads it as the blue "go on".
   White on --bad is 6.55:1. Disabled falls back to the house disabled look,
   which the three class specificity would otherwise override. */
.btn.primary.cf-danger{background:var(--bad);border-color:var(--bad)}
.btn.primary.cf-danger:hover{background:color-mix(in srgb,var(--bad) 85%,black);border-color:color-mix(in srgb,var(--bad) 85%,black)}
.btn.primary.cf-danger:disabled{background:transparent;border-color:var(--line);color:var(--faint)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:var(--radius-xs)}
.btn.disabled,.btn:disabled{color:var(--faint);background:transparent;border-color:var(--line);cursor:not-allowed}
.iconbtn{width:34px;height:34px;border:1px solid var(--line-2);background:transparent;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  transition:background var(--fast),color var(--fast)}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.iconbtn.danger:hover{background:var(--bad-bg);color:var(--bad)}
.iconbtn .ic{width:18px;height:18px}

/* keyboard focus ring. One geometry, 2px outside the control, so the ring
   follows each control's own radius and a focused pill stays a pill.
   [contenteditable] is the template composer, which no element selector
   reaches. */
a:focus-visible,button:focus-visible,[data-action]:focus-visible,[tabindex]:focus-visible,
[contenteditable]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}

/* ============================================================ CHIPS / PILLS */
/* SLA age chip — mono, status-tinted */
.age{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;font-weight:600;
  padding:3px 8px;border-radius:7px;white-space:nowrap}
.age .ic{width:12px;height:12px}
.age.ok{color:var(--ok);background:var(--ok-bg)}
.age.warn{color:var(--warn);background:var(--warn-bg)}
.age.crit{color:var(--bad);background:var(--bad-bg)}
/* stage chip: glyph and label */
.stage-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);padding:4px 10px;border-radius:999px;white-space:nowrap}
.stage-chip .ic{width:13px;height:13px;flex:none;color:var(--muted);opacity:.9}
/* the sub stage, a second cell beside the stage on the car's page: New, No
   answer, Follow up, Post follow up, and Contacted's two. The same pill, with
   the fill taken out, so the pair reads as one fact qualified rather than as
   two chips competing for the eye. */
.stage-chip.sub{background:transparent;color:var(--muted)}
/* generic pill / badge */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pill.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill.accent{background:var(--accent-soft);color:var(--accent-2);border-color:transparent}
/* source dot + label */
.src{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--muted)}
.src .dot{width:6px;height:6px;border-radius:50%;flex:none}
/* brand tag (The Car Buyers / EV Car Buyers). Shares .src geometry so it sits
   naturally beside the source chip; never named .brand (sidebar logo owns it). */
.brandtag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.brandtag .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--brand-tcb)}
/* SOLID, not a tint. Every hue near this row is already purple (the accent,
   the unseen rail, the NEW badge), so the EV mark separates by value rather
   than hue: on a fifty row mixed list a pale lavender EV pill and the pale
   lavender NEW badge sitting one line apart read as the same thing. White on
   #6A2BE8 measures 6.7:1. */
.brandtag.ev{color:#fff;background:var(--brand-ev);border-color:transparent}
.brandtag.ev .dot{background:rgba(255,255,255,.9)}
.brandtag.sm{font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 6px;gap:4px}
/* rego tag */
.rego{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.05em;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-xs);padding:3px 8px;color:var(--text)}
.rego.empty,.rego.none{color:var(--muted);letter-spacing:0;font-weight:500}
.verified-km{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ok)}
.verified-km .ic{width:13px;height:13px;stroke-width:2.2}
/* Eval gave only part of the car: never the green tick (cockpit.js, owner 6 Oct 2026) */
.verified-km.part{color:var(--warn);white-space:nowrap;text-transform:none;letter-spacing:0}

/* ============================================================ CARDS / PANELS */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.panel-h{display:flex;align-items:baseline;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.panel-h h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
.panel-h .sub{font-size:12px;color:var(--muted)}
.panel-b{padding:16px 18px}
.cap{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ============================================================ PAGE SCAFFOLD */
.page{padding:24px 28px}
.page-h{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.page-h h1{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.page-h .sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.page-h .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
.empty{padding:54px 24px;text-align:center;color:var(--muted);font-size:13.5px}
.empty b{display:block;color:var(--text-2);font-size:15px;font-weight:600;margin-bottom:5px}

/* search box */
.searchbox{position:relative}
.searchbox .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.searchbox input{height:38px;width:240px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--radius-sm);
  padding:0 12px 0 34px;font-size:13px;color:var(--text)}
.searchbox input:focus{border-color:var(--accent)}

/* ============================================================ SEGMENTED CONTROL */
/* A choice between a few options, a filter or a switch: picked is the white
   raised one, the look .segf has (one look for selected, look audit round
   3a, 7 Oct 2026). Purple fill is for page tabs only, .seg.tabs (Records). */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:2px}
.seg.tabs{background:var(--surface);border-color:var(--line-2)}
.seg button{border:none;background:transparent;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--muted);border-radius:7px;white-space:nowrap;
  transition:color var(--fast),background var(--fast)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.10)}
.seg.tabs button.on{background:var(--accent);color:#fff;box-shadow:none}
.seg button.on.ok{background:var(--ok-bg);color:var(--ok)}
.seg button.on.warn{background:var(--warn-bg);color:var(--warn)}
.seg button.on.bad{background:var(--bad-bg);color:var(--bad)}

/* ============================================================ TABLE / LIST */
/* overflow-x:auto at EVERY width, not just on phones: between 641px and the
   desktop layout these tables were `overflow:hidden`, so columns wider than
   the panel were clipped with no way to scroll to them. Wide screens still
   show no scrollbar because the table fits. */
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;overflow-x:auto}
table.grid{width:100%;border-collapse:collapse}
table.grid thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg-deep)}
table.grid thead th.num{text-align:right}
table.grid tbody td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table.grid tbody td.num{text-align:right;font-family:var(--mono)}
table.grid tbody tr{cursor:pointer;position:relative;transition:background var(--fast)}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr:hover{background:var(--surface-2)}
table.grid tbody tr.sel{background:var(--accent-soft)}
table.grid tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.veh{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.veh .sub{width:100%;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px;display:flex;align-items:center;gap:8px}
.cust{font-weight:500;color:var(--text);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.cust .sub{font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
/* seen before: a repeat customer or car, on the line the suburb takes otherwise */
.cust .rep{display:flex;align-items:center;gap:5px;margin-top:1px;min-width:0;font-weight:400;font-size:11.5px;line-height:1.35;color:var(--muted)}
.cust .rep-pill{flex:none;font-size:10.5px;font-weight:650;line-height:1;padding:2px 6px;border-radius:5px;letter-spacing:.01em}
.cust .rep.is-cust .rep-pill{background:var(--accent-soft);color:var(--accent-2)}
.cust .rep.is-car .rep-pill{background:var(--warn-bg);color:var(--warn)}
.cust .rep-w{min-width:0;overflow:hidden;text-overflow:ellipsis}
td.ph{white-space:nowrap}
.price-rng{font-family:var(--mono);font-weight:600;color:var(--accent-2)}
/* the seller's own asking price (New leads). Mono and right aligned with the
   other figures through .num, tabular so a column of them compares straight
   down, and one line so a narrow screen scrolls the table rather than growing
   the row. Deliberately NOT .price-rng: that purple says "our number". */
td.ask,th.ask{white-space:nowrap}

/* pager (queues run in pages of 50) */
.pager{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px}
.pager .pg{margin-left:auto;display:flex;gap:5px;align-items:center}

/* New leads comes from the database a page at a time, so its rows arrive after
   the chrome does. The skeleton holds the layout for that gap, and aria-busy
   dims the rows already on screen while a search or a Load more is in flight,
   rather than collapsing them back to a skeleton and flashing the list. */
.sk-row td{padding:11px 14px}
.sk-bar{display:block;height:11px;border-radius:6px;background:var(--surface-2);
  animation:sk-pulse 1.2s ease-in-out infinite}
.sk-row:nth-child(2n) .sk-bar{width:78%}
.sk-row:nth-child(3n) .sk-bar{width:62%}
@keyframes sk-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.sk-bar{animation:none;opacity:.6}}
/* The lead list on its way, for a screen that cannot draw a row without it.
   Same bars, because waiting should look the same wherever it happens, and
   widths that vary so it reads as content arriving rather than a progress
   bar that never moves. */
/* a list on its way (Offers, the Home screen): the rows it is about to be,
   so the panel keeps its height and nothing under it jumps when they land */
.cc-wait{padding:14px 16px}
.cc-wait .sk-bar{margin:0 0 14px;height:14px}
.cc-wait .sk-bar:last-child{margin-bottom:0}
.ld-wait{padding:20px 18px}
.ld-wait .sk-bar{margin:0 0 15px}
.ld-wait .sk-bar:last-child{margin-bottom:0}
.ld-wait .sk-bar:nth-child(3n+2){width:78%}
.ld-wait .sk-bar:nth-child(3n){width:62%}
#stg-live[aria-busy="true"]{opacity:.55;transition:opacity var(--fast)}
#stg-live[aria-busy="true"] .pager .btn{pointer-events:none}
/* The Load more button while its page is in flight. It is read, not pressed,
   so it takes the readable muted rather than the faint the disabled style
   gives controls that are out of play (2.68:1, which is fine for a control
   nobody is meant to read). */
.pager .btn[aria-busy="true"]{color:var(--muted)}
td.act{text-align:right;white-space:nowrap}
td.act .btn,td.act .iconbtn{vertical-align:middle}
td.act .iconbtn{margin-left:6px}
/* The queue's row actions stay reachable. Every cell is nowrap and the wrap
   scrolls sideways by design, so on a 1440 laptop with the sidebar open New
   leads runs about 180px past its wrap and Open, Call, Contacted and Lost
   sat past the right edge until the row was scrolled. Above the phone
   break the actions cell pins to that edge and the facts scroll under it.
   Opaque on purpose, with the row's own tints repeated: a see through
   sticky cell shows the phone number sliding beneath the buttons. */
@media (min-width:761px){
  #stg-live table.grid td.act,#stg-live table.grid th.act{position:sticky;right:0;z-index:1}
  #stg-live table.grid td.act{background:var(--surface)}
  #stg-live table.grid tbody tr:hover td.act{background:var(--surface-2)}
  /* the same 5% violet tr.unseen paints, mixed to an opaque colour */
  #stg-live table.grid tr.unseen td.act{background:color-mix(in srgb,#6e6cf2 5%,var(--surface))}
  #stg-live table.grid tr.unseen:hover td.act{background:var(--surface-2)}
  /* the seam where the facts slide under */
  #stg-live table.grid td.act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
}
/* The pin is for a screen narrower than the row, not for a laptop. At 1440
   with the sidebar open and at 1280 on the rail every New leads and
   Contacted view fits its wrap, so nothing sits under the pinned buttons.
   It takes this, the Age cell on two lines and the missed call clock on
   three (.age-col, .sq-top), and on a wide enough wrap the Vehicle cell
   giving way and the Seller asks heading taking two lines (stg-rows, under
   STAGE PAGE). 16px a side still ran the Follow up view past its wrap; 10px
   still leaves the facts their air, and the rows keep their 14px above and
   below. Fitting a full row is not free, and stg-rows says what it costs.
   Above the phone only: a phone's rows are cards that set their own
   (PHONE QUEUES), keyed on classes that an id here would outrank. */
@media (min-width:641px){
  #stg-live table.grid thead th,#stg-live table.grid tbody td{padding-left:10px;padding-right:10px}
}
/* New leads' row actions on one line: Call, Contacted, and Lost as an icon.
   The row itself opens the car, so there is no Open. Two by two with Open
   the buttons set the row's height, 100px against the 44 the facts need,
   and a laptop showed five sellers where eight fit. nowrap so the line never
   folds back into two rows under a squeeze. */
.act-line{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;vertical-align:middle}
/* .btn caps itself at 100% of its container and clips. Inside a shrink to
   fit box that percentage is cyclic, and every button clipped its own label
   to "Contac". Uncapped here; the line's own width is the limit instead. */
.act-line .btn{max-width:none;flex:none}
.act-line .iconbtn{margin:0;flex:none}
/* A call outcome being recorded (_flow.js callWaiting): the first No answer
   texts the seller inside the request, so the Call control pulses and its row
   dims until the reply lands. */
.btn[aria-busy="true"]{cursor:progress;animation:ck-walk-wait .9s ease-in-out infinite}
table.grid tbody tr[aria-busy="true"] td{opacity:.6;transition:opacity var(--fast)}
@media (prefers-reduced-motion:reduce){
  .btn[aria-busy="true"]{animation:none;opacity:.5}
}

/* ============================================================ MODAL & TOAST */
/* z-index 75: above the activity drawer (71) and its backdrop (70), below
   the toasts (80), which have to be read over any dialog */
.modal-back{position:fixed;inset:0;background:rgba(16,24,40,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:75;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:460px;
  box-shadow:var(--shadow-pop);max-height:88vh;overflow:auto;animation:riseIn .16s ease}
.modal.wide{max-width:600px}
/* the box takes the focus when a dialog has no text box (UI.modal), and a
   ring round a whole dialog says nothing */
.modal:focus{outline:none}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:16px;font-weight:600}
.modal-b{padding:19px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:15px 19px;border-top:1px solid var(--line)}
label.fld{display:block;margin-bottom:14px}
.fld .lab{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.input,.select,textarea.input{width:100%;height:38px;border:1px solid var(--line-2);background:var(--bg-deep);border-radius:var(--radius-sm);
  padding:0 12px;font-size:13.5px;color:var(--text)}
textarea.input{height:auto;padding:9px 12px;resize:vertical;min-height:64px;line-height:1.5}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--accent)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236A6680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* A box placed at left:50% is only offered the right half of the screen, so
   with no width of its own a toast of two sentences wrapped a word a line on
   a phone. It takes its text's width now, up to a readable line or the
   screen less a margin, whichever is narrower. */
#toast-root{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;
  width:max-content;max-width:min(720px,calc(100vw - 24px))}
/* ============================================================ WORKFLOW H1
   Buy-this-car, walk-away reasons, deposits, unwind — audit 2026-07-20 */
/* the co-equal road: soft green so it reads as "money moves" next to the
   purple stage primary without shouting over it */
.btn.buy{background:var(--ok-bg);border-color:transparent;color:var(--ok);font-weight:600}
.btn.buy:hover{background:color-mix(in srgb,var(--ok) 8%,var(--ok-bg))}
/* reason picker (discard + unwind modals) */
.reason-list{display:flex;flex-direction:column;gap:6px}
.reason-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:13px;background:var(--bg-deep)}
.reason-opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.reason-opt input{accent-color:var(--accent)}
.reason-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
/* the Lost dialog: a decision, not a form. Each reason is one tap, the
   note only once Other is picked (label.fld is display:block, which would
   beat the browser's own [hidden] rule, hence the explicit one). */
.lost-intro{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 12px}
.lost-list .reason-opt{font-weight:500;padding:10px 13px}
.lost-note{margin:12px 0 0}
label.fld.lost-note[hidden]{display:none}
/* deposit chip on the price card */
.ck-dep{display:flex;align-items:center;gap:7px;margin-top:10px;padding:7px 10px;border-radius:9px;
  background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:600}
.ck-dep .ic{width:13px;height:13px}
.ck-dep b{color:inherit}
/* records ledger: an unwound purchase reads as un-happened */
tr.unwound-row td{opacity:.62}
tr.unwound-row .pill.bad{opacity:1}

/* click-to-call: phone links inside tables/rows — quiet until hover */
a.tel{color:inherit;border-bottom:1px dashed var(--line-2)}
a.tel:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}

.toast{background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;
  padding:11px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:9px;animation:riseIn .2s ease}
.toast .ic{width:15px;height:15px;color:var(--ok)}
/* UI.toast picks the glyph and the class together, so an error can never
   arrive under a green tick */
.toast.warn .ic{color:var(--warn)}
.toast.bad .ic{color:var(--bad)}
.toast.note .ic{color:var(--muted)}
.toast .undo{margin-left:6px;font-weight:700;color:var(--accent);background:none;border:none;border-left:1px solid var(--line);padding:2px 4px 2px 12px}
.toast .undo:hover{color:var(--accent-2);text-decoration:underline}

/* ============================================================ COMMAND CENTER
   The stat cards Reports and Settings, Spend draw (.cc-stats, .stat). The
   Home screen that took the Command Center's place has its own section
   below (THE HOME SCREEN). Only a card that is a link says it can be
   pressed: Reports' cards are links where their list opens for this
   person, and Spend's are figures alone. */
.cc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative}
a.stat{cursor:pointer}
a.stat:hover{border-color:var(--line-2)}
.stat .l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* a headline figure, one face across the CRM (Bought cars, a car's price,
   Home): the display face (look audit round 3a, 7 Oct 2026) */
.stat .n{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:proportional-nums;margin-top:8px;line-height:1}
.stat .s{font-size:12px;color:var(--muted);margin-top:7px}

/* ============================================================ THE HOME SCREEN
   command.js, drawn by _home_panels.js, _home_lanes.js and _home_charts.js:
   the design the owner approved on 28 Sep 2026 ("Speed to lead"). The day
   as the title with the Everyone or Mine switch; one card across the top
   with the speed to first call, the day's leads and the next seller to
   ring; today's work in lanes; the team, the sources and the last seven
   days. It lays itself out by the width the page is given rather than the
   window's (the hm container), so a pinned or collapsed sidebar lays it
   out right. A phone draws the day in its own order (THE HOME SCREEN ON A
   PHONE, at the end of this file). */
.page.home{container:hm/inline-size;padding:22px 28px 28px}
.hm-h{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 14px;margin-bottom:16px}
.hm-title{min-width:0}
.hm-h h1{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.hm-d-short{display:none}
.hm-live{display:flex;align-items:center;gap:8px;min-height:20px;margin-top:6px;font-size:13px;color:var(--muted)}
.hm-live .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.hm-live .dot.off{background:var(--muted);box-shadow:none}
.hm-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.hm-whose button{display:inline-flex;align-items:center;gap:7px}
.hm-whose .n{font-size:11.5px;font-weight:700;color:var(--muted)}
.hm-whose button.on .n{color:var(--text-2)}
.hm-find .iconbtn,.hm-new{background:var(--surface)}
.hm-find .searchbox input{width:260px}

/* the card across the top: three zones side by side */
.hm-band{display:grid;grid-template-columns:366px minmax(0,1fr) 288px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.hm-zone{min-width:0;padding:18px 20px 16px}
.hm-band > .hm-zone + .hm-zone{border-left:1px solid var(--line)}
/* The figures the page leads with, in the display face. Each digit takes
   its own width here: tabular figures space a number out at this size. */
.hm-big{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:proportional-nums}
.hm-big small{margin-left:5px;font-family:var(--font);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text-2)}
.hm-quiet{font-size:13.5px;color:var(--text-2)}
.hm-speed-fig{display:flex;align-items:flex-end;gap:16px;min-height:56px;margin-top:12px}
.hm-speed-fig .hm-big{font-size:56px}
.hm-speed-fig .hm-quiet{align-self:center}
.hm-delta{display:flex;flex-direction:column;gap:1px;padding-bottom:7px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.hm-delta b{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--text-2)}
.hm-delta b.ok{color:var(--ok)}
.hm-delta b.bad{color:var(--bad)}
.hm-delta .ic{width:15px;height:15px;stroke-width:2.3}
.hm-zsub{margin-top:9px;font-size:12.5px;color:var(--muted)}
.hm-zsub b{font-weight:600;color:var(--text-2)}
.hm-chart{min-width:0;margin-top:12px}
.hm-chart svg,.hm-track svg{max-width:100%;height:auto}
.hm-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.hm-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;vertical-align:-1px}
.hm-legend i.f{background:var(--accent)}
.hm-legend i.h{width:10px;height:10px;border:2px solid var(--text-2)}
.hm-legend i.sq,.hm-legend i.spoke,.hm-legend i.noanswer,.hm-legend i.wrong{width:10px;height:8px;border-radius:2px;vertical-align:0}
.hm-legend i.spoke{background:var(--accent)}
.hm-legend i.noanswer{background:var(--accent-mid)}
.hm-legend i.wrong{background:var(--ghost)}
.hm-nums{display:flex;align-items:flex-start;gap:34px;margin-top:12px}
.hm-num .hm-big{font-size:38px}
/* a label wraps only where the card is too narrow for it ("not yet, 12 of
   them late" on an iPad), its late figure held whole on its own line */
.hm-num .l{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.hm-num .l i{display:inline-block;width:9px;height:9px;border-radius:50%}
.hm-num .l i.f{background:var(--accent)}
.hm-num .l i.h{width:10px;height:10px;border:2px solid var(--text-2)}
.hm-num .late{font-weight:700;color:var(--bad);white-space:nowrap}
.hm-leads .hm-quiet{margin-top:12px}
.hm-pace{margin-top:2px;font-size:12.5px;color:var(--muted)}
.hm-pace b{font-weight:700;color:var(--text)}
/* the next seller to ring, and the one blue button on the page */
.hm-next{display:flex;flex-direction:column;border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 45%,var(--surface)),var(--surface) 72%)}
.hm-nl,.hm-nr{min-width:0}
.hm-nh{display:flex;align-items:center;gap:8px}
.hm-nwait{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.hm-nwait b{font-weight:700;color:var(--text)}
.hm-nwait b.warn,.hm-then b.warn{color:var(--warn)}
.hm-nwait b.bad,.hm-then b.bad{color:var(--bad)}
.hm-nwho{display:flex;align-items:center;gap:7px;min-width:0;margin-top:14px}
.hm-nwho a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700;letter-spacing:-.015em}
.hm-nwho a:hover,.hm-then li a:hover{color:var(--accent-2)}
.hm-nwho .brandtag,.hm-then li .brandtag{flex:none}
.hm-ncar{margin-top:2px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.hm-nmeta{margin-top:2px;font-size:12.5px;color:var(--muted)}
.hm-dial{width:100%;justify-content:center;margin-top:14px;padding:11px 14px;font-size:13.5px}
.hm-dial:not(.primary){background:var(--surface)}
.hm-dial .mono{font-weight:600;letter-spacing:.02em}
.hm-nonum{margin-top:6px;font-size:12px;color:var(--muted)}
.hm-then{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.hm-then .cap{font-size:10.5px}
.hm-then ol{list-style:none}
.hm-then li{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.hm-then li a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-then li b{margin-left:auto;font-weight:700;color:var(--text)}
.hm-nquiet{display:flex;align-items:flex-start;gap:12px;margin-top:16px}
.hm-nquiet b{display:block;font-size:14px;font-weight:600}
.hm-nquiet p{margin-top:3px;font-size:12.5px;color:var(--muted)}
.hm-clear-i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.hm-clear-i .ic{width:17px;height:17px;stroke-width:2.2}

/* today's work: a lane to a kind of job, three across */
.hm-sect{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:24px 2px 10px}
.hm-sect h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
.hm-sect .sub{font-size:12.5px;color:var(--muted)}
.hm-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hm-lane{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.hm-lh{display:flex;align-items:center;gap:9px;min-width:0;padding:13px 16px 12px}
.hm-lh > .ic{width:17px;height:17px;color:var(--muted)}
.hm-lh h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:700;letter-spacing:-.005em}
.hm-n{font-size:13.5px;font-weight:700;color:var(--muted)}
.hm-aside{margin-left:auto;padding-left:6px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.hm-aside.bad{font-weight:700;color:var(--bad)}
.hm-rows{list-style:none;border-top:1px solid var(--line)}
/* A row: the timer, who and what car open the car's page, and the call is
   its own link beside them, never inside, so a tap on the number dials. */
.hm-row{display:flex;align-items:center;border-bottom:1px solid var(--line);transition:background var(--fast)}
.hm-row:last-child{border-bottom:none}
.hm-row:hover{background:var(--surface-2)}
.hm-main{flex:1;min-width:0;min-height:56px;display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:12px;
  align-items:center;padding:10px 12px 10px 16px}
.hm-call{flex:none;width:32px;height:32px;margin-right:14px;border-radius:10px;background:var(--surface);color:var(--text-2)}
.hm-call .ic{width:15px;height:15px}
.hm-tm{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.hm-tm .v{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.hm-tm .v.warn{color:var(--warn)}
.hm-tm .v.bad{color:var(--bad)}
.hm-tm .u{margin-top:3px;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
/* how far a waiting lead's clock has run towards late */
.hm-sla{display:block;width:40px;margin-top:5px}
.hm-sla .hc-meter{height:3px;border-radius:2px;background:var(--grid)}
.hm-sla .hc-meter i{border-radius:2px}
.hm-sla .hc-meter i.ok{background:var(--accent)}
.hm-sla .hc-meter i.warn{background:var(--warn)}
.hm-sla .hc-meter i.bad{background:var(--bad)}
.hm-bd{min-width:0}
.hm-l1{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;white-space:nowrap}
.hm-who{flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.hm-l1 .brandtag{flex:none}
.hm-car{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--muted)}
.hm-l2{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--text-2)}
/* a seller's own words take two lines before they are cut */
.hm-l2.q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.42}
.hm-at{font-weight:600;color:var(--text)}
.hm-at.bad{color:var(--bad)}
.hm-body .st{font-weight:600}
.hm-body .st.ok,.hm-body .st.done{color:var(--ok)}
.hm-body .st.warn{color:var(--warn)}
.hm-body .st.bad{color:var(--bad)}
.hm-body .st.on{color:var(--accent-2)}
.hm-ph{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.hm-ph .ic{width:13px;height:13px}
.hm-tel{font-size:11.5px;color:var(--text);white-space:nowrap}
.hm-more{display:flex;align-items:center;gap:6px;min-width:0;margin-top:auto;padding:10px 16px;
  border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--accent-2)}
.hm-more + .hm-more{margin-top:0}
.hm-more-n{flex:none}
.hm-more:hover .hm-more-n{text-decoration:underline}
.hm-more .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--muted)}
.hm-funnel{padding:0 16px 12px}
.hm-cap{margin-bottom:7px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hm-flab{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:11px;font-weight:600;color:var(--muted)}
.hm-flab b{font-weight:700;color:var(--text)}
.hm-track{padding:0 16px 10px}
/* the lanes with nothing in them, in one quiet line, and a day with
   nothing in any of them */
.hm-rest{display:flex;align-items:center;gap:7px;margin:10px 2px 0;font-size:12.5px;color:var(--muted)}
.hm-rest .ic{width:15px;height:15px;color:var(--ok)}
.hm-clear{display:flex;align-items:center;gap:14px;padding:22px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
.hm-clear b{display:block;font-size:15px;font-weight:600}
.hm-clear p{margin-top:3px;font-size:13px;color:var(--muted)}

/* the team's calls, where the leads came from and the last seven days */
.hm-lower{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.hm-card{min-width:0;padding:15px 18px 16px}
.hm-ch{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.hm-ch .ic{width:17px;height:17px;color:var(--muted)}
.hm-ch .sub{margin-left:auto;padding-left:6px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
.hm-empty{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* Live now (Inspector v2 chunk 4, screens/_live_now.js card): each
   inspection under way on one line, the car, who and when, its walk as five
   cells, the red flags so far and Watch, under the top three while one is */
.hm-livenow{margin-top:14px}
.hm-livenow .hm-ch .n{font:600 12px var(--mono);color:var(--muted)}
.hm-lvs{list-style:none;margin-top:6px}
.hm-lvs li + li{border-top:1px solid var(--line)}
.hm-lv{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr) auto;
  gap:16px;align-items:center;padding:10px 0;color:inherit;text-decoration:none}
.hm-lv:hover .hm-lv-car b,.hm-lv:focus-visible .hm-lv-car b{text-decoration:underline;text-underline-offset:3px}
.hm-lv-car{display:flex;align-items:center;gap:8px;min-width:0}
.hm-lv-car b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-lv-car .rego{flex:none}
.hm-lv-who{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-lv-done{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.hm-lv-flag{font-size:12.5px;color:var(--muted);white-space:nowrap}
.hm-lv-flag.bad{color:var(--bad);font-weight:650}
.hm-lv-flag.warn{color:var(--warn);font-weight:650}
.hm-lv-go{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:650;color:var(--accent-2)}
.hm-lv-go .ic{width:14px;height:14px}
@media (max-width:640px){
  /* between Ring next and the speed, spaced as the zones are */
  .hm-livenow{margin:0 0 12px}
  .hm-lv{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"car go" "who go" "done flag";gap:5px 12px}
  .hm-lv-car{grid-area:car}
  .hm-lv-who{grid-area:who}
  .hm-lv-done{grid-area:done}
  .hm-lv-flag{grid-area:flag;text-align:right}
  .hm-lv-go{grid-area:go}
}
.hm-tlist{list-style:none;margin-top:6px}
.hm-trow{display:grid;grid-template-columns:112px minmax(0,1fr) 104px;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.hm-trow:last-child{border-bottom:none}
.hm-tp{display:flex;align-items:center;gap:9px;min-width:0}
.hm-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);font-size:11px;font-weight:700}
.hm-tn{min-width:0}
.hm-tn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.2}
.hm-tn span{font-size:11.5px;color:var(--muted)}
.hm-tbar{display:flex;align-items:center;gap:10px;min-width:0}
.hm-tbar .hc-meter{flex:1}
.hm-tbar b{flex:none;min-width:20px;text-align:right;font-size:13px}
.hm-tjob{font-size:12.5px;color:var(--text-2)}
.hm-tstat{text-align:right;font-size:12px;line-height:1.35;color:var(--muted)}
.hm-tstat b{font-weight:700;color:var(--text)}
.hm-bars{list-style:none;margin-top:10px}
.hm-bars li{display:grid;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.hm-bars .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text-2)}
.hm-bars b{text-align:right}
.hm-src li{grid-template-columns:100px minmax(0,1fr) 22px}
.hm-steps li{grid-template-columns:84px minmax(0,1fr) 34px 38px}
.hm-steps .pc{text-align:right;font-size:11.5px;font-weight:600;color:var(--muted)}
.hm-foot{margin-top:10px;font-size:11.5px;color:var(--muted)}
/* words a screen reader reads where the eye has a bar */
.hm-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the search's matches, in place of the day, and a day that did not load */
.hm-found-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hm-found-t{min-width:0;overflow-wrap:anywhere;font-size:13.5px;font-weight:600;color:var(--text-2)}
.hm-found-more{padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.hm-fail{padding:32px 24px;text-align:center;font-size:13.5px;color:var(--muted)}
.hm-fail b{display:block;margin-bottom:5px;font-size:15px;font-weight:600;color:var(--text-2)}
.hm-fail .btn{margin-top:12px}
.hm-waiting .cc-wait{padding:6px 0}
.hm-waiting.hm-lanes{margin-top:24px}
.hm-waiting .hm-lane .cc-wait{padding:16px}

/* Narrower pages: the top card in two, with Ring next across its foot,
   the lanes two across, and the team over the sources and the week. */
@container hm (max-width:1080px){
  .hm-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hm-band > .hm-next{grid-column:1 / 3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;
    border-left:none;border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
  .hm-band > .hm-next .hm-dial{margin-top:0}
  .hm-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-lower{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hm-lower .hm-team{grid-column:1 / 3}
}
@container hm (max-width:620px){
  .hm-band,.hm-lanes,.hm-lower{grid-template-columns:minmax(0,1fr)}
  .hm-band > .hm-zone + .hm-zone{border-left:none;border-top:1px solid var(--line)}
  .hm-band > .hm-next{grid-column:auto;display:flex}
  .hm-lower .hm-team{grid-column:auto}
}

/* ---- HOME CHARTS (app/screens/_home_charts.js) ----
   Every mark's colour, by the classes the charts give it. The marks are
   thin, a dot or a ring carries a 2px ring of the card's white so it
   reads where it overlaps, the gridlines are solid hairlines, and the one
   dotted line is the target, which is a threshold, not a grid. */
.hc{display:block;overflow:visible}
.hc text{font-family:var(--font)}
.hc-grid{stroke:var(--grid)}
.hc-axis{stroke:var(--line)}
.hc-lab{fill:var(--muted);font-size:10.5px;font-weight:600}
.hc-lab.small{font-size:10px}
.hc-lab.strong{fill:var(--text-2);font-size:10px;font-weight:700}
.hc-lab.late{fill:var(--bad);font-size:10px;font-weight:700}
.hc-target{stroke:var(--text);stroke-width:1.25;stroke-dasharray:3 3}
.hc-late{fill:var(--bad-bg);opacity:.8}
.hc-hit{fill:transparent;cursor:pointer}
.hc-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.hc-dot.warn{fill:var(--warn)}
.hc-dot.bad{fill:var(--bad)}
.hc-ring{fill:var(--surface);stroke:var(--text-2);stroke-width:2}
.hc-ring.warn{stroke:var(--warn)}
.hc-ring.bad{stroke:var(--bad)}
/* a pile, where a stack runs out of room: a small bubble counting the
   marks it holds, hollow as a ring is, in the colour of the worst of them */
.hc-pile{cursor:pointer}
.hc-hit.still,.hc-pile.still{cursor:default}
.hc-pile-b{fill:var(--surface);stroke:var(--text-2);stroke-width:1.5}
.hc-pile-t{fill:var(--text-2);font-size:9.5px;font-weight:700}
.hc-pile.warn .hc-pile-b{stroke:var(--warn)}
.hc-pile.warn .hc-pile-t{fill:var(--warn)}
.hc-pile.bad .hc-pile-b{stroke:var(--bad)}
.hc-pile.bad .hc-pile-t{fill:var(--bad)}
.hc-area{fill:var(--area)}
.hc-curve{fill:none;stroke:var(--ghost);stroke-width:1.5}
.hc-now{stroke:var(--text);stroke-width:1.25}
.hc-now-pill{fill:var(--text)}
.hc-now-t{fill:var(--surface);font-size:10px;font-weight:700}
.hc-job.done{fill:var(--ok-bg);stroke:var(--ok)}
.hc-job.on{fill:var(--accent);stroke:var(--accent)}
.hc-job.ok{fill:var(--accent-soft);stroke:var(--accent-mid)}
.hc-job.warn{fill:var(--warn-bg);stroke:var(--warn)}
.hc-job.bad{fill:var(--bad-bg);stroke:var(--bad)}
.hc-pt:hover .hc-job{stroke:var(--text)}
/* the mark whose card is up, under the pointer or the keyboard's focus */
.hc-dot.on,.hc-ring.on,.hc-pile.on .hc-pile-b{stroke:var(--text)}
.hc-ring.on,.hc-pile.on .hc-pile-b{stroke-width:2.5}
/* The chart's links to its leads, after its image: the keyboard's and a
   screen reader's way to each lead, hidden from the eye, whose words the
   card below is built from (command.js). */
.hc-keys{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;list-style:none}
/* The card a mark raises: who, the car and one fact, or what a pile holds
   and where it opens. It lives on the document, off every box a paint
   writes, and never takes the pointer. */
.hc-card{position:fixed;left:0;top:0;z-index:70;display:flex;flex-direction:column;gap:1px;max-width:260px;
  padding:8px 11px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  box-shadow:var(--shadow-pop);font-size:12px;line-height:1.35;color:var(--text-2);
  pointer-events:none;opacity:0;transition:opacity var(--fast)}
.hc-card.in{opacity:1}
.hc-card b{font-size:13px;font-weight:700;color:var(--text)}
.hc-card span::first-letter{text-transform:uppercase}
.hc-card .hc-f{font-weight:600;color:var(--text)}
.hc-card .hc-f.warn{color:var(--warn)}
.hc-card .hc-f.bad{color:var(--bad)}
.hc-card .hc-go{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--accent-2)}
@media(prefers-reduced-motion:reduce){.hc-card{transition:none}}
/* a bar of parts end to end, the white between them doing the separating */
.hc-meter{display:flex;gap:2px;min-width:0;height:10px}
.hc-meter i{display:block;flex:none;height:100%}
.hc-meter i:first-child{border-radius:3px 0 0 3px}
.hc-meter i:last-child{border-radius:0 3px 3px 0}
.hc-meter i:only-child{border-radius:3px}
.hc-meter i.spoke,.hc-meter i.acted{background:var(--accent)}
.hc-meter i.noanswer{background:var(--accent-mid)}
.hc-meter i.wrong{background:var(--ghost)}
.hc-meter i.waiting{box-shadow:inset 0 0 0 1.5px var(--text-2)}
.hc-meter i.wk-leads{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.hc-meter i.wk-rung{background:color-mix(in srgb,var(--accent) 34%,var(--surface))}
.hc-meter i.wk-spoke{background:color-mix(in srgb,var(--accent) 50%,var(--surface))}
.hc-meter i.wk-booked{background:color-mix(in srgb,var(--accent) 68%,var(--surface))}
.hc-meter i.wk-inspected{background:color-mix(in srgb,var(--accent) 84%,var(--surface))}
.hc-meter i.wk-bought{background:var(--accent-2)}
/* a bar whose darker steps lie inside the lighter ones */
.hc-nest{position:relative;display:block;height:8px;border-radius:4px}
.hc-nest i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;box-shadow:2px 0 0 var(--surface)}
.hc-nest.sent{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.hc-nest .opened{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.hc-nest .started{background:color-mix(in srgb,var(--accent) 60%,var(--surface))}
.hc-nest .completed{background:var(--accent)}

/* ============================================================ STAGE PAGE */
/* a count in words ("48 waiting"), so the page's own font (look audit round 3a) */
.stage-count{font-family:var(--font)}
.stage-purpose{font-size:13px;color:var(--muted);margin-top:4px}
/* compact stage-row Vehicle cell — title + inline rego on line 1, source + km on line 2.
   plain block layout (no flex-wrap on the cell) so rows stay dense single-liners. */
.veh-cell{min-width:0}
.veh-line{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.veh-line .vt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The New leads title is a link into the car (stage.js), so a keyboard has a
   way in without the Open button that row gave up. It reads as the title it
   was, and takes the same focus ring every other control takes. */
.veh-line a.vt{color:inherit;text-decoration:none}
.veh-line a.vt:hover{text-decoration:underline}
/* where the row's Open button was, the title says it opens the car */
.veh-line a.vt.cue{color:var(--accent-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.veh-line a.vt.cue:hover{text-decoration-color:currentColor}
/* a hyphenated word in a title (stage.js, vehTitleHtml) */
.veh-line .vt .whole{white-space:nowrap}
.veh-line .rego{flex:none}
/* On a queue wide enough to hold the whole row, a squeezed Vehicle cell
   gives way, and never by cutting a word. The plate moves to the front of
   the meta line, at the size of the brand tag beside it, so the title has
   the top line to itself; the Replied and NEW marks go up a line when the
   title needs the room; a title too long for the column wraps between its
   words, never "Mercedes-" over "Benz"; and a meta line too long for it
   moves whole facts down, never "Meta" over "Ads" or "212,000" over "km".
   Held to one line the title was cut to "2021 Ford R…" and the whole line
   set the column's floor, which is what pushed the row under the pinned
   buttons. A plate left to drop under its title stood alone on a line of
   its own and made every squeezed row a line taller.
   It gives way only so far. Every other column holds its lines, so all the
   width they want comes out of this one: a try chip turning to "just now"
   took it to 116px, and the rows grew by up to 40px, to 180, under the
   pointer that had just logged the call. 145px keeps a plate and a brand
   tag on one line and Meta Ads or Website beside a six figure km on the
   next, so their meta line stops at two, and a row that wants more scrolls
   under the pin rather than growing. A long try chip goes under the age
   chip (.age-top) before it widens its column. 155px would hold Google Ads
   there too, but on the fullest rows it put the end of the phone number
   under the pin, and a number that cannot be read is worse than a line.
   What fitting costs, measured at 1440 with the sidebar open: with ordinary
   titles and names the rows stay at the 100px their buttons set. With every
   column filled (a seller ask, a form state, Meta Ads, an EV tag, long
   names, "2017 Toyota Landcruiser Prado", a try chip reading "just now")
   the rung views' rows run to 136px, nothing scrolls, and a chip turning
   to "just now" makes one row a line taller at most. A title on three
   lines makes a row 155px, and a source label too wide to sit beside its
   km makes it 156: Text message on those rows, Google Ads once the cell is
   down at its floor. With phone numbers stored with spaces and a "try 12
   just now" chip as well, up to 10px of the Phone cell sits under the pin,
   all of it the cell's own padding.
   Measured on the wrap, not the viewport, because the sidebar decides it,
   and with the scrollbar the office sees (#view keeps its gutter, so a long
   list and a short one are the same width). 1440 with the sidebar open is a
   1124px wrap under this file's 10px scrollbar, 1117 in a browser that
   ignores that and draws a 17px one, 1134 where the scrollbar is drawn over
   the page; 1280 on the rail is 1148. The cutoff sits under all three.
   Below it, 1366 with the sidebar open for one, a full row needs more than
   giving way can find, so the cell keeps its one line, the cut title
   carries its whole name on hover, and the row scrolls under the pin. The
   meta line's facts are whole either way. */
#stg-live .tablewrap{container:stg-rows/inline-size}
/* Under the cutoff the cells keep 8px a side and the car's one line is cut
   at 196px, its whole name on hover: with the Open button gone (look audit
   round 3a, 7 Oct 2026) that fits every queue at 1366 with the sidebar open,
   where five of them scrolled. At 1280 with it open, New leads and Contacted
   still scroll under the pin; on the rail they fit. Above the phone only: a
   phone's cards are under the cutoff too, and an id here would outrank their
   own cells (PHONE QUEUES), cutting the car's name on every card. */
@media (min-width:641px){
  @container stg-rows (max-width:1099px){
    #stg-live table.grid thead th,#stg-live table.grid tbody td{padding-left:8px;padding-right:8px}
    #stg-live .veh-cell{max-width:196px}
  }
}
.veh-meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11.5px;color:var(--muted)}
.veh-meta > *{white-space:nowrap}
.veh-meta .rego{display:none}
/* Lead source, its own column on New leads (stage.js COL.leadSrc): the
   source's dot and label with the EV tag beside it, each held whole. */
.lsrc-cell{display:flex;align-items:center;gap:6px}
.lsrc-cell > *{white-space:nowrap}
@container stg-rows (min-width:1100px){
  #stg-live .veh-cell{min-width:145px}
  #stg-live .veh-line{flex-wrap:wrap;row-gap:4px}
  #stg-live .veh-line .vt{white-space:normal;overflow:visible}
  #stg-live .veh-line .rego{display:none}
  #stg-live .veh-meta{flex-wrap:wrap;row-gap:3px}
  #stg-live .veh-meta .rego{display:inline-flex;font-size:11px;padding:1px 6px}
  /* The age chip and the try chip share a line only while the column has
     the room (.age-col says why they share one). "try 12 just now" is 40px
     wider than "try 2 8h", and held on one line it widened the Age column
     for every row on the view. */
  #stg-live .age-top{flex-wrap:wrap;row-gap:4px}
  /* "Seller asks" is the widest heading over the narrowest figures, so here
     it takes two lines and the column is as wide as a figure; the figures
     under it never wrap (td.ask). The 1px is a floor the column always
     outgrows, and it keeps the heading from taking width the Vehicle cell
     needs. On a narrower wrap the row scrolls anyway, so the heading keeps
     one line and the header its height. */
  #stg-live table.grid thead th.ask{white-space:normal;width:1px}
  /* Lead source takes 82px of a fitted row: its heading on two lines and
     the EV tag under the label. With the Call button gone from New leads
     that keeps every row the height it was (measured 23 Sep 2026 at 1440
     with the sidebar open and 1280 on the rail) with nothing under the
     pinned actions. On a narrower wrap the row scrolls anyway, so it keeps
     one line, like th.ask. */
  #stg-live table.grid thead th.lsrc{white-space:normal;width:1px}
  #stg-live .lsrc-cell{flex-wrap:wrap;row-gap:4px}
}
/* ============================================================ COCKPIT (#/lead/:id) */
.ck-page{padding:18px 24px}
/* top bar. Pinned, the way the report's .rv-top is: scroll to the Notes card
   and the back link, the stepper and the next move are still on screen. It
   takes the page's top padding as its own (negative margin, matching padding)
   so its background covers the strip above the title once it sticks, or the
   rows would show through that gap. The bottom padding replaces the old
   margin so the messages column, pinned at --ck-top-h below, meets it with
   nothing scrolling through between the two. 98px is the bar's measured box
   at desktop widths: the 62px title block plus 18px of padding each side. */
.ck-page{--ck-top-h:98px}
.ck-top{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;background:var(--bg);
  margin:-18px 0 0;padding:18px 0}
.ck-top .iconbtn{flex:none}
.ck-top-title{flex:1;min-width:0}
.ck-top-title .ck-veh{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.ck-top-meta{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.ck-id{font-size:11.5px;color:var(--muted)}
/* Eval's answer as a cell on the chip row (cockpit.js evalCell, owner 5 Oct
   2026): square cornered and white with a green EVAL tick, never one of
   the grey lead pills beside it. .tight (fitTop) keeps only the tick and
   Car details where the VIN and expiry would take a line of their own. */
.ev-wrap{position:relative;display:inline-flex}
.ev-plate{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:6px;
  background:var(--surface);font-size:11.5px;white-space:nowrap;box-shadow:0 1px 0 rgba(7,6,17,.04)}
.ev-tag{display:inline-flex;align-items:center;gap:4px;padding:0 8px;background:var(--ok-bg);color:var(--ok);
  font-weight:700;font-size:10.5px;letter-spacing:.07em;border-radius:5px 0 0 5px}
.ev-tag .ic{width:12px;height:12px;stroke-width:2.4}
.ev-tag.part{background:var(--warn-bg);color:var(--warn)}
.ev-seg{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-left:1px solid var(--line)}
.ev-seg i{font-style:normal;color:var(--muted);font-size:11px}
.ev-seg b{font-weight:600;color:var(--text)}
.ev-seg b.mono,.ev-row dd.mono{font-family:var(--mono);letter-spacing:.02em}
.ev-cp{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:-2px -4px -2px -2px;
  padding:0;border:0;border-radius:5px;background:none;color:var(--muted);cursor:pointer;flex:none}
.ev-cp:hover{color:var(--accent-2);background:var(--surface-2)}
.ev-cp .ic{width:13px;height:13px}
.ev-more{border-top:0;border-right:0;border-bottom:0;background:none;font:inherit;cursor:pointer;
  border-radius:0 5px 5px 0}
.ev-more:hover,.ev-more[aria-expanded="true"]{background:var(--surface-2)}
.ev-more b{color:var(--accent-2)}
.ev-more .ic{width:12px;height:12px;color:var(--accent-2)}
.ev-more .ev-car{display:none}
.ev-wrap.tight .ev-wide{display:none}
.ev-wrap.tight .ev-more .ev-all{display:none}
.ev-wrap.tight .ev-more .ev-car{display:inline}
.ev-cp:focus-visible,.ev-more:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ev-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(400px,calc(100vw - 16px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);animation:riseIn .14s ease;white-space:normal}
.ev-pop-h{display:flex;flex-direction:column;gap:3px;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.ev-pop-h b{font-size:14px;font-weight:700;color:var(--text)}
.ev-pop-h span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ok)}
.ev-pop-h .ic{width:12px;height:12px;stroke-width:2.4}
.ev-pop-h span.part{color:var(--warn)}
.ev-pop-n{padding:8px 14px 0;font-size:12px;line-height:1.45;color:var(--text-2)}
.ev-pop-b{margin:0;padding:6px 14px 10px}
.ev-row{display:grid;grid-template-columns:104px 1fr 22px;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;
  border-bottom:1px solid var(--line)}
.ev-row:last-child{border-bottom:0}
.ev-row dt{color:var(--muted)}
.ev-row dd{margin:0;color:var(--text);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.ev-pop{animation:none}}
.ck-top-act{flex:none;margin-left:auto;display:flex;align-items:center;gap:8px}
/* The bar hides its next move while the step card on the Overview tab
   carries the same button (cockpit.js primaryBtn): one button per move. It
   stays in the page, where Space still finds and runs it. */
.ck-top-act .ck-primary[data-carried]{display:none}
/* Activity and the menu are one piece on a phone (cockpit.js); here each is
   the bar's own, Activity first as before */
.ck-top-tools{display:contents}
.ck-top-act .ck-act-btn{order:-1}
.ck-done-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ok);
  background:var(--ok-bg);border-radius:var(--radius-sm);padding:9px 14px}
.ck-done-pill .ic{width:16px;height:16px}

/* the lead stepper, walking the queue you came from one car at a time. The
   counter is orientation, not a headline, so it stays faint and mono; the
   arrows are the ordinary header icon buttons rotated, the same way the photo
   viewer draws its prev/next. Nothing renders at all for a lead with no queue
   behind it, hence :empty. */
.ck-walk{display:flex;align-items:center;gap:4px;flex:none;margin-left:-6px}
.ck-walk:empty{display:none}
.ck-walk-n{font-size:11.5px;color:var(--faint);
  min-width:56px;text-align:center;white-space:nowrap}
.ck-walk-b[data-d="prev"] .ic{transform:rotate(90deg)}
.ck-walk-b[data-d="next"] .ic{transform:rotate(-90deg)}
.ck-walk-b:disabled{opacity:.32;cursor:default}
.ck-walk-b:disabled:hover{background:transparent;color:var(--muted)}
.ck-walk .w-short{display:none}
.ck-walk[aria-busy="true"] .ck-walk-b{pointer-events:none}
.ck-walk[aria-busy="true"] .ck-walk-b[data-d="next"]{animation:ck-walk-wait .9s ease-in-out infinite}
@keyframes ck-walk-wait{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .ck-walk[aria-busy="true"] .ck-walk-b[data-d="next"]{animation:none;opacity:.5}
}

/* overflow (⋯) menu — park / un-park / discard */
.ck-menu{position:relative;flex:none}
.ck-menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:5px;animation:riseIn .14s ease}
.ck-menu-it{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;
  background:none;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);text-align:left}
.ck-menu-it:hover{background:var(--surface-2)}
.ck-menu-it .ic{width:15px;height:15px;color:var(--muted)}
.ck-menu-it.danger{color:var(--bad)}
.ck-menu-it.danger .ic{color:var(--bad)}
.ck-menu-it.danger:hover{background:var(--bad-bg)}
/* An item whose name needs its reason says it under the name, the way
   App.UI.menu draws `sub`. A title never shows on a phone, and there
   Contacted and the Call menu's "Spoke to them" read as the same thing. */
.ck-menu-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ck-menu-t small{font-size:11.5px;font-weight:400;color:var(--muted)}

/* Shared anchored popover menu (App.UI.menu), used by any row, anywhere.
   position:fixed, not absolute: the queue scrolls inside .tablewrap, and an
   absolutely positioned menu would be clipped by that overflow. */
.pop-menu{position:fixed;z-index:80;min-width:236px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:5px;animation:riseIn .14s ease}
.pop-menu-it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  border:none;background:none;border-radius:8px;font-size:13px;color:var(--text);
  text-align:left;cursor:pointer}
.pop-menu-it:hover,.pop-menu-it:focus-visible{background:var(--surface-2);outline:none}
.pop-menu-it .ic{width:15px;height:15px;color:var(--muted);flex:none}
.pop-menu-it .pm-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pop-menu-it .pm-t b{font-weight:600}
.pop-menu-it .pm-t span{font-size:11.5px;color:var(--muted)}
.pop-menu-it.danger{color:var(--bad)}
.pop-menu-it.danger .ic{color:var(--bad)}
.pop-menu-it.danger:hover{background:var(--bad-bg)}

/* 4-zone grid: rail · left cards · centre · right messages */
/* 3 columns now: the progress rail moved INSIDE the left column, so the
   reference material reads as one block and the centre gets the width. */
.ck-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 340px;gap:16px;align-items:start}
.ck-left-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ck-right-col{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:var(--ck-top-h)}

/* tabs */
.ck-tabs{display:flex;gap:2px;margin:0 0 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.ck-tab{padding:11px 15px 10px;border:0;background:transparent;color:var(--muted);
  font-size:13px;font-weight:700;border-bottom:2.5px solid transparent;white-space:nowrap;cursor:pointer}
.ck-tab:hover{color:var(--text)}
.ck-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.ck-tab-n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;
  border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700}
.ck-tab.on .ck-tab-n{background:var(--accent-soft);color:var(--accent-2)}
.ck-panel{display:none}
.ck-panel.on{display:block}

/* hero step card, every stage renders into this. Plain .card material on
   purpose: an accent edge and a glow made it the one card that looked
   different, on the screen the operator reads most. */
.ck-hero-h{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:16px 16px 0}
.ck-hero-t{min-width:0}
.ck-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ck-hero-h h3{margin:6px 0 0;font-size:19px;letter-spacing:-.01em}
.ck-hero-h p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:52ch}
.ck-steppill{flex:none;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);
  padding:6px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.ck-hero-b{padding:16px}
/* the tinted working panel: the stage's controls sit on their own surface so
   the card reads as "here is the job", not a list of rows. A flat tint and no
   border, because a bordered box inside a bordered card is a second card. */
.ck-hero .ck-act{display:flex;flex-direction:column;gap:10px;padding:14px;
  border-radius:13px;background:var(--bg-deep)}
/* status rows inside the panel: label and value on one line, a hairline
   between rows. They used to be white boxes, a third card nested in the
   second, and boxes in boxes cost reading speed here more than anywhere. */
.ck-hero .ck-act .ck-rows{gap:0}
.ck-hero .ck-act .ck-row{padding:9px 0;border-bottom:1px solid var(--line);align-items:center}
.ck-hero .ck-act .ck-row:last-child{border-bottom:none}
.ck-hero .ck-act .ck-row .k{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.ck-hero .ck-act .ck-row .v{font-size:12.5px;font-weight:700}
/* the phone number reads as the thing to press, like the prototype's call line */
.ck-hero .ck-tel-btn{justify-content:center;gap:8px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--text);font-size:14px;padding:12px 14px}
/* a button that says Call and the number together, not a box with the icon
   at one end and the number at the other (look audit round 3a, 7 Oct 2026) */
.ck-hero .ck-tel-btn .ck-tel-n{font-family:var(--mono);font-weight:600}
.ck-hero .ck-tel-btn:hover{border-color:var(--accent);color:var(--accent-2)}
.ck-hero .ck-act > .btn{min-height:42px}
.ck-hero .ck-act .ck-fl > span{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.ck-hero .ck-act .ck-note{margin-top:0}
.ck-pw-sum{margin-top:10px;font-size:11px;color:var(--muted)}
/* a step card's sentence when it is bad news (a MotorScout deal that cannot
   go on as it stands) */
.ck-hero-h p.bad{color:var(--bad);font-weight:600}

/* MotorScout's Report in card, "Pay the agreed price?" (_motorscout_card.js,
   the approved mockup ms2-reportin-card-1440): the price and the report
   side by side, the checks Pay & collect waits on under the pay button,
   then "or" and the two other ways, Change price outlined on the card's
   own white so it reads as a button, Walk away in red. */
.ck-ms-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:4px 0}
.ck-ms-facts > div{font-size:12px;font-weight:600;color:var(--muted);min-width:0}
.ck-ms-facts b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-top:2px}
.ck-ms-facts b.mono{font-family:var(--mono)}
.ck-ms-checks{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--text-2)}
.ck-ms-checks > span{display:inline-flex;align-items:center;gap:4px}
.ck-ms-checks .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.ck-ms-or{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.ck-hero .ck-act .btn-row .btn{min-height:42px;justify-content:center}
.ck-hero .ck-act .btn.ck-ms-alt{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.ck-hero .ck-act .btn.ck-ms-alt:hover{border-color:var(--accent);color:var(--accent-2)}
.ck-hero .ck-act .btn-row .btn.ck-ms-walk{flex:0 0 auto}

/* notes */
.ck-notes{width:100%;resize:vertical;min-height:74px;font-family:inherit;line-height:1.5;padding:10px 11px}
.ck-notes-s{font-size:11px;color:var(--ok);font-weight:600;margin-top:7px}

/* snapshot strip */
.ck-snap{display:grid;grid-template-columns:repeat(2,1fr);padding:0;overflow:hidden}
.ck-metric{padding:13px 14px;border-right:1px solid var(--line);min-width:0}
.ck-metric:last-child{border-right:0}
.ck-metric span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.ck-metric strong{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}

/* quick actions */
.ck-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ck-qa-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:74px;padding:11px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;text-align:left;
  transition:border-color var(--fast),background var(--fast)}
.ck-qa-b:hover{border-color:var(--accent);background:var(--accent-soft)}
.ck-qa-b .ic{width:17px;height:17px;color:var(--accent);margin-bottom:3px}
.ck-qa-b b{font-size:12px;font-weight:700}
.ck-qa-b small{font-size:11px;color:var(--muted)}

/* full-specs expander on the Vehicle card */
.ck-more{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.ck-more summary{cursor:pointer;font-size:11.5px;font-weight:700;color:var(--accent);list-style:none;
  display:flex;align-items:center;gap:6px}
.ck-more summary::-webkit-details-marker{display:none}
.ck-more summary .ic{width:13px;height:13px;flex:none;transition:transform var(--fast)}
.ck-more[open] summary .ic{transform:rotate(90deg)}
.ck-more summary .mono{margin-left:auto;color:var(--faint);font-size:11px}
.ck-more .ck-rows{margin-top:10px}

/* reminder */
.ck-rem-add{display:flex;align-items:center;gap:7px;width:100%;padding:11px 13px;border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.ck-rem-add:hover{border-color:var(--accent);color:var(--accent)}
.ck-rem-add .ic{width:14px;height:14px}
.ck-rem.over{border-color:var(--bad)}
.ck-rem-tag{margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--bad-bg,rgba(180,35,35,.1));
  color:var(--bad);font-size:10.5px;font-weight:700;letter-spacing:.07em}
.ck-rem-t{font-size:13px;font-weight:600;line-height:1.4}
.ck-rem-d{font-size:11.5px;color:var(--muted);margin-top:5px}
.ck-rem-a{display:flex;gap:7px;margin-top:11px}
.ck-rem-a .btn{flex:1;justify-content:center}

/* files tab — document rows carry the prototype's icon-tile treatment */
.ck-files{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.ck-docs{display:flex;flex-direction:column;gap:9px}
.ck-doc{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface)}
.ck-doc > .ic{width:36px;height:36px;flex:none;padding:9px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);box-sizing:border-box}
.ck-doc-t{min-width:0}
.ck-doc-t b{display:block;font-size:12px;font-weight:700}
.ck-doc-t span{display:block;font-size:11px;color:var(--muted);margin-top:3px}

/* the whole lead page picks up the prototype's softer, roomier card feel */
.ck-page .card{border-radius:16px}
.ck-page .ck-card{padding:16px}
.ck-page .cap{font-size:10.5px;letter-spacing:.07em}
/* messages tab: the thread at a reading width, and who you are texting
   beside it where there is room (look audit round 4, 8 Oct 2026: a bubble
   ran about 700px a line beside an empty strip) */
.ck-msgs-tab{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;max-width:1180px}
.ck-texting{display:flex;flex-direction:column;gap:2px}
.ck-texting .cap{margin-bottom:6px}
.ck-texting-who{font-size:16px;font-weight:700}
.ck-texting-where{font-size:12.5px;color:var(--muted)}
.ck-texting-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.ck-texting-rows{margin-top:10px}
.ck-texting-row .k{color:var(--muted);flex:none}
.ck-texting-row .v{text-align:right;min-width:0}
@media (max-width:900px){.ck-msgs-tab{grid-template-columns:minmax(0,1fr)} .ck-texting{display:none}}
/* The Messages tab's card. Capped to the viewport under the pinned top bar
   and the tabs, so the thread is a scroll box: the composer is always in
   reach and mount() can land on the newest message. Uncapped, the thread
   simply grew to fit and scrollTop had nothing to move, which is why the
   tab, built for the long conversations, opened at the oldest message. */
.ck-right.full{max-height:calc(100vh - 220px);position:static;min-height:60vh}
.ck-msgs-note{margin-top:10px;font-size:11.5px;color:var(--faint)}

/* activity drawer — the ONE home for the activity log */
.ck-drawer-back{position:fixed;inset:0;background:rgba(12,14,20,.38);opacity:0;pointer-events:none;
  transition:opacity var(--fast);z-index:70}
.ck-drawer-back.on{opacity:1;pointer-events:auto}
/* padded clear of the home screen app's status bar and of a cutout on the
   right of a phone held sideways (APP SHELL); 0 in a browser tab */
.ck-drawer{position:fixed;top:0;right:0;height:100vh;width:min(480px,92vw);background:var(--surface);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 0;
  border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform var(--move);z-index:71;display:flex;flex-direction:column}
/* the shadow only while it is open: parked off screen, its shadow still
   reached back over the page's right edge, a grey band down a phone's
   booking sheet */
.ck-drawer.on{transform:translateX(0);box-shadow:var(--shadow-pop)}
.ck-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.ck-drawer-h h3{margin:5px 0 0;font-size:17px}
.ck-drawer-b{padding:16px 18px;overflow:auto}
.ck-act-btn{flex:none}

@media(max-width:1180px){
  .ck-qa{grid-template-columns:1fr 1fr}
  .ck-files{grid-template-columns:1fr}
}

/* progress rail (vertical stepper) */
.ck-rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px}
.ck-rail .cap{margin-bottom:14px}
.ck-step{display:flex;align-items:center;gap:10px;position:relative;padding-bottom:18px}
.ck-step:last-child{padding-bottom:0}
.ck-step:not(:last-child)::before{content:"";position:absolute;left:9px;top:20px;bottom:-2px;width:2px;background:var(--line-2)}
.ck-step.done:not(:last-child)::before{background:var(--accent)}
.ck-step .mk{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--line-2);background:var(--bg-deep);
  display:flex;align-items:center;justify-content:center;z-index:1}
.ck-step .mk .ic{width:12px;height:12px;color:#fff;stroke-width:3}
.ck-step .mk .d{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ck-step.done .mk{background:var(--accent);border-color:var(--accent)}
.ck-step.now .mk{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ck-step .lbl{font-size:12px;font-weight:500;color:var(--muted);line-height:1.2}
.ck-step .l-short{display:none}
.ck-step.done .lbl{color:var(--text-2)}
.ck-step.now .lbl{color:var(--text);font-weight:600}

/* left column cards */
.ck-left{display:flex;flex-direction:column;gap:14px}
.ck-card{padding:15px 16px}
.ck-card .cap{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ck-eval-btn{margin-top:12px}
.ck-est{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:5px;font-family:var(--font);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--warn-bg,rgba(191,143,26,.14));color:var(--warn)}
.ck-carok,.ck-carbad{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:8px 10px;
  border-radius:9px;font-size:12px;font-weight:600;line-height:1.35}
.ck-carok{background:var(--ok-bg,rgba(15,138,99,.09));color:var(--ok)}
.ck-carbad{background:var(--bad-bg,rgba(180,35,35,.09));color:var(--bad)}
.ck-carok .ic,.ck-carbad .ic{width:13px;height:13px;flex:none;margin-top:1px}
.ck-asked{display:flex;align-items:center;gap:7px;margin-top:12px;padding:8px 10px;border-radius:9px;
  background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;
  line-height:1.35}
.ck-asked .ic{width:13px;height:13px;flex:none}
.ck-asked span{min-width:0}

.ck-seller{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ck-seller-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ok);margin-bottom:10px}
.ck-seller-h .ic{width:13px;height:13px;flex:none}
.ck-seller-view{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--accent);cursor:pointer;
  /* a <button> drawn as a link: without these it was the browser's own grey
     button with a bevel (Open paperwork, View report, View all) */
  background:none;border:0;padding:0;font-family:inherit;line-height:inherit}
.ck-seller-view:hover{text-decoration:underline}
.ck-seller .ck-rows{gap:9px}
.ck-seller-none{font-size:12px;color:var(--muted)}
/* the missed call text sequence, a footnote under the seller it texts: is the
   automation on, how many texts have really gone, how many are left. Discreet
   by the owner's ask, so it borrows .ck-seller's rule and cap geometry and
   only the glyph and the cap carry any colour. */
.ck-txt{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ck-txt-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.ck-txt-h .ic{width:13px;height:13px;flex:none}
.ck-txt-n{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;
  text-transform:none;color:var(--text-2);white-space:nowrap}
.ck-txt-s{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.45}
.ck-txt.on .ck-txt-h{color:var(--ok)}
.ck-txt.off .ck-txt-h,.ck-txt.none .ck-txt-h{color:var(--warn)}
/* A lead nobody has rung. Deliberately NOT the green of .on: the owner read
   that tick as a sequence running on every lead in the business, and nothing
   is running until somebody clicks No answer. Ink, not a signal colour. */
.ck-txt.wait .ck-txt-h{color:var(--text-2)}

/* Who holds this lead, under the seller it is about, in the same footnote
   shape the texts note uses: they answer one question between them, whose
   name and number a seller reads. The name itself is card-title sized because
   it is the answer; the line under it is the consequence. "Nobody" is amber
   and said in words, never a blank: a lead nobody holds speaks in the office's
   name, and with that unset the sentence is dropped. */
.ck-alloc{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ck-alloc-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ck-alloc-go{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);cursor:pointer}
.ck-alloc-go:hover{color:var(--accent)}
/* Edit on a card's heading and Fix beside a number no text reaches, worded
   and drawn as Allocated to's Change (owner, 29 Sep 2026) */
.ck-cap-go{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);cursor:pointer}
.ck-cap-go:hover{color:var(--accent)}
.verified-km + .ck-cap-go{margin-left:10px}
.ck-row.ck-ph-warn .v{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--warn);text-align:left}
.ck-row.ck-ph-warn .v .ic{width:14px;height:14px;flex:none}
.ck-row.ck-ph-warn .ck-cap-go{flex:none}
/* the words under a Mobile box: what it saves as, and whether a text can reach it */
.ph-note{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;font-weight:600;line-height:1.4}
.ph-note .ic{width:14px;height:14px;flex:none;margin-top:1px}
.ph-note.ok{color:var(--ok)}
.ph-note.warn{color:var(--warn)}
.sd-note{min-height:0;margin:-2px 0 12px}
.sd-note:empty{margin:0}
/* first name and surname side by side, a phone included: two short boxes */
.sd-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ck-alloc-who{margin-top:7px;font-size:14px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-alloc-you{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2)}
.ck-alloc-none{color:var(--warn)}
/* Said inside the allocate dialog only, and only to the person it is true of:
   your own two fields are empty, so a lead you take speaks as the office. */
.ck-alloc-warn{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;
  border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--text);
  font-size:12.5px;line-height:1.5}
.ck-alloc-warn .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--warn)}
.ck-alloc-warn a{color:var(--accent-2);font-weight:600;text-decoration:underline}

/* the state a car is registered in, as tiles (the car lookup, screens/_carlookup.js) */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.st-opt{padding:14px 0;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--text);
  cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.st-opt:hover{border-color:var(--accent)}
.st-opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
@media (max-width:520px){.st-grid{grid-template-columns:repeat(2,1fr)}}

/* saved messages (templates) */
.ck-tpl-btn{flex:none}
.tpl-list{display:flex;flex-direction:column;gap:8px}
.tpl-pick{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;background:var(--surface);cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.tpl-pick:hover{border-color:var(--accent);background:var(--surface-2)}
.tpl-pick b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.tpl-pick span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
/* an unfilled field inside a picker row reads as its name, not as braces */
.tpl-pick .tplx-tk{display:inline-block;width:auto;font-size:11.5px;padding:0 5px;line-height:1.5}  /* .tpl-pick span above also matches the pill, which is a span: force it back inline */
.ck-name{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.ck-rows{display:flex;flex-direction:column;gap:9px}
.ck-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.ck-row .k{color:var(--muted);font-size:12px;flex:none}
.ck-row .v{font-weight:500;text-align:right;min-width:0;word-break:break-word}
.ck-tel{color:var(--text)}
.ck-tel:hover{color:var(--accent-2)}
.ck-price-big{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--text);
  /* the body's tabular figures give a comma a digit's width, and in this face
     that read "$28 , 000" (audit, 6 Oct 2026); a figure on its own takes
     its own widths, as .hm-big does */
  font-variant-numeric:proportional-nums}
.ck-price-cap{font-size:11.5px;color:var(--muted);margin-top:8px}

/* centre column */
.ck-centre{display:flex;flex-direction:column;gap:14px;min-width:0}
.ck-wide{width:100%;justify-content:center}
.ck-tel-btn{width:100%;justify-content:center;font-weight:600}
/* Phase D: cockpit Offer-stage wholesaler-link summary */
.ck-price-set{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* under boxes that save as they are left (cockpit.js savePriceTyped): how
   they save, then that they did (look audit round 4, 8 Oct 2026) */
.ck-price-note{grid-column:1 / -1;margin:-3px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.ck-price-note.saved{color:var(--ok)}
.ck-price-note.warn{color:var(--warn)}
.ck-price-note .ic{width:13px;height:13px}
/* the step's other move, quieter than its one solid button */
.btn.ghost.ck-alt{color:var(--accent-2)}
.ck-fl{display:flex;flex-direction:column;gap:5px}
.ck-fl > span{font-size:11.5px;font-weight:600;color:var(--muted)}
.ck-await{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--warn);
  background:var(--warn-bg);border-radius:var(--radius-sm);padding:9px 12px}
.ck-await .ic{width:15px;height:15px}
/* inspection booking dialogs (book / move / cancel): a quiet one-line hint,
   and a row of equal-width buttons for Move + Cancel on the booked summary */
.ck-quiet{font-size:12.5px;color:var(--muted);line-height:1.5}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1}
/* these three dialogs stack .ck-fl/.ck-quiet directly in modal-b with no
   wrapper (every other modal here nests them or inlines a margin) */
.modal-b > .ck-fl,.modal-b > .ck-quiet{margin-top:14px}
.modal-b > .ck-fl:first-child,.modal-b > .ck-quiet:first-child{margin-top:0}

/* activity timeline */
.ck-tl-list{display:flex;flex-direction:column;gap:0}
.ck-ev{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ck-ev:first-child{padding-top:0}
.ck-ev:last-child{border-bottom:none;padding-bottom:0}
.ck-ev-dot{width:8px;height:8px;flex:none;border-radius:50%;margin-top:5px;background:var(--muted)}
.ck-ev-dot.accent{background:var(--accent)} .ck-ev-dot.green{background:var(--ok)}
.ck-ev-dot.amber{background:var(--warn)} .ck-ev-dot.red{background:var(--bad)}
.ck-ev-b{flex:1;min-width:0}
.ck-ev-s{font-size:13px;font-weight:500;line-height:1.4}
.ck-ev-d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.ck-ev-t{font-size:11px;color:var(--faint);flex:none;margin-top:1px}

/* right column: messages */
/* not pinned itself: its column is (.ck-right-col), and a card pinned inside a
   pinned column slid down it at the page's foot, over the reminder beneath */
.ck-right{display:flex;flex-direction:column;padding:0;max-height:calc(100vh - 120px)}
.ck-right-h{display:flex;align-items:baseline;gap:8px;padding:15px 16px;border-bottom:1px solid var(--line)}
.ck-right-h .cap{margin:0}
.ck-right-sub{font-size:12px;color:var(--muted)}
.ck-thread{flex:1;min-height:160px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
/* a trackpad or a mouse over the conversation scrolls the conversation and
   never the page behind it, as a chat does (owner, 30 Sep 2026); a finger is
   let on to the page at the thread's end, so a thumb is never trapped */
@media (hover:hover) and (pointer:fine){.ck-thread{overscroll-behavior:contain}}
/* min-width:0 matters: without it a flex item refuses to shrink below its
   content's minimum, and one long unbreakable URL drags the bubble wider
   than the panel (spilling off the LEFT on right-aligned outbound ones). */
/* a bubble at most a reading width wide (the Messages tab's thread is wide) */
.ck-msg{display:flex;flex-direction:column;max-width:min(84%,540px);min-width:0}
.ck-msg.out{align-self:flex-end;align-items:flex-end}
.ck-msg.in{align-self:flex-start;align-items:flex-start}
/* `anywhere`, not `break-word`: only `anywhere` also shrinks the element's
   min-content width, which is what lets a pasted link wrap instead of
   stretching the bubble. Links are the normal case here — we text them. */
.ck-bub{font-size:13px;line-height:1.45;padding:9px 12px;border-radius:13px;white-space:pre-line;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.ck-msg.out .ck-bub{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ck-msg.in .ck-bub{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-bottom-left-radius:4px}
.ck-bub-ph{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;opacity:.85;margin-top:2px}
.ck-bub-ph .ic{width:13px;height:13px}
.ck-bub-t{font-size:11px;color:var(--muted);margin-top:4px;padding:0 3px}
.ck-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ck-composer .input{flex:1}
/* the message box grows with the message, one line to six, then scrolls
   inside (owner, 30 Sep 2026); the buttons beside it keep to its foot */
.ck-composer textarea.input{min-height:38px;max-height:138px;padding:8px 12px;line-height:20px;resize:none;overflow-y:hidden}
.ck-composer .btn.iconish{padding:0;width:38px;height:38px;justify-content:center}
.ck-composer .btn.iconish .ic{width:18px;height:18px}

@media(max-width:1180px){
  .ck-grid{grid-template-columns:1fr 1fr;grid-auto-flow:row}
  .ck-rail{grid-column:1 / -1}
  /* The rail stays VERTICAL at every width now that it lives inside the
     left column (owner's choice). The old horizontal stepper is gone: it
     broke labels mid-word ("Inspec / tion / booke / d") the moment the
     column narrowed. */
  .ck-centre{grid-column:1 / -1}
  .ck-right-col{grid-column:1 / -1;position:static}
  .ck-right{max-height:none;position:static}
}
/* stacked under the rest in a laptop's narrower window, the conversation is
   at most a screen tall and scrolls inside rather than growing the page with
   every message. Not for a finger: a thumb over a thread that scrolls
   would have to swipe back through all of it to get up the page, and a
   phone has the Messages tab for a long conversation. */
@media (max-width:1180px) and (hover:hover) and (pointer:fine){
  .ck-right{max-height:calc(100vh - 140px);max-height:calc(100svh - 140px)}
}
@media(max-width:760px){
  .ck-page{padding:14px}
  .ck-top{margin-top:-14px;padding-top:14px}
  .ck-grid{grid-template-columns:1fr}
  .ck-left-col{grid-column:1 / -1}
}

/* ============================================================ INSPECTION REPORT (#/report/:id)
   The page is drawn in the Verdict look (THE INSPECTION REPORT, VERDICT,
   below); these two are the page's frame and its empty state. */
.rv-page{padding:0 0 40px}
.rv-empty{max-width:560px;margin:8px auto}
.seg.sm button{padding:6px 11px;font-size:12px}

/* ============================================================ OFFERS (#/offers) */
.of-page .page-h{margin-bottom:18px}
.of-split{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
/* LEFT — cars-on-offer list */
.of-list{overflow:hidden}
.of-list-b{display:flex;flex-direction:column;padding:8px}
.of-item{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 12px;cursor:pointer}
.of-item:hover{background:var(--surface-2)}
.of-item.on{background:var(--accent-soft);border-color:transparent;box-shadow:inset 3px 0 0 var(--accent)}
.of-item-h{display:flex;align-items:center;gap:8px}
.of-veh{font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.of-item-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.of-best{font-size:14px;font-weight:600;color:var(--accent-2)}
.of-item-m .muted{font-size:12px}
.of-item-m .age{font-size:11px;padding:2px 7px}
/* RIGHT — compare table */
.of-detail{overflow:hidden}
.of-stick{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.of-stick-veh{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px}
.of-stick-meta{font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:8px}
.of-stick-meta .mono{color:var(--text)}
.of-stick-meta .age{font-size:11px;padding:2px 7px}
/* the room fills the detail pane; what buyers typed reads underneath it */
.of-room{padding:14px}
.of-notes{border-top:1px solid var(--line);padding:12px 14px 14px}
.of-notes-h{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:8px}
.of-note{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.of-note:last-child{border-bottom:0}
.of-note-ws{font-weight:600;color:var(--text)}
.of-note-t{color:var(--text-2);line-height:1.5}
.of-note-w{color:var(--muted);font-size:11.5px;white-space:nowrap}
@media (max-width:760px){.of-note{grid-template-columns:1fr auto}.of-note-t{grid-column:1/-1}}

/* ===== the offer room (app/screens/_offerroom.js) =====
   One panel in two homes at very different widths: the cockpit's Offer hero
   (~256px at a 1280 screen) and the Offers detail pane (~900px). It sizes
   itself off ITS OWN width, not the window's, because at 1280 those two are
   the same window and a media query would have to be wrong for one of them.
   Stacked is the default, so a browser without container queries still gets
   a row that reads; the wide single line is the upgrade. */
.or{border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden;
  container-type:inline-size}
.or-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg-deep);
  border-bottom:1px solid var(--line);font-size:12.5px}
.or-h-l{display:flex;align-items:center;gap:7px;font-weight:600}
.or-h-l svg{width:14px;height:14px;color:var(--muted)}
.or-h-r{margin-left:auto}
.or-h-r .age{font-size:11px;padding:2px 7px}
.or-n{color:var(--muted);font-weight:500}
.or-best{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.or-best .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.or-best .v{font-size:17px;font-weight:700}
.or-best .who{font-size:12.5px;color:var(--muted)}
.or-best.none{color:var(--muted);font-size:12.5px}
.or-delta{margin-left:auto;font-size:11.5px;font-weight:700}
.or-delta.up{color:var(--ok)} .or-delta.down{color:var(--bad)}
/* narrow: who and where they got to on top, how the text went and what you
   can do underneath. The buyer's name never truncates, which is the whole
   reason this is not one rigid row at every width. */
.or-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"ws state" "send acts";gap:3px 8px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.or-row:last-child{border-bottom:0}
.or-row.best{background:var(--ok-bg)}
.or-ws{grid-area:ws;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.or-send{grid-area:send;font-size:11px;min-width:0}
.or-state{grid-area:state;white-space:nowrap;text-align:right}
.or-acts{grid-area:acts;display:flex;gap:6px;justify-content:flex-end}
.or-s.ok{color:var(--ok)} .or-s.bad{color:var(--bad)}
.or-s.mid{color:var(--muted)} .or-s.none{color:var(--faint)}
.or-amt{font-weight:700} .or-amt.win{color:var(--ok)}
.or-acts .btn.sm{white-space:nowrap}
/* wide enough for one line: four real columns, denser per buyer */
@container (min-width:520px){
  .or-row{grid-template-columns:minmax(120px,1.3fr) minmax(0,1fr) auto auto;
    grid-template-areas:"ws send state acts";gap:10px}
  .or-send{text-align:left}
}
.or-f{display:flex;gap:8px;flex-wrap:wrap;padding:9px 12px;background:var(--bg-deep);border-top:1px solid var(--line)}
.or-empty{padding:16px 12px;text-align:center;color:var(--muted);font-size:12.5px}
.or-empty b{display:block;color:var(--text);margin-bottom:3px}

/* ============================================================ REPORTS (#/reports) */
.rp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.rp-note{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
/* horizontal bar list (leads by source / stage throughput) */
.barlist{display:flex;flex-direction:column;gap:2px}
.barrow{display:grid;grid-template-columns:118px 1fr 44px;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line)}
.barrow:last-child{border-bottom:none}
.barrow .bl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-2);min-width:0}
.barrow .bl .dot{width:8px;height:8px;border-radius:50%;flex:none}
.barrow .bl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow .bt{height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.barrow .bt > i{display:block;height:100%;border-radius:5px;min-width:3px}
.barrow .bv{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;color:var(--text)}
.barrow.zero .bv{color:var(--faint)}
/* Leads by brand: a bar row plus the numbers that make the split useful */
.rp-brow{padding:11px 18px;border-bottom:1px solid var(--line)}
.rp-brow:last-child{border-bottom:none}
.rp-brow .barrow{padding:0;border-bottom:none}
.rp-bsub{display:flex;flex-wrap:wrap;gap:14px;margin:7px 0 0 130px;font-size:11.5px;color:var(--muted)}
.rp-bsub b{font-family:var(--mono);font-weight:600;color:var(--text-2)}
.rp-brow.zero .rp-bsub{color:var(--faint)}
.rp-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--faint);line-height:1.55}
/* Reports reuses the queue's result line verbatim (.stg-result / .stg-chip),
   so a filtered page discloses itself the same way on both screens */
.rp-result{margin:0 0 14px}
@media(max-width:760px){.rp-bsub{margin-left:0}}

/* ============================================================ SETTINGS (#/settings) */
.set-grid{display:grid;grid-template-columns:196px 1fr;gap:20px;align-items:start}
/* The content column has to be allowed to be narrower than its widest table.
   A grid item's automatic minimum size is its content, so without this the
   Team table shoves the whole page sideways on a phone instead of scrolling
   inside its own .tablewrap card. */
.set-grid > div{min-width:0}
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
/* A gap opens ahead of each group of sections (TABS in screens/settings/
   index.js), which is how the order reads as daily, now and then, and set
   once, without a label saying so. Reset where the nav becomes a row. */
.set-nav a.grp{margin-top:12px}
/* The heading over each tab and the one line under it saying what the tab
   is for and what changing it affects. --text-2 on the page ground measures
   10.01:1, and the notes under the tables move off --faint (2.68:1 here)
   onto --muted (5.13:1). */
.set-head{margin:0 0 16px}
.set-head h2{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.set-lead{font-size:13.5px;color:var(--text-2);line-height:1.55;margin:5px 0 0;max-width:72ch}
.set-more-go{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent-2);cursor:pointer;white-space:nowrap}
.set-more-go:hover{text-decoration:underline}
.set-grid .hintline{color:var(--muted)}
/* a Settings count with no figure yet (or none to be had): --muted, not --faint, because the ? has to be read */
.set-wait{color:var(--muted)}
.set-grid .hint{font-size:12px;color:var(--muted);line-height:1.45}
.set-nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;border:1px solid transparent}
.set-nav a:hover{background:var(--surface-2);color:var(--text)}
.set-nav a.on{background:var(--surface-3);color:var(--text);border-color:var(--line-2);font-weight:600}
.set-nav a .ic{width:16px;height:16px;flex:none;color:var(--muted)}
.set-nav a.on .ic{color:var(--accent-2)}
/* One mark on the nav, for the one tab that can be UNDONE: an account with no
   name or number for customers. Ink on the amber tint rather than amber text,
   so an 10.5px pill is read rather than squinted at, and the hairline carries
   the colour. It is rendered only while something is missing. */
.set-nav-flag{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:1px 7px;border-radius:999px;
  background:var(--warn-bg);color:var(--text);border:1px solid var(--warn)}
.set-sub{font-size:12.5px;color:var(--muted);margin:-2px 0 14px;line-height:1.5}
.swatch{display:inline-block;width:12px;height:12px;border-radius:4px;flex:none}
/* integration / toggle rows */
.set-rows{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-row .ri{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center}
.set-row .ri .ic{width:17px;height:17px}
.set-row .rt{flex:1;min-width:0}
/* a row with more than one button (Meta's Check now and Turn on instant) */
.set-row .int-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none}
.set-row .rt b{display:block;font-size:13.5px;font-weight:600}
.set-row .rt span{font-size:12px;color:var(--muted)}
.set-row .rmeta{font-size:12.5px;color:var(--text-2);white-space:nowrap}
/* An integration's state is a pill under its words, in one place on every
   row, the provider and the control at the right (look audit round 3a) */
.int-live{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--surface-2);color:var(--muted);white-space:nowrap}
.int-live.ok{background:var(--ok-bg);color:var(--ok)}
.int-live.warn{background:var(--warn-bg);color:var(--warn)}
/* the control's column is at least a switch wide, so a row with none (Photo
   storage, E-signature) ends its provider where a switch row's does */
.set-row:has(> .int-live){display:grid;grid-template-columns:34px minmax(0,1fr) auto minmax(40px,auto);
  grid-template-areas:"ri rt meta ctl" "ri live meta ctl";column-gap:14px;row-gap:5px;align-items:center}
.set-row:has(> .int-live) > .ri{grid-area:ri;align-self:start}
.set-row:has(> .int-live) > .rt{grid-area:rt}
.set-row:has(> .int-live) > .int-live{grid-area:live;justify-self:start}
.set-row:has(> .int-live) > .rmeta{grid-area:meta}
.set-row:has(> .int-live) > :is(.tgl,.btn,.int-acts){grid-area:ctl;justify-self:end}
/* on/off toggle */
/* One switch across Settings, the Automations look (.au-toggle): solid
   violet with a white knob when on (look audit round 3a, 7 Oct 2026) */
.tgl{position:relative;width:40px;height:23px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);
  flex:none;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--muted);transition:left var(--fast),background var(--fast)}
.tgl.on{background:var(--accent);border-color:var(--accent)}
.tgl.on::after{left:19px;background:#fff}
/* a switch for a service that is not set up yet: greyed out, so On never
   sits beside Not configured (Integrations, Notifications) */
.tgl.unset,.tgl:disabled{opacity:.45;filter:grayscale(1);cursor:default}
.tgl.unset{background:var(--surface-2);border-color:var(--line-2)}
.tgl.unset::after{left:2px;background:var(--muted)}
/* small mono SLA input */
.sla-inp{width:74px;height:34px;text-align:right;font-family:var(--mono)}
/* the one stage whose thresholds do not reach every lead in it says so on
   its own row. Indented under the stage name, and held narrow so a long
   sentence cannot push the two number columns off a phone. */
.sla-note{margin:4px 0 0 26px;max-width:38ch;font-size:11.5px;line-height:1.4;color:var(--muted)}
/* the office hours over the table: what they do, and the two times */
.sla-hours{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;margin-bottom:14px;padding:14px 18px}
.sla-hours-t{flex:1 1 320px;min-width:0}
.sla-hours-t b{font-size:14px;font-weight:600}
.sla-hours-t p{margin-top:4px;max-width:70ch;font-size:12.5px;line-height:1.45;color:var(--muted)}
.sla-hours-f{display:flex;gap:10px}
.sla-hours-f .fld{width:132px;margin-bottom:0}
.set-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line)}
.set-add .fld{margin-bottom:0;flex:1;min-width:140px}
/* Settings, Sources: the add form's heading, the palette, the Edit cell */
.src-add-h{padding:14px 18px 0;font-size:13px;font-weight:700}
.src-add .set-add{border-top:0}
.src-add .set-add .fld:has(.src-pal){flex:0 1 auto}
.src-pal{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
.src-sw{position:relative;width:28px;height:28px;border-radius:8px;border:2px solid transparent;
  background:var(--sw);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.src-sw.used::after{content:"";position:absolute;right:3px;bottom:3px;width:6px;height:6px;border-radius:50%;
  background:#fff;opacity:.9}
.src-sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.src-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.src-grid td.src-act{width:1%;white-space:nowrap;text-align:right}
.av-sm{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent-soft);border:1px solid var(--line-2);
  color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}

/* ---- My details, and the same pair on the Team table ---------------------
   What a CUSTOMER sees of an account: the name a seller reads in a text about
   a lead this person holds, and the number they are asked to ring. Two boxes
   and an example of the text they land in, because the whole question anybody
   has here is "what will a stranger actually read". */
.md-wrap{display:flex;flex-direction:column;gap:14px}
.md-card{padding:16px 18px}
.md-h b{display:block;font-size:13.5px;font-weight:600}
.md-h span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:72ch}
.md-fields{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
/* Each box takes half the card and neither drops below a readable number:
   "0412 345 678" in a 120px input is a scroll, not a field. */
.md-fields .fld{flex:1 1 260px;min-width:0;margin-bottom:0}
.md-fields .hint{display:block;margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.45}
.md-why{margin-top:14px;font-size:12.5px;color:var(--text-2);line-height:1.5;max-width:72ch}
.md-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.md-act-note{font-size:11.5px;color:var(--muted)}
/* My details: the staff signature pad (contract v2) */
.md-sig-pad{display:block;width:100%;max-width:560px;height:170px;margin-top:12px;background:#fff;
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);touch-action:none;cursor:crosshair}
.md-sig-pad:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.md-sig-saved{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.md-sig-saved img{max-width:280px;max-height:90px;object-fit:contain;align-self:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 8px}
/* Paperwork tab: contract terms (contract v2) */
.pw-terms{display:flex;flex-direction:column;gap:12px}
.pw-terms .seg{align-self:flex-start}
.pw-terms textarea{resize:vertical;min-height:52px}
.pw-terms .pw-terms-t{white-space:pre-wrap;overflow-wrap:anywhere}
.pw-terms > .btn{align-self:flex-start}
/* The example. A text bubble, because that is where these two words end up,
   and a line the server would DROP is shown as dropped rather than as a
   sentence with a hole in it (services/missed_call.without_the_sentence). */
.md-eg-bubble{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding:12px 14px;
  border-radius:var(--radius-sm);background:var(--bg-deep);border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--text)}
.md-eg-v{font-weight:700;color:var(--accent-2)}
.md-eg-gone{color:var(--muted);font-style:italic;
  padding-left:10px;border-left:2px solid var(--line-2)}
/* The nudge. Amber tint, ink text, and it is not rendered at all once both
   fields are set: nobody is told twice about something they have done. */
.md-nudge{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--warn-bg);color:var(--text);font-size:12.5px;line-height:1.55}
.md-nudge .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--warn)}
/* The Team table's column. A whole team's worth has to be scannable, so the
   name sits on top and the number under it, and the accounts with nothing
   set carry the only colour in the column. */
.tm-cust{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;min-width:0}
.tm-cust b{font-weight:600;font-size:13px;border-bottom:1px dotted var(--line-2)}
.tm-cust small{font-size:11.5px;color:var(--muted)}
.tm-cust small.tm-cust-half{color:var(--warn);font-weight:600}
.tm-cust:hover b{border-bottom-color:var(--accent)}
.tm-cust-na{font-size:11.5px;color:var(--muted)}

@media(max-width:980px){
  .of-split{grid-template-columns:1fr}
  .rp-cols{grid-template-columns:1fr}
  .set-grid{grid-template-columns:1fr}
  .set-nav{flex-direction:row;flex-wrap:wrap;position:static}
  .set-nav a.grp{margin-top:0}
}


/* ============================================================ RESPONSIVE
   Desktop-first. Tablet (≤960) = icon-rail sidebar + denser grids.
   Phone (≤640) = bottom tab bar replaces the sidebar; screens stack. */

/* ---- early grid relax (wide tablets / small laptops) ---- */
@media(max-width:1040px){
  .cc-stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- TABLET: the sidebar rail (642 to 960px) is NOT a media query any more.
   It is html.rail, set by js/shell.js before first paint and owned by
   setRail() after that, and it is the DEFAULT in this band. One trigger, one
   definition, and the operator can override it at any width. See the RAIL
   block in the SIDEBAR section. ---- */
@media(max-width:960px){
  .page{padding:20px 18px}
}

/* ---- PHONE: bottom tab bar, stacked screens (≤640px) ---- */
@media(max-width:640px){
  /* sidebar out, bottom bar in (app shell only — never on portal) */
  #app{display:block;height:auto;min-height:var(--app-h);overflow:visible}
  .sidebar{display:none}
  /* The rail gutter goes with it. html.rail #view carries a 64px margin so
     that widening the fixed sidebar on hover cannot reflow the queue behind
     it, and that margin means nothing once the sidebar is display:none. Left
     in, every phone rendered the whole CRM into 326px of a 390px screen, a
     sixth of it held open for a sidebar that is not there. */
  html.rail #view{margin-left:0}
  #view{height:auto;min-height:var(--app-h);overflow:visible}
  body:not(.portal):not(.auth) #view{padding-bottom:calc(64px + env(safe-area-inset-bottom,0))}
  /* No height of its own: the tabs are 56px and the home indicator's inset
     is added under them. A fixed 56px here was a border box, so on the home
     screen app the 34px inset came out of the tabs and left them 22px. */
  body:not(.portal):not(.auth) .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0)}

  /* No zoom when a box is tapped: iOS zooms into any text control under
     16px, and nothing in the viewport stops it now that a phone can pinch
     zoom (index.html). A floor rather than a style, so it outranks every
     control's own size: as a plain class rule it lost to five of them (the
     sort box, the filter drawer's boxes, Records' bar, the team's role box
     and the template editor, measured 27 Sep 2026). */
  .input,.select,textarea.input,.searchbox input,.sla-inp,input,select,textarea,
  [contenteditable]:not([contenteditable="false"]){font-size:16px!important}
  .sla-inp{height:38px}

  /* page + headers reflow */
  .page{padding:16px 14px}
  .page-h{flex-direction:column;align-items:stretch;gap:12px}
  .page-h .right{margin-left:0;flex-wrap:wrap}
  .page-h h1{font-size:24px}
  .searchbox input{width:100%}

  /* the stat cards Reports and Spend draw, two across */
  .cc-stats{grid-template-columns:repeat(2,1fr);gap:10px}

  /* dense tables → horizontal scroll (keep the dense row layout) */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.grid{min-width:560px}

  /* Cockpit: single column (progress → cards → centre → messages) */
  .ck-page{padding:14px}
  .ck-grid{grid-template-columns:1fr;gap:12px}
  /* one-word step labels — the 6-across stepper can't fit the full ones */
  .ck-step .l-full{display:none}
  .ck-step .l-short{display:inline}
  .ck-step .lbl{font-size:10.5px}
  .ck-left-col,.ck-centre,.ck-right-col{grid-column:1 / -1}
  .ck-right-col{position:static}
  .ck-right{max-height:none;position:static}
  .ck-top{flex-wrap:wrap;gap:8px}
  /* Five tabs and their counts are wider than a phone (the Inspection tab,
     7 Oct 2026), so the bar runs to the glass on both sides and scrolls
     sideways: a word cut at the screen's edge says there is more, where one
     cut inside the page's margin read as broken. The tab showing is kept in
     sight (cockpit.js, tabInSight). */
  .ck-tabs{margin-left:-14px;margin-right:-14px;padding:0 14px;scroll-padding:0 14px;scrollbar-width:none}
  .ck-tabs::-webkit-scrollbar{display:none}
  .ck-tab{padding-left:12px;padding-right:12px}
  .ck-tab-n{margin-left:5px}
  /* The vehicle title drops the display face on a phone rather than
     shrinking it. ELEVATION-KIT rule 1 puts a hard floor under
     Schibsted at 24px, and 24px Schibsted in the 247px title column
     a 375px screen leaves takes "2019 Toyota LandCruiser Prado GXL"
     to three lines where 20px Manrope takes two. That is about 37px,
     a line and a half of queue, pushed below the fold on every
     cockpit open, and the owner asked for density. Below the floor
     the two grotesks are not distinguishable anyway, so the face is
     what gives, not the size. */
  .ck-top-title .ck-veh{font-family:var(--font);font-size:20px;letter-spacing:-.02em}
  .ck-top-act{margin-left:0;width:100%}
  .ck-top-act .btn{flex:1;justify-content:center}
  /* The header is already tight at 375. The arrows keep their full thumb
     targets (.iconbtn is 40px here) because they are the control the owner
     asked for; what gives is the counter, which drops to "7/61" (the same
     full/short swap the progress rail uses a few lines up), and the car's
     title, which takes a line of its own so the stepper cannot squeeze the
     rego and stage chips into a stack. Only when the arrows are actually
     there: a lead opened with no queue behind it keeps the old header. */
  .ck-walk{margin-left:0;gap:2px}
  .ck-walk-n{min-width:0;padding:0 2px}
  .ck-walk .w-full{display:none}
  .ck-walk .w-short{display:inline}
  .ck-top.has-walk .ck-top-title{flex-basis:100%}

  /* Offers: master/detail stacks (list above, compare below) */
  .of-split{grid-template-columns:1fr;gap:14px}
  .of-list-b{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .of-item{flex:0 0 220px}

  /* Inspection report: the Verdict page lays itself out on a phone
     (THE INSPECTION REPORT, VERDICT); the frame keeps a little less foot. */
  .rv-page{padding-bottom:32px}
  .rp-cols{grid-template-columns:1fr}

  /* Settings + reports: single column */
  .set-grid{grid-template-columns:1fr}
  .set-nav{flex-direction:row;flex-wrap:wrap;position:static}

  /* modals sit near the top so the on-screen keyboard can't hide the fields,
     and below the status bar of the home screen app */
  .modal-back{align-items:flex-start;padding:calc(12px + env(safe-area-inset-top,0px)) 12px 12px}
  .modal{max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px))}
  /* toast clears the bottom tab bar so it never covers nav or the Undo action */
  body:not(.portal):not(.auth) #toast-root{bottom:calc(68px + env(safe-area-inset-bottom,0))}
  /* comfortable thumb targets for the most-tapped controls */
  .iconbtn{min-width:40px;min-height:40px}
  .btn.sm{padding:10px 14px}
  /* the cockpit's bar wraps to three lines here and would eat the same height */
  .ck-top{position:static}
}

/* tiny phones: the stat cards to a single column so they stay legible */
@media(max-width:380px){
  .cc-stats{grid-template-columns:1fr}
}

/* read/unread: a lead nobody has opened is one quiet mark, a purple dot
   before the car (before the seller on a phone), with the row's accent
   edge, tint and bold name, and the Seen filter. A NEW badge read as the
   New step it sits under, and on a 1280 laptop it cut the car's name to
   "2016 Peu..." (look audit round 4, 8 Oct 2026). */
.new-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
tr.unseen{background:rgba(110,108,242,.05)}
tr.unseen .vt{font-weight:700}
tr.unseen td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* ---- New leads sub-stage bar (New / No answer / Follow up / Post follow up)
   Four steps of one lead's week, left to right, each with its live count,
   and Replied on the far end: the row badge as a filter. Deliberately NOT
   styled as another filter segment. Which pile you work is the first
   decision of the day, so it gets the number at full size and its own row
   above the filter bar. Every step is drawn at zero too, a count of nothing
   is still a place on the clock. A chevron in each gap says "then", so the
   four read as one week, and the selected step carries the same three marks
   a selected row does, the violet edge, the violet tint and the violet
   figure, so it cannot be mistaken for a hover. The tiles rest flat and
   lift on hover like every tile in the app. The container keeps
   its id and class (stg-buckets, bkt): stage.js and the tests know them,
   and a DOM hook is not the concept it draws. */
.stg-buckets{display:flex;align-items:stretch;gap:14px;margin:0 0 12px;container:stg-bar/inline-size}
.bkt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;flex:1 1 auto;min-width:0}
.bkt{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);min-width:0;
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.bkt:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--shadow-card)}
/* the "then" between steps, drawn in the gap: a 7px chevron, its box
   centred on the 14px gap, in the same ink as the hint line under it */
.bkt-row .bkt:not(:last-child)::after{content:'';position:absolute;right:-10.5px;top:50%;width:7px;height:7px;
  border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
/* 22px is the ceiling for --font (see the header) and tabular Manrope keeps
   a 9 and a 12 the same width, so the tiles do not shift as counts move */
.bkt .bkt-n{font-size:22px;font-weight:700;color:var(--text);line-height:1;min-width:1.4em;flex:none}
.bkt .bkt-sk{width:1.2em;height:14px;margin:0}
.bkt .bkt-t{display:flex;flex-direction:column;gap:2px;min-width:0}
/* the name may wrap: it is the point of the tile, and a name out of room
   painted on under the next tile instead (see the stg-bar container below) */
.bkt .bkt-t b{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--text)}
.bkt .bkt-t b .ic{width:13px;height:13px;flex:none}
.bkt .bkt-t span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.bkt.on:hover{box-shadow:inset 3px 0 0 var(--accent),var(--shadow-card)}
.bkt.on .bkt-n,.bkt.on .bkt-t b{color:var(--accent-2)}
/* New is the day's work, so it reads as the live one even unselected */
.bkt.primary .bkt-n{color:var(--accent-2)}
/* Replied: the row badge, made a step. Red only while somebody is waiting,
   the way the SLA chip goes red for the same seller; plain when nobody is,
   and the count stays because zero replies is information too. */
.bkt.rp{flex:0 0 auto;min-width:176px}
.bkt.rp .bkt-t b .ic{color:var(--muted)}
.bkt.rp.has{background:var(--bad-bg);border-color:transparent}
.bkt.rp.has .bkt-n,.bkt.rp.has .bkt-t b,.bkt.rp.has .bkt-t b .ic{color:var(--bad)}
.bkt.rp.has:hover{background:color-mix(in srgb,var(--bad) 8%,var(--bad-bg))}
.bkt.rp.on{border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 3px 0 0 var(--bad)}
.bkt.rp.on:hover{box-shadow:inset 3px 0 0 var(--bad),var(--shadow-card)}
.bkt.rp.on .bkt-n,.bkt.rp.on .bkt-t b,.bkt.rp.on .bkt-t b .ic{color:var(--bad)}
/* Contacted's bar: To book and Schedule follow up. Two steps get two
   halves of the row, not two quarters of a four step grid with the rest
   missing, and no chevron, because a lead moves both ways between them
   (Schedule follow up sends it right, Reached them brings it back), so
   "then" would be a lie. Schedule follow up carries its due split at the
   far end of the tile, in
   the DUE column's own marks, so a broken promise reads from To book. */
.bkt-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bkt-row.two .bkt:not(:last-child)::after{content:none}
/* The story and the due split wrap as one box beside the count. Each goes on
   the line at its whole width, so the split sits at the far end while both
   fit and drops under the story, lined up with it, the moment they do not.
   A breakpoint could not know when that is: the tile is half a row that the
   sidebar widens and narrows, and the split grows with its counts. Pinned to
   one line instead, "Follow up contacted" painted over "5 overdue" from the
   phone layout up to a 1024 laptop. */
.bkt-body{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;flex:1 1 auto;min-width:0}
.bkt-body .bkt-t{flex:1 1 auto;max-width:100%}
.bkt-due{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;flex:0 1 auto;min-width:0;
  font-size:12px;line-height:1.2;color:var(--text);white-space:nowrap}
.bkt-due .due-dot{margin-right:6px}
.bkt-due .due-later{color:var(--muted);font-weight:500}
@media (max-width:760px){
  /* a phone gets a second layout, not the desktop one squeezed: two steps a
     row, still read left to right then down, and Replied as a full width
     strip under them. The chevrons go, a "then" that turns a corner is
     noise; the hints stay, the story is the point. */
  .stg-buckets{flex-direction:column;gap:8px}
  .bkt-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bkt-row .bkt:not(:last-child)::after{display:none}
  .bkt{gap:10px;padding:10px 12px}
  .bkt .bkt-n{font-size:20px}
  /* two across, a hint wraps rather than clips: the story is the point */
  .bkt .bkt-t span{white-space:normal}
  .bkt.rp{min-width:0}
  /* Contacted's two stack, one full width row each. Two across would give
     "Follow up contacted" 170px, and the name, its story and the due split
     would wrap to four lines of a tile nobody can read at a glance. */
  .bkt-row.two{grid-template-columns:minmax(0,1fr)}
  /* the due split needs no rule of its own here: .bkt-body drops it under
     the story whenever the two do not fit side by side */
}
/* New leads' four steps two by two, with Replied still beside them, once the
   bar is too narrow for four names in a row. The bar is its own container
   because a viewport breakpoint cannot know its width: the sidebar decides
   it, and pinned wide at 1024 it left a 720px bar where "Post follow up" was
   cut to "Post follow u" under Replied. 928px is the row they need with
   three digit counts: four tiles of 42px padding, border and gap, a 41px
   count and the 87px name, the three gaps between them, then Replied.
   Replied stays beside the four, running the height of both rows, so the
   bar is two tiles tall on a laptop and not the phone's three. The chevrons
   go as they do on a phone, because one would turn a corner and another
   would point at Replied. */
@container stg-bar (max-width:927px){
  .bkt-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bkt-row .bkt:not(:last-child)::after{display:none}
}

/* how many times we actually rang, beside the age chip */
.try-chip{display:inline-flex;align-items:center;gap:4px;margin:0;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);
  background:var(--surface-2);border-radius:6px;padding:2px 6px;white-space:nowrap}
.try-chip .ic{width:11px;height:11px}
.try-chip .sub{font-weight:500;opacity:.72}

/* Replied on a row: the same glyph and word as the bar's step, the NEW
   badge's geometry (they share the identity line) in the SLA red, and a red
   edge on the first cell that outranks the unseen violet below its rule
   here, because a reply matters more than a first look. The row says "this
   person wants to talk to you" before a word of it is read. */
.replied-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bad);background:var(--bad-bg);border-radius:5px;padding:2px 7px 2px 6px;
  margin-right:2px;vertical-align:middle;white-space:nowrap;flex:none}
.replied-badge .ic{width:11px;height:11px}
tr.replied td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

/* the missed call clock (New leads, the rung views): seven segments for the
   seven texts, the tally under them, how long since the miss under that. The
   tally went under the track so the column is as wide as "4 of 6, stopped"
   and not the track and the tally side by side, which is what let the rung
   views fit at 1440 with the sidebar open. Three lines of 11px sit inside
   the row the two rows of buttons already set. Violet
   for a text the CRM has sent, it is the CRM working, not a warning; the
   hairline where one is still to go. Once a reply has stopped the sequence
   the word turns red and the track stays as it was: a red track would read
   as a failure on a lead that has just come good. */
.sq{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.sq-top{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.sq-track{display:inline-flex;gap:2px;flex:none}
.sq-seg{width:9px;height:4px;border-radius:2px;background:var(--line-2)}
.sq-seg.on{background:var(--accent)}
/* The id of another card, drawn as the way to open it. Underlined on hover
   only, so a dense queue row does not gain a second permanent rule through
   it, and it carries the colour of the words around it rather than the link
   blue, because it IS the label. */
.lead-go{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.lead-go:hover,.lead-go:focus-visible{text-decoration:underline;border-bottom-color:transparent}
.sq-lb{font-size:11px;font-weight:600;color:var(--text-2);white-space:nowrap}
.sq.stopped .sq-lb{color:var(--bad)}
/* Twilio says our texts are not arriving on this number. The same red a
   stopped sequence gets, because both mean the office has to pick up a phone,
   and a colour of its own here would be a third thing to learn for a state
   that asks for the same action. */
.sq.done .sq-lb{color:var(--muted)}
/* texts that are over without this card sending them, "texts on L-4091" or
   "1 of 7, ended": muted like a finished run, never red, nothing failed */
.sq.ended .sq-lb{color:var(--muted)}
.sq-sub{font-size:11px;color:var(--muted);white-space:nowrap}

/* an account that has been disabled: it speaks for nothing, so the row may
   not read as looked after (services/allocation.speaks_for) */
.asg-tag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);flex:none}
/* Assigned to, the column after Seller in every queue (app/js/held.js): a
   badge with the initials, then the first name. Yours is the accent, so your
   own rows are found by eye. A lead nobody holds is the common case on
   production, so Nobody is a dashed ring in quiet ink, a state and not fifty
   alarms. */
.asg{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.asg-b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-2);
  font-size:10.5px;font-weight:700;letter-spacing:.03em}
.asg-b .ic{width:12px;height:12px}
.asg-n{overflow:hidden;text-overflow:ellipsis;max-width:120px;font-weight:600;color:var(--text-2)}
.asg.me .asg-b{background:var(--accent);border-color:var(--accent);color:#fff}
.asg.me .asg-n{color:var(--accent-2)}
.asg.gone .asg-b{opacity:.55}
.asg.gone .asg-n{font-weight:500;color:var(--muted)}
.asg.none .asg-b{background:none;border:1.5px dashed var(--line-2);color:var(--muted)}
.asg.none .asg-n{font-weight:500;color:var(--muted)}
.asg-ti{display:none}
.asg-ti .ic{width:13px;height:13px}
/* a table with no room for the names (Held.fit): the badge alone, under the
   glyph, the words kept for a screen reader and in the hover */
table.held-tight .asg-tw,table.held-tight .asg-n{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.held-tight .asg-ti{display:inline-flex;vertical-align:middle}
table.held-tight .asg .asg-tag{display:none}
/* and pays for itself there: before the column the main New leads view fit
   1440 with the sidebar open exactly, so the badge's cell keeps a slimmer
   gap and the Seller cell is capped 24px tighter (measured on the seed, 1 Oct
   2026). The gap carries #stg-live, or the queue's own 10px side padding
   outweighs it; Inspections and Pay & collect cap their own cells. */
#stg-live table.grid.held-tight thead th.q-held,#stg-live table.grid.held-tight tbody td.q-held{padding-left:6px;padding-right:6px}
table.held-tight .cust{max-width:166px}
/* a phone's card has no columns. Each card sets its cells' display with
   more weight than one class, so each is named and outweighed (q-cards a
   block, Inspections a block in #stg-live, Pay & collect display:contents,
   which would hand the badge to the card's grid as a stray item). */
@media (max-width:640px){
  .q-held,.q-cards tr[data-id] > td.q-held,#stg-live table.grid.insp-grid tbody td.q-held,
  table.grid.pc-grid tbody tr.pcr > td.q-held{display:none}
}

.seg-filter{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.seg-filter .segf{font-size:12px;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:7px;padding:5px 11px;cursor:pointer}
/* the selected segment carried its whole signal in text colour, on a track
   three percent lighter than the button. This is the primary brand switch on
   the queues, Reports and Records, so give it a real edge and a lift. Inset
   shadow, not a border: a border would resize the button and shift the row. */
.seg-filter .segf.on{background:var(--surface-3);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.10)}
.seg-filter .segf .mono{opacity:.7;margin-left:2px}
/* A segment count still on its way. Sized in em off the button's own font so
   it holds roughly the width two digits take, which is what stops the row
   shifting under the cursor when the real figures land. Its own colour, not
   the skeleton's: this track is already --surface-2, so the shared bar is
   invisible on the segments nobody has selected, which is most of them. */
.seg-filter .segf .seg-sk{display:inline-block;width:1.2em;height:9px;
  vertical-align:middle;margin:0;background:var(--line-2)}
.sortby{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.sortby .select{width:auto;height:32px;font-size:12.5px;color:var(--text);padding:0 30px 0 11px;background-position:right 9px center;border-radius:8px}

/* ===== stage filter bar (brand / search / sort + the collapsible row) =====
   Two rows under the page header, above the table. Deliberately NOT sticky:
   the table already scrolls inside #view and a sticky bar costs vertical
   space on a laptop. Both rows wrap, so they reflow instead of overflowing. */
.page-h.stg-h{margin-bottom:13px}
.stg-filters{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.stg-frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* the search box absorbs whatever room row 1 has left, up to a sane cap, so
   the placeholder stays readable at 1440 and the row still holds one line on a
   1366 laptop instead of dropping a lonely control onto a second line */
.stg-search{flex:1 1 260px;max-width:340px;min-width:0}
.stg-search input{width:100%;height:34px}
.stg-frow .flex1{flex:1 1 0}
.stg-fl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.stg-num{height:32px;width:88px;font-size:12.5px;background:var(--surface)}
.stg-src{width:auto;max-width:132px;height:32px;font-size:12.5px;background-color:var(--surface);padding:0 30px 0 11px;background-position:right 9px center;border-radius:8px}
/* longest option is "Opened, not finished", which will not fit a source-sized box */
.stg-form{max-width:178px}
/* a campaign name runs longer than any source or form state */
.stg-camp{max-width:240px}
/* the collapsible row is a drawer, not a second toolbar: at 1440 it wraps to
   two lines and a bare wrap reads as a broken row, so give it a surface */
.stg-more-row{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;gap:9px 16px}
.stg-more-row .segf{padding:5px 9px}
.stg-more-row .seg-filter{background:var(--surface);border-color:var(--line-2)}
.stg-more{position:relative}
.stg-more .stg-n{margin-left:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center}
.stg-more-row[hidden]{display:none}
/* Assigned to, the quick filter after the brand switch on every queue but
   New leads (stage.js ASSIGNED TO). The muted "Assigned to:" and the word
   in ink while it is Everyone; the accent with the column's badges stacked
   once anybody is picked, so a queue cut down to some people says so from
   across the room. */
.btn.stg-heldbtn{height:34px;gap:7px;padding:0 10px 0 11px;border-color:var(--line-2);
  background:var(--surface);color:var(--text);font-size:12.5px;white-space:nowrap}
.btn.stg-heldbtn > .ic{width:14px;height:14px;color:var(--muted);flex:none}
.btn.stg-heldbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.btn.stg-heldbtn.on > .ic{color:var(--accent-2)}
.stg-heldbtn .hb-t{overflow:hidden;text-overflow:ellipsis;max-width:190px}
.stg-heldbtn .mono{opacity:.75}
.hb-stack{display:inline-flex;flex:none}
.hb-stack .asg{position:relative}
.hb-stack .asg + .asg{margin-left:-5px}
/* the first on top, so a stack led by you shows your initials whole */
.hb-stack .asg:nth-child(1){z-index:3}.hb-stack .asg:nth-child(2){z-index:2}
.hb-stack .asg-b{width:20px;height:20px;font-size:8.5px;box-shadow:0 0 0 2px var(--surface)}
.stg-heldbtn.on .hb-stack .asg-b{box-shadow:0 0 0 2px var(--accent-soft)}
.hb-stack .asg-b .ic{width:10px;height:10px}
/* its list: a tick per person, applied at once, under the button on a
   desktop and a sheet from the bottom on a phone (below) */
.held-pop{position:fixed;z-index:80;width:268px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:5px;animation:riseIn .14s ease}
.hp-h{display:none}
.hp-list{max-height:min(56vh,430px);overflow:auto}
.hp-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:0;border-radius:8px;
  background:none;font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer}
.hp-row:hover,.hp-row:focus-visible,.hp-row.on{background:var(--surface-2);outline:none}
.hp-row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.hp-box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:5px;border:1.5px solid var(--line-2);background:var(--surface)}
.hp-row.on .hp-box{background:var(--accent);border-color:var(--accent);color:#fff}
.hp-box .ic{width:11px;height:11px;stroke-width:3}
.hp-row .asg{flex:1 1 auto}
.hp-row .asg-n{max-width:150px}
.hp-n{flex:none;margin-left:auto;font-size:12px;color:var(--muted)}
.hp-sep{height:1px;background:var(--line);margin:4px 3px}
.hp-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;
  padding:7px 9px 3px;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.hp-clear{border:0;background:none;padding:2px 4px;border-radius:6px;font:inherit;color:var(--accent);cursor:pointer}
.hp-clear:hover{background:var(--accent-soft)}
.hp-clear:disabled{color:var(--faint);background:none;cursor:default}
.held-back{display:none}
/* row 1 kept on one line on a laptop, a step at a time (stage.js barFit):
   the button's ": Everyone" and the search's starting width, then More
   filters as its glyph and count, then the brands as TCB and EV */
.stg-frow.fit-a .stg-heldbtn .hb-e{display:none}
.stg-frow.fit-a .stg-heldbtn .hb-t{max-width:120px}
.stg-frow.fit-a .stg-search{flex-basis:180px}
.stg-frow.fit-b > .btn.stg-more{width:34px;height:34px;padding:0;gap:0;justify-content:center}
.stg-frow.fit-b .stg-more .stg-n{position:absolute;top:-6px;right:-6px;margin:0}
.stg-frow.fit-b .stg-more-t,.stg-frow.fit-c > .seg-filter .segf-l{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stg-frow.fit-c > .seg-filter .segf{display:inline-flex;align-items:center;gap:4px}
.stg-frow.fit-c > .seg-filter .segf .segf-s{display:inline;order:-1}
.stg-frow.fit-c > .seg-filter .segf .mono{margin-left:0}
/* the result line: the ONE place the filtered number appears, plus a removable
   chip per active filter. Somebody who filters, walks away and comes back must
   see instantly why the screen is short, and get out of it in one click. */
.stg-result{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.stg-result b{color:var(--text);font-weight:700}
.stg-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  background:var(--accent-soft);color:var(--accent-2);border-radius:999px;padding:3px 4px 3px 10px}
.stg-chip button{border:none;background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;padding:2px;border-radius:50%}
.stg-chip button:hover{background:rgba(66,58,156,.14)}
.stg-chip .ic{width:12px;height:12px}
.stg-note{color:var(--muted)}
.stg-esum{margin-bottom:12px}
.empty .btn{margin-top:2px}
/* the way out of a filtered empty queue can be two buttons, and they need a
   real gap side by side and when they stack on a phone */
.empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* the way OUT of a filtered view has to look like a control. A transparent
   ghost beside three solid chips reads as a caption, not a button. */
.btn.stg-clear{border-color:var(--line-2);background:var(--surface);color:var(--text-2)}
.btn.stg-clear:hover{border-color:var(--accent);color:var(--accent-2)}
/* Mark-seen renders into two slots and exactly one is shown: row 1 on a
   desktop, the bottom of the drawer on a phone. Empty (nothing unseen in the
   filtered set) collapses, or the flex item still eats a gap. */
.stg-markslot:empty{display:none}
.stg-mark-drawer{display:none}
@media(max-width:760px){
  /* phone: everything full width, segments spread so they stay tappable */
  .stg-search{flex:1 1 100%;max-width:none}
  .stg-search input{width:100%;height:38px}
  .stg-frow > .seg-filter{flex:1 1 100%}
  /* flex:1 1 auto, never flex:1: equal-width segments force "The Car Buyers"
     to wrap inside its own button */
  .stg-frow > .seg-filter .segf{flex:1 1 auto;text-align:center;white-space:nowrap;padding:7px 9px}
  .stg-fl{flex:1 1 100%;flex-wrap:wrap}
  .stg-fl > span{flex:1 1 100%}
  .stg-fl > .seg-filter{flex:1 1 100%}
  .stg-fl > .seg-filter .segf{flex:1 1 auto;text-align:center;white-space:nowrap}
  /* the drawer's own segments were 24px tall next to 38px inputs. Match them. */
  .stg-more-row .segf{padding:10px 9px}
  /* min-width:0 or the pair stacks: an input's min-content width is its size
     attribute (about 20 characters), which two of will never share a line */
  .stg-num,.stg-src{flex:1 1 0;width:auto;min-width:0;max-width:none;height:38px}
  .stg-more,.sortby{flex:1 1 auto}
  .sortby .select{flex:1;width:auto;height:38px}
  .stg-frow > .btn{flex:1 1 auto;justify-content:center}
  /* the drawer OVERLAYS the queue instead of pushing it down. Pushed down it
     was 356px of filter panel above the first lead in an 812px phone, which
     is a screen with zero leads on it. Anchored to .stg-filters, so it opens
     directly under row 1 and closes from the same More filters button. */
  .stg-filters{position:relative}
  .stg-more-row{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:6px;
    background:var(--surface);box-shadow:var(--shadow-pop);max-height:68vh;overflow:auto}
  .stg-mark-bar{display:none}
  .stg-mark-drawer{display:flex;flex:1 1 100%}
  .stg-mark-drawer .btn{flex:1;justify-content:center;min-height:40px;
    border-color:var(--line-2);background:var(--surface)}
  /* the chip close buttons were 16x16, three abreast, on a touch screen. The
     pseudo-element grows the hit area without changing the chip's layout. */
  .stg-chip{padding:5px 5px 5px 11px;font-size:12px}
  .stg-chip button{padding:5px;position:relative}
  .stg-chip button::after{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .btn.stg-clear{min-height:36px}
}

/* stage rows: the relative age chip with the try chip beside it, and the
   exact arrival moment on a second line under the two. Two lines, never
   three: all three stacked set a 96px row while the Vehicle cell that
   carries the identifying facts needed 68. All three on one line was the
   fix for that, and at about 280px it became the widest column in the
   queue, which at 1440 with the sidebar open pushed the facts under the
   pinned actions. Two lines is no taller than the Vehicle cell beside it,
   and each line is held whole because inline boxes still break between
   themselves in a squeezed column. The one exception is a fitted queue
   squeezed for room (stg-rows, under STAGE PAGE), where the try chip goes
   under the age chip rather than take its width from the Vehicle cell.
   Measured at 1440 with the sidebar open it made no row taller, since the
   squeezed Vehicle cell beside it was taller still, and without it 40 to
   70px of Phone went under the pin. */
.age-col{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.age-top{display:inline-flex;align-items:center;gap:6px}
td:has(> .age-col){white-space:nowrap}
.age-exact{font-size:11px;color:var(--muted);white-space:nowrap;letter-spacing:.01em}

/* real photos, the cockpit gallery */
.ck-phs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:2px 0 4px}
.ck-ph{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-deep);display:flex;align-items:center;justify-content:center}
.ck-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ck-ph.add{cursor:pointer;border-style:dashed;border-color:var(--line-2);color:var(--muted)}
.ck-ph.add:hover{border-color:var(--accent);color:var(--accent-2)}
.ck-ph.add .ic{width:18px;height:18px}

/* ============================================================
   KEY/VALUE ROWS
   All that is left of the Phase 1 in-app paperwork portal, because
   Records reuses these three: .review-row and .specs draw the car
   and the money on a purchase card (records.js), .hintline carries
   the small grey note under a field in six places. They stay at
   this point in the file rather than moving up with the rest of the
   shared components, because their position is what decides which
   of two rules wins and a move is not a deletion.
   ============================================================ */
.review-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.review-row .k{color:var(--muted)} .review-row .v{font-weight:600}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.specs .review-row{padding:8px 0}
.hintline{font-size:11.5px;color:var(--faint);margin-top:8px;line-height:1.45}

@media (max-width:640px){ .specs{grid-template-columns:1fr} }

@media print{
  .sidebar,.tabbar,#toast-root,#modal-root{display:none!important}
  #view{overflow:visible}
  body{background:#fff;padding:0}
  @page{size:A4 portrait;margin:0}
}


/* ---- AddrPick: the address search and its four boxes (js/addrpick.js) ---- */
.ap{display:flex;flex-direction:column;gap:8px}
.ap-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.ap-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.ap-lab{font-size:11.5px;font-weight:600;color:var(--muted)}
.ap-pc{font-family:var(--mono)}
.ap-hold{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none}
@media (max-width:520px){.ap-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ap-c-sub{grid-column:1 / -1}}
.ap-list{position:fixed;z-index:9999;margin:0;padding:4px 0;list-style:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);
  max-height:min(320px,calc(100vh - 24px));overflow:auto;font-family:var(--font)}
.ap-list [role=option]{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:44px;
  padding:6px 12px;cursor:pointer;color:var(--text)}
.ap-list [role=option] b{font-size:14px;font-weight:600}
.ap-list [role=option] small{font-size:12.5px;color:var(--muted)}
.ap-list [role=option]:hover,.ap-list [role=option][aria-selected=true]{background:var(--accent-soft)}
.ap-list .ap-foot{padding:6px 12px 4px;font-size:11px;color:var(--muted);text-align:right;border-top:1px solid var(--line);margin-top:4px}

/* ---- DTPicker: calendar + time popover (js/datetime.js) ---- */
.dtp{position:fixed;z-index:9999;width:302px;max-width:calc(100vw - 16px);
  --dtp-bg:var(--surface-2,#1b1d24);--dtp-elev:var(--surface-3,#23262f);
  --dtp-line:var(--line,#2b2e38);--dtp-tx:var(--text,#e9eaf0);
  --dtp-mut:var(--muted,#8b8e99);--dtp-acc:var(--accent);
  background:var(--dtp-bg);border:1px solid var(--dtp-line);border-radius:14px;
  box-shadow:var(--shadow-pop,0 18px 48px rgba(17,19,24,.22));padding:12px;color:var(--dtp-tx);
  font-size:13.5px;-webkit-font-smoothing:antialiased}
.dtp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.dtp-nav{width:34px;height:34px;border:none;background:transparent;color:var(--dtp-mut);
  font-size:20px;border-radius:9px;cursor:pointer;line-height:1}
.dtp-nav:hover{background:var(--dtp-elev);color:var(--dtp-tx)}
.dtp-title{flex:1;height:34px;border:none;background:transparent;color:var(--dtp-tx);
  font-weight:700;font-size:14px;cursor:pointer;border-radius:9px}
.dtp-title:hover{background:var(--dtp-elev)}
.dtp-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.dtp-wd span{text-align:center;font-size:11px;font-weight:700;color:var(--dtp-mut);padding:4px 0}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dtp-day{height:36px;border:none;background:transparent;color:var(--dtp-tx);border-radius:9px;
  font-size:13.5px;font-weight:600;cursor:pointer}
.dtp-day:hover{background:var(--dtp-elev)}
.dtp-day.other{color:var(--dtp-mut);opacity:.45}
.dtp-day.today{box-shadow:inset 0 0 0 1.5px var(--dtp-acc)}
.dtp-day.sel{background:var(--dtp-acc);color:#fff}
.dtp-years{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 0}
.dtp-yr{height:46px;border:none;background:var(--dtp-elev);color:var(--dtp-tx);border-radius:9px;
  font-weight:700;font-size:14px;cursor:pointer}
.dtp-yr:hover{outline:1.5px solid var(--dtp-acc)}
.dtp-yr.sel{background:var(--dtp-acc);color:#fff}
.dtp-time{margin-top:10px;padding-top:10px;border-top:1px solid var(--dtp-line)}
.dtp-time-lb{display:block;font-size:11px;font-weight:700;color:var(--dtp-mut);margin-bottom:6px}
.dtp-time-ctl{display:flex;align-items:center;gap:6px}
.dtp-sel{height:38px;border:1px solid var(--dtp-line);background:var(--dtp-elev);color:var(--dtp-tx);
  border-radius:9px;padding:0 8px;font-size:14px;font-weight:600;cursor:pointer}
.dtp-colon{font-weight:700;color:var(--dtp-mut)}
.dtp-ap{height:38px;min-width:44px;border:1px solid var(--dtp-line);background:var(--dtp-elev);
  color:var(--dtp-mut);border-radius:9px;font-weight:700;font-size:13px;cursor:pointer}
.dtp-ap.on{background:var(--dtp-acc);border-color:var(--dtp-acc);color:#fff}
.dtp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dtp-chip{height:30px;padding:0 10px;border:1px solid var(--dtp-line);background:transparent;
  color:var(--dtp-mut);border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer}
.dtp-chip:hover{color:var(--dtp-tx)}
.dtp-chip.on{background:var(--dtp-acc);border-color:var(--dtp-acc);color:#fff}
.dtp-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--dtp-line)}
.dtp-quick{height:34px;padding:0 12px;border:1px solid var(--dtp-line);background:transparent;
  color:var(--dtp-tx);border-radius:9px;font-weight:600;font-size:12.5px;cursor:pointer}
.dtp-quick:hover{background:var(--dtp-elev)}
.dtp-done{height:34px;padding:0 18px;border:none;background:var(--dtp-acc);color:#fff;
  border-radius:9px;font-weight:700;font-size:13px;cursor:pointer}
/* the trigger inputs read as buttons */
input[data-datetime],input[data-date]{cursor:pointer}


/* ---- Phase D: send-to-wholesalers modal + bidding panel ---- */
.rv-send-cap{font-size:12.5px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.rv-send-cap b{color:var(--text)}
.rv-send-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;margin:0 -6px}
.rv-send-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:8px;cursor:pointer}
.rv-send-row:hover{background:var(--surface-2)}
.rv-send-row input{width:16px;height:16px;accent-color:var(--accent)}
.rv-send-nm{font-weight:600;font-size:13.5px;flex:1;min-width:0}
.rv-send-ct{font-size:11.5px;color:var(--muted)}
.rv-send-add{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rv-send-add .input{height:34px;font-size:12.5px}
.rv-send-add .input:first-child{flex:1.2}
.rv-send-add .input:nth-child(2){flex:1}
/* W1a send screen: car header, deadline chips, message, per buyer results */
.rv-send-car{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.rv-send-ph{width:74px;height:56px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.rv-send-meta{display:flex;gap:10px;color:var(--muted);font-size:12px;margin-top:2px}
.rv-send-warn{color:var(--warn);font-size:12px;margin-top:4px}
.rv-send-dl{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.rv-dl-h{width:76px;height:32px}
.rv-dl-when{color:var(--text-2);font-weight:600}
.rv-send-noph{color:var(--faint);font-size:11.5px}
.rv-send-msg{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rv-res{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.rv-res.ok{color:var(--ok)}
.rv-res.bad{color:var(--bad)}
.rv-res.grey{color:var(--muted)}
.rv-bid-err{color:var(--bad);font-size:12.5px;font-weight:600;margin-top:10px}
.rv-links{display:flex;flex-direction:column;gap:8px}
.rv-link-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rv-link-t{flex:1;min-width:0}
.rv-link-t b{display:block;font-size:12.5px}
.rv-link-url{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rv-invs{display:flex;flex-direction:column}
.rv-inv-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.rv-inv-row:last-child{border-bottom:0}
.rv-inv-ws{font-weight:600;font-size:13px;flex:1;min-width:0}
.rv-inv-st{font-size:12px}
.rv-inv-st.bid{color:var(--ok);font-weight:700}
.rv-inv-st.seen{color:var(--accent-2)}
.rv-inv-st.sent{color:var(--muted)}
.rv-inv-st.dim{color:var(--faint,var(--muted));text-decoration:line-through}
.rv-inv-acts{display:flex;gap:6px}
.rv-close-bids{margin-top:10px}
.btn.danger-ghost{color:var(--bad)}

/* ---- Phase D pt 2: cockpit Paperwork panel + stage back-nav ---- */
.ck-pwc{display:flex;flex-direction:column;gap:5px;margin:4px 0 10px}
.ck-pwc-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ck-pwc-row .ic{width:13px;height:13px;flex:none}
.ck-pwc-row.ok{color:var(--muted)}
.ck-pwc-row.ok .ic{color:var(--ok)}
.ck-pwc-row.no{color:var(--text-2)}
.ck-pwc-row.no.due{color:var(--warn);font-weight:600}
.ck-ring{width:12px;height:12px;margin:0 .5px;flex:none;border-radius:50%;border:2px solid var(--line-2)}
.ck-pwc-row.due .ck-ring{border-color:var(--warn)}
.ck-pwi-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4.5px 0;font-size:12.5px}
.ck-pwi-k{color:var(--text)}
.ck-pwi-st{font-size:12px;flex:none}
.ck-pwi-st.ok{color:var(--ok);font-weight:700}
.ck-pwi-st.seen{color:var(--accent-2)}
.ck-pwi-st.sent{color:var(--muted)}
.ck-pwi-st.dim{color:var(--muted);text-decoration:line-through}
.ck-step.done[data-action]{cursor:pointer;border-radius:7px}
.ck-step.done[data-action]:hover{background:var(--surface-2)}
.ck-step.done[data-action]:hover .lbl{color:var(--accent-2);text-decoration:underline}

/* ===== Paperwork tab (app/screens/_paperwork.js) =====
   A header that says where the deal is, then a grid of equal cards. The old
   panel was one card of full width label/value rows, which is what made it
   read small: the content was tiny against its container. */
.pw-tab{display:flex;flex-direction:column;gap:12px}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;align-items:start}

.pwh{padding:16px 18px}
.pwh-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pwh-t{font-size:17px;font-weight:700;margin:0}
.pwh-who{margin-left:auto;font-size:12px;color:var(--muted)}
.pwh-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px}
.pwh-badge.ok{background:var(--ok-bg);color:var(--ok)}
.pwh-badge.mid{background:var(--accent-soft);color:var(--accent-2)}
.pwh-badge.bad{background:var(--bad-bg);color:var(--bad)}
.pwh-rail{display:flex;gap:8px;margin-top:14px}
.pwh-bead{flex:1;min-width:0}
.pwh-bar{display:block;height:3px;border-radius:2px;background:var(--line);
  transform-origin:left;animation:pwh-fill .5s ease both}
.pwh-bead.on .pwh-bar{background:var(--ok)}
/* a step not needed yet is a to do like any other, a solid grey bar: dashed
   read as skipped (look audit round 3a, 7 Oct 2026) */
.pwh-lb{display:block;font-size:11px;margin-top:5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwh-bead.on .pwh-lb{color:var(--ok);font-weight:600}
.pwh-next{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.pwh-words{font-size:13px;color:var(--text-2)}
.pwh-go{margin-left:auto;flex:none}
@keyframes pwh-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.pwc{padding:0;overflow:hidden}
.pwc-h{padding:11px 15px;border-bottom:1px solid var(--line);background:var(--bg-deep);
  font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.pwc-b{padding:14px 15px}
.pw-quiet{color:var(--muted);font-size:12.5px;line-height:1.6}
.pw-quiet b{display:block;color:var(--text);margin-bottom:3px}

.pw-name{font-size:16px;font-weight:700}
/* each name with its Copy, for the VRO search (_paperwork.js pwSellerCard) */
.pw-nm{display:inline-flex;align-items:center;gap:1px;margin-right:8px}
.pw-cp{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;
  background:none;border:0;border-radius:6px;color:var(--muted);cursor:pointer}
.pw-cp:hover{color:var(--accent-2);background:var(--surface-2)}
.pw-cp .ic{width:14px;height:14px}
/* the seller's mobile on the Seller card: a call on a phone, Copy beside it */
.pw-dl dd.pw-mob{display:flex;align-items:center;gap:2px}
.pw-mob a{color:inherit;text-decoration:none}
.pw-mob a:hover{text-decoration:underline}
.pw-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.pw-shots{display:flex;gap:9px;margin-top:13px}
.pw-shot{flex:1;margin:0;min-width:0}
.pw-shot img{width:100%;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  display:block;cursor:zoom-in;transition:box-shadow var(--fast)}
.pw-shot img:hover{box-shadow:var(--shadow-card)}
.pw-shot figcaption{font-size:11px;margin-top:5px}
.pw-shot.none{height:74px;border:1px dashed var(--line);border-radius:8px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:11px}
.pw-shot-x{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--bad-bg);
  color:var(--bad);align-items:center;justify-content:center}
.pw-shot-x .ic{width:11px;height:11px}
.pw-ok{color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:3px}
.pw-vbtn{background:none;border:0;padding:0;color:var(--accent-2);font:inherit;font-size:11px;
  font-weight:600;cursor:pointer;text-decoration:underline}
.pw-dl{display:grid;grid-template-columns:92px 1fr;gap:3px 8px;margin:13px 0 0;
  padding-top:12px;border-top:1px solid var(--line);font-size:12.5px}
.pw-dl dt{color:var(--muted)}
.pw-dl dd{margin:0}
.pw-more{margin-top:12px}

.pw-amt{display:flex;align-items:baseline;gap:8px}
.pw-amt .v{font-size:22px;font-weight:700}
.pw-amt .k{font-size:12px;color:var(--muted)}
.pw-bank{background:var(--bg-deep);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;margin-top:12px}
.pw-bank-row,.pw-copy-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px}
.pw-bank-k{color:var(--muted);width:84px;flex:none}
.pw-bank-v{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pw-mini{margin-left:auto;background:none;border:0;padding:0 0 0 8px;color:var(--accent-2);
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.pw-mini + .pw-mini{margin-left:0}
.pw-unpaid{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:9px 11px;
  margin-top:11px;font-size:12.5px}
.pw-paid{display:flex;gap:9px;align-items:flex-start;background:var(--ok-bg);border-radius:8px;
  padding:9px 11px;margin-top:11px;color:var(--ok);font-size:12.5px}
.pw-paid span{display:block;color:var(--text-2);font-size:11.5px;margin-top:1px}

.pw-void{display:flex;gap:8px;align-items:flex-start;background:var(--bad-bg);color:var(--bad);
  border-radius:8px;padding:9px 11px;margin-bottom:12px;font-size:12px;line-height:1.45}
.pw-void .ic{width:14px;height:14px;flex:none;margin-top:1px}
.pw-pay-f{display:grid;grid-template-columns:1fr 150px;gap:10px}
.pw-pay-hint{margin-top:9px;background:var(--bg-deep);border-radius:8px;padding:8px 11px;
  font-size:12px;color:var(--muted);line-height:1.5}
.pw-pay-note{margin-top:11px;font-size:11.5px;color:var(--faint);line-height:1.5}
.pw-paid .pw-mini{margin-left:auto;align-self:flex-start}
@media (max-width:520px){.pw-pay-f{grid-template-columns:1fr}}

.pw-docs{display:flex;flex-direction:column;gap:12px}
.pw-docs.void .pw-page,.pw-docs.void .pw-doc-m b{opacity:.6}
.pw-doc{display:flex;gap:12px;align-items:center}
.pw-doc + .pw-doc{border-top:1px solid var(--line);padding-top:12px}
.pw-page{width:52px;height:66px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);
  padding:5px;flex:none;display:block;transition:transform var(--fast)}
.pw-doc:hover .pw-page{transform:translateY(-1px)}
.pw-page .l{display:block;height:2px;background:var(--line);margin-bottom:3px}
.pw-page .l.w80{width:80%;height:3px;background:var(--line-2)}
.pw-page .l.w70{width:70%}
.pw-page .l.w55{width:55%;margin-bottom:7px}
.pw-page .sig{display:block;width:60%;border-bottom:1.5px solid var(--accent)}
.pw-doc-m{flex:1;min-width:0}
.pw-doc-m b{display:block;font-size:13.5px}
.pw-doc-m span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pw-doc-acts{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
/* a document's preview: the frame is the whole body, edge to edge. Named
   with .modal-b so a later padding for every dialog's body (a phone's)
   cannot sit round the frame; on a phone the frame also fills the body
   (DIALOGS ON A PHONE) */
.modal-b.pw-prev{padding:0}
.pw-prev iframe{width:100%;height:70vh;border:0;display:block;background:var(--bg-deep)}

/* flex-start, not center: an attached check now carries a row of actions under
   its label, so centring floated the tick and the Replace button against the
   middle of a two-line block instead of lining them up with the title. */
.pw-chk{display:flex;align-items:flex-start;gap:10px}
.pw-chk .pw-doc-acts{display:flex;flex-wrap:wrap;gap:2px 4px;margin:5px 0 0 -6px}
.pw-chk .pw-doc-acts .btn{padding:2px 6px;font-size:11.5px;height:auto;line-height:1.6}
.pw-chk + .pw-chk{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.pw-chk-i{width:20px;height:20px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
/* to do: the grey ring; due (the stage waits on it): amber; done: the tick.
   Red is for a real problem only (look audit round 3a, 7 Oct 2026) */
.pw-chk.due .pw-chk-i{background:var(--warn-bg);box-shadow:inset 0 0 0 2px var(--warn)}
.pw-chk.ok .pw-chk-i{background:var(--ok-bg);color:var(--ok);box-shadow:none}
.pw-chk-m{flex:1;min-width:0}
.pw-chk-m b{display:block;font-size:13px}
.pw-chk-m span{display:block;font-size:11.5px;color:var(--muted)}
/* a PDF dragged over a check row (ck:pdoc:drop); the hint only where a
   mouse can drag one */
.pw-chk.drop-on{outline:2px dashed var(--accent);outline-offset:4px;border-radius:8px;background:var(--accent-soft)}
.pw-chk-dh{font-style:normal;color:var(--faint)}
@media (hover:none){.pw-chk-dh{display:none}}
.pw-search{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.pw-copy-row .pw-none{color:var(--muted)}
.pw-chk-note{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted)}

.pw-more-d{border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.pw-more-d summary{padding:10px 15px;font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:600}
.pw-more-b{padding:0 15px 14px;display:flex;flex-direction:column;gap:10px}
.pw-trail-rows{display:flex;flex-direction:column}

/* this tab handles money and ID, so every control has to be reachable and
   visibly focused. The bare buttons carry no .btn class, so the app's own
   focus rule does not reach them. */
.pw-vbtn:focus-visible,.pw-mini:focus-visible,.pw-cp:focus-visible,.pw-more-d summary:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pwh-bar{animation:none}
  .pw-shot img,.pw-page{transition:none}
}

/* ===== OTHER DOCUMENTS AND OUR PAYOUT LETTER (Paperwork tab, 30 Sep 2026) =====
   Other documents is one more card in the grid, its documents drawn as the
   signed ones are: a page (or a photo's tile), the name, the description
   and who attached it when, then its buttons. The whole card takes a drop,
   and the dashed zone under the list says so and holds the one Attach
   button; while files are dragged over the card the zone lights. On a phone
   there is nothing to drag, so the zone is a plain Attach button. The
   Checks card's payout letter has a line for each letter, ours and the
   seller's, under its title, and a note saying which counts when both are
   in. The Attach dialog is a block a file, each with its name box and its
   description; its boxes are the app's own, which keep the phone's 16px
   floor (RESPONSIVE). */
.pw-drop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;padding:12px 14px;
  border:1.5px dashed var(--line-2);border-radius:10px;background:var(--bg-deep);
  transition:border-color var(--fast),background var(--fast)}
.pw-drop.first{margin-top:0;padding:18px 14px;justify-content:center;text-align:center}
.pw-drop-t{font-size:12.5px;color:var(--muted)}
.pw-drop-s{flex-basis:100%;font-size:11.5px;color:var(--faint)}
.pw-other.drop-on .pw-drop{border-color:var(--accent);background:var(--accent-soft)}
.pw-other.drop-on .pw-drop-t{color:var(--accent-2);font-weight:600}
.pw-page.pw-pic{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.pw-pic .ic{width:22px;height:22px}
.pw-doc-m .pw-od-d,.ck-doc-t .pw-od-d{color:var(--text-2);font-size:12px;white-space:pre-line}
.pw-od-f + .pw-od-f{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.pw-od-f .ck-fl{margin-top:9px}
.pw-od-file{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;min-width:0}
.pw-od-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-od-file i{font-style:normal;font-weight:400;color:var(--faint);flex:none}
.pw-od-file .ic{width:15px;height:15px;color:var(--muted);flex:none}
.pw-pl{margin-top:8px}
.pw-chk-m .pw-pl-h{font-size:12px;color:var(--text-2)}
.pw-chk-m .pw-pl-h b{display:inline;font-size:inherit;color:var(--text)}
.pw-pl-h .pw-mini{margin-left:0}
.pw-pl-note{margin-top:9px;background:var(--bg-deep);border-radius:7px;padding:6px 9px;
  font-size:11.5px;color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.pw-drop{transition:none}}
@media (max-width:640px){
  .pw-drop,.pw-drop.first{display:block;padding:0;border:0;background:none}
  .pw-drop-t,.pw-drop-s{display:none}
  .pw-drop .btn{width:100%;justify-content:center;padding:11px 14px}
  .pw-other .pw-doc-acts .btn{padding:7px 10px}
}

/* ---- Phase D: offers screen invite strip ---- */

/* ---- records (the permanent register: purchases ledger + clients) ---- */
.rec-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.rec-bar .input{height:34px;font-size:13px}
.rec-q{flex:1 1 240px;min-width:180px}
.rec-date{width:130px}
.rec-kpis{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.rec-grid td{vertical-align:middle}
.rec-grid tr[data-action]{cursor:pointer}
.rec-grid tr.no-nav{cursor:default}
/* the car a client was found by, under their name */
.rec-grid .rc-found{margin-top:4px;font-size:12px;font-weight:500;color:var(--text-2)}
.rec-grid .rc-found .rego{font-size:11px}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text)}
th.sortable .dir{font-size:10.5px;opacity:.75}
/* Licence images on a client profile. Taller than the cockpit's 74px strip:
   this is the archive copy someone comes back to months later to check a
   name against a face, so it is worth being readable before the lightbox. */
.rec-shots{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.rec-shot{flex:1 1 220px;margin:0;min-width:0;max-width:340px}
.rec-shot img{width:100%;height:132px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);display:block;cursor:zoom-in;
  transition:box-shadow var(--fast)}
.rec-shot img:hover{box-shadow:var(--shadow-card)}
.rec-shot figcaption{font-size:11.5px;margin-top:6px;color:var(--muted)}
.rec-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 0;color:var(--muted)}
.rec-pager .btn[disabled]{opacity:.35;pointer-events:none}
.rec-loading{height:2px;border-radius:2px;margin:0 0 10px;background:
  linear-gradient(90deg,transparent 20%,var(--accent) 50%,transparent 80%) 0 0/60% 100% no-repeat,
  var(--surface-2);animation:rec-slide 1s linear infinite}
.rec-loading.idle{visibility:hidden}
@keyframes rec-slide{from{background-position:-60% 0}to{background-position:160% 0}}
/* a phone's Records is drawn in RECORDS ON A PHONE, further down */

/* ===== WORKFLOW G: stage-aware work columns (Chunk G, 2026-07-22) ===== */
/* nowrap: on narrow screens the queue table scrolls inside .tablewrap —
   a wrapped work cell balloons the row instead of staying dense */
.wk{white-space:nowrap}
.wk b{font-weight:600}
.wk-sub{color:var(--muted);font-size:11.5px;margin-top:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wk-mut{color:var(--muted)}
.wk-best{color:var(--accent-2)}
.wk-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:6px;padding:1.5px 7px;letter-spacing:.01em}
.wk-chip.ok{background:var(--ok-bg);color:var(--ok)}
.wk-chip.warn{background:var(--warn-bg);color:var(--warn)}
.wk-chip.bad{background:var(--bad-bg);color:var(--bad)}
.wk-chip.soft{background:var(--accent-soft);color:var(--accent-2)}
.wk-tick{color:var(--ok);font-weight:700}
.wk-cross{color:var(--bad);font-weight:700}
.ic.wk-tick,.ic.wk-cross{width:14px;height:14px}

/* ===== welcome form progress (New leads queue) =====
   Three segments, a word, and the fact that decides whether to call. The
   track is the point: a column of them reads as a funnel at a glance, so an
   operator finds the stalled sellers without reading a single row. */
.fm{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.fm-top{display:flex;align-items:center;gap:7px}
.fm-track{display:inline-flex;gap:2px;flex:none}
.fm-seg{width:13px;height:4px;border-radius:2px;background:var(--line)}
.fm-lb{font-size:11px;font-weight:600;white-space:nowrap}
.fm-sub{font-size:11px;color:var(--muted);white-space:nowrap}
.fm.done .fm-seg.on{background:var(--ok)}
.fm.done .fm-lb{color:var(--ok)}
/* Started and Opened share amber deliberately: both are "interested and
   stalled", both belong on the same call list, and the word tells them apart */
.fm.started .fm-seg.on,.fm.opened .fm-seg.on{background:var(--warn)}
.fm.started .fm-lb,.fm.opened .fm-lb{color:var(--warn)}
.fm.failed .fm-seg{background:var(--bad-bg)}
.fm.failed .fm-seg.on{background:var(--bad)}
.fm.failed .fm-lb{color:var(--bad)}
/* Sending shares Sent's neutral grey deliberately, the way Started and Opened
   share amber above. It is NOT red and NOT amber: the text has not failed for
   the seller, it is still on the retry ladder, and a row that looks like a
   problem is a row somebody bins, which is exactly what happened to 23 sellers
   on 15 August 2026. The label and the sub line carry the difference. */
.fm.sending .fm-seg.on,.fm.sent .fm-seg.on{background:var(--faint)}
.fm.sending .fm-lb,.fm.sent .fm-lb{color:var(--muted)}
td.fmc,th.fmc{white-space:nowrap}
.stage-sortnote{color:var(--muted);font-size:12px}

/* ===== honest progress rail: skipped stages (2026-07-23) ===== */
.ck-step.skip .mk{border:1.5px dashed var(--line);background:transparent}
.ck-step.skip .lbl{color:var(--faint)}
.skipped-tag{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;vertical-align:1px}

/* ===== R3: paperwork submission viewer + progress trail (2026-07-23) ===== */
.pw-trail{display:inline-flex;align-items:center;gap:4px;margin:0 8px}
.pw-dot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pw-dot.on{background:var(--ok)}
.pw-sub-body{max-height:64vh;overflow-y:auto}
.pw-ups{display:flex;flex-direction:column;gap:8px}
.pw-up{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pw-thumb{width:56px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--line);display:block}
.pw-thumb.doc{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-2)}
.pw-up-open{display:block;flex:none;line-height:0;border-radius:7px}
.pw-up-meta{flex:1;min-width:0}
.pw-up-meta b{display:block;font-size:13px}
.pw-ver{font-size:11.5px;color:var(--faint)}
.pw-ver.ok{color:var(--ok);font-weight:700;display:inline-flex;align-items:center;gap:4px}

/* ===== BUY THIS CAR + CAR DETAILS (owner, 28 Sep 2026) ===== */
/* The approved v2 mockup on the app's own .seg, .st-opt, .input and .btn.
   Buy this car is wider than the house 460px so the seller's details are
   typed with room to read them (owner, 27 Sep 2026: "a bit larger"), and
   both dialogs pin their header and footer, as the booking dialog does, so
   Send never scrolls away. A phone gets a full screen sheet, one column,
   Send on its own row with Cancel under it. */
.modal.buy-dlg{max-width:720px}
.modal.cl-dlg{max-width:660px}
.modal.buy-dlg,.modal.cl-dlg{display:flex;flex-direction:column;overflow:hidden}
.modal.buy-dlg .modal-h,.modal.buy-dlg .modal-f,.modal.cl-dlg .modal-h,.modal.cl-dlg .modal-f{flex:none}
.modal.buy-dlg .modal-b,.modal.cl-dlg .modal-b{overflow:auto;min-height:0}
.modal.buy-dlg .modal-b{padding:24px 28px}
.modal.buy-dlg .modal-f,.modal.cl-dlg .modal-f{align-items:center}
/* what the send is waiting for, beside the buttons; nothing once ready */
.dlg-note{margin-right:auto;font-size:12.5px;font-weight:600;color:var(--muted)}
.dlg-note:empty{display:none}
/* waiting, not disabled: it still answers a press with what is missing */
.btn.primary.wait{opacity:.42}
.btn.primary.wait:hover{background:var(--action);border-color:var(--action)}

/* the top: the car, its brand and its number */
.buy-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.buy-car{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--text);min-width:0}
.buy-tags{display:flex;align-items:center;gap:8px;flex:none}
.buy-id{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--muted)}

/* the three parts, Car, Deal and Seller */
.buy-sec{display:grid;gap:14px}
/* Quick buy: the lead's brand and source where Buy names its car, and the
   id the first lookup made beside the title */
.qb-lead{margin-bottom:18px}
.qb-id{margin-left:8px;vertical-align:middle}
.qb-id:empty{display:none}
.qb-ask{margin:0;line-height:1.55;color:var(--muted)}
.buy-sec + .buy-sec{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.buy-sec-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.buy-sec-h .ic{width:15px;height:15px;color:var(--accent)}
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;align-items:start}
.modal.buy-dlg label.fld{margin-bottom:0}
/* the payment choice's name over its buttons, as the boxes beside it
   wear theirs, rather than drifting up beside them on the wider row */
.modal.buy-dlg .fld > .lab{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.buy-asked{font-size:12px;color:var(--muted);margin-top:6px}
.buy-asked b{color:var(--text-2);font-weight:700}
/* Selling as a person or a company (owner, 5 Oct 2026): the switch over the
   seller's boxes, and the boxes of the other kind hidden, keeping what was
   typed. A company's name takes the whole row. */
.buy-kind .seg{width:max-content}
.modal.buy-dlg label.fld[hidden]{display:none}
.buy-wide{grid-column:1 / -1}
/* the resend window says up front that the seller's current link stops */
.buy-banner{display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;padding:11px 13px;border-radius:10px;
  background:var(--warn-bg);color:var(--text-2);font-size:12.5px;line-height:1.5}
.buy-banner .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--warn)}

/* the car, looked up (screens/_carlookup.js): the number and its kind on
   the left, the state tiles beside it, Get car details or what it found
   under both */
.cl-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:14px}
.cl .lab{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.cl-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px 22px;align-items:start}
.cl-num{min-width:0}
.cl label.fld{margin:12px 0 0}
.cl-input{height:46px;font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cl-input.vin{font-size:15px;letter-spacing:.06em}
.cl-input::placeholder{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.cl-input[readonly]{color:var(--muted)}
.cl-msg{display:flex;align-items:center;gap:10px;margin-top:8px;min-height:26px}
.cl-msg:empty{display:none}
.cl-note{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:600}
.cl-note .ic{width:15px;height:15px;flex:none}
.cl-note.ok{color:var(--ok)}
.cl-note.warn{color:var(--warn)}
.cl-note.bad{color:var(--bad)}
.cl-count{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted)}
.btn.sm.cl-switch{margin-left:auto;flex:none;background:var(--surface);color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.btn.sm.cl-switch:hover{background:var(--warn-bg)}
.st-grid.cl-st{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:0}
.cl-st .st-opt{padding:11px 0;font-size:13px;border-radius:10px}
.cl-st .st-opt:disabled{cursor:progress;opacity:.6}
.cl-out{margin-top:14px}
.cl-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-2);cursor:pointer}
.cl-link:hover{text-decoration:underline}
/* what Eval found */
.cl-found{display:grid;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);background:color-mix(in srgb,var(--ok) 5%,var(--surface))}
.cl-found-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ok)}
.cl-found-h .ic{width:16px;height:16px;stroke-width:2.2}
.cl-found-h .cl-link{margin-left:auto}
.cl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px}
.cl-facts div{display:grid;gap:1px;min-width:0}
.cl-facts dt{font-size:11px;font-weight:600;color:var(--muted)}
.cl-facts dd{font-size:13px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.cl-facts dd.mono{font-size:12.5px;letter-spacing:.02em}
/* Eval has no car for the number, or did not answer */
.cl-miss{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 13px;border-radius:var(--radius-sm);
  font-size:12.5px;font-weight:600;color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 4%,var(--surface))}
.cl-miss .ic{width:15px;height:15px;flex:none}
.cl-miss-t{flex:1;min-width:0}
.cl-miss .cl-link{color:var(--text-2);text-decoration:underline}
.cl-chose{color:var(--text-2)}
/* Eval gave only part of the car: what came back, and the paid way to ask again */
.cl-found.cl-part{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 5%,var(--surface))}
.cl-part .cl-found-h{color:var(--warn)}
.cl-part-t{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.cl-part-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.cl-part-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-items:end}
.cl-part-type .cl-part-t{grid-column:1/-1}
/* a car Eval has no record of, sent without details: its make and model
   are typed under the no record line, not inside a details card */
.cl-miss + .cl-part-type{margin-top:12px}
.cl-typed{margin:0}
.cl-ask{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;font-weight:600;color:var(--warn)}
.cl-ask span{flex:1 1 220px;min-width:0}
.cl-miss.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);
  background:color-mix(in srgb,var(--warn) 5%,var(--surface))}
/* car lookups off in Settings, or not set up */
.cl-off{display:flex;align-items:flex-start;gap:8px;padding:10px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-deep);font-size:12.5px;line-height:1.45;color:var(--text-2)}
.cl-off .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--muted)}

/* Paperwork sent: where the link went, then the link */
.buy-sent{list-style:none;display:grid;gap:8px;margin-bottom:14px}
.buy-sent li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--text-2)}
.buy-sent li .ic{width:16px;height:16px;flex:none;margin-top:1px}
.buy-sent li.ok .ic{color:var(--ok)}
.buy-sent li.warn{color:var(--warn)}
.buy-sent b{color:var(--text)}
.buy-once{font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px}

@media (max-width:640px){
  .modal-back:has(.modal.buy-dlg),.modal-back:has(.modal.cl-dlg){padding:0;align-items:stretch}
  .modal.buy-dlg,.modal.cl-dlg{max-width:none;max-height:none;height:100%;border-radius:0;border:0;animation:none}
  /* the sheet runs to the top of the screen, so its header clears the home
     screen app's status bar (the inset is 0 in a browser tab) */
  .modal.buy-dlg .modal-h,.modal.cl-dlg .modal-h{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px}
  .modal.buy-dlg .modal-b,.modal.cl-dlg .modal-b{padding:16px}
  .buy-top{flex-direction:column;align-items:flex-start;gap:10px}
  .buy-grid,.cl-grid{grid-template-columns:minmax(0,1fr)}
  .cl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal.buy-dlg .modal-f,.modal.cl-dlg .modal-f{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .modal.buy-dlg .modal-f .btn,.modal.cl-dlg .modal-f .btn{justify-content:center;margin:0}
  .modal.buy-dlg .modal-f .btn.primary,.modal.cl-dlg .modal-f .btn.primary{order:-1}
  .modal.buy-dlg .dlg-note,.modal.cl-dlg .dlg-note{order:-2;margin:0;text-align:center}
}

/* ============================================================
   TplField — saved-message editor (js/tplfield.js)
   Fields read as words inside the sentence, so staff never type
   braces. The pill is contenteditable=false, which is what makes
   one backspace remove a whole field instead of half a token.
   ============================================================ */
.tplx-wrap{position:relative}
.tplx{min-height:96px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;line-height:1.85;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;cursor:text}
/* keyboard focus: the app's one ring rule reaches this via [contenteditable] */
.tplx:empty:before{content:attr(data-ph);color:var(--muted)}
.tplx-tk{display:inline-block;background:var(--accent-soft);color:var(--accent-2);
  border-radius:6px;padding:1px 7px;margin:0 1px;font-size:12.5px;font-weight:600;
  white-space:nowrap;user-select:none;vertical-align:baseline}

/* toolbar under the box: add a field, then the live cost */
.tplx-bar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.tplx-add{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);
  color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color var(--fast),color var(--fast),background var(--fast)}
.tplx-add:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.tplx-meter{margin-left:auto;font-size:11.5px;color:var(--muted)}
.tplx-meter.over{color:var(--warn);font-weight:600}
.tplx-warn{margin-top:7px;font-size:11.5px;line-height:1.6;color:var(--warn);
  background:var(--warn-bg);border-radius:8px;padding:7px 10px}

/* what the seller actually reads */
.tplx-pv{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);padding:10px 12px}
.tplx-pv .lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.tplx-pv .msg{font-size:13px;line-height:1.65;color:var(--text-2);white-space:pre-wrap}

/* field picker */
.tplx-pop{position:absolute;z-index:60;left:0;bottom:100%;margin-bottom:8px;width:290px;max-width:calc(100vw - 32px);
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);overflow:hidden;animation:riseIn .12s ease}
/* flipped under the Add field bar when there is no room above (tplfield.js
   openPicker says when); top is set inline from the bar's position */
.tplx-pop.down{bottom:auto;margin-bottom:0}
.tplx-pop-q{width:100%;height:38px;padding:0 12px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--text);font:inherit;font-size:13px}
.tplx-pop-q:focus{outline:none}
.tplx-pop-l{max-height:244px;overflow:auto;padding:5px}
.tplx-pop-i{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;border:0;
  background:transparent;border-radius:8px;padding:7px 9px;cursor:pointer;color:var(--text)}
.tplx-pop-i:hover,.tplx-pop-i.on{background:var(--accent-soft)}
.tplx-pop-i .nm{font-size:13px;font-weight:600}
.tplx-pop-i .eg{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.tplx-pop-none{padding:14px 11px;font-size:12.5px;color:var(--muted);text-align:center}

/* ============================================================
   The situation, at the top of a lead. Same facts the CRM already
   holds, said as a sentence, so picking up a card does not mean
   scrolling the thread to work out where it got to.
   A callout, not a card: the accent edge is the one thing saying read this
   first, so it carries no hairline and no shadow to compete with it.
   ============================================================ */
.ck-sum{background:var(--surface);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:13px 16px;margin-bottom:12px}
.ck-sum.warn{border-left-color:var(--warn)}
.ck-sum .cap{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ck-sum p{font-size:13.5px;line-height:1.6;color:var(--text)}
/* On a phone the card's lines sit in a button that folds them (cockpit.js
   leadSummary, THE CAR'S PAGE ON A PHONE), drawn as the card's own text, the
   size and colour of the paragraphs a desktop draws. Outside the phone block
   so a card drawn before a phone was turned on its side still reads as text
   until the page is next drawn. */
.ck-sum-fold{display:block;width:100%;padding:0;border:0;border-radius:inherit;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.ck-sum-fold .ck-sum-t{display:block}
.ck-sum-fold .ck-sum-t{font-size:13.5px;line-height:1.5;color:var(--text)}

/* ============================================================
   The voicemail on a lead (cockpit Overview, app/screens/cockpit.js
   voicemailCard). A missed call is a lead whose entire content is a
   recording, so the player sits directly under the situation line
   instead of inside the activity drawer.

   Deliberately compact. Ten seconds of audio does not earn a hero:
   one head row saying whose number it is, how long the message runs
   and when it landed, the native player under it, and a note that
   only appears while the file loads or when it never arrives. The
   head row is plain flex-wrap rather than a grid, which is what
   makes the phone layout a reflow of the same DOM: at 375px it
   breaks after the number and the download button keeps its right
   edge on the second line.
   ============================================================ */
.ck-vm{padding:13px 16px;display:flex;flex-direction:column;gap:9px}
.ck-vm-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-vm-h .cap{display:inline-flex;align-items:center;gap:6px;margin:0;flex:none}
.ck-vm-h .cap .ic{width:13px;height:13px}
.ck-vm-num{font-size:14px;font-weight:600;letter-spacing:-.01em}
/* --muted, NOT --faint. "No number came through" is the most consequential
   sentence this card can say, it means there is nobody to ring back, and
   --faint measures about 2.6:1 on white, under AA. --muted is 4.9:1 and is
   already the token on the meta line beside it. */
.ck-vm-num.none{font-size:12.5px;font-weight:500;color:var(--muted)}
/* the length as a quiet chip rather than another word in the line: Time.exact
   already separates its own halves with a middle dot, so joining them made a
   length and a moment read as three things of equal weight */
.ck-vm-len{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);
  padding:3px 8px;border-radius:7px;white-space:nowrap}
.ck-vm-meta{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ck-vm-dl{margin-left:auto;flex:none}
/* The height is left to the browser on purpose. Chrome draws its controls at
   a fixed size and forcing the element shorter clips them, so what is set
   here is the width, which does NOT stretch on its own (the default is a
   fixed 300px that would sit in a card twice that wide). */
.ck-vm-a{width:100%;display:block}
/* a caller's voice note: the voicemail card's look in its own classes (the
   voicemail tests keep ck-vm to the voicemail's one gated card), one row per
   note, and a player on its timeline line (Kane's view, drop 2) */
.ck-vn{padding:13px 16px;display:flex;flex-direction:column;gap:12px}
.ck-vn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ck-vn-h .cap{display:inline-flex;align-items:center;gap:6px;margin:0;flex:none}
.ck-vn-h .cap .ic{width:13px;height:13px}
.ck-vn-len{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);
  padding:3px 8px;border-radius:7px;white-space:nowrap}
.ck-vn-meta{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ck-vn-note.bad{font-size:12px;color:var(--bad);font-weight:600;margin:0}
.ck-vn-row{display:flex;flex-direction:column;gap:8px}
.ck-vn-a,.ck-ev-a{width:100%;display:block}
.ck-ev-a{margin-top:6px;max-width:420px}
.ck-vm-note{font-size:12px;color:var(--muted)}
.ck-vm-note.bad{color:var(--bad);font-weight:600}
@media(max-width:640px){
  /* Everything stays and nothing is hidden, it just tightens: the number and
     the player are the two things worth a thumb on a phone. The meta line is
     allowed to break rather than push a fixed 25 character run past the edge
     of a 375px card. */
  .ck-vm{padding:12px 13px}
  .ck-vm-h{gap:8px}
  .ck-vm-meta{white-space:normal}
  .ck-vn{padding:12px 13px}
  .ck-vn-h{gap:8px}
  .ck-vn-meta{white-space:normal}
}

/* ============================================================
   Automated texts. Cards rather than table rows, because each one
   is a thing you switch on and off and read, not a record you scan.
   The Podium settings pattern: a clear title, a plain English line
   about what it targets, the content itself, and the action on the
   right where the eye ends up.
   ============================================================ */
.au-wrap{display:flex;flex-direction:column;gap:10px}
.au-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;transition:border-color var(--fast),background var(--fast)}
/* Off: dormant in colour, the way the missed call sequence says it
   (.au-mc.off). Opacity faded every word on the card under 4.5:1, the
   same fault that rule was written to avoid. A greyer card, a softer name,
   muted ink and grey chips read as switched off and stay readable, and the
   controls keep full strength, because a rule is switched off to be
   rewritten as often as to be forgotten. */
.au-card.off{background:var(--surface-2)}
.au-card.off .au-title b{color:var(--text-2)}
.au-card.off .au-body{background:var(--surface);color:var(--muted)}
.au-card.off .au-chip{background:var(--surface);color:var(--muted);border-color:var(--line)}
.au-head{display:flex;align-items:center;gap:12px}
.au-title{min-width:0;flex:1}
.au-title b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.au-state{font-size:11.5px;color:var(--muted)}
.au-act{display:flex;gap:6px;flex:none}

/* the switch */
.au-toggle{flex:none;width:40px;height:23px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surface-2);position:relative;cursor:pointer;transition:background var(--fast),border-color var(--fast);padding:0}
.au-toggle i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--muted);transition:transform var(--fast),background var(--fast)}
.au-toggle.on{background:var(--accent);border-color:var(--accent)}
.au-toggle.on i{transform:translateX(17px);background:#fff}
.au-toggle:disabled{cursor:default;opacity:.55}

/* what the rule targets, said in chips rather than a query */
.au-targets{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 9px}
.au-chip{font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:20px;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.au-chip.brand{background:var(--accent-soft);color:var(--accent-2);border-color:transparent}
.au-chip.any{color:var(--muted);font-weight:500}
.au-chip.camp{background:var(--warn-bg);color:var(--warn);border-color:transparent}

.au-body{font-size:13px;line-height:1.75;color:var(--text-2);
  background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px}
.au-meta{margin-top:8px;font-size:11.5px;color:var(--muted)}
.au-add{align-self:flex-start;margin-top:4px}

/* source tick boxes in the editor */
.au-checks{display:flex;flex-wrap:wrap;gap:7px}
.au-check{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);font-size:12.5px;cursor:pointer;background:var(--surface);user-select:none}
.au-check:hover{border-color:var(--accent)}
.au-check input{accent-color:var(--accent);width:15px;height:15px}
.au-check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}

/* text spend */
.sp-stats{margin-bottom:2px}
/* Six tiles, not the Command Center's four: the two totals over a row of
   the four kinds of text, welcome, missed call, booking and by hand. On a
   4 column grid the kinds spilled onto a second row and read as leftovers.
   Declared after the shared .cc-stats breakpoints, so it carries its own.
   The tiles answer to the Settings column, which is a container (see the
   Inspectors section), not to the window: at 1280 the sidebar open and
   collapsed are the same window and the column is 748px in one and 932px
   in the other. A four figure amount in the 30px mono needs about 150px,
   so four kinds across only from 802px of column, else two across, and
   one across on the narrowest phone. Six is even, so nothing sits alone. */
.sp-stats{grid-template-columns:repeat(12,minmax(0,1fr))}
.sp-stats .stat{grid-column:span 3}
.sp-stats .stat:nth-child(-n+2){grid-column:span 6}
@container settings (max-width:801px){
  .sp-stats .stat{grid-column:span 6}
}
@container settings (max-width:340px){
  .sp-stats{grid-template-columns:1fr}
  .sp-stats .stat,.sp-stats .stat:nth-child(-n+2){grid-column:auto}
}
/* A browser without size containers (iOS 15 and older) reads neither rule
   above and drew six tiles four across on a phone. It gets the window rules
   the tiles had before the column became a container: two across on a
   phone, one across on the narrowest. */
@supports not (container-type:inline-size){
  @media(max-width:640px){
    .sp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sp-stats .stat,.sp-stats .stat:nth-child(-n+2){grid-column:auto}
  }
  @media(max-width:380px){.sp-stats{grid-template-columns:1fr}}
}
.sp-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 9px}
.au-up{display:inline-flex;transform:rotate(180deg)}
.au-act .iconbtn.sm{width:28px;height:28px}
.au-act .iconbtn.sm:disabled{opacity:.3;cursor:default}
/* A phone gives a rule's controls a row of their own. Beside the switch,
   the two arrows, Edit and the cross left the name one word wide and it
   read down the card, "EV / Car / Buyers / welcome". Now the name has the
   width beside the switch, the arrows sit on the left under it and Edit
   and the cross on the right, at the 40px the phone rules give a target. */
@media(max-width:640px){
  .au-head{flex-wrap:wrap;row-gap:10px}
  .au-act{flex-basis:100%;gap:8px}
  .au-act .iconbtn + .btn{margin-left:auto}
  .au-act .btn{min-height:40px}
  /* the switch keeps its drawn size and takes a 44px square to the touch */
  .au-toggle::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}
.au-warn{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding:8px 10px;
  border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--warn);
  font-size:12px;line-height:1.5;font-weight:600}
.au-warn .ic{width:14px;height:14px;flex:none;margin-top:1px}

/* ---- The email status under the address on the lead page: one quiet line,
   coloured by what happened, because a bounce is the one worth seeing. ---- */
.ck-em{margin-top:-4px}
.ck-em-st{display:block;text-align:right;font-size:12px;line-height:1.4;color:var(--muted)}
.ck-em-st .ic{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.ck-em-st.green{color:var(--ok)}
.ck-em-st.amber{color:var(--warn)}
.ck-em-st.red{color:var(--bad);font-weight:600}
.ck-em-t{color:var(--muted);font-weight:400}

/* ---- The welcome email, above the arrival texts it goes with. One switch
   and a test and nothing to edit, because its wording is the approved design
   and lives with the server's templates. Off it greys like any card. ---- */
.au-em-lead{font-size:13px;line-height:1.55;color:var(--text-2);max-width:72ch;margin:9px 0 0}
.au-em-lead b{font-weight:600;color:var(--text)}
.au-em-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.au-em-test-l{font-size:12px;font-weight:700;color:var(--text-2)}
.au-em-to{font-size:11.5px;color:var(--muted)}
.au-sub{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 0}
@media(max-width:640px){
  .au-em-test .btn{min-height:40px}
  .au-em-test-l{flex-basis:100%}
}

/* ---- The missed call sequence. One opening text, then six follow ups in
   order. Its own group under the arrival rules: the rules are separate
   things switched on and off one by one, the sequence is one thing with
   one switch, so it gets one header, one switch and the seven texts under
   it. The six are a grid, not a column, because at desktop width seven
   full width cards is a page of scrolling to see the shape of something
   that fits on one screen. Order is carried by the numeral on each card
   and no card carries a time of day: which of 9am and 3pm a slot lands on
   depends on when the call was missed. ---- */
.au-mc{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  container-type:inline-size;display:flex;flex-direction:column;gap:10px}
.au-mc .au-head{margin-bottom:2px}
.au-state.off{color:var(--warn);font-weight:600}
.au-mc-lead{font-size:13px;line-height:1.55;color:var(--text-2);max-width:72ch;margin:0 0 4px}
.au-mc-h{display:flex;align-items:center;gap:10px;min-width:0}
.au-mc-h > b{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text)}
.au-mc-h .au-title{flex:1}
.au-mc-h .btn.sm{flex:none}
/* the order marker: a numeral on the six, the phone on the opening text,
   which is the one thing here that is not a follow up */
.au-mc-n{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent-2)}
.au-mc-n.open{background:var(--accent);color:#fff}
.au-mc-n .ic{width:13px;height:13px}
.au-mc-open .au-body,.au-mc-slot .au-body{margin-top:10px}
/* an empty wording is a deliberate gap in the sequence, said in words */
.au-mc-skip{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;color:var(--muted)}
.au-mc-skip .ic{width:14px;height:14px;flex:none;margin-top:2px}
.au-mc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:9px;
  font-size:11.5px;color:var(--muted)}
.au-mc-parts.over{color:var(--warn);font-weight:600}
.au-mc-sent{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-family:var(--mono);font-weight:600;color:var(--text-2)}
.au-mc-sent.zero{font-weight:500;color:var(--muted)}
.au-mc-bar{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.au-mc-bar b{display:block;height:100%;border-radius:3px;background:var(--accent)}
/* the step from the opening text down to the six: a short line dropping
   from under the opening card's marker, then the caption */
.au-mc-then{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.au-mc-then::before{content:'';display:block;width:2px;height:16px;margin-left:27px;
  background:var(--line-2);border-radius:1px}
.au-mc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* The grid already stretches the cards in a row to one height; the foot
   takes the spare room above it, so the parts line, the bar and the sent
   count sit on the floor of every card and line up across the row however
   long the wording above them runs. */
.au-mc-slot{display:flex;flex-direction:column}
.au-mc-slot .au-mc-foot{margin-top:auto;padding-top:9px}
.au-mc-rule{margin-top:4px;max-width:72ch}
/* Who a text speaks as when nobody holds the lead. A card in the sequence's
   own shape, because it is read at the same moment as the wordings: they say
   a name and give a number, and this is where those come from until somebody
   takes the lead. */
.au-off-rows{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.au-off-row{display:flex;align-items:baseline;gap:12px;font-size:13px}
.au-off-row .k{flex:none;width:64px;font-size:12px;color:var(--muted)}
.au-off-row .v{font-weight:600;min-width:0;word-break:break-word}
.au-off-empty{font-style:normal;font-weight:600;color:var(--warn)}
.au-off-none{display:flex;gap:8px;align-items:flex-start;margin-top:11px;padding:10px 12px;
  border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--text);
  font-size:12.5px;line-height:1.5}
.au-off-none .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--warn)}
.au-off-why{margin-top:11px;font-size:12px;color:var(--muted);line-height:1.5;max-width:72ch}
/* Column count follows the width this section really has, not the
   viewport: the sidebar can be a rail or full at the same viewport width
   and the settings nav moves above the content below 980px, so the
   viewport says nothing reliable about how wide these cards are. Under
   about 280px a body is a ribbon, so three columns want 900px and two
   want 600px. On one column the cards become a stepper, a short line
   joining each numeral to the next. */
@container (max-width:899px){.au-mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:599px){
  .au-mc-grid{grid-template-columns:1fr}
  .au-mc-slot{position:relative}
  .au-mc-slot + .au-mc-slot::before{content:'';position:absolute;left:27px;top:-10px;width:2px;height:10px;
    background:var(--line-2)}
}
/* a phone gets one column whatever the container maths says */
@media(max-width:640px){.au-mc-grid{grid-template-columns:1fr}}
/* Off: everything stays readable and in place, greyed rather than faded,
   because the owner switches it off to read and rewrite it, not to forget
   it. Opacity would take the text under 4.5:1; a greyer card and muted ink
   do not. The switch itself is outside the cards and stays full strength. */
.au-mc.off .au-card{background:var(--surface-2);border-color:var(--line)}
.au-mc.off .au-body{background:var(--surface);color:var(--muted)}
.au-mc.off .au-mc-n{background:var(--surface);color:var(--muted)}
.au-mc.off .au-mc-n.open{background:var(--muted);color:#fff}
.au-mc.off .au-mc-bar b{background:var(--muted)}
.au-mc.off .au-mc-h > b,.au-mc.off .au-mc-h .au-title b{color:var(--text-2)}
/* loading: the same cards, holding their place */
.au-sk{display:flex;flex-direction:column;gap:10px;min-height:88px;justify-content:center}
.au-sk-note{font-size:12.5px;color:var(--muted)}
/* The editor modal's labels and hints. label.fld styles its own .lab, but a
   field whose control is a block (the pill editor, the source tick boxes)
   cannot be a label: a label's click lands on its first labelable
   descendant, which here would be the Add field button. So the same look
   is carried on a div, and .hint is styled here because the modal root sits
   outside .set-grid, the only place .hint is styled. */
.au-fld .lab{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.au-fld .hint{display:block;margin-top:8px;font-size:12px;color:var(--muted);line-height:1.45}

/* ============================================================
   Lightbox (js/lightbox.js). A seller's photos are the basis of a
   price, so they get the whole screen: arrows, keyboard, swipe, and
   a filmstrip when there is more than one.
   ============================================================ */
body.pvw-open{overflow:hidden}
/* padded clear of the home screen app's status bar and of a phone's camera
   cutout when it is held sideways, which is how a photo is looked at
   (APP SHELL); the filmstrip clears the home indicator itself */
.pvw{position:fixed;inset:0;z-index:200;background:#0b0d12;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
  display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:52px 1fr auto;
  animation:lbIn .14s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.pvw-bar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;
  justify-content:space-between;padding:0 14px}
.pvw-count{color:rgba(255,255,255,.72);font-size:12.5px}
.pvw-btn{width:36px;height:36px;border:0;border-radius:9px;background:rgba(255,255,255,.1);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--fast)}
.pvw-btn:hover{background:rgba(255,255,255,.2)}

.pvw-stage{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:4px 0}
.pvw-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
  box-shadow:var(--shadow-pop)}

.pvw-nav{grid-row:2;align-self:center;justify-self:center;width:44px;height:44px;border:0;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--fast)}
.pvw-nav:hover{background:rgba(255,255,255,.22)}
.pvw-nav:disabled{opacity:0;pointer-events:none}
.pvw-nav.prev{grid-column:1}
.pvw-nav.next{grid-column:3}
.pvw-nav .ic{width:20px;height:20px}
.pvw-nav.prev .ic{transform:rotate(90deg)}
.pvw-nav.next .ic{transform:rotate(-90deg)}

.pvw-strip{grid-column:1/-1;grid-row:3;display:flex;gap:7px;overflow-x:auto;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0));scrollbar-width:none}
.pvw-strip::-webkit-scrollbar{display:none}
.pvw-th{flex:0 0 auto;width:58px;height:44px;border-radius:7px;overflow:hidden;padding:0;
  border:2px solid transparent;background:none;cursor:pointer;opacity:.5;transition:opacity var(--fast),border-color var(--fast)}
.pvw-th img{width:100%;height:100%;object-fit:cover;display:block}
.pvw-th:hover{opacity:.85}
.pvw-th.on{opacity:1;border-color:#fff}

@media (max-width:640px){
  .pvw{grid-template-columns:0 1fr 0}
  .pvw-nav{display:none}          /* swipe instead, the arrows would cover the photo */
}

/* Due column (Follow up contacted) and its step on the Contacted bar.
   Overdue is the only state that gets colour: "today" is just
   today, and a queue where every row is red is the New leads alarm C1 spent
   a chunk undoing. Later steps back to the secondary ink, it is not today's
   work. */
.due-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px}
.due-over{color:var(--bad);font-weight:600}
.due-over .due-dot{background:var(--bad)}
.due-today{font-weight:600}
.due-today .due-dot{background:var(--accent)}
.due-later{color:var(--text-2)}
.due-none{color:var(--muted)}
/* the reason is typed, up to 180 characters, in a nowrap cell: clipped here,
   whole on hover */
.due-why{display:inline-block;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* A seller in Schedule follow up who has written back, in the accent of a
   call owed today, because they are waiting on us (owner, 29 Sep 2026). */
.due-replied{color:var(--accent-2);font-weight:600}
.due-replied .due-dot{background:var(--accent)}

/* ---- Schedule follow up (_flow.js pipe:schedule) --------------------------
   The range as two boxes either side of "to", the quick callbacks under the
   picker, and the text as the bubble the seller will read, greyed with the
   reason beside it when it will not go. And on the car's step card, where
   the office left a scheduled seller (cockpit.js followUpHtml). */
.sf-dlg .sf-who{margin:0}
.sf-dlg > .ck-fl,.sf-dlg > .sf-text{margin-top:14px}
.sf-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.sf-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sf-text{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.sf-tick{display:flex;align-items:center;gap:8px;font-weight:600}
.sf-preview{margin:8px 0 0;padding:9px 12px;border-radius:12px;background:var(--accent-soft);color:var(--text);
  line-height:1.5;white-space:pre-wrap}
.sf-preview.held{background:var(--surface-2);color:var(--muted)}
.sf-from{margin:6px 0 0;font-size:12px}
.ck-fu{border-left:3px solid var(--accent);padding:2px 0 2px 10px;margin-bottom:12px;font-size:13px;
  line-height:1.5;color:var(--text-2)}
.ck-fu p{margin:0}
.ck-fu p:first-child{color:var(--muted);font-size:12px}
.ck-fu .ck-fu-next{margin-top:4px;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.ck-fu .ck-fu-next.replied{color:var(--accent-2)}
.ck-fu-next .ic{width:15px;height:15px}
/* the Home screen's Replied lane: a seller in Schedule follow up who wrote back */
.hm-fu{display:inline-block;margin-right:6px;padding:0 6px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent-2);font-size:11px;font-weight:600;font-style:normal;vertical-align:1px}


/* ==== seen before, and lost (owner, 24 Sep 2026) ============================
   The top of a lead when this customer or this car has been here before, the
   strip on a lost deal's own page, and the Records Archive. Violet is a repeat
   customer (the brand's "this person"), amber a repeat car (a plate that may
   have changed hands), the same pair the queue's pill uses. */
.dealhist{border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-card);margin:0 0 14px;overflow:hidden}
.dealhist.is-car{border-color:color-mix(in srgb,var(--warn) 24%,var(--line))}
.dealhist-h{display:flex;align-items:center;gap:6px;padding:0 14px 0 0;background:var(--accent-soft)}
/* the line is the toggle: folded by default, one tap drops the deals down */
.dealhist-tog{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:10px 12px 10px 14px;border:0;
  background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--radius) 0 0 0}
.dealhist-tog:hover .dealhist-n{color:var(--text)}
.dealhist-tog:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dealhist-n{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--accent-2);white-space:nowrap}
.dealhist.is-car .dealhist-n{color:var(--warn)}
/* the chev icon points down as drawn: down to open, turned to point up to fold */
.dealhist-chev{width:15px;height:15px;transition:transform .16s ease}
.dealhist .dh-open,.dealhist.is-open .dh-shut{display:none}
.dealhist.is-open .dh-open{display:inline}
.dealhist.is-open .dealhist-chev{transform:rotate(180deg)}
.dealhist-body{border-top:1px solid var(--line)}
.dealhist-body[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.dealhist-chev{transition:none}}
.dealhist.is-car .dealhist-h{background:var(--warn-bg)}
.dealhist-ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--surface);display:grid;place-items:center;color:var(--accent-2)}
.dealhist.is-car .dealhist-ic{color:var(--warn)}
.dealhist-ic .ic{width:16px;height:16px}
.dealhist-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.dealhist-t b{font-size:13.5px;font-weight:700;color:var(--text)}
.dealhist-t span{font-size:12.5px;color:var(--text-2)}
.dealhist-all{flex:none;padding:0 0 0 10px;border-left:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  font-size:12.5px;font-weight:600;color:var(--accent-2);text-decoration:none}
.dealhist-all:hover{text-decoration:underline}
.dealhist-rows{display:flex;flex-direction:column}
.dealhist-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr) auto;align-items:center;gap:12px;
  padding:9px 14px;border-top:1px solid var(--line)}
.dealhist-rows .dealhist-row:first-child{border-top:0}
.dealhist-id{font-size:12px;font-weight:600;color:var(--accent-2);text-decoration:none}
.dealhist-id:hover{text-decoration:underline}
.dealhist-car{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px}
.dealhist-car b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealhist-who{font-size:12px;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealhist-what{font-size:12.5px;color:var(--text-2);min-width:0}
.dealhist-act{display:flex;gap:6px;justify-content:flex-end}
.dealhist-f{padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--bg-deep)}
@media (max-width:720px){
  .dealhist-row{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .dealhist-what{grid-column:1 / -1}
  .dealhist-act{grid-column:1 / -1;justify-content:flex-start}
  .dealhist-all{display:none}
}
.ck-dead{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:var(--radius);
  border:1px solid var(--line-2);background:var(--surface-2);font-size:13px;color:var(--text-2)}
.ck-dead > .ic{flex:none;width:18px;height:18px;color:var(--muted)}
.ck-dead > span{flex:1;min-width:0}
.ck-dead b{color:var(--text);font-weight:600}
.ck-dead .btn{flex:none}
@media (max-width:720px){.ck-dead{flex-wrap:wrap}.ck-dead .btn{margin-left:28px}}
/* a desktop wraps the Archive's reasons; a phone scrolls them in one row
   (A ROW OF CHIPS ON A PHONE) */
@media (min-width:641px){.rec-chips .seg{flex-wrap:wrap}}
.rec-archive .rec-reason{color:var(--text-2);font-size:12.5px;max-width:240px}
.rec-archive tbody tr{cursor:pointer}
/* a phone's card for a lost deal is in RECORDS ON A PHONE, with the rest */

/* ===== BOOKING DIALOG (booking v2, 25 Sep 2026) ===== */
/* One dialog, four moments (spec 11.1, app/screens/_booking.js), ported
   from the approved mockup (tcb-move/insp/build_office.py). 680 wide, the
   header and footer pinned so the buttons never scroll away, a full screen
   sheet on a phone. Everything else it shows is the app's own: .input,
   .select, .btn, .pill, .rego, .ck-fl. */
.modal.ib{max-width:680px;display:flex;flex-direction:column;overflow:hidden}
.modal.ib.ib-report{max-width:520px}
.modal.ib .modal-b{overflow:auto;min-height:0}
.modal.ib .modal-h,.modal.ib .modal-f{flex:none}
.modal.ib .modal-f{flex-wrap:wrap}
.modal-f .btn.left{margin-right:auto}
.ib .ck-fl > span i{font-style:normal;font-weight:500;color:var(--muted);opacity:.85}
.ib-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ib-div{height:1px;background:var(--line);margin:18px 0}
/* The car, then the seller (owner, 29 Sep 2026): the rego and state to
   correct at the booking call, and first name and surname side by side,
   a phone included, since both are short. */
.ib-sub{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.ib-sub .ic{width:14px;height:14px}
/* our price range under the car (owner, 7 Oct 2026) */
.ib-range{margin-top:14px}
.ib-car-fl .cl-title{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ib-car-fl .cl-title .km{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted)}
.ib-seller{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.ib-names{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.ib-phone-note:empty{display:none}
/* the car strip: what the inspector reads to know they are at the right car */
.ib-car{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-deep);margin-bottom:18px}
.ib-car .ic{width:18px;height:18px;color:var(--accent);flex:none}
.ib-car b{font-size:13.5px;font-weight:650}
.ib-car .rego{white-space:nowrap}
.ib-car .km{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.ib-sec{display:flex;flex-direction:column;gap:12px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ib-sec.end{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* Where: two big choices */
.ib-where{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ib-where button{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font:inherit;color:var(--text-2)}
.ib-where button .ic{width:18px;height:18px;color:var(--muted);flex:none}
.ib-where button b{display:block;font-size:13px;font-weight:650;color:var(--text)}
.ib-where button span{display:block;font-size:11.5px;color:var(--muted)}
.ib-where button.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.ib-where button.on .ic,.ib-where button.on b{color:var(--accent-2)}
.ib-where button:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.ib-yard{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg-deep);border:1px dashed var(--line-2)}
.ib-yard .ic{width:20px;height:20px;color:var(--accent);flex:none}
.ib-yard b{display:block;font-size:13px;font-weight:650}
.ib-yard span{display:block;font-size:12px;color:var(--muted)}
/* under a field: the suburb only hint, a moved time, a problem to fix */
.ck-fl > span.ib-hint{font-size:12px;font-weight:600;color:var(--warn);display:flex;gap:6px;align-items:center}
.ck-fl > span.ib-hint[hidden]{display:none}
.ib .ck-fl[hidden]{display:none}
.ib-hint .ic{width:13px;height:13px;flex:none}
.ck-fl > span.ib-changed{font-size:11.5px;color:var(--warn);font-weight:600}
.ck-fl > span.ib-changed:empty{display:none}
/* the time, with Clear beside it while a preferred time can come off (a
   confirmed booking keeps its time, so there it is never drawn) */
.ib-when-row{display:flex;align-items:center;gap:6px}
.ib-when-row .input{flex:1;min-width:0}
/* an arrival window (owner, 29 Sep 2026): "to" and its end beside the start,
   the quick picks under them, and what the seller will read. The end list is
   as wide as its own times, so the start keeps the rest of the row. */
.ib-to{font-size:13px;font-weight:600;color:var(--muted);flex:none}
.ib-when-row .ib-end{flex:none;width:auto}
.ib-to[hidden],.ib-when-row .ib-end[hidden]{display:none}
.ib-chips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ib-chips[hidden]{display:none}
.ib-chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 12px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
.ib-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);
  box-shadow:inset 0 0 0 1px var(--accent)}
.ib-chip:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.ib-said{font-size:12px;color:var(--muted);margin-top:6px}
.ib-said:empty{display:none}
/* a preferred time's Clear sits on the label's line, at its end, so the row
   under it holds the start and a window's end */
.ck-fl > span.ib-when-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ib-clear{display:inline-flex;align-items:center;gap:3px;flex:none;border:0;background:none;padding:0;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.ib-clear:hover{color:var(--text-2)}
.ib-clear:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}
.ib-clear .ic{width:11px;height:11px}
.ib-clear[hidden]{display:none}
.ck-fl > span.ib-err{font-size:12px;font-weight:600;color:var(--bad)}
.input.is-changed{border-color:var(--warn);background:#fffaf0}
.input.is-bad,.select.is-bad,textarea.input.is-bad{border-color:var(--bad)}
.ib .select:not(.is-set){color:var(--muted)}
/* what happens when each button is pressed */
.ib-what{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin-top:18px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg-deep);font-size:12.5px;color:var(--text-2);line-height:1.45}
.ib-what b{font-weight:700;color:var(--text);white-space:nowrap}
.ib-what.one{grid-template-columns:1fr}
.ib-what b.inline{display:inline;white-space:normal}
/* the strip at the top: Pending, Confirmed, Cancelled, or a 409 notice */
.ib-status{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.ib-status.pending,.ib-status.notice{background:var(--warn-bg)}
.ib-status.confirmed{background:var(--ok-bg)}
.ib-status.cancelled{background:var(--bad-bg)}
.ib-status b{color:var(--text)}
.ib-status .pill{flex:none;margin-top:-1px;background:#fff}
.ib-status .pill.warn{color:var(--warn)}
.ib-status .pill.warn .dot{background:var(--warn)}
.ib-status .pill.ok{color:var(--ok)}
.ib-status .pill.ok .dot{background:var(--ok)}
.ib-status .pill.bad{color:var(--bad)}
.ib-status .pill.bad .dot{background:var(--bad)}
.ib-status > .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--warn)}
.ib-status .tries{display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--muted);font-size:12px}
.ib-status .tries .ic{width:13px;height:13px}
/* a note: the company's part, or what a moved time sends */
.ib-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-2);font-size:12.5px;line-height:1.5}
.ib-note .ic{width:16px;height:16px;flex:none;margin-top:1px}
.ib-note.warn{background:var(--warn-bg);color:var(--warn)}
.ib-note a{color:inherit;font-weight:600}
.ib-note .ib-links{display:block;margin-top:3px}
/* a phone gets a full screen sheet: one column, the buttons in a grid with
   the primary on its own row. A company's report link is one box, so it
   stays a dialog near the top like any other (DIALOGS ON A PHONE), with
   the phone's one height for a dialog. */
@media (max-width:640px){
  .modal-back:has(.modal.ib:not(.ib-report)){padding:0;align-items:stretch}
  .modal.ib:not(.ib-report){max-width:none;max-height:none;height:100%;border-radius:0;border:0;animation:none}
  /* the sheet runs to the top of the screen, so its header clears the home
     screen app's status bar (the inset is 0 in a browser tab) */
  .modal.ib:not(.ib-report) .modal-h{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px}
  .modal.ib .modal-b{padding:16px}
  .ib-grid2,.ib-seller{grid-template-columns:1fr}
  .modal.ib .modal-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0))}
  .modal.ib .modal-f .btn{justify-content:center;margin:0}
  .modal.ib .modal-f .btn.primary{grid-column:1/-1}
  /* four buttons (a pending booking): Save changes takes a row of its own
     rather than sitting beside an empty cell */
  .modal.ib .modal-f .btn:nth-child(3):nth-last-child(2){grid-column:1/-1}
}

/* ===== THE CAR'S PAGE READS THE BOOKING (booking v2, 26 Sep 2026) ===== */
/* the sub chip beside Inspections: the same pill as the stage, with a dot in
   the booking's colour, amber while pending and green once confirmed */
.stage-chip .sub-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.stage-chip.ok .sub-dot{background:var(--ok)}
/* the step card's rows: a value in the booking's colour, and a second line
   under it for when and by whom, quieter than the value. The hero's own
   rule sets the value's weight at .ck-hero .ck-act .ck-row .v (0,4,0) and
   the second line's colour at one deeper, so the quiet values and the
   coloured second lines are written at the same depth or they never render
   (tests/test_booking_lead_page_ui.py compares the specificity). */
.ck-row .v.warn{color:var(--warn)}
.ck-row .v.bad{color:var(--bad)}
.ck-row .v.ok{color:var(--ok)}
.ck-row .v.mute{color:var(--muted)}
.ck-row .v.none{color:var(--muted);font-style:italic}
.ck-hero .ck-act .ck-row .v.mute,.ck-hero .ck-act .ck-row .v.none{font-weight:500}
.ck-hero .ck-act .ck-row .v .sub{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:1px;
  font-family:var(--font),sans-serif}
.ck-hero .ck-act .ck-row .v .sub.warn{color:var(--warn)}
.ck-hero .ck-act .ck-row .v .sub.bad{color:var(--bad)}
/* the card's buttons fill the row, each growing from its own width, the way
   the mockup draws them (build_office.py), and wrap on a phone */
.ck-hero .ck-act .btn-row{flex-wrap:wrap}
.ck-hero .ck-act .btn-row .btn{flex:1 1 auto}
.ck-await.bad{color:var(--bad);background:var(--bad-bg)}
/* the company's report link, drawn one way by Booking.reportBar for the
   report link card on the car's page and the banner above an empty report
   page: the company, when the link was added, Open report and Change link */
.bk-report{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bk-report > .ic{width:18px;height:18px;color:var(--accent);flex:none}
.bk-report-t{flex:1;min-width:0}
.bk-report-t b{display:block;font-size:13.5px;font-weight:650}
.bk-report-t span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.bk-report-act{display:flex;gap:8px;flex:none}
.bk-report-raw{font-size:12px;color:var(--muted);word-break:break-all}
/* the empty report page's way back, a class rather than an inline style */
.rv-empty-back{margin-top:14px}
/* the banner's card around the bar */
.rv-company{padding:14px 16px}
@media (max-width:640px){
  .bk-report-act{flex:1 1 100%}
  .bk-report-act .btn{flex:1;justify-content:center}
  /* the header on a phone: the next move first, then Buy this car, then
     Activity as its icon and the menu, always last. Each keeps its whole
     label (the 760px rule above shares the line equally from nothing,
     which clipped "Add Verifi's report"), and the bar wraps only when they
     do not all fit, a long next move taking the first line to itself. The
     next move was drawn last, and on a new lead the word Activity made the
     biggest button on the screen (look audit, 6 Oct 2026). */
  .ck-top-act{flex-wrap:wrap;justify-content:flex-end}
  .ck-top-act .btn{flex:1 1 auto}
  .ck-top-act .ck-primary,.ck-top-act .ck-done-pill{order:1;flex:1 1 auto;justify-content:center}
  .ck-top-act .btn.buy{order:2}
  /* Activity and the menu are one piece, so the menu never wraps alone */
  .ck-top-act .ck-top-tools{display:flex;gap:8px;flex:none;order:3;margin-left:auto}
  .ck-top-act .ck-act-btn{order:0;flex:none;width:44px;padding:0;gap:0;justify-content:center}
  .ck-top-act .ck-act-btn .ck-act-l{display:none}
  /* the card's buttons: the primary full width, the rest sharing a row */
  .ck-hero .ck-act .btn-row .btn{flex:1 1 auto;justify-content:center}
  .ck-hero .ck-act .btn-row .btn.primary{flex:1 1 100%}
}

/* ===== INSPECTIONS PAGE (booking v2, 26 Sep 2026) ===== */
/* The stage page the bookings team works from (spec 11.3): two tiles with a
   red flag each, the Inspector filter on row 1, and rows built from short
   cells that hold their lines, so the table stays as dense as every other
   queue. The approved page is build_office.py's board(). */
/* the flag at the far end of a tile: how many are past their time, or have
   nobody going. It rides in .bkt-body beside the story, so it drops under
   the story when the two do not fit side by side. On the lit tile it sits
   on white, so the red reads on the violet tint. */
.stg-buckets .bkt .bkt-flag{margin-left:auto;flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--bad-bg);color:var(--bad);white-space:nowrap}
.stg-buckets .bkt.on .bkt-flag{background:#fff}
/* the Inspector filter beside the brand segments. The search gives up a
   little of its basis on this row so the five controls share one line at
   1440 with the sidebar open. */
.stg-insp .select{max-width:200px}
.stg-frow.has-insp .stg-search{flex-basis:220px}
/* the Preferred and Time cells: the day, the time in mono, then the one
   word that matters or how far off it is */
.insp-when{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.insp-when b{font-size:13px;font-weight:650;color:var(--text)}
.insp-when .t{font-size:12.5px;font-weight:600;color:var(--text-2)}
.insp-when .none{font-size:12.5px;color:var(--muted);font-style:italic;font-weight:500}
.insp-rel{font-size:11.5px;color:var(--muted)}
/* the small marks: red for what is wrong, amber for what is waiting on us,
   green for what the seller has done, violet for a fact, grey for nothing
   yet */
.insp-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:650;padding:2px 7px;border-radius:6px;white-space:nowrap;width:max-content}
.insp-chip .ic{width:11px;height:11px;stroke-width:2.3}
.insp-chip.bad{background:var(--bad-bg);color:var(--bad)}
.insp-chip.warn{background:var(--warn-bg);color:var(--warn)}
.insp-chip.ok{background:var(--ok-bg);color:var(--ok)}
.insp-chip.acc{background:var(--accent-soft);color:var(--accent-2)}
/* a Quick inspection's pill (screens/_quick.js), clear of the words beside
   it: the report's state on a Report in row, the report page's top line */
.wk .qk-pill{margin-left:8px;vertical-align:1px}
.rp2 .over .qk-pill{margin-right:8px;vertical-align:1px}
.insp-chip.mute{background:var(--surface-2);color:var(--muted)}
/* a cell of two lines and a mark: the seller, the place, the inspector,
   who booked it. Capped so a long name or street cannot widen the table. */
.insp-cell{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:210px}
.insp-cell .a{font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-cell .s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-cell .dim{color:var(--muted)}
.insp-cell .insp-quote{font-style:italic}
.insp-cell .insp-tel{font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;width:max-content}
.insp-cell .insp-tel:hover{color:var(--accent-2)}
/* a day heading on Confirmed: the day in caps at the column headings'
   size, its date in mono beside it, and the red one carries its count.
   About 47px tall, as the approved page has it. Not a row that opens
   anything, so no pointer and no hover tint: those two rules, and the
   red one, carry the same three ancestors as the base heading rule and
   the queue's own row rules, because a shorter selector loses to them on
   specificity and the heading quietly kept the pointer, and the red band
   came out grey (tests/test_booking_board_ui.py weighs them). The date
   follows a space in the markup, for a screen reader; the margin makes
   up the rest of the gap. */
table.grid tbody tr.insp-grp{cursor:default}
table.grid tbody tr.insp-grp:hover{background:transparent}
table.grid tbody tr.insp-grp td{background:var(--bg-deep);padding:14px 10px;font-size:13px;line-height:1.45;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
tr.insp-grp td span{letter-spacing:0;text-transform:none;font-weight:600;margin-left:4px}
table.grid tbody tr.insp-grp.bad td{background:color-mix(in srgb,var(--bad-bg) 70%,var(--surface));color:var(--bad)}
/* the red edge on a job past its time, the mark a selected row and a
   replied lead already wear */
tr.insp-late td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* A row's next move (Confirm, Rebook, Book, Add report, Contacted), one
   look on every queue (look audit round 3a, 7 Oct 2026): blue words on the
   light action tint, quieter than a card's one solid button; the page's own
   solid button stays New lead in the header. insp-next is the Inspections
   and Pay & collect rows' name for it, step the other queues'. */
.btn.sm.step,.btn.sm.insp-next{background:var(--action-soft);
  border-color:color-mix(in srgb,var(--action) 22%,var(--surface));color:var(--action)}
/* a row whose car is finished (Rego & transfer, sold or unwound) says so
   where its next move would be */
.row-done{font-size:12px;font-weight:600;color:var(--muted)}
.btn.sm.step:hover,.btn.sm.insp-next:hover{background:color-mix(in srgb,var(--action) 15%,var(--surface));
  border-color:color-mix(in srgb,var(--action) 34%,var(--surface));color:var(--action)}
/* the row's two buttons, side by side */
.insp-acts{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.insp-acts .btn{max-width:none;flex:none}
/* The Inspections rows give way the way the shared row does above an
   1100px wrap (stg-rows, under STAGE PAGE), at every width: the title
   wraps between its words and the plate moves to the meta line. That is
   what lets a 1366 laptop with the sidebar open (a 1050px wrap) hold a
   row whole instead of scrolling it under the pinned buttons. */
#stg-live .insp-grid .veh-cell{min-width:145px}
#stg-live .insp-grid .veh-line{flex-wrap:wrap;row-gap:4px}
#stg-live .insp-grid .veh-line .vt{white-space:normal;overflow:visible}
#stg-live .insp-grid .veh-line .rego{display:none}
#stg-live .insp-grid .veh-meta{flex-wrap:wrap;row-gap:3px}
#stg-live .insp-grid .veh-meta .rego{display:inline-flex;font-size:11px;padding:1px 6px}
/* Under an 1100px wrap (1366 with the sidebar open is 1050) the two
   buttons stack, the one that acts on top, and each cell gives up 2px of
   side padding. A row is three lines tall already, so two buttons under
   each other cost it no height, and the 100px they give back is what lets
   a Pending row fit at 1366 rather than scroll under the pin. At 1280
   (a 964px wrap) Confirmed fits and Pending is a few pixels over on an
   ordinary row and about 30 on a PO box, and scrolls with the buttons
   pinned, as the other queues do there. Measured 26 Sep 2026 on the seed. */
@container stg-rows (max-width:1100px){
  #stg-live .insp-grid .insp-acts{display:flex;flex-direction:column-reverse;align-items:stretch}
  #stg-live .insp-grid .insp-acts .btn{justify-content:center}
  #stg-live table.grid.insp-grid thead th,#stg-live table.grid.insp-grid tbody td{padding-left:8px;padding-right:8px}
}
@media (max-width:640px){
  /* a phone gets its own rows rather than the desktop table squeezed into
     a sideways scroll: the day and time first, then the car, then the
     seller beside the place and the inspector beside who booked it, two
     to a line so a row is a screen's third rather than a screen, and the
     buttons as a full width pair at the foot, where a thumb finds them.
     The cell and heading rules carry the #stg-live the queue's own
     padding rules carry (and the stacking rule above), because without it
     they lost to them: every cell kept 8px of side padding inside the
     row's own 14px, and a day heading started 14px left of the rows under
     it (tests/test_booking_board_ui.py weighs them). */
  table.grid.insp-grid{min-width:0;width:100%;display:block}
  table.grid.insp-grid thead{display:none}
  table.grid.insp-grid tbody{display:block}
  table.grid.insp-grid tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.grid.insp-grid tbody tr:last-child{border-bottom:none}
  #stg-live table.grid.insp-grid tbody td{display:block;padding:0;border:0;min-width:0}
  table.grid.insp-grid tbody td:nth-child(1),table.grid.insp-grid tbody td:nth-child(2),table.grid.insp-grid tbody td.act{grid-column:1 / -1}
  table.grid.insp-grid tbody td.act{margin-top:3px;text-align:left;white-space:normal}
  /* the pair side by side again: a phone's wrap is under the 1100px the
     stacking rule above reads, and that rule is written with the same id
     and classes, so it is restated here at the same weight */
  #stg-live .insp-grid .insp-acts{display:flex;flex-direction:row;width:100%;gap:8px}
  table.grid.insp-grid tbody td.act .btn{flex:1 1 0;justify-content:center;margin:0}
  table.grid.insp-grid tbody tr.insp-grp{display:block;padding:0}
  #stg-live table.grid.insp-grid tbody tr.insp-grp td{display:block;padding:10px 14px}
  /* the inspector and who booked it wear a small label, because the
     column heading that named them is gone on a phone; the seller and
     the place say what they are */
  table.grid.insp-grid tbody td.c-insp::before,table.grid.insp-grid tbody td.c-by::before{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  table.grid.insp-grid tbody td.c-insp::before{content:'Inspector'}
  table.grid.insp-grid tbody td.c-by::before{content:'Booked by'}
  /* a street, a suburb or a name wraps to a second line rather than being
     cut: a phone column is half a screen. Inside a word too, because a
     name typed as an email address or a street with no spaces has no
     break in it and painted over the column beside it. */
  .insp-cell{max-width:none}
  table.grid.insp-grid .insp-cell .a,table.grid.insp-grid .insp-cell .s{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .insp-when{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
  /* the red edge runs the row's full height */
  table.grid.insp-grid tbody tr.insp-late{box-shadow:inset 3px 0 0 var(--bad)}
  table.grid.insp-grid tbody tr.insp-late td:first-child{box-shadow:none}
}

/* ===== SETTINGS, LEAD ALLOCATION (screens/settings/allocation.js, 6 Oct 2026) =====
   The circulation: the switch, one row per person, target against actual as
   two thin bars, and one Save for the lot. A phone stacks each row. */
.al-panel{padding:14px 16px}
.al-switch{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.al-switch b{display:block;font-size:15px;color:var(--text)}
.al-state{display:block;color:var(--muted);font-size:13px;margin-top:2px;line-height:1.45}
table.grid.al-grid td{vertical-align:middle}
.al-who{min-width:150px}
.al-person{display:flex;gap:10px;align-items:center}
.al-who b{display:block;font-weight:600;color:var(--text);white-space:nowrap}
.al-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);font-weight:700;font-size:12px}
.al-why{display:block;font-size:12px;color:var(--warn);font-weight:600}
.al-off .al-who b{color:var(--muted)}
.al-av .ic{width:15px;height:15px}
.al-tick{white-space:nowrap}
.al-tick .al-in + .al-in{margin-left:14px}
.al-in input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.al-in span{font-size:13px;color:var(--text-2);font-weight:600}
.al-share{white-space:nowrap}
.al-share .input{width:76px;text-align:right;display:inline-block;font-variant-numeric:tabular-nums}
.al-share span{margin-left:4px;color:var(--muted)}
.al-fit{min-width:190px;max-width:260px}
.al-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin:3px 0}
.al-bar i{display:block;height:100%;border-radius:3px}
.al-t i{background:var(--line-2)}
.al-a i{background:var(--accent)}
.al-fig{font-size:12px;color:var(--text-2);margin-top:5px;font-variant-numeric:tabular-nums}
.al-fig b{font-weight:600;color:var(--text)}
.al-sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:normal}
.al-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:12px}
.al-foot .select{max-width:220px}
.al-total{font-size:13px;color:var(--muted)}
.al-total.bad{color:var(--bad);font-weight:600}
.al-error{color:var(--bad);font-weight:600;margin:10px 0 0;font-size:13px}
.al-save{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;
  padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.al-save span{margin-right:auto;color:var(--muted);font-size:13px}
.al-save.on span{color:var(--text);font-weight:600}
.al-ph{display:none}
.al-in{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
@media (max-width:640px){
  /* one card per person: name and Remove, the businesses, share and pause,
     then target and actual. The table's own 560px floor is lifted here. */
  table.grid.al-grid{min-width:0;width:100%;display:block}
  table.grid.al-grid tbody{display:block}
  table.grid.al-grid thead{display:none}
  table.grid.al-grid tr{display:grid;grid-template-columns:1fr auto;gap:10px 12px;padding:12px 10px 12px 4px;
    grid-template-areas:"who rm" "tick tick" "share pause" "bars bars";
    border-bottom:1px solid var(--line);align-items:center}
  table.grid.al-grid tr:last-child{border-bottom:0}
  table.grid.al-grid td{border:0;padding:0;width:auto;text-align:left;min-width:0}
  table.grid.al-grid td.al-who{grid-area:who;min-width:0}
  table.grid.al-grid td.al-rm{grid-area:rm}
  table.grid.al-grid td.al-tick{grid-area:tick}
  table.grid.al-grid td.al-share{grid-area:share}
  table.grid.al-grid td.al-pause{grid-area:pause}
  table.grid.al-grid td.al-bars{grid-area:bars}
  .al-ph{display:inline;font-size:13px;color:var(--text-2)}
  .al-share .al-ph{margin-right:8px}
  .al-pause{display:flex;align-items:center;gap:8px;flex-direction:row-reverse}
  .al-fit{min-width:0;max-width:none}
  .al-save span{flex-basis:100%}
}


/* ===== SETTINGS, INSPECTORS and the Inspects tick (booking v2, 26 Sep 2026) ===== */
/* The Settings content column is a container, so the Inspectors tables and
   the spend tiles answer to the room they actually have. With the sidebar
   open at 1280 the column is 748px, collapsed it is 932px, and a media
   query on the window would have to be wrong for one of them. The stacked
   rows below are the narrow states; a browser without container queries
   keeps the tables and scrolls them sideways on a phone, the app's older
   convention. */
.set-grid > div{container-type:inline-size;container-name:settings}

/* ---- Team: the Inspects tick -------------------------------------------
   A native box, brand violet, big enough to hit on a phone. Under it only
   the states that need a word: ticked with no mobile (amber, because a
   ticked person with no mobile is texted nothing), ticked but disabled
   (muted, because meta lists active accounts only), and an Inspector
   account nobody has ticked (amber, the one likely mistake here). */
.tm-insp{display:inline-flex;align-items:center;cursor:pointer;padding:2px 0}
.tm-insp input{accent-color:var(--accent);width:17px;height:17px;margin:0;cursor:pointer}
/* the MotorScout tick sits on its own line under the Inspects one, in the
   same narrow column (team.js, motorscoutBox); an admin's is ticked and
   cannot be changed, so it reads as settled rather than as a choice */
.tm-ms{display:flex;justify-content:center;margin-top:4px}
.tm-ms input:disabled{cursor:default;opacity:.55}
/* a note wraps to two short lines under the box rather than widening the
   column: the column's width is its word, INSPECTS, and nothing else */
.tm-insp-note{display:block;max-width:66px;margin:4px auto 0;font-size:11px;line-height:1.35;color:var(--muted)}
.tm-insp-note.warn{color:var(--warn);font-weight:600}
/* the narrow column: the Team table fills its card at 1440, so the box is
   centred under its word with a third of the usual side padding */
table.grid th.tm-insp-col,table.grid td.tm-insp-col{padding-left:6px;padding-right:6px;text-align:center}
/* ---- Team: the switches say which is which on a laptop. The cell holds
   two boxes, Inspects over MotorScout, and their words are App.UI.word's
   .card-k, which only a phone showed, so on a laptop they were two ticks
   with nothing to say which was which (review, 7 Oct 2026). The words show
   in this cell alone, and the cell reads from the left like the list it now
   is. A phone keeps its card layout as it was: these stop at its 640px. */
@media (min-width:641px){
  .set-page table.grid.tm-grid th.tm-insp-col,.set-page table.grid.tm-grid td.tm-insp-col{text-align:left}
  .set-page table.grid.tm-grid .tm-insp-col .card-k{display:inline;margin-left:6px;font-size:12px;color:var(--text-2);white-space:nowrap}
  .set-page table.grid.tm-grid .tm-ms{justify-content:flex-start}
  .set-page table.grid.tm-grid .tm-insp-note{margin-left:0;margin-right:0}
}
/* the actions, two lines at 1440 as before the column arrived: Devices and
   Disable on the first (161px between them), the reset link, the widest
   alone, on the second. The cell's own 32px of padding is in the number. */
.tm-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
td.tm-acts-col{min-width:194px}
/* a member's name is one line: the column is the one that gives */
.tm-name{font-weight:600;white-space:nowrap}
.tm-role{width:104px;height:30px;padding:3px 26px 3px 10px;font-size:12px}
.tm-seen{font-size:12.5px;color:var(--text-2);white-space:nowrap}
/* ---- Team in a middling column. At full density the table needs 987px
   (the Customers see column put it past the 888 these rules were first
   measured at), so at 1440 its buttons ran off the card's right edge behind
   a sideways scroll nobody found (audit, 6 Oct 2026). Under 1000px of
   column a name and a last login may wrap, the role select loses 8px and
   every cell keeps 8px at its sides: 1440's 908px holds the whole table.
   Under 900px the three actions stack and an email may break before its
   @, which holds
   it at 1366 (834) and 1280 (748). Measured 6 Oct 2026; under about 690px
   of column the table scrolls inside its card. */
@container settings (max-width:1000px){
  #team-body table.grid th,#team-body table.grid td{padding-left:8px;padding-right:8px}
  #team-body table.grid th.tm-insp-col,#team-body table.grid td.tm-insp-col{padding-left:4px;padding-right:4px}
  .tm-name,.tm-seen{white-space:normal}
  .tm-role{width:96px}
}
@container settings (max-width:900px){
  .tm-acts{flex-direction:column;align-items:flex-end}
  td.tm-acts-col{min-width:0}
  /* an email may break before its @ (team.js emailHtml), never mid word,
     and the cells keep 6px at their sides, which holds 1280 */
  #team-body .tm-at{display:inline-block}
  #team-body table.grid th,#team-body table.grid td{padding-left:6px;padding-right:6px}
}

/* ---- Inspectors: two sections ------------------------------------------ */
.in-sec{margin-bottom:24px}
.in-sec:last-child{margin-bottom:0}
.in-h{display:flex;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin:0 0 10px}
.in-h > div{flex:1;min-width:240px}
.in-h h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
.in-h p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:3px 0 0;max-width:72ch}
.in-h p b{color:var(--text-2)}
.in-h .btn{flex:none}
/* the name column: avatar, name, a role or a note under it. In the table
   a name wraps at its spaces only; the stacked layouts below let one long
   word break rather than run under the controls beside it. */
.in-who{display:flex;align-items:center;gap:10px;min-width:0}
.in-who > span:last-child{min-width:0}
.in-who b{display:block;font-weight:600;font-size:13px;line-height:1.3}
.in-who small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.in-role{text-transform:none}
/* the yard and a company wear a different tile from a person, so the three
   kinds on the dialog's list read as three kinds here too */
.av-sm.in-av-yard{background:var(--surface-2);border-color:var(--line-2);color:var(--text-2)}
.av-sm.in-av-yard .ic{width:15px;height:15px}
.av-sm.in-av-co{background:var(--bg-deep);border-color:var(--line-2);color:var(--text-2);border-radius:9px}
.av-sm.in-av-gone{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
/* Job texts: green with a tick when a job can reach them, amber when it
   cannot, and the fix on the next line where an admin can act on it */
.in-texts{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.in-texts .ic{width:15px;height:15px;flex:none}
.in-texts.ok{color:var(--ok);font-weight:600}
.in-texts.warn{color:var(--warn);font-weight:600}
/* the In-house sentence is the long one: held to two lines in a middling
   column rather than squeezing the yard's address beside it to four */
.in-texts.wrap{display:inline-block;max-width:32ch;line-height:1.4}
.in-texts-fix{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.4;max-width:34ch;white-space:normal}
.in-texts-fix a{color:var(--accent-2);font-weight:600}
/* Open jobs: a figure that is also the way to those jobs. Its word is for
   the stacked layouts, where the column heads are gone (below). */
.in-jobs{display:inline-block;min-width:22px;text-align:right;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--accent-2);text-decoration:none;border-bottom:1px dotted var(--line-2);padding-bottom:1px}
.in-jobs:hover{border-bottom-color:var(--accent)}
.in-jobs.zero{color:var(--muted);font-weight:400}
.in-jobs.wait{color:var(--faint);border-bottom-color:transparent}
/* the words that stand in for the column heads in the stacked layouts,
   drawn everywhere and shown only there. One style for the three: the
   count's word sits in a td.num, whose face is the mono, so the face is
   said here or OPEN JOBS reads in another type from PHONE and WEBSITE */
.in-jobs-l,.in-lbl{display:none;font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* a company switched off: dormant in colour, readable, controls at full strength */
tr.in-off td{color:var(--muted)}
tr.in-off .in-who b{color:var(--text-2)}
tr.in-off .in-jobs{color:var(--text-2)}
tr.in-off .av-sm{opacity:.7}
/* an empty phone or website: a word for staff, the way to the box for an
   admin (a button, so the keyboard reaches it) */
.in-unset{font-size:12px;color:var(--faint)}
button.in-unset{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--muted);border-bottom:1px dotted var(--line-2);cursor:pointer}
button.in-unset:hover{color:var(--accent-2);border-bottom-color:var(--accent)}
.in-plain{font-size:12.5px;color:var(--text-2);overflow-wrap:anywhere}
.in-link{font-size:12.5px;color:var(--accent-2);text-decoration:none;border-bottom:1px dotted var(--line-2)}
.in-link:hover{border-bottom-color:var(--accent)}
.in-link.mono{white-space:nowrap}
/* a website on one line, cut with an ellipsis, the whole of it in the
   tooltip: a long address broken letter by letter down a column read as
   nothing. In the table the cap is fixed, because a cell of an auto table
   has no width of its own for a percentage to mean anything, and it steps
   down in a middling column so the website gives before the name does. */
.in-link.site,.in-plain.site{display:inline-block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@container settings (max-width:900px){
  .in-link.site,.in-plain.site{max-width:120px}
}
.in-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px}
/* the generic switch as a button, so the keyboard reaches it: a span with
   tabindex never fires its action on Space or Enter */
button.tgl{padding:0;margin:0;appearance:none;-webkit-appearance:none;display:inline-block;vertical-align:middle;font:inherit}
/* an empty section is a row of the table it would fill, so the frame is
   the same whether the list has one name or none */
tr.in-none td,tr.in-team td,tr.in-editing td{cursor:default}
.in-empty{display:flex;flex-direction:column;gap:3px;padding:6px 0}
.in-empty b{font-size:13px;font-weight:600;color:var(--text-2)}
.in-empty span{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:60ch}
.in-empty a,.in-empty b b{color:var(--accent-2)}
/* the flag under Our inspectors: confirmed jobs with nobody going (D7) */
.in-flag{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--bad-bg);color:var(--bad);font-size:12.5px;font-weight:600;text-decoration:none;line-height:1.4}
.in-flag .ic{width:16px;height:16px;flex:none}
.in-flag:hover{filter:brightness(.96)}
/* the people a confirmed job still names who are off the list now: a
   quiet box under the table, dashed because it is not the list, each with
   the same count and link as a row above */
.in-gone{margin-top:10px;padding:10px 14px 4px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);background:var(--surface)}
.in-gone > b{display:block;font-size:12.5px;font-weight:600;color:var(--text-2)}
.in-gone > span{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.in-gone-row{display:flex;align-items:center;gap:12px;padding:9px 0;margin-top:8px;border-top:1px solid var(--line)}
.in-gone-row .in-who{flex:1}
.in-gone-row .in-who b{color:var(--text-2)}
/* the one editor: a row editing in place, and the Add panel. The fields
   wrap on a phone, the buttons go last, the problem takes the last line. */
.in-edit{display:flex;gap:10px 12px;align-items:flex-end;flex-wrap:wrap}
.in-edit .fld{flex:1 1 170px;min-width:0;margin-bottom:0}
.in-edit .input{height:36px}
.in-edit-acts{display:flex;gap:6px;flex:none}
.in-edit-acts .btn{height:36px}
.in-err{flex-basis:100%;font-size:12px;color:var(--bad);line-height:1.4}
.in-err:empty{display:none}
tr.in-editing td{background:var(--surface-2);padding:12px 16px}
.in-add{margin-top:12px;padding:14px 16px}
.in-add > b{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.in-note{margin:10px 0 0}

/* ---- the companies stacked (a column under 800px) ------------------------
   Five columns with real data (a phone with an extension, a long website,
   a name of several words) need about 770px before the name breaks mid
   word and Edit scrolls out of the card, so under 800px each row is a
   card of its own: the name, the count, the switch and Edit on the first
   line, then the phone and the website with their words, since the column
   heads are gone. The tr's ::after is a zero height item of the full
   width, the line break between the two. */
@container settings (max-width:799px){
  .in-sec table.in-cos .in-who b{overflow-wrap:anywhere}
  .in-sec table.in-cos thead{display:none}
  .in-sec table.in-cos,.in-sec table.in-cos tbody,.in-sec table.in-cos tr{display:block;min-width:0}
  .in-sec table.in-cos tr{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .in-sec table.in-cos tr:last-child{border-bottom:none}
  .in-sec table.in-cos td{display:block;padding:0;border:0;min-width:0}
  .in-sec table.in-cos td:first-child{flex:1 1 0;order:1}
  .in-sec table.in-cos td.num{order:3;text-align:right}
  .in-sec table.in-cos td:nth-child(5){order:4}
  .in-sec table.in-cos tr::after{content:"";flex-basis:100%;height:0;order:5}
  .in-sec table.in-cos td:nth-child(2),.in-sec table.in-cos td:nth-child(3){order:6;flex:0 1 auto;display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%}
  .in-sec table.in-cos td:nth-child(3){flex-shrink:1}
  .in-sec table.in-cos td[colspan]{flex-basis:100%;order:1}
  .in-sec table.in-cos tr.in-editing::after,.in-sec table.in-cos tr.in-none::after{display:none}
  .in-sec table.in-cos .in-jobs-w{display:inline-flex;flex-direction:column;align-items:flex-end}
  .in-sec table.in-cos .in-jobs-l,.in-lbl{display:block}
  .in-sec table.in-cos .in-jobs-l{margin-top:2px}
  .in-lbl{flex:none;width:58px}
  .in-sec table.in-cos .in-jobs{font-size:16px}
  .in-link.site,.in-plain.site{flex:0 1 auto;min-width:0;max-width:100%}
  tr.in-editing td{background:transparent}
}

/* ---- both stacked, the phone (a column under 480px) ----------------------
   Our inspectors stacks too: name and count, then the texts line. A
   company gets its name alone on the first line (the tr's ::before is the
   break after it), then the count with the switch and Edit pushed right,
   then the phone and website. The editor's fields take a line each and
   its buttons share one. */
@container settings (max-width:479px){
  .in-h{align-items:flex-start}
  .in-h .btn{width:100%;justify-content:center}
  .in-texts-fix{max-width:none}
  .in-sec .in-who b{overflow-wrap:anywhere}
  .in-sec table.in-people thead{display:none}
  .in-sec table.in-people,.in-sec table.in-people tbody,.in-sec table.in-people tr{display:block;min-width:0}
  .in-sec table.in-people tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .in-sec table.in-people tr:last-child{border-bottom:none}
  .in-sec table.in-people td{display:block;padding:0;border:0;min-width:0}
  .in-sec table.in-people td:first-child{flex:1 1 0;order:1}
  .in-sec table.in-people td.num{order:2;text-align:right}
  .in-sec table.in-people td:nth-child(2){order:5;flex-basis:100%}
  .in-sec table.in-people td[colspan]{flex-basis:100%;order:1}
  .in-sec table.in-people .in-jobs-w{display:inline-flex;flex-direction:column;align-items:flex-end}
  .in-sec table.in-people .in-jobs-l{display:block;margin-top:2px}
  .in-sec table.in-people .in-jobs{font-size:16px}
  .in-sec table.in-cos td:first-child{flex-basis:100%}
  .in-sec table.in-cos tr::before{content:"";flex-basis:100%;height:0;order:2}
  .in-sec table.in-cos tr.in-editing::before,.in-sec table.in-cos tr.in-none::before{display:none}
  .in-sec table.in-cos td.num{text-align:left}
  .in-sec table.in-cos .in-jobs-w{align-items:flex-start}
  .in-sec table.in-cos .in-jobs{text-align:left}
  .in-sec table.in-cos td:nth-child(5){margin-left:auto}
  .in-who small,.in-texts{white-space:normal}
  .in-empty{padding:2px 0}
  .in-gone-row{flex-wrap:wrap}
  .in-edit .fld{flex-basis:100%}
  .in-edit-acts{width:100%}
  .in-edit-acts .btn{flex:1;justify-content:center}
}

/* ===== PHONE QUEUES (the stage pages on a phone, 27 Sep 2026) =====
   The owner works the queues from the home screen app on an iPhone, and at
   390 wide the header, four tiles, the Replied strip, the search and three
   filter controls filled the whole first screen before a single lead. On a
   phone (the phone block's 640px) the top folds to a title row, one row of
   step chips that scrolls sideways, the search, and one row of brand, More
   filters and Sort; and each row becomes a card of three short lines with
   nothing to scroll sideways: the seller, the car with its km and plate,
   then the number to ring and the one or two facts the stage is worked by,
   with the age, the price and the lead source down the right. The
   Inspections rows keep the card of their own (INSPECTIONS PAGE above).
   A desktop draws none of it: the pieces a phone adds (the short labels,
   the km on the title line, the right hand stack, the marks by the name)
   are its only trace there, and they are never shown. */
.bkt-sn,.seg-filter .segf-s,.q-side,.q-km,.q-marks{display:none}
@media (max-width:640px){
  /* the title row: the stage, its count as quiet text, and New lead as a
     round plus at the right. Under 24px the display face gives way to the
     body face, as the car's title does on a phone (ELEVATION-KIT rule 1). */
  .page-h.stg-h{flex-direction:row;align-items:center;gap:10px;margin-bottom:10px}
  .stg-h > div:first-child{flex:1 1 auto;min-width:0}
  .stg-h h1{font-family:var(--font);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .stg-h .stage-count.pill{display:inline;background:none;border:0;padding:0;margin-left:2px;
    font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted)}
  .stg-h .stage-purpose{display:none}
  .page-h.stg-h .right{margin-left:auto;flex:none}
  .btn.stg-new,.btn.stg-qb{width:40px;height:40px;padding:0;gap:0;border-radius:50%;justify-content:center}
  .btn.stg-new .ic,.btn.stg-qb .ic{width:20px;height:20px}
  /* words a phone does not show and a screen reader still reads */
  .stg-new-t,.stg-more-t,.stg-frow > .sortby:not(.stg-insp) > span,.stg-frow > .seg-filter .segf-l,
  .stg-buckets .bkt .bkt-t:has(.bkt-sn) b{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* the steps and Replied: one row of chips, edge to edge, that scrolls
     sideways with no scrollbar, each chip its short name and its count.
     Every chip keeps its tile's action, its selected look and Replied its
     red; stage.js (phoneFit) brings the chip in use into view. The scroll
     is the one every row of chips shares (A ROW OF CHIPS ON A PHONE). */
  .stg-buckets{flex-direction:row;align-items:center;gap:6px;
    margin:0 -14px 10px;padding:1px 14px;scroll-snap-type:x proximity;scroll-padding-inline-start:14px}
  .stg-buckets .bkt-row,.stg-buckets .bkt-body{display:contents}
  .stg-buckets .bkt{flex:none;height:38px;padding:0 13px;gap:6px;border-radius:999px;
    white-space:nowrap;scroll-snap-align:start}
  /* no shadow in any state: the bar's id outranks the richest of the
     tile's states (.bkt.rp.on:hover), so one rule clears them all */
  #stg-buckets .bkt{box-shadow:none}
  /* Replied leads the row while anybody is waiting, where the red strip
     it replaces was read first; with nobody waiting it keeps its place */
  .stg-buckets .bkt.rp.has{order:-1}
  .stg-buckets .bkt .bkt-t{order:1}
  .stg-buckets .bkt .bkt-t > span{display:none}
  .stg-buckets .bkt .bkt-t b,.stg-buckets .bkt .bkt-t > .bkt-sn{display:inline-flex;font-size:13.5px;
    font-weight:600;color:var(--text);white-space:nowrap;overflow:visible}
  .stg-buckets .bkt .bkt-n{order:2;min-width:0;font-size:13px;font-weight:700;color:var(--muted)}
  .stg-buckets .bkt .bkt-sk{width:1.6em;height:9px}
  .stg-buckets .bkt.primary .bkt-n,.stg-buckets .bkt.on .bkt-n,
  .stg-buckets .bkt.on .bkt-t b,.stg-buckets .bkt.on .bkt-t > .bkt-sn{color:var(--accent-2)}
  .stg-buckets .bkt.rp.has .bkt-n,.stg-buckets .bkt.rp.has .bkt-t b,
  .stg-buckets .bkt.rp.on .bkt-n,.stg-buckets .bkt.rp.on .bkt-t b{color:var(--bad)}
  /* Contacted's due split and the Inspections flags ride after the count */
  .stg-buckets .bkt-due,.stg-buckets .bkt .bkt-flag{order:3}
  .stg-buckets .bkt-due{flex-wrap:nowrap;gap:0 8px;font-size:11.5px}
  .stg-buckets .bkt-due .due-dot{margin-right:4px}
  .stg-buckets .bkt .bkt-flag{margin-left:0;padding:2px 7px;font-size:10.5px}

  /* the search, then brand, More filters and Sort sharing one row. The
     brand says TCB and EV here (segBtn draws both labels), More filters is
     its icon with the count badge on its corner, and Sort is its box.
     Assigned to and, on Inspections, the Inspector box share the row under
     them, half each: on rows of their own the controls put the first card a
     third of the way down the screen (look audit, 6 Oct 2026). */
  .stg-filters{gap:8px;margin:0 0 10px}
  .stg-frow{gap:6px}
  .stg-frow.has-insp .stg-search{flex-basis:100%}
  .stg-search input{height:40px}
  .stg-frow .flex1{display:none}
  .stg-frow > .seg-filter{flex:none;height:38px;align-items:stretch}
  .stg-frow > .seg-filter .segf{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 9px}
  .stg-frow > .seg-filter .segf .mono{margin-left:0}
  /* a segment with a short label shows it in the long one's place, the long
     one kept for a screen reader (the list above) */
  .stg-frow > .seg-filter .segf .segf-s{display:inline;order:-1}
  .stg-frow > .btn.stg-more{flex:none;width:38px;height:38px;padding:0;gap:0;justify-content:center;
    border-color:var(--line-2);background:var(--surface);color:var(--text-2)}
  .stg-more .stg-n{position:absolute;top:-6px;right:-6px;margin:0}
  /* the Sort box is never squeezed under 110px, and Assigned to and the
     Inspector are half a row each, which keeps them off its row */
  .stg-frow > .sortby:not(.stg-insp){flex:1 1 0;min-width:110px}
  .stg-frow > .sortby .select{width:100%;min-width:0;max-width:none;height:38px;
    padding:0 22px 0 9px;background-position:right 6px center}
  .stg-frow > .stg-insp{flex:1 1 calc(50% - 3px);min-width:0;order:9}
  /* Assigned to, the whole row where it is alone, and its list is a sheet
     from the bottom over a dimmed queue, rows a thumb can hit */
  .stg-frow > .btn.stg-heldbtn{flex:1 1 calc(50% - 3px);min-width:0;order:8;height:38px;justify-content:flex-start}
  /* beside the Inspector it says only who, by its people icon: the label
     cut its own value to "Assigned to: Ever" at 390 */
  .stg-frow.has-insp .stg-heldbtn :is(.hb-w,.hb-c){display:none}
  .stg-heldbtn .hb-t{max-width:none;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .stg-heldbtn > .ic:last-child{margin-left:auto}
  .held-back{display:block;position:fixed;inset:0;z-index:79;background:rgba(16,14,30,.32)}
  .held-pop{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;
    padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
  /* a sheet fixed to the foot of the screen here, so it moves with the tab
     bar when the screen drifts (APP SHELL) */
  html.drift .held-pop{translate:0 var(--vv-bot,0px)}
  .hp-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px 6px}
  .hp-h b{font-size:16px;font-weight:700}
  .hp-list{max-height:62vh}
  .hp-row{padding:11px 9px;font-size:15px}
  .hp-row .asg-b{width:30px;height:30px;font-size:11.5px}
  .hp-row .asg-n{max-width:none}
  .hp-box{width:20px;height:20px}
  .hp-f{padding:10px 9px 2px;font-size:13px}
  .stg-result{margin:0 0 8px}

  /* the rows: a card with no header row. Down the left the seller, the car
     with its km and plate, then the number to ring and the stage's facts;
     down the right the age, the price and the lead source. A grid: the left
     runs across the first four tracks, three of them for the third line's
     cells (the number first, the rest in the order they come), and the
     fifth is the right hand stack, the row's first cell (q-age, with
     sideHtml's stack in stage.js). Keyed on the table's q-cards and its
     cells' q- classes (rowHtml), which a desktop has no rule for. */
  table.q-cards{display:block;min-width:0}
  .q-cards thead{display:none}
  .q-cards tbody{display:block}
  .q-cards tr[data-id]{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;
    align-items:center;row-gap:3px;padding:8px 12px;border-bottom:1px solid var(--line)}
  .q-cards tr[data-id]:last-child{border-bottom:none}
  /* every cell to the third line by default; a rule placing one cell
     elsewhere names it after the same row and cell, so it outweighs this */
  .q-cards tr[data-id] > td{display:block;grid-row:3;min-width:0;margin:0 8px 0 0;padding:0;border:0;
    box-shadow:none;white-space:nowrap}
  .q-cards tr[data-id] > td:empty{display:none}
  /* the row's edge marks move from its first cell to the card */
  .q-cards tr.unseen[data-id]{box-shadow:inset 3px 0 0 var(--accent)}
  .q-cards tr.replied[data-id]{box-shadow:inset 3px 0 0 var(--bad)}
  .q-cards tr.sel[data-id]{box-shadow:inset 3px 0 0 var(--accent)}
  /* line 1: the seller, with the Replied and NEW marks in front of the name
     (the row draws them there for a phone and the car line's pair hides) */
  .q-cards tr[data-id] > td.q-cust{grid-area:1 / 1 / 2 / 5}
  .q-cards .cust{max-width:none;font-size:14.5px;font-weight:700;line-height:1.3}
  .q-cards .cust > div,.q-cards .veh-line > .replied-badge,.q-cards .veh-line > .new-dot{display:none}
  .q-cards .cust .q-marks{display:inline-flex;align-items:center;gap:4px;margin-right:6px;vertical-align:2px}
  .q-cards .replied-badge{margin:0;padding:1.5px 5px;font-size:9.5px}
  /* line 2: the car, then its km, then the plate. The car's name is what
     gives way, cut with an ellipsis, before anything else on the line. */
  .q-cards tr[data-id] > td.q-car{grid-area:2 / 1 / 3 / 5}
  .q-cards .veh-meta{display:none}
  .q-cards .veh-line{gap:6px;font-size:13px;font-weight:500;color:var(--text-2)}
  .q-cards .veh-line .vt{min-width:0}
  .q-cards .veh-line .q-km{display:inline;flex:none;font-size:11.5px;color:var(--muted)}
  .q-cards .veh-line .rego{font-size:10.5px;letter-spacing:.03em;padding:1px 5px}
  /* the right hand side, small and right aligned: the age at the top (or,
     on Follow up contacted, when the seller asked to be rung), the price
     the queue's row shows, and the lead source at the foot */
  .q-cards tr[data-id] > td.q-age{grid-area:1 / 5 / 4 / 6;align-self:stretch;display:flex;flex-direction:column;
    align-items:flex-end;justify-content:space-between;gap:3px;margin:0 0 0 2px;text-align:right}
  .q-cards .q-side{display:contents}
  .q-cards .q-price{font-size:12px;font-weight:600;line-height:1.3;color:var(--text)}
  .q-cards .q-price .price-rng{font-family:var(--font);font-size:12px}
  .q-cards .q-age .lsrc-cell{gap:4px;justify-content:flex-end;line-height:1.3}
  .q-cards .q-age .src{gap:4px;font-size:11px}
  .q-cards .age-exact,.q-cards .try-chip{display:none}
  .q-cards .age{padding:2px 6px;font-size:11px}
  /* line 3: the number to ring, then the stage's own facts: the form and
     the missed call texts on New leads, the report, the offers and their
     expiry, the paperwork, the purchase. A fact out of room is cut, never
     the number. */
  .q-cards tr[data-id] > td.ph{grid-column:1;min-width:auto}
  .q-cards tr[data-id] > td.fmc,.q-cards tr[data-id] > td.sqc,.q-cards tr[data-id] > td.q-rpt,
  .q-cards tr[data-id] > td.q-pwk,.q-cards tr[data-id] > td.q-offers,.q-cards tr[data-id] > td.q-buy{overflow:hidden}
  .q-cards tr[data-id] > td.ask,.q-cards tr[data-id] > td.lsrc,
  .q-cards tr[data-id] > td.q-rng,.q-cards tr[data-id] > td.q-tgt,.q-cards tr[data-id] > td.q-won{display:none}
  /* line 4: the row's buttons, the ones a laptop's row has, side by side
     and thumb sized, so a move is a tap from the queue rather than open
     the car, wait, find the button (look audit round 4, 8 Oct 2026). The
     next step in the action tint, any other an outline, Lost its icon; a
     finished car's Done, said where its move would be. */
  .q-cards tr[data-id] > td.act{display:flex;grid-row:4;grid-column:1 / -1;gap:8px;margin:12px 0 0;
    white-space:normal;text-align:left}
  .q-cards tr[data-id] > td.act .act-line{display:flex;gap:8px;flex:1;min-width:0}
  .q-cards tr[data-id] > td.act .btn{flex:1 1 0;justify-content:center;margin:0}
  .q-cards tr[data-id] > td.act .iconbtn{flex:none;margin:0}
  /* not Offer's: the wholesale send waits on the owner's own pass at the
     offer screens (8 Oct 2026) */
  table.q-cards[data-stage="offer"] tr[data-id] > td.act{display:none}
  /* the number to ring is the thing a finger aims for on this card: 36px
     to see, 44px to touch (TAP TARGETS ON A PHONE), in the blue the CRM
     gives anything a finger lands on. At 24px a near miss opened the car
     instead of dialling (look audit, 6 Oct 2026). */
  .q-cards td.ph a.tel{display:inline-flex;align-items:center;min-height:36px;
    padding:0 12px;border:0;border-radius:9px;background:var(--action-soft);color:var(--action);
    font-size:13.5px;font-weight:600}
  .q-cards .fm{flex-direction:row;align-items:center}
  .q-cards .fm-top{gap:5px}
  .q-cards .fm-seg{width:7px}
  .q-cards .fm-sub,.q-cards .sq-track,.q-cards .sq-sub{display:none}
  .q-cards .sq{padding:2px 6px;border-radius:6px;background:var(--surface-2)}
  /* a chip out of room ends in an ellipsis rather than mid letter */
  .q-cards .sq,.q-cards .sq-top,.q-cards .fm,.q-cards .fm-top{min-width:0;max-width:100%}
  .q-cards .sq-lb,.q-cards .fm-lb{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .q-cards .wk{overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
  .q-cards .wk-sub{display:none}
  .q-cards td.q-offers .wk{display:flex;align-items:center;gap:6px}
  .q-cards td.q-offers .wk-sub{display:flex;flex-wrap:nowrap;margin:0}
  /* the skeleton as cards too, so nothing jumps when the rows land */
  .q-cards tr.sk-row{display:flex;flex-direction:column;gap:9px;padding:14px}
  .q-cards tr.sk-row td{display:block;padding:0;border:0}
  .q-cards tr.sk-row td:nth-child(n+4){display:none}
}

/* ===== THE CAR'S PAGE ON A PHONE (27 Sep 2026) =====
   On a phone the car's page ran three and a half screens, and the step the
   office works next sat halfway down it. The owner set the order: the
   header and the tabs as they were, then the situation in at most three
   lines (a tap on it shows the rest), then where the deal is as one line
   with a thin bar of the seven steps, then the step card with the number to
   ring and Log the call, and only then the seller, the car, the photos, the
   price, the notes, the two figures, the quick actions, the messages and
   the reminder. In the buying stages the paperwork card follows the step
   card, because that card sends the operator to it. The three columns
   stand aside (display:contents), so every card is one item of the one
   column and takes its place by order. A tap on the progress line opens
   the full list in place, closed until then, and a stage can still be
   moved back from it. Cards, rows and gaps are tighter. There is no action
   bar fixed to the foot: Call and Log the call are near the top instead.
   A desktop draws none of it. The line is the one thing the page adds, and
   it is never shown there. */
.ck-rail-bar{display:none}
@media (max-width:640px){
  .ck-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .ck-left-col,.ck-left,.ck-centre,.ck-right-col{display:contents}
  .ck-left > *,.ck-centre > *,.ck-right-col > *,.ck-left-col > .ck-rail{min-width:0}
  .ck-left > *{order:4}
  .ck-centre > *{order:5}
  .ck-right-col > *{order:6}
  .ck-centre > .ck-sum,.ck-centre > .ck-vm,.ck-centre > .ck-vn{order:1}
  .ck-left-col > .ck-rail{order:2}
  .ck-centre > .ck-hero,.ck-centre > .ck-report,.ck-centre > .ck-pw-buy{order:3}

  /* the situation: three lines, then a tap for the rest. The fold carries
     the card's padding, so the whole card is the tap. */
  .ck-sum{margin-bottom:0;padding:0}
  .ck-sum-fold{padding:11px 13px}
  .ck-sum .cap{margin-bottom:4px}
  .ck-sum:not(.is-open) .ck-sum-t{display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-clamp:3;overflow:hidden}

  /* progress: one line and a thin bar, the list under it once tapped */
  .ck-rail{padding:0}
  .ck-rail > .cap{display:none}
  .ck-rail-bar{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 13px;
    border:0;border-radius:var(--radius);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
  .ck-rail-now{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
  .ck-rail-now b{font-weight:700;color:var(--text)}
  .ck-rail-seg{flex:1 1 auto;display:flex;gap:3px;min-width:0}
  .ck-rail-seg i{flex:1 1 0;height:4px;border-radius:2px;background:var(--line-2)}
  .ck-rail-seg i.done,.ck-rail-seg i.now{background:var(--accent)}
  .ck-rail-seg i.skip{background:var(--accent-soft)}
  .ck-rail-chev{width:16px;height:16px;color:var(--muted);transition:transform .16s ease}
  .ck-rail.is-open .ck-rail-chev{transform:rotate(180deg)}
  .ck-rail:not(.is-open) .ck-step{display:none}
  .ck-rail.is-open{padding-bottom:13px}
  .ck-rail.is-open .ck-rail-bar{margin-bottom:4px}
  .ck-rail .ck-step{margin:0 13px}
  .ck-step .lbl{font-size:12px}

  /* the step card: the rail line above says the step, so the pill goes */
  .ck-steppill{display:none}
  .ck-hero{padding:0}
  .ck-hero-h{padding:13px 13px 0}
  .ck-hero-h h3{margin-top:4px;font-size:18px}
  .ck-hero-h p{margin-top:4px;line-height:1.45}
  .ck-hero-b{padding:11px 13px 13px}
  .ck-hero .ck-act{padding:11px;gap:8px}
  .ck-hero .ck-act .ck-row{padding:7px 0}

  /* denser cards and key value rows */
  .ck-card{padding:12px 13px}
  .ck-card .cap{margin-bottom:8px}
  .ck-name{margin-bottom:6px}
  .ck-rows,.ck-seller .ck-rows{gap:6px}
  .ck-alloc,.ck-txt,.ck-seller{margin-top:10px;padding-top:9px}
  .ck-seller-h{margin-bottom:7px}
  .ck-eval-btn,.ck-carok,.ck-carbad,.ck-asked{margin-top:10px}
  .ck-more{margin-top:8px;padding-top:8px}
  .ck-more .ck-rows{margin-top:8px}
  .ck-metric{padding:9px 13px}
  .ck-metric span{margin-bottom:3px}
  .ck-qa{gap:7px}
  .ck-qa-b{min-height:0;padding:9px 10px}
  .ck-right-h{padding:11px 13px}
  .ck-thread{min-height:0;padding:11px 13px;gap:10px}
  .ck-thread .empty{padding:14px 12px}
  .ck-composer{padding:10px 12px}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.ck-rail-chev{transition:none}}
/* The stage's name as the way to the other stages on a phone, and the sheet
   it opens (stage.js, stg:pick): a phone has no sidebar, and the Pipeline tab
   alone opened New leads and nothing else. Only a phone draws the button, so
   a desktop's title is the plain text it was. The sheet lists every stage
   with its total, the stage in use ticked. */
.stg-pick{display:inline-flex;align-items:center;gap:3px;margin:-6px 0;padding:6px 2px 6px 0;border:0;
  background:none;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;vertical-align:baseline}
.stg-pick .ic{width:18px;height:18px;color:var(--muted);stroke-width:2.2}
.stg-pick-list{display:flex;flex-direction:column;padding:4px 0 8px}
.stg-pick-it{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;
  font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
.stg-pick-it + .stg-pick-it{border-top:1px solid var(--line)}
.stg-pick-it[aria-current="page"]{color:var(--accent-2);background:var(--accent-soft)}
.stg-pick-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-pick-n{flex:none;min-width:26px;height:22px;padding:0 8px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-2);
  font-family:var(--mono);font-size:12px;font-weight:600}
.stg-pick-n.zero{opacity:.5}
.stg-pick-n.bad{background:var(--bad-bg);color:var(--bad)}
.stg-pick-tick{flex:none;width:18px;height:18px;color:var(--accent-2)}

/* ===== A ROW OF CHIPS ON A PHONE (29 Sep 2026) =====
   Four rows of chips scroll sideways on a phone, one line each: a queue's
   steps (stage.js), the lanes on the Home screen (command.js), a Records
   filter group and the Archive's reasons (records.js) and the Settings tabs
   (settings/index.js). They share the scroll by one class, chip-row: no
   wrapping, no scrollbar, a flick that stays in the row, and room kept at
   the far end, where App.UI.chipIntoView stops the chip in use short of the
   fade. The fade is the sign there is more: while chips lie past the right
   edge it softens that edge, and it clears as the row reaches its end.
   It is tied to the row's own scroll, so a browser that cannot tie an
   animation to a scroll shows the row as it was, without one. Each row
   keeps its own spacing where it is styled. */
@media (max-width:640px){
  .chip-row{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-padding-inline-end:24px;
    scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .chip-row::-webkit-scrollbar{display:none}
}
@supports (animation-timeline:scroll()){
  @media (max-width:640px){
    .chip-row{mask-image:linear-gradient(to left,transparent,#000 24px);mask-size:calc(100% + 24px) 100%;
      mask-repeat:no-repeat;mask-position:0 0;animation:chip-more linear both;animation-timeline:scroll(self inline)}
  }
}
@keyframes chip-more{0%,90%{mask-position:100% 0}to{mask-position:0 0}}

/* ===== TABLES AS CARDS ON A PHONE (29 Sep 2026) =====
   Records and Settings draw their tables as a card per row on a phone, by
   one class, phone-cards. The heads go, each row is a line of its cells
   that wraps, and the row's ::before and ::after are the breaks between
   its lines, placed by each table's own order rules (RECORDS ON A PHONE
   and SETTINGS ON A PHONE, further down, which also set what differs: a
   Records card is tighter and cuts each cell to one line). A word a card
   shows beside a value whose column head it hides is App.UI.word's
   .card-k, which a desktop never shows. A row with the hidden attribute
   stays hidden: nothing here gives it a display. The Inspectors tables
   stack by the width of their own column instead (a container query, at
   800 and 480 wide), a different question from the phone's, so they keep
   their own rules. */
.card-k{display:none}
@media (max-width:640px){
  .tablewrap:has(> table.phone-cards){overflow:visible}
  table.grid.phone-cards{display:block;min-width:0;width:100%}
  table.grid.phone-cards thead{display:none}
  table.grid.phone-cards tbody{display:block}
  table.grid.phone-cards tbody tr{flex-wrap:wrap;align-items:center;column-gap:10px;padding:12px 14px;
    border-bottom:1px solid var(--line)}
  table.grid.phone-cards tbody tr:not([hidden]){display:flex}
  table.grid.phone-cards tbody tr:last-child{border-bottom:0}
  table.grid.phone-cards tbody td{display:block;min-width:0;padding:0;border:0}
  table.grid.phone-cards tbody td[colspan]{flex:1 1 100%}
  table.grid.phone-cards tbody tr::before,table.grid.phone-cards tbody tr::after{content:"";flex-basis:100%;height:8px}
  table.grid.phone-cards .card-k{display:inline}
  /* Text spend: the business or the month and its cost on the first line,
     the counts under them, each with its word (look audit, 6 Oct 2026) */
  table.grid.sp-grid tbody td.sp-name{order:1;flex:1 1 auto}
  table.grid.sp-grid tbody td.sp-cost{order:2;margin-left:auto;font-weight:700}
  table.grid.sp-grid tbody tr::before{order:3;height:4px}
  table.grid.sp-grid tbody td.sp-n{order:4;font-size:12px;color:var(--muted)}
  table.grid.sp-grid tbody td.sp-n .card-k{font-family:var(--font)}
  table.grid.sp-grid tbody tr::after{order:5;height:0}
}

/* ===== RECORDS ON A PHONE (28 Sep 2026) =====
   Records was the desktop's tables at 390 wide: two rows of filters and
   three rows of chips above the first car, and every table scrolling
   sideways with one column in sight. On a phone the page's line under the
   title goes, the four tabs share the width, and the filters fold behind
   one Filters button beside the search (records.js, filterBar), its count
   saying how many are on; unfolded, each group of chips is one row that
   scrolls sideways. Every table becomes a card per row with the few facts
   that matter, placed by order: the car and what was paid, who sold it and
   when, then where it went and Open; a client's name and last contact, then
   the number and what they sold us; a document and its state, the car, the
   seller and the day; a lost deal's seller and Revive, the car, then where
   it stopped, why and when. The ::before and ::after of each row are the
   line breaks between its lines (TABLES AS CARDS ON A PHONE). The rc-
   classes on the cells, the folded group and the Filters button are all a
   desktop has of this, and none of them shows there. */
.rec-more-btn{display:none}
span.rec-more{display:contents}
@media (max-width:640px){
  /* the header: the title, then the tabs across the width */
  .rec-page:not(.rec-client) > .page-h .sub{display:none}
  .rec-page > .page-h{gap:10px;margin-bottom:12px}
  .rec-page > .page-h > .right > .seg{display:flex;width:100%}
  .rec-page > .page-h > .right > .seg button{flex:1 1 auto;padding:9px 6px}

  /* the search and the Filters button; the rest folded until it is tapped */
  .rec-filters .rec-bar{gap:8px;margin-bottom:8px}
  .rec-page .rec-q{flex:1 1 0;min-width:0;height:40px}
  .rec-more-btn{display:inline-flex;position:relative;flex:none;width:40px;height:40px;padding:0;gap:0;
    justify-content:center;border-color:var(--line-2);background:var(--surface);color:var(--text-2)}
  .rec-more-btn[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
  .rec-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;
    font-size:11px;font-weight:700}
  .rec-filters:not(.open) .rec-more{display:none}
  /* unfolded, the filters are a panel round the search: the first row's
     folded group takes a line of its own under it */
  .rec-filters.open{margin-bottom:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
  .rec-filters.open .rec-bar:last-child{margin-bottom:0}
  .rec-filters.open span.rec-more{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
  .rec-filters .rec-date{flex:1 1 40%;height:40px}
  /* a group of chips, and the Archive's reasons: one row that scrolls
     sideways (chip-row, A ROW OF CHIPS ON A PHONE) */
  .rec-filters .rec-bar .seg,.rec-chips .seg{max-width:100%;scroll-padding-inline-start:4px}
  .rec-filters .rec-bar .seg button,.rec-chips .seg button{flex:none;padding:9px 12px}
  .rec-kpis{margin-bottom:8px}

  /* every table a card per row (phone-cards), a Records card's lines
     closer together and each cell cut to one line, bar the buttons, whose
     focus ring the cut would clip */
  table.grid.rec-grid tbody tr{padding:10px 14px}
  table.grid.rec-grid tbody td{font-size:13px}
  table.grid.rec-grid tbody td:not(.act){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.grid.rec-grid tbody tr::before,table.grid.rec-grid tbody tr::after{height:4px}
  table.grid.rec-grid .cust{max-width:none}
  table.grid.rec-grid .veh-line{gap:6px;font-size:13.5px}
  /* the car a client was found by stays a line under the name, not over it */
  table.grid.rec-people .rc-found{font-size:12px}
  table.grid.rec-grid .veh-line .rego{font-size:10.5px;padding:1px 5px}
  table.grid.rec-grid td.act .btn.sm{padding:7px 12px}
  table.grid.rec-grid td.rc-brand:not(:has(.ev)),table.grid.rec-grid td.rc-src,table.grid.rec-grid td.none{display:none}
  table.grid.rec-grid td.rc-date{font-family:var(--font);font-size:12px;color:var(--muted)}

  /* a client: the name and when we last heard, then the number and what they sold us */
  table.grid.rec-people td.rc-who{order:1;flex:1 1 0}
  table.grid.rec-people td.rc-who .sub,table.grid.rec-people .rc-em,table.grid.rec-people td.rc-contact br{display:none}
  table.grid.rec-people td.rc-who .pill{margin-left:6px;padding:2px 7px;font-size:10.5px}
  table.grid.rec-people td.rc-last{order:2;font-family:var(--font);font-size:12px;color:var(--muted)}
  table.grid.rec-people tbody tr::before{order:3}
  table.grid.rec-people td.rc-contact{order:4;flex:1 1 0}
  table.grid.rec-people td.rc-contact .sub{font-size:12.5px;color:var(--text-2)}
  table.grid.rec-people td.rc-leads,table.grid.rec-people td.rc-cars,table.grid.rec-people td.rc-paid{order:5;
    font-family:var(--font);font-size:12px;color:var(--muted)}
  table.grid.rec-people td.rc-paid{font-weight:700;color:var(--text)}
  table.grid.rec-people tbody tr::after{order:6;height:0}

  /* a document: its name, its state and the PDF, then the car, then the seller and the day */
  table.grid.rec-docs td.rc-doc{order:1;flex:1 1 0}
  table.grid.rec-docs td.rc-doc .sub{display:none}
  table.grid.rec-docs td.rc-status{order:2}
  table.grid.rec-docs td.act{order:3}
  table.grid.rec-docs tbody tr::before{order:4}
  table.grid.rec-docs td.rc-car{order:5;flex:1 1 100%}
  table.grid.rec-docs td.rc-who{order:6;flex:1 1 0;margin-top:3px;font-size:12.5px;color:var(--text-2)}
  table.grid.rec-docs td.rc-date{order:7;margin-top:3px}
  table.grid.rec-docs tbody tr::after{order:8;height:0}
  table.grid.rec-docs .pill{padding:3px 9px;font-size:11.5px}

  /* a lost deal: the seller and Revive, the car, then where it stopped, why and when */
  table.grid.rec-archive td.rc-who{order:1;flex:1 1 0}
  table.grid.rec-archive td.rc-who .cust{font-weight:600}
  table.grid.rec-archive td.rc-who .sub,table.grid.rec-archive td.rc-lead b{display:none}
  table.grid.rec-archive td.act{order:2}
  table.grid.rec-archive tbody tr::before{order:3}
  table.grid.rec-archive td.rc-car{order:4;flex:1 1 100%;margin-bottom:5px}
  table.grid.rec-archive td.rc-status{order:5}
  table.grid.rec-archive td.rec-reason{order:6;flex:1 1 0;max-width:none;font-size:12.5px}
  table.grid.rec-archive td.rc-lead{order:7}
  table.grid.rec-archive td.rc-lead .sub{margin:0;font-size:12px}
  table.grid.rec-archive tbody tr::after{order:8;height:0}

  /* a client's history: the car and Open, then its stage, number and day,
     then how it ended when it did */
  table.grid.rec-hist td.rc-car{order:1;flex:1 1 0}
  table.grid.rec-hist td.act{order:2}
  table.grid.rec-hist tbody tr::before{order:3}
  table.grid.rec-hist td.rc-status{order:4}
  table.grid.rec-hist td.rc-lead{order:5;font-size:12px;color:var(--muted)}
  table.grid.rec-hist td.rc-brand{order:6}
  table.grid.rec-hist td.rc-date{order:7;margin-left:auto}
  table.grid.rec-hist tbody tr::after{order:8}
  table.grid.rec-hist tbody tr:has(td.rc-out.none)::after{display:none}
  table.grid.rec-hist td.rc-out{order:9;flex:1 1 100%}
  table.grid.rec-hist .pill{padding:3px 9px;font-size:11.5px}

  /* a client's page: the figures under the name, and each deal's card with
     its car on the first line beside Open the deal and the plate under it */
  .rec-client > .page-h .right{gap:6px;justify-content:flex-start}
  .rec-client .rec-kpis .pill{padding:3px 9px;font-size:11.5px}
  .rec-client .rec-deal{margin-top:12px}
  .rec-deal > .panel-h{flex-wrap:wrap;align-items:center;row-gap:4px;padding:12px 14px}
  .rec-deal > .panel-h h3{order:1;flex:1 1 0;min-width:0}
  .rec-deal > .panel-h .right{order:2;margin-left:auto}
  .rec-deal > .panel-h::after{content:"";order:3;flex-basis:100%;height:0}
  .rec-deal > .panel-h .rego{order:4}
  .rec-deal > .panel-h .sub{order:5}
  .rec-deal .panel-b{padding:12px 14px}
}

/* ===== REPORTS ON A PHONE (28 Sep 2026) =====
   Reports fitted a phone already, loosely: the brand switch and All time
   each took a line of their own under a title with a sentence under it,
   the four figures were cards of a desktop's size, and Pending paperwork
   was cut in the stage bars. On a phone the title shares its line with All
   time, the switch takes the width under it, the figures are tighter and
   stay two across even on the smallest phone, and each bar row gives its
   name the room it needs before the bar. A desktop draws none of it. */
@media (max-width:640px){
  .rp-page > .page-h{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .rp-page > .page-h > div:first-child{flex:1 1 auto}
  .rp-page > .page-h .sub{display:none}
  .rp-page > .page-h > .right{display:contents}
  .rp-page > .page-h .rp-note{order:1}
  .rp-page > .page-h .seg-filter{order:2;display:flex;flex:1 1 100%}
  .rp-page > .page-h .seg-filter .segf{flex:1 1 auto;text-align:center;white-space:nowrap;padding:9px 8px}
  .rp-page .cc-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .rp-page .stat{padding:12px 14px}
  .rp-page .stat .n{margin-top:6px;font-size:26px}
  .rp-page .stat .s{margin-top:5px;font-size:11.5px;line-height:1.35}
  .rp-page .rp-cols{gap:12px}
  .rp-page .panel-h{padding:12px 14px}
  .rp-page .barrow{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 40px;gap:10px;padding:9px 14px}
  .rp-page .rp-brow{padding:10px 14px}
  .rp-page .rp-brow .barrow{padding:0}
  .rp-page .rp-foot{padding:11px 14px}
}

/* ===== SETTINGS ON A PHONE (28 Sep 2026) =====
   On a phone the tabs were five rows of links, the line under a tab's
   heading ran to fourteen lines, and the tables scrolled sideways with a
   column and a half in sight, the SLA boxes and the Leads counts off the
   edge. Here the title shares its line with Reload data, the tabs are one
   row of chips that scrolls sideways with the one in use brought into view
   (settings/index.js), and a long line under a heading folds to three with
   a tap for the rest. Team, its invites, Templates, Wholesalers and the SLA
   thresholds are a card per row, their cells placed by order and a word
   beside each value a column head used to name; Sources fits as it is;
   Text spend's two tables scroll inside their own box with the first column
   pinned; an empty table fits the box so its sentence is in sight; every
   form takes one column with its labels above; each integration keeps its
   name whole with its state under it; a switch is a thumb's target though
   it looks the same. Inspectors, Automations and My details were already
   drawn for a phone and are left alone. A desktop shows none of it: the
   words are hidden there, the cells only gain classes, and the fold is only
   ever drawn on a phone. */
@media (max-width:640px){
  /* the header, and the tabs as one row of chips */
  .set-page > .page-h{flex-direction:row;align-items:center;gap:10px;margin-bottom:12px}
  .set-page > .page-h > div:first-child{flex:1 1 auto}
  .set-page > .page-h .sub{display:none}
  .set-page > .page-h .right{flex:none}
  .set-page > .page-h .right .btn{padding:8px 12px;font-size:12.5px}
  .set-page .set-grid{gap:14px}
  .set-page .set-nav{gap:6px;margin:0 -14px;padding:1px 14px;scroll-padding-inline-start:14px}
  .set-page .set-nav a{flex:none;white-space:nowrap;padding:8px 12px;border-radius:999px;
    border-color:var(--line-2);background:var(--surface)}
  .set-page .set-nav a.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}

  .set-head{margin-bottom:12px}

  /* forms: one column, labels above, the button the width */
  .set-page .set-add{flex-direction:column;align-items:stretch;padding:12px 14px}
  .set-page .set-add .fld{flex:none;min-width:0}
  .set-page .set-add > .btn{justify-content:center}
  /* a switch, and a word that is a button, look the same and are a thumb's target */
  .set-page .tgl::before{content:"";position:absolute;inset:-11px -8px}
  .set-page .tm-mob,.set-page .tm-cust,.set-page button.in-unset{position:relative}
  .set-page .tm-mob::before,.set-page .tm-cust::before,.set-page button.in-unset::before{content:"";position:absolute;inset:-10px -4px}

  /* a table with nothing in it is its sentence alone, in sight in the box */
  .set-page table.grid:has(td[colspan] > .empty){min-width:0}
  .set-page table.grid:has(td[colspan] > .empty) thead{display:none}
  .set-page table.grid.src-grid{min-width:0}
  /* Text spend: tighter tiles. Its two tables are cards now (TABLES AS
     CARDS ON A PHONE, sp-grid), not figures scrolling past a pinned name */
  .set-page .sp-stats{gap:8px}
  .set-page .sp-stats .stat{padding:12px 14px}
  .set-page .sp-stats .stat .n{margin-top:6px;font-size:24px}
  .set-page .sp-stats .stat .s{margin-top:5px;font-size:11.5px}

  /* the card tables are phone-cards (TABLES AS CARDS ON A PHONE); what
     follows is where each one's cells go */

  /* a member: who, and the role; what customers see; the tick, the last
     sign in and the state; then the buttons. A member's devices open as
     a card of their own under theirs. */
  .set-page table.grid.tm-grid tbody tr:nth-last-child(2){border-bottom:0}
  .set-page table.grid.tm-grid td.tm-who{order:1;flex:1 1 0}
  .set-page table.grid.tm-grid td.tm-role-col{order:2}
  .set-page table.grid.tm-grid .tm-role{width:118px;height:36px}
  .set-page table.grid.tm-grid tbody tr::before{order:3}
  .set-page table.grid.tm-grid td.tm-cust-col{order:4;flex:1 1 100%;display:flex;align-items:baseline;gap:8px}
  .set-page table.grid.tm-grid td.tm-cust-col > .card-k{flex:none;font-size:11.5px;color:var(--muted)}
  .set-page table.grid.tm-grid .tm-cust{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .set-page table.grid.tm-grid td.tm-insp-col{order:5;padding:0;text-align:left}
  .set-page table.grid.tm-grid .tm-insp{gap:7px;font-size:12.5px;font-weight:600;color:var(--text-2)}
  .set-page table.grid.tm-grid .tm-ms{justify-content:flex-start;margin-top:2px}
  .set-page table.grid.tm-grid .tm-insp-note{display:inline;margin:0 0 0 6px;max-width:none}
  .set-page table.grid.tm-grid td.tm-seen{order:6;margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
  .set-page table.grid.tm-grid td.tm-status{order:7}
  .set-page table.grid.tm-grid tbody tr::after{order:8}
  .set-page table.grid.tm-grid td.tm-acts-col{order:9;flex:1 1 100%;min-width:0}
  .set-page table.grid.tm-grid .tm-acts{flex-direction:row;justify-content:flex-start;gap:8px}
  /* Disable and Delete last on the card, as the laptop keeps Disable at the
     end of its line, never between Devices and the reset (look audit,
     6 Oct 2026) */
  .set-page table.grid.tm-grid .tm-acts > [data-action="set:member:reset"]{order:1}
  .set-page table.grid.tm-grid .tm-acts > [data-action="set:member:toggle"]{order:2}
  .set-page table.grid.tm-grid .tm-acts > [data-action="set:member:delete"]{order:3}
  .set-page table.grid.tm-grid .tm-acts .btn{flex:1 1 auto;justify-content:center}
  .set-page table.grid.tm-grid tr.tm-sess:not([hidden]){display:block;padding:0}
  .set-page table.grid.tm-grid tr.tm-sess::before,.set-page table.grid.tm-grid tr.tm-sess::after{display:none}
  .set-page table.grid.tm-grid tr.tm-sess > td{display:block}
  /* an invite nobody has used: who and what for, then when it runs out and its two buttons */
  .set-page table.grid.tm-inv td.tm-who{order:1;flex:1 1 0}
  .set-page table.grid.tm-inv td.tm-for{order:2}
  .set-page table.grid.tm-inv tbody tr::before{order:3}
  .set-page table.grid.tm-inv td.tm-exp{order:4;flex:1 1 0}
  .set-page table.grid.tm-inv td.tm-inv-acts{order:5}
  .set-page table.grid.tm-inv tbody tr::after{order:6;height:0}

  /* a saved message: its name, how often it is picked and its buttons, then the words */
  .set-page table.grid.tg-grid td.tg-name{order:1;flex:1 1 0;overflow:hidden;text-overflow:ellipsis}
  .set-page table.grid.tg-grid td.tg-chan{display:none}
  .set-page table.grid.tg-grid td.tg-used{order:2;font-family:var(--font);font-size:12px;color:var(--muted)}
  .set-page table.grid.tg-grid td.tg-acts{order:3}
  .set-page table.grid.tg-grid tbody tr::before{order:4}
  .set-page table.grid.tg-grid td.tg-body{order:5;flex:1 1 100%}
  .set-page table.grid.tg-grid tbody tr::after{order:6;height:0}

  /* a wholesaler: the name and the bids in, then the mobile and the contact */
  .set-page table.grid.ws-grid td.ws-name{order:1;flex:1 1 0}
  .set-page table.grid.ws-grid td.ws-bids{order:2;font-family:var(--font);font-size:12px;color:var(--muted)}
  .set-page table.grid.ws-grid tbody tr::before{order:3;height:4px}
  .set-page table.grid.ws-grid td.ws-phone{order:4}
  .set-page table.grid.ws-grid td.ws-contact{order:5;flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .set-page table.grid.ws-grid tbody tr::after{order:6;height:0}

  /* a stage's thresholds: the stage (and its note), then the two boxes, each with its name */
  .set-page table.grid.sla-grid td.sla-st{order:1;flex:1 1 100%}
  .set-page table.grid.sla-grid .sla-note{margin:4px 0 0 26px;max-width:none}
  .set-page table.grid.sla-grid tbody tr::before{display:none}
  .set-page table.grid.sla-grid td.sla-w,.set-page table.grid.sla-grid td.sla-c{order:2;flex:1 1 0;display:flex;align-items:center;
    gap:6px;margin-top:8px;text-align:left}
  .set-page table.grid.sla-grid td.sla-w .card-k,.set-page table.grid.sla-grid td.sla-c .card-k{margin-right:auto;
    font-family:var(--font);font-size:12px;color:var(--muted)}
  .set-page table.grid.sla-grid .sla-inp{width:56px}
  /* the unit a fixed width, so the boxes line up row to row whatever it is */
  .set-page table.grid.sla-grid .sla-unit{flex:none;width:4ch}
  .set-page table.grid.sla-grid tbody tr::after{order:3;height:0}

  /* an integration: its name whole, its state and provider under it, its control at the right */
  .set-page .set-row{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;
    grid-template-areas:"ri rt rt ctl" "ri live meta ctl";column-gap:10px;row-gap:4px;padding:12px 14px}
  .set-page .set-row .ri{grid-area:ri;align-self:start}
  .set-page .set-row .rt{grid-area:rt}
  .set-page .set-row .int-live{grid-area:live}
  .set-page .set-row .rmeta{grid-area:meta;font-size:11.5px}
  .set-page .set-row > .tgl,.set-page .set-row > .btn,.set-page .set-row > .int-acts{grid-area:ctl}
  /* a button is wider than a switch, and beside the words it squeezed them
     to a few to a line: under the state instead, where they keep the width */
  .set-page .set-row:has(> .btn),.set-page .set-row:has(> .int-acts){grid-template-areas:"ri rt rt rt" "ri live meta meta" "ri ctl ctl ctl"}
  .set-page .set-row > .btn,.set-page .set-row > .int-acts{justify-self:start;margin-top:4px}
  .set-page .set-row > .int-acts{justify-content:flex-start}
}

/* ===== THE CAR'S OTHER TABS ON A PHONE (28 Sep 2026) =====
   The Overview was drawn for a phone the day before; its three other tabs
   and the drawer mostly fitted, with three things wrong. The Messages tab's
   card was held to a desktop's height and a floor of 60vh, so the composer
   sat a screen below the car's header and the thread was a scroll box
   inside a scrolling page. On a phone the card's height is measured to end
   above the tab bar (cockpit.js, fitThread, again whenever the header or
   the screen changes height), the floor goes, and the newest message lands
   above the composer with nothing to scroll first. While a box is being
   typed in, the tab bar steps aside: it is the one bar fixed to the foot
   of the screen, and with the keyboard up it could only sit over what is
   being written. And the Paperwork tab's controls were a
   desktop's size: the EFT and Cash switch, Attach and Replace, the small
   text buttons; they are a thumb's target now, most of them without
   looking any bigger. Files and the drawer are left as they were. */
@media (max-width:640px){
  .ck-right.full{min-height:0}
  .ck-msgs-note{margin-top:8px}
  /* a text box is App.UI.TEXT_BOX, spelled out here as it is there */
  body:has(:is(textarea,[contenteditable]:not([contenteditable="false"]),input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])):focus) .tabbar{display:none}

  .pwh{padding:14px}
  .pwc-b{padding:12px 14px}
  .pw-terms .seg button{padding:9px 16px}
  .pw-chk .pw-doc-acts .btn{padding:7px 10px}
  .pw-mini,.pw-vbtn,.pw-cp,.ev-cp{position:relative}
  .pw-mini::before,.pw-vbtn::before,.pw-cp::before,.ev-cp::before{content:"";position:absolute;inset:-10px -6px}
}

/* ===== DIALOGS ON A PHONE (28 Sep 2026) =====
   The booking dialog, Buy this car and the car details were drawn for a
   phone already, each a full screen with its header and its buttons held
   still and the form scrolling between them. Every other dialog scrolled as
   one box, its header and its buttons with it, so on a long form the main
   button sat below the screen. On a phone every dialog with a body now
   holds its header and its buttons and scrolls the body between them: with
   the keyboard down the X and the main button are in sight, and a field
   being typed in scrolls into sight inside the body, never under the
   buttons. The spacing is a phone's. A company's report link is one box, a
   dialog near the top like these (the booking section leaves it out of its
   full screen), and its car's line folds so the day of the booking takes a
   line of its own under the car instead of running past the card. A
   document's preview is the one dialog whose body is a frame: it takes the
   height a dialog may, and the frame fills its body, so the frame is the
   only thing that scrolls. */
@media (max-width:640px){
  .modal:has(> .modal-b){display:flex;flex-direction:column;overflow:hidden}
  .modal:has(> .modal-b) > .modal-h,.modal:has(> .modal-b) > .modal-f{flex:none}
  .modal:has(> .modal-b) > .modal-b{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  .modal-h{padding:12px 12px 12px 16px}
  .modal-b{padding:16px}
  .modal-f{padding:12px 16px}
  .modal.ib-report .ib-car{flex-wrap:wrap}
  .modal.ib-report .ib-car .km{flex-basis:100%;margin-left:28px}
  .modal:has(> .modal-b.pw-prev){height:100%}
  .modal:has(> .modal-b) > .modal-b.pw-prev{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}
  .modal-b.pw-prev iframe{flex:1 1 auto;height:auto;min-height:0}
}

/* ===== SEARCH ON A PHONE (28 Sep 2026) =====
   The search on the Home screen lists what it finds in the Home screen's
   own rows, whose first line is the seller and the car: on a phone the car
   was cut after a word or two ("2017 Toyota Landcruiser P...") when the car
   is usually what was searched for. On a phone a found lead reads in two
   lines instead: the seller and where it is, then the whole car, on a line
   of its own (a second only for a car too long for one). The row's two
   lines stand aside (display:contents) so their pieces can share lines in
   that order. The day's rows are left as the owner approved them. The sign
   in and its code screen are drawn by screens/login.js, whose own styles
   hold their phone rule. */
@media (max-width:640px){
  .hm-found-h + .hm-lane .hm-bd{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;row-gap:2px}
  .hm-found-h + .hm-lane .hm-l1{display:contents}
  .hm-found-h + .hm-lane .hm-who{order:1;flex:0 1 auto;min-width:0;max-width:none}
  .hm-found-h + .hm-lane .hm-l1 .brandtag{order:2}
  .hm-found-h + .hm-lane .hm-l2{order:3;flex:none;margin:0 0 0 auto}
  .hm-found-h + .hm-lane .hm-car{order:4;flex:1 1 100%;white-space:normal;font-size:12.5px;color:var(--text-2)}
}

/* ===== THE HOME SCREEN ON A PHONE (28 Sep 2026) =====
   The approved phone layout. Leads today comes first, then the next
   seller to ring as a card of its own, then the speed to first call; the
   lanes follow as compact cards under a bar of chips that stays below the
   status bar and jumps to each of them; then Later today, the day's timed
   calls and jobs in the order the day brings them; then the team, the
   sources and the last seven days. command.js draws a phone its own order
   (App.UI.isPhone) and these rules size it, and every call is a thumb
   sized button.

   The header. A phone 390 wide cannot hold the date, the switch, the
   search and New lead on one line, so the date keeps the search and New
   lead (a plus) beside it and the switch takes the line under them, the
   whole width, each side with its count as on a desktop. The open search
   takes a line of its own between the two. */
@media (max-width:640px){
  .page.home{padding:6px 14px 24px}
  .hm-h{align-items:center;gap:10px 6px;margin-bottom:12px}
  .hm-title{flex:1 1 auto}
  .hm-h h1{font-size:24px}
  .hm-d-long,.hm-upd{display:none}
  .hm-d-short{display:inline}
  .hm-live{margin-top:4px;font-size:12.5px}
  .hm-tools{display:contents}
  .hm-find{order:1}
  .hm-new,.hm-qb{order:2}
  .hm-whose{order:4;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr}
  .hm-whose button{justify-content:center;padding:8px 11px}
  .hm-find .iconbtn,.hm-new,.hm-qb{width:40px;height:40px}
  .hm-new,.hm-qb{padding:0;gap:0;justify-content:center}
  .hm-new .hm-new-t,.hm-qb .hm-new-t{display:none}
  .hm-find.open{order:3;flex:1 0 100%}
  .hm-find.open .searchbox input{width:100%;height:44px}

  /* each zone of the top card is a card of its own */
  .hm-band{display:block;background:none;border:0;box-shadow:none}
  .hm-zone{margin-bottom:12px;padding:14px 16px 12px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
  .hm-next{border-radius:var(--radius);background:var(--surface)}
  .hm-nums{gap:22px;margin-top:8px}
  .hm-num .hm-big{font-size:30px}
  .hm-speed-fig{justify-content:space-between;min-height:44px;margin-top:6px}
  .hm-speed-fig .hm-big{font-size:44px}
  .hm-speed-fig .hm-delta{align-items:flex-end;padding-bottom:4px;text-align:right}
  .hm-nwho{margin-top:10px}
  .hm-dial{padding:13px 14px;font-size:14.5px;border-radius:13px}
  /* Then, on one line: the next two first names and their waits */
  .hm-then.inline{display:flex;align-items:center;gap:18px}
  .hm-then.inline ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-width:0}
  .hm-then.inline li{gap:6px;margin:0;white-space:nowrap}
  .hm-then.inline li b{margin-left:0}

  /* the chips over the lanes, which stay under the status bar */
  .hm-sect{margin:16px 2px 8px}
  .hm-jump{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;margin:0 -14px 6px;padding:6px 0 8px;background:var(--bg)}
  .hm-chips{gap:8px;padding:4px 14px;margin-block:-4px;scroll-padding-inline-start:14px}
  .hm-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:999px;
    border:1px solid var(--line-2);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
  .hm-chip b{font-weight:700;color:var(--muted)}
  /* a picked chip is the soft purple every picked chip and step is */
  .hm-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
  .hm-chip.on b{color:var(--accent-2)}
  .hm-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--bad)}

  /* the lanes, one under another */
  .hm-lanes{display:block}
  .hm-lane{margin-bottom:12px;scroll-margin-top:calc(58px + env(safe-area-inset-top,0px))}
  .hm-main{grid-template-columns:52px minmax(0,1fr);padding:10px 10px 10px 14px}
  .hm-call{width:40px;height:40px;margin-right:12px}
  .hm-rest{margin:0 2px 12px}

  /* Later today: a time down the left, and what happens at it */
  .hm-later{margin-bottom:12px;scroll-margin-top:calc(58px + env(safe-area-inset-top,0px))}
  .hm-later .hm-sect{margin-top:4px}
  .hm-agenda{list-style:none;display:flex;flex-direction:column;gap:8px}
  .hm-slot{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start}
  .hm-hh{padding-top:10px;font-size:15px;font-weight:700;line-height:1.1}
  .hm-hh small{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--muted)}
  /* a call in the ink, a job in the violet, and a job at risk in the
     colour of what is wrong with it */
  .hm-ev{display:block;min-width:0;padding:10px 12px;background:var(--surface);border:1px solid var(--line);
    border-left:3px solid var(--accent-mid);border-radius:var(--radius-sm)}
  .hm-ev.call{border-left-color:var(--text-2)}
  .hm-ev.on{border-left-color:var(--accent)}
  .hm-ev.warn{border-left-color:var(--warn)}
  .hm-ev.bad{border-left-color:var(--bad)}
  .hm-ev .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .hm-ev .t1{display:flex;align-items:baseline;gap:8px;min-width:0;margin-top:2px}
  .hm-ev .t1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
  .hm-in{flex:none;margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
  /* what the slot is about takes two lines before it is cut */
  .hm-ev .t2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:1px;overflow:hidden;
    font-size:12.5px;line-height:1.4;color:var(--text-2)}
  .hm-later .hm-more{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}

  /* the team, the sources and the week, one under another */
  .hm-lower{display:block;margin-top:0}
  .hm-lower .hm-card{margin-bottom:12px}
  .hm-card{padding:14px 16px}
  /* the figures' column fits "median 90 min" on its line: at 78px the
     unit fell to a line of its own in every row (look audit, 6 Oct 2026) */
  .hm-trow{grid-template-columns:92px minmax(0,1fr) 96px;gap:10px}
  .hm-tstat{font-size:11.5px}
  .hm-tstat b{white-space:nowrap}
  .hm-found-h{flex-wrap:wrap}
}

/* ===== PAY AND COLLECT (29 Sep 2026) ===== */
/* The Payment card's tick: the seller's bank details, confirmed with the
   seller (mockup bank-1440.png). */
.pb-card .pwc-b{padding:14px 15px 15px}
.pb-sum{margin-top:3px;font-size:12px;color:var(--muted)}
/* the figures moved after the seller signed: the card pays on the contract,
   and says so */
.pb-moved{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:9px 11px;border-radius:8px;
  background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600;line-height:1.45}
.pb-moved .ic{width:14px;height:14px;flex:none;margin-top:1px}
.pb-bank{padding:6px 11px 0;overflow:hidden}
.pb-bank .pw-bank-row{min-height:28px}
.pb-bank .pw-bank-row .pw-mini + .pw-mini{padding-left:10px}
.pb-bank .pw-bank-v{white-space:nowrap}
.pb-foot{display:flex;align-items:flex-start;gap:10px;margin:6px -11px 0;padding:11px 11px 12px;border-top:1px solid var(--line);background:var(--surface)}
button.pb-foot{width:calc(100% + 22px);border-left:0;border-right:0;border-bottom:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
/* the button sits flush inside the account's frame, which clips a ring
   drawn outside it, so its ring is drawn inside */
button.pb-foot:focus-visible{outline-offset:-2px}
button.pb-foot:hover .pb-box{box-shadow:inset 0 0 0 1.5px var(--accent)}
.pb-box{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;color:#fff}
.pb-box.on{background:var(--ok);box-shadow:none}
.pb-box .ic{width:12px;height:12px;stroke-width:3}
.pb-t{flex:1;min-width:0}
.pb-t b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text)}
.pb-t b .ic{width:14px;height:14px}
.pb-t > span{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted)}
.pb-foot.ok{background:var(--ok-bg)}
.pb-foot.ok .pb-t b{color:var(--ok)}
.pb-foot.ok .pb-t > span{color:var(--text-2)}
.pb-foot.warn{background:var(--warn-bg)}
.pb-foot.warn .pb-t b{color:var(--warn)}
.pb-foot.warn .pb-t > span{color:var(--text-2)}
.pb-foot.warn .pb-box{box-shadow:inset 0 0 0 1.5px var(--warn)}
.pb-undo{margin-left:auto;align-self:flex-start;color:var(--text-2)}
.pb-was{box-shadow:inset 3px 0 0 var(--warn);margin:0 -11px;padding-left:11px;padding-right:11px;background:color-mix(in srgb,var(--warn-bg) 60%,transparent)}
.pb-chg{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn)}
.pb-after{margin-top:10px;font-size:12px;line-height:1.45;color:var(--muted)}
.pb-after.ok{color:var(--ok);font-weight:600}
.pb-after.warn{color:var(--warn);font-weight:600}
/* the account read back in the dialog, where no tick closes its frame */
.pb-read{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--text-2)}
.pb-read + .pb-bank{padding-bottom:6px}
/* on a phone the card keeps every other card's padding */
@media (max-width:640px){
  .pb-card .pwc-b{padding:12px 14px}
}
/* ---- the car's Pay & collect step card (app/screens/_paycollect.js):
   mockups card-1440.png and card-states-1680.png. Three parts in the step
   card's tinted panel, the pickup, paid and collected, then Finish. ---- */
.ck-hero .ck-act.pc-act{gap:0;padding:2px 14px 14px}
.pc-part{position:relative;padding:12px 0 12px 32px}
.pc-part + .pc-part{border-top:1px solid var(--line)}
/* each part's mark: its number while it is to do, a tick once done, the
   calendar while a pickup is booked, the alert once its window has passed */
.pc-mk{position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1}
.pc-mk .ic{width:12px;height:12px;stroke-width:2.8}
.pc-mk.done{background:var(--ok);color:#fff}
.pc-mk.set{background:var(--accent-soft);color:var(--accent-2);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 40%,transparent)}
.pc-mk.set .ic{stroke-width:2.2}
.pc-mk.todo{background:var(--surface);color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pc-mk.late{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.pc-ph{display:flex;align-items:center;gap:8px;min-height:22px}
.pc-ph b{font-size:13.5px;font-weight:700;letter-spacing:-.005em;color:var(--text)}
.pc-ph .opt{font-size:11.5px;font-weight:500;color:var(--muted)}
.pc-ph .insp-chip{margin-left:auto}
.pc-pb{margin-top:6px}
/* rows inside a part carry no hairlines of their own: the parts have them */
.ck-hero .ck-act .pc-part .ck-rows{gap:0}
.ck-hero .ck-act .pc-part .ck-row{padding:3px 0;border-bottom:0;align-items:baseline}
.ck-hero .ck-act .pc-part .ck-row .k{flex:0 0 96px;font-size:10.5px}
.ck-hero .ck-act .pc-part .ck-row .v{font-size:12.5px}
.ck-hero .ck-act .pc-part .ck-row .v.mono{font-size:12px;letter-spacing:.01em}
.pc-line{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.pc-btns{display:flex;gap:8px;margin-top:9px}
/* what went out for the pickup as it stands, and its two quiet controls */
.pc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:8px}
.pc-sent{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ok);white-space:nowrap}
.pc-sent .ic{width:12px;height:12px;stroke-width:2.6}
.pc-sent.warn{color:var(--warn)}
.pc-foot .sp{flex:1}
/* Change and Cancel stay together, wrapping to a line of their own */
.pc-ctl{display:inline-flex;gap:12px}
.pc-link{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;color:var(--accent-2);cursor:pointer}
.pc-link.mute{color:var(--muted);font-weight:600}
/* Paid: a receipt of two lines, the seller's money and the financier's */
.pc-pay{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:12px;row-gap:5px;align-items:baseline}
.pc-pr{display:contents}
.pc-who{font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.pc-amt{font-size:13px;font-weight:800;color:var(--text);text-align:right;white-space:nowrap}
.pc-how{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-how .mono{font-size:11.5px}
.pc-when{font-size:11.5px;color:var(--muted);white-space:nowrap;text-align:right}
.pc-when .btn{margin:-4px 0}
.pc-note{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.pc-note.warn{color:var(--warn);font-weight:600}
/* Finish: the stage's own move, closed until it is the car's next one,
   and under it what it waits on and where the car goes */
.pc-finish{margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
.pc-finish > .btn{min-height:40px}
.pc-finish > .btn:disabled{background:var(--surface);border-color:var(--line-2);color:var(--muted)}
.pc-fnote{margin-top:7px;font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
.pc-finish .pc-btns{justify-content:center}
@media (max-width:640px){
  .ck-hero .ck-act.pc-act{padding:0 12px 12px}
  .pc-part{padding:11px 0 11px 30px}
  .pc-mk{top:11px}
  /* a part's rows are a label column with the value beside it, so a long
     value wraps under itself, never under the label */
  .ck-hero .ck-act .pc-part .ck-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;padding:3px 0}
  .ck-hero .ck-act .pc-part .ck-row .v{text-align:left}
  /* the window's day over its times */
  .pc-when-v > span{display:block}
  .pc-when-v .pc-dot{display:none}
  /* the receipt two lines a payee: who and the figure, then how and when */
  .pc-pay{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px}
  .pc-pr .pc-how{grid-column:1 / 3;font-size:11.5px;color:var(--muted)}
  .pc-pr .pc-when{grid-column:3}
  .pc-pr .pc-amt{grid-column:3}
  /* a phone's taller button sits in its line rather than over the next */
  .pc-pr .pc-when .btn{margin:3px 0}
  .pc-foot{gap:4px 10px}
  /* Change and Cancel a thumb's target without looking any bigger, as the
     Paperwork tab's small buttons are */
  .pc-link{position:relative}
  .pc-link::before{content:"";position:absolute;inset:-10px -6px}
  /* a part's one move the width of the card, big enough for a thumb */
  .pc-btns .btn{flex:1 1 auto;justify-content:center;min-height:40px}
}
/* ---- the Book pickup dialog (app/screens/_pickup_dialog.js): mockup
   book-1440.png in one column, less the preview of the texts (D14) and
   anyone's bookings beside their name (owner, 29 Sep). The booking
   dialog's frame and pieces (.modal.ib, .ib-car, .ib-where, .ib-yard, the
   hints and the refusals under a field), and on a phone its full screen
   sheet. ---- */
.modal.ib.pk-dlg{max-width:640px}
.pk-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.pk-form .ib-car{margin-bottom:0}
.ib-car .pk-colour{font-size:12px;color:var(--muted);white-space:nowrap}
.pk-slot:empty{display:none}
.pk-form > .rv-bid-err{margin-top:0}
/* the day: today, tomorrow and the three after, then Other, the office's
   calendar, which says a day past them */
.pk-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pk-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:48px;
  padding:0 4px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);
  font:inherit;color:var(--text-2);cursor:pointer}
.pk-day span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pk-day b{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap}
.pk-day.other{flex-direction:row;gap:6px}
.pk-day.other .ic{width:15px;height:15px;flex:none;color:var(--muted)}
.pk-day.other b{font-size:12.5px;font-weight:600;color:var(--text-2)}
.pk-day.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pk-day.on span,.pk-day.on b,.pk-day.on .ic{color:var(--accent-2)}
.pk-day:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pk-date{max-width:220px}
/* the window: from and to on the half hour, and how the seller reads it */
.pk-times{display:grid;grid-template-columns:132px 132px minmax(0,1fr);gap:12px;align-items:end}
.pk-win{padding-bottom:3px;font-size:12px;line-height:1.4;color:var(--muted)}
.pk-win.warn{color:var(--warn);font-weight:600}
/* where: three choices, the seller's greyed out while a car cannot be
   collected from the address on file */
.ib-where.pk-where{grid-template-columns:repeat(3,minmax(0,1fr))}
.pk-where button{min-height:52px}
.pk-where button:disabled{opacity:.55;cursor:not-allowed}
/* who collects: the team a pickup can go to, two across, then Decide later */
.pk-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pk-who-o{display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;padding:7px 10px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font:inherit;color:var(--text);cursor:pointer}
.pk-who-o:hover{border-color:var(--line-2)}
.pk-who-o:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pk-av{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--text-2)}
.pk-av.none{background:transparent;border-style:dashed;color:var(--muted)}
.pk-av.none .ic{width:14px;height:14px}
.pk-who-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-who-t b{display:block;font-size:13px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-role{margin-left:6px;font-size:11px;font-weight:600;color:var(--muted)}
.pk-who-t > span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-who-t > span.pk-flag{color:var(--warn);font-weight:600}
.pk-radio{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--surface)}
.pk-who-o.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pk-who-o.on .pk-av{background:var(--accent);border-color:var(--accent);color:#fff}
.pk-who-o.on .pk-who-t b{color:var(--accent-2)}
.pk-who-o.on .pk-radio{box-shadow:inset 0 0 0 5.5px var(--accent)}
.pk-who-o.off{background:var(--bg-deep);cursor:not-allowed}
.pk-who-o.off .pk-who-t b{color:var(--muted)}
.pk-who-o.off .pk-radio{opacity:.4}
/* a phone: one column in the booking dialog's full screen sheet, where
   every box keeps the phone's 16px floor (RESPONSIVE) */
@media (max-width:640px){
  /* the car on two lines: the car and its plate, then its colour and km */
  .pk-form .ib-car{flex-wrap:wrap;row-gap:4px}
  .pk-form .ib-car::after{content:"";order:1;flex-basis:100%}
  .pk-form .ib-car .pk-colour{order:2;margin-left:28px}
  .pk-form .ib-car .km{order:3}
  .pk-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pk-date{max-width:none}
  .pk-times{grid-template-columns:1fr 1fr}
  .pk-win{grid-column:1/-1;padding-bottom:0}
  .ib-where.pk-where,.pk-who{grid-template-columns:1fr}
  /* Book pickup's two buttons share one row; Change's three keep the
     booking's, Save changes on a row of its own */
  .modal.ib.pk-dlg .modal-f .btn.primary:nth-child(2):last-child{grid-column:auto}
}
/* ---- Bought cars (mockups bought-1440-full.png, bought-390-full.png) ---- */
.bc-page .page-h{margin-bottom:16px}
.bc-band{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,1.08fr);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);margin-bottom:16px}
.bc-zone{min-width:0;padding:16px 20px 14px;display:flex;flex-direction:column}
.bc-zone + .bc-zone{border-left:1px solid var(--line)}
.bc-zh{display:flex;align-items:baseline;gap:8px}
.bc-zm{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.bc-figs{display:flex;align-items:flex-end;gap:22px;margin-top:10px}
.bc-fig{display:flex;align-items:baseline;gap:6px;min-width:0}
.bc-fig .hm-big{font-size:40px}
.bc-fig small{font-size:13px;font-weight:600;color:var(--muted)}
.bc-money{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:proportional-nums;color:var(--text)}
.bc-delta{margin-top:8px;font-size:12.5px;color:var(--muted)}
.bc-delta b{font-weight:700;color:var(--text-2)}
.bc-delta b.ok{display:inline-flex;align-items:center;gap:5px;color:var(--ok)}
.bc-delta .ic{width:14px;height:14px;stroke-width:2.3}
.bc-chart{margin-top:auto;padding-top:10px}
.bc-chart svg{display:block;max-width:100%;height:auto}
.bc-zone:first-child .bc-chart svg{margin:0 auto}
.bc-c .bc-today{fill:var(--accent-soft)}
.bc-c .bc-sq{stroke:none}
.bc-c .bc-sq.pc,.bc-c .bc-bar.pc{fill:var(--up-pc)}
.bc-c .bc-sq.rt,.bc-c .bc-bar.rt{fill:var(--up-rt)}
.bc-c .bc-sq.done,.bc-c .bc-bar.done{fill:var(--up-done)}
.bc-c .bc-fut{fill:var(--faint)}
.bc-c .bc-fut-d{fill:var(--ghost)}
.bc-c .bc-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bc-c .bc-end{font-size:11px;font-weight:600;fill:var(--text-2)}
.bc-c .bc-end .n{font-weight:800;fill:var(--text)}
.bc-c .bc-end.mute{fill:var(--muted)}
.bc-c .bc-end.mute .n{fill:var(--muted);font-weight:700}
.bc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.bc-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bc-legend b{font-weight:700;color:var(--text-2)}
.bc-legend i,.bc-d{display:inline-block;width:9px;height:9px;border-radius:3px;flex:none}
.bc-legend i.pc,.bc-d.pc{background:var(--up-pc)}
.bc-legend i.rt,.bc-d.rt{background:var(--up-rt)}
.bc-legend i.done,.bc-d.done{background:var(--up-done)}
/* the filter row */
.bc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.bc-q{flex:1 1 260px;max-width:320px}
.bc-q input{width:100%;height:34px}
.bc-fl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.seg-filter .segf .bc-d{margin-right:6px;vertical-align:0}
/* the ledger */
table.grid.bc-grid tbody td{padding-top:11px;padding-bottom:11px}
table.grid tbody tr.insp-grp.bc-grp td{padding:9px 16px;font-size:12px}
table.grid tbody tr.insp-grp.bc-grp td.bc-sub{text-align:right;font-family:var(--font);letter-spacing:.02em;
  text-transform:none;font-size:12.5px;font-weight:600;color:var(--muted)}
table.grid tbody tr.insp-grp.bc-grp td.bc-sub b{font-family:var(--mono);color:var(--text)}
.bc-dt{white-space:nowrap}
.bc-dt b{display:block;font-size:13px;font-weight:650;color:var(--text)}
.bc-dt span{font-size:11.5px;color:var(--muted)}
.bc-up{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);padding:3px 9px;border-radius:999px;white-space:nowrap}
.bc-up.unwound{color:var(--bad);border-color:var(--bad)}
.bc-det{margin-top:4px;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* how long a car we still own has been ours, beside where it is up to;
   amber past the hold warning (look audit round 4, 8 Oct 2026) */
.bc-held{margin-left:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.bc-held.warn{color:var(--warn);font-weight:600}
.bc-det.warn{color:var(--warn);font-weight:600}
.bc-det.bad{color:var(--bad);font-weight:600}
.bc-det.ok{color:var(--ok);font-weight:600}
table.grid.bc-grid td.bc-paid{font-size:13.5px;font-weight:700;color:var(--text)}
.bc-go{width:28px;color:var(--faint)}
.bc-go .ic{width:15px;height:15px}
.bc-grid .veh-meta{white-space:nowrap}
/* the phone: Records, with Bought cars as its first tab */
.bcp-sum{margin:0 0 12px;padding:14px 14px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.bcp-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bcp-figs > div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 10px}
.bcp-figs > div:first-child{padding-left:0}
.bcp-figs > div + div{border-left:1px solid var(--line)}
.bcp-figs .cap{font-size:10px}
.bcp-n{margin-top:4px;font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:proportional-nums}
.bcp-m{font-size:12.5px;font-weight:700;color:var(--text-2)}
.bcp-chart{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.bcp-ch{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}
.bcp-ch b{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--ok)}
.bcp-ch b .ic{width:13px;height:13px;stroke-width:2.3}
.bcp-chart svg{display:block;width:100%;height:auto}
.bcp-list{overflow:hidden}
.bcp-wk{display:flex;align-items:baseline;gap:8px;padding:9px 14px;background:var(--bg-deep);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bcp-wk span{margin-left:auto;letter-spacing:0;text-transform:none;font-size:12px;font-weight:600}
a.bcp-card{display:block;color:inherit;text-decoration:none}
.bcp-card{padding:10px 14px;border-bottom:1px solid var(--line)}
.bcp-card:last-child{border-bottom:0}
.bcp-card .l1{display:flex;align-items:center;gap:6px;min-width:0}
.bcp-card .l1 .vt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text)}
.bcp-card .l1 .rego{flex:none;font-size:10.5px;padding:1px 5px;letter-spacing:.03em}
.bcp-card .l1 .brandtag{flex:none}
.bcp-card .l1 .amt{margin-left:auto;flex:none;font-size:14px;font-weight:700}
.bcp-card .l2{display:flex;align-items:baseline;gap:8px;margin-top:3px;font-size:12.5px;color:var(--text-2)}
.bcp-card .l2 .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcp-card .l2 .dt{margin-left:auto;flex:none;font-size:12px;color:var(--muted)}
.bcp-card .l3{display:flex;align-items:center;gap:8px;margin-top:7px;min-width:0}
.bcp-card .l3 .bc-det{margin-top:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bcp-card .bc-up{padding:2px 8px;font-size:11.5px}
@media (max-width:640px){
  .bcp-page > .page-h > .right > .seg button{padding:9px 5px;font-size:12.5px}
  .bcp-bar .bc-q{flex:1 1 100%;max-width:none}
}

/* ---- the Pay & collect list (mockups list-1440.png and list-390-full.png;
   no tiles and no Collecting filter, owner 29 Sep): the Inspections page's
   cells and day headings, a count on each heading, and the car's own facts
   in each column (screens/_paycollect_list.js) ---- */
table.grid tbody tr.insp-grp.pcl-grp td{padding:8px 10px;font-size:12px}
table.grid tbody tr.insp-grp.pcl-grp td em{font-style:normal;margin-left:8px;font-family:var(--mono);letter-spacing:0;
  font-weight:700;color:var(--text-2)}
table.grid.pc-grid tbody tr.pcr td{padding-top:10px;padding-bottom:10px}
/* the state an interstate car is registered in, beside its title */
.pcl-state{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--warn);background:var(--warn-bg);
  border-radius:5px;padding:1px 5px}
/* who collects it, and from where */
.pcl-who{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.pcl-who .ic{width:12px;height:12px;color:var(--muted)}
.pcl-sub{font-weight:500;color:var(--muted)}
/* Paid and Collected: the state in its colour, a quiet line under it */
.pcl-st{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.pcl-st b{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--text)}
.pcl-st b .ic{width:13px;height:13px;stroke-width:2.6;color:var(--ok)}
.pcl-st span{font-size:11.5px;color:var(--muted)}
.pcl-st.warn b{color:var(--warn)}
.pcl-st.bad b{color:var(--bad)}
.pcl-st.mute b{font-weight:500;color:var(--muted)}
/* the row's one button, and where Finish sends the car under it */
.pcl-acts{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px;vertical-align:middle}
.pcl-acts .btn{max-width:none}
.pcl-actsub{font-size:11px;color:var(--muted)}
/* the phone's pieces, hidden on a desktop (the km on the title line is
   hidden by PHONE QUEUES for every queue) */
.pc-grid .q-amt,.pc-grid .q-trk,.pc-grid .q-next,.pc-grid .q-who .brandtag{display:none}
.pc-grid .c-seller .insp-cell{max-width:170px}
/* The Vehicle cell gives way at every width above a phone, as the
   Inspections rows' does (INSPECTIONS PAGE): the title wraps between its
   words and the plate moves to the meta line. At 1440 with the sidebar
   open the row fits its wrap either way; on a narrower wrap, 1366 with the
   sidebar open for one, it is what keeps the one line title from pushing
   Paid and Collected under the pinned button. */
@media (min-width:641px){
  #stg-live .pc-grid .veh-cell{min-width:145px}
  #stg-live .pc-grid .veh-line{flex-wrap:wrap;row-gap:4px}
  #stg-live .pc-grid .veh-line .vt{white-space:normal;overflow:visible}
  #stg-live .pc-grid .veh-line .rego{display:none}
  #stg-live .pc-grid .veh-meta{flex-wrap:wrap;row-gap:3px}
  #stg-live .pc-grid .veh-meta .rego{display:inline-flex;font-size:11px;padding:1px 6px}
}
@media (max-width:640px){
  /* each row the card every queue draws on a phone (PHONE QUEUES): the
     seller and how long the car has waited, then the car with its km and
     plate and the figure, then the number to ring, the next thing to do
     and who has the car. The cells and their wrappers stand aside
     (display:contents), so each piece takes its place in the card's grid. */
  .tablewrap:has(> table.pc-grid){overflow:visible}
  table.grid.pc-grid{display:block;min-width:0;width:100%}
  table.grid.pc-grid thead{display:none}
  table.grid.pc-grid tbody{display:block}
  table.grid.pc-grid tbody tr.pcr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"who who age" "car car amt" "tel next trk";gap:4px 8px;align-items:center;
    padding:10px 12px;border-bottom:1px solid var(--line)}
  table.grid.pc-grid tbody tr.pcr:last-child{border-bottom:0}
  table.grid.pc-grid tbody tr.pcr > td,
  .pc-grid tr.pcr .veh-cell,.pc-grid tr.pcr .insp-cell,.pc-grid tr.pcr .age-col,.pc-grid tr.pcr .age-top{display:contents}
  .pc-grid tr.pcr .age-exact,.pc-grid tr.pcr .veh-meta,.pc-grid tr.pcr .pcl-state,
  .pc-grid tr.pcr .insp-when,.pc-grid tr.pcr .pcl-st,.pc-grid tr.pcr .pcl-acts{display:none}
  .pc-grid tr.pcr .age{grid-area:age;justify-self:end;padding:2px 6px;font-size:11px}
  .pc-grid tr.pcr .q-who{grid-area:who;display:flex;align-items:center;gap:6px;min-width:0;font-size:14.5px;font-weight:700;
    color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-grid tr.pcr .q-who .brandtag{display:inline-flex;flex:none}
  .pc-grid tr.pcr .veh-line{grid-area:car;gap:6px;min-width:0;font-size:13px;font-weight:500;color:var(--text-2)}
  .pc-grid tr.pcr .veh-line .vt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pc-grid tr.pcr .veh-line .q-km{display:inline;flex:none;font-size:11.5px;color:var(--muted)}
  .pc-grid tr.pcr .veh-line .rego{flex:none;font-size:10.5px;letter-spacing:.03em;padding:1px 5px}
  .pc-grid tr.pcr .q-amt{grid-area:amt;display:block;justify-self:end;font-size:12.5px;font-weight:700;color:var(--text)}
  .pc-grid tr.pcr .q-tel{grid-area:tel;display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:0;
    border-radius:7px;background:var(--accent-soft);color:var(--accent-2);font-size:12.5px;font-weight:600;width:auto}
  .pc-grid tr.pcr .q-next{grid-area:next;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12px;font-weight:600;color:var(--text-2);text-align:left}
  .pc-grid tr.pcr .q-next.bad{color:var(--bad)}
  .pc-grid tr.pcr .q-next.warn{color:var(--warn)}
  .pc-grid tr.pcr .q-next.ok{color:var(--ok)}
  .pc-grid tr.pcr .q-next.mute{color:var(--muted);font-weight:500}
  .pc-grid tr.pcr .q-trk{grid-area:trk;display:inline-flex;align-items:center;gap:4px;justify-self:end;
    font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
  .pc-grid tr.pcr .q-trk .ic{width:12px;height:12px}
  /* the headings say the order, so the line over them keeps to the count,
     as the approved phone page has it */
  #stg-live:has(table.pc-grid) .stg-result .stg-order{display:none}
  /* a day heading runs the card's width, and the red edge the card's height */
  table.grid.pc-grid tbody tr.insp-grp{display:block}
  table.grid.pc-grid tbody tr.insp-grp td{display:block;padding:9px 14px}
  table.grid.pc-grid tbody tr.pcr.insp-late{box-shadow:inset 3px 0 0 var(--bad)}
}

/* ============================================================
   ALERTS: Settings, Notifications, the phone's Turn on card and
   the laptop's banner on Home (screens/settings/alerts.js)
   ============================================================ */
/* the width every other tab has, so the edge holds still between tabs */
.pa-wrap{display:flex;flex-direction:column;gap:14px}
.pa-dev{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pa-dev.pa-col{flex-direction:column;align-items:flex-start;gap:10px}
.pa-line{flex:1;min-width:220px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.pa-line b{color:var(--text);font-weight:700}
.pa-btns{display:flex;gap:8px;flex-wrap:wrap}
.pa-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px}
.pa-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.pa-steps{list-style:none;margin:0;padding:0;width:100%}
.pa-steps li{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-2)}
.pa-steps li:first-child{border-top:none}
.pa-steps li>b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);
  display:grid;place-items:center;font-size:12px}
.pa-steps .ic{width:16px;height:16px;vertical-align:-3px;color:var(--action)}
.pa-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pa-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.pa-chip .ic{width:14px;height:14px}
.pa-chip.on{background:var(--accent-soft);border-color:var(--accent-mid);color:var(--accent-2)}
.pa-chip[aria-disabled="true"]{cursor:default}
.pa-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pa-err{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:var(--radius-sm);background:var(--bad-bg);color:var(--bad);font-size:13px}
.pa-err .ic{width:16px;height:16px;flex:none}
.pa-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:9px 10px 9px 16px;border:1px solid var(--accent-mid);
  background:var(--accent-soft);border-radius:var(--radius-sm);font-size:13.5px;color:var(--text)}
.pa-banner>.ic{width:18px;height:18px;color:var(--accent-2);flex:none}
.pa-banner span{flex:1;min-width:0}
.modal.pa-modal{max-width:420px}
.pa-card{padding:28px 22px 22px;text-align:center;display:flex;flex-direction:column;gap:12px}
.pa-card h3{font-family:var(--font-display);font-size:21px;margin:0}
.pa-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.pa-bell{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 4px}
.pa-bell .ic{width:30px;height:30px}
.pa-list{list-style:none;margin:4px 0;padding:0;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm)}
.pa-list li{display:flex;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);font-size:14px}
.pa-list li:first-child{border-top:none}
.pa-list .ic{width:16px;height:16px;color:var(--action);flex:none}
.pa-card .pa-steps{text-align:left}
.pa-go{width:100%;justify-content:center;min-height:46px;font-size:15px}
.pa-c{text-align:center}
@media (max-width:640px){
  /* an alert's switch row has no icon, so its words take the icon's column too */
  .set-page .pa-wrap .set-row:not(:has(> .ri)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rt ctl"}
  .pa-banner{flex-wrap:wrap}
  .pa-wrap .panel-h{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ===== THE INSPECTION REPORT, VERDICT (Inspector v2 chunk 2, 7 Oct 2026) =====
   The owner's approved look, docs/inspector-v2/04-mockups/
   report-a2-verdict.html, ported under .rp2 so nothing here reaches another
   screen; drawn by screens/_report_page.js. Two of the mockup's names are
   the app's already (.cap is a card label, .empty the empty state), so a
   photo caption is .pcap here and a missing photo .none. The mockup's
   Schibsted 650 renders at 700, the one weight the office loads. */
.rp2-page{padding:0}
.rp2{padding:22px 28px 48px;min-width:0;font-size:13.5px;line-height:1.45;color:var(--text)}
.rp2 .mono{font-family:var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rp2 :is(.card,.blk){background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.rp2 .card{padding:0}
.rp2 [id^="rp2-"]{scroll-margin-top:60px}
.rp2 :where(button.w,.hero,.jump button,.pv,.fdt,.tog,.ey,.ph.add){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* the header */
.rp2 .hd{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.rp2 .hd .ttl{flex:1;min-width:0}
.rp2 .over{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.rp2 h1{font:700 27px/1.15 var(--font-display);letter-spacing:-.015em;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.rp2 .plate{font:600 12.5px/1.5 var(--mono);border:1.5px solid var(--text);border-radius:6px;padding:1px 7px;background:#fff;letter-spacing:.06em;display:inline-block}
.rp2 .factl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:8px;font-size:14px;color:var(--text-2)}
.rp2 .factl > span{display:inline-flex;align-items:center}
.rp2 .factl > span + span::before{content:"";width:3px;height:3px;border-radius:50%;background:#B9B4CC;margin:0 11px}
.rp2 .factl .bad{color:var(--bad);font-weight:600}
.rp2 .factl .pend{color:var(--muted)}
/* why the office view offers no Send to wholesalers (ReportPage.unsendable) */
.rp2 .hd .why{margin-top:8px;font-size:13px;color:var(--muted)}
.rp2 .acts{display:flex;gap:10px;flex:none;padding-top:20px}
.rp2 .btn.rp2-lg{height:40px;padding:0 16px;font-size:13.5px}
.rp2 .menuc{display:inline-flex;align-items:center;gap:7px}
.rp2 .menuc .ic{width:15px;height:15px}
.rp2 .btn[disabled]{opacity:.42;cursor:not-allowed}

/* the jump bar, held at the top of the page as it scrolls */
.rp2 .jump{position:sticky;top:0;z-index:20;background:var(--bg);margin:0 -28px 24px;padding:0 28px;border-bottom:1px solid var(--line);display:flex;gap:28px}
.rp2 .jump button{padding:12px 0 11px;font-size:14px;font-weight:600;color:var(--text-2);display:flex;gap:7px;align-items:baseline;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.rp2 .jump button.on{color:var(--text);border-bottom-color:var(--accent)}
.rp2 .jump button span{font:500 12.5px var(--mono);color:var(--muted)}
.rp2 .jump em{font-style:normal;font-size:12px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.rp2 .jump em .ic{width:12px;height:12px}

/* the three blocks: How is it? What is wrong? What it means for price */
.rp2 .three{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,.92fr);gap:24px}
.rp2.buyer .three{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.rp2 .blk{padding:22px 24px 24px;min-width:0}
.rp2 .blk h2{font:700 19px var(--font-display);letter-spacing:-.01em;margin:0 0 16px}
.rp2 .hero{display:block;position:relative;width:100%;border-radius:12px;overflow:hidden;aspect-ratio:16/10;margin-bottom:10px;background:#ECEDF2}
.rp2 .hero img{width:100%;height:100%;object-fit:cover;display:block}
.rp2 .hero .chip{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.96);border-radius:9px;padding:5px 9px 5px 10px;font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center;color:var(--text);box-shadow:0 1px 3px rgba(7,6,17,.2)}
.rp2 .hero .chip .ic{width:15px;height:15px}
.rp2 .hero.none{display:grid;place-items:center;align-content:center;gap:6px;color:#8d8aa0;cursor:default}
.rp2 .parts > div{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid #F0EEF6;font-size:15px}
.rp2 .parts .nm{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp2 .parts .is{margin-left:auto;font-size:13.5px;color:var(--muted);white-space:nowrap}
.rp2 .parts .is .mono{color:var(--text-2)}
.rp2 .parts .w{font-weight:700;min-width:52px;text-align:right;white-space:nowrap}
.rp2 .w.Good,.rp2-w.Good{color:var(--ok)}
.rp2 .w.Fair,.rp2-w.Fair{color:var(--warn)}
.rp2 .w.Poor,.rp2-w.Poor{color:var(--bad)}
.rp2 .w.todo,.rp2-w.todo{color:#a8a4bb;font-weight:600}
.rp2 button.w{font-weight:700;text-decoration:underline dotted transparent;text-underline-offset:3px}
.rp2 button.w:hover,.rp2 button.w:focus-visible{text-decoration-color:currentColor}
.rp2 .chg{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--accent-2);background:var(--accent-soft);border-radius:6px;padding:1px 6px;align-self:center;white-space:nowrap}
.rp2 .chg .ic{width:11px;height:11px}
.rp2 .wrong{list-style:none;margin:0;padding:0}
.rp2 .wrong li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid #F0EEF6;font-size:15px;font-weight:600;line-height:1.35}
.rp2 .wrong li i{width:9px;height:9px;border-radius:2px;background:#d4952a;flex:none;transform:translateY(-1px)}
.rp2 .wrong li.red{color:var(--bad)}
.rp2 .wrong li.red i{background:#c43a3a}
.rp2 .wrong li.hid{opacity:.55}
.rp2 .wrong li.none{color:var(--ok)}
.rp2 .wrong li.none .ic{width:16px;height:16px;align-self:center}
.rp2 .wrong li.wait{color:var(--muted);font-weight:500}
.rp2 :is(.wrong,.fd,.dm) .hidtag{position:static;background:#F0EFF5}
.rp2 .wrong .hidtag{margin-left:4px}
.rp2 .ask{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #F0EEF6}
.rp2 .ask label{font-size:15px;font-weight:600}
.rp2 .ask b{font:700 26px var(--mono);letter-spacing:-.03em}
.rp2 .ask .nil{color:var(--muted);font-size:14px}
.rp2 .talk{margin-top:16px}
.rp2 .talk h3{font:700 15px var(--font-display);margin:0 0 8px}
.rp2 .talk ul{list-style:none;margin:0;padding:0}
.rp2 .talk li{font-size:14.5px;padding:5px 0 5px 16px;position:relative;line-height:1.35}
.rp2 .talk li::before{content:"";position:absolute;left:1px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--text-2)}
.rp2 .talk li.nil{color:var(--muted);padding-left:0}
.rp2 .talk li.nil::before{display:none}
.rp2 .oo{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent-2);margin-top:14px}
.rp2 .oo .ic{width:12px;height:12px}

/* below the fold: photos, findings, checklist, the side column */
.rp2 .below{margin-top:40px}
.rp2 .sech{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px}
.rp2 .sech h2{font:700 17px var(--font-display);margin:0}
.rp2 .sech .cnt{color:var(--muted);font-weight:600}
.rp2 .sech .r{margin-left:auto;font-size:13px;color:var(--muted);text-align:right}
.rp2 .photos{margin:0 0 40px}
.rp2 .pgroups{display:flex;flex-wrap:wrap;gap:24px 36px;padding:18px 20px 22px}
.rp2 .pgp{max-width:100%;min-width:0}
.rp2 .pgp h4{font:700 14px var(--font-display);margin:0 0 9px;display:flex;gap:8px;align-items:baseline}
.rp2 .pgp h4 span{font-size:12px;font-weight:500;color:var(--muted)}
.rp2 .pgp .tiles{display:grid;grid-template-columns:repeat(var(--n),minmax(0,122px));gap:14px 10px}
.rp2 .pf{margin:0;min-width:0}
.rp2 .ph{position:relative;border-radius:10px;overflow:hidden;background:#ECEDF2;aspect-ratio:4/3}
.rp2 .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rp2 .pv{display:block;width:100%;height:100%;cursor:zoom-in}
.rp2 .ph.none{display:grid;place-items:center;border:1px solid #E2E3EA;background:#EEEFF3}
.rp2 .ph .ei{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:#8d8aa0}
.rp2 .ph .ei .ic{width:20px;height:20px;stroke-width:1.6}
.rp2 .ph.hid img{opacity:.32;filter:grayscale(1)}
.rp2 .hidtag{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.95);color:var(--text-2);font-size:11px;font-weight:600;font-style:normal;border-radius:6px;padding:1px 6px}
.rp2 .tog{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--accent-2);box-shadow:0 1px 3px rgba(7,6,17,.25)}
.rp2 .tog .ic{width:14px;height:14px}
.rp2 .tog.off{color:var(--muted)}
.rp2 .ph.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;border:1.5px dashed var(--line-2);background:var(--surface);color:var(--accent-2);font-weight:600;font-size:12.5px;border-radius:10px}
.rp2 .ph.add .ic{width:18px;height:18px}
.rp2 .pcap{font-size:12.5px;color:var(--text-2);margin-top:5px;line-height:1.3}
.rp2 .g2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.rp2 .col{display:flex;flex-direction:column;gap:24px;min-width:0}
.rp2 .cpad{padding:6px 20px}
.rp2 .nil{color:var(--muted);font-size:13.5px;padding:14px 0}
.rp2 .fd{display:grid;grid-template-columns:4px 112px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid #F0EEF6;align-items:center}
.rp2 .fd .bar{align-self:stretch;border-radius:2px;background:#d4952a}
/* a finding with no photo has no tile, just its edge, words and eye */
.rp2 .fd.nopic{grid-template-columns:4px minmax(0,1fr) auto;padding:12px 0}
.rp2 .fd.red .bar{background:#c43a3a}
.rp2 .fd.min .bar{background:#CFCADF}
.rp2 .fd .ph{border-radius:9px}
.rp2 .fd .fdt,.rp2 .fd b{font-size:14.5px;font-weight:700;display:block;text-align:left}
.rp2 .fdt:hover,.rp2 .fdt:focus-visible{text-decoration:underline dotted;text-underline-offset:3px}
.rp2 .fd.red .fdt,.rp2 .fd.red b{color:var(--bad)}
.rp2 .fd p{font-size:13px;color:var(--text-2);margin:2px 0 0}
/* an issue photographed more than once: the rest small under its words */
.rp2 .fd .fmore{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rp2 .fd .fmore .pf{width:64px}
.rp2 .fd p.was{display:flex;gap:5px;align-items:center;color:var(--accent-2);font-size:12px;margin-top:5px}
.rp2 .fd p.was .ic{width:12px;height:12px;flex:none}
.rp2 .fd.hid .ph img{opacity:.4}
.rp2 .fd.hid .fdb > :not(.hidtag){opacity:.6}
.rp2 .fd .hidtag{display:inline-block;margin-top:5px}
.rp2 .ey{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--accent-2)}
.rp2 .ey .ic{width:16px;height:16px}
.rp2 .ey.off{color:var(--muted)}
.rp2 .grp{padding:16px 0;border-bottom:1px solid #F0EEF6}
.rp2 :is(.parts > div,.wrong li,.fd,.grp):last-child{border-bottom:0}
.rp2 .gh{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.rp2 .gh h3{font:700 15px var(--font-display);margin:0}
.rp2 .gh .w{font-weight:700;font-size:14px;margin-left:auto}
.rp2 .gh .was{font-size:12px;color:var(--accent-2);margin-left:auto}
.rp2 .gh .was + .w{margin-left:0}
.rp2 .prob{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;background:#FFFCF5;border-left:3px solid #d4952a;border-radius:0 10px 10px 0;padding:9px 12px;margin-bottom:6px;font-size:14px}
.rp2 .prob.red{background:#FFF8F8;border-left-color:#c43a3a}
.rp2 .prob b{font-weight:700}
.rp2 .prob .nt{color:var(--text-2)}
.rp2 .prob .pp2{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:234px}
.rp2 .prob .pp2 .pf{width:74px}
.rp2 :is(.fd .fmore,.prob .pp2) .ph{border-radius:6px}
.rp2 .okl{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text-2);line-height:1.45;margin-top:2px}
.rp2 .okl .ic{color:var(--ok);margin-top:3px;width:14px;height:14px;flex:none}
.rp2 .okl b{color:var(--text)}
.rp2 .okl.wait,.rp2 .okl.wait b{color:var(--muted)}
.rp2 .okl.wait .ic{color:#c9c5d8}
/* a fine answer's note (the drive under All good): reworded by a tap on
   its words, hidden by its eye, faded while hidden */
.rp2 .okl.note .ey{margin-left:auto;margin-top:-6px;flex:none}
.rp2 .okl.note .fdt{text-align:left;color:var(--text-2)}
.rp2 .okl.note .was{display:flex;gap:5px;align-items:center;color:var(--accent-2);font-size:12px;margin-top:3px}
.rp2 .okl.note .was .ic{width:12px;height:12px;margin:0;color:inherit}
.rp2 .okl.note.hid > span > :not(.hidtag){opacity:.6}
.rp2 .okl.note .hidtag{position:static;background:#F0EFF5;margin-left:4px}
.rp2 .dnote{font-size:13.5px;color:var(--text-2);margin-top:6px}
.rp2 .dnote b{color:var(--text)}
.rp2 .dnote.off b{color:var(--accent-2)}
.rp2 .dm{padding:18px 20px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.rp2 .dm ul{list-style:none;margin:0;padding:0}
.rp2 .dm li{display:flex;gap:8px;align-items:baseline;font-size:14px;padding:5px 0}
.rp2 .dm .pn{width:18px;height:18px;border-radius:50%;color:#fff;font:700 10px var(--mono);display:inline-grid;place-items:center;flex:none}
.rp2 .dm .pn.nopin{width:7px;height:7px;background:var(--text-2);margin:0 5px 0 6px;transform:translateY(-2px)}
.rp2 .dm small{display:block;color:var(--muted);font-size:12.5px}
.rp2 .dm li.ty{display:block;font-size:12.5px;color:var(--text-2);margin-top:8px}
.rp2 .dm li.nil{color:var(--muted);padding:5px 0}
.rp2 .dm li.hid{opacity:.55}
.rp2 .carsvg{display:block}
.rp2 .sl{list-style:none;margin:0;padding:12px 0}
.rp2 .sl li{display:flex;gap:9px;align-items:flex-start;padding:7px 20px;font-size:14px;line-height:1.4}
.rp2 .sl li .ic{margin-top:2px;flex:none;width:15px;height:15px}
.rp2 .sl.s .ic{color:var(--ok)}
.rp2 .sl.r .ic{color:var(--muted)}
.rp2 .sl li.nil{color:var(--muted)}
.rp2 .card.booked{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;max-width:640px;font-size:15px}
.rp2 .card.booked > .ic{width:22px;height:22px;color:var(--accent);flex:none}
.rp2 .card.booked p{margin:4px 0 0;color:var(--text-2);font-size:13.5px}
/* when, where and who, under the card's line */
.rp2 .card.booked .bkd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;margin:12px 0 10px}
.rp2 .card.booked .bkd > div{display:contents}
.rp2 .card.booked dt{color:var(--muted);font-size:13.5px}
.rp2 .card.booked dd{margin:0;font-weight:600;font-size:14px;min-width:0;overflow-wrap:anywhere}
.rp2 .card.booked dd.none{color:var(--muted);font-weight:500}
.rp2-banner{display:flex;align-items:center;gap:10px;background:var(--accent-soft);color:var(--accent-2);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13.5px}
.rp2-banner .ic{flex:none}
.rp2-banner .btn{margin-left:auto;flex:none}
.rp2-offers .rv-close-bids{margin-top:10px}
.rp2-note{font-size:12px;color:var(--muted);margin:10px 0 12px}

/* the two edit dialogs */
.rp2-edit .rp2-fl{display:block;margin-bottom:12px}
.rp2-edit .rp2-fl > span{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.rp2-edit .rp2-fl .input{width:100%}
.rp2-edit textarea.input{height:auto;min-height:84px;resize:vertical;padding:8px 10px;line-height:1.45}
.rp2-said{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.rp2-said b{color:var(--text-2);font-weight:600}
.rp2-said.bad{color:var(--bad);font-weight:600}

/* Share, Report links (chunk 5): one row per link, its name and who made
   it, how often it was opened, live or not, and Revoke */
.rp2-links{display:flex;flex-direction:column}
.rp2-lk{display:grid;grid-template-columns:minmax(0,1fr) auto auto 76px;gap:6px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rp2-lk:last-of-type{border-bottom:0}
.rp2-lk .t b{display:block;font-size:13.5px;overflow-wrap:anywhere}
.rp2-lk .t span{display:block;font-size:12px;color:var(--muted)}
.rp2-lk .v{font-size:12.5px;color:var(--text-2);white-space:nowrap}
.rp2-lk .st{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.rp2-lk .st.ok{color:var(--ok);background:var(--ok-bg)}
.rp2-lk .st.dim{color:var(--muted);background:#F0EFF5}
.rp2-lk .st.warn{color:var(--warn);background:var(--warn-bg)}
.rp2-lk .btn{justify-self:end}
@media(max-width:640px){
  .rp2-lk{grid-template-columns:minmax(0,1fr) auto}
  .rp2-lk .v{grid-column:1}
  .rp2-lk .st{grid-row:1;grid-column:2}
  .rp2-lk .btn{grid-row:2;grid-column:2}
}

/* the car's page at Report in (cockpit.js): the five words and the red flags */
.rp2-ck .rp2-w{font-weight:700}
.rp2-flag.bad{color:var(--bad);font-weight:700}
.rp2-flag.ok{color:var(--ok);font-weight:600}

/* The car's Inspection tab (cockpit.js, owner 7 Oct 2026): the report page
   drawn inside the car's page (_report_page.js, o.embedded). The car's page
   has its own padding and pinned bar, so the report keeps neither its frame
   nor its back button, is titled for what it is under the car's own name,
   and a section jumped to stops below the car's bar rather than under it. */
.rp2.emb{padding:0 0 32px}
.rp2.emb .hd{align-items:center;margin-bottom:18px}
.rp2 .rp2-t{font:700 21px/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
.rp2.emb .over{margin:4px 0 0}
.rp2.emb .factl{margin-top:6px}
.rp2.emb .acts{padding-top:0;flex-wrap:wrap;justify-content:flex-end}
.ck-insp [id^="rp2-"]{scroll-margin-top:calc(var(--ck-top-h) + 12px)}
.ck-insp .rv-company{margin-bottom:16px}
.ck-insp .rv-empty{margin:8px 0}
.ck-insp .rv-empty-back{display:none}
.ck-insp-wait{max-width:640px}

/* The report while the inspector works (Inspector v2 chunk 4, the owner's
   approved report-a2-live): one progress line across the top, the walk's
   parts done, now or to come; the same three blocks filling in; slots still
   to come dashed; a photo that just landed tagged New for a minute (the
   tag's own clock, so a repaint inside the minute keeps its time); Share
   and Send shut with the reason under them until Complete. */
.rp2 .prog{display:grid;grid-template-columns:auto repeat(var(--parts),minmax(0,1fr));gap:18px;align-items:end;margin:-6px 0 26px}
.rp2.emb .prog{margin:0 0 22px}
.rp2 .prog .st{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;padding-bottom:1px;white-space:nowrap}
.rp2 .prog .st .stn{display:none;font-weight:500;color:var(--accent-2)}
.rp2 .live-dot,.lv-dot{border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(116,36,232,.16);flex:none;animation:rp2-pulse 2s ease-in-out infinite}
.rp2 .live-dot{width:8px;height:8px}
@keyframes rp2-pulse{50%{box-shadow:0 0 0 6px rgba(116,36,232,.06)}}
.rp2 .pp{font-size:13px;color:var(--text-2);min-width:0}
.rp2 .pp span{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp2 .pp .ic{color:var(--ok);width:14px;height:14px;flex:none}
.rp2 .pp b{display:block;height:5px;border-radius:3px;background:#E9E6F2;margin-top:7px;overflow:hidden}
.rp2 .pp b i{display:block;height:100%;border-radius:3px;background:#7cc4a5;transition:width .6s ease}
.rp2 .pp.now{color:var(--accent-2);font-weight:700}
.rp2 .pp.now b i{background:var(--accent)}
.rp2 .pp.todo{color:var(--muted)}
.rp2 .w.now,.rp2-w.now{color:var(--accent-2);font-weight:700}
.rp2 .parts > div.later .nm{color:var(--muted)}
.rp2 .ph.none.wait{background:var(--surface);border:1.5px dashed #D6D1E6}
.rp2 .ph.none.wait .ei{color:#a8a4bb}
.rp2 .ph .newtag{position:absolute;left:6px;top:6px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px;animation:rp2-new 60s linear forwards}
@keyframes rp2-new{0%,97%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.rp2 .live-dot,.lv-dot,.rp2 .ph .newtag{animation:none}}
.rp2 .acts.shut{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.rp2 .lockn{flex-basis:100%;display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:12.5px;color:var(--muted)}
.rp2 .lockn .ic{width:12px;height:12px}
.rp2-banner.bad{background:#FFF1F1;color:var(--bad)}

/* An inspection under way, wherever it is shown (screens/_live_now.js): the
   pulsing dot, the walk's parts as five small cells, the car's Live chip,
   the queue row's Live pill and the step card's progress row. */
.lv-dot{width:7px;height:7px;display:inline-block}
.lv-bar{display:inline-flex;gap:3px;flex:none}
.lv-bar i{width:14px;height:6px;border-radius:2px;background:#E9E6F2}
.lv-bar i.done{background:#7cc4a5}
.lv-bar i.now{background:var(--accent)}
.lv-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:700;color:var(--accent-2);background:var(--accent-soft);border:1px solid #E4D6FF;border-radius:999px;padding:3px 10px 3px 9px;cursor:pointer;white-space:nowrap}
.lv-chip:hover,.lv-chip:focus-visible{background:#EBDFFF}
/* a walk gone quiet for hours: amber, the dot still */
.lv-chip.quiet{color:var(--warn);background:var(--warn-bg);border-color:#EFD9AE}
.lv-chip.quiet .lv-dot{background:var(--warn);box-shadow:none;animation:none}
.lv-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--accent-2);background:var(--accent-soft);border-radius:6px;padding:2px 7px;white-space:nowrap;width:max-content;text-decoration:none}
.lv-pill .n{font-weight:600;color:var(--text-2)}
.lv-pill:hover,.lv-pill:focus-visible{background:#EBDFFF}
.ck-row .v.lv-steps{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}

@media (max-width:1180px){
  .rp2 .g2{grid-template-columns:minmax(0,1fr) 300px}
  .rp2 .pgp{flex:1 1 100%}
  .rp2 .pgp .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
@media (max-width:900px){
  .rp2 .three,.rp2.buyer .three{grid-template-columns:minmax(0,1fr);gap:16px}
  .rp2 .g2{grid-template-columns:minmax(0,1fr);gap:16px}
  .rp2 .col{gap:16px}
}
@media (max-width:640px){
  .rp2{padding:14px 16px 28px}
  .rp2 .hd{flex-wrap:wrap;margin-bottom:18px;gap:12px}
  .rp2 .hd > .iconbtn{display:none}
  .rp2 h1{font-size:22px;gap:8px}
  .rp2 .over{font-size:12px}
  .rp2 .factl{font-size:13px;gap:4px 14px}
  .rp2 .factl > span + span::before{display:none}
  .rp2 .acts{width:100%;padding-top:0}
  .rp2 .acts .btn.primary{flex:1;justify-content:center}
  .rp2 .jump{margin:0 -16px 16px;padding:0 16px;gap:20px;overflow-x:auto;scrollbar-width:none}
  .rp2 .jump::-webkit-scrollbar{display:none}
  .rp2 .jump button{font-size:13.5px;padding:10px 0 9px}
  .rp2 .blk{padding:16px 16px 18px;border-radius:14px}
  .rp2 .blk h2{font-size:17px;margin-bottom:10px}
  .rp2 .hero{aspect-ratio:5/2;margin-bottom:6px}
  .rp2 .parts > div{font-size:14.5px;padding:9px 0}
  .rp2 .parts .w{width:auto;min-width:40px;white-space:nowrap}
  .rp2 .wrong li{font-size:14.5px;padding:10px 0}
  .rp2 .below{margin-top:28px}
  .rp2 .photos{margin-bottom:28px}
  .rp2 .pgroups{display:block;padding:14px}
  .rp2 .pgp + .pgp{margin-top:18px}
  .rp2 .pgp .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
  .rp2 .cpad{padding:4px 14px}
  .rp2 .fd{grid-template-columns:4px 84px minmax(0,1fr) auto;gap:10px}
  .rp2 .fd.nopic{grid-template-columns:4px minmax(0,1fr) auto}
  .rp2 .prob{grid-template-columns:minmax(0,1fr)}
  .rp2 .dm{grid-template-columns:96px minmax(0,1fr)}
  .rp2 .carsvg{width:96px}
  .rp2 .card.booked{padding:16px}
  .rp2.emb{padding:0 0 24px}
  .rp2.emb .hd{align-items:flex-start}
  .rp2 .rp2-t{font-size:19px}
  .rp2.emb .acts{justify-content:flex-start}
  .rp2.emb .acts .btn.primary{flex:1 1 100%}
  .ck-insp [id^="rp2-"]{scroll-margin-top:12px}
  .rp2-banner{flex-wrap:wrap}
  .rp2-banner .btn{margin-left:0}
  /* the progress line: who started over five bars, the part they are in
     said beside the time */
  .rp2 .prog{grid-template-columns:repeat(var(--parts),minmax(0,1fr));gap:4px;margin:-4px 0 16px}
  .rp2.emb .prog{margin:0 0 16px}
  .rp2 .prog .st{grid-column:1/-1;font-size:13.5px;margin-bottom:4px;white-space:normal}
  .rp2 .prog .st .stn{display:inline}
  .rp2 .pp span{display:none}
  .rp2 .pp b{margin-top:0}
  .rp2 .lockn{justify-content:flex-start}
}
/* The office page printed from the browser's own menu, as one document: no
   sidebar, no bars, no buttons, every block whole on its page. Share's
   Print or save as PDF prints the buyer's own page (/report-print/) */
@media print{
  #app,#view{height:auto!important;overflow:visible!important}
  #view,html.rail #view{margin-left:0!important}
  .rp2{padding:10mm 12mm}
  .rp2 :is(.jump,.acts,.hd > .iconbtn,.tog,.ey,.ph.add),.rp2-banner{display:none!important}
  /* printed from the car's Inspection tab: the report alone, not the car's
     bar, its tabs or its strips */
  .ck-page:has(> .ck-panel.on[data-panel="inspection"]) > :not(.ck-panel.on){display:none!important}
  .rp2 :is(.blk,.card){box-shadow:none}
  .rp2 :is(.blk,.grp,.fd,.pgp,.dm,.sl li){break-inside:avoid}
}

/* ===== MOTORSCOUT (spec 2026-10-07, D16; plan release 1b, Task B) =====
   MotorScout's page is a stage page (stage.js, #/s/motorscout) and wears
   the queues' own look, so these are only its own few pieces: the inbox's
   state in the header and a red bar per email the reader could not file
   (screens/_motorscout_wins.js), the Won for cell, and Needs a look's red
   count. The Fill in dialog and the inbox card in Settings share the rest.
   Ported from the approved mockups (docs/superpowers/specs/2026-10-07-
   motorscout/v2-approved). */
.ms-inbox{display:inline-flex;align-items:center;gap:6px;padding:9px 4px;border:0;background:none;
  font:600 12.5px var(--font);color:var(--muted);text-decoration:none}
a.ms-inbox:hover,button.ms-inbox:hover{color:var(--text)}
button.ms-inbox{cursor:pointer}
.ms-inbox .ic{width:15px;height:15px;flex:none}
.ms-inbox.bad,.ms-inbox.bad .ic,.ms-inbox.bad:hover{color:var(--bad)}
/* automatic sending paused (_motorscout_wins.js pausedHtml): the inbox chip's
   shape in the warning colour, since it is why new wins wait */
.ms-paused{display:inline-flex;align-items:center;gap:6px;padding:9px 4px;margin-right:10px;
  font:600 12.5px var(--font);color:var(--warn);text-decoration:none;white-space:nowrap}
.ms-paused .ic{width:15px;height:15px;flex:none}
.ms-alert{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 12px;padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--bad) 22%,var(--bad-bg));border-radius:12px;background:var(--bad-bg);
  color:var(--bad);font:600 13.5px var(--font)}
.ms-alert .ic{width:16px;height:16px;flex:none}
/* the words take the row, so a narrow screen wraps them beside the mark
   and puts the buttons on a line of their own, at the right */
.ms-alert-t{flex:1 1 220px;min-width:0}
.ms-alert-b{display:flex;align-items:center;gap:8px;margin-left:auto}
.ms-alert .btn{height:30px}
/* the intro's line is cut to the column, the whole of it on the hover */
td.ms-intro .fm-sub{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.ms-wait{font-size:12.5px;color:var(--muted)}
.ms-won b{display:block;font:700 15px var(--mono);color:var(--text)}
.ms-won span{display:block;margin-top:2px;font:600 11.5px var(--mono);color:var(--muted)}
td.q-won{white-space:nowrap}
.bkt.rp .bkt-n.bad{color:var(--bad)}
.ms-fill-why{font-size:13px;color:var(--text-2);line-height:1.5;margin:0 0 14px}
/* the run sends the intro once the win is saved (unless paused), said first */
.ms-fill-auto{font-size:13px;font-weight:600;color:var(--text);line-height:1.5;margin:-6px 0 14px}
.grid2 .ms-wide{grid-column:1 / -1}
.ms-set-on{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:2px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-deep)}
.ms-set-on > span b{display:block;font-size:13px;font-weight:700;color:var(--text)}
.ms-set-on > span > span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ms-set-on .tgl{flex:none}
.ms-fill-err{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bad-bg);color:var(--bad);font-size:13px;font-weight:600}

/* ===== TAP TARGETS ON A PHONE (look audit round 2, 6 Oct 2026) =====
   A thumb needs 44px (Apple's floor), and the phone's controls were sized
   for a mouse: buttons and boxes 38px, the filter segments 27 to 35px, the
   queue card's number to ring 24px, a car's text links 17px (measured on
   sixteen screens). Buttons, boxes and tabs are 44px tall now. A control
   that would look heavy at that size, a segment, a chip, a link inside a
   sentence, keeps its look and is given a 44px
   tall touch area nobody sees: a transparent ::after across its width, as
   .tm-mob's ::before already does in Settings. Not where controls are
   stacked closer than that: the seller card's email and phone are 25px
   apart, and the phone's area took taps meant for the email. The switches
   keep their size: both their pseudo elements draw the switch. A box's 44px
   is a floor, so the rego plate's 46px stays. Written last, so it outranks
   each control's own height. */
@media (max-width:640px){
  .btn,.btn.sm{min-height:44px}
  .iconbtn{min-width:44px;min-height:44px}
  .ck-composer .btn.iconish{width:44px;height:44px}
  .input:not(.ap-hold),.select,.searchbox input{min-height:44px}
  .stg-frow > .sortby .select,.stg-frow > .btn.stg-heldbtn,.stg-frow > .seg-filter,.sla-inp{height:44px}
  .stg-frow > .btn.stg-more{width:44px;height:44px}
  .set-page table.grid.tm-grid .tm-role{height:44px}
  .ck-tab,.bkt,.set-nav a{min-height:44px}
  :is(.segf,.hm-chip,.pa-chip,.stg-pick,.ck-cap-go,.ck-alloc-go,.ck-seller-view,a.tel){position:relative}
  :is(.segf,.hm-chip,.pa-chip,.stg-pick,.ck-cap-go,.ck-alloc-go,.ck-seller-view,a.tel)::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
  .set-page .tm-mob::before,.set-page .tm-cust::before{inset:-13px -4px}
}