/* ============================================================
   App-only rules.

   Everything else an app page wears comes from site.css,
   forms.css and classifieds.css, linked at the static build's
   own hashed URLs, so app pages share every token, face and
   form style with the static pages. The header's account
   control, the hamburger and the car cards moved to
   classifieds.css in stage 5, because static pages carry them
   too. Nothing here redefines a token.
   ============================================================ */

/* --- the sign-in card --------------------------------------------------- */
.acct-card{max-width:480px}
.acct-card .lead-actions{justify-content:space-between}
/* Stage 5: the one consent line under Send code, linking Privacy. */
.consent{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--steel)}
.consent a{color:var(--cobalt)}
.resend{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px;color:var(--steel)}
.resend form{margin:0}
.resend button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--cobalt);text-decoration:underline;
}
.f input[name="code"]{font-family:var(--mono);font-size:22px;letter-spacing:.3em}

/* --- banners the static forms.css does not carry ------------------------ */
.banner.ok{background:#EAF1FE;border-color:#B7CBF6;color:var(--cobalt-dk)}
.banner ul{margin:0;padding-left:18px}
.banner a{color:inherit;font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- post a listing: one white card ------------------------------------- */
.post-card{max-width:880px}
.default-submit{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vin-row{display:flex;gap:10px}
.vin-row input{flex:1;min-width:0;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.f select:focus{border-color:var(--cobalt);background-color:var(--white);outline:none}

/* photo grid, below the fields, inside the same card */
.photos{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.photos-label{font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 14px}
.tiles{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.tile.is-cover{border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.tile-actions{display:grid}
.tile-actions button{
  background:none;border:0;border-top:1px solid var(--line);padding:9px 10px;cursor:pointer;text-align:left;
  font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink);
}
.tile-actions button:hover:not(:disabled){background:var(--white);color:var(--cobalt)}
.tile-actions button:disabled{color:var(--cobalt);cursor:default}
.photo-add{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.photo-add label.btn{cursor:pointer}
.is-busy{opacity:.6;pointer-events:none}
.post-actions{justify-content:flex-end}

/* --- the listing page (preview now, /cars/{id}/ in stage 3) -------------- */
.preview-bar{background:var(--ink);color:var(--paper-2)}
.preview-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.preview-bar .eyebrow{color:var(--amber)}
.preview-actions{display:flex;gap:10px;flex-wrap:wrap}
.preview-actions form{margin:0}
.preview-bar .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.3)}
.listing{padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,88px)}
.listing-grid{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);align-items:start}
.gallery-cover img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--paper-2)}
.gallery-thumbs{display:grid;gap:8px;margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.gallery-thumbs img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.listing-head{margin-top:26px}
.listing-head h1{font-size:clamp(30px,4.4vw,50px)}
.listing-price{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:clamp(28px,3.6vw,40px);color:var(--cobalt);margin:10px 0 0}
.listing-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--steel);margin:12px 0 0}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:28px 0 0;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:14px;color:var(--steel)}
.specs dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.listing-desc{margin-top:28px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.listing-desc p{margin:0 0 14px}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.contact-card h2{font-size:20px;margin-bottom:16px}
.listing-links{display:flex;gap:18px;margin-top:16px;font-size:14px}
.listing-links a{color:var(--steel)}
.listing-links a:hover{color:var(--cobalt)}

@media (max-width:1000px){
  .listing-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .specs{grid-template-columns:1fr}
  .vin-row{flex-direction:column}
}
.photo-add [hidden]{display:none!important}

/* --- browse: filter card left, results grid right (stacks on mobile) ----- */
.browse-head{padding-bottom:clamp(16px,2.4vw,24px)}
.browse{padding:0 0 clamp(48px,7vw,88px)}
.browse-grid{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:300px minmax(0,1fr);align-items:start}
.filter-card{padding:22px}
.filter-card .rows{gap:14px}
.filter-card .row{gap:10px}
.filter-actions{margin-top:20px;padding-top:18px;justify-content:space-between}
.dist-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px}
.found{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 16px}
.no-match{font-size:18px;color:var(--ink-2);margin:8px 0 0}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0;padding:0}
.pager a,.pager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);font-weight:600;color:var(--ink);text-decoration:none;background:var(--white)}
.pager a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.pager [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.pager .gap{display:grid;place-items:center;min-width:24px;color:var(--steel)}

/* --- listing page additions ------------------------------------------------ */
.similar{padding:clamp(32px,5vw,56px) 0 clamp(48px,7vw,88px);border-top:1px solid var(--line);background:var(--paper-2)}
.similar h2{font-size:clamp(24px,3vw,32px);margin-bottom:20px}
.gone-link{margin-top:24px}
.report-of{margin:14px 0 0;font-size:17px}
.reasons{border:0;margin:0;padding:0;display:grid;gap:8px}
.reasons label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper-2);cursor:pointer;font-weight:600}
.reasons label:has(input:checked){border-color:var(--cobalt);background:var(--white)}

