/* AutoSteward v0.24.0 FIX122 - stylesheet.
 *
 * The release identity is stamped here as well as in app.js and index.html so a version bump
 * cannot land in two of the three. A contract test asserts all three carry it; that test had been
 * failing unnoticed for a while because the runner was exiting before it. */
/* --soft, and the reason it is a REFERENCE rather than a colour.
 *
 * It was `#f7f9fc`, given its only definition here in the light :root and redefined by nothing —
 * not by dark mode, not by any of the eight designs. Eleven rules consume it, so in every dark
 * design eleven blocks painted a near-white panel while their text kept the dark theme's near-white
 * ink. Measured on the running app: the sale wizard's ID-upload panel rendered #e8eef6 text on
 * #f7f9fc, a contrast ratio of 1.09:1 — the words were there and could not be seen at all.
 *
 * --surface-soft is the token every design already defines for BOTH appearances and means exactly
 * this: the inset panel one step off the card. Pointing at it fixes all eleven at once and cannot
 * drift again, because a new design cannot define --surface-soft for light only without breaking
 * its own cards first. The literal stays as a fallback for a design that somehow defines neither.
 *
 * The rule this is an instance of, from the render-system notes: never give a colour its only
 * definition inside a light block. */
:root{--navy:#102b4e;--navy2:#173b68;--ink:#122033;--muted:#627087;--line:#d8e0ea;--surface:#fff;--canvas:#edf2f7;--soft:var(--surface-soft,#f7f9fc);--red:#c9363e;--red-solid:#c9363e;--redsoft:#fbe9ea;--amber:#a8650a;--ambersoft:#fff2d8;--green:#1d7448;--greensoft:#e4f5eb;--blue:#245f9f;--bluesoft:#e8f1fb;--chip-bg:color-mix(in srgb,var(--ink) 8%,transparent);--chip-fg:var(--ink);}
/* --chip-bg / --chip-fg WERE NEVER DEFINED, and three modules had been asking for them
   (market-intel.js, vendor-search.js, security-setup.js). Every one silently fell back to its own
   hardcoded light-mode pair, so on a dark appearance a chip rendered as a bright grey patch with
   dark text — legible by luck, wrong everywhere, and invisible to review because a var() with a
   fallback never errors. Found by measuring: getComputedStyle returned an empty string for both.

   Defined DERIVED rather than as two literals, and here rather than once per design. --ink is
   redefined by every design and both appearances, so a chip now follows the active design with no
   per-design entry to forget — and the pairing is ink on a faint wash of itself, which cannot fail
   contrast in either direction. design-themes.css needs no change. */*{box-sizing:border-box}html{background:var(--canvas)}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 80% 0%,rgba(61,111,164,.09),transparent 30rem),var(--canvas);font-family:var(--font-ui,"Archivo","Segoe UI",sans-serif);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-header{position:sticky;top:0;z-index:30;min-height:72px;display:flex;align-items:center;gap:18px;padding:0 20px;color:#fff;background:linear-gradient(105deg,#0b223f,#13365f 72%,#184979);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-raised)}.brand{display:flex;align-items:center;gap:12px;min-width:174px;cursor:pointer}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-surface);color:var(--navy);background:#fff;font-weight:700}.brand span:last-child{display:flex;flex-direction:column;line-height:var(--lh-micro)}.brand small{color:#b9c9dc;font-size:var(--fs-small);margin-top:4px}.top-nav{display:flex;align-items:stretch;align-self:stretch;gap:1px;overflow-x:auto;scrollbar-width:none}.nav-link{display:flex;align-items:center;padding:0 10px;color:#dce7f3;font-size:var(--fs-small);white-space:nowrap;cursor:pointer;border-bottom:3px solid transparent}.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:#7eb6ef}.read-only-pill{margin-left:auto;padding:8px 10px;border:1px solid rgba(255,255,255,.24);border-radius:var(--r-stadium);font-size:var(--fs-small);color:#dce7f3;white-space:nowrap}.menu-btn{display:none;margin-left:auto;border:0;background:transparent;color:#fff;font-size:var(--fs-h2)}.page-shell{width:min(1500px,calc(100% - 36px));margin:0 auto;padding:28px 0 42px}.page-heading,.dashboard-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-heading h1,.dashboard-heading h1{margin:2px 0 6px;font-weight:700;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.02em;color:var(--navy)}.page-heading p,.dashboard-heading p{margin:0;color:var(--muted);max-width:760px}.eyebrow{margin:0 0 4px!important;color:var(--blue)!important;font-size:var(--fs-small)!important;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.timestamp{color:var(--muted);font-size:var(--fs-body);white-space:nowrap}.notice{margin:0 0 16px;padding:12px 14px;border:1px solid #e1c07e;border-radius:var(--r-surface);color:#734a05;background:#fff6df;font-size:var(--fs-body)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.kpi-card{position:relative;min-height:128px;display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:.18s}.kpi-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue)}.kpi-card.danger:before{background:var(--red)}.kpi-card.success:before{background:var(--green)}.kpi-card:hover{transform:translateY(-2px);border-color:#aebfd2}.kpi-icon{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--r-surface);color:var(--blue);background:var(--bluesoft);font-size:var(--fs-h2)}.danger .kpi-icon{color:var(--red);background:var(--redsoft)}.success .kpi-icon{color:var(--green);background:var(--greensoft)}.kpi-copy{display:flex;min-width:0;flex-direction:column}.kpi-copy strong{font-size:var(--fs-body)}.kpi-copy b{margin:4px 0 1px;color:var(--navy);font-size:var(--fs-h1);line-height:1}.kpi-copy small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr);grid-template-areas:"attention readiness" "activity quick";gap:16px}.panel{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.attention-panel{grid-area:attention}.readiness-panel{grid-area:readiness}.activity-panel{grid-area:activity}.quick-panel{grid-area:quick}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}.panel-heading h2{margin:0;color:var(--navy);font-size:var(--fs-h3);letter-spacing:-.025em}.severity-summary{display:flex;gap:6px;flex-wrap:wrap}.severity{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700;text-transform:capitalize;white-space:nowrap}.severity.high{color:#8d2026;background:var(--redsoft)}.severity.medium{color:#875005;background:var(--ambersoft)}.severity.low{color:#15603a;background:var(--greensoft)}.table-wrap{width:100%;overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}.data-table th{padding:12px 12px;color:#4b5a6f;background:#f5f7fa;border-bottom:1px solid #bec9d7;font-size:var(--fs-small);letter-spacing:.045em;text-align:left;text-transform:uppercase;white-space:nowrap}.data-table td{padding:12px;border-bottom:1px solid #e5eaf0;vertical-align:top}.data-table tbody tr:hover{background:#f8fbff}.data-table tr.selected{background:#eaf3fc;box-shadow:inset 3px 0 var(--blue)}.link-btn{font-weight:700;padding:0}.panel-footnote{margin:0;padding:10px 14px;color:var(--muted);background:#fafbfd;border-top:1px solid var(--line);font-size:var(--fs-small)}.selected-stock{padding:18px 20px 12px;color:var(--muted)}.selected-stock strong{color:var(--navy);font-size:var(--fs-h3)}.readiness-list{padding:0 18px 18px}.readiness-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-height:49px;padding:8px 4px;border-bottom:1px solid #e8edf3}.readiness-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-surface);color:var(--blue);background:var(--bluesoft)}.readiness-icon.ready{color:var(--green);background:var(--greensoft)}.readiness-icon.missing{color:var(--red);background:var(--redsoft)}.readiness-icon.review{color:var(--amber);background:var(--ambersoft)}.readiness-row span:nth-child(2){font-size:var(--fs-body);font-weight:600}.readiness-row small{color:var(--muted);font-size:var(--fs-small)}.activity-list{padding:4px 18px 14px}.activity-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid #e8edf3}.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--bluesoft)}.activity-row div{display:flex;flex-direction:column;min-width:0}.activity-row strong{font-size:var(--fs-body)}.activity-row span,.activity-row time{color:var(--muted);font-size:var(--fs-small)}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}.quick-card{min-height:98px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:linear-gradient(145deg,#fff,#f7f9fc);cursor:pointer}.quick-card:hover{border-color:#9fb4ca;transform:translateY(-2px)}.quick-card .icon{display:grid;place-items:center;width:40px;height:40px;color:var(--blue);background:var(--bluesoft);border-radius:var(--r-surface)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff}.search{width:min(360px,100%);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:var(--r-surface);font-weight:700;cursor:pointer}.button.primary{color:#fff;background:var(--navy);border-color:var(--navy)}.button:disabled{opacity:.55;cursor:not-allowed}.status{display:inline-flex;padding:6px 10px;border-radius:var(--r-stadium);color:var(--blue);background:var(--bluesoft);font-size:var(--fs-small);font-weight:700}.status.sold{color:#8d2026;background:var(--redsoft)}.status.available{color:var(--green);background:var(--greensoft)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.info-card{padding:20px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}.info-card h2{margin:0 0 12px;color:var(--navy);font-size:var(--fs-lead)}.info-card p{color:var(--muted);line-height:calc(var(--ui-copy) + 8px)}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.detail-list div{padding:12px 0;border-bottom:1px solid var(--line)}.detail-list dt{color:var(--muted);font-size:var(--fs-small);text-transform:uppercase}.detail-list dd{margin:4px 0 0;font-weight:700}.empty{padding:44px;text-align:center;color:var(--muted)}.footer{padding:18px;text-align:center;color:var(--muted);font-size:var(--fs-small)}.mobile-only{display:none}@media(max-width:1280px){.read-only-pill{display:none}.kpi-grid{grid-template-columns:repeat(2,1fr)}.nav-link{font-size:var(--fs-small);padding:0 6px}}@media(max-width:920px){.app-header{min-height:64px;flex-wrap:wrap}.menu-btn{display:block}.top-nav{display:none;position:absolute;top:64px;left:0;right:0;height:auto;flex-direction:column;padding:10px;background:var(--navy);box-shadow:var(--shadow)}.top-nav.open{display:flex}.nav-link{min-height:42px;padding:0 12px;border-bottom:0;border-radius:var(--r-surface)}.dashboard-grid{grid-template-columns:1fr;grid-template-areas:"attention" "readiness" "activity" "quick"}.cards{grid-template-columns:1fr 1fr}}@media(max-width:640px){.page-shell{width:min(100% - 22px,1500px);padding-top:20px}.page-heading,.dashboard-heading{align-items:flex-start;flex-direction:column}.kpi-grid,.cards{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.severity-summary{display:none}.toolbar{align-items:stretch;flex-direction:column}.search{width:100%}.detail-list{grid-template-columns:1fr}}

/* v0.2.0 - dashboard and desktop navigation parity */
.desktop-app-header{position:sticky;top:0;z-index:50;color:#17304f;background:#eef4fa;border-bottom:1px solid #98abc0;box-shadow:var(--shadow-raised)}
.app-title-row{min-height:49px;display:flex;align-items:center;gap:16px;padding:8px 12px 6px}
.desktop-brand{display:flex;align-items:baseline;gap:18px;min-width:0;cursor:pointer}
.desktop-brand strong{color:#17304f;font-size:var(--fs-body);letter-spacing:-.01em;white-space:nowrap}.desktop-brand span{color:#60748d;font-size:var(--fs-small);white-space:nowrap}.system-nav-dropdown{margin-left:auto}.desktop-menu-button,.desktop-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid #9db0c4;color:#17304f;background:linear-gradient(#fff,#edf2f7);font-size:var(--fs-small);font-weight:700;cursor:pointer;white-space:nowrap}.desktop-menu-button:hover,.desktop-menu-button.active,.desktop-tab:hover,.desktop-tab.active{color:#075dcc;background:#fff;border-bottom-color:#fff}.desktop-tab-nav{min-height:37px;display:flex;align-items:end;gap:0;padding:0 6px;border-top:1px solid #d8e2ec;background:#e7eef6;overflow:visible}.desktop-tab{min-height:36px;margin-bottom:-1px;border-right:0;border-radius:0}.desktop-tab:first-child{border-radius:var(--r-control) 0 0 0}.foundation-status{margin-left:auto;align-self:center;padding:4px 8px;color:#5e7086;font-size:var(--fs-small)}.nav-dropdown{position:relative}.desktop-dropdown-panel{display:none;position:absolute;z-index:60;min-width:220px;padding:6px;color:#17283d;background:#fff;border:1px solid #9eacbb;box-shadow:var(--shadow-raised)}.nav-dropdown.menu-open>.desktop-dropdown-panel,.nav-dropdown.keyboard-open>.desktop-dropdown-panel{display:grid}.system-dropdown-panel{top:34px;right:0}.tools-dropdown-panel{top:36px;left:0}.desktop-dropdown-panel a{padding:8px 12px;font-size:var(--fs-small);font-weight:600;cursor:pointer}.desktop-dropdown-panel a:hover{color:#075dcc;background:#eaf3fc}.desktop-dropdown-panel a.dropdown-separator{margin-top:4px;border-top:1px solid #c7d1dc}.tools-nav-dropdown{position:relative;display:flex}.menu-btn{display:none;margin-left:auto;border:0;background:transparent;color:#17304f;font-size:var(--fs-h2)}
.parity-dashboard{width:min(1780px,calc(100% - 20px));padding-top:18px}.compact-dashboard-heading{align-items:center;margin-bottom:14px}.compact-dashboard-heading h1{font-size:var(--fs-h2);letter-spacing:-.02em}.compact-dashboard-heading p:not(.eyebrow){font-size:var(--fs-small)}.parity-kpi-grid{gap:10px;margin-bottom:10px}.parity-kpi-card{min-height:112px;display:grid;grid-template-columns:72px 1fr 22px;padding:10px 14px;border-radius:var(--r-control);box-shadow:var(--shadow)}.parity-kpi-card:before{width:3px}.parity-kpi-asset{width:68px;height:68px;display:grid;place-items:center}.parity-kpi-asset img{width:64px;height:64px;object-fit:contain}/* align-items:center on a column flex sizes children to their CONTENT, not to the card — so the
 * backup filename laid out at its full 300px inside a 261px card, overflowed by 58px, and had its
 * ellipsis drawn outside the card's own overflow:hidden. The dealer saw the name cut mid-character
 * with no "…" to say so. max-width puts the children back inside the box. */
.parity-kpi-card .kpi-copy{align-items:center;text-align:center}
.parity-kpi-card .kpi-copy>*{max-width:100%}.parity-kpi-card .kpi-copy strong{color:#07172b;font-size:var(--fs-body)}.parity-kpi-card .kpi-copy b{font-size:var(--fs-h2)}.parity-kpi-card .kpi-copy small{font-size:var(--fs-small)}.parity-card-arrow{color:#123f75;font-size:var(--fs-h1);line-height:1}.parity-dashboard-grid{grid-template-columns:minmax(0,1.56fr) minmax(350px,1fr);grid-template-areas:"attention readiness" "activity quick";gap:8px}.parity-panel{border-radius:var(--r-control);box-shadow:var(--shadow)}.desktop-panel-heading{min-height:48px;padding:10px 12px 8px;background:#fff}.desktop-panel-heading h2{font-size:var(--fs-lead)}.warning-count-copy{margin:4px 0 0;color:#234b7a;font-size:var(--fs-small);font-weight:700}.parity-table-wrap{min-height:300px}.parity-table{font-size:var(--fs-small)}.parity-table th{padding:8px 10px;color:#fff;background:#193c68;border-bottom-color:#193c68;font-size:var(--fs-micro);text-align:center}.parity-table td{padding:8px 10px}.parity-table td:first-child,.parity-table td:nth-child(2),.parity-table td:nth-child(3),.parity-table td:last-child{text-align:center}.desktop-action-button{display:inline-flex;min-width:102px;align-items:center;justify-content:center;padding:4px 10px;border-radius:var(--r-control);font-size:var(--fs-small);font-weight:700;cursor:pointer}.parity-readiness-list{padding:0 10px 10px}.selected-stock{display:flex;flex-direction:column;gap:8px;padding:12px 10px 4px;color:#17304f}.selected-stock>span{padding:4px 6px;border:1px solid #94a7bb;color:#17304f;font-size:var(--fs-small);font-weight:700}.parity-readiness-row{grid-template-columns:27px 1fr auto;min-height:45px;padding:6px 8px}.readiness-status-image{width:22px;height:22px;object-fit:contain}.parity-readiness-row span:nth-child(2){font-size:var(--fs-small)}.activity-table-wrap{max-height:333px;overflow:auto}.recent-activity-table td:first-child{min-width:132px;white-space:nowrap}.recent-activity-table td:nth-child(4){text-align:left}.parity-quick-grid{grid-template-columns:1fr 1fr;gap:8px;padding:18px 10px}.parity-quick-card{min-height:88px;display:grid;grid-template-columns:66px 1fr;padding:8px 12px;border-radius:var(--r-control);background:#edf2f7;box-shadow:inset 0 -2px 0 #c7d2de}.parity-quick-card:hover{background:#fff}.parity-quick-card:last-child{grid-column:1/-1}.quick-action-image{width:58px;height:58px;object-fit:contain}.parity-quick-card strong{color:#07172b;font-size:var(--fs-small)}.dashboard-footer{padding:8px 2px 0}
@media(max-width:1180px){.desktop-brand span{display:none}.desktop-tab{padding-inline:8px;font-size:var(--fs-small)}.parity-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"attention" "readiness" "activity" "quick"}.parity-table-wrap{min-height:0}}
@media(max-width:820px){.app-title-row{min-height:58px}.system-nav-dropdown{display:none}.menu-btn{display:block}.desktop-tab-nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;padding:8px;border:1px solid #9db0c4;box-shadow:var(--shadow-raised)}.desktop-tab-nav.open{display:flex}.desktop-tab{width:100%;border:1px solid #b8c6d4;margin:0;justify-content:flex-start}.tools-nav-dropdown{display:block}.tools-dropdown-panel{position:static;display:grid;margin-left:8px;box-shadow:none}.foundation-status{margin:8px 0 0}.parity-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.parity-dashboard{width:min(100% - 12px,1780px)}.parity-kpi-grid{grid-template-columns:1fr}.parity-quick-grid{grid-template-columns:1fr}.parity-quick-card:last-child{grid-column:auto}.compact-dashboard-heading .timestamp{white-space:normal}}
.panel-title-with-icon{display:flex;align-items:center;gap:8px}.panel-heading-icon{width:28px;height:28px;object-fit:contain}.dashboard-footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:var(--fs-small)}

/* v0.3.0 - Vehicles list and Edit Vehicle parity */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);letter-spacing:.02em}.vehicle-filter-panel{margin-bottom:10px;border:1px solid #a8b8c9;border-radius:var(--r-control);background:#fff;box-shadow:var(--shadow)}.filter-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;color:#17304f;background:#edf3f8;border-bottom:1px solid #cbd6e1;font-size:var(--fs-small)}.filter-title-row span{color:#61748a;font-size:var(--fs-small)}.vehicle-filter-grid{display:grid;grid-template-columns:minmax(280px,2.2fr) repeat(4,minmax(105px,.75fr)) auto;align-items:end;gap:8px;padding:10px}.vehicle-filter-grid label{display:flex;flex-direction:column;gap:4px}.vehicle-filter-grid label>span{color:#50647c;font-size:var(--fs-small);font-weight:700}.vehicle-filter-grid input,.vehicle-filter-grid select,.vehicle-field input,.vehicle-field select,.notes-editor textarea{width:100%;min-height:34px;padding:6px 8px;color:#17283d;background:#fff;border:1px solid #9eafc1;border-radius:var(--r-control);outline:none}.vehicle-filter-grid input:focus,.vehicle-filter-grid select:focus,.vehicle-field input:focus,.vehicle-field select:focus,.notes-editor textarea:focus{border-color:#2271c8;box-shadow:0 0 0 2px rgba(34,113,200,.13)}.filter-buttons{display:flex;gap:6px}.vehicle-action-bar,.sub-action-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding:8px 10px;border:1px solid #a8b8c9;border-radius:var(--r-control);background:#f5f8fb}.vehicle-action-bar .button,.sub-action-bar .button{min-height:32px;padding-inline:10px;border-radius:var(--r-control);font-size:var(--fs-small)}.action-with-icon{gap:8px}.action-with-icon img{width:25px;height:25px;object-fit:contain}.action-with-icon .dms-ico{width:18px;height:18px;color:currentColor}.action-with-icon .dms-ico-raster{display:none}.button.danger-outline{color:#a52229;border-color:#dba5a8;background:#fff4f4}.button.danger-outline:hover:not(:disabled){background:#fde8e8}.action-divider{width:1px;height:27px;margin:0 1px;background:#bdc9d5}.selection-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 12px;color:#4e627a;background:#fff;border:1px solid #c2ceda;border-bottom:0;font-size:var(--fs-small)}/* 2.55:1 in dark: a light-mode link blue on a dark strip. */
.selection-strip strong{color:var(--accent)}.vehicle-table-panel{border-radius:0 0 var(--r-control) var(--r-control);box-shadow:none}.vehicle-master-table{min-width:1250px;font-size:var(--fs-small)}.vehicle-master-table th{padding:8px 10px;color:#fff;background:#1d416d;text-align:center;font-size:var(--fs-micro)}.vehicle-master-table td{padding:8px 10px;white-space:nowrap}.vehicle-master-table tbody tr{cursor:pointer}.vehicle-master-table tbody tr.selected{background:var(--bluesoft);box-shadow:inset 4px 0 var(--blue)}.vehicle-master-table tbody tr.selected td{border-bottom-color:#bfd5eb}/* Every colour here was fixed for a white page. In dark mode the panel kept its pale blue while
   the heading inside it stayed navy — 1.31:1, measured. Tokens now; the accent keeps the left rule
   reading as a callout in either appearance. */
.rule-callout{margin-top:10px;padding:10px 12px;color:var(--muted);background:var(--surface-soft,var(--soft));border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-control);font-size:var(--fs-small);line-height:var(--lh-small)}.rule-callout strong{color:var(--ink)}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,27,47,.52)}.modal-card{width:min(680px,100%);max-height:88vh;overflow:auto;padding:20px;color:#17283d;background:#fff;border:1px solid #798fa7;border-radius:var(--r-surface);box-shadow:var(--shadow-raised)}.modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.modal-heading h2{margin:2px 0 0;color:#17304f}.modal-card>p{color:#60748c;font-size:var(--fs-small)}.icon-close{width:32px;height:32px;border:1px solid #bdc9d5;border-radius:var(--r-control);color:#17304f;background:#f4f7fa;font-size:var(--fs-h3);cursor:pointer}.column-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;border:1px solid #d4dde6;background:#f8fafc}.column-check-grid label{font-size:var(--fs-small)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.toast{position:fixed;right:20px;bottom:20px;z-index:140;max-width:min(420px,calc(100vw - 40px));padding:12px 16px;color:#fff;background:#17304f;border-radius:var(--r-control);box-shadow:var(--shadow-raised);font-size:var(--fs-small);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}.toast.warning{background:#8a5500}.toast.success{background:#1b6d43}.vehicle-editor-shell{width:min(1650px,calc(100% - 20px));padding-top:14px}.vehicle-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:10px}.vehicle-editor-heading h1{margin:2px 0 4px;color:#17304f;font-size:var(--fs-h2)}.vehicle-editor-heading p:not(.eyebrow){margin:0;color:#60748c;font-size:var(--fs-small)}.editor-mode-badge{padding:8px 10px;color:#78500b;background:#fff5d8;border:1px solid #dfbd72;border-radius:var(--r-control);font-size:var(--fs-small);font-weight:700}.sticky-editor-actions{position:sticky;top:86px;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:0;padding:8px 10px;background:#eef4fa;border:1px solid #a8b8c9}.sticky-editor-actions .button{min-height:34px;border-radius:var(--r-control)}.sticky-editor-actions>span{margin-left:6px;color:#60748c;font-size:var(--fs-small)}.vehicle-tabs{display:flex;align-items:end;gap:0;margin:0 0 8px;padding-top:8px;border-bottom:1px solid #9daec0;background:#edf3f8}.vehicle-tabs button{min-height:36px;padding:0 14px;color:#17304f;background:linear-gradient(#fff,#eaf0f6);border:1px solid #9daec0;border-bottom:0;font-weight:700;font-size:var(--fs-small);cursor:pointer}.vehicle-tabs button+button{border-left:0}.vehicle-tabs button.active{position:relative;bottom:-1px;color:#075dcc;background:#fff}.editor-notice{margin-bottom:8px;padding:8px 10px;color:#71490a;background:#fff7df;border:1px solid #e0c27d;font-size:var(--fs-small)}.editor-section{margin-bottom:10px;background:#fff;border:1px solid #a8b8c9;border-radius:var(--r-control);overflow:hidden}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;background:#edf3f8;border-bottom:1px solid #c9d4df}.section-title h2{margin:0;color:#17304f;font-size:var(--fs-body)}/* 8px, not 4. Measured on the running app: an 18px heading over a 16px description with 4px
   between them reads as one lump - only two pixels of size separate them, so the gap is the only
   thing doing the work. 8 is on the 2px rhythm and is the smallest step that visibly separates. */
.section-title p{margin:8px 0 0;color:#60748c;font-size:var(--fs-small)}.section-title>strong{color:#17304f;font-size:var(--fs-small)}.vehicle-form-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px 12px;padding:12px}.vehicle-field{display:grid;grid-template-columns:minmax(85px,.65fr) minmax(0,1.6fr);align-items:center;gap:8px;min-width:0}.vehicle-field>span{color:#17304f;font-size:var(--fs-small);font-weight:700}.vehicle-field small{display:none;grid-column:2;color:#a52229;font-size:var(--fs-micro)}.validation-summary{padding:6px 10px;color:#17633e;background:#e7f6ed;border:1px solid #a6d5bb;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700}.validation-summary.has-errors{color:#8d2026;background:#fde9ea;border-color:#e4b1b4}.validation-summary.has-warnings{color:#80500a;background:#fff2d8;border-color:#e5c784}.inline-tool{display:flex;align-items:center;gap:12px;padding:12px}.inline-tool span{color:#60748c;font-size:var(--fs-small)}.validation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}.validation-item{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;padding:8px;border:1px solid #d6dee7;border-radius:var(--r-control);background:#f9fbfd}.validation-item img{width:23px;height:23px;object-fit:contain}.validation-item span{display:flex;flex-direction:column;gap:2px;color:#5c6e84;font-size:var(--fs-small)}.validation-item strong{color:#17304f;text-transform:capitalize}.validation-item.error{border-left:4px solid #c9363e}.validation-item.warning{border-left:4px solid #d69216}.validation-item.success{grid-column:1/-1;border-left:4px solid #248653}.empty-tab{display:flex;min-height:280px;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-tab img{width:86px;height:86px;object-fit:contain}.empty-tab h2{margin:8px 0 4px;color:#17304f}.empty-tab p{margin:0;color:#60748c}.sales-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cad5e0;border-top:1px solid #cad5e0}.sales-summary-grid div{display:flex;flex-direction:column;gap:6px;padding:14px;background:#fff}.sales-summary-grid span{color:#60748c;font-size:var(--fs-micro)}.sales-summary-grid strong{color:#17304f;font-size:var(--fs-body)}.empty-inline{margin:12px;padding:18px;color:#60748c;background:#f8fafc;border:1px dashed #b9c7d5;text-align:center;font-size:var(--fs-small)}.rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}.rule-grid div{padding:10px 12px;color:#455a72;background:#f7f9fc;border:1px solid #d5dee7;border-left:4px solid #245f9f;font-size:var(--fs-small)}.file-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px}.file-card{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;min-height:105px;padding:12px;text-align:left;color:#17304f;background:#f7f9fc;border:1px solid #c3cfdb;border-radius:var(--r-control);cursor:pointer}.file-card:hover{background:#fff;border-color:#6e94bd}.file-card img{width:54px;height:54px;object-fit:contain}.file-card span{display:flex;min-width:0;flex-direction:column;gap:4px}.file-card strong{font-size:var(--fs-small)}.file-card small{color:#60748c;font-size:var(--fs-micro)}.file-card b{color:#075dcc;font-size:var(--fs-small)}.notes-editor{display:flex;flex-direction:column;gap:6px;padding:12px}.notes-editor>span{color:#17304f;font-size:var(--fs-small);font-weight:700}.notes-editor textarea{min-height:220px;resize:vertical}.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;padding:12px;color:#5b4143;background:#fff6f6;border:1px solid #dcafb1;border-left:4px solid #c9363e}.danger-zone>div{display:flex;flex-direction:column;gap:4px}.danger-zone strong{color:#8d2026;font-size:var(--fs-small)}.danger-zone span{font-size:var(--fs-small)}
@media(max-width:1300px){.vehicle-filter-grid{grid-template-columns:2fr repeat(2,1fr)}.filter-buttons{grid-column:auto}.vehicle-form-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.file-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sticky-editor-actions{top:58px}.vehicle-filter-grid{grid-template-columns:1fr 1fr}.vehicle-filter-grid .wide{grid-column:1/-1}.vehicle-form-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}.sales-summary-grid{grid-template-columns:repeat(2,1fr)}.column-check-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.vehicle-filter-grid,.vehicle-form-grid,.validation-list,.rule-grid,.file-card-grid{grid-template-columns:1fr}.vehicle-field{grid-template-columns:1fr}.vehicle-field small{grid-column:1}.vehicle-tabs{overflow:auto}.vehicle-tabs button{white-space:nowrap}.selection-strip,.vehicle-editor-heading,.danger-zone{align-items:flex-start;flex-direction:column}.sticky-editor-actions>span{margin-left:0}.sales-summary-grid{grid-template-columns:1fr}.column-check-grid{grid-template-columns:1fr}.filter-buttons{grid-column:1/-1}}
/* v0.3.1 VIN decoder */
.vin-tool{flex-wrap:wrap}.vin-tool #vinDecodeHelp{flex:1 1 340px}.button.compact{min-height:34px;padding-inline:11px;font-size:var(--fs-small)}

/* v0.3.2 - dashboard alignment and maintenance tile */
.attention-table{min-width:1050px;table-layout:fixed}
.attention-table .attention-col-severity{width:100px}
.attention-table .attention-col-stock{width:120px}
.attention-table .attention-col-area{width:170px}
.attention-table .attention-col-issue{width:auto}
.attention-table .attention-col-action{width:190px}
.attention-table th:nth-child(4){text-align:center}
.attention-table td:nth-child(4){padding-left:14px;padding-right:14px;text-align:left!important;vertical-align:middle;line-height:calc(var(--ui-table) + 7px);white-space:normal;overflow-wrap:anywhere}
.attention-table td:nth-child(5){text-align:center!important;vertical-align:middle}
.attention-table .desktop-action-button{width:160px;min-width:160px;min-height:30px;white-space:nowrap}
.parity-quick-card.quick-maintenance{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.parity-quick-card.quick-maintenance .quick-action-image{margin-inline:auto}
@media(max-width:560px){.parity-quick-card.quick-maintenance{grid-column:auto}}

/* v0.3.3 - centered quick actions and centered warning issue text */
.attention-table td:nth-child(4) {
  padding-left: 14px;
  padding-right: 14px;
  text-align: center !important;
  vertical-align: middle;
  line-height:calc(var(--ui-table) + 7px);
  white-space: normal;
  overflow-wrap: anywhere;
}
.attention-table tbody tr { min-height: 42px; }
.attention-table td { vertical-align: middle; }
.parity-quick-card,
.parity-quick-card.quick-maintenance {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  text-align: center;
  font: inherit;
}
.parity-quick-card .quick-action-image,
.parity-quick-card.quick-maintenance .quick-action-image {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  flex: 0 0 58px;
}
.parity-quick-card strong {
  display: block;
  width: 100%;
  min-height: calc(var(--ui-button) + 4px);
  text-align: center;
  line-height: calc(var(--ui-button) + 4px);
}
.parity-quick-card:focus-visible,
.desktop-action-button:focus-visible,
.link-btn:focus-visible {
  outline: 3px solid #6aa9e9;
  outline-offset: 2px;
}

/* Keep the full warning row visible on standard desktop widths. */
.attention-table { min-width: 900px; }
.attention-table .attention-col-severity { width: 85px; }
.attention-table .attention-col-stock { width: 105px; }
.attention-table .attention-col-area { width: 145px; }
.attention-table .attention-col-action { width: 180px; }

/* v0.3.4 - warning selection, detail, and repair routing */
.warning-row { cursor: pointer; }
/* Token-derived, not a hardcoded light blue: the selected row was #dcecff under the dark
   theme's light text, contrast 1.11 - the same defect the inventory table had. */
.warning-row.selected,
.warning-row:focus { background: var(--bluesoft) !important; box-shadow: inset 4px 0 var(--blue); outline: none; }
.warning-row:focus-visible { outline: 3px solid #6aa9e9; outline-offset: -3px; }
.warning-issue-button {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  color: #17283d;
  background: transparent;
  text-align: center;
  line-height:calc(var(--ui-table) + 7px);
  cursor: pointer;
}
.warning-issue-button:hover { color: #075dcc; text-decoration: underline; }
.warning-issue-button.align-left { text-align: left; }
.warning-detail-link { white-space: nowrap; }
.warning-detail-modal { width: min(860px, 100%); padding: 0; overflow: hidden; }
.warning-modal-heading { padding: 18px 20px; border-bottom: 1px solid #cbd6e1; background: #edf3f8; }
.warning-modal-heading .eyebrow { margin-bottom: 5px !important; }
.warning-summary-strip {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #17304f;
  background: #fff;
  border-bottom: 1px solid #d6dee7;
}
.warning-summary-strip strong { font-size:var(--fs-body); line-height:var(--lh-body); }
.warning-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; background: #f7f9fc; }
.warning-detail-grid section { padding: 14px; background: #fff; border: 1px solid #d1dbe5; border-left: 4px solid #245f9f; border-radius:var(--r-control); }
.warning-detail-grid section.warning-risk { border-left-color: #c9363e; }
.warning-detail-grid section.warning-fix-steps { grid-column: 1/-1; border-left-color: #248653; }
.warning-detail-grid h3 { margin: 0 0 7px; color: #17304f; font-size:var(--fs-small); }
.warning-detail-grid p,
.warning-detail-grid li { color: #4d6179; font-size:var(--fs-small); line-height:var(--lh-small); }
.warning-detail-grid p { margin: 0; }
.warning-detail-grid ol { margin: 0; padding-left: 20px; }
.warning-detail-grid li + li { margin-top: 5px; }
.warning-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 20px;
  background: #fff;
  border-top: 1px solid #cbd6e1;
}
.warning-navigation,
.warning-primary-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.data-check-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 9px 11px;
  color: #4d6179;
  background: #fff;
  border: 1px solid #a8b8c9;
  border-radius:var(--r-control);
  font-size:var(--fs-small);
}
.data-check-toolbar > div:last-child { display: flex; gap: 7px; flex-wrap: wrap; }
.data-check-table { min-width: 1120px; }
.data-check-table th:last-child,
.data-check-table td:last-child { text-align: center; }
.data-check-table .desktop-action-button { width: 180px; min-width: 180px; }
@media (max-width: 700px) {
  .warning-detail-grid { grid-template-columns: 1fr; }
  .warning-detail-grid section.warning-fix-steps { grid-column: auto; }
  .warning-detail-actions,
  .data-check-toolbar { align-items: stretch; flex-direction: column; }
  .warning-navigation,
  .warning-primary-actions { width: 100%; }
  .warning-primary-actions .button.primary { flex: 1 1 100%; }
}

/* v0.4.0 - persistent vendor management and Excel import/export */
.tools-page-shell{max-width:none}
.tools-section-tabs{display:flex;align-items:flex-end;gap:0;margin:-14px -14px 16px;border-bottom:1px solid #8da2b8;background:#e9f0f6}
.tools-section-tabs button{min-height:38px;padding:0 18px;border:0;border-right:1px solid #aebdcc;color:#17304f;background:#e9f0f6;font-weight:700;cursor:pointer}
.tools-section-tabs button:hover{background:#f7fafc}
.tools-section-tabs button.active{color:#075dcc;background:#fff;border-top:3px solid #075dcc}
.persistence-badge{align-self:flex-start;padding:8px 12px;color:#17643b;background:#e9f7ef;border:1px solid #9acbad;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700}
.success-notice{color:#265b3e;background:#eff9f3;border-color:#a7cfb6}
.vendor-editor-card{margin-bottom:10px;background:#fff;border:1px solid #a8b8c9;border-radius:var(--r-control);overflow:hidden}
.vendor-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;color:#17304f;background:#edf3f8;border-bottom:1px solid #c3cfdb;font-size:var(--fs-small)}
.vendor-section-title span{color:#60748c;font-weight:600}
.vendor-form-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:8px 12px;padding:12px}
.vendor-form-grid label{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:8px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.vendor-form-grid label.span-2{grid-column:span 2}
.vendor-form-grid label.span-full{grid-column:1/-1}
.vendor-form-grid input,.vendor-form-grid textarea{width:100%;min-width:0;padding:8px 8px;color:#17283d;background:#fff;border:1px solid #9caebe;border-radius:var(--r-control);font:inherit;font-weight:500}
.vendor-form-grid textarea{resize:vertical}
.vendor-form-grid input:focus,.vendor-form-grid textarea:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.vendor-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:0 4px}
.vendor-search-bar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding:10px;background:#fff;border:1px solid #a8b8c9;border-radius:var(--r-control)}
.vendor-search-bar label{display:grid;grid-template-columns:auto minmax(240px,1fr);align-items:center;gap:10px;min-width:min(520px,100%);color:#17304f;font-size:var(--fs-small);font-weight:700}
.vendor-search-bar input{width:100%;padding:8px 8px;border:1px solid #9caebe;border-radius:var(--r-control)}
.vendor-search-bar>span{margin-left:auto;color:#60748c;font-size:var(--fs-small)}
.vs-unverified{margin:5px 0 0;font-size:var(--fs-micro);font-weight:600;color:var(--muted,#5a6473)}
.vendor-table-wrap{min-height:390px}
.vendor-table{min-width:1080px;table-layout:auto}
.vendor-table th,.vendor-table td{text-align:center;vertical-align:middle}
.vendor-table tbody tr{cursor:pointer}
.vendor-table tbody tr:hover{background:#edf5fd}
.vendor-table tbody tr.selected,.vendor-table tbody tr:focus{background:#dcecff;box-shadow:inset 4px 0 #1264bd;outline:none}
.vendor-table td:nth-child(2){min-width:190px}
.vendor-table td:nth-child(5){min-width:210px;overflow-wrap:anywhere}
.inline-link{padding:0;border:0;color:#075dcc;background:transparent;text-decoration:underline;cursor:pointer;font:inherit;font-weight:700}
@media(max-width:1150px){.vendor-form-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}.vendor-form-grid label.span-2{grid-column:span 2}}
@media(max-width:650px){.tools-section-tabs{overflow-x:auto}.tools-section-tabs button{white-space:nowrap}.vendor-form-grid{grid-template-columns:1fr}.vendor-form-grid label,.vendor-search-bar label{grid-template-columns:1fr}.vendor-form-grid label.span-2,.vendor-form-grid label.span-full{grid-column:auto}.vendor-search-bar{align-items:stretch;flex-direction:column}.vendor-search-bar>span{margin-left:0}}

/* v0.4.1 - Dashboard stock navigator */
.panel-heading-note{color:#64748b;font-size:var(--fs-small);font-weight:700;text-align:right}
.selected-stock-warning-count{margin:4px 0 0;color:#536781;font-size:var(--fs-small);font-weight:700}
.dashboard-stock-controls{padding:10px;border-bottom:1px solid #d8e1eb;background:#f7fafe}
.dashboard-stock-nav-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px}
.stock-nav-button{min-width:84px;white-space:nowrap}
.dashboard-stock-select-label{display:grid;gap:4px;min-width:0;color:#27496f;font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.035em}
.dashboard-stock-select-label select{width:100%;min-width:0;height:34px;padding:0 30px 0 10px;border:1px solid #9db0c4;border-radius:var(--r-control);background:#fff;color:#0d2747;font-weight:700;font-size:var(--fs-small);line-height:1;font-family:inherit}
.dashboard-stock-search-row{position:relative;display:grid;gap:4px;margin-top:8px}
.dashboard-stock-search-row>label{color:#27496f;font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.035em}
.dashboard-stock-search-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.dashboard-stock-search-inputs input{min-width:0;height:34px;padding:0 10px;border:1px solid #9db0c4;border-radius:var(--r-control);background:#fff;color:#132b48;font-size:var(--fs-small)}
.dashboard-stock-results{position:absolute;z-index:40;top:59px;left:0;right:0;max-height:240px;overflow:auto;border:1px solid #8ea4bb;border-radius:var(--r-control);background:#fff;box-shadow:var(--shadow-raised)}
.dashboard-stock-results[hidden]{display:none}
.dashboard-stock-result{display:grid;grid-template-columns:90px minmax(0,1fr);grid-template-areas:"stock vehicle" "stock details";gap:2px 10px;width:100%;padding:8px 10px;border:0;border-bottom:1px solid #e1e8f0;background:#fff;color:#17304f;text-align:left;cursor:pointer}
.dashboard-stock-result:last-child{border-bottom:0}
.dashboard-stock-result:hover,.dashboard-stock-result:focus{outline:0;background:#e9f3fd}
.dashboard-stock-result strong{grid-area:stock;align-self:center;color:#0a4f9c;font-size:var(--fs-small)}
.dashboard-stock-result span{grid-area:vehicle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small);font-weight:700}
.dashboard-stock-result small{grid-area:details;overflow:hidden;color:#66778b;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-micro)}
.dashboard-stock-no-results{padding:12px;color:#7a2630;background:#fff5f5;font-size:var(--fs-small);font-weight:700;text-align:center}
.readiness-panel .selected-stock{gap:6px;padding:10px 10px 6px}
.readiness-panel .selected-stock>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.readiness-panel .selected-stock>small{color:#61748a;font-size:var(--fs-micro);line-height:calc(var(--ui-table) + 7px)}

@media(max-width:1220px){
 .dashboard-stock-nav-row{grid-template-columns:1fr 1fr}
 .dashboard-stock-select-label{grid-column:1/-1;grid-row:1}
 .stock-nav-button{grid-row:2}
}
@media(max-width:620px){
 .dashboard-stock-search-inputs{grid-template-columns:1fr 1fr}
 .dashboard-stock-search-inputs input{grid-column:1/-1}
}

/* v0.5.1 - persistent local test database and cleaned horizontal Quick Actions */
.parity-quick-grid{
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px 12px;
}
.parity-quick-card,
.parity-quick-card.quick-maintenance{
  width:100%;
  min-height:84px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:12px 24px;
  text-align:left;
  border:1px solid #9eafc1;
  border-radius:var(--r-control);
  background:linear-gradient(#f8fafc,#e7edf3);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #cbd5df;
}
.parity-quick-card.quick-maintenance{grid-column:1/-1}
.parity-quick-card:hover{background:linear-gradient(#fff,#edf3f8);border-color:#6e8fae;transform:none}
.parity-quick-card:active{background:#e2e9f0;box-shadow:inset 0 2px 4px rgba(16,43,78,.15)}
.parity-quick-card .quick-action-image,
.parity-quick-card.quick-maintenance .quick-action-image{
  display:block;
  width:60px;
  height:60px;
  margin:0;
  object-fit:contain;
  object-position:center;
  flex:0 0 60px;
  background:transparent;
}
.parity-quick-card strong{
  display:block;
  width:auto;
  min-width:148px;
  min-height:0;
  color:#07172b;
  text-align:left;
  line-height:var(--lh-body);
  font-size:var(--fs-body);
}
.parity-quick-card.quick-maintenance strong{min-width:auto}
.section-title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.editor-mode-badge.persistent,.persistent{color:#17643b;background:#e9f7ef;border-color:#8fc3a3}
.shutdown-screen{min-height:100vh;display:grid;place-content:center;gap:8px;padding:30px;text-align:center;color:#17304f;background:#edf2f7}
.shutdown-screen h1{margin:0;font-size:var(--fs-display)}.shutdown-screen p{margin:0;color:#60748c}
.button.danger-outline{color:#922b31;border-color:#d58f93;background:#fff7f7}
.button.danger-outline:hover{background:#fbe9ea}
@media(max-width:700px){
  .parity-quick-grid{grid-template-columns:1fr}
  .parity-quick-card.quick-maintenance{grid-column:auto}
  .parity-quick-card,.parity-quick-card.quick-maintenance{justify-content:flex-start;padding-inline:20px}
  .parity-quick-card strong{min-width:0}
}


/* v0.7.0 - app-managed SQLite persistence; phone and expense workflows retained */
.vendor-form-grid label:has([data-phone-input]){grid-template-rows:auto auto}
.vendor-form-grid label:has([data-phone-input])>span{grid-row:1/3}
.field-hint{grid-column:2;color:#64748b;font-size:var(--fs-micro);font-weight:600;line-height:var(--lh-micro)}
.expense-editor-card{margin-bottom:10px;border:1px solid #a8b8c9;border-radius:var(--r-control);background:#fff;overflow:hidden}
.expense-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;color:#17304f;background:#edf3f8;border-bottom:1px solid #c3cfdb;font-size:var(--fs-small)}
.expense-section-title span{color:#60748c;font-weight:600}
.expense-form-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px 12px;padding:12px}
.expense-form-grid label{display:grid;gap:4px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.expense-form-grid label.span-2{grid-column:span 2}
.expense-form-grid input,.expense-form-grid select{width:100%;min-width:0;height:34px;padding:6px 8px;color:#17283d;background:#fff;border:1px solid #9caebe;border-radius:var(--r-control);font:inherit;font-weight:500}
.expense-form-grid input:focus,.expense-form-grid select:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.expense-validation{display:flex;gap:10px;flex-wrap:wrap;margin:0 12px 10px;padding:8px 10px;border:1px solid #9fc5aa;border-radius:var(--r-control);color:#1c613c;background:#edf9f2;font-size:var(--fs-small);font-weight:700}
.expense-validation.has-errors{border-color:#df9b9f;color:#8b2028;background:#fff1f1}
.expense-validation span+span:before{content:'•';margin-right:10px}
.expense-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px 12px}
.expense-table{min-width:980px}
.expense-table tbody tr{cursor:pointer}
.expense-table tbody tr:hover{background:#edf5fd}
.expense-table tbody tr.selected,.expense-table tbody tr:focus{background:#dcecff;box-shadow:inset 4px 0 #1264bd;outline:none}
.expense-table td:nth-child(4){min-width:250px;text-align:left}
.expense-table td:nth-child(5){text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1150px){.expense-form-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:650px){.expense-form-grid{grid-template-columns:1fr}.expense-form-grid label.span-2{grid-column:auto}.field-hint{grid-column:1}.vendor-form-grid label:has([data-phone-input])>span{grid-row:auto}}

/* v0.7.1 - authoritative Sales model and read-only Sales Info */
.sales-filter-bar{display:grid;grid-template-columns:minmax(260px,1fr) 150px 170px auto;gap:10px;align-items:end;margin-bottom:10px;padding:12px;background:#fff;border:1px solid #a8b8c9;border-radius:var(--r-control)}
.sales-filter-bar label{display:grid;gap:4px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.sales-filter-bar input,.sales-filter-bar select{width:100%;min-width:0;height:34px;padding:6px 8px;color:#17283d;background:#fff;border:1px solid #9caebe;border-radius:var(--r-control);font:inherit;font-weight:500}
.sales-filter-bar input:focus,.sales-filter-bar select:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.sales-filter-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sales-table-wrap{min-height:360px}
.sales-info-table{width:100%;min-width:980px;table-layout:fixed}
.sales-info-table th,.sales-info-table td{vertical-align:middle}
.sales-info-table td:nth-child(3),.sales-info-table td:nth-child(4){white-space:normal;overflow-wrap:anywhere}

.sales-info-table td:nth-child(6),.sales-info-table td:nth-child(7),.sales-info-table td:nth-child(8){text-align:right;font-variant-numeric:tabular-nums}
.sales-info-table .vin-cell{font-family:var(--font-code);font-size:var(--fs-small);white-space:nowrap;overflow:visible}
.row-actions{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.sale-state,.forms-state{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:4px 8px;border:1px solid #aebdca;border-radius:var(--r-stadium);background:#eef3f7;color:#17304f;font-size:var(--fs-micro);font-weight:700;white-space:nowrap}
.sale-state.active{border-color:#78b48e;background:#e8f6ed;color:#17643b}
.forms-state.complete{border-color:var(--green);background:var(--greensoft);color:var(--green)}
.forms-state.partial{border-color:var(--amber);background:var(--ambersoft);color:var(--amber)}
.forms-state.not-started{border-color:var(--line);background:var(--soft);color:var(--muted)}
.sales-phase-one-summary{grid-template-columns:repeat(5,minmax(145px,1fr))}
@media(max-width:1250px){.sales-filter-bar{grid-template-columns:1fr 160px 180px}.sales-filter-actions{grid-column:1/-1}.sales-phase-one-summary{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:760px){.sales-filter-bar{grid-template-columns:1fr}.sales-filter-actions{grid-column:auto}.sales-phase-one-summary{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sales-phase-one-summary{grid-template-columns:1fr}}

/* v0.7.3 - persistent deal-entry workflow and field-level Sales audit */
.sales-workflow-shell{display:grid;gap:8px}
.sales-context-strip{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:8px 10px;border:1px solid #a8b8c9;background:#edf3f8;color:#17304f;font-size:var(--fs-small)}
.sales-context-strip>span{font-weight:700}.sales-context-strip>strong{font-size:var(--fs-micro);text-align:right}
.deal-action-groups{display:grid;grid-template-columns:auto auto auto 1fr;gap:8px;padding:6px;border:1px solid #b6c3cf;background:#f6f8fa}
.deal-action-groups>div{display:grid;gap:4px;padding-right:8px;border-right:1px solid #c7d1da}
.deal-action-groups>div:last-child{border-right:0;padding-right:0;justify-self:end}
.deal-action-groups strong{font-size:var(--fs-micro);color:#17304f}.deal-action-groups span{display:flex;gap:6px;flex-wrap:wrap}
.button.warning-action{color:#855d00;background:#fff3cd;border-color:#d8b24d}.button.warning-action:hover{background:#ffe9a8}
.deal-save-state{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #b7c5d2;background:#fff;font-size:var(--fs-micro);color:#40546c}
.sale-state.draft{border-color:#d2af58;background:#fff6dc;color:#725100}
.deal-layout{display:grid;grid-template-columns:minmax(620px,1.62fr) minmax(390px,1fr);gap:8px;align-items:start}.deal-column{display:grid;gap:8px;align-content:start;min-width:0}
.deal-card{border:1px solid #a8b8c9;background:#fff;padding:8px}.deal-card h3{margin:-8px -8px 8px;padding:6px 8px;border-bottom:1px solid #c4d0db;background:#edf3f8;color:#17304f;font-size:var(--fs-small)}
.deal-card p{margin:0 0 8px;color:#5f7288;font-size:var(--fs-micro)}
.deal-grid{display:grid;gap:6px 10px}.deal-grid.two-col{grid-template-columns:1fr 1fr}.seller-grid,.compliance-grid{grid-template-columns:1fr}.seller-grid .deal-field,.compliance-grid .deal-field{grid-template-columns:minmax(145px,170px) minmax(0,1fr);column-gap:10px}
.deal-field{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:6px;align-items:center;color:#17304f;font-size:var(--fs-micro);font-weight:700}
.deal-field>span{white-space:normal}.deal-field input,.deal-field select{width:100%;min-width:0;height:28px;padding:4px 6px;border:1px solid #9eacb9;border-radius:var(--r-control);background:#fff;color:#17283d;font:inherit;font-weight:500}
.deal-field input:focus,.deal-field select:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.deal-field input[readonly]{background:#f1f3f5;color:#556579}
.deal-inline-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0;padding:6px 0;border-top:1px solid #d5dde5;border-bottom:1px solid #d5dde5;font-size:var(--fs-micro);color:#62758a}
.total-card>strong{display:block;padding:8px;color:#17304f;font-size:var(--fs-small)}.total-card>small{display:block;color:#62758a;font-size:var(--fs-micro)}
.checklist-card{padding-bottom:6px}.checklist-legend{display:flex;gap:20px;margin-bottom:6px;color:#61748a;font-size:var(--fs-micro)}
.deal-check-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:8px 12px;padding:4px}
.deal-check{display:flex;align-items:center;gap:6px;color:#24384f;font-size:var(--fs-micro);font-weight:600}.deal-check.generated{color:#6c7b89}.deal-check input{width:14px;height:14px}
.checklist-notes-row{display:grid;grid-template-columns:minmax(420px,1fr) auto auto;gap:8px;align-items:end;margin-top:8px}.checklist-notes-row .deal-field{grid-template-columns:auto 1fr}
.deal-footer-status{padding:6px 8px;border:1px solid #a8b8c9;background:#edf3f8;color:#29415d;font-size:var(--fs-micro);font-weight:600}
.audit-details{margin-top:6px}.audit-details summary{cursor:pointer;color:#0b5ba6;font-weight:700}.audit-details table{width:100%;margin-top:6px;border-collapse:collapse;font-size:var(--fs-micro)}.audit-details th,.audit-details td{padding:4px 6px;border:1px solid #cbd5df;text-align:left}.audit-details th{background:#edf3f8}.activity-table td:last-child{min-width:440px}
@media(max-width:1450px) and (min-width:1251px){.deal-layout{grid-template-columns:minmax(600px,1.58fr) minmax(360px,1fr)}.seller-grid .deal-field,.compliance-grid .deal-field{grid-template-columns:minmax(130px,155px) minmax(0,1fr);column-gap:8px}}
@media(max-width:1250px){.deal-layout{grid-template-columns:1fr}.deal-column{display:grid}.deal-action-groups{grid-template-columns:1fr 1fr}.deal-action-groups>div:nth-child(2){border-right:0}.deal-action-groups>div:last-child{justify-self:stretch}.deal-check-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:720px){.sales-context-strip{align-items:flex-start;flex-direction:column}.sales-context-strip>strong{text-align:left}.deal-action-groups{grid-template-columns:1fr}.deal-action-groups>div{border-right:0;border-bottom:1px solid #c7d1da;padding:0 0 8px}.deal-action-groups>div:last-child{border-bottom:0}.deal-grid.two-col{grid-template-columns:1fr}.deal-check-grid{grid-template-columns:1fr}.checklist-notes-row{grid-template-columns:1fr}.deal-field,.checklist-notes-row .deal-field{grid-template-columns:1fr}}

/* v0.7.4 - protected Mark Vehicle Sold transaction */

/* v0.7.5 - customer master records, safe linking, and active-sale purchase history */
.customer-link-badge{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border:1px solid #70aa7b;border-radius:var(--r-stadium);background:#eaf7ed;color:#246333;font-size:var(--fs-micro);font-weight:700;vertical-align:middle}.customer-link-badge.unlinked{border-color:#c8a85a;background:#fff6dc;color:#735a16}
.customer-search-bar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:10px;border:1px solid #aab8c6;background:#edf3f8;margin-bottom:8px}.customer-search-bar label{display:flex;flex-direction:column;gap:4px;min-width:320px;flex:1}.customer-search-bar label span{font-size:var(--fs-small);font-weight:700;color:#223a56}.customer-search-bar input{height:32px;border:1px solid #9aaaba;padding:6px 8px}.customer-search-bar>span{margin-left:auto;color:#52677e;font-size:var(--fs-small);font-weight:700}
.customer-table td,.customer-table th{white-space:nowrap}.customer-detail-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(720px,1fr);gap:12px}.customer-history-card{overflow:hidden}.customer-history-card .table-wrap{max-width:100%;overflow:auto}.customer-history-card table{min-width:1050px}
.customer-picker-backdrop{z-index:1300}.customer-picker-modal{width:min(1120px,94vw);max-height:88vh;display:flex;flex-direction:column}.customer-picker-search{display:flex;gap:8px;align-items:center;margin:8px 0}.customer-picker-search input{flex:1;height:34px;border:1px solid #9aaaba;padding:6px 8px}.customer-picker-table{overflow:auto;max-height:55vh}.customer-picker-table table{min-width:880px}.customer-picker-table small{color:#66798d}.customer-picker-modal .modal-actions{margin-top:10px}
@media(max-width:1000px){.customer-detail-grid{grid-template-columns:1fr}.customer-search-bar label{min-width:220px}}

/* v0.7.6 - transactional Delete Sale, customer preservation, and tombstone audit */

/* v0.9.0 - controlled PDF generation and file-driven generated-form status */
.inline-actions,.form-center-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.file-storage-path{margin:8px 0;padding:8px 10px;border:1px solid #bdc9d5;background:#f5f8fb;color:#425972;font-size:var(--fs-micro);overflow-wrap:anywhere}.form-center-toolbar{justify-content:flex-start;margin-bottom:10px;padding:10px;border:1px solid #a8b8c9;background:#edf3f8}.form-center-toolbar .status{margin-left:auto}.storage-location{overflow-wrap:anywhere;word-break:break-word}

/* v0.9.0 - controlled PDF generation */
.form-generation-grid{grid-template-columns:minmax(360px,1.05fr) minmax(320px,1fr) minmax(300px,1fr)}
.form-generation-choice{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #dbe5ef;cursor:pointer}
.form-generation-choice:last-of-type{border-bottom:0}
.form-generation-choice input{width:18px;height:18px;margin-top:2px}
.form-generation-choice span:nth-child(2){display:flex;flex-direction:column;gap:4px}
.form-generation-choice small{line-height:calc(var(--ui-table) + 7px);color:#526b86}
.form-generation-choice .readiness-icon{margin-top:0}
.form-safety-note{font-size:var(--fs-body);color:#526b86;margin-top:12px}
.form-validation-errors{border-left:4px solid #c83f49;background:#fff2f3;padding:8px 12px;border-radius:var(--r-control)}
.form-validation-errors p{margin:6px 0;color:#7f2028}
@media (max-width:1100px){.form-generation-grid{grid-template-columns:1fr}}

/* v0.9.1 - safe vehicle deletion */


/* v0.9.3 - flexible restore and safe Stock # reuse */
.restore-vehicle-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 14px;padding:16px 18px;border:1px solid #d5a536;border-left:5px solid #c98d00;background:#fff8df;border-radius:var(--r-surface);color:#4d3900}
.restore-vehicle-panel h2{margin:2px 0 8px;color:#5d4200}.restore-vehicle-panel p{margin:4px 0;line-height:calc(var(--ui-copy) + 8px)}.restore-vehicle-panel .button{flex:0 0 auto}.restore-vehicle-panel.conflict{border-color:#cf4747;border-left-color:#cf4747;background:#fff0f0;color:#6c1717}
.restore-vehicle-panel.stock-reuse{border-color:#4f8bbd;border-left-color:#2369a2;background:#eef7ff;color:#123f62}.restore-vehicle-panel.stock-reuse h2{color:#123f62}.restore-vehicle-panel.stock-reuse.approved{border-color:#4d9b64;border-left-color:#2d8246;background:#eefaf2;color:#205b32}.restore-vehicle-panel.stock-reuse.approved h2{color:#205b32}
@media(max-width:800px){.restore-vehicle-panel{align-items:stretch;flex-direction:column}.restore-vehicle-panel .button{width:100%}}


/* v0.10.x - verified backup creation, restore, and history */
.system-cards{align-items:start}
.backup-card-wide{grid-column:1/-1}
.backup-status-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:8px;margin:12px 0}
.backup-status-grid p{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 10px;border:1px solid #c6d2dd;background:#f7fafc;border-radius:var(--r-control)}
.backup-status-grid strong{color:#17304f;font-size:var(--fs-micro)}.backup-status-grid span{color:#40566e;font-size:var(--fs-small)}
.button-row.wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.backup-folder-label{display:grid;gap:6px;margin-top:12px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.backup-folder-input-row{display:grid;grid-template-columns:minmax(320px,1fr) auto;gap:8px}
.backup-folder-input-row input{min-width:0;height:34px;padding:6px 8px;border:1px solid #9caebe;border-radius:var(--r-control);color:#17283d;background:#fff;font:inherit}
.backup-folder-input-row input:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.backup-folder-callout,.restore-backup-picker{padding:12px 14px;border:2px solid color-mix(in srgb,var(--blue) 55%,var(--line));border-left:5px solid var(--blue);border-radius:var(--r-surface);background:color-mix(in srgb,var(--blue) 8%,var(--surface));box-shadow:var(--shadow-raised)}
.backup-folder-callout>span,.restore-backup-picker>span{font-size:var(--fs-body);font-weight:800;color:var(--ink)}
.restore-backup-picker select{min-height:40px;padding:7px 34px 7px 10px;border:2px solid color-mix(in srgb,var(--blue) 48%,var(--line));border-radius:var(--r-control);background:var(--input-bg,#fff);color:var(--input-ink,var(--ink));font:inherit;font-weight:650}
.restore-backup-picker select:focus{outline:3px solid color-mix(in srgb,var(--blue) 32%,transparent);outline-offset:1px;border-color:var(--blue)}
.inline-warning{padding:8px 10px;border:1px solid #d99a9f;background:#fff1f1;color:#82232a;border-radius:var(--r-control)}
.inline-warning{padding:8px 10px;border:1px solid #d99a9f;background:#fff1f1;color:#82232a;border-radius:var(--r-control)}
.backup-history-panel{margin-top:12px}.backup-history-panel .data-table{min-width:1100px}.backup-history-panel td{vertical-align:top}
.table-subtext{display:block;max-width:360px;margin-top:4px;color:#64788f;font-size:var(--fs-micro);overflow-wrap:anywhere}
.checksum-cell{display:block;max-width:300px;font-family:var(--font-code);font-size:var(--fs-micro);white-space:normal;overflow-wrap:anywhere}
@media(max-width:1100px){.backup-status-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:680px){.backup-status-grid{grid-template-columns:1fr}.backup-folder-input-row{grid-template-columns:1fr}}

/* v0.10.3 - manual backup retention and paired cleanup */
.backup-retention-panel{margin-top:14px}
.backup-retention-panel .panel-heading{align-items:flex-start}
.backup-storage-summary{display:flex;min-width:170px;flex-direction:column;align-items:flex-end;gap:4px;padding:8px 10px;border:1px solid #b9c8d6;border-radius:var(--r-control);background:#f6f9fc;color:#526980}
.backup-storage-summary strong{color:#12395f;font-size:var(--fs-lead)}.backup-storage-summary span{font-size:var(--fs-micro);font-weight:700}
.retention-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px;margin:12px 0}
.retention-settings-grid label{display:grid;gap:6px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.retention-settings-grid input{height:34px;min-width:0;padding:6px 8px;border:1px solid #9caebe;border-radius:var(--r-control);background:#fff;color:#17283d;font:inherit}
.retention-settings-grid input:focus{outline:2px solid #6aa9e9;outline-offset:1px;border-color:#245f9f}
.retention-auto-status{margin:8px 0 12px;padding:8px 10px;border-left:4px solid var(--blue);background:var(--bluesoft);color:var(--ink);font-size:var(--fs-small)}
.backup-management-table{min-width:1120px}.backup-management-table th,.backup-management-table td{vertical-align:top}.backup-management-table td:first-child,.backup-management-table th:first-child{width:70px;text-align:center}.backup-management-table input[type="checkbox"]{width:16px;height:16px}.backup-management-table tr.protected-row{background:#f4f8fb}.backup-management-table .protected-label{display:inline-flex;padding:4px 8px;border:1px solid #8eb2d2;border-radius:var(--r-stadium);background:#eaf4fd;color:#235a88;font-size:var(--fs-micro);font-weight:700}
.cleanup-preview{margin:12px 0;padding:12px;border:2px solid #c88c20;border-radius:var(--r-control);background:#fff9e8}.cleanup-preview .panel-heading{margin-bottom:8px}.cleanup-preview-list{display:grid;gap:6px;margin:8px 0}.cleanup-preview-list>div{display:flex;justify-content:space-between;gap:16px;padding:8px 10px;border:1px solid #dfc98e;border-radius:var(--r-control);background:#fff}.cleanup-preview-list strong{overflow-wrap:anywhere}.cleanup-preview-list span{flex:0 0 auto;color:#5c6f83;font-size:var(--fs-micro);text-align:right}
.cleanup-history-table{min-width:980px}.cleanup-history-table td{vertical-align:top}.backup-type-pill{display:inline-flex;padding:4px 8px;border:1px solid #b5c3d1;border-radius:var(--r-stadium);background:#f2f5f8;color:#3e5268;font-size:var(--fs-micro);font-weight:700}.backup-type-pill.safety{border-color:#c7aa63;background:#fff6df;color:#735710}
@media(max-width:900px){.retention-settings-grid{grid-template-columns:1fr}.backup-storage-summary{align-items:flex-start}.cleanup-preview-list>div{flex-direction:column;gap:4px}.cleanup-preview-list span{text-align:left}}

/* v0.11.2 - orphan vehicle-folder audit and retention alignment polish */
.retention-settings-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;align-items:start;margin:12px 0 6px;padding:0 12px 0 0;box-sizing:border-box}
.retention-settings-grid label{min-width:0;text-align:left;align-content:start}
.retention-settings-grid label>span,.retention-settings-grid label>small{display:block;margin-left:0;text-align:left}
.retention-auto-status{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:8px 0 12px 0;padding:8px 10px 8px 8px;box-sizing:border-box}
.retention-auto-status strong,.retention-auto-status span{display:inline;margin:0;text-align:left}
.orphan-audit-panel{margin-top:14px}
.orphan-audit-panel .panel-heading{align-items:flex-start}
.orphan-audit-summary{display:flex;min-width:170px;flex-direction:column;align-items:flex-end;gap:4px;padding:8px 10px;border:1px solid #b9c8d6;border-radius:var(--r-control);background:#f6f9fc;color:#526980}
.orphan-audit-summary strong{color:#8b4b05;font-size:var(--fs-lead)}.orphan-audit-summary span{font-size:var(--fs-micro);font-weight:700}
.orphan-count-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px;margin:12px 0}
.orphan-count-grid p{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 10px;border:1px solid #c6d2dd;border-radius:var(--r-control);background:#f7fafc}
.orphan-count-grid strong{color:#12395f;font-size:var(--fs-lead)}.orphan-count-grid span{color:#526980;font-size:var(--fs-micro);font-weight:700}
.orphan-audit-table{min-width:1180px}.orphan-audit-table td{vertical-align:top}.orphan-audit-table th:last-child,.orphan-audit-table td:last-child{width:145px}
.folder-classification{display:inline-flex;padding:4px 8px;border:1px solid #7daa8a;border-radius:var(--r-stadium);background:#eaf7ed;color:#246333;font-size:var(--fs-micro);font-weight:700}
.folder-classification.orphan{border-color:#d28d37;background:#fff3df;color:#784700}
.button.compact{padding:6px 8px;font-size:var(--fs-micro);white-space:nowrap}
.orphan-history{margin-top:12px;padding:10px;border:1px solid #c6d2dd;border-radius:var(--r-control);background:#f7fafc}.orphan-history h3{margin:0 0 8px}.orphan-history p{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:10px;margin:0;padding:8px 0;border-top:1px solid #dbe3ea}.orphan-history p:first-of-type{border-top:0}.orphan-history span{color:#5d7187;font-size:var(--fs-micro);overflow-wrap:anywhere}
@media(max-width:1000px){.orphan-count-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.orphan-audit-summary{align-items:flex-start}}
@media(max-width:900px){.retention-settings-grid{padding-right:0}.retention-auto-status{width:100%;flex-wrap:wrap}.orphan-count-grid{grid-template-columns:1fr}.orphan-history p{grid-template-columns:1fr}}

/* v0.11.2 - organized System Tools workspace */
.system-tools-tabs{position:sticky;top:72px;z-index:18;display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 14px;padding:8px;border:1px solid #c5d2de;border-radius:var(--r-surface);background:rgba(237,242,247,.96);box-shadow:var(--shadow-raised);backdrop-filter:blur(8px)}
.system-tools-tabs button{flex:0 0 auto;min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-surface);background:transparent;color:#41566e;font-size:var(--fs-small);font-weight:700;cursor:pointer;white-space:nowrap}
.system-tools-tabs button:hover{background:#fff;color:var(--navy)}
.system-tools-tabs button.active{border-color:#aec2d4;background:#fff;color:#075dcc;box-shadow:var(--shadow-raised)}
.system-tab-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 14px;padding:14px 16px;border:1px solid #cbd7e2;border-radius:var(--r-surface);background:linear-gradient(135deg,#fff,#f5f9fc)}
.system-tab-heading h2{margin:1px 0 4px;color:var(--navy);font-size:var(--fs-h3)}.system-tab-heading p{margin:0;color:var(--muted);font-size:var(--fs-small)}.system-tab-version{flex:0 0 auto;color:#5f7287;font-size:var(--fs-small);font-weight:700}
.system-tab-content{min-width:0}.system-tab-content>.panel:first-child{margin-top:0}
.system-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.system-overview-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:142px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}
.system-overview-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-surface);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-h3);font-weight:700}.system-overview-card.health .system-overview-icon{color:var(--green);background:var(--greensoft)}.system-overview-card.files .system-overview-icon{color:var(--amber);background:var(--ambersoft)}
.system-card-kicker{margin:0!important;color:#65798f!important;font-size:var(--fs-micro)!important;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.system-overview-card h2{margin:4px 0 6px;color:var(--navy);font-size:var(--fs-h3)}.system-overview-card p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.system-overview-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding:12px 14px;border-left:4px solid #2f70ad;border-radius:var(--r-control);background:#edf6ff;color:#375a78;font-size:var(--fs-small)}.system-overview-note span{color:#58718a}
.system-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.system-workspace-grid .backup-card-wide{grid-column:1/-1}.database-export-card{grid-column:1/-1;max-width:620px}
.system-primary-panel{margin-top:0}.system-history-stack{display:grid;gap:10px;margin-top:14px}.system-history{border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow);overflow:hidden}.system-history summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:var(--navy);background:#f7f9fc;font-size:var(--fs-body);font-weight:700;cursor:pointer;list-style:none}.system-history summary::-webkit-details-marker{display:none}.system-history summary:after{content:'+';font-size:var(--fs-h3);color:#58718a}.system-history[open] summary:after{content:'−'}.system-history summary small{margin-left:auto;color:#6c7e91;font-size:var(--fs-micro);font-weight:700}.system-history[open] summary{border-bottom:1px solid var(--line)}.system-history .data-table{min-width:1050px}.orphan-history-details{margin-top:12px;border-radius:var(--r-surface);box-shadow:none}.orphan-history-details .orphan-history{margin:0;border:0;border-radius:0}
.system-maintenance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.system-health-card{grid-column:1/-1}.diagnostic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.diagnostic-list p{display:grid;gap:4px;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}.diagnostic-list strong{color:#4a5f75;font-size:var(--fs-small)}.diagnostic-list span{color:#17283d;font-size:var(--fs-small);overflow-wrap:anywhere}.maintenance-danger-card{border-color:#e3b8bb;background:#fffafa}
@media(max-width:900px){.system-tools-tabs{top:64px;overflow-x:auto}.system-tab-heading{align-items:flex-start;flex-direction:column}.system-overview-grid,.system-workspace-grid,.system-maintenance-grid{grid-template-columns:1fr}.system-overview-card{grid-template-columns:42px minmax(0,1fr)}.system-overview-card .button{grid-column:1/-1}.system-health-card,.system-workspace-grid .backup-card-wide,.database-export-card{grid-column:auto}.diagnostic-list{grid-template-columns:1fr}}
@media(max-width:640px){.system-tools-tabs{margin-left:-4px;margin-right:-4px}.system-tools-tabs button{padding:0 14px}.system-tab-version{white-space:normal}.system-overview-card{padding:16px}}

/* v0.11.2 - dedicated System Health and launcher diagnostics */
.system-health-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:14px;align-items:start}
.system-health-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}.system-health-heading h2{margin:0 0 4px}.system-health-heading p{margin:0;color:var(--muted)}
.diagnostic-tools-card{min-width:0}.compact-diagnostics{grid-template-columns:1fr}.compact-diagnostics p{padding:8px 0}
.maintenance-only-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.maintenance-only-grid .info-card{min-height:220px}
@media(max-width:1100px){.system-health-layout{grid-template-columns:1fr}.maintenance-only-grid{grid-template-columns:1fr 1fr}.maintenance-only-grid .info-card:first-child{grid-column:1/-1}}
@media(max-width:700px){.system-health-heading{flex-direction:column}.maintenance-only-grid{grid-template-columns:1fr}.maintenance-only-grid .info-card:first-child{grid-column:auto}}

/* v0.12.8 - PDF Alignment Center and persistent System Tools shutdown */
.system-tools-sticky-row{position:sticky;top:72px;z-index:19;display:flex;align-items:stretch;gap:10px;margin:-2px 0 14px}
.system-tools-sticky-row .system-tools-tabs{position:static;top:auto;flex:1;margin:0;min-width:0}
.system-close-button{flex:0 0 auto;align-self:stretch;min-width:150px;border-radius:var(--r-surface);background:#fff}
.alignment-center-shell{display:grid;gap:14px}
.alignment-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:12px;border:1px solid #c5d2de;border-radius:var(--r-surface);background:#f7fafc;box-shadow:var(--shadow)}
.alignment-toolbar label{display:grid;gap:6px;min-width:190px;color:#17304f;font-size:var(--fs-small);font-weight:700}
.alignment-toolbar select{height:36px;min-width:0;padding:6px 8px;border:1px solid #9caebe;border-radius:var(--r-control);background:#fff;color:#17283d;font:inherit}
.alignment-template-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.55fr);gap:18px;padding:16px 18px;border:1px solid #cbd7e2;border-radius:var(--r-surface);background:linear-gradient(135deg,#fff,#f5f9fc)}
.alignment-template-summary h2{margin:2px 0 6px;color:var(--navy)}.alignment-template-summary p{margin:4px 0;color:var(--muted)}.alignment-boundary{margin:12px 0;padding:14px 16px}.alignment-verification-provenance{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.alignment-verification-provenance p{margin:4px 0;overflow-wrap:anywhere}
.checksum-line{font-family:var(--font-code);font-size:var(--fs-micro);overflow-wrap:anywhere}
.alignment-toolbar select{height:36px;min-width:0;padding:6px 8px;border:1px solid #9caebe;border-radius:var(--r-control);background:#fff;color:#17283d;font:inherit}
.alignment-template-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.55fr);gap:18px;padding:16px 18px;border:1px solid #cbd7e2;border-radius:var(--r-surface);background:linear-gradient(135deg,#fff,#f5f9fc)}
.alignment-template-summary h2{margin:2px 0 6px;color:var(--navy)}.alignment-template-summary p{margin:4px 0;color:var(--muted)}
.checksum-line{font-family:Consolas,'Courier New',monospace;font-size:var(--fs-micro);overflow-wrap:anywhere}
.alignment-workspace{display:grid;grid-template-columns:minmax(520px,1.35fr) minmax(320px,.65fr);gap:14px;align-items:start}
.alignment-preview-card,.alignment-controls-card{padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}
.alignment-source-frame{display:block;width:100%;height:720px;border:1px solid #aebdca;border-radius:var(--r-control);background:#e9eef3}
.alignment-offset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.alignment-offset-grid label{display:grid;gap:6px;color:#17304f;font-size:var(--fs-small);font-weight:700}.alignment-offset-grid input[type="number"]{height:36px;padding:6px 8px;border:1px solid #9caebe;border-radius:var(--r-control)}
.alignment-offset-grid .verified-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #c4d6c8;border-radius:var(--r-control);background:#eef9f0}
.alignment-field-panel{margin:0}.alignment-field-table{min-width:980px}.alignment-field-table td{vertical-align:top}.alignment-field-table input[type="number"]{width:88px;height:32px;padding:4px 6px;border:1px solid #9caebe;border-radius:var(--r-control)}.alignment-field-table input[type="checkbox"]{width:15px;height:15px}.alignment-field-table td:last-child label{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:var(--fs-micro)}.alignment-visible{display:flex;align-items:center;gap:6px}
@media(max-width:1100px){.alignment-workspace,.alignment-template-summary{grid-template-columns:1fr}.alignment-source-frame{height:620px}}
@media(max-width:900px){.system-tools-sticky-row{top:64px;gap:6px}.system-close-button{min-width:120px;padding-left:10px;padding-right:10px}.alignment-source-frame{height:520px}}
@media(max-width:680px){.system-tools-sticky-row{flex-direction:column;position:static}.system-close-button{min-height:42px}.alignment-toolbar label{width:100%;min-width:0}.alignment-offset-grid{grid-template-columns:1fr}.alignment-offset-grid .verified-check{grid-column:auto}.alignment-source-frame{height:430px}}

/* v0.12.8 Easy Visual PDF Alignment Editor */
.easy-alignment-editor{min-width:0}
.easy-alignment-workspace{display:grid;grid-template-columns:minmax(220px,280px) minmax(520px,1fr) minmax(285px,340px);gap:12px;align-items:start;min-width:0}
.alignment-field-browser,.alignment-visual-card,.alignment-selected-card{min-width:0;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}
.alignment-field-browser{position:sticky;top:112px;max-height:calc(100vh - 132px);display:flex;flex-direction:column;overflow:hidden}
.alignment-field-browser .panel-heading{padding:12px 12px 6px;margin:0;border:0}.alignment-field-browser h2{margin:0}.alignment-field-browser p{margin:2px 0 0}
.alignment-field-search{display:grid;gap:8px;padding:8px 12px 10px;border-bottom:1px solid var(--line);background:#f7fafc}
.alignment-field-search input{height:36px;padding:6px 10px;border:1px solid #9caebe;border-radius:var(--r-control);background:#fff}
.alignment-field-search label,.alignment-preview-toolbar label{display:flex;align-items:center;gap:6px;color:#304861;font-size:var(--fs-small);font-weight:700}
.alignment-field-list{padding:8px;overflow:auto}
.alignment-field-group{margin:0 0 10px}.alignment-field-group h4{margin:0 4px 6px;color:#53697f;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase}
.alignment-field-list-item{display:block;width:100%;margin:0 0 4px;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-control);background:#f6f8fa;color:#1c3148;text-align:left;cursor:pointer}
.alignment-field-list-item:hover{border-color:#8ca9c2;background:#eef5fb}.alignment-field-list-item.selected{border-color:#1769aa;background:#e8f3fc;box-shadow:inset 3px 0 0 #1769aa}.alignment-field-list-item.hidden-field{opacity:.56}
.alignment-field-list-item span{display:block;font-size:var(--fs-small);font-weight:700}.alignment-field-list-item small{display:block;margin-top:2px;color:#60758a;font-size:var(--fs-micro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alignment-sequence-number{display:inline-block;min-width:24px;color:#1769aa;font-variant-numeric:tabular-nums}.alignment-sequence-group h4{position:sticky;top:0;z-index:1;padding:6px 4px;background:#fff;border-bottom:1px solid #dce5ec}
.alignment-visual-card{padding:10px;overflow:hidden}
.alignment-preview-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 2px 10px;color:#243d56;font-size:var(--fs-small)}.alignment-preview-toolbar .toolbar-spacer{flex:1 1 auto}
.alignment-page-viewport{height:calc(100vh - 285px);min-height:560px;overflow:auto;padding:18px;background:#dce4eb;border:1px solid #aebdca;border-radius:var(--r-control);overscroll-behavior:contain}
.alignment-page{position:relative;margin:auto;background:#fff;box-shadow:var(--shadow-raised);transform-origin:top left;user-select:none;touch-action:none;overflow:hidden}
.alignment-page>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.alignment-page.data-only{background:#fff}
.alignment-page.show-grid:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(14,96,155,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(14,96,155,.15) 1px,transparent 1px);background-size:10px 10px;z-index:4}
.alignment-overlay-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.alignment-overlay{position:absolute;display:inline-flex;align-items:flex-start;gap:2px;max-width:none;padding:1px 2px;border:1px dashed transparent;border-radius:var(--r-control);background:rgba(255,255,255,.18);color:#101820;font-family:Arial,Helvetica,sans-serif;line-height:1;white-space:nowrap;cursor:grab;pointer-events:auto;touch-action:none}
.alignment-overlay:hover{border-color:#1882c4;background:rgba(222,242,255,.82)}.alignment-overlay.selected{border:2px solid #006db6;background:rgba(210,239,255,.88);box-shadow:0 0 0 2px rgba(255,255,255,.75);z-index:20}.alignment-overlay:active{cursor:grabbing}
.alignment-overlay.hidden-field{opacity:.34;text-decoration:line-through}.alignment-overlay.overflow{border-color:#c56b00;background:rgba(255,238,205,.9)}
.alignment-overflow-badge{display:inline-grid;place-items:center;min-width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#b95100;color:#fff;font-size:9px;font-weight:700}
.alignment-selected-card{position:sticky;top:112px;padding:14px;max-height:calc(100vh - 132px);overflow:auto}.alignment-selected-card h2{margin:4px 0 8px;color:var(--navy);font-size:var(--fs-lead)}
.alignment-selected-value{display:grid;gap:4px;padding:10px;border:1px solid #c8d7e3;border-radius:var(--r-control);background:#f6f9fb}.alignment-selected-value span{color:#61758a;font-size:var(--fs-micro);font-weight:700;text-transform:uppercase}.alignment-selected-value strong{overflow-wrap:anywhere;color:#1d334b;font-size:var(--fs-small)}.alignment-selected-value em{color:#9a4f00;font-size:var(--fs-micro);font-style:normal;font-weight:700}
.alignment-selected-meta{margin:8px 0;color:#60758a;font-size:var(--fs-micro)}
.alignment-step-select{display:grid;gap:6px;margin:10px 0;color:#304861;font-size:var(--fs-small);font-weight:700}.alignment-step-select select{height:35px;border:1px solid #9caebe;border-radius:var(--r-control);padding:6px 8px;background:#fff}
.alignment-nudge-pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,38px);justify-content:center;gap:6px;margin:10px 0 14px}.alignment-nudge-pad button{border:1px solid var(--ctl-edge);border-radius:var(--r-control);background:var(--ctl-face);color:var(--ctl-ink);font-size:var(--fs-h3);font-weight:700;cursor:pointer}.alignment-nudge-pad button:hover{background:var(--ctl-face-hover)}.alignment-nudge-pad button[data-alignment-nudge="up"]{grid-column:2}.alignment-nudge-pad button[data-alignment-nudge="left"]{grid-column:1;grid-row:2}.alignment-nudge-pad button[data-alignment-nudge="down"]{grid-column:2;grid-row:2}.alignment-nudge-pad button[data-alignment-nudge="right"]{grid-column:3;grid-row:2}
.alignment-control-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}.alignment-control-section>span{flex:1 0 100%;color:#53697f;font-size:var(--fs-micro);font-weight:700;text-transform:uppercase}.alignment-control-section .button.active{border-color:color-mix(in srgb,var(--ctl-accent) 74%,#000);background:var(--ctl-accent);color:var(--ctl-accent-ink)}
.alignment-collapsible{margin-top:12px;border:1px solid #ccd8e2;border-radius:var(--r-control);background:#fafcfd}.alignment-collapsible>summary{padding:10px 10px;color:#25425e;font-size:var(--fs-small);font-weight:700;cursor:pointer}.alignment-collapsible>p{margin:0;padding:0 10px 8px;color:#61758a;font-size:var(--fs-micro)}
.alignment-advanced-grid,.alignment-printer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px 10px}.alignment-advanced-grid label,.alignment-printer-grid label{display:grid;gap:4px;color:#53697f;font-size:var(--fs-micro);font-weight:700}.alignment-advanced-grid input,.alignment-advanced-grid select,.alignment-printer-grid input{width:100%;height:32px;padding:4px 6px;border:1px solid #a9bac8;border-radius:var(--r-control);background:#fff;font-size:var(--fs-small)}.alignment-collapsible>.button{margin:0 10px 10px}
.alignment-sticky-actions{position:sticky;bottom:0;z-index:35;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid #b9c9d6;border-radius:var(--r-surface);background:rgba(248,251,253,.97);box-shadow:var(--shadow-raised);backdrop-filter:blur(5px)}
.alignment-sticky-actions .verified-action{margin-left:auto;border-color:#2d7c46;background:#e7f5eb;color:#1d6034;font-weight:700}.alignment-sticky-actions .verified-action:hover{background:#d6eedc}
@media(max-width:1500px){.easy-alignment-workspace{grid-template-columns:230px minmax(480px,1fr) 300px}}
@media(max-width:1180px){.easy-alignment-workspace{grid-template-columns:220px minmax(450px,1fr)}.alignment-selected-card{position:static;grid-column:1/-1;max-height:none}.alignment-field-browser{top:108px}.alignment-page-viewport{height:680px}}
@media(max-width:850px){.easy-alignment-workspace{grid-template-columns:1fr}.alignment-field-browser,.alignment-selected-card{position:static;max-height:none}.alignment-field-list{max-height:320px}.alignment-page-viewport{height:590px;min-height:430px}.alignment-sticky-actions .verified-action{margin-left:0}}
@media(max-width:600px){.alignment-preview-toolbar{align-items:stretch}.alignment-preview-toolbar .toolbar-spacer{display:none}.alignment-page-viewport{height:500px;padding:8px}.alignment-advanced-grid,.alignment-printer-grid{grid-template-columns:1fr}.alignment-sticky-actions{position:static}.alignment-sticky-actions .button{flex:1 1 45%}}

/* v0.12.8 Activity Log search and cancellation-deadline clarity */
.activity-search-toolbar{justify-content:flex-start;flex-wrap:wrap}
.activity-search-controls{display:flex;align-items:center;gap:8px;flex:1 1 560px;min-width:0}
.activity-search-controls .search{width:min(560px,100%);flex:1 1 320px}
.activity-result-count{color:var(--muted);font-size:var(--fs-small);font-weight:700;white-space:nowrap}
.activity-search-toolbar>button:last-child{margin-left:auto}
.activity-no-results{display:flex;flex-direction:column;align-items:center;gap:6px;padding:42px 18px;color:var(--muted);text-align:center}
.activity-no-results strong{color:var(--navy);font-size:var(--fs-body)}
.activity-no-results span{font-size:var(--fs-small)}
@media(max-width:720px){.activity-search-controls{align-items:stretch;flex-wrap:wrap}.activity-search-controls .search{flex-basis:100%;width:100%}.activity-result-count{width:100%}.activity-search-toolbar>button:last-child{margin-left:0}}

.co-buyer-summary{margin-top:14px;padding:12px;border:1px solid #c9d5e3;border-radius:var(--r-surface);background:#f7f9fc;display:flex;align-items:center;justify-content:space-between;gap:16px}.co-buyer-summary>div:first-child{display:grid;gap:4px}.co-buyer-summary span{color:#55687d}.co-buyer-actions{display:flex;gap:8px;flex-wrap:wrap}.modal-backdrop{position:fixed;inset:0;background:rgba(25,39,55,.48);display:grid;place-items:center;padding:24px;z-index:1000}.modal-card{width:min(900px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:var(--r-surface);box-shadow:var(--shadow-raised);padding:22px}.modal-header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #d7e0ea;padding-bottom:14px}.modal-header h2{margin:2px 0 6px}.icon-button{border:0;background:transparent;font-size:var(--fs-display);line-height:1;cursor:pointer}.co-buyer-source{margin:16px 0;padding:12px;background:#f4f7fb;border:1px solid #d4deea;border-radius:var(--r-surface);display:flex;align-items:center;justify-content:space-between;gap:16px}.co-buyer-source>div{display:flex;gap:8px}.modal-select{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:12px;margin-bottom:14px}.co-buyer-fields{margin-top:6px}.same-address-toggle{display:flex!important;align-items:center;gap:8px;min-height:38px}.same-address-toggle input{width:auto!important}.modal-note{margin:16px 0;color:#596c80}.modal-actions{display:flex;gap:10px;border-top:1px solid #d7e0ea;padding-top:16px}.co-buyer-modal .deal-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:720px){.co-buyer-summary,.co-buyer-source{align-items:stretch;flex-direction:column}.co-buyer-modal .deal-grid.two-col{grid-template-columns:1fr}.modal-select{grid-template-columns:1fr}}


/* v0.13.2 searchable co-buyer picker */
.co-buyer-customer-picker{border:1px solid var(--line,#c8d2dc);border-radius:var(--r-surface);padding:12px;background:#f7f9fb}.co-buyer-customer-picker label{display:grid;gap:6px}.co-buyer-customer-picker input{width:100%}.co-buyer-search-status{font-size:var(--fs-body);color:#52667b;margin:8px 0}.co-buyer-search-results{display:grid;gap:6px;max-height:260px;overflow:auto}.co-buyer-search-result{display:grid;text-align:left;gap:2px;border:1px solid #c7d2df;border-radius:var(--r-surface);background:#fff;padding:10px 12px;cursor:pointer}.co-buyer-search-result:hover,.co-buyer-search-result:focus{border-color:#2f63a3;box-shadow:0 0 0 2px rgba(47,99,163,.12)}.co-buyer-search-result.selected{border-color:#153a67;background:#eef5ff}.co-buyer-search-result span,.co-buyer-search-result small{color:#50647a}

.co-buyer-combobox-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.co-buyer-dropdown-button{min-width:46px;padding-inline:12px}.co-buyer-search-results{border-top:1px solid #d3dce6;padding-top:8px}.co-buyer-search-result:focus{outline:2px solid #2f63a3;outline-offset:1px}
.existing-customer-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #c9d5e3;border-radius:var(--r-control);background:#f7f9fc}.existing-customer-summary>div{display:grid;gap:4px}.existing-customer-summary span{color:#60748c;font-size:var(--fs-small)}.customer-selector-backdrop{z-index:120}.customer-selector-modal{width:min(1040px,96vw);height:min(720px,90vh);display:flex;flex-direction:column;overflow:hidden}.customer-selector-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) auto auto;align-items:end;gap:10px;margin:12px 0}.customer-selector-toolbar label{display:grid;gap:6px}.customer-selector-toolbar label span{color:#17304f;font-size:var(--fs-small);font-weight:700}.customer-selector-toolbar input{width:100%;min-height:36px;padding:8px 10px;border:1px solid #9eafc1;border-radius:var(--r-control)}.customer-selector-toolbar strong{align-self:center;color:#60748c;font-size:var(--fs-small)}.customer-selector-table-wrap{flex:1;min-height:260px;overflow:auto;border:1px solid #a8b8c9;background:#fff}.customer-selector-table{width:100%;min-width:850px;border-collapse:collapse;font-size:var(--fs-small)}.customer-selector-table th{position:sticky;top:0;z-index:1;padding:10px;color:#fff;background:#1d416d;text-align:left}.customer-selector-table td{padding:10px 10px;border-bottom:1px solid #d8e0e8}.customer-selector-table tbody tr{cursor:pointer}.customer-selector-table tbody tr:hover,.customer-selector-table tbody tr:focus{outline:none;background:#eef5fc}.customer-selector-table tbody tr.selected{background:#dcecff;box-shadow:inset 4px 0 #1264bd}.customer-selector-table tbody tr.primary-buyer{color:#718196;background:#f2f4f6}.customer-selector-table small{color:#8b5a00;font-weight:700}.customer-selector-table .empty{text-align:center;padding:32px;color:#60748c}.customer-selector-modal .modal-actions{margin-top:12px}
@media(max-width:800px){.customer-selector-toolbar{grid-template-columns:1fr auto}.customer-selector-toolbar strong{grid-column:1/-1}.customer-selector-modal{width:98vw;height:94vh}}

/* v0.13.7 selector modal stacking and focus protection */
.customer-selector-backdrop{z-index:1100}.customer-selector-modal{position:relative;z-index:1101}

/* v0.13.7 customer creation */
.customer-editor-modal{max-width:880px;width:min(880px,calc(100vw - 40px))}
.customer-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:4px 0 8px}
.customer-editor-grid label{display:grid;gap:6px;font-weight:700;color:#24364c}
.customer-editor-grid input,.customer-editor-grid textarea{width:100%}
.customer-editor-grid .span-full{grid-column:1/-1}
@media (max-width:760px){.customer-editor-grid{grid-template-columns:1fr}}
.optional-deal-actions{display:grid;gap:8px}.optional-deal-button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:12px;text-align:left;color:#17304f;background:#f7f9fc;border:1px solid #c9d5e3;border-radius:var(--r-surface);cursor:pointer}.optional-deal-button:hover{background:#fff;border-color:#6e94bd}.optional-deal-button span{display:grid;gap:4px}.optional-deal-button strong{font-size:var(--fs-small)}.optional-deal-button small{color:#55687d;font-size:var(--fs-micro);font-weight:500}.optional-deal-button b{color:#075dcc;font-size:var(--fs-small)}.deal-data-modal{width:min(980px,96vw)}.deal-data-modal-fields{margin-top:16px}.deal-data-modal .modal-actions{justify-content:flex-end}@media(max-width:720px){.deal-data-modal .deal-grid.two-col{grid-template-columns:1fr}}

/* v0.16.1 pricing-area optional detail controls */
.pricing-action-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.pricing-detail-button{display:inline-flex;align-items:center;gap:10px;min-width:178px;justify-content:space-between}.pricing-detail-button b{padding:4px 8px;border-radius:var(--r-stadium);background:#eef1f5;color:#5d6d7e;font-size:var(--fs-micro)}.pricing-detail-button.has-data{border-color:#5b8f68;background:#f3faf5}.pricing-detail-button.has-data b{background:#dff1e3;color:#225f32}@media(max-width:720px){.pricing-action-row{align-items:stretch}.pricing-action-row .button{flex:1 1 100%}}
.financial-filter-panel .filter-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto;gap:12px;align-items:end}.financial-filter-panel label{display:grid;gap:6px;font-weight:700}.financial-table{min-width:1700px}.financial-table .inline-warning{white-space:normal;display:inline-block;min-width:180px}@media(max-width:900px){.financial-filter-panel .filter-grid{grid-template-columns:1fr 1fr}.financial-filter-panel .button-row{grid-column:1/-1}}

/* v0.16.1 Vehicle Financials visual hierarchy */
.financial-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.financial-summary-card{display:flex;min-height:118px;flex-direction:column;justify-content:center;gap:6px;padding:18px 20px;background:#fff;border:1px solid #c8d5e2;border-radius:var(--r-surface);box-shadow:var(--shadow-raised)}.financial-summary-card span{color:var(--muted);font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* THE FIGURE ITSELF. It was #17304f — a hardcoded navy — and the dark-mode override two thousand
   lines below sets `color` on the CARD, which never reaches this element because this rule gives
   `strong` a colour of its own. So in dark mode the numbers were navy on near-black and could not
   be read at all. Reported with a screenshot; tokens now, so they follow whatever design is on. */
.financial-summary-card strong{color:var(--ink);font-size:var(--fs-h2);line-height:var(--lh-h2);
  font-variant-numeric:tabular-nums}
.financial-summary-card small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* MONEY IN IS GREEN, MONEY OUT IS RED, and pass-through money is neither.
   The four figures on this row are not the same kind of number and reading them as one block is
   how a good month and a bad one look alike at a glance. Revenue is what came in; invested cost is
   what went out; profit is either, decided by its sign. Sales tax is deliberately left NEUTRAL --
   it is the state's money passing through the dealership, never the lot's to win or lose, and
   colouring it either way would invite exactly the misreading the caption warns against. */
.financial-summary-card.is-in strong{color:var(--green)}
.financial-summary-card.is-out strong{color:var(--red)}
.financial-summary-card.loss{border-color:var(--red)}
.financial-summary-card.loss strong{color:var(--red)}.financial-filter-panel{padding:14px}.financial-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}.financial-filter-grid label{display:grid;gap:6px}.financial-filter-grid label span{color:#17304f;font-size:var(--fs-small);font-weight:700}.financial-filter-actions{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;justify-self:start}.financial-list-panel{padding:0;overflow:hidden}.financial-list-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border-bottom:1px solid #d5dfe9}.financial-list-heading h2{margin:0;color:#17304f;font-size:var(--fs-body)}.financial-list-heading p,.financial-list-heading>span{margin:4px 0 0;color:#718399;font-size:var(--fs-small)}.financial-responsive-table{width:100%;overflow-x:auto}.financial-compact-table{width:100%;min-width:1120px;table-layout:auto}.financial-compact-table th{white-space:nowrap}.financial-compact-table td{vertical-align:middle}.financial-compact-table td:nth-child(2){min-width:190px}.financial-state-unsold,.financial-state-none{display:inline-flex;padding:6px 8px;color:#51677f;background:#eef2f6;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700}.financial-warning-badge,.financial-ok-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700;white-space:nowrap}.financial-warning-badge{color:var(--red);background:var(--redsoft);border:1px solid var(--red);cursor:pointer}.financial-ok-badge{color:var(--green);background:var(--greensoft);border:1px solid var(--green)}.financial-profit-value{color:#17633e;font-weight:700}.financial-loss-value{color:#9a2730;font-weight:700}.financial-formula-card{margin-top:12px}/* 1.31:1 in dark — #17304f is navy ink for a white card, and this summary sets its own colour so
   the dark-mode override on the CARD never reached it. Accent rather than --ink because it is a
   disclosure toggle, and reading as interactive is the point. */
.financial-formula-card summary{cursor:pointer;color:var(--accent);font-size:var(--fs-small);font-weight:700}.financial-formula-card>div{padding-top:8px}.financial-detail-modal{width:min(820px,100%)}.financial-detail-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:10px 12px;background:#f4f7fa;border:1px solid #d3dde7;border-radius:var(--r-control)}.financial-detail-status strong{color:#526980;font-size:var(--fs-small)}.financial-detail-status-values{display:flex;align-items:center;gap:18px}.financial-detail-status-values>div{display:flex;align-items:center;gap:8px}.financial-detail-status-values small{color:#61758c;font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.035em}.financial-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.financial-detail-grid section,.financial-warning-section{padding:14px;background:#f9fbfd;border:1px solid #d6e0e9;border-radius:var(--r-control)}.financial-detail-grid h3,.financial-warning-section h3{margin:0 0 10px;color:#17304f;font-size:var(--fs-body)}.financial-detail-grid dl{margin:0}.financial-detail-grid dl div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid #e1e7ed}.financial-detail-grid dl div:last-child{border-bottom:0}.financial-detail-grid dt{color:#61758c;font-size:var(--fs-small)}.financial-detail-grid dd{margin:0;color:#17304f;font-size:var(--fs-small);font-weight:700;text-align:right}.financial-detail-grid dl div.total{margin-top:4px;padding-top:12px;border-top:2px solid #bdcad7}.financial-warning-section{margin-top:12px}.financial-warning-section ul{margin:0;padding-left:20px;color:#8b2a30;font-size:var(--fs-small)}.financial-complete-message{margin:0;color:#17633e;font-size:var(--fs-small)}@media(max-width:1100px){.financial-summary-grid{grid-template-columns:repeat(2,1fr)}.financial-filter-grid{grid-template-columns:1fr 1fr}.financial-filter-actions{grid-column:1/-1}}@media(max-width:700px){.financial-summary-grid,.financial-detail-grid{grid-template-columns:1fr}.financial-filter-grid{grid-template-columns:1fr}.financial-filter-actions{grid-column:auto;flex-wrap:wrap}.financial-list-heading{align-items:flex-start;flex-direction:column}.financial-detail-status{align-items:flex-start;flex-direction:column}.financial-detail-status-values{align-items:flex-start;flex-direction:column;gap:8px}}


/* v0.16.1 accounting waterfall and expense safety */
.financial-waterfall{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px}.financial-waterfall section{padding:14px;background:#f9fbfd;border:1px solid #d6e0e9;border-radius:var(--r-control)}.financial-waterfall h3{margin:0 0 10px;color:#17304f;font-size:var(--fs-body)}.financial-waterfall dl{margin:0}.financial-waterfall dl div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #e1e7ed}.financial-waterfall dl div:last-child{border-bottom:0}.financial-waterfall dt{color:#61758c;font-size:var(--fs-small)}.financial-waterfall dd{margin:0;color:#17304f;font-size:var(--fs-small);font-weight:700;text-align:right}.financial-waterfall .deduction dd,.financial-waterfall .loss-value{color:#a1262f}.financial-waterfall .subtotal,.financial-waterfall .total{margin-top:6px;padding-top:12px;border-top:2px solid #aebdcb}.financial-waterfall .subtotal dt,.financial-waterfall .total dt{color:#17304f;font-weight:700}.financial-waterfall .profit-value{color:#17633e}.financial-summary-card.loss strong,.financial-loss-value{color:#a1262f}@media(max-width:900px){.financial-waterfall{grid-template-columns:1fr}}
/* v0.16.1 Reports */
.report-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px}.report-category-nav{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:76px}.report-category-nav button{border:1px solid #c5d0dc;background:#fff;border-radius:var(--r-surface);padding:12px 14px;text-align:left;font-weight:700;color:#22364e;cursor:pointer}.report-category-nav button.active{background:#123356;color:#fff;border-color:#123356}.report-main{min-width:0;display:grid;gap:14px}.report-picker{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:18px}.report-picker h2{margin:2px 0 4px}.report-picker label{min-width:290px}.report-picker label span,.report-filter-grid label span{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:6px}.report-filter-grid{display:grid;grid-template-columns:150px 150px 150px minmax(190px,1fr) auto;gap:12px;align-items:end}.report-filter-panel{padding:14px}.report-actions{display:flex;gap:8px;white-space:nowrap}.report-output{padding:0;overflow:hidden}.report-output-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #d7e0e9}.report-output-heading h2{margin:2px 0 0}.report-table-wrap{overflow:auto;max-height:58vh}.report-table{width:100%;min-width:760px}.report-table th{position:sticky;top:0;z-index:1}.report-empty{padding:42px}.financial-waterfall .invested-total{border-top:3px double #8fa0b2;margin-top:8px;padding-top:12px;font-weight:700}
@media(max-width:1050px){.report-layout{grid-template-columns:1fr}.report-category-nav{position:static;flex-direction:row;flex-wrap:wrap}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-actions{grid-column:1/-1}}@media print{header,.top-nav,.report-category-nav,.report-picker label,.report-filter-panel,.system-close-button{display:none!important}.report-layout{display:block}.report-output{box-shadow:none;border:0}.report-table-wrap{max-height:none;overflow:visible}.report-table{min-width:0;font-size:10pt}}

/* v0.16.1 formal report console */
.report-console{display:grid;gap:12px}.report-menu-panel{padding:14px}.report-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.report-select-label{display:grid;gap:6px;min-width:min(420px,100%)}.report-select-label span,.contextual-report-filters label span{font-size:var(--fs-small);font-weight:700;color:#17304f}.report-select-label select{min-width:380px}.contextual-report-filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #d4dee8}.contextual-report-filters label{display:grid;gap:6px;min-width:130px}.contextual-report-filters input,.contextual-report-filters select{min-width:130px}.report-active-strip{display:flex;align-items:center;gap:18px;padding:10px 14px;background:#f4f7fa}.report-active-strip span{font-size:var(--fs-small);color:#60758b}/* THE PRINTED SHEET STAYS PAPER-WHITE ON PURPOSE — it is a preview of something that comes out of
   a printer, and inverting it would misrepresent the page. What it must NOT do is let the app's
   dark-mode ink tokens leak onto it: "Record Count: 3" rendered in --muted, a pale grey chosen for
   dark backgrounds, at 2.56:1 on white. Redefining the tokens INSIDE the sheet fixes every child at
   once rather than chasing them one selector at a time. */
.formal-report-sheet{padding:18px;background:#fff;font-family:"Courier New",monospace;color:#172536;
  --ink:#172536;--muted:#4a5666;--line:#c8d2dd;--surface:#fff}.formal-report-meta{display:flex;justify-content:space-between}.formal-report-sheet h2,.formal-report-sheet h3{text-align:center;letter-spacing:.03em}.formal-report-sheet h2{font-size:var(--fs-lead);margin:22px 0 6px}.formal-report-sheet h3{font-size:var(--fs-body);margin:0 0 18px}.formal-report-sheet .report-table{border-collapse:collapse;min-width:100%;font-family:"Courier New",monospace}.formal-report-sheet .report-table th,.formal-report-sheet .report-table td{padding:8px 10px;border-bottom:1px dashed #738091;text-align:left;white-space:nowrap}.formal-report-sheet .report-table th{background:transparent;color:#172536;border-top:2px solid #172536;border-bottom:2px solid #172536}.formal-report-totals{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;padding:12px 8px;border-top:2px solid #172536;font-size:var(--fs-small)}.custom-report-modal{width:min(860px,96vw)}.custom-report-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.custom-report-grid label{display:grid;gap:6px;font-weight:700}.custom-column-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:340px;overflow:auto;padding:12px;background:#f7f9fb;border:1px solid #d5dfe8;border-radius:var(--r-control)}.custom-column-list label{font-size:var(--fs-small)}.report-output{overflow:hidden}.report-table-wrap{overflow:auto;max-height:62vh}@media(max-width:800px){.report-select-label,.report-select-label select{min-width:100%}.custom-report-grid,.custom-column-list{grid-template-columns:1fr}.report-toolbar .button{flex:1 1 auto}}@media print{.report-menu-panel,.report-active-strip,header,.top-nav,.page-heading,.notice{display:none!important}.report-console,.report-output{display:block!important;border:0!important;box-shadow:none!important}.formal-report-sheet{padding:0;font-size:9pt}.report-table-wrap{max-height:none;overflow:visible}.formal-report-sheet .report-table th{position:static}}
/* v0.16.1 report alignment and custom report manager */
.report-table{width:100%;border-collapse:collapse;table-layout:auto}
.report-table th,.report-table td{padding:10px 12px;vertical-align:top;text-align:left;white-space:nowrap}
.report-table .numeric{text-align:right;font-variant-numeric:tabular-nums}
.report-table tfoot th{border-top:2px solid #183b61;border-bottom:0;font-weight:700;background:#f4f7fa}
.report-table tfoot th:first-child{text-align:left}
.custom-report-manager{width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column}
.custom-manager-layout{display:grid;grid-template-columns:240px 1fr;gap:18px;min-height:0;flex:1}
.saved-report-pane,.custom-builder-pane{min-width:0}
.saved-report-pane select{width:100%;height:100%;min-height:420px}
.custom-column-builder{display:grid;grid-template-columns:minmax(250px,1fr) 150px minmax(250px,1fr);gap:12px;align-items:stretch}
.custom-column-builder>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.custom-column-builder select{width:100%;min-height:420px}
.custom-column-actions{justify-content:center}
.custom-manager-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #ccd5df;padding-top:14px;margin-top:14px}
@media(max-width:850px){.custom-manager-layout{grid-template-columns:1fr}.saved-report-pane select{min-height:140px}.custom-column-builder{grid-template-columns:1fr}.custom-column-builder select{min-height:220px}.custom-column-actions{display:grid!important;grid-template-columns:repeat(2,1fr)}}
/* v0.16.1 print fitting and compact report output */
.formal-report-sheet .report-table{table-layout:fixed;width:100%}
.formal-report-sheet .report-table th,.formal-report-sheet .report-table td{overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:calc(var(--ui-table) + 4px)}
.formal-report-sheet[class*="report-columns-"] .report-table th,.formal-report-sheet[class*="report-columns-"] .report-table td{padding:6px 8px}
.formal-report-sheet.report-columns-9 .report-table,.formal-report-sheet.report-columns-10 .report-table{font-size:var(--fs-small)}
.formal-report-sheet.report-columns-11 .report-table,.formal-report-sheet.report-columns-12 .report-table{font-size:var(--fs-micro)}
.formal-report-sheet.report-columns-13 .report-table,.formal-report-sheet.report-columns-14 .report-table,.formal-report-sheet.report-columns-15 .report-table{font-size:var(--fs-micro)}
@page{size:landscape;margin:.25in}
@media print{
 html,body{background:#fff!important;margin:0!important;padding:0!important}
 body>*{display:none!important}
 main,.page-shell,.report-console,.report-output,.formal-report-sheet{display:block!important}
 .page-shell>*:not(.report-console),.report-console>*:not(.report-output){display:none!important}
 .report-output{position:absolute!important;left:0!important;top:0!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;box-shadow:none!important}
 .formal-report-sheet{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;font-size:7.5pt!important;break-inside:avoid-page}
 .formal-report-sheet h2{margin:8px 0 2px!important;font-size:10pt!important}.formal-report-sheet h3{margin:0 0 7px!important;font-size:8pt!important}
 .formal-report-meta{font-size:7pt!important}
 .report-table-wrap{overflow:visible!important;max-height:none!important;width:100%!important}
 .formal-report-sheet .report-table{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:7pt!important}
 .formal-report-sheet .report-table th,.formal-report-sheet .report-table td{padding:3px 4px!important;white-space:normal!important;overflow-wrap:anywhere!important}
 .formal-report-sheet.report-columns-10 .report-table,.formal-report-sheet.report-columns-11 .report-table,.formal-report-sheet.report-columns-12 .report-table{font-size:6.2pt!important}
 .formal-report-sheet.report-columns-13 .report-table,.formal-report-sheet.report-columns-14 .report-table,.formal-report-sheet.report-columns-15 .report-table{font-size:5.4pt!important}
 .report-table thead{display:table-header-group}.report-table tfoot{display:table-row-group}.report-table tr{break-inside:avoid}
 .footer{display:none!important}
}
/* v0.17.0 activity log completion and adaptive reports */
.activity-filter-panel{padding:14px}.activity-filter-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(4,minmax(120px,1fr)) auto;gap:10px;align-items:end}.activity-filter-grid label{display:grid;gap:6px}.activity-filter-grid label span{font-size:var(--fs-small);font-weight:700}.activity-date-range{grid-column:1/span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.activity-filter-actions{display:flex;gap:8px}.activity-result-row{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #d5dfe8}.activity-retention-management{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.activity-retention-management label{display:flex;align-items:center;gap:8px}.activity-row{cursor:pointer}.activity-row.selected{outline:2px solid #245b90}.activity-detail-modal{width:min(900px,96vw)}.activity-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}.activity-detail-grid>div{padding:12px;border:1px solid #d4dee8;border-radius:var(--r-control);background:#f8fafc}
.formal-report-sheet .report-table{width:max-content;min-width:0;max-width:100%;margin:0 auto}.formal-report-sheet .report-table th,.formal-report-sheet .report-table td{padding:6px 10px;white-space:nowrap}.formal-report-sheet.report-columns-1 .report-table,.formal-report-sheet.report-columns-2 .report-table,.formal-report-sheet.report-columns-3 .report-table,.formal-report-sheet.report-columns-4 .report-table{font-size:var(--fs-lead)}.formal-report-sheet.report-columns-5 .report-table,.formal-report-sheet.report-columns-6 .report-table,.formal-report-sheet.report-columns-7 .report-table{font-size:var(--fs-body)}.formal-report-sheet.report-columns-8 .report-table,.formal-report-sheet.report-columns-9 .report-table,.formal-report-sheet.report-columns-10 .report-table{font-size:var(--fs-small)}
@media(max-width:1100px){.activity-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-date-range{grid-column:1/-1}.activity-filter-actions{grid-column:1/-1}.activity-retention-management{align-items:flex-start;flex-wrap:wrap}}
@media print and (max-width:0px){body *{visibility:hidden!important}.report-output,.report-output *{visibility:visible!important}.report-output{position:fixed!important;inset:0!important;width:100%!important;height:auto!important;display:block!important;background:#fff!important}.formal-report-sheet{display:block!important;width:100%!important;max-width:100%!important}.formal-report-sheet .report-table{width:100%!important;max-width:100%!important;table-layout:auto!important;margin:0!important}.formal-report-sheet .report-table th,.formal-report-sheet .report-table td{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.formal-report-sheet.report-columns-1 .report-table,.formal-report-sheet.report-columns-2 .report-table,.formal-report-sheet.report-columns-3 .report-table,.formal-report-sheet.report-columns-4 .report-table{font-size:10pt!important}.formal-report-sheet.report-columns-5 .report-table,.formal-report-sheet.report-columns-6 .report-table,.formal-report-sheet.report-columns-7 .report-table{font-size:8.5pt!important}.formal-report-sheet.report-columns-8 .report-table,.formal-report-sheet.report-columns-9 .report-table,.formal-report-sheet.report-columns-10 .report-table{font-size:7pt!important}.formal-report-sheet.report-columns-11 .report-table,.formal-report-sheet.report-columns-12 .report-table{font-size:6pt!important}.formal-report-sheet.report-columns-13 .report-table,.formal-report-sheet.report-columns-14 .report-table,.formal-report-sheet.report-columns-15 .report-table{font-size:5.2pt!important}}

/* v0.17.2 corrective layout */
.activity-table{width:100%;table-layout:fixed}
.activity-table th,.activity-table td{vertical-align:top;white-space:normal;overflow-wrap:normal;word-break:normal;padding:12px 10px;line-height:calc(var(--ui-table) + 7px)}
.activity-table th:nth-child(1),.activity-table td:nth-child(1){width:150px}
.activity-table th:nth-child(2),.activity-table td:nth-child(2){width:120px}
.activity-table th:nth-child(3),.activity-table td:nth-child(3){width:110px}
.activity-table th:nth-child(4),.activity-table td:nth-child(4){width:190px}
.activity-table th:nth-child(5),.activity-table td:nth-child(5){width:115px}
.activity-table th:nth-child(7),.activity-table td:nth-child(7){width:88px;text-align:right}
.activity-table td:nth-child(1){white-space:nowrap}
.activity-table .button.compact{white-space:nowrap}
@media(max-width:1050px){.activity-table{min-width:980px}.activity-table-wrap{overflow:auto}}

/* v0.17.2 audit table collision fix */
.activity-table-wrap{overflow:auto}
.activity-table{width:100%;min-width:1120px;table-layout:fixed;border-collapse:collapse}
.activity-table .audit-log-row{display:table-row!important;cursor:pointer}
.activity-table .audit-log-row.selected{outline:2px solid #245b90;outline-offset:-2px}
.activity-table .audit-log-row td{display:table-cell!important;padding:11px 12px!important;height:auto!important;min-width:0!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;vertical-align:top!important}
.activity-table th:nth-child(1),.activity-table td:nth-child(1){width:170px!important;white-space:nowrap!important}
.activity-table th:nth-child(2),.activity-table td:nth-child(2){width:130px!important}
.activity-table th:nth-child(3),.activity-table td:nth-child(3){width:120px!important}
.activity-table th:nth-child(4),.activity-table td:nth-child(4){width:210px!important}
.activity-table th:nth-child(5),.activity-table td:nth-child(5){width:125px!important}
.activity-table th:nth-child(6),.activity-table td:nth-child(6){width:auto!important;min-width:260px!important}
.activity-table th:nth-child(7),.activity-table td:nth-child(7){width:96px!important;min-width:96px!important;text-align:right!important}
.activity-table td:last-child{min-width:96px!important}
.activity-table .audit-log-row strong{font-size:inherit}
.vehicle-file-summary{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;margin:16px 0}.file-summary-card{border:1px solid #cbd8e6;border-radius:var(--r-surface);padding:14px;display:grid;gap:6px;background:#f8fbfe}.file-summary-card strong{font-size:16px}.file-summary-card span{font-weight:700}.file-add-panel{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:14px;border:1px solid #cbd8e6;border-radius:var(--r-surface);background:#f8fbfe;margin-bottom:14px}.file-add-panel label{display:grid;gap:6px}.file-add-panel small{flex-basis:100%;color:#526b86}.file-audit-summary{padding:10px 0;color:#415a74}.managed-files-table td:first-child{min-width:260px}.file-path-warning{display:block;color:#9d271f;margin-top:4px}.managed-files-table .inline-actions{white-space:nowrap}@media(max-width:1000px){.vehicle-file-summary{grid-template-columns:repeat(2,1fr)}}
.file-add-panel-improved{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(130px,.5fr) minmax(260px,1.5fr) minmax(180px,.8fr) auto;align-items:end}.file-add-heading{display:grid;gap:4px;align-self:center}.file-add-heading h3{margin:0}.file-add-heading small{max-width:360px}.file-add-rule{grid-column:1/-1}.file-add-panel-improved input[type=file]{max-width:260px}@media(max-width:1200px){.file-add-panel-improved{grid-template-columns:1fr 1fr}.file-add-heading,.managed-drop,.file-add-rule{grid-column:1/-1}}@media(max-width:720px){.file-add-panel-improved{grid-template-columns:1fr}.file-add-panel-improved .button{width:100%}}
.vehicle-file-summary{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;margin:16px 0}.file-summary-card{border:1px solid #cbd8e6;border-radius:var(--r-surface);padding:14px;display:grid;gap:6px;background:#f8fbfe}.file-summary-card strong{font-size:16px}.file-summary-card span{font-weight:700}.file-add-panel{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:14px;border:1px solid #cbd8e6;border-radius:var(--r-surface);background:#f8fbfe;margin-bottom:14px}.file-add-panel label{display:grid;gap:6px}.file-add-panel small{flex-basis:100%;color:#526b86}.file-audit-summary{padding:10px 0;color:#415a74}.managed-files-table td:first-child{min-width:260px}.file-path-warning{display:block;color:#9d271f;margin-top:4px}.managed-files-table .inline-actions{white-space:nowrap}@media(max-width:1000px){.vehicle-file-summary{grid-template-columns:repeat(2,1fr)}}


/* v0.21.1 Users, Roles, and Security */
body.security-locked{background:linear-gradient(135deg,#eef3f8 0%,#f8fafc 55%,#e8eef5 100%);min-height:100vh}
body.security-locked .footer{display:none}
.security-gate{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:32px 18px}
.security-gate-card{width:min(480px,100%);background:#fff;border:1px solid #d8e0e8;border-radius:var(--r-surface);box-shadow:var(--shadow-raised);padding:30px;display:grid;gap:16px}
.security-gate-card h1{margin:0;font-size:var(--fs-display);line-height:var(--lh-display)}.security-gate-card p{margin:0;color:#4f6073}
.security-gate-card label{display:grid;gap:8px;font-weight:700;color:#27384a}.security-gate-card input{width:100%}
.security-gate-footnote{border-top:1px solid #e3e8ee;padding-top:14px;font-size:var(--fs-small)!important}.security-brand{display:grid;gap:8px}
.security-settings-grid{display:grid;gap:18px}.security-enable-card{border-left:5px solid #315f91}.security-current-card .diagnostic-list p{grid-template-columns:minmax(130px,.55fr) 1fr}
.security-users-card{grid-column:1/-1}.security-users-table{min-width:960px}
.security-users-table input[type="text"],.security-users-table input:not([type]),.security-users-table select{min-width:140px;width:100%}
.security-users-table input[type="checkbox"]{width:18px;height:18px;min-width:18px}
.security-create-user{margin-top:18px;border-top:1px solid #e1e7ee;padding-top:14px}.security-create-user summary{cursor:pointer;font-weight:700;color:#244e7a;margin-bottom:14px}
.recovery-code-card{border:2px solid #c38922;background:#fffaf0}.recovery-code-card code{display:block;font-size:23px;letter-spacing:.08em;font-weight:700;padding:14px;background:#fff;border:1px dashed #b9852c;border-radius:var(--r-surface);overflow-wrap:anywhere}
.role-matrix{display:grid;gap:10px}.role-matrix-row{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #e5eaf0}.role-matrix-row:last-child{border-bottom:0}.role-matrix-row strong{color:#25384c}.role-matrix-row span{color:#526477;font-size:var(--fs-body)}
.nav-user-chip{display:flex;align-items:center;gap:8px;margin-left:auto;padding:6px 8px 6px 12px;border-left:1px solid rgba(255,255,255,.18);color:#fff;font-size:var(--fs-small)}.nav-user-chip strong{display:block;font-size:var(--fs-body)}.nav-user-chip span{opacity:.82}.nav-user-chip button{white-space:nowrap}
@media (min-width:1000px){.security-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.security-users-card,.recovery-code-card{grid-column:1/-1}}
@media (max-width:760px){.security-gate-card{padding:22px}.role-matrix-row{grid-template-columns:1fr}.nav-user-chip{width:100%;border-left:0;border-top:1px solid rgba(255,255,255,.18);justify-content:space-between}}

/* v0.21.1 security layout and least-privilege corrections */
.security-session-control{margin-left:auto;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-left:1px solid #b7c5d3;background:#edf3f8;min-height:42px}
/* A deliberately tight two-line stack (name over role). Tight is right here; a ratio is not — 1.2
 * against a 16px name is 19.2px. --lh-micro is the tightest step that is a whole pixel at all four
 * text-size settings, so the stack keeps its density and loses the half-pixel baselines. */
.security-user-chip{display:grid;line-height:var(--lh-micro);min-width:110px;color:#17324f}.security-user-chip strong{font-size:var(--fs-body)}.security-user-chip small{font-size:var(--fs-micro);color:#5a6e82;margin-top:4px}
.security-signout-button,.security-page-signout{background:#7e1f1f!important;border-color:#7e1f1f!important;color:#fff!important;font-weight:700!important;box-shadow:var(--shadow)}
.security-signout-button:hover,.security-page-signout:hover{background:#641717!important;border-color:#641717!important}
.security-settings-grid .info-card{min-width:0}

/* A 64-character SHA-256 checksum has no space in it, so nothing in normal wrapping is
 * allowed to break it and it simply ran 563px wide on a 375px screen. Same for the Windows
 * paths and VINs AutoSteward prints. These are values a dealer reads or copies, not prose - a
 * mid-string break is the correct outcome, and far better than a page that scrolls sideways. */
code,.mono,.path-text{overflow-wrap:anywhere;word-break:break-word}

/* The login-background card is a single-column grid whose track was left at auto, so it sized
 * to its widest child and spilled 41px past its own padding box on a phone. The extra-large
 * font-scale block already carried this exact fix - narrow screens hit the same wall for the
 * same reason and were never given it. There is only ever one column here, so filling the
 * parent and shrinking when it must is right at every width. */
/* This heading had no font-size at all, so it fell through to the browser default of 1.17em —
   18.72px against a 16px root, the only fractional FONT-SIZE left in the app. */
.branding-background-card{grid-template-columns:minmax(0,1fr)}
.branding-background-card>h3{margin:0 0 4px;font-size:var(--fs-h3);color:var(--navy)}

/* Same story as the <select> above, one control over. A file input is sized by the native
 * "Choose File / no file chosen" widget, and as a grid item its min-width:auto made that
 * intrinsic width the floor for the whole track - 353px inside a 293px card. Letting it
 * shrink lets the track shrink with it. */
input{min-width:0;max-width:100%}

/* The checklist note row asks for minmax(420px,1fr) plus two auto button columns - a hard
 * floor around 705px. It collapses to one column below 720px, and above 1250px the deal
 * layout is wide enough to hold it. In between, the deal layout has already stacked into a
 * single ~481px column, and nothing covered that gap: the row overran it and scrolled the
 * whole deal screen sideways at exactly iPad width.
 *
 * min(420px,100%) clamps the floor to whatever room actually exists, and the row stacks
 * outright once the layout is single-column, so the buttons sit under the field instead of
 * off the side of the screen. */
.checklist-notes-row{grid-template-columns:minmax(min(420px,100%),1fr) auto auto}
@media(max-width:1250px){.checklist-notes-row{grid-template-columns:minmax(0,1fr)}}.security-setup-grid,.security-password-grid,.security-user-create-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px 16px;align-items:end}
.security-setup-grid label,.security-password-grid label,.security-user-create-grid label,.security-test-grid label{display:grid;gap:6px;font-weight:700}.security-setup-grid input,.security-password-grid input,.security-user-create-grid input,.security-user-create-grid select,.security-test-grid input{width:100%;min-width:0}
.security-password-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.security-password-grid .button{align-self:end;grid-column:1/-1;justify-self:start;min-height:43px}
.security-create-user{margin-top:22px;padding:20px;border:1px solid #cfdae5;border-radius:var(--r-surface);background:#f6f9fc}.security-create-user>div:first-child{margin-bottom:14px}.security-create-user h3{margin:0 0 4px}.security-create-user p{margin:0;color:#586b7e}
.security-user-create-grid{grid-template-columns:minmax(160px,.85fr) minmax(190px,1fr) minmax(150px,.75fr) minmax(190px,1fr) minmax(190px,1fr) auto}.security-create-button{min-height:43px;align-self:end;white-space:nowrap}
.security-test-controls{grid-column:1/-1;border-left:5px solid #b97816}.security-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.security-test-grid>section{display:grid;gap:12px;padding:16px;border:1px solid #d5dee8;border-radius:var(--r-surface);background:#fafbfd}.security-test-grid h3,.security-test-grid p{margin:0}
.strict-read-only input:not([type="search"]),.strict-read-only textarea,.strict-read-only select[data-draft-field]{background:#f2f4f6;color:#4c5966}
@media(max-width:1250px){.security-user-create-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.security-create-button{justify-self:start}.security-password-grid{grid-template-columns:repeat(2,minmax(200px,1fr))}.security-password-grid .button{justify-self:start}}
@media(max-width:780px){.security-session-control{width:100%;margin-left:0;border-left:0;border-top:1px solid #b7c5d3;justify-content:space-between}.security-setup-grid,.security-password-grid,.security-user-create-grid,.security-test-grid{grid-template-columns:1fr}.security-signout-button{min-width:110px}}

/* v0.22.1 account menu and offline application updates */
.header-user-menu{margin-left:auto;display:flex;align-items:center;min-height:34px}
.header-user-menu+.system-nav-dropdown{margin-left:8px}
.account-menu-button{display:flex;align-items:center;gap:10px;min-height:52px;padding:9px 14px;border:1px solid #9db0c4;border-radius:var(--r-control);background:#f7fafc;color:#17304f;cursor:pointer;text-align:left}
.account-menu-button strong{font-size:var(--fs-body)}.account-menu-button small{font-size:var(--fs-micro);color:#5b6f84;margin-top:4px}
.account-menu-button:hover,.account-menu-button:focus{background:#fff;border-color:#6886a5;outline:2px solid rgba(36,91,144,.18);outline-offset:1px}
.account-dropdown-panel{top:38px;right:0;left:auto;min-width:230px;padding:6px}
.account-dropdown-panel a{border-radius:var(--r-control)}.account-signout-menu{margin-top:6px;padding:10px 12px;border:0;border-top:1px solid #d7dee6;background:#fff;color:#8c231d;font-weight:700;text-align:left;cursor:pointer}
.account-signout-menu:hover,.account-signout-menu:focus{background:#fff0ef;color:#671713}
.account-close-menu{padding:10px 12px;border:0;border-top:1px solid #d7dee6;background:#fff;color:#8c231d;font-weight:700;text-align:left;cursor:pointer}
.account-close-menu:hover,.account-close-menu:focus{background:#fff0ef;color:#671713}
.local-user-badge{display:grid;line-height:var(--lh-micro);padding:6px 12px;color:#17304f}.local-user-badge strong{font-size:var(--fs-body)}.local-user-badge small{font-size:var(--fs-micro);color:#5b6f84;margin-top:4px}
.update-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.update-center-grid>.info-card{min-width:0}.update-history-card{grid-column:1/-1}.update-current-card{border-left:5px solid #2f659b}.update-stage-card{border-left:5px solid #9b6b22}.update-staged-card{grid-column:1/-1;border-left:5px solid #31744a}.update-rollback-card{border-left:5px solid #9a312b}.update-file-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}.update-file-grid label,.update-staged-card>label,.update-rollback-card>label{display:grid;gap:6px;font-weight:700}.update-file-grid input[type=file]{padding:10px;border:1px solid #b8c7d6;border-radius:var(--r-control);background:#fff}.update-notes{max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:8px 0 0;padding:16px;border:1px solid #d6dfe8;border-radius:var(--r-surface);background:#f7f9fb;color:var(--ink);font-family:inherit;font-size:max(.9rem,14px);font-weight:500;line-height:1.65;letter-spacing:0;tab-size:2}.update-center-grid details{margin:14px 0}.update-center-grid details summary{cursor:pointer;color:#284e76;font-family:inherit;font-size:max(.92rem,14px);font-weight:700;line-height:calc(var(--ui-table) + 7px)}.inline-success{padding:12px;border:1px solid #9cc8aa;border-radius:var(--r-surface);background:#eef9f1;color:#225e35;font-weight:700}
@media(max-width:900px){.header-user-menu{margin-left:0}.header-user-menu+.system-nav-dropdown{margin-left:auto}.update-center-grid,.update-file-grid{grid-template-columns:1fr}.update-history-card,.update-staged-card{grid-column:auto}}

.security-idle-backdrop{position:fixed;inset:0;z-index:10050;background:rgba(10,28,49,.48);display:grid;place-items:center;padding:24px}.security-idle-card{width:min(520px,calc(100vw - 48px));background:#fff;border:1px solid #9fb2c6;border-radius:var(--r-surface);box-shadow:var(--shadow-raised);padding:28px}.security-idle-card h2{margin:.2rem 0 .75rem}.security-idle-card .button-row{justify-content:flex-end;margin-top:20px}

/* v0.23.3 - UI consistency and accessibility */
.skip-link{position:fixed;left:12px;top:8px;z-index:1000;padding:10px 14px;color:#fff;background:#102b4e;border-radius:var(--r-control);box-shadow:var(--shadow-raised);transform:translateY(-150%);transition:transform .15s}
.skip-link:focus{transform:translateY(0)}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #1671c9!important;outline-offset:2px!important}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.62}
.desktop-dropdown-panel [role="menuitem"]:focus-visible{background:#eaf3fc;color:#075dcc}
.nav-dropdown.menu-open>.desktop-dropdown-panel,.nav-dropdown.keyboard-open>.desktop-dropdown-panel{display:grid}
.loading-state{display:table-cell!important;text-align:center!important;color:#4d6179!important}
.loading-spinner{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border:2px solid #bdd0e2;border-top-color:#245f9f;border-radius:50%;animation:dms-spin .8s linear infinite}
.error-state{color:#8d2026!important;background:#fff4f4!important}
@keyframes dms-spin{to{transform:rotate(360deg)}}
/* THE SCROLL TRAP. `overscroll-behavior:contain` on a `.table-wrap` (which is overflow:auto on BOTH
   axes) stops the wheel from chaining out to the page — so once the pointer landed anywhere on a
   table the page could not be scrolled at all. Reported as "whenever the mouse goes in it I can
   never scroll again", and it affects every table in the app, not just the market ones.
   Containment is still right HORIZONTALLY: a wide table swiped sideways should not trigger the
   browser's back-navigation gesture. It is wrong vertically, because a table is content inside a
   page and the page is what the wheel belongs to. */
.table-wrap{overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-gutter:stable}
.table-wrap>.data-table>thead th,.report-table-wrap>.report-table>thead th{position:sticky;top:0;z-index:3}
.data-table th,.data-table td{line-height:calc(var(--ui-table) + 7px)}
/* break-word, NOT anywhere, and the difference is the whole bug.
 *
 * Measured on the running app 2026-08-13: the Inventory table rendered "Chrysler" as "Chrysl/er"
 * and "Example" as "EXAMPL/E", with Make squeezed to 64px while the table had room to spare.
 *
 * The two keywords look interchangeable and are not. `anywhere` lets the soft-wrap opportunities
 * it creates count toward the element's MIN-CONTENT width, so the browser decides a Make column can
 * legitimately be one character wide, shrinks it to that, and then breaks the word to fit what it
 * just did. `break-word` creates the same last-resort break opportunities but is explicitly
 * excluded from the min-content calculation, so a column still sizes to its longest WORD and only
 * breaks a word that genuinely cannot fit on a line by itself.
 *
 * The original intent was right and is preserved: a VIN, a checksum or a pasted URL must not blow
 * a column out of the table. Those are single unbreakable tokens, which is exactly the case
 * `break-word` still handles. Ordinary words stop being casualties of it. */
.data-table td{overflow-wrap:break-word}
.data-table .vin-cell{min-width:190px!important;font-family:Consolas,"Courier New",monospace!important;font-size:var(--fs-small)!important;font-weight:600;letter-spacing:.025em;white-space:nowrap!important;overflow-wrap:normal!important}
.sales-info-table col.sales-col-stock{width:6%}.sales-info-table col.sales-col-vin{width:13%}.sales-info-table col.sales-col-vehicle{width:15%}.sales-info-table col.sales-col-buyer{width:11%}.sales-info-table col.sales-col-date{width:8%}.sales-info-table col.sales-col-money{width:7%}.sales-info-table col.sales-col-status{width:7%}.sales-info-table col.sales-col-forms{width:8%}.sales-info-table col.sales-col-actions{width:11%}
.sales-info-table th,.sales-info-table td{padding-left:8px;padding-right:8px}.sales-info-table .vin-cell{min-width:0!important;font-size:var(--fs-small)!important;letter-spacing:0}.sales-info-table .row-actions{display:grid;gap:4px}.sales-info-table .row-actions .link-btn{text-align:left;white-space:nowrap;font-size:var(--fs-small)}
.long-value,.storage-location,.diagnostic-list span,.panel-footnote{overflow-wrap:anywhere;word-break:break-word}
.empty,.empty-inline,.report-empty{line-height:calc(var(--ui-copy) + 8px)}
.modal-card[tabindex="-1"]:focus{outline:none!important}
.modal-card{scrollbar-gutter:stable}
.page-heading h1:focus,.dashboard-heading h1:focus{outline:none!important}
.security-users-table input,.security-users-table select{min-height:36px;width:100%;min-width:120px}
.security-users-table td:last-child{min-width:190px}
.security-user-create-grid label,.security-password-grid label{min-width:0}
.security-user-create-grid input,.security-user-create-grid select,.security-password-grid input{width:100%;min-width:0}
.field-help,.field-hint,.panel-footnote{font-size:max(11px,calc(var(--ui-copy) - 3px))}
@media(max-width:1100px){.page-shell{width:calc(100% - 20px)}.page-heading{align-items:flex-start;flex-direction:column}.security-user-create-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}.security-create-button{align-self:end}}
@media(max-width:680px){.security-user-create-grid,.security-password-grid{grid-template-columns:1fr}.button,.desktop-menu-button,.desktop-tab{min-height:40px}.modal-actions,.button-row{align-items:stretch;flex-direction:column}.modal-actions .button,.button-row .button{width:100%}.page-shell{width:calc(100% - 12px);padding-top:16px}.page-heading h1{font-size:var(--fs-h1)}.notice{font-size:var(--fs-small)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(forced-colors:active){.button,.desktop-tab,.desktop-menu-button,.panel,.info-card,.modal-card{border:1px solid CanvasText}.status,.severity,.sale-state,.forms-state{border:1px solid currentColor}}


/* v0.23.3 - rounded navigation and former-user administration */
.desktop-app-header{padding-bottom:8px}
.app-title-row{gap:10px;padding:8px 12px 4px}
.desktop-tab-nav{min-height:49px;align-items:center;gap:8px;padding:6px 12px 8px;background:#e7eef6;border-top:1px solid #d8e2ec;overflow-x:auto;scrollbar-width:thin}
.desktop-tab,.desktop-menu-button{min-height:38px;margin:0;padding:0 14px;border:1px solid #9db0c4!important;border-radius:var(--r-surface)!important;background:#f7fafc;color:#17304f;box-shadow:var(--shadow);transition:background .14s,border-color .14s,color .14s,box-shadow .14s}
.desktop-tab:hover,.desktop-menu-button:hover{color:#075dcc;background:#fff;border-color:#6886a5!important}
.desktop-tab.active,.tools-nav-dropdown>.desktop-tab.active,.desktop-menu-button[aria-expanded="true"]{color:#fff;background:#102b4e;border-color:#102b4e!important;box-shadow:var(--shadow)}
.account-menu-button{min-height:38px;border-radius:var(--r-surface)}
.system-nav-dropdown>.desktop-menu-button{min-height:38px;border-radius:var(--r-surface)!important}
.tools-nav-dropdown{align-items:center}
.tools-dropdown-panel{top:43px}.system-dropdown-panel,.account-dropdown-panel{top:43px}
.desktop-dropdown-panel{border-radius:var(--r-surface);padding:8px;overflow:hidden}
.desktop-dropdown-panel [role="menuitem"]{display:block;border-radius:var(--r-control)}
.security-users-heading{align-items:flex-end;flex-wrap:wrap}.security-user-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.security-user-toolbar label{display:grid;gap:4px;color:#4d6179;font-size:var(--fs-small);font-weight:700}.security-user-toolbar select{min-width:125px}.security-user-counts{align-self:center;color:#5d7086;font-size:var(--fs-small);white-space:nowrap}.security-users-table{min-width:1180px}.security-users-table td:nth-child(6){min-width:220px}.security-user-archived{background:#f5f6f7;color:#4f5c69}.security-user-archived:hover{background:#eef1f4!important}.status.archived{color:#5b6470;background:#e5e8ec}.warning-outline{color:#7d4c09!important;border-color:#d2a35e!important;background:#fff8ec!important}.warning-outline:hover{background:#ffefd2!important}.security-users-table .table-subtext{display:block;margin-top:4px;line-height:calc(var(--ui-table) + 7px)}
@media(max-width:1180px){.desktop-tab-nav{gap:6px}.desktop-tab,.desktop-menu-button{padding-inline:10px}.security-users-heading{align-items:stretch;flex-direction:column}.security-user-toolbar{width:100%}}
@media(max-width:820px){.desktop-app-header{padding-bottom:0}.desktop-tab-nav{align-items:stretch;gap:6px}.desktop-tab{border-radius:var(--r-surface)!important}}


/* v0.23.3 - visible menus and explicit user lifecycle states */
@media(min-width:821px){
  .desktop-app-header,.app-title-row,.desktop-tab-nav{overflow:visible!important}
  .desktop-tab-nav{flex-wrap:wrap;position:relative;z-index:50}
  .nav-dropdown{position:relative;z-index:80}
  .nav-dropdown.menu-open,.nav-dropdown.keyboard-open{z-index:500}
  .desktop-dropdown-panel{z-index:1000!important;overflow:visible!important}
}
.security-user-toolbar{align-items:center}
.security-user-segments{display:inline-flex;align-items:stretch;gap:4px;padding:4px;border:1px solid #a7b7c8;border-radius:var(--r-surface);background:#edf3f8}
html[data-theme="dark"] .security-user-segments{background:var(--surface-soft);border-color:var(--line)}
.security-filter-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-control);font-weight:700;cursor:pointer}
.security-filter-button strong{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:var(--r-stadium);font-size:var(--fs-small)}
.security-user-segments{display:inline-flex;align-items:stretch;gap:4px;padding:6px;border:1px solid #a7b7c8;border-radius:var(--r-surface);background:#edf3f8}
.security-filter-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-surface);font-weight:700;cursor:pointer}
.security-filter-button strong{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:var(--r-stadium);font-size:var(--fs-small)}



.security-signin-toggle{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#314b65;font-size:var(--fs-small);font-weight:700;white-space:nowrap}
.security-signin-toggle input{width:20px!important;min-width:20px!important;height:20px;accent-color:#1467b8}
.security-user-suspended{background:#fff9ed}
.security-user-suspended:hover{background:#fff3d7!important}
.status.suspended{color:#805312;background:#fff0cf}
@media(max-width:720px){.security-user-segments{width:100%;display:grid;grid-template-columns:1fr 1fr}.security-filter-button{justify-content:space-between}}


/* v0.23.5 - compact security, offline sign-in artwork, archive dialog, and Help */
.security-gate{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 76px);padding:24px 18px}
.security-gate::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(105deg,rgba(7,25,45,.78),rgba(12,42,72,.55) 52%,rgba(10,31,52,.78)),url("assets/signin-showroom.webp"),url("assets/signin-dealership.svg"),linear-gradient(135deg,#0b223b,#163f68);background-size:cover,cover,cover,cover;background-position:center,center,center,center;background-repeat:no-repeat}
.security-gate::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 34rem)}
.security-gate-card{width:min(410px,100%);padding:24px 24px;gap:12px;border-color:rgba(255,255,255,.5);border-radius:var(--r-surface);box-shadow:var(--shadow-raised)}
.security-gate-card h1{font-size:25px}.security-gate-card .eyebrow{margin-bottom:0!important}.security-gate-card input{min-height:42px}.security-gate-card .modal-actions{margin-top:2px}.security-gate-footnote{padding-top:12px}.security-brand{gap:6px}
.security-users-table td{padding:8px 10px}.security-users-table input,.security-users-table select{min-height:32px}.security-users-table .row-actions{gap:6px}.security-users-table .button.compact{min-height:32px;padding-inline:10px}
.security-status-cell{min-width:125px}.security-signin-toggle{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 8px 4px 4px;border:1px solid #b7c6d5;border-radius:var(--r-surface);background:#f7fafc;color:#314b65;font-size:var(--fs-small);font-weight:700;white-space:nowrap}.security-signin-toggle:focus-within{border-color:#1671c9;box-shadow:0 0 0 2px rgba(22,113,201,.13)}.security-signin-toggle input{width:18px!important;min-width:18px!important;height:18px;margin:0;accent-color:#1467b8}.security-signin-state.active{color:#17633d}.security-signin-state.suspended{color:#805312}
.security-archive-modal{width:min(620px,calc(100vw - 32px))}.security-archive-modal>p{color:#526579;line-height:calc(var(--ui-copy) + 8px)}.security-archive-summary{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0;padding:12px 14px;border:1px solid #d9e2eb;border-radius:var(--r-surface);background:#f7f9fc}.security-archive-summary div{padding:8px 0;border-bottom:1px solid #e3e8ee}.security-archive-summary dt{color:#63758a;font-size:var(--fs-small);font-weight:700;letter-spacing:.05em;text-transform:uppercase}.security-archive-summary dd{margin:4px 0 0;color:#1d3147;font-weight:700}.security-archive-field{display:grid;gap:8px;color:#253b52;font-weight:700}.security-archive-field textarea,.security-archive-field input{width:100%}.security-archive-field small{color:#64768a;font-weight:500}.security-confirmation-box{padding:12px 14px;border:1px solid #d5a356;border-radius:var(--r-surface);background:#fff8e9}.security-confirmation-box p{margin:0 0 8px;color:#6d4b18;font-size:var(--fs-small);font-weight:700}.security-confirmation-box code{display:block;padding:10px;border-radius:var(--r-control);background:#fff;color:#7c2d12;font-size:var(--fs-lead);font-weight:700;user-select:all}.security-archive-validation{min-height:20px;margin:0;color:#6d4b18;font-size:var(--fs-small);font-weight:700}.security-archive-modal .modal-actions{justify-content:flex-end}.security-archive-modal .button.danger{background:#a9252c;color:#fff;border-color:#8f1f25}
.help-search-panel{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}.help-search-panel>div{display:grid;gap:8px;flex:1}.help-search-panel label{color:#263e57;font-weight:700}.help-search-panel .search{width:min(700px,100%)}.help-search-panel p{margin:0;color:#63758a;font-size:var(--fs-small)}.help-categories{display:flex;gap:8px;margin-bottom:14px;padding:8px;border:1px solid #c5d1dc;border-radius:var(--r-surface);background:#e8eff6;overflow-x:auto}.help-category-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-surface);background:transparent;color:#29445f;font-weight:700;white-space:nowrap;cursor:pointer}.help-category-button strong{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:var(--r-stadium);background:#d4e0eb;font-size:var(--fs-small)}.help-category-button:hover{background:#fff;border-color:#a8bacb}.help-category-button.active{color:#fff;background:#102b4e;border-color:#102b4e}.help-category-button.active strong{color:#102b4e;background:#fff}.help-results-heading{display:flex;justify-content:space-between;gap:12px;margin:0 2px 10px;color:#63758a;font-size:var(--fs-small)}.help-results-heading p{margin:0}.help-results{display:grid;gap:10px}.help-article{border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow-raised);overflow:hidden}.help-article summary{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:16px 18px;cursor:pointer;list-style:none}.help-article summary::-webkit-details-marker{display:none}.help-article summary>span:first-child{display:grid;gap:4px}.help-article summary small{color:#245f9f;font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.help-article summary strong{color:#17304f;font-size:var(--fs-lead)}.help-article summary em{color:#617287;font-size:var(--fs-body);font-style:normal;font-weight:500}.help-version{flex:0 0 auto;padding:6px 8px;border-radius:var(--r-stadium);color:#4c6177;background:#edf2f7;font-size:var(--fs-small);font-weight:700}.help-article[open] summary{border-bottom:1px solid #dfe6ed;background:#f8fbfe}.help-article-body{padding:16px 20px 18px}.help-article-body ol{margin:0 0 16px;padding-left:22px}.help-article-body li{margin:8px 0;color:#334b62;line-height:calc(var(--ui-copy) + 8px)}.help-role-note{margin:0;padding:10px 12px;border:1px solid #d8e0e8;border-radius:var(--r-surface);color:#5c6f82;background:#f6f8fa;font-size:var(--fs-small)}.help-no-results{padding:42px;text-align:center;border:1px dashed #aab9c8;border-radius:var(--r-surface);background:#fff}.help-no-results h2{margin:0 0 8px;color:#17304f}.help-no-results p{color:#63758a}
@media(max-width:720px){.security-gate{padding:14px 10px}.security-gate-card{padding:20px}.security-archive-summary{grid-template-columns:1fr}.help-search-panel{align-items:stretch;flex-direction:column}.help-search-panel .button{width:100%}.help-results-heading{align-items:flex-start;flex-direction:column}.help-article summary{align-items:flex-start;flex-direction:column}.help-version{align-self:flex-start}}


/* v0.23.5 - acceptance corrections: consistent header controls and visual offline Help */
.header-user-menu,.system-nav-dropdown{flex:0 0 168px;width:168px}
.account-menu-button,.system-nav-dropdown>.desktop-menu-button{width:100%;min-height:44px;height:44px;justify-content:space-between;padding:0 14px;border-radius:var(--r-surface)!important;font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.account-menu-button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-role{display:grid;gap:2px;margin:-1px -1px 6px;padding:10px 12px;border-radius:var(--r-control);background:#edf3f8;color:#17304f}
.account-menu-role strong{font-size:var(--fs-small)}.account-menu-role span{color:#5b6f84;font-size:var(--fs-micro)}
.account-dropdown-panel,.system-dropdown-panel{top:49px}
.security-gate-card{backdrop-filter:blur(1px)}
.help-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);align-items:center;gap:28px;margin-bottom:16px;padding:24px 26px;border:1px solid #c7d6e4;border-radius:var(--r-surface);background:linear-gradient(135deg,#f8fbff,#eaf3fc);box-shadow:var(--shadow-raised)}
.help-hero h2{margin:2px 0 8px;color:#102b4e;font-size:var(--fs-h1)}.help-hero p{margin:0;color:#536b82;line-height:calc(var(--ui-copy) + 8px)}.help-search-box{display:grid;gap:8px;padding:16px;border:1px solid #b8cadb;border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow-raised)}.help-search-box label{color:#263e57;font-weight:700}.help-search-box>div{display:flex;gap:8px}.help-search-box input{flex:1;min-width:0}.help-search-box small{color:#667a8e}
.help-category-section{margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}.help-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.help-section-heading h2{margin:0 0 4px;color:#17304f}.help-section-heading p{margin:0;color:#65788b}.help-section-heading>span{color:#597087;font-size:var(--fs-small);font-weight:700;white-space:nowrap}
.help-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.help-category-card{display:flex;align-items:center;gap:10px;min-width:0;min-height:68px;padding:10px 12px;border:1px solid #c8d4df;border-radius:var(--r-surface);background:#f8fbfe;color:#24405d;text-align:left;cursor:pointer;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s}.help-category-card:hover{transform:translateY(-1px);border-color:#7d9bb8;background:#fff;box-shadow:var(--shadow-raised)}.help-category-card.active{border-color:#102b4e;background:#102b4e;color:#fff;box-shadow:var(--shadow-raised)}.help-category-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:var(--r-surface);background:#e0ebf5;color:#145c9e;font-size:var(--fs-lead);font-weight:700}.help-category-card.active .help-category-icon{background:#fff;color:#102b4e}.help-category-card>span:last-child{display:grid;gap:4px;min-width:0}.help-category-card strong{line-height:var(--lh-small);font-size:var(--fs-small)}.help-category-card small{color:#687d91;font-size:var(--fs-small)}.help-category-card.active small{color:#dce8f4}
.help-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 10px;color:#63758a;font-size:var(--fs-small)}.help-results-heading p{margin:0}.help-results{display:grid;gap:12px}.help-article{border:1px solid #cbd7e2;border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow-raised);overflow:hidden}.help-article summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;cursor:pointer;list-style:none}.help-article summary::-webkit-details-marker{display:none}.help-article-summary{display:grid;gap:4px;min-width:0}.help-article-summary small{color:#2165a6;font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.help-article-summary strong{color:#17304f;font-size:var(--fs-lead)}.help-article-summary em{color:#617287;font-size:var(--fs-body);font-style:normal;font-weight:500}.help-version{flex:0 0 auto;padding:6px 10px;border-radius:var(--r-stadium);color:#466176;background:#edf3f8;font-size:var(--fs-small);font-weight:700}.help-article[open] summary{border-bottom:1px solid #dfe7ee;background:#f8fbfe}.help-article-body{padding:18px}.help-instruction-grid{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.4fr);gap:20px;align-items:start}.help-instruction-grid h3{margin:0 0 10px;color:#17304f}.help-instruction-grid ol{counter-reset:help-step;display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}.help-instruction-grid li{counter-increment:help-step;display:grid;grid-template-columns:30px 1fr;align-items:start;gap:10px;color:#334b62;line-height:calc(var(--ui-copy) + 8px)}.help-instruction-grid li::before{content:counter(help-step);display:grid;place-items:center;width:25px;height:25px;border-radius:var(--r-stadium);color:#fff;background:#145f9f;font-size:var(--fs-small);font-weight:700}.help-visual{margin:0;padding:8px;border:1px solid #c9d6e2;border-radius:var(--r-surface);background:#edf3f8}.help-visual a{display:block;border-radius:var(--r-surface);overflow:hidden;background:#dbe5ee}.help-visual img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain;background:#fff}.help-visual figcaption{padding:8px 6px 2px;color:#5c7185;font-size:var(--fs-small);line-height:var(--lh-small)}.help-role-note{margin:0;padding:10px 12px;border:1px solid #d8e0e8;border-radius:var(--r-surface);color:#5c6f82;background:#f6f8fa;font-size:var(--fs-small)}.help-no-results{display:grid;justify-items:center;gap:8px;padding:48px;text-align:center;border:1px dashed #aab9c8;border-radius:var(--r-surface);background:#fff}.help-no-results-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-stadium);color:#fff;background:#245f9f;font-size:var(--fs-h2);font-weight:700}.help-no-results h2,.help-no-results p{margin:0}.help-no-results p{color:#63758a}
@media(max-width:1280px){.help-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.help-instruction-grid{grid-template-columns:1fr}.help-visual img{max-height:none}}
@media(max-width:900px){.header-user-menu,.system-nav-dropdown{flex-basis:150px;width:150px}.help-hero{grid-template-columns:1fr}.help-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.header-user-menu,.system-nav-dropdown{flex:1 1 0;width:auto;min-width:0}.account-menu-button,.system-nav-dropdown>.desktop-menu-button{padding-inline:10px}.help-hero{padding:18px}.help-search-box>div{align-items:stretch;flex-direction:column}.help-category-grid{grid-template-columns:1fr}.help-section-heading,.help-results-heading{align-items:flex-start;flex-direction:column}.help-article summary{align-items:flex-start;flex-direction:column}.help-version{align-self:flex-start}.help-article-body{padding:14px}.help-instruction-grid{grid-template-columns:minmax(0,1fr)}}

/* v0.23.6 configurable backgrounds and compact login header */
:root{--login-background-image:url("assets/signin-exterior.webp");--login-background-color:#102b4e;--login-background-position:50% 50%;--login-overlay-opacity:.30;--application-background-image:none;--application-background-color:#eef4fa;--application-background-position:50% 50%;--application-overlay-opacity:.88;--brand-sign-x:77%;--brand-sign-y:30%;--brand-sign-color:#fff}
body.security-locked .desktop-app-header{padding-bottom:0;border-bottom:0;box-shadow:none}body.security-locked .app-title-row{min-height:48px;padding:4px 8px}body.security-locked .desktop-tab-nav{display:none!important}body.security-locked #app{min-height:calc(100vh - 48px)}
.security-gate{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 48px);padding:20px 18px;background-color:var(--login-background-color);background-image:linear-gradient(rgba(4,24,43,var(--login-overlay-opacity)),rgba(4,24,43,var(--login-overlay-opacity))),var(--login-background-image),url("assets/signin-dealership.svg"),linear-gradient(135deg,#0b223b,#163f68);background-size:cover;background-position:center,var(--login-background-position),center,center;background-repeat:no-repeat}.security-gate::before,.security-gate::after{content:none!important}body[data-login-background="blank"] .security-gate{background-image:none}.security-gate-card{position:relative;z-index:2}
.login-brand-sign{position:absolute;z-index:1;left:var(--brand-sign-x);top:var(--brand-sign-y);width:min(15vw,220px);transform:translate(-50%,-50%);display:grid;gap:4px;padding:14px 12px;color:var(--brand-sign-color);text-align:center;text-transform:uppercase;text-shadow:0 2px 5px rgba(0,0,0,.8);pointer-events:none}.login-brand-sign strong{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:.05em;overflow-wrap:anywhere}.login-brand-sign span{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em}
body:not(.security-locked) #app{min-height:calc(100vh - 128px);background-color:var(--application-background-color)}body:not(.security-locked).application-background-image #app{background-image:linear-gradient(rgba(238,244,250,var(--application-overlay-opacity)),rgba(238,244,250,var(--application-overlay-opacity))),var(--application-background-image);background-size:cover;background-position:var(--application-background-position);background-attachment:fixed;background-repeat:no-repeat}
.header-user-menu{flex:0 0 154px;width:154px}.system-nav-dropdown{flex:0 0 136px;width:136px}.account-menu-button,.system-nav-dropdown>.desktop-menu-button{min-height:40px;height:40px;padding-inline:12px}.account-dropdown-panel,.system-dropdown-panel{top:45px}.system-dropdown-panel{right:0;min-width:max-content;width:max-content}.system-dropdown-panel a{white-space:nowrap}
.branding-settings-layout{display:grid;gap:16px}.branding-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.branding-company-grid label,.branding-background-card label{display:grid;gap:6px;color:#263e57;font-weight:700}.checkbox-line{display:flex!important;align-items:center;gap:10px}.checkbox-line input{width:auto}.branding-background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.branding-background-card{display:grid;align-content:start;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow)}.branding-background-card h3{margin:0;color:var(--navy)}.branding-preview{position:relative;min-height:210px;border:1px solid #b9c8d7;border-radius:var(--r-surface);background-size:cover;background-position:center;overflow:hidden}.branding-preview span{position:absolute;left:10px;bottom:10px;padding:6px 8px;border-radius:var(--r-stadium);color:#fff;background:rgba(9,33,58,.78);font-size:var(--fs-small);font-weight:700}.branding-actions{display:flex;align-items:center;justify-content:space-between;gap:20px}.branding-actions p{margin:4px 0 0}
@media(max-width:980px){.branding-company-grid{grid-template-columns:1fr 1fr}.branding-background-grid{grid-template-columns:1fr}.login-brand-sign{display:none}}@media(max-width:640px){.branding-company-grid{grid-template-columns:1fr}.branding-actions{align-items:stretch;flex-direction:column}.header-user-menu,.system-nav-dropdown{flex:1 1 0;width:auto}.security-gate{padding:12px}}

/* v0.23.10 blocking data-integrity startup state */
body.startup-blocked .desktop-app-header{display:none}
.startup-blocking-error{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 80% 0%,rgba(75,118,166,.18),transparent 36rem),#0d1d2f}
.startup-blocking-error-card{width:min(780px,100%);padding:32px;border:1px solid #a84149;border-top:6px solid #c9363e;border-radius:var(--r-surface);background:#f8fafc;box-shadow:var(--shadow-raised)}
.startup-blocking-error-card h1{margin:4px 0 12px;color:#7f1821;font-size:var(--fs-display);line-height:var(--lh-display)}
.startup-error-message{padding:14px;border:1px solid #e2b0b4;border-radius:var(--r-surface);background:#fff0f1;color:#6f1c23;font-weight:700;overflow-wrap:anywhere}
.startup-error-rules{display:grid;gap:8px;margin:18px 0;padding:16px;border:1px solid #cbd6e1;border-radius:var(--r-surface);background:#eef3f8;color:#33485f}.startup-error-rules p{margin:0;line-height:calc(var(--ui-copy) + 8px)}

/* v0.23.10 approved integrated shell, responsive sidebar, and appearance modes */
:root,[data-theme="light"]{
 --navy:#102b4e;--navy2:#173b68;--ink:#14243a;--muted:#4d637c;--line:#bcc9d8;
 --surface:#ffffff;--surface-strong:#ffffff;--surface-soft:#f6f8fb;--canvas:#f3f6f9;
 --input-bg:#ffffff;--input-ink:#15283f;--sidebar-bg:#092744;--sidebar-bg-2:#0d355b;
 --sidebar-ink:#e9f2fb;--sidebar-muted:#9db8d1;--header-bg:#f9fbfd;
 --application-overlay-color:238,244,250;
}
[data-theme="dark"]{
 --navy:#dcecff;--navy2:#b8d7f5;--ink:#e7eef7;--muted:#a8b7c8;--line:#344a61;
 --surface:#17283a;--surface-strong:#1c3044;--surface-soft:#112337;--canvas:#0d1b2a;
 --input-bg:#0e2032;--input-ink:#edf5fc;--sidebar-bg:#071b2e;--sidebar-bg-2:#0b2d4d;
 --sidebar-ink:#eff7ff;--sidebar-muted:#9bb5ce;--header-bg:#12263a;
 --application-overlay-color:10,22,36;
 --blue:#77b8f5;--bluesoft:#163a59;--green:#68d39a;--greensoft:#173d2b;--red:#ff8d96;--red-solid:#cf3b45;--redsoft:#4b2227;--amber:#f2bd67;--ambersoft:#4a3517;
}
html,body{background:var(--canvas);color:var(--ink)}
body{min-width:0;background:var(--canvas)}
.dms-sidebar{position:fixed;z-index:80;inset:0 auto 0 0;width:228px;display:flex;flex-direction:column;color:var(--sidebar-ink);background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));border-right:1px solid color-mix(in srgb,var(--sidebar-ink,#fff) 9%,transparent);box-shadow:var(--shadow-raised)}
/* Dividers derived from the sidebar's own ink, so they exist on a cream or white sidebar too.
   A white hairline on a white sidebar is not a subtle divider, it is a missing one. */
.sidebar-brand{display:flex;align-items:center;gap:12px;width:100%;min-height:70px;padding:12px 16px;border:0;border-bottom:1px solid color-mix(in srgb,var(--sidebar-ink,#fff) 12%,transparent);color:inherit;background:transparent;text-align:left;cursor:pointer}
.sidebar-brand-mark{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;border:1px solid color-mix(in srgb,var(--sidebar-ink,#fff) 30%,transparent);border-radius:var(--r-surface);background:#f7fbff;color:#0b3154;font-size:var(--fs-small);font-weight:700;letter-spacing:-.04em}
.photo-gallery-panel{margin:16px 0}
.photo-gallery-panel .section-subhead{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.photo-gallery-panel .section-subhead h3{margin:0;font-size:var(--fs-lead)}
.photo-gallery-panel .section-subhead span{font-size:var(--fs-body);opacity:.65}
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photo-thumb{position:relative;padding:0;margin:0;border:1px solid rgba(0,0,0,.12);border-radius:var(--r-surface);overflow:hidden;background:rgba(0,0,0,.05);aspect-ratio:4/3;cursor:pointer;display:block;transition:box-shadow .15s ease,transform .15s ease}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.photo-thumb:focus-visible,.photo-thumb:focus-within{outline:2px solid var(--accent,#1768b2);outline-offset:2px}
.photo-thumb.is-selected{outline:3px solid var(--accent,#1768b2);outline-offset:2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--surface) 80%,transparent)}
.photo-pick{position:absolute;top:6px;left:6px;z-index:4;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:4px 8px;border:1px solid rgba(255,255,255,.45);border-radius:var(--r-control);background:rgba(7,27,46,.88);color:#fff;font-size:var(--fs-micro);font-weight:700;cursor:pointer;box-shadow:var(--shadow-raised)}
.photo-pick input{width:17px;height:17px;margin:0;accent-color:var(--accent,#1768b2);cursor:pointer}
.photo-pick span{line-height:1}
.photo-star{position:absolute;top:5px;right:5px;width:23px;height:23px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:var(--fs-small);line-height:1;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .15s ease,background .15s ease;z-index:2}
.photo-thumb:hover .photo-star,.photo-thumb:focus-within .photo-star{opacity:1}
.photo-thumb.is-default .photo-star{opacity:1;background:var(--accent,#1768b2)}
.photo-thumb.is-default::after{content:"★ Default";position:absolute;left:5px;bottom:5px;background:var(--accent,#1768b2);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:var(--r-control);letter-spacing:.02em;z-index:2}
/* Photo categories. The heading is a group label inside a panel that already has an h3, so it
   sits one step down; the count is the same weight as the other subhead counts. */
.photo-group-title{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px;font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.72}
.photo-group-title:first-child{margin-top:0}
.photo-group-title span{font-size:var(--fs-micro);font-weight:400;letter-spacing:0;opacity:.8}
/* The picker sits on the tile and only appears on hover or focus, the same rule the star
   follows — a wall of dropdowns over a lot's photos is worse than no categories at all.
   It stays visible while it has focus so it can be used with a keyboard. */
.photo-cat{position:absolute;left:4px;right:4px;bottom:4px;z-index:2;min-height:24px;padding:0 6px;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-control);background:rgba(0,0,0,.62);color:#fff;
  font-family:inherit;font-size:var(--fs-micro);opacity:0;transition:opacity .15s ease}
.photo-thumb:hover .photo-cat,.photo-thumb:focus-within .photo-cat,.photo-cat:focus{opacity:1}
.photo-cat option{color:initial;background:initial}
.photo-thumb.is-default::after{bottom:32px}
/* Vehicle History - branded Carfax / AutoCheck report buttons */
.hx-report-row{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-top:6px}
.hx-report-btn{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;padding:14px 18px;border:1px solid rgba(0,0,0,.14);border-radius:var(--r-surface);background:#fff;text-decoration:none;min-width:158px;transition:box-shadow .15s ease,transform .15s ease}
.hx-report-btn:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.hx-logo{height:28px;width:auto;max-width:170px;display:block;object-fit:contain}
img.hx-logo.hx-carfax{height:30px}
img.hx-logo.hx-autocheck{height:30px}
.hx-cta{font-size:var(--fs-small);font-weight:600;color:#4a5568}
.hx-report-btn.hx-free{border-color:#1f8a5b;box-shadow:0 0 0 1px #1f8a5b inset}
/* A report already filed on the car. It is a <button> (it opens a local file) rather than an
   <a>, so the button defaults have to be reset back to the card look the anchors get. */
.hx-report-btn.hx-filed{border-color:#1f8a5b;box-shadow:0 0 0 1px #1f8a5b inset;font:inherit;text-align:left;cursor:pointer}
/* A filed report whose filename names no provider. Deliberately unbranded: putting a Carfax or
   AutoCheck logo on a PDF we have not identified would assert something we do not know. */
.hx-generic{font-weight:700;font-size:var(--fs-lead);color:#0a3d6e}
/* ---- conscious delete ---------------------------------------------------------------------
   The itemised "here is what you are about to delete" list. Readable at a glance is the whole
   requirement: this exists to be scanned in the two seconds before someone clicks. */
.sd-delete-card{max-width:520px}
.sd-delete-list{margin:14px 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden}
.sd-delete-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 12px;font-size:var(--fs-body)}
.sd-delete-list li+li{border-top:1px solid var(--line)}
.sd-del-label{font-weight:700}
.sd-del-value{font-variant-numeric:tabular-nums;text-align:right}
.sd-del-note{grid-column:1/-1;font-size:var(--fs-small);color:var(--muted)}
.sd-delete-consequence{margin:0 0 12px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.sd-delete-gate{display:block;margin-bottom:6px;font-size:var(--fs-body);font-weight:700}
.sd-delete-gate input{width:100%;margin-top:6px}
/* The Show/Hide beside a masked licence number. Quiet on purpose - revealing an ID should feel
   like a deliberate act, not a control competing for attention. */
/* ---- what to do next, on a saved deal ------------------------------------------------------
   Deliberately loud. It is the only thing on the screen after a save, because after a save there
   is only one next thing, and a partner demoing the app stopped here because nothing said so. */
.deal-next{margin:14px 0;padding:14px 18px;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface-soft)}
.deal-next.deal-next-ready{border-color:#1f8a5b;background:color-mix(in srgb,#1f8a5b 8%,var(--surface))}
.deal-next.deal-next-wait{opacity:.85}
.deal-next h3{margin:0 0 8px;font-size:var(--fs-lead)}
.deal-next-block{margin:0;font-size:var(--fs-body);color:var(--muted)}
.deal-next-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.deal-next-list li{font-size:var(--fs-body)}
.deal-next-list strong{display:block;margin-bottom:2px}
.deal-next-list span{display:block;margin-bottom:8px;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body);max-width:74ch}
/* ---- parts for this car (vehicle record) ---------------------------------------------------
   The car is already chosen, so the only thing to type is the part. The input leads and the links
   follow it, because "what does it need" is the question the dealer arrived with. */
.parts-section{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-surface);padding:18px 20px}
.parts-search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 16px}
.parts-search-label{font-weight:700;font-size:var(--fs-body);white-space:nowrap}
.parts-search-select{flex:0 1 320px;min-width:230px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:inherit;font-size:var(--fs-lead);font-weight:600;cursor:pointer}
.parts-search-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.parts-search-row input{flex:1 1 260px;min-width:200px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);font-size:var(--fs-lead);transition:border-color .12s,box-shadow .12s}
.parts-search-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.parts-search-car{font-size:var(--fs-body);color:var(--muted);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:var(--r-stadium);padding:6px 12px;white-space:nowrap;font-weight:600}
/* Live results lead when credentials exist; the supplier links become the fallback below them. */
.parts-results{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
/* A ROW A DEALER SCANS, not a table they read. The eye goes down one column of silhouettes on the
   left and one column of prices on the right; everything in between is supporting text. */
/* auto for the photo column, not a fixed 72px. A listing with no picture renders no tile at all
   (an empty frame reads as a photo that failed), and a fixed first column would leave a 72px hole
   where it used to be — which looks exactly like the blank frame that was just removed. */
.parts-result{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.parts-result:hover{border-color:var(--accent);transform:translateY(-1px)}
.parts-result:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* WHITE TILE, contain. eBay photos arrive in every shape and on every background — stretched or
   cropped they made a ragged left edge, and a dark tile hides the many that are shot on white. */
.parts-result-shot{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-surface);
  background:#fff;border:1px solid var(--line);overflow:hidden}
.parts-result-shot img{width:100%;height:100%;object-fit:contain;display:block}
.parts-result-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.parts-result-body>strong{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);
  font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.parts-result-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--muted)}
.parts-chip{padding:2px 7px;border-radius:var(--r-stadium);background:var(--chip-bg);color:var(--chip-fg);
  font-weight:600;white-space:nowrap}
.parts-chip.is-fit{background:var(--greensoft);color:var(--green)}
.parts-chip.is-best{background:var(--accent);color:var(--accent-ink)}
.parts-seller{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tabular figures so the column of prices lines up on the decimal instead of shimmying. */
.parts-result-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.parts-result-price>strong{color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:700}
.parts-result-price small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.parts-result-price small.is-free{color:var(--green);font-weight:600}
/* The cheapest DELIVERED total, which is not the number eBay prints largest: $22.99 plus $9 post
   beats nothing. Marked on the row as well as chipped, because the whole point of listing these
   in the app is that the comparison is already done. */
.parts-result.is-cheapest{border-color:var(--green);background:var(--greensoft)}
.parts-result.is-cheapest:hover{border-color:var(--green)}
@media (max-width:560px){
  .parts-result{grid-template-columns:56px minmax(0,1fr);row-gap:8px}
  .parts-result-shot{width:56px;height:56px}
  .parts-result-price{grid-column:2;align-items:flex-start}
}
.parts-result-price small{font-weight:400;font-size:var(--fs-small);color:var(--muted)}
.parts-live-status{margin:0 0 10px;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body)}
/* Numbered steps on the Import screen.
 *
 * The markup shipped with .capture-install-step / .capture-step-num and NEITHER class was ever
 * defined here, so the number and its text stacked as two plain blocks: a bare "1" on one line and
 * the instruction underneath, which is what made the panel read as broken text. Grid puts the
 * number in its own column beside the copy, which is what the markup was always shaped for. */
.capture-install-step{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:start;gap:10px;margin:0 0 10px}
.capture-install-step:last-child{margin-bottom:0}
.capture-step-num{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--bluesoft);color:var(--blue);font-size:var(--fs-small);font-weight:700;line-height:1}
.capture-install-step>div{line-height:calc(var(--ui-copy) + 8px)}

/* A full panel embedded in a wizard step. It carries its own card chrome, so the wizard only
   needs to give it room. */
.wz-inline-panel{margin:14px 0 4px}

.parts-links-heading{margin:14px 0 6px;font-size:var(--fs-body);font-weight:700;color:var(--muted)}
.parts-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.parts-link-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);text-decoration:none;color:inherit;overflow:hidden;box-shadow:var(--shadow);transition:border-color .14s,transform .14s,box-shadow .14s}
/* THE ONE SOURCE AUTOSTEWARD CAN ASK. Every other card is a deep link that hands the dealer to
   somebody else's site; eBay's prices come back into this screen. Marked with an accent edge and a
   small badge rather than a colour wash — it is a statement about capability, not an advert, and a
   loud one on a screen of five near-identical cards would read as a paid placement. */
.parts-link-card.is-best{border-color:var(--accent)}
.parts-best-badge{margin-left:auto;padding:2px 8px;border-radius:var(--r-stadium);
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;white-space:nowrap}
.parts-link-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand,var(--accent));opacity:.9}
.parts-link-card:hover{border-color:color-mix(in srgb,var(--brand,var(--accent)) 55%,var(--line));transform:translateY(-3px);box-shadow:var(--shadow-raised)}
.parts-link-head{display:flex;align-items:center;gap:10px;min-height:52px}
/* Logos ride on a white "chip" so a dark wordmark (Amazon's black text) is never invisible on the
 * dark card surface — the reason they "couldn't be seen at all" — and every brand, light or dark,
 * reads the same. The chip is a fixed, generous plate so tightly- and loosely-cropped source files
 * still land at a consistent, legible size instead of looking tiny. */
/* THE PADDING GOES ON THE CHIP, NOT THE IMAGE. This rule used to be height:34px with
 * padding:9px 14px on the <img> itself, and `*{box-sizing:border-box}` is global — so the actual
 * artwork was laid out at 34 - 18 = 16px tall. That is why the marks were unreadable: eBay's and
 * Amazon's wordmarks were rendering sixteen pixels high. The chip now owns the plate and the
 * padding, and the image gets its full height. */
.parts-logo-chip{display:inline-flex;align-items:center;justify-content:center;height:62px;max-width:180px;padding:8px 16px;background:#fff;border-radius:var(--r-surface);box-shadow:0 0 0 1px rgba(0,0,0,.10);overflow:hidden}
.parts-logo{height:38px;max-height:50px;width:auto;max-width:150px;object-fit:contain;display:block}
.parts-link-head.has-logo .parts-name{display:none}
.parts-upgrade summary .parts-logo-chip{height:34px;padding:6px 10px;margin-right:10px;vertical-align:middle}
.parts-upgrade summary .parts-logo{height:22px}
/* A coloured initial standing in for a logo we do not have the rights to ship. If an official
   asset is ever dropped into web/assets/ the <img> loads over it; if not, onerror removes the img
   and the initial shows through. Same hand-off as the Carfax and AutoCheck cards. */
.parts-brand{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-surface);background:color-mix(in srgb,var(--brand) 16%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent);overflow:hidden}
.parts-brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;background:#fff}
.parts-brand-initial{font-size:var(--fs-body);font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.parts-link-card strong{font-size:var(--fs-lead)}
.parts-upgrade summary .parts-brand{display:inline-grid;vertical-align:middle;margin-right:8px}
.parts-link-note{font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body)}
/* Ordered last for this part class, and said so on the card. Dimmed, never hidden — a dealer who
   wants to check anyway still can. */
.parts-link-card.unlikely{opacity:.72}
.parts-link-card.unlikely:hover{opacity:1}
.parts-link-go{margin-top:auto;padding-top:4px;font-size:var(--fs-small);font-weight:700;color:var(--brand,var(--accent))}
/* The PartsTech upgrade is collapsed by default: it is a one-off setup, and a dealer looking for a
   bearing right now should not have to scroll past a sales pitch to reach the links. */
.parts-upgrade{margin-top:16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.parts-upgrade[open]{box-shadow:var(--shadow-raised)}
.parts-upgrade summary{font-weight:700;font-size:var(--fs-body);cursor:pointer;list-style:none;display:flex;align-items:center}
.parts-upgrade summary::-webkit-details-marker{display:none}
.parts-upgrade summary::after{content:"›";margin-left:auto;font-size:var(--fs-h2);line-height:1;color:var(--muted);transition:transform .15s}
.parts-upgrade[open] summary::after{transform:rotate(90deg)}
.parts-upgrade p{margin:10px 0;font-size:var(--fs-body);line-height:var(--lh-body);max-width:70ch}
.parts-upgrade-req{color:var(--muted)}
/* "Can prices show here instead of opening a site?" — shown only while live lookup is off, so the
   feature is not silently invisible. Same shape as .parts-upgrade above; it is the same kind of
   thing (an optional capability explained rather than assumed), so it should not look different. */
.parts-live-offer{margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.parts-live-offer[open]{box-shadow:var(--shadow-raised)}
.parts-live-offer summary{font-weight:700;font-size:var(--fs-body);cursor:pointer;list-style:none;display:flex;align-items:center}
.parts-live-offer summary::-webkit-details-marker{display:none}
.parts-live-offer summary::after{content:"›";margin-left:auto;font-size:var(--fs-h2);line-height:1;color:var(--muted);transition:transform .15s}
.parts-live-offer[open] summary::after{transform:rotate(90deg)}
.parts-live-offer p{margin:10px 0;font-size:var(--fs-body);line-height:var(--lh-body);max-width:70ch}
.parts-live-offer-note{color:var(--muted)}
/* ---- vendor performance (Tools > Vendors) --------------------------------------------------
   Thin rows are greyed rather than hidden: a vendor with two jobs still belongs on the list, it
   just must not look like evidence. */
.recon-panel .recon-category{margin:18px 0 4px}
.recon-category-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.recon-category-head h3{margin:0;font-size:var(--fs-lead)}
.recon-category-head span{font-size:var(--fs-body);color:var(--muted)}
.recon-note{margin:0 0 8px;padding:8px 12px;border-radius:var(--r-surface);background:color-mix(in srgb,#1f8a5b 10%,var(--surface));font-size:var(--fs-body);line-height:var(--lh-body)}
.recon-table td.num,.recon-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.recon-table tr.recon-thin td{opacity:.55}
.recon-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:var(--r-stadium);background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:var(--fs-small);font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
/* ---- subscription screen ------------------------------------------------------------------ */
/* ---- subscription screen ------------------------------------------------------------------
 *
 * One primary card (.sub-frame), not a stack of full-width pale bands: white surface, a visible
 * 1px border, a small radius, a subtle shadow, generous internal padding. Everything inside it
 * (headline, access badge, diagnostics, the install control, the records promise) shares that
 * one card's edges rather than each getting its own tinted strip. Licence History is a second,
 * separate card below it at the same width — never inside the primary card, since it is a
 * different kind of content (a log, not current state).
 *
 * Colors here use the existing shared tokens (var(--surface)/var(--line)/var(--shadow)/
 * var(--surface-soft)) rather than new hardcoded hex values, specifically so this redesign is
 * light-mode-focused without touching or diverging from dark mode: dark mode already resolves
 * these same tokens to its own appropriate surface/border/shadow, so it renders exactly as
 * before with no separate dark-mode rule needed here. */
.sub-page{display:flex;flex-direction:column;gap:16px;max-width:900px}
.sub-frame{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow)}
.sub-frame-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub-frame-head h2{margin:0;font-size:var(--fs-h3,var(--fs-lead))}
.sub-frame-detail{margin:6px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.sub-access-badge{display:inline-flex;align-items:center;padding:2px 12px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700;white-space:nowrap}
.sub-access-badge.sub-access-rw{background:var(--greensoft);color:var(--green)}
.sub-access-badge.sub-access-ro{background:var(--redsoft);color:var(--red)}
.sub-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0 0;padding:0}
.sub-facts div{display:flex;flex-direction:column;gap:4px}
.sub-facts dt{font-size:var(--fs-small);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sub-facts dd{margin:0;font-size:var(--fs-lead);font-weight:700}
.sub-facts-mono dd{font-size:var(--fs-body);font-weight:400;font-family:var(--font-code);word-break:break-all}
.sub-note{display:block;margin-top:4px;font-size:var(--fs-small);font-weight:400;color:var(--muted);line-height:var(--lh-small)}
.sub-warning{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-surface);background:color-mix(in srgb,#c07d17 12%,var(--surface));font-size:var(--fs-body);line-height:var(--lh-body)}
.sub-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sub-action-note{margin:0;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body);max-width:64ch}
.sub-action-result{margin:8px 0 0;font-size:var(--fs-body);line-height:var(--lh-body)}
.sub-action-result.sub-action-ok{color:var(--green);font-weight:600}
.sub-action-result.sub-action-bad{color:var(--red);font-weight:600}
/* The promise sits inside the card with the card's own padding, not a separate thin rule that
   stops partway across the page — no border-top, no extra horizontal margin of its own. */
.sub-promise{margin:16px 0 0;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body);max-width:70ch}
/* Support & diagnostics: a compact collapsed ROW, not a large tinted strip. surface-soft in
   light mode is now a near-white gray (see the token update); dark mode's surface-soft is
   unaffected. */
.sub-support{margin:16px 0 0;padding:0;border:2px solid color-mix(in srgb,var(--blue) 46%,var(--line));border-left:5px solid var(--blue);border-radius:var(--r-surface);background:color-mix(in srgb,var(--blue) 7%,var(--surface));overflow:hidden}
.sub-support summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:5px 10px;padding:11px 13px;cursor:pointer;list-style:none;color:var(--ink)}
.sub-support summary::-webkit-details-marker{display:none}
.sub-support summary::before{content:'i';display:grid;place-items:center;grid-row:1/3;width:24px;height:24px;border-radius:var(--r-stadium);background:var(--blue);color:#fff;font-size:var(--fs-small);font-weight:800}
.sub-support summary::after{content:'Show details';grid-row:1/3;grid-column:3;color:var(--blue);font-size:var(--fs-small);font-weight:800}
.sub-support[open] summary::after{content:'Hide details'}
.sub-support-title{font-size:var(--fs-body);font-weight:800;color:var(--ink)}
.sub-support-hint{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.sub-support .sub-facts{margin:0;padding:0 14px 14px 48px}
/* Install a licence: a smaller card NESTED inside the primary card. */
.sub-activate{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sub-activate h3{margin:0 0 6px;font-size:var(--fs-lead)}
.sub-activate input[type=file]{display:block;margin:10px 0}
.sub-history-frame h3{margin:0 0 10px;font-size:var(--fs-lead)}
.sub-history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sub-history-list li{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface)}
.sub-history-list li.sub-history-rejected{border-color:color-mix(in srgb,#b23b3b 40%,var(--line))}
.sub-history-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--fs-body)}
.sub-history-head span{color:var(--muted);font-size:var(--fs-small)}
.sub-history-list time{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--muted)}
.sub-history-reason{margin:6px 0 0;font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-small)}
.sub-history-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.sub-history-meta time{margin-top:0;font-size:var(--fs-small);color:var(--muted)}
.sub-history-source{font-size:var(--fs-small);color:var(--muted);padding:0 8px;border-left:1px solid var(--line)}
.sub-history-facts{margin:6px 0 0;font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-small)}
.sub-clock-warning{background:color-mix(in srgb,#b23b3b 10%,var(--surface))}
.id-reveal{margin-left:8px;font-size:var(--fs-small);font-weight:700;opacity:.75}
.id-reveal:hover{opacity:1}
/* ---- two-step sign-in: the enrolment QR ---------------------------------------------------
   On a WHITE plate regardless of theme. A QR is read by contrast, and a dark-theme card would
   invert it into something a phone camera has to work to resolve - or cannot. The plate is sized
   from the SVG rather than stretched, because a rescaled QR blurs its own module edges. */
.twofa-qr{display:inline-block;margin:10px 0 6px;padding:12px;border-radius:var(--r-surface);background:#fff;box-shadow:var(--shadow);line-height:0}
/* Same rule as the payment code: no fixed size, because the generator now picks a whole number of
   pixels per module and pinning a size here would throw that away. An enrolment URI is long — 57
   modules across with its quiet zone — so this renders around 285px, which is the size it has to be
   to scan rather than a design choice. */
.twofa-qr svg{display:block;max-width:100%;height:auto}
.twofa-qr-or{display:block;margin-top:2px;font-size:var(--fs-body);color:var(--muted)}
.hx-report-btn.hx-free .hx-cta{color:#1f8a5b;font-weight:700}
.hx-listing{align-self:center}
.hx-badge{font-size:10px;font-weight:700;border-radius:var(--r-surface);padding:2px 10px;letter-spacing:.02em;align-self:flex-start}
.hx-badge.hx-ok{color:#1f8a5b;background:#e3f4ec}
.hx-badge.hx-none{color:#8a6d1f;background:#fbeed6}
/* Preferred-browser picker (Settings ▸ Display) */
.browser-picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.browser-opt{padding:10px 14px;border:1px solid color-mix(in srgb,var(--ink,#1b2a3a) 14%,transparent);border-radius:var(--r-surface);background:var(--surface,#fff);cursor:pointer;font-weight:600;font-size:var(--fs-body);color:var(--ink,#1b2a3a);display:inline-flex;align-items:center;gap:8px;transition:box-shadow .15s ease,border-color .15s ease}
.browser-opt:hover:not(:disabled){box-shadow:var(--shadow-raised)}
.browser-opt.active{border-color:var(--accent,#1768b2);box-shadow:0 0 0 1px var(--accent,#1768b2) inset}
.browser-opt:disabled{opacity:.55;cursor:not-allowed}
.bp-cur{color:var(--accent,#1768b2);font-size:var(--fs-micro);font-weight:700}
.bp-na{color:#8a6d1f;font-size:var(--fs-micro);font-weight:600}
.photo-empty{opacity:.7;padding:8px 0;margin:0}
/* Themeable inline icons (replace fixed raster icons; adopt the design accent). */
.dms-ico{display:block;width:100%;height:100%}
.parity-kpi-asset{color:var(--accent);display:grid;place-items:center;width:46px;height:46px;box-sizing:border-box;overflow:hidden}
.parity-kpi-asset .dms-ico{width:26px;height:26px}
/* Beat the base .inventory-kpi-icon 54-64px rules (built for the raster illustration)
   so the themeable SVG KPI icons are a consistent size, centered in their chip. */
.parity-kpi-card .parity-kpi-asset .dms-ico{width:26px;height:26px;object-fit:contain}
.dms-ico{max-width:100%;max-height:100%}
.parity-kpi-card.danger .parity-kpi-asset{color:#c53434}
.parity-kpi-card.success .parity-kpi-asset{color:#1f8a5b}
.quick-action-image{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.panel-heading-icon{width:19px;height:19px;color:var(--accent);flex:0 0 auto}
.inventory-kpi-icon{width:26px;height:26px}
.vehicle-general-gallery .photo-gallery{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
/* Big main vehicle photo (hero) + thumbnail strip - product-gallery layout:
   hero on the left at a sensible size, thumbnails fill the space beside it. */
.vehicle-photo-media{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:14px;align-items:start;margin-top:6px}
.vehicle-photo-hero{position:relative;width:100%;max-width:420px;aspect-ratio:4/3;border-radius:var(--r-surface);overflow:hidden;background:color-mix(in srgb,var(--ink,#1b2a3a) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink,#1b2a3a) 14%,transparent);cursor:zoom-in;margin:0}
.veh-hero-img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .2s ease}
.veh-hero-img[src]{opacity:1}
.vehicle-general-gallery .photo-gallery-strip{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start;margin:0}
.photo-thumb.is-active{outline:2px solid var(--accent,#1768b2);outline-offset:2px}
.photo-thumb.has-photo-warning{border-color:var(--danger,#b42318);display:grid;place-items:center}
.photo-load-warning{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;background:rgba(70,10,10,.88);color:#fff;font-size:var(--fs-small);font-weight:700;z-index:1}
.deleted-photo-panel{margin:14px 0;border:2px solid color-mix(in srgb,var(--accent,#1768b2) 52%,var(--line,#cbd8e6));border-radius:var(--r-control);padding:12px;color:var(--ink);background:color-mix(in srgb,var(--accent,#1768b2) 7%,var(--surface))}
.deleted-photo-panel>summary{cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:8px;font-weight:800}.deleted-photo-panel>summary strong{display:inline-grid;min-width:24px;height:24px;padding:0 7px;place-items:center;border-radius:var(--r-surface);background:var(--accent,#1768b2);color:#fff;font-size:var(--fs-small)}.deleted-photo-panel>p{color:var(--muted);margin:10px 0}.deleted-photo-panel .table-wrap{border-color:var(--line);background:var(--surface)}
.deleted-photo-bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;padding:9px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}.deleted-photo-bulk-bar[hidden]{display:none}.deleted-photo-bulk-bar [data-deleted-photo-count]{margin-right:auto;font-weight:700}.deleted-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.deleted-photo-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}.deleted-photo-preview{position:relative;width:96px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-control);background:var(--surface-soft);border:1px solid var(--line);display:grid;place-items:center}.deleted-photo-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.deleted-photo-preview.has-preview img{display:block}.deleted-photo-preview>span{padding:6px;color:var(--muted);font-size:var(--fs-micro);text-align:center}.deleted-photo-preview.has-preview>span{display:none}.deleted-photo-pick{position:absolute;left:5px;top:5px;z-index:2;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:var(--r-control);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);font-size:var(--fs-micro);font-weight:700;box-shadow:var(--shadow)}.deleted-photo-pick input{margin:0}.deleted-photo-details{display:grid;gap:6px;min-width:0}.deleted-photo-details>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deleted-photo-details>small{color:var(--muted)}
@media(max-width:620px){.deleted-photo-grid{grid-template-columns:1fr}.deleted-photo-card{grid-template-columns:80px minmax(0,1fr)}.deleted-photo-preview{width:80px}}
@media(max-width:900px){.vehicle-photo-media{grid-template-columns:1fr}.vehicle-photo-hero{max-width:520px}}
/* Inventory row car thumbnail */
.veh-thumb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:54px;height:38px;border-radius:var(--r-control);overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent);color:color-mix(in srgb,var(--accent) 60%,transparent)}
.veh-thumb .veh-thumb-ph{width:22px;height:18px}
.veh-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
/* The "Example" bar that used to sit across the bottom of a stand-in thumbnail is gone, and the
   rule with it. It could not be made legible in a 54px box: uppercase --fs-micro with .04em
   tracking broke the word mid-character, so every affected inventory row read "EXAMP / LE".
   The disclosure now travels on the image itself (data-stock-photo, alt and title) rather than
   as paint over the picture. See the stock-photo hydrator in app.js. */
.vehicle-column-photo,.vehicle-col-photo{width:64px}
th.vehicle-column-photo{text-align:center}
.sidebar-brand>span:last-child{display:grid;min-width:0}.sidebar-brand strong{overflow:hidden;text-overflow:ellipsis;color:var(--sidebar-ink,#fff);font-size:var(--fs-body);white-space:nowrap}.sidebar-brand small{margin-top:2px;color:var(--sidebar-muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.sidebar-nav{flex:1;min-height:0;padding:14px 10px 20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* Folded groups sit tighter than open ones. 18px between two open groups is the breathing room
   that separates their links; between two folded headings it is a stack of lonely labels with
   holes in it, which is exactly the "crazy" look the fold was meant to fix. Even 2px rhythm. */
/* Expand all / Collapse all. Quiet by default: they are a convenience, not a destination, and must
   not compete with the nav links for attention. Even 2px rhythm, token type only. */
.sidebar-nav-tools{display:flex;gap:8px;margin:0 10px 12px}
.sidebar-nav-tool{display:inline-flex;align-items:center;min-height:28px;padding:4px 8px;border:0;border-radius:var(--r-control);background:none;color:var(--sidebar-muted);font-family:inherit;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;cursor:pointer}
.sidebar-nav-tool:hover{color:var(--sidebar-ink,#fff)}
.sidebar-nav-tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar-nav-group{margin:0 0 18px}
.sidebar-nav-group:has(.sidebar-nav-links[hidden]){margin-bottom:2px}
.sidebar-nav-group h2{margin:0 10px 8px;color:var(--sidebar-muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
/* The heading IS the control. Inheriting every type property individually rather than with the
   `font:` shorthand, which would silently reset font-family to the UA default and drop the brand
   typeface out of every group label — the exact bug that once hit every page <h1>. */
.sidebar-group-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:32px;padding:6px 0;border:0;border-radius:var(--r-control);background:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;text-transform:inherit;cursor:pointer}
.sidebar-group-toggle:hover{color:var(--sidebar-ink,#fff)}
.sidebar-group-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Drawn, not typed. A "▸" character renders at a different size and baseline in each of the ten
   designs' typefaces, and three of them have no glyph for it at all. */
.sidebar-group-caret{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(-1px,-1px);transition:transform .15s ease}
.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-caret{transform:rotate(45deg) translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){.sidebar-group-caret{transition:none}}
/* The group holding the page you are on, marked on the heading so it reads as "you are here"
   even before the active link scrolls into view. */
.sidebar-nav-group.holds-current>h2 .sidebar-group-toggle{color:var(--sidebar-ink,#fff)}
/* THE NAV READS ON EVERY SIDEBAR, LIGHT OR DARK.
   These colours were hardcoded for a dark navy sidebar — #dceaf7 links, #b9d5ee icons, white
   hovers, a #1768b2 active pill. The design system already publishes --sidebar-ink and
   --sidebar-muted per design and per appearance, and the two designs that give the sidebar a LIGHT
   background (Vintage Ledger's cream, Alpine's white) were rendering near-white text on it: the
   whole nav was invisible, reported from a live screen. The tokens existed; the component simply
   never consumed them. The old values stay as fallbacks so a design that sets no sidebar tokens
   looks exactly as it did.
   Hover and the active pill are derived from the ink and the accent rather than from white, for
   the same reason: rgba(255,255,255,.08) over cream is nothing at all. */
.sidebar-link{display:flex;align-items:center;gap:10px;min-height:37px;margin:2px 0;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-control);color:var(--sidebar-ink,#dceaf7);font-size:var(--fs-small);font-weight:600;cursor:pointer;transition:.14s}
.sidebar-link:hover{background:color-mix(in srgb,var(--sidebar-ink,#fff) 10%,transparent);color:var(--sidebar-ink,#fff)}
/* --accent-ink, not a hardcoded #fff. The active page is a block of --accent, and every design
   picks its own; white was only ever right while all of them were dark navies. Measured on the
   running app, white on Alpine's dark-mode sky blue is 2.6:1 — the one nav label you most need to
   read, and the least readable thing on the screen. Each palette states its own ink. */
.sidebar-link.active{border-color:color-mix(in srgb,var(--sidebar-ink,#fff) 14%,transparent);background:var(--accent,#0369a1);color:var(--accent-ink,#fff);box-shadow:inset 3px 0 0 var(--accent-glow,#7dd3fc)}
.sidebar-link-icon{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;color:var(--sidebar-muted,#b9d5ee);font-size:var(--fs-body)}.sidebar-link.active .sidebar-link-icon{color:var(--accent-ink,#fff)}
.sidebar-release{margin:10px 14px 16px;padding:12px;border:1px solid color-mix(in srgb,var(--sidebar-ink,#fff) 17%,transparent);border-radius:var(--r-control);display:grid;gap:4px}.sidebar-release strong{font-size:var(--fs-small);color:var(--sidebar-ink,#fff)}.sidebar-release span{color:var(--sidebar-muted);font-size:var(--fs-micro)}
.desktop-app-header{position:sticky;top:0;z-index:70;min-height:62px;margin-left:228px;display:flex;align-items:center;gap:14px;padding:0 18px;color:var(--ink);background:color-mix(in srgb,var(--header-bg) 95%,transparent);border:0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.breadcrumb-bar{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:var(--fs-small)}.breadcrumb-bar a{cursor:pointer}.breadcrumb-bar a:hover{color:var(--blue);text-decoration:underline}.breadcrumb-bar b{color:#8ca0b4}.breadcrumb-bar span{overflow:hidden;color:var(--ink);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.header-spacer{flex:1}
.header-help-button{display:flex;align-items:center;gap:6px;min-height:38px;padding:8px 10px;border:0;border-radius:var(--r-control);color:var(--ink);background:transparent;font-size:var(--fs-small);font-weight:700;cursor:pointer}.header-help-button:hover{background:var(--surface-soft)}
.header-user-menu{flex:0 0 auto;width:auto;margin-top:0}.account-menu-button{display:flex;align-items:center;gap:10px;min-height:52px;height:auto;padding:9px 14px 9px 9px;border:1px solid var(--line);color:var(--ink);background:var(--surface);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.account-menu-button:hover{background:var(--surface-strong);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow-raised)}.account-menu-button:hover .account-menu-button>span:last-child{color:var(--muted);font-size:var(--fs-small);margin-left:1px}
.account-avatar{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-deep);color:var(--accent-deep-ink,#fff);font-weight:700;font-size:var(--fs-body);letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .15s ease}.account-button-copy{display:grid;min-width:74px;text-align:left;line-height:var(--lh-micro)}.account-button-copy strong{font-size:var(--fs-small);color:var(--ink);font-weight:700}.account-button-copy small{margin-top:1px;color:var(--muted);font-size:var(--fs-micro);font-weight:600}
.account-dropdown-panel{top:48px;right:0;left:auto;width:max-content;min-width:225px;max-width:300px;padding:6px;background:var(--surface-strong);color:var(--ink);border-color:var(--line);border-radius:var(--r-control)}.account-menu-role{padding:8px 10px;border-bottom:1px solid var(--line)}.account-menu-role span{color:var(--muted)}.account-theme-control{display:grid;gap:6px;margin:6px 6px;padding:8px;border:1px solid var(--line);border-radius:var(--r-control);color:var(--muted);font-size:var(--fs-micro);font-weight:700}.account-theme-control select{min-width:190px;height:32px}.account-dropdown-panel a,.account-signout-menu{white-space:nowrap}
.menu-btn{display:none;flex:0 0 auto;margin:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-control);color:var(--ink);background:var(--surface);font-size:var(--fs-lead)}
#app{min-width:0;margin-left:228px;min-height:calc(100vh - 62px)}
body:not(.security-locked) #app{min-height:calc(100vh - 62px);background-color:var(--application-background-color)}
body:not(.security-locked).application-background-image #app{background-image:linear-gradient(rgba(var(--application-overlay-color),var(--application-overlay-opacity)),rgba(var(--application-overlay-color),var(--application-overlay-opacity))),var(--application-background-image);background-size:cover;background-position:var(--application-background-position);background-attachment:fixed;background-repeat:no-repeat}
.footer{margin-left:228px;color:var(--muted);background:var(--surface-soft);border-color:var(--line)}
.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{width:auto;max-width:none;margin:0;padding:22px 24px 38px}.page-heading,.dashboard-heading{margin-bottom:16px}.page-heading h1,.dashboard-heading h1{color:var(--navy);font-size:var(--fs-h1)}
.notice.success-notice{background:color-mix(in srgb,var(--greensoft) 78%,var(--surface));border-color:color-mix(in srgb,var(--green) 38%,var(--line));color:var(--ink)}
.notice.info-notice{background:color-mix(in srgb,var(--accent,#2f6fed) 12%,var(--surface));border-color:color-mix(in srgb,var(--accent,#2f6fed) 34%,var(--line));color:var(--ink)}
/* Auction import.
 *
 * All colour comes from the design tokens, so all twelve presets inherit this - nothing here
 * hard-codes a palette. The one exception is the logo plate, and that is deliberate: the marks
 * are supplied flat on white, so each sits on its own light chip. Punching a white-background
 * PNG straight onto a dark surface shows the artwork's own rectangle, which looks like a bug. */
.auction-lead{margin:14px 0 8px;font-weight:600;color:var(--ink)}
.auction-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.auction-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:16px 12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.auction-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.auction-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.auction-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent),0 6px 16px rgba(12,34,56,.09)}
.auction-card-name{font-size:var(--fs-small);font-weight:600;text-align:center;line-height:calc(var(--ui-table) + 7px)}
.auction-card-perk{padding:1px 8px;border-radius:var(--r-stadium);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em}

/* The logo plate: a fixed box so four marks of different proportions line up, with the image
 * letterboxed inside rather than stretched. */
.auction-logo{display:flex;align-items:center;justify-content:center;width:100%;height:46px;padding:6px 8px;border-radius:var(--r-surface);background:#fff;box-shadow:inset 0 0 0 1px rgba(12,34,56,.08)}
.auction-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* A long wordmark is constrained by the card WIDTH, so sizing it by height leaves it tiny in a
   tall plate. These use the full width instead, which is how a wordmark is meant to sit. */
.auction-logo.wide img{width:100%;height:auto;max-height:none}
.auction-logo.small{width:44px;height:26px;padding:4px 6px;flex:0 0 auto}
.auction-logo-text{width:38px;height:38px;border-radius:50%;background:var(--surface-strong);box-shadow:none;font-weight:700;color:var(--muted)}

.auction-flow{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.auction-perk{margin:0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--ink);font-size:var(--fs-body)}

/* The drop target - the primary path now, so it gets the visual weight. */
.auction-drop{position:relative;padding:26px 18px;border:2px dashed var(--line);border-radius:var(--r-surface);background:var(--surface-soft);text-align:center;cursor:pointer;transition:border-color .12s}
.auction-drop:hover,.auction-drop:focus-visible{outline:none;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft))}
.auction-drop.over{border-color:var(--accent);border-style:solid;background:color-mix(in srgb,var(--accent) 11%,var(--surface))}
.auction-drop-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.auction-drop-icon{font-size:var(--fs-h1);line-height:1;color:var(--accent)}
.auction-drop-inner strong{font-size:var(--fs-lead);color:var(--ink)}
.auction-drop-sub{font-size:var(--fs-small);color:var(--muted);max-width:56ch;line-height:var(--lh-small)}
.auction-drop-note{margin:12px 0 0;padding:8px 12px;border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font-size:var(--fs-small)}

.auction-paste{display:flex;flex-direction:column;gap:6px}
.auction-paste label{font-size:var(--fs-small);font-weight:600;letter-spacing:.02em;color:var(--muted)}
.auction-paste textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font-size:var(--fs-body);resize:vertical}
.auction-paste textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.auction-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.auction-suggest{margin:0;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 8%,var(--surface));font-size:var(--fs-body);color:var(--ink)}

/* The one-click capture, collapsed. Someone importing their first car should not have to read it. */
.auction-capture{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.auction-capture>summary{padding:10px 14px;font-size:var(--fs-body);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.auction-capture>summary::-webkit-details-marker{display:none}
.auction-capture>summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--muted);transition:transform .12s}
.auction-capture[open]>summary::before{transform:rotate(90deg)}
.auction-capture-body{padding:0 16px 14px 34px;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.auction-capture-body ol{margin:10px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.auction-capture-privacy{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-small)}
.capture-bookmarklet{display:inline-block;padding:6px 14px;border-radius:var(--r-surface);background:var(--accent);color:var(--accent-ink,#fff);font-weight:700;font-size:var(--fs-body);text-decoration:none;cursor:grab}
.capture-bookmarklet:active{cursor:grabbing}

/* What AutoSteward understood. */
.auction-review{padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-surface);background:var(--surface)}
.auction-review.complete{border-left-color:var(--pui-ok,#1c7a4a)}
.auction-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.auction-review-head>div{display:flex;align-items:center;gap:10px;min-width:0}
.auction-review-head strong{font-size:var(--fs-lead);color:var(--ink)}
.auction-review-photos{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
.auction-chips{display:flex;flex-wrap:wrap;gap:6px}
.auction-chip{padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:600;border:1px solid var(--line);background:var(--surface-strong);color:var(--ink)}
.auction-chip.ok{border-color:color-mix(in srgb,var(--pui-ok,#1c7a4a) 34%,var(--line));color:var(--pui-ok,#1c7a4a)}
.auction-chip.gap{border-color:color-mix(in srgb,var(--pui-risk,#9a2617) 38%,var(--line));color:var(--pui-risk,#9a2617);cursor:help}
.auction-gaps{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-body);color:var(--ink);line-height:var(--lh-body)}
.auction-allgood{margin:12px 0 0;font-size:var(--fs-body);color:var(--pui-ok,#1c7a4a);font-weight:600}
.auction-photo-warning{margin:10px 0 0;font-size:var(--fs-small);color:var(--muted)}

/* A way straight back to the auction the car is being imported from. Tokens only, so it follows
   the chosen design and stays legible on dark. */
.auction-site-links{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:10px 0 0;font-size:var(--fs-body)}
.auction-site-links > span{color:var(--muted)}
.auction-site-link{color:var(--blue);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--blue) 40%,transparent)}
.auction-site-link:hover{border-bottom-color:var(--blue)}

/* Market Intelligence (web/market-intel.js) — the one market view.
   Built entirely on the design tokens (owner-directed 2026-08-04) so it belongs to whichever
   design the dealer picked, rather than dropping them into a differently-styled product. */
/* Embedded inside the pricing card, not a card of its own — one market block per screen.
   The block is TINTED rather than bordered: it sits inside a card already, and a second border
   inside a card is the thing that made the first version read as a stray widget. */
.mi-embed{margin:16px 0 4px;padding:14px 16px 14px;border-radius:var(--r-control);
  background:var(--surface-strong);border:1px solid var(--line);
  border-left:3px solid var(--blue)}
.mi-embed-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:12px}
.mi-embed-head strong{font-size:var(--fs-small);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mi-embed-head span{font-size:var(--fs-small);color:var(--muted)}
.mi-embed-note{margin-left:8px;font-size:var(--fs-small);color:var(--muted)}
.mi-summary{display:grid;gap:12px}

/* The hero figure. One number, large, because one of these four figures is the answer and the
   other three are context for it — which four equal boxes could not say. */
.mi-hero{display:grid;gap:1px}
.mi-hero-label{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mi-hero-value{font-size:var(--fs-display);line-height:var(--lh-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.mi-hero.mi-ok .mi-hero-value{color:var(--pui-ok,#1c7a4a)}
.mi-hero-sub{font-size:var(--fs-small);color:var(--muted)}

/* Supporting facts: hairline-separated, not boxed. */
.mi-facts{display:flex;flex-wrap:wrap;gap:0 22px;padding-top:10px;border-top:1px solid var(--line)}
.mi-fact{display:grid;gap:0;padding:2px 0;min-width:96px}
.mi-fact-label{font-size:var(--fs-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mi-fact-value{font-size:var(--fs-lead);font-variant-numeric:tabular-nums;color:var(--ink)}
.mi-fact-sub{font-size:var(--fs-small);color:var(--muted)}
.mi-fact.mi-ok .mi-fact-value,.mi-fact.mi-ok .mi-fact-sub{color:var(--pui-ok,#1c7a4a)}
.mi-fact.mi-risk .mi-fact-value,.mi-fact.mi-risk .mi-fact-sub{color:var(--pui-risk,#b4341f)}
.mi-line{margin:0;font-size:var(--fs-body);color:var(--ink)}

/* The cars themselves. A scroll strip rather than a wrapping grid: a market block must not change
   height when a search happens to return eight photos instead of three. */
.mi-photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mi-photo{position:relative;flex:0 0 auto;width:104px;height:72px;border-radius:var(--r-control);overflow:hidden;
  background:var(--surface-soft);border:1px solid var(--line);display:block;text-decoration:none}
.mi-photo img{width:100%;height:100%;object-fit:cover;display:block}
a.mi-photo:hover{border-color:var(--blue)}
.mi-photo-price{position:absolute;left:0;bottom:0;right:0;padding:8px 6px 4px;font-size:var(--fs-small);
  font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));text-align:left}
.mi-scope-note{margin:0 0 8px;font-size:var(--fs-small);color:var(--muted)}

/* The vehicle card in the page header — THIS car, which is the one photograph that earns its
   place. A real dealer photo when the car has one, an example of the same year/make/model when it
   does not, always labelled as an example. */
.mi-vehicle{display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;border:1px solid var(--line);
  border-radius:var(--r-control);background:var(--surface-strong);max-width:400px}
.mi-vehicle-photo{position:relative;flex:0 0 122px;width:122px;height:80px;border-radius:var(--r-control);overflow:hidden;background:var(--surface-soft)}
.mi-vehicle-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mi-vehicle-tag{position:absolute;left:0;right:0;bottom:0;padding:6px 4px 2px;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));text-align:center}
.mi-vehicle-copy{display:grid;gap:2px;min-width:0}
.mi-vehicle-copy strong{font-size:var(--fs-lead);line-height:var(--lh-lead)}
.mi-vehicle-copy span{font-size:var(--fs-small);color:var(--muted)}
.mi-vehicle-stock{font-variant-numeric:tabular-nums}

/* The dashboard row: headline figure, the spread, the qualifying numbers. */
.mi-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.5fr) minmax(230px,.95fr);gap:14px;margin:16px 0 4px}
.mi-card{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.mi-card h3{margin:0 0 12px;font-size:var(--fs-small);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mi-big{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mi-big strong{font-size:var(--fs-display);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--pui-ok,#1c7a4a)}
.mi-big-empty strong{color:var(--ink)}
.mi-badge{padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700;letter-spacing:.03em;
  color:var(--muted);background:var(--surface-soft);border:1px solid var(--line)}
.mi-badge-ok{color:var(--pui-ok,#1c7a4a);border-color:color-mix(in srgb,var(--pui-ok,#1c7a4a) 40%,transparent);
  background:color-mix(in srgb,var(--pui-ok,#1c7a4a) 12%,transparent)}
.mi-big-sub{margin:4px 0 12px;font-size:var(--fs-small);color:var(--muted)}
.mi-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mi-tile{display:grid;gap:2px;justify-items:start}
.mi-tile>span{font-size:var(--fs-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mi-tile strong{font-size:var(--fs-lead);font-variant-numeric:tabular-nums}
.mi-tile small{font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-small)}
.mi-tile .mi-ring{width:34px;height:34px;margin:1px 0}
.mi-rows{display:grid;gap:10px}
.mi-row{display:grid;grid-template-columns:1fr auto;gap:1px 10px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mi-row:last-child{padding-bottom:0;border-bottom:0}
.mi-row-label{font-size:var(--fs-small);color:var(--ink)}
.mi-row-value{font-size:var(--fs-lead);font-variant-numeric:tabular-nums;text-align:right}
.mi-row-detail{grid-column:1/-1;font-size:var(--fs-small);color:var(--muted)}
.mi-row.mi-risk .mi-row-value{color:var(--pui-risk,#b4341f)}
.mi-empty-note{margin:0;font-size:var(--fs-small);color:var(--muted)}

/* "What this means" — the conclusions, which are the reason to open the page at all.
   Each one carries the evidence it rests on, so a claim drawn from two listings says so. */
.mi-takeaways{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;margin:16px 0 4px}
.mi-takeaways h3{grid-column:1/-1;margin:0;font-size:var(--fs-small);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mi-take{padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:var(--r-control);background:var(--surface-strong)}
.mi-take.mi-ok{border-left-color:var(--pui-ok,#1c7a4a)}
.mi-take.mi-risk{border-left-color:var(--pui-risk,#b4341f)}
.mi-take.mi-watch{border-left-color:#d19a2a}
.mi-take-label{display:block;font-size:var(--fs-small);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mi-take p{margin:4px 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.mi-take small{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--muted)}
.mi-takeaways-compact{margin:12px 0 2px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.mi-takeaways-compact .mi-take{padding:10px 12px;background:var(--surface-soft)}
.mi-takeaways-compact .mi-take p{font-size:var(--fs-body)}
.mi-card-chart .mi-callout{margin-top:12px}
@media (max-width:1180px){.mi-grid{grid-template-columns:1fr 1fr}.mi-card-side{grid-column:1/-1}}
@media (max-width:760px){.mi-grid{grid-template-columns:1fr}.mi-head{flex-direction:column}.mi-vehicle{max-width:none}}

.mi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mi-stats-wide{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin:14px 0}
.mi-stat{padding:12px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);display:grid;gap:2px}
.mi-stat-label{font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mi-stat-value{font-size:var(--fs-h3);font-variant-numeric:tabular-nums;color:var(--ink)}
.mi-stat-sub{font-size:var(--fs-small);color:var(--muted)}
.mi-ok .mi-stat-value{color:var(--pui-ok,#1c7a4a)}
.mi-risk .mi-stat-value{color:var(--pui-risk,#b4341f)}
.mi-summary-actions{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.mi-summary-hint{font-size:var(--fs-small);color:var(--muted);max-width:52ch}
/* The loading placeholder. Shaped like the block it becomes, so the panel does not jump when the
   figures land — and visibly BUSY, because an empty box and a broken one look the same. */
.mi-embed-skeleton{display:grid;gap:8px;padding:2px 0 4px}
.mi-embed-skeleton span{display:block;height:11px;border-radius:var(--r-control);
  background:linear-gradient(90deg,var(--surface-soft),var(--line),var(--surface-soft));
  background-size:200% 100%;animation:miShimmer 1.3s ease-in-out infinite}
.mi-embed-skeleton span:first-child{height:26px;width:42%}
.mi-embed-skeleton span:nth-child(2){width:78%}
.mi-embed-skeleton span:last-child{width:60%}
@keyframes miShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.mi-embed-skeleton span{animation:none}}
/* minmax(0,1fr), not the implicit auto column: the auto track took the widest panel's content width
   (1,050px in an 869px page at a 1180px window), so the whole page scrolled sideways on every car's
   market screen, and past the window at 1440 too (measured by tools/dev/walk). */
.market-intel-page{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* Back link, the how-to-read link and the freshness stamp sit on one line here. They are separate
   inline BUTTONS with no whitespace between them in the markup, so the row rendered as
   "← Back to STW-1002How to read this →" — two different destinations reading as one sentence.
   A flex row with a real gap fixes it for every combination, including when the freshness stamp is
   absent, and wraps instead of colliding at a narrow window. 12px keeps the even 2px rhythm. */
.mi-back{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
/* The Market Intelligence FRONT DOOR (the look-up tool + your-lot picker). Built in the same
   vocabulary as the advanced per-car view — eyebrow head, badge, headline figure, tile row —
   because most dealers meet this screen first and it read as an older, plainer product beside it. */
.mi-lookup-ask,.mi-lookup-result,.mi-lookup-lot{padding:20px 22px 8px}
.mi-look-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mi-look-head .eyebrow{margin:0 0 2px!important}
.mi-look-head h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;color:var(--navy);letter-spacing:-.02em}
.mi-look-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-stadium);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.mi-look-lead{margin:8px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);max-width:76ch}
/* The answer: one figure that carries the page, then the numbers that qualify it. */
.mi-look-headline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 2px}
.mi-look-headline strong{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.mi-look-headline span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.mi-look-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 4px}
.mi-look-tile{display:grid;gap:2px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.mi-look-tile>span{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mi-look-tile strong{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.mi-look-tile small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.mi-look-table{margin-top:14px}
.mi-look-table .mi-look-price{font-variant-numeric:tabular-nums;font-weight:600}
/* Priced against the median, the way the comps table reads: over asks in red, under in green —
   from the DEALER's seat, where a cheaper comp is the opportunity and a dearer one is the risk. */
.mi-look-over{color:var(--red);font-weight:600;font-size:var(--fs-small);line-height:var(--lh-small)}
.mi-look-under{color:var(--green);font-weight:600;font-size:var(--fs-small);line-height:var(--lh-small)}
.mi-look-flat{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.mi-lookup-result .panel-footnote,.mi-lookup-lot .panel-footnote{margin:16px -22px 0}
@media (max-width:760px){.mi-look-tiles{grid-template-columns:1fr}}

/* Provider workspace (web/provider-cards.js) — every data source in one grid, in the same
   vocabulary as the market panels: eyebrow head, count badge, tiles, stat rows. */
.pc-panel{padding:20px 22px 22px;margin-bottom:16px}
/* The Advanced disclosure. Closed it reads as one quiet line; open it becomes the workspace. */
.pc-summary{display:grid;gap:2px;cursor:pointer;list-style:none}
.pc-summary::-webkit-details-marker{display:none}
.pc-summary span{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600;color:var(--navy)}
.pc-summary span::before{content:"▸ ";color:var(--muted)}
.pc-panel[open] .pc-summary span::before{content:"▾ "}
.pc-summary small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.pc-panel[open] .pc-summary{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pc-workspace{display:grid;gap:18px}
.pc-section{display:block}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pc-top .eyebrow{margin:0 0 2px!important}
.pc-top h2{margin:0;font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;color:var(--navy);letter-spacing:-.02em}
.pc-lead{margin:6px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);max-width:74ch}
.pc-count{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-stadium);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.pc-section-head h2{margin:0;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600;color:var(--navy)}
.pc-section-head p{margin:2px 0 10px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pc-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.pc-card.pc-on{border-color:rgba(29,116,72,.42)}
.pc-head{display:flex;align-items:center;gap:10px}
.pc-logo{flex:0 0 auto;display:inline-flex;width:28px;height:28px}
/* The GLYPHS we draw ourselves are square by construction, so they keep the square slot. */
.pc-logo svg{width:28px;height:28px;border-radius:var(--r-control);display:block}
/* A REAL BRAND FILE IS A WORDMARK and must not be forced into that square — that is what turned
   eBay into an illegible smudge. The slot grows, the logo is sized by HEIGHT with its aspect ratio
   kept, and it sits on a plate so it reads against the card.
   The plate is NEAR-BLACK rather than the white the parts cards use, because of the artwork we
   actually hold: chatgpt.webp is the white-on-transparent variant and vanishes on white, while
   eBay's is full colour and holds up on either. If a black-on-transparent file ever replaces one,
   this flips to #fff — a plate has to match its artwork, and one colour cannot serve both. */
.pc-logo:has(img){width:auto;max-width:84px}
.pc-logo img{height:28px;width:auto;max-width:84px;object-fit:contain;display:block;
  border-radius:var(--r-control);padding:3px 7px;background:#101418;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
/* The wordmark already says who it is. Printing the name beside it read "eBay eBay" — the same
   redundancy the parts supplier cards hide, with the same hook: the class is added on LOAD, so a
   card whose file is missing keeps its name and its drawn glyph. */
.pc-head.has-logo h3{display:none}
.pc-head h3{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.pc-badge{margin-left:auto;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.pc-badge-ok{color:var(--green)}
.pc-blurb{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.pc-model{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pc-model code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pc-stats{display:grid;gap:2px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.pc-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pc-stat span{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);text-transform:uppercase;letter-spacing:.05em}
.pc-stat strong{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;font-variant-numeric:tabular-nums}
.pc-stat .pc-ok{color:var(--green)}
.pc-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.pc-actions .button{flex:1}
.pc-configure{width:100%}
.pc-free-note{margin:auto 0 0;padding-top:10px;color:var(--green);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.pc-note{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
@media (max-width:1180px){.pc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pc-grid{grid-template-columns:1fr}}

/* Freshness + refresh, pushed to the right of the back/help links. The age label is why the
   button makes sense, so they sit together as one unit. */
.mi-freshness{float:right;display:inline-flex;align-items:baseline;gap:10px}
.mi-freshness .mi-age{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.mi-freshness .mi-refresh{color:var(--blue)}
.mi-freshness .mi-refresh:disabled{color:var(--muted);cursor:default}
.mi-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start}
.mi-head h2{margin:2px 0 4px}
.mi-sub{margin:0;color:var(--muted);font-size:var(--fs-body);max-width:56ch}
.mi-confidence{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);max-width:34ch}
.mi-confidence strong{font-size:var(--fs-body)}
.mi-confidence span{font-size:var(--fs-small);color:var(--muted)}
.mi-high{border-left:3px solid var(--pui-ok,#1c7a4a)}
.mi-medium{border-left:3px solid var(--blue)}
.mi-low,.mi-none{border-left:3px solid var(--muted)}
/* The sentence the page exists to produce — asking vs sold — so it reads as a conclusion
   rather than two numbers the dealer has to subtract. */
.mi-callout{margin:0 0 6px;padding:12px 14px;border-radius:var(--r-control);background:var(--bluesoft);color:var(--ink);font-size:var(--fs-body)}
/* Charts. Same graphical treatment in every design — only the colours follow the theme, because
   they are all drawn from tokens rather than baked in. */
.mi-charts{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.4fr);gap:14px;margin:16px 0 4px}
.mi-chart{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.mi-chart h3{margin:0 0 10px;font-size:var(--fs-body);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.mi-gauge svg{width:100%;height:26px;display:block}
.mi-gauge-scale{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:var(--fs-small);color:var(--muted)}
.mi-gauge-scale span:nth-child(2){text-align:center}
.mi-gauge-scale span:last-child{text-align:right}
.mi-curve svg{width:100%;height:auto;display:block;overflow:visible}
.mi-curve-label{font-size:6px;fill:var(--muted)}
.mi-chart-note{margin:8px 0 0;font-size:var(--fs-small);color:var(--muted)}
.mi-ring{width:44px;height:44px;flex:0 0 auto}
.mi-ring-text{font-size:var(--fs-small);font-weight:700;fill:var(--ink)}
.mi-confidence{display:flex;gap:10px;align-items:center}
.mi-confidence > div{display:grid;gap:2px}
@media (max-width:860px){.mi-charts{grid-template-columns:1fr}}

.mi-thumb-col{width:64px;padding-right:0}
.mi-thumb{width:56px;height:40px;object-fit:cover;border-radius:var(--r-control);display:block;background:var(--surface-soft)}
.mi-thumb-empty{border:1px dashed var(--line)}

/* The market analyst (web/market-agent.js). Visually quieter than the data above it: it is an
   opinion about the figures, and it should not out-shout them. */
.market-agent{padding:14px 16px;border-radius:var(--r-control);background:var(--surface-soft);
  border:1px solid var(--line);border-left:3px solid var(--accent,var(--blue))}
.ma-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:10px}
.ma-head h3{margin:0;font-size:var(--fs-lead)}
.ma-head span{font-size:var(--fs-small);color:var(--muted)}
.ma-note{margin:0 0 10px;font-size:var(--fs-body);color:var(--muted)}
.ma-error{margin:0 0 10px;font-size:var(--fs-body);color:var(--pui-risk,#b4341f)}
.ma-answer{font-size:var(--fs-body);line-height:var(--lh-body)}
.ma-answer p{margin:0 0 10px}
.ma-answer p:last-child{margin-bottom:0}
.ma-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.ma-foot{font-size:var(--fs-small);color:var(--muted);max-width:62ch}

/* The "let them pick a time" connector on the Leads screen, beside the mailbox one.
   Tokens and scale steps only, so all ten designs and both appearances restyle it. */
.crm-connector{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.crm-connector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crm-connector-head h3{margin:0 0 4px;font-size:var(--fs-lead);color:var(--navy)}
.crm-connector-head p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);max-width:70ch}
.crm-connector-row{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:12px}
.crm-connector-field{display:flex;flex-direction:column;gap:4px;flex:1 1 320px;font-size:var(--fs-small);font-weight:600}
.crm-connector-field input{min-height:var(--control-height,36px)}
.crm-connector-note{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);max-width:78ch}

/* The "Copy VIN" chip on a supplier card that cannot be pre-filled. Sits inside the card link,
   so it needs to look pressable and stop the click reaching the anchor. */
.parts-link-paste{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;
  border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface);
  color:var(--muted);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.parts-link-paste:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* "Make RockAuto one click" — the one-time engine paste. */
.parts-engine-setup{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-control);
  background:var(--surface-soft,var(--surface))}
/* DONE IS NOT AN ANNOUNCEMENT. Once RockAuto is configured for a model there is nothing to do and
   nothing to read, so the block drops its border, its tint and its padding and becomes one quiet
   line of small print. It was a full green panel above the parts a dealer came to look at, on every
   car of a model they had already set up. */
.parts-engine-setup.done{margin-top:6px;padding:0;border:0;background:none}
.parts-engine-done{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.parts-engine-setup strong{display:block;font-size:var(--fs-body);color:var(--navy)}
.parts-engine-setup p{margin:2px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);max-width:72ch}
.parts-engine-setup code{padding:1px 6px;border-radius:var(--r-control);background:var(--bluesoft);color:var(--blue);font-weight:600}
/* Two steps, each one action. Generous line-height because this is instruction text read once
   while looking between two browser tabs, not a dense table. */
.parts-engine-lead{margin:2px 0 8px!important;color:var(--muted);font-size:var(--fs-small)}
.parts-engine-steps{margin:0;padding-left:20px;display:grid;gap:8px;max-width:64ch}
.parts-engine-steps li{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.parts-engine-steps .button.compact{margin-right:6px;vertical-align:baseline}
.parts-engine-why{margin-top:10px;max-width:64ch}
.parts-engine-why summary{color:var(--blue);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.parts-engine-why p{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.parts-engine-row{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.parts-engine-row input{min-width:280px;min-height:var(--control-height,36px)}
@media(max-width:720px){.parts-engine-setup{flex-direction:column;align-items:stretch}
  .parts-engine-row input{min-width:0;flex:1}}

/* "Bought a part?" on the vehicle's Parts section.
   Written inline with --card-bg / --border / --text-muted, none of which exist in this app — so
   it painted with no background, a zero-width border and an un-muted caption. Real tokens, real
   scale steps, and the even 2px spacing rhythm. */
.parts-expense-nudge{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-control);
  background:var(--surface-soft,var(--surface))}
.parts-expense-nudge strong{display:block;font-size:var(--fs-body);color:var(--navy)}
.parts-expense-nudge p{margin:2px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);max-width:64ch}
.parts-expense-nudge .button{flex:0 0 auto}
@media(max-width:640px){.parts-expense-nudge{flex-direction:column;align-items:stretch}}

.mi-block{margin-top:16px}
.mi-block h3{margin:0 0 8px;font-size:var(--fs-lead)}
.mi-table{font-size:var(--fs-body)}
.mi-delta.over{color:var(--pui-risk,#b4341f)}
.mi-delta.under{color:var(--pui-ok,#1c7a4a)}
/* Listings table: the four columns that were already being fetched and dropped.
   Every colour is a token, so all ten designs and both appearances restyle it. */
.mi-thumb-col{width:76px;padding-right:0}
.mi-thumb{display:block;width:64px;height:48px;object-fit:cover;border-radius:var(--r-control);
  border:1px solid var(--line);background:var(--surface-soft)}
/* A ROW WITH NO PHOTO SHOWS NOTHING, not a filled box. Owner, 2026-08-12: "it's very disappointing
   to see blank image or broken images where an actual image would go." A tinted, bordered rectangle
   in a column of real photographs reads as a picture that failed to load — the dealer cannot tell
   "this lot published no photo" from "AutoSteward could not fetch it", and one of those is our
   fault. The cell keeps its width so the column below it still lines up; it simply holds nothing. */
.mi-thumb-empty{background:none;border:0}
/* Days listed. Over 60 is not a slow advert, it is a price the market has refused — so it is
   marked, and the note under the table says what to do about it. */
.mi-dom{font-variant-numeric:tabular-nums}
.mi-dom.stale{padding:1px 7px;border-radius:var(--r-stadium);font-weight:700;
  color:var(--pui-risk,#b4341f);background:color-mix(in srgb,var(--red) 14%,transparent)}
.mi-flag{display:inline-block;padding:1px 7px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.mi-flag+.mi-flag{margin-left:4px}
.mi-flag.ok{color:var(--pui-ok,#1c7a4a);background:var(--greensoft)}
.mi-flag.risk{color:var(--pui-risk,#b4341f);background:var(--redsoft)}
.mi-flag-none{color:var(--muted)}
.mi-table-note{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);max-width:78ch}
/* Screen-reader-only, for the photo column's header — a bare <th> reads as an unlabelled column. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:720px){
  .mi-head{flex-direction:column}.mi-confidence{max-width:none}
  /* The photo is the first thing to go when there is no room for it; the numbers are the point. */
  .mi-thumb-col{display:none}
}

/* The pre-bid read (web/auction-intel.js). Every colour comes from a token so it follows the
   chosen design and stays legible in dark mode; the verdict tint is the only thing that varies. */
.auction-intel{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.auction-intel-good{border-left:3px solid var(--pui-ok,#1c7a4a)}
.auction-intel-caution{border-left:3px solid var(--pui-risk,#b4341f)}
.auction-intel-watch,.auction-intel-unknown{border-left:3px solid var(--muted)}
.auction-intel-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.auction-intel-head strong{font-size:var(--fs-body)}
.auction-intel-head span{font-size:var(--fs-small);color:var(--muted)}
.auction-intel-rows{display:grid;gap:8px}
.auction-intel-row{display:grid;grid-template-columns:minmax(120px,auto) auto 1fr;gap:8px;align-items:baseline;font-size:var(--fs-body)}
.auction-intel-label{color:var(--muted)}
.auction-intel-value{font-variant-numeric:tabular-nums}
.auction-intel-row.good .auction-intel-value{color:var(--pui-ok,#1c7a4a)}
.auction-intel-row.caution .auction-intel-value{color:var(--pui-risk,#b4341f)}
.auction-intel-detail{color:var(--muted);font-size:var(--fs-small)}
/* Which auction THIS car is in — the first question a buyer asks, so it sits above the read
   rather than among the "others like it" links. */
.auction-intel-lot{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;font-size:var(--fs-body)}
.auction-intel-lot-label{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.auction-intel-lot a{color:var(--blue);font-weight:600;text-decoration:underline}
.auction-intel-lot-note{flex-basis:100%;font-size:var(--fs-small);color:var(--muted)}
.auction-intel-running{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:var(--fs-small)}
.auction-intel-running span:first-child{color:var(--muted)}
.auction-intel-running a{color:var(--blue);text-decoration:underline}
.auction-intel-foot{margin:10px 0 0;font-size:var(--fs-small);color:var(--muted)}
/* Stacks on narrow screens so the detail sentence never squeezes the number to one character. */
@media (max-width:720px){.auction-intel-row{grid-template-columns:1fr auto;row-gap:2px}
  .auction-intel-detail{grid-column:1/-1}}

/* The cost sheet. */
.auction-costs{padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.auction-costs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.auction-costs-head h3{margin:0;font-size:var(--fs-lead);color:var(--ink)}
.auction-costs-head p{margin:.3rem 0 0;font-size:var(--fs-small);color:var(--muted);max-width:60ch;line-height:var(--lh-small)}
.auction-total{text-align:right;white-space:nowrap}
.auction-total span{display:block;font-size:var(--fs-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.auction-total strong{font-size:var(--fs-h2);color:var(--ink);font-variant-numeric:tabular-nums;line-height:var(--lh-h2)}
.auction-fee-note{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-surface);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.auction-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:12px}
.auction-review-field{display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);align-items:center;gap:8px 12px;padding:10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.auction-review-field span{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.auction-review-field input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);font-variant-numeric:tabular-nums;text-align:right}
.auction-review-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.auction-date-field select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body)}
.auction-date-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.auction-review-field small{grid-column:1/-1;color:var(--muted);font-size:var(--fs-small)}
.auction-review-field small strong{color:var(--ink)}
.auction-fee-note{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-surface);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.auction-cost-table td{padding:6px 8px;vertical-align:middle}
.auction-cost-table tr.cost-basis td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.auction-cost-table input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body)}
.auction-cost-table input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.auction-amt{display:flex;align-items:center;gap:6px;width:210px}
.auction-cur{color:var(--muted);font-size:var(--fs-body)}
.auction-amt input{text-align:right;font-variant-numeric:tabular-nums}
.auction-file-as{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--muted);letter-spacing:.01em}
.auction-file-as strong{color:var(--ink);font-weight:700}
.auction-src{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--muted);letter-spacing:.02em}
.auction-cost-del{flex:0 0 auto;color:var(--muted);font-size:var(--fs-body);line-height:1}
.auction-cost-del:hover{color:var(--pui-risk,#9a2617)}
.auction-costs-actions{margin-top:10px}
.auction-stop,.auction-caution{margin-top:12px;padding:10px 14px;border-radius:var(--r-surface);font-size:var(--fs-body);line-height:var(--lh-body)}
.auction-stop{border:1px solid color-mix(in srgb,var(--pui-risk,#9a2617) 34%,var(--line));background:color-mix(in srgb,var(--pui-risk,#9a2617) 7%,var(--surface));color:var(--ink)}
.auction-caution{border:1px solid var(--line);background:var(--surface-soft);color:var(--muted)}
.auction-stop[hidden],.auction-caution[hidden]{display:none}
.auction-stop p,.auction-caution p{margin:0}
.auction-stop p+p,.auction-caution p+p{margin-top:6px}
@media (max-width:720px){
 .auction-review-grid{grid-template-columns:1fr}
 .auction-review-field{grid-template-columns:1fr}
}
.auction-save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.auction-save-note{font-size:var(--fs-small);color:var(--muted)}
.field-help.warning-text{color:var(--pui-risk,#9a2617);font-weight:600}

.auction-photo-stage{margin:0;padding:12px 14px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-surface);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.auction-photo-stage>div{min-width:220px;flex:1}

@media (max-width:720px){
 .auction-picker{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
 .auction-amt{width:150px}
 .auction-costs-head{flex-direction:column}
 .auction-total{text-align:left}
}
.panel,.info-card,.kpi-card,.editor-section,.vendor-editor-card,.security-gate-card,.warning-detail-card,.branding-background-card,.alignment-field-browser,.alignment-visual-card,.alignment-selected-card,.system-overview-card,.cleanup-preview,.report-card,.file-card,.validation-item,.activity-retention-card{color:var(--ink);background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.panel-heading,.section-title,.vendor-section-title,.system-tab-heading,.tools-section-tabs,.vehicle-tabs,.dashboard-stock-controls,.alignment-field-search{color:var(--ink);background:var(--surface-soft);border-color:var(--line)}
.panel h2,.info-card h2,.editor-section h2,.section-title h2,.vehicle-editor-heading h1,.system-tab-heading h2,.branding-background-card h3,.alignment-selected-card h2{color:var(--navy)}
.panel p,.info-card p,.field-help,.table-subtext,.section-title p,.vehicle-editor-heading p:not(.eyebrow),.branding-background-card label,.system-tab-heading p{color:var(--muted)}
input,select,textarea,.vendor-form-grid input,.vendor-form-grid textarea,.alignment-field-search input,.alignment-step-select select,.alignment-advanced-grid input,.alignment-advanced-grid select,.alignment-printer-grid input{color:var(--input-ink);background:var(--input-bg);border-color:color-mix(in srgb,var(--line) 82%,#7d93a9)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)}
.data-table th{color:var(--ink);background:var(--surface-soft);border-color:var(--line)}.data-table td{color:var(--ink);background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line)}.data-table tbody tr:hover td{background:color-mix(in srgb,var(--bluesoft) 65%,var(--surface))}
.button{color:var(--ink);background:var(--surface-strong);border-color:var(--line)}.button:hover{background:var(--surface-soft)}.button.primary{color:#fff;background:#0d5fa5;border-color:#0b568f}.button.primary:hover{background:#0a4f8c}
.status{border-color:var(--line)}
.form-generation-grid{gap:14px;padding:2px}.form-generation-grid>.info-card{background:color-mix(in srgb,var(--surface) 91%,transparent);backdrop-filter:blur(8px)}.form-generation-choice{border-color:var(--line)}.form-generation-choice small{color:var(--muted)}
.branding-settings-layout{gap:14px}.branding-background-card{background:color-mix(in srgb,var(--surface) 94%,transparent)}.branding-preview{position:relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;border-color:var(--line)}.branding-preview-sign{position:absolute;transform:translate(-50%,-50%);display:grid;gap:2px;width:38%;max-width:calc(100% - 16px);padding:4px;overflow-wrap:anywhere;text-align:center;text-transform:uppercase;text-shadow:0 1px 3px #000;pointer-events:none}.branding-preview-sign strong{font-size:var(--fs-micro);line-height:1}.branding-preview-sign small{font-size:var(--fs-micro);font-weight:700}.branding-background-card label>span,.branding-company-grid label>span{float:right;color:var(--blue);font-variant-numeric:tabular-nums}
.security-gate{position:relative;min-height:100vh}.login-brand-sign{z-index:2}.security-gate-card{z-index:3;background:color-mix(in srgb,var(--surface-strong) 96%,transparent)}
body.security-locked .dms-sidebar,body.security-locked .desktop-app-header,body.security-locked .footer{display:none}body.security-locked #app{margin:0;min-height:100vh}
body.startup-blocked .dms-sidebar,body.startup-blocked .desktop-app-header,body.startup-blocked .footer{display:none}body.startup-blocked #app{margin:0}
/* Printed documents and alignment geometry are intentionally theme-invariant. */
.alignment-page,.alignment-page.data-only,.alignment-page>img,.pdf-page,.print-preview{background:#fff!important;color:#101820!important}.alignment-page-viewport{background:#d8e1e8!important}.alignment-overlay{color:#101820!important}
@media(max-width:1100px){.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{padding-left:16px;padding-right:16px}}
@media(max-width:860px){
 .dms-sidebar{transform:translateX(-102%);transition:transform .2s}.desktop-app-header,#app,.footer{margin-left:0}.menu-btn{display:inline-flex}.breadcrumb-bar{font-size:var(--fs-micro)}.header-help-button span{display:none}
 body.sidebar-open .dms-sidebar{transform:translateX(0);box-shadow:var(--shadow-raised)}body.sidebar-open:after{content:"";position:fixed;z-index:75;inset:0;background:rgba(3,15,28,.45)}
 .account-button-copy{display:none}.account-menu-button{border-left:0}.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{padding:16px 12px 30px}
}
@media(max-width:540px){.desktop-app-header{padding:0 10px}.breadcrumb-bar a:not(:last-of-type),.breadcrumb-bar b:not(:last-of-type){display:none}.account-dropdown-panel{right:-4px}.sidebar-release{margin-bottom:8px}}
@media print{.dms-sidebar,.desktop-app-header,.footer{display:none!important}#app{margin:0!important}.page-shell{padding:0!important;background:#fff!important;color:#000!important}}
.alignment-printer-grid .alignment-printer-name{grid-column:1/-1}

/* v0.23.10 - acceptance corrections: complete text scaling, dark surfaces, dashboard balance, and alignment diagnostics */
html[data-font-scale="small"]{font-size:15px}
html[data-font-scale="standard"]{font-size:16px}
html[data-font-scale="large"]{font-size:17px}
html[data-font-scale="extra-large"]{font-size:18px}
body{font-size:var(--fs-lead)}
.sidebar-nav-group h2{font-size:var(--fs-small)}
.sidebar-link{font-size:var(--fs-small);line-height:var(--lh-small)}
.sidebar-brand strong{font-size:var(--fs-lead)}.sidebar-brand small{font-size:var(--fs-small)}.sidebar-release strong{font-size:var(--fs-small)}.sidebar-release span{font-size:var(--fs-small)}
.breadcrumb-bar,.header-help-button{font-size:var(--fs-small)}.account-button-copy strong{font-size:var(--fs-small)}.account-button-copy small{font-size:var(--fs-small)}
.account-menu-role strong{font-size:var(--fs-small)}.account-menu-role span,.account-theme-control{font-size:var(--fs-small)}.account-theme-control select{min-height:38px;font-size:var(--fs-small)}
.data-table{font-size:var(--fs-body)}.data-table th{font-size:var(--fs-small);line-height:var(--lh-small)}.data-table td{line-height:calc(var(--ui-table) + 7px)}
.button,.desktop-action-button,.link-btn{font-size:var(--fs-small)}.field-help,.panel-footnote,.table-subtext,.inline-warning{font-size:var(--fs-small)}
label,.deal-field>span,.vendor-form-grid label,.editor-grid label{font-size:var(--fs-small)}
input,select,textarea,.vendor-form-grid input,.vendor-form-grid textarea{min-height:38px;font-size:var(--fs-body)}
textarea{line-height:calc(var(--ui-table) + 7px)}
.display-default-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px}.display-default-grid label{display:grid;gap:8px;font-weight:700}
.account-dropdown-panel{min-width:260px}.account-theme-control{margin:8px 6px}.account-theme-control select{width:100%}

/* Dashboard must remain usable at 100% Windows scaling and high-resolution displays. */
.parity-dashboard{padding-top:14px}.compact-dashboard-heading{margin-bottom:10px}.compact-dashboard-heading h1{font-size:var(--fs-h2)}.compact-dashboard-heading p:not(.eyebrow){font-size:var(--fs-body)}
.parity-kpi-card{min-height:108px}.parity-kpi-card .kpi-copy strong{font-size:var(--fs-body)}.parity-kpi-card .kpi-copy small{font-size:var(--fs-small)}
.parity-dashboard-grid{grid-template-columns:minmax(620px,1.55fr) minmax(390px,1fr);align-items:start}
.parity-panel{min-width:0}.desktop-panel-heading{min-height:54px}.desktop-panel-heading h2{font-size:var(--fs-lead)}.warning-count-copy,.panel-heading-note,.selected-stock-warning-count{font-size:var(--fs-small)}
.parity-table-wrap{min-height:0;max-height:390px;overflow:auto}.attention-table{table-layout:fixed}.attention-col-severity{width:86px}.attention-col-stock{width:105px}.attention-col-area{width:105px}.attention-col-action{width:160px}
.parity-table{font-size:var(--fs-small)}.parity-table th{font-size:var(--fs-small)}.desktop-action-button{font-size:var(--fs-small)}
.dashboard-stock-controls{padding:10px}.dashboard-stock-select-label,.dashboard-stock-search-row label,.selected-stock{font-size:var(--fs-small)}.selected-stock>span{font-size:var(--fs-small)}.selected-stock small{font-size:var(--fs-small)}
.parity-readiness-row span:nth-child(2){font-size:var(--fs-small)}.parity-readiness-row small{font-size:var(--fs-small)}.activity-table-wrap{max-height:330px}.parity-quick-card strong{font-size:var(--fs-body)}
.dashboard-footer{font-size:var(--fs-small)}
@media(min-width:1800px){.parity-dashboard-grid{grid-template-columns:minmax(760px,1.65fr) minmax(440px,1fr)}.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{padding-left:30px;padding-right:30px}.parity-table-wrap{max-height:420px}}
@media(max-width:1250px){.parity-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"attention" "readiness" "activity" "quick"}.parity-table-wrap{max-height:360px}}
@media(max-width:720px){.display-default-grid{grid-template-columns:1fr}.parity-table-wrap{max-height:none}.attention-table{min-width:760px}}

/* Complete dark-mode contract. Printed documents and alignment paper remain white below. */
html[data-theme="dark"] .desktop-panel-heading,
html[data-theme="dark"] .dashboard-stock-controls,
html[data-theme="dark"] .selected-stock,
html[data-theme="dark"] .parity-quick-card,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .sticky-editor-actions,
html[data-theme="dark"] .vehicle-tabs,
html[data-theme="dark"] .system-history,
html[data-theme="dark"] .system-history summary,
html[data-theme="dark"] .update-notes,
html[data-theme="dark"] .update-notes pre,
html[data-theme="dark"] .update-notes details,
html[data-theme="dark"] .editor-notice,
html[data-theme="dark"] .dashboard-stock-results,
html[data-theme="dark"] .form-generation-choice,
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .customer-section,
html[data-theme="dark"] .vendor-section,
html[data-theme="dark"] .activity-retention-card,
html[data-theme="dark"] .alignment-preview-toolbar,
html[data-theme="dark"] .alignment-field-browser,
html[data-theme="dark"] .alignment-selected-card,
html[data-theme="dark"] .alignment-sequence-group,
html[data-theme="dark"] .alignment-printer-card,
html[data-theme="dark"] .help-search-box,
html[data-theme="dark"] .help-category-section,
html[data-theme="dark"] .help-article,
html[data-theme="dark"] .security-archive-summary,
html[data-theme="dark"] .security-signin-toggle{
 color:var(--ink);background:var(--surface);border-color:var(--line)
}
html[data-theme="dark"] .parity-quick-card:hover,
html[data-theme="dark"] .form-generation-choice:hover,
html[data-theme="dark"] .help-article[open] summary{background:var(--surface-soft)}
html[data-theme="dark"] .parity-kpi-card .kpi-copy strong,
html[data-theme="dark"] .parity-quick-card strong,
html[data-theme="dark"] .selected-stock,
html[data-theme="dark"] .selected-stock>span,
html[data-theme="dark"] .help-article summary strong,
html[data-theme="dark"] .help-hero h2,
html[data-theme="dark"] .help-no-results h2,
html[data-theme="dark"] .account-menu-role,
html[data-theme="dark"] .security-archive-summary dd{color:var(--ink)}
html[data-theme="dark"] .selected-stock>span,
html[data-theme="dark"] .security-signin-toggle,
html[data-theme="dark"] .security-archive-summary{border-color:var(--line)}
html[data-theme="dark"] .data-table th{color:var(--ink);background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] .data-table td{color:var(--ink);background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .data-table tbody tr:hover td,
html[data-theme="dark"] .data-table tbody tr.selected td{background:color-mix(in srgb,var(--blue) 24%,var(--surface))}
/* control colour lives in controls.css (polarity-derived, appearance-agnostic) */
html[data-theme="dark"] .alignment-nudge-pad button{background:var(--ctl-face);color:var(--ctl-ink);border-color:var(--ctl-edge)}
/* control colour moved to controls.css (single polarity-derived authority) */

html[data-theme="dark"] .footer{color:var(--muted);background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] .help-hero{background:linear-gradient(135deg,var(--surface),var(--surface-soft));border-color:var(--line)}
html[data-theme="dark"] .help-category-card{color:var(--ink);background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] .help-category-card small{color:var(--muted)}
html[data-theme="dark"] .help-category-card.active{color:#fff;background:#1768b2;border-color:#2d82d0}
html[data-theme="dark"] .help-category-card.active small{color:#e2effb}
html[data-theme="dark"] .security-confirmation-box{background:color-mix(in srgb,#7c4a00 28%,var(--surface));border-color:#956b2c}
html[data-theme="dark"] .security-confirmation-box code{color:#ffd7bf;background:var(--surface-strong)}

/* PDF paper is intentionally theme-invariant; failure must be explicit rather than a blank white page. */
.alignment-page{position:relative;background:#fff!important;color:#101820!important}
.alignment-page.background-load-failed:before{content:"Form background could not be loaded. Refresh the page; if this remains, stop and report the template and page number.";position:absolute;z-index:20;inset:18px 18px auto;padding:12px 14px;color:#7a1e16;background:#fff1ee;border:2px solid #c84135;border-radius:var(--r-control);font-weight:700;font-size:14px;line-height:20px;font-family:var(--font-ui,'Segoe UI',sans-serif);text-align:center;box-shadow:var(--shadow-raised)}
.alignment-preview-toolbar{font-size:var(--fs-small)}.alignment-field-browser,.alignment-selected-card,.alignment-field-search,.alignment-sequence-group{font-size:var(--fs-small)}.alignment-field-item{font-size:var(--fs-small)}.alignment-page-viewport{min-height:620px}

/* v0.23.13 checkpoint 2 - authoritative dark-mode surface and contrast contract */
html[data-theme="dark"]{
 --surface:#172a3e;--surface-strong:#1d3349;--surface-soft:#102438;--canvas:#091827;
 --ink:#f2f7fc;--muted:#b6c5d4;--line:#476079;--input-bg:#0b1f32;--input-ink:#f7fbff;
 --header-bg:#11273b;--navy:#f1f7fd;--navy2:#c7def3;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app{color:var(--ink)}
html[data-theme="dark"] :is(
 .panel,.info-card,.kpi-card,.editor-section,.vendor-editor-card,.vendor-history-panel,
 .security-gate-card,.security-create-user,.security-test-card,.warning-detail-card,
 .branding-background-card,.branding-company-card,.alignment-field-browser,.alignment-visual-card,
 .alignment-selected-card,.system-overview-card,.system-health-card,.cleanup-preview,.report-card,
 .file-card,.validation-item,.activity-retention-card,.financial-summary-card,.financial-list-panel,
 .financial-filter-panel,.financial-formula-card,.customer-section,.deal-card,.form-generation-choice,
 .form-generation-grid>.info-card,.backup-card,.restore-card,.maintenance-card,.diagnostic-card
 ){background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(
 .vehicle-filter-panel,.vehicle-action-bar,.selection-strip,.vehicle-tabs,.tools-section-tabs,
 .system-tools-tabs,.system-tools-sticky-row,.system-tab-heading,.section-title,.panel-heading,
 .vendor-section-title,.vendor-search-bar,.toolbar,.sticky-editor-actions,.dashboard-stock-controls,
 .alignment-preview-toolbar,.alignment-field-search,.update-notes,.system-history,
 .system-history summary,.financial-list-heading,.financial-detail-status,.security-archive-summary,
 .help-search-panel,.help-search-box,.help-category-section,.help-article summary,.editor-notice,
 .sale-workflow-strip,.deal-workflow-strip,.workflow-foundation-strip,.table-toolbar
 ){background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(
 .data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table
 ){color:var(--ink)!important;background:var(--surface)!important}
html[data-theme="dark"] :is(
 .data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table
 ) th{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(
 .data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table
 ) td{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(
 .data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table
 ) tbody tr:hover td{background:color-mix(in srgb,var(--blue) 22%,var(--surface))!important}
html[data-theme="dark"] :is(
 .data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table
 ) tr.selected td{background:color-mix(in srgb,var(--blue) 30%,var(--surface))!important}
html[data-theme="dark"] :is(
 input,select,textarea,.search,.vendor-form-grid input,.vendor-form-grid textarea,
 .vehicle-filter-panel input,.vehicle-filter-panel select,.deal-field input,.deal-field select,
 .deal-field textarea,.vehicle-field input,.vehicle-field select,.vehicle-field textarea,
 .editor-grid input,.editor-grid select,.editor-grid textarea,.alignment-field-search input,
 .alignment-step-select select,.alignment-advanced-grid input,.alignment-advanced-grid select,
 .alignment-printer-grid input
 ){background:var(--input-bg)!important;color:var(--input-ink)!important;border-color:var(--line)!important;color-scheme:dark}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#91a7bb!important;opacity:1}
html[data-theme="dark"] input[type="file"]{background:var(--input-bg)!important;color:var(--input-ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] input[type="file"]::file-selector-button{background:var(--surface-strong)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
html[data-theme="dark"] :is(input,textarea,select):-webkit-autofill,
html[data-theme="dark"] :is(input,textarea,select):-webkit-autofill:hover,
html[data-theme="dark"] :is(input,textarea,select):-webkit-autofill:focus{-webkit-text-fill-color:var(--input-ink)!important;box-shadow:0 0 0 1000px var(--input-bg) inset!important;caret-color:var(--input-ink)!important}
html[data-theme="dark"] :is(
 label,legend,.vehicle-field>span,.deal-field>span,.vendor-form-grid label,.vendor-form-grid label>span,
 .editor-grid label,.editor-grid label>span,.financial-filter-grid label span,.diagnostic-list strong,
 .detail-list dt,.security-create-user label,.branding-settings-layout label,.form-field-label
 ){color:var(--ink)!important}
html[data-theme="dark"] :is(
 .field-help,.panel-footnote,.table-subtext,.inline-warning,.section-title p,.panel p,
 .info-card p,.vendor-history-panel p,.financial-list-heading p,.financial-summary-card small,
 .diagnostic-list span,.security-create-user p,.system-tab-heading p,.branding-settings-layout p
){color:var(--muted)!important}
/* Financial totals must remain readable in the dark theme. Color is reserved for a genuine loss,
   * not used to hide the ordinary revenue and cost figures. */
html[data-theme="dark"] .financial-summary-card strong{color:var(--ink)!important}
html[data-theme="dark"] .financial-summary-card.loss strong{color:#ff9aa2!important}
html[data-theme="dark"] .financial-summary-card span{color:var(--muted)!important}
html[data-theme="dark"] :is(.quick-card,.parity-quick-card){background:var(--surface-strong)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(.quick-card,.parity-quick-card):hover{background:color-mix(in srgb,var(--blue) 18%,var(--surface-strong))!important}
/* control colour moved to controls.css (single polarity-derived authority) */

html[data-theme="dark"] :is(.panel-footnote,.dashboard-footer,.selection-strip,.vehicle-action-bar){background:var(--surface-soft)!important;color:var(--muted)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(.form-validation-errors,.validation-errors){background:#40242b!important;color:#ffd9dd!important;border-color:#c4646d!important}
html[data-theme="dark"] :is(.form-validation-errors,.validation-errors) :is(p,li,strong){color:#ffd9dd!important}
html[data-theme="dark"] :is(.security-create-user,.security-test-card,.security-production-lock-card){background:var(--surface)!important;color:var(--ink)!important}
html[data-theme="dark"] :is(.security-create-user,.security-test-card,.security-production-lock-card) :is(h2,h3,strong,label,p,small){color:inherit!important}
html[data-theme="dark"] .update-notes{background:var(--input-bg)!important;color:var(--input-ink)!important;white-space:pre-wrap}
html[data-theme="dark"] .account-dropdown-panel{background:var(--surface-strong)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .account-menu-role{background:var(--surface-soft)!important;color:var(--ink)!important}
html[data-theme="dark"] .account-theme-control{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .status:not(.available):not(.sold):not(.suspended){color:#d8ebff!important;background:#174364!important}
/* Paper-like output remains white because it represents the actual print surface. */
html[data-theme="dark"] :is(.formal-report-sheet,.report-output,.alignment-page,.alignment-page.data-only,.pdf-page,.print-preview){background:#fff!important;color:#101820!important;color-scheme:light}
html[data-theme="dark"] :is(.formal-report-sheet,.report-output,.alignment-page,.alignment-page.data-only,.pdf-page,.print-preview) *{color:inherit}

/* v0.23.13 checkpoint 3 - explicit application-wide text and control scale contract */
html[data-font-scale="small"]{--ui-root:15px;--ui-body:14px;--ui-copy:13px;--ui-table:13px;--ui-nav:13px;--ui-label:13px;--ui-button:13px;--control-height:34px;--sidebar-width:232px;--page-gap:16px}html[data-font-scale="small"]{--fs-micro:11px;--fs-small:12px;--fs-body:13px;--fs-lead:15px;--fs-h3:17px;--fs-h2:20px;--fs-h1:24px;--fs-display:30px;--lh-micro:16px;--lh-small:18px;--lh-body:20px;--lh-lead:22px;--lh-h3:24px;--lh-h2:26px;--lh-h1:30px;--lh-display:34px}
html[data-font-scale="standard"]{--ui-root:16px;--ui-body:15px;--ui-copy:14px;--ui-table:14px;--ui-nav:14px;--ui-label:14px;--ui-button:14px;--control-height:38px;--sidebar-width:244px;--page-gap:18px}html[data-font-scale="standard"]{--fs-micro:12px;--fs-small:13px;--fs-body:14px;--fs-lead:16px;--fs-h3:18px;--fs-h2:22px;--fs-h1:26px;--fs-display:32px;--lh-micro:16px;--lh-small:20px;--lh-body:20px;--lh-lead:24px;--lh-h3:26px;--lh-h2:28px;--lh-h1:32px;--lh-display:36px}
html[data-font-scale="large"]{--ui-root:17px;--ui-body:17px;--ui-copy:16px;--ui-table:16px;--ui-nav:16px;--ui-label:16px;--ui-button:16px;--control-height:44px;--sidebar-width:286px;--page-gap:22px}html[data-font-scale="large"]{--fs-micro:13px;--fs-small:14px;--fs-body:16px;--fs-lead:18px;--fs-h3:20px;--fs-h2:24px;--fs-h1:28px;--fs-display:36px;--lh-micro:18px;--lh-small:20px;--lh-body:24px;--lh-lead:26px;--lh-h3:28px;--lh-h2:32px;--lh-h1:36px;--lh-display:40px}
html[data-font-scale="extra-large"]{--ui-root:18px;--ui-body:20px;--ui-copy:18px;--ui-table:18px;--ui-nav:18px;--ui-label:18px;--ui-button:18px;--control-height:50px;--sidebar-width:332px;--page-gap:26px}html[data-font-scale="extra-large"]{--fs-micro:14px;--fs-small:16px;--fs-body:18px;--fs-lead:20px;--fs-h3:22px;--fs-h2:26px;--fs-h1:32px;--fs-display:40px;--lh-micro:20px;--lh-small:24px;--lh-body:26px;--lh-lead:28px;--lh-h3:30px;--lh-h2:36px;--lh-h1:40px;--lh-display:44px}
html[data-font-scale]{font-size:var(--ui-root)}
/* BODY LEADING IS A WHOLE-PIXEL STEP, NOT A RATIO — and it is the "no room to breathe" fix.
 *
 * This was line-height:1.5, and 1.5 multiplied against --ui-body lands on a fraction at most
 * settings: 15px gives 22.5px, 13px gives 19.5px. Measured across twelve screens, 1,740 of 1,941
 * rendered elements had a fractional line box. Nothing shares a baseline in that state, and the
 * cumulative effect is text that reads as cramped even where the spacing around it is correct —
 * the same class of problem the render system already fixed for font-SIZES and left unfinished for
 * line-heights.
 *
 * The obvious repair, line-height:var(--lh-body), is wrong here and was tried first: those tokens
 * are tuned to --fs-body, while <body> sizes from --ui-body, which is a different and usually
 * larger number. At standard that pairs 15px text with a 20px --lh-body — 1.33, TIGHTER than the
 * 1.5 being replaced.
 *
 * Adding a fixed step keeps the arithmetic whole at every setting because --ui-body is always a
 * whole pixel, and it gives more air exactly where it was missing:
 *
 *     13px -> 21px (1.62)   15px -> 23px (1.53)   18px -> 26px (1.44)   20px -> 28px (1.40)
 *
 * The ratio easing off as the type grows is correct, not a compromise: large text needs
 * proportionally less leading than small text, which is why a single ratio never suits both. */
html[data-font-scale] body{font-size:var(--ui-body);line-height:calc(var(--ui-body) + 8px)}
html[data-font-scale] .dms-sidebar{width:var(--sidebar-width);flex:0 0 var(--sidebar-width)}
html[data-font-scale] :is(.desktop-app-header,#app,.footer){margin-left:var(--sidebar-width)}
html[data-font-scale] .sidebar-brand{min-height:calc(var(--control-height) + 28px);padding:12px 16px}
html[data-font-scale] .sidebar-brand strong{font-size:calc(var(--ui-nav) + 2px)}
html[data-font-scale] .sidebar-brand small{font-size:max(12px,calc(var(--ui-nav) - 3px))}
/* The sidebar and every control below used to carry a literal line-height:1.2. Measured on the
 * running app, that put 1,736 of 5,241 text elements on a FRACTIONAL line box — a 16px nav label
 * got 19.2px, a 13px group heading 15.6px, a 28px page title 33.6px. Every baseline in those
 * blocks then lands on a half pixel, which is what reads as smeared and cramped.
 *
 * These derive from the same --ui-* step instead, so the line box is a whole number of pixels at
 * all four text-size settings (13/14/16/18 + 4 = 17/18/20/22). The +2px variant is for the group
 * heading, whose font-size is the nav step minus three. */
/* Headings need a line box of their own.
 *
 * A line-height written as a LENGTH inherits as that length, so a heading sitting inside a panel
 * whose body copy leads at 24px inherited a 24px line box — and at 24px type that is a ratio of
 * exactly 1.0, with descenders touching the line below whenever the heading wrapped. Measured on
 * Users & Security, Roles & Permissions and Help.
 *
 * calc(1em + 6px) reads 1em against the heading's OWN font-size, so it is a whole pixel wherever
 * the size is (every step in the scale is), and it gives the right curve for free: 1.25 at 24px,
 * 1.43 at 14px — tighter as the type gets larger, which is what headings want. Specificity is
 * (0,1,2), so every named heading rule still wins. */
html[data-font-scale] :is(h1,h2,h3,h4,h5,h6){line-height:calc(1em + 6px)}
html[data-font-scale] .sidebar-nav-group h2{font-size:max(12px,calc(var(--ui-nav) - 3px));line-height:calc(var(--ui-nav) + 2px)}
/* +7 rather than +4 because long entries ("Form Generation Center") wrap to two lines once the
 * text size is turned up, and +4 left those two lines at 1.22 — measured at the extra-large
 * setting. Single-line links are unaffected: their height comes from --control-height. */
html[data-font-scale] .sidebar-link{min-height:var(--control-height);padding:8px 12px;font-size:var(--ui-nav);line-height:calc(var(--ui-nav) + 7px)}
html[data-font-scale] .sidebar-link-icon{width:24px;height:24px;font-size:var(--ui-nav)}
html[data-font-scale] .sidebar-release strong{font-size:var(--ui-copy)}
html[data-font-scale] .sidebar-release span{font-size:max(12px,calc(var(--ui-copy) - 2px))}
html[data-font-scale] .desktop-app-header{min-height:calc(var(--control-height) + 16px);padding-inline:var(--page-gap)}
html[data-font-scale] .breadcrumb-bar,
html[data-font-scale] .header-help-button,
html[data-font-scale] .account-button-copy strong{font-size:var(--ui-copy)}
html[data-font-scale] .account-button-copy small{font-size:max(12px,calc(var(--ui-copy) - 2px))}
html[data-font-scale] .account-menu-button{min-height:var(--control-height)}
html[data-font-scale] .account-dropdown-panel{min-width:max(300px,calc(var(--sidebar-width) - 12px))}
html[data-font-scale] .account-theme-control{font-size:var(--ui-label)}
html[data-font-scale] .page-shell,
html[data-font-scale] .parity-dashboard,
html[data-font-scale] .vehicle-editor-shell,
html[data-font-scale] .tools-page-shell{padding-left:var(--page-gap);padding-right:var(--page-gap)}
html[data-font-scale] :is(.page-heading h1,.dashboard-heading h1,.vehicle-editor-heading h1){font-size:var(--fs-h1);line-height:var(--lh-h1)}
html[data-font-scale] :is(.page-heading p,.dashboard-heading p,.system-tab-heading p,.section-title p,.panel p,.info-card p){font-size:var(--ui-copy)}
/* +4, not +2. A panel heading two pixels larger than the sentence under it is not a heading. */
html[data-font-scale] :is(.panel-heading h2,.section-title h2,.system-tab-heading h2,.info-card h2,.editor-section h2){font-size:calc(var(--ui-body) + 4px)}
html[data-font-scale] :is(.button,.desktop-action-button,.link-btn,.quick-card,.system-tools-tabs button,.vehicle-tabs button,.tools-section-tabs button){min-height:var(--control-height);font-size:var(--ui-button);line-height:calc(var(--ui-button) + 4px)}
html[data-font-scale] :is(input,select,textarea,.search){min-height:var(--control-height);font-size:var(--ui-body);line-height:calc(var(--ui-table) + 7px);padding:8px 12px}
html[data-font-scale] textarea{min-height:calc(var(--control-height) * 1.7)}
html[data-font-scale] :is(label,legend,.vehicle-field>span,.deal-field>span,.vendor-form-grid label,.vendor-form-grid label>span,.editor-grid label,.editor-grid label>span,.financial-filter-grid label span,.form-field-label){font-size:var(--ui-label)!important;line-height:calc(var(--ui-table) + 7px)}
html[data-font-scale] :is(.field-help,.panel-footnote,.table-subtext,.inline-warning,.warning-count-copy,.selected-stock-warning-count){font-size:var(--ui-copy)!important;line-height:calc(var(--ui-table) + 7px)}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table){font-size:var(--ui-table)!important}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table) th{font-size:max(13px,calc(var(--ui-table) - 1px))!important;padding:12px 12px;line-height:calc(var(--ui-table) + 4px)}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table) td{font-size:var(--ui-table)!important;padding:12px;line-height:calc(var(--ui-table) + 7px)}
html[data-font-scale] .status{font-size:max(13px,calc(var(--ui-copy) - 1px));line-height:calc(var(--ui-copy) + 4px)}
html[data-font-scale] :is(.alignment-preview-toolbar,.alignment-field-browser,.alignment-selected-card,.alignment-field-search,.alignment-sequence-group,.alignment-controls-card){font-size:var(--ui-copy)!important}
html[data-font-scale] .alignment-field-item{font-size:var(--ui-copy)!important;min-height:var(--control-height)}
html[data-font-scale] .alignment-selected-card :is(button,select,input){font-size:var(--ui-button);min-height:var(--control-height)}
html[data-font-scale] .display-effective-status{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:8px 18px;margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft);font-size:var(--ui-copy)}
html[data-font-scale] .display-effective-status strong{grid-column:1/-1;color:var(--ink);font-size:var(--ui-body)}
html[data-font-scale] .display-effective-status span{color:var(--muted)}
@media(max-width:1180px){
 html[data-font-scale] .dms-sidebar{width:min(88vw,var(--sidebar-width));transform:translateX(-102%);transition:transform .2s}
 html[data-font-scale] :is(.desktop-app-header,#app,.footer){margin-left:0}
 html[data-font-scale] .menu-btn{display:inline-flex}
 html[data-font-scale] body.sidebar-open .dms-sidebar{transform:translateX(0)}
 html[data-font-scale] .display-effective-status{grid-template-columns:1fr}
 html[data-font-scale] .display-effective-status strong{grid-column:auto}
}

/* v0.23.13 checkpoint 4 - dashboard row parity, anchored content, and responsive organization */
.parity-dashboard-grid{display:grid;grid-template-areas:"attention readiness" "activity quick";grid-template-columns:minmax(720px,1.62fr) minmax(440px,.95fr);grid-template-rows:minmax(420px,auto) minmax(340px,auto);align-items:stretch;gap:14px}
.parity-panel{display:flex;align-self:stretch;height:100%;min-width:0;min-height:0;flex-direction:column;background:color-mix(in srgb,var(--surface) 96%,transparent)}
.parity-panel>.panel-heading{flex:0 0 auto}
.attention-panel .parity-table-wrap{display:flex;flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
.attention-panel .parity-table-wrap>.attention-table{align-self:flex-start}
.attention-panel .panel-footnote{flex:0 0 auto;margin-top:auto}
.readiness-panel .dashboard-stock-controls{flex:0 0 auto}
.readiness-panel .selected-stock{flex:0 0 auto}
.readiness-panel .parity-readiness-list{display:grid;flex:1 1 auto;grid-auto-rows:minmax(var(--control-height),1fr);align-content:stretch;padding-bottom:12px}
.readiness-panel .parity-readiness-row{min-height:var(--control-height)}
.activity-panel .activity-table-wrap{flex:1 1 auto;max-height:none;min-height:0;overflow:auto}
.activity-panel .recent-activity-table{height:auto}
.quick-panel .parity-quick-grid{display:grid;flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);align-content:stretch;gap:10px;padding:14px}
.quick-panel .parity-quick-card{min-height:88px;height:100%;grid-template-columns:minmax(42px,auto) minmax(0,1fr);align-content:center}
.quick-panel .parity-quick-card.quick-maintenance,.quick-panel .parity-quick-card:last-child{grid-column:1/-1}
.parity-dashboard .dashboard-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft);color:var(--muted)}
.parity-dashboard .kpi-grid{align-items:stretch}.parity-dashboard .parity-kpi-card{height:100%}
@media(max-width:1500px){
 .parity-dashboard-grid{grid-template-areas:"attention" "readiness" "activity" "quick";grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
 .parity-panel{min-height:auto}
 .attention-panel .parity-table-wrap,.activity-panel .activity-table-wrap{max-height:430px}
 .quick-panel .parity-quick-grid{grid-auto-rows:minmax(84px,auto)}
}
@media(max-width:720px){.quick-panel .parity-quick-grid{grid-template-columns:1fr}.quick-panel .parity-quick-card.quick-maintenance,.quick-panel .parity-quick-card:last-child{grid-column:auto}.parity-dashboard .dashboard-footer{align-items:flex-start;flex-direction:column}}

/* v0.23.13 checkpoint 5 - built-in roadside-sign image-coordinate calibration */
.login-brand-sign[data-brand-sign-mode="built-in"],.branding-preview-sign[data-brand-sign-mode="built-in"]{transform:translate(-50%,-50%);max-width:none;box-sizing:border-box}
.login-brand-sign[data-brand-sign-mode="custom"],.branding-preview-sign[data-brand-sign-mode="custom"]{left:var(--brand-sign-x);top:var(--brand-sign-y)}
.branding-preview-sign[data-brand-sign-mode="built-in"]{padding:4px 6px}

/* v0.23.13 checkpoint 2 final - eliminate theme leakage and make display ownership explicit */
html[data-theme="dark"] :is(
 .customer-search-bar,.sales-filter-bar,.vehicle-filter-panel,.filter-title-row,.vehicle-filter-grid,
 .vehicle-action-bar,.sub-action-bar,.selection-strip,.rule-callout,.form-center-toolbar,
 .alignment-toolbar,.alignment-template-summary,.alignment-sticky-actions,.alignment-preview-card,
 .alignment-controls-card,.sales-context-strip,.deal-action-groups,.deal-action-groups>div,
 .deal-save-state,.deal-inline-tools,.pricing-action-row,.checklist-legend,.co-buyer-summary,
 .danger-zone,.report-menu-panel,.report-active-strip,.contextual-report-filters,
 .security-test-grid>section,.security-create-user,.backup-status-grid>p,.backup-storage-summary,
 .orphan-count-grid>p,.backup-folder-input-row,.retention-settings-grid,.cleanup-preview-list>div,
 .column-check-grid,.custom-column-list,.modal-card,.modal-header,.modal-note,.co-buyer-source,
 .file-storage-path,.empty-inline,.rule-grid>div,.sales-summary-grid>div,.validation-item,
 .display-effective-status,.display-personal-override-warning
 ){
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important;
 }
html[data-theme="dark"] :is(
 .filter-title-row,.section-title,.sales-context-strip,.deal-save-state,.deal-card>h3,
 .report-active-strip,.alignment-preview-toolbar,.alignment-sticky-actions,.customer-search-bar,
 .sales-filter-bar,.form-center-toolbar,.vehicle-action-bar,.sub-action-bar,.selection-strip
 ){
  background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important;
 }
html[data-theme="dark"] :is(
 .customer-search-bar,.sales-filter-bar,.vehicle-filter-panel,.form-center-toolbar,.alignment-toolbar,
 .alignment-template-summary,.sales-context-strip,.deal-action-groups,.deal-save-state,.report-menu-panel,
 .security-test-grid>section,.backup-status-grid>p,.backup-storage-summary,.orphan-count-grid>p,
 .danger-zone,.display-personal-override-warning
 ) :is(h1,h2,h3,strong,label,span,p,small,legend){color:inherit!important}
html[data-theme="dark"] :is(
 .customer-search-bar,.sales-filter-bar,.vehicle-filter-grid,.alignment-toolbar,.contextual-report-filters,
 .security-test-grid,.backup-folder-input-row,.retention-settings-grid,.deal-grid,.vendor-form-grid,
 .security-user-create-grid,.security-password-grid,.customer-editor-grid
 ) :is(input,select,textarea){background:var(--input-bg)!important;color:var(--input-ink)!important;border-color:var(--line)!important;color-scheme:dark}
html[data-theme="dark"] :is(.vehicle-tabs,.system-tools-tabs,.tools-section-tabs){background:var(--surface-soft)!important;border-color:var(--line)!important}
html[data-theme="dark"] :is(.vehicle-tabs,.system-tools-tabs,.tools-section-tabs) button:not(.active):not([aria-current="page"]){background:var(--surface-strong)!important;color:var(--ink)!important;border-color:var(--line)!important}

html[data-theme="dark"] :is(.modal-card,.warning-detail-card,.customer-editor-modal,.co-buyer-modal,.custom-report-modal) :is(h1,h2,h3,strong,label,legend){color:var(--ink)!important}
html[data-theme="dark"] :is(.modal-card,.warning-detail-card,.customer-editor-modal,.co-buyer-modal,.custom-report-modal) :is(p,small,.modal-note){color:var(--muted)!important}
html[data-theme="dark"] .icon-close{background:var(--surface-strong)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .notice{background:color-mix(in srgb,#7a5200 34%,var(--surface))!important;color:#ffe7b0!important;border-color:#a67a2f!important}
html[data-theme="dark"] .notice.success-notice{background:color-mix(in srgb,#17633e 34%,var(--surface))!important;color:#d9ffe8!important;border-color:#418b62!important}
html[data-theme="dark"] .inline-warning{background:color-mix(in srgb,#7e252d 36%,var(--surface))!important;color:#ffd9dd!important;border-color:#b95d66!important}
html[data-theme="dark"] .danger-zone{background:color-mix(in srgb,#7e252d 24%,var(--surface))!important;color:#ffd9dd!important;border-color:#a85860!important}
html[data-theme="dark"] .danger-zone strong{color:#ffb8bf!important}
html[data-theme="dark"] :is(input,select,textarea):disabled{opacity:.62!important;color:#aebdca!important}
html[data-theme="dark"] .display-personal-override-warning{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;border:1px solid #9d7934;border-left:5px solid #d59a2d;border-radius:var(--r-control)}
html[data-theme="dark"] .customer-selector-modal{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .customer-selector-toolbar label span,html[data-theme="dark"] .customer-selector-toolbar strong{color:var(--ink)!important}
html[data-theme="dark"] .customer-selector-toolbar input{background:var(--input-bg)!important;color:var(--input-ink)!important;border-color:var(--line)!important;color-scheme:dark}
html[data-theme="dark"] .customer-selector-table-wrap{background:var(--surface)!important;border-color:var(--line)!important}
html[data-theme="dark"] .customer-selector-table{color:var(--ink)!important;background:var(--surface)!important}
html[data-theme="dark"] .customer-selector-table th{background:var(--surface-strong)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important}
html[data-theme="dark"] .customer-selector-table td{border-color:var(--line)!important;background:var(--surface)!important;color:var(--ink)!important}
html[data-theme="dark"] .customer-selector-table tbody tr:hover,html[data-theme="dark"] .customer-selector-table tbody tr:focus{background:var(--surface-soft)!important}
html[data-theme="dark"] .customer-selector-table tbody tr.selected{background:color-mix(in srgb,var(--accent) 22%,var(--surface))!important;box-shadow:inset 4px 0 var(--accent)!important}
html[data-theme="dark"] .customer-selector-table tbody tr.primary-buyer{background:var(--surface-soft)!important;color:var(--muted)!important}
html[data-theme="dark"] .display-personal-override-warning{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;border:1px solid #9d7934;border-left:5px solid #d59a2d;border-radius:var(--r-surface)}
html[data-theme="dark"] .display-personal-override-warning>div{display:grid;gap:4px}
html[data-theme="dark"] .display-personal-override-warning span{color:var(--muted)!important}
.display-personal-override-warning{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;background:#fff7df;border:1px solid #e0c27d;border-left:5px solid #c58412;border-radius:var(--r-surface)}
.display-personal-override-warning>div{display:grid;gap:4px}.display-personal-override-warning span{color:var(--muted)}
@media(max-width:760px){.display-personal-override-warning{align-items:stretch;flex-direction:column}.display-personal-override-warning .button{width:100%}}

/* v0.23.13 checkpoint 3 - bounded dashboard controls and efficient page geometry */
.parity-dashboard-grid{grid-template-rows:auto auto;align-items:stretch}
.activity-panel .activity-table-wrap{flex:0 1 auto;max-height:430px;overflow:auto}
.quick-panel{justify-content:flex-start}
.quick-panel .parity-quick-grid{flex:0 0 auto;grid-auto-rows:minmax(88px,auto);align-content:start}
.quick-panel .parity-quick-card{height:auto;min-height:88px;max-height:118px}
/* white-space:normal — this button's label DOES wrap, so its leading is read as prose. */
.attention-table .desktop-action-button{width:100%;max-width:170px;min-height:var(--control-height);padding-inline:10px;white-space:normal;line-height:calc(var(--ui-button) + 4px)}
.attention-col-action{width:180px}
@media(max-width:1500px){.activity-panel .activity-table-wrap{max-height:390px}}
@media(max-width:720px){.quick-panel .parity-quick-card{max-height:none}}

.system-health-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.system-health-layout>.system-health-card{grid-column:auto}
.system-health-layout>.info-card{height:100%;min-height:0}
.system-health-layout .diagnostic-list{align-content:start}
@media(max-width:1100px){.system-health-layout{grid-template-columns:1fr}.system-health-layout>.info-card{height:auto}}

@media screen{
 .report-output{padding:clamp(12px,1.8vw,28px);background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-surface)}
 .formal-report-sheet{width:100%;min-height:420px;margin:0 auto;padding:clamp(20px,2.4vw,38px)}
 .report-table-wrap{width:100%;max-height:68vh;overflow:auto}
 .formal-report-sheet .report-table{width:100%!important;max-width:none!important;table-layout:auto!important;margin:0!important}
 .formal-report-sheet.report-columns-1 .report-table,.formal-report-sheet.report-columns-2 .report-table,.formal-report-sheet.report-columns-3 .report-table,.formal-report-sheet.report-columns-4 .report-table{font-size:var(--fs-lead)}
 .formal-report-sheet.report-columns-5 .report-table,.formal-report-sheet.report-columns-6 .report-table,.formal-report-sheet.report-columns-7 .report-table{font-size:var(--fs-body)}
 .formal-report-sheet.report-columns-8 .report-table,.formal-report-sheet.report-columns-9 .report-table,.formal-report-sheet.report-columns-10 .report-table{font-size:var(--fs-body)}
}

.easy-alignment-workspace{grid-template-columns:minmax(235px,280px) minmax(680px,1100px) minmax(295px,340px);justify-content:center;align-items:start}
.alignment-visual-card{width:100%;max-width:1100px}
.alignment-page-viewport{display:flex;height:calc(100vh - 270px);min-height:620px;align-items:flex-start;justify-content:center;padding:16px}
.alignment-page{flex:0 0 auto;margin:0 auto}
.alignment-toolbar{align-items:end}
.alignment-toolbar label{flex:1 1 220px;max-width:420px}
.alignment-template-summary{align-items:start}
.alignment-selected-card{width:100%}
@media(max-width:1500px){.easy-alignment-workspace{grid-template-columns:220px minmax(520px,1fr) 290px}.alignment-page-viewport{height:680px}}
@media(max-width:1180px){.easy-alignment-workspace{grid-template-columns:220px minmax(450px,1fr)}.alignment-visual-card{max-width:none}.alignment-page-viewport{height:650px}}
@media(max-width:850px){.easy-alignment-workspace{grid-template-columns:1fr}.alignment-page-viewport{height:590px;min-height:430px}}

/* v0.23.13 checkpoint 4 - full-viewport login artwork and anchored roadside sign */
html[data-font-scale] body.security-locked :is(.desktop-app-header,#app,.footer){margin-left:0!important}
body.security-locked{margin:0!important;min-width:0!important;overflow:hidden;background:var(--login-background-color)!important}
body.security-locked #app{width:100vw!important;max-width:none!important;min-height:100vh!important;margin:0!important;padding:0!important}
body.security-locked .security-gate{box-sizing:border-box;width:100vw!important;max-width:none!important;min-width:100vw!important;min-height:100vh!important;margin:0!important;background-color:var(--login-background-color);background-repeat:no-repeat;overflow:hidden}
body.security-locked .security-gate-card{z-index:3}
body.security-locked .login-brand-sign{z-index:2}
.branding-preview{position:relative;isolation:isolate;overflow:hidden;background-repeat:no-repeat}
.branding-preview>span{position:relative;z-index:3}
.branding-preview-sign{z-index:2}
.branding-position-help{margin:2px 0 4px;padding:8px 10px;border-left:4px solid var(--blue);background:var(--surface-soft);border-radius:0 var(--r-control) var(--r-control) 0}
@media(max-width:680px){body.security-locked .security-gate{padding:14px 12px}.security-gate-card{width:min(430px,100%)}}

/* v0.23.13 stage 5 - exhaustive page/control audit corrections */
html[data-theme="dark"] .validation-summary.has-errors{
 color:#ffd9dd!important;background:color-mix(in srgb,#7e252d 38%,var(--surface))!important;border-color:#b95d66!important
}
html[data-theme="dark"] .validation-summary.has-warnings{
 color:#ffe7b0!important;background:color-mix(in srgb,#7a5200 38%,var(--surface))!important;border-color:#a67a2f!important
}
html[data-theme="dark"] :is(.expense-editor-card,.data-check-toolbar,.orphan-audit-summary,.orphan-count-grid>p){
 color:var(--ink)!important;background:var(--surface)!important;border-color:var(--line)!important
}
html[data-theme="dark"] :is(.expense-editor-card,.data-check-toolbar,.orphan-audit-summary,.orphan-count-grid>p) :is(strong,span,label,p,small){color:inherit!important}
html[data-theme="dark"] .orphan-audit-summary strong{color:#ffd08a!important}
.financial-warning-badge,.financial-ok-badge{min-height:32px;padding-block:5px}
html[data-font-scale] .alignment-field-list-item{min-height:var(--control-height);font-size:var(--ui-copy)!important}
html[data-font-scale] .alignment-field-list-item small{font-size:max(11px,calc(var(--ui-copy) - 3px))!important}
.system-tools-sticky-row{min-width:0;max-width:100%;align-items:flex-start}
.system-tools-sticky-row .system-tools-tabs,.system-tools-tabs{min-width:0;max-width:100%;flex-wrap:wrap;overflow:visible}
.system-tools-tabs button{flex:0 0 auto;max-width:100%}
.system-close-button{align-self:flex-start;min-height:var(--control-height)}
.update-center-grid,.update-center-grid>* ,.update-file-grid,.update-file-grid>*{min-width:0;max-width:100%}
.update-file-grid input[type="file"],.update-staged-card>input,.update-rollback-card>input{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
@media(max-width:900px){.system-tools-tabs{overflow:visible;flex-wrap:wrap}}

/* v0.23.13 stage 5.2 - responsive content width with expanded desktop sidebar */
@media (min-width:1180px) and (max-width:1320px){
  .customer-detail-grid{grid-template-columns:minmax(0,1fr)}
  .customer-history-card{min-width:0}
  .form-generation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-generation-grid>.info-card:nth-child(3){grid-column:1/-1}
  .activity-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .activity-filter-actions{grid-column:1/-1;flex-wrap:wrap}
  .easy-alignment-workspace{grid-template-columns:220px minmax(0,1fr)}
  .alignment-selected-card{position:static;grid-column:1/-1;max-height:none}
  .alignment-visual-card,.alignment-page-viewport{min-width:0}
}

/* v0.23.13 stage 5.3 - prevent Extra Large workflow actions from stretching vertically */
.deal-action-groups>div{align-content:start}
.deal-action-groups span{align-items:flex-start;align-content:flex-start}
.deal-action-groups .button{align-self:flex-start;height:auto;max-height:calc(var(--control-height) + 18px)}

/* v0.23.13 stage 5.3 - earlier responsive wrap for Extra Large desktop text */
@media (min-width:1180px) and (max-width:1450px){
  html[data-font-scale="extra-large"] .customer-detail-grid{grid-template-columns:minmax(0,1fr)}
  html[data-font-scale="extra-large"] .customer-history-card{min-width:0}
  html[data-font-scale="extra-large"] .form-generation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-font-scale="extra-large"] .form-generation-grid>.info-card:nth-child(3){grid-column:1/-1}
  html[data-font-scale="extra-large"] .activity-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-font-scale="extra-large"] .activity-filter-actions{grid-column:1/-1;flex-wrap:wrap}
  html[data-font-scale="extra-large"] .easy-alignment-workspace{grid-template-columns:220px minmax(0,1fr)}
  html[data-font-scale="extra-large"] .alignment-selected-card{position:static;grid-column:1/-1;max-height:none}
  html[data-font-scale="extra-large"] :is(.alignment-visual-card,.alignment-page-viewport){min-width:0}
}

/* v0.23.13 stage 5.3 - stack complex editors earlier in Extra Large mode */
@media (min-width:1180px) and (max-width:1450px){
  html[data-font-scale="extra-large"] .deal-layout{grid-template-columns:minmax(0,1fr)}
  html[data-font-scale="extra-large"] .deal-column{min-width:0}
  html[data-font-scale="extra-large"] .deal-action-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-font-scale="extra-large"] .deal-action-groups>div:last-child{justify-self:stretch}
  html[data-font-scale="extra-large"] .branding-background-grid{grid-template-columns:minmax(0,1fr)}
  html[data-font-scale="extra-large"] .branding-company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-font-scale="extra-large"] .branding-background-card{min-width:0}
}

/* v0.23.13 keyboard visibility contract */
/* `color` is deliberately NOT transitioned. Found while measuring the sidebar contrast fix: when a
   transitioned property's value comes from a custom property, changing that custom property does
   not restart the transition — the element keeps painting the OLD colour until something else
   forces a recalculation. Measured on the live app: switching design left the nav text at the
   previous design's colour (1.04 contrast on Ledger's cream) while getComputedStyle already
   reported the new #161616. That is precisely the try-before-you-commit design picker's one job.
   Background, border and shadow still animate on hover, which is where the animation was for. */
.sidebar-link{transition-property:background-color,border-color,box-shadow}
.sidebar-link:focus-visible,details>summary:focus-visible{outline:3px solid #7fc4ff!important;outline-offset:-3px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important}
html[data-theme="light"] .sidebar-link:focus-visible,html[data-theme="light"] details>summary:focus-visible{outline-color:#075dcc!important}

/* v0.23.13 dark alignment controls */
html[data-theme="dark"] .alignment-field-list-item{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .alignment-field-list-item:hover{background:color-mix(in srgb,var(--blue) 16%,var(--surface-strong))!important;border-color:#5f91bd!important}
html[data-theme="dark"] .alignment-field-list-item.selected{background:color-mix(in srgb,var(--blue) 24%,var(--surface))!important;color:var(--ink)!important;border-color:#6aa9e9!important;box-shadow:inset 3px 0 0 #7fc4ff!important}
html[data-theme="dark"] .alignment-field-list-item small{color:var(--muted)!important}
html[data-theme="dark"] .alignment-selected-value{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .alignment-selected-value :is(strong,span){color:var(--ink)!important}
html[data-theme="dark"] .alignment-selected-value em{color:#ffd18a!important}

/* v0.23.13 compact alignment interaction geometry */
@media (max-width:1179px){
 .alignment-field-browser{position:static!important;top:auto!important;max-height:none!important}
 .alignment-field-list{max-height:360px}
 .alignment-selected-card :is(button,input,select,summary){scroll-margin-top:170px;scroll-margin-bottom:48px}
 .alignment-sticky-actions{position:static!important}
}


/* v0.23.13 - consistent package typography and approved dashboard shortcuts */
.update-staged-card :is(.update-notes,details summary){font-family:inherit}
.quick-panel .parity-quick-card.quick-maintenance{grid-column:1/-1}

/* v0.23.16 - shared responsive-density and viewport-fit contract */
html[data-font-scale]{
 --density-control-height:max(34px,calc(var(--control-height) - 2px));
 --density-page-pad:clamp(12px,1.15vw,18px);
 --density-panel-pad-y:10px;
 --density-panel-pad-x:13px;
 --density-gap:12px;
 --density-row-pad-y:9px;
 --density-row-pad-x:10px;
 /* --density-sidebar-width WAS MISSING, AND THE SIDEBAR COVERED THE PAGE BECAUSE OF IT.
  *
  * Two rules in the 1180-1679px block ask for it — the sidebar's own width, and the left margin
  * that moves the header, #app and the footer out from under it. An undefined custom property makes
  * BOTH declarations invalid at computed-value time, and the two failures compound instead of
  * cancelling:
  *
  *     margin-left: var(--density-sidebar-width)  -> unset -> 0
  *     width:       var(--density-sidebar-width)  -> auto  -> shrink-to-fit (measured 251px)
  *
  * So a full-height fixed sidebar stayed visible while the content it was supposed to sit beside
  * moved underneath it, hiding the first ~250px of EVERY screen. Measured on the running app:
  * #app margin-left 0px against a 251px sidebar, with the drawer media queries not matching and the
  * hamburger hidden — so nothing about it read as "responsive layout", it just looked like the page
  * was cut off. 1180-1679px covers 1280, 1366, 1440, 1536 and 1600: essentially every laptop.
  *
  * Every other variable in this family is defined exactly once and used; this one was used twice
  * and defined zero times. It is the kind of miss no linter catches, because var() with no fallback
  * is legal CSS and the browser reports nothing.
  *
  * Slightly narrower than the full --sidebar-width, which is the whole point of the density block:
  * give the content back some room on a mid-size screen without shrinking the type.
  *
  * The fallback inside var() is not decoration. The four real settings are small, standard, large
  * and extra-large, and each defines --sidebar-width; anything else — a stale saved preference, a
  * value added later, a typo — leaves it undefined and collapses the layout in exactly the way
  * described above. Testing an invented scale name reproduced the overlap immediately. 228px is the
  * base .dms-sidebar width, so an unknown setting now degrades to the plain desktop layout rather
  * than to a broken one. */
 --density-sidebar-width:min(var(--sidebar-width,228px),248px);
}
html,body{max-width:100%}
body:not(.security-locked){overflow-x:clip}
#app,.desktop-app-header,.footer,main,.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{min-width:0;max-width:100%}
.page-shell,.parity-dashboard,.vehicle-editor-shell,.tools-page-shell{padding:14px var(--density-page-pad) 28px}
.page-shell>*,.parity-dashboard>*,.vehicle-editor-shell>*,.tools-page-shell>*,
.dashboard-grid>*,.cards>*,.form-generation-grid>*,.update-center-grid>*,.customer-detail-grid>*,.deal-layout>*{min-width:0}
.form-generation-grid small{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
html[data-font-scale] .desktop-app-header{min-height:calc(var(--density-control-height) + 12px);padding-inline:var(--density-page-pad)}
html[data-font-scale] :is(.button,.desktop-action-button,.link-btn,.quick-card,.system-tools-tabs button,.vehicle-tabs button,.tools-section-tabs button){min-height:var(--density-control-height)}
html[data-font-scale] :is(input,select,textarea,.search){min-height:var(--density-control-height);padding:8px 10px}
.page-heading,.dashboard-heading,.vehicle-editor-heading{gap:var(--density-gap);margin-bottom:12px}
.notice{margin-bottom:10px;padding:10px 12px}
.panel-heading,.section-title,.vendor-section-title,.system-tab-heading{gap:10px;padding:var(--density-panel-pad-y) var(--density-panel-pad-x)}
.info-card,.report-picker,.report-filter-panel{padding:16px}
.toolbar,.customer-search-bar,.sales-filter-bar,.vehicle-filter-grid,.form-center-toolbar,.dashboard-stock-controls,
.sticky-editor-actions,.vehicle-action-bar,.sub-action-bar{gap:10px;padding:8px 10px}
.cards,.form-generation-grid,.update-center-grid,.security-settings-grid,.financial-summary-grid,.system-health-layout,
.branding-background-grid,.customer-detail-grid,.deal-layout,.report-layout{gap:var(--density-gap)}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table) th{padding:8px var(--density-row-pad-x)}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table,.parity-table) td{padding:var(--density-row-pad-y) var(--density-row-pad-x)}
:is(.table-wrap,.report-table-wrap,.parity-table-wrap,.activity-table-wrap,.vendor-table-wrap,.financial-table-wrap){width:100%;max-width:100%;overflow-x:auto;overscroll-behavior:contain}
.modal-backdrop{padding:14px}.modal-card{max-width:calc(100vw - 28px);padding:16px}

/* Preserve the existing drawer breakpoint; reclaim width only on medium desktops. */
@media (min-width:1180px) and (max-width:1679px){
 html[data-font-scale="small"]{--ui-root:15px;--ui-body:13px;--ui-copy:13px;--ui-table:13px;--ui-nav:13px;--ui-label:13px;--ui-button:13px;--control-height:34px;--sidebar-width:232px;--page-gap:16px;--fs-micro:11px;--fs-small:12px;--fs-body:13px;--fs-lead:15px;--fs-h3:17px;--fs-h2:20px;--fs-h1:24px;--fs-display:30px;--lh-micro:16px;--lh-small:18px;--lh-body:20px;--lh-lead:22px;--lh-h3:24px;--lh-h2:26px;--lh-h1:30px;--lh-display:34px}
 html[data-font-scale="standard"]{--ui-root:16px;--ui-body:14px;--ui-copy:14px;--ui-table:14px;--ui-nav:14px;--ui-label:14px;--ui-button:14px;--control-height:38px;--sidebar-width:244px;--page-gap:20px;--fs-micro:12px;--fs-small:13px;--fs-body:14px;--fs-lead:16px;--fs-h3:18px;--fs-h2:22px;--fs-h1:26px;--fs-display:32px;--lh-micro:16px;--lh-small:20px;--lh-body:20px;--lh-lead:24px;--lh-h3:26px;--lh-h2:28px;--lh-h1:32px;--lh-display:36px}
 html[data-font-scale="large"]{--ui-root:17px;--ui-body:16px;--ui-copy:16px;--ui-table:16px;--ui-nav:16px;--ui-label:16px;--ui-button:16px;--control-height:44px;--sidebar-width:288px;--page-gap:24px;--fs-micro:13px;--fs-small:14px;--fs-body:16px;--fs-lead:18px;--fs-h3:20px;--fs-h2:24px;--fs-h1:28px;--fs-display:36px;--lh-micro:18px;--lh-small:20px;--lh-body:24px;--lh-lead:26px;--lh-h3:28px;--lh-h2:32px;--lh-h1:36px;--lh-display:40px}
 html[data-font-scale="extra-large"]{--ui-root:18px;--ui-body:18px;--ui-copy:18px;--ui-table:18px;--ui-nav:18px;--ui-label:18px;--ui-button:18px;--control-height:50px;--sidebar-width:332px;--page-gap:28px;--fs-micro:14px;--fs-small:16px;--fs-body:18px;--fs-lead:20px;--fs-h3:22px;--fs-h2:26px;--fs-h1:32px;--fs-display:40px;--lh-micro:20px;--lh-small:24px;--lh-body:26px;--lh-lead:28px;--lh-h3:30px;--lh-h2:36px;--lh-h1:40px;--lh-display:44px}
 html[data-font-scale] .dms-sidebar{width:var(--density-sidebar-width);flex-basis:var(--density-sidebar-width)}
 html[data-font-scale] :is(.desktop-app-header,#app,.footer){margin-left:var(--density-sidebar-width)}
 html[data-font-scale] .sidebar-brand{padding-inline:13px}
 html[data-font-scale] .sidebar-link{padding:8px 10px}
}

/* Dashboard geometry approaches the 90% reference while browser zoom remains 100%. */
.parity-dashboard{padding-top:12px}
.compact-dashboard-heading{margin-bottom:10px}
.parity-kpi-grid{gap:8px;margin-bottom:10px}
.parity-kpi-card{min-height:94px;grid-template-columns:58px minmax(0,1fr) 18px;gap:8px;padding:8px 10px}
.parity-kpi-asset{width:54px;height:54px}.parity-kpi-asset img{width:52px;height:52px}
.parity-kpi-asset .inventory-kpi-icon{width:54px;height:54px}
.parity-dashboard-grid{grid-template-columns:minmax(600px,1.55fr) minmax(330px,.95fr);grid-template-areas:"attention readiness" "activity quick";grid-template-rows:auto auto;gap:10px}
.desktop-panel-heading{min-height:46px;padding:8px 12px}
.attention-panel .parity-table-wrap{max-height:360px}
.readiness-panel .parity-readiness-list{padding:0 10px 8px}
.readiness-panel .parity-readiness-row{min-height:var(--density-control-height);padding:4px 6px}
.activity-panel .activity-table-wrap{max-height:330px;overflow:auto}
.quick-panel .parity-quick-grid{grid-auto-rows:minmax(72px,auto);gap:8px;padding:10px}
.quick-panel .parity-quick-card{min-height:72px;max-height:94px;gap:6px;padding:8px 10px}
.quick-panel .parity-quick-card .quick-action-image{width:48px;height:48px;flex-basis:48px}
.parity-dashboard .dashboard-footer{gap:12px;margin-top:10px;padding:8px 12px}
@media(max-width:1320px){
 .parity-dashboard-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"attention" "readiness" "activity" "quick"}
 .attention-panel .parity-table-wrap,.activity-panel .activity-table-wrap{max-height:330px}
}
@media(max-width:1100px){
 .customer-detail-grid,.deal-layout,.update-center-grid,.branding-background-grid{grid-template-columns:minmax(0,1fr)}
 .update-history-card{grid-column:auto}
}
@media(max-width:720px){
 .quick-panel .parity-quick-card{max-height:none}
 .parity-dashboard .dashboard-footer{align-items:flex-start;flex-direction:column}
}

/* v0.23.16 - appearance ownership, dark semantic surfaces, and transparent legacy dashboard art */
.display-default-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}
.display-effective-status{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-theme="dark"] .warning-detail-backdrop{background:rgba(1,10,18,.78)}
html[data-theme="dark"] .warning-detail-modal{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .warning-modal-heading{background:var(--surface-soft)!important;border-color:var(--line)!important}
html[data-theme="dark"] .warning-modal-heading :is(h2,.eyebrow){color:var(--ink)!important}
html[data-theme="dark"] .warning-summary-strip{background:var(--surface-strong)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .warning-summary-strip strong{color:var(--ink)!important}
html[data-theme="dark"] .warning-detail-grid{background:var(--canvas)!important}
html[data-theme="dark"] .warning-detail-grid section{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .warning-detail-grid :is(h3,p,li){color:var(--ink)!important}
html[data-theme="dark"] .warning-detail-grid :is(p,li){color:var(--muted)!important}
html[data-theme="dark"] .warning-detail-actions{background:var(--surface-soft)!important;border-color:var(--line)!important}



html[data-theme="dark"] .sale-state.draft,
html[data-theme="dark"] .editor-mode-badge,
html[data-theme="dark"] .validation-summary.has-warnings,
html[data-theme="dark"] .status.warning{background:#4a3411!important;color:#ffe2a3!important;border-color:#9d742b!important}
html[data-theme="dark"] .inline-success,
html[data-theme="dark"] .validation-summary:not(.has-errors):not(.has-warnings),
html[data-theme="dark"] .status.available{background:#123f2c!important;color:#d9ffe8!important;border-color:#3f8a63!important}
html[data-theme="dark"] .validation-summary.has-errors,
/* `.status.sold` belongs on this line and was missing from it.
 *
 * Every other status pill got a dark counterpart here; sold kept `color:#8d2026` (a dark red
 * meant for a pale wash) over `background:var(--redsoft)`, which FLIPS to the dark #4b2227 in
 * dark mode. Measured 1.52:1 - dark red on dark red. That is the SOLD badge on every row of
 * the inventory table and on the vehicle record, i.e. the single most-read badge in the app,
 * effectively blank for anyone running a dark theme. It reads as a rendering fault rather than
 * as a status, which is exactly the "buttons and labels disappear in some themes" report. */
html[data-theme="dark"] .status.sold,
html[data-theme="dark"] .status.error{background:#4a2026!important;color:#ffd9dd!important;border-color:#a5545e!important}
html[data-theme="dark"] .editor-notice{background:#4a3411!important;color:#ffe2a3!important;border-color:#9d742b!important}
html[data-theme="dark"] .editor-notice :is(strong,span,p){color:inherit!important}
html[data-theme="dark"] .validation-item span{color:var(--muted)!important}
html[data-theme="dark"] .validation-item strong{color:var(--ink)!important}

html[data-theme="dark"] .alignment-page-viewport{background:#0a1826!important}
html[data-theme="dark"] .alignment-collapsible{background:var(--surface-soft)!important;border-color:var(--line)!important}
html[data-theme="dark"] .alignment-collapsible>summary{background:var(--surface-strong)!important;color:var(--ink)!important;border-radius:var(--r-control)}
html[data-theme="dark"] .alignment-collapsible[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--r-control) var(--r-control) 0 0}
html[data-theme="dark"] .alignment-collapsible>p{color:var(--muted)!important}
html[data-theme="dark"] .alignment-step-select{color:var(--ink)!important}



html[data-theme="dark"] .alignment-control-section>span,
html[data-theme="dark"] .alignment-advanced-grid label,
html[data-theme="dark"] .alignment-printer-grid label{color:var(--muted)!important}

.parity-kpi-asset img,img.quick-action-image{background:transparent!important}
.parity-kpi-asset .inventory-kpi-icon{width:64px;height:64px}
.parity-quick-card.quick-new-sale .quick-action-image,
.parity-quick-card.quick-form-generation .quick-action-image{width:64px;height:64px}
@media(max-width:1500px){.parity-kpi-asset .inventory-kpi-icon{width:54px;height:54px}}
@media(max-width:720px){.display-default-actions{align-items:stretch;flex-direction:column}.display-default-actions .button{width:100%}.display-effective-status{grid-template-columns:1fr}}


/* v0.23.16 corrective - remaining Dark-mode application surfaces */
html[data-theme="dark"] :is(.file-summary-card,.file-add-panel){
 background:var(--surface-soft)!important;
 color:var(--ink)!important;
 border-color:var(--line)!important;
}
html[data-theme="dark"] :is(.file-summary-card,.file-add-panel) :is(h3,strong,span,label){color:var(--ink)!important}
html[data-theme="dark"] :is(.file-summary-card,.file-add-panel) small{color:var(--muted)!important}

html[data-theme="dark"] .expense-section-title{
 background:var(--surface-strong)!important;
 color:var(--ink)!important;
 border-color:var(--line)!important;
}
html[data-theme="dark"] .expense-section-title strong{color:var(--ink)!important}
html[data-theme="dark"] .expense-section-title span{color:var(--muted)!important}
html[data-theme="dark"] .expense-validation.clean{
 background:#123f2c!important;
 color:#d9ffe8!important;
 border-color:#3f8a63!important;
}
html[data-theme="dark"] .expense-validation.has-errors{
 background:#4a2026!important;
 color:#ffd9dd!important;
 border-color:#a5545e!important;
}
html[data-theme="dark"] .expense-validation span{color:inherit!important}

html[data-theme="dark"] .alignment-sequence-group h4{
 background:var(--surface-strong)!important;
 color:var(--ink)!important;
 border-color:var(--line)!important;
}


/* v0.23.17 - Dashboard navigation clarity, current-stock context, and one-line Dashboard actions */
.vehicle-context-badge{
 display:grid;
 grid-template-columns:max-content max-content minmax(0,1fr);
 grid-template-areas:"label stock vehicle" "label stock meta";
 align-items:center;
 gap:2px 12px;
 margin:0 0 12px;
 padding:10px 14px;
 border:2px solid color-mix(in srgb,var(--blue) 72%,var(--line));
 border-radius:var(--r-surface);
 background:color-mix(in srgb,var(--bluesoft) 78%,var(--surface));
 box-shadow:inset 4px 0 0 var(--blue),0 3px 12px rgba(16,43,78,.08);
}
.vehicle-context-badge>span{
 grid-area:label;
 align-self:stretch;
 display:flex;
 align-items:center;
 padding-right:12px;
 border-right:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));
 color:var(--blue);
 font-size:var(--fs-small);
 font-weight:700;
 letter-spacing:.06em;
 text-transform:uppercase;
 white-space:nowrap;
}
.vehicle-context-badge>strong{
 grid-area:stock;
 color:var(--navy);
 font-size:var(--fs-h3);
 line-height:var(--lh-h3);
 white-space:nowrap;
}
.vehicle-context-badge>b{
 grid-area:vehicle;
 min-width:0;
 color:var(--ink);
 font-size:var(--fs-body);
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.vehicle-context-badge>small{
 grid-area:meta;
 min-width:0;
 color:var(--muted);
 font-size:var(--fs-small);
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
html[data-theme="dark"] .vehicle-context-badge{
 background:color-mix(in srgb,var(--blue) 16%,var(--surface-strong));
 border-color:#4d89bd;
 box-shadow:inset 4px 0 0 #61aef0,0 3px 14px rgba(0,0,0,.22);
}
html[data-theme="dark"] .vehicle-context-badge>span{color:#9bd2ff;border-color:#466783}
html[data-theme="dark"] .vehicle-context-badge>strong,
html[data-theme="dark"] .vehicle-context-badge>b{color:var(--ink)}
html[data-theme="dark"] .vehicle-context-badge>small{color:var(--muted)}

.parity-dashboard button,
.parity-dashboard .quick-card strong{white-space:nowrap}
.parity-dashboard .attention-table{min-width:940px}
.parity-dashboard .attention-col-action{width:184px}
.parity-dashboard .attention-table th:last-child,
.parity-dashboard .attention-table td:last-child{min-width:184px;width:184px}
.parity-dashboard .desktop-action-button{
 width:100%;
 min-width:168px;
 max-width:none;
 padding-inline:11px;
 line-height:calc(var(--ui-button) + 4px);
 white-space:nowrap;
}
.parity-dashboard .quick-card{min-width:0}
.parity-dashboard .quick-card strong{overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
 .vehicle-context-badge{
  grid-template-columns:1fr;
  grid-template-areas:"label" "stock" "vehicle" "meta";
  gap:5px;
 }
 .vehicle-context-badge>span{
  align-self:auto;
  padding:0 0 6px;
  border-right:0;
  border-bottom:1px solid var(--line);
 }
}

/* v0.23.19 - four-level application scale and no-overflow action contract */
html[data-font-scale="small"]{
 --scale-button-pad-x:12.6px;--scale-button-pad-y:6.3px;--scale-tab-pad-x:12.6px;
 --scale-panel-pad:13.5px;--scale-modal-pad:14.4px;--scale-table-min:756px;
 --dashboard-action-width:165.6px;--dashboard-table-min:846px;
}
html[data-font-scale="standard"]{
 --scale-button-pad-x:14px;--scale-button-pad-y:7px;--scale-tab-pad-x:14px;
 --scale-panel-pad:15px;--scale-modal-pad:16px;--scale-table-min:840px;
 --dashboard-action-width:184px;--dashboard-table-min:940px;
}
html[data-font-scale="large"]{
 --scale-button-pad-x:17px;--scale-button-pad-y:8px;--scale-tab-pad-x:17px;
 --scale-panel-pad:18px;--scale-modal-pad:19px;--scale-table-min:940px;
 --dashboard-action-width:214px;--dashboard-table-min:1060px;
}
html[data-font-scale="extra-large"]{
 --scale-button-pad-x:20px;--scale-button-pad-y:10px;--scale-tab-pad-x:20px;
 --scale-panel-pad:21px;--scale-modal-pad:22px;--scale-table-min:1060px;
 --dashboard-action-width:252px;--dashboard-table-min:1180px;
}
html[data-font-scale] :is(.button,.desktop-action-button,.system-tools-tabs button,.vehicle-tabs button,.tools-section-tabs button,.stock-nav-button){
 height:auto;min-height:var(--control-height);padding:var(--scale-button-pad-y) var(--scale-button-pad-x);
 line-height:calc(var(--ui-button) + 4px);white-space:nowrap;
}
html[data-font-scale] .button.compact{min-height:max(30px,calc(var(--control-height) - 6px));padding:4px max(8px,calc(var(--scale-button-pad-x) - 4px))}
html[data-font-scale] :is(.system-tools-tabs,.vehicle-tabs,.tools-section-tabs){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
html[data-font-scale] :is(.system-tools-tabs button,.vehicle-tabs button,.tools-section-tabs button){flex:0 0 auto;padding-inline:var(--scale-tab-pad-x)}
html[data-font-scale] :is(.button-row,.vendor-actions,.warning-navigation,.warning-primary-actions,.activity-filter-actions,.deal-action-groups>div){gap:max(7px,calc(var(--scale-button-pad-x) / 2));flex-wrap:wrap}
html[data-font-scale] :is(.info-card,.report-picker,.report-filter-panel){padding:var(--scale-panel-pad)}
html[data-font-scale] .modal-card{padding:var(--scale-modal-pad)}
html[data-font-scale] :is(.link-btn,.warning-detail-link,.inline-link){white-space:nowrap}
html[data-font-scale] :is(.table-wrap,.report-table-wrap,.parity-table-wrap,.activity-table-wrap,.vendor-table-wrap,.financial-table-wrap){overflow-x:auto;overscroll-behavior-inline:contain}
html[data-font-scale] :is(.data-table,.vendor-table,.security-users-table,.financial-compact-table):not(.attention-table){min-width:min(var(--scale-table-min),100%)}
html[data-font-scale] .parity-dashboard .attention-table{min-width:var(--dashboard-table-min)}
html[data-font-scale] .parity-dashboard .attention-col-action,
html[data-font-scale] .parity-dashboard .attention-table th:last-child,
html[data-font-scale] .parity-dashboard .attention-table td:last-child{width:var(--dashboard-action-width);min-width:var(--dashboard-action-width)}
html[data-font-scale] .parity-dashboard .desktop-action-button{
 width:100%;min-width:calc(var(--dashboard-action-width) - 16px);max-width:none;
 padding-inline:var(--scale-button-pad-x);white-space:nowrap;overflow:visible;
}
html[data-font-scale] :is(.quick-card,.parity-quick-card){height:auto;min-height:calc(var(--control-height) + 34px);padding:var(--scale-button-pad-y) var(--scale-button-pad-x)}
html[data-font-scale] :is(.quick-card strong,.parity-quick-card strong){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-font-scale="large"] :is(.dashboard-grid,.parity-dashboard-grid),
html[data-font-scale="extra-large"] :is(.dashboard-grid,.parity-dashboard-grid){column-gap:max(12px,var(--density-gap))}
@media (min-width:1180px) and (max-width:1500px){
 html[data-font-scale="extra-large"] .parity-dashboard-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"attention" "readiness" "activity" "quick"}
 html[data-font-scale="extra-large"] .parity-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1179px){
 html[data-font-scale] :is(.button,.desktop-action-button,.system-tools-tabs button,.vehicle-tabs button,.tools-section-tabs button){max-width:100%}
}



/* v0.23.19 carry-in - Small equals 90% of Standard while preserving one-line sidebar navigation */
html[data-font-scale="small"] .sidebar-nav{padding-inline:8px}
html[data-font-scale="small"] .sidebar-brand{gap:10px;padding-inline:12px}
html[data-font-scale="small"] .sidebar-brand-mark{flex-basis:37px;width:37px;height:37px}
html[data-font-scale="small"] .sidebar-brand strong{font-size:14px;white-space:nowrap}
html[data-font-scale="small"] .sidebar-brand small{font-size:11px;line-height:15px;white-space:nowrap}
html[data-font-scale="small"] .sidebar-nav-group h2{font-size:11px;line-height:15px;white-space:nowrap}
html[data-font-scale="small"] .sidebar-link{gap:8px;padding-inline:9px;white-space:nowrap}
html[data-font-scale="small"] .sidebar-link-icon{width:22px;height:22px}
html[data-font-scale="small"] .sidebar-release span{font-size:11px}
@media (min-width:1180px) and (max-width:1679px){
 html[data-font-scale="small"]{--ui-root:15px;--ui-body:13px;--ui-copy:13px;--ui-table:13px;--ui-nav:13px;--ui-label:13px;--ui-button:13px;--control-height:34px;--sidebar-width:232px;--page-gap:16px;--fs-micro:11px;--fs-small:12px;--fs-body:13px;--fs-lead:15px;--fs-h3:17px;--fs-h2:20px;--fs-h1:24px;--fs-display:30px;--lh-micro:16px;--lh-small:18px;--lh-body:20px;--lh-lead:22px;--lh-h3:24px;--lh-h2:26px;--lh-h1:30px;--lh-display:34px}
}


/* v0.23.20 - shared semantic table alignment */
html[data-font-scale]{
 --semantic-table-row-height:calc(var(--control-height) + 6px);
 --semantic-table-vin-width:18ch;
}
:is(.table-wrap,.report-table-wrap,.financial-responsive-table,.parity-table-wrap,.activity-table-wrap,.vendor-table-wrap,.financial-table-wrap){
 max-width:100%;
 overflow-x:auto;
 overscroll-behavior-inline:contain;
}
.semantic-table{
 width:100%;
 border-collapse:collapse;
 table-layout:auto;
 font-variant-numeric:tabular-nums;
}
.semantic-table :is(th,td){
 vertical-align:middle!important;
 line-height:calc(var(--ui-table) + 7px);
}
.semantic-table tbody tr{height:var(--semantic-table-row-height)}
.semantic-table :is(th,td).column-text{text-align:left!important}
.semantic-table :is(th,td).column-vin{
 min-width:var(--semantic-table-vin-width);
 text-align:left!important;
 white-space:nowrap;
 font-family:var(--font-code);
 font-size:1em;
 letter-spacing:.015em;
 font-variant-numeric:tabular-nums;
}
.semantic-table :is(th,td).column-checksum{
 text-align:left!important;
 white-space:nowrap;
 font-family:var(--font-code);
 font-variant-numeric:tabular-nums;
}
.semantic-table :is(th,td).column-money,
.semantic-table :is(th,td).column-number{
 text-align:right!important;
 white-space:nowrap;
 font-variant-numeric:tabular-nums;
}
.semantic-table :is(th,td).column-date,
.semantic-table :is(th,td).column-status,
.semantic-table :is(th,td).column-action{
 text-align:center!important;
}
.semantic-table :is(th,td).column-date,
.semantic-table :is(th,td).column-status,
.semantic-table :is(th,td).column-action{white-space:nowrap}
.semantic-table td.column-action :is(.row-actions,.button-row){
 justify-content:center;
 flex-wrap:nowrap;
}
.semantic-table td.column-action :is(.button,.link-btn,.desktop-action-button){white-space:nowrap}
.semantic-table td.column-vin :is(.mono,.vin-cell){font:inherit;letter-spacing:inherit}


/* v0.23.21 preserved - registration-address tax safety and sticky Sales workflow actions */
.tax-rate-address-note{color:var(--muted);font-weight:700;white-space:nowrap}

/* v0.23.22 - responsive Inventory/Expense widths and shared Backup summary typography */
.inventory-width-profile{
 width:100%!important;
 min-width:100%!important;
 table-layout:auto;
}
.inventory-width-profile th{white-space:nowrap}
.inventory-width-profile td{white-space:normal;overflow-wrap:anywhere}
.inventory-width-profile :is(th,td):is(.vehicle-column-stock,.vehicle-column-year,.vehicle-column-mileage,.vehicle-column-vin,.vehicle-column-color,.vehicle-column-plate,.vehicle-column-smog,.vehicle-column-status,.vehicle-column-purchase){white-space:nowrap}
.inventory-width-profile col.vehicle-col-stock{width:6%}
.inventory-width-profile col.vehicle-col-year{width:4%}
.inventory-width-profile col.vehicle-col-make{width:7%}
.inventory-width-profile col.vehicle-col-model{width:8%}
.inventory-width-profile col.vehicle-col-trim{width:8%}
.inventory-width-profile col.vehicle-col-mileage{width:7%}
.inventory-width-profile col.vehicle-col-vin{width:15%}
.inventory-width-profile col.vehicle-col-color{width:6%}
.inventory-width-profile col.vehicle-col-plate{width:8%}
.inventory-width-profile col.vehicle-col-smog{width:6%}
.inventory-width-profile col.vehicle-col-vendor{width:10%}
.inventory-width-profile col.vehicle-col-status{width:8%}
.inventory-width-profile col.vehicle-col-purchase{width:7%}
.inventory-width-profile :is(th,td).vehicle-column-stock{min-width:9ch}
.inventory-width-profile :is(th,td).vehicle-column-year{min-width:6ch}
.inventory-width-profile :is(th,td).vehicle-column-make{min-width:8ch}
.inventory-width-profile :is(th,td).vehicle-column-model{min-width:10ch}
.inventory-width-profile :is(th,td).vehicle-column-trim{min-width:9ch}
.inventory-width-profile :is(th,td).vehicle-column-mileage{min-width:9ch}
.inventory-width-profile :is(th,td).vehicle-column-vin{min-width:19ch}
.inventory-width-profile :is(th,td).vehicle-column-color{min-width:8ch}
.inventory-width-profile :is(th,td).vehicle-column-plate{min-width:11ch}
.inventory-width-profile :is(th,td).vehicle-column-smog{min-width:8ch}
.inventory-width-profile :is(th,td).vehicle-column-vendor{min-width:12ch}
.inventory-width-profile :is(th,td).vehicle-column-status{min-width:12ch}
.inventory-width-profile :is(th,td).vehicle-column-purchase{min-width:12ch}

.expense-width-profile{
 width:100%!important;
 min-width:100%!important;
 table-layout:auto;
}
.expense-width-profile col.expense-col-select{width:4%}
.expense-width-profile col.expense-col-date{width:10%}
.expense-width-profile col.expense-col-category{width:12%}
.expense-width-profile col.expense-col-vendor{width:15%}
.expense-width-profile col.expense-col-description{width:25%}
.expense-width-profile col.expense-col-amount{width:10%}
.expense-width-profile col.expense-col-payment{width:10%}
.expense-width-profile col.expense-col-receipt{width:14%}
.expense-width-profile :is(th,td){white-space:nowrap}
.expense-width-profile :is(th,td):nth-child(2){min-width:12ch}
.expense-width-profile :is(th,td):nth-child(3){min-width:13ch}
.expense-width-profile :is(th,td):nth-child(4){min-width:15ch}
.expense-width-profile :is(th,td):nth-child(5){min-width:24ch;white-space:normal;overflow-wrap:anywhere;text-align:left}
.expense-width-profile :is(th,td):nth-child(6){min-width:11ch}
.expense-width-profile :is(th,td):nth-child(7){min-width:12ch}
.expense-width-profile :is(th,td):nth-child(8){min-width:14ch;white-space:normal;overflow-wrap:anywhere}
.expense-select-cell{width:46px;text-align:center!important}
.expense-select-cell input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.expense-row.bulk-selected{background:color-mix(in srgb,var(--blue) 12%,var(--surface))!important;box-shadow:inset 3px 0 0 var(--blue)}
.expense-bulk-strip strong{color:var(--blue)}

html[data-font-scale] .backup-status-grid strong{
 font-size:var(--ui-label);
 line-height:calc(var(--ui-table) + 7px);
}
html[data-font-scale] .backup-status-grid span{
 font-size:var(--ui-copy);
 line-height:calc(var(--ui-table) + 7px);
}
html[data-font-scale] .backup-status-grid .status{font-size:var(--ui-copy)}

.sales-workflow-shell{--sales-workflow-sticky-top:calc(86px + var(--control-height) + 18px)}
.deal-action-groups.sticky-deal-action-groups{
 position:sticky;
 top:var(--sales-workflow-sticky-top);
 z-index:19;
 grid-template-columns:max-content max-content max-content max-content;
 max-width:100%;
 overflow-x:auto;
 overflow-y:hidden;
 overscroll-behavior-inline:contain;
 scrollbar-gutter:stable;
 background:var(--surface)!important;
 border-color:var(--line)!important;
 box-shadow:var(--shadow-raised);
}
.deal-action-groups.sticky-deal-action-groups>div{min-width:max-content;background:inherit!important}
.deal-action-groups.sticky-deal-action-groups>div:last-child{justify-self:start}
.deal-action-groups.sticky-deal-action-groups span{flex-wrap:nowrap}
.deal-action-groups.sticky-deal-action-groups .button{white-space:nowrap}
html[data-theme="dark"] .deal-action-groups.sticky-deal-action-groups{box-shadow:var(--shadow-raised)}
@media(max-width:900px){
 .sales-workflow-shell{--sales-workflow-sticky-top:calc(58px + var(--control-height) + 18px)}
}

/* v0.23.27 - Dark-mode Activity detail cards and Active sale-state contrast */
html[data-theme="dark"] .activity-detail-grid>div{
 background:var(--surface-strong)!important;
 color:var(--ink)!important;
 border-color:var(--line)!important;
}
html[data-theme="dark"] .activity-detail-grid>div strong{color:var(--ink)!important}
html[data-theme="dark"] .activity-detail-grid>div p{color:var(--muted)!important}
html[data-theme="dark"] .sale-state.active{
 background:#123f2c!important;
 color:#d9ffe8!important;
 border-color:#3f8a63!important;
}

/* v0.23.31 - Dark-mode Vehicle Financial Detail surfaces and semantic contrast */
html[data-theme="dark"] .financial-waterfall section,
html[data-theme="dark"] .financial-warning-section{
 background:var(--surface-strong)!important;
 color:var(--ink)!important;
 border-color:var(--line)!important;
}
html[data-theme="dark"] .financial-waterfall h3,
html[data-theme="dark"] .financial-warning-section h3,
html[data-theme="dark"] .financial-waterfall dd,
html[data-theme="dark"] .financial-waterfall :is(.subtotal,.total) dt{
 color:var(--ink)!important;
}
html[data-theme="dark"] .financial-waterfall dt,
html[data-theme="dark"] .financial-detail-status strong{
 color:var(--muted)!important;
}
html[data-theme="dark"] .financial-waterfall dl div{
 border-color:var(--line)!important;
}
html[data-theme="dark"] .financial-waterfall :is(.subtotal,.total){
 border-top-color:#71879d!important;
}
html[data-theme="dark"] .financial-waterfall :is(.deduction dd,.loss-value),
html[data-theme="dark"] .financial-warning-section ul{
 color:#ffabb2!important;
}
html[data-theme="dark"] .financial-waterfall .profit-value,
html[data-theme="dark"] .financial-complete-message{
 color:#8ce4ae!important;
}

/* v0.23.36 - structured offline Help foundation */
.help-v2{display:grid;gap:18px}
.help-v2 a[data-route]{cursor:pointer}
.help-internal-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-small);line-height:calc(var(--ui-table) + 7px);flex-wrap:wrap}
.help-internal-breadcrumb a{color:var(--blue);font-weight:700}
.help-internal-breadcrumb a:hover{text-decoration:underline}
.help-hero-v2{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);gap:26px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:var(--r-surface);background:linear-gradient(135deg,var(--surface),var(--soft));box-shadow:var(--shadow)}
.help-hero-v2 h2,.help-category-header-v2 h2,.help-search-results-header h2,.help-article-header-v2 h2{margin:4px 0 10px;color:var(--navy);font-size:var(--fs-h1);letter-spacing:-.035em}
.help-hero-v2 p,.help-category-header-v2 p,.help-search-results-header p,.help-article-header-v2 p{margin:0;color:var(--muted);line-height:calc(var(--ui-copy) + 8px)}
.help-release-state{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:18px;padding:12px 14px;border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--bluesoft);font-size:var(--fs-small)}
.help-release-state span{color:#425b74}
.help-search-form{display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}
.help-search-form.compact{box-shadow:none}
.help-search-form>label{color:var(--ink);font-weight:700}
/* minmax(0,…) rather than a pixel floor: a grid column whose minimum is 180px cannot shrink
 * below it, so on a 1280-wide screen this row pushed the Help page 74px past the viewport and
 * put a horizontal scrollbar under the whole app. The columns keep their proportions and now
 * give way when the window is narrow, which is what a dealer on a 1366 laptop actually has. */
.help-search-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr) auto auto;gap:8px;min-width:0}
.help-search-form,.help-search-form>label{min-width:0}
@media(max-width:900px){.help-search-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.help-search-controls input,.help-search-controls select{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);color:var(--ink);background:var(--surface)}
.help-search-form small{color:var(--muted);font-size:var(--fs-small);line-height:calc(var(--ui-copy) + 8px)}
.help-section-v2{display:grid;gap:14px}
/* Section titles inside the Help shell had no size rule, so they fell to the browser's 1.5em. */
.help-section-v2 h2,.help-legacy-notice h2,.help-hero-v2 h2:not([class]){margin:0;font-size:var(--fs-h2);color:var(--navy)}
.help-section-heading-v2{display:flex;align-items:end;justify-content:space-between;gap:16px}
.help-section-heading-v2 h2{margin:0;color:var(--navy)}
.help-section-heading-v2>span,.help-section-heading-v2>a{color:var(--muted);font-size:var(--fs-small);font-weight:700}
.help-section-heading-v2>a{color:var(--blue);cursor:pointer}
.help-category-grid-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.help-category-card-v2{display:grid;grid-template-columns:42px 1fr;align-items:start;gap:12px;min-height:148px;padding:16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised);transition:transform .12s,border-color .12s,box-shadow .12s;cursor:pointer}
.help-category-card-v2:hover{transform:translateY(-2px);border-color:#8aa7c2;box-shadow:var(--shadow-raised)}
.help-category-icon-v2{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-surface);color:var(--blue);background:var(--bluesoft);font-size:var(--fs-h3);font-weight:700}
.help-category-card-v2>span:last-child{display:grid;gap:8px;min-width:0}
.help-category-card-v2 strong{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.help-category-card-v2 small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.help-category-card-v2 em{color:var(--blue);font-size:var(--fs-small);font-style:normal;font-weight:700}
.help-article-grid-v2,.help-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-article-card-v2{display:flex;flex-direction:column;min-height:230px;padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}
.help-article-card-v2.legacy{border-style:dashed}
.help-article-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.help-article-card-heading p{margin:0;color:var(--blue);font-size:var(--fs-small);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.help-article-card-v2 h3{margin:14px 0 8px;color:var(--navy);font-size:var(--fs-h3)}
.help-article-card-v2 h3 a{cursor:pointer}
.help-article-card-v2 h3 a:hover{text-decoration:underline}
.help-article-card-v2>p{margin:0;color:var(--muted);line-height:calc(var(--ui-copy) + 8px)}
.help-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.help-card-footer>span{color:var(--muted);font-size:var(--fs-small)}
.help-status-badge{display:inline-flex;align-items:center;max-width:240px;padding:6px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700;line-height:calc(var(--fs-micro) + 6px);text-align:center}
.help-status-badge.accepted{color:#17623a;background:var(--greensoft)}
.help-status-badge.pending{color:#805300;background:var(--ambersoft)}
.help-status-badge.legacy{color:#6d4b14;background:#f5ead6}
.help-legacy-notice{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px;border:1px solid #d8b06e;border-radius:var(--r-surface);background:#fff7e7}
.help-legacy-notice.strong{border-width:2px}
.help-legacy-notice h2{margin:2px 0 6px;color:#704606}
.help-legacy-notice p{margin:0;color:#725a37;line-height:calc(var(--ui-copy) + 8px)}
.help-category-header-v2{display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:start;padding:22px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.help-category-header-v2 .help-category-icon-v2{width:54px;height:54px;font-size:var(--fs-h2)}
.help-category-header-v2 strong{display:block;margin-top:10px;color:var(--blue);font-size:var(--fs-small)}
.help-empty-category,.help-no-results-v2{display:grid;justify-items:center;gap:10px;padding:44px 24px;border:1px dashed #99adbf;border-radius:var(--r-surface);text-align:center;background:var(--surface)}
.help-empty-category h2,.help-no-results-v2 h2{margin:0;color:var(--navy)}
.help-empty-category p,.help-no-results-v2 p{max-width:760px;margin:0;color:var(--muted);line-height:calc(var(--ui-copy) + 8px)}
.help-no-results-v2>div{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-stadium);color:#fff;background:var(--blue);font-size:var(--fs-h2);font-weight:700}
.help-search-results-header{display:grid;grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr);gap:24px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.help-article-header-v2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.55fr);gap:22px;align-items:start;padding:24px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.help-article-header-v2>aside{padding:16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
.help-article-header-v2>aside>strong{display:block;color:var(--ink);font-size:var(--fs-small)}
.help-article-header-v2>aside ol{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 14px;padding-left:20px;color:var(--muted);font-size:var(--fs-small)}
.help-article-header-v2>aside li{padding-right:4px}
.help-article-status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.help-article-status-line>span:last-child{color:var(--muted);font-size:var(--fs-small)}
.help-verification-notice{padding:16px 18px;border-left:5px solid var(--amber);border-radius:var(--r-surface);background:var(--ambersoft)}
.help-verification-notice.accepted{border-left-color:var(--green);background:var(--greensoft)}
.help-verification-notice.accepted strong,.help-verification-notice.accepted p{color:#17623a}
.help-verification-notice strong{color:#704606}
.help-verification-notice p{margin:4px 0 0;color:#725a37;line-height:calc(var(--ui-copy) + 8px)}
.help-article-overview-grid,.help-outcome-grid,.help-risk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.help-article-overview-grid>section,.help-outcome-grid>section,.help-risk-grid>section,.help-before-begin,.help-troubleshooting-section,.help-related-section{padding:20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.help-article-page h2{margin:0 0 10px;color:var(--navy);font-size:var(--fs-lead)}
.help-article-page p,.help-article-page li{color:var(--muted);line-height:calc(var(--ui-copy) + 8px)}
.help-article-page ul,.help-article-page ol{margin:0;padding-left:22px}
.help-risk-grid>section.warning{border-color:#e1c07e;background:#fff9ea}
.help-risk-grid>section.warning h2{color:#794c05}
.help-steps-section{display:grid;gap:14px}
.help-step{display:grid;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}
.help-step-copy{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
.help-step-number{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-stadium);color:#fff;background:var(--blue);font-size:var(--fs-body);font-weight:700}
.help-step h3{margin:4px 0 6px;color:var(--navy);font-size:var(--fs-lead)}
.help-step p{margin:0}
.help-inline-warning{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid #dfba73;border-radius:var(--r-surface);background:#fff7e5;color:#6e4709;font-size:var(--fs-small);line-height:var(--lh-small)}
.help-step-result{margin-top:10px!important;padding:10px 12px;border-left:4px solid var(--green);background:var(--greensoft)}
.help-step-figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
.help-step-figure a{display:block;border-radius:var(--r-surface);overflow:hidden;background:#d9e3ec}
.help-step-figure img{display:block;width:100%;max-height:680px;object-fit:contain;background:#fff}
.help-step-figure figcaption{padding:10px 6px 2px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.help-step-figure figcaption strong{color:var(--ink)}
.help-step-figure figcaption span{display:block;margin-top:2px;font-size:var(--fs-small)}
.help-symptom-list{display:grid;gap:8px}
.help-symptom-list article{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
.help-symptom-list h3{margin:0 0 6px;color:var(--ink);font-size:var(--fs-body)}
.help-symptom-list p{margin:0}
.help-related-section ul{display:grid;gap:10px;list-style:none;padding:0}
.help-related-section li{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
.help-related-section a{color:var(--blue);font-weight:700;cursor:pointer}
.help-related-section span{font-size:var(--fs-small)}
.help-article-navigation{display:grid;gap:12px;padding-top:4px}
.help-article-navigation>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-article-navigation>div>a{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);cursor:pointer}
.help-article-navigation>div>a:last-child{text-align:right}
.help-article-navigation small{color:var(--muted)}
.help-article-navigation strong{color:var(--blue)}
.help-article-navigation>p{display:flex;justify-content:center;gap:18px;margin:0}
.help-article-navigation>p a{color:var(--blue);font-weight:700;cursor:pointer}

html[data-theme="dark"] .help-hero-v2,
html[data-theme="dark"] .help-search-form,
html[data-theme="dark"] .help-category-card-v2,
html[data-theme="dark"] .help-article-card-v2,
html[data-theme="dark"] .help-category-header-v2,
html[data-theme="dark"] .help-empty-category,
html[data-theme="dark"] .help-no-results-v2,
html[data-theme="dark"] .help-search-results-header,
html[data-theme="dark"] .help-article-header-v2,
html[data-theme="dark"] .help-article-overview-grid>section,
html[data-theme="dark"] .help-outcome-grid>section,
html[data-theme="dark"] .help-risk-grid>section,
html[data-theme="dark"] .help-before-begin,
html[data-theme="dark"] .help-troubleshooting-section,
html[data-theme="dark"] .help-related-section,
html[data-theme="dark"] .help-step,
html[data-theme="dark"] .help-article-navigation>div>a{color:var(--ink);background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .help-hero-v2{background:linear-gradient(135deg,var(--surface),var(--surface-soft))}
html[data-theme="dark"] .help-search-controls input,
html[data-theme="dark"] .help-search-controls select{color:var(--input-ink);background:var(--input-bg);border-color:var(--line)}
html[data-theme="dark"] .help-release-state{background:color-mix(in srgb,var(--blue) 19%,var(--surface))}
html[data-theme="dark"] .help-release-state span{color:var(--muted)}
html[data-theme="dark"] .help-status-badge.accepted{color:#baf4cf;background:#194d33}
html[data-theme="dark"] .help-status-badge.pending{color:#ffe1a3;background:#68480f}
html[data-theme="dark"] .help-status-badge.legacy{color:#f2d7a9;background:#5b4221}
html[data-theme="dark"] .help-legacy-notice,
html[data-theme="dark"] .help-verification-notice:not(.accepted),
html[data-theme="dark"] .help-risk-grid>section.warning,
html[data-theme="dark"] .help-inline-warning{background:#493610;border-color:#8d6a2e;color:#ffe1a3}
html[data-theme="dark"] .help-legacy-notice h2,
html[data-theme="dark"] .help-legacy-notice p,
html[data-theme="dark"] .help-verification-notice:not(.accepted) strong,
html[data-theme="dark"] .help-verification-notice:not(.accepted) p,
html[data-theme="dark"] .help-risk-grid>section.warning h2{color:#ffe1a3}
html[data-theme="dark"] .help-verification-notice.accepted{background:#163f2b;border-color:#3b9b68}
html[data-theme="dark"] .help-verification-notice.accepted strong,html[data-theme="dark"] .help-verification-notice.accepted p{color:#baf4cf}
html[data-theme="dark"] .help-step-figure,
html[data-theme="dark"] .help-symptom-list article,
html[data-theme="dark"] .help-related-section li,
html[data-theme="dark"] .help-article-header-v2>aside{background:var(--surface-soft);border-color:var(--line)}

@media(max-width:1250px){.help-category-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.help-hero-v2,.help-search-results-header{grid-template-columns:1fr}.help-search-results-header .help-search-form{width:100%}}
@media(max-width:900px){.help-category-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.help-article-grid-v2,.help-search-results,.help-article-overview-grid,.help-outcome-grid,.help-risk-grid,.help-article-header-v2{grid-template-columns:1fr}.help-search-controls{grid-template-columns:1fr 1fr}.help-search-controls input{grid-column:1/-1}}
@media(max-width:620px){.help-hero-v2{padding:18px}.help-category-grid-v2,.help-article-grid-v2,.help-search-results{grid-template-columns:1fr}.help-search-controls{grid-template-columns:1fr}.help-search-controls input{grid-column:auto}.help-section-heading-v2,.help-legacy-notice,.help-article-card-heading,.help-card-footer{align-items:flex-start;flex-direction:column}.help-article-navigation>div{grid-template-columns:1fr}.help-article-navigation>div>a:last-child{text-align:left}.help-article-navigation>p{align-items:flex-start;flex-direction:column;gap:8px}.help-step{padding:14px}.help-step-copy{grid-template-columns:32px 1fr}.help-step-number{width:30px;height:30px}.help-status-badge{max-width:none}}

/* v0.23.36 - Help media accuracy, theme matching, cropping, and readability */
.help-step-copy>div>p{
 /* Help articles are long-form reading, not app chrome: deliberately larger and
    more generously leaded than the UI scale. Pinned by
    tests/test_v02336_help_media_typography.mjs - do not fold into --lh-*. */
 font-size:max(1.04rem,var(--ui-copy, 1.04rem));
 line-height:1.76;
}
.help-step-result{
 font-size:max(.9rem,var(--ui-copy, .9rem));
 line-height:calc(var(--ui-copy) + 8px);
}
.help-inline-warning{
 gap:11px;
 margin-top:13px;
 padding:13px 15px;
 border-width:2px;
 border-left-width:6px;
 font-size:max(.9rem,var(--ui-copy, .9rem));
 line-height:calc(var(--ui-copy) + 8px);
 font-weight:600;
}
.help-inline-warning::before{
 content:"⚠";
 flex:0 0 auto;
 font-size:var(--fs-lead);
 line-height:calc(var(--ui-table) + 7px);
}
.help-inline-warning strong{
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:.035em;
}
.help-step-figure{
 width:min(100%,1320px);
 justify-self:center;
 overflow:hidden;
}
.help-screenshot-link{display:block;border-radius:var(--r-surface);overflow:hidden;background:var(--soft)}
.help-step-figure img{
 width:100%;
 max-height:min(54vh,540px);
 object-fit:contain;
 object-position:center;
 background:var(--surface);
}
.help-step-figure figcaption{
 padding:11px 7px 3px;
 font-size:max(.84rem,calc(var(--ui-copy, .84rem) * .94));
 line-height:calc(var(--ui-copy) + 8px);
}
.help-step-figure figcaption span{
 margin-top:4px;
 font-size:max(.76rem,calc(var(--ui-copy, .76rem) * .86));
 line-height:calc(var(--ui-copy) + 8px);
}
html[data-theme="dark"] .help-inline-warning{
 border-color:#d99a2c;
 background:#4a350d;
 color:#ffe5a6;
}
@media(max-width:900px){
 .help-step-figure{width:100%}
 .help-step-figure img{max-height:min(52vh,460px)}
}

/* v0.23.43 - responsive Help article and screenshot containment */
.help-v2,.help-article-page,.help-article-page>*,
.help-article-header-v2>*,.help-article-overview-grid>*,.help-outcome-grid>*,.help-risk-grid>*,
.help-steps-section,.help-step,.help-step-copy,.help-step-copy>div,.help-step-figure,.help-screenshot-link{
 min-width:0;
 max-width:100%;
}
.help-article-page :is(h1,h2,h3,p,li,strong,span,a){overflow-wrap:anywhere}
.help-article-header-v2{grid-template-columns:minmax(0,1.25fr) minmax(0,.55fr)}
.help-step-figure{width:100%;justify-self:stretch}
.help-screenshot-link{width:100%}
.help-step-figure img{width:100%;max-width:100%;height:auto}
@media(max-width:1100px){
 .help-article-header-v2,.help-article-overview-grid,.help-outcome-grid,.help-risk-grid{grid-template-columns:1fr}
}

/* v0.23.38 - customer and sale Help articles and accepted Windows-PC status */


/* v0.23.39 - separate vehicle inventory status from saved sale-record state */

/* v0.23.40 - verified Users & Security Help article and current Light/Dark media */
/* v0.23.41 - verified Update AutoSteward Help article and current Light/Dark media */
html[data-theme="dark"] .financial-state-none{
 background:#243346;
 color:#d7e2ed;
 border:1px solid #536a82;
}
html[data-theme="dark"] .financial-detail-status-values small{color:var(--muted)!important}

/* ---------------------------------------------------------------------------
 * Global search (Ctrl+K) - web/global-search.js
 *
 * A command palette rather than a per-screen filter box: dealers look for a car or a
 * person, not for a screen, so the search has to be reachable from wherever they are.
 * Built on the existing tokens so all twelve design presets and both appearances
 * restyle it without extra rules.
 * ------------------------------------------------------------------------- */
.header-search-button{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--muted);font-size:var(--fs-body);cursor:pointer;transition:border-color .15s ease}
.header-search-button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--surface-strong)}
.header-search-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.header-search-icon{font-size:var(--fs-lead);line-height:1}
.header-search-button kbd{padding:1px 6px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);font-family:inherit;font-size:var(--fs-small);color:var(--muted);letter-spacing:.02em}

.gs-overlay{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;justify-content:center;padding:11vh 16px 16px;background:color-mix(in srgb,#0b1a2b 58%,transparent);backdrop-filter:blur(2px)}
.gs-overlay.open,.gs-overlay.closing{display:flex}
body.gs-lock{overflow:hidden}
.gs-panel{display:flex;flex-direction:column;width:min(660px,100%);max-height:74vh;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}

/* Motion.
 *
 * Everything here animates OPACITY and TRANSFORM only, and every keyframe writes a literal
 * value. That is not a stylistic preference: Chrome does not re-run an animation or transition
 * when a var() inside the animated property changes, so anything driven off --surface, --ink or
 * --accent freezes at its old paint the moment the design picker swaps a token. That bug has
 * already shipped twice in this file's history (the white header search button in dark, and the
 * frozen body colour) - see the note on .header-search-button. Opacity and transform are
 * compositor properties with no token in them, so they are safe and they are also the two the
 * browser can animate without laying the page out again.
 *
 * The palette opens like something arriving rather than something appearing: the scrim fades,
 * the panel drops the last few pixels and settles slightly past its resting scale, and the
 * result groups follow a beat behind it in sequence. Closing is deliberately faster than
 * opening - waiting on an exit animation is the one place motion reads as lag. */
/* TRANSLATION ONLY. No zoom, and no scaling transform, anywhere in this block.
 *
 * tests/test_v02318_scale_contract.mjs forbids both below the four-level-application-scale
 * marker, and it is right to: the four text-size settings must resize real tokens rather than
 * fake it by scaling the page, and that guard is what stops anyone taking the shortcut. A modal
 * entry animation is not page scaling — but the rule is a blunt substring check by design, and
 * weakening a safety test to land an animation is the wrong trade. The settle below is a small
 * overshoot on the Y axis instead. It reads as arrival for the same reason, and costs the
 * contract nothing.
 *
 * (Watch the wording here too: a comment quoting the banned property trips the same check.) */
@keyframes gs-scrim{from{opacity:0}to{opacity:1}}
@keyframes gs-panel-in{from{opacity:0;transform:translate3d(0,-18px,0)}
  62%{opacity:1;transform:translate3d(0,3px,0)}
  to{opacity:1;transform:none}}
@keyframes gs-panel-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes gs-rise{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}
/* The magnifier arrives a fraction after the panel lands, so the eye is taken to the field it is
 * meant to type in rather than to the middle of an empty list. */
@keyframes gs-icon-in{from{opacity:0;transform:translate3d(-6px,0,0) rotate(-18deg)}to{opacity:1;transform:none}}

.gs-overlay.open{animation:gs-scrim .15s ease-out both}
.gs-overlay.closing{animation:gs-scrim .12s ease-in reverse both;pointer-events:none}
.gs-overlay.open .gs-panel{animation:gs-panel-in .26s cubic-bezier(.22,.92,.3,1) both}
.gs-overlay.closing .gs-panel{animation:gs-panel-out .12s ease-in both}
.gs-overlay.open .gs-icon{animation:gs-icon-in .3s cubic-bezier(.22,.92,.3,1) .06s both}
.gs-overlay.open .gs-foot{animation:gs-rise .24s ease-out .1s both}
/* Staggered only on the FIRST paint after opening. Re-running this on every keystroke would
 * make the list flicker while someone types, which is the opposite of feeling responsive - so
 * app.js drops .gs-entering as soon as the query changes. Five steps is enough: the groups are
 * Vehicles, Customers, Deals, Leads and Screens, and a sixth delay would be dead code. */
.gs-overlay.open .gs-entering .gs-group,.gs-overlay.open .gs-entering .gs-hint{animation:gs-rise .26s ease-out both}
.gs-overlay.open .gs-entering .gs-group:nth-child(1){animation-delay:.05s}
.gs-overlay.open .gs-entering .gs-group:nth-child(2){animation-delay:.09s}
.gs-overlay.open .gs-entering .gs-group:nth-child(3){animation-delay:.13s}
.gs-overlay.open .gs-entering .gs-group:nth-child(4){animation-delay:.17s}
.gs-overlay.open .gs-entering .gs-group:nth-child(n+5){animation-delay:.21s}
/* Row selection moves with the cursor instead of jumping between rows. Transform only, so the
 * accent border and fill still repaint instantly when a design is previewed. */
.gs-row{transition:transform .12s ease-out}
.gs-row.active{transform:translate3d(3px,0,0)}

@media(prefers-reduced-motion:reduce){
  .gs-overlay.open,.gs-overlay.closing,.gs-overlay.open .gs-panel,.gs-overlay.closing .gs-panel,
  .gs-overlay.open .gs-icon,.gs-overlay.open .gs-foot,
  .gs-overlay.open .gs-entering .gs-group,.gs-overlay.open .gs-entering .gs-hint{animation:none}
  .gs-row{transition:none}
  .gs-row.active{transform:none}
}
.gs-inputrow{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.gs-icon{font-size:var(--fs-h3);color:var(--muted);line-height:1}
#globalSearchInput{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font-size:var(--fs-lead);padding:2px 0}
#globalSearchInput:focus{outline:none}
.gs-count{font-size:var(--fs-small);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.gs-close{padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--muted);font-size:var(--fs-small);cursor:pointer}
.gs-close:hover{color:var(--ink)}

.gs-results{flex:1 1 auto;overflow-y:auto;padding:8px 0}
.gs-hint{margin:0;padding:20px 18px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.gs-group{padding:6px 0}
.gs-group h3{display:flex;align-items:center;gap:8px;margin:0;padding:6px 16px;font-size:var(--fs-small);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gs-more{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;font-size:var(--fs-small)}
.gs-group ul{margin:0;padding:0;list-style:none}
.gs-row{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 16px;border:0;border-left:2px solid transparent;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
/* Selection is shown with a border and a fill, not colour alone, so it stays legible in
 * every preset and for anyone who cannot rely on hue. */
.gs-row.active{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,var(--surface))}
.gs-row-title{font-size:var(--fs-body);font-weight:600}
.gs-row-meta{font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}
.gs-row mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:var(--r-control);padding:0 1px}

.gs-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-strong);font-size:var(--fs-small);color:var(--muted)}
.gs-foot kbd{display:inline-block;min-width:17px;margin-right:4px;padding:1px 4px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);font-family:inherit;font-size:var(--fs-small);text-align:center}

@media(max-width:640px){
  .gs-overlay{padding:6vh 10px 10px}
  .gs-panel{max-height:84vh}
  .header-search-button span:not(.header-search-icon),.header-search-button kbd{display:none}
  .gs-foot{display:none}
}

/* A readiness row that needs work gets a visible edge and a button. The old rows were labels
 * only, so a dealer read "Compliance Needs Review" and had nowhere to go - the panel described
 * problems without offering to fix any of them. */
.readiness-row.needs-action{border-left:3px solid color-mix(in srgb,#9a2617 60%,var(--line));padding-left:10px}
.readiness-row .readiness-fix{margin-left:auto;padding:4px 10px;border:1px solid var(--accent);border-radius:var(--r-control);background:var(--accent);color:var(--accent-ink,#fff);font-size:var(--fs-small);font-weight:600;white-space:nowrap;cursor:pointer}
.readiness-row .readiness-fix:hover{filter:brightness(1.07)}
.readiness-row .readiness-fix:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------------------
 * Roles & Permissions (web/permissions-ui.js)
 *
 * The same authorization model as the partner's tree, rebuilt on AutoSteward's design system so it
 * inherits all twelve presets and both appearances without a single hard-coded brand colour:
 * every rule below consumes existing tokens. Only two literal colours appear, for the universal
 * allowed/denied signals, and both are blended against the surface so they sit correctly in dark
 * mode too.
 *
 * PERFORMANCE. The list is 46 rows and repaints on every keystroke in the search box, so there
 * are no shadows, filters, or transitions on the rows themselves - only on the handful of
 * controls a pointer can actually rest on. Row state is carried by borders and background tints,
 * which composite without re-rasterising the text.
 * ------------------------------------------------------------------------- */
.pui{display:flex;flex-direction:column;gap:14px}
.pui-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pui-head h2{margin:0;font-size:var(--fs-h2);color:var(--navy)}
.pui-head h2{margin:0;color:var(--ink)}
.pui-head p{margin:.3rem 0 0;color:var(--muted);font-size:var(--fs-body);max-width:56ch}
.pui-search{display:flex;align-items:center;gap:8px;flex:0 1 340px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.pui-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.pui-search-icon{color:var(--muted);font-size:var(--fs-lead);line-height:1}
.pui-search input{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font-size:var(--fs-body)}
.pui-search input:focus{outline:none}

.pui-summary{display:flex;gap:10px;flex-wrap:wrap}
.pui-summary p{display:flex;flex-direction:column;gap:1px;margin:0;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);min-width:104px}
.pui-summary strong{font-size:var(--fs-h3);color:var(--ink);font-variant-numeric:tabular-nums;line-height:var(--lh-h3)}
.pui-summary span{font-size:var(--fs-small);color:var(--muted);letter-spacing:.02em}
.pui-summary p.accent{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.pui-summary p.accent strong{color:var(--accent)}
.pui-summary p.risk strong{color:#9a2617}

/* Two panes on a real screen, stacked on a small one. */
.pui-body{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:14px;align-items:start}
.pui-rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.pui-rail-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong)}
.pui-rail-tabs button{flex:1 1 0;padding:6px 10px;border:0;border-radius:var(--r-control);background:transparent;color:var(--muted);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.pui-rail-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pui-rail-list{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto}
.pui-entity{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid transparent;border-left:3px solid transparent;border-radius:var(--r-surface);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.pui-entity:hover{background:var(--surface-strong)}
.pui-entity.active{border-color:var(--line);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.pui-entity-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pui-entity-main strong{font-size:var(--fs-body);font-weight:600}
.pui-entity-sub{font-size:var(--fs-small);color:var(--muted)}
.pui-entity-sub.changed{color:var(--accent);font-weight:600}
.pui-tag{padding:1px 6px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface-strong);font-size:var(--fs-micro);font-weight:600;color:var(--muted);letter-spacing:.02em}
.pui-tag.custom{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}
.pui-tag.role{border-color:transparent;background:color-mix(in srgb,var(--ink) 8%,var(--surface))}
.pui-newrole{align-self:flex-start}

.pui-editor{display:flex;flex-direction:column;gap:14px;min-width:0}
.pui-empty{margin:0;padding:24px 18px;border:1px dashed var(--line);border-radius:var(--r-surface);color:var(--muted);font-size:var(--fs-body);text-align:center}
.pui-lock{margin:0;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.pui-group{display:flex;flex-direction:column;gap:6px}
.pui-group h4{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font-size:var(--fs-small);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pui-group h4 span{padding:0 6px;border:1px solid var(--line);border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:600;letter-spacing:0;color:var(--muted)}

/* One row. Deliberately no transition or shadow - 46 of these repaint together. */
.pui-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface)}
.pui-row.on{border-left-color:color-mix(in srgb,#0d7a4a 55%,var(--line))}
.pui-row.user:not(.on){background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.pui-row.changed{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.pui-row.locked{opacity:.72}
.pui-check{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.pui-row-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.pui-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pui-row-head strong{font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.pui-row-head code{font-size:var(--fs-small);color:var(--muted);font-family:var(--font-code)}
.pui-row-desc{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.pui-row-source{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.pui-row-source.grant{color:#0d7a4a}
.pui-row-source.denial,.pui-row-source.denial-over-role{color:#9a2617}
.pui-row-source.administrator{color:var(--accent)}

/* High risk is stated in the list, before the choice - not in a dialog after it. */
.pui-risk{padding:1px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;color:#9a2617;border:1px solid color-mix(in srgb,#9a2617 35%,var(--line));background:color-mix(in srgb,#9a2617 9%,var(--surface))}

/* Inherit / Allow / Block. */
.pui-segs{display:flex;gap:2px;flex:0 0 auto;padding:2px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong)}
.pui-seg{padding:4px 10px;border:0;border-radius:var(--r-control);background:transparent;color:var(--muted);font-size:var(--fs-small);font-weight:600;cursor:pointer;white-space:nowrap}
.pui-seg:hover{color:var(--ink)}
.pui-seg.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pui-seg.on.allow{background:color-mix(in srgb,#0d7a4a 16%,var(--surface));color:#0d7a4a}
.pui-seg.on.block{background:color-mix(in srgb,#9a2617 14%,var(--surface));color:#9a2617}
.pui-seg:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Unsaved changes are named before they are saved, never applied on click. */
.pui-diff{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--accent);border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.pui-diff-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pui-diff-head strong{font-size:var(--fs-body);color:var(--ink)}
.pui-diff-actions{display:flex;gap:8px}
.pui-diff-group h5{margin:0 0 4px;font-size:var(--fs-small);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pui-diff-group ul{margin:0;padding-left:18px;font-size:var(--fs-body);color:var(--ink)}
.pui-diff-group li{margin:1px 0}
.pui-diff-group.add h5{color:#0d7a4a}
.pui-diff-group.remove h5{color:#9a2617}

.pui-confirm{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid color-mix(in srgb,#9a2617 40%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,#9a2617 7%,var(--surface))}
.pui-confirm p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.pui-confirm code{padding:1px 6px;border-radius:var(--r-control);background:var(--surface-strong);font-size:var(--fs-small);font-weight:700}
.pui-confirm input{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font-size:var(--fs-body)}
.pui-confirm input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

@media(max-width:900px){
  .pui-body{grid-template-columns:1fr}
  .pui-rail{position:static}
  .pui-rail-list{max-height:none}
  .pui-row{flex-wrap:wrap}
  .pui-segs{margin-left:auto}
}

/* Theme-aware allowed/denied signals.
 *
 * The first cut used #0d7a4a and #9a2617 literally. Both are dark by design so they read on a
 * white card - and both collapse to roughly 1.5:1 against a dark surface, which is unreadable.
 * A permission screen where "High risk" is the illegible part is worse than one with no badge.
 *
 * These two tokens carry the meaning; the dark variants are lifted until they clear WCAG AA on
 * the dark surface. Everything above consumes them, so the signals stay correct in all twelve
 * presets and both appearances. */
/* --pui-accent-text exists for the same reason. --accent is chosen to work as a BUTTON FILL, where
 * the text sits on it; used as small text ON a dark surface it measured 3.66:1, which fails AA.
 * Lightening it only for dark keeps the accent identity of all ten presets while making the words
 * readable. Measured with web/harness-audit.js across every preset in both appearances. */
/* --pui-accent-text and --pui-support exist for the same reason as the two above.
 *
 * --accent is chosen to work as a BUTTON FILL, with text sitting on top of it. Used as small text
 * it fails AA in both directions: too light on a dark surface (3.66:1) and too light on its own
 * pale tint (4.48:1). --muted has the matching problem - it clears AA on plain white but drops to
 * 4.38:1 on the soft tinted surfaces these components use.
 *
 * Both are nudged rather than replaced, so every preset keeps its own hue. Measured with
 * web/harness-audit.js on a fresh page load per theme - the numbers a theme TOGGLE produces are
 * stale and were wrong the first time round. */
:root{--pui-ok:#0a6640;--pui-risk:#9a2617;
 --pui-accent-text:color-mix(in srgb,var(--accent) 84%,#000000);
 --pui-support:color-mix(in srgb,var(--muted) 74%,var(--ink))}
@media (prefers-color-scheme: dark){:root{--pui-ok:#4ade9a;--pui-risk:#ff8f7a;
 --pui-accent-text:color-mix(in srgb,var(--accent) 55%,#ffffff);--pui-support:var(--muted)}}
:root[data-theme="dark"]{--pui-ok:#4ade9a;--pui-risk:#ff8f7a;
 --pui-accent-text:color-mix(in srgb,var(--accent) 55%,#ffffff);--pui-support:var(--muted)}
:root[data-theme="light"]{--pui-ok:#0a6640;--pui-risk:#9a2617;
 --pui-accent-text:color-mix(in srgb,var(--accent) 84%,#000000);
 --pui-support:color-mix(in srgb,var(--muted) 74%,var(--ink))}
.pui-entity-sub.changed{color:var(--pui-accent-text)}
.pui-summary p.accent strong{color:var(--pui-accent-text)}
.auction-card-perk{color:var(--pui-accent-text)}
/* Small supporting copy that sits on a tinted or soft surface rather than plain white. */
.pui-entity-sub,.pui-row-desc,.pui-row-source,.auction-src,.auction-save-note,.auction-drop-sub,
.auction-total span,.auction-capture-privacy,.auction-caution p,.pui-tag,.pui-group h4 span,
.pui-summary span,.auction-review-photos{color:var(--pui-support)}

.pui-summary p.risk strong{color:var(--pui-risk)}
.pui-row.on{border-left-color:color-mix(in srgb,var(--pui-ok) 55%,var(--line))}
.pui-row-source.grant{color:var(--pui-ok)}
.pui-row-source.denial,.pui-row-source.denial-over-role{color:var(--pui-risk)}
.pui-risk{color:var(--pui-risk);border-color:color-mix(in srgb,var(--pui-risk) 40%,var(--line));background:color-mix(in srgb,var(--pui-risk) 12%,var(--surface))}
.pui-seg.on.allow{background:color-mix(in srgb,var(--pui-ok) 16%,var(--surface));color:var(--pui-ok)}
.pui-seg.on.block{background:color-mix(in srgb,var(--pui-risk) 14%,var(--surface));color:var(--pui-risk)}
.pui-diff-group.add h5{color:var(--pui-ok)}
.pui-diff-group.remove h5{color:var(--pui-risk)}
.pui-confirm{border-color:color-mix(in srgb,var(--pui-risk) 45%,var(--line));background:color-mix(in srgb,var(--pui-risk) 9%,var(--surface))}

/* A readiness row is a 3-column grid (icon / label / value). Adding the Fix button made a
 * FOURTH child, which grid pushed onto an implicit second row - so every action button landed
 * under its own label looking broken. Rows that carry an action get a fourth column. */
.readiness-row.needs-action{grid-template-columns:27px minmax(0,1fr) auto auto}
.readiness-row .readiness-fix{margin-left:0;justify-self:end}

/* Design-matched status marks (web/status-icons.js), replacing the three clip-art .webp files.
 * They inherit colour from currentColor, so the theme-aware signal tokens drive them and they
 * stay legible in dark mode - which the raster versions never did. */
.dms-status-ico{display:block;width:20px;height:20px;flex:0 0 auto}
.readiness-row .dms-status-ico{color:var(--muted)}
.readiness-row .dms-status-ico.is-ok{color:var(--pui-ok)}
.readiness-row .dms-status-ico.is-blocked{color:var(--pui-risk)}
/* The attention state renders the design's own warning glyph via DmsIcon. */
.readiness-row .dms-ico,.readiness-row .dms-ico-raster{width:20px;height:20px;color:var(--pui-risk)}

/* ---------------------------------------------------------------------------
 * Quick Fix panel (web/quick-fix.js) - resolve a warning without leaving the dashboard.
 * Consumes existing tokens only, so it follows every design preset and both appearances.
 * ------------------------------------------------------------------------- */
.qf-backdrop{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,#0b1a2b 58%,transparent);backdrop-filter:blur(2px)}
body.qf-lock{overflow:hidden}
.qf-panel{display:flex;flex-direction:column;gap:14px;width:min(460px,100%);padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}
.qf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qf-eyebrow{margin:0;font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qf-head h2{margin:.2rem 0 0;font-size:var(--fs-lead);color:var(--ink)}
.qf-close{padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--muted);cursor:pointer;line-height:1}
.qf-close:hover{color:var(--ink)}
.qf-issue{margin:0;padding:10px 12px;border-left:3px solid var(--pui-risk);border-radius:var(--r-surface);background:var(--surface-strong);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.qf-body{display:flex;flex-direction:column;gap:10px}
.qf-field{display:flex;flex-direction:column;gap:4px}
.qf-field>span{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.qf-field input,.qf-field select{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-lead)}
.qf-field input:focus-visible,.qf-field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.qf-help{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.qf-error{margin:0;padding:8px 12px;border-radius:var(--r-surface);font-size:var(--fs-body);color:var(--pui-risk);border:1px solid color-mix(in srgb,var(--pui-risk) 35%,var(--line));background:color-mix(in srgb,var(--pui-risk) 9%,var(--surface))}
.qf-blocked{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.qf-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.qf-spacer{flex:1 1 auto}
.qf-inline{white-space:nowrap}
@media(max-width:640px){.qf-actions{flex-direction:column;align-items:stretch}.qf-spacer{display:none}}

/* Roles & Permissions - the pieces the screen controller adds around the pure renderer.
 * Colour comes from the design tokens so all twelve presets inherit this for free; nothing here
 * hard-codes a palette. */
.pui-alert{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.pui-alert.error{border-left-color:var(--pui-risk);background:color-mix(in srgb,var(--pui-risk) 8%,var(--surface))}
.pui-alert strong{font-weight:700}

.pui-newrole-form{margin:0 0 14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.pui-newrole-form h4{margin:0 0 4px;font-size:var(--fs-lead);color:var(--ink)}
.pui-newrole-form p{margin:0 0 12px;font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-body);max-width:64ch}
.pui-newrole-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.pui-newrole-grid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small);font-weight:600;color:var(--muted);letter-spacing:.02em}
.pui-newrole-grid input,.pui-newrole-grid select{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);font-weight:400}
.pui-newrole-grid input:focus,.pui-newrole-grid select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.pui-newrole-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.pui-role-footer{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pui-role-footer .pui-lock{border-left-color:var(--muted)}

/* The role summary table on Users & Security. Counts are numbers, so they are tabular and right
 * aligned - a column of counts that jitters is a column nobody scans. */
.security-role-table td.num,.security-role-table th:nth-child(3),.security-role-table th:nth-child(4){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.security-role-table td.num{color:var(--muted);font-size:var(--fs-body)}

/* Marketing - the worklist that replaced the Listing Writer.
 * Two panes: what still needs doing on the left, the selected car on the right. Colour comes from
 * the design tokens so all ten presets inherit it; the support tokens keep small copy at AA. */
.mk-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);margin-bottom:16px}
.mk-summary h2{margin:.25rem 0 0;font-size:var(--fs-lead);color:var(--ink);max-width:60ch;line-height:var(--lh-lead)}
.mk-counts{display:flex;gap:12px}
.mk-counts p{display:flex;flex-direction:column;margin:0;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);min-width:96px}
.mk-counts strong{font-size:var(--fs-h2);color:var(--ink);font-variant-numeric:tabular-nums;line-height:var(--lh-h2)}
.mk-counts span{font-size:var(--fs-small);color:var(--pui-support)}
.mk-counts p.warn{border-color:color-mix(in srgb,var(--pui-risk) 36%,var(--line))}
.mk-counts p.warn strong{color:var(--pui-risk)}

.mk-body{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:16px;align-items:start}
.mk-list{display:flex;flex-direction:column;gap:6px;max-height:72vh;overflow-y:auto;padding-right:2px}
.mk-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.mk-row:hover{background:var(--surface-strong)}
.mk-row.selected{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.mk-row-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.mk-row-main strong{font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-row-main small{font-size:var(--fs-small);color:var(--pui-support)}
.mk-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-state{padding:1px 8px;border-radius:var(--r-stadium);font-size:var(--fs-small);font-weight:700;letter-spacing:.02em;border:1px solid var(--line)}
.mk-state.ready{color:var(--pui-ok);border-color:color-mix(in srgb,var(--pui-ok) 36%,var(--line))}
.mk-state.blocked{color:var(--pui-risk);border-color:color-mix(in srgb,var(--pui-risk) 36%,var(--line))}
.mk-state.listed{color:var(--pui-support)}
.mk-age{font-size:var(--fs-small);color:var(--pui-support)}
.mk-age.old{color:var(--pui-risk);font-weight:600}
.mk-age.unknown{font-style:italic}

.mk-detail{display:flex;flex-direction:column;gap:16px;min-width:0}
.mk-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mk-detail-head h2{margin:0;font-size:var(--fs-h3);color:var(--ink)}
.mk-detail-head p{margin:.25rem 0 0;font-size:var(--fs-body);color:var(--pui-support)}
.mk-note{margin:0;padding:10px 14px;border-radius:var(--r-surface);background:var(--surface-soft);color:var(--pui-support);font-size:var(--fs-body)}

.mk-blockers{padding:14px 16px;border:1px solid color-mix(in srgb,var(--pui-risk) 30%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 5%,var(--surface))}
.mk-blockers h3{margin:0 0 8px;font-size:var(--fs-body);color:var(--ink)}
.mk-blockers ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}

.mk-copy{padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.mk-copy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.mk-copy-head h3{margin:0;font-size:var(--fs-lead);color:var(--ink)}
.mk-source{margin:.25rem 0 0;font-size:var(--fs-small);color:var(--pui-support)}
.mk-source.ai{color:var(--pui-accent-text);font-weight:600}
.mk-source-hint{font-size:var(--fs-small);color:var(--pui-support);max-width:34ch;text-align:right;line-height:var(--lh-small)}
.mk-copy textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);resize:vertical}
.mk-copy textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}

.mk-platforms{padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.mk-platforms h3{margin:0 0 6px;font-size:var(--fs-lead);color:var(--ink)}
.mk-platform{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong)}
.mk-platform>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;font-size:var(--fs-body);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
/* THE LISTING-SITE MARKS. Same neutral white tile as the payment rows — a full-colour logo drawn
   for a light background, on a tile that stays white in both appearances, because every one of
   these brands' guidelines assumes that and a dark tile would need the reversed variant of each.
   The label is TEXT inside the tile and is what shows when there is no artwork, so a missing asset
   degrades to a clean name instead of a broken-image icon. */
.mk-mark{flex:0 0 auto;display:grid;place-items:center;width:104px;height:34px;padding:4px 8px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;color:#0b2745;
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;text-align:center;
  background-repeat:no-repeat;background-position:center}
/* CarGurus ships its wordmark centred in a big square with a lot of air around it, so it is scaled
   by WIDTH and generously — at `contain` it renders as a sliver in a 34px-tall tile. */
.mk-mark[data-mk-id="cargurus"]{background-image:url("assets/marketplace/cargurus.png");
  background-size:96% auto;color:transparent}
/* Craigslist is a 16:9 wordmark with its own margin already, so it takes a smaller share of the
   tile than CarGurus does — matching the scales by eye rather than by number is what stops one
   looking enormous beside the other. (The first file supplied for this was unusable: a
   fake-transparency JPEG with the checkerboard baked in as real pixels.) */
.mk-mark[data-mk-id="craigslist"]{background-image:url("assets/marketplace/craigslist.png");
  background-size:82% auto;color:transparent}
/* Facebook is an ICON, not a wordmark, and that changes the sizing rule entirely. Their official
   Primary Logo is the round blue "f" filling a square canvas edge to edge with no air, so the
   percentage-of-WIDTH treatment the two wordmarks above use would scale it to ~100px inside a 34px
   tile and crop it to a plain blue band. Sized by HEIGHT instead, which is the only dimension an
   icon should be matched on.
   The pack's Secondary Logo is deliberately NOT used: it is white on transparent, drawn for dark
   backgrounds, and this tile is white in both appearances — it would render as an empty box. */
.mk-mark[data-mk-id="facebook"]{background-image:url("assets/marketplace/facebook.png");
  background-size:auto 22px;color:transparent}
/* The same three marks on the AI panel's "Post this car to" row, where they were plain text
   buttons. One tile definition, two placements: a dealer should recognise Facebook the same way on
   both screens, and a second set of rules is a second thing to get out of step. The button around
   it supplies its own padding, so the tile drops its border and sits flush. */
.ain-post-btn{padding:4px 6px}
.mk-mark-sm{width:88px;height:26px;border:0;background-color:#fff}
.mk-mark-sm[data-mk-id="facebook"]{background-size:auto 18px}
.mk-platform>summary>small{margin-left:auto}
.mk-platform>summary::-webkit-details-marker{display:none}
.mk-platform>summary small{font-weight:400;font-size:var(--fs-small);color:var(--pui-support)}
.mk-platform-body{padding:0 14px 14px}
.mk-platform-note{margin:0 0 10px;font-size:var(--fs-small);color:var(--pui-support);line-height:var(--lh-small)}
.mk-fields{display:flex;flex-direction:column;gap:6px}
.mk-field{display:grid;grid-template-columns:minmax(96px,148px) minmax(0,1fr) auto;gap:10px;align-items:center}
.mk-field-label{font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
/* Short values (Year, Make, Price) stay on one line with an ellipsis. The DESCRIPTION does not:
 * measured at 1366px it ran 1,030px past its box, so the dealer could read about a line and a half
 * of the text they were about to post to Facebook Marketplace. Copy still worked — but reviewing
 * the listing before it goes out is what this screen is FOR. Long values now wrap and scroll,
 * capped so one description cannot push the rest of the platform's fields off the screen. */
.mk-field-value{padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}
.mk-field-value.is-long{max-height:calc((var(--ui-copy) + 8px) * 6);overflow:auto;text-overflow:clip;white-space:pre-wrap;overflow-wrap:anywhere;line-height:calc(var(--ui-copy) + 8px)}
.mk-platform-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

@media (max-width:900px){
 .mk-body{grid-template-columns:minmax(0,1fr)}
 .mk-list{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:6px}
 .mk-row{min-width:200px}
 .mk-field{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "value copy"}
 .mk-field-label{grid-area:label}
 .mk-source-hint{text-align:left}
}

/* The history report a dealer already ran, kept with the car. */
.hx-report-drop{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong)}
.hx-report-drop>summary{padding:10px 14px;font-size:var(--fs-body);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.hx-report-drop>summary::-webkit-details-marker{display:none}
.hx-report-drop>summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--pui-support);transition:transform .12s}
.hx-report-drop[open]>summary::before{transform:rotate(90deg)}
.hx-drop-body{padding:0 14px 14px}
.hx-dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;border:2px dashed var(--line);border-radius:var(--r-surface);background:var(--surface);text-align:center;cursor:pointer}
.hx-dropzone:hover,.hx-dropzone:focus-visible{outline:none;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.hx-dropzone.over{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.hx-dropzone.busy{opacity:.7;cursor:progress}
.hx-dropzone strong{font-size:var(--fs-body);color:var(--ink)}
.hx-dropzone span{font-size:var(--fs-small);color:var(--pui-support);max-width:52ch;line-height:var(--lh-small)}
.hx-report-summary{margin-top:14px}
.hx-report-from{margin:0 0 10px;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:var(--pui-support)}
.hx-mismatch{margin:0 0 12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--pui-risk) 36%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 7%,var(--surface));color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.hx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:8px}
.hx-fact{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.hx-fact span{font-size:var(--fs-small);letter-spacing:.03em;color:var(--pui-support)}
.hx-fact strong{font-size:var(--fs-body);color:var(--ink)}
.hx-fact small{margin-top:4px;font-size:var(--fs-small);color:var(--pui-support);line-height:var(--lh-small)}
.hx-fact.good{border-left-color:var(--pui-ok)}
.hx-fact.good strong{color:var(--pui-ok)}
.hx-fact.warn{border-left-color:color-mix(in srgb,var(--pui-risk) 55%,var(--line))}
.hx-fact.bad{border-left-color:var(--pui-risk)}
.hx-fact.bad strong{color:var(--pui-risk)}
/* "Not found in this report" must never look like a clean result - that is the whole point. */
.hx-fact.unknown{border-left-color:var(--pui-support);border-style:dashed}
.hx-fact.unknown strong{color:var(--pui-support);font-style:italic}
.hx-report-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* The typographic fallback for an auction mark - used when there is no artwork file, and swapped
 * in when one exists but will not decode. Sized to fill the plate so it reads as the brand rather
 * than as a caption under a hole. */
.auction-wordmark{font-weight:700;font-size:var(--fs-lead);letter-spacing:.055em;line-height:1;white-space:nowrap;text-transform:uppercase}
.auction-logo.small .auction-wordmark{font-size:var(--fs-small);letter-spacing:.03em}

/* First-run setup. Deliberately calm: a dealer meeting this screen has just installed the thing
   they are trusting with their business, and it should not feel like a form to get through. */
.wz{display:flex;flex-direction:column;gap:18px}
.wz-progress{display:flex;align-items:center;gap:12px}
.wz-progress-bar{flex:1 1 auto;height:6px;border-radius:var(--r-stadium);background:var(--surface-strong);overflow:hidden}
.wz-progress-bar span{display:block;height:100%;background:var(--accent);border-radius:var(--r-stadium);transition:width .25s ease}
.wz-progress-label{font-size:var(--fs-small);font-weight:600;color:var(--pui-support);white-space:nowrap}
.wz-body{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:20px;align-items:start}
.wz-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wz-rail-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-surface);font-size:var(--fs-body);color:var(--pui-support)}
.wz-rail-step.current{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--ink);font-weight:600}
.wz-rail-step.done{color:var(--ink)}
.wz-rail-mark{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;font-size:var(--fs-small);font-weight:700}
.wz-rail-step.done .wz-rail-mark{border-color:var(--pui-ok);color:var(--pui-ok)}
.wz-rail-step.current .wz-rail-mark{border-color:var(--accent)}
.wz-panel{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);min-width:0}
.wz-panel h2{margin:0 0 10px;font-size:var(--fs-h3);color:var(--ink)}
.wz-lead{margin:0 0 14px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink);max-width:64ch}
.wz-lead.wz-ok{color:var(--pui-ok)}
.wz-why{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--line);border-radius:0 var(--r-surface) var(--r-surface) 0;background:var(--surface-soft);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--pui-support);max-width:64ch}
.wz-what,.wz-steps,.wz-next{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);max-width:66ch}
.wz-next{list-style:none;padding-left:0;gap:12px}
.wz-next li{display:flex;flex-direction:column;gap:2px}
.wz-next span{font-size:var(--fs-body);color:var(--pui-support)}
.wz-note{margin:0 0 16px;padding:10px 14px;border-radius:var(--r-surface);background:var(--surface-soft);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--pui-support);max-width:66ch}
.wz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.wz-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
.wz-field input{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);font-weight:400}
.wz-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.wz-field small{font-weight:400;color:var(--pui-support)}
.wz-choice{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.wz-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wz-option{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.wz-option:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.wz-option strong{font-size:var(--fs-body)}
.wz-option span{font-size:var(--fs-body);color:var(--pui-support);line-height:var(--lh-body)}
.wz-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:820px){.wz-body{grid-template-columns:minmax(0,1fr)}.wz-rail{flex-direction:row;overflow-x:auto}.wz-rail-step{white-space:nowrap}}

/* The AI sign-in has lapsed. Sits above every page, because it stops every AI feature at once. */
.ai-reconnect{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--pui-risk) 30%,var(--line));border-left:3px solid var(--pui-risk);border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 6%,var(--surface))}
.ai-reconnect-mark{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--pui-risk);color:#fff;font-weight:700;font-size:var(--fs-body)}
.ai-reconnect-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 320px}
.ai-reconnect-copy strong{font-size:var(--fs-body);color:var(--ink)}
.ai-reconnect-copy span{font-size:var(--fs-body);color:var(--pui-support);line-height:var(--lh-body)}
.ai-reconnect-actions{display:flex;gap:8px;flex-wrap:wrap}

/* The CRM. The follow-up queue is first and loudest on purpose: a board is a nice way to look at
   the month, but "ring these four people" is what actually sells a car. */
.crm-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);margin-bottom:16px}
.crm-summary h2{margin:.25rem 0 0;font-size:var(--fs-lead);color:var(--ink);max-width:62ch;line-height:var(--lh-lead)}

.crm-followups{margin-bottom:18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--pui-risk) 26%,var(--line));border-left:3px solid var(--pui-risk);border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 4%,var(--surface))}
.crm-followups.clear{border-color:var(--line);border-left-color:var(--pui-ok);background:var(--surface)}
.crm-fu-head h2,.crm-followups h2{margin:0;font-size:var(--fs-lead);color:var(--ink)}
.crm-fu-head p,.crm-followups>p{margin:.3rem 0 0;font-size:var(--fs-body);color:var(--pui-support);max-width:66ch;line-height:var(--lh-body)}
.crm-fu-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
/* FOUR COLUMNS, AND THE LAST ONE IS THE PROBLEM.
   The actions column is `auto`, and six buttons claim roughly 540px intrinsically. The three text
   columns are then fighting over whatever is left, and the reason column was declared minmax(0,…)
   so it is the one that loses: measured on a real board it collapsed to about one word wide and set
   "Follow-up was due 13 days ago." as a vertical stack of single words, with the buttons overlapping
   it. There was no breakpoint on this row at all.
   The reason column now has a real floor, so it can never be squeezed to nothing. */
.crm-fu{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(120px,1fr) minmax(220px,1.4fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
/* Below the width where all four fit, the row becomes two columns of text with the reason and the
   buttons each on their own full-width line. Stacking beats shrinking: a dealer can read a wrapped
   row, and cannot read a column one character wide. */
@media(max-width:1180px){
  .crm-fu{grid-template-columns:minmax(140px,1fr) minmax(120px,1fr);align-items:start}
  .crm-fu-why,.crm-fu-actions{grid-column:1 / -1}
}
@media(max-width:600px){
  .crm-fu{grid-template-columns:1fr}
  .crm-fu-actions .button{flex:1 1 auto}
}
.crm-fu.due{border-left:3px solid var(--pui-risk)}
.crm-fu.cold{border-left:3px solid color-mix(in srgb,var(--pui-risk) 45%,var(--line))}
.crm-fu-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.crm-fu-who strong{font-size:var(--fs-body);color:var(--ink)}
.crm-fu-call{font-size:var(--fs-small);color:var(--pui-accent-text);font-weight:700}
.crm-fu-who em,.crm-fu-car em{font-size:var(--fs-small);color:var(--pui-support);font-style:italic}
.crm-fu-why{font-size:var(--fs-small);color:var(--pui-support);line-height:var(--lh-small)}
.crm-fu-actions{display:flex;gap:6px;flex-wrap:wrap}
.crm-fu-owner{display:block;margin-top:2px;font-size:var(--fs-micro);color:var(--pui-support);opacity:.8}
/* Who is behind. Rendered only when somebody is, so its presence is itself the signal. */
.crm-owner-strip{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.crm-owner-strip .eyebrow{margin:0 0 8px}
.crm-owner-chips{display:flex;gap:8px;flex-wrap:wrap}
.crm-owner-chip{display:inline-flex;align-items:baseline;gap:6px;min-height:28px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-stadium);background:transparent;color:var(--ink);
  font-family:inherit;font-size:var(--fs-small);cursor:pointer}
.crm-owner-chip:hover{border-color:var(--blue)}
.crm-owner-chip span{font-size:var(--fs-micro);font-weight:600;opacity:.75}
.crm-owner-chip.hot{border-color:color-mix(in srgb,var(--pui-risk) 42%,var(--line))}
.crm-owner-chip.hot span{color:var(--pui-risk);opacity:1}
.crm-owner-chip.active{border-color:var(--blue);background:var(--bluesoft)}

.crm-tabs{margin:0 0 14px}
/* FIX151 R4 — stage tiles are dashboard-style filters. Individual leads live only in Lead List. */
.crm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:stretch;margin:0 0 12px}
.crm-col{appearance:none;display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s ease,background .12s ease,transform .12s ease}
.crm-col:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.crm-col:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.crm-col.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 3px 0 var(--accent)}
.crm-col.closed{opacity:.78}
.crm-col-head{display:flex;flex-direction:column;gap:5px;padding:13px 14px;min-height:94px}
.crm-col-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crm-col-head strong{font-size:var(--fs-body);color:var(--ink)}
.crm-col-count{padding:1px 8px;border-radius:var(--r-stadium);background:var(--surface-strong);font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.crm-col.active .crm-col-count{background:color-mix(in srgb,var(--accent) 18%,var(--surface-strong))}
.crm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:start}
.crm-col{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);min-width:0}
.crm-col.closed{opacity:.72}
.crm-col-head{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-bottom:1px solid var(--line)}
.crm-col-head strong{font-size:var(--fs-body);color:var(--ink)}
.crm-col-count{position:absolute;margin-left:auto}
.crm-col-head .crm-col-count{position:static;align-self:flex-start;padding:0 8px;border-radius:var(--r-stadium);background:var(--surface-strong);font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.crm-col-flag{font-size:var(--fs-small);font-weight:700;color:var(--pui-risk)}
.crm-col-flag.clear{color:var(--pui-support);font-weight:600}
.crm-col-head small{font-size:var(--fs-small);color:var(--pui-support);line-height:calc(var(--ui-table) + 7px)}
.crm-col-value{font-size:var(--fs-small);font-weight:600;color:var(--pui-support);font-variant-numeric:tabular-nums}
.crm-card{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);text-align:left;cursor:pointer}
.crm-col-body{display:flex;flex-direction:column;gap:6px;padding:10px;min-height:44px}
.crm-col-empty{margin:0;padding:6px;text-align:center;color:var(--pui-support)}
/* The card is a container now, not the button: it holds "open this lead" AND "move it to another
   stage". cursor:pointer moved onto the inner button — a pointer over the whole card promised that
   clicking the stage dropdown would open the lead. */
.crm-card{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);text-align:left}
.crm-card:hover{border-color:var(--accent)}
/* Inherits type individually, never with the `font:` shorthand, which would silently reset
   font-family and drop the brand typeface out of every card. */
.crm-card-open{display:flex;flex-direction:column;gap:2px;width:100%;padding:0;border:0;background:none;color:inherit;font-family:inherit;font-size:inherit;text-align:left;cursor:pointer}
.crm-card-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Dragging. grab/grabbing on the card itself, not on the inner button — the button is a click
   target and must keep the pointer cursor that says so. */
.crm-card[draggable="true"]{cursor:grab}
.crm-card.is-dragging{opacity:.45;cursor:grabbing}
/* The drop target has to be visible while a card is over it, or the dealer is aiming at nothing.
   min-height so an EMPTY column is still a target you can hit — a kanban whose empty columns cannot
   be dropped into is a kanban that cannot start anything. */
.crm-col-body{min-height:56px}
.crm-col-body.is-drop-target{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:var(--r-surface);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.crm-card-move{margin-top:6px}
.crm-card-move select{width:100%;font-size:var(--fs-small);line-height:var(--lh-small)}
.crm-card.due{border-left-color:var(--pui-risk)}
.crm-card.cold{border-left-color:color-mix(in srgb,var(--pui-risk) 45%,var(--line))}
.crm-card strong{font-size:var(--fs-body)}
.crm-card-car{font-size:var(--fs-small);color:var(--pui-support)}
.crm-card-why{font-size:var(--fs-small);color:var(--pui-risk)}

.crm-intake{display:flex;flex-direction:column;gap:14px}
.crm-intake-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 18px;border:2px dashed var(--line);border-radius:var(--r-surface);background:var(--surface-soft);text-align:center;cursor:pointer}
.crm-intake-drop:hover,.crm-intake-drop:focus-visible{outline:none;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft))}
.crm-intake-drop.over{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.crm-intake-drop strong{font-size:var(--fs-lead);color:var(--ink)}
.crm-intake-drop span{font-size:var(--fs-small);color:var(--pui-support);max-width:60ch;line-height:var(--lh-small)}
.crm-intake-paste{display:flex;flex-direction:column;gap:6px}
.crm-intake-paste label{font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
.crm-intake-paste textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font-size:var(--fs-body);resize:vertical}
.crm-intake-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crm-intake-review{padding:16px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.crm-intake-summary{margin:0 0 12px;font-size:var(--fs-body);color:var(--ink)}
.crm-intake-table td{vertical-align:top}
.crm-intake-table small{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--pui-support);line-height:calc(var(--ui-table) + 7px)}
.crm-intake-table select{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body)}
.crm-vehicle-picker{display:grid;gap:6px;min-width:260px}.crm-vehicle-picker input{width:100%;min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:inherit}.crm-vehicle-picker input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 22%,transparent);outline-offset:1px}
.crm-intake-table select{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body)}
.crm-in-ok{font-weight:700;color:var(--pui-ok)}
.crm-in-dupe{font-weight:700;color:var(--pui-support)}
.crm-in-bad{font-weight:700;color:var(--pui-risk)}
.crm-in-duplicate{opacity:.68}

.vehicle-leads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vehicle-leads li{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface)}
.vehicle-leads li.due{border-left-color:var(--pui-risk)}
.vehicle-leads li.cold{border-left-color:color-mix(in srgb,var(--pui-risk) 45%,var(--line))}
.vehicle-leads li.closed{opacity:.65}
.vl-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.vl-who strong{font-size:var(--fs-body);color:var(--ink)}
.vl-who small{font-size:var(--fs-small);color:var(--pui-support)}
.vl-why{font-size:var(--fs-small);color:var(--pui-support);line-height:var(--lh-small)}
@media (max-width:760px){
 .crm-fu,.vehicle-leads li{grid-template-columns:minmax(0,1fr)}
 .crm-board{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

/* Connecting the lead mailbox. Used once, then never again - so it explains itself thoroughly and
   then gets out of the way. */
.crm-mailbox{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.crm-mailbox>summary{padding:12px 16px;font-size:var(--fs-body);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.crm-mailbox>summary::-webkit-details-marker{display:none}
.crm-mailbox>summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--pui-support);transition:transform .12s}
.crm-mailbox[open]>summary::before{transform:rotate(90deg)}
.crm-mailbox-body{padding:0 16px 16px}
.crm-mailbox-on{margin:0 0 10px;padding:10px 12px;border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-ok) 9%,var(--surface));color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.crm-mailbox-off{margin:0 0 10px;font-size:var(--fs-body);color:var(--pui-support)}
.crm-mailbox-err{margin:0 0 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--pui-risk) 32%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 6%,var(--surface));font-size:var(--fs-body);color:var(--ink)}
.crm-mailbox-why,.crm-mailbox-help,.crm-mailbox-note{margin:0 0 12px;font-size:var(--fs-body);color:var(--pui-support);line-height:var(--lh-body);max-width:68ch}
.crm-mailbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.crm-mailbox-grid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
.crm-mailbox-grid input,.crm-mailbox-grid select{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);font-weight:400}
.crm-mailbox-grid input:focus,.crm-mailbox-grid select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.crm-mailbox-check{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:var(--fs-body);color:var(--ink)}
.crm-mailbox-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crm-mailbox-result{font-size:var(--fs-body);color:var(--pui-support)}

/* The AI-drafted follow-up. AutoSteward never sends it - the dealer reads, edits, and sends. */
.crm-draft{margin-bottom:16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-left:3px solid var(--accent);border-radius:var(--r-surface);background:var(--surface)}
.crm-draft-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.crm-draft-head h3{margin:0;font-size:var(--fs-lead);color:var(--ink)}
.crm-draft-head p{margin:.25rem 0 0;font-size:var(--fs-small);color:var(--pui-support);max-width:56ch;line-height:var(--lh-small)}
.crm-draft-channels{display:flex;gap:6px;flex-wrap:wrap}
.crm-draft textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);resize:vertical}
.crm-draft textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.crm-draft-busy{margin:0;padding:18px;text-align:center;color:var(--pui-support);font-size:var(--fs-body)}
.crm-draft-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* FIX151 Lead Call/Text/Email Actions + explicit staff-entered outcome log. */
.crm-contact-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.crm-contact-panel h3,.crm-outcome-log h3,.crm-outcome-panel h3{margin:.1rem 0 .25rem;font-size:var(--fs-lead);color:var(--ink)}
.crm-contact-panel p:not(.eyebrow),.crm-outcome-panel-head p{margin:0;max-width:68ch;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--pui-support)}
.crm-contact-buttons,.crm-outcome-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crm-contact-action{text-decoration:none}
.crm-outcome-log{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.crm-outcome-log-head,.crm-outcome-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crm-outcome-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.crm-outcome-list li{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong)}
.crm-outcome-row-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.crm-outcome-row-head strong{font-size:var(--fs-body);color:var(--ink)}
.crm-outcome-row-head time{font-size:var(--fs-micro);color:var(--pui-support)}
.crm-outcome-list p{margin:.3rem 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--pui-support)}
.crm-outcome-empty-note{font-style:italic;opacity:.8}
.crm-outcome-none{margin:10px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--pui-support)}
.crm-outcome-panel{margin-bottom:16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-left:3px solid var(--accent);border-radius:var(--r-surface);background:var(--surface)}
.crm-outcome-fields{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;margin-top:14px}
.crm-outcome-fields label,.crm-outcome-note{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
.crm-outcome-fields select,.crm-outcome-note textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);color:var(--ink);font:inherit;font-weight:400}
.crm-outcome-note{margin-top:12px}
.crm-outcome-note small{font-weight:400}
.crm-outcome-actions{margin-top:12px}
@media (max-width:760px){.crm-outcome-fields{grid-template-columns:1fr}}

/* "Who bought it?" - asked once, right after a car is marked sold. The people who missed out are
   the easiest call on the lot, so they are kept on file rather than quietly closed. */
.sold-leads{margin:0 0 16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-left:3px solid var(--accent);border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.sold-leads-head h3{margin:0;font-size:var(--fs-lead);color:var(--ink)}
.sold-leads-head p{margin:.3rem 0 13px;font-size:var(--fs-body);color:var(--pui-support);max-width:66ch;line-height:var(--lh-body)}
.sold-leads-list{display:flex;flex-direction:column;gap:6px}
.sold-lead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);cursor:pointer}
.sold-lead:hover{border-color:var(--accent)}
.sold-lead.buyer{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.sold-lead-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.sold-lead-who strong{font-size:var(--fs-body);color:var(--ink)}
.sold-lead-who small{font-size:var(--fs-small);color:var(--pui-support)}
.sold-lead-verdict{font-size:var(--fs-small);font-weight:700;color:var(--pui-support);white-space:nowrap}
.sold-lead.buyer .sold-lead-verdict{color:var(--pui-accent-text)}
.sold-leads-alt{margin:14px 0 0;padding:10px 14px;border-radius:var(--r-surface);background:var(--surface);font-size:var(--fs-body);color:var(--ink);line-height:var(--lh-body)}
.sold-leads-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Bringing the old system's photos across - the half of a migration that decides whether a
   dealer actually switches. */
.photo-chooser{display:flex;flex-direction:column;gap:10px}
.photo-folders{display:flex;flex-direction:column;gap:8px}
.photo-folder{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.photo-folder:hover{border-color:var(--accent)}
.photo-folder.selected{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.photo-folder strong{font-size:var(--fs-body);word-break:break-all}
.photo-folder span{font-size:var(--fs-small);color:var(--pui-support)}
.photo-folder small{font-size:var(--fs-small);color:var(--pui-support);opacity:.85;word-break:break-all}
.photo-review{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.photo-summary{margin:0 0 12px;font-size:var(--fs-body);color:var(--ink);line-height:var(--lh-body)}
.photo-unmatched{margin-top:12px}
.photo-unmatched>summary{font-size:var(--fs-body);font-weight:600;color:var(--pui-support);cursor:pointer}
.photo-unmatched ul{margin:10px 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small);color:var(--pui-support);line-height:var(--lh-small)}
.photo-unmatched code{font-size:var(--fs-small);word-break:break-all}
.photo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* The setup nudge. A card the dealer can act on or ignore - never a redirect. */
.setup-nudge{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 16px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-left:3px solid var(--accent);border-radius:var(--r-surface);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.setup-nudge h2{margin:.2rem 0 .2rem;font-size:var(--fs-lead);color:var(--ink)}
.setup-nudge p:last-of-type{margin:0;font-size:var(--fs-body);color:var(--pui-support);max-width:62ch;line-height:var(--lh-body)}
.setup-nudge-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.setup-nudge-step{font-size:var(--fs-small);font-weight:600;color:var(--pui-support);white-space:nowrap}
.dealer-closing-title{margin-top:18px}
.dealer-closing-grid{align-items:end}

/* ---- Auction import: the step rail -------------------------------------------------
 * The flow used to be one long screen with no sense of progress: a dealer could not tell
 * that "Read this" had moved them on, what AutoSteward was still waiting for, or how much was
 * left. The rail names the steps, marks what is done, and the hint under it says the one
 * thing to do next. */
.auction-rail{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.auction-rail-step{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface);color:var(--muted);font-size:var(--fs-body);font-weight:700}
.auction-rail-mark{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--surface-soft);color:var(--muted);font-size:var(--fs-small);font-weight:700}
.auction-rail-step.done{border-color:var(--green);color:var(--green);background:var(--greensoft)}
.auction-rail-step.done .auction-rail-mark{background:var(--green);color:#fff}
.auction-rail-step.current{border-color:var(--blue);color:var(--blue);background:var(--bluesoft);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
.auction-rail-step.current .auction-rail-mark{background:var(--blue);color:#fff}
.auction-rail-hint{margin:0 0 14px;color:var(--muted);font-size:var(--fs-body)}
.auction-rail-hint strong{color:var(--ink)}
/* The purchase date, asked for at import while the auction page is still in front of them. */
.auction-date-field{display:grid;gap:6px;margin:12px 0 0;max-width:320px}
.auction-date-field span{font-size:var(--fs-body);font-weight:700;color:var(--muted)}
.auction-date-field input{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--input-bg);color:var(--input-ink);font:inherit}
.auction-date-field.needed span{color:var(--red)}
.auction-date-field.needed input{border-color:var(--red)}

/* ---- Auction import wizard ---------------------------------------------------------
 * The import used to sit inline under the vehicle form, competing with it for attention and
 * giving no sense of progress. As a modal it becomes one task with a beginning and an end. */
.auction-modal-backdrop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(6,16,28,.62);backdrop-filter:blur(2px)}
.auction-modal-card{width:min(840px,100%);max-height:88vh;display:flex;flex-direction:column;padding:0;border-radius:var(--r-surface);background:var(--surface-strong);border:1px solid var(--line);box-shadow:var(--shadow-raised);overflow:hidden}
.auction-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 12px}
.auction-modal-head h2{margin:2px 0 0;font-size:var(--fs-h2)}
.auction-modal-close{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--muted);font-size:var(--fs-h3);line-height:1;cursor:pointer}
.auction-modal-close:hover{border-color:var(--red);color:var(--red)}
.auction-modal-card .auction-rail{padding:0 22px;margin-bottom:4px}
.auction-modal-card .auction-rail-hint{padding:0 22px}
.auction-modal-body{flex:1;overflow-y:auto;padding:6px 22px 18px;min-height:220px}
.auction-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-soft)}
.auction-modal-foot-right{display:flex;align-items:center;gap:12px}
.auction-step-count{color:var(--muted);font-size:var(--fs-body);font-weight:600}
.auction-resume{margin:0;color:var(--muted);font-size:var(--fs-body)}
/* History report step */
.auction-history-drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;padding:18px;border:2px dashed var(--line);border-radius:var(--r-surface);background:var(--surface-soft);cursor:pointer;transition:border-color .12s}
.auction-history-drop:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft))}
.auction-history-drop.over{border-color:var(--accent);border-style:solid;background:var(--bluesoft)}
.auction-history-list{margin:10px 0 0;padding-left:20px}
.auction-history-list li{margin:4px 0;font-size:var(--fs-body)}
@media(max-width:720px){.auction-modal-card{max-height:94vh}.auction-modal-body{padding:6px 14px 14px}.auction-modal-head{padding:14px}}

/* ---- Long option text must not widen the page ---------------------------------------
 * A <select> sizes itself to its widest option. The restore picker lists a full backup
 * filename with a timestamp, so on a 1024-wide screen it grew past its own panel and put a
 * horizontal scrollbar under the whole app. Grid and flex children default to min-width:auto,
 * which lets that happen; pinning them to 0 makes the control shrink and ellipsize instead. */
.backup-folder-label{min-width:0}
.backup-folder-label > select,
.backup-folder-label > span{min-width:0;max-width:100%}
select{max-width:100%}

/* The market summary states the scope that was actually searched. When no ZIP is saved a
 * radius cannot be applied, so the search runs nationwide - that note explains the gap
 * between the picker and the result rather than letting the line quietly misstate it. */
.ml-scope-note{color:var(--muted);font-size:var(--fs-body);font-weight:600}

/* ---- Narrow widths: the backup status grid was wider than the screen ------------------
 * Found by sweeping every route at 768px and 375px with real data in it.
 *
 * It asked for four columns with a 180px floor, so it demanded 744px before gaps no matter
 * how little room it had, and put a horizontal scrollbar under the whole page.
 *
 * auto-fit was the first thing tried and it was wrong: with six status cards it laid out six
 * tracks in a single row at 1440px, replacing the deliberate 4-across-two-rows block. Dropping
 * the floor to 0 and naming the counts per width keeps the desktop layout exactly as designed
 * and still collapses on a phone.
 *
 * The deal action bar overflows its own box at these widths too, but that one is deliberate:
 * .sticky-deal-action-groups is a pinned toolbar meant to scroll horizontally
 * (min-width:max-content, flex-wrap:nowrap, overflow-x:auto). It stays inside the viewport,
 * so it is left alone. */
.backup-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.backup-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.backup-status-grid{grid-template-columns:minmax(0,1fr)}}

/* The deal columns stack below 1250px by switching to display:grid with no template, which
 * leaves a single implicit auto track - and an auto track is sized to its widest child’s
 * max-content, not to the space available. So one card whose inner two-column field grid
 * would rather be 737px wide dragged the whole column past its 709px parent, and the deal
 * screen scrolled sideways at tablet width. minmax(0,1fr) says fill the parent and shrink
 * when you must, which is what stacking them was for in the first place. */
.deal-column{grid-template-columns:minmax(0,1fr)}
.deal-card{min-width:0}

/* Same root cause on every settings screen at phone width: an .info-card is a grid item, and
 * a grid item defaults to min-width:auto, so the card is sized to its own max-content rather
 * than to the column it was placed in. On a 375px screen that made the backup cards 623px and
 * the display cards 435px, scrolling the whole page sideways.
 *
 * It also defeated the auto-fit fix above: the status grid measured the room its card had
 * claimed, saw 585px, and confidently laid out three 180px columns. With the card pinned to 0
 * the measurement is honest and auto-fit collapses to one, which is what it was for.
 *
 * .security-settings-grid already carried this fix for its own cards; it was never the only
 * grid that needed it. */
.info-card{min-width:0}

/* The market results carry a warning when the dealer has changed the search area but not yet
 * re-run the search. Amber rather than red: nothing is wrong, the answer on screen is simply
 * for a different question than the one the controls now describe. */
.ml-note.ml-stale{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;border:1px solid var(--amber);border-radius:var(--r-surface);color:var(--amber);background:var(--ambersoft);font-size:var(--fs-body);font-weight:600}

/* ---- Vendors: toolbar + open-in-card editor -------------------------------- */
.vendor-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);box-shadow:var(--shadow)}
.vendor-toolbar-search{display:flex;align-items:center;gap:6px;flex:1 1 260px;min-width:220px}
.vendor-toolbar-search input{flex:1;min-width:150px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:#fff;color:var(--ink);font:inherit}
.vendor-count{margin-left:auto;color:var(--muted);font-size:var(--fs-small);font-weight:700;white-space:nowrap}
.vendor-table .vendor-row,.vendor-table tbody tr{cursor:pointer}
.vendor-edit-card{width:min(640px,100%)}
.vendor-edit-card .vendor-form-grid{grid-template-columns:1fr 1fr;padding:14px 0 4px}
.vendor-edit-card .vendor-form-grid label{grid-template-columns:1fr;align-items:stretch;gap:4px;font-weight:600}
.vendor-edit-card .vendor-form-grid label>span{color:#50647c;font-size:var(--fs-small);font-weight:700}
.vendor-edit-card .vendor-form-grid label.span-2,.vendor-edit-card .vendor-form-grid label.span-full{grid-column:1/-1}
.vendor-find-hint{margin:0 0 4px;color:#4b5a6f;font-size:var(--fs-small)}
.vendor-dupe-hint{margin:10px 0 0;padding:8px 12px;color:#80500a;background:#fff2d8;border:1px solid #e5c784;border-radius:var(--r-surface);font-size:var(--fs-small)}
.vendor-history-inline{margin:12px 0 0;padding:10px 12px;color:#3d5068;background:#eef4fa;border:1px solid #c3d1df;border-radius:var(--r-surface);font-size:var(--fs-body)}
.vendor-history-inline strong{color:var(--navy)}
@media(max-width:560px){.vendor-edit-card .vendor-form-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   The guided sale (web/sale-wizard.js)

   Deliberately roomier than the rest of the app. This screen is used with a customer sitting
   across the desk, often on a laptop turned sideways, and it asks one thing at a time — so the
   fields are large, the current step is unmistakable, and nothing competes with the question
   being asked. The old deal tab put thirty-five inputs in two columns; this is the opposite.
   --------------------------------------------------------------------------- */
.guided-sale-shell{min-width:0;overflow-x:hidden}
.guided-sale-vehicle-summary{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:stretch;width:min(540px,100%);margin:0 0 18px;padding:10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);box-shadow:var(--panel-shadow,none)}
.guided-sale-vehicle-media{position:relative;display:grid;place-items:center;min-height:108px;overflow:hidden;border-radius:var(--r-control);background:var(--surface-soft);color:var(--accent)}
.guided-sale-vehicle-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.guided-sale-vehicle-media.has-photo img{opacity:1}
.guided-sale-sample-tag{display:none;position:absolute;z-index:2;left:6px;right:6px;bottom:6px;padding:4px 6px;border-radius:var(--r-control);background:rgba(7,18,34,.88);color:#fff;font-size:10px;font-weight:800;line-height:12px;text-align:center;text-transform:uppercase;letter-spacing:0}
.guided-sale-vehicle-media.has-sample-photo .guided-sale-sample-tag{display:block}
.guided-sale-vehicle-fallback{display:grid;place-items:center;width:58px;height:58px}
.guided-sale-vehicle-icon{width:58px;height:58px}
.guided-sale-vehicle-copy{min-width:0;padding:2px 4px}
.guided-sale-vehicle-copy .eyebrow{margin-bottom:2px!important}
.guided-sale-vehicle-copy h1{margin:0 0 8px;color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);overflow-wrap:anywhere}
.guided-sale-vehicle-copy dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px;margin:0}
.guided-sale-vehicle-copy dl div{min-width:0}
.guided-sale-vehicle-copy dt{color:var(--muted);font-size:var(--fs-micro);text-transform:uppercase}
.guided-sale-vehicle-copy dd{margin:0;color:var(--ink);font-size:var(--fs-small);font-weight:700;overflow-wrap:anywhere}
@media(max-width:640px){.guided-sale-vehicle-summary{grid-template-columns:112px minmax(0,1fr)}.guided-sale-vehicle-copy dl{grid-template-columns:1fr}.guided-sale-vehicle-media{min-height:132px}}
.sale-wizard{max-width:940px;margin:0 auto;padding:20px 22px 26px;border:1px solid var(--line);
  border-radius:var(--r-surface);background:var(--surface-strong);box-shadow:var(--panel-shadow,none)}
.sw-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.sw-head h2{margin:2px 0 4px;font-size:var(--fs-h1);letter-spacing:-.02em}
.sw-blurb{margin:0;color:var(--muted);font-size:var(--fs-body);max-width:58ch}

/* The rail is a map, not decoration: it shows what is done, what is blocked, and lets a dealer
   jump back to fix something without losing where they were. */
.sw-rail{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
/* A STEP NAME WRAPS; IT IS NEVER CUT OFF. The title used to be nowrap + ellipsis, and at 1440px the
   five steps share the card so narrowly that "Contract cancellation" read "Contract cancellati…" -
   the one step a dealer is fined over, with its name clipped (measured by tools/dev/walk). A step
   whose name wraps to two lines is still a map; one with half a name is not. The li is a flex box so
   every button in a row stretches to the tallest one and the rail stays a clean band. */
.sw-rail-step{display:flex;flex:1 1 110px;min-width:104px}
.sw-rail-step button{display:flex;align-items:center;gap:7px;width:100%;padding:8px 9px;border:1px solid var(--line);
  border-radius:var(--r-control);background:var(--surface);color:var(--muted);font-size:var(--fs-small);
  line-height:var(--lh-small);text-align:left;cursor:pointer}
.sw-rail-step button:disabled{opacity:.5;cursor:not-allowed}
.sw-rail-num{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--surface-soft);font-weight:700;font-size:var(--fs-micro)}
.sw-rail-title{min-width:0;overflow-wrap:break-word}
.sw-rail-step.sw-done button{color:var(--ink)}
.sw-rail-step.sw-done .sw-rail-num{background:var(--pui-ok,#1c7a4a);color:#fff}
.sw-rail-step.sw-skipped .sw-rail-num{background:var(--line)}
.sw-rail-step.sw-blocked .sw-rail-num{background:var(--pui-risk,#b4341f);color:#fff}
.sw-rail-step.sw-current button{border-color:var(--accent);background:var(--surface-strong);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent)}

.sw-body{margin-bottom:14px}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.sw-buyer-grid{align-items:start}
.sw-buyer-grid>.sw-field,.sw-buyer-grid>.sw-salesperson-picker{align-self:start}
/* FIX106: the sale-odometer context hint renders below its input. Pricing controls keep equal
   scale-aware heights and their labels/inputs align across the first row. */
.sw-price-grid{align-items:start}
/* FIX150: reserve the same two-line label height across Pricing so wrapped labels such as Sale / Contract Odometer no longer push their input below Stock #, Sale Date, or Payment Type. */
.sw-price-grid .sw-field>span{min-height:calc(2 * var(--lh-small));display:flex;align-items:flex-end}
.sw-price-grid .sw-field input,.sw-price-grid .sw-field select{width:100%;height:max(44px,var(--control-height));min-height:max(44px,var(--control-height));box-sizing:border-box}
@media(max-width:640px){.sw-price-grid .sw-field>span{min-height:0}}
.sw-compliance-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.sw-compliance-grid .sw-field{min-width:0}
.sw-compliance-grid .sw-field input,.sw-compliance-grid .sw-field select{width:100%;height:44px;min-height:44px;box-sizing:border-box}
@media(max-width:900px){.sw-compliance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.sw-compliance-grid{grid-template-columns:1fr}}
/* Buyer Info keeps the approved four-column upper form, but its lower ID/co-buyer controls
   must span the full wizard width instead of being auto-fitted into narrow grid cells. */
.sw-grid>.sw-buyer-lower{grid-column:1/-1}
.sw-id-upload.sw-buyer-id-upload{padding:10px 12px;min-height:0;background:var(--surface-soft);color:var(--ink)}
.sw-id-upload.sw-buyer-id-upload p{flex:1 1 260px;margin:0;color:var(--muted)}
.sw-id-upload.sw-buyer-id-upload input[type=file]{flex:0 1 280px;min-width:180px}
.sw-buyer-co-summary{padding:10px 12px}
.sw-buyer-actions{padding-top:2px}
.sw-buyer-actions .warning-action{margin-left:auto}
.sw-field{display:grid;gap:5px}
/* ANY wide child spans, not only a .sw-field.
   The ID-upload panel is a plain <div class="sw-wide sw-id-upload">, so this rule never matched it
   and it sat as a normal one-column cell. That was invisible until inputs began aligning to the
   bottom of their row: the tall panel stretched the row, and Date of birth and R.O.S. number were
   left with a chasm between label and box. Reported from the running app. */
.sw-field.sw-wide,.sw-grid>.sw-wide{grid-column:1/-1}
.sw-field>span{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.sw-field>span small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-micro)}
.sw-field-hint{display:block;color:var(--muted);font-size:var(--fs-micro);font-weight:400;line-height:var(--lh-micro)}
/* Bigger than the app's default input on purpose — these are typed once, in front of somebody. */
.sw-field input{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);
  background:var(--input-bg);color:var(--input-ink);font-size:var(--fs-lead)}
.sw-field input:focus,.sw-field select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.sw-field input[readonly]{opacity:.78;cursor:not-allowed}
.sw-check{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:var(--fs-body)}
.sw-existing{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.sw-existing span{color:var(--muted);font-size:var(--fs-small)}
.sw-button-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Pricing has two deliberate rows: all four actions first, then all three totals. Keep the
   canonical rule correct here instead of relying on a later override that can be lost to caching
   or stylesheet truncation in a Windows test build. */
.sw-pricing-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;margin-bottom:14px}
.sw-pricing-toolbar>.sw-button-row{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;width:100%}
.dmv-fee-highlight{border-color:color-mix(in srgb,var(--accent) 78%,#000);background:var(--accent);color:var(--accent-ink,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent),0 4px 12px color-mix(in srgb,var(--accent) 20%,transparent)}
.dmv-fee-highlight:hover{border-color:color-mix(in srgb,var(--accent) 88%,#000);background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink,#fff)}
.dmv-fee-highlight:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.sw-pricing-summary{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-start;align-items:center;white-space:nowrap;color:var(--muted);font-size:var(--fs-small);width:100%}
.sw-pricing-summary span{flex:0 0 auto;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.sw-pricing-buttons,.sw-compliance-buttons{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sw-detail-button{display:inline-flex;gap:8px;align-items:center}
.sw-detail-button b{padding:2px 7px;border-radius:var(--r-stadium);background:var(--surface-soft);font-size:var(--fs-micro)}
.sw-detail-button.has-data b{background:var(--pui-ok,#1c7a4a);color:#fff}
/* Sale Wizard state language: red = missing, blue = ready/current action, green = completed/current.
 * aria-pressed is semantic only; styling it directly made an incomplete Finance choice look ready. */
.sw-detail-button.sw-finance-ready{border-color:var(--accent);background:var(--accent);color:var(--accent-ink,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.sw-detail-button.sw-finance-ready b{background:color-mix(in srgb,#000 18%,transparent);color:inherit}
.sw-detail-button.sw-finance-complete{border-color:var(--pui-ok,#1c7a4a);background:var(--pui-ok,#1c7a4a);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-ok,#1c7a4a) 22%,transparent)}
.sw-detail-button.sw-finance-complete b{background:color-mix(in srgb,#000 18%,transparent);color:inherit}
.sw-detail-button.sw-finance-stale{border-color:var(--pui-warn,#9a6700);background:color-mix(in srgb,var(--pui-warn,#9a6700) 14%,var(--surface,#fff));color:var(--text,#1f2937);box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-warn,#9a6700) 18%,transparent)}
.sw-detail-button.sw-finance-stale b{background:var(--pui-warn,#9a6700);color:#fff}
.sw-detail-panel{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.sw-detail-panel div:first-child{display:grid;gap:4px}
.sw-detail-panel span,.sw-rule-note{color:var(--muted);font-size:var(--fs-small)}
.sw-form-checks{display:grid;gap:8px;margin:8px 0 12px}
.sw-form-checks label{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.sw-form-checks input{flex:0 0 auto}
.sw-form-checks .link-btn{margin-left:auto}

.sw-issues,.sw-warnings{margin:12px 0 0;padding:11px 13px 11px 30px;border-radius:var(--r-control);font-size:var(--fs-body)}
.sw-issues{background:color-mix(in srgb,var(--pui-risk,#b4341f) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--pui-risk,#b4341f) 35%,transparent)}
.sw-warnings{background:var(--surface-soft);border:1px solid var(--line);color:var(--muted)}
.sw-issues li,.sw-warnings li{margin:2px 0}

.sw-derive{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-control);background:var(--surface-soft)}
.sw-derive strong{display:block;margin-bottom:6px;font-size:var(--fs-body)}
.sw-derive ul{margin:0 0 10px;padding-left:18px;font-size:var(--fs-body)}
.sw-derive small{color:var(--muted)}

.sw-summary{display:grid;gap:1px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden}
.sw-sum-line{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;background:var(--surface);font-size:var(--fs-body)}
.sw-sum-line strong{font-variant-numeric:tabular-nums}
.sw-sum-total{background:var(--surface-soft);font-size:var(--fs-lead)}
.sw-sum-total strong{font-size:var(--fs-h3)}
.sw-ready{margin:0 0 12px;color:var(--pui-ok,#1c7a4a);font-size:var(--fs-body);font-weight:600}
.sw-blocking{margin:0 0 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--pui-risk,#b4341f) 35%,transparent);
  border-radius:var(--r-control);background:color-mix(in srgb,var(--pui-risk,#b4341f) 8%,transparent)}
.sw-blocking ul{margin:7px 0 10px;padding-left:18px;font-size:var(--fs-body)}
.sw-blocking li{margin:3px 0}

.sw-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sw-actions .primary{min-width:170px}
.sw-actions .link-btn{margin-left:auto;font-size:var(--fs-small);color:var(--muted)}
@media(max-width:640px){.sale-wizard{padding:15px}.sw-grid{grid-template-columns:1fr}.sw-rail-step{flex-basis:100%}.sw-pricing-toolbar,.sw-detail-panel{display:grid}.sw-pricing-summary{justify-content:flex-start}.sw-buyer-actions .warning-action{margin-left:0}}
.sw-forms{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
/* The spacer, not margin-left:auto on the link. The pusher has to sit BETWEEN the abandon group
   and the advance group so both ends stay pinned however many buttons each side happens to have —
   Back disappears on step one, Cancel only exists once something is saved. Hanging the push off one
   button breaks the moment that button is not rendered. */
.sw-actions-gap{flex:1 1 auto}
.sw-actions .link-btn.sw-leave{margin-left:0;font-size:var(--fs-small);color:var(--muted)}
/* On a narrow screen the row wraps, and a wrapped flex row would put Continue on its own line ABOVE
   the abandon buttons — reversing the whole point. Ordered explicitly so the meaning survives. */
@media(max-width:640px){
  .sw-actions{flex-direction:column-reverse;align-items:stretch}
  .sw-actions-gap{display:none}
  .sw-actions .button{width:100%}
}
@media(max-width:640px){.sale-wizard{padding:15px}.sw-grid{grid-template-columns:1fr}.sw-rail-step{flex-basis:100%}}
.sw-forms{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.sw-forms strong{display:block;margin-bottom:6px;font-size:var(--fs-body)}
.sw-forms ul{margin:0 0 10px;padding-left:18px;font-size:var(--fs-body)}
.sw-forms small{display:block;margin-top:8px;color:var(--muted);font-size:var(--fs-micro);max-width:60ch}
/* The way out of a sale, not just out of the screen. Pushed to the right of the forward actions
   and outlined rather than filled: it must be findable without ever being the obvious next click. */
.sw-callout-off{margin-left:auto}
.sw-actions .sw-callout-off + .link-btn{margin-left:0}

/* The O of "AutoSteward" IS the steering wheel - the Wheel-O wordmark. Sized in em so it
   tracks the brand type at every text-size setting, and inheriting currentColor so it works
   on every design's sidebar (several have light sidebars) without a hardcoded blue. */
.sidebar-brand-wordmark strong{display:inline-flex;align-items:baseline;white-space:nowrap}
.sidebar-brand-wordmark .brand-o{width:.82em;height:.82em;margin:0 .02em;align-self:center;flex:0 0 auto}

/* The NHTSA VIN suggestion. Reads as an offer, not a result: it sits below the decoder controls,
   states what it found, and keeps its own action, so nothing changes until the dealer says so. */
.vin-suggestion{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--bluesoft);font-size:var(--fs-small)}
.vin-suggestion strong{color:var(--navy)}
.vin-suggestion span{padding:2px 8px;border-radius:var(--r-stadium);background:var(--surface);white-space:nowrap}
.vin-suggestion b{color:var(--navy)}
.vin-suggestion em{flex:1 1 100%;color:var(--amber);font-style:normal}
.vin-suggestion button{margin-left:auto}
.vin-suggestion.busy{color:var(--muted);background:var(--soft);border-left-color:var(--line)}
.vin-suggestion.problem{color:var(--amber);background:var(--ambersoft);border-left-color:var(--amber)}

/* The buyer's ID capture. Deliberately has no preview area: the file goes to the vehicle folder
   and is never rendered back, so there is nothing here to show and nothing to leak on screen. */
.sw-id-upload{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-surface);background:var(--soft)}
.sw-id-upload strong{font-size:var(--fs-body)}
.sw-id-upload p{flex:1 1 100%;margin:0;color:var(--muted);font-size:var(--fs-small)}
.sw-id-upload input[type=file]{font-size:var(--fs-small);max-width:100%}
.sw-id-upload span{color:var(--green);font-size:var(--fs-small)}

/* The sidebar mark takes the sidebar's own ink colour. A fixed brand blue cannot work here: ten
   designs ship ten different sidebar backgrounds, and #0284C7 on a dark navy is the low-contrast
   case the owner flagged. --sidebar-ink is defined per design to contrast with --sidebar-bg, so
   inheriting it gives guaranteed contrast on every preset, in both light and dark. */
/* Beats design-themes.css .sidebar-brand-mark{color:var(--accent-deep)} on specificity.
   accent-deep is a DEEP shade meant for accents ON light surfaces; on a dark sidebar of nearly the
   same hue it measured 1.1-2.2 contrast - the light-blue-on-dark-blue the owner called out.
   --sidebar-ink is the one token guaranteed to contrast with --sidebar-bg on every preset. */
.sidebar-brand .sidebar-brand-mark{color:var(--sidebar-ink,#fff);display:grid;place-items:center}
.sidebar-brand-mark svg{width:100%;height:100%}

/* A mandatory box that is still empty. Marked on the field itself because a dealer reading
   "Enter the buyer's ZIP code" still has to work out which of eight boxes that is. Amber rather
   than red: it is not wrong yet, it is just not finished. */
.sw-field input.sw-missing,.sw-field select.sw-missing{border-color:var(--pui-risk,#b4341f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-risk,#b4341f) 16%,transparent)}
.sw-field input.sw-missing:focus,.sw-field select.sw-missing:focus{border-color:var(--pui-risk,#b4341f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-risk,#b4341f) 22%,transparent)}
.sw-detail-button.sw-missing{border-color:var(--pui-risk,#b4341f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-risk,#b4341f) 16%,transparent)}

/* FIX107: a sale odometer below the recorded inventory intake is an ERROR until the reading is
   corrected or a legitimate replacement/rollover status is documented. Red, not amber: the value
   is internally inconsistent and must not look like an ordinary unfinished field. */
.sw-field input.sw-invalid{border-color:var(--pui-risk,#b4341f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-risk,#b4341f) 16%,transparent)!important}
.sw-field input.sw-invalid:focus{outline-color:var(--pui-risk,#b4341f)!important}
.sw-field-error{display:block;color:var(--pui-risk,#b4341f);font-size:var(--fs-micro);font-weight:700;line-height:var(--lh-micro)}

/* Drop target on the Photos / Files panel. Dashed rather than solid so it reads as somewhere to
   put something rather than a button, and it keeps the app's tokens so it follows every design. */
.managed-drop{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  min-height:88px;margin:0 0 12px;padding:14px;border:2px dashed var(--line);border-radius:var(--r-surface);
  background:var(--soft);color:var(--muted);text-align:center;cursor:pointer}
.managed-drop strong{color:var(--ink);font-size:var(--fs-body)}
.managed-drop span{font-size:var(--fs-small)}
.managed-drop:hover,.managed-drop:focus-visible{border-color:var(--blue);color:var(--ink)}
.managed-drop.is-over{border-color:var(--blue);background:var(--bluesoft);color:var(--ink)}
.managed-drop.is-busy{opacity:.6;pointer-events:none}
html[data-theme="dark"] .managed-drop{background:var(--surface);border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .managed-drop strong{color:var(--ink)}
/* Archived customers. Present but visibly set aside, never styled as an error. */
.customer-archive-toggle{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--pui-support)}
.customer-table tr.is-archived{opacity:.62}
.customer-table tr.is-archived .link-btn{font-style:italic}
.archived-tag{display:block;font-size:var(--fs-micro);color:var(--pui-support)}
/* The customer record's CRM interest, and the lead card's "we know them" mark. */
.customer-interest-card .is-closed{opacity:.6}
.crm-card-known{display:inline-block;margin-top:4px;padding:0 8px;border-radius:var(--r-stadium);
  background:var(--bluesoft);color:var(--blue);font-size:var(--fs-micro);font-weight:600}
/* Staged history reports, each with what the PDF said it was. */
.auction-history-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hx-staged-name{flex:1;min-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auction-history-list select{min-height:28px;font-size:var(--fs-small)}
/* Cautionary and destructive actions must not read as ordinary ones.
 *
 * Measured, not guessed. In dark themes .button.warning-action came out with exactly the plain
 * button's background, text AND border (rgb(29,51,73) / rgb(242,247,252) / rgb(71,96,121)), so
 * "Clear Pricing Fields", "Clear Buyer Info", "Clear Checklist", "Clear Financing", "Clear
 * Trade-In" and "Clear Compliance Data" all looked like Cancel. .button.danger had the same
 * problem in light: plain white, plain border, indistinguishable from Reset.
 *
 * The cause both times was hardcoded light hexes with no dark counterpart. These derive from the
 * theme tokens instead, so they stay distinct in both appearances and across all ten design
 * presets rather than needing a patch per theme. */
.button.warning-action{color:color-mix(in srgb,var(--amber) 84%,#000);background:var(--ambersoft);border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.button.warning-action:hover:not(:disabled){background:color-mix(in srgb,var(--amber) 18%,var(--ambersoft))}
/* Solid fill, unlike danger-outline: .danger is used where the action is immediate and permanent,
   and the two must not look like the same weight of warning.
 *
 * --red-solid, NOT --red. This is the one place a status colour is used as a FILL rather than as
 * ink, and the two jobs want opposite lightness. `--red` is tuned to be read as TEXT against the
 * appearance's canvas, so in dark it is a pale #ff8d96 - and `color:#fff` on top of that measured
 * 2.21:1 in ALL TEN designs. Delete, Delete Vehicle, Delete Vendor, Purge Audit Log: every
 * irreversible button in the program had a label you could not read in dark mode, which is worse
 * than a cosmetic fault on a button whose whole job is to be understood before it is pressed.
 * --red-solid stays dark enough to carry white in both appearances. */
.button.danger{color:#fff;background:var(--red-solid);border-color:color-mix(in srgb,var(--red-solid) 72%,#000)}
.button.danger:hover:not(:disabled){background:color-mix(in srgb,var(--red-solid) 86%,#000)}
/* Dark themes flatten EVERY .button to the plain surface with !important (see the
   :is(.button,.desktop-action-button,…) rule above), and only .primary and .danger-outline were
   patched back. That is why warning-action and danger measured identical to Cancel in dark.
   Same token-derived colours, at the specificity the flatten forces. */




/* danger-outline in dark was distinguished only by its text and border — the flatten rule gave it
   the plain button's background, so across the ten designs its worst-case separation from Cancel
   was a 24-step colour difference in the label alone. A faint red wash keeps it clearly the
   softer of the two destructive weights while making it readable as one at a glance. */


/* The unfinished-import notice sits above the tabs on a new vehicle, where the half-filled
   form actually is, rather than only in the auction section far below it. */
.import-resume-notice{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.import-resume-notice span{display:block;margin-top:2px;font-weight:400}
/* The application canvas, when the dealer has not chosen one.
 *
 * --application-background-color is a BRANDING setting, so the stylesheet cannot simply override
 * it — a dealer who picked their own colour must keep it in both appearances. But the DEFAULT is
 * the light #eef4fa a fresh install ships with, and it was painted behind the whole app in dark
 * mode as well: measured rgb(238,244,250) canvas under rgb(242,247,252) text, a contrast of 1.0.
 * Anyone switching a new install to dark saw white on white. Only the untouched default is
 * redirected to the theme's own canvas; light is unaffected (the two colours differ by 2 steps). */
body[data-application-blank-default="true"] #app{background-color:var(--canvas)}
/* Bulk file removal. The bar only exists while something is picked, so an empty table never
   carries a destructive control. */
.file-pick-col{width:34px}
.file-pick{display:inline-flex;align-items:center;justify-content:center;min-height:24px;cursor:pointer}
.file-pick-spacer{display:inline-block;width:14px}
.file-bulk-bar{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));border-radius:var(--r-surface);
  background:color-mix(in srgb,var(--red) 6%,var(--surface));font-size:var(--fs-small)}
.file-bulk-bar span{font-weight:600}
/* Whether a newer release exists. Colour carries the meaning, so "could not check" never reads
   as "up to date" at a glance. */
.update-availability-card{border-left:4px solid var(--line)}
.update-availability-card.ok{border-left-color:var(--green)}
.update-availability-card.warn{border-left-color:var(--amber)}
.update-availability-card.new{border-left-color:var(--blue)}
/* Who can do the dangerous things. Sits above the permission list, not on a tab of its own —
   an audit nobody navigates to is an audit nobody reads. */
.risky-access-card{margin-bottom:16px;border-left:4px solid var(--amber)}
.risky-findings{margin:10px 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.risky-findings li{padding:8px 12px;border-radius:var(--r-surface);font-size:var(--fs-small);
  background:color-mix(in srgb,var(--amber) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 26%,var(--line))}
.risky-findings li.high{background:color-mix(in srgb,var(--red) 8%,var(--surface));border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.risky-clear{margin:8px 0 12px;color:var(--pui-support);font-size:var(--fs-small)}
.risky-access-table tr.risky-everyone td{background:color-mix(in srgb,var(--red) 6%,transparent)}
.risky-holder{display:inline-flex;flex-direction:column;margin:0 6px 4px 0;padding:3px 8px;
  border:1px solid var(--line);border-radius:var(--r-surface);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.risky-holder small{opacity:.7}
/* What the paste did not say, and what it said that does not add up. */
.auction-queue-note{margin:0 18px 10px;padding:9px 12px;border-radius:var(--r-surface);font-size:var(--fs-small);
  background:var(--bluesoft);border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line))}
.auction-queue-note span{display:block;margin-top:2px;opacity:.85}
.auction-total-note{margin:0 18px 10px}

/* ---- Dashboard: one thing at a time -----------------------------------------
 *
 * Measured before this, on the live dashboard: 61 bold leaf elements, 9 distinct font sizes and
 * four decorative chevrons rendered at 28px - the same size as the page title. When sixty-one
 * things are bold, none of them is emphasised; the screen reads as busy rather than as informative,
 * which is what "distracting" actually means.
 *
 * Nothing below changes a colour, a layout or a token. It is entirely about which element in each
 * group is allowed to be the loud one. */

/* The affordance chevron is not content. It was competing with the H1 for size. */
.parity-card-arrow{font-size:var(--fs-body);opacity:.35;font-weight:400}

/* A KPI card had TWO bold elements - the label and the number. The number is the thing being
   looked up; the label is how you know what it is. Only one of them can lead. */
.kpi-copy strong{font-weight:500;color:var(--pui-support)}
.kpi-copy b{font-weight:700}
.kpi-copy small{color:var(--pui-support)}

/* Seven quick actions, every label bold, each already carrying an icon and a card of its own.
   The card is the emphasis; the words inside it do not need to shout too. */
.quick-card strong,.parity-quick-card strong{font-weight:500}

/* Table headings are already uppercase, letterspaced and small. Bold on top of that is a third
   signal for the same job. */
.parity-dashboard .data-table th{font-weight:600}

/* Row actions and "View all" are links and buttons - their shape says they are clickable. */
.parity-dashboard .column-action button,
.parity-dashboard .panel-heading .link-btn{font-weight:500}

/* One text size in the table body. It was rendering at both 16px and 15px for the same kind of
   cell, which reads as a rendering fault rather than a distinction. */
.parity-dashboard .column-text,.parity-dashboard .column-date{font-size:var(--fs-small)}

/* Depth belongs to the panel, not to everything inside it. Nested shadows are what make a screen
   feel cluttered without anyone being able to say why. */
.parity-dashboard .panel .quick-card,
.parity-dashboard .panel .parity-quick-card{box-shadow:none}
.parity-dashboard .panel .quick-card:hover,
.parity-dashboard .panel .parity-quick-card:hover{box-shadow:var(--shadow-raised)}

/* A status cell was carrying TWO bold elements - the pill and the label beside it. The pill is
   already a coloured shape; bolding the words next to it is a second signal for the same fact,
   twelve times over on one screen. */
.parity-dashboard .column-status strong{font-weight:600}
.parity-dashboard .column-status span:not(.status):not(.severity){font-weight:400}
/* Stock paging and search are navigation, not findings. */
.parity-dashboard .dashboard-stock-nav-row button,
.parity-dashboard .dashboard-stock-search-inputs button{font-weight:500}

/* A subtitle sitting under a heading, in the same weight as the heading, takes the heading's
   emphasis away from it. These are counts and context, not findings. */
.parity-dashboard .warning-count-copy,
.parity-dashboard .selected-stock-warning-count{font-weight:400;color:var(--pui-support)}

/* The sale review. It exists to catch a mistake before it is printed onto a contract, so what is
   MISSING has to be as visible as what is present - a blank field is invisible on a screen that
   only lists what was filled in. */
.sw-review{display:grid;gap:12px}
.sw-review-gaps{padding:12px 14px;border-radius:var(--r-surface);font-size:var(--fs-small);
  background:color-mix(in srgb,var(--amber) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line))}
.sw-review-gaps ul{margin:6px 0 0;padding-left:18px}
.sw-review-gaps li{margin:2px 0}
.sw-review-block{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.sw-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.sw-review-head h3{margin:0;font-size:var(--fs-body)}
.sw-review-list{margin:0;padding:6px 14px 12px}
.sw-review-list>div{display:grid;grid-template-columns:minmax(140px,.5fr) 1fr;gap:10px;
  padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.sw-review-list>div:last-child{border-bottom:0}
.sw-review-list dt{color:var(--pui-support);font-size:var(--fs-small)}
.sw-review-list dd{margin:0;font-size:var(--fs-small);color:var(--ink)}
.sw-review-list dd em{color:var(--amber);font-style:normal}
.sw-review-missing dd em{font-weight:600}
.sw-review-total dt,.sw-review-total dd{font-weight:700;font-size:var(--fs-body)}
.sw-review-list dd small{color:var(--pui-support)}
.sw-bhph-checklist{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.sw-bhph-checklist .sw-review-head{margin:-14px -14px 0}
.sw-bhph-checklist .sw-review-head small{color:var(--muted);font-size:var(--fs-micro)}
.sw-bhph-checklist .sw-blurb{max-width:none;font-size:var(--fs-small)}
.sw-bhph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sw-bhph-grid .sw-field small{color:var(--muted);font-weight:400}
.sw-bhph-status-table td:first-child{min-width:230px}
.sw-bhph-status-table td:first-child small{display:block;margin-top:3px;color:var(--muted);font-weight:400}
.sw-bhph-status-table td:not(:first-child){white-space:nowrap}
@media(max-width:700px){.sw-bhph-grid{grid-template-columns:1fr}}

/* The Sales tab leads with the RECORD of the sale, built from the same reviewSections() the
   wizard uses. The full form is still underneath, folded away, because it reaches 42 fields the
   wizard does not - several of which print on the contract. */
.sale-record{margin-bottom:12px}
.sale-record-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);margin-bottom:12px}
.sale-record-head h2{margin:2px 0 4px;font-size:var(--fs-h3);color:var(--ink)}
.sale-record-head p:not(.eyebrow){margin:0;color:var(--pui-support);font-size:var(--fs-small)}
.sale-record-gaps{margin:0 0 12px}
.sale-form-details{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.sale-form-details summary{cursor:pointer;font-weight:600;font-size:var(--fs-small);color:var(--blue);padding:4px 0}
.sale-form-note{margin:6px 0 12px;color:var(--pui-support);font-size:var(--fs-small);max-width:78ch}

/* ---- READING MEASURE ---------------------------------------------------------------------------
 *
 * "A lot of text is still squished." Measured across thirteen screens on 2026-08-06, and the
 * problem was not leading — almost nothing wrapped at a tight line-height. It was LINE LENGTH.
 * Prose was running 96 to 158 characters per line because the containers carried max-width:none
 * and simply grew with the window: the backup explanation reached 158 characters at 1179px, a
 * dashboard footnote 145 at 1215px, field help 122.
 *
 * The comfortable band is roughly 45-85 characters. Past about 95 the eye starts losing its place
 * on the return sweep, so a paragraph reads as a dense slab even when its type and spacing are
 * perfect — which is exactly the complaint, and exactly why chasing line-height found nothing.
 *
 * ch, not px, so the cap scales with the four text-size settings instead of getting tighter every
 * time someone increases the type. 78ch was already in use on .sale-form-note; this generalises it
 * rather than inventing a second convention. Nothing is narrowed that was already inside the band,
 * and a cap only ever stops a line growing — no layout can break from it.
 */
:root{--measure:72ch}
.panel-footnote,
.field-help,.field-hint,
.info-card p,
.notice,
.empty,
.vs-note,.vs-attrib,
.mi-table-note,
.help-article-intro,.help-article p,.help-legacy-note,
.selected-stock,
.wz-note,.wz-why,
.help-hero-v2 p,.help-legacy-notice p,.help-section-heading-v2 h2,
.aim-note,.restore-backup-summary{max-width:var(--measure)}
/* Page intros were capped at 760px, which is ~96 characters at the default size and grows past
   110 at the largest text setting — the one place a fixed pixel cap actively gets worse. */
.page-heading p,.dashboard-heading p{max-width:var(--measure)}
/* Footnotes sit under full-width panels, so they also want a little more air between lines than
   the 1.35 they inherited; they are read, not scanned. */
.panel-footnote{line-height:calc(var(--ui-copy) + 8px)}

/* ---- HELP SCREENSHOT CLICK MARKS ---------------------------------------------------------------
 *
 * Squares over the picture showing where the dealer has to click, drawn from metadata rather than
 * painted into the pixels. The accepted screenshots in this catalogue have their callouts burned in,
 * which is exactly why they could never be refreshed — re-shooting a screen meant re-annotating it
 * by hand, so nobody did and the pictures drifted away from the product.
 *
 * Positioned in PERCENTAGES of the image, so one set of marks is correct at every rendered width,
 * on a high-DPI display, and in the full-size view. */
.help-screenshot-link{position:relative;display:block}
.help-marks{position:absolute;inset:0;pointer-events:none}
.help-mark{position:absolute;border:3px solid var(--mark-colour,#f5a524);border-radius:var(--r-surface);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.55);}
.help-mark-circle{border-radius:50%}
/* The number sits OUTSIDE the box on the top-left corner, so it never covers the control it is
   pointing at — which is the one thing a click mark must not do. */
.help-mark>b{position:absolute;top:-13px;left:-13px;min-width:24px;height:24px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-stadium);background:var(--mark-colour,#f5a524);
  color:#1b1300;font-size:var(--fs-micro);font-weight:700;line-height:1;
  box-shadow:var(--shadow)}
/* Amber reads as "look here" on both the light and dark captures without being mistaken for a
   status colour — red would read as an error and green as a confirmation. */
:root{--mark-colour:#f5a524}
.help-mark-key{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-micro)}

/* Two <small>s had no size rule, so they took the browser default of 0.8333em — 10.83px at the
   small text setting, 13.33px at large. Neither is a whole pixel, and both sit in prose a dealer
   reads while making a decision (a data-check notice, and the retention-window explainer). */
.notice small{font-size:var(--fs-micro)}
.retention-settings-grid label small{font-size:var(--fs-micro)}

/* DASHBOARD QUICK ACTIONS — one column, because two never fitted the labels.
 *
 * Measured on the running app: the quick panel is 422px wide, so a two-column grid gives each card
 * 197px. Minus 34px of padding, a 64px icon and the gap, the label gets 93px — while "Add Customer
 * / Buyer" needs 157px and "Form Generation Center" needs 173px. Both were silently ellipsised to
 * "Add Customer / Bu…" and "Form Generation …" on the first screen a dealer sees.
 *
 * Wrapping is not available as a fix: test_v02317_dashboard_context_computed.py asserts the label's
 * computed white-space is nowrap ("Dashboard Quick Action label may wrap"), and the partner bounded
 * these cards on purpose. Shrinking the icon does not buy enough either — 40px and 44px icons were
 * both tried against the live page and all three long labels still truncated. One column gives each
 * card ~394px and every label fits with room to spare, at every text size.
 *
 * justify-content:flex-start because centring icon+label as a unit put every icon at a different x
 * once they were stacked — invisible in two narrow columns, ragged in one wide one.
 */
.quick-panel .parity-quick-grid{grid-template-columns:minmax(0,1fr)}
.quick-panel .parity-quick-card,
.quick-panel .parity-quick-card.quick-maintenance{justify-content:flex-start;flex-direction:row;align-items:center;text-align:left}
.quick-panel .parity-quick-card .quick-action-image,
.quick-panel .parity-quick-card.quick-maintenance .quick-action-image{margin-inline:0}

/* FIX84 dashboard correction: retain the consolidated workflow, use Steward's
   theme-aware icon set, and keep dealer branding artwork off the work surface. */
.mine-dashboard-style{min-height:calc(100vh - 62px);background:var(--canvas)}
.mine-dashboard-style .dms-ico-raster{display:none!important}
.mine-dashboard-style .parity-kpi-asset>.dms-ico{display:block;width:30px;height:30px}
.mine-dashboard-style .parity-kpi-asset>.inventory-kpi-icon{width:32px;height:32px}
.mine-dashboard-style .quick-card>.dms-ico{display:block!important;width:28px!important;height:28px!important;flex:0 0 28px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--accent)}
.mine-dashboard-style .panel-title-with-icon>.dms-ico{display:block!important;width:20px!important;height:20px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--accent)}
.mine-dashboard-style .parity-dashboard-grid{grid-template-rows:auto auto;align-items:start}
.mine-dashboard-style .activity-panel{align-self:start;height:auto!important;min-height:0}
.mine-dashboard-style .activity-panel .activity-table-wrap{flex:0 1 auto;min-height:0;max-height:330px;overflow:auto}
.mine-dashboard-style .quick-panel .parity-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.mine-dashboard-style .quick-panel .parity-quick-card,
.mine-dashboard-style .quick-panel .parity-quick-card.quick-maintenance{min-height:72px;max-height:82px;padding:8px 12px}
.mine-dashboard-style .quick-panel .parity-quick-card.quick-maintenance{justify-content:center}
.mine-dashboard-style .quick-panel .parity-quick-card:last-child{grid-column:1/-1}
.mine-dashboard-style .readiness-attention-only{padding:8px 12px 14px}
.mine-dashboard-style .readiness-attention-only>h3{margin:0 0 8px;color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mine-dashboard-style .readiness-clear{margin:0;padding:14px 8px;color:var(--muted);font-size:var(--fs-small)}
.mine-dashboard-style .readiness-group>h3{margin:0 0 8px;color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mine-dashboard-style .parity-readiness-list{display:grid;width:100%;padding:0;align-content:start}
.mine-dashboard-style .parity-readiness-row,
.mine-dashboard-style .parity-readiness-row.needs-action{
 width:100%;
 grid-template-columns:24px minmax(0,1fr) 90px;
 column-gap:10px;
 min-height:42px;
 padding:5px 0;
 border-left:0;
 border-bottom:0;
}
.mine-dashboard-style .parity-readiness-row>.readiness-status-image{align-self:center;justify-self:center;width:18px!important;height:18px!important;margin:0!important}
.mine-dashboard-style .parity-readiness-row>.readiness-copy{display:flex;align-self:center;min-width:0;flex-direction:column}
.mine-dashboard-style .readiness-copy>strong{font-size:var(--fs-small);font-weight:700}
.mine-dashboard-style .readiness-copy>small{margin-top:2px;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);white-space:normal}
.mine-dashboard-style .parity-readiness-row>.readiness-fix{width:90px;min-width:90px}
.mine-dashboard-style .parity-card-arrow{font-size:var(--fs-h1);opacity:1;font-weight:700}
.mine-dashboard-style .kpi-copy strong,
.mine-dashboard-style .quick-card strong{
 color:#07172b;
 font-weight:700;
}
.mine-dashboard-style .warning-count-copy,
.mine-dashboard-style .selected-stock-warning-count{font-weight:700;color:#234b7a}
@media(max-width:1500px){
 .mine-dashboard-style .parity-kpi-asset>.inventory-kpi-icon{width:30px;height:30px}
 .mine-dashboard-style .quick-card>.dms-ico{width:26px;height:26px;flex-basis:26px}
}
@media(max-width:720px){
 .mine-dashboard-style .quick-panel .parity-quick-grid{grid-template-columns:minmax(0,1fr)}
 .mine-dashboard-style .quick-panel .parity-quick-card:last-child{grid-column:auto}
 .mine-dashboard-style .parity-readiness-row,
 .mine-dashboard-style .parity-readiness-row.needs-action{grid-template-columns:27px minmax(0,1fr) auto}
 .mine-dashboard-style .parity-readiness-row>.readiness-fix{grid-column:2/-1;justify-self:end}
}
.quick-panel .parity-quick-card strong{min-width:0;text-align:left}

/* The spreadsheet route, folded away under the Frazer step. It is the fallback — a dealer whose
   backup is listed should never have to read past it, and one whose backup is missing must still
   find it in one click. */
.wz-fallback{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-surface);padding:12px 14px;background:var(--surface-2,var(--surface))}
.wz-fallback>summary{cursor:pointer;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);font-weight:600}
.wz-fallback[open]>summary{margin:0 0 12px}

/* The Sales Archive summary strip.
 *
 * Type comes from the scale (--fs-*) with its paired --lh-* step, never a raw rem and never a
 * unitless ratio beside a size — both land on fractional pixels and smear the line box. Spacing is
 * on the even 2px rhythm. See the render-system section of CLAUDE.md before changing any of it. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.stat-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.stat-card>span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.04em;text-transform:uppercase}
.stat-card>strong{color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.02em}
/* The filter bar shares the archive's panel, so it needs its own padding rather than inheriting
   the table's. Wraps instead of overflowing — a dealer on a laptop should never scroll sideways
   to reach Reset. */
.filter-bar{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.filter-bar label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.filter-bar select,.filter-bar input{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink)}
.filter-bar input{min-width:240px}
.filter-bar .filter-buttons{display:flex;gap:8px;margin-left:auto}

/* The guided sale's dealer-finance step.
 *
 * Two big answers first, then three questions, then one button. Type is on the scale with its
 * paired line-height and spacing is on the even 2px rhythm — see the render rules in CLAUDE.md
 * before touching any size here. */
.sw-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 18px}
.sw-option{display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-align:left;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);cursor:pointer}
.sw-option:hover{border-color:var(--blue)}
.sw-option.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--bluesoft)}
.sw-option strong{color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.sw-option span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-bhph{display:flex;flex-direction:column;gap:16px}
/* The derived amount, with its arithmetic under it. Not an input: it is the deal's own sum, and a
   dealer who disagrees with it should see WHICH number they disagree with. */
.sw-derived{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--surface)}
.sw-derived>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sw-derived span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.04em;text-transform:uppercase}
.sw-derived strong{color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2)}
.sw-derived small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* AUTO ADJUST (Adjust Pricing / Target Out-the-Door).
 *
 * Measured on the running app: .adjust-pricing-modal, .adjust-pricing-entry and
 * .adjust-current-total had NO rules at all — they sit in the grandfathered
 * tests/fixtures-unstyled-classes.txt allowlist, so the markup-has-styles test never caught them.
 * The label ran straight into the input and "Current Customer-Facing Total$6,850.00" rendered as
 * one unbroken string. It has been like that since the partner's tree; promoting it to the "Auto
 * Adjust" button on the money page is what finally made somebody open it. */
.adjust-pricing-modal{max-width:560px}
.adjust-pricing-entry{display:grid;gap:14px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adjust-pricing-entry>label{display:grid;gap:6px}
.adjust-pricing-entry>label>span{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.adjust-pricing-entry input{min-height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-control);background:var(--surface);color:var(--ink);
  font-size:var(--fs-body);line-height:var(--lh-body);font-variant-numeric:tabular-nums}
.adjust-pricing-entry input:focus{outline:2px solid var(--accent);outline-offset:-1px}
/* Label left, figure right — the two were butted together with no separation at all. */
.adjust-current-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.adjust-current-total span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.adjust-current-total strong{color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);
  font-variant-numeric:tabular-nums}

/* A DATE YOU CAN TYPE, with the calendar beside it. The text box is the field of record and takes
   the room; the picker is a small square next to it, because it is the fallback and not the point. */
/* align-items:end, not stretch — measured at 44x66, the picker was growing to the full label
   height and reading as a stray sliver beside the next field. */
/* min-width:0 IS THE FIX, and it is the whole fix.
   Measured: the text box (209px) plus the gap plus the picker came to 257px inside a 214px grid
   track, so the picker hung 30px into the NEXT field's column — which is what the stray sliver
   beside "Odometer at delivery" actually was. A grid item defaults to min-width:auto and refuses
   to shrink below its content, so the flex row had nothing to shrink against. */
.sw-grid>.sw-field{min-width:0}
/* A <select> sizes to its widest OPTION, not its container — "Exceeds Mechanical Limits" pushed
   the Odometer status box past its column. Measured on the cancellation page. */
.sw-field select{width:100%;min-width:0;max-width:100%}
.sw-date-inputs{display:flex;gap:6px;align-items:end;min-width:0}
.sw-date-inputs input[type=text]{flex:1 1 auto;min-width:0}
/* THE CALENDAR IS AN ICON, NOT A SECOND DATE FIELD.
   A native <input type=date> narrowed to 44px still lays out its own "mm/dd/yyyy" text and clips
   it — on screen that was a 44px box containing "(⌷", which reads as a rendering fault sitting
   between two real fields. Measured twice: sizing it did not help because the text is the problem.
   The value text is made transparent so only the browser's calendar indicator paints; the text box
   beside it is the field of record and shows the actual date. */
/* The calendar button — an icon we draw, so it cannot come out blank the way a suppressed native
   date input did. The native input beside it is hidden and exists only to raise showPicker(). */
.sw-date-pick{flex:0 0 auto;width:42px;height:42px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);
  color:var(--muted);cursor:pointer}
.sw-date-pick svg{width:20px;height:20px}
.sw-date-pick:hover{color:var(--ink);border-color:var(--accent)}
.sw-date-pick:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
/* .sw-field input sets min-height:44px, which kept this "hidden" input a full-size visible box —
   measured. Needs the matching specificity, and min-height reset explicitly. */
.sw-field input.sw-date-native{position:absolute;width:1px;height:1px;min-height:0;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}

/* THE CO-BUYER, collapsed until asked for. Closed it is one button on a line; open it is a panel
   that reads as a section of the page rather than a second form floating on it. */
.sw-cobuyer{margin:18px 0 0}
.sw-cobuyer-closed{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;
  border:1px dashed var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sw-cobuyer-closed span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-cobuyer-open{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sw-cobuyer-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sw-cobuyer-head h3{flex:1 1 auto;margin:0;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}

/* THE OUT-THE-DOOR BLOCK. Measured on the running app: as a bare <dl> this rendered with every
   figure on its own line indented 40px by the browser default dd margin, which is most of what
   "it's all squished" was. Rows, label left, figure right, margin reset. */
.sw-otd-summary{display:grid;gap:6px;margin:16px 0 0;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sw-otd-summary>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sw-otd-summary dt{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-otd-summary dd{margin:0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);
  font-variant-numeric:tabular-nums}
/* The total is the line a customer asks about by name, so it is the one allowed to be loud. */
.sw-otd-summary .sw-otd-total{padding-top:8px;border-top:1px solid var(--line)}
.sw-otd-summary .sw-otd-total dt{color:var(--navy);font-weight:600;font-size:var(--fs-body);line-height:var(--lh-body)}
.sw-otd-summary .sw-otd-total dd{color:var(--navy);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-h3)}

/* ROWS THAT LINE UP. Measured: a label carrying a hint (the "taxed" marker, the odometer note) is
   taller than a bare one, so its input started 11px lower than its neighbours' — every mixed row
   was ragged. Each field fills its grid row and pins the input to the bottom, so inputs share a
   baseline whatever the label above them does. */
.sw-grid>.sw-field{height:100%;grid-template-rows:1fr auto}

/* The actions that close the money page. Auto Adjust sits last in source order and stays last
   here — it is the tool you reach for once everything above it is settled. */
/* GETTING PAID. One row per platform: a sign-in button that opens their own site, a switch,
   and the box for the link they paste back. No connection state, because there is no connection. */
.pay-links{display:grid;gap:16px;margin:20px 0 0}
.pay-intro{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* TEST MODE. Loud on purpose and never subtle: a dealer who reads "Connected" while every charge is
   play money would believe money was arriving. Amber rather than red — it is a correct state to be
   in, not a fault. */
.pay-sandbox{margin:0;padding:12px 14px;border:1px solid var(--amber);border-radius:var(--r-surface);
  background:var(--ambersoft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.pay-sandbox strong{font-weight:700}
/* The two groups answer different questions, so they get different headings rather than one list. */
.pay-group-head{display:grid;gap:2px;margin:6px 0 0;color:var(--navy);
  font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.pay-group-head small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:400}
.pay-row-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
/* One row shape for both kinds: mark, copy, then whatever the row's action is. The handle rows put
   their field on a second line via the wrap, so the two lists still line up down the left edge. */
.pay-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.pay-row.pay-connected,.pay-row.is-on{border-color:var(--green)}
.pay-row.pay-broken{border-color:var(--amber);background:var(--ambersoft)}
/* Unavailable is DIMMED, not hidden. A dealer should be able to see that Square exists and is
   coming, rather than wonder whether they missed it. */
.pay-row.pay-unavailable{opacity:.72}
.pay-copy{flex:1 1 200px;min-width:0;display:grid;gap:2px}
.pay-copy strong{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.pay-copy small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* THE QUALIFIER ON THE LINE ABOVE IT, set apart because a dealer choosing PayPal has to weigh this
   one rather than skim it. Amber, not red: a payment that can be reversed is a trade-off to accept
   knowingly, not a fault. Written `.pay-copy>small.pay-caution` because `.pay-copy small` is 0,1,1
   and a bare `.pay-caution` would silently lose to it — the same specificity trap
   `.pay-method-caveat` fell into once already, and it was invisible both times until measured. */
.pay-copy>small.pay-caution{margin-top:4px;padding-left:8px;border-left:2px solid var(--amber);
  color:var(--amber);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pay-action{flex:0 0 auto}
.pay-action-group{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pay-state{flex:0 0 auto;padding:4px 12px;border-radius:var(--r-stadium);background:var(--line);color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.pay-state.is-on{background:var(--greensoft);color:var(--green)}
/* PAY AT THE DESK — the QR beside what it is for. Grid rather than flex so the code keeps its
   square and the copy takes the rest, at any width. */
.pay-method-desk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
  padding:18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
/* THE NUMBER IS THE POINT. A dealer reads it out and a customer checks it against what they expect
   to pay, and a figure set at body size is a figure nobody checks. Tabular figures so the digits
   line up rather than shimmying as the total changes. */
.pay-desk-eyebrow{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.06em}
/* Specific enough to beat `.pay-method-copy>strong`, which sets every other strong on this panel to
   body size. Measured, not assumed: without the extra class on the selector this rendered at 14px —
   the same size as the sentence under it — and the number stopped being the thing you see first. */
.pay-method-copy>strong.pay-desk-amount{color:var(--ink);font-size:var(--fs-h2);
  line-height:var(--lh-h2);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pay-desk-lead{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* WHITE UNDER THE CODE, in dark mode too. A QR is read as dark modules on a light field; inverting
   it is the one change that stops half of phone cameras seeing it at all. */
.pay-qr{flex:0 0 auto;padding:8px;border-radius:var(--r-surface);background:#ffffff;line-height:0}
/* NO FIXED SIZE HERE. This pinned 168px and therefore overrode whatever the generator chose, so the
   whole-pixel-per-module sizing in qr-code.js would have been thrown away at the last step — the
   code kept rendering at the size that would not scan. The SVG carries its own width and height,
   computed as a whole number of pixels per module; CSS only stops it overflowing a narrow card. */
.pay-qr svg{display:block;max-width:100%;height:auto}
/* The destination in words under the square, because a QR is unreadable to the person scanning it
   and "it looks like a QR code" is the only check they can otherwise make. */
/* Painted on the QR's own white card, so the colour is fixed rather than themed — this text sits on
   #ffffff in all ten designs and both appearances, and a themed ink would vanish in dark mode. */
.pay-qr-host{display:block;margin-top:6px;text-align:center;color:#3c3c46;
  font-size:var(--fs-micro);line-height:calc(var(--fs-micro) + 4px);letter-spacing:.02em}
.pay-qr-refused{display:grid;gap:4px;max-width:220px;padding:14px;background:var(--surface);
  color:var(--ink);border:1px dashed var(--line)}
.pay-qr-refused span{font-size:var(--fs-small);line-height:calc(var(--fs-small) + 6px);font-weight:600}
.pay-qr-refused small{font-size:var(--fs-micro);line-height:calc(var(--fs-micro) + 6px);opacity:.85}
.pay-method-desk .pay-method-copy{display:grid;gap:8px;min-width:0;flex:none}
.pay-method-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
/* NOTHING SET UP AT ALL. Stated at the top of the screen, because an empty form reads as a form and
   not as "you cannot take a payment yet". Bordered rather than filled: it is a gap to close, not an
   error somebody made. */
.pay-gap{margin:0;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--r-surface);
  background:var(--surface-2,var(--surface));color:var(--ink);
  font-size:var(--fs-small);line-height:var(--lh-small)}
.pay-gap strong{font-weight:700}
/* The same panel as the working one, with a dashed square where the code belongs. A dealer who has
   seen the real thing once reads this instantly as "the code is missing" without reading a word. */
.pay-method-unset{border-style:dashed}
/* A card reader has nothing to scan, so this is the same panel without the code — the amount, big
   enough to key in off the screen without misreading it, and the instruction beside it. */
.pay-method-inperson{grid-template-columns:auto minmax(0,1fr);align-items:center}
.pay-method-inperson .pay-mark{align-self:start}
.pay-qr-empty{display:grid;place-items:center;width:184px;height:184px;border-radius:var(--r-surface);
  border:1px dashed var(--line);color:var(--muted)}
.pay-qr-empty svg{width:56px;height:56px;fill:currentColor;opacity:.55}
@media (max-width:560px){.pay-qr-empty{width:140px;height:140px}}
/* A settled row: the money reaches a confirmed account, and it should look finished. */
.pay-row.pay-handle.is-on{border-color:var(--green)}
/* Always present, never hidden behind a disclosure: a dealer who believed this payment was being
   watched would hand over keys against money that never arrived. Set QUIET rather than amber, and
   that is a deliberate choice — it is a statement of fact on every payment, not a fault, and an
   alarm colour that fires every single time is one people stop reading. The green confirmation is
   the only accent on this panel, so it keeps its meaning. Specific enough to beat
   `.pay-method-copy>small`; measured, because the first version lost to it silently. */
.pay-method-copy>small.pay-method-caveat{margin-top:2px;padding-top:8px;
  border-top:1px solid var(--line);color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro)}
@media (max-width:560px){
  .pay-method-desk{grid-template-columns:minmax(0,1fr);justify-items:start}
}

/* THE LOGO TILE — rebuilt after the owner reported it, twice, as looking bad.
 *
 * What was wrong, measured rather than guessed: the tile painted each platform's BRAND COLOUR as
 * its background and layered the white/reversed logo on top. Five saturated blocks — indigo, navy,
 * cyan, purple, charcoal — stacked down a list, fighting each other and fighting whichever of the
 * ten designs was active. It also broke the marks: PayPal's monogram is nearly square and Venmo's
 * wordmark is 5.3:1, so one background-size could not serve both and each looked wrong in a
 * different way.
 *
 * What it is now is what every "connect your accounts" screen worth copying does: a NEUTRAL WHITE
 * tile with a hairline border and the platform's own FULL-COLOUR mark inside it. The brand colour
 * survives where it belongs — in the logo itself. The row stops shouting, the marks are legible,
 * and nothing clashes with a design theme because the tile has no opinion.
 *
 * White in dark mode too, deliberately: these are full-colour marks drawn for light backgrounds,
 * and every one of these brands' guidelines says so. A dark tile would need the reversed variant of
 * five different assets to look right, which is more ways to be wrong, not fewer.
 *
 * The NAME is real text inside the tile, and the rules that supply artwork make that text
 * transparent. So a platform whose asset is missing, blocked, or not yet added shows its name
 * cleanly instead of an empty box — which is exactly what Square does below. */
.pay-mark{flex:0 0 auto;display:grid;place-items:center;box-sizing:border-box;
  width:104px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-surface);
  background-color:#fff;background-repeat:no-repeat;background-position:center;
  /* AN EXPLICIT DARK INK, because the tile's own background is hardcoded #fff in BOTH appearances.
     Without this the text fallback inherits --ink, which is near-white in dark mode: measured at
     1.17:1 on the running app 2026-08-14 — white on white, the name simply gone. The fallback is
     the whole reason a vendor we hold no artwork for is still legible, so it cannot be theme-bound.
     Same fixed #334 the .steward-choice tiles use, for the same reason. */
  color:#334;
  /* Two lines, centred, at the micro step: "Adobe Acrobat Sign" does not fit a 104px box on one
     line and was being CLIPPED by overflow:hidden — measured as a scrollHeight overflow on the same
     walk. A name that is cut in half is no better than a blank tile. */
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;letter-spacing:-.01em;
  text-align:center;overflow:hidden}
.pay-mark-sm{width:80px;height:28px;padding:0 6px;border-radius:var(--r-control);
  font-size:var(--fs-micro);line-height:var(--lh-micro)}

/* Sized per mark, because the aspect ratios are not close to each other: Venmo's wordmark is
   1400x265 and PayPal's monogram is roughly square. A single percentage that suits one leaves the
   other either enormous or a sliver — which is what the previous version did. Wordmarks are
   constrained by WIDTH, the monogram by HEIGHT. */
.pay-mark[data-pay-id="stripe"]{background-image:url("assets/Stripe wordmark - Blurple.svg");
  background-size:72% auto;color:transparent}
.pay-mark[data-pay-id="paypal"]{background-image:url("assets/payment/PayPal-Monogram-FullColor-RGB.png");
  background-size:auto 64%;color:transparent}
.pay-mark[data-pay-id="venmo"]{background-image:url("assets/payment/Venmo_Logo_Blue.png");
  background-size:76% auto;color:transparent}
.pay-mark[data-pay-id="zelle"]{background-image:url("assets/payment/zelle-1.svg");
  background-size:64% auto;color:transparent}
/* Square's 2025 mark is MONOCHROME — the kit ships black and white only, with no full-colour
   variant. Black is the correct one here: the tile is white, so the reversed version would be
   invisible on it. This replaced the text fallback that stood in while there was no artwork. */
.pay-mark[data-pay-id="square"]{background-image:url("assets/payment/square.svg");
  background-size:64% auto;color:transparent}
/* THE ONE TILE THAT GOES DARK IN DARK MODE, and the reason it is alone in that.
 *
 * The rule above this group is that the tile stays white in both appearances, because these are
 * full-colour marks drawn for light backgrounds and reversing five brands would need five reversed
 * assets. Square is the exception on the only ground that matters: its 2025 kit is MONOCHROME and
 * ships a genuine reversed variant, so there is a correct white-on-dark answer here rather than an
 * improvised one.
 *
 * The ground goes TRANSPARENT rather than to a dark colour, so the tile sits on whichever surface
 * it lands on — the queue table, the account panel, the connect screen — instead of stamping one
 * fixed dark rectangle across ten design presets that each have their own dark surface.
 *
 * Cash App is the only other brand with the assets for this (a dark-mode green and a white
 * monochrome, both in web/assets/). It is deliberately NOT done here: doing one brand because it is
 * correct is a fix, doing two out of five is a half-finished row. */
html[data-theme="dark"] .pay-mark[data-pay-id="square"]{background-color:transparent;
  background-image:url("assets/payment/square-white.svg")}
/* Cash App's SYMBOL, not its wordmark. The primary lockup is 897x210 — 4.3:1 — which in a square
   tile would either be a sliver or overflow it; the symbol is 210x210 and sits like PayPal's
   monogram. Constrained by HEIGHT for the same reason PayPal's is.
   Green on the white tile is Cash App's own light-mode usage, which is what this tile is: white in
   both appearances, deliberately, because these are full-colour marks drawn for light backgrounds.
   (The kit also ships a dark-mode green and a white monochrome, in web/assets/ — neither is right
   on white.) */
.pay-mark[data-pay-id="cashapp"]{background-image:url("assets/payment/cashapp.svg");
  background-size:auto 62%;color:transparent}
/* Cash App in dark mode needs NO DIFFERENT ASSET, which is not what the note above assumed.
 *
 * Checked against the kit rather than guessed: assets/payment/cashapp.svg is byte-identical to
 * RGB_CashApp_Symbol_Green.svg, and Cash App's own RGB_CashApp_Logo_Primary_Green_Dark_Mode.svg
 * keeps that exact same green (#00e013) and differs from the light-mode lockup only by turning the
 * WORDMARK TEXT white. We render the symbol on its own, with no text — so the light and dark
 * symbols are the same artwork, and their dark-mode guidance is already satisfied by dropping the
 * white ground. The white monochrome in web/assets/ is for the no-colour case, not this one.
 *
 * So this rule swaps no image; it only lets the green sit on the surface, the way Cash App's own
 * dark-mode lockup does. */
html[data-theme="dark"] .pay-mark[data-pay-id="cashapp"]{background-color:transparent}

/* THE E-SIGNATURE AND PHONE SERVICES share this tile (launcher/service_connections.go), so a dealer
   reads one kind of row across the whole connect screen rather than learning two.
   Both are wide wordmarks — DocuSign 70x15 (4.7:1), RingCentral 1156x168 (6.9:1) — so both are
   constrained by WIDTH. RingCentral takes a touch more because at equal width a 6.9:1 mark renders
   visibly shorter than a 4.7:1 one, and matching the percentages would make it look smaller. */
.pay-mark[data-pay-id="docusign"]{background-image:url("assets/payment/docusign.svg");
  background-size:76% auto;color:transparent}
.pay-mark[data-pay-id="ringcentral"]{background-image:url("assets/payment/ringcentral.svg");
  background-size:84% auto;color:transparent}
/* DROPBOX SIGN AND SIGNNOW, on the e-signature picker rows.
   Both assets were already in the tree and already painted on the CHOOSER rows
   (.steward-choice[data-logo=…] below) — but not here, so the moment the picker started using the
   .pay-mark tile both vendors rendered as text with no artwork. Measured in the running app
   2026-08-14: "NO ARTWORK" for dropbox-sign and signnow while their .svg files sat beside DocuSign's.
   A tile is not a logo system until the same asset paints in every place the tile is used.
   Unlike the DocuSign and RingCentral wordmarks above, these two are SQUARE glyphs (34x34 and
   140x140), so they are constrained by HEIGHT like the PayPal monogram and the Teams mark. */
.pay-mark[data-pay-id="dropbox-sign"]{background-image:url("assets/payment/dropbox-sign.svg");
  background-size:auto 70%;color:transparent}
.pay-mark[data-pay-id="signnow"]{background-image:url("assets/payment/signnow.svg");
  background-size:auto 74%;color:transparent}

/* THE PART OF CONNECTIONS THAT WORKS WITH NOTHING REGISTERED (web/connections-setup.js).
   Which e-signature site this lot uses, and how this computer calls and texts. Both sit ABOVE the
   connect rows, and both deliberately reuse .pay-row / .pay-mark / .pay-copy so the tab reads as one
   list of accounts rather than as two unrelated widgets stacked up. Only the wrapper, the picked
   state and the try box are new. */
.conn-setup{display:grid;gap:10px;margin:0 0 18px}
/* A row that is an ANSWER rather than an account: same tile, no coloured left edge until it is the
   chosen one, when .is-on gives it the same green border a connected account gets. */
.conn-pick{cursor:default}
.conn-setup-actions{display:grid;gap:6px;justify-items:start}
/* The try box. A phone number, and two buttons that open exactly what a real call would open — the
   only end-to-end proof this screen can offer before a dealer rings a customer for real. */
.conn-try{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.conn-try label{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.conn-try input{width:180px;min-height:32px;padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--r-surface);background:var(--surface);color:var(--ink);
  font-size:var(--fs-body);line-height:var(--lh-body)}
.conn-try input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* CALL / TEXT / EMAIL, wherever a person appears (web/reach.js). One row of buttons on a lead, on a
   collections queue row and on a financed account, so the three screens that contact a human all
   look and behave the same. */
.reach-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.reach-block{display:grid;gap:6px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}

/* The handle rows — Venmo and Zelle. No sign-in button anywhere on them, owner-confirmed: "Zelle is
   with a phone number so it's ok", "Venmo they don't need to log in, they just look up their
   account". One field, on its own line so it has room to be typed into. */
.pay-handle-field{flex:1 0 100%;display:grid;gap:6px;margin:4px 0 0;padding:12px 0 0;
  border-top:1px solid var(--line)}
.pay-handle-field>label{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.pay-hint{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* "Where do I find this?" — collapsed on every row, because these links each live somewhere
   different inside a different app and a field label cannot teach that. A dealer who already has
   theirs pasted never opens it; one who is stuck finds it on the row they are stuck on. */
.pay-guide{margin:0}
.pay-guide>summary{cursor:pointer;color:var(--accent);font-size:var(--fs-micro);
  line-height:var(--lh-micro);font-weight:600;list-style:none;width:fit-content}
.pay-guide>summary::-webkit-details-marker{display:none}
.pay-guide>summary::before{content:"? "}
.pay-guide>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-control)}
.pay-guide ol{display:grid;gap:6px;margin:8px 0 0;padding:0 0 0 20px;color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pay-guide li{padding-left:2px}
.pay-guide strong{color:var(--ink);font-weight:700}
/* The provider's own page, closing the guide. Ours goes stale when PayPal moves a button; theirs
   does not, because theirs IS the button. */
.pay-guide-official{margin:10px 0 0}
.pay-guide-official a{color:var(--accent);font-size:var(--fs-micro);line-height:var(--lh-micro);
  font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* The box and the button that fetches what goes in it, as ONE control — a seam down the middle
   rather than two loose objects a dealer has to relate for themselves. */
.pay-input-group{display:flex;align-items:stretch;gap:0;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.pay-input-group:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.pay-input-group input{flex:1 1 auto;width:100%;min-width:0;box-sizing:border-box;
  border:0;border-radius:0;background:transparent;box-shadow:none}
.pay-input-group input:focus{outline:none;box-shadow:none}
.pay-getlink{flex:0 0 auto;border:0;border-left:1px solid var(--line);border-radius:0;
  white-space:nowrap;align-self:stretch;display:inline-flex;align-items:center}
/* Save sits INSIDE the field group, immediately after the input and before "Get my link" — the
   affirmative action nearest the thing it acts on, and left of the link that navigates away. It is
   primary-coloured because it is the one control on this row that changes anything; "Get my link"
   only opens the provider's page. */
.pay-save{flex:0 0 auto;border:0;border-left:1px solid var(--line);border-radius:0;
  white-space:nowrap;align-self:stretch;display:inline-flex;align-items:center}

/* HOW THEY ARE PAYING — radio chips carrying each method's mark, replacing a <select> that could
   not show one. The radio itself is hidden from sight but NOT from the accessibility tree or the
   keyboard: arrow keys still move between options and :focus-visible on the input draws the ring on
   the chip, so this keeps everything the select gave away for free. */
.sw-tender-field{margin:0 0 14px;padding:0;border:0}
.sw-tender-field legend{padding:0;font-size:var(--fs-small);font-weight:600;color:var(--pui-support)}
.sw-tender-field legend small{display:block;font-weight:400;color:var(--muted)}
.sw-tender-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sw-tender{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-surface);background:var(--surface);cursor:pointer}
.sw-tender:hover{border-color:var(--accent)}
.sw-tender[data-chosen="1"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.sw-tender input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sw-tender:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.sw-tender-name{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink)}
/* A drawn mark for the methods nobody owns — cash, a cheque, a wire. Sized to the same box as the
   brand tiles so a row of mixed methods sits on one rhythm instead of jumping. */
.sw-tender-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:22px;border-radius:var(--r-control)}
.sw-tender-glyph svg{width:22px;height:15px}
.sw-tender-none{color:var(--muted);font-size:var(--fs-small)}
/* The brand tiles reuse .pay-mark, which paints a white plate — right for every one of these
   marks, all of which are drawn for a light background. */
.sw-tender .pay-mark{width:52px;height:22px}

/* Find-a-Vendor shop card: the street-map layer.
   Sits between the monogram and the shop's own photo — context, not the subject — so it is muted,
   and a real photo landing on top of it reads as an upgrade rather than a swap of two equal images.
   Lives here rather than beside its .vs-* siblings in vendor-search.js because those are injected
   at runtime and invisible to test_markup_has_styles, which requires a real rule for a new class. */
.vs-map{filter:saturate(.85) contrast(.95);opacity:.92}
/* THE CONFIRMATION. The one line that decides whether a dealer's money reaches them, so it carries
   a MARK and not only a colour — about one man in twelve cannot separate the green from the amber.
   The icon is the signal; the colour reinforces it. */
.pay-verdict{display:flex;align-items:flex-start;gap:6px;margin:0;
  font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pay-verdict svg{flex:0 0 auto;width:14px;height:14px;margin-top:1px;fill:currentColor}
.pay-verdict strong{font-weight:700}
.pay-verdict.is-on{color:var(--green)}
.pay-verdict.is-warn{color:var(--amber)}

/* ON A DEAL — what to do about the method just chosen. */
.pay-method{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.pay-method-copy{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.pay-method-copy>strong{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.pay-method-copy>small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.pay-method code{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);
  word-break:break-all}
.pay-method-ready{border-color:var(--green)}
.pay-method-setup{background:var(--ambersoft)}
.pay-method-plain p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.pay-ondeal{margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.pay-ondeal>strong{display:block;margin:0 0 10px;color:var(--navy);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.pay-ondeal ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pay-ondeal li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pay-ondeal li>span{flex:0 0 auto;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.pay-ondeal code{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* THE DEALER FINANCE WINDOW.
 *
 * Thirty-three classes in here had no rules at all — bhph-workspace, bhph-panel, bhph-core-grid,
 * bhph-terms-grid, the reconcile block, the schedule table, all of it — so the window rendered as
 * raw HTML with browser defaults: labels butted against values, no panels, no rhythm. Measured on
 * the running app after the owner called it sloppy. It matters more than it did, because choosing
 * "We are financing it" now opens this window as the primary path rather than an optional extra.
 *
 * Structure only. No colours invented: every value is an existing token, so all ten designs and
 * both appearances follow without a second pass. */
.bhph-workspace{display:grid;gap:18px}
.bhph-main-column{display:grid;gap:18px;min-width:0}
.bhph-panel{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
/* The inputs panel is where the dealer works, so it leads; the schedule is reference and may be
   long, so it gives its table the full width to line the columns up. */
.bhph-input-panel{border-left:4px solid var(--accent)}
.bhph-schedule-panel{padding:16px 18px}
.bhph-panel-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.bhph-panel-heading .bhph-step{color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
/* "Generated" / "Not generated" — a state chip, so it reads as status rather than as a heading. */
.bhph-state{padding:2px 10px;border-radius:var(--r-stadium);background:var(--line);color:var(--ink);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.bhph-terms-panel.not-generated .bhph-state{background:var(--ambersoft)}
.user-input{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);
  letter-spacing:.04em;text-transform:uppercase}

/* The field grids. Two columns where there is room, one where there is not — the labels were
   running straight into their inputs at every width. */
.bhph-core-grid,.bhph-terms-grid{display:grid;gap:12px 18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}
.bhph-core-grid .deal-field,.bhph-terms-grid .deal-field{min-width:0}
.bhph-readonly-field input,.bhph-readonly-field select{background:var(--line);color:var(--muted)}

/* The derived figure and the sum behind it. This was one unbroken string:
   "Current Deal Total $7,499.99– Down Payment $0.00= Expected Amount Financed $7,499.99". */
.bhph-auto-amount{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:14px 0 0;padding:12px 14px;border-radius:var(--r-surface);background:var(--bluesoft)}
.bhph-auto-amount strong{color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3);
  font-variant-numeric:tabular-nums}
.bhph-reconcile{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface)}
.bhph-reconcile.matched{border-color:var(--green);background:color-mix(in srgb,var(--greensoft) 45%,transparent)}
.bhph-reconcile-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bhph-reconcile-head strong{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
/* The arithmetic, spaced so each term is readable as a term. */
.bhph-reconcile-formula{display:flex;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0;color:var(--muted);
  font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.bhph-reconcile-formula strong{color:var(--ink);font-weight:600}
.bhph-reconcile-match{color:var(--green);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.bhph-auto-note,.bhph-preview-note{margin:10px 0 0;color:var(--muted);
  font-size:var(--fs-small);line-height:var(--lh-small)}

.bhph-generate-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 0}
.bhph-generate-button{min-height:44px;padding:0 20px}
.bhph-override-toggle{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* The schedule. Sixty rows of money, so it scrolls in its own box and the figures line up. */
.bhph-schedule-wrap{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-surface)}
.bhph-schedule-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:var(--lh-small)}
.bhph-schedule-table th,.bhph-schedule-table td{padding:8px 12px;text-align:right;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.bhph-schedule-table th:first-child,.bhph-schedule-table td:first-child{text-align:left}
.bhph-schedule-table thead th{position:sticky;top:0;background:var(--surface);color:var(--muted);
  font-weight:600;z-index:1}
.bhph-schedule-table tbody tr:last-child td{border-bottom:0}

.bhph-account-preview{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.bhph-account-preview.live-preview{border-left:4px solid var(--blue)}
.bhph-preview-list{display:grid;gap:8px;margin:12px 0 0}
.bhph-preview-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.bhph-preview-list dt,.bhph-preview-list span:first-child{color:var(--muted);
  font-size:var(--fs-small);line-height:var(--lh-small)}
.bhph-preview-list dd,.bhph-preview-list strong{margin:0;color:var(--ink);
  font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.bhph-account-status,.bhph-servicing-status{display:inline-block;padding:2px 10px;border-radius:var(--r-stadium);
  background:var(--line);color:var(--ink);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}

/* WHO TO RING, ON THE SCREEN THAT SAYS TO RING THEM. The collections queue printed a bare tel:
   link and the account page printed nothing at all, on a screen headed "Who to call today". This is
   the block that fixes it — name, what we hold for them, and the three buttons. It sits directly
   under the figures because the figures are what the call is about. */
.bhph-reach{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface)}
.bhph-reach-who{display:grid;gap:2px;min-width:0}
.bhph-reach-who strong{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.bhph-reach-who small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* The number on a queue row is now text beside the buttons rather than a link of its own: two ways
   to start the same call, one of which ignores the desk's chosen phone app, is one too many. */
.bhph-queue-phone{display:block;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* "Every account you finance" — the list under the call queue, and the only way into an account on
   a day when nobody is behind. Separated from the queue above it by a rule rather than a card, so
   it reads as the rest of the same screen and not a second, competing worklist. */
.bhph-all-accounts{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.bhph-closed-heading{margin:20px 0 8px;color:var(--muted);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
/* An account that has never taken a payment is the one worth noticing in a column of dates, so it
   is not left as an empty cell that reads as missing data. */
.bhph-never-paid{color:color-mix(in srgb,var(--muted) 70%,var(--ink));font-weight:600}

/* Address lookup, under the street box where the address is being typed. */
.sw-addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-addr>span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-addr>div{flex:1 1 100%}
.addr-results{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface)}
.addr-results p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.addr-results .addr-head{margin:0 0 8px;color:var(--ink);font-weight:600}
.addr-results ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.addr-pick{width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-surface);background:var(--surface);color:var(--ink);cursor:pointer;
  font-size:var(--fs-small);line-height:var(--lh-small)}
.addr-pick:hover{border-color:var(--accent);color:var(--ink)}
.addr-pick:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.addr-note{margin-top:8px!important;font-size:var(--fs-micro)!important;line-height:var(--lh-micro)!important}
/* No match is an ordinary outcome, not a failure — the dealer just types the address. Quieter
   than the error state so it does not read as something being broken. */
.addr-empty{border-style:dashed}
.addr-error{border-color:var(--amber);background:var(--ambersoft)}
.addr-error p{color:var(--ink)}

/* Financing data stranded on a cash deal. Amber because it is a real inconsistency that would
   reach the contract, not a style note. */
.sw-leftover{margin:16px 0 0;padding:14px 16px;border-radius:var(--r-surface);background:var(--ambersoft);
  display:grid;gap:10px;justify-items:start}
.sw-leftover p{margin:0;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}

/* The finance RESULT on the money page — the receipt, not the questions. */
.sw-bhph-summary{margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface);display:grid;gap:12px;justify-items:start}
.sw-bhph-summary.stale{border-color:var(--amber);background:color-mix(in srgb,var(--ambersoft) 60%,var(--surface))}
.sw-bhph-summary .sw-review-list{width:100%;margin:0}
.sw-bhph-todo p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* FINANCING TYPE — the control that decides whether the deal is a cash sale or a credit sale, and
   therefore which federal disclosures print. It had NO styles at all: three identical grey buttons
   with an `active` class nothing acted on, so a dealer genuinely could not see which one was
   chosen. Reported from the running app, and it is the worst possible field to leave ambiguous. */
.financing-type-row{display:grid;gap:6px;margin:0 0 14px}
.financing-type-row>strong,.financing-type-row>span:first-child{color:var(--ink);
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.financing-type-segmented{display:inline-flex;flex-wrap:wrap;gap:0;padding:3px;border:1px solid var(--line);
  border-radius:var(--r-control);background:var(--surface);width:max-content;max-width:100%}
.financing-type-segmented button{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:0 14px;min-height:36px;border-radius:var(--r-control);color:var(--muted);
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.financing-type-segmented button:hover{color:var(--ink)}
/* The selected one is filled, not merely outlined — an outline reads as "focused" next to two
   siblings and this must be unmistakable at a glance. */
/* --accent / --accent-ink, NOT --navy. Every design redefines these tokens, and in several
   presets --navy resolves to a pale slate — measured at rgb(226,232,240), which against the muted
   text of its siblings was a difference you had to look for. --accent-ink exists precisely so the
   label stays legible on the accent fill in all ten designs and both appearances. */
.financing-type-segmented button.active{background:var(--accent);color:var(--accent-ink);
  box-shadow:var(--shadow)}
.financing-type-segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* The DMV fee estimate. Each line shows its working and its statute, because a dealer who
   disagrees with the total needs to see which line they disagree with. */
.dmv-fees{margin:14px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.dmv-fees-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
/* What the panel says when it cannot answer for the dealership's state. Reads as prose, not as an
   error: refusing to quote California's rates in Arizona is the tool being correct, and it must not
   wear the styling of something that went wrong. */
.dmv-fees-note{margin:0 0 12px;max-width:72ch;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dmv-fees-head h3{margin:0;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.dmv-fees-head span{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* What another state's fee page gave up, before any of it is used. Boxed and inset so it reads as
   a proposal being offered for checking rather than as figures the deal already carries — the
   dealer has to be able to tell those two apart at a glance, because the reader gets some of these
   wrong and the quoted source line under each one is the thing they are meant to check. */
/* The fees a state charges that are NOT a flat amount. Given real weight on the page rather than
   a footnote, because for Oregon and Colorado this block IS the answer — they have no flat fee, so
   the total above it is $0.00 and would otherwise read as "this state charges nothing". */
.dmv-varies{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--accent,var(--navy));
  background:var(--surface-2,var(--surface));border-radius:0 var(--r-surface) var(--r-surface) 0}
.dmv-varies p{margin:0 0 6px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.dmv-varies ul{margin:0;padding-left:18px}
.dmv-varies li{margin:0 0 4px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dmv-read{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface-2,var(--surface))}
.dmv-read .dmv-fee-list p{margin:2px 0 0;grid-column:1/-1;color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-style:italic}
.dmv-fee-list{display:grid;gap:10px;margin:0 0 12px}
.dmv-fee-list>div{display:grid;grid-template-columns:1fr auto;gap:2px 16px}
.dmv-fee-list dt{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.dmv-fee-list dt small{font-weight:400;color:var(--muted)}
.dmv-fee-list dd{margin:0;text-align:right;color:var(--ink);font-size:var(--fs-body);
  line-height:var(--lh-body);font-variant-numeric:tabular-nums}
.dmv-fee-list p{grid-column:1/-1;margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.dmv-fee-list p span{opacity:.75}
/* The one line AutoSteward is guessing at is marked, not blended in. */
.dmv-fee-list .dmv-uncertain dt,.dmv-fee-list .dmv-uncertain dd{color:var(--muted)}
.dmv-fees-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:10px;border-top:1px solid var(--line)}
.dmv-fees-total strong{color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.dmv-fees-total b{color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3);font-variant-numeric:tabular-nums}
.dmv-warn{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-surface);background:var(--ambersoft);
  color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.dmv-note{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dmv-ok{color:var(--green);font-weight:600}

/* Reopening a completed sale. Deliberately quiet — it is a correction path, not the main road —
   but a real panel with real buttons rather than a rail somebody has to guess is still clickable. */
.sw-reopen{margin:24px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface)}
.sw-reopen>h3{margin:0 0 8px;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.sw-reopen>p{margin:0 0 14px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-reopen-actions{display:flex;gap:10px;flex-wrap:wrap}

/* The car being sold, in the wizard header. Photo on the right, as asked. */
.sw-veh-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-surface);background:var(--surface);max-width:420px}
.sw-veh-card .sw-veh-facts{min-width:0;flex:1 1 auto;order:-1}
.sw-veh-card .sw-veh-facts>strong{display:block;margin:0 0 6px;color:var(--navy);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.sw-veh-card dl{display:grid;gap:2px;margin:0}
.sw-veh-card dl>div{display:flex;gap:8px;align-items:baseline}
.sw-veh-card dt{flex:0 0 62px;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* The VIN is long and gets checked character by character against paperwork — it must not wrap
   mid-string or ellipsis away. Tabular figures so digits line up when comparing. */
.sw-veh-card dd{margin:0;min-width:0;color:var(--ink);font-size:var(--fs-micro);
  line-height:var(--lh-micro);font-variant-numeric:tabular-nums;word-break:break-all}
.sw-veh-card .sw-veh-photo{flex:0 0 auto;width:104px;height:78px;border-radius:var(--r-surface);object-fit:cover;
  background:var(--surface);border:1px solid var(--line)}
.sw-veh-photo-none{display:grid;place-items:center;text-align:center}
.sw-veh-photo-none span{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* The stand-in for a car with no pictures of its own. Captioned, because the image is another
   dealer's car of the same year/make/model — unlabelled next to a VIN it reads as this car. The
   caption fits here where it could not on the 54px inventory thumbnail: this tile is 104px wide,
   so the word sits on one line instead of breaking to "EXAM/PLE". */
.sw-veh-photo-stock{position:relative;overflow:hidden;display:block}
.sw-veh-photo-stock img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
.sw-veh-photo-stock.ready img{opacity:1}
.sw-veh-photo-tag{position:absolute;left:0;right:0;bottom:0;padding:1px 0;background:rgba(8,20,36,.78);
  color:#fff;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;text-align:center;
  letter-spacing:.02em;pointer-events:none}

/* The car card AS THE PAGE HEADING (owner, 2026-09-27): it takes the place of "Sell this car".
   Photo on the left at a size a salesperson can recognise the car by, the car's name as the h1,
   and the four identity facts in one row so the heading stays about as tall as the old title. */
/* Same column as the wizard card below it (.sale-wizard: 940px, centred), so the two read as one unit. */
.sw-page-heading{display:block;max-width:940px;margin-left:auto;margin-right:auto}
.sw-veh-card.sw-veh-card-heading{max-width:none;gap:18px;padding:14px 18px}
.sw-veh-card-heading .sw-veh-facts{order:0}
.sw-veh-card-heading .sw-veh-facts>.eyebrow{margin:0 0 2px}
.sw-veh-card-heading .sw-veh-facts>h1{margin:0 0 8px;color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);
  font-weight:700;letter-spacing:-.01em}
.sw-veh-card-heading dl{grid-template-columns:repeat(auto-fit,minmax(120px,max-content));column-gap:28px;row-gap:6px}
.sw-veh-card-heading dl>div{flex-direction:column;gap:0}
.sw-veh-card-heading dt{flex:none}
.sw-veh-card-heading dd{font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-veh-card.sw-veh-card-heading .sw-veh-photo{width:144px;height:96px}
@media (max-width:640px){
  .sw-veh-card.sw-veh-card-heading{align-items:flex-start;gap:12px;padding:12px}
  .sw-veh-card.sw-veh-card-heading .sw-veh-photo{width:104px;height:78px}
}

/* The money page reads as three sections with room to breathe. Measured: without this the blocks
   butted directly together and the whole page read as one compressed run. */
.sw-money-block{margin:0 0 28px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.sw-money-block:last-of-type{border-bottom:0;padding-bottom:0}
.sw-money-block>h3{margin:0 0 16px;color:var(--navy);font-size:var(--fs-lead);
  line-height:var(--lh-lead);font-weight:600}
.sw-money-block>.sw-grid{margin:0 0 16px}
.sw-money-block>.sw-grid:last-child{margin-bottom:0}
.sw-money-block .sw-choice{margin:18px 0 0}
.sw-money-block .sw-existing{margin:14px 0 0}

.sw-money-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.sw-auto-adjust-note{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

.sw-bhph-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.sw-hint{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-bhph-result{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
/* Stale is loud on purpose. A schedule that no longer matches its own deal still LOOKS worked out,
   and it prints onto a Truth-in-Lending disclosure. */
.sw-bhph-result.stale{border-color:var(--amber);background:color-mix(in srgb,var(--ambersoft) 60%,var(--surface))}
.sw-stale-note{margin:0 0 12px;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.sw-schedule{margin-top:12px}
.sw-schedule>summary{cursor:pointer;color:var(--blue);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.sw-outside-finance{margin-top:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sw-outside-finance>summary{cursor:pointer;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.sw-outside-finance[open]>summary{margin:0 0 12px}

/* Open deals / Sold, as two views of one screen rather than two sidebar entries. A dealer does not
   think "deals list or archive", they think "the Corolla I sold in July". */
.sales-view-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);width:fit-content}
.sales-view-tab{padding:8px 18px;border:0;border-radius:var(--r-surface);background:transparent;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;cursor:pointer}
.sales-view-tab:hover{color:var(--ink)}
/* MEASURED 1.23:1 IN DARK. `--navy` is the brand ink in light designs and a near-WHITE surface in
   dark ones, so `color:#fff` on it put white on white — the selected tab was legible only by its
   shape. --accent/--accent-ink is the pair every design defines for exactly this: a filled control
   and the one ink guaranteed to read on it. */
.sales-view-tab.active{color:var(--accent-ink);background:var(--accent)}

/* Titles & Tags. The counts had markup and no rules, so they rendered as "Titles not in0cars on the
   lot" — label, number and hint with nothing between them. Same shape as the Sales summary tiles.
   Scale tokens with their paired line-heights, even 2px rhythm; see the render rules in CLAUDE.md. */
.titles-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 20px}
.titles-tile{display:flex;flex-direction:column;gap:4px;width:100%;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.titles-tile:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.titles-tile:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.titles-tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--surface)}
.titles-tile>span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.04em;text-transform:uppercase}
.titles-tile>strong{color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.02em}
.titles-tile>small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.titles-tile-open{margin-top:3px;color:var(--pui-accent-text);font-size:var(--fs-micro);font-weight:700}
/* Tone carries the urgency: an expired plate is a car being driven illegally today. */
.titles-tile.warn{border-left-color:var(--amber)}
.titles-tile.bad{border-left-color:var(--red)}
.titles-tile.bad>strong{color:var(--red)}
.titles-block{margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.titles-block>h2{margin:0 0 6px;color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:-.02em}
.titles-block.warn{border-left:4px solid var(--amber)}
.titles-block.bad{border-left:4px solid var(--red)}
.titles-note{margin:0 0 14px;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
/* The three questions on the wizard's finance step. */
.sw-bhph-ask{margin:0}

/* WHY .table-wrap SCROLLS SIDEWAYS ONLY.
 *
 * It was overflow:auto, which is BOTH axes. That turns every wide table into a vertical scroll
 * container, and a vertical scroll container under the pointer swallows the wheel: put the mouse
 * inside any table in the app and the page stops scrolling. Reported repeatedly as "scrolling is
 * broken" and never reproduced from the stylesheet, because the rule looks completely ordinary.
 *
 * The axis pairing is the whole trick, and two of the three obvious answers are wrong:
 *
 *   overflow-y: visible — CSS coerces a visible axis to auto when the other axis is not visible,
 *                         so you silently get both scrollers back.
 *   overflow-y: hidden  — still creates a SCROLL CONTAINER. Measured on the running app: the wheel
 *                         arrived with deltaY 300 and defaultPrevented false, the box reported
 *                         scrollHeight 218 and clientHeight 218 so it had nothing to scroll, and
 *                         the page still did not move. A hidden box absorbs the wheel rather than
 *                         chaining out of it, even when it cannot use it.
 *   overflow-y: clip    — ALSO coerced. Where the spec turns a visible axis into auto, it turns a
 *                         clip axis into hidden, so this lands straight back on the case above.
 *                         Measured, not assumed: the browser reported overflow-y as "hidden".
 *
 * So CSS cannot express "scroll me sideways, let the page have the wheel". The wrapper stays
 * overflow:auto — sticky table headers only stick inside a real scroll container, so that part was
 * never wrong — and the wheel is chained in JavaScript instead. See bindTableWheelChaining() in
 * app.js, which is where the actual fix lives.
 *
 * The variants that DO cap their height on purpose (activity, reports, the customer picker) keep
 * their own scrollbox — they are short panels inside a page, not the page's main table. */
.table-wrap{overscroll-behavior-x:contain}

/* The Report of Sale number is typed straight into the queue rather than on another screen. */
.titles-ros-entry{display:flex;gap:8px;align-items:center;white-space:nowrap}
.titles-ros-entry input{min-height:34px;min-width:140px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink)}

/* Government watch list (web/sanctions.js).
 *
 * Type comes from the 8-step scale and leading from the paired --lh-* step; spacing stays on the
 * even 2px rhythm. No raw rem/px font-size and no unitless line-height beside one — both are the
 * bug the render system exists to prevent. */
.watchlist-status,.watchlist-check,.watchlist-result,.watchlist-review,.watchlist-log{padding:18px 20px;margin-bottom:16px}
.watchlist-status h2{margin:0 0 8px;color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3)}
.watchlist-status p,.watchlist-check p{margin:0 0 10px;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.watchlist-source{font-size:var(--fs-small);line-height:var(--lh-small)}
/* An out-of-date list is a nudge, never an error. It does not stop a check. */
.watchlist-stale{padding:10px 12px;border:1px solid #e1c07e;border-radius:var(--r-surface);color:#734a05;background:#fff6df;font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-check h3,.watchlist-result h3,.watchlist-review h3,.watchlist-log h3{margin:0 0 10px;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.watchlist-check label{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.watchlist-check label>span{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.watchlist-check input{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink)}
.watchlist-provenance{margin:0 0 12px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-subject{margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
/* Green edge for nothing-found, red edge for something to look at. The colour is the only part of
 * this screen that says anything quickly, so it says the one thing that is true. */
.watchlist-subject.clean{border-left:4px solid var(--green)}
.watchlist-subject.hit{border-left:4px solid var(--red)}
.watchlist-subject h3{margin:0 0 6px;font-size:var(--fs-body);line-height:var(--lh-body)}
.watchlist-subject p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-count{font-weight:700}
.watchlist-match{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas)}
.watchlist-match header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.watchlist-match header strong{font-size:var(--fs-body);line-height:var(--lh-body)}
.watchlist-confidence{display:inline-flex;padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;color:var(--blue);background:var(--bluesoft)}
.watchlist-confidence.exact{color:#8d2026;background:var(--redsoft)}
.watchlist-confidence.strong{color:#875005;background:var(--ambersoft)}
.watchlist-why,.watchlist-alias,.watchlist-remarks{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 0}
.watchlist-facts dt{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);text-transform:uppercase;letter-spacing:.045em}
.watchlist-facts dd{margin:2px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.watchlist-review{border:1px solid #dcafb1;border-left:4px solid var(--red)}
.watchlist-ownership{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas)}
.watchlist-ownership h4{margin:0 0 8px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body)}
.watchlist-ownership ul{margin:8px 0 0;padding-left:20px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-blocked-owners{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.watchlist-blocked-owners legend{padding:0 4px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;color:var(--navy)}
.watchlist-blocked-owners label{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.watchlist-note-label{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.watchlist-note-label>span{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.watchlist-note-label textarea{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);resize:vertical}
.watchlist-review-actions{display:flex;flex-wrap:wrap;gap:8px}
.watchlist-verify{margin:10px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.watchlist-verify a{color:var(--blue);text-decoration:underline}
.watchlist-history code{font-size:var(--fs-micro);line-height:var(--lh-micro)}
.muted{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
@media(max-width:720px){.watchlist-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Signing at the desk (web/signature.js). Same render rules as everything else: scale tokens for
 * size, paired --lh-* for leading, even 2px spacing. */
.sign-document,.sign-consent-panel,.sign-pad-panel,.sign-receipt,.sign-picker,.sign-history{padding:18px 20px;margin-bottom:16px}
.sign-document h2,.sign-picker h2{margin:0 0 8px;color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3)}
.sign-document p,.sign-picker p{margin:0 0 8px;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.sign-fingerprint{font-size:var(--fs-small);line-height:var(--lh-small)}
.sign-consent-panel h3,.sign-pad-panel h3,.sign-receipt h3,.sign-history h3{margin:0 0 10px;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.sign-choices{display:flex;flex-wrap:wrap;gap:8px}
/* Each choice now names the real file underneath the document's title, because the signature is
   fingerprinted over that file's bytes and the dealer should be able to see which one. Stacked, so
   the filename never competes with the name for the click. */
.sign-choices .button{flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.sign-choices .button small{font-family:var(--font-code);font-size:var(--fs-micro);line-height:var(--lh-micro);opacity:.75;font-weight:400}
/* Consent is the legally load-bearing step, so it is given the weight of one on screen. */
.sign-consent{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas)}
.sign-consent.agreed{border-color:var(--green);background:var(--greensoft)}
.sign-consent span{font-size:var(--fs-body);line-height:var(--lh-body)}
.sign-consent input{margin-top:4px;width:18px;height:18px}
.sign-pad-panel.locked{opacity:.55}
.sign-locked-note{margin:0 0 8px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sign-pad{width:100%;max-width:600px;height:200px;border:1px dashed #9eafc1;border-radius:var(--r-surface);background:#fff;touch-action:none;cursor:crosshair}
.sign-pad-panel.locked .sign-pad{cursor:not-allowed}
.sign-problem{margin:8px 0 0;color:#8d2026;font-size:var(--fs-small);line-height:var(--lh-small)}
.sign-pad-actions{display:flex;gap:8px;margin:10px 0}
.sign-name-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;max-width:600px}
.sign-name-field>span{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.sign-name-field input{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink)}
.sign-receipt{border-left:4px solid var(--green)}
.sign-certificate{margin:10px 0;padding:14px;overflow-x:auto;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-surface);font-family:var(--font-code);font-size:var(--fs-small);line-height:var(--lh-small);white-space:pre-wrap}
.sign-history code{font-size:var(--fs-micro);line-height:var(--lh-micro)}

/* FIX72 corrective patch — Finance / BHPH uses the user's FIX70 visual layout exactly. */
/* FIX68 — BHPH financing modal readability/alignment corrections */
.financing-contract-modal{width:min(1360px,98vw);max-height:96vh;padding:0;overflow:auto;background:var(--surface);border:1px solid var(--line)}
.financing-contract-modal .modal-header{position:sticky;top:0;z-index:6;padding:18px 22px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.financing-contract-modal .modal-header h2{margin:0 0 5px;color:var(--ink);font-size:var(--fs-lead)}.financing-contract-modal .modal-header p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.financing-contract-modal .icon-button{color:var(--muted)}
.financing-type-row{display:flex;align-items:center;gap:18px;padding:12px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,var(--canvas));font-size:var(--fs-small)}
.financing-type-row>strong{white-space:nowrap}.financing-type-segmented{display:flex;border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;background:var(--surface-soft)}
.financing-type-segmented button{min-height:34px;padding:0 19px;border:0;border-right:1px solid var(--line);color:var(--muted);background:transparent;font-size:var(--fs-small);font-weight:800;cursor:pointer}.financing-type-segmented button:last-child{border-right:0}.financing-type-segmented button.active{color:#fff;background:#1768b2}.financing-type-segmented button:hover:not(.active){color:var(--ink);background:color-mix(in srgb,var(--surface) 78%,var(--blue) 22%)}
.financing-contract-modal:not(.bhph-mode) .deal-data-modal-fields{padding:0 22px}.legacy-financing-note{display:flex;align-items:center;gap:10px;margin:16px 22px 0;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--surface-soft);font-size:var(--fs-small)}.legacy-financing-note span{color:var(--muted)}
.financing-contract-modal>.modal-actions{position:sticky;bottom:0;z-index:7;justify-content:flex-end;margin:16px 0 0;padding:13px 22px;background:var(--surface);border-top:1px solid var(--line)}
.bhph-workspace{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(340px,.95fr);gap:14px;padding:14px 22px 0}.bhph-main-column{display:grid;gap:14px;min-width:0}.bhph-panel{min-width:0;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);overflow:hidden}.bhph-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:9px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,var(--canvas))}.bhph-panel-heading>div{display:flex;align-items:center;gap:8px}.bhph-panel-heading strong{font-size:var(--fs-body)}.bhph-panel-heading small{margin-left:6px;color:var(--muted);font-size:var(--fs-micro);font-weight:650}.bhph-step{color:var(--muted);font-weight:900}.bhph-state{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:850;white-space:nowrap}.bhph-state.user-input{color:#1d5c8a;background:#deefff}.bhph-state.generated,.bhph-state.live-preview{color:#18633d;background:#e3f5e9}.bhph-state.stale{color:#89560a;background:#fff0ce}.bhph-state.not-generated{color:var(--muted);background:var(--surface-soft);border:1px solid var(--line)}
.bhph-core-grid{display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:12px 14px;padding:14px 12px 12px}.bhph-core-grid .deal-field:nth-child(5),.bhph-core-grid .deal-field:nth-child(6){grid-column:span 2}.bhph-core-grid .deal-field{display:grid;grid-template-columns:1fr;align-items:stretch;gap:6px}.bhph-terms-grid .deal-field{display:grid;gap:6px}.bhph-core-grid .deal-field>span,.bhph-terms-grid .deal-field>span,.bhph-override-grid label>span,.bhph-approval-box label>span{color:var(--muted);font-size:var(--fs-small);font-weight:800}.bhph-core-grid input,.bhph-core-grid select,.bhph-terms-grid input,.bhph-override-grid input,.bhph-approval-box input{width:100%;min-height:38px;padding:7px 9px;color:var(--ink);background:var(--input-bg,var(--surface));border:1px solid var(--line);border-radius:var(--r-control);outline:none;font-size:var(--fs-body)}.bhph-core-grid input:focus,.bhph-core-grid select:focus,.bhph-override-grid input:focus,.bhph-approval-box input:focus{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent)}
.bhph-generate-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.38fr);align-items:stretch;gap:12px;padding:0 12px 10px}.bhph-generate-button{min-height:56px;font-size:var(--fs-body)}.bhph-reconcile{display:grid;gap:6px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);font-size:var(--fs-small)}.bhph-reconcile-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.bhph-reconcile-head span{color:var(--muted);font-weight:750}.bhph-reconcile-head strong{font-size:var(--fs-body)}.bhph-reconcile-formula{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;color:var(--ink)}.bhph-reconcile-formula span{color:var(--ink)}.bhph-reconcile small{color:var(--muted);line-height:1.4}.bhph-reconcile-difference{padding-top:5px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);color:var(--ink)}.bhph-reconcile-match{color:var(--green);font-weight:750}.bhph-reconcile.mismatch{border-color:#d99a3b;background:color-mix(in srgb,var(--ambersoft) 65%,var(--surface))}.bhph-generation-error{margin:10px 0 0;padding:9px 11px;border:1px solid rgba(248,113,113,.42);border-radius:var(--r-control);background:rgba(127,29,29,.20);color:#fecaca;font-size:12px;font-weight:700}
.bhph-auto-note{margin:0;padding:0 12px 12px;color:var(--muted);font-size:var(--fs-micro);text-align:center}
.bhph-approval-box{display:grid;gap:8px;margin:0 12px 10px;padding:11px 12px;border:1px solid #d99a3b;border-radius:var(--r-control);background:color-mix(in srgb,var(--ambersoft) 68%,var(--surface));font-size:var(--fs-small)}.bhph-approval-box>strong{font-size:var(--fs-small)}.bhph-approval-box p{margin:0;color:var(--muted);line-height:1.5}.bhph-approval-box p b{color:var(--ink)}.bhph-approval-box.approved{border-color:var(--green)}.bhph-approval-check{display:flex!important;align-items:center;gap:8px;font-weight:800}.bhph-approval-check input{width:auto;min-height:auto}.bhph-role-note{font-weight:800;color:var(--amber)!important}
.bhph-terms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;padding:12px}.bhph-terms-grid .deal-field{grid-template-columns:minmax(150px,42%) minmax(0,1fr)}.bhph-readonly-field input{background:color-mix(in srgb,var(--surface-soft) 92%,var(--canvas));color:var(--ink);font-weight:750}.bhph-stale-warning{margin:10px 12px 0;padding:8px 10px;color:#80500a;background:var(--ambersoft);border:1px solid #d9b56d;border-radius:var(--r-control);font-size:var(--fs-small)}.bhph-override-toggle{min-height:27px!important;padding:0 9px!important;font-size:var(--fs-micro)!important}.bhph-override-panel{display:grid;gap:8px;margin:0 12px 12px;padding:11px;border:1px solid var(--amber);border-radius:var(--r-control);background:color-mix(in srgb,var(--ambersoft) 45%,var(--surface));font-size:var(--fs-small)}.bhph-override-panel p{margin:0;color:var(--muted)}.bhph-override-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.bhph-override-grid label{display:grid;gap:6px}
.bhph-account-preview{align-self:start}.bhph-preview-list{margin:0;padding:8px 13px}.bhph-preview-list>div{display:grid;grid-template-columns:minmax(135px,.9fr) minmax(0,1.25fr);gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.bhph-preview-list dt{color:var(--muted);font-size:var(--fs-small);font-weight:700}.bhph-preview-list dd{margin:0;color:var(--ink);font-size:var(--fs-small);font-weight:800;text-align:right;overflow-wrap:anywhere}.bhph-account-status,.bhph-servicing-status{display:inline-flex;justify-content:flex-end;padding:3px 7px;border-radius:var(--r-stadium);color:#86520a;background:var(--ambersoft);font-size:var(--fs-micro);line-height:var(--lh-micro)}.bhph-account-status.active,.bhph-servicing-status.active{color:#17633e;background:var(--greensoft)}.bhph-servicing-status.pending{color:#8a5b0a;background:var(--ambersoft)}.bhph-preview-note{margin:0;padding:12px 13px;color:var(--muted);background:var(--surface-soft);border-top:1px solid var(--line);font-size:var(--fs-small);line-height:var(--lh-small)}.bhph-generation-meta{padding:10px 13px;color:var(--muted);border-top:1px solid var(--line);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.bhph-completed-summary{min-width:0}
.bhph-schedule-row td{vertical-align:middle}
.bhph-schedule-panel{grid-column:1/-1}.bhph-schedule-wrap{max-height:330px}.bhph-schedule-table{min-width:700px;font-size:var(--fs-small)}.bhph-schedule-table th{padding:8px 9px;font-size:var(--fs-micro)}.bhph-schedule-table td{padding:8px 9px}.bhph-schedule-status{display:inline-flex;padding:2px 6px;border-radius:var(--r-stadium);color:var(--muted);background:var(--surface-soft);font-size:var(--fs-micro);font-weight:800;white-space:nowrap}.bhph-schedule-status.paid{color:#17633e;background:var(--greensoft)}.bhph-schedule-status.partial,.bhph-schedule-status.due{color:#86520a;background:var(--ambersoft)}.bhph-schedule-status.late{color:#9b2335;background:var(--redsoft)}.bhph-schedule-row-late td{background:color-mix(in srgb,var(--redsoft) 24%,transparent)}.bhph-schedule-row-partial td,.bhph-schedule-row-due td{background:color-mix(in srgb,var(--ambersoft) 18%,transparent)}.bhph-schedule-row-paid td{background:color-mix(in srgb,var(--greensoft) 14%,transparent)}.bhph-schedule-total{display:flex;justify-content:flex-end;gap:18px;padding:8px 10px;color:var(--muted);border-top:1px solid var(--line);font-size:var(--fs-micro)}.bhph-schedule-total strong{color:var(--ink)}
html[data-theme="dark"] .bhph-state.user-input{color:#9bd0ff;background:#153b5d}html[data-theme="dark"] .bhph-state.generated,html[data-theme="dark"] .bhph-state.live-preview{color:#8ee2af;background:#173d2b}html[data-theme="dark"] .bhph-stale-warning{color:#f3c77d}html[data-theme="dark"] .financing-type-segmented button.active{background:#1768b2;color:#fff}
@media(max-width:1120px){.bhph-workspace{grid-template-columns:1fr}.bhph-account-preview{grid-row:auto}.bhph-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bhph-core-grid .deal-field:nth-child(5),.bhph-core-grid .deal-field:nth-child(6){grid-column:auto}}
@media(max-width:680px){.financing-type-row{align-items:stretch;flex-direction:column}.financing-type-segmented{display:grid;grid-template-columns:1fr}.financing-type-segmented button{border-right:0;border-bottom:1px solid var(--line)}.financing-type-segmented button:last-child{border-bottom:0}.bhph-workspace{padding-inline:10px}.bhph-core-grid,.bhph-terms-grid,.bhph-override-grid,.bhph-generate-row{grid-template-columns:1fr}.bhph-terms-grid .deal-field{grid-template-columns:1fr}.bhph-preview-list>div{grid-template-columns:1fr}.bhph-preview-list dd{text-align:left}.bhph-panel-heading{align-items:flex-start;flex-direction:column}.bhph-panel-heading>div{flex-wrap:wrap}.bhph-account-status,.bhph-servicing-status{justify-content:flex-start}}
.bhph-workspace{grid-template-columns:minmax(0,2.15fr) minmax(380px,1fr)}.bhph-panel-heading strong{font-size:var(--fs-body)}.bhph-state{min-height:24px;padding:3px 9px;font-size:var(--fs-micro)}
.bhph-preview-list{padding:9px 14px}.bhph-preview-list>div{grid-template-columns:minmax(150px,.92fr) minmax(0,1.2fr);gap:14px;padding:11px 0}.bhph-preview-list dt{font-size:var(--fs-small)}.bhph-preview-list dd{font-size:var(--fs-body)}.bhph-account-status,.bhph-servicing-status{padding:4px 8px;font-size:var(--fs-small)}.bhph-preview-note{padding:13px 14px;font-size:var(--fs-small);line-height:var(--lh-small)}.bhph-generation-meta{padding:11px 14px;font-size:var(--fs-small)}.bhph-readonly-field input{background:color-mix(in srgb,var(--surface-soft) 78%,var(--canvas));border-style:dashed;color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
/* FIX70 — locked BHPH grid alignment and automatic Amount Financed readability. */
.bhph-workspace{grid-template-columns:minmax(0,2.05fr) minmax(410px,1fr)!important;gap:16px!important}
.bhph-core-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:16px!important;row-gap:14px!important;padding:16px 14px 13px!important;align-items:end!important}
.bhph-core-grid .deal-field{display:grid!important;grid-template-rows:24px 42px!important;gap:6px!important;align-items:end!important;min-width:0!important}
.bhph-core-grid .deal-field:nth-child(5),.bhph-core-grid .deal-field:nth-child(6){grid-column:span 2!important}
.bhph-core-grid .deal-field>span{display:flex!important;align-items:end!important;min-height:24px!important;font-size:var(--fs-small)!important;line-height:1.15!important}
.bhph-core-grid .deal-field>span small{margin-left:6px;padding:2px 6px;border-radius:var(--r-stadium);background:var(--surface-soft);color:var(--muted);font-size:var(--fs-micro);font-weight:850;text-transform:uppercase;letter-spacing:.03em}
.bhph-core-grid input,.bhph-core-grid select{min-height:42px!important;height:42px!important;font-size:var(--fs-body)!important;padding:8px 10px!important}
.bhph-auto-amount input{font-weight:850!important;border-style:dashed!important;background:color-mix(in srgb,var(--surface-soft) 76%,var(--canvas))!important}
.bhph-generate-row{grid-template-columns:minmax(0,1fr) minmax(230px,.34fr)!important;gap:14px!important;padding:0 14px 12px!important}.bhph-generate-button{min-height:100%!important;font-size:var(--fs-body)!important}
.bhph-terms-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 18px!important;padding:14px!important}
.bhph-terms-grid .deal-field{grid-template-columns:180px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;min-height:42px!important}
.bhph-terms-grid .deal-field>span{font-size:var(--fs-small)!important;line-height:1.2!important}.bhph-terms-grid input{min-height:40px!important;font-size:var(--fs-body)!important;padding:8px 10px!important}
.bhph-override-panel{font-size:var(--fs-small)!important;line-height:1.45!important}.bhph-override-grid-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;gap:10px 14px!important}.bhph-override-action{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bhph-override-grid-wide label>span{font-size:var(--fs-small)!important}
.bhph-preview-list{padding:10px 16px!important}.bhph-preview-list>div{grid-template-columns:minmax(165px,.92fr) minmax(0,1.25fr)!important;gap:16px!important;padding:12px 0!important;min-height:45px!important;align-items:center!important}.bhph-preview-list dt{font-size:var(--fs-body)!important}.bhph-preview-list dd{font-size:var(--fs-body)!important}.bhph-account-status,.bhph-servicing-status{font-size:var(--fs-small)!important;padding:5px 9px!important}.bhph-preview-note{font-size:var(--fs-body)!important;line-height:var(--lh-body)!important;padding:14px 16px!important}.bhph-generation-meta{font-size:var(--fs-small)!important;padding:12px 16px!important}.bhph-panel-heading strong{font-size:var(--fs-body)!important}.bhph-panel-heading small{font-size:var(--fs-small)!important}
@media(max-width:1220px){.bhph-workspace{grid-template-columns:1fr!important}.bhph-account-preview{grid-row:auto}.bhph-preview-list>div{grid-template-columns:minmax(160px,.75fr) minmax(0,1.3fr)!important}}
@media(max-width:780px){.bhph-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bhph-core-grid .deal-field:nth-child(5),.bhph-core-grid .deal-field:nth-child(6){grid-column:span 1!important}.bhph-terms-grid{grid-template-columns:1fr!important}.bhph-terms-grid .deal-field{grid-template-columns:170px minmax(0,1fr)!important}.bhph-override-grid-wide{grid-template-columns:1fr!important}}
@media(max-width:560px){.bhph-core-grid{grid-template-columns:1fr!important}.bhph-terms-grid .deal-field{grid-template-columns:1fr!important}.bhph-preview-list>div{grid-template-columns:1fr!important}}

/* FIX72 corrective patch — Compliance row controls share one baseline and one control size. */
.sw-compliance-grid .sw-field:nth-child(n+5):nth-child(-n+8)>span{display:flex;flex-direction:column;justify-content:flex-end;min-height:54px}
.sw-compliance-grid .sw-field:nth-child(n+5):nth-child(-n+8)>input,
.sw-compliance-grid .sw-field:nth-child(n+5):nth-child(-n+8)>select{height:44px;min-height:44px}
@media(max-width:900px){.sw-compliance-grid .sw-field:nth-child(n+5):nth-child(-n+8)>span{min-height:0}}
@media(max-width:700px){.sw-pricing-toolbar>.sw-button-row{flex-wrap:wrap}.sw-pricing-summary{flex-wrap:wrap;white-space:normal}}

/* FIX72 test correction — Target OTD layout, account close styling, and cancel-sale visual contract. */
/* Match the accepted FIX70 Target OTD workspace without changing its pricing arithmetic. */
.adjust-pricing-modal{width:min(920px,calc(100vw - 34px));max-height:min(88vh,780px);overflow:auto}
.adjust-pricing-entry{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,.8fr) 150px;gap:14px;align-items:end;padding:18px 22px;border-bottom:1px solid var(--line)}
.adjust-pricing-entry label{display:grid;gap:7px}.adjust-pricing-entry label>span,.adjust-current-total>span{font-size:var(--fs-small);font-weight:800;color:var(--muted)}
.adjust-pricing-entry input{width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--input-bg,var(--surface));color:var(--ink);font-size:var(--fs-body);font-weight:750}
.adjust-current-total{display:grid;gap:7px;padding-bottom:2px}.adjust-current-total strong{min-height:42px;display:flex;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);font-size:var(--fs-body)}
.adjust-pricing-entry>.button{min-height:42px}
.adjust-pricing-preview{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;padding:18px 22px}.adjust-pricing-preview section{border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);overflow:hidden}.adjust-pricing-preview h3{margin:0;padding:11px 13px;border-bottom:1px solid var(--line);font-size:var(--fs-body);background:var(--surface-soft)}
.adjust-pricing-preview dl{margin:0;padding:6px 13px}.adjust-pricing-preview dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)}.adjust-pricing-preview dl>div:last-child{border-bottom:0}.adjust-pricing-preview dt{font-size:var(--fs-small);color:var(--muted);font-weight:750}.adjust-pricing-preview dt small{display:inline;margin-left:5px;font-size:var(--fs-micro)}.adjust-pricing-preview dd{margin:0;font-size:var(--fs-body);font-weight:850;color:var(--ink);text-align:right}.adjust-pricing-preview .highlight{margin:4px -5px;padding:9px 5px;background:color-mix(in srgb,var(--blue) 8%,transparent);border-radius:var(--r-control)}.adjust-pricing-preview .highlight dd{color:var(--blue)}.adjust-pricing-preview dd.negative{color:var(--danger,#cf4a4a)}.adjust-pricing-preview dd.positive{color:var(--green,#2b8a57)}
.adjust-pricing-message{margin:0 22px 14px;padding:10px 12px;border-radius:var(--r-control);font-size:var(--fs-small);line-height:var(--lh-small)}.adjust-pricing-message.success{border:1px solid color-mix(in srgb,var(--green,#2b8a57) 45%,var(--line));background:color-mix(in srgb,var(--green,#2b8a57) 9%,var(--surface));color:var(--ink)}.adjust-pricing-message.error{border:1px solid color-mix(in srgb,var(--danger,#cf4a4a) 55%,var(--line));background:color-mix(in srgb,var(--danger,#cf4a4a) 9%,var(--surface));color:var(--ink)}
@media(max-width:900px){.adjust-pricing-entry,.adjust-pricing-preview{grid-template-columns:1fr}}

/* Close AutoSteward is a destructive account action: quiet red text at rest, full red row on hover. */
.account-close-menu{display:block;width:100%;min-height:42px;padding:10px 12px;border:0;border-top:1px solid var(--line);border-radius:var(--r-control);background:transparent;color:#c93d46;font-weight:800;text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.account-close-menu:hover,.account-close-menu:focus-visible{background:#7a2d35;color:#fff;outline:none}
html[data-theme="dark"] .account-close-menu{background:transparent;color:#ff8f98;border-top-color:var(--line)}
html[data-theme="dark"] .account-close-menu:hover,html[data-theme="dark"] .account-close-menu:focus-visible{background:#6e2830;color:#fff}

/* FIX102 California BHPH compliance foundation */
.compliance-profile-card{margin-top:18px}
.compliance-profile-grid select{width:100%;min-height:40px}
.compliance-current-profile{margin:16px 0;padding:16px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-control);background:var(--surface-2)}
.compliance-current-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.compliance-current-heading h2{margin:2px 0 4px;font-size:var(--fs-h3)}
.compliance-current-heading p{margin:0;color:var(--muted)}
.compliance-current-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.compliance-current-details div{padding:10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.compliance-current-details small{display:block;color:var(--muted);margin-bottom:4px}
.compliance-current-details strong{display:block}
.compliance-current-basis{margin:14px 0 0;color:var(--ink)}
.compliance-save-note{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small)}
.compliance-profile-history{margin-top:16px;overflow:auto;border-top:1px solid var(--line);padding-top:14px}
.compliance-profile-history summary{cursor:pointer;font-weight:700;color:var(--ink)}
.compliance-profile-history>p{margin:8px 0 12px;color:var(--muted);font-size:var(--fs-small)}
.compliance-profile-history small{color:var(--muted)}
.compliance-pill{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-stadium);font-size:var(--fs-micro);font-weight:700}
@media (max-width:700px){.compliance-current-heading{flex-direction:column}.compliance-current-details{grid-template-columns:1fr}}
.deal-compliance-summary{margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.deal-compliance-summary.resolved{border-left:4px solid var(--green)}
.deal-compliance-summary.blocked{border-left:4px solid var(--amber)}
.deal-compliance-summary.pending,.deal-compliance-summary.legacy{border-left:4px solid var(--muted)}

/* BHPH servicing: current accounts stay quiet; collection controls appear only when a payment is late. */
.bhph-account-identity{display:grid;grid-template-columns:160px minmax(300px,1.4fr) minmax(200px,.8fr);gap:16px;align-items:stretch;margin:0 0 14px;padding:10px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-control);background:var(--surface-strong)}
.bhph-account-vehicle-media{min-height:142px}.bhph-account-vehicle-copy,.bhph-account-customer-copy{display:grid;align-content:start;gap:5px;min-width:0;padding:4px}.bhph-account-identity span{color:var(--muted);font-size:var(--fs-small);font-weight:750;text-transform:uppercase}.bhph-account-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-h3)}.bhph-account-identity small{color:var(--muted);font-size:var(--fs-small)}.bhph-account-vehicle-copy dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;margin:7px 0 0}.bhph-account-vehicle-copy dl div{min-width:0}.bhph-account-vehicle-copy dt{color:var(--muted);font-size:var(--fs-micro);text-transform:uppercase}.bhph-account-vehicle-copy dd{margin:2px 0 0;font-size:var(--fs-small);font-weight:750;overflow-wrap:anywhere}.bhph-account-customer-copy{gap:6px;padding:8px 4px}.bhph-account-customer-copy span:not(:first-child){margin-top:12px}
.bhph-account-header,.bhph-account-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.bhph-account-header>div,.bhph-account-progress>div{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.bhph-account-header>div.bhph-account-alert{border-color:var(--danger);background:color-mix(in srgb,var(--redsoft) 36%,var(--surface))}.bhph-account-header>div.bhph-account-alert span,.bhph-account-header>div.bhph-account-alert small{color:color-mix(in srgb,var(--danger) 72%,var(--ink))}
.bhph-account-header span,.bhph-account-progress span{color:var(--muted);font-size:var(--fs-small);font-weight:750}
.bhph-account-header strong,.bhph-account-progress strong{font-size:var(--fs-h3);line-height:var(--lh-h3)}.bhph-account-header small{color:var(--muted);font-size:var(--fs-small)}
.bhph-account-progress{grid-template-columns:repeat(3,minmax(0,1fr))}.bhph-account-progress strong{font-size:var(--fs-body)}
.bhph-account-cancelled{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--danger);border-radius:var(--r-control);background:var(--surface)}
.bhph-payoff,.bhph-writeoff{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.bhph-payoff-heading{display:flex;align-items:start;justify-content:space-between;gap:18px;padding:16px;border-bottom:1px solid var(--line)}.bhph-payoff-heading span{display:flex;flex-direction:column;gap:3px}.bhph-payoff-heading small{color:var(--muted);font-size:var(--fs-small)}.bhph-payoff-summary-total{text-align:right}.bhph-payoff dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0;padding:0 16px 8px}.bhph-payoff dl>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.bhph-payoff dt{color:var(--muted)}.bhph-payoff dd{margin:0;font-weight:750;text-align:right}.bhph-payoff dl .total{grid-column:1/-1;color:var(--accent);font-size:var(--fs-h3)}.bhph-payoff p,.bhph-writeoff p,.bhph-writeoff label,.bhph-writeoff button{margin-left:16px;margin-right:16px}.bhph-payoff p{margin-bottom:16px;color:var(--muted);font-size:var(--fs-small)}
.bhph-writeoff{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));padding:16px}.bhph-writeoff-heading h2{margin:0;color:var(--danger);font-size:var(--fs-h3)}.bhph-writeoff-heading p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-small)}.bhph-writeoff>p,.bhph-writeoff>label,.bhph-writeoff>button{margin-left:0;margin-right:0}.bhph-writeoff label{display:grid;gap:6px}.bhph-writeoff-actions{display:flex;justify-content:flex-start;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line)}.bhph-writeoff-actions button{margin:0}
.bhph-collection-warning{display:grid;gap:4px;margin:0 0 14px;padding:13px 15px;border:1px solid var(--amber);border-left:4px solid var(--amber);border-radius:var(--r-control);background:var(--ambersoft)}
.bhph-collection-warning strong{font-size:var(--fs-body)}.bhph-collection-warning span{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.bhph-take-payment,.bhph-promise{margin:0 0 14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.bhph-take-payment h2,.bhph-promise h2{margin:0 0 12px;font-size:var(--fs-h3)}.bhph-promise p,.bhph-waterfall-note{margin:10px 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.bhph-payment-grid,.bhph-promise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.bhph-promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bhph-payment-grid label,.bhph-promise-grid label{display:grid;gap:6px}.bhph-payment-grid label>span,.bhph-promise-grid label>span{font-size:var(--fs-small);font-weight:750}.bhph-payment-grid input,.bhph-payment-grid select,.bhph-promise-grid input{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--input-bg,var(--surface));color:var(--ink);font-size:var(--fs-body)}
.bhph-payment-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.bhph-future-payment-warning{margin:10px 0 0;padding:9px 11px;border:1px solid color-mix(in srgb,var(--amber) 55%,var(--line));border-radius:var(--r-control);background:color-mix(in srgb,var(--amber) 12%,var(--surface));color:var(--ink);font-size:var(--fs-small);font-weight:700;line-height:var(--lh-small)}
.bhph-payment-grid input.bhph-future-date{border-color:var(--amber)}
.bhph-detail-modal{width:min(1040px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto}.bhph-detail-modal .modal-header{position:sticky;top:0;z-index:1;background:var(--surface);padding-bottom:14px;border-bottom:1px solid var(--line)}.bhph-dialog-intro,.bhph-dialog-note{margin:16px 0;color:var(--muted);font-size:var(--fs-small)}.bhph-detail-modal .bhph-schedule{margin-top:14px}.bhph-detail-modal .bhph-schedule .table-wrap{max-height:calc(100vh - 290px);overflow:auto}.bhph-payoff-payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px}.bhph-payoff-payment-grid label{display:grid;gap:6px}.bhph-payoff-payment-grid input,.bhph-payoff-payment-grid select{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--input-bg,var(--surface));color:var(--ink);font-size:var(--fs-body)}.bhph-detail-modal .modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:900px){.bhph-account-identity,.bhph-account-header{grid-template-columns:repeat(2,minmax(0,1fr))}.bhph-account-vehicle-media{min-height:170px}.bhph-payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bhph-account-identity,.bhph-account-header,.bhph-account-progress,.bhph-payment-grid,.bhph-promise-grid,.bhph-payoff dl,.bhph-account-vehicle-copy dl,.bhph-payoff-payment-grid{grid-template-columns:1fr}.bhph-account-vehicle-media{min-height:190px}.bhph-detail-modal{width:calc(100vw - 18px);max-height:calc(100vh - 18px)}}

/* FIX111 — paid-off BHPH accounts are closed, auditable states, not ordinary current accounts. */
.bhph-account-paid-off{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--greensoft);color:var(--ink)}
.bhph-schedule-status.paid-off{color:#17633e;background:var(--greensoft)}
.bhph-schedule-row-paid-off td{background:color-mix(in srgb,var(--greensoft) 10%,transparent)}

/* FIX113 — active and closed BHPH registers remain readable as separate workflow sections. */
.bhph-account-register-empty{margin:8px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
/* FIX117 — BHPH final-document controls stay inside the existing Guided Sale surface. */
.sw-bhph-real-docs{display:grid;gap:12px}
.sw-bhph-document-row{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(220px,1fr) minmax(220px,1fr);gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.sw-bhph-document-row>div:first-child{align-self:start;display:grid;gap:4px}
.sw-bhph-document-row>div:first-child small{color:var(--muted);font-weight:400}
.sw-bhph-document-row .sw-bhph-confirm{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-small)}
.sw-bhph-document-row .sw-bhph-confirm input{margin-top:3px}
.sw-inline-upload{display:flex;gap:8px;align-items:center}
.sw-inline-upload input[type=file]{min-width:0;max-width:100%}
.sw-bhph-status-table td:nth-child(n+2){vertical-align:top}
@media(max-width:900px){.sw-bhph-document-row{grid-template-columns:1fr}.sw-bhph-document-row .sw-bhph-confirm{grid-column:auto}}
.sw-bhph-upload{min-width:0}

/* FIX122 — BHPH closing stays a normal sale. Compliance proof remains underneath, while the
   salesperson sees one compact verification box on the final paperwork page. */
.sw-bhph-verification{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);overflow:hidden}
.sw-bhph-verification.ready{border-color:color-mix(in srgb,var(--pui-ok,#1c7a4a) 45%,var(--line))}
.sw-bhph-verification.missing{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}
.sw-bhph-verification .sw-review-head small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-micro);font-weight:400;max-width:72ch}
.sw-bhph-overall{white-space:nowrap;font-size:var(--fs-small)}
.sw-bhph-verification.ready .sw-bhph-overall{color:var(--pui-ok,#1c7a4a)}
.sw-bhph-verification.missing .sw-bhph-overall{color:var(--amber)}
.sw-bhph-setup-line{display:grid;grid-template-columns:max-content max-content max-content max-content;gap:6px 10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.sw-bhph-setup-line span{color:var(--muted)}
.sw-bhph-simple-list{list-style:none;margin:0;padding:0 14px}
.sw-bhph-simple-list li{display:grid;grid-template-columns:24px minmax(0,1fr) max-content;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.sw-bhph-simple-list li:last-child{border-bottom:0}
.sw-bhph-simple-list strong{display:block;font-size:var(--fs-small)}
.sw-bhph-simple-list small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-micro);overflow-wrap:anywhere}
.sw-bhph-simple-list b{font-size:var(--fs-small)}
.sw-bhph-simple-list .ready b,.sw-bhph-simple-list .ready .sw-bhph-check-icon{color:var(--pui-ok,#1c7a4a)}
.sw-bhph-simple-list .missing b,.sw-bhph-simple-list .missing .sw-bhph-check-icon{color:var(--amber)}
.sw-bhph-check-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-weight:700}
.sw-bhph-verification>.sw-button-row,.sw-bhph-verification>small{margin:0 14px 12px}
.sw-bhph-verification>small{display:block;color:var(--muted);font-size:var(--fs-micro);max-width:78ch}
.sw-bhph-rmv-details{margin:0 14px 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));border-radius:var(--r-control);background:var(--surface-soft)}
.sw-bhph-rmv-details>strong{display:block;font-size:var(--fs-small)}
.sw-bhph-rmv-details>small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-micro)}
.sw-bhph-rmv-inline{display:grid;grid-template-columns:minmax(120px,.55fr) minmax(180px,1fr) minmax(150px,.65fr) max-content;gap:10px;align-items:end;margin-top:10px}
.sw-bhph-rmv-upload{margin:0 14px 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));border-radius:var(--r-control);background:var(--surface-soft);display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) max-content;gap:10px;align-items:end}
.sw-bhph-rmv-upload strong,.sw-bhph-rmv-upload small{display:block}.sw-bhph-rmv-upload small{margin-top:3px;color:var(--muted);font-size:var(--fs-micro)}
.sw-bhph-rmv-upload input[type=file]{min-width:0;width:100%}
@media(max-width:760px){.sw-bhph-setup-line{grid-template-columns:1fr max-content}.sw-bhph-rmv-inline,.sw-bhph-rmv-upload{grid-template-columns:1fr}.sw-bhph-simple-list li{grid-template-columns:24px minmax(0,1fr)}.sw-bhph-simple-list li>b{grid-column:2}}

/* FIX127 OFAC review usability: actionable-count badge and selected review stays attached to its row. */
.sidebar-link-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-alert-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:22px;height:22px;margin-left:auto;padding:0 6px;border-radius:var(--r-stadium);background:var(--red);color:#fff;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:800;box-shadow:0 0 0 2px color-mix(in srgb,var(--sidebar-bg,#0b1e33) 75%,transparent)}
.sidebar-alert-badge[hidden]{display:none}
.watchlist-selected-row{background:color-mix(in srgb,var(--accent) 18%,var(--surface))!important;box-shadow:inset 4px 0 0 var(--accent)}
.watchlist-selected-row td{font-weight:700}
.watchlist-review-row>td{padding:0 12px 16px!important;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.watchlist-review-row:hover{background:inherit!important}
.watchlist-review-row .watchlist-review{margin:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none;scroll-margin-top:78px}
.watchlist-review-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.watchlist-review-heading .eyebrow{margin:0 0 4px}
.watchlist-review-heading h3{margin:0}

/* FIX130 Titles & Tags navigation. The top tabs replace the old single scrolling wall; each work
   type gets a smaller status view below it. */
.titles-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:6px;border:2px solid var(--line);border-radius:var(--r-surface);background:var(--surface);position:sticky;top:0;z-index:5;box-shadow:var(--shadow-raised)}
.titles-tab{min-height:40px;padding:8px 14px;border:2px solid transparent;border-radius:var(--r-surface);background:transparent;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;cursor:pointer}
.titles-tab:hover{color:var(--ink);background:var(--canvas)}
.titles-tab.active{color:#fff;background:#075dcc;border-color:#9ac8ff;box-shadow:0 0 0 2px rgba(7,93,204,.18)}
.titles-subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas);width:fit-content}
.titles-subtab{min-height:34px;padding:6px 12px;border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;cursor:pointer}
.titles-subtab:hover{color:var(--ink);background:var(--surface)}
.titles-subtab.active{color:var(--navy);background:var(--surface);border-color:var(--blue);box-shadow:var(--shadow-raised)}
.titles-block{border-top:4px solid var(--blue)}
.titles-block.warn{border-top-color:var(--amber)}
.titles-block.bad{border-top-color:var(--red)}
.titles-tag-editor{margin-bottom:14px;border-top:4px solid var(--blue)}
/* FIX156 R2 — owner-tested Titles & Tags field spacing. Labels sit above controls so the
   Temporary Tag editor scans like a form instead of running label text into the input border. */
.titles-tag-grid{gap:14px 16px;padding-top:16px}
.titles-tag-field{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;color:var(--ink);font-size:var(--fs-small);font-weight:700}
.titles-tag-field>span{display:block;line-height:var(--lh-small)}
.titles-tag-field>input,.titles-tag-field>select{width:100%;min-width:0}
.titles-overview-help{border-top-color:var(--blue)}
@media(max-width:760px){.titles-tabs{position:static}.titles-tab{flex:1 1 140px}.titles-subtabs{width:100%}.titles-subtab{flex:1 1 100px}}


/* FIX136 — Salesperson & Commission plan management and internal sale summaries. */
.commission-management-card{display:grid;gap:14px;margin-top:16px}
.commission-editor{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.commission-rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.commission-rule-card{min-width:0;margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2)}
.commission-rule-card legend{padding:0 6px;color:var(--navy);font-weight:800}
.commission-rule-card label,.commission-volume-tier label{display:grid;gap:6px;color:var(--ink);font-size:var(--fs-small)}
.commission-rule-card select,.commission-rule-card input,.commission-volume-tier input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}
.commission-rule-values{display:grid;gap:10px;margin-top:10px}
.commission-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.commission-plan-card{min-width:0}
.commission-plan-card.is-archived{opacity:.72}
.commission-plan-card .panel-heading{padding:0 0 12px;margin-bottom:10px}
.commission-plan-summary{display:grid;gap:6px;margin:0 0 14px;padding-left:20px;color:var(--ink);font-size:var(--fs-small)}
.commission-volume-editor{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2)}
.commission-volume-tier{display:grid;grid-template-columns:minmax(120px,.55fr) minmax(160px,1fr) max-content;gap:10px;align-items:end}
.commission-assignment-card{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.commission-assignment-history{margin-top:4px;overflow:auto}
.commission-my-plan .commission-plan-summary{margin-bottom:0}
.sw-commission-summary{margin:14px 0 0;padding:14px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-control);background:var(--surface)}
.sw-commission-summary h3{margin:0 0 8px;color:var(--navy);font-size:var(--fs-body)}
.sw-commission-summary dl{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:6px 12px;margin:0;font-size:var(--fs-small)}
.sw-commission-summary dt{color:var(--muted);font-weight:700}.sw-commission-summary dd{margin:0;color:var(--ink)}
.sw-commission-summary .inline-warning{margin-top:10px}
@media(max-width:980px){.commission-rules-grid,.commission-plan-grid{grid-template-columns:1fr}}
@media(max-width:620px){.commission-volume-tier,.sw-commission-summary dl{grid-template-columns:1fr}}

/* FIX137 — approved Dealer Info / commission / financial workflow corrections */
/* Dealer Information uses the same compact segmented-control visual language as Open deals / Sold. */
.dealer-info-tabs{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin:0 0 16px;padding:4px;border:2px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.dealer-info-tabs button{min-height:40px;padding:8px 18px;border:2px solid transparent;border-radius:var(--r-surface);background:transparent;color:var(--muted);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.dealer-info-tabs button:hover{color:var(--ink)}
.dealer-info-tabs button.active{color:#fff;background:#075dcc;border-color:#9ac8ff;box-shadow:0 0 0 2px rgba(7,93,204,.24),0 4px 12px rgba(7,93,204,.28)}
.financial-top-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:6px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2)}
.financial-top-tabs button{min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--muted);font:inherit;font-weight:800;cursor:pointer}
.financial-top-tabs button:hover{background:var(--surface);color:var(--ink)}
.financial-top-tabs button.active{border-color:var(--line);background:var(--surface);color:var(--navy);box-shadow:var(--shadow)}
.commission-new-plan-row{display:flex;justify-content:flex-start;margin:0}
.commission-assignment-history{display:grid;gap:10px;margin-top:4px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);overflow:hidden}
.commission-history-sticky{position:sticky;top:0;z-index:2;display:grid;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.commission-history-sticky label{display:grid;gap:6px;max-width:520px;color:var(--muted);font-size:var(--fs-small);font-weight:700}
.commission-history-sticky input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2);color:var(--ink)}
.commission-history-scroll{max-height:430px;overflow:auto}
.commission-history-scroll thead th{position:sticky;top:0;z-index:1;background:var(--surface-2)}
.salesperson-financials{display:grid;gap:14px}
.salesperson-financial-filters{display:grid;grid-template-columns:minmax(260px,2fr) minmax(150px,.7fr) minmax(150px,.7fr);gap:10px;position:sticky;top:0;z-index:2;padding:12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.salesperson-financial-filters label{display:grid;gap:6px;color:var(--muted);font-size:var(--fs-small);font-weight:700}
.salesperson-financial-filters input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2);color:var(--ink)}
.sw-salesperson-picker{position:relative;align-self:start;min-width:0;z-index:8}
.sw-salesperson-picker .sw-field{margin:0}
.sw-salesperson-suggestions{position:absolute;z-index:40;left:0;right:0;top:100%;display:grid;gap:0;margin-top:4px;max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);box-shadow:var(--shadow-raised)}
.sw-salesperson-suggestions button{width:100%;padding:9px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.sw-salesperson-suggestions button:last-child{border-bottom:0}.sw-salesperson-suggestions button:hover,.sw-salesperson-suggestions button:focus{background:var(--surface-2);outline:none}
.commission-salesperson-picker{position:relative;align-self:start;min-width:0;z-index:8}.commission-salesperson-picker label{display:grid;gap:6px}.commission-salesperson-picker input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2);color:var(--ink)}.commission-salesperson-suggestions{position:absolute;z-index:45;left:0;right:0;top:100%;display:grid;max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);box-shadow:var(--shadow-raised)}.commission-salesperson-suggestions button{width:100%;padding:9px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.commission-salesperson-suggestions button:hover,.commission-salesperson-suggestions button:focus{background:var(--surface-2);outline:none}.commission-salesperson-suggestions .empty{padding:10px}.commission-assignment-dialog{max-width:720px}.commission-assignment-dialog{width:min(860px,calc(100vw - 32px));max-width:860px}.commission-change-dialog,.commission-end-dialog,.commission-view-dialog{max-width:860px}.commission-assignment-warning{margin-top:10px}.bhph-background-review,.bhph-background-status{margin:12px 0}.bhph-background-review p{margin:8px 0 12px}.bhph-background-status{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2)}
/* Keep security/session surfaces readable in the active theme instead of forcing a white dialog. */
.security-dialog,.session-security-dialog,.security-card,.user-security-card{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
.security-dialog input,.security-dialog select,.session-security-dialog input,.session-security-dialog select{background:var(--surface-2)!important;color:var(--ink)!important;border-color:var(--line)!important}
@media(max-width:820px){.salesperson-financial-filters{grid-template-columns:1fr}.financial-top-tabs{align-items:stretch}.financial-top-tabs button{flex:1 1 180px}.dealer-info-tabs{overflow-x:auto;flex-wrap:nowrap}.dealer-info-tabs button{flex:0 0 auto}}
.salesperson-financial-filter{position:sticky;top:0;z-index:2;margin:0;background:var(--surface)}
.commission-viewed-plan{display:grid;gap:12px;margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.warning-notice{border-color:var(--warning-border,var(--line));background:var(--warning-surface,var(--surface-2));color:var(--ink)}

/* FIX140 — preserves FIX139 Buyer Info alignment and readable Change Plan controls */
.sw-salesperson-picker{align-self:stretch}
.sw-salesperson-picker .sw-field{height:100%}
.sw-salesperson-picker .sw-field input{width:100%;height:44px;min-height:44px;box-sizing:border-box}
.commission-change-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px;margin-top:16px}
.commission-change-grid label{display:grid;gap:6px;min-width:0;color:var(--ink);font-size:var(--fs-small);font-weight:700}
.commission-change-grid label>span{display:block;min-width:0}
.commission-change-grid input,.commission-change-grid select{width:100%;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2);color:var(--ink);font:inherit;box-sizing:border-box}
.commission-change-plan-field{grid-column:1/-1}
@media(max-width:700px){.commission-change-grid{grid-template-columns:1fr}.commission-change-plan-field{grid-column:auto}}

.commission-dialog-field{display:grid;gap:6px;max-width:420px;margin-top:16px}.commission-dialog-field input{width:100%;min-height:44px;box-sizing:border-box}

/* FIX140 — one compact segmented-tab pattern, matching Sales.
 * System Tools, Titles & Tags, and Financials must not read as full-width toolbars. */
:is(.system-tools-tabs,.titles-tabs,.financial-top-tabs){
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  width:fit-content;
  max-width:100%;
  margin:0 0 16px;
  padding:4px;
  border:2px solid var(--line);
  border-radius:var(--r-surface);
  background:var(--surface);
  box-shadow:none;
}
.system-tools-sticky-row{width:fit-content;max-width:100%}
.system-tools-sticky-row .system-tools-tabs{flex:0 1 auto;width:fit-content;margin:0}
:is(.system-tools-tabs button,.titles-tab,.financial-top-tabs button){
  min-height:40px;
  padding:8px 18px;
  border:2px solid transparent;
  border-radius:var(--r-surface);
  background:transparent;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
:is(.system-tools-tabs button,.titles-tab,.financial-top-tabs button):hover{
  color:var(--ink);
  background:transparent;
}
:is(.system-tools-tabs button,.titles-tab,.financial-top-tabs button).active{
  color:#fff;
  background:#075dcc;
  border-color:#9ac8ff;
  box-shadow:0 0 0 2px rgba(7,93,204,.24),0 4px 12px rgba(7,93,204,.28);
}
.maintenance-file-cleanup{margin-top:14px}
@media(max-width:820px){
  .financial-top-tabs button{flex:0 0 auto}
}
@media(max-width:760px){
  .titles-tab{flex:0 0 auto}
}

/* FIX141 — Accountant Handoff stays intentionally compact: two date inputs, one action group,
 * the existing Financials summary cards, and a short rules card. The extra selectors are explicit
 * so rendered classes never fall back to browser-default geometry. */
.accountant-export-filter{margin-bottom:14px}
.accountant-export-filter .financial-filter-grid{grid-template-columns:minmax(140px,220px) minmax(140px,220px) auto;justify-content:start}
.accountant-journal-summary{margin-top:14px}
.accountant-export-rules{margin-top:14px}
.accountant-export-rules code{font-family:var(--font-code);font-size:var(--fs-small)}
@media(max-width:700px){.accountant-export-filter .financial-filter-grid{grid-template-columns:1fr}}

/* FIX142 — Accountant Export control/status clarity. Raw debit/credit totals are secondary to the
 * balance control, and skipped/export-history counts stay visible without looking like business KPIs. */
.accountant-event-summary{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;padding:14px}
.accountant-event-chip{display:grid;gap:4px;min-width:190px;flex:1 1 220px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-2)}
.accountant-event-chip strong{font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink)}
.accountant-event-chip span{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--muted)}

/* FIX143 — Print Pack modal layout and blocked-document status. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.warning-panel{display:grid;gap:6px;margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--ambersoft) 65%,var(--surface));color:var(--ink)}
.warning-panel>strong{color:var(--amber)}
.warning-panel>p{margin:0;color:var(--muted)}

/* FIX144 — Print Pack selection must be unmistakable before the readiness check. */
.print-pack-choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:center;gap:20px;margin:18px 0;padding:18px 20px;border:2px solid var(--blue);border-radius:var(--r-surface);background:color-mix(in srgb,var(--bluesoft) 58%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)}
.print-pack-choice-copy{display:grid;gap:4px}.print-pack-choice-copy .eyebrow{margin:0!important}.print-pack-choice-copy h3{margin:0;color:var(--navy);font-size:calc(var(--ui-body) + 7px);line-height:var(--lh-h3)}.print-pack-choice-copy p:not(.eyebrow){margin:2px 0 0;color:var(--muted)}
.print-pack-choice-field{display:grid;gap:7px;font-weight:800;color:var(--navy)}.print-pack-choice-field>span{font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase}.print-pack-choice-field select{width:100%;min-height:48px;padding:0 42px 0 14px;border:2px solid var(--blue);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);font-size:calc(var(--ui-body) + 2px);font-weight:800;cursor:pointer}.print-pack-choice-field select:focus{outline:3px solid color-mix(in srgb,var(--blue) 28%,transparent);outline-offset:2px}
@media(max-width:720px){.print-pack-choice{grid-template-columns:1fr}.print-pack-choice-field{width:100%}}
/* FIX148 Reverse Desking: scoped addition beside Target OTD; no existing Pricing layout is replaced. */
.reverse-desking-modal{width:min(980px,calc(100vw - 34px));max-height:min(90vh,820px);overflow:auto}
.reverse-desking-entry{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr)) max-content;gap:12px;align-items:end;padding:18px 22px;border-bottom:1px solid var(--line)}
.reverse-desking-entry label{display:grid;gap:7px}.reverse-desking-entry label>span{font-size:var(--fs-small);font-weight:800;color:var(--muted)}
.reverse-desking-entry input,.reverse-desking-entry select{width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--input-bg,var(--surface));color:var(--ink);font-size:var(--fs-body);font-weight:750}
.reverse-desking-entry>.button{min-height:42px}.reverse-desking-context{margin:12px 22px 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.reverse-desking-preview dd{text-transform:none}
@media(max-width:1050px){.reverse-desking-entry{grid-template-columns:repeat(2,minmax(0,1fr))}.reverse-desking-entry>.button{grid-column:1/-1}}
@media(max-width:680px){.reverse-desking-entry{grid-template-columns:1fr}}

/* FIX150 Recall Check At Intake — official NHTSA model-level campaign results only. */
.recall-check-section{display:grid;gap:14px}
.recall-check-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.recall-check-actions>span{flex:1 1 320px;color:var(--muted);font-size:var(--fs-small)}
.recall-vin-status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px;border:2px solid var(--blue);border-radius:var(--r-control);background:var(--bluesoft)}
.recall-vin-status>div{display:grid;gap:4px}.recall-vin-status>div>strong{font-size:calc(var(--fs-body) + 1px)}.recall-vin-status>div>span:last-child{color:var(--muted);font-size:var(--fs-small)}
.recall-model-info{border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);overflow:hidden}.recall-model-info>summary{padding:11px 13px;cursor:pointer;font-weight:800}.recall-model-info-body{display:grid;gap:10px;padding:0 13px 13px;border-top:1px solid var(--line)}.recall-model-info-body>p{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small)}
.recall-check-result{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.recall-check-result-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start}
.recall-check-result-head>div{display:grid;gap:3px}.recall-check-result-head>div>span{color:var(--muted);font-size:var(--fs-small)}
.recall-campaign{border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong);overflow:hidden}
.recall-campaign summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 12px;cursor:pointer}.recall-campaign summary>span:first-child{min-width:0;overflow-wrap:anywhere}
.recall-campaign-body{display:grid;gap:8px;padding:0 12px 12px;border-top:1px solid var(--line)}.recall-campaign-body p{margin:10px 0 0;white-space:pre-wrap}
.recall-check-disclaimer{margin:0;padding:10px 12px;border-left:3px solid var(--amber);background:var(--ambersoft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-body)}

/* FIX151 R3 — CRM usability corrections from owner testing.
   Keep the stage board visible as the overview, then a searchable lead list below it. Editing an
   existing lead expands beside that list so the user never loses the list they were working from. */
.crm-lead-form{margin:0 0 16px;padding:18px 20px}
.crm-lead-form>h2{margin:.2rem 0 0;color:var(--ink)}
.crm-lead-form-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px 22px;margin-top:16px}
.crm-lead-form-grid label,.crm-lead-notes{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:var(--fs-small);font-weight:700;color:var(--pui-support)}
.crm-lead-form-grid label>span,.crm-lead-notes>span{display:block}
.crm-lead-form-grid input,.crm-lead-form-grid select,.crm-lead-notes textarea{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font:inherit;font-weight:400}
.crm-lead-form-grid input,.crm-lead-form-grid select{min-height:var(--control-height)}
.crm-lead-form-grid input:focus,.crm-lead-form-grid select:focus,.crm-lead-notes textarea:focus,.crm-lead-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.crm-lead-notes{margin-top:16px}
.crm-lead-notes textarea{min-height:104px;resize:vertical;line-height:var(--lh-body)}
.crm-lead-form-actions{margin-top:12px}.crm-delete-lead{margin-left:auto}
.crm-lead-paste{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.crm-lead-paste textarea{width:100%;min-height:74px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font:inherit;resize:vertical}
.crm-lead-paste>div{margin-top:7px}

.crm-contact-panel{display:block;margin-top:16px;padding:12px 14px}
.crm-contact-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.crm-contact-panel h3{margin:.1rem 0 0}
.crm-contact-note{margin:8px 0 0!important;max-width:none!important;font-size:var(--fs-micro)!important;line-height:var(--lh-micro)!important;color:var(--pui-support)!important}

.crm-lead-directory{--crm-lead-data-columns:minmax(170px,1.2fr) minmax(140px,.9fr) minmax(115px,.7fr) minmax(190px,1.05fr);--crm-lead-actions-width:minmax(300px,360px);margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.crm-lead-directory-head{display:grid;grid-template-columns:minmax(240px,1fr) minmax(260px,420px) auto;gap:16px;align-items:end;margin-bottom:12px}
.crm-lead-directory-head h2{margin:.15rem 0 0;font-size:var(--fs-lead);color:var(--ink)}
.crm-lead-scope{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.crm-lead-scope-button span{margin-left:4px;opacity:.8}
.crm-stage-clear{margin-top:5px;font-size:var(--fs-small)}
.crm-lead-search{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);font-weight:700;color:var(--pui-support)}
.crm-lead-search input{width:100%;min-height:var(--control-height);padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font:inherit;font-weight:400}
.crm-lead-search-count{align-self:end;min-width:62px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface-soft);font-size:var(--fs-small);font-weight:700;text-align:center;color:var(--ink)}
.crm-lead-columns,.crm-lead-row{display:grid;grid-template-columns:minmax(0,1fr) var(--crm-lead-actions-width);gap:12px;align-items:center}
.crm-lead-columns{padding:0 13px 6px;color:var(--pui-support);font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.035em}
.crm-lead-columns-main,.crm-lead-row-main{display:grid;grid-template-columns:var(--crm-lead-data-columns);gap:12px;align-items:center;min-width:0}
.crm-lead-columns>span{text-align:right;padding-right:2px}
.crm-lead-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.crm-lead-workspace.has-detail{grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr)}
.crm-lead-list{display:flex;flex-direction:column;gap:7px;min-width:0;max-height:760px;overflow:auto;padding-right:2px}
.crm-lead-row{border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r-surface);background:var(--surface-strong);padding:8px 10px}
.crm-lead-row:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.crm-lead-row.due{border-left-color:var(--pui-risk);background:color-mix(in srgb,var(--pui-risk) 4%,var(--surface-strong))}
.crm-lead-row.cold{border-left-color:color-mix(in srgb,var(--pui-risk) 62%,var(--line));background:color-mix(in srgb,var(--pui-risk) 2%,var(--surface-strong))}
.crm-lead-row.selected{box-shadow:inset 0 0 0 1px var(--accent)}
.crm-lead-row-main{padding:4px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.crm-lead-row-name,.crm-lead-row-interest,.crm-lead-row-stage,.crm-lead-row-followup{display:flex;flex-direction:column;gap:2px;min-width:0}
.crm-lead-row-name strong,.crm-lead-row-interest strong,.crm-lead-row-stage strong,.crm-lead-row-followup strong{font-size:var(--fs-body);color:var(--ink)}
.crm-lead-row-name small,.crm-lead-row-interest small,.crm-lead-row-stage small,.crm-lead-row-followup small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--pui-support);overflow-wrap:anywhere}
.crm-lead-row-followup.due strong,.crm-lead-row-followup.due small,.crm-lead-row-followup.cold strong,.crm-lead-row-followup.cold small{color:var(--pui-risk)}
.crm-lead-row-actions{display:flex;gap:5px;width:100%;justify-content:flex-end;flex-wrap:wrap}
.crm-lead-toggle{min-width:58px}
.crm-lead-list-empty{margin:0;padding:18px;border:1px dashed var(--line);border-radius:var(--r-surface);text-align:center;color:var(--pui-support);font-size:var(--fs-body)}
.crm-lead-detail{min-width:0}
.crm-lead-detail>.crm-lead-form{margin:0}

@media(max-width:1500px){
 .crm-lead-form-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}
 .crm-lead-workspace.has-detail{grid-template-columns:minmax(360px,.85fr) minmax(460px,1.15fr)}
}
@media(max-width:1120px){
 .crm-lead-form-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}
 .crm-lead-columns,.crm-lead-row{grid-template-columns:1fr}
 .crm-lead-columns>span{display:none}
 .crm-lead-row-actions{justify-content:flex-start}
 .crm-lead-directory-head{grid-template-columns:1fr minmax(240px,360px)}
 .crm-lead-search-count{grid-column:2;justify-self:end}
 .crm-lead-workspace.has-detail{grid-template-columns:1fr}
 .crm-lead-list{max-height:none}
 .crm-lead-row-main,.crm-lead-columns-main{grid-template-columns:minmax(160px,1fr) minmax(130px,.85fr) minmax(110px,.7fr) minmax(170px,1fr)}
}
@media(max-width:760px){
 .crm-lead-form-grid,.crm-lead-directory-head{grid-template-columns:1fr}
 .crm-lead-search-count{grid-column:1;justify-self:start}
 .crm-lead-columns{display:none}
 .crm-lead-row{grid-template-columns:1fr}
 .crm-lead-row-main{grid-template-columns:1fr}
 .crm-lead-row-actions{justify-content:flex-start}
}

/* FIX152 R3 — Listing photo export overlays: readable hierarchy + theme-native modal. */
.listing-photo-export-modal{width:min(1180px,96vw);max-height:92vh;overflow:auto;background:var(--surface);color:var(--ink);border-color:var(--line)}
.listing-photo-export-modal .modal-header{border-color:var(--line)}
.listing-photo-export-modal .modal-header h2,.listing-photo-export-modal h3{color:var(--ink)}
.listing-photo-export-modal .modal-header p{color:var(--muted)}
.listing-photo-export-grid{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;margin-top:14px}
.listing-photo-export-controls{display:grid;gap:14px}
.listing-photo-export-fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.listing-photo-export-fieldset legend{padding:0 6px;color:var(--ink);font-weight:700}
.listing-photo-toggle{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.listing-photo-toggle:last-child{border-bottom:0;padding-bottom:0}
.listing-photo-toggle input{margin-top:3px}
.listing-photo-toggle span{color:var(--ink);font-weight:700}
.listing-photo-toggle small{grid-column:2;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.listing-photo-toggle input:disabled~span,.listing-photo-toggle input:disabled~small{opacity:.46}
.listing-photo-export-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.listing-photo-export-summary div{padding:8px 0;border-bottom:1px solid var(--line)}
.listing-photo-export-summary div:nth-last-child(-n+2){border-bottom:0}
.listing-photo-export-summary dt{margin:0 0 4px;color:var(--muted);font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.listing-photo-export-summary dd{margin:0;color:var(--ink);font-weight:700}
.listing-photo-export-preview-panel{display:grid;gap:12px}
.listing-photo-preview-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.listing-photo-preview-head h3{margin:0 0 4px}
.listing-photo-preview-head p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.listing-photo-preview-stage{min-height:260px;display:grid;place-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.listing-photo-preview-stage canvas{max-width:100%;max-height:62vh;border-radius:var(--r-control);box-shadow:var(--shadow-raised);background:#fff}
.listing-photo-preview-note{margin:0;color:var(--muted);font-size:var(--fs-small)}
.listing-photo-export-modal .rule-callout{background:var(--surface-soft);border-color:var(--line);color:var(--muted)}
.listing-photo-export-modal .rule-callout strong{color:var(--ink)}
@media(max-width:900px){.listing-photo-export-grid{grid-template-columns:1fr}.listing-photo-export-summary{grid-template-columns:1fr}}

/* FIX153 — Form 8300 Cash-Reporting Watch. Detection/support only; no filing state. */
.form8300-panel{margin-top:14px;border-left:4px solid var(--line)}
.form8300-panel.warning{border-left-color:#a66500}.form8300-panel.danger{border-left-color:#a6252c}
.form8300-panel .panel-heading,.form8300-customer-panel .panel-heading{align-items:flex-start}
.form8300-panel .panel-heading p,.form8300-customer-panel .panel-heading p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.form8300-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.form8300-kpis>div{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.form8300-kpis span{color:var(--muted);font-size:var(--fs-small);font-weight:700}.form8300-kpis strong{color:var(--ink);font-size:var(--fs-h3)}
.form8300-kpis small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-small)}
.form8300-reviewed-note{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.form8300-receipt-table{margin-top:8px}.form8300-receipt-table td small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-micro);white-space:normal}.form8300-reversal{opacity:.76}
.form8300-modal{width:min(820px,96vw)}
.form8300-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.form8300-form-grid label{display:grid;gap:6px}.form8300-form-grid label>span{color:var(--ink);font-size:var(--fs-small);font-weight:700}
.form8300-form-grid input,.form8300-form-grid select,.form8300-form-grid textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--input-bg,var(--surface));color:var(--ink);font-size:var(--fs-body)}
.form8300-form-grid small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-small)}.form8300-form-grid .span-full{grid-column:1/-1}
.form8300-rule-note,.form8300-receipt-preview,.bhph-form8300-warning{padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.form8300-receipt-preview{margin-top:10px}.form8300-receipt-preview.warning,.bhph-form8300-warning.warning{border-color:#c69038;background:var(--surface-soft)}.form8300-receipt-preview.danger,.bhph-form8300-warning.danger{border-color:#c86a70;background:var(--surface-soft)}
.form8300-receipt-preview small,.bhph-form8300-warning small{color:var(--muted);font-size:var(--fs-micro)}
.bhph-form8300-warning{grid-column:1/-1;margin-top:4px}
.form8300-customer-panel{grid-column:1/-1}
@media(max-width:850px){.form8300-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.form8300-form-grid{grid-template-columns:1fr}}
@media(max-width:560px){.form8300-kpis{grid-template-columns:1fr}}


/* FIX153 R2 — persistent Form 8300 Manager Attention. Watch workflow only; never a filing/compliance claim. */
.header-manager-attention{display:flex;align-items:center;min-width:0}
.manager-attention-nav{position:relative}
.manager-attention-button{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid #ef646d;border-radius:var(--r-control);background:color-mix(in srgb,#7e252d 42%,#102b4e);color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 0 0 1px rgba(239,100,109,.18),0 5px 18px rgba(0,0,0,.18)}
.manager-attention-button:hover{background:color-mix(in srgb,#9a2e38 50%,#102b4e)}
.manager-attention-count{min-width:24px;padding:2px 7px;border-radius:var(--r-stadium);background:#c9363e;color:#fff;text-align:center;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.manager-attention-panel{min-width:min(430px,92vw);max-width:520px;max-height:70vh;overflow:auto;background:#102438!important;color:#f2f7fc!important;border:1px solid #b95d66!important;box-shadow:var(--shadow-raised)!important}
.manager-attention-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 14px;border-bottom:1px solid #476079;background:#172a3e;color:#f2f7fc}
.manager-attention-heading strong{color:#fff}.manager-attention-heading span{color:#d7e3ef}
.manager-attention-item,.manager-attention-row{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;background:transparent;color:var(--ink);padding:12px 14px;cursor:pointer}
.manager-attention-item{position:relative;background:#102438!important;color:#f2f7fc!important;border-left:4px solid #c9363e!important}
.manager-attention-item strong{color:#fff!important}.manager-attention-item span{color:#d7e3ef!important}.manager-attention-item small{color:#bdcad7!important}
.manager-attention-item+ .manager-attention-item,.manager-attention-row+ .manager-attention-row{border-top:1px solid var(--line)}
.manager-attention-item:hover{background:#1d3349!important}.manager-attention-row:hover{background:color-mix(in srgb,var(--red) 10%,var(--surface-soft))}
.manager-attention-action-badge{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border-radius:var(--r-stadium);background:#c9363e;color:#fff!important;font-size:var(--fs-micro);font-weight:900;letter-spacing:.055em;line-height:var(--lh-micro)}
.manager-attention-item.due_soon,.manager-attention-row.due_soon,.manager-attention-item.due-soon,.manager-attention-row.due-soon{font-weight:700}
.manager-attention-item.past_base_watch_date,.manager-attention-row.past_base_watch_date{outline:2px solid #ef646d;outline-offset:-3px}
.manager-attention-card{margin:14px 0;border:2px solid #c9363e!important;box-shadow:0 0 0 1px rgba(201,54,62,.18),0 12px 34px rgba(16,43,78,.12)}
.manager-attention-card>.panel-heading{background:color-mix(in srgb,var(--red) 10%,var(--surface));border-bottom-color:color-mix(in srgb,var(--red) 55%,var(--line))}
.manager-attention-card>.panel-heading h2{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.manager-attention-list{border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));border-radius:var(--r-control);overflow:hidden}
.manager-attention-row{border-left:4px solid #c9363e;background:color-mix(in srgb,var(--red) 4%,var(--surface));color:var(--ink)}
.form8300-action-backdrop{z-index:1150}
.form8300-action-modal{max-width:720px}
.form8300-action-modal .form8300-kpis{margin:14px 0}
@media(max-width:900px){.manager-attention-button>span:nth-child(2){display:none}.manager-attention-panel{position:fixed;left:8px;right:8px;width:auto;min-width:0}}

/* FIX153 R5 — completed-sale cancellation keeps Form 8300 evidence/actionable follow-up visible. */
.form8300-sale-cancelled-badge{display:inline-flex;align-items:center;width:max-content;margin:2px 0;padding:2px 7px;border:1px solid #d9783a;border-radius:var(--r-stadium);background:#3a2416;color:#ffd6b8;font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em}
.manager-attention-item.sale-cancelled,.manager-attention-row.sale-cancelled{border-left-color:#e07a37}
.form8300-cancelled-watch-row{box-shadow:inset 3px 0 0 #e07a37}
.form8300-cancelled-watch-row small{color:var(--muted)}

/* FIX156 — Dashboard Needs Attention is a compact index into existing workflows, not a second alert system. */
.dashboard-attention-modal{width:min(720px,calc(100vw - 32px))}
.dashboard-attention-list{display:grid;gap:8px;margin:16px 0}
.dashboard-attention-row{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.dashboard-attention-row:hover,.dashboard-attention-row:focus{border-color:var(--blue);background:var(--surface-soft);outline:none}
.dashboard-attention-row>span:first-child{display:grid;gap:2px}
.dashboard-attention-row small{color:var(--muted)}
.dashboard-attention-row>b{font-size:var(--fs-h3);color:var(--navy)}
.dashboard-attention-row.act{border-left:4px solid var(--red)}
.dashboard-attention-row.watch{border-left:4px solid var(--amber)}

/* FIX159 R2 Market Intelligence closure states. These classes are rendered dynamically and need
   explicit stylesheet rules so no owner-facing state falls back to browser defaults. */
.mi-vehicle-chooser{display:grid;gap:12px}
.mi-vehicle-chooser .table-wrap{margin-top:2px}
.mi-no-evidence{display:grid;gap:10px;border-left:3px solid var(--amber,#a8650a)}
.mi-no-evidence h2,.mi-no-evidence p{margin:0}
.mix-market-scope{display:grid;gap:8px}
.mi-market-scope-value{margin:2px 0 8px;font-family:var(--font-head);font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-h2);color:var(--navy,#102b4e);font-variant-numeric:tabular-nums}
.mix-dealer-history{display:grid;gap:8px}
.mix-chip-high{background:var(--greensoft,#e4f5eb);color:var(--green,#1d7448)}
.mix-chip-low{background:var(--ambersoft,#fff2d8);color:var(--amber,#a8650a)}
.mp-positioning{border-left:3px solid var(--blue,#245f9f)}

/* FIX161 R2 — Market Intelligence owner-test hierarchy correction.
 * The page now gives the dealer a decision summary and the best comparable rows first. The full
 * evidence stack is preserved, but it no longer competes at equal visual weight on initial load. */
.mi-back{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 2px}
.mi-back .mi-help-link{padding-left:14px;border-left:1px solid var(--line)}
.mi-decision{margin:12px 0 6px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft);overflow:hidden}
.mi-decision-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px 9px;border-bottom:1px solid var(--line)}
.mi-decision-head h3{margin:0;color:var(--ink);font-size:var(--fs-lead)}
.mi-decision-scope{padding:4px 9px;border-radius:var(--r-stadium);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-small);font-weight:800}
.mi-decision-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.2fr}
.mi-decision-grid>div{padding:13px 16px;border-left:1px solid var(--line);min-width:0}
.mi-decision-grid>div:first-child{border-left:0}
.mi-decision-grid span,.mi-decision-grid small{display:block;color:var(--muted);font-size:var(--fs-small)}
.mi-decision-grid strong{display:block;margin:3px 0;color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.mi-decision-next{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.mi-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 8px}
.mi-block-head h3{margin:0}
.mi-block-head p{margin:2px 0 0;color:var(--muted);font-size:var(--fs-small)}
.mi-block-head>span{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
.mi-comps-primary{margin-top:12px}
.mi-thumb{display:grid;place-items:center;text-align:center;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.mi-thumb-loading{background:linear-gradient(90deg,var(--surface-soft),color-mix(in srgb,var(--blue) 8%,var(--surface-soft)),var(--surface-soft));background-size:200% 100%;animation:mi-thumb-loading 1.3s ease-in-out infinite}
@keyframes mi-thumb-loading{0%{background-position:0 0}100%{background-position:200% 0}}
.mi-thumb-empty{border:1px dashed var(--line);background:var(--surface-soft);color:var(--muted)}
.mi-more-comps{margin-top:7px;border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden;background:var(--surface)}
.mi-more-comps>summary{padding:9px 12px;color:var(--blue);font-size:var(--fs-small);font-weight:800;cursor:pointer}
.mi-more-comps[open]>summary{border-bottom:1px solid var(--line)}
.mi-evidence-details,.mi-agent-details{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.mi-evidence-details>summary,.mi-agent-details>summary{display:flex;align-items:baseline;gap:9px;padding:12px 14px;color:var(--ink);font-weight:800;cursor:pointer;list-style-position:inside}
.mi-evidence-details>summary span,.mi-agent-details>summary span{color:var(--muted);font-size:var(--fs-small);font-weight:500}
.mi-evidence-details[open]>summary,.mi-agent-details[open]>summary{border-bottom:1px solid var(--line)}
.mi-evidence-body{padding:12px}
.mi-evidence-body>.mix-card:first-child{margin-top:0}
.mi-agent-details>.panel{border:0;border-radius:0;box-shadow:none}
.mi-table-note strong{color:var(--ink)}
@media(max-width:1050px){.mi-decision-grid{grid-template-columns:1fr 1fr}.mi-decision-grid>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.mi-decision-grid>div:nth-child(4){border-top:1px solid var(--line)}}
@media(max-width:650px){.mi-decision-grid{grid-template-columns:1fr}.mi-decision-grid>div{border-left:0;border-top:1px solid var(--line)}.mi-decision-grid>div:first-child{border-top:0}.mi-back .mi-help-link{padding-left:0;border-left:0}.mi-evidence-details>summary,.mi-agent-details>summary{align-items:flex-start;flex-direction:column;gap:2px}}

/* FIX161 R3 — owner-test discoverability and truthful unavailable states. */
.mi-agent-inline{margin:10px 0 12px;border:2px solid color-mix(in srgb,var(--blue) 45%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--blue) 6%,var(--surface));box-shadow:var(--shadow-raised)}
.mi-agent-inline .market-agent{border:0;background:transparent;padding:14px 16px}
.mi-agent-inline .ma-head h3{font-size:var(--fs-lead);color:var(--ink)}
.ma-composer{display:grid;gap:9px}
.ma-composer>label{font-weight:800;color:var(--ink)}
.ma-composer textarea{width:100%;min-height:58px;resize:vertical;border:1px solid var(--line);border-radius:var(--r-surface);padding:9px 11px;background:var(--surface);color:var(--ink);font:inherit}
.ma-composer textarea:focus{outline:2px solid color-mix(in srgb,var(--blue) 48%,transparent);outline-offset:1px;border-color:var(--blue)}
.ma-prompt-row,.ma-submit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ma-prompt-row .ma-prompt{background:var(--surface);color:var(--ink)}
.ma-submit-row .ma-foot{margin-left:2px}
.ma-running{margin-top:10px}
.mi-more-comps>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;background:color-mix(in srgb,var(--blue) 7%,var(--surface));font-size:var(--fs-body)}
.mi-more-comps>summary span{font-weight:850;color:var(--blue)}
.mi-more-comps>summary strong{font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.mi-table{table-layout:fixed;min-width:1040px}
.mi-table .mi-thumb-col{width:76px}
.mi-table .mi-vehicle-col{width:26%}
.mi-table .mi-miles-col{width:11%}
.mi-table .mi-price-col{width:11%}
.mi-table .mi-sold-delta-col{width:11%}
.mi-table .mi-days-col{width:140px;text-align:left!important}
.mi-table .mi-history-col{width:190px}
.mi-table .mi-source-col{width:190px}
.mi-dom-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mi-stale-badge{display:inline-block;padding:2px 6px;border-radius:var(--r-stadium);background:var(--ambersoft,#fff2d8);color:var(--amber,#a8650a);font-size:var(--fs-micro);font-weight:850;white-space:nowrap}
.mi-source-cell{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.mi-source-cell>span{overflow-wrap:anywhere}
.mi-source-cell small{color:var(--muted);font-size:var(--fs-micro)}
.mi-open-listing{display:inline-flex;align-items:center;white-space:nowrap;color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.mi-trim-context{margin-top:5px!important;color:var(--muted)!important}
.mi-trim-context.ok strong{color:var(--green)}
.mi-evidence-details{border-width:2px;border-color:color-mix(in srgb,var(--blue) 28%,var(--line));box-shadow:var(--shadow-raised)}
.mi-evidence-details>summary{justify-content:space-between;gap:14px;background:color-mix(in srgb,var(--blue) 5%,var(--surface));padding:13px 15px}
.mi-evidence-details>summary strong{font-size:var(--fs-body);color:var(--ink)}
.mi-evidence-details>summary span{text-align:right}
@media(max-width:650px){.mi-more-comps>summary,.mi-evidence-details>summary{align-items:flex-start;flex-direction:column}.mi-evidence-details>summary span{text-align:left}.mi-dom-wrap{align-items:flex-start}}
/* FIX162 R4 Marketing — owner-approved Option B side-by-side marketplace cards. */
.mk-option-b{position:relative}
.mk-platforms{margin-top:14px;padding:18px;border:1px solid color-mix(in srgb,var(--blue) 52%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--surface-strong) 96%,var(--blue));box-shadow:var(--shadow-raised)}
.mk-platforms-heading{display:flex;justify-content:space-between;gap:18px;align-items:center}
.mk-platforms-title{display:flex;align-items:center;gap:12px;min-width:0}.mk-platforms-title h3{margin:0 0 2px;font-size:var(--fs-h3);color:var(--ink)}.mk-platforms-title .field-help{margin:0}
.mk-chooser-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-stadium);color:#fff;background:linear-gradient(145deg,#397fda,#1e5ca7);font-size:var(--fs-h2);font-weight:800;box-shadow:var(--shadow-raised)}
.mk-manual-note{display:flex;align-items:flex-start;gap:10px;flex:0 0 auto;max-width:330px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--blue) 42%,var(--line));border-radius:var(--r-surface);background:color-mix(in srgb,var(--blue) 9%,var(--surface-strong));color:var(--pui-support)}.mk-manual-note>span{color:var(--blue);font-size:var(--fs-lead);line-height:1}.mk-manual-note p{margin:0;font-size:var(--fs-small);line-height:var(--lh-body)}
/* As many columns as fit at 230px or more, rather than always three: beside the car list at a 1180px
   window three columns left each card ~160px and every word broke in half. */
.mk-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px;align-items:stretch}
.mk-platform-card{--mk-brand:var(--blue);appearance:none;width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:188px;padding:16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-raised);transition:transform .14s,border-color .14s,box-shadow .14s,background .14s}
.mk-platform-card:hover{transform:translateY(-1px);border-color:var(--mk-brand);box-shadow:var(--shadow-raised)}
.mk-platform-card.active{border-color:var(--mk-brand);background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--mk-brand),0 8px 20px rgba(0,0,0,.16)}
.mk-platform-facebook{--mk-brand:#2384ff}.mk-platform-craigslist{--mk-brand:#8733c9}.mk-platform-cargurus{--mk-brand:#16a7e6}
/* THE NAME OF THE PLACE YOU ARE POSTING TO IS NEVER CUT OFF. The name was nowrap + ellipsis beside a
   status pill, and at 1440px the three cards read "Facebo…", "Crai…", "Car…" (and at 1180 the names
   were squeezed to 2px): the one word on the card that says what it is. The top row now wraps - the
   pill drops under the name when both do not fit - and a long name wraps onto a second line
   (measured by tools/dev/walk). */
.mk-platform-card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;min-width:0}.mk-platform-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 150px}.mk-platform-brand>strong{min-width:0;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:800}.mk-platform-card-top>.mk-state{flex:0 0 auto;white-space:nowrap}
.mk-platform-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-stadium);color:#fff;background:var(--mk-brand);font-size:var(--fs-h2);font-weight:900;line-height:1;box-shadow:var(--shadow-raised)}
.mk-platform-craigslist .mk-platform-icon{background:color-mix(in srgb,var(--mk-brand) 16%,transparent);border:3px solid var(--mk-brand);color:var(--mk-brand);font-size:var(--fs-h2)}
.mk-platform-ready{padding-left:54px;color:var(--mk-brand);font-size:var(--fs-body);font-weight:800}.mk-platform-ready.missing{color:var(--amber)}.mk-platform-purpose{padding-left:54px;color:var(--ink);font-size:var(--fs-body);font-weight:700}.mk-platform-mode{padding-left:54px;color:var(--pui-support);font-size:var(--fs-body)}
.mk-platform-expand{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;margin-top:auto;padding:0 14px;border:1px solid var(--mk-brand);border-radius:var(--r-control);color:var(--ink);background:var(--surface);font-size:var(--fs-body);font-weight:800;text-align:center}.mk-platform-expand>span{margin-left:auto;font-size:var(--fs-h2);line-height:1;transition:transform .14s}.mk-platform-card.active .mk-platform-expand>span{transform:rotate(90deg)}
.mk-platform-panel{margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--blue) 42%,var(--line));border-radius:var(--r-surface);background:var(--surface-strong);box-shadow:var(--shadow-raised)}
.mk-platform-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.mk-platform-panel-head h4{margin:0 0 3px;font-size:var(--fs-lead);color:var(--ink)}.mk-platform-panel-head .field-help{margin:0}
.mk-copy-inline{margin:0 0 14px;padding:0 0 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.mk-copy-inline .mk-copy-head{margin-bottom:8px}.mk-copy-inline .mk-copy-head h3{font-size:var(--fs-body)}.mk-copy-inline textarea{min-height:96px;max-height:180px;padding:10px 12px;background:var(--surface)}.mk-copy-inline .field-help{margin-bottom:0}
.mk-state.refresh-needed,.mk-state.verify-photos{background:var(--ambersoft,#fff2d8);color:var(--amber,#a8650a)}.mk-state.needs-work{background:var(--redsoft,#fde7e9);color:var(--red,#a62c35)}.mk-state.not-submitted{background:var(--surface-soft);color:var(--pui-support)}
@media(max-width:1100px){.mk-platforms-heading{align-items:flex-start}.mk-platform-grid{grid-template-columns:1fr}.mk-platform-card{padding:14px}.mk-platform-panel{padding:14px}}
@media(max-width:720px){.mk-platforms{padding:14px}.mk-platforms-heading{flex-direction:column}.mk-manual-note{width:100%;max-width:none}.mk-platform-ready,.mk-platform-purpose,.mk-platform-mode{padding-left:0}}


.mk-ai-write-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.mk-ai-write-controls label{display:grid;gap:4px;color:var(--pui-support);font-size:var(--fs-small)}.mk-ai-write-controls select{min-width:120px}


/* FIX164 R1 — deal-centered paperwork navigation and reviewed bulk filing. */
.deal-context-switcher{display:grid;grid-template-columns:minmax(320px,720px) minmax(220px,1fr);align-items:end;gap:14px;margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft)}
.deal-context-switcher.prominent{border:2px solid var(--accent);background:var(--surface);box-shadow:var(--shadow-raised)}
.deal-context-switcher label{display:grid;gap:6px;color:var(--muted);font-size:var(--fs-small);font-weight:700}
.deal-context-switcher select{width:100%;min-width:0;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:inherit}
.deal-context-search{width:100%;min-width:0;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:inherit}.deal-context-search:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 22%,transparent);outline-offset:1px}
.deal-context-switcher small{align-self:center;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.executed-paperwork-panel>p{margin:0 0 10px;color:var(--muted)}
.executed-paperwork-picker{display:grid;gap:6px;max-width:680px;margin:12px 0 14px;padding:14px;border:2px solid var(--accent);border-radius:var(--r-surface);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-small);font-weight:700;cursor:pointer}.executed-paperwork-picker>span{font-size:var(--fs-body);color:var(--ink)}.executed-paperwork-picker>small{color:var(--muted);font-weight:500}
.executed-paperwork-picker input{min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}
.executed-paperwork-review{display:grid;gap:10px;margin-top:12px}
.executed-paperwork-review td small{display:block;margin-top:3px;color:var(--muted)}
.executed-paperwork-review select,.executed-paperwork-review input{width:100%;min-width:180px;min-height:36px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:inherit}
@media(max-width:900px){.deal-context-switcher{grid-template-columns:1fr}.executed-paperwork-review select,.executed-paperwork-review input{min-width:140px}}

/* FIX164 R5 — owner-test corrections: one-field searchable pickers, clearer Start Deal,
   and an explicit RMV valuation replacement workflow. */
.filter-combobox{position:relative;min-width:0}
.filter-combobox-input{width:100%;min-width:0;min-height:40px;padding:0 36px 0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font:inherit}
.filter-combobox:after{content:"⌄";position:absolute;right:12px;top:20px;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:var(--fs-body)}
.filter-combobox-input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 22%,transparent);outline-offset:1px}
.filter-combobox-options{position:absolute;z-index:1450;top:calc(100% + 4px);left:0;right:0;max-height:300px;overflow:auto;padding:5px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow-raised)}
.filter-combobox-options.filter-combobox-floating{position:fixed;z-index:1700;right:auto}
.filter-combobox-option{display:block;width:100%;padding:9px 10px;border:0;border-radius:var(--r-control);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.filter-combobox-option:hover,.filter-combobox-option:focus,.filter-combobox-option[aria-selected="true"]{outline:none;background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.filter-combobox-option[hidden]{display:none}
.filter-combobox-empty{padding:12px;color:var(--muted);font-size:var(--fs-small);text-align:center}
.crm-vehicle-picker{min-width:320px}
.crm-intake-review .table-wrap{overflow:visible}
.crm-contact-buttons .crm-start-deal{min-height:42px;padding:0 18px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);font-weight:800}
.crm-contact-buttons .crm-start-deal:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.deal-context-combobox .filter-combobox-input{min-height:46px;font-weight:700;border-width:2px;border-color:color-mix(in srgb,var(--accent) 58%,var(--line))}
.sw-bhph-rmv-current{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 14px 12px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--pui-ok,#1c7a4a) 38%,var(--line));border-radius:var(--r-control);background:color-mix(in srgb,var(--pui-ok,#1c7a4a) 6%,var(--surface))}
.sw-bhph-rmv-current>div:first-child{min-width:0}.sw-bhph-rmv-current strong,.sw-bhph-rmv-current small{display:block}.sw-bhph-rmv-current small{margin-top:3px;color:var(--muted);font-size:var(--fs-micro);overflow-wrap:anywhere}
.sw-bhph-rmv-current-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sw-bhph-rmv-replace{display:grid;gap:10px;margin:0 14px 12px;padding:12px;border:2px solid var(--accent);border-radius:var(--r-control);background:var(--surface-soft)}
.sw-bhph-rmv-replace[hidden]{display:none}
.sw-bhph-rmv-replace>div>strong,.sw-bhph-rmv-replace>div>small{display:block}.sw-bhph-rmv-replace>div>small{margin-top:3px;color:var(--muted);font-size:var(--fs-micro)}
.sw-bhph-rmv-replace>input[type=file]{width:100%;min-height:40px}
.sw-bhph-rmv-replace-fields{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(220px,1fr) minmax(150px,.7fr);gap:10px}
@media(max-width:760px){.crm-vehicle-picker{min-width:0}.crm-intake-review .table-wrap{overflow:auto}.filter-combobox-options{position:static;margin-top:4px}.sw-bhph-rmv-current{align-items:flex-start;flex-direction:column}.sw-bhph-rmv-current-actions{justify-content:flex-start}.sw-bhph-rmv-replace-fields{grid-template-columns:1fr}}

/* FIX166 R2 Reports Closure: one source-backed report dataset, rendered consistently on screen/export/print. */
.report-menu-panel{padding:16px}.report-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.report-toolbar .report-select-label{min-width:280px;flex:1}.report-toolbar label span{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:6px}.report-identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:14px 0;padding:12px;border:1px solid #d7e0e9;border-radius:var(--r-surface)}.report-identity-grid p{margin:0;display:grid;gap:2px}.report-identity-grid strong{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.report-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}.report-summary-card{border:1px solid #d7e0e9;border-radius:var(--r-surface);padding:10px 12px;display:grid;gap:4px}.report-summary-card span{font-size:var(--fs-small);color:var(--muted)}.report-summary-card strong{font-size:var(--fs-lead)}.report-data-state{font-weight:700}.report-notes{margin:14px 0 0;padding-left:20px}.report-notes li{margin:4px 0}.report-record-count{font-weight:700;margin-top:12px}.formal-report-sheet{padding:18px}.formal-report-meta{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-small);color:var(--muted)}
@media(max-width:760px){.report-identity-grid{grid-template-columns:1fr}.report-filter-grid{grid-template-columns:1fr}.report-toolbar .report-select-label{min-width:100%}}

/* FIX166 R2 Reports catalog / usability corrections. */
.report-category-heading{margin:0 0 4px;padding:0 4px;color:var(--muted);font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.report-category-nav button{display:grid;gap:3px}
.report-category-nav button strong{font-size:var(--fs-body)}
.report-category-nav button span{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.report-category-nav button.active span{color:#dce8f5}
.report-category-nav button:disabled{opacity:.55;cursor:not-allowed}
.report-choose-panel{display:grid;gap:10px;padding:14px;border:2px solid var(--blue);border-radius:var(--r-surface);background:var(--surface-2)}
.report-choose-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.report-choose-heading>div{display:grid;gap:2px}
.report-choose-heading strong{color:var(--navy);font-size:var(--fs-h3)}
.report-choose-heading small{color:var(--muted);font-size:var(--fs-small);font-weight:700}
.report-choose-panel select{width:100%;min-height:44px;padding:8px 12px;border:2px solid var(--navy);border-radius:var(--r-control);background:var(--surface);color:var(--ink);font-weight:700}
.report-secondary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.report-date-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.report-date-presets .button.active{color:#fff;background:var(--navy);border-color:var(--navy)}
.report-filter-grid{margin-top:12px}
.report-unsupported{display:grid;gap:6px;margin:12px 0;padding:14px;border:1px solid #dfbd72;border-left:4px solid var(--amber);border-radius:var(--r-control);background:#fff7df;color:#5f430f}
.report-support-badge{display:inline-flex;margin:4px 0 10px;padding:6px 9px;border:1px solid #dfbd72;border-radius:var(--r-stadium);background:#fff7df;color:#7a5009;font-size:var(--fs-small);font-weight:800}
.report-columns-modal{width:min(900px,96vw)}
.report-column-builder{margin-top:12px}
/* Sticky report headings must be opaque. Body rows must never bleed through while scrolling. */
.formal-report-sheet .report-table th{background:#fff!important;z-index:6;box-shadow:var(--shadow)}
@media(max-width:800px){.report-choose-heading{align-items:stretch;flex-direction:column}.report-choose-heading .button{width:100%}.report-secondary-actions .button{flex:1 1 auto}}
/* FIX166 R3: Custom Reports editor state must stay visibly bound to the selected saved definition. */
.custom-editor-state{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:10px 12px;border:1px solid #aab9ca;border-radius:var(--r-control);background:#f4f7fa}
.custom-editor-state span{font-size:var(--fs-small);color:#60758b}
.custom-editor-state.dirty{border-color:#a86a00;background:#fff7e6}.custom-editor-state.dirty span{color:#7a4c00;font-weight:700}
.saved-report-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.saved-report-heading h3{margin:0}
html[data-theme="dark"] .custom-editor-state{background:var(--surface-soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .custom-editor-state span{color:var(--muted)}
html[data-theme="dark"] .custom-editor-state.dirty{background:#33280f;border-color:#8d6d25}html[data-theme="dark"] .custom-editor-state.dirty span{color:#f0cf7a}

/* FIX168 Form Generation Center: read-only FormDataset workflow. */
.form-center-tabs{display:flex;gap:6px;margin:0 0 12px;border-bottom:1px solid var(--line);padding:0 4px}.form-center-tabs button{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:10px 14px;cursor:pointer}.form-center-tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.form-generation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.form-dataset-summary code{overflow-wrap:anywhere;word-break:break-all}.form-dataset-table td{vertical-align:top}.form-dataset-table td:nth-child(2){max-width:330px;overflow-wrap:anywhere}.form-field-state{display:inline-block;font-weight:700}.form-needs-data,.state-needs-data{color:var(--danger)}.state-derived{font-style:italic}.form-output-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}.form-output-row:last-child{border-bottom:0}.form-output-row>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}.form-output-row small{color:var(--muted);overflow-wrap:anywhere}.form-history-files{display:flex;flex-direction:column}.form-history-files+.button{margin-top:8px}
@media(max-width:760px){.form-center-tabs{overflow-x:auto}.form-output-row{align-items:flex-start;flex-direction:column}.form-output-row .row-actions{width:100%}.form-dataset-table{min-width:850px}}
.vendor-view-tabs{display:flex;gap:0;width:100%;max-width:100%;margin:0 0 10px;border-bottom:1px solid var(--line);background:transparent;overflow-x:auto}
.vendor-view-tab{min-width:128px;min-height:42px;padding:9px 20px;border:1px solid var(--line);border-bottom:0;background:var(--surface-soft);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.vendor-view-tab+ .vendor-view-tab{border-left:0}.vendor-view-tab:hover{background:var(--surface)}
.vendor-view-tab.active{color:#fff;background:#2f73c9;border-color:#73a9e8;box-shadow:none}
.vendor-analytics-page .page-heading{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,560px) auto;align-items:start;gap:16px;margin-bottom:12px}.vendor-analytics-page .page-heading h1{margin-bottom:3px}.vendor-analytics-heading-copy{min-width:0}
.vendor-workspace-note{display:flex;align-items:center;gap:10px;max-width:560px;margin:0;padding:10px 14px;border:1px solid #159aa4;border-radius:var(--r-surface);background:rgba(8,107,116,.22);color:var(--ink)}
.vendor-workspace-note>span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#24d4c6;color:#08242b;font-weight:900}.vendor-workspace-note p{margin:0;font-size:var(--fs-small);line-height:var(--lh-small)}
.vendor-analytics-heading-meta{display:flex;align-items:center;gap:0;min-width:340px;border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden;background:var(--surface)}
.vendor-analytics-heading-meta select{min-width:150px;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface);font-weight:700}.vendor-analytics-heading-meta strong{padding:10px 14px;font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.vendor-analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.vendor-kpi-card{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;min-height:105px;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.vendor-kpi-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-surface);background:#087f55;color:#fff;font-size:var(--fs-display);font-weight:900;box-shadow:var(--shadow-raised)}
.vendor-kpi-card:nth-child(2) .vendor-kpi-icon{background:#1479d2}.vendor-kpi-card:nth-child(3) .vendor-kpi-icon{background:#6e37c7}.vendor-kpi-card:nth-child(4) .vendor-kpi-icon{background:#9c5b14}
.vendor-kpi-card>div{display:grid;gap:3px}.vendor-kpi-card>div>span{font-size:var(--fs-small);color:var(--muted);font-weight:700}.vendor-kpi-card strong{font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--ink)}.vendor-kpi-card small{color:var(--muted);font-size:var(--fs-small)}
.vendor-analytics-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}.vendor-analytics-main{display:grid;gap:12px;min-width:0}.vendor-analytics-sidebar{position:sticky;top:18px;min-width:0;padding:14px}.vendor-analytics-sidebar .panel-heading{margin-bottom:12px}.vendor-analytics-sidebar .panel-heading h2{font-size:var(--fs-lead)}.vendor-analytics-sidebar .panel-heading>.link-btn{border:0;background:transparent;color:var(--accent);padding:2px;font-weight:800}
.vendor-analytics-filter-form{display:grid;gap:11px}.vendor-analytics-filter-form label{display:grid;gap:5px}.vendor-analytics-filter-form label>span{font-size:var(--fs-small);font-weight:800;color:var(--ink)}.vendor-analytics-filter-form input,.vendor-analytics-filter-form select{width:100%;min-height:38px}.vendor-analytics-filter-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vendor-analytics-filter-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vendor-analytics-filter-dates.is-hidden{display:none}.vendor-date-display{min-height:38px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);color:var(--ink);font-size:var(--fs-small);font-weight:700}.vendor-filter-search-field{position:relative}.vendor-filter-search-field>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:var(--fs-h3)}.vendor-filter-search-field input{padding-left:32px}.vendor-analytics-filter-actions{display:grid;gap:10px;margin-top:2px;padding-top:4px}.vendor-analytics-filter-actions .button{width:100%;min-height:40px}
.vendor-analytics-chart-grid{display:grid;grid-template-columns:1.06fr 1fr 1fr;gap:12px}.vendor-analytics-card{min-width:0;padding:14px}.vendor-analytics-card .panel-heading{margin-bottom:10px}.vendor-analytics-card .panel-heading h2{font-size:var(--fs-lead)}.vendor-analytics-card .panel-heading>.link-btn{border:0;background:transparent;color:var(--accent);padding:3px 0;font-weight:800;box-shadow:none}.vendor-chart-metric{width:auto;min-width:92px;height:34px;padding:4px 8px}
.vendor-chart{display:flex}.vendor-chart-vertical{align-items:flex-end;gap:6px;height:190px;padding:8px 4px 0;overflow-x:hidden}.vendor-chart-column{display:grid;grid-template-rows:145px auto;gap:6px;justify-items:center;min-width:0;flex:1 1 0}.vendor-chart-column strong{font-size:11px;color:var(--muted);font-weight:700}.vendor-chart-bar{display:flex;align-items:flex-end;width:100%;max-width:32px;height:145px;border-bottom:1px solid var(--line)}.vendor-chart-bar span{display:block;width:100%;border-radius:var(--r-control) var(--r-control) 0 0;background:linear-gradient(180deg,#2991ff,#146ac3)}
.vendor-donut-layout{display:grid;grid-template-columns:145px minmax(0,1fr);gap:10px;align-items:center;min-height:190px}.vendor-donut{display:grid;place-items:center;width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--vendor-donut,#2c88e5 0 100%));position:relative}.vendor-donut:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:var(--surface)}.vendor-donut>div{position:relative;z-index:1;display:grid;text-align:center}.vendor-donut strong{font-size:var(--fs-h3)}.vendor-donut span{font-size:10px;color:var(--muted)}.vendor-donut-legend{display:grid;gap:6px}.vendor-donut-legend>div{display:grid;grid-template-columns:9px minmax(0,1fr);column-gap:4px;row-gap:0;align-items:center;font-size:11px}.vendor-donut-legend>div>strong{grid-column:2}.vendor-donut-legend i{display:block;width:8px;height:8px;border-radius:50%}/* Category names are readable, not "Purc…": the legend column is ~90px in a four-card row at 1440px, and the name shared it with the percentage, leaving ~37px (measured by tools/dev/walk). The percentage now sits under the name and the name may wrap. */.vendor-donut-legend span{min-width:0;overflow-wrap:break-word;hyphens:auto;line-height:var(--lh-micro)}.vendor-donut-legend strong{font-size:11px}
.vendor-meter-list{display:grid;gap:10px;min-height:190px;align-content:center}.vendor-meter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,1.1fr) auto;gap:8px;align-items:center}.vendor-meter-label{min-width:0}.vendor-meter-label strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ink)}.vendor-meter-track{height:9px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-soft);overflow:hidden}.vendor-meter-track span{display:block;height:100%;background:#2c88e5}.vendor-meter-value{font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap}
.vendor-analytics-detail-panel{min-width:0;margin-top:0}.vendor-detail-tabs{display:flex;gap:0;margin:0;border-bottom:1px solid var(--line)}.vendor-detail-tab{min-width:145px;min-height:38px;padding:8px 14px;border:0;border-radius:0;background:var(--surface-soft);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.vendor-detail-tab.active{background:#1476d4;color:#fff}.vendor-table-filterbar{display:grid;grid-template-columns:minmax(220px,1.6fr) 150px 150px 150px;gap:8px;padding:10px 0}.vendor-table-filterbar input,.vendor-table-filterbar select{width:100%;min-height:36px}.vendor-table-search{display:block}
.vendor-overview-table-wrap{border-top:1px solid var(--line)}.vendor-analytics-table{width:100%;min-width:820px}.vendor-analytics-table th,.vendor-analytics-table td{padding:8px 9px;vertical-align:middle}.vendor-analytics-table th{font-size:11px}.vendor-analytics-table td{font-size:12px}.vendor-analytics-table td:nth-child(1),.vendor-analytics-table th:nth-child(1){width:42px}.vendor-analytics-table .recon-history-note{display:inline-block;margin-left:7px;padding:1px 6px;border:1px solid var(--line);border-radius:var(--r-stadium);color:var(--muted);font-size:10px;font-weight:700}.vendor-table-pagination{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px 0;color:var(--muted);font-size:11px}.vendor-pagination-buttons{display:flex;gap:4px}.vendor-pagination-buttons .button{min-width:30px;padding:4px 8px}.vendor-table-pagination label{display:flex;align-items:center;gap:6px}.vendor-table-pagination select{width:58px;height:30px;padding:2px 5px}
.vendor-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding-top:12px}.vendor-category-card{padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}.vendor-category-head{display:flex;justify-content:space-between;gap:10px}.vendor-category-head h3{margin:0}.vendor-category-card dl{display:grid;gap:7px}.vendor-category-card dl div{display:flex;justify-content:space-between;gap:12px;padding-top:7px;border-top:1px solid var(--line)}.vendor-category-card dd{margin:0}.recon-history-note{vertical-align:middle}
@media(max-width:1180px){.vendor-analytics-page .page-heading{grid-template-columns:1fr auto}.vendor-workspace-note{grid-column:1/-1;grid-row:2;max-width:none}.vendor-analytics-heading-meta{grid-column:2;grid-row:1}.vendor-analytics-dashboard{grid-template-columns:1fr}.vendor-analytics-sidebar{position:static;grid-row:1}.vendor-analytics-main{grid-row:2}.vendor-analytics-chart-grid{grid-template-columns:1fr 1fr}.vendor-analytics-chart-grid .vendor-analytics-card:first-child{grid-column:1/-1}.vendor-analytics-heading-meta{min-width:0}.vendor-analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.vendor-analytics-page .page-heading{grid-template-columns:1fr}.vendor-analytics-heading-meta{grid-column:1;grid-row:auto}.vendor-workspace-note{grid-column:1;grid-row:auto}.vendor-analytics-chart-grid{grid-template-columns:1fr}.vendor-analytics-chart-grid .vendor-analytics-card:first-child{grid-column:auto}.vendor-donut-layout{grid-template-columns:130px minmax(0,1fr)}.vendor-donut{width:125px;height:125px}.vendor-table-filterbar{grid-template-columns:1fr 1fr}.vendor-detail-tabs{overflow-x:auto}.vendor-detail-tab{flex:0 0 auto}.vendor-analytics-table{min-width:760px}.vendor-table-pagination{grid-template-columns:1fr}.vendor-pagination-buttons{justify-content:flex-start}.vendor-analytics-heading-meta{width:100%;display:grid;grid-template-columns:1fr}.vendor-analytics-heading-meta select{border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:520px){.vendor-analytics-kpis{grid-template-columns:1fr}.vendor-table-filterbar{grid-template-columns:1fr}.vendor-analytics-filter-pair,.vendor-analytics-filter-dates{grid-template-columns:1fr}.vendor-kpi-card{min-height:88px}.vendor-view-tab{min-width:120px}.vendor-chart-vertical{overflow-x:auto}.vendor-chart-column{min-width:42px}.vendor-donut-layout{grid-template-columns:1fr;justify-items:center}.vendor-donut-legend{width:100%}}
html[data-theme="dark"] .vendor-date-display,html[data-theme="dark"] .vendor-meter-track{background:rgba(255,255,255,.04)}
/* FIX173 R1 — scalable System Tools workspaces. The tab visuals intentionally come from the
 * existing Sales / Deals component above; these rules only add bounded layout behavior. */
.system-subtabs{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.system-subtabs .sales-view-tab{flex:0 0 auto;white-space:nowrap}
.system-pagination,.system-pagination-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted);font-weight:650}
.system-pagination .button-row{align-items:center;margin:0}
.system-history-toolbar,.vehicle-audit-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}
.system-filter-segments{flex-wrap:wrap}
.system-search-field{flex:1 1 320px;min-width:min(100%,280px)}
.system-search-field input{width:100%}
.maintenance-audit-heading{display:flex;align-items:center;margin:0 0 14px}
.system-primary-panel{min-width:0}
.maintenance-only-grid{align-items:stretch}
@media(max-width:760px){
  .system-pagination{align-items:flex-start;flex-direction:column}
  .system-history-toolbar,.vehicle-audit-toolbar{align-items:stretch;flex-direction:column}
  .system-search-field{flex-basis:auto;min-width:0;width:100%}
}
/* FIX173 System Tools workspace cards: explicit hooks keep new layouts intentional instead of
 * relying on anonymous browser defaults. */
.personal-ai-card{min-width:0}
.security-add-user-card{max-width:920px}
.backup-history-card{min-width:0}
.vehicle-audit-launch-card{display:flex;flex-direction:column;gap:12px}
.vehicle-audit-launch-card .button{align-self:flex-start}
/* FIX177: the shared authenticator prompt label must remain visually distinct from its code input. */
.steward-dialog-input-label{display:block;color:#17304f;font-size:var(--fs-small);font-weight:700}

.sign-certificate{margin:10px 0;padding:14px;overflow-x:auto;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-surface);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);line-height:var(--lh-small);white-space:pre-wrap}
.sign-history code{font-size:var(--fs-micro);line-height:var(--lh-micro)}

/* THE GOVERNMENT WATCH LIST, ON THE SALE.
 *
 * Screening for sanctions used to live only on its own screen, which meant it happened when
 * somebody remembered. It now sits on the review step, where the buyer's name is known and the car
 * has not been handed over yet.
 *
 * Three states, three colours, and the colours carry the meaning: neutral before it has been run,
 * green for no match, amber for a possible one. Amber and not red on purpose — a name collision is
 * the ordinary case and usually resolves in ten seconds, so this is "look at this", not "you have
 * done something wrong". Structure only; every value is an existing token, so all ten designs and
 * both appearances follow. */
.sw-watch{display:grid;gap:10px;margin:0 0 16px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sw-watch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sw-watch-head strong{color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.sw-watch-state{padding:3px 12px;border-radius:var(--r-stadium);background:var(--line);color:var(--ink);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.sw-watch p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-watch>button{justify-self:start}
.sw-watch-idle{opacity:.8}
.sw-watch-clear{border-color:var(--green)}
.sw-watch-clear .sw-watch-state{background:var(--greensoft);color:var(--green)}
.sw-watch-warn{border-color:var(--amber);background:var(--ambersoft)}
/* A possible match holds the paperwork, so it is the loudest thing on the page — a left rule as
   well as a border, because a dealer scrolling a long review must not be able to slide past it. */
.sw-watch-hit{border-color:var(--amber);border-left-width:4px;background:var(--ambersoft)}
.sw-watch-hit .sw-watch-state{background:var(--amber);color:var(--accent-ink)}
.sw-watch-note{display:grid;gap:4px}
.sw-watch-note>span{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.sw-watch-note textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.sw-watch-actions{display:flex;gap:10px;flex-wrap:wrap}
/* The partner-backed watch-list box (web/ofac-sale-status.js). Its actions — "Open Compliance
   Review" and "Check again" — sit side by side under the text instead of stacking one per row;
   everything else still spans the box. */
.sw-ofac{grid-template-columns:max-content max-content minmax(0,1fr)}
.sw-ofac>:not(button){grid-column:1/-1}
/* The business-owner form (web/ownership-form.js): one row per owner — name, share, "is a company",
   the 50%-or-more mark and Remove — then "Add another owner" and the running total. Tokens only, so
   every design and both appearances follow, and the type stays on the whole-pixel scale. */
.sw-owners{display:grid;gap:10px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);min-width:0}
.sw-owners>legend{padding:0 6px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.sw-owners-help,.sw-owners-note{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-owners-note{color:var(--ink)}
.sw-owner-row{display:grid;grid-template-columns:minmax(0,1fr) 120px max-content max-content;align-items:end;gap:10px}
.sw-owner-share input{width:100%}
.sw-owner-company{margin-top:0;align-self:center}
.sw-owner-flag{grid-column:1/-1;justify-self:start;padding:2px 10px;border-radius:var(--r-stadium);background:var(--ambersoft);color:var(--ink);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.sw-owner-flag[hidden]{display:none}
/* Remove stays on the owner's own line; the 50% flag takes the line under it (it spans the row, so
   auto-placement would otherwise push Remove below the flag and stretch it across the name column). */
.sw-owner-row>[data-owner-remove]{grid-column:4;grid-row:1}
.sw-owners-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sw-owners-total{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
@media(max-width:640px){.sw-owner-row{grid-template-columns:1fr}.sw-owner-row>[data-owner-remove]{grid-column:auto;grid-row:auto}}

/* HOUSEKEEPING — the software's own state, demoted.
 *
 * These four tiles used to BE the dashboard's headline row: Data Check, Missing PDFs, Backup age,
 * record count. Three of the four are about the program rather than the dealership, and putting
 * them first meant an owner opened their business to a list of chores in a computer. The owner
 * called the result confusing and was right.
 *
 * They are still here, still one click away, and a tile with real work behind it still says so —
 * they are simply quieter and lower than the figures about cars and money. Smaller, borderless,
 * on a single line, with `has-work` the only thing that raises its voice. */
/* HOUSEKEEPING, sitting under the headline tiles.
 *
 * It reads as a QUIETER BAND, not a second row of KPI cards. That distinction is the whole design:
 * these four tiles began life at the top of the dashboard looking exactly like the figures about
 * the dealership, which is what made an owner open their business to a list of chores. Same width,
 * same alignment, deliberately less weight — a recessed strip with one hairline above it, small
 * caps for the label, and numbers a step down from the tiles above.
 *
 * Amber, never red, when something is overdue. Housekeeping that needs doing is not an emergency,
 * and a red row every single day teaches people to ignore red. */
.dash-system{margin:14px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:color-mix(in srgb,var(--surface) 55%,transparent)}
.dash-system-head{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
/* The promise, in the heading. The row's tiles clear themselves as the work behind them is done,
   and saying so is what stops a dealer reading it as a list that only ever grows. Not uppercase and
   not letter-spaced — it is a sentence, and the heading's own treatment would make it shout. */
.dash-system-head small{font-weight:400;letter-spacing:0;text-transform:none;
  font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--muted)}
/* A hairline that runs to the end of the row, so the label reads as a section marker rather than
   a floating word. */
.dash-system-head::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
/* A COUNT, NOT A CHORE. "12 on the lot" has no finished state, and unmarked among tiles that do
   have one it made the whole row look like it never empties. Quieter, and no work accent. */
.dash-sys-fact{background:var(--surface-soft,var(--soft));color:var(--muted)}
.dash-sys-fact strong{color:var(--ink)}
.dash-sys-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* WRAPS rather than truncates. The backup tile carries an action button beside its text, which
   squeezed "Not created" down to "Not cr…" — a status nobody can read is not a status. Letting the
   row wrap costs a few pixels of height on one tile and keeps every word. */
.dash-sys-tile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
  padding:10px 14px;border:1px solid transparent;border-radius:var(--r-surface);
  background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .12s ease,transform .12s ease}
.dash-sys-tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.dash-sys-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dash-sys-tile>span{display:grid;gap:1px;min-width:0;flex:1 1 90px}
/* A step DOWN from .dash-tile-value on purpose — these are not the numbers of the day. */
.dash-sys-tile strong{color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-sys-tile small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Bigger — owner-directed. At 20px these read as decoration beside a two-digit number; at 26px
   they carry the row and you can tell a warning triangle from a disc at a glance. Opacity lifted
   with them, because a larger mark at .75 looked washed rather than quiet. */
.dash-sys-icon{flex:0 0 auto;width:26px;height:26px;opacity:.85}
.dash-sys-tile:hover .dash-sys-icon{opacity:1}
/* The count is what the eye should land on first, so it outranks the icon it sits beside. */
.dash-sys-tile strong{letter-spacing:-.01em}
/* Overdue work earns a left rule rather than a filled box: legible at a glance, and it does not
   turn a quarter of the strip into a block of colour. */
.dash-sys-tile.has-work{border-color:var(--line);border-left:3px solid var(--amber);
  background:color-mix(in srgb,var(--ambersoft) 55%,var(--surface))}
.dash-sys-tile.has-work .dash-sys-icon{opacity:1}
.dash-sys-do{flex:0 0 auto;margin-left:auto;cursor:pointer}

/* THE PAPERWORK PACK — the last screen of a sale, and the one a dealer shows the customer.
 *
 * The markup shipped with NO rules behind it at all: ten classes rendering as browser defaults, so
 * the bullet list of contracts appeared as literal bullets, the tick column had no column, and the
 * "not certified" warning read as ordinary paragraph text. Caught by test_markup_has_styles, which
 * exists because exactly this happened to the dealer-finance window's thirty-three classes.
 *
 * Structure only. Every value is an existing token, so all ten designs and both appearances follow
 * without a second pass. */
.sw-pack{display:grid;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface)}
.sw-pack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sw-pack-head h3{margin:0;color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.sw-pack-head p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-doc-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
/* A three-part row: the tick, the name, the thing you do about it. The tick column is a fixed
   width so the names line up whether or not a document exists — a ragged left edge down a list of
   contracts reads as disorder on the one screen that must not. */
.sw-doc{display:flex;align-items:center;gap:12px;min-width:0;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas)}
.sw-doc.is-ready{border-color:var(--green)}
.sw-doc-mark{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-stadium);
  border:1px solid var(--line);background:var(--surface);color:var(--green);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700}
.sw-doc.is-ready .sw-doc-mark{border-color:var(--green);background:var(--greensoft)}
.sw-doc-name{flex:1 1 auto;min-width:0;display:grid;gap:1px}
.sw-doc-name>small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.sw-doc-pending{flex:0 0 auto;padding:3px 10px;border-radius:var(--r-stadium);background:var(--line);color:var(--muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.sw-pack-extra{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--canvas)}
.sw-pack-extra>strong{display:block;margin:0 0 6px;color:var(--ink);
  font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.sw-pack-extra ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
/* The warning is the last thing between a bundled template and a signature, so it is bordered and
   amber rather than a paragraph somebody's eye slides over. */
.sw-pack-warn{margin:0;padding:12px 14px;border:1px solid var(--amber);border-radius:var(--r-surface);
  background:var(--ambersoft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
/* The unlinked state of a connect row's status pill. `.is-on` had a rule and this did not, which is
   how "Not available yet" rendered as an unstyled span in the middle of a styled row. */
.pay-state.is-off{background:var(--line);color:var(--muted)}

/* ============================================================================
   THE LANDING SCREEN (web/dashboard.js)
 
   Rejected three times before this. "So confusing" was priority — housekeeping
   tiles on top. "Still sucks" was SHAPE — seven identical text rows where a
   problem and a fact looked the same, on a car dealership dashboard with no
   cars. "Not graphical enough, needs to be an actual dashboard" was the useful
   one: numbers were printed, never drawn.
 
   So the rules here are visual weight and real pictures. A figure gets a chart
   that gives it context. A car gets a photograph and an age bar whose length
   IS the age. Nothing in this block is a row of text pretending to be data.
 
   Every colour is an existing token, so all ten designs and both appearances
   follow with no second pass.
   ============================================================================ */

.dash-tiles{display:grid;gap:12px;margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.dash-tile{display:grid;gap:2px;align-content:start;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);cursor:pointer}
.dash-tile:hover{border-color:var(--accent)}
.dash-tile-label{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* The figure carries real weight. The previous build set every number at body size, so "2" and
   "$4,540" had the same presence as the sentence under them and nothing led the eye. */
.dash-tile-value{color:var(--ink);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;
  font-variant-numeric:tabular-nums}
.dash-tile-sub{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dash-tile-sub.is-up{color:var(--green);font-weight:600}
.dash-tile-sub.is-down{color:var(--amber);font-weight:600}
/* The bars stretch to the tile; the month names do NOT. They are real text under the plot rather
   than <text> inside a preserveAspectRatio="none" viewBox, which stretched every glyph by whatever
   ratio the tile happened to be — the "messed up" look. One column per bar, so they still line up. */
.dash-spark-wrap{display:block;margin:10px 0 0}
.dash-spark{display:block;width:100%;height:44px}
/* auto-columns, not repeat(6,…): the series is six months today and a hardcoded six would silently
   mis-align every label the day anything asks for a different span. */
.dash-spark-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:4px 0 0}
.dash-spark-labels span{text-align:center;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.dash-spark-labels span.is-now{color:var(--ink);font-weight:600}
.dash-mix{display:block;width:100%;height:12px;margin:10px 0 0;border-radius:var(--r-stadium);overflow:hidden}

/* THE ONE SENTENCE WORTH SAYING. Deliberately a different shape from everything around it — it is
   the only prose on the screen, so it must not look like a row in a list, which is what the last
   version turned every insight into. */
.dash-insight{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 16px;padding:14px 18px;border:1px solid var(--line);border-left-width:4px;
  border-radius:var(--r-surface);background:var(--surface)}
.dash-insight p{margin:0;color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.dash-insight-warn{border-left-color:var(--amber);background:var(--ambersoft)}
.dash-insight-info{border-left-color:var(--accent)}
.dash-insight-good{border-left-color:var(--green);background:var(--greensoft)}

/* THE LOT. The thing that was missing entirely. */
.dash-lot{margin:0 0 16px}
.dash-lot-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.dash-lot-head h2{margin:0;color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600}
.dash-lot-note{flex:1 1 auto;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dash-lot-more{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dash-car-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.dash-car{display:grid;gap:0;align-content:start;border:1px solid var(--line);border-radius:var(--r-surface);
  background:var(--surface);overflow:hidden}
.dash-car:hover{border-color:var(--accent)}
/* A FIXED 16:10 WINDOW, and object-fit:cover inside it. Dealer photos arrive at every aspect ratio
   an auction app can produce; without this the grid rows jump to the tallest picture and the whole
   lot reads as broken. */
.dash-car-photo{display:block;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--canvas)}
.dash-car-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dash-car-body{display:grid;gap:4px;padding:12px 14px}
/* A <button>, so a keyboard can reach the car the card opens. It has to keep looking exactly like
   the heading it replaced — a button's own border, background, padding and centred text would turn
   every card title into a control, which is the opposite of the quiet grid this is. */
.dash-car-name{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.dash-car-name:hover{color:var(--accent)}
.dash-car-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-control)}
/* The whole card is clickable, and it says so on hover rather than only under the title. */
.dash-car[data-dash-open]{cursor:pointer}
.dash-car[data-dash-open]:hover{border-color:var(--accent)}
/* …except over the controls, where the pointer must go back to meaning what it normally means. */
.dash-car[data-dash-open] :is(input,select,button,form){cursor:auto}
.dash-car[data-dash-open] :is(button,.button){cursor:pointer}
.dash-car-sub{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.dash-car-sub em{font-style:normal;color:var(--amber);font-weight:600}
/* The age bar. Scaled against a fixed 120 days in the module, never against the oldest car — a
   relative scale would make the worst car look identical on a healthy lot and a terrible one. */
.dash-car-age{display:block;height:6px;margin:6px 0 2px;border-radius:var(--r-stadium);background:var(--line);
  overflow:hidden}
.dash-car-agebar{display:block;height:100%;border-radius:var(--r-stadium)}
.dash-car-days{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.dash-car .button{margin:8px 0 0;justify-self:start}
/* The oldest cars earn a coloured edge, so a lot in trouble is visible before anything is read. */
.dash-car.dash-age-slow{border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.dash-car.dash-age-stale{border-color:var(--red)}

.dash-empty{display:grid;gap:10px;justify-items:start;padding:28px 24px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.dash-empty h2{margin:0;color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600}
.dash-empty p{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
/* The fix, done ON the card. Owner-directed: the landing screen must let you complete the action
   from there rather than forward you to another screen to do it. */
.dash-car-fix{display:grid;gap:4px;margin:8px 0 0}
.dash-car-fixlabel{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.dash-car-fixrow{display:flex;gap:6px;min-width:0}
.dash-car-fixrow input{flex:1 1 auto;min-width:0;width:100%;box-sizing:border-box}
.dash-car-fixrow .button{flex:0 0 auto}
/* An action INSIDE a housekeeping tile. A span rather than a nested <button>, because a button
   inside a button is invalid HTML and browsers resolve it by dropping one of them. */
.dash-sys-do{flex:0 0 auto;margin-left:auto;cursor:pointer}
/* The smog fix is a dropdown, not a box: the vocabulary is fixed and a free-text smog status on a
   car about to be delivered in California is a way to get it wrong. */
.dash-car-fixrow select{flex:1 1 auto;min-width:0;width:100%;box-sizing:border-box}
/* The contracts pack — one click to tick the set this lot signs on every deal. */
.form-pack{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:0 0 12px;
  border-bottom:1px solid var(--line)}
.form-pack small{flex:1 1 160px;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
/* A fix attached to the failure that caused it — the Connect button inside a chat message when
   the AI is not connected. Owner-directed: prompt from the chat itself, not only from the panel's
   opening state, because the dealer who needs it is the one who just typed a question. */
.sai-msg-fix{margin:8px 0 0}
/* Signing reached from the paperwork step: name the file and give a way back to the deal. */
.sign-from-sale{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.sign-from-sale span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);
  overflow:hidden;text-overflow:ellipsis}
.sign-from-sale strong{color:var(--ink);font-weight:600}

/* Cost to own — computed here, so it is styled like everything else rather than framed. */
.ownership-cost-panel .oc-headline{display:flex;align-items:baseline;gap:8px;margin:12px 0 2px}
.ownership-cost-panel .oc-headline strong{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:600;color:var(--navy)}
.ownership-cost-panel .oc-headline span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ownership-cost-panel .oc-total{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);margin:0 0 14px}
.ownership-cost-panel .oc-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.ownership-cost-panel .oc-row{border:1px solid var(--line);border-radius:var(--r-surface);padding:10px 12px}
.ownership-cost-panel .oc-row span{display:block;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.ownership-cost-panel .oc-row strong{display:block;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.ownership-cost-panel .oc-row small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.ownership-cost-panel .oc-missing{margin-top:12px}
.ownership-cost-panel .oc-basis{margin-top:12px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ownership-cost-panel h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.ownership-cost-panel .oc-second-opinion{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* Market Intelligence landing — the front door when no car has been named. */
.mi-lookup-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mi-lookup-form input{flex:1 1 200px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:inherit;font-size:var(--fs-body);line-height:var(--lh-body)}
.mi-lookup-form input:last-of-type{flex:0 1 170px}
.mi-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:12px}
.mi-pick{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:inherit;cursor:pointer}
.mi-pick:hover{border-color:var(--accent)}
.mi-pick-title{display:block;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.mi-pick-sub{display:block;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);margin-top:2px}
.mi-pick-ask{display:block;font-size:var(--fs-small);line-height:var(--lh-small);margin-top:6px}
.mi-lookup-result h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.ownership-cost-panel .oc-second-opinion h3{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;margin:0 0 4px}
.ownership-cost-panel .oc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mi-pick{padding:0;overflow:hidden}
.mi-pick-shot{position:relative;display:block;width:100%;height:130px;background:var(--surface-2,var(--surface));overflow:hidden}
.mi-pick-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The stand-in marker. Same wording and same corner as the vehicle hero's tag, because the same
   picture appearing labelled on one screen and bare on another is how a dealer comes to believe
   an example photo is a photograph of their own car. */
.mi-pick-tag{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:var(--r-stadium);
  background:rgba(10,20,32,.78);color:#fff;font-size:var(--fs-micro);line-height:var(--lh-micro);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.mi-pick-body{display:block;padding:12px 14px}
.ownership-cost-panel .vinaudit-frame{border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden;background:var(--surface);margin-top:10px}
.ownership-cost-panel .vinaudit-frame iframe{display:block;width:100%;height:560px;border:0}

/* NHTSA safety panel (web/nhtsa-safety.js) on the market screen. Built in the market view's own
   vocabulary — mi-card headers, a tile summary row — so it reads as one page with the figures above
   it. Render rules hold: --fs-* scale with paired --lh-*, weights 400/600, even-px spacing. */
/* The transient mount app.js renders before hydration replaces it with the panel. */
.nhtsa-mount{display:block}
.nhtsa-panel{padding:20px 22px 8px}
.nhtsa-panel .nh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.nhtsa-panel .nh-head-copy .eyebrow{margin:0 0 2px!important}
.nhtsa-panel .nh-head h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;margin:0;color:var(--navy);letter-spacing:-.02em}
.nhtsa-panel .nh-source-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-stadium);background:var(--greensoft);color:var(--green);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.nhtsa-panel .nh-lead{margin:8px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);max-width:72ch}
/* Summary tiles — the mirror of the market screen's "Evidence behind this" row. */
.nhtsa-panel .nh-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 4px}
.nhtsa-panel .nh-sum{display:grid;gap:2px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.nhtsa-panel .nh-sum>span{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.nhtsa-panel .nh-sum strong{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.nhtsa-panel .nh-sum small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.nhtsa-panel .nh-sum-stars{margin:2px 0 1px}
.nhtsa-panel .nh-sum-alarm{border-color:rgba(201,54,62,.42);background:var(--redsoft)}
.nhtsa-panel .nh-sum-alarm strong{color:var(--red)}
/* Cards reuse .mi-card; nh-card just spaces them. */
.nhtsa-panel .nh-card{margin-top:14px}
.nhtsa-panel .nh-card-sub{margin:0 0 10px}
.nhtsa-panel .nh-muted{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);margin:0}
.nhtsa-panel .nh-ok{color:var(--green);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;margin:0}
.nhtsa-panel .nh-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;margin-left:2px;padding:0 8px;border-radius:var(--r-stadium);background:var(--surface-soft,var(--canvas));border:1px solid var(--line);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;color:var(--muted);vertical-align:middle}
.nhtsa-panel .nh-count-alarm{background:var(--redsoft);border-color:rgba(201,54,62,.4);color:var(--red)}
.nhtsa-panel .nh-alarm{color:var(--red);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;margin:0 0 8px}
/* Star ratings — amber is the conventional, universally-read rating mark, not a design theme. */
.nhtsa-panel .nh-rate{display:grid;gap:8px;margin:2px 0}
.nhtsa-panel .nh-rate-overall{display:flex;align-items:center;gap:10px;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.nhtsa-panel .nh-rate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-small);line-height:var(--lh-small);max-width:340px;color:var(--muted)}
.nhtsa-panel .nh-stars{display:inline-flex;gap:2px;font-size:var(--fs-lead);line-height:var(--lh-lead)}
.nhtsa-panel .nh-sum-stars .nh-stars{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.nhtsa-panel .nh-star{color:var(--line)}
.nhtsa-panel .nh-star.on{color:#e8a33d}
.nhtsa-panel .nh-stars-none{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.nhtsa-panel .nh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.nhtsa-panel .nh-chip{display:inline-block;padding:4px 10px;border-radius:var(--r-stadium);font-size:var(--fs-micro);line-height:var(--lh-micro);border:1px solid var(--line)}
.nhtsa-panel .nh-chip-std{background:var(--greensoft);border-color:rgba(29,116,72,.32);color:#15603a}
.nhtsa-panel .nh-chip-opt{background:var(--surface-soft,var(--canvas));color:var(--muted)}
/* Recalls: a two-column grid of compact cards, capped, rest behind one expander. */
.nhtsa-panel .nh-recall-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.nhtsa-panel .nh-recall{display:grid;gap:5px;align-content:start;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.nhtsa-panel .nh-recall-severe{border-color:rgba(201,54,62,.38);background:var(--redsoft)}
.nhtsa-panel .nh-recall-top{display:flex;align-items:center;gap:8px}
.nhtsa-panel .nh-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.nhtsa-panel .nh-dot-alarm{background:var(--red);box-shadow:0 0 0 3px rgba(201,54,62,.16)}
.nhtsa-panel .nh-recall-comp{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nhtsa-panel .nh-recall-id{margin-left:auto;flex:0 0 auto;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-variant-numeric:tabular-nums}
.nhtsa-panel .nh-recall-sum{margin:0;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nhtsa-panel .nh-recall-flags{display:flex;gap:6px;flex-wrap:wrap}
.nhtsa-panel .nh-flag{display:inline-block;padding:2px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.nhtsa-panel .nh-flag-parkit{background:var(--red);color:#fff}
.nhtsa-panel .nh-flag-park{background:#fff;color:var(--red);border:1px solid rgba(201,54,62,.4)}
.nhtsa-panel .nh-more{margin-top:10px}
.nhtsa-panel .nh-more>summary{cursor:pointer;color:var(--blue);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;list-style:none}
.nhtsa-panel .nh-more>summary::-webkit-details-marker{display:none}
.nhtsa-panel .nh-more[open]>summary{margin-bottom:10px}
.nhtsa-panel .nh-loading{padding:8px 0 4px}
.nhtsa-panel .panel-footnote{margin:16px -22px 0}
@media (max-width:760px){
  .nhtsa-panel .nh-summary{grid-template-columns:1fr}
  .nhtsa-panel .nh-recall-grid{grid-template-columns:1fr}
}

/* Market pulse (web/market-pulse.js) — free trend figures + free per-VIN check links on the
   market screen. Same vocabulary as the NHTSA panel: eyebrow head, tile row, mi tokens. */
.market-pulse-mount{display:block}
.market-pulse-panel{padding:20px 22px 8px}
.market-pulse-panel .mp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.market-pulse-panel .mp-head .eyebrow{margin:0 0 2px!important}
.market-pulse-panel .mp-head h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;margin:0;color:var(--navy);letter-spacing:-.02em}
.market-pulse-panel .mp-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-stadium);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.market-pulse-panel .mp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 4px}
.market-pulse-panel .mp-tile{display:grid;gap:2px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.market-pulse-panel .mp-tile>span{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.market-pulse-panel .mp-tile strong{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.market-pulse-panel .mp-tile small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.market-pulse-panel .mp-pay{color:var(--ink);font-weight:600}
/* Direction colours read from the DEALER'S seat: they hold inventory, so a rising retail
   trend is good news for the cars on the lot and a falling one is margin risk. */
.market-pulse-panel .mp-up{color:var(--green)}
.market-pulse-panel .mp-down{color:var(--red)}
.market-pulse-panel .mp-flat{color:var(--navy)}
.market-pulse-panel .mp-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.market-pulse-panel .mp-link{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);cursor:pointer}
.market-pulse-panel .mp-link:hover{border-color:#9fb4ca}
.market-pulse-panel .mp-link strong{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;color:var(--blue)}
.market-pulse-panel .mp-link span{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.market-pulse-panel .panel-footnote{margin:16px -22px 0}
@media (max-width:760px){
  .market-pulse-panel .mp-tiles{grid-template-columns:1fr}
  .market-pulse-panel .mp-links{grid-template-columns:1fr}
}

/* Federal title check (web/title-check.js) — NMVTIS record for the exact VIN, on the market
   screen. Same vocabulary as the NHTSA and pulse panels: eyebrow head, badge, summary tiles,
   mi-cards. Alarm state leans on the red tokens because a brand IS the alarm. */
.title-check-mount{display:block}
.title-check-panel{padding:20px 22px 8px}
.title-check-panel .tc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.title-check-panel .tc-head-copy .eyebrow{margin:0 0 2px!important}
.title-check-panel .tc-head h2{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;margin:0;color:var(--navy);letter-spacing:-.02em}
.title-check-panel .tc-source-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-stadium);background:var(--ambersoft);color:var(--amber);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.title-check-panel .tc-lead{margin:8px 0 0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body);max-width:76ch}
.title-check-panel .tc-vin{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink);letter-spacing:.04em}
.title-check-panel .tc-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-small);line-height:var(--lh-small);background:var(--surface-soft,var(--canvas));padding:1px 6px;border-radius:var(--r-control)}
.title-check-panel .tc-muted{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);margin:8px 0 0}
.title-check-panel .tc-alarm{color:var(--red);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600;margin:8px 0 0}
.title-check-panel .tc-loading{padding:8px 0 4px}
.title-check-panel .tc-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 4px}
.title-check-panel .tc-sum{display:grid;gap:2px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface-strong)}
.title-check-panel .tc-sum>span{font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.title-check-panel .tc-sum strong{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.title-check-panel .tc-sum small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.title-check-panel .tc-sum-clean strong{color:var(--green)}
.title-check-panel .tc-sum-alarm{border-color:rgba(201,54,62,.42);background:var(--redsoft)}
.title-check-panel .tc-sum-alarm strong{color:var(--red)}
.title-check-panel .tc-card{margin-top:14px}
.title-check-panel .tc-brand-grid{display:flex;flex-wrap:wrap;gap:8px}
.title-check-panel .tc-brand{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:var(--r-stadium);background:var(--redsoft);border:1px solid rgba(201,54,62,.4)}
.title-check-panel .tc-brand-name{color:var(--red);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.title-check-panel .tc-brand-date{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.title-check-panel .tc-chain{display:grid;gap:0;margin-top:4px}
.title-check-panel .tc-chain-row{display:grid;grid-template-columns:18px 44px 1fr auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.title-check-panel .tc-chain-row:last-child{border-bottom:0}
.title-check-panel .tc-chain-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--bluesoft);justify-self:center}
.title-check-panel .tc-chain-state{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.title-check-panel .tc-chain-date{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.title-check-panel .tc-chain-odo{font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums;color:var(--ink)}
.title-check-panel .tc-chain-back{background:var(--redsoft);border-radius:var(--r-surface);padding-left:4px;padding-right:6px}
.title-check-panel .tc-chain-back .tc-chain-dot{background:var(--red);box-shadow:0 0 0 3px rgba(201,54,62,.18)}
.title-check-panel .tc-chain-back .tc-chain-odo{color:var(--red);font-weight:600}
.title-check-panel .panel-footnote{margin:16px -22px 0}
@media (max-width:760px){
  .title-check-panel .tc-summary{grid-template-columns:1fr}
}

/* THE "HOW DO YOU WANT TO CALL THEM?" LIST.
   A dealership may run on desk phones, mobiles, Teams or a VoIP account, and AutoSteward has no
   business deciding which — so Call and Text ask, once, and remember. Each row is a full-width
   target rather than a radio: this is answered at a desk, often in a hurry, sometimes on a touch
   screen, and a 14px radio dot is the wrong thing to aim at. */
.steward-choices{display:grid;gap:8px;margin:14px 0 4px}
.steward-choice{display:grid;gap:2px;justify-items:start;text-align:left;width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);
  color:var(--ink);cursor:pointer;font-family:inherit;
  transition:border-color .12s ease,transform .12s ease}
.steward-choice:hover{border-color:var(--accent);transform:translateY(-1px)}
.steward-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.steward-choice strong{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.steward-choice small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
/* Setting something up is not the same act as placing the call, so it does not look like one. */
.steward-choice.is-secondary{background:var(--surface-soft,var(--soft));border-style:dashed}

/* MICROSOFT TEAMS, in the call chooser. The dealer downloaded the official 2025 mark; it is square
   (36x38 viewBox) so it is constrained by HEIGHT like PayPal's monogram rather than by width like
   the DocuSign and RingCentral wordmarks above. */
.pay-mark[data-pay-id="teams"]{background-image:url("assets/payment/teams.svg");
  background-size:auto 66%;color:transparent}
/* The chooser rows carry the same marks, at the size a list row can hold. */
.steward-choice{position:relative}
.steward-choice[data-logo]{padding-left:56px}
/* The tile is drawn for EVERY row once any row has artwork, and falls back to the initial rather
   than an empty square — a provider whose logo we do not hold is still recognisable, and the left
   edge of the list stays straight. Same fallback the .pay-mark tiles use. */
.steward-choice[data-logo]::before{content:attr(data-initial);position:absolute;left:12px;top:50%;
  width:32px;height:32px;margin-top:-16px;border-radius:var(--r-surface);background:#fff no-repeat center;
  background-size:auto 64%;box-shadow:0 0 0 1px rgba(0,0,0,.10);
  font-size:var(--fs-small);line-height:32px;text-align:center;font-weight:600;color:#334}
/* Artwork wins: the letter is still in the box for a screen reader to skip, painted out for sight. */
.steward-choice[data-logo="teams"]::before{background-image:url("assets/payment/teams.svg");color:transparent}
.steward-choice[data-logo="ringcentral"]::before{background-image:url("assets/payment/ringcentral.svg");background-size:76% auto;color:transparent}
.steward-choice[data-logo="docusign"]::before{background-image:url("assets/payment/docusign.svg");background-size:76% auto;color:transparent}
/* Both taken from the vendors' own branding pages: dropbox.com/branding, and the Logo.zip on
   signnow.com/brand-guidelines. Adobe and PandaDoc are absent on purpose — Adobe's trademark
   guidelines forbid it without written permission and PandaDoc publishes no brand page, so they
   keep the letter tile rather than borrowing artwork from a logo-scraping site. */
.steward-choice[data-logo="dropbox-sign"]::before{background-image:url("assets/payment/dropbox-sign.svg");background-size:auto 78%;color:transparent}
.steward-choice[data-logo="signnow"]::before{background-image:url("assets/payment/signnow.svg");background-size:auto 82%;color:transparent}

/* CONNECTIONS — three jobs on one screen. Owner-directed: keep the subjects apart without spending
   three sidebar entries on something a dealer sets up once and then never opens again.
   Each tab carries a second line saying what it is FOR, because "Phone" and "E-signature" are two
   words and the sentence that stops somebody connecting a paid service they do not need has to live
   somewhere. */
.conn-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 18px}
.conn-tab{display:grid;gap:2px;justify-items:start;text-align:left;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);
  cursor:pointer;font-family:inherit;transition:border-color .12s ease,transform .12s ease}
.conn-tab:hover{border-color:var(--accent);transform:translateY(-1px)}
.conn-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conn-tab.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent)}
.conn-tab strong{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.conn-tab small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.conn-lead{margin:0 0 14px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);max-width:74ch}

/* A field this role was not given. Locked, not empty — the launcher blanked it out of their copy of
   the database and restores it on save, so an editable-looking box would take a salesperson's typing
   and silently throw it away. The lock plus the tooltip is the whole explanation. */
input[data-redacted],textarea[data-redacted]{background:var(--surface-soft);color:var(--muted);
  cursor:not-allowed;border-style:dashed}
input[data-redacted]::placeholder{color:var(--muted)}
/* ===========================================================================================
   Import wizard (import-wizard-ui.js)

   Every colour here is a token that all ten designs already define for BOTH appearances — no
   literal gets its only definition in a light block, which is the rule that made --soft paint
   near-white panels under near-white ink in every dark design.

   Type comes only from the --fs-* scale with its paired --lh-* step, or calc() off a --ui-*
   token. Weights are 400/500/600/700 and nothing else; the bundled faces have no other file
   behind them. Spacing is on the even 2px rhythm. Radii are exempt — they are a design signature.
   =========================================================================================== */

/* ---- progress rail ---- */
.iw-progress{margin:0 0 18px}
.iw-prog-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.iw-prog-item{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--surface);color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500}
.iw-prog-item.is-now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--ink);font-weight:600}
.iw-prog-item.is-done{color:var(--ink)}
.iw-prog-dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-soft);color:var(--ink);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700}
.iw-prog-item.is-now .iw-prog-dot{background:var(--accent);color:var(--accent-ink)}
.iw-prog-item.is-done .iw-prog-dot{background:var(--green);color:var(--surface)}
.iw-prog-label{white-space:nowrap}

/* ---- shell ---- */
.iw-shell .iw-body{margin:0 0 4px}
/* MEASURED, 2026-08-13: these h3s carried no size rule at all, so every one of them fell through
   to the browser default — 1.17em of a 16px parent = 18.72px on an 18.72*1.5 = 28.08px line box,
   fractional in all 18 design/appearance combinations. This is the "no size rule at all" trap from
   the render-system notes, and it is invisible in the stylesheet because nothing looks wrong. */
.iw-shell h3{margin:18px 0 8px;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;color:var(--navy)}
.iw-intro{margin:0 0 14px;max-width:74ch;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}

/* ---- step 1: source picker ---- */
.iw-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 14px}
.iw-source{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;text-align:left;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);color:var(--ink);cursor:pointer}
.iw-source:hover{border-color:var(--accent)}
.iw-source:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iw-source.is-chosen{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent)}
.iw-source.is-lead{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
/* The other company's mark sits on a chip painted in the polarity that mark was drawn for, NOT in
   the theme's colours. These two literals are deliberate and must not become tokens: the artwork
   is single-polarity (DealerCenter and Frazer ship white, OpenLane ships navy), so a chip that
   re-themed would blank one of them in half the designs. Ten designs x light/dark = twenty ways to
   render an empty box otherwise. Recolouring the marks themselves is not an option — they are
   someone else's trademarks and go out unaltered. */
/* 64px tall, not 44, and the mark inside gets 40 of it rather than 24. Owner 2026-08-14:
   "frazer logo in import from dms is too small" — and it was. These are WORDMARKS, not icons: the
   Frazer file is a wide lockup, so capping it at 24px of height left the letters a few pixels tall
   while the card around them was 200px wide. This is the mark a dealer scans the row for. */
.iw-source-logo{display:flex;align-items:center;justify-content:center;height:64px;padding:0 14px;border-radius:var(--r-control);overflow:hidden}
/* The drawn mark needs no polarity chip behind it: it is drawn with its own ground and works on
   any surface, which is the whole reason it is drawn rather than shipped as a single-polarity file. */
.iw-source-logo--drawn{padding:0;background:transparent}
.iw-source-logo--drawn svg{display:block;width:40px;height:40px}
.iw-source-logo--dark{background:#12181f}
.iw-source-logo--light{background:#fff;border:1px solid var(--line)}
.iw-source-logo img{display:block;max-height:40px;max-width:100%;width:auto;object-fit:contain}
.iw-marks{margin-top:10px;color:color-mix(in srgb,var(--muted) 82%,var(--ink));font-size:var(--fs-micro);line-height:var(--lh-micro)}
.iw-source-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.iw-source-name{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.iw-source-flag{padding:2px 8px;border-radius:var(--r-stadium);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.iw-source-tag{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.iw-carry{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px}
.iw-carry li{padding:2px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:500}
.iw-carry-yes{background:var(--greensoft);color:color-mix(in srgb,var(--green) 72%,var(--ink))}
.iw-carry-no{background:var(--redsoft);color:color-mix(in srgb,var(--red) 72%,var(--ink))}

/* ---- step 2: the illustrated guide ---- */
.iw-reports{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.iw-reports h3{margin:0 0 8px;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.iw-report-list{margin:0;padding-left:20px}
.iw-report-list li{margin:0 0 4px;font-size:var(--fs-body);line-height:var(--lh-body)}
.iw-report-where{margin-left:6px;color:color-mix(in srgb,var(--muted) 74%,var(--ink));font-size:var(--fs-small);line-height:var(--lh-small)}

.iw-steps{margin:0;padding:0;list-style:none;display:grid;gap:12px}
/* 320px, not 180px. The art column held a DRAWN diagram, where 180px was plenty because the
   diagram has three shapes in it. A real screenshot has words in it — "Print / Export",
   "CSV - Raw Data" — and those words are the whole point, because the dealer is matching them
   against their own screen. At 180px a 700px capture renders at a quarter size and the labels are
   3px tall, which is a picture of a toolbar rather than a readable one. */
.iw-step{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface)}
.iw-step.is-key{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.iw-step-art{display:block;min-width:0;position:relative}
/* A real screenshot REPLACES the drawn diagram in the layout but not in the markup: the diagram
   stays in the DOM, hidden, so the img's onerror can reveal it by dropping .has-shot. A capture
   that fails to load must leave a diagram, never a hole.
   THE IMAGE KEEPS ITS OWN ASPECT RATIO. The first version stretched it over the diagram's box with
   object-fit:cover, which is right for a photo and wrong for a control strip — the toolbar capture
   is 700x84, and covering a squarish box crops away everything except a sliver in the middle,
   which is exactly the part with no label on it.
   Bordered because a screenshot of ANOTHER product needs a visible edge, or it reads as part of
   AutoSteward's own interface. */
.iw-step-art.has-shot .iw-art{display:none}
/* min-height reserves the row before the capture arrives. Without it the cell is zero-height until
   the image loads, which shifts the whole step list downward as each one lands — and, when the
   image was lazy, meant it never loaded at all (see import-wizard-ui.js). */
.iw-step-shot{display:block;width:100%;height:auto;min-height:56px;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.iw-art{display:block;width:100%;height:auto}
.iw-step-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.iw-step-n{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.iw-step-title{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:600}
.iw-step-text{color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.iw-aside{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--blue);border-radius:var(--r-control);background:var(--bluesoft);color:color-mix(in srgb,var(--blue) 68%,var(--ink));font-size:var(--fs-small);line-height:var(--lh-small)}

/* The drawn controls. Painted from the same tokens as the rest of the app, so they re-theme with
   every design and both appearances instead of being a picture of one of them. */
.iw-art-bg{fill:var(--surface-soft)}
.iw-art-rail{fill:var(--navy)}
.iw-art-panel{fill:var(--surface);stroke:var(--line);stroke-width:1}
.iw-art-dim,.iw-art-line{fill:var(--line)}
.iw-art-hot{fill:var(--accent)}
.iw-art-hot-ink{fill:var(--accent-ink)}
.iw-art-hot-soft{fill:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.iw-art-radio-on{fill:none;stroke:var(--accent);stroke-width:2}
.iw-art-radio-dot{fill:var(--accent)}
.iw-art-radio-off{fill:none;stroke:var(--line);stroke-width:2}
.iw-art-check-on{fill:var(--accent)}
.iw-art-check-off{fill:none;stroke:var(--line);stroke-width:2}
.iw-art-point{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The format the dialog arrives on — shown as the one to move AWAY from. */
.iw-art-was{stroke:var(--muted);stroke-dasharray:3 2}

/* ---- step 4: column mapping ---- */
.iw-blocked{margin:0 0 12px;padding:12px 14px;border-left:3px solid var(--amber);border-radius:var(--r-control);background:var(--ambersoft);color:color-mix(in srgb,var(--amber) 72%,var(--ink));font-size:var(--fs-body);line-height:var(--lh-body)}
.iw-map-table td{vertical-align:middle}
.iw-map-table tr.is-ignored td{color:var(--muted)}
.iw-conf{display:inline-block;padding:2px 8px;border-radius:var(--r-stadium);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600}
.iw-conf.is-sure{background:var(--greensoft);color:color-mix(in srgb,var(--green) 72%,var(--ink))}
.iw-conf.is-chosen{background:var(--bluesoft);color:color-mix(in srgb,var(--blue) 68%,var(--ink))}
.iw-conf.is-check{background:var(--ambersoft);color:color-mix(in srgb,var(--amber) 72%,var(--ink))}
.iw-conf.is-none{background:var(--chip-bg);color:var(--muted)}
.iw-why{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.iw-pick{display:block;min-width:0}
.iw-map-select{width:100%;min-height:32px}
.iw-preview-table td{font-size:var(--fs-small);line-height:calc(var(--ui-table) + 7px)}

/* ---- step 5: the shape check ---- */
.iw-clean{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--green);border-radius:var(--r-control);background:var(--greensoft);color:color-mix(in srgb,var(--green) 72%,var(--ink));font-size:var(--fs-body);line-height:var(--lh-body)}
.iw-missing{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* ---- footer ---- */
.iw-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* Holds the refusal reason beside the disabled button. It keeps its box even when empty so the
   buttons do not jump sideways the moment a step becomes satisfiable. */
.iw-footer-why{flex:1 1 240px;min-width:0}
.iw-footer-act{display:flex;gap:8px;margin-left:auto}
.iw-refuse{color:color-mix(in srgb,var(--amber) 72%,var(--ink));font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500}

@media (max-width:640px){
 .iw-step{grid-template-columns:minmax(0,1fr);gap:10px}
 .iw-step-art{max-width:220px}
}

/* ------------------------------------------------------------------------------------------
 * Free checks — the per-VIN lookups on Market Pulse and the consumer-run credit lookups in the
 * sale wizard. One card style for both, because they are the same promise: free, no account,
 * opens in your own browser.
 *
 * Every size below is a --fs-* step with its paired --lh-*, and every heading carries an
 * explicit size so it cannot fall through to a browser default expressed as an em multiple
 * (an <h2> with no rule is 1.5em, which lands on a fractional line box). Weights are 400/500/
 * 600/700 only; the bundled faces have no file behind anything else.
 * --------------------------------------------------------------------------------------- */
.fc-block{margin:0 0 16px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong,var(--surface));box-shadow:var(--shadow)}
.fc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fc-head h2{margin:0;color:var(--navy);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700;letter-spacing:-.02em}
.fc-badge{padding:4px 10px;border-radius:var(--r-stadium);color:var(--green);background:var(--greensoft);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.fc-lede{margin:8px 0 0;max-width:76ch;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.fc-sub{margin:18px 0 8px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}

/* Auto-fit rather than a fixed column count: this block renders inside the sale wizard's narrow
 * step column AND across the full width of Market Pulse, and a 3-column grid that is right in
 * one place is squeezed to unreadable in the other. */
.fc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px}
/* PLAIN TOKENS ONLY for anything that has to survive a theme change. This was
 * color-mix(in srgb, var(--ink) 4%, var(--surface)), which reads as the obviously correct way to
 * derive a card tint from the two tokens that are always right. Measured across all nine designs
 * on 2026-08-12 it was not: in every dark theme the mix kept resolving to the LIGHT surface while
 * --ink resolved light, so title text landed on its own background at 1.01:1 to 1.08:1. The block
 * beside it, which uses a bare var(--surface), was correct in all eighteen combinations. So the
 * card takes the same bare token and earns its separation from the border and the hover state
 * instead of from a tint. Sits with the existing rule about not driving colour off a custom
 * property indirectly. */
.fc-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong,var(--surface));color:inherit;transition:.16s}
.fc-card:hover{border-color:color-mix(in srgb,var(--blue) 46%,var(--line));background:var(--surface);transform:translateY(-2px)}
.fc-card-top{border-color:color-mix(in srgb,var(--blue) 42%,var(--line));box-shadow:inset 3px 0 var(--blue)}
.fc-card-head{display:flex;align-items:center;gap:10px}
.fc-card-title{display:flex;min-width:0;flex-direction:column;gap:2px}
.fc-card-title strong{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.fc-card-host{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:400}
.fc-card-flag{margin-left:auto;padding:2px 8px;border-radius:var(--r-stadium);background:var(--bluesoft);color:var(--blue);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;white-space:nowrap}
.fc-card-gives{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.fc-card-cost{color:var(--green);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.fc-card-gotcha{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.fc-card-gotcha strong{color:color-mix(in srgb,var(--amber) 76%,var(--ink));font-weight:600}

/* THE WHITE PLATE IS DELIBERATE AND MUST NOT FOLLOW THE THEME. These are seven other companies'
 * marks, drawn for the background their own brand guidelines assume. Letting --surface invert
 * them in dark mode turns a navy NICB "N" into an invisible one. Fixed white, both appearances. */
.fc-mark{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-surface);background:#fff;border:1px solid var(--line);overflow:hidden}
.fc-mark img{display:block;width:28px;height:28px;object-fit:contain}
.fc-mark-drawn{color:#fff;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;letter-spacing:.04em;border-color:transparent}
/* A DRAWN mark, not a letter tile — the SVG carries its own ground and rounding, so the tile
   around it gets out of the way entirely rather than painting a second border inside a border. */
.fc-mark-svg{background:transparent;border-color:transparent;padding:0}
.fc-mark-svg svg{display:block;width:28px;height:28px}
.fc-marks{margin:12px 0 0;color:color-mix(in srgb,var(--muted) 82%,var(--ink));font-size:var(--fs-micro);line-height:var(--lh-micro)}

/* The scan block: QR on the left, the reason it works this way on the right. */
.fc-scan{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong,var(--surface))}
.fc-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:var(--r-surface);background:#fff;line-height:0}
.fc-qr svg{display:block;max-width:100%;height:auto}
.fc-qr-host{color:#4a5666;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:500}
.fc-scan-say{flex:1 1 300px;min-width:0}
.fc-scan-say h3{margin:0 0 6px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.fc-scan-say p{margin:0 0 8px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.fc-scan-say p:last-child{margin-bottom:0}
.fc-scan-why{color:var(--muted)!important}
.fc-scan-why strong{color:var(--ink);font-weight:600}

.fc-send{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}
.fc-send label{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}
.fc-send-text{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--input-bg,var(--surface));color:var(--input-ink,var(--ink));font-size:var(--fs-small);line-height:var(--lh-small);resize:vertical}

/* The FICO Auto Score warning. Its own box because it is the single most expensive
 * misunderstanding on the screen, and a line inside a card nobody expands is not a warning. */
.fc-warn{margin:14px 0 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--amber) 42%,var(--line));border-left:4px solid var(--amber);border-radius:var(--r-surface);color:var(--ink);background:var(--ambersoft);font-size:var(--fs-small);line-height:var(--lh-small)}
.fc-warn strong{font-weight:600}

@media (max-width:640px){
 .fc-cards{grid-template-columns:minmax(0,1fr)}
 .fc-scan{gap:12px}
}

/* The credit block inside the sale wizard, which is a PROMPT rather than a reference list: it
 * interrupts the rate box on purpose, so it reads as part of the step and not as a panel that
 * wandered in. Flush to the step's own width, and marked down the side so the eye lands on it
 * before the APR field underneath. */
.fc-credit{margin:0 0 14px;border-left:4px solid var(--blue)}

/* ------------------------------------------------------------------------------------------
 * Suggestion picker (web/suggest-picker.js) — the in-app replacement for <datalist>.
 *
 * The whole reason this exists is that the native popup is drawn by the browser in the OS
 * appearance, so every colour here comes from OUR tokens and follows light/dark and all ten
 * designs. Sizes are --fs-* steps with their paired --lh-*, per the render system.
 * --------------------------------------------------------------------------------------- */
.sp-wrap{position:relative;display:block;min-width:0}
/* The wrapper replaced the input inside a grid, so it has to carry the input's own sizing or the
 * look-up row collapses to a content-width box. */
.sp-wrap>input{width:100%}
.sp-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:288px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-strong,var(--surface));box-shadow:var(--shadow-raised)}
.sp-list[hidden]{display:none}
.sp-option{padding:8px 10px;border-radius:var(--r-control);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
/* One highlight state for the pointer and the keyboard, because they share `active`. Two different
 * looks would let the mouse hover one row while Enter takes another. */
.sp-option.is-active{color:var(--accent-ink,#fff);background:var(--accent,var(--blue))}
/* The part already typed. Bold rather than coloured: on the active row a second colour has to beat
 * the accent fill for contrast in all ten designs, and weight always wins that fight. */
.sp-option b{font-weight:700}
.sp-option.is-active b{color:inherit}

/* ---- BHPH autopay ---------------------------------------------------------------------------
 *
 * Type follows the render system: every size is an --fs-* step with its paired --lh-* leading, and
 * nothing here writes a raw rem or a unitless ratio. Both halves of that rule are what put a third
 * of this app's text on fractional line boxes before the 2026-08-04 pass, and both are enforced by
 * tests/test_whole_pixel_type.mjs.
 *
 * Colours come from the token layer (--line, --surface, --navy, --muted, --red...) rather than from
 * fixed hex, so all ten design presets and both appearances follow without a per-design rule. */
.ap-queue{margin:0 0 24px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.ap-queue>h2{margin:0 0 12px;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:-.02em}
.ap-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 18px}
.ap-summary>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-surface);background:var(--surface)}
.ap-summary span{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:.04em;text-transform:uppercase}
.ap-summary strong{color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.02em}
.ap-summary strong.bad{color:var(--red)}
.ap-block{margin:0 0 18px}
.ap-block:last-child{margin-bottom:0}
.ap-block h3{margin:0 0 4px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
/* The two blocks that are not routine get a coloured rail rather than a filled panel: a filled
 * warning behind a whole table makes the table itself hard to read. */
.ap-block-missed{padding-left:12px;border-left:4px solid var(--red)}
.ap-block-unfinished{padding-left:12px;border-left:4px solid var(--amber)}
.ap-note{margin:0 0 10px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-table small{display:block;color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.ap-late{display:inline-flex;padding:4px 8px;border-radius:var(--r-stadium);color:var(--blue);background:var(--bluesoft);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;white-space:nowrap}
.ap-late.ok{color:var(--green);background:var(--greensoft)}
.ap-late.watch{color:var(--amber);background:var(--ambersoft)}
.ap-late.bad{color:var(--red);background:var(--redsoft)}
.ap-empty{margin:0 0 16px}

/* No provider-mark rules here on purpose. The autopay screens render the app's existing .pay-mark
 * tile through DmsPaymentLinks.markHtml, which already carries the official artwork from
 * web/assets/payment/ at a background-size tuned per brand. A second mark defined here would drift
 * from that one and draw the same logo two different ways on two screens. */
.ap-account{margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.ap-account-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.ap-account-head h2{margin:0;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:-.02em}
.ap-account-none p{margin:0 0 12px;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
.ap-status{display:inline-flex;padding:6px 10px;border-radius:var(--r-stadium);color:var(--muted);background:var(--soft);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ap-status.active{color:var(--green);background:var(--greensoft)}
.ap-status.pending{color:var(--amber);background:var(--ambersoft)}
.ap-status.paused{color:var(--amber);background:var(--ambersoft)}
.ap-status.revoked{color:var(--red);background:var(--redsoft)}
/* Any status that is NOT collecting money says so in a sentence, because a badge is not a warning. */
.ap-warn{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-control);color:var(--ink);background:var(--soft);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 20px;margin:0 0 12px}
.ap-terms div{padding:10px 0;border-bottom:1px solid var(--line)}
.ap-terms dt{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:.04em;text-transform:uppercase}
.ap-terms dd{margin:4px 0 0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.ap-auth{margin:0 0 10px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-auth strong{color:var(--ink)}
.ap-auth-missing{color:var(--red)}
.ap-fee-note{margin:0 0 12px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-ledger-empty{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-receipts small{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.ap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Setting it up, at the desk. */
.ap-setup{margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);box-shadow:var(--shadow)}
.ap-setup>h2,.ap-setup-blocked h2{margin:0 0 8px;color:var(--navy);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:-.02em}
.ap-setup-blocked p{margin:0 0 8px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-blockers{margin:0;padding-left:20px;color:var(--red);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-blockers li{margin:0 0 4px}
/* The one line on this screen that decides whether the feature ever works. */
/* A mark, then the sentence, then the consequence on its own line. It was a paragraph of red text
   and it read as boilerplate; the icon gives the eye a place to land and stops colour being the
   only thing carrying the warning. */
.ap-urgent{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-control);color:var(--ink);background:var(--redsoft);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-urgent-mark{width:20px;height:20px;fill:var(--red);flex:0 0 auto}
.ap-urgent-cost{display:block;margin-top:4px;color:var(--muted)}

/* Handing the invoice to the customer's phone. Two columns so the square sits beside the
   instruction rather than pushing it off the screen; one column once there is no room for both. */
.ap-handoff{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin:14px 0 0;padding:14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
/* min-width:0 or the URL field refuses to shrink and pushes the code off the panel — a grid item's
   default min-width:auto is the usual cause of a two-column layout that overflows on one screen. */
.ap-handoff-copy{min-width:0}
.ap-handoff h3{margin:0 0 6px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.ap-handoff p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-handoff-entry{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ap-handoff-input{flex:1 1 260px;min-width:0;min-height:var(--control-height);padding:0 10px;border:1px solid var(--line);border-radius:var(--r-surface);color:var(--ink);background:var(--surface);font-size:var(--fs-small)}
.ap-handoff-bad{margin-top:8px!important;color:var(--red)!important}
.ap-handoff-good{margin-top:8px!important}
/* White behind the code whatever the theme is: a dark-on-dark QR does not scan, and this one is
   read off a monitor from across a desk. */
.ap-handoff-qr{flex:0 0 auto;padding:8px;border-radius:var(--r-surface);background:#ffffff;line-height:0}
.ap-handoff-qr svg{display:block;max-width:100%;height:auto}
.ap-handoff-host{display:block;margin-top:6px;text-align:center;color:#3c3c46;font-size:var(--fs-micro);line-height:calc(var(--fs-micro) + 6px);font-weight:600}
.ap-handoff-empty{display:grid;place-items:center;width:184px;height:184px;border-radius:var(--r-surface);border:1px dashed var(--line);color:var(--muted);background:var(--surface)}
.ap-handoff-empty svg{width:56px;height:56px;fill:currentColor;opacity:.45}
@media (max-width:720px){
 .ap-handoff{grid-template-columns:minmax(0,1fr)}
 .ap-handoff-empty{width:140px;height:140px}
}
.ap-legal{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-control);color:var(--ink);background:var(--bluesoft);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-fees{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--soft)}
.ap-fees h3{margin:0 0 8px;color:var(--navy);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.ap-fees dl{display:grid;gap:6px;margin:0 0 8px}
.ap-fees dl div{display:flex;justify-content:space-between;gap:12px}
.ap-fees dt{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-fees dd{margin:0;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-fees p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-steps{margin:0;padding:0;list-style:none}
.ap-step{padding:12px 0;border-top:1px solid var(--line)}
.ap-step:first-child{border-top:0}
.ap-step-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:start;gap:10px}
.ap-step-num{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-stadium);color:var(--blue);background:var(--bluesoft);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700}
.ap-step.done .ap-step-num{color:var(--green);background:var(--greensoft)}
.ap-step-head strong{display:block;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.ap-step-head small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-step-tag{display:inline-flex;padding:4px 8px;border-radius:var(--r-stadium);color:var(--muted);background:var(--soft);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;white-space:nowrap}
.ap-step-tag.ok{color:var(--green);background:var(--greensoft)}
.ap-step-tag.watch{color:var(--amber);background:var(--ambersoft)}
.ap-step-body{margin:10px 0 0 38px}
.ap-step-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ap-square-steps{margin:0;padding-left:20px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-square-steps li{margin:0 0 4px}
.ap-waiting{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* The printable authorization.
 *
 * printableHtml() repeats these inline because it opens a SEPARATE document that cannot reach this
 * stylesheet — a print window with no styles is a legal form that gets signed looking wrong. These
 * rules are what style the same markup when it is shown inside the app. */
.autopay-auth{max-width:44em}
.autopay-auth h1{margin:0 0 16px;color:var(--navy);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700}
.autopay-auth-parties{display:grid;gap:6px;margin:0 0 16px;padding:0}
.autopay-auth-parties div{display:flex;gap:10px}
.autopay-auth-parties dt{min-width:8em;margin:0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.autopay-auth-parties dd{margin:0;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.autopay-auth-lead{margin:0 0 8px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.autopay-auth-terms{margin:0 0 16px;padding-left:20px;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
.autopay-auth-terms li{margin:0 0 8px}
.autopay-auth-privacy,.autopay-auth-receipt{margin:0 0 12px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.autopay-auth-sign{display:grid;gap:22px;margin:24px 0 16px}
.autopay-auth-rule{display:block;height:26px;border-bottom:1px solid var(--ink)}
.autopay-auth-sign label{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.autopay-auth-copy{margin:0;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.ap-reconcile-error{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-control);color:var(--ink);background:var(--redsoft);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-reconcile-summary{margin:10px 0;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.ap-reconcile-note{margin:10px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.ap-reconcile input[type=file]{font-size:var(--fs-small);line-height:var(--lh-small)}

/* Drawn validation marks, replacing the fixed raster clip-art (icons/wrong.webp, error.webp,
   right.webp) that Data Check used to show. Sized to the 26px column the row already reserves for
   an image, and coloured from the row's own level class via currentColor — so the same mark reads
   correctly in all ten designs and both appearances instead of being one baked-in red. */
.validation-item .validation-icon{width:22px;height:22px;stroke-width:1.8}
.validation-item.error .validation-icon{color:var(--pui-risk,#c9363e)}
.validation-item.warning .validation-icon{color:var(--amber,#d69216)}
.validation-item.success .validation-icon{color:var(--green,#248653)}
/* The empty-tab placeholder mark ("Save the vehicle first"). Was an 86px raster; now the drawn
   add-vehicle icon at the same size, so it takes the design's ink instead of shipping one fixed
   blue that fights nine of the ten palettes. */
.empty-tab .empty-tab-icon{width:72px;height:72px;stroke-width:1.4;color:var(--muted)}

/* PHONE WIDTHS: the top bar has to fit, or the whole app scrolls sideways.
   Measured at 375px: .header-user-menu ended at 416px, so every route scrolled horizontally —
   nothing was overflowing its own parent, the HEADER simply held more than the screen. A page that
   slides left when you scroll it reads as broken before a dealer has looked at anything.
   Dropped in order of least loss: the search shortcut hint (a phone has no Ctrl), then the search
   and account LABELS (their icon and avatar still say what they are), then the breadcrumb — whose
   text is repeated in the page heading two centimetres below it. */
@media(max-width:560px){
  .header-search-button kbd{display:none}
  .header-search-button span:not(.header-search-icon){display:none}
  .account-button-copy{display:none}
  .breadcrumb-bar{display:none}
}

/* ---- drawn service marks (web/service-marks.js) ------------------------------------------------
   Used where a vendor forbids their logo (Adobe, AnnualCreditReport.com) or publishes none
   (PandaDoc, Black Book, vAuto), and for the options that are not a company at all ("a spreadsheet
   from somewhere else", "something else"). Each SVG carries its own tile and rounding, so every
   rule here is about getting the CONTAINER out of the way — a chip painted behind a mark that
   already has one reads as a mark sitting crookedly inside a box. */
.pay-mark-drawn{background-color:transparent;border-color:transparent;color:transparent}
.pay-mark-drawn svg{display:block;width:26px;height:26px}
.aim-market-brand-drawn{display:flex;align-items:center;justify-content:center;padding:0;background:transparent}
.aim-market-brand-drawn svg{display:block;width:30px;height:30px}

/* "Is anyone financing this car?" on the buyer page — the question the credit checks hang off.
   Set apart from the buyer's boxes above it because it is a decision rather than a field: answering
   it changes what else is on the page. */
/* minmax(0,1fr), NOT the implicit auto column. The auto track sized itself to the choices' one-line
   width (435px), so on a 375px phone this card - and with it the whole sale wizard - scrolled
   sideways to 491px (measured by tools/dev/walk's sale-wizard-375 flow). A zero minimum lets the
   track take the card's width and the choices wrap onto a second line. */
.sw-finance-ask{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:20px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface-soft)}
.sw-finance-ask>strong{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.sw-finance-ask>small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.sw-finance-choices{display:flex;flex-wrap:wrap;gap:8px}

/* The choices in "Is anyone financing this car?". Inherits the money page's segmented look — same
   control, same question, asked earlier — and only needs its own name because the markup carries a
   literal class rather than a bare state class. */
.sw-finance-choice{min-height:34px;padding:0 12px;border-radius:var(--r-control);cursor:pointer}

/* What could not be saved, on the last screen of an import. A list a dealer reads once and acts on,
   so it is set apart from the prose above it rather than run into it. */
.iw-fail-list{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;
  color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.iw-fail-list li{overflow-wrap:anywhere}

/* Drawn service marks carry their own tile, so this only makes them behave as a block and stops a
   parent's line-height adding a phantom row under them. */
.svc-mark{display:block}

/* The autopay panel BEFORE there is a schedule to collect against. Muted rather than absent —
   an empty space where a feature should be is indistinguishable from the feature not existing,
   which is exactly how this one got asked about twice. */
.ap-setup-waiting{opacity:.75}

/* A DRAWN mark on a chooser row. The ::before tile above is painted by CSS from a file, which a
   runtime-built SVG can never be — so services we draw rather than ship (WhatsApp, Skype, Google
   Voice, "this PC", Adobe Sign, PandaDoc) put their mark in the markup instead. The row still gets
   the same 56px indent so the left edge of the list stays straight, and the ::before tile is
   suppressed so there is one mark per row rather than a glyph sitting on top of a letter. */
.steward-choice.has-drawn-mark{padding-left:56px}
.steward-choice.has-drawn-mark::before{content:none}
.steward-choice-mark{position:absolute;left:12px;top:50%;margin-top:-16px;
  width:32px;height:32px;display:grid;place-items:center}
.steward-choice-mark svg{display:block;width:32px;height:32px}

/* The state's plate beside the DMV heading. Sized to sit with the heading rather than above it —
   the panel answers "whose fees are these?" and the answer belongs on the same line as the
   question. See web/dmv-states.js for why this is a drawn plate and not a state seal. */
.dmv-state-plate{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px}
.dmv-state-plate svg{display:block;width:26px;height:26px}
.dmv-fees-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The plate SVG itself, so it behaves as a block wherever a state mark is placed rather than
   picking up a phantom line-height row from its parent. */
.dmv-state-mark{display:block}
/* A real state seal in a tile. object-fit:contain because a seal is a circular engraving and any
   crop of it loses the rim it is recognised by. */
.dmv-state-seal{display:inline-grid;place-items:center;flex:0 0 auto}
.dmv-state-seal img{display:block;width:100%;height:100%;object-fit:contain}

/* ==========================================================================
   THE DESKTOP TITLE BAR
   Only present when AutoSteward runs in its own window — the host injects
   window.__stewardDesktop and shell-chrome.js draws the strip. In a browser none of
   these rules match anything, so the browser layout is untouched.

   Built from the same tokens as the rest of the app on purpose. That is the whole point:
   a caption painted from --surface and --ink follows the dealer's light/dark choice and
   every one of the ten designs automatically, so there is no seam between the frame and
   the app. A hand-picked colour here would be correct in exactly one theme.
   ========================================================================== */
:root { --shell-caption-height: 40px; }

.shell-titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--shell-caption-height);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sidebar-bg, var(--navy)); color: var(--sidebar-ink, #fff);
  border-bottom: 1px solid var(--line); z-index: 9000;
  /* No text selection and no drag image: this strip behaves like a window frame, and a caption
     that highlights its own title when you drag the window feels broken. */
  user-select: none; -webkit-user-select: none;
}
.shell-titlebar-brand { display: flex; align-items: center; gap: 8px; padding-left: 12px; min-width: 0 }
.shell-titlebar-brand img { display: block; width: 16px; height: 16px; flex: none }
.shell-titlebar-name {
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap;
}
.shell-titlebar-sub {
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400;
  opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-titlebar-sep { margin: 0 6px; opacity: 0.5 }

.shell-titlebar-controls { display: flex; align-items: stretch; height: 100% }
/* 46px wide is the Windows 11 caption button width. Matching it is why the buttons feel native
   rather than like web buttons that happen to sit at the top. */
.shell-winbtn {
  width: 46px; height: 100%; display: grid; place-items: center;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: default;
  color: inherit; opacity: 0.86; transition: background-color 120ms ease, opacity 120ms ease;
}
.shell-winbtn:hover { background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1 }
.shell-winbtn:active { background: color-mix(in srgb, currentColor 22%, transparent) }
/* Red on hover, white glyph — the one caption convention every Windows user already knows. */
.shell-winbtn-close:hover { background: #c42b1c; color: #fff; opacity: 1 }
.shell-winbtn-close:active { background: #b0271a; color: #fff }
.shell-winbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }

/* The app is pushed down by exactly the caption height. A margin rather than a body offset so
   position:fixed panels inside the app keep measuring against the viewport they always did. */
/* EVERY FIXED THING HAS TO MOVE, NOT JUST THE BODY.
   The sidebar is position:fixed with inset:0 auto 0 0, so body padding does not touch it and it
   slid underneath the caption — the brand mark and "Dealer Management" were half-hidden behind our
   own title bar. Anything pinned to the top of the viewport has to start below the caption
   instead, which is why this offsets the rail and the sticky header as well as the page. */
html.has-shell-titlebar body { padding-top: var(--shell-caption-height) }
html.has-shell-titlebar .dms-sidebar { top: var(--shell-caption-height) }
html.has-shell-titlebar .desktop-app-header { top: var(--shell-caption-height) }
/* The scroll container starts below the caption too, or the page scrollbar runs up behind it and
   shows as a stray sliver beside the close button. */
html.has-shell-titlebar { scrollbar-gutter: stable }
/* Maximised, Windows insets the window by the frame thickness, so the rounded corner is gone and
   a border along the top would show as a stray line. */
html.shell-maximized .shell-titlebar { border-top: 0 }

/* MEASURED, NOT ASSUMED. The audit found checkboxes rendering 13px wide and <summary> rows
   18-25px tall across Financials, Connections, Display, Security and Activity — both are browser
   defaults nobody chose, and both are below the size a person can hit reliably. min-height only
   ever grows a row, so this cannot squash an existing layout. */
input[type="checkbox"],input[type="radio"]{width:16px;height:16px}
details>summary{min-height:28px}

/* Panels and editor sections draw a border but set no padding — their inner SECTIONS carry it.
   A paragraph or a link dropped straight into one therefore lands on the border. Measured across
   Financials, the auction editor and several panels. Scoped to direct children that are bare prose
   or links, so the full-bleed headings, tables and rows they were designed around are untouched. */
.panel>p,.panel>strong,.editor-section>p,.editor-section>a,.editor-section>.auction-site-links{padding-inline:14px}
.panel>p:first-child,.editor-section>p:first-child{padding-top:12px}
.panel>p:last-child,.editor-section>p:last-child{padding-bottom:12px}
.pay-input-group>.button{margin-inline-end:2px}

/* ==========================================================================
   MEASURED EDGE CASES — each pair below was found by tools/dev/harness/visual-audit.mjs
   walking 34 routes at four widths in both appearances, and each is the same class of
   mistake: a control with no vertical padding, or a string with nowhere to wrap. None of
   them is visible by reading the rule that causes it, which is why they survived this long.
   ========================================================================== */

/* padding:0 14px — the label sat on the top and bottom edge of its own button. */
.security-filter-button{padding:8px 14px}
/* padding:4px 8px 4px 4px put the checkbox 4px from the edge of the row it lives in. */
.security-signin-toggle{padding:8px 10px}
/* A pay handle is an arbitrary string with no spaces in it; without somewhere to break it runs
   straight out of the row. Measured escaping its card on every connections screen. */
.pay-row strong,.pay-row a,.pay-row li,.pay-row small{min-width:0;overflow-wrap:anywhere}
/* An input group draws its own border; the button inside it was flush against that border. */
.pay-input-group>.button{margin:4px}
/* The auction editor's definition list sat on the section border — the section carries no padding
   because its other children are full-bleed rows. */
.editor-section>dl{padding-inline:14px}
.editor-section>dl:last-child{padding-bottom:12px}
.retention-settings-grid>label,.retention-settings-grid>span{padding-block:2px}
/* A 10px status dot in a row with no padding lands on the row's own rule. */
.iw-prog-item{padding-block:4px}
/* 160px minimums still did not clear the card at laptop width; 140 wraps a column sooner and the
   fields are short — "Current password" needs the label, not the box. */
.security-password-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* A summary's own strong has to be allowed to break, or a long heading escapes the card. */
.info-card>summary strong,.panel>summary strong{min-width:0;overflow-wrap:anywhere}

/* Square's own menu path, folded away. Open by default on the sale screen, where there is no
   checklist and this is the only instruction on the page. */
.ap-guide{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.ap-guide>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;color:var(--navy);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;cursor:pointer;list-style:none}
.ap-guide>summary::-webkit-details-marker{display:none}
.ap-guide>summary svg{width:18px;height:18px;flex:0 0 auto;fill:var(--accent)}
.ap-guide>summary:hover{background:var(--surface-soft,var(--soft))}
.ap-guide[open]>summary{border-bottom:1px solid var(--line)}
.ap-guide-body{padding:12px 14px 14px}
.ap-guide-body ol{margin:0;padding-left:22px;color:var(--ink);font-size:var(--fs-small);line-height:calc(var(--fs-small) + 9px)}
.ap-guide-body ol li{margin:0 0 8px}
.ap-guide-body ol li:last-child{margin-bottom:0}
.ap-guide-then{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

/* A CLOSED <details> MUST ACTUALLY BE CLOSED.
 *
 * Measured on Financials: details.info-card reported open:false and a 66px box — the summary alone —
 * while its rows were still laid out and painting up to 249px BELOW the card they belong to. The
 * browser's own rule for this (details:not([open]) > *:not(summary) { display:none }) is a UA rule,
 * so any author rule that sets display on that child — .financial-detail-grid{display:grid},
 * .pc-stats{display:grid}, and several more — silently beats it and the content leaks out.
 *
 * Restating it as an author rule at (0,1,2) puts it above every single-class display rule in the
 * app. It changes nothing when the section is open. It was 47 of the remaining audit findings and,
 * far worse, several screens that looked folded away were not. */
details:not([open])>*:not(summary){display:none!important}

/* The last measured pairs. All the same shape: a card whose other children are full-bleed rows, so
   it carries no padding of its own — and the one plain paragraph, link or dot dropped into it ends
   up on the border. Scoped to direct children so the rows they were designed around are untouched. */
.panel>p,.panel>strong,.panel>span{padding-inline:16px}
.editor-section>a,.editor-section>span,.editor-section>p{padding-inline:14px}
.editor-section>a:last-child,.editor-section>p:last-child,.editor-section>.auction-site-links:last-child{padding-bottom:12px}
.retention-settings-grid{padding-block:8px}
.iw-prog-item{padding:8px 12px}
/* Two filter chips 4px apart read as one control; they are separate choices. */
.security-user-segments{gap:8px}
/* The preview sign is positioned by percentage over an image, so it can sit at the very top edge. */
.branding-preview-sign{margin-block:4px}

/* ==========================================================================
   SHAPE AND ELEVATION — the two decisions that make an interface look designed.
   Measured before this existed: 32 distinct corner radii across 574 uses, and 102 distinct
   box-shadows across 149. Both are now three steps. See tests/test_design_identity.mjs.
   ========================================================================== */
:root{
  /* Things you operate, and things that hold them, at exactly 1:2. */
  /* The partner's screens say --danger for the red our palette calls --red-solid. */
  --danger:var(--red-solid,#cf3b45);
  --r-control:6px;
  --r-surface:12px;
  /* The brand geometry: the mark draws its S as a racing track, and a track is a stadium. */
  --r-stadium:999px;
  /* Kept as aliases so older rules and the ten design presets keep resolving. */
  --radius-sm:var(--r-control);
  --radius:var(--r-surface);

  /* Elevation. A panel is ground, not a floating card: it gets a hairline, not a drop shadow.
     --shadow-raised is for things that really do overlay the page — menus, dialogs, toasts. */
  --shadow:0 1px 2px rgba(16,43,78,.06);
  --shadow-raised:0 6px 20px rgba(16,43,78,.14);
}
html[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.34);
  --shadow-raised:0 8px 26px rgba(0,0,0,.46);
}

/* ==========================================================================
   THE SIGNATURE — the one shape this product owns, repeated until it reads as a decision.
 
   AutoSteward's mark draws its S as a racing track: two straights closed by two semicircular
   ends. That is a stadium, and it is the only geometry the product already owns. An interface
   becomes identifiable when one shape recurs in places that had no shape at all — so the stadium
   is now the heading spine, the active-navigation marker, and the cap on every status pill.
 
   Deliberately NOT decoration for its own sake: each of the three marks something a dealer needs
   to find quickly on a dense screen — where a section starts, where they are, and what state a
   record is in.
   ========================================================================== */

/* The spine. A short stadium in the accent, set before a panel or card heading. It gives every
   section a consistent left starting point, which is what makes a page of panels scan as one
   document rather than a pile of boxes. */
.panel-heading h2,.info-card>h2,.ap-setup>h2,.ap-account>h2{
  display:flex;align-items:center;gap:10px;
}
.panel-heading h2::before,.info-card>h2::before,.ap-setup>h2::before,.ap-account>h2::before{
  content:"";flex:0 0 auto;width:4px;height:1em;
  border-radius:var(--r-stadium);
  background:var(--accent);
}
/* A heading that already carries an icon has its own leading mark; two would be noise. */
.panel-title-with-icon h2::before,.ap-account-head h2::before{display:none}

/* Where you are. A background fill says "this row is selected"; a stadium marker in the rail says
   "you are here", which is a different statement and the one a navigation list is making. The
   fill stays, quieter, so the target is still obviously a target. */
.sidebar-link.active{
  box-shadow:inset 3px 0 0 var(--accent-glow,#7dd3fc);
}
.sidebar-link.active::after{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:var(--r-stadium);
  background:var(--accent-glow,#7dd3fc);
}
.sidebar-link{position:relative}

/* MONEY IS A COLUMN, NOT A SENTENCE.
   This product's entire job is figures in columns, and proportional digits do not line up: a 1 is
   narrower than a 0, so a column of prices reads as ragged even when it is correctly aligned.
   Tabular figures were on 53 rules and missing from most of the tables. Every place a currency
   value renders now gets the same treatment, which is the least decorative and most useful part
   of this pass. */
.data-table td,.data-table th,
.kpi-copy b,.parity-kpi-card .kpi-copy b,
.financial-profit-value,.financial-loss-value,
.expense-col-amount,.sales-col-money,.bhph-auto-amount,
.ap-summary strong,.ap-fees dd,.money,.amount{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ==========================================================================
   INVENTORY — three lenses over the same rows. See web/inventory-views.js.
   Built from the identity scale: control radius on the switcher, surface radius on the tiles,
   the stadium on the active lens. Nothing here invents a new shape.
   ========================================================================== */
.inventory-view-bar{display:flex;align-items:center;justify-content:flex-end;margin:0 0 10px}
.inv-views{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-stadium);background:var(--soft)}
.inv-view{position:relative;min-height:32px;padding:0 16px;border:0;border-radius:var(--r-stadium);background:transparent;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;cursor:pointer}
.inv-view:hover{color:var(--ink)}
.inv-view.active{color:var(--accent-ink,#fff);background:var(--accent)}
.inv-view:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The gallery. auto-fill rather than a fixed column count, so a wide monitor shows more cars
   instead of bigger ones — the question this view answers is "what have we got". */
.inv-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
/* Paging for big lots: the count of what is not shown, and the way to see it. */
.inv-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;padding:14px;border:1px dashed var(--line);border-radius:var(--r-surface);background:var(--soft)}
.inv-more-count{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.inv-col-more{justify-self:stretch}
.inv-tile{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);text-align:left;cursor:pointer}
.inv-tile:hover{border-color:var(--accent)}
.inv-tile[data-selected]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.inv-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 4:3 held open whether or not a photograph ever arrives, so the grid does not reflow as pictures
   load in — a shifting grid is unusable exactly while the dealer is reaching for a car. */
.inv-tile-photo{position:relative;display:block;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.inv-tile-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease}
.inv-tile-flag{position:absolute;top:8px;left:8px;padding:3px 10px;border-radius:var(--r-stadium);background:var(--red);color:#fff;font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700}
.inv-tile-body{display:grid;gap:2px;padding:12px 14px 14px}
.inv-tile-body strong{color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700}
.inv-tile-meta{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.inv-tile-price{margin-top:6px;color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:700;font-variant-numeric:tabular-nums}
/* A car with no asking price is the one worth noticing, so it is marked rather than left blank. */
.inv-tile-price.none{color:var(--amber);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:600}

/* The board. One column per status, the count and the money at the head of each. */
.inv-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
.inv-col{border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);overflow:hidden}
.inv-col-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.inv-col-head strong{flex:1 1 auto;min-width:0;color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.inv-col-count{display:inline-grid;place-items:center;min-width:26px;min-height:22px;padding:0 8px;border-radius:var(--r-stadium);background:var(--accent);color:var(--accent-ink,#fff);font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;font-variant-numeric:tabular-nums}
.inv-col-total{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;font-variant-numeric:tabular-nums}
.inv-col-body{display:grid;gap:8px;padding:12px}
.inv-chip{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);text-align:left;cursor:pointer}
.inv-chip:hover{border-color:var(--accent)}
.inv-chip[data-selected]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.inv-chip strong{color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700}
.inv-chip span{color:var(--muted);font-size:var(--fs-micro);line-height:var(--lh-micro);font-variant-numeric:tabular-nums}
.inv-col-empty{margin:0;padding:16px 14px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}

.inv-empty{padding:48px 24px;border:1px solid var(--line);border-radius:var(--r-surface);background:var(--surface);text-align:center}
.inv-empty strong{display:block;color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.inv-empty p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
@media(max-width:720px){.inv-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* The segmented lens switcher is ONE control whose parts share an edge, so the parts sit flush and
   the pill itself carries the inset. Measured first at 4px, which reads as three buttons that
   nearly touch rather than one segmented control. */
.inv-views{gap:0;padding:6px 8px}
.inv-view{margin:0}

/* Empty states and headings dropped straight into a panel. The panel carries no padding because
   its other children are full-bleed rows, so these landed on the border — including "Nothing on
   the lot yet", which is the first thing a new dealer reads. */
.panel>h2,.panel>h3,.panel>.empty-state,.panel>ul,.panel>ol{padding-inline:16px}
.panel>h2:first-child,.panel>h3:first-child,.panel>.empty-state:first-child{padding-top:14px}
.panel>.empty-state:last-child,.panel>ul:last-child,.panel>ol:last-child{padding-bottom:14px}
.empty-state{padding:16px}
.panel>.empty-state{padding-inline:16px}
/* A selected table row draws a 3px inset marker; without a matching inset the first cell's text
   sits on top of it. */
.data-table tr.selected td:first-child{padding-left:15px}

/* ==========================================================================
   THE LAST THIRTY-THREE. Every one measured on the running app at four widths in both
   appearances; each is named here with what it actually was, because none of them is visible
   by reading the rule that caused it.
   ========================================================================== */

/* SEGMENTED CONTROLS ARE ONE CONTROL. Four pixels between two tabs reads as two buttons that
   nearly touch; the parts of a segmented control share an edge and the pill carries the inset.
   Three of these existed with three different gaps. */
.inv-views,.sales-view-tabs{gap:0;padding:8px}
.inv-view,.sales-view-tab{margin:0}

/* An input group's button is part of the field, not a neighbour of it — flush, sharing the
   group's own border. Four pixels made it look like a button that had slipped inside. */
.pay-input-group>.button{margin:0}

/* Cards and sections that draw a border but set no padding, so a plain paragraph or a bare label
   dropped into them lands on the line. The import wizard's help text, the reports filter row, the
   backup retention labels and the subscription note were each 0-4px from an edge. */
.editor-section>p.field-help,.editor-section>span,.editor-section>.sub-action-note{padding-inline:14px}
.contextual-report-filters{padding-inline:2px}
.contextual-report-filters>label>span{padding-left:2px}
.retention-settings-grid>label>span,.retention-settings-grid>span{padding-left:2px}
.risky-holder{padding-bottom:8px}

/* Badges pinned to a tile corner were hanging 5-8px outside the tile they label. A badge that
   overhangs its own card looks like a rendering fault, not a flourish. */
.aim-tile{position:relative}

/* The two preview captions sat 3px above the frame they caption. */
.branding-preview{overflow:hidden}
.branding-preview>span,.branding-preview>strong{margin-top:4px}

/* A tab label must never be trimmed: "Roles & Permissions" and "Display / Font Settings" were
   losing their last characters because the flex parent was still shrinking the label inside a
   button that had already stopped shrinking. */
.system-tools-tabs button span{overflow:visible;flex:0 0 auto}
.system-tools-tabs button{overflow:visible}

/* A password field 3px wider than the box holding it. */
#uiPassword,.security-password-grid input{max-width:100%;box-sizing:border-box}

/* ---- the last ones, each measured to its actual parent ------------------------------------- */

/* A NAVIGATION LABEL MUST NEVER BE TRIMMED. "Roles & Permissions" and "Display / Font Settings"
   were losing their last characters: the rail is a fixed width and the label was a shrinkable flex
   item, so it silently gave up 4-10px. Wrapping to a second line costs nothing — the rail already
   sizes to its content — and it fixes every long label, not just today's two. */
.sidebar-link{height:auto;gap:8px;padding:8px 8px 8px 10px}
.sidebar-link>span{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}

/* Another segmented control at 4px. Same answer as the other three: the parts share an edge. */
.pui-rail-tabs{gap:0;padding:6px}

/* The import wizard's help text lives in .iw-body, which sits inside a bordered section that
   carries no padding of its own — so the prose landed on the border. */
.editor-section>.iw-body{padding-inline:14px}
.editor-section>.iw-body>:last-child{padding-bottom:12px}
.editor-section .sub-action-note{padding-inline:14px}

/* 2px of padding was not breathing room. These are labels above their fields, and they line up
   with the card's text, so the inset belongs to the container. */
.contextual-report-filters{padding-inline:8px}
.contextual-report-filters>label>span{padding-left:0}
.retention-settings-grid{padding-inline:8px}
.retention-settings-grid>label>span,.retention-settings-grid>span{padding-left:0}

/* The button inside an input group is PART OF THE FIELD. Flush and full height, sharing the
   group's border — 6px of inset made it look like a button that had slipped inside the box. */
.pay-input-group{padding:0;overflow:hidden}
.pay-input-group>.button,.pay-input-group>a.button{margin:0;align-self:stretch;border-radius:0}

/* A badge that hangs outside the tile it labels reads as a rendering fault. Absolutely positioned,
   it was 5px above and 8px left of its own card and 17px wider than itself; in flow it simply
   fits, and the tile no longer has to clip it. */

/* Two captions sitting 3px above the frame they caption, inside a box that clips. */
.branding-preview>span{top:auto;margin-top:6px}
.branding-preview{padding-top:2px}

/* A field 3px wider than its own column. */
#uiPassword{width:100%;max-width:100%;min-width:0;box-sizing:border-box}

/* The last four, each fixed where the winning rule actually lives. */
.editor-section .iw-refuse{padding-inline:14px}
/* Two buttons 4px apart on the empty Market Intelligence screen. */
.mi-empty-actions,.mi-actions{gap:8px}
/* A caption sitting one pixel above the frame it captions. */
.branding-preview>span,.branding-preview>strong{margin-top:8px}

/* The last four. */
/* A button inside an input group has to fill the group's height, or it floats in the middle of the
   field with 6px of dead space above and below it. .button.compact fixes its own height, which is
   what was overriding align-self. */
.pay-input-group>.button,.pay-input-group>a.button{height:auto;min-height:0;align-self:stretch}
/* The preview captions are laid out by the preview box; they were positioned, so a margin could not
   move them off its top edge. */
.branding-preview>span,.branding-preview>strong{position:static;display:inline-block;margin:8px 0 0 8px}
/* A wrapped navigation label needs the row to grow with it, or the second line is clipped instead
   of the first being trimmed — which is how "Display / Font Settings" still lost 10px at 1180. */
.sidebar-link,.sidebar-link>span{overflow:visible}
/* A grid item's default min-width:auto refuses to shrink below its content, which pushed the
   password field 3px past its own column at laptop widths. */
.security-password-grid,.security-password-grid>label{min-width:0}

/* Both element types. The Save control is a <button> and the three link controls are <a>, and the
   earlier rules only reached the anchors — which is why "Save" kept floating in the middle of its
   field with 6px of dead space above and below while the links beside it sat flush. */
.pay-input-group>.button,.pay-input-group>button.button,.pay-input-group>a.button{
  height:auto;min-height:0;margin:0;align-self:stretch;border-radius:0}
/* html[data-font-scale] .button sets min-height at (0,2,1) and was winning over the rule above.
   Matched here rather than reached for with !important, so the cascade still reads honestly. */
html[data-font-scale] .pay-input-group>.button,
html[data-font-scale] .pay-input-group>a.button{height:auto;min-height:0;align-self:stretch}

/* Tokens the partner's screens reference (FIX147 typography pass): a code face and a second surface. Ours keep their names. */
:root{--surface-2:var(--surface-soft,var(--soft));--font-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---- Partner rules for his screens, restored by the reconciliation: selectors that exist nowhere above. ---- */
.customer-contact-detail-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.activity-result-row{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #d5dfe8}
.parts-result-noimg{width:52px;height:52px;border-radius:var(--r-control);background:color-mix(in srgb,currentColor 7%,transparent)}
.twofa-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;padding:12px 14px;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface-soft,#f4f7fb)}
.twofa-key-note{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--muted)}
/* Both result messages had NO styling at all -- plain, easy-to-miss paragraph text, confirmed by
   an owner nearly missing a real rejection message during actual testing. A wrong code is exactly
   the moment someone is already slightly frustrated; the message telling them what happened
   should not also be the thing that's hardest to notice on the screen. */
.twofa-result,.ss-result{margin-top:10px;font-size:var(--fs-body);font-weight:600;line-height:var(--lh-body)}
.twofa-result:empty,.ss-result:empty{display:none}
.twofa-key code{font-family:var(--font-code);font-size:var(--fs-lead);font-weight:700;letter-spacing:.04em;word-break:break-all}
/* "Example" marker on a stand-in photo. Small, but never optional: the image underneath is a
   photograph of a DIFFERENT car of the same year/make/model, and an unlabelled one next to a VIN
   misleads the dealer's own staff first. */
.veh-thumb-stock-tag{position:absolute;left:0;right:0;bottom:0;padding:1px 0;background:rgba(8,20,36,.78);color:#fff;font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-align:center;text-transform:uppercase;pointer-events:none}
.sidebar-group-chevron{font-size:var(--fs-body);line-height:var(--lh-body);transition:transform .15s}
/* FIX164 R2 — stale database recovery. The server already rejects stale whole-database writes;
   this persistent surface makes that safety state impossible to miss and gives the operator one
   explicit recovery action without ever retrying stale bytes. */
.database-conflict-banner{position:sticky;top:0;z-index:95;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--pui-risk) 38%,var(--line));border-left:4px solid var(--pui-risk);border-radius:var(--r-surface);background:color-mix(in srgb,var(--pui-risk) 8%,var(--surface));box-shadow:var(--shadow-raised)}
.database-conflict-banner>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.database-conflict-banner strong{color:var(--ink)}
.database-conflict-banner span{color:var(--pui-support);line-height:var(--lh-body)}
.database-conflict-modal{width:min(640px,calc(100vw - 32px));max-width:640px}
.database-conflict-backdrop{z-index:1400}
@media(max-width:720px){.database-conflict-banner{align-items:stretch;flex-direction:column}.database-conflict-banner .button{width:100%}}
.bhph-register-tabs{margin-bottom:10px}
.bhph-register-search{grid-template-columns:minmax(280px,1fr) auto;align-items:end}
@media(max-width:760px){.bhph-register-search{grid-template-columns:1fr}.bhph-register-search .sales-filter-actions{grid-column:auto}}
.sold-summary-panel{margin-bottom:10px}
.sold-sales-filter-bar{margin-bottom:10px}
.sold-sales-table-wrap{min-height:360px}

/* Partner status and overview variants (restored; the base .status and .system-overview-card rules are ours). */
.status.attention{color:var(--amber);background:var(--ambersoft)}
.system-overview-card.security .system-overview-icon{color:var(--blue);background:var(--bluesoft)}

/* The owner's recovery key for a new computer (web/recovery-key.js). */
.recovery-key-card{display:grid;gap:10px}
.recovery-key-warning{margin:0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
.recovery-key-note{margin:0;padding:10px 12px;border-radius:var(--r-surface);background:var(--ambersoft);color:var(--ink);font-size:var(--fs-small);line-height:var(--lh-small)}
/* First run, "Signed up online?" (web/security-setup.js, launcher/owner_account.go): the licence brings the sign-in chosen at sign-up. */
.ss-signed-up{margin:0 0 20px;padding:16px 18px;border:1px solid var(--accent,#245f9f);border-radius:var(--r-surface);background:var(--bluesoft,#e8f1fb)}.ss-signed-up h3{margin:0 0 8px;color:var(--navy,#102b4e);font-size:var(--fs-h3);line-height:var(--lh-h3)}.ss-list{margin:0 0 12px;padding-left:20px;font-size:var(--fs-small);line-height:var(--lh-small)}.ss-id{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 4px}.ss-id code{font-family:var(--font-code);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;letter-spacing:.04em;color:var(--navy,#102b4e);word-break:break-all}.ss-field textarea{width:100%;padding:10px 12px;border:1px solid var(--line,#d8e0ea);border-radius:var(--r-control);background:var(--surface,#fff);color:inherit;font-family:var(--font-code);font-size:var(--fs-small);line-height:var(--lh-small);resize:vertical}.ss-or{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line,#d8e0ea);color:var(--muted,#627087);font-size:var(--fs-small);line-height:var(--lh-small)}

/* The plain-English note under locked New/MSRP fields and above a completed sale that stays with its car (web/vehicle-terms.js). */
.vehicle-terms-note{grid-column:1/-1;margin:0}
.sw-deal-car-locked{margin:0 0 12px}