/**
 * Column Settings Pill Styles
 * RECOVERED FROM: SESSION_RECONSTRUCTION_2026-01-26.md
 */

/* ============================================
   --tier-* DISPLAY TIER TOKENS
   ============================================
   Canonical foreground + background colours for the Results / propose /
   inspector display-tier vocabulary (excellent / good / acceptable /
   poor). Mirrors the green/amber/red traffic-light palette but uses
   darker greens than --fv-l2/l3 so the badge text and dim-bar score
   stay legible at small sizes.

   Read FairnessTier (js/shared/fairness-tier.js) for the JS-side mirror.
   docs/reference/TIME-CHOICE-CONSISTENCY-PLAN.md §C for the rationale.

   Hue family per tier:
     excellent  → emerald (darker than --fv-l2 for small-text contrast)
     good       → emerald (darker shade — same family, different stop)
     acceptable → amber (--status-tentative neighbourhood)
     poor       → red (darker than --status-busy for small-text contrast)

   Keep four tokens per slot — even where two share a hex today, so we
   can nudge one tier later without ripple. */
:root {
  --tier-excellent-fg: #059669;
  --tier-good-fg:      #047857;
  --tier-acceptable-fg: #b45309;
  --tier-poor-fg:      #b91c1c;

  --tier-excellent-bg: #d1fae5;
  --tier-good-bg:      #d1fae5;
  --tier-acceptable-bg: #fef3c7;
  --tier-poor-bg:      #fee2e2;

  /* Bar/fill colours — brighter than -fg because they paint a wider
     stripe (mini-bar fill, dim-bar fill) where contrast isn't a small-
     text concern. excellent stays #059669; good is lighter than the
     text shade for visual rhythm. */
  --tier-excellent-fill: #059669;
  --tier-good-fill:      #34d399;
  --tier-acceptable-fill: #f59e0b;
  --tier-poor-fill:      #dc2626;

  /* Pale tints — for large surfaces (question rows, hint banners). One
     stop lighter than -bg so wider areas don't overwhelm the foreground. */
  --tier-excellent-tint: #ecfdf5;
  --tier-good-tint:      #ecfdf5;
  --tier-acceptable-tint: #fffbeb;
  --tier-poor-tint:      #fef2f2;
}
body.dark-mode {
  --tier-excellent-fg: #34d399;
  --tier-good-fg:      #6ee7b7;
  --tier-acceptable-fg: #fbbf24;
  --tier-poor-fg:      #f87171;

  --tier-excellent-bg: rgba(5,150,105,0.20);
  --tier-good-bg:      rgba(52,211,153,0.20);
  --tier-acceptable-bg: rgba(245,158,11,0.20);
  --tier-poor-bg:      rgba(220,38,38,0.20);

  --tier-excellent-fill: #34d399;
  --tier-good-fill:      #6ee7b7;
  --tier-acceptable-fill: #fbbf24;
  --tier-poor-fill:      #f87171;

  --tier-excellent-tint: rgba(5,150,105,0.10);
  --tier-good-tint:      rgba(16,185,129,0.10);
  --tier-acceptable-tint: rgba(245,158,11,0.10);
  --tier-poor-tint:      rgba(220,38,38,0.10);
}

/* ============================================
   COLUMN SETTINGS PILL
   Timeline view/layout settings dropdown
   ============================================ */
.column-settings-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Undock icon - inline inside the View Mode button */
.column-undock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0 4px;
    margin-right: -6px;
    border-left: 1px solid rgba(20, 184, 166, 0.15);
    color: var(--primary-400);
    font-size: 0.625rem;
    cursor: pointer;
    transition: color var(--transition-base);
}

.column-undock-icon:hover {
    color: var(--primary-600);
}

body.dark-mode .column-undock-icon {
    border-left-color: rgba(20, 184, 166, 0.3);
    color: var(--primary-400);
}

body.dark-mode .column-undock-icon:hover {
    color: var(--primary-300);
}

/* Subtle pulse when column is docked */
.column-undock-icon.is-docked {
    color: #3b82f6;
    animation: undock-hint-pulse 3s ease-in-out infinite;
}

.column-undock-icon.is-docked:hover {
    color: #2563eb;
    animation: none;
}

body.dark-mode .column-undock-icon.is-docked {
    color: #60a5fa;
}

body.dark-mode .column-undock-icon.is-docked:hover {
    color: #93c5fd;
    animation: none;
}

@keyframes undock-hint-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Reset Criteria icon — always present in the same separated slot the
   undock icon used to occupy.
   Two states:
     • .is-default  → dimmed teal (filter is default, nothing to reset)
     • not default  → red (criteria are active; signals the analysis is
                      not the full team default and a reset is available) */
.fbt-reset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0 4px;
    margin-right: -6px;
    border-left: 1px solid rgba(20, 184, 166, 0.5);
    color: #ef4444;
    font-size: 0.625rem;
    cursor: pointer;
    transition: color var(--transition-base), opacity var(--transition-base), border-color var(--transition-base);
}
.fbt-reset-icon:hover { color: #dc2626; }
.fbt-reset-icon.is-default {
    border-left-color: rgba(20, 184, 166, 0.5);
    color: var(--primary-500);
    cursor: default;
}
.fbt-reset-icon.is-default > i { opacity: 0.5; }
.fbt-reset-icon.is-default:hover { color: var(--primary-500); }
body.dark-mode .fbt-reset-icon {
    border-left-color: rgba(20, 184, 166, 0.6);
    color: #f87171;
}
body.dark-mode .fbt-reset-icon:hover { color: #fca5a5; }
body.dark-mode .fbt-reset-icon.is-default {
    border-left-color: rgba(20, 184, 166, 0.6);
    color: var(--primary-300);
}
body.dark-mode .fbt-reset-icon.is-default:hover { color: var(--primary-300); }

.column-settings-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(6, 182, 212, 0.04) 100%);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-full);
    color: var(--primary-600);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition-base);
    height: 36px;
    white-space: nowrap;
}

.column-settings-btn:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    border-color: var(--primary-200);
    color: var(--primary-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 4px 12px rgba(20, 184, 166, 0.15);
}

.column-settings-btn:active {
}

/* Gentle attention cue on the magnifying-glass icon while no Find Times
   criteria have been applied (or after a reset). Toggled by
   refreshResetState() in js/ui/column-settings.js — mirrors the same
   `isDefault` signal that drives the reset-icon teal/red state. The button
   chrome itself stays neutral; only the icon breathes a soft teal glow.
   Stops on hover and once criteria diverge. */
#find-time-btn.is-attention .fa-magnifying-glass {
    display: inline-block;
    transform-origin: center;
    animation: find-time-attention-icon 2.2s ease-in-out infinite;
}
#find-time-btn.is-attention:hover .fa-magnifying-glass,
#find-time-btn.is-attention:focus-visible .fa-magnifying-glass {
    animation: none;
}
@keyframes find-time-attention-icon {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
/* Mobile: a more pronounced, slightly faster pulse so the Find cue actually
   catches the eye on a small screen where the icon is one of many in the row
   (user 2026-06-19: "should the magnifier animation be increased for mobile").
   Zoom only — a plain in/out throb (no rotate/wobble), per user
   2026-06-19 ("zoom in and out is enough, no twisting").
   Still suppressed under prefers-reduced-motion below. */
@media (max-width: 640px) {
    #find-time-btn.is-attention .fa-magnifying-glass {
        animation: find-time-attention-icon-mobile 1.6s ease-in-out infinite;
    }
}
@keyframes find-time-attention-icon-mobile {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
    #find-time-btn.is-attention .fa-magnifying-glass { animation: none; }
}

.column-settings-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.column-settings-btn i:first-child {
    font-size: 0.8125rem;
}

.column-settings-label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-settings-chevron {
    font-size: 0.625rem;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}

.column-settings-wrapper.active .column-settings-chevron {
    transform: rotate(180deg);
}

.column-settings-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 220px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown, 1040);
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-3);
}

.column-settings-dropdown.active {
    display: flex;
}

.column-settings-section {
    margin-bottom: var(--space-3);
}

.column-settings-section:last-child {
    margin-bottom: 0;
}

.column-settings-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.column-settings-options {
    display: flex;
    gap: var(--space-1);
}

.column-option-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.column-option-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

.column-option-btn.active {
    background: var(--primary-50);
    border-color: var(--primary-400);
    color: var(--primary-600);
}

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

.column-settings-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.column-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.column-toggle-row input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    accent-color: var(--primary-500);
    cursor: pointer;
}

.column-toggle-row:hover {
    color: var(--text-primary);
}

/* Toggle item for checkboxes in dropdown */
.column-toggle-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
}

.column-toggle-item input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    accent-color: var(--primary-500);
    cursor: pointer;
    margin: 0;
}

.column-toggle-item:hover {
    color: var(--text-primary);
}

/* Divider for dropdown sections */
.column-settings-divider {
    height: 1px;
    background: var(--border-default);
    margin: var(--space-2) 0;
}

/* 3-column grid for shading options */
.shading-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-2) !important;
}

.shading-grid .column-option-btn {
    flex-direction: column;
    padding: 8px 4px;
    font-size: 0.7rem;
    min-width: 0;
}

.shading-grid .column-option-btn i {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

/* Dark mode column settings */
body.dark-mode .column-settings-btn {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: var(--slate-600);
    color: var(--primary-300);
}

body.dark-mode .column-settings-btn:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(6, 182, 212, 0.15) 100%);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

body.dark-mode .column-settings-dropdown {
    background: var(--surface-secondary);
    border-color: var(--border-default);
}

body.dark-mode .column-option-btn {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

body.dark-mode .column-option-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

body.dark-mode .column-option-btn.active {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--primary-500);
    color: var(--primary-400);
}

/* Hide working hours overlay when toggle is off */
body.hide-working-hours .working-hours-overlay,
body.hide-working-hours .timeline-cell.working-hours::before {
    display: none !important;
}

/* Hide current time line when toggle is off */
body.hide-current-time-line .time-comparison-column,
body.hide-current-time-line .current-time-line,
body.hide-current-time-line .time-column-line,
body.hide-current-time .time-comparison-column,
body.hide-current-time .current-time-line,
body.hide-current-time .time-column-line {
    display: none !important;
}

/* ============================================
   ENHANCED TIMELINE SETTINGS
   Color modes, filters, willingness
   ============================================ */

/* Expand dropdown width for new sections */
.column-settings-dropdown {
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Color Mode Grid - 5 buttons */
.color-mode-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
}

.color-mode-grid .column-option-btn {
    flex-direction: column;
    padding: var(--space-2) var(--space-1);
    min-height: 52px;
}

.color-mode-grid .column-option-btn i {
    font-size: 1rem;
    margin-bottom: 2px;
}

.color-mode-grid .column-option-btn span {
    font-size: 0.5625rem;
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}

/* Filter Preset Grid - 3 buttons */
.filter-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
}

/* Optimize For Grid - 4 buttons (2x2) */
.optimize-for-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
}

.optimize-for-grid .column-option-btn {
    flex-direction: column;
    padding: var(--space-2);
    min-height: 52px;
    text-align: center;
}

.optimize-for-grid .column-option-btn i {
    font-size: 1rem;
    margin-bottom: 4px;
}

.optimize-for-grid .column-option-btn span {
    font-size: 0.6875rem;
    line-height: 1.2;
}

/* Near-preset toggles - smaller margin */
.near-preset-toggles {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.near-preset-toggles .column-toggle-row {
    font-size: 0.75rem;
}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */

.collapsible-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

.collapsible-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.collapsible-section-header .column-settings-section-label {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.section-summary {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-align: right;
    margin-right: var(--space-1);
}

.section-chevron {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
}

.collapsible-section-header:hover .section-chevron {
    color: var(--primary-500);
}

.collapsible-section.expanded .section-chevron {
    transform: rotate(180deg);
}

.collapsible-section-content {
    overflow: hidden;
    max-height: 300px;
    transition: max-height var(--transition-base), opacity var(--transition-base);
}

.collapsible-section-content.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ============================================
   MEMBER SELECTION GRID
   ============================================ */

.member-selection-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 150px;
    overflow-y: auto;
    padding: var(--space-1);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.member-selection-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.member-selection-item:hover {
    border-color: var(--primary-300);
}

.member-selection-item.selected {
    background: var(--primary-50);
    border-color: var(--primary-400);
}

.member-selection-item input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    accent-color: var(--primary-500);
    cursor: pointer;
}

.member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.member-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-tz {
    font-size: 0.625rem;
    color: var(--text-tertiary);
}

.member-selection-actions {
    display: flex;
    gap: var(--space-2);
}

.member-action-btn {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.member-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

/* ============================================
   WILLINGNESS SLIDERS
   ============================================ */

.willingness-slider-group {
    padding: var(--space-2);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.slider-row:last-child {
    margin-bottom: 0;
}

.slider-label {
    flex: 0 0 70px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.willingness-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--slate-200);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.willingness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.willingness-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.willingness-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-500);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.slider-value {
    flex: 0 0 32px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-600);
    text-align: right;
}

/* Meeting window display */
.meeting-window-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.meeting-window-display i {
    color: var(--primary-500);
    font-size: 0.8125rem;
}

.meeting-window-display strong {
    color: var(--primary-700);
    font-weight: 600;
}

body.dark-mode .meeting-window-display {
    background: rgba(20, 184, 166, 0.15);
}

body.dark-mode .meeting-window-display strong {
    color: var(--primary-400);
}

.flexibility-options {
    margin-top: var(--space-2);
}

.flexibility-options .column-settings-options {
    margin-top: var(--space-1);
}

/* ============================================
   LIVE PREVIEW INDICATOR
   ============================================ */

.live-preview-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

.live-preview-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.preview-quality-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.preview-quality-dot[data-quality="excellent"] {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.5);
}

.preview-quality-dot[data-quality="good"] {
    background: #65a30d;
    box-shadow: 0 0 6px rgba(101, 163, 13, 0.5);
}

.preview-quality-dot[data-quality="acceptable"] {
    background: #ca8a04;
    box-shadow: 0 0 6px rgba(202, 138, 4, 0.5);
}

.preview-quality-dot[data-quality="poor"] {
    background: #ea580c;
    box-shadow: 0 0 6px rgba(234, 88, 12, 0.5);
}

.preview-quality-dot[data-quality="bad"] {
    background: #dc2626;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.preview-quality-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.preview-message {
    flex: 1;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-align: right;
}

/* ============================================
   DARK MODE - NEW SECTIONS
   ============================================ */

body.dark-mode .member-selection-grid {
    background: var(--surface-tertiary);
}

body.dark-mode .member-selection-item {
    background: var(--surface-secondary);
    border-color: var(--border-default);
}

body.dark-mode .member-selection-item.selected {
    background: rgba(20, 184, 166, 0.15);
    border-color: var(--primary-500);
}

body.dark-mode .member-avatar {
    background: rgba(20, 184, 166, 0.2);
    color: var(--primary-400);
}

body.dark-mode .willingness-slider-group {
    background: var(--surface-tertiary);
}

body.dark-mode .willingness-slider {
    background: var(--slate-700);
}

body.dark-mode .willingness-slider::-webkit-slider-thumb {
    background: var(--primary-400);
}

body.dark-mode .slider-value {
    color: var(--primary-400);
}

body.dark-mode .live-preview-indicator {
    background: var(--surface-tertiary);
}

body.dark-mode .member-action-btn {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

body.dark-mode .member-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .column-settings-dropdown {
        width: calc(100vw - 32px);
        max-width: 320px;
        left: auto;
        right: 0;
    }

    .color-mode-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .color-mode-grid .column-option-btn {
        padding: var(--space-1);
        min-height: 48px;
    }

    .color-mode-grid .column-option-btn i {
        font-size: 0.875rem;
    }

    .member-selection-grid {
        max-height: 120px;
    }
}

/* ============================================
   VIEW MODE MODAL (Tabbed Interface)
   ============================================ */

.vm-modal-content {
    /* Sized to the content, not the screen: 440px criteria rail + 28px gap
       + the 760px results measure + padding ≈ 1280px. The previous
       96vw/1400px "near-full-screen" shell just added dead margins around
       the capped results column and read as an oversized box. Flex column
       so the header stays fixed and the panes own the scroll. */
    max-width: 1280px;
    width: 94vw;
    height: 88vh;
    /* Base .modal-content caps at max-height:90vh (style.css); restate here
       so the height above is never silently clamped. */
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

/* Tab Navigation */
.vm-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-default);
}

.vm-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vm-tab:hover {
    color: var(--primary-600);
    background: rgba(20, 184, 166, 0.05);
}

.vm-tab.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-500);
}

.vm-tab i {
    font-size: 0.8rem;
}

/* Modal Body — flexes to fill the near-full-screen shell; it (or the
   two-pane results column) owns the scroll. */
.vm-modal-body {
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================
   FIND TIMES — TWO-PANE LAYOUT (≥720px)
   --------------------------------------------
   On a wide enough modal, lay the active intent panel out as two columns:
   the criteria form in a fixed-width left rail, and the relocated results
   host (#vm-mode-results — moved into the active .vm-results-mount by
   moveResultsHostInto) in a flexible right column that scrolls on its own.
   This makes the top-ranked slot visible the instant results compute,
   instead of rendering it below the criteria stack and the fold.
   Below 720px we keep the original single-column stack (results render
   under the criteria and the Find handler scroll-into-views them). */
@media (min-width: 720px) {
    /* SPECIFICITY: the base `.vm-mode-content.active { display:block }`
       (declared later in this file, ~line 5054) ties this selector at
       (0,2,0) and wins on source order — which silently killed the whole
       two-pane layout and collapsed the modal into one giant co-scrolling
       column. The .vm-modal-body prefix keeps this rule winning. */
    .vm-modal-body .vm-mode-content.active {
        display: grid;
        /* Fixed ~440px criteria rail — wide enough that attendee rows
           (name + Invited/Essential toggle) don't wrap city-style labels,
           with a little extra breathing room; results fill the rest.
           Full-height so the results column can own its own scroll inside
           the modal shell. */
        grid-template-columns: 440px 1fr;
        column-gap: 28px;
        align-items: stretch;
        height: 100%;
        min-height: 0;
    }
    /* The criteria rail is column 1 and scrolls on its own so a tall criteria
       stack (attendees + duration + within + optimize) doesn't push the
       results down or co-scroll with them. */
    .vm-mode-content.active > .vm-criteria-rail {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
        /* room for the scrollbar so controls don't sit under it */
        padding-right: 6px;
        /* wheel momentum at the rail's end must not spill into the page */
        overscroll-behavior: contain;
    }

    /* The relocated results host (and its empty mount wrapper) occupy the
       right column, spanning from the top of the panel down. The mount is
       the last DOM child, so it auto-flows into row 1 of column 2. */
    .vm-mode-content.active > .vm-results-mount {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        min-width: 0; /* let result cards shrink instead of overflowing */
    }

    /* In two-pane mode the results get their own scroll region and lose the
       horizontal divider that only made sense when stacked below criteria.
       Fills the full panel height (near-full-screen shell) and scrolls. */
    .vm-mode-content.active > .vm-results-mount {
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .vm-mode-content.active > .vm-results-mount #vm-mode-results {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Keep the wheel inside the results pane (no chaining to the page)
           and reserve the scrollbar lane so cards don't jiggle when results
           grow past the fold. */
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding-right: 4px;
    }
    /* Cap the measure of the results content so cards/hero don't stretch
       edge-to-edge on a wide (1400px) modal — readable line length, centered
       in the column. The scroll stays on #vm-mode-results (full width). */
    .vm-mode-content.active > .vm-results-mount #vm-mode-results > .vm-results-body,
    .vm-mode-content.active > .vm-results-mount #vm-mode-results > .vm-results-empty {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Show the empty-state hint immediately in the right column on open
       (the global `.vm-results-mount:empty { display:none }` would otherwise
       collapse it before the host is relocated in). */
    .vm-mode-content.active > .vm-results-mount:empty {
        display: block;
    }
}

/* Tab Content */
.vm-tab-content {
    display: none;
}

.vm-tab-content.active {
    display: block;
}

/* Sections */
.vm-section {
    margin-bottom: 14px;
}

.vm-section:last-child {
    margin-bottom: 0;
}

.vm-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-600);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

body.dark-mode .vm-section-label {
    color: var(--slate-400);
}

/* Info tooltip (used on event filter, etc.) */
.vm-tooltip-trigger {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
}

.vm-info-icon {
    font-size: 0.65rem;
    opacity: 0.4;
    margin-left: 4px;
    transition: opacity 0.2s;
}

.vm-tooltip-trigger:hover .vm-info-icon {
    opacity: 0.8;
}

.vm-tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--slate-800, #1e293b);
    color: var(--slate-100, #f1f5f9);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    width: 220px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vm-tooltip-trigger:hover::after {
    opacity: 1;
}

body.dark-mode .vm-tooltip-trigger::after {
    background: var(--slate-200, #e2e8f0);
    color: var(--slate-800, #1e293b);
}

.vm-section-hint {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 8px;
    margin-bottom: 0;
    font-style: italic;
}

/* Option Buttons Row */
.vm-options-row {
    display: flex;
    gap: 8px;
}

.vm-option-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vm-option-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

.vm-option-btn.active {
    background: var(--primary-100);
    border-color: var(--primary-500);
    color: var(--primary-700);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

/* Toggle List */
.vm-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vm-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.vm-toggle-row:hover {
    background: var(--surface-hover);
}

.vm-toggle-row input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    accent-color: var(--primary-500);
    cursor: pointer;
}

/* View Mode Cards (Tab 2) */
.vm-view-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vm-view-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-secondary);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.vm-view-card:hover {
    border-color: var(--primary-300);
    background: rgba(20, 184, 166, 0.04);
}

.vm-view-card.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.vm-view-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.vm-view-card.active .vm-view-icon {
    background: var(--primary-500);
    color: white;
}

.vm-view-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-view-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.vm-view-desc {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.vm-view-card.active .vm-view-name {
    color: var(--primary-700);
}

/* Filter Toggles */
.vm-filter-toggles {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

/* Member Grid (Advanced Tab) - Matches propose-attendees style */
.vm-member-grid {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--slate-50);
    margin-bottom: 10px;
}

.vm-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--slate-100);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.18s ease, filter 0.18s ease, box-shadow 0.15s ease;
}

.vm-member-item:last-child {
    border-bottom: none;
}

.vm-member-item:hover {
    background: var(--slate-100);
}

/* Selected row: an unmistakable-but-calm "included" treatment so ticking a name
   reads as SELECTION at a glance without any motion, reorder, or layout-pushing
   pill. A steady accent left-rail + tinted background + a soft ring is legible
   the instant the box is ticked (the earlier faint tint alone was too subtle —
   user: "on ticking the name disappears without a visible tick or movement").
   No width-changing element is added, so nothing shifts on mobile. */
.vm-member-item.selected {
    background: var(--primary-50);
    box-shadow: inset 3px 0 0 0 var(--primary-500);
}
/* Give the checkbox itself a bold accent so the tick is the loud, obvious
   confirmation of selection (not just a system default box). */
.vm-member-item.selected .vm-member-checkbox {
    accent-color: var(--primary-500);
}

/* The "Selected" pill was REMOVED (2026-07-01, user: "the tick shows it's
   selected, we don't need the selected pill"). The ticked checkbox already
   marks selection; the pill was redundant and pushed the row content out (it
   "pushes everything out" on mobile). The original "wasn't clear they were
   selected" report was really caused by the reorder-on-tick yanking the row to
   the top before the tick read as selection — that's fixed in column-settings.js
   (no instant reorder mid-interaction), which is the real cure. No ::after. */

/* Non-selected rows: dim AND desaturate so "out of the search" reads the same
   way the scanner greys excluded columns — one consistent "not included" look
   across the member list and the timeline. */
/* Non-selected rows recede CALMLY — enough to read as "not in the search" but
   not so faint they look like they vanished when you tick the first member
   (user: ticking a name "gives the appearance of disappearance"). Softened from
   opacity 0.5 / grayscale 0.55 so the split reads as focus, not deletion. The
   opacity/filter transition is added to the base .vm-member-item rule above so
   the change settles rather than blinks. */
.vm-member-item.dimmed {
    opacity: 0.72;
    filter: grayscale(0.3);
}
.vm-member-item.dimmed:hover {
    opacity: 0.9;
    filter: grayscale(0.1);
}

/* ⭐THESE RULES WERE DEAD UNTIL 2026-09-23. They were scoped to
   `.vm-member-grid` — a class NOTHING in js/ ever adds; the grid is
   `#suggest-attendees-list.suggest-attendees-list`. So the included-row
   emphasis and the "Not in search" divider below never rendered at all.
   ⛔Do not re-prefix these with `.vm-member-grid`: that is the dead selector. */
.suggest-attendees-list.comparison-active .vm-member-item.selected {
    background: var(--primary-50);
    border-left: 3px solid var(--primary-500);
}

/* Label the split between selected and excluded rows instead of a bare dashed
   line — the divider now says what's below it.
   ⭐Driven by an EXPLICIT `.excluded-first` marker set in reorderGrid(), not by
   `:first-of-type`: that pseudo-class matches by ELEMENT type, not by class, so
   `.dimmed:first-of-type` only matched when the very FIRST row was dimmed —
   never the case once a selected row sits at the top. The marker is also only
   applied when the split is contiguous, because the per-checkbox handler
   deliberately does not reorder (2026-07-01), which can interleave the rows. */
.suggest-attendees-list.comparison-active .vm-member-item.excluded-first {
    border-top: 1px dashed var(--border-default);
    position: relative;
    margin-top: 18px;
}
.suggest-attendees-list.comparison-active .vm-member-item.excluded-first::before {
    content: "Not in search";
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 0 6px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, #94a3b8);
    background: var(--surface-primary, #fff);
}

/* Member checkbox sizing is defined once on .vm-member-checkbox-wrap input
   below (the markup always wraps the box in that label). The old
   .vm-member-item input rule was a second, conflicting size that won on
   source order in some paths — removed so there is a single source of truth. */

.vm-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

/* Both identity lines truncate with an ellipsis instead of overflowing their
   column (2026-09-23, owner: "Names not visible"). The name is the row's
   whole point, so it gets the full line; the city moved down to the meta line
   beside the UTC offset. min-width:0 on the flex parent is what actually lets
   text-overflow engage — a flex item's default min-width:auto refuses to
   shrink below its content and the ellipsis never appears. */
.vm-member-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-member-tz {
    font-size: 0.6875rem;
    color: var(--slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unified member checkbox wrap — used by both Search and Suggest panels */
.vm-member-checkbox-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.vm-member-checkbox-wrap input[type="checkbox"] {
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    accent-color: var(--primary-500);
    cursor: pointer;
    flex-shrink: 0;
}
/* Home row ("you") is a deselectable attendee like anyone else; its
   checkbox is fully interactive, so no disabled/locked styling here. */

/* Priority toggle (REQ/OPT) — hidden in Search panel via the
   #vm-mode-search rule below since priority has no meaning there. */
/* The toggle takes its natural width and NO MORE. It previously had no
   flex-shrink rule, so on a phone the three-part control (Invited + switch +
   Essential) held its full width while .vm-member-info absorbed every pixel
   of the shortfall — which is how the name ended up truncated to nothing. */
.vm-member-priority {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.vm-member-priority-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
}
.vm-member-priority-label.active[data-value="essential"] { color: #059669; }
.vm-member-priority-label.active[data-value="invited"] { color: var(--slate-500, #64748b); }

.vm-member-priority-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.vm-member-priority-switch input { opacity: 0; width: 0; height: 0; }
.vm-member-priority-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--slate-300, #cbd5e1);
    border-radius: var(--radius-xl);
    transition: 0.2s;
}
.vm-member-priority-switch input:checked + .vm-member-priority-slider {
    background-color: var(--primary-500, #14b8a6);
}
.vm-member-priority-slider::before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.2s;
}
.vm-member-priority-switch input:checked + .vm-member-priority-slider::before {
    transform: translateX(14px);
}

/* Essential/Invited priority is now shown in BOTH intents for parity — the
   Pick-manually (search) panel surfaces the same per-row toggle as Recommend,
   so attendees control is identical across intents. (Was hidden here when
   priority was deemed Recommend-only; the single-slot inspector also honors
   essential availability, so it's meaningful in manual mode too.) */

/* Dark mode parity */
body.dark-mode .vm-member-priority-slider {
    background-color: var(--slate-600, #475569);
}
body.dark-mode .vm-member-priority-switch input:checked + .vm-member-priority-slider {
    background-color: var(--primary-400, #2dd4bf);
}

/* Toggle switch wrapper (matches propose-attendees style) */
.vm-member-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vm-toggle-label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--slate-300);
    cursor: pointer;
    transition: color 0.15s, font-weight 0.15s;
    user-select: none;
}

.vm-toggle-label.active {
    color: var(--primary-600);
    font-weight: 700;
}

body.dark-mode .vm-toggle-label {
    color: var(--slate-600);
}

body.dark-mode .vm-toggle-label.active {
    color: var(--primary-400);
    font-weight: 700;
}

/* Section header row (label + controls inline) */
.vm-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vm-section-header-row .vm-section-label {
    margin-bottom: 0;
}

.vm-include-column-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.vm-column-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

body.dark-mode .vm-column-label {
    color: var(--slate-400);
}

.vm-include-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vm-include-label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
}

body.dark-mode .vm-include-label {
    color: var(--slate-500);
}

/* Switch styles (matches propose-switch) */
.vm-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.vm-switch-sm {
    width: 32px;
    height: 18px;
}

.vm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.vm-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--slate-300);
    border-radius: var(--radius-xl);
    transition: 0.2s;
}

.vm-switch input:checked + .vm-switch-slider {
    background-color: var(--primary-500);
}

.vm-switch-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.2s;
}

.vm-switch-sm .vm-switch-slider::before {
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
}

.vm-switch input:checked + .vm-switch-slider::before {
    transform: translateX(16px);
}

.vm-switch-sm input:checked + .vm-switch-slider::before {
    transform: translateX(14px);
}

body.dark-mode .vm-switch-slider {
    background-color: var(--slate-600);
}

body.dark-mode .vm-switch input:checked + .vm-switch-slider {
    background-color: var(--primary-500);
}

.vm-member-actions {
    display: flex;
    gap: 8px;
}

.vm-action-btn {
    flex: 1;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.vm-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    color: var(--primary-600);
}

/* Slider Group */
.vm-slider-group {
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.vm-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vm-slider-row:last-child {
    margin-bottom: 0;
}

.vm-slider-label {
    flex: 0 0 80px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.vm-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--slate-200);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.vm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
}

.vm-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.vm-slider-value {
    flex: 0 0 40px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-600);
    text-align: right;
}

/* Preview Indicator */
.vm-preview-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    margin-top: 16px;
}

.vm-preview-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.vm-preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vm-preview-dot[data-quality="excellent"] {
    background: #16a34a;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.5);
}

.vm-preview-dot[data-quality="good"] {
    background: #65a30d;
    box-shadow: 0 0 8px rgba(101, 163, 13, 0.5);
}

.vm-preview-dot[data-quality="acceptable"] {
    background: #ca8a04;
    box-shadow: 0 0 8px rgba(202, 138, 4, 0.5);
}

.vm-preview-dot[data-quality="poor"] {
    background: #ea580c;
    box-shadow: 0 0 8px rgba(234, 88, 12, 0.5);
}

.vm-preview-dot[data-quality="bad"] {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}

.vm-preview-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.vm-preview-msg {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-align: right;
}

/* Modal Footer - hidden since tabs have their own action buttons */
.vm-modal-footer {
    display: none;
}

.vm-modal-footer .btn {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vm-modal-footer .btn-secondary {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.vm-modal-footer .btn-secondary:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.vm-modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    border: none;
    color: white;
}

.vm-modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* Timeline Colors Row (4 buttons) */
.vm-color-row {
    flex-wrap: wrap;
    gap: 6px;
}

.vm-color-row .vm-option-btn {
    flex: 1 0 calc(50% - 3px);
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.8rem;
}

.vm-color-row .vm-option-btn i {
    font-size: 0.9rem;
}

.vm-color-row .vm-option-btn span {
    font-size: 0.75rem;
}

/* Action Section (Heatmap button) */
.vm-action-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    margin-top: 4px;
}

.vm-action-section .vm-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.vm-action-section .vm-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
    color: var(--primary-600);
}

.vm-action-section .vm-action-btn i {
    font-size: 1rem;
}

/* ============================================
   VIEW MODE MODAL - DARK MODE
   ============================================ */

body.dark-mode .vm-tabs {
    background: var(--surface-tertiary);
    border-bottom-color: var(--border-default);
}

body.dark-mode .vm-tab {
    color: var(--text-secondary);
}

body.dark-mode .vm-tab:hover {
    color: var(--primary-400);
    background: rgba(20, 184, 166, 0.1);
}

