/* Rent vs Own: Quick Start assumptions (a reference page; the shared design
   system does the rest). */

/* Header layout (this page only loads shared.css + this file) */
.header-left{min-width:0}
.header-left h1{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;display:flex;align-items:center}
.header-left p{color:var(--muted);font-size:.9rem;line-height:1.5}
.header-right{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;align-items:flex-start}
.btn-back{text-decoration:none;display:inline-flex;align-items:center}

.qa-intro,.qa-glance,.qa-city{padding:18px 20px;margin-bottom:16px}
.intro{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 14px}
.qa-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qa-search{flex:1 1 260px;min-width:0}
.qa-count{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}

.qa-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px;margin-bottom:6px}
.qa-head h2{font-size:1.18rem;margin:0}
.qa-h-sub{margin-left:8px;font-size:.86rem;font-weight:500;color:var(--muted)}
.qa-chips{display:flex;flex-wrap:wrap;gap:6px}
.qa-chip{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--input-bg);color:var(--muted);white-space:nowrap}
.qa-city h3{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px}
.qa-city h4{font-size:.82rem;margin:12px 0 4px}
.qa-lead{font-size:.9rem;line-height:1.55;margin:6px 0 4px}
.qa-buyer{font-size:.84rem;color:var(--muted);line-height:1.5;margin:0}
.unit-note{margin:0 0 8px}

/* Tables: the design reference's table, framed and scrolling sideways. */
.qa-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md)}
@supports not selector(::-webkit-scrollbar){.qa-table-wrap{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}}
.qa-table{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:.84rem}
.qa-table th,.qa-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;vertical-align:top}
.qa-table th{background:var(--panel);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;vertical-align:bottom}
.qa-table th:first-child,.qa-table td:first-child{text-align:left;font-family:'DM Sans',sans-serif}
.qa-table tbody tr:last-child td{border-bottom:none}
.qa-table tbody tr:hover td{background:rgba(141,187,255,.05)}
body.light .qa-table tbody tr:hover td{background:rgba(90,145,232,.05)}
.qa-sub{display:block;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:400;color:var(--muted);white-space:normal;margin-top:1px}

/* At a glance: city down the side, home types across, the city column
   frozen so a phone can scroll the rest under it. */
.qa-matrix th,.qa-matrix td{text-align:center}
.qa-matrix .qa-form-th{border-bottom:1px solid var(--border);text-align:center}
.qa-matrix .qa-city-th,.qa-matrix .qa-city-td{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;min-width:150px}
.qa-matrix td.qa-city-td a{font-weight:700;color:var(--text);text-decoration:none}
.qa-matrix td.qa-city-td a:hover{color:var(--accent)}
.qa-matrix .qa-region td{position:static;background:var(--input-bg);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:5px 10px}
.qa-cell{display:block;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);padding:2px 4px}
.qa-cell:hover,.qa-cell:focus-visible{background:var(--input-bg);color:var(--accent)}
.qa-price{font-weight:600}
.qa-none{color:var(--muted)}
.qa-dash{cursor:help;padding:2px 8px;border-bottom:1px dashed var(--border)}
.qa-dash:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.no-results{display:none;padding:24px;text-align:center;color:var(--muted);font-size:.9rem}

/* A city's homes and terms. */
.qa-homes td.qa-home{white-space:normal;min-width:190px;max-width:300px}
.qa-open{font-family:'DM Sans',sans-serif;font-weight:600;font-size:.8rem;color:var(--accent);text-decoration:none;white-space:nowrap}
.qa-open:hover{text-decoration:underline}
.qa-terms td.qa-val{text-align:left;white-space:normal;min-width:150px;font-family:'DM Sans',sans-serif}
.qa-terms td.qa-basis{text-align:left;white-space:normal;min-width:260px;font-family:'DM Sans',sans-serif;color:var(--muted);font-size:.8rem;line-height:1.45}
.qa-terms th:nth-child(2),.qa-terms th:nth-child(3){text-align:left}
.qa-list{margin:4px 0 0;padding-left:18px;font-size:.84rem;line-height:1.55}
.qa-list li{margin:3px 0}
.qa-sources a{color:var(--accent);text-decoration:none;word-break:break-word}
.qa-sources a:hover{text-decoration:underline}
.qa-caveat{margin:14px 0 0;padding:10px 14px;font-size:.84rem;line-height:1.55;background:var(--input-bg);border:1px solid var(--border);border-left:3px solid var(--accent2);border-radius:var(--radius-sm)}
.qa-more{margin-top:14px;font-size:.84rem}
.qa-more summary{cursor:pointer;font-weight:600;color:var(--accent);list-style-position:inside}
.qa-more[open] summary{margin-bottom:6px}

/* Landing from the calculator's link: the row or city it pointed at. */
.qa-city{scroll-margin-top:16px}
tr.qa-target td{background:color-mix(in srgb,var(--accent) 12%,transparent) !important}
section.qa-target{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:600px){
  .header-left h1{font-size:1.35rem;display:block}
  .qa-intro,.qa-glance,.qa-city{padding:14px}
  .qa-table th,.qa-table td{padding:7px 8px;font-size:.78rem}
  .qa-matrix .qa-city-th,.qa-matrix .qa-city-td{min-width:110px}
}