/* ─────────────────────────────────────────────────────────────
   CapraSEO — Marketplace catalog

   Each site is a listing card (.mk-card): a header (domain + health
   verdict), a metrics strip (DR / traffic / country / link), and a
   grid of marketplace offer-cards. Reuses the chip filter bar
   (chat.css) and the search/foot styling (keywords.css).
   ───────────────────────────────────────────────────────────── */

/* ── Site cards ──────────────────────────────────────────────────── */
/* Standalone list — the media cards live outside the filter card, so no
   inner padding; each .mk-card carries its own card chrome. */
.mk-list { display: flex; flex-direction: column; gap: 12px; }
/* The footer (count + Show more) floats below the list, not inside a card. */
.mk-list + .kw-foot { border-top: 0; padding: 0 6px; }
.mk-card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.022), rgba(var(--wash-rgb), 0.008));
  overflow: hidden;
  /* Whole card is clickable (opens the detail page). */
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.mk-card:hover {
  border-color: rgba(var(--wash-rgb), 0.14);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.8);
}
.mk-card-main { flex: 1; min-width: 0; padding: 14px 16px; }

/* ── Left "live vetting screen" panel ──────────────────────────── */
.mk-panel {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(var(--accent-rgb),0.04);
  border-right: 1px solid var(--line);
}
.mk-panel-empty { background: rgba(var(--wash-rgb), 0.015); }
.mk-panel-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  height: 24px; padding: 0 10px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 600; border: 1px solid transparent;
}
.mk-panel-stats { display: flex; flex-direction: column; gap: 7px; }
.mk-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-stat-label { font-size: 11px; color: var(--muted-2); }
.mk-stat-val { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-stat-unit { font-size: 10px; color: var(--muted-2); font-weight: 400; margin-left: 1px; }
.mk-stat-na { color: var(--muted-2); }
.mk-s-low { color: var(--cyan-1); }
.mk-s-mid { color: var(--gold-2); }
.mk-s-high { color: var(--red-2); }
.mk-panel-foot { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); margin-top: auto; }
.mk-panel-foot-ph { color: rgba(var(--accent-rgb),0.55); }

.mk-card-head { display: flex; align-items: center; gap: 12px; }
.mk-site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
}
.mk-site:hover { color: var(--accent-text); }
.mk-site .mk-ext { opacity: 0; transition: opacity 140ms ease; }
.mk-site:hover .mk-ext { opacity: 0.7; }

/* Health badge — verdict word + score from the import */
.mk-health {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: var(--r-chip);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mk-h-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--r-chip);
  font-variant-numeric: tabular-nums;
  background: rgba(var(--well-rgb), var(--well-a25));
}
.mk-h-buy     { background: rgba(var(--accent-rgb),0.14);  color: var(--cyan-1); border-color: rgba(var(--accent-rgb),0.30); }
.mk-h-caution { background: rgba(234,179,8,0.12);  color: var(--gold-2); border-color: rgba(234,179,8,0.28); }
.mk-h-avoid   { background: rgba(239,68,68,0.12);  color: var(--red-2); border-color: rgba(239,68,68,0.28); }
.mk-h-none    { background: rgba(var(--wash-rgb), 0.04); color: var(--muted-2); border-color: var(--line); font-weight: 500; }
.mk-h-live { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; animation: mk-pulse 2s ease-in-out infinite; }
@keyframes mk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Metrics strip */
.mk-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--muted);
}
.mk-meta .mk-sep { color: var(--muted-2); }
.mk-meta-badges { display: inline-flex; gap: 6px; margin-left: 2px; }
.mk-m { color: var(--muted); }

/* DR pill */
.mk-dr {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(var(--wash-rgb), 0.05);
  color: var(--muted);
}
.mk-dr-hi  { background: rgba(var(--accent-rgb),0.16);  color: var(--cyan-1); }
.mk-dr-mid { background: rgba(234,179,8,0.14);   color: var(--gold-2); }
.mk-dr-lo  { background: rgba(var(--wash-rgb), 0.05); color: var(--muted); }

/* Link / placement badges */
.mk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-chip);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.mk-do   { background: rgba(var(--accent-rgb),0.14);  color: var(--cyan-1); }
.mk-no   { background: rgba(var(--wash-rgb), 0.05); color: var(--muted); }
.mk-type {
  background: rgba(var(--wash-rgb), 0.04);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* Marketplace offer cards */
.mk-offer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.mk-offer-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 116px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(var(--wash-rgb), 0.022);
  transition: border-color 140ms ease, background 140ms ease;
}
.mk-offer-card:hover { border-color: rgba(var(--wash-rgb), 0.16); background: rgba(var(--wash-rgb), 0.05); }
.mk-offer-name {
  font-size: 11.5px;
  color: var(--muted);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}
