/* results — page-local rules (★#59 M8). Moved verbatim from results.html's inline <style>. Shared components live in chrome.css. */

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ── Floating compare bar (CLEAN-6.19 — inline compare on result rows) ── */
  .compare-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 140%);
    z-index: 180;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 18px;
    background: var(--surface-dark);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,.28);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
  }
  .compare-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .compare-bar .cmp-bar-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-2);
    font-weight: 500;
    white-space: nowrap;
  }
  .compare-bar .cmp-bar-go {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-2);
    font-weight: 600;
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    transition: opacity .15s;
  }
  .compare-bar .cmp-bar-go:disabled { opacity: .45; cursor: default; }
  .compare-bar .cmp-bar-clear {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: var(--fs-5);
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
  }
  .compare-bar .cmp-bar-clear:hover { color: #fff; }

  /* ── Reset & base ──────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    transition: background .2s, color .2s;
  }
  a { color: inherit; text-decoration: none; }

  /* ── Layout shell ──────────────────────────────────────────────── */
  /* ── Results section ───────────────────────────────────────────── */
  .results-section { padding: 0 20px 24px; }

  @media (max-width: 640px) {
    .results-section { padding: 0 12px 24px; }
    /* Stack the toolbar so the count and the sort/ready controls each get their
       own full-width line with real breathing room (was cramped side-by-side). */
    .results-meta { flex-direction: column; align-items: stretch; row-gap: 12px; margin-top: 18px; }
    .results-meta > div:last-child { justify-content: space-between; }
    /* the "·" separator is orphaned once "About this data" wraps to its own line */
    .about-data-link::before { display: none; }
  }
  .results-meta {
    max-width: var(--page-max); margin: 16px auto 14px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
  }
  .meta-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .about-data-link {
    font-family: 'Inter', sans-serif; font-size: var(--fs-1);
    color: var(--accent); text-decoration: none;
    display: inline-flex; align-items: center; gap: 3px;
    border-bottom: 1px solid transparent; transition: border-color .15s;
  }
  .about-data-link::before { content: "·"; color: var(--text-subtle); margin-right: 7px; }
  .about-data-link svg { width: 11px; height: 11px; }
  .about-data-link:hover { border-bottom-color: var(--accent); }

  /* ── Parent location group banner ──────────────────────────────── */
  .group-banner {
    max-width: var(--page-max); margin: 0 auto 14px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
  }
  .group-banner-title {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-2); font-weight: 600;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .group-banner-title .gb-count { color: var(--text-muted); font-weight: 500; }
  .group-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .group-chip {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    padding: 4px 10px; border-radius: 16px;
    cursor: pointer; transition: background .15s, border-color .15s;
  }
  .group-chip:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
  .group-chip .gc-count { color: var(--text-muted); margin-left: 5px; }

  /* ── Transaction table — semantic <table> (R4 a11y rebuild, Report 1 F1) ── */
  .tx-table-wrap {
    max-width: var(--page-max); margin: 0 auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow), var(--highlight);
  }
  .tx-table { width: 100%; border-collapse: collapse; }
  .tx-table thead th {
    text-align: left;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-subtle);
    background: var(--surface-alt);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .tx-table thead th.right { text-align: right; }
  .tx-col-save { width: 40px; } .tx-col-cmp { width: 108px; }
  .tx-col-date { width: 110px; } .tx-col-size { width: 104px; } .tx-col-price { width: 152px; }

  .tx-row { border-top: 1px solid var(--border); cursor: pointer; transition: background var(--transition); }
  .tx-table tbody tr:first-child { border-top: none; }
  .tx-row:hover { background: var(--surface-alt); }
  .tx-table td { padding: 13px 14px; vertical-align: middle; }
  .tx-table td.right { text-align: right; }

  .td-date { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: var(--fs-2); color: var(--text-muted); display: block; white-space: nowrap; }
  .td-age  { font-size: var(--fs-1); color: var(--text-subtle); display: block; margin-top: 1px; }
  .td-area { font-size: var(--fs-3); font-weight: 600; color: var(--text); display: block; }
  .td-project { font-size: var(--fs-2); color: var(--text-muted); display: block; }
  .td-size { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: var(--fs-2); color: var(--text); display: block; }
  .td-price { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-4); font-weight: 700; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; cursor: copy; display: block; }
  .td-ppsf { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: var(--fs-1); color: var(--text-subtle); margin-top: 2px; display: block; }
  .badge-type {
    display: inline-block;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1); letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 4px;
    background: var(--surface-alt); color: var(--text-subtle);
    border: 1px solid var(--border); margin-top: 4px;
  }
  .copy-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--chrome); color: var(--chrome-ink);
    font-size: var(--fs-2); font-weight: 500; padding: 8px 18px;
    border-radius: var(--radius-pill); z-index: 500;
    opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap;
  }

  /* Compare pill (own cell) */
  .row-cmp {
    font-family: 'Inter', sans-serif; font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em;
    padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
  }
  .row-cmp:hover { border-color: var(--accent); color: var(--accent); }
  .row-cmp.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
  .sk-cell { padding: 16px 14px !important; }

  /* ── Mobile: reflow the table into stacked cards ──────────────────── */
  @media (max-width: 640px) {
    .tx-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    .tx-table, .tx-table tbody { display: block; }
    /* Stacked card: bookmark gutter | content | figures. The project + date lines
       align under the location (col 2); price / size / compare stack on the right.
       Generous row-gap (was 2px) so the three lines breathe instead of squashing;
       the compare pill sits bottom-right instead of crammed into the 22px gutter. */
    .tx-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: start;
      column-gap: 12px; row-gap: 8px; padding: 18px 14px;
      grid-template-areas: "save loc  price" ".    proj size" ".    date cmp"; }
    .tx-table td { display: block; padding: 0; }
    .tx-col-save { grid-area: save; align-self: start; }
    .tx-col-cmp  { grid-area: cmp; align-self: center; justify-self: end; }
    .td-col-location { grid-area: loc; }
    .td-col-location .badge-type { margin-top: 5px; }
    .td-col-project { grid-area: proj; }
    .td-col-size { grid-area: size; text-align: right; }
    .td-col-size::after { content: attr(data-ppsf); display: block; font-size: var(--fs-1); color: var(--text-subtle); margin-top: 2px; }
    .td-col-price { grid-area: price; text-align: right; }
    .td-price { font-size: var(--fs-4); }
  }

  /* ── Community summary cards ───────────────────────────────────── */
  .community-row {
    max-width: var(--page-max);
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .community-row::-webkit-scrollbar { display: none; }

  .community-card {
    flex-shrink: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all .2s;
    min-width: 140px;
    max-width: 180px;
  }
  .community-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
  .community-card.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .cc-trend.up   { color: var(--pos); }
  .cc-trend.down { color: var(--danger); }
  .cc-trend.flat { color: var(--text-muted); }

  @media (max-width: 640px) {
    .community-card { min-width: 120px; padding: 10px 12px; }
  }

  /* ── Saved transactions ────────────────────────────────────────── */

  /* ── Skeleton loader ───────────────────────────────────────────── */

  /* ── Newsletter capture ────────────────────────────────────────── */
  .nl-success {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-2);
    color: var(--accent);
    margin-top: 12px;
    display: none;
  }

  /* ── No results ────────────────────────────────────────────────── */
  .empty-state {
    text-align: center; padding: 60px 20px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-5);
    color: var(--text-subtle);
  }

  /* ═══════════════════════════════════════════════════════════════════
     PAGE 2 — Deal Deep-Dive
  ═══════════════════════════════════════════════════════════════════ */
  .back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; font: inherit;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    padding: 14px 0;
    transition: color .2s;
  }
  .back-btn:hover { color: var(--accent); }

  .page2-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 0;
  }
  .share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-1);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
  }
  .share-btn:hover { border-color: var(--accent); color: var(--accent); }
  .wa-text { display: inline; }
  @media (max-width: 480px) {
    .wa-text { display: none; }
    #waBtn { padding: 6px 10px; }
  }
  .share-btn svg { width: 13px; height: 13px; }
  .share-btn.copied {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .pdf-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-1);
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
  }
  .pdf-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pdf-btn svg { width: 13px; height: 13px; }
  .pdf-btn.loading { opacity: .6; pointer-events: none; }
  .back-arrow { font-size: var(--fs-4); }

  .deal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 60px;
    width: 100%;
    min-width: 0;
  }
  @media (max-width: 720px) {
    .deal-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  .deal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    box-shadow: var(--shadow);
    min-width: 0;
    overflow: hidden;
  }
  @media (max-width: 640px) {
    .deal-card { padding: 18px 16px; }
  }

  .deal-eyebrow {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .deal-headline {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-6);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: 6px;
  }
  .deal-meta {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  .deal-map-link {
    display: inline-block;
    font-size: var(--fs-2); font-weight: 600;
    color: var(--accent); text-decoration: none;
    margin-top: -14px; margin-bottom: 24px;
  }
  .deal-map-link:hover { text-decoration: underline; }

  /* ── KPI boxes ─────────────────────────────────────────────────── */
  .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; min-width: 0; }
  @media (max-width: 400px) { .kpi-grid { grid-template-columns: 1fr; } }
  .kpi-grid.three { grid-template-columns: 1fr; }
  .kpi-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
  }
  .kpi-label {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .kpi-value {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-6);
    color: var(--text);
    letter-spacing: -.02em;
  }
  .kpi-sub {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    color: var(--text-muted);
    margin-top: 3px;
  }
  .kpi-delta {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    margin-top: 4px;
    font-weight: 500;
  }
  .kpi-delta.above { color: var(--danger); }
  .kpi-delta.below { color: var(--pos); }
  .kpi-delta.equal { color: var(--text-muted); }

  /* ── Mortgage planner ──────────────────────────────────────────── */
  .section-label {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  .toggle-group {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
  }
  .toggle-opt {
    flex: 1;
    padding: 9px 6px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    letter-spacing: .04em;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-muted);
    border: none;                            /* button-element reset */
    border-right: 1px solid var(--border);
    transition: all .18s;
    user-select: none;
  }
  .toggle-opt:last-child { border-right: none; }
  .toggle-opt.active {
    background: var(--accent);
    color: var(--on-accent);
  }

  .bool-group {
    display: flex; gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .bool-opt {
    flex: 1;
    padding: 9px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-muted);
    border: none;                            /* button-element reset */
    border-right: 1px solid var(--border);
    transition: all .18s;
    user-select: none;
  }
  .bool-opt:last-child { border-right: none; }
  .bool-opt.active {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
  }

  /* ── Cost breakdown ────────────────────────────────────────────── */
  .breakdown-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; table-layout: fixed; word-break: break-word; }
  .breakdown-table td {
    padding: 7px 0;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-2);
    border-bottom: 1px dashed var(--border);
  }
  .breakdown-table td:last-child { text-align: right; color: var(--text); }
  .breakdown-table td:first-child { color: var(--text-muted); }
  .breakdown-total td {
    border-bottom: none;
    font-weight: 600;
    font-size: var(--fs-2);
    padding-top: 12px;
    color: var(--text) !important;
  }
  .breakdown-total td:last-child {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-5);
    color: var(--accent) !important;
  }

  .monthly-box {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  @media (max-width: 640px) {
    .monthly-box {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .monthly-value { font-size: var(--fs-5); }
  }
  .monthly-label {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    color: var(--text-muted);
  }
  .monthly-value {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-6);
    color: var(--text);
    letter-spacing: -.02em;
  }

  .dbr-box {
    border-radius: 6px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: var(--fs-1);
    display: none;
  }
  .dbr-box.safe {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
  }
  /* ── Yield calculator ──────────────────────────────────────────── */
  .calc-tab {
    flex: 1;
    padding: 9px;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-2);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-muted);
    border: none;                            /* button-element reset */
    border-right: 1px solid var(--border);
    transition: all .18s;
    user-select: none;
  }

  /* F16 — registered-rent pre-fill note under the rent input */
  .yield-hint {
    font-size: var(--fs-1);
    color: var(--text-muted);
    margin: -4px 0 10px;
    line-height: 1.5;
  }

  /* ── Modal (About) ─────────────────────────────────────────────── */
  /* ── Building volume chart ──────────────────────────────────────── */
  .volume-chart-wrap {
    position: relative;
    height: 100px;
    margin-top: 4px;
  }
  .volume-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
  }

  /* ── Price band distribution ───────────────────────────────────── */
  .price-band-wrap {
    margin: 20px 0 4px;
  }
  .price-band-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .price-band-track {
    position: relative;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin: 0 0 10px;
  }
  .price-band-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--surface-alt), var(--accent));
    border-radius: 3px;
    opacity: .35;
  }
  .price-band-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    z-index: 1;
  }
  .price-band-marker.this-tx {
    background: var(--accent);
    width: 16px; height: 16px;
  }
  .price-band-marker.median {
    background: var(--text-muted);
    width: 10px; height: 10px;
  }
  .price-band-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
  }
  .price-band-end {
    font-size: var(--fs-1);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .price-band-end.highlight {
    color: var(--accent);
    font-weight: 600;
  }
  .price-band-legend {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .pbl-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-1);
    color: var(--text-muted);
  }
  .pbl-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── Similar transactions ──────────────────────────────────────── */
  .similar-card {
    grid-column: 1 / -1;
  }
  .similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 4px;
  }
  .similar-item {
    background: var(--surface-alt);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
  }
  .similar-item:hover {
    border-color: var(--accent);
    background: var(--surface);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
  .similar-project {
    font-size: var(--fs-2);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .similar-meta {
    font-size: var(--fs-1);
    color: var(--text-muted);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
  }
  .similar-price {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: var(--fs-3);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .similar-ppsf {
    font-size: var(--fs-1);
    color: var(--text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .similar-badge {
    display: inline-block;
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    margin-bottom: 8px;
  }
  .similar-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  @media (max-width: 640px) {
    .similar-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ── Comparison overlay ────────────────────────────────────────── */
  .compare-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%; max-width: 900px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    overflow: hidden;
    margin: auto;
  }
  /* Kink fix: pin the label column so PROPERTY/DATE/PRICE… stay visible while the
     comparison columns scroll sideways on a narrow screen. Opaque bg + right hairline. */
  .compare-table th:first-child, .compare-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface-alt); box-shadow: 1px 0 0 var(--border);
  }
  /* ── Onboarding walkthrough ─────────────────────────────────────── */
  .onboard-backdrop {
    position: fixed; inset: 0; z-index: 300;
    pointer-events: none;
  }
  .onboard-tooltip {
    position: fixed; z-index: 301;
    background: var(--surface-dark);
    color: white;
    border-radius: 10px;
    padding: 16px 18px;
    max-width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    pointer-events: auto;
    transition: all .3s cubic-bezier(.4,0,.2,1);
  }
  .onboard-body { font-size: var(--fs-2); color: #94A3B8; line-height: 1.5; margin-bottom: 14px; }
  .onboard-next {
    background: var(--accent); color: var(--on-accent);
    border: none; border-radius: 6px;
    padding: 7px 16px; font-family: 'Inter', sans-serif;
    font-size: var(--fs-2); font-weight: 600; cursor: pointer;
    transition: opacity .2s;
  }
  .onboard-dot { width: 6px; height: 6px; border-radius: 50%; background: #1E293B; transition: background .2s; }
  /* ── Divider ───────────────────────────────────────────────────── */

  /* ── Utility ───────────────────────────────────────────────────── */

  /* ── Mobile page overrides (shared control overrides now in chrome.css) ── */
  @media (max-width: 640px) {
    .results-section { padding: 0 10px 24px; }
    .tx-table-wrap { border-radius: 6px; }  }

/* ★#59 M8 — static style="" from results.html + results.js, now classes. Each rule restates the inline
   declarations it replaced; where the inline style used to beat a :hover or a narrower @media rule,
   the class restates the winning value there too. */
.rs-bar { max-width: var(--page-max); margin: 0 auto; }
.rs-bar > .filter-row { margin-top: 10px; }
.meta-right { display: flex; align-items: center; gap: 8px; }
.sold-line.rs-sold { max-width: var(--page-max); margin: 14px auto 16px; }
.sk-cell .skeleton { height: 16px; }
.share-btn.is-wa, .share-btn.is-wa:hover { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.3); color: #25d366; }  /* WhatsApp brand green, kept verbatim */
.verify-cta.is-spaced { margin-top: 20px; }
.empty-img { display: block; margin: 0 auto 6px; max-width: 60%; height: auto; }
.span-all { grid-column: 1 / -1; }
.deal-card.is-loading { text-align: center; padding: 60px; }
.skeleton.sk-title { width: 200px; height: 18px; margin: 0 auto 14px; }
.skeleton.sk-price { width: 320px; height: 32px; margin: 0 auto 10px; }
.skeleton.sk-meta { width: 160px; height: 14px; margin: 0 auto; }
.deal-age { color: var(--text-subtle); }
.kpi-grid.is-pair { grid-template-columns: 1fr 1fr; }   /* holds two columns below 400px too */
.kpi-box.is-area-only { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.kpi-label.is-accent { color: var(--accent-soft); }
.area-note { font-size: .78rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.ico-lead { vertical-align: -2px; margin-right: 4px; }
.ico-tab { vertical-align: -2px; margin-right: 5px; }
.vol-wrap { margin-top: 16px; }
.price-band-fill { left: 0; right: 0; }
.pb-sub { font-size: .62rem; }
.price-band-end.is-position { text-align: center; font-weight: 600; font-size: .72rem; }
.price-band-end.pos-low { color: var(--accent); }
.price-band-end.pos-mid { color: var(--text-muted); }
.price-band-end.pos-high { color: var(--danger); }
.price-band-end.is-right { text-align: right; }
.pbl-dot.is-tx { background: var(--accent); }
.pbl-dot.is-median { background: var(--text-muted); }
.yield-kpi-value.is-sm { font-size: 1rem; }
.calc-disclaimer.is-tight { margin-top: 8px; }
.monthly-sub { font-family: 'Inter', sans-serif; font-size: .68rem; color: var(--text-muted); }
.pdf-btn svg.is-spin { animation: spin 1s linear infinite; }