:root {
    /* Primary: blue ramp (token name kept for compatibility) */
    --wepi-color-rose-50: #eff6ff;
    --wepi-color-rose-100: #dbeafe;
    --wepi-color-rose-400: #60a5fa;
    --wepi-color-rose-500: #3b82f6;
    --wepi-color-rose-600: #2563eb;
    --wepi-color-rose-700: #1d4ed8;
    /* Success: green ramp (token name kept for compatibility) */
    --wepi-color-sage-100: #dcfce7;
    --wepi-color-sage-500: #22c55e;
    --wepi-color-sage-600: #16a34a;
    --wepi-color-sage-700: #15803d;
    /* Surfaces: slate ramp (token name kept for compatibility) */
    --wepi-color-cream-50: #f8fafc;
    --wepi-color-cream-100: #f1f5f9;
    --wepi-color-white: #ffffff;
    /* Text: slate ramp (token name kept for compatibility) */
    --wepi-color-ink-900: #0f172a;
    --wepi-color-ink-700: #334155;
    --wepi-color-ink-600: #475569;
    --wepi-color-ink-500: #64748b;
    --wepi-color-ink-300: #cbd5e1;
    --wepi-color-focus: #2563eb;
    --wepi-color-warning: #d97706;
    --wepi-color-danger: #dc2626;
    --wepi-color-info: #64748b;
    /* Direct-name tokens for new work */
    --wepi-color-blue-50: #eff6ff;
    --wepi-color-blue-100: #dbeafe;
    --wepi-color-blue-600: #2563eb;
    --wepi-color-blue-700: #1d4ed8;
    --wepi-color-teal-500: #14b8a6;
    --wepi-color-green-100: #dcfce7;
    --wepi-color-green-600: #16a34a;
    --wepi-color-purple-100: #f3e8ff;
    --wepi-color-purple-600: #8b5cf6;
    --wepi-color-orange-100: #ffedd5;
    --wepi-color-orange-600: #f97316;
    --wepi-color-blue-resources-100: #eaf1ff;
    --wepi-color-amber-100: #fef3c7;
    --wepi-color-amber-600: #d97706;
    --wepi-color-red-100: #fee2e2;
    --wepi-color-red-600: #dc2626;
    --wepi-color-slate-50: #f8fafc;
    --wepi-color-slate-100: #f1f5f9;
    --wepi-color-slate-200: #e2e8f0;
    --wepi-color-slate-400: #94a3b8;
    /* Muted body text that still clears WCAG AA (5.2:1 on the app background).
       slate-400 is 2.6:1 and is only safe for decorative icons. */
    --wepi-color-text-muted: #5b6a87;
    --wepi-color-slate-600: #475569;
    --wepi-color-slate-900: #0f172a;
    --wepi-gradient-primary-cta: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --wepi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --wepi-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --wepi-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --wepi-radius-sm: 8px;
    --wepi-radius-md: 12px;
    --wepi-radius-lg: 16px;
    --wepi-radius-xl: 24px;
    --wepi-radius-pill: 999px;
    --wepi-space-2: 8px;
    --wepi-space-3: 12px;
    --wepi-space-4: 16px;
    --wepi-space-5: 20px;
    --wepi-space-6: 24px;
    --wepi-space-8: 32px;
    --wepi-size-tap-target: 44px;
    --wepi-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --wepi-font-ui: "Inter", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--wepi-color-slate-50);
    color: var(--wepi-color-ink-900);
    font-family: var(--wepi-font-ui);
}

/* textarea and select were missing here, so they fell back to the browser
   default (monospace for textarea) and broke the type system. */
a,
button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
    opacity: 0.6;
}

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

.app-shell {
    display: grid;
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--wepi-color-slate-50);
}

.public-shell {
    /* Narrow by default: most public pages are single-card auth surfaces.
       Wide content pages opt in by rendering .public-page--wide. */
    --public-shell-max: 460px;
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--wepi-space-6);
    padding: clamp(24px, 7vw, 72px) clamp(16px, 5vw, 40px);
    background: var(--wepi-color-slate-50);
}

.public-shell > * {
    width: min(100%, var(--public-shell-max));
}

.public-shell:has(.public-page--wide) {
    --public-shell-max: 1120px;
}

.public-shell__masthead {
    display: grid;
    gap: var(--wepi-space-4);
    align-content: start;
    justify-items: center;
}

.public-shell:has(.public-page--wide) .public-shell__masthead {
    justify-items: start;
}

.public-shell--guest-event {
    align-content: start;
    justify-items: stretch;
    gap: 0;
    padding: 0;
}

.public-shell--guest-event > * {
    width: 100%;
}

.public-shell__brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.public-shell__brand--topbar {
    justify-self: start;
}

.public-shell__brand-image {
    display: block;
    width: min(160px, 100%);
    height: auto;
}

.public-shell__brand-image--topbar {
    width: auto;
    max-width: 140px;
    max-height: 48px;
}

.public-shell__topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--wepi-space-4);
    padding: 14px clamp(20px, 5vw, 40px);
    background: rgba(246, 248, 252, 0.84);
    border-bottom: 1px solid rgba(216, 224, 240, 0.88);
    box-shadow: var(--wepi-shadow-sm);
    backdrop-filter: blur(10px);
}

.public-shell__topbar-title {
    margin: 0;
    text-align: center;
    align-self: center;
}

.public-shell__topbar-actions {
    justify-self: end;
}

.organizer-account-shell {
    min-height: 100vh;
    background: var(--wepi-color-slate-50);
}

.organizer-account-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wepi-space-5);
    padding: 20px clamp(20px, 5vw, 40px);
    background: rgba(246, 248, 252, 0.84);
    border-bottom: 1px solid rgba(216, 224, 240, 0.88);
    backdrop-filter: blur(18px);
}

.organizer-account-topbar__brand-image {
    width: min(168px, 100%);
}

.organizer-account-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-4);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.organizer-account-view-root {
    padding: clamp(24px, 5vw, 40px);
}

.organizer-account-shell .eyebrow {
    color: #4362a8;
}

.organizer-account-shell .primary-button {
    border-color: rgba(47, 89, 177, 0.22);
    background: linear-gradient(135deg, #2f6fe4 0%, #1f5bd1 100%);
    box-shadow: 0 16px 30px rgba(47, 105, 220, 0.22);
}

.organizer-account-shell .outline-button {
    border-color: rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.92);
    color: #35529a;
}

.organizer-account-shell .panel-link {
    color: #35529a;
}

.organizer-account-shell .surface-card,
.organizer-account-shell .empty-state {
    border-color: rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(57, 81, 129, 0.08);
}

.organizer-account-shell .mini-pill.neutral {
    background: rgba(231, 238, 252, 0.82);
    color: #42649f;
    border-color: rgba(202, 214, 239, 0.94);
}

.organizer-account-shell .mini-pill.confirmed {
    background: rgba(226, 237, 255, 0.94);
    color: #2d58b1;
    border-color: rgba(87, 126, 211, 0.22);
}

.organizer-account-shell .organizer-event-card.is-selected {
    border-color: rgba(47, 105, 220, 0.32);
    box-shadow: 0 18px 36px rgba(47, 105, 220, 0.12);
}

.organizer-account-shell .organizer-invited-event-row {
    border-color: rgba(214, 223, 240, 0.94);
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.96), rgba(236, 242, 254, 0.88));
}

.provider-profile-shell {
    display: grid;
    gap: var(--wepi-space-6);
}

.provider-profile-hero {
    display: grid;
    gap: var(--wepi-space-5);
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 420px);
    align-items: start;
}

.provider-profile-hero__copy,
.provider-profile-hero__aside {
    display: grid;
    gap: var(--wepi-space-4);
}

.provider-profile-hero h1 {
    margin: 0;
    font-family: var(--wepi-font-ui);
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.provider-profile-hero__tagline {
    margin: 0;
    font-size: 1.15rem;
    color: var(--wepi-color-ink-700);
}

.provider-profile-hero__summary {
    margin: 0;
    max-width: 62ch;
    line-height: 1.6;
}

.provider-profile-hero__cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--wepi-radius-lg);
    display: block;
}

.provider-profile-grid {
    display: grid;
    gap: var(--wepi-space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* The gallery card spans the profile grid so images get a usable width. */
.provider-profile-gallery-card {
    grid-column: 1 / -1;
}

.provider-profile-gallery {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.provider-profile-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--wepi-radius-md);
    display: block;
}

.provider-profile-contact__items {
    display: grid;
    gap: var(--wepi-space-4);
}

.provider-profile-gallery {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.provider-media-placeholder {
    display: grid;
    gap: var(--wepi-space-2);
    place-items: center;
    align-content: center;
    margin: 0;
    padding: var(--wepi-space-5);
    min-height: 140px;
    border-radius: 16px;
    border: 1px solid rgba(203, 216, 240, 0.9);
    background: linear-gradient(160deg, rgba(232, 240, 255, 0.85), rgba(246, 249, 255, 0.95));
    text-align: center;
}

.provider-media-placeholder--cover {
    min-height: 220px;
}

.provider-media-placeholder__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    color: #5b7cc0;
    box-shadow: inset 0 0 0 1px rgba(176, 198, 242, 0.7);
}

.provider-media-placeholder__icon svg {
    width: 22px;
    height: 22px;
}

.provider-media-placeholder figcaption {
    font-size: 0.9rem;
    color: var(--wepi-color-ink-500);
    max-width: 32ch;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--wepi-space-5);
    padding: var(--wepi-space-5) var(--wepi-space-4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95)),
        linear-gradient(180deg, rgba(207, 221, 246, 0.3), transparent);
    border-right: 1px solid rgba(210, 219, 235, 0.95);
    position: sticky;
    top: 0;
    min-height: 100vh;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.brand-mark--link {
    text-decoration: none;
}

.brand-mark__image {
    display: block;
    width: min(180px, 100%);
    height: auto;
}

.event-card,
.sidebar-note,
.surface-card,
.summary-strip,
.task-list-card,
.activity-list-card,
.conversation-card,
.detail-card,
.roster-card,
.side-panel,
.table-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(211, 221, 238, 0.94);
    border-radius: 16px;
    box-shadow: var(--wepi-shadow-sm);
    backdrop-filter: blur(10px);
}

.event-card,
.sidebar-note,
.surface-card,
.summary-strip,
.task-list-card,
.activity-list-card,
.conversation-card,
.detail-card,
.roster-card,
.side-panel {
    padding: var(--wepi-space-5);
}

.eyebrow {
    margin: 0 0 var(--wepi-space-2);
    font-size: 0.75rem;
    color: #4362a8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-card h1,
.page-header h2,
.table-heading,
.surface-card h3,
.task-list-card h3,
.activity-list-card h3,
.conversation-card h3,
.detail-card h3,
.roster-card h3 {
    margin: 0;
    font-family: var(--wepi-font-ui);
    font-weight: 600;
}

.event-card h1 {
    font-size: 2rem;
}

.surface-card h3,
.task-list-card h3,
.activity-list-card h3,
.conversation-card h3,
.detail-card h3,
.roster-card h3 {
    font-size: 1.375rem;
    line-height: 1.36;
    margin-bottom: var(--wepi-space-4);
}

.subhead,
.row-subtitle,
.muted,
.page-header p,
.profile-chip p {
    color: #61718f;
}

.subhead {
    margin: var(--wepi-space-2) 0 var(--wepi-space-5);
}

.event-meta {
    display: grid;
    gap: var(--wepi-space-2);
    margin: var(--wepi-space-3) 0 0;
}

.event-meta div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wepi-space-3);
}

.event-meta dt {
    font-size: 0.8rem;
    color: #5b6a87;
}

.event-meta dd {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card__actions {
    margin-top: var(--wepi-space-4);
}

.event-card__actions .button-link {
    min-height: 34px;
    padding: 0 var(--wepi-space-3);
    font-size: 0.86rem;
}

.nav {
    display: grid;
    gap: 10px;
}

.nav-item,
.outline-button,
.primary-button,
.filter-chip,
.tab-chip,
.button-link,
.guest-chip {
    min-height: var(--wepi-size-tap-target);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 120ms ease-out, box-shadow 180ms ease-out;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(211, 220, 237, 0.88);
    background: rgba(255, 255, 255, 0.76);
    color: #3f4d68;
    box-shadow: 0 8px 20px rgba(48, 63, 95, 0.06);
    text-decoration: none;
}

.nav-item__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: var(--wepi-radius-pill);
    background: var(--wepi-color-red-600);
    color: var(--wepi-color-white);
    font-size: 0.74rem;
    font-weight: 700;
}

.nav-item:hover {
    background: rgba(238, 244, 255, 0.9);
    color: #1949b1;
}

.nav-item.active,
.nav-item:focus-visible {
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.96), rgba(223, 235, 255, 0.92));
    color: #1949b1;
    border-color: rgba(101, 141, 228, 0.34);
    box-shadow: 0 16px 30px rgba(53, 93, 181, 0.12);
    outline: none;
}

.sidebar-note {
    margin-top: auto;
    background:
        linear-gradient(180deg, rgba(238, 244, 255, 0.96), rgba(255, 255, 255, 0.94)),
        linear-gradient(135deg, rgba(69, 120, 224, 0.1), transparent);
    border-color: rgba(205, 217, 240, 0.95);
}

.sidebar-footnote {
    margin: var(--wepi-space-3) 0 0;
    font-size: 0.9rem;
    color: var(--wepi-color-ink-500);
}

.note-title {
    margin: 0 0 var(--wepi-space-2);
    font-weight: 700;
}

.mode-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(202, 214, 239, 0.94);
    font-weight: 700;
}

.mode-pill.is-demo {
    background: rgba(226, 237, 255, 0.94);
    border-color: rgba(87, 126, 211, 0.22);
    color: #2d58b1;
}

.mode-pill.is-real {
    background: rgba(226, 237, 255, 0.94);
    border-color: rgba(87, 126, 211, 0.22);
    color: #2d58b1;
}

.main-column {
    min-width: 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: var(--wepi-space-6);
    align-items: center;
    padding: var(--wepi-space-6) var(--wepi-space-8) var(--wepi-space-4);
    background: rgba(246, 248, 252, 0.84);
    border-bottom: 1px solid rgba(216, 224, 240, 0.88);
    backdrop-filter: blur(18px);
}

