/* ──────────────────────────────────────────────────────────────────────────
   The shop's shell. Tokens and components come from Fey.Web.Shared; this file
   is only the pieces that are this app's own.

   Every class here is prefixed `mk-`. Not decoration: the back office shipped
   with `ad-` and ad blockers hid its entire navigation rail — `.ad-rail` reads
   as an advert to every filter list in the world, and the bug cost a day of
   looking at the wrong layer. `ad-` must never come back, and nothing in here
   should be named after anything a blocker recognises: no `banner`, no
   `promo`, no `sponsor`. This is a shop, so that list matters more here than
   anywhere else.
   ────────────────────────────────────────────────────────────────────────── */

.mk-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fey-bg);
}

/* ── The bar ── */

.mk-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    height: 56px;
    border-bottom: 1px solid var(--fey-line);
    background: var(--fey-surface);
    position: sticky;
    top: 0;
    z-index: 20;
}

.mk-brand {
    font-family: 'Instrument Serif', serif;
    font-size: 21px;
    color: var(--fey-ink);
    text-decoration: none;
    white-space: nowrap;
}

.mk-brand-dot { color: var(--fey-accent); }

.mk-brand-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fey-ink-faint);
    margin-left: 7px;
}

.mk-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.mk-nav::-webkit-scrollbar { display: none; }

.mk-nav-item {
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--fey-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.mk-nav-item:hover { background: var(--fey-surface-sunk); color: var(--fey-ink); }

.mk-nav-item.active {
    background: var(--fey-surface-sunk);
    color: var(--fey-ink);
    font-weight: 550;
}

.mk-bar-end {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mk-who {
    font-size: 12.5px;
    color: var(--fey-ink-soft);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-leave {
    font-size: 12.5px;
    color: var(--fey-ink-faint);
    text-decoration: none;
}

.mk-leave:hover { color: var(--fey-ink); }

/* ── The strip that says no money moves ──
   Full width and above the content, because a seller who packages an afternoon
   of work deserves to know before they start, not at the checkout. */

.mk-testbar {
    padding: 7px 24px;
    font-size: 12px;
    text-align: center;
    color: var(--fey-warn-ink, #8a6400);
    background: var(--fey-warn-bg, #fff6e0);
    border-bottom: 1px solid var(--fey-line);
}

/* ── Pages ── */

.mk-main { flex: 1; }

.mk-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 36px 24px 72px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mk-narrow { max-width: 620px; }

.mk-head { display: flex; flex-direction: column; gap: 4px; }

.mk-title {
    font-family: 'Instrument Serif', serif;
    font-size: 30px;
    font-weight: 400;
    margin: 0;
    color: var(--fey-ink);
}

.mk-body {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fey-ink-soft);
    white-space: pre-wrap;
}

.mk-foot-note { font-size: 12px; }

/* ── The shelf ── */

.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.mk-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--fey-line);
    border-radius: var(--fey-radius, 12px);
    background: var(--fey-surface);
    text-decoration: none;
    transition: border-color .12s, transform .12s;
}

.mk-tile:hover {
    border-color: var(--fey-accent);
    transform: translateY(-1px);
}

.mk-tile-name {
    font-weight: 550;
    font-size: 14.5px;
    color: var(--fey-ink);
}

.mk-tile-desc {
    margin: 0;
    flex: 1;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fey-ink-soft);

    /* Three lines, then stop. A tile that grows with its description turns the
       shelf into a ragged column and makes the prices impossible to compare. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-tile-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
}

.mk-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--fey-ink);
}

.mk-price-lg { font-size: 26px; }

/* ── Buying ── */

.mk-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.mk-buy-note { margin: 2px 0 0; font-size: 11.5px; }

.mk-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 18px;
    margin: 0;
    font-size: 12.5px;
}

.mk-facts dt { color: var(--fey-ink-faint); }
.mk-facts dd { margin: 0; color: var(--fey-ink-soft); }

.mk-digest {
    font-size: 11px;
    color: var(--fey-ink-faint);
    overflow-wrap: anywhere;
}

/* ── Rows ── */

.mk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--fey-line);
    border-radius: 9px;
}

.mk-row-name { font-weight: 550; font-size: 13.5px; color: var(--fey-ink); }

.mk-note {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.5;
}

.mk-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Review ── */

.mk-review {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    border: 1px solid var(--fey-line);
    border-radius: 10px;
}

.mk-review-act {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}

.mk-review-act .fey-input { flex: 1; min-width: 0; }

/* ── Narrow ── */

@media (max-width: 640px) {
    .mk-bar { gap: 12px; padding: 0 16px; }
    .mk-brand-tag { display: none; }
    .mk-who { display: none; }
    .mk-page { padding: 24px 16px 56px; }
    .mk-two { grid-template-columns: 1fr; }
    .mk-review-act { flex-direction: column; align-items: stretch; }
}

/* ── Shelves: starters and MCPs ── */
.mk-tabs { display: flex; gap: 4px; margin: var(--s4) 0; border-bottom: 1px solid var(--fey-line); }
.mk-tab {
    padding: 8px 12px;
    margin-bottom: -1px;
    font-size: 13.5px;
    color: var(--fey-ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.mk-tab:hover { color: var(--fey-ink); }
.mk-tab.is-on { color: var(--fey-ink); font-weight: 550; border-bottom-color: var(--fey-primary); }

/* Picking which MCP project to list: the whole row is the target. */
.mk-pick { cursor: pointer; }
.mk-pick input { margin: 0; }

/* The way from the starter form to the MCP one. */
.mk-mcp-link { text-decoration: none; color: inherit; margin-bottom: var(--s4); }
.mk-mcp-link:hover { border-color: var(--fey-primary); }