/* Buy Desk — staff interface.
   Built to be read on a phone in a truck yard: big numbers, high contrast,
   tap targets you can hit with work gloves on. */

:root{
  --paper:#E9E7E2; --panel:#F3F1ED; --ink:#23272C; --ink-soft:#5A626B;
  --rule:#C3BEB5; --rule-hard:#8E877C;
  --go:#1E5C42; --stop:#9E3418; --steel:#4A5560; --warn:#8A6B12;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1A1E22; --panel:#232930; --ink:#E4E2DD; --ink-soft:#9AA3AD;
    --rule:#39414A; --rule-hard:#5D6873;
    --go:#5FBE91; --stop:#E0714B; --steel:#8A97A4; --warn:#D4A93C;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 60px);
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:inherit}

/* ---------------------------------------------------------------- chrome */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:2px solid var(--rule-hard);
  padding-top:env(safe-area-inset-top,0px);
}
.topbar-inner{
  max-width:1160px;margin:0 auto;padding:12px 18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.brand{
  font-family:Oswald,"Arial Narrow",sans-serif;font-weight:500;
  font-size:23px;letter-spacing:.01em;text-decoration:none;line-height:1;
}
.whoami{font-size:13px;color:var(--ink-soft)}
.whoami a{color:var(--ink-soft)}
nav{max-width:1160px;margin:0 auto;padding:0 18px;display:flex;gap:2px;overflow-x:auto}
nav a{
  padding:11px 15px;text-decoration:none;font-size:15px;font-weight:500;
  color:var(--ink-soft);border-bottom:3px solid transparent;white-space:nowrap;
}
nav a.on{color:var(--ink);border-bottom-color:var(--go)}
nav a:hover{color:var(--ink)}
main{max-width:1160px;margin:0 auto;padding:26px 18px 80px}

h1{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(24px,4.4vw,32px);margin:0 0 4px;line-height:1.1}
h2{font-family:Oswald,sans-serif;font-weight:400;font-size:20px;margin:30px 0 12px}
.lede{color:var(--ink-soft);font-size:14.5px;margin:0 0 22px;max-width:70ch}

/* ---------------------------------------------------------- status strip */
.strip{
  display:flex;gap:26px;flex-wrap:wrap;padding:14px 16px;margin-bottom:24px;
  background:var(--panel);border:1px solid var(--rule);border-radius:2px;
}
.strip div{min-width:96px}
.strip .k{font-size:12.5px;color:var(--ink-soft);display:block}
.strip .v{font-family:Oswald,sans-serif;font-size:23px;font-weight:500}
.alert{
  padding:12px 15px;margin-bottom:22px;border-radius:2px;font-size:14.5px;
  border-left:4px solid var(--warn);background:var(--panel);
}
.alert.bad{border-left-color:var(--stop)}

/* -------------------------------------------------------------- controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:22px}
.controls label{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
select,input[type=text],input[type=number],input[type=email],input[type=password]{
  padding:9px 11px;font:inherit;font-size:16px;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-hard);border-radius:2px;min-width:0;
}
input[type=text]{min-width:200px}
button,.btn{
  padding:9px 16px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:2px;text-decoration:none;display:inline-block;
}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--rule-hard);font-weight:400}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px}

/* ----------------------------------------------------------------- cards */
.deal{
  display:grid;gap:0;border:1px solid var(--rule-hard);border-radius:2px;
  background:var(--panel);margin-bottom:14px;overflow:hidden;
}
@media(min-width:760px){.deal{grid-template-columns:1fr 250px}}
.deal-body{padding:16px 18px}
.deal-title{font-size:16.5px;font-weight:600;margin:0 0 6px;line-height:1.3}
.deal-title a{text-decoration:none}
.deal-title a:hover{text-decoration:underline}
.spec{font-size:13.5px;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.bar{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.bar .k{color:var(--ink-soft);display:block;font-size:12.5px}
.bar .v{font-family:Oswald,sans-serif;font-size:18px;font-weight:400}

.deal-verdict{
  padding:16px 18px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:center;
}
@media(min-width:760px){.deal-verdict{border-top:0;border-left:1px solid var(--rule)}}
.deal-verdict .k{font-size:12.5px;color:var(--ink-soft)}
.headroom{font-family:Oswald,sans-serif;font-size:31px;font-weight:600;line-height:1.05;color:var(--go)}
.headroom.neg{color:var(--stop)}
.ceiling{font-size:13.5px;color:var(--ink-soft);margin-top:3px}

.tag{
  display:inline-block;font-size:11.5px;padding:2px 7px;border-radius:2px;
  border:1px solid var(--rule-hard);color:var(--ink-soft);margin-left:6px;
  vertical-align:middle;font-weight:500;
}
.tag.thin{border-color:var(--warn);color:var(--warn)}
.tag.auction{border-color:var(--steel);color:var(--steel)}

/* ---------------------------------------------------------------- tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
th,td{padding:10px 11px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{
  font-family:Oswald,sans-serif;font-weight:400;font-size:13.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--rule-hard);position:sticky;top:0;background:var(--paper);
}
tbody tr:hover{background:var(--panel)}
td.model{font-family:Oswald,sans-serif;font-size:15.5px;font-weight:500}
.neg{color:var(--stop)}
.pos{color:var(--go)}
.soft{color:var(--ink-soft)}

/* -------------------------------------------------------------- auctions */
.sale{
  display:flex;gap:16px;align-items:baseline;padding:15px 16px;
  border:1px solid var(--rule);border-left:4px solid var(--steel);
  border-radius:2px;background:var(--panel);margin-bottom:10px;flex-wrap:wrap;
}
.sale.soon{border-left-color:var(--stop)}
.sale .when{font-family:Oswald,sans-serif;font-size:17px;font-weight:500;min-width:150px}
.sale .what{flex:1 1 260px;font-size:15px}
.sale .meta{font-size:13px;color:var(--ink-soft)}

/* ----------------------------------------------------------------- empty */
.empty{
  padding:44px 24px;text-align:center;border:1px dashed var(--rule-hard);
  border-radius:2px;color:var(--ink-soft);
}
.empty strong{display:block;font-family:Oswald,sans-serif;font-size:19px;
  font-weight:400;color:var(--ink);margin-bottom:6px}

/* ----------------------------------------------------------------- login */
.login{max-width:360px;margin:9vh auto;padding:0 20px}
.login h1{margin-bottom:18px}
.login .field{margin-bottom:14px}
.login input{width:100%}
.login button{width:100%;padding:12px}
.err{color:var(--stop);font-size:14px;margin:0 0 14px}

footer{
  max-width:1160px;margin:0 auto;padding:22px 18px 40px;
  font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--rule);
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------- listing detail */
.summary{
  font-size:14px;line-height:1.55;margin:0 0 12px;
  padding-left:12px;border-left:2px solid var(--rule);color:var(--ink);
}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.flag{
  font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:2px;
  border:1px solid var(--rule-hard);color:var(--ink-soft);background:transparent;
}
.flag.good{border-color:var(--go);color:var(--go)}
.flag.bad{border-color:var(--stop);color:var(--stop)}
.flag.check{border-color:var(--warn);color:var(--warn)}
.hint-note{
  font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;
}
.hint-note strong{color:var(--warn)}
details.raw{margin-top:10px;font-size:13.5px}
details.raw summary{cursor:pointer;color:var(--ink-soft);font-size:13px}
details.raw p{margin:8px 0 0;line-height:1.55;color:var(--ink-soft);max-width:78ch}