/* ==========================================================================
   checkboxes.css
   ========================================================================== */
/* ==========================================================================
   Checkbox & Radio System — PEGMENT Design System

   Components:
     .pg-checkbox    — Square checkbox (empty, checked, minus)
     .pg-radio       — Circular radio (unselected, selected)

   States (both types): default, hover, focus, disabled
   — no separate "active/pressed" state; focus (keyboard ring) is the
   4th state instead, per the reference spec.

   Sizes:
     default (no modifier) — 14×14 px
     .pg-checkbox--lg / .pg-radio--lg — 16×16 px

   Variants:
     .pg-checkbox--default    — unchecked
     .pg-checkbox--checked    — checked (check icon)
     .pg-checkbox--minus      — indeterminate (minus icon)
     .pg-radio--default       — unselected
     .pg-radio--selected      — selected, dot type (solid fill + white dot)
     .pg-radio--selected-check — selected, checkmark type (solid fill + check icon)
     .pg-radio--check          — persistent type marker for real :checked
                                  interaction — put on the input alongside
                                  .pg-radio so it renders the checkmark
                                  type instead of the default dot type

   Every checked/indeterminate/selected rule below is also bound to the
   real :checked / :indeterminate pseudo-classes, not just the modifier
   classes — the modifier classes exist so the docs page can show fixed
   states side by side without JS, but a plain `<input class="pg-checkbox">`
   in real use must visually respond to being clicked/checked on its own.

   Colour: checked/selected fill is --color-brand-secondary (the app's
   vivid blue, used for buttons/links) — not --color-brand-primary, which
   resolves to near-black/white and doesn't match the blue spec.

   Use-case wrappers:
     .pg-check-group         — label + input row
     .pg-check-group--stack  — label + description stacked
   ========================================================================== */

/* ─── Shared base ───────────────────────────────────────────────────────── */
.pg-checkbox,
.pg-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-medium);
  background: var(--color-surface-default);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  display: inline-grid;
  place-items: center;
  position: relative;
  box-sizing: border-box;
}

/* ─── Size: Large ───────────────────────────────────────────────────────── */
.pg-checkbox--lg,
.pg-radio--lg {
  width: 16px;
  height: 16px;
}

/* ─── Focus ring (keyboard) ─────────────────────────────────────────────── */
.pg-checkbox:focus-visible,
.pg-radio:focus-visible,
.pg-checkbox[data-focus],
.pg-radio[data-focus] {
  outline: none;
}

/* ─── Disabled (shared) ───────────────────────────────────────────────── */
.pg-checkbox:disabled,
.pg-radio:disabled,
.pg-checkbox.is-disabled,
.pg-radio.is-disabled {
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   SQUARE CHECKBOX
   ════════════════════════════════════════════════════════════════════════ */
.pg-checkbox {
  border-radius: var(--radius-sm);   /* 4px */
}

/* ─── Unchecked ────────────────────────────────────────────────────────── */
.pg-checkbox--default {
  border-color: var(--color-border-default);
  background: transparent;
}

.pg-checkbox--default:hover:not(:disabled):not(.is-disabled),
.pg-checkbox--default[data-hover]:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-subtle2);
}

.pg-checkbox--default:focus-visible:not(:disabled):not(.is-disabled),
.pg-checkbox--default[data-focus]:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-checkbox--default:disabled,
.pg-checkbox--default.is-disabled {
  border-color: var(--color-interactive-primary-disabled);
  background: var(--color-surface-sunken);
}

/* ─── Checked ──────────────────────────────────────────────────────────── */
.pg-checkbox--checked,
.pg-checkbox:checked {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary);
  
}

.pg-checkbox--checked::after,
.pg-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 6px;
  border: solid var(--color-brand-on-secondary);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.pg-checkbox--checked.pg-checkbox--lg::after,
.pg-checkbox:checked.pg-checkbox--lg::after {
  left: 5px;
  top: 2.5px;
  width: 4px;
  height: 7px;
}