a.mk-offer-name:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mk-offer-price {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mk-offer-card.mk-niche { border-color: rgba(var(--accent-rgb),0.30); background: rgba(var(--accent-rgb),0.06); }
.mk-offer-card.mk-niche .mk-offer-price { color: var(--cyan-1); }
.mk-offer-more {
  justify-content: center;
  align-items: center;
  color: var(--muted-2);
  font-size: 12px;
  min-width: 70px;
}

.mk-niche-tag {
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(var(--accent-rgb),0.18);
  color: var(--cyan-1);
}

.mk-dim { color: var(--muted-2); font-size: 12.5px; }

/* ── Sort segmented control (replaces the table's sortable headers) ── */
.mk-sort { display: inline-flex; align-items: center; gap: 4px; }
.mk-sort-label { color: var(--muted-2); font-size: 12px; margin-right: 4px; }
.mk-sort-btn {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--wash-rgb), 0.03);
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
}
.mk-sort-btn:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.16); }
.mk-sort-btn.is-active {
  color: var(--mint-1);
  border-color: rgba(var(--accent-rgb),0.5);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.06));
}
.mk-sort-dir { font-variant-numeric: tabular-nums; margin-left: 4px; font-size: 10px; }

/* The .mk-tip styles lived here — a private copy of the instant-tooltip
   material. Removed 2026-07-27: this page's tips are `data-tip` now, and
   the one shared .cs-tip in css/main.css styles them. */

/* "How we rank" — ghost button + plain-language legend panel */
.mk-howrank {
  height: 30px;
  padding: 0 11px;
  margin-left: auto;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}
.mk-howrank:hover, .mk-howrank.is-open { color: var(--text); border-color: rgba(var(--wash-rgb), 0.2); }
.mk-howrank-panel {
  margin: 0 20px 4px;
  padding: 14px 20px;
  max-width: 720px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--wash-rgb), 0.02);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}
/* In Simple the panel is the last thing in the card, so it needs the
   bottom breathing room the sort bar normally provides. */
.mk-simple:not([hidden]) + .mk-howrank-panel:not([hidden]) { margin-bottom: 18px; }
.mk-howrank-panel p { margin: 0 0 10px; }
.mk-howrank-panel p:last-child { margin-bottom: 0; }
.mk-howrank-panel strong { color: var(--text); font-weight: 600; }

/* ── Filter bar: chip dropdowns (reuses .chip/.menu/.menu-item from
   chat.css for the front-page look) ──────────────────────────────── */

/* The filter dropdowns open downwards out of this card, and the base .card
   (account.css) fights them on two fronts at once:
     overflow: hidden    clips the menu at the card's bottom edge;
     backdrop-filter     creates a stacking context, so the menu's z-index:10
                         is trapped inside the card and cannot rise above the
                         *later* sibling cards — the agent card and the result
                         list — which therefore paint over it in DOM order.
   The visible symptom is a single bug ("the filter options disappear behind
   the first result card"), so both halves have to be undone together:
   un-clipping without raising the card just yields a full menu rendered
   underneath. Dropping overflow is safe — nothing here relies on the clip,
   and the rounded corners come from border-radius on the background itself. */
.mk-filter-card {
  overflow: visible;
  position: relative;
  z-index: 5;
}

/* ── Pinned filters ──────────────────────────────────────────────
   The page header doesn't scroll, so once you were a few results down
   the screen was holding a title you'd already read while every control
   you needed to change your mind had scrolled away. The card follows you
   instead, and condenses to a single working row while it does: goals (or
   the ranking row), the narrowing chips, the match count. Everything else
   — titles, descriptions, the "already excluded" note, the safety
   toggles — is set-once, so it collapses behind the chevron.

   Same DOM, two densities: no duplicate controls to keep in sync, and no
   state that can drift between a bar and a card. */
@media (min-width: 769px) {
  .mk-filter-card { position: sticky; top: 0; }
}
/* Marks where the card rests. Absolute so the scroll column's flex `gap`
   doesn't reserve a row for it. */
.mk-stick-sentinel,
.mk-head-sentinel {
  position: absolute; left: 0;
  width: 1px; height: 1px; pointer-events: none;
}
.mk-stick-sentinel { top: 0; }
/* Far enough down that a 1px nudge of the wheel can't fold the header. */
.mk-head-sentinel { top: 48px; }

