/* ============================================================================
 * SBP Marketplace — the few things the marketing site's components.css
 * does not already have. Tokens, base and components are copied verbatim
 * from slowbookspro.com so the two sites read as one.
 * ============================================================================ */

/* Hero: interior-page weight, graph-paper substrate like the site's hero. */
.mk-hero {
    padding: var(--page-top) 0 var(--section-y);
    background:
        linear-gradient(180deg, rgba(246, 241, 228, 0.9), var(--content-bg)),
        var(--pattern-graph), var(--qb-cream);
}
.mk-hero h1 { font-size: var(--text-5xl); margin: var(--sp-4) 0 var(--sp-5); max-width: 18ch; }
.mk-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* Catalog grid: the site's feature-card, without a picture well. */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}
@media (max-width: 1023px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .mk-grid { grid-template-columns: 1fr; } }

a.mk-card { color: inherit; }
a.mk-card:hover { color: inherit; }
.mk-card p { font-size: var(--text-base); margin-bottom: var(--sp-4); }
.mk-card__stamps { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mk-card__meta {
    display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-muted);
    padding-top: var(--sp-3); border-top: 1px solid var(--panel-border);
}
.mk-card .feature-card__more { color: var(--qb-navy-mid); }

/* Plugin page */
.mk-plugin__head { padding: var(--page-top) 0 var(--section-y); background: var(--pattern-cross), var(--content-bg); }
.mk-plugin__head h1 { font-size: var(--text-4xl); margin: var(--sp-4) 0 var(--sp-4); }
.mk-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4);
    margin-top: var(--sp-6); padding: var(--sp-5);
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.mk-facts dt { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.mk-facts dd { margin-top: var(--sp-1); font-weight: 600; color: var(--ink); }

/* README body */
.mk-prose h2 { font-size: var(--text-2xl); margin: var(--sp-8) 0 var(--sp-3); }
.mk-prose h2:first-child { margin-top: 0; }
.mk-prose h3 { font-size: var(--text-xl); margin: var(--sp-6) 0 var(--sp-2); }
.mk-prose h4 { margin: var(--sp-5) 0 var(--sp-2); }
.mk-prose p, .mk-prose li { font-size: var(--text-base); }
.mk-prose ul, .mk-prose ol { padding-left: 1.4rem; margin: var(--sp-3) 0; }
.mk-prose li + li { margin-top: var(--sp-1); }
.mk-prose pre { background: var(--qb-navy-dark); color: var(--text-on-dark); margin: var(--sp-4) 0; }

/* Numbered install steps: the site's release-list rhythm, one step per row. */
.install-steps { list-style: none; counter-reset: step; display: grid; gap: var(--sp-3); padding: 0; }
.install-steps > li {
    counter-increment: step;
    display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); align-items: baseline;
    padding: var(--sp-4) var(--sp-5);
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-left: 3px solid var(--qb-gold); border-radius: var(--radius-sm);
    font-size: var(--text-base); color: var(--text-secondary);
}
.install-steps > li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); font-size: var(--text-sm);
}
.install-steps ul { margin-top: var(--sp-2); padding-left: 1.2rem; }
.install-steps .btn { vertical-align: middle; margin: 0 var(--sp-1); }

/* Disclosure */
.mk-prefixes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; }
.mk-table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-bg); }
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mk-table th { text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: var(--sp-2) var(--sp-4); background: var(--toolbar-bg); border-bottom: 1px solid var(--toolbar-border); }
.mk-table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--panel-border); }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-table td:first-child { width: 6rem; }