/**
 * 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;
}

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

/* Selected = solid accent fill, matching the event modal's neutral
   (non-category-keyed) chip active state (.duration-chip.active fallback). */
.option-pill.selected {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

.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);
}

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: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #fff;
}

/* 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;
}
.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);
}

/* ---- Collapsed privacy disclosure (create-group modal, 2026-08-03) --------
   The privacy scale sits behind a <details> whose summary always names the
   level in force. Two-line summary text: section title + the current level. */
.cbm-privacy-disclosure > .cbm-desc-summary {
  align-items: flex-start;
}
.cbm-privacy-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.cbm-privacy-current {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-500, #64748b);
}
body.dark-mode .cbm-privacy-current {
  color: var(--slate-400, #94a3b8);
}
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:hover,
body.dark-mode .privacy-scale-option.selected {
  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; }
}
#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 0;
  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-life {
  display: flex; align-items: center; gap: 6px; margin: 10px -12px 0; padding: 7px 12px;
  border-top: 1px solid #e2e8f0; background: #ffffff; font-size: 11px; line-height: 1.35; text-align: left;
}
#create-board-modal .cbm-pv-life > i { flex-shrink: 0; font-size: 11px; color: var(--choice-accent); }
#create-board-modal .cbm-pv-life b { font-weight: 600; color: #0f172a; }
#create-board-modal .cbm-pv-out { margin-left: auto; font-weight: 600; white-space: nowrap; color: #0f766e; }
#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,
body.dark-mode #create-board-modal .cbm-pv-life b { 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-life { background: #1e293b; border-top-color: #475569; }
body.dark-mode #create-board-modal .cbm-pv-out { color: #5eead4; }
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; }
}

/* ============================================
   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;
  }

  /* 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);
    /* Tighter than the 24px desktop padding so the title + X keep more of the
       short viewport for the form itself. */
    padding: 16px 16px 12px;
  }

  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: 20px;
    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;
}
#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%; }
  /* The chooser's rhythm (2026-09-30): 20px under the header, 16px gutter. */
  #plan-meeting-modal .modal-body { padding: 20px 16px 24px; }
}