/* marketplace.css — the public trainer directory at /find.

   Loaded only by find/index.html, after global.css and storefront.css, so the
   directory inherits the same tokens the storefront uses and adds only what a
   LIST of trainers needs. 5b throughout: radius 0, flat surfaces on hairlines,
   the accent as fill/border/bar and never as text, uppercase actions, and
   chosen chips accent-OUTLINED rather than filled. */

.mk-top {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.mk-brand { display:inline-flex; align-items:center; }
.mk-brand img { display:block; width:150px; height:auto; }
.mk-toplink {
  font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text); border:2px solid var(--border-strong); padding:0.55rem 0.9rem;
  min-height:44px; display:inline-flex; align-items:center; text-decoration:none;
}
.mk-toplink:hover { border-color:var(--accent); }

.mk-hero { max-width:1080px; margin:0 auto; padding:2.5rem 1.25rem 1.25rem; }
.mk-hero h1 {
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:900;
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1.08; margin:0.5rem 0 0.6rem;
}
.mk-lede { color:var(--text-dim); max-width:52ch; font-size:1rem; }

.mk-wrap { max-width:1080px; margin:0 auto; padding:0 1.25rem 3rem; }

/* ── filters: fields are transparent on a 2px line, focus = accent border ── */
.mk-filters {
  display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:0.75rem;
  padding:1.1rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (max-width:860px) { .mk-filters { grid-template-columns:1fr 1fr; } .mk-search { grid-column:1/-1; } }
@media (max-width:520px) { .mk-filters { grid-template-columns:1fr; } }
.mk-field { display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
.mk-flabel {
  font-size:0.62rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-dim);
}
.mk-field input, .mk-field select {
  width:100%; min-height:44px; background:transparent; border:2px solid var(--border-strong);
  color:var(--text); font-family:var(--font-family); font-size:16px; padding:0.5rem 0.7rem;
}
.mk-field input:focus, .mk-field select:focus { outline:none; border-color:var(--accent); }
.mk-chips { display:flex; gap:0.35rem; }
.mk-chip {
  flex:1; min-height:44px; background:transparent; border:1px solid var(--border-strong);
  color:var(--text-dim); font-family:var(--font-family); font-size:0.7rem; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; padding:0 0.6rem; white-space:nowrap;
}
.mk-chip.on { border:2px solid var(--accent); color:var(--text); }
.mk-chip:focus-visible, .mk-clear:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.mk-countrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0 0.4rem; }
.mk-count { font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); }
.mk-clear {
  background:none; border:0; color:var(--text); font-family:var(--font-family);
  font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; border-bottom:2px solid var(--accent); padding:0.2rem 0;
}

/* ── trainer previews: item cards legitimately keep their box ── */
.mk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:0.9rem; margin-top:0.6rem; }
.mk-card {
  display:flex; flex-direction:column; gap:0.55rem;
  background:var(--surface-1); border:1px solid var(--border); padding:1rem;
  color:var(--text); text-decoration:none; transition:border-color 0.15s;
}
.mk-card:hover { border-color:var(--accent); }
.mk-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mk-card-top { display:flex; align-items:center; gap:0.7rem; min-width:0; }
/* The portrait is the trainer's bio photo, at a size worth looking at. */
.mk-avatar {
  width:76px; height:76px; flex:none; object-fit:cover; object-position:center top;
  background:var(--surface-3); border:1px solid var(--border);
}
.mk-avatar-blank {
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:900; font-size:1.7rem; color:var(--text);
}
.mk-card-id { display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.mk-name {
  font-family:var(--font-display); font-size:1rem; font-weight:800; letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mk-loc { font-size:0.74rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-headline {
  font-size:0.86rem; color:var(--text-muted); margin:0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mk-specs, .mk-modes { display:flex; flex-wrap:wrap; gap:0.3rem; }
.mk-spec, .mk-mode {
  font-size:0.64rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border-strong); padding:0.18rem 0.45rem;
}
.mk-mode { border-color:var(--accent); }
.mk-view {
  margin-top:auto; padding-top:0.5rem; font-size:0.7rem; font-weight:800;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text);
  border-top:1px solid var(--border);
}

.mk-empty { padding:2.5rem 0; max-width:46ch; }
.mk-empty p { color:var(--text-dim); margin-top:0.5rem; }
.mk-note { font-size:0.78rem; color:var(--text-dim); margin-top:1.2rem; }

.mk-foot {
  border-top:1px solid var(--border); padding:1.6rem 1.25rem; color:var(--text-dim);
  font-size:0.82rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  max-width:1080px; margin:0 auto;
}
.mk-foot a { color:var(--text); border-bottom:1px solid var(--accent); text-decoration:none; }

/* ── view toggle + map mode ── */
.mk-countright { display:flex; align-items:center; gap:0.75rem; }
.mk-views { display:flex; gap:0.35rem; }
.mk-views .mk-chip { flex:none; min-height:36px; padding:0 0.85rem; }
.mk-clear[hidden] { display:none; }

.mk-maprow { margin-top:0.6rem; border:1px solid var(--border); }
.mk-map { height:min(62vh,560px); min-height:340px; width:100%; background:var(--surface-2); }
/* Leaflet paints its own chrome; keep it inside the 5b grammar. */
.mk-map .leaflet-control-zoom a {
  background:var(--surface-1); color:var(--text); border:1px solid var(--border-strong);
  border-radius:0; font-weight:800;
}
.mk-map .leaflet-control-zoom a:hover { border-color:var(--accent); }
.mk-map .leaflet-control-attribution {
  background:rgba(14,16,19,0.82); color:var(--text-dim); font-size:0.66rem;
}
.mk-map .leaflet-control-attribution a { color:var(--text); }
.mk-map .leaflet-popup-content-wrapper, .mk-map .leaflet-popup-tip {
  background:var(--surface-1); color:var(--text); border-radius:0;
  border:1px solid var(--border-strong); box-shadow:none;
}
.mk-map .leaflet-popup-content { margin:0.8rem; width:190px !important; }
.mk-map .leaflet-popup-close-button { color:var(--text-dim); }

.mk-pin { background:none; border:0; }
.mk-pin span {
  display:grid; place-items:center; width:30px; height:30px;
  background:var(--accent); color:var(--accent-contrast);
  font-family:var(--font-display); font-weight:900; font-size:0.9rem;
  border:2px solid var(--surface-1); cursor:pointer;
}

.mk-pop { display:flex; flex-direction:column; gap:0.35rem; }
.mk-popimg { width:100%; height:104px; object-fit:cover; object-position:center top;
  background:var(--surface-3); border:1px solid var(--border); }
.mk-popimg-blank { display:grid; place-items:center; font-family:var(--font-display);
  font-weight:900; font-size:2rem; color:var(--text); }
.mk-popname { font-family:var(--font-display); font-size:0.95rem; font-weight:800; }
.mk-poploc { font-size:0.74rem; color:var(--text-dim); }
.mk-pophead { font-size:0.78rem; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mk-popview {
  margin-top:0.2rem; font-size:0.68rem; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text); border-bottom:2px solid var(--accent);
  align-self:flex-start; text-decoration:none; padding-bottom:0.15rem;
}
@media (max-width:520px) {
  .mk-countrow { flex-wrap:wrap; }
  .mk-views .mk-chip { min-height:44px; }
}