.topbar--meta-only {
    justify-content: flex-end;
}

.search-field {
    /* Wide enough that the placeholder never truncates mid-word.
       flex-basis stays auto on purpose: the topbar becomes a column on small
       screens, where a fixed basis would set the field's HEIGHT instead. */
    flex: 1 1 auto;
    min-width: 240px;
    max-width: 440px;
}

.inline-search {
    width: 100%;
}

.search-field input,
.inline-search {
    min-height: 48px;
    border: 1px solid rgba(204, 216, 238, 0.96);
    border-radius: 14px;
    padding: 0 var(--wepi-space-4);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(68, 92, 138, 0.08);
}

.inline-search-compact {
    width: 260px;
}

.search-field input:focus-visible,
.inline-search:focus-visible,
.button-link:focus-visible,
.outline-button:focus-visible,
.primary-button:focus-visible,
.attention-card:focus-visible,
.guest-chip:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 2px;
}

.event-card h1:focus,
.page-header h2:focus,
.empty-state h2:focus,
.surface-card h3:focus {
    outline: 2px solid rgba(47, 105, 220, 0.42);
    outline-offset: 3px;
    border-radius: 8px;
}

.topbar-meta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--wepi-space-4);
}

.provider-topbar-actions {
    gap: var(--wepi-space-3);
}

.language-switcher {
    position: relative;
}

/* Previously a borderless icon + "EN" with 4px of padding: no boundary, no
   chevron, and a ~30px target, so nothing signalled it was interactive. */
.language-switcher__summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--wepi-size-tap-target);
    padding: 0 10px;
    border: 1px solid rgba(206, 217, 237, 0.92);
    border-radius: var(--wepi-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    list-style: none;
    cursor: pointer;
    color: var(--wepi-color-slate-900);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.language-switcher__summary:hover {
    border-color: rgba(101, 141, 228, 0.5);
}

.language-switcher__summary:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 2px;
}

.language-switcher__summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.language-switcher[open] > .language-switcher__summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.language-switcher__summary::-webkit-details-marker {
    display: none;
}

.language-switcher__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #3f4d68;
}

.language-switcher__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.language-switcher__code {
    text-transform: uppercase;
}

.language-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 2px;
    min-width: 148px;
    padding: 6px;
    border: 1px solid rgba(206, 217, 237, 0.92);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(71, 92, 136, 0.12);
}

.language-switcher__option {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--wepi-color-slate-900);
    font-weight: 600;
    text-decoration: none;
}

.language-switcher__option:hover,
.language-switcher__option:focus-visible {
    background: rgba(232, 240, 255, 0.96);
    outline: none;
}

.language-switcher__option[aria-current="page"] {
    color: #1949b1;
    background: rgba(232, 240, 255, 0.96);
}

.shell-toolbar-cluster {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shell-toolbar-divider {
    flex-shrink: 0;
    width: 1px;
    height: 24px;
    background: rgba(206, 217, 237, 0.92);
}

.shell-toolbar-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #3f4d68;
    text-decoration: none;
}

.shell-toolbar-icon-button__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.shell-toolbar-icon-button__glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

.shell-toolbar-icon-button__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f97362, #f35a4d);
    color: var(--wepi-color-white);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(234, 104, 82, 0.3);
}

.provider-account-menu {
    position: relative;
}

.provider-account-menu__summary {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-3);
    min-height: 44px;
    flex: 0 0 auto;
    padding: 4px 10px 4px 4px;
    border: 1px solid rgba(206, 217, 237, 0.92);
    border-radius: var(--wepi-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(71, 92, 136, 0.08);
    cursor: pointer;
    list-style: none;
}

.provider-account-menu__summary::-webkit-details-marker {
    display: none;
}

.provider-account-menu__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--wepi-radius-pill);
    background: var(--wepi-color-blue-100);
    color: var(--wepi-color-blue-700);
    font-weight: 700;
}

.provider-account-menu__label {
    display: grid;
    gap: 1px;
    min-width: 0;
    color: var(--wepi-color-slate-900);
    font-weight: 700;
}

/* Long account names must truncate on one line — wrapping breaks the pill. */
.provider-account-menu__label > span,
.provider-account-menu__label small {
    display: block;
    max-width: 15ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.provider-account-menu__label small {
    color: var(--wepi-color-slate-600);
    font-size: 0.74rem;
    font-weight: 600;
}

/* Below the tablet breakpoint the topbar is tight: keep the avatar only. */
@media (max-width: 767px) {
    .provider-account-menu__label {
        display: none;
    }
}

.provider-account-menu__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    display: grid;
    gap: 4px;
    padding: var(--wepi-space-2);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-md);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-lg);
}

.provider-account-menu__panel a,
.provider-account-menu__panel button {
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--wepi-color-slate-900);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.provider-account-menu__panel a:hover,
.provider-account-menu__panel a:focus-visible,
.provider-account-menu__panel button:hover,
.provider-account-menu__panel button:focus-visible {
    background: var(--wepi-color-slate-50);
    outline: none;
}

.marketplace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--wepi-space-3);
}

/* flex-shrink used to squeeze these below their content, so option text and
   the date value clipped mid-word. Let them keep their width and wrap. */
.marketplace-toolbar__control {
    display: grid;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
}

.marketplace-toolbar__control .field-input {
    width: auto;
    min-width: 150px;
}

.marketplace-toolbar__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wepi-color-slate-600);
}

.marketplace-toolbar__location {
    flex: 1 1 220px;
}

.marketplace-toolbar__location .field-input {
    width: 100%;
}

.marketplace-filters {
    position: relative;
    flex: 0 0 auto;
}

.marketplace-filters__summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--wepi-space-4);
    cursor: pointer;
    list-style: none;
}

.marketplace-filters__summary::-webkit-details-marker {
    display: none;
}

.marketplace-filters__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    gap: var(--wepi-space-3);
    min-width: 240px;
    padding: var(--wepi-space-4);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-md);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-lg);
}

.marketplace-filters__panel .field-input {
    width: 100%;
}

.admin-new-menu__summary {
    list-style: none;
    cursor: pointer;
}

.admin-new-menu__summary::-webkit-details-marker {
    display: none;
}

.provider-account-menu__meta {
    display: grid;
    gap: 3px;
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--wepi-color-slate-100);
}

.provider-account-menu__meta span {
    color: var(--wepi-color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.provider-account-menu__meta strong {
    color: var(--wepi-color-slate-900);
}

.provider-account-menu__meta small {
    color: var(--wepi-color-slate-600);
    font-size: 0.78rem;
}

.provider-main-column {
    position: relative;
    min-width: 0;
}

.provider-shell-actions {
    position: absolute;
    top: 24px;
    right: var(--wepi-space-8);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wepi-space-3);
}

.provider-app-shell .view-root {
    padding-top: 88px;
}

.topbar-quote {
    margin: 0;
    font-family: var(--wepi-font-ui);
    color: #4362a8;
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-2) var(--wepi-space-3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(206, 217, 237, 0.92);
    box-shadow: 0 12px 28px rgba(71, 92, 136, 0.08);
}

.profile-chip p {
    margin: 2px 0 0;
    font-size: 0.85rem;
}

.avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(232, 240, 255, 0.98), rgba(212, 226, 255, 0.96));
    color: #1949b1;
    font-weight: 700;
}

.view-root {
    padding: 0 var(--wepi-space-8) var(--wepi-space-8);
}

.page {
    display: grid;
    gap: var(--wepi-space-6);
}

.page-header,
.panel-header {
    display: flex;
    justify-content: space-between;
    gap: var(--wepi-space-6);
    align-items: flex-start;
}

.panel-header-wrap {
    flex-wrap: wrap;
}

.page-header h2 {
    font-size: 1.875rem;
    line-height: 1.27;
}

.page-header p {
    margin: var(--wepi-space-2) 0 0;
    max-width: 64ch;
}

.guest-page-search {
    margin-top: var(--wepi-space-4);
    max-width: 640px;
}

.quick-invite-card__form {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}

.quick-invite-card__actions {
    display: flex;
    align-items: end;
    min-height: 100%;
}

.quick-invite-card__actions .primary-button {
    width: 100%;
}

.header-actions,
.filter-row,
.tab-row,
.legend {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    flex-wrap: wrap;
}

.button-link,
.outline-button,
.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--wepi-space-4);
    text-decoration: none;
}

.workspace-event-switcher {
    width: min(260px, 100%);
}

.workspace-event-switcher .field-input {
    min-width: 220px;
}

.organizer-events-page {
    gap: var(--wepi-space-5);
}

.organizer-events-section {
    gap: var(--wepi-space-5);
}

.organizer-events-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.organizer-event-card {
    display: grid;
    gap: var(--wepi-space-4);
}

.organizer-event-card__headline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: baseline;
}

.organizer-event-card__subtitle {
    color: #61718f;
}

.organizer-event-card.is-selected {
    border-color: rgba(47, 105, 220, 0.32);
    box-shadow: 0 18px 36px rgba(47, 105, 220, 0.12);
}

.organizer-event-card__details {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organizer-event-card__detail-item {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(214, 223, 240, 0.94);
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.96), rgba(236, 242, 254, 0.88));
}

.organizer-event-card__detail-item .row-title {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6076a5;
}

.organizer-event-card__detail-item .row-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #18325d;
}

.organizer-event-card__actions {
    margin-top: auto;
}

.organizer-invited-events-list {
    display: grid;
    gap: var(--wepi-space-3);
}

.organizer-invited-event-row {
    display: flex;
    justify-content: space-between;
    gap: var(--wepi-space-4);
    align-items: flex-start;
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(214, 223, 240, 0.94);
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.96), rgba(236, 242, 254, 0.88));
}

.primary-button {
    background: var(--wepi-gradient-primary-cta);
    color: var(--wepi-color-white);
    border-color: rgba(47, 89, 177, 0.22);
    box-shadow: 0 16px 30px rgba(47, 105, 220, 0.22);
}

.outline-button {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(204, 216, 238, 0.94);
    color: #35529a;
}

.filter-chip,
.tab-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--wepi-space-4);
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.76);
    color: var(--wepi-color-ink-700);
}

.filter-chip.is-active,
.tab-chip.is-active {
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.96), rgba(223, 235, 255, 0.92));
    color: #1949b1;
    border-color: rgba(101, 141, 228, 0.34);
}

.metrics-grid,
.summary-strip,
.detail-hero {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.attention-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.attention-summary__meta {
    margin: var(--wepi-space-2) 0 0;
    max-width: 64ch;
}

.attention-card {
    width: 100%;
    padding: var(--wepi-space-4);
    border-radius: 16px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--wepi-shadow-sm);
    appearance: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    display: grid;
    gap: var(--wepi-space-2);
    align-content: start;
    text-align: left;
}

.attention-card.is-neutral {
    background: rgba(255, 255, 255, 0.82);
}

.attention-card.is-pending {
    background: rgba(255, 248, 235, 0.88);
    border-color: rgba(214, 144, 67, 0.24);
}

.attention-card.is-risk {
    background: rgba(255, 241, 241, 0.86);
    border-color: rgba(201, 80, 90, 0.24);
}

.attention-card.is-confirmed {
    background: rgba(237, 243, 234, 0.88);
    border-color: rgba(113, 136, 95, 0.24);
}

.attention-card.is-active {
    border-color: rgba(47, 105, 220, 0.34);
    box-shadow: 0 0 0 1px rgba(47, 105, 220, 0.18), var(--wepi-shadow-sm);
}

.attention-card:disabled {
    opacity: 0.76;
    cursor: default;
}

.attention-card__label {
    color: var(--wepi-color-ink-700);
    font-weight: 700;
}

.attention-card__value {
    font-family: var(--wepi-font-ui);
    font-size: 2rem;
    line-height: 1;
    color: var(--wepi-color-ink-800);
}


.metric-card {
    padding: var(--wepi-space-5);
}

.metric-card--iconed {
    display: flex;
    align-items: flex-start;
    gap: var(--wepi-space-3);
}

.metric-card__body {
    min-width: 0;
}

.metric-card__body .metric-label {
    margin: 0;
}

.metric-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.metric-card__icon svg {
    width: 20px;
    height: 20px;
}

.metric-card__icon--blue {
    background: var(--wepi-color-blue-100);
    color: var(--wepi-color-blue-600);
}

.metric-card__icon--green {
    background: var(--wepi-color-green-100);
    color: var(--wepi-color-green-600);
}

.metric-card__icon--amber {
    background: var(--wepi-color-amber-100);
    color: var(--wepi-color-amber-600);
}

.metric-card__icon--orange {
    background: var(--wepi-color-orange-100);
    color: var(--wepi-color-orange-600);
}

.metric-card__icon--red {
    background: var(--wepi-color-red-100);
    color: var(--wepi-color-red-600);
}

.metric-card__icon--purple {
    background: var(--wepi-color-purple-100);
    color: var(--wepi-color-purple-600);
}

.metric-card__icon--neutral {
    background: var(--wepi-color-slate-100);
    color: var(--wepi-color-slate-400);
}

/* Avoid a 4+2 orphan row when a metrics strip holds exactly 6 cards.
   Only above the tablet breakpoint — on narrow screens forcing 3 columns
   makes the cards narrower than their content and the page scrolls sideways. */
@media (min-width: 721px) {
    .metrics-grid:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* These rows are links, but with no chevron and no hover they read as static
   text, so nobody clicks them. Give them a visible affordance. */
.setup-checklist__row {
    display: flex;
    align-items: flex-start;
    gap: var(--wepi-space-3);
    text-decoration: none;
    color: inherit;
    border-radius: var(--wepi-radius-md);
    transition: background-color 150ms ease-out;
}

.setup-checklist__row:not(.is-complete)::after {
    content: "";
    flex: none;
    align-self: center;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--wepi-color-blue-600);
    border-right: 2px solid var(--wepi-color-blue-600);
    transform: rotate(45deg);
}

.setup-checklist__row:hover,
.setup-checklist__row:focus-visible {
    background: var(--wepi-color-blue-50);
}

