/* Customer Online Access — "Operations Console" theme (design option D).
   Light is the default; [data-theme="dark"] on <html> switches (set before paint by the inline
   script in views/top.cfm). Without JS, the OS preference decides. */

:root{
	--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
	--r:6px; --card-r:8px;
	--bg:#f5f6f8; --ink:#1d2330; --muted:#646d7e; --line:#e2e5eb; --card:#fff; --field:#fff; --th:#f8f9fb;
	--shadow:0 1px 2px rgba(16,24,40,.05);
	--bar:#fff; --bar-ink:#1d2330; --bar-muted:#646d7e;
	--side:#1d2330; --side-ink:#e7eaf0; --side-muted:#9aa3b5; --side-on:#2c3446; --side-line:#2a3142;
	--primary:#4f46e5; --primary-hover:#4338ca; --primary-ink:#fff; --link:#4f46e5; --focus:rgba(79,70,229,.35);
	--ok:#067647; --ok-bg:#ecfdf3; --err:#b42318; --err-bg:#fef3f2; --warn:#b54708; --warn-bg:#fffaeb; --pill-bg:#e0e7ff; --pill-ink:#3730a3;
	--p-open-bg:#eef2ff; --p-open:#4338ca; --p-void-bg:#f2f4f7; --p-void:#646d7e;
	color-scheme:light;
}
:root[data-theme="dark"]{
	--bg:#0d1017; --ink:#e7eaf0; --muted:#9aa3b5; --line:#232a38; --card:#141822; --field:#0d1017; --th:#171c27;
	--shadow:none;
	--bar:#141822; --bar-ink:#e7eaf0; --bar-muted:#9aa3b5;
	--side:#0a0d13; --side-ink:#e7eaf0; --side-muted:#8590a4; --side-on:#1a2030; --side-line:#1a2030;
	--primary:#6d66f0; --primary-hover:#827cf3; --primary-ink:#fff; --link:#9a94ff; --focus:rgba(109,102,240,.45);
	--ok:#6ee7a6; --ok-bg:#0d2e1f; --err:#f97066; --err-bg:#2c1513; --warn:#fdb022; --warn-bg:#2b1d05; --pill-bg:#272a5c; --pill-ink:#c7d2fe;
	--p-open-bg:#232055; --p-open:#b4b0ff; --p-void-bg:#1e2433; --p-void:#9aa3b5;
	color-scheme:dark;
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme]){
		--bg:#0d1017; --ink:#e7eaf0; --muted:#9aa3b5; --line:#232a38; --card:#141822; --field:#0d1017; --th:#171c27;
		--shadow:none; --bar:#141822; --bar-ink:#e7eaf0; --bar-muted:#9aa3b5;
		--side:#0a0d13; --side-ink:#e7eaf0; --side-muted:#8590a4; --side-on:#1a2030; --side-line:#1a2030;
		--primary:#6d66f0; --primary-hover:#827cf3; --link:#9a94ff;
		--ok:#6ee7a6; --ok-bg:#0d2e1f; --err:#f97066; --err-bg:#2c1513; --pill-bg:#272a5c; --pill-ink:#c7d2fe;
		--p-open-bg:#232055; --p-open:#b4b0ff; --p-void-bg:#1e2433; --p-void:#9aa3b5;
		color-scheme:dark;
	}
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:13px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.shell.plain{grid-template-columns:1fr}
.side{background:var(--side);color:var(--side-ink);padding:14px 10px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;line-height:1.2;color:inherit}
.brand:hover{text-decoration:none}
.mark{flex:0 0 28px;width:28px;height:28px;border-radius:7px;display:block}
.side .brand{padding:4px 8px 18px}
.side nav a{display:flex;align-items:center;gap:10px;color:var(--side-muted);padding:7px 10px;border-radius:6px;margin-bottom:2px;font-weight:500}
.side nav a:hover{color:var(--side-ink);background:var(--side-on);text-decoration:none}
.side nav a.on{background:var(--side-on);color:var(--side-ink)}
.side nav svg{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.side .sect{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--side-muted);padding:16px 10px 6px}
.side .dealer{margin:0 8px 8px;padding:8px 10px;border:1px solid var(--side-line);border-radius:6px;font-size:12px;color:var(--side-muted)}
.side .dealer b{display:block;color:var(--side-ink);font-weight:500;font-size:13px}

