/*
 * UI v3, Step 3: the host app (dashboard, event hub, guest list, create event).
 * RFC docs/rfcs/2026-10-24_ui_foundation.md. Loaded only when UI_V3_ENABLED is on, after ui-v3.css.
 * Scope: pages that show the host header (nav[data-ui-zone="host"]). Tokens come from ui-foundation.css.
 *
 * Rules of the road for this file:
 *  - dense controls reach 44px wherever a finger is the pointer (touch devices, or any window under 1200px);
 *    a mouse on a wide desktop keeps the compact size
 *  - nothing under 12px, nothing under 4.5:1
 *  - one accent. The hub's rainbow of per-tool button colours becomes brand purple, with outline for the
 *    secondary action and red/amber only for destructive or cautionary ones
 */

/* ============ 1. Type: one typeface (modals keep their invitation fonts) ============ */
.ui-v3:has(nav[data-ui-zone="host"]) :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, small, strong, th, td, summary):not(.modal *):not([class*="fa-"]):not([class*="bi-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.bi) { font-family: var(--ds-font) !important; }

/* ============ 2. Minimum text size and contrast, the long tail of small labels ============ */
.ui-v3:has(nav[data-ui-zone="host"]) :is(.status-pill, .tile-category, .tile-action-hint, .countdown-label, .meta-label, .intent-badge, .affiliate-merchant-tag, .affiliate-item-badge, .disclosure-icon, .disclosure-label, .disclosure-info-trigger, .affiliate-item-rec, .badge-age-restricted, .pp-brand-tag, .days-chip, #budgetNewBadge, .badge, .event-chip, .step-label) { font-size: .75rem !important; line-height: 1.3; }
.ui-v3:has(nav[data-ui-zone="host"]) .status-pill { background: #f3e8ff !important; color: #5b21b6 !important; font-weight: 700; }
.ui-v3:has(nav[data-ui-zone="host"]) .status-pill:is([style*="dc2626"], [style*="e11d48"], [style*="b91c1c"], [style*="ef4444"]) { background: #fef2f2 !important; color: #b91c1c !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .status-pill:is(.status-active, [style*="059669"], [style*="10b981"]) { background: #ecfdf5 !important; color: #047857 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.text-success) { color: #047857 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.badge.bg-light.text-primary, .badge.text-primary) { color: var(--ds-brand-text) !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .tile-headline-sub { color: #047857 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .map-cta > span { color: #b91c1c !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.btn-share-secondary, .btn-share-secondary *) { color: #9d174d !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(#openPhoneContactsModal, #openReuseFromPartyModal, button[data-bs-target="#giftLinksModal"], button[data-bs-target="#photoLinkModal"]) > span,
.ui-v3:has(nav[data-ui-zone="host"]) :is(button[data-bs-target="#giftLinksModal"], button[data-bs-target="#photoLinkModal"]) { color: var(--ds-brand-text) !important; }

/* labels nested inside buttons and notes */
.ui-v3:has(nav[data-ui-zone="host"]) :is(.event-type-badge, .affiliate-toolkit-tag, #coverRepositionBtn, #coverUploadBtn, .intent-footer-note, .affiliate-btn, .affiliate-disclosure-copy, .affiliate-disclosure-tag) :is(span, strong) { font-size: .75rem !important; }

.ui-v3:has(nav[data-ui-zone="host"]) span.d-none.d-md-inline-block { font-size: .75rem !important; }

/* ============ 3. One accent: tool-card actions ============ */
.ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn { background: var(--ds-brand) !important; color: var(--ds-on-brand) !important; border: 1.5px solid var(--ds-brand) !important; border-radius: var(--ds-radius-md); font-weight: 700; font-size: .875rem; min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; transition: transform var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-base) var(--ds-ease), box-shadow var(--ds-dur-base) var(--ds-ease); }
.ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn:is(.outline, .btn-outline, .secondary, [style*="f8fafc"], [style*="background: #fff"], [style*="background:#fff"], [style*="background: white"], [style*="background: transparent"]) { background: var(--ds-surface) !important; color: var(--ds-brand-text) !important; border-color: var(--ds-brand) !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn[data-bs-target="#cancelEventModal"] { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn[data-bs-target="#postponeEventModal"] { background: #fef3c7 !important; border-color: #b45309 !important; color: #78350f !important; }
@media (hover: hover) { .ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn:not([data-bs-target="#cancelEventModal"], [data-bs-target="#postponeEventModal"]):hover { background: var(--ds-brand-hover) !important; box-shadow: var(--ds-shadow-2); } }

/* The hub's cards were 70% white glass over a dark panel, which reads as dull grey. Solid white. */
.ui-v3:has(nav[data-ui-zone="host"]) .dashboard-card { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); }
.ui-v3:has(nav[data-ui-zone="host"]) .dashboard-card :is(h3, h4) { color: var(--ds-ink); }
.ui-v3:has(nav[data-ui-zone="host"]) .dashboard-card .card-body-text p { color: var(--ds-ink-3); }

/* same glass-over-dark problem on the setup checklist and the filter pills */
.ui-v3:has(nav[data-ui-zone="host"]) :is(.event-setup-guide-card, .affiliate-disclosure-card, .countdown-container-modern, .meta-strip-item, .host-bento-dock, .event-main-card .glass-effect) { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--ds-line); }
.ui-v3:has(nav[data-ui-zone="host"]) .tool-filter-btn { background: #ffffff; color: var(--ds-ink-2); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-pill); font-weight: 600; }
.ui-v3:has(nav[data-ui-zone="host"]) .tool-filter-btn:is(.active, [aria-pressed="true"]) { background: var(--ds-brand); color: var(--ds-on-brand); border-color: var(--ds-brand); }

/* filter pills scroll sideways on a phone; they must not squash into each other */
.ui-v3:has(nav[data-ui-zone="host"]) :is(.tool-filter-btn, .dock-filter-pill, .affiliate-filter-pill, .filter-chip-btn, .quick-tab-link) { flex: 0 0 auto; white-space: nowrap; width: auto; }

/* ============ 4. Dashboard ============ */
.ui-v3 .dash-header h1 { padding: 0; margin-left: 0; text-align: left; font-size: var(--ds-text-3xl); line-height: var(--ds-leading-tight); }
.ui-v3 .dash-header p { color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.ui-v3 .dash-header .dash-header-actions { display: flex !important; flex-direction: column !important; gap: var(--ds-space-2, 0.625rem) !important; width: 100% !important; max-width: 250px; }
.ui-v3 .dash-header .btn-new-event { background: var(--ds-brand) !important; color: var(--ds-on-brand) !important; border: 1.5px solid var(--ds-brand); border-radius: var(--ds-radius-md); min-height: var(--ds-tap); padding: 0 var(--ds-space-5); font-weight: 700; box-shadow: none; text-decoration: none; display: flex !important; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: center; }
.ui-v3 .dash-header .btn-new-event.btn-ai-studio,
.ui-v3 .dash-header .btn-new-event[href="/manager/ai-studio"] { background: linear-gradient(135deg, #7b03fc, #ec4899) !important; color: #fff !important; border-color: transparent !important; }
.ui-v3 .dash-header button[data-tour="quick-tour-btn"] { background: transparent !important; border: 0 !important; color: var(--ds-brand-text) !important; min-height: var(--ds-tap); font-weight: 700; }
@media (max-width: 767.98px) {
  .ui-v3 .dash-header { align-items: stretch !important; flex-direction: column !important; gap: var(--ds-space-4, 1rem) !important; }
  .ui-v3 .dash-header .dash-header-actions { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; gap: var(--ds-space-2, 0.625rem) !important; }
  .ui-v3 .dash-header .dash-header-actions .btn-new-event { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; text-align: center; }
  .ui-v3 .dash-header button[data-tour="quick-tour-btn"] { justify-content: flex-start; }
}
.ui-v3 .event-card { border-radius: var(--ds-radius-lg); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); }
.ui-v3 .event-card-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: 200px; padding: var(--ds-space-6); border: 2px dashed var(--ds-line-strong); border-radius: var(--ds-radius-lg); background: transparent; color: var(--ds-brand-text); font-weight: 700; text-decoration: none; text-align: center; transition: background-color var(--ds-dur-base) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); }
.ui-v3 .event-card-new i { font-size: 1.75rem; }
.ui-v3 .event-card-new small { color: var(--ds-ink-3); font-weight: 500; font-size: var(--ds-text-sm); }
@media (hover: hover) { .ui-v3 .event-card-new:hover { background: rgba(123, 3, 252, .06); } }
.ui-v3 .event-card-new:active { transform: scale(.98); }

/* ============ 5. Dense controls reach 44px under a finger ============ */
@media (pointer: coarse), (max-width: 1199.98px) {
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.navbar-brand, #notificationBtn, .step-indicator, .ai-sparkle-btn, #coverRepositionBtn, #coverUploadBtn, .meta-strip-btn, .btn-sm, .dock-filter-pill, .tool-filter-btn, .affiliate-filter-pill, .filter-chip-btn, .quick-tab-link, .affiliate-btn, .btn-share-secondary, .btn-options-dropdown, .tour-btn-close, #openCoManagerModalBtn, #toggleGuideBtn, .card-action-btn) { min-height: var(--ds-tap) !important; min-width: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; }
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.btn, #scrollAffiliateLeft, #scrollAffiliateRight) { min-height: var(--ds-tap); min-width: var(--ds-tap); }
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.card-action-btn, .btn-options-dropdown, .btn-sm[class*="w-"]) { width: 100%; }
  .ui-v3:has(nav[data-ui-zone="host"]) .card-action-btn.w-50 { width: calc(50% - .25rem); }
  .ui-v3:has(nav[data-ui-zone="host"]) a.text-decoration-none.text-muted { display: inline-flex; align-items: center; min-height: var(--ds-tap); }
}

/* ============ 6. Feedback: press, focus, motion ============ */
@media (pointer: coarse) {
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.card-action-btn, .btn-new-event, .event-card, .dashboard-card, .quick-tab-link, .dock-filter-pill, .tool-filter-btn, .filter-chip-btn, .affiliate-btn, .btn):active { transform: scale(.98); }
}
.ui-v3:has(nav[data-ui-zone="host"]) :is(a, button, [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ui-v3:has(nav[data-ui-zone="host"]) * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Guest list: the action row was centred and scrolling, so its first and last buttons were cut off and unreachable. It wraps instead. */
.ui-v3 .action-bar-horizontal { flex-wrap: wrap !important; justify-content: center; overflow: visible !important; gap: var(--ds-space-2); }
@media (min-width: 768px) { .ui-v3 .dash-header .dash-header-actions { width: 250px; } }

/* Inline font sizes under 12px (the long tail on hub and wizard) lift to 12px */
.ui-v3:has(nav[data-ui-zone="host"]) :is([style*="font-size: 0.6rem"], [style*="font-size:0.6rem"], [style*="font-size: 0.62rem"], [style*="font-size:0.62rem"], [style*="font-size: 0.65rem"], [style*="font-size:0.65rem"], [style*="font-size: 0.66rem"], [style*="font-size:0.66rem"], [style*="font-size: 0.68rem"], [style*="font-size:0.68rem"], [style*="font-size: 0.7rem"], [style*="font-size:0.7rem"], [style*="font-size: 0.72rem"], [style*="font-size:0.72rem"], [style*="font-size: 0.74rem"], [style*="font-size:0.74rem"], [style*="font-size: .6rem"], [style*="font-size:.6rem"], [style*="font-size: .62rem"], [style*="font-size:.62rem"], [style*="font-size: .65rem"], [style*="font-size:.65rem"], [style*="font-size: .68rem"], [style*="font-size:.68rem"], [style*="font-size: .7rem"], [style*="font-size:.7rem"], [style*="font-size: .72rem"], [style*="font-size:.72rem"], [style*="font-size: .74rem"], [style*="font-size:.74rem"], [style*="font-size: 9px"], [style*="font-size:9px"], [style*="font-size: 10px"], [style*="font-size:10px"], [style*="font-size: 11px"], [style*="font-size:11px"]):not(.modal *) { font-size: .75rem !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.phone-badge, .phone-tag-pill, .btn-sm) { font-size: .8125rem; }
@media (pointer: coarse), (max-width: 1199.98px) {
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.dress-chip, .preset-btn, select, .form-select) { min-height: var(--ds-tap) !important; }
  .ui-v3:has(nav[data-ui-zone="host"]) :is(.dress-chip, .preset-btn) { display: inline-flex; align-items: center; justify-content: center; }
}

.ui-v3:has(nav[data-ui-zone="host"]) #attendee_count_threshold { height: auto !important; min-height: var(--ds-tap) !important; }

/* axe-core (via @axe-core/playwright) found these on its first full run */
.ui-v3:has(nav[data-ui-zone="host"]) .countdown-number { color: #6d28d9 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .countdown-label { color: #475569 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .affiliate-disclosure-tag > span { color: #047857 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.choice-card-desc, .picker-preview-note):not(.wizard-card-wrapper *) { color: #475569 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) :is(.picker-section-title, .preset-label):not(.wizard-card-wrapper *) { color: #7a5c00 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .wizard-card-wrapper :is(.choice-card-desc, .picker-preview-note) { color: #f8fafc !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .wizard-card-wrapper :is(.picker-section-title, .preset-label) { color: #fde047 !important; }

/* Attendee event page: the "going?" widget and the quick-jump pills */
.ui-v3:has(nav[data-ui-zone="host"]) #gwc-status-text { color: #047857 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .gwc-calendar-btn { color: #075985 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .gwc-goodwill-btn { color: #9d174d !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .gwc-specialreq-btn { color: #86198f !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .gwc-memory-btn { color: #166534 !important; }
@media (pointer: coarse), (max-width: 1199.98px) { .ui-v3:has(nav[data-ui-zone="host"]) .quick-jump-pill, .gwc-post-btn { min-height: var(--ds-tap); display: inline-flex; align-items: center; justify-content: center; } }
.ui-v3:has(nav[data-ui-zone="host"]) #threshold-row > span:not(.wizard-card-wrapper *) { color: #475569 !important; }
.ui-v3:has(nav[data-ui-zone="host"]) .wizard-card-wrapper #threshold-row > span { color: #f8fafc !important; }