.pg-checkbox--checked:hover:not(:disabled):not(.is-disabled),
.pg-checkbox--checked[data-hover]:not(:disabled):not(.is-disabled),
.pg-checkbox:checked:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-hover);
}

.pg-checkbox--checked:focus-visible:not(:disabled):not(.is-disabled),
.pg-checkbox--checked[data-focus]:not(:disabled):not(.is-disabled),
.pg-checkbox:checked:focus-visible:not(:disabled):not(.is-disabled) {
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-checkbox--checked:disabled,
.pg-checkbox--checked.is-disabled,
.pg-checkbox:checked:disabled {
  border-color: var(--color-brand-secondary-muted);
  background: var(--color-brand-secondary-muted);
}

/* ─── Minus / Indeterminate ───────────────────────────────────────────── */
.pg-checkbox--minus,
.pg-checkbox:indeterminate {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary);
}

.pg-checkbox--minus::after,
.pg-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-neutral-0);
}

.pg-checkbox--minus.pg-checkbox--lg::after,
.pg-checkbox:indeterminate.pg-checkbox--lg::after {
  left: 2.5px;
  top: 6px;
  width: 9px;
  height: 2px;
}

.pg-checkbox--minus:hover:not(:disabled):not(.is-disabled),
.pg-checkbox--minus[data-hover]:not(:disabled):not(.is-disabled),
.pg-checkbox:indeterminate:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-hover);
}

.pg-checkbox--minus:focus-visible:not(:disabled):not(.is-disabled),
.pg-checkbox--minus[data-focus]:not(:disabled):not(.is-disabled),
.pg-checkbox:indeterminate:focus-visible:not(:disabled):not(.is-disabled) {
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-checkbox--minus:disabled,
.pg-checkbox--minus.is-disabled,
.pg-checkbox:indeterminate:disabled {
  border-color: var(--color-brand-secondary-muted);
  background: var(--color-brand-secondary-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   CIRCULAR RADIO
   ════════════════════════════════════════════════════════════════════════ */
.pg-radio {
  border-radius: 9999px;
}

/* ─── Unselected ───────────────────────────────────────────────────────── */
.pg-radio--default {
  border-color: var(--color-border-default);
  background: var(--color-surface-default);
}

.pg-radio--default:hover:not(:disabled):not(.is-disabled),
.pg-radio--default[data-hover]:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-subtle2);
}

.pg-radio--default:focus-visible:not(:disabled):not(.is-disabled),
.pg-radio--default[data-focus]:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-radio--default:disabled,
.pg-radio--default.is-disabled {
  border-color: var(--color-interactive-primary-disabled);
  background: var(--color-surface-sunken);
}

/* ─── Selected — Dot (default radio type) ───────────────────────────────
   Solid fill, same treatment as the checkbox's checked state: filled
   brand-secondary circle with a small white dot, not a hollow ring. */
.pg-radio--selected,
.pg-radio:checked:not(.pg-radio--check) {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary);
}

.pg-radio--selected::after,
.pg-radio:checked:not(.pg-radio--check)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  display: block;
  background: var(--color-neutral-0);
}

.pg-radio--selected.pg-radio--lg::after,
.pg-radio:checked.pg-radio--lg:not(.pg-radio--check)::after {
  width: 6px;
  height: 6px;
}

.pg-radio--selected:hover:not(:disabled):not(.is-disabled),
.pg-radio--selected[data-hover]:not(:disabled):not(.is-disabled),
.pg-radio:checked:not(.pg-radio--check):hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-hover);
}

.pg-radio--selected:focus-visible:not(:disabled):not(.is-disabled),
.pg-radio--selected[data-focus]:not(:disabled):not(.is-disabled),
.pg-radio:checked:not(.pg-radio--check):focus-visible:not(:disabled):not(.is-disabled) {
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-radio--selected:disabled,
.pg-radio--selected.is-disabled,
.pg-radio:checked:not(.pg-radio--check):disabled {
  border-color: var(--color-brand-secondary-muted);
  background: var(--color-brand-secondary-muted);
}

/* ─── Selected — Checkmark (second radio type) ───────────────────────────
   Same solid fill as the dot type, but with a checkmark icon — the same
   border-trick shape used by .pg-checkbox--checked — instead of a plain
   dot. .pg-radio--check is a persistent type marker (put it on the input
   regardless of checked state) so real :checked interaction picks the
   checkmark visual instead of the default dot.
   ────────────────────────────────────────────────────────────────────── */
.pg-radio--selected-check,
.pg-radio--check:checked {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary);
}

