/* Shared checkbox and radio ("Pop"): a round box with a springy check (radio: a dot). Restyles every
   native input[type=checkbox] on a page that links this file, with no markup
   changes — the input stays a real checkbox (keyboard, forms, labels, and
   .indeterminate all behave natively).

   Skin-agnostic: colors come from --accent, --accent-ink and
   --checkbox-border, each with a fallback, so a portal can retheme it by
   setting those on :root. Link this AFTER base.css and auth-shell.css: the
   `:root` prefix below matches the specificity of auth-shell's
   `.checkbox-row input { width: auto }`, so source order has to decide. */

:root input[type="checkbox"] {
  --cb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  /* base.css styles every bare input as a text field (padding, dark fill,
     font size); a checkbox must not inherit any of that or it grows into an
     oval and pushes the check off-center. */
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  border: 2px solid var(--checkbox-border, #636c80);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
:root input[type="checkbox"]::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--accent-ink, #fff);
  -webkit-mask: var(--cb-check) center / contain no-repeat;
  mask: var(--cb-check) center / contain no-repeat;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.7, .64, 1);
}
:root input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent, #5b8cff); }
:root input[type="checkbox"]:active:not(:disabled) { transform: scale(.9); }
:root input[type="checkbox"]:checked,
:root input[type="checkbox"]:indeterminate {
  background: var(--accent, #5b8cff);
  border-color: var(--accent, #5b8cff);
}
:root input[type="checkbox"]:checked::before,
:root input[type="checkbox"]:indeterminate::before { transform: scale(1); }
:root input[type="checkbox"]:indeterminate::before {
  -webkit-mask-image: var(--cb-dash);
  mask-image: var(--cb-dash);
}
:root input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #5b8cff);
  outline-offset: 3px;
}
:root input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }

/* Shared radio ("Pop"): the same round, springy control as the checkbox, with a dot instead of a check. */
:root input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  border: 2px solid var(--checkbox-border, #636c80);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
:root input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-ink, #fff);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.7, .64, 1);
}
:root input[type="radio"]:hover:not(:disabled) { border-color: var(--accent, #5b8cff); }
:root input[type="radio"]:active:not(:disabled) { transform: scale(.9); }
:root input[type="radio"]:checked { background: var(--accent, #5b8cff); border-color: var(--accent, #5b8cff); }
:root input[type="radio"]:checked::before { transform: scale(1); }
:root input[type="radio"]:focus-visible { outline: 2px solid var(--accent, #5b8cff); outline-offset: 3px; }
:root input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; }

/* Sub-options: a list of radios or checkboxes that belongs to the control above it (for example the two ways to send a
   schedule under "Families"). Put class cr-sub-options on the container. The controls are smaller and indented, and
   each label is a row where the control acts like a bullet: wrapped text lines up with itself, not under the control. */
.cr-sub-options { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border: 0; margin: 0 0 10px; min-width: 0; }
.cr-sub-options.hidden, .cr-sub-options[hidden] { display: none; }
.cr-sub-options label { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-weight: normal; cursor: pointer; }
:root .cr-sub-options input[type="radio"],
:root .cr-sub-options input[type="checkbox"] { width: 16px; height: 16px; margin-top: calc((1lh - 16px) / 2); }
:root .cr-sub-options input[type="checkbox"]::before { width: 10px; height: 10px; }
:root .cr-sub-options input[type="radio"]::before { width: 6px; height: 6px; }
@supports not (margin-top: 1lh) { :root .cr-sub-options input[type="radio"], :root .cr-sub-options input[type="checkbox"] { margin-top: 2px; } }

/* Smaller box where checkboxes sit inside table rows. */
.cr-table input[type="checkbox"] { width: 18px; height: 18px; }
.cr-table input[type="checkbox"]::before { width: 11px; height: 11px; }

@media (prefers-reduced-motion: reduce) {
  :root input[type="checkbox"],
  :root input[type="checkbox"]::before,
  :root input[type="radio"],
  :root input[type="radio"]::before { transition: none; }
}