:root {
  --bg:           oklch(97.5% 0.009 82);
  --surface:      oklch(99.8% 0.004 82);
  --surface-2:    oklch(95.8% 0.013 82);
  --surface-3:    oklch(93% 0.018 82);
  --border:       oklch(88.5% 0.013 82);
  --border-2:     oklch(82% 0.016 82);

  --text-1:       oklch(23% 0.016 82);
  --text-2:       oklch(50% 0.013 82);
  --text-3:       oklch(68% 0.009 82);

  --amber:        oklch(67% 0.15 72);
  --amber-mid:    oklch(78% 0.13 78);
  --amber-bg:     oklch(94.5% 0.05 82);
  --amber-border: oklch(83% 0.09 78);
  --amber-text:   oklch(40% 0.11 68);

  --sage:         oklch(57% 0.12 155);
  --sage-mid:     oklch(70% 0.1 155);
  --sage-bg:      oklch(94.5% 0.04 155);
  --sage-border:  oklch(82% 0.08 155);
  --sage-text:    oklch(36% 0.1 155);

  --rose:         oklch(59% 0.16 22);
  --rose-bg:      oklch(95% 0.04 22);
  --rose-border:  oklch(83% 0.09 22);
  --rose-text:    oklch(38% 0.13 22);

  --slate-bg:     oklch(95% 0.006 82);
  --slate-text:   oklch(60% 0.008 82);
  --slate-border: oklch(85% 0.008 82);

  --teal:         oklch(55% 0.1 185);
  --teal-bg:      oklch(94% 0.04 185);
  --teal-border:  oklch(81% 0.07 185);
  --teal-text:    oklch(35% 0.09 185);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background:  var(--bg);
  color:       var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  min-height:  100vh;
}

/* ── Auth pages (centered card) ─────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       40px 36px;
  width:         100%;
  max-width:     420px;
  box-shadow:    0 2px 8px oklch(0% 0 0 / .04), 0 8px 32px oklch(0% 0 0 / .06);
}

.auth-logo {
  width:         56px;
  height:        56px;
  background:    var(--amber-bg);
  border:        1.5px solid var(--amber-border);
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-logo svg { color: var(--amber); }

.auth-heading {
  font-size:     22px;
  font-weight:   700;
  letter-spacing: -.3px;
  margin-bottom: 4px;
}

.auth-sub {
  color:         var(--text-2);
  font-size:     14px;
  margin-bottom: 28px;
}

.auth-footer {
  text-align:  center;
  margin-top:  20px;
  font-size:   14px;
  color:       var(--text-3);
}

.auth-footer a {
  color:           var(--amber-text);
  text-decoration: none;
  font-weight:     500;
}

.auth-footer a:hover { text-decoration: underline; }

/* ── App layout ─────────────────────────────────────────── */
.site-header {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  position:      sticky;
  top:           0;
  z-index:       100;
}

.header-inner {
  max-width:   1200px;
  margin:      0 auto;
  padding:     0 24px;
  height:      56px;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.site-brand {
  display:         flex;
  align-items:     center;
  gap:             9px;
  text-decoration: none;
  color:           var(--text-1);
  font-weight:     700;
  font-size:       15px;
  letter-spacing:  -.2px;
  margin-right:    8px;
  flex-shrink:     0;
}

.brand-icon {
  width:         32px;
  height:        32px;
  background:    var(--amber-bg);
  border:        1.5px solid var(--amber-border);
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--amber);
}

.site-nav {
  display:     flex;
  align-items: center;
  gap:         2px;
  flex:        1;
}

.nav-link {
  padding:         6px 12px;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  color:           var(--text-2);
  font-size:       14px;
  font-weight:     500;
  transition:      color .12s, background .12s;
  white-space:     nowrap;
}

.nav-link:hover { color: var(--text-1); background: var(--surface-2); }

.nav-link.active {
  color:      var(--amber-text);
  background: var(--amber-bg);
}

.site-user {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-left: auto;
  flex-shrink: 0;
}

