/* Zornux Marketplace — the storefront's own surface, layered on the shared design tokens.
   Everything references the shared CSS variables (colour, space, radius, shadow), so it is
   theme-aware (light/dark) by construction and never hardcodes a raw colour. Scoped to
   `marketplace-`, `asset-`, `trust-`, `type-`, `category-`, `mk-`, `facet-`, and `publisher-`
   classes so it can't leak into the rest of the site. Only a small DERIVED token layer is added —
   no new brand, no copy of the six shared token/style files (docs/marketplace-v1/08). */

:root {
  /* One per-product accent, alongside --product-zornux / -zoijs / -znxstudio. Brand-consistent. */
  --product-marketplace: var(--brand-primary);
  --marketplace-accent: var(--product-marketplace);
  --marketplace-card-border: var(--color-border);
  --marketplace-card-hover: var(--color-brand);

  /* Trust tiers → existing semantics. No new hues; each maps to a shared/semantic token so both
     themes are covered automatically (the tokens flip under [data-theme="dark"]). */
  --marketplace-trust-official: var(--brand-primary);
  --marketplace-trust-verified: var(--brand-secondary);
  --marketplace-trust-partner: var(--brand-accent);
  --marketplace-trust-community: var(--color-text-muted);
  --marketplace-trust-experimental: var(--color-warning);
  --marketplace-trust-deprecated: var(--color-text-muted);
  --marketplace-trust-archived: var(--color-text-muted);

  /* Asset-type accents → shared brand tokens. */
  --type-accent-brand: var(--color-brand);
  --type-accent-secondary: var(--color-secondary);
  --type-accent-accent: var(--color-accent);
  --type-accent-muted: var(--color-text-muted);
}

/* ---- Section bar (top nav) ---- */
.marketplace-nav {
  border-bottom: var(--border-width) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  position: sticky;
  top: var(--layout-header-height);
  z-index: calc(var(--z-header) - 1);
  backdrop-filter: saturate(1.2) blur(6px);
}
.marketplace-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 3rem;
  flex-wrap: wrap;
}
.marketplace-nav__brand {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
}
.marketplace-nav__sections {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.marketplace-nav__link {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.marketplace-nav__link:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}
.marketplace-nav__link--active,
.marketplace-nav__link[aria-current="page"] {
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

/* ---- Hero ---- */
.marketplace-hero {
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
}
.marketplace-hero__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: var(--space-3) 0;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marketplace-hero__lead {
  color: var(--color-text-secondary);
}
.marketplace-hero__search {
  margin-top: var(--space-6);
}

/* ---- Search box ---- */
.mk-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.mk-search__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--font-size-lg);
}
.mk-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-7);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.mk-search--lg .mk-search__input {
  padding-block: var(--space-4);
  font-size: var(--font-size-lg);
}
.mk-search__input:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--shadow-focus);
}
.mk-search__submit {
  flex: 0 0 auto;
}

/* ---- Section spacing helpers ---- */
.marketplace-section-more {
  margin-top: var(--space-5);
  font-weight: var(--font-weight-medium);
}
.marketplace-section-more a {
  text-decoration: none;
}
.marketplace-preview-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
}

/* ---- Asset grid + rail ---- */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-5);
}
.asset-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18rem, 20rem);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
}
.asset-rail__item {
  scroll-snap-align: start;
}
.asset-rail:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ---- Asset card ---- */
.asset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--marketplace-card-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.asset-card:hover {
  transform: translateY(-2px);
  border-color: var(--marketplace-card-hover);
  box-shadow: var(--shadow-md);
}
.asset-card:focus-within {
  border-color: var(--marketplace-card-hover);
  box-shadow: var(--shadow-focus);
}
.asset-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.asset-card__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  margin: var(--space-1) 0 0;
}
/* The title link is "stretched" over the whole card so the entire card is clickable, without
   nesting interactive elements. The publisher link sits above the overlay (z-index) as its own
   target. */
.asset-card__title-link {
  color: var(--color-text);
  text-decoration: none;
}
.asset-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.asset-card__title-link:focus-visible {
  outline: none;
}
.asset-card:focus-within .asset-card__title {
  color: var(--color-brand);
}
.asset-card__publisher {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  width: fit-content;
}
.asset-card__publisher-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.asset-card__publisher-link:hover {
  text-decoration: underline;
}
.asset-card__publisher-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.asset-card__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}
.asset-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.asset-card__version {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}
.asset-card__compat {
  font-family: var(--font-mono);
}
.asset-card__updated {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.asset-card--deprecated,
.asset-card--archived {
  opacity: 0.92;
  border-style: dashed;
}

/* ---- Type badge ---- */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
}
.type-badge__glyph {
  color: var(--type-accent-brand);
}
.type-badge--secondary .type-badge__glyph {
  color: var(--type-accent-secondary);
}
.type-badge--accent .type-badge__glyph {
  color: var(--type-accent-accent);
}
.type-badge--muted .type-badge__glyph {
  color: var(--type-accent-muted);
}

