.comparison-main { display: grid; gap: 22px; min-width: 0; }
.comparison-card { padding: 24px; min-width: 0; }
.comparison-label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--text-color); }
.comparison-controls { display: flex; align-items: end; gap: 18px; margin-top: 20px; }
.comparison-controls > div { width: 180px; }
.comparison-run { padding: 12px 22px; border: 0; border-radius: 12px; background: var(--accent-color, #5b5bd6); color: white; font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; }
.comparison-run:hover { filter: brightness(.92); }
.comparison-run:focus-visible, .comparison-company-detail summary:focus-visible { outline: 3px solid var(--accent-color, #5b5bd6); outline-offset: 3px; }
.comparison-mode { display: flex; flex-wrap: wrap; gap: 20px; margin: 14px 0; }
.comparison-mode input { margin-right: 8px; accent-color: var(--accent-color); }
.comparison-note { color: var(--text-muted-color); line-height: 1.6; font-size: 13px; margin: 12px 0 0; }
@media (max-width: 700px) {
  .comparison-card { padding: 16px 12px; }
  .comparison-controls { align-items: stretch; flex-direction: column; gap: 12px; }
  .comparison-controls > div { width: 100%; }
  .grow-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grow-nav-link { min-width: 0; font-size: 11px; padding: 8px 3px; overflow-wrap: anywhere; }
}

.comparison-plots-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 28px; }
.comparison-plot-card { min-width: 0; border: 1px solid var(--border-color); border-radius: 16px; padding: 16px 10px 8px; overflow: hidden; background: var(--surface-bg); }
.comparison-plot-title { font-size: 16px; margin: 0 8px 12px; color: var(--text-color); }
.comparison-plot-card .comparison-note { padding: 0 8px 10px; }
.comparison-metric-chart { width: 100%; min-width: 0; }
.comparison-group-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.comparison-group-tabs label { cursor: pointer; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; font-size: 13px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.comparison-group-tabs label:has(input:checked) { background: var(--nav-active-bg); color: var(--accent-dark-text); border-color: var(--accent-color); }
.comparison-group-tabs input { accent-color: var(--accent-color); }
.comparison-details-grid { display: grid; gap: 10px; }
.comparison-company-detail { border: 1px solid var(--border-color); border-radius: 12px; min-width: 0; }
.comparison-company-detail summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px; }
.comparison-company-detail summary > span:not(:first-child) { font-size: 12px; color: var(--text-muted-color); overflow-wrap: anywhere; }
.comparison-detail-hint { margin-left: auto; }
.comparison-detail-content { padding: 0 16px 16px; }
.comparison-detail-content h4 { font-size: 14px; margin: 20px 0 8px; }
.comparison-detail-content dl { margin: 0; }
.comparison-detail-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.comparison-detail-row dt { color: var(--text-muted-color); }
.comparison-detail-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .comparison-plots-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .comparison-group-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .comparison-group-tabs label { padding: 10px 8px; font-size: 12px; }
}

.comparison-metric-values { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0 8px 12px; font-size: 12px; }
.comparison-metric-values > div { display: flex; gap: 6px; align-items: baseline; }
.comparison-metric-values span { color: var(--text-muted-color); }
.comparison-metric-values strong { color: var(--text-color); font-variant-numeric: tabular-nums; }

.etf-comparison { display:grid; gap:30px; margin-top:20px; min-width:0; }
.etf-comparison h3 { margin:0 0 12px; font-size:18px; color:var(--text-color); }
.etf-comparison h4 { margin:0 0 12px; font-size:16px; color:var(--text-color); }
.etf-comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.etf-fund-card, .etf-overlap-card { min-width:0; padding:18px; border:1px solid var(--border-color); border-radius:14px; background:var(--surface-bg); }
.etf-fund-card > .comparison-note { margin-top:0; }
.etf-fund-card dl { margin:12px 0 0; }
.etf-fund-card .etf-holdings-table { font-size:12px; }
.etf-overlap-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.etf-overlap-metrics strong { display:block; font-size:24px; color:var(--text-color); font-variant-numeric:tabular-nums; }
.etf-overlap-metrics span { display:block; margin-top:4px; color:var(--text-muted-color); font-size:12px; }
.etf-overlap-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.etf-overlap-charts > div { min-width:0; }
.etf-overlap-explorer > .comparison-label { margin-top:20px; }
.etf-overlap-matrix { max-width:600px; margin:12px auto 20px; }
#etf-overlap-detail { margin-top:16px; }
.etf-table-disclosure { margin-top:14px; }
.etf-table-disclosure > summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:13px; color:var(--text-color); font-weight:700; }
.etf-table-disclosure > summary:focus-visible { outline:2px solid var(--accent-color); outline-offset:3px; }
@media (max-width:700px) {
  .etf-comparison-grid { grid-template-columns:minmax(0,1fr); }
  .etf-overlap-charts { grid-template-columns:minmax(0,1fr); gap:14px; }
  .etf-fund-card, .etf-overlap-card { padding:14px 10px; }
}