/* AutoRadar. Light, dense, no framework.
   Verdict colour is the only colour that carries meaning: green clean, amber caution,
   red fail. Everything else is grey so those three read at a glance. Car photographs sit
   on white here rather than on near-black, which is why the palette is light: a listing
   thumbnail against a dark panel reads as a hole in the page. */

:root {
  --bg: #ffffff;
  --panel: #f6f7f9;
  --panel-2: #eef1f5;
  --line: #dde2e8;
  --ink: #14181d;
  --ink-dim: #5a6672;
  --ink-faint: #8b96a2;
  --ok: #1c8a4f;
  --caution: #a4700e;
  --fail: #c0392f;
  --link: #1a63c4;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", "Noto Sans Georgian", Roboto, Arial, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 18px 0 4px; }
h2 { font-size: 15px; margin: 22px 0 10px; color: var(--ink-dim); font-weight: 600; }
h3 { font-size: 14px; margin: 0; }

/* ---------------------------------------------------------------- chrome */

.top {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { color: var(--ink); font-weight: 700; letter-spacing: .2px; }
.brand .tag {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.nav { display: flex; gap: 14px; margin-left: auto; }
.nav a, .langs a { color: var(--ink-dim); }
.nav a.on, .langs a.on { color: var(--ink); border-bottom: 2px solid var(--link); }
.langs { display: flex; gap: 6px; align-items: center; }
.langs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.2;
  filter: grayscale(0.7) opacity(0.65);
}
.langs a .code { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.langs a:hover { filter: none; text-decoration: none; background: var(--panel-2); }
.langs a.on {
  filter: none;
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px 60px; }
.lead { color: var(--ink-dim); margin: 4px 0 16px; }
.empty { color: var(--ink-dim); padding: 14px 0; }
.warn {
  background: #fdf3f2;
  border: 1px solid #f0cfcc;
  color: #8f2b23;
  padding: 8px 12px;
  border-radius: var(--radius);
  margin: 14px 0;
}

/* ---------------------------------------------------------------- picker */

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 18px 0;
}
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .4px; }
.fld.pair > div { display: flex; gap: 6px; }
.fld.pair input { width: 100%; }
.fld.actions { justify-content: flex-end; flex-direction: row; align-items: center; gap: 12px; }

select, input, button {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  min-width: 0;
}
select:disabled { color: var(--ink-faint); }
button {
  background: var(--link);
  border-color: var(--link);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 18px;
}
button:hover { filter: brightness(1.1); }
.reset { color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------- slice */

.figures {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--line);
}
.fig { display: flex; flex-direction: column; }
.fig b { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig span { font-size: 12px; color: var(--ink-dim); }
.fig.ok b { color: var(--ok); }
.fig.by-site { margin-left: auto; text-align: right; }
.fig.by-site b { font-size: 12px; font-weight: 500; color: var(--ink-dim); }

/* ---------------------------------------------------------------- cards */

.cards { display: grid; gap: 10px; }
.card {
  display: flex;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.card.is-clean { border-left-color: var(--ok); }
.card.is-caution { border-left-color: var(--caution); }
.card.is-fail { border-left-color: var(--fail); background: #fdf3f2; }
.card .thumb { flex: 0 0 132px; }
.card .thumb img { width: 132px; height: 92px; object-fit: cover; border-radius: 4px; display: block; }
.card .body { flex: 1 1 auto; min-width: 0; }
.card .head { display: flex; align-items: baseline; gap: 10px; }
.card .head h3 a { color: var(--ink); }
.card .site { margin-left: auto; font-size: 11px; color: var(--ink-faint); }

.specs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 5px 0; color: var(--ink-dim); font-size: 12px; }
.specs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.specs .price { color: var(--ink); font-weight: 700; font-size: 15px; }

.ratio { margin: 2px 0; font-size: 12px; color: var(--ink-dim); }
.ratio.good { color: var(--ok); }

/* Landed price. Amber-tinted rather than red: an uncleared car is a normal purchase in
   Georgia, it just costs more than the ad says. The block sits between the asking price and
   the verdict so it is read as part of the price, not as a warning appended afterwards. */
.landed {
  margin: 6px 0;
  padding: 6px 8px;
  border-left: 2px solid var(--caution);
  background: rgba(164, 112, 14, .05);
  border-radius: 0 4px 4px 0;
}
.landed-head { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.landed-price { font-size: 13px; color: var(--ink-dim); }
.landed-price b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.landed-uplift { font-size: 12px; color: var(--caution); }

.landed-parts { list-style: none; margin: 5px 0 0; padding: 0; }
.landed-parts li {
  display: grid;
  grid-template-columns: 150px 76px 1fr;
  gap: 8px;
  padding: 1px 0;
  font-size: 12px;
  color: var(--ink-dim);
}
.landed-parts li .v { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.landed-parts li .r { color: var(--ink-faint); }
.landed-parts li.total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 3px; }
.landed-parts li.total .k, .landed-parts li.total .v { color: var(--ink); font-weight: 700; }

.landed-boundary { margin: 5px 0 0; font-size: 12px; color: var(--caution); }
.landed-estimate, .landed-nocompare {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* On the VIN page the landed price rides inside the price cell of the comparison table. */
.rows .landed-price { display: block; font-size: 11px; font-weight: 400; color: var(--caution); }
.rows .landed-price b { font-size: 12px; color: var(--caution); }

.verdict { margin: 4px 0; font-size: 12px; color: var(--ink-dim); }
.mark {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
}
.mark.ok { background: rgba(28, 138, 79, .12); color: var(--ok); }
.mark.caution { background: rgba(164, 112, 14, .13); color: var(--caution); }
.mark.fail { background: rgba(192, 57, 47, .11); color: var(--fail); }

.checks summary { cursor: pointer; font-size: 12px; color: var(--ink-faint); margin: 4px 0; }
.checks ul { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.checks li {
  display: grid;
  grid-template-columns: 180px 84px 1fr;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.checks li .k { color: var(--ink); }
.checks li .r { color: var(--ink-dim); }
.checks li.v-pass .v { color: var(--ok); }
.checks li.v-caution .v { color: var(--caution); }
.checks li.v-fail .v { color: var(--fail); }
.checks li.v-unknown .v { color: var(--ink-faint); }

.foot { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 11px; }
.flag { color: var(--ink-faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.out { margin-left: auto; }

/* ---------------------------------------------------------------- /me */

.search { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 22px; }
.search h2 { color: var(--ink); font-size: 16px; margin-bottom: 2px; }
.crit { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: 12px; color: var(--ink-faint); }
.flagged { color: var(--fail); margin: 18px 0 8px; font-size: 13px; }
.flagged small { color: var(--ink-faint); font-weight: 400; margin-left: 8px; }

/* ---------------------------------------------------------------- /vin, /link */

.vinform { display: flex; gap: 8px; margin: 12px 0 18px; }
.vinform input { flex: 0 1 320px; letter-spacing: 1.5px; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 18px; margin: 0; }
.kv div { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding: 3px 0; font-size: 12px; }
.kv dt { color: var(--ink-faint); flex: 0 0 46%; text-transform: capitalize; }
.kv dd { margin: 0; color: var(--ink); }

.rows { width: 100%; border-collapse: collapse; font-size: 12px; }
.rows td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rows tr.is-fail td:first-child { box-shadow: inset 2px 0 0 var(--fail); }
.rows tr.is-caution td:first-child { box-shadow: inset 2px 0 0 var(--caution); }
.rows tr.is-clean td:first-child { box-shadow: inset 2px 0 0 var(--ok); }
.rows .price { font-weight: 700; }

.cta {
  display: inline-block;
  background: var(--link);
  color: #ffffff;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius);
}
.cta:hover { text-decoration: none; filter: brightness(1.1); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-faint); }

@media (max-width: 620px) {
  .card { flex-direction: column; }
  .card .thumb, .card .thumb img { width: 100%; flex: none; }
  .checks li { grid-template-columns: 1fr; gap: 0; }
  .fig b { font-size: 24px; }
  .fig.by-site { margin-left: 0; text-align: left; }
}

/* ---------------------------------------------------------------- homepage message */

.hero { max-width: 680px; padding: 26px 0 6px; }
.hero h1 { font-size: 27px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.2px; }
.hero p { margin: 0 0 6px; color: var(--ink-dim); font-size: 15px; }
.hero .cta { margin-top: 12px; }

.proof { margin: 20px 0 0; }
.proof .figures { border-top: 1px solid var(--line); padding-top: 10px; }
.fig.polled { margin-left: 0; }
.fig.polled b { font-size: 12px; font-weight: 500; color: var(--ink-dim); }

/* ---------------------------------------------------------------- the garage */

.garage {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 18px;
}
.g-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.g-add .g-lead { color: var(--ink-dim); font-size: 12px; }
.g-note {
  margin: 10px 0 0;
  color: var(--caution);
  font-size: 12px;
}
.g-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 6px;
  font-size: 12px;
  color: var(--ink-dim);
}
.g-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.g-clear {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}
.g-clear:hover { color: var(--fail); filter: none; }

/* A <form> is a block box and every write here needs its own, so they are made flex items
   rather than allowed to break the row they sit in. */
.chip form, .g-head form { margin: 0; display: flex; align-items: center; }

.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--link);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.chip .g-what { color: var(--ink); font-weight: 600; }
/* The count is the reason the chip exists, so it holds its own column and does not wrap
   into the label on a narrow screen. */
.chip .g-n {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip .g-n b { color: var(--ink); }
.g-x {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  padding: 0 2px;
}
.g-x:hover { color: var(--fail); filter: none; }
.g-kept { margin: 10px 0 0; font-size: 11px; color: var(--ink-faint); }

@media (max-width: 620px) {
  .hero h1 { font-size: 22px; }
  .chip { flex-wrap: wrap; }
  .chip .g-n { margin-left: 0; flex-basis: 100%; white-space: normal; }
}