/* ── Header folds away on scroll ─────────────────────────────────
   `.stage-top` and `.mk-target` sit OUTSIDE the scroll column, so they were
   permanently holding ~150px for a title you've already read and a domain
   name the sidebar's switcher shows anyway. Once you're past the first
   results they fold, and the pinned filter bar rises into the space.

   ≥769px only: below that the whole .stage scrolls, header included, so
   there's nothing to reclaim. max-height (not display) so it animates, and
   the value is a ceiling — the real block is ~150px. */
@media (min-width: 769px) {
  body[data-page="marketplace"] .stage-top,
  body[data-page="marketplace"] .mk-target {
    max-height: 240px;
    transition: max-height 180ms ease, padding 180ms ease,
                margin 180ms ease, opacity 130ms ease;
  }
  body[data-page="marketplace"].mk-scrolled .stage-top,
  body[data-page="marketplace"].mk-scrolled .mk-target {
    max-height: 0;
    padding-top: 0; padding-bottom: 0; margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    border-bottom-color: transparent;
    pointer-events: none;
  }
}
/* Keeps its own rounded shape — it stops at the top of the scroll column,
   not at the viewport edge, so a squared-off top would read as a bug. The
   shadow is what says "floating above the results". */
.mk-filter-card.is-stuck {
  z-index: 30;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.9);
}
/* Once the header has folded the bar is flush against the top of the app,
   so the rounded top corners have nothing to sit on. (Before the fold it
   stops below the header and keeps its full shape — see above.) */
body.mk-scrolled .mk-filter-card.is-stuck {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Condensed: everything that explains rather than filters steps aside. */
.mk-filter-card.is-stuck:not(.is-expanded) .card-head > div:first-child,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-simple-head,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-goal-sub,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-simple-note,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-sort-explain,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-howrank,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-group-label,
.mk-filter-card.is-stuck:not(.is-expanded) .mk-howrank-panel,
/* Advanced keeps the ranking row (the one thing you change mid-scroll)
   and folds the rest — sliders, chips, safety, scope — behind expand. */
.mk-filter-card.is-stuck:not(.is-expanded) .mk-group ~ .mk-group {
  display: none;
}
.mk-filter-card.is-stuck:not(.is-expanded) .card-head {
  padding-top: 10px; padding-bottom: 10px; min-height: 0;
}
/* With the title hidden, the head's only child would drift to the left
   edge; keep the controls where the eye already expects them. */
.mk-filter-card.is-stuck:not(.is-expanded) .head-actions { margin-left: auto; }
.mk-filter-card.is-stuck:not(.is-expanded) .mk-simple-label { display: none; }
.mk-filter-card.is-stuck:not(.is-expanded) .mk-simple { padding: 4px 20px 12px; }
.mk-filter-card.is-stuck:not(.is-expanded) .mk-advanced { padding-bottom: 10px; }
.mk-filter-card.is-stuck:not(.is-expanded) .mk-group { padding-top: 4px; }
.mk-filter-card.is-stuck:not(.is-expanded) .mk-simple-row { margin-top: 8px; }
/* Goal cards → goal pills. */
.mk-filter-card.is-stuck:not(.is-expanded) .mk-goals {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mk-filter-card.is-stuck:not(.is-expanded) .mk-goal {
  padding: 6px 12px; border-radius: 999px;
}
.mk-filter-card.is-stuck:not(.is-expanded) .mk-goal-label { font-size: 12.5px; font-weight: 500; }

.mk-stuck-count { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.mk-stuck-count[hidden] { display: none; }
.mk-expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted-2); cursor: pointer;
  transition: all 140ms ease;
}
.mk-expand:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.2); }
.mk-expand[hidden] { display: none; }
.mk-expand svg { transition: transform 160ms ease; }
.is-expanded .mk-expand svg { transform: rotate(180deg); }
@media (max-width: 720px) {
  /* theme.css already pins menus to the viewport on small screens, so the
     escape hatch isn't needed there and a raised card would sit over the
     sticky chrome. (The pinned state above is desktop-only for the same
     reason — on mobile the whole stage scrolls, header included, so the
     header isn't stealing height from the filters in the first place.) */
  .mk-filter-card { z-index: auto; }
}

.mk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  /* Last row of the filter card — no separator against the card edge. */
}
.mk-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Reset moved out of the toolbar and into the Scope row (.mk-scope-row). */