/* ---- Trust badge (icon + label, never colour alone) ---- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  /* Label sits in the standard text colour so contrast never depends on the tier hue. */
  color: var(--color-text);
  border: var(--border-width) solid var(--tier-color, var(--color-border));
  background: color-mix(in srgb, var(--tier-color, var(--color-border)) 12%, var(--color-surface));
}
.trust-badge__glyph {
  color: var(--tier-color, var(--color-text-muted));
}
.trust-badge--compact {
  padding: 0.05rem;
  border: none;
  background: transparent;
}
.trust-badge--official {
  --tier-color: var(--marketplace-trust-official);
}
.trust-badge--verified {
  --tier-color: var(--marketplace-trust-verified);
}
.trust-badge--partner {
  --tier-color: var(--marketplace-trust-partner);
}
.trust-badge--community {
  --tier-color: var(--marketplace-trust-community);
}
.trust-badge--experimental {
  --tier-color: var(--marketplace-trust-experimental);
}
.trust-badge--deprecated {
  --tier-color: var(--marketplace-trust-deprecated);
  text-decoration: line-through;
}
.trust-badge--archived {
  --tier-color: var(--marketplace-trust-archived);
}

/* ---- Publisher ---- */
.publisher-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.publisher-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.publisher-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.publisher-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.publisher-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.publisher-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.publisher-card__handle {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.publisher-card__bio {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.publisher-card__stats {
  margin: auto 0 0;
  padding-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ---- Category tiles / chips ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.category-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.category-tile:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.category-tile:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.category-tile__icon {
  font-size: var(--font-size-2xl);
  color: var(--color-brand);
  line-height: 1;
}
.category-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.category-tile__name {
  font-weight: var(--font-weight-semibold);
}
.category-tile__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.category-tile__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.category-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.category-chip:hover {
  border-color: var(--color-brand);
}
.category-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.category-chip__icon {
  color: var(--color-brand);
}
.category-chip__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ---- Type cluster (browse by type) ---- */
.type-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.type-cluster__link {
  text-decoration: none;
}

/* ---- Facet bar ---- */
.mk-facetbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.mk-facetbar__summary {
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--space-1) 0;
}
.mk-facetbar__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.facet-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.facet-group__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}
.facet-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.facet-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.facet-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.facet-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.facet-chip--active,
.facet-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
  border-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: var(--font-weight-medium);
}
.mk-facetbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}
.mk-facetbar__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.mk-facetbar__sort-label {
  color: var(--color-text-muted);
}
.mk-select {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
}
.mk-select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.mk-facetbar__count {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.mk-facetbar__clear {
  margin-inline-start: auto;
  background: none;
  border: none;
  color: var(--color-link);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
}
.mk-facetbar__clear:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Layout: facet rail + results at ≥lg */
.mk-browse-layout {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 64rem) {
  .mk-browse-layout {
    grid-template-columns: 18rem 1fr;
    align-items: start;
  }
  .mk-facetbar {
    position: sticky;
    top: calc(var(--layout-header-height) + 3.5rem);
  }
  /* On wide screens the disclosure is always expanded and its summary is hidden. */
  .mk-facetbar__disclosure > .mk-facetbar__summary {
    display: none;
  }
  .mk-facetbar__disclosure > .mk-facetbar__groups {
    margin-top: 0;
  }
}

/* ---- Empty / error / loading states ---- */
.mk-empty,
.mk-error {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.mk-empty p {
  margin: 0;
}
.mk-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}
.mk-empty__title,
.mk-error__title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}
.mk-empty__hint,
.mk-error__body {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}
.mk-error__ref {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  margin: 0 0 var(--space-4);
}
.mk-empty__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.marketplace-loading {
  color: var(--color-text-muted);
  padding: var(--space-6);
  text-align: center;
}

/* ---- Skeletons ---- */
.mk-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.mk-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    color-mix(in srgb, var(--color-surface-2) 60%, var(--color-bg)) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: mk-shimmer 1.4s ease-in-out infinite;
}
.mk-skeleton--badge {
  width: 5rem;
  height: 1rem;
}
.mk-skeleton--title {
  width: 70%;
  height: 1.25rem;
}
.mk-skeleton--line {
  width: 100%;
  height: 0.85rem;
}
.mk-skeleton--short {
  width: 55%;
}
@keyframes mk-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ---- Placeholder (route-safe asset/publisher stubs) ---- */
.mk-placeholder {
  max-width: var(--layout-content-width-narrow);
  margin-inline: auto;
  text-align: center;
  padding: var(--space-8) 0;
}
.mk-placeholder__note {
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 var(--space-6);
}

