/* /compare and /shortlist (page_compare.html, page_shortlist.html). */
.sl-page, .cmp-page { padding-block: var(--sp-6) var(--sp-12); }
.sl-head, .cmp-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.sl-head h1, .cmp-head h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.sl-head .btn-row { margin-top: var(--sp-2); }
.sl-empty { margin-block: var(--sp-6); }
.sl-empty .i { width: 1em; height: 1em; vertical-align: -2px; }
.sl-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.sl-sync p { margin: 0; max-width: 46rem; }
.sl-sync[hidden] { display: none; }

.cmp-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cmp-from input { width: 10rem; min-height: var(--h-control-sm); padding: 0 var(--sp-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; }
.cmp-from .from-err { flex-basis: 100%; margin: 0; color: var(--bad-ink); }

/* the table scrolls sideways inside its box; the label column stays put */
.cmp-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--cmp-label); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); --cmp-label: 11rem; }
.cmp-scroll:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cmp { width: 100%; min-width: calc(var(--cmp-label) + 14rem * 2); border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.cmp[data-cols="3"] { min-width: calc(var(--cmp-label) + 14rem * 3); }
.cmp[data-cols="4"] { min-width: calc(var(--cmp-label) + 14rem * 4); }
.cmp th, .cmp td { box-sizing: border-box; padding: var(--sp-2_5, .625rem) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cmp td, .cmp thead th { scroll-snap-align: start; }
.cmp tbody th[scope="row"], .cmp-corner { position: sticky; left: 0; z-index: 1; width: var(--cmp-label); min-width: var(--cmp-label); background: var(--card); font-weight: 500; color: var(--muted-foreground); box-shadow: 1px 0 0 var(--border); }
.cmp thead th { font-weight: 400; vertical-align: bottom; }
.cmp-col { display: grid; gap: var(--sp-2); }
.cmp-img { height: 96px; overflow: hidden; border-radius: var(--radius-md); }
.cmp-img img, .cmp-img svg { width: 100%; height: 100%; object-fit: cover; }
.cmp-name { font-weight: 700; color: var(--foreground); text-decoration: none; font-size: var(--text-base); line-height: var(--leading-base); }
.cmp-name:hover { text-decoration: underline; }
.cmp-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); }
.cmp-acts .i { width: 14px; height: 14px; }
.cmp-group th { padding-top: var(--sp-5); background: var(--muted); color: var(--foreground); font-weight: 600; text-align: left; position: sticky; left: 0; }
.cmp-sub { display: block; font-size: var(--text-sm); color: var(--muted-foreground); }
.cmp-ask { color: var(--subtle-foreground); font-size: var(--text-sm); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp-note { margin-top: var(--sp-3); }
@media (max-width: 639px) {
  .cmp-scroll { --cmp-label: 6.5rem; margin-inline: calc(var(--sp-4) * -1); border-radius: 0; border-inline: 0; }
  /* two nurseries side by side; swipe for the third and fourth */
  .cmp { --colw: calc((100vw - var(--cmp-label)) / 2); min-width: calc(var(--cmp-label) + var(--colw) * 2); }
  .cmp[data-cols="3"] { min-width: calc(var(--cmp-label) + var(--colw) * 3); }
  .cmp[data-cols="4"] { min-width: calc(var(--cmp-label) + var(--colw) * 4); }
  .cmp td, .cmp thead th { width: var(--colw); min-width: var(--colw); max-width: var(--colw); }
  .cmp td.cmp-corner { width: var(--cmp-label); min-width: var(--cmp-label); max-width: var(--cmp-label); }
  .cmp-img { height: 64px; }
  .cmp-acts .btn { padding-inline: var(--sp-2); white-space: normal; }
  .cmp-acts .btn { width: 100%; justify-content: center; }
  .cmp th, .cmp td { padding: var(--sp-2); font-size: var(--text-sm); }
}