/* Classifieds (listings.py, browse.py, listing_page.py, post_form.py + classifieds.js), on the Float tokens.
   Floating listing cards with a price that reads first, a calm filter panel, and a photo stage with a thumbnail strip.
   Every flex and grid child that holds text has min-width: 0, and titles, prices and places wrap or clamp. */
.cl-tabs { margin-top: var(--s-2); }
.cl-head h1, .cl-head p { overflow-wrap: anywhere; }

/* type and status chips */
.chip.cl-sale { background: color-mix(in oklab, var(--pos) 16%, transparent); color: var(--pos); }
.chip.cl-wanted { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.chip.cl-trade { background: color-mix(in oklab, #f08c00 18%, transparent); color: #d9480f; }
.chip.cl-sold { background: var(--pos); color: #fff; }
.chip.cl-removed { background: var(--neg); color: #fff; }
.cl-badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* filters */
.cl-filters { display: grid; gap: var(--s-3); margin-top: max(var(--gap-float, 10px), var(--s-4)); padding: var(--s-4); border-radius: var(--r-lg); }
.cl-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-pill { position: relative; display: inline-flex; cursor: pointer; }
.cl-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cl-pill span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted); font: 600 var(--fs-sm)/1 var(--font-ui); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med) var(--ease-liquid); }
.cl-pill:hover span { color: var(--text); }
.cl-pill input:checked + span { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cl-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-frow { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1.2fr)) minmax(0, 1.4fr) minmax(0, 1.1fr) auto; gap: var(--s-3); align-items: end; }
.cl-f { display: grid; gap: 4px; min-width: 0; margin: 0; }
.cl-f input, .cl-f select { width: 100%; min-width: 0; }
.cl-range { display: flex; align-items: center; gap: 6px; min-width: 0; } .cl-range input { flex: 1; min-width: 0; }
.cl-f-go { display: flex; gap: 6px; align-items: center; } .cl-f-go .btn { white-space: nowrap; }
.cl-found { margin: var(--s-3) 2px 0; }

/* cards */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap-float); margin-top: var(--s-3); }
.cl-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: inherit; text-decoration: none; }
.cl-art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.cl-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-liquid); }
@media (hover: hover) { .cl-card:hover .cl-art img { transform: scale(1.04); } }
.cl-art .cl-badges { position: absolute; top: 10px; left: 10px; right: 10px; }
.cl-art .chip { box-shadow: var(--e-1); backdrop-filter: blur(8px); }
.cl-art .chip.cl-sale, .cl-art .chip.cl-wanted, .cl-art .chip.cl-trade { background: color-mix(in oklab, var(--surface-solid) 82%, transparent); }
.cl-count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgb(0 0 0 / .55); color: #fff; font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.cl-count svg { width: 13px; height: 13px; }
.cl-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-faint); } .cl-noimg svg { width: 40px; height: 40px; }
.cl-body { display: grid; gap: 5px; min-width: 0; padding: var(--s-3) var(--s-4) var(--s-4); }
.cl-price { font: 750 var(--fs-lg)/1.15 var(--font-display); letter-spacing: var(--track-tight); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cl-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; line-height: 1.3; }
.cl-meta, .cl-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.cl-meta > span, .cl-foot > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* 1.0.3: long names, categories and places wrap to two lines instead of being cut to one */
.cl-cat, .cl-foot > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cl-loc { display: inline-flex; align-items: center; gap: 3px; } .cl-loc svg { width: 13px; height: 13px; flex: none; }
.cl-loc span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cl-by { font-weight: 600; color: var(--text-muted); }

/* my listings */
.cl-rows { display: grid; gap: var(--gap-float); margin-top: var(--s-3); }
.cl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3); border-radius: var(--r-lg); }
.cl-row .cl-card { flex-direction: row; box-shadow: none; background: none; backdrop-filter: none; }
.cl-row .cl-art { flex: none; width: 132px; border-radius: var(--r-md); }
.cl-row-side { display: grid; gap: var(--s-2); justify-items: end; min-width: 0; text-align: right; }
.cl-row-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .cl-row-acts form { margin: 0; }

