/* Sealwheels — Garage identity. All values lifted verbatim from the Claude Design
   mockup (Sealwheels.dc.html, layout 2a "Tiles"). This is presentation only;
   content comes from cars.json via render.js. Do not hardcode car data here. */

:root {
  --bg: #0a0a0b;          /* page behind the column */
  --panel: #0d0e10;       /* the app column */
  --card: #16181c;
  --line: #23262b;
  --lime: #c9fc4e;
  --ink: #f2f3f2;
  --mut: #8b9098;
  --mut2: #7d8189;
  --mut3: #5c6068;
  --mut4: #9aa0a8;
  --field-bg: #0d0e10;
  --field-line: #2a2e34;
  --col: 430px;           /* mobile column width (design was a 390px phone) */
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

/* Centered mobile column — fills the screen on phones, sits centered on desktop. */
.app {
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--panel);
  padding-bottom: 88px; /* clear the fixed bottom CTA */
  position: relative;
  overflow-x: hidden;
}

/* ---- Header ---- */
.head { padding: 18px 20px 16px; }
.brandrow { display: flex; justify-content: space-between; align-items: center; }
.brand {
  font: 800 16px 'Barlow Condensed', sans-serif;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.h1 {
  font: 800 42px/.9 'Barlow Condensed', sans-serif; text-transform: uppercase;
  margin: 20px 0 0; color: var(--ink);
}
.h1 .accent { color: var(--lime); }
.intro { font: 400 13px/1.5 'Barlow', sans-serif; color: var(--mut); margin: 12px 0 0; }
.toplink {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; cursor: pointer;
  background: rgba(201,252,78,.06); border: 1px solid rgba(201,252,78,.28); border-radius: 999px;
  padding: 9px 15px; text-align: left;
  font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .03em; color: var(--ink);
}
.toplink:active { transform: translateY(1px); }
.toplink .arr { color: var(--lime); font-size: 12px; line-height: 1; }

/* ---- List header ---- */
.listhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px 12px;
}
.listhead .lbl {
  font: 700 11px 'Barlow Condensed', sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mut3);
}

/* ---- Search bar (free-text + filter popover) ---- */
.search { margin: 0 16px 14px; position: relative; }
.search-input {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--field-line); border-radius: 12px; padding: 0 6px 0 13px;
}
.search-input:focus-within { border-color: var(--lime); }
.search-ico { flex: none; width: 15px; height: 15px; color: var(--mut2); }
.search-input input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 13px 0;
  font: 500 14px 'Barlow', sans-serif; color: var(--ink);
}
.search-input input::placeholder { color: var(--mut3); }
.search-input input::-webkit-search-cancel-button { -webkit-appearance: none; }
.filter-btn {
  flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: none; border: none; color: var(--mut2);
}
.filter-btn svg { width: 17px; height: 17px; }
.filter-btn:active { transform: translateY(1px); }
.filter-btn.open, .filter-btn.active { color: var(--lime); }
.filter-btn.active::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lime);
}
.search-panel {
  margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.search-panel[hidden] { display: none; }
.search-panel .selwrap { width: 100%; }
.search-panel .fld { width: 100%; font-size: 13px; padding: 11px 14px; appearance: none; }

/* ---- Car list ---- */
.list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.list .state { padding: 24px 4px; font: 500 12px 'JetBrains Mono', monospace; color: var(--mut3); }

.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.card-main { display: flex; align-items: stretch; }

/* Thumbnail (left) — taps out to the video */
.thumb {
  position: relative; flex: none; width: 104px; text-decoration: none;
  overflow: hidden; background: var(--poster, #1c1f24);
}
.thumb:active { opacity: .9; }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-badge {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  font: 700 7px 'JetBrains Mono', monospace; letter-spacing: .1em; color: #fff;
  background: rgba(0,0,0,.42); padding: 3px 5px; border-radius: 4px;
}
.thumb-play-wrap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.thumb-play {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; padding-left: 2px;
}
.thumb-watch {
  position: absolute; bottom: 6px; left: 0; right: 0; z-index: 2; text-align: center;
  font: 700 7px 'JetBrains Mono', monospace; letter-spacing: .12em; color: rgba(255,255,255,.85);
}
.thumb-soon {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0 6px; text-align: center;
}
.thumb-soon-icon {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 11px;
}
.thumb-soon-lbl { font: 700 7px 'JetBrains Mono', monospace; letter-spacing: .1em; color: rgba(255,255,255,.6); }

/* Card body (right) */
.card-body { flex: 1; padding: 13px 15px; min-width: 0; position: relative; }
.car-name {
  font: 700 17px/1.02 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .01em; color: var(--ink);
}
.car-meta { font: 500 11px 'JetBrains Mono', monospace; color: var(--mut2); margin-top: 4px; }
.car-salary { margin-top: 12px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.salary-net { font: 800 34px/.82 'Barlow Condensed', sans-serif; color: var(--lime); }
.salary-unit { font: 500 10px 'JetBrains Mono', monospace; color: var(--mut2); }

/* Listing CTA strip */
.card-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; text-decoration: none; border-top: 1px solid var(--line);
  background: rgba(201,252,78,.05);
}
.card-cta:active { background: rgba(201,252,78,.12); }
.cta-label { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--lime); }
.cta-arrow { font: 700 13px 'Barlow Condensed', sans-serif; color: var(--lime); }

/* Sold stamp — covers the card body only; the thumbnail stays tappable */
.sold-cover {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,14,16,.55);
}
.sold-word {
  font: 800 24px 'Barlow Condensed', sans-serif; letter-spacing: .22em; color: #fff;
  padding: 5px 16px; border: 2px solid #ff4d4d; border-radius: 5px;
  background: rgba(255,77,77,.22); transform: rotate(-7deg);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ---- Primary form: Find me a car ---- */
.find {
  margin: 26px 16px 0; background: var(--card); border: 1px solid var(--lime);
  border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 0 0 4px rgba(201,252,78,.07), 0 24px 44px -22px rgba(201,252,78,.28);
  scroll-margin-top: 14px;
}
.find .eyebrow { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .2em; color: var(--lime); }
.find .title { font: 800 40px/.9 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--ink); margin-top: 10px; }
.find .desc { font: 400 13px/1.5 'Barlow', sans-serif; color: var(--mut); margin-top: 8px; }
.fields { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 18px; }

