/* Website demo (`--mode demo`, isolate.mjs): the sunrise-to-sunset slider chip (app/sun-slider.js)
   that replaces the day/night button. A chip in the top-left row like the app's own status and
   alert chips; it is a control, not a button, so the pill's pointer cursor is reset.
   Linked before the app's stylesheet: `.pill.sun` outranks the app's `.pill`. */
.pill.sun { cursor: default; padding: 0 12px 0 10px; }
.pill.sun svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pill.sun input { width: 150px; margin: 0; accent-color: var(--accent); }
.pill.sun output { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }

/* narrow frames: the chip row is too narrow for the status chips and the slider together (at
   320 px the slider got 0 px, DAM-29 browser test v5). The slider takes a row of its own, full
   width. How far down that pushes the floors, the popover and the light list is not written here
   any more: app/demo-chrome.js measures the row and app/demo-layout.css places them under it,
   because with the chooser in the row (DAM-160) the count of rows is no longer fixed. */
@media (max-width: 700px) {
  html body .chips { right: 8px; }
  /* DAM-157: at least 200 px, not a whole row, so it can share a row with a chip that wrapped
     (at 320 px the return link, isolate.mjs, pushes the lights chip down). */
  .pill.sun { flex: 1 1 200px; min-width: 0; }
  .pill.sun input { flex: 1; width: auto; min-width: 0; }
}