/*
 * Champion / Challenger in the /markets/bots drawer (Phase 14,
 * js/pm-cc-tab.js): the comparison table, the equity chart (the bot page's
 * .shadow-chart from pages.css), the assumptions, the lineage, and the
 * recommendations kept apart from the applied changes. Colours come from
 * tokens only, so the light and dark themes both follow.
 */

.pmcc { display: flex; flex-direction: column; gap: var(--space-4, 16px); min-width: 0; }
.pmcc-section { display: flex; flex-direction: column; gap: var(--space-2, 8px); min-width: 0; }
.pmcc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px); flex-wrap: wrap; }
.pmcc-h { margin: 0; font-size: 0.95rem; font-weight: 600; }
.pmcc-actions { display: inline-flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.pmcc-sim { white-space: nowrap; vertical-align: middle; }
.pmcc-cohort { margin: 0; font-size: 0.8rem; }
.pmcc-sub { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.pmcc-up { color: var(--color-success); }
.pmcc-down { color: var(--color-danger); }

.pmcc-scroll { overflow-x: auto; max-width: 100%; }
.pmcc-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pmcc-table caption { caption-side: top; text-align: left; padding-bottom: 6px; font-size: 0.75rem; color: var(--color-text-secondary); }
.pmcc-table th,
.pmcc-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.pmcc-table thead th { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.pmcc-table tbody th { font-weight: 600; }
.pmcc-table tr[data-role="CHAMPION_TWIN"] { background: var(--color-bg-secondary); }
.pmcc-settings { overflow-wrap: anywhere; }

.pmcc-chart .shadow-chart { width: 100%; height: auto; }
.pmcc-alt summary { cursor: pointer; font-size: 0.78rem; color: var(--color-text-secondary); }
.pmcc-alt[open] summary { margin-bottom: 6px; }

.pmcc-assumptions,
.pmcc-notes { margin: 0; padding-left: 1.2em; font-size: 0.82rem; line-height: 1.5; }
.pmcc-notes { font-size: 0.75rem; color: var(--color-text-muted); }
.pmcc-raw { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 4px var(--space-3, 12px); margin: 0; font-size: 0.75rem; }
.pmcc-raw dt { color: var(--color-text-muted); font-family: var(--font-mono, monospace); }
.pmcc-raw dd { margin: 0; overflow-wrap: anywhere; }

.pmcc-lineage { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.pmcc-lineage-item { position: relative; font-size: 0.82rem; }
.pmcc-lineage-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); }
.pmcc-lineage-item.is-current::before { border-color: var(--color-success); background: var(--color-success); }
.pmcc-lineage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pmcc-end { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px; }

.pmcc-recommendations { border: 1px solid var(--color-warning); border-radius: var(--radius-md, 8px); padding: var(--space-3, 12px); background: var(--color-warning-bg); }
.pmcc-recommendations p { margin: 0; font-size: 0.8rem; }
.pmcc-applied-section { border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-3, 12px); }
.pmcc-applied { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); font-size: 0.82rem; }
.pmcc-applied-item + .pmcc-applied-item { border-top: 1px solid var(--color-border); padding-top: var(--space-2, 8px); }

.pmcc-unavailable { border: 1px dashed var(--color-border); border-radius: var(--radius-md, 8px); padding: var(--space-3, 12px); }
.pmcc-unavailable p { margin: 0; font-size: 0.82rem; }
.pmcc-note { font-size: 0.9rem; }
.pmcc-reason { color: var(--color-text-secondary); }
.pmcc-empty { margin: 0; font-size: 0.82rem; }

/* A phone: each table row becomes a card, its cells labelled. */
@media (max-width: 640px) {
  .pmcc-table thead { display: none; }
  .pmcc-table,
  .pmcc-table tbody,
  .pmcc-table tr,
  .pmcc-table th,
  .pmcc-table td { display: block; width: 100%; }
  .pmcc-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); margin-bottom: var(--space-2, 8px); padding: 4px 0; }
  .pmcc-table th,
  .pmcc-table td { border-bottom: 0; padding: 3px 10px; }
  .pmcc-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 9em; color: var(--color-text-muted); font-size: 0.72rem; }
}