body.dark-mode .vm-tab.active {
    color: var(--primary-400);
    border-bottom-color: var(--primary-400);
}

body.dark-mode .vm-option-btn {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

body.dark-mode .vm-option-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

body.dark-mode .vm-option-btn.active {
    background: rgba(20, 184, 166, 0.3);
    border-color: var(--primary-400);
    color: var(--primary-300);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .vm-toggle-row {
    background: var(--surface-tertiary);
}

body.dark-mode .vm-toggle-row:hover {
    background: var(--surface-hover);
}

body.dark-mode .vm-view-card {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
}

body.dark-mode .vm-view-card:hover {
    border-color: var(--primary-400);
    background: rgba(20, 184, 166, 0.1);
}

body.dark-mode .vm-view-card.active {
    border-color: var(--primary-500);
    background: rgba(20, 184, 166, 0.15);
}

body.dark-mode .vm-view-icon {
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

body.dark-mode .vm-view-card.active .vm-view-icon {
    background: var(--primary-500);
    color: white;
}

body.dark-mode .vm-view-name {
    color: var(--text-primary);
}

body.dark-mode .vm-view-card.active .vm-view-name {
    color: var(--primary-400);
}

body.dark-mode .vm-member-grid {
    border-color: var(--slate-700);
    background: var(--slate-800);
}

body.dark-mode .vm-member-item {
    border-bottom-color: var(--slate-700);
}

body.dark-mode .vm-member-item:hover {
    background: var(--slate-700);
}

body.dark-mode .vm-member-item.selected {
    background: rgba(20, 184, 166, 0.15);
}
body.dark-mode .vm-member-item.selected::after {
    color: #5eead4;
    background: rgba(20, 184, 166, 0.18);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.35);
}
/* Dark-mode partner. Same two fixes as the light rule (2026-09-23): the real
   container class, and the explicit `.excluded-first` marker in place of
   `:first-of-type`, which matched by element type and so almost never hit. */
body.dark-mode .suggest-attendees-list.comparison-active .vm-member-item.excluded-first::before {
    color: var(--text-tertiary-dark, #94a3b8);
    background: var(--surface-primary-dark, #0f172a);
}

body.dark-mode .vm-member-name {
    color: var(--slate-200);
}

body.dark-mode .vm-member-tz {
    color: var(--slate-500);
}

body.dark-mode .vm-slider-group {
    background: var(--surface-tertiary);
}

body.dark-mode .vm-slider {
    background: var(--slate-700);
}

body.dark-mode .vm-slider::-webkit-slider-thumb {
    background: var(--primary-400);
}

body.dark-mode .vm-slider-value {
    color: var(--primary-400);
}

body.dark-mode .vm-preview-indicator {
    background: var(--surface-tertiary);
}

body.dark-mode .vm-action-btn {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
}

body.dark-mode .vm-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
    color: var(--primary-400);
}

body.dark-mode .vm-modal-footer {
    border-top-color: var(--border-default);
}

body.dark-mode .vm-modal-footer .btn-secondary {
    background: var(--surface-tertiary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

body.dark-mode .vm-modal-footer .btn-secondary:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* ============================================
   VIEW MODE MODAL - RESPONSIVE (phone)
   --------------------------------------------
   On a phone the Find Times modal is made to read as the SAME app as the
   Create/Propose event modal (#event-modal), per user 2026-06-19 ("can't we
   make Find Times appear more like the Propose and Create model … for mobile
   mode"). "Reveal, don't rebuild": Find Times already carries the identical
   .event-modal-tabs control (Recommend / Pick-manually) — it's just hidden on
   the desktop one-view default. On the phone we un-hide it, swap the full-bleed
   sheet for the event modal's centered rounded card, drop the in-panel
   "go back" switch links (tapping a visible pill IS the switch), and normalize
   section headings + footer. Matched to the event modal's own breakpoint
   (≤640) so the two look identical across the whole phone/small-tablet range.
   DESKTOP (≥720 two-pane) is untouched — everything here is ≤640 only.
   ============================================ */

@media (max-width: 640px) {
    /* (A) Shell: centered rounded card, not a full-bleed sheet — mirrors
       #event-modal .modal-content (style.css) so both modals share a frame
       (the .modal overlay already supplies the dim + backdrop-blur gutter). */
    .vm-modal-content {
        width: 95%;
        max-width: 760px;
        height: auto;
        max-height: 90vh;
        border-radius: var(--radius-2xl, 16px);
    }

    /* (B) Header: single unified form, so the modal title shows on mobile (the
       old two-pill tab bar that used to replace it was removed). Title left,
       close X right. */
    #view-mode-modal .vm-modal-title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }
    #view-mode-modal .vm-header-with-mode .modal-header-top {
        flex-wrap: nowrap;
        column-gap: 12px;
        align-items: center;
    }
    #view-mode-modal #close-view-mode-modal-btn { margin-left: auto; }

    /* (C) The "Pick a slot myself" row IS the manual escape hatch on mobile now
       (not a redundant go-back link), so it stays visible — JS un-hides it once
       results exist. No mobile-specific hiding. */

    /* (D) Body rhythm: collapse the two competing heading idioms to the event
       form's label look (0.8125rem / 600 / slate, no tracking) and match
       .form-group's ~16px section gap. Duration/look-ahead chips already use
       the shared .duration-chip token, so they're pixel-identical already. */
    #view-mode-modal .vm-modal-body {
        padding: 16px;
        max-height: none;
    }
    #view-mode-modal .vm-section {
        margin-bottom: var(--space-4, 16px);
    }
    #view-mode-modal .event-duration-label,
    #view-mode-modal .vm-section-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--slate-600, #475569);
        letter-spacing: 0;
        text-transform: none;
    }

    /* (E) Footer: Reset + Find times share ONE row (Find wider — it's the
       primary action), with the "Browse times myself" manual button on its own
       row below (see #vm-pick-manual-row). Replaces the old vertical stack. */
    #view-mode-modal .vm-tab-footer {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }
    #view-mode-modal .vm-tab-footer .btn {
        width: auto;
        justify-content: center;
    }
    #view-mode-modal .vm-tab-footer #vm-bt-reset-btn { flex: 1 1 0; min-width: 0; }
    #view-mode-modal .vm-tab-footer #vm-bt-find-btn  { flex: 2 1 0; min-width: 0; }
}

/* ============================================
   SHORTCUT BUTTONS (Consolidated Controls)
   Links to primary location for each setting
   ============================================ */

/* Column Settings shortcut button */
.column-shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.column-shortcut-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    border-style: solid;
    color: var(--primary-600);
}

.column-shortcut-btn .column-shortcut-label {
    font-weight: 500;
}

.column-shortcut-btn .column-shortcut-value {
    color: var(--primary-500);
    font-weight: 600;
    margin-right: var(--space-2);
}

.column-shortcut-btn i {
    font-size: 0.625rem;
    opacity: 0.6;
}

/* View Panel shortcut button */
.view-shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3);
    background: var(--surface-secondary);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-shortcut-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    border-style: solid;
}

.view-shortcut-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.view-shortcut-label i {
    color: var(--primary-500);
    font-size: 0.875rem;
}

.view-shortcut-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.view-shortcut-value {
    color: var(--primary-600);
    font-size: 0.75rem;
    font-weight: 600;
}

.view-shortcut-action i {
    color: var(--text-tertiary);
    font-size: 0.625rem;
}

.view-shortcut-btn:hover .view-shortcut-action i {
    color: var(--primary-500);
}

/* View Mode Modal shortcut button */
.vm-shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3);
    background: var(--surface-secondary);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.vm-shortcut-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-300);
    border-style: solid;
}

.vm-shortcut-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.vm-shortcut-content i {
    color: var(--primary-500);
    font-size: 0.875rem;
}

.vm-shortcut-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vm-shortcut-value {
    color: var(--primary-600);
    font-size: 0.75rem;
    font-weight: 600;
}

.vm-shortcut-hint {
    color: var(--text-tertiary);
    font-size: 0.625rem;
    max-width: 120px;
    text-align: right;
}

.vm-shortcut-action i {
    color: var(--text-tertiary);
    font-size: 0.625rem;
}

.vm-shortcut-btn:hover .vm-shortcut-action i {
    color: var(--primary-500);
}

/* Dark mode shortcut buttons */
body.dark-mode .column-shortcut-btn,
body.dark-mode .view-shortcut-btn,
body.dark-mode .vm-shortcut-btn {
    background: var(--surface-tertiary);
    border-color: var(--border-subtle);
}

body.dark-mode .column-shortcut-btn:hover,
body.dark-mode .view-shortcut-btn:hover,
body.dark-mode .vm-shortcut-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-400);
}

body.dark-mode .column-shortcut-btn .column-shortcut-value,
body.dark-mode .view-shortcut-value,
body.dark-mode .vm-shortcut-value {
    color: var(--primary-400);
}

body.dark-mode .view-shortcut-label i,
body.dark-mode .vm-shortcut-content i {
    color: var(--primary-400);
}

/* ============================================
   TOOLTIPS FOR ADVANCED OPTIONS
   ============================================ */
.toggle-tooltip-icon {
  font-size: 0.75rem;
  color: var(--text-tertiary, #94a3b8);
  margin-left: auto;
  cursor: help;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.column-toggle-row:hover .toggle-tooltip-icon {
  opacity: 1;
}

/* CSS tooltips removed - using TooltipService (js/ui/tooltip-service.js) for unified frosted glass tooltips */

/* ============================================
   RESULTS TAB STYLES - PREMIUM DESIGN
   Inspired by Fairness Dashboard & Propose Event
   ============================================ */

/* Results tab notification indicator - pulsing dot */
.event-modal-tab[data-mode="results"].has-results {
  position: relative;
}

.event-modal-tab[data-mode="results"].has-results::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-500, #14b8a6);
  box-shadow: 0 0 6px rgba(20, 184, 166, 0.6);
  animation: vm-results-pulse 2s ease-in-out infinite;
}

@keyframes vm-results-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(20, 184, 166, 0.4); }
  50% { box-shadow: 0 0 12px rgba(20, 184, 166, 0.8); }
}

body.dark-mode .event-modal-tab[data-mode="results"].has-results::after {
  background: var(--primary-400, #2dd4bf);
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.6);
}

/* ==========================================================================
   Results panel — redesigned for "deep analysis of the slot the scan bar is
   parked on". Matches the Search/Suggest panel chrome (vm-section-label,
   vm-member-item) and the canonical traffic-light palette. No bespoke
   gradients, no SVG hero rings — just clean information density.
   ========================================================================== */