.user-name {
  font-size:   14px;
  color:       var(--text-2);
  font-weight: 500;
}

.logout-link {
  font-size:       13px;
  color:           var(--text-3);
  text-decoration: none;
}

.logout-link:hover { color: var(--text-2); text-decoration: underline; }

.site-main {
  max-width: 1200px;
  margin:    0 auto;
  padding:   28px 24px 48px;
}

/* ── Flash messages ─────────────────────────────────────── */
.flash {
  padding:       12px 16px;
  border-radius: var(--radius);
  font-size:     14px;
  font-weight:   500;
  margin-bottom: 20px;
  border:        1px solid transparent;
}

.flash--success { background: var(--sage-bg);  color: var(--sage-text);  border-color: var(--sage-border); }
.flash--error   { background: var(--rose-bg);  color: var(--rose-text);  border-color: var(--rose-border); }
.flash--info    { background: var(--amber-bg); color: var(--amber-text); border-color: var(--amber-border); }

/* ── Page header row ────────────────────────────────────── */
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   24px;
  gap:             16px;
  flex-wrap:       wrap;
}

.page-title {
  font-size:      22px;
  font-weight:    700;
  letter-spacing: -.3px;
}

/* ── Month navigation ───────────────────────────────────── */
.month-nav {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.month-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  background:      var(--surface);
  color:           var(--text-2);
  text-decoration: none;
  transition:      border-color .12s, color .12s;
}

.month-nav-btn:hover { border-color: var(--border-2); color: var(--text-1); }

.month-label {
  font-size:      16px;
  font-weight:    700;
  letter-spacing: -.2px;
  padding:        0 12px;
  min-width:      160px;
  text-align:     center;
}

/* ── Calendar grid ──────────────────────────────────────── */
.cal-wrap { width: 100%; }

.cal-dow-row {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom:         4px;
}

.cal-dow {
  text-align:     center;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-3);
  padding:        0 4px 6px;
}

.cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   1px;
  background:            var(--border);
  border:                1px solid var(--border);
  border-radius:         var(--radius-lg);
  overflow:              hidden;
}

.cal-cell {
  background: var(--surface);
  padding:    8px 8px 10px;
  min-height: 108px;
  display:    flex;
  flex-direction: column;
  gap:        3px;
  transition: background .1s;
}

.cal-cell--empty {
  background: var(--bg);
}

.cal-cell--other-month {
  background: oklch(96.5% 0.006 82);
}

.cal-cell--past .cell-num {
  color: var(--text-3);
}

.cal-cell--today .cell-num {
  background:    var(--amber);
  color:         oklch(99% 0 0);
  border-radius: 50%;
  width:         26px;
  height:        26px;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
}

.cal-cell--has-mine {
  background: oklch(97% 0.022 155);
}

.cell-head {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.cell-num {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-2);
  line-height: 1;
  width:       26px;
  height:      26px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
}

.cell-dots {
  display: none;
  gap:     3px;
  align-items: center;
}

.cell-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  flex-shrink:  0;
}

.cell-dot--open { background: var(--amber-mid); }
.cell-dot--mine { background: var(--sage-mid); }
.cell-dot--full { background: var(--slate-border); }

/* ── Shift chips ────────────────────────────────────────── */
.shift-chip {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        5px 8px;
  border-radius:  var(--radius-sm);
  font-size:      11.5px;
  line-height:    1.3;
  border:         1px solid transparent;
}

.shift-chip--open {
  background:   var(--amber-bg);
  border-color: var(--amber-border);
  color:        var(--amber-text);
}

.shift-chip--mine {
  background:   var(--sage-bg);
  border-color: var(--sage-border);
  color:        var(--sage-text);
}

.shift-chip--full {
  background:   var(--slate-bg);
  border-color: var(--slate-border);
  color:        var(--slate-text);
}

.shift-chip--filled {
  background:   var(--teal-bg);
  border-color: var(--teal-border);
  color:        var(--teal-text);
}

.chip-check {
  font-size:  11px;
  flex-shrink: 0;
  color:      var(--sage);
}

