/* ============================================================================
   OmniSolver Models · market.css — dark-premium "3D foundry" marketplace.
   Sticky glass filter toolbar + metric-forward asset cards (NO rendered model:
   shared .asset-viz tile with the wireframe cube glyph + polycount in .corner).
   Matches the landing's .asset-card look. Tokens only — no hard-coded colors.
   ============================================================================ */
.mk-page { padding: var(--s-8) var(--s-5) var(--s-11); position: relative; }

/* ---- Page head ---- */
.mk-head { margin-bottom: var(--s-7); max-width: 72ch; }
.mk-head .eyebrow { margin-bottom: var(--s-3); display: inline-block; }
.mk-head h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-h1-accent {
  background: var(--grad-teal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-sub { max-width: 62ch; margin: 0; color: var(--text-2); font-size: var(--fs-md); }

/* ---- Filter bar → sticky glass toolbar ---- */
.mk-filters {
  position: sticky; top: calc(var(--nav-h) + var(--s-3)); z-index: 20;
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  background: rgba(13,16,20,.66);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-inset);
}
/* top gradient hairline for premium depth */
.mk-filters::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-hi), transparent);
}
.mk-filters-top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.mk-search { position: relative; flex: 1 1 280px; min-width: 200px; display: flex; align-items: center; }
.mk-search-svg { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; transition: color var(--t-fast); }
.mk-search:focus-within .mk-search-svg { color: var(--teal-hi); }
.mk-search-input { padding-left: 40px; background: var(--surface-ink); }
.mk-search-input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* segmented kind switch */
.mk-seg { display: flex; background: var(--surface-ink); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); padding: 3px; flex: none; }
.mk-seg button { border: none; background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer; color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; }
.mk-seg button:hover { color: var(--text); }
.mk-seg button.active { background: var(--surface-2); color: var(--teal-hi);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-teal); }

.mk-filters-right { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-left: auto; }
.mk-free { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 550;
  color: var(--text-2); cursor: pointer; user-select: none; }
.mk-free input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.mk-free:hover { color: var(--text); }
.mk-sort { display: inline-flex; align-items: center; gap: 8px; }
.mk-sort select { width: auto; padding: 8px 11px; }

/* category chips */
.mk-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.mk-cats:empty { display: none; }
.mk-cat { cursor: pointer; border: 1px solid var(--line); background: var(--glass-bg);
  color: var(--text-2); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.mk-cat:hover { border-color: var(--line-teal); color: var(--text); background: var(--glass-bg-2); }
.mk-cat.active { background: rgba(34,199,182,.14); color: var(--teal-hi); border-color: var(--line-teal); }
.mk-cat .mk-cat-c { color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); }
.mk-cat.active .mk-cat-c { color: var(--teal); }

/* ---- Result count ---- */
.mk-count { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 2px var(--s-4); min-height: 1.2em; }
.mk-count b { color: var(--teal-hi); font-family: var(--font-mono); font-weight: 600; }

/* ---- Card grid (reusable) ---- */
.mk-grid { display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }

/* ---- Asset card (metric-forward, NO rendered model) ----
   Uses base.css .card .glass .edge .card-hover for the glass shell, top hairline
   and the teal-glow hover lift. We only lay out the inside. */
.asset-card { display: flex; flex-direction: column; padding: 14px; color: inherit;
  position: relative; isolation: isolate; }
.asset-card:hover { color: inherit; }

/* the abstract tile (.asset-viz) is sized 4/3 by base.css; nudge the glyph + corner */
.asset-card .asset-viz { width: 100%; }

/* floating badge row over the tile */
.mk-badges { position: absolute; top: 22px; left: 22px; display: flex; flex-wrap: wrap; gap: 5px;
  max-width: calc(100% - 44px); z-index: 2; pointer-events: none; }

.mk-body { display: flex; flex-direction: column; gap: var(--s-3); padding: 12px 2px 2px; flex: 1; }
.mk-title { font-size: var(--fs-md); font-weight: 650; line-height: var(--lh-snug); color: var(--text);
  letter-spacing: var(--tracking-tight); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast); }
.asset-card:hover .mk-title { color: var(--teal-hi); }

/* footer row: chips on the left, price on the right */
.mk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
  margin-top: auto; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-content: flex-start; min-width: 0; }
.mk-chips > * { align-self: center; flex: 0 0 auto; }   /* never let a chip stretch into a tall pill */
.mk-chip { text-transform: capitalize; }
.mk-chip-poly { font-family: var(--font-mono); background: rgba(34,199,182,.1); color: var(--teal-hi);
  border-color: var(--line-teal); text-transform: none; }
.mk-chip-poly .icon { width: 13px; height: 13px; stroke-width: 1.7; }
.mk-chip-rating { font-family: var(--font-mono); }
.mk-chip-rating .icon { width: 13px; height: 13px; color: var(--amber); }
.mk-chip-rating.empty { color: var(--text-faint); }
.mk-chip-rating.empty .icon { color: var(--text-faint); }

.mk-price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base);
  color: var(--copper-hi); white-space: nowrap; flex: none; }
.mk-price.free { color: var(--teal-hi); }

/* ---- Skeleton card (on dark, uses base .card .skeleton) ---- */
.mk-sk { height: 300px; border: 1px solid var(--line); }

/* ---- Empty state (uses base .empty) ---- */
.mk-grid .empty { grid-column: 1 / -1; }
.mk-grid .empty h3 { color: var(--text); }

/* ---- Footer row ---- */
.mk-footer { gap: var(--s-4); flex-wrap: wrap; }
.mk-footer a { font-size: var(--fs-sm); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .mk-head h1 { font-size: var(--fs-2xl); }
  .mk-filters { top: var(--s-2); }
  .mk-filters-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .mk-seg { flex: 1; }
  .mk-seg button { flex: 1; padding: 7px 8px; }
}
@media (max-width: 420px) {
  .mk-grid { grid-template-columns: 1fr; }
  .mk-head h1 { font-size: var(--fs-xl); }
}
@media (max-width: 360px) {
  .mk-page { padding: var(--s-6) var(--s-4) var(--s-9); }
  .mk-filters { padding: var(--s-3) var(--s-4); }
}