/* ==========================================================================
   .tp-checkbox and .tp-radio — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   Two blocks in one file, deliberately. The feature document names them as one
   component ("checkbox and radio") and their rule sets are identical except for
   the corner radius and the checked indicator; splitting them would duplicate
   every declaration below and guarantee the two drift. Recorded as a deviation
   in the completion report.

   The native control is kept and styled with accent-color rather than being
   hidden behind a fabricated box. That single property gives the correct
   checked and indeterminate rendering, the platform's own focus behaviour, and
   correct forced-colors output — none of which a hand-drawn box gets for free.

   Elements   __label  __input  __text  __hint  __group  __legend  __error
   States     :hover  :focus-visible  :disabled  :checked  [aria-invalid]

   The whole label is the hit target, so the interactive area is the full row
   rather than a 16px box (ACC-006).
   ========================================================================== */

/* --------------------------------------------------------------------------
   .tp-checkbox
   -------------------------------------------------------------------------- */

.tp-checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
  min-width: 0;
}

.tp-checkbox__label {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  min-height: var(--tp-space-target-min);
  padding: var(--tp-space-1) var(--tp-space-2);
  margin-inline-start: calc(-1 * var(--tp-space-2));
  border-radius: var(--tp-radius-md);
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  cursor: pointer;
}

.tp-checkbox__label:hover {
  background-color: var(--tp-color-surface-sunken);
}

.tp-checkbox__label:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-checkbox__input {
  flex: none;
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  /* Optical alignment with the first line of the label text. */
  margin-top: var(--tp-space-1);
  accent-color: var(--tp-color-accent-default);
  cursor: pointer;
}

.tp-checkbox__input:disabled {
  cursor: not-allowed;
  opacity: var(--tp-opacity-disabled);
}

.tp-checkbox__input[aria-invalid="true"] {
  outline: var(--tp-border-width-thick) solid var(--tp-color-state-danger);
  outline-offset: var(--tp-space-1);
}

.tp-checkbox__input:focus-visible {
  outline-offset: var(--tp-space-1);
}

.tp-checkbox__text {
  min-width: 0;
  overflow-wrap: break-word;
}

.tp-checkbox__hint {
  display: block;
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
}

.tp-checkbox__error {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-2);
  color: var(--tp-color-state-danger-text);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
}

/* A disabled row must look inert as a whole, not just at the box. */
.tp-checkbox__label:has(.tp-checkbox__input:disabled) {
  color: var(--tp-color-text-muted);
  cursor: not-allowed;
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   .tp-radio
   -------------------------------------------------------------------------- */

.tp-radio {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
  min-width: 0;
}

.tp-radio__label {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  min-height: var(--tp-space-target-min);
  padding: var(--tp-space-1) var(--tp-space-2);
  margin-inline-start: calc(-1 * var(--tp-space-2));
  border-radius: var(--tp-radius-md);
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  cursor: pointer;
}

.tp-radio__label:hover {
  background-color: var(--tp-color-surface-sunken);
}

.tp-radio__label:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-radio__input {
  flex: none;
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  margin-top: var(--tp-space-1);
  accent-color: var(--tp-color-accent-default);
  cursor: pointer;
}

.tp-radio__input:disabled {
  cursor: not-allowed;
  opacity: var(--tp-opacity-disabled);
}

.tp-radio__input[aria-invalid="true"] {
  outline: var(--tp-border-width-thick) solid var(--tp-color-state-danger);
  outline-offset: var(--tp-space-1);
}

.tp-radio__input:focus-visible {
  outline-offset: var(--tp-space-1);
}

.tp-radio__text {
  min-width: 0;
  overflow-wrap: break-word;
}

.tp-radio__hint {
  display: block;
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
}

.tp-radio__error {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-2);
  color: var(--tp-color-state-danger-text);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
}

.tp-radio__label:has(.tp-radio__input:disabled) {
  color: var(--tp-color-text-muted);
  cursor: not-allowed;
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Groups — a <fieldset> with a <legend>, which is what makes a set of radios
   or checkboxes announce its own question (ACC-003).
   -------------------------------------------------------------------------- */

.tp-checkbox__group,
.tp-radio__group {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
  min-width: 0;
}

.tp-checkbox__legend,
.tp-radio__legend {
  margin-bottom: var(--tp-space-2);
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  line-height: var(--tp-leading-tight);
}