/* ========================================================================== 
 * Shared checkbox guardrails
 *
 * D20Keep has many editors with broad `input { width:100% }` rules. Native
 * checkboxes must never inherit those text-field dimensions: a stretched box
 * pushes its visible label away and can make the whole row look unlabeled.
 * Keep the real input compact while preserving page-specific custom controls.
 * ======================================================================= */

input[type="checkbox"] {
  box-sizing: border-box;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 16px;
  min-block-size: 16px;
  padding: 0;
  flex: 0 0 16px;
  vertical-align: middle;
}

label:has(> input[type="checkbox"]) > input[type="checkbox"] {
  align-self: center;
}

:where(
  .cx-check,
  .ddbp-check,
  .st-check,
  .dc-check,
  .npc-flag,
  .cn-check,
  .cx-comp-toggle,
  .cxw-radio,
  .cxw-arch-toggle,
  .cr-anon,
  .atlas-hide-toggle,
  .cx-texture-check,
  .qobj-check
) {
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
  line-height: 1.35;
}

:where(
  .cx-check,
  .ddbp-check,
  .st-check,
  .dc-check,
  .npc-flag,
  .cn-check,
  .cx-comp-toggle,
  .cxw-radio,
  .cxw-arch-toggle,
  .cr-anon,
  .atlas-hide-toggle,
  .cx-texture-check,
  .qobj-check
) > :where(span, strong) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* These two controls intentionally use a larger switch/card treatment. */
.codex-module-toggle input[type="checkbox"] {
  inline-size: 42px;
  block-size: 22px;
  min-inline-size: 42px;
  flex-basis: 42px;
}

.platform-slot-choice input[type="checkbox"] {
  inline-size: 18px;
  block-size: 18px;
  min-inline-size: 18px;
  flex-basis: 18px;
}

.cx-texture-check {
  display: inline-flex;
  margin-top: 2px;
  color: var(--cx-text-soft, #cfc4b0);
  font-size: 13px;
}

@media (max-width: 560px) {
  label:has(> input[type="checkbox"]) {
    max-inline-size: 100%;
  }
}