.setup-checklist__row .row-title,
.setup-checklist__row .row-subtitle {
    display: block;
}

.setup-checklist__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid rgba(101, 141, 228, 0.44);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wepi-color-green-600, #2c7a4b);
}

.setup-checklist__row.is-complete .setup-checklist__mark {
    border-color: var(--wepi-color-green-600, #2c7a4b);
    background: var(--wepi-color-green-100, #e3f2e8);
}

.setup-checklist__row.is-complete .row-title {
    text-decoration: line-through;
    color: var(--wepi-color-ink-500, #6b7a99);
}

.empty-state {
    display: grid;
    gap: var(--wepi-space-3);
    padding: clamp(28px, 5vw, 48px);
    border-radius: 16px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(57, 81, 129, 0.08);
    max-width: 720px;
}

.empty-state h2 {
    margin: 0;
    font-family: var(--wepi-font-ui);
    font-size: 1.875rem;
    line-height: 1.27;
}

.empty-state .muted {
    margin: 0;
    max-width: 58ch;
}

.metric-label,
.kicker {
    color: var(--wepi-color-ink-500);
    font-size: 0.85rem;
}

.metric-value,
.summary-value {
    margin: var(--wepi-space-2) 0 0;
    font-size: 1.9rem;
    font-weight: 700;
}

.metric-meta {
    margin: var(--wepi-space-2) 0 0;
    color: var(--wepi-color-ink-600);
}

.content-grid {
    display: grid;
    gap: var(--wepi-space-5);
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.content-grid.three-up {
    grid-template-columns: 1.15fr 1fr 1fr;
}

.chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 360px);
    gap: var(--wepi-space-5);
}

.chart-board {
    display: grid;
    gap: var(--wepi-space-5);
}

.board-canvas {
    padding: var(--wepi-space-5);
    border-radius: 24px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 245, 255, 0.9));
}

.board-toolbar {
    display: flex;
    justify-content: space-between;
    gap: var(--wepi-space-4);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--wepi-space-4);
}

.segmented-control {
    display: inline-flex;
    gap: var(--wepi-space-2);
    flex-wrap: wrap;
    /* inline-flex sizes to max-content, so without this the control keeps its
       unwrapped width and pushes the page sideways on narrow viewports. */
    max-width: 100%;
    min-width: 0;
}

.segmented-control .outline-button,
.segmented-control .primary-button {
    justify-content: center;
    min-width: 148px;
}

.table-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.floor-plan-frame {
    padding: var(--wepi-space-4);
    border-radius: 8px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.98));
}

.floor-plan-room {
    position: relative;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid rgba(117, 137, 173, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 255, 0.98)),
        linear-gradient(rgba(117, 137, 173, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 137, 173, 0.06) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}

.floor-plan-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(117, 137, 173, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 137, 173, 0.06) 1px, transparent 1px);
    background-size: 10% 10%;
}

.floor-plan-table {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0;
    border: 1px solid rgba(191, 204, 226, 0.9);
    background: rgba(255, 255, 255, 0.92);
    color: var(--wepi-color-ink-900);
    box-shadow: var(--wepi-shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.floor-plan-table:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 36, 33, 0.12);
}

.layout-studio-table {
    cursor: grab;
    touch-action: none;
}

.layout-studio-table.is-dragging {
    z-index: 8;
    cursor: grabbing;
    transition: none;
}

.layout-studio-table .floor-plan-table-label,
.layout-studio-table .floor-plan-chair {
    pointer-events: none;
}

.floor-plan-table.is-selected {
    border-color: rgba(47, 105, 220, 0.5);
    box-shadow: 0 0 0 2px rgba(47, 105, 220, 0.16), 0 8px 18px rgba(31, 36, 33, 0.14);
}

.floor-plan-table.is-round,
.floor-plan-table.is-cocktail {
    border-radius: 999px;
}

.floor-plan-table.is-rectangle,
.floor-plan-table.is-head-table {
    border-radius: 8px;
}

.floor-plan-table.tone-confirmed {
    background: rgba(237, 243, 234, 0.95);
}

.floor-plan-table.tone-pending {
    background: rgba(252, 244, 232, 0.96);
}

.floor-plan-table.tone-risk {
    background: rgba(252, 238, 240, 0.96);
}

.floor-plan-table.tone-neutral {
    background: rgba(240, 244, 248, 0.96);
}

.floor-plan-table-label {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 6px;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.2;
}

.floor-plan-table-label strong {
    font-size: 0.82rem;
}

.floor-plan-chair {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 999px;
    border: 1px solid rgba(191, 204, 226, 0.9);
    background: var(--wepi-color-white);
    box-shadow: 0 2px 6px rgba(31, 36, 33, 0.1);
}

.seating-v2-page,
.seating-v2-board-column,
.seating-v2-board-shell,
.seating-v2-rail,
.seating-v2-guest-card,
.seating-v2-conflict-card,
.seating-v2-selection-summary,
.seating-v2-studio-grid {
    display: grid;
    gap: var(--wepi-space-5);
}

.seating-v2-header {
    align-items: end;
}

.seating-v2-panel-switcher {
    padding: var(--wepi-space-5);
}

.seating-v2-panel-switcher .segmented-control {
    justify-content: flex-end;
}

.seating-v2-overview-strip,
.seating-v2-board-summary-strip,
.seating-v2-rail-strip {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.seating-v2-workspace {
    align-items: start;
}

.seating-v2-board-shell {
    padding: var(--wepi-space-6);
}

.seating-v2-toolbar-actions {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.seating-v2-board-note {
    margin: 0;
}

.seating-v2-room-frame {
    padding: var(--wepi-space-5);
    border-radius: 20px;
}

.seating-v2-room {
    min-height: 640px;
}

.seating-v2-board-empty {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: var(--wepi-space-2);
    justify-items: center;
    padding: var(--wepi-space-5);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(204, 216, 238, 0.94);
    text-align: center;
    color: var(--wepi-color-ink-600);
}

.seating-board-table {
    min-width: 0;
    min-height: 0;
    isolation: isolate;
}

.seating-board-table:hover {
    transform: translateY(-2px);
}

.seating-board-table-label {
    padding: 18px 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.seating-board-table-select {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.seating-board-table-select:focus-visible {
    outline: 2px solid rgba(47, 105, 220, 0.42);
    outline-offset: 3px;
}

.seating-board-seat {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    margin-left: -17px;
    margin-top: -17px;
    border-radius: 999px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(31, 36, 33, 0.12);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wepi-color-ink-700);
    pointer-events: none;
}

.seating-board-seat.is-interactive {
    cursor: pointer;
    pointer-events: auto;
    font: inherit;
}

.seating-board-seat.is-interactive:hover {
    transform: translateY(-1px);
}

.seating-board-seat.is-open {
    border-style: dashed;
    color: var(--wepi-color-ink-500);
    background: rgba(255, 255, 255, 0.7);
}

.seating-board-seat.is-selected {
    border-color: rgba(47, 105, 220, 0.5);
    box-shadow: 0 0 0 2px rgba(47, 105, 220, 0.16), 0 8px 20px rgba(31, 36, 33, 0.12);
    color: #1949b1;
}

.seating-board-seat.is-targeted {
    border-color: rgba(93, 143, 108, 0.56);
    box-shadow: 0 0 0 2px rgba(93, 143, 108, 0.16), 0 8px 20px rgba(31, 36, 33, 0.12);
}

.seating-v2-selection-summary {
    padding: var(--wepi-space-5);
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: rgba(231, 238, 252, 0.68);
}

.seating-v2-guest-card .list-row,
.seating-v2-conflict-card .list-row {
    background: rgba(255, 255, 255, 0.76);
}

.seating-v2-table-catalog-row {
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    color: inherit;
    font: inherit;
}

.seating-v2-table-catalog-row.is-selected {
    border-color: rgba(47, 105, 220, 0.28);
    background: rgba(231, 238, 252, 0.5);
}

.seating-v2-page {
    gap: var(--wepi-space-5);
}

.seating-v2-command-header {
    align-items: center;
    gap: var(--wepi-space-4);
}

.seating-v2-command-header h2 {
    font-size: 1.875rem;
    line-height: 1.27;
}

.seating-v2-command-header p {
    max-width: 56ch;
}

/* Search, view switch and actions wrap independently. A fixed two-column grid
   with a 260px minimum overflowed once the view switch became a third child. */
.seating-v2-command-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-3);
    align-items: center;
    width: min(100%, 900px);
    min-width: 0;
}

.seating-v2-command-bar .inline-search-compact {
    flex: 1 1 240px;
    width: auto;
    min-width: 0;
}

.seating-v2-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.86fr);
    gap: var(--wepi-space-5);
    align-items: start;
}

.seating-v2-main {
    display: grid;
    gap: var(--wepi-space-4);
    min-width: 0;
}

/* Grid/flex children default to min-width:auto, so a wide toolbar row or chip
   cloud pushes the whole seating board past its track and overflows the page.
   Pin every seating container to min-width:0 so tracks stay authoritative. */
.seating-v2-shell,
.seating-v2-main > *,
.seating-v2-board-shell,
.seating-v2-board-shell > *,
.seating-v2-primary-board-shell,
.seating-v2-primary-board-shell > *,
.seating-v2-detail-rail,
.seating-v2-detail-rail > *,
.seating-v2-board-column,
.seating-v2-workspace > * {
    min-width: 0;
}

.seating-v2-primary-board-shell,
.seating-v2-support-grid,
.seating-v2-guest-roster,
.seating-v2-conflict-workspace,
.seating-v2-tools-toggle-card,
.seating-v2-detail-rail,
.seating-v2-detail-section {
    display: grid;
    gap: var(--wepi-space-4);
}

.seating-v2-primary-board-shell {
    padding: var(--wepi-space-5);
}

.seating-v2-board-topline,
.seating-v2-table-context {
    display: flex;
    gap: var(--wepi-space-3);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.seating-v2-mode-tabs {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.seating-v2-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(201, 80, 90, 0.14);
    color: #8a313b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.seating-v2-board-context {
    display: flex;
    justify-content: space-between;
    gap: var(--wepi-space-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

.seating-v2-board-context h3,
.seating-v2-table-context-copy strong {
    margin: 0;
    font-size: 1.18rem;
    font-family: var(--wepi-font-ui);
    font-weight: 600;
}

.seating-v2-board-context p,
.seating-v2-table-context-copy span {
    margin: 6px 0 0;
    color: var(--wepi-color-ink-600);
}

.seating-v2-table-context {
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
}

.seating-v2-table-context-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.seating-v2-room-frame {
    padding: var(--wepi-space-4);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.98));
}

.seating-v2-room {
    min-height: 680px;
    border-radius: 18px;
}

.seating-v2-room .floor-plan-grid {
    opacity: 0.55;
}

.seating-v2-primary-board-shell .seating-board-seat {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    margin-left: -15px;
    margin-top: -15px;
    font-size: 0.64rem;
}

.seating-v2-primary-board-shell .seating-board-table-label {
    padding: 14px 8px;
}

.seating-v2-support-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.seating-v2-review-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wepi-space-4);
}

.seating-v2-review-card {
    display: grid;
    gap: var(--wepi-space-4);
    width: 100%;
    text-align: left;
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: var(--wepi-space-5);
}

.seating-v2-review-card:disabled,
.seating-v2-review-card.is-static {
    cursor: default;
}

.seating-v2-review-card:disabled {
    opacity: 0.72;
}

.seating-v2-review-card__body {
    display: grid;
    gap: 8px;
}

.seating-v2-review-card__body strong {
    font-size: 1.75rem;
    line-height: 1.08;
}

.seating-v2-review-card__body span {
    color: var(--wepi-color-ink-600);
}

.seating-v2-summary-card,
.seating-v2-legend-card {
    padding: var(--wepi-space-5);
}

.seating-v2-summary-card .panel-header,
.seating-v2-legend-card .panel-header,
.seating-v2-guest-roster .panel-header,
.seating-v2-conflict-workspace .panel-header,
.seating-v2-tools-toggle-card .panel-header,
.seating-v2-detail-section .panel-header {
    gap: var(--wepi-space-4);
}

.seating-v2-summary-card .panel-header p,
.seating-v2-legend-card .panel-header p,
.seating-v2-guest-roster .panel-header p,
.seating-v2-conflict-workspace .panel-header p,
.seating-v2-tools-toggle-card .panel-header p,
.seating-v2-detail-section .panel-header p {
    margin-top: 6px;
}

.seating-v2-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wepi-space-3);
}

.seating-v2-metric-item {
    display: grid;
    gap: 6px;
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.74);
}

.seating-v2-metric-item strong {
    font-size: 1.45rem;
    line-height: 1.1;
}

.seating-v2-legend-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wepi-space-3);
}

.seating-v2-legend-item {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-2);
    color: var(--wepi-color-ink-700);
    min-width: 0;
}

.seating-v2-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
    background: rgba(111, 127, 149, 0.2);
}

.seating-v2-legend-dot.is-selected {
    background: rgba(47, 105, 220, 0.72);
}

.seating-v2-legend-dot.is-good {
    background: rgba(113, 136, 95, 0.84);
}

.seating-v2-legend-dot.is-warning {
    background: rgba(214, 144, 67, 0.84);
}

.seating-v2-legend-dot.is-open {
    background: rgba(111, 127, 149, 0.5);
}

.seating-v2-roster-row,
.seating-v2-table-catalog-row {
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    color: inherit;
    font: inherit;
}

.seating-v2-roster-row.is-selected,
.seating-v2-table-catalog-row.is-selected {
    border-color: rgba(47, 105, 220, 0.28);
    background: rgba(231, 238, 252, 0.5);
}

.seating-v2-conflict-workspace .list,
.seating-v2-guest-roster .list,
.seating-v2-detail-section .list {
    gap: var(--wepi-space-2);
}

.seating-v2-tools-toggle-card {
    align-items: center;
    padding: var(--wepi-space-4) var(--wepi-space-5);
    background: rgba(255, 255, 255, 0.55);
    border-style: dashed;
    box-shadow: none;
}

.seating-v2-tools-toggle-card .panel-header {
    align-items: center;
}

.seating-v2-panel-switcher {
    padding: var(--wepi-space-4) var(--wepi-space-5);
}