.vm-results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    text-align: center;
}
.vm-results-empty i {
    font-size: 2rem;
    color: var(--primary-400);
    opacity: 0.6;
}
.vm-results-empty-headline {
    max-width: 380px;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--text-secondary, #475569);
}
body.dark-mode .vm-results-empty-headline { color: var(--text-secondary-dark, #cbd5e1); }
.vm-results-empty-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    justify-content: center;
}
/* Inline-action buttons inside sparse-results hints — look like a link,
   behave like a button (kept native so they're keyboard-focusable). */
.vm-results-inline-action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #4338ca;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.vm-results-inline-action:hover { color: #3730a3; }
body.dark-mode .vm-results-inline-action { color: #a5b4fc; }
body.dark-mode .vm-results-inline-action:hover { color: #c7d2fe; }
/* ── Ready state (Recommend opens here; no auto-rank on open) ──────────
   An inviting call to action rather than a terse hint. Larger icon, a
   headline + subline, and a prominent primary CTA that clicks the real
   Find button. */
.vm-results-ready-icon {
    font-size: 2.6rem !important;
    color: var(--primary-500, #14b8a6) !important;
    opacity: 0.85 !important;
}
.vm-results-ready-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    line-height: 1.25;
}
body.dark-mode .vm-results-ready-title { color: var(--text-primary-dark, #f1f5f9); }
.vm-results-ready-sub {
    max-width: 340px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
}
body.dark-mode .vm-results-ready-sub { color: var(--text-secondary-dark, #cbd5e1); }
.vm-results-ready-cta {
    margin-top: 8px;
    padding: 11px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.28);
}
/* The CTA icon must not inherit the giant .vm-results-empty i size. */
.vm-results-ready-cta i {
    font-size: 0.95rem !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* `display: flex` on .vm-results-empty overrides the user-agent's
   [hidden] { display: none } rule (author > UA in the cascade). The same
   applies symmetrically to .vm-results-body. Restate the rule at author
   specificity so `hidden` actually hides. */
.vm-results-empty[hidden],
.vm-results-body[hidden],
.vm-section[hidden] { display: none; }

.vm-results-body { display: block; }

/* ── Intent explainer + inline results host ──────────────────────────
   One-line description at the top of each intent (Recommend / Pick
   manually). The shared results host (#vm-mode-results) is relocated into
   the active intent's .vm-results-mount so results render inline; a top
   divider visually separates criteria from results. */
.vm-intent-explainer {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary, #475569);
}
body.dark-mode .vm-intent-explainer { color: var(--text-secondary-dark, #cbd5e1); }

/* "Try another time?" rehead — explains why the criteria form reappears below
   the results on phones (results-first reflow). Hidden by default; the ≤719px
   block reveals it (and hides the intent explainer, whose job it takes over).
   Styled as a quiet section divider, not an alarm. */
.vm-criteria-rail-rehead {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-primary, #1f2937);
}
.vm-criteria-rail-rehead i {
    font-size: 0.82rem;
    color: var(--primary-600, #0d9488);
}
body.dark-mode .vm-criteria-rail-rehead {
    color: var(--text-primary-dark, #f1f5f9);
    border-top-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .vm-criteria-rail-rehead i { color: var(--primary-300, #5eead4); }

/* Leading magnifier on the intent text — matches the toolbar Find Time
   button magnifier (#find-time-btn .fa-magnifying-glass): same teal hue
   (--primary-600) and 0.8125rem size, static (no attention pulse), per user
   2026-06-19 ("the find time modal magnifier should be the same style as
   this one … match visual style only, no animation"). */
.vm-intent-icon {
    margin-right: 7px;
    font-size: 0.8125rem;
    color: var(--primary-600);
}
body.dark-mode .vm-intent-icon { color: var(--primary-400, #2dd4bf); }

.vm-results-mount:empty { display: none; }

#vm-mode-results {
    display: block;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--slate-200, #e5e7eb);
}
/* A DIVIDER WITH NOTHING BELOW IT IS JUST A LINE (2026-09-23, owner circled an
   empty bordered strip under "Find a time"). On phones the mount is kept
   visible while empty, on purpose, so the panel doesn't jump when the first
   rank lands — but this rule then drew 18px + a rule + 18px of bordered dead
   band above nothing at all, directly under the title. The two-pane desktop
   rule already strips exactly these three properties for the same reason
   ("lose the horizontal divider that only made sense when stacked"); mobile
   never got the equivalent. Collapse the separator until there is something
   to separate. :empty is exact here — the host is either relocated in with
   content or it is genuinely empty. */
#vm-mode-results:empty {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
body.dark-mode #vm-mode-results { border-top-color: var(--slate-700, #334155); }

/* ── Recommendation engine output ────────────────────────────────────
   Block 1: top-N ranked cards (Best Times)
   Block 2: 3-card criterion grid (Best by Criteria)
   ──────────────────────────────────────────────────────────────────── */

#vm-mode-results .vm-results-section {
    margin-bottom: 20px;
}
#vm-mode-results .vm-results-section:last-child {
    margin-bottom: 0;
}
#vm-mode-results .vm-section-label {
    margin-bottom: 10px;
}
/* Carries the search receipt ("Today · 6 attendees · 3h") beside the
   "Best Times" heading (2026-07-27). It was tertiary micro-text when it held
   only the range; now that it states the scope of the whole answer it reads as
   a pill — secondary to the heading, but no longer a whisper. */
#vm-mode-results .vm-section-suffix {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    background: var(--bg-subtle, #f1f5f9);
    border-radius: 999px;
    padding: 3px 10px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
body.dark-mode #vm-mode-results .vm-section-suffix {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 600px) {
    /* Let it wrap under the heading rather than squeezing the title. */
    #vm-mode-results .vm-section-suffix {
        margin-left: 0;
        white-space: normal;
    }
}

/* ── Block 1: ranked recommendation cards (Propose-modal style) ──
   Visual baseline mirrors js/ui/meeting-proposer-ui.js — generous padding,
   14px radius, 40px circular rank badge with primary teal, saturated
   level badges with light tinted backgrounds, 44px square teal action
   button. Hover only paints a border (no transform) for a settled feel. */
.vm-results-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Find Times parity (Batch 4): dim prior results during a live recompute
   instead of flashing to blank; "Updating…" badge over them. */
.vm-results-ranking-list.is-recomputing {
    opacity: 0.5;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.vm-results-ranking-list.is-recomputing::after {
    content: 'Updating…';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate-500, #6b7280);
    background: var(--surface-primary, #fff);
    border: 1px solid var(--slate-300, #e5e7eb);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body.dark-mode .vm-results-ranking-list.is-recomputing::after {
    background: var(--slate-800, #1f2937);
    color: var(--slate-300, #9ca3af);
    border-color: var(--slate-700, #334155);
}
/* Staleness is NOT in-flight compute: the selection changed and the podium no
   longer matches it. Dim gently to signal "out of date" but keep it
   interactive (the "refresh to re-rank" hint above explains it) and show no
   "Updating…" badge — nothing is updating until the user/refresh acts. */
.vm-results-ranking-list.is-stale {
    opacity: 0.6;
    transition: opacity 0.12s ease;
}

/* Honest "top N of M" footer when the cap hid viable slots. */
.vm-results-count-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--slate-300, #e5e7eb);
    font-size: 0.72rem;
    color: var(--slate-500, #94a3b8);
    text-align: center;
}
body.dark-mode .vm-results-count-footer {
    border-top-color: var(--slate-700, #334155);
}

.vm-results-ranked-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--card-bg-secondary, #f9fafb);
    border: 1.5px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.vm-results-ranked-card:hover {
    background: var(--hover-bg, #f3f4f6);
    border-color: var(--primary-200, #99f6e4);
}
body.dark-mode .vm-results-ranked-card {
    background: rgba(255,255,255,0.04);
    border-color: transparent;
}
body.dark-mode .vm-results-ranked-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(20,184,166,0.4);
}

.vm-results-rank-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    background: var(--primary-500, #14b8a6);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20,184,166,0.25);
}
.vm-results-rank-badge.rank-1 {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #78350f;
    box-shadow: 0 2px 8px rgba(245,158,11,0.30);
}
.vm-results-rank-badge.rank-2 {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(148,163,184,0.25);
}
.vm-results-rank-badge.rank-3 {
    background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
    color: #7c2d12;
    box-shadow: 0 2px 6px rgba(234,88,12,0.25);
}
.vm-results-rank-badge.rank-other {
    background: var(--slate-200, #e2e8f0);
    color: var(--slate-700, #334155);
    box-shadow: none;
}
body.dark-mode .vm-results-rank-badge.rank-other {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary-dark, #f1f5f9);
}

.vm-results-ranked-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-results-ranked-time {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    line-height: 1.25;
    /* Time + level badge (+ fallback pill) ride one wrapping row. */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Dated chip on an alternative card (2026-08-17, owner: "perhaps have the date
   for the alternatives also with a yellow border like above"). Borrows the
   verdict header's tied/amber tone so the date reads as the same class of fact
   in both places. Only rendered when the scan spans more than one day - on a
   single-day scan every card shares the date and the chip would be noise.

   Amber here is a NEUTRAL highlight, not a warning: it marks "which day", the
   axis the user is choosing along. It carries no verdict, which is why quality
   stays with the level badge beside it. */
.vm-results-ranked-date {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1.5px solid #fde68a;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
body.dark-mode .vm-results-ranked-date {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}
.vm-results-ranked-why {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.35;
}
body.dark-mode .vm-results-ranked-time { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-ranked-why  { color: var(--text-secondary-dark, #cbd5e1); }
/* How this option differs from the pick (2026-09-23): the line a reader
   compares on, so it sits above the why-line in the primary teal voice. */
.vm-results-ranked-vs {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-700, #0f766e);
    overflow-wrap: anywhere;
}
body.dark-mode .vm-results-ranked-vs { color: var(--primary-300, #5eead4); }

.vm-results-pills {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
/* Pill + local-hour stacked, so the receipt is readable without hover */
.vm-results-pill-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 28px;
}
.vm-results-pill-hour {
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}
.vm-results-pill-group[data-status="sleeping"] .vm-results-pill-hour {
    color: #7c3aed; /* STATUS_PRESENTATION sleeping */
    font-weight: 600;
}
.vm-results-pill-group[data-status="before-work"] .vm-results-pill-hour,
.vm-results-pill-group[data-status="after-work"] .vm-results-pill-hour {
    color: #b45309;
    font-weight: 600;
}
/* One day-off status, two strengths (2026-09-29): the time-off orange the
   day-off block paints (--status-away-scan), soft and Guarded / leave alike. */
.vm-results-pill-group[data-status^="day-off"] .vm-results-pill-hour {
    color: var(--status-away-scan, #d97706);
    font-weight: 600;
}
body.dark-mode .vm-results-pill-hour { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-pill-group[data-status="sleeping"] .vm-results-pill-hour { color: #a78bfa; }
body.dark-mode .vm-results-pill-group[data-status="before-work"] .vm-results-pill-hour,
body.dark-mode .vm-results-pill-group[data-status="after-work"] .vm-results-pill-hour { color: #fbbf24; }
body.dark-mode .vm-results-pill-group[data-status^="day-off"] .vm-results-pill-hour { color: var(--status-away-scan-dark, #ea580c); }
.vm-results-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    border: 2px solid white;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    position: relative;
}
body.dark-mode .vm-results-pill { border-color: rgba(15,23,42,0.6); }
.vm-results-pill[data-status="working"]    { /* fully solid, no fade */ }
.vm-results-pill[data-status="before-work"],
.vm-results-pill[data-status="after-work"],
.vm-results-pill[data-status="day-off"] { opacity: 0.85; }
.vm-results-pill[data-status="day-off-guarded"],
.vm-results-pill[data-status="day-off-leave"] { opacity: 0.55; }
.vm-results-pill[data-status="sleeping"]   { opacity: 0.4; filter: grayscale(0.4); }
.vm-results-pill[data-status="unavailable"]{ opacity: 0.55; }
/* Tiny status dot in bottom-right of each pill */
.vm-results-pill::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid white;
}
body.dark-mode .vm-results-pill::after { border-color: rgba(15,23,42,0.6); }
.vm-results-pill[data-status="working"]::after    { background: #22c55e; }
.vm-results-pill[data-status="before-work"]::after,
.vm-results-pill[data-status="after-work"]::after { background: #f59e0b; }
.vm-results-pill[data-status^="day-off"]::after { background: var(--status-away-scan, #d97706); }
body.dark-mode .vm-results-pill[data-status^="day-off"]::after { background: var(--status-away-scan-dark, #ea580c); }
.vm-results-pill[data-status="sleeping"]::after   { background: #94a3b8; }
.vm-results-pill[data-status="unavailable"]::after{ background: #ef4444; }
.vm-results-pill-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: var(--slate-100, #f1f5f9);
    border-radius: 14px;
    margin-left: 2px;
}
body.dark-mode .vm-results-pill-overflow {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary-dark, #cbd5e1);
}

.vm-results-ranked-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.vm-results-level-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Traffic-light palette — two greens (deep + light), amber, red.
   Same hue family carries within-tier ranking: deep green = take this,
   light green = solid, amber = real trade-off, red = significant cost.
   Honest about poor slots because the historic-fairness model offsets
   over time — a red today doesn't mean a broken product, it means
   "this slot has cost; look closely before you take it."
   Used wherever a score has a tone: hero score-value, mini-bar fill +
   score, runner-up edge accent, inspector dim bars, level badge. */
/* Level badge — reads --tier-* tokens so light + dark mode both
   resolve through the same selector. Dark-mode rules deleted (the
   :root + body.dark-mode token block above already switches the values). */
.vm-results-level-badge[data-level="excellent"] { background: var(--tier-excellent-bg); color: var(--tier-excellent-fg); }
.vm-results-level-badge[data-level="good"]      { background: var(--tier-good-bg);      color: var(--tier-good-fg); }
.vm-results-level-badge[data-level="acceptable"]{ background: var(--tier-acceptable-bg); color: var(--tier-acceptable-fg); }
.vm-results-level-badge[data-level="poor"]      { background: var(--tier-poor-bg);      color: var(--tier-poor-fg); }

/* Shift hint — coaching line that names a meaningfully better same-day
   neighbour. Clickable: jumps the scan bar + re-inspects. Emerald to
   read as "this would be even better" without competing with the
   level/tone palette. */
.vm-results-shift-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid rgba(5,150,105,0.20);
    border-radius: 999px;
    white-space: normal;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.vm-results-shift-hint:hover {
    background: #d1fae5;
    border-color: rgba(5,150,105,0.40);
}
.vm-results-shift-hint i { font-size: 0.6875rem; opacity: 0.85; }
body.dark-mode .vm-results-shift-hint {
    background: rgba(16,185,129,0.12);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.30);
}
body.dark-mode .vm-results-shift-hint:hover {
    background: rgba(16,185,129,0.20);
    border-color: rgba(16,185,129,0.45);
}

/* Rotation chip — only shown when the engine used the rotation
   tiebreaker to lift this slot over a near-tied alternative. Indigo
   to distinguish it from level/tone badges; pairs with fa-rotate icon
   so the meaning ("this slot wins on history") is visible at a glance. */
.vm-results-rotation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 9px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4338ca;
    background: #eef2ff;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-results-rotation-chip i { font-size: 0.6875rem; opacity: 0.8; }
body.dark-mode .vm-results-rotation-chip {
    background: rgba(99,102,241,0.20);
    color: #a5b4fc;
}

.vm-results-card-schedule {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--primary-500, #14b8a6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(20,184,166,0.20);
}
.vm-results-card-schedule i { font-size: 1rem; }
.vm-results-card-schedule:hover {
    background: var(--primary-600, #0d9488);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20,184,166,0.30);
}
.vm-results-card-schedule:active { transform: translateY(0); }
body.dark-mode .vm-results-card-schedule {
    background: var(--primary-500, #14b8a6);
    box-shadow: 0 2px 8px rgba(20,184,166,0.30);
}
body.dark-mode .vm-results-card-schedule:hover {
    background: var(--primary-400, #2dd4bf);
    box-shadow: 0 4px 14px rgba(20,184,166,0.40);
}

/* ── Block 2: Best by Criteria — per-axis groups ──
   Three columns (one per axis: Most Fair / Most Available / Business
   Hours), each containing a small ranked list of top-N candidates by
   that axis. Compact rows so the panel doesn't sprawl. Click a row to
   jump the scan bar there. A trophy flag marks rows that overlap with
   the composite Best Times list. */
.vm-results-criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 720px) {
    .vm-results-criteria-grid { grid-template-columns: 1fr; }
}

.vm-results-axis-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 8px;
    background: var(--card-bg-secondary, #f9fafb);
    border: 1px solid transparent;
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vm-results-axis-group:hover {
    border-color: var(--primary-200, #99f6e4);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.05);
}
body.dark-mode .vm-results-axis-group {
    background: rgba(255,255,255,0.04);
}
body.dark-mode .vm-results-axis-group:hover {
    border-color: rgba(20,184,166,0.40);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.08);
}

.vm-results-axis-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #6b7280);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.vm-results-axis-header i {
    color: var(--primary-500, #14b8a6);
    font-size: 0.8125rem;
}
body.dark-mode .vm-results-axis-header {
    border-bottom-color: rgba(255,255,255,0.06);
}

.vm-results-axis-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vm-results-axis-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    font-size: 0.8125rem;
}
.vm-results-axis-row:hover {
    background: var(--hover-bg, #f3f4f6);
}
body.dark-mode .vm-results-axis-row:hover {
    background: rgba(255,255,255,0.05);
}
.vm-results-axis-row.is-leader {
    background: rgba(20,184,166,0.06);
}
.vm-results-axis-row.is-leader:hover {
    background: rgba(20,184,166,0.10);
}
body.dark-mode .vm-results-axis-row.is-leader {
    background: rgba(20,184,166,0.10);
}
body.dark-mode .vm-results-axis-row.is-leader:hover {
    background: rgba(20,184,166,0.15);
}

.vm-results-axis-time {
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #1f2937);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-results-axis-row.is-leader .vm-results-axis-time {
    font-weight: 600;
}
body.dark-mode .vm-results-axis-time {
    color: var(--text-primary-dark, #f1f5f9);
}

.vm-results-axis-score {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary-600, #0d9488);
    font-variant-numeric: tabular-nums;
}
.vm-results-axis-row.is-leader .vm-results-axis-score {
    font-size: 0.9375rem;
}
body.dark-mode .vm-results-axis-score {
    color: var(--primary-400, #2dd4bf);
}

.vm-results-axis-flag {
    flex-shrink: 0;
    color: #f59e0b;
    font-size: 0.6875rem;
    line-height: 1;
}
.vm-results-axis-flag i { font-size: 0.6875rem; }

/* ── Footer — secondary actions (Heatmap) ── */
.vm-results-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border-default, #e5e7eb);
}
body.dark-mode .vm-results-footer {
    border-top-color: rgba(255,255,255,0.08);
}
.vm-results-footer .btn-sm {
    font-size: 0.8125rem;
}

/* Slot header — date/time range + quality pill */
.vm-results-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-soft, #f9fafb);
    border: 1px solid var(--slate-100, #f1f5f9);
    border-radius: 10px;
    margin-bottom: 16px;
}
.vm-results-slot-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.vm-results-quality-pill {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}
.vm-results-quality-pill[data-quality="excellent"] { background: rgba(34,197,94,0.15);  color: #15803d; }
.vm-results-quality-pill[data-quality="good"]      { background: rgba(132,204,22,0.15); color: #4d7c0f; }
.vm-results-quality-pill[data-quality="acceptable"]{ background: rgba(245,158,11,0.15); color: #b45309; }
.vm-results-quality-pill[data-quality="poor"]      { background: rgba(249,115,22,0.15); color: #c2410c; }
.vm-results-quality-pill[data-quality="bad"]       { background: rgba(220,38,38,0.15);  color: #b91c1c; }

body.dark-mode .vm-results-slot-header {
    background: var(--surface-soft-dark, rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .vm-results-slot-time { color: var(--text-primary-dark, #f1f5f9); }

/* vm-results-section spacing — uses existing vm-section-label inside. */
#vm-mode-results .vm-results-section {
    margin-bottom: 20px;
}
#vm-mode-results .vm-results-section:last-child {
    margin-bottom: 0;
}
#vm-mode-results .vm-section-label {
    margin-bottom: 8px;
}
.vm-section-suffix {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}

/* Per-attendee row — reuses .vm-member-item but the priority slot becomes
   a status pill. */
.vm-results-attendees .vm-results-attendee-row {
    cursor: default;
}
.vm-results-attendees .vm-results-attendee-row:hover {
    background: transparent;
}
.vm-results-status-pill {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.vm-results-status-pill[data-status="working"]    { background: rgba(34,197,94,0.15);  color: #15803d; }
.vm-results-status-pill[data-status="before-work"]{ background: rgba(245,158,11,0.15); color: #b45309; }
.vm-results-status-pill[data-status="after-work"] { background: rgba(245,158,11,0.15); color: #b45309; }
.vm-results-status-pill[data-status="sleeping"]   { background: rgba(100,116,139,0.18); color: #475569; }
.vm-results-status-pill[data-status="unavailable"]{ background: rgba(220,38,38,0.15);  color: #b91c1c; }

.vm-results-overnight {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-size: 0.6875rem;
    color: var(--slate-500, #64748b);
    opacity: 0.8;
}
body.dark-mode .vm-results-overnight { color: #94a3b8; }

body.dark-mode .vm-results-status-pill[data-status="working"]    { background: rgba(34,197,94,0.22);  color: #86efac; }
body.dark-mode .vm-results-status-pill[data-status="before-work"]{ background: rgba(245,158,11,0.22); color: #fbbf24; }
body.dark-mode .vm-results-status-pill[data-status="after-work"] { background: rgba(245,158,11,0.22); color: #fbbf24; }
body.dark-mode .vm-results-status-pill[data-status="sleeping"]   { background: rgba(148,163,184,0.18); color: #cbd5e1; }
body.dark-mode .vm-results-status-pill[data-status="unavailable"]{ background: rgba(248,113,113,0.22); color: #fca5a5; }

/* Fairness summary — number + word, no ring. */
.vm-results-fairness-score {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}
.vm-section-suffix[data-status="excellent"] .vm-results-fairness-score,
.vm-section-suffix[data-status="good"] .vm-results-fairness-score      { color: #15803d; }
.vm-section-suffix[data-status="fair"] .vm-results-fairness-score      { color: #b45309; }
.vm-section-suffix[data-status="poor"] .vm-results-fairness-score      { color: #b91c1c; }

/* Per-person impact bars */
.vm-results-fairness-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-results-impact-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: center;
}
.vm-results-impact-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vm-results-impact-track {
    height: 6px;
    background: var(--slate-100, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}
.vm-results-impact-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
body.dark-mode .vm-results-impact-track {
    background: rgba(255,255,255,0.06);
}

/* Time breakdown — single inline row, dot separators. */
.vm-results-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 14px;
    background: var(--surface-soft, #f9fafb);
    border: 1px solid var(--slate-100, #f1f5f9);
    border-radius: 10px;
    font-size: 0.8125rem;
}
.vm-results-stats-row .vm-results-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-secondary);
}
.vm-results-stats-row .vm-results-stat-label {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.vm-results-stats-row .vm-results-stat-value {
    color: var(--text-primary);
    font-weight: 600;
}
.vm-results-stats-row .vm-results-stat.has-problem .vm-results-stat-value {
    color: #b91c1c;
}
body.dark-mode .vm-results-stats-row {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .vm-results-stats-row .vm-results-stat.has-problem .vm-results-stat-value {
    color: #fca5a5;
}

/* Footer — single primary "Schedule this slot" button. */
#vm-mode-results .vm-tab-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-100, #f1f5f9);
    display: flex;
    justify-content: flex-end;
}
body.dark-mode #vm-mode-results .vm-tab-footer {
    border-top-color: rgba(255,255,255,0.08);
}

/* Results quick actions row */
.vm-results-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
  /* When two labelled buttons can't share a narrow row, wrap to a second row
     instead of squeezing each into a deformed sliver. */
  flex-wrap: wrap;
}

.vm-results-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  padding: 8px 12px;
  /* .btn is overflow:hidden; keep the label on one line so it's never clipped
     mid-word into a lopsided box. */
  white-space: nowrap;
}

/* Stats grid for time breakdown */
.vm-results-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.vm-results-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--bg-secondary, var(--surface-secondary, #f8fafc));
  border-radius: var(--radius-lg);
  text-align: center;
}

.vm-results-stat i {
  font-size: 0.875rem;
  color: var(--primary-500);
}

.vm-results-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.vm-results-stat-label {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vm-results-stat.has-warning .vm-results-stat-value {
  color: var(--warning, #f59e0b);
}

body.dark-mode .vm-results-stat {
  background: var(--bg-tertiary, var(--surface-tertiary));
}

/* Attendees list within results */
.vm-attendees-list-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
}

/* Section label count pills (Team Members, Attendee Status, etc.) */
.vm-members-count,
.vm-results-available-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-600, #0d9488);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(20, 184, 166, 0.18));
  border-radius: var(--radius-full, 999px);
  letter-spacing: 0.01em;
}

body.dark-mode .vm-members-count,
body.dark-mode .vm-results-available-count {
  color: #5eead4;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(13, 148, 136, 0.25));
}

/* ============================================
   RESULTS TAB - BEST TIMES RANKING
   ============================================ */

/* Empty state placeholder */
.vm-results-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  text-align: center;
}

.vm-results-empty-state i {
  font-size: 1.5rem;
  opacity: 0.5;
}

/* Ranking list container */
.vm-results-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* ── Legacy Find Best Times inline renderer (.vm-bt-results) ──
   Removed 2026-05-15. The Results tab is the canonical answer
   surface; the legacy renderer + its scoped card/popover CSS
   (~570 lines across .vm-bt-results .vm-results-ranked-time and
   .vm-ranked-pill / .vm-ranked-popover families) were deleted in
   the same commit. If you're tempted to reintroduce inline cards
   on the Recommend tab, talk to Results first — there shouldn't
   be two surfaces telling the same story. */

/* ============================================
   RESULTS TAB - CRITERIA ALTERNATIVES GRID
   ============================================ */

.vm-results-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.vm-results-criteria-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--surface-secondary, #f8fafc);
  border: 1.5px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vm-results-criteria-card:hover {
  border-color: var(--primary-400, #2dd4bf);
  background: var(--surface-hover, #f1f5f9);
}

.vm-results-criteria-card i {
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.vm-results-criteria-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-primary);
}

.vm-results-criteria-time {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary-600, #0d9488);
}

body.dark-mode .vm-results-criteria-card {
  background: var(--surface-tertiary, #1e293b);
  border-color: var(--border-subtle, #334155);
}

body.dark-mode .vm-results-criteria-card:hover {
  border-color: var(--primary-400);
  background: var(--slate-700);
}

body.dark-mode .vm-results-criteria-time {
  color: var(--primary-400, #2dd4bf);
}

/* Results mode content animation */
#vm-mode-results {
  animation: vmResultsFadeIn 0.3s ease;
}

/* Results Tab Container */
#vm-tab-results {
  animation: vmResultsFadeIn 0.3s ease;
}

@keyframes vmResultsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Results Hero Header */
.vm-results-hero {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.vm-results-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.vm-results-hero-content {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.vm-results-hero-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.vm-results-hero-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.vm-results-hero-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.2);
  stroke-width: 8;
}

.vm-results-hero-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease-out;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}

.vm-results-hero-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.vm-results-hero-info {
  flex: 1;
  color: #fff;
}

.vm-results-hero-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.vm-results-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.vm-results-hero-status i {
  font-size: 0.75rem;
}

/* Results Section */
.vm-results-section {
  margin-bottom: 14px;
}

.vm-results-section:last-child {
  margin-bottom: 0;
}

/* Section Labels - Enhanced */
.vm-results-section .vm-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.vm-results-section .vm-section-label i {
  font-size: 0.8125rem;
  color: var(--primary-500);
}

/* Results Card - Premium styling */
.vm-results-card {
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid var(--border-color, rgba(0,0,0,0.04));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vm-results-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.08);
}

body.dark-mode .vm-results-card {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.1);
}

/* Availability Summary - Enhanced */
.vm-results-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vm-results-score-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vm-results-score-value {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.vm-results-score-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Quality Badge - Polished pill design */
.vm-results-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.vm-results-quality-badge i {
  font-size: 0.75rem;
}

.vm-results-quality-badge span {
  line-height: 1;
}

.vm-results-quality-badge[data-quality="excellent"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
  color: #059669;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.vm-results-quality-badge[data-quality="good"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.1) 100%);
  color: #2563eb;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.vm-results-quality-badge[data-quality="acceptable"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
  color: #d97706;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.vm-results-quality-badge[data-quality="poor"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.1) 100%);
  color: #dc2626;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

body.dark-mode .vm-results-quality-badge[data-quality="excellent"] {
  color: #34d399;
}

body.dark-mode .vm-results-quality-badge[data-quality="good"] {
  color: #60a5fa;
}

body.dark-mode .vm-results-quality-badge[data-quality="acceptable"] {
  color: #fbbf24;
}

body.dark-mode .vm-results-quality-badge[data-quality="poor"] {
  color: #f87171;
}

/* Unavailable list */
.vm-results-unavailable {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vm-results-unavailable:empty {
  display: none;
}

.vm-unavailable-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  color: var(--text-secondary);
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.vm-unavailable-item i {
  color: #ef4444;
  font-size: 0.6875rem;
}

body.dark-mode .vm-unavailable-item {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.2);
}

body.dark-mode .vm-unavailable-item i {
  color: #f87171;
}

/* ============================================
   ATTENDEES SECTION - Propose Event Inspired
   ============================================ */
.vm-attendees-section {
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color, rgba(0,0,0,0.06));
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}

body.dark-mode .vm-attendees-section {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.1);
}

.vm-attendees-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
  background: var(--bg-secondary, var(--slate-50));
}

body.dark-mode .vm-attendees-header {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(148, 163, 184, 0.1);
}

.vm-attendees-header .vm-section-label {
  margin-bottom: 0;
}

.vm-attendees-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vm-attendees-summary .vm-results-score-value {
  font-size: 1rem;
  font-weight: 700;
}

.vm-attendees-summary .vm-results-quality-badge {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Attendees List */
.vm-attendees-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 12px 0;
}

.vm-attendees-list::-webkit-scrollbar {
  width: 6px;
}

.vm-attendees-list::-webkit-scrollbar-track {
  background: transparent;
}

.vm-attendees-list::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
}

body.dark-mode .vm-attendees-list::-webkit-scrollbar-thumb {
  background: var(--slate-600);
}

/* Attendee Card */
.vm-attendee-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  transition: background 0.15s ease;
}

.vm-attendee-card:hover {
  background: var(--slate-50);
}

body.dark-mode .vm-attendee-card:hover {
  background: rgba(148, 163, 184, 0.08);
}

/* Avatar */
.vm-attendee-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Avatar color palette */
.vm-attendee-avatar.color-0 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.vm-attendee-avatar.color-1 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.vm-attendee-avatar.color-2 { background: linear-gradient(135deg, #f97316, #ea580c); }
.vm-attendee-avatar.color-3 { background: linear-gradient(135deg, #ec4899, #db2777); }
.vm-attendee-avatar.color-4 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.vm-attendee-avatar.color-5 { background: linear-gradient(135deg, #22c55e, #16a34a); }
.vm-attendee-avatar.color-6 { background: linear-gradient(135deg, #eab308, #ca8a04); }
.vm-attendee-avatar.color-7 { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* Home indicator for "You" */
.vm-attendee-avatar.is-home::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-attendee-avatar {
  position: relative;
}

/* Attendee Info */
.vm-attendee-info {
  flex: 1;
  min-width: 0;
}

.vm-attendee-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.vm-attendee-name .home-icon {
  font-size: 0.6875rem;
  color: var(--primary-500);
}

.vm-attendee-tz {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Status Badge */
.vm-attendee-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.vm-attendee-status i {
  font-size: 0.625rem;
}

/* Status variants */
.vm-attendee-status[data-status="available"] {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

/* Attendee-status chips — canonical palette aligned with the strip.
   working green, before-work amber (warming up), after-work terracotta
   (winding down), sleeping lavender, unavailable red. */
.vm-attendee-status[data-status="working"] {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.vm-attendee-status[data-status="before-work"] {
  background: rgba(251, 191, 36, 0.14);
  color: #d97706;
}

.vm-attendee-status[data-status="after-work"] {
  background: rgba(180, 120, 90, 0.16);
  color: #92583e;
}

.vm-attendee-status[data-status="sleeping"] {
  background: rgba(167, 139, 250, 0.14);
  color: #7c6ad8;
}

.vm-attendee-status[data-status="unavailable"] {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

body.dark-mode .vm-attendee-status[data-status="available"],
body.dark-mode .vm-attendee-status[data-status="working"] {
  color: #4ade80;
}

body.dark-mode .vm-attendee-status[data-status="before-work"] {
  color: #fbbf24;
}

body.dark-mode .vm-attendee-status[data-status="after-work"] {
  color: #d4a890;
}

body.dark-mode .vm-attendee-status[data-status="sleeping"] {
  color: #a78bfa;
}

body.dark-mode .vm-attendee-status[data-status="unavailable"] {
  color: #f87171;
}

/* Status icons */
.vm-attendee-status[data-status="available"] i::before,
.vm-attendee-status[data-status="working"] i::before { content: "\f00c"; }
.vm-attendee-status[data-status="before-work"] i::before { content: "\f017"; }
.vm-attendee-status[data-status="after-work"] i::before { content: "\f186"; }
.vm-attendee-status[data-status="sleeping"] i::before { content: "\f236"; }
.vm-attendee-status[data-status="unavailable"] i::before { content: "\f00d"; }

/* Attendees Footer */
.vm-attendees-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
  text-align: center;
}

body.dark-mode .vm-attendees-footer {
  border-color: rgba(148, 163, 184, 0.1);
}

.vm-attendees-status {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Empty state */
.vm-attendees-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

/* Fairness Impact - Enhanced */
.vm-fairness-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.vm-fairness-score-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.vm-fairness-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.vm-fairness-ring-bg {
  fill: none;
  stroke: var(--slate-200);
  stroke-width: 6;
}

body.dark-mode .vm-fairness-ring-bg {
  stroke: var(--slate-700);
}

.vm-fairness-ring-fill {
  fill: none;
  stroke: url(#fairnessGradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease-out;
  filter: drop-shadow(0 0 4px rgba(20, 184, 166, 0.3));
}

.vm-fairness-ring-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Fairness Badge - Polished */
.vm-fairness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.vm-fairness-badge[data-status="excellent"] {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.12) 0%, rgba(91, 33, 182, 0.08) 100%);
  color: #4c1d95;
}

.vm-fairness-badge[data-status="good"] {
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.12) 0%, rgba(109, 40, 217, 0.08) 100%);
  color: #5b21b6;
}

.vm-fairness-badge[data-status="fair"] {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.12) 0%, rgba(124, 58, 237, 0.08) 100%);
  color: #6d28d9;
}

.vm-fairness-badge[data-status="poor"] {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: #7c3aed;
}

body.dark-mode .vm-fairness-badge[data-status="excellent"] { color: #7c3aed; }
body.dark-mode .vm-fairness-badge[data-status="good"] { color: #8b5cf6; }
body.dark-mode .vm-fairness-badge[data-status="fair"] { color: #a78bfa; }
body.dark-mode .vm-fairness-badge[data-status="poor"] { color: #c4b5fd; }

/* Fairness Bars - Enhanced */
.vm-fairness-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vm-fairness-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vm-fairness-bar-name {
  width: 70px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.vm-fairness-bar-track {
  flex: 1;
  height: 6px;
  background: var(--slate-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

body.dark-mode .vm-fairness-bar-track {
  background: var(--slate-700);
}

.vm-fairness-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
}

.vm-fairness-bar-fill.warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.vm-fairness-bar-fill.danger {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.vm-fairness-bar-impact {
  width: 45px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Time Breakdown - Premium Cards */
.vm-time-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.vm-time-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--bg-secondary, var(--slate-50));
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color, transparent);
  transition: all 0.2s ease;
}

.vm-time-stat:hover {
  background: var(--slate-100);
  border-color: var(--primary-200);
}

body.dark-mode .vm-time-stat {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(148, 163, 184, 0.1);
}

body.dark-mode .vm-time-stat:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--primary-500);
}

.vm-time-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  color: #fff;
}

.vm-time-stat-icon.overlap {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.vm-time-stat-icon.warning {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.vm-time-stat-icon.conflict {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.vm-time-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.vm-time-stat-label {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-top: 2px;
}

/* Best Alternative Suggestion */
.vm-time-best-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.06) 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.vm-time-best-alt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.vm-time-best-alt-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.vm-time-best-alt-text strong {
  color: #059669;
  font-weight: 600;
}

body.dark-mode .vm-time-best-alt-text strong {
  color: #34d399;
}

/* Results Actions - Premium Button Styling */
.vm-action-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.vm-results-actions {
  display: flex;
  gap: 8px;
}

.vm-results-actions .vm-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-secondary, var(--slate-50));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.vm-results-actions .vm-action-btn i {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.vm-results-actions .vm-action-btn span {
  line-height: 1;
}

.vm-results-actions .vm-action-btn:hover {
  background: var(--slate-100);
  border-color: var(--primary-300);
  color: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Primary action - Schedule */
.vm-results-actions .vm-action-primary {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(6, 182, 212, 0.06) 100%);
  border-color: var(--primary-200);
  color: var(--primary-700);
}

.vm-results-actions .vm-action-primary:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18) 0%, rgba(6, 182, 212, 0.12) 100%);
  border-color: var(--primary-400);
  color: var(--primary-700);
  box-shadow: 0 2px 12px rgba(20, 184, 166, 0.15);
}

/* Dark mode action buttons */
body.dark-mode .vm-results-actions .vm-action-btn {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.15);
  color: var(--slate-300);
}

body.dark-mode .vm-results-actions .vm-action-btn:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--primary-500);
  color: var(--primary-400);
}

body.dark-mode .vm-results-actions .vm-action-primary {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.3);
  color: var(--primary-400);
}

body.dark-mode .vm-results-actions .vm-action-primary:hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: var(--primary-400);
}

/* View Dropdown Link Button */
.view-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-dropdown-link:hover {
  background: var(--surface-hover);
  border-color: var(--primary-400);
  color: var(--primary-600);
}

.view-dropdown-link i:last-child {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.5;
}

body.dark-mode .view-dropdown-link:hover {
  color: var(--primary-400);
}

/* Theme and Density buttons */
.theme-btn i,
.density-btn i {
  font-size: 0.85rem;
}

/* ============================================
   FIND TIME BUTTON
   ============================================ */
.find-time-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-lg);
  color: #3b82f6;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-base);
  height: 44px;
  white-space: nowrap;
}

.find-time-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(99, 102, 241, 0.14) 100%);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.find-time-btn i {
  font-size: 0.9rem;
}

body.dark-mode .find-time-btn {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

body.dark-mode .find-time-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(99, 102, 241, 0.18) 100%);
  border-color: rgba(59, 130, 246, 0.6);
}

/* ============================================
   DISPLAY DROPDOWN STYLES
   ============================================ */
.display-format-grid,
.display-colors-grid {
  display: flex;
  gap: var(--space-2);
}

.display-time-btn,
.display-colors-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.display-time-btn:hover,
.display-colors-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.display-time-btn.active,
.display-colors-btn.active {
  background: var(--primary-50);
  border-color: var(--primary-400);
  color: var(--primary-600);
}

body.dark-mode .display-time-btn.active,
body.dark-mode .display-colors-btn.active {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-500);
  color: var(--primary-400);
}

.display-options-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.display-option-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) 0;
}

.display-option-row:hover {
  color: var(--text-primary);
}

.display-option-row input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--primary-500);
  cursor: pointer;
}

/* ============================================
   SIMPLIFIED PILL BUTTONS (Find Time Modal)
   Consistent with app's pill/toggle design
   ============================================ */
.vm-pill-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.vm-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.vm-pill:hover {
  background: var(--surface-hover);
  border-color: var(--primary-300);
  color: var(--text-primary);
}

.vm-pill.active {
  background: var(--primary-50);
  border-color: var(--primary-500);
  color: var(--primary-700);
}

.vm-pill i {
  font-size: 0.7rem;
  opacity: 0.8;
}

.vm-pill.active i {
  opacity: 1;
}

/* ── Segmented variant (matches Propose modal's event-modal-tabs)
   When .vm-pill-row has .vm-pill-segmented, the row becomes a single
   slate-tinted track and the pills become flush-fitting tab buttons.
   The active tab is a white "lifted" card with a soft shadow — same
   visual language as the Search/Recommend/Results tab strip and the
   Propose modal's Create/Propose toggle. */
.vm-pill-row.vm-pill-segmented {
  background: var(--slate-100, #f1f5f9);
  border-radius: var(--radius-lg, 12px);
  padding: 3px;
  gap: 2px;
}
.vm-pill-row.vm-pill-segmented .vm-pill {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--slate-500, #64748b);
  border-radius: var(--radius-md, 8px);
  padding: 7px 12px;
  font-weight: 500;
  justify-content: center;
  box-shadow: none;
}
.vm-pill-row.vm-pill-segmented .vm-pill:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--slate-700, #334155);
  border-color: transparent;
}
.vm-pill-row.vm-pill-segmented .vm-pill.active {
  background: white;
  color: var(--primary-600, #0d9488);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: none;
}

/* Per-preset accent on the segmented active tab — preserves the
   Work-blue / Personal-purple semantics from the standalone pill style,
   layered on top of the white card via colored text + a subtle tint
   underneath. Subtler than the standalone gradient but still readable
   as "this is the work filter, not the all filter." */
.vm-pill-row.vm-pill-segmented .vm-pill[data-filter-preset="work"].active {
  color: #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, rgba(59, 130, 246, 0.04) 100%);
}
.vm-pill-row.vm-pill-segmented .vm-pill[data-filter-preset="personal"].active {
  color: #7c3aed;
  background: linear-gradient(180deg, #ffffff 0%, rgba(139, 92, 246, 0.04) 100%);
}

body.dark-mode .vm-pill-row.vm-pill-segmented {
  background: var(--slate-800, #1e293b);
}
body.dark-mode .vm-pill-row.vm-pill-segmented .vm-pill {
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vm-pill-row.vm-pill-segmented .vm-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--slate-200, #e2e8f0);
}
body.dark-mode .vm-pill-row.vm-pill-segmented .vm-pill.active {
  background: var(--slate-700, #334155);
  color: var(--primary-300, #5eead4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body.dark-mode .vm-pill-row.vm-pill-segmented .vm-pill[data-filter-preset="work"].active {
  color: #93c5fd;
  background: var(--slate-700, #334155);
}
body.dark-mode .vm-pill-row.vm-pill-segmented .vm-pill[data-filter-preset="personal"].active {
  color: #c4b5fd;
  background: var(--slate-700, #334155);
}

/* ── Quiet variant — for refinements (e.g. the event filter) that are not
   the panel's headline question. Lays the label and pills on one row so the
   control reads as a small inline choice rather than a major section, and
   strips the icon-heavy treatment. Pairs with .vm-section-inline (layout)
   and .vm-section-label-quiet (lighter label). */
.vm-section.vm-section-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}
.vm-section-label.vm-section-label-quiet {
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
body.dark-mode .vm-section-label.vm-section-label-quiet {
  color: var(--slate-400);
}
.vm-pill-row.vm-pill-quiet {
  gap: 4px;
  flex-wrap: nowrap;
}
.vm-pill-row.vm-pill-quiet .vm-pill {
  padding: 3px 10px;
  font-size: 0.7rem;
}
/* Keep the Work-blue / Personal-purple semantics on the quiet active pill,
   carried over from the segmented variant so the filter still reads as
   "work" vs "personal" at a glance. */
.vm-pill-row.vm-pill-quiet .vm-pill[data-filter-preset="work"].active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #2563eb;
  color: #2563eb;
}
.vm-pill-row.vm-pill-quiet .vm-pill[data-filter-preset="personal"].active {
  background: rgba(139, 92, 246, 0.1);
  border-color: #7c3aed;
  color: #7c3aed;
}
body.dark-mode .vm-pill-row.vm-pill-quiet .vm-pill[data-filter-preset="work"].active {
  background: rgba(59, 130, 246, 0.18);
  border-color: #3b82f6;
  color: #93c5fd;
}
body.dark-mode .vm-pill-row.vm-pill-quiet .vm-pill[data-filter-preset="personal"].active {
  background: rgba(139, 92, 246, 0.18);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

/* ============================================
   TOGGLE GROUPS (Scanner Options)
   Vertical list of checkbox toggles
   ============================================ */
.vm-toggle-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vm-toggle-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 6px 0;
  transition: color var(--transition-fast);
}

.vm-toggle-inline:hover {
  color: var(--text-primary);
}

.vm-toggle-inline input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--primary-500);
  cursor: pointer;
  flex-shrink: 0;
}

.vm-toggle-inline input[type="checkbox"]:checked + span {
  color: var(--text-primary);
}

.vm-toggle-inline span {
  user-select: none;
}

/* Section label with icon */
.vm-section-label i {
  margin-right: 6px;
  opacity: 0.7;
}

/* Work filter pill - Blue (consistent with Review Center) */
.vm-pill[data-filter-preset="work"].active,
.vm-pill[data-filter="work"].active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-color: #3b82f6;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.vm-pill[data-filter-preset="work"]:not(.active):hover,
.vm-pill[data-filter="work"]:not(.active):hover {
  border-color: #3b82f6;
  color: #2563eb;
}

/* Personal filter pill - Purple (consistent with Review Center) */
.vm-pill[data-filter-preset="personal"].active,
.vm-pill[data-filter="personal"].active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-color: #8b5cf6;
  color: #7c3aed;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.vm-pill[data-filter-preset="personal"]:not(.active):hover,
.vm-pill[data-filter="personal"]:not(.active):hover {
  border-color: #8b5cf6;
  color: #7c3aed;
}

/* Small pill variant for All/None buttons */
.vm-pill-small {
  padding: 5px 10px;
  font-size: 0.75rem;
}

/* Dark mode */
body.dark-mode .vm-pill {
  background: var(--surface-tertiary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

body.dark-mode .vm-pill:hover {
  background: var(--surface-hover);
  border-color: var(--primary-400);
  color: var(--text-primary);
}

body.dark-mode .vm-pill.active {
  background: rgba(20, 184, 166, 0.2);
  border-color: var(--primary-500);
  color: var(--primary-400);
}

/* Dark mode: Work filter pill - Blue */
body.dark-mode .vm-pill[data-filter-preset="work"].active,
body.dark-mode .vm-pill[data-filter="work"].active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

body.dark-mode .vm-pill[data-filter-preset="work"]:not(.active):hover,
body.dark-mode .vm-pill[data-filter="work"]:not(.active):hover {
  border-color: #60a5fa;
  color: #60a5fa;
}

/* Dark mode: Personal filter pill - Purple */
body.dark-mode .vm-pill[data-filter-preset="personal"].active,
body.dark-mode .vm-pill[data-filter="personal"].active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #a78bfa;
  color: #a78bfa;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

body.dark-mode .vm-pill[data-filter-preset="personal"]:not(.active):hover,
body.dark-mode .vm-pill[data-filter="personal"]:not(.active):hover {
  border-color: #a78bfa;
  color: #a78bfa;
}

/* Inline toggle (checkbox + label) */
.vm-toggle-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.vm-toggle-inline:hover {
  color: var(--text-primary);
}

.vm-toggle-inline input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--primary-500);
  cursor: pointer;
}

/* ============================================
   VIEW SETTINGS DROPDOWN (View Button)
   Extends the View button with display settings
   ============================================ */

.view-settings-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.view-settings-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-dropdown, 1040);
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-3);
}

.view-settings-dropdown.active {
  display: flex;
}

body.dark-mode .view-settings-dropdown {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
}

/* ============================================
   APPEARANCE MODAL
   ============================================ */

/* Appearance button icon - teal color */
#appearance-btn i {
  color: var(--primary-500);
}

.appearance-modal-content {
  max-width: 520px;
  width: 90%;
}

.appearance-modal-body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.appearance-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.appearance-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.appearance-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.appearance-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.appearance-btn-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.appearance-btn-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

.appearance-btn-row-4 {
  grid-template-columns: repeat(4, 1fr);
}

.appearance-btn-row-5 {
  grid-template-columns: repeat(5, 1fr);
}

.appearance-btn-row-5 .appearance-btn {
  padding: 12px 6px;
  font-size: 0.75rem;
  gap: 4px;
}

.appearance-btn-row-5 .appearance-btn i {
  font-size: 1rem;
}

.appearance-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--surface-secondary);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.appearance-btn i {
  font-size: 1.1rem;
}

.appearance-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-color, var(--primary-400));
  color: var(--accent-color, var(--primary-500));
}

.appearance-btn.active {
  background: var(--accent-tint, rgba(20, 184, 166, 0.08));
  border-color: var(--accent-color, var(--primary-500));
  color: var(--accent-color, var(--primary-500));
  box-shadow: 0 0 0 1px var(--accent-tint, rgba(20, 184, 166, 0.15));
}

/* Appearance modal footer */
.appearance-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
  gap: var(--space-3);
}

.appearance-modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.appearance-modal-footer .btn-secondary {
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.appearance-modal-footer .btn-secondary:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.appearance-modal-footer .btn-primary {
  background: var(--primary-500);
  border: 1px solid var(--primary-500);
  color: white;
}

.appearance-modal-footer .btn-primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
}

body.dark-mode .appearance-modal-footer .btn-secondary {
  background: var(--surface-tertiary);
  border-color: var(--border-subtle);
}

body.dark-mode .appearance-modal-footer .btn-secondary:hover {
  background: var(--surface-hover);
}

.appearance-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.appearance-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
}

.appearance-toggle input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--accent-color, var(--primary-500));
  cursor: pointer;
}

.appearance-toggle:hover {
  color: var(--text-primary);
}

/* Dark mode adjustments */
body.dark-mode .appearance-btn {
  /* --surface-tertiary has no dark value (it stays slate-200), so the idle
     12h/24h buttons were light tiles with slate-400 text (2.08:1). */
  background: var(--surface-primary);
  border-color: var(--border-default);
}

body.dark-mode .appearance-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-color-light, var(--primary-400));
}

body.dark-mode .appearance-btn.active {
  background: var(--accent-tint-hover, rgba(20, 184, 166, 0.12));
  border-color: var(--accent-color, var(--primary-500));
  color: var(--accent-color-light, var(--primary-400));
  box-shadow: 0 0 0 1px var(--accent-tint, rgba(20, 184, 166, 0.2));
}

/* ============================================
   MODE TOGGLE IN HEADER (Search / Recommend)
   ============================================ */

/* Header layout matching Propose Event modal */
.vm-header-with-mode {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.vm-header-with-mode .modal-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
}

.vm-header-with-mode h2 {
  flex: 0 0 auto;
  margin-right: auto;
  font-size: 1rem;
}

/* Mode tabs - reuse event-modal-tabs pattern */
.vm-mode-tabs {
  flex: 1;
  min-width: 0;
}

/* One-view default: the top tab bar is hidden (Recommend is the sole default
   view). The buttons stay in the DOM, visually removed but still clickable by
   the in-panel switch links, so every mode-switch handler keeps working. */
.vm-mode-tabs-hidden {
  display: none !important;
}

/* Header title shown in place of the old tab bar. */
.vm-modal-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text-primary);
}
body.dark-mode .vm-modal-title { color: var(--text-primary-dark, #f1f5f9); }

/* In-panel mode-switch links (replace the old top tabs). A quiet, link-style
   control: it's a secondary path, not a primary action competing with the
   Find / Search button. */

/* "Pick a slot myself" escape-hatch row — a quiet "None of these work?" prompt
   + a link-style button. Shown under the results once a ranked answer exists (or
   when <2 attendees makes recommendations impossible). Centered, low-emphasis so
   it never competes with the primary action or the result cards. */
#vm-pick-manual-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}
.vm-pick-manual-prompt {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
#vm-pick-manual-row .vm-mode-switch-link {
  font-weight: 600;
}
#vm-pick-manual-row .vm-mode-switch-link .fa-arrow-right {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
#vm-pick-manual-row .vm-mode-switch-link:hover .fa-arrow-right {
  transform: translateX(2px);
}
body.dark-mode #vm-pick-manual-row {
  border-top-color: var(--border-default, rgba(255, 255, 255, 0.08));
}

/* Manual path as an EQUAL choice (always-visible). Stack the prompt over a
   real outlined button so "Browse times myself" reads as a genuine secondary
   action under the primary "Find times" — not a faint after-search fallback.
   Find stays the dominant primary (it IS the recommend action); this is the
   alternative to it, weightier than a bare text link but quieter than the
   filled primary. */
.vm-manual-row {
  /* Base #vm-pick-manual-row already sets column / border-top / padding; only
     override what the promoted button needs: stretch so it goes full-width,
     and a bit more breathing room between prompt and button. */
  align-items: stretch;
  gap: 7px;
}
.vm-manual-row .vm-pick-manual-prompt {
  text-align: center;
}
/* Coloured secondary: a soft teal tint with teal text + border from the
   start, so it reads as a real, on-brand alternative to "Find times" — not
   a neutral grey fallback. Still clearly quieter than the FILLED teal
   primary (tint vs solid), preserving the visual hierarchy. */
#vm-pick-manual-row .vm-manual-btn {
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-700, #0f766e);
  border: 1px solid var(--primary-300, #5eead4);
  border-radius: var(--radius-md, 8px);
  background: var(--primary-50, rgba(20, 184, 166, 0.08));
}
#vm-pick-manual-row .vm-manual-btn:hover {
  color: var(--primary-800, #115e59);
  border-color: var(--primary-400, #2dd4bf);
  background: var(--primary-100, rgba(20, 184, 166, 0.16));
}
body.dark-mode #vm-pick-manual-row .vm-manual-btn {
  color: var(--primary-200, #99f6e4);
  border-color: rgba(20, 184, 166, 0.40);
  background: rgba(20, 184, 166, 0.12);
}
body.dark-mode #vm-pick-manual-row .vm-manual-btn:hover {
  color: var(--primary-100, #ccfbf1);
  border-color: rgba(20, 184, 166, 0.60);
  background: rgba(20, 184, 166, 0.20);
}

/* Primary "Find times" button — when results exist but criteria changed, the
   label becomes "Update results" and this accent ring nudges the user to press
   it (the ranked podium is dimmed/stale until they do). */
#vm-bt-find-btn.vm-btn-stale {
  box-shadow: 0 0 0 2px var(--primary-200, rgba(20, 184, 166, 0.35));
  animation: vm-btn-stale-pulse 1.8s ease-in-out infinite;
}
@keyframes vm-btn-stale-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--primary-200, rgba(20, 184, 166, 0.30)); }
  50%      { box-shadow: 0 0 0 4px var(--primary-100, rgba(20, 184, 166, 0.18)); }
}
/* Disabled when fewer than 2 attendees are selected (engine can't rank). */
#vm-bt-find-btn.vm-btn-disabled,
#vm-bt-find-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #vm-bt-find-btn.vm-btn-stale { animation: none; }
}

.vm-mode-switch-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.vm-mode-switch-row-top {
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 8px;
}
.vm-mode-switch-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.vm-mode-switch-link:hover {
  color: var(--primary-600, var(--primary-500));
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}
.vm-mode-switch-link i {
  font-size: 0.78rem;
}
body.dark-mode .vm-mode-switch-link { color: var(--text-secondary-dark, #cbd5e1); }
body.dark-mode .vm-mode-switch-link:hover {
  color: var(--primary-300, #7dd3fc);
  background: rgba(255, 255, 255, 0.06);
}

/* Mode content container.
   CAUTION: `.vm-modal-body .vm-mode-content.active` (≥720px, ~line 1040)
   upgrades the active panel to the two-pane grid. Keep any rule here at
   lower specificity than that one — a same-specificity `display:block`
   after it is what silently flattened the two-pane layout. */
.vm-mode-content {
  display: none;
}

.vm-mode-content.active {
  display: block;
}

/* ============================================
   RESULTS-FIRST on phones (≤719px)
   --------------------------------------------
   On a phone the ranked "Best Times" should be the FIRST thing the user sees,
   with the criteria form one scroll below to refine (user 2026-06-19, deferred
   from the mobile-match work: "results-first … should it be like a tab or
   what" → NOT a tab. The modal already has the Recommend / Pick-manually top
   tab bar from the mobile-match change; a second Criteria|Results tab would be
   a confusing double-tab. So we just flip the VISUAL order, leaving DOM/source
   order untouched (the tab handler, moveResultsHostInto, capture/apply, and
   the live re-rank gate all key off source order / .active and keep working).
   Applies to BOTH intents (Recommend + Pick-manually). Scoped to ≤719px so the
   handoff aligns exactly with the ≥720px two-pane grid — no mismatch band.
   ============================================ */
@media (max-width: 719px) {
  .vm-mode-content.active {
    display: flex;
    flex-direction: column;
  }
  /* Once a ranked answer exists, put Best Times on top with the criteria one
     scroll below to refine. BEFORE the first search there are no results, so
     keep the CRITERIA on top — otherwise the big empty-state placeholder sits
     above the form and pushes the inputs below the fold on open (the user has
     to scroll down to find what to fill in). The .vm-has-results class is
     toggled in updateFindButtonState() off ResultsTab.hasResults(). */
  .vm-mode-content.active.vm-has-results > .vm-results-mount { order: 0; }
  .vm-mode-content.active.vm-has-results > .vm-criteria-rail { order: 1; }
  /* No results yet: natural source order (criteria first, empty state below). */
  .vm-mode-content.active:not(.vm-has-results) > .vm-criteria-rail { order: 0; }
  .vm-mode-content.active:not(.vm-has-results) > .vm-results-mount { order: 1; }
  /* Keep the host visible on first paint so the panel doesn't jump when the
     first rank lands (mirrors the ≥720 override; the global
     `.vm-results-mount:empty{display:none}` would otherwise collapse it). */
  .vm-mode-content.active > .vm-results-mount:empty { display: block; }

  /* "Try another time?" rehead: once results exist the criteria form sits
     BELOW them (results-first reflow above), reappearing with no label — a
     confusing repeat. Reveal the rehead to frame it as the next action, and
     drop the now-redundant intent explainer. Keyed off .vm-has-results (set
     in updateFindButtonState when a ranked answer exists), so it only shows
     after a search — never on the criteria-first initial state. */
  .vm-mode-content.active.vm-has-results .vm-criteria-rail-rehead { display: flex; }
  .vm-mode-content.active.vm-has-results .vm-intent-explainer { display: none; }

  /* THE DIVIDER BELONGS BETWEEN RESULTS AND CRITERIA, NOT UNDER THE TITLE
     (2026-10-02, owner: empty gap between "Find a time" and the answer).
     The base #vm-mode-results rule draws 18px + a rule + 18px ABOVE the
     results, for when they sat below the criteria. Results-first puts them
     at the top, so that band was 37px of nothing under the header (measured
     at 390px: header bottom 153, "Best Times" 206). Its :empty escape never
     fires, because the host always holds its empty-state and body children.
     Below the results the "Try another time?" heading introduces the
     criteria, and a rule there doubled the one the results already end on
     (measured 19px apart), so only the spacing moves down. */
  .vm-mode-content.active.vm-has-results > .vm-results-mount #vm-mode-results {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .vm-mode-content.active.vm-has-results > .vm-criteria-rail {
    margin-top: 18px;
  }

  /* Sticky "#1 slot" summary: the verdict header (verb + top slot label) is
     already the first child of #vm-results-ranking-list and rebuilds on every
     re-rank, so pinning it keeps the current best slot in view while the user
     scrolls the list / down to the form. No JS needed. */
  #view-mode-modal .vm-results-verdict {
    position: sticky;
    /* Pin flush to the top of the scroll container, not to its padding edge.
       The scroller (.vm-modal-body) has 16px top padding (~line 2131); a plain
       top:0 sticks the strip 16px down, leaving a visible gap above it once
       pinned. Offset by -16px so it covers that padding band and sits flush.
       Only affects the pinned position — at rest the strip flows normally. */
    top: -16px;
    z-index: 3;
    background: var(--surface-primary, #fff);
    /* Smooth shrink when it condenses (see .is-condensed below). */
    transition: padding 0.16s ease, gap 0.16s ease, margin-bottom 0.16s ease,
                box-shadow 0.16s ease;
  }
  body.dark-mode #view-mode-modal .vm-results-verdict {
    background: var(--surface-elevated, #1e293b);
  }

  /* Condensed strip — set by setupVerdictCondense() once the verdict has been
     scrolled past. It stops competing with the list/info below for vertical
     space: collapse to a single line (verb + slot only), drop the confidence
     read + cold-start note, tighten padding, and flag it tappable ("Back to
     top"). The verb/slot keep their own font so the best slot stays legible. */
  #view-mode-modal .vm-results-verdict.is-condensed {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  }
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-decision {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    overflow: hidden;
  }
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-verb,
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-slot {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-confidence,
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-also,
  #view-mode-modal .vm-results-verdict.is-condensed .vm-results-verdict-note {
    display: none;
  }
  #view-mode-modal .vm-results-verdict.is-condensed::after {
    content: "\f077"; /* fa-chevron-up */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    flex: 0 0 auto;
    margin-left: auto;
    opacity: 0.5;
  }
  #view-mode-modal .vm-results-verdict.is-condensed:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: 2px;
  }
  .vm-results-verdict-sentinel {
    height: 0;
    /* The list is a flex column with gap: 8px, so this invisible marker
       (placed after the verdict) would add a second 8px gap. Cancel one. */
    margin: -8px 0 0;
    padding: 0;
    pointer-events: none;
  }

  /* Alternative-time carousel takes over from the vertical "Other options"
     list on phones: swiping a short strip beats scrolling a tall list, and it
     keeps the criteria form within reach below. Same runner-up data, two
     presentations — only one shows per viewport. */
  #view-mode-modal .vm-alt-carousel { display: block; }
  #view-mode-modal .vm-results-others { display: none; }
}

/* ============================================
   COLLAPSIBLE SECTIONS (Meeting Buffers etc.)
   ============================================ */
.vm-collapsible-section .vm-collapsible-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.vm-collapsible-section .vm-collapsible-toggle .vm-section-header-row {
  flex: 1;
}

.vm-collapsible-arrow {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
  margin-left: 8px;
}

.vm-collapsible-section.expanded .vm-collapsible-arrow {
  transform: rotate(180deg);
}

.vm-collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}

.vm-collapsible-section.expanded .vm-collapsible-content {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

/* The "Refine" section holds MORE than the old buffers-only collapsible (an
   event-filter row + both buffer rows), so it needs more headroom or its last
   row clips. Also strip the inner .vm-section's top margin so the filter row
   doesn't double-space against the collapsible's own margin-top. */
#vm-buffer-section.expanded .vm-collapsible-content {
  max-height: 360px;
}
#vm-refine-content .vm-section.vm-section-inline {
  margin-top: 0;
  margin-bottom: 12px;
}
#vm-refine-content .vm-buffer-controls {
  margin-top: 0;
}

/* ============================================
   SEARCH FOCUS - Timezone column dimming
   ============================================ */
.timezone-section.search-excluded {
  opacity: 0.2;
  filter: grayscale(1) brightness(0.85);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: auto;
}

.timezone-section.search-excluded:hover {
  opacity: 0.35;
  filter: grayscale(0.7) brightness(0.9);
}

.timezone-section.search-included {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Subtle left border accent on included sections */
body.search-focus-active .timezone-section.search-included {
  border-left: 3px solid var(--primary-400, #14b8a6);
}

.search-focus-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 4px 0;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  position: relative;
  z-index: 130;
}

.search-focus-divider::before,
.search-focus-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.search-focus-divider-text {
  white-space: nowrap;
}

.search-focus-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full, 999px);
  background: var(--surface-secondary, #f8fafc);
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.search-focus-reset-btn:hover {
  background: var(--surface-hover);
  border-color: var(--primary-300, #14b8a6);
  color: var(--primary-600, #0d9488);
}

.search-focus-reset-btn i {
  font-size: 0.6rem;
}

body.dark-mode .search-focus-divider {
  color: var(--text-tertiary);
}

body.dark-mode .search-focus-divider::before,
body.dark-mode .search-focus-divider::after {
  background: var(--border-subtle);
}

body.dark-mode .search-focus-reset-btn {
  background: var(--surface-tertiary, #1e293b);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

body.dark-mode .search-focus-reset-btn:hover {
  background: rgba(148, 163, 184, 0.1);
  border-color: var(--primary-400);
  color: var(--primary-400);
}

/* (The old ≤480 block that hid the tab labels + styled a dead .vm-mode-btn was
   removed — the phone now shows the full "Recommend" / "Pick manually" pills,
   see the VIEW MODE MODAL - RESPONSIVE block above.) */

/* ============================================
   BEST TIME TAB - Attendee Selection
   ============================================ */

/* Attendees toolbar with default toggle */
.vm-attendees-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vm-attendees-toolbar .vm-section-label {
  margin-bottom: 0;
}

.vm-default-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vm-toggle-option {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  cursor: pointer;
}

.vm-toggle-option.active {
  color: var(--primary-600);
  font-weight: 600;
}

/* Visual toggle switch */
.vm-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.vm-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.vm-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--slate-300);
  border-radius: 20px;
  transition: all 0.25s ease;
}

.vm-switch-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vm-switch input:checked + .vm-switch-slider {
  background: var(--primary-500);
}

.vm-switch input:checked + .vm-switch-slider::before {
  transform: translateX(16px);
}

.vm-switch:hover .vm-switch-slider {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}

body.dark-mode .vm-switch-slider {
  background: var(--slate-600);
}

body.dark-mode .vm-switch input:checked + .vm-switch-slider {
  background: var(--primary-500);
}

body.dark-mode .vm-toggle-option.active {
  color: var(--primary-400);
}

/* Attendee priority toggle container */
.vm-attendee-priority {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vm-priority-label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vm-priority-label.active {
  color: var(--primary-600);
  font-weight: 600;
}

body.dark-mode .vm-priority-label.active {
  color: var(--primary-400);
}

/* Smaller switch variant for attendee rows */
.vm-switch-sm {
  width: 28px;
  height: 16px;
}

.vm-switch-sm .vm-switch-slider::before {
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
}

.vm-switch-sm input:checked + .vm-switch-slider::before {
  transform: translateX(12px);
}

/* Override indicator - orange glow */
.vm-switch-slider.override {
  box-shadow: 0 0 0 2px var(--warning, #f59e0b);
}

/* Section hint text */
.vm-section-hint {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  margin: 8px 0 0;
  text-align: center;
  opacity: 0.8;
}

.vm-attendees-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}

.vm-attendee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vm-attendee-item:hover {
  border-color: var(--primary-300);
}

.vm-attendee-item.selected {
  background: var(--primary-50);
  border-color: var(--primary-400);
}

.vm-attendee-item input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--primary-500);
  cursor: pointer;
  flex-shrink: 0;
}

.vm-attendee-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

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

.vm-attendee-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vm-attendee-tz {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* Priority Star Toggle */
.vm-priority-star {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--slate-300);
  transition: all 0.15s ease;
  border-radius: 50%;
  flex-shrink: 0;
}

.vm-priority-star:hover {
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.vm-priority-star.essential {
  color: var(--warning, #f59e0b);
}

.vm-priority-star.essential:hover {
  color: var(--slate-400);
  background: var(--slate-100);
}

/* ============================================
   PILL GRID LAYOUT (Duration presets)
   Consistent grid with integrated custom input
   ============================================ */
.vm-pill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.vm-pill-grid .vm-pill {
  justify-content: center;
  padding: 10px 8px;
}

/* Custom duration input styled as a pill */
.vm-pill-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  grid-column: span 2;
}

.vm-pill-custom:focus-within {
  background: var(--primary-50);
  border-color: var(--primary-500);
  box-shadow: var(--focus-ring-shadow);
}

.vm-pill-custom input {
  width: 50px;
  padding: 4px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}

.vm-pill-custom input::-webkit-outer-spin-button,
.vm-pill-custom input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vm-pill-custom input:focus {
  outline: none;
}

.vm-pill-custom input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.vm-pill-custom-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.vm-pill-custom:focus-within .vm-pill-custom-unit {
  color: var(--primary-600);
}

/* When custom input has value, show active state */
.vm-pill-custom.has-value {
  background: var(--primary-50);
  border-color: var(--primary-500);
}

.vm-pill-custom.has-value .vm-pill-custom-unit {
  color: var(--primary-600);
}

/* Dark mode */
body.dark-mode .vm-pill-custom {
  background: var(--surface-tertiary, #374151);
  border-color: var(--border-subtle);
}

body.dark-mode .vm-pill-custom:focus-within {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-500);
}

body.dark-mode .vm-pill-custom input {
  color: var(--text-primary, #f3f4f6);
}

body.dark-mode .vm-pill-custom.has-value {
  background: rgba(20, 184, 166, 0.2);
  border-color: var(--primary-500);
}

/* Custom duration button (toggles custom input container) */
.vm-pill-custom-btn {
  font-style: italic;
  opacity: 0.85;
}

.vm-pill-custom-btn.active {
  opacity: 1;
  font-style: normal;
}

/* Custom duration input container */
.vm-duration-custom-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-secondary, #f8fafc);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.vm-duration-custom-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vm-duration-input {
  width: 48px;
  padding: 6px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-primary, #fff);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
}

.vm-duration-input::-webkit-outer-spin-button,
.vm-duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vm-duration-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--focus-ring-shadow);
}

.vm-duration-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-right: 8px;
}

.vm-duration-label:last-child {
  margin-right: 0;
}

/* Dark mode */
body.dark-mode .vm-duration-custom-container {
  background: var(--surface-tertiary, #374151);
  border-color: var(--border-subtle);
}

body.dark-mode .vm-duration-input {
  background: var(--surface-secondary, #1f2937);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* Responsive: stack to 3 columns on smaller screens */
@media (max-width: 400px) {
  .vm-pill-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vm-pill-custom {
    grid-column: span 3;
  }
}

/* ============================================
   VIEW MODE MODAL - COMPACT DURATION CHIPS
   Smaller sizing to match Propose modal design
   ============================================ */
#view-mode-modal .duration-chip {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
}

#view-mode-modal .duration-chips {
  gap: 6px;
}

/* "Look ahead" date-range chips share the duration-chip sizing but read as a
   different control: fully rounded (pill) with a calendar-toned active state,
   so the meeting-length row and the date-range row are not mistaken for each
   other. The two rows previously used the identical .duration-chip look. */
#view-mode-modal .within-chip {
  border-radius: 999px;
}

#view-mode-modal .within-chip.active {
  background: var(--primary-50);
  border-color: var(--primary-400);
  color: var(--primary-700);
}

body.dark-mode #view-mode-modal .within-chip.active {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-500);
  color: var(--primary-300);
}

/* Custom From/To date range — revealed only when the "Custom…" within-chip is
   active. Two labelled native date inputs side by side; wraps on narrow mobile
   so From/To stack rather than overflow the rail. */
#view-mode-modal .within-custom-range {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--primary-300, #99f6e4);
  border-radius: 10px;
  background: var(--primary-50, #f0fdfa);
}
body.dark-mode #view-mode-modal .within-custom-range {
  border-color: var(--primary-600, #0d9488);
  background: rgba(20, 184, 166, 0.08);
}
#view-mode-modal .within-custom-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
}
#view-mode-modal .within-custom-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #64748b);
}
#view-mode-modal .within-custom-input {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-primary, #0f172a);
}
body.dark-mode #view-mode-modal .within-custom-input {
  background: var(--surface-2, #1e293b);
  border-color: var(--border-color, #334155);
  color: var(--text-primary, #f1f5f9);
}

#view-mode-modal .duration-custom-container {
  margin-top: 12px;
  padding: 8px 12px;
}

#view-mode-modal .duration-input-field {
  width: 48px;
  padding: 4px 6px;
  font-size: 12px;
}

#view-mode-modal .duration-input-label {
  font-size: 11px;
}

#view-mode-modal .duration-custom-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0.3px;
}

/* Highlight custom container when it has values */
#view-mode-modal .duration-custom-container.has-value {
  background: var(--primary-50);
  border-color: var(--primary-400);
}

#view-mode-modal .duration-custom-container.has-value .duration-custom-label {
  color: var(--primary-600);
}

body.dark-mode #view-mode-modal .duration-custom-container.has-value {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-500);
}

body.dark-mode #view-mode-modal .duration-custom-container.has-value .duration-custom-label {
  color: var(--primary-400);
}

/* Closed until asked for (flow review 2026-09-24): only the "Custom" button
   shows; the hours/minutes open on tap, and stay open while a custom length
   is in use (.has-value). The button keeps the 44px touch floor. */
#view-mode-modal .duration-custom-toggle {
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-xl, 999px);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
}
#view-mode-modal .duration-custom-toggle:focus-visible {
  outline: 2px solid var(--primary-500, #14b8a6);
  outline-offset: 2px;
}
#view-mode-modal .duration-custom-container:not(.open):not(.has-value) {
  padding: 0;
  border-color: transparent;
  background: none;
}
#view-mode-modal .duration-custom-container:not(.open):not(.has-value) .duration-custom-inputs {
  display: none;
}

/* ============================================
   SCHEDULING MODE GRID (Suggest Tab)
   3-column grid of optimization mode cards
   ============================================ */
.vm-scheduling-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 360px) {
  .vm-scheduling-mode-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vm-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: var(--surface-secondary, #f8fafc);
  border: 1.5px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  gap: 3px;
}

.vm-mode-card:hover {
  border-color: var(--primary-400, #2dd4bf);
  background: var(--surface-hover, #f1f5f9);
}

.vm-mode-card.active {
  background: var(--primary-50, #f0fdfa);
  border-color: var(--primary-500, #14b8a6);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.vm-mode-card i {
  font-size: 1rem;
  color: var(--text-tertiary, #94a3b8);
  margin-bottom: 1px;
}

.vm-mode-card.active i {
  color: var(--primary-600, #0d9488);
}

.vm-mode-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.vm-mode-desc {
  font-size: 0.65rem;
  color: var(--text-tertiary, #94a3b8);
  line-height: 1.2;
}

.vm-mode-card.active .vm-mode-title {
  color: var(--primary-700, #0f766e);
}

.vm-mode-card.active .vm-mode-desc {
  color: var(--primary-600, #0d9488);
}

/* Dark mode */
body.dark-mode .vm-mode-card {
  background: var(--surface-tertiary, #374151);
  border-color: var(--border-subtle, #4b5563);
}

body.dark-mode .vm-mode-card:hover {
  border-color: var(--primary-400);
  background: var(--surface-hover);
}

body.dark-mode .vm-mode-card.active {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-500);
}

body.dark-mode .vm-mode-card i {
  color: var(--text-tertiary);
}

body.dark-mode .vm-mode-card.active i {
  color: var(--primary-400);
}

body.dark-mode .vm-mode-title {
  color: var(--text-primary);
}

body.dark-mode .vm-mode-card.active .vm-mode-title {
  color: var(--primary-300);
}

body.dark-mode .vm-mode-card.active .vm-mode-desc {
  color: var(--primary-400);
}

/* ============================================
   SUGGEST ATTENDEES SECTION
   Matching Propose modal design with checkboxes
   ============================================ */

/* Attendees section container */
.suggest-attendees-section {
  margin-bottom: 16px;
}

/* Header with label, select all, and default toggle */
.suggest-attendees-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.suggest-attendees-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.suggest-attendees-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-transform: none;
}

/* Select all checkbox */
.suggest-select-all-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.suggest-select-all-wrap input[type="checkbox"] {
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  accent-color: var(--primary-500);
  cursor: pointer;
}

.suggest-select-all-checkmark {
  display: none; /* Using native checkbox */
}

.suggest-select-all-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Default priority toggle */
.suggest-default-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggest-toggle-option {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.15s;
}

.suggest-toggle-option.active[data-value="essential"] {
  color: #059669;
  font-weight: 600;
}

.suggest-toggle-option.active[data-value="invited"] {
  color: var(--slate-500, #64748b);
  font-weight: 600;
}

/* Switch toggle */
.suggest-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.suggest-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.suggest-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--slate-300, #cbd5e1);
  border-radius: var(--radius-xl);
  transition: 0.2s;
}

.suggest-switch input:checked + .suggest-switch-slider {
  background-color: #059669;
}

.suggest-switch-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
}

.suggest-switch input:checked + .suggest-switch-slider::before {
  transform: translateX(16px);
}

/* Attendees list */
.suggest-attendees-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

/* NOTE: the per-row attendee classes (.suggest-attendee-item,
   .suggest-attendee-checkbox-wrap, -avatar, -info, -name, -tz, -priority) and
   the old .suggest-priority-switch/.suggest-priority-slider switch were dead —
   both Search and Recommend render their rows through populateFindTimesMembers()
   which emits .vm-member-item markup (styled above). Removed to keep one source
   of truth. The plural .suggest-attendees-* container/header/hint classes below
   ARE live and are kept. */

/* Hint text */
.suggest-attendees-hint {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* Dark mode */
body.dark-mode .suggest-switch-slider {
  background-color: var(--slate-600, #475569);
}

body.dark-mode .suggest-switch input:checked + .suggest-switch-slider {
  background-color: #10b981;
}

body.dark-mode .suggest-attendees-header {
  border-bottom-color: var(--border-default);
}

body.dark-mode .suggest-attendees-label {
  color: var(--text-secondary);
}

body.dark-mode .suggest-toggle-option {
  color: var(--text-tertiary);
}

body.dark-mode .suggest-toggle-option.active[data-value="essential"] {
  color: #34d399;
}

body.dark-mode .suggest-toggle-option.active[data-value="invited"] {
  color: var(--slate-400, #94a3b8);
}

body.dark-mode .suggest-attendees-list {
  border-color: var(--border-default);
  background: var(--surface-tertiary);
}

/* (Removed dead body.dark-mode .suggest-attendee-item / -name / -priority-label
   rules — those per-row classes have no markup; rows render as .vm-member-item.) */

/* ============================================
   TAB FOOTER (Reset + Apply buttons)
   Used in Search tab and Suggest tab
   ============================================ */
.vm-tab-footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  justify-content: flex-end;
  /* NOT sticky (2026-07-01, user: "remove the sticky Find Times buttons in that
     modal, have the user need to scroll to them"). The footer flows in normal
     document order after the criteria/attendee list; the user scrolls down to
     reach Reset / Find times. (Previously position:sticky bottom:0 pinned it so
     it was always visible — that's what the user does not want.) */
  padding-bottom: 14px;
}

.vm-tab-footer .btn {
  flex: 0 0 auto;
  min-width: 100px;
}

/* Find Times footer — give both actions real colour so neither reads as a
   flat-grey afterthought. Find times stays the solid teal primary; Reset
   becomes a clearly teal-tinted, teal-bordered secondary (not muted slate),
   so the pair reads as "two intentional choices." Scoped to the modal footer
   so it doesn't bleed into other .btn-secondary uses. */
#view-mode-modal .vm-tab-footer #vm-bt-reset-btn {
  background: var(--primary-50, rgba(20, 184, 166, 0.10));
  color: var(--primary-700, #0f766e);
  border: 1px solid var(--primary-300, #5eead4);
  font-weight: 600;
}
#view-mode-modal .vm-tab-footer #vm-bt-reset-btn:hover {
  background: var(--primary-100, rgba(20, 184, 166, 0.18));
  border-color: var(--primary-400, #2dd4bf);
  color: var(--primary-800, #115e59);
}
body.dark-mode #view-mode-modal .vm-tab-footer #vm-bt-reset-btn {
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-200, #99f6e4);
  border-color: rgba(20, 184, 166, 0.45);
}
body.dark-mode #view-mode-modal .vm-tab-footer #vm-bt-reset-btn:hover {
  background: rgba(20, 184, 166, 0.20);
  border-color: rgba(20, 184, 166, 0.6);
  color: var(--primary-100, #ccfbf1);
}

/* Button group for Apply & Close + See Results */
.vm-action-btn-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.vm-action-btn-group .btn {
  min-width: 0;
}

/* Accent button style for See Suggested */
.vm-tab-footer .btn-accent {
  background: #5b21b6;
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.vm-tab-footer .btn-accent:hover {
  background: #4c1d95;
}

/* No animation on Apply buttons in tabs */
.vm-tab-footer .btn-primary {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.vm-tab-footer .btn-primary::before,
.vm-tab-footer .btn-primary::after {
  display: none !important;
}

.vm-tab-footer .btn-primary:active {
  transform: none !important;
}

/* Tick icon shown on success */
.vm-btn-tick {
  color: #22c55e;
}

/* Legacy suggest footer - redirect to new class */
.vm-suggest-footer {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  justify-content: flex-end;
}

/* Dark mode */
body.dark-mode .vm-reset-btn {
  background: var(--surface-tertiary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

body.dark-mode .vm-reset-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* Legacy support for old button class */
.vm-find-best-btn {
  width: 100%;
  padding: 12px 16px;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.vm-find-best-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}

.vm-find-best-btn:active {
  transform: translateY(0);
}

.vm-find-best-btn i {
  font-size: 0.85rem;
}


/* Dark mode */
body.dark-mode .vm-attendees-list {
  background: var(--surface-secondary);
}

body.dark-mode .vm-attendee-item {
  background: var(--surface-primary);
  border-color: var(--border-subtle);
}

body.dark-mode .vm-attendee-item.selected {
  background: rgba(20, 184, 166, 0.15);
  border-color: var(--primary-400);
}

body.dark-mode .vm-priority-star {
  color: var(--slate-500);
}

body.dark-mode .vm-priority-star.essential {
  color: var(--warning, #f59e0b);
}

body.dark-mode .vm-find-best-btn {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

body.dark-mode .vm-bt-result-item {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
}

body.dark-mode .vm-bt-result-item:hover {
  background: rgba(20, 184, 166, 0.1);
}

/* ============================================
   MEETING BUFFER SETTINGS
   Matches duration-chip design pattern exactly
   ============================================ */

.vm-buffer-summary {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 4px 10px;
  background: var(--slate-100);
  border-radius: var(--radius-full);
}

body.dark-mode .vm-buffer-summary {
  background: var(--slate-700);
  color: var(--slate-400);
}

.vm-buffer-summary.active {
  background: #14b8a6;
  color: white;
}

body.dark-mode .vm-buffer-summary.active {
  background: #14b8a6;
  color: white;
}

.vm-buffer-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.vm-buffer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vm-buffer-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 100px;
  flex-shrink: 0;
}

body.dark-mode .vm-buffer-label {
  color: var(--slate-400);
}

.vm-buffer-chips {
  display: flex;
  gap: 6px;
}

/* Buffer chips - matches compact duration-chip in view-mode-modal */
.vm-buffer-chip {
  min-height: 32px;
  padding: 6px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-xl, 12px);
  background: white;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
}

.vm-buffer-chip:hover {
  border-color: #14b8a6;
  color: #14b8a6;
  transform: translateY(-1px);
}

.vm-buffer-chip.active {
  background: #14b8a6;
  color: white;
  border-color: #14b8a6;
}

body.dark-mode .vm-buffer-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-mode .vm-buffer-chip:hover {
  border-color: #14b8a6;
  color: #14b8a6;
}

body.dark-mode .vm-buffer-chip.active {
  background: #14b8a6;
  color: white;
  border-color: #14b8a6;
}

/* Buffer responsive - mobile */
@media (max-width: 480px) {
  /* The attendees header is `flex; nowrap; space-between` — on phones the
     Attendees label plus Select All plus the Invited/Essential master toggle
     need ~390px and the toggle was clipping off the right edge ("Essent…").
     Rather than stranding Select All on a row of its own, drop the label to
     the top line on its own and pair Select All (left) with the toggle (right)
     on the next line. `display: contents` lifts the header-left's children
     (label + Select All) up to be direct flex items so we can order them
     independently of the toggle. */
  .suggest-attendees-header {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .suggest-attendees-header-left {
    display: contents;
  }

  .suggest-attendees-label {
    flex: 1 0 100%;
  }

  .suggest-select-all-wrap {
    margin-right: auto;
  }

  /* No margin-left:auto here (2026-10-05): Select All's margin-right
     already puts the toggle on the right when both fit; when large text wraps
     it, it starts at the left under Select All instead of stranding right. */

  .vm-buffer-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .vm-buffer-label {
    min-width: auto;
  }

  .vm-buffer-chips {
    justify-content: flex-start;
  }

  .vm-buffer-chip {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 12px;
    min-width: 44px;
    flex: 1;
    max-width: calc(25% - 6px);
  }
}

/* ============================================
   GROUP SETTINGS MODAL - BUFFER STYLES
   Consistent with existing gsm patterns
   ============================================ */

.gsm-buffer-hint {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

body.dark-mode .gsm-buffer-hint {
  color: var(--slate-500);
}

.gsm-buffer-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.gsm-buffer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gsm-buffer-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 120px;
}

body.dark-mode .gsm-buffer-label {
  color: var(--slate-400);
}

.gsm-pill-toggle-sm {
  display: flex;
  gap: 6px;
  padding: 0;
  background: transparent;
}

/* Buffer pills in board settings - compact style */
.gsm-pill-toggle-sm .gsm-pill {
  min-height: 32px;
  padding: 6px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-xl, 12px);
  background: white;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  box-shadow: none;
}

.gsm-pill-toggle-sm .gsm-pill:hover {
  border-color: #14b8a6;
  color: #14b8a6;
  transform: translateY(-1px);
  background: white;
}

.gsm-pill-toggle-sm .gsm-pill.active {
  background: #14b8a6;
  color: white;
  border-color: #14b8a6;
  box-shadow: none;
}

body.dark-mode .gsm-pill-toggle-sm {
  background: transparent;
}

body.dark-mode .gsm-pill-toggle-sm .gsm-pill {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
  color: var(--slate-400);
}

body.dark-mode .gsm-pill-toggle-sm .gsm-pill:hover {
  border-color: #14b8a6;
  color: #14b8a6;
  background: var(--surface-secondary);
}

body.dark-mode .gsm-pill-toggle-sm .gsm-pill.active {
  background: #14b8a6;
  color: white;
  border-color: #14b8a6;
}

.gsm-pill.gsm-pill-sm {
  padding: 6px 10px;
  font-size: 0.75rem;
  min-width: 32px;
}

/* MEETING BUFFERS FIT A PHONE (owner 2026-10-02, "Yes all"; multi-day
   audit). Label + four pills on one line need ~360px; the phone modal gives
   ~290 (375) and ~235 (320), so "15m" was cut off on the right. The row now
   WRAPS: when the pills do not fit beside the label they drop under it and
   share the full width. Every pill is a 44px-tall target on any pointer. */
.gsm-buffer-row { flex-wrap: wrap; row-gap: 8px; }
.gsm-buffer-row .gsm-pill-toggle-sm { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.gsm-buffer-row .gsm-pill-toggle-sm .gsm-pill { min-height: 44px; min-width: 44px; }
@media (max-width: 480px) {
  .gsm-buffer-label { min-width: 0; flex: 1 1 100%; }
  .gsm-buffer-row .gsm-pill-toggle-sm { flex: 1 1 100%; }
  .gsm-buffer-row .gsm-pill-toggle-sm .gsm-pill { flex: 1 1 0; min-width: 0; }
}

/* Buffer stat icon in Results tab */
.vm-time-stat-icon.buffer {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: #8b5cf6;
}

body.dark-mode .vm-time-stat-icon.buffer {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.vm-buffer-stat.has-warning .vm-time-stat-icon.buffer {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
  color: #f59e0b;
}

.vm-buffer-stat.has-warning .vm-time-stat-value {
  color: #f59e0b;
}

body.dark-mode .vm-buffer-stat.has-warning .vm-time-stat-icon.buffer {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

body.dark-mode .vm-buffer-stat.has-warning .vm-time-stat-value {
  color: #fbbf24;
}

/* ============================================
   Group Settings Modal (GSM) Styles
   ============================================ */

.group-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.group-settings-modal.active {
  opacity: 1;
  visibility: visible;
}

.gsm-modal-content {
  background: var(--bg-primary, #ffffff);
  border-radius: 16px;
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}

.group-settings-modal.active .gsm-modal-content {
  transform: translateY(0) scale(1);
}

body.dark-mode .gsm-modal-content {
  background: var(--slate-800, #1e293b);
  border: 1px solid var(--slate-700, #334155);
}

.gsm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

body.dark-mode .gsm-header {
  border-bottom-color: var(--slate-700, #334155);
}

.gsm-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.gsm-header-title i {
  color: var(--primary-color, #3b82f6);
}

body.dark-mode .gsm-header-title {
  color: var(--slate-100, #f1f5f9);
}

.gsm-close-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.gsm-close-btn:hover {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-primary, #1e293b);
}

body.dark-mode .gsm-close-btn:hover {
  background: var(--slate-700, #334155);
  color: var(--slate-100, #f1f5f9);
}

.gsm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gsm-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gsm-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #64748b);
}

.gsm-section-label i {
  font-size: 0.75rem;
  opacity: 0.7;
}

body.dark-mode .gsm-section-label {
  color: var(--slate-400, #94a3b8);
}

.gsm-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gsm-section-hint {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

body.dark-mode .gsm-section-hint {
  color: var(--slate-500, #64748b);
}

/* Allow booking links (2026-09-24): a switch row inside Sharing, its hint,
   the door, and who takes bookings. Same spacing as the section above. */
.gsm-booking-links { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.gsm-booking-links-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.gsm-booking-status:empty { display: none; }
/* Book time with this group (2026-09-26): live links, Copy for every member. */
.gsm-book-time:empty { display: none; }
.gsm-book-time { margin-top: 10px; }
.gsm-book-time-title { font-weight: 600; font-size: 14px; }
.gsm-book-time-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.gsm-book-time-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsm-booking-status-row { margin: 2px 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary, #475569); }
.gsm-booking-status-row strong { color: var(--text-primary, #0f172a); font-weight: 600; }
body.dark-mode .gsm-booking-status-row { color: var(--slate-300, #cbd5e1); }
body.dark-mode .gsm-booking-status-row strong { color: var(--slate-100, #f1f5f9); }

/* Marks the controls that persist the INSTANT you click them, rather than on
   "Save Changes". Group Settings has no Cancel (removed 2026-07-04 on the
   premise that closing discards edits) — but availability, role changes and
   member removal all write immediately, so that premise was false for them.
   Mirrors .settings-autosave-note in settings-modals.css. (2026-08-02 audit.) */
.gsm-autosave-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 10px;
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  background: var(--primary-50, rgba(20, 184, 166, 0.08));
  border: 1px solid var(--primary-100, rgba(20, 184, 166, 0.18));
  border-radius: var(--radius-md, 10px);
}

.gsm-autosave-note i {
  color: var(--primary-500, #14b8a6);
  flex: 0 0 auto;
}

body.dark-mode .gsm-autosave-note {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.28);
  color: var(--slate-400, #94a3b8);
}

.gsm-locked-badge {
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #64748b);
}

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

.gsm-text-input {
  padding: 10px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1e293b);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gsm-text-input:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

body.dark-mode .gsm-text-input {
  background: var(--slate-900, #0f172a);
  border-color: var(--slate-600, #475569);
  color: var(--slate-100, #f1f5f9);
}

/* Chip Group */
.gsm-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gsm-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 120px;
}

.gsm-chip:hover {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

.gsm-chip.active {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

.gsm-chip i {
  color: var(--primary-color, #3b82f6);
  font-size: 0.9rem;
}

.gsm-chip-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.gsm-chip-desc {
  font-size: 0.7rem;
  color: var(--text-secondary, #64748b);
}

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

body.dark-mode .gsm-chip:hover {
  background: rgba(59, 130, 246, 0.15);
}

body.dark-mode .gsm-chip.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--primary-color, #3b82f6);
}

body.dark-mode .gsm-chip-label {
  color: var(--slate-100, #f1f5f9);
}

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

/* Pill Toggle */
.gsm-pill-toggle {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-secondary, #f1f5f9);
  border-radius: 10px;
}

body.dark-mode .gsm-pill-toggle {
  background: var(--slate-700, #334155);
}

.gsm-pill {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gsm-pill:hover {
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #1e293b);
}

.gsm-pill.active {
  background: var(--bg-primary, #ffffff);
  color: var(--primary-color, #3b82f6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

body.dark-mode .gsm-pill:hover {
  background: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .gsm-pill.active {
  background: var(--slate-600, #475569);
  color: var(--primary-color, #60a5fa);
}

/* Toggle Cards */
.gsm-toggle-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gsm-toggle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gsm-toggle-card:hover {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.03);
}

.gsm-toggle-card.active {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

body.dark-mode .gsm-toggle-card {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}

body.dark-mode .gsm-toggle-card:hover {
  background: rgba(59, 130, 246, 0.1);
}

body.dark-mode .gsm-toggle-card.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--primary-color, #3b82f6);
}

.gsm-toggle-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-secondary, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color, #3b82f6);
  font-size: 1rem;
}

body.dark-mode .gsm-toggle-card-icon {
  background: var(--slate-700, #334155);
}

.gsm-toggle-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsm-toggle-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

body.dark-mode .gsm-toggle-card-title {
  color: var(--slate-100, #f1f5f9);
}

.gsm-toggle-card-desc {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

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

.gsm-toggle-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s ease;
}

.gsm-toggle-card.active .gsm-toggle-check {
  background: var(--primary-color, #3b82f6);
  border-color: var(--primary-color, #3b82f6);
  color: white;
}

body.dark-mode .gsm-toggle-check {
  border-color: var(--slate-500, #64748b);
}

/* Members List */
.gsm-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Was 200px — roughly two-and-a-half rows, which is what made a 5-member
     roster read as a squat scrolling stub next to the full-height sections
     above it. Sized to show ~5 rows before scrolling, and capped relative to
     the viewport so a 20-person group still can't push the modal off-screen. */
  max-height: min(600px, 62vh); /* cards (2026-10-09) are taller than rows */
  overflow-y: auto;
}

.gsm-member-item {
  display: flex;
  align-items: center;
  /* gap/padding/avatar match .vm-member-item (the canonical member row, see
     ~line 1387) so the roster reads as the same component as the rest of the
     app rather than a bespoke one. */
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-secondary, #f8fafc);
  transition: background 0.2s ease;
}

.gsm-member-item:hover {
  background: var(--bg-tertiary, #f1f5f9);
}

body.dark-mode .gsm-member-item {
  background: var(--slate-700, #334155);
}

body.dark-mode .gsm-member-item:hover {
  background: var(--slate-600, #475569);
}

.gsm-member-avatar {
  /* 32px is the app-wide member-row avatar (.vm-member-avatar,
     .participant-avatar, .ap-avatar). 36px appeared only here. */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

.gsm-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gsm-member-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .gsm-member-name {
  color: var(--slate-100, #f1f5f9);
}

.gsm-owner-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary-color, #3b82f6);
  font-weight: 600;
}

/* Role badge (replaces owner badge with generic role support) */
.gsm-role-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.gsm-role-badge i {
  font-size: 0.55rem;
}

/* NOT-JOINED BADGE (2026-08-27)
   ---------------------------------------------------------------------------
   A row created by "Add someone I know" is a person the admin typed in, not a
   member: they have not joined, cannot see the group, and their availability is
   the admin's guess. This list used to render them identically to real members,
   so the admin could not tell who had actually arrived.

   Deliberately NOT a status colour (no red/amber): nothing is wrong, and an
   alarm colour on a perfectly normal row would read as an error. A neutral,
   slightly recessed chip says "different kind of thing" without shouting.
   Carries a border because it sits next to coloured role badges and needs an
   edge of its own to read as a peer rather than a washed-out one. */
.gsm-placeholder-badge {
  color: var(--slate-600);
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
}

/* The whole row is dimmed a touch so a board of real members reads first and
   the typed-in rows recede. Kept above 0.7 so the name stays comfortably
   legible; this is a de-emphasis, not a disabled state. */
.gsm-member-item--placeholder .gsm-member-avatar,
.gsm-member-item--placeholder .gsm-member-tz {
  opacity: 0.75;
}

body.dark-mode .gsm-placeholder-badge {
  color: var(--slate-300);
  background: var(--slate-700);
  border-color: var(--slate-600);
}

/* Role selector dropdown in member list.
   Styled to match .ap-role-select (admin-panel.css) — the app's existing role
   dropdown — instead of `appearance: auto`, which rendered a raw OS control
   that looked nothing like the chips, pills and switches around it. */
.gsm-role-select {
  font-size: 0.7rem;
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  background-color: var(--surface-primary, #fff);
  color: var(--text-color, #374151);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 9px;
  /* Full width of the control column so the "Admin — Can manage…" option text
     is readable rather than truncated in a hairline dropdown. */
  max-width: 100%;
}

.gsm-role-select:focus-visible {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* Wrapper stacks the select + its live description line.
   The hover-reveal (opacity:0 until :hover) was removed 2026-07-27: it made
   the ONLY role control in the group settings modal invisible at rest, and
   completely unreachable on touch devices, where there is no hover. Every
   other member row in the app (.member-action-btn, .ap-role-select,
   .vm-member-item controls) shows its action at rest; this was the outlier.
   Same bug and same fix as .unavailable-btn-compact in review-inbox.css. */
.gsm-role-control {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 0;
}
/* One-line role description under the dropdown — the "explain ambiguous
   options" fix so Admin/Member/Viewer isn't a bare word. */
.gsm-role-desc {
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--text-secondary, #64748b);
  text-align: right;
  max-width: 160px;
}
body.dark-mode .gsm-role-select {
  /* background-COLOR only — `background` shorthand would wipe the chevron. */
  background-color: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
body.dark-mode .gsm-role-desc {
  color: var(--slate-400, #94a3b8);
}

/* Group metadata line */
.gsm-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
}
.gsm-metadata span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
body.dark-mode .gsm-metadata {
  color: var(--slate-400, #94a3b8);
}

/* Description textarea */
.gsm-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-color, #374151);
  background: var(--surface-primary, #fff);
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.gsm-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
body.dark-mode .gsm-textarea {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

/* Collapsed (optional) Description disclosure in the Create Group modal (2026-06-25).
   Native <details>/<summary> — the summary is a subtle clickable row that reveals the
   textarea on open. Mirrors the booking-link rules-summary pattern. */
.cbm-desc-disclosure,
.cbm-advanced-disclosure {
  border: 1px dashed var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 0;
}
.cbm-desc-disclosure[open],
.cbm-advanced-disclosure[open] {
  border-style: solid;
}
.cbm-desc-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color, #374151);
}
.cbm-desc-summary::-webkit-details-marker { display: none; }
.cbm-desc-summary > i:first-child {
  color: var(--text-muted, #64748b);
}
.cbm-desc-summary .form-label-optional {
  font-weight: 400;
}
/* Chevron pinned right; rotates when the disclosure is open. */
.cbm-desc-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s ease;
}
.cbm-desc-disclosure[open] .cbm-desc-chevron,
.cbm-advanced-disclosure[open] .cbm-desc-chevron {
  transform: rotate(180deg);
}
/* The revealed textarea sits flush inside the disclosure with a small inset. */
.cbm-desc-disclosure .gsm-textarea {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
}
/* The advanced disclosure holds form-groups (events + who-can-join) rather than a
   single textarea — give them a matching inset and drop the last group's margin so
   the panel closes cleanly at the border. */
.cbm-advanced-disclosure > .form-group {
  margin: 12px;
}
.cbm-advanced-disclosure > .form-group:last-child {
  margin-bottom: 12px;
}
body.dark-mode .cbm-desc-disclosure,
body.dark-mode .cbm-advanced-disclosure {
  border-color: var(--slate-600, #475569);
}
body.dark-mode .cbm-desc-summary {
  color: var(--slate-200, #e2e8f0);
}

/* Group Settings "Admin controls" disclosure (2026-07-07) — same native
   dashed-container look as the create flow's cbm-advanced-disclosure, but its
   children are .gsm-section blocks, so inset those and space them. Reuses the
   shared .cbm-desc-summary / .cbm-desc-chevron for the header + chevron. */
.gsm-advanced-disclosure {
  border: 1px dashed var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 0;
}
.gsm-advanced-disclosure[open] {
  border-style: solid;
}
.gsm-advanced-disclosure[open] .cbm-desc-chevron {
  transform: rotate(180deg);
}
.gsm-advanced-disclosure > .gsm-section {
  margin: 12px;
}
.gsm-advanced-disclosure > .gsm-section:first-of-type {
  margin-top: 12px;
}
.gsm-advanced-disclosure > .gsm-section:last-child {
  margin-bottom: 12px;
}
body.dark-mode .gsm-advanced-disclosure {
  border-color: var(--slate-600, #475569);
}

/* Sub-field label inside a section that hosts more than one control (e.g. the
   merged Privacy & visibility section: preset chips + calendar-sharing toggle).
   Smaller/quieter than the uppercase section label. */
.gsm-subfield-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
}

/* Entry mode descriptions */
.gsm-entry-descriptions {
  margin-top: 4px;
  min-height: 18px;
}
.gsm-entry-desc {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
  padding: 0;
  transition: opacity 0.15s ease;
}
.gsm-entry-desc.hidden {
  display: none;
}
body.dark-mode .gsm-entry-desc {
  color: var(--slate-400, #94a3b8);
}

/* Sharing section */
.gsm-share-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gsm-share-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gsm-share-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}
.gsm-share-code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--primary-color, #14b8a6);
  background: var(--slate-50, #f8fafc);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
}
body.dark-mode .gsm-share-code {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}
.gsm-copy-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.gsm-copy-btn:hover {
  background: var(--primary-50, #f0fdfa);
  color: var(--primary-color, #14b8a6);
  border-color: var(--primary-color, #14b8a6);
}
body.dark-mode .gsm-copy-btn {
  border-color: var(--slate-600);
}
.gsm-share-actions {
  display: flex;
  gap: 8px;
}
.gsm-share-link-btn {
  flex: 1;
}
/* No members.invite (2026-09-26): a note in place of the code and copy
   buttons. Quiet, not an error — the member did nothing wrong. */
.gsm-share-block--locked {
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--slate-50, #f8fafc);
}
body.dark-mode .gsm-share-block--locked {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}
.gsm-share-locked-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary, #0f172a);
}
.gsm-share-locked-title i {
  color: var(--text-secondary, #64748b);
}
.gsm-share-block--locked .gsm-section-hint {
  margin: 0;
}

.gsm-member-tz {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

body.dark-mode .gsm-member-tz {
  color: var(--slate-400, #94a3b8);
}

/* Remove member. Was opacity:0 until row hover, which hid the only removal
   affordance in the app's group settings and made it unreachable on touch.
   Now always visible, matching .member-action-btn (board-modals.css) — quiet
   grey at rest, red on hover/focus. */
.gsm-member-remove {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.gsm-member-remove:hover,
.gsm-member-remove:focus-visible {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.gsm-member-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

body.dark-mode .gsm-member-count {
  color: var(--slate-400, #94a3b8);
}

/* Add/Action Buttons */
.gsm-add-btn,
.gsm-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px dashed var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: transparent;
  color: var(--primary-color, #3b82f6);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gsm-add-btn:hover,
.gsm-action-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--primary-color, #3b82f6);
}

body.dark-mode .gsm-add-btn,
body.dark-mode .gsm-action-btn {
  border-color: var(--slate-600, #475569);
}

body.dark-mode .gsm-add-btn:hover,
body.dark-mode .gsm-action-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--primary-color, #3b82f6);
}

/* TWO ACTIONS, ONE CLEARLY PRIMARY (2026-08-14). The Members section offers
   Invite (they join themselves) AND Add-yourself (you create the row). They are
   different enough to need separate buttons, but rendering both in the
   identical dashed style made them read as equal, confusable options. */
.gsm-add-btn--secondary {
  margin-top: 6px;
  color: var(--slate-500, #64748b);
  font-weight: 400;
  border-style: solid;
  border-color: transparent;
}
.gsm-add-btn--secondary:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--slate-300, #cbd5e1);
  color: var(--slate-700, #334155);
}
body.dark-mode .gsm-add-btn--secondary {
  color: var(--slate-400, #94a3b8);
  border-color: transparent;
}
body.dark-mode .gsm-add-btn--secondary:hover {
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

/* Empty State */
.gsm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}

.gsm-empty-state i {
  font-size: 1.5rem;
  opacity: 0.5;
}

.gsm-empty-state span {
  font-size: 0.85rem;
}

/* Danger Zone */
.gsm-danger-zone {
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 16px;
  margin-top: 8px;
}

body.dark-mode .gsm-danger-zone {
  border-top-color: var(--slate-700, #334155);
}

.gsm-danger-label {
  color: #ef4444 !important;
}

.gsm-danger-actions {
  display: flex;
  gap: 10px;
}

.gsm-danger-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gsm-danger-secondary {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #64748b);
}

.gsm-danger-secondary:hover {
  background: var(--bg-tertiary, #e2e8f0);
  color: var(--text-primary, #1e293b);
}

body.dark-mode .gsm-danger-secondary {
  background: var(--slate-700, #334155);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .gsm-danger-secondary:hover {
  background: var(--slate-600, #475569);
}

.gsm-danger-primary {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.gsm-danger-primary:hover {
  background: #ef4444;
  color: white;
}

/* Footer */
.gsm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

body.dark-mode .gsm-footer {
  border-top-color: var(--slate-700, #334155);
}

/* .gsm-cancel-btn rules removed 2026-07-04 with the redundant Group Settings
   footer Cancel (header X is the sole dismiss control now). */

.gsm-save-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--primary-color, #3b82f6);
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.gsm-save-btn:hover {
  background: var(--primary-hover, #2563eb);
}

/* =================================================================
   Results panel — Mode strip
   Tells the user which question they're looking at the answer to.
   Inspect uses --primary-500 (teal — the diagnostic mode is the app's
   primary mood). Rank uses --accent-500 (cyan — discovery is adjacent
   but distinct). Both are from the canonical brand palette, so the
   strip never feels foreign to the rest of the modal.
   ================================================================= */
/* `display: flex` beats the [hidden] UA rule, so an explicitly hidden strip
   would still paint its border + padding as an empty box above the podium
   (2026-07-27 — results-tab hides it when it has no banner/hint to show). */
.vm-results-mode-strip[hidden] { display: none !important; }
.vm-results-mode-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 14px 0;
  background: var(--card-bg-secondary, #f9fafb);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-left-width: 3px;
  border-left-color: var(--primary-500, #14b8a6);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}
.vm-results-mode-strip > i {
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.75rem;
}
.vm-results-mode-strip[data-mode="inspect"] {
  border-left-color: var(--primary-500, #14b8a6);
}
.vm-results-mode-strip[data-mode="rank"] {
  border-left-color: var(--accent-500, #06b6d4);
}
.vm-results-mode-label {
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
body.dark-mode .vm-results-mode-strip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vm-results-mode-strip[data-mode="inspect"] {
  border-left-color: var(--primary-400, #2dd4bf);
}
body.dark-mode .vm-results-mode-strip[data-mode="rank"] {
  border-left-color: var(--accent-400, #22d3ee);
}
body.dark-mode .vm-results-mode-label {
  color: var(--text-primary-dark, #f1f5f9);
}

/* =================================================================
   Inspector card — single-slot scorecard
   Sibling of .vm-results-ranked-card: same surface, same radius (14px),
   same hover-paints-border pattern with --primary-200. Five dimension
   bars use the level-badge palette (excellent/good/acceptable/poor)
   so the same word means the same colour everywhere in the modal.
   ================================================================= */
.vm-inspector-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  background: var(--card-bg-secondary, #f9fafb);
  border: 1.5px solid transparent;
  border-radius: 14px;
}
body.dark-mode .vm-inspector-card {
  background: rgba(255,255,255,0.04);
  border-color: transparent;
}

/* Header row — slot label + overall score */
.vm-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.vm-inspector-head-time {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  line-height: 1.25;
}
/* Viewpoint qualifier — the slot label is rendered in the organizer's local
   time (not UTC / not any one attendee). Make that explicit so "9pm-12am"
   isn't misread as another person's hour. */
.vm-inspector-head-tz {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: none;
  letter-spacing: 0.01em;
}
body.dark-mode .vm-inspector-head-tz {
  color: var(--text-secondary-dark, #94a3b8);
}
.vm-inspector-head-overall {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vm-inspector-head-score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary, #1f2937);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.dark-mode .vm-inspector-head {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .vm-inspector-head-time,
body.dark-mode .vm-inspector-head-score {
  color: var(--text-primary-dark, #f1f5f9);
}

/* Dimension rows — five score bars stacked */
.vm-inspector-dims {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vm-inspector-dim {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px;
}
.vm-inspector-dim-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}
.vm-inspector-dim-head > i {
  width: 14px;
  color: var(--text-tertiary, #94a3b8);
}
.vm-inspector-dim-label {
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.vm-inspector-dim-score {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #6b7280);
}
.vm-inspector-dim-bar {
  height: 6px;
  background: var(--slate-100, #f1f5f9);
  border-radius: 3px;
  overflow: hidden;
}
.vm-inspector-dim-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
/* Tone palette mirrors .vm-results-level-badge[data-level="..."] —
   same word = same colour. */
/* Inspector dim-bar — fill uses --tier-*-fill (bright), score text uses
   --tier-*-fg (darker for legibility at small size). Dark-mode rules
   for the tone variants deleted; the token cascade handles them. */
.vm-inspector-dim[data-tone="excellent"] .vm-inspector-dim-fill { background: var(--tier-excellent-fill); }
.vm-inspector-dim[data-tone="good"]      .vm-inspector-dim-fill { background: var(--tier-good-fill); }
.vm-inspector-dim[data-tone="acceptable"] .vm-inspector-dim-fill { background: var(--tier-acceptable-fill); }
.vm-inspector-dim[data-tone="poor"]      .vm-inspector-dim-fill { background: var(--tier-poor-fill); }
.vm-inspector-dim[data-tone="excellent"] .vm-inspector-dim-score { color: var(--tier-excellent-fg); }
.vm-inspector-dim[data-tone="good"]      .vm-inspector-dim-score { color: var(--tier-good-fg); }
.vm-inspector-dim[data-tone="acceptable"] .vm-inspector-dim-score { color: var(--tier-acceptable-fg); }
.vm-inspector-dim[data-tone="poor"]      .vm-inspector-dim-score { color: var(--tier-poor-fg); }
.vm-inspector-dim-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary, #94a3b8);
}
body.dark-mode .vm-inspector-dim-bar {
  background: rgba(255,255,255,0.08);
}
body.dark-mode .vm-inspector-dim-label {
  color: var(--text-primary-dark, #f1f5f9);
}

/* Attendee breakdown — pill, name, local time, status chip */
.vm-inspector-attendees {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.vm-inspector-attendees-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--slate-600, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.vm-inspector-attendees-head > i {
  color: var(--text-tertiary, #94a3b8);
}
.vm-inspector-attendee {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.8125rem;
}
.vm-inspector-attendee-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.6875rem;
}
.vm-inspector-attendee-name {
  color: var(--text-primary, #1f2937);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vm-inspector-attendee-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #6b7280);
  font-size: 0.75rem;
}
.vm-inspector-attendee-status {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--slate-100, #f1f5f9);
  color: var(--text-secondary, #6b7280);
  font-weight: 600;
}
/* Status-chip palette uses the canonical traffic-light tones from
   STATUS_PRESENTATION (working = #16a34a, sleep = #7c3aed). Edges
   share warning amber. Stays in sync with the dim/level palette. */
.vm-inspector-attendee[data-status="working"]      .vm-inspector-attendee-status { background: var(--success-light, rgba(16,185,129,0.12)); color: #059669; }
.vm-inspector-attendee[data-status="sleeping"]     .vm-inspector-attendee-status { background: rgba(124,58,237,0.12); color: #6d28d9; }
.vm-inspector-attendee[data-status="before-work"]  .vm-inspector-attendee-status,
.vm-inspector-attendee[data-status="after-work"]   .vm-inspector-attendee-status { background: var(--warning-light, rgba(245,158,11,0.12)); color: #d97706; }
.vm-inspector-attendee-overflow {
  font-size: 0.75rem;
  color: var(--text-tertiary, #94a3b8);
  padding: 4px 0;
  font-style: italic;
}

/* Hybrid per-person list — summary line up top, only the out-of-hours people
   shown by default, the in-hours majority behind a "Show everyone" toggle. A
   big team would otherwise bury the two people the organizer needs to see
   under a wall of green "Working" rows. */
.vm-inspector-attendees-summary {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  margin: -2px 0 6px;
}
.vm-inspector-attendees-allclear {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #059669;
  padding: 4px 0;
}
.vm-inspector-attendees-allclear i { font-size: 0.75rem; }
.vm-inspector-attendees-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: var(--primary-600, #0d9488);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s;
}
.vm-inspector-attendees-toggle:hover { color: var(--primary-700, #0f766e); }
.vm-inspector-attendees-toggle i { transition: transform 0.2s ease; font-size: 0.75rem; }
.vm-inspector-attendees-toggle.is-expanded i { transform: rotate(180deg); }
.vm-inspector-attendees-rest[hidden] { display: none; }
body.dark-mode .vm-inspector-attendees-summary { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-inspector-attendees-allclear { color: #6ee7b7; }
body.dark-mode .vm-inspector-attendees-toggle { color: #5eead4; }
body.dark-mode .vm-inspector-attendees-toggle:hover { color: #99f6e4; }

body.dark-mode .vm-inspector-attendees {
  border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .vm-inspector-attendee-name {
  color: var(--text-primary-dark, #f1f5f9);
}
body.dark-mode .vm-inspector-attendee-status {
  background: rgba(255,255,255,0.06);
  color: var(--slate-400, #94a3b8);
}
body.dark-mode .vm-inspector-attendee[data-status="working"] .vm-inspector-attendee-status { background: rgba(34,197,94,0.20); color: #6ee7b7; }
body.dark-mode .vm-inspector-attendee[data-status="sleeping"] .vm-inspector-attendee-status { background: rgba(168,85,247,0.20); color: #c4b5fd; }
body.dark-mode .vm-inspector-attendee[data-status="before-work"] .vm-inspector-attendee-status,
body.dark-mode .vm-inspector-attendee[data-status="after-work"] .vm-inspector-attendee-status { background: rgba(245,158,11,0.20); color: #fcd34d; }

/* Suggestions — "what would make this better?" */
.vm-inspector-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface-secondary, #f8fafc);
  border-radius: 10px;
}
.vm-inspector-suggestions-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.vm-inspector-suggestions-head > i {
  color: var(--warning, #f59e0b);
}
.vm-inspector-suggestions-empty {
  flex-direction: row;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--success, #10b981);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 0;
}
.vm-inspector-suggestions-empty > i {
  color: var(--success, #10b981);
}
.vm-inspector-suggestion {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card-bg-primary, #ffffff);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.8125rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vm-inspector-suggestion:hover {
  background: var(--hover-bg, #f3f4f6);
  border-color: var(--primary-200, #99f6e4);
}
.vm-inspector-suggestion-time {
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  font-variant-numeric: tabular-nums;
}
.vm-inspector-suggestion-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 8px;
  background: var(--success-light, rgba(16,185,129,0.12));
  color: #059669;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 10px;
}
.vm-inspector-suggestion-why {
  color: var(--text-secondary, #6b7280);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vm-inspector-suggestion > i:last-child {
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.6875rem;
}
body.dark-mode .vm-inspector-suggestions {
  background: rgba(255,255,255,0.03);
}
body.dark-mode .vm-inspector-suggestion {
  background: rgba(255,255,255,0.04);
  border-color: transparent;
}
body.dark-mode .vm-inspector-suggestion:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(20,184,166,0.4);
}
body.dark-mode .vm-inspector-suggestion-time {
  color: var(--text-primary-dark, #f1f5f9);
}
body.dark-mode .vm-inspector-suggestion-delta {
  background: rgba(34,197,94,0.20);
  color: #6ee7b7;
}

/* Inspector action footer */
.vm-inspector-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
body.dark-mode .vm-inspector-actions {
  border-top-color: rgba(255,255,255,0.08);
}

/* ──────────────────────────────────────────────────────────────────
   Results tab redesign — context strip, expandable ranked cards,
   trade-off framing. The breakdown inside each card reuses
   .vm-inspector-dim and .vm-inspector-attendee from above, so the
   ranked card and the inspector card speak the same visual language.
   ────────────────────────────────────────────────────────────────── */

/* Context strip — two-line summary above the ranked cards. Tells the
   user what was scanned and how it was scored. */
.vm-results-mode-strip .vm-results-mode-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
.vm-results-context-row {
  font-size: 0.875rem;
  color: var(--text-primary, #1e293b);
}
.vm-results-context-row strong {
  color: var(--text-primary, #0f172a);
  font-weight: 600;
}
.vm-results-context-sub {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.01em;
}
.vm-results-mode-headline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}
body.dark-mode .vm-results-context-row { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-context-row strong { color: #fff; }
body.dark-mode .vm-results-context-sub { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-mode-headline { color: var(--text-primary-dark, #f1f5f9); }

/* Required-gate fallback hint — shown above the podium when no slot
   satisfies every required attendee, so the user understands why the
   ranking below shows "closest matches" instead of clean winners. */
.vm-results-required-gate-hint {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400e;
  font-size: 0.8125rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.vm-results-required-gate-hint i { margin-top: 0.15rem; color: #d97706; }
.vm-results-required-gate-hint strong { font-weight: 600; }
body.dark-mode .vm-results-required-gate-hint {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde68a;
}
body.dark-mode .vm-results-required-gate-hint i { color: #fbbf24; }

/* Stale-results banner — shown when the selection changed but the podium
   hasn't recomputed (the cards below dim via .is-stale). The old one-line text
   hint was too quiet, so users read the fade as "the modal randomly faded."
   This makes the cause + the fix unmissable: an amber attention bar with a
   filled "Re-rank now" button. Sticky to the top of the scroll container so it
   stays pinned over the dimmed result while the user scrolls/reads. */
.vm-results-stale-banner {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0.5rem 0 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(254, 243, 199, 0.96);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.12);
}
.vm-results-stale-banner-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #92400e;
  min-width: 0;
}
.vm-results-stale-banner-text strong { font-weight: 700; }
.vm-results-stale-banner-text i { color: #d97706; flex-shrink: 0; }
.vm-results-stale-rerank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary-600, #0d9488);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.vm-results-stale-rerank:hover { background: var(--primary-700, #0f766e); }
.vm-results-stale-rerank:active { transform: scale(0.97); }
.vm-results-stale-rerank i { font-size: 0.75rem; }
body.dark-mode .vm-results-stale-banner {
  background: rgba(120, 53, 15, 0.92);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .vm-results-stale-banner-text { color: #fde68a; }
body.dark-mode .vm-results-stale-banner-text i { color: #fbbf24; }

/* Ranked card — expanded state. Adds the breakdown below the summary
   row. The summary row keeps its original layout; the breakdown is a
   second block separated by a subtle divider. */
.vm-results-ranked-card.is-expanded {
  /* Slightly stronger surface when expanded so it reads as the focal
     card of the list. */
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.vm-results-ranked-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.vm-results-ranked-summary > .vm-results-ranked-info {
  flex: 1;
  min-width: 0;
}

/* Composite score chip next to the level badge. Reads "this card's
   number" without competing with the level word. */
.vm-results-ranked-score {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  min-width: 28px;
  text-align: right;
  line-height: 1;
}
body.dark-mode .vm-results-ranked-score { color: var(--text-primary-dark, #f1f5f9); }

/* Expand/collapse chevron button. Sits in the actions cluster. */
.vm-results-card-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.vm-results-card-expand:hover {
  background: var(--slate-50, #f8fafc);
  color: var(--text-primary, #0f172a);
  border-color: var(--slate-300, #cbd5e1);
}
.vm-results-card-expand i { font-size: 0.75rem; }
body.dark-mode .vm-results-card-expand {
  border-color: rgba(255,255,255,0.12);
  color: var(--text-secondary-dark, #94a3b8);
}
body.dark-mode .vm-results-card-expand:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary-dark, #f1f5f9);
  border-color: rgba(255,255,255,0.18);
}

/* Breakdown body — only visible when the card is expanded. Reuses
   .vm-inspector-dim and .vm-inspector-attendee styles above. */
.vm-results-breakdown {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vm-results-ranked-card:not(.is-expanded) .vm-results-breakdown {
  display: none;
}
body.dark-mode .vm-results-breakdown {
  border-top-color: rgba(255,255,255,0.08);
}
.vm-results-breakdown-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vm-results-breakdown-head {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #64748b);
}
body.dark-mode .vm-results-breakdown-head { color: var(--text-secondary-dark, #94a3b8); }

/* Weakest-link attendee — subtly emphasised so the user sees who's
   paying the highest cost for this slot without it screaming. */
.vm-inspector-attendee.is-weakest {
  background: rgba(245, 158, 11, 0.06);
  border-radius: 6px;
}
.vm-inspector-attendee.is-weakest .vm-inspector-attendee-name {
  font-weight: 600;
}
body.dark-mode .vm-inspector-attendee.is-weakest {
  background: rgba(245, 158, 11, 0.10);
}

/* ──────────────────────────────────────────────────────────────────
   Alternatives & trade-offs — replaces the old axis-group columns.
   Each row names a gain over #1 and the cost paid for it.
   ────────────────────────────────────────────────────────────────── */
.vm-results-tradeoffs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vm-results-tradeoffs-intro {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  margin-bottom: 4px;
}
.vm-results-tradeoffs-intro strong { color: var(--text-primary, #0f172a); font-weight: 600; }
body.dark-mode .vm-results-tradeoffs-intro { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-tradeoffs-intro strong { color: var(--text-primary-dark, #f1f5f9); }

.vm-results-tradeoffs-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  font-size: 0.8125rem;
}
.vm-results-tradeoffs-empty > i { font-size: 1rem; }
body.dark-mode .vm-results-tradeoffs-empty {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.vm-results-tradeoff-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
/* Icon + heading share the top row; icon top-aligned so it pins to the first
   line of a multi-line heading instead of floating to the heading's centre. */
.vm-results-tradeoff-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vm-results-tradeoff-head .vm-results-tradeoff-question { flex: 1; min-width: 0; }
/* The "Use this" action is a consistent full-width row at the foot of every
   card, so it lands on the same rail whether the heading took one line or
   four. mt:auto lets cards in the desktop 3-up grid bottom-align their buttons
   even when headings differ in height. */
.vm-results-tradeoff-use {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.vm-results-tradeoff-row:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--slate-300, #cbd5e1);
}
body.dark-mode .vm-results-tradeoff-row {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
body.dark-mode .vm-results-tradeoff-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.vm-results-tradeoff-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  flex-shrink: 0;
}
.vm-results-tradeoff-row[data-axis="fair"] .vm-results-tradeoff-icon {
  background: rgba(14, 165, 233, 0.10); color: #0284c7;
}
.vm-results-tradeoff-row[data-axis="available"] .vm-results-tradeoff-icon {
  background: rgba(16, 185, 129, 0.10); color: #059669;
}
.vm-results-tradeoff-row[data-axis="businessHours"] .vm-results-tradeoff-icon {
  background: rgba(245, 158, 11, 0.10); color: #b45309;
}
body.dark-mode .vm-results-tradeoff-row[data-axis="fair"] .vm-results-tradeoff-icon {
  background: rgba(14, 165, 233, 0.18); color: #7dd3fc;
}
body.dark-mode .vm-results-tradeoff-row[data-axis="available"] .vm-results-tradeoff-icon {
  background: rgba(16, 185, 129, 0.18); color: #6ee7b7;
}
body.dark-mode .vm-results-tradeoff-row[data-axis="businessHours"] .vm-results-tradeoff-icon {
  background: rgba(245, 158, 11, 0.18); color: #fcd34d;
}

.vm-results-tradeoff-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vm-results-tradeoff-headline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}
.vm-results-tradeoff-time {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  font-variant-numeric: tabular-nums;
}
.vm-results-tradeoff-sub {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}
body.dark-mode .vm-results-tradeoff-headline { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-tradeoff-time     { color: var(--text-primary-dark, #e2e8f0); }
body.dark-mode .vm-results-tradeoff-sub      { color: var(--text-secondary-dark, #94a3b8); }

.vm-results-tradeoff-jump {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
}
.vm-results-tradeoff-row:hover .vm-results-tradeoff-jump {
  background: var(--slate-100, #f1f5f9);
  color: var(--text-primary, #0f172a);
}
body.dark-mode .vm-results-tradeoff-jump { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-tradeoff-row:hover .vm-results-tradeoff-jump {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary-dark, #f1f5f9);
}

/* ============================================================
   FIND TIMES RESULTS — HERO + COMPACT REDESIGN (2026-05)
   Fairness-led scorecard for #1, aligned compact list for #2-N.
   Aligns every card to a shared 3-column grid so labels, bars,
   scores, and badges share vertical rails. Fairness is the
   primary visual cue; composite is the tiebreaker.
   ============================================================ */

/* ---------- Hero card (top match, always-expanded scorecard) ------ */
/* ── Verdict header (decision-first) ──────────────────────────────────
   The confident headline above the hero: the call to make + a confidence
   read. Tier drives the accent (clear=teal, close=blue, tied=amber,
   none/fallback=slate). Word + icon convey confidence — never colour alone. */
.vm-results-verdict {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--primary-200, #99f6e4);
  background: linear-gradient(180deg, rgba(20,184,166,0.10) 0%, rgba(20,184,166,0.03) 100%);
}
.vm-results-verdict-decision {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.vm-results-verdict-verb {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--primary-700, #0f766e);
}
.vm-results-verdict-slot {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1f2937);
}
.vm-results-verdict-confidence {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-700, #0f766e);
}
.vm-results-verdict-confidence i { font-size: 0.85rem; }
/* "Also works: Thu 24 Sep · 3pm-5pm · …" under a clean verdict (2026-09-23):
   equally good options, stated as choices. Secondary voice, wraps freely. */
.vm-results-verdict-also {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary, #64748b);
}
body.dark-mode .vm-results-verdict-also { color: var(--text-secondary-dark, #94a3b8); }
/* Cold-start honesty note: fairness not yet informed. Quiet, secondary — an
   honest caveat, not a warning. Sits under the confidence read. */
.vm-results-verdict-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary, #64748b);
}
.vm-results-verdict-note i {
  font-size: 0.8rem;
  margin-top: 1px;
  opacity: 0.75;
}
/* Tier accents */
.vm-results-verdict[data-confidence="close"] {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.03) 100%);
}
.vm-results-verdict[data-confidence="close"] .vm-results-verdict-verb,
.vm-results-verdict[data-confidence="close"] .vm-results-verdict-confidence { color: #1d4ed8; }
.vm-results-verdict[data-confidence="tied"] {
  border-color: #fde68a;
  background: linear-gradient(180deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.03) 100%);
}
.vm-results-verdict[data-confidence="tied"] .vm-results-verdict-verb,
.vm-results-verdict[data-confidence="tied"] .vm-results-verdict-confidence { color: #b45309; }
.vm-results-verdict[data-confidence="none"] {
  border-color: var(--slate-300, #cbd5e1);
  background: linear-gradient(180deg, rgba(100,116,139,0.10) 0%, rgba(100,116,139,0.03) 100%);
}
.vm-results-verdict[data-confidence="none"] .vm-results-verdict-verb,
.vm-results-verdict[data-confidence="none"] .vm-results-verdict-confidence { color: var(--slate-600, #475569); }
body.dark-mode .vm-results-verdict {
  border-color: rgba(20,184,166,0.35);
  background: linear-gradient(180deg, rgba(20,184,166,0.16) 0%, rgba(20,184,166,0.05) 100%);
}
body.dark-mode .vm-results-verdict-slot { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-verdict-verb,
body.dark-mode .vm-results-verdict-confidence { color: #5eead4; }
body.dark-mode .vm-results-verdict[data-confidence="close"] .vm-results-verdict-verb,
body.dark-mode .vm-results-verdict[data-confidence="close"] .vm-results-verdict-confidence { color: #93c5fd; }
body.dark-mode .vm-results-verdict[data-confidence="tied"] .vm-results-verdict-verb,
body.dark-mode .vm-results-verdict[data-confidence="tied"] .vm-results-verdict-confidence { color: #fcd34d; }
/* Larger verdict on a wide (full-screen) modal — see two-pane reflow. */
@media (min-width: 1100px) {
  .vm-results-verdict-verb,
  .vm-results-verdict-slot { font-size: 1.6rem; }
}

.vm-results-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(20,184,166,0.05) 0%, var(--card-bg-primary, #ffffff) 70%);
  border: 1.5px solid var(--primary-200, #99f6e4);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(20,184,166,0.08);
  margin-bottom: 14px;
}
body.dark-mode .vm-results-hero-card {
  background: linear-gradient(180deg, rgba(20,184,166,0.12) 0%, rgba(255,255,255,0.03) 70%);
  border-color: rgba(20,184,166,0.35);
  box-shadow: 0 4px 16px rgba(20,184,166,0.18);
}

/* Fallback variant — no slot clears the essential gate, so the card
   sheds its "winner" gradient and trophy chrome. Amber accent matches
   the warning banner the renderer puts above the podium. */
.vm-results-hero-card[data-fallback="true"] {
  background: var(--card-bg-primary, #ffffff);
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245,158,11,0.10);
}
.vm-results-hero-card[data-fallback="true"] .vm-results-hero-eyebrow {
  background: #fef3c7;
  color: #92400e;
}
body.dark-mode .vm-results-hero-card[data-fallback="true"] {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.50);
  box-shadow: 0 4px 16px rgba(245,158,11,0.18);
}
body.dark-mode .vm-results-hero-card[data-fallback="true"] .vm-results-hero-eyebrow {
  background: rgba(245,158,11,0.20);
  color: #fcd34d;
}

/* Compact card fallback marker — left-edge amber accent + pill in the
   title row. The level badge stays so the user still sees how the slot
   scores relative to the fallback cohort. */
.vm-results-ranked-card[data-fallback="true"] {
  border-left: 3px solid #f59e0b;
}
body.dark-mode .vm-results-ranked-card[data-fallback="true"] {
  border-left-color: rgba(245,158,11,0.65);
}
.vm-results-fallback-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  vertical-align: middle;
}
body.dark-mode .vm-results-fallback-pill {
  background: rgba(245,158,11,0.20);
  color: #fcd34d;
}

/* Three-question breakdown — replaces the engineer-shaped dim bars on
   the hero / expanded compact cards. Each question is a single row
   coloured by the canonical tone palette (excellent/good/acceptable/
   poor) so the user reads "yes / mostly / partly / no" at a glance. */
.vm-results-questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.vm-results-question {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 3px solid #cbd5e1;
    background: var(--slate-50, #f8fafc);
}
/* Question rows — large-surface tint variant. Border uses --tier-*-fill
   for a brighter accent than -fg; bg uses --tier-*-tint (paler than the
   badge -bg). Dark-mode rules deleted; token cascade handles them. */
.vm-results-question[data-tone="excellent"] { border-left-color: var(--tier-excellent-fill); background: var(--tier-excellent-tint); }
.vm-results-question[data-tone="good"]      { border-left-color: var(--tier-good-fill);      background: var(--tier-good-tint); }
.vm-results-question[data-tone="acceptable"]{ border-left-color: var(--tier-acceptable-fill); background: var(--tier-acceptable-tint); }
.vm-results-question[data-tone="poor"]      { border-left-color: var(--tier-poor-fill);      background: var(--tier-poor-tint); }
body.dark-mode .vm-results-question { background: rgba(255,255,255,0.04); }
.vm-results-question-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-results-question-head i {
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
}
.vm-results-question-label {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.vm-results-question-score {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}
.vm-results-question-detail {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    margin-left: 22px;
}
body.dark-mode .vm-results-question-label,
body.dark-mode .vm-results-question-score { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-question-detail { color: var(--text-secondary-dark, #94a3b8); }

/* Organizer-only badge — reinforces that the per-attendee breakdown
   (with Essential/Invited weighting, named outliers, etc.) is private
   to the organizer per attendee_priority_sensitivity. Subtle pill;
   the lock icon carries the meaning. */
.vm-results-organizer-only {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    background: rgba(0,0,0,0.04);
    border-radius: 999px;
    cursor: help;
    /* The parent section head is uppercase — without these resets the pill
       SHOUTED ("ONLY YOU SEE THIS") and wrapped to two lines beside long
       headings. It's a whisper, not a heading. */
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    flex-shrink: 0;
}
.vm-results-organizer-only i { font-size: 0.625rem; }
body.dark-mode .vm-results-organizer-only {
    color: var(--text-tertiary-dark, #94a3b8);
    background: rgba(255,255,255,0.06);
}

/* "How we ranked" disclosure — engineer-shaped raw dim bars + a one-
   liner explaining the composite weights. Closed by default so the
   typical user sees the three-question layer above. */
.vm-results-how-we-ranked {
    margin-top: 12px;
    padding: 8px 4px 0;
    border-top: 1px dashed rgba(0,0,0,0.08);
}
.vm-results-how-we-ranked summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    padding: 4px 8px;
    border-radius: 6px;
    list-style: none;
}
.vm-results-how-we-ranked summary::-webkit-details-marker { display: none; }
.vm-results-how-we-ranked summary:hover {
    background: var(--slate-100, #f1f5f9);
    color: var(--text-primary, #0f172a);
}
.vm-results-how-we-ranked summary i { font-size: 0.6875rem; }
.vm-results-how-we-ranked[open] summary { margin-bottom: 8px; }
.vm-results-how-we-ranked-note {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 0.6875rem;
    color: var(--text-secondary, #64748b);
    background: var(--slate-50, #f8fafc);
    border-radius: 6px;
    line-height: 1.5;
}
body.dark-mode .vm-results-how-we-ranked { border-top-color: rgba(255,255,255,0.08); }
body.dark-mode .vm-results-how-we-ranked summary { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-how-we-ranked summary:hover { background: rgba(255,255,255,0.04); color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-how-we-ranked-note { background: rgba(255,255,255,0.04); color: var(--text-secondary-dark, #94a3b8); }

/* Propose-flow card — same chrome as the Results-tab compact card with
   a leading checkbox for multi-select. Highlights when checked so the
   user sees which slots will end up in the poll. */
.vm-propose-card.is-selected {
  border-color: var(--primary-400, #2dd4bf);
  background: rgba(20,184,166,0.04);
}
body.dark-mode .vm-propose-card.is-selected {
  background: rgba(20,184,166,0.10);
  border-color: rgba(45,212,191,0.45);
}
.vm-propose-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  cursor: pointer;
  position: relative;
}
.vm-propose-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
/* On touch the 22px tick is a 44x44 target; the negative margin gives the
   extra back so the card does not grow (one checkbox size, 2026-09-29). */
@media (pointer: coarse) {
  .vm-propose-checkbox { min-width: 44px; min-height: 44px; margin: -11px -7px -11px -11px; }
}
.vm-propose-checkmark {
  display: inline-flex;
  width: var(--checkbox-size, 18px);
  height: var(--checkbox-size, 18px);
  border: 1.5px solid var(--slate-300, #cbd5e1);
  border-radius: 5px;
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.vm-propose-checkbox input:checked + .vm-propose-checkmark {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'><polyline points='3 8 6.5 11.5 13 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
body.dark-mode .vm-propose-checkmark { border-color: var(--slate-500, #64748b); }

.vm-results-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* Narrow phones: the eyebrow pill + score block can't sit side-by-side, so
     let them wrap onto two lines instead of the score shoving off the card's
     right edge. */
  flex-wrap: wrap;
}
.vm-results-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(245,158,11,0.30);
}
.vm-results-hero-eyebrow i { font-size: 0.75rem; }
body.dark-mode .vm-results-hero-eyebrow { color: #422006; }

.vm-results-hero-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Never let the score block push past the card edge — if it can't fit next
     to the eyebrow it wraps to its own line (see .vm-results-hero-head) rather
     than clipping the "Fairness" label off-screen on mobile. */
  flex-wrap: wrap;
  max-width: 100%;
}
.vm-results-hero-score-value {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #0f172a);
}
.vm-results-hero-score-denom {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-tertiary, #94a3b8);
  margin-left: -2px;
}
.vm-results-hero-score-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  margin-left: 8px;
  align-self: center;
}
.vm-results-hero-score[data-tone="excellent"] .vm-results-hero-score-value { color: var(--tier-excellent-fg); }
.vm-results-hero-score[data-tone="good"]      .vm-results-hero-score-value { color: var(--tier-good-fg); }
.vm-results-hero-score[data-tone="acceptable"] .vm-results-hero-score-value { color: var(--tier-acceptable-fg); }
.vm-results-hero-score[data-tone="poor"]      .vm-results-hero-score-value { color: var(--tier-poor-fg); }
body.dark-mode .vm-results-hero-score-label { color: var(--text-secondary-dark, #94a3b8); }

/* Mobile: the uppercase, letter-spaced "Fairness"/"Time quality" label is the
   widest part of the score block and was the piece running off the card edge.
   On narrow phones, wrap it under the numeral (full width) instead of holding
   it on the same line — the wrappable head/score above already lets it drop. */
@media (max-width: 480px) {
  .vm-results-hero-score-value { font-size: 2.25rem; }
  .vm-results-hero-score-label {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
    align-self: auto;
  }
}

.vm-results-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f172a);
  line-height: 1.2;
}
body.dark-mode .vm-results-hero-title { color: var(--text-primary-dark, #f1f5f9); }

.vm-results-hero-benefit {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary, #475569);
}
body.dark-mode .vm-results-hero-benefit { color: var(--text-secondary-dark, #cbd5e1); }

/* "Watch out" caveat — the honest single downside. Amber, restrained;
   the candor is what makes the recommendation trustworthy. */
.vm-results-hero-watchout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.28);
  font-size: 0.85rem;
  color: #b45309;
  align-self: flex-start;
}
.vm-results-hero-watchout i { font-size: 0.8rem; opacity: 0.9; }
.vm-results-hero-watchout strong { font-weight: 700; }
body.dark-mode .vm-results-hero-watchout {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

/* "Other options (N)" — runner-ups collapsed by default so the verdict +
   hero own the first screen. */
.vm-results-others { margin-top: 8px; }
.vm-results-others-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  border-radius: 10px;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--surface-secondary, #f8fafc);
  user-select: none;
}
.vm-results-others-summary::-webkit-details-marker { display: none; }
.vm-results-others-summary:hover { background: var(--hover-bg, #f1f5f9); }
.vm-results-others-chevron { transition: transform 0.18s ease; font-size: 0.8rem; }
.vm-results-others[open] > .vm-results-others-summary .vm-results-others-chevron { transform: rotate(90deg); }
.vm-results-others-body { padding-top: 12px; }
body.dark-mode .vm-results-others-summary {
  color: var(--text-secondary-dark, #cbd5e1);
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
body.dark-mode .vm-results-others-summary:hover { background: rgba(255,255,255,0.07); }

/* ── Alternative-time carousel (mobile presentation of the runner-ups) ──
   Hidden by default; the ≤719px block reveals it and hides the <details>
   "Other options" list so the two never show at once. Built by
   buildAltCarouselHtml() in results-tab.js, wired by setupAltCarousel(). */
.vm-alt-carousel { display: none; }

.vm-alt-carousel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 2px 8px;
}
.vm-alt-carousel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.vm-alt-carousel-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
}
.vm-alt-carousel-hint i { font-size: 0.7rem; }

.vm-alt-carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  margin: 0 -2px;
  overscroll-behavior-x: contain;
}
.vm-alt-carousel-track::-webkit-scrollbar { display: none; }
/* The peeking next card is cut by the track edge on purpose (swipe cue), but
   a hard cut through "Low impact" read as a clipped card (2026-10-02). Fade
   the last 32px so the cut reads as "more this way". setupAltCarousel adds
   .is-at-end when the last card is fully in view, which drops the fade. */
.vm-alt-carousel-track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.vm-alt-carousel-track.is-at-end {
  -webkit-mask-image: none;
          mask-image: none;
}

.vm-alt-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 60%;
  max-width: 230px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--surface-primary, #fff);
  cursor: pointer;
  box-shadow: inset 4px 0 0 var(--tone-accent, var(--slate-300, #cbd5e1));
}
.vm-alt-card[data-tone="excellent"] { --tone-accent: #16a34a; }
.vm-alt-card[data-tone="good"]      { --tone-accent: #14b8a6; }
.vm-alt-card[data-tone="acceptable"]{ --tone-accent: #f59e0b; }
.vm-alt-card[data-tone="poor"]      { --tone-accent: #dc2626; }
.vm-alt-card:active { transform: scale(0.99); }

.vm-alt-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vm-alt-card-rank {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  background: var(--surface-secondary, #f1f5f9);
}
.vm-alt-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vm-alt-card-tag i { font-size: 0.68rem; }
.vm-alt-card-tag[data-axis="fair"]          { color: #047857; }
.vm-alt-card-tag[data-axis="available"]     { color: #0369a1; }
/* was #b45309 (brown) — read as muddy next to the green/blue tags; amber-700
   keeps the "business hours" warm cue without the brown. */
.vm-alt-card-tag[data-axis="businessHours"] { color: #c2740a; }
.vm-alt-card-tag--plain { color: var(--text-tertiary, #94a3b8); font-weight: 600; }

/* Same comparison line on the phone carousel card; wraps inside the card. */
.vm-alt-card-diff {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary-700, #0f766e);
  overflow-wrap: anywhere;
}
body.dark-mode .vm-alt-card-diff { color: var(--primary-300, #5eead4); }
.vm-alt-card-time {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1f2937);
  /* Date pill on its own line, time range under it, on EVERY card. It used
     to wrap only when the pair did not fit, so "Fri 2 Oct 09:00-11:15" sat on
     one line and "Mon 5 Oct" pushed its time to a second line on the next
     card (2026-10-02). A fixed stack keeps the cards identical. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.vm-alt-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Reachability line on runner-up cards — "N of M can come". The dot/icon and
   text take the same traffic-light tone the breakdown uses, so a swipeable
   alternative can never hide that it leaves people unreachable. */
.vm-alt-card-reach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-secondary, #475569);
}
.vm-alt-card-reach i { font-size: 0.74rem; }
.vm-alt-card-reach[data-tone="excellent"] { color: var(--tier-excellent-fill, #059669); }
.vm-alt-card-reach[data-tone="good"]       { color: #047857; }
.vm-alt-card-reach[data-tone="acceptable"] { color: var(--tier-acceptable-fg, #b45309); }
.vm-alt-card-reach[data-tone="poor"]       { color: var(--tier-poor-fill, #dc2626); }

/* WHO PAYS FOR THE SLOT (2026-09-15). Sits under the "N of M can come" line
   and names the one or two people taking the awkward hour, so a headcount
   cannot read as "everyone is comfortable". Deliberately QUIETER than the
   reach line above it: this is context for the number, not a second verdict,
   and it carries no tone colour because it is never good or bad news on its
   own. Score-invisibility holds — a name and a clock time, never a numeral. */
.vm-alt-card-pays {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--text-tertiary, #64748b);
}
.vm-alt-card-pays i { font-size: 0.68rem; opacity: 0.8; }

/* Carousel mini-bar — same treatment the desktop runner-up column already
   got: the label takes its own micro-line so bar + phrase share one row.
   Inline (label | bar | "Modest impact") does not fit a ~197px card at 360px,
   which is what pushed the phrase over the card edge. Mirrors
   .vm-results-ranked-fairness rather than inventing a second geometry. */
.vm-alt-card .vm-results-mini-bar {
  flex-wrap: wrap;
  row-gap: 3px;
  width: 100%;
}
.vm-alt-card .vm-results-mini-bar-label {
  width: 100%;
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.08em;
}
/* The track is the elastic part; without an explicit min-width:0 a flex item
   refuses to shrink below its content and squeezes the phrase instead.
   ⚠️BUT THE BAR MUST STAY A BAR. Protecting the phrase alone just moves the
   stub: measured @320px in vi, a 117px phrase left the track 22px. `min-width`
   here is a FLOOR, not a size — once bar + phrase cannot share a row at that
   floor, flex-wrap drops the phrase to its own line and BOTH stay readable.
   That is why the score is allowed to wrap to a new LINE (`flex-wrap` on the
   parent) while never wrapping WITHIN itself (`white-space: nowrap`). */
.vm-alt-card .vm-results-mini-bar-track {
  flex: 1 1 auto;
  min-width: 56px;
}
.vm-alt-card .vm-results-mini-bar-score {
  font-size: 0.78rem;
  min-width: 0;
  text-align: left;
}

.vm-alt-card-schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  /* Cards stretch to the tallest in the track; auto pushes every Schedule
     button to the same bottom line. */
  margin-top: auto;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  color: #fff;
  background: var(--primary-600, #0d9488);
}
.vm-alt-card-schedule:hover { background: var(--primary-700, #0f766e); }
.vm-alt-card-schedule i { font-size: 0.8rem; flex-shrink: 0; }
.vm-alt-card-schedule span { white-space: nowrap; }

.vm-alt-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.vm-alt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-300, #cbd5e1);
  transition: background 0.18s ease, transform 0.18s ease;
}
.vm-alt-dot.is-active {
  background: var(--primary-500, #14b8a6);
  transform: scale(1.25);
}

body.dark-mode .vm-alt-card {
  border-color: rgba(255,255,255,0.10);
  background: var(--surface-elevated, #1e293b);
}
body.dark-mode .vm-alt-card-time { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-alt-card-rank {
  color: var(--text-secondary-dark, #cbd5e1);
  background: rgba(255,255,255,0.06);
}
body.dark-mode .vm-alt-dot { background: rgba(255,255,255,0.22); }
body.dark-mode .vm-alt-carousel-title { color: var(--text-secondary-dark, #cbd5e1); }

/* Hero breakdown — two-column on wider screens (dims on left,
   attendee list on right), single column when cramped.
   Explicit placement: questions row 1 / "How we ranked" row 2 in the
   LEFT column, attendee list spanning both rows on the right. With
   auto-placement the details node landed in a second row BELOW the
   row stretched to the (tall) attendee list, leaving a dead void
   between the question cards and the disclosure. */
.vm-results-hero-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.vm-results-hero-body .vm-results-breakdown-section { grid-column: 1; grid-row: 1; }
.vm-results-hero-body .vm-results-how-we-ranked     { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
.vm-results-hero-body .vm-inspector-attendees       { grid-column: 2; grid-row: 1 / 3; }
body.dark-mode .vm-results-hero-body { border-top-color: rgba(255,255,255,0.08); }
@media (max-width: 720px) {
  .vm-results-hero-body { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .vm-results-hero-body .vm-results-breakdown-section,
  .vm-results-hero-body .vm-results-how-we-ranked,
  .vm-results-hero-body .vm-inspector-attendees {
    grid-column: 1;
    grid-row: auto;
  }
}
.vm-results-hero-body .vm-results-breakdown-section,
.vm-results-hero-body .vm-inspector-attendees {
  margin: 0;
}
.vm-results-hero-body .vm-inspector-attendees {
  padding-top: 0;
  border-top: none;
}

.vm-results-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  /* Own stacking context above any decorative sibling/pseudo layer so the
     Schedule button always receives the tap (a hero ::before / overflow layer
     was intercepting the click on mobile). */
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
body.dark-mode .vm-results-hero-footer { border-top-color: rgba(255,255,255,0.08); }
/* The Schedule CTA must always be tappable and never clipped/overlaid. */
.vm-results-hero-schedule {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
/* Mobile: the composite label + Schedule button no longer fit side-by-side
   cleanly (the button was drifting out of alignment / partly off-row). Stack
   them so the full-width button is unmissable and its whole area is tappable. */
@media (max-width: 560px) {
  .vm-results-hero-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vm-results-hero-footer .vm-results-hero-schedule {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
    min-height: 44px; /* comfortable tap target */
  }
}
.vm-results-hero-composite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  /* Let the "Overall <level>" label give way to the fixed-size Schedule button
     rather than shoving it off the row. */
  flex: 1 1 auto;
  min-width: 0;
}
.vm-results-hero-composite strong {
  color: var(--text-primary, #0f172a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .vm-results-hero-composite { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-hero-composite strong { color: var(--text-primary-dark, #f1f5f9); }

.vm-results-hero-schedule {
  padding: 10px 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* This is a global .btn (flex:1, overflow:hidden). In the hero footer that
     let the label wrap and then get clipped, deforming the box. Pin it to its
     content, keep the label on one line, and let the icon+text shrink cleanly
     rather than overflow. */
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}
.vm-results-hero-schedule span { min-width: 0; }
.vm-results-hero-schedule i { font-size: 0.875rem; flex-shrink: 0; }

/* ---------- Runners (compact cards) header --------------------- */
.vm-results-runners-header {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  margin: 4px 0 6px;
  padding-left: 2px;
}
/* Group runner-ups by axis-lead — small margin between sections so the
   "Want a fairer balance? / Want more people available?" prompts read
   as separate questions, not one undifferentiated list. */
.vm-results-runners-group + .vm-results-runners-group {
  margin-top: 18px;
}
.vm-results-runners-group[data-axis="fair"] .vm-results-runners-header { color: #047857; }
.vm-results-runners-group[data-axis="available"] .vm-results-runners-header { color: #0369a1; }
.vm-results-runners-group[data-axis="businessHours"] .vm-results-runners-header { color: #b45309; }
body.dark-mode .vm-results-runners-group[data-axis="fair"] .vm-results-runners-header { color: #6ee7b7; }
body.dark-mode .vm-results-runners-group[data-axis="available"] .vm-results-runners-header { color: #7dd3fc; }
body.dark-mode .vm-results-runners-group[data-axis="businessHours"] .vm-results-runners-header { color: #fbbf24; }

/* ---------- Compact card grid (shared rails for #2..#N) -------- */
/* The card stacks: summary row, attendee strip, breakdown. The summary is a
   4-track grid (rank | body | fairness | actions); the old 5-track template
   had a phantom column that pulled the actions left ("alignment seems off"). */
.vm-results-ranked-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.vm-results-ranked-card .vm-results-ranked-summary {
  display: grid;
  /* rank | body | fairness | actions — exactly four children, so the
     template has four tracks (the old fifth phantom track pulled the
     actions cluster left and read as misalignment). */
  grid-template-columns: 36px minmax(0, 1fr) minmax(120px, 160px) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.vm-results-ranked-card .vm-results-ranked-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Attendee strip — own full-width row beneath the summary so the pills
   never stretch the grid columns. Indented to align under the BODY column:
   the cards always carry data-tone, whose summary gets padding-left:10px
   (not the shorthand's 14px), so the body starts at 10 + 36 (rank) + 14
   (gap) = 60px. (Was 64px → a visible 4px misalignment.) */
.vm-results-ranked-attendees {
  padding: 0 14px 12px calc(10px + 36px + 14px);
}
.vm-results-ranked-attendees:empty { display: none; }
.vm-results-ranked-attendees .vm-results-pills {
  margin-top: 0;
}
/* Compact rank chip — "#2"/"#3"/etc. No medal — only #1 gets the
   trophy treatment, so runners stay quieter. */
.vm-results-ranked-card .vm-results-rank-badge {
  width: 36px;
  height: 36px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--slate-100, #f1f5f9);
  color: var(--text-secondary, #64748b);
  box-shadow: none;
  border: 1px solid var(--slate-200, #e2e8f0);
}
body.dark-mode .vm-results-ranked-card .vm-results-rank-badge {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary-dark, #94a3b8);
  border-color: rgba(255,255,255,0.10);
}

/* Right-column action cluster — horizontal now, not vertical.
   Level badge + schedule + chevron share one baseline so the eye
   sees a clean column down the list. */
.vm-results-ranked-card .vm-results-ranked-actions {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Fairness cell — its own grid column so bars line up across rows. */
.vm-results-ranked-fairness {
  display: flex;
  align-items: center;
}

/* ---------- Fairness mini-bar (used in hero + compact) --------- */
.vm-results-mini-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.vm-results-mini-bar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}
.vm-results-mini-bar-track {
  flex: 1;
  height: 8px;
  background: var(--slate-100, #f1f5f9);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  min-width: 60px;
}
body.dark-mode .vm-results-mini-bar-track {
  background: rgba(255,255,255,0.08);
}
.vm-results-mini-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s ease;
}
.vm-results-mini-bar[data-tone="excellent"] .vm-results-mini-bar-fill { background: var(--tier-excellent-fill); }
.vm-results-mini-bar[data-tone="good"]      .vm-results-mini-bar-fill { background: var(--tier-good-fill); }
.vm-results-mini-bar[data-tone="acceptable"] .vm-results-mini-bar-fill { background: var(--tier-acceptable-fill); }
.vm-results-mini-bar[data-tone="poor"]      .vm-results-mini-bar-fill { background: var(--tier-poor-fill); }

/* Tone-coloured score number so the digits speak alongside the bar.
   No red on "poor" — amber is the floor; poor results are honest
   trade-offs, not failures. Matches the hero card's score-value
   palette so the same fairness tier looks the same everywhere. */
.vm-results-mini-bar[data-tone="excellent"] .vm-results-mini-bar-score { color: var(--tier-excellent-fg); }
.vm-results-mini-bar[data-tone="good"]      .vm-results-mini-bar-score { color: var(--tier-good-fg); }
.vm-results-mini-bar[data-tone="acceptable"] .vm-results-mini-bar-score { color: var(--tier-acceptable-fg); }
.vm-results-mini-bar[data-tone="poor"]      .vm-results-mini-bar-score { color: var(--tier-poor-fg); }

/* Tone-coloured left-edge accent on runner-up cards. 4px strip tells
   the eye "these are ranked by quality" without painting the whole
   card. ::before lets us keep the card background neutral and the
   border-radius intact. Hero card unaffected — it has its own
   trophy treatment.
   Position absolute against the card's existing position:relative;
   no extra wrapper needed. */
.vm-results-ranked-card[data-tone]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  pointer-events: none;
}
.vm-results-ranked-card[data-tone="excellent"]::before  { background: #059669; }
.vm-results-ranked-card[data-tone="good"]::before       { background: #34d399; }
.vm-results-ranked-card[data-tone="acceptable"]::before { background: #f59e0b; }
.vm-results-ranked-card[data-tone="poor"]::before       { background: #dc2626; }
body.dark-mode .vm-results-ranked-card[data-tone="excellent"]::before  { background: #34d399; }
body.dark-mode .vm-results-ranked-card[data-tone="good"]::before       { background: #6ee7b7; }
body.dark-mode .vm-results-ranked-card[data-tone="acceptable"]::before { background: #fbbf24; }
body.dark-mode .vm-results-ranked-card[data-tone="poor"]::before       { background: #f87171; }
/* Nudge content right so it doesn't sit under the accent strip. */
.vm-results-ranked-card[data-tone] .vm-results-ranked-summary {
  padding-left: 10px;
}
.vm-results-ranked-card[data-tone] .vm-results-breakdown {
  padding-left: 10px;
}

/* Left-align the time + why-line in the body column so the runner-up
   list reads as a clean left rail under the rank badges (the centred
   variant left short time labels floating mid-column and made the list
   look ragged). */
.vm-results-ranked-card .vm-results-ranked-info {
  text-align: left;
}
.vm-results-ranked-card .vm-results-ranked-attendees .vm-results-pills {
  justify-content: flex-start;
}
/* ⭐THIS SLOT HOLDS A PHRASE, NOT A NUMERAL (2026-09-23, owner: "these need
   spatially optimizing").
   `min-width: 26px; text-align: right` was sized for the two-digit score this
   element used to carry. It now renders fairnessBandWord() — "Good fit",
   "Modest impact", "Notable impact" — so the box was ~10px narrower than its
   own content at 360px: MEASURED scrollWidth 36 in a 26px box, overflowing the
   carousel card's padding box by 13.7px and wrapping to 42px tall against an
   8px bar. `min-width` cannot shrink a flex item either — the default
   `min-width:auto` on the track is what actually yields. Give the phrase a
   real inline box and let it keep one line; the TRACK is the elastic part. */
.vm-results-mini-bar-score {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #0f172a);
  min-width: 26px;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}
body.dark-mode .vm-results-mini-bar-score { color: var(--text-primary-dark, #f1f5f9); }

/* Hero card's mini-bar gets a little extra breathing room because
   the label is visible there. */
.vm-results-hero-card > .vm-results-mini-bar {
  padding: 4px 0 0;
}

/* Runner-up fairness column — the labelled variant in a 120-160px track:
   "FAIRNESS" sits on its own micro-line above bar + score, so the number
   can't be misread as part of the (composite) level badge that used to
   sit beside it. */
.vm-results-ranked-fairness .vm-results-mini-bar {
  flex-wrap: wrap;
  row-gap: 2px;
}
.vm-results-ranked-fairness .vm-results-mini-bar-label {
  width: 100%;
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* Level badge inline with the slot time on runner-up cards. */
.vm-results-ranked-time .vm-results-level-badge {
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* ---------- Attendee dot + status word ------------------------- */
/* Re-layout .vm-inspector-attendee from 4-column to 5-column so the
   "Hardest hit" chip has its own slot and never wraps under the dot. */
.vm-inspector-attendee {
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  gap: 8px;
}
.vm-inspector-attendee-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px rgba(15,23,42,0.06);
}
body.dark-mode .vm-inspector-attendee-dot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.10);
}
.vm-inspector-attendee-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(245,158,11,0.14);
  color: #b45309;
  white-space: nowrap;
}
.vm-inspector-attendee-flag i { font-size: 0.625rem; }
body.dark-mode .vm-inspector-attendee-flag {
  background: rgba(245,158,11,0.22);
  color: #fcd34d;
}

/* Mobile reflow of the per-person row (2026-07-16 "Mobile visibility"): the
   default 5-column single-line grid (avatar | name | time | status | flag)
   crowds on a phone — a long place name plus the time, an "After work" chip and
   a "Hardest" chip all fought for one non-wrapping line, so they read as one
   jammed run of text ("HVHanoi, Vietnam9pm After workHardest"). Below 480px,
   switch the flat row to a wrapping flexbox: the avatar leads, the name takes
   the rest of the first line (flex-basis forces the chips to wrap), then time +
   status + flag flow onto a second line with real spacing. Grid can't do this
   cleanly here because the fields are flat siblings (no wrapper to sub-group),
   whereas flex-wrap + a full-basis name reflows them with no markup change.
   Nothing is hidden — the same facts, just stacked so each is legible. */
@media (max-width: 480px) {
  .vm-inspector-attendee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 0;
  }
  .vm-inspector-attendee-pill { flex: 0 0 auto; }
  /* Name claims the rest of the first line (avatar is 28px + 8px gap ≈ 36px), so
     every following chip is pushed onto the next flex line. flex-grow keeps it
     filling any slack; the large basis is what guarantees the wrap. */
  .vm-inspector-attendee-name {
    flex: 1 1 calc(100% - 44px);
    min-width: 0;
    white-space: normal;      /* let a long "City, Country" wrap rather than clip */
  }
  /* time, status chip and Hardest flag ride the second line, left-aligned and
     indented to sit under the name (past the 28px avatar + its gap). */
  .vm-inspector-attendee-time   { flex: 0 0 auto; margin-left: 36px; }
  .vm-inspector-attendee-status,
  .vm-inspector-attendee-flag   { flex: 0 0 auto; margin-left: 0; }
}

/* ---------- Trade-offs reframe (question + cost line) ---------- */
.vm-results-tradeoff-question {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}
.vm-results-tradeoff-cost {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}
body.dark-mode .vm-results-tradeoff-question { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-tradeoff-cost     { color: var(--text-secondary-dark, #94a3b8); }

/* Gain chip — names what the alternative actually wins ("Fairness 61 vs
   55") so the row's promise is a verifiable number, not vibes. Tinted by
   the axis the row represents (same hues as the row icon). */
.vm-results-tradeoff-gain {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: middle;
}
.vm-results-tradeoff-gain-vs { font-weight: 500; opacity: 0.75; }
.vm-results-tradeoff-gain[data-axis="fair"]          { background: rgba(5,150,105,0.10);  color: #047857; }
.vm-results-tradeoff-gain[data-axis="available"]     { background: rgba(3,105,161,0.10);  color: #0369a1; }
.vm-results-tradeoff-gain[data-axis="businessHours"] { background: rgba(180,83,9,0.10);   color: #b45309; }
body.dark-mode .vm-results-tradeoff-gain[data-axis="fair"]          { background: rgba(110,231,183,0.14); color: #6ee7b7; }
body.dark-mode .vm-results-tradeoff-gain[data-axis="available"]     { background: rgba(125,211,252,0.14); color: #7dd3fc; }
body.dark-mode .vm-results-tradeoff-gain[data-axis="businessHours"] { background: rgba(251,191,36,0.14);  color: #fbbf24; }

.vm-results-tradeoff-use {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.vm-results-tradeoff-use i { font-size: 0.6875rem; }

/* ============================================================
   FIND TIMES RESULTS — REFINEMENT PASS (2026-05)
   Medal podium for #2/#3/#4-N, range chip in the context strip,
   compact single-row breakdown.
   ============================================================ */

/* ── Medal podium for compact runner-up cards ────────────────────
   #2 silver, #3 bronze, #4+ pewter. #1 has its own hero card so it
   isn't routed through this badge — the gold tone lives on the
   hero eyebrow.

   Flat-medal recipe (not "ball" — these are struck discs, not orbs):
     1. Soft top sheen only (a thin lighter arc at the top edge),
        no radial bubble highlight.
     2. Low-contrast linear gradient — matte metal, not chrome.
     3. Darker raised rim (inset ring) that reads as the struck edge.
     4. Faint inner stamp ring (second inset ring at 4px) like the
        embossed border on a real medal.
     5. Soft outer drop shadow lifts the disc without making it
        look bouncy.
     6. Engraved numeral via text-shadow.
   Colours are hardcoded — podium positions, not status; shouldn't
   track the status palette. */
.vm-results-ranked-card .vm-results-rank-badge.rank-gold,
.vm-results-ranked-card .vm-results-rank-badge.rank-silver,
.vm-results-ranked-card .vm-results-rank-badge.rank-bronze,
/* ── Medal podium for compact runner-up cards ────────────────────
   #2 silver, #3 bronze, #4+ pewter. #1 has its own hero card so it
   isn't routed through this badge — the gold tone lives on the
   hero eyebrow.

   Flat-medal recipe (not "ball" — these are struck discs, not orbs):
     1. Soft top sheen only (a thin lighter arc at the top edge),
        no radial bubble highlight.
     2. Low-contrast linear gradient — matte metal, not chrome.
     3. Darker raised rim (inset ring) that reads as the struck edge.
     4. Faint inner stamp ring (second inset ring at 4px) like the
        embossed border on a real medal.
     5. Soft outer drop shadow lifts the disc without making it
        look bouncy.
     6. Engraved numeral via text-shadow.
   Colours are hardcoded — podium positions, not status; shouldn't
   track the status palette. */
.vm-results-ranked-card .vm-results-rank-badge.rank-gold,
.vm-results-ranked-card .vm-results-rank-badge.rank-silver,
.vm-results-ranked-card .vm-results-rank-badge.rank-bronze,
.vm-results-ranked-card .vm-results-rank-badge.rank-teal {
  position: relative;
  border: none;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Gold at the 40px ranked-card scale.

   ⚠️`rank-gold` previously existed ONLY under `.vm-results-hero-eyebrow`, at
   22px, because the only surface using it lifted #1 into a hero card. The
   FLAT lists (poll-builder, Find Best Time) have no hero, so their top pick
   now asks for gold too — without this rule it would fall through to the
   plain teal base badge, i.e. the BEST option would look like an also-ran.
   Same struck-disc recipe as silver / bronze / pewter. */
.vm-results-ranked-card .vm-results-rank-badge.rank-gold {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    linear-gradient(165deg,
      #fde68a 0%,
      #f59e0b 50%,
      #b45309 100%);
  color: #422006;
  box-shadow:
    inset 0 0 0 1px rgba(120, 53, 15, 0.55),
    inset 0 0 0 4px rgba(255, 255, 255, 0.20),
    inset 0 0 0 5px rgba(120, 53, 15, 0.18),
    0 1px 2px rgba(120, 53, 15, 0.28),
    0 2px 4px rgba(120, 53, 15, 0.16);
}
body.dark-mode .vm-results-ranked-card .vm-results-rank-badge.rank-gold {
  color: #1c1207;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    linear-gradient(165deg,
      #fcd34d 0%,
      #d97706 50%,
      #92400e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
.vm-results-ranked-card .vm-results-rank-badge.rank-silver {
  background:
    /* top sheen — thin highlight band along the upper arc */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    /* face — low-contrast matte silver */
    linear-gradient(165deg,
      #e2e8f0 0%,
      #cbd5e1 50%,
      #94a3b8 100%);
  color: #1e293b;
  box-shadow:
    /* raised rim — dark inset ring at the very edge */
    inset 0 0 0 1px rgba(71, 85, 105, 0.55),
    /* inner stamp ring — faint embossed border */
    inset 0 0 0 4px rgba(255, 255, 255, 0.15),
    inset 0 0 0 5px rgba(71, 85, 105, 0.18),
    /* lift from surface */
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 2px 4px rgba(15, 23, 42, 0.10);
}
.vm-results-ranked-card .vm-results-rank-badge.rank-bronze {
  background:
    linear-gradient(180deg,
      rgba(255, 230, 195, 0.40) 0%,
      rgba(255, 230, 195, 0.00) 35%),
    linear-gradient(165deg,
      #d97706 0%,
      #b45309 50%,
      #92400e 100%);
  color: #fff7ed;
  box-shadow:
    inset 0 0 0 1px rgba(60, 20, 0, 0.65),
    inset 0 0 0 4px rgba(255, 220, 170, 0.18),
    inset 0 0 0 5px rgba(60, 20, 0, 0.20),
    0 1px 2px rgba(120, 53, 15, 0.30),
    0 2px 4px rgba(120, 53, 15, 0.18);
}
.vm-results-ranked-card .vm-results-rank-badge.rank-teal {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    linear-gradient(165deg,
      #94a3b8 0%,
      #64748b 50%,
      #475569 100%);
  color: #f8fafc;
  box-shadow:
    inset 0 0 0 1px rgba(51, 65, 85, 0.55),
    inset 0 0 0 4px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px rgba(51, 65, 85, 0.18),
    0 1px 2px rgba(51, 65, 85, 0.22),
    0 2px 4px rgba(51, 65, 85, 0.12);
}

body.dark-mode .vm-results-ranked-card .vm-results-rank-badge.rank-silver {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    linear-gradient(165deg,
      #cbd5e1 0%,
      #94a3b8 50%,
      #475569 100%);
  color: #0f172a;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.70),
    inset 0 0 0 4px rgba(255, 255, 255, 0.12),
    inset 0 0 0 5px rgba(15, 23, 42, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.25);
}
body.dark-mode .vm-results-ranked-card .vm-results-rank-badge.rank-bronze {
  background:
    linear-gradient(180deg,
      rgba(255, 220, 170, 0.32) 0%,
      rgba(255, 220, 170, 0.00) 35%),
    linear-gradient(165deg,
      #b45309 0%,
      #92400e 50%,
      #431407 100%);
  color: #fff7ed;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(255, 220, 170, 0.12),
    inset 0 0 0 5px rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
/* Dark-mode pewter. ⚠️This override is why recolouring the light rule alone
   was not enough — it would have kept 4th+ teal on dark. */
body.dark-mode .vm-results-ranked-card .vm-results-rank-badge.rank-teal {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.00) 35%),
    linear-gradient(165deg,
      #64748b 0%,
      #475569 50%,
      #1e293b 100%);
  color: #f8fafc;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(207, 250, 254, 0.12),
    inset 0 0 0 5px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
}

/* ── Gold medal for the hero (#1) ───────────────────────────────
   The hero card carries the #1 gold medal so Find Times speaks the
   same gold/silver/bronze podium language as the Propose / Review
   Center. It sits inline in the eyebrow next to "Top Match", so it's
   sized to the eyebrow chip scale (not the 40px ranked badge). */
.vm-results-hero-eyebrow .vm-results-rank-badge.rank-gold {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #422006;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.00) 38%),
    linear-gradient(165deg,
      #fde68a 0%,
      #f59e0b 48%,
      #b45309 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 53, 15, 0.55),
    inset 0 0 0 3px rgba(255, 255, 255, 0.20),
    0 1px 2px rgba(120, 53, 15, 0.28),
    0 2px 4px rgba(120, 53, 15, 0.16);
}
body.dark-mode .vm-results-hero-eyebrow .vm-results-rank-badge.rank-gold {
  color: #1c1207;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.00) 38%),
    linear-gradient(165deg,
      #fcd34d 0%,
      #d97706 50%,
      #92400e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.22);
}

/* ── Context-strip range chip ───────────────────────────────────
   "Scanning Next 14 days" — the range is the most adjustable
   variable in the receipt, so it gets a small teal pill instead
   of being prose. Reads as something the user could change without
   actually being clickable yet (deferred — wiring belongs to a
   later pass). */
.vm-results-context-range {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 0 2px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-700, #0f766e);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0;
}
body.dark-mode .vm-results-context-range {
  background: rgba(20, 184, 166, 0.20);
  color: #5eead4;
}

/* ── Compact breakdown — single-row dim layout ──────────────────
   Replaces the 3-row stacked label/bar/hint with a single row:
   icon · label · bar · score. Reads top-to-bottom in 3 lines
   instead of 15. Hint text moves into the bar's title tooltip.
   Scoped under .vm-results-breakdown so we don't disturb the
   inspector card (which keeps the verbose stacked layout). */
.vm-results-breakdown .vm-inspector-dim {
  display: grid;
  grid-template-columns: 18px 1fr 32px;
  align-items: center;
  gap: 10px;
}
.vm-results-breakdown .vm-inspector-dim-head {
  display: contents;
}
.vm-results-breakdown .vm-inspector-dim-head > i {
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.875rem;
}
.vm-results-breakdown .vm-inspector-dim-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.vm-results-breakdown .vm-inspector-dim-score {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-left: 0; /* overrides the stacked-layout's margin-left:auto */
}
.vm-results-breakdown .vm-inspector-dim-bar {
  grid-column: 1 / -1;
  height: 6px;
}
.vm-results-breakdown .vm-inspector-dim-hint {
  display: none; /* moved to bar title attribute */
}
.vm-results-breakdown .vm-inspector-dims {
  gap: 10px;
}
body.dark-mode .vm-results-breakdown .vm-inspector-dim-label {
  color: var(--text-primary-dark, #f1f5f9);
}

/* Chevron lives in the right-actions cluster (legacy .vm-results-card-expand
   rule earlier in the file handles the 28×28 box). Full-width footer
   variant was removed — didn't combine with the centered body column
   and tone left-edge accent. */

/* ============================================
   FEATURE DISCOVERY DOT
   ============================================
   DEAD as of 2026-07-27: its only consumer, js/features/feature-discovery.js,
   was inert (FEATURES = {}) and has been deleted. No JS or HTML references
   .discovery-dot any more. Left in place deliberately — removing ~30 lines
   from the middle of this stylesheet is a separate, low-value change. Safe to
   delete in a dedicated CSS sweep. */
.discovery-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border: 2px solid var(--bg-primary, #ffffff);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: discovery-dot-pulse 2s ease-in-out infinite;
}
.discovery-dot.discovered {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: none;
}
body.dark-mode .discovery-dot {
    border-color: var(--bg-primary-dark, #0f172a);
}
@keyframes discovery-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .discovery-dot { animation: none; }
}

/* ============================================
   Team Schedule Policy section (DAYS-OFF-FAIRNESS-PLAN P4)
   ============================================ */

/* Enable toggle — a compact switch in the section header row. */
.gsm-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.gsm-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gsm-switch-track {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--slate-300, #cbd5e1);
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  padding: 2px;
}
.gsm-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.gsm-switch input:checked + .gsm-switch-track {
  background: var(--primary-500, #14b8a6);
}
.gsm-switch input:checked + .gsm-switch-track .gsm-switch-thumb {
  transform: translateX(16px);
}
.gsm-switch input:focus-visible + .gsm-switch-track {
  outline: 2px solid var(--primary-500, #14b8a6);
  outline-offset: 2px;
}
body.dark-mode .gsm-switch-track {
  background: var(--slate-600, #475569);
}

/* Body — dims when the policy is disabled, and blocks interaction. */
.gsm-sp-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.15s ease;
}
.gsm-sp-body-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.gsm-sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gsm-sp-row-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.gsm-sp-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}
body.dark-mode .gsm-sp-label {
  color: var(--slate-200, #e2e8f0);
}

.gsm-sp-core {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gsm-sp-arrow {
  color: var(--text-secondary, #64748b);
  font-size: 0.7rem;
}
.gsm-time-input {
  font: inherit;
  font-size: 0.85rem;
  padding: 5px 8px;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1e293b);
}
body.dark-mode .gsm-time-input {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
  color: var(--slate-100, #f1f5f9);
}

/* Core hours + team days off: the setup editor (drag bar, day row, actions;
   2026-09-29). Its look is the shared .wizard-time-range-preview /
   .day-selector / .day-action-btn CSS; this only lets it span the section. */
.gsm-sp-week > .wizard-time-range-preview,
.gsm-sp-week > .gsm-sp-per-day,
.gsm-sp-week > .gsm-sp-per-day-hint {
  width: 100%;
  box-sizing: border-box;
}
.gsm-sp-week > .gsm-sp-core { align-self: center; }
.gsm-sp-per-day-hint { margin: 0; text-align: center; }
.gsm-time-input:disabled { opacity: 0.55; }
/* Phones: this modal body is narrower than the setup screens, and "Core
   hours" is wider than "Typical", so one row wrapped 5 + 3. The Core hours
   pill takes its own line and the seven days share the next one evenly
   (each stays 44px tall from css/days-off.css). */
@media (max-width: 719px) {
  .gsm-sp-per-day .day-selector {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  .gsm-sp-per-day .day-selector .day-pill { min-width: 0; }
  .gsm-sp-per-day .day-selector .day-pill[data-day="default"] { grid-column: 1 / -1; }
}

/* Lock-member-hours checkbox row. */
.gsm-sp-lock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.gsm-sp-lock input {
  margin-top: 3px;
  flex-shrink: 0;
}
.gsm-sp-lock-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gsm-sp-lock-text strong {
  font-size: 0.8rem;
  color: var(--text-primary, #1e293b);
}
.gsm-sp-lock-text small {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.35;
}
body.dark-mode .gsm-sp-lock-text strong {
  color: var(--slate-200, #e2e8f0);
}

/* ── Hidden members (Group settings → Members) ────────────────────────────
   2026-08-17, owner: "truc was hidden but I'm not aware of where the hide
   reveal UI is. logically in the group and member settings but I didn't see
   it."

   Hiding a member row is a LOCAL, per-board, per-device filter, and every
   entry point for it lives on the board card - a row menu, an 18px eye-slash
   that only appears in arrange mode, and a footer button that reads "Remove"
   until you notice it says "Hide from my board". None was in Group settings,
   and a hidden member looked completely normal in the list above.

   Quiet by design: this is a recovery affordance, not a primary action, so it
   sits below the roster in a dashed container rather than competing with it. */
.gsm-hidden-members {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-secondary, #f8fafc);
}
.gsm-hidden-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    color: var(--text-primary, #0f172a);
}
.gsm-hidden-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.gsm-hidden-icon {
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.gsm-hidden-name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-primary, #0f172a);
}
.gsm-hidden-place {
    color: var(--text-secondary, #64748b);
    font-weight: 400;
}
.gsm-hidden-show,
.gsm-hidden-show-all {
    padding: 5px 12px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    /* Explicit props (not transition:all) per the visibility-trap guard. */
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gsm-hidden-show:hover,
.gsm-hidden-show-all:hover {
    background: var(--bg-secondary, #f1f5f9);
    border-color: var(--slate-300, #cbd5e1);
}
.gsm-hidden-show-all {
    width: 100%;
    margin-top: 10px;
}

body.dark-mode .gsm-hidden-members {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}
body.dark-mode .gsm-hidden-member { border-top-color: var(--slate-700, #334155); }
body.dark-mode .gsm-hidden-head,
body.dark-mode .gsm-hidden-name { color: var(--slate-100, #f1f5f9); }
body.dark-mode .gsm-hidden-show,
body.dark-mode .gsm-hidden-show-all {
    background: var(--slate-700, #334155);
    border-color: var(--slate-600, #475569);
    color: var(--slate-100, #f1f5f9);
}

/* ============================================
   TOUCH HIT AREAS
   ============================================
   ⚠️This file had NO coarse-pointer rules at all. `.column-undock-icon` and
   `.fbt-reset-icon` are 0.625rem (10px) glyphs with 4px of horizontal padding,
   which is roughly a 16px-wide target — well under the 44px floor, and both sit
   immediately beside the settings button they must NOT be confused with. On a
   phone that means either a missed tap or the wrong control firing.

   Expanded via ::before rather than by growing the glyph, so the pill's visual
   proportions are untouched. Same technique as the stacked-card member remove
   buttons. `pointer: coarse` is the right axis: this is about fingertip
   precision, not viewport width. (2026-09-01) */
@media (pointer: coarse) {
    .column-undock-icon,
    .fbt-reset-icon {
        position: relative;
    }

    .column-undock-icon::before,
    .fbt-reset-icon::before {
        content: '';
        position: absolute;
        inset: -14px -12px;
        /* Invisible padding only — no background, no hit-test surprises for
           anything stacked above it. */
    }

    /* The settings pill itself is 36px tall; nudge it to the 44px floor so the
       primary control is not the hardest one to hit. */
    .column-settings-btn {
        min-height: 44px;
    }

    /* Option buttons inside the dropdown are padded by rem tokens that land
       around 30px; give them an explicit floor. */
    .column-option-btn {
        min-height: 44px;
    }
}

/* ── Links & guests (board settings → SHARING, 2026-09-02) ─────────────────
   Temporary groups spawned from this board's roster, listed beside the
   booking-links door. Rows are buttons (open the group as the active board);
   composed like .gsm-add-btn--secondary so the section reads as one object. */
.gsm-links-guests { margin-top: 12px; }
.gsm-links-hint { margin: 0 0 8px; }
.gsm-link-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.gsm-link-row {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text-primary, #111827); font: inherit;
}
.gsm-link-row:hover { border-color: var(--primary-500, #14b8a6); }
.gsm-link-row:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
.gsm-link-row > i { color: var(--text-secondary, #6b7280); }
.gsm-link-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsm-link-meta { font-size: 12px; color: var(--text-secondary, #6b7280); white-space: nowrap; }
body.dark-mode .gsm-link-row { background: var(--surface-elevated, #1f2937); border-color: var(--border-color, #374151); color: var(--text-primary, #f3f4f6); }

/* 2026-09-06 score-invisible: the hero "score" is a band WORD now, not a 0-100
   numeral, so it takes a word's size. (.vm-results-hero-score-denom is no
   longer rendered.) */
.vm-results-hero-score-value {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Find Times results, redrawn (2026-09-06)
   ──────────────────────────────────────────────────────────────────────
   The owner's screenshot: a Sunday-evening "Today" search for five people
   produced two stacked amber boxes, a slate "Closest fit: 11pm-1am"
   headline, and an amber-bordered hero. The result was honest and useless,
   and it looked like an error page. Three moves:

     1. LEAD WITH A TIME THAT WORKS. When the day has no real answer, the
        look-ahead card (.vm-results-lookahead) opens the screen with the
        best slot in the following days, everyone's local clock, and two
        actions. The day's own answer folds under "If it must be today".
     2. ONE CALM SENTENCE, NOT THREE ALARMS. The gate warning, demotion hint
        and sparse hint collapse into .vm-results-situation: slate text and
        action chips. Amber is no longer used for "no good time today"; that
        is a normal outcome for a distributed team, not a fault.
     3. FALLBACK CHROME GOES NEUTRAL. The closest-fit hero, its eyebrow and
        the compact-card pills drop their amber for slate, so the only warm
        colours left on the screen are the ones that mean something (an
        after-work status, a real watch-out).

   Appended last on purpose: these rules must win the cascade over the
   earlier fallback/amber rules at equal specificity.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Look-ahead card ─────────────────────────────────────────────── */
.vm-results-lookahead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 16px;
  margin-bottom: 14px;
  border-radius: 16px;
  border: 1.5px solid var(--primary-200, #99f6e4);
  background: linear-gradient(180deg, rgba(20,184,166,0.10) 0%, var(--card-bg-primary, #ffffff) 62%);
  box-shadow: 0 6px 20px rgba(20,184,166,0.10);
  text-align: left;
}
body.dark-mode .vm-results-lookahead {
  border-color: rgba(20,184,166,0.38);
  background: linear-gradient(180deg, rgba(20,184,166,0.16) 0%, rgba(255,255,255,0.03) 62%);
  box-shadow: 0 6px 20px rgba(20,184,166,0.16);
}
/* The honest sentence about today: quiet slate, one line, an info glyph. */
.vm-results-lookahead-lead {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
}
.vm-results-lookahead-lead i { margin-top: 3px; font-size: 0.8rem; opacity: 0.8; }
body.dark-mode .vm-results-lookahead-lead { color: var(--text-secondary-dark, #94a3b8); }
/* Who knocked out the slot that fits everyone (2026-09-23). Same quiet
   voice as the lead: it explains the answer, it is not a warning. */
.vm-results-blocker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
}
.vm-results-blocker i { margin-top: 3px; font-size: 0.8rem; opacity: 0.8; }
body.dark-mode .vm-results-blocker { color: var(--text-secondary-dark, #94a3b8); }
.vm-results-lookahead-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-700, #0f766e);
}
body.dark-mode .vm-results-lookahead-kicker { color: #5eead4; }
.vm-results-lookahead-slot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  line-height: 1.15;
}
.vm-results-lookahead-date {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-700, #0f766e);
}
.vm-results-lookahead-range {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary, #0f172a);
}
.vm-results-lookahead-tz {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-tertiary, #94a3b8);
}
body.dark-mode .vm-results-lookahead-date { color: #5eead4; }
body.dark-mode .vm-results-lookahead-range { color: var(--text-primary-dark, #f1f5f9); }
@media (min-width: 1100px) {
  .vm-results-lookahead-range { font-size: 2.1rem; }
}
.vm-results-lookahead-benefit {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-secondary, #475569);
}
body.dark-mode .vm-results-lookahead-benefit { color: var(--text-secondary-dark, #cbd5e1); }
.vm-results-lookahead .vm-results-hero-watchout { margin-top: 2px; }

.vm-results-lookahead-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid rgba(15,23,42,0.08);
  position: relative;
  z-index: 2;
}
body.dark-mode .vm-results-lookahead-footer { border-top-color: rgba(255,255,255,0.08); }
.vm-results-lookahead-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.vm-results-lookahead-band i { font-size: 0.75rem; opacity: 0.8; }
.vm-results-lookahead-band-label {
  font-weight: 600;
  color: var(--text-tertiary, #94a3b8);
}
.vm-results-lookahead-band[data-tone="excellent"] > span:first-of-type { color: var(--tier-excellent-fg); }
.vm-results-lookahead-band[data-tone="good"]       > span:first-of-type { color: var(--tier-good-fg); }
.vm-results-lookahead-band[data-tone="acceptable"] > span:first-of-type { color: var(--tier-acceptable-fg); }
.vm-results-lookahead-band[data-tone="poor"]       > span:first-of-type { color: var(--tier-poor-fg); }
body.dark-mode .vm-results-lookahead-band { color: var(--text-primary-dark, #f1f5f9); }
.vm-results-lookahead-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.vm-results-lookahead-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--card-bg-primary, #ffffff);
  color: var(--text-primary, #1e293b);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
}
.vm-results-lookahead-more:hover { background: var(--hover-bg, #f1f5f9); border-color: var(--slate-400, #94a3b8); }
.vm-results-lookahead-more i { font-size: 0.8rem; opacity: 0.85; }
body.dark-mode .vm-results-lookahead-more {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
  color: var(--text-primary-dark, #f1f5f9);
}
body.dark-mode .vm-results-lookahead-more:hover { background: rgba(255,255,255,0.08); }
.vm-results-lookahead-schedule { min-height: 40px; }
@media (max-width: 560px) {
  .vm-results-lookahead { padding: 16px 16px 14px; }
  .vm-results-lookahead-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .vm-results-lookahead-actions { margin-left: 0; flex-direction: column-reverse; align-items: stretch; }
  .vm-results-lookahead-more,
  .vm-results-lookahead-schedule { width: 100%; justify-content: center; min-height: 44px; }
  .vm-results-lookahead-range { font-size: 1.6rem; }
}
/* Inside the empty state (day exhausted / nothing workable) the host centres
   its children; the card is a block and keeps its own left alignment. */
.vm-results-empty .vm-results-lookahead {
  width: 100%;
  max-width: 560px;
  margin: 6px auto 4px;
  align-self: center;
}

/* ── Local times strip (who is where at this slot) ──────────────────── */
.vm-results-localtimes {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 14px;
}
.vm-results-localtime {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 8px 3px 4px;
  border-radius: 9px;
  font-size: 0.8125rem;
  color: var(--text-primary, #1e293b);
}
.vm-results-localtime-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
body.dark-mode .vm-results-localtime-avatar { border-color: rgba(15,23,42,0.6); }
.vm-results-localtime-who {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-results-localtime-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.vm-results-localtime-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}
.vm-results-localtime-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* Outside-hours rows carry a faint wash so the eye lands on the people whose
   comfort is in question; working rows stay plain. */
.vm-results-localtime[data-status="before-work"],
.vm-results-localtime[data-status="after-work"] { background: rgba(245,158,11,0.08); }
.vm-results-localtime[data-status="sleeping"],
.vm-results-localtime[data-status="sleep-edge"],
.vm-results-localtime[data-status="sleep-edge-late"] { background: rgba(124,58,237,0.07); }
.vm-results-localtime[data-status="unavailable"] { background: rgba(220,38,38,0.06); }
.vm-results-localtime-more {
  grid-template-columns: 1fr;
  color: var(--text-secondary, #64748b);
  font-weight: 600;
  padding-left: 8px;
}
body.dark-mode .vm-results-localtime { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-localtime-status,
body.dark-mode .vm-results-localtime-more { color: var(--text-secondary-dark, #94a3b8); }
body.dark-mode .vm-results-localtime[data-status="before-work"],
body.dark-mode .vm-results-localtime[data-status="after-work"] { background: rgba(245,158,11,0.12); }
body.dark-mode .vm-results-localtime[data-status="sleeping"],
body.dark-mode .vm-results-localtime[data-status="sleep-edge"],
body.dark-mode .vm-results-localtime[data-status="sleep-edge-late"] { background: rgba(124,58,237,0.14); }
body.dark-mode .vm-results-localtime[data-status="unavailable"] { background: rgba(220,38,38,0.12); }
@media (max-width: 400px) {
  .vm-results-localtimes { grid-template-columns: 1fr; }
}

/* ── The day's own answer, folded under a plain label ────────────────── */
.vm-results-today-fallback { margin: 4px 0 8px; }
.vm-results-today-fallback-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--card-bg-secondary, #f8fafc);
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-secondary, #475569);
  user-select: none;
}
.vm-results-today-fallback-summary::-webkit-details-marker { display: none; }
.vm-results-today-fallback-summary:hover { background: var(--hover-bg, #f1f5f9); }
.vm-results-today-fallback-label { font-weight: 700; color: var(--text-primary, #1e293b); }
.vm-results-today-fallback-slot { font-weight: 500; }
.vm-results-today-fallback[open] > .vm-results-today-fallback-summary { margin-bottom: 12px; }
.vm-results-today-fallback[open] > .vm-results-today-fallback-summary .vm-results-others-chevron { transform: rotate(90deg); }
.vm-results-today-fallback-summary:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
body.dark-mode .vm-results-today-fallback-summary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-secondary-dark, #94a3b8);
}
body.dark-mode .vm-results-today-fallback-label { color: var(--text-primary-dark, #f1f5f9); }
/* The folded verdict must not stay pinned over the look-ahead card on phones. */
@media (max-width: 719px) {
  #view-mode-modal .vm-results-today-fallback .vm-results-verdict { position: static; top: auto; }
}

/* ── 2. Situation line (replaces the stacked amber boxes) ───────────── */
.vm-results-situation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.vm-results-situation-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary, #1e293b);
}
.vm-results-situation-text i { margin-top: 3px; font-size: 0.8rem; color: var(--text-tertiary, #94a3b8); }
.vm-results-situation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vm-results-situation-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--primary-200, #99f6e4);
  background: var(--card-bg-primary, #ffffff);
  color: var(--primary-700, #0f766e);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.vm-results-situation-chip:hover { background: rgba(20,184,166,0.08); border-color: var(--primary-400, #2dd4bf); }
.vm-results-situation-chip i { font-size: 0.75rem; }
body.dark-mode .vm-results-situation-text { color: var(--text-primary-dark, #f1f5f9); }
body.dark-mode .vm-results-situation-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(20,184,166,0.35);
  color: #5eead4;
}
body.dark-mode .vm-results-situation-chip:hover { background: rgba(20,184,166,0.14); }
/* The strip's own chrome (left teal rule, grey wash, info glyph) framed the
   old boxes as a warning panel. With one sentence inside it, let it read as
   plain text above the list. */
.vm-results-mode-strip[data-mode="rank"] {
  background: transparent;
  border: none;
  padding: 0 2px;
  margin-bottom: 12px;
}
.vm-results-mode-strip[data-mode="rank"] > i { display: none; }
.vm-results-mode-strip[data-mode="rank"] .vm-results-mode-label { width: 100%; }
body.dark-mode .vm-results-mode-strip[data-mode="rank"] { background: transparent; border: none; }
/* The cold-start footnote now sits under the whole result. */
.vm-results-footnote {
  margin: 2px 4px 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--slate-200, #e2e8f0);
}
body.dark-mode .vm-results-footnote { border-top-color: rgba(255,255,255,0.10); }

/* ── 3. Fallback chrome goes neutral ─────────────────────────────────── */
.vm-results-hero-card[data-fallback="true"] {
  border-color: var(--slate-300, #cbd5e1);
  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
.vm-results-hero-card[data-fallback="true"] .vm-results-hero-eyebrow {
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  box-shadow: none;
}
body.dark-mode .vm-results-hero-card[data-fallback="true"] {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.14);
  box-shadow: none;
}
body.dark-mode .vm-results-hero-card[data-fallback="true"] .vm-results-hero-eyebrow {
  background: rgba(255,255,255,0.08);
  color: var(--slate-300, #cbd5e1);
}
.vm-results-ranked-card[data-fallback="true"] { border-left-color: var(--slate-300, #cbd5e1); }
body.dark-mode .vm-results-ranked-card[data-fallback="true"] { border-left-color: rgba(255,255,255,0.18); }
.vm-results-fallback-pill {
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
}
body.dark-mode .vm-results-fallback-pill {
  background: rgba(255,255,255,0.08);
  color: var(--slate-300, #cbd5e1);
}
/* Old amber gate-hint boxes: still emitted by the propose flow
   (event-modal-manager). Match the new neutral language there too. */
.vm-results-required-gate-hint {
  background: var(--card-bg-secondary, #f8fafc);
  border-color: var(--slate-200, #e2e8f0);
  color: var(--text-primary, #1e293b);
}
.vm-results-required-gate-hint i { color: var(--text-tertiary, #94a3b8); }
body.dark-mode .vm-results-required-gate-hint {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-primary-dark, #f1f5f9);
}
body.dark-mode .vm-results-required-gate-hint i { color: var(--text-secondary-dark, #94a3b8); }

/* 2026-09-07: same coarse-pointer exemption as the event modal (board-modals.css):
   the Find Times attendee checkboxes stay 20px boxes inside a 44px-tall label. */
@media (pointer: coarse) {
  html .suggest-select-all-wrap,
  html .suggest-attendee-checkbox-wrap {
    min-height: 44px;
    align-items: center;
  }
  html .suggest-select-all-wrap input[type="checkbox"],
  html .suggest-attendee-checkbox {
    min-width: 0;
    min-height: 0;
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
  }
}

/* ============================================================
   GROUP SETTINGS MEMBER ROWS — PHONE (2026-09-07, owner: "members on
   group settings is visually broken", screenshot at 390px)
   ============================================================
   This row had NO media query at all — it was only ever laid out for
   desktop, and every phone width broke it identically.

   MEASURED before this block (real stylesheets, 2-member roster):
     390px:  list 350   row needs scrollWidth 482
             avatar 32 | info 107 | role control 273 | remove 28
             remove button lands at x=502 vs list right edge 370
     ...and the same 482px at 320/360/375/412/430 — the row's width does not
     depend on the viewport at all.

   CAUSE: `.gsm-role-select` takes its intrinsic width from its LONGEST
   <option> ("Member — Can create events and proposals" = 273px), and both it
   and its `.gsm-role-control` wrapper are `flex-shrink: 0`. So the row has a
   273px incompressible middle in a 350px box, and the name is squeezed to
   107px while the remove button is pushed 132px off the right edge — which
   is the half-visible "⋮" in the owner's screenshot.

   FIX: on a phone the role control stops sharing the name's line. The row
   becomes two lines — identity above, role control below, full width — which
   is the same shape the app's other member rows take when they run out of
   horizontal room. Nothing is hidden and the remove button comes back on
   screen; `max-width: 100%` on the select finally has a parent that can
   actually bound it.
   ============================================================ */
@media (max-width: 480px) {
  .gsm-member-item {
    /* Two lines: [avatar | info | remove] then the role control across the
       full width. `wrap` + a 100% basis on the control is what moves it. */
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* The name column may now shrink — it was being crushed to 107px by the
     unshrinkable select beside it. */
  .gsm-member-info {
    min-width: 0;
    flex: 1 1 auto;
  }
  .gsm-member-name {
    /* Long "City · Name" labels ellipsise rather than widen the row. */
    min-width: 0;
    flex-wrap: wrap;
  }
  /* Remove stays on the identity line, at the right edge, on screen. */
  .gsm-member-remove {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
  }
  /* THE ACTUAL FIX. Full-width second line, and — critically — shrinkable,
     which the desktop rule explicitly is not. */
  .gsm-role-control {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    align-items: stretch;
  }
  .gsm-role-select {
    /* flex-shrink:0 on the desktop rule is what let the longest <option>
       dictate the row width. Released here; the control's own 100% basis
       now bounds it. */
    flex-shrink: 1;
    width: 100%;
    min-width: 0;
    /* 44px touch target — this is a real control that was previously
       unusable on touch because it sat off-screen. */
    min-height: 40px;
    font-size: 0.75rem;
    padding: 8px 28px 8px 10px;
  }
  /* The description line is REDUNDANT on a phone and is dropped. On desktop
     the select is a narrow column showing only "Member", so the line under it
     earns its space. Here the select is full width and already reads
     "Member — Can create events and proposals", so the line beneath repeated
     "Can create events and proposals" verbatim — the word "Member" appeared
     three times in one row (badge, dropdown, description). The <option> title
     attributes still carry it, and nothing is lost from the select itself. */
  .gsm-role-desc {
    display: none;
  }
  /* The list scrolls VERTICALLY only — a horizontal scrollbar here was a
     symptom of the overflow above, never a design. */
  .gsm-members-list {
    overflow-x: hidden;
  }
}

/* ── Find a time: "Time of day", date switcher, day panel, why line ──────────
   Owner-approved redesign 2026-10-03. Under the one best pick: a collapsed
   "Time of day" choice, then one chip per day ordered by least impact (a dot
   carries the day's impact), then the chosen day's best Early / Midday / Late
   as full-width rows with a reason line and a Schedule button. Phone first:
   chips scroll sideways, rows stack, every control is a 44px target. */
.vm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* One plain reason per card ("Inside everyone's working hours · Follows
   Corgi's preferred hours"). Wraps; never truncates a name. */
.vm-why-picked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary, #0f172a);
  overflow-wrap: anywhere;
}
/* Good line (green tick) = why it fits; cost line (amber) = who pays. */
.vm-why-line { display: flex; align-items: flex-start; gap: 6px; }
.vm-why-line i { flex: 0 0 auto; margin-top: 2px; font-size: 0.72rem; color: #0f766e; }
.vm-why-cost { color: #92400e; font-weight: 500; }
.vm-why-cost i { color: #d97706; }
body.dark-mode .vm-why-picked { color: #e2e8f0; }
body.dark-mode .vm-why-line i { color: #5eead4; }
body.dark-mode .vm-why-cost { color: #fcd34d; }
body.dark-mode .vm-why-cost i { color: #fbbf24; }
.vm-results-hero-why { margin: 6px 0 2px; }

/* "Time of day" — collapsed by default, in the switcher's title row: the
   summary sits right of "Day by day"; opened, it takes the whole row. */
.vm-day-switcher-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0 0 6px;
}
.vm-day-switcher-head .vm-day-switcher-title { margin: 0; }
.vm-tod-lean {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-primary, #fff);
}
.vm-tod-lean[open] { flex-basis: 100%; order: 2; }
.vm-tod-lean-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 0.85rem;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  list-style: none;
}
.vm-tod-lean-summary::-webkit-details-marker { display: none; }
.vm-tod-lean-summary strong { color: var(--text-primary, #0f172a); font-weight: 700; }
.vm-tod-lean[open] > .vm-tod-lean-summary .vm-results-others-chevron { transform: rotate(90deg); }
.vm-tod-lean-body { padding: 0 12px 12px; }
.vm-tod-lean-opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.vm-tod-lean-opt {
  min-height: 44px;
  padding: 0 4px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #0f172a);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.vm-tod-lean-opt.is-active { border-color: #14b8a6; background: #f0fdfa; color: #0f766e; }
.vm-tod-lean-opt:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.vm-tod-lean-note {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary, #64748b);
}
body.dark-mode .vm-tod-lean,
body.dark-mode .vm-tod-lean-opt { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .vm-tod-lean-summary { color: #94a3b8; }
body.dark-mode .vm-tod-lean-summary strong { color: #e2e8f0; }
body.dark-mode .vm-tod-lean-opt.is-active { background: rgba(20, 184, 166, 0.18); border-color: #2dd4bf; color: #5eead4; }
body.dark-mode .vm-tod-lean-note { color: #94a3b8; }

/* Date switcher. */
.vm-day-switcher { margin: 12px 0 8px; min-width: 0; }
.vm-day-switcher-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  margin: 0 0 6px;
}
.vm-day-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.vm-day-chips::-webkit-scrollbar { display: none; }
.vm-day-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #0f172a);
  font: inherit;
  cursor: pointer;
  line-height: 1.1;
}
.vm-day-chip-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.vm-day-chip-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.vm-day-chip-dot[data-tone="excellent"] { background: #16a34a; }
.vm-day-chip-dot[data-tone="good"]      { background: #14b8a6; }
.vm-day-chip-dot[data-tone="acceptable"]{ background: #f59e0b; }
.vm-day-chip-dot[data-tone="poor"]      { background: #dc2626; }
.vm-day-chip.is-active { border-color: #14b8a6; background: #f0fdfa; color: #0f766e; }
.vm-day-chip:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
body.dark-mode .vm-day-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .vm-day-chip.is-active { background: rgba(20, 184, 166, 0.18); border-color: #2dd4bf; color: #5eead4; }

/* The chosen day: its best Early / Midday / Late, then "More times". */
.vm-day-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vm-day-panel-date { font-size: 0.85rem; font-weight: 700; color: var(--text-primary, #0f172a); }
body.dark-mode .vm-day-panel-date { color: #e2e8f0; }
.vm-day-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--surface-primary, #fff);
  box-shadow: inset 4px 0 0 var(--tone-accent, #cbd5e1);
  cursor: pointer;
}
.vm-day-slot[data-tone="excellent"] { --tone-accent: #16a34a; }
.vm-day-slot[data-tone="good"]      { --tone-accent: #14b8a6; }
.vm-day-slot[data-tone="acceptable"]{ --tone-accent: #f59e0b; }
.vm-day-slot[data-tone="poor"]      { --tone-accent: #dc2626; }
.vm-day-slot-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vm-day-slot-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.vm-day-slot-bucket {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
}
.vm-day-slot-time { font-size: 1rem; font-weight: 750; color: var(--text-primary, #0f172a); white-space: nowrap; }
.vm-day-slot-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #b45309;
}
.vm-day-slot-top i { font-size: 0.62rem; }
.vm-day-slot-impact { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary, #64748b); }
.vm-day-slot-schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #14b8a6;
  background: #f0fdfa;
  color: #0f766e;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.vm-day-slot-schedule:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
body.dark-mode .vm-day-slot { background: #1e293b; border-color: #334155; }
body.dark-mode .vm-day-slot-time { color: #e2e8f0; }
body.dark-mode .vm-day-slot-bucket,
body.dark-mode .vm-day-slot-impact { color: #94a3b8; }
body.dark-mode .vm-day-slot-top { color: #fbbf24; }
body.dark-mode .vm-day-slot-schedule { background: rgba(20, 184, 166, 0.18); border-color: #2dd4bf; color: #5eead4; }
.vm-day-more { border-top: 1px dashed var(--border-color, #e2e8f0); padding-top: 4px; }
.vm-day-more-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  list-style: none;
}
.vm-day-more-summary::-webkit-details-marker { display: none; }
.vm-day-more[open] > .vm-day-more-summary .vm-results-others-chevron { transform: rotate(90deg); }
.vm-day-more-body { display: flex; flex-direction: column; gap: 8px; }
body.dark-mode .vm-day-more-summary { color: #94a3b8; }
/* A very narrow phone: the Schedule word folds to its icon. */
@media (max-width: 359px) {
  .vm-day-slot-schedule span { display: none; }
}

/* ── Compact "Book …" hero on a phone (2026-10-03) ───────────────────────────
   The full hero was 709px tall at 390px and put the date switcher two
   screens down. On a phone the card shows the impact, the why line and
   "Schedule this time"; the verdict line above it already says "Book …".
   "How we ranked it" and the per-person detail fold behind the chevron
   (.is-expanded). Desktop keeps the whole card and never shows the toggle. */
.vm-results-hero-expand { display: none; }
@media (max-width: 719px) {
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-benefit,
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-watchout,
  .vm-results-hero-card:not(.is-expanded) .vm-results-pref-note,
  .vm-results-hero-card:not(.is-expanded) .vm-results-rotation-chip,
  .vm-results-hero-card:not(.is-expanded) .vm-results-shift-hint,
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-body,
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-composite,
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-score-label { display: none; }
  /* Folded: the impact chip sits on the eyebrow's row, not under it. */
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-head { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-score-value { font-size: 1rem; white-space: nowrap; }
  /* The chevron row already draws the rule above Schedule. */
  .vm-results-hero-card:not(.is-expanded) .vm-results-hero-footer { border-top: 0; padding-top: 0; }
  /* "Also works: …" repeats the day panel and Other options right below;
     it folds with the hero's detail. */
  #vm-results-ranking-list:has(.vm-results-hero-card:not(.is-expanded)) .vm-results-verdict-also { display: none; }
  .vm-results-hero-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 0 4px;
    border: 0;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    background: transparent;
    color: var(--text-secondary, #475569);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
  }
  .vm-results-hero-expand:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
  body.dark-mode .vm-results-hero-expand { color: #94a3b8; border-top-color: rgba(255, 255, 255, 0.08); }
}

/* ============================================
   FIND A TIME PILLS, TIDIED (2026-10-05 redesign, canvas "Find a time:
   before and after", owner: keep the wider choices and wording as pills).
   One height and spacing for both rows; the chosen Duration is filled teal,
   the chosen range keeps its lighter look so the two rows still read apart
   (2026-08-31); Custom is a dashed pill on the same line height. 36px drawn,
   with the row's 8px gap the tap rows stay apart. !important only where the
   2026-08-31 compact rule in style.css uses it.
   ============================================ */
#view-mode-modal #vm-bt-duration-chips,
#view-mode-modal #vm-bt-within-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#vm-bt-duration-chips .duration-chip,
#vm-bt-within-chips .duration-chip {
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: 999px;
  border-width: 1.5px;
}
#view-mode-modal #vm-bt-duration-chips .duration-chip.active {
  background: var(--primary-700, #0f766e);
  border-color: var(--primary-700, #0f766e);
  color: #ffffff;
}
#view-mode-modal .duration-custom-toggle {
  min-height: 36px;
  padding: 0 14px;
  border-style: dashed;
  color: var(--primary-700, #0f766e);
}
body.dark-mode #view-mode-modal #vm-bt-duration-chips .duration-chip.active {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: #04201d;
}
body.dark-mode #view-mode-modal .duration-custom-toggle { color: var(--primary-300, #5eead4); }
/* Search within, aligned (2026-10-05): the same pills on an even grid, two
   columns on a phone and four on a wide screen, so every pill in a column has
   the same width and the pairs read across (Today | Tomorrow, From today |
   From tomorrow · 7 days). Labels keep their full wording; a longer
   translation wraps to a second line inside its pill instead of pushing the
   row out. Custom… is dashed, like Duration's Custom. */
#view-mode-modal #vm-bt-within-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 8px;
}
#vm-bt-within-chips .duration-chip {
  width: 100%;
  padding: 4px 6px !important;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}
#view-mode-modal #vm-bt-within-chips .within-chip[data-within="custom"]:not(.active) {
  border-style: dashed;
  color: var(--primary-700, #0f766e);
}
body.dark-mode #view-mode-modal #vm-bt-within-chips .within-chip[data-within="custom"]:not(.active) { color: var(--primary-300, #5eead4); }

/* THE PEOPLE CARD IN FIND A TIME (2026-10-05 redesign). The card is whole:
   no inner scroll (it cut the list off mid-name), no tint or left rail on a
   ticked row. The tick and the dimmed unticked row (css/attendee-picker.css)
   already say who is in. Duration's Custom sits on the chips' line instead
   of a row of its own. */
html #view-mode-modal #suggest-attendees-list.suggest-attendees-list {
  max-height: none;
  overflow: hidden;
}
html #view-mode-modal #suggest-attendees-list .vm-member-item,
html #view-mode-modal #suggest-attendees-list .vm-member-item.selected,
html #view-mode-modal #suggest-attendees-list.comparison-active .vm-member-item.selected {
  background: transparent;
  box-shadow: none;
  border-left: 0;
  border-bottom: 0;
}
html #view-mode-modal #suggest-attendees-list .vm-member-item:hover { background: #f8fafc; }
body.dark-mode #view-mode-modal #suggest-attendees-list .vm-member-item:hover { background: #253247; }
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) > .event-duration-label { flex-basis: 100%; }
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) > #vm-bt-duration-chips { display: contents; }
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) > .duration-custom-container { margin: 0; }
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) > .duration-custom-container.open,
#view-mode-modal .vm-section:has(> #vm-bt-duration-chips) > .duration-custom-container.has-value { flex-basis: 100%; }

/* ── Fairness guardrails (Business, 2026-10-08; owner-approved mock) ── */
.gsm-plan-tag { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; padding: 1px 7px; border-radius: 999px; letter-spacing: 0; text-transform: none; }
.gsm-gr-rules { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 14px; padding: 2px 14px; margin: 8px 0 12px; }
.gsm-gr-rule { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.gsm-gr-rule + .gsm-gr-rule { border-top: 1px solid #f1f5f9; }
.gsm-gr-rule-text { flex-grow: 1; display: flex; flex-direction: column; }
.gsm-gr-rule-text b { font-size: 14px; font-weight: 600; color: #0f172a; }
.gsm-gr-rule-text span, .gsm-gr-mode span span { font-size: 12px; color: #64748b; }
.gsm-gr-max { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; }
.gsm-gr-max select { min-height: 36px; border-radius: 10px; border: 1px solid #cbd5e1; padding: 0 8px; font: inherit; background: #fff; }
.gsm-gr-mode-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin: 4px 0 8px; }
.gsm-gr-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gsm-gr-mode { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid #e2e8f0; cursor: pointer; }
.gsm-gr-mode:has(input:checked) { border: 2px solid #14b8a6; background: #f0fdfa; padding: 11px 13px; }
.gsm-gr-mode > span { display: flex; flex-direction: column; gap: 2px; }
.gsm-gr-mode b { font-size: 14px; color: #0f172a; }
.gsm-gr-usage { display: flex; flex-direction: column; gap: 8px; background: #f8fafc; border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.gsm-gr-usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: #64748b; }
.gsm-gr-usage-head b { font-size: 14px; color: #0f172a; }
.gsm-gr-usage-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #0f172a; }
.gsm-gr-usage-name { width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsm-gr-usage-bar { flex-grow: 1; height: 10px; border-radius: 6px; background: #e2e8f0; overflow: hidden; display: flex; }
.gsm-gr-usage-bar > span { background: #facc15; }
.gsm-gr-usage-n { width: 64px; text-align: right; font-weight: 600; }
.gsm-gr-usage-n.is-full { color: #a16207; font-weight: 700; }
.gsm-gr-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.gsm-gr-status { font-size: 13px; color: #64748b; }
body.dark-mode .gsm-gr-rules, body.dark-mode .gsm-gr-mode { border-color: #334155; }
body.dark-mode .gsm-gr-rule + .gsm-gr-rule { border-top-color: #1e293b; }
body.dark-mode .gsm-gr-rule-text b, body.dark-mode .gsm-gr-mode b, body.dark-mode .gsm-gr-usage-head b, body.dark-mode .gsm-gr-usage-row { color: #e2e8f0; }
body.dark-mode .gsm-gr-mode:has(input:checked) { background: rgba(20, 184, 166, 0.14); }
body.dark-mode .gsm-gr-usage { background: #1e293b; }
body.dark-mode .gsm-gr-usage-bar { background: #334155; }
body.dark-mode .gsm-gr-max select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-mode .gsm-plan-tag { background: rgba(20, 184, 166, 0.15); border-color: #14b8a6; color: #5eead4; }
@media (max-width: 480px) { .gsm-gr-modes { grid-template-columns: minmax(0, 1fr); } }

/* OUTSIDE PEOPLE (Business, 2026-10-08): reuses the guardrails parts (mode
   cards, labels, actions). Four "links close after" cards to a row on a wide
   sheet, two on a phone; the open-links list reads like the usage list. */
.gsm-out-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gsm-out-days .gsm-gr-mode { padding: 10px 12px; }
.gsm-out-days .gsm-gr-mode:has(input:checked) { padding: 9px 11px; }
@media (max-width: 480px) { .gsm-out-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gsm-out-links-head { margin-top: 18px; }
.gsm-out-link { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #e2e8f0; }
.gsm-out-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gsm-out-link-text b { font-size: 14px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsm-out-link-text span { font-size: 12px; color: #64748b; }
.gsm-out-link-close-at { font-size: 12px; color: #64748b; white-space: nowrap; }
.gsm-out-share { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
#gsm-vl-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; }
.gsm-vl-field { display: flex; flex-direction: column; }
.gsm-vl-people { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.gsm-vl-see { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f0fdfa; font-size: 13px; color: #134e4a; }
.gsm-vl-url { display: flex; gap: 8px; }
.gsm-vl-url input { flex: 1; min-width: 0; }
body.dark-mode .gsm-out-link, body.dark-mode #gsm-vl-form { border-color: #334155; }
body.dark-mode .gsm-out-link-text b { color: #e2e8f0; }
body.dark-mode .gsm-vl-see { background: rgba(20, 184, 166, 0.14); color: #ccfbf1; }

/* COMPANY SIGN-IN + AUTOMATIC MEMBER UPDATES (Business, 2026-10-08): numbered
   steps (a done step shows a teal tick), and read-only values with Copy. */
.gsm-sso-step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #e2e8f0; }
.gsm-sso-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 800; }
.gsm-sso-step.is-done .gsm-sso-num { background: #0f766e; color: #ffffff; }
.gsm-sso-step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.gsm-sso-step-body > b { font-size: 14px; color: #0f172a; }
.gsm-sso-sub { font-size: 13px; color: #64748b; overflow-wrap: anywhere; }
.gsm-copy-row { display: flex; flex-direction: column; gap: 4px; }
.gsm-copy-label { font-size: 12px; font-weight: 700; color: #64748b; }
.gsm-copy-field { display: flex; gap: 8px; }
.gsm-copy-field input { flex: 1; min-width: 0; }
.gsm-copy-field input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
/* The app's teal, not the browser's default, on these sections' choices. */
.gsm-gr-mode input, .gsm-gr-rule input, #gsm-vl-form .pick-row-check { accent-color: var(--primary-500, #0f766e); }
.gsm-gr-actions .gsm-save-btn, .gsm-copy-field .gsm-save-btn { flex: none; }
.gsm-scim .gsm-copy-row, .gsm-scim .gsm-out-links-head { margin-top: 10px; }
body.dark-mode .gsm-sso-step { border-color: #334155; }
body.dark-mode .gsm-sso-num { background: #1e293b; color: #e2e8f0; }
body.dark-mode .gsm-sso-step.is-done .gsm-sso-num { background: #14b8a6; color: #042f2e; }
body.dark-mode .gsm-sso-step-body > b { color: #e2e8f0; }

/* Touch: every control in the Business sections meets the 44px floor (the
   global button floor does not reach these section buttons). */
@media (pointer: coarse) {
  .gsm-guardrails button, .gsm-outside button, .gsm-sso button, .gsm-scim button,
  .gsm-gr-mode, .gsm-out-days .gsm-gr-mode { min-height: 44px; }
}

/* MEMBER CARDS (owner, 2026-10-09; mocks 12-13 approved via "do all
   remaining"). Each member is a card: who, where and when, the server's role
   as a pill, their next 24 hours as labelled cells (columns: your time;
   numbers: their own hour; Fairness colours), and for owners and admins an
   Admin / Member / Viewer switch with Remove beside it. Scoped to
   .gsm-member-card so the older row rules above (and their phone overrides)
   stay as they were for anything else that uses them. */
.gsm-members-list .gsm-member-card {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  background: var(--surface, #ffffff);
  flex-shrink: 0;
}
.gsm-members-list .gsm-member-card:hover { background: var(--surface, #ffffff); }
body.dark-mode .gsm-members-list .gsm-member-card,
body.dark-mode .gsm-members-list .gsm-member-card:hover { background: var(--slate-800, #1e293b); border-color: var(--slate-700, #334155); }
.gsm-member-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gsm-member-card .gsm-member-info { min-width: 0; flex: 1 1 auto; }
.gsm-member-card .gsm-member-name { gap: 6px; min-width: 0; flex-wrap: nowrap; }
.gsm-member-name-text { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsm-member-card .gsm-member-tz { font-size: 0.75rem; color: var(--text-secondary, #64748b); overflow-wrap: anywhere; }
.gsm-you-badge {
  flex: none;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: #0d9488;
  padding: 2px 7px;
  border-radius: 999px;
}
.gsm-member-card .gsm-role-pill { flex: none; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.gsm-role-pill--owner { background: #f3e8ff; color: #7e22ce; }
.gsm-role-pill--admin { background: #ccfbf1; color: #0f766e; }
.gsm-role-pill--member, .gsm-role-pill--viewer { background: var(--slate-100, #f1f5f9); color: var(--slate-600, #475569); }
body.dark-mode .gsm-role-pill--owner { background: rgba(168, 85, 247, 0.2); color: #e9d5ff; }
body.dark-mode .gsm-role-pill--admin { background: rgba(20, 184, 166, 0.2); color: #99f6e4; }
body.dark-mode .gsm-role-pill--member, body.dark-mode .gsm-role-pill--viewer { background: var(--slate-700, #334155); color: var(--slate-200, #e2e8f0); }

.gsm-day-strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.gsm-day-cell {
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.gsm-day-cell--in { background: #bbf7d0; color: #166534; }
.gsm-day-cell--edge { background: #fde68a; color: #854d0e; }
.gsm-day-cell--sleep { background: #ddd6fe; color: #5b21b6; }
.gsm-day-cell--dayOff { background: var(--slate-200, #e2e8f0); color: var(--slate-600, #475569); }
.gsm-day-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 2px 4px; font-size: 0.72rem; color: var(--text-secondary, #475569); }
.gsm-day-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.gsm-day-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gsm-day-legend-note { flex-basis: 100%; }

.gsm-member-card .gsm-role-control {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-100, #f1f5f9);
  order: 0;
  flex: none;
}
.gsm-role-seg {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--slate-100, #f1f5f9);
}
.gsm-role-opt {
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--slate-600, #475569);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gsm-role-opt.is-on { background: #ffffff; color: #0f172a; font-weight: 800; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06); }
.gsm-role-opt:focus-visible { outline: 2px solid #0d9488; outline-offset: 1px; }
body.dark-mode .gsm-role-seg { background: var(--slate-900, #0f172a); }
body.dark-mode .gsm-role-opt { color: var(--slate-300, #cbd5e1); }
body.dark-mode .gsm-role-opt.is-on { background: var(--slate-700, #334155); color: #ffffff; }
.gsm-member-card .gsm-member-remove {
  width: 44px;
  height: 44px;
  order: 0;
  margin-left: 0;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #ffffff;
  color: #dc2626;
}
body.dark-mode .gsm-member-card .gsm-member-remove { background: transparent; border-color: rgba(220, 38, 38, 0.5); color: #fca5a5; }
.gsm-member-card .gsm-role-desc { display: block; text-align: left; font-size: 0.75rem; line-height: 1.4; max-width: none; }
.gsm-member-note { font-size: 0.75rem; color: var(--text-secondary, #64748b); padding-top: 10px; border-top: 1px solid var(--slate-100, #f1f5f9); }
.gsm-members-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--slate-50, #f8fafc);
  font-size: 0.8rem;
  color: var(--slate-600, #475569);
  flex-shrink: 0;
}
body.dark-mode .gsm-members-readonly { background: var(--slate-800, #1e293b); border-color: var(--slate-700, #334155); color: var(--slate-300, #cbd5e1); }
@media (max-width: 480px) {
  .gsm-day-strip { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gsm-day-cell { height: 24px; font-size: 10px; }
  .gsm-member-card .gsm-role-desc { display: block; }
}
@media (pointer: coarse) {
  .gsm-role-opt { min-height: 44px; }
}
.gsm-role-seg-gap { flex: 1 1 auto; }