/* Winning Stacks tab: view switcher, pick card, folded list. Theme tokens only (styles.css). */
.view-tabs {
  display: inline-flex; max-width: 100%; margin: 0 0 28px; padding: 4px; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.tab-btn {
  display: inline-flex; align-items: baseline; gap: .5rem; min-height: 44px;
  padding: .5rem 1rem; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-family: var(--sans); cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.tab-title { font-weight: 600; font-size: .9rem; }
.tab-sub { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tab-btn.active .tab-sub { color: var(--accent); }
.view-panel[hidden] { display: none !important; }

.stack-pick {
  margin: 0 0 40px; padding: 24px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.stack-tag {
  display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px;
  background: var(--pop); color: var(--on-pop);
  font: 600 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.stack-name { margin: 14px 0 4px; font: 700 clamp(1.5rem, 3.2vw, 2.1rem)/1.1 var(--display); letter-spacing: -.02em; }
.stack-name small { margin-left: 8px; color: var(--muted); font: 500 .95rem var(--sans); letter-spacing: 0; }
.stack-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 8px 0 0; }
.stack-price b { font: 700 2.4rem/1 var(--display); letter-spacing: -.02em; }
.stack-price span, .stack-sub { color: var(--muted); }
.stack-sub, .stack-vs { margin: 6px 0 0; }

.stack-list h2 { margin-bottom: 8px; }
.stack-list .table-wrap { margin-top: 16px; }
.harness-badge { margin-left: 6px; }
.stack-below { margin-top: 20px; }
.stack-below summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--accent); font-weight: 600;
}
.stack-below[open] summary { margin-bottom: 8px; }
.stack-below td { color: var(--muted); }
.stack-source { margin-top: 20px; }

@media (max-width: 480px) {
  .tab-sub { display: none; }
  .stack-pick { padding: 18px; }
  .stack-price b { font-size: 2rem; }
}