/* ==========================================================================
   Orcheum · Checkbox
   Source of truth: Figma node 404:4902 (Checkbox base) + 404:4937 (remember row).
   Reusable — namespaced under .oc-checkbox.
   ========================================================================== */

.oc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);            /* 8px */
  cursor: pointer;
}

/* Native input, visually replaced by a custom 16px box */
.oc-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--color-foreground);   /* base border */
  border-radius: var(--radius-sm);             /* 4px */
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.oc-checkbox__input::after {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-standard);
  /* check mark drawn with a background image so no extra asset is needed */
  background: var(--color-button-primary-fg);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 72%);
}

.oc-checkbox__input:checked {
  background: var(--color-foreground);
  border-color: var(--color-foreground);
}

.oc-checkbox__input:checked::after {
  transform: scale(1);
}

.oc-checkbox__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 37, 45, 0.16);
}

/* Label text — Figma 404:4939 · Geist 14px */
.oc-checkbox__label {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);          /* 14px */
  line-height: var(--leading-snug);   /* 1.4 */
  letter-spacing: -0.21px;
  color: var(--color-text-secondary);
}

.oc-checkbox__label a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}