.ui-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    stroke: currentColor;
}

.ui-icon--sm {
    width: 0.875rem;
    height: 0.875rem;
}

.ui-icon--lg {
    width: 1.375rem;
    height: 1.375rem;
}

.ui-page-header {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
    margin: var(--space-1) 0 0;
    padding: 0 var(--space-2);
}

.ui-page-header__main {
    display: block;
    min-width: 0;
    text-align: left;
}

.ui-page-header__eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Same scale as the dashboard-style "Title. tagline" headers, so every page reads as one product. */
.ui-page-title {
    color: var(--color-text);
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.ui-page-description {
    max-width: 42rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    text-wrap: balance;
}

.ui-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ui-record-meta {
    display: grid;
    min-width: 39.9375rem;
    padding: 0 var(--space-2) var(--space-1) 0;
    align-items: end;
    grid-template-columns: 5.625rem 11.5625rem 5.625rem 11.875rem;
    gap: var(--space-7);
}

.ui-record-meta__item,
.ui-record-meta__owner-copy {
    min-width: 0;
}

.ui-record-meta__label {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    line-height: 1.2;
}

.ui-record-meta__value {
    display: block;
    margin-top: var(--space-1);
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-record-meta__owner {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.ui-breadcrumbs {
    margin-bottom: var(--space-3);
}

.ui-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    list-style: none;
}

.ui-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-breadcrumbs__item:not(:last-child)::after {
    color: var(--color-text-faint);
    content: "/";
}

.ui-breadcrumbs__link:hover {
    color: var(--color-primary);
}

.ui-section {
    min-width: 0;
    margin-top: var(--space-4);
    padding: 0 var(--space-2);
}

.ui-section:first-child {
    margin-top: 0;
}

.ui-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ui-section__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ui-section__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

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

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

.ui-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ui-grid--sidebar {
    grid-template-columns: minmax(19rem, 27.5rem) minmax(0, 1fr);
}

.ui-grid--insights {
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.95fr);
    gap: var(--space-3);
}

.ui-card,
.ui-glass-card,
.ui-metric-card {
    min-width: 0;
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    background-clip: padding-box;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.ui-card--subtle {
    background: linear-gradient(145deg, var(--color-layer-strong), var(--color-layer-soft));
}

.ui-card--interactive {
    transition: transform var(--transition-base) var(--ease-standard), box-shadow var(--transition-base) var(--ease-standard);
}

.ui-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) 0;
}

.ui-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.ui-card__title-meta {
    color: var(--color-text-faint);
    font-weight: var(--font-weight-regular);
}

.ui-card--title-sm .ui-card__title {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
}

.ui-card__subtitle {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-card__body {
    padding: var(--space-4) var(--space-5);
}

.ui-card__header + .ui-card__body {
    padding-top: var(--space-4);
}

.ui-card__footer {
    padding: 0 var(--space-5) var(--space-5);
}

.ui-card--compact .ui-card__header {
    padding: var(--space-3) var(--space-5) 0;
}

.ui-card--compact .ui-card__body {
    padding: var(--space-3) var(--space-5);
}

.ui-card--compact .ui-card__footer {
    padding: 0 var(--space-4) var(--space-4);
}

.ui-metric-card {
    display: flex;
    min-height: 6rem;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-7);
}

.ui-metric-card__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-metric-card__value {
    margin-top: var(--space-2);
    font-size: 1.9375rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.ui-metric-card__suffix {
    margin-left: var(--space-1);
    font-size: var(--font-size-lg);
}

.ui-metric-card__suffix.is-attached {
    margin-left: 0;
}

.ui-metric-card__suffix.is-inherit {
    font-size: inherit;
}

.ui-metric-card__trend {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.ui-metric-card__trend-value.is-success {
    color: var(--color-success);
}

.ui-metric-card__trend-value.is-warning {
    color: var(--color-warning);
}

.ui-metric-card__trend-value.is-danger {
    color: var(--color-danger);
}

.ui-badge,
.ui-status-badge {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.ui-badge--neutral,
.ui-status-badge--neutral {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-soft);
}

.ui-badge--primary,
.ui-status-badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.ui-badge--success,
.ui-status-badge--success {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.ui-badge--warning,
.ui-status-badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.ui-badge--danger,
.ui-status-badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.ui-badge--info,
.ui-status-badge--info {
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.ui-status-badge__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.ui-avatar {
    position: relative;
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border: 3px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-xs);
}

.ui-avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-2xs);
}

.ui-avatar--lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-sm);
}

.ui-avatar__image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.ui-avatar__status {
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-success);
}

.ui-avatar__status.is-primary {
    background: var(--color-primary);
}

.ui-avatar__status.is-warning {
    background: var(--color-warning);
}

.ui-avatar__status.is-danger {
    background: var(--color-danger);
}

.ui-record-meta .ui-avatar {
    border-width: 2px;
}

.ui-avatar-group {
    display: flex;
    align-items: center;
}

.ui-avatar-group > * + * {
    margin-left: -0.625rem;
}

.ui-button,
.ui-icon-button {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.ui-button {
    padding: 0 var(--space-5);
}

.ui-button:hover:not(:disabled),
.ui-icon-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.ui-button:disabled,
.ui-icon-button:disabled,
.ui-button[aria-disabled="true"],
.ui-icon-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.ui-button--primary,
.ui-icon-button--primary {
    background: var(--color-action);
    color: var(--color-action-contrast);
}

.ui-button--primary:hover:not(:disabled),
.ui-icon-button--primary:hover:not(:disabled) {
    background: var(--color-action-hover);
}

.ui-button--primary:active:not(:disabled),
.ui-icon-button--primary:active:not(:disabled) {
    background: var(--color-action-active);
}

.ui-button--dark,
.ui-icon-button--dark {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.ui-button--secondary,
.ui-icon-button--secondary {
    border-color: var(--color-border);
    background: var(--color-glass-control);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.ui-button--secondary:hover:not(:disabled),
.ui-icon-button--secondary:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

.ui-button--ghost,
.ui-icon-button--ghost {
    background: transparent;
    color: var(--color-text-soft);
}

.ui-button--ghost:hover:not(:disabled),
.ui-icon-button--ghost:hover:not(:disabled) {
    background: var(--color-control-hover);
    color: var(--color-text);
}

.ui-button--danger,
.ui-icon-button--danger {
    background: var(--color-danger);
    color: var(--color-primary-contrast);
}

.ui-button--command,
.ui-icon-button--command {
    min-height: 2.625rem;
    border-color: var(--color-inverse-border);
    background: var(--color-inverse-control);
    color: var(--color-command-text);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
}

.ui-button--command:hover:not(:disabled),
.ui-icon-button--command:hover:not(:disabled) {
    background: var(--color-inverse-hover);
}

.ui-button--command-active {
    min-height: 2.75rem;
    background: var(--color-command-active);
    color: var(--color-command-active-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
}

.ui-button--sm,
.ui-icon-button--sm {
    min-height: var(--control-height-sm);
    font-size: var(--font-size-xs);
}

.ui-button--sm {
    padding: 0 var(--space-4);
}

/* Passwordless authentication */
.app-auth-card {
    overflow: hidden;
}

.app-auth-card__body {
    padding: var(--space-7);
}

.app-auth-card__header {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-align: center;
}

.app-auth-card__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.app-auth-card__title {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.app-auth-card__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-auth-card__description strong {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.app-auth-form,
.app-auth-oauth {
    display: grid;
    gap: var(--space-3);
}

.app-auth-form .form-group + .form-group {
    margin-top: 0;
}

.app-auth-form .form-control {
    font-size: var(--font-size-base);
}

.app-auth-form__submit,
.app-auth-oauth__button {
    width: 100%;
}

.app-auth-oauth__button {
    position: relative;
}

.app-auth-oauth__button .ui-icon {
    position: absolute;
    left: var(--space-4);
}

.app-auth-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
}

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

.app-auth-card__footer {
    margin-top: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.app-auth-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary-active);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast) var(--ease-standard), text-decoration-color var(--transition-fast) var(--ease-standard);
}

.app-auth-link:hover {
    color: var(--color-primary-hover);
    text-decoration-color: currentColor;
}

.app-auth-otp-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.42em;
    text-align: center;
}

.app-auth-resend {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}


.ui-button.is-loading,
.ui-icon-button.is-loading {
    pointer-events: none;
}

.ui-button.is-loading::before,
.ui-icon-button.is-loading::before {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    content: "";
    opacity: 0.72;
    animation: auth-button-spin 700ms linear infinite;
}

@keyframes auth-button-spin {
    to { transform: rotate(360deg); }
}

.ui-button--lg,
.ui-icon-button--lg {
    min-height: var(--control-height-lg);
}

.ui-icon-button {
    position: relative;
    width: var(--control-height);
    flex: 0 0 auto;
    padding: 0;
}

.ui-icon-button__indicator {
    position: absolute;
    top: 0.4375rem;
    right: 0.3125rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.ui-icon-button__badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3125rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.workspace-notification-list {
    display: grid;
    max-height: min(32rem, 62vh);
    gap: var(--space-2);
    overflow-y: auto;
}

.workspace-notification-list form {
    min-width: 0;
}

.workspace-notification-item {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.workspace-notification-item:hover,
.workspace-notification-item:focus-visible {
    border-color: var(--color-primary-border);
    background: var(--color-surface-subtle);
    outline: 0;
}

.workspace-notification-item.is-unread {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}

.workspace-notification-item__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-primary-active);
}

.workspace-notification-item__content {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.workspace-notification-item__content strong {
    font-size: var(--font-size-sm);
}

.workspace-notification-item__content > span,
.workspace-notification-item__content time {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.workspace-notification-item__unread {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.workspace-notification-item__action {
    align-self: center;
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.workspace-notification-actions,
.workspace-notification-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.workspace-notification-filters {
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.workspace-notification-list--page {
    max-height: none;
}

.ui-icon-button--sm {
    width: var(--control-height-sm);
}

.ui-icon-button--lg {
    width: var(--control-height-lg);
}

.ui-action-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ui-action-toolbar__primary,
.ui-action-toolbar__secondary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-action-toolbar__overflow {
    display: none;
}

.ui-action-toolbar--command {
    height: 3.625rem;
    padding: var(--space-2);
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-command-text);
    white-space: nowrap;
}

.ui-action-toolbar--command .ui-button--command {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}

.ui-action-toolbar--command .ui-button--command-active {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
}

.ui-action-toolbar--command .ui-icon-button--command {
    width: 2.625rem;
}

.ui-action-toolbar--command .ui-icon {
    width: 1rem;
    height: 1rem;
}

.ui-action-toolbar--command .ui-action-toolbar__primary,
.ui-action-toolbar--command .ui-action-toolbar__secondary {
    gap: 0.375rem;
}

.ui-action-toolbar--command .ui-action-toolbar__overflow {
    display: block;
}

.ui-divider {
    width: 100%;
    height: 1px;
    margin: var(--space-5) 0;
    border: 0;
    background: var(--color-border);
}

.ui-divider--vertical {
    width: 1px;
    height: 1.5rem;
    margin: 0 var(--space-2);
}

.ui-tooltip {
    position: relative;
    display: inline-flex;
}

.ui-tooltip::after {
    position: absolute;
    z-index: var(--z-tooltip);
    right: 50%;
    bottom: calc(100% + var(--space-2));
    width: max-content;
    max-width: 14rem;
    padding: var(--space-2) var(--space-3);
    transform: translate(50%, var(--space-1));
    border-radius: var(--radius-sm);
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
    content: attr(data-tooltip);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.ui-tooltip:hover::after,
.ui-tooltip:focus-within::after {
    transform: translate(50%, 0);
    opacity: 1;
}

.ui-info-tooltip {
    display: inline-flex;
    flex: 0 0 auto;
}

.ui-info-tooltip__trigger {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: help;
}

.ui-info-tooltip__trigger:hover,
.ui-info-tooltip__trigger:focus-visible {
    color: var(--color-text);
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
}

.ui-info-tooltip__content {
    display: none;
    position: fixed;
    inset: auto;
    width: max-content;
    max-width: min(20rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-popover);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ui-info-tooltip__content:popover-open {
    display: block;
}

.ui-progress {
    display: grid;
    gap: var(--space-2);
}

.ui-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-progress__bar {
    width: 100%;
    height: 0.625rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    appearance: none;
}

.ui-progress__bar::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--color-surface-muted);
}

.ui-progress__bar::-webkit-progress-value {
    border-radius: inherit;
    background: var(--progress-color, var(--color-primary));
}

.ui-progress__bar::-moz-progress-bar {
    border-radius: inherit;
    background: var(--progress-color, var(--color-primary));
}

.ui-progress--success {
    --progress-color: var(--color-success);
}

.ui-progress--warning {
    --progress-color: var(--color-warning);
}

.ui-progress--danger {
    --progress-color: var(--color-danger);
}

.ui-progress--info {
    --progress-color: var(--color-info);
}

.ui-progress--segmented {
    gap: var(--space-2);
}

.ui-progress--segmented .ui-progress__header {
    align-items: center;
}

.ui-progress__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    list-style: none;
}

.ui-progress__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.ui-progress__legend-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.ui-progress__segments {
    display: block;
    width: 100%;
    height: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.ui-progress__segment.is-primary,
.ui-progress__legend-dot.is-primary {
    fill: var(--color-primary);
    background: var(--color-primary);
}

.ui-progress__segment.is-success,
.ui-progress__legend-dot.is-success {
    fill: var(--color-success);
    background: var(--color-success);
}

.ui-progress__segment.is-warning,
.ui-progress__legend-dot.is-warning {
    fill: var(--color-warning);
    background: var(--color-warning);
}

.ui-progress__segment.is-danger,
.ui-progress__legend-dot.is-danger {
    fill: var(--color-danger);
    background: var(--color-danger);
}

.ui-progress__segment.is-info,
.ui-progress__legend-dot.is-info {
    fill: var(--color-info);
    background: var(--color-info);
}

.ui-progress__segment.is-neutral,
.ui-progress__legend-dot.is-neutral {
    fill: var(--color-neutral);
    background: var(--color-neutral);
}

.ui-progress__scale {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--space-1) * -1);
    color: var(--color-text-faint);
    font-size: 0.5625rem;
}

.ui-empty-state {
    display: grid;
    min-height: 15rem;
    place-items: center;
    padding: var(--space-8);
    text-align: center;
}

.ui-empty-state__icon {
    display: inline-grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.ui-empty-state__description {
    max-width: 30rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-empty-state__action {
    margin-top: var(--space-5);
}

.ui-skeleton {
    display: grid;
    gap: var(--space-3);
}

.ui-skeleton__line {
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-surface) 50%, var(--color-surface-muted) 75%);
    background-size: 200% 100%;
    animation: ui-skeleton-loading 1.4s infinite;
}

.ui-skeleton__line:nth-child(2n) {
    width: 82%;
}

.ui-skeleton__line:nth-child(3n) {
    width: 62%;
}

@keyframes ui-skeleton-loading {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.ui-preview-stage {
    min-width: 0;
    overflow: hidden;
    height: 20.625rem;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.24), transparent 26%),
        linear-gradient(112deg, var(--color-preview-start) 0%, var(--color-preview-mid) 43%, var(--color-preview-end) 100%);
    box-shadow: var(--shadow-card);
    color: var(--color-primary-contrast);
}

.ui-preview-stage__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.ui-preview-stage__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.ui-preview-stage__description {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--font-size-xs);
}

.ui-preview-stage__content {
    display: grid;
    min-width: 0;
    margin-top: var(--space-3);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 11.875rem;
    gap: var(--space-8);
}

.ui-invitation {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-popover);
    box-shadow: 0 20px 55px rgba(19, 35, 40, 0.16);
    color: var(--color-text);
}

.ui-invitation--desktop {
    display: grid;
    height: 14.375rem;
    min-height: 14.375rem;
    grid-template-columns: minmax(10rem, 13.4375rem) minmax(0, 1fr);
}

.ui-invitation--mobile {
    width: 10.9375rem;
    min-height: 16.875rem;
    margin: 0 auto;
    padding: var(--space-4);
    border: 0.5rem solid var(--color-glass-border);
    border-radius: 1.75rem;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ui-invitation__media {
    display: grid;
    min-height: 8rem;
    place-items: center;
    padding: var(--space-4);
    background: var(--color-preview-surface);
}

.ui-invitation__media img {
    width: min(100%, 14rem);
    max-height: 12rem;
}

.ui-invitation__body {
    padding: var(--space-3) var(--space-5);
}

.ui-invitation__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-invitation__brand-mark {
    position: relative;
    display: inline-grid;
    width: 1.125rem;
    height: 1.125rem;
    place-items: center;
    overflow: hidden;
    background: transparent;
}

.ui-invitation__brand-mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.ui-invitation__title {
    margin-top: var(--space-2);
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.ui-invitation__subtitle,
.ui-invitation__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-invitation__subtitle {
    margin-top: var(--space-1);
}

.ui-invitation__meta {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.ui-invitation__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-invitation__description {
    max-width: 38rem;
    margin-top: var(--space-2);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.ui-invitation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.ui-invitation--mobile .ui-invitation__media {
    min-height: 6rem;
    margin-top: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.ui-invitation--mobile .ui-invitation__body {
    padding: 0;
}

.ui-invitation--mobile .ui-invitation__title {
    margin-top: var(--space-4);
    font-size: var(--font-size-base);
}

.ui-invitation--mobile .ui-invitation__subtitle,
.ui-invitation--mobile .ui-invitation__meta {
    font-size: 0.5625rem;
}

.ui-invitation--mobile .ui-invitation__description,
.ui-invitation--mobile .ui-invitation__actions .ui-button:not(:first-child) {
    display: none;
}

.ui-invitation--mobile .ui-invitation__actions .ui-button {
    width: 100%;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    font-size: 0.5625rem;
}

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

.ui-statistic {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer);
    text-align: center;
}

.ui-statistic__label {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-statistic__value {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

.ui-statistic__meta {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.ui-definition-list {
    display: grid;
}

.ui-definition-list__row {
    display: grid;
    min-width: 0;
    padding: var(--space-2) 0;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-4);
}

.ui-definition-list__row:last-child {
    border-bottom: 0;
}

.ui-card--compact .ui-definition-list:not(.ui-definition-list--inline) .ui-definition-list__row {
    padding: 0.375rem 0;
}

.ui-definition-list__term {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-definition-list__description {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.ui-definition-strip {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: 2.625rem minmax(0, 1fr);
    gap: var(--space-3);
}

.ui-definition-strip__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-definition-list--inline {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.ui-definition-list--inline .ui-definition-list__row {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
}

.ui-definition-list--inline .ui-definition-list__term,
.ui-definition-list--inline .ui-definition-list__description {
    display: block;
    overflow: hidden;
    font-size: 0.625rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-definition-list--inline .ui-definition-list__description {
    margin-top: var(--space-1);
}

.ui-activity-list {
    display: grid;
    list-style: none;
}

.ui-activity-list__item {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0 0 var(--space-5) var(--space-8);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.ui-activity-list__item::before {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
    content: "";
}

.ui-activity-list__item:not(:last-child)::after {
    position: absolute;
    top: 1.15rem;
    bottom: 0.15rem;
    left: 0.625rem;
    width: 1px;
    background: var(--color-border);
    content: "";
}

.ui-activity-list__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-activity-list__description,
.ui-activity-list__time {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-activity-list__description {
    margin-top: var(--space-1);
}

.ui-sparkline {
    width: 100%;
    min-height: 7rem;
    color: var(--color-success);
}

.ui-sparkline__grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.ui-sparkline__line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.ui-sparkline__fill {
    fill: currentColor;
    opacity: 0.12;
}

.ui-sparkline__label {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 10px;
}

/* Invitation performance chart.
   One header (the card's own), a stat strip, then the plot. The figure is a
   grid whose plot row absorbs leftover height, so the card never opens a band
   of dead space between the heading and the graph, and the x-axis band is part
   of the container rather than something the plot has to leave room for. */
.ui-performance-chart {
    display: grid;
    min-width: 0;
    height: 100%;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto minmax(7rem, 1fr) auto;
    gap: var(--space-2) var(--space-3);
}

.ui-performance-chart__period {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.ui-performance-chart__period .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-text-faint);
}

.ui-performance-chart__stats {
    display: grid;
    min-width: 0;
    margin-bottom: var(--space-2);
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.ui-performance-chart__stat {
    min-width: 0;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}

.ui-performance-chart__stat.is-latest {
    border-left-color: var(--color-primary);
}

.ui-performance-chart__stat p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.ui-performance-chart__stat strong {
    display: block;
    margin: 0.125rem 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-performance-chart__stat span {
    display: block;
    overflow: hidden;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-performance-chart__y-axis {
    position: relative;
    min-height: 0;
    grid-column: 1;
    grid-row: 2;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    line-height: 1;
    text-align: right;
}

.ui-performance-chart__y-axis span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
}

.ui-performance-chart__y-axis .is-top { top: 8%; }
.ui-performance-chart__y-axis .is-middle { top: 50%; }
.ui-performance-chart__y-axis .is-bottom { top: 92%; }

.ui-performance-chart__plot {
    position: relative;
    min-height: 0;
    max-height: 18rem;
    grid-column: 2;
    grid-row: 2;
}

.ui-performance-chart__plot svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ui-performance-chart__grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ui-performance-chart__gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.22;
}

.ui-performance-chart__gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0.015;
}

.ui-performance-chart__area {
    fill: url("#event-performance-area");
}

.ui-performance-chart__current-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ui-performance-chart__x-axis {
    display: grid;
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    color: var(--color-text-faint);
    font-size: 0.625rem;
}

.ui-performance-chart__x-axis span {
    text-align: center;
}

.ui-performance-chart__x-axis span:first-child { text-align: left; }
.ui-performance-chart__x-axis span:last-child { text-align: right; }

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

.ui-chip-group {
    min-width: 0;
}

.ui-chip-group__header {
    display: flex;
    min-height: var(--control-height-sm);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.ui-chip-group__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.ui-chip-group__title span {
    color: var(--color-text-faint);
}

.ui-chip-group__header + .ui-chip-list {
    margin-top: var(--space-2);
}

.ui-chip {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer);
    font-size: var(--font-size-xs);
}

.ui-chip__meta {
    color: var(--color-text-muted);
}

.ui-info-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.ui-info-row__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-info-row__content {
    min-width: 0;
}

.ui-info-row__label,
.ui-info-row__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-info-row__value {
    overflow: hidden;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-task-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
}

.ui-task-list__item {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    font-size: var(--font-size-xs);
}

.ui-task-list__marker {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
}

.nav-sidebar-group {
    min-width: 0;
}

.nav-sidebar-group__toggle {
    display: none;
    width: 100%;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.nav-sidebar-group__toggle .ui-icon {
    transition: transform var(--transition-base) var(--ease-standard);
}

.nav-sidebar-group.is-collapsed .nav-sidebar-group__toggle .ui-icon {
    transform: rotate(-90deg);
}

.nav-sidebar-group__content {
    display: grid;
    gap: 0.625rem;
    margin-top: 0;
}

.has-js .nav-sidebar-group.is-collapsed .nav-sidebar-group__content {
    display: none;
}

.nav-sidebar-item {
    position: relative;
    display: flex;
    min-width: 0;
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-glass);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-sidebar-item:hover {
    transform: translateY(-1px);
    background: var(--color-surface);
    color: var(--color-text);
}

.nav-sidebar-item.is-active {
    border-color: var(--color-surface-inverse);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
}

.nav-sidebar-item__label {
    display: none;
}

.nav-sidebar-item__badge {
    display: none;
}

.nav-sidebar-item::after {
    position: absolute;
    z-index: var(--z-tooltip);
    top: 50%;
    left: calc(100% + var(--space-2));
    width: max-content;
    padding: var(--space-2) var(--space-3);
    transform: translate(-0.25rem, -50%);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
    content: attr(data-nav-tooltip);
    font-size: var(--font-size-2xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-sidebar-item:hover::after,
.nav-sidebar-item:focus-visible::after {
    transform: translate(0, -50%);
    opacity: 1;
}

.nav-top {
    display: flex;
    min-width: 0;
    height: var(--header-height);
    padding: var(--space-2);
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-command-text);
    white-space: nowrap;
}

.nav-top__links {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
}

.nav-top__item {
    display: inline-flex;
    min-height: 2.625rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-inverse-control);
    color: var(--color-inverse-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-top__item:hover {
    background: var(--color-inverse-hover);
    color: var(--color-command-text);
}

.nav-top__item.is-active {
    border-color: var(--color-command-active);
    background: var(--color-command-active);
    color: var(--color-command-active-text);
    font-weight: var(--font-weight-medium);
}

.nav-top__item .ui-icon {
    width: 1rem;
    height: 1rem;
}

.nav-top__more {
    flex: 0 0 auto;
}

.nav-top__more .ui-icon-button--command {
    width: 2.625rem;
}

/* Credit island: always-on email + calendar readout carried by the nav island. */
.credit-island {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.125rem;
    white-space: nowrap;
}

/* Standalone pill, for chrome that has no island of its own. */
.credit-island--island {
    height: var(--control-height);
    padding: 0 0.375rem;
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-command-text);
}

/* Hairline that separates the readout from the island's own content. */
.credit-island__rule {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.375rem 0 0.25rem;
    flex: 0 0 auto;
    background: var(--color-inverse-border);
}

.credit-island__segment {
    display: inline-flex;
    height: 2rem;
    padding: 0 var(--space-2);
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    color: var(--color-inverse-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.credit-island--inline .credit-island__segment {
    height: 2.625rem;
    padding: 0 var(--space-3);
}

a.credit-island__segment:hover {
    background: var(--color-inverse-hover);
    color: var(--color-command-text);
}

a.credit-island__segment:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-inverse-focus);
}

.credit-island__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    opacity: 0.66;
}

.credit-island__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.credit-island__segment.is-low {
    color: var(--color-command-warning);
}

.credit-island__segment.is-empty {
    background: var(--color-danger-border);
    color: var(--color-command-danger);
}

.credit-island__segment.is-low .credit-island__icon,
.credit-island__segment.is-empty .credit-island__icon {
    opacity: 1;
}

.credit-island__divider {
    width: 1px;
    height: 1.125rem;
    flex: 0 0 auto;
    background: var(--color-inverse-border);
}

.credit-island--compact {
    height: var(--control-height-sm);
    padding: 0 0.25rem;
}

.credit-island--compact .credit-island__segment {
    height: 1.75rem;
    padding: 0 var(--space-2);
    gap: 0.375rem;
    font-size: 0.75rem;
}

.nav-top__credits,
.nav-tabs__credits {
    flex: 0 0 auto;
}

.nav-tabs-wrap {
    min-width: 0;
    margin-top: var(--space-5);
    padding: 0 var(--space-2);
}

.nav-tabs {
    display: flex;
    min-width: 0;
    gap: var(--space-20);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.nav-tabs__item {
    position: relative;
    display: inline-flex;
    min-height: 3rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.nav-tabs__item:hover,
.nav-tabs__item.is-active,
.nav-tabs__item[aria-selected="true"] {
    color: var(--color-text);
}

.nav-tabs__item.is-active,
.nav-tabs__item[aria-selected="true"] {
    font-weight: var(--font-weight-medium);
}

.nav-tabs__item.is-active::after,
.nav-tabs__item[aria-selected="true"]::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    content: "";
}

.nav-tabs__item.is-active::before,
.nav-tabs__item[aria-selected="true"]::before {
    position: absolute;
    bottom: -0.3125rem;
    left: 50%;
    width: 0.5625rem;
    height: 0.5625rem;
    transform: translateX(-50%) rotate(-45deg);
    border-bottom: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    background: var(--color-page);
    content: "";
}

/* The wrap carries the island shell so trailing status can sit beside the
   scrolling tab rail instead of scrolling away with it. */
.nav-tabs-wrap--notch {
    display: flex;
    max-width: 100%;
    height: var(--header-height);
    margin: 0;
    padding: var(--space-2);
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-command-text);
}

.nav-tabs--notch {
    min-width: 0;
    height: auto;
    padding: 0;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    scrollbar-width: none;
}

.nav-tabs--notch::-webkit-scrollbar {
    display: none;
}

.nav-tabs--notch .nav-tabs__item {
    min-height: 2.625rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-inverse-control);
    color: var(--color-inverse-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-tabs--notch .nav-tabs__item:hover {
    background: var(--color-inverse-hover);
    color: var(--color-command-text);
}

.nav-tabs--notch .nav-tabs__item.is-active,
.nav-tabs--notch .nav-tabs__item[aria-selected="true"] {
    border-color: var(--color-command-active);
    background: var(--color-command-active);
    color: var(--color-command-active-text);
    font-weight: var(--font-weight-medium);
}

.nav-tabs--notch .nav-tabs__item[data-tone="danger"] {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.nav-tabs--notch .nav-tabs__item[data-tone="danger"]:hover,
.nav-tabs--notch .nav-tabs__item[data-tone="danger"].is-active {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-primary-contrast);
}

.nav-tabs--notch .nav-tabs__item::before,
.nav-tabs--notch .nav-tabs__item::after {
    display: none;
}

.nav-tabs--notch .nav-tabs__item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-inverse-focus);
}

.dashboard-workspace {
    display: grid;
    padding: 0 var(--space-2);
    grid-template-rows: auto auto;
    gap: var(--space-5);
}

/* Overview bar: the plan reads as a folder tab growing out of the first card,
   carrying the workspace shortcuts and its own upgrade path. */
.dashboard-overview__bar {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-end;
}

.dashboard-overview__plan-tab {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    /* Reach a hair past the panel gap so the tab covers the card's top border
       instead of letting it draw a seam across the join. */
    margin-bottom: calc(-1 * var(--space-4) - 1px);
    padding: var(--space-3) var(--space-3) var(--space-4) var(--space-4);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    white-space: nowrap;
}

/* The concave fillet that carries the tab's edge down into the card top. */
.dashboard-overview__plan-tab::after {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: var(--radius-xl);
    height: var(--radius-xl);
    background: radial-gradient(
        circle var(--radius-xl) at 100% 0,
        transparent 0 var(--radius-xl),
        var(--hero-ink) var(--radius-xl)
    );
    content: "";
}

.dashboard-overview__plan-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dashboard-overview__plan-tab.is-paid .dashboard-overview__plan-mark {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.dashboard-overview__plan-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.dashboard-overview__plan-label {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.dashboard-overview__plan-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.dashboard-overview__plan-value {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.dashboard-overview__plan-price {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

/* Shortcuts and the upgrade path share the tab, so they share one pill size. */
.dashboard-overview__tab-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    margin-left: var(--space-2);
    gap: var(--space-2);
}

.dashboard-overview__tab-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.dashboard-overview__tab-action:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dashboard-overview__tab-action:focus-visible {
    outline: 0;
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.dashboard-overview__tab-action .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
}

/* The upgrade path closes the row, so its chevron leads the eye out. */
.dashboard-overview__plan-cta {
    padding-right: var(--space-2);
    gap: 0.125rem;
}

.dashboard-overview__plan-cta .ui-icon {
    transition: transform var(--transition-fast) var(--ease-standard);
}

.dashboard-overview__plan-cta:hover .ui-icon {
    transform: translateX(2px);
}

/* The plan tab and its card are one object, so they share one surface: a fixed
   ink ground with an accent glow, identical in light and dark, like the event
   reference card. Being opaque is the point - the translucent glass version let
   the card's hairline bleed through the tab and read as a seam. */
.dashboard-overview__plan-tab,
.dashboard-overview__notched {
    --hero-ink: #10111f;
    --color-text: #f7f6ff;
    --color-text-soft: #d7d6e4;
    --color-text-muted: #aaa9bd;
    --color-text-faint: #7f7e93;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-layer: rgba(255, 255, 255, 0.05);
    --color-layer-soft: rgba(255, 255, 255, 0.035);
    --color-surface: rgba(255, 255, 255, 0.06);
    --color-surface-subtle: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
    /* Fixed alpha on the glow keeps both themes identical; the hue follows the
       workspace accent. */
    background:
        radial-gradient(
            circle at 6% 0%,
            color-mix(in srgb, var(--color-primary) 30%, transparent),
            transparent 52%
        ),
        var(--hero-ink);
    color: var(--color-text);
}

/* Event deck: equal-width cards step right and down, with their lower edges
   tucked behind the activity panel. Each rear layer fades into the page. */
/* The masthead drops its inline padding here so the deck's right edge lines up
   with the activity card beneath it. */
.app-page--dashboard .ui-page-header {
    padding: 0;
}

.event-deck {
    --event-deck-step: 6rem;
    --event-deck-ink: color-mix(in srgb, var(--color-primary) 20%, #17211b);
    --event-deck-glow: color-mix(in srgb, var(--color-primary) 58%, #ffffff);
    display: none;
    position: relative;
    /* An explicit width: inside the header's shrink-to-fit actions column a
       percentage would resolve against the deck's own content. */
    width: 30rem;
    max-width: 100%;
    /* The deck runs down past the masthead so the activity card below covers its
       foot and the stack reads as emerging from behind that card. The negative
       margin gives the masthead back the height the taller card would add. */
    margin-bottom: -7.5rem;
}

.app-page--dashboard .dashboard-workspace:has(#overview.is-active) .event-deck {
    display: block;
}

.event-deck__card {
    position: relative;
    z-index: 3;
    display: grid;
    /* Tall enough that its foot reaches the card that covers it. */
    min-height: 14rem;
    margin-right: calc(var(--event-deck-step) * 2);
    padding: var(--space-4);
    align-content: start;
    gap: var(--space-2);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.65);
    /* Pale edges surround a brighter center using the selected accent. */
    background:
        radial-gradient(ellipse at 63% 48%, color-mix(in srgb, var(--event-deck-glow) 88%, transparent) 0%, color-mix(in srgb, var(--event-deck-glow) 50%, transparent) 38%, transparent 76%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, #ffffff) 0%, color-mix(in srgb, var(--color-primary) 22%, #ffffff) 30%, color-mix(in srgb, var(--color-primary) 36%, #ffffff) 64%, color-mix(in srgb, var(--color-primary) 10%, #ffffff) 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65), 0 5px 18px color-mix(in srgb, var(--color-primary) 6%, transparent);
    /* Keep dark ink on the light gradient surface in both themes. */
    color: var(--event-deck-ink);
    text-decoration: none;
    transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

a.event-deck__card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65), 0 7px 22px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

a.event-deck__card:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus);
}

.event-deck__card.is-behind {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: var(--event-deck-step);
    bottom: 0;
    left: var(--event-deck-step);
    min-height: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0.5;
    box-shadow: none;
    transform: rotate(2deg);
    transform-origin: bottom left;
    pointer-events: none;
}

.event-deck__card.is-depth-2 {
    z-index: 1;
    top: 3.5rem;
    right: 0;
    left: calc(var(--event-deck-step) * 2);
    opacity: 0.24;
}

.event-deck__card.is-behind .event-deck__statement {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.event-deck__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-deck__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--event-deck-ink);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    white-space: nowrap;
}

.event-deck__label .ui-icon,
.event-deck__go {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
}

.event-deck__go {
    transition: transform var(--transition-fast) var(--ease-standard);
}

a.event-deck__card:hover .event-deck__go {
    transform: translate(2px, -2px);
}

/* One large statement, the way the reference leads with its sentence. */
.event-deck__statement {
    display: -webkit-box;
    overflow: hidden;
    margin-top: var(--space-2);
    color: var(--event-deck-ink);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    line-height: var(--line-height-snug);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* A short stat row: what the Event amounts to at a glance. */
.event-deck__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-2);
    gap: var(--space-2) var(--space-4);
}

.event-deck__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--event-deck-ink);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-deck__stat strong {
    font-weight: var(--font-weight-semibold);
}

.event-deck__stat .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    opacity: 0.6;
}

.event-deck__meta {
    color: var(--event-deck-ink);
    font-size: var(--font-size-2xs);
    opacity: 0.75;
}

.event-deck__meta strong {
    font-weight: var(--font-weight-semibold);
}

/* The notched card gives up its top-left rounding to the tab. */
.dashboard-overview__notched {
    border-top-left-radius: 0;
    box-shadow: 0 1.35rem 3.4rem rgba(15, 16, 29, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Premium pass on the workspace cards: tighter headings, a more confident
   headline figure, and a hover that brightens the edge without moving the
   card - the plan tab is a sibling, so a lift would tear it off its card. */
.dashboard-workspace__card {
    transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.dashboard-workspace__card:hover {
    border-color: var(--color-border-strong);
}

.dashboard-workspace__card .ui-card__title {
    letter-spacing: -0.012em;
}

.dashboard-overview__chart-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}


.dashboard-workspace__panels,
.dashboard-workspace__panel {
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-workspace__panel {
    padding: 0;
    overflow: visible;
}

.dashboard-workspace__panel + .dashboard-workspace__panel {
    margin-top: var(--space-5);
}

.has-js .dashboard-workspace__panel + .dashboard-workspace__panel {
    margin-top: 0;
}

.dashboard-workspace__panel--overview {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--space-4);
}

.dashboard-workspace__overview-grid,
.dashboard-workspace__performance-grid,
.dashboard-workspace__activity-grid {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: var(--space-4);
}

.dashboard-workspace__overview-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(17rem, auto));
    gap: var(--space-3);
}

.dashboard-workspace__overview-card--performance {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.dashboard-workspace__overview-card--activity {
    /* Sits just above the event deck's cards (which reach z-index 3) so it
       covers the deck's foot. Deliberately far below --z-sticky: the top bar
       owns that level, and overlapping it would bury its open menus. */
    position: relative;
    z-index: 4;
    grid-column: 8 / -1;
    grid-row: 1;
}

.dashboard-workspace__overview-card--running {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.dashboard-workspace__overview-card--scheduled {
    grid-column: 5 / span 4;
    grid-row: 2;
}

.dashboard-workspace__overview-card--team {
    grid-column: 9 / -1;
    grid-row: 2;
}

.dashboard-workspace__overview-card--performance .ui-card__body,
.dashboard-workspace__overview-card--activity .ui-card__body {
    display: grid;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
    overflow: hidden;
}

.dashboard-overview__chart-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dashboard-overview__chart-value-group {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-2);
}

.dashboard-overview__chart-value {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.dashboard-overview__chart-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dashboard-overview__chart-trend {
    padding: 0.3rem var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.dashboard-overview__line-chart {
    display: grid;
    height: 100%;
    min-height: 8.5rem;
    margin: 0 calc(0px - var(--space-5)) calc(0px - var(--space-3));
    overflow: hidden;
    border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
    background: transparent;
    color: var(--color-primary);
    grid-template-rows: minmax(0, 1fr) auto;
}

.dashboard-overview__performance-canvas {
    display: grid;
    min-height: 0;
    padding: 0 var(--space-5);
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-2);
}

.dashboard-overview__performance-y-axis {
    position: relative;
    min-height: 8rem;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    line-height: 1;
    text-align: right;
}

.dashboard-overview__performance-y-axis span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
}

.dashboard-overview__performance-y-axis .is-top { top: 11.25%; }
.dashboard-overview__performance-y-axis .is-middle { top: 50%; }
.dashboard-overview__performance-y-axis .is-bottom { top: 88.75%; }

.dashboard-overview__performance-plot {
    position: relative;
    min-height: 8rem;
}

.dashboard-overview__performance-plot svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.dashboard-overview__performance-grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__performance-gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.2;
}

.dashboard-overview__performance-gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0;
}

.dashboard-overview__performance-area {
    fill: url("#dashboard-performance-gradient");
}

.dashboard-overview__performance-line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__performance-current {
    position: absolute;
    z-index: 1;
    top: calc(17.5% - 0.3125rem);
    right: calc(3.33% - 0.3125rem);
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 0.3125rem var(--color-primary-soft);
}

.dashboard-overview__performance-current::before {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: -0.4375rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
    content: attr(data-value);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
}

.dashboard-overview__performance-axis {
    display: grid;
    min-height: 1.75rem;
    padding: 0 var(--space-5) 0.375rem calc(var(--space-5) + 2rem + var(--space-2));
    align-items: center;
    color: var(--color-text-muted);
    grid-template-columns: repeat(7, minmax(0, 1fr));
    font-size: var(--font-size-2xs);
    line-height: 1;
    text-align: center;
}

.dashboard-overview__performance-axis span:first-child {
    text-align: left;
}

.dashboard-overview__performance-axis span:last-child {
    text-align: right;
}

.dashboard-overview__activity-chart {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-items: end;
    padding: var(--space-1) 0;
}

.dashboard-overview__activity-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 8rem;
}

.dashboard-overview__activity-grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__activity-tracks rect {
    fill: var(--color-layer-strong);
}

.dashboard-overview__activity-bars rect {
    fill: var(--color-primary);
    opacity: 0.55;
}

.dashboard-overview__activity-bars .is-current {
    opacity: 1;
}

.dashboard-overview__activity-values,
.dashboard-overview__activity-labels {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    text-anchor: middle;
}

.dashboard-overview__activity-values {
    fill: var(--color-text);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
}

.dashboard-overview__activity-labels {
    font-size: 9px;
}

.dashboard-overview__activity-values .is-current,
.dashboard-overview__activity-labels .is-current {
    fill: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.dashboard-overview__event-list {
    display: grid;
    align-content: start;
}

.dashboard-overview__event-list .ui-info-row {
    padding: var(--space-2) 0;
    gap: var(--space-2);
}

.dashboard-overview__event-list .ui-info-row + .ui-info-row {
    border-top: 1px solid var(--color-border);
}

.dashboard-overview__event-list .ui-info-row__icon {
    width: 2.25rem;
    height: 2.25rem;
}

.dashboard-overview__event-list .ui-info-row__icon .ui-icon {
    width: 1rem;
    height: 1rem;
}

.dashboard-overview__event-list .ui-info-row__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-workspace__overview-card--team .ui-card__body {
    padding-top: var(--space-2);
    overflow: hidden;
}

.dashboard-overview__team-table-wrap {
    min-width: 0;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
}

.dashboard-overview__team-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dashboard-overview__team-table th,
.dashboard-overview__team-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    vertical-align: middle;
}

.dashboard-overview__team-table th {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-overview__team-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-overview__team-table td:last-child,
.dashboard-overview__team-table th:last-child {
    text-align: right;
}

.dashboard-overview__team-member {
    display: flex;
    min-width: 8rem;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.dashboard-overview__assignment-count {
    display: inline-grid;
    min-width: 1.75rem;
    min-height: 1.75rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
}

/* Four cards on one 12-column field. The chart sits beside the summary so its
   height is set by a real neighbour, and the two meters share the row below
   instead of stacking into a column that stretches the chart out of shape. */
.dashboard-workspace__performance-grid {
    align-content: start;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(20rem, auto) minmax(10rem, auto);
    gap: var(--space-3);
}

.dashboard-performance__chart {
    grid-column: 1 / span 8;
    grid-row: 1;
}

.dashboard-performance__summary {
    grid-column: 9 / -1;
    grid-row: 1;
}

.dashboard-performance__readiness-card {
    grid-column: 1 / span 6;
    grid-row: 2;
}

.dashboard-performance__response-card {
    grid-column: 7 / -1;
    grid-row: 2;
}

.dashboard-workspace__activity-grid {
    grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.42fr);
}

.dashboard-workspace__card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-workspace__card .ui-card__header,
.dashboard-workspace__card .ui-card__footer {
    flex: 0 0 auto;
}

.dashboard-workspace__card .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: visible;
}

.dashboard-workspace__event-list {
    display: grid;
    align-content: start;
}

.dashboard-workspace__health-list {
    display: grid;
    min-height: 0;
    gap: var(--space-5);
}

.dashboard-workspace__health-list {
    height: 100%;
    align-content: center;
}

.dashboard-workspace__chart-card .ui-card__body {
    display: grid;
}

.dashboard-performance__summary .ui-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-overview__performance-point,
.dashboard-overview__performance-point-halo {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__performance-point-halo {
    stroke: var(--color-primary-soft);
    stroke-width: 9;
}

.dashboard-overview__performance-point {
    stroke: var(--color-primary);
    stroke-width: 5;
}

.dashboard-performance__point,
.dashboard-performance__point-halo {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* The halo doubles as the hover target, so it is wider than the visible dot. */
.dashboard-performance__point-halo {
    stroke: var(--color-primary-soft);
    stroke-width: 16;
    stroke-opacity: 0;
    transition: stroke-opacity var(--transition-fast) var(--ease-standard);
}

.dashboard-performance__point {
    stroke: var(--color-primary);
    stroke-width: 5;
}

.dashboard-performance__marker:hover .dashboard-performance__point-halo {
    stroke-opacity: 1;
}

/* The endpoint is the one mark worth calling out on the plot itself. */
.dashboard-performance__marker.is-latest .dashboard-performance__point-halo {
    stroke: var(--color-primary-soft);
    stroke-opacity: 1;
}

.dashboard-performance__marker.is-latest .dashboard-performance__point {
    stroke-width: 8;
}

.dashboard-workspace__card .ui-empty-state {
    min-height: 100%;
    padding: var(--space-4);
}

.dashboard-workspace__card .ui-empty-state__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-2);
}

.dashboard-workspace__card .ui-empty-state__title {
    font-size: var(--font-size-sm);
}

.dashboard-workspace__card .ui-empty-state__description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

.dashboard-performance {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto;
    gap: var(--space-4);
}

.dashboard-performance__metrics {
    gap: var(--space-3);
}

.dashboard-performance__metrics .ui-metric-card {
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-5);
}

.dashboard-performance__metrics .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: 1.6875rem;
}

/* The summary shares a row with the chart, so its four tiles fill the card
   rather than floating in the middle of it. */
.dashboard-performance__summary .ui-statistics-grid {
    height: 100%;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.dashboard-performance__summary .ui-statistic {
    display: grid;
    align-content: center;
    gap: var(--space-1);
}

.dashboard-performance__readiness {
    display: grid;
    height: 100%;
    align-content: center;
    gap: var(--space-3);
}

.dashboard-performance__readiness-meta {
    display: grid;
    color: var(--color-text-muted);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    font-size: var(--font-size-xs);
}

.dashboard-performance__readiness-meta span {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer);
    text-align: center;
}

.dashboard-performance__readiness-meta strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.dashboard-workspace__activity-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(15rem, 1fr) minmax(11rem, 0.72fr);
    gap: var(--space-3);
}

.dashboard-activity__feed {
    grid-column: 1 / span 6;
    grid-row: 1;
}

.dashboard-activity__credits {
    grid-column: 7 / -1;
    grid-row: 1;
}

.dashboard-activity__events {
    grid-column: 1 / -1;
    grid-row: 2;
}

.dashboard-credit-usage {
    display: grid;
    min-height: 0;
    grid-template-rows: auto auto;
    gap: var(--space-3);
}

.dashboard-credit-usage .ui-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-credit-usage__recent {
    min-height: 0;
    overflow: visible;
}

.dashboard-credit-usage__recent > p {
    margin-bottom: var(--space-1);
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.dashboard-credit-usage .ui-activity-list__item {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.dashboard-workspace__event-table .table-responsive {
    max-height: none;
}

.nav-tabs-wrap > [data-tab-panel] {
    padding-top: var(--space-4);
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown > summary {
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown[open] > summary {
    box-shadow: var(--focus-ring);
}

.nav-dropdown__menu {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    width: max-content;
    min-width: 13rem;
    max-width: min(19rem, calc(100vw - 2rem));
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-popover);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-dropdown--start .nav-dropdown__menu {
    right: auto;
    left: 0;
}

.nav-dropdown--command .nav-dropdown__menu {
    color: var(--color-text);
}

.nav-dropdown__item {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    text-align: left;
}

.nav-dropdown__item:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.nav-dropdown__item.is-active {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.nav-dropdown__item.is-danger {
    color: var(--color-danger);
}

/*
 * Filter dropdown
 * ------------------------------------------------------------------
 * Grouped, counted filter options behind one trigger, so a table header
 * carries a single control instead of a row of pills that wraps. The
 * trigger names what is active, so the closed state still reads.
 */
/* The trigger matches the small controls it shares the toolbar with. */
.nav-dropdown--filters > summary.ui-button {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-4);
    font-size: var(--font-size-xs);
    /* The trigger names the active filters; it wraps out of the toolbar rather
       than breaking that name over two lines inside the control. */
    white-space: nowrap;
}

.nav-dropdown--filters .nav-dropdown__menu {
    min-width: 15rem;
    padding-top: 0;
}

.nav-dropdown__group-label {
    padding: var(--space-3) var(--space-3) var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* The label takes the row and the count closes it, on every item alike. */
.nav-dropdown--filters .nav-dropdown__item > span {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.nav-dropdown__count {
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.nav-dropdown__item.is-active .nav-dropdown__count {
    color: inherit;
    opacity: 0.72;
}

.nav-dropdown__divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--color-border);
}

.app-user-menu__trigger {
    display: block;
    border-radius: var(--radius-pill);
}

.app-user-menu__trigger:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.app-user-menu__menu {
    gap: var(--space-1);
}

.app-user-menu__identity {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.app-user-menu__identity strong,
.app-user-menu__identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-menu__identity strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-user-menu__identity span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.app-user-menu__links {
    display: grid;
    gap: var(--space-1);
}

.app-user-menu__item-chevron {
    margin-left: auto;
    color: var(--color-text-faint);
}

.app-user-menu__signout {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* Profile workspace */
.profile-page {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: var(--space-1) 0 var(--space-3);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
    overflow: hidden;
}

.profile-page__header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.profile-page__eyebrow {
    color: var(--color-primary-active);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.profile-page__title {
    margin-top: var(--space-1);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.profile-page__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.profile-page__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.profile-page__layout {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(16.75rem, 0.64fr) minmax(0, 2.36fr);
    gap: var(--space-3);
}

.profile-identity-card,
.profile-details-card,
.profile-purchase-card,
.profile-social-card {
    min-height: 0;
    overflow: hidden;
}

.profile-page__sidebar,
.profile-page__main,
.profile-page__forms,
.profile-page__details-stack,
.profile-identity-card,
.profile-details-card,
.profile-purchase-card {
    height: 100%;
}

.profile-page__sidebar {
    min-width: 0;
    min-height: 0;
}

.profile-identity-card .ui-card__body {
    height: 100%;
    padding: var(--space-5);
}

.profile-identity-card__content {
    display: flex;
    height: 100%;
    min-height: 0;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.profile-identity-card__avatar.ui-avatar {
    width: 5.25rem;
    height: 5.25rem;
    border-width: 0.3125rem;
    font-size: var(--font-size-xl);
    box-shadow: 0 0 0 4px var(--color-primary-border), var(--shadow-sm);
}

.profile-identity-card__avatar .ui-avatar__status {
    right: 0.125rem;
    bottom: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
}

.profile-identity-card__copy {
    width: 100%;
    min-width: 0;
    margin-top: var(--space-4);
}

.profile-identity-card__copy h2,
.profile-identity-card__copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-identity-card__copy h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.profile-identity-card__copy p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.profile-identity-card__copy + .ui-status-badge {
    margin-top: var(--space-3);
}

.profile-photo-control {
    display: grid;
    width: 100%;
    margin-top: var(--space-5);
    justify-items: center;
    gap: var(--space-2);
}

.profile-photo-control .ui-button {
    cursor: pointer;
}

.profile-photo-control p {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.profile-identity-card__meta {
    display: grid;
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-5);
    gap: var(--space-2);
}

.profile-address-card .ui-card__body {
    overflow-y: auto;
}

.profile-address-grid {
    gap: var(--space-2) var(--space-3);
}

.profile-identity-card__meta div {
    display: flex;
    min-width: 0;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.profile-identity-card__meta span {
    color: var(--color-text-muted);
}

.profile-identity-card__meta strong {
    overflow: hidden;
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-page__main {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.profile-page__forms {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(19rem, 0.92fr) minmax(25rem, 1.08fr);
    gap: var(--space-3);
}

.profile-page__details-stack {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-3);
}

.profile-details-card {
    display: flex;
    flex-direction: column;
}

.profile-details-card .ui-card__header {
    flex: 0 0 auto;
}

.profile-details-card .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
}

.profile-purchase-card {
    display: flex;
    flex-direction: column;
}

.profile-purchase-card .ui-card__body {
    display: grid;
    min-height: 0;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
    align-content: space-between;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.profile-purchase-empty {
    display: grid;
    min-height: 10rem;
    place-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.profile-purchase-empty.ui-empty-state {
    min-height: 11rem;
    padding: var(--space-6);
}

.profile-purchase-table-wrap {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-purchase-table {
    width: 100%;
    min-width: 29rem;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

.profile-purchase-table th,
.profile-purchase-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.profile-purchase-table th:first-child,
.profile-purchase-table td:first-child {
    padding-left: 0;
}

.profile-purchase-table th:last-child,
.profile-purchase-table td:last-child {
    padding-right: 0;
}

.profile-purchase-table th {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-purchase-table td {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.profile-purchase-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-purchase-table__item {
    display: grid;
    gap: var(--space-1);
}

.profile-purchase-table td strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.profile-purchase-table td span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.profile-purchase-table__amount {
    color: var(--color-text) !important;
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.profile-purchase-pagination {
    display: flex;
    min-width: 0;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.profile-purchase-pagination p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-purchase-pagination .nav-pagination {
    flex-wrap: nowrap;
}

.profile-purchase-pagination .nav-pagination__item {
    padding: 0;
    background: transparent;
}

.profile-form-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.profile-form-grid .form-group {
    min-width: 0;
    align-content: start;
    gap: var(--space-1);
}

.profile-form-grid .form-group + .form-group {
    margin-top: 0;
}

.profile-form-grid__wide {
    grid-column: 1 / -1;
}

.profile-page .form-control,
.profile-page .form-select {
    min-height: 2.5rem;
}

.profile-social-card .ui-card__body {
    padding-top: var(--space-3);
}

.profile-social-card__privacy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-social-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.profile-social-item {
    display: flex;
    min-width: 0;
    min-height: 4.25rem;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-layer), var(--color-layer-faint));
}

.profile-social-item__identity,
.profile-social-item__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.profile-social-item__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.profile-social-item__copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.profile-social-item__copy strong,
.profile-social-item__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-social-item__copy strong {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.profile-social-item__copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.profile-social-item__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-social-item__status i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-faint);
    opacity: 0.7;
}

.profile-social-item .ui-button {
    flex: 0 0 auto;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.nav-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.nav-pagination__item {
    display: inline-grid;
    min-width: var(--control-height-sm);
    height: var(--control-height-sm);
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.nav-pagination__item:hover:not(.is-disabled) {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.nav-pagination__item.is-active {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.nav-pagination__item.is-disabled {
    opacity: 0.42;
}

.nav-pagination__ellipsis {
    padding: 0 var(--space-1);
    color: var(--color-text-faint);
}

.ui-alert {
    display: grid;
    min-width: 0;
    padding: var(--space-4);
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}

.ui-alert--info {
    border-color: rgba(53, 120, 212, 0.18);
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.ui-alert--success {
    border-color: rgba(31, 172, 121, 0.18);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.ui-alert--warning {
    border-color: rgba(215, 138, 19, 0.2);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.ui-alert--danger {
    border-color: rgba(216, 79, 99, 0.2);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.ui-alert__icon {
    display: inline-flex;
    margin-top: 0.1rem;
}

.ui-alert__content {
    min-width: 0;
}

.ui-alert__title {
    font-weight: var(--font-weight-semibold);
}

.ui-alert__message {
    color: currentColor;
}

.ui-alert__title + .ui-alert__message {
    margin-top: var(--space-1);
    opacity: 0.9;
}

.ui-alert__dismiss {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin: -0.35rem -0.35rem 0 0;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    color: currentColor;
}

.ui-alert__dismiss:hover {
    background: var(--color-layer);
}

.event-provider-advisory.ui-alert {
    width: fit-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    border-radius: var(--radius-lg);
    gap: var(--space-2);
}

.event-provider-advisory .ui-alert__icon {
    margin-top: 0;
}

.event-provider-advisory .ui-alert__content,
.event-provider-advisory__body {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.event-provider-advisory .ui-alert__title {
    flex: 0 0 auto;
}

.event-provider-advisory .ui-alert__title + .ui-alert__message {
    margin-top: 0;
}

.event-provider-advisory__body > span {
    color: var(--color-text-soft);
}

.event-provider-advisory__secondary {
    font-size: var(--font-size-xs);
}

.event-provider-advisory__body > a {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.event-provider-advisory__body > a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.event-provider-advisory__body > a:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

@media (max-width: 40rem) {
    .event-provider-advisory.ui-alert {
        width: 100%;
        align-items: flex-start;
    }

    .event-provider-advisory .ui-alert__content,
    .event-provider-advisory__body {
        display: grid;
    }
}

.ui-success-card {
    position: fixed;
    z-index: var(--z-toast);
    top: var(--space-5);
    right: var(--space-5);
    width: min(28rem, calc(100vw - (var(--space-5) * 2)));
    overflow: hidden;
    border-color: var(--color-card-glass-border);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    animation: ui-success-card-in var(--transition-slow) var(--ease-standard) both;
    transition: opacity var(--transition-base) var(--ease-standard), transform var(--transition-base) var(--ease-standard);
}

.ui-success-card__body {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.ui-success-card__icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-glass-strong), var(--color-layer-soft));
    box-shadow: inset 0 1px 0 var(--color-card-glass-highlight);
    color: var(--color-success-strong);
}

.ui-success-card__content {
    min-width: 0;
}

.ui-success-card__title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-success-card__message {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-success-card__dismiss {
    display: inline-flex;
    min-height: 2rem;
    padding: 0 var(--space-3) 0 var(--space-2);
    align-self: start;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-card-glass-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    transition: background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.ui-success-card__dismiss:hover {
    background: var(--color-layer-strong);
    color: var(--color-text);
}

.ui-success-card.is-dismissing {
    opacity: 0;
    transform: translateX(calc(100% + var(--space-5)));
    animation: none;
    pointer-events: none;
}

/* Flash messages stack top-right; each toast sits in the flow of the stack. */
.app-toast-stack {
    position: fixed;
    z-index: var(--z-toast);
    top: var(--space-5);
    right: var(--space-5);
    display: flex;
    width: min(28rem, calc(100vw - (var(--space-5) * 2)));
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.app-toast-stack .ui-success-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    pointer-events: auto;
}

.ui-success-card--danger .ui-success-card__icon {
    border-color: rgba(216, 79, 99, 0.28);
    color: var(--color-danger-strong);
}

.ui-success-card--warning .ui-success-card__icon {
    border-color: rgba(215, 138, 19, 0.28);
    color: var(--color-warning-strong);
}

.ui-success-card--info .ui-success-card__icon {
    color: var(--color-info-strong);
}

/* Drains over the toast's lifetime, so the reader can see when it will close. */
.ui-success-card__timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-success-strong);
    opacity: 0.55;
    transform-origin: left center;
    animation: ui-success-card-timer var(--toast-duration, 10000ms) linear both;
}

.ui-success-card--danger .ui-success-card__timer {
    background: var(--color-danger-strong);
}

.ui-success-card--warning .ui-success-card__timer {
    background: var(--color-warning-strong);
}

.ui-success-card--info .ui-success-card__timer {
    background: var(--color-info-strong);
}

@keyframes ui-success-card-timer {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-success-card__timer {
        display: none;
    }
}

@keyframes ui-success-card-in {
    from {
        opacity: 0;
        transform: translateX(calc(100% + var(--space-5)));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.is-modal-open {
    overflow: hidden;
}

.ui-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    padding: var(--space-4);
    place-items: center;
}

.ui-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--color-backdrop);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ui-modal__dialog {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    width: min(100%, 34rem);
    max-height: min(48rem, calc(100vh - 2rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-overlay);
}

.ui-modal--sm .ui-modal__dialog { width: min(100%, 27rem); }
.ui-modal--lg .ui-modal__dialog { width: min(100%, 48rem); }

.ui-modal[data-delivery-preview] {
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100dvh;
}

.ui-modal[data-delivery-preview] .ui-modal__dialog {
    max-height: min(48rem, calc(100dvh - 2rem));
}

.ui-modal__header {
    display: flex;
    padding: var(--space-5);
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.ui-modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ui-modal__description {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-modal__body {
    padding: var(--space-5);
    overflow-y: auto;
}

.ui-modal__footer {
    display: flex;
    padding: var(--space-4) var(--space-5);
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tutorial-stage {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: min(100%, 50rem);
    min-width: 0;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}

.tutorial-intro {
    flex-shrink: 0;
    padding-inline: var(--space-3);
    color: var(--color-primary-contrast);
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.tutorial-intro h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.tutorial-intro p {
    margin: var(--space-2) 0 0;
    color: inherit;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

[data-tutorial-modal] .tutorial-stage > .ui-modal__dialog { min-height: 0; }
[data-tutorial-modal].create-event-modal {
    --color-backdrop: rgba(12, 12, 16, 0.68);
    place-items: center;
}

.tutorial-header { width: 100%; min-width: 0; }
.tutorial-header__eyebrow { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; }
.tutorial-progress { display: flex; width: 7rem; margin: var(--space-2) 0 var(--space-3); padding: 0; list-style: none; }
.tutorial-progress li { display: flex; flex: 1; align-items: center; }
.tutorial-progress li:last-child { flex: 0; }
.tutorial-progress li:not(:last-child)::after { content: ""; height: 2px; flex: 1; margin: 0 5px; background: var(--color-border); }
.tutorial-progress__dot { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-surface); }
.tutorial-progress .is-reached .tutorial-progress__dot { border-color: var(--color-primary); background: var(--color-primary); }
.tutorial-progress .is-reached:not([aria-current])::after { background: var(--color-primary); }
.tutorial-actions { display: flex; width: 100%; align-items: center; gap: var(--space-3); }
.tutorial-actions__help { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.tutorial-actions__buttons { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }
.tutorial-storage { display: flex; align-items: center; gap: var(--space-3); height: 100%; }
.tutorial-storage strong, .tutorial-storage span { display: block; }
.tutorial-storage span { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.tutorial-event-summary { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tutorial-event-summary__icon { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); }
.tutorial-event-summary > div { flex: 1; min-width: 0; }
.tutorial-event-summary strong { display: block; overflow-wrap: anywhere; font-size: var(--font-size-sm); }
.tutorial-event-summary div > span { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.tutorial-event-summary > .ui-badge { flex-shrink: 0; }
.tutorial-details__section { min-width: 0; }
.tutorial-details__section-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); padding: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.tutorial-details__section-heading h3 { margin: 0; font: inherit; }
.tutorial-details__section-heading > span { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); }
.tutorial-provider-grid, .tutorial-attendee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tutorial-provider-choice { position: relative; display: flex; width: 100%; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-glass-border); border-radius: var(--radius-md); background: var(--color-layer-faint); color: var(--color-text); text-align: left; cursor: pointer; }
.tutorial-provider-choice > span { flex: 1; min-width: 0; }
.tutorial-provider-choice strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.tutorial-provider-choice small { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.tutorial-provider-choice:hover, .tutorial-provider-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.tutorial-provider-choice:focus-visible, .tutorial-provider-choice:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.tutorial-provider-choice input { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--color-primary); }
.tutorial-provider-choice:has(input) small { color: var(--color-success); }
.tutorial-provider-choice:disabled { cursor: not-allowed; opacity: 0.55; }
.tutorial-attendee-grid .form-group + .form-group { margin-top: 0; }
.tutorial-details__hint { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); }
.tutorial-details-footer { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tutorial-details-footer__links, .tutorial-details-footer__actions { display: flex; align-items: center; gap: var(--space-2); }
.tutorial-details-footer__links > a { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
@media (max-width: 640px) {
    .tutorial-details-footer { flex-direction: column-reverse; align-items: stretch; }
    .tutorial-details-footer__actions { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); }
    .tutorial-details-footer__actions .ui-button { padding-inline: var(--space-2); }
    .tutorial-details-footer__links { justify-content: space-between; }
    .tutorial-provider-choice { padding: var(--space-3); gap: var(--space-2); }
}
@media (max-width: 420px) {
    .tutorial-provider-grid, .tutorial-attendee-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .tutorial-provider-choice { padding: var(--space-3); }
    .tutorial-event-summary > .ui-badge { display: none; }
}
[data-tutorial-modal] .ui-modal__header, [data-tutorial-modal] .ui-modal__footer { flex-shrink: 0; }
[data-tutorial-modal] .ui-modal__dialog { max-height: calc(100dvh - 2rem); }
[data-tutorial-modal] .ui-modal__footer { background: var(--color-surface); }
[data-tutorial-modal] .ui-modal__body > .ui-alert { margin-bottom: 16px; }
@media (max-width: 480px) {
    [data-tutorial-modal] { padding: 10px; }
    [data-tutorial-modal] .ui-modal__dialog { max-height: calc(100dvh - 20px); }
    [data-tutorial-modal] .ui-modal__header, [data-tutorial-modal] .ui-modal__body, [data-tutorial-modal] .ui-modal__footer { padding: 16px; }
    .tutorial-actions__buttons { gap: 6px; }
    .tutorial-actions__buttons .ui-button { padding-inline: 12px; }
}

.create-event-modal .ui-modal__backdrop {
    background:
        radial-gradient(circle at 18% 12%, var(--color-primary-border), transparent 34%),
        radial-gradient(circle at 82% 86%, var(--color-layer-strong), transparent 38%),
        var(--color-backdrop);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.create-event-modal .ui-modal__dialog {
    width: min(100%, 50rem);
    max-height: min(47rem, calc(100vh - 2rem));
    max-height: min(47rem, calc(100dvh - 2rem));
    border-color: var(--color-glass-border);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 0 0, var(--color-layer-strong), transparent 36%),
        radial-gradient(circle at 100% 100%, var(--color-primary-border), transparent 42%),
        linear-gradient(145deg, var(--color-glass-strong), var(--color-glass));
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-glass-border);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
}

.create-event-modal:not([hidden]) .ui-modal__backdrop {
    animation: create-event-backdrop-in var(--transition-base) var(--ease-standard) both;
}

.create-event-modal:not([hidden]) .ui-modal__dialog {
    animation: create-event-dialog-in var(--transition-slow) var(--ease-standard) both;
}

.create-event-modal .ui-modal__header,
.create-event-modal .ui-modal__footer {
    position: relative;
    z-index: var(--z-base);
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.create-event-modal .ui-modal__header {
    padding: var(--space-4) var(--space-5) var(--space-2);
    align-items: center;
}

.create-event-modal .ui-modal__title {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-tight);
}

.create-event-modal .ui-modal__body {
    position: relative;
    padding: var(--space-2) var(--space-5) var(--space-3);
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.create-event-modal .ui-modal__footer {
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.event-composer {
    display: grid;
    gap: var(--space-3);
}

.event-composer .form-group + .form-group {
    margin-top: 0;
}

.event-composer__top-grid,
.event-composer__schedule-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.event-composer__top-grid {
    grid-template-columns: minmax(12.5rem, 0.8fr) minmax(18rem, 1.4fr);
}

.event-composer__schedule-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr);
}

.event-composer__surface {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-layer), var(--color-layer-faint));
    box-shadow: inset 0 1px 0 var(--color-glass-border);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.event-composer__surface:focus-within {
    border-color: var(--color-primary-border);
    background: var(--color-layer);
}

.event-composer__surface .form-control,
.event-composer__surface .form-select,
.event-composer__surface .form-textarea {
    min-height: var(--control-height);
    border-color: var(--color-border);
    background-color: var(--color-glass-control);
    box-shadow: inset 0 1px 0 var(--color-glass-border);
}

.event-composer__provider {
    display: grid;
    min-height: 5.375rem;
    align-content: center;
}

.event-composer__provider .form-group {
    gap: var(--space-1);
}

.event-composer__provider .form-select {
    min-height: var(--control-height-sm);
}

.event-composer__location {
    position: relative;
    z-index: 2;
    display: grid;
    /* The picker still fills the surface; the hint and error take their own rows. */
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
}

.event-composer__capacity-hint {
    display: block;
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-composer__capacity-hint[hidden] {
    display: none;
}

.event-composer__location > .form-error {
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
}

.event-location-picker {
    position: relative;
    height: 100%;
}

.event-location-picker__trigger {
    display: flex;
    height: 100%;
    min-height: 5.375rem;
    min-width: 0;
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border-radius: inherit;
    cursor: pointer;
    list-style: none;
}

.event-location-picker__trigger::-webkit-details-marker {
    display: none;
}

.event-location-picker__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.event-location-picker__trigger-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-location-picker__trigger-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: var(--space-1);
}

.event-location-picker__trigger-copy strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker__trigger-copy strong::after {
    color: var(--color-danger);
    content: " *";
}

.event-location-picker__trigger-copy small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker.has-selected-location .event-location-picker__trigger-copy strong,
.event-location-picker.has-selected-location .event-location-picker__trigger-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.event-location-picker.has-selected-location .event-location-picker__trigger-copy small {
    line-height: var(--line-height-normal);
}

.event-location-picker__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.event-location-picker[open] .event-location-picker__chevron {
    transform: rotate(180deg);
}

.event-location-picker__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    width: min(24rem, calc(100vw - 3rem));
    padding: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-popover);
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-card-glass-highlight);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    max-height: min(26rem, 60vh);
    max-height: min(26rem, 60dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.event-location-picker__search .form-control,
.event-timezone-picker__search .form-control {
    min-height: 2.375rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    box-shadow: none;
}

.event-location-picker__search .form-control:focus,
.event-timezone-picker__search .form-control:focus {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    box-shadow: 0 0 0 2px var(--color-focus);
}

.event-location-picker__section {
    display: grid;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    gap: 0.125rem;
    border-top: 1px solid var(--color-border);
}

[data-event-location-defaults][hidden],
.event-location-picker__places[hidden] {
    display: none;
}

.event-location-picker__section-title {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-location-picker__empty {
    padding: var(--space-1) var(--space-2) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-location-picker__option {
    display: flex;
    width: 100%;
    min-height: 2.375rem;
    padding: var(--space-1) var(--space-2);
    align-items: center;
    gap: var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-location-picker__option:hover,
.event-location-picker__option:focus-visible,
.event-location-picker__option.is-active {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
    outline: 0;
}

.event-location-picker__option > span:first-child {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.4375rem;
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text-soft);
}

.event-location-picker__option--zoom > span:first-child {
    background: #2d8cff;
    color: #ffffff;
}

.event-location-picker__option--meet > span:first-child {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.event-location-picker__option--teams > span:first-child {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.event-location-picker__option:disabled {
    cursor: not-allowed;
    background: transparent;
    color: var(--color-text-muted);
}

.event-location-picker__option:disabled > span:first-child {
    opacity: 0.55;
}

.event-location-picker__soon {
    margin-left: auto;
    flex: 0 0 auto;
}

.event-location-picker__places-list {
    display: grid;
    max-height: min(18rem, 40vh);
    max-height: min(18rem, 40dvh);
    gap: var(--space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-location-picker__place {
    align-items: flex-start;
}

.event-location-picker__place > span:first-child {
    margin-top: 0.0625rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-location-picker__place-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.event-location-picker__place-copy strong,
.event-location-picker__place-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker__place-copy strong {
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-location-picker__place-copy small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-location-picker__attribution {
    padding: var(--space-1) var(--space-2) 0;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: right;
    white-space: nowrap;
}

.event-location-picker__hint {
    display: flex;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    align-items: flex-start;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-location-picker__hint .ui-icon {
    margin-top: 0.0625rem;
    flex: 0 0 auto;
    color: var(--color-primary);
}

.event-composer__schedule {
    padding: var(--space-2) var(--space-3);
}

.event-composer__time-fields {
    position: relative;
    display: grid;
    padding-left: var(--space-7);
    gap: var(--space-1);
}

.event-composer__time-fields::before {
    position: absolute;
    top: 1.1875rem;
    bottom: 1.1875rem;
    left: 0.3125rem;
    width: 1px;
    background: var(--color-primary-border);
    content: "";
}

.event-composer__time-row {
    position: relative;
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-items: center;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-2);
    border: 0;
}

.event-composer__time-row::before {
    position: absolute;
    top: 50%;
    left: calc(0rem - var(--space-7));
    width: 0.625rem;
    height: 0.625rem;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-layer);
    content: "";
}

.event-composer__time-row--end::before {
    background: var(--color-glass-control);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-layer);
}

.event-composer__time-label {
    padding: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-composer__time-controls {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(9rem, 1.35fr) minmax(6.25rem, 0.65fr);
    gap: var(--space-2);
}

.event-composer__time-controls .ui-picker__trigger {
    min-height: var(--control-height-sm);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-glass-control);
    font-size: var(--font-size-xs);
}

.event-composer__time-controls .form-control {
    min-height: var(--control-height-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.event-composer__timezone {
    position: relative;
    z-index: 1;
    display: grid;
    padding: var(--space-3);
    align-content: center;
    align-items: center;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-2);
}

.event-composer__timezone-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    grid-row: 1 / span 2;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-composer__timezone .form-select {
    min-height: 1.625rem;
    padding: 0 var(--space-6) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: right center;
    box-shadow: none;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-composer__timezone .form-select:focus {
    background-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.event-timezone-control {
    position: relative;
    min-width: 0;
}

.event-timezone-picker {
    position: relative;
}

.event-timezone-picker__trigger {
    display: flex;
    min-height: 1.625rem;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    list-style: none;
}

.event-timezone-picker__trigger::-webkit-details-marker {
    display: none;
}

.event-timezone-picker__trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-timezone-picker__trigger:focus-visible {
    border-radius: var(--radius-xs);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.event-timezone-picker__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.event-timezone-picker[open] .event-timezone-picker__chevron {
    transform: rotate(180deg);
}

.event-timezone-picker__panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    z-index: var(--z-dropdown);
    width: min(28rem, calc(100vw - 3rem));
    padding: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-popover);
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-card-glass-highlight);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
}

.event-timezone-picker__options {
    display: grid;
    max-height: min(20rem, 42vh);
    max-height: min(20rem, 42dvh);
    margin-top: var(--space-3);
    gap: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-timezone-picker__group {
    display: grid;
    gap: var(--space-1);
}

.event-timezone-picker__group-title {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-timezone-picker__option {
    display: flex;
    width: 100%;
    min-height: 2.25rem;
    padding: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-xs);
    text-align: left;
}

.event-timezone-picker__option:hover,
.event-timezone-picker__option:focus-visible,
.event-timezone-picker__option.is-active {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
    outline: 0;
}

.event-timezone-picker__option.is-active::after {
    flex: 0 0 auto;
    color: var(--color-primary);
    content: "\2713";
    font-weight: var(--font-weight-bold);
}

.event-timezone-picker__empty {
    margin-top: var(--space-3);
    padding: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-composer__timezone-note {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-composer__description {
    gap: var(--space-2);
}

.event-composer__description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.event-composer__description .form-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.event-composer__ai-button {
    display: inline-flex;
    min-height: 2rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: inset 0 1px 0 var(--color-glass-border);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.event-composer__ai-button:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.event-composer__ai-button:active {
    transform: translateY(0);
}

.event-composer__ai-button:disabled {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.event-composer__ai-status {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-composer__ai-status.is-attention {
    color: var(--color-warning-strong);
}

.event-composer__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

@keyframes create-event-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes create-event-dialog-in {
    from { transform: translateY(1rem) scale(0.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Date and time pickers (x-forms.date-picker, x-forms.time-picker). The
   trigger matches form controls; the popover is a glass menu that follows the
   colour mode and the workspace accent. */
.ui-picker {
    position: relative;
    min-width: 0;
}

.ui-picker__trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-field);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: left;
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.ui-picker__trigger:hover {
    border-color: var(--color-text-faint);
}

.ui-picker__trigger:focus-visible,
.ui-picker.is-open .ui-picker__trigger {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: var(--focus-ring);
}

.ui-picker__trigger.is-invalid {
    border-color: var(--color-danger);
}

.ui-picker__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-picker__value.is-placeholder {
    color: var(--color-text-faint);
}

.ui-picker__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

/* Bare: sits inside a custom surface such as a grouped pill. */
.ui-picker--bare .ui-picker__trigger {
    height: 100%;
    min-height: inherit;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ui-picker--bare .ui-picker__trigger:focus-visible,
.ui-picker--bare.is-open .ui-picker__trigger {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    box-shadow: none;
}

.ui-picker--bare .ui-picker__trigger.is-invalid {
    color: var(--color-danger);
}

.ui-picker--bare .ui-picker__icon {
    display: none;
}

.ui-picker__popover {
    position: fixed;
    z-index: var(--z-dropdown);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius-lg);
    background: var(--color-popover);
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-card-glass-highlight);
    color: var(--color-text);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    animation: ui-picker-in var(--transition-base) var(--ease-standard) both;
}

.ui-picker__popover--date {
    width: min(18.75rem, calc(100vw - 1rem));
}

.ui-picker__popover--time {
    width: min(13.5rem, calc(100vw - 1rem));
    padding: var(--space-2);
}

/* Calendar */
.ui-picker__head {
    display: flex;
    padding: 0 var(--space-1) var(--space-2) var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ui-picker__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.ui-picker__nav {
    display: flex;
    gap: var(--space-1);
}

.ui-picker__nav-button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary);
    transition: background-color var(--transition-fast) var(--ease-standard);
}

.ui-picker__nav-button:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.ui-picker__nav-button:disabled {
    background: transparent;
    color: var(--color-text-faint);
    opacity: 0.5;
}

.ui-picker__weekdays,
.ui-picker__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ui-picker__weekdays span {
    padding: var(--space-1) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-transform: uppercase;
}

.ui-picker__week > span {
    display: grid;
    padding: 0.0625rem 0;
    place-items: center;
}

.ui-picker__day {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.ui-picker__day:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.ui-picker__day:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.ui-picker__day.is-outside {
    color: var(--color-text-faint);
}

.ui-picker__day.is-today {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.ui-picker__day.is-selected {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: var(--font-weight-semibold);
}

.ui-picker__day:disabled {
    background: transparent;
    color: var(--color-text-faint);
    opacity: 0.4;
}

.ui-picker__foot {
    display: flex;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-1) 0;
    justify-content: flex-start;
    border-top: 1px solid var(--color-border);
}

.ui-picker__link {
    min-height: 2rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-picker__link:hover {
    color: var(--color-primary-hover);
}

/* Time list */
.ui-picker__type {
    width: 100%;
    min-height: 2.375rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.ui-picker__type::placeholder {
    color: var(--color-text-muted);
}

.ui-picker__type:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-focus);
}

.ui-picker__type.is-invalid {
    box-shadow: 0 0 0 2px var(--color-danger-border);
}

.ui-picker__times {
    position: relative;
    display: grid;
    max-height: min(15rem, 45vh);
    max-height: min(15rem, 45dvh);
    margin-top: var(--space-2);
    gap: 0.0625rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.ui-picker__time {
    display: flex;
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.ui-picker__time > span {
    flex: 1 1 auto;
}

.ui-picker__time small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-picker__time .ui-icon {
    visibility: hidden;
    flex: 0 0 auto;
    color: var(--color-primary);
}

.ui-picker__time:hover,
.ui-picker__time:focus-visible,
.ui-picker__time.is-active {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    outline: 0;
}

.ui-picker__time.is-selected {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.ui-picker__time.is-selected .ui-icon {
    visibility: visible;
}

@keyframes ui-picker-in {
    from { transform: translateY(-0.25rem) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Create-event flow: a two-step sheet in the grouped-list style of the
   reference design. Fills mix from the text colour so the same rules read
   in light and dark; the accent follows the workspace accent colour. */
.event-flow-modal {
    --event-flow-fill: color-mix(in srgb, var(--color-text) 5%, transparent);
    --event-flow-fill-strong: color-mix(in srgb, var(--color-text) 8%, transparent);
    --event-flow-edge: color-mix(in srgb, var(--color-text) 10%, transparent);
    --event-flow-gutter: var(--space-7);
}

.event-flow-modal .ui-modal__backdrop {
    backdrop-filter: blur(22px) saturate(120%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
}

.event-flow-modal .ui-modal__dialog {
    width: min(100%, 35rem);
    max-height: min(54rem, calc(100vh - 2rem));
    max-height: min(54rem, calc(100dvh - 2rem));
    border: 1px solid var(--event-flow-edge);
    border-radius: 1.75rem;
    background:
        linear-gradient(180deg, var(--color-popover), var(--color-popover-strong));
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-card-glass-highlight);
}

.event-flow {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-flow__step {
    display: grid;
    padding: 0 var(--event-flow-gutter) var(--event-flow-gutter);
    gap: var(--space-4);
}

.event-flow__step:not([hidden]) {
    animation: event-flow-step-in var(--transition-slow) var(--ease-standard) both;
}

.event-flow__bar {
    display: grid;
    min-height: 3.5rem;
    margin: 0 calc(var(--space-2) * -1);
    padding-top: var(--space-2);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-2);
}

.event-flow__bar-end {
    display: flex;
    justify-content: flex-end;
}

.event-flow__counter {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.event-flow__link {
    display: inline-flex;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2);
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: opacity var(--transition-fast) var(--ease-standard);
}

.event-flow__link:hover {
    opacity: 0.68;
}

.event-flow__back .ui-icon {
    margin-left: calc(var(--space-1) * -1);
}

.event-flow__intro {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
}

.event-flow__intro--compact {
    margin-top: calc(var(--space-2) * -1);
}

.event-flow__intro--details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: left;
}

.event-flow__email-quality {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.event-flow__email-quality-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.event-flow__email-quality .form-toggle {
    gap: 0;
}

.event-flow__brand {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-2);
    place-items: center;
    border-radius: 0.875rem;
    background: var(--color-primary);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* The charcoal Bloomod mark is rendered solid black on the accent tile, as in
   the reference, whatever the colour mode. */
.event-flow__brand-mark {
    display: block;
    width: 62%;
    height: 62%;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.9;
}

.event-flow__tile--brand .event-flow__brand-mark {
    width: 66%;
    height: 66%;
}

.event-flow__eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-flow__title {
    color: var(--color-text);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    line-height: var(--line-height-tight);
    outline: 0;
}

.event-flow__lede {
    max-width: 27rem;
    color: var(--color-text-soft);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
}

.event-flow__alert {
    margin: 0;
}

.event-flow__alert .ui-alert__message p + p {
    margin-top: var(--space-1);
}

/* Grouped list surface */
.event-flow__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--event-flow-edge);
    border-radius: var(--radius-lg);
    background: var(--event-flow-fill);
}

/* Delivery choices */
.event-flow__choice {
    position: relative;
    display: flex;
    min-height: 4.125rem;
    align-items: center;
    transition: background-color var(--transition-fast) var(--ease-standard);
}

.event-flow__choice:first-of-type {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.event-flow__choice:last-of-type {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.event-flow__choice + .event-flow__choice::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 4.375rem;
    height: 1px;
    background: var(--color-border);
    content: "";
}

.event-flow__choice:has(.event-flow__radio:checked) {
    background: var(--event-flow-fill);
}

.event-flow__choice:hover:not(.is-unavailable) {
    background: var(--event-flow-fill-strong);
}

.event-flow__choice:has(.event-flow__radio:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.event-flow__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.event-flow__choice-label {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    padding: var(--space-3) var(--space-4);
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
}

.event-flow__choice.is-unavailable .event-flow__choice-label {
    cursor: not-allowed;
    opacity: 0.56;
}

.event-flow__tile {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.5625rem;
    background: var(--event-flow-fill-strong);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.event-flow__tile--brand {
    background: var(--color-primary);
}

.event-flow__choice-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.event-flow__choice-copy strong {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.event-flow__choice-copy small {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.event-flow__choice-end {
    display: flex;
    padding-right: var(--space-4);
    align-items: center;
}

.event-flow__check {
    display: none;
    color: var(--color-primary);
}

.event-flow__choice:has(.event-flow__radio:checked) .event-flow__check {
    display: block;
}

.event-flow__choice:has(.event-flow__radio:checked) .event-flow__connect {
    display: none;
}

.event-flow__connect {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-1);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.event-flow__connect:hover {
    color: var(--color-primary-hover);
}

.event-flow__note,
.event-flow__hint {
    padding: 0 var(--space-1);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.event-flow__hint {
    text-align: center;
}

.event-flow__field-note {
    margin-top: calc(var(--space-2) * -1);
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Actions */
.event-flow__actions {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
}

.event-flow__primary {
    display: inline-flex;
    width: 100%;
    min-height: 3.25rem;
    padding: 0 var(--space-5);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-action);
    color: var(--color-action-contrast);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-flow__primary:hover {
    background: var(--color-action-hover);
}

.event-flow__primary:active {
    background: var(--color-action-active);
    transform: scale(0.99);
}

.event-flow__primary.is-loading,
.event-flow__secondary.is-loading {
    cursor: progress;
    opacity: 0.72;
}

.event-flow__secondary {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.event-flow__secondary:hover {
    opacity: 0.68;
}

.event-flow__kbd {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.event-flow__kbd kbd {
    display: inline-block;
    margin: 0 var(--space-1);
    padding: 0.0625rem var(--space-2);
    border: 1px solid var(--event-flow-edge);
    border-radius: var(--radius-xs);
    background: var(--event-flow-fill);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--font-weight-medium);
}

/* Detail rows */
.event-flow__row {
    display: grid;
    min-height: 3.25rem;
    padding: 0 var(--space-4);
    align-items: center;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-3);
}

.event-flow__row + .event-flow__row {
    background-image: linear-gradient(var(--color-border), var(--color-border));
    background-position: right top;
    background-repeat: no-repeat;
    background-size: calc(100% - var(--space-4)) 1px;
}

.event-flow__row-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-base);
    transition: color var(--transition-fast) var(--ease-standard);
}

.event-flow__row:focus-within > .event-flow__row-label,
.event-flow__description:focus-within .event-flow__row-label {
    color: var(--color-primary);
}

.event-flow__row-field {
    position: relative;
    min-width: 0;
}

.event-flow .event-flow__input,
.event-flow .event-flow__textarea {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.event-flow .event-flow__input:focus,
.event-flow .event-flow__textarea:focus {
    background: transparent;
    box-shadow: none;
}

.event-flow .event-flow__input::placeholder,
.event-flow .event-flow__textarea::placeholder {
    color: var(--color-text-muted);
}

.event-flow .event-flow__input.is-invalid,
.event-flow .event-flow__textarea.is-invalid {
    color: var(--color-danger);
}

.event-flow .event-flow__input--title {
    height: 3.25rem;
    font-weight: var(--font-weight-semibold);
}

/* Location row reuses the shared picker as an inline row value. */
.event-flow__row--location .event-location-picker__trigger {
    min-height: 3.25rem;
    padding: var(--space-2) 0;
    gap: var(--space-2);
}

.event-flow__row--location .event-location-picker__trigger-icon,
.event-flow__row--location .event-location-picker.is-empty .event-location-picker__trigger-copy small {
    display: none;
}

.event-flow__row--location .event-location-picker__trigger-copy strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
}

.event-flow__row--location .event-location-picker__trigger-copy strong::after {
    content: none;
}

.event-flow__row--location .event-location-picker.is-empty .event-location-picker__trigger-copy strong {
    color: var(--color-text-muted);
}

.event-flow__row--location .event-location-picker__panel {
    right: calc(var(--space-2) * -1);
    top: calc(100% + var(--space-1));
}

/* Schedule */
.event-flow__schedule {
    padding-top: var(--space-3);
}

.event-flow__times {
    display: grid;
    padding: 0 var(--space-4) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.event-flow__time {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.event-flow__time-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.event-flow__time-pill {
    display: grid;
    min-height: 2.75rem;
    overflow: hidden;
    align-items: center;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border-radius: var(--radius-md);
    background: var(--event-flow-fill-strong);
    transition: box-shadow var(--transition-fast) var(--ease-standard);
}

.event-flow__time-pill:focus-within {
    box-shadow: 0 0 0 2px var(--color-focus);
}

.event-flow__time-pill .ui-picker {
    height: 100%;
    min-height: 2.75rem;
}

.event-flow__time-pill .ui-picker__trigger {
    font-size: var(--font-size-base);
}

.event-flow__time-pill .ui-picker--time {
    border-left: 1px solid var(--color-border);
}

/* Without JavaScript the native controls stay usable inside the pill. */
.event-flow__time-pill .ui-picker__native:not(.util-sr-only) {
    height: 2.75rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.event-flow__row--timezone {
    border-top: 1px solid var(--color-border);
    background-image: none;
}

.event-flow__row--timezone .event-timezone-picker__trigger {
    min-height: 3.25rem;
    justify-content: flex-end;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
}

.event-flow__row--timezone .event-timezone-picker__chevron {
    transform: rotate(-90deg);
}

.event-flow__row--timezone .event-timezone-picker[open] .event-timezone-picker__chevron {
    transform: rotate(0deg);
}

.event-flow__row--timezone .event-timezone-picker__panel {
    top: calc(100% + var(--space-1));
    right: calc(var(--space-2) * -1);
}

.event-flow__row--timezone .form-select {
    min-height: 3.25rem;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: var(--font-size-base);
    text-align: right;
}

/* Description */
.event-flow__description {
    display: grid;
    padding: var(--space-4);
    gap: var(--space-3);
}

.event-flow__description-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-flow__ai {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-1);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.event-flow__ai:hover {
    color: var(--color-primary-hover);
}

.event-flow__ai:disabled {
    color: var(--color-text-muted);
    cursor: wait;
}

.event-flow .event-flow__textarea {
    min-height: 4.5rem;
    line-height: var(--line-height-normal);
    resize: vertical;
}

@keyframes event-flow-step-in {
    from { transform: translateX(0.75rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 767px) {
    .event-flow-modal {
        --event-flow-gutter: var(--space-4);
    }

    .event-flow-modal .ui-modal__dialog {
        border-radius: 1.5rem 1.5rem var(--radius-lg) var(--radius-lg);
    }

    .event-flow__title {
        font-size: var(--font-size-2xl);
    }

    .event-flow__row {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .event-flow__row--location .event-location-picker__panel,
    .event-flow__row--timezone .event-timezone-picker__panel {
        position: static;
        width: auto;
        margin: 0 0 var(--space-3);
    }

    .event-flow__kbd {
        display: none;
    }
}

@media (max-width: 560px) {
    .event-flow__times {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .event-flow__choice-label {
        gap: var(--space-3);
    }

    .event-flow__choice + .event-flow__choice::before {
        left: 3.875rem;
    }
}

.event-overview-page {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.event-overview__tab-panel {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
}

.event-overview__tab-panel[hidden] {
    display: none;
}

.event-overview__focused-panel {
    width: min(100%, 52rem);
    margin-right: auto;
    margin-left: auto;
}

.event-overview__focused-panel--wide {
    width: min(100%, 68rem);
}

.event-overview__focused-panel--fluid {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.event-overview__integrations-workspace {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
}

.event-overview__board {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-items: stretch;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Event overview masthead: page title, compact rate summaries, and headline
 * counts, laid out as one band above the board.
 */

.event-overview__masthead {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-items: end;
    column-gap: var(--space-5);
    row-gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
        "crumbs back"
        "lead   stats";
}

.event-overview__masthead > .ui-breadcrumbs {
    grid-area: crumbs;
    margin-bottom: 0;
    align-self: start;
}

/* The back link shares the breadcrumb row, so the header has no extra line of chrome. */
.event-overview__masthead-back {
    grid-area: back;
    justify-self: end;
    align-self: center;
}

.event-overview__masthead-lead {
    display: grid;
    min-width: 0;
    gap: 0;
    grid-area: lead;
}

.event-overview__masthead-title {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.event-overview__masthead-title h1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.delivery-preview {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
}

.delivery-preview__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-1);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.delivery-preview__figure {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.delivery-preview__caption {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.delivery-preview__stats {
    /* Flex, not grid: a stat that folds onto a second row stretches to fill it,
       so long numbers never leave an empty cell behind. The 1px gaps show the
       container colour, which is what draws the dividers. */
    display: flex;
    width: 100%;
    margin: var(--space-2) 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-border);
    flex-wrap: wrap;
    gap: 1px;
    overflow: hidden;
}

.delivery-preview__stat {
    display: grid;
    min-width: 0;
    padding: var(--space-3) var(--space-2);
    flex: 1 1 6.5rem;
    background: var(--color-surface);
    gap: var(--space-1);
}

.delivery-preview__stat dt {
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.delivery-preview__stat dd {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.delivery-preview__stat--pending dd {
    color: var(--color-warning-strong);
}

.delivery-preview__note {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.ui-page-header__title-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.event-delivery-badges {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.event-delivery-badge {
    max-width: 100%;
    white-space: normal;
}

.event-delivery-badge__info {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    opacity: 0.75;
}

.event-delivery-badge__info:hover,
.event-delivery-badge__info:focus-visible {
    opacity: 1;
}

/* Calendar send progress. Takes the full width the four rate tracks occupied,
   with a taller bar so it reads as the page's primary state while sending. */
.event-delivery-progress {
    display: grid;
    min-width: 0;
    margin-top: var(--space-4);
    gap: var(--space-3);
}

.event-delivery-progress__item {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

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

.event-delivery-progress__label {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-delivery-progress__value {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.event-delivery-progress__bar {
    position: relative;
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    overflow: hidden;
}

.event-delivery-progress__fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background-image: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-primary-active) 50%,
        var(--color-primary) 100%
    );
    background-size: 200% 100%;
    animation: delivery-progress-drift 3s linear infinite;
    transition: width var(--transition-slow, 0.6s) ease;
}

/* The sheen is what makes a slow queue look alive between polls. */
.event-delivery-progress__fill::after {
    position: absolute;
    background-image: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 100%
    );
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: delivery-progress-sheen 2.4s ease-in-out infinite;
    content: '';
    inset: 0;
}

.event-delivery-progress__count {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.event-delivery-progress__item.is-paused .event-delivery-progress__fill {
    background-image: linear-gradient(
        90deg,
        var(--color-warning) 0%,
        var(--color-warning-strong) 50%,
        var(--color-warning) 100%
    );
}

.event-delivery-progress__item.is-paused .event-delivery-progress__count,
.event-delivery-progress__item.is-paused .event-delivery-progress__value {
    color: var(--color-warning-strong);
}

@keyframes delivery-progress-drift {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@keyframes delivery-progress-sheen {
    from {
        background-position: -60% 0;
    }

    to {
        background-position: 160% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-delivery-progress__fill,
    .event-delivery-progress__fill::after {
        animation: none;
    }

    .event-delivery-progress__fill::after {
        opacity: 0;
    }
}

.event-overview__tracks {
    display: grid;
    min-width: 0;
    margin-top: var(--space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
}

.event-overview__masthead {
    --metrics-label-line: 1.0625rem;
    --metrics-value-line: 2rem;
}

.event-overview__track {
    display: grid;
    min-width: 0;
    grid-template-rows: auto 1fr 0.25rem auto;
    gap: var(--space-1);
}

.event-overview__track-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--metrics-label-line);
    overflow-wrap: anywhere;
}

/* The empty part of the track has to stay legible on its own, because a stage
   sitting at 0% is nothing but empty track. --color-surface-muted sat too close
   to the page in both themes to read as a bar at all. */
.event-overview__track-bar {
    position: relative;
    display: flex;
    min-width: 0;
    height: 0.25rem;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.event-overview__track-bar > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/*
 * One hue per funnel stage, so a glance at the rail says which stage a bar
 * belongs to. Stage 1 is the whole audience and stays monochrome ink; the three
 * stages Bloomod actually acts on each carry their own colour. Nothing here is
 * grey any more -- a grey fill was indistinguishable from the empty track
 * behind it.
 */
.event-overview__track-fill {
    fill: var(--color-text);
}

/* On the list: everyone, before Bloomod has done anything. */
.event-overview__track-bar.is-total .event-overview__track-fill {
    fill: var(--color-text);
}

/* Verified: an identity Bloomod confirmed. */
.event-overview__track-bar.is-verified .event-overview__track-fill {
    fill: var(--color-info);
}

/* Invited: a calendar invitation Bloomod delivered. */
.event-overview__track-bar.is-invited .event-overview__track-fill {
    fill: var(--color-primary);
}

/* Replied: the attendee answered. */
.event-overview__track-bar.is-replied .event-overview__track-fill {
    fill: var(--color-warning);
}

.event-overview__track-head {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-overview__track-value {
    line-height: var(--metrics-label-line);
}

.event-overview__track-value {
    flex: 0 0 auto;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
}

.event-overview__track-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .event-overview__tracks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Headline counts remain a separate group beside the compact rate summaries.
 */

/*
    Slim status strip that owns its own row directly under a page header. It never
    competes with the title or the action buttons for horizontal space, so it stays
    aligned with the page body at every width.
*/
.event-notice {
    display: flex;
    min-width: 0;
    margin: 0 var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    border: 1px solid rgba(215, 138, 19, 0.2);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

.event-notice--info {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-text);
}

/* A provider call that failed outright, rather than work still queued. */
.event-notice--danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.event-notice__label {
    display: flex;
    min-width: 0;
    flex: 1 1 16rem;
    align-items: center;
    gap: var(--space-2);
}

.event-notice__label strong {
    font-weight: var(--font-weight-semibold);
}

.event-notice__detail {
    color: inherit;
    opacity: 0.85;
}

.event-notice__actions {
    display: flex;
    min-width: 0;
    margin-left: auto;
    align-items: center;
    gap: var(--space-2);
}

.event-notice__info {
    display: inline-flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--transition-fast) var(--ease-standard);
}

.event-notice__info:hover,
.event-notice__info:focus-visible {
    opacity: 1;
}

.event-overview__stats {
    display: grid;
    min-width: 0;
    margin: 0;
    padding-left: var(--space-4);
    align-content: end;
    border-left: 1px solid var(--color-border);
    gap: var(--space-3);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-area: stats;
}

.event-overview__stat {
    display: grid;
    min-width: 0;
    align-content: end;
    gap: var(--space-1);
}

.event-overview__stat + .event-overview__stat {
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

.event-overview__stat dt {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--metrics-label-line);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__stat dd {
    display: flex;
    min-width: 0;
    height: var(--metrics-value-line);
    margin: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-overview__stat-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__stat strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
    text-overflow: ellipsis;
}

/* Card chrome shared by the board modules: corner jump link and headline figure. */

.event-overview__card-tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-overview__card-tools form {
    margin: 0;
}

.event-overview__card-jump {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-soft);
    transition: background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-overview__card-jump:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__card-jump:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.event-overview__card-figure {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.event-overview__headline {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-3);
}

.event-overview__headline strong {
    color: var(--color-text);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-display);
    line-height: 1;
}

.event-overview__headline span {
    max-width: 7.5rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

/* One neutral card, two readable sections without nested card borders. */
.event-overview__engagement-card {
    min-width: 0;
    min-height: 0;
    grid-column: span 2;
}

.event-overview__card.event-overview__engagement-card.ui-card--compact > .ui-card__body {
    display: grid;
    height: 100%;
    padding: var(--space-3);
    align-content: start;
    gap: var(--space-4) var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
}

/* Public reach spans under both response panes, separated by a hairline so the
   card reads as one surface rather than three stacked boxes. */
.event-overview__engagement-card .event-overview__reach {
    grid-column: 1 / -1;
    min-width: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ---- engagement panes ---- */

.event-overview__pane {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
}

.event-overview__pane-head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-overview__pane-title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.event-overview__pane-sub {
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__pane-rate {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
}

.event-overview__pane-rate strong {
    color: var(--color-text);
    font-size: clamp(1.75rem, 3vh, 2.25rem);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.05;
}

.event-overview__pane-rate strong small {
    margin-left: 0.1rem;
    color: var(--color-text-muted);
    font-size: 0.5em;
    font-weight: var(--font-weight-medium);
}

.event-overview__pane-rate > span {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.event-overview__pane-rate em {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.event-overview__pane-bar .ui-progress__header,
.event-overview__pane-bar .ui-progress__scale {
    display: none;
}

.event-overview__pane-bar .ui-progress__segments {
    height: 0.5rem;
    border-radius: var(--radius-pill);
}

.event-overview__pane-legend {
    display: grid;
    min-width: 0;
    gap: var(--space-1) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__pane-legend > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-overview__pane-legend dt {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__pane-legend dd {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.event-overview__pane-empty {
    padding: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__pane-foot {
    display: flex;
    margin-top: auto;
    padding-top: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-overview__pane-foot strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* ---- public reach ---- */

.event-overview__reach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-overview__reach-stats {
    display: grid;
    margin-top: var(--space-3);
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.event-overview__reach-stats dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.event-overview__reach-stats dd {
    display: grid;
    margin-top: 0.2rem;
    gap: 0.1rem;
}

.event-overview__reach-stats dd strong {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.event-overview__reach-stats dd span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-overview__reach-link {
    display: flex;
    min-width: 0;
    margin-top: var(--space-3);
    padding: var(--space-2);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.event-overview__reach-link-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.event-overview__reach-url {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__reach-empty {
    display: flex;
    min-width: 0;
    margin-top: var(--space-3);
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__reach-empty .ui-icon {
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

/* ---- recent activity ---- */

.event-overview__activity-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
}

.event-overview__activity-item {
    display: flex;
    min-width: 0;
    padding-bottom: var(--space-3);
    align-items: flex-start;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.event-overview__activity-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.event-overview__activity-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.event-overview__activity-body {
    min-width: 0;
}

.event-overview__activity-message {
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
}

.event-overview__activity-meta {
    display: flex;
    margin-top: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-overview__activity-empty {
    display: flex;
    padding: var(--space-4);
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__activity-empty .ui-icon {
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

@media (max-width: 62rem) {
    .event-overview__card.event-overview__engagement-card.ui-card--compact > .ui-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-overview__pane-legend {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    }
}

.event-overview__engagement-card > .ui-card__body > .event-overview__card {
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.event-overview__engagement-card .event-overview__module-card.ui-card--compact > .ui-card__header {
    padding: 0 0 var(--space-3);
}

.event-overview__engagement-card .event-overview__module-card.ui-card--compact > .ui-card__body {
    padding: 0;
}

.event-overview__engagement-rate {
    padding: var(--space-1) 0 var(--space-3);
}

.event-overview__engagement-rate > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.event-overview__engagement-rate strong {
    color: var(--color-text);
    font-size: clamp(2rem, 3.5vh, 2.5rem);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.1;
}

.event-overview__engagement-rate strong small {
    margin-left: 0.125rem;
    color: var(--color-text-muted);
    font-size: 0.55em;
    font-weight: var(--font-weight-medium);
}

.event-overview__engagement-rate > div > span {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-overview__engagement-rate p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.event-overview__engagement-legend {
    display: grid;
    margin: 0;
    gap: var(--space-1);
}

.event-overview__engagement-legend > div {
    display: flex;
    min-width: 0;
    min-height: 1.875rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-overview__engagement-legend dt {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.event-overview__engagement-legend .ui-progress__legend-dot {
    display: inline-block;
    flex: 0 0 auto;
}

.event-overview__engagement-legend dd {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    align-items: baseline;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.event-overview__engagement-legend dd strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-overview__engagement-legend dd span {
    min-width: 4ch;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-overview__engagement-card .event-overview__engagement-footer {
    border: 0;
    padding-top: var(--space-3);
    gap: var(--space-2);
}

/* RSVP bar chart. */

.event-overview__chart {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: var(--space-3);
    align-items: end;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-overview__chart-col {
    position: relative;
    display: grid;
    min-width: 0;
    height: 100%;
    align-content: end;
    justify-items: center;
    gap: var(--space-1);
    grid-template-rows: minmax(0, 1fr) auto auto;
}

.event-overview__chart-flag {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-page);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    transform: translateX(-50%);
}

.event-overview__chart-bar {
    display: flex;
    width: 0.5rem;
    height: 100%;
    align-items: flex-end;
    justify-self: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.event-overview__chart-bar > span {
    display: block;
    width: 100%;
    min-height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.event-overview__chart-col.is-accent .event-overview__chart-bar > span {
    background: var(--color-text);
}

.event-overview__chart-col.is-soft .event-overview__chart-bar > span {
    background: var(--color-primary);
}

.event-overview__chart-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-faint);
}

.event-overview__chart-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

/* Verification dial. */

.event-overview__dial {
    position: relative;
    display: grid;
    min-height: 6rem;
    overflow: hidden;
    flex: 1 1 auto;
    place-items: center;
}

.event-overview__dial > svg {
    width: min(100%, 9.5rem);
    max-width: 100%;
    height: auto;
    max-height: 100%;
    transform: rotate(-90deg);
}

.event-overview__dial-ticks {
    fill: none;
    stroke: var(--color-neutral);
    stroke-dasharray: 0.5 5.2;
    stroke-linecap: round;
    stroke-width: 4;
}

.event-overview__dial-track {
    fill: none;
    stroke: var(--color-surface-muted);
    stroke-width: 10;
}

.event-overview__dial-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-width: 10;
}

.event-overview__dial-copy {
    position: absolute;
    display: grid;
    justify-items: center;
    text-align: center;
}

.event-overview__dial-copy strong {
    color: var(--color-text);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.event-overview__dial-copy span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__pill-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-3);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.event-overview__pill {
    display: inline-flex;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.event-overview__pill strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-overview__pill.is-verified {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.event-overview__pill.is-verified strong {
    color: var(--color-success-strong);
}

.event-overview__pill.is-pending {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.event-overview__pill.is-pending strong {
    color: var(--color-warning-strong);
}

/* Public page disclosure list. */

.event-overview__disclosure-list {
    display: grid;
    min-width: 0;
    align-content: start;
}

.event-overview__disclosure + .event-overview__disclosure {
    border-top: 1px solid var(--color-border);
}

.event-overview__disclosure > summary {
    display: flex;
    min-width: 0;
    padding: var(--space-3) 0;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
}

.event-overview__disclosure > summary::-webkit-details-marker {
    display: none;
}

.event-overview__disclosure > summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.event-overview__disclosure-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__disclosure-caret {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.event-overview__disclosure[open] .event-overview__disclosure-caret {
    transform: rotate(180deg);
}

.event-overview__disclosure-body {
    display: flex;
    min-width: 0;
    padding: var(--space-2);
    margin-bottom: var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__disclosure-body > div {
    min-width: 0;
    flex: 1;
}

.event-overview__disclosure-body strong {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__disclosure-body p {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Delivery funnel segments: four equal columns on shared baselines. */

.event-overview__segments {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-overview__segment {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
    grid-template-rows: auto auto auto;
    text-align: center;
}

.event-overview__segment-value {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.event-overview__segment-bar {
    display: block;
    height: 1.75rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.event-overview__segment-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-text);
}

.event-overview__segment-label {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Delivery panel: "Reminders & sending" and "Calendar & sync" share one
 * full-height card in the board's last column, split into two labelled
 * sections. It is the board's dark anchor opposite the Event details card.
 */

/*
 * The panel's ink is mixed from the active accent, so switching the accent in
 * Appearance retints the whole surface. The plain values are the fallback for
 * browsers without color-mix().
 */
.event-overview__card.event-overview__delivery-card,
.event-overview__card.event-overview__event-summary {
    --event-panel-surface: #14151f;
    --event-panel-surface: color-mix(in srgb, var(--color-primary) 13%, #101018);
    --event-panel-row: #1c1d2b;
    --event-panel-row: color-mix(in srgb, var(--color-primary) 17%, #191a24);
    --event-panel-glow: rgba(255, 255, 255, 0.07);
    --event-panel-glow: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --event-panel-border: rgba(167, 166, 195, 0.18);
    --event-panel-border: color-mix(in srgb, var(--color-primary) 24%, rgba(255, 255, 255, 0.14));
    --event-panel-text: #f7f6ff;
    --event-panel-muted: #aaa9bd;
    --event-panel-muted: color-mix(in srgb, var(--color-primary) 16%, #adacbe);
    --event-panel-accent: #b7a2ff;
    --event-panel-accent: color-mix(in srgb, var(--color-primary) 62%, #ffffff);
    display: flex;
    flex-direction: column;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-2xl);
    background: var(--event-panel-surface);
    box-shadow: 0 1.35rem 3.4rem rgba(15, 16, 29, 0.2);
    color: var(--event-panel-text);
}

.event-overview__delivery-card > .ui-card__body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.event-overview__delivery {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-4);
}

.event-overview__delivery > section {
    display: flex;
    min-height: 0;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--space-2);
}

.event-overview__delivery > section + section {
    padding-top: var(--space-4);
    border-top: 1px solid var(--event-panel-border);
}

.event-overview__delivery .event-overview__sync-card {
    min-height: 0;
    flex: 1 1 auto;
}

.event-overview__section-head {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-overview__section-head > div {
    min-width: 0;
}

.event-overview__section-head h3 {
    overflow: hidden;
    color: var(--event-panel-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__section-head p {
    overflow: hidden;
    color: var(--event-panel-muted);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__delivery .event-overview__card-figure {
    flex: 0 0 auto;
    color: var(--event-panel-text);
    font-size: var(--font-size-2xl);
    line-height: 1;
}

.event-overview__delivery .event-overview__meta-row strong {
    color: var(--event-panel-text);
}

.event-overview__delivery .event-overview__meta-row {
    padding-top: var(--space-1);
    border-top: 0;
    color: var(--event-panel-muted);
}

.event-overview__delivery .event-overview__sync-card .event-overview__meta-row {
    padding-top: var(--space-3);
    border-top: 1px solid var(--event-panel-border);
}

.event-overview__delivery .event-overview__accent-link {
    color: var(--event-panel-accent);
}

.event-overview__delivery .event-overview__accent-link:hover {
    color: color-mix(in srgb, var(--event-panel-accent) 70%, #ffffff);
}

/* The funnel ramp inverts on the dark panel: quiet, bright, mid, faint. */

.event-overview__delivery .event-overview__segment-value {
    color: var(--event-panel-text);
}

.event-overview__delivery .event-overview__segment-label {
    color: var(--event-panel-muted);
}

.event-overview__delivery .event-overview__segment-bar {
    background: var(--event-panel-glow);
}

.event-overview__delivery .event-overview__segment-fill.is-step-0 {
    background: var(--event-panel-accent);
}

.event-overview__delivery .event-overview__segment-fill.is-step-1 {
    background: var(--event-panel-text);
}

.event-overview__delivery .event-overview__segment-fill.is-step-2 {
    background: rgba(247, 246, 255, 0.72);
}

.event-overview__delivery .event-overview__segment-fill.is-step-3 {
    background: rgba(247, 246, 255, 0.48);
}

.event-overview__task-list {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-content: start;
    gap: var(--space-2);
    list-style: none;
}

.event-overview__sync-card .event-overview__task-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.event-overview__task {
    display: flex;
    min-width: 0;
    padding: var(--space-2);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--event-panel-row);
}

.event-overview__task > div {
    min-width: 0;
    flex: 1;
}

.event-overview__task strong {
    display: block;
    overflow: hidden;
    color: var(--event-panel-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__task p {
    overflow: hidden;
    color: var(--event-panel-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__task form {
    margin: 0;
}

.event-overview__task-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--event-panel-glow);
    color: var(--event-panel-text);
}

.event-overview__task-check {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--event-panel-border);
    border-radius: var(--radius-pill);
    color: transparent;
}

.event-overview__task.is-done .event-overview__task-check {
    border-color: rgba(69, 200, 149, 0.38);
    background: rgba(69, 200, 149, 0.16);
    color: #45c895;
}

/* Week agenda: the Event drawn on a day-and-hour grid. */

.event-overview__agenda-card {
    display: flex;
    flex-direction: column;
}

.event-overview__agenda-card .ui-card__body {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.event-overview__agenda-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-overview__agenda-head h3 {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__month-chip {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-decoration: none;
    white-space: nowrap;
}

.event-overview__month-chip:hover {
    background: var(--color-control-hover);
    color: var(--color-text);
}

.event-overview__agenda {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    margin-top: var(--space-3);
    flex-direction: column;
}

.event-overview__agenda-days,
.event-overview__agenda-columns {
    display: grid;
    min-width: 0;
    grid-template-columns: 2.75rem repeat(7, minmax(0, 1fr));
}

.event-overview__agenda-day {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    padding-bottom: var(--space-2);
    color: var(--color-text-muted);
}

.event-overview__agenda-day em {
    font-size: var(--font-size-2xs);
    font-style: normal;
}

.event-overview__agenda-day strong {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.event-overview__agenda-day.is-current strong {
    display: grid;
    width: 1.625rem;
    height: 1.625rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.event-overview__agenda-grid {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 2.75rem minmax(0, 1fr);
}

.event-overview__agenda-hours {
    display: grid;
    min-height: 0;
    padding-right: var(--space-2);
    text-align: right;
}

.event-overview__agenda-hours span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    line-height: 1;
    transform: translateY(-0.35em);
}

.event-overview__agenda-canvas {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.event-overview__agenda-rule {
    position: absolute;
    right: 0;
    left: 0;
    border-bottom: 1px dashed var(--color-border);
}

.event-overview__agenda-columns {
    position: absolute;
    inset: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.event-overview__agenda-columns > span + span {
    border-left: 1px solid var(--color-border);
}

.event-overview__agenda-columns > span.is-current {
    background: var(--color-layer-soft);
}

.event-overview__agenda-block {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 4rem;
    padding: var(--space-2);
    margin: 0 0.125rem;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
}

.event-overview__agenda-block strong {
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__agenda-block p {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__agenda-block .event-overview__attendee-preview {
    margin-top: var(--space-1);
}

.event-overview__agenda-block .event-overview__attendee-avatar,
.event-overview__agenda-block .event-overview__attendee-more {
    width: 1.375rem;
    height: 1.375rem;
    border-color: var(--color-primary);
    font-size: 0.5625rem;
}

.event-overview__card {
    height: 100%;
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.event-overview__card.ui-card--compact .ui-card__header {
    min-width: 0;
    padding: var(--space-3) var(--space-3) 0;
}

.event-overview__card.ui-card--compact .ui-card__body {
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.event-overview__card .ui-card__header > div {
    min-width: 0;
}

.event-overview__card .ui-card__title {
    font-size: var(--font-size-sm);
}

.event-overview__card .ui-card__subtitle {
    margin-top: 0;
    font-size: var(--font-size-2xs);
}

.event-overview__main-card,
.app-page--event-overview .event-overview__delivery-card {
    --event-reference-pad: clamp(1rem, 2.1vh, 1.5rem);
    --event-reference-gap: clamp(0.45rem, 0.95vh, 0.8rem);
}

.event-overview__main-card {
    --event-reference-surface: #10111f;
    --event-reference-surface-soft: #191a2a;
    --event-reference-border: rgba(167, 166, 195, 0.18);
    --event-reference-text: #f7f6ff;
    --event-reference-muted: #aaa9bd;
    --event-reference-accent: #f43d91;
    --event-reference-icon: clamp(1.75rem, 3.4vh, 2.4rem);
    --event-reference-title: clamp(0.9375rem, 1.85vh, 1.3rem);
    --event-reference-body: clamp(0.75rem, 1.35vh, 0.9375rem);
    --event-reference-label: clamp(0.6875rem, 1.2vh, 0.8125rem);
    --event-reference-action: clamp(2rem, 3.4vh, 2.75rem);
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 8% 5%, rgba(64, 68, 112, 0.08), transparent 34%),
        var(--event-reference-surface);
    box-shadow: 0 1.35rem 3.4rem rgba(15, 16, 29, 0.2);
    color: var(--event-reference-text);
    backdrop-filter: blur(24px) saturate(115%);
    -webkit-backdrop-filter: blur(24px) saturate(115%);
}

.event-overview__main-card.ui-card--compact > .ui-card__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--event-reference-pad);
    flex-direction: column;
}

.event-overview__reference-header,
.event-overview__reference-actions {
    flex: 0 0 auto;
}

.event-overview__reference-scroll {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.event-overview__main-card .ui-icon--lg {
    width: clamp(0.9375rem, calc(var(--event-reference-icon) * 0.48), 1.375rem);
    height: clamp(0.9375rem, calc(var(--event-reference-icon) * 0.48), 1.375rem);
}

.event-overview__reference-header {
    display: flex;
    align-items: center;
    gap: var(--event-reference-gap);
}

.event-overview__reference-header h2 {
    color: var(--event-reference-text);
    font-size: var(--event-reference-title);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-overview__reference-header h2 > span {
    color: var(--event-reference-muted);
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-back {
    display: inline-grid;
    width: var(--event-reference-icon);
    height: var(--event-reference-icon);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--event-reference-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 0 0.85rem rgba(255, 255, 255, 0.018);
    color: var(--event-reference-muted);
    transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-overview__reference-back:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
    color: var(--event-reference-text);
}

.event-overview__reference-back:focus-visible,
.event-overview__reference-action:focus-visible {
    outline: 3px solid rgba(167, 130, 255, 0.55);
    outline-offset: 3px;
}

.event-overview__reference-intro {
    display: grid;
    margin-top: var(--event-reference-gap);
    grid-template-columns: 0.3125rem minmax(0, 1fr);
    gap: var(--event-reference-gap);
}

.event-overview__reference-intro > span {
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--event-reference-accent);
}

.event-overview__reference-intro > div {
    min-width: 0;
    align-self: center;
}

.event-overview__reference-intro h3 {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--event-reference-text);
    font-size: var(--event-reference-title);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-intro p {
    display: -webkit-box;
    margin-top: calc(var(--event-reference-gap) * 0.5);
    overflow: hidden;
    color: var(--event-reference-muted);
    font-size: var(--event-reference-body);
    line-height: var(--line-height-snug);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-meta {
    display: grid;
    margin-top: var(--event-reference-gap);
    gap: var(--event-reference-gap);
}

.event-overview__reference-meta > div {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: var(--event-reference-icon) minmax(0, 1fr);
    gap: var(--event-reference-gap);
}

.event-overview__reference-meta > div > div {
    min-width: 0;
}

.event-overview__reference-icon {
    display: inline-grid;
    width: var(--event-reference-icon);
    height: var(--event-reference-icon);
    place-items: center;
    border: 1px solid var(--event-reference-border);
    border-radius: calc(var(--event-reference-icon) * 0.3);
    background: var(--event-reference-surface-soft);
    box-shadow: inset 0 0 0.8rem rgba(255, 255, 255, 0.018);
    color: var(--event-reference-muted);
}

.event-overview__reference-meta dt {
    color: var(--event-reference-muted);
    font-size: var(--event-reference-label);
    line-height: var(--line-height-snug);
}

.event-overview__reference-meta dd {
    margin-top: 0.125rem;
    overflow-wrap: anywhere;
    color: var(--event-reference-text);
    font-size: var(--event-reference-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
}

.event-overview__reference-meta dd > span {
    color: var(--event-reference-muted);
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-location {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-attendees {
    margin-top: var(--event-reference-gap);
}

.event-overview__reference-attendees > h3 {
    color: var(--event-reference-muted);
    font-size: calc(var(--event-reference-label) * 0.9);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.event-overview__reference-attendees > div {
    display: flex;
    min-width: 0;
    margin-top: calc(var(--event-reference-gap) * 0.6);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--event-reference-gap);
}

.event-overview__reference-attendees p {
    min-width: 0;
    color: var(--event-reference-muted);
    font-size: var(--event-reference-label);
    line-height: var(--line-height-snug);
}

.event-overview__reference-attendees p strong {
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-attendees .event-overview__attendee-avatar,
.event-overview__reference-attendees .event-overview__attendee-more {
    width: calc(var(--event-reference-icon) * 0.8);
    height: calc(var(--event-reference-icon) * 0.8);
    border: 0.125rem solid var(--event-reference-surface);
    color: #ffffff;
    font-size: calc(var(--event-reference-label) * 0.85);
}

.event-overview__reference-attendees .event-overview__attendee-preview > * + * {
    margin-left: -0.45rem;
}

.event-overview__attendee-preview > .event-overview__attendee-more {
    margin-left: var(--space-1);
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 1) {
    background: #ed3e78;
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 2) {
    background: #29bd7c;
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 3) {
    background: #e7a126;
}

.event-overview__reference-attendees .event-overview__attendee-more {
    background: #262737;
    color: var(--event-reference-muted);
}

.event-overview__reference-actions {
    display: grid;
    margin-top: var(--event-reference-gap);
    gap: var(--event-reference-gap);
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr);
}

.event-overview__reference-action {
    display: inline-flex;
    min-width: 0;
    min-height: var(--event-reference-action);
    padding: 0.5rem 0.75rem;
    align-items: center;
    justify-content: center;
    gap: calc(var(--event-reference-gap) * 0.6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    color: var(--event-reference-text);
    font-size: var(--event-reference-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    transition: filter var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-overview__reference-action:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.event-overview__reference-action.is-secondary {
    border-color: var(--event-reference-border);
    background: #1b1c2c;
}

.event-overview__reference-action.is-primary {
    background: #7d57f6;
}

.event-overview__reference-action.is-disabled {
    cursor: not-allowed;
    filter: saturate(0.45);
    opacity: 0.5;
    pointer-events: none;
}

/* Event summary shares the delivery panel's accent palette in both themes. */
.event-overview__card.event-overview__event-summary {
    --event-reference-surface: var(--event-panel-surface);
    --event-reference-surface-soft: var(--event-panel-row);
    --event-reference-border: var(--event-panel-border);
    --event-reference-text: var(--event-panel-text);
    --event-reference-muted: var(--event-panel-muted);
    --event-reference-accent: var(--event-panel-accent);
    border-color: var(--event-panel-border);
    background: var(--event-panel-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.event-overview__event-summary .event-overview__reference-header {
    padding-bottom: var(--event-reference-gap);
    border-bottom: 1px solid var(--event-panel-border);
}

.event-overview__event-summary .event-overview__reference-header h2 {
    color: var(--event-panel-accent);
    font-size: var(--event-reference-body);
    line-height: var(--line-height-snug);
}

.event-overview__event-summary .event-overview__reference-intro h3 {
    font-size: clamp(1.125rem, 2.2vh, 1.5rem);
    font-weight: var(--font-weight-semibold);
}

.event-overview__event-summary .event-overview__reference-icon {
    color: var(--event-panel-accent);
}

.event-overview__summary-timezone {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--event-reference-label);
}

.event-overview__event-summary .event-overview__reference-action.is-secondary,
.event-overview__event-summary .event-overview__attendee-more {
    background: var(--event-panel-row);
}

.event-overview__event-summary .event-overview__reference-action.is-primary {
    background: var(--event-panel-accent);
    color: var(--event-panel-surface);
}

/* Overview details and delivery follow their content instead of stretching
 * short summaries and service lists across the full board height. */
.app-page--event-overview .event-overview__event-summary,
.app-page--event-overview .event-overview__delivery-card {
    height: auto;
    max-height: 100%;
    align-self: start;
}

.app-page--event-overview .event-overview__event-summary {
    --event-reference-body: 0.875rem;
    --event-reference-label: 0.75rem;
}

.app-page--event-overview .event-overview__reference-header {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-overview__summary-mode {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--event-panel-border);
    border-radius: var(--radius-pill);
    color: var(--event-panel-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.app-page--event-overview .event-overview__reference-attendees {
    padding-top: var(--event-reference-gap);
    border-top: 1px solid var(--event-panel-border);
}

.app-page--event-overview .event-overview__reference-attendees > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.06em;
}

.app-page--event-overview .event-overview__reference-attendees > h3 span {
    color: var(--event-panel-text);
    font-variant-numeric: tabular-nums;
}

.app-page--event-overview .event-overview__reference-attendees > div {
    flex-wrap: wrap;
}

.app-page--event-overview .event-overview__reference-action {
    min-height: 2.75rem;
    font-size: var(--font-size-sm);
}

.app-page--event-overview .event-overview__card.event-overview__delivery-card {
    border-color: var(--event-panel-border);
}

.app-page--event-overview .event-overview__card.event-overview__delivery-card > .ui-card__body {
    flex: 0 1 auto;
    padding: var(--event-reference-pad);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--event-panel-border) transparent;
}

.app-page--event-overview .event-overview__delivery,
.app-page--event-overview .event-overview__delivery .event-overview__sync-card,
.app-page--event-overview .event-overview__sync-card .event-overview__task-list {
    flex: 0 0 auto;
}

.app-page--event-overview .event-overview__delivery .event-overview__meta-row {
    margin-top: 0;
    padding-top: var(--event-reference-gap);
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.app-page--event-overview .event-overview__delivery,
.app-page--event-overview .event-overview__delivery > section,
.app-page--event-overview .event-overview__delivery .event-overview__task-list {
    gap: var(--event-reference-gap);
}

.app-page--event-overview .event-overview__delivery > section + section {
    padding-top: var(--event-reference-gap);
}

.app-page--event-overview .event-overview__delivery .event-overview__section-head {
    padding-bottom: var(--event-reference-gap);
    border-bottom: 1px solid var(--event-panel-border);
}

.app-page--event-overview .event-overview__delivery .event-overview__section-head h3 {
    color: var(--event-panel-accent);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.app-page--event-overview .event-overview__delivery .event-overview__meta-row > span {
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-page--event-overview .event-overview__section-head {
    align-items: flex-start;
}

.app-page--event-overview .event-overview__section-head h3,
.app-page--event-overview .event-overview__section-head p {
    white-space: normal;
}

.app-page--event-overview .event-overview__card-figure small {
    display: block;
    margin-top: var(--space-1);
    color: var(--event-panel-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    text-align: right;
}

.event-overview__date-header {
    display: flex;
    min-width: 0;
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + var(--space-2));
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--event-date-layer-ink);
}

.event-overview__date-copy {
    min-width: 0;
}

.event-overview__date-header strong {
    display: block;
}

.event-overview__date-header strong {
    overflow-wrap: anywhere;
    color: var(--event-date-layer-ink);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.event-overview__time-chip,
.event-overview__mode-chip {
    display: inline-flex;
    min-height: var(--control-height-sm);
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border: 1px solid rgba(72, 49, 8, 0.1);
    border-radius: var(--radius-pill);
    background: var(--event-date-layer-control);
    box-shadow: var(--shadow-xs);
    color: var(--event-date-layer-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.event-overview__mode-chip {
    margin-left: auto;
}

.event-overview__header-action {
    flex: 0 0 auto;
}

.event-overview__main-surface {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    margin-top: calc(var(--space-4) * -1);
    padding: var(--space-3);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 -10px 28px rgba(45, 34, 14, 0.09), var(--shadow-sm);
}

.event-overview__main-heading,
.event-overview__context-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.event-overview__main-heading {
    margin-bottom: var(--space-2);
}

.event-overview__main-heading .event-overview__attendee-preview {
    margin-left: auto;
}

.event-overview__main-heading > div,
.event-overview__context-block > div,
.event-overview__integration-row > div,
.event-overview__setting-row > div {
    min-width: 0;
}

.event-overview__main-heading h2 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.event-overview__main-heading p,
.event-overview__context-block > div > span,
.event-overview__context-block p,
.event-overview__integration-row p,
.event-overview__setting-row p,
.event-overview__integration-meta span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__main-content {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__details-panel,
.event-overview__media-panel {
    min-width: 0;
}

.event-overview__detail-list {
    display: grid;
}

.event-overview__detail-list > div {
    display: grid;
    min-width: 0;
    padding: var(--space-2) 0;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}

.event-overview__detail-list > div:first-child {
    padding-top: 0;
}

.event-overview__detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-overview__detail-list dd {
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-overview__context-block {
    margin-top: var(--space-2);
    padding: var(--space-2);
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__context-block strong {
    display: block;
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__context-block p {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
}

.event-overview__meeting-block {
    display: grid;
    gap: var(--space-2);
}

.event-overview__meeting-block > .ui-button {
    justify-self: start;
}

.event-overview__meeting-url {
    word-break: break-all;
}

.event-overview__section-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__media-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.event-overview__media-panel .event-overview__context-block {
    margin-top: 0;
}

.event-overview__map {
    position: relative;
    display: grid;
    min-height: 8.5rem;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
    isolation: isolate;
}

.event-overview__map-canvas {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-base) var(--ease-standard);
}

.event-overview__map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    box-shadow: var(--shadow-card);
    color: var(--color-primary);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-base) var(--ease-standard);
}

.event-overview__map.is-ready .event-overview__map-canvas,
.event-overview__map.is-ready .event-overview__map-marker {
    opacity: 1;
}

.event-overview__map-fallback {
    z-index: 1;
    max-width: 13rem;
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
}

.event-overview__map.is-ready .event-overview__map-fallback {
    display: none;
}

.event-overview__media-placeholder,
.event-overview__cover-placeholder {
    display: grid;
    min-height: 8.5rem;
    padding: var(--space-3);
    place-content: center;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background:
        var(--color-layer-soft);
    text-align: center;
}

.event-overview__media-icon,
.event-overview__attendance-icon,
.event-overview__setting-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__media-placeholder strong,
.event-overview__cover-placeholder strong {
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__media-placeholder p,
.event-overview__cover-placeholder > span:not(.event-overview__media-icon) {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__cover-placeholder > span:not(.event-overview__media-icon) {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__attendance-card,
.event-overview__description-card,
.event-overview__integration-card,
.event-overview__module-card,
.event-overview__settings-card {
    display: flex;
    flex-direction: column;
}

.event-overview__attendance-card .ui-card__body,
.event-overview__description-card .ui-card__body,
.event-overview__integration-card .ui-card__body,
.event-overview__module-card .ui-card__body,
.event-overview__settings-card .ui-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.event-overview__card-scroll {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: var(--space-2);
    flex-direction: column;
}

.event-overview__attendance-total {
    display: flex;
    padding: var(--space-2);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
}

.event-overview__attendance-people {
    display: flex;
    margin-bottom: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-overview__attendance-people .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__attendee-preview {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-1);
}

.event-overview__attendee-avatar,
.event-overview__attendee-more {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--color-card-glass-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    color: var(--color-primary-contrast);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.event-overview__attendee-preview > * + * {
    margin-left: -0.45rem;
}

.event-overview__attendee-avatar:nth-child(3n + 1) {
    background: var(--color-primary);
}

.event-overview__attendee-avatar:nth-child(3n + 2) {
    background: var(--color-success-strong);
}

.event-overview__attendee-avatar:nth-child(3n + 3) {
    background: var(--color-warning-strong);
}

.event-overview__attendee-more {
    background: var(--color-surface-inverse);
}

/* The overflow count is text, not an initial: it must widen instead of spilling
   over the neighbouring copy once the attendee list runs into five figures. */
.event-overview__attendee-more {
    width: auto;
    min-width: 2rem;
    padding-inline: var(--space-2);
    white-space: nowrap;
}

.event-overview__agenda-block .event-overview__attendee-more,
.event-overview__reference-attendees .event-overview__attendee-more {
    width: auto;
    padding-inline: var(--space-2);
}

.event-overview__agenda-block .event-overview__attendee-more {
    min-width: 1.375rem;
}

.event-overview__reference-attendees .event-overview__attendee-more {
    min-width: calc(var(--event-reference-icon) * 0.8);
}

.event-overview__attendance-total > div > span,
.event-overview__attendance-total strong {
    display: block;
}

.event-overview__attendance-total > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__attendance-total strong {
    margin-top: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.event-overview__attendance-breakdown {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__attendance-breakdown > div {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
}

.event-overview__attendance-breakdown > div > span,
.event-overview__attendance-breakdown strong {
    display: block;
}

.event-overview__attendance-breakdown > div > span {
    font-size: var(--font-size-xs);
}

.event-overview__attendance-breakdown strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-lg);
}

.event-overview__attendance-breakdown .is-verified {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.event-overview__attendance-breakdown .is-unverified {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.event-overview__attendance-empty {
    display: grid;
    flex: 1;
    min-height: 2.5rem;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    place-items: center;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
}

.event-overview__accent-link,
.event-overview__text-button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.event-overview__accent-link {
    margin-top: var(--space-2);
}

.event-overview__accent-link:hover,
.event-overview__text-button:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.event-overview__accent-link:focus-visible,
.event-overview__text-button:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.event-overview__description-copy {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.has-js .event-overview__description-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.has-js .event-overview__expandable.is-expanded .event-overview__description-copy {
    display: block;
    overflow: visible;
}

.event-overview__text-button {
    margin-top: var(--space-2);
    padding: 0;
    cursor: pointer;
}

.event-overview__muted-copy {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-overview__integration-list,
.event-overview__settings-list {
    display: grid;
}

.event-overview__integration-row,
.event-overview__setting-row {
    display: flex;
    min-width: 0;
    padding: var(--space-2) 0;
    align-items: flex-start;
    gap: var(--space-2);
}

.event-overview__integration-row:first-child,
.event-overview__setting-row:first-child {
    padding-top: 0;
}

.event-overview__integration-row + .event-overview__integration-row,
.event-overview__setting-row + .event-overview__setting-row {
    border-top: 1px solid var(--color-border);
}

.event-overview__integration-row strong,
.event-overview__setting-row strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__integration-row > .ui-status-badge,
.event-overview__setting-row > .ui-status-badge {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: var(--space-1);
}

.event-overview__integration-meta {
    display: grid;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.event-overview__integration-meta strong {
    font-size: var(--font-size-sm);
}

.event-overview__setting-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
}

.event-overview__setting-row.is-disabled {
    opacity: 0.62;
}

.event-overview__card-action {
    margin-top: auto;
    padding-top: var(--space-2);
}

.event-overview__card-action .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__card-action form {
    margin: 0;
}

.event-public-registration-card .ui-card__body {
    display: grid;
    gap: var(--space-3);
}

.event-delivery-automation-card {
    display: flex;
    flex-direction: column;
}

.event-delivery-automation-card .ui-card__body {
    display: grid;
    flex: 1;
    gap: var(--space-3);
}

.event-overview__integrations-workspace > .event-public-registration-card {
    grid-column: 1 / -1;
}

.event-delivery-automation-card__switch-row,
.event-delivery-automation-card__actions {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-3);
}

.event-delivery-automation-card__switches {
    display: grid;
    gap: var(--space-2);
}

.event-delivery-automation-card__switch-row {
    justify-content: space-between;
}

.event-delivery-automation-card__switch-row strong,
.event-delivery-automation-card__run strong {
    display: block;
    font-size: var(--font-size-sm);
}

.event-delivery-automation-card__switch-row p,
.event-delivery-automation-card__switch-row em,
.event-delivery-automation-card__independent,
.event-delivery-automation-card__run span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-delivery-automation-card__switch-row em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-card__independent {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-medium);
}

.event-delivery-automation-card__credits,
.event-delivery-automation-modal__counts,
.event-delivery-automation-modal__estimate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-delivery-automation-card__credits {
    padding: var(--space-3) 0;
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.event-delivery-automation-card__credits > div,
.event-delivery-automation-modal__counts > div,
.event-delivery-automation-modal__estimate > div {
    display: grid;
    padding: var(--space-3);
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-delivery-automation-card__credits > div {
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.event-delivery-automation-card__credits > div:first-child {
    padding-left: 0;
}

.event-delivery-automation-card__credits > div + div {
    border-left: 1px solid var(--color-border);
}

.event-delivery-automation-card__credits span,
.event-delivery-automation-modal__counts span,
.event-delivery-automation-modal__estimate span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-delivery-automation-card__credits strong,
.event-delivery-automation-modal__counts strong,
.event-delivery-automation-modal__estimate strong {
    font-size: var(--font-size-base);
}

.event-delivery-automation-card__run,
.event-delivery-automation-card__actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-delivery-automation-card__notice {
    color: var(--color-warning-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-delivery-automation-card__run {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-delivery-automation-card__actions {
    margin-top: auto;
    flex-wrap: wrap;
}

.event-delivery-automation-card__actions form {
    margin: 0;
}

.event-delivery-automation-modal__options {
    display: grid;
    padding: 0;
    gap: var(--space-2);
    border: 0;
}

.event-delivery-automation-modal__options legend {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-modal__option {
    display: flex;
    padding: var(--space-3);
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-delivery-automation-modal__option > div:first-child {
    display: grid;
    gap: var(--space-1);
}

.event-delivery-automation-modal__option strong {
    font-size: var(--font-size-sm);
}

.event-delivery-automation-modal__option small,
.event-delivery-automation-modal__option em,
.event-delivery-automation-modal__estimate small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: normal;
}

.event-delivery-automation-modal__option em {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-modal__estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-public-registration-card__status {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-public-registration-card__status > div {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-3);
}

.event-public-registration-card__status strong,
.event-public-registration-card__empty strong,
.event-public-registration-card__control-row strong {
    display: block;
    font-size: var(--font-size-sm);
}

.event-public-registration-card__status p,
.event-public-registration-card__empty p,
.event-public-registration-card__control-row p,
.event-public-registration-card__footer p,
.event-public-registration-card__embed p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-public-registration-card__section,
.event-public-registration-card__embed,
.event-public-registration-card__footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-public-registration-card__section > label,
.event-public-registration-card__control-row > div > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-public-registration-card__copy-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-public-registration-card__copy-row .form-control {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__copy-row .ui-button {
    flex: 0 0 auto;
}

.event-public-registration-card__inline-actions,
.event-public-registration-card__footer,
.event-public-registration-card__control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-public-registration-card__inline-actions {
    margin-top: var(--space-2);
}

.event-public-registration-card__inline-actions > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__control-row > div {
    min-width: 0;
}

.event-public-registration-card__embed summary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-public-registration-card__embed > div {
    display: grid;
    margin-top: var(--space-3);
    gap: var(--space-2);
}

.event-public-registration-card__embed textarea {
    min-height: 7rem;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__embed .ui-button {
    justify-self: start;
}

.event-public-registration-card__footer p {
    max-width: 24rem;
    margin-top: 0;
}

.event-public-registration-card__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-public-registration-card__empty > span {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__settings-workspace .event-overview__settings-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-overview__settings-workspace .event-overview__setting-row {
    min-height: 3rem;
    padding: 0 var(--space-4);
}

.event-overview__settings-workspace .event-overview__setting-row:first-child {
    padding-left: 0;
}

.event-overview__settings-workspace .event-overview__setting-row:last-child {
    padding-right: 0;
}

.event-overview__settings-workspace .event-overview__setting-row + .event-overview__setting-row {
    border-top: 0;
    border-left: 1px solid var(--color-border);
}

.event-attendees-page {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.event-attendees__metrics {
    gap: var(--space-3);
}

.event-registrations__public-card .ui-card__body,
.event-settings-page,
.event-response-page {
    display: grid;
    gap: var(--space-4);
}

.event-registrations__public-link {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.event-registrations__public-link label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-registrations__public-link .form-control,
.event-registrations__embed-code {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-registrations__public-actions,
.event-registrations__public-disabled,
.event-attendees__selection-toolbar,
.event-attendees__selection-toolbar > div,
.event-attendees__selection-banner,
.event-settings__action-row {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-registrations__public-actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-registrations__public-disabled,
.event-attendees__selection-toolbar,
.event-settings__action-row {
    justify-content: space-between;
}

.event-registrations__public-disabled p,
.event-settings__action-row p,
.event-settings__section-heading p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-attendees__selection-toolbar {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-attendees__selection-toolbar strong,
.event-attendees__selection-banner {
    font-size: var(--font-size-sm);
}

.event-attendees__selection-banner {
    margin-bottom: var(--space-2);
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-text-soft);
}

.event-attendees__selection-banner button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-semibold);
}

.event-attendees__selection-banner button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Why the all-matching offer is missing while a delivery filter is on. It
   reads under the table controls, not as an alert: nothing is wrong. */
.event-attendees__selection-note {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
}

.event-attendees__selection-cell {
    width: 2.75rem;
    text-align: center;
}

.event-attendees__selection-cell input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.event-attendees__person {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.event-attendees__avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-attendees__email {
    overflow-wrap: anywhere;
}

.event-attendees__import-errors {
    display: grid;
    padding-left: var(--space-5);
    gap: var(--space-1);
}

.form-control.event-attendees__file-input {
    height: auto;
    padding: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.event-attendees__file-input::file-selector-button {
    box-sizing: border-box;
    min-height: var(--control-height-sm);
    margin: 0;
    margin-inline-end: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-glass-control);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard);
}

.event-attendees__file-input::file-selector-button:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

.event-attendees__actions {
    display: flex;
    align-items: center;
}

/* A row with no delivery action available still holds the column's width. */
.event-attendees__actions-empty {
    color: var(--color-text-faint);
}

.event-attendees__actions > .nav-dropdown > summary {
    min-height: 2rem;
    padding: 0 var(--space-3);
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.event-attendees__actions > .nav-dropdown > summary > .ui-icon:first-child {
    display: none;
}

[data-attendee-actions] .nav-dropdown__menu[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
}

[data-attendee-actions] .nav-dropdown__menu[popover]:not(:popover-open) {
    display: none;
}

[data-attendee-actions] .nav-dropdown__item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.event-attendees__action-reason {
    margin: 0;
    padding: 0 var(--space-3) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
    white-space: normal;
}

.event-attendees__action-divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--color-border);
}

.event-attendees__action-divider:first-child {
    display: none;
}

.event-attendees__status-info {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.event-attendees__status-note {
    max-width: 13rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-attendees__action-complete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-success-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-response__summary {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
    gap: var(--space-3);
}

.event-response__sync-status {
    display: flex;
    padding: var(--space-3) var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-response__sync-status > div {
    display: grid;
    gap: var(--space-1);
}

.event-response__sync-status span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-response__sync-status strong {
    font-size: var(--font-size-sm);
}

.event-response__summary > .ui-card {
    height: 100%;
}

.event-response__summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-response__summary-grid--rsvp {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-response__summary-grid > div {
    display: grid;
    padding: var(--space-3);
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-response__summary-grid span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-response__summary-grid strong {
    font-size: var(--font-size-lg);
}

.event-response__filters {
    display: flex;
    margin-bottom: var(--space-4);
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-response__filters .form-group {
    min-width: min(100%, 14rem);
}

.event-settings__section {
    display: grid;
    gap: var(--space-3);
}

.event-settings__section-heading h2 {
    font-size: var(--font-size-base);
}

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

.event-settings__configuration-grid > div {
    min-width: 0;
}

.event-settings__configuration-grid dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-settings__configuration-grid dd {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-settings__configuration-description {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-settings__configuration-description dd {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.event-settings__status-card,
.event-settings__danger-card {
    border-color: var(--color-border-strong);
}

.event-settings__danger-zone {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-settings__danger-card {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.attendee-verification-result__icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-2);
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.attendee-verification-result--success .attendee-verification-result__icon {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.attendee-verification-result--warning .attendee-verification-result__icon {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.attendee-verification-result--danger .attendee-verification-result__icon {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.attendee-verification-result__event {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.attendee-verification-result__schedule {
    display: inline-flex;
    margin: 0 auto;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.attendee-verification-result__form {
    display: grid;
    margin-top: var(--space-5);
}

.attendee-verification-result__form .ui-button {
    width: 100%;
}

@media (max-width: 47.99rem) {
    .event-registrations__public-link,
    .event-settings__configuration-grid,
    .event-response__summary-grid--rsvp {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-registrations__public-actions .ui-button,
    .event-registrations__public-disabled .ui-button,
    .event-attendees__selection-toolbar .ui-button,
    .event-settings__action-row .ui-button {
        width: 100%;
        justify-content: center;
    }

    .event-registrations__public-disabled,
    .event-attendees__selection-toolbar,
    .event-attendees__selection-toolbar > div,
    .event-settings__action-row,
    .event-response__filters,
    .event-response__filters .form-group,
    .event-response__filters .ui-button {
        width: 100%;
        align-items: stretch;
    }

    .event-attendees__selection-toolbar > div,
    .event-settings__action-row {
        flex-direction: column;
    }

    .event-attendees__table {
        overflow: visible;
    }

    .event-attendees__table .table-base,
    .event-attendees__table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .event-attendees__table thead {
        display: none;
    }

    .event-attendees__table tbody {
        display: grid;
        gap: var(--space-3);
    }

    .event-attendees__table .table-base tr {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--color-card-glass-border);
        border-radius: var(--radius-lg);
        background: var(--color-card-glass);
    }

    .event-attendees__table .table-base td {
        display: grid;
        min-width: 0;
        padding: var(--space-3);
        align-items: start;
        grid-template-columns: minmax(6.5rem, 0.75fr) minmax(0, 1.25fr);
        gap: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .event-attendees__table .table-base td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
    }

    .credit-usage__table .table-base td.table-cell--numeric {
        text-align: left;
    }

    .event-attendees__status-info .ui-status-badge {
        min-width: 0;
        white-space: normal;
        line-height: var(--line-height-snug);
    }

    .event-attendees__table .table-base td:last-child {
        border-bottom: 0;
    }

    .event-attendees__actions,
    .event-attendees__actions form,
    .event-attendees__actions .ui-button {
        width: 100%;
        min-width: 0;
    }
}

/*
 * Calendar page is sized to the viewport: the month grid divides whatever
 * height is left instead of pushing the document into a scroll.
 */
.calendar-page {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.event-calendar {
    --calendar-cell-min: 2.75rem;
    --calendar-cell-pad: 0.3125rem;
    --calendar-day-heading: 1.25rem;
    display: grid;
    min-width: 0;
    align-items: stretch;
    grid-template-columns: minmax(16.5rem, 0.62fr) minmax(0, 2.38fr);
    gap: var(--space-4);
}

.event-calendar__inspector,
.event-calendar__board {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.event-calendar__inspector-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-calendar__inspector-header,
.event-calendar__board-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.event-calendar__inspector-header {
    border-bottom: 1px solid var(--color-border);
}

.event-calendar__eyebrow {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.event-calendar__inspector-context {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-calendar__empty {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--space-6) var(--space-5);
    place-content: center;
    text-align: center;
}

.event-calendar__empty-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-3);
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-calendar__empty h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__empty p {
    max-width: 17rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-calendar__detail {
    padding: var(--space-5);
}

.event-calendar__detail-heading h2 {
    margin-top: var(--space-4);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-calendar__detail-heading h2:focus {
    outline: none;
}

.event-calendar__detail-heading p {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-calendar__audience-summary {
    display: flex;
    min-width: 0;
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-4);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.event-calendar__audience-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-glass-control);
    color: var(--color-primary-active);
}

.event-calendar__audience-summary strong,
.event-calendar__audience-summary span {
    display: block;
}

.event-calendar__audience-summary strong {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.event-calendar__audience-summary div > span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__detail .ui-definition-list__row {
    grid-template-columns: minmax(6rem, 0.72fr) minmax(0, 1.28fr);
}

.event-calendar__detail-footer {
    display: flex;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-calendar__detail-footer strong {
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
}

.event-calendar__backdrop {
    display: none;
}

/* Month, legend, and tools share one row so the grid keeps the height. */
.event-calendar__board-header {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.event-calendar__board-title {
    min-width: 0;
    flex: 0 0 auto;
}

.event-calendar__board-header h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-calendar__board-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.event-calendar__month-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.event-calendar__month-picker {
    z-index: var(--z-dropdown);
}

.event-calendar__month-trigger {
    min-width: 10.25rem;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    justify-content: flex-start;
    font-weight: var(--font-weight-medium);
}

.event-calendar__month-trigger > span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.event-calendar__month-trigger .ui-icon:first-child {
    color: var(--color-primary);
}

.event-calendar__month-trigger .ui-icon:last-child {
    color: var(--color-text-faint);
    transition: transform var(--transition-base) var(--ease-standard);
}

.event-calendar__month-picker[open] .event-calendar__month-trigger .ui-icon:last-child {
    transform: rotate(180deg);
}

.event-calendar__month-picker-menu {
    right: auto;
    left: 50%;
    width: 18rem;
    min-width: 18rem;
    padding: 0;
    overflow: hidden;
    transform: translateX(-50%);
    border-color: var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: var(--color-popover-strong);
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-glass-border);
}

.event-calendar__month-picker-header {
    display: grid;
    padding: var(--space-3);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    text-align: center;
}

.event-calendar__month-picker-header span,
.event-calendar__month-picker-header strong {
    display: block;
}

.event-calendar__month-picker-header span {
    color: var(--color-text-faint);
    font-size: 0.5625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-calendar__month-picker-header strong {
    margin-top: 0.125rem;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-grid {
    display: grid;
    padding: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-calendar__month-option {
    position: relative;
    display: grid;
    min-height: 2.5rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-calendar__month-option:hover {
    transform: translateY(-1px);
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.event-calendar__month-option:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.event-calendar__month-option.is-current:not(.is-selected) {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.event-calendar__month-option.is-selected {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-action-contrast);
    box-shadow: var(--shadow-xs);
}

.event-calendar__month-picker-footer {
    display: flex;
    min-height: 3.125rem;
    padding: 0 var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-calendar__month-picker-footer a {
    color: var(--color-primary-active);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-picker-footer a:hover {
    color: var(--color-primary-hover);
}

.event-calendar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.event-calendar__summary span {
    display: inline-flex;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__summary strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__legend {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.event-calendar__legend i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.event-calendar__legend i.is-primary { background: var(--color-primary); }
.event-calendar__legend i.is-success { background: var(--color-success); }
.event-calendar__legend i.is-warning { background: var(--color-warning); }
.event-calendar__legend i.is-neutral { background: var(--color-text-faint); }
.event-calendar__legend i.is-danger { background: var(--color-danger); }
.event-calendar__legend i.is-info { background: var(--color-info); }

.event-calendar__month-empty {
    display: flex;
    flex: 0 0 auto;
    margin: var(--space-3) var(--space-5) 0;
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.event-calendar__month-empty-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-calendar__month-empty strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-empty p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-calendar__viewport {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-calendar__viewport:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.event-calendar__table {
    width: 100%;
    min-width: 42rem;
    height: 100%;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
}

.event-calendar__table th {
    height: 2.25rem;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-layer-soft);
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.event-calendar__table th + th,
.event-calendar__table td + td {
    border-left: 1px solid var(--color-border);
}

/*
 * The cell is the positioning context for its event list. Keeping the list out
 * of flow means a busy day can never stretch its week row, so the six rows
 * always divide the viewport evenly and the month stays on one screen.
 */
.event-calendar__table td {
    position: relative;
    height: var(--calendar-cell-min);
    padding: var(--calendar-cell-pad);
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-layer-faint);
}

.event-calendar__table tbody tr:last-child td {
    border-bottom: 0;
}

.event-calendar__table td.is-outside-month {
    background: var(--color-surface-muted);
}

.event-calendar__day-heading {
    display: flex;
    height: var(--calendar-day-heading);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.event-calendar__day-heading time {
    display: inline-grid;
    width: var(--calendar-day-heading);
    height: var(--calendar-day-heading);
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.event-calendar__day-heading span {
    color: var(--color-primary-active);
    font-size: 0.5625rem;
    font-weight: var(--font-weight-semibold);
}

.event-calendar__table td.is-today .event-calendar__day-heading time {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.event-calendar__table td.is-outside-month .event-calendar__day-heading time {
    color: var(--color-text-faint);
}

.event-calendar__events {
    position: absolute;
    top: calc(var(--calendar-cell-pad) + var(--calendar-day-heading) + 0.125rem);
    right: var(--calendar-cell-pad);
    bottom: var(--calendar-cell-pad);
    left: var(--calendar-cell-pad);
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
    /* Fades the last chip when a busy day scrolls, instead of a hard cut. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 0.5rem), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.5rem), transparent);
}

/* Single-line chip: time, then title. Status reads from the accent + legend. */
.event-calendar__event {
    --calendar-event-background: var(--color-surface-muted);
    --calendar-event-color: var(--color-text-soft);
    --calendar-event-accent: var(--color-text-faint);
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 1.25rem;
    flex: 0 0 auto;
    align-items: baseline;
    padding: 0.1875rem 0.375rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-left: 3px solid var(--calendar-event-accent);
    border-radius: var(--radius-xs);
    background: var(--calendar-event-background);
    color: var(--calendar-event-color);
    gap: 0.3125rem;
    text-align: left;
    transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-calendar__event span {
    flex: 0 0 auto;
    font-size: 0.5625rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.76;
}

.event-calendar__event strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-calendar__event.is-primary {
    --calendar-event-background: var(--color-primary-soft);
    --calendar-event-color: var(--color-primary-active);
    --calendar-event-accent: var(--color-primary);
}

.event-calendar__event.is-success {
    --calendar-event-background: var(--color-success-soft);
    --calendar-event-color: var(--color-success-strong);
    --calendar-event-accent: var(--color-success);
}

.event-calendar__event.is-warning {
    --calendar-event-background: var(--color-warning-soft);
    --calendar-event-color: var(--color-warning-strong);
    --calendar-event-accent: var(--color-warning);
}

.event-calendar__event.is-danger {
    --calendar-event-background: var(--color-danger-soft);
    --calendar-event-color: var(--color-danger-strong);
    --calendar-event-accent: var(--color-danger);
}

.event-calendar__event.is-info {
    --calendar-event-background: var(--color-info-soft);
    --calendar-event-color: var(--color-info-strong);
    --calendar-event-accent: var(--color-info);
}

.event-calendar__event:hover {
    transform: translateY(-1px);
    border-color: var(--calendar-event-accent);
    box-shadow: var(--shadow-xs);
}

.event-calendar__event[aria-pressed="true"] {
    border-color: var(--calendar-event-accent);
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--calendar-event-accent);
}

/* Board pages trade page-header scale for grid height, as the Event overview does. */
.app-page--calendar .ui-page-header {
    align-items: center;
    gap: var(--space-6);
}

.app-page--calendar .ui-breadcrumbs {
    margin-bottom: var(--space-1);
}

.app-page--calendar .ui-page-header__eyebrow {
    margin-bottom: 0;
    font-size: var(--font-size-xs);
}

.app-page--calendar .ui-page-title {
    font-size: clamp(1.75rem, 2.4vw, 2.375rem);
}

.app-page--calendar .ui-page-description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

@media (min-width: 64rem) {
    .has-js .app-page--calendar .calendar-page {
        height: 100%;
        min-height: 0;
    }

    .has-js .app-page--calendar .ui-page-header {
        flex: 0 0 auto;
    }

    .has-js .app-page--calendar .ui-section {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .has-js .app-page--calendar .event-calendar {
        min-height: 0;
        flex: 1 1 auto;
    }
}

/* Analytics workspace: compact, viewport-bound reporting with accent-aware charts. */

.analytics-workspace {
    display: grid;
    padding: 0 var(--space-2);
    grid-template-rows: auto;
    gap: var(--space-5);
}

.analytics-workspace__metrics {
    gap: var(--space-3);
}

.analytics-workspace__metrics .ui-metric-card {
    min-height: 5rem;
    padding: var(--space-3) var(--space-5);
}

.analytics-workspace__metrics .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: 1.625rem;
}

.analytics-workspace__metrics .ui-metric-card__trend {
    margin-top: var(--space-1);
}

.analytics-metric--verified .ui-metric-card__value,
.analytics-metric--verified .ui-metric-card__trend-value {
    color: var(--color-primary);
}

.analytics-workspace__grid {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr);
    gap: var(--space-3);
}

.analytics-workspace__side {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(12rem, 0.88fr) minmax(13rem, 1.12fr);
    gap: var(--space-3);
}

.analytics-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.analytics-card > .ui-card__header {
    flex: 0 0 auto;
}

.analytics-card > .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: visible;
}

.analytics-card--campaigns > .ui-card__body {
    display: grid;
}

.analytics-campaign-chart {
    display: grid;
    min-height: 0;
    margin: 0;
    align-content: center;
    gap: var(--space-3);
}

.analytics-campaign-chart__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-campaign-chart__legend span,
.analytics-verification__legend dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analytics-campaign-chart__legend i,
.analytics-verification__legend i {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
}

.analytics-campaign-chart__legend .is-verified,
.analytics-verification__legend .is-verified {
    background: var(--color-primary);
}

.analytics-campaign-chart__legend .is-pending,
.analytics-verification__legend .is-pending {
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.analytics-campaign-chart__rows {
    display: grid;
    min-height: 0;
    align-content: center;
}

.analytics-campaign-chart__row {
    display: grid;
    min-width: 0;
    padding: var(--space-3) 0;
    align-items: center;
    grid-template-columns: minmax(9rem, 0.75fr) minmax(12rem, 1.55fr) minmax(5.5rem, 0.42fr);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.analytics-campaign-chart__row:last-child {
    border-bottom: 0;
}

.analytics-campaign-chart__label,
.analytics-campaign-chart__value {
    min-width: 0;
}

.analytics-campaign-chart__label a {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-campaign-chart__label a:hover,
.analytics-campaign-chart__label a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.analytics-campaign-chart__label span,
.analytics-campaign-chart__value span {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-campaign-chart__plot {
    height: 0.75rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
}

.analytics-campaign-chart__volume {
    display: block;
    width: var(--campaign-volume);
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.analytics-campaign-chart__verified {
    display: block;
    width: var(--campaign-verified);
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.analytics-campaign-chart__value {
    text-align: right;
}

.analytics-campaign-chart__value strong {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.analytics-verification {
    display: grid;
    height: 100%;
    min-height: 0;
    align-items: center;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(8rem, 1.2fr);
    gap: var(--space-4);
}

.analytics-verification__donut {
    display: grid;
    width: min(8.75rem, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) var(--verification-rate), var(--color-surface-muted) 0);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.analytics-verification__donut > div {
    display: grid;
    width: 68%;
    aspect-ratio: 1;
    place-content: center;
    border: 1px solid var(--color-card-glass-border);
    border-radius: 50%;
    background: var(--color-card-glass-strong);
    text-align: center;
}

.analytics-verification__donut strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    line-height: 1;
}

.analytics-verification__donut span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-verification__legend {
    display: grid;
    margin: 0;
}

.analytics-verification__legend > div {
    display: flex;
    padding: var(--space-2) 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.analytics-verification__legend > div:last-child {
    border-bottom: 0;
}

.analytics-verification__legend dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-verification__legend dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.analytics-card--trend > .ui-card__body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.analytics-trend__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.analytics-trend__summary strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.analytics-trend__summary span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-trend {
    display: grid;
    min-height: 7rem;
    margin: var(--space-2) 0 0;
    grid-template-rows: minmax(0, 1fr) auto;
}

.analytics-trend svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 5.5rem;
    overflow: visible;
}

.analytics-trend__grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.analytics-trend__gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.24;
}

.analytics-trend__gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0.01;
}

.analytics-trend__area {
    fill: url("#analytics-verification-area");
}

.analytics-trend__line {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.analytics-trend__axis {
    display: flex;
    margin-top: var(--space-1);
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

/* Reference-led analytics composition: 3-card overview, KPI rail, and 2-chart row. */

.analytics-workspace {
    grid-template-rows: auto auto auto auto;
}

.analytics-overview-grid,
.analytics-chart-grid,
.analytics-kpi-strip {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: var(--space-3);
}

.analytics-overview-grid {
    grid-template-columns: minmax(15rem, 0.9fr) minmax(17rem, 1fr) minmax(20rem, 1.1fr);
}

.analytics-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-kpi-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-overview-grid .analytics-card,
.analytics-chart-grid .analytics-card {
    border-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-card-glass-border));
    box-shadow: var(--shadow-sm);
}

.analytics-overview-grid .analytics-card {
    min-height: 18rem;
}

.analytics-chart-grid .analytics-card {
    height: 13.25rem;
    min-height: 0;
    align-self: start;
}

.analytics-chart-grid .analytics-card > .ui-card__body {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.analytics-chart-grid .analytics-trend svg {
    min-height: 4rem;
}

.analytics-chart-grid .analytics-comparison__plot {
    min-height: 5.75rem;
    gap: var(--space-4);
}

.analytics-overview-grid .analytics-card > .ui-card__header,
.analytics-chart-grid .analytics-card > .ui-card__header {
    position: relative;
}

.analytics-overview-grid .analytics-card > .ui-card__header::after,
.analytics-chart-grid .analytics-card > .ui-card__header::after {
    width: 1.25rem;
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, var(--color-text-faint) 1px, transparent 1.5px) 0 0 / 0.3125rem 0.25rem;
    content: "";
    opacity: 0.55;
}

.analytics-card--summary {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-summary-list {
    display: grid;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-content: center;
    gap: var(--space-2);
}

.analytics-summary-list > div {
    display: flex;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-primary) 13%, var(--color-border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) var(--summary-strength), var(--color-layer));
}

.analytics-summary-list dt {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.analytics-summary-list dt i {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
}

.analytics-summary-list dd {
    min-width: 3.25rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-card-glass-strong) 86%, transparent);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.analytics-card--score {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-card--score > .ui-card__body {
    display: grid;
    overflow: hidden;
}

.analytics-score {
    display: grid;
    min-height: 0;
    place-items: center;
    align-content: center;
}

.analytics-score__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-score__value {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.055em;
    line-height: 1;
}

.analytics-score__value span {
    margin-left: 0.125rem;
    color: var(--color-primary);
    font-size: 0.52em;
    letter-spacing: normal;
}

.analytics-score__gauge {
    position: relative;
    width: min(14.5rem, 95%);
    height: min(7.75rem, 17vh);
    margin: var(--space-1) 0 0;
}

.analytics-score__gauge svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.analytics-score__track,
.analytics-score__progress {
    fill: none;
    stroke-linecap: round;
    /* No non-scaling-stroke here: it resolves stroke-dasharray against the
       path's rendered length in screen pixels, which defeats pathLength="100".
       The "8.7 100" pattern then repeated along the arc and the fill appeared
       at both ends. Width is scaled to keep the previous rendered weight
       (16 x the gauge's 1.24 scale = the 20px it drew before). */
    stroke-width: 16;
}

.analytics-score__track {
    stroke: var(--color-surface-muted);
}

.analytics-score__progress {
    stroke: var(--color-primary);
}

.analytics-score__gauge figcaption {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    display: grid;
    min-width: 7rem;
    padding: 0.4rem 0.65rem;
    transform: translateX(-50%);
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-xs);
}

.analytics-score__gauge figcaption strong {
    color: var(--color-primary-active);
    font-size: var(--font-size-sm);
}

.analytics-score__gauge figcaption span {
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

.analytics-score__foot,
.analytics-comparison__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-score__foot span,
.analytics-comparison__legend span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analytics-score__foot i,
.analytics-comparison__legend i {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.analytics-score__foot .is-verified,
.analytics-comparison__legend .is-verified {
    background: var(--color-primary);
}

.analytics-score__foot .is-pending,
.analytics-comparison__legend .is-pending {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-muted);
}

.analytics-card--ranking {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-ranking-table {
    display: grid;
    min-width: 0;
    height: 100%;
    min-height: 0;
    align-content: center;
}

.analytics-ranking-table__head,
.analytics-ranking-table__row {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(8rem, 1.4fr) minmax(3.25rem, 0.42fr) minmax(3.25rem, 0.42fr) minmax(3rem, 0.35fr);
    gap: var(--space-2);
}

.analytics-ranking-table__head {
    padding: 0 var(--space-2) var(--space-2);
    color: var(--color-text-faint);
    font-size: 0.625rem;
}

.analytics-ranking-table__head span:not(:first-child),
.analytics-ranking-table__row > span:not(:first-child),
.analytics-ranking-table__row > strong {
    text-align: right;
}

.analytics-ranking-table__row {
    min-height: 2.25rem;
    padding: var(--space-2);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    text-decoration: none;
}

.analytics-ranking-table__row:hover,
.analytics-ranking-table__row:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    outline: none;
}

.analytics-ranking-table__campaign {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.analytics-ranking-table__campaign i {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}

.analytics-ranking-table__campaign b {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-ranking-table__row > strong {
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
}

.analytics-kpi-strip .ui-metric-card {
    min-width: 0;
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-4);
    border-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-card-glass-border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card-glass-strong)), var(--color-card-glass));
    box-shadow: var(--shadow-xs);
}

.analytics-kpi-strip .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
}

.analytics-kpi-strip .ui-metric-card__trend {
    overflow: hidden;
    margin-top: var(--space-1);
    font-size: 0.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-metric--pending .ui-metric-card__value {
    color: var(--color-warning);
}

.analytics-card--trend > .ui-card__body,
.analytics-card--comparison > .ui-card__body {
    overflow: hidden;
}

.analytics-chart-grid .analytics-trend {
    min-height: 5.5rem;
    margin-top: var(--space-1);
}

.analytics-comparison {
    display: grid;
    height: 100%;
    min-height: 0;
    margin: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.analytics-comparison__legend {
    justify-content: flex-end;
}

.analytics-comparison__legend .is-rate {
    width: 0.75rem;
    height: 1px;
    border-radius: 0;
    background: var(--color-text);
}

.analytics-comparison__plot {
    position: relative;
    display: flex;
    min-height: 7.5rem;
    padding: var(--space-2) 8% 0;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--space-6);
}

.analytics-comparison__grid-line {
    position: absolute;
    right: 2%;
    left: 2%;
    height: 1px;
    background: var(--color-border);
}

.analytics-comparison__grid-line.is-top { top: 12%; }
.analytics-comparison__grid-line.is-middle { top: 47%; }
.analytics-comparison__grid-line.is-bottom { top: 82%; }

.analytics-comparison__plot > svg {
    position: absolute;
    z-index: 3;
    inset: 0 8% 2.75rem;
    width: 84%;
    height: calc(100% - 2.75rem);
    overflow: visible;
    pointer-events: none;
}

.analytics-comparison__plot > svg polyline {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.analytics-comparison__plot > svg circle {
    fill: var(--color-card-glass-strong);
    stroke: var(--color-text);
    stroke-width: 1.5;
}

.analytics-comparison__column {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(8rem, 36%);
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto auto;
    justify-items: center;
}

.analytics-comparison__bar {
    display: flex;
    width: min(4.25rem, 75%);
    height: var(--comparison-height);
    min-height: 1.5rem;
    align-self: end;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow-xs);
}

.analytics-comparison__pending {
    height: calc(100% - var(--comparison-verified));
    background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-muted));
}

.analytics-comparison__verified {
    height: var(--comparison-verified);
    background: var(--color-primary);
}

.analytics-comparison__column > strong {
    width: 100%;
    overflow: hidden;
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-2xs);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-comparison__column > span {
    color: var(--color-primary-active);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
}

/* Account settings pages */
.account-page {
    display: grid;
    min-width: 0;
    padding: 0 0 var(--space-5);
    gap: var(--space-5);
}

.account-page__primary-grid,
.account-overview-grid {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.account-page__primary-grid,
.account-page__secondary-grid,
.account-settings-grid {
    align-items: start;
}

.account-page__stack {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-5);
}

.account-page__card {
    overflow: hidden;
}

.account-profile-page__section {
    margin-top: 0;
    padding: 0 var(--space-2);
}

.account-profile-page__section > .ui-section__header {
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.account-profile-page__section .ui-section__title {
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-tight);
}

.account-profile-page__section .ui-section__description {
    font-size: var(--font-size-xs);
}

.account-profile-page__section-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.account-profile-page__section-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.account-profile-page__facts {
    display: grid;
    min-width: 0;
    margin: 0 var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.account-fact-card {
    display: grid;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.account-fact-card__icon {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.account-fact-card__body {
    min-width: 0;
}

.account-fact-card__body p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.account-fact-card__body strong {
    display: block;
    margin-top: var(--space-1);
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-fact-card__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.account-fact-card__dot.is-success {
    background: var(--color-success);
    box-shadow: 0 0 0 3px var(--color-success-soft);
}

.account-fact-card__dot.is-warning {
    background: var(--color-warning);
    box-shadow: 0 0 0 3px var(--color-warning-soft);
}

.account-profile-page__grid {
    display: grid;
    min-width: 0;
    padding: 0;
    align-items: stretch;
    grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 2.02fr);
    gap: var(--space-4);
}

.account-profile-page__grid--personal {
    grid-template-areas: "profile personal";
}

.account-profile-page__grid--organization {
    grid-template-areas:
        "organization details"
        "ownership details"
        "regional regional";
}

.account-profile-page__profile-card {
    grid-area: profile;
}

.account-profile-page__personal-card {
    grid-area: personal;
}

.account-profile-page__organization-card {
    grid-area: organization;
}

.account-profile-page__details-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    grid-area: details;
}

.account-profile-page__details-card .ui-card__body {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
}

.account-profile-page__details-card .account-form-grid {
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.account-profile-page__details-card .account-form-grid__wide {
    min-height: 0;
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.account-profile-page__details-card .form-textarea {
    height: 100%;
    min-height: 6rem;
}

.account-profile-page__ownership-card {
    grid-area: ownership;
}

.account-profile-page__regional-card {
    grid-area: regional;
}

.account-profile-page__regional-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-profile-page .profile-purchase-card {
    height: auto;
}

.account-profile-page .account-inline-actions {
    justify-content: flex-start;
}

.account-profile-page .account-inline-actions .ui-button {
    flex: 0 0 auto;
}

.account-profile-page .profile-identity-card__avatar.ui-avatar {
    width: 4.5rem;
    height: 4.5rem;
}

.account-profile-page .profile-identity-card__meta {
    padding-top: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.account-profile-page .profile-identity-card__meta div {
    display: grid;
    padding-top: 0;
    justify-items: start;
    gap: var(--space-1);
    border-top: 0;
}

.account-profile-page > .ui-page-header {
    padding: 0 var(--space-2);
}

.account-summary-card .ui-card__body {
    display: grid;
    gap: var(--space-5);
}

.account-summary-card .ui-card__body > .ui-status-badge {
    justify-self: start;
}

.account-summary-card__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-4);
}

.account-summary-card__mark {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-xl);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-xs);
}

.account-summary-card__mark img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.account-upload-hint {
    margin-top: calc(var(--space-3) * -1);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.account-summary-card__copy {
    min-width: 0;
}

.account-summary-card__copy p,
.account-summary-card__copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-summary-card__copy h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-detail-list {
    display: grid;
    gap: 0;
}

.account-detail-list > div {
    display: grid;
    min-width: 0;
    padding: var(--space-3) 0;
    align-items: center;
    grid-template-columns: minmax(7rem, 0.75fr) minmax(0, 1.25fr);
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.account-detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-detail-list dd {
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-inline-actions,
.account-card-footer {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.account-inline-actions .ui-button {
    flex: 1 1 auto;
}

.account-card-footer--end {
    justify-content: flex-end;
}

.account-card-footer > p {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-info-list {
    display: grid;
    gap: 0;
}

.account-info-list .ui-info-row {
    padding: var(--space-3) 0;
}

.account-info-list .ui-info-row:first-child {
    padding-top: 0;
}

.account-info-list .ui-info-row:last-child {
    padding-bottom: 0;
}

.account-info-list .ui-info-row + .ui-info-row {
    border-top: 1px solid var(--color-border);
}

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

.account-form-grid .form-group,
.account-form-stack .form-group {
    min-width: 0;
    align-content: start;
}

.account-form-grid .form-group + .form-group,
.account-form-stack .form-group + .form-group {
    margin-top: 0;
}

.account-form-grid__wide {
    grid-column: 1 / -1;
}

.account-form-stack {
    display: grid;
    gap: var(--space-4);
}

.account-create-card,
.account-create-card .ui-card__body {
    height: 100%;
}

.account-create-card__content {
    display: flex;
    height: 100%;
    min-height: 15.5rem;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
}

.account-create-card__icon,
.account-settings-workspace__icon,
.account-session-row__icon,
.account-overview-card__icon,
.account-plan-card__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.account-create-card__content h3,
.account-preference-row h3,
.account-danger-card__content h3,
.account-session-row h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.account-create-card__content p,
.account-preference-row p,
.account-danger-card__content p,
.account-session-row p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.account-create-card__content .ui-button {
    margin-top: auto;
}

.account-overview-grid {
    align-items: stretch;
}

.account-overview-card {
    display: grid;
    min-width: 0;
    min-height: 8.75rem;
    padding: var(--space-4);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.account-overview-card > div {
    min-width: 0;
}

/* Credit cards navigate to their consumption ledger. */
.account-overview-card--link {
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.account-overview-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-sm);
}

.account-overview-card--link:focus-visible {
    outline: 0;
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.account-overview-card__trail {
    display: grid;
    justify-items: end;
    gap: var(--space-2);
}

.account-overview-card__cue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.account-overview-card--link:hover .account-overview-card__cue {
    color: var(--color-primary);
}

.account-overview-card__cue .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--transition-fast) var(--ease-standard);
}

.account-overview-card--link:hover .account-overview-card__cue .ui-icon {
    transform: translateX(2px);
}

.account-overview-card p,
.account-overview-card span:not(.ui-status-badge):not(.account-overview-card__icon):not(.account-overview-card__cue) {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-overview-card h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-plan-card__hero {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-4);
}

.account-plan-card__hero > div {
    min-width: 0;
}

.account-plan-card__hero p {
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.account-plan-card__hero h2 {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.account-plan-card__hero span,
.account-plan-card__features span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-plan-card__features {
    display: flex;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.account-plan-card__features span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.account-plan-card__features .ui-icon {
    color: var(--color-success);
}

.account-compact-empty-card .ui-empty-state {
    min-height: 12rem;
    padding: var(--space-4);
}

.account-invoice-card .ui-empty-state {
    min-height: 12rem;
}

.account-settings-workspace,
.account-session-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.account-settings-workspace > div,
.account-session-row > div {
    min-width: 0;
}

.account-settings-workspace p,
.account-settings-workspace span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-settings-workspace h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-session-row .ui-status-badge {
    margin-left: auto;
}

/* Provider integrations */
/*
 * Integrations directory. The page is a workspace surface: at desktop widths the
 * two sections share one viewport so the whole catalogue reads without scrolling.
 * Each tile carries its provider hue via the inline --integration-accent custom
 * property, tinted here so light and dark themes stay legible.
 */

.integrations-page {
    --integration-gap: clamp(0.5rem, 1.25vh, 0.85rem);
    --integration-pad: clamp(0.75rem, 1.6vh, 1rem);
    --integration-mark: clamp(1.9rem, 3.8vh, 2.35rem);
    --integration-switch-w: 2.375rem;
    --integration-switch-h: 1.3125rem;
    --integration-switch-knob: 0.9375rem;
    display: flex;
    min-width: 0;
    padding: 0 var(--space-2) var(--space-3);
    flex-direction: column;
    gap: clamp(var(--space-3), 2vh, var(--space-5));
}

.integrations-section {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: var(--integration-gap);
}

.integrations-section__header {
    flex: 0 0 auto;
}

.integrations-section__header h2 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.integrations-section__header p {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.integrations-grid {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: var(--integration-gap);
}

.integrations-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.integrations-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Tile shape follows the product reference: mark + name + switch on one row,
 * a shrinkable body, then a full-width bordered action row pinned to the base
 * so every card in a row lines its footer up regardless of body length.
 */
.integration-tile {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--integration-pad);
    flex-direction: column;
    gap: var(--integration-gap);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 6% -10%, color-mix(in srgb, var(--integration-accent) 9%, transparent), transparent 58%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    background-clip: padding-box;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    transition: transform var(--transition-base) var(--ease-standard), box-shadow var(--transition-base) var(--ease-standard), border-color var(--transition-base) var(--ease-standard);
}

.integration-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--integration-accent) 34%, var(--color-card-glass-border));
    box-shadow: var(--shadow-soft);
}

.integration-tile__head {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.integration-tile__mark {
    display: grid;
    width: var(--integration-mark);
    height: var(--integration-mark);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--integration-accent) 24%, transparent);
    border-radius: calc(var(--integration-mark) * 0.3);
    background: color-mix(in srgb, var(--integration-accent) 13%, transparent);
    color: var(--integration-accent);
}

.integration-tile__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
}

/* The body is the only part allowed to give up space on short viewports. */
.integration-tile__body {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
    overflow: hidden;
}

/* One compact line carries connection state plus the connected account. */
.integration-tile__status {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.375rem;
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.integration-tile__status-label {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.integration-tile__status--success .integration-tile__status-label {
    color: var(--color-success-strong);
}

.integration-tile__status--warning .integration-tile__status-label {
    color: var(--color-warning-strong);
}

.integration-tile__status--danger .integration-tile__status-label {
    color: var(--color-danger-strong);
}

.integration-tile__status--info .integration-tile__status-label {
    color: var(--integration-accent);
}

.integration-tile__status-meta {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__status-meta::before {
    margin-right: 0.375rem;
    content: "\00b7";
}

.integration-tile__description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.integration-tile__capabilities {
    display: grid;
    margin-top: 0.125rem;
    gap: 0.25rem;
    list-style: none;
}

.integration-tile__capabilities li {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.integration-tile__capabilities span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__capabilities strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.integration-tile__capabilities strong.is-available {
    color: var(--color-success-strong);
}

.integration-tile__capabilities strong.is-unavailable {
    color: var(--color-warning-strong);
}

.integration-tile__locked {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.integration-tile__locked .ui-icon {
    flex: 0 0 auto;
    transform: translateY(0.125rem);
}

.integration-tile__notice {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-warning-strong);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Switch: link, button, or inert span — all share one track/knob rendering. */
.integration-switch {
    position: relative;
    display: block;
    width: var(--integration-switch-w);
    height: var(--integration-switch-h);
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    appearance: none;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.integration-switch::after {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: var(--integration-switch-knob);
    height: var(--integration-switch-knob);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    content: "";
    transform: translateY(-50%);
    transition: transform var(--transition-base) var(--ease-standard);
}

.integration-switch.is-on {
    background: var(--integration-accent);
    box-shadow: inset 0 0 0 1px var(--integration-accent);
}

.integration-switch.is-on::after {
    transform: translate(calc(var(--integration-switch-w) - var(--integration-switch-knob) - 0.375rem), -50%);
}

.integration-switch--warning.is-on {
    background: var(--color-warning-strong);
    box-shadow: inset 0 0 0 1px var(--color-warning-strong);
}

.integration-switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Always-on integrations read at full strength — they are active, not greyed. */
.integration-switch.is-locked {
    cursor: default;
    opacity: 1;
}

.integration-switch:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.integration-tile__footer {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
}

.integration-tile__footer,
.integration-tile__footer form {
    width: 100%;
    margin: 0;
}

/* The reference "Learn More" row: label left, affordance icon right. */
.integration-tile__action {
    display: flex;
    width: 100%;
    min-height: 2.125rem;
    padding: 0 var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-soft);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.integration-tile__action > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__action .ui-icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.integration-tile__action:hover:not(.is-disabled):not(.is-loading) {
    border-color: color-mix(in srgb, var(--integration-accent) 40%, var(--color-border));
    background: color-mix(in srgb, var(--integration-accent) 8%, transparent);
    color: var(--color-text);
}

.integration-tile__action:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.integration-tile__action.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Informational row on an active integration: stated, not dimmed out. */
.integration-tile__action--on {
    border-color: color-mix(in srgb, var(--color-success-strong) 30%, transparent);
    background: color-mix(in srgb, var(--color-success-strong) 7%, transparent);
    color: var(--color-success-strong);
    cursor: default;
    opacity: 1;
}

.integration-tile__action--on .ui-icon {
    color: var(--color-success-strong);
}

.integration-tile__action.is-loading {
    cursor: progress;
    opacity: 0.7;
    pointer-events: none;
}

/*
 * Desktop: the page is sized to the viewport so every tile is reachable
 * without scrolling. Only the tile bodies flex, so heads and action rows
 * stay put while the sections share whatever height is left.
 */
@media (min-width: 64rem) {
    .has-js .app-page--integrations .integrations-page {
        height: 100%;
        min-height: 0;
    }

    .has-js .app-page--integrations .ui-page-header {
        flex: 0 0 auto;
    }

    /* Sections keep their natural height but give it up before the page does. */
    .has-js .app-page--integrations .integrations-section,
    .has-js .app-page--integrations .integrations-grid {
        min-height: 0;
        flex: 0 1 auto;
    }
}

.account-preference-list {
    display: grid;
}

.account-preference-row {
    display: flex;
    min-width: 0;
    padding: var(--space-4) 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.account-preference-row:first-child {
    padding-top: 0;
}

.account-preference-row:last-child {
    padding-bottom: 0;
}

.account-preference-row + .account-preference-row {
    border-top: 1px solid var(--color-border);
}

.account-preference-row > div {
    min-width: 0;
}

.account-preference-row__toggle {
    flex: 0 0 auto;
}

.account-preference-row__toggle > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.notification-preferences-lock {
    position: relative;
    min-height: 25rem;
}

.notification-preferences-lock.is-locked > form {
    pointer-events: none;
    user-select: none;
    filter: blur(3px);
    opacity: 0.42;
}

.notification-preferences-lock__overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    width: min(100%, 24rem);
    height: max-content;
    min-height: 15rem;
    margin: auto;
    padding: var(--space-5);
    place-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-shadow: var(--shadow-lg);
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.notification-preferences-lock__icon,
.notification-upgrade-modal__plan-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.notification-preferences-lock__eyebrow {
    color: var(--color-primary-active);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.notification-preferences-lock__overlay h3 {
    margin-top: var(--space-1);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.notification-preferences-lock__overlay p,
.notification-preferences-lock__overlay small {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.notification-upgrade-modal .ui-modal__dialog {
    width: min(100%, 38rem);
}

.notification-upgrade-modal__content {
    display: grid;
    gap: var(--space-5);
}

.notification-upgrade-modal__plan {
    display: grid;
    padding: var(--space-4);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.notification-upgrade-modal__plan p,
.notification-upgrade-modal__section h4,
.notification-upgrade-modal__included h4 {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.notification-upgrade-modal__plan h3 {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.notification-upgrade-modal__plan h3 span {
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.notification-upgrade-modal__features {
    display: grid;
    margin-top: var(--space-3);
    gap: var(--space-3);
    list-style: none;
}

.notification-upgrade-modal__features li {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.notification-upgrade-modal__features .ui-icon {
    margin-top: 0.125rem;
    color: var(--color-success);
}

.notification-upgrade-modal__features strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.notification-upgrade-modal__included {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.notification-upgrade-modal__included > div {
    display: grid;
    margin-top: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.notification-upgrade-modal__included span,
.notification-upgrade-modal__notice {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.notification-upgrade-modal__status:empty {
    display: none;
}

.notification-upgrade-modal__status {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}

.notification-upgrade-modal__status.is-error {
    color: var(--color-danger);
}

.account-danger-card {
    border-color: var(--color-danger);
}

.account-danger-card__content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.account-danger-card__content > div {
    min-width: 0;
}

/* Event workspace: single-screen board, module cards and list rail. */

.event-overview__card-lede {
    display: flex;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__card-lede > div {
    min-width: 0;
}

.event-overview__card-lede > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__card-lede strong {
    display: block;
    letter-spacing: var(--letter-spacing-tight);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.event-overview__card-lede strong span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-overview__card-lede p {
    margin-top: var(--space-1);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__gauge {
    --gauge-value: 0;
    --gauge-color: var(--color-primary);
    position: relative;
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: conic-gradient(var(--gauge-color) calc(var(--gauge-value) * 1%), var(--color-surface-muted) 0);
}

.event-overview__gauge::after {
    position: absolute;
    inset: 0.4375rem;
    border-radius: inherit;
    background: var(--color-surface);
    content: "";
}

.event-overview__gauge > span {
    position: relative;
    z-index: 1;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.event-overview__tile-grid {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__tile-grid--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-overview__tile {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__tile > span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__tile > strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.event-overview__tile-grid--quad .event-overview__tile {
    padding: var(--space-2);
}

.event-overview__tile-grid--quad .event-overview__tile > span {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}

.event-overview__tile-grid--quad .event-overview__tile > strong {
    font-size: var(--font-size-lg);
}

.event-overview__tile.is-going,
.event-overview__tile.is-verified {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.event-overview__tile.is-declined {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.event-overview__tile.is-maybe,
.event-overview__tile.is-unverified {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.event-overview__tile.is-awaiting {
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.event-overview__module-list {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
}

.event-overview__module-list--flush {
    margin-top: 0;
}

.event-overview__module-row {
    display: flex;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.event-overview__module-row > div {
    min-width: 0;
    flex: 1;
}

.event-overview__module-row strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__module-row p {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__module-row > .ui-status-badge,
.event-overview__module-row > .ui-icon-button,
.event-overview__module-row > form {
    flex: 0 0 auto;
    margin: 0;
}

.event-overview__module-row.is-disabled {
    opacity: 0.62;
}

.event-overview__link-field {
    display: flex;
    min-width: 0;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
}

.event-overview__link-field code,
.event-overview__link-field input {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__link-field input:focus {
    outline: none;
}

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

.event-overview__action-row form {
    margin: 0;
}

.event-overview__action-row--footer {
    margin-top: auto;
    padding-top: var(--space-2);
}

.event-overview__meta-row {
    display: flex;
    margin-top: auto;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Footers stay one line so the trailing link always lands on the same baseline. */
.event-overview__meta-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__meta-row > a,
.event-overview__meta-row > .event-overview__accent-link {
    flex: 0 0 auto;
}

.event-overview__meta-row strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-overview__meta-row .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__credit-grid {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__credit-grid > div {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__credit-grid span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__credit-grid strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
}

.event-overview__response-list {
    display: grid;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.event-overview__response-list > p {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__response-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-overview__response-row > div {
    min-width: 0;
    flex: 1;
}

.event-overview__response-row strong {
    display: block;
    overflow: hidden;
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__response-time {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-overview__response-row .event-overview__attendee-avatar {
    width: 1.625rem;
    height: 1.625rem;
    border-width: 0;
}

.event-overview__consequences {
    display: grid;
    gap: var(--space-1);
}

.event-overview__consequences > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__consequences svg {
    margin-top: 0.15rem;
    color: var(--color-text-faint);
}

.event-settings__danger-card {
    border-color: var(--color-danger-border);
    background:
        var(--color-card-glass-strong);
}

.event-settings__danger-card .ui-card__title {
    color: var(--color-danger-strong);
}

.event-overview__board .ui-activity-list {
    margin-top: var(--space-1);
}

.event-overview__board .ui-activity-list__item {
    padding: 0 0 var(--space-3) var(--space-6);
    gap: var(--space-2);
}

.event-overview__board .ui-activity-list__item.is-done::before {
    background: var(--color-success-strong);
    box-shadow: 0 0 0 2px var(--color-success-soft);
}

.event-overview__board .ui-activity-list__item.is-next::before {
    background: var(--color-warning-strong);
    box-shadow: 0 0 0 2px var(--color-warning-soft);
}

.event-overview__board .ui-activity-list__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-overview__board .ui-activity-list__time {
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-settings-page,
.workspace-page {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.workspace-rail {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-items: stretch;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-rail .event-overview__card {
    height: 100%;
}

/*
 * Workspace state vocabulary
 * ------------------------------------------------------------------
 * Stat dots and state chips, shared by the Event workspace table card
 * headers and page-action rows. They outlived the summary rail cards
 * they were named for; the name is kept so every page reads the same.
 */
.workspace-summary__stats {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
}

.workspace-summary__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.workspace-summary__stat strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.workspace-summary__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.workspace-summary__stat.is-verified .workspace-summary__dot {
    background: var(--color-success);
}

.workspace-summary__stat.is-pending .workspace-summary__dot {
    background: var(--color-warning);
}

.workspace-summary__stat.is-accepted .workspace-summary__dot {
    background: var(--color-success);
}

.workspace-summary__stat.is-declined .workspace-summary__dot {
    background: var(--color-danger);
}

.workspace-summary__stat.is-tentative .workspace-summary__dot {
    background: var(--color-warning);
}

.workspace-summary__stat.is-awaiting .workspace-summary__dot {
    background: var(--color-neutral);
}

.workspace-summary__chip {
    display: inline-flex;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.workspace-summary__chip .ui-icon {
    color: var(--color-text-muted);
}

.workspace-summary__chip-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.workspace-summary__chip.is-on {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.workspace-summary__chip.is-on .ui-icon,
.workspace-summary__chip.is-on .workspace-summary__chip-state {
    color: inherit;
}

.workspace-summary__chip.is-on .workspace-summary__dot {
    background: var(--color-success);
}

.workspace-summary__chip.is-warn {
    border-color: transparent;
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.workspace-summary__chip.is-warn .ui-icon,
.workspace-summary__chip.is-warn .workspace-summary__chip-state {
    color: inherit;
}

.workspace-summary__chip.is-warn .workspace-summary__dot {
    background: var(--color-warning);
}

/*
 * Registrations page actions
 * ------------------------------------------------------------------
 * Delivery and public-page state sit as chips directly above the action
 * buttons, inside the header row the page already has. The workspace
 * therefore spends no band of its own on Event-level state, and every
 * pixel saved goes to the attendee table, which flexes into what is left.
 */
.workspace-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

/*
 * The header text keeps its own measure. `.ui-page-actions` never shrinks by
 * default, so this block — which grows with every Follow-up state, chip and
 * send button it carries — used to squeeze the title column until the
 * breadcrumb broke over three lines and the description over four. Here the
 * action block yields first and wraps its own rows instead.
 */
.app-page--event-workspace .ui-page-header__main {
    flex: 1 1 auto;
    min-width: min(100%, 26rem);
}

.app-page--event-workspace .ui-page-actions {
    flex: 0 1 auto;
    min-width: 0;
}

/* The trail is one line of context, not a block of text: it gives way at the
   Event title rather than stacking the crumbs on top of each other. Every
   other crumb is a fixed label that has to stay readable, so only the third
   one -- the Event, on every page of this workspace -- clips. */
.app-page--event-workspace .ui-page-header__main > .ui-breadcrumbs .ui-breadcrumbs__list {
    flex-wrap: nowrap;
}

.app-page--event-workspace .ui-page-header__main > .ui-breadcrumbs .ui-breadcrumbs__item {
    flex: 0 0 auto;
}

.app-page--event-workspace .ui-page-header__main > .ui-breadcrumbs .ui-breadcrumbs__item:nth-child(3) {
    min-width: 0;
    flex: 0 1 auto;
}

.app-page--event-workspace .ui-page-header__main > .ui-breadcrumbs .ui-breadcrumbs__item:nth-child(3) > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-actions__state,
.workspace-actions__buttons {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.workspace-actions__state .workspace-summary__chip {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
}

/*
 * A muted aside on the state row: the last sync time, or what an add-on
 * unlocks. It gives way first, wrapping under the chips when space runs out.
 */
.workspace-actions__note {
    min-width: 0;
    max-width: 34rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
    text-align: right;
}

.workspace-actions__state .ui-status-badge {
    flex: 0 0 auto;
}

/* The public page chip keeps its link controls attached to it. */
.workspace-actions__public {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-1);
}

/*
 * Attendee figures in the table card header
 * ------------------------------------------------------------------
 * The gauge and the verified / pending / source counts describe the table
 * directly beneath them, so they share the header row the card already has
 * instead of claiming a summary card of their own.
 */
.workspace-table-card__intro {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.workspace-table-card__gauge.event-overview__gauge {
    width: 2.5rem;
    height: 2.5rem;
}

.workspace-table-card__gauge.event-overview__gauge::after {
    inset: 0.25rem;
}

.workspace-table-card__gauge.event-overview__gauge > span {
    font-size: var(--font-size-2xs);
}

.workspace-table-card__headings {
    min-width: 0;
}

/* Capacity reads beside the title: how full the Event is, not how many rows. */
.workspace-table-card__capacity {
    display: inline-flex;
    padding: 0.0625rem var(--space-2);
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.workspace-table-card__stats {
    row-gap: var(--space-1);
    column-gap: var(--space-3);
}

/* The response mix reads as a bar on the stats line, beside the figures. */
.workspace-table-card__bar.ui-progress__segments {
    width: 5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-color: transparent;
}

.workspace-table-card__sources {
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
    color: var(--color-text-faint);
}

.workspace-body {
    min-width: 0;
    padding: 0 var(--space-2);
}

.workspace-table-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.workspace-table-card.ui-card--compact .ui-card__header {
    padding: var(--space-3) var(--space-3) 0;
}

.workspace-table-card.ui-card--compact .ui-card__body {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.workspace-table-card .ui-card__title {
    font-size: var(--font-size-sm);
}

.workspace-table-card .ui-card__subtitle {
    margin-top: 0;
    font-size: var(--font-size-2xs);
}

.workspace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.workspace-toolbar form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.workspace-toolbar .form-input-wrap {
    width: 15rem;
}

.workspace-toolbar .form-control {
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
}

.event-logs__header {
    flex-direction: column;
    gap: var(--space-3);
}

.event-logs__toolbar {
    width: 100%;
}

.workspace-toolbar .event-logs__filters {
    display: grid;
    width: 100%;
    min-width: 0;
    align-items: center;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-toolbar .event-logs__filters .form-input-wrap {
    width: 100%;
}

.event-logs__filters .form-control,
.event-logs__filters .form-select {
    width: 100%;
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
}

.event-logs__filter-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-logs__filter-actions .ui-button {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
}

.event-logs__table .table-base {
    min-width: 68rem;
}

.event-logs__table small {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-logs__activity {
    align-items: flex-start;
}

.event-logs__activity .event-attendees__avatar {
    flex: 0 0 auto;
}

.event-logs__time {
    white-space: nowrap;
}

@media (max-width: 63.99rem) {
    .workspace-toolbar .event-logs__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.99rem) {
    .workspace-toolbar .event-logs__filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.workspace-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3125rem var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

a.workspace-chip:hover {
    border-color: var(--color-text-faint);
    color: var(--color-text);
}

.workspace-chip.is-active {
    border-color: transparent;
    background: var(--color-action);
    color: var(--color-action-contrast);
}

.workspace-chip__count {
    font-weight: var(--font-weight-semibold);
    opacity: 0.72;
}

.workspace-table {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
}

.workspace-table .table-base {
    min-width: 46rem;
}

.workspace-table .table-base thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
}

.workspace-table .table-base td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.workspace-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.workspace-person__avatar {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.workspace-person__meta {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
}

.workspace-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

.workspace-row-actions form {
    margin: 0;
}

/* Credit usage ledger */
.credit-usage-summary {
    margin-bottom: var(--space-4);
}

.credit-usage__table .table-base {
    min-width: 52rem;
}

.credit-usage__table .table-base td small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.credit-usage__amount {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.credit-usage__amount.is-consumed {
    color: var(--color-text);
}

.credit-usage__amount.is-reserved {
    color: var(--color-info);
}

.credit-usage__amount.is-released {
    color: var(--color-success);
}

.credit-usage__reference {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-layer-soft);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--font-size-2xs);
}

.credit-usage__muted {
    color: var(--color-text-faint);
}

.plan-upgrade__features {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
    list-style: none;
}

.plan-upgrade__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.plan-upgrade__features .ui-icon {
    flex: none;
    margin-top: 0.1rem;
    color: var(--color-success);
}

.plan-upgrade__note {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.credit-buy__quote {
    display: grid;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
    gap: var(--space-2);
}

.credit-buy__quote-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.credit-buy__quote-note.is-error {
    color: var(--color-danger);
}

.credit-buy__quote-rate {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.credit-buy__quote-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.credit-buy__quote-total strong {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
}

.workspace-table-foot {
    display: flex;
    margin-top: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.workspace-table-foot strong {
    color: var(--color-text);
}

@media (min-width: 64rem) {
    .has-js .app-page--event-board .event-overview-page,
    .has-js .app-page--event-board .event-settings-page,
    .has-js .app-page--event-workspace .workspace-page {
        display: flex;
        height: 100%;
        min-height: 0;
        flex-direction: column;
    }

    .has-js .app-page--event-board .ui-page-header,
    .has-js .app-page--event-board .event-overview__masthead,
    .has-js .app-page--event-board .ui-alert,
    .has-js .app-page--event-board .app-success-feedback,
    .has-js .app-page--event-workspace .ui-page-header,
    .has-js .app-page--event-workspace .workspace-rail {
        flex: 0 0 auto;
    }

    .has-js .app-page--event-board .event-overview__tab-panel {
        min-height: 0;
        flex: 1 1 auto;
        align-content: stretch;
        grid-template-rows: minmax(0, 1fr);
    }

    .has-js .app-page--event-board .event-overview__board {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .has-js .app-page--event-board .event-overview__card {
        min-height: 0;
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-overview__card > .ui-card__body {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    /*
     * The Event details card and the board's module cards pin their primary
     * actions / footer link outside the scroll area, so only the middle
     * content scrolls and the action buttons or footer are never scrolled
     * out of view. See .event-overview__reference-scroll / .event-overview__card-scroll.
     */
    .has-js .app-page--event-board .event-overview__main-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__rsvp-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__verification-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__activity-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__delivery-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__agenda-card > .ui-card__body {
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-overview__reference-scroll,
    .has-js .app-page--event-board .event-overview__rsvp-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__verification-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__activity-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__delivery-card .event-overview__card-scroll {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    .has-js .app-page--event-board .event-overview__reference-scroll {
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .has-js .app-page--event-board .event-overview__description-card .ui-card__body {
        display: block;
    }

    .has-js .app-page--event-workspace .workspace-body {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .has-js .app-page--event-workspace .workspace-table-card {
        min-height: 0;
        flex: 1 1 auto;
    }

    .has-js .app-page--event-workspace .workspace-table-card > .ui-card__body {
        display: flex;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }

    .has-js .app-page--event-workspace .workspace-table {
        min-height: 0;
        flex: 1 1 auto;
    }

    .has-js .app-page--event-workspace .workspace-rail .event-overview__card {
        overflow: hidden;
    }
}

/* Board cards keep their primary actions visible; only their content scrolls. */

@media (min-width: 64rem) {
    .has-js .app-page--event-board .event-delivery-automation-card .ui-card__body,
    .has-js .app-page--event-board .event-public-registration-card .ui-card__body {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: var(--space-2);
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__switches {
        min-height: 0;
        flex: 1 1 auto;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__credits {
        padding: var(--space-2) 0;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__actions,
    .has-js .app-page--event-board .event-public-registration-card__footer,
    .has-js .app-page--event-board .event-public-registration-card > .ui-card__body > form {
        flex: 0 0 auto;
        margin-top: auto;
    }

    .has-js .app-page--event-board .event-public-registration-card__empty,
    .has-js .app-page--event-board .event-public-registration-card__section {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }
}

/*
 * Event settings board
 * ------------------------------------------------------------------
 * A twelve-column board ordered by what the organizer acts on: what is
 * waiting on them, then the settings they change, then the connections
 * behind those settings, then read-only reference, then the destructive
 * area. One card per cell, so the board reflows from 7/5 and 6/6 pairs
 * to two equal columns and then to one without re-nesting the sections
 * inside a card. Cards keep their natural height and the settings page
 * scrolls as one surface, so nothing is padded out to fill a fixed row.
 */
.event-settings__board {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-content: start;
    gap: var(--space-3);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.event-settings__cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    grid-column: span 12;
}

.event-settings__cell--major {
    grid-column: span 7;
}

.event-settings__cell--minor {
    grid-column: span 5;
}

.event-settings__cell--half {
    grid-column: span 6;
}

.event-settings__cell--full {
    grid-column: span 12;
}

/* Page head: breadcrumbs and one title line, with the Event's status beside it. */
.event-settings__head {
    display: flex;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-2);
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-settings__head .dash-head__title {
    margin: var(--space-2) 0 0;
}

/*
 * Delivery essentials: sender, Follow-up, the connected calendar and public
 * registration as four columns of one strip. Each column is a head (icon, name,
 * state), a body that carries the value or its control, and a foot that explains
 * and links out, so the four read as one row across rather than four cards.
 */
.event-settings__board > .event-settings__essentials-card > .ui-card__body {
    padding: 0;
    gap: 0;
}

/*
 * Configured Flow heads that same card as one full row, so it carries the
 * padding the zeroed card body no longer provides and a rule divides it from
 * the strip below. Its meta and action sit together at the end of the heading.
 */
.event-settings__flow {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-4);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

.event-settings__flow-aside {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

/* One quiet line under the run: what it costs and what depends on what. */
.event-settings__flow-foot {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__flow-foot .ui-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
    color: var(--color-text-faint);
}

.event-settings__essentials {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
}

.event-settings__ess {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.event-settings__ess + .event-settings__ess {
    box-shadow: inset 1px 0 0 var(--color-border);
}

.event-settings__ess-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-settings__ess-head h3 {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.event-settings__ess-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

/* A provider mark keeps its own brand colors, so it sits on plain surface. */
.event-settings__ess-icon--brand {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.event-settings__ess-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: var(--color-success);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-settings__ess-state:empty {
    display: none;
}

.event-settings__ess-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-2);
}

.event-settings__ess-value {
    min-width: 0;
    flex: 1 1 auto;
}

.event-settings__ess-value strong {
    display: block;
    overflow: hidden;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-settings__ess-value p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-settings__ess-foot {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-settings__ess-foot p {
    min-width: 0;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-settings__ess-foot--actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
}

.event-settings__ess-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-settings__ess-note.is-warning {
    color: var(--color-warning-strong, var(--color-warning));
}

.event-settings__ess-note.is-error {
    color: var(--color-danger);
}

/* The sender column is the one control on the strip: the select fills it. */
.event-settings__sender {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-settings__sender .form-select {
    min-width: 0;
    width: 100%;
}

/* With JavaScript the dropdown saves on change, so the fallback button steps aside. */
.event-settings__sender.is-auto .event-settings__sender-save {
    display: none;
}

/* The danger notice reads as one line: title and reason side by side. */
.event-settings__danger-card .ui-alert {
    padding: var(--space-2) var(--space-3);
    align-items: center;
}

.event-settings__danger-card .ui-alert__content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.event-settings__danger-card .ui-alert__content p {
    margin: 0;
}

/* The body carries the column, so a card's foot can pin to its bottom. */
.event-settings__cell > .ui-card__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
}

/* Each card is one titled panel: head, content, and a foot that pins down. */
.event-settings__panel {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
}

.event-settings__panel-head {
    display: flex;
    min-height: 1.625rem;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.event-settings__panel-head h3 {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/*
 * A lead panel titles its own card, so its heading carries card weight and
 * takes a one-line description under it.
 */
.event-settings__panel--lead .event-settings__panel-head h3 {
    color: var(--color-text);
    font-size: var(--font-size-base);
    letter-spacing: normal;
    text-transform: none;
}

.event-settings__panel-title {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.event-settings__panel-sub {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__panel-meta {
    padding-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-settings__panel-meta strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/*
 * Anything waiting on the organizer, stacked above every setting. The card
 * keeps the page's glass surface and takes one warning edge, so the strips
 * inside carry the urgency without a second full-strength surface.
 */
.event-settings__attention-card {
    box-shadow: inset 0.1875rem 0 0 var(--color-warning), var(--shadow-card);
}

.event-settings__attention-list {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.event-settings__attention-list .event-notice {
    margin: 0;
}

/* Stacked state rows inside a card. */
.event-settings__rows {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

/*
 * Connected services and automations share one tile shape, so both rows
 * read as a single system and stretch to fill however many tiles exist.
 */
.event-settings__tile-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.event-settings__tile {
    display: flex;
    min-width: 0;
    padding: var(--space-3);
    flex-direction: column;
    gap: 0.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.event-settings__tile-head {
    display: flex;
    margin-bottom: var(--space-1);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-settings__tile strong {
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

.event-settings__tile p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__tile em {
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-style: normal;
    line-height: var(--line-height-normal);
}

.event-settings__tile.is-on {
    border-color: var(--color-success);
}

.event-settings__tile-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-settings__notice-row {
    display: flex;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.event-settings__notice-row > div {
    min-width: 0;
    flex: 1 1 11rem;
}

.event-settings__notice-row strong {
    display: block;
    font-size: var(--font-size-sm);
}

.event-settings__notice-row p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__notice-row form {
    margin: 0;
}

.event-settings__panel-notice {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__panel-hint {
    display: flex;
    padding: var(--space-2) var(--space-3);
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px solid var(--event-panel-border, var(--color-border));
    border-radius: var(--radius-lg);
    color: var(--event-panel-muted, var(--color-text-muted));
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__panel-hint svg {
    margin-top: 0.05rem;
    flex: 0 0 auto;
    color: var(--color-warning);
}

/* Card actions pin to the bottom, so cards in a row end on one line. */
.event-settings__panel-foot {
    display: flex;
    margin-top: auto;
    padding-top: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.event-settings__panel-foot > p {
    min-width: 0;
    flex: 1 1 11rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.event-settings__panel-foot > p strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-settings__panel-foot form {
    margin: 0;
}

.event-settings__panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/*
 * Read-only reference on the accent-tinted panel: the four facts run across
 * the full width instead of down, so the reference stays shallow.
 */
.event-settings__reference-card .event-overview__automation-card {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
}

/* The panel's own ink, since this card no longer sits inside a delivery panel. */
.event-settings__reference-card .event-overview__card-figure {
    flex: 0 0 auto;
    color: var(--event-panel-text);
}

.event-settings__reference-card .event-overview__meta-row {
    padding-top: var(--space-1);
    border-top: 0;
    color: var(--event-panel-muted);
}

.event-settings__reference-card .event-overview__meta-row strong {
    color: var(--event-panel-text);
}

.event-settings__reference-card .event-overview__accent-link {
    color: var(--event-panel-accent);
}

.event-settings__reference-card .event-overview__accent-link:hover {
    color: color-mix(in srgb, var(--event-panel-accent) 70%, #ffffff);
}

.event-settings__facts {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
    /* The card shares its row with Event status, so the four checks sit two by two. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.event-settings__fact {
    display: flex;
    min-width: 0;
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--event-panel-row, var(--color-surface));
}

.event-settings__fact-body {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.125rem;
}

.event-settings__fact-body strong {
    overflow: hidden;
    color: var(--event-panel-text, var(--color-text));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-settings__fact-body p {
    overflow: hidden;
    color: var(--event-panel-muted, var(--color-text-muted));
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-settings__fact-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--event-panel-glow, var(--color-primary-soft));
    color: var(--event-panel-text, var(--color-primary));
}

.event-settings__fact-check {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--event-panel-border, var(--color-border));
    border-radius: var(--radius-pill);
    color: transparent;
}

.event-settings__fact.is-done .event-settings__fact-check {
    border-color: rgba(69, 200, 149, 0.38);
    background: rgba(69, 200, 149, 0.16);
    color: #45c895;
}

/*
 * The destructive area reads as one card: what delete does on the left, what
 * it keeps on the right, and the blocked reason underneath both.
 */
.event-settings__panel--danger .event-settings__panel-head h3 {
    color: var(--color-danger-strong);
}

.event-settings__danger-body {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.event-settings__timeline {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-settings__timeline-step {
    position: relative;
    display: grid;
    padding-top: var(--space-4);
    gap: 0.125rem;
}

.event-settings__timeline-step::before {
    position: absolute;
    top: 0.375rem;
    right: 0;
    left: 0;
    height: 0.125rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    content: "";
}

.event-settings__timeline-step.is-done::before {
    background: var(--color-success);
}

.event-settings__timeline-step.is-next::before {
    background: var(--color-primary);
}

.event-settings__timeline-marker {
    position: absolute;
    top: 0.125rem;
    left: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.event-settings__timeline-step.is-done .event-settings__timeline-marker {
    background: var(--color-success);
}

.event-settings__timeline-step.is-next .event-settings__timeline-marker {
    background: var(--color-primary);
}

.event-settings__timeline-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-settings__timeline time {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

@media (min-width: 64rem) {
    /*
     * Settings opts out of the fixed-height board: the content area scrolls
     * as one surface so every card can size to its own content.
     */
    .has-js .app-page--event-settings .app-content {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    .has-js .app-page--event-settings .event-settings-page {
        display: grid;
        height: auto;
    }

    .has-js .app-page--event-settings .event-overview__tab-panel {
        flex: 0 0 auto;
        align-content: start;
        grid-template-rows: auto;
    }

    .has-js .app-page--event-settings .event-overview__card,
    .has-js .app-page--event-settings .event-overview__card > .ui-card__body,
    .has-js .app-page--event-settings .event-overview__reference-scroll {
        min-height: 0;
        overflow: visible;
    }

    .has-js .app-page--event-settings .event-overview__main-card {
        height: auto;
    }
}

/* Event cards lead with the location or meeting provider. */
.event-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.event-card {
    display: flex;
    min-width: 0;
    padding: var(--space-3);
    flex-direction: column;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.event-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

/* The media band: a map, a provider panel, or a fallback. */
.event-card__media {
    position: relative;
    height: 9.5rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

/* Overlays the fallback. A failed request paints nothing, so the address
   beneath simply shows through. */
.event-card__map {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.event-card__placeholder,
.event-card__provider {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
}

.event-card__placeholder {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-card__placeholder .ui-icon {
    color: var(--color-text-faint);
}

.event-card__media.is-online {
    background:
        radial-gradient(
            120% 120% at 20% 0%,
            color-mix(in srgb, var(--color-primary) 16%, transparent),
            transparent 70%
        ),
        var(--color-surface-subtle);
}

.event-card__provider-mark {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
}

.event-card__provider-name {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-card__provider-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.event-card__provider-link:hover {
    text-decoration: underline;
}

.event-card__provider-link .ui-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.event-card__provider-pending {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

/* Overlays on the media band. */
.event-card__badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
}

.event-card__badge .ui-status-badge {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.event-card__map-link {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
}

.event-card__map-link:hover {
    color: var(--color-primary);
}

.event-card__title {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.012em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card__description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: calc(-1 * var(--space-2));
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Three stats divided by hairlines, as in the reference. */
.event-card__stats {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.event-card__stat {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-card__stat + .event-card__stat {
    border-left: 1px solid var(--color-border);
}

.event-card__stat strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-card__stat .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    color: var(--color-text-faint);
}

.event-card__chips {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-card__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-layer);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.event-card__chip .ui-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.event-card__chip.is-success { color: var(--color-success); }
.event-card__chip.is-warning { color: var(--color-warning); }
.event-card__chip.is-danger { color: var(--color-danger); }
.event-card__chip.is-info { color: var(--color-info); }

/* The action closes the card, full width like the reference's button. */
.event-card__form {
    margin-top: auto;
}

.event-card__action {
    width: 100%;
    margin-top: auto;
}

.event-card__form .event-card__action {
    margin-top: 0;
}

/* Event search: an island in the masthead, built from the same command surface
   as the navigation and account pills. */
.event-search {
    display: flex;
    min-width: 0;
    height: var(--control-height);
    padding: 0 0.375rem 0 var(--space-4);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-glass);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    color: var(--color-text);
}

.event-search__field {
    width: 11rem;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-xs);
}

.event-search__field::placeholder {
    color: var(--color-text-muted);
}

.event-search__field:focus {
    outline: 0;
}

/* The island itself takes the focus ring, so the field inside stays clean. */
.event-search:focus-within {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--color-focus);
}

/* Chrome's own clear affordance would sit oddly against the dark pill. */
.event-search__field::-webkit-search-cancel-button {
    display: none;
}

.event-search__clear,
.event-search__submit {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-search__clear:hover,
.event-search__submit:hover {
    background: var(--color-control-hover);
    color: var(--color-text);
}

.event-search__submit {
    background: var(--color-glass-control);
    color: var(--color-text);
}

.event-search__clear:focus-visible,
.event-search__submit:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus);
}

/* The grid stands on the page now rather than inside a card. */
.event-list {
    display: block;
    min-width: 0;
    margin-top: var(--space-5);
}

.event-layout-switch {
    display: inline-flex;
    flex: 0 0 auto;
    padding: var(--space-1);
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.event-layout-switch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.event-layout-switch__option:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.event-layout-switch__option.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-layout-switch__option:focus-visible,
.event-table a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.event-table .table-base {
    min-width: 56rem;
}

.event-table__event {
    width: 24%;
}

.event-table__meeting {
    width: 20%;
}

.event-table__detail {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    overflow-wrap: anywhere;
}

.event-table__title {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.event-table__title:hover {
    color: var(--color-primary);
}

.event-table__detail small {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-table__inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    overflow-wrap: anywhere;
}

.event-table__inline .ui-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   Event overview: command bar, delivery timeline, public reach and workspace
   ========================================================================== */

/*
 * The board reads as three stacks rather than a wrapping row of cards, so each
 * column can answer one question: what the Event is, what is being delivered,
 * and what Bloomod is running for it.
 */
.event-overview__column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
}

/*
 * Cards used to be grid items filling their own cell, so they asked for the
 * full height. Stacked in a column they have to size to their content instead,
 * or every card would claim the whole column and they would sit on top of one
 * another.
 */
.app-page--event-overview .event-overview__column > .event-overview__card,
.event-overview__column > .event-overview__card {
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    align-self: stretch;
    overflow: visible;
}

.app-page--event-overview .event-overview__column > .event-overview__card > .ui-card__body,
.event-overview__column > .event-overview__card > .ui-card__body {
    height: auto;
    overflow: visible;
}

/* ---- funnel stage caption ---- */

.event-overview__track-step {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
}

/* ---- command bar ---- */

/*
 * Three fixed lanes rather than one wrapping row. When the buttons no longer
 * fit they wrap inside their own lane, so the lead stays on the left and the
 * attention chip stays on the right instead of dropping underneath the lead.
 */
.event-overview__command {
    display: grid;
    align-items: center;
    margin: var(--space-4) var(--space-2) 0;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background: var(--color-card-glass);
    box-shadow: var(--shadow-card);
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.event-overview__command-lead {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--space-4);
    border-right: 1px solid var(--color-border);
    gap: 0.1rem;
}

.event-overview__command-lead strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-overview__command-lead span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-overview__command-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-overview__command-actions form {
    margin: 0;
}

/*
 * Attendee Flow strip
 * ------------------------------------------------------------------
 * When the Flow owns delivery there is nothing to press in this lane:
 * the bar reports the stages Bloomod runs instead of repeating them as
 * buttons. It keeps the lane and the row height the manual mode uses,
 * so switching the Flow on never moves the board underneath.
 */
.event-overview__command-flow {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/*
 * Attendee Flow journey
 * ------------------------------------------------------------------
 * The Flow as one connected run: a dot per stage, joined by the line
 * Bloomod walks down. A lit dot sends, a hollow dot is a gap in the
 * run, and only the line between two lit stages carries colour, so
 * the shape of the run reads before any of the words do. One
 * component, two sizes: compact rides in the Overview command bar,
 * full heads the Settings card and adds what each stage does.
 */
.flow-journey {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.flow-journey--compact {
    --flow-journey-dot: 2rem;

    flex: 1 1 auto;
}

/*
 * The full run is a chain, not a ruler: it keeps to a readable width and sits
 * centred in the card, so the connectors stay short enough to read as links
 * between stages instead of four long rules across the page.
 */
.flow-journey--full {
    --flow-journey-dot: 2.75rem;

    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
    padding-block: var(--space-2) var(--space-1);
    gap: var(--space-3);
}

.flow-journey__step {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
}

/*
 * The connector belongs to the gap between two dots, not to either one, so it
 * starts and ends clear of them whatever the column is wide.
 */
.flow-journey__step:not(:last-child)::after {
    position: absolute;
    top: calc(var(--flow-journey-dot) / 2);
    left: calc(50% + var(--flow-journey-dot) / 2 + var(--space-2));
    width: calc(100% - var(--flow-journey-dot) - var(--space-4));
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    content: "";
}

/* Lit only where the run really continues from this stage into the next. */
.flow-journey__step.is-linked::after {
    background: var(--color-primary);
}

.flow-journey__dot {
    display: grid;
    width: var(--flow-journey-dot);
    height: var(--flow-journey-dot);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-faint);
}

.flow-journey__step.is-on .flow-journey__dot {
    border-color: transparent;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* A stage the organizer turned off still shows, so the gap in the run is
   visible rather than silently missing from the chain. */
.flow-journey__step.is-off .flow-journey__dot {
    border-style: dashed;
    background: transparent;
}

.flow-journey__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
    line-height: var(--line-height-snug);
}

.flow-journey__copy strong {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.flow-journey--full .flow-journey__copy strong {
    font-size: var(--font-size-sm);
}

.flow-journey__copy small {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.flow-journey__detail {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.flow-journey__step.is-off .flow-journey__copy strong {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* The public-page controls are not a stage, so they sit off the end of the
   chain on a wider gap. A rule would be clearer still, but it would hang in
   mid-air on the narrow widths where this block wraps onto its own row. */
.event-overview__command-flow-aside {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    margin-left: var(--space-4);
    gap: var(--space-2);
}

/* The way into the Flow dialog rides on the lead's second line in both
   modes, so turning the Flow off never hides the control that turns it
   back on, and neither mode spends a button slot on it. */
.event-overview__command-lead-note.is-warn {
    color: var(--color-warning-strong);
}

.event-overview__command-flow-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-size: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.event-overview__command-flow-link::before {
    margin-right: 0.25rem;
    color: var(--color-text-faint);
    content: "·";
}

.event-overview__command-flow-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* A count rides inside its own button so the number and the verb stay one
   target rather than drifting into a separate badge. */
.event-overview__command-count {
    display: inline-flex;
    min-width: 1.25rem;
    margin-left: var(--space-2);
    padding: 0 0.35rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    color: inherit;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ui-button--primary .event-overview__command-count {
    background: rgba(0, 0, 0, 0.18);
}

.event-overview__command-attention,
.event-overview__command-clear {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
}

.event-overview__command-attention {
    border-color: rgba(240, 169, 72, 0.28);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
    text-decoration: none;
    transition: background var(--transition-fast) var(--ease-standard);
}

.event-overview__command-attention:hover {
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
}

.event-overview__command-clear {
    border-color: var(--color-border);
    background: var(--color-layer-faint);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* ---- delivery timeline ---- */

.event-overview__timeline {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-overview__timeline-step {
    position: relative;
    display: grid;
    min-width: 0;
    padding: var(--space-2) 0;
    align-items: center;
    column-gap: var(--space-3);
    grid-template-columns: 1.875rem minmax(0, 1fr) auto;
}

.event-overview__timeline-step + .event-overview__timeline-step {
    border-top: 1px solid var(--color-border);
}

/* One continuous rule behind the markers, trimmed at both ends so the
   sequence starts and stops on a stage rather than in empty space. */
.event-overview__timeline-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.9375rem;
    width: 1px;
    background: var(--color-border);
}

.event-overview__timeline-step:first-child .event-overview__timeline-spine {
    top: 50%;
}

.event-overview__timeline-step:last-child .event-overview__timeline-spine {
    bottom: 50%;
}

.event-overview__timeline-dot {
    position: relative;
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.event-overview__timeline-step.is-done .event-overview__timeline-dot {
    border-color: rgba(69, 200, 149, 0.34);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.event-overview__timeline-step.is-active .event-overview__timeline-dot {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.event-overview__timeline-step.is-waiting .event-overview__timeline-dot {
    border-color: rgba(240, 169, 72, 0.32);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.event-overview__timeline-step.is-alert .event-overview__timeline-dot {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.event-overview__timeline-body {
    min-width: 0;
}

.event-overview__timeline-body strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.event-overview__timeline-body p {
    margin: 0.1rem 0 0;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    overflow-wrap: anywhere;
}

.event-overview__timeline-action {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-2);
}

.event-overview__timeline-action form {
    margin: 0;
}

.event-overview__timeline-note {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-overview__timeline-card .event-overview__card-figure small {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
}

/* ---- public reach as its own card ---- */

/* Standing alone, the section supplies its own heading, so it drops the rule
   that separated it from the response panes it used to sit beneath. */
.event-overview__public-card .event-overview__reach {
    padding-top: 0;
    border-top: 0;
}

/* ---- workspace and credits ---- */

.event-overview__workspace-links {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__workspace-link {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-faint);
    color: inherit;
    gap: var(--space-2);
    text-decoration: none;
    transition:
        background var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard);
}

.event-overview__workspace-link:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}

.event-overview__workspace-link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.event-overview__workspace-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-layer);
    color: var(--color-text-soft);
}

.event-overview__workspace-link > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.event-overview__workspace-link strong {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.event-overview__workspace-link strong + span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    overflow-wrap: anywhere;
}

.event-overview__workspace-credits {
    display: grid;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__workspace-credits dt {
    display: flex;
    align-items: center;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    gap: var(--space-1);
}

.event-overview__workspace-credits dd {
    display: flex;
    margin: var(--space-1) 0 0;
    align-items: baseline;
    gap: var(--space-1);
}

.event-overview__workspace-credits dd strong {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
}

.event-overview__workspace-credits dd span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-overview__workspace-note {
    display: flex;
    margin: var(--space-3) 0 0;
    align-items: flex-start;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    gap: var(--space-2);
    line-height: var(--line-height-snug);
}

.event-overview__workspace-note .ui-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/*
 * In a single board column the agenda block is about one seventh of a third of
 * the board wide, which is not enough for both the Event name and an avatar
 * row: the name was the part that got clipped. The attendee faces already have
 * their own place in the Event details card, so the block keeps the name.
 */
.app-page--event-overview .event-overview__agenda-block .event-overview__attendee-preview {
    display: none;
}

/* The block carries only the start time at this width, centred and never clipped. */
.app-page--event-overview .event-overview__agenda-block {
    align-items: center;
    padding: var(--space-1) 0;
}

.app-page--event-overview .event-overview__agenda-block strong {
    display: block;
    overflow: visible;
    font-size: var(--font-size-2xs);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

/*
 * The agenda block is placed with percentage geometry, which needs a canvas
 * with real height to resolve against. Stretched across a tall board row the
 * card supplied that on its own; sized to its content in a column it collapses
 * to the height of the hour labels, and the block's own min-height then pushed
 * it over the footer. The canvas keeps a floor, and clips whatever still
 * exceeds it rather than letting it escape the plot.
 */
.app-page--event-overview .event-overview__agenda-canvas {
    min-height: 12rem;
    overflow: hidden;
}

/* ==========================================================================
   Billing: purchase-first layout
   ========================================================================== */

.app-page--billing .account-page {
    gap: var(--space-3);
}

/* ---- buy credits ---- */

/*
 * The purchase form reads as one line: what to buy, how much, what it costs,
 * and the two buttons. Stacked in a narrow column it took four rows and sat
 * below the fold.
 */
/*
 * The purchase bar carries its own title instead of a card header: a heading,
 * a subtitle and a separate hint line cost more height than the controls they
 * introduced, for a row whose job is obvious from its fields.
 */
.billing-buy__grid {
    --control-height: var(--control-height-sm);
    display: grid;
    align-items: end;
    gap: var(--space-2) var(--space-4);
    grid-template-columns:
        auto
        minmax(9.5rem, 0.85fr)
        minmax(7.5rem, 0.55fr)
        minmax(0, 1.6fr)
        auto;
}

.billing-buy__lead {
    display: flex;
    min-width: 0;
    height: var(--control-height-sm);
    flex-direction: column;
    justify-content: center;
    padding-right: var(--space-4);
    border-right: 1px solid var(--color-border);
    gap: 0.1rem;
}

.billing-buy__lead strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
}

.billing-buy__lead span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.billing-buy__grid .form-group {
    min-width: 0;
    margin: 0;
}

.billing-buy__grid .form-label {
    margin-bottom: var(--space-1);
}

/* The quote is written by the checkout script as a single string, so it stays
   one readout rather than a set of cells that JavaScript would have to fill. */
.billing-buy__quote {
    display: flex;
    min-height: var(--control-height-sm);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-layer-faint);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.billing-buy__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.billing-buy__footer {
    display: flex;
    width: 100%;
    min-height: var(--control-height-sm);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.billing-buy__footer p {
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
}

.billing-usage-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.billing-usage-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-faint);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
    text-decoration: none;
    transition:
        background var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard);
}

.billing-usage-link:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.billing-usage-link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ---- plan and add-on ---- */

.billing-plan-facts {
    display: grid;
    margin: var(--space-4) 0 0;
    gap: var(--space-2) var(--space-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Each pair is a label and its value; the rule keeps one pair's value from
   reading as the next pair's label. */
.billing-plan-facts > div + div {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
}

.billing-plan-facts > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
}

.billing-plan-facts > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.billing-plan-facts dt {
    display: flex;
    min-width: 0;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    gap: var(--space-2);
}

.billing-plan-facts dd {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.billing-plan-facts .ui-icon.is-on {
    color: var(--color-success);
}

.billing-plan-facts .ui-icon.is-off {
    color: var(--color-text-faint);
}

.billing-plan-subscription,
.billing-addon-status {
    display: grid;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-plan-subscription dt,
.billing-addon-status dt {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.billing-plan-subscription dd,
.billing-addon-status dd {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.billing-plan-subscription dd small {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
}

.billing-addon-features {
    display: flex;
    margin: var(--space-4) 0 0;
    padding: 0;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
}

.billing-addon-features li {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    gap: var(--space-2);
}

.billing-addon-features .ui-icon {
    flex-shrink: 0;
    color: var(--color-success);
}

/*
 * Copy the public link, or open it: two intents, two controls, one outline.
 * They share an edge so the pair reads as one item in the command bar without
 * either action hiding inside the other.
 */
.event-overview__command-split {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
}

.event-overview__command-split > .ui-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.event-overview__command-split > .ui-icon-button {
    width: auto;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--color-border-strong);
}

/* A focus ring has to sit above the neighbour it shares an edge with. */
.event-overview__command-split > .ui-button:focus-visible,
.event-overview__command-split > .ui-icon-button:focus-visible {
    position: relative;
    z-index: 1;
}

/*
 * A channel tile that leads somewhere covers itself with a transparent link so
 * the whole card is one click target. The footer action keeps its own hit area
 * by sitting above the overlay.
 */
.integration-tile__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.integration-tile__link:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.integration-tile__head,
.integration-tile__body,
.integration-tile__footer {
    position: relative;
    z-index: 2;
}

/*
 * Email channel workspace: Overview, Domains, Sender emails and Delivery logs
 * as panels behind the context island. Reuses the billing tiles (bz-*) and the
 * credit ledger rows (cu-*); everything here is layout and the few pieces those
 * do not cover. Theme tokens only, so both colour modes work unchanged.
 */
.ec { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.ec-panel { display: grid; gap: var(--space-4); min-width: 0; }
.ec-panel[hidden] { display: none; }
.ec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.ec-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ec-head__title .dash-head__title { margin: 0; }
.ec-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ec-head__actions form { display: contents; }
.ec-plan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ec-plan-pill--basic { background: var(--color-layer-soft); color: var(--color-text-soft); }

.ec-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ec-grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ec-grid-rail { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ec-grid-3 > *, .ec-grid-main > *, .ec-grid-rail > * { min-width: 0; }

.ec-card { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-2xl); }
.ec-card--tight { gap: var(--space-3); padding: var(--space-4); }
.ec-card--flush { gap: 0; padding: 0; overflow: hidden; }
.ec-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ec-card--flush > .ec-card__head { padding: var(--space-5) var(--space-5) var(--space-4); }
.ec-card__head h3 { margin: 0; font-size: var(--font-size-lg); }
.ec-card__head p { margin: 3px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ec-card__pad { padding: 0 var(--space-5) var(--space-4); }
.ec-card__pad--top { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ec-stack { display: grid; gap: var(--space-3); }
.ec-label { margin: 0; color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.ec-muted { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-empty { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.ec-kv { display: grid; gap: 10px; margin: 0; }
.ec-kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-size-sm); }
.ec-kv dt { color: var(--color-text-muted); }
.ec-kv dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }

.ec-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); font-weight: var(--font-weight-bold); }
.ec-avatar--neutral { background: var(--color-layer-soft); color: var(--color-text-soft); }
.ec-sender-chip { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--color-layer-soft); }
.ec-sender-chip > div { min-width: 0; }
.ec-sender-chip strong { display: block; font-size: var(--font-size-sm); }
.ec-sender-chip span:not(.ec-avatar) { display: block; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; }
.ec-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ec-who > span:last-child { min-width: 0; }

/* The upgrade card is dark in both modes, like the event details card. */
.ec-upgrade { border: 0; background: #17131f; color: #fff; }
.ec-upgrade .ec-card__head h3 { color: #fff; }
.ec-upgrade .ec-card__head p, .ec-upgrade__note { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: var(--font-size-sm); }
.ec-upgrade__price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.ec-upgrade__price b { color: #fff; font-size: 2rem; letter-spacing: -0.03em; }
.ec-upgrade__price span { color: rgba(255, 255, 255, 0.65); font-size: var(--font-size-sm); }
.ec-upgrade__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.ec-upgrade__list li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); }
.ec-upgrade__list .ui-icon { flex: 0 0 auto; color: var(--color-primary); }
.ec-upgrade .ui-button { border-color: #fff; background: #fff; color: #111; }
.ec-upgrade .ui-button:hover { background: rgba(255, 255, 255, 0.88); }

.ec-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ec-pack { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard); }
.ec-pack:hover, .ec-pack:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); outline: none; }
.ec-pack b { font-size: var(--font-size-lg); }
.ec-pack span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-buy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.ec-buy-foot p { flex: 1 1 16rem; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-locked-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--color-layer-soft); color: var(--color-text-soft); font-size: var(--font-size-sm); }

.ec-uses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ec-uses li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-layer-soft); }
.ec-uses__mark { display: grid; flex: 0 0 auto; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--color-surface); color: var(--color-info); }
.ec-uses__copy { display: grid; flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); }
.ec-uses__copy small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-uses em { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: normal; }

.ec-table-wrap { overflow-x: auto; }
.ec-table-wrap--boxed { border: 1px solid var(--color-border); border-radius: 14px; }
.ec-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.ec-table th { padding: 10px var(--space-5); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.ec-table-wrap--boxed th { border-top: 0; }
.ec-table td { padding: 14px var(--space-5); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ec-table tr:last-child td { border-bottom: 0; }
.ec-table td small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-table tr.is-muted td { opacity: 0.6; }
.ec-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ec-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }

.ec-rail { display: grid; gap: var(--space-3); }
.ec-domain { display: grid; gap: 6px; width: 100%; padding: 14px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.ec-domain:hover { border-color: var(--color-border-strong); }
.ec-domain.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.ec-domain:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ec-domain__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ec-domain__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-domain small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-chip { padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); font-size: 10.5px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ec-chip--wait { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-strong, var(--color-warning)); }
.ec-chip--off { background: var(--color-layer-soft); color: var(--color-text-muted); }

.ec-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 var(--space-5) var(--space-4); list-style: none; }
.ec-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--color-layer-soft); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ec-steps li > span { min-width: 0; }
.ec-steps small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ec-steps b { display: grid; flex: 0 0 auto; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-text-faint); color: #fff; font-size: 12px; }
.ec-steps .is-done, .ec-steps .is-current, .ec-steps .is-failed { color: var(--color-text); }
.ec-steps .is-done b { background: var(--color-success); }
.ec-steps .is-current b { background: var(--color-warning); }
.ec-steps .is-failed b { background: var(--color-danger); }

.ec-record { display: flex; align-items: center; gap: 8px; max-width: 26rem; min-width: 0; }
.ec-record code { overflow: hidden; padding: 4px 8px; border-radius: 8px; background: var(--color-layer-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ec-copy { display: grid; flex: 0 0 auto; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text-soft); cursor: pointer; }
.ec-copy:hover { color: var(--color-text); }
.ec-copy.is-copied { border-color: var(--color-success); color: var(--color-success); }
.ec-rsvp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px dashed var(--color-border-strong); border-radius: 14px; }
.ec-rsvp p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }

.ec-preview { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: var(--color-layer-soft); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.ec-preview p { margin: 0; }

.ec-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ec-stat { display: grid; gap: 4px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-2xl); }
.ec-stat p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.ec-stat b { font-size: 1.8rem; letter-spacing: -0.03em; line-height: 1.1; }
.ec-stat small { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Delivery logs: filter bar over a read-only table of Maileroo metadata. */
.ec-log-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-5) var(--space-5) var(--space-3); }
.ec-log-filters .form-group { min-width: 0; margin: 0; }
.ec-log-filters__search { grid-column: span 2; }
.ec-log-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ec-log-table td { vertical-align: top; }
.ec-log-table__time time { white-space: nowrap; }
.ec-log-table__time small { display: block; }
.ec-clip { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-clip--wide { max-width: 22rem; }
.ec-log-table .ui-status-badge + small { margin-top: 4px; }

/* Locked island tabs read as present but unavailable. */
.nav-tabs__item.is-locked { opacity: 0.42; cursor: not-allowed; }
.nav-tabs__item.is-locked:hover { background: transparent; color: inherit; }

@media (max-width: 63.9375rem) {
    .ec-grid-3, .ec-grid-main, .ec-grid-rail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.9375rem) {
    .ec-stats, .ec-packs, .ec-log-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-log-filters { padding-inline: var(--space-4); }
    .ec-steps { grid-template-columns: minmax(0, 1fr); }
    .ec-table th, .ec-table td { padding-inline: var(--space-4); }
}

/* Sender address control: an editable local part with the domain fixed inside it. */
.email-sender-control {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-field);
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.email-sender-control:hover {
    border-color: var(--color-text-faint);
}

.email-sender-control:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
}

.email-sender-control.is-invalid {
    border-color: var(--color-danger);
}

.email-sender-control.is-disabled {
    background: var(--color-surface-muted);
}

.email-sender-control .form-control,
.email-sender-control .form-control:hover,
.email-sender-control .form-control:focus {
    /* Chromium tracks what is typed; elsewhere the size attribute sets the
       width. Either way the domain sits against the name, never adrift. */
    field-sizing: content;
    width: auto;
    max-width: 100%;
    min-width: 4ch;
    min-height: 0;
    flex: 0 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.email-sender-control__domain {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    user-select: none;
}

.email-sender-rule {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.email-sender-rule .ui-icon {
    flex: 0 0 auto;
}

/*
 * Dashboard Overview (bento). Theme tokens only, so light and dark modes and
 * every accent colour work without overrides. Breakpoints live in responsive.css.
 */
.dash-overview {
    --dash-hatch: repeating-linear-gradient(135deg, var(--color-layer-strong) 0 3px, transparent 3px 7px);
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
}

.dash-span-3 { grid-column: span 3; }
.dash-span-4 { grid-column: span 4; }
.dash-span-5 { grid-column: span 5; }
.dash-span-8 { grid-column: span 8; }

.dash-stack {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.dash-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-5);
    overflow: hidden;
    border-radius: var(--radius-2xl);
}

.dash-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.dash-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.dash-label .ui-icon { color: var(--color-text-muted); }

.dash-sub,
.dash-meta {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dash-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-go {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--color-glass-border);
    border-radius: 50%;
    background: var(--color-layer-soft);
    color: var(--color-text-soft);
    transition: background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.dash-go:hover {
    background: var(--color-layer-strong);
    color: var(--color-text);
}

.dash-tools { display: flex; gap: var(--space-1); }

.dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-chip {
    padding: 4px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

a.dash-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.dash-chip.is-on {
    border-color: transparent;
    background: var(--color-text);
    color: var(--color-page);
}

.dash-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
}

.dash-foot--end { justify-content: flex-end; }
.dash-foot--start { justify-content: flex-start; }

.dash-link {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.dash-link:hover { color: var(--color-text); }

/* Header */
.dash-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) auto;
    align-items: center;
    gap: var(--space-4);
}

.dash-head__title {
    color: var(--color-text);
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.dash-head__title em {
    color: var(--color-primary);
    font-style: italic;
    font-weight: var(--font-weight-medium);
}

.dash-head__meta {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.dash-head__actions { display: flex; gap: var(--space-2); }

.dash-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 2.9rem;
    margin: 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    cursor: text;
}

.dash-search:focus-within {
    border-color: var(--color-primary-border);
    box-shadow: var(--focus-ring);
}

.dash-search input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    outline: none;
}

.dash-search input::placeholder { color: var(--color-text-muted); }

/* Spotlight: one card, several modes (get started, to do, announcement, tips) */
.dash-spot__grid {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-4);
}

.dash-spot__intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding-right: var(--space-2);
}

.dash-spot__intro .dash-meter { margin-bottom: 6px; height: 8px; }

.dash-spot__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.dash-spot__kicker--done { color: var(--color-success-strong); }

.dash-spot__title {
    margin-top: 6px;
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
}

.dash-spot__lead {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.dash-spot__body { display: grid; min-width: 0; }

.dash-spot__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: var(--space-3);
}

.dash-spot__more { grid-column: 2; display: flex; justify-content: flex-end; }
.dash-spot__more .dash-chip { background: transparent; cursor: pointer; }

/* Cards slide horizontally; four fit on a wide screen, the next one peeks in on smaller ones. */
.dash-spot__rail {
    display: grid;
    min-width: 0;
    grid-auto-columns: calc((100% - (var(--space-3) * 3)) / 4);
    grid-auto-flow: column;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.dash-spot__rail::-webkit-scrollbar { display: none; }
.dash-spot__rail > * { scroll-snap-align: start; }

.dash-spot__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.dash-spot__wide {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
}

.dash-spot__wide.dash-task--danger {
    border-color: var(--color-danger-border);
    background: linear-gradient(160deg, var(--color-danger-soft), var(--color-layer-faint));
}

.dash-spot__wide .dash-task__title { margin-top: 4px; }

.dash-spot__wide-icon {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-layer-strong);
    color: var(--color-text-soft);
}

.dash-task--danger .dash-spot__wide-icon { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.dash-task--warning .dash-spot__wide-icon { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.dash-task--info .dash-spot__wide-icon { background: var(--color-info-soft); color: var(--color-info-strong); }

.dash-spot__tip,
.dash-spot__step {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
}

.dash-spot__step .ui-button { align-self: flex-start; margin-top: auto; }
.dash-spot__step.is-now { border-color: var(--color-primary-border); background: linear-gradient(160deg, var(--color-primary-soft), var(--color-layer-faint)); }
.dash-spot__step.is-done { opacity: 0.72; }

.dash-spot__num {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 1.5px dashed var(--color-border-strong);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.is-now .dash-spot__num { border: 0; background: var(--color-primary); color: var(--color-primary-contrast); }
.is-done .dash-spot__num { border: 0; background: var(--color-success-soft); color: var(--color-success-strong); }

.dash-spot__art {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dash-spot__tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-info-soft);
    color: var(--color-info-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.dash-spot__tag--use_case { background: var(--color-primary-soft); color: var(--color-primary); }
.dash-spot__tag--business { background: var(--color-warning-soft); color: var(--color-warning-strong); }

.dash-spot__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.dash-spot__pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-spot__pager .dash-go { cursor: pointer; }
.dash-spot__pager .dash-go:disabled { opacity: 0.4; cursor: default; }

.dash-spot__dots { display: flex; gap: 5px; }

.dash-spot__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transition: width var(--transition-fast) var(--ease-standard);
}

.dash-spot__dots i.is-on { width: 18px; border-radius: 6px; background: var(--color-primary); }

.dash-spot__banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    background:
        var(--color-primary);
    color: var(--color-primary-contrast);
}

.dash-spot__banner-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.dash-spot__banner-title { margin-top: 10px; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; }
.dash-spot__banner-text { max-width: 40rem; margin-top: 6px; font-size: var(--font-size-sm); opacity: 0.88; }
.dash-spot__banner-actions { display: flex; gap: var(--space-2); }

.dash-task {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
}

.dash-task--danger {
    border-color: var(--color-danger-border);
    background: linear-gradient(160deg, var(--color-danger-soft), var(--color-layer-faint));
}

.dash-task__tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.dash-task--danger .dash-task__tag { color: var(--color-danger-strong); }
.dash-task--warning .dash-task__tag { color: var(--color-warning-strong); }
.dash-task--info .dash-task__tag { color: var(--color-info-strong); }
.dash-task--done .dash-task__tag { color: var(--color-success-strong); }

.dash-task__title {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.dash-task__why {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.dash-task .ui-button {
    align-self: flex-start;
    margin-top: auto;
}

/* Next Event */
.dash-next__title {
    margin-top: var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.dash-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: var(--space-4);
}

.dash-countdown div {
    padding: 10px 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-faint);
    text-align: center;
}

.dash-countdown b {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
}

.dash-countdown span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.dash-ready {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-faint);
}

.dash-ready svg { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }
.dash-ready p { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.dash-ready span { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.dash-checklist {
    display: grid;
    gap: 6px;
    margin-top: var(--space-3);
    list-style: none;
}

.dash-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.dash-checklist .ui-icon { flex: 0 0 auto; color: var(--color-success-strong); }
.dash-checklist .is-todo { color: var(--color-text-muted); }
.dash-checklist .is-todo .ui-icon { color: var(--color-warning-strong); }

.dash-checklist a {
    margin-left: auto;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.dash-avatars {
    display: flex;
    align-items: center;
}

.dash-avatars .dash-sub { margin: 0 0 0 10px; }

.dash-avatar {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    margin-left: -8px;
    place-items: center;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
}

.dash-avatar:first-child { margin-left: 0; }
.dash-avatar--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.dash-avatar--success { background: var(--color-success-soft); color: var(--color-success-strong); }
.dash-avatar--info { background: var(--color-info-soft); color: var(--color-info-strong); }
.dash-avatar--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }

/* Journey */
.dash-funnel {
    display: grid;
    gap: 10px;
    margin-top: var(--space-5);
}

.dash-step {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: var(--space-3);
}

.dash-step__name { color: var(--color-text-soft); font-size: var(--font-size-sm); }

.dash-step__track {
    width: 100%;
    height: 2.1rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--dash-hatch);
    color: var(--color-primary);
    appearance: none;
}

.dash-step__track::-webkit-progress-bar { background: transparent; }
.dash-step__track::-webkit-progress-value { border-radius: var(--radius-pill); background: currentColor; }
.dash-step__track::-moz-progress-bar { border-radius: var(--radius-pill); background: currentColor; }
.dash-step__track--base { color: var(--color-text-soft); }
.dash-step__track--soft { color: var(--color-primary-border); }
.dash-step__track--primary { color: var(--color-primary); }
.dash-step__track--success { color: var(--color-success); }

.dash-step__value {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.dash-step__value small {
    display: block;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
}

.dash-step.is-locked .dash-step__value {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-text-muted);
}

.dash-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: var(--space-5);
}

.dash-insights div {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-faint);
}

.dash-insights span { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.dash-insights b { display: block; margin-top: 4px; color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dash-insights b.dash-insights__locked { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.dash-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: 1.45;
}

.dash-hint .ui-icon { flex: 0 0 auto; color: var(--color-primary); }

/* Credits */
.dash-credits {
    border: 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: var(--shadow-card);
}

.dash-credits .dash-label,
.dash-credits .dash-label .ui-icon { color: color-mix(in srgb, var(--color-primary-contrast) 80%, transparent); }

.dash-credits__total {
    margin-top: var(--space-3);
    font-size: 2.35rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.03em;
    line-height: 1;
}

.dash-credits__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: var(--space-4);
}

.dash-credits__split div,
.dash-credits__note {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.16);
}

.dash-credits__split b { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dash-credits__split span { font-size: var(--font-size-xs); opacity: 0.85; }
.dash-credits__note { margin-top: var(--space-3); font-size: var(--font-size-xs); line-height: 1.45; }
.dash-credits__note b { font-weight: var(--font-weight-semibold); }

/* Responses */
.dash-ring {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.dash-ring svg { width: 6.5rem; height: 6.5rem; flex: 0 0 auto; }

.dash-ring ul {
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    font-size: var(--font-size-xs);
    list-style: none;
}

.dash-ring li { display: flex; align-items: center; gap: 8px; color: var(--color-text-soft); }
.dash-ring li b { margin-left: auto; color: var(--color-text); }

.dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-faint);
}

.dash-dot--success { background: var(--color-success); }
.dash-dot--warning { background: var(--color-warning); }
.dash-dot--danger { background: var(--color-danger); }

.dash-locked {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.dash-locked > .ui-icon { color: var(--color-primary); }

/* Events board */
.dash-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dash-event {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
}

.dash-event.is-warn { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.dash-event .dash-foot { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

.dash-date {
    display: inline-grid;
    width: 3rem;
    padding: 6px 0;
    border-radius: var(--radius-md);
    background: var(--color-layer-strong);
    text-align: center;
}

.dash-date b { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: 1; }
.dash-date span { color: var(--color-text-muted); font-size: 0.62rem; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

.dash-event__name {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.dash-bars { display: grid; gap: 8px; }

.dash-bar {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dash-bar b { color: var(--color-text-soft); font-weight: var(--font-weight-semibold); text-align: right; }

.dash-meter {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-primary);
    appearance: none;
}

.dash-meter::-webkit-progress-bar { background: transparent; }
.dash-meter::-webkit-progress-value { border-radius: var(--radius-pill); background: currentColor; }
.dash-meter::-moz-progress-bar { border-radius: var(--radius-pill); background: currentColor; }
.dash-meter--primary { color: var(--color-primary); }
.dash-meter--success { color: var(--color-success); }

.dash-next {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.dash-next .ui-icon { flex: 0 0 auto; color: var(--color-primary); }
.dash-next--warn .ui-icon { color: var(--color-warning-strong); }
.dash-next--done .ui-icon { color: var(--color-success-strong); }

/* Week */
.dash-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: var(--space-4);
    text-align: center;
}

.dash-days span { display: block; color: var(--color-text-faint); font-size: var(--font-size-2xs); }

.dash-days b {
    position: relative;
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin: 6px auto 0;
    place-items: center;
    border-radius: 50%;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.dash-days b.is-today { background: var(--color-primary); color: var(--color-primary-contrast); }

.dash-days b.has-event::after {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

.dash-agenda { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.dash-agenda__empty { margin: 0; }

.dash-slot {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}

.dash-slot time { padding-top: 10px; color: var(--color-text-muted); font-size: var(--font-size-2xs); }

.dash-slot__card {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-layer-faint);
}

a.dash-slot:hover .dash-slot__card { border-color: var(--color-border-strong); border-left-color: var(--color-primary); }
.dash-slot__card.is-empty { border-left-color: var(--color-text-faint); }
.dash-slot__card p { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.dash-slot__card span { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Setup */
.dash-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.dash-progress .dash-meter { flex: 1 1 auto; height: 8px; }

.dash-setup { display: grid; gap: 8px; margin-top: var(--space-4); }

.dash-setup__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-faint);
}

.dash-setup__step.is-warn { border-color: var(--color-danger-border); }

.dash-setup__check {
    display: inline-grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.is-warn .dash-setup__check { background: var(--color-danger-soft); color: var(--color-danger-strong); }

.is-todo .dash-setup__check,
.is-soon .dash-setup__check {
    border: 1.5px dashed var(--color-border-strong);
    background: transparent;
    color: var(--color-text-faint);
}

.dash-setup__step p { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.dash-setup__step span { color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.dash-setup__step.is-soon p { color: var(--color-text-muted); }

/* Activity */
.dash-timeline {
    position: relative;
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-left: 1.4rem;
    list-style: none;
}

.dash-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    border-left: 1px dashed var(--color-border-strong);
}

.dash-timeline__item { position: relative; --dash-dot: var(--color-primary); }

.dash-timeline__item::before {
    content: "";
    position: absolute;
    top: 5px;
    left: calc(-1.4rem + 1px);
    width: 9px;
    height: 9px;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--dash-dot);
    box-shadow: 0 0 0 1px var(--dash-dot);
}

.dash-timeline__item--success { --dash-dot: var(--color-success); }
.dash-timeline__item--danger { --dash-dot: var(--color-danger); }
.dash-timeline__item--warning { --dash-dot: var(--color-warning); }
.dash-timeline__item--neutral { --dash-dot: var(--color-text-faint); }
.dash-timeline__item p { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.dash-timeline__item span { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* Plan and help */
.dash-promo {
    background:
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
}

.dash-promo .ui-status-badge { align-self: flex-start; }

.dash-promo__title {
    max-width: 14rem;
    margin-top: var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.dash-promo__copy {
    max-width: 15rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dash-promo__copy strong { color: var(--color-text); }
.dash-promo__copy a { color: var(--color-primary); }
.dash-promo__cta { margin-top: auto; padding-top: var(--space-4); }


.dash-add {
    display: grid;
    min-height: 12rem;
    place-content: center;
    justify-items: center;
    gap: 6px;
    padding: var(--space-4);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard);
}

.dash-add:hover { border-color: var(--color-primary-border); background: var(--color-layer-faint); }
.dash-add strong { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.dash-add__icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 4px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Tab count badge (e.g. "Needs you 5") */
.nav-tabs__count {
    display: inline-grid;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 6px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.nav-tabs__count--danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }

/*
 * Dashboard "Needs you" and "Plan ahead" tabs. Theme tokens only; breakpoints
 * live in responsive.css. Positions come from grid tracks and SVG geometry, so
 * no inline styles are needed.
 */
.ny-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pa-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.ny-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-faint);
}

.ny-seg__item {
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.ny-seg__item:hover { color: var(--color-text); }
.ny-seg__item.is-on { background: var(--color-text); color: var(--color-page); }

/* Hero: ring + 7-day deadline strip */
.ny-hero {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    background:
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
}

.ny-hero__ring { display: flex; align-items: center; gap: var(--space-4); }
.ny-hero__ring svg { width: 8.5rem; height: 8.5rem; flex: 0 0 auto; }

.ny-ring__track { stroke: var(--color-layer-strong); }
.ny-ring__seg--danger { stroke: var(--color-danger); }
.ny-ring__seg--warning { stroke: var(--color-warning); }
.ny-ring__seg--info { stroke: var(--color-info); }
.ny-ring__seg--neutral { stroke: var(--color-text-faint); }
.ny-ring__seg--success { stroke: var(--color-success); }
.ny-ring__seg--primary { stroke: var(--color-primary); }
.ny-ring__value { fill: var(--color-text); }
.ny-ring__label { fill: var(--color-text-muted); }

.ny-legend { display: grid; gap: 8px; list-style: none; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.ny-legend li { display: flex; align-items: center; gap: 8px; }
.ny-legend b { margin-left: auto; padding-left: 12px; color: var(--color-text); }

.ny-dot--danger { background: var(--color-danger); }
.ny-dot--warning { background: var(--color-warning); }
.ny-dot--info { background: var(--color-info); }
.ny-dot--neutral { background: var(--color-text-faint); }
.ny-dot--primary { background: var(--color-primary); }
.ny-dot--success { background: var(--color-success); }

.ny-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: var(--space-3);
}

.ny-strip__line {
    position: absolute;
    top: calc(100% - 2.35rem);
    right: 0;
    left: 0;
    height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-danger-soft), var(--color-warning-soft), var(--color-primary-soft));
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.ny-strip__day {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(3.25rem, auto) auto auto;
    justify-items: start;
    gap: 6px;
}

.ny-strip__pins { display: grid; align-content: end; gap: 4px; min-width: 0; }

.ny-pin {
    display: grid;
    min-width: 0;
    padding: 4px 8px;
    border-left: 2px solid currentColor;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-layer-soft);
    line-height: 1.25;
}

.ny-pin b { overflow: hidden; color: var(--color-text); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.ny-pin small { overflow: hidden; color: var(--color-text-muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.ny-pin--danger { color: var(--color-danger); }
.ny-pin--warning { color: var(--color-warning); }
.ny-pin--primary { color: var(--color-primary); }

.ny-strip__dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin: 0 0 0 2px;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.ny-strip__dot.has-pin { width: 14px; height: 14px; margin-left: 0; border: 3px solid var(--color-surface); box-shadow: 0 0 0 1.5px currentColor; background: currentColor; }
.ny-strip__dot--danger { color: var(--color-danger); }
.ny-strip__dot--warning { color: var(--color-warning); }
.ny-strip__dot--primary { color: var(--color-primary); }
.ny-strip__label { color: var(--color-text-faint); font-size: var(--font-size-2xs); }

/* Stage timeline shared by both tabs */
.ny-groups { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.ny-groups--ghost { opacity: 0.55; filter: saturate(0.6); pointer-events: none; }

.ny-stage {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-4);
}

.ny-stage__when {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: 6px;
}

.ny-stage__title { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.ny-stage__title--danger { color: var(--color-danger-strong); }
.ny-stage__title--warning { color: var(--color-warning-strong); }
.ny-stage__title--primary { color: var(--color-primary); }
.ny-stage__when .dash-link { display: inline-block; margin-top: 4px; }

.ny-lane {
    --ny-lane: var(--color-border-strong);
    position: relative;
    display: grid;
    gap: 10px;
    padding-left: 1.75rem;
}

.ny-lane::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--ny-lane), var(--color-border));
}

.ny-lane--danger { --ny-lane: var(--color-danger); }
.ny-lane--warning { --ny-lane: var(--color-warning); }
.ny-lane--primary { --ny-lane: var(--color-primary); }
.ny-lane--success { --ny-lane: var(--color-success); }

.ny-node {
    --ny-dot: var(--color-primary);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
}

.ny-node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1.75rem + 3px);
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--ny-dot);
    box-shadow: 0 0 0 1.5px var(--ny-dot);
}

.ny-node--danger { --ny-dot: var(--color-danger); border-color: var(--color-danger-border); background: linear-gradient(120deg, var(--color-danger-soft), var(--color-layer-faint) 60%); }
.ny-node--warning { --ny-dot: var(--color-warning); }
.ny-node--info { --ny-dot: var(--color-info); }
.ny-node--neutral { --ny-dot: var(--color-text-faint); }

.ny-node__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.ny-node__meta .dash-sub { margin: 0; }
.ny-node__title { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.ny-node__why { margin-top: 2px; color: var(--color-text-muted); font-size: var(--font-size-xs); }

.ny-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.ny-main.is-preview { position: relative; }

.ny-preview-tag {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ny-aside { align-content: start; }

.ny-setup__meter { height: 8px; margin-top: var(--space-3); }
.ny-setup { margin-top: var(--space-4); }
.ny-node--step { padding: 10px 12px; }
.ny-node--step.is-done { --ny-dot: var(--color-success); }
.ny-node--step.is-done .ny-node__title { font-weight: var(--font-weight-medium); }
.ny-node--step.is-now { --ny-dot: var(--color-primary); border-color: var(--color-primary-border); }
.ny-node--step.is-todo { --ny-dot: var(--color-border-strong); }
.ny-node--step.is-todo .ny-node__title { color: var(--color-text-soft); font-weight: var(--font-weight-medium); }

.ny-feed { display: grid; margin-top: var(--space-3); list-style: none; }

.ny-feed__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.ny-feed__item:first-child { padding-top: 0; border-top: 0; }

.ny-feed__icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
    color: var(--color-text-soft);
}

.ny-feed__title { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.ny-feed__item.is-unread .ny-feed__title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--color-primary); }
.ny-empty-line { margin-top: var(--space-3); }

/* Plan ahead */
.pa-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.pa-kpi { padding: var(--space-4); }
.pa-kpi p { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pa-kpi b { display: block; margin-top: 6px; color: var(--color-text); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.pa-kpi b small { color: var(--color-text-muted); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); }
.pa-kpi > span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pa-kpi.dash-credits p,
.pa-kpi.dash-credits b,
.pa-kpi.dash-credits > span { color: inherit; }
.pa-kpi.dash-credits p,
.pa-kpi.dash-credits > span { opacity: 0.85; }
.pa-ok { color: var(--color-success-strong); }
.pa-warn { color: var(--color-warning-strong); }

.pa-key { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pa-key li { display: inline-flex; align-items: center; gap: 6px; }

.pa-strip-wrap { margin-top: var(--space-3); overflow-x: auto; scrollbar-width: thin; }
.pa-strip { display: block; width: 100%; height: auto; }
.pa-strip__weekend { fill: var(--color-layer-faint); }
.pa-strip__tick { fill: var(--color-text-faint); font-size: 11px; }
.pa-strip__tick.is-today { fill: var(--color-primary); font-weight: 600; }
.pa-strip__today { stroke: var(--color-primary); stroke-width: 2; }
.pa-strip__bar--primary { fill: var(--color-primary); }
.pa-strip__bar--warning { fill: var(--color-warning); }
.pa-strip__bar--success { fill: var(--color-success); }
.pa-strip__label { fill: var(--color-text-soft); font-size: 12px; font-weight: 500; }
.pa-strip__label.is-inside { fill: var(--color-page); font-weight: 600; }
.pa-strip__placeholder { fill: transparent; stroke: var(--color-border-strong); stroke-dasharray: 5 5; }
.pa-strip__bell circle { fill: var(--color-surface); stroke: var(--color-warning); stroke-width: 1.5; }
.pa-strip__bell path { fill: none; stroke: var(--color-warning-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pa-strip__bell.is-on circle { stroke: var(--color-success); }
.pa-strip__bell.is-on path { stroke: var(--color-success-strong); }
.pa-strip a:hover .pa-strip__bar { opacity: 0.85; }

.pa-entry--gap { border-style: dashed; border-color: color-mix(in srgb, var(--color-warning) 50%, transparent); background: transparent; --ny-dot: var(--color-warning); }
.pa-entry--event { border-left: 3px solid var(--color-primary); }
.pa-entry--reminder { --ny-dot: var(--color-success); }

.pa-burn { display: block; width: 100%; height: 8rem; margin-top: var(--space-3); }
.pa-burn__grid { stroke: var(--color-border); }
.pa-burn__area { fill: var(--color-primary-soft); }
.pa-burn__line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pa-burn__axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--color-text-faint); font-size: var(--font-size-2xs); }

.pa-credits { display: grid; gap: var(--space-3); margin-top: var(--space-4); list-style: none; }
.pa-credits li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }

.pa-ready { display: grid; gap: 10px; margin-top: var(--space-3); }

.pa-ready__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-layer-faint);
    color: inherit;
    text-decoration: none;
}

.pa-ready__row:hover { border-color: var(--color-border-strong); }
.pa-ready__row svg { width: 3.6rem; height: 3.6rem; }
.pa-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pa-checks span { padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); }
.pa-checks .is-ok { background: var(--color-success-soft); color: var(--color-success-strong); }
.pa-checks .is-no { background: var(--color-warning-soft); color: var(--color-warning-strong); }

.pa-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }

.nav-tabs__item.is-active .nav-tabs__count { background: var(--color-primary-soft); color: var(--color-primary-active); }
.nav-tabs__item.is-active .nav-tabs__count--danger { background: var(--color-danger); color: var(--color-primary-contrast); }
.ny-main { align-self: start; }

/*
 * Analytics: a "story" grid. A dominant hero and a tall number rail lead, and
 * the remaining panels step around them. Theme tokens only; bars and arcs are
 * SVG geometry and meters are native <progress>, so no inline styles.
 */
.an { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.an-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.an-kicker { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.an-title { max-width: 52rem; margin-top: 6px; color: var(--color-text); font-size: 2.3rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.035em; line-height: 1.08; }
.an-title em { color: var(--color-primary); font-style: italic; font-weight: var(--font-weight-medium); }
.an-lead { max-width: 48rem; margin-top: 8px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.an-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.an-events { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.an-events::-webkit-scrollbar { display: none; }

.an-epill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-faint);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.an-epill b { display: inline-grid; min-width: 1.4rem; height: 1.4rem; padding: 0 5px; place-items: center; border-radius: var(--radius-pill); background: var(--color-layer-strong); color: var(--color-text); font-size: var(--font-size-2xs); }
.an-epill:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.an-epill.is-on { border-color: transparent; background: var(--color-text); color: var(--color-page); }
.an-epill.is-on b { background: var(--color-primary); color: var(--color-primary-contrast); }

.an-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "hero hero hero hero hero hero hero hero hero rail rail rail"
        "flow flow flow flow flow flow resp resp resp rail rail rail"
        "board board board board board board board board board board board board"
        "note note note note note heat heat heat heat src src src";
    gap: var(--space-4);
}

.an-grid--new { grid-template-areas: "hero hero hero hero hero hero hero hero hero hero hero hero" "explain explain explain explain explain explain explain explain explain explain explain explain"; }

.an-card { position: relative; min-width: 0; padding: var(--space-5); overflow: hidden; border-radius: var(--radius-2xl); }
.an-label { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-soft); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.an-label .ui-icon { color: var(--color-text-muted); }
.an-sub { margin-top: 2px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.an-center { text-align: center; }
.an-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.an-empty-line { margin-top: var(--space-4); }

.an-delta { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: 0; }
.an-delta--up { background: var(--color-success-soft); color: var(--color-success-strong); }
.an-delta--down { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.an-delta--flat { background: var(--color-layer-strong); color: var(--color-text-soft); }

/* Hero */
.an-hero {
    grid-area: hero;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-5);
    background:
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
}

.an-big { margin-top: var(--space-4); color: var(--color-text); font-size: 4.2rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.05em; line-height: 0.95; }
.an-big small { color: var(--color-primary); font-size: 2rem; }
.an-big--muted { color: var(--color-text-faint); }
.an-bigsub { margin-top: 8px; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.an-hero .an-delta { margin-top: var(--space-3); font-size: var(--font-size-xs); }
.an-switch { display: grid; gap: 6px; margin-top: var(--space-5); }

.an-switch__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-decoration: none;
}

.an-switch__item:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.an-switch__item.is-on { border-color: var(--color-primary-border); background: var(--color-primary-soft); color: var(--color-text); font-weight: var(--font-weight-semibold); }
.an-hero__chart { position: relative; display: flex; min-width: 0; flex-direction: column; }
.an-hero__chart .ny-preview-tag { top: 0; right: 0; }

.an-callout { padding: 8px 11px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); font-size: var(--font-size-2xs); color: var(--color-text-soft); white-space: nowrap; }
.an-callout b { display: block; color: var(--color-text); font-size: var(--font-size-sm); }
.an-callout span { display: block; }

.an-bars { display: block; width: 100%; height: 14rem; margin-top: auto; padding-top: var(--space-4); }
.an-bars__base { fill: var(--color-layer-soft); stroke: var(--color-border); }
.an-bars__base.is-current { fill: var(--color-primary); stroke: none; }
.an-bars__base--ghost { fill: var(--color-layer-soft); stroke: var(--color-border); stroke-dasharray: 4 4; }
.an-bars__part { fill: var(--color-primary-border); }
.an-bars__part.is-current { fill: var(--color-primary-contrast); opacity: 0.3; }
.an-bars__labels { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin-top: 8px; }
.an-bars__labels span { display: grid; padding: 4px 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: var(--font-size-2xs); text-align: center; white-space: nowrap; }
.an-bars__labels b { color: var(--color-text-soft); font-weight: var(--font-weight-semibold); }
.an-bars__labels .is-current { border-color: transparent; background: var(--color-text); color: var(--color-page); font-weight: var(--font-weight-semibold); }
.an-bars__labels .is-current b { color: var(--color-page); }
.an-new-actions { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-5); }

/* Rail */
.an-rail { grid-area: rail; display: grid; grid-template-rows: repeat(4, auto) 1fr; padding: 0; }
.an-stat { display: grid; gap: 6px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.an-stat__top { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.an-stat__val { display: flex; align-items: baseline; gap: 8px; color: var(--color-text); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.an-locked { align-items: center; color: var(--color-text-muted); font-size: var(--font-size-base); }

.an-credit {
    position: relative;
    align-self: stretch;
    margin: var(--space-3);
    padding: var(--space-4);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.an-credit p { font-size: var(--font-size-xs); opacity: 0.85; }
.an-credit b { display: block; margin-top: 4px; font-size: 2rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.03em; }
.an-credit__split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--space-3); }
.an-credit__split div { padding: 8px 10px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.16); font-size: var(--font-size-2xs); }
.an-credit__split strong { display: block; font-size: var(--font-size-base); }
.an-credit__note { margin-top: var(--space-2); }

/* Journey */
.an-flow { grid-area: flow; }
.an-steps { display: block; width: 100%; height: auto; margin-top: var(--space-5); overflow: visible; }
.an-steps__col--base { fill: var(--color-text-soft); }
.an-steps__col--soft { fill: color-mix(in srgb, var(--color-primary) 55%, var(--color-text-soft)); }
.an-steps__col--primary { fill: var(--color-primary); }
.an-steps__col--info { fill: var(--color-info); }
.an-steps__col--success { fill: var(--color-success); }
.an-steps__col--locked { fill: transparent; stroke: var(--color-border-strong); stroke-dasharray: 5 5; }
.an-steps__value { fill: var(--color-page); font-size: 22px; font-weight: 600; }
.an-steps__value.is-locked { fill: var(--color-text-muted); font-size: 13px; }
.an-steps__pct { fill: var(--color-page); font-size: 11px; opacity: 0.85; }
.an-steps__drop { fill: var(--color-danger-strong); font-size: 12px; font-weight: 600; }
.an-steps__name { fill: var(--color-text-soft); font-size: 12px; font-weight: 500; }
.an-flow .dash-hint { margin-top: var(--space-4); }

/* Answers */
.an-resp { grid-area: resp; }
.an-gauge { position: relative; display: grid; justify-items: center; margin-top: var(--space-3); }
.an-gauge svg { width: 100%; max-width: 15rem; height: auto; }
.an-gauge__track { stroke: var(--color-layer-strong); }
.an-gauge__seg--success { stroke: var(--color-success); }
.an-gauge__seg--warning { stroke: var(--color-warning); }
.an-gauge__seg--danger { stroke: var(--color-danger); }
.an-gauge__val { position: absolute; bottom: 6px; text-align: center; }
.an-gauge__val b { display: block; color: var(--color-text); font-size: 2rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.03em; }
.an-gauge__val span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.an-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-3); }
.an-counts div { padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); text-align: center; }
.an-counts b { display: block; color: var(--color-text); font-size: var(--font-size-base); }
.an-counts span { color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.an-counts__yes b { color: var(--color-success-strong); }
.an-counts__maybe b { color: var(--color-warning-strong); }
.an-counts__no b { color: var(--color-danger-strong); }
.an-lockcard { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.an-lockcard > .ui-icon { color: var(--color-primary); }

/* Ranked Events */
.an-board { grid-area: board; }
.an-scroll { margin-top: var(--space-4); overflow-x: auto; }
.an-lanes { display: grid; gap: 8px; min-width: 52rem; }

.an-lanehead,
.an-lane {
    display: grid;
    grid-template-columns: 3rem minmax(12rem, 1.8fr) repeat(3, minmax(7rem, 1fr)) 5.5rem 7rem;
    align-items: center;
    gap: var(--space-4);
}

.an-lane--no-rsvp,
.an-lanes:has(.an-lane--no-rsvp) .an-lanehead { grid-template-columns: 3rem minmax(12rem, 1.8fr) repeat(2, minmax(7rem, 1fr)) 5.5rem 7rem; }
.an-lanehead { padding: 0 var(--space-4); color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.an-lanehead a { color: inherit; text-decoration: none; }
.an-lanehead a:hover,
.an-lanehead a.is-on { color: var(--color-text-soft); }
.an-lane { padding: 12px var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-layer-faint); }
.an-lane > .ui-button { justify-self: end; }
.an-lane.is-top { border-color: var(--color-primary-border); background: linear-gradient(90deg, var(--color-primary-soft), var(--color-layer-faint) 45%); }
.an-lane.is-selected { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.an-rank { color: var(--color-text-faint); font-size: 1.6rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.03em; }
.is-top .an-rank { color: var(--color-primary); }
.an-evname { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.an-pct { display: grid; gap: 5px; }
.an-pct span { color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.an-meter--info { color: var(--color-info); }
.an-meter--warning { color: var(--color-warning); }

/* Findings, heatmap, channels */
.an-notes { grid-area: note; }
.an-ins { display: grid; gap: 10px; margin-top: var(--space-4); }
.an-ins__item { --an-tone: var(--color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: 12px 14px; border-left: 3px solid var(--an-tone); border-radius: 4px var(--radius-lg) var(--radius-lg) 4px; background: var(--color-layer-faint); }
.an-ins__item > .ui-icon { color: var(--an-tone); }
.an-ins__item--success { --an-tone: var(--color-success); }
.an-ins__item--warning { --an-tone: var(--color-warning); }
.an-ins__item--danger { --an-tone: var(--color-danger); }
.an-ins__item--info { --an-tone: var(--color-info); }
.an-ins__item p { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.an-ins__item span { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.an-ins__item a { display: inline-block; margin-top: 4px; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }

.an-heat { grid-area: heat; }
.an-hm { display: grid; grid-template-columns: 2.2rem repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: var(--space-4); color: var(--color-text-faint); font-size: var(--font-size-2xs); }
.an-hm span { align-self: center; }
.an-hm__hour { text-align: center; }
.an-hm__cell { display: block; height: 1.45rem; border-radius: 6px; background: var(--color-primary); }
.an-hm__cell--0 { opacity: 0.08; }
.an-hm__cell--1 { opacity: 0.25; }
.an-hm__cell--2 { opacity: 0.42; }
.an-hm__cell--3 { opacity: 0.6; }
.an-hm__cell--4 { opacity: 0.8; }
.an-hm__cell--5 { opacity: 1; }

.an-src { grid-area: src; }
.an-srclist { display: grid; gap: 14px; margin-top: var(--space-4); }
.an-srclist > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.an-srclist__icon { display: inline-grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid var(--color-glass-border); border-radius: var(--radius-md); background: var(--color-layer-soft); color: var(--color-text-soft); }
.an-srclist p { margin-bottom: 6px; color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.an-srclist b { color: var(--color-text); font-size: var(--font-size-base); }

.an-explain { grid-area: explain; }
.an-explain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }

/*
 * Dashboard illustrations. Decorative only and layout-neutral: a slot uses
 * free space the card already has (flex-basis 0, no min-height, size
 * containment) and hides itself when that space is too small; corner art is
 * absolutely positioned. Neither can change a card's size.
 */
.dash-illus { display: block; overflow: visible; pointer-events: none; }

.dash-illus-slot {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    container-type: size;
}

/* The slot sits in a flex column with a gap; cancel the extra gap it would add. */
.dash-spot__intro > .dash-illus-slot { margin-top: calc(var(--space-3) * -1); }
.dash-illus-slot .dash-illus { width: auto; max-width: 100%; height: 100%; max-height: 8.75rem; }
.dash-illus-slot--center { align-items: center; }

@container (max-height: 3.25rem) {
    .dash-illus-slot .dash-illus { display: none; }
}

@container (max-width: 7rem) {
    .dash-illus-slot .dash-illus { display: none; }
}

.dash-illus-host { position: relative; container-type: inline-size; }
.dash-illus--corner { position: absolute; }
.dash-illus-host .dash-top { position: relative; }
.dash-illus--next-online,
.dash-illus--next-venue { top: calc(var(--space-5) - 6px); right: calc(var(--space-5) + 2.6rem); width: auto; height: 2.9rem; }
.dash-illus--credits { top: 3.6rem; right: var(--space-5); width: auto; height: 3.7rem; }
.dash-credits .dash-credits__split,
.dash-credits .dash-credits__note,
.dash-credits .dash-top { position: relative; z-index: 1; }

.dash-spot__intro { position: relative; container-type: inline-size; }
.dash-illus--spot-todo,
.dash-illus--spot-start { top: -4px; right: 0; width: auto; height: 3.1rem; }

@container (max-width: 12.5rem) {
    .dash-illus--spot-todo,
    .dash-illus--spot-start { display: none; }
}

@container (max-width: 17rem) {
    .dash-illus--next-online,
    .dash-illus--next-venue,
    .dash-illus--credits { display: none; }
}

.dash-add { position: relative; }
.dash-add__icon--illus { position: relative; background: transparent; }
.dash-add__icon--illus .dash-illus { position: absolute; bottom: 0; left: 50%; width: 5.5rem; max-width: none; height: auto; transform: translateX(-50%); }

/* Parts */
.dash-illus__paper { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.2; }
.dash-illus__line { fill: var(--color-border-strong); }
.dash-illus__line--soft { fill: var(--color-border); }
.dash-illus__dashed { fill: none; stroke: var(--color-border-strong); stroke-width: 1.4; stroke-dasharray: 3 3; }
.dash-illus__trail { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 4 5; opacity: 0.6; }
.dash-illus__mark { fill: none; stroke: var(--color-surface); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dash-illus__mark--thick { stroke: var(--color-primary-contrast); stroke-width: 3; }
.dash-illus__plus { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; }
.dash-illus__label { fill: var(--color-primary-contrast); font-size: 11px; font-weight: 700; }
.dash-illus__label--dark { fill: #2a1a00; }
.dash-illus--spot-start .dash-illus__label { font-size: 13px; }
.dash-illus__fill--primary { fill: var(--color-primary); }
.dash-illus__fill--primary-soft { fill: var(--color-primary-soft); }
.dash-illus__fill--primary-border { fill: var(--color-primary-border); }
.dash-illus__fill--success { fill: var(--color-success); }
.dash-illus__fill--success-soft { fill: var(--color-success-soft); }
.dash-illus__fill--warning { fill: var(--color-warning); }
.dash-illus__fill--warning-soft { fill: var(--color-warning-soft); }
.dash-illus__fill--danger { fill: var(--color-danger); }
.dash-illus__fill--text { fill: var(--color-text); }
.dash-illus__fill--surface { fill: var(--color-surface); }
.dash-illus__fill--shadow { fill: var(--color-layer-strong); }
.dash-illus__glass { fill: rgba(255, 255, 255, 0.22); stroke: rgba(255, 255, 255, 0.45); }
.dash-illus__glass--strong { fill: rgba(255, 255, 255, 0.3); stroke: rgba(255, 255, 255, 0.55); }
.dash-illus__glass-line { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.2; stroke-linejoin: round; }
.dash-illus__glass-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dash-illus__glass-spark { fill: #fff; }
.dash-illus__glass-shadow { fill: rgba(0, 0, 0, 0.18); }
.dash-illus__map { fill: var(--color-primary-soft); stroke: var(--color-primary-border); stroke-width: 1.2; }
.dash-illus__road { fill: none; stroke: var(--color-surface); stroke-width: 5; stroke-linecap: round; }
.dash-illus__road--thin { stroke-width: 3; }

/* Gentle motion; off for anyone who asks for less */
.dash-illus__float { animation: dash-illus-float 6s ease-in-out infinite; transform-box: fill-box; }
.dash-illus__float--slow { animation-duration: 8s; animation-delay: -2s; }
.dash-illus__spark { animation: dash-illus-twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes dash-illus-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes dash-illus-twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dash-illus__float,
    .dash-illus__spark { animation: none; }
}

/*
 * Events page: a six-week strip, a compact grouped list, and a preview of the
 * selected Event. Theme tokens only; the strip and rings are SVG geometry and
 * meters are native <progress>, so there are no inline styles.
 */
.evx { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.evx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.evx-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }


.evx-head__attention { color: var(--color-warning-strong); font-weight: var(--font-weight-semibold); text-decoration: none; }
.evx-head__attention:hover { text-decoration: underline; }

/* Quick filters over active Events */
.evx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 4px var(--space-2); }
.evx-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-layer-faint); color: var(--color-text-soft); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; }
.evx-filter b { color: var(--color-text-faint); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.evx-filter:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.evx-filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.evx-filter.is-warn { border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: var(--color-warning-soft); color: var(--color-warning-strong); }
.evx-filter.is-warn b { color: var(--color-warning-strong); }
.evx-filter__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning); }
.evx-filter.is-on { border-color: var(--color-action); background: var(--color-action); color: var(--color-action-contrast); }
.evx-filter.is-on b { color: color-mix(in srgb, var(--color-action-contrast) 62%, transparent); }
.evx-filter.is-on .evx-filter__dot { background: var(--color-action-contrast); }

.evx-split { display: grid; grid-template-columns: minmax(21rem, 0.95fr) minmax(0, 1.6fr); align-items: stretch; gap: var(--space-4); }
.evx-split.is-empty { grid-template-columns: minmax(0, 1fr); }

.evx-list { position: sticky; top: var(--space-4); display: flex; align-self: start; min-width: 0; max-height: calc(100vh - 7rem); flex-direction: column; padding: var(--space-3); border-radius: var(--radius-2xl); }
.evx-groups { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.evx-search { display: flex; align-items: center; gap: 8px; height: 2.6rem; margin: 4px 4px var(--space-3); padding: 0 12px; border: 1px solid var(--color-glass-border); border-radius: var(--radius-lg); background: var(--color-layer-soft); color: var(--color-text-muted); }
.evx-search input { min-width: 0; flex: 1 1 auto; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); outline: none; }
.evx-search:focus-within { border-color: var(--color-primary-border); box-shadow: var(--focus-ring); }
.evx-search kbd,
.evx-keys kbd { padding: 1px 6px; border: 1px solid var(--color-border); border-radius: 5px; color: var(--color-text-soft); font: inherit; font-size: var(--font-size-2xs); }
.evx-search__clear { display: inline-grid; place-items: center; color: var(--color-text-muted); }

.evx-groups { display: grid; gap: 2px; }
.evx-group + .evx-group { margin-top: 6px; }
.evx-group__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

.evx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.evx-row + .evx-row { margin-top: 2px; }
.evx-row:hover { background: var(--color-layer-soft); }
.evx-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.evx-row.is-selected { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.evx-row__date { display: grid; width: 2.7rem; padding: 5px 0; border-radius: var(--radius-md); background: var(--color-layer-strong); text-align: center; }
.evx-row__date b { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1; }
.evx-row__date span { color: var(--color-text-muted); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.evx-row__body { display: grid; min-width: 0; }
.evx-row__title,
.evx-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evx-row__title { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.evx-row__meta { margin-top: 2px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.evx-row__side { display: flex; align-items: center; gap: 8px; }
.evx-row__ring { width: 1.9rem; height: 1.9rem; }
.evx-row__count { color: var(--color-text-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.evx-row__count small { color: var(--color-text-faint); font-size: inherit; font-weight: var(--font-weight-medium); }
.evx-row__live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--color-success); vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.evx-row__flag { padding: 2px 7px; border-radius: var(--radius-pill); background: var(--color-warning-soft); color: var(--color-warning-strong); font-size: 0.62rem; font-weight: 700; white-space: nowrap; }

.evx-list__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--color-border); padding: 12px 10px 4px; color: var(--color-text-faint); font-size: var(--font-size-2xs); }

.evx-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-muted); }
.evx-empty__art { width: 7rem; height: auto; }
.evx-empty__title { color: var(--color-text); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.evx-empty__text { max-width: 26rem; font-size: var(--font-size-sm); }
.evx-empty .ui-button { margin-top: var(--space-2); }

.evx-welcome { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-2xl); background: radial-gradient(80% 110% at 0% 0%, var(--color-primary-soft), transparent 60%), linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass)); }
.evx-welcome__art { display: grid; place-items: center; }
.evx-welcome__art .dash-illus { width: 100%; max-width: 20rem; height: auto; }
.evx-welcome__title { margin-top: 6px; color: var(--color-text); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.evx-welcome__steps { display: grid; gap: 10px; margin-top: var(--space-4); list-style: none; }
.evx-welcome__steps li { display: flex; align-items: center; gap: 10px; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.evx-welcome__steps span { display: inline-grid; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 700; }
.evx-welcome__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

.evx-pane-wrap { min-width: 0; }
.evx-pane { display: grid; align-content: start; gap: var(--space-4); height: 100%; padding: var(--space-5) var(--space-6); border-radius: var(--radius-2xl); }
.evx-pane__back { display: none; align-items: center; gap: 4px; color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: none; }
.evx-pane__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.evx-pane__intro { min-width: 0; }
.evx-pane__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.evx-pane__title { margin-top: 6px; color: var(--color-text); font-size: 1.6rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.evx-pane__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.evx-pane__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.evx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-soft); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); }

.evx-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-layer-faint); }
.evx-alert--warning { border-color: color-mix(in srgb, var(--color-warning) 50%, transparent); background: linear-gradient(110deg, var(--color-warning-soft), transparent 70%); }
.evx-alert--info { border-color: var(--color-primary-border); background: linear-gradient(110deg, var(--color-primary-soft), transparent 70%); }
.evx-alert__icon { display: inline-grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: var(--radius-md); background: var(--color-layer-strong); color: var(--color-text-soft); }
.evx-alert--warning .evx-alert__icon { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.evx-alert--info .evx-alert__icon { background: var(--color-primary-soft); color: var(--color-primary); }

/* Quick actions: each opens the matching Registrations dialog */
.evx-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.evx-quick__item { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 5.25rem; padding: 12px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); color: var(--color-text); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: center; text-decoration: none; cursor: pointer; transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard); }
.evx-quick__item:hover { border-color: var(--color-primary-border); background: var(--color-layer-soft); }
.evx-quick__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.evx-quick__item:disabled { cursor: default; opacity: 0.7; }
.evx-quick__icon { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }

.evx-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.evx-jstep { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); }
.evx-jstep > span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.evx-jstep b { display: flex; align-items: center; gap: 6px; color: var(--color-text); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.evx-jstep.is-locked b { color: var(--color-text-muted); font-size: var(--font-size-base); }
.evx-jstep__pct { margin-left: 2px; color: var(--color-text-faint); font-size: var(--font-size-xs); font-style: normal; font-weight: var(--font-weight-medium); }
.evx-jstep small { min-height: 1em; color: var(--color-text-faint); font-size: var(--font-size-2xs); }
.evx-meter--base { color: var(--color-text-soft); }

.evx-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.evx-stack { display: grid; gap: var(--space-4); }
.evx-box { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-layer-faint); }
.evx-box__head { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-soft); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.evx-box__head a { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }
.evx-box__empty { margin-top: 10px; }
.evx-people { display: grid; gap: 10px; margin-top: 12px; list-style: none; }
.evx-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.evx-person__avatar { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.68rem; font-weight: 700; }
.evx-person__avatar--success { background: var(--color-success-soft); color: var(--color-success-strong); }
.evx-person__avatar--warning { background: var(--color-warning-soft); color: var(--color-warning-strong); }
.evx-person__avatar--danger { background: var(--color-danger-soft); color: var(--color-danger-strong); }
.evx-person__who { display: grid; min-width: 0; }
.evx-person__who b { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.evx-person__who span { overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.evx-setup { display: grid; gap: 12px; margin-top: 12px; list-style: none; }
.evx-setup__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.evx-setup__icon { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--radius-sm); background: var(--color-surface-muted); color: var(--color-text-muted); }
.evx-setup__icon.is-on { background: var(--color-primary-soft); color: var(--color-primary); }
.evx-setup__copy { display: grid; min-width: 0; }
.evx-setup__copy b { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.evx-setup__copy span { overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.evx-setup__link { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }
.evx-setup__done { display: inline-flex; color: var(--color-success-strong); }
.evx-setup form { display: flex; }
.evx-switch { position: relative; width: 2.6rem; height: 1.5rem; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-neutral); cursor: pointer; transition: background var(--transition-fast) var(--ease-standard); }
.evx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform var(--transition-fast) var(--ease-standard); }
.evx-switch.is-on { background: var(--color-primary); }
.evx-switch.is-on::after { transform: translateX(1.1rem); }
.evx-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.evx-switch:disabled { cursor: progress; opacity: 0.6; }
.evx-timeline { margin-top: 12px; }
.evx-pane.is-loading { opacity: 0.6; transition: opacity var(--transition-fast) var(--ease-standard); }

/* ==========================================================================
   Calendar page: month, week and agenda board with the chosen day beside it
   ========================================================================== */
.cx { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.cx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cx-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cx-seg { display: inline-flex; padding: 3px; border: 1px solid var(--color-glass-border); border-radius: var(--radius-pill); background: var(--color-layer-soft); }
.cx-seg a { padding: 5px 14px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; }
.cx-seg a:hover { color: var(--color-text); }
.cx-seg a.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-border); }
.cx-nav { display: inline-flex; align-items: center; gap: 6px; }
.cx-nav__label { min-width: 9.5rem; justify-content: center; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); text-align: center; }
span.cx-nav__label { display: inline-flex; }
.cx-split { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: var(--space-4); align-items: start; }
.cx-board { padding: 0; border-radius: var(--radius-2xl); overflow: hidden; }
.cx-board__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.cx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.cx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-c); }
.cx-dot--draft { background: transparent; box-shadow: inset 0 0 0 1px var(--color-text-faint); }
.cx-mix { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-soft); font-size: var(--font-size-xs); }
.cx-mix__bar { width: 9rem; height: 6px; border-radius: 99px; overflow: hidden; background: var(--color-layer-soft); }
.cx-fill--primary { fill: var(--color-primary); }
.cx-fill--warning { fill: var(--color-warning); }
.cx-fill--danger { fill: var(--color-danger); }
.cx-fill--ended { fill: var(--color-text-faint); }
.cx-fill--draft { fill: var(--color-border-strong); }
.cx .is-primary, .cx-dot--primary { --cx-c: var(--color-primary); --cx-bg: var(--color-primary-soft); }
.cx .is-warning, .cx-dot--warning { --cx-c: var(--color-warning); --cx-bg: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.cx .is-danger, .cx-dot--danger { --cx-c: var(--color-danger); --cx-bg: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.cx .is-ended, .cx-dot--ended { --cx-c: var(--color-text-faint); --cx-bg: var(--color-layer-soft); }
.cx .is-draft { --cx-c: var(--color-text-faint); --cx-bg: transparent; }
.cx-grid { position: relative; }
.cx-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.cx-dow span { padding: 9px 12px; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.cx-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 7.4rem; }
.cx-week + .cx-week { border-top: 1px solid var(--color-border); }
.cx-board--week .cx-week { min-height: 16rem; }
.cx-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 8px 10px; color: inherit; text-decoration: none; transition: background-color var(--duration-fast, 0.15s) ease; }
.cx-day + .cx-day { border-left: 1px solid var(--color-border); }
.cx-day:hover { background: var(--color-layer-soft); }
.cx-day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.cx-day.is-we { background: var(--color-layer-faint); }
.cx-day.is-out .cx-num { color: var(--color-text-faint); opacity: 0.6; }
.cx-day.is-past .cx-num { color: var(--color-text-faint); }
.cx-day.is-sel { background: var(--color-primary-soft); box-shadow: inset 0 0 0 1.5px var(--color-primary-border); }
.cx-num { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.cx-num time { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.cx-day.is-today .cx-num time { background: var(--color-primary); color: var(--color-primary-contrast); }
.cx-num em { color: var(--color-primary); font-size: var(--font-size-2xs); font-style: normal; font-weight: var(--font-weight-semibold); }
.cx-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 4px 7px; border-radius: 7px; background: var(--cx-bg); box-shadow: inset 2.5px 0 0 var(--cx-c); color: var(--color-text); font-size: var(--font-size-2xs); }
.cx-ev > span { color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.cx-ev strong { overflow: hidden; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.cx-ev small { grid-column: 2; overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cx-ev.is-ended strong { color: var(--color-text-soft); font-weight: var(--font-weight-medium); }
.cx-ev.is-danger strong { color: var(--color-text-soft); text-decoration: line-through; }
.cx-ev.is-draft { box-shadow: none; outline: 1px dashed var(--color-border-strong); outline-offset: -1px; }
.cx-board--week .cx-ev { padding: 7px 9px; }
.cx-more { padding-left: 4px; color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); }
.cx-flag { display: inline-flex; align-items: center; gap: 4px; padding-left: 2px; color: var(--color-warning-strong, var(--color-warning)); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); }
.cx-overlay { position: absolute; inset: 2.3rem 0 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-surface) 55%, transparent); backdrop-filter: blur(2px); }
.cx-overlay__card { display: grid; justify-items: center; gap: 8px; max-width: 24rem; padding: var(--space-5) var(--space-6); border-radius: var(--radius-2xl); text-align: center; }
.cx-overlay__card .dash-illus { width: 11rem; max-width: none; }
.cx-overlay__card h2 { margin: 4px 0 0; font-size: var(--font-size-lg); }
.cx-overlay__card p { margin: 0 0 6px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cx-overlay__card div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cx-agenda-list { display: none; padding: var(--space-3) var(--space-4) var(--space-4); }
.cx-agenda-list.is-view { display: grid; gap: var(--space-2); }
.cx-agenda-day { display: grid; gap: 8px; }
.cx-mday { margin: 8px 4px 0; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.cx-agenda-empty { display: grid; justify-items: center; gap: 6px; padding: var(--space-6) var(--space-4); text-align: center; }
.cx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 11px 18px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.cx-keys kbd { padding: 1px 6px; border: 1px solid var(--color-border); border-radius: 5px; font: inherit; font-size: var(--font-size-2xs); }
.cx-rail { display: grid; gap: var(--space-4); }
.cx-rail__day.is-loading { opacity: 0.55; transition: opacity 0.15s ease; }
.cx-card { padding: var(--space-4); border-radius: var(--radius-2xl); }
.cx-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.cx-card__head h2 { margin: 0; font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.cx-card__head > span { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.cx-agenda { display: grid; gap: 10px; }
.cx-item { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); }
.cx-item__time { padding-right: 10px; border-right: 2.5px solid var(--cx-c); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); }
.cx-item.is-draft .cx-item__time { border-right-style: dashed; }
.cx-item__time small { display: block; color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); }
.cx-item__body { min-width: 0; }
.cx-item__title { margin: 0 0 3px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.cx-item.is-danger .cx-item__title { text-decoration: line-through; }
.cx-item__meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.cx-item__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.cx-item__warn { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-text); font-size: var(--font-size-xs); }
.cx-item__warn .ui-icon { color: var(--color-warning); }
.cx-link { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; }
.cx-link:hover { text-decoration: underline; }
.cx-bars { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.cx-bars progress { width: 4.5rem; }
.cx-daycard__empty { display: grid; justify-items: center; gap: 8px; padding: var(--space-4) 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.cx-daycard__empty p { margin: 0; }
.cx-next { display: grid; margin: 0; padding: 0; list-style: none; }
.cx-next li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; }
.cx-next li + li { border-top: 1px solid var(--color-border); }
.cx-next a { color: inherit; text-decoration: none; }
.cx-next__date { line-height: 1.1; text-align: center; }
.cx-next__date b { display: block; font-size: var(--font-size-md); }
.cx-next__date span { color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.cx-next__body { min-width: 0; }
.cx-next__body:hover p { color: var(--color-primary); }
.cx-next p { margin: 0; overflow: hidden; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.cx-next small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.cx-quiet { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius-lg); background: var(--color-layer-soft); color: var(--color-text-soft); font-size: var(--font-size-xs); text-decoration: none; }
.cx-quiet:hover { background: var(--color-primary-soft); }
.cx-quiet .ui-icon { flex: 0 0 auto; color: var(--color-primary); }

/* ==========================================================================
   Contacts: one row per person across every Event, with the chosen person beside it
   ========================================================================== */
.pv { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.pv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pv-band { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; padding: 0; overflow: hidden; border-radius: var(--radius-2xl); }
.pv-band > div { display: grid; align-content: start; gap: 4px; padding: var(--space-4) var(--space-5); min-width: 0; }
.pv-band > div + div { border-left: 1px solid var(--color-border); }
.pv-k { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.pv-v { margin: 0; font-size: 1.75rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: 1.15; }
.pv-v small { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; }
.pv-n { margin: 0; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.pv-n b { color: var(--color-text); }
.pv-up { color: var(--color-success); font-weight: var(--font-weight-semibold); }
.pv-bar { display: block; width: 100%; height: 8px; margin: 6px 0 2px; border-radius: 99px; overflow: hidden; background: var(--color-layer-soft); }
.pv-bar--ladder { height: 10px; }
.pv-fill--everywhere { fill: var(--color-success); }
.pv-fill--elsewhere { fill: color-mix(in srgb, var(--color-success) 40%, transparent); }
.pv-fill--never { fill: var(--color-warning); }
.pv-fill--l1 { fill: var(--color-border-strong); background: var(--color-border-strong); }
.pv-fill--l2 { fill: color-mix(in srgb, var(--color-primary) 35%, transparent); background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.pv-fill--l3 { fill: color-mix(in srgb, var(--color-primary) 65%, transparent); background: color-mix(in srgb, var(--color-primary) 65%, transparent); }
.pv-fill--l4 { fill: var(--color-primary); background: var(--color-primary); }
.pv-ladder { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.pv-ladder li { display: inline-flex; align-items: center; gap: 5px; }
.pv-ladder b { color: var(--color-text); }
.pv-swatch { width: 8px; height: 8px; border-radius: 3px; }
.pv-sugs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.pv-sug { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-layer-faint); }
.pv-sug--primary { --pv-t: var(--color-primary); }
.pv-sug--success { --pv-t: var(--color-success); }
.pv-sug--warning { --pv-t: var(--color-warning); }
.pv-sug--danger { --pv-t: var(--color-danger); }
.pv-sug__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 11px; background: color-mix(in srgb, var(--pv-t) 16%, transparent); color: var(--pv-t); }
.pv-sug h3 { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pv-sug p { margin: 2px 0 8px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pv-sug a { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }
.pv-sug a:hover { text-decoration: underline; }
.pv-faces { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.pv-faces span { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -6px; border: 2px solid var(--color-surface); border-radius: 50%; background: color-mix(in srgb, var(--av) 24%, var(--color-surface)); color: var(--av); font-size: 8.5px; font-weight: var(--font-weight-bold); }
.pv-faces span:first-child { margin-left: 0; }
.pv-main { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 24rem; gap: var(--space-4); align-items: start; }
.pv-main.is-solo { grid-template-columns: 13.5rem minmax(0, 1fr); }
.pv-rail { position: sticky; top: var(--space-4); display: grid; gap: 2px; padding: var(--space-2); border-radius: var(--radius-2xl); }
.pv-rail__h { margin: 10px 10px 4px; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.pv-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-lg); color: var(--color-text-soft); font-size: var(--font-size-sm); text-decoration: none; cursor: pointer; }
.pv-list:hover { background: var(--color-layer-soft); color: var(--color-text); }
.pv-list.is-on { background: var(--color-primary-soft); color: var(--color-text); font-weight: var(--font-weight-semibold); }
.pv-list:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pv-list > .ui-icon, .pv-list__dot { color: var(--pv-t); }
.pv-list > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-list > b { color: var(--color-text-muted); font-size: var(--font-size-2xs); font-variant-numeric: tabular-nums; }
.pv-list__dot { width: 8px; height: 8px; margin: 0 3px; border-radius: 3px; background: var(--pv-t); }
.pv-list--primary { --pv-t: var(--color-primary); }
.pv-list--info { --pv-t: var(--color-info); }
.pv-list--success { --pv-t: var(--color-success); }
.pv-list--warning { --pv-t: var(--color-warning); }
.pv-list--danger { --pv-t: var(--color-danger); }
.pv-list--muted { --pv-t: var(--color-text-faint); }
.pv-more > summary { list-style: none; }
.pv-more > summary::-webkit-details-marker { display: none; }
.pv-more[open] > summary .ui-icon { transform: rotate(180deg); }
.pv-table { padding: 0; border-radius: var(--radius-2xl); overflow: visible; }
.pv-cmd { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px; padding: 6px 8px 6px 12px; min-height: 2.6rem; border: 1px solid var(--color-glass-border); border-radius: var(--radius-lg); background: var(--color-layer-soft); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pv-cmd:focus-within { border-color: var(--color-primary-border); }
.pv-cmd input[type="search"] { flex: 1 1 12rem; min-width: 8rem; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; }
.pv-cmd kbd { padding: 1px 7px; border: 1px solid var(--color-border); border-radius: 5px; font: inherit; font-size: var(--font-size-2xs); }
.pv-cmd__clear { display: inline-grid; place-items: center; color: var(--color-text-muted); }
.pv-token { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 9px; border-radius: 7px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pv-token em { color: var(--color-text-muted); font-style: normal; }
.pv-token .ui-icon { color: var(--color-text-faint); }
.pv-token:hover .ui-icon { color: var(--color-text); }
.pv-sort { position: relative; }
.pv-sort > summary { list-style: none; }
.pv-sort > summary::-webkit-details-marker { display: none; }
.pv-sort__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; min-width: 11rem; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg, 0 12px 32px rgb(0 0 0 / 0.18)); }
.pv-sort__menu a { padding: 7px 10px; border-radius: 8px; color: var(--color-text-soft); font-size: var(--font-size-sm); text-decoration: none; }
.pv-sort__menu a:hover, .pv-sort__menu a.is-on { background: var(--color-layer-soft); color: var(--color-text); }
.pv-thead, .pv-row { display: grid; grid-template-columns: minmax(14rem, 1.6fr) minmax(8rem, 1fr) 6.5rem minmax(8.5rem, 1fr); gap: 14px; align-items: center; padding: 0 16px; }
.pv-thead { padding-top: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--color-border); color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.pv-row { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.pv-row:hover { background: var(--color-layer-faint); }
.pv-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pv-row.is-sel { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.pv-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pv-av { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; }
.pv-av > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--av) 18%, transparent); color: var(--av); font-size: 11px; }
.pv-av--lg { width: 60px; height: 60px; }
.pv-av--lg > b { width: 46px; height: 46px; font-size: var(--font-size-md); }
.pv-av--primary { --av: var(--color-primary); }
.pv-av--success { --av: var(--color-success); }
.pv-av--info { --av: var(--color-info); }
.pv-av--warning { --av: var(--color-warning); }
.pv-av--danger { --av: var(--color-danger); }
.pv-ring { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pv-ring .is-on { stroke: var(--av); }
.pv-ring .is-off { stroke: var(--color-border); }
.pv-who__t { display: block; min-width: 0; }
.pv-who__t strong { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pv-who__t > span { display: block; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.pv-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.pv-tag--regular { background: var(--color-primary-soft); color: var(--color-primary); }
.pv-tag--elsewhere { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.pv-tag--never { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning-strong, var(--color-warning)); }
.pv-tag--failed { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.pv-tag--new { box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text-soft); }
.pv-trail { display: flex; align-items: center; gap: 12px; height: 18px; }
.pv-trail > i { position: relative; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.pv-trail > i + i::before { content: ""; position: absolute; top: 4.5px; right: 11px; width: 12px; height: 2px; background: var(--color-border-strong); }
.pv-trail > i.is-v { background: var(--color-success); }
.pv-trail > i.is-p { box-shadow: inset 0 0 0 2px var(--color-warning); }
.pv-trail > i.is-f { background: var(--color-danger); }
.pv-trail em, .pv-trail small { margin-left: 2px; color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: normal; }
.pv-trail small { margin: 0 -4px 0 0; }
.pv-ver { display: grid; gap: 5px; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.pv-ver progress { width: 100%; }
.pv-next { min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pv-next b { display: block; overflow: hidden; color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.pv-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 11px 16px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pv-pane-wrap { position: sticky; top: var(--space-4); }
.pv-pane { padding: 0; overflow: hidden; border-radius: var(--radius-2xl); }
.pv-pane.is-loading { opacity: 0.6; transition: opacity 0.15s ease; }
.pv-pane__back { display: none; align-items: center; gap: 4px; margin: var(--space-3) var(--space-4) 0; color: var(--color-text-soft); font-size: var(--font-size-sm); text-decoration: none; }
.pv-hero { padding: var(--space-5); border-bottom: 1px solid var(--color-border); background: transparent; }
.pv-hero__top { display: flex; align-items: center; gap: 14px; }
.pv-hero__who { min-width: 0; }
.pv-hero h2 { margin: 0; font-size: var(--font-size-xl); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pv-hero p { margin: 1px 0 6px; color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.pv-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--space-4) 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); }
.pv-facts > div { display: flex; flex-direction: column-reverse; padding: 9px 6px; text-align: center; }
.pv-facts > div + div { border-left: 1px solid var(--color-border); }
.pv-facts dt { color: var(--color-text-muted); font-size: 10.5px; }
.pv-facts dd { display: flex; justify-content: center; margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.pv-facts dd .ui-icon { color: var(--color-text-faint); }
.pv-pane__body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.pv-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--pv-t) 11%, transparent); color: var(--color-text); font-size: var(--font-size-xs); }
.pv-callout > .ui-icon { margin-top: 1px; color: var(--pv-t); }
.pv-callout a { display: inline-block; margin-top: 4px; color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }
.pv-callout--success { --pv-t: var(--color-success); }
.pv-callout--warning { --pv-t: var(--color-warning); }
.pv-callout--danger { --pv-t: var(--color-danger); }
.pv-callout--info { --pv-t: var(--color-info); }
.pv-names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pv-names span { padding: 3px 9px; border: 1px dashed var(--color-border-strong); border-radius: 99px; color: var(--color-text); }
.pv-names small { color: var(--color-text-muted); }
.pv-names em { font-style: normal; }
.pv-sec { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.pv-hist { display: grid; margin: 0; padding: 0; list-style: none; }
.pv-hist li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.pv-hist li + li { border-top: 1px solid var(--color-border); }
.pv-hist__date { line-height: 1.1; text-align: center; }
.pv-hist__date b { display: block; font-size: var(--font-size-md); }
.pv-hist__date span { color: var(--color-text-faint); font-size: 10px; font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.pv-hist li.is-future .pv-hist__date b { color: var(--color-primary); }
.pv-hist__body { min-width: 0; color: inherit; text-decoration: none; }
.pv-hist__body:hover p { color: var(--color-primary); }
.pv-hist p { margin: 0; overflow: hidden; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.pv-hist small { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ==========================================================================
   Integrations: sending hub, Bloomod SMTP identity, calendars and what is next
   ========================================================================== */
.ih { --integration-switch-w: 2.75rem; --integration-switch-h: 1.5rem; --integration-switch-knob: 1.1rem; --integration-accent: var(--color-success); display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.ih-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ih-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ih-seg { display: inline-flex; padding: 3px; border: 1px solid var(--color-glass-border); border-radius: var(--radius-pill); background: var(--color-layer-soft); }
.ih-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
.ih-seg button b { color: var(--color-text-faint); font-size: 10px; font-weight: var(--font-weight-semibold); }
.ih-seg button:hover { color: var(--color-text); }
.ih-seg button.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-border); }
.ih-seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ih-find { display: flex; align-items: center; gap: 8px; height: 2.35rem; width: 15rem; padding: 0 12px; border: 1px solid var(--color-glass-border); border-radius: var(--radius-pill); background: var(--color-layer-soft); color: var(--color-text-muted); }
.ih-find:focus-within { border-color: var(--color-primary-border); }
.ih-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); }
.ih-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }

/* Brand marks: tinted tiles, colour from the brand, never from the theme accent. */
.ih-logo { display: grid; flex: 0 0 auto; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: color-mix(in srgb, var(--ih-brand, var(--color-text-soft)) 14%, var(--color-surface)); color: var(--ih-brand, var(--color-text-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ih-brand, var(--color-text-soft)) 18%, transparent); }
.ih-logo--lg { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.ih-logo--sm { width: 1.75rem; height: 1.75rem; border-radius: 8px; }
.ih-logo--smtp { --ih-brand: var(--color-primary); }
.ih-logo--google { --ih-brand: #4285f4; }
.ih-logo--microsoft { --ih-brand: #00a4ef; }
.ih-logo--teams { --ih-brand: #5b5fc7; }
.ih-logo--zoom { --ih-brand: #2d8cff; }
.ih-logo--zapier { --ih-brand: #ff4f00; }
.ih-logo--pabbly { --ih-brand: #12a5a0; }
.ih-logo--slack { --ih-brand: #e01e5a; }
.ih-logo--whatsapp { --ih-brand: #25d366; }
.ih-logo--sms { --ih-brand: #0f9f9a; }
.ih-logo--rcs { --ih-brand: #d9568c; }
.ih-logo--facebook { --ih-brand: #1877f2; }
.ih-logo--linkedin { --ih-brand: #0a66c2; }
.ih-logo--instagram { --ih-brand: #e1306c; }
.ih-logo--x { --ih-brand: var(--color-text); }
.ih-logo--neutral { --ih-brand: var(--color-text-soft); }

/* Hub */
.ih-hub { container-type: inline-size; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-2xl); overflow: hidden; }
.ih-hub__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.ih-hub__head h2 { margin: 0; font-size: var(--font-size-lg); }
.ih-hub__head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ih-legend { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: 11px; }
.ih-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ih-legend i { width: 18px; height: 0; border-top: 2px solid; }
.ih-legend i.ih-legend__live { border-color: var(--color-primary); }
.ih-legend i.ih-legend__linked { border-color: var(--color-success); }
.ih-legend i.ih-legend__off { border-top-style: dashed; border-color: var(--color-border-strong); }
.ih-map { position: relative; align-self: center; width: 100%; max-width: 58rem; margin: 0 auto; aspect-ratio: 1000 / 560; color: var(--color-primary); }
.ih-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.ih-map__orbit { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 7; }
.ih-map__orbit--inner { stroke: color-mix(in srgb, var(--color-primary) 22%, transparent); stroke-dasharray: none; }
.ih-thread { fill: none; stroke-linecap: round; stroke-width: 1.6; }
.ih-thread--live { stroke: var(--color-primary); stroke-width: 2.6; }
.ih-thread--linked { stroke: var(--color-success); stroke-width: 2.2; }
.ih-thread--attention { stroke: var(--color-warning); stroke-width: 2.2; stroke-dasharray: 7 6; }
.ih-thread--off { stroke: var(--color-border-strong); stroke-dasharray: 2 7; }
.ih-thread--soon { stroke: var(--color-border); stroke-dasharray: 2 7; }
.ih-thread__flow { fill: none; stroke: color-mix(in srgb, var(--color-primary) 35%, #fff); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 3 22; animation: ih-flow 1.4s linear infinite; }
@keyframes ih-flow { to { stroke-dashoffset: -25; } }
.ih-core { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -50%); text-align: center; }
.ih-core__orb { position: relative; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: 6px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--color-primary) 60%, #fff) 0%, var(--color-primary) 58%, color-mix(in srgb, var(--color-primary) 75%, #000) 100%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 0 0 22px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 22px 40px -14px color-mix(in srgb, var(--color-primary) 75%, transparent); }
.ih-core__orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); animation: ih-pulse 2.8s ease-out infinite; }
@keyframes ih-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }
.ih-core__orb img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.ih-core b { color: var(--color-text); font-size: var(--font-size-sm); }
.ih-core small { color: var(--color-text-muted); font-size: 11px; }
.ih-node { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border), 0 12px 26px -16px rgb(0 0 0 / 0.5); white-space: nowrap; }
.ih-map .ih-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); }
.ih-node b { display: block; color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; }
.ih-node small { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: 11px; line-height: 1.3; }
.ih-node small i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ih-node--live { box-shadow: 0 0 0 1.5px var(--color-primary), 0 14px 30px -14px color-mix(in srgb, var(--color-primary) 65%, transparent); }
.ih-node--live small { color: var(--color-primary); }
.ih-node--linked small { color: var(--color-success); }
.ih-node--attention { box-shadow: 0 0 0 1.5px var(--color-warning), 0 12px 26px -16px rgb(0 0 0 / 0.5); }
.ih-node--attention small { color: var(--color-warning-strong, var(--color-warning)); }
.ih-node--soon { background: color-mix(in srgb, var(--color-surface) 70%, transparent); box-shadow: 0 0 0 1px var(--color-border); }
.ih-node--soon b { color: var(--color-text-muted); }
.ih-node--soon .ih-logo { filter: grayscale(0.35); opacity: 0.75; }
.ih-hublist { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.ih-hublist .ih-node { white-space: normal; }
@container (max-width: 50rem) {
    .ih-map .ih-node { gap: 7px; padding: 5px 9px 5px 5px; }
    .ih-map .ih-node b { font-size: var(--font-size-xs); }
    .ih-map .ih-logo { width: 1.6rem; height: 1.6rem; border-radius: 7px; }
    .ih-core__orb { width: 4.5rem; height: 4.5rem; }
    .ih-core__orb img { width: 2rem; height: 2rem; }
}
@container (max-width: 40rem) {
    .ih-map { display: none; }
    .ih-hublist { display: grid; }
}
@container (max-width: 17rem) {
    .ih-hublist { grid-template-columns: minmax(0, 1fr); }
}
.ih-hublist .ih-node b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-hublist .ih-node > span:last-child { min-width: 0; }

/* Bloomod SMTP identity */
.ih-id { position: relative; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-2xl); overflow: hidden; }
.ih-id::before { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; }
.ih-id > * { position: relative; }
.ih-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ih-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 10.5px; font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.ih-badge .ui-icon { width: 12px; height: 12px; }
.ih-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ih-badge--rec { background: var(--color-primary); color: var(--color-primary-contrast); }
.ih-badge--on { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
.ih-badge--soon { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info); }
.ih-id__title { margin: 0; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.2; }
.ih-id__title em { color: var(--color-primary); font-style: normal; }
.ih-id__lead { margin: -6px 0 0; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.ih-card { position: relative; padding: 16px 18px; overflow: hidden; border-radius: 18px; background: var(--color-primary); color: #fff; box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--color-primary) 80%, transparent); }
.ih-card--empty { background: var(--color-layer-soft); color: var(--color-text); box-shadow: inset 0 0 0 1px dashed var(--color-border-strong); }
.ih-card__row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em; opacity: 0.8; text-transform: uppercase; }
.ih-card__name { margin: 16px 0 2px; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.ih-card__mail { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-size-sm); opacity: 0.92; overflow-wrap: anywhere; }
.ih-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 16px; font-size: 11px; opacity: 0.85; }
.ih-can { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ih-can li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.ih-can .ui-icon { color: var(--color-success); }
.ih-can li.is-off { color: var(--color-text-muted); }
.ih-can li.is-off .ui-icon { color: var(--color-text-faint); }
.ih-id__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Journey */
.ih-path { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-2xl); scroll-margin-top: var(--space-6); }
.ih-path__title { padding-right: var(--space-4); border-right: 1px solid var(--color-border); }
.ih-path__title b { display: block; font-size: var(--font-size-sm); }
.ih-path__title span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ih-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ih-steps li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ih-steps li + li::before { content: ""; position: absolute; top: 50%; left: calc(var(--space-4) * -1 + 3px); width: calc(var(--space-4) - 6px); height: 2px; border-radius: 2px; background: var(--color-border-strong); }
.ih-step__icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
.ih-steps b { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.ih-steps small { color: var(--color-text-muted); font-size: 11px; }

/* Calendars, meeting links, and what is next */
/* Integrations sections: a heading, then a grid of tiles */
.ih-sec { display: grid; gap: var(--space-3); }
.ih-sec + .ih-sec { margin-top: var(--space-2); }
.ih-sec__head h2 { margin: 0; color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
.ih-sec__head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ih-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.ih-apps--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ih-app { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: var(--space-5); border-radius: var(--radius-2xl); }
.ih-app__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ih-app__state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ih-app__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ih-app__state--success { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success-strong); }
.ih-app__state--warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-strong); }
.ih-app__state--neutral { background: var(--color-layer-soft); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
.ih-app__state--info { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.ih-app__who b { display: block; color: var(--color-text); font-size: var(--font-size-md); }
.ih-app__who small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ih-app__text { margin: 0; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.ih-app__foot { display: flex; align-items: center; min-height: 2rem; padding-top: 12px; border-top: 1px solid var(--color-border); }
.ih-app__note { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ih-app.is-soon .ih-logo { filter: grayscale(0.35); opacity: 0.85; }
.ih-app.is-soon .ih-app__who b { color: var(--color-text-soft); }

.ih-low { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ih-cal { display: grid; align-content: start; gap: 12px; padding: var(--space-5); border-radius: var(--radius-2xl); }
.ih-cal__top { display: flex; align-items: center; gap: 12px; }
.ih-cal__who { min-width: 0; margin-right: auto; }
.ih-cal__who b { display: block; font-size: var(--font-size-md); }
.ih-cal__who small { display: block; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.ih-cal__text { margin: 0; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.ih-cal__alert { display: flex; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-text); font-size: var(--font-size-xs); }
.ih-cal__alert .ui-icon { flex: 0 0 auto; color: var(--color-warning); }
.ih-limit { display: grid; gap: 6px; }
.ih-limit div { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ih-limit b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.ih-limit progress { width: 100%; }
.ih-cal__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); }
.ih-cal__note { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.ih-cal__note--linked .ui-icon { color: var(--color-success); }
.ih-cal__note--attention .ui-icon { color: var(--color-warning); }
.ih-cal__actions { display: inline-flex; align-items: center; gap: 12px; }
.ih-cal__actions form { display: contents; }
.ih-textbtn { padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.ih-textbtn:hover { text-decoration: underline; }
.ih-textbtn--muted { color: var(--color-text-muted); }
.ih-textbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.ih-meet { display: grid; align-content: start; gap: 10px; padding: var(--space-5); border-radius: var(--radius-2xl); }
.ih-meet h3, .ih-way h3 { margin: 0; font-size: var(--font-size-md); }
.ih-meet > p, .ih-way__intro p { margin: -4px 0 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ih-meet__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ih-meet__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); font-size: var(--font-size-sm); }
.ih-meet__state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-style: normal; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.ih-meet__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ih-meet__state--linked { color: var(--color-success); }
.ih-meet__state--off { color: var(--color-text-muted); }
.ih-meet__state--soon { color: var(--color-info); }
.ih-way { grid-column: 1 / -1; display: grid; grid-template-columns: 12rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--space-5); align-items: start; padding: var(--space-5); border-radius: var(--radius-2xl); }
.ih-way__intro .ih-badge { margin-bottom: 10px; }
.ih-way__intro h3 { font-size: var(--font-size-lg); }
.ih-way__intro p { margin: 4px 0 0; font-size: var(--font-size-sm); }
.ih-way__group > p { margin: 0 0 8px; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.ih-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ih-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px dashed var(--color-border-strong); border-radius: 12px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.ih-empty { margin: 0; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-layer-faint); color: var(--color-text-muted); text-align: center; }
[data-ih-hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .ih-thread__flow, .ih-core__orb::after { animation: none; }
    .ih-thread__flow { stroke-dasharray: none; opacity: 0; }
}

/* ==========================================================================
   Billing: credit status, plan and charges, usage, plan fit, quick top-up
   ========================================================================== */
.bz { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.bz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.bz-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.bz-tile { position: relative; display: grid; align-content: start; gap: 12px; padding: var(--space-5); overflow: hidden; border-radius: var(--radius-2xl); }
.bz-tile::after { content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: none; pointer-events: none; }
.bz-tile > * { position: relative; }
.bz-tile--calendar { --bz-t: var(--color-primary); }
.bz-tile--email { --bz-t: var(--color-info); }
.bz-tile--plan { --bz-t: var(--color-success); }
.bz-tile__k { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.bz-tile__k > span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 8px; background: color-mix(in srgb, var(--bz-t) 16%, transparent); color: var(--bz-t); }
.bz-tile__k em { margin-left: auto; font-style: normal; text-align: right; }
.bz-v { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.bz-v b { font-size: 2.4rem; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; line-height: 1; }
.bz-v span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-runway { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 11px; border-radius: 99px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.bz-runway--ok { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.bz-runway--warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-strong, var(--color-warning)); }
.bz-runway--danger { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.bz-runway--neutral { background: var(--color-layer-soft); color: var(--color-text-muted); }
.bz-cells { display: flex; gap: 3px; height: 10px; }
.bz-cells i { flex: 1; border-radius: 3px; background: var(--color-layer-soft); }
.bz-cells i.m { background: var(--bz-t); }
.bz-cells i.p { background: color-mix(in srgb, var(--bz-t) 45%, transparent); }
.bz-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--color-text-muted); font-size: 11px; }
.bz-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bz-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--bz-t); }
.bz-legend i.p { background: color-mix(in srgb, var(--bz-t) 45%, transparent); }
.bz-legend b { color: var(--color-text); }
.bz-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--color-border); border-radius: 12px; }
.bz-stat > div { display: flex; flex-direction: column; padding: 8px 10px; min-width: 0; }
.bz-stat > div + div { border-left: 1px solid var(--color-border); }
.bz-stat dt { color: var(--color-text-muted); font-size: 10.5px; }
.bz-stat dd { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.bz-tile__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-tile__foot form { display: contents; }
.bz-link { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }
.bz-link:hover { text-decoration: underline; }
.bz-textbtn { padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.bz-textbtn:hover { text-decoration: underline; }
.bz-textbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.bz-textbtn--start { justify-self: start; }
.bz-muted { color: var(--color-text-faint); }
.bz-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bz-lines li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--font-size-sm); }
.bz-lines li > span { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-soft); }
.bz-lines b { font-variant-numeric: tabular-nums; }
.bz-pill { padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; }
.bz-next { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-layer-soft); color: var(--color-text-soft); font-size: var(--font-size-xs); }
.bz-next .ui-icon { flex: 0 0 auto; color: var(--bz-t); }
.bz-next b { color: var(--color-text); }

.bz-mid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-4); }
.bz-card { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-2xl); }
.bz-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bz-card__head h3 { margin: 0; font-size: var(--font-size-lg); }
.bz-card__head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: 11px; }
.bz-keys li { display: inline-flex; align-items: center; gap: 6px; }
.bz-keys i { width: 9px; height: 9px; border-radius: 3px; }
.bz-keys__cal { background: var(--color-primary); }
.bz-keys__mail { background: var(--color-info); }
.bz-keys__allow { height: 0 !important; border-top: 2px dashed var(--color-success); border-radius: 0 !important; }
.bz-chart { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 10px; }
.bz-yaxis { position: relative; height: 13.5rem; color: var(--color-text-faint); font-size: 10.5px; }
.bz-yaxis span { position: absolute; right: 0; bottom: var(--p); transform: translateY(50%); }
.bz-plot { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; height: 13.5rem; padding: 0 4%; border-bottom: 1px solid var(--color-border); background: linear-gradient(var(--color-border), var(--color-border)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--color-border), var(--color-border)) 0 25% / 100% 1px no-repeat, linear-gradient(var(--color-border), var(--color-border)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--color-border), var(--color-border)) 0 75% / 100% 1px no-repeat; }
.bz-allow { position: absolute; left: 0; right: 0; bottom: var(--p); z-index: 1; border-top: 2px dashed var(--color-success); }
.bz-allow span { position: absolute; top: -22px; right: 0; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); font-size: 10.5px; font-weight: var(--font-weight-semibold); }
.bz-col { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 100%; }
.bz-bar { position: relative; width: 34%; max-width: 44px; height: max(3px, var(--p)); border-radius: 8px 8px 3px 3px; }
.bz-bar b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: var(--color-text-soft); font-size: 10.5px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.bz-bar--cal { background: var(--color-primary); }
.bz-bar--mail { background: var(--color-info); }
.bz-col.is-now .bz-bar--cal { background: repeating-linear-gradient(135deg, var(--color-primary) 0 6px, color-mix(in srgb, var(--color-primary) 60%, transparent) 6px 12px); }
.bz-col.is-now .bz-bar--mail { background: repeating-linear-gradient(135deg, var(--color-info) 0 6px, color-mix(in srgb, var(--color-info) 60%, transparent) 6px 12px); }
.bz-xaxis { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 4% 0; color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: center; }
.bz-insight { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-soft); font-size: var(--font-size-xs); }
.bz-insight .ui-icon { flex: 0 0 auto; color: var(--color-primary); }
.bz-fit { gap: 14px; }
.bz-fit__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bz-fit__value b { font-size: 2.25rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bz-fit__value span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-meter { display: grid; gap: 8px; }
.bz-meter__track { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.bz-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--color-success), var(--color-primary)); }
.bz-meter__dot { position: absolute; top: 50%; left: clamp(7px, var(--p), calc(100% - 7px)); width: 14px; height: 14px; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent); transform: translate(-50%, -50%); }
.bz-meter__scale { display: flex; justify-content: space-between; gap: 10px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-meter__scale b { color: var(--color-text); }
.bz-verdict { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; }
.bz-verdict > .ui-icon { flex: 0 0 auto; margin-top: 2px; }
.bz-verdict > div { display: grid; gap: 2px; min-width: 0; }
.bz-verdict b { font-size: var(--font-size-sm); }
.bz-verdict span { font-size: var(--font-size-xs); }
.bz-verdict--good { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.bz-verdict--consider { background: var(--color-primary-soft); color: var(--color-primary); }
.bz-verdict--consider span { color: var(--color-text-soft); }
.bz-fit__when { margin: 0; color: var(--color-text-soft); font-size: var(--font-size-xs); line-height: 1.55; }
.bz-fit__when b { color: var(--color-text); }

.bz-buy-card { padding: var(--space-5); border-radius: var(--radius-2xl); scroll-margin-top: var(--space-6); }
.bz-buy { display: grid; gap: var(--space-4); }
.bz-buy__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.bz-buy__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); align-items: stretch; gap: var(--space-4); }
.bz-buy__pick { display: grid; align-content: center; gap: 10px; }
.bz-buy__sum { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px 16px; border-radius: 16px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.bz-total__label { display: block; color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.bz-buy__t b { display: block; font-size: var(--font-size-md); }
.bz-buy__t span { color: var(--color-text-muted); font-size: 11px; }
.bz-buy__note { margin: 0; color: var(--color-text-faint); font-size: 11px; }
.bz-buy__go { display: grid; justify-items: center; gap: 8px; }
.bz-buy__go .ui-button { white-space: nowrap; }
.bz-seg { display: inline-flex; padding: 3px; border: 1px solid var(--color-glass-border); border-radius: 99px; background: var(--color-layer-soft); }
.bz-seg label { position: relative; cursor: pointer; }
.bz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bz-seg label > span, .bz-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
.bz-seg input:checked + span, .bz-seg button.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-border); }
.bz-seg input:focus-visible + span, .bz-seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.bz-seg--sm button { padding: 4px 11px; font-size: var(--font-size-xs); }
.bz-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bz-packs__group { display: contents; }
.bz-packs__group[hidden] { display: none; }
.bz-pack { display: grid; gap: 1px; min-width: 5.25rem; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: transparent; color: var(--color-text); font: inherit; line-height: 1.2; text-align: center; cursor: pointer; }
.bz-pack b { font-size: var(--font-size-sm); }
.bz-pack small { color: var(--color-text-muted); font-size: 10.5px; white-space: nowrap; }
.bz-pack:hover:not([disabled]) { border-color: var(--color-border-strong); }
.bz-pack.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.bz-pack[disabled] { opacity: 0.45; cursor: not-allowed; }
.bz-pack:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bz-custom { display: inline-flex; align-items: center; gap: 6px; height: 2.6rem; padding: 0 10px; border: 1px dashed var(--color-border-strong); border-radius: 12px; color: var(--color-text-muted); }
.bz-custom:focus-within { border-style: solid; border-color: var(--color-primary-border); }
.bz-custom input { width: 5rem; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.bz-total { min-width: 0; }
.bz-total b { display: block; margin: 2px 0; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.1; }
.bz-total p { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--color-text-muted); font-size: 11px; }

.bz-pay { padding: 0; overflow: hidden; border-radius: var(--radius-2xl); }
.bz-pay__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.bz-pay__head h3 { margin: 0; font-size: var(--font-size-md); }
.bz-pay__empty { margin: 0; padding: var(--space-5) 20px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-pay__head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Billing tabs: Overview, Plan & add-ons, Credits and Payments behind the account island. */
.bz-panel { display: grid; gap: var(--space-4); min-width: 0; }
.bz-panel[hidden] { display: none; }
.bz-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bz-head__title .dash-head__title { margin: 0; }
.bz-plan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.bz-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-2xl); }
.bz-summary--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-summary > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: var(--space-5); }
.bz-summary > div + div { border-left: 1px solid var(--color-border); }
.bz-summary p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.bz-summary b { font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bz-summary small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-summary__plan { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; background: transparent; }
.bz-summary__plan h2 { margin: 2px 0 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.bz-tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-card--flush { gap: 0; padding: 0; overflow: hidden; }
.bz-card--flush > .bz-card__head { padding: var(--space-5) var(--space-5) var(--space-4); }
.bz-empty-note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--color-layer-soft); }
.bz-mini > div { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); }
.bz-mini strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-mini small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-mini > b { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.bz-mini--total { padding-top: 14px; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.bz-mini__mark { display: grid; flex: 0 0 auto; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.bz-mini__mark--info { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }

/* Plan & add-ons: three plan cards whose rows line up through subgrid, then add-ons beside plan fit. */
.bz-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bz-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 16px 18px; border-radius: var(--radius-2xl); }
/* The ring is drawn inside the card (border + inset shadow) so a clipping parent never cuts an edge. */
.bz-plan.is-current { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 55%); }
.bz-plan__top h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.bz-plan__top p { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.45; }
.bz-plan__art-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bz-plan__art { width: 2.25rem; height: 2.25rem; margin-left: -3px; }
.bz-plan__art-fill { fill: var(--color-primary); }
.bz-plan__art-core { fill: var(--color-surface); }
.bz-plan__art-seam { stroke: var(--color-surface); stroke-width: 1.4; opacity: 0.85; }
.bz-plan__art-line { stroke: var(--color-text); stroke-width: 1.6; }
.bz-plan__art-dash { stroke: var(--color-text-faint); }
.bz-plan__badge { padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.bz-plan__badge--teams { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.bz-plan__price { display: grid; align-content: start; padding-top: 12px; }
.bz-plan__price p { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.bz-plan__price b { font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bz-plan__price s { color: var(--color-text-faint); font-size: var(--font-size-sm); }
.bz-plan__price small strong { margin-left: 4px; padding: 1px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.bz-plan__price b.bz-plan__custom { font-size: 1.6rem; letter-spacing: -0.03em; }
.bz-plan__price span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-plan__price small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-cycle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.bz-cycle button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.bz-cycle button.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-border); }
.bz-cycle button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.bz-cycle em { padding: 1px 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); font-size: 10.5px; font-style: normal; }
.bz-cycle__view[hidden] { display: none; }
.bz-plan__cta { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.bz-plan__cta .ui-button { width: 100%; justify-content: center; }
.bz-plan__state { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 16px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text-soft); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; }
.bz-feat { display: grid; align-content: start; gap: 7px; margin: 0; padding: 12px 0; list-style: none; font-size: var(--font-size-sm); }
.bz-feat li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bz-feat li > span { flex: 1 1 auto; min-width: 0; }
.bz-feat .ui-icon { flex: 0 0 auto; color: var(--color-primary); }
.bz-feat li.is-off { color: var(--color-text-soft); }
.bz-feat li.is-off .ui-icon { color: var(--color-text-faint); }
.bz-feat__tag { flex: 0 0 auto; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-layer-soft); color: var(--color-text-soft); font-size: 11px; font-style: normal; font-weight: var(--font-weight-medium); white-space: nowrap; }
.bz-plan__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-plan__foot:empty { border-top: 0; padding: 0; }
.bz-plan__foot .bz-textbtn { font-size: var(--font-size-xs); }

.bz-plan__note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--color-layer-soft); color: var(--color-text-soft); font-size: var(--font-size-sm); }
.bz-plan__note .ui-icon { flex: 0 0 auto; color: var(--color-primary); }

.bz-mid--plan { align-items: start; }
.bz-addons > .bz-card__head { padding-bottom: var(--space-4); }
.bz-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px var(--space-5); border-top: 1px solid var(--color-border); }
.bz-addon__mark { display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--color-layer-soft); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border); }
.bz-addon__copy { display: grid; gap: 2px; min-width: 0; }
.bz-addon__copy small { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.45; }
.bz-addon__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.bz-addon__side form { display: contents; }
.bz-addon__price { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: right; white-space: nowrap; }
.bz-addon__price b { display: inline; color: var(--color-text); font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; }
.bz-addon__price small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-addon__foot { margin: 0; padding: 14px var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-addon__foot .bz-link { font-size: inherit; }

.bz-table-wrap { overflow-x: auto; }
.bz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.bz-table th { padding: 10px var(--space-5); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.bz-table td { padding: 14px var(--space-5); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.bz-table tr:last-child td { border-bottom: 0; }
.bz-table td small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.bz-table .is-yours { color: var(--color-text); font-weight: var(--font-weight-bold); }
.bz-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: bz-rule; }
.bz-rules li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--font-size-sm); }
.bz-rules li::before { counter-increment: bz-rule; content: counter(bz-rule); display: grid; flex: 0 0 auto; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-layer-soft); font-size: 12px; font-weight: var(--font-weight-bold); }
.bz-rules small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-prows { margin: 0; padding: 0; list-style: none; }
.bz-prow { display: grid; grid-template-columns: 7rem minmax(0, 1.6fr) 7rem minmax(0, 1fr) 8rem 5rem; align-items: center; gap: 14px; padding: 12px 20px; font-size: var(--font-size-sm); }
.bz-prows .bz-prow { border-top: 1px solid var(--color-border); }
.bz-prows .bz-prow[hidden] { display: none; }
.bz-prow--h { padding-top: 10px; padding-bottom: 10px; color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.bz-prow--h span:last-child, .bz-prow__amt { text-align: right; }
.bz-prow__date { color: var(--color-text-soft); }
.bz-prow__item { min-width: 0; }
.bz-prow__item b { display: block; font-weight: var(--font-weight-semibold); }
.bz-prow__item small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-prow__rate { color: var(--color-text-soft); }
.bz-prow > .ui-status-badge { justify-self: start; }
.bz-prow__amt { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.bz-type { display: inline-flex; justify-self: start; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--bz-c) 13%, transparent); color: var(--bz-c); font-size: 11px; font-weight: var(--font-weight-semibold); }
.bz-type--primary { --bz-c: var(--color-primary); }
.bz-type--info { --bz-c: var(--color-info); }
.bz-type--success { --bz-c: var(--color-success); }

/* Billing dialogs: upgrade and cancel confirmations */
/* Upgrade to Stem dialog: centred hero, cycle toggle, one comparison table, one checkout button.
   The body is a flex column whose sections never shrink, so a short viewport scrolls instead of overlapping. */
.bz-upm .ui-modal__dialog { width: min(100%, 34rem); max-height: min(46rem, calc(100dvh - 2rem)); border-radius: 22px; background: var(--color-surface-subtle, var(--color-surface)); }
.bz-upm [hidden] { display: none !important; }
.bz-upm__close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 2rem; height: 2rem; min-height: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.bz-upm__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 12px; min-height: 0; padding: 20px 22px 14px; overflow-y: auto; }
.bz-upm__body > * { flex-shrink: 0; }
.bz-upm__hero { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 28rem; padding: 0 2rem; text-align: center; }
.bz-upm__hero .bz-plan__art { width: 2.25rem; height: 2.25rem; margin: 0 0 4px; }
.bz-upm__hero h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.bz-upm__hero p { margin: 2px 0 0; color: var(--color-text-soft); font-size: var(--font-size-sm); line-height: 1.45; }
.bz-cycle--lg button { padding: 6px 14px; font-size: var(--font-size-sm); }
.bz-cycle--lg em { font-size: 11px; }
.bz-upm__price { text-align: center; }
.bz-upm__price p { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 0; }
.bz-upm__price b { font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bz-upm__price span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bz-upm__price small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bz-upm__table { align-self: stretch; overflow: hidden; border-radius: 14px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.bz-up__cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 1.35; }
.bz-up__cmp th, .bz-up__cmp td { padding: 7px 14px; border-top: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.bz-up__cmp th:first-child { width: 42%; }
.bz-up__cmp th:nth-child(2) { width: 32%; }
.bz-up__cmp thead th { border-top: 0; color: var(--color-text-muted); font-size: 12px; font-weight: var(--font-weight-semibold); }
.bz-up__cmp thead th:last-child { color: var(--color-primary); }
.bz-up__cmp tbody th { color: var(--color-text); font-weight: var(--font-weight-regular, 400); }
.bz-up__cmp td { color: var(--color-text-soft); }
.bz-up__cmp td:last-child { color: var(--color-text); font-weight: var(--font-weight-bold); }
.bz-upm__also { align-self: stretch; }
.bz-upm__also h3 { margin: 0 0 6px; color: var(--color-text-muted); font-size: 12px; font-weight: var(--font-weight-semibold); }
.bz-upm__also ul { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.bz-upm__also li { display: flex; align-items: flex-start; gap: 8px; }
.bz-upm__also .ui-icon { flex: 0 0 auto; margin-top: 1px; color: var(--color-primary); }
.bz-upm__note { align-self: stretch; margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.55; }
.bz-upm__foot { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid var(--color-border); }
.bz-upm__foot .ui-button { min-height: 2.6rem; white-space: nowrap; }
.bz-upm__foot .ui-button:not(.ui-button--secondary) { flex: 1 1 auto; justify-content: center; }
.bz-confirm .ui-modal__body { display: grid; gap: var(--space-4); }
.bz-confirm__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--color-warning) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 30%, transparent); }
.bz-confirm__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning-strong, var(--color-warning)); }
.bz-confirm__card dl { display: grid; gap: 6px; margin: 0; }
.bz-confirm__card dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-size-sm); }
.bz-confirm__card dt { color: var(--color-text-muted); }
.bz-confirm__card dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }
.bz-confirm__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--color-text-soft); font-size: var(--font-size-sm); }
.bz-confirm__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; }
.bz-confirm__list .ui-icon { margin-top: 2px; color: var(--color-text-muted); }
.bz-confirm .ui-modal__footer form { display: contents; }

/* ==========================================================================
   Settings: account, organization, notifications, security, appearance
   ========================================================================== */
.sy-switch { position: relative; }
.sy-switch > summary { list-style: none; cursor: pointer; }
.sy-switch > summary::-webkit-details-marker { display: none; }
.sy-switch[open] > summary .ui-icon:last-child { transform: rotate(180deg); }
.sy-switch .nav-dropdown__menu { left: 0; right: auto; min-width: 11rem; }
.sy-switch .nav-dropdown__item { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.sy-switch__sep { align-self: center; flex: 0 0 auto; width: 1px; height: 1.6rem; margin: 0 4px; background: rgb(255 255 255 / 0.16); }
.sy { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.sy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.sy-find { display: flex; align-items: center; gap: 8px; width: 17rem; height: 2.4rem; padding: 0 12px; border: 1px solid var(--color-glass-border); border-radius: 99px; background: var(--color-layer-soft); color: var(--color-text-muted); }
.sy-find:focus-within { border-color: var(--color-primary-border); }
.sy-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); }
.sy-find kbd { padding: 1px 7px; border: 1px solid var(--color-border); border-radius: 5px; font: inherit; font-size: var(--font-size-2xs); }
.sy-score { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; border-radius: var(--radius-2xl); }
.sy-score__ring { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.sy-score__ring svg { flex: 0 0 auto; width: 52px; height: 52px; max-width: none; }
.sy-score__ring circle { fill: none; stroke-width: 6; }
.sy-score__track { stroke: color-mix(in srgb, var(--color-text) 10%, transparent); }
.sy-score__value { stroke: var(--color-success); stroke-linecap: round; }
.sy-score b { display: block; font-size: var(--font-size-sm); }
.sy-score__ring b { font-size: var(--font-size-md); }
.sy-score small { color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.sy-score__item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 16px; border-left: 1px solid var(--color-border); }
.sy-score__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 11px; background: color-mix(in srgb, var(--sy-t) 15%, transparent); color: var(--sy-t); }
.sy-score__item--ok { --sy-t: var(--color-success); }
.sy-score__item--todo { --sy-t: var(--color-warning); }
.sy-sec { display: grid; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; gap: var(--space-5); scroll-margin-top: 6rem; }
.sy-sec[hidden] { display: none; }
.sy-sec__side { position: sticky; top: var(--space-4); display: grid; gap: 8px; padding-top: 6px; }
.sy-sec__side--primary { --sy-t: var(--color-primary); }
.sy-sec__side--info { --sy-t: var(--color-info); }
.sy-sec__side--warning { --sy-t: var(--color-warning); }
.sy-sec__side--success { --sy-t: var(--color-success); }
.sy-sec__side--rose { --sy-t: #ec4899; }
.sy-sec__k { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 4px 11px 4px 5px; border-radius: 99px; background: color-mix(in srgb, var(--sy-t) 13%, transparent); color: var(--sy-t); font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.sy-sec__k > span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--sy-t); color: #fff; }
.sy-sec__side h2 { margin: 4px 0 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.sy-sec__side p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sy-card { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-2xl); }
.sy-card__title { margin: 0; font-size: var(--font-size-md); }
.sy-card__text { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sy-id { display: flex; align-items: center; gap: 16px; }
.sy-av { display: grid; flex: 0 0 auto; place-items: center; width: 3.6rem; height: 3.6rem; overflow: hidden; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.sy-av img { width: 100%; height: 100%; object-fit: cover; }
.sy-id__t { min-width: 0; }
.sy-id__t b { display: block; font-size: var(--font-size-md); }
.sy-id__t span { color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.sy-id .ui-button { margin-left: auto; }
.sy-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sy-method { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-layer-faint); }
.sy-method > div { min-width: 0; }
.sy-method__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }
.sy-method b { display: block; font-size: var(--font-size-sm); }
.sy-method small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-method.is-on { border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: color-mix(in srgb, var(--color-success) 7%, var(--color-layer-faint)); }
.sy-method .sy-pill { margin-left: auto; }
.sy-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: var(--font-weight-bold); white-space: nowrap; }
.sy-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sy-pill--on { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.sy-pill--off { background: var(--color-layer-soft); color: var(--color-text-muted); }
.sy-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-note .ui-icon { flex: 0 0 auto; color: var(--color-primary); }
.sy-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.sy-facts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--color-layer-soft); color: var(--color-text-soft); font-size: var(--font-size-xs); }
.sy-facts b { color: var(--color-text); }
.sy-org { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-5); }
.sy-logo { display: grid; align-content: start; justify-items: center; gap: 10px; text-align: center; }
.sy-logo form { display: contents; }
.sy-logo__img { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 26px; background: repeating-linear-gradient(45deg, var(--color-layer-soft) 0 8px, transparent 8px 16px); }
.sy-logo__img span, .sy-logo__img img { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 20px; background: #111; color: #fff; font-size: 1.9rem; font-weight: var(--font-weight-bold); object-fit: cover; box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.6); }
.sy-logo small { color: var(--color-text-faint); font-size: 11px; overflow-wrap: anywhere; }
.sy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 16px; }
.sy-form > * { min-width: 0; margin: 0; }
.sy-form__wide { grid-column: 1 / -1; }
.sy-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-savebar > span { display: inline-flex; align-items: center; gap: 7px; }
.sy-savebar > div { display: flex; gap: 8px; margin-left: auto; }
.sy-textbtn { padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.sy-textbtn:hover { color: var(--color-danger); text-decoration: underline; }
.sy-lock { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary-border); }
.sy-lock > span { display: grid; flex: 0 0 auto; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--color-primary); color: var(--color-primary-contrast); }
.sy-lock b { display: block; font-size: var(--font-size-sm); }
.sy-lock small { color: var(--color-text-soft); font-size: var(--font-size-xs); }
.sy-lock .ui-button { margin-left: auto; }
.sy-notes-form { display: grid; gap: var(--space-4); }
.sy-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sy-nrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: 14px; }
.sy-nrow__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--color-layer-soft); color: var(--color-text-soft); }
.sy-nrow b { display: block; font-size: var(--font-size-sm); }
.sy-nrow small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-nrow__toggle > span:not(.form-toggle__track) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sy-notes-form.is-locked .sy-nrow { opacity: 0.62; }
.sy-notes__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sy-always { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-always span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-text-soft); }
.sy-always .ui-icon { color: var(--color-success); }
.sy-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.sy-dev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.sy-dev__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.sy-dev b { display: block; font-size: var(--font-size-sm); }
.sy-dev small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sy-danger { align-content: start; background: var(--color-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 35%, transparent); }
.sy-danger__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--color-text-soft); font-size: var(--font-size-xs); }
.sy-danger__list li { display: flex; align-items: flex-start; gap: 8px; }
.sy-danger__list .ui-icon { flex: 0 0 auto; color: var(--color-danger); }
.sy-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sy-mode { display: grid; gap: 10px; padding: 10px; border: 1.5px solid var(--color-border); border-radius: 18px; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.sy-mode:hover { border-color: var(--color-border-strong); }
.sy-mode.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.sy-mode:focus-visible, .sy-sw:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sy-prev { display: grid; grid-template-columns: 1.3rem 1fr; gap: 8px; height: 6.2rem; padding: 10px; overflow: hidden; border-radius: 12px; }
.sy-prev > i { border-radius: 5px; }
.sy-prev > span { display: grid; align-content: start; gap: 6px; }
.sy-prev > span i { height: 9px; border-radius: 5px; }
.sy-prev > span i:first-child { width: 45%; background: var(--color-primary) !important; box-shadow: none !important; }
.sy-prev--light { background: #f4f4f6; }
.sy-prev--light > i { background: #e4e4e9; }
.sy-prev--light > span i { background: #fff; box-shadow: 0 0 0 1px #e4e4e9; }
.sy-prev--dark { background: #111217; }
.sy-prev--dark > i { background: #1d1f26; }
.sy-prev--dark > span i { background: #1a1c22; box-shadow: 0 0 0 1px #2a2c35; }
.sy-prev--system { background: linear-gradient(120deg, #f4f4f6 50%, #111217 50%); }
.sy-prev--system > i { background: #d9d9e0; }
.sy-prev--system > span i { background: #1a1c22; box-shadow: 0 0 0 1px #2a2c35; }
.sy-mode__l { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.sy-mode__l > span { display: inline-flex; align-items: center; gap: 7px; }
.sy-radio { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.sy-mode.is-active .sy-radio { box-shadow: inset 0 0 0 5px var(--color-primary); }
.sy-accents { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.sy-accents__label { margin-right: 6px; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.sy-accents em { margin-left: auto; color: var(--color-text-faint); font-size: 11px; font-style: normal; }
.sy-sw { position: relative; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: var(--sy-c); cursor: pointer; }
.sy-sw--purple { --sy-c: #8b5cf6; }
.sy-sw--blue { --sy-c: #3b82f6; }
.sy-sw--teal { --sy-c: #14b8a6; }
.sy-sw--green { --sy-c: #22c55e; }
.sy-sw--orange { --sy-c: #f97316; }
.sy-sw--rose { --sy-c: #f43f5e; }
.sy-sw.is-active { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--sy-c); }
.sy-sw.is-active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: var(--font-weight-bold); }
.sy-empty { margin: 0; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-layer-faint); color: var(--color-text-muted); text-align: center; }

/* Profile: hero, personal and organization details, purchases */
.pf-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-2xl); background: transparent; }
.pf-hero__who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pf-hero__who h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.pf-hero__who p { margin: 2px 0 8px; color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.pf-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-layer-faint); }
.pf-facts li { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.pf-facts li + li { border-left: 1px solid var(--color-border); }
.pf-facts small { display: block; color: var(--color-text-muted); font-size: 11px; }
.pf-facts b { font-size: var(--font-size-sm); white-space: nowrap; }
.pf-facts__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); }
.pf-facts__icon--ok { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.pf-facts__icon--todo { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.pf-photo span, .pf-photo img { border-radius: 50%; background: var(--color-primary); }
.pf-photo { border-radius: 50%; }
.pf-orgname { display: grid; gap: 2px; }
.pf-orgname b { font-size: var(--font-size-sm); }
.pf-org { min-width: 0; }
.pf-readonly { background: color-mix(in srgb, var(--color-warning) 14%, transparent) !important; color: var(--color-warning-strong, var(--color-warning)) !important; font-weight: var(--font-weight-semibold); }
.pf-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pf-sub > div { display: grid; align-content: start; gap: 10px; min-width: 0; }
.pf-kv { display: grid; margin: 0; }
.pf-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: var(--font-size-sm); }
.pf-kv > div + div { border-top: 1px solid var(--color-border); }
.pf-kv dt { color: var(--color-text-muted); }
.pf-kv dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; overflow-wrap: anywhere; }
.pf-kv dd small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular, 400); }
.pf-regional { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.pf-regional > * { min-width: 0; margin: 0; }
.pf-purchases { padding: var(--space-5); }
/* Grid form groups align on one line; the stacked-form spacing does not apply here. */
.sy-form > .form-group.form-group, .pf-regional > .form-group.form-group { margin-top: 0; }
/* An uploaded logo is shown as it is: no tile, no pattern, never cropped. */
.sy-logo__img--image { background: none; }
.sy-logo__img--image img { width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }

/* Account menu behind the header avatar */
.um { width: min(21rem, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); gap: 10px; padding: 10px; overflow-y: auto; }
.um-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; overflow: hidden; border-radius: 14px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); }
.um-head__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: var(--font-weight-bold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.um-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.um-head__who { display: grid; min-width: 0; }
.um-head__who strong, .um-head__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head__who strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.um-head__who span { color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.um-org { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 2px 4px; }
.um-org__mark { display: grid; place-items: center; width: 2rem; height: 2rem; overflow: hidden; border-radius: 9px; background: #111; color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.um-org__mark--image { background: none; }
.um-org__mark img { width: 100%; height: 100%; object-fit: contain; }
.um-org__name { display: grid; min-width: 0; }
.um-org__name b { overflow: hidden; font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.um-org__name small { color: var(--color-text-muted); font-size: 10.5px; }
.um-plan { padding: 2px 9px; border-radius: 99px; font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: 0.03em; text-transform: uppercase; }
.um-plan--free { background: var(--color-layer-soft); color: var(--color-text-soft); box-shadow: inset 0 0 0 1px var(--color-border); }
.um-plan--business { background: var(--color-primary); color: var(--color-primary-contrast); }
.um-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.um-credit { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: var(--color-layer-faint); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); text-decoration: none; }
.um-credit > .ui-icon { color: var(--color-primary); }
a.um-credit:hover { background: var(--color-layer-soft); }
.um-credit span { display: grid; line-height: 1.2; }
.um-credit b { font-size: var(--font-size-sm); }
.um-credit small { color: var(--color-text-muted); font-size: 10px; }
.um-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.um-quick__item { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border-radius: 11px; color: var(--color-text-soft); font-size: 10.5px; font-weight: var(--font-weight-medium); text-align: center; text-decoration: none; }
.um-quick__item > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 11px; background: var(--color-layer-soft); color: var(--color-text); }
.um-quick__item:hover, .um-quick__item.is-active { color: var(--color-text); }
.um-quick__item:hover > span { background: var(--color-primary-soft); color: var(--color-primary); }
.um-quick__item.is-active > span { background: var(--color-primary); color: var(--color-primary-contrast); }
.um-quick__item:focus-visible, .um-credit:focus-visible, .um-upgrade:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.um-links { gap: 2px; }
.um-link > span { display: grid; min-width: 0; line-height: 1.25; }
.um-link b { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.um-link small { color: var(--color-text-muted); font-size: 10.5px; }
.um-upgrade { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-primary); color: #fff; text-decoration: none; }
.um-upgrade span { display: grid; line-height: 1.25; }
.um-upgrade b { font-size: var(--font-size-sm); }
.um-upgrade small { font-size: 10.5px; opacity: 0.85; }
.um .app-user-menu__signout { margin-top: 0; }
.um strong, .um b { color: var(--color-text); }
.um .um-upgrade b, .um .um-plan--business { color: #fff; }

/* Credit usage ledger (Calendar and Email) */
.cu { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.cu-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.cu-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; }
.cu-back:hover { color: var(--color-text); }
.cu-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cu-seg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; }
.bz-seg--sm .cu-seg { padding: 4px 11px; font-size: var(--font-size-xs); }
.cu-seg:hover { color: var(--color-text); }
.cu-seg.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--color-border); }
.cu-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-4); }
.cu-balance .bz-tile__foot { margin-top: auto; }
.cu-peak { padding: 3px 10px; border-radius: 99px; background: var(--color-layer-soft); color: var(--color-text-soft); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.cu-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 3px; height: 6.5rem; padding-bottom: 2px; border-bottom: 1px solid var(--color-border); }
.cu-bars i { height: var(--p); border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--cu-c) 55%, transparent); }
.cu-bars i.is-zero { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.cu-bars i.is-today { background: var(--cu-c); }
.cu--calendar { --cu-c: var(--color-primary); }
.cu--email { --cu-c: var(--color-info); }
.cu-bars__axis { display: flex; justify-content: space-between; margin-top: -8px; color: var(--color-text-faint); font-size: 10.5px; }
.cu-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--color-border); border-radius: 12px; }
.cu-totals > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-width: 0; }
.cu-totals > div + div { border-left: 1px solid var(--color-border); }
.cu-totals dt { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: 11px; }
.cu-totals dd { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.cu-totals dd small { display: block; color: var(--color-text-faint); font-size: 10.5px; font-weight: var(--font-weight-medium); }
.cu-uses { align-content: start; }
.cu-use { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.cu-use__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: color-mix(in srgb, var(--cu-c) 14%, transparent); color: var(--cu-c); }
.cu-use__body { display: grid; gap: 5px; }
.cu-use__body > div { display: flex; justify-content: space-between; gap: 8px; font-size: var(--font-size-sm); }
.cu-use__body span { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.cu-use__body progress { width: 100%; }
.cu-empty-note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cu-ledger { padding: 0; overflow: hidden; border-radius: var(--radius-2xl); }
.cu-ledger__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.cu-ledger__head h3 { margin: 0; font-size: var(--font-size-md); }
.cu-ledger__head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.cu-count { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.cu-rowhead, .cu-row { display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(9rem, 1.2fr) 7.5rem 8.5rem 5rem; align-items: center; gap: 14px; padding: 0 20px; }
.cu-rowhead { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text-faint); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.cu-rowhead span:last-child, .cu-row__amount { text-align: right; }
.cu-day__head { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 20px 6px; background: var(--color-layer-faint); color: var(--color-text-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.cu-day__head span:last-child { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.cu-rows { margin: 0; padding: 0; list-style: none; }
.cu-row { padding-top: 11px; padding-bottom: 11px; border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.cu-row__what { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cu-row__what > span:last-child { display: grid; min-width: 0; }
.cu-row__what b { font-weight: var(--font-weight-semibold); }
.cu-row__what small, .cu-row__time small, .cu-row__event small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.cu-row__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: color-mix(in srgb, var(--cu-c) 14%, transparent); color: var(--cu-c); }
.cu-row__icon--reserved { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.cu-row__icon--released { background: var(--color-layer-soft); color: var(--color-text-muted); }
.cu-row__event { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-row__event a { color: var(--color-text); font-weight: var(--font-weight-medium); text-decoration: none; }
.cu-row__event a:hover { color: var(--color-primary); text-decoration: underline; }
.cu-row__time { display: grid; color: var(--color-text-soft); }
.cu-row__amount { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.cu-row__amount.is-released { color: var(--color-success); }
.cu-row__amount.is-reserved { color: var(--color-info); }
.cu-muted { color: var(--color-text-faint); }
.cu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.cu-foot p { margin: 0; }
/* Fixed email documents stay isolated from the application theme. */
.email-preview { display: grid; gap: var(--space-4); min-width: 0; }
.email-preview__subject { overflow-wrap: anywhere; color: var(--color-text); }
.email-preview__frame { display: block; width: 100%; max-width: 48rem; height: 52rem; margin-inline: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.email-preview--mobile .email-preview__frame { max-width: 23.4375rem; }
.email-design-thumbnail { height: 12rem; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); pointer-events: none; }
.email-design-thumbnail iframe { width: 200%; height: 40rem; border: 0; transform: scale(.5); transform-origin: top left; }
[data-kit-chooser] .event-flow__choice-label { text-decoration: none; }
[data-kit-editor] .nav-dropdown__menu { max-height: 22rem; overflow-y: auto; }
/*
 * Create Message Kit: the Create event dialog's shell, widened so a row of
 * starting designs still reads. Everything else is the event-flow vocabulary.
 */
/* Step 1 keeps the Create event width; only the design grid asks for more. */
.message-kit-create-modal .ui-modal__dialog {
    display: flex;
    min-height: 0;
    max-height: min(54rem, calc(100dvh - 2rem));
    flex-direction: column;
}

.message-kit-create-modal .ui-modal__dialog:has([data-kit-design-panel]:not([hidden])) {
    width: min(100%, 54rem);
}
.message-kit-create-card { padding: 0; }
.message-kit-create-card .event-flow { max-height: none; }

/* The starting designs: selectable cards that share the choice-row behaviour. */
.kit-designs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
    background: none;
}

.kit-design { position: relative; min-width: 0; }

.kit-design__label {
    display: grid;
    height: 100%;
    gap: var(--space-3);
    padding: var(--space-3);
    align-content: start;
    border: 1px solid var(--event-flow-edge);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.kit-design:hover .kit-design__label { background: var(--event-flow-fill); }

.kit-design:has(.event-flow__radio:checked) .kit-design__label {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.kit-design:has(.event-flow__radio:focus-visible) .kit-design__label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.kit-design__art { position: relative; height: 9.5rem; margin: 0; border-radius: var(--radius-sm); }

.kit-design__art::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2.25rem;
    background: linear-gradient(to bottom, transparent, var(--color-preview-surface));
}
.kit-design__art iframe { width: 320%; height: 44rem; transform: scale(.3125); }
.kit-design__copy { display: grid; min-width: 0; gap: 2px; }
.kit-design__copy strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.kit-design__copy small { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-normal); }

.kit-design__check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: none;
    width: 1.375rem;
    height: 1.375rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.kit-design:has(.event-flow__radio:checked) .kit-design__check { display: grid; }

/*
 * Message Kits library, editor and preview.
 * Tokens only: the rows, panels and preview frame borrow the same glass card,
 * status and control vocabulary the Event workspaces use. Breakpoints for these
 * patterns live in responsive.css.
 */
/* Section headline, the same shape Events and Integrations use. */
.kit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.kit-head__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kit-head__title .dash-head__title { margin: 0; }
.kit-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kit-head__actions form { display: contents; }

/* Search sits in the list card header, opposite the heading. */
.kit-search {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 0 1 18rem;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-field);
    color: var(--color-text-faint);
}

.kit-search:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }

.kit-search input {
    min-width: 0;
    height: var(--control-height-sm);
    flex: 1 1 auto;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
}

.kit-search input:focus { outline: none; }

.kit-rows { display: grid; gap: var(--space-2); }

.kit-row {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr) 7.5rem 8rem 7.5rem 13.25rem;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
}

.kit-row--head {
    padding-block: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.kit-row--head span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.kit-row__thumb { height: 4.5rem; }

/*
 * The row thumbnail shows the whole email head, not a zoomed corner: the frame
 * is laid out eight times the cell width and scaled back down, so the 640px
 * email shell renders at its desktop width before it is reduced.
 */
.kit-row__thumb iframe { width: 800%; height: 60rem; transform: scale(.125); }
.kit-row__name { display: grid; min-width: 0; gap: 2px; }
.kit-row__name strong { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }

.kit-row__name small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-row__used { display: flex; align-items: baseline; gap: var(--space-1); }
.kit-row__used b { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.kit-row__used span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.kit-row__when { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.kit-row__actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }

.kit-editor,
.kit-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.kit-review { grid-template-columns: minmax(0, 1fr) 21rem; }
.kit-editor__form { display: grid; min-width: 0; gap: var(--space-3); }
.kit-editor__preview,
.kit-review__side { position: sticky; top: var(--space-4); min-width: 0; }
.kit-review__side { display: grid; gap: var(--space-3); }

.kit-section,
.kit-panel,
.kit-preview-card {
    min-width: 0;
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
}

.kit-section__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.kit-section__head b { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.kit-section__head small { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.kit-section__n {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-action-contrast);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
}

.kit-section__body { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
.kit-section__save { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kit-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.kit-fields { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kit-fields__label { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }

.kit-chip {
    display: inline-flex;
    height: 1.75rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-soft);
    font: inherit;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.kit-chip:hover { border-style: solid; border-color: var(--color-primary-border); background: var(--color-primary-soft); color: var(--color-primary-active); }
.kit-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kit-preview-card__head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.kit-preview-card__head b { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.kit-preview-card__head small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
/*
 * The shared email-preview component keeps its markup and its JavaScript hooks;
 * only the arrangement changes here, so the size buttons sit opposite the
 * subject line instead of stacking above it.
 */
.kit-preview-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.kit-preview-card__body > [role="group"] { grid-column: 2; grid-row: 1; justify-self: end; }
.kit-preview-card__body .email-preview__subject { grid-column: 1; grid-row: 1; margin: 0; overflow: hidden; font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.kit-preview-card__body [data-email-preview-status] { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.kit-preview-card__body .email-preview__frame { grid-column: 1 / -1; height: 40rem; max-width: none; }
.kit-preview-card__body.email-preview--mobile .email-preview__frame { max-width: 23.4375rem; }

.kit-panel { padding: var(--space-4) var(--space-5) var(--space-5); }

.kit-panel__title {
    margin: 0 0 var(--space-3);
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.kit-used { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.kit-used:first-of-type { border-top: 0; }
.kit-used:hover .kit-used__text strong { text-decoration: underline; }

.kit-used__date {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-xs);
    background: var(--color-surface-muted);
    line-height: 1;
}

.kit-used__date b { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.kit-used__date i { color: var(--color-text-muted); font-size: 0.5rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.kit-used__text { display: grid; min-width: 0; flex: 1 1 auto; gap: 1px; }
.kit-used__text strong { overflow: hidden; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.kit-used__text small { color: var(--color-text-muted); font-size: var(--font-size-2xs); }

.kit-kv { display: grid; margin: 0; gap: var(--space-1); }
.kit-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.kit-kv dt { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.kit-kv dd { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: right; }

.kit-tokens { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.kit-token {
    display: inline-flex;
    padding: 2px var(--space-2);
    align-items: center;
    border-radius: var(--radius-xs);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

/* Connected stage controls reuse native theme toggles in creation and Settings. */
.attendee-flow { display: flex; flex-direction: column; gap: var(--space-5); }
.attendee-flow__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.attendee-flow__heading .event-flow__title { margin: 0; }
.attendee-flow__master { flex-shrink: 0; flex-direction: row-reverse; margin-left: auto; }
.attendee-flow__description { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.journey-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: var(--space-5); }
.journey-stages__item { position: relative; min-width: 0; }
.journey-stages__item:not(:last-child)::after { position: absolute; top: 1.375rem; left: calc(50% + 1.875rem); width: calc(100% - 3.75rem); height: 2px; background: var(--color-border-strong); content: ""; }
.journey-stages__item:has(input:checked):not(:last-child)::after { background: var(--color-primary); }
.journey-stages__toggle { display: flex; width: 100%; align-items: center; flex-direction: column; gap: var(--space-3); text-align: center; cursor: pointer; }
.journey-stages__toggle > span:last-child { display: flex; flex-direction: column; gap: var(--space-1); }
.journey-stages__toggle strong { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.journey-stages__toggle small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.journey-stages__toggle .form-toggle__track { width: 2.75rem; height: 2.75rem; }
.journey-stages__toggle .form-toggle__track::after { top: 0.75rem; left: 1.0625rem; width: 0.625rem; height: 1rem; border: solid var(--color-text-faint); border-width: 0 2px 2px 0; border-radius: 0; background: transparent; box-shadow: none; transform: rotate(45deg); opacity: 0; }
.journey-stages__toggle .form-toggle__control:checked + .form-toggle__track::after { transform: rotate(45deg); border-color: var(--color-primary-contrast); opacity: 1; }
.journey-stages__toggle:has(input:disabled) { cursor: default; opacity: 0.45; }
.attendee-flow__message { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-layer-faint); }
.attendee-flow__message .form-group { margin: 0; }
.attendee-flow__hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); }
.attendee-flow__hint .ui-icon { flex-shrink: 0; margin-top: 0.125rem; }
.attendee-flow__actions { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.attendee-flow__actions > .form-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-relaxed); text-align: center; margin: 0 0 var(--space-2); }
@media (max-width: 480px) {
    .attendee-flow__heading { flex-wrap: wrap; }
    .attendee-flow__master { margin-left: 0; }
    .journey-stages__toggle strong { font-size: var(--font-size-xs); }
    .journey-stages__toggle small { font-size: var(--font-size-2xs); padding-inline: var(--space-1); }
}

.event-flow__bar--three-steps { grid-template-columns: minmax(var(--space-12), 1fr) minmax(0, auto) minmax(var(--space-12), 1fr); }
.event-flow__bar--three-steps .event-flow__counter { min-width: 0; text-align: center; }