/* /loan/* comparison pages (docs/superpowers/specs/2026-09-21-loan-bnpl-redesign-design.md).
   Page-private, like car.css: only the loan handlers link it, so nothing here
   can repaint another page. Uses the --t24-* tokens; bump ?v= in
   loanpages.go (loanHeadExtra) whenever this file changes. */

/* ---- Landing: search card ---- */
.cr-search { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.cr-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; padding: 4px; border-radius: var(--t24-radius-lg); background: var(--t24-surface-sunken); scrollbar-width: none; }
.cr-tabs a { display: flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--t24-ink-2); text-decoration: none; }
.cr-tabs a:hover { color: var(--t24-brand-deep); text-decoration: none; }
.cr-tabs a[aria-current] { background: var(--t24-brand); color: var(--t24-on-brand); }
.cr-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cr-form .field { flex: 1 1 150px; }
.cr-form .cr-field-amount { flex: 2 1 220px; }
.cr-field-label { font-size: var(--t24-text-micro); font-weight: 600; color: var(--t24-ink-2); line-height: 1.25; }
.cr-form select { width: 100%; padding: 0; border: 0; background: transparent; color: var(--t24-ink); font: inherit; font-size: var(--t24-text-body); font-weight: 700; cursor: pointer; }
.cr-form select:focus { outline: none; }
.cr-submit { flex: 0 0 auto; min-width: 150px; height: 52px; align-self: stretch; }
.cr-search-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--t24-line-2); font-size: var(--t24-text-small); }
.cr-search-foot p { margin: 0; color: var(--t24-ink-3); line-height: var(--t24-lh-small); }
.cr-search-foot a { font-weight: 700; color: var(--t24-brand); }

/* ---- Landing: sections ---- */
.cr-landing { padding-bottom: 48px; }
.cr-section { max-width: 1000px; margin: 48px auto 0; }
.cr-section h2 { margin: 0 0 16px; font-size: var(--t24-text-h2); font-weight: 800; }
.cr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-section-head a { font-size: var(--t24-text-small); font-weight: 700; }
.cr-shortcuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cr-shortcut { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; background: var(--t24-surface); border: 1px solid var(--t24-line); border-radius: var(--t24-radius-2xl); box-shadow: var(--t24-shadow-sm); color: var(--t24-ink); text-decoration: none; }
.cr-shortcut:hover { border-color: var(--t24-brand); box-shadow: var(--t24-shadow-md); color: var(--t24-ink); text-decoration: none; }
.cr-shortcut:focus-visible { box-shadow: var(--focus-ring); }
.cr-shortcut strong { font-size: var(--t24-text-body); font-weight: 800; }
.cr-shortcut span { font-size: var(--t24-text-small); color: var(--t24-ink-2); line-height: var(--t24-lh-small); }
.cr-shortcut em { font-style: normal; font-size: var(--t24-text-micro); font-weight: 700; color: var(--t24-brand); }

