/**
 * Board Modals CSS
 * ============================================
 * Styles for board creation, settings, and management modals
 * Also includes board-chip switcher styles
 */

/* ============================================
   BOARD SWITCHER CHIPS
   ============================================ */

#board-switcher {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

#board-chips {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.board-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.board-chip:hover {
  background: var(--hover-bg, #f3f4f6);
  border-color: var(--accent-color, #14b8a6);
}

.board-chip.active {
  background: var(--accent-color, #14b8a6);
  color: white;
  border-color: var(--accent-color, #14b8a6);
}

.board-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.board-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.2);
}

.board-chip .board-privacy-icon,
.group-chip .group-privacy-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ============================================
   PRIVACY BADGE - Color-coded label on chip
   ============================================ */
.chip-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.chip-privacy-badge i {
  font-size: 0.6rem;
}

/* Privacy badge color variants */
.chip-privacy-badge.privacy-all {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.chip-privacy-badge.privacy-work {
  background: rgba(8, 145, 178, 0.12);
  color: #0891b2;
}

.chip-privacy-badge.privacy-personal {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.chip-privacy-badge.privacy-private {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.chip-privacy-badge.privacy-busy-only {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

/* Active chip: badge uses white-on-transparent style */
.board-chip.active .chip-privacy-badge,
.group-chip.active .chip-privacy-badge {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   OWNER BADGE - Shows admin/owner name
   ============================================ */
.chip-owner {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  opacity: 0.8;
  white-space: nowrap;
}

.chip-owner i {
  font-size: 0.55rem;
  color: #d97706;
}

.board-chip.active .chip-owner,
.group-chip.active .chip-owner {
  color: rgba(255, 255, 255, 0.75);
}

.board-chip.active .chip-owner i,
.group-chip.active .chip-owner i {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   DARK MODE - Privacy badge + Owner overrides
   ============================================ */
body.dark-mode .chip-privacy-badge.privacy-all,
body.dark-mode .chip-privacy-badge.privacy-all {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

body.dark-mode .chip-privacy-badge.privacy-work,
body.dark-mode .chip-privacy-badge.privacy-work {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
}

body.dark-mode .chip-privacy-badge.privacy-personal,
body.dark-mode .chip-privacy-badge.privacy-personal {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
}

body.dark-mode .chip-privacy-badge.privacy-private,
body.dark-mode .chip-privacy-badge.privacy-private {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

body.dark-mode .chip-privacy-badge.privacy-busy-only,
body.dark-mode .chip-privacy-badge.privacy-busy-only {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

body.dark-mode .chip-owner,
body.dark-mode .chip-owner {
  color: var(--text-muted, #9ca3af);
}

body.dark-mode .chip-owner i,
body.dark-mode .chip-owner i {
  color: #fbbf24;
}

/* ============================================
   GROUP-CHIP alias styles (JS uses group-chip,
   CSS originally used board-chip)
   ============================================ */
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.group-chip:hover {
  background: var(--hover-bg, #f3f4f6);
  border-color: var(--accent-color, #14b8a6);
}

.group-chip.active {
  background: var(--accent-color, #14b8a6);
  color: white;
  border-color: var(--accent-color, #14b8a6);
}

/* Unread notifications waiting in this group (2026-09-07). Painted from the
   one per-group map the notifications route returns, so it agrees with the
   Review strip badge and the feed. Zero renders nothing. */
.group-chip .chip-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  margin-left: 2px;
  background: var(--primary-600, #0d9488);
  color: #fff;
  border-radius: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.group-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.group-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Delete button */
.group-chip .group-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: currentColor;
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.7rem;
}

.group-chip:hover .group-delete-btn {
  opacity: 0.6;
}

.group-chip .group-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.group-chip.active .group-delete-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Add group chip */
.group-chip.add-group {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted, #6b7280);
}

.group-chip.add-group:hover {
  background: var(--accent-color, #14b8a6);
  border-style: solid;
  color: white;
}

/* Pending join request chip — approval-required group you've asked to join but
   aren't a member of yet. Amber, dashed, slightly muted so it reads as
   "in progress, not selectable like a real board". */
.group-chip.group-chip--pending {
  background: var(--amber-50, #fffbeb);
  border-style: dashed;
  border-color: var(--amber-400, #fbbf24);
  color: var(--amber-700, #b45309);
  cursor: pointer;
}

.group-chip.group-chip--pending:hover {
  background: var(--amber-100, #fef3c7);
  border-color: var(--amber-500, #f59e0b);
  color: var(--amber-800, #92400e);
}

.group-chip.group-chip--pending .group-chip-pending-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  background: var(--amber-400, #fbbf24);
  color: #fff;
  border-radius: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.group-chip.group-chip--pending i {
  color: var(--amber-500, #f59e0b);
}

body.dark-mode .group-chip.group-chip--pending {
  background: rgba(180, 83, 9, 0.18);
  border-color: var(--amber-500, #f59e0b);
  color: var(--amber-200, #fde68a);
}

body.dark-mode .group-chip.group-chip--pending .group-chip-pending-tag {
  background: var(--amber-500, #f59e0b);
  color: #1e293b;
}

body.dark-mode .group-chip {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .group-chip:hover {
  background: var(--slate-700, #334155);
}

body.dark-mode .group-chip {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .group-chip:hover {
  background: var(--slate-700, #334155);
}

/* Delete button - hidden by default, visible on hover */
.board-chip .board-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: currentColor;
  opacity: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.board-chip:hover .board-delete-btn {
  opacity: 0.6;
}

.board-chip .board-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.board-chip.active .board-delete-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Add board chip */
.board-chip.add-board {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted, #6b7280);
}

.board-chip.add-board:hover {
  background: var(--accent-color, #14b8a6);
  border-style: solid;
  color: white;
}

/* ============================================
   CREATE BOARD MODAL - Option Pills
   Uses standard .modal, .modal-content, etc.
   ============================================ */

/* Header privacy selector - icon chips in top right */
.header-privacy-selector {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.privacy-chip {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #64748b;
}

.privacy-chip:hover {
  background: #e2e8f0;
}

.privacy-chip.selected {
  border-color: var(--primary-500, #14b8a6);
  background: rgba(20, 184, 166, 0.1);
}

.privacy-chip[data-preset="standard"] i { color: #f59e0b; }
.privacy-chip[data-preset="open"] i { color: #22c55e; }
.privacy-chip[data-preset="privacy_first"] i { color: #8b5cf6; }

body.dark-mode .privacy-chip {
  background: var(--slate-700, #334155);
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .privacy-chip:hover {
  background: var(--slate-600, #475569);
}

body.dark-mode .privacy-chip.selected {
  background: rgba(45, 212, 191, 0.15);
  border-color: var(--primary-400, #2dd4bf);
}

.create-board-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Option pills mirror the event modal's capsule chips (.event-type-chip /
   .duration-chip in style.css) so group creation reads as the same app as
   event creation: fully-rounded capsule, white base, accent-filled when
   selected. .option-pill is used ONLY by the two group modals
   (create-board-modal.js, session-board-modal.js), so this re-skins both. */
.option-pill {
  flex: 1;
  /* min-width:0 lets a flex:1 pill shrink WITHOUT clipping its label. Without
     it a narrow modal crammed the icon + text past the pill edge and the label
     ("Temporary") was cut off / hidden. Paired with white-space:normal so a
     tight label wraps inside the pill instead of vanishing. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white, #fff);
  /* 1.5px border + 600 weight match the event-modal .duration-chip reference
     (style.css), so the pills read as the same control family app-wide. */
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  white-space: normal;
  text-align: center;
  /* SQUAT LABELS (2026-08-14, user: "request button the text seems squat").
     No line-height and no min-height were declared, so with white-space:normal
     a one-word label like "Request" sat on a tight inherited line-box inside
     only 8px of vertical padding. */
  line-height: 1.25;
  min-height: 38px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .option-pill:hover {
    border-color: var(--primary-300, #5eead4);
    background: var(--primary-50, #f0fdfa);
    color: var(--primary-700, #0f766e);
  }
}

/* ONE SELECTED LOOK (owner 2026-10-22, canvas "Setup flows" shared part 6):
   picked = a 2px teal outline and a light teal tint, as on every card and
   chip; no solid teal pill. (Was a solid accent fill, 2026-08.) */
.option-pill.selected {
  background: var(--primary-50, #f0fdfa);
  border-color: var(--primary-700, #0f766e);
  box-shadow: inset 0 0 0 1px var(--primary-700, #0f766e);
  color: var(--primary-700, #0f766e);
  font-weight: 600;
}

.option-pill i {
  font-size: 0.75rem;
}

/* Dark Mode */
body.dark-mode .option-pill {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

@media (hover: hover) {
  body.dark-mode .option-pill:hover {
    border-color: var(--primary-400, #2dd4bf);
    background: var(--slate-700, #334155);
    color: var(--primary-300, #5eead4);
  }
}

body.dark-mode .option-pill.selected {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-400, #2dd4bf);
  box-shadow: inset 0 0 0 1px var(--primary-400, #2dd4bf);
  color: var(--primary-300, #5eead4);
}

/* Privacy sub-control: the founding-class capsules render as a refinement
   of the Privacy section, not a co-equal field. Quieter than a .form-group
   <label> so the preset dropdown stays the headline control. */
.privacy-section .privacy-subfield {
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Quiet caption above a nested privacy control (e.g. "Who can see what",
   "From your calendar"). Used standalone now, so it owns its own spacing. */
.privacy-subfield-label {
  display: block;
  margin: 4px 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
}
/* When a sub-label introduces a NESTED secondary control inside the section
   (the temp modal's "From your calendar"), give it breathing room above. */
.privacy-section .visibility-dropdown-wrapper + .calendar-sharing-toggle,
.privacy-section .privacy-scale + .calendar-sharing-toggle {
  margin-top: 10px;
}
.privacy-section > .privacy-subfield-label:not(:first-of-type) {
  margin-top: 14px;
}

.privacy-subfield-note {
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .privacy-subfield-label {
  color: var(--slate-300, #cbd5e1);
}

/* ============================================================
   MERGED PRIVACY SCALE (create-group + temp-group modals)
   One labelled radio-card list replacing the old preset dropdown +
   Standard/Private/Manual capsule pair. Reuses the .visibility-option
   card shell (style.css) but rendered open as a vertical stack, so each
   level shows its "what members see" line at a glance.
   ============================================================ */
.privacy-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 4px;
}
/* The base .visibility-option (style.css) is a flex menu row; as a standalone
   button we just ensure full-width + left alignment + button-reset. */
.privacy-scale-option {
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--white, #fff);
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
}
/* Hover only where there is a mouse (2026-10-22): on a phone a tapped card
   kept its hover tint, so an unpicked card looked picked. */
@media (hover: hover) {
  .privacy-scale-option:hover {
    border-color: var(--primary-300, #5eead4);
    background: var(--primary-50, #f0fdfa);
  }
}
.privacy-scale-option.selected {
  border-color: var(--primary-500, #14b8a6);
  background: var(--primary-50, #f0fdfa);
  box-shadow: 0 0 0 1px var(--primary-500, #14b8a6) inset;
}

/* ---- "What members see" mini-board preview (per scale level) --------------
   The base .visibility-option is a horizontal [icon][text] flex row. Allow it
   to wrap so the preview thumbnail drops onto its own full-width line below the
   label, where it's legible. The icon column is 24px (style.css); align the
   preview to the text by leaving it full-width and letting the row's gap own
   spacing. */
.privacy-scale-option {
  flex-wrap: wrap;
}
.vis-preview {
  /* Full-width so it wraps under the icon+text instead of squeezing beside it. */
  flex: 1 0 100%;
  display: flex;
  /* 2026-08-03: the preview grew from one cell to a 3-cell day-strip (the
     join wizard's illustrated [Busy][Free][Busy] rhythm — the design the user
     called the better version). Strip above, caption below. */
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  /* Indent to line up with the label text (past the 24px icon + row gap). */
  padding-left: calc(24px + var(--space-3, 12px));
}
/* The 3-cell strip: three sibling board cells sharing the row equally. */
.vis-preview-strip {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 280px;
}
/* One representative board cell, sized like a small timeline cell. */
.vis-preview-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-xs, 4px);
  background: var(--white, #fff);
  overflow: hidden;
}
/* A cell holding a TITLED chip sizes to its title first (2026-09-25: at 360px
   the equal thirds were 75px and cut "Standup 9:00" by 13px). The others
   still share what is left. */
.vis-preview-cell:has(> .vis-preview-chip) {
  flex: 1 0 auto;
}
/* Private: the join wizard's "?" placeholder — "unknown", not "free all day". */
.vis-preview-q {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--slate-400, #94a3b8);
}
/* Shared: a titled event chip is visible (working green, --status-available /
   .tz-seg-working on the real board). */
.vis-preview-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: var(--vp-color, #16a34a);
}
/* Busy: a solid RED block, no title — matches .tz-seg-busy on the real board
   (rgb(220,38,38) + the same inset hairline). DEF-073: this was amber
   (#f59e0b), a colour the board reserves for flex/off-hours/tentative, so the
   preview depicted a cell the app never actually renders. */
.vis-preview-busy {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs, 4px);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  /* Fill the cell so it reads as a solid "taken" block. */
  width: 100%;
  text-align: center;
  background: var(--vp-color, var(--status-busy, #dc2626));
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}
/* Private: an empty (free) cell — nothing shown. */
.vis-preview-free {
  display: block;
  width: 100%;
  height: 100%;
}
.vis-preview-caption {
  font-size: 0.6875rem;
  color: var(--slate-500, #64748b);
}
.vis-preview-caption strong {
  color: var(--slate-700, #334155);
  font-weight: 600;
}
body.dark-mode .vis-preview-cell {
  border-color: var(--slate-600, #475569);
  background: var(--slate-900, #0f172a);
}
body.dark-mode .vis-preview-q {
  color: var(--slate-500, #64748b);
}

body.dark-mode .vis-preview-caption {
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vis-preview-caption strong {
  color: var(--slate-200, #e2e8f0);
}
/* Label row: the level name + (Recommended) + the "Permanent" lock chip flow
   inline after the name. Make it a LEFT-ALIGNED wrapping flex row so on a narrow
   (mobile) modal the badges wrap UNDER the name flush-left instead of flowing
   ragged / centre-drifting against the inline baseline (user 2026-06-26: "in
   create groups the permanent needs aligning correctly especially on mobile" +
   "left align the padlock and permanent"). align-items:center keeps the lock
   glyph + text vertically centred with the name; the row label box already left-
   aligns via .privacy-scale-option { text-align:left }. */
.privacy-scale-option .option-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  column-gap: 6px;
}
/* The little "Permanent" lock chip on the irreversible levels (Private/Manual)
   — quiet amber so it reads as a caution, not an error. margin-left removed: the
   parent flex `gap` now owns the spacing so it stays consistent whether the chip
   sits inline after the name or wraps to its own line, keeping it flush-left. */
.privacy-scale-lock {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber-600, #d97706);
  white-space: nowrap;
}
.privacy-scale-lock i {
  font-size: 0.625rem;
  margin-right: 2px;
}
body.dark-mode .privacy-scale-option {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}
body.dark-mode .privacy-scale-option.selected {
  background: var(--slate-700, #334155);
}
@media (hover: hover) {
  body.dark-mode .privacy-scale-option:hover { background: var(--slate-700, #334155); }
}

body.dark-mode .privacy-subfield-note {
  color: var(--slate-500, #64748b);
}

/* ============================================
   BOARD SETTINGS MODAL
   ============================================ */

.board-settings-modal .modal-content {
  max-width: 520px;
}

.board-settings-modal .settings-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.board-settings-modal .settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.board-settings-modal .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
}

/* Availability mode toggle */
.availability-mode-toggle {
  display: flex;
  gap: 0.5rem;
}

.availability-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--card-bg, #fff);
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.availability-mode-btn:hover {
  border-color: var(--accent-color, #14b8a6);
}

.availability-mode-btn.selected {
  border-color: var(--accent-color, #14b8a6);
  background: rgba(20, 184, 166, 0.05);
}

.availability-mode-btn .mode-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-color, #374151);
}

.availability-mode-btn .mode-header i {
  color: var(--accent-color, #14b8a6);
}

.availability-mode-btn .mode-description {
  font-size: 0.8125rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.availability-mode-btn .mode-best-for {
  font-size: 0.75rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

/* Locked setting badge */
.locked-setting-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  margin-left: auto;
}

/* Danger zone */
.danger-zone {
  padding: 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
}

.danger-zone .section-title {
  color: #991b1b;
  margin-bottom: 0.75rem;
}

.danger-zone-actions {
  display: flex;
  gap: 0.75rem;
}

.danger-zone .btn-danger-outline {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.danger-zone .btn-danger-outline:hover {
  background: #ef4444;
  color: white;
}

/* ============================================
   QUICK MEET MODAL
   ============================================ */

/* QuickMeet-scoped chrome removed (add-surfaces D1 — the QuickMeet modal is
   deleted). The .participant-* / .meeting-* rules below are intentionally
   kept: they are consumed by the guest page (meet.html, .participant-row).
   The .scanner-preview-* rules were removed with the dead ScannerPreviewStrip
   module (GS-07 — its only consumer, session-board-modal, replaced it with
   "Suggest from my calendar"). */

/* Meeting date picker */
.meeting-date-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.meeting-date-input,
.meeting-time-input,
.meeting-duration-select {
  flex: 1;
}

.meeting-date-input label,
.meeting-time-input label,
.meeting-duration-select label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* (Scanner preview strip rules removed — GS-07. The ScannerPreviewStrip
   module was dead: no <script> include, no render() caller, and it carried
   a false-positive "Fair to everyone" verdict the live surfaces rejected.
   The guest strip on meet.html uses its own inline .scanner-cell CSS.) */

/* Participants list */
.participants-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.participants-header h4 {
  font-size: 0.875rem;
  font-weight: 600;
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.participant-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--hover-bg, #f9fafb);
  border-radius: 0.5rem;
}

.participant-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-color, #14b8a6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

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

.participant-name {
  font-weight: 500;
  color: var(--text-color, #374151);
}

.participant-tz {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.participant-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 1rem;
}

/* Temp sync option */
.temp-sync-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.temp-sync-option input[type="checkbox"] {
  margin-top: 0.125rem;
}

.temp-sync-info h5 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 0.25rem;
}

.temp-sync-info p {
  font-size: 0.8125rem;
  color: #15803d;
  line-height: 1.4;
}

/* Share link section */
.share-link-section {
  padding: 1rem;
  background: var(--hover-bg, #f9fafb);
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.share-link-section h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.share-link-row {
  display: flex;
  gap: 0.5rem;
}

.share-link-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* ============================================
   BOARD MEMBERS PANEL
   ============================================ */

.board-members-panel {
  max-height: 400px;
  overflow-y: auto;
}

.member-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}

.member-list-item:hover {
  background: var(--hover-bg, #f9fafb);
}

.member-list-item .member-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-color, #14b8a6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.member-list-item .member-details {
  flex: 1;
  min-width: 0;
}

.member-list-item .member-name {
  font-weight: 500;
  color: var(--text-color, #374151);
}

.member-list-item .member-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.member-role-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0.25rem;
}

.member-role-badge.owner {
  background: #fef3c7;
  color: #92400e;
}

.member-actions {
  display: flex;
  gap: 0.25rem;
}

.member-action-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.member-action-btn:hover {
  background: var(--hover-bg, #f3f4f6);
  color: var(--text-color, #374151);
}

.member-action-btn.remove:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Pending invites section */
.pending-invites-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.pending-invites-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.pending-invite-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.pending-invite-item .invite-email {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-color, #374151);
}

.pending-invite-item .invite-status {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.invite-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.invite-action-btn.resend {
  background: #e0e7ff;
  color: #4338ca;
}

.invite-action-btn.accept {
  background: #d1fae5;
  color: #065f46;
}

.invite-action-btn.deny {
  background: #fecaca;
  color: #991b1b;
}

/* ============================================
   CONTEXT MENU STYLES
   ============================================ */

.board-context-menu {
  position: fixed;
  min-width: 180px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: var(--z-popover);
}

/* .context-menu-item base + :hover + .danger removed 2026-08-04.
   This file loads AFTER style.css, so this copy was the one that actually won
   app-wide — every context menu in the app was painted by these hardcoded
   values rather than by the token-based canonical rule in style.css. The
   canonical rule already carries an equivalent .danger treatment, so deleting
   this changes no intended appearance; it just stops the override. Do not
   reintroduce an unscoped .context-menu-item rule here. */

.context-menu-divider {
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 0.5rem 0;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

body.dark-mode .board-chip {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
  color: var(--text-color-dark, #e5e7eb);
}

body.dark-mode .board-chip:hover {
  background: var(--hover-bg-dark, #374151);
}

body.dark-mode .privacy-preset-card,
body.dark-mode .entry-mode-btn,
body.dark-mode .availability-mode-btn {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
}

body.dark-mode .board-context-menu {
  background: var(--card-bg-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
}

body.dark-mode .context-menu-item:hover {
  background: var(--hover-bg-dark, #374151);
}

body.dark-mode .danger-zone {
  background: rgba(127, 29, 29, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .temp-sync-option {
  background: rgba(22, 101, 52, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

/* QUICK MEET BUTTON section removed (add-surfaces D1 — surface deleted). */

/* ============================================
   CALENDAR SHARING TOGGLE
   ============================================ */

.calendar-sharing-toggle {
  background: var(--hover-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.toggle-row.sub-toggle {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #374151);
}

.toggle-desc {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* Checkbox styled as toggle switch. Matches the attendees switch
   (.create-switch / .propose-switch in style.css) — same 36×20 track, pill
   radius, and 14px flat knob — so the group modal's toggles read identically
   to the Essential/Invited switches. Semantics stay normal here (off = grey,
   on = teal), since "share my calendar: on" should read as enabled.

   Scoped to .calendar-sharing-toggle so the dimension/colour rules reach
   specificity (0,2,1) — enough to beat the global `.form-group
   input[type="checkbox"]` (18×18) and `.toggle-switch` (44×24) rules that
   otherwise won the cascade and squashed the switch. board-modals.css loads
   after style.css, so the tie with .form-group input[type=checkbox] breaks
   our way. */
.calendar-sharing-toggle input.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  /* The global `.form-group input` rule leaks padding (12px 16px) onto this
     checkbox and distorts the track + knob — zero it out. */
  padding: 0;
  margin: 0;
  background: var(--slate-300, #cbd5e1);
  border-radius: var(--radius-xl, 9999px);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.calendar-sharing-toggle input.toggle-switch:checked {
  background: var(--primary-500, #14b8a6);
}

.calendar-sharing-toggle input.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.calendar-sharing-toggle input.toggle-switch:checked::after {
  transform: translateX(16px);
}

/* Form hint text. 12px / secondary matches the inline duration hint, so every
   helper line in these two modals reads at one size (was 11px muted — visibly
   smaller than its neighbours). */
.form-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  padding: 0 2px;
  line-height: 1.45;
}

/* The "Who can join" reality statement (2026-09-03). Replaces the entry-mode
   picker that enforced nothing - see session-board-modal.js. Icon aligns to
   the FIRST line rather than the block centre, so a statement that wraps to
   three lines does not leave the glyph floating beside the middle of the
   paragraph (which is what a bare inline <i> inside .form-hint produced). */
.form-hint.temp-entry-reality {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.form-hint.temp-entry-reality > i {
  flex: 0 0 auto;
  margin-top: 2px;   /* optical: centres the glyph on the first line s x-height */
  opacity: 0.75;
}

/* Recommended badge */
.recommended-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
  border-radius: 4px;
}

/* Dark mode overrides for calendar sharing and toggles */
body.dark-mode .calendar-sharing-toggle,
body.dark-mode .calendar-sharing-toggle {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}

body.dark-mode .toggle-title,
body.dark-mode .toggle-title {
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .toggle-desc,
body.dark-mode .toggle-desc {
  color: var(--slate-400, #94a3b8);
}

body.dark-mode input.toggle-switch,
body.dark-mode input.toggle-switch {
  background: var(--slate-600, #475569);
}

body.dark-mode input.toggle-switch:checked,
body.dark-mode input.toggle-switch:checked {
  background: var(--accent-color, #14b8a6);
}

body.dark-mode .toggle-row.sub-toggle,
body.dark-mode .toggle-row.sub-toggle {
  border-top-color: var(--slate-600, #475569);
}

body.dark-mode .recommended-badge,
body.dark-mode .recommended-badge {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
}

body.dark-mode .form-hint {
  /* slate-400, the value style.css's two dark .form-hint rules already use;
     this later sheet set slate-500, which read 2.84-3.07:1 on the dark
     modal sheets (owner 2026-10-01, Settings/Add in dark mode). */
  color: var(--slate-400, #94a3b8);
}

/* ============================================
   CREATE-GROUP SIZING — mirror #event-modal (style.css) so the ~7-section
   stack lays out in two columns instead of a tall single column that forces
   page-scroll. Width was previously a JS inline max-width:420px; that inline
   style is removed so this rule owns sizing. 2026-06-26.
   ============================================ */

#create-board-modal .modal-content {
  max-width: 760px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#create-board-modal .modal-header,
#create-board-modal .modal-footer {
  flex-shrink: 0;
}

#create-board-modal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Two-column form grid ≥640px. Each .form-group is a grid item; rows that
   should stay full-width (privacy section with its sub-controls, calendar
   sharing) opt out via .cbm-full. Below 640px it collapses to one column. */
@media (min-width: 641px) {
  #create-board-modal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 4px;
    align-content: start;
    /* Items align to the TOP of their row (2026-09-06): the collapsed
       description disclosure used to stretch to the height of its neighbour
       and read as a large empty box. */
    align-items: start;
  }

  /* The description disclosure shares a row with the name field; drop it to
     the input line so the two controls sit level (the name has a label above). */
  #create-board-modal .modal-body > .cbm-desc-disclosure {
    margin-top: 26px;
  }

  #create-board-modal .modal-body > .form-group {
    margin-bottom: 0;
    min-width: 0;
  }

  /* Full-width rows: privacy (tall, has sub-controls), anything tagged
     .cbm-full, and the calendar-sharing block (the last .form-group in the
     body — a plain .form-group from the shared buildCalendarSharingHTML with
     no distinguishing class, so target it positionally). */
  #create-board-modal .modal-body > .privacy-section,
  #create-board-modal .modal-body > .cbm-full,
  #create-board-modal .modal-body > .form-group:last-child {
    grid-column: 1 / -1;
  }
}

/* Duplicate as a new group (2026-09-26): the "settings are copied from ..."
   note above the form. Full width (.cbm-full), a quiet info box, the icon on
   the text's first line. */
#create-board-modal .cbm-duplicate-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--slate-50, #f8fafc);
  color: var(--text-secondary, #64748b);
  font-size: 0.8125rem;
  line-height: 1.45;
}
#create-board-modal .cbm-duplicate-note i { margin-top: 3px; color: var(--primary-color, #14b8a6); }
body.dark-mode #create-board-modal .cbm-duplicate-note {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}

/* "WHAT DO YOU WANT TO SET UP?" (2026-09-28). Four actions; since 2026-09-29
   no duration headings — a who-can-join tag on each row instead. Each row is one tap target: icon tile, title, one line of what it
   is, and a chevron because it opens something. The tile colour names the
   concept and is the same wherever that concept appears; colours come from
   the shared tokens, mixed down to a soft tile so they read in both themes. */
#create-board-modal .cbm-step-hidden { display: none !important; }
#create-board-modal .modal-header .cbm-back-btn { margin-right: 4px; flex-shrink: 0; }
#create-board-modal .modal-header h2 { flex: 1; min-width: 0; }
#create-board-modal .cbm-chooser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 641px) {
  #create-board-modal .cbm-chooser { grid-template-columns: 1fr 1fr; }
}
/* Two headings (owner 2026-10-29): what each pair gives you. On desktop the
   grid fills by column, so each heading tops its two cards and the rows still
   line up across; on a phone they stack in source order. */
#create-board-modal .cbm-chooser-heading {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
}
#create-board-modal .cbm-chooser-heading ~ .cbm-chooser-heading { margin-top: 8px; }
@media (min-width: 641px) {
  #create-board-modal #board-type-toggle { grid-auto-flow: column; grid-template-rows: auto auto auto; }
  #create-board-modal .cbm-chooser-heading ~ .cbm-chooser-heading { margin-top: 0; }
}
body.dark-mode #create-board-modal .cbm-chooser-heading { color: #94a3b8; }
#create-board-modal .cbm-choice {
  --choice-accent: var(--color-primary, #14b8a6);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--white, #fff);
  color: var(--text-primary, #1e293b);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#create-board-modal .cbm-choice:hover,
#create-board-modal .cbm-choice:focus-visible {
  border-color: var(--choice-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--choice-accent) 18%, transparent);
  outline: none;
}
#create-board-modal .cbm-choice[data-board-type="meeting"] { --choice-accent: var(--color-primary, #14b8a6); }
#create-board-modal .cbm-choice[data-board-type="shared-days"] { --choice-accent: var(--color-warning, #f59e0b); }
#create-board-modal .cbm-choice[data-board-type="group"] { --choice-accent: var(--color-info, #3b82f6); }
#create-board-modal .cbm-choice[data-board-type="booking"] { --choice-accent: var(--fairness-purple, #7c3aed); }
#create-board-modal .cbm-choice-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  background: color-mix(in srgb, var(--choice-accent) 14%, transparent);
  color: color-mix(in srgb, var(--choice-accent) 78%, #000);
}
#create-board-modal .cbm-choice-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 2026-09-29 — the tag sits on the title's line on EVERY row. With wrap on,
   the two longest pairs dropped their tag onto a line of its own at 412px
   while the short pairs stayed inline. Now the tag never wraps or shrinks;
   a title too long for what is left wraps inside its own box instead. */
#create-board-modal .cbm-choice-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
#create-board-modal .cbm-choice-title {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Who can join: a small pill in the row's own accent, like the switcher's
   session badge. Text colour is the accent mixed toward black (white in dark
   mode) so it keeps contrast on its own tint. */
#create-board-modal .cbm-choice-who {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: color-mix(in srgb, var(--choice-accent) 14%, transparent);
  color: color-mix(in srgb, var(--choice-accent) 70%, #000);
}
#create-board-modal .cbm-choice-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
}
#create-board-modal .cbm-choice-go {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}
body.dark-mode #create-board-modal .cbm-choice {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-100, #f1f5f9);
}
body.dark-mode #create-board-modal .cbm-choice-icon {
  background: color-mix(in srgb, var(--choice-accent) 24%, transparent);
  color: color-mix(in srgb, var(--choice-accent) 70%, #fff);
}
body.dark-mode #create-board-modal .cbm-choice-who {
  background: color-mix(in srgb, var(--choice-accent) 26%, transparent);
  color: color-mix(in srgb, var(--choice-accent) 55%, #fff);
}
body.dark-mode #create-board-modal .cbm-choice-desc,
body.dark-mode #create-board-modal .cbm-choice-go {
  color: var(--slate-400, #94a3b8);
}
/* ROOM TO BREATHE (2026-09-30, owner: "It seems cramped yet loads of
   space; would it look better with a space under the header?"). One spacing
   rhythm for the chooser, "Who's coming?" and the Meetings list: 20px under
   the header, 16px inside a card, 12px between cards.
   On a phone the body keeps the 16px gutter at the sides (was 20), which pays
   for the 44px icon tile (the 09-29 pass had shrunk it to 36) and 16px card
   padding while the tag stays on the title's line. Measured: all four titles
   on one line with their tag at 412px; at 360-390 the longest titles wrap
   inside their own box, tag on the first line. The list stays top-aligned:
   spread over a tall phone the four cards read as unrelated. */
/* THE CHOOSER, CALMER (owner-approved mock, 2026-10-05): rounder cards, the
   who-can-join tag carries its own icon, and a slim picture of what each kind
   makes sits UNDER the words ("have the diagram below"). Plain colours only,
   no color-mix(): the owner's iOS 15.6 phone paints none. */
#create-board-modal .cbm-choice { flex-wrap: wrap; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
#create-board-modal .cbm-choice-who i { font-size: 0.6rem; margin-right: 4px; }
/* The picture (owner-approved mock v2, 2026-10-07): a small copy of the
   board — named rows of the board's own hour cells, the gold meeting column —
   and a "how long" line along the bottom of every card. Plain colours only,
   no color-mix(): the owner's iOS 15.6 phone paints none. */
#create-board-modal .cbm-choice-preview {
  display: block; flex-basis: 100%; margin-top: 2px; padding: 10px 12px;
  border-radius: 10px; overflow: hidden; background: #f0fdfa; color: #64748b;
}
#create-board-modal .cbm-pv--group { background: #eff6ff; }
#create-board-modal .cbm-pv--shared-days { background: #fffbeb; }
#create-board-modal .cbm-pv--booking { background: #f5f3ff; }
#create-board-modal .cbm-pv-board { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: center; }
#create-board-modal .cbm-pv-date { font-size: 9.5px; font-weight: 600; white-space: nowrap; }
#create-board-modal .cbm-pv-axis { position: relative; display: block; height: 11px; font-size: 8.5px; line-height: 11px; }
#create-board-modal .cbm-pv-axis span { position: absolute; transform: translateX(-50%); }
#create-board-modal .cbm-pv-people,
#create-board-modal .cbm-pv-lanes { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#create-board-modal .cbm-pv-lanes { position: relative; }
#create-board-modal .cbm-pv-person { display: flex; align-items: center; gap: 5px; height: 16px; min-width: 0; }
#create-board-modal .cbm-pv-face {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%; font-size: 8.5px; font-weight: 700; line-height: 1; color: #ffffff;
}
#create-board-modal .cbm-pv-face.m1 { background: #334155; }
#create-board-modal .cbm-pv-face.m2 { background: #db2777; }
#create-board-modal .cbm-pv-face.m3 { background: #0284c7; }
#create-board-modal .cbm-pv-face.g { background: #ffffff; border: 1.5px dashed #64748b; color: #64748b; }
#create-board-modal .cbm-pv-face.g i { font-size: 7px; }
#create-board-modal .cbm-pv-name {
  max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 500; color: #0f172a;
}
#create-board-modal .cbm-pv-face.g + .cbm-pv-name { color: #64748b; }
#create-board-modal .cbm-pv-lane {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; height: 16px;
  border-radius: 4px; overflow: hidden; background: rgba(15, 23, 42, 0.1);
}
#create-board-modal .cbm-pv-lane i { display: block; }
#create-board-modal .cbm-pv-scan {
  position: absolute; top: -3px; bottom: -3px; width: calc(100% / 12 + 2px);
  border: 2px solid #f59e0b; border-radius: 4px; background: rgba(251, 191, 36, 0.28);
}
#create-board-modal .cbm-pv-board--book { align-items: start; }
#create-board-modal .cbm-pv-board--book .cbm-pv-people { padding-top: 15px; }
#create-board-modal .cbm-pv-bp { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#create-board-modal .cbm-pv-bp-h { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
#create-board-modal .cbm-pv-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#create-board-modal .cbm-pv-slot {
  padding: 3px 0; border: 1.5px solid #7c3aed; border-radius: 5px; background: #ffffff;
  font-size: 9.5px; font-weight: 600; text-align: center; color: #6d28d9;
}
#create-board-modal .cbm-pv-slot.on { background: #7c3aed; color: #ffffff; }
body.dark-mode #create-board-modal .cbm-choice-preview { background: #0f2422; color: #94a3b8; }
body.dark-mode #create-board-modal .cbm-pv--group { background: #172554; }
body.dark-mode #create-board-modal .cbm-pv--shared-days { background: #2a1f08; }
body.dark-mode #create-board-modal .cbm-pv--booking { background: #221a3d; }
body.dark-mode #create-board-modal .cbm-pv-name { color: #f1f5f9; }
body.dark-mode #create-board-modal .cbm-pv-face.g { background: #1e293b; border-color: #94a3b8; color: #94a3b8; }
body.dark-mode #create-board-modal .cbm-pv-face.g + .cbm-pv-name { color: #94a3b8; }
body.dark-mode #create-board-modal .cbm-pv-lane { background: rgba(0, 0, 0, 0.35); }
body.dark-mode #create-board-modal .cbm-pv-slot { background: #0f172a; color: #c4b5fd; }
body.dark-mode #create-board-modal .cbm-pv-slot.on { background: #7c3aed; color: #ffffff; }
#create-board-modal .modal-body.cbm-body { padding: 20px; }
@media (max-width: 640px) {
  #create-board-modal .modal-body.cbm-body { padding: 20px 16px 24px; }
  #create-board-modal .cbm-chooser { gap: 12px; }
  #create-board-modal .cbm-choice { gap: 10px; padding: 16px 14px 16px 16px; }
  #create-board-modal .cbm-choice-icon { width: 44px; height: 44px; font-size: 18px; }
  #create-board-modal .cbm-choice-text { gap: 4px; }
  #create-board-modal .cbm-choice-head { gap: 5px; }
  #create-board-modal .cbm-choice-title { font-size: 0.875rem; }
  #create-board-modal .cbm-choice-who { padding: 0 5px; margin-top: 1px; }
}

/* THE CHOOSER, EACH CARD SAYS WHAT YOU END UP WITH (owner-approved mock,
   2026-10-12). Two facts sit in the same place on every card, so the eye can
   compare across: who joins, and how long it lasts. The meeting's picture is
   the booked ticket it ends in (.fr-ticket, css/sky-moment.css); shared days
   shows its guest link and that link's expiry. Plain colours only, no
   color-mix(): the owner's iOS 15.6 phone paints none. */
/* Each box as wide as its words (owner 2026-10-27: "I preferred the previous
   widths we had for these kind of boxes"): the half-card grid broke "Members
   + guests" and "Ends after the meeting" over two lines on a phone with
   larger text. Both share a row when they fit; the second drops below when
   they do not. */
#create-board-modal .cbm-choice-facts {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px;
}
#create-board-modal .cbm-choice-facts > .cbm-choice-who,
#create-board-modal .cbm-choice-facts > .cbm-choice-lasts {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 6px 8px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #334155;
  font-size: 0.75rem; font-weight: 600; line-height: 1.3; white-space: normal;
}
#create-board-modal .cbm-choice-facts i { flex-shrink: 0; margin: 0; font-size: 0.75rem; color: var(--choice-accent); }
body.dark-mode #create-board-modal .cbm-choice-facts > .cbm-choice-who,
body.dark-mode #create-board-modal .cbm-choice-facts > .cbm-choice-lasts {
  background: #0f172a; border-color: #475569; color: #e2e8f0;
}
/* The chooser focuses its question on open (so no card looks chosen). The
   heading is not a control, so the global :focus-visible ring (style.css,
   !important) is not drawn on it; Tab moves on to the cards, which keep theirs. */
#create-board-modal #cbm-title:focus,
#create-board-modal #cbm-title:focus-visible { outline: none !important; }
#create-board-modal .cbm-pv-face.m4 { background: #7c3aed; }
#create-board-modal .cbm-pv--meeting { padding-top: 14px; }
#create-board-modal .cbm-pv-ticket {
  position: relative; display: flex; flex-direction: column; border: 1px solid #e6ebf1; border-radius: 14px;
  background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px rgba(15, 23, 42, 0.08);
}
#create-board-modal .cbm-pv-ticket-head {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 13px 13px 0 0;
  background: #0f766e; color: #ffffff;
}
#create-board-modal .cbm-pv-ticket-tile {
  flex-shrink: 0; width: 34px; height: 38px; border-radius: 9px; background: rgba(255, 255, 255, 0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.1; text-transform: uppercase; color: #ccfbf1;
}
#create-board-modal .cbm-pv-ticket-tile b { font-size: 15px; color: #ffffff; }
#create-board-modal .cbm-pv-ticket-text { display: flex; flex-direction: column; min-width: 0; }
#create-board-modal .cbm-pv-ticket-kick { font-size: 9.5px; font-weight: 700; color: #ccfbf1; }
#create-board-modal .cbm-pv-ticket-title {
  font-size: 12.5px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#create-board-modal .cbm-pv-ticket-time { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#create-board-modal .cbm-pv-ticket-who { display: flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 10.5px; color: #475569; }
#create-board-modal .cbm-pv-ticket-who > span:last-child { margin-left: 4px; }
#create-board-modal .cbm-pv-ticket-ok {
  position: absolute; top: -8px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: #16a34a; color: #ffffff; box-shadow: 0 0 0 3px #ffffff;
}
#create-board-modal .cbm-pv-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 2px 8px;
  border: 1px dashed #f59e0b; border-radius: 999px; background: #ffffff;
  font-size: 10px; font-weight: 600; color: #92400e;
}
#create-board-modal .cbm-pv-link i { font-size: 9px; }
body.dark-mode #create-board-modal .cbm-pv-ticket { background: #1e293b; border-color: #334155; color: #f1f5f9; box-shadow: none; }
body.dark-mode #create-board-modal .cbm-pv-ticket-who { color: #cbd5e1; }
body.dark-mode #create-board-modal .cbm-pv-ticket-ok { box-shadow: 0 0 0 3px #1e293b; }
body.dark-mode #create-board-modal .cbm-pv-link { background: #1e293b; color: #fcd34d; }

/* CHOOSER A: ONE TEAL (owner 2026-10-22, canvas NUPmZJRJPUBGimU5BkbTXv board 1,
   "Approved"). Every card wears the same teal icon tile; the two facts sit in
   teal-outlined boxes (the "teal border for the text part"); the meeting's
   picture is the app's LIGHT ticket (white, teal outline, date tile), so it
   no longer outweighs the words; the guest-link pill is teal (amber is kept
   for a guest's pick); the booking slots pick like every chip (outline +
   tint). Plain colours only, no color-mix(): iOS 15.6 paints none. The
   selectors outrank css/ios15-manual.css's per-colour rules. */
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] { --choice-accent: #14b8a6; }
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-icon { background: #f0fdfa; color: #0f766e; box-shadow: inset 0 0 0 1px #ccfbf1; }
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts > .cbm-choice-who,
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts > .cbm-choice-lasts { border-color: #99f6e4; background: #f0fdfa; color: #115e59; }
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts i { color: #0f766e; }
#create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-preview { background: #fbfdfe; box-shadow: inset 0 0 0 1px #e2e8f0; }
#create-board-modal .cbm-chooser .cbm-pv-ticket { border: 2px solid #14b8a6; box-shadow: none; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-head { background: #f0fdfa; color: #0f172a; border-radius: 12px 12px 0 0; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-tile { background: #ffffff; box-shadow: inset 0 0 0 1px #99f6e4; color: #0f766e; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-tile b { color: #0f172a; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-kick { color: #0f766e; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-who { border-top: 1.5px dashed #99f6e4; }
#create-board-modal .cbm-chooser .cbm-pv-ticket-ok { background: #14b8a6; }
#create-board-modal .cbm-chooser .cbm-pv-link { border-color: #5eead4; color: #0f766e; }
/* THE BOOKING PICTURE IN COLOUR (owner 2026-10-24: "give this area a little
   more color"; it was the one grey picture beside three sky boards). The
   times you offer wear the board's working green (the scanner's edge tags),
   the visitor's pick the scanner's gold, the link's name teal. */
#create-board-modal .cbm-chooser .cbm-pv-slot { border: 1px solid #86efac; background: #dcfce7; color: #15803d; }
#create-board-modal .cbm-chooser .cbm-pv-slot.on { border: 1.5px solid #f59e0b; background: #fbbf24; color: #78350f; }
#create-board-modal .cbm-chooser .cbm-pv-bp-h { align-items: center; }
#create-board-modal .cbm-chooser .cbm-pv-bp-h > span:first-child { display: inline-flex; align-items: center; gap: 4px; color: #0f766e; }
#create-board-modal .cbm-chooser .cbm-pv-bp-h > span:last-child { padding: 1px 6px; border: 1px solid #99f6e4; border-radius: 999px; background: #f0fdfa; color: #0f766e; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-icon { background: rgba(20, 184, 166, 0.18); color: #5eead4; box-shadow: none; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts > .cbm-choice-who,
body.dark-mode #create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts > .cbm-choice-lasts { border-color: #0f766e; background: rgba(20, 184, 166, 0.10); color: #99f6e4; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-facts i { color: #5eead4; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-choice[data-board-type] .cbm-choice-preview { background: #0f172a; box-shadow: inset 0 0 0 1px #334155; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-ticket-head { background: rgba(20, 184, 166, 0.12); color: #f1f5f9; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-ticket-tile { background: #0f172a; color: #5eead4; box-shadow: inset 0 0 0 1px #0f766e; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-ticket-tile b { color: #f1f5f9; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-ticket-kick { color: #5eead4; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-link { color: #5eead4; border-color: #0f766e; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-slot { background: rgba(34, 197, 94, 0.14); border-color: #166534; color: #86efac; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-slot.on { background: #f59e0b; border-color: #fbbf24; color: #1c1917; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-bp-h > span:first-child { color: #5eead4; }
body.dark-mode #create-board-modal .cbm-chooser .cbm-pv-bp-h > span:last-child { background: rgba(20, 184, 166, 0.12); border-color: #0f766e; color: #5eead4; }

/* THE GROUP FORM IN FOUR NUMBERED SECTIONS (2026-10-12). Each section spans
   the body's two-column grid (.cbm-full) and lays out its own insides.
   Invite people and Share a link use the same heads (2026-10-17, owner:
   "use the same style as the groups creation"). */
:is(#create-board-modal, #invite-people-modal, #invite-teammate-modal) .cbm-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:is(#create-board-modal, #invite-people-modal, #invite-teammate-modal) .cbm-sec + .cbm-sec {
  margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border-color, #e2e8f0);
}
#create-board-modal .cbm-sec .form-group { margin-bottom: 0; min-width: 0; }
#create-board-modal .cbm-sec-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
:is(#create-board-modal, #invite-people-modal, #invite-teammate-modal) .cbm-sec-head {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text-primary, #1e293b);
}
:is(#create-board-modal, #invite-people-modal, #invite-teammate-modal) .cbm-sec-num {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #1e293b; color: #ffffff;
  font-size: 12px; font-weight: 700;
}
#create-board-modal .cbm-sec-note { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-name-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 641px) {
  #create-board-modal .cbm-name-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  #create-board-modal .cbm-name-row > .cbm-desc-disclosure { margin-top: 26px; }
  /* What members see: the three cards side by side, each picture under its words. */
  #create-board-modal #cbm-sec-privacy .privacy-scale {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0;
  }
  #create-board-modal #cbm-sec-privacy .privacy-scale-option { align-items: flex-start; border-radius: 14px; }
  #create-board-modal #cbm-sec-privacy .vis-preview { padding-left: 0; }
}
#create-board-modal #cbm-sec-privacy .privacy-scale.cbm-scale-locked .privacy-scale-option {
  opacity: 0.5; cursor: not-allowed;
}
#create-board-modal #cbm-sec-privacy .privacy-scale.cbm-scale-locked .privacy-scale-option.selected {
  border-color: var(--slate-200, #e2e8f0); background: var(--white, #fff); box-shadow: none;
}
/* Where times come from: two cards; synced carries the work/personal pills. */
#create-board-modal .cbm-source { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 641px) {
  #create-board-modal .cbm-source { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
#create-board-modal .cbm-source-opt {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 14px; background: var(--white, #fff); color: var(--text-primary, #1e293b); text-align: left; font: inherit;
}
button.cbm-source-opt { cursor: pointer; }
#create-board-modal .cbm-source-opt.selected {
  border-color: var(--primary-500, #14b8a6); background: var(--primary-50, #f0fdfa);
  box-shadow: 0 0 0 1px var(--primary-500, #14b8a6) inset;
}
#create-board-modal div.cbm-source-opt > .cbm-source-pick {
  display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px;
}
#create-board-modal .cbm-source-title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; }
#create-board-modal .cbm-source-title i { color: var(--primary-700, #0f766e); }
#create-board-modal .cbm-source-desc { font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-source-opt:not(.selected) #founding-category-group { display: none; }
/* What each choice looks like (review F8): a member's row, board colours. */
#create-board-modal .cbm-src-prev { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
#create-board-modal .cbm-src-row,
#create-board-modal .cbm-src-hrs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
#create-board-modal .cbm-src-cell {
  height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #450a0a;
}
#create-board-modal .cbm-src-cell.is-free { background: #76db9b; }
#create-board-modal .cbm-src-cell.is-busy { background: #e55e5e; }
#create-board-modal .cbm-src-hrs span {
  text-align: center; font-size: 10px; font-weight: 600; color: var(--text-secondary, #64748b);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#create-board-modal .cbm-src-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-src-key > span { display: inline-flex; align-items: center; gap: 5px; }
#create-board-modal .cbm-src-key i { width: 12px; height: 9px; border-radius: 3px; }
#create-board-modal .cbm-src-key .cbm-k-free { background: #76db9b; }
#create-board-modal .cbm-src-key .cbm-k-busy { background: #e55e5e; }
body.dark-mode #create-board-modal .cbm-src-hrs span,
body.dark-mode #create-board-modal .cbm-src-key { color: var(--slate-300, #cbd5e1); }
body.dark-mode #create-board-modal .cbm-source-opt { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); color: var(--slate-100, #f1f5f9); }
body.dark-mode #create-board-modal .cbm-source-opt.selected { background: var(--slate-700, #334155); }
/* Joining, folded: the summary names what is set. */
#create-board-modal .cbm-join-summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
}
#create-board-modal .cbm-join-summary::-webkit-details-marker { display: none; }
#create-board-modal .cbm-join-summary-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#create-board-modal .cbm-join-current { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-join-change {
  flex-shrink: 0; padding: 7px 14px; border: 2px solid var(--slate-200, #e2e8f0); border-radius: 10px;
  background: var(--slate-50, #f8fafc); font-size: 0.8125rem; font-weight: 600; color: var(--text-primary, #1e293b);
}
#create-board-modal .cbm-join-disclosure[open] .cbm-join-change { visibility: hidden; }
#create-board-modal .cbm-join-disclosure > .form-group { margin-top: 14px; padding-left: 34px; }
#create-board-modal .modal-footer .cbm-footer-summary {
  flex: 1; min-width: 0; margin-right: 12px; font-size: 0.75rem; color: var(--text-secondary, #64748b);
}
body.dark-mode :is(#create-board-modal, #invite-people-modal, #invite-teammate-modal) .cbm-sec-num { background: #f1f5f9; color: #0f172a; }
body.dark-mode #create-board-modal .cbm-join-change { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); color: var(--slate-100, #f1f5f9); }
@media (max-width: 640px) {
  #create-board-modal .cbm-join-disclosure > .form-group { padding-left: 0; }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
  #create-board-modal .modal-content,
  .create-board-modal .modal-content,
  .board-settings-modal .modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }
  /* EDGE TO EDGE, LIKE THE OTHER FLOWS (owner 2026-10-30, "Set a group seems
     inconsistent"): the base 95% width left 10px of board down each side,
     where Plan a meeting, Share days and Bookings fill the screen. */
  #create-board-modal .modal-content { width: 100%; }

  /* DEF-076 (2026-07-27): "create a group has no exit X".
     The X is in the markup and wired (#close-create-board-modal), but on a
     phone this rule turns the modal into a full-bleed sheet with
     min-height:100vh, while the sizing block above sets max-height:90vh +
     overflow:hidden on the SAME element. min-height wins, so the content box
     grows past the viewport, the flex column stretches, and the header —
     which is flex-shrink:0 and FIRST in the column — can be scrolled/pushed
     out of the visible area with no way back to it, because the overflow is
     owned by .modal-body rather than the page.

     Pin the header instead: cap the sheet to the true viewport (dvh where
     supported, so mobile browser chrome doesn't steal the last rows) and make
     the header sticky so the close button is reachable at every scroll
     position. */
  #create-board-modal .modal-content {
    min-height: 100dvh;
    max-height: 100dvh;
  }

  #create-board-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white, #fff);
    /* Plan a meeting's header (2026-10-30, "Set a group seems
       inconsistent"): 10px 16px, an 18px title. */
    padding: 10px 16px;
  }

  body.dark-mode #create-board-modal .modal-header {
    background: var(--slate-900, #0f172a);
  }

  /* The X is a 44px touch target; keep it from being crowded by a long
     translated title (de/vi wrap the hardest). */
  #create-board-modal .modal-header h2 {
    font-size: 18px;
    padding-right: 8px;
  }

  /* WHO CAN JOIN, one pill per row (2026-08-16, user: the options rendered as
     one run of text, "AnyoneRequestInviteLocked", and Request had bad fit).
     Two faults here: this rule was never closed — the comment below opened
     immediately after flex-direction and swallowed a duplicated copy of the
     header block above, so the parser discarded the lot — and it targeted a
     `.entry-mode-selector` CLASS that appears nowhere. The markup uses the ID
     (create-board-modal.js), so the pills kept their 4-across desktop layout
     on a phone; at ~25% of a narrow modal the longest label, "Request", which
     also carries an icon, crushed against its neighbours. */
  #entry-mode-selector {
    flex-direction: column;
  }

  #entry-mode-selector .option-pill {
    /* flex:1 divides the ROW; once stacked each pill should own the full
       width rather than shrink to its text. */
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
  }

  .availability-mode-toggle {
    flex-direction: column;
  }

  .meeting-date-row {
    flex-direction: column;
  }

  .danger-zone-actions {
    flex-direction: column;
  }
}

/* SAVE-TIME EXPORT OPT-IN (2026-09-01, owner: "export google shouldn't that be
   a confirmation action not preconfirmation, ie see confirmation dialogue,
   confirm or confirm and export depending on event type"). A quiet row
   directly above the event modal's footer, so the choice reads as part of
   COMMITTING the event rather than as another button competing with Save.
   Deliberately not styled as a CTA — it is a modifier on the save, not a
   second action. Visibility is owned by event-modal-manager.js (Google
   connected + exportable type + not already exported + auto-export off). */
.save-export-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 8px;
}
.save-export-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
}
.save-export-label input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    margin: 0;
    cursor: pointer;
}
.save-export-label i {
    color: #4285f4;   /* Google blue — matches the standalone Export button */
}
.save-export-label:hover {
    color: var(--text-primary, #0f172a);
}
body.dark-mode .save-export-label {
    color: var(--text-secondary, #94a3b8);
}
body.dark-mode .save-export-label:hover {
    color: #f1f5f9;
}

/* 2026-09-07: the global coarse-pointer floor (style.css: button, input[type=
   "checkbox"] … { min-width/height: 44px }) inflated the event modal's native
   attendee checkboxes into 44px teal squares on phones (measured 390px). Keep
   the 44px TAP surface on the label wrapper, draw the box itself at 20px. */
@media (pointer: coarse) {
    html .create-select-all-wrap,
    html .create-attendee-checkbox-wrap {
        min-height: 44px;
        align-items: center;
    }
    html .create-select-all-wrap input[type="checkbox"],
    html .create-attendee-checkbox {
        min-width: 0;
        min-height: 0;
        width: var(--checkbox-size, 18px);
        height: var(--checkbox-size, 18px);
    }
}

/* Allow booking links tick box on the create-group form (2026-09-24). */
.cbm-booking-links { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cbm-booking-links input { margin-top: 3px; width: var(--checkbox-size, 18px); height: var(--checkbox-size, 18px); flex-shrink: 0; }
.cbm-booking-links span { display: flex; flex-direction: column; gap: 2px; }
.cbm-booking-links small { color: var(--text-secondary, #64748b); font-size: 12px; line-height: 1.4; }
body.dark-mode .cbm-booking-links small { color: var(--slate-400, #94a3b8); }

/* PLAN A MEETING — "Who's coming?" (2026-09-28, js/ui/plan-meeting-modal.js).
   The people are the shared attendee picker (css/attendee-picker.css,
   2026-09-29), the same rows Propose shows. The footer says where Continue
   goes before it is pressed. */
#plan-meeting-modal .modal-content {
  max-width: 560px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#plan-meeting-modal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}
/* Back and the steps line in the header (owner 2026-10-30, "Reduce unused
   space"): Back on the left as a twin of the close button, the steps line
   under the title, one line that never wraps (it clips at 320px). */
#plan-meeting-modal .pm-head { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
#plan-meeting-modal .pm-head-back { flex-shrink: 0; }
#plan-meeting-modal .pm-head-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#plan-meeting-modal .pm-head-words h2 { margin: 0; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: clip; }
#plan-meeting-modal .pm-head .pm-steps { margin: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; gap: 5px; font-size: 12px; }
#plan-meeting-modal .pm-question {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}
/* Members / Guests: the two labelled sections (2026-09-29). */
#plan-meeting-modal .pm-section {
  padding: 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
}
#plan-meeting-modal .pm-section .form-group:last-child { margin-bottom: 0; }
#plan-meeting-modal .pm-section .form-hint { margin-bottom: 0; }
#plan-meeting-modal .pm-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}
#plan-meeting-modal .pm-section-members .pm-section-title i { color: var(--color-info, #3b82f6); }
#plan-meeting-modal .pm-section-guests .pm-section-title i { color: var(--color-warning, #f59e0b); }
body.dark-mode #plan-meeting-modal .pm-section { border-color: var(--slate-600, #475569); }
body.dark-mode #plan-meeting-modal .pm-section-title { color: var(--slate-100, #f1f5f9); }
#plan-meeting-modal .pm-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
#plan-meeting-modal .pm-route-line {
  flex: 1 1 220px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
}
#plan-meeting-modal .pm-route-line[data-route="propose"],
#plan-meeting-modal .pm-route-line[data-route="link"] {
  color: var(--text-primary, #1e293b);
}
body.dark-mode #plan-meeting-modal .pm-question,
body.dark-mode #plan-meeting-modal .pm-route-line[data-route="propose"],
body.dark-mode #plan-meeting-modal .pm-route-line[data-route="link"] {
  color: var(--slate-100, #f1f5f9);
}
body.dark-mode #plan-meeting-modal .pm-route-line {
  color: var(--slate-400, #94a3b8);
}
@media (max-width: 640px) {
  #plan-meeting-modal .modal-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100dvh;
    max-height: 100dvh;
  }
  #plan-meeting-modal .pm-footer .btn { width: 100%; }
  #plan-meeting-modal .pm-footer { padding: 12px 16px; gap: 8px; }
  /* The chooser's rhythm (2026-09-30): 16px gutter; 16px under the header
     since the steps line moved into it (2026-10-30). */
  #plan-meeting-modal .modal-body { padding: 16px 16px 20px; flex-grow: 1; }
}


/* ── Create-group inline error (2026-08-05 consistency pass) ────────────────
   Was inline `background:#3a1f1f; border:#c0392b; color:#f5c6cb` set from JS —
   dark-only literals that ignored the token system, so the same banner in
   light mode was a near-black block on a white modal. Tokenised, with a real
   light/dark pair. Carries role="alert" from the JS so it is announced. */
.cbm-inline-error {
  margin: 8px 16px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  line-height: 1.45;
  background: var(--error-light, rgba(239, 68, 68, 0.12));
  border: 1px solid var(--error, #ef4444);
  color: var(--danger-700, #b91c1c);
}

body.dark-mode .cbm-inline-error {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--error, #ef4444);
  color: var(--danger-200, #fecaca);
}

/* ============================================
   DESTINATION GROUP CHIPS (2026-10-12)
   "Invite them to" / "Add them to": one chip per group, ticked in place, in
   the Invite people window and the Add people form. The switcher chip's look
   (.board-chip above: name, count, filled teal when on) so a destination
   reads as the group it is, and never as the people pills with faces.
   ============================================ */
.dest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dest-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 14px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 999px;
  background: var(--card-bg, #fff);
  color: var(--text-primary, #1e293b);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  /* Border only. A background transition left a just-ticked chip white with
     white text while the main thread was busy (measured: the transition sat
     at 0ms for 500ms+, 2026-10-12); the fill now flips with the text. */
  transition: border-color 0.15s ease;
}

.dest-chip:hover { border-color: var(--primary-500, #14b8a6); }
.dest-chip:focus-visible { outline: 2px solid var(--primary-600, #0d9488); outline-offset: 2px; }

.dest-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dest-chip .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  font-size: 0.75rem;
}

.dest-chip-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--slate-300, #cbd5e1);
  border-radius: 50%;
  font-size: 10px;
  color: transparent;
}

.dest-chip-lock { font-size: 0.75rem; opacity: 0.7; }

.dest-chip.is-on {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}
.dest-chip.is-on .chip-count { background: rgba(255, 255, 255, 0.22); }
.dest-chip.is-on .dest-chip-tick { background: #fff; border-color: #fff; color: var(--primary-700, #0f766e); }

/* "+ New group": dashed, like the other "make a new one" doors. */
.dest-chip.dest-chip-new {
  border-style: dashed;
  border-color: var(--primary-300, #5eead4);
  background: transparent;
  color: var(--primary-700, #0f766e);
}

.dest-chip-hint { margin: 8px 0 0; }
.dest-chip-hint.is-todo { color: var(--amber-700, #b45309); }

body.dark-mode .dest-chip:not(.is-on):not(.dest-chip-new) {
  background: var(--surface-primary, #0f172a);
  color: var(--text-primary, #f1f5f9);
  border-color: var(--slate-600, #475569);
}
body.dark-mode .dest-chip:not(.is-on) .chip-count { background: rgba(255, 255, 255, 0.12); }
body.dark-mode .dest-chip.dest-chip-new { color: var(--primary-300, #5eead4); border-color: var(--primary-700, #0f766e); }
body.dark-mode .dest-chip-hint.is-todo { color: var(--amber-300, #fcd34d); }

/* "Who do people book?" swaps with the chooser (2026-10-15). */
#create-board-modal .cbm-chooser[hidden] { display: none; }

/* The same people again (2026-10-15, owner-approved host card): one quiet
   card above the footer of Plan a meeting. */
/* How do you want to settle the time? (2026-10-16). */
#plan-meeting-modal .pm-ways { display: flex; flex-direction: column; gap: 8px; }
#plan-meeting-modal .pm-way { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--border-color, #e3e9ee); background: var(--bg-primary, #fff); color: inherit; font: inherit; cursor: pointer; }
#plan-meeting-modal .pm-way.is-on { border: 2px solid var(--primary-700, #0f766e); background: rgba(20, 184, 166, 0.06); padding: 11px 13px; }
#plan-meeting-modal .pm-way-dot { flex: none; margin-top: 2px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; border: 2px solid #94a3b8; background: #fff; }
#plan-meeting-modal .pm-way.is-on .pm-way-dot { border: 6px solid var(--primary-700, #0f766e); }
#plan-meeting-modal .pm-way-words { display: flex; flex-direction: column; gap: 2px; }
/* The booking link as one line under the three ways (2026-10-25, review H4): a link, not a fourth card. */
#plan-meeting-modal .pm-book-line { margin: 4px 2px 0; font-size: 13px; color: var(--text-secondary, #475569); }
#plan-meeting-modal .pm-way.pm-way--line { display: inline; width: auto; min-height: 0; padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--primary-700, #0f766e); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#plan-meeting-modal .pm-way.pm-way--line.is-on { border: 0; background: none; padding: 0 2px; text-decoration-thickness: 2px; }
body.dark-mode #plan-meeting-modal .pm-way.pm-way--line { color: #5eead4; }
#plan-meeting-modal .pm-way-words strong { font-size: 15px; }
#plan-meeting-modal .pm-way-words span { font-size: 13px; line-height: 1.4; color: var(--text-secondary, #475569); }
#plan-meeting-modal .pm-quick { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 12px 14px; min-height: 44px; border-radius: 14px;
  border: 1px dashed var(--border-color, #cbd5e1); cursor: pointer; }
#plan-meeting-modal .pm-quick[hidden] { display: none; }
/* "Pick one of these" at the foot of the Vote card (owner 2026-10-22): the
   card's border carries on round it, a dashed line between, a switch. */
#plan-meeting-modal .pm-way.has-sub { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; padding-bottom: 13px; }
#plan-meeting-modal .pm-quick.is-sub { margin-top: -8px; align-items: center; justify-content: space-between; border: 2px solid var(--primary-700, #0f766e); border-top: 1px dashed #99d8cf;
  border-radius: 0 0 14px 14px; background: rgba(20, 184, 166, 0.06); padding: 10px 13px 12px 45px; }
#plan-meeting-modal .pm-switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px;
  background: #cbd5e1; cursor: pointer; transition: background-color .15s ease; }
#plan-meeting-modal .pm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform .15s ease; }
#plan-meeting-modal .pm-switch:checked { background: var(--primary-600, #0d9488); }
#plan-meeting-modal .pm-switch:checked::after { transform: translateX(18px); }
#plan-meeting-modal .pm-switch:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
body.dark-mode #plan-meeting-modal .pm-quick.is-sub { border-top-color: #334155; background: rgba(20, 184, 166, 0.06); }
body.dark-mode #plan-meeting-modal .pm-switch { background: #475569; }
body.dark-mode #plan-meeting-modal .pm-switch:checked { background: var(--primary-600, #0d9488); }
#plan-meeting-modal .pm-quick input:not(.pm-switch) { flex: none; width: var(--checkbox-size, 18px); height: var(--checkbox-size, 18px); margin: 2px 0 0; accent-color: var(--primary-700, #0f766e); }
#plan-meeting-modal .pm-next { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--bg-secondary, #f6f8fa); border: 1px solid var(--border-color, #e3e9ee); }
#plan-meeting-modal .pm-next:empty { display: none; }
#plan-meeting-modal .pm-next-h { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #64748b); }
#plan-meeting-modal .pm-next-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; }
#plan-meeting-modal .pm-next-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #0f172a; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
body.dark-mode #plan-meeting-modal .pm-way-dot { background: transparent; }
body.dark-mode #plan-meeting-modal .pm-next-n { background: #334155; color: #e2e8f0; }
/* How long? (2026-10-16). */
#plan-meeting-modal .pm-length-row { display: flex; flex-wrap: wrap; gap: 8px; }
#plan-meeting-modal .pm-length { min-height: 44px; }
#plan-meeting-modal .pm-again { margin: 0 20px 12px; padding: 14px 16px; border: 1px solid #cdeee8; border-radius: 16px; background: var(--bg-primary, #ffffff); display: flex; flex-direction: column; gap: 6px; }
#plan-meeting-modal .pm-again[hidden] { display: none; }
#plan-meeting-modal .pm-again-title { font-size: 15px; }
#plan-meeting-modal .pm-again-body { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary, #475569); }
#plan-meeting-modal .pm-again-plan { margin: 0; font-size: 12.5px; color: var(--text-tertiary, #64748b); }
#plan-meeting-modal .pm-again-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#plan-meeting-modal .pm-again-later { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--text-secondary, #475569); font: inherit; font-weight: 600; cursor: pointer; }
body.dark-mode #plan-meeting-modal .pm-again { background: var(--bg-secondary, #1e293b); border-color: rgba(94, 234, 212, 0.25); }

/* Plan a meeting, one question at a time (review L1): the step question in
   the header names the settle section, so its own title is for readers only. */
#plan-meeting-modal .pm-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#plan-meeting-modal [data-pm-step][hidden] { display: none !important; }

/* CORE HOURS AND TEAM DAYS OFF AT SETUP (owner 2026-10-22, canvas "Setup
   flows" board 2). The one picked look; ticks like every day row; core hours
   as AM/PM hour cells with the numbers on the lines. */
#create-board-modal .cbm-days-toggle { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 14px; background: var(--white, #fff); color: var(--text-primary, #1e293b); font: inherit; text-align: left; cursor: pointer; }
#create-board-modal .cbm-days-toggle.is-on { border-color: var(--primary-700, #0f766e); box-shadow: inset 0 0 0 1px var(--primary-700, #0f766e); background: var(--primary-50, #f0fdfa); }
#create-board-modal .cbm-days-toggle span:last-child { display: flex; flex-direction: column; gap: 2px; }
#create-board-modal .cbm-days-toggle small { font-size: 0.8rem; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-tick-box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #94a3b8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; margin-top: 1px; }
#create-board-modal [aria-checked="true"] > .cbm-tick-box { background: var(--primary-600, #0d9488); border-color: var(--primary-600, #0d9488); }
#create-board-modal .cbm-days-body { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#create-board-modal .cbm-days-ticks { display: flex; flex-wrap: wrap; gap: 6px; }
#create-board-modal .cbm-day-tick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 8px; border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 10px; background: var(--white, #fff); font: inherit; font-size: 0.85rem; font-weight: 600; color: #334155; cursor: pointer; }
#create-board-modal .cbm-day-tick.is-on { border-color: var(--primary-600, #0d9488); background: var(--primary-50, #f0fdfa); color: var(--primary-700, #0f766e); }
#create-board-modal .cbm-core { display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
#create-board-modal .cbm-core-nums { position: relative; height: 15px; margin-left: 2.2rem; }
#create-board-modal .cbm-core-nums > span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; font-weight: 600; color: var(--text-secondary, #64748b); font-variant-numeric: tabular-nums; }
#create-board-modal .cbm-core-line { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: stretch; }
#create-board-modal .cbm-core-label { display: flex; align-items: center; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary, #64748b); }
#create-board-modal .cbm-core-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-radius: 10px; overflow: hidden; background: #eef1f5; }
#create-board-modal .cbm-core-cell { min-width: 0; min-height: 40px; padding: 0; border: 0; border-right: 1px solid rgba(15, 23, 42, 0.14); background: transparent; cursor: pointer; }
#create-board-modal .cbm-core-cell:last-child { border-right: 0; }
#create-board-modal .cbm-core-cell.is-on { background: var(--level-possible, #99f6e4); }
body.dark-mode #create-board-modal .cbm-days-toggle, body.dark-mode #create-board-modal .cbm-day-tick { background: #1e293b; border-color: #475569; color: #e2e8f0; }
body.dark-mode #create-board-modal .cbm-days-toggle.is-on, body.dark-mode #create-board-modal .cbm-day-tick.is-on { background: rgba(20, 184, 166, 0.15); border-color: #14b8a6; color: #5eead4; }
body.dark-mode #create-board-modal .cbm-core-cells { background: #1e293b; }
body.dark-mode #create-board-modal .cbm-tick-box { background: #1e293b; border-color: #64748b; }