.topbar{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .crumbs{flex:1;min-width:0;color:var(--bar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumbs b{color:var(--bar-ink);font-weight:500}
.topbar .who{color:var(--bar-muted);white-space:nowrap}
.topbar form{margin:0}
.iconbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--bar-ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;flex:0 0 auto}
.iconbtn:hover{background:var(--th)}
.iconbtn svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
.linkbtn{background:none;border:0;color:var(--bar-muted);font:inherit;cursor:pointer;padding:6px 4px}
.linkbtn:hover{color:var(--bar-ink)}
.menu-btn{display:none}
.scrim{display:none}
.content{min-width:0}

main{padding:24px 24px 48px;max-width:1200px;width:100%}
.plain main{max-width:560px;margin:0 auto;padding-top:32px}
.plain.wide main{max-width:960px;padding-top:20px}
.plain .topbar .brand{flex:1}

/* sign-in pages: the quiet staff link (customer page) and the customer link (desk page) */
.staff-link{position:fixed;left:10px;bottom:10px;display:grid;place-items:center;width:28px;height:28px;color:var(--muted);opacity:.45}
.staff-link svg{width:16px;height:16px}
.staff-link:hover{opacity:1}
.switch-link{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink);text-decoration:none}
.switch-link:hover{text-decoration:none;border-color:var(--primary)}
.switch-link strong{display:block;font-size:15px}
.switch-link .muted{font-size:13px}
.switch-link .go{color:var(--primary);font-weight:600;white-space:nowrap}

/* "view as customer" banner */
.previewbar{position:sticky;top:52px;z-index:19;display:flex;align-items:center;gap:12px;padding:8px 16px;background:#f59e0b;color:#1f1300;font-size:14px}
.previewbar span{flex:1;min-width:0}
.previewbar .btn{height:32px;background:#1f1300;border-color:#1f1300;color:#fff}

/* page loading indicator (htmx) */
.loadbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--primary);z-index:100;opacity:0;transition:width .4s ease,opacity .2s}
.htmx-request .loadbar,.loadbar.htmx-request{opacity:1;width:70%}

/* ---------- page parts ---------- */
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h1{margin:0;flex:1 1 auto;font-size:20px;font-weight:600;letter-spacing:-.01em}
.pagehead .sub{color:var(--muted);font-weight:400}
.back{display:inline-block;color:var(--muted);margin-bottom:6px;font-size:13px}
h1{font-size:20px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
h2{font-size:14px;font-weight:600;margin:0 0 8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.card > h2:first-child{margin:-16px -16px 14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
.card.flush{padding:0}
.card.flush > h2:first-child{margin:0}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.grid > *{min-width:0}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > div{flex:1 1 160px;min-width:0}
.stack > * + *{margin-top:16px}
.muted{color:var(--muted)}
.small{font-size:13px}
.err{color:var(--err)}
.ok{color:var(--ok)}

/* ---------- tables ---------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);padding:9px 12px;background:var(--th);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.card .scroll{margin:0 -4px}
.card.flush > h2:first-child{margin:0}
.card.flush > p{padding:0 16px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.code{font-family:var(--mono);font-size:13px;white-space:nowrap}
tr.total td,tr.total th{font-weight:600;background:var(--th)}
tr.inactive td{color:var(--muted)}
td input,td select{height:32px;padding:0 8px;font-size:13px}

dl.kv{margin:0}
dl.kv div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
dl.kv div:last-child{border-bottom:0}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
dl.kv div.total{font-weight:600}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pill.open{background:var(--p-open-bg);color:var(--p-open)}
.pill.signed,.pill.billable{background:var(--ok-bg);color:var(--ok)}
.pill.void,.pill.inactive{background:var(--p-void-bg);color:var(--p-void)}

/* ---------- forms ---------- */
label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:12px 0 4px}
label.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:400}
label.check input{width:auto;height:auto}
input,select,textarea{width:100%;height:36px;padding:0 10px;font:inherit;font-size:14px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:var(--r)}
textarea{height:auto;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary)}
input.code{height:52px;letter-spacing:.35em;font-size:24px;text-align:center;font-family:var(--mono)}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--primary);background:var(--primary);color:var(--primary-ink);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none}
.btn.secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--th)}
.btn.block{width:100%}
.btn[disabled],.htmx-request .btn[type="submit"]{opacity:.6;pointer-events:none}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
form > .btn,form > a.btn{margin-top:16px}
form.inline > .btn{margin-top:0}
form.inline{display:flex;gap:8px}
form.inline input{min-width:0}