/* ---- Results ---- */
.cr-results { max-width: 1000px; margin-inline: auto; padding: 16px clamp(14px, 4vw, 24px) 40px; display: flex; flex-direction: column; gap: 14px; }
.cr-sort { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cr-sort > span { flex: none; font-size: var(--t24-text-micro); font-weight: 700; color: var(--t24-ink-3); }
.cr-chip { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1.5px solid var(--t24-line-control); border-radius: var(--t24-radius-pill); background: var(--t24-surface); color: var(--t24-ink-2); font-size: var(--t24-text-small); font-weight: 600; white-space: nowrap; text-decoration: none; }
.cr-chip:hover { border-color: var(--t24-brand); background: var(--t24-brand-tint); color: var(--t24-brand-deep); text-decoration: none; }
.cr-chip[aria-current] { border-color: var(--t24-brand); background: var(--t24-brand-tint); color: var(--t24-brand-deep); font-weight: 700; }
.cr-filters { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--t24-surface); border: 1px solid var(--t24-line); border-radius: var(--t24-radius-xl); }
.cr-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-filters-head h2 { margin: 0; font-size: var(--t24-text-h3); font-weight: 700; }
.cr-filters-head a { font-size: var(--t24-text-small); font-weight: 700; }
.cr-filter-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cr-filter-group { display: flex; flex-direction: column; gap: 8px; }
.cr-filter-group > span { font-size: var(--t24-text-micro); font-weight: 700; color: var(--t24-ink-3); }
.cr-filter-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.cr-count p { margin: 0; font-size: var(--t24-text-small); color: var(--t24-ink-2); }
.cr-count .cr-fresh { font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* Plan card: identity and badges at the start, money and actions at the end,
   facts under a hairline. The cheapest plan gets the green 2px border. */
.cr-card { padding: 16px; background: var(--t24-surface); border: 1px solid var(--t24-line); border-radius: var(--t24-radius-2xl); box-shadow: var(--t24-shadow-sm); }
.cr-card.is-cheapest { border: 2px solid var(--t24-cheapest-border); }
.cr-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cr-card-id { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 260px; }
.cr-mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--t24-radius-md); font-size: 13px; font-weight: 700; }
.cr-mono-lg { width: 52px; height: 52px; border-radius: var(--t24-radius-lg); font-size: 15px; }
.cr-card-names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-card-names h3 { margin: 0; font-size: var(--t24-text-body); font-weight: 800; line-height: 1.6; }
.cr-card-names h3 span { margin-inline-start: 4px; font-size: var(--t24-text-small); font-weight: 400; color: var(--t24-ink-2); }
.cr-meta { margin: 0; font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-badges { margin: 2px 0 0; gap: 6px; }
.cr-tone-cheapest { background: var(--t24-cheapest-badge-bg); color: var(--t24-cheapest-badge-text); }
.cr-tone-best { background: var(--t24-best-mark-bg); color: var(--t24-best-mark-text); }
/* Unverified and conflicting are words first; the copper hairline keeps the
   badge distinguishable without colour, as .fc-charter does. */
.cr-tone-charter { background: var(--t24-charter-bg); color: var(--t24-charter-text); border-color: currentColor; }
.cr-tone-danger { background: var(--t24-danger-bg); color: var(--t24-danger); }
.cr-card-money { display: flex; align-items: center; gap: 14px; flex: none; }
.cr-money { display: flex; flex-direction: column; gap: 2px; }
.cr-money span { font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-money strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t24-ink); }
.is-cheapest .cr-money strong { color: var(--t24-cheapest-text); }
.cr-money small { font-size: var(--t24-text-micro); color: var(--t24-ink-2); font-variant-numeric: tabular-nums; }
.cr-card-actions { display: flex; flex-direction: column; gap: 6px; }
.cr-btn-sm { flex: none; min-width: 96px; height: 36px; min-height: 36px; padding: 0 14px; font-size: var(--t24-text-small); text-decoration: none; }
.cr-btn-sm:hover { text-decoration: none; }
.cr-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--t24-line-2); }
.cr-facts li { font-size: var(--t24-text-micro); color: var(--t24-ink-2); font-variant-numeric: tabular-nums; }
.cr-assumed { margin: 8px 0 0; font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-warn { margin: 10px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--t24-danger); border-radius: var(--t24-radius-md); background: var(--t24-error-row-bg); color: var(--t24-danger); font-size: var(--t24-text-micro); line-height: var(--t24-lh-small); }
.cr-empty { padding: 28px 18px; text-align: center; background: var(--t24-surface); border: 1px dashed var(--t24-line-control); border-radius: var(--t24-radius-2xl); }
.cr-empty h2 { margin: 0 0 6px; font-size: var(--t24-text-h3); }
.cr-empty p { margin: 0 0 10px; font-size: var(--t24-text-small); color: var(--t24-ink-2); }
.cr-empty a { font-size: var(--t24-text-small); font-weight: 700; }
.cr-disclaimer { margin: 6px 0 0; font-size: var(--t24-text-micro); color: var(--t24-ink-3); line-height: var(--t24-lh-small); }

/* ---- Plan detail ---- */
.cr-detail { padding-top: 20px; padding-bottom: 48px; }
.cr-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.cr-detail-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cr-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--t24-surface); border: 1px solid var(--t24-line); border-radius: var(--t24-radius-2xl); }
.cr-panel h2 { margin: 0; font-size: var(--t24-text-h3); font-weight: 700; }
.cr-panel p { margin: 0; font-size: var(--t24-text-small); color: var(--t24-ink-2); line-height: var(--t24-lh-body); }
.cr-panel > a { font-size: var(--t24-text-small); font-weight: 700; }
.cr-head { gap: 14px; box-shadow: var(--t24-shadow-sm); }
/* .cr-card-id and .search-btn carry a flex-basis for row layouts; inside these
   column panels that basis would become a height. */