/* one listing */
.cl-note { overflow-wrap: anywhere; }
.cl-note.cl-pos svg { color: var(--pos); } .cl-note.cl-neg svg { color: var(--neg); }
.cl-view { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap-float); align-items: start; }
.cl-gallery { display: grid; gap: var(--s-2); min-width: 0; }
.cl-stage { position: relative; margin: 0; display: grid; place-items: center; min-height: 320px; padding: var(--s-3); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 40%, #1b2133, #0c0f18); box-shadow: var(--e-2); overflow: hidden; }
.cl-stage-empty { aspect-ratio: 4 / 3; background: var(--surface-2); }
.cl-full { display: block; max-width: 100%; cursor: zoom-in; }
.cl-stage img { display: block; max-width: 100%; max-height: min(70vh, 900px); width: auto; height: auto; border-radius: var(--r-sm);
  animation: cl-in var(--t-slow) var(--ease-liquid) both; }
@keyframes cl-in { from { opacity: 0; transform: scale(.985); filter: blur(6px); } }
.cl-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.cl-thumb { flex: none; width: 76px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); box-shadow: var(--e-1); opacity: .7;
  transition: opacity var(--t-fast), box-shadow var(--t-med) var(--ease-liquid), transform var(--t-fast) var(--ease-spring); }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-thumb:hover { opacity: 1; transform: translateY(-1px); }
.cl-thumb.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent), var(--e-1); }
.cl-side { display: grid; gap: var(--gap-float); min-width: 0; }
.cl-summary { display: grid; gap: var(--s-3); min-width: 0; }
.cl-h1 { margin: 0; font-size: var(--fs-xl); line-height: 1.2; overflow-wrap: anywhere; }
.cl-price.big { font-size: calc(var(--fs-xl) * 1.15); color: var(--accent); }
.cl-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--border); }
.cl-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); padding: 7px 0; border-bottom: 1px solid var(--border); }
.cl-facts dt { color: var(--text-muted); font-size: var(--fs-sm); } .cl-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); font-weight: 600; }
.cl-contact { justify-content: center; width: 100%; white-space: normal; text-align: center; }
.cl-tools { display: flex; flex-wrap: wrap; gap: 6px; } .cl-tools form { margin: 0; }
.cl-remove .menu-pop { min-width: 260px; right: 0; left: auto; }
.cl-seller { display: flex; gap: var(--s-3); align-items: center; min-width: 0; } .cl-seller > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cl-report { display: flex; justify-content: flex-end; margin-top: var(--s-2); } .cl-report:empty { display: none; }
.cl-desc { grid-column: 1; min-width: 0; } .cl-desc h3 { margin-top: 0; } .cl-desc .post-body { overflow-wrap: anywhere; }

/* post and edit */
.cl-editor { max-width: 820px; margin-inline: auto; }
.cl-form fieldset { min-width: 0; }
.cl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cl-two > label { min-width: 0; }
.cl-price-row { margin-top: var(--s-3); } .cl-price-row[hidden] { display: none; }
.cl-drop { position: relative; display: grid; place-items: center; min-height: 150px; padding: var(--s-5); border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--border); text-align: center;
  transition: background-color var(--t-fast), box-shadow var(--t-med) var(--ease-liquid), transform var(--t-med) var(--ease-spring); }
.cl-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-drop-in { display: grid; gap: 6px; justify-items: center; pointer-events: none; } .cl-drop-in svg { width: 32px; height: 32px; color: var(--accent); }
.cl-drop:hover, .cl-drop.over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cl-drop.over { transform: scale(1.01); }
.cl-queue, .cl-phs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cl-queue:empty { display: none; }
.cl-q, .cl-ph { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); box-shadow: var(--e-1); }
.cl-q { animation: cl-in var(--t-med) var(--ease-spring) both; }
.cl-q img, .cl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-q img { opacity: .45; transition: opacity var(--t-med); } .cl-q.done img { opacity: 1; } .cl-q.fail { box-shadow: inset 0 0 0 2px var(--neg); }
.cl-q::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--accent); transition: width var(--t-med) var(--ease-liquid); }
.cl-q.done::after { width: 100%; background: var(--pos); }
.cl-ph-acts { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 18px 4px 6px;
  background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); } .cl-ph-acts form { margin: 0; }
