/* ============================================================
   Marketplace page (js/marketplace.js) — PatchWork Standard.
   Only `.mk-*` selectors and the two sections' in-Marketplace
   modifiers live here; the sections keep their own sheets
   (css/templates.css, css/brain.css).
   ============================================================ */

#home-tab-marketplace.home-tab-active {
    height: 100%;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
    padding: 0;
    background: var(--sl-app);
}
.mk-page {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    font-family: var(--sl-font-ui); color: var(--sl-text-1); background: var(--sl-app);
}
.mk-head { flex: none; padding: 30px 40px 0; }
.mk-title { margin: 0; }
.mk-sub { font-size: 12.5px; color: var(--sl-text-2); margin: 8px 0 0; max-width: 620px; line-height: 1.5; }
/* Six sections: on a narrow window the row scrolls sideways instead of widening the page. */
.mk-tabs { margin-top: 20px; gap: 0 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }

.mk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Templates section: the page (grid + drawer) fills the body; the Marketplace head is its title. */
.mk-body > .tpl-page { flex: 1; height: auto; min-height: 0; }
.tpl-page.is-market .tpl-main { padding-top: 6px; }
/* Brains section */
.mk-body > .br-page { flex: 1; height: auto; min-height: 0; }

@media (max-width: 900px) {
    .mk-head { padding-left: 16px; padding-right: 16px; }
}

/* ── Skills, Asset packs, Presets (js/market-items.js) ─────────── */
.mki-ic { display: inline-flex; flex: none; }
.mki-ic svg { display: block; }
.mki-blurb { font-size: 12.5px; color: var(--sl-text-2); margin: 12px 0 0; max-width: 680px; line-height: 1.5; }
.mki-grid-wrap { margin-top: 16px; }
.mki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mki-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; min-width: 0; outline: none; }
.mki-card:focus-visible { border-color: var(--sl-focus); }
.mki-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; flex: 1; }
.mki-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mki-summary { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mki-card .br-card-meta { margin-top: 2px; gap: 12px; font-size: 11.5px; }
.mki-got { font-size: 11.5px; }
.mki-tile { height: 96px; display: flex; align-items: center; justify-content: center; background: var(--sl-panel); color: var(--sl-text-3); border-bottom: 1px solid var(--sl-hairline); }
.mki-collage { height: 120px; display: grid; gap: 2px; background: var(--sl-hairline); border-bottom: 1px solid var(--sl-hairline); }
.mki-collage.is-1 { grid-template-columns: 1fr; }
.mki-collage.is-2 { grid-template-columns: 1fr 1fr; }
.mki-collage.is-3, .mki-collage.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mki-collage.is-3 > :first-child { grid-row: span 2; }
.mki-collage img, .mki-collage video { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; pointer-events: none; }

/* detail + publish dialogs (on body, above Settings: .br-scrim) */
.mki-detail-head { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.mki-detail-head > .mki-tile, .mki-detail-head > .mki-collage { border-radius: var(--sl-r-8); border: 1px solid var(--sl-hairline); }
.mki-detail-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mki-rate { display: flex; align-items: center; gap: 12px; }
.mki-contents { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.mki-files { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--sl-text-2); margin: 6px 0 10px; }
.mki-pre { margin: 6px 0 0; padding: 10px 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
    font-family: var(--sl-font-mono); font-size: 11.5px; line-height: 1.55; color: var(--sl-text-1);
    background: var(--sl-app); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); }
.mki-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-items: baseline; font-size: 12.5px; margin-bottom: 10px; }
.mki-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.mki-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--sl-r-8); font: inherit; color: inherit; text-align: left; }
.mki-fig img, .mki-fig video, .mki-fig .mki-audio { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sl-r-8); background: var(--sl-panel); display: flex; align-items: center; justify-content: center; color: var(--sl-text-3); }
.mki-fig figcaption { font-size: 11px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.mki-pickable { cursor: pointer; padding: 3px; }
.mki-pickable:hover { background: var(--sl-wash); }
.mki-pickable.is-on { border-color: var(--sl-accent); background: var(--sl-selected); }
.mki-pick { max-height: 360px; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mki-pick .mki-media { margin-top: 6px; }
.mki-pick-head { display: flex; align-items: center; gap: 10px; }
.mki-file { flex-direction: column; gap: 4px; }
.mki-ext { font: 600 10px/1 var(--sl-font-mono, monospace); letter-spacing: 0.04em; color: var(--sl-text-2); }
.mki-figcap { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mki-figname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mki-dl { flex: none; padding: 2px 4px; }
.mki-choose { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); padding: 4px; }
.mki-choice { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--sl-text-1); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.mki-choice:hover { background: var(--sl-wash); }
.mki-choice.is-on { border-color: var(--sl-accent); background: var(--sl-selected); }
.mki-choice-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mki-choice-sub { font-size: 11px; color: var(--sl-text-3); white-space: nowrap; }
.mki-outgoing { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--sl-text-2); }
.mki-outgoing .mki-files { max-height: 140px; overflow-y: auto; margin: 2px 0 0; }
.mki-risks { display: flex; flex-direction: column; gap: 6px; }
.mki-consent .mki-files { max-height: 200px; overflow-y: auto; }
.mki-filebox { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; padding-right: 2px; }
.mki-sfile-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--sl-text-1); }
.mki-sfile-tag { font-size: 11px; color: var(--sl-text-3); }
.mki-consent .mki-pre { max-height: none; overflow: visible; }
.mki-diff-line { display: block; }
.mki-diff-line.is-add, .mki-diff.is-new { background: color-mix(in srgb, var(--sl-success, #2e9e5b) 14%, transparent); }
.mki-diff-line.is-del { background: color-mix(in srgb, var(--sl-danger, #d0453b) 14%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sl-danger, #d0453b) 50%, transparent); }
.mki-changes { color: var(--sl-text-1); }

@media (max-width: 720px) {
    .mki-detail-head { grid-template-columns: minmax(0, 1fr); }
}