/* ---- Publisher profile header (placeholder page) ---- */
.mk-pub-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
.mk-pub-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mk-pub-header__name {
  font-size: var(--font-size-3xl);
  margin: 0;
}
.mk-pub-header__handle {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  margin: 0;
}
.mk-pub-header__stats {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ---- Search results groups ---- */
.mk-search-hint {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mk-skeleton {
    animation: none;
  }
  .asset-card,
  .publisher-card,
  .category-tile {
    transition: none;
  }
}

/* ============================================================
   Phase 2 — asset experience, publisher profile, directory
   ============================================================ */

/* ---- Asset header ---- */
.mk-asset-header {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-5);
}
.mk-asset-header__badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.mk-asset-header__name {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: var(--space-3) 0 var(--space-2);
}
.mk-asset-header__publisher {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.mk-asset-header__summary {
  color: var(--color-text-secondary);
  max-width: var(--layout-content-width-narrow);
}
.mk-asset-header__stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-asset-header__stat code {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}
.mk-asset-header__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mk-asset-header__link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.mk-asset-header__link:hover {
  text-decoration: underline;
}

/* ---- Lifecycle / archival banners ---- */
.mk-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
  font-size: var(--font-size-sm);
  border: var(--border-width) solid var(--color-border);
}
.mk-banner--warn {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
}
.mk-banner--muted {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}

/* ---- Install snippet ---- */
.mk-install {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}
.mk-install__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.mk-install__cmd {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Asset tabs ---- */
.mk-asset-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.mk-asset-tabs__tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: var(--border-width-thick) solid transparent;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
}
.mk-asset-tabs__tab:hover {
  color: var(--color-text);
}
.mk-asset-tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.mk-asset-tabs__tab--active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.mk-asset-panels {
  padding: var(--space-5) 0;
}

/* ---- Overview ---- */
.mk-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.mk-overview__h {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-3);
}
.mk-overview__about p {
  color: var(--color-text-secondary);
  max-width: var(--layout-content-width-narrow);
}

/* ---- Metadata table ---- */
.mk-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.mk-meta-table th,
.mk-meta-table td {
  text-align: start;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}
.mk-meta-table th {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  width: 12rem;
}
.mk-meta-table code {
  font-family: var(--font-mono);
}
.mk-meta-table a {
  color: var(--color-link);
  text-decoration: none;
}
.mk-meta-table a:hover {
  text-decoration: underline;
}

/* ---- Compatibility ---- */
.mk-compat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mk-compat__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.mk-compat__eco {
  font-weight: var(--font-weight-semibold);
  min-width: 8rem;
}
.mk-compat__range code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.mk-compat__status {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.mk-compat__empty,
.mk-doc__empty,
.mk-deps__empty,
.mk-versions__empty,
.mk-releases__empty {
  color: var(--color-text-muted);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* ---- Documentation viewer ---- */
.mk-doc {
  display: grid;
  gap: var(--space-5);
}
.mk-doc__toc {
  order: -1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.mk-doc__toc-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.mk-doc__toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mk-doc__toc-item--l2 {
  padding-inline-start: var(--space-3);
}
.mk-doc__toc-item--l3 {
  padding-inline-start: var(--space-5);
}
.mk-doc__toc a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.mk-doc__toc a:hover {
  color: var(--color-brand);
}
@media (min-width: 64rem) {
  .mk-doc {
    grid-template-columns: 1fr 16rem;
    align-items: start;
  }
  .mk-doc__body {
    grid-column: 1;
    grid-row: 1;
  }
  .mk-doc__toc {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    position: sticky;
    top: calc(var(--layout-header-height) + 3.5rem);
  }
}

/* ---- Version timeline ---- */
.mk-versions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mk-version {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mk-version--yanked {
  opacity: 0.8;
  border-style: dashed;
}
.mk-version__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mk-version__num {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.mk-version__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-version__compat {
  margin: var(--space-2) 0 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.mk-chip {
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
}
.mk-chip code {
  font-family: var(--font-mono);
}

/* ---- Lifecycle badge ---- */
.lifecycle-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border: var(--border-width) solid var(--lc-color, var(--color-border));
  background: color-mix(in srgb, var(--lc-color, var(--color-border)) 12%, var(--color-surface));
}
.lifecycle-badge__glyph {
  color: var(--lc-color, var(--color-text-muted));
}
.lifecycle-badge--latest {
  --lc-color: var(--color-brand);
}
.lifecycle-badge--published {
  --lc-color: var(--color-text-muted);
}
.lifecycle-badge--prerelease {
  --lc-color: var(--color-secondary);
}
.lifecycle-badge--deprecated {
  --lc-color: var(--color-warning);
}
.lifecycle-badge--yanked {
  --lc-color: var(--color-error);
  text-decoration: line-through;
}

/* ---- Dependencies ---- */
.mk-deps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mk-dep-group__title {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-3);
}
.mk-dep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-3);
}
.mk-dep {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.mk-dep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.mk-dep__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}
a.mk-dep__name:hover {
  color: var(--color-brand);
  text-decoration: underline;
}
.mk-dep__kind {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.mk-dep__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-dep__range code {
  font-family: var(--font-mono);
}

/* ---- Release notes ---- */
.mk-releases__picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.mk-releases__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-release__version {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--font-size-lg);
}
.mk-release__version code {
  font-family: var(--font-mono);
}
.mk-release__date {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

/* ---- Related ---- */
.mk-related {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.mk-related__title {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-4);
}

/* ---- Download stat ---- */
.download-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}
.download-stat__value {
  font-weight: var(--font-weight-semibold);
}
.download-stat--lg .download-stat__value {
  font-size: var(--font-size-xl);
}
.download-stat__unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- Publisher hero ---- */
.mk-pub-hero {
  padding: var(--space-6) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-5);
}
.mk-pub-hero__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mk-pub-hero__name {
  font-size: var(--font-size-3xl);
  margin: 0;
}
.mk-pub-hero__handle {
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-pub-hero__at {
  font-family: var(--font-mono);
}
.mk-pub-hero__bio {
  color: var(--color-text-secondary);
  max-width: var(--layout-content-width-narrow);
}
.mk-pub-hero__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mk-pub-hero__link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.mk-pub-hero__link:hover {
  text-decoration: underline;
}
.mk-pub-hero__stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.mk-pub-categories {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-6);
}
.mk-pub-categories__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ---- Publisher directory controls ---- */
.mk-dir-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.mk-dir-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.mk-dir-select {
  display: inline-flex;
  align-items: center;
}

/* ---- Redirect / placeholder note ---- */
.mk-placeholder h1 {
  font-size: var(--font-size-2xl);
}

/* ============================================================
   Phase 3 — collections, advanced filtering, search, compare, local
   ============================================================ */

/* ---- Collection rails ---- */
.mk-collection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.mk-collection__eyebrow {
  margin: 0 0 var(--space-1);
}
.mk-collection__title {
  margin: 0;
  font-size: var(--font-size-2xl);
}
.mk-collection__viewall {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.mk-collection__viewall:hover {
  text-decoration: underline;
}

/* ---- Browse: results toolbar ---- */
.mk-results-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* ---- Filter panel / drawer ---- */
.mk-facets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mk-filter-sep {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-4) 0;
}
.mk-filter__trigger {
  margin-bottom: var(--space-4);
}
.mk-filter-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(20rem, 86vw);
  background: var(--color-bg);
  border-inline-end: var(--border-width) solid var(--color-border);
  z-index: var(--z-drawer);
  overflow-y: auto;
  padding: var(--space-5);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-lg);
}
.mk-filter-panel.is-open {
  transform: translateX(0);
}
.mk-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.mk-filter-panel__title {
  font-weight: var(--font-weight-semibold);
}
@media (min-width: 64rem) {
  .mk-filter__trigger,
  .mk-filter__scrim,
  .mk-filter-panel__head {
    display: none;
  }
  .mk-filter-panel {
    position: sticky;
    top: calc(var(--layout-header-height) + 3.5rem);
    width: auto;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    overflow: visible;
    padding: 0;
  }
}