.pg-radio--selected-check::after,
.pg-radio--check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 6px;
  border: solid var(--color-neutral-0);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.pg-radio--selected-check.pg-radio--lg::after,
.pg-radio--check:checked.pg-radio--lg::after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 7px;
}

.pg-radio--selected-check:hover:not(:disabled):not(.is-disabled),
.pg-radio--selected-check[data-hover]:not(:disabled):not(.is-disabled),
.pg-radio--check:checked:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-hover);
}

.pg-radio--selected-check:focus-visible:not(:disabled):not(.is-disabled),
.pg-radio--selected-check[data-focus]:not(:disabled):not(.is-disabled),
.pg-radio--check:checked:focus-visible:not(:disabled):not(.is-disabled) {
  box-shadow: 0 0 0 2px var(--btn-primary-focus-ring-offset), 0 0 0 4px var(--btn-primary-focus-ring);
}

.pg-radio--selected-check:disabled,
.pg-radio--selected-check.is-disabled,
.pg-radio--check:checked:disabled {
  border-color: var(--color-brand-secondary-muted);
  background: var(--color-brand-secondary-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   USE-CASE WRAPPERS
   ════════════════════════════════════════════════════════════════════════ */

/* Single label — horizontal row, 8px gap, text body-md secondary */
.pg-check-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pg-check-group__label {
  font-size: var(--text-body-md-size);      /* 14px */
  line-height: var(--text-body-md-line-height); /* 20px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.pg-check-group--stack .pg-checkbox--lg ~ .pg-check-group__text .pg-check-group__label {
  font-size: var(--text-body-lg-size);
  line-height: 24px;
}

/* When the input itself is disabled, dim the label too */
.pg-check-group:has(.pg-checkbox:disabled) .pg-check-group__label,
.pg-check-group:has(.pg-radio:disabled) .pg-check-group__label,
.pg-check-group:has(.pg-checkbox.is-disabled) .pg-check-group__label,
.pg-check-group:has(.pg-radio.is-disabled) .pg-check-group__label {
  color: var(--color-text-disabled);
}

/* Stacked — label + description, 0 vertical gap, description tertiary */
.pg-check-group--stack {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pg-check-group--stack .pg-checkbox,
.pg-check-group--stack .pg-radio {
  margin-top: 2px;   /* optical alignment with first line of text */
}

.pg-check-group__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pg-check-group__desc {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
}

.pg-check-group--stack .pg-checkbox--lg ~ .pg-check-group__text .pg-check-group__desc {
  font-size: var(--text-title-md-size);
  line-height: 24px;
}

.pg-check-group--stack:has(.pg-checkbox:disabled) .pg-check-group__label,
.pg-check-group--stack:has(.pg-radio:disabled) .pg-check-group__label,
.pg-check-group--stack:has(.pg-checkbox:disabled) .pg-check-group__desc,
.pg-check-group--stack:has(.pg-radio:disabled) .pg-check-group__desc,
.pg-check-group--stack:has(.pg-checkbox.is-disabled) .pg-check-group__label,
.pg-check-group--stack:has(.pg-radio.is-disabled) .pg-check-group__label,
.pg-check-group--stack:has(.pg-checkbox.is-disabled) .pg-check-group__desc,
.pg-check-group--stack:has(.pg-radio.is-disabled) .pg-check-group__desc {
  color: var(--color-text-disabled);
}

/* ─── Page layout helpers ─────────────────────────────────────────────── */
.check-spec__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.check-spec__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 120px;
}

.check-spec__label {
  font-size: var(--text-label-xs-size);
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}