/* /connect/views/checkin.css — member child check-in v2
 * Scoped under .chkx-wrap (the code modal shares the same token block).
 * Colours come from /connect/connect-tokens.css. The only literal colours
 * are #fff for ink on solid fills and the QR card background.
 */

.chkx-wrap,
.chkx-modal-overlay {
  --chkx-surface: var(--bcc-surface-1);
  --chkx-surface-2: var(--bcc-surface-2);
  --chkx-surface-3: var(--bcc-surface-3);
  --chkx-ink: var(--bcc-ink);
  --chkx-ink-2: var(--bcc-ink-2);
  --chkx-ink-3: var(--bcc-ink-3);
  --chkx-border: var(--bcc-border);
  --chkx-border-soft: var(--bcc-border-soft);
  --chkx-border-strong: var(--bcc-border-strong);
  --chkx-primary: var(--bcc-primary);
  --chkx-primary-soft: var(--bcc-primary-soft);
  --chkx-success: var(--bcc-success);
  --chkx-success-soft: var(--bcc-success-soft);
  --chkx-danger: var(--bcc-danger);
  --chkx-warning: var(--bcc-warning);
  --chkx-shadow-1: var(--bcc-shadow-1);
  --chkx-shadow-2: var(--bcc-shadow-2);
  --chkx-r-md: var(--bcc-r-md);
  --chkx-r-lg: var(--bcc-r-lg);
  --chkx-r-xl: var(--bcc-r-xl);
  --chkx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chkx-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s5);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--bcc-s4);
  color: var(--chkx-ink);
}

.chkx-wrap *,
.chkx-wrap *::before,
.chkx-wrap *::after,
.chkx-modal-overlay *,
.chkx-modal-overlay *::before,
.chkx-modal-overlay *::after { box-sizing: border-box; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.chkx-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s4);
  overflow: hidden;
  padding: var(--bcc-s6);
  border: 1px solid var(--bcc-border-soft);
  border-radius: var(--chkx-r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--bcc-primary-soft), transparent 58%),
    linear-gradient(135deg, var(--bcc-surface-1), var(--bcc-surface-2));
  box-shadow: var(--chkx-shadow-1);
}
.chkx-hero::after {
  content: '';
  position: absolute;
  inset: auto -18% -55% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--bcc-primary-tint);
  pointer-events: none;
}
.chkx-hero-text { position: relative; z-index: 1; min-width: 0; }
.chkx-kicker {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chkx-title {
  margin: var(--bcc-s2) 0 0;
  color: var(--chkx-ink);
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-4xl);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.chkx-sub {
  margin: var(--bcc-s2) 0 0;
  max-width: 52ch;
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-sm);
}
.chkx-hero-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: var(--chkx-r-xl);
  background: linear-gradient(145deg, var(--bcc-primary), var(--bcc-primary-hover));
  color: #fff;
  box-shadow: var(--chkx-shadow-2), var(--bcc-primary-soft) 0 0 0 8px;
  flex-shrink: 0;
}
.chkx-hero-aside {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  flex-shrink: 0;
}
.chkx-refresh {
  width: 44px;
  height: 44px;
  border: 1px solid var(--chkx-border);
  background: var(--bcc-surface-1);
  color: var(--chkx-ink-2);
}
.chkx-refresh:hover { color: var(--chkx-primary); border-color: var(--chkx-border-strong); }

/* ── Header family actions (Manage family / Add a child) ─────────────────── */
.chkx-hero-actions {
  position: relative;
  z-index: 1;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s3);
}
.chkx-hero-actions .chkx-hero-action { min-height: 44px; white-space: normal; text-align: center; }
.chkx-manage-family { text-decoration: none; }

/* ── How it works ────────────────────────────────────────────────────────── */
.chkx-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bcc-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chkx-step {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  min-height: 44px;
  padding: var(--bcc-s3) var(--bcc-s4);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-lg);
  background: var(--chkx-surface);
}
.chkx-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  font-size: var(--bcc-t-xs);
  font-weight: 800;
  flex-shrink: 0;
}
.chkx-step-text { min-width: 0; color: var(--chkx-ink-2); font-size: var(--bcc-t-sm); font-weight: 500; }