/* A slightly taller, more substantial chip than the composer's, sized
   for a filter bar; selected state gets the accent treatment. */
.mk-filters .chip {
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  backdrop-filter: none;
}
.mk-filters .chip:hover,
.mk-filters .chip.open {
  background: rgba(var(--wash-rgb), 0.06);
  border-color: rgba(var(--wash-rgb), 0.14);
  color: var(--text);
}
.mk-filters .chip.is-set {
  border-color: rgba(var(--accent-rgb),0.55);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.07));
  color: var(--mint-1);
}
.mk-filters .chip.is-set .chip-label { color: var(--mint-1); font-weight: 500; }
.mk-filters .chip.is-set::before {
  content: "";
  width: 6px; height: 6px; margin-right: 1px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb),0.7);
  flex-shrink: 0;
}
.mk-filters .chip .chip-label { max-width: 220px; }

/* Menu: scrollable + a sticky type-to-filter box for the long lists */
.mk-menu {
  min-width: 200px; max-height: 320px; display: flex; flex-direction: column;
  /* Opaque, not the shared .menu's 95%-plus-blur. These menus now open from
     a pinned bar over a dense result list rather than over empty space, and
     a publisher's DR and domain name reading through the country list makes
     both unreadable. */
  background: var(--panel-2);
}
.mk-menu-list {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wash-rgb), 0.18) transparent;
}
.mk-menu-list::-webkit-scrollbar { width: 4px; }
.mk-menu-list::-webkit-scrollbar-thumb { background: rgba(var(--wash-rgb), 0.18); border-radius: 4px; }
.mk-menu-search { padding: 2px 2px 6px; }
.mk-menu-search input {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  background: rgba(var(--well-rgb), var(--well-a25));
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
}
.mk-menu-search input:focus { border-color: rgba(var(--accent-rgb),0.4); }
.mk-menu .menu-item { padding: 8px 10px; font-size: 12.5px; }
.mk-menu .mi-count { color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.mk-menu .mi-label { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════
   Score-first redesign — Link Value Score, relevance, plain-language
   flags, smart presets, target context bar, DR range slider.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Target context bar ──────────────────────────────────────────── */
.mk-target {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px; padding: 11px 20px;
  font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.05), rgba(var(--accent-rgb),0.015));
}
.mk-target-partial { background: linear-gradient(180deg, rgba(234,179,8,0.06), rgba(234,179,8,0.015)); }
.mk-target-none { background: rgba(var(--wash-rgb), 0.012); color: var(--muted-2); }
.mk-target strong { color: var(--text); font-weight: 600; }
.mk-target a { color: var(--accent-text); text-decoration: none; }
.mk-target a:hover { text-decoration: underline; }
.mk-target-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.7); flex-shrink: 0; }
.mk-target-partial .mk-target-dot { background: var(--gold-2); box-shadow: 0 0 6px rgba(234,179,8,0.7); }
.mk-target-none .mk-target-dot { background: var(--muted-2); box-shadow: none; }
.mk-target-niche { padding: 2px 9px; border-radius: var(--r-chip); font-size: 11.5px; background: rgba(var(--accent-rgb),0.12); color: var(--cyan-1); }
.mk-target-meta { color: var(--muted-2); font-size: 12px; }

/* ── Simple / Advanced ───────────────────────────────────────────
   A per-card control density switch, not the app-wide nav mode that was
   removed on 2026-07-27. Simple shows a goal + three plain controls;
   Advanced shows the full instrument panel in labelled groups. */
.mk-mode-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--wash-rgb), 0.03);
}
.mk-mode-seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--muted-2);
  padding: 4px 12px; border-radius: 999px; transition: all 140ms ease;
}
.mk-mode-seg button:hover { color: var(--text); }
.mk-mode-seg button[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.14); color: var(--mint-1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.mk-simple { padding: 16px 20px 18px; }
.mk-simple-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--muted-2); margin-bottom: 10px;
}
.mk-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.mk-goal {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(var(--wash-rgb), 0.03);
  transition: all 140ms ease;
}
.mk-goal:hover { border-color: rgba(var(--wash-rgb), 0.18); background: rgba(var(--wash-rgb), 0.05); }
.mk-goal-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mk-goal-sub { font-size: 11.5px; color: var(--muted-2); line-height: 1.45; }
.mk-goal[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
}
.mk-goal[aria-pressed="true"] .mk-goal-label { color: var(--mint-1); }