.chip-body {
  flex: 1;
  min-width: 0;
}

.chip-title {
  display:       block;
  font-weight:   600;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.chip-time {
  display:   block;
  font-size: 10.5px;
  opacity:   .8;
}

.chip-count {
  font-size:   10.5px;
  flex-shrink: 0;
  opacity:     .7;
}

.chip-full-label {
  font-size:   10px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chip-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.chip-form { display: inline; }

.chip-btn {
  all:           unset;
  font-size:     10.5px;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 4px;
  cursor:        pointer;
  line-height:   1.6;
  white-space:   nowrap;
  border:        1px solid transparent;
  transition:    background .12s;
}

.chip-btn--signup {
  background:   var(--amber);
  color:        oklch(99% 0 0);
  border-color: var(--amber);
}

.chip-btn--signup:hover { background: oklch(60% 0.15 72); }

.chip-btn--cancel {
  background:   transparent;
  color:        var(--sage-text);
  border-color: var(--sage-border);
}

.chip-btn--cancel:hover { background: var(--sage-bg); }

/* Cancel confirm (details/summary) */
.chip-cancel-wrap {
  display:  flex;
  flex-direction: column;
  gap:      4px;
  margin-top: 4px;
}

.chip-cancel-wrap summary { list-style: none; }
.chip-cancel-wrap summary::-webkit-details-marker { display: none; }

.chip-confirm {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  color:       var(--text-2);
  padding-top: 4px;
}

.chip-confirm-btn {
  all:           unset;
  font-size:     11px;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 4px;
  cursor:        pointer;
  background:    var(--rose-bg);
  color:         var(--rose-text);
  border:        1px solid var(--rose-border);
  transition:    background .12s;
}

.chip-confirm-btn:hover { background: oklch(90% 0.07 22); }

/* ── Mobile calendar list ───────────────────────────────── */
.mobile-shift-list { display: none; }

.mobile-day {
  margin-bottom: 16px;
}

.mobile-day-label {
  font-size:     12px;
  font-weight:   600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  8px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--border);
}

.mobile-day-label.today-label { color: var(--amber-text); }

.mobile-shift-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 8px;
}

.mobile-shift-card--mine {
  background:   var(--sage-bg);
  border-color: var(--sage-border);
}

.mobile-shift-card--past {
  opacity: 0.55;
}

.mobile-shift-info { flex: 1; min-width: 0; }