/* ── Session picker ──────────────────────────────────────────────────────── */
.chkx-session-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4) var(--bcc-s5);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-lg);
  background: var(--chkx-surface);
  box-shadow: var(--chkx-shadow-1);
}
.chkx-session-picker .bcc-label { margin: 0; white-space: nowrap; }
.chkx-select { width: auto; min-width: 240px; max-width: 100%; min-height: 44px; }
.chkx-session-single { justify-content: space-between; }
.chkx-session-kicker {
  color: var(--chkx-ink-3);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chkx-session-name { color: var(--chkx-ink); font-size: var(--bcc-t-lg); font-weight: 700; }
.chkx-session-date { color: var(--chkx-ink-2); font-size: var(--bcc-t-sm); }

/* ── Status ──────────────────────────────────────────────────────────────── */
.chkx-status { min-height: 20px; color: var(--chkx-ink-2); font-size: var(--bcc-t-sm); font-weight: 500; }
.chkx-status-error { color: var(--chkx-danger); }
.chkx-status-success { color: var(--chkx-success); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.chkx-section,
.chkx-active {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
}
.chkx-section-head { display: flex; align-items: center; gap: var(--bcc-s3); }
.chkx-section-title {
  margin: 0;
  color: var(--chkx-ink);
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-2xl);
  font-weight: 600;
}
.chkx-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--bcc-s2);
  border-radius: var(--bcc-r-pill);
  background: var(--chkx-surface-3);
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
}

/* ── Active security codes ───────────────────────────────────────────────── */
.chkx-active {
  padding: var(--bcc-s5);
  border: 1px solid var(--bcc-border-soft);
  border-radius: var(--chkx-r-xl);
  background:
    linear-gradient(180deg, var(--bcc-success-soft), transparent 60%),
    var(--chkx-surface);
  box-shadow: var(--chkx-shadow-1);
}
.chkx-active-list { display: flex; flex-direction: column; gap: var(--bcc-s2); }
.chkx-active-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bcc-s2) var(--bcc-s4);
  padding: var(--bcc-s3) var(--bcc-s4);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-md);
  background: var(--chkx-surface-2);
}
.chkx-active-name { color: var(--chkx-ink); font-weight: 700; overflow-wrap: anywhere; }
.chkx-active-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chkx-active-class {
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-xs);
  font-weight: 600;
}
.chkx-active-class-missing { color: var(--chkx-warning); font-style: italic; }
.chkx-active-code {
  justify-self: end;
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-sm);
  background: var(--bcc-success-soft);
  color: var(--chkx-success);
  font-family: var(--chkx-mono);
  font-size: var(--bcc-t-xl);
  font-weight: 800;
  letter-spacing: .12em;
}
.chkx-active-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
}
.chkx-active-time {
  color: var(--chkx-ink-3);
  font-size: var(--bcc-t-xs);
}
.chkx-wrap .chkx-active-show { min-height: 44px; }
.chkx-active-empty { background: var(--chkx-surface); }
.chkx-active-note { margin: 0; color: var(--chkx-ink-3); font-size: var(--bcc-t-sm); }

/* ── Child cards ─────────────────────────────────────────────────────────── */
.chkx-children {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bcc-s3);
}
.chkx-child-card {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-xl);
  background: var(--chkx-surface);
  box-shadow: var(--chkx-shadow-1);
  transition: border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.chkx-child-card:hover { border-color: var(--chkx-border-strong); box-shadow: var(--chkx-shadow-2); }
.chkx-child-card.is-in { border-color: var(--bcc-success); }

.chkx-child-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bcc-s3); }
.chkx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  font-size: var(--bcc-t-lg);
  font-weight: 800;
  flex-shrink: 0;
}
.chkx-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.chkx-avatar-initials { line-height: 1; }
.chkx-child-main { min-width: 0; flex: 1; }
.chkx-child-name {
  margin: 0;
  color: var(--chkx-ink);
  font-size: var(--bcc-t-lg);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.chkx-child-meta { margin-top: 2px; color: var(--chkx-ink-3); font-size: var(--bcc-t-sm); }

/* ── Pending guardian link hint (informational; never blocks check-in) ────── */
.chkx-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--bcc-s2);
}
.chkx-pending-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--bcc-s2);
  border: 1px solid rgba(var(--bcc-warning-rgb, 180, 83, 9), .35);
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-warning-soft, var(--chkx-surface-3));
  color: var(--chkx-warning);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.chkx-pending-text { color: var(--chkx-ink-3); font-size: var(--bcc-t-xs); overflow-wrap: anywhere; }
