/* css/choice.css — checkbox and radio rows, and the roster capability toggles.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   WCAG 2.2 AA, 2.5.8 Target Size (Minimum): 24x24 CSS px
   ==========================================================================
   THE MINIMUM IS NOW ON `.choice` ITSELF, and the class that used to carry it
   is an alias. It was scoped to `.choice--target` when exactly one screen had
   been measured — "so it changes the one screen that needs it now and no layout
   that was not measured" — and the consequence was the one the criterion exists
   to prevent: every choice row NOT wearing the opt-in class stayed at 23px tall
   with a 16.8px box, one pixel under, and nothing said so. 2.5.8 is not a
   per-screen judgement, and a minimum somebody has to remember to apply is a
   minimum that gets missed.

   23px -> 24px on the row, 1.05rem -> 1.5rem (24px) on the box.
   ========================================================================== */
.choice{
  display:flex;gap:.5rem;align-items:flex-start;font-size:.9375rem;cursor:pointer;
  padding:6px 0;
  min-height:24px;
}
.choice input{
  flex:0 0 auto;width:1.5rem;height:1.5rem;margin:0;
  accent-color:var(--ink);cursor:pointer;
}
.choice span{flex:1 1 auto;padding-top:.15rem}
fieldset .choice + .choice{margin-top:2px}
/* Retained so nothing that names it breaks. It no longer adds anything except
   the vertical centring, which only reads well on a single-line row. */
.choice--target{align-items:center}
.choice--target span{padding-top:0}

/* The roster's capability checkboxes: 13x13 by browser default, which is the
   outstanding 2.5.8 failure the note above was written about. A bare checkbox in
   a table cell has no label row to inherit a height from, so it gets the size
   directly. */
td > input[type=checkbox],.capability-toggle{
  width:1.5rem;height:1.5rem;margin:0;accent-color:var(--ink);cursor:pointer;
}
td > input[type=checkbox]:disabled{cursor:not-allowed}