.mk-simple-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mk-simple-label { font-size: 12px; color: var(--muted-2); margin-right: 2px; }
.mk-simple-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mk-simple-row .kw-reset { margin-left: auto; }
.mk-simple-note { margin: 12px 0 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }
/* A button that reads as a link — the note is prose, and a chip in the
   middle of a sentence would read as another filter. */
.mk-link-btn {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--mint-1);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Advanced: labelled groups ───────────────────────────────────
   The old card put ranking, intent filters and safety rails in one
   undifferentiated stack, so a beginner read ten toggles as ten equal
   decisions. The labels say which ones are which. */
.mk-group { padding-top: 12px; }
/* The last group in the card needs the bottom padding the old single-row
   toolbar used to provide. */
.mk-advanced { padding-bottom: 14px; }
.mk-scope-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mk-scope-row .mk-presets { flex: 1 1 auto; }
/* margin, not padding: the underline should stop 20px from the card edge,
   not run under an invisible 20px of button. */
.mk-scope-row .kw-reset { margin-left: auto; margin-right: 20px; }
.mk-group + .mk-group { border-top: 1px solid var(--line-soft, rgba(var(--wash-rgb), 0.06)); margin-top: 4px; }
.mk-group-label {
  display: block; padding: 0 20px 2px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2);
}
.mk-group-label em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.mk-sort-explain { margin: 2px 20px 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; max-width: 76ch; }

/* ── Sort bar + "old way" nudge ──────────────────────────────────── */
.mk-sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 6px 20px 4px; }
.mk-sort-nudge { font-size: 11.5px; color: var(--gold-2); }

/* ── Smart preset toggles ────────────────────────────────────────── */
.mk-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 20px 4px; }
.mk-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--wash-rgb), 0.03); color: var(--muted);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: all 140ms ease;
}
.mk-toggle:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.16); }
.mk-toggle-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--muted-2); background: transparent;
  transition: all 140ms ease; flex-shrink: 0; position: relative;
}
.mk-toggle.is-on { color: var(--mint-1); border-color: rgba(var(--accent-rgb),0.5); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.06)); }
.mk-toggle.is-on .mk-toggle-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.6); }
.mk-toggle.is-on .mk-toggle-dot::after {
  content: ""; position: absolute; left: 3px; top: 4.5px; width: 5px; height: 2.5px;
  border-left: 1.5px solid #0b1f14; border-bottom: 1.5px solid #0b1f14; transform: rotate(-45deg);
}

/* ── Min–max range slider chips (DR + Price) ─────────────────────── */
.mk-range-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--wash-rgb), 0.03);
}
.mk-range-chip.is-set { border-color: rgba(var(--accent-rgb),0.55); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.05)); }
.mk-range-name { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mk-range-out { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; min-width: 44px; }
.mk-range-chip.is-set .mk-range-out { color: var(--mint-1); }
.mk-range-slider { position: relative; width: 116px; height: 18px; display: flex; align-items: center; }
.mk-range-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: rgba(var(--wash-rgb), 0.10); }
.mk-range-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.mk-range-input {
  position: absolute; left: 0; width: 100%; margin: 0; height: 18px;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.mk-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  background: var(--mint-1); border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.mk-range-input::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  background: var(--mint-1); border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Score-first card ────────────────────────────────────────────── */
.mk-card { position: relative; }
.mk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.mk-card.mk-tier-good::before { background: rgba(var(--accent-rgb),0.7); }
.mk-card.mk-tier-ok::before   { background: rgba(234,179,8,0.6); }
.mk-card.mk-tier-bad::before  { background: rgba(239,68,68,0.55); }

.mk-score {
  flex-shrink: 0; width: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 8px;
  border-right: 1px solid var(--line);
  background: rgba(var(--wash-rgb), 0.012);
}
.mk-score-num { font-size: 27px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted); }
.mk-score-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); }
.mk-tier-good .mk-score-num { color: var(--cyan-1); }
.mk-tier-ok   .mk-score-num { color: var(--gold-2); }
.mk-tier-bad  .mk-score-num { color: var(--red-2); }
.mk-tier-good .mk-score { background: rgba(var(--accent-rgb),0.05); }