.chkx-child-name .famx-badge { margin-left: 4px; }
.chkx-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  background: var(--chkx-surface-3);
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.chkx-status-pill.in { background: var(--bcc-success-soft); color: var(--chkx-success); }
.chkx-status-pill.out { background: var(--chkx-surface-3); color: var(--chkx-ink-3); }

.chkx-code-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--bcc-s3) var(--bcc-s4);
  border-radius: var(--chkx-r-md);
  background: var(--bcc-success-soft);
}
.chkx-code-label {
  color: var(--chkx-success);
  font-size: var(--bcc-t-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chkx-code {
  color: var(--chkx-ink);
  font-family: var(--chkx-mono);
  font-size: var(--bcc-t-3xl);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.chkx-code-hint { color: var(--chkx-ink-2); font-size: var(--bcc-t-xs); }
.chkx-code-time { color: var(--chkx-ink-2); font-size: var(--bcc-t-xs); }
.chkx-code-out { background: var(--chkx-surface-3); }
.chkx-code-out .chkx-code-label { color: var(--chkx-ink-3); }

.chkx-class { display: flex; align-items: center; gap: var(--bcc-s2); min-width: 0; }
.chkx-class-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 30px;
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  font-size: var(--bcc-t-xs);
  font-weight: 600;
}
.chkx-class-badge .bcc-icon { flex-shrink: 0; }
.chkx-class-missing {
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-md);
  background: var(--bcc-warning-soft, var(--chkx-surface-3));
  color: var(--chkx-warning);
  font-size: var(--bcc-t-xs);
  font-weight: 600;
}
.chkx-class-missing .bcc-icon { flex-shrink: 0; }

/* ── Sunday school enrollment status + actions ───────────────────────────── */
.chkx-enroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bcc-s2) var(--bcc-s3);
}
.chkx-enroll-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 100%;
  padding: 3px var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  background: var(--chkx-surface-3);
  color: var(--chkx-ink-3);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chkx-enroll-pill.is-pending {
  background: var(--bcc-warning-soft, var(--chkx-surface-3));
  color: var(--chkx-warning);
}
.chkx-enroll-pill.is-enrolled {
  background: var(--bcc-success-soft);
  color: var(--chkx-success);
}
.chkx-wrap .chkx-enroll-action {
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

.chkx-child-foot { display: flex; justify-content: flex-end; }
.chkx-wrap .chkx-action { min-height: 44px; min-width: 132px; }

/* ── Other family members (adults / missing DOB) ─────────────────────────── */
.chkx-section-members { gap: var(--bcc-s2); }
.chkx-members-note {
  margin: 0;
  max-width: 62ch;
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-sm);
}
.chkx-members {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bcc-s3);
}
.chkx-member-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-lg);
  background: var(--chkx-surface);
}
.chkx-member-main { min-width: 0; flex: 1 1 240px; }
.chkx-member-name {
  margin: 0;
  color: var(--chkx-ink);
  font-size: var(--bcc-t-lg);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.chkx-member-name .famx-badge { margin-left: 4px; }
.chkx-member-reason { margin: 2px 0 0; color: var(--chkx-ink-3); font-size: var(--bcc-t-sm); }
.chkx-member-foot { flex-shrink: 0; }
.chkx-wrap .chkx-dob-action { min-height: 44px; white-space: normal; text-align: center; }

/* ── Empty / guard / skeleton ────────────────────────────────────────────── */
.chkx-empty,
.chkx-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bcc-s2);
  padding: var(--bcc-s10) var(--bcc-s5);
  border: 1px dashed var(--chkx-border-strong);
  border-radius: var(--chkx-r-xl);
  background: var(--chkx-surface);
  text-align: center;
}
.chkx-empty-icon,
.chkx-guard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
}
.chkx-empty-title,
.chkx-guard-title {
  margin: 0;
  color: var(--chkx-ink);
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-2xl);
  font-weight: 600;
}
.chkx-empty-sub,
.chkx-guard-body {
  margin: 0;
  max-width: 52ch;
  color: var(--chkx-ink-2);
  font-size: var(--bcc-t-sm);
}
.chkx-guard { margin: var(--bcc-s6) auto; max-width: 560px; }
.chkx-guard .bcc-btn { margin-top: var(--bcc-s3); }

.chkx-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bcc-s3);
  margin-top: var(--bcc-s2);
}
.chkx-empty-actions .chkx-empty-action { min-height: 44px; white-space: normal; text-align: center; }