.seating-v2-panel-switcher .segmented-control {
    justify-content: flex-start;
}

.seating-v2-studio-grid {
    grid-template-columns: minmax(0, 1fr);
}

.seating-v2-selected-table-editor {
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.7);
}

.seating-layout-editor-panel {
    border-color: rgba(47, 105, 220, 0.2);
    background: rgba(246, 249, 255, 0.92);
}

.seating-layout-editor-frame {
    padding: 12px;
}

.seating-layout-editor-room {
    min-height: 520px;
}

.seating-v2-detail-rail {
    position: sticky;
    top: var(--wepi-space-5);
    align-content: start;
    padding: var(--wepi-space-5);
}

.seating-v2-detail-rows {
    display: grid;
    gap: 1px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(211, 221, 238, 0.94);
}

.seating-v2-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--wepi-space-3);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.82);
}

.seating-v2-detail-row span {
    font-size: 0.82rem;
    color: var(--wepi-color-ink-500);
}

.seating-v2-detail-row strong {
    font-size: 0.92rem;
    text-align: right;
    max-width: 60%;
}

.table-card {
    display: grid;
    align-content: start;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-4);
}

.table-card.is-selected {
    border-color: rgba(47, 105, 220, 0.32);
    background: rgba(231, 238, 252, 0.5);
}

.table-heading {
    display: grid;
    gap: var(--wepi-space-3);
    align-items: start;
}

.table-heading-copy {
    min-width: 0;
}

.table-heading-copy h4 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.table-heading-actions,
.guest-panel-heading,
.handoff-guest-name {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
}

.table-heading-actions {
    flex-wrap: wrap;
    justify-content: space-between;
}

.table-heading-actions .status-badge {
    max-width: 100%;
}

.table-heading-actions .compact-button {
    flex: 1 1 100%;
    justify-content: center;
    min-width: 0;
}

.table-rule-cloud {
    margin-top: var(--wepi-space-2);
}

.chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-2);
}

.guest-chip,
.status-badge,
.mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.85);
    color: var(--wepi-color-ink-700);
}

.guest-chip.is-selected {
    border-color: rgba(47, 105, 220, 0.36);
    background: rgba(231, 238, 252, 0.82);
    color: #1949b1;
}

.guest-chip-avatar {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 12px 8px 8px;
    text-align: left;
}

.guest-chip-copy,
.table-occupant-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.guest-chip-copy strong,
.guest-chip-copy span {
    overflow-wrap: anywhere;
}

.guest-chip-copy span,
.table-occupant-copy span {
    font-size: 0.8rem;
    color: var(--wepi-color-ink-500);
}

.guest-avatar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(204, 216, 238, 0.94);
    flex-shrink: 0;
}

.guest-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.guest-avatar-initials {
    background: rgba(47, 105, 220, 0.12);
    color: #1949b1;
    font-weight: 700;
    font-size: 0.78rem;
}

.guest-avatar-large {
    width: 48px;
    height: 48px;
}

/* Status tone must not be carried by colour alone (WCAG 1.4.1). Each tone gets
   a leading glyph so the state survives greyscale and colour-vision deficiency.
   aria-hidden is unnecessary: generated content is not exposed to most AT, and
   the badge already carries its state as text. */
.status-badge.confirmed,
.mini-pill.confirmed {
    background: rgba(237, 243, 234, 0.85);
    color: var(--wepi-color-sage-700);
}

.status-badge.confirmed::before,
.mini-pill.confirmed::before {
    content: "✓";
    font-weight: 700;
}

.status-badge.pending,
.mini-pill.pending {
    background: rgba(214, 144, 67, 0.14);
    color: #8f5d21;
}

.status-badge.pending::before,
.mini-pill.pending::before {
    content: "•";
    font-weight: 700;
}

.status-badge.risk,
.mini-pill.risk {
    background: rgba(201, 80, 90, 0.14);
    color: #8a313b;
}

.status-badge.risk::before,
.mini-pill.risk::before {
    content: "!";
    font-weight: 700;
}

.status-badge.neutral,
.mini-pill.neutral {
    background: rgba(111, 127, 149, 0.12);
    color: #44566e;
}

.reminder-due-flag {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(201, 80, 90, 0.14);
    color: #8a313b;
}

.legend-item {
    display: flex;
    gap: var(--wepi-space-2);
    align-items: center;
    color: var(--wepi-color-ink-600);
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--wepi-color-ink-300);
}

.legend-swatch.match {
    background: var(--wepi-color-sage-500);
}

.legend-swatch.conflict {
    background: var(--wepi-color-danger);
}

.legend-swatch.open {
    background: var(--wepi-color-info);
}

.timeline,
.list {
    display: grid;
    gap: var(--wepi-space-3);
}

.timeline-item,
.list-row,
.activity-row,
.message-row,
.file-row,
.task-row,
.obligation-row,
.guest-row,
.provider-card {
    display: grid;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.82);
}

.timeline-item {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
}

.timeline-item__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wepi-space-2);
}

.timeline-item__top .row-title {
    flex: 1 1 120px;
    min-width: 0;
}

.date-card {
    display: grid;
    place-items: center;
    padding: var(--wepi-space-2);
    border-radius: 12px;
    background: rgba(226, 237, 255, 0.94);
    color: #2d58b1;
    font-weight: 700;
}

.row-title {
    font-weight: 700;
}

.panel-link {
    color: #35529a;
    text-decoration: none;
}

.guest-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(120px, 0.4fr) minmax(120px, 0.4fr) minmax(140px, 0.5fr) auto;
    align-items: center;
}

.provider-card {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.4fr) minmax(190px, 0.55fr);
    align-items: center;
    text-align: left;
}

.obligation-row.is-selected {
    border-color: rgba(47, 105, 220, 0.28);
    background: rgba(231, 238, 252, 0.5);
}

.suggestion-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.suggestion-conflict-list {
    display: grid;
    gap: var(--wepi-space-3);
}

.table-drilldown-card {
    display: grid;
    gap: var(--wepi-space-4);
}

.table-occupant-row {
    width: 100%;
    border: 1px solid rgba(211, 221, 238, 0.94);
    text-align: left;
    cursor: pointer;
}

.occupant-avatar-shell {
    display: inline-flex;
    align-items: center;
}

.guest-party-card,
.guest-management-row {
    display: grid;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.82);
}

.guest-party-card.is-selected,
.guest-management-row.is-selected {
    border-color: rgba(47, 105, 220, 0.28);
    background: rgba(231, 238, 252, 0.5);
}

.guest-party-card.is-archived,
.guest-management-row.is-archived {
    background: rgba(238, 243, 252, 0.8);
}

.invited-people-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px);
    gap: var(--wepi-space-4);
    align-items: end;
    margin-bottom: var(--wepi-space-4);
}

.invited-person-row {
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: center;
}

.invited-person-row__identity,
.invited-person-row__meta,
.invited-person-row__actions {
    min-width: 0;
}

.invited-person-row__meta {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-3);
    white-space: nowrap;
}

.invited-person-row__actions {
    justify-self: end;
}

.guests-roster-panel,
.guest-roster-estimator-grid,
.guest-party-card__meta,
.guest-party-card__section {
    display: grid;
    gap: var(--wepi-space-4);
}

.guests-roster-panel {
    align-content: start;
}

.guest-party-card__header,
.guest-party-card__footer,
.guest-party-card__section-header,
.guest-management-row__summary,
.guest-management-row__footer,
.guest-management-sidebar {
    display: grid;
    gap: var(--wepi-space-3);
}

.guest-party-card__header,
.guest-party-card__footer,
.guest-party-card__section-header,
.guest-management-row__summary,
.guest-management-row__footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.guests-roster-panel__controls {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.guest-party-card__guest-list {
    margin-top: var(--wepi-space-2);
}

.guest-roster-estimator-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: var(--wepi-space-5);
}

.guest-roster-estimator-grid .list-row {
    height: 100%;
}

.guest-party-card__meta,
.guest-party-card__section {
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
}

.guest-party-card__section-actions,
.guest-party-card__actions,
.guest-management-row__actions {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.action-menu {
    position: relative;
}

.action-menu[open] {
    z-index: 2;
}

.action-menu__trigger {
    list-style: none;
    cursor: pointer;
}

.action-menu__trigger::-webkit-details-marker {
    display: none;
}

.action-menu__trigger::marker {
    content: "";
}

.action-menu__content {
    position: absolute;
    right: 0;
    top: calc(100% + var(--wepi-space-2));
    min-width: 200px;
    padding: var(--wepi-space-3);
    border-radius: 14px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--wepi-shadow-md);
    display: grid;
    gap: var(--wepi-space-2);
}

.action-menu__content .outline-button,
.action-menu__content .button-link {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

.action-menu__danger {
    border-color: rgba(201, 80, 90, 0.3);
    color: #8a313b;
}

.guest-management-row__notes {
    margin: 0;
}

.invitation-summary-grid,
.guest-entry-card,
.guest-entry-form,
.guest-event-shell,
.guest-event-main,
.guest-event-body,
.guest-event-content,
.guest-event-intro,
.guest-event-summary,
.guest-selection-grid,
.guest-identity-card,
.guest-access-shell,
.guest-access-summary,
.invitation-card,
.invitation-delivery-list {
    display: grid;
    gap: var(--wepi-space-4);
}

.invitation-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: var(--wepi-space-5);
}

.guest-entry-card {
    max-width: 980px;
}

.guest-event-summary {
    align-self: start;
}

.guest-event-details,
.guest-event-code-switcher {
    display: grid;
    gap: var(--wepi-space-4);
}

.guest-event-code-switcher {
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
}

.guest-event-code-switcher .muted {
    margin: 0;
}

.guest-entry-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.guest-entry-form--sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.guest-entry-form--sidebar .primary-button {
    width: 100%;
}

.public-shell--guest-event .guest-event-shell {
    padding: clamp(20px, 4vw, 48px) clamp(24px, 7vw, 72px) clamp(24px, 7vw, 72px);
}

.guest-event-intro {
    gap: var(--wepi-space-3);
    max-width: 62ch;
}

.guest-event-intro h1,
.guest-event-intro h2,
.guest-event-summary h3 {
    margin: 0;
}

.guest-event-code-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-2);
    align-items: center;
}

.guest-event-section-title {
    margin: 0;
}

.code-value--inline {
    font-size: 0.95rem;
}

@media (min-width: 1181px) {
    .public-shell--guest-event .guest-event-shell {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        column-gap: var(--wepi-space-6);
        row-gap: var(--wepi-space-6);
    }

    .public-shell--guest-event .guest-event-intro {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .public-shell--guest-event .guest-event-body {
        grid-column: 1;
        grid-row: 2;
    }

    .public-shell--guest-event .guest-event-summary {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: clamp(24px, 7vw, 72px);
    }
}

.guest-selection-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.code-value {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
}

.code-value-input {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.guest-identity-card {
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(231, 238, 252, 0.58);
}

.guest-identity-card__header {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.invitation-card {
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(211, 221, 238, 0.94);
    background: rgba(231, 238, 252, 0.58);
}

.invitation-card__header,
.invitation-delivery-row {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.invitation-link-row {
    gap: var(--wepi-space-2);
}

.invitation-details-disclosure {
    margin-top: var(--wepi-space-4);
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
}

.invitation-details-toggle {
    cursor: pointer;
}

.invitation-details-toggle > span {
    display: block;
}

.invitation-details-toggle .muted {
    margin-top: var(--wepi-space-1);
}

.invitation-details-content {
    display: grid;
    gap: var(--wepi-space-4);
    margin-top: var(--wepi-space-4);
}

.generated-link-row {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.generated-link {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.95rem;
}

.link-copy-button {
    width: var(--wepi-size-tap-target);
    min-width: var(--wepi-size-tap-target);
    padding: 0;
}

.link-copy-button.is-copied {
    background: rgba(226, 237, 255, 0.94);
    border-color: rgba(87, 126, 211, 0.22);
    color: #2d58b1;
}

.outline-button.is-copied {
    background: rgba(226, 237, 255, 0.94);
    border-color: rgba(87, 126, 211, 0.22);
    color: #2d58b1;
}

.link-copy-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.guest-access-hero {
    align-items: start;
}

.guest-event-hero {
    align-items: start;
}

.guest-access-guest-card.is-selected {
    border-color: rgba(47, 105, 220, 0.4);
    box-shadow: 0 0 0 1px rgba(47, 105, 220, 0.22);
    background: rgba(231, 238, 252, 0.68);
}

.guest-access-summary h3 {
    margin-bottom: 0;
}

.obligation-row__header,
.obligation-row__footer,
.checkbox-row {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.obligation-row__notes {
    margin: 0;
}

.split-layout,
.detail-grid {
    display: grid;
    gap: var(--wepi-space-5);
}

.split-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.detail-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(231, 238, 252, 0.95);
    overflow: hidden;
}

.progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5571b3, #2f6fe4);
}

.donut {
    width: 180px;
    height: 180px;
    border-radius: 999px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, var(--wepi-color-white) 37%, transparent 38%),
        conic-gradient(
            #2f6fe4 0 var(--donut-confirmed-end, 0%),
            rgba(156, 184, 239, 0.95) var(--donut-confirmed-end, 0%) var(--donut-pending-end, 0%),
            rgba(220, 227, 240, 0.95) var(--donut-pending-end, 0%) 100%);
}

.donut span {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.donut span small {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--wepi-color-ink-500);
}

.conversation {
    display: grid;
    gap: var(--wepi-space-4);
}

.bubble {
    max-width: 80%;
    padding: var(--wepi-space-4);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(211, 221, 238, 0.94);
}

.bubble.organizer {
    margin-left: auto;
    background: rgba(231, 238, 252, 0.86);
}

.bubble time {
    display: block;
    margin-top: var(--wepi-space-2);
    font-size: 0.75rem;
    color: var(--wepi-color-ink-500);
}

.composer {
    display: flex;
    gap: var(--wepi-space-3);
    margin-top: var(--wepi-space-4);
}

.composer input,
.composer textarea,
.field-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(204, 216, 238, 0.94);
    padding: 0 var(--wepi-space-4);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(68, 92, 138, 0.05);
}

.composer textarea,
.field-input:is(textarea) {
    min-height: 120px;
    padding-top: var(--wepi-space-3);
    padding-bottom: var(--wepi-space-3);
    resize: vertical;
}

/* Native date/time inputs size their own internals, so without this they sit a
   few pixels shorter than the text inputs beside them and break the row.
   (The mm/dd/yyyy vs dd.mm.yyyy display format is the browser's locale, not
   ours — it follows the user's OS settings and cannot be set from CSS.) */
.field-input:is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
    display: block;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

.field-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.field-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.field-input:is(select) {
    padding-right: var(--wepi-space-3);
}

.write-panel {
    margin-top: var(--wepi-space-5);
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
    display: grid;
    gap: var(--wepi-space-4);
}

.write-panel h4 {
    margin: 0;
    font-size: 1rem;
}

.write-panel-compact {
    padding-top: 0;
    border-top: 0;
    margin-top: 0;
}

.replacement-panel {
    display: grid;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-4);
    border-radius: 14px;
    border: 1px solid rgba(214, 144, 67, 0.24);
    background: rgba(255, 248, 235, 0.86);
}

.replacement-panel .muted {
    margin: 0;
}

.handoff-provider-grid {
    display: grid;
    gap: var(--wepi-space-3);
}

.handoff-table-card {
    gap: var(--wepi-space-4);
}

.handoff-guest-table {
    width: 100%;
    border-collapse: collapse;
}

.handoff-guest-table th,
.handoff-guest-table td {
    padding: 10px 12px;
    border-top: 1px solid rgba(220, 227, 240, 0.88);
    text-align: left;
    vertical-align: top;
}

.handoff-guest-table th {
    color: var(--wepi-color-ink-500);
    font-size: 0.82rem;
    font-weight: 700;
}

/* This only ever declared `display: grid` with no columns, so paired fields
   (first/last name) stacked in one column and pushed the rest below the fold. */
.form-grid {
    display: grid;
    gap: var(--wepi-space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
}

.account-profile-page {
    align-items: center;
    min-height: 100%;
}

.account-profile-card {
    width: 100%;
}

.account-profile-form {
    width: 100%;
    display: grid;
    gap: var(--wepi-space-4);
}

.auth-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.auth-alternate {
    display: grid;
    gap: var(--wepi-space-3);
    margin-top: var(--wepi-space-4);
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wepi-space-3);
    color: var(--wepi-color-slate-600);
    font-size: 0.86rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    background: var(--wepi-color-slate-200);
}

.auth-footer {
    margin: var(--wepi-space-5) 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.auth-footer a {
    color: var(--wepi-color-blue-600);
    font-weight: 600;
}

.form-error {
    margin: 0;
    color: var(--wepi-color-danger);
    font-weight: 700;
}

/* Field-level validation: the message sits under its own input and the input
   itself turns red. A single message under the whole form left users hunting
   for which field was wrong. */
.field-error {
    margin: var(--wepi-space-2) 0 0;
    color: var(--wepi-color-danger);
    font-size: 0.86rem;
    font-weight: 600;
}

/* Checkboxes were the one control left at browser default: tiny, unstyled, and
   baseline-misaligned against their labels while everything around them was
   custom. Size them to the type and align on the first line of the label. */
input[type="checkbox"],
input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--wepi-color-blue-600);
    cursor: pointer;
}

