/* Compare two addresses (#48). Shared classes from app.css do the heavy lifting (page-head, group, topic, chev,
   linkish, quote, rd-cite); this file only lays out the two columns. Tokens: --label, --label-2, --sep-2, --fill,
   --accent. One white card holds the header and the rows; each side shows its city's building. */
.cmp { --c-cols: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1fr) 16px; max-width: var(--page, 980px); }
.cmp .page-head { margin-bottom: 0; }
.cmp-ex { margin-top: 24px; font-size: var(--fs-s); }

/* header: diff count + as-of in the label column, one column per address */
.cmp-card { background: var(--bg); border-radius: var(--r-card, 28px); box-shadow: var(--shadow-card); padding: 12px 28px 8px; }
.cmp-head { display: grid; grid-template-columns: var(--c-cols); column-gap: 24px; align-items: end; padding: 12px 0 20px; }
.cmp-img { aspect-ratio: 16 / 9; height: auto; margin-bottom: 14px; border-radius: 24px; background: var(--stage, var(--fill)); overflow: hidden; }
.cmp-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.cmp-img img.cutout { object-fit: contain; object-position: 50% 100%; }
.page-head .cmp-meta { font-size: 17px; color: var(--label-2); margin-top: 10px; padding: 0; }
.cmp-body { border-top: 1px solid var(--sep-2); }
.cmp-body > :last-child { border-bottom: 0; }
.cmp-body .topic > summary { padding-left: 0; padding-right: 0; }
.cmp-body .topic > summary:hover .cmp-a { color: var(--accent); }
.cmp-meta { font-size: var(--fs-s); line-height: 1.4; color: var(--label-2); padding-top: 2px; }
.cmp-meta b { display: block; font-weight: 600; color: var(--label); }
.cmp-street { font-size: 20px; font-weight: 650; letter-spacing: -.03em; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-street a { color: inherit; }
.cmp-place { font-size: var(--fs-s); color: var(--label-2); display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.cmp-link { min-height: 32px; }
.cmp-facts { display: flex; gap: 16px; margin-top: 8px; }
.cmp-facts label { display: grid; gap: 4px; font-size: var(--fs-s); color: var(--label-2); }
.cmp-facts input { width: 104px; height: 40px; padding: 0 12px; border: 1px solid var(--sep); border-radius: 10px; background: var(--bg); color: var(--label); font-size: 16px; }

/* picker */
.cmp-pick { display: flex; align-items: center; gap: 16px; }
.cmp-pick input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--fill); color: var(--label); font-size: var(--fs-m); -webkit-appearance: none; appearance: none; }
.cmp-pick input:focus-visible { outline: 3px solid var(--ring); outline-offset: 0; }
.cmp-sug { list-style: none; margin: 8px 0 0; padding: 0; }
.cmp-sug li { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--sep-2); cursor: pointer; }
.cmp-sug li:last-child { border-bottom: 0; }
.cmp-sug li[aria-selected="true"] .cmp-o1, .cmp-sug li:hover .cmp-o1 { color: var(--accent); }
.cmp-o1 { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-o2 { font-size: var(--fs-s); color: var(--label-2); }
.cmp-msg { margin-top: 8px; font-size: var(--fs-s); color: var(--label-2); }

/* topic rows: .group > .topic gives the hairlines, details[open] rotates .chev */
.cmp .cmp-sum { grid-template-columns: var(--c-cols); column-gap: 24px; align-items: baseline; }
.cmp-l { color: var(--label-2); }
.cmp-a { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.cmp-a.both { grid-column: span 2; font-weight: 400; color: var(--label-2); }
.cmp-a .cmp-who { display: none; }
.cmp-a.both .cmp-who { display: inline; font-size: var(--fs-s); margin-right: 8px; }
.cmp .cmp-chev { align-self: center; margin: 0; }

.cmp-detail { display: grid; grid-template-columns: var(--c-cols); column-gap: 24px; padding-bottom: 24px; }
.cmp-detail > .cmp-side .cmp-who { display: none; }
.cmp-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.cmp-rt { font-weight: 600; font-size: var(--fs-s); line-height: 1.35; }
.cmp-rs { font-size: var(--fs-s); color: var(--label-2); }
.cmp-rules .quote { margin-top: 6px; font-size: var(--fs-s); color: var(--label-2); }
/* four lines and an ellipsis: the clamp sits on the text, so no fifth line shows through the card's padding */
.cmp-qt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.cmp-rules .rd-cite { margin-top: 6px; }
.cmp-none { font-size: var(--fs-s); color: var(--label-2); }
.cmp-err { margin: 24px 0; color: var(--label-2); }

/* loading: quiet bars, no shimmer */
.cmp-skel { display: grid; grid-template-columns: var(--c-cols); column-gap: 24px; align-items: center; height: 56px; border-bottom: 1px solid var(--sep-2); }
.cmp-skel i { display: block; height: 12px; width: 60%; border-radius: 6px; background: var(--fill); }

@media (max-width: 640px) {
  .cmp-card { padding: 8px 16px 4px; border-radius: 24px; }
  .cmp-img { height: auto; }
  .cmp-head { display: flex; flex-direction: column; gap: 16px; }
  .cmp-head > span:last-child { display: none; }
  .cmp-meta { order: 3; padding: 0; }
  .cmp-head .cmp-slot { width: 100%; }
  .cmp-head .cmp-slot + .cmp-slot { padding-top: 16px; border-top: 1px solid var(--sep-2); }
  .cmp .cmp-sum { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 8px; }
  .cmp-l { grid-column: 1; grid-row: 1; font-size: var(--fs-s); }
  .cmp .cmp-chev { grid-column: 2; grid-row: 1; }
  .cmp-a, .cmp-a.both { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .cmp-a .cmp-who, .cmp-a.both .cmp-who { display: block; margin: 0; font-size: var(--fs-s); font-weight: 400; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmp-detail { display: flex; flex-direction: column; gap: 24px; }
  .cmp-detail > span:first-child { display: none; }
  .cmp-detail > .cmp-side .cmp-who { display: block; margin-bottom: 8px; font-size: var(--fs-s); color: var(--label-2); }
  .cmp-skel { grid-template-columns: 1fr 1fr; }
  .cmp-skel i:first-child { display: none; }
}
.cmp-sug .cmp-grp { min-height: 0; padding: 8px 0 4px; border-bottom: 0; cursor: default; font-size: 12px; font-weight: 650; color: var(--label-2); }
/* the list is a floating card like the home search's */
.cmp-sug:not([hidden]) { padding: 6px; border-radius: 20px; }
.cmp-sug li { padding: 6px 14px; border-bottom: 0; border-radius: 14px; }
.cmp-sug li[role="option"][aria-selected="true"], .cmp-sug li[role="option"]:hover { background: var(--fill); }
.cmp-sug .cmp-grp { padding: 8px 14px 4px; }
/* desktop: an empty side keeps the picture's place, so both columns line up and the field reads as the next step */
@media (min-width: 641px) {
  .cmp-head .cmp-slot { position: relative; align-self: end; }
  .cmp-head .cmp-slot[data-ph]::before { content: attr(data-ph); display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: 24px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--sep-2); color: var(--label-2); font-size: var(--fs-s); font-weight: 550; }
  .cmp-head .cmp-slot .cmp-sug:not([hidden]) { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; }
}