.flash{padding:10px 12px;border-radius:var(--r);margin-bottom:16px;background:var(--ok-bg);color:var(--ok);border:1px solid transparent}
.flash.err{background:var(--err-bg);color:var(--err)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}

/* ---------- drop zone ---------- */
.dropzone{margin:0;padding:12px 16px 16px}
.dropzone-target{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:18px 12px;border:1.5px dashed var(--line);border-radius:var(--card-r);color:var(--ink);font-size:14px;font-weight:400;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone-target:hover,.dropzone.over .dropzone-target{border-color:var(--primary);background:var(--p-open-bg)}
.dropzone.htmx-request .dropzone-target{opacity:.6}
button.linkbtn.err{color:var(--err)}

/* ---------- signing ---------- */
.sigpad{position:relative;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sigpad canvas{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair}
.sigpad::after{content:"";position:absolute;left:16px;right:16px;bottom:36px;border-bottom:1px solid #d0d5dd;pointer-events:none}
.sigpad [data-sig-clear]{position:absolute;top:4px;right:6px;color:#646d7e}
.signform label.check{align-items:flex-start;margin-top:10px}
.signform label.check input{margin-top:2px;flex:0 0 auto}
.signform details summary{cursor:pointer;color:var(--link)}

/* ---------- document viewer ---------- */
.viewer{display:flex;flex-direction:column;align-items:center;gap:18px}
.viewer .pg{margin:0;width:100%;max-width:880px}
.viewer .pg img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 10px rgba(16,24,40,.12)}
.viewer .pg figcaption{text-align:center;font-size:12px;color:var(--muted);margin-top:6px}
.viewer.actual .pg{max-width:none;width:auto}
.viewer.actual .pg img{width:auto;max-width:none}
.viewer.actual{align-items:flex-start;overflow-x:auto}

/* ---------- message previews ---------- */
.bubble-prev{display:inline-block;max-width:100%;background:#e9e9eb;color:#111;border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:14px;white-space:pre-wrap}
.mail-prev{margin-top:12px;border-left:3px solid var(--line);padding-left:10px;font-size:13px}
.mail-prev div{margin-top:4px}

/* on-screen signing (claim.cfm, assets/esign.js) */
.es-bar{position:sticky;top:52px;z-index:10;display:flex;align-items:center;gap:8px;padding:10px 0;background:var(--bg)}
.es-bar form{margin:0}
.es-bar form > .btn{margin-top:0}
.pagehead form > .btn{margin-top:0}
.es-bar [hidden]{display:none}
.es-status{flex:1;min-width:0;font-weight:500}
.es-help{margin:0 0 10px}
.topbar[hidden]{display:none}
.bare .es-bar{top:0}
.bare main{padding-top:8px}
.es-page{position:relative;width:100%;max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(16,24,40,.12)}
.es-page img{display:block;width:100%;height:auto}
.es-target{position:absolute;display:grid;place-items:center;padding:0;border:2px dashed #f59e0b;background:rgba(253,230,138,.45);border-radius:4px;color:#7a4b00;font:600 clamp(7px,1.5vw,13px)/1 Inter,system-ui,sans-serif;cursor:pointer}
.es-target::before{content:"";position:absolute;inset:-6px -4px}	/* a bigger touch area than the box */
.es-target.next{border-style:solid;box-shadow:0 0 0 4px rgba(245,158,11,.35);animation:es-glow 1.6s ease-in-out infinite}
.es-target.placed{border:1px solid rgba(79,70,229,.35);background:rgba(79,70,229,.06);animation:none;box-shadow:none}
.es-target.placed{overflow:hidden}
.es-target img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;display:block}
.es-date{position:absolute;display:flex;align-items:flex-end;padding:0 0 3% 2%;font:clamp(8px,1.6vw,16px)/1 Helvetica,Arial,sans-serif;color:#111;pointer-events:none}
.es-date[hidden]{display:none}
.es-target.pulse{transform:scale(1.06);transition:transform .2s}
@keyframes es-glow{50%{box-shadow:0 0 0 8px rgba(245,158,11,.15)}}
@media (prefers-reduced-motion:reduce){.es-target.next{animation:none}}
.es-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:12px}
.es-modal[hidden]{display:none}
.es-confirm{max-width:520px}
.es-confirm [data-when=edit]{display:none}
.es-confirm.editing [data-when=edit]{display:block}
.es-confirm.editing button[data-when=edit]{display:inline-flex}
.es-confirm.editing [data-when=view]{display:none}
.es-modal[hidden]{display:none}
.es-confirm .kv{margin:0 0 4px}
.es-sheet{width:min(860px,94vw);background:var(--card);border-radius:12px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.es-title{font-weight:600;font-size:16px;margin-bottom:10px}
.es-pad{display:block;width:100%;height:min(46vh,300px);background:#fff;border:1px solid var(--line);border-radius:8px;touch-action:none}
.es-pad.initials{height:min(34vh,200px)}
.es-consent{margin:8px 0 0}
.es-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.es-actions .btn{height:44px}
body.es-noscroll{overflow:hidden}

/* the customer's pass (pass.cfm): a ticket */
.pass{max-width:400px;margin:8px auto 16px;border-radius:18px;overflow:hidden;background:#fff;color:#1d2330;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid #d0d5dd}
.pass-band{display:flex;align-items:center;gap:8px;background:#111;color:#fff;padding:12px 16px;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pass-band img{width:22px;height:22px;border-radius:5px}
.pass-body{padding:16px 18px 12px}
.pass-title{font-size:20px;font-weight:700;margin-bottom:12px}
.pass-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.pass .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#667085}
.pass .v{font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.2}
.pass .v.mono{font-family:var(--mono);text-transform:none}
.pass-tear{position:relative;height:0;border-top:2px dashed #d0d5dd;margin:6px 0}
.pass-tear::before,.pass-tear::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.pass-tear::before{left:-12px}.pass-tear::after{right:-12px}
.pass-foot{display:flex;align-items:center;gap:16px;padding:14px 18px 18px}
.pass-qr{width:130px;height:130px;flex:0 0 130px;image-rendering:pixelated}
.pass .muted{color:#667085}
.pass-actions{max-width:400px;margin:0 auto}


.voidbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.voidbar span{flex:1;min-width:0}
.merge{border:1px solid var(--warn);background:var(--warn-bg);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.merge p{margin:0 0 8px}
.mergepick{width:100%;border-collapse:collapse;margin:4px 0 8px;background:var(--card);border-radius:6px}
.mergepick th{text-align:left;font-size:12px;color:var(--muted);font-weight:500;padding:6px 8px}
.mergepick td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:top}
.mergepick .check{margin:0}
.merge form{margin:0}
details.paper{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
details.paper summary{cursor:pointer;color:var(--link);font-weight:500}

/* header dropdown (deal page: Pass) */
.dropdown{position:relative}
.dropdown > summary{list-style:none}
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown summary svg{width:16px;height:16px}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.18);padding:6px}
.dropdown-menu form{margin:0}
.dropdown-menu button,.dropdown-menu a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;border:0;background:none;border-radius:6px;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none}
.dropdown-menu button:hover,.dropdown-menu a:hover{background:var(--th);text-decoration:none}
.dropdown-menu button[disabled]{opacity:.5;cursor:default}
.btn.block svg{width:16px;height:16px}

/* tabs (dealership settings, deal page) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 16px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:9px 14px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--primary)}

/* install steps (desk extension) */
.steps{margin-top:14px;font-size:14px}
.warn-text{color:var(--warn);font-weight:500}
.steps summary{cursor:pointer;color:var(--link);font-weight:500}
.steps ol{margin:8px 0 0;padding-left:20px;line-height:1.7}

/* ---------- desk home and contracts ---------- */
.searchbar{display:flex;gap:8px;margin-bottom:16px}
.searchbar input{height:44px;font-size:15px;margin:0}
.searchbar .btn{height:44px;margin:0}
.filters input,.filters select,.filters .btn{margin:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);color:var(--ink);text-decoration:none}
.tile:hover{border-color:var(--primary);text-decoration:none}
.tile b{font-size:24px;font-weight:600}
.tile span{color:var(--muted);font-size:13px}
.tile.warn b{color:var(--warn)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters input[name=q]{flex:1 1 240px;width:auto}
.filters select{width:auto}
.filters .check{margin:0}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

/* ---------- message wording editor ---------- */
.tpl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.tpl-dir{position:sticky;top:68px}
.tpl-dir ul{list-style:none;margin:0;padding:0}
.tpl-dir li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 0;border-top:1px solid var(--line)}
.tpl-dir li:first-child{border-top:0}
.tpl-pill{display:inline-block;font:inherit;font-size:12px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;border:0;background:var(--pill-bg);color:var(--pill-ink);cursor:pointer}
span.tpl-pill{cursor:default}
button.tpl-pill:hover{filter:brightness(.95)}
.tpl-eg{color:var(--ink)}
.tpl{margin-top:14px}
.tpl-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tpl-top label{margin:0 0 4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;padding:2px;margin-bottom:4px;background:var(--th)}
.seg button{border:0;background:transparent;font:inherit;font-size:12px;padding:3px 10px;border-radius:5px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* the field's text is transparent; .tpl-hl underneath draws the same text with pills */
.tpl-box{position:relative;background:var(--field);border-radius:var(--r)}
.tpl-box[hidden]{display:none}
.tpl-hl,.tpl-box textarea,.tpl-box input{font:inherit;font-size:14px;line-height:1.5;letter-spacing:normal;padding:8px 10px;border:1px solid transparent;margin:0}
.tpl-hl{position:absolute;inset:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;color:var(--ink);pointer-events:none}
.tpl-hl.single{white-space:pre;overflow-wrap:normal}
.tpl-box textarea,.tpl-box input{position:relative;display:block;width:100%;background:transparent;color:transparent;caret-color:var(--ink);border-color:var(--line);resize:none;overflow:hidden}
.tpl-box input{height:auto}
.tpl-box textarea::selection,.tpl-box input::selection{background:var(--focus);color:transparent}
.tpl-hl mark{background:var(--pill-bg);color:var(--pill-ink);border-radius:5px;box-shadow:0 0 0 2px var(--pill-bg)}
.tpl-hl mark.bad{background:var(--err-bg);color:var(--err);box-shadow:0 0 0 2px var(--err-bg)}
.tpl-prev{padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r);font-size:14px;line-height:1.5}
.tpl-prev.bubble-prev{display:block;border:0;width:fit-content;max-width:420px}
.tpl-prev.mail-subject{font-weight:600}
.tpl-prev mark{background:var(--err-bg);color:var(--err);border-radius:4px}
.tpl-filled{background:var(--pill-bg);border-radius:4px}
.tpl-prev.bubble-prev .tpl-filled{background:rgba(79,70,229,.15)}
.tpl-meta{margin-top:4px}

/* ---------- customer-facing ---------- */
/* customer documents: one folding card per vehicle, rows sized for thumbs */
.dealcard{background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.dealcard > summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none;min-height:72px}
.dealcard > summary::-webkit-details-marker{display:none}
.dealcard.single > summary{cursor:default;pointer-events:none}
.dealcard .car{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--th);color:var(--primary)}
.dealcard .car svg{width:24px;height:24px}
.dc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dc-txt strong{font-size:17px;font-weight:600}
.dc-txt .muted{font-size:14px}
.dealcard .fold svg{width:20px;height:20px;color:var(--muted);transition:transform .15s}
.dealcard[open] .fold svg{transform:rotate(90deg)}
.dc-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px 12px;font-size:14px}
.dc-card a{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.dc-card svg{width:18px;height:18px}
.dc-card form{margin:0}
.dc-card .linkbtn{color:var(--link);font-weight:500}
.dc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 14px}
.btn.big{height:48px;font-size:15px;border-radius:12px;padding:0 16px}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doclist li + li{border-top:1px solid var(--line)}
.doclist a{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:68px;color:var(--ink);text-decoration:none}
.doclist a:hover,.doclist a:active{background:var(--th);text-decoration:none}
.doclist .ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--th);color:var(--muted)}
.doclist .ic svg{width:22px;height:22px}
.doclist .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doclist .t strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.doclist .t .muted{font-size:13px}
.doclist .chev svg,.docnav svg{width:20px;height:20px;color:var(--muted)}
.dc-empty{padding:0 18px 16px;margin:0}
.dc-foot{padding:12px 18px;margin:0;border-top:1px solid var(--line);font-size:14px}

/* viewer: document strip (view all), section headings, previous / next */
.docjump{position:sticky;top:52px;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:10px 0;margin-bottom:8px;background:var(--bg);scrollbar-width:none}
.docjump a{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;white-space:nowrap;text-decoration:none}
.docsec{width:100%;max-width:880px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;scroll-margin-top:110px}
.docsec h2{margin:0;font-size:16px}
.docnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:880px;margin:24px auto 8px}
.docnav .btn{height:auto;min-height:56px;justify-content:flex-start;white-space:normal;text-align:left}
.docnav .btn.next{justify-content:flex-end;text-align:right;grid-column:2}
.docnav small{display:block;font-size:12px;color:var(--muted);font-weight:400}

td.mv{width:1%;white-space:nowrap;padding-right:0}
td.mv form{display:flex;flex-direction:column;gap:2px;margin:0}
td.mv .iconbtn{width:26px;height:22px;border-radius:5px}
td.mv .iconbtn svg{width:14px;height:14px}
td.mv .iconbtn[disabled]{opacity:.3;cursor:default}
.setlist{list-style:none;margin:0;padding:0}
.plainset{border:0;margin:0;padding:0;min-width:0}
.plainset:disabled input{opacity:.6;cursor:not-allowed}
.setlist li{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:64px}
.setlist li + li{border-top:1px solid var(--line)}
.setlist .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.setlist .t strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.setlist li.setform{display:block;background:var(--th)}
.setlist form{margin:0}

ul.docs{list-style:none;padding:0;margin:0}
ul.docs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
ul.docs li:first-child{border-top:0}
.qrbox{display:inline-block;padding:12px;background:#fff;border-radius:8px;border:1px solid var(--line);margin:4px 0 8px}
.center{text-align:center}

/* ---------- phones ---------- */
@media (max-width:860px){
	.shell{grid-template-columns:1fr}
	.side{position:fixed;inset:0 auto 0 0;width:240px;z-index:50;transform:translateX(-100%);transition:transform .2s ease}
	.side-open .side{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.25)}
	.side-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
	.menu-btn{display:inline-grid}
	.grid{grid-template-columns:1fr}
	main{padding:16px 16px 40px}
	.topbar{padding:0 12px}
	.topbar .who{display:none}
	.tpl-layout{grid-template-columns:1fr}
	.tiles{grid-template-columns:1fr}
	.tpl-dir{position:static;order:-1}
	.plain main{padding:16px 12px 40px}
	.dc-actions{grid-template-columns:1fr}
	.viewer-head .btn{flex:1}
}

/* ---------- forms library + designer (desk/admin/forms.cfm, form.cfm) ---------- */
.forms-table td{vertical-align:middle}
.forms-table td.right{text-align:right}
.inline-form{display:inline;margin:0}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
button.pkg{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:3px 10px 3px 4px;font:inherit;font-size:12px;cursor:pointer}
button.pkg i{width:26px;height:16px;border-radius:999px;background:var(--line);position:relative;transition:background .15s}
button.pkg i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s}
button.pkg.on{color:var(--ink);border-color:var(--primary)}
button.pkg.on i{background:var(--primary)}
button.pkg.on i::after{left:12px}
button.pkg[disabled]{opacity:.5;cursor:default}
main:has(.fd){max-width:none}
.fd-bar{position:sticky;top:52px;z-index:6;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;margin:-8px 0 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.fd-bar .iconbtn{color:var(--ink)}
.fd-name{flex:1 1 220px;max-width:420px;height:36px;font-weight:600;font-size:16px}
.fd-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.fd-actions .btn svg{flex:0 0 auto}
.fd-main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.fd-pages{display:flex;flex-direction:column;gap:18px;min-width:0}
.fd-pagewrap{max-width:900px;width:100%;margin:0 auto}
.fd-pnum{margin:0 0 4px}
.fd-page{position:relative;width:100%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(16,24,40,.12);user-select:none;-webkit-user-select:none}
.fd-page img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fd-layer{position:absolute;inset:0;touch-action:none}
.fd.placing .fd-layer{cursor:crosshair}
.fd-box{position:absolute;box-sizing:border-box;border:1.5px solid;border-radius:3px;cursor:move;overflow:hidden;display:flex;align-items:center}
.fd-box span{font:500 10px/1.1 Inter,system-ui,sans-serif;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.fd-box.k-sig{border-color:#4f46e5;background:rgba(79,70,229,.10);color:#3730a3}
.fd-box.k-data{border-color:#059669;background:rgba(5,150,105,.10);color:#065f46}
.fd-box.k-desk{border-color:#d97706;background:rgba(217,119,6,.12);color:#92400e}
.fd-box.k-text{border-color:#64748b;background:rgba(100,116,139,.10);color:#334155}
.fd-box.review{border-style:dashed}
.fd-box.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary);z-index:2}
.fd-h{position:absolute;right:0;bottom:0;width:9px;height:9px;background:currentColor;cursor:nwse-resize;opacity:0}
.fd-box.sel .fd-h,.fd-box:hover .fd-h{opacity:.8}
.fd-ghost{position:absolute;border:1.5px dashed var(--primary);background:rgba(79,70,229,.08);pointer-events:none}
.fd-side{position:sticky;top:124px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 140px);overflow:auto}
.fd-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--card-r);padding:12px 14px;box-shadow:var(--shadow)}
.fd-panel h3{margin:0 0 4px;font-size:14px}
.fd-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fd-group{grid-column:1/-1;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:6px}
.fd-tool{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;padding:6px 8px;font:inherit;font-size:12px;text-align:left;cursor:pointer;border-left:3px solid}
.fd-tool.t-sig{border-left-color:#4f46e5}.fd-tool.t-data{border-left-color:#059669}.fd-tool.t-desk{border-left-color:#d97706}.fd-tool.t-text{border-left-color:#64748b}
.fd-tool.on{background:var(--primary);border-color:var(--primary);color:#fff}
.fd-edhead{display:flex;align-items:center;justify-content:space-between}
.fd-edhead .linkbtn.err{color:var(--err)}
.fd-review{margin:6px 0 2px;padding:6px 8px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:12px}
.fd-review .linkbtn{color:var(--link);font-weight:600;padding:0 2px;font-size:12px}
.fd-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fd-legend div{display:flex;align-items:center;gap:8px;margin:3px 0}
.fd-legend .sw{width:14px;height:10px;border:1.5px solid;border-radius:2px;flex:0 0 auto}
.fd-legend .sw.t-sig{border-color:#4f46e5;background:rgba(79,70,229,.1)}.fd-legend .sw.t-data{border-color:#059669;background:rgba(5,150,105,.1)}
.fd-legend .sw.t-desk{border-color:#d97706;background:rgba(217,119,6,.12)}.fd-legend .sw.review{border-style:dashed;border-color:var(--muted)}
@media (max-width:900px){.fd-main{grid-template-columns:1fr}.fd-side{position:static;max-height:none;order:-1}}
.fd [hidden]{display:none !important}
.forms-table td.drag{width:44px;white-space:nowrap;color:var(--muted);cursor:grab}
.forms-table .grip{font-size:15px;margin-right:4px;opacity:.6}
.forms-table .ord{font-size:12px;font-variant-numeric:tabular-nums}
.forms-table tr.dragging{opacity:.45}
.pill.signer.buyer{background:var(--pill-bg);color:var(--pill-ink)}
.pill.signer.cobuyer{background:var(--p-open-bg);color:var(--p-open)}
.pill.signer.dealer{background:var(--warn-bg);color:var(--warn)}
.fd-signers .pill{margin:0 4px 4px 0}
.fd-signers p{margin:6px 0 0}

/* ---------- a deal's forms (views/deal_forms.cfm) and signing them (sign-forms.cfm) ---------- */
.esf-title{max-width:900px;margin:22px auto 8px;font-size:16px}
.esf-page{margin-bottom:14px}
.dforms-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.dforms-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.dform{border:1px solid var(--line);border-radius:var(--card-r);background:var(--card);padding:10px 12px}
.dform.dragging{opacity:.45}
.dform-head{display:flex;align-items:center;gap:10px}
.dform-head .grip{cursor:grab;color:var(--muted);font-size:15px}
.dform-name{flex:1;min-width:0}
.dform-signers{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.pill.signer.done{background:var(--ok-bg);color:var(--ok)}
.dform-wait{margin:4px 0 0 25px}
.dform-desk{margin:8px 0 0 25px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;align-items:end}
.dform-desk label{margin:4px 0 0}
.dform-desk .btn,.dform-desk>span{justify-self:start}
.dforms-add{display:flex;gap:8px;max-width:520px;margin:0 0 12px}
.dforms-co label{max-width:520px}
.dforms-co-row{display:flex;gap:8px}
.dforms-sign{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.dforms-sign h3{margin:0 0 4px}
.dforms-btns{display:flex;gap:8px;flex-wrap:wrap}
.dforms-phone{margin-top:12px}
.dforms-qr{display:flex;gap:14px;align-items:flex-start;margin-top:10px}
.dforms-qr img{border:1px solid var(--line);border-radius:8px;background:#fff;padding:4px}
.dforms-qr>div{flex:1;min-width:0}
.dforms-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,2fr);gap:20px;align-items:start}
.dforms-cols h3{margin:0 0 4px}
@media (max-width:760px){.dforms-cols{grid-template-columns:1fr}}
.dform.fixed{background:var(--th)}
.dforms-lib{display:flex;flex-direction:column;gap:6px}
.dforms-lib form{margin:0}
.libitem{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.libitem:hover{border-color:var(--primary)}
.libitem .chk{width:18px;height:18px;flex:0 0 auto;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff}
.libitem.on .chk{background:var(--primary);border-color:var(--primary)}
.libitem[disabled]{opacity:.6;cursor:default}
.dforms-search{margin:0 0 8px}
.dforms-lib form[hidden]{display:none}

/* ---------- the signing hub (sign-hub.cfm, the dealership's iPad) ---------- */
.hub-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hub-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);min-height:72px}
a.hub-row:hover{border-color:var(--primary);text-decoration:none}
.hub-row.done{opacity:.75}
.hub-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:#4f46e5;flex:0 0 auto}
.hub-av.cobuyer{background:#0e9384}.hub-av.dealer{background:#b54708}
.hub-who{flex:1;min-width:0;display:flex;flex-direction:column;font-size:17px}
.hub-go{font-size:28px;color:var(--muted);line-height:1}
.hub-close{margin-top:24px}
.es-target.check.placed{display:grid;place-items:center}
.es-tick{font-size:clamp(16px,3vw,30px);color:#00205c;line-height:1}

/* Scans (desk/scans.cfm) */
.navcount{margin-left:auto;background:#f79009;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.scanpart{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.scan-thumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.scan-thumbs img{width:92px;height:auto;border:1px solid var(--line, #d0d5dd);border-radius:6px;background:#fff;display:block}
.scan-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.scan-assign{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.scan-assign input{flex:1;min-width:140px;max-width:220px}

/* Copiers (desk/admin/copiers.cfm, copier.cfm) */
.copiers td.right{text-align:right}
.nowrap{white-space:nowrap}
.copier-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.copiers form > .btn,.copier-add > .btn{margin-top:0}
.copiers td.right form + form{margin-left:6px}
.copier-add input{flex:1;min-width:200px;max-width:360px}
.copier-values{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0}
.copier-values dt{color:var(--muted)}
.copier-values dd{margin:0;font-family:ui-monospace,Menlo,monospace;user-select:all}