.checkbox-field,
label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-3);
    min-height: var(--wepi-size-tap-target);
    cursor: pointer;
}

.checkbox-field > span,
label:has(> input[type="checkbox"]) > span {
    cursor: pointer;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 2px;
}

.field-input.is-invalid,
.field-input[aria-invalid="true"] {
    border-color: var(--wepi-color-danger);
    box-shadow: 0 0 0 1px var(--wepi-color-danger);
}

.field-input.is-invalid:focus-visible,
.field-input[aria-invalid="true"]:focus-visible {
    outline: 2px solid var(--wepi-color-danger);
    outline-offset: 2px;
}

.settings-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-stack {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: 0;
    line-height: 0;
}

.field-stack > span {
    font-size: 0.85rem;
    line-height: 1.25;
    color: var(--wepi-color-ink-600);
}

.field-stack > input,
.field-stack > select,
.field-stack > textarea,
.field-stack > .field-input {
    font-size: 1rem;
    line-height: normal;
}

.field-help {
    color: var(--wepi-color-ink-500);
    font-size: 0.85rem;
}

.checkbox-stack {
    display: grid;
    gap: var(--wepi-space-3);
}

.checkbox-row {
    justify-content: flex-start;
}

.checkbox-row input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.toggle-field {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    margin-top: var(--wepi-space-5);
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(220, 227, 240, 0.88);
}

/* The toggle sat flush against the fields below it, so the next field's label
   read as part of the checkbox. Separate the toggle from what it controls. */
.toggle-field + .settings-grid {
    margin-top: var(--wepi-space-4);
}

@media (max-width: 720px) {
    .action-menu__content {
        position: static;
        min-width: 0;
    }

    .guest-entry-form {
        grid-template-columns: 1fr;
    }

    .public-shell__topbar {
        grid-template-columns: auto 1fr auto;
        gap: var(--wepi-space-3);
        padding: 12px var(--wepi-space-4);
    }

    .public-shell__topbar-title {
        font-size: 0.75rem;
    }

    .public-shell__brand-image--topbar {
        max-width: 112px;
    }
}

.toggle-field p {
    margin: var(--wepi-space-2) 0 0;
}

.event-settings-layout {
    align-items: start;
}

.guests-management-layout {
    align-items: start;
}

.guest-management-sidebar {
    align-content: start;
}

.guest-workspace-card,
.guest-workspace-context {
    display: grid;
    gap: var(--wepi-space-4);
}

.guest-workspace-context {
    margin-top: var(--wepi-space-4);
}

.guest-workspace-context__item {
    display: grid;
    gap: var(--wepi-space-2);
    padding: var(--wepi-space-4);
    border-radius: 14px;
    background: rgba(231, 238, 252, 0.48);
}

.guest-workspace-switcher {
    margin-top: var(--wepi-space-4);
}

.guest-workspace-switcher .outline-button,
.guest-workspace-switcher .primary-button {
    min-width: 120px;
}

.event-settings-actions {
    display: flex;
    gap: var(--wepi-space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--wepi-space-5);
}

.event-settings-sidebar {
    display: grid;
    gap: var(--wepi-space-4);
}

.event-settings-summary {
    grid-template-columns: 1fr;
}

.event-planning-grid {
    align-items: start;
}

.editor-row {
    align-content: start;
}

.compact-button {
    min-height: 36px;
    padding: 0 12px;
}

.section-empty {
    margin: 0;
}

.editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wepi-space-3);
    margin-top: var(--wepi-space-3);
    color: var(--wepi-color-ink-600);
}

.schedule-item-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.schedule-notes-field,
.location-notes-field {
    grid-column: 1 / -1;
}

.location-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.summary-value-compact {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Slot for a StatusBadge where a summary-value would otherwise sit. */
.summary-value-badge {
    margin: var(--wepi-space-2) 0 0;
}

.budget-empty-card {
    display: grid;
    gap: var(--wepi-space-2);
}

.budget-empty-card p {
    margin: 0;
}

/* Inline text action used inside empty-state rows. */
.button-link.is-inline {
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--wepi-color-blue-600);
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
}

.feedback-text {
    font-size: 0.9rem;
}

.feedback-text.is-error {
    color: var(--wepi-color-danger);
}

.feedback-text.is-success {
    color: var(--wepi-color-sage-700);
}

.toast-region {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 1200;
    display: grid;
    gap: var(--wepi-space-2);
    max-width: min(420px, calc(100vw - 32px));
}

.feedback-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--wepi-space-3);
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(211, 221, 238, 0.94);
    border-left-width: 4px;
    box-shadow: 0 18px 42px rgba(57, 81, 129, 0.18);
    font-size: 0.95rem;
}

.feedback-toast.is-success {
    border-left-color: var(--wepi-color-sage-700);
    color: var(--wepi-color-sage-700);
}

.feedback-toast.is-error {
    border-left-color: var(--wepi-color-danger);
    color: var(--wepi-color-danger);
}

.feedback-toast__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.button-link:hover,
.outline-button:hover,
.primary-button:hover,
.attention-card:hover,
.provider-card:hover,
.guest-row:hover,
.guest-chip:hover,
.filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--wepi-shadow-sm);
}

.provider-topbar-summary p {
    margin: 0.2rem 0 0;
    color: var(--wepi-color-ink-600);
}

.provider-portal-split {
    align-items: start;
}

.provider-profile-editor {
    display: grid;
    gap: var(--wepi-space-5);
    margin-bottom: var(--wepi-space-5);
}

.provider-section-stack,
.provider-collection {
    display: grid;
    gap: var(--wepi-space-4);
}

.provider-form-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.provider-form-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-stack-full {
    grid-column: 1 / -1;
}

.field-textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.field-textarea-compact {
    min-height: 5.5rem;
    resize: vertical;
}

.provider-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wepi-space-3);
}

.provider-inline-actions h4 {
    margin: 0;
}

.provider-collection-row {
    display: grid;
    gap: var(--wepi-space-3);
    padding-top: var(--wepi-space-4);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.provider-collection-row-inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.field-stack-actions {
    display: flex;
    justify-content: flex-end;
}

.provider-media-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.provider-media-tile {
    display: grid;
    gap: var(--wepi-space-3);
    margin: 0;
}

.provider-media-tile__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--wepi-radius-md);
    display: block;
}

.provider-media-tile__caption {
    display: grid;
    gap: var(--wepi-space-2);
}

.provider-media-upload {
    display: grid;
    gap: var(--wepi-space-3);
}

.danger-link {
    color: var(--wepi-color-danger);
}

.provider-resource-row,
.provider-calendar-row {
    align-items: start;
}

.provider-engagement-list {
    display: grid;
    gap: var(--wepi-space-4);
}

.provider-search-layout,
.provider-search-panel,
.provider-search-results,
.provider-marketplace-results,
.provider-search-sidebar,
.provider-marketplace-card__actions,
.provider-marketplace-card__status {
    display: grid;
    gap: var(--wepi-space-2);
}

.provider-search-layout,
.provider-search-sidebar {
    align-items: start;
}

.provider-search-grid {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.provider-search-actions {
    display: flex;
    gap: var(--wepi-space-3);
    flex-wrap: wrap;
}

/* Compact browse row: thumb | details | status + actions. */
.provider-marketplace-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--wepi-space-4);
    align-items: start;
}

.provider-marketplace-card__thumb {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--wepi-radius-md);
    background: var(--wepi-color-blue-100);
    color: var(--wepi-color-blue-700);
    font-weight: 700;
}

/* Providers with a cover photo fill the same slot as the initials placeholder, so
   a mixed result list keeps one left edge. */
img.provider-marketplace-card__thumb {
    object-fit: cover;
}

.provider-marketplace-card__body {
    display: grid;
    gap: var(--wepi-space-2);
    min-width: 0;
}

.provider-marketplace-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-2);
    color: var(--wepi-color-slate-600);
    font-size: 0.86rem;
}

.provider-marketplace-card__meta > span + span::before {
    content: "•";
    margin-right: var(--wepi-space-2);
}

.provider-marketplace-card__tagline {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.provider-marketplace-card__aside {
    display: grid;
    gap: var(--wepi-space-3);
    justify-items: end;
    text-align: right;
}

.provider-marketplace-card__status {
    justify-items: end;
}

.provider-marketplace-card__availability {
    font-size: 0.82rem;
    max-width: 22ch;
}

.provider-marketplace-card__actions {
    justify-items: end;
}

.provider-engagement-hero {
    margin-top: var(--wepi-space-4);
}

.crm-client-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(170px, 0.6fr) auto;
    align-items: center;
}

@media (max-width: 900px) {
    .crm-client-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.crm-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.crm-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-2);
    align-items: center;
    margin-top: var(--wepi-space-2);
}

.crm-tag-row .mini-pill {
    min-height: 24px;
    font-size: 0.78rem;
}

.crm-row-actions {
    display: grid;
    gap: var(--wepi-space-2);
    justify-items: end;
}

.crm-payment-list {
    margin-left: var(--wepi-space-5);
    padding-left: var(--wepi-space-4);
    border-left: 2px solid rgba(211, 221, 238, 0.94);
}

.crm-payment-list .list-row {
    padding: var(--wepi-space-3);
    background: rgba(255, 255, 255, 0.6);
}

.list-row-link {
    color: inherit;
    text-decoration: none;
}

.list-row-link:hover {
    background: rgba(15, 23, 42, 0.02);
}

.nav-item__icon,
.topbar-alert__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-item__icon {
    width: 20px;
    height: 20px;
}

.nav-item__icon svg,
.topbar-alert__glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-shell--organizer {
    grid-template-columns: minmax(264px, 312px) minmax(0, 1fr);
    background: var(--wepi-color-slate-50);
}

.app-shell--organizer .sidebar--organizer {
    gap: 20px;
    padding: 24px 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95)),
        linear-gradient(180deg, rgba(207, 221, 246, 0.3), transparent);
    border-right: 1px solid rgba(210, 219, 235, 0.95);
}

.app-shell--organizer .brand-mark__image {
    width: min(116px, 100%);
}

.app-shell--organizer .event-card--organizer {
    position: relative;
    overflow: hidden;
    padding: var(--wepi-space-4);
    border-radius: 16px;
    border: 1px solid rgba(201, 214, 238, 0.94);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 244, 255, 0.94));
    box-shadow: var(--wepi-shadow-sm);
}

.app-shell--organizer .event-card--organizer > * {
    position: relative;
    z-index: 1;
}

/* The decorative blob was clipped by the card and collided with the action
   links underneath it, so it read as a rendering artifact. Removed. */
.app-shell--organizer .event-card--organizer::after,
.app-shell--organizer .event-card--organizer::before {
    content: none;
}

.app-shell--organizer .event-card h1,
.app-shell--organizer .surface-card h3,
.app-shell--organizer .page-header h2,
.app-shell--organizer .table-heading,
.app-shell--organizer .topbar-quote {
    font-family: var(--wepi-font-ui);
}