/* ---- Saved searches ---- */
.mk-saved__title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}
.mk-saved__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}
.mk-saved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mk-saved__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.mk-saved__link {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.mk-saved__link:hover {
  text-decoration: underline;
}
.mk-saved__remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
}
.mk-saved__remove:hover {
  color: var(--color-error);
}

/* ---- Search combobox ---- */
.mk-combobox {
  position: relative;
  max-width: 40rem;
}
.mk-combobox__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--font-size-lg);
  z-index: 1;
}
.mk-combobox__input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7);
  font-size: var(--font-size-lg);
}
.mk-combobox__pop {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-drawer);
}
.mk-suggest,
.mk-searchhist {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.mk-suggest__opt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mk-suggest__opt.is-active,
.mk-suggest__opt:hover {
  background: var(--color-surface-2);
}
.mk-suggest__kind {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  min-width: 4.5rem;
}
.mk-suggest__label {
  font-weight: var(--font-weight-medium);
}
.mk-suggest__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-inline-start: auto;
}
.mk-searchhist__group {
  padding: var(--space-2);
}
.mk-searchhist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mk-searchhist__title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.mk-searchhist__clear {
  background: none;
  border: none;
  color: var(--color-link);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.mk-searchhist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.mk-searchhist__chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.mk-searchhist__chip:hover {
  border-color: var(--color-brand);
  color: var(--color-text);
}
.mk-search-group {
  margin-top: var(--space-6);
}
.mk-search-group__title {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-4);
}
.mk-mark {
  background: color-mix(in srgb, var(--color-warning) 30%, transparent);
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 0 0.1em;
}

