.switch { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; margin-block: var(--s3) var(--s2); border: 1px solid var(--line); border-radius: var(--r2); width: fit-content; background: var(--white); }
.switch button { min-height: 3rem; min-width: var(--tap); padding: .65rem 1rem; border: 0; border-radius: 1rem; color: var(--blue-deep); background: var(--white); font-size: var(--small-size); }
.switch button[aria-pressed="true"] { background: var(--blue-deep); color: var(--white); }
.switch button:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.switch button:disabled { cursor: default; }
.view-note { font-size: var(--small-size); color: var(--muted); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-block: var(--s3); }
.compare article { background: var(--white); padding: var(--s3); border-radius: var(--r2); border-top: 3px solid var(--blue); }
.compare article[data-kind="room"] { background: var(--sky); }
.compare[data-mode="remote"], .compare[data-mode="room"] { grid-template-columns: 1fr; }
.compare p { font-size: var(--body-size); }
.compare li:last-child { margin: 0; }
@media (max-width: 600px) {
  .compare { grid-template-columns: 1fr; }
}
@media print {
  .compare article[hidden] { display: block !important; }
  .compare { grid-template-columns: 1fr; }
}