/* =========================================================================
   FREE SAILING — the marketplace: card, filter bar and draft-listing chrome.

   No new design system. Every colour, radius and shadow here is one already
   in site.css; the card shell is site.css's own .tile/.art/.bd/.foot (used
   for boats.html today); the form and "on this device" ledger are
   demand.css's own .dm-* classes (the same ones profile.html's transparency
   section already uses). This file only adds what neither of those already
   covers: the price badge on a listing photo, the peer-price line, and the
   two-button row on a draft.
   ========================================================================= */

/* -------------------------------------------------------------- category
   Marktplaats-style tiles above the search bar. Plain reuse of site.css's
   own .lenses/.lens pill-toggle (the map's lens filter uses the identical
   pair) — no new chip component invented for this page. */
.mkt-cats{ margin-bottom:16px; }

/* --------------------------------------------------------------- toolbar */
.mkt-toolbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:4px;
}
.mkt-toolbar .filters{ flex:1; min-width:280px; margin-bottom:0; }
.mkt-toolbar .btn{ flex:none; }
.mkt-toolbar-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ------------------------------------------------------------ the badge
   Sits over the top-left corner of a card's photo, same spot the old
   marketplace renderer used — kept, not reinvented. */
.mkt-badge{ position:absolute; left:12px; top:12px; z-index:1; }
.mkt-gone{ position:absolute; right:12px; top:12px; z-index:1; }

/* ------------------------------------------------------------- the card
   Everything else is .tile/.art/.bd/.foot from site.css. These extend it.
   The card's own link (title, art, peer line) and its outbound/detail
   buttons are now two separate elements so a heart button can sit between
   them without a link nested inside a link — position:relative is scoped
   to this grid only, not to every .tile on the site. */
#mkt-grid .tile{ position:relative; }
.mkt-card-link{ display:block; color:inherit; }
.mkt-card-link:hover{ text-decoration:none; }
.tile .mkt-card-foot{ padding-top:0; }
.mkt-kind{ margin-left:6px; }
.mkt-peer{ margin-top:7px; color:var(--ink-60); font-size:13px; line-height:1.4; }
.mkt-checked{ margin-top:8px; color:var(--ink-25); font-size:12px; }

/* --------------------------------------------------------- the fav heart
   Top-right of the photo — .mkt-gone's reserved corner is left alone for
   an eventual "gone" badge, this gets its own. */
.mkt-fav-btn{
  position:absolute; right:12px; top:12px; z-index:3; width:34px; height:34px;
  padding:0; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1);
  cursor:pointer;
}
.mkt-fav-btn svg{ width:18px; height:18px; display:block; }
.mkt-fav-btn:hover{ border-color:var(--coral); }
.mkt-fav-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* --------------------------------------------------------- the add form
   Wraps demand.css's .dm-form inside a plain .card so it reads as a
   section of this page rather than a popup — nothing here is a modal. */
#mkt-add{ scroll-margin-top:24px; }
#mkt-add .dm-form{ margin-top:20px; max-width:640px; }
#mkt-add .dm-done{ margin-top:20px; max-width:640px; }
#mkt-add textarea.dm-in{ min-height:96px; }

/* ----------------------------------------------------- photo thumbnails */
.mkt-photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mkt-photo-thumb{
  position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:#DCE9F5;
}
.mkt-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mkt-photo-x{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  border:0; background:rgba(2,43,131,.78); color:#fff; font-size:13px; line-height:1;
  cursor:pointer; padding:0;
}
.mkt-photo-x:hover{ background:var(--coral); }

/* --------------------------------------------------- the listings panel
   Reuses demand.css's .dm-led/.dm-row exactly — the same "on this device"
   ledger profile.html already shows for trail data — plus a status chip
   and a two-button row neither of those needed before. */
.mkt-draft-row .dm-w{ display:flex; flex-direction:column; gap:2px; }
.mkt-draft-sub{ color:var(--ink-40); font-weight:400; }
.mkt-draft-chip{ flex:none; }
.mkt-draft-actions{ flex:none; display:flex; gap:8px; flex-wrap:wrap; }
.mkt-tabs{ margin-top:14px; }

@media (max-width:640px){
  .mkt-toolbar{ flex-direction:column; align-items:stretch; }
  .mkt-toolbar .btn{ width:100%; justify-content:center; }
  .mkt-draft-row{ flex-wrap:wrap; }
  .mkt-draft-actions{ width:100%; }
}

/* =========================================================================
   LISTING.HTML — one boat, in full. Same tokens, same .card/.stat/.chip/
   .empty vocabulary as everywhere else; only the gallery and the two-column
   layout are new to this page. */
.ls-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
@media (max-width:860px){ .ls-grid{ grid-template-columns:1fr; } }

.ls-gallery{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:#DCE9F5; box-shadow:var(--shadow-1);
}
.ls-gallery-main{ aspect-ratio:16/10; position:relative; }
.ls-gallery-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ls-gallery-main svg{ position:absolute; inset:0; width:100%; height:100%; }
.ls-badge{ position:absolute; left:14px; top:14px; z-index:1; }
.ls-fav-btn{
  position:absolute; right:14px; top:14px; z-index:2; width:40px; height:40px;
  padding:0; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1); cursor:pointer;
}
.ls-fav-btn svg{ width:20px; height:20px; }
.ls-thumbs{ display:flex; gap:8px; padding:10px; background:#fff; flex-wrap:wrap; }
.ls-thumb{
  width:64px; height:64px; border-radius:6px; overflow:hidden; padding:0; cursor:pointer;
  border:2px solid transparent; background:#DCE9F5;
}
.ls-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ls-thumb.on{ border-color:var(--cyan); }

.ls-title{ font-size:clamp(24px,3vw,32px); color:var(--navy); letter-spacing:-.022em; margin-top:20px; }
.ls-meta{ margin-top:8px; color:var(--ink-40); font-size:15px; }
.ls-desc{ margin-top:16px; color:var(--ink-60); font-size:14.5px; line-height:1.6; white-space:pre-wrap; }
.ls-section{ margin-top:28px; }
.ls-section h2{ font-size:18px; color:var(--navy); letter-spacing:-.01em; margin-bottom:12px; }
.ls-map-note{ display:flex; align-items:center; gap:10px; color:var(--ink-60); font-size:14.5px; }
.ls-map-note svg{ flex:none; width:22px; height:22px; }
.ls-dating{ margin-top:18px; color:var(--ink-25); font-size:12.5px; line-height:1.6; }

.ls-cta{ position:sticky; top:20px; }
.ls-price{ font-size:30px; color:var(--navy); letter-spacing:-.02em; }
.ls-cta .mkt-peer{ margin-top:9px; }
.ls-cta-go{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ls-cta-go .btn{ width:100%; justify-content:center; }
.ls-contact-note{ margin-top:12px; color:var(--ink-40); font-size:12.5px; line-height:1.5; }

.ls-mine .chip{ margin-bottom:4px; }
.ls-mine-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* The HARVESTED lifecycle chip (stale / source removed / sold externally) — sits
   under the price, same spot .ls-mine's own status chip occupies on an OWNED
   listing, so the two kinds read as visibly different states in the same place. */
.ls-badge2{ display:inline-block; margin-top:10px; }