/* Market — Tuned Library. Thin-client view over the tuning-server pull.
   Reuses app.css tokens (--border / --text-* / --bg-* / --accent) + shared
   classes (.qf-header, .kpi-ribbon, .data-card, .pro-table, .btn, .modal).
   Only the mk-* specifics live here. Minimalist: hairlines + glyph/dot state,
   no boxed cards for list rows. */

.mk-page { display: flex; flex-direction: column; gap: 1.1rem; }

/* ── Source status pill (pulled / unreachable / empty) ───────────────── */
.mk-source {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; color: var(--text-muted);
    padding: 0.25rem 0.6rem; border: 1px solid var(--border);
    border-radius: 999px; white-space: nowrap;
}
.mk-source .mk-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted); flex: 0 0 auto;
}
.mk-source[data-state="ok"]      { color: var(--text-primary); }
.mk-source[data-state="ok"]      .mk-dot { background: #22c55e; }
.mk-source[data-state="empty"]   .mk-dot { background: #f59e0b; }
.mk-source[data-state="error"]   { color: #f87171; border-color: rgba(248,113,113,0.4); }
.mk-source[data-state="error"]   .mk-dot { background: #f87171; }
.mk-source[data-state="loading"] .mk-dot { background: var(--accent); animation: mk-pulse 1s ease-in-out infinite; }
@keyframes mk-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── Section heading (hairline underline, no card chrome) ────────────── */
.mk-section { display: flex; flex-direction: column; gap: 0.55rem; }
.mk-section-head {
    display: flex; align-items: baseline; gap: 0.7rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.mk-section-head h2 {
    margin: 0; font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.01em; color: var(--text-primary);
}
.mk-sub { font-size: 0.76rem; color: var(--text-muted); }

/* ── Rails (exchange tabs + timeframe filter) ────────────────────────── */
.mk-rail { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mk-tab {
    appearance: none; cursor: pointer;
    font: inherit; font-size: 0.8rem;
    padding: 0.3rem 0.7rem; border-radius: 6px;
    background: transparent; color: var(--text-muted);
    border: 1px solid transparent;
}
.mk-tab:hover { color: var(--text-primary); }
.mk-tab.is-active {
    color: var(--text-primary);
    background: var(--bg-primary, rgba(255,255,255,0.04));
    border-color: var(--border);
}
.mk-tab .mk-count { color: var(--text-muted); margin-left: 0.35rem; font-size: 0.72rem; }
.mk-tf-rail .mk-tab { padding: 0.24rem 0.6rem; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.pro-table th.num, .pro-table td.num { text-align: right; }
.pro-table th.act, .pro-table td.act { text-align: right; white-space: nowrap; }
.mk-shard-table td, .mk-pair-table td { vertical-align: middle; }
.mk-sym { font-weight: 600; color: var(--text-primary); }
.mk-vertical, .mk-src { color: var(--text-muted); font-size: 0.8rem; }

/* status glyph in shard table */
.mk-st { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.mk-st::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
}
.mk-st[data-st="ready"]::before,
.mk-st[data-st="verified"]::before { background: #22c55e; }
.mk-st[data-st="building"]::before { background: var(--accent); }
.mk-st[data-st="planned"]::before  { background: #f59e0b; }
.mk-st[data-st="error"]::before    { background: #f87171; }

.mk-tf-badge {
    font-size: 0.72rem; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.05rem 0.35rem;
}

.mk-add-btn { font-size: 0.76rem; padding: 0.22rem 0.6rem; }
.mk-added { color: #22c55e; font-size: 0.76rem; }

/* empty / error placeholder rows */
.mk-empty td {
    text-align: center; color: var(--text-muted);
    padding: 1.4rem 0.5rem; font-size: 0.82rem;
}

/* ── Add modal specifics ─────────────────────────────────────────────── */
#mk-add-modal .modal-content { max-width: 460px; }
.mk-add-target {
    font-size: 0.9rem; color: var(--text-primary);
    padding: 0.5rem 0.7rem; margin: 0 0.7rem 0.6rem;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-primary, rgba(255,255,255,0.03));
}
.mk-add-msg {
    margin: 0.5rem 0.7rem 0; padding: 0.5rem 0.7rem;
    border-radius: 6px; font-size: 0.8rem;
}
.mk-add-msg[data-kind="err"] { color: #f87171; background: rgba(248,113,113,0.1); }
.mk-add-msg[data-kind="ok"]  { color: #22c55e; background: rgba(34,197,94,0.1); }