/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP SHELL  (src/js/ui/shell.js) — Desktop Phase 1, P5
   Loaded after style.css and chat.css. Every rule sits inside a min-width
   query (1024 rail, 1280 full sidebar): below 1024px nothing in this file
   applies, so phones and tablets are pixel-identical. #lcSidebar, #lcSkip and
   the header .hdr-act ship with the `hidden` attribute and are displayed here
   only while html.lc-shell-on is set (an authenticated, non-hidden screen).
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width:1024px){
  html.lc-shell-on{--shell-left:72px;--header-h:64px;--dock-h:0px}
  html.lc-shell-on body{padding-left:var(--shell-left);padding-right:var(--shell-right)}

  /* ── Skip link: first focusable, visible only on focus ── */
  html.lc-shell-on .lc-skip{display:block;position:absolute;top:8px;left:8px;z-index:calc(var(--z-modal) + 1);transform:translateY(-200%);padding:10px 14px;border-radius:var(--r);background:var(--primary);color:#fff;font:700 14px/1.2 'Inter',sans-serif;text-decoration:none;box-shadow:var(--shadow-md)}
  html.lc-shell-on .lc-skip:focus{transform:none;outline:2px solid #fff;outline-offset:-4px}

  /* ── Sidebar: the 72px icon rail (1024–1279, and >= 1280 when collapsed) ── */
  html.lc-shell-on #lcSidebar{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:var(--shell-left);z-index:var(--z-modal);box-sizing:border-box;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);padding-left:env(safe-area-inset-left, 0px);background:var(--bg);border-right:1px solid var(--border);font-family:'Inter',sans-serif;color:var(--ink)}
  #lcSidebar [hidden]{display:none!important}

  #lcSidebar .lc-sb-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:var(--header-h);padding:12px 0;box-sizing:border-box;border-bottom:1px solid var(--border)}
  #lcSidebar .lc-sb-logo{width:32px;height:32px;flex-shrink:0}
  #lcSidebar .lc-sb-dealer{display:none}
  #lcSidebar .lc-sb-collapse{display:none}

  #lcSidebar .lc-sb-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
  #lcSidebar .lc-sb-primary,#lcSidebar .lc-sb-modules,#lcSidebar .lc-sb-utility{padding:6px 0}
  #lcSidebar .lc-sb-modules{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  #lcSidebar .lc-sb-modules:empty{display:none}
  #lcSidebar .lc-sb-gh{display:none}

  #lcSidebar .lc-sb-item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:2px auto;padding:0;box-sizing:border-box;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s,color .12s}
  html[data-pointer="coarse"] #lcSidebar .lc-sb-item{width:48px;height:48px}
  #lcSidebar .lc-sb-ico{width:22px;height:22px;vertical-align:0}
  #lcSidebar .lc-sb-item.on{background:var(--primary-lite);color:var(--primary)}
  #lcSidebar .lc-sb-item:focus-visible,#lcSidebar .lc-sb-prof:focus-visible,#lcSidebar .lc-sb-collapse:focus-visible,#lcSidebar .lc-sb-menu button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  /* Labels stay in the accessibility tree; the rail shows a tooltip instead. */
  #lcSidebar .lc-sb-lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  #lcSidebar .lc-sb-badge{position:absolute;top:1px;right:-2px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
  #lcSidebar .lc-sb-badge[data-badge="alerts"]{background:#D97706}

  #lcSidebar .lc-sb-foot{display:flex;justify-content:center;padding:10px 0;border-top:1px solid var(--border)}
  #lcSidebar .lc-sb-prof{display:flex;align-items:center;gap:10px;min-width:0;padding:2px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
  #lcSidebar .lc-sb-av{width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-size:13px;font-weight:800}
  #lcSidebar .lc-sb-av img{width:100%;height:100%;object-fit:cover;display:block}
  #lcSidebar .lc-sb-who{display:none}

  /* Popover and tooltip are fixed, so the scrolling list never clips them. */
  #lcSidebar .lc-sb-menu{position:fixed;left:calc(var(--shell-left) + 8px);bottom:12px;min-width:200px;display:flex;flex-direction:column;gap:2px;padding:6px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:var(--shadow-lg)}
  #lcSidebar .lc-sb-menu button{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:600 14px 'Inter',sans-serif;text-align:left;cursor:pointer}
  #lcSidebar .lc-sb-menu button:focus-visible,#lcSidebar .lc-sb-menu button:hover{background:var(--bg2)}
  #lcSidebar .lc-sb-menu .icon{width:18px;height:18px;color:var(--muted)}

  #lcSidebar .lc-sb-tip{position:fixed;left:calc(var(--shell-left) + 6px);transform:translateY(-50%);padding:7px 10px;border-radius:6px;background:var(--ink);color:#fff;font:600 12px/1 'Inter',sans-serif;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-md)}

  /* ── Screen headers: a flat 64px bar, title left / actions right ── */
  html.lc-shell-on .screen header{padding-top:calc(10px + env(safe-area-inset-top, 0px));padding-bottom:9px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--border)}
  html.lc-shell-on .screen header:not(.home-hdr){padding-left:24px;padding-right:24px}
  html.lc-shell-on .screen header.home-hdr{padding-top:calc(8px + env(safe-area-inset-top, 0px));padding-bottom:8px}
  html.lc-shell-on .screen header .h-logo > svg:has(> use[href="#lc-icon"]){display:none}
  html.lc-shell-on .screen header .h-logo-wm{font-size:1.2rem}
  /* The sidebar is the way home: the back-to-Home arrows step aside. Scanner
     close and in-flow backs (Settings sub-pages, lead detail) stay. */
  html.lc-shell-on [data-back="home"]{display:none}
  /* Screen actions move from the floating button into the header. */
  html.lc-shell-on .screen .lc-fab{display:none}
  html.lc-shell-on .screen header .hdr-act{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;flex-shrink:0;border:0;border-radius:20px;background:var(--primary);color:#fff;font:700 .86rem 'Inter',sans-serif;cursor:pointer}
  html.lc-shell-on .screen header .hdr-act .icon{width:18px;height:18px}
  html.lc-shell-on .screen header .hdr-act:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  /* Lifecycle kanban: with the rail at 1024 the six columns can be narrower
     than a stage head's min-content; the board scrolls inside itself instead
     of widening the page. */
  html.lc-shell-on #vlcStages{overflow-x:auto;padding-bottom:4px}
}

@media (min-width:1024px) and (hover:hover){
  #lcSidebar .lc-sb-item:not(.on):hover,#lcSidebar .lc-sb-prof:hover,#lcSidebar .lc-sb-collapse:hover{background:var(--bg2);color:var(--ink)}
}

/* ── >= 1280: the full 240px sidebar, grouped, collapsible to the rail ── */
@media (min-width:1280px){
  html.lc-shell-on{--shell-left:240px}
  html.lc-shell-on.lc-rail-pref{--shell-left:72px}

  #lcSidebar .lc-sb-collapse{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
  #lcSidebar .lc-sb-collapse .icon{width:16px;height:16px}
  #lcSidebar .lc-sb-collapse[aria-expanded="true"] .icon{transform:rotate(180deg)}

  html:not(.lc-rail-pref) #lcSidebar .lc-sb-tip{display:none!important}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-brand{flex-direction:row;justify-content:flex-start;gap:10px;padding:0 12px 0 20px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-dealer{display:block;flex:1 1 auto;min-width:0;font-size:15px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-gh{display:block;padding:12px 24px 4px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-group:first-child .lc-sb-gh{padding-top:6px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-item{width:auto;margin:1px 12px;padding:0 12px;justify-content:flex-start;gap:12px;font-size:14px;font-weight:600}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-item.on{font-weight:700}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-ico{width:20px;height:20px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-lbl{position:static;width:auto;height:auto;margin:0;clip:auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-badge{position:static;flex-shrink:0;box-shadow:none;min-width:20px;height:20px;line-height:20px;border-radius:10px;font-size:11px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-foot{justify-content:stretch;padding:10px 12px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-prof{width:100%;padding:6px 8px}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-role{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.lc-rail-pref) #lcSidebar .lc-sb-proflbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LOT TRACKER DESKTOP  (features/lot_tracker, ui/table.js) — Desktop Phase 1, P7
   >= 1024 only. One sticky 48px toolbar under the 64px header: the same
   #lotSearchTop input (inline, not the floating pill), the type pills and the
   Filters toggle (active count). Below it the inline filter bar (toggle), the
   KPI strip, then the 50-row table with a sticky thead. Same DOM as phones,
   reordered with flex `order`; nothing here applies below 1024.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-lot-tracker{--app-gutter:24px;--lot-toolbar-h:48px;--lot-sticky-top:var(--header-h-total)}
  #screen-lot-tracker .app{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;padding-bottom:calc(var(--app-pad-bottom) + 24px)}
  #screen-lot-tracker .app > *{flex:0 0 100%;min-width:0;order:20}
  /* Line break after the toolbar so the KPI strip never joins its row. */
  #screen-lot-tracker .app::after{content:'';order:3;flex:0 0 100%;height:0}

  /* ── Toolbar: search + type pills + Filters, sticky as one 48px band ── */
  #screen-lot-tracker .lot-top-search{order:1;flex:1 1 280px;position:sticky;top:var(--lot-sticky-top);left:auto;right:auto;bottom:auto!important;z-index:3;max-width:none;height:var(--lot-toolbar-h);min-height:0;margin:0;padding:0 12px 0 0;gap:8px;box-sizing:border-box;background:var(--bg2);border:0;border-radius:0;box-shadow:none;transition:none}
  #screen-lot-tracker .lot-top-search-icon{position:absolute;left:12px;top:50%;width:18px!important;height:18px!important;transform:translateY(-50%);pointer-events:none}
  #screen-lot-tracker .lot-top-search input{height:40px;box-sizing:border-box;padding:0 12px 0 38px;border:1px solid var(--border2);border-radius:10px;background:var(--bg);font-size:16px;font-weight:500}
  #screen-lot-tracker .lot-top-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,63,166,0.15)}
  #screen-lot-tracker .lot-top-search-count{font-size:12px;padding:4px 10px}

  #screen-lot-tracker .filter-row{order:2;flex:0 0 auto;position:sticky;top:var(--lot-sticky-top);z-index:3;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;height:var(--lot-toolbar-h);margin:0;padding:0;box-sizing:border-box;background:var(--bg2)}
  #screen-lot-tracker .filter-row .fp{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;box-sizing:border-box;font-size:13px;white-space:nowrap}
  #screen-lot-tracker .fp:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #screen-lot-tracker #filterMoreLabel{display:none}
  #screen-lot-tracker .lot-filters-lbl{display:inline}
  #screen-lot-tracker .lot-filters-n:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:700}
  #screen-lot-tracker .fp-more.open .lot-filters-n{background:#fff;color:var(--ink)}

  /* ── Inline filter bar (the advFilters toggle) ── */
  #screen-lot-tracker .adv-filters{order:4;margin:4px 0 0;padding:10px 12px;animation:none}
  #screen-lot-tracker .adv-filter-grid{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
  #screen-lot-tracker .adv-filter-item{flex:1 1 130px;max-width:180px}
  #screen-lot-tracker .adv-filter-item select,#screen-lot-tracker .adv-filter-item input{height:36px;padding:0 10px;box-sizing:border-box}
  #screen-lot-tracker .adv-filters > div:last-child{align-items:center;margin-top:8px!important}

  /* ── KPI strip: Total · New · Used · Avg days · Oldest ── */
  #screen-lot-tracker .stat-grid{order:5;flex:0 0 auto;display:flex;gap:8px;margin:12px 8px 0 0}
  #screen-lot-tracker .lot-metrics{order:6;flex:1 1 auto;display:flex!important;gap:8px!important;margin:12px 0 0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important}
  #screen-lot-tracker .stat-card.lot-stat,#screen-lot-tracker .lot-metrics > div{display:flex!important;align-items:center;gap:8px;height:40px;padding:0 14px!important;box-sizing:border-box;border:1px solid var(--border)!important;border-radius:20px;background:var(--bg);box-shadow:none;text-align:left!important}
  #screen-lot-tracker .stat-card .stat-label,#screen-lot-tracker .lot-metrics > div > div:first-child{margin:0!important;font-size:11px!important;letter-spacing:0.08em!important}
  #screen-lot-tracker .stat-card .stat-number,#screen-lot-tracker .lot-metrics > div > div:last-child{font-size:16px!important;letter-spacing:-0.02em!important;line-height:1}
  #screen-lot-tracker .stat-card .stat-sub{display:none}
  #screen-lot-tracker .lot-stat:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #screen-lot-tracker .sort-row{display:none}

  /* ── Table: sticky thead under header + toolbar, 36px rows (44 coarse) ── */
  /* Keyboard focus and scrollIntoView keep rows clear of the sticky bands. */
  html.lc-shell-on:has(#screen-lot-tracker.active){scroll-padding-top:calc(var(--header-h-total) + 48px + 32px + 8px)}
  #screen-lot-tracker .lot-load-error{order:7;margin:12px 0 0}
  #screen-lot-tracker .lot-load-error .lc-tstate{margin-bottom:0}
  #screen-lot-tracker #vehicleList{order:8;margin-top:12px}
  #screen-lot-tracker .lot-table-status{display:block;order:9;margin-top:10px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
  #screen-lot-tracker .inv-table-wrap{overflow:clip;background:var(--bg)}
  /* Fixed layout: every column has a width and long values ellipsize (the
     full value is in the cell's title), so the right-hand columns and the
     Report Alert button are never clipped by the wrap. */
  #screen-lot-tracker .lot-table{font-size:13px;table-layout:fixed}
  #screen-lot-tracker .lot-table .lot-c-num{width:40px}
  #screen-lot-tracker .lot-table .lot-c-stock{width:72px}
  #screen-lot-tracker .lot-table .lot-c-year{width:60px}
  #screen-lot-tracker .lot-table .lot-c-make{width:11%}
  #screen-lot-tracker .lot-table .lot-c-trim{width:9%}
  #screen-lot-tracker .lot-table .lot-c-vin{width:150px}
  #screen-lot-tracker .lot-table .lot-c-days{width:68px}
  #screen-lot-tracker .lot-table .lot-c-price{width:92px}
  #screen-lot-tracker .lot-table .lot-c-spiff{width:72px}
  #screen-lot-tracker .lot-table .lot-c-status{width:11%}
  #screen-lot-tracker .lot-table .lot-c-act{width:48px}
  html[data-pointer="coarse"] #screen-lot-tracker .lot-table .lot-c-act{width:56px}
  #screen-lot-tracker .lot-table thead th{position:sticky;top:calc(var(--lot-sticky-top) + var(--lot-toolbar-h));z-index:2;height:32px;padding:0 12px;box-sizing:border-box;background:var(--primary);font-size:11px;letter-spacing:0.08em;vertical-align:middle}
  #screen-lot-tracker .lot-table thead th[aria-sort]{color:#fff}
  #screen-lot-tracker .lc-sort-btn{display:inline-flex;align-items:center;gap:2px;height:28px;margin:0;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer}
  #screen-lot-tracker .lc-sort-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  #screen-lot-tracker .lot-table tbody td{height:36px;padding:0 12px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #screen-lot-tracker .lot-table tbody tr.lc-state-row td{white-space:normal;overflow:visible}
  html[data-pointer="coarse"] #screen-lot-tracker .lot-table tbody td{height:44px}
  #screen-lot-tracker .lot-table tbody tr[data-open-id]:focus{outline:none}
  #screen-lot-tracker .lot-table tbody tr[data-open-id]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  #screen-lot-tracker .lot-table tbody tr[data-open-id]:focus-visible td{background:var(--primary-lite)}
  #screen-lot-tracker .lot-table .td-year{font-size:13px;letter-spacing:0}
  #screen-lot-tracker .lot-col-num{color:var(--muted2)}
  #screen-lot-tracker .lot-mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
  #screen-lot-tracker .lot-col-days{font-weight:700}
  #screen-lot-tracker .lot-col-price{font-weight:800;color:var(--ink)}
  #screen-lot-tracker .lot-col-p2{display:none}
  #screen-lot-tracker .lot-table .lot-col-act{padding:0 6px;text-align:center;overflow:visible}
  #screen-lot-tracker .lot-flag-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:8px;background:none;color:#D97706;cursor:pointer;vertical-align:middle}
  html[data-pointer="coarse"] #screen-lot-tracker .lot-flag-btn{width:44px;height:44px}
  #screen-lot-tracker .lot-flag-btn .icon{width:16px;height:16px}
  #screen-lot-tracker .lot-flag-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
  #screen-lot-tracker .lot-pagination{margin-top:12px}

  /* Table states: base rules in style.css (all tiers); desktop density here. */
  .lc-skel{max-width:120px}
}

@media (min-width:1024px) and (hover:hover){
  #screen-lot-tracker .lot-flag-btn:hover{background:var(--amber-bg);border-color:#D97706}
  .lc-tstate-act:hover{border-color:var(--primary);color:var(--primary)}
}

@media (min-width:1280px){
  #screen-lot-tracker .lot-col-p2{display:table-cell}
}

/* ══════════════════════════════════════════════════════════════════════════
   P12 — FLOOR DESKTOP  (src/js/features/floor/index.js)
   GM/GSM/admin (floor scope 'both') at >= 1024: #screen-floor.floor-split,
   New and Used side by side, each column its UP SYSTEM table + status grid
   with the people of every non-empty status listed inline. Single-department
   roles keep one full-width column. Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #floorDeptToggle{display:none!important}
  #screen-floor.floor-split{--app-max:1240px}
  #screen-floor.floor-split .floor-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  #screen-floor.floor-split .floor-col{min-width:0}
  #screen-floor.floor-split .floor-col-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:0 2px;font-size:0.82rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink)}
  #screen-floor.floor-split #floorColNewH{color:var(--blue)}
  #screen-floor.floor-split #floorColUsedH{color:var(--amber)}
  #screen-floor.floor-split .floor-col-n{min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:11px;font-size:0.72rem;line-height:19px;text-align:center;letter-spacing:0}
  #screen-floor.floor-split .floor-sec-lbl{display:none!important}
  #screen-floor.floor-split #floorNewSection{margin-bottom:0}

  #screen-floor .floor-stat-grid-xp{grid-template-columns:repeat(3,minmax(0,1fr))}
  #screen-floor .floor-stat-grid-xp .floor-stat-card{cursor:default;padding:12px}
  #screen-floor .floor-stat-grid-xp .floor-stat-card:hover{background:inherit}
  #screen-floor .floor-xp{display:flex;flex-direction:column;gap:10px}
  #screen-floor .floor-xp-group{background:var(--sbg);border:1px solid var(--border);border-left:4px solid var(--sc);border-radius:var(--r-lg);padding:10px}
  #screen-floor .floor-xp-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:0.72rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
  #screen-floor .floor-xp-n{margin-left:auto;color:var(--sc);font-size:0.9rem;letter-spacing:0}
  #screen-floor .floor-xp-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none}
  #screen-floor .floor-xp-people .floor-person-card{min-width:0}
  #screen-floor .floor-xp-empty{padding:16px;text-align:center;color:var(--muted);font-size:0.82rem;font-weight:600}
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS TWO-PANE  (src/js/features/settings/index.js) — Desktop Phase 1, P10
   Left: #setDesktopNav (260px), a mirror of the Settings home rows, moved into
   the visible sub-screen. Right: that sub-screen's page, up to 720px. The
   parent back button steps aside (its parent is the left pane) and the
   header reads "Settings › <Page>". Below 1024px nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  html.lc-shell-on .set-sub{--app-max:calc(260px + 32px + 720px + 2 * var(--app-gutter))}
  html.lc-shell-on .set-sub > .app:has(> #setDesktopNav){display:grid;grid-template-columns:260px minmax(0,720px);column-gap:32px;align-items:start;justify-content:center}
  html.lc-shell-on .set-sub > .app:has(> #setDesktopNav) > .set-wrap{grid-column:2;min-width:0}

  html.lc-shell-on .set-sub [data-back="parent"]{display:none}
  html.lc-shell-on .set-sub .set-crumb{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:600;line-height:1.2;white-space:nowrap}
  html.lc-shell-on .set-sub .set-crumb a{color:var(--muted);text-decoration:none;border-radius:6px}
  html.lc-shell-on .set-sub .set-crumb a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  html.lc-shell-on .set-sub .set-crumb-sep{color:var(--muted2)}
  html.lc-shell-on .set-sub .set-crumb-cur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* The home list is never shown on desktop (D10); its identity row would
     duplicate the left pane's header if it ever were. */
  html.lc-shell-on #screen-settings .set-section:has(#setAccountBtn){display:none}

  html.lc-shell-on #setDesktopNav{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--header-h-total) + 16px);max-height:calc(100vh - var(--header-h-total) - 32px);overflow-y:auto;box-sizing:border-box;padding:10px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);font-family:'Inter',sans-serif;scrollbar-width:thin}
  #setDesktopNav [hidden]{display:none!important}
  #setDesktopNav .set-dnav-group{display:flex;flex-direction:column;gap:2px}
  #setDesktopNav .set-dnav-label{padding:0 12px 4px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
  #setDesktopNav .set-dnav-item{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 12px;box-sizing:border-box;border-radius:10px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .12s,color .12s}
  html[data-pointer="coarse"] #setDesktopNav .set-dnav-item{min-height:48px}
  #setDesktopNav .set-dnav-item[aria-current="page"]{background:var(--primary-lite);color:var(--primary);font-weight:700}
  #setDesktopNav .set-dnav-item:focus-visible,#setDesktopNav .set-dnav-signout:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #setDesktopNav .set-dnav-ico{width:28px;height:28px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--primary-lite);color:var(--primary)}
  #setDesktopNav .set-dnav-ico .icon{width:18px;height:18px}
  #setDesktopNav .set-dnav-id{min-height:56px;padding:8px 12px}
  #setDesktopNav .set-dnav-av{width:36px;height:36px;font-size:13px}
  #setDesktopNav .set-dnav-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
  #setDesktopNav .set-dnav-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #setDesktopNav .set-dnav-s{font-size:12px;font-weight:600;color:var(--muted)}
  #setDesktopNav .set-dnav-signout{height:40px;margin:2px 4px 0;flex-shrink:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--red);font:700 14px 'Inter',sans-serif;cursor:pointer}

  /* The save bar rides at the bottom of the page column instead of floating
     across both panes. */
  html.lc-shell-on .set-sub .set-savebar{position:sticky;left:auto;right:auto;transform:none;width:auto;margin-top:4px}
  html.lc-shell-on .set-sub .set-wrap.has-savebar{padding-bottom:0}
}

@media (min-width:1024px) and (hover:hover){
  #setDesktopNav .set-dnav-item:not([aria-current="page"]):hover{background:var(--bg2)}
  #setDesktopNav .set-dnav-signout:hover{background:var(--red-bg)}
  html.lc-shell-on .set-sub .set-crumb a:hover{color:var(--ink)}
}

/* ══════════════════════════════════════════════════════════════════════════
   P8 — VEHICLE SIDE PANEL >= 1280  (index.html #vehicleModal, ui/router.js
   kindOf, ui/modal-a11y.js, features/lot_tracker)
   #vehicleModal carries data-overlay="sheet" data-overlay-desktop="dialog"
   data-overlay-roomy="panel": a bottom sheet on phones, the centred dialog at
   1024–1279 (R9 in style.css) and, at >= 1280, a non-modal 440px panel on the
   right. No backdrop: the page stays usable. While a panel is open
   modal-a11y sets html.lc-panel-open, which becomes --shell-right so the body
   and every fixed element make room for it. Lot Tracker then drops its
   lower-priority columns (# and Trim p2, Spiff and Status p3 and, below
   1440, VIN p4; the panel shows it), Alerts drops VIN, Reported by and Dept.
   The header moves with --shell-right in
   the same frame as the panel (no inset transition). Below 1280 nothing here
   applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1280px){
  html.lc-panel-open{--shell-right:440px}
  html.lc-shell-on .screen header{transition:none}

  .flag-modal[data-overlay-roomy="panel"]{inset:0 0 0 auto;width:440px;max-width:100vw;z-index:calc(var(--z-chrome-dock) + 1);align-items:stretch;justify-content:stretch;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
  .flag-modal[data-overlay-roomy="panel"] > .flag-sheet{width:100%;max-width:none;height:100%;max-height:none;padding:calc(20px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-md);overscroll-behavior:contain;animation:none!important}
  .flag-modal[data-overlay-roomy="panel"] [role="heading"]:focus{outline:none}
  .flag-modal[data-overlay-roomy="panel"] [role="heading"]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

  html.lc-panel-open #screen-lot-tracker .lot-table{min-width:0}
  html.lc-panel-open #screen-lot-tracker .lot-table .lot-c-year{width:68px}
  html.lc-panel-open #screen-lot-tracker .lot-table .lot-c-make{width:18%}
  html.lc-panel-open #screen-lot-tracker .lot-col-p2,
  html.lc-panel-open #screen-lot-tracker .lot-col-p3,
  html.lc-panel-open #screen-lot-tracker .lot-col-p4{display:none}
  #screen-lot-tracker .lot-table tbody tr[aria-current="true"] td{background:var(--primary-lite)}
  #screen-lot-tracker .lot-table tbody tr[aria-current="true"] td:nth-child(2){box-shadow:inset 3px 0 0 var(--primary)}
  #screen-lot-tracker .lot-table tbody tr[data-open-id]{cursor:pointer}

  /* Alerts (P11) with the panel open: VIN, Reported by and Dept step aside.
     The table has a <colgroup> and colspan group rows, so cells are not
     display:none (that shifts cells and adds phantom columns): the column is
     collapsed to 0 and its cells hidden. */
  html.lc-panel-open #alertsDetailContent .alx-table col:is(.alx-c-vin,.alx-c-by,.alx-c-dept){width:0}
  html.lc-panel-open #alertsDetailContent .alx-table tr > :is(:nth-child(2),:nth-child(4),:nth-child(6)):not([colspan]){padding:0;border:0;visibility:hidden}
  /* The header keeps its title and both filters; the counts (also shown on
     the group rows and the Resolved today toggle) stay for screen readers. */
  html.lc-panel-open #alertsHdrTools select{max-width:140px}
  html.lc-panel-open #alertsHdrTools .alx-counts{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (min-width:1440px){
  html.lc-panel-open #screen-lot-tracker .lot-table .lot-c-make{width:11%}
  html.lc-panel-open #screen-lot-tracker .lot-col-p4{display:table-cell}
}

/* ══════════════════════════════════════════════════════════════════════════
   P11 — ALERTS DESKTOP  (src/js/metrics.js alxRender)
   >= 1024: header filters (department, type) + counts in #alertsHdrTools;
   pending alerts as one table grouped by department with an inline Resolve;
   "Resolved today" as a collapsed disclosure under it. Same data and resolve
   write as the phone list; below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-alerts{--app-max:1240px}
  #alertsHdrTools:not([hidden]){display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
  #alertsHdrTools .alx-f{display:block}
  #alertsHdrTools select{height:36px;max-width:180px;padding:0 10px;box-sizing:border-box;border:1px solid var(--border2);border-radius:10px;background-color:var(--bg);color:var(--ink);font:500 16px 'Inter',sans-serif;cursor:pointer}
  #alertsHdrTools select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #alertsHdrTools .alx-counts{margin:0 0 0 8px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
  #alertsHdrTools .alx-counts strong{color:var(--ink);font-weight:800}

  #alertsDetailContent.alx-on{padding:16px 0 24px}
  #alertsDetailContent .alx:focus{outline:none}
  #alertsDetailContent .alx-wrap{overflow:clip;background:var(--bg)}
  #alertsDetailContent .alx-table{min-width:0;table-layout:fixed;font-size:13px}
  #alertsDetailContent .alx-table .alx-c-vin{width:120px}
  #alertsDetailContent .alx-table .alx-c-type{width:150px}
  #alertsDetailContent .alx-table .alx-c-by{width:140px}
  #alertsDetailContent .alx-table .alx-c-age{width:64px}
  #alertsDetailContent .alx-table .alx-c-dept{width:64px}
  #alertsDetailContent .alx-table .alx-c-act{width:112px}
  html[data-pointer="coarse"] #alertsDetailContent .alx-table .alx-c-act{width:124px}
  #alertsDetailContent .alx-table thead th{height:32px;padding:0 12px;box-sizing:border-box;font-size:11px;letter-spacing:0.08em;vertical-align:middle}
  #alertsDetailContent .alx-table tbody td{height:40px;padding:0 12px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-pointer="coarse"] #alertsDetailContent .alx-table tbody td{height:48px}
  #alertsDetailContent .alx-table tbody tr.lc-state-row td,#alertsDetailContent .alx-table tbody tr.lc-skel-row td{white-space:normal;overflow:visible}
  #alertsDetailContent .alx-table .alx-veh{font-weight:700;color:var(--ink)}
  #alertsDetailContent .alx-table .alx-vin{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
  #alertsDetailContent .alx-table tr[data-open-id]{cursor:pointer}
  #alertsDetailContent .alx-table tbody tr[data-alert-id]:focus{outline:none}
  #alertsDetailContent .alx-table tbody tr[data-alert-id]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  #alertsDetailContent .alx-table tbody tr[data-alert-id]:focus-visible td{background:var(--primary-lite)}
  #alertsDetailContent .alx-table tr.alx-resolving td{opacity:0.6}
  #alertsDetailContent .alx-table tr.alx-resolving td.alx-act{opacity:1}
  #alertsDetailContent .alx-act{text-align:right;overflow:visible}
  #alertsDetailContent .alx-resolve{height:28px;padding:0 12px;border:0;border-radius:6px;background:var(--primary);color:#fff;font:700 12px 'Inter',sans-serif;white-space:nowrap;cursor:pointer}
  html[data-pointer="coarse"] #alertsDetailContent .alx-resolve{height:44px;padding:0 16px}
  #alertsDetailContent .alx-resolve[aria-disabled="true"]{background:var(--muted);cursor:progress}
  #alertsDetailContent .alx-resolve:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  #alertsDetailContent .alx-grp th{padding:0;background:var(--bg2);border-right:0;text-align:left}
  #alertsDetailContent .alx-grp-btn{display:flex;align-items:center;gap:6px;width:100%;height:36px;margin:0;padding:0 12px;box-sizing:border-box;border:0;background:none;color:var(--ink);font:800 11px 'Inter',sans-serif;letter-spacing:0.1em;text-transform:uppercase;text-align:left;cursor:pointer}
  html[data-pointer="coarse"] #alertsDetailContent .alx-grp-btn{height:44px}
  #alertsDetailContent .alx-grp-btn:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  #alertsDetailContent .alx-grp-btn[disabled]{cursor:default}
  #alertsDetailContent [data-alx-grp="new"] .alx-grp-btn{color:var(--blue)}
  #alertsDetailContent [data-alx-grp="used"] .alx-grp-btn{color:var(--amber)}
  #alertsDetailContent .alx-chev{width:12px;font-size:11px;letter-spacing:0}
  #alertsDetailContent .alx-grp-n{color:var(--muted);letter-spacing:0}

  #alertsDetailContent .alx-res{margin-top:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);overflow:clip}
  #alertsDetailContent .alx-res-h{margin:0;background:var(--bg2)}
  #alertsDetailContent .alx-res-h .alx-grp-btn{color:var(--muted)}
  #alertsDetailContent .alx-res-list{margin:0;padding:0;list-style:none}
  #alertsDetailContent .alx-res-list li{display:flex;align-items:baseline;gap:12px;min-height:36px;padding:8px 12px;box-sizing:border-box;border-top:1px solid var(--border);font-size:13px}
  #alertsDetailContent .alx-res-meta{color:var(--muted);font-size:12px}
  #alertsDetailContent .alx-res-empty,#alertsDetailContent .alx-res-err{margin:0;padding:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
  #alertsDetailContent .alx-link{padding:0;border:0;background:none;color:var(--primary);font:700 13px 'Inter',sans-serif;cursor:pointer}
  #alertsDetailContent .alx-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}

@media (min-width:1024px) and (hover:hover){
  #alertsDetailContent .alx-resolve:not([aria-disabled="true"]):hover{filter:brightness(1.15)}
  #alertsDetailContent .alx-grp-btn:not([disabled]):hover{background:var(--bg3)}
}

/* ══════════════════════════════════════════════════════════════════════════
   P13 — LEADS MASTER-DETAIL  (src/js/features/leads/index.js)
   >= 1024: the list (360px, 400px at >= 1280) beside #leadsDetailPane, which
   receives the single #leadDetail node instead of a screen change. The pane
   is sticky under the header and scrolls on its own. The Team tab has no
   detail, so it takes the full width. Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  html.lc-shell-on #screen-leads{--app-max:1320px}
  html.lc-shell-on #screen-leads .leads-md{display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:24px;align-items:start}
  html.lc-shell-on #screen-leads .leads-master{min-width:0}
  html.lc-shell-on #screen-leads .appt-tabs{margin:0 0 8px;padding:12px 0}
  html.lc-shell-on #leadsDetailPane{display:block;position:sticky;top:calc(var(--header-h-total) + 16px);max-height:calc(100vh - var(--header-h-total) - 32px);min-height:240px;overflow-y:auto;box-sizing:border-box;padding:4px 20px 20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);scrollbar-width:thin}
  #leadsDetailPane .leads-pane-empty{margin:0;padding:96px 16px;text-align:center;color:var(--muted);font-size:0.92rem;font-weight:600}
  #leadsDetailPane .leads-pane-empty[hidden]{display:none}
  html.lc-shell-on #screen-leads.leads-team .leads-md{grid-template-columns:minmax(0,1fr)}
  html.lc-shell-on #screen-leads.leads-team #leadsDetailPane{display:none}

  #leadsList .lead-row[aria-current="true"]{border-color:var(--primary);background:var(--primary-lite);box-shadow:inset 3px 0 0 var(--primary)}
  #leadsList .lead-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}

@media (min-width:1280px){
  html.lc-shell-on #screen-leads .leads-md{grid-template-columns:400px minmax(0,1fr)}
  html.lc-shell-on #screen-leads.leads-team .leads-md{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════════
   P14 — HOME DESKTOP OVERVIEW  (src/js/features/home/desk.js)
   #screen-dashboard.home-desk is set by desk.js only while LC.viewport says
   desktop; the hd-* hosts ship `hidden`. KPI strip (the same pills + context
   tiles) · main (Needs you now / My leads) · side (Floor now, Recent
   activity, porter card) · Lanes (garageDashCard) · Tools (visibleModules,
   replaces the card grid, D6). Stacked at 1024, 8/4 columns at >= 1280.
   Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  html.lc-shell-on #screen-dashboard.home-desk{--app-max:1240px;--app-gutter:24px}
  html.lc-shell-on #screen-dashboard.home-desk .app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kpi" "main" "side" "lanes" "tools";align-content:start;padding-bottom:calc(var(--app-pad-bottom) + 24px)}
  html.lc-shell-on #screen-dashboard.home-desk .app > *{min-width:0}
  #screen-dashboard.home-desk #apptDashCard,#screen-dashboard.home-desk #missingVehiclesDashCard,#screen-dashboard.home-desk #teamApptDashCard,
  #screen-dashboard.home-desk .sec-title-modulos,#screen-dashboard.home-desk .dash-grid{display:none!important}

  /* KPI strip: the role's pills + context tiles, one row */
  /* The pills and the tiles are one grid of equal cells (display:contents). */
  #screen-dashboard.home-desk #dashMetricsWrapper{grid-area:kpi;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px!important}
  #screen-dashboard.home-desk #dashPills{display:contents!important}
  #screen-dashboard.home-desk #dashPills .stat-pill{max-width:none;min-height:88px;padding:14px 16px;border-radius:14px;box-shadow:var(--shadow-xs)}
  #screen-dashboard.home-desk .hd-kpis:not([hidden]){display:contents}
  .hd-tile{flex:1 1 0;min-width:0;min-height:88px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:14px 16px;box-sizing:border-box;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xs);color:var(--ink);font-family:'Inter',sans-serif;text-align:center}
  button.hd-tile{cursor:pointer}
  .hd-tile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .hd-tile-l{font-size:0.62rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-tile-v{font-size:1.5rem;font-weight:900;line-height:1;letter-spacing:-0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-tile-s{font-size:0.66rem;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-tile.is-warn .hd-tile-v{color:#D97706}
  .hd-tile.is-good .hd-tile-v{color:var(--green)}
  .hd-tile.is-error .hd-tile-v,.hd-tile.is-loading .hd-tile-v{color:var(--muted2)}
  .hd-tile.is-error .hd-tile-s{color:var(--red)}
  .hd-tile.is-stale .hd-tile-s{color:#B45309}

  /* Areas */
  #screen-dashboard.home-desk .hd-main{grid-area:main}
  #screen-dashboard.home-desk #hdSide:not([hidden]){grid-area:side;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start;margin-bottom:20px}
  #screen-dashboard.home-desk #garageDashCard{grid-area:lanes;margin:0 0 20px}
  #screen-dashboard.home-desk #hdTools{grid-area:tools}

  /* Panels */
  #screen-dashboard .hd-panel:not([hidden]){display:block;min-width:0;margin:0 0 20px;padding:16px 20px;box-sizing:border-box;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);font-family:'Inter',sans-serif}
  #screen-dashboard #hdSide .hd-panel{margin:0}
  .hd-ph{display:flex;align-items:center;gap:10px;min-height:28px;margin:0 0 10px}
  .hd-h{margin:0;font-size:0.78rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink)}
  .hd-scope{font-size:0.76rem;font-weight:600;color:var(--muted)}
  .hd-ph-go{margin-left:auto}
  #hdFloorLive[hidden]{display:none}
  .hd-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
  .hd-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;box-sizing:border-box;border-top:1px solid var(--border)}
  .hd-row:first-child{border-top:0}
  .hd-row-ico{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--primary-lite);color:var(--primary)}
  .hd-row-ico .icon{width:18px;height:18px}
  .hd-row-ico.hd-amber{background:var(--amber-bg);color:#D97706}
  .hd-row-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .hd-row-t{font-size:0.9rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-row-s{font-size:0.76rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-row[data-hd-row="scan-hint"] .hd-row-s{white-space:normal}
  .hd-row-acts{display:flex;gap:8px;flex-shrink:0}
  .hd-btn{height:32px;padding:0 14px;box-sizing:border-box;border:1px solid var(--border2);border-radius:8px;background:#fff;color:var(--ink);font:700 0.8rem 'Inter',sans-serif;cursor:pointer}
  html[data-pointer="coarse"] .hd-btn{height:44px}
  .hd-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
  .hd-btn:disabled{opacity:0.5;cursor:default}
  .hd-btn:focus-visible,.hd-link:focus-visible,.hd-tool:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .hd-link{min-height:24px;padding:2px 4px;border:0;border-radius:6px;background:none;color:var(--primary);font:700 0.78rem 'Inter',sans-serif;cursor:pointer}
  .hd-more{margin-top:6px}
  .hd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .hd-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;box-sizing:border-box;border-radius:14px;background:var(--bg2);color:var(--muted);font-size:0.74rem;font-weight:600}
  .hd-chip .icon{width:14px;height:14px}
  .hd-chip-err{background:var(--red-bg);color:var(--red)}
  .hd-msg{margin:0;font-size:0.84rem;line-height:1.45;color:var(--ink)}
  .hd-msg-err{padding:12px 14px;border:1px solid hsla(0,72%,51%,0.25);border-radius:var(--r);background:var(--red-bg)}
  .hd-clear{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:var(--green-bg);color:var(--green)}
  .hd-clear > .icon{width:28px;height:28px;flex-shrink:0}
  .hd-clear strong{display:block;font-size:0.95rem}
  .hd-clear span{font-size:0.8rem;color:var(--ink)}
  .hd-empty,.hd-muted{margin:0;font-size:0.84rem;color:var(--muted)}
  .hd-stale{margin:10px 0 0;font-size:0.76rem;color:#B45309}
  .hd-skel span{display:block;width:60%;height:14px;border-radius:6px;background:var(--bg2)}

  /* Floor now */
  .hd-fd-wrap.is-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hd-fd-h{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:0.72rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
  .hd-fd[data-hd-dept="new"] .hd-fd-h{color:var(--blue)}
  .hd-fd[data-hd-dept="used"] .hd-fd-h{color:#B45309}
  .hd-fd-n{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:10px;font-size:0.68rem;line-height:17px;text-align:center;letter-spacing:0}
  .hd-fs-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
  .hd-fs{display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:600;color:var(--ink)}
  .hd-fs.is-zero{color:var(--muted2)}
  .hd-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%}
  .hd-fs-n{margin-left:auto;font-weight:800}
  .hd-up{margin:10px 0 0;font-size:0.78rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
  .hd-up-err{color:var(--red)}
  .hd-me{font-weight:800;color:var(--primary)}

  /* Recent activity */
  .hd-act{margin:0;padding:0;list-style:none}
  .hd-act li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--border);font-size:0.8rem;line-height:1.4;color:var(--ink)}
  .hd-act li:first-child{border-top:0}
  .hd-act-t{flex-shrink:0;width:64px;color:var(--muted);font-variant-numeric:tabular-nums}
  .hd-act-x{min-width:0;overflow-wrap:anywhere}

  /* Tools (D6) */
  .hd-tools:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:4px 0}
  .hd-tools-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
  .hd-tool{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;box-sizing:border-box;border:1px solid var(--border2);border-radius:18px;background:#fff;color:var(--ink);font:600 0.82rem 'Inter',sans-serif;text-decoration:none}
  html[data-pointer="coarse"] .hd-tool{height:44px}
  .hd-tool .icon{width:16px;height:16px;color:var(--primary)}
}

@media (min-width:1024px) and (hover:hover){
  button.hd-tile:hover,.hd-tool:hover{border-color:var(--primary)}
  .hd-btn:not(:disabled):hover{border-color:var(--primary)}
  .hd-btn-primary:not(:disabled):hover{background:var(--primary-deep)}
  .hd-link:hover{text-decoration:underline}
}

@media (min-width:1280px){
  html.lc-shell-on #screen-dashboard.home-desk .app{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:24px;grid-template-rows:auto auto 1fr auto;grid-template-areas:"kpi kpi" "main side" "lanes side" "tools tools"}
  html.lc-shell-on #screen-dashboard.home-desk.hd-nomain .app{grid-template-areas:"kpi kpi" "side side" "lanes lanes" "tools tools"}
  #screen-dashboard.home-desk:not(.hd-nomain) #hdSide:not([hidden]){grid-template-columns:minmax(0,1fr)}
  /* One KPI row. */
  #screen-dashboard.home-desk #dashMetricsWrapper{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  #screen-dashboard.home-desk #garageDashCard{align-self:start}
}

/* ══════════════════════════════════════════════════════════════════════════
   P15c — TRADE-INS + DAILY LOG TABLES  (features/trade_ins renderTradeInTable,
   features/daily_log renderDesk)
   >= 1024: My Trade Ins is one dense table (Date · Vehicle · VIN · Condition ·
   Customer · Status · Stage) under a one-line toolbar holding the two entry
   points; My Daily Log is one table (Time · Action · VIN) with a sticky row
   per day under the summary strip. Both are one tab stop (ui/table.js);
   loading and failed reads are states of their own. Below 1024 nothing here
   applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-trade-ins,#screen-daily-log{--app-max:1240px;--app-gutter:24px}

  /* ── Trade-ins: the two entry points on one line ── */
  #screen-trade-ins .ti-cta{flex-direction:row;align-items:stretch;gap:12px;margin-bottom:16px}
  #screen-trade-ins .ti-cta-main{width:auto;flex:0 1 auto;padding:10px 18px;gap:12px}
  #screen-trade-ins .ti-cta-main .icon{width:22px;height:22px}
  #screen-trade-ins .ti-cta-main b{font-size:0.9rem}
  #screen-trade-ins .ti-cta-main small{font-size:0.72rem}
  #screen-trade-ins .ti-cta-alt{width:auto;flex:0 0 auto;padding:0 18px}
  #screen-trade-ins :is(.ti-cta-main,.ti-cta-alt):focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  /* ── Shared table density ── */
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table-wrap{overflow:clip;background:var(--bg)}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table{min-width:0;table-layout:fixed;font-size:13px}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table thead th{position:sticky;top:var(--header-h-total);z-index:3;height:32px;padding:0 12px;box-sizing:border-box;background:var(--primary);font-size:11px;letter-spacing:0.08em;vertical-align:middle}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table tbody td{height:40px;padding:0 12px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-pointer="coarse"] :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table tbody td{height:48px}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) .inv-table tbody tr:is(.lc-state-row,.lc-skel-row) td{white-space:normal;overflow:visible}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) tbody tr:is([data-trade-id],.dl-row):focus{outline:none}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) tbody tr:is([data-trade-id],.dl-row):focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  :is(#tradeInList.ti-desk,#dailyLogList.dl-desk) tbody tr:is([data-trade-id],.dl-row):focus-visible td{background:var(--primary-lite)}

  /* ── Trade-ins table ── */
  #tradeInList.ti-desk .ti-c-date{width:96px}
  #tradeInList.ti-desk .ti-c-vin{width:160px}
  #tradeInList.ti-desk .ti-c-cond{width:92px}
  #tradeInList.ti-desk .ti-c-cust{width:12%}
  #tradeInList.ti-desk .ti-c-status{width:148px}
  #tradeInList.ti-desk .ti-c-stage{width:124px}
  #tradeInList.ti-desk tr[data-trade-id]{cursor:pointer}
  #tradeInList.ti-desk .ti-veh{line-height:1.2}
  #tradeInList.ti-desk .ti-veh-n{display:block;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
  #tradeInList.ti-desk .ti-veh-s{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  #tradeInList.ti-desk .ti-mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
  #tradeInList.ti-desk .ti-chip{display:inline-block;max-width:100%;padding:2px 8px;box-sizing:border-box;border:1px solid;border-radius:10px;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  #tradeInList.ti-desk .ti-stage{color:var(--ti-stage);font-size:11px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase}
  #tradeInList.ti-desk .ti-stage i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ti-stage);vertical-align:1px}
  #tradeInList.ti-desk .ti-none{color:var(--muted2)}

  /* ── Daily log table ── */
  #dailyLogList.dl-desk .dl-c-time{width:104px}
  #dailyLogList.dl-desk .dl-c-vin{width:184px}
  #dailyLogList.dl-desk .dl-grp th{position:sticky;top:calc(var(--header-h-total) + 32px);z-index:2;height:32px;padding:0 12px;box-sizing:border-box;background:var(--bg2);border-bottom:1px solid var(--border);color:var(--ink);font:800 11px 'Inter',sans-serif;letter-spacing:0.1em;text-transform:uppercase;text-align:left}
  #dailyLogList.dl-desk .dl-grp-n{color:var(--muted);letter-spacing:0}
  #dailyLogList.dl-desk .dl-time{color:var(--muted);font-variant-numeric:tabular-nums}
  #dailyLogList.dl-desk .dl-desc{color:var(--ink)}
  #dailyLogList.dl-desk .dl-vin{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
  #dailyLogList.dl-desk .dl-none{color:var(--muted2)}
  html.lc-shell-on:has(:is(#screen-trade-ins,#screen-daily-log).active){scroll-padding-top:calc(var(--header-h-total) + 64px + 8px)}
}

@media (min-width:1024px) and (hover:hover){
  #tradeInList.ti-desk tr[data-trade-id]:hover td{background:var(--bg2)}
}

@media (min-width:1440px){
  #tradeInList.ti-desk .ti-c-date{width:110px}
  #tradeInList.ti-desk .ti-c-vin{width:172px}
  #tradeInList.ti-desk .ti-c-cond{width:104px}
  #tradeInList.ti-desk .ti-c-cust{width:14%}
  #tradeInList.ti-desk .ti-c-status{width:176px}
  #tradeInList.ti-desk .ti-c-stage{width:156px}
}

/* ══════════════════════════════════════════════════════════════════════════
   P15a — TEAM DIRECTORY TABLE  (src/js/features/team/index.js renderTeamTable)
   >= 1024: #teamSearchInput leaves the floating footer pill and becomes a
   sticky toolbar right under the 64px header (the Lot Tracker pattern); the
   roster is one table (Name · Position · Dept · Status · Phone · Email ·
   badges) grouped by hierarchy with sticky group rows under a sticky thead.
   One tab stop (ui/table.js rovingRows); Enter / click opens #memberModal,
   which R9 already centres as a dialog. Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-team{--app-max:1240px;--app-gutter:24px;--tm-toolbar-h:56px}
  #screen-team .app{display:flex;flex-direction:column;padding-bottom:calc(var(--app-pad-bottom) + 24px)}
  #screen-team .app > *{min-width:0}
  #screen-team .tm-spacer{display:none}

  /* ── Toolbar: the same search input, inline and sticky ── */
  #screen-team .team-search-footer{position:sticky;top:var(--header-h-total);left:auto;right:auto;bottom:auto!important;z-index:4;max-width:none;width:100%;height:var(--tm-toolbar-h);min-height:0;margin:0 0 8px;padding:8px 0;box-sizing:border-box;background:var(--bg2);transition:none}
  #screen-team .team-search-footer .team-search-pill{min-height:0;height:40px;max-width:480px;padding:0 6px 0 12px;gap:10px;box-sizing:border-box;border:1px solid var(--border2);border-radius:10px;background:var(--bg);box-shadow:none}
  #screen-team .team-search-pill > svg.icon{width:18px!important;height:18px!important}
  #screen-team .team-search-pill input{font-size:16px;font-weight:500}
  #screen-team .team-search-pill:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,63,166,0.15)}
  #screen-team #teamSearchClear:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

  /* ── Table ── */
  #teamSections.tm-desk .tm-wrap{overflow:clip;background:var(--bg)}
  #teamSections.tm-desk .tm-table{min-width:0;table-layout:fixed;font-size:13px}
  #teamSections.tm-desk .tm-table:focus{outline:none}
  #teamSections.tm-desk .tm-table:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #teamSections.tm-desk .tm-c-name{width:20%}
  #teamSections.tm-desk .tm-c-pos{width:17%}
  #teamSections.tm-desk .tm-c-dept{width:10%}
  #teamSections.tm-desk .tm-c-status{width:116px}
  #teamSections.tm-desk .tm-c-phone{width:124px}
  #teamSections.tm-desk .tm-c-badges{width:92px}
  #teamSections.tm-desk .tm-table thead th{position:sticky;top:calc(var(--header-h-total) + var(--tm-toolbar-h));z-index:3;height:32px;padding:0 12px;box-sizing:border-box;background:var(--primary);font-size:11px;letter-spacing:0.08em;vertical-align:middle}
  #teamSections.tm-desk .tm-grp th{position:sticky;top:calc(var(--header-h-total) + var(--tm-toolbar-h) + 32px);z-index:2;height:32px;padding:0 12px;box-sizing:border-box;background:var(--bg2);border-bottom:1px solid var(--border);color:var(--ink);font:800 11px 'Inter',sans-serif;letter-spacing:0.1em;text-transform:uppercase;text-align:left}
  #teamSections.tm-desk .tm-grp-n{color:var(--muted);letter-spacing:0}
  #teamSections.tm-desk .tm-table tbody td{height:40px;padding:0 12px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-pointer="coarse"] #teamSections.tm-desk .tm-table tbody td{height:48px}
  #teamSections.tm-desk .tm-table tbody tr.lc-state-row td,#teamSections.tm-desk .tm-table tbody tr.lc-skel-row td{white-space:normal;overflow:visible}
  #teamSections.tm-desk .tm-table tr[data-member-id]{cursor:pointer}
  #teamSections.tm-desk .tm-table tr[data-member-id]:focus{outline:none}
  #teamSections.tm-desk .tm-table tr[data-member-id]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  #teamSections.tm-desk .tm-table tr[data-member-id]:focus-visible td{background:var(--primary-lite)}
  #teamSections.tm-desk .tm-name{font-weight:700;color:var(--ink)}
  #teamSections.tm-desk .tm-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:10px;overflow:hidden;border-radius:50%;background:var(--primary-lite);color:var(--primary);font-size:10px;font-weight:800;vertical-align:middle}
  #teamSections.tm-desk .tm-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #teamSections.tm-desk .tm-nm{vertical-align:middle}
  #teamSections.tm-desk .tm-cake{margin-left:6px}
  #teamSections.tm-desk .tm-mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
  #teamSections.tm-desk .tm-link{color:var(--ink2);text-decoration:none;border-radius:4px}
  #teamSections.tm-desk .tm-link:focus-visible{outline:2px solid var(--primary);outline-offset:1px;color:var(--primary)}
  #teamSections.tm-desk .tm-none{color:var(--muted2)}
  #teamSections.tm-desk .tm-status{display:inline-block;padding:2px 8px;border-radius:10px;background:var(--green-bg);color:var(--green);font-size:11px;font-weight:700}
  #teamSections.tm-desk .tm-status[data-status="INVITED"]{background:var(--amber-bg);color:#B45309}
  #teamSections.tm-desk .tm-status[data-status="DEACTIVATED"]{background:var(--bg2);color:var(--muted)}
  #teamSections.tm-desk .tm-badges{padding:0 8px;white-space:normal;line-height:1.6}
  #teamSections.tm-desk .tm-badge{display:inline-flex;align-items:center;gap:3px;margin-right:4px;padding:2px 7px;border-radius:10px;border:1px solid;font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;vertical-align:middle}
  #teamSections.tm-desk .tm-badge .icon{width:10px;height:10px}
  #teamSections.tm-desk .tm-badge-key{background:#FEF3C7;color:#92400E;border-color:#D97706}
  #teamSections.tm-desk .tm-badge-vlc{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
  /* Keyboard focus and scrollIntoView keep rows clear of the sticky bands. */
  html.lc-shell-on:has(#screen-team.active){scroll-padding-top:calc(var(--header-h-total) + 56px + 64px + 8px)}
}

@media (min-width:1024px) and (hover:hover){
  #teamSections.tm-desk .tm-table tr[data-member-id]:hover td{background:var(--bg2)}
  #teamSections.tm-desk .tm-link:hover{color:var(--primary);text-decoration:underline}
}

/* ══════════════════════════════════════════════════════════════════════════
   P15a — LEADERBOARD CLAIMS COLUMN  (src/js/features/leaderboard renderClaimsPane)
   >= 1024, reviewers only (canReviewSaleClaim): #screen-sales-leaderboard
   .lb-claims-on puts #lbClaimsPane — the pending claims queue the phone opens
   from the banner — in a sticky 340px column right of the standings, and
   drops the banner. With the column the standings tile 2-up from 1440 (one
   column at 1024–1439, where 2-up rows would cut the names); everyone else
   keeps style.css's 2 columns. Approve / Reject open the existing
   #reviewClaimModal. Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-sales-leaderboard.lb-claims-on{--app-max:1240px;--app-gutter:24px}
  /* The last row is 1fr so a column taller than the standings never pads
     the gaps between the left-hand blocks. */
  #screen-sales-leaderboard.lb-claims-on .app{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:repeat(7,auto) 1fr;column-gap:24px;align-items:start}
  #screen-sales-leaderboard.lb-claims-on .app > *{grid-column:1;min-width:0}
  #screen-sales-leaderboard.lb-claims-on #lbPendingBanner{display:none!important}
  #screen-sales-leaderboard.lb-claims-on #lbList{grid-template-columns:minmax(0,1fr)}
  #screen-sales-leaderboard.lb-claims-on #lbClaimsPane:not([hidden]){grid-column:2;grid-row:1 / span 8;position:sticky;top:calc(var(--header-h-total) + 16px);display:flex;flex-direction:column;max-height:calc(100vh - var(--header-h-total) - 32px);overflow-y:auto;box-sizing:border-box;padding:14px 16px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);font-family:'Inter',sans-serif;scrollbar-width:thin}
  #lbClaimsPane .lb-claims-h{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:0.78rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink)}
  #lbClaimsPane .lb-claims-h:focus{outline:none}
  #lbClaimsPane .lb-claims-n{color:var(--muted);letter-spacing:0}
  #lbClaimsPane .lc-tstate{padding:20px 8px}
  #lbClaimsPane .lbc-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
  #lbClaimsPane .lbc-item{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
  #lbClaimsPane .lbc-top{display:flex;align-items:center;gap:8px;min-width:0}
  #lbClaimsPane .lbc-type{flex-shrink:0;padding:2px 7px;border-radius:10px;background:#EEF2FF;color:#1A3FA6;font-size:10px;font-weight:800;letter-spacing:0.06em}
  #lbClaimsPane .lbc-type[data-type="used"]{background:#fff8ee;color:#B45309}
  #lbClaimsPane .lbc-name{min-width:0;font-size:0.86rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #lbClaimsPane .lbc-meta{margin-top:4px;font-size:0.74rem;color:var(--muted)}
  #lbClaimsPane .lbc-vin{margin-top:2px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #lbClaimsPane .lbc-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
  #lbClaimsPane .lbc-btn{height:32px;padding:0 14px;box-sizing:border-box;border-radius:8px;font:700 0.78rem 'Inter',sans-serif;cursor:pointer}
  html[data-pointer="coarse"] #lbClaimsPane .lbc-btn{height:44px}
  #lbClaimsPane .lbc-reject{border:1.5px solid #dc2626;background:#fff;color:#dc2626}
  #lbClaimsPane .lbc-approve{border:0;background:#16a34a;color:#fff}
  #lbClaimsPane .lbc-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #lbClaimsPane .lbc-empty{margin:0;padding:20px 8px;text-align:center;font-size:0.82rem;color:var(--muted)}
  #lbClaimsPane .lbc-approved:empty{display:none}
}

@media (min-width:1024px) and (hover:hover){
  #lbClaimsPane .lbc-approve:hover{filter:brightness(1.1)}
  #lbClaimsPane .lbc-reject:hover{background:#FEF2F2}
}

@media (min-width:1440px){
  #screen-sales-leaderboard.lb-claims-on #lbList{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   P15b — LIFECYCLE KANBAN  (src/js/features/vlc/index.js, #vlcStages.vlc-board)
   >= 1024: the search and the Stuck chip are a sticky toolbar under the 64px
   header; the stages are a kanban of open columns (min 176px each) in one
   board that scrolls both ways inside the viewport, so a short screen never
   cramps the columns and the sticky stage heads (title + count) stay on top
   of their column. Cards are one roving tab stop; Enter / click opens the
   vehicle (panel >= 1280). Below 1024 nothing here applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-vehicle-lifecycle{--app-max:1440px;--app-gutter:24px;--vlc-toolbar-h:56px}
  #screen-vehicle-lifecycle .app{padding-bottom:16px}
  #screen-vehicle-lifecycle .vlc-tools{position:sticky;top:var(--header-h-total);z-index:4;height:var(--vlc-toolbar-h);margin:0 0 8px;padding:8px 0;box-sizing:border-box;background:var(--bg2)}
  #screen-vehicle-lifecycle .vlc-tools .inv-search{flex:0 1 480px;height:40px;padding:0 12px;border:1px solid var(--border2);border-radius:10px;background:var(--bg);font-size:16px;font-weight:500}
  #screen-vehicle-lifecycle .vlc-tools .inv-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,63,166,0.15)}
  #screen-vehicle-lifecycle .vlc-stuck-chip{min-height:36px}
  html[data-pointer="coarse"] #screen-vehicle-lifecycle .vlc-stuck-chip{min-height:44px}
  #screen-vehicle-lifecycle .vlc-stuck-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  #vlcStages.vlc-board{display:grid;grid-template-columns:repeat(var(--vlc-cols,6),minmax(176px,1fr));gap:12px;align-items:start;max-height:calc(100vh - var(--header-h-total) - var(--vlc-toolbar-h) - 32px);overflow:auto;overscroll-behavior:contain;padding:0 2px 8px;box-sizing:border-box;scrollbar-width:thin}
  #vlcStages.vlc-board > .vlc-stage-empty{grid-column:1 / -1;margin:0}
  #vlcStages.vlc-board .vlc-stage-block{min-width:0;animation:none}
  #vlcStages.vlc-board .vlc-stage-head{position:sticky;top:0;z-index:2;flex-wrap:nowrap;gap:8px;min-height:64px;padding:8px 12px;box-sizing:border-box;cursor:default}
  #vlcStages.vlc-board .vlc-stage-head:active{transform:none}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-icon{width:28px;height:28px;border-radius:8px}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-icon svg{width:16px;height:16px}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-title{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:0.86rem;overflow-wrap:anywhere}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-sub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.56rem}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-count{padding:3px 10px}
  #vlcStages.vlc-board .vlc-stage-head .vlc-stage-chev{display:none}
  #vlcStages.vlc-board .vlc-stage-body{max-height:none;overflow:visible;padding:10px 0 2px;animation:none}
  #vlcStages.vlc-board .vlc-stage-empty{padding:16px 10px}
  #vlcStages.vlc-board .vlc-card{padding:12px 12px 10px 16px;margin-bottom:8px;cursor:default}
  #vlcStages.vlc-board .vlc-card:is([data-vlc-veh],[data-vlc-open]){cursor:pointer}
  #vlcStages.vlc-board .vlc-card:focus{outline:none}
  #vlcStages.vlc-board .vlc-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #vlcStages.vlc-board .vlc-top{flex-wrap:wrap;gap:6px 10px}
  #vlcStages.vlc-board .vlc-info{flex:1 1 140px}
  #vlcStages.vlc-board .vlc-name{font-size:0.82rem;overflow-wrap:anywhere}
  #vlcStages.vlc-board .vlc-vin{font-size:0.62rem;overflow-wrap:anywhere}
  #vlcStages.vlc-board .vlc-tags{margin-top:8px}
  #vlcStages.vlc-board .vlc-justified-note{max-width:100%}
  #vlcStages.vlc-board .vlc-right{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 100%;text-align:left}
  #vlcStages.vlc-board .vlc-stock{margin:0}
  #vlcStages.vlc-board .vlc-move-btn{margin:0}
  #vlcStages.vlc-board :is(.vlc-receipt-awaiting,.vlc-receipt-late){flex-wrap:wrap}
  #vlcStages.vlc-board .vlc-receipt-lbl{display:inline-flex;align-items:center;gap:4px}
  #vlcStages.vlc-board .vlc-receipt-lbl .icon{width:12px;height:12px}
  html[data-pointer="coarse"] #vlcStages.vlc-board :is(.vlc-move-btn,.vlc-justify-btn,.vlc-receipt-btn){min-height:44px}
  #vlcStages.vlc-board :is(.vlc-move-btn,.vlc-justify-btn,.vlc-receipt-btn):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}

@media (min-width:1024px) and (hover:hover){
  #vlcStages.vlc-board .vlc-card:is([data-vlc-veh],[data-vlc-open]):hover{box-shadow:var(--shadow-sm);border-color:var(--border2)}
}

/* ══════════════════════════════════════════════════════════════════════════
   P15b — INVENTORY › RECONCILIATION + LANES  (features/scanner reconDesk*,
   features/inv_sessions setInvTab, features/garage)
   >= 1024: the Check-in / Reconciliation / Lanes tabs are a segmented control
   in a sticky toolbar under the header. Reconciliation with an open count:
   the session banner with a progress bar across the top; the scan column
   (manual VIN first, "Use camera", stats, actions, recent scans) on the left;
   the Missing and Extra / not in inventory tables on the right; Past sessions
   as a table below. Lanes tile 3 up (4 from 1440). Below 1024 nothing here
   applies.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #screen-inventory{--app-max:1240px;--app-gutter:24px}

  /* ── Tabs: segmented control in a sticky toolbar ── */
  #screen-inventory .inv-tabs{position:sticky;top:var(--header-h-total);z-index:4;display:flex;width:fit-content;max-width:100%;margin:0 0 16px;padding:4px;gap:4px;box-sizing:border-box;border-radius:12px;background:var(--bg);box-shadow:0 0 0 8px var(--bg2)}
  #screen-inventory .inv-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:8px;font-size:13px}
  html[data-pointer="coarse"] #screen-inventory .inv-tab{height:44px}
  #screen-inventory .inv-tab .icon{width:16px;height:16px}
  #screen-inventory .inv-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

  /* ── Reconciliation layout ── */
  #screen-inventory #view-recon:not([style*="none"]){display:grid!important;grid-template-columns:300px minmax(0,1fr);column-gap:24px;align-items:start}
  #view-recon > *{grid-column:1 / -1;min-width:0}
  #view-recon > #reconActiveDisplay{grid-column:1}
  #view-recon > #reconDeskReport:not([hidden]){grid-column:2;display:flex;flex-direction:column;gap:20px}
  #view-recon > #reconStartCard{max-width:640px}

  #reconActiveBanner .recon-bar{display:block;height:6px;margin-top:10px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,0.22)}
  #reconActiveBanner .recon-bar-fill{width:0;height:100%;border-radius:3px;background:linear-gradient(90deg,#FFD700,#FBBF24);transition:width .4s ease}

  #reconActiveDisplay .cam-box{height:200px!important;aspect-ratio:auto}
  /* Manual-first (fine pointer): the idle panel is the prompt; the camera's
     "Point camera at a VIN label" line under it would sit on its button. */
  #reconActiveDisplay .cam-box:has(> #rcsIdle[data-manual-first]:not([style*="none"])) #rcsStatus{display:none}
  html[data-pointer="fine"] #reconActiveDisplay .recon-act{min-height:40px}
  #reconActiveDisplay #rcsFeed{max-height:320px!important}

  /* ── Missing / Extra / Past tables ── */
  #view-recon .rdr-h{display:flex;align-items:baseline;gap:6px;margin:0;font-size:0.78rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink)}
  #view-recon #rdrMissH{color:var(--red)}
  #view-recon #rdrExtraH{color:#B45309}
  #view-recon #rdrRemH{color:var(--red)}
  #view-recon #rdrOutH{color:#B45309}
  #view-recon .rdr-n{color:var(--muted);letter-spacing:0}
  #view-recon .rdr-sub{margin:2px 0 8px;font-size:12px;color:var(--muted)}
  #view-recon .rdr-wrap{overflow:clip;background:var(--bg)}
  #view-recon .rdr-table{min-width:0;table-layout:fixed;font-size:13px}
  #view-recon .rdr-table thead th{height:32px;padding:0 12px;box-sizing:border-box;font-size:11px;letter-spacing:0.08em;vertical-align:middle}
  #view-recon .rdr-table tbody td{height:36px;padding:0 12px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-pointer="coarse"] #view-recon .rdr-table tbody td{height:44px}
  #view-recon .rdr-table tbody tr.lc-state-row td,#view-recon .rdr-table tbody tr.lc-skel-row td{white-space:normal;overflow:visible}
  #view-recon .rdr-table tbody tr[data-vin]:focus,#view-recon .rdr-table tbody tr[data-recon-open]:focus{outline:none}
  #view-recon .rdr-table tbody tr:is([data-vin],[data-recon-open]):focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  #view-recon .rdr-table tbody tr:is([data-vin],[data-recon-open]):focus-visible td{background:var(--primary-lite)}
  #view-recon .rdr-table tr:is([data-open-id],[data-recon-open]){cursor:pointer}
  #view-recon .rdr-mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
  #view-recon .rdr-c-stock{width:104px}
  #view-recon .rdr-c-year{width:60px}
  #view-recon .rdr-c-vin{width:172px}
  #view-recon .rdr-c-seen{width:92px}
  #view-recon .rdr-c-by{width:40%}
  #view-recon .rdr-c-at{width:96px}
  #view-recon .rdr-c-date{width:120px}
  #view-recon .rdr-c-out{width:116px}
  #view-recon .rdr-c-dur{width:96px}
  #view-recon .rdr-c-inv{width:96px}
  #view-recon .rdr-c-rep{width:128px}
  #view-recon .rdr-c-color{width:96px}
  #view-recon .rdr-c-miles{width:84px}
  #view-recon .rdr-c-lot{width:150px}
  #view-recon .rdr-c-age{width:64px}
  #view-recon .rdr-c-act{width:136px}
  #view-recon .rdr-c-against{width:140px}
  #view-recon .rdr-out{display:inline-block;padding:2px 8px;border-radius:10px;background:var(--green-bg);color:var(--green);font-size:11px;font-weight:700}
  #view-recon .rdr-out[data-outcome="restarted"]{background:var(--amber-bg);color:#92400E}
  #view-recon .rdr-act{text-align:right}
  #view-recon .rdr-btn{height:28px;padding:0 12px;border:1px solid var(--border2);border-radius:6px;background:var(--bg);color:var(--primary);font:700 12px 'Inter',sans-serif;cursor:pointer}
  html[data-pointer="coarse"] #view-recon .rdr-btn{height:44px}
  #view-recon .rdr-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  #view-recon .recon-past-h{margin-top:28px!important}
  #view-recon .rdr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 -8px}
  #view-recon .rdr-asof{margin:0;font-size:12px;font-weight:600;color:var(--muted)}
  #view-recon .rdr-btn:disabled{opacity:0.6;cursor:progress}
  /* The lane FAB floats bottom-right: the last rows end above it. The count
     has no FAB of its own (nav Scan and the camera box). */
  #view-lanes{padding-bottom:104px}

  /* ── Lanes: 3 up ── */
  #garageLanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
  #garageLanes > .appt-empty{grid-column:1 / -1}
  #garageLanes > .garage-row{min-width:0;margin:0}
}

@media (min-width:1024px) and (hover:hover){
  #view-recon .rdr-table tbody tr:is([data-open-id],[data-recon-open]):hover td{background:var(--bg2)}
  #view-recon .rdr-btn:hover{border-color:var(--primary)}
}

@media (min-width:1280px){
  #screen-inventory #view-recon:not([style*="none"]){grid-template-columns:340px minmax(0,1fr)}
}

@media (min-width:1440px){
  #garageLanes{grid-template-columns:repeat(4,minmax(0,1fr))}
}