/* The event title is context, not the loudest thing on screen. Clamp it to two
   lines so a long title cannot push the whole nav below the fold. */
.app-shell--organizer .event-card h1 {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-shell--organizer .eyebrow {
    color: #4362a8;
    letter-spacing: 0.06em;
}

.app-shell--organizer .subhead,
.app-shell--organizer .row-subtitle,
.app-shell--organizer .muted,
.app-shell--organizer .page-header p,
.app-shell--organizer .profile-chip p {
    color: #61718f;
}

.app-shell--organizer .event-meta dt {
    color: #5b6a87;
}

/* Primary navigation is a list, not a stack of cards. Flat rows keep all nav
   destinations above the fold at 1280x800; card chrome per item did not. */
.app-shell--organizer .nav {
    gap: 2px;
}

.app-shell--organizer .nav-item {
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #3f4d68;
    box-shadow: none;
    font-size: 0.94rem;
}

.app-shell--organizer .nav-item__icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    color: #7185ad;
    box-shadow: none;
}

.app-shell--organizer .nav-item:hover {
    background: rgba(238, 244, 255, 0.92);
    color: #1949b1;
}

.app-shell--organizer .nav-item.active,
.app-shell--organizer .nav-item:focus-visible {
    background: var(--wepi-color-blue-100);
    color: #1949b1;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}

.app-shell--organizer .nav-item.active .nav-item__icon,
.app-shell--organizer .nav-item:focus-visible .nav-item__icon,
.app-shell--organizer .nav-item:hover .nav-item__icon {
    background: none;
    color: #1846aa;
    box-shadow: none;
}

.app-shell--organizer .sidebar-note--organizer {
    background:
        linear-gradient(180deg, rgba(238, 244, 255, 0.96), rgba(255, 255, 255, 0.94)),
        linear-gradient(135deg, rgba(69, 120, 224, 0.1), transparent);
    border-color: rgba(205, 217, 240, 0.95);
}

.app-shell--organizer .mode-pill.is-demo {
    background: rgba(226, 237, 255, 0.94);
    border-color: rgba(87, 126, 211, 0.22);
    color: #2d58b1;
}

.app-shell--organizer .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 20px 32px 18px;
    background: rgba(246, 248, 252, 0.84);
    border-bottom: 1px solid rgba(216, 224, 240, 0.88);
    backdrop-filter: blur(18px);
}

.app-shell--organizer .search-field input {
    border-color: rgba(204, 216, 238, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(68, 92, 138, 0.08);
}

.app-shell--organizer .topbar-meta {
    gap: 14px;
}

.topbar-alert {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(206, 217, 237, 0.92);
    background: rgba(255, 255, 255, 0.94);
    color: #5571b3;
    box-shadow: 0 12px 28px rgba(71, 92, 136, 0.08);
}

.topbar-alert__glyph {
    width: 18px;
    height: 18px;
    margin: 11px auto 0;
}

.topbar-alert__badge {
    position: absolute;
    top: -6px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f97362, #f35a4d);
    color: var(--wepi-color-white);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(234, 104, 82, 0.3);
}

.app-shell--organizer .profile-chip {
    padding: 6px 10px 6px 6px;
    border-radius: 16px;
    border-color: rgba(206, 217, 237, 0.92);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(71, 92, 136, 0.08);
}

.app-shell--organizer .avatar {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(255, 241, 236, 0.98), rgba(255, 219, 208, 0.96));
    color: #9d4b46;
}

.app-shell--organizer .outline-button {
    border-color: rgba(204, 216, 238, 0.94);
    background: rgba(255, 255, 255, 0.92);
    color: #35529a;
}

.app-shell--organizer .primary-button {
    border-color: rgba(47, 89, 177, 0.22);
    background: linear-gradient(135deg, #2f6fe4 0%, #1f5bd1 100%);
    box-shadow: 0 16px 30px rgba(47, 105, 220, 0.22);
}

.app-shell--organizer .view-root {
    padding-top: 24px;
}

.app-shell--organizer .surface-card,
.app-shell--organizer .summary-strip,
.app-shell--organizer .task-list-card,
.app-shell--organizer .activity-list-card,
.app-shell--organizer .conversation-card,
.app-shell--organizer .detail-card,
.app-shell--organizer .roster-card,
.app-shell--organizer .side-panel,
.app-shell--organizer .table-card {
    border-color: rgba(211, 221, 238, 0.94);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(57, 81, 129, 0.08);
}

.app-shell--organizer .seating-v2-page {
    gap: 24px;
}

.app-shell--organizer .seating-v2-command-header {
    align-items: flex-end;
}

.app-shell--organizer .seating-v2-command-header h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #153064;
}

.app-shell--organizer .seating-v2-command-header p {
    margin-top: 10px;
    max-width: 46ch;
    font-size: 1.03rem;
}

.app-shell--organizer .seating-v2-command-bar {
    width: min(100%, 960px);
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 16px;
}

.app-shell--organizer .seating-v2-header-actions {
    justify-content: flex-end;
}

.app-shell--organizer .seating-v2-save-button {
    min-width: 188px;
}

.app-shell--organizer .seating-v2-primary-board-shell {
    padding: 24px;
    border-radius: 28px;
}

.app-shell--organizer .seating-v2-board-topline {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(220, 227, 240, 0.88);
}

.app-shell--organizer .seating-v2-mode-tabs .outline-button,
.app-shell--organizer .seating-v2-mode-tabs .primary-button {
    min-width: 112px;
    border-radius: 999px;
}

.app-shell--organizer .seating-v2-toolbar-actions .segmented-control,
.app-shell--organizer .seating-v2-mode-tabs {
    gap: 10px;
}

.app-shell--organizer .seating-v2-board-context {
    align-items: center;
}

.app-shell--organizer .seating-v2-board-context h3,
.app-shell--organizer .seating-v2-table-context-copy strong {
    font-size: 1.34rem;
    color: #18325d;
}

.app-shell--organizer .mini-pill.neutral {
    background: rgba(231, 238, 252, 0.82);
    color: #42649f;
    border-color: rgba(202, 214, 239, 0.94);
}

.app-shell--organizer .seating-v2-room-frame {
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.98)),
        linear-gradient(135deg, rgba(58, 108, 221, 0.08), transparent);
    box-shadow: inset 0 0 0 1px rgba(218, 227, 242, 0.94), 0 22px 44px rgba(77, 97, 136, 0.08);
}

.app-shell--organizer .seating-v2-room {
    min-height: 700px;
    border-radius: 28px;
    border-color: rgba(191, 204, 226, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 255, 0.98)),
        linear-gradient(rgba(117, 137, 173, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 137, 173, 0.06) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.app-shell--organizer .seating-v2-room .floor-plan-grid {
    opacity: 0.35;
}

.seating-v2-room-feature,
.seating-v2-room-plant,
.seating-v2-room-door {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.seating-v2-room-feature {
    border: 1px solid rgba(204, 214, 232, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 28px rgba(82, 102, 139, 0.08);
}

.seating-v2-room-feature__label {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #5a6885;
    text-transform: uppercase;
}

.seating-v2-room-feature--stage {
    top: 4.2%;
    left: 37%;
    width: 26%;
    padding: 14px 16px 18px;
}

.seating-v2-room-feature__stage-set,
.seating-v2-room-feature__lounge-set {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.seating-v2-room-cube,
.seating-v2-room-podium,
.seating-v2-room-feature__lounge-set span {
    display: inline-flex;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(213, 219, 229, 0.98), rgba(186, 196, 214, 0.98));
    box-shadow: inset 0 -1px 0 rgba(134, 145, 164, 0.24);
}

.seating-v2-room-cube {
    width: 28px;
    height: 22px;
}

.seating-v2-room-podium {
    width: 34px;
    height: 34px;
}

.seating-v2-room-feature--lounge {
    top: 31%;
    left: 42%;
    width: 16%;
    padding: 14px 14px 16px;
}

.seating-v2-room-feature__lounge-set span {
    width: 24px;
    height: 24px;
}

.seating-v2-room-feature--bar {
    top: 39%;
    right: 3.2%;
    width: 6.5%;
    height: 28%;
    display: grid;
    place-items: center;
}

.seating-v2-room-feature--bar .seating-v2-room-feature__label,
.seating-v2-room-feature--checkin .seating-v2-room-feature__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.seating-v2-room-feature--checkin {
    bottom: 4.4%;
    left: 31%;
    width: 9%;
    height: 10%;
    display: grid;
    place-items: center;
}

.seating-v2-room-plant {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(111, 150, 93, 0.2), rgba(111, 150, 93, 0.02) 68%),
        conic-gradient(from 0deg, #88b071 0deg 45deg, #6f955d 45deg 90deg, #9bc17b 90deg 135deg, #6f955d 135deg 180deg, #88b071 180deg 225deg, #6f955d 225deg 270deg, #9bc17b 270deg 315deg, #6f955d 315deg 360deg);
    box-shadow: 0 8px 18px rgba(86, 116, 81, 0.16);
}

.seating-v2-room-plant--one { top: 7%; left: 31%; }
.seating-v2-room-plant--two { top: 10%; right: 26%; }
.seating-v2-room-plant--three { top: 45%; left: 6%; }
.seating-v2-room-plant--four { top: 70%; right: 13%; }
.seating-v2-room-plant--five { bottom: 6%; left: 38%; }
.seating-v2-room-plant--six { bottom: 5%; right: 9%; }

.seating-v2-room-door {
    border-top: 2px solid rgba(163, 176, 199, 0.76);
    border-left: 2px solid rgba(163, 176, 199, 0.76);
    border-radius: 999px 0 0 0;
}

.seating-v2-room-door--main {
    bottom: -2px;
    left: 47%;
    width: 44px;
    height: 44px;
    transform: rotate(-135deg);
}

.seating-v2-room-door--side {
    left: -2px;
    bottom: 17%;
    width: 34px;
    height: 34px;
    transform: rotate(45deg);
}

.app-shell--organizer .seating-board-table {
    border: 1px solid rgba(186, 198, 220, 0.88);
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(237, 241, 248, 0.98));
    box-shadow: 0 18px 34px rgba(82, 97, 129, 0.12);
}

.app-shell--organizer .seating-board-table.tone-confirmed,
.app-shell--organizer .seating-board-table.tone-neutral {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(237, 241, 248, 0.98));
}

.app-shell--organizer .seating-board-table.tone-pending {
    background: radial-gradient(circle at top, rgba(255, 251, 246, 0.98), rgba(250, 237, 215, 0.96));
}

.app-shell--organizer .seating-board-table.tone-risk {
    background: radial-gradient(circle at top, rgba(255, 250, 250, 0.98), rgba(253, 234, 237, 0.96));
}

.app-shell--organizer .seating-board-table-label {
    gap: 3px;
    padding: 18px 10px;
    color: #23344f;
}

.app-shell--organizer .seating-board-table-label strong {
    font-size: 0.96rem;
}

.app-shell--organizer .seating-v2-room.is-suggested-layout .seating-board-seat {
    border-color: rgba(126, 170, 107, 0.45);
    color: #4d6b41;
}

.app-shell--organizer .seating-v2-room.is-saved-chart .seating-board-seat {
    border-color: rgba(88, 131, 221, 0.36);
    color: #365ca8;
}

.app-shell--organizer .seating-board-seat {
    min-width: 34px;
    height: 34px;
    margin-left: -17px;
    margin-top: -17px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(76, 95, 132, 0.12);
}

.app-shell--organizer .seating-board-seat.is-open {
    border-style: dashed;
    border-color: rgba(157, 170, 193, 0.68);
    color: #7c8aa6;
    background: rgba(247, 250, 255, 0.82);
}

.app-shell--organizer .seating-board-seat.is-selected {
    border-color: rgba(64, 125, 231, 0.6);
    color: #1d55bc;
    box-shadow: 0 0 0 4px rgba(68, 130, 236, 0.14), 0 14px 28px rgba(77, 101, 148, 0.15);
}

.app-shell--organizer .seating-board-seat.is-targeted {
    border-color: rgba(242, 110, 90, 0.6);
    color: #d64d3e;
    box-shadow: 0 0 0 4px rgba(242, 110, 90, 0.12), 0 14px 28px rgba(77, 101, 148, 0.15);
}

.app-shell--organizer .seating-v2-support-grid {
    gap: 18px;
}

.app-shell--organizer .seating-v2-review-card {
    border-radius: 24px;
    border: 1px solid rgba(217, 226, 241, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
    box-shadow: 0 12px 28px rgba(57, 81, 129, 0.06);
}

.app-shell--organizer .seating-v2-review-card__body strong {
    color: #17305f;
}

.app-shell--organizer .seating-v2-summary-card,
.app-shell--organizer .seating-v2-legend-card {
    padding: 22px;
    border-radius: 24px;
}

.app-shell--organizer .seating-v2-metric-grid {
    gap: 12px;
}

.app-shell--organizer .seating-v2-metric-item {
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    border-color: rgba(217, 226, 241, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.94));
}

.seating-v2-metric-kicker {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    border-radius: 999px;
    background: rgba(232, 238, 249, 0.84);
    color: #5672af;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-shell--organizer .seating-v2-metric-item .kicker {
    color: #6d7c99;
}

.app-shell--organizer .seating-v2-metric-item strong {
    font-size: 2rem;
    color: #17305f;
}

.app-shell--organizer .seating-v2-legend-list {
    gap: 14px;
}

.app-shell--organizer .seating-v2-legend-item {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(245, 248, 255, 0.92);
    border: 1px solid rgba(219, 227, 241, 0.92);
}

.app-shell--organizer .seating-v2-tools-toggle-card,
.app-shell--organizer .seating-v2-panel-switcher {
    border-radius: 22px;
}

.app-shell--organizer .seating-v2-detail-rail {
    top: 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.97));
}

.app-shell--organizer .seating-v2-detail-section {
    gap: 18px;
}

.app-shell--organizer .guest-panel-heading {
    align-items: flex-start;
}

.app-shell--organizer .guest-avatar-large {
    width: 64px;
    height: 64px;
}

.app-shell--organizer .seating-v2-guest-tags {
    gap: 10px;
}

