/* Showpiece Tools: one stylesheet, light only, phone first. */
:root { --ink:#1b1b1b; --muted:#6b6b6b; --line:#e4e1dc; --paper:#fbfaf7; --card:#fff; --accent:#1f3a5f; --accent-ink:#fff; --ok:#1d6b3a; --err:#9b2222; --soft:#f3f1ec; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--ink); background:var(--paper); }
a { color:var(--accent); }
h1 { font-size:28px; line-height:1.15; margin:0 0 12px; letter-spacing:-.01em; }
h2 { font-size:22px; margin:0 0 10px; }
h3 { font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:18px 0 10px; }
h3:first-child { margin-top:0; }
p { margin:0 0 12px; }
code { font:13px ui-monospace,Menlo,monospace; background:var(--soft); padding:1px 5px; border-radius:3px; }
.mono { font-family:ui-monospace,Menlo,monospace; font-size:13px; }
.muted { color:var(--muted); } .small { font-size:13px; } .light { font-weight:400; color:var(--muted); }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
.narrow { max-width:720px; } .narrow.wide { max-width:1040px; }
.top { background:#fff; border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; height:56px; gap:12px; }
.brand { font-weight:600; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:8px; }
.mark { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:var(--accent); color:#fff; font-family:Georgia,serif; }
.nav { display:flex; gap:4px 18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.nav a { color:var(--muted); text-decoration:none; font-size:15px; padding:4px 0; border-bottom:2px solid transparent; }
.nav a.on { color:var(--ink); border-color:var(--accent); }
main { padding:24px 16px 48px; min-height:60vh; }
.foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px 16px 32px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.flash { padding:10px 14px; border-radius:6px; background:#e8f3ec; color:var(--ok); margin-bottom:18px; border:1px solid #cfe5d7; }
.flash.err { background:#fbeaea; color:var(--err); border-color:#efc9c9; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:16px; }
.card.soft { background:var(--soft); border-color:transparent; }
.card.empty { text-align:center; padding:40px 18px; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); padding:9px 16px; border-radius:6px; font:inherit; font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; line-height:1.2; }
.btn:hover { filter:brightness(1.1); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.small { padding:6px 12px; font-size:14px; }
.btn.danger { color:var(--err); border-color:#e5bcbc; }
.link { background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:15px; cursor:pointer; }
.link:hover { color:var(--ink); }
.inline { display:inline; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.head h1 { margin:0; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:6px; }
.hero { padding:32px 0 8px; max-width:720px; }
.hero h1 { font-size:34px; }
.lead { font-size:18px; color:#444; }
.signin { margin-top:22px; }
.signin .row { display:flex; gap:8px; flex-wrap:wrap; }
.signin input[type=email] { flex:1 1 220px; }
.hp { position:absolute; left:-9999px; }
.three { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:28px 0; }
.three h3 { color:var(--ink); text-transform:none; letter-spacing:0; font-size:17px; margin-bottom:4px; }
.why { max-width:720px; }
.prose h3 { color:var(--ink); text-transform:none; letter-spacing:0; font-size:17px; }
.prose ul { padding-left:20px; }
label { display:block; font-size:14px; color:#333; margin-bottom:12px; }
label > span.muted { display:block; margin:-2px 0 4px; }
label.check { display:flex; align-items:center; gap:8px; padding-top:26px; }
input, select, textarea { display:block; width:100%; margin-top:4px; padding:9px 10px; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1px solid #cfcac2; border-radius:6px; }
input[type=checkbox] { width:auto; display:inline; margin:0; }
input[type=color] { height:42px; padding:3px; }
input[type=file] { padding:6px; background:transparent; border-style:dashed; }
input.short { width:90px; display:inline-block; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid #9fb4d0; outline-offset:0; border-color:var(--accent); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; }
.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.stats div { background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:14px; color:var(--muted); }
.stats b { color:var(--ink); font-size:17px; margin-right:4px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filters input, .filters select { margin:0; width:auto; flex:1 1 160px; }
.filters select { flex:0 1 auto; }
.filters .btn { flex:0 0 auto; }
table.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:14px; }
table.list th, table.list td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:var(--soft); }
table.list tr:last-child td { border-bottom:0; }
table.list td.num, table.list th.num { text-align:right; white-space:nowrap; }
table.list td.chk, table.list th.chk { width:28px; padding-right:0; }
table.list td.thumb { width:48px; padding:4px; }
table.list td.thumb img { width:40px; height:40px; object-fit:cover; border-radius:4px; display:block; background:var(--soft); }
table.list tr.sold td { color:var(--muted); }
table.list tr.sold td b { font-weight:500; }
table.list a { color:var(--ink); text-decoration:none; }
table.list a:hover { text-decoration:underline; }
table.list.extra input, table.list.extra select { margin:0; padding:6px 8px; font-size:14px; }
table.list tr.tot td { border-top:2px solid var(--ink); }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:#e8f3ec; color:var(--ok); text-transform:capitalize; }
.tag.sold, .tag.paid { background:#e9ecf2; color:#334; }
.tag.draft { background:var(--soft); color:var(--muted); }
.tag.sent { background:#fff4dd; color:#7a5200; }
.pickbar { display:flex; justify-content:space-between; align-items:center; background:var(--accent); color:#fff; padding:8px 12px; border-radius:6px; margin-bottom:8px; position:sticky; top:8px; z-index:2; }
.pickbar .btn { background:#fff; color:var(--accent); border-color:#fff; }
.hero-photo { max-width:100%; max-height:320px; border-radius:8px; margin-bottom:14px; display:block; }
.total { text-align:right; font-size:17px; margin:12px 0 0; }
.two { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
.preview { width:100%; height:78vh; min-height:520px; border:1px solid var(--line); border-radius:8px; background:#fff; }
details.card summary { cursor:pointer; font-weight:500; }
details.card[open] summary { margin-bottom:12px; }
@media (max-width:760px) {
  h1 { font-size:24px; } .hero h1 { font-size:28px; }
  .grid2, .grid3 { grid-template-columns:1fr; }
  label.check { padding-top:0; }
  .two { grid-template-columns:1fr; }
  .preview { height:60vh; min-height:380px; }
  table.list { display:block; overflow-x:auto; white-space:nowrap; }
  table.list.pick { white-space:normal; }
  .bar { height:auto; padding:10px 0; flex-wrap:wrap; }
}
@media print { .top, .foot, .actions, .flash { display:none; } }

/* the dealer inventory portal (2026-11-05): phone first, big targets */
.portal h1 { font-size:26px; }
.btn.big { padding:13px 20px; font-size:16px; }
.hp { position:absolute; left:-9999px; }
.plist { list-style:none; margin:0 0 16px; padding:0; }
.prow { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.pthumb { flex:0 0 76px; height:76px; border-radius:8px; overflow:hidden; background:var(--soft); display:grid; place-items:center; color:var(--muted); font-size:12px; text-decoration:none; }
.pthumb img { width:100%; height:100%; object-fit:cover; }
.pbody { flex:1; min-width:0; }
.pname { color:var(--ink); text-decoration:none; display:block; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pstate { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--ink); text-decoration:none; }
.tag.ok { background:#e8f3ec; color:var(--ok); } .tag.wait { background:#fff4dc; color:#7a5a00; } .tag.bad { background:#fbeaea; color:var(--err); }
.portal .tag { text-transform:none; }
.noimg { display:grid; place-items:center; text-align:center; font-size:12px; color:var(--muted); background:var(--soft); aspect-ratio:1; border-radius:6px; padding:6px; }
.pthumb .noimg { width:100%; height:100%; aspect-ratio:auto; }
.portal-top .nav a.hide-sm { display:none; } @media (min-width:640px) { .portal-top .nav a.hide-sm { display:inline; } }
.tag.cover { position:absolute; left:6px; top:6px; background:rgba(255,255,255,.92); }
.seg { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:6px; max-width:420px; }
.seg button { flex:1; min-height:44px; border:0; border-right:1px solid var(--line); background:#fff; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; padding:0 8px; }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--accent); color:#fff; } .seg button.on.sold { background:var(--err); }
.seg.big button { min-height:50px; }
.row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .row .grow { flex:1; min-width:180px; }
.card.warn { background:#fff8ec; border-color:#f0dcb4; }
.pgrid { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.pgrid li { position:relative; }
.pgrid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; background:var(--soft); display:block; }
.pbtns { display:flex; gap:4px; margin-top:4px; }
.pbtns button { flex:1; min-height:40px; border:1px solid var(--line); background:#fff; border-radius:6px; font-size:16px; cursor:pointer; }
.portal textarea { width:100%; }