/* LORE console - the size of what a finger or a pointer has to hit (audit L4, 2026-10-16).
 *
 * WCAG 2.2 SC 2.5.8 (AA): every control that is acted on is at least 24 x 24 CSS px. Under a coarse pointer (a phone, a
 * tablet) it is 44 x 44, the size every touch guideline asks for. The audit measured 270 "Rename lesson N" buttons at
 * 26 x 21, student and organization names that are links at 99 x 20, checkboxes at 13 x 13, <summary> rows at 20 to 23
 * and text buttons at 23 on a 390px phone.
 *
 * ONE FILE, LOADED AFTER EVERY OTHER CONSOLE STYLESHEET BUT THE TIMELINE'S (index.php): the rules below tie the ones they
 * enlarge at equal weight and win by coming later, so the sizes live here and a theme's or a tab's stylesheet can be
 * rebuilt without lowering them. The course timeline's own controls (.tl-*) are not here: they are timeline.css's.
 *
 * What is NOT enlarged, on purpose: the theme menu's radio buttons (1px, visually hidden: their label is the target and
 * is 44px tall), links inside a sentence (WCAG exempts them), and anything that is already big enough. Nothing here
 * changes a colour.
 */

/* --- 24px, whatever the pointer ------------------------------------------------------------------------------------- */

/* The pencil beside a lesson's title on the course page. */
.lr-rename { min-width: 24px; min-height: 24px; justify-content: center; }

/* A person's or an organization's name is the whole card's link (its ::after covers the card): the name itself is still
   the focus ring's size, so it is 24px tall. */
.sc-open, .oc-open { padding-block: 2px; }

/* A text button in a list (a build, a course, "Invite someone"). */
.link-btn { padding-block: 1px; min-height: 24px; }

/* A link on a line of its own (the whole clip, in Voice usage). */
.vu-sample > a { display: inline-block; padding-block: 2px; }

/* "The numbers", "Every square in words", "Built from 5 files": a disclosure is a control. */
details > summary { min-height: 24px; }

/* A part of the breadcrumb (crumbs.js) and the links beside it. line-height rather than flex, so a long part keeps its
   ellipsis. */
.crumbs a { min-height: 24px; line-height: 24px; }

/* A checkbox or a radio button is a 24px box, not the browser's 13px one. */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-width: 24px; flex: none; }
/* ...except the theme menu's, which are hidden on purpose (console.css .theme-opt input) and are not the target. */
.theme-opt input[type="radio"] { width: 1px; height: 1px; min-width: 0; }

/* --- 44px under a coarse pointer ------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .lr-rename { min-width: 44px; min-height: 44px; }
  .sc-open, .oc-open, .link-btn, .vu-sample > a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { min-height: 44px; line-height: 44px; }
  /* The disclosure keeps its marker (a flex summary loses it), so the height comes from padding. The two that set
     their own padding are named, to tie it and win by coming later. */
  details > summary, .rv-fold > summary, .earlier-drafts > summary { padding-block: 12px; }
  /* A checkbox is 24px and its label is the 44px target: every label that holds one is that tall. Both rules are :where(), so
     they weigh nothing: a component's own layout for its labels (house.css .choice-opt: the radio at the top of a
     two-line description, its own gap) wins, and a label with no layout of its own gets this one. A label that holds a
     checkbox should hold ONE span after it (box, then a span), or the flex layout splits its words into columns. */
  :where(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) { min-height: 44px; align-items: center; }
  :where(label:has(> input[type="checkbox"]):not(.row):not(.theme-opt), label:has(> input[type="radio"]):not(.row):not(.theme-opt)) { display: flex; gap: .5rem; }
}