/* Theme 2.0 Compare results. Page prefix .cmp. Tokens and shared classes only. */
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cmp-strip { margin-bottom: var(--gap); }
.cmp-card { display: flex; flex-direction: column; gap: 6px; transition: opacity var(--dur); }
.cmp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-name { min-height: 46px; margin: 4px 0 0; }
.cmp-name a:hover { text-decoration: underline; }
.cmp-ret { margin-top: 8px; }
.cmp-hero { margin: 28px 0 22px; }
.cmp-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cmp-hero-head .t2-sub { max-width: 640px; }
.cmp-legend { margin-bottom: 8px; }
.cmp-legend b { font-weight: 700; color: var(--tx); margin-left: 4px; }
.cmp-row { margin-top: var(--gap); }
.cmp-ai, .cmp-table { margin-top: var(--gap); }
.cmp-ai .t2-btn--ai svg { flex: none; }
.cmp-ai ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cmp-ai li { padding-top: 10px; border-top: 1px solid var(--grid); }
.cmp-ai li strong { display: block; font-weight: 500; color: var(--tx); font-size: 14px; }
.cmp-table .t2-table th, .cmp-table .t2-table td { padding: 13px 22px; }
.cmp-table .t2-table td { font-variant-numeric: tabular-nums; }
.t2-tabs button svg { vertical-align: -1px; opacity: 0.8; }
.t2-tabs button[data-locked] { color: var(--td); }

@media (max-width: 1279px) {
  .cmp-strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
  .cmp-hero-head { flex-direction: column; }
  .cmp-row { grid-template-columns: 1fr; }
}

@media print {
  .t2-nav, .t2-foot-links, .cmp-head .t2-row, .t2-drawer, .t2-scrim, .t2-toast, #cmpAi, .cmp-ai, #cmpRange button:not([aria-selected="true"]), .t2-iconbtn { display: none !important; }
  body.t2 { background: #fff !important; color: #000 !important; }
  .t2-panel { backdrop-filter: none !important; box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; background: #fff !important; }
  .t2-page { padding-top: 12px; animation: none; }
}

/* ── Compare builder (Fund DNA), prefix .cb ── */
.cb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 20px; }
.cb-stats { display: flex; gap: 40px; }
.cb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gap); align-items: start; }
.cb-acc { display: grid; gap: var(--gap); }
.cb-sec { padding: 0; }
.cb-sec[data-open="true"] { border-color: var(--tx); }
.cb-sec-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: var(--pad); background: none; border: 0; text-align: left; cursor: pointer; }
.cb-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--rad-tile); background: var(--ghost); color: var(--t2); font-size: 14px; font-weight: 500; }
.cb-sec[data-open="true"] .cb-badge { background: var(--ink); color: var(--inktx); }
.cb-sec-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cb-sec-sub { flex-basis: 100%; }
.cb-sum { max-width: 40%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-chev { width: 18px; height: 18px; fill: none; stroke: var(--t2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur); flex: none; }
.cb-sec[data-open="true"] .cb-chev { transform: rotate(180deg); }
.cb-body:empty { display: none; }
.cb-inner { padding: 0 var(--pad) var(--pad); border-top: 1px solid var(--grid); padding-top: 16px; display: grid; gap: 14px; }
.cb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--gap); }
.cb-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--rad-tile); background: var(--ghost); border: 1px solid var(--grid); text-align: left; cursor: pointer; }
.cb-tile[aria-pressed="true"] { background: var(--ink); color: var(--inktx); border-color: var(--ink); }
.cb-tile[aria-pressed="true"] .t2-name, .cb-tile[aria-pressed="true"] .t2-sub { color: var(--inktx); }
.cb-chipsrow { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-row { display: grid; gap: 8px; }
.cb-slider { display: grid; grid-template-columns: 12px 150px minmax(0, 1fr) 88px; align-items: center; gap: 12px; }
.cb-sv { text-align: right; font-size: 13px; font-weight: 700; color: var(--tx); }
.cb-add { display: flex; gap: 8px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-dna { position: sticky; top: 96px; }
.cb-donut { position: relative; width: 200px; height: 200px; margin: 6px auto 12px; }
.cb-legend { display: grid; gap: 6px; margin-bottom: 10px; }
.cb-leg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.cb-count { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); }
.cb-results { margin-top: var(--gap); margin-bottom: 96px; }
.cb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cb-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; text-align: left; border-radius: var(--rad-panel); background: var(--ghost); border: 1px solid var(--grid); cursor: pointer; min-width: 0; }
.cb-card[aria-pressed="true"] { border-color: var(--tx); background: var(--seg); }
.cb-card-n { margin: 0; min-height: 46px; padding-right: 28px; }
.cb-card-v { display: flex; gap: 28px; margin-top: 6px; }
.cb-tick { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--grid); display: flex; align-items: center; justify-content: center; color: transparent; }
.cb-card[aria-pressed="true"] .cb-tick { background: var(--ink); border-color: var(--ink); color: var(--inktx); }
.cb-bar { position: fixed; z-index: 46; left: 50%; bottom: calc(var(--askbar-h, var(--ask-h, 0px)) + 16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 90px); display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border-radius: 18px; background: var(--panelsolid); border: 1px solid var(--pbd); box-shadow: var(--shadow); transition: transform 0.25s var(--ease); }
.cb-bar.is-on { transform: translate(-50%, 0); }
@media (max-width: 1279px) {
  .cb-cols { grid-template-columns: 1fr; }
  .cb-dna { position: static; order: -1; }
  .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1100px) { .cb-slider { grid-template-columns: 12px 110px minmax(0, 1fr) 80px; } }

