/* ══ Checkbox — one component, both pages ══════════════════════════════════════════════════
   The Routes swimlane box: 16px, 1.5px #64605e border, 2px radius, green fill and a white
   Phosphor check when on. Two ways to drive it:
     <div class="cbx [checked|indeterminate]"><i data-ph="check" class="cbx-check"></i>
       <i data-ph="minus" class="cbx-dash"></i></div>              class-driven (swimlane rows)
     <label><input type="checkbox"><span class="cbx">…same icons…</span> Label</label>
                                                                    a real input drives it
   color: #fff matters. Both pages stroke every Phosphor path in currentColor (the
   --icon-stroke dial), so without it the tick picks up the text colour and reads faint. */
.cbx {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; box-sizing: border-box;
  border: 1.5px solid #64605e; border-radius: 2px;
  background: #fff; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.cbx svg, .cbx i[data-ph] { width: var(--icon-sm, 14px); height: var(--icon-sm, 14px); display: none; }   /* i[data-ph] = pre-render placeholder; without it every tick flashes on load */
.cbx.checked, .cbx.indeterminate,
input:checked + .cbx { background-color: var(--green, #00ab00); border-color: var(--green, #00ab00); }
.cbx.checked .cbx-check,
input:checked + .cbx .cbx-check { display: block; }
.cbx.indeterminate .cbx-dash { display: block; }
input:focus-visible + .cbx { outline: 2px solid #000; outline-offset: 2px; }