/* ---- Compare toggle (on cards / header) ---- */
.asset-card__compare {
  position: relative;
  z-index: 1;
  margin-inline-start: auto;
}
.mk-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.mk-compare-toggle:hover:not(:disabled) {
  border-color: var(--color-brand);
  color: var(--color-text);
}
.mk-compare-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.mk-compare-toggle.is-active {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}
.mk-compare-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Compare bar (floating) ---- */
.mk-compare-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-toast);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter: saturate(1.3) blur(8px);
  border-top: var(--border-width) solid var(--color-border-strong);
  box-shadow: 0 -4px 16px rgba(20, 20, 31, 0.1);
}
.mk-compare-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-3);
}
.mk-compare-bar__count {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.mk-compare-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.mk-compare-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
}
.mk-compare-bar__remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}
.mk-compare-bar__remove:hover {
  color: var(--color-error);
}
.mk-compare-bar__actions {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* ---- Compare table ---- */
.mk-compare-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.mk-compare-wrap:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.mk-compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 36rem;
}
.mk-compare-table th,
.mk-compare-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: start;
  vertical-align: top;
}
.mk-compare-table__field {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  background: var(--color-surface);
  position: sticky;
  inset-inline-start: 0;
}
.mk-compare-table__col {
  min-width: 12rem;
}
.mk-compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mk-compare-col__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}
.mk-compare-col__name:hover {
  color: var(--color-brand);
}
.mk-compare-col__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.mk-compare-col__view {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.mk-compare-col__remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.mk-compare-compat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.mk-compare-min {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ---- Recently viewed ---- */
.mk-recent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mk-recent__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.mk-recent__chip:hover {
  border-color: var(--color-brand);
}
.mk-recent__chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.mk-recent-pubs {
  margin-bottom: var(--space-6);
}
.mk-recent-pubs__title,
.mk-pub-discovery__title,
.mk-pub-all-title {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-3);
}

/* ---- Announcement ---- */
.mk-announce {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
}
.mk-announce__msg {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
}
.mk-announce__link {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.mk-announce__dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1;
}
.mk-announce__dismiss:hover {
  color: var(--color-text);
}

/* ---- Publisher discovery ---- */
.mk-pub-spotlight {
  margin-bottom: var(--space-6);
}
.mk-pub-spotlight .publisher-card {
  border-color: var(--color-brand);
  background: var(--gradient-surface);
}
.mk-pub-discovery {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 48rem) {
  .mk-pub-discovery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-filter-panel {
    transition: none;
  }
}

/* =========================================================================
   Phase 4 — signed-in experience + publisher workspace
   Built on the shared design tokens; every badge pairs colour with text.
   ========================================================================= */

/* ---- Status badges (lifecycle / review / validation / role / trust) ---- */
.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.mk-badge--lifecycle-published,
.mk-badge--review-published,
.mk-badge--review-approved {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.mk-badge--lifecycle-draft,
.mk-badge--review-draft,
.mk-badge--review-ready {
  color: var(--color-text-secondary);
}
.mk-badge--lifecycle-deprecated,
.mk-badge--review-changes-requested,
.mk-badge--validation-warn {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
.mk-badge--lifecycle-suspended,
.mk-badge--lifecycle-archived,
.mk-badge--review-rejected,
.mk-badge--review-withdrawn,
.mk-badge--validation-fail {
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 45%, transparent);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}
.mk-badge--review-under-review,
.mk-badge--review-submitted,
.mk-badge--review-validating,
.mk-badge--validation-pending {
  color: var(--color-link);
  border-color: color-mix(in srgb, var(--color-link) 45%, transparent);
  background: color-mix(in srgb, var(--color-link) 12%, transparent);
}
.mk-badge--validation-pass {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.mk-badge--role-administrator,
.mk-badge--role-reviewer {
  color: var(--color-brand);
  border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
}
.mk-badge--trust-fixture { color: var(--color-text-secondary); }
.mk-badge--trust-pending { color: var(--color-link); border-color: color-mix(in srgb, var(--color-link) 45%, transparent); }
.mk-badge--trust-unverified { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.mk-badge--trust-backend-required { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }

/* ---- Honest state blocks ---- */
.mk-state {
  max-width: 42rem;
  margin: var(--space-8) auto;
  text-align: center;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.mk-state__title { margin: 0 0 var(--space-3); font-size: var(--font-size-2xl); }
.mk-state__body { margin: 0 auto var(--space-5); max-width: 34rem; color: var(--color-text-secondary); }
.mk-state__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.mk-empty-block {
  padding: var(--space-6);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.mk-empty-block h2 { margin-top: 0; }

.mk-backend-required {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid color-mix(in srgb, var(--color-warning) 40%, transparent);
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.mk-backend-required__tag,
.mk-metric__tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-warning);
  border: var(--border-width) solid color-mix(in srgb, var(--color-warning) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: 0 0.4rem;
  white-space: nowrap;
}
.mk-backend-required__body { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.mk-preview-banner {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
  border: var(--border-width) solid color-mix(in srgb, var(--color-link) 35%, transparent);
  background: color-mix(in srgb, var(--color-link) 8%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---- Account menu (in the section bar) ---- */
.marketplace-nav__inner { display: flex; align-items: center; gap: var(--space-4); }
.marketplace-nav__account { margin-left: auto; }
.mk-account { position: relative; }
.mk-account__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.mk-account__summary::-webkit-details-marker { display: none; }
.mk-account__summary:hover { background: var(--color-surface-2); }
.mk-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: #fff;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}
.mk-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 40;
  min-width: 16rem;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mk-account__head { padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-2); }
.mk-account__display { font-weight: var(--font-weight-semibold); }
.mk-account__handle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.mk-account__links { display: flex; flex-direction: column; }
.mk-account__link { padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.mk-account__link:hover { background: var(--color-surface-2); }
.mk-account__preview { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.mk-account__preview-label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--space-1); }
.mk-account__preview-tag { font-size: var(--font-size-xs); color: var(--color-link); border: var(--border-width) solid color-mix(in srgb, var(--color-link) 40%, transparent); border-radius: var(--radius-sm); padding: 0 0.3rem; }
.mk-account__persona { width: 100%; padding: 0.35rem; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-bg); color: var(--color-text); }
.mk-account__preview-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: var(--space-2) 0 0; }

/* ---- Publisher switcher ---- */
.mk-pubswitch { display: inline-flex; align-items: center; gap: var(--space-2); }
.mk-pubswitch__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mk-pubswitch__name { font-weight: var(--font-weight-semibold); }
.mk-pubswitch__select { padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-bg); color: var(--color-text); }

/* ---- Workspace shell ---- */
.mk-ws { padding-block: var(--space-6); }
.mk-ws__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.mk-ws__headline { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mk-ws__title { margin: 0; font-size: var(--font-size-3xl); }
.mk-ws__crumb { margin: 0 0 var(--space-4); }
.mk-ws-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; }
.mk-ws-nav__link { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-thick) solid transparent; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.mk-ws-nav__link:hover { color: var(--color-text); }
.mk-ws-nav__link.is-active { color: var(--color-brand); border-bottom-color: var(--color-brand); font-weight: var(--font-weight-medium); }
.mk-ws__section { margin-bottom: var(--space-6); }
.mk-ws__section h2 { font-size: var(--font-size-xl); margin: 0 0 var(--space-3); }
.mk-ws__cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 56rem) { .mk-ws__cols { grid-template-columns: 1fr; } }

/* ---- Summary / metric cards ---- */
.mk-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); }
.mk-summary { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-decoration: none; color: inherit; }
.mk-summary--link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.mk-summary__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: 1; }
.mk-summary__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mk-summary--warn .mk-summary__value { color: var(--color-warning); }
.mk-summary--danger .mk-summary__value { color: var(--color-error); }
.mk-metric { position: relative; }
.mk-metric__tag { margin-top: var(--space-1); align-self: flex-start; }
.mk-metric--backend .mk-summary__value { color: var(--color-text-muted); }

/* ---- Workspace activity / actions ---- */
.mk-ws-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-ws-activity__item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); }
.mk-ws-activity__kind { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); min-width: 6rem; }
.mk-ws-activity__summary { flex: 1; }
.mk-ws-activity__at { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.mk-ws-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mk-ws-actions a { display: block; padding: var(--space-2) 0; }

/* ---- Tables (responsive: table on wide, cards on narrow) ---- */
.mk-managed, .mk-versions, .mk-reviewq, .mk-trustops { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.mk-table caption { text-align: left; }
.mk-table th, .mk-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
.mk-table thead th { color: var(--color-text-muted); font-weight: var(--font-weight-medium); white-space: nowrap; }
.mk-table tbody th { font-weight: var(--font-weight-medium); }
.mk-managed__public { margin-left: var(--space-1); color: var(--color-link); text-decoration: none; }
.mk-managed__cards, .mk-versions__cards, .mk-reviewq__cards, .mk-trustops__cards { display: none; }
.mk-managed-card { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-2); }
.mk-managed-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mk-managed-card__name { font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-text); }
.mk-managed-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-managed-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-sm); }
.mk-managed-card__meta dt { color: var(--color-text-muted); }
.mk-managed-card__meta dd { margin: 0; }
.mk-managed-card__summary { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }
.mk-managed-card__actions { display: flex; gap: var(--space-3); }
.mk-managed__toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--space-4); }