.mobile-shift-title {
  font-size:   14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.mobile-shift-time {
  font-size: 13px;
  color:     var(--text-2);
}

.mobile-shift-count {
  font-size: 12px;
  color:     var(--text-3);
}

.mobile-shift-actions { flex-shrink: 0; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

label {
  display:       block;
  font-size:     13px;
  font-weight:   600;
  color:         var(--text-2);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width:         100%;
  padding:       10px 12px;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     15px;
  font-family:   inherit;
  color:         var(--text-1);
  background:    var(--surface);
  outline:       none;
  transition:    border-color .12s;
  appearance:    none;
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--amber);
  box-shadow:   0 0 0 3px oklch(67% 0.15 72 / .12);
}

textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-hint {
  font-size:   12px;
  color:       var(--text-3);
  margin-top:  4px;
}

.form-row {
  display: grid;
  gap:     14px;
  grid-template-columns: 1fr 1fr;
}

.form-section-title {
  font-size:     13px;
  font-weight:   700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin:         24px 0 14px;
}

/* Weekday checkboxes */
.weekday-group {
  display: flex;
  gap:     8px;
  flex-wrap: wrap;
}

.weekday-option {
  position: relative;
}

.weekday-option input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.weekday-label {
  display:       block;
  width:         44px;
  height:        44px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    border-color .12s, background .12s, color .12s;
  color:         var(--text-2);
}

.weekday-option input:checked + .weekday-label {
  background:   var(--amber-bg);
  border-color: var(--amber-border);
  color:        var(--amber-text);
}

.weekday-option input:focus-visible + .weekday-label {
  box-shadow: 0 0 0 3px oklch(67% 0.15 72 / .18);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  padding:       10px 18px;
  border:        1px solid transparent;
  border-radius: var(--radius-sm);
  font-size:     14px;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  text-decoration: none;
  line-height:   1.4;
  transition:    background .12s, color .12s, border-color .12s;
  white-space:   nowrap;
}

.btn-primary {
  background:   var(--amber);
  color:        oklch(99% 0 0);
  border-color: var(--amber);
}

.btn-primary:hover { background: oklch(60% 0.15 72); border-color: oklch(60% 0.15 72); }

.btn-secondary {
  background:   var(--surface);
  color:        var(--text-1);
  border-color: var(--border);
}

.btn-secondary:hover { border-color: var(--border-2); background: var(--surface-2); }

.btn-danger {
  background:   var(--rose-bg);
  color:        var(--rose-text);
  border-color: var(--rose-border);
}

.btn-danger:hover { background: oklch(91% 0.06 22); }

.btn-sm {
  padding:   6px 12px;
  font-size: 13px;
}

.btn-full { width: 100%; }

/* ── View toggle ────────────────────────────────────────── */
.view-toggle {
  display:       flex;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  flex-shrink:   0;
}

.view-btn {
  padding:         5px 14px;
  font-size:       13px;
  font-weight:     500;
  color:           var(--text-2);
  text-decoration: none;
  background:      var(--surface);
  line-height:     1.6;
  white-space:     nowrap;
  transition:      background .12s, color .12s;
}

.view-btn + .view-btn { border-left: 1px solid var(--border); }

.view-btn--active { background: var(--amber-bg); color: var(--amber-text); }

.view-btn:hover:not(.view-btn--active) { background: var(--surface-2); color: var(--text-1); }

/* ── Week view ──────────────────────────────────────────── */
.cal-grid--week .cal-cell { min-height: 200px; }

.cal-dow--date {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  padding-bottom: 8px;
}

.dow-name {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--text-3);
}

.dow-num {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text-2);
  width:       30px;
  height:      30px;
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height:  1;
}

.dow-num--today { background: var(--amber); color: oklch(99% 0 0); }

/* ── Form card wrapper ──────────────────────────────────── */
.form-card { padding: 28px; }

/* ── Admin: shift list in calendar ─────────────────────── */
.admin-chip-actions {
  display: flex;
  gap:     4px;
  margin-top: 4px;
}

/* ── Table ──────────────────────────────────────────────── */
.table-wrap {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       14px;
}

thead tr {
  background:    var(--surface-2);
  border-bottom: 1px solid var(--border);
}

th {
  text-align:     left;
  padding:        10px 16px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--text-3);
}

td {
  padding:       12px 16px;
  border-bottom: 1px solid var(--border);
  color:         var(--text-1);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: var(--bg); }

/* ── Role badges ────────────────────────────────────────── */
.role-badge {
  display:       inline-block;
  padding:       2px 9px;
  border-radius: 99px;
  font-size:     12px;
  font-weight:   500;
}

.role-volunteer   { background: var(--slate-bg);  color: var(--slate-text); }
.role-coordinator { background: var(--amber-bg);  color: var(--amber-text); }
.role-admin       { background: var(--sage-bg);   color: var(--sage-text); }

/* ── Roster: volunteer name pills ───────────────────────── */
.roster-names {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.roster-name {
  font-size:     11px;
  font-weight:   500;
  padding:       2px 7px;
  background:    var(--sage-bg);
  border:        1px solid var(--sage-border);
  border-radius: 99px;
  color:         var(--sage-text);
}

.roster-empty {
  font-size: 11px;
  color:     var(--text-3);
  font-style: italic;
}

.roster-count {
  font-size:   10.5px;
  color:       var(--text-3);
  flex-shrink: 0;
}

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
  text-align:  center;
  padding:     48px 24px;
  color:       var(--text-3);
}

.empty-state-icon {
  width:         48px;
  height:        48px;
  background:    var(--amber-bg);
  border:        1.5px solid var(--amber-border);
  border-radius: 12px;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  color:         var(--amber-mid);
  margin-bottom: 16px;
}

