/* The control list: what a location enforces, and the three states each
   setting can be in.

   These are the demo's rules verbatim. The console adopted the demo, not the
   other way round -- an earlier attempt at sharing quietly restyled the demo
   to suit the console's wider column, which moved the buttons from under the
   row to the right of it and made the panel a customer had just been shown
   look like a different control.

   Loaded by both layouts. Depends on --line, --ok, --brand, --muted, --ink,
   which both stylesheets define. */

.controls { list-style: none; margin: 16px 0 0; padding: 0; }
.ctl { padding: 11px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.ctl-head {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 18px 1fr auto;
}
.ctl:first-child { border-top: 0; }
.ctl-mark { font-weight: 700; text-align: center; }
.ctl-on  .ctl-mark { color: var(--ok); }
.ctl-off .ctl-mark { color: #cbd5e1; }
/* Neither on nor off: it observes. A tick would claim it blocks. */
.ctl-watch .ctl-mark { color: var(--brand); }
.ctl-off .ctl-label { color: var(--muted); }
.ctl-label { color: var(--ink); }
.ctl-detail { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Three states, three buttons: one press to reach any of them, and the one
   that is on is visible without pressing anything. */
.seg { display: flex; margin: 9px 0 0 28px; border-radius: 8px; overflow: hidden;
       border: 1px solid var(--line); background: #fff; width: fit-content; }
.seg-btn {
  font: inherit; font-size: .8rem; padding: 5px 12px; cursor: pointer;
  border: 0; border-left: 1px solid var(--line); background: #fff;
  color: var(--muted);
}
.seg-btn:first-child { border-left: 0; }

/* Two ways to post the same control: the demo sends a fetch, so its states are
   <button>; a location is a form, so its states are radios in <label>. They
   must look identical, which needs both to lay out the same way and the radio
   itself to be out of sight -- the pressed segment already says which is on,
   and a visible dot beside it says it twice and differently. */
.seg-btn { display: inline-flex; align-items: center; line-height: 1.2; }
/* The radio itself is never seen -- the label is the button. Given no size as
   well as no opacity: absolutely positioned it still had a box, 386px wide,
   hanging off the side of a phone. Invisible, but it is the sort of thing that
   makes a page scroll for no reason anybody can see. */
.seg-btn input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.seg-btn:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
.seg-btn:hover { color: var(--brand); }
.seg-btn.on { background: var(--brand); color: #fff; font-weight: 600; }
.seg-btn.on:hover { color: #fff; }