@media (max-width: 48rem) {
  .mk-table { display: none; }
  .mk-managed__cards, .mk-versions__cards, .mk-reviewq__cards, .mk-trustops__cards { display: grid; gap: var(--space-3); }
}

/* ---- Fields (workspace forms + wizard) ---- */
.mk-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.mk-field > span { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.mk-field input, .mk-field select, .mk-field textarea { padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: inherit; width: 100%; }
.mk-field--check { flex-direction: row; align-items: center; gap: var(--space-2); }
.mk-field--check input { width: auto; }
.mk-field--inline { flex-direction: row; align-items: center; gap: var(--space-2); margin-bottom: 0; }
.mk-field--inline input, .mk-field--inline select { width: auto; }
.mk-field--grow { flex: 1; }
.mk-field__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-1) 0; }

/* ---- Validation results ---- */
.mk-validation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-validation__item { padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-left-width: var(--border-width-thick); border-radius: var(--radius-md); background: var(--color-surface); }
.mk-validation__item--fail { border-left-color: var(--color-error); }
.mk-validation__item--warn { border-left-color: var(--color-warning); }
.mk-validation__item--pass { border-left-color: var(--color-success); }
.mk-validation__item--pending { border-left-color: var(--color-link); }
.mk-validation__row { display: flex; gap: var(--space-3); }
.mk-validation__status { font-weight: var(--font-weight-semibold); }
.mk-validation__status--fail { color: var(--color-error); }
.mk-validation__status--warn { color: var(--color-warning); }
.mk-validation__status--pass { color: var(--color-success); }
.mk-validation__status--pending { color: var(--color-link); }
.mk-validation__main { flex: 1; }
.mk-validation__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mk-validation__summary { font-weight: var(--font-weight-medium); }
.mk-validation__rule { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.mk-validation__detail { margin: var(--space-1) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.mk-validation__action { margin: var(--space-1) 0; font-size: var(--font-size-sm); }
.mk-validation__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---- Submission readiness + timeline ---- */
.mk-readiness__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-readiness__item { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.mk-readiness__status { font-weight: var(--font-weight-semibold); }
.mk-readiness__status--complete { color: var(--color-success); }
.mk-readiness__status--warning { color: var(--color-warning); }
.mk-readiness__status--blocking { color: var(--color-error); }
.mk-readiness__status--pending { color: var(--color-link); }
.mk-readiness__body { flex: 1; }
.mk-readiness__head { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.mk-readiness__label { font-weight: var(--font-weight-medium); }
.mk-readiness__tag { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.mk-readiness__tag--blocking { color: var(--color-error); }
.mk-readiness__tag--warning { color: var(--color-warning); }
.mk-readiness__detail { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.mk-readiness__action { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); }
.mk-readiness__summary { padding: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.mk-readiness__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.mk-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: var(--border-width-thick) solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.mk-timeline__item { position: relative; }
.mk-timeline__dot { position: absolute; left: calc(-1 * var(--space-4) - 0.35rem); top: 0.35rem; width: 0.6rem; height: 0.6rem; border-radius: var(--radius-full); background: var(--color-brand); }
.mk-timeline__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mk-timeline__at { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.mk-timeline__note { margin: var(--space-1) 0; font-size: var(--font-size-sm); }
.mk-timeline__actor { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); }

/* ---- Draft progress ---- */
.mk-draftprogress { display: flex; flex-direction: column; gap: var(--space-2); }
.mk-draftprogress__bar-row { display: flex; align-items: center; gap: var(--space-3); }
.mk-draftprogress__bar { flex: 1; height: 0.5rem; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; }
.mk-draftprogress__fill { display: block; height: 100%; background: var(--gradient-brand); }
.mk-draftprogress__pct { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.mk-draftprogress__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-draftprogress__chip { font-size: var(--font-size-xs); color: var(--color-text-muted); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: 0.1rem 0.5rem; }
.mk-draftprogress__chip.is-done { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }

/* ---- Wizard ---- */
.mk-wizard { display: flex; flex-direction: column; gap: var(--space-5); }
.mk-wizard-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-wizard-steps__btn { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: 0.2rem 0.7rem; cursor: pointer; color: var(--color-text-secondary); font: inherit; }
.mk-wizard-steps__item.is-current .mk-wizard-steps__btn { border-color: var(--color-brand); color: var(--color-brand); font-weight: var(--font-weight-medium); }
.mk-wizard-steps__item.is-done .mk-wizard-steps__btn { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.mk-wizard-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: var(--radius-full); background: var(--color-surface-2); font-size: var(--font-size-xs); }
.mk-wizard__fieldset { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0; }
.mk-wizard__fieldset legend { font-weight: var(--font-weight-semibold); padding: 0 var(--space-2); }
.mk-wizard__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mk-wizard__remove { background: none; border: none; color: var(--color-error); cursor: pointer; font: inherit; margin-left: var(--space-2); }
.mk-wizard__addrow { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end; }
.mk-wizard__addrow input, .mk-wizard__addrow select { padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: inherit; }
.mk-wizard__panel { min-height: 8rem; }
.mk-wizard__nav { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mk-wizard__errors { border: var(--border-width) solid color-mix(in srgb, var(--color-error) 45%, transparent); background: color-mix(in srgb, var(--color-error) 8%, transparent); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-3); }
.mk-wizard__errors ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.mk-wizard__review { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.mk-wizard__review dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-wizard__review dd { margin: 0; }
.mk-wizard__savenote { margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---- Bookmarks ---- */
.mk-bookmark-toggle, .mk-bookmark-card__remove { background: none; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: 0.2rem 0.6rem; cursor: pointer; font: inherit; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: var(--space-1); }
.mk-bookmark-toggle.is-active { color: var(--brand-accent, var(--color-brand)); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); }
.mk-bookmark-toggle--compact { padding: 0.2rem 0.4rem; }
.mk-bookmarks__toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.mk-bookmarks__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-bookmark-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.mk-bookmark-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mk-bookmark-card__head { display: flex; gap: var(--space-2); }
.mk-bookmark-card__name { font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-text); }
.mk-bookmark-card__meta { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mk-bookmark-card__remove { align-self: flex-start; color: var(--color-error); }

/* ---- Profile ---- */
.mk-profile { display: flex; flex-direction: column; gap: var(--space-6); }
.mk-profile__head { display: flex; gap: var(--space-4); align-items: center; }
.mk-profile__avatar { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full); background: var(--gradient-brand); color: #fff; font-size: var(--font-size-2xl); text-transform: uppercase; }
.mk-profile__name { margin: 0; font-size: var(--font-size-2xl); }
.mk-profile__handle { margin: var(--space-1) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-profile__roles { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-profile__section h2 { font-size: var(--font-size-xl); }
.mk-profile__memberships { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-profile__memberships li { display: flex; gap: var(--space-3); align-items: center; }
.mk-profile__mrole { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-muted); }
.mk-profile__prefs { display: grid; gap: var(--space-2); }
.mk-profile__prefs dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-profile__prefs dd { margin: 0; display: flex; gap: var(--space-2); align-items: center; text-transform: capitalize; }

/* ---- Submissions ---- */
.mk-submissions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.mk-submission { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mk-submission__head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.mk-submission__name { font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-text); }
.mk-submission__version { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-submission__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; font-size: var(--font-size-sm); }
.mk-submission__meta dt { color: var(--color-text-muted); }
.mk-submission__meta dd { margin: 0; }
.mk-submission__feedback { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---- Asset management detail ---- */
.mk-asset-detail { display: flex; flex-direction: column; gap: var(--space-5); }
.mk-asset-detail__head { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mk-asset-detail__name { margin: 0; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.mk-asset-detail__slug { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0; }
.mk-asset-detail__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-asset-detail__links { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.mk-asset-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 56rem) { .mk-asset-detail__grid { grid-template-columns: 1fr; } }
.mk-asset-detail__meta { display: grid; gap: var(--space-2); }
.mk-asset-detail__meta dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-asset-detail__meta dd { margin: 0 0 var(--space-1); }
.mk-asset-detail__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mk-asset-detail__result { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--font-size-sm); }

/* ---- Publisher profile form ---- */
.mk-pubform { display: flex; flex-direction: column; gap: var(--space-4); }
.mk-pubform__readonly { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.mk-pubform__ro-label { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-right: var(--space-2); }
.mk-pubform__actions { display: flex; gap: var(--space-3); }

/* ---- Prepare version ---- */
.mk-prepare { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }

@media (prefers-reduced-motion: reduce) {
  .mk-draftprogress__fill { transition: none; }
}

/* ---- Phase 11: subscriptions, revenue dashboard & payouts ---- */
.mk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}
.mk-stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
}
.mk-stat dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-stat dd { margin: var(--space-1) 0 0; font-size: var(--font-size-xl); font-weight: 600; }

.mk-sub-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.mk-sub-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mk-sub-card__head h3 { margin: 0; }
.mk-sub-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.mk-sub-card__meta dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-sub-card__meta dd { margin: 0; font-weight: 600; }
.mk-sub-card__history { margin-top: var(--space-3); }
.mk-sub-card__history summary { cursor: pointer; color: var(--color-link); }

.mk-plan-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-plan {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.mk-plan__price { color: var(--color-text-muted); margin-left: var(--space-2); }
.mk-install__plans { margin-bottom: var(--space-5); }
.mk-cart__coupon { max-width: 22rem; margin: var(--space-3) 0; }
.mk-cart__fx { margin: calc(-1 * var(--space-2)) 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.mk-cart__fx-asof { color: var(--color-text-subtle, var(--color-text-muted)); }

/* Payout / subscription status badges (fall back to the base .mk-badge look when unstyled). */
.mk-badge--paid, .mk-badge--active { background: var(--color-success); color: #fff; }
.mk-badge--pending, .mk-badge--scheduled, .mk-badge--processing, .mk-badge--trialing { background: var(--color-warning); color: #1b1b1b; }
.mk-badge--failed, .mk-badge--past_due, .mk-badge--expired { background: var(--color-error); color: #fff; }
.mk-badge--cancelled, .mk-badge--paused { background: var(--color-surface-2); color: var(--color-text-secondary); }

/* ---- Phase 12: seats, org billing & billing operations ---- */
.mk-seats { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.mk-seats h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-base); }
.mk-seats__alloc { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.mk-sub-card__change { margin-top: var(--space-3); }
.mk-sub-card__change summary { cursor: pointer; color: var(--color-link); }
.mk-invoice { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.mk-invoice summary { cursor: pointer; font-weight: 600; }

/* Reconciliation/webhook status badges (fall back to base .mk-badge when unstyled). */
.mk-badge--matched, .mk-badge--processed { background: var(--color-success); color: #fff; }
.mk-badge--mismatch, .mk-badge--rejected { background: var(--color-error); color: #fff; }
.mk-badge--missing, .mk-badge--duplicate, .mk-badge--received { background: var(--color-warning); color: #1b1b1b; }

/* ---- Phase 14: onboarding & invoice/credit status badges (fall back to base .mk-badge) ---- */
.mk-badge--completed, .mk-badge--verified { background: var(--color-success); color: #fff; }
.mk-badge--requirements_due, .mk-badge--verifying, .mk-badge--started, .mk-badge--credited, .mk-badge--overdue { background: var(--color-warning); color: #1b1b1b; }
.mk-badge--restricted, .mk-badge--failed { background: var(--color-error); color: #fff; }
.mk-badge--issued { background: var(--color-surface-2); color: var(--color-text-secondary); }