.empty-state-title {
  font-size:     16px;
  font-weight:   600;
  color:         var(--text-2);
  margin-bottom: 6px;
}

.empty-state-body {
  font-size:     14px;
  margin-bottom: 20px;
}

/* ── My schedule: personal calendar header ──────────────── */
.my-cal-header {
  background:    var(--amber-bg);
  border:        1px solid var(--amber-border);
  border-radius: var(--radius);
  padding:       14px 18px;
  margin-bottom: 20px;
  font-size:     13px;
  color:         var(--amber-text);
}

.my-cal-count {
  font-weight: 700;
  font-size:   18px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .site-main { padding: 20px 14px 40px; }
  .header-inner { padding: 0 14px; }

  .user-name { display: none; }

  .cal-grid { display: none; }
  .cal-dow-row { display: none; }
  .mobile-shift-list { display: block; }

  .form-row { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 20px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .month-label { min-width: 120px; font-size: 14px; }
}

@media (max-width: 900px) {
  .cal-cell { min-height: 90px; padding: 6px 6px 8px; }
  .shift-chip { font-size: 10.5px; padding: 4px 6px; }
  .chip-title { font-size: 10.5px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .cell-dots { display: flex; }
}

/* ── Group tag pill ─────────────────────────────────────── */
.group-tag {
  display:       inline-block;
  font-size:     10px;
  font-weight:   600;
  padding:       1px 6px;
  border-radius: 99px;
  background:    var(--teal-bg);
  border:        1px solid var(--teal-border);
  color:         var(--teal-text);
  letter-spacing: .03em;
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     80px;
}

/* ── Onboarding page ────────────────────────────────────── */
.onboard-wrap {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
}

.onboard-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       40px 36px;
  width:         100%;
  max-width:     520px;
  box-shadow:    0 2px 8px oklch(0% 0 0 / .04), 0 8px 32px oklch(0% 0 0 / .06);
}

/* ── Group selection cards ──────────────────────────────── */
.group-options {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  24px;
}

.group-option {
  display: block;
  cursor:  pointer;
}

.group-option input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.group-option-label {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       14px 16px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  background:    var(--surface);
  transition:    border-color .12s, background .12s;
  cursor:        pointer;
}

.group-option input:checked + .group-option-label {
  background:   var(--amber-bg);
  border-color: var(--amber-border);
}

.group-option input:focus-visible + .group-option-label {
  box-shadow: 0 0 0 3px oklch(67% 0.15 72 / .18);
}

.group-option-label:hover {
  border-color: var(--border-2);
  background:   var(--surface-2);
}

.group-option input:checked + .group-option-label:hover {
  background:   var(--amber-bg);
  border-color: var(--amber);
}

.group-option-check {
  width:         24px;
  height:        24px;
  border:        1.5px solid var(--border);
  border-radius: 6px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     14px;
  color:         transparent;
  flex-shrink:   0;
  background:    var(--surface);
  transition:    border-color .12s, background .12s, color .12s;
}

.group-option input:checked + .group-option-label .group-option-check {
  background:   var(--amber);
  border-color: var(--amber);
  color:        oklch(99% 0 0);
}

.group-option-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.group-option-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-1);
}

.group-option input:checked + .group-option-label .group-option-name {
  color: var(--amber-text);
}

.group-option-desc {
  font-size: 13px;
  color:     var(--text-3);
  line-height: 1.4;
}

/* ── Groups filter bar ──────────────────────────────────── */
.groups-filter-bar {
  background:    var(--teal-bg);
  border:        1px solid var(--teal-border);
  border-radius: var(--radius);
  padding:       10px 16px;
  margin-bottom: 16px;
  font-size:     13px;
  color:         var(--teal-text);
}

.groups-filter-bar a {
  color:           var(--teal-text);
  font-weight:     600;
  text-decoration: none;
}

.groups-filter-bar a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .onboard-card { padding: 28px 20px; }
  .group-option-label { padding: 12px 14px; }
}