/* -------------------------------------------------------------- checkbox
 * templates/ui/checkbox.html. The portal's own tick, everywhere: 14 px,
 * square, filled corum when chosen - never the browser's 13 px box (K-31,
 * WEB-KOM-08: the audit found unstyled boxes on seven pages, painted in
 * the browser's own blue or black; accent-color only tinted them).
 *
 * Global on purpose: every checkbox and radio in the portal takes it, the
 * old markup included. A toggle (role="switch") keeps its own look until it
 * becomes a checkbox with a label (owner brief A: no round toggles). The
 * radio is square as well - no rounding anywhere but the lamp. */
@layer ui {
input[type="checkbox"]:not([role="switch"]), input[type="radio"] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; position: relative; flex: none;
  display: inline-block; width: 14px; height: 14px; padding: 0; vertical-align: -2px;
  background: var(--surface-page); border: 1px solid var(--slate); border-radius: 0; cursor: pointer;
  accent-color: auto;
}
/* Frame slate (web.checkbox.border), chosen corum with a white tick
   (web.checkbox.checked, web.checkbox.mark), K-31. */
input[type="checkbox"]:not([role="switch"]):hover, input[type="radio"]:hover { border-color: var(--rule-strong); }
input[type="checkbox"]:not([role="switch"]):checked, input[type="checkbox"]:not([role="switch"]):indeterminate {
  background: var(--surface-accent); border-color: var(--rule-brand);
}
/* The tick: two sides of a rotated box, paper on corum. */
input[type="checkbox"]:not([role="switch"]):checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border-right: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper); transform: rotate(45deg);
}
input[type="checkbox"]:not([role="switch"]):indeterminate::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 5.5px; height: 1.5px; background: var(--surface-page);
}
/* The radio: a square in a square. */
input[type="radio"]:checked { border-color: var(--rule-brand); }
input[type="radio"]:checked::after {
  content: ""; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; background: var(--surface-accent);
}
input[type="checkbox"]:not([role="switch"]):focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--rule-brand); outline-offset: 1px;
}
/* Disabled (WEB-ZUS-07, ENT-346): the frame in rule-fine, no fill, full
   opacity; chosen, the box stays filled in silver. */
input[type="checkbox"]:not([role="switch"]):disabled, input[type="radio"]:disabled {
  background: var(--surface-page); border-color: var(--rule-fine); cursor: default;
}
input[type="checkbox"]:not([role="switch"]):disabled:checked, input[type="radio"]:disabled:checked::after {
  background: var(--silver); border-color: var(--rule-control);
}

/* The component: the box and its words, the whole row clickable. */
.check { display: inline-flex; align-items: flex-start; gap: var(--s-2); margin: 0; cursor: pointer;
  font-size: var(--t-small); color: var(--text-primary); }
.check > input { margin: .2em 0 0; }
.check__text { min-width: 0; }
.check__hint { display: block; font-size: var(--t-micro); color: var(--text-secondary); margin-top: 2px; }
.check:has(input:disabled) { color: var(--text-disabled); cursor: default; }
/* A group of checks or radios under one legend, one per line. */
.checks { display: flex; flex-direction: column; gap: var(--s-2); }
.checks--row { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* A box on its own (a pick column, a matrix cell) gets a hit area of at
   least 24 px from the label or cell around it (WEB-BAR-08). */
.check { min-height: 24px; }
}  /* @layer ui */