.chkx-skel {
  border-radius: var(--chkx-r-xl);
  background: linear-gradient(
    90deg,
    var(--bcc-surface-2) 25%,
    var(--bcc-surface-3) 37%,
    var(--bcc-surface-2) 63%
  );
  background-size: 400% 100%;
  animation: chkx-shimmer 1.4s ease infinite;
}
.chkx-skel-hero { height: 150px; }
.chkx-skel-grid { display: grid; grid-template-columns: 1fr; gap: var(--bcc-s3); margin-top: var(--bcc-s4); }
.chkx-skel-card { height: 190px; }
@keyframes chkx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Code modal ──────────────────────────────────────────────────────────── */
.chkx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bcc-s4);
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chkx-modal {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s4);
  width: 100%;
  max-width: 380px;
  max-height: calc(100dvh - 2 * var(--bcc-s4));
  overflow-y: auto;
  padding: var(--bcc-s5);
  border: 1px solid var(--chkx-border);
  border-radius: var(--chkx-r-xl);
  background: var(--chkx-surface);
  box-shadow: var(--chkx-shadow-2);
  color: var(--chkx-ink);
}
.chkx-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bcc-s3); }
.chkx-modal-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chkx-modal-kicker {
  color: var(--chkx-ink-3);
  font-size: var(--bcc-t-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chkx-modal-title {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--chkx-ink);
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-2xl);
  font-weight: 600;
}
.chkx-modal-close { width: 44px; height: 44px; flex-shrink: 0; }
.chkx-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bcc-s2);
  text-align: center;
}
.chkx-modal-code {
  padding: var(--bcc-s2) var(--bcc-s4);
  border-radius: var(--bcc-r-lg);
  background: var(--bcc-success-soft);
  color: var(--chkx-success);
  font-family: var(--chkx-mono);
  font-size: clamp(2.25rem, 12vw, 3rem);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.chkx-modal-class { color: var(--chkx-ink-2); font-size: var(--bcc-t-sm); font-weight: 600; }
.chkx-modal-qr {
  display: inline-flex;
  padding: var(--bcc-s3);
  border-radius: var(--chkx-r-lg);
  background: #fff;
}
.chkx-modal-qr img { display: block; width: 200px; height: 200px; max-width: 100%; }
.chkx-modal-hint { margin: 0; color: var(--chkx-ink-2); font-size: var(--bcc-t-xs); }
.chkx-modal-foot { display: flex; gap: var(--bcc-s3); }
.chkx-modal-foot .bcc-btn { flex: 1; min-height: 44px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .chkx-wrap { padding: var(--bcc-s6); }
  .chkx-children { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chkx-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chkx-skel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .chkx-wrap input,
  .chkx-wrap select,
  .chkx-wrap textarea { font-size: 16px; }
}

@media (max-width: 520px) {
  .chkx-hero { padding: var(--bcc-s5); flex-wrap: wrap; }
  .chkx-title { font-size: var(--bcc-t-3xl); }
  .chkx-hero-mark { width: 54px; height: 54px; }
  .chkx-steps { grid-template-columns: 1fr; }
  .chkx-session-picker { align-items: stretch; flex-direction: column; }
  .chkx-session-picker .bcc-label { margin-bottom: 0; }
  .chkx-select { width: 100%; min-width: 0; }
  .chkx-child-foot { justify-content: stretch; }
  .chkx-wrap .chkx-action { width: 100%; }
  .chkx-hero-actions { flex-direction: column; }
  .chkx-hero-actions .chkx-hero-action { width: 100%; }
  .chkx-empty-actions { width: 100%; flex-direction: column; }
  .chkx-empty-actions .chkx-empty-action { width: 100%; }
  .chkx-active-row { grid-template-columns: minmax(0, 1fr); }
  .chkx-active-code { justify-self: start; }
  .chkx-enroll { flex-direction: column; align-items: stretch; }
  .chkx-wrap .chkx-enroll-action { width: 100%; }
  .chkx-member-card { flex-direction: column; align-items: stretch; }
  .chkx-member-foot { width: 100%; }
  .chkx-wrap .chkx-dob-action { width: 100%; }
  .chkx-modal-foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .chkx-wrap *,
  .chkx-wrap *::before,
  .chkx-wrap *::after,
  .chkx-modal-overlay,
  .chkx-modal-overlay * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}