/* A choice that is on or off (the roof, the walls, the open roof) is a pill, as the demo's chips are: the same font, the same height (the page's --hit, 48 px at least), the same pressed state, in light and in dark,
   wrapping on a phone. The checkbox is still there for a keyboard, a screen reader and a test; it lies over the pill, clear, so that a press anywhere on the pill is a press on it. */
label.check { position: relative; display: inline-flex; align-items: center; justify-content: center; align-self: end; min-height: var(--hit, 48px); padding: 0 18px; border: 2px solid var(--line, #b9b3a3); border-radius: 999px; background: var(--card, #fff); color: var(--ink, #10151b); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; text-align: center; }
label.check input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
label.check:hover:not(:has(input:checked)) { border-color: var(--tab, #10151b); }
label.check:has(input:checked) { border-color: var(--tab, #10151b); background: var(--tab, #10151b); color: var(--tab-ink, #fff); }
label.check:has(input:focus-visible) { outline: 3px solid var(--accent, #1f5fa8); outline-offset: 2px; }