.fld {
  border: 1px solid var(--field-line); background: var(--field-bg); border-radius: 10px;
  padding: 13px 14px; font: 500 14px 'Barlow', sans-serif; color: var(--ink); outline: none;
}
.fld:focus { border-color: var(--lime); }
.fld.mono { font-family: 'JetBrains Mono', monospace; }
.fld.full { flex: 1 1 100%; }
.fld.half { flex: 1 1 calc(50% - 6px); min-width: 0; }
.selwrap { flex: 1 1 calc(50% - 6px); min-width: 0; position: relative; }
.selwrap.full { flex-basis: 100%; }
.selwrap select { width: 100%; appearance: none; }
.selwrap .caret { position: absolute; right: 12px; top: 16px; pointer-events: none; color: var(--mut2); font-size: 9px; }
textarea.fld { resize: none; font-size: 13px; }

/* Fields with a £ prefix / "miles" suffix that appear once you type */
.unitfield {
  display: flex; align-items: center; gap: 6px; flex: 1 1 calc(50% - 6px); min-width: 0;
  border: 1px solid var(--field-line); background: var(--field-bg); border-radius: 10px; padding: 0 14px;
}
.unitfield:focus-within { border-color: var(--lime); }
.unitfield .unit {
  flex: none; visibility: hidden;
  font: 500 14px 'JetBrains Mono', monospace; color: var(--mut2);
}
.unitfield.filled .unit { visibility: visible; }
.unitfield input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 13px 0;
  font: 500 14px 'JetBrains Mono', monospace; color: var(--ink);
}
.unitfield input::placeholder { color: var(--mut3); }

.submit {
  width: 100%; margin-top: 16px; background: var(--lime); color: #0d0e10; border: none;
  padding: 17px; border-radius: 12px; cursor: pointer;
  font: 800 17px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.submit:active { transform: translateY(1px); }
.reassure { text-align: center; font: 400 10px 'JetBrains Mono', monospace; color: var(--mut3); margin-top: 11px; }

/* Confirmation panel that replaces a form after a successful submit */
.form-done { text-align: center; padding: 20px 6px; }
.form-done-check {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--lime); color: #0d0e10;
  display: flex; align-items: center; justify-content: center;
  font: 800 24px 'Barlow Condensed', sans-serif;
}
.form-done p {
  margin: 0 auto; max-width: 320px;
  font: 500 15px/1.5 'Barlow', sans-serif; color: var(--ink);
}

/* ---- Secondary: Film it next ---- */
.suggest { margin: 22px 20px 0; border-top: 1px solid var(--line); padding-top: 16px; scroll-margin-top: 16px; }
.suggest .eyebrow { font: 600 9px 'JetBrains Mono', monospace; letter-spacing: .16em; color: var(--mut3); }
.suggest .title { font: 700 16px 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--mut4); margin-top: 3px; }
.suggest .row { display: flex; gap: 8px; margin-top: 11px; }
.sfld {
  flex: 1 1 40%; min-width: 0; border: 1px solid var(--line); background: transparent;
  border-radius: 8px; padding: 9px 11px; font: 500 12px 'JetBrains Mono', monospace;
  color: var(--mut4); outline: none;
}
.sfld.name { font-family: 'Barlow', sans-serif; }
.sfld:focus { border-color: var(--mut3); }
.sadd {
  flex: none; background: transparent; border: 1px solid #34383f; color: var(--mut4);
  font: 600 11px 'JetBrains Mono', monospace; padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.sadd:active { transform: translateY(1px); }

/* Inline form feedback */
.form-msg { font: 500 11px 'JetBrains Mono', monospace; margin-top: 10px; min-height: 14px; }
.form-msg.ok { color: var(--lime); }
.form-msg.err { color: #ff6b6b; }
.suggest .form-msg { margin-top: 8px; }

/* ---- Footer ---- */
.foot { padding: 24px 20px 30px; margin-top: 18px; }
.foot .links {
  display: flex; gap: 18px; font: 700 12px 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
}
.foot .links a { color: var(--ink); text-decoration: none; }
.foot .fine { font: 400 10px 'JetBrains Mono', monospace; color: var(--mut3); margin-top: 10px; }

/* ---- Fixed bottom CTA (was the phone's home bar area) ---- */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--col); z-index: 20;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--line);
}
.dock button {
  width: 100%; background: var(--lime); color: #0d0e10; border: none; padding: 16px;
  border-radius: 12px; cursor: pointer;
  font: 800 16px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em;
}
.dock button:active { transform: translateY(1px); }