.app-shell--organizer .seating-v2-detail-rows {
    border-color: rgba(216, 224, 239, 0.94);
    background: rgba(219, 227, 241, 0.92);
}

.app-shell--organizer .seating-v2-detail-row {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.96);
}

.app-shell--organizer .seating-v2-detail-row span {
    color: #6b7b97;
}

.app-shell--organizer .seating-v2-detail-row strong {
    color: #213654;
}

.app-shell--organizer .write-panel.write-panel-compact {
    border: 1px solid rgba(216, 224, 239, 0.94);
    border-radius: 22px;
    background: rgba(245, 248, 255, 0.94);
}

.app-shell--organizer .write-panel.write-panel-compact .field-input {
    border-color: rgba(208, 218, 238, 0.94);
    background: rgba(255, 255, 255, 0.98);
}

.app-shell--organizer .dashboard-page .panel-link {
    color: #2f5fc0;
}

.app-shell--organizer .dashboard-page .panel-link:hover,
.app-shell--organizer .dashboard-page .panel-link:focus-visible {
    color: #1c4da9;
}

.app-shell--organizer .dashboard-page .timeline-item,
.app-shell--organizer .dashboard-page .list-row,
.app-shell--organizer .dashboard-page .activity-row,
.app-shell--organizer .dashboard-page .message-row,
.app-shell--organizer .dashboard-page .provider-card,
.app-shell--organizer .dashboard-page .task-row {
    border-color: rgba(217, 226, 241, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.94));
    box-shadow: 0 10px 24px rgba(57, 81, 129, 0.06);
}

.app-shell--organizer .dashboard-page .timeline-item {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
}

.app-shell--organizer .dashboard-page .timeline-item__content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.app-shell--organizer .dashboard-page .timeline-item__content .row-title,
.app-shell--organizer .dashboard-page .timeline-item__content .row-subtitle {
    overflow-wrap: break-word;
}

.app-shell--organizer .dashboard-page .timeline-item .status-badge {
    justify-self: end;
    align-self: start;
    max-width: 100%;
}

.app-shell--organizer .dashboard-page .date-card {
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.98), rgba(222, 234, 255, 0.92));
    color: #375ca7;
    box-shadow: inset 0 0 0 1px rgba(176, 198, 242, 0.8);
}

.app-shell--organizer .dashboard-page .status-badge {
    border-color: rgba(213, 223, 241, 0.94);
    background: rgba(245, 248, 255, 0.94);
    color: #496284;
}

.app-shell--organizer .dashboard-page .status-badge.confirmed {
    background: rgba(227, 238, 255, 0.96);
    border-color: rgba(154, 183, 236, 0.82);
    color: #2c5ab0;
}

.app-shell--organizer .dashboard-page .status-badge.pending {
    background: rgba(255, 245, 225, 0.95);
    border-color: rgba(235, 191, 112, 0.72);
    color: #8e611f;
}

.app-shell--organizer .dashboard-page .status-badge.risk {
    background: rgba(252, 233, 237, 0.96);
    border-color: rgba(233, 162, 173, 0.78);
    color: #a03d49;
}

.app-shell--organizer .dashboard-page .status-badge.neutral {
    background: rgba(235, 241, 251, 0.96);
    border-color: rgba(184, 199, 229, 0.78);
    color: #506688;
}

.app-shell--organizer .dashboard-page .donut {
    background:
        radial-gradient(circle at center, var(--wepi-color-white) 37%, transparent 38%),
        conic-gradient(
            #4f7ee0 0 var(--donut-confirmed-end, 0%),
            rgba(142, 174, 236, 0.58) var(--donut-confirmed-end, 0%) var(--donut-pending-end, 0%),
            rgba(223, 231, 246, 0.96) var(--donut-pending-end, 0%) 100%);
    box-shadow: inset 0 0 0 1px rgba(199, 212, 239, 0.84);
}

.app-shell--organizer .dashboard-page .donut span {
    color: #163565;
}

.app-shell--organizer .dashboard-page .donut span small {
    color: #60749c;
}

.seating-v2-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.seating-v2-detail-block {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.seating-print-sheet {
    display: none;
}

.seating-print-header,
.seating-print-map,
.seating-print-roster,
.seating-print-notes {
    display: grid;
    gap: 12px;
}

.seating-print-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--wepi-color-ink-600);
    font-size: 0.88rem;
}

.seating-print-meta span {
    padding: 4px 8px;
    border: 1px solid rgba(59, 64, 61, 0.16);
    border-radius: 999px;
}

.seating-print-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seating-print-table-roster {
    display: grid;
    gap: 8px;
    break-inside: avoid;
    padding: 12px;
    border: 1px solid rgba(59, 64, 61, 0.16);
    border-radius: 8px;
}

.seating-print-table-roster h3,
.seating-print-table-roster p {
    margin: 0;
}

.seating-print-table-roster ol {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 20px;
}

.seating-print-table-roster li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
}

.seating-print-table-roster span {
    color: var(--wepi-color-ink-500);
}

@media (min-width: 960px) {
    .provider-profile-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .content-grid,
    .content-grid.three-up,
    .chart-layout,
    .split-layout,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .provider-profile-hero {
        grid-template-columns: 1fr;
    }

    .provider-card,
    .guest-row {
        grid-template-columns: 1fr;
    }

    /* Stacked topbar: the search must not inherit the desktop width cap, and
       the meta row stays horizontal so it costs one line, not three. */
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wepi-space-3);
    }

    .search-field {
        max-width: none;
        min-width: 0;
    }

    .topbar-meta {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .organizer-event-card__details {
        grid-template-columns: 1fr;
    }

    /* Collapsed, the sidebar stacked ~677px of chrome above the content, so a
       tablet user scrolled past the whole nav before reaching the page. It
       becomes a compact header strip with a horizontally scrollable nav. */
    .sidebar {
        position: static;
        min-height: auto;
        min-width: 0;
        gap: var(--wepi-space-3);
        padding: var(--wepi-space-3) var(--wepi-space-4);
        border-right: 0;
        border-bottom: 1px solid rgba(210, 219, 235, 0.95);
    }

    /* Without this the nav's max-content width stretches the flex column and
       the whole page scrolls sideways instead of just the nav. */
    .sidebar > * {
        min-width: 0;
        max-width: 100%;
    }

    .app-shell--organizer .brand-mark__image {
        width: min(92px, 100%);
    }

    .app-shell--organizer .event-card--organizer {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--wepi-space-2) var(--wepi-space-3);
        padding: var(--wepi-space-3);
    }

    .app-shell--organizer .event-card--organizer h1 {
        font-size: 0.95rem;
    }

    /* Date/venue and the event actions are available on Event setup; the strip
       only needs to say which event you are in. */
    .app-shell--organizer .event-card--organizer .event-meta,
    .app-shell--organizer .event-card--organizer .event-card__actions {
        display: none;
    }

    .app-shell--organizer .nav {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--wepi-space-2);
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }

    .app-shell--organizer .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .sidebar-note {
        display: none;
    }

    .view-root,
    .topbar {
        padding-left: var(--wepi-space-5);
        padding-right: var(--wepi-space-5);
    }

    .seating-v2-command-bar,
    .seating-v2-shell,
    .seating-v2-support-grid {
        grid-template-columns: 1fr;
    }

    .seating-v2-detail-rail {
        position: static;
    }

    .seating-v2-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell--organizer .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell--organizer .dashboard-page .timeline-item {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .app-shell--organizer .dashboard-page .timeline-item .status-badge {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .page-header,
    .panel-header {
        flex-direction: column;
    }

    .invited-people-toolbar {
        grid-template-columns: 1fr;
    }

    .invited-person-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .invited-person-row__meta {
        flex-wrap: wrap;
        white-space: normal;
    }

    .invited-person-row__actions,
    .invited-person-row__actions .outline-button {
        width: 100%;
    }

    /* Stacking the meta items gave the topbar three extra rows and pushed the
       page content below the fold. Keep them on one line. */
    .topbar-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .topbar-quote {
        display: none;
    }

    .inline-search-compact {
        width: 100%;
    }

    .seating-v2-board-topline,
    .seating-v2-board-context,
    .seating-v2-table-context {
        flex-direction: column;
        align-items: stretch;
    }

    .seating-v2-toolbar-actions,
    .seating-v2-mode-tabs {
        justify-content: stretch;
    }

    .seating-v2-toolbar-actions .segmented-control,
    .seating-v2-mode-tabs,
    .seating-v2-panel-switcher .segmented-control {
        width: 100%;
    }

    .seating-v2-mode-tabs .outline-button,
    .seating-v2-mode-tabs .primary-button,
    .seating-v2-toolbar-actions .outline-button,
    .seating-v2-toolbar-actions .primary-button,
    .seating-v2-panel-switcher .outline-button,
    .seating-v2-panel-switcher .primary-button {
        flex: 1 1 0;
    }

    .seating-v2-room {
        min-height: 520px;
    }

    .seating-layout-editor-room {
        min-height: 420px;
    }

    .seating-v2-metric-grid,
    .seating-v2-legend-list {
        grid-template-columns: 1fr;
    }

    .seating-v2-detail-row {
        flex-direction: column;
    }

    .seating-v2-detail-row strong {
        max-width: none;
        text-align: left;
    }

    /* The nav is a horizontal scroller below 900px; do not re-stack it here. */

    .seating-v2-detail-actions {
        grid-template-columns: 1fr;
    }

    .provider-form-grid {
        grid-template-columns: 1fr;
    }

    .provider-inline-actions,
    .provider-collection-row-inline {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .provider-marketplace-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .provider-marketplace-card__aside {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }

    .provider-marketplace-card__status,
    .provider-marketplace-card__actions {
        justify-items: start;
    }
}

.callout {
    border: 1px solid rgba(204, 216, 238, 0.94);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.92rem;
    font-weight: 700;
}

.callout-success {
    background: #ecfdf3;
    border-color: #b7ebc9;
    color: #225b37;
}

.callout-danger {
    background: #fff1f1;
    border-color: #f2b8b8;
    color: #8a2f2f;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid rgba(220, 227, 240, 0.88);
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: #6076a5;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.data-table td > p {
    margin: 4px 0 0;
}

.compact-list {
    gap: 8px;
}

.compact-list .list-row {
    gap: 12px;
}

@media print {
    @page {
        margin: 14mm;
    }

    body {
        background: #fff;
        color: #1f2421;
    }

    .sidebar,
    .topbar,
    .seating-v2-page > .page-header,
    .seating-v2-shell {
        display: none !important;
    }

    .app-shell,
    .main-column,
    .view-root {
        display: block !important;
        min-height: 0;
        padding: 0 !important;
    }

    .seating-v2-page {
        display: block;
        padding: 0;
        gap: 0;
    }

    .seating-print-sheet {
        display: grid;
        gap: 20px;
    }

    .seating-print-header h1,
    .seating-print-map h2,
    .seating-print-roster h2,
    .seating-print-notes h2 {
        margin: 0;
        color: #1f2421;
    }

    .seating-print-room-frame,
    .seating-print-table-roster {
        box-shadow: none;
    }

    .seating-print-room {
        min-height: 420px;
        break-inside: avoid;
    }

    .seating-print-table {
        box-shadow: none;
    }

    .seating-print-roster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Provider calendar (reference implementation of design/UX-PATTERNS.md) */

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--wepi-space-3);
}

.calendar-toolbar .field-stack {
    flex: 0 1 200px;
    min-width: 150px;
}

.calendar-toolbar .filter-chip,
.calendar-toolbar .button-link {
    margin-bottom: 4px;
}

.calendar-summary article {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(211, 221, 238, 0.94);
    border-radius: 12px;
    padding: var(--wepi-space-3) var(--wepi-space-4);
}

.calendar-summary .kicker {
    margin: 0;
}

.calendar-summary .summary-value {
    margin: 2px 0 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.calendar-month-card {
    padding: var(--wepi-space-4);
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.month-grid-head {
    margin-bottom: 4px;
}

.month-grid-dayname {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b6a87;
}

.month-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 96px;
    padding: 6px;
    border: 1px solid rgba(211, 221, 238, 0.7);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
}

.month-cell.is-outside {
    background: transparent;
    border-color: rgba(211, 221, 238, 0.35);
}

.month-cell.is-today {
    border-color: rgba(101, 141, 228, 0.6);
    box-shadow: inset 0 0 0 1px rgba(101, 141, 228, 0.5);
}

.month-cell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
}

.month-cell-daynum {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wepi-color-ink-600);
}

.month-cell.is-outside .month-cell-daynum {
    color: #b9c2d4;
}

.month-cell.is-today .month-cell-daynum {
    color: #1949b1;
}

.month-cell-add {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(204, 216, 238, 0.94);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: #4362a8;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease-out, background-color 120ms ease-out;
}

.month-cell:hover .month-cell-add,
.month-cell-add:focus-visible {
    opacity: 1;
}

.month-cell-add:hover {
    background: rgba(232, 240, 255, 0.96);
}

.calendar-chip {
    display: block;
    overflow: hidden;
    padding: 2px 7px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-chip:hover {
    filter: brightness(0.96);
}

.calendar-chip.confirmed {
    background: rgba(237, 243, 234, 0.95);
    color: var(--wepi-color-sage-700);
}

.calendar-chip.pending {
    background: rgba(214, 144, 67, 0.16);
    color: #8f5d21;
}

.calendar-chip.risk {
    background: rgba(201, 80, 90, 0.16);
    color: #8a313b;
}

.calendar-chip.neutral {
    background: rgba(111, 127, 149, 0.14);
    color: #44566e;
}

.agenda-day-header {
    margin-top: var(--wepi-space-3);
    padding: 4px 2px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b6a87;
    border-bottom: 1px solid rgba(211, 221, 238, 0.7);
}

.agenda-day-header:first-child {
    margin-top: 0;
}

.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(31, 36, 33, 0.34);
    cursor: pointer;
    animation: drawer-scrim-in 180ms ease-out;
}

.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1095;
    display: flex;
    flex-direction: column;
    width: min(28rem, 100%);
    max-width: 100%;
    background: rgba(255, 253, 249, 0.98);
    border-left: 1px solid rgba(211, 221, 238, 0.94);
    box-shadow: -10px 0 36px rgba(68, 92, 138, 0.14);
    animation: drawer-panel-in 220ms cubic-bezier(0.05, 0.89, 0.25, 1.02);
}