.cr-head .cr-card-id { flex: none; }
.cr-head h1 { margin: 0; font-size: var(--t24-text-h2); font-weight: 800; line-height: var(--t24-lh-heading); text-wrap: pretty; }
.cr-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--t24-line-2); }
.cr-facts-grid div { display: flex; flex-direction: column; gap: 3px; }
.cr-facts-grid dt { font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-facts-grid dd { margin: 0; font-size: var(--t24-text-body); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; }
.cr-note { margin: 0; padding: 12px 14px; border-inline-start: 3px solid var(--t24-accent); border-radius: var(--t24-radius-md); background: var(--t24-charter-bg); color: var(--t24-charter-text); font-size: var(--t24-text-small); line-height: var(--t24-lh-body); }
.cr-warn-lg { margin: 0; padding: 12px 14px; font-size: var(--t24-text-small); line-height: var(--t24-lh-body); }
.cr-aside { position: sticky; top: 80px; box-shadow: var(--t24-shadow-md); }
.cr-aside-head { display: flex; flex-direction: column; gap: 3px; }
.cr-aside-head span { font-size: var(--t24-text-micro); color: var(--t24-ink-3); }
.cr-aside-head strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-calc { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--t24-line-2); }
.cr-calc div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cr-calc dt { font-size: var(--t24-text-small); color: var(--t24-ink-2); }
.cr-calc dd { margin: 0; font-size: var(--t24-text-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-cta { flex: none; align-self: stretch; height: 48px; min-height: 48px; font-size: var(--t24-text-ui); text-decoration: none; }
.cr-cta:hover { text-decoration: none; }
.cr-panel .cr-quiet { font-size: var(--t24-text-micro); color: var(--t24-ink-3); line-height: var(--t24-lh-small); }
@media (max-width: 759px) {
  .cr-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-aside { position: static; }
}

/* ---- Compare tray (results) ---- */
.cr-cmp { min-width: 96px; height: 36px; }
.cr-cmp[aria-pressed="true"] { border-color: var(--t24-brand); background: var(--t24-brand-tint); color: var(--t24-brand-deep); }
.cr-cmp:disabled { opacity: .5; cursor: not-allowed; }
.cr-tray { position: sticky; bottom: 0; z-index: 30; padding: 12px clamp(14px, 4vw, 24px); background: var(--t24-surface); border-top: 1px solid var(--t24-line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
.cr-tray-inner { max-width: 1000px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cr-tray-inner > span { font-size: var(--t24-text-small); font-weight: 700; color: var(--t24-ink-2); }
.cr-tray-inner > div { display: flex; gap: 8px; }
.cr-tray [aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---- Compare page ---- */
.cr-compare { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; padding-bottom: 48px; }
.cr-compare h1 { margin: 0; font-size: var(--t24-text-h2); font-weight: 800; }
.cr-compare-scroll { overflow-x: auto; padding-bottom: 4px; }
.cr-compare-table { min-width: 100%; border-collapse: separate; border-spacing: 10px 0; }
.cr-compare-table th, .cr-compare-table td { padding: 10px 12px; border-top: 1px solid var(--t24-line-2); text-align: start; vertical-align: middle; font-size: var(--t24-text-small); line-height: 1.5; }
.cr-compare-table thead th { border-top: 0; vertical-align: top; }
.cr-compare-table tbody th { width: 150px; font-weight: 700; color: var(--t24-ink-3); }
.cr-compare-table td, .cr-compare-table thead th + th { min-width: 230px; background: var(--t24-surface); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-col-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cr-col-head .cr-mono { width: 32px; height: 32px; border-radius: var(--t24-radius-pill); font-size: 12.5px; }
.cr-col-head > span:not(.cr-mono) { font-size: var(--t24-text-small); font-weight: 400; color: var(--t24-ink-2); }

@media (max-width: 559px) {
  .cr-search { padding: 14px; }
  .cr-submit { width: 100%; }
  .cr-card { padding: 12px; }
  .cr-card-money { width: 100%; justify-content: space-between; }
}