@media (max-width: 899px) {
  .cmp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cmp-strip { grid-template-columns: minmax(0, 1fr) !important; }
  .cmp-hero-head { gap: 10px; }
  .cmp-hero .t2-bleed { margin-left: -16px; margin-right: -16px; }
  .cmp-table .t2-table th, .cmp-table .t2-table td { padding: 10px 14px; }
  .cb-head { gap: 16px; } .cb-stats { gap: 24px; flex-wrap: wrap; }
  .cb-sum { display: none; }
  .cb-slider { grid-template-columns: 12px 90px minmax(0, 1fr) 76px; gap: 8px; }
  .cb-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-bar { width: calc(100vw - 24px); justify-content: space-between; padding: 8px 10px 8px 14px; gap: 8px; }
  .cb-add { flex-wrap: wrap; }
}

@media (max-width: 899px) {
  .cmp-name a, .cmp-card .t2-sub a { display: inline-block; padding: 10px 0; }
  .cb-chips, .cmp-card { gap: 8px; }
}

/* 375px gate: every tap on the builder and the results page is at least 44px (Builder A / SEO gate), no layout change */
@media (max-width: 899px) {
  body.t2 .t2-page.cb #cbClear, body.t2 .t2-page.cb #cbBarClear { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body.t2 .t2-page.cb #cbSort button { min-height: 44px; }
  body.t2 .t2-page.cmp .cmp-card-top .t2-iconbtn { width: 44px; height: 44px; min-width: 44px; }
  body.t2 .t2-page.cmp .cmp-name a { display: inline-flex; align-items: center; min-height: 44px; }
  body.t2 .t2-page.cmp .t2-tabs button { min-height: 44px; min-width: 44px; }
  body.t2 .t2-page.cmp .cmp-legend button { min-height: 44px; }
  body.t2 .t2-page.cmp .t2-input { min-height: 44px; }
  body.t2 .t2-page.cmp :is(summary, a.t2-btn, button.t2-btn, .t2-link) { min-height: 44px; }
}

/* compare-only guard (does not depend on base.css): a finished entrance animation must not leave a transform that traps the fixed compare bar */
body.t2 .t2-page.cb, body.t2 .t2-page.cmp { animation-fill-mode: backwards; }