/* Comparison pages (/compare/). Loaded only there; everything else reuses cards.css (pc-*) and app.css. */
.cmp-disclosure { margin-top: .2rem; }
.cmp-scroll { overflow-x: auto; margin: .6rem 0 1rem; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 340px; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding: .6rem .65rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cmp-table tr:last-child > * { border-bottom: 0; }
.cmp-table tbody th { width: 28%; color: var(--muted); font-weight: 650; font-size: .82rem; }
.cmp-table thead th { width: 36%; }
.cmp-table thead th:first-child { width: 28%; }
.cmp-head { display: block; text-decoration: none; color: var(--ink); }
.cmp-head .pc-art { max-width: 160px; margin: 0 0 .4rem; }
.cmp-head .pc-issuer { display: block; }
.cmp-name { display: block; font-weight: 700; line-height: 1.25; }
.cmp-actions td { display: table-cell; }
.cmp-actions .btn { margin: 0 .25rem .35rem 0; }
.cmp-section { margin: 1rem 0; }
.cmp-section h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.cmp-section.card { padding: 1rem 1.1rem; }
.cmp-list { margin: 0; padding-inline-start: 1.1rem; }
.cmp-list li { margin: .25rem 0; }
.cmp-fit { margin: 0 0 .7rem; }
.cmp-fit .pc-chip { display: inline-flex; margin: .35rem .3rem 0 0; }
.cmp-links { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.cmp-links a { font-weight: 650; color: var(--brand-deep); }
.cmp-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cmp-pair { display: flex; flex-direction: column; gap: .5rem; padding: .8rem; height: 100%; box-sizing: border-box; text-decoration: none; color: var(--ink); }
.cmp-pair:hover { border-color: var(--ink); }
.cmp-pair-art { display: flex; gap: .4rem; }
.cmp-pair-art .pc-art { flex: 1 1 0; margin: 0; max-width: none; }
.cmp-pair-name { font-weight: 700; line-height: 1.3; }
@media (max-width: 420px) {
  .cmp-table { font-size: .86rem; }
  .cmp-table th, .cmp-table td { padding: .5rem .45rem; }
  .cmp-table tbody th { width: 26%; }
}

/* Comparison tables need their own canvas, not the card-detail reading column.
   The page itself never scrolls sideways; only the named, keyboard-focusable table does. */
.cmp-wrap { max-width: 1200px; }
.cmp-wrap .pc-intro, .cmp-wrap .cmp-disclosure { max-width: 760px; }
.cmp-wrap .pc-rtitle { font-size: 1.65rem; margin-top: .9rem; color: var(--navy); }
.cmp-wrap .cmp-scroll { border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 6px; margin-top: 1rem; scrollbar-color: #a5adba #f2f3f5; }
.cmp-wrap .cmp-table { border: 0; border-radius: 0; min-width: 560px; font-size: .94rem; }
.cmp-wrap .cmp-table.cmp-n3 { min-width: 770px; }
.cmp-wrap .cmp-table.cmp-n4 { min-width: 940px; }
.cmp-wrap .cmp-table th, .cmp-wrap .cmp-table td { padding: 1rem 1.1rem; line-height: 1.5; border-inline-end: 1px solid var(--line); overflow-wrap: break-word; }
.cmp-wrap .cmp-table tr > :last-child { border-inline-end: 0; }
.cmp-wrap .cmp-table thead th { width: auto; background: #f3f4f5; padding-block: 1.25rem; }
.cmp-wrap .cmp-table thead th:first-child, .cmp-wrap .cmp-table tbody th { width: 150px; }
.cmp-wrap .cmp-table tbody th { color: var(--navy); font-size: .82rem; font-weight: 650; background: #f8f8f5; }
.cmp-wrap .cmp-table tbody td { background: #fff; }
.cmp-wrap .cmp-table tbody tr:nth-child(even) td { background: #fcfcfa; }
.cmp-wrap .cmp-head .pc-art { width: 100%; max-width: 160px; margin: 0 auto .85rem; border-radius: 5px; background: #e9ecef; }
.cmp-wrap .cmp-head .pc-art img { object-fit: contain; object-position: center; }
.cmp-wrap .cmp-name { color: var(--navy); font-size: 1rem; line-height: 1.35; }
.cmp-wrap .cmp-head .pc-issuer { margin-bottom: .3rem; font-size: .67rem; }
.cmp-wrap .cmp-drop { min-height: 32px; align-items: center; margin-top: .45rem; font-size: .78rem; }
.cmp-wrap .cmp-actions .btn { display: flex; justify-content: center; width: 100%; margin: 0 0 .5rem; border-radius: 5px; }
.cmp-wrap .cmp-scroll-hint { display: none; color: var(--muted); margin: .75rem 0 -.5rem; }
@media (max-width: 999px) {
  .cmp-wrap .cmp-scroll-hint { display: block; }
  .cmp-wrap .cmp-table thead th:first-child, .cmp-wrap .cmp-table tbody th { width: 104px; position: sticky; inset-inline-start: 0; z-index: 2; box-shadow: 1px 0 0 var(--line); }
  .cmp-wrap .cmp-table { min-width: 464px; }
  .cmp-wrap .cmp-table.cmp-n3 { min-width: 644px; }
  .cmp-wrap .cmp-table.cmp-n4 { min-width: 824px; }
  .cmp-wrap .cmp-table th, .cmp-wrap .cmp-table td { padding: .8rem .7rem; font-size: .86rem; }
  .cmp-wrap .cmp-table tbody th { font-size: .75rem; }
  .cmp-wrap .cmp-name { font-size: .9rem; }
  .cmp-wrap .cmp-table thead th:first-child { background: #f3f4f5; }
}
/* compare_tray.css loads after this sheet; keep custom-table label sizing explicit. */
.cmp-wrap .cmp-table.cmp-custom thead th:first-child, .cmp-wrap .cmp-table.cmp-custom tbody th { width: 150px; }
.cmp-wrap .cmp-custom .cmp-name { min-height: 2.7em; }
@media (max-width: 999px) {
  .cmp-wrap .cmp-table.cmp-custom thead th:first-child, .cmp-wrap .cmp-table.cmp-custom tbody th { width: 104px; }
  .cmp-wrap .cmp-custom .cmp-name { min-height: 4.05em; }
}