/* Components (market.html), on top of cms.css. Signature: every card is a live, sandboxed render of the section in a real design system. */
.mk-hero { margin-bottom: var(--s-5); max-width: 70ch; }
.mk-hero h1 { font-size: var(--fs-4); letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.mk-tools { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; justify-content: space-between; margin-bottom: var(--s-4); }
.mk-search { flex: 1 1 280px; max-width: 420px; }
.mk-search input, .mk-target select { width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); color: var(--text); font-size: 16px; }
.mk-target label { display: grid; gap: 6px; font-size: var(--fs-1); font-weight: 500; color: var(--text); }
.mk-target select { border-radius: var(--r-menu); min-width: 220px; }
.mk-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.mk-cat { min-height: 44px; padding: 0 16px; border-radius: var(--r-control); background: var(--raised); color: var(--muted); font-size: 13.5px; font-weight: 500; transition: color var(--t-1) var(--ease), background-color var(--t-1) var(--ease); }
.mk-cat:hover { color: var(--text); }
.mk-cat[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.mk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-5); }
.mk-card, .mk-review { display: grid; border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.mk-frame { position: relative; aspect-ratio: 16 / 10; background: var(--ground); border-bottom: 1px solid var(--line); overflow: hidden; }
/* the preview renders at desktop width and is scaled down to the card */
.mk-frame iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; background: #fff; }
.mk-body { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); align-content: start; }
.mk-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.mk-line h2 { font-size: var(--fs-2); font-weight: 500; }
.mk-price-tag { font-size: var(--fs-1); font-variant-numeric: tabular-nums; color: var(--text); }
.mk-body > .muted { font-size: var(--fs-1); }
.mk-meta { font-size: var(--fs-0); color: var(--muted); }
.mk-act { margin-top: var(--s-2); }
.mk-act .btn { min-height: 44px; }
.mk-hint { font-size: var(--fs-1); }
.mk-empty { grid-column: 1 / -1; padding: var(--s-6) 0; }
.mk-note { margin-top: var(--s-6); font-size: var(--fs-1); max-width: 70ch; }

.mk-sell { max-width: 860px; }
.mk-price { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.mk-price input { width: 110px !important; }
.mk-share { font-size: var(--fs-1); }
.mk-preview-wrap { display: grid; gap: var(--s-2); }
.mk-preview { width: 100%; height: 420px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #fff; }
.mk-checks { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-1); }
.mk-checks li b { display: inline-block; min-width: 4.6em; font-weight: 600; color: var(--ok); }
.mk-checks li[data-pass="false"] b { color: var(--danger); }
.mk-checks li[data-pass="false"] { color: var(--text); }

.mk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.mk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--surface); }
.mk-row > div { display: grid; gap: 2px; flex: 1 1 260px; }
.mk-row b { color: var(--text); font-weight: 500; }
.mk-row .muted { font-size: var(--fs-1); }
.mk-status { font-size: var(--fs-1); font-weight: 500; color: var(--warn); }
.mk-status[data-status="approved"] { color: var(--ok); }
.mk-status[data-status="rejected"] { color: var(--danger); }
.mk-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mk-review .mk-frame { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line); }
.mk-review details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-size: var(--fs-1); }
.mk-decide { margin-top: var(--s-3); }

@media (max-width: 800px) { .mk-review { grid-template-columns: 1fr; } .mk-review .mk-frame { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 420px) { .mk-grid { grid-template-columns: 1fr; } }