/* Pills (relevance + value-for-money) on the card head */
.mk-pill {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: var(--r-chip); font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.mk-rel-high { background: rgba(var(--accent-rgb),0.15); color: var(--cyan-1); border-color: rgba(var(--accent-rgb),0.3); }
.mk-rel-some { background: rgba(234,179,8,0.12); color: var(--gold-2); border-color: rgba(234,179,8,0.28); }
.mk-rel-off  { background: rgba(239,68,68,0.10); color: var(--red-2); border-color: rgba(239,68,68,0.24); }
.mk-val-exc  { background: rgba(var(--accent-rgb),0.10); color: var(--cyan-1); }
.mk-val-fair { background: rgba(var(--wash-rgb), 0.05); color: var(--muted); }
.mk-val-poor { background: rgba(var(--wash-rgb), 0.03); color: var(--muted-2); }
/* Competitor-overlap pill — a competitor of the in-focus domain links here.
   Violet so it reads as a distinct "intel" signal, not a quality verdict. */
.mk-comp {
  gap: 4px; cursor: help;
  background: rgba(139,92,246,0.13); color: var(--lt41);
  border-color: rgba(139,92,246,0.32);
}
.mk-comp svg { opacity: 0.9; }
/* Top pick — GOOD verdict + 70+ Link Value. Subtle: pill + stronger stripe. */
.mk-pick {
  background: rgba(var(--accent-rgb),0.18); color: var(--accent-text);
  border-color: rgba(var(--accent-rgb),0.45); cursor: help;
}
.mk-card.mk-top-pick { border-color: rgba(var(--accent-rgb),0.35); }
.mk-card.mk-top-pick::before { background: var(--accent); }
.mk-card-head { flex-wrap: wrap; }

/* Floating "Save" badge — pushed to the right edge of the card head. */
.mk-save-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; height: 24px; padding: 0 11px;
  border-radius: var(--r-chip); font: 600 11.5px 'Inter', sans-serif; white-space: nowrap;
  color: var(--cyan-1); background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.mk-save-badge svg { flex-shrink: 0; }
.mk-save-badge:hover { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.45); }
.mk-save-badge:active { transform: translateY(0.5px); }
.mk-save-badge[data-saved="1"] {
  color: var(--mint-bg2); background: rgba(var(--accent-rgb),0.82); border-color: rgba(var(--accent-rgb),0.82);
}
.mk-save-badge[data-saved="1"]:hover { background: rgba(var(--accent-rgb),0.92); border-color: rgba(var(--accent-rgb),0.92); }

/* "Hide" badge — muted sibling of Save (Save owns margin-left:auto). */
.mk-hide-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px; height: 24px; padding: 0 11px;
  border-radius: var(--r-chip); font: 600 11.5px 'Inter', sans-serif; white-space: nowrap;
  color: var(--muted); background: rgba(var(--wash-rgb), 0.04);
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.mk-hide-badge svg { flex-shrink: 0; }
.mk-hide-badge:hover { color: var(--text); background: rgba(var(--wash-rgb), 0.08); border-color: rgba(var(--wash-rgb), 0.24); }
.mk-hide-badge:active { transform: translateY(0.5px); }

/* ── Saved links page (/marketplace/saved/) ─────────────────────── */
.saved-summary {
  margin: 2px 2px 14px; font-size: 13px; color: var(--muted);
}
.saved-summary-acq { color: var(--cyan-1); font-weight: 600; }
/* Rows are plain .mk-card clones of the marketplace list; only the
   acquired pill and remove button are saved-page-specific. */