.drawer-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-4);
    border-bottom: 1px solid rgba(211, 221, 238, 0.7);
}

.drawer-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.drawer-panel-subtitle {
    margin: var(--wepi-space-1) 0 0;
    font-size: 0.85rem;
}

.drawer-panel-tabs {
    padding: var(--wepi-space-3) var(--wepi-space-4) 0;
}

.drawer-panel-body {
    flex: 1;
    overflow-y: auto;
    display: grid;
    gap: var(--wepi-space-2);
    padding: var(--wepi-space-4);
    align-content: start;
}

.drawer-panel-footer {
    padding: var(--wepi-space-3) var(--wepi-space-4);
    border-top: 1px solid rgba(211, 221, 238, 0.7);
    background: rgba(255, 255, 255, 0.96);
}

.calendar-create-drawer .field-stack {
    gap: 4px;
}

.calendar-create-drawer .field-stack > span {
    font-size: 0.8rem;
}

.calendar-create-drawer .field-input,
.calendar-create-drawer input.field-input,
.calendar-create-drawer select.field-input {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    box-shadow: none;
}

.calendar-create-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wepi-space-3);
}

body:has(.drawer-scrim) {
    overflow: hidden;
}

@keyframes drawer-scrim-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes drawer-panel-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.calendar-create-option-row {
    margin: 0;
    padding: var(--wepi-space-2) var(--wepi-space-3);
    border-radius: 10px;
    background: rgba(248, 250, 253, 0.9);
}

.calendar-resource-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wepi-space-2);
    margin: 0;
}

.calendar-resource-chip {
    gap: 8px;
    cursor: pointer;
}

.calendar-resource-chip input {
    margin: 0;
}

@media (max-width: 900px) {
    .month-cell {
        min-height: 64px;
    }

    .calendar-chip {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   Provider portal overview (pov-*) — reference dashboard language
   ========================================================================== */

.pov {
    display: grid;
    gap: var(--wepi-space-6);
}

.pov-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wepi-space-4);
}

.pov-hero__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wepi-color-text-muted);
}

.pov-hero__title {
    margin: 4px 0 0;
    font-family: var(--wepi-font-display);
    font-size: clamp(1.75rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--wepi-color-slate-900);
}

.pov-hero__subtitle {
    margin: 8px 0 0;
    max-width: 48ch;
    color: var(--wepi-color-slate-600);
    font-size: 1rem;
}

.pov-date-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-pill);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-sm);
}

.pov-date-toggle__step,
.pov-date-toggle__current {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wepi-radius-pill);
    white-space: nowrap;
}

.pov-date-toggle__step {
    padding: 0 12px;
    color: var(--wepi-color-blue-600);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.pov-date-toggle__step:hover,
.pov-date-toggle__step:focus-visible {
    background: var(--wepi-color-blue-100);
    outline: none;
}

.pov-date-toggle__current {
    padding: 0 16px;
    background: var(--wepi-color-slate-50);
    color: var(--wepi-color-slate-900);
    font-weight: 700;
}

.pov-mode-pill {
    flex: none;
    padding: 6px 12px;
    border-radius: var(--wepi-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pov-mode-pill.is-real {
    background: var(--wepi-color-blue-100);
    color: var(--wepi-color-blue-700);
}

.pov-mode-pill.is-read {
    background: var(--wepi-color-slate-100);
    color: var(--wepi-color-slate-600);
}

/* KPI strip */
.pov-kpis {
    display: grid;
    gap: var(--wepi-space-4);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pov-kpi {
    display: flex;
    align-items: flex-start;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-5);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-lg);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.pov-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--wepi-shadow-md);
    border-color: var(--wepi-color-slate-200);
}

.pov-kpi:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 2px;
}

.pov-kpi__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wepi-radius-md);
}

.pov-kpi__icon svg {
    width: 20px;
    height: 20px;
}

.pov-kpi__icon--blue {
    background: var(--wepi-color-blue-resources-100);
    color: var(--wepi-color-blue-600);
}

.pov-kpi__icon--purple {
    background: var(--wepi-color-purple-100);
    color: var(--wepi-color-purple-600);
}

.pov-kpi__icon--green {
    background: var(--wepi-color-green-100);
    color: var(--wepi-color-green-600);
}

.pov-kpi__icon--orange {
    background: var(--wepi-color-orange-100);
    color: var(--wepi-color-orange-600);
}

.pov-kpi__icon--amber {
    background: var(--wepi-color-amber-100);
    color: var(--wepi-color-amber-600);
}

.pov-kpi__icon--red {
    background: var(--wepi-color-red-100);
    color: var(--wepi-color-red-600);
}

.pov-kpi__icon--neutral {
    background: var(--wepi-color-slate-100);
    color: var(--wepi-color-slate-400);
}

.pov-kpi__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pov-kpi__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wepi-color-slate-600);
}

.pov-kpi__value {
    font-family: var(--wepi-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wepi-color-slate-900);
}

.pov-kpi__meta {
    font-size: 0.8rem;
    color: var(--wepi-color-text-muted);
}

/* Content grid */
.pov-grid {
    display: grid;
    gap: var(--wepi-space-5);
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
}

.pov-grid__main,
.pov-grid__rail {
    display: grid;
    gap: var(--wepi-space-5);
    min-width: 0;
}

.pov-card {
    padding: var(--wepi-space-6);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-lg);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-sm);
}

.pov-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wepi-space-3);
    margin-bottom: var(--wepi-space-4);
}

.pov-card__title {
    margin: 0;
    font-family: var(--wepi-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wepi-color-slate-900);
}

.pov-card__subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--wepi-color-slate-600);
}

/* Definition list */
.pov-detail {
    margin: 0;
    display: grid;
    gap: var(--wepi-space-3);
}

.pov-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-3) 0;
    border-top: 1px solid var(--wepi-color-slate-100);
}

.pov-detail__row:first-child {
    border-top: 0;
    padding-top: 0;
}

.pov-detail__row dt {
    font-size: 0.85rem;
    color: var(--wepi-color-slate-600);
}

.pov-detail__row dd {
    margin: 0;
    font-weight: 600;
    color: var(--wepi-color-slate-900);
    text-align: right;
}

/* Lists / rows */
.pov-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.pov-row {
    display: flex;
    align-items: center;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-3);
    border-radius: var(--wepi-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

a.pov-row:hover {
    background: var(--wepi-color-slate-50);
}

a.pov-row:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 2px;
}

.pov-row--static {
    cursor: default;
}

.pov-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}

.pov-row__title {
    font-weight: 600;
    color: var(--wepi-color-slate-900);
}

.pov-row__subtitle {
    font-size: 0.83rem;
    color: var(--wepi-color-slate-600);
}

.pov-row__meta {
    flex: none;
    font-size: 0.8rem;
    color: var(--wepi-color-text-muted);
}

/* Messages */
.pov-message {
    display: flex;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-3) 0;
    border-top: 1px solid var(--wepi-color-slate-100);
}

.pov-message:first-child {
    border-top: 0;
    padding-top: 0;
}

.pov-message__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wepi-radius-pill);
    background: var(--wepi-color-blue-100);
    color: var(--wepi-color-blue-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.pov-message__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pov-message__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wepi-space-3);
}

.pov-message__from {
    font-weight: 600;
    color: var(--wepi-color-slate-900);
}

.pov-message__time {
    flex: none;
    font-size: 0.75rem;
    color: var(--wepi-color-text-muted);
}

.pov-message__context {
    font-size: 0.78rem;
    color: var(--wepi-color-blue-600);
    font-weight: 600;
}

.pov-message__text {
    font-size: 0.85rem;
    color: var(--wepi-color-slate-600);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Empty states */
.pov-empty {
    display: grid;
    gap: 6px;
    padding: var(--wepi-space-5);
    border: 1px dashed var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-md);
    background: var(--wepi-color-slate-50);
    text-align: left;
}

.pov-empty__title {
    margin: 0;
    font-weight: 600;
    color: var(--wepi-color-slate-900);
}

.pov-empty__action {
    justify-self: start;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wepi-color-blue-600);
    text-decoration: none;
}

.pov-empty--centered {
    min-height: 240px;
    place-items: center;
    align-content: center;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-8);
    text-align: center;
}

.pov-empty__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: var(--wepi-radius-lg);
    background: var(--wepi-color-slate-100);
    color: var(--wepi-color-slate-500);
}

.pov-empty__icon svg {
    width: 28px;
    height: 28px;
}

.pov-empty__primary {
    justify-self: center;
    margin-top: var(--wepi-space-2);
}

.pov-message--link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--wepi-radius-md);
    padding-inline: var(--wepi-space-2);
}

.pov-message--link:hover,
.pov-message--link:focus-visible {
    background: var(--wepi-color-slate-50);
    outline: none;
}

/* Provider portal messages and settings */
.provider-messages-page,
.provider-settings-page {
    display: grid;
    gap: var(--wepi-space-5);
}

.provider-inbox {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.6fr);
    gap: var(--wepi-space-5);
    align-items: stretch;
    min-height: 620px;
}

.provider-inbox__list,
.provider-inbox__thread {
    min-width: 0;
    padding: var(--wepi-space-5);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-lg);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-sm);
}

.provider-inbox__toolbar {
    display: grid;
    gap: var(--wepi-space-3);
    margin-bottom: var(--wepi-space-4);
}

.provider-inbox__tabs {
    display: flex;
    gap: var(--wepi-space-2);
    overflow-x: auto;
    padding-bottom: 2px;
}

.provider-inbox__tabs .tab-chip {
    flex: none;
}

.provider-conversation-list {
    list-style: none;
    display: grid;
    gap: var(--wepi-space-2);
    margin: 0;
    padding: 0;
}

.provider-conversation-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--wepi-space-3);
    padding: var(--wepi-space-3);
    border: 1px solid transparent;
    border-radius: var(--wepi-radius-md);
    background: transparent;
    color: inherit;
    text-align: left;
}

.provider-conversation-row:hover,
.provider-conversation-row:focus-visible,
.provider-conversation-row.is-selected {
    border-color: var(--wepi-color-slate-200);
    background: var(--wepi-color-slate-50);
    outline: none;
}

.provider-conversation-row__body {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.provider-conversation-row__top,
.provider-conversation-row__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wepi-space-2);
}

.provider-conversation-row__top span,
.provider-conversation-row__meta span {
    flex: none;
    font-size: 0.75rem;
    color: var(--wepi-color-text-muted);
}

.provider-conversation-row__preview {
    color: var(--wepi-color-slate-600);
    font-size: 0.85rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.provider-conversation-row__dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: var(--wepi-radius-pill);
    background: var(--wepi-color-red-600);
}

.provider-thread__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wepi-space-4);
    margin-bottom: var(--wepi-space-4);
}

.provider-thread__header h3 {
    margin: 0;
    font-family: var(--wepi-font-display);
    font-size: 1.35rem;
}

.provider-thread__summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--wepi-space-4);
}

.provider-thread__messages {
    display: grid;
    gap: var(--wepi-space-3);
    align-content: start;
    min-height: 260px;
    margin-bottom: var(--wepi-space-4);
}

.provider-thread-message {
    display: flex;
    justify-content: flex-start;
}

.provider-thread-message.is-provider {
    justify-content: flex-end;
}

.provider-thread-message__bubble {
    max-width: min(72ch, 82%);
    display: grid;
    gap: var(--wepi-space-2);
    padding: var(--wepi-space-3) var(--wepi-space-4);
    border-radius: 18px;
    background: var(--wepi-color-slate-100);
    color: var(--wepi-color-slate-900);
}

.provider-thread-message.is-provider .provider-thread-message__bubble {
    background: var(--wepi-color-blue-600);
    color: var(--wepi-color-white);
}

.provider-thread-message__bubble time {
    font-size: 0.75rem;
    opacity: 0.78;
}

.provider-thread__composer {
    gap: var(--wepi-space-3);
}

.provider-settings-grid {
    display: grid;
    gap: var(--wepi-space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.provider-settings-grid > .surface-card:last-child {
    grid-column: 1 / -1;
}

.provider-settings-links {
    display: grid;
    gap: var(--wepi-space-2);
}

@media (max-width: 1100px) {
    .provider-inbox,
    .provider-settings-grid {
        grid-template-columns: 1fr;
    }

    .provider-thread__summary {
        grid-template-columns: 1fr;
    }
}

.pov-empty__action:hover {
    text-decoration: underline;
}

@media (max-width: 980px) {
    .provider-shell-actions {
        position: static;
        padding: var(--wepi-space-4) var(--wepi-space-5) 0;
    }

    .provider-app-shell .view-root {
        padding-top: var(--wepi-space-5);
    }

    .pov-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .pov-date-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .pov-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Seating command bar: title, search, view switch, then actions. */
.seating-v2-view-switch {
    flex: 0 0 auto;
}

.nav--hidden {
    display: none;
}

/* Optional explanation, revealed on demand. Explanations that are always on
   screen become noise and read as condescension; behind a hint they are there
   for the one person who needs them. */
.hint {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.hint__toggle {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--wepi-color-text-muted);
    cursor: pointer;
    list-style: none;
}

.hint__toggle::-webkit-details-marker {
    display: none;
}

.hint__toggle svg {
    width: 14px;
    height: 14px;
}

.hint__toggle:hover,
.hint[open] > .hint__toggle {
    color: var(--wepi-color-blue-600);
}

.hint__toggle:focus-visible {
    outline: 2px solid var(--wepi-color-focus);
    outline-offset: 1px;
}

.hint__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 230px;
    padding: var(--wepi-space-3);
    border: 1px solid var(--wepi-color-slate-200);
    border-radius: var(--wepi-radius-md);
    background: var(--wepi-color-white);
    box-shadow: var(--wepi-shadow-lg);
    color: var(--wepi-color-slate-900);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

/* Near the right edge the panel would overflow; anchor it to the right there. */
.metrics-grid > *:last-child .hint__panel,
.summary-strip > *:last-child .hint__panel {
    left: auto;
    right: 0;
    transform: none;
}