/* ============================================================
   classifieds.css - what static pages and app pages share
   beyond the mockup's site.css (stage 5, 2026-10-01).

   site.css must stay byte-identical to the approved mockup, so
   the one-header-everywhere pieces live here instead: the
   account control, the hamburger, and the car card the
   homepage's "Newest listings" grid and /cars/ both use.
   Linked by every static page and every app page at the same
   content-hashed /assets/ URL. Nothing here redefines a token.
   ============================================================ */

/* --- the account control, top right ------------------------------------ */
.head-acct{position:relative}
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer}
.acct summary::-webkit-details-marker{display:none}
.acct summary::after{
  content:"";display:inline-block;margin-left:10px;vertical-align:middle;
  border:5px solid transparent;border-top-color:currentColor;border-bottom:0;
}
.acct-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:200px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(20,24,28,.12);padding:6px;display:grid;
}
.acct-menu a,.acct-menu button,.burger-acct a,.burger-acct button{
  display:block;width:100%;text-align:left;padding:11px 14px;border-radius:var(--r);
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;background:none;border:0;cursor:pointer;
}
.acct-menu a:hover,.acct-menu button:hover,.burger-acct a:hover,.burger-acct button:hover{background:var(--paper-2);color:var(--cobalt)}
.acct-menu form,.burger-acct form{margin:0}

/* --- the hamburger ------------------------------------------------------ */
.burger{display:none;margin-left:auto;position:relative}
.burger summary{
  list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);
}
.burger summary::-webkit-details-marker{display:none}
.burger summary span,.burger summary span::before,.burger summary span::after{
  display:block;width:20px;height:2px;background:var(--ink);position:relative;content:"";
}
.burger summary span::before{position:absolute;top:-6px}
.burger summary span::after{position:absolute;top:6px}
.burger-nav{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(300px,calc(100vw - 32px));
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(20,24,28,.12);padding:6px;display:grid;
}
.burger-nav > a{
  display:block;padding:12px 14px;border-radius:var(--r);
  font-weight:600;color:var(--ink);text-decoration:none;
}
.burger-nav > a:hover{background:var(--paper-2);color:var(--cobalt)}
/* The account control sits at the BOTTOM of the menu (spec §5). */
.burger-acct{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;display:grid}
.burger-acct .acct-signin{display:block;text-align:center;margin:6px}
.burger-name{
  display:block;padding:10px 14px 4px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}

/* site.css hides .site-nav under 1000px and .head-cta under 520px. The
   header moves both into the hamburger from 1000px down, so nothing is lost. */
@media (max-width:1000px){
  .burger{display:block}
  .head-acct{display:none}
}

/* --- unread badge (header menu, Messages) -------------------------------- */
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;
  background:var(--amber);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;vertical-align:middle}

/* --- the car card: /cars/, Similar cars, and the homepage grid ------------ */
.car-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.car-card a{display:block;height:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .12s ease,transform .12s ease}
.car-card a:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.car-card img,.car-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.car-body{display:grid;gap:4px;padding:14px 16px 16px}
.car-title{font-family:var(--display);font-weight:800;font-stretch:90%;font-size:17px;line-height:1.2;letter-spacing:-.01em}
.car-price{font-family:var(--display);font-weight:800;font-stretch:88%;font-size:22px;color:var(--cobalt)}
.car-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--steel)}

/* --- homepage: "Newest listings" ------------------------------------------
   The grid is site.css's own .cards (4 / 2 / 1 columns), holding the browse
   card. Only the list reset is added. */
.newest-grid{list-style:none;margin:0;padding:0}