/* The public for sale board. Loaded after app.css, which supplies the colours and the font. */

a.btn{display:inline-block;text-decoration:none;color:inherit}
a.btn.primary{color:var(--accent-ink)}
.btn.quiet{background:none}

/* header */
.pubtop{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:5}
.pubtop .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.pubtop .brand{font-stretch:125%;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--paper);text-decoration:none;padding:0}
.pubnav{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap}
.pubnav a{color:var(--paper);text-decoration:none;font-weight:600}
.pubnav a:not(.btn):hover{text-decoration:underline}
.pubnav a.btn,.pubnav a.btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pubmain{padding:34px 0 72px}

/* hero and sign-up block */
.hero{max-width:72ch;margin-bottom:30px}
.hero h1{font-stretch:112%;font-weight:800;font-size:clamp(1.8rem,4.2vw,2.7rem);letter-spacing:-.02em}
.hero .lead{font-size:1.1rem;color:var(--muted);margin:12px 0 18px;max-width:58ch}
.herocta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.signup{margin-top:52px;border-top:1px solid var(--rule);padding-top:30px}
.signup h2{font-stretch:112%;font-weight:750;font-size:1.5rem;margin-bottom:18px}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-bottom:22px}
.perks h3{font-size:1rem;font-weight:700;margin-bottom:5px}
.perks p{margin:0;color:var(--muted);font-size:.92rem}

/* filters */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.filters input[type=search]{flex:1;min-width:190px;padding:9px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:inherit}
.filters select{width:auto;padding:9px 10px;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:inherit}
.filters .btn{width:auto}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px}
a.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
a.card:hover{border-color:var(--muted);transform:translateY(-2px)}
a.card img,.card .noimg{width:100%;aspect-ratio:1;object-fit:cover;background:var(--sunk);display:block}
.cardbody{padding:13px 14px 15px}
.cardbody h3{font-size:.98rem;font-weight:650;line-height:1.3}
.cardbody p{margin:4px 0 0}
.cardprice{font-weight:800;font-size:1.15rem;margin-top:8px !important}

/* one listing */
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 5px}
.listing{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start}
.gallery{display:grid;gap:10px;grid-template-columns:1fr}
.gallery img{width:100%;border-radius:10px;background:var(--sunk);object-fit:contain;aspect-ratio:1;max-height:560px}
.gallery img:not(:first-child){object-fit:cover;max-height:none}
.gallery img:not(:first-child){display:none}
.gallery:has(img:nth-child(2)){grid-template-columns:repeat(3,1fr)}
.gallery:has(img:nth-child(2)) img:first-child{grid-column:1/-1}
.gallery:has(img:nth-child(2)) img:not(:first-child){display:block}

.facts h1{font-stretch:110%;font-weight:780;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.015em}
.facts .sub{margin:8px 0 0;font-size:.95rem}
.price{font-size:2.3rem;font-weight:850;letter-spacing:-.02em;margin:18px 0 2px}
.price .each{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}
.bullets{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0}
.bullets li{background:var(--sunk);border-radius:20px;padding:4px 12px;font-size:.86rem;font-weight:600}
.bullets li.good{background:color-mix(in srgb,var(--gain) 16%,transparent);color:var(--gain)}
.bullets li.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0}
.compare dt{font-size:.82rem;color:var(--muted)}
.compare dd{margin:2px 0 0;font-size:1.15rem;font-weight:700}
.compare dd .small{display:block;font-weight:600}
.notes{white-space:pre-wrap;margin:18px 0 0}
.cta{margin-top:24px;background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--ink);
  border-radius:8px;padding:16px 18px}
.cta p{margin:0 0 12px}
.cta .btn{margin-right:8px}
.cta .small{margin:12px 0 0}
.more{margin-top:54px;border-top:1px solid var(--rule);padding-top:26px}
.more h2{font-stretch:112%;font-weight:750;font-size:1.3rem;margin-bottom:16px}

/* pages and footer */
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px}
.pager a{min-width:38px;text-align:center;padding:7px 10px;border:1px solid var(--rule);border-radius:4px;
  background:var(--surface);text-decoration:none;color:inherit;font-weight:600}
.pager a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pubfoot{border-top:1px solid var(--rule);background:var(--surface);padding:26px 0 46px}
.pubfoot p{max-width:76ch;margin:0 0 8px;color:var(--muted);font-size:.9rem}

@media (max-width:820px){
  .listing{grid-template-columns:1fr;gap:22px}
  .price{font-size:1.9rem}
}

/* dealers, told apart from private sellers */
.bizmark{display:inline-block;background:var(--ink);color:var(--paper);font-size:.7rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:3px;vertical-align:1px}
.bizline{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:8px}
.cardbody .bizmark{margin-right:4px}