/* V2 additions use the existing JB-Space brand tokens and dialog system. */
.compare-toggle {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--brand-navy);font-size:12px;background:var(--surface);}
.compare-toggle svg {width:18px;height:18px;flex-shrink:0;}
.compare-toggle.selected {color:var(--brand-teal-hover);background:var(--brand-teal-soft);border-color:var(--brand-teal);}
.listing-compare {width:100%;margin-top:10px;}
.detail-compare {width:100%;margin:0 0 18px;}
.project-card>.compare-toggle {width:calc(100% - 32px);margin:0 16px 16px;}
.comparison-bar {position:fixed;bottom:18px;left:24px;right:24px;max-width:1100px;margin:auto;z-index:750;display:flex;align-items:center;gap:20px;padding:14px 18px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);}
.comparison-label {flex-shrink:0;display:grid;grid-template-columns:20px auto;gap:4px 8px;align-items:center;}
.comparison-label strong {font-size:13px;}.comparison-label small {grid-column:1/-1;font-size:10px;color:var(--muted);}
.comparison-bar ul {display:flex;gap:8px;list-style:none;margin:0;padding:0;flex:1;min-width:0;}
.comparison-bar li {min-width:0;flex:1;display:flex;align-items:center;gap:3px;background:var(--page);border-radius:8px;padding-left:9px;}
.compare-chip-name {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.5;overflow-wrap:anywhere;}
.comparison-bar li button {flex-shrink:0;min-width:36px;min-height:44px;font-size:23px;color:var(--muted);}
.comparison-actions {display:flex;align-items:center;gap:12px;flex-shrink:0;}.comparison-actions .button {min-height:44px;font-size:12px;}
.has-comparison .sidebar {padding-bottom:130px;}.has-comparison .map-tip {bottom:125px;}.has-comparison .leaflet-bottom {bottom:125px;}.has-comparison .compass-panel {bottom:125px;}
.has-comparison .toast {bottom:135px;}
.comparison-dialog {width:1100px;max-width:calc(100vw - 24px);padding:0;max-height:92dvh;}
.comparison-heading {display:flex;justify-content:space-between;gap:20px;align-items:center;position:sticky;top:0;background:var(--surface);z-index:5;padding:22px 26px;border-bottom:1px solid var(--line);}
.comparison-heading h2 {font-size:24px;}.comparison-heading .dialog-close {position:static;flex-shrink:0;margin:0;width:44px;height:44px;}
.comparison-tools {display:flex;align-items:center;gap:14px;padding:14px 26px;}.comparison-tools p {flex:1;color:var(--muted);font-size:11px;line-height:1.7;}.comparison-tools button {min-height:44px;flex-shrink:0;font-size:12px;}
#comparisonContent {padding:0 24px 24px;}.compare-scroll-hint {font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:12px;}
.compare-scroll {overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:10px;overscroll-behavior-x:contain;}
.compare-table {border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;min-width:760px;color:var(--ink);font-size:13px;}
.compare-table th,.compare-table td {padding:15px;text-align:left;vertical-align:top;overflow-wrap:anywhere;border-right:1px solid var(--line);border-bottom:1px solid var(--line);line-height:1.6;}
.compare-table tr>:first-child {position:sticky;left:0;width:115px;background:var(--page);z-index:2;color:var(--muted);font-size:12px;}
.compare-table thead th:not(:first-child) {position:relative;padding-top:56px;font-weight:400;}
.compare-table thead h3 {font-size:16px;margin-top:14px;color:var(--brand-navy);}.compare-table thead p {font-size:11px;color:var(--muted);margin-top:8px;}
.compare-table tr>:last-child {border-right:0;}.compare-table tbody tr:last-child>* {border-bottom:0;}
.compare-remove {position:absolute;right:9px;top:7px;width:44px;height:44px;font-size:26px;color:var(--muted);border:1px solid var(--line);border-radius:8px;}
.compare-photo,.compare-no-photo {width:100%;height:135px;object-fit:cover;border-radius:8px;background:var(--page);}
.compare-no-photo {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12px;}
.compare-table .compare-price {font-size:20px;font-weight:700;color:var(--brand-navy);}.compare-table .button {min-height:44px;font-size:12px;}.compare-empty {padding:32px;color:var(--muted);line-height:1.8;}
.mortgage {margin:22px 0;padding:0;border:1px solid var(--border-strong);border-radius:12px;background:var(--page);}
.mortgage-toggle {display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 16px;text-align:left;border-radius:11px;background:var(--brand-teal-soft);color:var(--brand-navy);}
.mortgage-toggle>svg {flex-shrink:0;width:22px;height:22px;color:var(--brand-teal);}
.mortgage-toggle-label {flex:1;min-width:0;}.mortgage-toggle-label strong {display:block;font-size:14px;line-height:1.5;}.mortgage-toggle-label small {display:block;margin-top:3px;font-size:10px;font-weight:400;color:var(--muted);line-height:1.6;}
.mortgage-toggle-action {font-size:11px;color:var(--brand-teal-hover);white-space:nowrap;}
.mortgage-toggle .mortgage-toggle-chevron {width:17px;height:17px;}.mortgage-toggle[aria-expanded="true"] .mortgage-toggle-chevron {transform:rotate(180deg);}
.mortgage-toggle[aria-expanded="true"] {border-radius:11px 11px 0 0;border-bottom:1px solid var(--line);}
.mortgage-panel {padding:20px;}
.mortgage-heading h3 {font-size:20px;}.mortgage-heading p,.mortgage-assumptions {font-size:11px;color:var(--muted);line-height:1.8;margin-top:8px;}
.mortgage-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:18px;}
.mortgage-fields label {display:grid;gap:7px;font-size:12px;font-weight:600;min-width:0;}
.mortgage-fields input,.mortgage-fields select {width:100%;min-width:0;min-height:46px;padding:10px;border:1px solid var(--border-strong);border-radius:7px;color:var(--ink);background:var(--surface);font-size:16px;}
.mortgage-error {font-size:12px;line-height:1.7;color:var(--danger);margin-top:10px;}.mortgage-error:empty {display:none;}
.mortgage-monthly {padding:20px 0 14px;color:var(--brand-teal-hover);}.mortgage-monthly span,.mortgage-monthly small {display:block;font-size:11px;line-height:1.7;}.mortgage-monthly strong {display:block;font-size:30px;line-height:1.5;overflow-wrap:anywhere;}
.mortgage-totals {margin:0;display:grid;gap:12px;}.mortgage-totals>div {display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.6;}.mortgage-totals dt {color:var(--muted);}.mortgage-totals dd {margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;}
.mortgage-disclaimer {margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.8;}.mortgage-disclaimer summary {cursor:pointer;min-height:36px;}.mortgage-disclaimer p {margin-top:8px;}
.mortgage-legal {font-size:11px;line-height:1.9;color:var(--muted);margin-top:10px;}.mortgage-invalid {padding:20px 0;font-size:12px;color:var(--muted);}
@media(max-width:1100px) {.comparison-bar {gap:12px;}.comparison-bar ul {flex-wrap:wrap;}.comparison-bar li {flex-basis:28%;}.comparison-label small {max-width:150px;}}
@media(max-width:760px) {
  .comparison-bar {bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 12px;}
  .comparison-label {display:flex;gap:6px;}.comparison-label small {display:none;}.comparison-label strong {font-size:12px;}.comparison-label svg {width:17px;}
  .comparison-bar ul {grid-column:1/-1;grid-row:2;flex-wrap:nowrap;gap:5px;}.comparison-bar li {flex:1;padding-left:6px;}.compare-chip-name {font-size:10px;}.comparison-bar li button {min-width:30px;}
  .comparison-actions {gap:8px;}.comparison-actions .button {font-size:11px;padding:8px 10px;}.comparison-actions .text-button {font-size:11px;min-height:44px;}
  .has-comparison .mobile-switch {bottom:calc(135px + env(safe-area-inset-bottom));}.has-comparison .sidebar {padding-bottom:220px;}.has-comparison .map-panel {height:calc(100dvh - 127px);}.has-comparison .map-tip {bottom:220px;}.has-comparison .leaflet-bottom {bottom:225px;}.has-comparison .compass-panel {bottom:220px;}.has-comparison .toast {bottom:220px;}
  .comparison-dialog {max-width:calc(100vw - 16px);max-height:94dvh;}.comparison-heading {padding:16px;}.comparison-heading h2 {font-size:21px;}.comparison-tools {padding:10px 16px;gap:8px;flex-wrap:wrap;}.comparison-tools p {flex-basis:100%;}#comparisonContent {padding:0 12px 18px;}
  .compare-table {min-width:720px;}.compare-table tr>:first-child {width:90px;padding:12px 8px;font-size:11px;}.compare-table th,.compare-table td {padding:12px;font-size:12px;}.compare-table .compare-price {font-size:18px;}.compare-photo,.compare-no-photo {height:120px;}.compare-table thead h3 {font-size:14px;}
  .mortgage-toggle {padding:13px 12px;gap:9px;}.mortgage-toggle-label strong {font-size:13px;}.mortgage-toggle-label small {font-size:10px;}.mortgage-panel {padding:16px;}.mortgage-fields {gap:12px 10px;}.mortgage-fields label {font-size:11px;}.mortgage-totals>div {font-size:11px;}.mortgage-monthly strong {font-size:28px;}
}
@media(max-width:360px) {.comparison-label svg {display:none;}.mortgage-fields {grid-template-columns:1fr;}}

@media(min-width:761px) {
  .detail-dialog:has(.mortgage) .detail-gallery {align-self:start;position:sticky;top:0;height:min(580px,75dvh);min-height:380px;}
}