/* Jämför adresser (jamfor.html, compare.js). Builds on site.css. */
.cmp { gap: clamp(32px, 4vw, 56px); }
.cmp-pick { display: grid; gap: 16px; }
.cmp-group { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cmp-group legend, .cmp-group summary { font-weight: 600; margin-bottom: 6px; cursor: pointer; }
.cmp-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 12px; background: var(--paper); cursor: pointer; }
.cmp-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.cmp-grid { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(var(--cols), minmax(0, 1.4fr)); gap: 4px; }
.cmp-head { position: sticky; top: 0; z-index: 2; background: var(--field); color: var(--field-ink); padding: 12px 14px; display: grid; gap: 4px; }
.cmp-head .small { color: var(--field-muted); }
.cmp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: baseline; }
.cmp-gh { font-size: var(--step-lead); margin-top: 20px; }
.cmp-title { font-weight: 600; padding: 12px 0; align-self: start; }
.cmp-cell { background: var(--paper); padding: 10px 12px; display: grid; gap: 6px; align-content: start; font-size: var(--step-small); }
.cmp-cell .pill { justify-self: start; }
.cmp-addr { display: none; font-weight: 600; }
@media (max-width: 720px) {
  /* On a phone each point is a block: its title, then one line per address. */
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-grid > div:first-child, .cmp-head { display: none; }
  .cmp-title { padding: 14px 0 2px; }
  .cmp-addr { display: block; }
}