/* Catalog discovery, contained card details, and compact comparison controls. */
.catalog-result-count { color: var(--text-secondary); font-size: .875rem; margin: 1rem 0; }
.catalog-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.catalog-card-actions .btn { padding: .7rem .5rem; min-height: 44px; }
.catalog-card-actions .added { color: var(--accent); }
#cards-container .credit-card { display: flex; flex-direction: column; }
#cards-container .card-header { min-height: 120px; }
#cards-container .card-body { display: flex; flex-direction: column; flex: 1; }
#cards-container .data-status { margin-top: auto; }
#cards-container .credits-section:has(> h4:only-child) { display: none; }
.source-details { margin-top: .3rem; }
.source-details > summary, .comparison-assumptions > summary { cursor: pointer; min-height: 32px; padding: .35rem 0; color: var(--info); }
.source-details p { margin: .6rem 0; }
.review-badge, .availability-note { display: block; }
body:has(#card-modal.active) { overflow: hidden; }
#card-modal .card-detail-dialog { display: flex; flex-direction: column; width: min(720px, calc(100vw - 3rem)); max-width: 720px; max-height: min(90dvh, 920px); overflow: hidden; padding: 0; }
#card-modal .modal-header { padding: 1.25rem 1.5rem .75rem; margin: 0; gap: 1rem; flex-shrink: 0; }
#card-modal .modal-header h2 { font-size: 1.35rem; line-height: 1.3; }
#card-modal .modal-close { width: 44px; height: 44px; flex-shrink: 0; }
#card-modal .tabs { flex-shrink: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0 1.5rem; }
#card-modal .tab { padding: .875rem .25rem; min-width: 0; min-height: 44px; font-size: .85rem; }
#modal-content { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 1.25rem 1.5rem; overflow-wrap: anywhere; }
#modal-content .overview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
#modal-content .overview-facts .stat-card { padding: 1rem; text-align: left; }
#modal-content .overview-facts .stat-value { font-size: 1.65rem; }
#modal-content .stat-card p { font-size: .875rem; margin-top: .5rem; }
#modal-content .data-status { padding-top: .8rem; border-top: 1px solid var(--border); margin-top: 1.25rem; }
#modal-content .bilt-calculator-link { margin-top: 1rem; }
#card-modal .modal-footer { display: flex; flex-shrink: 0; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--surface); }
#modal-content .rate-item, #modal-content .benefit-item { gap: .75rem; }
#modal-content .benefit-content { min-width: 0; }
#modal-content .benefit-value { flex-shrink: 0; max-width: 40%; }
.comparison-selection { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.comparison-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.comparison-selection-heading h2, .comparison-controls h2 { font-size: 1.1rem; }
.comparison-selection-heading .btn { padding: .4rem .75rem; min-height: 40px; }
.selected-card-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.selected-card-chip { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--accent-light); border: 1px solid var(--border); padding: .25rem .35rem .25rem .85rem; border-radius: 8px; font-size: .875rem; }
.selected-card-chip > span { overflow-wrap: anywhere; }
.selected-card-chip button { flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; font: inherit; font-size: 1.3rem; cursor: pointer; border-radius: 6px; }
.comparison-selection-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.comparison-selection [aria-disabled=true] { opacity: .6; }
.selection-placeholder, .picker-hint { font-size: .875rem; color: var(--text-secondary); }
#comparison-status:empty { display: none; }
.card-picker { padding: 1.25rem; margin-bottom: 1.5rem; }
.card-picker-header { margin-bottom: .75rem; gap: 1rem; }
.card-picker .search-box { margin-bottom: .5rem; }
.picker-hint { margin-bottom: .75rem; }
.card-picker-grid { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-pick-item { min-width: 0; padding: .65rem; }
.card-pick-item .card-info { display: block; }
.card-pick-item .card-name { display: block; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.card-pick-item .card-fee { display: block; margin: .2rem 0 0; padding: 0; border: 0; }
.catalog-text-button { border: 0; background: none; color: var(--info); font: inherit; font-size: .875rem; cursor: pointer; text-decoration: underline; padding: .6rem .2rem; margin-top: .4rem; min-height: 44px; }
.comparison-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .75rem; flex-wrap: wrap; }
.comparison-controls label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; min-height: 44px; }
.comparison-controls input { width: 18px; height: 18px; accent-color: var(--accent); }
#comparison-container { scroll-margin-top: 6rem; }
.comparison-assumptions { font-size: .875rem; margin: .5rem 0 .75rem; }
.comparison-table-wrapper { max-height: 72dvh; overflow: auto; overscroll-behavior: contain; }
.comparison-table { min-width: max(100%, 680px); border-collapse: separate; border-spacing: 0; }
.comparison-table th { position: sticky; top: 0; z-index: 3; }
.comparison-table .card-column-header { text-align: left; padding: 1rem; min-width: 210px; }
.comparison-table .card-column-header .name { font-size: .95rem; }
.comparison-table .card-column-header .remove-btn { float: right; width: 44px; height: 44px; margin: 0; }
.comparison-review-status { color: var(--text-secondary); font-size: .75rem; font-weight: 400; margin-top: .35rem; }
.comparison-table th:first-child { left: 0; z-index: 4; }
.comparison-table .row-label { z-index: 2; }
.comparison-table td { overflow-wrap: anywhere; }
.comparison-table .category-list li, .comparison-table .credit-list li { gap: .5rem; }
.comparison-table .credit-list .amount { white-space: normal; min-width: 3rem; text-align: right; }
.comparison-table .partner-tag { font-size: .8rem; }
.comparison-table .empty-state { padding: 2rem; }
@media (max-width: 760px) {
  .card-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-selection-heading h2 { font-size: 1rem; }
}
@media (max-width: 600px) {
  #card-modal { align-items: flex-end; }
  #card-modal .card-detail-dialog { width: 100%; max-height: 94dvh; border-radius: 18px 18px 0 0; }
  #card-modal .modal-header { padding: .75rem 1rem .25rem; }
  #card-modal .modal-header h2 { font-size: 1.15rem; }
  #card-modal .tabs { padding: 0 .5rem; }
  #card-modal .tab { font-size: .8rem; padding: .85rem 0; }
  #modal-content { padding: 1rem; }
  #modal-content .overview-facts { grid-template-columns: 1fr 1fr; }
  #modal-content .overview-facts .stat-card { padding: .75rem; }
  #modal-content .overview-facts .stat-value { font-size: 1.4rem; }
  #card-modal .modal-footer { padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
  #card-modal .modal-footer .btn { min-height: 44px; }
  .card-picker, .comparison-selection { padding: 1rem; }
  .card-picker-grid { grid-template-columns: 1fr; max-height: 225px; }
  .selected-card-chip { width: 100%; }
  .comparison-selection-actions .btn { flex: 1; padding: .75rem .5rem; }
  .comparison-table th:first-child, .comparison-table td:first-child { width: 110px; min-width: 110px; }
  .comparison-table { min-width: 660px; }
  .comparison-table .card-column-header { padding: .75rem; }
  .comparison-table th, .comparison-table td { padding: .75rem; }
  .comparison-table-wrapper { max-height: 75dvh; }
}