.cl-addphotos { margin-top: var(--s-3); }

/* profile box */
.cl-minis { display: grid; gap: 8px; }
.cl-mini { display: flex; gap: var(--s-2); align-items: center; min-width: 0; color: inherit; text-decoration: none; padding: 4px; border-radius: var(--r-md); }
.cl-mini-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); color: var(--text-faint); }
.cl-mini-art img { width: 100%; height: 100%; object-fit: cover; } .cl-mini-art svg { width: 22px; height: 22px; }
.cl-mini > * { min-width: 0; } .cl-mini-body { display: grid; min-width: 0; }
.cl-mini-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; } .cl-mini-body span { min-width: 0; overflow-wrap: anywhere; }

/* admin */
.cl-catrow { display: flex; gap: 6px; align-items: center; min-width: 0; } .cl-catrow input[name="name"] { flex: 1; min-width: 0; }
.cl-sort { width: 72px; flex: none; }
.cl-inline { display: inline-flex; align-items: center; gap: 6px; } .cl-inline input { width: 90px; }

@media (max-width: 1100px) { .cl-frow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cl-f-q { grid-column: span 3; } }
@media (max-width: 900px) {
  .cl-view { grid-template-columns: minmax(0, 1fr); }
  .cl-desc { grid-column: auto; }
  .cl-stage { padding: 0; min-height: 0; }
  .cl-stage img { max-height: 64vh; }
  .cl-thumbs { padding-inline: 0; }
}
@media (max-width: 640px) {
  .cl-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-f-q, .cl-f-price, .cl-f-go { grid-column: span 2; }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-body { padding: var(--s-2) var(--s-3) var(--s-3); }
  .cl-price { font-size: var(--fs-md); }
  .cl-two { grid-template-columns: minmax(0, 1fr); }
  .cl-row { grid-template-columns: minmax(0, 1fr); } .cl-row-side { justify-items: start; text-align: left; } .cl-row-acts { justify-content: flex-start; }
  .cl-row .cl-art { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-art img, .cl-thumb, .cl-pill span, .cl-drop { transition: none; }
  .cl-stage img, .cl-q { animation: none; }
}

/* long listing titles wrap inside the breadcrumb, like core thread titles */
.crumbs [aria-current] { min-width: 0; overflow-wrap: anywhere; }
/* 1.0.2: only on Classifieds pages (their crumbs start at /classifieds), so one long unbroken word in a title
   wraps too: the title link on the edit and report pages as well as the current item, and the quoted title
   in the report form and on the moderation page. 1.0.3: matches both the 1.0.0 crumbs (links straight in the nav)
   and the newer ones (each crumb in its own span.crumb) */
.crumbs:has(> a[href="/classifieds"], > .crumb > a[href="/classifieds"]) :is(a, [aria-current], .crumb) { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
main:has(.crumbs > a[href="/classifieds"], .crumbs > .crumb > a[href="/classifieds"]) :is(form[action^="/classifieds/"], .rcard) .snippet { overflow-wrap: anywhere; }

/* page head: the buttons and tabs sit on the title's centre line and the subtitle runs under the title;
   on phones the tools take their own row under the subtitle */
.cl-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); row-gap: 6px; }
.cl-head > div:first-child { display: contents; }
.cl-head h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.cl-head > div:first-child > :not(h1) { order: 2; flex-basis: 100%; min-width: 0; }
.cl-head > .greet-tools { order: 1; margin-left: auto; width: auto; min-width: 0; }
.cl-head > .greet-tools > * { max-width: 100%; }
@media (max-width: 600px) { .cl-head > .greet-tools { order: 3; flex-basis: 100%; margin-left: 0; margin-top: var(--s-2); } }

.cl-head + .box { margin-top: var(--s-5); } /* the mod queue's card keeps clear of the head */