.saved-acq {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-chip);
}
.saved-acq-yes { color: var(--mint-bg2); background: rgba(var(--accent-rgb),0.82); }
.saved-acq-no { color: rgba(var(--grey-rgb),0.55); background: rgba(var(--wash-rgb), 0.05); }
.saved-remove {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 7px;
  color: rgba(var(--grey-rgb),0.4); cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.saved-remove:hover { background: rgba(255,80,80,0.12); color: #ff8a8a; }
.saved-empty { text-align: center; padding: 40px 24px; }
.saved-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.saved-empty-copy { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 460px; margin: 0 auto; }
.saved-empty-copy a { color: var(--cyan-1); }

/* The saved/hidden hint toast (.capraseo-saved-hint) lives in main.css —
   the store also runs on the front page (chat), which doesn't load this
   file. */

/* Hidden-domains manage list (bottom of /marketplace/saved/) */
.saved-hidden { margin-top: 22px; padding: 18px 20px; }
.saved-hidden-title { font-size: 14px; font-weight: 600; color: var(--text); }
.saved-hidden-copy { margin: 6px 0 12px; font-size: 12.5px; color: var(--muted); }
.hidden-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid rgba(var(--wash-rgb), 0.06);
}
.hidden-site { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.hidden-site:hover { color: var(--text); text-decoration: underline; }
.hidden-restore {
  flex-shrink: 0; height: 26px; padding: 0 12px; border-radius: var(--r-chip);
  font: 600 11.5px 'Inter', sans-serif; color: var(--muted); cursor: pointer;
  background: rgba(var(--wash-rgb), 0.04); border: 1px solid rgba(var(--wash-rgb), 0.14);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.hidden-restore:hover { color: var(--text); background: rgba(var(--wash-rgb), 0.08); border-color: rgba(var(--wash-rgb), 0.24); }
/* Scope is the one thing a row here has to say out loud — the site name
   pushes left, the scope tag and its buttons sit together on the right. */
.hidden-row .hidden-site { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hidden-scope {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--r-chip);
  font: 600 10.5px 'Inter', sans-serif; letter-spacing: 0.02em;
  color: var(--muted); background: rgba(var(--wash-rgb), 0.05);
  border: 1px solid rgba(var(--wash-rgb), 0.12); cursor: help;
}
.hidden-scope.is-account {
  color: var(--text); background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.32);
}
.hidden-reason {
  flex-shrink: 1; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hidden-promote {
  flex-shrink: 0; height: 26px; padding: 0 12px; border-radius: var(--r-chip);
  font: 600 11.5px 'Inter', sans-serif; color: var(--muted); cursor: pointer;
  background: transparent; border: 1px solid rgba(var(--wash-rgb), 0.14);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.hidden-promote:hover {
  color: var(--text); background: rgba(var(--wash-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.42);
}
.hidden-promote[disabled] { opacity: 0.5; cursor: default; }
@media (max-width: 560px) {
  .hidden-row { flex-wrap: wrap; }
  .hidden-site { flex: 1 0 100%; }
}

/* Context line (demoted DR / traffic / country / spam) */
.mk-ctx { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.mk-ctx .mk-sep { color: var(--muted-2); }
.mk-ctx-dr { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-ctx-est { color: var(--muted-2); font-size: 11px; }

/* Plain-language flags */
.mk-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mk-flag {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 500; border: 1px solid transparent;
}
.mk-flag-good    { background: rgba(var(--accent-rgb),0.10); color: var(--cyan-1); border-color: rgba(var(--accent-rgb),0.22); }
.mk-flag-bad     { background: rgba(239,68,68,0.10); color: var(--red-2); border-color: rgba(239,68,68,0.24); }
.mk-flag-warn    { background: rgba(234,179,8,0.10); color: var(--gold-2); border-color: rgba(234,179,8,0.24); }
.mk-flag-neutral { background: rgba(var(--wash-rgb), 0.04); color: var(--muted); border-color: var(--line); }

/* ── What the publisher will publish ──────────────────────────────────
   "Regular" is the constant baseline and is styled as such — quiet, no
   accent — so the eye lands on the regulated verticals, which are the
   answer to the question a link buyer is actually asking. Deliberately
   NOT colour-coded per niche: casino isn't worse than CBD, and tinting
   them differently would imply a judgement we aren't making. */
.mk-niches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mk-niche-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
  background: rgba(var(--wash-rgb), 0.045);
  color: var(--text-2);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
/* The baseline every row shares, so it recedes and the verticals read as
   the difference between one publisher and the next. */
.mk-niche-chip.mk-niche-regular {
  background: transparent;
  color: var(--muted-2);
}

/* Cheapest offer highlight */
.mk-offer-card.mk-offer-cheap { border-color: rgba(var(--accent-rgb),0.35); }
.mk-offer-card.mk-offer-cheap .mk-offer-price { color: var(--cyan-1); }

/* Empty state */
.mk-empty { padding: 40px 20px; text-align: center; color: var(--muted-2); font-size: 13.5px; }

/* ── Mobile filters ──────────────────────────────────────────────────
   On a phone the sort buttons clipped off the right edge and the DR/Price
   range chips crammed side-by-side at a fixed 116px slider width. Let the
   sort buttons wrap, and stack the filter toolbar so each slider spans the
   full width with the filter chips wrapping cleanly beneath. */
@media (max-width: 768px) {
  .mk-sort { flex-wrap: wrap; }
  .mk-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mk-range-chip { width: 100%; height: 38px; }
  .mk-range-slider { flex: 1; width: auto; }
  .mk-filters { width: 100%; }
  /* Narrow: the scope chips already fill the row, so let Reset drop to its
     own line under them, aligned with the chips' own text. */
  .mk-scope-row .kw-reset { margin-left: 20px; margin-right: 0; margin-top: 2px; }

  /* ── List card: stack the vetting panel ───────────────────────────
     On desktop each card is [150px verdict/stats panel | main]. On a
     phone that fixed panel ate ~half the card width. Stack the card so
     the panel becomes a compact full-width strip on top: the verdict
     pill sits inline with the vetting stats laid out left-to-right
     (label over value) instead of a tall left column. */
  .mk-card { flex-direction: column; }
  .mk-score {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .mk-panel {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 11px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .mk-panel-verdict { align-self: center; }
  .mk-panel-stats {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  .mk-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
  }
  /* The "live data" footer is redundant next to the live dot on mobile. */
  .mk-panel-foot { display: none; }
}

/* ── Link-finding agent card ──────────────────────────────────────
   The compact standalone card between the filters and the inventory
   (#mk-agent-card). Accent-tinted so it reads as "yours", not another
   listing. Three states driven by marketplace-agent.js: CTA row →
   slide-down options panel → live status row. */
.mk-agent-card {
  padding: 12px 16px;
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.015)),
    var(--panel);
}
.mk-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mk-agent-row[hidden] { display: none; }
.mk-agent-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  min-width: 0;
}
.mk-agent-copy strong { color: var(--text); font-weight: 600; margin-right: 6px; }
.mk-agent-btn {
  flex-shrink: 0;
  height: 32px; padding: 0 16px;
  border: 0; border-radius: var(--r-chip);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-strong));
  color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}
.mk-agent-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mk-agent-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.mk-agent-cancel {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-chip);
  background: rgba(var(--wash-rgb), 0.03); color: var(--muted);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: all 140ms ease;
}
.mk-agent-cancel:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.16); }
.mk-agent-delete:hover { color: #f0a5a5; border-color: rgba(240,120,120,0.35); }
.mk-agent-controls { display: inline-flex; gap: 8px; flex-shrink: 0; }

/* The slide-down options panel. */
.mk-agent-panel { padding-top: 2px; }
.mk-agent-panel[hidden] { display: none; }
.mk-agent-fields { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-agent-field { display: flex; flex-direction: column; gap: 5px; min-width: 170px; }
.mk-agent-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mk-agent-input {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(var(--wash-rgb), 0.04); color: var(--text);
  font-family: inherit; font-size: 13px;
}
.mk-agent-input:focus { outline: none; border-color: var(--accent-dim); }
select.mk-agent-input option { background: #171923; color: var(--text); }
.mk-agent-summary {
  margin: 0 0 6px;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.mk-agent-note {
  margin: 0 0 12px;
  font-size: 12px; line-height: 1.5; color: var(--muted);
  max-width: 720px;
}
.mk-agent-actions { display: flex; align-items: center; gap: 10px; }
.mk-agent-err { font-size: 12.5px; color: #f0a5a5; }
.mk-agent-err[hidden] { display: none; }

/* Health pill — same palette as the /agents/ page cards (.ac-health). */
.mk-agent-health {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; margin-right: 8px;
  border-radius: var(--r-chip); white-space: nowrap;
  vertical-align: 1px;
}
.mk-agent-health.is-good      { color: #7fe3aa; background: rgba(52,211,153,0.14); }
.mk-agent-health.is-attention { color: #ffcf8f; background: rgba(245,177,74,0.16); }
.mk-agent-health.is-paused    { color: var(--lt42); background: rgba(148,163,184,0.14); }
.mk-agent-health.is-done      { color: var(--ind-2); background: rgba(129,140,248,0.16); }
.mk-agent-health.is-starting  { color: #a8c5ff; background: rgba(91,141,239,0.14); }

@media (max-width: 640px) {
  .mk-agent-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Agent-picked rows on /marketplace/saved/: the chip next to the domain
   and the one-line "why this fits" from the link-finding agent. */
.saved-agent-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: var(--r-chip);
  color: var(--accent-text); background: rgba(var(--accent-rgb),0.16);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  white-space: nowrap;
}
.saved-agent-reason {
  margin: 2px 0 8px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--muted);
}

/* Automatic-spend consent on the link-agent panel. Full width and above the
   summary line, because a control that authorises recurring charges should be
   read before the button, not after it. */
.mk-agent-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
}
.mk-agent-consent input {
  margin-top: 2px;
  accent-color: var(--accent);
  flex: none;
}
.mk-agent-consent strong { color: var(--text-1); font-weight: 600; }

/* ── Estimated-price chip (offer grids show marketplace NAMES only —
   the ≈ chip is our modelled estimate of the cheapest offer; exact
   prices are never republished, they live on the marketplaces). ── */
.mk-offer-card.mk-offer-est {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.mk-est-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-2); margin-left: 3px;
}