@media (max-width:1000px){
  .browse-grid{grid-template-columns:1fr}
}

/* --- stage 4 -------------------------------------------------------------- */
.contact-btn{width:100%;justify-content:center}
.btn-danger{background:#B3261E;color:var(--white)}
.btn-danger:hover{background:#8C2018}
.confirm-card .lead-actions{margin-top:0;padding-top:0;border-top:0;justify-content:flex-end}

/* My listings: a plain card grid, a small uppercase status label, a row of
   text buttons under each card. */
.dash{padding:0 0 clamp(48px,7vw,88px)}
.dash-card{display:flex;flex-direction:column;gap:8px}
.dash-card > a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none}
.dash-card > a:hover{border-color:var(--cobalt)}
.dash-card > a img,.dash-card > a .car-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.dash-status{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.status-live .dash-status{color:var(--cobalt)}
.status-expired .dash-status,.status-hidden .dash-status,.status-admin_hidden .dash-status{color:var(--amber-dk)}
.dash-views{margin:0;font-size:13px;color:var(--steel)}
.dash-actions{display:flex;flex-wrap:wrap;gap:4px 16px}
.dash-actions form{margin:0}
.dash-actions a,.dash-actions button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:14px;font-weight:600;color:var(--cobalt);text-decoration:none}
.dash-actions a:hover,.dash-actions button:hover{text-decoration:underline}

/* Messages: list left, thread right; stacked on mobile with the thread first
   when one is open. */
.msgs{padding:0 0 clamp(48px,7vw,88px)}
.msgs-grid{display:grid;gap:20px;grid-template-columns:320px minmax(0,1fr);align-items:start}
.conv-list{list-style:none;margin:0;padding:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.conv-list li + li{border-top:1px solid var(--line)}
.conv-list a{position:relative;display:grid;gap:2px;padding:14px 44px 14px 16px;color:var(--ink);text-decoration:none}
.conv-list a:hover,.conv-list .is-current a{background:var(--paper-2)}
.conv-list .is-current a{box-shadow:inset 3px 0 0 var(--cobalt)}
.conv-title{font-weight:700}
.conv-who{font-size:13px;color:var(--steel)}
.conv-last{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-list .badge{position:absolute;right:14px;top:16px;margin:0}
.msgs-thread:empty{display:none}
.msgs-thread{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.thread-head{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.thread-title{margin:0;font-family:var(--display);font-weight:800;font-stretch:90%;font-size:20px}
.thread-title a{color:var(--ink)}
.thread-who{margin:0;font-size:14px;color:var(--steel);grid-column:1}
.thread-actions{grid-column:2;grid-row:1 / span 2;display:flex;gap:14px;align-items:center}
.thread-actions form{margin:0}
.thread-actions a,.thread-actions button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:14px;font-weight:600;color:var(--steel);text-decoration:none}
.thread-actions a:hover,.thread-actions button:hover:not(:disabled){color:var(--cobalt)}
.thread-actions button:disabled{opacity:.5;cursor:default}
.thread-msgs{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px;max-height:60vh;overflow-y:auto}
.thread-msgs li{max-width:78%;padding:10px 14px;border-radius:var(--r)}
.thread-msgs li p{margin:0;overflow-wrap:anywhere}
.thread-msgs time{display:block;margin-top:4px;font-size:11px;opacity:.7}
.thread-msgs .theirs{background:var(--paper-2);border:1px solid var(--line);justify-self:start}
.thread-msgs .mine{background:var(--cobalt);color:var(--white);justify-self:end}
.thread-reply{display:grid;gap:10px}
.thread-reply textarea{width:100%;font-family:var(--body);font-size:16px;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--paper-2);resize:vertical}
.thread-reply textarea:focus{border-color:var(--cobalt);background:var(--white);outline:none}
.thread-reply .btn{justify-self:end}
.msg-compose textarea{width:100%;font-family:var(--body);font-size:16px;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--paper-2)}

/* Admin: a table, scrolled inside its own box on a narrow screen so the page
   never scrolls sideways. */
.adm{padding:0 0 clamp(48px,7vw,88px)}
.adm-scroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.adm-table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.adm-table th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);padding:12px 14px;border-bottom:1px solid var(--line)}
.adm-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table tr:last-child td{border-bottom:0}
.adm-listing{display:flex;gap:12px;align-items:flex-start}
.adm-listing img{border-radius:var(--r);object-fit:cover;flex:none}
.adm-place,.adm-who{color:var(--steel);font-size:13px}
.adm-num{font-family:var(--mono);font-weight:700}
.adm-actions{white-space:nowrap}
.adm-actions form{display:inline;margin:0 12px 0 0}
.adm-actions button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:14px;font-weight:600;color:var(--cobalt)}
.adm-actions button:hover{text-decoration:underline}

@media (max-width:1000px){
  .msgs-grid{grid-template-columns:1fr}
  .msgs-grid.has-thread .msgs-thread{order:-1}
}