:root {
    --brand-name: "Vitoqa";

    /* Shared authenticated shell (.panel.wide): ONE width and ONE gutter for
       every organiser / admin page, so navigation, headings, action bars,
       cards, tables and forms line up identically everywhere. Contained and
       centred — never edge to edge. Phones use their own full-bleed rules
       (max-width: 47.99rem). Specialist full-viewport workspaces (Seating
       Studio) opt out through their own body class. */
    --app-shell-max: 80rem;
    --app-shell-gutter: clamp(0.75rem, 3vw, 2.5rem);

    --app-bg: var(--brand-ivory);
    --app-bg-deep: var(--brand-ivory-deep);
    --app-card: var(--brand-paper);
    --app-surface: #ffffff;
    --app-text: var(--brand-espresso);
    --app-muted: var(--brand-ink-soft);
    --app-line: var(--brand-stone);
    --app-line-strong: #d5cdbf;

    --app-accent: var(--brand-espresso);
    --app-accent-soft: var(--brand-champagne-soft);
    --app-accent-text: var(--brand-on-dark);
    --app-focus: var(--brand-focus);

    --app-ok: var(--brand-ok);
    --app-ok-soft: var(--brand-ok-soft);
    --app-warn: var(--brand-warn);
    --app-warn-soft: var(--brand-warn-soft);
    --app-bad: var(--brand-bad);
    --app-bad-soft: var(--brand-bad-soft);
    --app-banner: var(--brand-warn);
    --app-whatsapp: #1f6b4a;
    --app-whatsapp-soft: #e8f4ee;

    --app-radius-xs: var(--brand-radius-xs);
    --app-radius-sm: var(--brand-radius-sm);
    --app-radius: var(--brand-radius-md);
    --app-radius-lg: var(--brand-radius-lg);
    --app-radius-pill: var(--brand-radius-control);

    --app-space-1: var(--brand-space-1);
    --app-space-2: var(--brand-space-2);
    --app-space-3: var(--brand-space-3);
    --app-space-4: var(--brand-space-4);
    --app-space-5: var(--brand-space-5);
    --app-space-6: var(--brand-space-6);
    --app-space-7: var(--brand-space-7);

    --app-font: var(--brand-sans);
    --app-display: var(--brand-serif);
    --app-text-xs: 0.72rem;
    --app-text-sm: 0.84rem;
    --app-text-md: 1rem;
    --app-text-lg: 1.1rem;
    --app-leading: 1.5;
    --app-leading-tight: 1.18;

    --app-control-h: 2.65rem;
    --app-control-h-sm: 2.25rem;
    --app-shadow: var(--brand-shadow);
    --app-shadow-soft: var(--brand-shadow-soft);
    --app-shadow-dock: 0 -1px 0 var(--brand-line);
    --app-ease: var(--brand-ease);
    --app-dock-h: 3.55rem;

    --ok: var(--app-ok);
    --bad: var(--app-bad);
    --border: var(--app-line);
    --banner: var(--app-banner);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body.app-body {
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
    font-size: var(--app-text-md);
    line-height: var(--app-leading);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.app-body:not(.app-body--wide) {
    display: grid;
    place-items: center;
}

body.app-body--wide {
    display: block;
}

body.app-body--auth {
    background: var(--app-bg);
}

.panel {
    width: min(28rem, calc(100% - 1.5rem));
    margin: 1.5rem auto;
    padding: 1.85rem 1.5rem 2rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-soft);
}

.panel.wide {
    width: min(var(--app-shell-max), calc(100% - 2 * var(--app-shell-gutter)));
    margin: 1rem auto 2.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

h1 {
    margin: 0 0 0.3rem;
    font-family: var(--app-display);
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: var(--app-leading-tight);
}

h2 {
    margin: 0 0 0.65rem;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

h3 {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    font-weight: 650;
}

p {
    margin: 0.4rem 0;
}

a {
    color: var(--app-accent);
}

:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 3px;
}

.eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
    font-weight: 650;
}

.meta {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--app-space-4) var(--app-space-5);
    margin-bottom: var(--app-space-5);
}

.page-head .actions {
    margin-top: 0;
}

.app-shell {
    display: grid;
    gap: var(--app-space-5);
}

.app-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--app-space-3) var(--app-space-4);
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
}

.app-brand__mark {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.app-nav--desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-control-h-sm);
    padding: 0.3rem 0.75rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--app-ease), color var(--app-ease);
}

.app-nav__link:hover {
    background: var(--app-accent-soft);
    color: var(--app-text);
}

.app-nav__link.is-active {
    background: var(--app-accent);
    color: var(--app-accent-text);
}

.app-nav__link .ui-icon {
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.3rem;
    flex-shrink: 0;
    opacity: 0.72;
    transition: opacity var(--app-ease);
}

.app-nav__link:hover .ui-icon,
.app-nav__link.is-active .ui-icon {
    opacity: 1;
}

.app-topbar__aside {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-end;
    min-width: 0;
}

.ui-locale-wrap {
    flex: none;
}

/* Premium language selector (globe trigger + native-name popover).
   Progressive enhancement: works as a plain <details> without JS. */
.ui-locale {
    margin: 0;
    flex: none;
}

.ui-locale__wrap {
    position: relative;
}

.ui-locale__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.2rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-card);
    color: var(--app-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    user-select: none;
    transition: border-color var(--brand-ease, 160ms ease), background var(--brand-ease, 160ms ease);
}

.ui-locale__trigger::-webkit-details-marker {
    display: none;
}

.ui-locale__trigger:hover {
    border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
}

.ui-locale__trigger:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.ui-locale__globe {
    flex: none;
    color: var(--app-muted);
}

.ui-locale__current {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-locale__chevron {
    flex: none;
    color: var(--app-muted);
    transition: transform var(--brand-ease, 160ms ease);
}

.ui-locale__wrap[open] .ui-locale__chevron {
    transform: rotate(180deg);
}

.ui-locale__menu {
    position: absolute;
    z-index: 60;
    inset-inline-end: 0;
    top: calc(100% + 0.4rem);
    min-width: 15rem;
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    box-shadow: var(--brand-shadow, 0 10px 28px rgba(28, 25, 22, 0.12));
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ui-locale__option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--brand-ease, 160ms ease);
}

.ui-locale__option:hover,
.ui-locale__option:focus-visible {
    background: color-mix(in srgb, var(--app-accent) 10%, var(--app-card));
    outline: none;
}

/* Keyboard focus is visible, not only a hover tint (WCAG 2.4.7). */
.ui-locale__option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--app-focus);
}

.ui-locale__option.is-active {
    background: color-mix(in srgb, var(--app-accent) 14%, var(--app-card));
}

.ui-locale__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--app-radius-xs);
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-card));
    color: color-mix(in srgb, var(--app-accent) 85%, var(--app-text));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ui-locale__badge[data-font="cjk"],
.ui-locale__badge[data-font="arabic"],
.ui-locale__badge[data-font="hebrew"] {
    font-size: 0.95rem;
    font-weight: 600;
}

.ui-locale__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ui-locale__native {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

.ui-locale__english {
    font-size: 0.72rem;
    color: var(--app-muted);
    line-height: 1.1;
}

.ui-locale__check {
    flex: none;
    color: var(--app-accent);
}

.app-account .ui-locale,
.app-account .ui-locale__wrap,
.app-account .ui-locale__trigger {
    width: 100%;
}

.app-account .ui-locale {
    margin: 0 0 0.65rem;
}

.app-account .ui-locale__trigger {
    justify-content: space-between;
}

.app-account .ui-locale__menu {
    inset-inline: 0;
}

.auth-hero__locale {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.85rem;
}

/* Script-appropriate typography for the active UI locale. Applied by <html lang>,
   so it also styles content the guest never edits (chrome, labels). */
html:lang(ar),
html:lang(he) {
    font-family: var(--brand-sans-rtl, sans-serif);
}

html:lang(zh-Hans) {
    font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

.u-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.auth-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1rem 0 0.5rem;
}

.auth-form__check input[type="checkbox"] {
    margin-top: 0.18rem;
    flex: none;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.auth-form__check label {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--app-text);
    cursor: pointer;
}

.auth-form__check label a {
    color: var(--app-text);
    text-decoration: underline;
}

.auth-form__check label a:hover {
    opacity: 0.7;
}

.app-account {
    position: relative;
}

.app-account__summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--app-control-h-sm);
    padding: 0.2rem 0.55rem 0.2rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: background var(--app-ease), border-color var(--app-ease);
}

.app-account__summary::-webkit-details-marker {
    display: none;
}

.app-account__summary:hover,
.app-account[open] .app-account__summary {
    background: var(--app-card);
    border-color: var(--app-line);
}

.app-account__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--app-accent);
    color: var(--app-accent-text);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
}

.app-account__avatar--photo {
    background: var(--app-line);
}

.app-account__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.app-account__avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.85rem;
}

.app-account__identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.5rem 0.5rem 0.4rem;
    margin: -0.1rem -0.1rem 0.6rem;
    border-radius: var(--app-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--app-ease);
}

.app-account__identity:hover,
.app-account__identity:focus-visible {
    background: var(--app-bg);
}

.app-account__identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.app-account__identity-name {
    font-weight: 600;
    color: var(--app-text);
    font-size: var(--app-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-account__identity-link {
    font-size: var(--app-text-xs);
    color: var(--brand-bronze);
    font-weight: 600;
}

.app-account__identity-chevron {
    margin-inline-start: auto;
    color: var(--app-muted);
    flex-shrink: 0;
}

body.app-body--rtl .app-account__identity-chevron {
    transform: scaleX(-1);
}

.app-account__name {
    max-width: 9rem;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-plan-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    margin-block-start: 0.5rem;
    margin-inline-start: -0.5rem;
    border-radius: var(--app-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--app-ease);
}

.app-plan-status:hover,
.app-plan-status:focus-visible {
    background: var(--app-bg);
}

/* Inside the personal account panel this line sits flush with the
   identity block above/below it instead of floating with its own margin —
   see AppShell::organisationPlanStatusHtml() for why this line otherwise
   lives on the organisation dashboard, not here, but the rule is kept for
   any future compact-menu reuse. */
.app-account__panel .app-plan-status {
    display: flex;
    padding: 0.45rem 0.5rem;
    margin: 0 -0.1rem 0.6rem;
}

.app-plan-status__dot {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.app-plan-status__dot--green {
    background: var(--app-ok);
}

.app-plan-status__dot--amber {
    background: var(--app-warn);
}

.app-plan-status__dot--red {
    background: var(--app-bad);
}

.app-plan-status__text {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    font-size: var(--app-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-plan-status__plan {
    font-weight: 600;
    color: var(--app-text);
}

.app-plan-status__sep {
    color: var(--app-muted);
}

.app-plan-status__action {
    color: var(--app-muted);
}

.app-account__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 20;
    min-width: 14rem;
    padding: 0.75rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow);
}

.app-account__meta {
    margin: 0 0 0.65rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.app-brand {
    display: flex;
    flex-direction: column;
    align-items: start;
    min-width: 0;
}

.app-brand__sub {
    margin: 0.1rem 0 0;
    color: var(--app-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

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

.app-dock {
    display: none;
}

.ui-icon {
    display: block;
    flex: none;
}

.support-pill {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    justify-content: center;
    margin: 0 0 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--app-radius-sm);
    font-size: 0.84rem;
    font-weight: 650;
    color: var(--app-warn);
    background: var(--app-warn-soft);
    border: 1px solid color-mix(in srgb, var(--app-warn) 18%, transparent);
    text-align: center;
}

.support-pill__label {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.support-pill__org {
    font-weight: 700;
    color: var(--app-text);
}

.auth-hero {
    margin-bottom: 1.25rem;
    text-align: center;
}

.auth-hero .app-brand__mark,
.auth-hero .product-wordmark,
.auth-hero .brand-lockup {
    margin-bottom: 0.85rem;
}

.auth-hero h1 {
    margin-bottom: 0.25rem;
}

.auth-hero__sub {
    margin: 0;
    color: var(--app-muted);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.stat {
    padding: 1rem 1.05rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.stat__value {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.1;
}

.stat__label {
    margin: 0.35rem 0 0;
    color: var(--app-muted);
    font-size: 0.84rem;
}

.entity-list,
.record-list {
    display: grid;
    gap: 0.75rem;
}

.entity-card,
.record-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.05rem 1.05rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
    transition: border-color 0.15s ease;
    min-width: 0;
}

.entity-card:hover,
.record-card:hover {
    border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-line));
}

.entity-card__title,
.record-card__title {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.12rem;
    font-weight: 550;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.entity-card__meta,
.record-card__facts,
.record-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin: 0.35rem 0 0;
    color: var(--app-muted);
    font-size: 0.88rem;
    align-items: center;
}

.record-card__contact {
    margin: 0.3rem 0 0;
    color: var(--app-muted);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

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

.record-card__aside {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.entity-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.entity-card__actions,
.record-card__actions {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    min-width: 0;
}

.entity-card__actions form,
.record-card__actions form,
.record-card__actions .inline-form {
    margin: 0;
    min-width: 0;
}

.entity-card__actions .button,
.entity-card__actions .button-primary,
.entity-card__actions .button-quiet,
.record-card__actions .button,
.record-card__actions .button-primary,
.record-card__actions .button-quiet,
.record-card__actions button {
    width: 100%;
    min-height: 2.65rem;
    height: auto;
    flex: none;
    border-radius: 0.85rem;
    white-space: normal;
    text-wrap: balance;
    justify-content: center;
}

@media (min-width: 48rem) {
    .entity-card,
    .record-card {
        grid-template-columns: minmax(0, 1fr) minmax(10.25rem, 13.25rem);
        align-items: start;
    }

    .guest-card__top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.35rem 0.65rem;
    }

    .guest-card__badges {
        justify-content: flex-end;
    }

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

    .record-card__actions--inline {
        display: flex;
        width: auto;
    }

    .record-card__actions--inline .button,
    .record-card__actions--inline button {
        width: auto;
    }
}

.guest-list {
    display: grid;
    gap: 0.75rem;
}

.guest-card {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    overflow: hidden;
    max-width: 100%;
}

.guest-card .guest-invite-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.guest-card__top {
    display: grid;
    gap: 0.35rem;
    align-items: start;
}

.guest-card__identity {
    min-width: 0;
}

.guest-card__name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.guest-card__contact {
    margin: 0.15rem 0 0;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
}

.guest-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-start;
    max-width: 100%;
}

.guest-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin: 0;
    color: var(--app-muted);
    font-size: 0.78rem;
}

.guest-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.65rem;
}

.desktop-only {
    display: none;
}

.mobile-only {
    display: block;
}

@media (min-width: 64rem) {
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

.upload-zone {
    display: grid;
    gap: 0.65rem;
    padding: 1.35rem 1.15rem;
    border: 1.5px dashed var(--app-line-strong);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-card) 70%, var(--app-bg));
    text-align: center;
}

.upload-zone input[type="file"] {
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    min-height: 2.5rem;
}

.stack {
    display: grid;
    gap: 1rem;
}

.form-grid {
    display: grid;
    gap: 0 1rem;
}

@media (min-width: 48rem) {
    .form-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.button-compact {
    min-height: 2.5rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.86rem;
}

.button-danger {
    color: var(--app-bad);
    border-color: color-mix(in srgb, var(--app-bad) 28%, var(--app-line));
    background: var(--app-bad-soft);
}

.priority-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.35rem 0 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 63.99rem) {
    .app-topbar {
        grid-template-columns: 1fr auto;
        padding: 0.75rem 0.85rem;
    }

    /* Identity and account share the first row (account on the right);
       the navigation scrolls on its own row beneath them. */
    .app-topbar > .app-brand { grid-column: 1; grid-row: 1; }
    .app-topbar > .app-topbar__aside { grid-column: 2; grid-row: 1; justify-self: end; }

    .app-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }

    .app-nav::-webkit-scrollbar {
        display: none;
    }

    .app-nav__link {
        flex: none;
    }

    .app-user {
        display: none;
    }
}

label,
.label {
    display: block;
    margin: 0.95rem 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 650;
}

.help {
    margin: 0.35rem 0 0;
    color: var(--app-muted);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
}

/* Quiet inline advisory — the field is usable, but the host should know
   something about it needs attention. Uses logical properties for RTL. */
.help--warn {
    color: var(--app-warn);
    background: var(--app-warn-soft);
    border-inline-start: 2px solid var(--app-warn);
    border-radius: var(--app-radius-sm);
    padding: 0.5rem 0.65rem;
    margin-top: 0.45rem;
}

/* Secondary status legend. One wrapping row instead of three stacked lines: the
   same information in roughly a third of the vertical space, sitting quietly under
   the filters rather than competing with them. Wraps to one item per line on
   narrow screens without any breakpoint of its own. */
.dup-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1rem;
    margin: 0.7rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--app-line, rgba(0, 0, 0, 0.07));
    font-size: 0.82rem;
    line-height: 1.4;
}

.dup-legend__row {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
}

.dup-legend__row .badge {
    flex-shrink: 0;
}

/* `.filter-expand` used to be a <details> disclosure that collapsed the compact
   controls behind a "Filters" toggle on mobile. It is now a plain div, always
   showing its contents: current Chrome gives <details> an internal content box
   for non-summary children that ignores an author `display` override (contents,
   flex, or otherwise), which is what forced Show/Group/Labels/Apply into a
   narrow stacked column instead of flattening into the toolbar row. */
.filter-expand {
    display: contents;
}

.filter-expand__body {
    display: contents;
}

@media (max-width: 47.99rem) {
    .filter-expand {
        display: block;
        margin-top: 0.25rem;
    }

    .filter-expand__body {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.55rem;
    }

    .guest-list {
        padding-bottom: calc(var(--app-dock-h) + env(safe-area-inset-bottom) + 0.75rem);
    }
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="file"],
select,
textarea {
    width: 100%;
    min-height: var(--app-control-h);
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: inherit;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--app-line-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-focus) 70%, var(--app-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-focus) 22%, transparent);
}

textarea {
    resize: vertical;
    min-height: 6rem;
}

input[type="file"] {
    padding: 0.45rem;
}

.card {
    margin: 0 0 1rem;
    padding: 1.2rem 1.15rem 1.35rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.card-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .card-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

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

.check,
.switch {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-weight: 600;
    margin-top: 1rem;
}

.check input,
.switch input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex: none;
}

.ok,
.notice--ok {
    color: var(--app-ok);
    font-weight: 650;
}

.flash {
    color: var(--app-bad);
    font-weight: 650;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    list-style: none;
    background: var(--app-bad-soft);
    border-radius: var(--app-radius-sm);
}

.notice {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.8rem;
}

.notice--ok {
    background: #eef6ef;
}

.notice--success {
    background: var(--app-ok-soft, #eef6ef);
    border: 1px solid color-mix(in srgb, var(--app-ok, #3a7d44) 20%, transparent);
    color: var(--app-ok, #2d6a36);
}

/* ── Draft event notice + Publish (EventPublishNotice) ────────────────── */
.notice--draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--app-line, #e6dfd4);
    border-inline-start: 4px solid #b98a3c;
    border-radius: 12px;
    background: #fbf6ec;
    color: var(--app-text, #2c2621);
}
.notice--archived {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--app-line, #e6dfd4);
    border-inline-start: 4px solid #8a7f76;
    border-radius: 12px;
    background: #f6f3ee;
    color: var(--app-text, #2c2621);
}
.notice--archived__text { flex: 1 1 22rem; min-width: 0; }
.notice--archived__text p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.notice--archived__title { font-weight: 600; margin-bottom: 0.15rem !important; }
@media (max-width: 600px) {
    .notice--archived { padding: 0.85rem 0.95rem; }
    .notice--archived .button { width: 100%; }
}
.notice--draft__text { flex: 1 1 22rem; min-width: 0; }
.notice--draft__text p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.notice--draft__title { font-weight: 600; margin-bottom: 0.15rem !important; }
.notice--draft__form { margin: 0; flex: 0 0 auto; }
@media (max-width: 600px) {
    .notice--draft { padding: 0.85rem 0.95rem; }
    .notice--draft__form { width: 100%; }
    .notice--draft__form .button { width: 100%; }
}


.notice--error {
    background: var(--app-bad-soft, #fce8e8);
    border: 1px solid color-mix(in srgb, var(--app-bad, #c0392b) 20%, transparent);
    color: var(--app-bad, #b03a2e);
}

.notice--warn {
    background: #fbf6ec;
    border: 1px solid var(--app-line, #e6dfd4);
    border-inline-start: 4px solid #b98a3c;
    color: var(--app-text, #2c2621);
}
.notice--warn p { margin: 0 0 0.35rem; }
.notice--warn p:last-child { margin-bottom: 0; }

.notice--info {
    background: var(--app-surface-alt, #f5f5f0);
    border: 1px solid var(--app-line);
    color: var(--app-text);
}

.notice--compact {
    margin: 0.4rem 0 0.6rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.88rem;
    border-radius: var(--app-radius-sm);
}

.banner {
    margin: 0 0 1rem;
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--app-banner);
    background: var(--app-warn-soft);
    border-radius: var(--app-radius-pill);
    text-align: center;
}

.muted {
    color: var(--app-muted);
}

.page-foot {
    margin-top: 2rem;
    font-size: 0.78rem;
    text-align: center;
    color: var(--app-muted);
}

.page-foot a {
    color: inherit;
    text-decoration: none;
}

.page-foot a:hover {
    text-decoration: underline;
}

.table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    background: var(--app-card);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: start;
    padding: 0.8rem 0.85rem;
    border-bottom: 1px solid var(--app-line);
    vertical-align: top;
}

tr:last-child td {
    border-bottom: 0;
}

th {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-muted);
    font-weight: 650;
    background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card));
}

th.is-sortable {
    white-space: nowrap;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    letter-spacing: inherit;
    text-transform: inherit;
    font: inherit;
    font-weight: inherit;
}

.sort-link:hover,
.sort-link:focus-visible {
    color: var(--app-text);
}

.sort-indicator {
    font-size: 0.68rem;
    line-height: 1;
    color: var(--app-accent);
    transform: none;
}

th.is-sorted .sort-link {
    color: var(--app-text);
}

/*
 * Sort-header bar for lists presented as rows/cards rather than a literal
 * <table> (the Platform Owner Customer Directory) — same th.is-sortable /
 * .sort-link / .sort-indicator / th.is-sorted visual language above, applied
 * to a role="columnheader" bar instead of real <th> cells, since .sort-link's
 * own color:inherit only picks up th's muted/uppercase treatment when the
 * ancestor actually carries it.
 */
.admin-sort-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.5rem;
    padding: 0.1rem 0.25rem 0.85rem;
}

.admin-sort-bar__col {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-muted);
    font-weight: 650;
    white-space: nowrap;
}

.admin-sort-bar__col.is-sorted .sort-link {
    color: var(--app-text);
}

td.guest-phone {
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    direction: ltr;
    text-align: start;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-control-h);
    margin-top: 0;
    padding: 0.45rem 1.05rem;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    color: var(--app-text);
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

button:active,
.button:active {
    transform: translateY(1px);
}

[hidden] {
    display: none !important;
}

button[type="submit"],
.button-primary {
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-color: transparent;
}

button.button-quiet,
.button-quiet {
    background: var(--app-card);
    color: var(--app-text);
    border-color: var(--app-line);
}

.guest-send-version {
    margin: 0 0 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--app-line);
}

.guest-send-version__field {
    margin: 0;
}

.guest-send-version__select {
    width: 100%;
}

.guest-send-version__hint {
    margin: 0.35rem 0 0;
    font-size: 0.85em;
}

.guest-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin: 0.35rem 0;
}

@media (min-width: 64rem) {
    .guest-invite-actions {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /* Premium trailing action rail: the row's WhatsApp trigger and "···" menu
       are pinned to the scrollable table's trailing edge so they stay
       reachable no matter how wide the rest of the row gets (long names,
       Group & Labels chips, an Invitation Version chip) — previously this
       cell was a normal trailing column, so on any row whose combined
       content pushed the table wider than .table-wrap's visible area, the
       actions silently scrolled out of view (worse for rows using the
       wa-split alternate-contact chooser, which is wider than a plain
       WhatsApp icon). inset-inline-end (mirrored below for RTL box-shadow,
       which has no logical equivalent) keeps this correct without a
       hard-coded LTR assumption. */
    .guest-actions-cell,
    .guest-actions-th {
        position: sticky;
        inset-inline-end: 0;
        border-inline-start: 1px solid var(--app-line);
        box-shadow: -10px 0 12px -10px rgba(28, 25, 22, 0.1);
    }

    .guest-actions-cell {
        z-index: 2;
        background: var(--app-card);
    }

    .guest-actions-th {
        z-index: 3;
        background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card));
    }

    [dir="rtl"] .guest-actions-cell,
    [dir="rtl"] .guest-actions-th {
        box-shadow: 10px 0 12px -10px rgba(28, 25, 22, 0.1);
    }
}

/* ── Guests table: premium synced top scrollbar ─────────────────────────────
   Scoped to #guests-table-wrap only — .table-wrap itself (shared by Events,
   Groups, WhatsApp Cloud) is untouched. The real scrolling element moves one
   level down into .guest-table-scrollbody so .guest-actions-cell/-th's
   position:sticky keys off it exactly as it did off .table-wrap before;
   .guest-table-topscroll is a second, thin, independently-scrollable strip
   that JS keeps mirrored to it (see the inline script in guests/index.php).
   Hidden by default and only revealed when JS detects real overflow, so a
   guest list that fits on screen shows no dead strip above the header. */
.guest-table-topscroll {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    border-bottom: 1px solid var(--app-line);
}

.guest-table-topscroll[hidden] {
    display: none;
}

.guest-table-topscroll__track {
    height: 1px;
}

.guest-table-scrollbody {
    overflow-x: auto;
}

.guest-table-scrollbody:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

/* ── Guests pagination ───────────────────────────────────────────────────── */
.guest-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.guest-pagination__summary {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.85rem;
}

.guest-pagination .guest-pagination__controls {
    margin: 0;
}

/* .pagination (Inbox's own class, reused here) sets an unconditional
   `display: flex`, declared later in this file than the generic
   .desktop-only/.mobile-only toggle above — so at equal specificity it would
   otherwise win the cascade and show both the desktop and mobile pagination
   controls at once, regardless of viewport. These explicit, higher-
   specificity overrides make the toggle authoritative for this element. */
.guest-pagination__controls.mobile-only,
.guest-pagination__summary.mobile-only {
    display: none;
}

@media (max-width: 63.99rem) {
    .guest-pagination__controls.mobile-only {
        display: flex;
    }

    .guest-pagination__summary.mobile-only {
        display: block;
    }

    .guest-pagination__controls.desktop-only,
    .guest-pagination__summary.desktop-only {
        display: none;
    }
}

.guest-pagination__nav {
    gap: 0.3rem;
    padding-inline: 0.7rem;
}

.page-link__chevron-icon {
    width: 12px;
    height: 12px;
}

[dir="rtl"] .page-link__chevron-icon {
    transform: scaleX(-1);
}

.page-link-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 2.1rem;
    color: var(--app-muted);
}

.guest-pagination__page-of {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text);
}

@media (max-width: 47.99rem) {
    .guest-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .guest-pagination__controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
}

.guest-per-page-field select {
    min-width: 5rem;
}

.guest-whatsapp-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.inline-form {
    display: inline;
    margin: 0;
}

.overflow-menu {
    position: relative;
    display: inline-flex;
}

/* Every overflow-menu trigger is styled by Vitoqa; never the browser's marker. */
.overflow-menu > summary {
    list-style: none;
}

.overflow-menu > summary::-webkit-details-marker {
    display: none;
}

.overflow-menu:not([open]) > .overflow-menu__panel {
    display: none !important;
}

.overflow-menu__button {
    list-style: none;
    cursor: pointer;
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--app-muted);
}

.overflow-menu__button::-webkit-details-marker {
    display: none;
}

.overflow-menu__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    inset-inline-end: 0;
    z-index: 5;
    min-width: 10.5rem;
    max-width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.4rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-soft);
}

.overflow-menu__panel a,
.overflow-menu__panel button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.5rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    text-align: start;
    text-decoration: none;
    color: var(--app-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.overflow-menu__panel a:hover,
.overflow-menu__panel button:hover {
    background: var(--app-accent-soft);
}

.overflow-menu__panel a.is-danger {
    color: var(--app-bad);
}

.overflow-menu__panel a.is-danger:hover {
    background: var(--app-bad-soft);
}

.overflow-menu__panel .ui-icon {
    flex: 0 0 18px;
}

.overflow-menu__panel > :not(.is-danger) + a.is-danger {
    position: relative;
    margin-top: 0.4rem;
}

.overflow-menu__panel > :not(.is-danger) + a.is-danger::before {
    content: "";
    position: absolute;
    inset-inline: 0.7rem;
    top: -0.25rem;
    border-top: 1px solid var(--app-line);
}

.import-include {
    margin-top: 0;
    font-weight: 600;
    align-items: center;
}

/* Guest Import review — top action toolbar (Phase 1D UX polish). Include
   all / Confirm / Cancel / Clear all in one compact bar near the top of
   the review list, so hundreds of rows never need scrolling to reach the
   primary actions. The SAME buttons (name="import_action") also appear at
   the bottom of the form unchanged — both submit the one review form. */
/* Import review: each concern in its own calm block (never one merged
   paragraph) — blockers, invitation language, possible duplicate. State is
   always in words; colour only reinforces it. */
.import-issue {
    display: grid;
    gap: 0.3rem;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--app-line);
    border-inline-start-width: 3px;
    border-radius: var(--app-radius-sm);
    background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card));
    min-width: 0;
}
.import-issue--block { border-inline-start-color: var(--app-bad); background: var(--app-bad-soft); }
.import-issue--language { border-inline-start-color: var(--app-warn); }
.import-issue--duplicate { border-inline-start-color: color-mix(in srgb, var(--app-warn) 55%, var(--app-line)); }
.import-issue__title { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-muted); }
.import-issue__text { margin: 0; font-size: var(--app-text-sm); overflow-wrap: anywhere; }
.import-issue__mark {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--app-warn-soft);
    color: var(--app-warn);
    font-size: 0.7rem;
    font-weight: 800;
    vertical-align: 0.05em;
}
.import-issue__list { margin: 0; padding-inline-start: 1.1rem; font-size: var(--app-text-sm); overflow-wrap: anywhere; }
.import-issue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.15rem; }
.import-issue__select { margin: 0; width: auto; min-width: 11rem; max-width: 100%; min-height: 2.5rem; }
.import-issue__link { font-size: var(--app-text-sm); font-weight: 600; }
/* Save in the Studio first, then one deliberate refresh here. */
.import-issue__refresh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.3rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--app-line);
}
.import-issue__hint { margin: 0; flex: 1 1 16rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.import-lang-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-warn-soft);
}
.import-lang-note p { margin: 0; flex: 1 1 18rem; font-size: var(--app-text-sm); }
@media (max-width: 47.99rem) {
    .import-issue__select { flex: 1 1 100%; min-height: 2.75rem; }
    .import-lang-note .button-quiet { flex: 1 1 100%; min-height: 2.75rem; }
    .import-issue__refresh .button-quiet { flex: 1 1 100%; min-height: 2.75rem; }
}

.import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin: 0.85rem 0 0.65rem;
    padding: 0.45rem 0.75rem;
    background: color-mix(in srgb, var(--app-card) 88%, var(--app-accent-soft));
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius-sm);
}

.import-toolbar__all {
    margin-top: 0;
    gap: 0.5rem;
    font-weight: 650;
}

.import-toolbar__all input {
    margin-top: 0;
}

.import-toolbar__confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.import-toolbar__clear {
    margin-inline-start: auto;
}

@media (max-width: 600px) {
    .import-toolbar__clear {
        margin-inline-start: 0;
        flex-basis: 100%;
    }
}

/* Guest Import review — compact commercial guest-capacity indicator
   (Phase 1D UX polish). A proactive explanation of the SAME
   guests_per_event_max the server independently re-enforces at Confirm
   Import — never the sole authority (see CsvGuestImporter::
   importValidRows()). Deliberately small and calm: a labelled state, not
   an alert box, so it never reads as a system error. */
.import-capacity {
    margin: 0.85rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--app-line);
    border-inline-start: 4px solid var(--app-muted);
    border-radius: var(--app-radius-sm);
    background: var(--app-card);
}

.import-capacity--ok {
    border-inline-start-color: var(--app-ok);
}

.import-capacity--warn {
    border-inline-start-color: var(--app-warn);
    background: color-mix(in srgb, var(--app-warn-soft) 55%, var(--app-card));
}

.import-capacity--over {
    border-inline-start-color: var(--app-bad);
    background: color-mix(in srgb, var(--app-bad-soft) 55%, var(--app-card));
}

.import-capacity__label {
    margin: 0 0 0.15rem;
    font-size: var(--app-text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--app-muted);
}

.import-capacity--unlimited .import-capacity__label {
    margin-bottom: 0;
}

.import-capacity__stats {
    margin: 0.1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: baseline;
    font-size: var(--app-text-sm);
}

.import-capacity__sep {
    color: var(--app-muted);
}

.import-capacity__over {
    font-weight: 650;
    color: var(--app-bad);
}

.import-capacity .stat-meter {
    margin-top: 0.5rem;
}

.import-capacity__message {
    margin: 0.5rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-bad);
    font-weight: 600;
}

button.button-whatsapp,
.button-whatsapp {
    min-height: 2.35rem;
    padding: 0.28rem 0.85rem;
    font-size: 0.86rem;
    color: var(--app-whatsapp);
    background: var(--app-whatsapp-soft);
    border-color: color-mix(in srgb, var(--app-whatsapp) 18%, transparent);
    font-weight: 700;
}

/* WA split button */
.wa-split {
    display: inline-flex;
    align-items: stretch;
}

.wa-split form {
    display: contents;
}

.wa-split .wa-split__main {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 1px solid color-mix(in srgb, var(--app-whatsapp) 28%, transparent);
}

.wa-split__toggle {
    min-height: 2.35rem;
    padding: 0.28rem 0.52rem;
    font-size: 0.86rem;
    color: var(--app-whatsapp);
    background: var(--app-whatsapp-soft);
    border: 1px solid color-mix(in srgb, var(--app-whatsapp) 18%, transparent);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.wa-split__toggle:hover {
    background: color-mix(in srgb, var(--app-whatsapp) 14%, transparent);
}

.wa-split__toggle:focus-visible {
    outline: 2px solid var(--app-whatsapp);
    outline-offset: 2px;
}

[dir="rtl"] .wa-split .wa-split__main {
    border-start-end-radius: var(--app-radius-sm);
    border-end-end-radius: var(--app-radius-sm);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-end: none;
    border-inline-start: 1px solid color-mix(in srgb, var(--app-whatsapp) 28%, transparent);
}

[dir="rtl"] .wa-split__toggle {
    border-start-start-radius: var(--app-radius-sm);
    border-end-start-radius: var(--app-radius-sm);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* Compact icon-only WhatsApp trigger — Guest List row actions only (Task 010I
   follow-up premium cleanup). Accessible name comes from aria-label/title on
   the button itself; Guest Edit never uses this class, keeping its full-text
   button unchanged. */
button.button-whatsapp--icon,
.button-whatsapp--icon {
    width: 2.35rem;
    padding: 0.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon + label buttons in a page-head actions bar (e.g. the promoted
   "Invitation" action) — the bar's other buttons are plain text, so this
   stays opt-in via its own class rather than a blanket .button rule. */
.button-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* WA recipient options inside choice sheet */
.wa-recipient-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 0.12rem;
    line-height: 1.3;
    white-space: normal;
}

.wa-recipient-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.wa-recipient-meta {
    font-size: 0.77rem;
    opacity: 0.65;
}

.wa-recipient-option--unavailable {
    opacity: 0.45;
    cursor: default;
}

/* ── Alternate delivery section (WhatsApp Design page) ──── */
.wa-alt-delivery {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 55%, transparent);
}

.wa-alt-top {
    margin-bottom: 0.6rem;
}

.wa-alt-section-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin-bottom: 0.15rem;
}

.wa-alt-section-help {
    display: block;
    font-size: 0.77rem;
    color: var(--app-muted);
    opacity: 0.75;
    line-height: 1.4;
}

.wa-alt-sample-row {
    font-size: 0.77rem;
    color: var(--app-muted);
    margin: 0 0 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    align-items: baseline;
}

.wa-alt-sample-key {
    font-weight: 600;
}

.wa-alt-sample-sep {
    opacity: 0.45;
}

.wa-alt-note-preview {
    font-family: inherit;
    font-size: 0.82rem;
    white-space: pre-wrap;
    margin: 0 0 0.4rem;
    padding: 0.5rem 0.65rem;
    background: color-mix(in srgb, var(--app-card) 55%, var(--app-bg));
    border: 1px solid color-mix(in srgb, var(--app-line) 55%, transparent);
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    line-height: 1.45;
}

.wa-alt-note-actions {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}

.wa-alt-edit-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.wa-alt-token-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wa-alt-off-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--app-muted);
    cursor: pointer;
}

.wa-alt-off-wrap input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--app-accent);
}

.actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}

.actions form {
    margin: 0;
}

.filters {
    display: grid;
    gap: 0.75rem 1rem;
    margin: 0;
}

.filter-field label {
    margin-top: 0;
}

/* ---- Guest controls surface ----
   One quiet panel holding the filter toolbar, active filters and the status
   legend, so they read as a single control area. Deliberately light: a hairline
   and a tint, no heavy card, so the guest table stays the focus. */
.guest-controls {
    margin: 1rem 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--app-line, rgba(0, 0, 0, 0.08));
    border-radius: var(--app-radius-md, 0.85rem);
    background: var(--app-surface-2, rgba(0, 0, 0, 0.015));
}

.filter-field__label {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-muted);
}

@media (min-width: 48rem) {
    /* One intentional toolbar row: Search is capped so it can't dominate, and the
       compact controls (Show / Group / Labels / Apply) wrap onto their own row as
       a single unit on medium widths rather than each control wrapping alone. */
    .filters {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.6rem;
    }

    .filter-field {
        flex: 0 1 auto;
        min-width: 0;
    }

    .filter-field--search {
        flex: 1 1 20rem;
        min-width: 14rem;
        max-width: 26rem;
    }

    /* `.filter-expand__body` used to rely on `display: contents` here so its
       children (Show / Group / Labels / Apply) flattened straight into `.filters`
       as ordinary flex items. Nesting that inside an open <details> no longer
       flattens reliably: current Chrome gives <details> an internal content box
       for its non-summary children that a `display: contents` div does not
       override, so each child was instead forced onto a line of its own — a tall,
       narrow stack pinned to the right edge, with Search left to fill the entire
       row above it. Giving the body a real flex box makes it one ordinary flex
       item that wraps as a unit next to (or below) Search. */
    .filter-expand__body {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.55rem 0.6rem;
        /* An explicit basis, not `auto`: a wrapping flex container sized by content
           tends to shrink-to-fit at far less than the sum of its children (Chrome
           resolves its intrinsic width from the narrowest line it can wrap into),
           which re-triggered an internal 2-line stack inside the cluster itself. */
        flex: 0 1 40rem;
    }

    .filter-field--show,
    .filter-field--group {
        flex: 0 1 10.5rem;
        min-width: 8rem;
    }

    .filter-field--labels {
        flex: 0 1 12rem;
        min-width: 9rem;
    }

    .filter-field--checkbox {
        flex: 0 0 auto;
    }

    .filter-field--checkbox label {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        height: 2.3rem;
        font-weight: 500;
        white-space: nowrap;
    }

    /* "Invitation opened" / translated equivalents ("Invitación abierta",
       "Einladung geöffnet", "Приглашение открыто", ...) run noticeably longer
       than "Show"/"Group"'s own translated labels (all single short words) —
       given its own, slightly wider basis so the label sits on one line
       instead of wrapping inside the narrower shared width. */
    .filter-field--opened {
        flex: 0 1 13rem;
        min-width: 10rem;
    }

    /* "Delivery status": wider than the old "Send status" footprint — its
       dynamic options can now include a channel + state ("WhatsApp ·
       Delivered"), longer than the old fixed "Sent"/"Group link"/
       "Not marked" set in every locale. */
    .filter-field--delivery-status {
        flex: 0 1 13rem;
        min-width: 10rem;
    }

    .filter-submit,
    .filter-clear {
        flex: 0 0 auto;
        min-height: var(--app-control-h);
    }
}

/* "Clear filters": a quiet secondary control beside Apply, rendered only
   while a filter is active. Same height as Apply, no primary styling. */
.filter-clear {
    font-weight: 600;
    color: var(--app-muted);
    white-space: nowrap;
}

.filter-clear:hover,
.filter-clear:focus-visible {
    color: var(--app-text);
    border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-line));
}

/* "Sort by" is visible at every width: column headers are shortcuts, but
   only the selector reaches every sort (e.g. the response-time sorts, which
   have no column of their own). */

button.linkish {
    margin: 0;
    min-height: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    border: 0;
    color: var(--app-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.org-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.org-list li {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--app-line);
    border-radius: 0.9rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.55rem;
    padding: 0.12rem 0.55rem;
    border-radius: var(--app-radius-sm);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    background: var(--app-accent-soft);
    color: var(--app-text);
}

.badge--ok {
    background: var(--app-ok-soft);
    color: var(--app-ok);
}

.badge--warn {
    background: var(--app-warn-soft);
    color: var(--app-warn);
}

.badge--muted {
    background: color-mix(in srgb, var(--app-line) 45%, var(--app-card));
    color: var(--app-muted);
}

.badge--bad {
    background: var(--app-bad-soft);
    color: var(--app-bad);
}

/* Aliases for callers using the --success/--danger naming (WhatsApp Cloud
   campaign status, template approval state, customer capability status) —
   same tokens as --ok/--bad so all badge callers share one colour system. */
.badge--success {
    background: var(--app-ok-soft);
    color: var(--app-ok);
}

.badge--danger {
    background: var(--app-bad-soft);
    color: var(--app-bad);
}

.empty-state {
    margin: 1.25rem 0;
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--app-card);
    border: 1px dashed color-mix(in srgb, var(--app-line-strong) 70%, transparent);
    border-radius: var(--app-radius-lg);
}

.empty-state h2 {
    font-family: var(--app-display);
    font-size: 1.35rem;
    font-weight: 500;
}

.empty-state .actions {
    justify-content: center;
}

.empty-state .help {
    max-width: 28ch;
    margin-inline: auto;
}

.gs-panel {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.15rem 0.75rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.gs-panel__header {
    font-size: var(--app-text-sm);
    font-weight: 650;
    color: var(--app-muted);
    letter-spacing: 0.03em;
    margin-bottom: 0.6rem;
}

.gs-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gs-panel__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 50%, transparent);
}

.gs-panel__item:first-child {
    border-top: none;
}

.gs-panel__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent);
}

.gs-panel__item--done .gs-panel__icon {
    color: var(--app-muted);
}

.gs-panel__item--neutral .gs-panel__icon {
    color: var(--app-muted);
}

.gs-panel__label {
    color: var(--app-text);
    text-decoration: none;
}

.gs-panel__label:hover {
    text-decoration: underline;
}

.gs-panel__item--done .gs-panel__label,
.gs-panel__item--neutral .gs-panel__label {
    color: var(--app-muted);
}

.gs-panel--compact {
    padding: 0.55rem 1.15rem;
    box-shadow: none;
    border-color: color-mix(in srgb, var(--app-line) 60%, transparent);
}

.gs-panel--compact .gs-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.gs-panel--compact .gs-panel__item {
    border-top: none;
    padding: 0.2rem 0;
    font-size: var(--app-text-sm);
}

.invite-config {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    max-width: 100%;
}

.invite-config__main,
.invite-config__preview {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 64rem) {
    .invite-config {
        grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
        align-items: start;
    }

    .invite-config__preview {
        position: sticky;
        top: 1rem;
    }
}

.preview-jump {
    display: inline-flex;
    position: sticky;
    top: 0.5rem;
    z-index: 4;
    margin: 0 0 0.85rem;
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-color: transparent;
    text-decoration: none;
}

@media (min-width: 64rem) {
    .preview-jump {
        display: none;
    }
}

.theme-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.55rem;
    margin: 0.75rem 0 1rem;
}

.theme-preset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-height: 4.2rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.85rem;
    text-align: start;
    font-weight: 600;
}

.theme-preset[aria-pressed="true"] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px rgba(122, 78, 58, 0.18);
}

.theme-preset__dots {
    display: flex;
    gap: 0.28rem;
}

.theme-preset__dots span {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid rgba(44, 36, 31, 0.12);
}

.theme-preset__name {
    font-size: 0.86rem;
}

.colour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.85rem;
}

.colour-control {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}

.colour-swatch {
    width: 100%;
    max-width: 5.5rem;
    height: 4.25rem;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 0.9rem;
    background: none;
    cursor: pointer;
}

.colour-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}

.colour-swatch::-webkit-color-swatch {
    border: 0;
    border-radius: 0.8rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.5rem 0 1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    font-weight: 600;
    cursor: pointer;
}

.chip.is-on {
    border-color: var(--app-accent);
    background: #f6efe9;
}

.chip input {
    width: auto;
}

.lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
}

.lang-tab {
    min-height: 2.3rem;
    padding: 0.3rem 0.75rem;
    font-weight: 600;
}

.lang-tab.is-active {
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-color: transparent;
}

.upload__button {
    display: inline-flex;
    margin: 0.65rem 0 0;
    padding: 0.45rem 0.9rem;
    border: 1px dashed var(--app-line);
    border-radius: var(--app-radius-pill);
    cursor: pointer;
    font-weight: 650;
}

#artwork {
    /* Opacity must stay above 0: Chrome on Android can omit opacity:0
       file fields from the multipart POST even when the File API preview works. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.01;
    font-size: 16px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.artwork-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 2.75rem;
}

.artwork-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.artwork-pending {
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-warn-soft);
    color: var(--app-warn);
    font-size: 0.86rem;
    font-weight: 650;
}

.artwork-error {
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-bad-soft);
    color: var(--app-bad);
    font-size: 0.86rem;
    font-weight: 650;
}

.upload {
    position: relative;
    margin-top: 0.75rem;
}

.upload__current img,
.invite-thumb {
    max-width: min(16rem, 100%);
    height: auto;
    border-radius: 0.7rem;
}

.live-preview {
    overflow: hidden;
    border-radius: 1.1rem;
    border: 1px solid var(--app-line);
    background: var(--live-bg, #f3ede4);
    color: var(--live-primary, #3a2c28);
}

.live-preview__label {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.live-preview__hero img {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.35);
}

.live-preview__hero-empty {
    height: 4.5rem;
    background: var(--live-secondary, #8f5b45);
}

.live-preview__sheet {
    padding: 1rem 1.05rem 1.25rem;
    background: #fffcfa;
}

.live-preview__sheet h3 {
    margin: 0;
    font-family: Georgia, "Palatino Linotype", Palatino, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.live-preview__hello {
    margin-top: 0.85rem;
    font-weight: 650;
}

.live-preview__message {
    white-space: pre-wrap;
}

.live-preview__meta {
    white-space: pre-line;
    color: var(--app-muted);
}

.sticky-actions {
    position: sticky;
    bottom: 0.5rem;
    padding: 0.65rem 0;
    background: linear-gradient(to top, var(--app-bg), transparent);
}

.admin-shell {
    display: grid;
    gap: 1.15rem;
}

.admin-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem 1.25rem;
    align-items: center;
    padding: 0.65rem 0.9rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
}

.admin-brand {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.25rem;
    font-weight: 500;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-pill);
    color: var(--app-text);
    text-decoration: none;
    font-weight: 650;
}

.admin-nav__link.is-active,
.admin-nav__link:hover {
    background: var(--app-accent-soft);
    border-color: var(--app-line);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.55rem;
    margin: 0 0 1.15rem;
}

.page-local-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.65rem;
    margin: 1.1rem 0 0;
    border-bottom: 1px solid var(--app-line);
}

.page-local-tab {
    padding: 0.55rem 0.05rem 0.8rem;
    font-family: var(--app-display);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--app-ease), border-color var(--app-ease);
}

.page-local-tab:hover {
    color: var(--app-text);
}

.page-local-tab.is-active {
    color: var(--app-text);
    border-bottom-color: var(--app-accent);
}

.admin-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.15rem;
    padding: 0.35rem 0.25rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
    overflow: hidden;
}

.admin-summary .admin-stat {
    padding: 0.85rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-inline-end: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
}

.admin-summary .admin-stat:last-child {
    border-inline-end: 0;
}

.admin-stat {
    padding: 0.85rem 0.95rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    box-shadow: none;
}

.admin-stat__value {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.admin-stat__label {
    margin: 0.25rem 0 0;
    color: var(--app-muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-list,
.admin-card-list {
    display: grid;
    gap: 0.35rem;
}

.admin-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.65rem 0.85rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border: 1px solid transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius-xs);
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background var(--app-ease), border-color var(--app-ease);
    min-width: 0;
}

.wac-platform-row {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.wac-platform-row__status {
    flex: 0 0 auto;
}

.wac-platform-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.wac-platform-row__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wac-platform-row__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wac-platform-row__counts {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 0 0 auto;
    margin-inline-end: 0.9rem;
}

.wac-platform-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 2.4rem;
}

.wac-platform-metric__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--app-text);
    line-height: 1.1;
}

.wac-platform-metric__value--bad {
    color: var(--app-bad);
}

.wac-platform-metric__label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted);
    line-height: 1.1;
    white-space: nowrap;
}

.wac-platform-row__date {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
    .wac-platform-row {
        align-items: flex-start;
    }

    .wac-platform-row__main {
        flex-basis: 100%;
        order: 2;
    }

    .wac-platform-row__status {
        order: 1;
    }

    .wac-platform-row__date {
        order: 1;
        margin-inline-start: auto;
    }

    .wac-platform-row__counts {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap;
        margin-inline-end: 0;
    }
}

.admin-card {
    display: grid;
    gap: 0.65rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius-xs);
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background var(--app-ease), border-color var(--app-ease);
}

.admin-row:hover,
.admin-card:hover {
    background: color-mix(in srgb, var(--app-accent-soft) 65%, var(--app-card));
    border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.admin-row__avatar {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-champagne-soft);
    color: var(--brand-bronze);
    font-size: 0.85rem;
    font-weight: 700;
}

.admin-row__body {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-row__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.25;
}

.admin-row__meta {
    margin: 0.15rem 0 0;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.admin-row__chevron {
    color: var(--app-muted);
    font-size: 1.1rem;
    opacity: 0.55;
}

.admin-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.admin-row--static {
    cursor: default;
}

/*
 * Favourite star — a real sibling <form>/<button> next to the row link
 * (never nested inside it: an interactive control cannot sit inside
 * another interactive element). Fixed box size regardless of state so
 * toggling never shifts the row layout; only the two inner icon spans
 * swap via [aria-pressed], so JS only ever needs to flip that one
 * attribute. Selected state reuses the existing accent token rather than
 * a new colour.
 */
.admin-row-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.admin-row-wrap .admin-row {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-fav-form {
    display: flex;
    flex-shrink: 0;
    margin: 0;
}

/*
 * `button.admin-fav-star` (not just `.admin-fav-star`): the star is a real
 * type="submit" button (progressive enhancement — see AdminLayout's own
 * docblock), and the generic `button[type="submit"] { background:
 * var(--app-accent); color: var(--app-accent-text); }` primary-button rule
 * has the SAME specificity as a bare class selector plus an attribute
 * selector — without the `button` element qualifier here, that generic
 * rule would win by source order and paint the star's background AND
 * (once pressed) its icon colour the same accent shade, making the icon
 * invisible against its own background.
 */
button.admin-fav-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--app-radius-xs);
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    transition: background var(--app-ease), color var(--app-ease), border-color var(--app-ease);
}

button.admin-fav-star:hover {
    background: color-mix(in srgb, var(--app-accent-soft) 65%, var(--app-card));
    border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
    color: var(--app-text);
}

button.admin-fav-star[aria-pressed="true"] {
    color: var(--app-accent);
}

.admin-fav-star[data-busy="1"] {
    opacity: 0.6;
    pointer-events: none;
}

.admin-fav-star__icon {
    display: inline-flex;
}

.admin-fav-star__icon--filled {
    display: none;
}

.admin-fav-star[aria-pressed="true"] .admin-fav-star__icon--outline {
    display: none;
}

.admin-fav-star[aria-pressed="true"] .admin-fav-star__icon--filled {
    display: inline-flex;
}

.admin-card h2,
.admin-card h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.admin-card__side,
.admin-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
}

.admin-card__actions form {
    margin: 0;
}

.card--flush {
    padding-bottom: 0.55rem;
}

@media (max-width: 47.99rem) {
    .admin-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-summary .admin-stat:nth-child(3) {
        border-inline-end: 0;
    }

    .admin-summary .admin-stat:nth-child(n + 4) {
        border-top: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
    }
}

.admin-filters {
    margin-bottom: 1rem;
}

.admin-form {
    max-width: 36rem;
}

.admin-inline-form select {
    width: auto;
    min-width: 10rem;
}

.admin-setup-banner {
    margin-bottom: 1rem;
}

.admin-setup-copy {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.admin-setup-copy input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
}

@media (min-width: 40rem) {
    .admin-setup-copy {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media (max-width: 47.99rem) {
    .panel.wide {
        width: 100%;
        margin: 0;
        padding: 0.75rem 0.85rem calc(var(--app-dock-h) + env(safe-area-inset-bottom) + 1.75rem);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .app-topbar,
    .admin-top {
        grid-template-columns: 1fr auto;
        align-items: center;
        border-radius: var(--app-radius);
        padding: 0.55rem 0.75rem;
    }

    .app-nav--desktop,
    .admin-nav.app-nav--desktop {
        display: none;
    }

    .app-account__name {
        display: none;
    }

    .ui-locale-wrap--desktop {
        display: none;
    }

    .app-dock {
        position: fixed;
        z-index: 40;
        inset-inline: 0;
        bottom: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
        min-height: var(--app-dock-h);
        padding: 0.2rem 0.35rem max(0.2rem, env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--app-card) 97%, transparent);
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--app-line) 90%, transparent);
        border-radius: 0;
        box-shadow: var(--app-shadow-dock);
        backdrop-filter: blur(16px);
    }

    .app-dock__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        min-height: 2.85rem;
        padding: 0.28rem 0.15rem;
        border-radius: 0.7rem;
        color: var(--app-muted);
        text-decoration: none;
        font-size: 0.62rem;
        font-weight: 650;
        letter-spacing: 0.02em;
        transition: color var(--app-ease), background var(--app-ease);
    }

    .app-dock__link.is-active {
        color: var(--app-text);
        background: transparent;
        position: relative;
    }

    .app-dock__link.is-active::before {
        content: "";
        position: absolute;
        top: 0.15rem;
        width: 1rem;
        height: 0.18rem;
        border-radius: var(--app-radius-pill);
    background: var(--brand-bronze);
    }

    .app-dock__link .ui-icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .sticky-actions {
        position: sticky;
        bottom: calc(var(--app-dock-h) + env(safe-area-inset-bottom) + 0.35rem);
        z-index: 5;
        margin-inline: 0;
        max-width: 100%;
        padding: 0.55rem 0.35rem;
        background: color-mix(in srgb, var(--app-bg) 92%, transparent);
        border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
        border-radius: var(--app-radius);
        backdrop-filter: blur(10px);
        box-shadow: var(--app-shadow-soft);
    }

    .page-head .actions {
        width: 100%;
        display: grid;
        gap: 0.45rem;
        overflow: visible;
    }

    .page-head .actions .button,
    .page-head .actions .button-primary,
    .page-head .actions .button-quiet {
        width: 100%;
        min-height: 2.65rem;
        flex: none;
        border-radius: 0.85rem;
        justify-content: center;
    }

    .entity-card__actions {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        align-items: stretch;
    }

    .entity-card__actions > :first-child {
        grid-column: 1 / -1;
    }

    /* Keep middle action buttons in col 1 so the overflow stays in col 2 */
    .entity-card__actions > a:not(:first-child),
    .entity-card__actions > button:not(:first-child) {
        grid-column: 1;
    }

    .entity-card__actions .overflow-menu {
        width: auto;
        min-width: 0;
        justify-self: stretch;
        /* Pin overflow to col 2, aligned with the bottom of the stacked
           action rows in col 1. Span a small FIXED bound (3: Guests full-
           width row + at most Invitation + Seating stacked beneath it) —
           never an arbitrarily large span. A large span (previously 100)
           combined with this grid's `gap` inserts one real gap-sized empty
           space between EVERY spanned row track, even fully-empty ones,
           so a 100-row span silently added ~99 stacked gaps (~600px+) of
           dead space beneath the visible content and dragged the whole
           card down with it — exactly the "huge empty card" bug. A small
           bound overshoots by at most 1-2 empty rows regardless of how
           many action buttons a given event actually has, which costs a
           few px, not hundreds. */
        grid-column: 2;
        grid-row: 2 / span 3;
        align-self: end;
    }

    .entity-card__actions .overflow-menu__button {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.65rem;
        padding-inline: 0;
        border-radius: 0.85rem;
        justify-content: center;
    }

    /* The event cards' navigation cluster keeps its single wrapping row on
       phones too (equal pills, quiet "···" at the end), rather than the
       stacked grid the generic action cluster above uses. */
    .entity-card__actions--nav {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
    }

    .entity-card__actions--nav > :first-child,
    .entity-card__actions--nav > a:not(:first-child),
    .entity-card__actions--nav > button:not(:first-child) {
        grid-column: auto;
    }

    .entity-card__actions--nav .button,
    .entity-card__actions--nav .button-compact {
        width: auto;
        min-height: 2.5rem;
    }

    .entity-card__actions--nav .overflow-menu {
        grid-column: auto;
        grid-row: auto;
        align-self: center;
        width: auto;
        margin-inline-start: auto;
    }

    .entity-card__actions--nav .overflow-menu__button {
        width: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        border-radius: 999px;
    }

    .page-tools {
        margin-inline-start: auto;
    }

    .admin-card__side,
    .admin-card__actions {
        width: 100%;
        justify-content: stretch;
    }

    /* Anchor to the viewport as a bottom sheet. Both inline insets must stay
       set: any physical left/right reset here drops the panel back to its
       static position and pushes it past the inline-end edge. */
    .overflow-menu__panel {
        position: fixed;
        inset-inline: 0.75rem;
        inset-block: auto calc(var(--app-dock-h) + env(safe-area-inset-bottom) + 0.5rem);
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0.55rem;
        border-radius: 1.1rem;
        box-shadow: var(--app-shadow);
    }
}

@media (max-width: 47.99rem) {
    .page-head {
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .invite-config {
        gap: 0.85rem;
        width: 100%;
        min-width: 0;
    }

    .invite-config__main,
    .invite-config__preview,
    .invite-config .card,
    .preview-jump {
        max-width: 100%;
        min-width: 0;
    }

    .invite-config .card {
        padding: 1.05rem 1rem 1.2rem;
        border-radius: 1.25rem;
        box-shadow: 0 8px 24px rgba(44, 36, 31, 0.035);
    }

    .preview-jump {
        width: 100%;
        top: 0.45rem;
        justify-content: center;
        min-height: 3rem;
        box-shadow: 0 8px 20px rgba(122, 78, 58, 0.18);
    }

    .theme-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .theme-preset {
        min-height: 4.6rem;
        padding: 0.7rem;
    }

    .theme-preset__dots span {
        width: 1rem;
        height: 1rem;
    }

    .colour-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .colour-control {
        font-size: 0.82rem;
    }

    .colour-swatch {
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 3.8rem;
    }

    .chip-row {
        gap: 0.5rem;
    }

    .chip {
        min-height: 2.65rem;
        padding: 0.42rem 0.72rem;
    }

    .lang-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin-inline: 0;
        padding: 0.15rem 0.05rem 0.45rem;
        scrollbar-width: none;
        max-width: 100%;
    }

    .lang-tabs::-webkit-scrollbar {
        display: none;
    }

    .lang-tab {
        flex: none;
        min-height: 2.65rem;
    }

    .upload__current img {
        width: 100%;
        max-height: 15rem;
        object-fit: contain;
        background: #f8f4ef;
    }

    .upload__button {
        min-height: 2.8rem;
        align-items: center;
        justify-content: center;
    }

    .invite-config__preview {
        scroll-margin-top: 0.75rem;
        padding: 0.25rem 0 1rem;
    }

    .live-preview {
        border-radius: 1.4rem;
        box-shadow: 0 14px 36px rgba(44, 36, 31, 0.09);
    }

    .sticky-actions .button-primary,
    .sticky-actions button[type="submit"] {
        width: 100%;
        min-height: 2.85rem;
    }
}

/* Guest list print / Save as PDF */
.guest-print {
    margin: 0;
    background: #f4f1ec;
    color: #1f1a16;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.guest-print__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid rgba(31, 26, 22, 0.12);
}

.guest-print__sheet {
    max-width: 52rem;
    margin: 1.25rem auto 2rem;
    padding: 1.5rem 1.25rem 2rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 26, 22, 0.08);
}

.guest-print__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(31, 26, 22, 0.55);
}

.guest-print__head h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    line-height: 1.15;
}

.guest-print__meta,
.guest-print__filter {
    margin: 0.4rem 0 0;
    color: rgba(31, 26, 22, 0.7);
    font-size: 0.95rem;
}

/* Labels ride under the guest name so the printed sheet gains no column.
   Deliberately understated — it is reference detail, not a headline. */
.guest-print__labels {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.78rem;
    color: rgba(31, 26, 22, 0.55);
    line-height: 1.35;
}

.guest-print__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(31, 26, 22, 0.12);
    border-bottom: 1px solid rgba(31, 26, 22, 0.12);
}

.guest-print__summary > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: rgba(31, 26, 22, 0.65);
}

.guest-print__stat {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1f1a16;
}

.guest-print__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.guest-print__table th,
.guest-print__table td {
    padding: 0.55rem 0.4rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid rgba(31, 26, 22, 0.1);
}

.guest-print__table th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(31, 26, 22, 0.55);
    font-weight: 600;
}

@media (min-width: 40rem) {
    .guest-print__summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media print {
    .no-print,
    .guest-print__toolbar {
        display: none !important;
    }

    .guest-print {
        background: #fff;
    }

    .guest-print__sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .guest-print__summary {
        break-inside: avoid;
    }

    .guest-print__table thead {
        display: table-header-group;
    }

    .guest-print__table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .guest-print__table th,
    .guest-print__table td {
        border-color: #ccc;
    }
}

/* —— 008F polish layer —— */
.stat-grid {
    gap: var(--app-space-3);
}

.stat {
    position: relative;
    overflow: hidden;
}

.stat__value {
    font-size: clamp(1.45rem, 3vw, 1.75rem);
    letter-spacing: -0.02em;
}

.stat-meter {
    margin-top: 0.65rem;
    height: 0.28rem;
    border-radius: var(--app-radius-pill);
    background: var(--app-accent-soft);
    overflow: hidden;
}

.stat-meter__fill {
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: var(--app-accent);
    transition: width 400ms var(--app-ease);
}

.commercial-usage-metric + .commercial-usage-metric {
    margin-top: 1rem;
}

.commercial-usage-metric__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.commercial-feature-list,
.commercial-allowance-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.commercial-feature-row,
.commercial-allowance-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.35rem;
    border-bottom: 1px solid var(--app-line);
}

.commercial-feature-row:last-child,
.commercial-allowance-list li:last-child {
    border-bottom: none;
}

.commercial-restricted-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.theme-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.65rem;
}

.theme-preset {
    display: grid;
    gap: 0.55rem;
    min-height: 5.25rem;
    padding: 0.7rem;
    text-align: start;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: border-color var(--app-ease), transform var(--app-ease), box-shadow var(--app-ease);
}

.theme-preset:hover {
    border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
}

.theme-preset[aria-pressed="true"] {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 1px var(--app-accent);
}

.theme-preset__swatch {
    display: block;
    height: 2.15rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
}

.theme-preset__name {
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.25;
}

.theme-preset--custom {
    place-content: center;
}

.theme-preset__swatch--custom {
    background:
        repeating-linear-gradient(
            -45deg,
            var(--app-accent-soft),
            var(--app-accent-soft) 6px,
            var(--app-card) 6px,
            var(--app-card) 12px
        );
}

.colour-swatch {
    width: 100%;
    min-height: 3.25rem;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    background: transparent;
}

.button-whatsapp:hover {
    filter: brightness(0.98);
}

.guest-invite-actions .button-whatsapp {
    order: -1;
}

.page-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.page-actions-secondary .button,
.page-actions-secondary .button-quiet {
    min-height: var(--app-control-h-sm);
    font-size: 0.86rem;
    font-weight: 600;
}

.priority-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.muted {
    color: var(--app-muted);
}

.help {
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

[dir="rtl"] .app-account__panel {
    inset-inline-end: 0;
}

[dir="rtl"] body.app-body {
    font-family: var(--brand-sans-rtl);
    line-height: 1.65;
}

[dir="rtl"] body.app-body h1,
[dir="rtl"] body.app-body .empty-state h2,
[dir="rtl"] body.app-body .stat__value {
    font-family: var(--brand-sans-rtl);
    letter-spacing: 0;
}

[dir="rtl"] .brand-lockup__word,
[dir="rtl"] .product-wordmark {
    font-family: var(--brand-serif);
}

[dir="rtl"] .admin-row__chevron {
    transform: scaleX(-1);
}

/* —— 008F.1 quality gate —— */

.product-wordmark,
.app-brand .brand-lockup__word {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--brand-espresso);
}

.app-brand__mark {
    /* legacy alias */
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.button-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0.2rem 0.15rem;
    border: 0;
    background: transparent;
    color: var(--brand-bronze);
    font: inherit;
    font-weight: 650;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.button-link:hover {
    color: var(--brand-espresso);
}

.form-lede {
    margin: 0 0 0.35rem;
    color: var(--app-muted);
    font-size: 0.95rem;
}

.card--secondary {
    background: color-mix(in srgb, var(--app-bg-deep) 45%, var(--app-card));
    border-style: dashed;
}

label.is-optional {
    color: var(--app-muted);
    font-weight: 600;
}

.summary-board {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
    padding: 1rem 1.05rem 1.1rem;
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 90%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

.summary-board__main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

/* Modifier for a 6-metric board (WhatsApp Cloud campaign detail: Status,
   Total, Sent, Delivered, Read, Failed) — without this, a 6th metric wraps
   onto its own near-empty row under the 5-column base. The mobile
   3-column override below still applies (same base class name). */
.summary-board__main--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Tablet widths: six across would squeeze the labels, so two balanced rows
   of three (the phone rule below keeps three columns too). */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .summary-board__main--six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0.55rem;
    }
}

.summary-metric {
    min-width: 0;
    text-align: center;
    padding: 0.15rem 0.1rem;
}

.summary-metric__value {
    margin: 0;
    font-family: var(--app-display);
    font-size: clamp(1.35rem, 4.8vw, 1.85rem);
    font-weight: 500;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.summary-metric__label {
    margin: 0.28rem 0 0;
    color: var(--app-muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* WhatsApp Cloud campaign review — "Confirm and send" + "Cancel" action
   row. Both buttons already use the existing .button-primary/.button-quiet
   component styles unchanged; this only gives their shared container real
   spacing and a premium mobile stack. Scoped to this page's own class
   rather than the bare .form-actions name, which carries no CSS anywhere
   in the product and is shared, unstyled, by a couple of unrelated pages —
   styling it globally here would silently restyle those too. */
.wac-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-3);
}

@media (max-width: 47.99rem) {
    .wac-review-actions {
        display: grid;
        width: 100%;
    }

    .wac-review-actions .button,
    .wac-review-actions .button-primary,
    .wac-review-actions .button-quiet {
        width: 100%;
        justify-content: center;
    }
}

.summary-board__progress {
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
}

.summary-board__progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    color: var(--app-muted);
}

.summary-board__progress-top strong {
    color: var(--app-text);
    font-family: var(--app-display);
    font-size: 1.05rem;
    font-weight: 500;
}

.stat-meter {
    height: 0.35rem;
    border-radius: var(--app-radius-pill);
    background: color-mix(in srgb, var(--app-line) 70%, transparent);
    overflow: hidden;
}

.stat-meter__fill {
    width: var(--p, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--brand-espresso);
}

.import-columns {
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--app-bg-deep) 40%, var(--app-card));
    border-radius: var(--app-radius-sm);
}

.import-columns__title {
    margin: 0 0 0.45rem;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.import-columns__list {
    margin: 0;
    padding-inline-start: 1.1rem;
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.file-zone {
    display: grid;
    gap: 0.55rem;
    padding: 1.25rem 1.1rem;
    border: 1.5px dashed var(--app-line-strong);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-card) 70%, var(--app-bg));
    text-align: center;
}

.file-zone__title {
    margin: 0;
    font-weight: 650;
}

.file-zone__pick {
    display: inline-flex;
    justify-content: center;
    margin: 0.25rem auto 0;
    cursor: pointer;
}

.file-zone__pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-zone.has-file .file-zone__pick {
    display: none;
}

.file-zone__meta {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
}

.file-zone__name {
    margin: 0;
    font-weight: 650;
    font-size: 0.92rem;
    word-break: break-word;
}

.choice-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    width: 100%;
    min-height: var(--app-control-h);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    text-align: start;
}

.choice-trigger::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    margin-top: -0.2rem;
}

select#list.is-enhanced,
select#sort.is-enhanced {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(22, 20, 18, 0.38);
    animation: fade-in 160ms ease;
}

.choice-sheet {
    position: fixed;
    z-index: 70;
    inset-inline: 0.75rem;
    bottom: calc(var(--app-dock-h) + env(safe-area-inset-bottom) + 0.55rem);
    max-height: min(70vh, 28rem);
    overflow: auto;
    padding: 0.85rem 0.75rem 0.95rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: 1.15rem;
    box-shadow: var(--app-shadow);
    animation: sheet-up 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.choice-sheet__title {
    margin: 0 0 0.55rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.choice-sheet__list {
    display: grid;
    gap: 0.25rem;
}

.choice-sheet__option {
    width: 100%;
    min-height: 2.75rem;
    justify-content: flex-start;
    border-radius: var(--app-radius-sm);
    background: transparent;
    border-color: transparent;
    font-weight: 600;
}

/* One item anatomy for every action-sheet entry — links, buttons and POST
   forms alike: same padding, a fixed 18px icon rail, the same icon→label gap,
   so every label starts on one column. */
.choice-sheet__option--link,
.choice-sheet__option--icon {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    text-align: start;
}

.choice-sheet__option--link:hover,
.choice-sheet__option--icon:hover,
.choice-sheet__option--link:focus-visible,
.choice-sheet__option--icon:focus-visible {
    background: var(--app-accent-soft);
}

.choice-sheet__option.is-danger {
    color: var(--app-bad);
}

.choice-sheet__option.is-danger:hover,
.choice-sheet__option.is-danger:focus-visible {
    background: var(--app-bad-soft);
}

.choice-sheet__option--link .ui-icon,
.choice-sheet__option--icon .ui-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.choice-sheet__option--link > span,
.choice-sheet__option--icon > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pinned destructive actions: a quiet hairline above, never a loud block. */
.choice-sheet__option:not(.is-danger) + .choice-sheet__option.is-danger {
    position: relative;
    margin-top: 0.4rem;
}

.choice-sheet__option:not(.is-danger) + .choice-sheet__option.is-danger::before {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    top: -0.35rem;
    border-top: 1px solid var(--app-line);
}

.choice-sheet__cancel {
    width: 100%;
    margin-top: 0.45rem;
}

/* Personal action ordering (menus with data-reorder-menu): one quiet
   header control; arrows appear only in reorder mode. */
.choice-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
}
.choice-sheet__head .choice-sheet__title { margin: 0; }
.choice-sheet__reorder {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
}
.choice-sheet__reorder .ui-icon { width: 16px; height: 16px; }
.choice-sheet__reorder:hover,
.choice-sheet__reorder:focus-visible,
.choice-sheet__reorder[aria-pressed="true"] {
    color: var(--app-text);
    background: var(--app-bg);
    border-color: var(--app-line);
}
.choice-sheet__reorder-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding-block: 0;
    padding-inline: 0.75rem 0.3rem;
    border: 1px solid transparent; /* same box as a normal option, so the icon and label columns match exactly */
    border-radius: var(--app-radius-sm);
}
/* Same icon rail as the normal menu, so labels do not move between modes. */
.choice-sheet__reorder-row > .ui-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.choice-sheet__move + .choice-sheet__move { margin-inline-start: -0.35rem; }
.choice-sheet__reorder-row:nth-child(even) { background: color-mix(in srgb, var(--app-bg) 55%, transparent); }
.choice-sheet__reorder-label { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-sheet__move {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-card);
    color: var(--app-text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}
.choice-sheet__move:hover:not([disabled]), .choice-sheet__move:focus-visible { border-color: var(--app-line-strong); background: var(--app-bg); }
.choice-sheet__move[disabled] { opacity: 0.35; cursor: default; }
.choice-sheet__reorder-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--app-line);
}
/* Reset on its own row, Cancel + Save sharing the next: holds in every locale. */
.choice-sheet__reorder-foot .choice-sheet__reset { flex: 1 1 100%; }
.choice-sheet__reorder-foot > .button-quiet:not(.choice-sheet__reset),
.choice-sheet__reorder-foot > .button { flex: 1 1 0; }
/* Save / Cancel stay in reach however long the list is. */
.choice-sheet.is-reordering .choice-sheet__reorder-foot {
    position: sticky;
    bottom: -0.95rem;
    margin-bottom: -0.95rem;
    padding-bottom: 0.95rem;
    background: var(--app-card);
}
.choice-sheet__error { margin: 0 0 0.4rem; padding: 0 0.35rem; color: var(--app-bad); font-size: var(--app-text-sm); }
@media (max-width: 47.99rem) {
    .choice-sheet__move, .choice-sheet__reorder { width: 2.75rem; height: 2.75rem; }
    /* 44px touch arrows: drop only the block borders so rows stay 44px like normal options
       (the inline border keeps the icon/label columns aligned). */
    .choice-sheet__reorder-row { border-block-width: 0; }
    .choice-sheet__reorder-foot > .button-quiet,
    .choice-sheet__reorder-foot > .button { min-height: 2.75rem; }
}

details[data-action-sheet].is-sheet-enhanced > .overflow-menu__panel {
    display: none !important;
}

html.choice-sheet-open {
    overflow: hidden;
}

.priority-actions .button-quiet {
    /* legacy */
}

.priority-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.priority-actions .button-primary {
    flex: 1 1 auto;
}

.priority-actions .button:not(.button-primary) {
    flex: 0 1 auto;
}

@media (max-width: 47.99rem) {
    .priority-actions {
        display: grid;
        width: 100%;
        gap: 0.45rem;
    }

    .priority-actions .button,
    .priority-actions .button-primary,
    .priority-actions .button-quiet {
        width: 100%;
        flex: none;
        min-height: 2.65rem;
        border-radius: 0.85rem;
        justify-content: center;
    }

    .preview-jump.button {
        width: auto;
        max-width: 100%;
        min-height: 2.55rem;
        padding: 0.4rem 0.95rem;
        margin: 0 0 0.75rem;
        border-radius: var(--app-radius-pill);
        box-shadow: var(--app-shadow-soft);
        font-size: 0.86rem;
        font-weight: 650;
    }

    .sticky-actions {
        padding: 0.45rem 0.35rem;
    }

    .sticky-actions .button-primary,
    .sticky-actions button[type="submit"] {
        min-height: 2.65rem;
    }
}

@media (min-width: 48rem) {
    .choice-sheet-backdrop {
        background: transparent;
    }

    .choice-sheet {
        inset-inline: auto;
        inset-block-end: auto;
        width: min(18rem, calc(100vw - 2rem));
        max-height: min(30rem, calc(100vh - 2rem));
        border-radius: var(--app-radius);
        animation: fade-in 140ms ease;
    }

    .choice-sheet.is-reordering {
        max-height: min(34rem, calc(100vh - 9rem));
    }
}

@keyframes sheet-up {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.empty-state__icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand-champagne-soft);
    color: var(--brand-bronze);
}

.empty-state__icon .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.empty-state--compact {
    padding: 1.35rem 1rem;
}

.artwork-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-width: 28rem;
    margin: 0 auto;
    border-radius: 1rem;
    background: var(--app-bg-deep);
    border: 1px solid var(--app-line);
}

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

.artwork-frame__empty {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 10rem;
    padding: 1rem;
}

.artwork-frame__hint {
    color: var(--app-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.artwork-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.switch-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.switch-inline input {
    width: auto;
}

.auth-hero__brand a {
    color: inherit;
    text-decoration: none;
}

body.app-body--auth .panel {
    width: min(24rem, calc(100% - 1.5rem));
    padding: 1.65rem 1.35rem 1.5rem;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
    border-color: color-mix(in srgb, var(--app-line) 70%, transparent);
}

body.app-body--auth .auth-hero h1 {
    font-family: var(--app-display);
    font-size: clamp(1.55rem, 4vw, 1.85rem);
    font-weight: 500;
}

html[dir="rtl"] body.app-body h1,
html[dir="rtl"] body.app-body--auth .auth-hero h1,
html[dir="rtl"] body.app-body .empty-state h2,
html[dir="rtl"] body.app-body .stat__value {
    font-family: var(--brand-sans-rtl);
    letter-spacing: 0;
}

@media (max-width: 47.99rem) {
    .summary-board__main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem 0.25rem;
    }

    .page-head h1 {
        font-size: clamp(1.45rem, 6vw, 1.85rem);
    }

    .guest-list {
        gap: 0.55rem;
    }
}

[dir="rtl"] .choice-trigger::after {
    margin-top: -0.2rem;
}

html[dir="rtl"] .app-account__summary:not([data-app-header] *) {
    padding-inline: 0.55rem 0.25rem;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"].u-ltr,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="http"] {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .guest-card__contact,
html[dir="rtl"] .entity-card__meta,
html[dir="rtl"] .record-card__contact,
html[dir="rtl"] .record-card__date,
html[dir="rtl"] .admin-setup-copy input {
    unicode-bidi: isolate;
}

@media (max-width: 47.99rem) {
    html[dir="rtl"] .overflow-menu__panel a,
    html[dir="rtl"] .overflow-menu__panel button {
        text-align: start;
    }
}

/* =============================================
   Design system polish
   ============================================= */

/* Primary button: lift + shadow on hover */
button[type="submit"]:not(:disabled):hover,
.button-primary:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-accent) 86%, black);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--app-accent) 28%, transparent);
    transform: translateY(-1px);
}

button[type="submit"]:active,
.button-primary:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Include box-shadow in primary button's transition */
button[type="submit"],
.button-primary {
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Secondary / quiet button: subtle fill + border on hover, accessible focus ring */
.button:not(.button-primary):not(.button-whatsapp):not(.button-danger):not([disabled]):hover,
button.button-quiet:not([disabled]):hover {
    background: var(--app-accent-soft);
    border-color: var(--app-line-strong);
}

.button:focus-visible,
button.button-quiet:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

/* WhatsApp button: replace weak brightness filter with expressive hover */
.button-whatsapp:hover {
    background: color-mix(in srgb, var(--app-whatsapp) 14%, var(--app-whatsapp-soft));
    border-color: color-mix(in srgb, var(--app-whatsapp) 24%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--app-whatsapp) 16%, transparent);
    filter: none;
}

/* Entity and record cards: add shadow transition and shadow on hover */
.entity-card,
.record-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entity-card:hover,
.record-card:hover {
    border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-line));
    box-shadow: 0 2px 14px color-mix(in srgb, var(--app-accent) 8%, transparent), var(--app-shadow-soft);
}

/* Guest cards: subtle border on hover */
.guest-card {
    transition: border-color 0.15s ease;
}

.guest-card:hover {
    border-color: color-mix(in srgb, var(--app-accent) 20%, var(--app-line));
}

/* Table: warm row hover */
tbody tr:hover td {
    background: color-mix(in srgb, var(--app-accent-soft) 22%, transparent);
}

/* Notice: use design token for success bg, add border */
.notice--ok {
    background: var(--app-ok-soft);
    border: 1px solid color-mix(in srgb, var(--app-ok) 20%, transparent);
}

/* Flash: add a border to match other status components */
.flash {
    border: 1px solid color-mix(in srgb, var(--app-bad) 22%, transparent);
}

/* Empty state icon: slightly larger with warm glow */
.empty-state__icon {
    width: 3.2rem;
    height: 3.2rem;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-champagne) 32%, transparent);
}

.empty-state__icon .ui-icon {
    width: 1.35rem;
    height: 1.35rem;
}

/* Overflow menu: richer shadow for better elevation */
.overflow-menu__panel {
    box-shadow: 0 4px 18px rgba(44, 38, 33, 0.12), 0 1px 3px rgba(44, 38, 33, 0.06);
}

/* Dock active indicator: slightly wider for better legibility */
.app-dock__link.is-active::before {
    width: 1.2rem;
}

/* Next-up card: warm accent to distinguish the primary CTA area */
.card--next {
    background: color-mix(in srgb, var(--app-accent-soft) 32%, var(--app-card));
    border-color: color-mix(in srgb, var(--app-accent) 15%, var(--app-line));
}

/* Auth panel: richer shadow for login/setup */
body.app-body--auth .panel {
    box-shadow: 0 1px 2px rgba(44, 38, 33, 0.04), 0 12px 32px rgba(44, 38, 33, 0.09);
}

/* Badge borders: add a very subtle border for visual refinement */
.badge--ok {
    border-color: color-mix(in srgb, var(--app-ok) 18%, transparent);
}

.badge--warn {
    border-color: color-mix(in srgb, var(--app-warn) 18%, transparent);
}

.badge--bad {
    border-color: color-mix(in srgb, var(--app-bad) 18%, transparent);
}

.badge--success {
    border-color: color-mix(in srgb, var(--app-ok) 18%, transparent);
}

.badge--danger {
    border-color: color-mix(in srgb, var(--app-bad) 18%, transparent);
}

.badge--muted {
    border-color: color-mix(in srgb, var(--app-line-strong) 40%, transparent);
}

/* Summary board metrics: slightly more breathing room on desktop */
@media (min-width: 48rem) {
    .summary-metric {
        padding: 0.2rem 0.25rem;
    }
}

/* Chip on-state: use brand token instead of hardcoded value */
.chip.is-on {
    background: var(--brand-ivory);
}

/* Upload zone: warmer hover for drag-drop areas */
.upload-zone:hover,
.file-zone:hover {
    border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line-strong));
    background: color-mix(in srgb, var(--app-accent-soft) 18%, var(--app-card));
}

/* Sort link: smooth colour on hover */
.sort-link {
    transition: color 0.12s ease;
}

/* ——— Auth final polish ——— */

/* 1. Autofill: prevent Chrome/Safari from painting fields pale blue.
      The inset box-shadow fills the input interior with the app surface
      colour, overriding the UA autofill background. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px var(--app-surface) inset !important;
    -webkit-text-fill-color: var(--app-text) !important;
    caret-color: var(--app-text);
}

/* 3. Auth subtitle: balance line breaks so the reset-page subtitle
      "Enter your email address and we'll send you a reset link." does
      not orphan a single word on the last line. */
.auth-hero__sub {
    max-width: 20rem;
    margin-inline: auto;
    text-wrap: balance;
}

/* 4. Mobile: auth submit button spans the full card width.
      Natural-size buttons are tappable but feel undersized at ≤375px. */
@media (max-width: 47.99rem) {
    body.app-body--auth .actions button[type="submit"],
    body.app-body--auth .actions .button-primary {
        width: 100%;
    }
}

/* ——— Guest response note — dashboard ——— */

/* Base: always shown, neutral outline — no note yet */
.guest-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 0.3rem;
    background: transparent;
    color: color-mix(in srgb, var(--app-muted) 50%, transparent);
    cursor: default;
    vertical-align: middle;
    flex: none;
    pointer-events: none;
}

/* Active: note exists */
.guest-note-btn[data-has-note] {
    color: var(--app-text);
    cursor: pointer;
    pointer-events: auto;
}

.guest-note-btn[data-has-note] svg {
    stroke-width: 2.2;
}

.guest-note-btn[data-has-note]:hover {
    background: color-mix(in srgb, var(--app-text) 7%, transparent);
}

/* Invitation open/seen indicator */
.guest-open-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    flex: none;
    color: color-mix(in srgb, var(--app-muted) 50%, transparent);
}

.guest-open-icon--opened {
    color: var(--app-text);
}

.guest-open-icon--opened svg {
    stroke-width: 2.2;
}

/* "Delivery status" and "Opened" — two real, separate columns (Guests
   table communication refinement). Delivery status stacks a strong primary
   line (the current WhatsApp badge, or — with no WhatsApp activity at all —
   the manual/Group Link/Not marked chip at full weight) over zero or more
   quiet secondary lines of surviving history (GuestDeliveryStatus::cell()).
   Opened stays exactly the narrow eye indicator it always was, now in its
   own compact cell with nothing beside it. */
td/* Latest RSVP response time: secondary to the status, never a new column. */
.guest-responded {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--app-muted);
    white-space: nowrap;
    unicode-bidi: isolate;
}
.guest-card__facts .guest-responded { display: inline; margin: 0; }
.guest-card__facts .guest-responded::before { content: "·"; margin-inline: 0.4rem; }

.guest-delivery-cell {
    min-width: 9rem;
}

.delivery-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.delivery-status--primary-only {
    display: inline-flex;
}

.delivery-status__primary {
    display: inline-flex;
}

.delivery-status__secondary {
    display: inline-flex;
    font-size: var(--app-text-xs);
    /* Secondary by size alone: at opacity .68 the muted text measured about
       2.8:1 (WCAG 1.4.3 needs 4.5:1). */
    transform: scale(0.94);
    transform-origin: left center;
}

[dir="rtl"] .delivery-status__secondary {
    transform-origin: right center;
}

.delivery-status__secondary--static {
    align-items: center;
    color: var(--app-muted);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-inline: 0.1rem;
}

/* Delivery channel line — ONE component for every provider channel
   (WhatsApp, Email): icon | "Channel · State", the quiet time of THAT
   state under the label. Words carry the state; tone only reinforces it. */
.delivery-status__channel {
    display: inline-flex;
}

.delivery-channel {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.4rem;
    row-gap: 0.05rem;
    align-items: start;
    max-width: 100%;
    font-size: var(--app-text-xs);
    line-height: 1.35;
    color: var(--app-text);
    text-align: start;
}

.delivery-channel__icon {
    width: 0.95rem;
    height: 0.95rem;
    margin-block-start: 0.05rem;
    color: var(--app-muted);
}

.delivery-channel__label {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.delivery-channel__time {
    grid-column: 2;
    color: var(--app-muted);
    font-weight: 400;
    white-space: nowrap;
}

.delivery-channel--whatsapp .delivery-channel__icon {
    color: var(--app-whatsapp);
}

.delivery-channel--email.delivery-channel--ok .delivery-channel__icon {
    color: var(--app-ok);
}

.delivery-channel--bad .delivery-channel__icon,
.delivery-channel--bad .delivery-channel__label {
    color: var(--app-bad);
}

.delivery-channel--quiet .delivery-channel__label {
    color: var(--app-muted);
}

/* The WhatsApp line is a button (opens the guest's WhatsApp history): it
   looks like its Email sibling, with a quiet hover/focus affordance. */
button.delivery-channel {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--app-radius-xs);
    background: none;
    font: inherit;
    font-size: var(--app-text-xs);
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    /* Not the global 42px button height: the grid rows would stretch and
       the time would drift away from its label. The line stays ~32px tall,
       above the 24px minimum target size. */
    min-height: 0;
    align-content: start;
}

button.delivery-channel:hover .delivery-channel__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

button.delivery-channel:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

td.guest-opened-cell {
    white-space: nowrap;
    text-align: center;
}

/* The header may wrap to two lines exactly like the existing two-line
   headers (Guest note, Group & Labels) — in longer locales such as German
   this keeps the column at the width of its content instead of its header. */
th.guest-delivery-th,
th.guest-opened-th {
    white-space: normal;
}

/* The Guests table is the densest table in the product; a slightly tighter
   inline cell padding here (0.65rem instead of the global 0.85rem) keeps
   the whole table inside the 1150px content column at ordinary desktop
   widths — and, in German, no wider than the previous single combined
   column — without touching any other table, font size or wording. The
   compact Opened cell itself needs even less air. */
#guests-table-wrap th,
#guests-table-wrap td {
    padding-inline: 0.65rem;
}

#guests-table-wrap td.guest-opened-cell,
#guests-table-wrap th.guest-opened-th {
    padding-inline: 0.5rem;
}

/* Send-state indicator (GuestSentStatus).
   A <details data-action-sheet> like the row "···" menu: the <summary> IS the
   chip; host-ui.js opens the shared popover / bottom sheet for details and the
   mark/clear action. Deliberately quiet: one sage chip when confirmed, a
   neutral champagne chip for a Group Link join, a muted dash otherwise —
   never a warning, never a taller row. */
.sent-status {
    display: inline-flex;
    vertical-align: middle;
}

.sent-chip {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 1.55rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--app-radius-pill);
    border: 1px solid transparent;
    font-size: var(--app-text-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sent-chip::-webkit-details-marker {
    display: none;
}

.sent-chip .ui-icon,
.sent-chip svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
}

.sent-chip--sent {
    background: var(--app-ok-soft);
    border-color: color-mix(in srgb, var(--app-ok) 22%, transparent);
    color: var(--app-ok);
}

.sent-chip--sent:hover {
    border-color: color-mix(in srgb, var(--app-ok) 45%, transparent);
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.06);
    transform: translateY(-0.5px);
}

.sent-chip--unmarked {
    padding-inline: 0.5rem;
    color: color-mix(in srgb, var(--app-muted) 70%, transparent);
    font-weight: 500;
}

.sent-chip--unmarked:hover,
.sent-chip--unmarked:focus-visible {
    color: var(--app-muted);
    background: color-mix(in srgb, var(--app-line) 45%, transparent);
    border-color: color-mix(in srgb, var(--app-line) 80%, transparent);
}

/* Joined via Group Link: neutral, distinct from the sage "Sent" — the
   brand's champagne accent-soft on a quiet outline, no icon, no claim. */
.sent-chip--group {
    background: var(--app-accent-soft);
    border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
    color: var(--app-text);
    font-weight: 600;
}

.sent-chip--group:hover {
    border-color: color-mix(in srgb, var(--app-accent) 40%, transparent);
    box-shadow: 0 1px 2px rgba(0 0 0 / 0.06);
    transform: translateY(-0.5px);
}

.sent-chip:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.sent-status--just-changed > .sent-chip {
    animation: sent-chip-settle 420ms ease-out;
}

@keyframes sent-chip-settle {
    from { transform: scale(0.94); opacity: 0.5; }
    to   { transform: none; opacity: 1; }
}

/* Native <details> panel (no JavaScript): same notes and form, same look
   as the "···" menu panel. */
.sent-status__panel {
    min-width: 13rem;
}

.overflow-menu__note {
    margin: 0;
    padding: 0.35rem 0.7rem;
    font-size: var(--app-text-sm);
    line-height: 1.4;
    color: var(--app-text);
}

.overflow-menu__note--muted {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
}

.sent-status__headline {
    font-weight: 650;
}

.sent-status__who .sent-status__name {
    display: block;
    font-weight: 600;
}

.sent-status__who .sent-status__when {
    display: block;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

.sent-status__panel form,
.sent-status__menu-item {
    margin: 0;
}

.sent-status__panel .sent-status__action {
    margin-top: 0.25rem;
    border-top: 1px solid var(--app-line);
    padding-top: 0.25rem;
}

.overflow-menu__panel .sent-status__menu-item button,
.overflow-menu__panel .sent-status__action button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    text-align: start;
    color: var(--app-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.overflow-menu__panel .sent-status__menu-item button:hover,
.overflow-menu__panel .sent-status__action button:hover {
    background: var(--app-accent-soft);
}

/* Read-only lines mirrored into the shared sheet (host-ui.js mirrorNote). */
.choice-sheet__note {
    margin: 0;
    padding: 0.3rem 0.75rem;
    font-size: var(--app-text-sm);
    line-height: 1.45;
    color: var(--app-text);
}

.choice-sheet__note--muted {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    padding-bottom: 0.55rem;
}

.choice-sheet__note .sent-status__name {
    font-weight: 600;
}

.choice-sheet__note .sent-status__when {
    display: block;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

.guest-card__badges .sent-status {
    align-self: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sent-chip {
        transition: none;
    }

    .sent-status--just-changed > .sent-chip {
        animation: none;
    }
}

/* Guest note read-only modal */
.guest-note-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0 0 0 / 0.36);
}

.guest-note-modal {
    position: fixed;
    inset: auto 0 0;
    z-index: 201;
    background: var(--app-card);
    border-radius: 1.2rem 1.2rem 0 0;
    padding: 1.4rem 1.25rem 2rem;
    box-shadow: 0 -6px 32px rgba(0 0 0 / 0.14);
    max-width: 100%;
}

.guest-note-modal__kicker {
    margin: 0 0 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.guest-note-modal__guest {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-text);
}

.guest-note-modal__text {
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    color: var(--app-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.guest-note-modal__foot {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 48rem) {
    .guest-note-modal {
        position: fixed;
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(90vw, 28rem);
        border-radius: 1.2rem;
        padding: 1.5rem 1.5rem 1.25rem;
    }
}

/* Print export: include-note checkbox in toolbar */
.guest-print__note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-inline-end: 0.5rem;
}

/* ---- Per-language artwork rows ---- */

.lang-art-section {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--app-line);
}

.lang-art-section__head {
    margin: 0 0 0.25rem;
    font-weight: 650;
    font-size: 0.92rem;
}

.lang-art-row {
    padding: 0.8rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 50%, transparent);
}

.lang-art-row:last-child {
    border-bottom: 0;
}

.lang-art-row__lang {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--app-secondary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.lang-art-row__body {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.lang-art-row__thumb-wrap {
    flex-shrink: 0;
    width: 3.2rem;
    height: 2.3rem;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--app-line);
    background: color-mix(in srgb, var(--app-line) 45%, var(--app-card));
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-art-row__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lang-art-row__thumb--default {
    opacity: 0.55;
}

.lang-art-row__thumb-empty {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--app-line);
}

.lang-art-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.lang-art-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.17rem 0.55rem;
    border-radius: var(--app-radius-pill);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    background: var(--app-accent-soft);
    color: var(--app-secondary);
    width: fit-content;
}

.lang-art-row__badge--default {
    background: color-mix(in srgb, var(--app-line) 45%, var(--app-card));
    color: var(--app-muted);
    font-weight: 500;
}

.lang-art-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.lang-art-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lang-art-remove {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.lang-art-pick-btn {
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.28rem 0.75rem;
    min-height: 2rem;
}

.lang-art-use-default {
    font-size: 0.82rem;
}

/* Group pages: premium contextual back-to-guests chip */
.grp-back-link {
    margin: 0 0 0.45rem;
}

.grp-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.22rem 0.7rem 0.22rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--app-text);
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.grp-back-link a::before {
    content: '\2190';
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.7;
}

[dir="rtl"] .grp-back-link a::before {
    content: '\2192';
}

.grp-back-link a:hover {
    border-color: var(--app-line-strong);
    background: var(--app-bg-deep);
}

.grp-back-link a:focus-visible {
    outline: 2px solid var(--app-focus, currentColor);
    outline-offset: 2px;
    border-radius: var(--app-radius-pill);
}

/* Group Manage: secondary shortcut action */
.grp-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.28rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--app-text);
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.grp-action-link:hover {
    border-color: var(--app-line-strong);
    background: var(--app-bg-deep);
}

.grp-action-link:focus-visible {
    outline: 2px solid var(--app-focus, currentColor);
    outline-offset: 2px;
    border-radius: var(--app-radius-pill);
}

/* Group mobile card: stats list */
.grp-card-stats {
    display: block;
    margin: 0.55rem 0 0;
    padding: 0;
}

.grp-card-stats__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.18rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 50%, transparent);
}

.grp-card-stats__row:last-child {
    border-bottom: 0;
}

.grp-card-stats dt {
    color: var(--app-muted);
    font-weight: 400;
}

.grp-card-stats dd {
    margin: 0;
    font-weight: 650;
    color: var(--app-text);
}

.grp-card-manage {
    margin-top: 0.75rem;
}

/* Group manage: link copy row */
.group-link-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.group-link-input {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-copy-btn {
    flex: none;
    align-self: flex-start;
}

@media (min-width: 48rem) {
    .group-link-wrap {
        flex-direction: row;
        align-items: center;
    }

    .group-link-input {
        flex: 1 1 0;
    }
}

/* Record / Update response card */
.record-rsvp-form .form-fieldset {
    margin-bottom: 0.75rem;
}

.record-rsvp-count {
    margin-top: 0.5rem;
}

.summary-metric__sub {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.15rem;
}

/* ── Alternate Contact UI ──────────────────────────────────────────────── */
.alt-contact-section { }

.alt-contact-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--app-surface, #f9fafb);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-line);
    margin-bottom: 0.5rem;
}

.alt-contact-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.alt-contact-card__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.alt-contact-card__phone {
    font-size: 0.88rem;
    color: var(--text-muted, #6b7280);
}

.alt-contact-card__rel {
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}

.alt-contact-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.alt-remove-form {
    display: inline;
    margin: 0;
}

.alt-add-card {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    padding: 1rem;
    margin-top: 0.75rem;
    background: var(--app-bg);
}

.alt-tab-bar {
    display: flex;
    gap: 0.15rem;
    padding: 0.2rem;
    background: color-mix(in srgb, var(--app-line) 40%, transparent);
    border-radius: var(--app-radius-pill);
    width: fit-content;
    margin-bottom: 0.75rem;
}

.alt-tab {
    border: none;
    background: transparent;
    padding: 0.3rem 0.75rem;
    border-radius: var(--app-radius-pill);
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    transition: background 0.15s, color 0.15s;
}

.alt-tab.is-active {
    background: var(--app-card);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.alt-panel { }

.alt-search-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.alt-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.alt-result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-bg);
    cursor: pointer;
    text-align: start;
    font-size: 0.88rem;
    transition: background 0.12s;
}

.alt-result-item:hover {
    background: var(--app-surface, #f9fafb);
}

.alt-result-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.alt-result-badge--guest {
    background: color-mix(in srgb, var(--app-accent) 15%, transparent);
    color: var(--app-accent);
}

.alt-result-badge--contact {
    background: color-mix(in srgb, var(--app-ok) 15%, transparent);
    color: var(--app-ok, #16a34a);
}

.alt-result-name {
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alt-result-phone {
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    flex-shrink: 0;
}

.alt-no-results {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    padding: 0.5rem;
}

.alt-selected-preview {
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--app-accent) 8%, transparent);
    border-radius: var(--app-radius);
    border: 1px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
    margin-bottom: 0.75rem;
}

.alt-selected-name {
    font-weight: 600;
    font-size: 0.92rem;
    margin: 0 0 0.1rem;
}

.alt-selected-phone {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    margin: 0 0 0.5rem;
}

.alt-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Alternate indicator badge on guest list */
/* Guest Accounts V1 — "Saved to a Vitoqa account": a quiet bookmark mark
   beside the guest's name (the only account fact a host sees). */
.guest-account-mark {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-inline-start: 0.35rem;
    color: var(--accent, #6d5bd0);
    opacity: 0.78;
}
.guest-account-mark .ui-icon {
    width: 15px;
    height: 15px;
}
.guest-account-saved {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted, #6b7280);
}
.guest-account-saved .ui-icon {
    width: 18px;
    height: 18px;
    color: var(--accent, #6d5bd0);
    flex: none;
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
}

.guest-alt-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    background: var(--app-surface, #f9fafb);
    border: 1px solid var(--app-line);
    border-radius: 99px;
    padding: 0.05rem 0.4rem;
    vertical-align: middle;
    margin-inline-start: 0.3rem;
}

@media (max-width: 600px) {
    .alt-contact-card { flex-direction: column; }
    .alt-contact-card__actions { align-self: flex-start; }
    .alt-tab-bar { width: 100%; }
    .alt-tab { flex: 1; justify-content: center; }
}

/* WhatsApp message mode segmented control */
.wa-mode-selector {
    display: inline-flex;
    margin: 0.1rem 0 1rem;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-line);
    background: var(--app-surface, #faf8f5);
    overflow: hidden;
}

.wa-mode-btn {
    flex: 1 1 auto;
    min-height: 2.1rem;
    padding: 0.3rem 1.1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--app-text-muted, #706558);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.wa-mode-btn + .wa-mode-btn {
    border-inline-start: 1px solid var(--app-line);
}

.wa-mode-btn.is-active {
    background: var(--app-accent);
    color: var(--app-accent-text);
}

.wa-mode-btn:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

.wa-mode-help {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

/* Token chips for Custom message editor */
.wa-token-chips-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.15rem 0 0.5rem;
}

.wa-token-chips-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted, #706558);
    white-space: nowrap;
}

.wa-token-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.wa-token-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface, #faf8f5);
    font-size: 0.8rem;
    font-weight: 550;
    color: var(--app-accent);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.wa-token-chip:hover {
    background: color-mix(in srgb, var(--app-accent) 8%, var(--app-surface, #faf8f5));
    border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-line));
}

.wa-token-chip:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.wa-custom-field {
    font-family: inherit;
    min-height: 8rem;
}

.wa-link-note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--app-text-muted, #706558);
    font-style: italic;
}

.wa-preview {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-line);
}

.wa-preview__label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--app-text-muted, #706558);
    margin: 0 0 0.5rem;
}

.wa-preview__body {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0.8rem 1rem;
    background: #e9f7ef;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--app-whatsapp) 18%, transparent);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #1a3a2a;
    min-height: 3.5rem;
}

/* Host activity: last-active signal on platform customer detail cards */
.record-card__activity {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    color: var(--app-muted);
    font-size: 0.875rem;
}

.record-card__activity-label {
    white-space: nowrap;
}

.record-card__activity-sep {
    margin: 0 0.3em;
    flex-shrink: 0;
}

.record-card__activity-value {
    color: var(--app-text);
    font-weight: 500;
}

.record-card__activity-value--never {
    color: var(--app-muted);
    font-weight: 400;
}

@media (min-width: 48rem) {
    .record-card--host {
        grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9rem) minmax(10.25rem, 13.25rem);
    }

    .record-card__activity {
        display: block;
        align-self: start;
        padding-top: 0.1rem;
    }

    .record-card__activity-sep {
        display: none;
    }

    .record-card__activity-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--app-muted);
        margin-bottom: 0.3rem;
    }

    .record-card__activity-value {
        display: block;
        font-size: 0.9rem;
    }
}

/* ---- Country picker combobox ---- */
.country-picker {
    position: relative;
    direction: ltr;
}

.country-picker__combo {
    display: flex;
    align-items: center;
    gap: 0;
    border: var(--app-input-border, 1px solid var(--app-line-strong));
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    overflow: hidden;
}

.country-picker__flag {
    flex-shrink: 0;
    padding-block: 0;
    padding-inline: 0.65rem 0.5rem;
    font-size: 1.2em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    min-width: 2rem;
    text-align: center;
    /* Flags are regional-indicator pairs. The UI text stacks (--brand-sans /
       --brand-sans-rtl) resolve first to text faces with no pictographic
       coverage, so the emoji face must lead here explicitly — otherwise the
       glyph falls back to tofu. Native <select> pickers elsewhere in the app
       are drawn by the OS widget and were never affected. */
    font-family: var(--brand-emoji), var(--app-font);
}

/* Only the flag glyph inside an option row takes the emoji stack — the country
   name keeps the normal UI face. Scoping it to this span avoids Segoe UI Emoji
   (which does carry Latin glyphs) capturing the country names on Windows. */
.country-picker__option-flag {
    font-family: var(--brand-emoji), var(--app-font);
    display: inline-block;
    min-width: 1.6em;
}

.country-picker__combo .country-picker__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    padding-inline-start: 0;
    border-radius: 0;
    min-width: 0;
}

.country-picker__input {
    width: 100%;
    box-sizing: border-box;
}

.country-picker__list {
    position: absolute;
    top: calc(100% + 2px);
    inset-inline-start: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--app-surface);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 4px 16px rgba(0 0 0 / 0.10);
    z-index: 100;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

.country-picker__list[hidden] {
    display: none;
}

.country-picker__option {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: var(--app-text-sm);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--app-text);
}

.country-picker__option[hidden] {
    display: none;
}

.country-picker__option:hover,
.country-picker__option[aria-selected="true"] {
    background: var(--app-accent-soft);
}

/* Presentation / visibility controls */
.pres-controls {
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.pres-controls__label {
    font-size: var(--app-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin: 0 0 0.6rem;
}

.pres-toggle {
    margin-top: 0.55rem;
}

.pres-sub {
    margin-left: 1.8rem;
}

[dir="rtl"] .pres-sub {
    margin-left: 0;
    margin-right: 1.8rem;
}

.pres-toggle--sub {
    margin-top: 0.4rem;
}

.pres-sub[hidden] {
    display: none;
}

/* =========================================================
   Invitation Studio — two-pane layout
   ========================================================= */

.studio-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Toolbar */
.studio-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: wrap;
}

.studio-lang-bar {
    display: flex;
    gap: 0.25rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.studio-lang-tab {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 2rem;
    background: transparent;
    cursor: pointer;
    font-size: var(--app-text-sm);
    font-weight: 500;
    color: var(--app-muted);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.studio-lang-tab.is-active {
    background: var(--app-accent);
    color: #fff;
    border-color: var(--app-accent);
}

.studio-mode-toggle {
    display: flex;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.studio-mode-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    transition: background 0.12s, color 0.12s;
}

.studio-mode-btn.is-active {
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 600;
}

.studio-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-inline-start: auto;
}

/* Studio body: inspector + canvas */
.studio-body {
    display: flex;
    min-height: 0;
    flex: 1;
}

/* Inspector pane */
.studio-inspector {
    width: 320px;
    min-width: 260px;
    max-width: 360px;
    border-inline-end: 1px solid var(--app-border);
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.insp-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    overflow-x: auto;
    scrollbar-width: none;
}

.insp-nav::-webkit-scrollbar {
    display: none;
}

.insp-nav-btn {
    flex: 0 0 auto;
    padding: 0.55rem 0.9rem;
    font-size: var(--app-text-sm);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--app-muted);
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}

.insp-nav-btn.is-active,
.insp-nav-btn[aria-pressed="true"] {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    font-weight: 600;
}

.insp-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.insp-panel[hidden] {
    display: none;
}

.insp-panel__head {
    padding: 0.85rem 1rem 0.6rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    position: sticky;
    top: 3.1rem;
    z-index: 5;
}

.insp-panel__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.insp-panel__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.insp-group-label {
    margin: 0.4rem 0 0.2rem;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-muted);
    letter-spacing: 0.03em;
}

.insp-divider {
    border-top: 1px solid var(--app-border);
    margin: 0.6rem 0;
}

/* Canvas pane */
.studio-canvas {
    flex: 1;
    overflow-y: auto;
    background: var(--live-bg, #F3EDE4);
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.studio-canvas__frame {
    width: min(31rem, 100%);
    background: var(--live-card, #FFFCFA);
    color: var(--live-primary, #3A2C28);
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--live-hairline, #E4D6CC) 80%, transparent);
    box-shadow: 0 8px 28px rgba(36,28,24,0.1);
    overflow: hidden;
}

/* Canvas sections */
.canvas-section {
    position: relative;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.14s, background-color 0.14s;
}

/* Edit mode: interactive sections show pointer and hover state */
.studio-layout:not(.studio-preview-mode) .canvas-section:not(.canvas-section--fixed) {
    cursor: pointer;
}

/* Drag handle: low-opacity always-visible hint for draggable sections */
.canvas-section__handle {
    position: absolute;
    inset: 0.35rem auto auto 0.35rem;
    z-index: 2;
    padding: 0.25rem;
    opacity: 0.22;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.35rem;
    cursor: grab;
    color: var(--app-muted);
    transition: opacity 0.12s, box-shadow 0.12s;
}

[dir="rtl"] .canvas-section__handle {
    inset: 0.35rem 0.35rem auto auto;
}

/* Hover: accent outline + subtle tint + full-opacity handle */
.studio-layout:not(.studio-preview-mode) .canvas-section:not(.canvas-section--fixed):hover {
    outline-color: color-mix(in srgb, var(--app-accent) 40%, transparent);
    background-color: color-mix(in srgb, var(--app-accent) 4%, transparent);
}

.studio-layout:not(.studio-preview-mode) .canvas-section:not(.canvas-section--fixed):hover .canvas-section__handle {
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Selected: full accent outline + handle fully visible */
.canvas-section.is-selected {
    outline-color: var(--app-accent);
    background-color: color-mix(in srgb, var(--app-accent) 5%, transparent);
}

.canvas-section.is-selected .canvas-section__handle {
    opacity: 1;
}

.canvas-section__handle:active {
    cursor: grabbing;
}

.canvas-section.canvas-section--dragging {
    opacity: 0.5;
}

.canvas-section.canvas-section--drop-target {
    outline-color: var(--app-accent);
    border-top: 3px solid var(--app-accent);
}

.canvas-section.canvas-section--fixed {
    cursor: default;
    outline: none;
}

.canvas-section__body {
    padding: 1rem 1.25rem;
}

/* Collapse padding when all content in the section is hidden */
.canvas-section__body:not(:has(> :not([hidden]))) {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Preview mode: strip all editor chrome from canvas */
.studio-layout.studio-preview-mode .canvas-section {
    cursor: default !important;
    outline: none !important;
    background-color: transparent !important;
    pointer-events: none;
}

.studio-layout.studio-preview-mode .canvas-section__handle {
    display: none;
}

/* Canvas invitation content */
.canvas-art {
    width: 100%;
    min-height: 9rem;
    background: color-mix(in srgb, var(--live-bg, #F3EDE4) 60%, var(--live-card, #FFFCFA));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.canvas-art img {
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
    display: block;
}

.canvas-art__empty {
    width: 100%;
    min-height: 9rem;
    background: color-mix(in srgb, var(--live-secondary, #8F5B45) 12%, var(--live-bg, #F3EDE4));
}

.canvas-invite-title {
    margin: 0 0 0.25rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--live-primary, #3A2C28);
}

.canvas-invite-organiser {
    margin: 0;
    font-size: 0.95rem;
    color: var(--live-muted, #6B5E57);
}

.canvas-invite-rule {
    width: 2.5rem;
    height: 2px;
    margin: 0.9rem auto 0;
    border: 0;
    border-radius: 999px;
    background: var(--live-secondary, #8F5B45);
    opacity: 0.7;
}

.canvas-invite-message {
    margin: 0;
    font-size: 0.95rem;
    color: var(--live-primary, #3A2C28);
    white-space: pre-wrap;
}

.canvas-invite-meta {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    color: var(--live-muted, #6B5E57);
}

.canvas-invite-greeting {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--live-muted, #6B5E57);
}

.canvas-note {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    text-align: center;
    margin: 0;
}

/* Preview mode: inspector hidden, canvas centred, all editor chrome gone */
.studio-layout.studio-preview-mode .studio-inspector {
    display: none;
}

.studio-layout.studio-preview-mode .studio-canvas {
    align-items: center;
}

.studio-layout.studio-preview-mode .canvas-edit-hint,
.studio-layout.studio-preview-mode .canvas-note {
    display: none;
}

/* Edit hint — only shown in edit mode (CSS default: visible) */
.canvas-edit-hint {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    text-align: center;
    margin: 0;
    opacity: 0.7;
}

/* Typography controls */
.typo-group {
    margin-top: 0.5rem;
}

.typo-group__label {
    font-size: var(--app-text-sm);
    font-weight: 600;
    color: var(--app-text);
    margin: 0 0 0.35rem;
}

.typo-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.typo-row__label {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    min-width: 3.5rem;
}

.typo-font-opts,
.typo-align-opts {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.typo-opt {
    font-size: var(--app-text-sm);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
}

.typo-size-slider {
    flex: 1;
    accent-color: var(--app-accent);
}

.typo-size-display {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    min-width: 3rem;
    text-align: end;
}

/* Tablet: stack inspector above canvas */
@media (max-width: 56rem) {
    .studio-body {
        flex-direction: column;
    }

    .studio-inspector {
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--app-border);
        max-height: 50vh;
    }

    .studio-canvas {
        padding: 1rem;
    }
}

/* Mobile-only elements: hidden on desktop */
.studio-sheet-header,
.studio-sheet-close,
.studio-sheet-backdrop,
.studio-more-btn {
    display: none;
}

/* ── Mobile Studio: bottom-sheet inspector (< 48rem / 768px) ─── */
@media (max-width: 47.99rem) {
    /* Toolbar: compact single row, no wrap */
    .studio-toolbar {
        padding: 0.45rem 0.75rem;
        gap: 0.4rem;
        flex-wrap: nowrap;
        z-index: 51; /* above backdrop */
    }

    .studio-lang-bar {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        min-width: 0;
    }

    .studio-lang-bar::-webkit-scrollbar {
        display: none;
    }

    .studio-mode-toggle {
        flex: none;
    }

    .studio-toolbar-actions {
        flex: none;
        margin-left: 0;
        gap: 0.35rem;
    }

    /* Full preview link hidden — Edit/Preview mode toggle covers it */
    .studio-action-fullpreview {
        display: none !important;
    }

    /* More button: shown on mobile */
    .studio-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.15rem;
        height: 2.15rem;
        border: 1px solid var(--app-border);
        border-radius: 0.45rem;
        background: transparent;
        cursor: pointer;
        color: var(--app-text);
        padding: 0;
        flex: none;
    }

    /* Studio body: override tablet column — canvas takes full width, inspector is fixed */
    .studio-body {
        flex-direction: row;
        flex: 1;
        min-height: 0;
        position: relative;
    }

    /* Canvas: full width, padding keeps content above bottom dock */
    .studio-canvas {
        width: 100%;
        flex: 1;
        min-height: 0;
        padding: 0.75rem 0.65rem calc(var(--app-dock-h, 3.55rem) + env(safe-area-inset-bottom) + 1.25rem);
    }

    /* Inspector: bottom sheet, hidden off-screen by default */
    .studio-inspector {
        position: fixed;
        bottom: calc(var(--app-dock-h, 3.55rem) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 72vh;
        border-right: none;
        border-bottom: none;
        border-top: none;
        border-radius: 1.1rem 1.1rem 0 0;
        box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.14), 0 0 0 1px color-mix(in srgb, var(--app-border) 60%, transparent);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 50;
        transform: translateY(110%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Sheet open: slide up */
    .studio-layout.mobile-sheet-open .studio-inspector {
        transform: translateY(0);
    }

    /* Backdrop: dims canvas when sheet is open */
    .studio-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: transparent;
        pointer-events: none;
        transition: background 0.3s;
    }

    .studio-layout.mobile-sheet-open .studio-sheet-backdrop {
        background: rgba(0, 0, 0, 0.28);
        pointer-events: auto;
    }

    /* Sheet header: drag handle + Done button */
    .studio-sheet-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 1rem 0.3rem;
        background: var(--app-surface);
        border-radius: 1.1rem 1.1rem 0 0;
        position: sticky;
        top: 0;
        z-index: 12;
        border-bottom: 1px solid var(--app-border);
    }

    .studio-sheet-handle {
        display: block;
        width: 2.5rem;
        height: 4px;
        background: var(--app-border);
        border-radius: 999px;
    }

    .studio-sheet-close {
        display: block;
        position: absolute;
        inset-inline-end: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--app-accent);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.35rem 0;
        line-height: 1;
    }

    /* Inspector nav: sticky below sheet header (approx 2.6rem header) */
    .insp-nav {
        top: 2.6rem;
    }

    /* Inspector panel head: sticky below nav (header ~2.6rem + nav ~2.5rem) */
    .insp-panel__head {
        top: 5.1rem;
    }

    /* Preview mode: canvas full-screen, no sheet */
    .studio-layout.studio-preview-mode .studio-inspector {
        display: none !important;
    }

    .studio-layout.studio-preview-mode .studio-canvas {
        padding-bottom: calc(var(--app-dock-h, 3.55rem) + env(safe-area-inset-bottom) + 0.5rem);
    }

    /* Canvas card: slightly reduced radius on mobile */
    .studio-canvas__frame {
        border-radius: 0.9rem;
    }

    /* canvas edit hint: hide on mobile, not needed with tap-to-edit */
    .canvas-edit-hint {
        display: none;
    }
}

/* ── WhatsApp Design page ─────────────────────────────────────────── */
/* WhatsApp Design page — two-column layout */
.wa-design-body {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.wa-editor-col,
.wa-preview-col {
    min-width: 0;
}

.wa-editor-card {
    margin-bottom: 0;
    padding: 1.5rem 1.35rem 1.75rem;
}

.wa-msg-lang-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--app-text-muted, #706558);
}

.wa-lang-tabs {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-line);
}

/* WA design tabs use underline style, not filled pill — override the filled rule */
.wa-lang-tabs .lang-tab {
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    background: none;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
}
.wa-lang-tabs .lang-tab.is-active {
    background: none;
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    font-weight: 600;
}

.wa-panel {
    outline: none;
}

.wa-design-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.wa-preview-card {
    margin-bottom: 0;
}

/* Override .wa-preview top rule when inside its own card */
.wa-preview-card .wa-preview {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.wa-preview-card .wa-preview__body {
    min-height: 5rem;
}

@media (min-width: 52rem) {
    .wa-design-body {
        grid-template-columns: minmax(0, 1fr) 18.5rem;
    }

    .wa-preview-col {
        position: sticky;
        top: 1.5rem;
    }

    .wa-editor-card {
        padding: 1.75rem 1.85rem 2rem;
    }
}

/* Discard confirmation dialog */
.wa-discard-dialog {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    padding: 0;
    max-width: min(22rem, 90vw);
    width: 100%;
}

.wa-discard-dialog::backdrop {
    background: rgba(36, 28, 24, 0.35);
}

.wa-discard-inner {
    padding: 1.75rem 1.5rem 1.5rem;
}

.wa-discard-title {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.3;
}

.wa-discard-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.wa-discard-go {
    text-align: center;
    color: var(--app-muted);
}

@media (min-width: 28rem) {
    .wa-discard-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .wa-discard-go {
        text-align: start;
    }
}

/* ── Event form: label row with info button (Item 3) ── */
.ef-label-row {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
    margin-block-end: 0.25rem;
}

.ef-label-row label {
    margin-block-end: 0;
}

.ef-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    border-radius: var(--app-radius-pill);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ef-info-btn:hover,
.ef-info-btn:focus-visible {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    outline: none;
}

.ef-status-popover {
    background: var(--app-surface);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    padding: var(--app-space-3) var(--app-space-4);
    margin-block-end: var(--app-space-3);
    max-width: 36rem;
}

.ef-status-popover p {
    margin: 0 0 0.45em;
    font-size: var(--app-text-sm);
    color: var(--app-text);
    line-height: var(--app-leading);
}

.ef-status-popover p:last-child {
    margin-bottom: 0;
}

/* ── Event form: custom type reveal wrapper (Items 1-2) ── */
#event_type_custom_wrap {
    margin-block-start: var(--app-space-3);
}

/* ── Event form: raw time input — accessibility/no-JS fallback only;
   the premium trigger + dialog below replace it visually whenever a
   native <dialog> is supported (see EventForm::render()'s own script) ── */
.ef-time-input {
    width: 100%;
}

/* ── Event form: premium time trigger (replaces the raw input) ── */
.ef-time-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--app-control-h);
    padding: 0.65rem 0.85rem;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ef-time-trigger:hover {
    border-color: var(--app-line-strong);
}

.ef-time-trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-focus) 70%, var(--app-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-focus) 22%, transparent);
}

.ef-time-trigger__icon {
    flex: none;
    color: var(--app-muted);
}

.ef-time-trigger__value {
    flex: 1;
    font-weight: 600;
}

.ef-time-trigger__value--placeholder {
    font-weight: 400;
    color: var(--app-muted);
}

.ef-time-trigger__chevron {
    flex: none;
    color: var(--app-muted);
    transform: rotate(-90deg);
}

/* ── Event form: premium time picker dialog ──
   A calm, wheel-based time selector (hour/minute columns, scroll-snapped,
   the centred value highlighted by a fixed band). Every control here is
   type="button" and there is deliberately no <form> inside this <dialog>
   at all — the Create/Edit Event page is already one big <form>, and a
   nested <form> is invalid HTML that the browser's parser silently drops,
   which is what broke the previous "Done" button (confirmed against the
   live rendered DOM: the nested form never actually existed in the DOM
   tree, and its submit button fell back to the OUTER form). The wheels'
   own scroll position is draft-only state — nothing here ever touches the
   real `event_time` field except the Set/Clear handlers in the script
   below, both of which call dialog.close() explicitly. */
.ef-time-dialog {
    --ef-wheel-item-h: 2.75rem;
    --ef-wheel-rows: 5;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: 0 20px 60px rgba(36, 28, 24, 0.22);
    padding: 0;
    max-width: min(23rem, 92vw);
    width: 100%;
}

.ef-time-dialog::backdrop {
    background: rgba(36, 28, 24, 0.4);
}

.ef-time-dialog__body {
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
}

.ef-time-dialog__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--app-text);
    text-align: center;
}

.ef-time-dialog__wheels-wrap {
    position: relative;
}

.ef-time-dialog__selection-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--ef-wheel-item-h);
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--brand-bronze) 9%, transparent);
    border-block: 1px solid color-mix(in srgb, var(--brand-bronze) 35%, var(--app-line));
    pointer-events: none;
    z-index: 0;
}

.ef-time-dialog__wheels {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ef-wheel {
    height: calc(var(--ef-wheel-item-h) * var(--ef-wheel-rows));
    width: 4.5rem;
    /* The wheel drives its own motion (drag, wheel, trackpad, keys — see
       EventForm makeWheel): no native scrolling or scroll-snap to fight it,
       and touch-action none so a vertical drag moves the wheel, not the page. */
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    cursor: grab;
    padding-block: calc(var(--ef-wheel-item-h) * (var(--ef-wheel-rows) - 1) / 2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black calc(var(--ef-wheel-item-h) * 0.9), black calc(100% - var(--ef-wheel-item-h) * 0.9), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black calc(var(--ef-wheel-item-h) * 0.9), black calc(100% - var(--ef-wheel-item-h) * 0.9), transparent 100%);
    border-radius: var(--app-radius-sm);
}

.ef-wheel::-webkit-scrollbar {
    display: none;
}

.ef-wheel.is-dragging,
.ef-wheel.is-dragging .ef-wheel__item {
    cursor: grabbing;
}

@media (hover: hover) {
    .ef-wheel:hover {
        background: color-mix(in srgb, var(--brand-bronze) 4%, transparent);
    }
}

.ef-wheel:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-focus) 55%, transparent);
}

.ef-wheel__item {
    height: var(--ef-wheel-item-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-text);
    cursor: pointer;
    user-select: none;
}

.ef-time-dialog__colon {
    position: relative;
    z-index: 1;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--app-text);
}

.ef-time-dialog__ampm {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-inline-start: 0.35rem;
}

.ef-time-dialog__ampm-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    color: var(--app-muted);
    font-weight: 650;
    font-size: 0.85rem;
    cursor: pointer;
}

.ef-time-dialog__ampm-btn.is-active {
    border-color: var(--brand-bronze);
    background: color-mix(in srgb, var(--brand-bronze) 14%, var(--app-surface));
    color: var(--app-text);
}

.ef-time-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.ef-time-dialog__actions .button-primary {
    flex: 1;
}

/* Mobile web: a bottom-sheet, not a tiny desktop popup squeezed onto a
   phone — full width, anchored to the bottom edge, safe-area aware. */
@media (max-width: 47.9375rem) {
    .ef-time-dialog {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .ef-time-dialog__body {
        padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
        max-height: 75vh;
    }

    .ef-wheel {
        width: 5rem;
    }
}

/* ── Events list toolbar ─────────────────────────────────── */
.event-toolbar {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

@media (min-width: 48rem) {
    .event-toolbar {
        grid-template-columns: 1fr minmax(14rem, 20rem) auto;
        align-items: end;
    }
}

@media (min-width: 64rem) {
    .event-toolbar {
        grid-template-columns: 1fr auto;
    }

    .event-toolbar .et-sort {
        display: none;
    }
}

.event-toolbar .filter-field {
    margin: 0;
}

/* ── Export page ─────────────────────────────────────────── */
.export-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    text-decoration: none;
    margin-block-end: var(--app-space-4);
    transition: color 0.15s;
}

.export-back::before {
    content: '←';
    font-size: 1.1em;
    line-height: 1;
}

[dir="rtl"] .export-back::before {
    content: '→';
}

.export-back:hover,
.export-back:focus-visible {
    color: var(--app-text);
}

.export-wrap {
    max-width: 38rem;
}

/* ── Assign Invitation Version (bulk) ────────────────────────── */
/* Same "focused column inside the wide app shell" convention as
   .export-wrap — a single field + two actions doesn't need the full
   page width, but the page itself should still use the normal wide
   AppShell so it doesn't collapse into the narrow auth/.panel layout. */
.assign-variant__wrap {
    max-width: 34rem;
}

.format-picker {
    display: grid;
    gap: 0.6rem;
    margin-block: var(--app-space-3) var(--app-space-4);
}

@media (min-width: 40rem) {
    .format-picker {
        grid-template-columns: 1fr 1fr;
    }
}

.format-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--app-surface);
    border: 1.5px solid var(--app-line);
    border-radius: var(--app-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.format-option:hover {
    border-color: var(--app-line-strong);
}

.format-option:has(input:checked),
.format-option.is-selected {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.format-option__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.format-option__content {
    flex: 1;
    min-width: 0;
}

.format-option__title {
    display: block;
    font-weight: 650;
    font-size: var(--app-text-md);
    color: var(--app-text);
}

.format-option__desc {
    display: block;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    margin-block-start: 0.2rem;
    line-height: var(--app-leading);
}

.format-option__mark {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1.5px solid var(--app-line);
    margin-block-start: 0.15rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.format-option:has(input:checked) .format-option__mark,
.format-option.is-selected .format-option__mark {
    border-color: var(--app-accent);
    background: var(--app-accent);
    box-shadow: inset 0 0 0 3px var(--app-accent-soft);
}

.export-note-row {
    margin-bottom: 0;
}

.export-note-row .check {
    margin-top: 0;
}

.export-note-help {
    display: block;
    margin-block-start: 0.15rem;
    font-weight: 400;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

/* ── Inbox nav badge ─────────────────────────────────────────── */
.app-nav__link--has-badge {
    position: relative;
}

.inbox-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    margin-inline-start: 0.3rem;
    border-radius: 99px;
    background: var(--app-bad);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.inbox-dock-badge {
    position: absolute;
    top: 0.15rem;
    inset-inline-end: 0.5rem;
    min-width: 0.9rem;
    height: 0.9rem;
    padding: 0 0.2rem;
    border-radius: 99px;
    background: var(--app-bad);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 0.9rem;
    text-align: center;
}

/* ── Tab bar (shared: inbox + admin messages) ─────────────────── */
.tab-bar {
    display: flex;
    gap: 0.1rem;
    border-bottom: 1.5px solid var(--app-line);
    margin-block: 0.75rem 1rem;
    overflow-x: auto;
}

.tab-link {
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    color: var(--app-muted);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1.5px;
}

.tab-link:hover,
.tab-link:focus-visible {
    color: var(--app-text);
}

.tab-link.is-active {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    font-weight: 600;
}

/* ── Inbox view wrapper ───────────────────────────────────── */
.inbox-view {
    max-width: 52rem;
    margin-inline: auto;
    padding: 0 0.25rem 3rem;
}

.inbox-view__head {
    margin-bottom: 1.35rem;
}

.inbox-view__title {
    font-family: var(--app-display);
    font-size: clamp(1.4rem, 3.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Inbox tabs (pill style, scoped) ──────────────────────── */
.inbox-tabs {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1.15rem;
    padding: 0.22rem;
    background: color-mix(in srgb, var(--app-line) 55%, var(--app-bg));
    border-radius: var(--app-radius);
    width: fit-content;
}

.inbox-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.85rem;
    border-radius: calc(var(--app-radius) - 0.18rem);
    color: var(--app-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--app-ease), color var(--app-ease), box-shadow var(--app-ease);
    white-space: nowrap;
}

.inbox-tab:hover {
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-card) 55%, transparent);
}

.inbox-tab.is-active {
    background: var(--app-card);
    color: var(--app-text);
    font-weight: 600;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--app-text) 10%, transparent),
                0 0 0 0.5px color-mix(in srgb, var(--app-line) 80%, transparent);
}

/* ── Inbox list ───────────────────────────────────────────── */
.inbox-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    overflow: hidden;
}

.inbox-item {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--app-text);
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
    border-inline-start: 3px solid transparent;
    transition: background 0.12s;
}

.inbox-item:last-child {
    border-bottom: 0;
}

.inbox-item:hover,
.inbox-item:focus-visible {
    background: color-mix(in srgb, var(--app-accent) 4%, var(--app-card));
}

.inbox-item--unread {
    background: color-mix(in srgb, var(--app-accent) 3%, var(--app-card));
}

.inbox-item--unread .inbox-item__subject {
    font-weight: 650;
}

.inbox-item--urgent    { border-inline-start-color: var(--app-bad); }
.inbox-item--important { border-inline-start-color: var(--app-warn); }

.inbox-item__lead {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inbox-item__dot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--app-accent);
    flex-shrink: 0;
}

.inbox-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.inbox-item__from {
    font-size: 0.73rem;
    font-weight: 650;
    color: var(--app-muted);
    letter-spacing: 0.04em;
}

.inbox-item__subject {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-item__ack-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 0.1rem 0.42rem;
    border-radius: var(--app-radius-sm);
    background: color-mix(in srgb, var(--app-ok, #28a745) 12%, transparent);
    color: var(--app-ok, #28a745);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 0.12rem;
    width: fit-content;
}

.inbox-item__trail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.inbox-item__date {
    font-size: 0.78rem;
    color: var(--app-muted);
    white-space: nowrap;
}

/* ── Inbox empty state ────────────────────────────────────── */
.inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
}

.inbox-empty .empty-state__icon {
    color: var(--app-muted);
    opacity: 0.3;
    margin-bottom: 1.2rem;
}

.inbox-empty__title {
    font-family: var(--app-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--app-text);
    margin: 0 0 0.45rem;
}

.inbox-empty__help {
    font-size: 0.875rem;
    color: var(--app-muted);
    margin: 0;
    max-width: 22rem;
    line-height: 1.55;
}

/* ── Inbox responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
    .inbox-view {
        padding-inline: 0;
    }

    .inbox-item {
        padding: 0.85rem 1rem;
        gap: 0.6rem;
    }

    .inbox-tabs {
        width: 100%;
    }

    .inbox-tab {
        flex: 1;
        justify-content: center;
        padding-inline: 0.5rem;
    }
}

/* ── Message detail ───────────────────────────────────────────── */
.msgs-message {
    max-width: 52rem;
}

.msgs-message__head {
    margin-bottom: 1.5rem;
}

.msgs-message__subject {
    font-family: var(--app-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.4rem 0 0.35rem;
    line-height: 1.25;
}

.msgs-message__meta {
    color: var(--app-muted);
    font-size: 0.9rem;
    margin: 0;
}

.msgs-message__body {
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
}

.msgs-message__actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-line);
}

/* ── Admin compose ────────────────────────────────────────────── */
.msgs-compose-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
}

.msgs-section {
    padding: 1.25rem;
}

.msgs-section__title {
    font-size: 0.85rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted);
    margin: 0 0 1rem;
}

.msgs-body-textarea {
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    width: 100%;
    min-height: 12rem;
    resize: vertical;
}

.msgs-actions {
    padding-bottom: 1.5rem;
}

/* ── Language tabs ────────────────────────────────────────────── */
.lang-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1.5px solid var(--app-line);
    margin-bottom: 1rem;
}

.lang-tab {
    padding: 0.4rem 0.85rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--app-muted);
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    transition: color 0.12s;
}

.lang-tab:hover {
    color: var(--app-text);
}

.lang-tab.is-active {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
    font-weight: 600;
}

/* ── Attachment list ──────────────────────────────────────────── */
.attach-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.attach-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    background: color-mix(in srgb, var(--app-bg) 60%, var(--app-card));
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    font-size: 0.88rem;
}

.attach-row__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-row__meta {
    color: var(--app-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.attach-row__remove {
    display: inline;
    margin: 0;
    padding: 0;
}

.attach-row__download {
    color: var(--app-accent);
    text-decoration: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-row__download:hover {
    text-decoration: underline;
}

/* ── Admin messages list ──────────────────────────────────────── */
.msgs-row__body {
    flex: 1;
    min-width: 0;
}

.msgs-meta-badges {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.msgs-report-dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 0;
}

.msgs-report-dl > div {
    background: color-mix(in srgb, var(--app-bg) 60%, var(--app-card));
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    padding: 0.75rem 1rem;
}

.msgs-report-dl dt {
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-muted);
    margin-bottom: 0.25rem;
}

.msgs-report-dl dd {
    font-size: 1.6rem;
    font-family: var(--app-display);
    font-weight: 600;
    margin: 0;
}

/* ── Message content blocks (admin view) ──────────────────────── */
.msgs-lang-block {
    padding-block: 0.75rem;
    border-top: 1px solid var(--app-line);
}

.msgs-lang-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.msgs-lang-block__label {
    margin-bottom: 0.35rem;
}

.msgs-lang-block__subject {
    font-family: var(--app-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.msgs-lang-block__body {
    line-height: 1.65;
    white-space: pre-wrap;
}

.msgs-attachments {
    margin-top: 1rem;
}

/* ── Delivery options checkboxes ─────────────────────────────── */
.msgs-delivery-options {
    border: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.msgs-delivery-options legend {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--app-accent);
    flex-shrink: 0;
}

/* ── Premium target selector ─────────────────────────────────── */
.tgt-selector {
    position: relative;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    transition: border-color 0.15s;
}

.tgt-selector:focus-within {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 15%, transparent);
}

.tgt-selector__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem 0;
    min-height: 2.2rem;
}

.tgt-selector__empty {
    font-size: 0.85rem;
    color: var(--app-muted);
    padding: 0.2rem 0;
    align-self: center;
}

.tgt-selector__search {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.45rem 0.65rem;
    font-size: 0.92rem;
    color: var(--app-text);
    outline: none;
    box-sizing: border-box;
}

.tgt-selector__search::placeholder {
    color: var(--app-muted);
}

.tgt-selector__dropdown {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-md);
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
}

.tgt-selector__list {
    list-style: none;
    padding: 0.3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tgt-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.1s;
}

.tgt-option:hover,
.tgt-option:focus {
    background: color-mix(in srgb, var(--app-accent) 8%, var(--app-card));
    outline: none;
}

.tgt-option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--app-focus);
}

.tgt-option.is-selected {
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-card));
}

.tgt-option__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgt-option__sub {
    font-size: 0.78rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.tgt-option__check {
    color: var(--app-accent);
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.1s;
    flex-shrink: 0;
}

.tgt-option.is-selected .tgt-option__check {
    opacity: 1;
}

.tgt-option--empty {
    color: var(--app-muted);
    cursor: default;
    font-size: 0.85rem;
}

.tgt-option--empty:hover,
.tgt-option--empty:focus {
    background: none;
}

/* Chips */
.tgt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-bg));
    border: 1px solid color-mix(in srgb, var(--app-accent) 30%, transparent);
    border-radius: 99px;
    padding: 0.15rem 0.5rem 0.15rem 0.65rem;
    font-size: 0.82rem;
    color: var(--app-text);
    max-width: 16rem;
}

.tgt-chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgt-chip__remove {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    color: var(--app-muted);
    font-size: 1rem;
    flex-shrink: 0;
    transition: color 0.1s;
}

.tgt-chip__remove:hover {
    color: var(--app-text);
}

[dir="rtl"] .tgt-selector__dropdown {
    text-align: right;
}

/* ── Login popup modal ───────────────────────────────────────── */
.inbox-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.inbox-popup-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.inbox-popup {
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: calc(var(--app-radius) * 1.5);
    box-shadow: var(--app-shadow-lg, 0 20px 60px rgba(0,0,0,0.18));
    padding: 1.75rem 2rem 1.5rem;
    max-width: 440px;
    width: 100%;
    transform: translateY(12px);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inbox-popup-overlay.is-open .inbox-popup {
    transform: translateY(0);
}

.inbox-popup__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.inbox-popup__from {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--app-muted);
}

.inbox-popup__subject {
    font-family: var(--app-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    line-height: 1.3;
    color: var(--app-text);
}

.inbox-popup__preview {
    font-size: 0.9rem;
    color: var(--app-muted);
    line-height: 1.55;
    margin: 0 0 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inbox-popup__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .inbox-popup {
        padding: 1.25rem 1.25rem 1rem;
    }
    .inbox-popup__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .inbox-popup__actions .button,
    .inbox-popup__actions .button-quiet {
        text-align: center;
    }
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 1.25rem 0;
    flex-wrap: wrap;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: var(--app-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--app-text);
    text-decoration: none;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    cursor: pointer;
}

.page-link:hover {
    background: color-mix(in srgb, var(--app-accent) 8%, var(--app-card));
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.page-link.is-active {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
    font-weight: 700;
    cursor: default;
}

.page-link--disabled {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: var(--app-card);
    cursor: default;
    opacity: 0.45;
}

/* ── Archive-blocked notice ──────────────────────────────────── */
.msgs-archive-blocked {
    margin-top: 0.25rem;
    color: var(--app-muted);
    font-size: 0.88rem;
}

/* ── Compose: field-label (used without wrapping input) ──────── */
.field-label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

/* Native <select> visible until JS takes over (progressive enhancement) */
.tgt-native-select {
    width: 100%;
    min-height: 8rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    padding: 0.25rem;
    font-size: 0.9rem;
    background: var(--app-card);
    color: var(--app-text);
    box-sizing: border-box;
}

/* Hidden once JS initialises the custom selector */
.tgt-native-select--js {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}

/* ── Inbox message reading page ──────────────────────────────── */

/* Reading column — centred within app-main, comfortable max-width */
.msg-reading {
    max-width: 52rem;
    margin-inline: auto;
    padding: 1.75rem 1.25rem 3.5rem;
}

/* Article: no bounding box; content breathes */
.msg-article {
    margin-top: 0.5rem;
}

/* Header: generous spacing, clear hierarchy */
.msg-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-line);
}

/* Sender · date line */
.msg-sender-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--app-muted);
    margin: 0 0 0.8rem;
}

.msg-sender-line__sep {
    opacity: 0.4;
    font-weight: 400;
}

.msg-sender-line__date {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Priority badge row — compact, above title */
.msg-priority {
    margin: 0 0 0.6rem;
}

/* Subject/title — editorial size */
.msg-title {
    font-family: var(--app-display);
    font-size: clamp(1.55rem, 3.8vw, 2.15rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--app-text);
}

/* Message body — premium reading treatment */
.msg-body {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--app-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

/* Attachment section */
.msg-attachments {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--app-line);
}

.msg-attachments__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--app-muted);
    margin: 0 0 0.65rem;
}

.msg-attach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Premium attachment download card */
.msg-attach-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    background: color-mix(in srgb, var(--app-bg) 50%, var(--app-card));
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    text-decoration: none;
    color: var(--app-text);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.msg-attach-card:hover,
.msg-attach-card:focus-visible {
    background: var(--app-card);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 10%, transparent);
    outline: none;
}

.msg-attach-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent);
    opacity: 0.7;
}

.msg-attach-meta {
    flex: 1;
    min-width: 0;
}

.msg-attach-name {
    font-size: 0.92rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.msg-attach-dl {
    flex: none;
    color: var(--app-muted);
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.msg-attach-card:hover .msg-attach-dl,
.msg-attach-card:focus-visible .msg-attach-dl {
    color: var(--app-accent);
}

/* Acknowledgement zone */
.msg-ack-area {
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    background: color-mix(in srgb, var(--app-accent) 5%, var(--app-card));
    border: 1px solid color-mix(in srgb, var(--app-accent) 18%, transparent);
    border-radius: var(--app-radius);
}

.msg-ack-prompt {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--app-text);
    margin: 0 0 1rem;
}

/* Confirmed state — quiet, no box */
.msg-ack-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.75rem;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--app-ok);
}

.msg-ack-confirmed__icon {
    flex: none;
}

/* Archive — low emphasis, visually secondary */
.msg-secondary-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 55%, transparent);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .msg-reading {
        padding: 1.1rem 0.85rem 2.5rem;
    }

    .msg-header {
        margin-bottom: 1.25rem;
        padding-bottom: 1.1rem;
    }

    .msg-ack-area {
        padding: 1.1rem 1rem;
    }

    .msg-attach-card {
        padding: 0.6rem 0.75rem;
    }
}

/* ── RTL ─────────────────────────────────────────────────────── */
[dir="rtl"] .msg-sender-line {
    /* flex direction is already row; logical gap handles spacing */
}

[dir="rtl"] .msg-ack-confirmed {
    /* inline-flex with gap: RTL handled automatically by dir attr */
}

/* ── WAC comms badge-button ─────────────────────────────────── */
.badge--info {
    background: color-mix(in srgb, var(--app-ok) 12%, var(--app-card));
    color: var(--app-ok);
    border-color: color-mix(in srgb, var(--app-ok) 20%, transparent);
}

.wac-comms-btn {
    cursor: pointer;
    border: none;
    font: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.wac-comms-btn:hover,
.wac-comms-btn:focus-visible {
    text-decoration-color: currentColor;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── WAC comms history modal ────────────────────────────────── */
.wac-comms-modal {
    width: min(90vw, 34rem);
}

.wac-comms-modal__body {
    margin: 0 0 1rem;
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.wac-comms-modal__group {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--app-muted);
    font-style: italic;
}

.wac-comms-modal__empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--app-muted);
}

/* Timeline — one entry per interaction, newest first. A hairline rule with a
   small channel dot; the words carry the state, colour only reinforces it.
   Logical properties throughout, so RTL mirrors without extra rules. */
.comms-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.comms-timeline__item {
    position: relative;
    padding-block: 0.55rem;
    padding-inline-start: 1.15rem;
    border-inline-start: 1px solid var(--app-line);
    margin-inline-start: 0.35rem;
}

.comms-timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.3rem;
    top: 0.85rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--app-card);
    border: 1.5px solid var(--app-muted);
}

.comms-timeline__item[data-channel="whatsapp"]::before {
    border-color: var(--app-whatsapp);
}

.comms-timeline__item[data-channel="email"]::before {
    border-color: var(--app-text);
}

/* A Sequence is a plan, not a message: a small square marker, not a dot. */
.comms-timeline__item[data-channel="sequence"]::before {
    border-radius: 2px;
    transform: rotate(45deg) scale(0.9);
    border-color: var(--app-accent);
}

.comms-timeline__item[data-state="failed"]::before {
    border-color: var(--app-bad);
}

.comms-timeline__head {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.1rem 0.75rem;
}

.comms-timeline__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-text);
}

.comms-timeline__item[data-state="failed"] .comms-timeline__title {
    color: var(--app-bad);
}

.comms-timeline__when {
    font-size: 0.76rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.comms-timeline__context {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--app-muted);
    overflow-wrap: anywhere;
}

.comms-timeline__steps {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    font-size: 0.76rem;
    color: var(--app-muted);
}

.comms-timeline__steps li {
    display: inline-flex;
    gap: 0.3rem;
}

.comms-timeline__step-label {
    font-weight: 600;
    color: var(--app-text);
}

.comms-timeline__note {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--app-bad);
}

/* RSVP section */
.wac-comms-modal__rsvp {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-line);
}

.wac-comms-modal__rsvp-heading {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.wac-comms-modal__rsvp-detail {
    margin: 0;
    font-size: 0.88rem;
    color: var(--app-text);
}

@media (min-width: 48rem) {
    .wac-comms-modal {
        width: min(90vw, 34rem);
    }
}

/* ── "Manage labels" — Guest List row-menu entry point ──────────────
   Same guest-note-modal shell (mobile bottom sheet → centred dialog at
   48rem); reuses the label-menu__* option/checkbox styles verbatim since
   both are "a searchable list of this event's labels", just in a dialog
   instead of a dropdown. */
.manage-labels-modal__create {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.manage-labels-modal__create-input {
    flex: 1;
    min-width: 0;
    min-height: 2.4rem;
    font-size: 0.9rem;
}

.manage-labels-modal__search {
    margin: 0 0 0.4rem;
}

.manage-labels-modal__list {
    border-top: 1px solid var(--app-line, rgba(0, 0, 0, 0.08));
    padding-top: 0.3rem;
}

.manage-labels-modal__list .label-menu__option {
    opacity: 1;
    transition: opacity var(--brand-ease, 0.15s ease);
}

.manage-labels-modal__list .label-menu__option[data-pending] {
    opacity: 0.55;
    pointer-events: none;
}

.manage-labels-modal__empty {
    padding: 0.6rem 0.2rem;
    font-size: 0.85rem;
    color: var(--app-muted);
}

.manage-labels-modal__error {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--app-bad);
}

@media (min-width: 48rem) {
    .manage-labels-modal {
        width: min(90vw, 26rem);
    }
}


/* ── Platform Messages: Language delivery mode selector ──────────── */
.msgs-delivery-mode {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.msgs-delivery-mode__option {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--app-line);
    border-radius: var(--app-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    position: relative;
}

.msgs-delivery-mode__option:has(input:checked),
.msgs-delivery-mode__option.is-selected {
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 5%, var(--app-card));
}

.msgs-delivery-mode__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.msgs-delivery-mode__label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text);
}

.msgs-delivery-mode__help {
    font-size: 0.84rem;
    color: var(--app-muted);
    line-height: 1.45;
}

.msgs-source-lang-field {
    margin-top: 0;
}

.msgs-source-lang-select {
    min-width: 14rem;
}

/* ── Platform Messages: Language tabs (compose + view) ───────────── */
.msgs-lang-tabs-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.msgs-lang-tabs {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
}

.msgs-lang-tabs::-webkit-scrollbar {
    display: none;
}

.msgs-lang-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    position: relative;
}

.msgs-lang-tab--loading {
    opacity: 0.55;
}

.msgs-lang-tab--loading::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--app-accent), transparent);
    background-size: 200% 100%;
    animation: msgs-loading-bar 1s linear infinite;
}

@keyframes msgs-loading-bar {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.lang-tab__badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.55;
}

.lang-tab__name {
    font-size: 0.88rem;
}

.lang-tab__state {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 100px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.lang-tab__state--original {
    background: color-mix(in srgb, var(--app-accent) 15%, transparent);
    color: var(--app-accent);
}

.lang-tab__state--auto {
    background: color-mix(in srgb, var(--app-ok) 15%, transparent);
    color: var(--app-ok);
}

.lang-tab__state--edited {
    background: color-mix(in srgb, var(--app-warn) 15%, transparent);
    color: color-mix(in srgb, var(--app-warn) 90%, black);
}

.lang-tab__state--failed {
    background: color-mix(in srgb, var(--app-bad) 12%, transparent);
    color: var(--app-bad);
}

/* ── Active-tab contrast: dark fill + light text for msgs tabs ───── */
/* Overrides the generic underline-style .lang-tab.is-active rule     */
/* (lower in the cascade) that would put dark text on dark background. */
.msgs-lang-tabs .lang-tab.is-active {
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-bottom-color: transparent;
}

.msgs-lang-tabs .lang-tab.is-active:hover,
.msgs-lang-tabs .lang-tab.is-active:focus-visible {
    background: color-mix(in srgb, var(--app-accent) 85%, #fff);
    color: var(--app-accent-text);
}

.msgs-lang-tabs .lang-tab.is-active .lang-tab__badge {
    opacity: 0.75;
}

.msgs-lang-tabs .lang-tab.is-active .lang-tab__state {
    background: rgba(247, 243, 236, 0.18);
    color: var(--app-accent-text);
}

.msgs-lang-tabs .lang-tab.is-active .lang-tab__state--failed {
    background: rgba(200, 50, 50, 0.40);
    color: #ffd0d0;
}

/* ── Translate button ─────────────────────────────────────────────── */
.msgs-translate-btn {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
    font-size: 0.88rem;
}

/* ── Translation status area ──────────────────────────────────────── */
.msgs-translate-status {
    margin: 0.65rem 0 0.25rem;
}

.msgs-translate-status__msg {
    font-size: 0.88rem;
    color: var(--app-muted);
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--app-radius-sm);
    background: color-mix(in srgb, var(--app-bg) 70%, var(--app-card));
    border: 1px solid var(--app-line);
}

.msgs-translate-status__msg--loading {
    animation: msgs-status-pulse 1.6s ease-in-out infinite;
}

@keyframes msgs-status-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.msgs-translate-status__msg--warn {
    border-color: color-mix(in srgb, var(--app-warn) 40%, var(--app-line));
    color: color-mix(in srgb, var(--app-warn) 80%, black);
    background: color-mix(in srgb, var(--app-warn) 6%, var(--app-card));
}

/* ── Recipient preview pane (compose) ────────────────────────────── */
.msgs-preview {
    margin-top: 1.25rem;
    border-top: 1px solid var(--app-line);
    padding-top: 0.85rem;
}

.msgs-preview__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin: 0 0 0.6rem;
}

.msgs-preview__card {
    background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card));
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    padding: 1.25rem 1.5rem;
    min-height: 4rem;
}

.msgs-preview__subject {
    margin: 0 0 0.75rem;
}

.msgs-preview__body {
    margin: 0;
}

/* ── Field language hint ──────────────────────────────────────────── */
.field-lang-hint {
    color: var(--app-muted);
    font-weight: 400;
    font-size: 0.85em;
}

/* ── Admin view: language metadata row ───────────────────────────── */
.msgs-view-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--app-bg) 60%, var(--app-card));
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    font-size: 0.84rem;
}

.msgs-view-meta__item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.msgs-view-meta__label {
    color: var(--app-muted);
    font-weight: 500;
}

.msgs-view-meta__value {
    color: var(--app-text);
    font-weight: 600;
}

.msgs-view-meta__sep {
    color: var(--app-line);
    font-size: 1.1em;
}

.msgs-view-meta__langs {
    margin-inline-start: auto;
}

/* ── Admin view: content panels ──────────────────────────────────── */
.msgs-view-lang-tabs {
    margin-bottom: 1rem;
}

.msgs-view-subject {
    font-family: var(--app-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.65rem;
    line-height: 1.3;
}

.msgs-view-body {
    line-height: 1.7;
    white-space: pre-wrap;
    font-size: 0.95rem;
}

/* ── Admin view: acknowledged language hint ───────────────────────── */
.msgs-ack-lang {
    font-size: 0.82em;
}

/* ── Preview count ────────────────────────────────────────────────── */
.msgs-preview-count {
    margin-block: 0;
}

/* ── Responsive adjustments ──────────────────────────────────────── */
@media (max-width: 47.99rem) {
    .msgs-delivery-mode {
        gap: 0.4rem;
    }

    .msgs-delivery-mode__option {
        padding: 0.7rem 0.85rem;
    }

    .msgs-lang-tabs-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .msgs-translate-btn {
        width: 100%;
        justify-content: center;
    }

    .msgs-view-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .msgs-view-meta__langs {
        margin-inline-start: 0;
    }
}

@media (min-width: 48rem) {
    .msgs-delivery-mode {
        flex-direction: row;
    }

    .msgs-delivery-mode__option {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════ HELP ══ */

/* ── Account panel: separator + cohesive action rows ─────────────────────── */
.app-account__sep {
    border: none;
    border-top: 1px solid var(--app-line);
    margin: 0.45rem 0;
}

.app-account__actions {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.app-account__form {
    margin: 0;
}

.app-account__action {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    font-size: var(--app-text-sm);
    font-family: inherit;
    font-weight: 400;
    color: var(--app-text);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: var(--app-radius-xs);
    cursor: pointer;
    text-align: start;
    transition: background .12s, color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.app-account__action .app-account__action-icon {
    flex-shrink: 0;
    color: var(--app-muted);
    transition: color .12s;
}

.app-account__action:hover {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.app-account__action:hover .app-account__action-icon {
    color: var(--app-accent);
}

.app-account__action--out {
    color: var(--app-muted);
}

.app-account__action--out:hover {
    color: var(--app-text);
}

/* ── Help page ────────────────────────────────────────────────────────────── */
.help-page {
    padding: 0 1.25rem 4rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.help-hero {
    padding: 2.75rem 0 2.25rem;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.help-hero__title {
    margin: 0 0 0.55rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--app-text);
    line-height: var(--app-leading-tight, 1.15);
}

.help-hero__sub {
    margin: 0 0 1.75rem;
    color: var(--app-muted);
    font-size: 1.06rem;
    max-width: 44ch;
    margin-inline: auto;
    margin-bottom: 1.75rem;
    line-height: 1.55;
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.help-search {
    position: relative;
    max-width: 32rem;
    margin: 0 auto;
}

.help-search__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--app-muted);
}

.help-search__input {
    width: 100%;
    padding: 0.72rem 1.1rem;
    padding-inline-start: 2.8rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1.5px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    color: var(--app-text);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.help-search__input:focus {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft), 0 1px 4px rgba(0,0,0,.06);
}

.help-search__input::placeholder {
    color: var(--app-muted);
    opacity: 0.7;
}

.help-search__status {
    margin: 0.75rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    text-align: center;
}

/* ── Category discovery grid ──────────────────────────────────────────────── */
.help-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.65rem;
    margin: 2rem 0 0;
    padding: 1.5rem 0 1.75rem;
    border-top: 1px solid var(--app-line);
    border-bottom: 1px solid var(--app-line);
    user-select: none;
    -webkit-user-select: none;
}

.help-cat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 0.85rem 0.85rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

.help-cat:hover {
    border-color: var(--app-accent);
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    transform: translateY(-1px);
}

.help-cat:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

.help-cat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    margin-bottom: 0.2rem;
    flex-shrink: 0;
}

.help-cat__icon .ui-icon {
    width: 17px;
    height: 17px;
}

.help-cat__title {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--app-text);
    line-height: 1.3;
}

.help-cat__benefit {
    font-size: 0.78rem;
    color: var(--app-muted);
    line-height: 1.4;
}

/* ── Two-column layout ────────────────────────────────────────────────────── */
.help-layout {
    display: flex;
    align-items: flex-start;
    gap: 2.75rem;
    margin-top: 2.5rem;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.help-sidebar {
    flex: 0 0 12.5rem;
    display: none;
}

.help-sidebar__inner {
    position: sticky;
    top: 1.5rem;
}

.help-sidebar__label {
    margin: 0 0 0.5rem;
    margin-inline-start: 0.55rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.help-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.03rem;
}

.help-sidebar__link {
    display: block;
    padding: 0.4rem 0.6rem;
    font-size: 0.84rem;
    color: var(--app-muted);
    text-decoration: none;
    border-radius: var(--app-radius-xs);
    border-inline-start: 2px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-sidebar__link:hover {
    background: var(--app-accent-soft);
    color: var(--app-text);
    border-inline-start-color: color-mix(in srgb, var(--app-accent) 40%, transparent);
}

.help-sidebar__link.is-active {
    background: var(--app-accent-soft);
    color: var(--app-accent);
    border-inline-start-color: var(--app-accent);
    font-weight: 600;
}

/* ── Main content column ──────────────────────────────────────────────────── */
.help-content {
    flex: 1 1 0;
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.help-section {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--app-line);
    scroll-margin-top: 1.5rem;
}

.help-section:last-of-type {
    border-bottom: none;
}

.help-section__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.help-section__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    margin-top: 0.1rem;
}

.help-section__icon-wrap .ui-icon {
    width: 20px;
    height: 20px;
}

.help-section__title {
    margin: 0 0 0.2rem;
    font-size: 1.22rem;
    font-weight: 650;
    color: var(--app-text);
    letter-spacing: -0.01em;
}

.help-section__benefit {
    margin: 0;
    font-size: 0.88rem;
    color: var(--app-muted);
    line-height: 1.5;
}

.help-section__topics {
    display: flex;
    flex-direction: column;
}

/* ── Topic — editorial, not boxed ────────────────────────────────────────── */
.help-topic {
    padding: 1.1rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 55%, transparent);
}

.help-topic:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.help-topic__title {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--app-text);
}

.help-topic__body {
    margin: 0;
    font-size: 0.9rem;
    color: var(--app-muted);
    line-height: 1.72;
    max-width: 68ch;
}

/* Optional steps / points / closing note inside a topic (longer guides such
   as Seating Studio). Same type as the body; logical padding for RTL. */
.help-topic[id] {
    scroll-margin-top: 1.5rem;
}

.help-topic__steps,
.help-topic__points {
    margin: 0.55rem 0 0;
    padding-inline-start: 1.35rem;
    font-size: 0.9rem;
    color: var(--app-muted);
    line-height: 1.65;
    max-width: 68ch;
}

.help-topic__steps li + li,
.help-topic__points li + li {
    margin-top: 0.3rem;
}

.help-topic__steps li::marker {
    color: var(--app-text);
    font-weight: 650;
}

.help-topic__steps + .help-topic__body,
.help-topic__points + .help-topic__body {
    margin-top: 0.55rem;
}

/* "In this section": a quiet list of a long guide's topics. */
.help-section__toc {
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-card) 60%, transparent);
}

.help-section__toc-label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-muted);
}

html[lang|="ar"] .help-section__toc-label {
    letter-spacing: 0;
}

.help-section__toc ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 0.15rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-section__toc a {
    display: inline-block;
    padding: 0.2rem 0;
    font-size: 0.86rem;
    color: var(--app-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--app-line-strong) 80%, transparent);
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

.help-section__toc a:hover {
    text-decoration-color: currentColor;
}

.help-section__toc a:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.help-faq {
    scroll-margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.help-faq > .help-section__title {
    margin-bottom: 1.25rem;
}

.help-faq__item {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    margin-bottom: 0.6rem;
    transition: border-color .15s;
}

.help-faq__item[open] {
    border-color: var(--app-accent);
}

.help-faq__question {
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
    -webkit-user-select: none;
    transition: color .12s;
}

.help-faq__item[open] .help-faq__question {
    color: var(--app-accent);
}

.help-faq__question::-webkit-details-marker { display: none; }

.help-faq__question::after {
    content: '';
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.45;
    transition: transform .2s, opacity .15s;
}

.help-faq__item[open] .help-faq__question::after {
    transform: rotate(180deg);
    opacity: 0.75;
}

.help-faq__answer {
    padding: 0 1.1rem 1rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--app-muted);
    line-height: 1.72;
    border-top: 1px solid var(--app-line);
}

/* ── Desktop: show sidebar ────────────────────────────────────────────────── */
@media (min-width: 56rem) {
    .help-sidebar {
        display: block;
    }

    .help-layout {
        gap: 3.25rem;
    }

    .help-hero {
        padding: 3rem 0 2.25rem;
    }

    .help-categories {
        grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    }
}

/* ── Large screens: more breathing room ──────────────────────────────────── */
@media (min-width: 72rem) {
    .help-hero {
        padding: 3.5rem 0 2.5rem;
    }

    .help-hero__title {
        font-size: 2.75rem;
    }

    .help-layout {
        gap: 3.75rem;
    }

    .help-sidebar {
        flex-basis: 13.5rem;
    }
}

/* ── RTL ──────────────────────────────────────────────────────────────────── */
/* The FAQ question and the section header are flex rows, which already run
   right-to-left in RTL: reversing them again put the chevron and the icon on
   the wrong side. */
[dir="rtl"] .help-section__header {
    text-align: start;
}

[dir="rtl"] .help-topic__body {
    max-width: none;
}

[dir="rtl"] .help-cat {
    align-items: flex-start;
}

/* Arabic script is not spaced out or upper-cased. */
html[lang|="ar"] .help-sidebar__label {
    letter-spacing: 0;
    text-transform: none;
}

/* ── Back-to-top button (help page only) ──────────────────────────────────── */
.help-back-top {
    position: fixed;
    inset-block-end: 1.75rem;
    inset-inline-end: 1.75rem;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    min-height: 0;
    border: 1.5px solid var(--app-line);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.22s ease, transform 0.22s ease,
                background 0.15s, color 0.15s, border-color 0.15s;
    /* Prevents layout shift — always occupies fixed space */
}

.help-back-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.help-back-top:hover {
    background: var(--app-bg);
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.help-back-top:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

/* Mobile: keep above any bottom dock — size unchanged at 2.75rem */
@media (max-width: 55.99rem) {
    .help-back-top {
        inset-block-end: 5.5rem;
        inset-inline-end: 1rem;
    }
}

/* Respect prefers-reduced-motion: skip transition, keep opacity toggle */
@media (prefers-reduced-motion: reduce) {
    .help-back-top {
        transition: opacity 0.01ms;
        transform: none;
    }
}

/* ═══════════════════════════════════════════
   GUEST LABELS + GROUP & LABELS COLUMN
   Organiser-only categorisation. Chips are deliberately quiet — they must
   never out-shout RSVP status. Group and Labels stay two distinct data
   concepts; this only unifies where the two render, in the "Group & Labels"
   table column and its mobile-card equivalent.
   All spacing uses logical properties so RTL mirrors correctly.
   ═══════════════════════════════════════════ */

.guest-group-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.guest-group-cell__empty {
    color: var(--app-muted);
}

.guest-label-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
}

.guest-label-chip {
    display: inline-block;
    padding: 0.08rem 0.44rem;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--app-muted);
    background: var(--app-surface-2, rgba(0, 0, 0, 0.035));
    border: 1px solid var(--app-line, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    white-space: nowrap;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* "+N" overflow disclosure — a native <details> so it is keyboard/AT
   operable with no extra JS. The panel floats so revealing hidden labels
   never pushes the row taller. */
.guest-label-overflow {
    position: relative;
    display: inline-block;
}

.guest-label-overflow > summary {
    list-style: none;
    display: inline-block;
    padding: 0.08rem 0.44rem;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.5;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}

.guest-label-overflow > summary::-webkit-details-marker {
    display: none;
}

.guest-label-overflow > summary:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.guest-label-overflow__panel {
    position: absolute;
    z-index: 12;
    inset-inline-start: 0;
    top: calc(100% + 0.3rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    padding: 0.5rem;
    min-width: 8rem;
    max-width: 16rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.guest-label-overflow__panel .guest-label-chip {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

/* Guest List: "seats held" indicator beside the Attending number — shown only
   when Seating Studio holds more seats than confirmed attendance. Icon +
   colour + accessible text; a native <details> (menu.js: Escape, outside
   click, viewport fit). Levels: info (pending), review (attending with extra
   seats), conflict (declined). */
/* Keep "0 [indicator]" together on one line in the Attending column. */
.guest-attending-cell { white-space: nowrap; }

.guest-seat-hold {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 0.35rem;
}

.guest-seat-hold > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--app-line-strong);
    color: var(--app-muted);
    background: var(--app-card);
    cursor: pointer;
    user-select: none;
}

.guest-seat-hold > summary::-webkit-details-marker { display: none; }
.guest-seat-hold > summary .ui-icon { width: 0.95rem; height: 0.95rem; }
.guest-seat-hold > summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.guest-seat-hold--review > summary { color: var(--app-warn); border-color: currentColor; background: var(--app-warn-soft); }
.guest-seat-hold--conflict > summary { color: var(--app-bad); border-color: currentColor; background: var(--app-bad-soft); }

.guest-seat-hold__panel {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    top: calc(100% + 0.35rem);
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 0.7rem 0.8rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    text-align: start;
    white-space: normal;
    font-weight: 400;
}

.guest-seat-hold__panel p { margin: 0; overflow-wrap: anywhere; }
.guest-seat-hold__title { font-weight: 650; font-size: 0.85rem; color: var(--app-text); }
.guest-seat-hold--review .guest-seat-hold__title { color: var(--app-warn); }
.guest-seat-hold--conflict .guest-seat-hold__title { color: var(--app-bad); }
.guest-seat-hold__body { margin-top: 0.3rem !important; font-size: 0.8rem; line-height: 1.45; color: var(--app-text); }
.guest-seat-hold__facts { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.45rem !important; font-size: 0.78rem; color: var(--app-muted); }
.guest-seat-hold__link { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--app-accent); }

/* Removal confirmations: what happens to Seating Studio seats. */
.guest-remove-seating {
    margin: 0.75rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--app-line);
    border-inline-start: 3px solid var(--app-accent);
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
}
.guest-remove-seating p { margin: 0; }
.guest-remove-seating .help { margin-top: 0.4rem; }
.guest-remove-seating__facts { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; font-weight: 600; }

/* ---- Filter bar ---- */

.filter-field--wide {
    grid-column: 1 / -1;
}

.filter-field__legend {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-muted);
    margin-bottom: 0.35rem;
}

.label-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.label-filter__chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* The checkbox stays in the accessibility tree and keeps keyboard focus;
   only its default box is visually replaced by the pill. */
.label-filter__chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.label-filter__chip > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text, inherit);
    transition: background var(--brand-ease), border-color var(--brand-ease);
}

.label-filter__chip:hover > span {
    background: var(--app-surface-2, rgba(0, 0, 0, 0.03));
}

.label-filter__chip input:checked + span {
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-color: var(--app-accent);
    font-weight: 600;
}

/* A leading tick on the active chip makes the filtered state legible without
   relying on colour alone. */
.label-filter__chip input:checked + span::before {
    content: "";
    width: 0.72rem;
    height: 0.42rem;
    margin-inline-end: 0.1rem;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-0.12rem);
}

.label-filter__chip input:focus-visible + span {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}


/* ---- Label editor on Add / Edit Guest ---- */

.label-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border: var(--app-input-border, 1px solid var(--app-line-strong));
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
}

.label-picker__chips {
    display: contents;
}

.label-picker__input {
    flex: 1 1 9rem;
    min-width: 8rem;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    padding: 0.2rem 0.1rem;
}

/* Logical padding so the remove button sits on the trailing edge in RTL too. */
.label-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.2rem;
    padding-inline: 0.6rem 0.3rem;
    font-size: 0.85rem;
    background: var(--app-surface-2, rgba(0, 0, 0, 0.045));
    border: 1px solid var(--app-line, rgba(0, 0, 0, 0.09));
    border-radius: 999px;
    max-width: 100%;
}

.label-chip__remove {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    color: var(--app-muted);
    border-radius: 999px;
}

.label-chip__remove:hover {
    color: var(--app-danger, #b3261e);
}

.label-chip__remove:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

@media (max-width: 48rem) {
    .guest-label-chip {
        max-width: 8rem;
    }

    .iv-version-chip__name {
        max-width: 8rem;
    }
}

/* ═══════════════════════════════════════════
   GUEST LIST — INVITATION VERSION
   The guest's current concrete assignment (never Primary-for-everyone) — a
   quiet clickable text link, deliberately NOT a badge, so it reads as
   distinct from the Guest Label chips above. The "Event Primary" caption is
   a static fact, never phrasing that implies dynamic following.
   ═══════════════════════════════════════════ */

.iv-version-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    text-decoration: none;
    line-height: 1.25;
}

.iv-version-chip__name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--app-accent);
    border-bottom: 1px dashed color-mix(in srgb, var(--app-accent) 45%, transparent);
}

.iv-version-chip:hover .iv-version-chip__name {
    border-bottom-style: solid;
}

.iv-version-chip:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.iv-version-chip__primary {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--app-muted);
}

.iv-version-cell {
    max-width: 11rem;
}

.guest-card__version {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--app-muted);
}

.guest-card__version-label {
    font-weight: 600;
    color: var(--app-text);
}

/* ═══════════════════════════════════════════
   GUEST LIST — SEATING SUMMARY
   Read-only reflection of Seating Studio truth. Rendered only for guests that
   actually have seats, so unseated guests add no visual noise.
   ═══════════════════════════════════════════ */

.guest-seating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.28rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--app-muted);
    text-decoration: none;
    border-radius: var(--app-radius-sm);
    padding: 0.05rem 0.2rem;
    margin-inline-start: -0.2rem;
    max-width: 100%;
}

.guest-seating svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.65;
}

.guest-seating > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Table names may be RTL while seat numbers are digits — isolate so the
       run does not reorder around the separator. */
    unicode-bidi: isolate;
}

.guest-seating:hover,
.guest-seating:focus-visible {
    color: var(--app-accent);
    background: var(--app-surface-2, rgba(0, 0, 0, 0.03));
}

.guest-seating:hover svg,
.guest-seating:focus-visible svg {
    opacity: 1;
}

.guest-card__seating {
    margin: 0.28rem 0 0;
}

@media print {
    .guest-seating {
        color: inherit;
        background: none;
    }
}

/* ═══════════════════════════════════════════
   GROUP INVITATION — REGISTRATION WORDING EDITOR
   Group-specific copy only; the event's invitation design stays in Invitation
   Studio. Reuses the existing .lang-tabs component rather than inventing one.
   ═══════════════════════════════════════════ */

.grp-content-tab__default {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
    margin-inline-start: 0.3rem;
}

.grp-content-panel {
    margin-top: 0.2rem;
}

.grp-flags {
    border: 1px solid var(--app-line, rgba(0, 0, 0, 0.09));
    border-radius: var(--app-radius-sm);
    padding: 0.75rem 0.9rem;
    margin: 1rem 0 0;
}

.grp-flags legend {
    padding-inline: 0.35rem;
}

.grp-flag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    font-size: 0.92rem;
    cursor: pointer;
}

.grp-flag input {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   GUEST CONTROLS — narrow screens
   Search stays full width; Show/Group pair up when there is room; Apply keeps a
   comfortable tap target. All logical properties so RTL mirrors correctly.
   ═══════════════════════════════════════════ */

@media (max-width: 47.99rem) {
    .guest-controls {
        padding: 0.75rem 0.8rem;
    }

    /* The collapsed "Filters" disclosure lays its own body out; search sits above it. */
    .filter-expand__body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 0.65rem;
        align-items: end;
        margin-top: 0.6rem;
    }

    .filter-expand__body > .filter-field--wide,
    .filter-expand__body > .filter-submit,
    .filter-expand__body > .filter-clear {
        grid-column: 1 / -1;
    }

    .filter-submit,
    .filter-clear {
        min-height: 2.75rem;
        width: 100%;
    }

    .dup-legend {
        gap: 0.35rem 0.75rem;
    }

    /* Long explanations may wrap under their badge rather than overflow. */
    .dup-legend__row {
        flex-wrap: wrap;
    }
}

/* Very narrow phones: one control per row so nothing is cramped. */
@media (max-width: 24rem) {
    .filter-expand__body {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ═══════════════════════════════════════════
   LABELS MULTI-SELECT
   A <details> disclosure: native open/close, keyboard reachable, no framework.
   The panel exists only while open, so vocabulary size never affects the toolbar.
   ═══════════════════════════════════════════ */

.label-menu { position: relative; }

.label-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0.35rem 0.7rem;
    border: var(--app-input-border, 1px solid var(--app-line-strong));
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.label-menu__trigger:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.label-menu__trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-menu__trigger-text[data-selected] {
    font-weight: 600;
    color: var(--app-accent);
}

.label-menu__chevron {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform var(--brand-ease);
}

.label-menu[open] .label-menu__chevron { transform: rotate(180deg); }

.label-menu__panel {
    position: absolute;
    z-index: 40;
    inset-inline-start: 0;
    top: calc(100% + 0.3rem);
    min-width: 100%;
    width: max-content;
    max-width: min(20rem, 90vw);
    background: var(--app-surface);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
}

.label-menu__search { padding: 0.15rem 0.15rem 0.35rem; }

.label-menu__search-input {
    width: 100%;
    min-height: 2.2rem;
    font-size: 0.88rem;
}

/* Caps the panel height so even a hundred labels stay a tidy scrolling list. */
.label-menu__list {
    max-height: 15rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.label-menu__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    border-radius: var(--app-radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
}

.label-menu__option:hover { background: var(--app-surface-2, rgba(0, 0, 0, 0.04)); }

/* Checkbox stays in the a11y tree and keeps focus; only its box is restyled. */
.label-menu__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.label-menu__box {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--app-line-strong);
    border-radius: 0.25rem;
    position: relative;
}

.label-menu__option input:checked + .label-menu__box {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

.label-menu__option input:checked + .label-menu__box::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.3rem;
    top: 0.1rem;
    width: 0.25rem;
    height: 0.5rem;
    border-inline-end: 2px solid var(--app-accent-text);
    border-block-end: 2px solid var(--app-accent-text);
    transform: rotate(45deg);
}

.label-menu__option input:focus-visible + .label-menu__box {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.label-menu__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-menu__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--app-line, rgba(0, 0, 0, 0.08));
}

.label-menu__clear {
    border: none;
    background: none;
    padding: 0.2rem 0.35rem;
    font-size: 0.82rem;
    color: var(--app-muted);
    cursor: pointer;
    border-radius: var(--app-radius-sm);
}

.label-menu__clear:hover { color: var(--app-accent); }

.label-menu__empty { font-size: 0.82rem; color: var(--app-muted); }

/* ---- Active filter chips ----
   The selection stays visible once the menu closes. Each chip is a plain link that
   re-submits the view without that label, so removal works with no JavaScript. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
    margin-top: 0.7rem;
}

.active-filters__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-muted);
    margin-inline-end: 0.1rem;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-block: 0.18rem;
    padding-inline: 0.6rem 0.45rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: var(--app-accent-text);
    border: 1px solid var(--app-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    max-width: 14rem;
}

.active-filter > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filter__x { font-size: 1rem; line-height: 1; opacity: 0.75; }

.active-filter:hover .active-filter__x,
.active-filter:focus-visible .active-filter__x { opacity: 1; }

.active-filter:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.active-filters__clear {
    font-size: 0.8rem;
    color: var(--app-muted);
    text-decoration: underline;
}

@media (max-width: 47.99rem) {
    /* Full-width dropdown panel on phones — a floating menu next to a narrow
       trigger is fiddly to hit. */
    .label-menu__panel {
        max-width: none;
        width: 100%;
    }

    .active-filter { max-width: 100%; }
}

/* Group Invitation: registration wording is operational configuration, so it sits
   in a collapsed disclosure. The invitation design itself lives in the Group
   Invitation Studio, not on this page. */
.grp-content-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.grp-content-details > summary::-webkit-details-marker { display: none; }

.grp-content-summary .section-title { margin: 0; }

.grp-content-details > summary:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 3px;
    border-radius: var(--app-radius-sm);
}

/* ─── Event -> Guestbook (Guestbook Phase 1) ──────────────────────────────── */
.guestbook-status__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.guestbook-status__main { min-width: 0; flex: 1 1 18rem; }
.guestbook-status__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}
.guestbook-status__line { margin: 0; color: var(--app-muted); overflow-wrap: anywhere; }
.guestbook-status__action { margin: 0; }
.guestbook-status__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
}

.guestbook-layout { display: grid; gap: 1rem; }
@media (min-width: 64rem) {
    .guestbook-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
    .guestbook-layout__messages { position: sticky; top: 1rem; }
}
.guestbook-layout__settings .card:last-of-type { margin-bottom: 1rem; }

.guestbook-timing { display: grid; gap: 0.9rem; }
.guestbook-timing__row { display: grid; gap: 0.35rem; }
.guestbook-timing__days { display: grid; gap: 0.35rem; max-width: 12rem; }
.guestbook-timing__days[hidden] { display: none; }

.guestbook-privacy { display: flex; gap: 0.75rem; align-items: flex-start; }
.guestbook-privacy__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-text);
}
.guestbook-privacy__title { margin: 0.2rem 0 0.2rem; font-weight: 600; }

.guestbook-styles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.6rem;
}
.guestbook-style {
    position: relative;
    display: grid;
    gap: 0.5rem;
    padding: 0.6rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    cursor: pointer;
    min-height: 2.75rem;
}
.guestbook-style input { position: absolute; opacity: 0; pointer-events: none; }
.guestbook-style:has(input:checked) {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 25%, transparent);
}
.guestbook-style:has(input:focus-visible) { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.guestbook-style__swatch {
    display: block;
    height: 3rem;
    border-radius: calc(var(--app-radius) - 4px);
    border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
}
.guestbook-style--invitation .guestbook-style__swatch {
    background: linear-gradient(135deg, var(--brand-ivory, #f4efe6) 0 50%, var(--brand-champagne-soft, #eadfcb) 50% 100%);
}
.guestbook-style--paper .guestbook-style__swatch { background: #f4eee3; box-shadow: inset 0 -0.6rem 0 #8f5b45; }
.guestbook-style--evening .guestbook-style__swatch { background: #1e1b24; box-shadow: inset 0 -0.6rem 0 #c9a96e; }
.guestbook-style__label { font-size: 0.9rem; font-weight: 600; text-align: center; }
/* Guest message styling (Simple text / Elegant styling) — migration 130. */
.guestbook-stylings { display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
@media (min-width: 40rem) { .guestbook-stylings { grid-template-columns: 1fr 1fr; } }
.guestbook-styling {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    cursor: pointer;
}
.guestbook-styling input { margin: 0.2rem 0 0; flex: none; accent-color: var(--brand-espresso); }
.guestbook-styling:has(input:checked) { border-color: var(--brand-espresso); box-shadow: inset 0 0 0 1px var(--brand-espresso); }
.guestbook-styling:has(input:focus-visible) { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.guestbook-styling__text { display: grid; gap: 0.2rem; min-width: 0; }
.guestbook-styling__title { font-weight: 600; }
.guestbook-styling .help { margin: 0; }

.guestbook-entries { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.9rem; }

/* Received messages as keepsake notes (organiser polish): the guest's
   message is the hero, the name an attribution, the time quiet, the
   moderation action last behind the shared "···" menu. Every card is the
   same calm surface — a guest's colour choice styles only the message
   text, so a mixed Guestbook stays cohesive. */
.gb-notes-head h2 { margin-bottom: 0.3rem; }
.gb-notes-head__summary { margin: 0; color: var(--app-text); font-weight: 600; }
.gb-notes-head__note { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--app-muted); }
.guestbook-entry.gb-note {
    position: relative;
    padding: 1.35rem 1.4rem 0.85rem;
    padding-inline-start: 3.1rem;
    border: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(28, 25, 22, 0.03);
}
.gb-note__mark {
    position: absolute;
    inset-block-start: 1.35rem;
    inset-inline-start: 1.1rem;
    color: color-mix(in srgb, var(--brand-champagne, #c4a574) 55%, var(--app-line));
    user-select: none;
    pointer-events: none;
}
/* The opening mark faces the reading direction of the page. */
[dir="rtl"] .gb-note__mark { transform: scaleX(-1); }
.gb-note__body { max-inline-size: 42rem; }
.guestbook-entry__message {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--app-text);
    white-space: normal;
    overflow-wrap: anywhere;
}
.gb-note__by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    min-width: 0;
}
.gb-note__dash { color: var(--app-muted); }
/* A guest's Elegant size scales from the card's message size, not from the
   shared stylesheet's 1em base (two classes outrank .gb-msg). */
.guestbook-entry__message.gb-msg { --gb-base: 1.1rem; }
.guestbook-entry__guest {
    font-weight: 500;
    color: var(--app-text);
    overflow-wrap: anywhere;
}
.gb-note__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.gb-note__meta { margin: 0; font-size: 0.8rem; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.gb-note__menu .overflow-menu__button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-color: transparent;
    background: transparent;
}
.gb-note__menu .overflow-menu__button:hover,
.gb-note__menu[open] .overflow-menu__button { border-color: var(--app-line); background: var(--app-card); }
.gb-note__menu .overflow-menu__button:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 1px; }
.gb-note__menu .overflow-menu__panel form { margin: 0; }
.gb-note__status { margin: 0 0 0.6rem; }
.gb-note__chip { font-size: 0.75rem; }
/* Hidden: set aside, not deleted — a quiet tint, the chip, and the words
   folded away until the organiser chooses to read them. */
.guestbook-entry.gb-note.is-hidden {
    background: color-mix(in srgb, var(--app-bg) 55%, var(--app-surface));
    border-style: dashed;
}
.guestbook-entry.gb-note.is-hidden .gb-note__mark { opacity: 0.45; }
.guestbook-entry__hidden summary {
    cursor: pointer;
    color: var(--app-muted);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
}
.guestbook-entry__hidden[open] summary { margin-bottom: 0.4rem; }
.guestbook-entry__hidden summary:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 34rem) {
    .guestbook-entry.gb-note { padding: 1.1rem 1rem 0.7rem; padding-inline-start: 2.6rem; }
    .gb-note__mark { inset-inline-start: 0.8rem; inset-block-start: 1.15rem; width: 20px; height: 16px; }
}
.guestbook-empty { margin-top: 1rem; }


/* ─────────────────────────────────────────────────────────────────────────
   RSVP Details (organiser) — Event → RSVP Details, add/edit, preview.
   Logical properties throughout so Arabic/Hebrew mirror naturally.
   ───────────────────────────────────────────────────────────────────────── */
.rd-switch__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}
.rd-switch__main { flex: 1 1 22rem; min-width: 0; }
.rd-switch__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: var(--app-text-lg);
}
.rd-switch__line { margin: 0 0 0.25rem; color: var(--app-text); }
.rd-summary__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
.rd-metric {
    display: block;
    padding: 0.7rem 0.4rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms var(--app-ease), background 150ms var(--app-ease);
}
.rd-metric:hover, .rd-metric:focus-visible { border-color: var(--app-line-strong); background: var(--app-bg); }
.rd-metric--incomplete_required .summary-metric__value { color: var(--app-bad); }
.rd-metric--complete .summary-metric__value { color: var(--app-ok); }
@media (max-width: 40rem) {
    .rd-summary__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rd-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 64rem) {
    .rd-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .rd-layout__side { position: sticky; top: 1rem; }
}
.rd-questions__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.rd-questions__head h2 { margin: 0; }
.rd-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
}
.rd-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.95rem 1rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}
.rd-item__main { flex: 1 1 18rem; min-width: 0; }
.rd-item__label {
    margin: 0 0 0.45rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.rd-item__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.rd-item__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}
.rd-item__options li {
    padding: 0.15rem 0.55rem;
    border-radius: var(--app-radius-pill);
    background: var(--app-bg-deep);
    font-size: var(--app-text-sm);
    overflow-wrap: anywhere;
}
.rd-item__warn {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin: 0.55rem 0 0;
    color: var(--app-warn);
    font-size: var(--app-text-sm);
}
.rd-item__warn svg { flex: none; margin-top: 0.1rem; }
.rd-item__answers { margin: 0.45rem 0 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.rd-inline-form { display: inline; margin: 0; }
.rd-move { min-width: var(--app-control-h-sm); }
.rd-item__remove-help { margin: 0 0 0.5rem; max-width: 16rem; }
.rd-item__remove { color: var(--app-bad); }
.rd-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--app-radius-pill);
    border: 1px solid var(--app-line);
    background: var(--app-card);
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.rd-chip--ok { border-color: transparent; background: var(--app-ok-soft); color: var(--app-ok); }
.rd-chip--warn { border-color: transparent; background: var(--app-warn-soft); color: var(--app-warn); }
.rd-chip--muted { background: var(--app-bg-deep); }
.rd-chip--strong { color: var(--app-text); border-color: var(--app-line-strong); }
.rd-empty {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding: 1.6rem 1rem;
    text-align: center;
    border: 1px dashed var(--app-line-strong);
    border-radius: var(--app-radius);
}
.rd-empty__icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-text);
}
.rd-empty__title { margin: 0; font-weight: 600; }
.rd-templates { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--app-line); }
.rd-templates__title { margin: 0 0 0.55rem; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-templates__list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rd-template {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    color: var(--app-text);
    background: var(--app-surface);
    text-decoration: none;
    font-size: var(--app-text-sm);
    transition: border-color 150ms var(--app-ease), background 150ms var(--app-ease);
}
.rd-template::before { content: "+ "; color: var(--app-muted); }
.rd-template:hover, .rd-template:focus-visible { border-color: var(--app-line-strong); background: var(--app-bg); }
.rd-archived { margin-top: 1rem; }
.rd-archived summary { cursor: pointer; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-list--archived { margin-top: 0.65rem; }
.rd-list--archived .rd-item { background: var(--app-bg); }
.rd-preview__frame {
    margin-top: 0.75rem;
    padding: 1.1rem 1rem 1.2rem;
    border-radius: var(--app-radius-lg);
    background: var(--app-bg);
    border: 1px solid var(--app-line);
}
.rd-preview__title { margin: 0; font-weight: 700; }
.rd-preview__intro { margin: 0.2rem 0 0.9rem; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-preview .rd-fields { display: grid; gap: 1rem; }
.rd-preview .rd-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.rd-preview .rd-field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.3rem; padding: 0; font-weight: 600; }
.rd-preview .rd-field__tag { font-size: var(--app-text-xs); font-weight: 600; color: var(--app-muted); }
.rd-preview .rd-field__help { margin: 0 0 0.35rem; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-preview .rd-choices { display: grid; gap: 0.35rem; }
.rd-preview .rd-choices--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-preview .rd-choice { display: flex; gap: 0.45rem; align-items: center; font-weight: 400; }
.rd-preview .rd-choice__mark, .rd-preview .rd-field__error { display: none; }
.rd-preview .rd-input { width: 100%; }

/* Add / edit form */
.rd-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.5rem;
}
.rd-type, .rd-radio {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.55rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    cursor: pointer;
    font-weight: 400;
    transition: border-color 150ms var(--app-ease), box-shadow 150ms var(--app-ease);
}
.rd-type input, .rd-radio input { margin-top: 0.2rem; }
.rd-type .help, .rd-radio .help { grid-column: 2; margin: 0.15rem 0 0; }
.rd-type__title, .rd-radio__title { font-weight: 600; }
.rd-radio > span { display: grid; }
.rd-type:has(input:checked), .rd-radio:has(input:checked) {
    border-color: var(--app-accent);
    box-shadow: inset 0 0 0 1px var(--app-accent);
}
.rd-type:has(input:focus-visible), .rd-radio:has(input:focus-visible) { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.rd-langs { display: grid; gap: 0.75rem; }
.rd-lang {
    margin: 0;
    padding: 0.8rem 0.9rem 0.9rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    min-width: 0;
}
.rd-lang__legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.3rem;
    font-weight: 600;
}
.rd-lang input { width: 100%; }
.rd-options { display: grid; gap: 0.6rem; margin: 0.75rem 0; padding: 0; list-style: none; counter-reset: rd-option; }
.rd-option {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}
.rd-option.is-archived { background: var(--app-bg); }
.rd-option__inputs {
    flex: 1 1 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.45rem;
    min-width: 0;
}
.rd-option__lang { display: grid; gap: 0.15rem; font-weight: 400; margin: 0; }
.rd-option__lang-name { color: var(--app-muted); font-size: var(--app-text-xs); }
.rd-option__lang input { width: 100%; }
.rd-option__remove { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 400; font-size: var(--app-text-sm); color: var(--app-muted); }
.rd-fieldset { margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; }
.rd-fieldset legend { font-weight: 600; margin-bottom: 0.45rem; }
.rd-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem; }
.rd-required { margin-top: 0.25rem; }

/* Guest list / guest detail */
.rd-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--app-radius-pill);
    font-size: var(--app-text-xs);
    font-weight: 600;
    white-space: nowrap;
    background: var(--app-bg-deep);
    color: var(--app-muted);
}
.rd-status--complete { background: var(--app-ok-soft); color: var(--app-ok); }
.rd-status--incomplete_required { background: var(--app-bad-soft); color: var(--app-bad); }
.rd-status svg { flex: none; }
.rd-answers { margin: 0; display: grid; gap: 0.6rem; }
.rd-answers__row { display: grid; gap: 0.15rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--app-line); }
.rd-answers__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rd-answers dt { color: var(--app-muted); font-size: var(--app-text-sm); overflow-wrap: anywhere; }
.rd-answers dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.rd-answers__empty { color: var(--app-muted); font-style: italic; }
.rd-guest-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.rd-guest-card__head h2 { margin: 0; }


/* ── RSVP Details: Questions / Responses tabs (the Inbox's segmented control) ── */
.rd-tabs { margin: 0 0 1.15rem; }
.rd-item__answers a { color: inherit; font-weight: 600; text-underline-offset: 0.18em; }
.rd-guest-card__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.9rem 0 0; }

/* ── RSVP Details → Responses (read-only workspace) ───────────────────────── */
.rd-responses-summary { margin-bottom: 1rem; }
.rd-metric.is-active { border-color: var(--app-text); background: var(--app-card); box-shadow: inset 0 0 0 1px var(--app-text); }
.rd-toolbar { display: grid; gap: 0.85rem; margin-bottom: 1rem; }
.rd-toolbar__row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.rd-toolbar__search { flex: 1 1 18rem; min-width: 0; }
.rd-toolbar__search input { width: 100%; margin: 0; }
.rd-toolbar__sort select { margin: 0; min-width: 12rem; }
.rd-filters { display: grid; gap: 0.5rem; justify-items: start; }
.rd-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}
.rd-filter select, .rd-filter input { margin: 0; width: auto; min-width: 9rem; max-width: 100%; flex: 0 1 auto; }
.rd-filter__question { flex: 1 1 14rem !important; }
.rd-filter__value { flex: 1 1 10rem !important; }
.rd-filter__remove { margin-inline-start: auto; font-size: 1.1rem; line-height: 1; }
.rd-filters__add { font-weight: 600; gap: 0.3rem; }
.rd-columns { position: relative; }
/* Responses → Export: one restrained control beside Columns (shared action
   sheet: popover on desktop, bottom sheet on phones). */
.rd-export > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.65rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    font-weight: 600;
    cursor: pointer;
}
.rd-export > summary .ui-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.rd-export-message { text-align: center; }

/* Responses print / PDF report: one calm block per guest. */
.rd-report__hint { margin: 0; flex: 1 1 16rem; color: rgba(31, 26, 22, 0.62); font-size: 0.88rem; }
.rd-report__head { padding-bottom: 1rem; border-bottom: 1px solid rgba(31, 26, 22, 0.12); }
.rd-report__filters { margin: 1rem 0 0.5rem; }
.rd-report__filters h2,
.rd-report__guests h2 {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(31, 26, 22, 0.55);
}
.rd-report__filters dl { display: grid; gap: 0.2rem; margin: 0; font-size: 0.9rem; }
.rd-report__filters dl > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rd-report__filters dt { font-weight: 600; }
.rd-report__filters dt::after { content: ":"; }
.rd-report__filters dd { margin: 0; color: rgba(31, 26, 22, 0.8); overflow-wrap: anywhere; }
.rd-report__guest { padding: 1.1rem 0; border-bottom: 1px solid rgba(31, 26, 22, 0.12); break-inside: avoid; page-break-inside: avoid; }
.rd-report__guest:last-child { border-bottom: 0; }
.rd-report__guest h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.rd-report__meta { margin: 0.2rem 0 0; color: rgba(31, 26, 22, 0.65); font-size: 0.86rem; }
.rd-report__answers { display: grid; gap: 0.55rem; margin: 0.75rem 0 0; }
.rd-report__answer { display: grid; gap: 0.1rem; }
.rd-report__answer dt { font-size: 0.78rem; color: rgba(31, 26, 22, 0.58); overflow-wrap: anywhere; }
.rd-report__answer dd { margin: 0; font-size: 0.98rem; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.rd-report__answer--none dd { color: rgba(31, 26, 22, 0.5); font-style: italic; }
@media print {
    @page {
        margin: 16mm 14mm;
        @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; color: #777; }
    }
    /* Blocks avoid splitting; one taller than a page still flows on. */
    .rd-report__answer { break-inside: avoid; }
}

/* Event -> Guestbook page head: Preview as guest, Preview in… and Print
   Guestbook are one family of secondary controls (same height); Back to
   guests stays the one quiet link, set a little apart. On phones the three
   share the two-column grid and Back takes its own row. */
.gb-head-actions > .page-tools > summary { min-height: var(--app-control-h); }
.gb-head-actions > .gb-head-actions__back { margin-inline-start: 0.5rem; }
@media (max-width: 47.99rem) {
    .gb-head-actions > .page-tools + .gb-head-actions__print,
    .gb-head-actions > .gb-head-actions__back { grid-column: 1 / -1; }
    .gb-head-actions > .gb-head-actions__back { margin-inline-start: 0; }
    /* Preview in… fills its cell like its neighbour, and a label that wraps
       (e.g. Hebrew) never leaves the other one shorter. */
    .gb-head-actions > .page-tools { display: flex; align-self: stretch; margin-inline-start: 0; }
    .gb-head-actions > .page-tools > summary { flex: 1; justify-content: center; }
}

/* Guestbook keepsake (Event -> Guestbook -> Print keepsake): the guest
   messages as a calm printed keepsake. ONE print identity whatever the
   Guestbook's card style — white paper, dark ink, hairlines — because
   browsers do not print backgrounds by default and an Evening card on paper
   would be ink-heavy. A guest's Elegant style keeps its meaning through the
   organiser palette (every colour 4.5:1 on white). No letter-spacing, upper-
   casing or italics on text that can be Arabic / Hebrew (titles are dir=auto
   customer wording). Shares the guest-print toolbar, sheet and @page rules. */
.gb-keepsake__toolbar { gap: 0.6rem 1rem; }
.gb-keepsake__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; flex: 1 1 18rem; min-width: 0; }
.gb-keepsake__options { margin: 0; }
.gb-keepsake__options .checkbox-label { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.gb-keepsake__count { margin: 0; color: rgba(31, 26, 22, 0.66); font-size: 0.88rem; }
.gb-keepsake__sheet { max-width: 46rem; padding: 3rem 3.25rem 2.5rem; }
.gb-keepsake__head { text-align: center; margin: 0 0 2rem; }
.gb-keepsake__eyebrow { margin: 0 0 0.6rem; font-size: 0.98rem; color: #7d5f3b; overflow-wrap: anywhere; }
.gb-keepsake__head h1 { margin: 0; font-size: clamp(1.85rem, 5vw, 2.6rem); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.gb-keepsake__date { margin: 0.6rem 0 0; color: rgba(31, 26, 22, 0.7); font-size: 1rem; }
.gb-keepsake__rule { display: block; inline-size: 3.5rem; block-size: 1px; margin: 1.5rem auto 0; background: #c4a574; }
.gb-keepsake .guestbook-entries { margin: 0; gap: 0; }
.gb-keepsake .guestbook-entry.gb-note {
    padding: 1.5rem 0 1.4rem;
    padding-inline-start: 2.75rem;
    border: 0;
    border-block-end: 1px solid rgba(31, 26, 22, 0.12);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.gb-keepsake .guestbook-entry.gb-note:last-child { border-block-end: 0; }
.gb-keepsake .gb-note__mark { inset-block-start: 1.6rem; inset-inline-start: 0.1rem; color: #c9ad80; }
.gb-keepsake .gb-note__body { max-inline-size: none; }
/* A plain message gets the keepsake's size, ink and leading; a styled one
   only its base size, so the guest's own size, colour and font (the shared
   .gb-msg--* classes) are never outranked by a keepsake rule. */
.gb-keepsake .guestbook-entry__message:not(.gb-msg) { font-size: 1.14rem; line-height: 1.72; color: #1f1a16; }
.gb-keepsake .guestbook-entry__message.gb-msg { --gb-base: 1.14rem; }
/* A plain (Simple) right-to-left message: the page's Latin book serif has no
   dependable Arabic / Hebrew glyphs, so use the script-capable stack. */
.gb-keepsake .guestbook-entry__message:not(.gb-msg):dir(rtl) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Naskh Arabic", "Noto Sans Hebrew", sans-serif;
}
/* The attribution is the message paragraph's last line (name_in_message):
   reset everything a guest's style could pass down — font, size, weight,
   slant, colour, line height — so "— Name" always looks the same. */
.gb-keepsake .gb-note__by--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Naskh Arabic", "Noto Sans Hebrew", serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: #3a2f28;
}
.gb-keepsake .gb-note__dash { color: #a88a5f; }
.gb-keepsake .guestbook-entry__guest { color: #3a2f28; font-weight: 500; font-style: normal; }
.gb-keepsake__mark { margin: 2.5rem 0 0; text-align: center; font-size: 0.8rem; color: rgba(31, 26, 22, 0.5); }
.gb-keepsake__empty { margin-top: 1rem; text-align: center; }
@media (max-width: 40rem) {
    .gb-keepsake__sheet { margin: 0.75rem auto 1.5rem; padding: 2rem 1.15rem 1.75rem; }
    .gb-keepsake .guestbook-entry.gb-note { padding-inline-start: 2.25rem; }
}
@media print {
    .gb-keepsake__screen-only { display: none !important; }
    .gb-keepsake__sheet { padding: 0; }
    .gb-keepsake__head { margin-bottom: 1.25rem; break-after: avoid; page-break-after: avoid; }
    .gb-keepsake__head h1 { font-size: 24pt; }
    .gb-keepsake .guestbook-entry__message:not(.gb-msg) { font-size: 12pt; }
    .gb-keepsake .guestbook-entry__message.gb-msg { --gb-base: 12pt; }
    /* A message stays with its name on one page; an exceptionally long one
       flows across pages rather than leaving a blank page or being cut. */
    .gb-keepsake .guestbook-entry.gb-note { padding-block: 1rem; break-inside: avoid; page-break-inside: avoid; }
    .gb-keepsake .guestbook-entry.gb-note.gb-keepsake__long { break-inside: auto; page-break-inside: auto; orphans: 3; widows: 3; }
    /* The name is the paragraph's last line: never left alone on a page. */
    .gb-keepsake .guestbook-entry__message { widows: 3; orphans: 2; }
    .gb-keepsake .gb-note__by--inline { font-size: 10.5pt; }
    .gb-keepsake__mark { break-before: avoid; margin-top: 1.5rem; }
}

.rd-columns summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.65rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    font-weight: 600;
}
.rd-columns summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-0.1rem) rotate(45deg);
    opacity: 0.6;
}
.rd-columns[open] summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.rd-columns summary::-webkit-details-marker { display: none; }
.rd-columns__panel {
    position: absolute;
    inset-inline-end: 0;
    z-index: 20;
    display: grid;
    gap: 0.35rem;
    width: min(20rem, 80vw);
    max-height: 20rem;
    overflow: auto;
    margin-top: 0.4rem;
    padding: 0.75rem 0.85rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}
.rd-columns__title { margin: 0 0 0.2rem; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-columns__choice { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin: 0; }
.rd-columns__choice input { margin-top: 0.2rem; }
.rd-dropped { margin: -0.5rem 0 0.75rem; }
.rd-results { padding: 0; overflow: hidden; }
.rd-results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--app-line);
}
.rd-results__count { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.rd-clear { font-size: var(--app-text-sm); }
/* position: relative contains the absolutely-positioned screen-reader text in
   the cells, which would otherwise escape the scroller and widen the page. */
.rd-responses__scroll { position: relative; overflow-x: auto; }
.rd-responses__scroll:focus-visible { outline: 2px solid var(--app-focus); outline-offset: -2px; }
.rd-responses { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--app-text-sm); }
.rd-responses th, .rd-responses td {
    padding: 0.7rem 1.1rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--app-line);
}
.rd-responses thead th {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--app-card);
}
.rd-responses thead th[dir="auto"] { text-transform: none; letter-spacing: 0; font-size: var(--app-text-sm); max-width: 14rem; white-space: normal; }
.rd-responses tbody tr:last-child > * { border-bottom: 0; }
.rd-responses tbody tr:hover > * { background: color-mix(in srgb, var(--app-bg) 60%, var(--app-card)); }
.rd-responses__guest {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 11rem;
    background: var(--app-card);
    font-weight: 600;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: var(--app-text);
    box-shadow: inset -1px 0 0 var(--app-line);
}
[dir="rtl"] .rd-responses__guest { box-shadow: inset 1px 0 0 var(--app-line); }
.rd-responses__guest a { color: inherit; text-decoration: none; }
.rd-responses__guest a:hover { text-decoration: underline; }
.rd-count { margin-inline-start: 0.2rem; color: var(--app-muted); }
.rd-answer {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 7rem;
    max-width: 16rem;
    overflow-wrap: anywhere;
}
.rd-answer--muted { color: var(--app-muted); font-style: italic; }
.rd-answer--empty { color: var(--app-muted); }
.rd-answer-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 16rem; }
.rd-answer-chip {
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--app-bg);
    border: 1px solid var(--app-line);
    font-size: var(--app-text-xs);
    white-space: nowrap;
}
.rd-responses-none { padding: 2.25rem 1.1rem; text-align: center; color: var(--app-muted); }
.rd-responses-none p { margin: 0; }
.rd-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--app-line);
}
.rd-pager__page { color: var(--app-muted); font-size: var(--app-text-sm); }
@media (max-width: 47.99rem) {
    .rd-toolbar__sort, .rd-toolbar__sort select { flex: 1 1 100%; width: 100%; }
    .rd-toolbar__row > .button { flex: 1 1 auto; }
    .rd-filter__remove { margin-inline-start: 0; }
    .rd-responses th, .rd-responses td { padding: 0.6rem 0.75rem; }
    .rd-responses__guest { min-width: 8.5rem; }
}

/* ── Guests → "View RSVP details": slide-over (desktop) / bottom sheet (phone) ── */
html.rd-drawer-open { overflow: hidden; }
.rd-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--app-text) 28%, transparent);
    opacity: 0;
    transition: opacity 200ms var(--app-ease);
}
.rd-drawer-backdrop.is-open { opacity: 1; }
.rd-drawer {
    position: fixed;
    z-index: 91;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(27rem, 100vw);
    overflow-y: auto;
    padding: 1.6rem 1.5rem 2rem;
    background: var(--app-card);
    border-inline-start: 1px solid var(--app-line);
    box-shadow: -18px 0 48px color-mix(in srgb, var(--app-text) 14%, transparent);
    transform: translateX(100%);
    transition: transform 240ms var(--app-ease);
    outline: none;
}
[dir="rtl"] .rd-drawer { transform: translateX(-100%); box-shadow: 18px 0 48px color-mix(in srgb, var(--app-text) 14%, transparent); }
.rd-drawer.is-open { transform: none !important; }
.rd-drawer__grip { display: none; }
.rd-drawer__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
}
.rd-drawer__close:hover, .rd-drawer__close:focus-visible { background: var(--app-bg); color: var(--app-text); }
.rd-drawer__status { margin: 2.5rem 0 0; color: var(--app-muted); }
.rd-quick__head { padding-inline-end: 2.5rem; margin-bottom: 1.35rem; }
.rd-quick__name { margin: 0 0 0.2rem; font-family: var(--app-display); font-size: 1.45rem; font-weight: 500; overflow-wrap: anywhere; }
.rd-quick__sub { margin: 0; color: var(--app-muted); }
.rd-quick__section { padding-top: 1.1rem; border-top: 1px solid var(--app-line); }
.rd-quick__section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.85rem; }
.rd-quick__section-head h3 { margin: 0; font-size: var(--app-text-md); }
.rd-quick__section-head .rd-status { margin: 0; }
.rd-quick__tag { color: var(--app-muted); }
.rd-quick__empty { margin: 0 0 0.85rem; color: var(--app-muted); }
.rd-quick .rd-answers dd, .rd-drawer .rd-answers dd { font-size: var(--app-text-md); }
.rd-quick__foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--app-line); }
.rd-quick__foot a { font-weight: 600; text-decoration: none; }
.rd-quick__foot a:hover { text-decoration: underline; }
[dir="rtl"] .rd-quick__arrow { display: inline-block; transform: scaleX(-1); }
.rd-quick--page { max-width: 36rem; }
@media (max-width: 47.99rem) {
    .rd-drawer,
    [dir="rtl"] .rd-drawer {
        inset-block: auto 0;
        inset-inline: 0;
        width: 100%;
        max-height: 88vh;
        padding: 0.75rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
        border-inline-start: 0;
        border-top: 1px solid var(--app-line);
        border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
        box-shadow: 0 -18px 48px color-mix(in srgb, var(--app-text) 16%, transparent);
        transform: translateY(100%);
    }
    .rd-drawer__grip {
        display: block;
        width: 2.5rem;
        height: 0.28rem;
        margin: 0 auto 0.9rem;
        border-radius: 999px;
        background: var(--app-line-strong);
    }
    .rd-drawer__close { inset-block-start: 0.85rem; width: 2.75rem; height: 2.75rem; }
    .rd-quick__foot a { display: block; padding: 0.35rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-drawer, .rd-drawer-backdrop { transition: none; }
}

/* ═══════════════════════════════════════════
   ORGANISER CONTROL SYSTEM
   One family for the Guests filter panel and every shared chooser /
   action sheet (Sort by, Show, Event Actions, the row "···" menu, the
   send-state chip) and the RSVP Details → Responses toolbar: one control
   height, radius, border, surface, focus ring and chevron; one menu panel,
   row rhythm, hover, selected and open state. Surfaces join through the
   :is(.guest-controls .filters, .rd-toolbar) scope rather than copies.
   ═══════════════════════════════════════════ */

:root {
    --ctl-h: 2.75rem;
    --ctl-radius: 0.75rem;
    --ctl-bg: var(--app-card);
    --ctl-bg-hover: var(--app-surface);
    --ctl-border: color-mix(in srgb, var(--app-line) 55%, var(--app-line-strong));
    --ctl-border-hover: color-mix(in srgb, var(--app-line-strong) 82%, var(--app-muted));
    --ctl-border-active: color-mix(in srgb, var(--app-text) 34%, var(--app-line-strong));
    --ctl-ring: 0 0 0 3px color-mix(in srgb, var(--app-focus) 20%, transparent);
    --ctl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f675e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ctl-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%236f675e' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke='%236f675e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

    --menu-radius: 0.9rem;
    --menu-border: color-mix(in srgb, var(--app-line) 70%, var(--app-line-strong));
    --menu-shadow: 0 1px 2px rgba(44, 38, 33, 0.05), 0 18px 44px -14px rgba(44, 38, 33, 0.26);
    --menu-row-h: 2.5rem;
    --menu-hover: color-mix(in srgb, var(--app-accent-soft) 34%, transparent);
    --menu-selected: color-mix(in srgb, var(--app-accent-soft) 48%, transparent);
}

/* ---- Filter panel surface ---- */

:is(.guest-controls, .rd-toolbar) .filter-field__label {
    margin: 0 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--app-muted);
}

/* ---- Controls: search, native selects, choice triggers, Labels ---- */

:is(.guest-controls .filters, .rd-toolbar) input[type="search"],
:is(.guest-controls .filters, .rd-toolbar) input[type="text"],
:is(.guest-controls .filters, .rd-toolbar) select,
:is(.guest-controls .filters, .rd-toolbar) .choice-trigger,
:is(.guest-controls .filters, .rd-toolbar) .label-menu__trigger,
.rd-toolbar .rd-columns > summary,
.rd-toolbar .rd-export > summary {
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    padding-block: 0;
    padding-inline: 0.9rem;
    border: 1px solid var(--ctl-border);
    border-radius: var(--ctl-radius);
    background-color: var(--ctl-bg);
    color: var(--app-text);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 1px rgba(44, 38, 33, 0.03);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Native selects keep native behaviour (keyboard, mobile pickers, no-JS);
   only the browser's own arrow is replaced by the shared chevron. */
:is(.guest-controls .filters, .rd-toolbar) select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.4rem;
    background-image: var(--ctl-chevron);
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 10px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

html[dir="rtl"] :is(.guest-controls .filters, .rd-toolbar) select {
    background-position: left 0.95rem center;
}

:is(.guest-controls .filters, .rd-toolbar) input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-start: 2.45rem;
    background-image: var(--ctl-search-icon);
    background-repeat: no-repeat;
    background-position: left 0.9rem center;
    background-size: 15px 15px;
}

html[dir="rtl"] :is(.guest-controls .filters, .rd-toolbar) input[type="search"] {
    background-position: right 0.9rem center;
}

.guest-controls .filters .choice-trigger {
    gap: 0.6rem;
    justify-content: space-between;
    white-space: nowrap;
}

.guest-controls .filters .choice-trigger__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guest-controls .filters .choice-trigger::after,
.rd-toolbar .rd-columns > summary::after {
    flex: 0 0 10px;
    width: 10px;
    height: 6px;
    margin: 0;
    border: 0;
    opacity: 1;
    transform: none;
    background: var(--ctl-chevron) no-repeat center / 10px 6px;
    transition: transform 0.18s ease;
}

.guest-controls .filters .label-menu__trigger {
    gap: 0.6rem;
}

.guest-controls .filters .label-menu__trigger-text[data-selected] {
    font-weight: 600;
    color: var(--app-text);
}

.guest-controls .filters .label-menu__chevron {
    width: 10px;
    height: 6px;
    color: var(--app-muted);
    opacity: 1;
}

:is(.guest-controls .filters, .rd-toolbar) input[type="search"]:hover,
:is(.guest-controls .filters, .rd-toolbar) input[type="text"]:hover,
:is(.guest-controls .filters, .rd-toolbar) select:hover,
:is(.guest-controls .filters, .rd-toolbar) .choice-trigger:hover,
:is(.guest-controls .filters, .rd-toolbar) .label-menu__trigger:hover,
.rd-toolbar .rd-columns > summary:hover,
.rd-toolbar .rd-export > summary:hover {
    border-color: var(--ctl-border-hover);
    background-color: var(--ctl-bg-hover);
}

:is(.guest-controls .filters, .rd-toolbar) input[type="search"]:focus,
:is(.guest-controls .filters, .rd-toolbar) input[type="text"]:focus,
:is(.guest-controls .filters, .rd-toolbar) select:focus-visible,
:is(.guest-controls .filters, .rd-toolbar) .choice-trigger:focus-visible,
:is(.guest-controls .filters, .rd-toolbar) .label-menu__trigger:focus-visible,
.rd-toolbar .rd-columns > summary:focus-visible,
.rd-toolbar .rd-export > summary:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-focus) 60%, var(--ctl-border));
    background-color: var(--ctl-bg-hover);
    box-shadow: var(--ctl-ring);
}

/* Open state: the trigger reads as "in use" while its menu is showing —
   a white surface, a firmer border and the chevron turned up. */
.guest-controls .filters .choice-trigger[aria-expanded="true"],
.guest-controls .filters .label-menu[open] > .label-menu__trigger {
    border-color: var(--ctl-border-active);
    background-color: var(--ctl-bg-hover);
}

.guest-controls .filters .choice-trigger[aria-expanded="true"]::after,
.guest-controls .filters .label-menu[open] .label-menu__chevron,
.rd-toolbar .rd-columns[open] > summary::after {
    transform: rotate(180deg);
}

:is(.guest-controls, .rd-toolbar) .filter-submit,
.guest-controls .filter-clear {
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    padding-inline: 1.35rem;
    border-radius: var(--ctl-radius);
    font-size: 0.94rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Labels and Columns panels: the same menu surface as every other chooser. */
.guest-controls .label-menu__panel,
.rd-toolbar .rd-columns__panel {
    top: calc(100% + 0.4rem);
    min-width: max(100%, 15rem);
    padding: 0.4rem;
    border: 1px solid var(--menu-border);
    border-radius: var(--menu-radius);
    background: var(--app-card);
    box-shadow: var(--menu-shadow);
}

.guest-controls .label-menu__option,
.rd-toolbar .rd-columns__choice {
    min-height: var(--menu-row-h);
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 0.6rem;
    font-size: 0.94rem;
    font-weight: 500;
}

.guest-controls .label-menu__option:hover,
.rd-toolbar .rd-columns__choice:hover {
    background: var(--menu-hover);
}

/* ---- Layout: three calm rows on tablet and desktop ----
   Row 1–2: the filters on one even grid (Show | Group | Labels,
   Invitation opened | Delivery status | RSVP Details). Row 3: Search (the
   widest), Sort by (medium), Per page (narrow), Apply — spanning the same
   outer edges as the grid above. Phones keep their stacked grid. */

@media (min-width: 48rem) {
    .guest-controls {
        padding: 1.15rem 1.25rem 1rem;
        border-radius: var(--brand-radius-lg);
    }

    .guest-controls .filters {
        display: block;
    }

    .guest-controls .filter-expand {
        display: block;
        margin: 0;
    }

    .guest-controls .filter-expand__body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        flex: none;
        margin: 0;
    }

    .guest-controls .filter-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem 0.9rem;
        align-items: end;
    }

    /* Four filters (no Group Link and no RSVP Details) fit one even row. */
    .guest-controls .filter-grid:has(> .filter-field:nth-child(4):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guest-controls .filter-grid > .filter-field {
        min-width: 0;
    }

    .guest-controls .filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 0.9rem;
    }

    .guest-controls .filter-bar > .filter-field--search {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .guest-controls .filter-bar > .guest-sort-field {
        flex: 1 1 14rem;
        min-width: 0;
        max-width: 18rem;
    }

    .guest-controls .filter-bar > .guest-per-page-field {
        flex: 0 0 6.25rem;
    }

    .guest-controls .guest-per-page-field select {
        min-width: 0;
    }

    .guest-controls .filter-bar > .filter-submit {
        flex: 0 0 auto;
        min-width: 6.5rem;
    }
}

@media (min-width: 64rem) {
    .guest-controls .filter-bar {
        flex-wrap: nowrap;
    }

    .guest-controls .filter-bar > .filter-field--search {
        flex: 1 1 18rem;
    }

    .guest-controls .filter-bar > .guest-sort-field {
        flex: 0 1 15rem;
    }
}

@media (max-width: 47.99rem) {
    /* One grid for every control: Search first, the filters in pairs, then
       Sort by, and Per page beside Apply. */
    .guest-controls .filter-expand__body {
        margin-top: 0;
        gap: 0.8rem 0.7rem;
    }

    .guest-controls .filter-grid,
    .guest-controls .filter-bar {
        display: contents;
    }

    .guest-controls .filter-field--search {
        order: -1;
        grid-column: 1 / -1;
    }

    .guest-controls .guest-sort-field,
    .guest-controls .filter-bar > .filter-clear {
        grid-column: 1 / -1;
    }

    .guest-controls .filter-bar > .filter-submit {
        grid-column: auto;
        width: 100%;
    }
}

@media (max-width: 24rem) {
    .guest-controls .filter-bar > .filter-submit {
        grid-column: 1 / -1;
    }
}

/* ---- Menu panel: choosers and action sheets ---- */

.choice-sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.5rem;
    border-color: var(--menu-border);
    box-shadow: var(--menu-shadow);
}

.choice-sheet[hidden] {
    display: none;
}

.choice-sheet > .choice-sheet__title,
.choice-sheet__head {
    flex: 0 0 auto;
    margin: 0 0 0.35rem;
    padding: 0.5rem 0.7rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
}

.choice-sheet__head {
    padding-block: 0.25rem 0.3rem;
    padding-inline-end: 0.25rem;
}

.choice-sheet__head .choice-sheet__title {
    padding: 0;
    border: 0;
}

.choice-sheet__title {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
}

.choice-sheet__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: var(--app-line-strong) transparent;
}

.choice-sheet__list::-webkit-scrollbar { width: 8px; }
.choice-sheet__list::-webkit-scrollbar-track { background: transparent; }
.choice-sheet__list::-webkit-scrollbar-thumb {
    border: 2px solid var(--app-card);
    border-radius: 999px;
    background: var(--app-line-strong);
}

/* One row anatomy for every entry: plain choices, links, buttons, POST
   forms. Same height, inset, radius and text column. */
.choice-sheet__option,
.choice-sheet__option--link,
.choice-sheet__option--icon {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: var(--menu-row-h);
    padding: 0.45rem 0.7rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--app-text);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    box-shadow: none;
    transition: background-color 0.12s ease;
}

.choice-sheet__option .ui-icon {
    color: var(--app-muted);
    transition: color 0.12s ease;
}

.choice-sheet__option:hover,
.choice-sheet__option--link:hover,
.choice-sheet__option--icon:hover {
    background: var(--menu-hover);
    transform: none;
    box-shadow: none;
}

.choice-sheet__option:hover .ui-icon,
.choice-sheet__option:focus-visible .ui-icon {
    color: var(--app-text);
}

.choice-sheet__option:focus-visible {
    outline: none;
    background: var(--menu-hover);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-focus) 45%, transparent);
}

.choice-sheet__option.is-danger,
.choice-sheet__option.is-danger .ui-icon {
    color: var(--app-bad);
}

.choice-sheet__option.is-danger:hover,
.choice-sheet__option.is-danger:focus-visible {
    background: color-mix(in srgb, var(--app-bad-soft) 70%, transparent);
}

/* The current choice: tinted, heavier and marked with a check, so it never
   depends on colour alone (and aria-current says it to screen readers). */
.choice-sheet__option.is-selected {
    background: var(--menu-selected);
    font-weight: 650;
}

.choice-sheet__option.is-selected::after {
    content: "";
    flex: 0 0 auto;
    width: 0.32rem;
    height: 0.62rem;
    margin-inline-start: auto;
    margin-block-start: -0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* Headed sections in long choosers (Sort by). */
.choice-sheet__group {
    display: grid;
    gap: 1px;
}

.choice-sheet__group + .choice-sheet__group {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
}

.choice-sheet__group-label {
    margin: 0;
    padding: 0.45rem 0.7rem 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

/* Letter-spacing breaks Arabic joining; the uppercase tracking is a Latin
   convention only. */
html[lang|="ar"] .choice-sheet__title,
html[lang|="ar"] .choice-sheet__group-label,
html[lang|="ar"] :is(.guest-controls, .rd-toolbar) .filter-field__label,
html[lang|="ar"] .rd-toolbar .rd-columns__title {
    letter-spacing: 0;
}

.choice-sheet__note {
    padding-inline: 0.7rem;
}

.choice-sheet__cancel {
    flex: 0 0 auto;
    margin-top: 0.4rem;
}

/* Reorder mode: the list scrolls, so Save / Cancel sit in the panel's own
   footer rather than a sticky overlay. */
.choice-sheet.is-reordering .choice-sheet__reorder-foot {
    position: static;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-bottom: 0.1rem;
}

.choice-sheet__reorder-row {
    padding-inline: 0.7rem 0.3rem;
    border: 0;
    border-radius: 0.6rem;
}

@media (min-width: 48rem) {
    .choice-sheet {
        border-radius: var(--menu-radius);
        animation: menu-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* A desktop popover's Cancel is a quiet footer row, not a second button. */
    .choice-sheet__cancel {
        width: calc(100% + 1rem);
        min-height: var(--menu-row-h);
        margin: 0.4rem -0.5rem -0.5rem;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
        border-radius: 0;
        background: transparent;
        color: var(--app-muted);
        font-size: 0.88rem;
        font-weight: 600;
        box-shadow: none;
    }

    .choice-sheet__cancel:hover,
    .choice-sheet__cancel:focus-visible {
        background: color-mix(in srgb, var(--app-bg) 70%, transparent);
        color: var(--app-text);
        transform: none;
        box-shadow: none;
        outline: none;
    }

    .choice-sheet__cancel:focus-visible {
        box-shadow: inset 0 0 0 2px var(--app-focus);
    }

    .choice-sheet.is-reordering .choice-sheet__cancel {
        display: none;
    }
}

@media (max-width: 47.99rem) {
    .choice-sheet {
        padding: 0.6rem 0.6rem 0.7rem;
    }

    .choice-sheet__option,
    .choice-sheet__option--link,
    .choice-sheet__option--icon {
        min-height: 2.75rem;
    }

    .choice-sheet__cancel {
        min-height: 2.75rem;
        border-radius: var(--ctl-radius);
    }
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .choice-sheet { animation: none; }
}

/* ---- Menu triggers: the page "More" and the row "···" ---- */

.page-tools > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 1rem;
    border: 1px solid var(--ctl-border);
    border-radius: var(--app-radius-pill);
    background: var(--ctl-bg);
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.overflow-menu__button {
    border-color: var(--ctl-border);
    background: var(--ctl-bg);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.page-tools > summary:hover,
.overflow-menu__button:hover {
    border-color: var(--ctl-border-hover);
    background: var(--ctl-bg-hover);
    color: var(--app-text);
}

.page-tools > summary:focus-visible,
.overflow-menu__button:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-focus) 60%, var(--ctl-border));
    box-shadow: var(--ctl-ring);
}

/* Open: the trigger stays visibly "pressed" while its menu is showing. */
.page-tools > summary[aria-expanded="true"],
.overflow-menu__button[aria-expanded="true"],
.rd-toolbar .rd-columns[open] > summary,
.rd-toolbar .rd-export > summary[aria-expanded="true"] {
    border-color: var(--ctl-border-active);
    background: var(--menu-selected);
    color: var(--app-text);
}

/* ---- RSVP Details → Responses toolbar ----
   The same panel and controls as the Guests filters. Row 1: Search (widest)
   | Sort | Columns | Export | Apply on one baseline; the question-filter
   builder sits below a hairline. Phones: Search and Sort full width,
   Columns beside Export, Apply full width. */

.rd-toolbar {
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--app-line, rgba(0, 0, 0, 0.08));
    border-radius: var(--app-radius-md, 0.85rem);
    background: var(--app-surface-2, rgba(0, 0, 0, 0.015));
    box-shadow: none;
}

.rd-toolbar__row {
    align-items: flex-end;
    gap: 1rem 0.9rem;
}

.rd-toolbar .filter-field {
    margin: 0;
}

.rd-toolbar__search {
    flex: 1 1 18rem;
}

.rd-toolbar__sort {
    flex: 0 1 15rem;
    min-width: 11rem;
}

.rd-toolbar__sort select {
    width: 100%;
    min-width: 0;
}

.rd-toolbar .rd-columns > summary,
.rd-toolbar .rd-export > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-inline: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.rd-toolbar .rd-export > summary .ui-icon {
    color: var(--app-muted);
}

.rd-toolbar .filter-submit {
    flex: 0 0 auto;
    min-width: 6.5rem;
}

/* Columns: a form-part menu (checkboxes submit with Apply), dismissible
   through the shared js-menu behaviour (Escape, outside click). */
.rd-toolbar .rd-columns__panel {
    top: calc(100% + 0.4rem);
    gap: 1px;
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(22rem, 60vh);
    margin-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--app-line-strong) transparent;
}

.rd-toolbar .rd-columns__title {
    margin: 0 0 0.35rem;
    padding: 0.4rem 0.65rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.rd-toolbar .rd-columns__choice {
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.rd-toolbar .rd-columns__choice input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    min-height: 0;
    margin: 0;
    accent-color: var(--app-text);
}

.rd-toolbar .rd-columns__choice:has(input:focus-visible) {
    background: var(--menu-hover);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-focus) 45%, transparent);
}

/* Question-filter builder. */
.rd-toolbar .rd-filters {
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
}

.rd-toolbar .rd-filter {
    gap: 0.6rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
    border-radius: var(--menu-radius);
    background: color-mix(in srgb, var(--app-card) 70%, transparent);
}

.rd-toolbar .rd-filter__remove {
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--ctl-h);
    width: var(--ctl-h);
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ctl-radius);
    background: transparent;
    color: var(--app-muted);
    font-size: 1.25rem;
}

.rd-toolbar .rd-filter__remove:hover,
.rd-toolbar .rd-filter__remove:focus-visible {
    border-color: var(--ctl-border);
    background: var(--ctl-bg-hover);
    color: var(--app-text);
    transform: none;
    box-shadow: none;
}

.rd-toolbar .rd-filters__add {
    min-height: 2.5rem;
    padding-inline: 0.95rem;
    border: 1px dashed var(--ctl-border-hover);
    border-radius: var(--ctl-radius);
    background: transparent;
    color: var(--app-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.rd-toolbar .rd-filters__add:hover,
.rd-toolbar .rd-filters__add:focus-visible {
    border-style: solid;
    background: var(--ctl-bg-hover);
    transform: none;
    box-shadow: none;
}

@media (min-width: 48rem) {
    .rd-toolbar {
        padding: 1.15rem 1.25rem;
        border-radius: var(--brand-radius-lg);
    }
}

@media (max-width: 47.99rem) {
    .rd-toolbar__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem 0.7rem;
        position: relative;
    }

    .rd-toolbar__search,
    .rd-toolbar__sort,
    .rd-toolbar__row > .filter-submit {
        grid-column: 1 / -1;
        width: 100%;
    }

    .rd-toolbar .rd-columns,
    .rd-toolbar .rd-export {
        position: static;
        display: block;
    }

    .rd-toolbar .rd-columns > summary,
    .rd-toolbar .rd-export > summary {
        justify-content: center;
        width: 100%;
    }

    /* The Columns panel spans the toolbar row, never past the screen edge. */
    .rd-toolbar .rd-columns__panel {
        top: auto;
        inset-inline: 0;
        width: auto;
        margin-top: 0.4rem;
    }

    /* Each filter is a small card: the question with its remove button on
       the first line, condition and value full width beneath. */
    .rd-toolbar .rd-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--ctl-h);
        align-items: center;
    }

    .rd-toolbar .rd-filter > select,
    .rd-toolbar .rd-filter > input {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .rd-toolbar .rd-filter > .rd-filter__question {
        grid-column: 1;
        grid-row: 1;
    }

    .rd-toolbar .rd-filter__remove {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }
}

/* ================================================================
   Audiences (Event → Audiences) — Audience Engine V1 builder.
   Mobile first: one calm column; from 64rem a builder column and a
   quiet summary column. Logical properties only (RTL-safe).
   ================================================================ */
.aud-kicker {
    margin: 0 0 0.6rem;
    font-size: var(--app-text-xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-muted);
}
.aud-presets { margin: 0 0 1.25rem; }
.aud-presets__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aud-preset {
    min-height: 2.5rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    color: var(--app-text);
    font: inherit;
    font-size: var(--app-text-sm);
    cursor: pointer;
    transition: background 0.15s var(--app-ease, ease), border-color 0.15s var(--app-ease, ease);
}
.aud-preset:hover { border-color: var(--app-accent); }
.aud-preset[aria-pressed="true"] { background: var(--app-accent-soft); border-color: var(--app-accent); font-weight: 600; }
.aud-preset:focus-visible,
.aud-pill:focus-visible,
.aud-rule__remove:focus-visible,
.aud-add__item:focus-visible,
.aud-saved__open:focus-visible { outline: 2px solid var(--app-focus, var(--app-accent)); outline-offset: 2px; }

.aud-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.aud-main, .aud-side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (min-width: 64rem) {
    .aud-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); align-items: start; }
    .aud-side { position: sticky; top: 1rem; }
}
/* Phones/tablets: one column in reading order — conditions, then the count
   and Save right under them (never below a long guest list), then the
   matching guests, then saved audiences. */
@media (max-width: 63.99rem) {
    .aud-main, .aud-side { display: contents; }
    .aud-builder { order: 1; }
    .aud-summary { order: 2; }
    .aud-preview { order: 3; }
    .aud-saved { order: 4; }
}
.aud-builder h2, .aud-preview h2 { margin: 0; font-size: var(--app-text-lg, 1.1rem); }
.aud-builder__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.aud-editing { margin: 0.25rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.aud-match { display: flex; align-items: center; gap: 0.5rem; font-size: var(--app-text-sm); }
.aud-match select { min-height: var(--app-control-h-sm, 2.25rem); }

.aud-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.aud-rule {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
}
.aud-rule--issue { border-color: var(--app-warn); background: var(--app-warn-soft); }
.aud-rule__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; }
.aud-rule__field { font-weight: 600; font-size: var(--app-text-sm); }
.aud-rule__op { width: auto; min-width: 0; max-width: 12rem; min-height: var(--app-control-h-sm, 2.25rem); padding-inline-end: 2rem; font-size: var(--app-text-sm); }
.aud-rule__remove {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--app-muted);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.aud-rule__remove:hover { background: var(--app-line); color: var(--app-text); }
.aud-rule__hint, .aud-rule__issue { margin: 0.55rem 0 0; font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-rule__issue { color: var(--app-text); font-weight: 600; }
.aud-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.aud-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 2.25rem;
    max-width: 100%;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-pill);
    background: var(--app-card); color: var(--app-text);
    font: inherit; font-size: var(--app-text-sm);
    cursor: pointer; text-align: start;
}
.aud-pill__label { overflow-wrap: anywhere; }
.aud-pill__note { font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-pill[aria-pressed="true"] { background: var(--app-accent-soft); border-color: var(--app-accent); font-weight: 600; }
.aud-pill[aria-pressed="true"]::before { content: "✓"; font-size: 0.75em; }
.aud-pill--missing { border-style: dashed; border-color: var(--app-warn); }
.aud-rules-empty { margin: 0 0 0.75rem; }

.aud-add { position: relative; margin-top: 1rem; display: inline-block; }
.aud-add > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.aud-add > summary::-webkit-details-marker { display: none; }
.aud-add__panel {
    position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 0.35rem);
    width: min(20rem, calc(100vw - 2.5rem));
    max-height: 70vh; overflow-y: auto;
    padding: 0.5rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.aud-add__group + .aud-add__group { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--app-line); }
.aud-add__group-title { margin: 0.35rem 0.5rem 0.2rem; font-size: var(--app-text-xs); font-weight: 650; color: var(--app-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.aud-add__item {
    display: block; width: 100%;
    min-height: 2.5rem; padding: 0.5rem 0.6rem;
    border: 0; border-radius: var(--app-radius-xs);
    background: transparent; color: var(--app-text);
    font: inherit; font-size: var(--app-text-sm); text-align: start; cursor: pointer;
}
.aud-add__item:hover { background: var(--app-bg); }

.aud-summary { display: grid; gap: 0.35rem; }
.aud-count { margin: 0; font-family: var(--app-display, inherit); font-size: 2rem; line-height: 1.15; }
.aud-count--review { font-size: 1.35rem; color: var(--app-warn); }
.aud-explain { margin: 0; font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.aud-status { min-height: 1.25rem; font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-status--error { color: var(--app-bad); }
.aud-status--review { color: var(--app-text); font-size: var(--app-text-sm); }
.aud-stats { margin: 0.35rem 0 0; display: grid; gap: 0.4rem; border-top: 1px solid var(--app-line); padding-top: 0.75rem; }
.aud-stat { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--app-text-sm); }
.aud-stat dt { color: var(--app-muted); }
.aud-stat dd { margin: 0; font-weight: 600; }
.aud-stat--list { display: block; }
.aud-stat--list dd { font-weight: 400; }
.aud-breakdown { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.aud-breakdown li { display: flex; justify-content: space-between; gap: 1rem; }
.aud-breakdown__count { font-weight: 600; }
.aud-save { margin-top: 0.75rem; }
.aud-save__open { width: 100%; }
.aud-save__form { display: grid; gap: 0.45rem; }
.aud-save__form input { width: 100%; }
.aud-save__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aud-field-error { margin: 0; min-height: 1rem; font-size: var(--app-text-xs); color: var(--app-bad); }

/* Saved Audiences = navigation, the builder = detail. Every row is the same
   calm height: one line of name, one line of "12 guests · 3 conditions"
   (both ellipsised), never the definition itself. */
.aud-saved__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.aud-saved__total { margin-inline-start: 0.2rem; font-weight: 600; color: var(--app-muted); letter-spacing: 0; }
.aud-saved__tools { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.aud-saved__tools[hidden] { display: none; }
.aud-saved__search { position: relative; flex: 1; min-width: 0; }
.aud-saved__search-icon { position: absolute; inset-inline-start: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); pointer-events: none; }
.aud-saved__search input {
    width: 100%; min-height: var(--app-control-h-sm, 2.25rem);
    padding-block: 0.3rem; padding-inline: 1.9rem 2rem;
    font-size: var(--app-text-sm);
}
.aud-saved__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.aud-saved__search-clear {
    position: absolute; inset-inline-end: 0.2rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--app-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.aud-saved__search-clear:hover { background: var(--app-line); color: var(--app-text); }
.aud-saved__options { position: relative; flex: none; }
.aud-saved__options > summary { list-style: none; }
.aud-saved__options > summary::-webkit-details-marker { display: none; }
.aud-saved__options-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: var(--app-control-h-sm, 2.25rem); height: var(--app-control-h-sm, 2.25rem);
    border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-sm);
    background: var(--app-card); color: var(--app-text); cursor: pointer;
}
.aud-saved__options[open] > .aud-saved__options-button { border-color: var(--app-accent); background: var(--app-accent-soft); }
.aud-saved__options-dot {
    position: absolute; top: 0.3rem; inset-inline-end: 0.3rem;
    width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--app-accent);
    box-shadow: 0 0 0 2px var(--app-card);
}
.aud-saved__options-dot[hidden] { display: none; }
.aud-saved__options-panel {
    position: absolute; z-index: 40; inset-inline-end: 0; top: calc(100% + 0.35rem);
    width: min(15rem, calc(100vw - 2.5rem));
    padding: 0.5rem 0.6rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    display: grid; gap: 0.35rem;
}
.aud-saved__choice { margin: 0; padding: 0; border: 0; display: grid; gap: 0.1rem; }
.aud-saved__choice + .aud-saved__choice { padding-top: 0.4rem; border-top: 1px solid var(--app-line); }
.aud-saved__choice legend { padding: 0.2rem 0.2rem 0.3rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted); }
.aud-saved__choice label {
    display: flex; align-items: center; gap: 0.55rem;
    min-height: 2.25rem; padding: 0.25rem 0.3rem;
    border-radius: var(--app-radius-xs);
    font-size: var(--app-text-sm); cursor: pointer;
}
.aud-saved__choice label:hover { background: var(--app-bg); }
.aud-saved__choice input { margin: 0; accent-color: var(--app-accent); }
.aud-saved__choice-count { margin-inline-start: auto; font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-saved__note { margin: 0.6rem 0 0; font-size: var(--app-text-xs); }
.aud-saved__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.aud-saved__list[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s ease; }
.aud-saved__item {
    position: relative; display: flex; align-items: center; gap: 0.15rem;
    min-height: 3.35rem;
    border-radius: var(--app-radius-sm);
}
/* Selected: a tinted row AND a solid inline-start bar AND a bolder name —
   never colour alone (plus aria-current and "Selected" for screen readers). */
.aud-saved__item.is-current { background: var(--app-accent-soft); }
.aud-saved__item.is-current::before {
    content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0;
    width: 3px; border-radius: 3px; background: var(--app-accent);
}
.aud-saved__open {
    flex: 1; min-width: 0;
    display: grid; gap: 0.1rem;
    justify-content: stretch; justify-items: start; align-content: center;
    padding: 0.5rem 0.65rem;
    border: 0; border-radius: var(--app-radius-sm);
    background: transparent; color: var(--app-text);
    font: inherit; text-align: start; cursor: pointer;
}
.aud-saved__open:hover { background: var(--app-bg); }
.aud-saved__item.is-current .aud-saved__open:hover { background: transparent; }
.aud-saved__name, .aud-saved__meta { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-saved__name { font-weight: 600; font-size: var(--app-text-sm); }
.aud-saved__item.is-current .aud-saved__name { font-weight: 700; }
.aud-saved__meta { display: flex; align-items: center; gap: 0.35rem; font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-saved__meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.aud-saved__item--review .aud-saved__meta { color: var(--app-warn); font-weight: 600; }
.aud-saved__review-mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 0.95rem; height: 0.95rem; border-radius: 999px;
    background: var(--app-warn); color: var(--app-card); font-size: 0.65rem; font-weight: 800; line-height: 1;
}
.aud-saved__menu { flex: none; }
.aud-saved__empty { padding: 0.75rem 0.25rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.aud-saved__item--confirm { display: block; padding: 0.6rem; background: var(--app-bad-soft); }
.aud-saved__confirm { margin: 0 0 0.5rem; font-size: var(--app-text-sm); overflow-wrap: anywhere; }
.aud-saved__confirm-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.aud-saved__pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.aud-saved__pager[hidden] { display: none; }
.aud-saved__page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border: 1px solid var(--app-line); border-radius: 999px;
    background: var(--app-card); color: var(--app-text); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.aud-saved__page-btn:hover:not(:disabled) { border-color: var(--app-accent); }
.aud-saved__page-btn:disabled { opacity: 0.4; cursor: default; }
/* The arrows point along the reading direction. */
[dir="rtl"] .aud-saved__page-btn span { display: inline-block; transform: scaleX(-1); }
.aud-saved__page-label { min-width: 3.5rem; text-align: center; font-size: var(--app-text-sm); color: var(--app-muted); font-variant-numeric: tabular-nums; }
.aud-saved__search-clear:focus-visible,
.aud-saved__options-button:focus-visible,
.aud-saved__page-btn:focus-visible { outline: 2px solid var(--app-focus, var(--app-accent)); outline-offset: 2px; }
.aud-save__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aud-save__row .aud-save__open { flex: 1 1 10rem; width: auto; }
.aud-save__view[hidden] { display: none; }
.aud-save__open:disabled { opacity: 0.45; cursor: not-allowed; }
.aud-draft { margin: -0.25rem 0 1rem; padding: 0.7rem 0.85rem; border-radius: var(--app-radius-sm); background: var(--app-accent-soft); font-size: var(--app-text-sm); }
.aud-draft[hidden] { display: none; }
.aud-draft__note { margin: 0; }
.aud-draft__excluded { margin-top: 0.45rem; }
.aud-draft__heading { margin: 0; font-size: var(--app-text-xs); font-weight: 650; color: var(--app-muted); }
.aud-draft__excluded ul { margin: 0.15rem 0 0; padding-inline-start: 1.1rem; color: var(--app-muted); }
.aud-toast { margin: 0.5rem 0 0; min-height: 1rem; font-size: var(--app-text-xs); color: var(--app-muted); }

.aud-preview h2 { margin-bottom: 0.75rem; }
.aud-empty { margin: 0.5rem 0; color: var(--app-muted); }
.aud-guests { list-style: none; margin: 0; padding: 0; }
.aud-guest { padding: 0.8rem 0; border-top: 1px solid var(--app-line); display: grid; gap: 0.25rem; }
.aud-guest:first-child { border-top: 0; padding-top: 0.25rem; }
.aud-guest__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.aud-guest__name { font-weight: 600; color: var(--app-text); text-decoration: none; overflow-wrap: anywhere; }
.aud-guest__name:hover { text-decoration: underline; }
.aud-guest__meta, .aud-guest__extra, .aud-guest__contact { margin: 0; font-size: var(--app-text-xs); color: var(--app-muted); }
.aud-guest__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.aud-guest__seat { color: var(--app-text); }
.aud-guest__contact { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.aud-avail { display: inline-flex; align-items: center; gap: 0.3rem; }
.aud-avail__glyph { font-size: 0.8rem; font-weight: 700; }
.aud-avail--yes .aud-avail__glyph { color: var(--app-ok); }
.aud-avail--no { opacity: 0.75; }
.aud-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--app-line); }
.aud-pager__label { font-size: var(--app-text-sm); color: var(--app-muted); }

/* Guests → Audience selector. Audience = a reusable population chosen here;
   quick filters below narrow it for this view. One quiet line, no card. */
.guest-audience { margin: 0 0 0.9rem; }
.guest-audience__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.guest-audience__label { font-size: var(--app-text-sm); font-weight: 600; color: var(--app-muted); }
.guest-audience__menu { position: relative; min-width: 0; max-width: 100%; }
.guest-audience__menu > summary { list-style: none; }
.guest-audience__menu > summary::-webkit-details-marker { display: none; }
.guest-audience__trigger {
    display: inline-flex; align-items: center; gap: 0.55rem;
    max-width: min(24rem, 100%);
    min-height: 2.5rem; padding: 0.4rem 0.95rem;
    border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-pill);
    background: var(--app-card); color: var(--app-text);
    font-size: var(--app-text-sm); font-weight: 600; cursor: pointer;
}
.guest-audience__trigger:hover { border-color: var(--app-accent); }
.guest-audience__trigger.is-active { background: var(--app-accent-soft); border-color: var(--app-accent); }
.guest-audience__trigger:focus-visible { outline: 2px solid var(--app-focus, var(--app-accent)); outline-offset: 2px; }
.guest-audience__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-audience__panel {
    position: absolute; z-index: 45; inset-inline-start: 0; top: calc(100% + 0.35rem);
    width: min(21rem, calc(100vw - 2rem));
    max-height: 70vh; overflow-y: auto;
    padding: 0.45rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.guest-audience__group { margin: 0.55rem 0.5rem 0.2rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted); }
.guest-audience__option {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 2.5rem; padding: 0.4rem 0.55rem;
    border-radius: var(--app-radius-xs);
    color: var(--app-text); text-decoration: none; font-size: var(--app-text-sm);
}
.guest-audience__option:hover, .guest-audience__option:focus-visible { background: var(--app-bg); }
.guest-audience__option[hidden] { display: none; }
.guest-audience__option[aria-current="true"] { font-weight: 650; }
.guest-audience__check { flex: none; display: inline-flex; width: 1rem; color: var(--app-accent); visibility: hidden; }
.guest-audience__check svg { width: 1rem; height: 1rem; }
.guest-audience__option[aria-current="true"] .guest-audience__check { visibility: visible; }
.guest-audience__option-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-audience__option-note { flex: none; margin-inline-start: auto; font-size: var(--app-text-xs); font-weight: 600; color: var(--app-warn); }
.guest-audience__none { margin: 0.2rem 0.55rem 0.4rem; font-size: var(--app-text-xs); color: var(--app-muted); }
.guest-audience__search { padding: 0.15rem 0.3rem 0.3rem; }
.guest-audience__search input { width: 100%; min-height: var(--app-control-h-sm, 2.25rem); font-size: var(--app-text-sm); }
.guest-audience__build {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.4rem; padding: 0.6rem 0.55rem 0.35rem;
    border-top: 1px solid var(--app-line);
    color: var(--app-accent-strong, var(--app-accent)); font-size: var(--app-text-sm); font-weight: 600; text-decoration: none;
}
.guest-audience__build svg { width: 1rem; height: 1rem; }
.guest-audience__build:hover { text-decoration: underline; }
.guest-audience__state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.85rem; font-size: var(--app-text-sm); }
.guest-audience__count { color: var(--app-muted); font-variant-numeric: tabular-nums; }
.guest-audience__count--review { color: var(--app-warn); font-weight: 600; }
.guest-audience__link { color: var(--app-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--app-line-strong); text-underline-offset: 0.2em; }
.guest-audience__link:hover { text-decoration-color: currentColor; }
.guest-audience__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-inline-start: auto; }
.guest-audience__hint { margin: 0.4rem 0 0; font-size: var(--app-text-xs); color: var(--app-muted); }
.guest-audience__notice { margin: 0.5rem 0 0; font-size: var(--app-text-sm); }
.guest-audience__notice--error { color: var(--app-bad); }
.guest-save-audience > summary { list-style: none; }
.guest-save-audience > summary::-webkit-details-marker { display: none; }
.guest-save-audience[open] > summary { background: var(--app-accent-soft); }
.guest-save-audience__panel {
    position: absolute; z-index: 44; inset-inline-end: 0; top: calc(100% + 0.4rem);
    width: min(26rem, 100%);
    padding: 1rem;
    background: var(--app-card);
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-sm);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}
.guest-save-audience__form { display: grid; gap: 0.45rem; }
.guest-save-audience__form label { font-size: var(--app-text-sm); font-weight: 600; }
.guest-save-audience__form input[type="text"] { width: 100%; }
.guest-save-audience__heading { margin: 0.35rem 0 0; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted); }
.guest-save-audience__included { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--app-text-sm); }
.guest-save-audience__included li { display: flex; align-items: flex-start; gap: 0.45rem; overflow-wrap: anywhere; }
.guest-save-audience__included svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--app-ok); }
.guest-save-audience__excluded[hidden] { display: none; }
.guest-save-audience__excluded ul { margin: 0.15rem 0 0; padding-inline-start: 1.1rem; font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.guest-save-audience__excluded .help { margin: 0.25rem 0 0; font-size: var(--app-text-xs); }
.guest-save-audience__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.guest-save-audience__done { margin: 0.25rem 0 0; font-size: var(--app-text-sm); }
.guest-audience-state .actions { justify-content: center; }
@media (max-width: 40rem) {
    .guest-audience__actions { margin-inline-start: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .guest-audience__actions > * { min-width: 0; }
    .guest-audience__actions .button,
    .guest-save-audience > summary { width: 100%; justify-content: center; text-align: center; white-space: normal; }
    .guest-audience__trigger { width: 100%; justify-content: space-between; }
    .guest-audience__menu { flex: 1 1 100%; }
    .guest-save-audience__panel { inset-inline: 0; width: auto; }
}


/* ================================================================
   Communications (Event → Communications) — targeted email campaigns.
   Mobile first: one calm column; from 64rem the draft / results pages
   gain a quiet side column. Logical properties only (RTL-safe);
   organiser text keeps its own direction via dir="auto".
   ================================================================ */
.comm-head__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0; }
.comm-channel { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--app-text-xs); font-weight: 600; letter-spacing: 0.03em; color: var(--app-muted); }
.comm-channel__icon { width: 0.95rem; height: 0.95rem; }
.comm-time { font-size: var(--app-text-sm); color: var(--app-muted); white-space: nowrap; }
.comm-transport-note { margin-bottom: 1rem; }

.comm-section { margin-top: 0.5rem; }
.comm-section__title { margin: 0 0 0.75rem; font-size: var(--app-text-lg); }
.comm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.comm-card__link {
    display: grid; gap: 0.45rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    color: var(--app-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comm-card__link:hover { border-color: var(--app-line-strong); box-shadow: 0 1px 4px color-mix(in srgb, var(--app-text) 8%, transparent); }
.comm-card__link:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.comm-card__name { font-weight: 650; font-size: 1.02rem; min-width: 0; overflow-wrap: anywhere; }
.comm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; }
.comm-card__audience { font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.comm-card__counts { font-size: var(--app-text-sm); color: var(--app-text); }
.comm-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.comm-pager__label { font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-empty { text-align: center; }
.comm-create { display: inline-flex; }
.comm-create .button, .comm-confirm__button { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Draft steps */
.comm-steps { margin: 0 0 1.25rem; }
.comm-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.comm-steps__item a {
    display: flex; align-items: center; gap: 0.55rem;
    min-height: 2.9rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-card);
    color: var(--app-muted);
    text-decoration: none;
    font-size: var(--app-text-sm);
    font-weight: 600;
}
.comm-steps__item a:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-steps__num {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--app-line-strong);
    font-size: var(--app-text-xs);
}
.comm-steps__check { width: 0.9rem; height: 0.9rem; }
.comm-steps__label { min-width: 0; overflow-wrap: anywhere; }
.comm-steps__item.is-current a { border-color: var(--app-accent); color: var(--app-text); background: var(--app-accent-soft); }
.comm-steps__item.is-current .comm-steps__num { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-card); }
.comm-steps__item.is-done a { color: var(--app-text); }
.comm-steps__item.is-done .comm-steps__num { background: var(--app-ok-soft); border-color: var(--app-ok); color: var(--app-ok); }
@media (max-width: 30rem) {
    .comm-steps__item a { flex-direction: column; justify-content: center; gap: 0.25rem; text-align: center; padding: 0.5rem 0.35rem; }
}

/* Layout */
.comm-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
.comm-layout__main, .comm-layout__side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
/* Grid children default to min-width:auto — a wide table would widen its card
   past a phone screen instead of scrolling inside .table-wrap. */
.comm-layout__main > *, .comm-layout__side > *, .comm-panel, .comm-results { min-width: 0; }
.comm-table tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; color: var(--app-text); }
@media (min-width: 64rem) {
    .comm-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); align-items: start; }
    .comm-layout__side { position: sticky; top: 1rem; }
}
.comm-panel h2, .comm-preview h2, .comm-test h2, .comm-confirm h2 { margin: 0 0 0.5rem; font-size: var(--app-text-lg); }
.comm-panel > .muted { margin-top: 0; }
.comm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }
.comm-actions--sticky {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 1.25rem; padding: 0.75rem 0;
    background: linear-gradient(to top, var(--app-bg) 70%, transparent);
}
.comm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.comm-inline select { flex: 1 1 12rem; min-width: 0; }

/* Audience step */
.comm-current {
    margin: 0.75rem 0 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
}
.comm-current__label { margin: 0 0 0.2rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted); }
.comm-current__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.comm-current__summary { margin: 0.35rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.comm-current__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.6rem 0 0; font-size: var(--app-text-sm); }
.comm-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.comm-fieldset legend { margin-bottom: 0.6rem; padding: 0; font-weight: 650; }
.comm-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 40rem) { .comm-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comm-choice { position: relative; min-width: 0; }
.comm-choice__input { position: absolute; inset-inline-start: 0.95rem; top: 1.05rem; margin: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--app-accent); }
.comm-choice__label {
    display: grid; gap: 0.15rem;
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    padding-inline-start: 2.6rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-card);
    cursor: pointer;
}
.comm-choice__input:checked + .comm-choice__label { border-color: var(--app-accent); background: var(--app-accent-soft); }
.comm-choice__input:focus-visible + .comm-choice__label { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-choice.is-disabled .comm-choice__label { cursor: not-allowed; opacity: 0.72; }
.comm-choice__name { font-weight: 600; overflow-wrap: anywhere; }
.comm-choice__meta { font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-choice__note { font-size: var(--app-text-xs); color: var(--app-muted); overflow-wrap: anywhere; }
.comm-search { display: block; margin-bottom: 0.6rem; }
.comm-search input { width: 100%; }
.comm-build { margin: 0.75rem 0 0; font-size: var(--app-text-sm); }

/* Message step */
.comm-radio { display: flex; align-items: flex-start; gap: 0.55rem; min-height: 2.25rem; margin-bottom: 0.25rem; cursor: pointer; }
.comm-radio input { margin-top: 0.2rem; accent-color: var(--app-accent); }
.comm-lang-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 1rem; }
.comm-lang-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    color: var(--app-text);
    font: inherit; font-size: var(--app-text-sm);
    cursor: pointer;
}
.comm-lang-tab[aria-selected="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); font-weight: 650; }
.comm-lang-tab:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-lang-tab__default { font-size: var(--app-text-xs); color: var(--app-muted); font-weight: 500; }
.comm-lang-tab__error { color: var(--app-bad); font-weight: 700; }
.comm-lang-panel { padding-top: 0.25rem; }
.comm-lang-panel + .comm-lang-panel { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--app-line); }
.comm-lang-panel[hidden] + .comm-lang-panel, .comm-lang-panel[hidden] { margin-top: 0; padding-top: 0; border-top: 0; }
.comm-lang-panel__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 1rem; }
.comm-lang-panel textarea { width: 100%; min-height: 12rem; line-height: 1.55; resize: vertical; }
.comm-lang-panel input[type="text"] { width: 100%; }
.comm-counter { margin: 0.25rem 0 0; font-size: var(--app-text-xs); color: var(--app-muted); text-align: end; }
.comm-counter.is-near { color: var(--app-warn); font-weight: 600; }
.comm-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; }
.comm-merge__label { font-size: var(--app-text-xs); color: var(--app-muted); }
.comm-merge__chip { min-height: 2.25rem; cursor: pointer; }
.comm-lang-remove { margin-top: 0.75rem; }
.comm-add-language { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--app-line); }
.comm-add-language label { display: block; margin-bottom: 0.4rem; font-weight: 600; }

/* Live preview (text mock of the email) */
.comm-preview__mail {
    padding: 1rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-card);
    font-size: var(--app-text-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.comm-preview__from { margin: 0 0 0.5rem; font-size: var(--app-text-xs); color: var(--app-muted); }
.comm-preview__subject { margin: 0 0 0.75rem; font-weight: 700; font-size: 0.98rem; }
.comm-preview__subject:empty::before, .comm-preview__body:empty::before { content: '—'; color: var(--app-muted); font-weight: 400; }
.comm-preview__body p { margin: 0 0 0.75rem; }
.comm-preview__cta span { display: inline-block; padding: 0.55rem 1rem; border-radius: var(--app-radius-sm); background: var(--app-text); color: var(--app-card); font-weight: 600; }
.comm-preview__note { margin-top: 0.6rem; }
.comm-test label { display: block; margin: 0.5rem 0 0.35rem; font-weight: 600; font-size: var(--app-text-sm); }
.comm-test .button-quiet, .comm-inline .button-quiet { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Review */
.comm-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.comm-metrics--results { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); margin-top: 0; }
.comm-metric {
    padding: 0.85rem 0.5rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-sm);
    background: var(--app-bg);
    color: var(--app-text);
    text-decoration: none;
    display: grid; gap: 0.2rem; justify-items: center;
}
a.comm-metric:hover { border-color: var(--app-line-strong); }
a.comm-metric:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-metric .summary-metric__label { text-align: center; }
.comm-metric--ok .summary-metric__value { color: var(--app-ok); }
.comm-metric--warn .summary-metric__value { color: var(--app-warn); }
.comm-metric--bad .summary-metric__value { color: var(--app-bad); }

/* Campaign Review — "Recent contact" (Email + WhatsApp, ContactAwarenessView).
   Facts first, a quiet sentence when someone heard from the organiser
   recently, and two plain choices; never an alarm. */
.contact-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
}

.contact-card__facts div {
    min-width: 0;
}

.contact-card__facts dt {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    margin: 0 0 0.15rem;
}

.contact-card__facts dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--app-text);
}

.contact-card__split {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--app-text-xs);
    font-weight: 400;
    color: var(--app-muted);
}

.contact-card__warning {
    margin: 1.1rem 0 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--app-line);
    color: var(--app-text);
}

.contact-card__choice {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-bg);
}

.contact-card__option {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--app-radius-pill);
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    text-decoration: none;
}

.contact-card__option:hover {
    color: var(--app-text);
}

.contact-card__option.is-active {
    background: var(--app-card);
    color: var(--app-text);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--app-line-strong);
}

.contact-card__option:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

.contact-card__result {
    margin: 0.75rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.contact-card__who {
    margin-top: 0.6rem;
    font-size: var(--app-text-sm);
}

.contact-card__who summary {
    cursor: pointer;
    color: var(--app-text);
}

.contact-card__who ul {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.1rem;
    max-height: 14rem;
    overflow-y: auto;
    columns: 2 12rem;
    column-gap: 2rem;
}

.contact-card__who li {
    break-inside: avoid;
    overflow-wrap: anywhere;
}

.comm-note { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: var(--app-radius-sm); background: var(--app-warn-soft); font-size: var(--app-text-sm); }
.comm-note p { margin: 0 0 0.35rem; }
.comm-note ul { margin: 0; padding-inline-start: 1.1rem; }
.comm-table td, .comm-table th { vertical-align: top; }
.comm-table__name { font-weight: 600; overflow-wrap: anywhere; }
.comm-email { font-size: var(--app-text-sm); white-space: nowrap; }
.comm-reason { display: block; margin-top: 0.3rem; font-size: var(--app-text-xs); color: var(--app-muted); }
.comm-attempts { margin-top: 0.35rem; font-size: var(--app-text-xs); }
.comm-attempts summary { cursor: pointer; color: var(--app-muted); min-height: 1.75rem; display: inline-flex; align-items: center; }
.comm-attempts ol { margin: 0.3rem 0 0; padding-inline-start: 1.1rem; }
.comm-preview-tabs { flex-wrap: wrap; width: auto; }
.comm-email-frame { display: block; width: 100%; min-height: 34rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-bg); }
.comm-confirm { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); }
.comm-facts { margin: 0 0 1rem; display: grid; gap: 0.65rem; }
.comm-facts > div { display: grid; gap: 0.15rem; }
.comm-facts dt { font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-muted); }
.comm-facts dd { margin: 0; overflow-wrap: anywhere; }
.comm-facts__sub { display: block; font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-live-note { margin: 0 0 1rem; padding: 0.7rem 0.85rem; border-radius: var(--app-radius-sm); background: var(--app-accent-soft); font-size: var(--app-text-sm); }
.comm-confirm__points { margin: 0 0 1rem; padding-inline-start: 1.15rem; font-size: var(--app-text-sm); display: grid; gap: 0.35rem; }
.comm-ack { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 1rem; font-size: var(--app-text-sm); cursor: pointer; }
.comm-ack input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--app-accent); flex: none; }
.comm-confirm__button { width: 100%; justify-content: center; }
.comm-inline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }

/* Results */
.comm-results { margin-top: 1rem; }
.comm-sent-note { margin: 0.25rem 0 0; }
.comm-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.comm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-bottom: 1rem; }
.comm-filters__field { display: grid; gap: 0.25rem; font-size: var(--app-text-sm); font-weight: 600; min-width: 0; }
.comm-filters__search { flex: 1 1 12rem; }
.comm-filters__search input { width: 100%; }
.comm-empty-line { margin: 0.5rem 0; }

/* Destructive / consequential actions behind a disclosure (no browser dialogs) */
.comm-danger, .comm-retry { margin-top: 1.5rem; }
.comm-controls .comm-danger, .comm-controls .comm-retry { margin-top: 0; }
.comm-danger summary, .comm-retry summary {
    display: inline-flex; align-items: center; min-height: 2.5rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-pill);
    cursor: pointer;
    font-size: var(--app-text-sm); font-weight: 600;
    list-style: none;
}
.comm-danger summary::-webkit-details-marker, .comm-retry summary::-webkit-details-marker { display: none; }
.comm-danger summary { color: var(--app-bad); }
.comm-danger summary:focus-visible, .comm-retry summary:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-danger__body { margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-card); max-width: 34rem; }
.comm-danger__body p { margin: 0 0 0.75rem; font-size: var(--app-text-sm); }


/* ── Communications hub: channel total line ─────────────────────────────
   Kept above the Group Link Manage section, whose rules must all be
   scoped under .grp-* (tests/GroupRegistrationConfigTest.php). */
.hub-channel__total { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.hub-channel__total span:first-child { font-weight: 650; }
.hub-channel__total .u-ltr { color: var(--app-text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Scheduling V1 ───────────────────────────────────────────────────────
   A scheduled campaign reads as a calm, confident state — not a warning. */
.badge--scheduled {
    background: var(--app-accent-soft);
    color: var(--app-text);
    border-color: color-mix(in srgb, var(--app-accent) 18%, var(--app-line));
}
.comm-scheduled { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; }
.comm-scheduled .comm-time { font-size: var(--app-text-xs); }

.comm-schedule { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.comm-schedule legend { padding: 0; margin: 0 0 0.5rem; font-weight: 650; font-size: var(--app-text-sm); }
.comm-schedule__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), max-content)); gap: 0.5rem; }
.comm-schedule__mode {
    display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
    min-height: 2.75rem; padding: 0.45rem 0.9rem;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-pill);
    background: var(--app-surface); cursor: pointer; font-weight: 600; font-size: var(--app-text-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.comm-schedule__mode:hover { border-color: var(--app-line-strong); }
.comm-schedule__mode input { margin: 0; accent-color: var(--app-accent); }
.comm-schedule__mode:has(input:checked) { border-color: var(--app-accent); background: var(--app-accent-soft); }
.comm-schedule__mode:has(input:focus-visible) { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.comm-schedule__when {
    display: grid; gap: 0.6rem 0.75rem; margin-top: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding: 0.85rem 0.95rem; border: 1px solid var(--app-line); border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-card) 70%, var(--app-bg));
}
.comm-schedule__when .filter-field { margin: 0; min-width: 0; }
.comm-schedule__when label { display: block; margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--app-muted); }
.comm-schedule__when input { width: 100%; min-height: var(--app-control-h); }
.comm-schedule__zone, .comm-schedule__help { grid-column: 1 / -1; margin: 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-schedule__zone bdi { color: var(--app-text); font-weight: 600; }

/* ── WhatsApp Campaigns list ─────────────────────────────────────────── */
.wac-progress { display: inline-flex; align-items: baseline; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.wac-progress__sep { color: var(--app-line-strong); }
.wac-progress__failed { color: var(--app-bad); font-weight: 650; }
.comm-table__name a.is-legacy-name, .comm-card__name.is-legacy-name { color: var(--app-muted); font-weight: 600; }

/* ── WhatsApp Review: campaign name + when to send ───────────────────── */
.wac-confirm-settings { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 1.1rem 1.2rem; }
.wac-confirm-settings__name { margin: 0; max-width: 34rem; }
.wac-confirm-settings__name label { display: block; margin: 0 0 0.3rem; font-weight: 650; font-size: var(--app-text-sm); }
.wac-confirm-settings__name input { width: 100%; min-height: var(--app-control-h); }
.wac-confirm-settings__name .help { margin: 0.35rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.wac-confirm-settings .comm-schedule { margin: 0; }

/* ── Communications: row ⋮ menus and the shared confirmation ────────────── */
.comm-table__menu { width: 3rem; text-align: end; }
.comm-row-menu__button { min-width: 2.35rem; min-height: 2.35rem; padding: 0; }
.comm-row-menu__button .ui-icon { width: 20px; height: 20px; }
.comm-card--menu { position: relative; }
.comm-card--menu .comm-card__link { padding-inline-end: 3.5rem; }
.comm-card__menu { position: absolute; top: 0.7rem; inset-inline-end: 0.7rem; }
.overflow-menu__panel > form { margin: 0; }
.overflow-menu__panel button.is-danger { color: var(--app-bad); }
.overflow-menu__panel button.is-danger:hover { background: var(--app-bad-soft); }
.overflow-menu__panel > :not(.is-danger) + form.is-danger { position: relative; margin-top: 0.4rem; }
.overflow-menu__panel > :not(.is-danger) + form.is-danger::before {
    content: ""; position: absolute; inset-inline: 0.7rem; top: -0.25rem; border-top: 1px solid var(--app-line);
}
.comm-dialog {
    width: min(28rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--app-radius-lg);
    background: var(--app-card); color: var(--app-text); box-shadow: var(--app-shadow);
}
.comm-dialog::backdrop { background: color-mix(in srgb, var(--app-text) 38%, transparent); }
.comm-dialog__form { display: grid; gap: 0.75rem; padding: 1.5rem 1.5rem 1.25rem; }
.comm-dialog__title { margin: 0; font-family: var(--app-display); font-size: 1.35rem; font-weight: 500; }
.comm-dialog__body { margin: 0; color: var(--app-muted); line-height: var(--app-leading); overflow-wrap: anywhere; }
.comm-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }
/* A destructive confirmation reads as destructive (the global submit style would
   otherwise paint it as the primary action). Dialog and no-JS panel alike. */
.comm-dialog .button-danger,
.comm-confirm-panel .button-danger {
    color: var(--app-bad);
    background: var(--app-bad-soft);
    border-color: color-mix(in srgb, var(--app-bad) 32%, var(--app-line));
}
.comm-dialog .button-danger:not(:disabled):hover,
.comm-confirm-panel .button-danger:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-bad) 14%, var(--app-bad-soft));
}
.comm-confirm-panel { margin: 0 0 1.25rem; padding: 1.25rem 1.4rem; border-inline-start: 3px solid var(--app-accent); }
.comm-confirm-panel.is-danger { border-inline-start-color: var(--app-bad); }
.comm-confirm-panel h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.comm-confirm-panel p { margin: 0 0 0.75rem; color: var(--app-muted); }
@media (max-width: 47.99rem) {
    /* On a phone the confirmation is a bottom sheet: thumb-reachable, full width. */
    .comm-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0; }
    .comm-dialog__form { padding: 1.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
    .comm-dialog__actions { flex-direction: column-reverse; }
    .comm-dialog__actions .button { width: 100%; min-height: 2.9rem; }
    .comm-dialog[open] { animation: comm-sheet-in 0.22s var(--app-ease, ease-out); }
}
@keyframes comm-sheet-in { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .comm-dialog[open] { animation: none; } }

/* ── Sequences: the plan ─────────────────────────────────────────────────
   A calm vertical timeline. Logical properties throughout, so RTL is a true
   mirror (the rail runs on the reading-start side); message steps are cards,
   waits and questions stay light — the hierarchy follows what matters. */
.seq-plan { list-style: none; margin: 0; padding: 0; }
.seq-node, .seq-gap { position: relative; }
.seq-node { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1rem; padding-bottom: 1.1rem; }
.seq-node::before, .seq-gap::before {
    content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px); top: 0; bottom: 0;
    border-inline-start: 2px solid var(--app-line);
}
.seq-node::before { top: 2.5rem; }
.seq-node--finish::before { display: none; }
.seq-node__marker {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1px solid var(--app-line); background: var(--app-card); color: var(--app-muted);
}
.seq-node--email .seq-node__marker { background: var(--app-accent-soft); border-color: transparent; color: var(--app-accent); }
.seq-node--whatsapp .seq-node__marker { background: var(--app-whatsapp-soft); border-color: transparent; color: var(--app-whatsapp); }
.seq-node--condition .seq-node__marker { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); color: var(--app-text); }
.seq-node--finish .seq-node__marker { background: var(--app-surface); }
.seq-node.is-done .seq-node__marker { box-shadow: 0 0 0 3px var(--app-ok-soft); }
.seq-node.is-current .seq-node__marker { box-shadow: 0 0 0 4px var(--app-accent-soft); border-color: var(--app-accent); }
.seq-node.is-blocked .seq-node__marker { box-shadow: 0 0 0 4px var(--app-warn-soft); border-color: var(--app-warn); }
.seq-node__body { min-width: 0; padding-top: 0.15rem; }
.seq-node--email > .seq-node__body, .seq-node--whatsapp > .seq-node__body, .seq-node.is-editing > .seq-node__body {
    padding: 0.85rem 1rem; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-card);
}
.seq-node.is-editing > .seq-node__body { border-color: var(--app-accent); box-shadow: var(--app-shadow-soft); }
.seq-node__kind { margin: 0 0 0.15rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-muted); }
.seq-node__title { margin: 0; font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
.seq-node__meta { margin: 0.2rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.seq-node__branch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0 0; }
.seq-branch { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.1rem 0.6rem; border-radius: var(--app-radius-pill); font-size: var(--app-text-xs); font-weight: 600; }
.seq-branch--yes { background: var(--app-ok-soft); color: var(--app-ok); }
.seq-branch--no { background: var(--app-surface); color: var(--app-muted); border: 1px solid var(--app-line); }
.seq-node__result { margin: 0.45rem 0 0; font-size: var(--app-text-sm); color: var(--app-text); }
.seq-node__result.is-next { color: var(--app-text); font-weight: 600; }
.seq-node__result.is-blocked { color: var(--app-warn); font-weight: 600; }
/* The Sequences builder has four steps: one row on desktop, two by two on a phone. */
.comm-steps--four ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .comm-steps--four ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Inside the narrow plan column a full date and time zone may wrap (never overflow). */
.seq-node .comm-time { white-space: normal; overflow-wrap: anywhere; }
.seq-node__time { margin: 0.4rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-node__link { margin-inline-start: 0.35rem; font-weight: 600; white-space: nowrap; }
.seq-node__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.6rem; }
.seq-node__action-form { display: inline-flex; margin: 0; }
.seq-node__remove { color: var(--app-bad); }
.seq-gap { padding: 0 0 1rem; padding-inline-start: 3.5rem; }
.seq-gap--end::before { display: none; }
.seq-gap__add {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0.25rem 0.75rem;
    border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius-pill);
    font-size: var(--app-text-sm); color: var(--app-muted); text-decoration: none; background: var(--app-card);
}
.seq-gap__add:hover, .seq-gap__add:focus-visible { color: var(--app-text); border-color: var(--app-accent); }
.seq-gap__add .ui-icon { width: 16px; height: 16px; }
.seq-add { padding: 1rem; border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius); background: var(--app-surface); }
.seq-add--end { margin-inline-start: -3.5rem; }
.seq-add__title { margin: 0 0 0.65rem; font-weight: 650; }
.seq-add__choices { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.seq-add__choice { margin: 0; }
.seq-add__button {
    display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; min-height: 3.5rem; padding: 0.75rem 0.85rem;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-card);
    color: var(--app-text); font: inherit; text-align: start; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.seq-add__button:hover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-add__button:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.seq-add__button .ui-icon { flex: 0 0 20px; margin-top: 0.1rem; color: var(--app-muted); }
.seq-add__text { display: grid; gap: 0.1rem; min-width: 0; }
.seq-add__text span { font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-editor { display: grid; gap: 0.9rem; margin-top: 0.75rem; }
.seq-editor .field { margin: 0; }
.seq-editor__row { display: grid; gap: 0.9rem; }
@media (min-width: 40rem) { .seq-editor__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.seq-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.seq-editor__add-language { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--app-text-sm); }
.seq-editor__add-language select { max-width: 14rem; }

/* Message languages — every added language is a visible tab; each has its own
   Subject and Message. Nothing is ever translated automatically. */
.seq-langs { display: grid; gap: 0.6rem; margin-top: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--app-line); }
.seq-langs__title { margin: 0; font-size: 1rem; font-weight: 650; }
.seq-langs > .help { margin: 0; }
.seq-langs__tabs { margin: 0.2rem 0 0.35rem; }
.seq-langs .comm-lang-tab { min-height: 2.5rem; }
.seq-lang-notice { margin: 0; }
.seq-lang-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.seq-lang-head__text { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 16rem; }
.seq-lang-head__title { margin: 0; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.seq-lang-head .help { margin: 0; }
.seq-lang-remove { flex: 0 0 auto; color: var(--app-bad); }
.seq-lang-confirm { margin: 0 0 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--app-bad); border-radius: var(--app-radius-sm); background: var(--app-bad-soft); display: grid; gap: 0.35rem; }
.seq-lang-confirm p { margin: 0; }
.seq-lang-confirm__title { font-weight: 650; }
.seq-lang-confirm__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem !important; }
.seq-lang-confirm .button-danger { color: #fff; background: var(--app-bad); border-color: var(--app-bad); }
.seq-lang-confirm .button-danger:not(:disabled):hover { background: color-mix(in srgb, var(--app-bad) 86%, #000); }
.seq-lang-confirm .button:not(.button-danger) { color: var(--app-text); background: var(--app-card); border-color: var(--app-line-strong); }
.seq-lang-add { display: grid; gap: 0.35rem; margin-top: 0.25rem; padding: 0.8rem 0.9rem; border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius-sm); }
.seq-lang-add > label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--app-accent); }
.seq-lang-add > label .ui-icon { width: 1rem; height: 1rem; }
.seq-lang-add__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.seq-lang-add__row select { flex: 1 1 12rem; max-width: 20rem; min-width: 0; }
.seq-lang-add .help { margin: 0; }

/* Condition timing: checked once per guest, when they reach the step. */
.seq-cond-explain { margin: 0; padding: 0.75rem 0.9rem; border-inline-start: 3px solid var(--app-accent); background: var(--app-accent-soft); border-radius: var(--app-radius-xs); line-height: 1.5; }
.seq-cond-when > .help { margin: 0 0 0.5rem; }
.seq-cond-when__note { margin: 0; display: flex; gap: 0.5rem; align-items: flex-start; color: var(--app-muted); font-size: var(--app-text-sm); }
.seq-cond-when__note .ui-icon { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.15rem; }
.seq-cond-when__delay { margin: 0.6rem 0 0; padding-inline-start: 2.6rem; }
.comm-choice__input:not(:checked) ~ .seq-cond-when__delay { display: none; }
.seq-recommend { margin: 0.6rem 0 0.2rem; padding: 0.75rem 0.9rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-surface); display: grid; gap: 0.25rem; }
.seq-recommend p { margin: 0; }
.seq-recommend__title { font-weight: 650; }
.seq-recommend__body { color: var(--app-muted); font-size: var(--app-text-sm); }
.seq-recommend__form { margin-top: 0.35rem; }
.seq-recommend__button { display: inline-flex; align-items: center; gap: 0.35rem; }
.button.seq-recommend__button { color: var(--app-text); background: var(--app-card); border-color: var(--app-line-strong); }
.button.seq-recommend__button:not(:disabled):hover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-recommend__button .ui-icon { width: 0.95rem; height: 0.95rem; }

/* Review — message languages per Email. */
.seq-langs-review__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.seq-langs-review__item + .seq-langs-review__item { padding-top: 0.9rem; border-top: 1px solid var(--app-line); }
.seq-langs-review__step { margin: 0 0 0.4rem; font-weight: 600; }
.seq-langs-review__chips { margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.seq-lang-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-pill); font-size: var(--app-text-sm); }
.seq-lang-chip.is-default { border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-lang-chip__tag { font-size: var(--app-text-xs); color: var(--app-muted); }
.seq-langs-review__notes { margin: 0; padding-inline-start: 1.1rem; color: var(--app-text); font-size: var(--app-text-sm); display: grid; gap: 0.2rem; }
.seq-langs-review__item .help { margin: 0; }
.seq-toggle__label { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; }
.seq-toggle__label input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--app-accent); flex: 0 0 auto; }
.seq-toggle__label > span { display: grid; gap: 0.15rem; }
.seq-toggle__label--window { cursor: default; }
.seq-toggle__label--window label { cursor: pointer; }
.seq-window { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; line-height: 1.5; }
.field .seq-toggle__label--window .seq-window__select { width: auto; max-width: 100%; flex: 0 0 auto; }
.seq-window__select {
    height: 2rem; min-height: 2rem; padding-block: 0; padding-inline: 0.55rem 1.7rem;
    border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-sm);
    background-color: var(--app-surface); color: var(--app-text); font: inherit; font-weight: 600;
}
.seq-templates { grid-template-columns: minmax(0, 1fr); }
.seq-wa-preview { margin: 0.6rem 0 0; padding-inline-start: 2.6rem; }
.seq-wa-preview__bubble {
    max-width: 23rem; padding: 0.8rem 0.95rem 0; border-radius: 0.2rem var(--app-radius) var(--app-radius) var(--app-radius);
    background: var(--app-whatsapp-soft); font-size: var(--app-text-sm); line-height: 1.5; text-align: left;
}
.seq-wa-preview__button {
    display: block; margin: 0.8rem -0.95rem 0; padding: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--app-whatsapp) 22%, transparent);
    text-align: center; font-weight: 600; color: var(--app-whatsapp);
}
.seq-wa-preview figcaption { margin-top: 0.5rem; }
.seq-var { display: inline-block; padding: 0 0.4rem; border-radius: var(--app-radius-xs); background: var(--app-card); font-weight: 600; font-size: 0.92em; }
.seq-panel { max-width: 46rem; }
.seq-builder__head { margin-bottom: 1.25rem; }
.seq-builder__head h2 { margin: 0 0 0.25rem; }
.seq-builder__next { margin: 0.5rem 0 0; padding-inline-start: 3.5rem; }
.seq-plan--compact .seq-node { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; padding-bottom: 0.85rem; }
.seq-plan--compact .seq-node::before { inset-inline-start: calc(1rem - 1px); top: 2rem; }
.seq-plan--compact .seq-node__marker { width: 2rem; height: 2rem; }
.seq-plan--compact .seq-node__marker .ui-icon { width: 16px; height: 16px; }
.seq-plan--compact .seq-node--email > .seq-node__body, .seq-plan--compact .seq-node--whatsapp > .seq-node__body { padding: 0.55rem 0.75rem; }
.seq-plan--compact .seq-node__title { font-size: 0.95rem; }

/* ── Sequences: list, empty state, monitoring, review ─────────────────── */
.seq-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.seq-filter a {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.25rem 0.85rem;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-pill); background: var(--app-card);
    color: var(--app-text); font-size: var(--app-text-sm); font-weight: 600; text-decoration: none;
}
.seq-filter a .u-ltr { color: var(--app-muted); font-weight: 500; }
.seq-filter a[aria-current="page"] { border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-table__guests, .seq-table__next { font-size: var(--app-text-sm); }
.seq-table__next { color: var(--app-muted); }
.seq-empty { display: grid; gap: 1.75rem; padding: 1.75rem; align-items: center; }
@media (min-width: 56rem) { .seq-empty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2.25rem; } }
.seq-empty__intro h2 { margin: 0.75rem 0 0.4rem; font-family: var(--app-display); font-size: 1.6rem; font-weight: 500; }
.seq-empty__intro p { max-width: 30rem; }
.seq-empty__example { margin: 0; padding: 1.25rem 1.25rem 0.5rem; border-radius: var(--app-radius); background: var(--app-surface); }
.seq-empty__caption { margin: 0 0 0.85rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-muted); }
.seq-actions { display: flex; align-items: center; gap: 0.5rem; }
.seq-actions form { margin: 0; }
.seq-status-line { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
.seq-metrics { margin-bottom: 0.25rem; }
.seq-metrics__reasons { margin: 0.5rem 0 0; font-size: var(--app-text-sm); }
.seq-attention { margin-bottom: 1.25rem; }
.seq-attention p { margin: 0 0 0.3rem; }
.seq-monitor { margin-bottom: 1.25rem; }
.seq-review__facts { margin-bottom: 0.75rem; }
.seq-review__implications, .seq-review__rules { margin: 0.75rem 0 0; padding-inline-start: 1.1rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-review__implications li + li, .seq-review__rules li + li { margin-top: 0.35rem; }
.seq-review__rules { margin-bottom: 1rem; }
.seq-blockers ul { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; }
.seq-audience-note { margin: 0 0 1rem; }
.seq-delete { color: var(--app-bad); }

/* ── Communications hub: Active plans (Sequences) ─────────────────────── */
.hub-plans { margin: 0 0 1.75rem; padding: 1.25rem 1.3rem; }
.hub-plans__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.hub-plans__head .hub-section__title { margin: 0; }
.hub-plans__intro { margin: 0.25rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); max-width: 40rem; }
.hub-plans__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.hub-plan__link {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem;
    padding: 0.75rem 0.85rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    color: var(--app-text); text-decoration: none; background: var(--app-card);
    transition: border-color 0.15s ease;
}
.hub-plan__link:hover { border-color: var(--app-line-strong); }
.hub-plan__link:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.hub-plan__marker { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--app-accent-soft); }
.hub-plan__main { display: grid; gap: 0.15rem; min-width: 0; }
.hub-plan__name { font-weight: 600; overflow-wrap: anywhere; }
.hub-plan__meta { font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
@media (max-width: 34rem) {
    .hub-plan__link { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .hub-plan__state { grid-column: 2; }
}

/* Sequences V1.5 — a message step's route (preferred channel → fallbacks),
   the builder's route panel, and drag-to-reorder (Move up / Move down stay). */
.seq-route { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: var(--app-text-sm); }
.seq-route__item { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.seq-route__label { color: var(--app-muted); }
.seq-route__channel { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; overflow-wrap: anywhere; }
.seq-route__icon .ui-icon { width: 14px; height: 14px; color: var(--app-muted); }
.seq-route__item--none .seq-route__channel { color: var(--app-warn); }
@media (max-width: 34rem) { .seq-route__item { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.seq-route-panel { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--app-line); display: grid; gap: 0.6rem; }
.seq-route-panel__title { margin: 0; font-size: 1rem; font-weight: 650; }
.seq-route-panel .help, .seq-route-head .help { margin: 0; }
.seq-route-panel__empty { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.seq-route-panel__note { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.seq-route-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.seq-route-edit__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.65rem 0.8rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm, var(--app-radius)); background: var(--app-surface); }
.seq-route-edit__label { grid-column: 1 / -1; font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-route-edit__channel { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
@media (max-width: 34rem) { .seq-route-edit__item { grid-template-columns: minmax(0, 1fr); } .seq-route-edit__actions { justify-content: flex-start; } }
.seq-route-edit__channel .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--app-muted); }
.seq-route-edit__actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.seq-route-panel__adds { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seq-route-add { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.45rem 0.9rem; border: 1px dashed var(--app-line-strong); border-radius: 999px; color: var(--app-text); font-weight: 600; font-size: var(--app-text-sm); text-decoration: none; }
button.seq-route-add { background: none; font-family: inherit; cursor: pointer; }
.seq-route-add:hover, .seq-route-add:focus-visible { border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-route-add .ui-icon { width: 16px; height: 16px; }
.seq-route-head { display: grid; gap: 0.2rem; margin-top: 0.75rem; }
.seq-route-head__kicker { margin: 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-route-head__title { margin: 0; font-weight: 650; }
.seq-credits { display: grid; gap: 0.55rem; }
.seq-credits h2 { margin: 0; }
.seq-credits__figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.seq-credits__figure { margin: 0; display: grid; gap: 0.1rem; }
.seq-credits__value { font-family: var(--app-display); font-size: 1.9rem; line-height: 1.1; font-weight: 500; color: var(--app-text); }
.seq-credits__figure--quiet .seq-credits__value { font-size: 1.35rem; color: var(--app-muted); }
.seq-credits__label { font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-credits__balance { margin: 0; font-weight: 600; }
.seq-credits .help, .seq-credits__link { margin: 0; }
.seq-credits__link a { font-weight: 600; }
.seq-warnings ul { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; }
.seq-warnings p { margin: 0; }
.seq-decision { display: grid; gap: 0.6rem; border-inline-start: 3px solid var(--app-warn); }
.seq-decision h2, .seq-decision p { margin: 0; }
.seq-decision__choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.seq-decision__choices form { margin: 0; }
@media (max-width: 34rem) { .seq-decision__choices { display: grid; } .seq-decision__choices .button, .seq-decision__choices .button-quiet { width: 100%; justify-content: center; } }
.seq-attention__links a { font-weight: 600; }
.comm-origin { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; font-size: var(--app-text-sm); font-weight: 500; color: var(--app-muted); overflow-wrap: anywhere; }
.comm-origin .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.comm-credit-wait { color: var(--app-warn); font-weight: 600; }
.comm-origin-panel { display: grid; gap: 0.5rem; }
.comm-origin-panel h2 { margin: 0; font-size: 1rem; }
.comm-origin-panel h2 .comm-origin { margin: 0; font-size: 1rem; font-weight: 650; color: var(--app-text); }
.comm-origin-panel p { margin: 0; }
.comm-origin-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.comm-origin-panel__stop { color: var(--app-bad); }
.credit-meter { display: grid; gap: 0.5rem; margin: 0 0 1.75rem; padding: 1.25rem 1.3rem; }
.credit-meter__title { margin: 0; font-size: 1.05rem; font-weight: 650; }
.credit-meter p { margin: 0; }
.credit-meter__figure { font-family: var(--app-display); font-size: 1.5rem; line-height: 1.2; }
.credit-meter__bar { block-size: 0.5rem; border-radius: 999px; background: var(--app-line); overflow: hidden; }
.credit-meter__bar span { display: block; block-size: 100%; border-radius: inherit; background: var(--app-accent); }
.credit-meter.is-warn .credit-meter__bar span, .credit-meter.is-low .credit-meter__bar span { background: var(--app-warn); }
.credit-meter.is-empty .credit-meter__bar span { background: var(--app-bad); }
.credit-meter__line { color: var(--app-muted); }
.credit-meter__status { font-weight: 600; color: var(--app-warn); }
.credit-meter.is-empty .credit-meter__status { color: var(--app-bad); }
.credit-meter__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.credit-meter__links { font-size: var(--app-text-sm); }
.credit-meter__links a { font-weight: 600; }
.hub-plan__attention { color: var(--app-warn); font-weight: 600; }
.commercial-credit-facts { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: var(--app-text-sm); color: var(--app-muted); }
.credit-current__rules { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; color: var(--app-muted); font-size: var(--app-text-sm); }
.credit-policy-form, .credit-admin-form { display: grid; gap: 0.9rem; }
.credit-policy-form h2, .credit-admin-form h2 { margin: 0; }
.credit-rates th[scope="row"] { font-weight: 600; min-width: 14rem; }
.credit-rate__unit { display: block; font-weight: 400; font-size: var(--app-text-sm); color: var(--app-muted); }
.credit-rate__input { width: 6.5rem; }
.credit-rate__enabled { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.credit-overrides { margin-top: 0.45rem; font-weight: 400; }
.credit-overrides summary { cursor: pointer; font-size: var(--app-text-sm); color: var(--app-accent-strong, var(--app-text)); font-weight: 600; }
.credit-overrides__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.credit-override { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.credit-override__country { min-width: 12rem; max-width: 100%; font-size: var(--app-text-sm); }
.credit-override__input { width: 6rem; }
.credit-override__remove { font-size: var(--app-text-sm); color: var(--app-bad); display: inline-flex; align-items: center; gap: 0.3rem; }
.credit-withdraw summary { cursor: pointer; font-size: var(--app-text-sm); font-weight: 600; }
.credit-withdraw__form { display: grid; gap: 0.45rem; margin-top: 0.5rem; max-width: 24rem; }
.credit-admin-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 60rem) { .credit-admin-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.seq-decision__secondary { border: 1px solid var(--app-line-strong); min-height: 2.75rem; }
/* Sequences V1.5 — where the plan is. The step happening now is dominant (a
   framed, tinted card, a stronger node, an eyebrow); finished steps calm;
   later steps muted; attention calm but distinct. No motion, no loud colour. */
.seq-node.is-current > .seq-node__body, .seq-node.is-capacity > .seq-node__body, .seq-node.is-decision > .seq-node__body,
.seq-node.is-attention > .seq-node__body, .seq-node.is-paused > .seq-node__body {
    padding: 0.95rem 1.05rem; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-card);
}
.seq-node.is-current > .seq-node__body {
    border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
    background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-card)); box-shadow: var(--app-shadow-soft);
}
.seq-node.is-current .seq-node__marker { box-shadow: 0 0 0 5px var(--app-accent-soft); border: 2px solid var(--app-accent); color: var(--app-accent); }
.seq-node.is-capacity > .seq-node__body, .seq-node.is-decision > .seq-node__body, .seq-node.is-attention > .seq-node__body, .seq-node.is-paused > .seq-node__body {
    border-color: color-mix(in srgb, var(--app-warn) 45%, var(--app-line)); background: #fbf6ec; border-inline-start-width: 3px;
}
.seq-node.is-capacity .seq-node__marker, .seq-node.is-decision .seq-node__marker, .seq-node.is-attention .seq-node__marker, .seq-node.is-paused .seq-node__marker {
    box-shadow: 0 0 0 4px var(--app-warn-soft); border: 2px solid var(--app-warn); color: var(--app-warn);
}
.seq-node.is-done > .seq-node__body { opacity: 0.92; }
.seq-node.is-done .seq-node__title { font-weight: 550; }
.seq-node.is-later > .seq-node__body, .seq-node.is-not_reached > .seq-node__body, .seq-node.is-skipped > .seq-node__body { opacity: 0.66; }
.seq-node.is-later .seq-node__marker, .seq-node.is-not_reached .seq-node__marker { filter: saturate(0.4); }
.seq-node__eyebrow { margin: 0 0 0.3rem; font-size: var(--app-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-accent-strong, var(--app-accent)); }
.seq-node.is-capacity .seq-node__eyebrow, .seq-node.is-decision .seq-node__eyebrow, .seq-node.is-attention .seq-node__eyebrow, .seq-node.is-paused .seq-node__eyebrow { color: var(--app-warn); }
.seq-node__headline { margin: 0.55rem 0 0; font-weight: 650; }
.seq-node__timing { margin: 0.2rem 0 0; font-size: var(--app-text-sm); }
.seq-node__remaining { color: var(--app-muted); }
.seq-node__links { margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.seq-node__links .seq-node__link { margin-inline-start: 0; }
.seq-node__later { margin: 0.45rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); font-style: italic; }
.seq-route__caption { margin: 0.35rem 0 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-now {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.2rem 0.9rem; align-items: center;
    margin: 0 0 1rem; padding: 0.95rem 1.05rem; border: 1px solid color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
    border-radius: var(--app-radius); background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-card));
    color: var(--app-text); text-decoration: none;
}
.seq-now:hover, .seq-now:focus-visible { box-shadow: var(--app-shadow-soft); }
.seq-now:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.seq-now--capacity, .seq-now--decision, .seq-now--attention, .seq-now--paused { border-color: color-mix(in srgb, var(--app-warn) 45%, var(--app-line)); background: #fbf6ec; }
.seq-now__marker { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--app-accent); color: var(--app-accent); background: var(--app-card); }
.seq-now--capacity .seq-now__marker, .seq-now--decision .seq-now__marker, .seq-now--attention .seq-now__marker, .seq-now--paused .seq-now__marker { border-color: var(--app-warn); color: var(--app-warn); }
.seq-now__body { display: grid; gap: 0.1rem; min-width: 0; }
.seq-now__eyebrow { font-size: var(--app-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-accent-strong, var(--app-accent)); }
.seq-now--capacity .seq-now__eyebrow, .seq-now--decision .seq-now__eyebrow, .seq-now--attention .seq-now__eyebrow, .seq-now--paused .seq-now__eyebrow { color: var(--app-warn); }
.seq-now__title { font-weight: 650; overflow-wrap: anywhere; }
.seq-now__headline { font-weight: 600; }
.seq-now__line { font-size: var(--app-text-sm); color: var(--app-muted); }
.seq-now__go { font-size: var(--app-text-sm); font-weight: 600; white-space: nowrap; }
.seq-now .comm-time, .seq-node__timing .comm-time { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 34rem) {
    .seq-now { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .seq-now__go { grid-column: 2; }
}
.seq-drag { display: none; }
.has-seq-drag .seq-drag { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid transparent; border-radius: var(--app-radius-xs); background: transparent; color: var(--app-muted); cursor: grab; }
.has-seq-drag .seq-drag:hover { color: var(--app-text); border-color: var(--app-line); }
.has-seq-drag .seq-drag:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.has-seq-drag .seq-drag[aria-pressed="true"] { color: var(--app-accent); border-color: var(--app-accent); background: var(--app-accent-soft); }
.seq-drag .ui-icon { width: 18px; height: 18px; }
.seq-node.is-dragging { opacity: 0.55; }
.seq-node.is-drop-target > .seq-node__body { border-color: var(--app-accent); box-shadow: 0 0 0 2px var(--app-accent-soft); }
.seq-reorder-form { display: none; }
@media (pointer: coarse) { .has-seq-drag .seq-drag { display: none; } }
@media (prefers-reduced-motion: no-preference) { .seq-node > .seq-node__body { transition: border-color 0.15s ease, box-shadow 0.15s ease; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Group Link Invitation — Manage page
   ═══════════════════════════════════════════════════════════════════════════
   Everything here is scoped under `.grp-manage`, which only that page emits.
   The page previously leaned on class names (.form-block, .section-title,
   .form-field, .form-label, .form-help, .form-actions) that have never had any
   CSS anywhere in the product — which is exactly why it rendered as raw stacked
   markup. Those names are still used by a handful of other screens, so they are
   deliberately NOT styled globally here; this file gives the Manage page its own
   primitives instead and leaves every other screen byte-identical.

   Tokens only — no new colours, radii, shadows or fonts are introduced. */

.grp-manage {
    display: grid;
    gap: var(--app-space-5);
}

/* ── Header: identity, status, shortcuts ──────────────────────────────── */
.grp-manage__head {
    align-items: flex-end;
    margin-bottom: 0;
}

.grp-manage__ident {
    min-width: 0;
}

.grp-manage__titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2) var(--app-space-3);
}

/* The group name is the page. Serif display face, generous but not shouty. */
.grp-manage__title {
    margin: 0;
    min-width: 0;
    font-family: var(--app-display);
    font-size: clamp(1.65rem, 4.2vw, 2.15rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

/* Quiet caption naming what this page is, so the title never has to. */
.grp-manage__eyebrow {
    margin: 0.3rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.grp-manage__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2) var(--app-space-3);
}

/* ── Status pill ──────────────────────────────────────────────────────────
   Word first, dot second: the label carries the state, the dot only reinforces
   it, so nothing here depends on colour perception. */
.grp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    flex: none;
    padding: 0.2rem 0.66rem 0.2rem 0.58rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: var(--app-card);
    color: var(--app-text);
    font-size: var(--app-text-xs);
    font-weight: 650;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.grp-status__dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentcolor;
    flex: none;
}

.grp-status--active {
    color: var(--app-ok);
    border-color: color-mix(in srgb, var(--app-ok) 26%, var(--app-line));
    background: var(--app-ok-soft);
}

.grp-status--closed {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: color-mix(in srgb, var(--app-line) 32%, var(--app-card));
}

/* ── Stats: one compact summary row, not a dashboard ──────────────────── */
.grp-manage__stats {
    margin: 0;
}

.grp-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-space-2);
}

/* ── Section surface ──────────────────────────────────────────────────────
   Quiet border, soft shadow, ivory paper. One surface treatment for all four
   sections so the page reads as a set rather than a pile. */
.grp-sec {
    margin: 0;
    padding: var(--app-space-4) var(--app-space-4) var(--app-space-5);
    background: var(--app-card);
    border: 1px solid color-mix(in srgb, var(--app-line) 85%, transparent);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft);
}

/* The lifecycle section sits a step back from the primary workflow. */
.grp-sec--quiet {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--app-line) 90%, transparent);
}

.grp-sec__head {
    margin-bottom: var(--app-space-4);
}

.grp-sec__title {
    margin: 0;
    font-family: var(--app-display);
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.grp-sec__help {
    margin: 0.3rem 0 0;
    max-width: 60ch;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    font-weight: 400;
    line-height: 1.5;
}

.grp-sec__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2) var(--app-space-3);
    margin-top: var(--app-space-4);
}

.grp-sec__actions .inline-form {
    margin: 0;
}

/* Action row that closes a form: primary button plus a text-level escape. */
.grp-sec__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-3) var(--app-space-4);
    margin-top: var(--app-space-5);
    padding-top: var(--app-space-4);
    border-top: 1px solid color-mix(in srgb, var(--app-line) 60%, transparent);
}

/* ── Share: URL and Copy read as one control ──────────────────────────── */
.grp-linkbar {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2);
}

.grp-linkbar__input {
    min-width: 0;
    /* The full value is always present and selectable; only the rendering
       ellipsises, so Copy and manual selection still yield the whole URL. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    background: var(--app-bg-deep);
    direction: ltr;
    text-align: start;
}

.grp-linkbar__input:focus {
    color: var(--app-text);
    background: var(--app-surface);
}

.grp-linkbar__copy {
    flex: none;
    align-self: stretch;
}

/* WhatsApp stays recognisable through a restrained tint rather than a slab of
   brand green, so it still belongs to the Vitoqa button family. */
.grp-manage .grp-button-wa {
    color: var(--app-whatsapp);
    border-color: color-mix(in srgb, var(--app-whatsapp) 30%, transparent);
    background: var(--app-whatsapp-soft);
}

.grp-manage .grp-button-wa:hover {
    border-color: color-mix(in srgb, var(--app-whatsapp) 48%, transparent);
    background: color-mix(in srgb, var(--app-whatsapp) 12%, var(--app-card));
}

/* Cautionary, not destructive: closing is reversible and deletes nothing. */
.grp-manage .grp-button-caution {
    color: var(--app-text);
    background: var(--app-card);
    border-color: var(--app-line-strong);
}

.grp-manage .grp-button-caution:hover {
    color: var(--app-bad);
    border-color: color-mix(in srgb, var(--app-bad) 42%, transparent);
    background: var(--app-bad-soft);
}

/* Tertiary escape hatch — a text action, never a competing button. */
.grp-link-action {
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.grp-link-action:hover {
    color: var(--app-text);
    border-bottom-color: var(--app-line-strong);
}

.grp-link-action:focus-visible {
    outline: 2px solid var(--app-focus, currentColor);
    outline-offset: 3px;
    border-radius: var(--app-radius-xs);
}

/* ── Settings fields ──────────────────────────────────────────────────────
   A deliberate reading width: a group name is a few words, not a paragraph, so
   the control should not span a 1600px screen.

   `.grp-field` is also the wrapper class used by the PUBLIC registration form
   (GroupRegistrationSection). That page loads invite.css and never app.css, so
   there is no collision today — these selectors are qualified with `.grp-manage`
   regardless, so the two can never become entangled. */
.grp-manage .grp-fields {
    display: grid;
    gap: var(--app-space-4);
    max-width: 34rem;
}

.grp-manage .grp-field {
    min-width: 0;
}

/* Tight label→control, looser control→helper: the spacing states the grouping. */
.grp-manage .grp-field__label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: var(--app-text-sm);
    font-weight: 650;
    letter-spacing: 0.005em;
}

.grp-manage .grp-field__help {
    margin: 0.4rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 400;
    line-height: 1.5;
}

/* ── Availability ─────────────────────────────────────────────────────── */
.grp-availability {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2) var(--app-space-3);
    margin: 0;
}

.grp-availability__text {
    min-width: 0;
    max-width: 58ch;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    line-height: 1.5;
}

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
    .grp-sec {
        padding: var(--app-space-5) var(--app-space-5) var(--app-space-6);
    }

    /* URL + Copy become one horizontal unit. */
    .grp-linkbar {
        flex-direction: row;
        align-items: stretch;
    }

    .grp-linkbar__input {
        flex: 1 1 auto;
    }

    .grp-linkbar__copy {
        align-self: auto;
    }

    .grp-manage .grp-field--narrow {
        max-width: 12rem;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────────────
   Designed, not left to accidental flex wrapping. */
@media (max-width: 47.99rem) {
    .grp-manage {
        gap: var(--app-space-4);
    }

    .grp-manage__head {
        align-items: flex-start;
    }

    .grp-manage__actions {
        width: 100%;
    }

    .grp-sec {
        padding: var(--app-space-4) var(--app-space-3) var(--app-space-4);
    }

    /* Primary actions take the full width; text actions never do. */
    .grp-sec__actions > .button,
    .grp-sec__actions .inline-form,
    .grp-sec__actions .inline-form > .button,
    .grp-sec__foot > .button,
    .grp-linkbar__copy {
        width: 100%;
    }

    .grp-sec__foot {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .grp-manage .grp-fields {
        max-width: none;
    }
}

/* ═══ End of Group Link Invitation — Manage page ═══ */

/* ── Action system ────────────────────────────────────────────────────────
   Five roles, used the same way on every Communications page:
     primary    .button.button-primary   — the one thing this page is for
     secondary  .button                   — other real actions / navigation
     tertiary   .button-link              — a quiet text action (Clear filters)
     back       .page-back                — ONE link to the parent page, above
                                            the head, never in the action row
     inline     .inline-action            — an action inside content (+ Create audience)
   All keep a ≥ 44px hit area on touch, a visible focus ring, and mirror
   their arrow (never their text) in RTL. */
.page-back { margin: 0 0 0.35rem; }
.page-back a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 2.75rem; padding-block: 0.35rem; padding-inline: 0 0.5rem;
    color: var(--app-muted); font-size: var(--app-text-sm); font-weight: 600;
    text-decoration: none; border-radius: var(--app-radius-xs);
    transition: color 0.15s ease;
}
.page-back a::before { content: '\2190'; font-size: 1.05em; line-height: 1; transition: transform 0.15s ease; }
[dir="rtl"] .page-back a::before { content: '\2192'; }
.page-back a:hover { color: var(--app-text); }
.page-back a:hover::before { transform: translateX(-2px); }
[dir="rtl"] .page-back a:hover::before { transform: translateX(2px); }
.page-back a:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; color: var(--app-text); }
.page-back a:active { color: var(--app-text); }

.inline-action {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 2.75rem; padding-block: 0.35rem;
    color: var(--app-text); font-weight: 650; font-size: var(--app-text-sm);
    text-decoration: none; border-radius: var(--app-radius-xs);
}
.inline-action__icon { width: 1rem; height: 1rem; flex: none; }
.inline-action span { text-decoration: underline; text-decoration-color: var(--app-line-strong); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.inline-action:hover span { text-decoration-color: currentColor; }
.inline-action:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }

.button.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.button-link:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; border-radius: var(--app-radius-xs); }
.button-icon-text .ui-icon { width: 1.05rem; height: 1.05rem; flex: none; }

/* ── Communications hub ──────────────────────────────────────────────── */
.hub-channels { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 0 0 1.75rem; }
@media (min-width: 48rem) { .hub-channels { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } }
.hub-channel { display: grid; gap: 1.1rem; align-content: start; padding: 1.25rem 1.3rem; min-width: 0; }
.hub-channel__head { display: flex; gap: 0.9rem; align-items: flex-start; min-width: 0; }
.hub-channel__icon {
    display: inline-grid; place-items: center; flex: none;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--app-accent-soft); color: var(--app-text);
}
.hub-channel[data-channel="whatsapp"] .hub-channel__icon { background: var(--app-whatsapp-soft); color: var(--app-whatsapp); }
.hub-channel__icon .ui-icon { width: 1.25rem; height: 1.25rem; }
.hub-channel__intro { min-width: 0; }
.hub-channel__title { margin: 0.1rem 0 0.2rem; font-family: var(--app-display); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.005em; }
.hub-channel__desc { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.hub-channel__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.5rem; margin: 0; }
.hub-stat { padding: 0.6rem 0.75rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-surface); min-width: 0; }
.hub-stat dt { margin: 0; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.03em; color: var(--app-muted); overflow-wrap: anywhere; }
.hub-stat dd { margin: 0.15rem 0 0; font-size: 1.35rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hub-stat.is-attention { border-color: color-mix(in srgb, var(--app-warn) 45%, var(--app-line)); background: var(--app-warn-soft); }
.hub-channel__empty, .hub-channel__note { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.hub-channel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }
.hub-channel__actions form { display: inline-flex; margin: 0; }

.hub-lower { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .hub-lower { grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 1fr); align-items: start; } .hub-lower--single { grid-template-columns: minmax(0, 1fr); } }
.hub-section__title { margin: 0 0 0.75rem; font-size: var(--app-text-lg); }
.hub-recent { min-width: 0; }
.hub-recent__empty { margin: 0; padding: 1.1rem 1.2rem; border: 1px dashed var(--app-line-strong); border-radius: var(--app-radius); color: var(--app-muted); font-size: var(--app-text-sm); }
.hub-recent__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-card); overflow: hidden; }
.hub-recent__item + .hub-recent__item { border-top: 1px solid var(--app-line); }
.hub-recent__link {
    display: grid; gap: 0.35rem 1rem; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "channel when" "main main" "state state";
    padding: 0.9rem 1.1rem; min-height: 2.75rem;
    color: var(--app-text); text-decoration: none;
    transition: background 0.15s ease;
}
a.hub-recent__link:hover { background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-card)); }
a.hub-recent__link:focus-visible { outline: 2px solid var(--app-focus); outline-offset: -2px; }
@media (min-width: 48rem) {
    .hub-recent__link { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(10rem, max-content); grid-template-areas: "channel main state" "channel main when"; align-items: start; row-gap: 0.25rem; }
    .hub-recent__channel { padding-top: 0.15rem; }
    .hub-recent__state { flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: end; }
}
.hub-recent__channel { grid-area: channel; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--app-text-xs); font-weight: 650; letter-spacing: 0.03em; color: var(--app-muted); }
.hub-recent__item[data-channel="whatsapp"] .hub-recent__channel { color: var(--app-whatsapp); }
.hub-recent__icon { width: 0.95rem; height: 0.95rem; flex: none; }
.hub-recent__main { grid-area: main; display: grid; gap: 0.1rem; min-width: 0; }
.hub-recent__name { font-weight: 650; overflow-wrap: anywhere; }
.hub-recent__audience { font-size: var(--app-text-sm); color: var(--app-muted); overflow-wrap: anywhere; }
.hub-recent__state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.hub-recent__counts { font-size: var(--app-text-sm); color: var(--app-muted); }
.hub-recent__when { grid-area: when; justify-self: end; }
.hub-recent__state, .hub-recent__when { min-width: 0; }

.hub-facts { padding: 1.1rem 1.2rem; min-width: 0; }
.hub-facts__list { display: grid; gap: 0; margin: 0; }
.hub-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--app-line); }
.hub-fact:first-child { border-top: 0; padding-top: 0; }
.hub-fact dt { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); min-width: 0; overflow-wrap: anywhere; }
.hub-fact dd { margin: 0; font-weight: 650; text-align: end; font-variant-numeric: tabular-nums; }
.hub-fact__sub { display: block; font-weight: 500; font-size: var(--app-text-xs); color: var(--app-muted); }

/* ── Email Campaigns list: toolbar, table (desktop), cards (phone) ─────── */
.comm-toolbar {
    display: grid; gap: 0.75rem; align-items: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 1.1rem; padding: 0.9rem 1rem;
    border: 1px solid var(--app-line); border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-card) 70%, var(--app-bg));
}
.comm-toolbar .filter-field { margin: 0; min-width: 0; }
.comm-toolbar label { display: block; margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--app-muted); }
.comm-toolbar input, .comm-toolbar select { width: 100%; min-width: 0; min-height: var(--app-control-h); }
.comm-toolbar__search { grid-column: 1 / -1; }
.comm-toolbar__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; }
@media (max-width: 29.99rem) {
    /* Small phones: each control gets the full width, so no option label is cut. */
    .comm-toolbar { grid-template-columns: minmax(0, 1fr); }
    .comm-toolbar__actions .button { flex: 1 1 auto; }
}
@media (min-width: 48rem) {
    .comm-toolbar { grid-template-columns: minmax(12rem, 2fr) repeat(2, minmax(9rem, 1fr)) minmax(6.5rem, 0.6fr) auto; }
    .comm-toolbar__search, .comm-toolbar__actions { grid-column: auto; }
    .comm-toolbar__actions { flex-wrap: nowrap; }
}
.comm-table-wrap { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-card); overflow: hidden; }
.comm-table { width: 100%; }
.comm-table tbody th { font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--app-text); font-weight: 650; background: transparent; }
.comm-table tbody tr { transition: background 0.15s ease; }
.comm-table tbody tr:hover { background: color-mix(in srgb, var(--app-accent-soft) 45%, var(--app-card)); }
.comm-table__name { min-width: 14rem; max-width: 28rem; }
.comm-table__name a { color: var(--app-text); text-decoration: none; overflow-wrap: anywhere; }
.comm-table__name a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.comm-table__name a:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; border-radius: var(--app-radius-xs); }
.comm-table__counts { display: block; margin-top: 0.2rem; font-size: var(--app-text-sm); font-weight: 500; color: var(--app-muted); }
.comm-table__audience { color: var(--app-muted); font-size: var(--app-text-sm); max-width: 16rem; overflow-wrap: anywhere; }
.comm-table__num { text-align: end; font-variant-numeric: tabular-nums; }
.comm-table__when { white-space: nowrap; }
.comm-card__when { font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1rem; }
.comm-list-foot__range { margin: 0; font-size: var(--app-text-sm); color: var(--app-muted); }
.comm-list-foot .comm-pager { margin-top: 0; justify-content: flex-end; }
.comm-empty--results { padding: 2rem 1rem; }
/* .comm-cards sets display:grid, which would outrank the .mobile-only toggle. */
@media (min-width: 64rem) { .comm-cards.mobile-only { display: none; } }

/* ── SMS Campaigns (Communications Phase 2) ─────────────────────────── */
.sms-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (min-width: 52rem) {
    .sms-compose { grid-template-columns: minmax(0, 1fr) 16rem; }
}
.sms-compose__field textarea { width: 100%; min-height: 8rem; resize: vertical; }
.sms-meter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.4rem 0 0.6rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}
.sms-meter.is-near { color: var(--app-warn); }
.sms-meter.is-over { color: var(--app-bad); font-weight: 600; }
.sms-meter__why { flex-basis: 100%; font-size: var(--app-text-xs); }
.sms-phone {
    padding: 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: 1.5rem;
    background: var(--app-bg-deep);
}
.sms-phone__screen { min-height: 9rem; }
.sms-phone__sender {
    margin: 0 0 0.6rem;
    text-align: center;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}
.sms-phone__bubble {
    margin: 0;
    max-width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 1rem;
    border-end-start-radius: 0.3rem;
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    font-size: var(--app-text-sm);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sms-phone__bubble:empty::before { content: '—'; color: var(--app-muted); }
.sms-review-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sms-review-text__head { margin: 0 0 0.4rem; font-weight: 600; font-size: var(--app-text-sm); }
.sms-destinations { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

/* ── Guest contact preferences ──────────────────────────────────────── */
.prefs-channels { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .prefs-channels { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.prefs-channel__head { display: flex; gap: 0.75rem; align-items: flex-start; }
.prefs-channel__head h2 { margin: 0; font-size: 1.05rem; }
.prefs-channel__state { margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.prefs-entries { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.prefs-entry { padding: 0.6rem 0.75rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-bg); }
.prefs-entry__why { margin: 0; font-size: var(--app-text-sm); }
.prefs-entry__when { margin: 0.2rem 0 0; font-size: var(--app-text-xs); color: var(--app-muted); }
.prefs-entry__form { margin-top: 0.4rem; }
.prefs-record { margin-top: 0.9rem; }
.prefs-record summary { cursor: pointer; font-weight: 600; font-size: var(--app-text-sm); min-height: 2.75rem; display: flex; align-items: center; }
.prefs-record__form { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.prefs-footnote { margin-top: 1.25rem; }
.comms-prefs { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--app-line); }
.comms-prefs__line { margin: 0 0 0.35rem; font-size: var(--app-text-sm); color: var(--app-warn); }
.comms-prefs__link { font-size: var(--app-text-sm); font-weight: 600; }

/* ── Platform Owner: Messaging Operations ───────────────────────────── */
.ops-tabs { margin-bottom: 1rem; }
.ops-panel h2 { margin-top: 0; }
/* Visually hidden table headers (position:absolute) must stay inside their scroll container, not widen the page. */
.ops-panel .table-wrap { position: relative; }
.ops-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.25rem; margin: 0 0 1rem; }
.ops-facts dt { font-size: var(--app-text-xs); color: var(--app-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ops-facts dd { margin: 0.15rem 0 0; }
.ops-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ops-grid h3 { font-size: var(--app-text-sm); margin: 0 0 0.4rem; }
.ops-counts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--app-text-sm); }
.ops-counts li { display: flex; justify-content: space-between; gap: 1rem; }
.ops-inline { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0.2rem 0.3rem 0.2rem 0; }
.ops-stack { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.4rem; }
.ops-block { display: grid; gap: 0.75rem; }
.ops-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ops-form-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ops-form-grid label { display: grid; gap: 0.3rem; font-size: var(--app-text-sm); font-weight: 600; }
.ops-num { width: 6.5rem; }
.ops-cur { width: 4.5rem; text-transform: uppercase; }
.ops-text { min-width: 10rem; flex: 1 1 10rem; }
.ops-table td { vertical-align: top; }

/* ── My Invitations: server-side pages ───────────────────────────────── */
.attendee-toolbar__apply { min-height: 2.75rem; }
.attendee-per-page .attendee-sort__select { min-width: 4.5rem; }
.attendee-section__continued { font-weight: 400; color: var(--app-muted); font-size: 0.85em; }
.attendee-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1.5rem 0 0.5rem; }
.attendee-pager__range { margin: 0; color: var(--app-muted); font-size: var(--app-text-sm); }
.attendee-pager__nav { display: flex; align-items: center; gap: 0.5rem; }
.attendee-pager__nav .button { min-height: 2.75rem; min-width: 2.75rem; }
.attendee-pager__label { font-size: var(--app-text-sm); white-space: nowrap; }
@media (max-width: 47.99rem) {
    /* Platform Owner console: many dock items (Messaging added) — columns may shrink, labels ellipsize. */
    .app-dock { grid-auto-columns: minmax(0, 1fr); }
    .app-dock__link > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ops-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ops-tabs .inbox-tab { flex: none; }
}
/* Platform console: eight sections still fit one row on a laptop. */
@media (min-width: 48rem) and (max-width: 90rem) {
    .admin-nav.app-nav--desktop { flex-wrap: nowrap; gap: 0.1rem; }
    .admin-nav .app-nav__link { padding-inline: 0.5rem; font-size: 0.84rem; white-space: nowrap; }
}
.ops-table input.ops-num { min-width: 4.75rem; }
.ops-table td:nth-child(3) { min-width: 8.5rem; }
.ops-table td:nth-child(4), .ops-table td:nth-child(5) { min-width: 12rem; }

/* ── Keyboard focus that is always visible (V1 accessibility pass) ──────────
   Composite inputs hide their inner input's outline, so the container shows
   the same ring as a plain input; list-style options get an inset ring rather
   than a faint tint alone (WCAG 2.4.7 / non-text contrast). */
.country-picker__combo:focus-within,
.label-picker:focus-within {
    border-color: color-mix(in srgb, var(--app-focus) 70%, var(--app-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-focus) 22%, transparent);
}

.choice-sheet__cancel:focus-visible,
.tgt-option:focus-visible,
.ui-locale__option:focus-visible,
.ef-info-btn:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-focus) 60%, transparent);
}

/* Skip link: first focusable element of every app page, visible on focus. */
.skip-link {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.55rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--app-card);
    color: var(--app-text);
    box-shadow: 0 0 0 2px var(--app-focus);
    text-decoration: none;
}
.skip-link:focus {
    top: 0.75rem;
}
#app-main:focus {
    outline: none;
}


/* ==========================================================================
   Event Day — the door (organiser). Phone-first: one big scan action, a
   fast search, full-width rows with generous touch targets, a bottom sheet
   for the party. Flat, high-contrast surfaces (bright venues, glare): no
   gradients, no translucency. Logical properties throughout (RTL).
   ========================================================================== */
.ed-grid { display: grid; gap: var(--app-space-4); }
.ed-live { display: grid; gap: var(--app-space-3); }
.ed-progress__headline {
    margin: 0;
    font-family: var(--app-display);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.ed-progress__unit {
    display: block;
    margin-block-start: 0.3rem;
    font-family: var(--app-font);
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}
.ed-progress__bar {
    block-size: 0.55rem;
    margin-block-start: var(--app-space-2);
    border-radius: var(--app-radius-pill);
    background: var(--app-bg-deep);
    overflow: hidden;
}
.ed-progress__bar > span {
    display: block;
    block-size: 100%;
    background: var(--app-ok);
    transition: inline-size 240ms var(--app-ease);
}
.ed-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--app-space-2); }
.ed-metric { min-width: 0; padding: 0.55rem 0.4rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-surface); text-align: center; }
.ed-metric__value { margin: 0; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-metric__label { margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--app-muted); line-height: 1.25; }

.ed-door { display: grid; gap: var(--app-space-3); }
.ed-scan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    inline-size: 100%;
    min-block-size: 3.6rem;
    font-size: 1.12rem;
    font-weight: 600;
}
.ed-scan-button .ui-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.ed-scanner { display: grid; gap: var(--app-space-2); justify-items: center; }
.ed-scanner[hidden], .ed-scan-fallback[hidden] { display: none; }
.ed-scanner__video { inline-size: 100%; max-inline-size: 26rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--app-radius); background: #111; }
.ed-scanner__hint { margin: 0; text-align: center; color: var(--app-muted); }
.ed-search { display: grid; gap: var(--app-space-2); }
.ed-search input[type="search"] {
    inline-size: 100%;
    min-block-size: 3.1rem;
    padding-inline: 1rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 1.05rem;
}
.ed-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ed-chip {
    min-block-size: 2.5rem;
    padding-inline: 0.95rem;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-pill);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.ed-chip[aria-pressed="true"] { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-accent-text); }
.ed-status { margin: 0; min-block-size: 1.2em; color: var(--app-muted); }
.ed-status--ok { color: var(--app-ok); }
.ed-status--bad { color: var(--app-bad); }
.ed-status--warn { color: var(--app-warn); }
.ed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ed-row {
    display: flex;
    align-items: center;
    gap: var(--app-space-3);
    inline-size: 100%;
    min-block-size: 3.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.ed-row:hover { border-color: var(--app-line-strong); }
.ed-row--in { background: var(--app-ok-soft); border-color: color-mix(in srgb, var(--app-ok) 30%, var(--app-line)); }
.ed-row__main { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.ed-row__name { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.ed-row__meta { font-size: 0.84rem; color: var(--app-muted); overflow-wrap: anywhere; }
.ed-pill {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
    border-radius: var(--app-radius-pill);
    background: var(--app-bg-deep);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.ed-pill--in { background: var(--app-ok); color: #fff; }
.ed-pill--muted { color: var(--app-muted); font-weight: 500; }
.ed-recent h2, .ed-settings--off h2 { margin-block: 0 var(--app-space-2); font-size: 1.05rem; }
.ed-recent__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ed-recent__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--app-space-2);
    inline-size: 100%;
    padding: 0.55rem 0;
    border: 0;
    border-block-end: 1px solid var(--app-line);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.ed-recent__name { font-weight: 600; overflow-wrap: anywhere; }
.ed-recent__what { grid-column: 1; font-size: 0.84rem; color: var(--app-muted); }
.ed-recent__time { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.ed-recent__empty { color: var(--app-muted); padding: 0.4rem 0; }
.ed-settings > summary { cursor: pointer; font-weight: 600; }
.ed-settings__form { display: grid; gap: var(--app-space-3); margin-block-start: var(--app-space-3); }
.ed-switch { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.ed-switch input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.15rem; flex: 0 0 auto; }
.ed-switch span { display: grid; gap: 0.15rem; }
.ed-switch small { color: var(--app-muted); font-size: 0.85rem; }

/* The party sheet: a bottom sheet on phones, a centred panel on desktop. */
.ed-sheet {
    inline-size: min(34rem, 100vw);
    max-inline-size: 100vw;
    max-block-size: 92vh;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
    background: var(--app-card);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}
.ed-sheet::backdrop { background: rgba(28, 24, 20, 0.55); }
.ed-sheet__inner { display: grid; gap: var(--app-space-3); padding: var(--app-space-4) var(--app-space-4) calc(var(--app-space-4) + env(safe-area-inset-bottom, 0px)); }
.ed-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--app-space-2); }
.ed-sheet__name { margin: 0; font-family: var(--app-display); font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.ed-sheet__close {
    flex: 0 0 auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--app-line);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.ed-banner { margin: 0; padding: 0.7rem 0.85rem; border-radius: var(--app-radius-sm); font-weight: 600; }
.ed-banner--ok { background: var(--app-ok-soft); color: var(--app-ok); }
.ed-banner--warn { background: var(--app-warn-soft); color: var(--app-warn); }
.ed-banner--bad { background: var(--app-bad-soft); color: var(--app-bad); }
.ed-facts { display: grid; gap: 0.55rem; margin: 0; }
.ed-fact { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--app-space-2); }
.ed-fact dt { color: var(--app-muted); font-size: 0.86rem; }
.ed-fact dd { margin: 0; overflow-wrap: anywhere; }
.ed-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.ed-tags li { padding: 0.2rem 0.55rem; border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-pill); font-size: 0.82rem; }
.ed-note { margin: 0.4rem 0 0; white-space: pre-line; }
.ed-sheet__actions { display: grid; gap: var(--app-space-3); }
.ed-primary { inline-size: 100%; min-block-size: 3.5rem; font-size: 1.1rem; font-weight: 600; }
.ed-stepper { display: flex; align-items: center; justify-content: center; gap: var(--app-space-3); }
.ed-stepper__btn {
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--app-line-strong);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 1.4rem;
    cursor: pointer;
}
.ed-stepper__btn:disabled { opacity: 0.4; cursor: default; }
.ed-stepper__value { min-inline-size: 2.5rem; text-align: center; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-recount { display: grid; gap: var(--app-space-2); justify-items: center; }
.ed-recount__label { color: var(--app-muted); font-size: 0.86rem; }
.ed-undo { justify-self: center; min-block-size: 2.75rem; }
.ed-undo.is-armed, .ed-pass-tools .is-armed { color: var(--app-bad); border-color: var(--app-bad); }
.ed-pass-tools { border-block-start: 1px solid var(--app-line); padding-block-start: var(--app-space-3); }
.ed-pass-tools > summary { cursor: pointer; color: var(--app-muted); font-size: 0.9rem; }
.ed-pass-tools .help { margin: var(--app-space-2) 0; }

@media (min-width: 48rem) {
    .ed-sheet { margin: auto; border-radius: var(--app-radius-lg); }
    .ed-grid { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-rows: auto auto 1fr; align-items: start; }
    .ed-grid > .ed-door { grid-column: 1; grid-row: 1 / span 3; }
    .ed-grid > .ed-live, .ed-grid > .ed-recent, .ed-grid > .ed-settings { grid-column: 2; }
    .ed-grid > .ed-settings--off { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .ed-progress__bar > span { transition: none; }
}

.seq-credits__activation { margin: 0.75rem 0 0.35rem; font-weight: 500; color: var(--app-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   Vitoqa visual system — premium layer (2026-10-03)
   ───────────────────────────────────────────────────────────────────────────
   One deliberate layer at the END of the cascade that refines the shared
   primitives every page is built from, instead of thirty pages restyling
   themselves. Principles (docs/architecture/VISUAL_SYSTEM.md):
     · hierarchy from typography and spacing, not from more boxes;
     · ONE accent for "you are here" and emphasis — bronze — used sparingly;
     · a strict action hierarchy: primary (espresso) › secondary (hairline) ›
       quiet (text) › destructive;
     · surfaces: the ivory page, paper cards, hairlines; shadows only where a
       surface genuinely floats (menus, dialogs);
     · numbers in the display serif, labels small and letter-spaced;
     · motion only on meaningful interaction, 160ms, honoured reduced-motion;
     · logical properties so Hebrew and Arabic are first-class.
   Nothing here changes markup, data or behaviour.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --app-bronze: var(--brand-bronze);
    /* Bronze for TEXT: 5.6:1 on ivory, 5.9:1 on paper (the brand bronze is
       4.4:1 — fine for underlines, icons and large display type, not for
       small labels). */
    --app-bronze-ink: #7a5b39;
    --app-champagne: var(--brand-champagne);
    --app-radius-pill: 0.6rem;
    --app-text-xs: 0.74rem;
    --app-text-sm: 0.86rem;
    --app-shadow-soft: 0 1px 1px rgba(28, 25, 22, 0.03), 0 10px 24px -14px rgba(28, 25, 22, 0.14);
    --app-shadow-pop: 0 14px 36px -14px rgba(28, 25, 22, 0.26), 0 2px 6px rgba(28, 25, 22, 0.06);
    --app-ease: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1 {
    font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.45rem);
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.1;
    text-wrap: balance;
}

h2 {
    font-size: 1.04rem;
    font-weight: 650;
    letter-spacing: 0;
}

/* Small bronze text outside the layer's own rules: the account-menu
   "My Account" link (0.74 rem) and the admin initials avatar (0.85 rem on
   champagne) both read in the bronze ink, not the 4.4:1 brand bronze. */
.app-account__identity-link,
.admin-row__avatar {
    color: var(--app-bronze-ink);
}

.eyebrow {
    color: var(--app-bronze-ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.page-head {
    align-items: flex-end;
    margin-bottom: 1.7rem;
}

.page-head > div > .muted,
.page-head > div > .meta {
    max-width: 62ch;
}

.page-head .actions {
    gap: 0.5rem;
}

/* ── Shell: a quiet bar on the page, not a boxed widget ────────────────── */
.app-topbar {
    padding: 0.75rem 0 0.8rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
}

.app-brand__sub {
    letter-spacing: 0.01em;
}

.app-nav--desktop {
    gap: 0.15rem;
}

.app-nav__link {
    position: relative;
    padding: 0.4rem 0.85rem 0.5rem;
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
}

.app-nav__link:hover {
    background: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
    color: var(--app-text);
}

.app-nav__link.is-active {
    background: transparent;
    color: var(--app-text);
}

.app-nav__link.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0.85rem;
    bottom: 0.18rem;
    height: 2px;
    border-radius: 2px;
    background: var(--app-bronze);
}

.app-nav__link.is-active .ui-icon {
    color: var(--app-bronze);
}

.app-account__summary:hover,
.app-account[open] .app-account__summary {
    background: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
    border-color: transparent;
}

.app-account__panel {
    box-shadow: var(--app-shadow-pop);
}

.app-dock__link.is-active {
    color: var(--app-text);
}

.app-dock__link.is-active::before {
    background: var(--app-bronze);
}

.page-local-tab.is-active {
    border-bottom-color: var(--app-bronze);
}

/* ── Action hierarchy ──────────────────────────────────────────────────── */
/* Base: shape, weight and motion only — padding and size stay with the
   existing base rule and the compact / icon variants that override it. */
button,
.button {
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: transform var(--app-ease), background var(--app-ease), border-color var(--app-ease), box-shadow var(--app-ease), color var(--app-ease);
}

/* Secondary (hairline) hover — never the primary, WhatsApp or danger kinds. */
.button:not(.button-primary):not(.button-whatsapp):not(.button-danger):not(.button-quiet):hover {
    background: var(--app-bg);
    border-color: var(--app-line-strong);
}

.button-primary {
    background: var(--app-accent);
    color: var(--app-accent-text);
    border-color: transparent;
}

.button-primary:hover,
.panel:not(.wide) button[type="submit"]:hover {
    background: var(--brand-charcoal);
    border-color: transparent;
    box-shadow: 0 8px 18px -10px rgba(28, 25, 22, 0.55);
    transform: translateY(-1px);
}

.button-primary:active,
.panel:not(.wide) button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

button.button-quiet,
.button-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--app-text);
}

button.button-quiet:hover,
.button-quiet:hover {
    background: color-mix(in srgb, var(--app-accent-soft) 60%, transparent);
    border-color: transparent;
}

.button-danger,
button.button-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--app-bad) 35%, transparent);
    color: var(--app-bad);
}

.button-danger:hover,
button.button-danger:hover {
    background: var(--app-bad-soft);
    border-color: var(--app-bad);
}

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

.button-icon-text .ui-icon,
.button > .ui-icon:not(:only-child),
.button-primary > .ui-icon:not(:only-child) {
    margin-inline-end: 0.45rem;
}

a:not([class]) {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.card {
    border-color: var(--app-line);
}

@media (min-width: 48rem) {
    .card {
        padding: 1.35rem 1.45rem 1.5rem;
    }
}

.card > h2:first-child {
    margin-bottom: 0.85rem;
}

.card--next {
    background: color-mix(in srgb, var(--app-accent-soft) 26%, var(--app-card));
    border-color: color-mix(in srgb, var(--app-champagne) 45%, var(--app-line));
}

.priority-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.priority-actions .button,
.priority-actions .button-primary {
    flex: 0 0 auto;
    width: auto;
}

/* Entity rows (dashboard, events on phones): compact actions, not a stack of
   full-width buttons. */
.entity-card__actions,
.record-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    align-items: center;
    gap: 0.4rem;
}

.entity-card__actions .button,
.entity-card__actions .button-primary,
.entity-card__actions .button-quiet,
.record-card__actions .button,
.record-card__actions .button-primary,
.record-card__actions .button-quiet,
.record-card__actions button {
    width: auto;
    min-height: 2.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--app-radius-pill);
    font-size: var(--app-text-sm);
    white-space: nowrap;
}

@media (min-width: 48rem) {
    .entity-card__actions,
    .record-card__actions {
        justify-content: flex-end;
    }
}

.entity-card__title,
.record-card__title {
    font-size: 1.2rem;
}

/* Event cards (dashboard home, events on phones): the action cluster is ONE
   quiet navigation row — Guests · Invitation · Seating as equal, lightweight
   pills beside a quiet "···" — never a dark primary button next to plain
   ones, never a stack. It sits on the card's own baseline; the hover state
   is the bronze hairline the shell uses for "you are here". */
.entity-card__actions--nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

.entity-card__actions--nav .button,
.entity-card__actions--nav .button-compact {
    min-height: 2.15rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-pill);
    background: transparent;
    color: var(--app-text);
    font-size: var(--app-text-sm);
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    white-space: nowrap;
}

.entity-card__actions--nav .button:hover,
.entity-card__actions--nav .button-compact:hover {
    border-color: color-mix(in srgb, var(--app-bronze, #7c5c2e) 55%, var(--app-line));
    background: color-mix(in srgb, var(--app-accent-soft) 45%, transparent);
    transform: none;
}

.entity-card__actions--nav .button:focus-visible,
.entity-card__actions--nav .button-compact:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.entity-card__actions--nav .button[disabled],
.entity-card__actions--nav .button-compact[disabled] {
    color: var(--app-muted);
    border-style: dashed;
    cursor: not-allowed;
}

.entity-card__actions--nav .overflow-menu {
    margin-inline-start: 0.1rem;
}

.entity-card__actions--nav .overflow-menu__button {
    min-width: 2.15rem;
    min-height: 2.15rem;
    border-color: transparent;
    background: transparent;
    color: var(--app-muted);
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.entity-card__actions--nav .overflow-menu__button:hover,
.entity-card__actions--nav .overflow-menu[open] > .overflow-menu__button {
    border-color: transparent;
    background: color-mix(in srgb, var(--app-accent-soft) 60%, transparent);
    color: var(--app-text);
}

@media (min-width: 48rem) {
    /* Desktop: one row, right-aligned with the card's text column; never wraps
       unless the card itself is narrower than the row needs. */
    .entity-card__actions--nav {
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-self: center;
    }
}

/* Events table: the per-row tool links read as one quiet row. */
.event-row__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    min-width: 15rem;
    font-size: var(--app-text-sm);
}

.event-row__links a {
    color: var(--app-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.event-row__links a:hover {
    border-bottom-color: var(--app-bronze);
}

/* ── Numbers: a flat strip, not a box in a box ─────────────────────────── */
.summary-board {
    padding: 0.4rem 0 1.05rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 1.4rem;
}

.summary-board__main {
    gap: 0.5rem;
}

.summary-metric {
    text-align: start;
    padding: 0.2rem 0.75rem 0.2rem 0;
    border-inline-end: 1px solid var(--app-line);
}

.summary-metric:last-child {
    border-inline-end: 0;
}

.summary-metric__value {
    font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem);
    letter-spacing: -0.022em;
}

.summary-metric__label {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.summary-board__progress {
    padding-top: 0.75rem;
    border-top: 0;
}

.stat-meter__fill {
    background: var(--app-bronze);
}

.admin-summary {
    padding: 0.4rem 0 0.6rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
    box-shadow: none;
}

.admin-stat__value,
.stat__value {
    letter-spacing: -0.02em;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap {
    border-color: var(--app-line);
    border-radius: var(--app-radius-lg);
}

th,
td {
    padding: 0.72rem 0.85rem;
}

th {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    font-weight: 650;
    background: transparent;
    border-bottom: 1px solid var(--app-line-strong);
}

tbody tr:hover td {
    background: color-mix(in srgb, var(--app-accent-soft) 26%, transparent);
}

/* ── Badges: status pills, lowercase, calm ─────────────────────────────── */
.badge {
    min-height: 1.5rem;
    padding: 0.1rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
label,
.label {
    margin: 0.9rem 0 0.35rem;
    font-size: var(--app-text-sm);
    font-weight: 600;
}

.help {
    font-size: var(--app-text-sm);
}

.filter-field__label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

input:focus,
select:focus,
textarea:focus {
    border-color: color-mix(in srgb, var(--app-bronze) 70%, var(--app-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-bronze) 20%, transparent);
}

/* ── Notices: one calm language — hairline, accent edge, no shouting ───── */
.notice,
.flash {
    padding: 0.8rem 1rem;
    border: 1px solid var(--app-line);
    border-inline-start: 3px solid var(--app-muted);
    border-radius: var(--app-radius);
    font-weight: 500;
}

.notice--ok,
.notice--success {
    border-inline-start-color: var(--app-ok);
    background: var(--app-ok-soft);
    color: var(--app-ok);
}

.notice--warn,
.notice--draft {
    border-inline-start-color: var(--app-warn);
}

.notice--error,
.flash {
    border-inline-start-color: var(--app-bad);
    background: var(--app-bad-soft);
    color: var(--app-bad);
}

.notice--info {
    border-inline-start-color: var(--app-bronze);
    background: var(--app-card);
}

.notice--archived {
    border-inline-start-color: var(--app-muted);
}

/* ── Empty states: a calm, solid surface with one clear next step ──────── */
.empty-state,
.attendee-empty {
    padding: 2.6rem 1.5rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
}

.empty-state__icon,
.attendee-empty__mark {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-bronze-ink);
    box-shadow: none;
}

.empty-state h2,
.attendee-empty h2 {
    font-size: 1.45rem;
}

.empty-state .help,
.attendee-empty p {
    max-width: 36ch;
}

/* ── Menus, pagination, chips ──────────────────────────────────────────── */
.overflow-menu__button {
    border-radius: 999px;
    color: var(--app-muted);
}

.overflow-menu__button:hover,
.overflow-menu[open] > .overflow-menu__button {
    background: color-mix(in srgb, var(--app-accent-soft) 60%, transparent);
    border-color: transparent;
    color: var(--app-text);
}

.overflow-menu__panel {
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-pop);
}

.page-link {
    border-radius: var(--app-radius-pill);
}

/* ── Motion ────────────────────────────────────────────────────────────── */
.card,
.entity-card,
.record-card,
.inv-card,
.work-card,
.work-module {
    transition: border-color var(--app-ease), box-shadow var(--app-ease), transform var(--app-ease);
}

a.entity-card:hover,
a.inv-card:hover,
a.work-card:hover,
.inv-card:hover,
.work-card:hover {
    box-shadow: var(--app-shadow);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    button,
    .button,
    .card,
    .entity-card,
    .record-card,
    .inv-card,
    .work-card,
    .work-module {
        transition: none;
    }

    button[type="submit"]:hover,
    .button-primary:hover,
    a.entity-card:hover,
    a.inv-card:hover,
    a.work-card:hover,
    .inv-card:hover,
    .work-card:hover {
        transform: none;
    }
}

/* ── Phones: designed, not collapsed ───────────────────────────────────── */
@media (max-width: 47.99rem) {
    .app-topbar {
        padding: 0.65rem 0 0.7rem;
    }

    .page-head {
        margin-bottom: 1.25rem;
    }

    .page-head .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .page-head .actions > .button-primary,
    .page-head .actions > form,
    .page-head .actions > :only-child {
        grid-column: 1 / -1;
    }

    .page-head .actions > .button,
    .page-head .actions > .button-primary,
    .page-head .actions > .page-tools > summary {
        width: 100%;
        justify-content: center;
    }

    /* A long event title in the eyebrow: three lines at most, never a wall of capitals. */
    .page-head .eyebrow {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        letter-spacing: 0.12em;
    }

    .summary-metric {
        padding-inline-end: 0.5rem;
    }

    .summary-metric:nth-child(3n) {
        border-inline-end: 0;
    }

    .summary-metric__value {
        font-size: 1.5rem;
    }

    .summary-metric__label {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
}

/* ── Auth: one centred panel that feels like a door, not a form ────────── */
.panel:not(.wide) {
    padding: 2.1rem 1.75rem 2.2rem;
    border-radius: 1.1rem;
    box-shadow: var(--app-shadow);
}

.panel:not(.wide) h1 {
    font-size: 1.8rem;
}

.panel:not(.wide) button[type="submit"],
.panel:not(.wide) .button-primary {
    width: 100%;
    min-height: 2.9rem;
}

/* Plan & usage: a card titled "Active events" need not repeat "Active
   events" as its only row label — the number and the meter are the content. */
.card > h2 + .commercial-usage-metric > .commercial-usage-metric__top > span:first-child {
    display: none;
}

.card > h2 + .commercial-usage-metric > .commercial-usage-metric__top {
    justify-content: flex-start;
}

.card > h2 + .commercial-usage-metric > .commercial-usage-metric__top > strong {
    font-family: var(--app-display);
    font-size: 1.35rem;
    font-weight: 500;
}


/* ── Invitations navigation badge (2026-10-05) ─────────────────────────────
   The person's own pending-decision count beside "Invitations": the Inbox
   badge's geometry in the calm bronze accent — a quiet "something is waiting
   for you", never the red alert tone (it is not an error or an unread
   message). The number itself is aria-hidden; the link carries a phrase. */
.app-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.32rem;
    margin-inline-start: 0.35rem;
    border-radius: 99px;
    background: var(--app-bronze);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.app-dock__link--attendee {
    position: relative;
}

.app-dock__badge {
    position: absolute;
    top: 0.15rem;
    inset-inline-end: 0.5rem;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.22rem;
    border-radius: 99px;
    background: var(--app-bronze);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 0.95rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
    .app-nav__badge,
    .app-dock__badge {
        border: 1px solid CanvasText;
    }
}

/* ── Organisation suspension experience (2026-10-09) ────────────────────
   Calm and neutral: a suspended workspace reads "Temporarily unavailable",
   never alarm styling. Logical properties only (RTL-safe). */
.workspace-paused {
    margin: 1.25rem 0 0;
}
.workspace-paused__actions {
    justify-content: center;
}
.org-list__item--unavailable {
    background: var(--app-bg-deep);
    color: var(--app-muted);
}
.org-list__item--unavailable strong {
    color: var(--app-text);
}
.org-list__item--unavailable .help {
    margin: 0.15rem 0 0.6rem;
}
.admin-suspension-mode {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
}
.admin-suspension-mode legend {
    padding: 0 0.25rem;
    font-weight: 600;
}
.admin-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.5rem 0;
}
.admin-choice .help {
    display: block;
}
.notice--confirm {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--app-line-strong);
    border-inline-start: 4px solid var(--app-warn);
    border-radius: var(--app-radius);
    background: var(--app-warn-soft);
}
.notice--confirm p {
    margin: 0 0 0.6rem;
}

/* —— One physical header in every language ——
   The authenticated application header and the phone dock carry
   dir="ltr" + data-app-header (AppShell::HEADER_DIR): the Vitoqa identity
   stays on the left, the primary navigation keeps the English
   left-to-right order and the account stays on the right in Arabic and
   Hebrew too. Labels keep their own direction (dir="auto"); the account
   menu's contents read in the page language (its own dir), so the panel is
   anchored to the header's physical right edge — the side its account
   button is always on. The rest of the page stays RTL. */
[data-app-header] .app-account__panel {
    inset-inline: auto;
    right: 0;
}
[data-app-header] .app-nav__text,
[data-app-header] .app-brand__sub,
[data-app-header] .app-account__name {
    unicode-bidi: isolate;
}

/* ── Platform Owner console: "More" in the navigation (2026-10-13) ──
   The console has more destinations than one bar holds on a laptop: the
   least frequent sit in a native <details class="js-menu"> (menu.js: outside
   click, Escape, one open at a time, viewport fit). It reads as one more
   navigation item; when the current page lives inside, "More" carries the
   bronze underline and the page is marked inside the panel. On phones the
   dock keeps four destinations and the rest open from its own "More". */
.app-nav-more {
    position: relative;
    display: inline-flex;
}
.app-nav-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.app-nav-more > summary::-webkit-details-marker {
    display: none;
}
.app-nav-more__caret {
    inline-size: 0.42rem;
    block-size: 0.42rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    opacity: 0.7;
}
.app-nav-more[open] .app-nav-more__caret {
    transform: translateY(0.1rem) rotate(-135deg);
}
.app-nav-more__panel {
    position: absolute;
    z-index: 45;
    inset-block-start: calc(100% + 0.55rem);
    inset-inline-end: 0;
    display: grid;
    gap: 0.1rem;
    min-inline-size: 14.5rem;
    max-inline-size: min(22rem, calc(100vw - 2rem));
    padding: 0.4rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--brand-radius-md, 0.65rem);
    box-shadow: var(--app-shadow-pop);
    text-align: start;
}
.app-nav-more__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-block-size: 2.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--brand-radius-sm, 0.4rem);
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 560;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.app-nav-more__link .ui-icon {
    flex: none;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--app-muted);
}
.app-nav-more__link:hover,
.app-nav-more__link:focus-visible {
    background: var(--app-accent-soft);
}
.app-nav-more__link.is-active {
    box-shadow: inset 2px 0 0 var(--app-bronze);
    background: color-mix(in srgb, var(--app-accent-soft) 70%, transparent);
}
[dir="rtl"] .app-nav-more__link.is-active {
    box-shadow: inset -2px 0 0 var(--app-bronze);
}
.app-nav-more__link.is-active .ui-icon {
    color: var(--app-bronze);
}
/* In the phone dock: the summary is one more dock cell; the panel opens upwards. */
.app-dock > .app-nav-more {
    display: grid;
}
.app-dock > .app-nav-more > summary {
    justify-content: center;
}
.app-nav-more__panel--dock {
    position: fixed;
    inset-block-start: auto;
    inset-block-end: calc(var(--app-dock-h, 3.5rem) + env(safe-area-inset-bottom, 0px) + 0.5rem);
    inset-inline-end: 0.6rem;
}
@media (prefers-reduced-motion: no-preference) {
    .app-nav-more__caret { transition: transform var(--app-ease); }
    .app-nav-more__link { transition: background var(--app-ease); }
}

/* ── Platform Owner — Templates catalogue (.tplc-*, 2026-10-13) ──
   An entity catalogue: one card per template family (its own state, use and
   controls), its designs (variations) as compact rows inside it, a flat
   numbers strip and one toolbar above. The family-detail page puts the real
   invitation in a device stage beside a quiet control panel. Status is a
   word in a badge (a dot is a second, not the only, cue); logical
   properties throughout; the device frame is an object (never mirrored). */
.tplc-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tplc-stat__hint { margin: 0.2rem 0 0; font-size: var(--app-text-xs, 0.74rem); color: var(--app-muted); }
.tplc-summary-note { margin: -0.5rem 0 1.25rem; font-size: var(--app-text-sm, 0.86rem); max-inline-size: 70ch; }
.tplc-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 0.9rem; margin: 0 0 1.1rem; }
.tplc-field { display: grid; gap: 0.3rem; min-inline-size: 9.5rem; }
.tplc-field--search { flex: 1 1 15rem; }
.tplc-field__label { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-muted); }
.tplc-field input, .tplc-field select { inline-size: 100%; min-block-size: 2.65rem; }
.tplc-toolbar__actions { display: flex; gap: 0.4rem; align-items: center; }
.tplc-results { margin: 0 0 0.85rem; font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-list { display: grid; gap: 1.15rem; }
.tplc-family { padding: 1.25rem 1.35rem 1.35rem; scroll-margin-block-start: 5.5rem; }
.tplc-family__head { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; gap: 1.1rem 1.35rem; align-items: start; }
.tplc-thumb { display: block; inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--brand-radius-sm, 0.4rem); background: var(--app-bg); box-shadow: 0 0 0 1px var(--app-line), 0 0.6rem 1.2rem -0.9rem color-mix(in srgb, var(--app-text) 40%, transparent); }
.tplc-thumb--none { background: linear-gradient(160deg, var(--app-bg), color-mix(in srgb, var(--app-accent-soft) 70%, var(--app-bg))); }
.tplc-kicker { margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-bronze-ink, #7a5b39); }
.tplc-family__info h2 { margin: 0; font-family: var(--app-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.15; overflow-wrap: anywhere; }
[dir="rtl"] .tplc-family__info h2, [lang="ar"] .tplc-family__info h2, [lang="he"] .tplc-family__info h2 { font-family: var(--brand-sans-rtl, inherit); font-weight: 600; letter-spacing: 0; }
.tplc-meta { margin: 0.3rem 0 0.55rem; font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 0.35rem; }
.tplc-count, .tplc-note, .tplc-usage, .tplc-usage-line { font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-note { font-style: italic; }
.tplc-usage-line { margin: 0 0 0.5rem; }
.tplc-usage { display: block; }
/* Usage state: a small mark, never a coloured badge — filled bronze = in use
   now, hollow = previously used (only archived invitations keep it), a short
   dash = never used. Text carries the meaning; the mark only echoes it. */
.tplc-use { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.5rem; font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-use--line { margin: 0.15rem 0 0; }
.tplc-use--current { color: var(--app-text); }
.tplc-use__dot { flex: none; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; transform: translateY(-0.05rem); background: var(--brand-bronze); }
.tplc-use--previous .tplc-use__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand-bronze); }
.tplc-use--never .tplc-use__dot { border-radius: 1px; block-size: 1.5px; inline-size: 0.5rem; background: var(--app-muted); transform: translateY(-0.2rem); }
.tplc-how { margin: -0.75rem 0 1.25rem; max-inline-size: 70ch; font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-how summary { cursor: pointer; color: var(--app-text); font-weight: 600; inline-size: fit-content; }
.tplc-how summary:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; border-radius: 2px; }
.tplc-how p { margin: 0.4rem 0 0; }
.tplc-panel .tplc-how { margin: 0.75rem 0 0; }
.tplc-badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.tplc-dot { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: currentColor; }
.tplc-badge--hidden .tplc-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.tplc-badge--retired .tplc-dot { border-radius: 1px; }
.tplc-family__actions { display: grid; gap: 0.5rem; justify-items: end; align-content: start; }
.tplc-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tplc-family__actions .tplc-actions { justify-content: end; }
.tplc-act { margin: 0; }
.tplc-btn { min-block-size: 2.25rem; padding-inline: 0.75rem; font-size: 0.84rem; }
/* One strict hierarchy: Make available is the only filled action; Hide is a
   hairline secondary and Retire the quietest (it is never the obvious click). */
.tplc-act button.tplc-btn--hide,
.tplc-act button.tplc-btn--retire { background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-line-strong); box-shadow: none; transform: none; }
.tplc-act button.tplc-btn--retire { color: var(--app-muted); border-color: var(--app-line); }
.tplc-act button.tplc-btn--hide:hover,
.tplc-act button.tplc-btn--retire:hover { background: var(--app-bg); color: var(--app-text); border-color: var(--app-line-strong); box-shadow: none; transform: none; }
.tplc-act button.tplc-btn--restore { background: var(--app-accent); color: var(--app-accent-text); border-color: transparent; }
.tplc-sub { margin: 1.15rem 0 0.65rem; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
.tplc-variations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.tplc-variation { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.85rem; padding: 0.75rem; border: 1px solid var(--app-line); border-radius: var(--app-radius, 0.65rem); background: color-mix(in srgb, var(--app-bg) 55%, var(--app-card)); }
.tplc-variation__thumb { display: block; border-radius: var(--brand-radius-sm, 0.4rem); }
.tplc-variation__thumb:focus-visible { outline: 2px solid var(--app-bronze); outline-offset: 3px; }
.tplc-variation__name { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.tplc-id { margin: 0.1rem 0 0.4rem; }
.tplc-id code { font-size: 0.74rem; color: var(--app-muted); background: none; padding: 0; overflow-wrap: break-word; }
.tplc-more { margin: 0.75rem 0 0; font-size: var(--app-text-sm, 0.86rem); }
.tplc-pages { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0; }
.tplc-pages__at { font-size: var(--app-text-sm, 0.86rem); color: var(--app-muted); }
.tplc-removal { margin: 2.25rem 0 0; padding: 1.25rem 0 0; border-block-start: 1px solid var(--app-line); max-inline-size: 72ch; }
.tplc-removal h2 { margin: 0 0 0.4rem; font-size: 1.04rem; }
.tplc-removal p { margin: 0 0 0.5rem; }
.tplc-confirm { margin: 0 0 1.25rem; padding: 1.25rem 1.35rem; }
.tplc-confirm h2 { margin: 0 0 0.5rem; }
.tplc-confirm__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
.tplc-flash:focus { outline: none; }
.tplc-flash:focus-visible { outline: 2px solid var(--app-bronze); outline-offset: 2px; }
.tplc-dialog { border: 0; padding: 0; inline-size: min(31rem, calc(100vw - 2rem)); border-radius: var(--app-radius-lg, 0.9rem); background: var(--app-card); color: var(--app-text); box-shadow: var(--app-shadow-pop); }
.tplc-dialog::backdrop { background: color-mix(in srgb, var(--app-text) 38%, transparent); }
.tplc-dialog__inner { display: grid; gap: 0.75rem; padding: 1.5rem 1.5rem 1.25rem; margin: 0; }
.tplc-dialog__title { margin: 0; font-family: var(--app-display); font-weight: 500; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
[dir="rtl"] .tplc-dialog__title { font-family: inherit; font-weight: 650; font-size: 1.2rem; }
.tplc-dialog__body, .tplc-dialog__note, .tplc-dialog__inuse { margin: 0; }
.tplc-dialog__actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.5rem; margin-block-start: 0.5rem; }

/* Family detail: the real invitation in a device stage, the controls beside it. */
.tplc-back { color: inherit; text-decoration: none; }
.tplc-back::before { content: "‹ "; }
[dir="rtl"] .tplc-back::before { content: "› "; }
.tplc-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.5rem; align-items: start; }
.tplc-stage { display: grid; gap: 0.75rem; min-inline-size: 0; }
.tplc-stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tplc-stage__title { margin: 0; font-weight: 650; }
.tplc-stage__tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tplc-stage__note { margin: 0; font-size: var(--app-text-sm, 0.86rem); }
.tplc-device { margin-inline: auto; overflow: hidden; background: var(--app-card); border: 1px solid var(--app-line-strong); box-shadow: 0 1.6rem 3rem -2rem color-mix(in srgb, var(--app-text) 55%, transparent); }
.tplc-device--phone { inline-size: min(100%, 24.4rem); aspect-ratio: 390 / 800; border-radius: 2.1rem; padding: 0.5rem; background: color-mix(in srgb, var(--app-text) 88%, var(--app-card)); }
.tplc-device--phone .tplc-device__frame { border-radius: 1.65rem; }
.tplc-device--desktop { inline-size: 100%; aspect-ratio: 16 / 10; border-radius: var(--app-radius-lg, 0.9rem); }
.tplc-device__frame { display: block; inline-size: 100%; block-size: 100%; border: 0; background: #fff; }
.tplc-panel { display: grid; gap: 1rem; }
.tplc-panel__group { padding: 1.1rem 1.15rem; border: 1px solid var(--app-line); border-radius: var(--app-radius, 0.65rem); background: var(--app-card); display: grid; gap: 0.75rem; }
.tplc-panel__group h2 { margin: 0; font-size: 1.04rem; }
.tplc-chooser { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tplc-chooser__item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.4rem; border-radius: var(--brand-radius-sm, 0.4rem); color: inherit; text-decoration: none; border: 1px solid transparent; }
.tplc-chooser__item:hover { background: var(--app-accent-soft); }
.tplc-chooser__item.is-on { border-color: var(--app-line-strong); background: color-mix(in srgb, var(--app-accent-soft) 55%, transparent); box-shadow: inset 2px 0 0 var(--app-bronze); }
[dir="rtl"] .tplc-chooser__item.is-on { box-shadow: inset -2px 0 0 var(--app-bronze); }
.tplc-chooser__thumb { inline-size: 2.6rem; block-size: auto; }
.tplc-chooser__text { display: grid; gap: 0.25rem; justify-items: start; min-inline-size: 0; }
.tplc-chooser__name { font-weight: 600; overflow-wrap: anywhere; }
.tplc-seg { display: grid; gap: 0.35rem; }
.tplc-seg__row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tplc-seg__opt { display: inline-flex; align-items: center; min-block-size: 2.4rem; padding: 0.35rem 0.8rem; border: 1px solid var(--app-line); border-radius: var(--app-radius-pill, 0.6rem); color: inherit; text-decoration: none; font-size: 0.9rem; font-weight: 560; }
.tplc-seg__opt:hover { background: var(--app-accent-soft); }
.tplc-seg__opt.is-on { border-color: var(--app-text); box-shadow: inset 0 0 0 1px var(--app-text); }
.tplc-help { margin: 0; font-size: var(--app-text-sm, 0.86rem); }
.tplc-manage { display: grid; gap: 0.2rem; padding-block-end: 0.85rem; border-block-end: 1px solid var(--app-line); }
.tplc-manage:last-of-type { border-block-end: 0; }
.tplc-manage__name { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.tplc-manage .tplc-actions { margin-block-start: 0.35rem; }

@media (max-width: 63.99rem) {
    .tplc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tplc-summary .admin-stat:nth-child(3) { border-inline-end: 0; }
    .tplc-summary .admin-stat:nth-child(-n + 3) { border-block-end: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent); }
    .tplc-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
    .tplc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tplc-summary .admin-stat { border-inline-end: 0; border-block-end: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent); }
    .tplc-summary .admin-stat:nth-child(odd) { border-inline-end: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent); }
    .tplc-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tplc-field { min-inline-size: 0; }
    .tplc-field--search, .tplc-toolbar__actions { grid-column: 1 / -1; }
    .tplc-family { padding: 1rem; }
    .tplc-family__head { grid-template-columns: 4.75rem minmax(0, 1fr); }
    .tplc-family__actions { grid-column: 1 / -1; justify-items: stretch; }
    .tplc-family__actions .tplc-actions { justify-content: start; }
    .tplc-variation { grid-template-columns: 3.75rem minmax(0, 1fr); }
}
/* The console's bar on narrow laptops and tablets (48–80rem): the brand and
   account keep the first row, every destination gets the second — never
   clipped behind the language switch. It wraps (long translated labels)
   instead of scrolling, so "More" can always open its panel. */
@media (min-width: 48rem) and (max-width: 79.99rem) {
    .admin-top { grid-template-columns: 1fr auto; }
    .admin-top > .app-brand { grid-column: 1; grid-row: 1; }
    .admin-top > .app-topbar__aside { grid-column: 2; grid-row: 1; justify-self: end; }
    .admin-top > .admin-nav.app-nav--desktop { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow: visible; flex-wrap: wrap; row-gap: 0.25rem; }
}