// ─────────────────────────────────────────────────────────────────────────────
// Component: Mists  (.ms-* prefix)
// File:      src/scss/components/_mists.scss
//
// Visual rules only — colors, typography, backgrounds, borders, animations.
// Structural layout lives in pages/_mists.scss.
// Covers: mist_explore, mist_list, mist_detail, fragments/mist_rows
// ─────────────────────────────────────────────────────────────────────────────

// ── Shared primitives ─────────────────────────────────────────────────────────

.ms-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ms-btn {
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;

  &--ghost {
    background: transparent;
    color: var(--text-secondary);
    &:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-default); }
  }

  &--primary {
    background: var(--color-success-bg);
    color: #fff;
    border-color: var(--color-success-bg);
    &:hover { background: var(--color-success); border-color: var(--color-success); }
  }
}

.ms-type-chip {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid currentColor;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.ms-lang-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  color: var(--text-muted);
}

.ms-agent-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--agent-accent-bg);
  border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent);
  border-radius: 3px;
  color: var(--agent-accent);
}

.ms-signed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  border-radius: 3px;
  color: var(--color-success);
}

.ms-mist-id-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  color: var(--text-muted);
}

.ms-meta-dot { color: var(--border-default); user-select: none; }

.ms-tag {
  font-size: 11px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  color: var(--text-muted);
}

.ms-symbol-anchor {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

// ── Explore + list page headers ───────────────────────────────────────────────

.ms-explore-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ms-explore-sub { font-size: 13px; color: var(--text-muted); }

.ms-list-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ms-list-owner-link {
  color: var(--text-primary);
  text-decoration: none;
  &:hover { color: var(--color-accent-link); }
}

.ms-list-sep  { color: var(--text-muted); font-weight: 300; }
.ms-list-sub  { font-size: 13px; color: var(--text-muted); }

// ── Filter bar ────────────────────────────────────────────────────────────────

.ms-type-filter {
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

  &:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-default); }
  &--active { background: var(--bg-overlay); color: var(--text-primary); border-color: var(--border-default); }
}

.ms-count-label { font-size: 12px; color: var(--text-muted); }

// ── Mist rows ─────────────────────────────────────────────────────────────────

.ms-row {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);

  &:last-child { border-bottom: none; }
  &:hover { background: var(--bg-hover); }
}

.ms-row-filename {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ms-row-title-text {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-row-meta  { font-size: 11px; color: var(--text-muted); }
.ms-meta-owner { color: var(--text-muted); }
.ms-row-count { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); }
.ms-row-chevron { color: var(--text-disabled); }

// ── Empty state ───────────────────────────────────────────────────────────────

.ms-empty-icon  { color: var(--text-disabled); }
.ms-empty-title { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-secondary); }
.ms-empty-desc  {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;

  code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: 3px;
  }
}

// ── Detail header ─────────────────────────────────────────────────────────────

.ms-detail-header { border-bottom: 1px solid var(--border-subtle); }

.ms-detail-owner {
  color: var(--color-accent-link);
  text-decoration: none;
  font-weight: 500;
  &:hover { text-decoration: underline; }
}

.ms-detail-sep      { color: var(--text-muted); }
.ms-detail-filename { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ms-detail-breadcrumb { font-size: 14px; }

.ms-detail-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ms-detail-meta        { font-size: 12px; color: var(--text-muted); }
.ms-detail-description { font-size: 13px; color: var(--text-secondary); line-height: 1.65; }

// ── Stats ─────────────────────────────────────────────────────────────────────

.ms-stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.ms-stat-label { font-size: 11px; color: var(--text-muted); }

// ── Content card ──────────────────────────────────────────────────────────────

.ms-content-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ms-content-toolbar {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-overlay);
}

.ms-content-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.ms-content-pre {
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  code { font-size: inherit !important; }
}

.ms-midi-placeholder { color: var(--text-muted); text-align: center; }

// ── Sidebar ───────────────────────────────────────────────────────────────────

.ms-sidebar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.ms-sidebar-card-title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.ms-sidebar-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-overlay);
  border-radius: 3px;
  color: var(--text-muted);
}

.ms-sidebar-link {
  font-size: 12px;
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

.ms-sidebar-sub { font-size: 11px; color: var(--text-muted); }

// ── Anchor + forks lists ──────────────────────────────────────────────────────

.ms-anchor-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-mini-avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

// ── Embed snippets ────────────────────────────────────────────────────────────

.ms-embed-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ms-embed-snippet {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 5px;
  cursor: pointer;
  &:hover { border-color: var(--border-default); }
}

.ms-embed-code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  word-break: break-all;
  white-space: pre-wrap;
  display: block;
}

.ms-embed-copy {
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  &:hover { background: var(--bg-hover); color: var(--text-primary); }
}

// ── Agent provenance rows ─────────────────────────────────────────────────────

.ms-prov-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; min-width: 48px; }
.ms-prov-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); word-break: break-all; }